@font-face {
    font-family: 'Dosis-Reg';
    src: url('fonts/Dosis-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Dosis-Med';
    src: url('fonts/Dosis-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Dosis-Bold';
    src: url('fonts/Dosis-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
* { margin: 0; padding: 0; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body  { width: 100%; height: auto; font-size: 14px; background-color: #fff; color: #323a45; border-top: 1px solid #323a45; }
html.urmet, body.urmet { background-color: #eaedf2; }
html.elkron, body.elkron { background-color: #ffffff; }

.wf-active #application, .wf-inactive #application { visibility: visible !important; }

#wrapper { position: relative; width: 320px; margin: 0 auto; font-family: 'Dosis-Reg', sans-serif; }

#wrapper h1 { position: relative; background-position: center; background-repeat: no-repeat; margin: 0px auto; padding: 30px 0; }
#wrapper h1 span { display: none; visibility: hidden; }
.urmet #wrapper h1 { width: 106px; height: 44px; background-image: url(img/urmet_logo.png); }
.elkron #wrapper h1 { width: 246px; height: 49px; background-image: url(img/elkron_logo.png); }

#wrapper form { position: relative; width: 100%; }
#wrapper form p.msg { position: relative; padding: 10px 20px; font-size: 1.2em; }
#wrapper form p.error { position: relative; padding: 0px 20px; color: #f23005; display: none; }

#wrapper form .info { position: absolute; top: 179px; right: 17px; width: 45px; height: 45px; background-color: #fff; background-size: 100%; background-image: url(img/info-icon.png); cursor: pointer; }

#wrapper input { position: relative; font-family: 'Dosis-Reg', sans-serif; display: block; width: 285px; color: #323a45; margin: 15px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 0; }
#wrapper input.user, #wrapper input.pwd, #wrapper input.cpwd { width: 286px; height: 45px; padding-left: 45px; background-repeat: no-repeat; border: 1px solid #bfc5cd; font-size: 1.2em; }
#wrapper #access input.pwd { width: 230px; margin: 15px; }
input.user:-webkit-autofill { background-image: url(img/user-icon.png) !important; background-color: white !important; }
#wrapper input.user { background-image: url(img/user-icon.png) }
#wrapper input.pwd { background-image: url(img/pwd-icon.png); }
#wrapper input.cpwd { background-image: url(img/cpwd-icon.png); }
.send { width: 286px; height: 45px; background-color: #fff; color: #323a45; border: 3px solid #323a45; font-size: 1.4em; text-transform: uppercase; cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.send:hover { background-color: #323a45; color: #fff !important; }
#wrapper input.send { font-family: 'Dosis-Med', sans-serif; }

#wrapper #first-access { display: block; }
#wrapper #access { display: none; }

#overlay { position: absolute; z-index: 5; visibility: hidden; display: table; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); font-family: 'Dosis-Reg', sans-serif;  }
#overlay .overlay-cont { position: relative; width: 100%; height: 100%;  display: table-cell; vertical-align: middle; }
#overlay .overlay-cont .box { position: relative; width: 100%; height: auto; max-width: 540px; margin: 0 auto; background-color: #ffF; padding: 30px; line-height: 1.8em; }
#overlay .overlay-cont .box h2 { font-weight: 100; font-size: 1.3em; padding: 0 0 0px; }
#overlay .overlay-cont .box ul { padding: 20px 0 30px 20px; }
#overlay .overlay-cont .box ul li { font-size: 1.3em; }
#overlay .overlay-cont .box ul li .bold { font-family: 'Dosis-Med', sans-serif; }
#overlay .overlay-cont .box .send { width: 100%; text-align: center; line-height: 42px; margin-top: 25px; font-family: 'Dosis-Med', sans-serif; }
#overlay .overlay-cont #change { display: none; }
#overlay .overlay-cont #info { display: none; }
#overlay .overlay-cont #alert { display: none; }
#overlay .overlay-cont #alert span { font-size: 1.3em; }
#overlay input { border-radius: 0; }

#toggle-site { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; visibility: hidden; }
#toggle-site #toggle-load { position: absolute; background: rgba(255,255,255,.35) url(  img/ajax-loader.gif) no-repeat center; top: 0; left: 0; right: 0; bottom: 0; }

#application { display: none; }

.wf-loading #application { visibility: hidden; }