/****************************************
CSS de Login
****************************************/

body{margin: 0;padding: 0;overflow-x: hidden;background-color: var(--backgroundColorMain);font-family: var(--bodyFontFamily);}
.text-center{text-align: center;}
#welcome_container{background-color: #1A2D57;height:100vh;display: grid;gap: 0;grid-template-columns: 1fr 480px;}
#welcome-logo{background-color: transparent;position: relative;}
video#welcomeVideo{object-fit: cover;width: 100%;min-height: 100%;}
#welcome-logo img{width: 60%;position: absolute;top: 35vh;left: 18%;}
#welcome-login{background-color: #fff;box-sizing: border-box;padding: 18px;position: relative;}

    #login-header{text-align: center;color: #1A2D57;padding: 5px 0 30px 0;}
    #login-header h1:after {border-bottom: 6px solid #1A2D57;content: '';display: block;margin-left: 43%;width: 15%;}
    #login-form{padding-top: 100px;width: 80%;margin: 0 auto;}
    .input-container{position: relative;}
    .input-container i{position: absolute;left: 12px;top: 14px;font-size: 18px;color: #f1f0f0;}
    #login-form input[type="text"], #login-form input[type="password"]{border: 2px solid #f1f0f0;border-radius: 4px;width: 100%;padding: 4% 4% 4% 30px;margin: 0 auto 16px auto;box-sizing: border-box;}
    #login-form button{background-color: #1A2D57;border: 1px solid #1A2D57;filter: drop-shadow(5px 5px 2px #d4d4d4);border-radius: 26px;width: 80%;margin: 20px auto 0 auto;display: block;padding: 10px 0;font-weight: 300;color: #fff;font-size: 1rem;}
    #login-form button:hover{filter: drop-shadow(0 0);cursor: pointer;}
    #login-form p{text-align: center;font-size: 0.8rem;padding-top: 14px;}
    #login-form p a{color: #1A2D57;text-decoration: none;}
    #support-footer{box-sizing: border-box;width: 100%;display: grid;gap: 0;grid-template-columns: 60% 1fr;padding: 20px 0;font-size: 0.9rem;position: absolute;bottom: 0;left: 0;}
    #support-footer a{text-decoration: none;color: #1A2D57;}
    
    #reset-form{padding-top: 100px;width: 80%;margin: 0 auto;}
    #reset-form input[type="text"], #login-form input[type="password"]{border: 2px solid #f1f0f0;border-radius: 4px;width: 100%;padding: 4% 4% 4% 30px;margin: 0 auto 16px auto;box-sizing: border-box;}
    #reset-form button{background-color: #1A2D57;border: 1px solid #1A2D57;filter: drop-shadow(5px 5px 2px #d4d4d4);border-radius: 26px;width: 80%;margin: 20px auto 0 auto;display: block;padding: 10px 0;font-weight: 300;color: #fff;font-size: 1rem;}
    #reset-form button:hover{filter: drop-shadow(0 0);cursor: pointer;}
    #reset-form p{text-align: center;font-size: 0.8rem;padding-top: 14px;}
    #reset-form p a{color: #1A2D57;text-decoration: none;}

/* 2nd Factor Front */
#code-form{padding-top: 80px;width: 80%;margin: 0 auto;}
#code-form input[type="text"], #code-form input[type="password"]
{
	border: 2px solid #f1f0f0;
	border-radius: 4px;
	padding: 12px 14px;
	margin: 0;
	box-sizing: border-box;

	text-align: center;
	font-size:18pt;
	font-weight: bold;
}
.code-container{display: grid;gap: 1rem;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
#code-form button{background-color: #1A2D57;border: 1px solid #1A2D57;filter: drop-shadow(5px 5px 2px #d4d4d4);border-radius: 26px;width: 80%;margin: 20px auto 0 auto;display: block;padding: 10px 0;font-weight: 300;color: #fff;font-size: 1rem;}
#code-form button:hover{filter: drop-shadow(0 0);cursor: pointer;}
#code-form p{text-align: center;font-size: 0.8rem;padding-top: 14px;}
#code-form p a{color: #1A2D57;text-decoration: none;}

/* Mobile Support */
@media (max-width: 800px){
    #welcome_container{grid-template-columns: 1fr;}
    #welcome-logo{display: none;}
    #login-form{padding-top: 40px;}
}

/* Absolute Center Spinner */
.loading {position: fixed;z-index: 999;height: 2em;width: 2em;overflow: show;margin: auto;top: 0;left: 0;bottom: 0;right: 0;}
/* Transparent Overlay */
.loading:before {content: '';display: block;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(rgba(255, 255, 255, 0.1), rgba(251, 251, 251, 0.1));background: -webkit-radial-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {/* hide "loading..." text */font: 0/0 a;color: transparent;text-shadow: none;background-color: transparent;border: 0;}
.loading:not(:required):after {content: '';display: block;font-size: 10px;width: 1em;height: 1em;margin-top: -0.5em;-webkit-animation: spinner 150ms infinite linear;-moz-animation: spinner 150ms infinite linear;-ms-animation: spinner 150ms infinite linear;-o-animation: spinner 150ms infinite linear;animation: spinner 150ms infinite linear;border-radius: 0.5em;-webkit-box-shadow: rgba(0,96,152, 0.75) 1.5em 0 0 0, rgba(0,96,152, 0.75) 1.1em 1.1em 0 0, rgba(0,96,152, 0.75) 0 1.5em 0 0, rgba(0,96,152, 0.75) -1.1em 1.1em 0 0, rgba(0,96,152, 0.75) -1.5em 0 0 0, rgba(0,96,152, 0.75) -1.1em -1.1em 0 0, rgba(0,96,152, 0.75) 0 -1.5em 0 0, rgba(0,96,152, 0.75) 1.1em -1.1em 0 0;box-shadow: rgba(0,96,152, 0.75) 1.5em 0 0 0, rgba(0,96,152, 0.75) 1.1em 1.1em 0 0, rgba(0,96,152, 0.75) 0 1.5em 0 0, rgba(0,96,152, 0.75) -1.1em 1.1em 0 0, rgba(0,96,152, 0.75) -1.5em 0 0 0, rgba(0,96,152, 0.75) -1.1em -1.1em 0 0, rgba(0,96,152, 0.75) 0 -1.5em 0 0, rgba(0,96,152, 0.75) 1.1em -1.1em 0 0;}
/* Animation */
@-webkit-keyframes spinner {
    0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}
}
@-moz-keyframes spinner {
    0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}
}
@-o-keyframes spinner {
    0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}
  }
  @keyframes spinner {
    0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}
  }