/*Classic Theme*/

html {
  font-family: 'Open Sans', sans-serif;
}
/* Futuristic Animations */
@keyframes glow { /* Efecto de resplandor animado */
    0% { box-shadow: 0 0 5px #0fa, 0 0 10px #0fa, 0 0 20px #0fa, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 160px #0fa; }
    100% { box-shadow: 0 0 10px #0fa, 0 0 20px #0fa, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 160px #0fa, 0 0 320px #0fa; }
}

@keyframes slideIn { /* Efecto de deslizamiento */
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes fadeIn { /* Efecto de desvanecimiento */
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Aplicación de Animaciones y Estilos */
button, .btn {
  background: linear-gradient(45deg, #1f1c18, #8e44ad);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

button:hover, .btn:hover {
  transform: scale(1.05);
  animation: glow 1.5s infinite alternate;
}

.navbar {
  background: #2c3e50;
  padding: 15px;
  animation: slideIn 1s ease-out;
}

.navbar a {
  color: #ecf0f1;
  text-transform: uppercase;
  padding: 10px 15px;
  transition: color 0.3s ease-in-out;
}

.navbar a:hover {
  color: #1abc9c;
}

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

footer {
  background: #2c3e50;
  color: #ecf0f1;
  padding: 20px 0;
  text-align: center;
  animation: fadeIn 2.5s ease-in-out;
}

footer a {
  color: #1abc9c;
  transition: color 0.3s ease-in-out;
}

footer a:hover {
  color: #f39c12;
}
.image-flash {
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.image-flash:hover {
    transform: scale(1.05);
    filter: brightness(0.85);
}

body {
  font-family: 'Open Sans', sans-serif;
  background:#fff;
}

a:hover{
text-decoration:none;
}

p{
font-size:14px;
}

p.dim{
color:#a3a3a3;
}

label.dim,
a.dim
{
color:#404445;
font-size:12px;
}

a.underline{
text-decoration:underline;
}

h6,h5
{
font-weight:600;
}

h6{
text-align: center;
}

.badge{
font-weight:500;
}

.login-wrapper{
margin: 0;
padding: 0;
}

.login-wrapper .left-container{
min-height: 100vh;
background-image:url("../images/admin-login-banner@2x.jpg");
background-size: cover;
background-color: #94c6c3;
}

.controller-auth .login-wrapper .left-container,
.controller-resetpswd .login-wrapper .left-container
{
background-image:url("../images/login-banner2@2x.jpg");
background-color: #c8bad8;
}

.login-wrapper .right-container{
min-height: 100vh;
text-align: center;
}
.img-60{
max-width: 60px;
height: 60px;
}

.logok-wrapper,
.app-store-wrap
{
margin:20px;
}

.right-container-wrap{
display:block;
margin-left:5em;
margin-right:5em;
}

.app-store-wrap{
}
.app-store-wrap img{
max-width: 8em;
}

.main-container{
min-height: 65vh;
width:80%;
margin:auto;
}

.main-container-wrap{
padding:50px 20px;
text-align: left;
}

.font11
{
font-size:11px !important;
}



/*
FORMS
*/

form .errorMessage{
text-align: initial;
font-size: 12px;
color:#dc3545;
padding:5px 0px 0px 0px;
}

.btn-green{
background:#f00f0f;
color:#fff;
font-size:15px;
font-weight:500;
border-radius: .45rem;
padding:12px;
}

.btn-green:focus,
.btn-green:hover
{
color:#fff !important;
}

.btn-full{
width:100%;
}
.btn-green.normal
{
padding:.375rem .75rem;
}

.form-control-text{
font-size:15px;
font-weight:500;
border-radius: .45rem;
padding-left:15px !important;
background:#f6f7f9;
border:none;
min-height:55px;
}

.form-label-group > label{
font-size:15px;
font-weight:500;
}

/* CHECKBOX */
.custom-checkbox{
margin-left:10px;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #f00f0f!important;
}

.custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 255, 0, 0.25)
}
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 0, 0, 0.25)
}
.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
  background-color: #C8FFC8; 
}

label span.required{
display:none;
}

.change_field_password{
position:relative;
}

.change_field_password .change_field_href{
position: absolute;
right: 15px;
bottom: 10px;
display: block;
padding: 5px;
color:#000;
}


/*** RESPONSIVE ***/
@media (min-width: 1200px) {  
}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {  
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

  .login-wrapper .right-container-wrap{    
    width: 100%;
    margin: auto;
  }
  .login-wrapper .main-container{    
    width: 100%;
    min-height: auto;
  }
  .main-container-wrap{
    padding:20px;
  }  
  .form-label-group > label,
  .btn-green,
  .form-control-text
  {
    font-size: 12px;
  }
  .form-control-text{
    min-height: 45px;    
  }
  
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
  .logok-wrapper{
    display:none;
  }
  .login-wrapper .left-container{
    min-height: 35vh;
  }  
  .main-container-wrap{
    padding:20px;
  }  
  .form-label-group > label,
  .btn-green,
  .form-control-text
  {
    font-size: 12px;
  }
  .form-control-text{
    min-height: 45px;    
  }

}

/* Portrait phones and smaller */
@media (max-width: 480px) { 
  .login-wrapper .left-container
  {
    min-height: 25vh;
  }
  .login-wrapper .right-container-wrap{    
    width: 100%;
    margin: auto;
  }
  .login-wrapper .main-container{    
    width: 100%;
    min-height: auto;
  } 
  .form-label-group > label,
  .btn-green,
  .form-control-text
  {
    font-size: 12px;
  }

  .form-control-text{
    min-height: 45px;    
  }

  .app-store-wrap img{
    max-width: 100%;
  }

}

/*** END RESPONSIVE ***/