:root {
--color-cy-morado: #330099;
--color-cy-morado-web: #330099;
--color-cy-azul: #1D618E;
--color-cy-gris: #c4c4c4;
--color-cy-magenta: #330099;
--color-cy-blanco: #ffffff;
--color-cy-gris-oscuro: #333333;
--color-cy-disabled: #e9ecef;
--color-cy-verde: #99FF00;
/*COLORES DE ESTADOS DE CUENTA*/
--color-inicial: #8cc152;
--color-credito: #da4453;
--color-apagar: #f6bb42;
}
body{
    background: var(--color-cy-gris);
    font-size: 13px;
    font-family: roboto,sans-serif!important;
    line-height: 24px!important;
    color: #727272!important;
}
.font-roboto{
    font-family: roboto,sans-serif!important;
}
.font-80{
    font-size: 80px !important;
}

.splide{
  visibility: visible !important;
}
.bg-blanco{
    background: var(--color-cy-blanco) !important;
}
.bg-morado{
    background: var(--color-cy-morado-web) !important;
}
.bg-morado-web{
    background: var(--color-cy-morado-web) !important;
}
.bg-magenta{
    background: var(--color-cy-magenta) !important;
}
.bg-blanco{
    background: var(--color-cy-blanco);
}
.bg-gris{
    background: var(--color-cy-gris);
}
.bg-gris-o{
    background:rgb(198, 198, 198, 0.5);
}
.mt-30{
    margin-top: 32% ;
}
.mb-30i{
    margin-bottom: 0 !important;
}
.color-morado-cy{
    color: var(--color-cy-morado-web) !important;
}
.color-morado-web-cy{
    color: var(--color-cy-morado-web) !important;
}
.color-gris-cy{
    color: var(--color-cy-gris) !important;
}
.color-gris-oscuro-cy{
    color: var(--color-cy-gris-oscuro) !important;
}
.border-morado{
    border: 1px solid var(--color-cy-morado-web);
}
.content-logo-inicio-cy{
    display: flex;
    align-items: center;
    border: 1px solid var(--color-cy-morado-web);
    border-radius: 50px;
    /* width: 80%; */
}
.logo-inicio-cy{
    background: var(--color-cy-morado-web);
    padding: 15px;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: block;
}
.logo-inicio-cy i{
    font-size: 100% !important;
}
.text-inicio-cy{
    padding-left: 10px;
    font-weight: 600;
    color: var(--color-cy-gris-oscuro);
    text-transform: uppercase;
}
.btn{
    font-family: roboto,sans-serif!important;
}
.btn-pd{
    padding: 12px 0px!important;
}
.span-logo{
    background: var(--color-cy-morado-web);
    padding: 5px;
    border-radius: 50%;
    height: 100%;
}
.card-style-cy{
    overflow: hidden;
    margin: 0 15px 30px;
    border-radius: 20px;
    border: none;
    box-shadow: none;
}
.card-cy{
    background: var(--color-cy-blanco);
    border-radius: 0 0 40px 40px !important;
}
.card-v2-cy{
    background: var(--color-cy-blanco);
    border-radius: 40px 40px 0 0 !important;
}
.btn-lineal-cy{
    background: transparent !important;
    border: 2px solid var(--color-cy-morado-web) !important;
    border-radius: 13px !important;
    color: var(--color-cy-morado-web);
    margin-left: 10px !important;
}
.btn-lineal-gris-cy{
    background: transparent !important;
    border: 1px solid var(--color-cy-gris) !important;
    border-radius: 10px !important;
    color: var(--color-cy-gris-oscuro);
}
.btn-block-cy{
    background: var(--color-cy-morado-web) !important;
    border: none;
    border-radius: 15px !important;
    color: var(--color-cy-blanco);
}
.btn-block-small-cy{
    background: var(--color-cy-morado-web) !important;
    border: none;
    border-radius: 10px !important;
    color: var(--color-cy-blanco);
    font-size: 10pt;
}
.logo-shop{
    padding: 2rem;
    border-radius: 25px;
    align-items: center;
    display: inline-grid;
    text-align: center;
    background: var(--color-cy-blanco);
    color: var(--color-cy-morado-web);
}
.logo-shop span i{
    font-size: xx-large !important;
}
#footer-bar{
    background: var(--color-cy-morado-web);
    color: var(--color-cy-blanco);
    align-items: center;
}
#footer-bar a i{
    color: var(--color-cy-blanco);
    opacity: 1;
}
.card-footer-cy{
    bottom: 0;
    margin-bottom: 0;
    position: fixed;
    width: 100%;
}
.items-right{
    display: grid;
    align-content: center;
}
.menu-title-cy{
    position: relative;
}
.menu-title-c h1{
    font-weight: 700;
}
.menu-title-cy p a{
    color: var(--color-cy-gris-oscuro);
    opacity: 0.8;
    font-size: 10pt;
}
.p-gris-cy{
    margin: 0 !important;
    color: var(--color-cy-gris-oscuro);
    opacity: 0.8;
}
.theme-light{
    background: var(--color-cy-blanco);
}
.theme-light #preloader{
    background: var(--color-cy-morado-web);
}
.mt-50{
    margin-top: 80%;
}
.btn-back-cy{
    margin-left: 13.3333333333px !important;
    margin-right: 0 !important;
}
.items-center{
    align-items: center;
}
.btn:hover{
    color: var(--color-cy-blanco) !important;
}
.btn-splash:hover{
    color: var(--color-cy-morado) !important;
}
.select-disabled-cy{
    background: var(--color-cy-disabled) !important;
}
.text-right-cy{
    text-align: right !important;
}
.text-left-cy{
    text-align: left !important;
}
.border-btn-info{
    background: #fff;
    border: none;
    border-radius: 10px;
}
.border-btn-info{
    background: #fff;
    border: none;
    border-radius: 10px;
}
.w-table{
    width: 100%;
    display: inline-table;
}
.splide__list_crediya{
    width: 100% !important;
}
.d-flex-crediya{
    display: flex!important;
    justify-content: space-between;
    align-items: baseline;
    flex-direction: row;
}
.position-cy{
    right: 0;
    position: absolute;
}
.pr-10{
    padding-right: 15px;
}
.input-style label{
    opacity: 1;
    left: -15px !important;
    /* transform: translateX(-14px) !important; */
    position: absolute;
    padding: 0 8px !important;
    height: 23px;
    font-size: 12px;
    /* transition: all 250ms ease; */
    background-color: #fff;
    color: #2F3383 !important;
    border-radius: 5px;;
}
.show-pass{
    margin-right: 3rem;
    right: 0;
    position: absolute;
    top: 1.8rem;
    color: #2F3383;
    text-decoration: none !important;
    z-index: 1;
    font-size: 14px;
}
.form-control::placeholder{
    color: #333;
}
.form-control{
    font-weight: 500;
}
.border-frm-conf{
    border: 2px solid #2f3383 !important;
    background: #e7e7e7 !important;
    color: #2f3383 !important;
    font-weight: 900 !important;
}
.btn-foto{
    position: absolute !important;
    margin-left: 66px !important;
    display: block !important;
    margin-top: -23px !important;
    border-radius: 50% !important;
    background: #fff !important;
    /*border: none !important;*/
    font-size: 12px !important;
}
.btn-foto i{
    width: 100% !important;
    padding: 5px 0px 0px 0px;
    /*height: 20px;
    margin: 0 !important; 
    padding: 0px !important;*/
}
.foto-cliente{
    position: relative;
    display: block;
    margin: 10px auto;
}
.wh-100px{
    width: 100px !important;
    height: 100px !important;
    align-items: center;
    display: flex;
}
.cont-btn-camara{
    bottom: 0 !important;
    position: absolute !important;
    margin-left: auto !important;
    width: 100% !important;
}
.cont-btn-camara > button{
    position: relative !important;
    z-index: 1 !important;
}
.max-iframe{
    height: 100% !important;
    max-height: 100% !important;
}
.cat-user-m{
    background: #2f3383;
    padding: 8px 13px;
    border-radius: 10px;
    font-weight: 600;
    color: #fff;
}
.bg-highlight-rf{
    background: #28689b !important;
}
/*ESTILOS DE NUEVA INTERFAZ*/
.card-cy{
    background: var(--color-cy-blanco);
    border-radius: 20px 20px !important;
}
.fs-10{
    font-size: 10px;
}
.mg-monto{
    margin-top: 15px;
}
.mg-monto .fs-monto{
    font-size: 36px;

}
/* Tabs de Fechas */
.m-tabs{
    margin: 0 8px;
}
.w-tabs{
    width: 78.5px !important;
}
.tab-a{
    border-radius: 10px !important;
    background: var(--color-cy-morado);
    text-align: center;
    display: block;
    font-family: inter, sans-serif;
    color: var(--color-cy-verde) !important;
    width: 100%;
    text-align: center;
    align-self: center;
}
.tab-b{
    border-radius: 10px !important;
    background: transparent !important;
    text-align: center;
    display: block;
    font-family: roboto,sans-serif!important;
    color: var(--color-cy-morado);
    width: 100%;
    text-align: center;
    align-self: center;
    border: solid 2px rgba(51, 0, 153, 1);
}
.title-tabs-a{
    font-size: 10pt !important;
    font-weight: bold;
    line-height: 0 !important;
    padding: 15px 0 3px 0;
}
.cuotas-tabs-a{
    font-size: 8pt !important;
    font-weight: 400;
    padding: 13px 0 14px 0;
    line-height: 0 !important;
}
.title-tabs-b{
    font-size: 10pt !important;
    font-weight: bold;
    line-height: 0 !important;
    padding: 14px 0 2px 0;
}
.cuotas-tabs-b{
    font-size: 8pt !important;
    font-weight: 400;
    padding: 13px 0 12px 0;
    line-height: 0 !important;
}
.item-order{
    font-family: roboto,sans-serif !important;
}
.item-order .title-order{
    font-size: 12px !important;
    color: #000;
}
.item-order .price-order{
    font-size: 14px !important;
}
.price-order{
    margin-top: 19px !important;
    color: #000;
}
.cant-cuotas{
    font-size: 11px !important;
    margin-top: 35px !important;
    color: var(--color-cy-morado);
}
/* ESTILOS DE CUOTAS*/
.cuota-item{
    height: 55px;
    padding-left: 20px;
    line-height: 23px !important;
}
.cuota-item .badge{
    margin-top: 0px;
    color: var(--color-cy-verde) !important;
    font-size: 14px;
    font-weight: 600;
}
.cuota-item span{
    color: var(--color-cy-blanco);
    font-weight: 500;
}
.c-cuota-morado .cuota-item span{
    color: var(--color-cy-morado) !important;
    font-weight: 500;
}
.card-item-cuota div .cuota-item{
    color: var(--color-cy-gris-oscuro) !important;
}
.card-item-cuota-t{
    background: transparent;
    border: solid 1px #000 !important;
}
.card-item-cuota-t div .cuota-item .title-coutas{
    color: var(--color-cy-morado);
    font-weight: 500;
}
.card-item-cuota-t div .cuota-item .badge{
    color: #000 !important;
}
#footer-btn{
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    display: flex;
    min-height: 61px;
    border: none;
    text-align: center;
    transition: transform 350ms ease !important;
}
#currency-btn{
    align-items: center;
    
    top: 160px;
    left: 0;
    right: 0;
    z-index: 98;
    display: flex;
    min-height: 61px;
    border: none;
    text-align: center;
    transition: transform 350ms ease !important;
}
#footer-btn div a.continue-btn, #currency-btn div a.active-btn{
    width: 18vh;
    background: var(--color-cy-morado) !important;
    color: var(--color-cy-verde) !important;
    border-radius: 10px !important;
}
#footer-btn div a.volver-btn, #currency-btn div a.inactive-btn{
    width: 18vh;
    background: var(--color-cy-blanco) !important;
    color: var(--color-cy-morado) !important;
    border: solid 2px var(--color-cy-morado);
    border-radius: 10px !important;
}
.active-btn, .inactive-btn{
    width: 14vh !important;
}
#form-bs div label{
    color: #000;
    opacity: 1 !important;
    height: 10px;
    font-size: 12px;
    font-weight: 600;
    transform: translateX(0px);
    position: relative;
    top: 0px;
    transition: none;
}
#form-bs div select, .input-report{
    border-color: var(--color-cy-morado) !important;
}
#form-bs div select:focus{
    background: var(--color-cy-morado) !important;
    color: var(--color-cy-blanco);
}
.icon-dato-pago{
    position: absolute;
    right: 10px;
    font-size: 14px;
    font-weight: 700;
}
.icon-dato-pago .badge{
    margin-top: 0 !important;
}
.icon-dato-pago .badge i{
     color: #000 !important;
     font-size: 17px !important;
     font-weight: 500 !important;
     line-height: 35px;
}
.title-dato-pago{
    display: grid;
}
#code_telf_select{
    width: 40%;
    margin-right: 10px;
}
#footer-btn div a.confirm-btn{
    width: 39vh;
}
.etiqueta-mora{
    width: 70px;
    margin-top: 1px !important;
    margin-left: 8px;
    background: #b20000;
    text-align: center;
    line-height: 17px;
    border-radius: 5px;
}
.border-dashed-cy { 
    border: 2px dashed #673AB7 !important; 
}
.focus-color-morado:focus { 
    border-color: #673AB7 !important; 
    box-shadow: 0 0 0 0.2rem rgba(103, 58, 183, 0.25) !important; 
}
.label-pay label{
    display: contents !important;
}
.c-verde{
    color: var(--color-cy-verde) !important;
}
.border-morado{
    border-color: var(--color-cy-morado) !important;
}
/*ESTADOS DE CUENTA*/
.tag-inicial{
    background: var(--color-inicial) !important;
    padding: 4px 6px;
    border-radius: 5px;
    color: var(--color-cy-blanco) !important;
}
.tag-credito{
    background: var(--color-credito) !important;
    padding: 4px 6px;
    border-radius: 5px;
    color: var(--color-cy-blanco) !important;
}
.tag-apagar{
    background: var(--color-apagar) !important;
    padding: 4px 6px;
    border-radius: 5px;
    color: var(--color-cy-blanco) !important;
}
.details-motion{
    width: 66.6% !important;
    line-height: 0 !important;
}
.amount-motion{
    line-height: 0 !important;
}
.cont-barra-fecha{
    margin-top: 20px !important;
}
.barra-fecha{
    background: var(--color-cy-morado);
    color: var(--color-cy-blanco);
    margin: 0 !important;
    padding: 4px 0;
}
.barra-fecha h1{
    margin-left: 22px !important;
}