input + label{
  padding-left: 18px !important;
}

select{
  padding-left: 18px !important;
}


.form-control {
	border-radius: 25px;
	padding-left: 18px !important;
}

.form-select {
	border-radius: 25px;
	padding-left: 18px !important;
}

input:focus + label {
  color: #888a85;
  padding-left: 18px !important;
}

.btn{
	border-radius: 25px;
}

.btn-service{
	border-radius: 50%;
}

.rounded{
	border-radius: 25px;
}

.form-control::-webkit-input-placeholder {
  color: #BDBDBD;
}

#div_header{
	padding: 13px 13px 13px 13px;
	background: #000;
	color:#FFF;
}

/* GENERAL */

.title-number{
	
	font-family: 'Poppins';
}


:focus {
  box-shadow: inset 0 -1px 0 #ddd !important;
  outline: none !important;
}

body {
	font-family: 'Quicksand', sans-serif;!important;
	background-color: #ebf0f5;
}

#login_body{
	font-family: 'Quicksand', sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #babdb6;
}

.login_body{
	font-family: 'Quicksand', sans-serif;
	color: #fff;
	background-color: #ebf0f5;
	background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    -wekit-background-attachment: fixed;
    -o-background-attachment: fixed;
    -moz-background-attachment: fixed;
}

.app_body{
	font-family: 'Quicksand', sans-serif;
	background-color: #ebf0f5;
	background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    -wekit-background-attachment: fixed;
    -o-background-attachment: fixed;
    -moz-background-attachment: fixed;
}

#app_body{

	font-family: 'Quicksand', sans-serif;
	background-color: #ebf0f5;
	background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    -wekit-background-attachment: fixed;
    -o-background-attachment: fixed;
    -moz-background-attachment: fixed;
	
}

a, a:active, a:hover, a:visited, and a:link{
	color :#babdb6;
	text-decoration: none;
}

.menu-link, .menu-link:active, .menu-link:hover, .menu-link:visited, and .menu-link:link{
	color :#C1C1C1;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
	
}

.c-primary {
	color: #babdb6; !important;
}


.c-fourth {
	color: #007953;
}


.c-gray{
	
	color:#848484;!important;
}

.c-white{
	
	color:#fff;!important;
}

.c-red{
	
	color:red;!important;
}

.c-black{
	
	color: #000;
}

.c-bank2illa{
	color: #BABDB6;
}

.color-fourth{	
	color:#666;
}

.text-gray{
		color:#BABDB6;!important;
}

#bank2illa_loader{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100000000;
    color: #ffffff;
}


.bank2illa_loader_content{

	position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(255,255,255,0.7);
    z-index: 100000000;
   	color:#848484;!important;
	
}

.custom-file-label,
.custom-file-label::after {
    height: 50px;
}

.bg-primary{
   background: #babdb6; !important;
   color: #fff;
   	
}

.bank2illa-bg-primary{
   background-color: #babdb6; !important;
   color: #fff;
}

.btn-bg-primary{
   background-color: #babdb6; !important;
   color: #fff;
   	
}

.btn-bg-primary:hover, .btn-bg-primary:active, .btn-bg-primary:after{
   background-color: #babdb6; !important;
   color: #000;
}


.btn{
   background-color: #babdb6 !important;
   color: #fff;
}

.btn:hover,  .btn:default, .btn:focus, .btn:after{
   background-color: #babdb6 !important;
   color: #000;
}

.btn:active{
   background-color: #a2a2a2 !important;
   border-style: none;
   color: #000;
}

.btn:disabled{
   background-color: RGB(220,220,220) !important;
   border-style: none;
   color: #fff !important;
}
.bg-dark{
   background: #000; !important;
   color: #babdb0 !important;
}

.bg-white{
   background: #FFF;
   color: #000 !important;
}

.btn-primary-outline, .btn-primary-outline:focus, .btn-primary-outline:hover, .btn-primary-outline:after, .btn-primary-outline:active{
   color: #ffffff !important;
   border-color:  #babdb6 !important;
   background: #babdb6 !important;
   border-radius: 25px;
   height: 42px;
   width: 125px;
}

.btn-primary, .btn-primary:focus, .btn-primary:hover, .btn-primary:after, .btn-primary:active{
   color: #ffffff !important;
   border-color:  #babdb6!important;
   background: #babdb6!important;
   border-radius: 25px;
   font-face : 'EastmanTrial';
   height: 42px;
   width: 125px;
}



.btn-outline-secondary, .btn-outline-secondary:focus, .btn-outline-secondary:hover, .btn-outline-secondary:after, .btn-outline-secondary:active{
   color: #888a85 !important;
   border-color:  #888a85!important;
   background: #fff !important;
	border-radius: 25px;
   font-face : 'EastmanTrial';
   height: 42px;
   width: 125px;
}



.btn-secondary, .btn-secondary:focus, .btn-secondary:hover, .btn-secondary:after, .btn-secondary:active{
   color: #000 !important;
   border-color:  #000 !important;
   background: #fff !important;
	border-radius: 25px;
   font-face : 'EastmanTrial';
    height: 42px;
   width: 125px;
}

.btn-outline-third, .btn-outline-third:focus, .btn-outline-third:hover, .btn-outline-third:after, .btn-outline-third:active{
   color: #babdb6 !important;
   border-color:  #babdb6 !important;
   background: none !important;
   	border-radius: 25px;
   border-radius: border-radius: 8px;
   font-face : 'EastmanTrial';
}

.btn-circle {
	width: 55px;
    height: 55px;
    padding: 1px 0px;
    border-radius: 50px;
    text-align: center;
    border-color: #bdbdbd !important;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;

}

.btn-search-rounded{
	border-radius:0px; border-top-right-radius:25px; border-bottom-right-radius: 25px;
}



.menu{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    color: #000;
    background: rgba(0,0,0,0.5);
    z-index: 1000000;
}

.menu-desktop{
    position: fixed;
    height: 100%;
    left: 0;
    top: 0;
    color: #000;
}

.menu-content {
	background-color: #babdb6;
    font-size: 30px;
	padding: 10px 10px 10px 10px;	
	width: 76px;
    height: 100%;
    color: #ffffff
    overflow: auto;	
}

.menu-content a,.menu-content a:active,.menu-content a:hover,.menu-content a:visited, and .menu-content a:link {
    font-size: 30px;
    color: #ffffff
}

.transaction_table, .event_table {
  font-size:18px;
  border-radius: 5px !important;
  background-color: #babdb6;!important;
}

.bg-transparent{

  border-top: 1px dashed red;
  border-right: 1px dashed red;
  border-bottom: 1px dashed red;
  border-left: 1px dashed red;
  color:red;
  font-size:18px;
}

.bank2illa-bg-disabled{
   background-color: RGB(220,220,220); !important;
 	border-color:#babdb6;!important;
   color: #fff;!important;
   	
}

.bank2illa-bg-outline{
   background-color: #fff; !important;
 	border-color:#babdb6;!important;
   color: #babdb6;!important;
   	
}

/* Camera*/

.screenshot-image {
  width: 100%;

}

.display-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  position: relative;
}


#video_face {
  height: 200%;
  width: 200%;
  position: absolute;
}

#video_docid {
  width: 100%;
  height: auto;
  position: absolute;
}

.face_container {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff;
    width:300px;
    height:300px;
    border-radius: 50%;
    background-color: #d3d3d3;
    text-decoration: none;
	overflow: hidden;
    z-index: 1;
}

.docid_container {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff;
    width:500px;
    height:250px;
    background-color: #d3d3d3;
    text-decoration: none;
	overflow: hidden;
    z-index: 1;
}

.screenshot {
	width: 95px;
	height: 95px;
	border-radius: 50%;
	background-color: black;
}



.face {
    position: absolute;
    border: 2px solid #FFF;
}

/* Camera*/
		
		.user_card {
			width: 500px;
			margin-top: auto;
			margin-bottom: auto;
			background: #fff;
			position: relative;
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding: 20px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			border-radius: 5px;

		}
		.brand_logo_container {
			position: absolute;
			height: 170px;
			width: 170px;
			top: -75px;
			border-radius: 50%;
			background: #babdb6;
			padding: 10px;
			text-align: center;
		}
		.brand_logo {
			height: 150px;
			width: 150px;
			border-radius: 50%;
			border: 2px solid white;
		}
		.form_container {
			margin-top: 100px;
		}
		
#tracking {
 margin-bottom:1rem
}

.tracking-item {
 border-left:2px solid #e5e5e5;
 position:relative;
 padding:2rem 1.5rem .5rem 2.5rem;
 font-size:.9rem;
 margin-left:2rem;
 min-height:5rem
}
.tracking-item:last-child {
 padding-bottom:4rem
}
.tracking-item .tracking-date {
 margin-bottom:.5rem
}
.tracking-item .tracking-date span {
 color:#888;
 font-size:85%;
 padding-left:.4rem
}
.tracking-item .tracking-content {
 padding:.5rem .8rem;
}
.tracking-item .tracking-content span {
 display:block;
 color:#888;
 font-size:85%
}
.tracking-item .tracking-icon {
 line-height:3.1rem;
 position:absolute;
 left:-1.6rem;
 width:3.1rem;
 height:3.1rem;
 text-align:center;
 font-size:1.3rem;
 border-radius:50%;
 background-color: #dee2e6;
 color:#fff
}


@media(min-width:992px) {
 .tracking-item {
  margin-left:10rem
 }
 .tracking-item .tracking-date {
  position:absolute;
  left:-10rem;
  width:7.5rem;
  text-align:right
 }
 .tracking-item .tracking-date span {
  display:block
 }
 .tracking-item .tracking-content {
  padding:0;
  background-color:transparent
 }
 
 profile-head {
    transform: translateY(5rem)
}

.cover {
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat
}


input[type="file"]{
	border-radius: 25px;
}

input[type="checkbox"]:checked {
    
    background-color: #BABDB6 !important;
    border-color: #fff !important;
}
input[type="checkbox"]:focus {
	box-shadow: none !important;
}

.custom-file-input{
	border-radius: 25px;
}

.custom-file-label{
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	
}

label{
	color: #888a85;
}

textarea{
	min-height: 100px!important;
}
/*TEXTO*/
.text-justify{
	text-align: justify;
}

.box{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
}

.box-content {
	background-color: #ffffff;
    padding: 10px 10px 10px 10px;
    float: right;	
	width: 290px;
    height: 100%;
    overflow: auto;
    z-index: 100000;
}

.nav-link.active {
    background-color: #BABDB6 !important;
    color: white !important; 
}

.nav-link {
  
    color: #003366; 
}


#group_btn_box{


    display: flex;
    justify-content: center;
    align-items: center;
      padding: 10px;
}



 .card-secondary {
      background-color: #BABDB6;
      color: white !important;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%; /* Asegura que el div ocupe toda la altura de su contenedor */
    }
    .card-secondary .icon {
      font-size: 2rem; /* Ajusta el tamaño del icono */
      color: white !important;
    }


@media only screen and (max-width: 768px) {

	.bank2illa-label::-webkit-input-label{
		font-size: calc(0.8em + 0.5vw);
		
	}
	.bank2illa-label::-webkit-input-label { /* WebKit, Blink, Edge */
	   
	  	font-size: calc(0.8em + 0.5vw);
	}
	.bank2illa-label:-moz-label { /* Mozilla Firefox 4 to 18 */
	    
	  font-size: calc(0.8em + 0.5vw);
	}
	.bank2illa-label::-moz-label { /* Mozilla Firefox 19+ */
	   
	   	font-size: calc(0.8em + 0.5vw);
	}
	.bank2illa-label:-ms-input-label { /* Internet Explorer 10-11 */
	  
	  font-size: calc(0.8em + 0.5vw);
	}
	
	.bank2illa-label {
		font-size: calc(0.5em + 0.5vw) !important;
		
	}
	
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
   .img-header{
    height: 3rem;
        display: block; 
        text-align:left;
        margin-left: 20%;
        }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
   .img-header{
    height: 3rem;
        display: block; 
        text-align:left;
        margin-left: 20%;
        }
}

/* REGLA GLOBAL PARA TODO EL PROYECTO
   Aplica el diseño fluido y los márgenes a cualquier contenedor principal 
*/
body > .container {
    /* Limita el ancho para que no se expanda al infinito en monitores grandes */
    max-width: 1400px !important; 
    width: 100% !important;
    
    /* Mantiene el bloque centrado en la pantalla */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Espacio izquierdo para esquivar el menú (86px) + un respiro extra */
    padding-left: 130px !important; 
    
    /* Espacio derecho para que no pegue del borde de la pantalla */
    padding-right: 40px !important; 
    
    box-sizing: border-box;
}

/* En tablets (991px o menos), el menú de escritorio se oculta */
@media (max-width: 991.98px) {
    body > .container {
        /* Retorna a un padding estándar centrado para móviles y tablets */
        padding-left: 20px !important; 
        padding-right: 20px !important;
    }
}