/* :root{
    --color-principal:#57A5E1;
    --color-secundario:#3C3C3C;
    --color-datalles:#E63A84;
    --color-disminuido:#A1A1A1;
    --color-red:#E15F57;
    --color-green:#57E19F;
} */
.swal2-title, .swal2-input, .swal2-confirm, .swal2-cancel{
    font-size: 16px;
    font-family: 'Noto Sans';
}
 

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes pulse {
    0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    }
    @keyframes pulse {
    0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    } 

    

.form-control{
    height: 40px !important;    
}

body{
    background-color: #FFF !important;
}

.color-2{
    color: var(--color-secundario);
}

.card{
    background-color: #FFF !important;
    filter:drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.25));
    border-radius: 10px !important;
}

/* botones */
.btn-list-body, .btn-serv-body{
    -webkit-box-flex: 1;
    flex: 1;
}

.btn-list-body::before,
.btn-serv-body::before{
    box-sizing: border-box;
}

.btn-list, .btn-serv, .btn-deuda,.comp-list{
    border-radius: 15px;
    box-shadow: 2px 3px 4px 0px rgba(0, 0, 0, 0.25);
    padding:9px 12px 9px 12px;
    color: white;
}

.btn-list{
    background: var(--color-secundario);
}

.btn-deuda,.comp-list{
    background: var(--color-red);
}

.btn-serv{
    background: var(--color-principal);
}


.comp-list-title{
    width: 100%;
    font-size: 18px;
    text-align: center;
    color: var(--color-red);
}

.btn-list-title, .btn-serv-title,.btn-deuda-title, .btn-est-serv-title{  
    font-family: 'Noto Sans';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal; 
}

#nombre-titular-serv{
    height: 16px;
    overflow: hidden;
    width: 148px;
}

.btn-list-title{ 
    color: var(--color-secundario);
}

.btn-serv-title{
    color: var(--color-principal);
}

.btn-est-serv-title{
    color: var(--color-secundario);
}

.btn-deuda-title{
    color: var(--color-red);
}

.btn-list-date, .btn-serv-date, .btn-deuda-date{
    font-family: 'Noto Sans';
    color: var(--color-disminuido);;
	font-family: Noto Sans;
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: normal; 
}

.btn-list-price, .btn-deuda-price{ 
    font-family: 'Noto Sans';
    font-family: Noto Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal; 
}

.btn-list-price{
    color: var(--color-secundario);
} 

.btn-deuda-price{
    color: var(--color-red);
}



.input-fact-left,
.input-fact-right{
    text-align: center !important;
    /* box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.1) inset; */
    color: #A1A1A1 !important;
    font-family: Noto Sans !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
}

.input-fact-left{
    border-radius: 15px 0px 0px 15px !important;
}

.input-fact-right{
    border-radius: 0px 15px 15px 0px !important;
}

.card-n-shw {
    box-shadow: 0 0 0.875rem 0 rgba(255, 255, 255, 0) !important;
    margin-bottom: 0px !important;
}

.card-n-bg{
    background-color:rgba(255, 255, 255, 0) !important;  
}

.color-1{
    color: var(--color-principal);
}


/**************/
.top-desc{
    font-family: 'Noto Sans';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-right: 15px;
    padding-left: 15px;
}

/**********DOWN BAR*************/
.down-bar{
    background-color: white;
    width: 100%;
    height: 70px;
    position: relative;
    justify-content: center;
    display: flex;
    padding: 9px;
    position: fixed;
    bottom: 0px;
    box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.25);
}

.content-bar{
    width: 100%;
    justify-content: space-around;
    display: flex;
    overflow: hidden;
}

.btn-dvar{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 51px;
    height: 51px;
    float: left;
    background: white;  
}
 
.btn-dvar-active{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 51px;
    height: 51px;
    float: left;
    background: white;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25) inset;
    border-radius: 5px;
}

.dvar-icon{
    color: var(--color-principal);
}

/*******Navbar********/
.saludo{
    width: 100% !important;
}

.saludo-h{
    color: var(--color-disminuido); 
    font-family: Noto Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.saludo-nombre{
    color: var(--color-principal); 
    font-family: Noto Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/********TOP******/
.top-fondo{
    position: absolute;
    top: 60px;
    height: 240px;
    flex-shrink: 0;
    border-radius: 0px 0px 20px 20px;
    background: linear-gradient(130deg, var(--color-principal) 0%, var(--color-secundario) 100%);
    box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.25); 
}

.top-opt-bottom{
    width: 108px;
    height: 19px;
    flex-shrink: 0;
    color: #e2e2e2;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Noto Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal; 
    display: flex !important;
    justify-content: end !important;
}

.select-serv{ 
    overflow-x:scroll; 
} 

.select-serv-aux{  
} 


.serv-card, .serv-card-ns{
    float: left;
    width: 270px;
    height: 150px;
    margin-right: 10px;
    margin-bottom: 0px !important;
    border-radius: 15px !important;
    background-color: var(--color-principal);
}

 

.serv-content.active{
    background-color: var(--color-principal); 
}

.serv-content.add{
    background-color: var(--color-green); 
}

.serv-content{
    background-color: var(--color-disminuido);
}

.serv-content {
    border-radius: 15px !important;
    overflow: hidden;
    -webkit-box-flex: 1;
    flex: 1;
    position: relative; 
    height: 150px;
} 

.serv-content::before{
    box-sizing: border-box;
}

.serv-data-top{
    width: 100%;
    position: absolute;
    top: 10px;
}

.serv-content .loc-data{
    color: #F5F5F5;
    font-family: Noto Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal; 
}

.serv-content .emp-logo{
    /* overflow: hidden; */
    padding: 0px;
}

.serv-content .emp-logo img{
    width: 100%; 
    opacity: 0.2;
}

.serv-data-down {
    width: 100%;
    position: absolute;
    bottom: 5px;
}

.serv-content .serv-contratado,
.serv-saldo-tit{
    color: rgba(255, 255, 255, 0.47);
    font-family: Noto Sans;
    font-size: 10px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.serv-price{
    color: #F5F5F5;
    font-family: Noto Sans;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
 
.serv-saldo{
    color: rgba(255, 255, 255, 0.47);
    font-family: Noto Sans;
    font-size: 23px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.data-text .data-tit{
    color: #FFF;
    font-family: Noto Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.serv-check input{
    height: 30px;
    width: 30px;
    position: absolute;
    bottom: 7px;
    right: 0px;
    appearance: none;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer; 
}

.serv-check input:checked{
    background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");  
}

.data-text .data-icon{
    width: 17px;
    height: 13.52px;
    fill: #2EE89E;
}

.data-text .data-t{
    color: var(--color-disminuido);
    font-family: Noto Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.data-active{
    color: #2EE89E;
    font-family: Noto Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.add-icon-content{
    margin-top: 15px;
    display: flex;
    justify-content: center;
}

.serv-content .add-text-content{
    width: 100%;
    color: #F5F5F5;
    font-family: Noto Sans;
    font-size: 30px;
    text-align: center;
    font-style: normal;
    font-weight: 500;
    line-height: normal; 
}

.add-icon{
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center; 
    border: 2px solid white;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0);
}

.btn-opt, .btn-opt-border{
    font-family: Noto Sans;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: normal; 
    color: white;
    display: flex;
    justify-content: center;
}

.btn-opt-elem-border{
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 20px;
    border: 2px solid #BFBBBD;
    background: #f3f3f300;
    padding: 10px 9px 10px 9px;
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-est-red{
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 20px; 
    background: var(--color-secundario);
    padding: 10px 9px 10px 9px;
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
}


.btn-opt .btn-opt-elem{ 
    background: var(--color-datalles);
    display: flex;
    justify-content: center;
    height: 60px;
    width: 60px;
    border-radius: 20px;
    box-shadow: 2px 3px 4px 0px rgba(0, 0, 0, 0.25);
    padding:9px 12px 9px 12px;
    align-items: center;
}

.btn-opt .btn-opt-elem svg{ 
    width: 40px;
    height: 40px;
}

.btn-opt-border .txt-btn{
    color: #979292;                            
    text-align: center;
}

.btn-opt .txt-btn{
    width: 100%;
    text-align: center;
}

.btn-data{
    background-color: var(--color-secundario) !important;
    color:white !important; 
    border-radius: 15px !important;
}

.btn-data-border{
    border: solid 1px var(--color-secundario) !important;
    background-color: #3c3c3c00 !important;
    color: var(--color-secundario) !important;
    border-radius: 15px !important;
}

#log-back{
    height: 100vh;
    width: 100%;
    background: linear-gradient(134deg, var(--color-principal) 0%, var(--color-secundario) 100%); 
    display: flex;
    align-items: center;
}

.log-logo{
    padding: 50px 120px 20px 120px !important;
}

.log-logo img{
    width: 100%;
}

.log-input{ 
    padding: 50px 8% 20px 8% !important;
}

.log-input input{
    border-radius: 0px 10px 10px 0px !important;
    border: 1px solid #FFF !important;
}

.log-input .input-group-prepend .input-group-text{
    background-color: #FFF;
    border-radius: 10px 0px 0px 10px !important;
    border: 1px solid #FFF !important;
}

.log-huella{ 
    padding: 50px 70px 20px 70px !important; 
}

.content-huella, .huella-img-content{  
    border-radius: 15px !important;
    border: 1px solid var(--color-datalles) !important;
}

.huella-img-content{
    padding: 6px !important;
}

.huella-name {
    color: #FFF !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
} 

.huella-img-content img{
    height: 50px;
} 

/******************PRELOADER**********************/
.cargando{ 
    position: relative; 
    color: var(--color-principal);
    margin-top: 2em;
    letter-spacing: 0.08em;
    text-transform: uppercase
    }
	.contenedor-loader{  
        width: 180px;
        height: 30px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        margin: 0 auto; 
    }

    .contenedor-loader div{ 
        width: 30px;
        height: 30px;
        background-color: var(--color-principal);
        animation: salto 1s alternate
        infinite;
    }

    .contenedor-loader div:nth-child(2){ 
    animation-delay: 0.20s; 
    }

    .contenedor-loader div:nth-child(3){ 
    animation-delay: 0.40s; 
    }

    .contenedor-loader div:nth-child(4){ 
    animation-delay: 0.60s; 
    }
    
    @keyframes salto {
        from {
            opacity: 1;
        }
        to{
            opacity: 0;
        }
    }

    .btn-login,.btn-continuar, .btn-login-pass, .btn-guardar-password{
        background-color: var(--color-datalles) !important;
        color:white !important; 
        border-radius: 10px !important;
    }

    #reg-error{
        display: flex;
        justify-content: center;
    }

    .carousel-inner{
        border-radius: 15px;
        filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.25));
        height: 206px;
    }