:root {
    /*main colors*/
    --c_blue: #3db5e6;
    --c_blue-dark: #202b53;
    --c_blue-light: #e4eced;
    --c_grey-light: #f8faf9;

    --f_main-font: Jost;
}
body{
    font-family: var(--f_main-font);
}
/* font sizes*/

.fs-xxl{
    font-size:clamp(3rem, 3vw, 6rem) !important
}
.fs-xl{
    font-size:clamp(2.5rem, 2.5vw, 5rem) !important
}
.fs-lg{
    font-size:clamp(1.5rem, 2.15vw, 2.5rem) !important
}

.fs-1{
    font-size:clamp(1.35rem, 1.5vw, 2.5rem) !important
}
.fs-2{
    font-size:clamp(1.35rem, 1.25vw, 2.25rem) !important
}
.fs-3{
    font-size:clamp(1.25rem, 1vw, 2rem) !important
}
.fs-4{
    font-size:clamp(1.15rem, .75vw, 1.85rem) !important
}
.fs-5{
    font-size:clamp(1rem, .5vw, 1.7rem) !important
}
.fs-6{
    font-size:clamp(.9rem, .5vw, 1.10rem) !important
}
.fs-7{
    font-size:clamp(.85rem, .5vw, 1rem) !important
}
.fs-8{
    font-size:clamp(.75rem, .5vw, 9rem) !important
}

/* dataTables fixedHeader */
table.dataTable.fixedHeader-floating,table.dataTable.fixedHeader-locked{
    background-color:white;
    margin-top:0 !important;
    margin-bottom:0 !important
}
table.dataTable.fixedHeader-floating{
    position:fixed !important
}
table.dataTable.fixedHeader-locked{
    position:absolute !important
}
@media print{
    table.fixedHeader-floating{
        display:none
    }
}
a:hover{
    text-decoration:none;
}

.text-blue{
    color:var(--c_blue)
}
.text-blue-dark{
    color:var(--c_blue-dark)
}
.text-blue-light{
    color:var(--c_blue-light)
}
.text-orange{
    color:var(--c_orange)
}
a.text-orange:hover{
    color:var(--c_blue-dark)
}
.border-orange{
    border-color:var(--c_orange) !important;
}

/* utils */
.mh-vh{
    max-height: 100vh;
}
.mw-vw{
    max-height: 100vw;
}

.shadow-hover:hover{
    box-shadow: 1px 1px 20px 6px #0000003b;
    transition: all ease .3s;
}
.transition{
    transition: all ease .3s;
}


/* public pages */

.bg-img{
    background-image: url(../img/maya.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-img-s{
    background-image: url(../img/mujer.jpg);
    background-repeat: no-repeat;
}
.bg-img-fixed{
    background-attachment: fixed !important;
}
.bg-img-top{
    background-position: top !important;
}
.bg-img-center{
    background-position: center !important;
}

.bg-separation2{
    background: url(../img/sep.svg) no-repeat;
    background-position: bottom -15px left -2px;
    background-size: 2vw 110%;
}
.bg-blue{
    background-color: var(--c_blue);
}
.bg-blue-dark{
    background-color: var(--c_blue-dark);
    color:white;
}
.bg-blue-light{
    background-color: var(--c_blue-light);
    color: var(--c_blue-dark);
}

.bg-light{
        background-color: var(--c_grey-light) !important;
}

/* side menu */
li.nav-item{
    transition: all ease .3s;
}
li.nav-item.active, li.nav-item:hover{
    color:white;
    transition: all ease .3s;
    background-color: var(--c_blue);
}



.btn-outline-success, .btn-outline-danger {
    color: var(--c_blue-dark);
    border-color: var(--c_blue-dark);
}

.btn-outline-success{
    border-color: var(--c_blue-dark);
    transition: all ease .3s;
}

.btn-outline-success:hover {
    color: white;
    background-color: var(--c_blue-dark);
    border-color: var(--c_blue-dark);
    transition: all ease .3s;
}
.btn-check:active+.btn-outline-success, .btn-check:checked+.btn-outline-success, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show, .btn-outline-success:active {
    color: white;
    background-color: var(--c_blue-dark);
    border-color: var(--c_blue-dark);
    transition: all ease .3s;
}
.btn-outline-success {
    color: var(--c_blue-dark);
    border-color: var(--c_blue-dark);
}

.btn-outline-success, .btn-outline-danger{
    font-size: clamp(1rem, 1.1vw, 1.25rem) !important;
    padding: 0.25rem 1.5rem;
    font-weight: bold;
    background-color: var(--c_orange-a);
}


.btn-outline-blue{
    border-color: var(--c_blue);
    transition: all ease .3s;
}

.btn-outline-blue:hover {
    color: white;
    background-color: var(--c_blue);
    border-color: var(--c_blue);
    transition: all ease .3s;
}
.btn-check:active+.btn-outline-blue, .btn-check:checked+.btn-outline-blue, .btn-outline-blue.active, .btn-outline-blue.dropdown-toggle.show, .btn-outline-blue:active {
    color: white;
    background-color: var(--c_blue);
    border-color: var(--c_blue);
    transition: all ease .3s;
}
.btn-outline-blue {
    color: var(--c_blue);
    border-color: var(--c_blue);
}

.btn-outline-blue, .btn-outline-danger{
    font-size: clamp(1rem, 1.1vw, 1.25rem) !important;
    padding: 0.25rem 1.5rem;
    font-weight: bold;
}

[class*="btn-t"] {
    border: none;
    transition: all ease .3s;
    font-size: 1.25rem;
    padding: 0.5rem 2.5rem;
    font-weight: bold;
    border-radius: 25px;
    position: relative;
    content: "";
    transition: all ease .2s;
    color: white;
}
.btn-t-white {
    background-color: white;
    color: var(--c_blue-dark);
}
.btn-t-white:hover {
    background-color: white;
    color: var(--c_orange);
}
.btn-t-blue {
    background-color: var(--c_blue);
    color: white;
}
.btn-t-blue-dark {
    background-color: var(--c_blue-dark);
}
.btn-t-blue:hover, .btn-t-blue-dark:hover, .btn-t-orange:hover {
    color: white !important;
}
.btn-t-orange{
    background-color: var(--c_orange);
}
.btn-t-orange:hover{
    background-color: var(--c_blue-dark);
}
.btn-t-blue-dark:hover{
    background-color: var(--c_blue);
}
.btn-t-blue:hover{
    background-color: var(--c_blue-dark);
}
a:hover {
    color: var(--c_blue);
}
li.nav-item.active.text-white a {
    color: white !important;
}
li.nav-item a.nav-link.text-blue-dark:hover{
    color:white;
}
/* forms */
.handle label {
    cursor: move;
}
.border-red {
    border: #ff0000 1px solid!important;
    color: #000;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
#msg_account_form {
    margin: 0 0 2rem;
    font-size: 1.5rem;
}
button.btn.dropdown-toggle {
    background: none;
    border: none;
}

.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
    background-color: transparent !important;
}
.bootstrap-select>.dropdown-toggle:after {
    display:none;
}
#msg_pacinete_form label {
    width: 100%;
}

/* datatables */
/* column visibility -> active column */
button.dt-button.buttons-columnVisibility.active {
    background: #03305e !important;
    color: white;
}
li.nav-item {
    transition: all ease .3s;
    height: 100%;
}
.nav-link {
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.reloadCaptcha {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    font-size: 25px;
    cursor: pointer;
    color: var(--c_blue)
}
.logo-pub{
    margin:0 0 -1rem -15rem
}
.rounded-xl{
    border-radius:25px;
}

video {
    clip-path: inset(1px 1px);
}
label.text-dark{
    cursor:pointer;
}
label.text-dark:hover{
    color:var(--c_orange) !important;
}

button:focus:not(:focus-visible) {
    box-shadow: none !important;
}

.form-floating>label {
    left: 20px;
}
.form-floating>.form-control, .form-floating>.form-control-plaintext {
    padding: 1rem 1.25rem;
}
.border-blue{
    border-color: var(--c_blue) !important;
}
@media (min-width: 1200px) {
    .bg-circle{
        background: url(../img/bg-circles.svg) no-repeat;
        background-size: 90%;
        background-position:center;
    }
}
@media (min-width: 1921px) {
    .bg-circle{
        background: url(../img/bg-circles.svg) no-repeat;
        background-size: 70%;
        background-position:center;
    }
}
@media (min-width: 992px) {
    
}

@media (max-width: 991.98px) { 
    
}
@media (min-width: 768px) {
    .min-vh-lg-100 {
        min-height: 100vh!important;
    }
}
@media (max-width: 767.98px) {
    .logo-pub{
        margin:4rem 0 -1rem -15rem
    }
    .bg-separation{
        background-image: none !important;
    }
    .img-main{
        max-width: 50% !important;
    }
    .bg-circle {
        background-size: 240%;
    }
}

@media (max-width: 575.98px) {
    .bg-circle {
        background-size: 300%;
    }
}