@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&family=Space+Mono:wght@400;700&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Manrope:wght@200..800&display=swap');
:root{

    --primary:      #1A5CF0;
    --primary-dark: #0E45C8;
    --primary-soft: #8DB3FA;

    --second:       #0A1A3C;
    --second-dark:  #050E24;
    --second-soft:  #3F4E72;

    --alternate:        #A7B0C7;
    --alternate-dark:   #CBD2E0;
    --alternate-soft:   #F0F3F9;

    --success:      #29b229;
    --info:         #3B82F6;
    --warning:      #e7ba36;
    --danger:       #df3131;
    --dark:         #0A1A3C;

    --success-soft: #c8f4d8;
    --info-soft:    #b1def5;
    --warning-soft: #f8ecc5;
    --danger-soft:  #ffdbdb;
    --dark-soft:    #6B7690;

    --white:        #ffffff;
    --red:          #db3636;
    --pink:         #f783f7;
    --purple:       #8656dd;
    --blue:         #1A5CF0;
    --green:        #47bb4b;
    --lime:         #95c10f;
    --teal:         #4FB8CC;
    --accent:       #4FB8CC;
    --accent-soft:  #D6F0F5;
    --yellow:       #fbc208;
    --brown:        #b9794d;
    --orange:       #ff8432;
    --gray:         #858585;
    --black:        #000000;

    --background:   #EEF1F8;
    --bg-elements:  #ffffff;
    --text-color:   #0A1A3C;
    --text-normal:  #3A4562;
    --text-label:   #6B7690;

    --border: 1px solid #D7DCE8;
    --gr-elements: radial-gradient(circle, #F5F7FB 0%, #DFE4EE 100%);
    --disabled: inset 0 0 100px 100px rgba(80, 80, 80, 0.15);
    --font: "Manrope", "Lato", sans-serif;
    --font-brand: "Space Grotesk", "Manrope", sans-serif;
    --font-mono: "Space Mono", monospace;
    --shadow:  0px 5px 10px 0px rgba(48, 48, 48, 0.35);
    --gr-primary: linear-gradient(359deg, var(--primary) 0%, var(--primary-soft) 115%);
    --icon-img: unset;

    --r: .5rem;
    --r-0: 0rem;
    --r-1: 1rem;
    --r-2: 2rem;
    --r-3: 3rem;
    --r-4: 4rem;
    --r-5: 5rem;
}
[data-theme="dark"]:not(.page-login){
    --background:   #050E24;
    --bg-elements:  #0F2148;
    --text-color:   #ffffff;
    --text-label:   #A9B3CC;
    --border: 1px solid #22345E;
    --disabled : inset 0 0 100px 100px rgba(116, 115, 131, 0.25);
    --icon-img:  invert(100%);
}
*{
    padding: 0;
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background-color: var(--background);
    font-family: var(--font);
    font-weight: 400;
    font-style: normal;
    font-size: .9rem;
    overflow-x: hidden;
}
p{
    margin: .25rem 0;
}
h1, h2, h3, h4, h5, h6{
    margin: 0;
    font-weight: 600;
    font-family: var(--font-brand);
    letter-spacing: -0.01em;
}
.icon-img{
    filter: var(--icon-img);
}
.icon-tipo{
    background: var(--primary);
    border-radius: 50%;
    width: 2.25rem;
    padding: .35rem;
}
.btn-dowload{
    display: flex;
    align-items: center;
}
.cursor-pointer {
    cursor: pointer;
}
.btn-no-style {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
.flickity-page-dots .dot{
    background: var(--text-color) !important;
}
.bg-login{
    background: radial-gradient(circle at 30% 20%, #1A3C8A 0%, #0A1A3C 55%, #050E24 100%);
    background-repeat: no-repeat;
    min-height: 100vh;
    margin: 0;
}
.gr-elements{
    background: radial-gradient(circle, var(--second-dark) 30%, var(--second) 100%) !important;
    background-repeat: no-repeat !important;
}
/* .gr-primary{
    background: linear-gradient(359deg, var(--primary) 0%, var(--primary-soft) 115%);
} */
.page-content{
    position: relative;
    top: 5rem;
    left: 270px;
    width: calc(100% - 270px);
    transition: all 0.5s ease;
}
.sidebar.collapsed~.page-content, 
.sidebar.collapsed~.content-nav {
    left: 85px;
    width: calc(100% - 85px);
}
.content-nav~.page-content {
    top: 260px;
}
.line-bottom{
    padding-bottom: .5rem;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: .5rem;
}
:disabled {
    cursor: not-allowed;
}
.button:disabled {
    cursor: not-allowed;
}
.label-error {
    color: #ff6666;
    font-size: .785rem;
    display: none;
}
.label-error.show {
    display: block;
    text-align: justify;
}
/* ================================================================================================= //
// ------------------------------------------- TEL PHONE ------------------------------------------- //
// ================================================================================================= */
.vti__dropdown-item{
    color: var(--black) !important;
}
.vue-tel-input{
    padding: 0 .75rem !important;
    box-sizing: border-box !important;
    outline:none;
    height: 42px;
    color: #6f7892;
    border: var(--border) !important;
    border-radius: .5rem !important;
    box-shadow: none !important;
    font-weight: 300;
    width: 100%;
    font-size: .885rem;
    font-family: var(--font);
}
.vue-tel-input:focus-within {
    outline: .1rem solid var(--alternate);
}
.vti__dropdown-list{
    width: 370px;
}
.multiselect {
    padding: 0 .75rem !important;
    box-sizing: border-box !important;
    outline:none;
    /* height: 40px; */
    color: #6f7892;
    border: var(--border);
    border-radius: .5rem;
    box-shadow: none !important;
    font-weight: 300;
    width: 100%;
    font-size: .885rem;
    font-family: var(--font);
    
}
.multiselect__tags {
    border: none !important;
}
/* Estilos personalizados para vue-multiselect */
.multiselect__option--highlight.multiselect__option {
  /* Estilos para el foco */
    background: var(--primary) !important;
}

.multiselect__option--highlight:hover {
  /* Estilos para el hover */
  background-color: var(--primary) !important; /* Cambia el color de fondo cuando el mouse está sobre el componente */
}
/* ================================================================================================= //
// --------------------------------------------- INPUT --------------------------------------------- //
// ================================================================================================= */
.input-block {
    position: relative;
    margin-bottom: .65rem;
}

.input-block span.placeholder {
    position: absolute;
    width: auto;
    margin: 12px 0;
    padding: 0 .45rem;
    font-family: var(--font);
    color: var(--text-label);
    display: flex;
    align-items: center;
    top: 0;
    left: 17px;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    background: none;
    pointer-events: none;
    user-select: none; 
}

.date-picker,
.input-block .input:valid + span.placeholder,
.input-block .input:read-only + span.placeholder,
.input-block .input:focus + span.placeholder {
    transform: scale(0.8) translateY(-27px);
    font-size: 1.05rem;
    background: var(--bg-elements) !important;
}
.input-block .input:focus + span.placeholder {
    color: var(--text-color);
}
.input-block + .label-error.show{
    margin-top: -10px;
    margin-bottom: .685rem;
}
/* ================================================================================================= //
// ---------------------------------------------- SWAL --------------------------------------------- //
// ================================================================================================= */
.swal2-html-container{
    color: #6f7892 !important;
    font-size: 1rem !important;
}
.swal2-popup.swal2-modal{
    border-radius: 1rem;
}
.swal2-icon-error.swal2-show{
    border: 2px solid var(--danger);
}
.swal2-icon-success.swal2-show{
    border: 2px solid var(--success);
}
.swal2-icon-warning.swal2-show{
    border: 2px solid var(--warning);
}
.swal2-icon-info.swal2-show{
    border: 2px solid var(--info);
}
.swal2-confirm {
    border: none !important;
}
/* ================================================================================================= //
// -------------------------------------------- FLICKITY ------------------------------------------- //
// ================================================================================================= */
.content-ps .flickity-button-icon{
    fill: currentColor !important;
    color: var(--alternate) !important;
}
.content-ps .flickity-button {
    background: transparent !important;
    border: none !important;
}
/* ================================================================================================= //
// --------------------------------------------- ARROW --------------------------------------------- //
// ================================================================================================= */
.arrow-up::before,
.arrow-down::before {
    font-size: 2rem;
    margin-right: 0.75rem;
    text-align: left;
    position: absolute;
    left: 5px;
    top: 50%;

}
.arrow-warning::before {
    font-size: 1.5rem;
    /* margin-right: rem; */
    text-align: left;
    position: absolute;
    left: 0.1px;
    font-weight: bold;
    top: 10%;

}
.arrow-up::before {
    content: "\203A";
    display: inline-block;
    transform: translateY(-50%) rotate(270deg);
    color: var(--success);
}
.arrow-warning::before {
    content: "\26A0";
    display: inline-block;
    /* transform: translateY(-50%) rotate(270deg); */
    color: var(--warning);
}
.arrow-down::before {
    content: "\203A";
    display: inline-block;
    transform: translateY(-50%) rotate(90deg);
    color: var(--danger);
}
.arrow-empty::before {
    content: "\2195";
    color: var(--gray);
}
/* ================================================================================================= //
// --------------------------------------------- TITLE --------------------------------------------- //
// ================================================================================================= */
.title{
    text-align: left;
    font-size: 1.65rem;
    margin: 0;
}
/* ================================================================================================= //
// -------------------------------------------- BORDER ------------------------------------------- //
// ================================================================================================= */
.border-radius{
    border-radius: .5rem;
}
/* ================================================================================================= //
// -------------------------------------------- POSITION ------------------------------------------- //
// ================================================================================================= */
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
/* ================================================================================================= //
// ---------------------------------------------- FLEX --------------------------------------------- //
// ================================================================================================= */
.flex{
    display: flex;
}
.flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-start{
    display: flex;
    justify-content: flex-start;
}
.flex-end{
    display: flex;
    justify-content: flex-end;
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-center-v{
    display: flex;
    align-items: center;
}
.flex-center-h{
    display: flex;
    justify-content: center;
}
.flex-wrap{
    flex-wrap: wrap;
} 
/* ================================================================================================= //
// -------------------------------------------- SHADOW --------------------------------------------- //
// ================================================================================================= */
.shadow{
    box-shadow: var(--shadow);
}
/* ================================================================================================= //
// -------------------------------------------- BUTTON --------------------------------------------- //
// ================================================================================================= */
.button {
    position: relative;
    display: inline-block;
    font-size: .9rem;
    padding: .568rem .85rem;
    margin: .35rem .25rem;
    box-sizing: border-box;
    white-space: normal;
    cursor: pointer;
    user-select: none;
    text-align: center;
    border: none;
    border-radius: .425rem;
    overflow: hidden;
    font-family: var(--font);
    color: var(--white);
    outline: none
}
a.button{
    text-decoration: none;
}
.button.icon{
    height: 1.85rem;
    width: 1.85rem;
    font-size: 1.15rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.button:focus{
    box-shadow: inset 7px 7px 11px -7px rgba(212, 211, 211, 0.75);
}
.button:active:not(:disabled){
    box-shadow: inset 7px 7px 11px -7px rgba(35, 35, 35, 0.75);
    background-color: var(--white);
    color: var(--black);
}
.button:hover{
    filter: brightness(90%);
}
.button.white{
    color: var(--second);
    outline: 2px solid #cfcfcf;
}
.button.gr-primary{
    color: var(--text-normal);
    outline: 2px solid var(--primary-soft);
    font-weight: bolder;
}

.input-block .button{
    margin-top: 3px;
}
.button-icon{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.15rem;
    color: var(--text-color);
    background: transparent;
    outline: none;
    border: 0;
    cursor: pointer;
    margin: .75rem .35rem;
}
.button-icon i {
    pointer-events: none;
}

/* ================================================================================================= //
// -------------------------------------------- wrapper -------------------------------------------- //
// ================================================================================================= */
.wrapper {
    display: flex;
    width: 100%;
    /* height: 400px; */
    /* background: #fff; */
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 12px;
}

.wrapper .btn-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    width: 36px;
    text-align: center;
    line-height: 36px;
    border: 0;
    color: var(--white);
    transition: all 0.3s linear;
    z-index: 5;
    cursor: pointer;
    font-size: 1.5rem;
    background: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}
.btn-arrow.button:active {
    transform: scale(0.94) translateY(-50%);
}
#prev {
    left: 5px;
}
#next {
    right: 5px;
}
.image-container {
    height: auto;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
}
.wrapper .image-container{
    height: 210px;
}
.image-container .carousel {
    display: flex;
    height: 100%;
    width: 100%;
    transition: all 0.4s ease;
    position: relative;
}
.image-container .carousel .img-banner{
    width: 100%;
    height: 210px;
    object-fit: fill;
}
.carousel .card {
    width: 100%;
    min-width: 100%;
    overflow: hidden;
}
.carousel .img-novedades {
    width: 100px;
    height: 100px;
}
/* ================================================================================================= //
// --------------------------------------------- SIZE ---------------------------------------------- //
// ================================================================================================= */
.w-1{
    min-width: 1rem;
}
.w-2{
    min-width: 2rem;
}
.w-3{
    min-width: 3rem;
}
.w-4{
    min-width: 4rem;
}
.w-5{
    min-width: 5rem;
}
.w-6{
    min-width: 6rem;
}
.w-7{
    min-width: 7rem;
}
.w-8{
    min-width: 8rem;
}
.w-9{
    min-width: 9rem;
}
.w-10{
    min-width: 10rem;
}
.w-11{
    min-width: 11rem;
}
.w-12{
    min-width: 12rem;
}
.w-13{
    min-width: 13rem;
}
.w-14{
    min-width: 14rem;
}
.w-15{
    min-width: 15rem;
}
.w-100{
    width: 100%;
}
/* ================================================================================================= //
// ----------------------------------------- BORDER RADIUS ----------------------------------------- //
// ================================================================================================= */
.br{
    border-radius: .5rem;
}
.br-1{
    border-radius: 1rem;
}
.br-2{
    border-radius: 3rem;
}
/* ================================================================================================= //
// --------------------------------------------- CARD ---------------------------------------------- //
// ================================================================================================= */
.card{
    width: 100%;
    /* margin: .75rem 0; */
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    border-radius: .8rem;
    color: var(--text-color);
    border: var(--border);
    background: var(--bg-elements);
}
.card.block{
    margin: .5rem 0;
}
.card-img img{
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 1rem 1rem 0 0;
}
.card-header{
    padding: .5rem;
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 1rem;
}
.card-body{
    padding: .5rem;
}
.card-footer{
    padding: .75rem;
    font-size: .9285rem;
    border-top: 1rem;
}
.card-footer.button{
    margin: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 1rem 1rem;
    position: relative;
    outline: 0;
    box-shadow: none;
}
/* ================================================================================================= //
// ------------------------------------------ dropdown --------------------------------------------- //
// ================================================================================================= */
.dropdown{
    position: relative;
}
.dropdown i{
    pointer-events: none;
}
.dropbtn {
    background-color: transparent;
    font-size: 1.35rem;
    border: none;
    cursor: pointer;
    color: var(--text-color);
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--bg-elements);
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 15;
    border-radius: .25rem;
    border: 1px solid #d7d7d7;
    text-align: left;
}
.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    /* font-size: 1rem; */
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background: linear-gradient(0deg, rgba(227, 230, 234, .8) 0%, rgba(228,228,228,.8) 100%);
}
.dropdown-content.show {
    display: block;
}
/* ================================================================================================= //
// ----------------------------------------- Input file -------------------------------------------- //
// ================================================================================================= */
.upload{
    width: max-content;
    min-width: 11rem;
    display: inline-block;
    font-size: .85rem;
    font-weight: normal;
    text-align: center;
}
.upload span{
    font-weight: bold;
    color: var(--white);
}
.upload:hover span{
    color: var(--white);
}
.upload input[type = "file"]{
    height: 0.1px;
    width: 0.1px;
    position: absolute;
    z-index: -1;
    overflow: hidden;
    opacity: 0;
}
.flex-upload{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-upload .upload{
    width: auto;
    min-width: 7rem;
    border-radius: .25rem 0 0 .25rem;
    height: 35px;
}

.upload:active{
    box-shadow: inset 6px 6px 10px -7px rgba(92, 92, 92, 0.25);
}
/* ================================================================================================= //
// -------------------------------------------- STEPS ---------------------------------------------- //
// ================================================================================================= */
/* Steps Navigation */
.steps {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #aaa;
}

.step.active {
    color: var(--text-color);
}

.step-number {
    background-color: #ddd;
    color: var(--dark-soft);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 4px;
}

.step.active .step-number {
    background-color: var(--primary);
    color: var(--white);
}

.step-label {
    font-size: 12px;
}

/* Progress Bar */
.progress-bar {
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background-color: var(--primary);
    transition: width 0.3s ease;
}

/* Form Fields */
.step-form {
    transition: all 0.3s ease;
}
/* ================================================================================================= //
// -------------------------------------------- LIST ---------------------------------------------- //
// ================================================================================================= */
.item-list{
    margin: 0 2rem;
    padding: 0;
    width: 97%;
    counter-reset: li;
    list-style: decimal;
    text-align: center;
}
.item-list .list{
    list-style: none;
    position: relative;
    display: block;
    padding: .45rem 2rem .45rem 2rem;
    margin: .85em 0;
    background: linear-gradient(5deg, #ececec 0%, #e2e5df 145%);
    color: var(--text-color);
    border: 1px solid #d7d0d0;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: 2rem;
    transition: all .2s ease-in-out;
    color: var(--text-normal)
}
.item-list .list:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: linear-gradient(5deg, var(--primary) 0%, var(--primary-soft) 145%);
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    color:#FFF;
}
/* ================================================================================================= //
// -------------------------------------------- LABEL ---------------------------------------------- //
// ================================================================================================= */
.label-success,
.label-danger{
    padding: .25rem 0;
    font-weight: bold;
    text-align: center;
    cursor: default;
    border-radius: .35rem;
}
.label-primary{
    border: 2px solid var(--primary);
    color: var(--primary);
}
.label-success{
    border: 2px solid var(--success);
    color: var(--success);
}
.label-warning{
    border: 2px solid var(--warning);
    color: var(--warning);
}
.label-danger{
    border: 2px solid var(--danger);
    color: var(--danger);
}
.label-dark{
    border: 2px solid var(--dark);
    color: var(--dark);
}
.label{
    padding: .25rem 1rem;
    border-radius: .5rem;
    font-size: .85rem;
    color: var(--white);
}
/* ================================================================================================= //
// ---------------------------------------- Radio - Check ------------------------------------------ //
// ================================================================================================= */
.group-check{
    margin-bottom: 1rem;
}
.group-check label{
    cursor: pointer;
    margin-right: 1rem;
    font-size: .875rem;
}
.checkbox{
    position: relative;
    font-size: .95rem;
    cursor: pointer;
    user-select: none;

    appearance: none;
    cursor: pointer;
}
.checkbox::after{
    content: " ";
    background-color: var(--white);
    border: .15rem solid var(--primary);
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: bottom;
}
input[type="radio"].checkbox::after {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}
.checkbox:disabled:after{
    cursor: not-allowed;
    opacity: .525;
    box-shadow: inset 0 0 100px 100px rgba(100, 100, 100, 0.25);
}
.checkbox:checked:after {
    user-select: none;
    background-color: var(--primary);
}
.checkbox:checked::before {
    color: var(--white);
    font-weight: bolder;
    font-size: 1rem;
    content: "\2714";
    position: absolute;
    top: 50%;
    transform: translate(30%, -50%);
}
.checkbox.second::after{
    border: .15rem solid var(--second-dark);
}
.checkbox.second:checked:after {
    background-color: var(--second);
}
/* ================================================================================================= //
// ----------------------------------------- Radio group ------------------------------------------- //
// ================================================================================================= */
.radio-block input[type="radio"] {
    position: fixed;
    appearance: none;
    width: 0;
}
.radio-block label {
    display: inline-block;
    color: var(--text-color);
    font-size: .9rem;
    padding: .45rem .85rem;
    border: .135rem solid var(--primary);
    box-sizing: border-box;
    margin: 0 -2px;
    min-width: 7rem;
    text-align: center;
    user-select: none;
}
.radio-block label:nth-of-type(1){
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.radio-block label:last-child{
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
.radio-block label i {
    margin-right: .35rem;
    font-size: .875rem;
}
.radio-block label:hover {
    cursor: pointer;
}
.radio-block input[type="radio"]:checked + label {
    color: var(--white);
    background-color: var(--primary);
}
.radio-block input[type="radio"]:disabled + label {
    cursor: not-allowed;
    opacity: .525;
    box-shadow: inset 0 0 100px 100px rgba(100, 100, 100, 0.25);
}
/* ================================================================================================= //
// -------------------------------------------- TABLE ---------------------------------------------- //
// ================================================================================================= */
.table-responsive{
    width: 100%;
    display: block;
    overflow-x: scroll;
    overflow-y: scroll;
    border-radius: 1rem;
    background: var(--bg-elements);
    padding: 0 .5rem;
}
.table{
    width: 100%;
    /* border-collapse: collapse; */
    border-collapse: separate;
    border-spacing: 0 .5rem;
}
.table-responsive.table-scroll{
    max-height: 45rem;
    position: relative;
}
.table-responsive.m-table.table-scroll {
    margin-bottom: 7.5rem;
}
.table-responsive.table-scroll.hide-scroll{
    overflow-x: hidden;
}
.table-scroll thead tr:first-child th {
    color: var(--white);
    font-weight: 600;
    background: var(--second);
    letter-spacing: .03em;
    box-shadow: 0 4px 8px -4px rgba(16, 25, 53, .35);
}
.table-scroll thead tr:first-child th:first-child{
    border-top-left-radius: .6rem;
    border-bottom-left-radius: .6rem;
}
.table-scroll thead tr:first-child th:last-child{
    border-top-right-radius: .6rem;
    border-bottom-right-radius: .6rem;
}
.table-scroll thead {
    background-color: var(--bg-elements);
    z-index: 1;
    position: sticky;
    top: -.1rem;
    font-weight: 700;
}
.table-scroll thead tr:nth-child(2){
    position: relative;
    top: -3px;
}
.table thead th{
    font-size: .78rem;
    padding: .85rem .6rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.table th, .table td{
    padding: .6rem .6rem;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--text-color);
    border-bottom: none;
    height: 35px;
    background: var(--bg-elements);
    transition: background-color .2s ease, box-shadow .2s ease;
}
.table .text-normal th, .table .text-normal td{
    color: var(--text-normal);
}
.table td{
    font-size: .8rem;
}
.table.table-center td, .td-center{
    text-align: center;
}
.table tbody tr{
    font-size: 0.885rem;
}
.table tbody tr:nth-child(even) td{
    background: var(--background);
}
.table tbody tr td:first-child{
    border-top-left-radius: .6rem;
    border-bottom-left-radius: .6rem;
}
.table tbody tr td:last-child{
    border-top-right-radius: .6rem;
    border-bottom-right-radius: .6rem;
}
.table tbody tr:hover td{
    background: var(--info-soft);
    box-shadow: 0 2px 8px rgba(16, 25, 53, .12);
}
.table tbody tr:hover td:first-child{
    box-shadow: inset 3px 0 0 var(--primary), 0 2px 8px rgba(16, 25, 53, .12);
}
.table tr td .text-tr{
    /* white-space: nowrap; */
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: break-spaces;
    text-align: center;
}
/* ================================================================================================= //
// ---------------------------------------------- RANGE -------------------------------------------- //
// ================================================================================================= */
.range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    height: 6px;
    background: #ccc;
}
.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 15px;
    width: 15px;
    background-color: var(--primary);
    border-radius: 50%;
    border: none;
    transition: 0.2s ease-in-out;
}
.range-input::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background-color: var(--primary);
    border-radius: 50%;
    border: none;
    transition: 0.2s ease-in-out;
}
.range-input::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(0, 128, 255, 0.1);
}
.range-input:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(0, 72, 255, 0.2);
}
.range-input:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(0, 72, 255, 0.2);
}
.range-input::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(0, 128, 255, 0.1);
}
.range-input:active::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(0, 72, 255, 0.2);
}
.range-input:focus::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(0, 72, 255, 0.2);
}
.sliderticks {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 2rem;
}
.sliderticks span {
    display: flex;
    justify-content: center;
    width: 1px;
    height: 10px;
    background: #d3d3d3;
    line-height: 40px;
}
.range-slider {
    flex: 1;
}
/* ================================================================================================= //
// ------------------------------------------ STYLE HEADER ----------------------------------------- //
// ================================================================================================= */
.page-content.above-header{
    position: absolute;
    top: 150px;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.grid-item {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    min-width: 100%;
}
@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
    .page-content.above-header{
        top: 140px
    }
}
/* ================================================================================================= //
// -------------------------------------------- TABS ----------------------------------------------- //
// ================================================================================================= */

.tabs-content{
    padding: 1rem;
    border: var(--border);
    border-radius: .35rem;
    margin-bottom: 1rem;
    background: var(--bg-elements);
    border-radius: .8rem;
    margin: .75rem 0;
}
.tabs {
    display: inline-block; /* Para la disposición horizontal de las pestañas */
}
.tab {
    font-family: var(--font);
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent; /* Espacio para el indicador activo */
    transition: background-color 0.3s ease, border-bottom-color 0.3s ease; /* Transición suave */
    white-space: nowrap; /* Evita que el texto de la pestaña se rompa */
    font-weight: 400;
    color: var(--text-color);
    background-color: transparent;
    border-radius: 0;
}
.tab.active {
    border-bottom: 2px solid var(--primary);
    font-weight: 700;
}
.tab-content {
    display: none; /* Oculta el contenido por defecto */
    padding: 20px;
}
.tab-content.active {
  display: block; /* Muestra el contenido activo */
  animation: fade-in 0.5s ease-in-out; /* Animación de aparición */
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Media query para responsive */
@media (max-width: 600px) {
    .tabs {
        flex-wrap: wrap; /* En pantallas pequeñas, envuelve las pestañas */
        text-align: center;
    }
}
/* ================================================================================================= //
// ------------------------------------------- Switch ---------------------------------------------- //
// ================================================================================================= */
.switch {
    position: relative;
    width: 3.75rem;
    height: 1.65rem;
    border-radius: 2rem;
    appearance: none;
    outline: none;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    background-color: #dedede;
    border: .125rem solid var(--primary);
}
.switch:checked {
    background-color: #ffffff;
}
.switch:disabled{
    cursor: not-allowed;
    box-shadow: var(--disabled);
    border: .125rem solid #bbbbbb;
}

.switch::before {
    content: "";
    position: absolute;
    width: 1.75rem;
    height: 1.5rem;
    border-radius: .75rem;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    left: .05rem;
    transition: 0.5s;
    background-color: var(--text-label);
}
.switch:checked::before {
    left: 1.75rem;
    background-color: var(--primary);
}
.switch:disabled::before{
    background-color: #bbbbbb;
}

/* ================================================================================================= //
// ---------------------------------------- Box Collapse ------------------------------------------- //
// ================================================================================================= */
.list-collapse{
    margin: .25rem .125rem;
    padding: 0;
    overflow: hidden;
    border-radius: 1rem;
    border: .1rem solid #bcbebc;
    list-style: none;
}
.list-collapse .li-item:not(:last-child){
    border-bottom: 1px solid #fff;
    cursor: pointer;
}
.list-collapse .li-item > a{
    background-color: #e6e6e6;
    text-decoration: none;
    color: var(--second);
    padding: 1rem;
    display: block;
    position: relative;
}
.collapse .li-item a.active-collapse + .content-collapse {
    margin: 1rem 18px;
}
.collapse .li-item a::after {
    content: "\276F";
    color: var(--second);
    position: absolute;
    right: 2rem;
    font-size: .65rem;
    transition: transform .5s;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
}
.collapse .li-item a.active-collapse::after {
    transform: rotate(90deg) translateX(-50%);
}
.content-collapse {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: var(--background)
}

/* ================================================================================================= //
// -------------------------------------------- SCROLL --------------------------------------------- //
// ================================================================================================= */
::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
}
::-webkit-scrollbar-thumb {
    border: 2px solid var(--primary);
    background-color: var(--alternate);
    border-radius: 30px;
}
/* ================================================================================================= //
// --------------------------------------------- FONTS --------------------------------------------- //
// ================================================================================================= */
.font-1{
    font-size: 1.75rem;
}
.font-2{
    font-size: 1.65rem;
}
.font-3{
    font-size: 1.55rem;
}
.font-4{
    font-size: 1.45rem;
}
.font-5{
    font-size: 1.25rem;
}
.font-6{
    font-size: 1.105rem;
}
.font-7{
    font-size: 1rem;
}
.font-8{
    font-size: .925rem;
}
.font-9{
    font-size: .875rem;
}
.font-10{
    font-size: .85rem;
}
/* ================================================================================================= //
// ------------------------------------------ BACKGROUND ------------------------------------------- //
// ================================================================================================= */
.transparent{
    background: transparent;
}
.primary{
    background-color: var(--primary);
}
.second{
    background-color: var(--second);
}
.alternate{
    background-color: var(--alternate);
}
.info{
    background-color: var(--info);
}
.success{
    background-color: var(--success);
}
.warning{
    background-color: var(--warning);
}
.danger{
    background-color: var(--danger);
}
.dark{
    background-color: var(--dark);
}
.primary-soft{
    background-color: var(--primary-soft);
}
.second-soft{
    background-color: var(--second-soft);
}
.info-soft{
    background-color: var(--info-soft);
}
.success-soft{
    background-color: var(--success-soft);
}
.warning-soft{
    background-color: var(--warning-soft);
}
.danger-soft{
    background-color: var(--danger-soft);
}
.dark-soft{
    background-color: var(--dark-soft);
}
.white{
    background-color: var(--white);
}
.black{
    background-color: var(--black);
}
.bg-elements{
    background-color: var(--bg-elements);
}
/* ================================================================================================= //
// ------------------------------------------- GRADIENTS ------------------------------------------- //
// ================================================================================================= */
.gr-primary{
    background: linear-gradient(360deg, var(--primary) 0%, var(--primary-soft) 115%);
}
.gr-alternate{
    background: linear-gradient(360deg, var(--alternate) 0%, var(--alternate-soft) 115%);
}
.gr-second{
    background: linear-gradient(360deg, var(--second) 0%, var(--second-soft) 115%);
}
.gr-info{
    background: linear-gradient(to right, #92dee8, var(--info));
}
.gr-success{
    background: linear-gradient(to right, #8ae9a7, var(--success));
}
.gr-warning{
    background: linear-gradient(to right, #f1e194, var(--warning));
}
.gr-danger{
    background: linear-gradient(to right, #ffbf96, var(--danger));
}
.gr-dark{
    background: linear-gradient(5deg, var(--dark) 0%, var(--dark-soft) 145%);
}

/* ================================================================================================= //
// ---------------------------------------------- TEXT --------------------------------------------- //
// ================================================================================================= */
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.text-left{
    text-align: left;
}
.capitalize{
    text-transform: capitalize
}
.uppercase{
    text-transform: uppercase
}
.lowercase{
    text-transform: lowercase
}
.bold{
    font-weight: 600;
}
.lighter{
    font-weight: lighter;
}
/* ================================================================================================= //
// ------------------------------------------- TEXT COLOR ------------------------------------------ //
// ================================================================================================= */
.text-base{
    color: var(--primary);
}
.text-alternate{
    color: var(--alternate);
}
.text-primary{
    color: var(--primary);
}
.text-second{
    color: var(--second);
}
.text-info{
    color: var(--info);
}
.text-success{
    color: var(--success);
}
.text-warning{
    color: var(--warning);
}
.text-danger{
    color: var(--danger);
}
.text-white{
    color: var(--white);
}
.text-black{
    color: var(--black);
}
.text-color{
    color: var(--text-color);
}
.text-label{
    color: var(--text-label);
}
/* ================================================================================================= //
// ------------------------------------------- TEXT BORDER ----------------------------------------- //
// ================================================================================================= */
.border-base{
    border: 1px solid var(--primary);
}
.border-alternate{
    border: 1px solid var(--alternate);
}
.border-primary{
    border: 1px solid var(--primary);
}
.border-second{
    border: 1px solid var(--second);
}
.border-info{
    border: 1px solid var(--info);
}
.border-success{
    border: 1px solid var(--success);
}
.border-warning{
    border: 1px solid var(--warning);
}
.border-danger{
    border: 1px solid var(--danger);
}
.border-white{
    border: 1px solid var(--white);
}
.border-black{
    border: 1px solid var(--black);
}
.border-color{
    border: 1px solid var(--text-color);
}
.border-label{
    border: 1px solid var(--text-label);
}
/* ================================================================================================= //
// ------------------------------------------- MARGINS --------------------------------------------- //
// ================================================================================================= */
/*---- Margin all ----*/
.m-half{
    margin: var(--r);
}
.m-1 {
    margin: var(--r-1);
}

.m-2 {
    margin: var(--r-2);
}

.m-3 {
    margin: var(--r-3);
}

.m-4 {
    margin: var(--r-4);
}

.m-5 {
    margin: var(--r-5);
}

/*---- Margin left - right ----*/
.mlr-half{
    margin: 0 var(--r);
}
.mlr-1 {
    margin: 0 var(--r-1);
}

.mlr-2 {
    margin: 0 var(--r-2);
}

.mlr-3 {
    margin: 0 var(--r-3);
}

.mlr-4 {
    margin: 0 var(--r-4);
}

.mlr-5 {
    margin: 0 var(--r-5);
}

/*---- Margin top - bottom ----*/
.mtb-half{
    margin: var(--r) 0;
}
.mtb-1 {
    margin: var(--r-1) 0;
}

.mtb-2 {
    margin: var(--r-2) 0;
}

.mtb-3 {
    margin: var(--r-3) 0;
}

.mtb-4 {
    margin: var(--r-4) 0;
}

.mtb-5 {
    margin: var(--r-5) 0;
}

/*---- Margin bottom ----*/
.mb-half{
    margin-bottom: var(--r);
}
.mb-1 {
    margin-bottom: var(--r-1);
}

.mb-2 {
    margin-bottom: var(--r-2);
}

.mb-3 {
    margin-bottom: var(--r-3);
}

.mb-4 {
    margin-bottom: var(--r-4);
}

.mb-5 {
    margin-bottom: var(--r-5);
}

/*---- Margin top ----*/
.mt-half{
    margin-top: var(--r);
}
.mt-1 {
    margin-top: var(--r-1);
}

.mt-2 {
    margin-top: var(--r-2);
}

.mt-3 {
    margin-top: var(--r-3);
}

.mt-4 {
    margin-top: var(--r-4);
}

.mt-5 {
    margin-top: var(--r-5);
}

/*---- Margin left ----*/
.ml-half{
    margin-left: var(--r);
}
.ml-1 {
    margin-left: var(--r-1);
}

.ml-2 {
    margin-left: var(--r-2);
}

.ml-3 {
    margin-left: var(--r-3);
}

.ml-4 {
    margin-left: var(--r-4);
}

.ml-5 {
    margin-left: var(--r-5);
}

/*---- Margin right ----*/
.mr-half{
    margin-right: var(--r);
}
.mr-1 {
    margin-right: var(--r-1);
}

.mr-2 {
    margin-right: var(--r-2);
}

.mr-3 {
    margin-right: var(--r-3);
}

.mr-4 {
    margin-right: var(--r-4);
}

.mr-5 {
    margin-right: var(--r-5);
}
/* ================================================================================================= //
// -------------------------------------------- PADDINGS ------------------------------------------- //
// ================================================================================================= */
/*---- padding all ----*/
.p-half{
    padding: var(--r);
}
.p-1 {
    padding: var(--r-1);
}

.p-2 {
    padding: var(--r-2);
}

.p-3 {
    padding: var(--r-3);
}

.p-4 {
    padding: var(--r-4);
}

.p-5 {
    padding: var(--r-5);
}

/*---- padding top - bottom ----*/
.ptb-half{
    padding: var(--r) 0;
}
.ptb-1 {
    padding: var(--r-1) 0;
}

.ptb-2 {
    padding: var(--r-2) 0;
}

.ptb-3 {
    padding: var(--r-3) 0;
}

.ptb-4 {
    padding: var(--r-4) 0;
}

.ptb-5 {
    padding: var(--r-5) 0;
}
/*---- padding left - right ----*/
.plr-half{
    padding: 0 var(--r);
}
.plr-1 {
    padding: 0 var(--r-1);
}

.plr-2 {
    padding: 0 var(--r-2);
}

.plr-3 {
    padding: 0 var(--r-3);
}

.plr-4 {
    padding: 0 var(--r-4);
}

.plr-5 {
    padding: 0 var(--r-5);
}

/*---- padding bottom ----*/
.pb-1 {
    padding-bottom: var(--r-1);
}

.pb-2 {
    padding-bottom: var(--r-2);
}

.pb-3 {
    padding-bottom: var(--r-3);
}

.pb-4 {
    padding-bottom: var(--r-4);
}

.pb-5 {
    padding-bottom: var(--r-5);
}

/*---- Padding top ----*/
.pt-half{
    padding-top: var(--r);
}
.pt-1 {
    padding-top: var(--r-1);
}

.pt-2 {
    padding-top: var(--r-2);
}

.pt-3 {
    padding-top: var(--r-3);
}

.pt-4 {
    padding-top: var(--r-4);
}

.pt-5 {
    padding-top: var(--r-5);
}

/*---- Padding left ----*/
.pl-half{
    padding-left: var(--r);
}
.pl-1 {
    padding-left: var(--r-1);
}

.pl-2 {
    padding-left: var(--r-2);
}

.pl-3 {
    padding-left: var(--r-3);
}

.pl-4 {
    padding-left: var(--r-4);
}

.pl-5 {
    padding-left: var(--r-5);
}

/*---- Padding right ----*/
.pr-half{
    padding-right: var(--r);
}
.pr-1 {
    padding-right: var(--r-1);
}

.pr-2 {
    padding-right: var(--r-2);
}

.pr-3 {
    padding-right: var(--r-3);
}

.pr-4 {
    padding-right: var(--r-4);
}

.pr-5 {
    padding-right: var(--r-5);
}
/* ================================================================================================= //
// ---------------------------------------------- ROWS --------------------------------------------- //
// ================================================================================================= */
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top:.5rem;
}
/* ================================================================================================= //
// -------------------------------------------- COLUMNS -------------------------------------------- //
// ================================================================================================= */
.col {
    flex: 1 0 0%;
}
/*********** COL EXTRA SMALL *********/
.col-xs-12 {
    width: 100%;
}
.col-xs-11 {
    width: 91.66666667%;
}
.col-xs-10 {
    width: 83.33333333%;
}
.col-xs-9 {
    width: 75%;
}
.col-xs-8 {
    width: 66.66666667%;
}
.col-xs-7 {
    width: 58.33333333%;
}
.col-xs-6 {
    width: 50%;
}
.col-xs-5 {
    width: 41.66666667%;
}
.col-xs-4 {
    width: 33.33333333%;
}
.col-xs-3 {
    width: 25%;
}
.col-xs-2 {
    width: 16.66666667%;
}
.col-xs-1 {
    width: 8.33333333%;
}
/*********** COL SMALL *********/
@media (min-width: 576px) {
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-sm-0 {
        margin-left: 0;
    }

    .offset-sm-1 {
        margin-left: 8.33333333%;
    }

    .offset-sm-2 {
        margin-left: 16.66666667%;
    }

    .offset-sm-3 {
        margin-left: 25%;
    }

    .offset-sm-4 {
        margin-left: 33.33333333%;
    }

    .offset-sm-5 {
        margin-left: 41.66666667%;
    }

    .offset-sm-6 {
        margin-left: 50%;
    }

    .offset-sm-7 {
        margin-left: 58.33333333%;
    }

    .offset-sm-8 {
        margin-left: 66.66666667%;
    }

    .offset-sm-9 {
        margin-left: 75%;
    }

    .offset-sm-10 {
        margin-left: 83.33333333%;
    }

    .offset-sm-11 {
        margin-left: 91.66666667%;
    }

    .g-sm-0,
    .gx-sm-0 {
        --bs-gutter-x: 0;
    }

    .g-sm-0,
    .gy-sm-0 {
        --bs-gutter-y: 0;
    }

    .g-sm-1,
    .gx-sm-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-sm-1,
    .gy-sm-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-sm-2,
    .gx-sm-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-sm-2,
    .gy-sm-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-sm-3,
    .gx-sm-3 {
        --bs-gutter-x: 1rem;
    }

    .g-sm-3,
    .gy-sm-3 {
        --bs-gutter-y: 1rem;
    }

    .g-sm-4,
    .gx-sm-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-sm-4,
    .gy-sm-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-sm-5,
    .gx-sm-5 {
        --bs-gutter-x: 3rem;
    }

    .g-sm-5,
    .gy-sm-5 {
        --bs-gutter-y: 3rem;
    }
}
/*********** COL MEDIUM *********/
@media (min-width: 768px) {
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-md-0 {
        margin-left: 0;
    }
    .offset-md-1 {
        margin-left: 8.33333333%;
    }
    .offset-md-2 {
        margin-left: 16.66666667%;
    }
    .offset-md-3 {
        margin-left: 25%;
    }
    .offset-md-4 {
        margin-left: 33.33333333%;
    }
    .offset-md-5 {
        margin-left: 41.66666667%;
    }
    .offset-md-6 {
        margin-left: 50%;
    }
    .offset-md-7 {
        margin-left: 58.33333333%;
    }
    .offset-md-8 {
        margin-left: 66.66666667%;
    }
    .offset-md-9 {
        margin-left: 75%;
    }
    .offset-md-10 {
        margin-left: 83.33333333%;
    }
    .offset-md-11 {
        margin-left: 91.66666667%;
    }
    .g-md-0,
    .gx-md-0 {
        --bs-gutter-x: 0;
    }
    .g-md-0,
    .gy-md-0 {
        --bs-gutter-y: 0;
    }
    .g-md-1,
    .gx-md-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-md-1,
    .gy-md-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-md-2,
    .gx-md-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-md-2,
    .gy-md-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-md-3,
    .gx-md-3 {
        --bs-gutter-x: 1rem;
    }
    .g-md-3,
    .gy-md-3 {
        --bs-gutter-y: 1rem;
    }
    .g-md-4,
    .gx-md-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-md-4,
    .gy-md-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-md-5,
    .gx-md-5 {
        --bs-gutter-x: 3rem;
    }
    .g-md-5,
    .gy-md-5 {
        --bs-gutter-y: 3rem;
    }
}
/*********** COL LARGE *********/
@media (min-width: 992px) {
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-lg-0 {
        margin-left: 0;
    }
    .offset-lg-1 {
        margin-left: 8.33333333%;
    }
    .offset-lg-2 {
        margin-left: 16.66666667%;
    }
    .offset-lg-3 {
        margin-left: 25%;
    }
    .offset-lg-4 {
        margin-left: 33.33333333%;
    }
    .offset-lg-5 {
        margin-left: 41.66666667%;
    }
    .offset-lg-6 {
        margin-left: 50%;
    }
    .offset-lg-7 {
        margin-left: 58.33333333%;
    }
    .offset-lg-8 {
        margin-left: 66.66666667%;
    }
    .offset-lg-9 {
        margin-left: 75%;
    }
    .offset-lg-10 {
        margin-left: 83.33333333%;
    }
    .offset-lg-11 {
        margin-left: 91.66666667%;
    }
    .g-lg-0,
    .gx-lg-0 {
        --bs-gutter-x: 0;
    }
    .g-lg-0,
    .gy-lg-0 {
        --bs-gutter-y: 0;
    }
    .g-lg-1,
    .gx-lg-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-lg-1,
    .gy-lg-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-lg-2,
    .gx-lg-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-lg-2,
    .gy-lg-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-lg-3,
    .gx-lg-3 {
        --bs-gutter-x: 1rem;
    }
    .g-lg-3,
    .gy-lg-3 {
        --bs-gutter-y: 1rem;
    }
    .g-lg-4,
    .gx-lg-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-lg-4,
    .gy-lg-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-lg-5,
    .gx-lg-5 {
        --bs-gutter-x: 3rem;
    }
    .g-lg-5,
    .gy-lg-5 {
        --bs-gutter-y: 3rem;
    }
}
/*********** COL EXTRA LARGE *********/
@media (min-width: 1200px) {
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-xl-0 {
        margin-left: 0;
    }
    .offset-xl-1 {
        margin-left: 8.33333333%;
    }
    .offset-xl-2 {
        margin-left: 16.66666667%;
    }
    .offset-xl-3 {
        margin-left: 25%;
    }
    .offset-xl-4 {
        margin-left: 33.33333333%;
    }
    .offset-xl-5 {
        margin-left: 41.66666667%;
    }
    .offset-xl-6 {
        margin-left: 50%;
    }
    .offset-xl-7 {
        margin-left: 58.33333333%;
    }
    .offset-xl-8 {
        margin-left: 66.66666667%;
    }
    .offset-xl-9 {
        margin-left: 75%;
    }
    .offset-xl-10 {
        margin-left: 83.33333333%;
    }
    .offset-xl-11 {
        margin-left: 91.66666667%;
    }
    .g-xl-0,
    .gx-xl-0 {
        --bs-gutter-x: 0;
    }
    .g-xl-0,
    .gy-xl-0 {
        --bs-gutter-y: 0;
    }
    .g-xl-1,
    .gx-xl-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-xl-1,
    .gy-xl-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-xl-2,
    .gx-xl-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-xl-2,
    .gy-xl-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-xl-3,
    .gx-xl-3 {
        --bs-gutter-x: 1rem;
    }
    .g-xl-3,
    .gy-xl-3 {
        --bs-gutter-y: 1rem;
    }
    .g-xl-4,
    .gx-xl-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-xl-4,
    .gy-xl-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-xl-5,
    .gx-xl-5 {
        --bs-gutter-x: 3rem;
    }
    .g-xl-5,
    .gy-xl-5 {
        --bs-gutter-y: 3rem;
    }
}
/*********** COL DOBLE EXTRA LARGE *********/
@media (min-width: 1400px) {
    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-xxl-0 {
        margin-left: 0;
    }
    .offset-xxl-1 {
        margin-left: 8.33333333%;
    }
    .offset-xxl-2 {
        margin-left: 16.66666667%;
    }
    .offset-xxl-3 {
        margin-left: 25%;
    }
    .offset-xxl-4 {
        margin-left: 33.33333333%;
    }
    .offset-xxl-5 {
        margin-left: 41.66666667%;
    }
    .offset-xxl-6 {
        margin-left: 50%;
    }
    .offset-xxl-7 {
        margin-left: 58.33333333%;
    }
    .offset-xxl-8 {
        margin-left: 66.66666667%;
    }
    .offset-xxl-9 {
        margin-left: 75%;
    }
    .offset-xxl-10 {
        margin-left: 83.33333333%;
    }
    .offset-xxl-11 {
        margin-left: 91.66666667%;
    }
    .g-xxl-0,
    .gx-xxl-0 {
        --bs-gutter-x: 0;
    }
    .g-xxl-0,
    .gy-xxl-0 {
        --bs-gutter-y: 0;
    }
    .g-xxl-1,
    .gx-xxl-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-xxl-1,
    .gy-xxl-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-xxl-2,
    .gx-xxl-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-xxl-2,
    .gy-xxl-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-xxl-3,
    .gx-xxl-3 {
        --bs-gutter-x: 1rem;
    }
    .g-xxl-3,
    .gy-xxl-3 {
        --bs-gutter-y: 1rem;
    }
    .g-xxl-4,
    .gx-xxl-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-xxl-4,
    .gy-xxl-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-xxl-5,
    .gx-xxl-5 {
        --bs-gutter-x: 3rem;
    }
    .g-xxl-5,
    .gy-xxl-5 {
        --bs-gutter-y: 3rem;
    }
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
}
.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}
.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}
.col-3 {
    flex: 0 0 auto;
    width: 25%;
}
.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}
.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}
.col-6 {
    flex: 0 0 auto;
    width: 50%;
}
.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}
.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}
.col-9 {
    flex: 0 0 auto;
    width: 75%;
}
.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}
.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}
/* ================================================================================================= //
// ------------------------------------------ CONTAINER -------------------------------------------- //
// ================================================================================================= */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
@media (min-width: 576px) {
    .container-sm,
    .container {
        max-width: 670px;
    }
}
@media (min-width: 768px) {
    .container-md,
    .container-sm,
    .container {
        max-width: 850px;
    }
}
@media (min-width: 992px) {
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1440px;
    }
}
@media (min-width: 1400px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1675px;
    }
}