@font-face {font-family: 'KONE';src: url('../fonts/kone/KONEInformation.ttf');}

html {height:100%;width:100%;}
body {height:100%;width:100%;font-family: 'KONE'; position: relative; background-color: #F4F4F4; margin: 0;}

.margin-left-16 {margin-left:16px;}
.margin-right-16 {margin-right:16px;}

.success-block {margin-left:16px; margin-right:16px; height: 100vh}

.intro-div {display: inline-block;height: 100vh;position: relative;width:100%;z-index: 99999}


.topbar {height:50px; position: relative; background-color: #004987 !important;}
.topbar-success {height:50px; position: relative; background-color: #58AB27 !important; margin: 1px;}
.topbar-icon { float: left; text-align: center; width : 10%; top: 10px; padding-top: 13px;}
.topbar-success-icon { float: left; text-align: center; width : 10%; top: 10px; padding-top: 8px; font-size:25px; color:#fff;}
.topbar-title { float: right;text-align: center; color:#fff; width : 90%; font-size:18px; padding-top: 13px; }

.explanation {position: relative;height: 84px; margin-top: 26px;text-align: left; color:#3B4245; font-size:16px; }
.explanation-subtxt {position: relative;text-align: left; color:#3B4245; font-size:16px; }

.outro-subtxt {margin-top:11px; font-size: 14px; color:#fff;text-align: center;}
.outro-password {margin-top:11px; font-size: 14px; color:#fff;text-align: center;}

.input-email {margin-bottom:15px; position: relative; height:50px}
.input-email.error {height:57px !important}
.input-email.error > .login-bar {background: #F6A800 !important;}
.input-email.error > .login-error {opacity: 1}

.pos-absolute{ position : absolute; bottom: 0}

.boldtxt {font-weight: bold;}
.login-input {position: relative; background: transparent;text-align: left;border-radius:0;border:none; font-size: 16px; height: 25px;z-index: 5; left:0; width:100%;box-shadow: none; color:#3B4245; outline: none;}
.login-placeholder {color:#3B4245;left: 0;opacity: 0;position: absolute;top: 0px;transition: .2s ease; font-size:20px;}
.login-bar {background: #3B4245;height: 1px;left: 0;position: absolute;width: 100%;z-index: 10; margin-bottom:20px;}
.login-error {color: #F6A800;left: 0;position: absolute;width: 100%;z-index: 10; font-size: 12px; opacity: 0; margin-bottom:5px;}

.login-input:focus ~ .login-bar {background: #0071B9 }

.login-input:focus ~ .login-placeholder {opacity: 1;transform: translate(-12%, -100%) scale(0.75);z-index: 10; color: #8D9194;}


.reset-button {display:block;height: 48px;width:100%;background: #E0E4E6;text-align: center;color: #BABDBF;font-size: 16px;position: relative;}
.return-button {display:block;height: 48px;width:92%;background: #E0E4E6;text-align: center;color: #BABDBF;font-size: 16px;position: absolute; top: 70%;}
.reset-button.buttonactive, .return-button.buttonactive{background: #0071B9 !important; color:#FFFFFF !important}
.reset-txt {top:14px;position: absolute;width:100%}

.opacity-0 {opacity: 0}


.login-input:focus::-webkit-input-placeholder{ opacity: 0; }
.login-input:focus::-moz-placeholder{ opacity: 0; }
.login-input:focus:-ms-input-placeholder{ opacity: 0; }
.login-input::-webkit-input-placeholder {font-size:16px; color:#3B4245}
.login-input::-moz-placeholder {font-size:16px; color:#3B4245}
.login-input:-ms-input-placeholder {font-size:16px; color:#3B4245}