/*STRIP*/
* {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; outline: none;}
a {text-decoration: none; color: inherit;}
::placeholder {opacity: 0.6;}

/*BASICS*/
body {background-color: #ffffff; font-family: Verdana; overflow: hidden;}
.dn {display: none;}
.flexrow {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;}
.flexcol {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.icon {font-family: icon;}

/*SCROLLBAR*/
::-webkit-scrollbar {width: 6px; height: 6px;}
::-webkit-scrollbar-track {background: rgba(0,0,0,.1); border-radius: 10px;}
::-webkit-scrollbar-track:hover {background: rgba(0,0,0,.15);}
::-webkit-scrollbar-thumb {background: rgba(0,0,0,.2); border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: rgba(0,0,0,.25);}
::-webkit-scrollbar-thumb:active {background: rgba(0,0,0,.3);}

/*LAYOUT*/
body {height: 100vh;}
body > .bg-image {position: absolute; background-image: url('/html/media/logo_PM.png'); background-repeat: no-repeat; background-size: 100%; width: 80%; height: 100vh; margin-left: 10%; margin-top: 10%; opacity: 0.15; min-width: 900px; max-width: 1400px;}
body > .bg-image {-webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px);}
body > .bg-image {-moz-transition: margin-top 3s ease-in-out, opacity 2s ease-in-out; -webkit-transition: margin-top 3s ease-in-out, opacity 2s ease-in-out; transition: margin-top 3s ease-in-out, opacity 2s ease-in-out;}
body > .bg-image > .bg-image-sub {position: absolute; background-image: none; background-repeat: no-repeat; background-size: 100%; width: 60%; height: 100vh; margin-left: 10%; bottom: -290px; display: none;}

body > .login-box {position: absolute; bottom: 100px; right: 100px; background-color: #ffffff; width: 400px; padding: 22px; font-size: 20px; line-height: 30px; border-top-left-radius: 40px; border-bottom-right-radius: 40px; overflow: hidden; box-shadow: 0 2px 8px #dbdbdb;}
body > .login-box > .row-logo, body > .login-box > .row-username {margin-bottom: 16px;}

body > .login-box > .row-logo {height: 50px; background-image: url('/html/media/logo_PM.png'); background-repeat: no-repeat; background-size: contain;}

body > .login-box > .row-username:before, body > .login-box > .row-password:before {font-family: icon; width: 40px;}
body > .login-box > .row-username:before {content: '\f2c0';}
body > .login-box > .row-password:before {content: '\f069';}

body > .login-box > .row-username > input, body > .login-box > .row-password > input {width: calc(100% - 14px); height: 30px; box-shadow: none; outline: none; font-size: 16px; padding: 0 6px; border: 1px solid #ccc; border-radius: 4px;}

body > .login-box > .row-submit {margin-top: 16px;}
body > .login-box > .row-submit .submit {width: 30%; margin-left: 36px; background-color: #f2f2f2; cursor: pointer; padding: 6px 20px; border-radius: 6px; user-select: none; text-align: center; text-transform: uppercase; height: 30px; vertical-align: middle;}
body > .login-box > .row-submit .submit:hover {background-color: #e6e6e6;}

body > .login-box.submit > .row-username, body > .login-box.submit > .row-password, body > .login-box.submit > .row-submit .submit {opacity: 0.5;}
body > .login-box.submit > .row-submit .submit {cursor: default;}

@media (max-width: 648px) {
    body > .bg-image {left: -200px; min-width: 1200px;}
    body > .login-box {bottom: 10px; right: 10px; left: 10px; width: auto;}
}
@media (max-width: 324px) {
    body > .login-box {padding: 18px 6px;}
}

body.ena > .login-box > .row-logo {background-image: url('/html/media/logo_ENA.png');}
body.ena > .bg-image > .bg-image-sub {background-image: url('/html/media/logo_ENA.png'); display: block; opacity: 0.8;}
body.ena > .bg-image {opacity: 0.1;}

body > .bg-image.init {margin-top: 0; opacity: 0;}