/* ======== UI LOGIN / REGISTRATION ========= */
/* ========================================== */



#ui_container_index {width: 100%; min-height: 100%; padding: 10px 0px; position: relative; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; vertical-align: middle; text-align: center; display: flex; overflow: hidden; background: black;}


.ui_bg {position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; min-height: 100%; padding: 10px 0px; z-index:1;}


/* BACKGROUND TRANSITIONS */

.blur {
-webkit-animation: blur 40s;  
-moz-animation: blur 40s;
animation: blur 40s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes blur {
0% {filter: blur(0px);}
45% {filter: blur(8px);}
85% {filter: blur(8px);}
100% {filter: blur(16px);}
}

@-moz-keyframes blur {
0% {filter: blur(0px);}
45% {filter: blur(8px);}
85% {filter: blur(8px);}
100% {filter: blur(16px);}
}

@keyframes blur {
0% {filter: blur(0px);}
45% {filter: blur(8px);}
85% {filter: blur(8px);}
100% {filter: blur(16px);}
}


.zoom {
-webkit-animation: zoom 40s;
-moz-animation: zoom 40s;
animation: zoom 40s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes zoom {
0% {transform: scale(1);}
100% {transform: scale(1.5);}
}

@-moz-keyframes zoom {
0% {transform: scale(1);}
100% {transform: scale(1.5);}
}

@keyframes zoom {
0% {transform: scale(1);}
100% {transform: scale(1.5);}
}


.blur-zoom {
-webkit-animation: blur-zoom 40s;
-moz-animation: blur-zoom 40s;
animation: blur-zoom 40s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes blur-zoom {
0% {transform: scale(1); filter: blur(0px)}
100% {transform: scale(1.5); filter: blur(8px)}
}

@-moz-keyframes blur-zoom {
0% {transform: scale(1); filter: blur(0px)}
100% {transform: scale(1.5); filter: blur(8px)}
}

@keyframes blur-zoom {
0% {transform: scale(1); filter: blur(0px)}
100% {transform: scale(1.5); filter: blur(8px)}
}


.blur-zoom-rotate {
-webkit-animation: blur-zoom-rotate 40s;
-moz-animation: blur-zoom-rotate 40s;
animation: blur-zoom-rotate 40s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes blur-zoom-rotate {
0% {filter: blur(0px); -webkit-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg);}
100% {filter: blur(6px); -webkit-transform: scale(1.4) rotate(15deg); transform: scale(1.4) rotate(15deg);}
}

@-moz-keyframes blur-zoom-rotate {
0% {filter: blur(0px); -webkit-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg);}
100% {filter: blur(6px); -webkit-transform: scale(1.4) rotate(15deg); transform: scale(1.4) rotate(15deg);}
}

@keyframes blur-zoom-rotate {
0% {filter: blur(0px); -webkit-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg);}
100% {filter: blur(6px); -webkit-transform: scale(1.4) rotate(15deg); transform: scale(1.4) rotate(15deg);}
}


.blur-zoom-rotate-2 {
-webkit-animation: blur-zoom-rotate 40s;
-moz-animation: blur-zoom-rotate 40s;
animation: blur-zoom-rotate 40s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes blur-zoom-rotate {
0% {filter: blur(0px); -webkit-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg);}
100% {filter: blur(6px); -webkit-transform: scale(1.4) rotate(-15deg); transform: scale(1.4) rotate(-15deg);}
}

@-moz-keyframes blur-zoom-rotate {
0% {filter: blur(0px); -webkit-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg);}
100% {filter: blur(6px); -webkit-transform: scale(1.4) rotate(-15deg); transform: scale(1.4) rotate(-15deg);}
}

@keyframes blur-zoom-rotate {
0% {filter: blur(0px); -webkit-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg);}
100% {filter: blur(6px); -webkit-transform: scale(1.4) rotate(-15deg); transform: scale(1.4) rotate(-15deg);}
}





.ui_index_window, .ui_login_welcome, .ui_registration_welcome {
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.93) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.93) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.93) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff', endColorstr='#ddffffff',GradientType=0 ); vertical-align: middle; text-align: center; margin: auto; box-shadow: 0px 0px 20px rgba(0,0,0,0.4); border-radius: 7px; padding: 35px 45px; width: 100%; max-width: 550px;
-webkit-transition: border-radius 1s, box-shadow 1s; transition: border-radius 1s, box-shadow 1s;}


.ui_index_window:hover, .ui_login_welcome:hover, .ui_registration_welcome:hover {border-radius: 20px; box-shadow: 0px 0px 28px rgba(0,0,0,0.6);}


.ui_index_window, .ui_login_welcome, .ui_registration_welcome, .ui_index_back, .ui_index_powered,.ui_index_language {z-index: 100;}



.ui_index_logo {max-width: 300px; max-height: 64px; margin: 0px auto 20px auto; display: block;}



.ui_index_back {position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.5); padding: 23px 20px 22px 16px; display: none;}
.ui_index_back div {display: inline-block; margin: -3px 5px 0px 0px; color: rgba(255,255,255,0.88); font-size: 18px;}
.ui_index_back svg {height: 24px; width: 32px; display: inline-block; margin: -3px 5px 0px 0px; fill: rgba(255,255,255,0.74);}
.ui_index_back:hover div {color: rgba(255,255,255,1);}
.ui_index_back:hover svg {fill: rgba(255,255,255,1);}
.ui_index_back_show {display: block !important;}



.ui_index_language {position: absolute; top: 0px; right: 0px; background: rgba(0,0,0,0.5); padding: 20px 18px 20px 22px;}
.ui_index_language div {display: inline-block;}
.ui_index_language select {font-size: 16px; padding: 2px 8px 3px 4px; background: rgba(255,255,255,0.87);}
.ui_index_language svg {height: 24px; width: 32px; display: inline-block; margin: -3px 8px 0px 0px; border: 1px solid rgba(255,255,255,0.38);}



.ui_index_powered {position: absolute; bottom: 0px; right: 0px; background: rgba(0,0,0,0.5); padding: 12px 16px 12px 20px; font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.85); letter-spacing: 0.5px;}
.ui_index_powered a svg {height: 24px; max-width: 100px; fill: rgba(255,255,255,0.7);}
.ui_index_powered a:hover svg {fill: rgba(255,255,255,1);}



.ui_index_window .tabs-nav a {display: inline-block; width: 50%; vertical-align: top; font-size: 23px; font-weight: 700; padding: 12px 6px; color: rgba(0,0,0,0.5); overflow: hidden;}
.ui_index_window .tabs-nav a.current:hover {text-decoration: none;}
.ui_index_window .tabs-nav a:hover {text-decoration: underline;}

.ui_index_window .tabs-nav a.current span {font-weight: normal;}
.ui_index_window .tabs-nav a span {display: block; font-size: 15px; color: rgba(0,0,0,0.5); margin: 4px 0px; font-weight: normal; line-height: 18px;}
.ui_index_window .tabs-nav a:hover span {text-decoration: none !important;}



.ui_index_window .ui_form {margin: 8px auto 20px auto;}
.ui_index_window .ui_form > div {width: 100%; margin: 0 auto 12px auto; padding: 0px 0px 7px 0px; display: block; color: #888; text-align: left; font-weight: 900; font-size: 16px;}
.ui_index_window .ui_form div svg {width: 30px; height: 30px; margin: 0 auto 5px auto; display: block; float: left;}
.ui_index_window .ui_form div:hover {background: none; color: #000;}

.ui_index_window .ui_form input[type="text"], .ui_index_window .ui_form input[type="email"], .ui_index_window .ui_form input[type="password"], .ui_form select {border-bottom: 1px dashed #444; font-size: 18px; margin-top: 5px;}

.ui_form input[type="text"], .ui_form input[type="email"], .ui_form input[type="number"], .ui_form input[type="date"], .ui_form input[type="password"], .ui_form select, .ui_form label {background: none; border-bottom: 1px dashed #999; border-top: 1px dashed transparent; border-right: 1px dashed transparent; border-left: 1px dashed transparent; box-shadow: none; font-size: 18px;}

.ui_form div:hover input[type="text"], .ui_form div:hover input[type="email"], .ui_form div:hover input[type="password"] {border-bottom: 1px solid #333;}

.ui_form input[type="text"]:focus, .ui_form input[type="email"]:focus, .ui_form input[type="password"]:focus {background: rgba(255,255,255,0.87) !important; outline: 1px solid transparent !important;}

.ui_index_window .ui_form div input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px #fff inset; -webkit-text-fill-color: #333 !important; outline: none; font-size: 18px;}

.ui_index_window .ui_form button {padding: 12px 10px; border-radius: 42px; border-style: solid; font-size: 21px; margin: 20px auto 5px auto; max-width: 350px;}




.ui_index_window .hide {position: absolute; top: -9999px; left: -99999px; display: none;}

.ui_index_window a.ui_frgt {display: block; font-size: 16px; font-weight: 400; margin: 30px auto 0px auto; text-align: center; letter-spacing: 0.5px;}

.ui_index_window .ui_login_hereby {display: block; margin: 2px auto 0px auto; text-align: center; color: rgba(0,0,0,0.7); max-width: 360px; }
.ui_index_window .ui_login_hereby, .ui_index_window .ui_login_hereby a {font-size: 12px; font-weight: 500;}

.ui_index_window div.check {display: block; margin: auto; padding: 0; text-align: center; color: #ff0000; max-width: 360px; font-weight: bold; font-size: 18px;}

.ui_index_window h2 {display: block; font-size: 20px; font-weight: 300; line-height: 26px; color: rgba(0,0,0,0.7); text-align: center; padding-bottom: 25px; border-bottom: 1px solid rgba(0,0,0,0.08); margin: 0px auto 30px auto;}




/* WELCOME SCREEN */

.ui_black {width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute; top: 0px; left: 0px; vertical-align: middle; text-align: center; display: flex; z-index: 100;}

.ui_login_welcome {padding: 50px 40px 50px 40px; min-width: 420px;}

.ui_login_welcome, .ui_registration_welcome {font-size: 15px; z-index: 105; max-width: 470px; color: #777;}

.ui_login_welcome hr, .ui_registration_welcome hr {margin: 24px auto 24px auto;}

.ui_login_welcome h3, .ui_registration_welcome h3 {display: block; font-weight: 300; font-size: 42px; color: #777; margin: 0px auto; color: #777;}

.ui_login_welcome h4, .ui_registration_welcome h4 {display: block; font-weight: 300; font-size: 15px; color: #555; margin: 5px auto; text-shadow: 1px 1px 2px #fff;}


.ui_welcome_logo {max-height: 60px; max-width: 200px; display: block; margin: 15px auto 20px auto;}


/* FORGOTTEN PASSWORD */

.forgotten h1 {vertical-align: top; font-size: 24px; font-weight: 300; padding: 8px 2px 0px 2px; color: rgba(0,0,0,0.6); margin: 0 auto; text-align: center; display: block; text-align: center;}
.forgotten .info-box {margin: 22px auto 0px auto; padding: 20px 0px 0px 0px; border: none;}
.forgotten .ui_form button {margin: 0px auto 5px auto;}
.forgotten .ui_index_window .ui_form div {margin-bottom: 0;}





@media only screen and (max-width: 1023px) {
#ui_container_index {padding: 100px 0px;}
.ui_index_window {max-width: none;}
.ui_index_language, .ui_index_powered {display: block; width: 100%; z-index: 10;}
.ui_index_back div {display: none;}
.ui_index_back {z-index: 99;}
.ui_index_window .ui_form div {font-size: 20px;}
}

@media only screen and (max-width: 768px) {
#ui_container_index {padding: 0px 0px;}
.ui_index_window {padding: 32px 25px 20px 25px;}
.ui_index_language, .ui_index_powered {display: none;}
.ui_index_window, .ui_login_welcome, .ui_registration_welcome {border-radius: 0px;}
.ui_index_window .ui_form input[type="text"], .ui_index_window .ui_form input[type="email"], .ui_index_window .ui_form input[type="password"], .ui_form select {font-size: 21px;}
.ui_index_window .ui_form button {border-width: 2px; font-size: 24px; margin: 15px auto 5px auto; max-width: none; font-weight: 700;}
.forgotten .info-box ul {margin: 0px auto; padding: 0px; list-style: none;}
.ui_index_back {z-index: 199; padding: 10px;}
.ui_index_back svg {height: 18px; width: 18px;}

.ui_index_window .tabs-nav a {display: block; width: 100%; font-size: 24px; padding: 6px 6px;}
.ui_index_window .tabs-nav a span {font-size: 17px;}
.ui_index_window a.ui_frgt {font-size: 18px;}
.ui_index_window .tabs-nav {margin-bottom: 25px;}
}