:root {
    --MOBA-FONT: tahoma, arial, verdana, sans-serif;    
}

html, body {
    transition: all 0.3s ease-in-out;
}

body{
	/*background: url('../fileadmin/pattern_02.gif') repeat top center; 
	background-attachment: fixed; */
	font-family: var(--MOBA-FONT);
	font-weight: 200;
	display:flex; 
	align-items: center;
	height:100vh;
	width:100%; 
	overflow:hidden; 
	transition: all 0.3s ease-in-out;
}

h1 {
    font-weight: 200;
    font-weight: 400;
    color: rgba(255,213,0,1.00)
}

img {
    max-width: 100%;
}

label {
    color: rgba(255,255,255,1.00);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

input:active {
    box-shadow: 0px 3px 14px -1px rgba(255,213,0,0.47);
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #7d7d7d;
  transition: background-color 5000s ease-in-out 0s;
}


#username,#password, #password1, #password2 {
    color: #fff;
}

#username::placeholder,#password::placeholder,
#password1::placeholder, #password2::placeholder {
    color: rgba(187,187,187,0.70);
    font-weight: 100;
}

#username:-ms-input-placeholder,#password:-ms-input-placeholder,
#password1:-ms-input-placeholder, #password2:-ms-input-placeholder {
    color: rgba(187,187,187,0.70);
    font-weight: 100;
}

#username::-ms-input-placeholder,#password::-ms-input-placeholder,
#password1::-ms-input-placeholder, #password2::-ms-input-placeholder {
    color: rgba(187,187,187,0.70);
    font-weight: 100;
}

#username::-webkit-input-placeholder,#password::-ms-webkit-placeholder,
#password1::-ms-webkit-placeholder, #password2::-ms-webkit-placeholder {
    color: rgba(187,187,187,0.70);
    font-weight: 100;
}

/*Oculta el ojo que a�ade el navegador 'edge', el navegador 'chrome' no lo a�ade.*/
input[type='password']::-ms-reveal {
	display: none;
}

ul{padding:0px; margin:10px 0;overflow: auto; text-align:center;}
ul li {list-style: none; width: 15%;  text-align:center;}
li{display:inline-block;}

.bg1{
	height:100vh;
	width:100%;
    background-image: linear-gradient(to left bottom, #f6ae01, #f9b500, #fbbd00, #fdc400, #ffcc00);
	z-index: 1;
	display:flex; 
	align-items: center;

}
.bg2{
    background: url('../img/login/background_02.jpg') repeat top center;
	display:flex; 
	align-items: center;
    background-size:cover;
	height:100vh;
	width:100%;    
}

.container {
    padding: 10px;
    max-width: 1140px;
}

.form-container {
    -webkit-box-shadow: 0px 3px 14px -1px rgba(0,0,0,0.47);
    -moz-box-shadow: 0px 3px 14px -1px rgba(0,0,0,0.47);
    box-shadow: 0px 3px 14px -1px rgba(0,0,0,0.47);
    font-weight: 200;
    background-color: rgba(60,60,59,1.00);
    background-image: url(../img/login/lined.png);
}

.form-container-center-padding{
	padding: 40px 40px 0px 40px;
}
.form-container-footer-padding{
	padding: 0px 20px 5px 20px;
}


.form-container::before {
    filter: blur(80px);
}

.form-group {
    border-radius: 0px;
    text-transform: uppercase;
    font-weight: 200;
    display: block;
    margin-bottom: 1rem;
}

.form-control {
    border-radius: 0px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    color: #adadad;
    height: calc(2.25rem + 2px);
}

.form-control:focus {
    border: none;
    border-bottom: 1px solid #f6ae01;
    background: transparent;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.0);
}

.btn-moba{
	border-radius:0px; 
	text-transform: uppercase;
	background-color:#f6ae01;
	border:none;
	color: #fff;
	font-size:0.8em;
	float:right; 
	height: 35px; 
	padding:0px 30px;
	margin-top: 6px;
	cursor:pointer;
	transition: all 0.3s ease-in-out;
}

.btn-moba:hover{
	background-color:rgba(60,60,59,0.80); 
    color: #f6ae01;
	border: 1px solid white;
	font-size:0.8em;
	transition: all 0.3s ease-in-out;
}

.btn-moba:active{
	background-color:rgba(60,60,59,0.80); 
	color: #f6ae01;
	transform: translateY(1px);
	border:none;
	font-size:0.8em;
	transition: all 0.3s ease-in-out;
}
	
.btn-moba:focus{
	background-color: rgba(60,60,59,0.80)!important;
    color: #f6ae01;
    border: none!important;
    font-size: 0.8em;
    transition: all 0.3s ease-in-out;
    outline: 5px auto #f6ae01;
}

.dropbtn {
    color: rgba(255,204,0,1.00);
    font-size: 1rem;
    border: 1px solid white;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    height: 35px;
    background: rgba(60,60,59,1.00);
    font-family: var(--MOBA-FONT);
    font-weight: 200;
    box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
    border-radius: 0px;
    margin: 10px 0;
    display: block;
    padding: 0 auto;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(100,100,100,1.00);
    min-width: 160px;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: rgba(255,213,0,1.00);
    color: rgba(60,60,59,1.00)
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: rgba(255,213,0,1.00);
    color: rgba(60,60,59,1.00);
    border: none;
}

.copyright {
    font-size: 0.3rem;
}

.logo_moba{width:50%;height:auto;margin-top:20px;}
div.logo_moba_link{
	width:100%; 
	text-align: center;
	margin-bottom: 10px;
	display: grid;
    align-content: center;
    justify-content: center;
}

.logo_mawis {
    padding-bottom: 25px;
}

hr {
    margin-top: 1rem;
    background: rgba(255,213,0,0.40);
    margin-bottom: 1rem;
    border-top: 1px solid rgba(0,0,0,.1);
    opacity: 1;
}

span {
    font-size: 0.75rem;
    color: white;
    display: inline-block;
}

.login-error {
    text-align: center;
    color: white;
    font-size: 1rem;
    background-color: rgba(161,0,2,1.00);
    line-height: 2em;
    margin: 10px 0px;
}

.login-success {
    text-align: center;
    color: white;
    font-size: 1rem;
    background-color: rgb(10, 107, 4);
    margin-top: 1rem;
    line-height: 2em;
}

.field-validation-error {
    text-align: center;
    color: white;
    font-size: 1rem;
    background-color: rgba(255,0,4,0.10);
    margin-top: 1rem;
}

.version {
    font-size: 0.8rem;
    color: white;
    float: right;
    margin-bottom: 0;
}

/* Checkbox */
input[type="checkbox"] {
    display: none;
}

.forgotPassword{
	width:100%; 
	justify-content: center;
	margin:10px 0;
	text-align: center;	
}

.forgotPasswordLink{
	color: #f6ae01;
	text-decoration: none;
}

.forgotPasswordLink:hover{
	text-decoration: none; 
	color: #fff;
}

.forgotPasswordLink:focus{
	text-decoration: none; 
	color: rgba(255,255,255,1.00);
}

label.checkbox {
    /*display: block;*/
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

label.checkbox span {
    background: rgba(112,112,112,0.00);
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 1px solid #eaeaea;
    position: absolute;
    top: 3px;
    left: 0;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
}

label:hover span {
    border: 1px solid #bbb;
}

input[type="checkbox"]:checked + span {
    border: 1px solid #f6ae01;
    background-image: url(../img/16/login_check_checked.png);
    background-position: -1px -2px;
}

.socialimg {
	width:40%;
}

.fadesocial {
   opacity: 1.0;
   transition: opacity 0.2s ease-in-out;
   -moz-transition: opacity 0.2s ease-in-out;
   -webkit-transition: opacity 0.2s ease-in-out;
   }
 
.fadesocial:hover{
    opacity:0.4;
}

/* Form Animation - FadeIn */
#wrap { 
    -webkit-animation: fadein 1.5s forwards;
    -webkit-animation-delay: 0.4s;
    -webkit-opacity: 0;
    -webkit-background: rgba(17,17,17,1.00);
    -ms-animation: fadein 1.5s forwards;
    -ms-animation-delay: 0.4s;
    -ms-opacity: 0;
    -ms-background: rgba(17,17,17,1.00);
    -moz-animation: fadein 1.5s forwards;
    -moz-animation-delay: 0.2s;
    /* optional */
    -moz-opacity: 0%;
    -moz-background: rgba(17,17,17,1.00);
    -o-animation: fadein 1.5s forwards;
    -o-animation-delay: 0.4s;
    /* optional */
    -o-opacity: 0%;
    -o-background: rgba(17,17,17,1.00);
    animation: fadein 1.5s forwards;
    animation-delay: 0.4s;
    opacity: 0;
    /*background: rgba(17,17,17,1.00);*/
    min-width: 340px;
    /*max-width: 400px;*/
    margin: 0 auto;
}

#wrap.out {
    animation: fadeout 1.5s forwards;
    animation-delay: 0s;    
}

.countdown{
    border-right: 0px;
    border-top: 0px;
    border-bottom: 0px;
    border-left: 0px;
    color: #f6ae01;   
    font-weight: bold;
    font-size: 116px;
    text-align: center;
}
.countdown input{
	width: 125px;
	background-color: transparent;
}
		
		

/***/
#divPassword:focus-within, #divPassword1:focus-within, #divPassword2:focus-within{
	border-bottom: 1px solid #f6ae01;
}
#divPassword, #divPassword1, #divPassword2{
    width: 100%;
    height: calc(2.25rem + 2px);
    border-bottom: 1px solid #ddd;
}
#password, #password1, #password2{
	float: left;
    width: calc(100% - 30px)
}
#showPassword, #showPassword1, #showPassword2{
	height: 38px;
    width: 30px;
    float: left;
}
#showPassword:hover, #showPassword1:hover, #showPassword2:hover{
	cursor:pointer
}
#eye:hover, #eye1:hover, #eye2:hover{
	filter: brightness(120%);
}
.icon_pwd_success{
	width: 24px;
    height: 24px;
    background-image: url(../img/icons/shield.png);
    background-position: center center;
    background-repeat: no-repeat;
    padding: 10px;
}

.icon_pwd_error{
	width: 24px;
    height: 24px;
    background-image: url(../img/icons/shield_err.png);
    background-position: center center;
    background-repeat: no-repeat;
    padding: 10px;
}

/** MFA ***/
.mfaInput{
	width: 60px;
    height: 80px;
    border-radius: 10px;
    font-size: 42px;
    padding: 5px;
    border: 3px solid #2799d6;
    text-align: center;
    margin: 0px 3px;
}

.mfaInput:focus{
	border: 3px solid #2799d6;
	outline: none;
    box-shadow: 0px 3px 14px -1px rgba(255, 213, 0, 0.27);
}
input.mfaInput::selection {
    background-color: transparent;  /* Elimina el fondo */
    color: inherit;  /* Mantiene el color del texto como est� */
}

/** ISO CONTAINER **/
.iso-container{
    padding: 0px 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.iso-container img{
    padding: 5px 4px;    
    width: 80px; 
    height: auto
}


/**TRANSITIONS**/	
		
@-webkit-keyframes fadein {
    0% {transform: translateY(800px); opacity: 0;}
    100% {transform: translateY(0px); opacity: 1; animation-timing-function: ease-out;}
}
@-webkit-keyframes fadeout {
    0% {transform: translateY(0px); opacity: 1;}
    100% {transform: translateY(800px); opacity: 0; animation-timing-function: ease-out;}
}
@-moz-keyframes fadein {
    0% {transform: translateY(800px);opacity: 0;}
    100% {transform: translateY(0px);opacity: 1;animation-timing-function: ease-out;}
}
@-moz-keyframes fadeout {
    0% {transform: translateY(0px); opacity: 1;}
    100% {transform: translateY(800px); opacity: 0; animation-timing-function: ease-out;}
}
@-o-keyframes fadein {
    0% {transform: translateY(800px);opacity: 0;}
    100% {transform: translateY(0px);opacity: 1;animation-timing-function: ease-out;}
}
@-o-keyframes fadeout {
    0% {transform: translateY(0px); opacity: 1;}
    100% {transform: translateY(800px); opacity: 0; animation-timing-function: ease-out;}
}
@-ms-keyframes fadein {
    0% {transform: translateY(800px);opacity: 0;}
    100% {transform: translateY(0px);opacity: 1;animation-timing-function: ease-out;}
}
@-ms-keyframes fadeout {
    0% {transform: translateY(0px); opacity: 1;}
    100% {transform: translateY(800px); opacity: 0; animation-timing-function: ease-out;}
}
@keyframes fadeIn {
    0% {transform: translateY(800px);opacity: 0;}
    100% {transform: translateY(0px);opacity: 1;animation-timing-function: ease-out;}
}
@keyframes fadeout {
    0% {transform: translateY(0px); opacity: 1;}
    100% {transform: translateY(800px); opacity: 0; animation-timing-function: ease-out;}
}

/*RESPONSIVE*/

@media (min-width: 576px){
	.countdown {font-size: 2.9rem;}
    .countdown input {width: 60px;}
}

@media (min-width: 481px) and (max-width:576px) {
    .form-container {margin:0 70px;}
    .countdown {font-size: 2.9rem;}
    .countdown input {width: 60px;}
}

@media only screen and (max-width: 480px) {
    .container {padding:0 10px;}
    .countdown {font-size: 2.9rem;}
    .countdown input {width: 60px;}
}

@media only screen and (max-width: 496px) {
    .copy {font-size:0.6rem;}
    .version {font-size: 0.8rem;}
}

@media (min-width: 430px) and (max-width:480px) {
    .form-container {margin:0 30px;}
    .social_icons img{width: 28px}
    .countdown {font-size: 2.9rem;}
    .countdown input {width: 60px;}
}

@media only screen and (max-width: 320px) {
    .container {padding:5px;}
    .form-container {padding: 30px;}
    .btn-moba{width:100%;margin-bottom: 10px;}
    label.checkbox {margin-bottom: 10px;}
}