/****************************************
 ****** Auth **********************
 ****************************************/

.auth-logo {
    width: 60%!important;
}

.auth-logo img {
    width: 100% !important;
    height: 100% !important;
}

/****************************************
 ****** General blades **********************
 ****************************************/
#app {
    min-height: 100vh;
    background: #F9FAFB;
}
#main-content {
    /*background: #E7E7E8;*/
    padding:1rem !important;
    padding-top: 98px !important;

    font-family: 'Inter', sans-serif;
    .section {
        border-radius: 8px;
        /*background: var(--white, #FFF);*/
        /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);*/
        display: flex;
        padding-bottom: 24px;
        flex-direction: column;
        justify-content: center;
        /*align-items: flex-end;*/
        /*gap: 40px;*/
        align-self: stretch;
    }
}

.header-section {
    display: flex;
    margin: 16px 16px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.header-section .header-title{
    color: var(--Color-Neutals-Gray-600, #929293);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.header-section .header-subtitle{
    color: #242731;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.header-section .header-data{
    color: #535862;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    align-self: stretch;
}

.page-heading {
    margin: 0px;
}
/****************************************
 ****** Datatables **********************
 ****************************************/

/*Rows vertical aligment */
.dataTable-table td, .dataTable-table thead th, .table td, .table thead th{
    vertical-align: middle;
}

td {
    /*display: flex;*/
    padding: 16px 24px !important;
    /*align-items: center;*/
    /*align-self: stretch;*/
}

table {
    background-color: white;
    margin-bottom: 0px !important;
}

.table-body {
    background-color: white;
    color: var(--Color-Basic-Black, #1C1C1C);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    border-radius: 8px;
    background: var(--white, #FFF);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}

.footer-table {
    padding: 12px 0px;
}

.table-responsive {
    /*margin: 0px -24px !important;*/
    /*.table {*/
    /*    margin-bottom: 0px !important;*/
    /*}*/

    border-radius: 8px;
    background: var(--white, #FFF);

    /* shadow */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}

h1 {
    color: var(---Gray-Black, #000);

    /* Semi-Bold/H5 Heading */
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/****************************************
 ****** Override Bootstrap colors *******
 ****************************************/
.text-success{
    color: rgba(16, 153, 71, 1)!important;
}
.text-warning{
    color: rgba(236, 177, 1, 1)!important;
}
.text-danger{
    color: rgba(220, 53, 69, 1)!important;
}
/* Primary */
.text-primary, .btn-outline-primary{
    color: rgb(38,38,38)!important;
}
.text-orange, .btn-outline-orange{
    color: #B54708!important;
}
.text-purple, .btn-outline-purple{
    color: #7A00D6!important;
}
.text-blue-dark, .btn-outline-blue-dark{
    color: #363F72!important;
}
.text-blue, .btn-outline-blue{
    color: #175CD3!important;
}
.text-light-gray, .btn-outline-light-gray{
    color: #B4B4B5!important;
}
.btn-outline-secondary {
    color: var(--gray-800, var(--gray-800, #1F2A37));
    border: 1px solid #E5E7EB;
}
.btn-outline-secondary:hover {
    border-radius: var(--rounded-lg, 8px);
    border: 1px solid var(--gray-100, #F3F4F6);
    background: var(--gray-300, #D1D5DB);
}
.border-light-gray {
    --bs-border-opacity: 1;
    border-color: #B4B4B5!important;
}
.border-gray-300 {
    --bs-border-opacity: 1;
    border-color: #D1D5DB!important;
}
.border-gray-500 {
    border: 1px solid var(--Color-Neutals-Gray-500, #B4B4B5);
}

.btn-primary, .bg-primary{
    background-color:#1C1C1C!important;
}
.btn-primary:hover {
    background: #343A40 !important;
}
.btn-orange, .bg-orange{
    background-color: #B54708!important;
}
.btn-light-orange, .bg-light-orange{
    background-color: #FFFAEB!important;
}
.btn-purple, .bg-purple{
    background-color: #7A00D6!important;
}
.btn-light-blue, .bg-light-blue{
    background-color: #EFF8FF !important;
}
.btn-blue-dark, .bg-blue-dark{
    background-color: #363F72!important;
}
.btn-light-success-700, .bg-light-success-700{
    background-color: #ECFDF3 !important;
}
.btn-blue-gray, .bg-blue-gray{
    background-color: #F8F9FC!important;
}
.btn-light-gray, .bg-light-gray{
    background-color: #B4B4B5!important;
}
.btn-light-gray-300, .bg-light-gray-300{
    /*background-color: #E7E7E8!important;*/
}
.btn-gray-200, .bg-gray-200{
    /*background-color: #E5E7EB!important;*/
}
.nav-link {
    background: transparent !important;
    display: flex;
    padding: 12px 16px 20px 16px;
    align-items: center;
    color: var(--Color-Basic-Black, #1C1C1C);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.nav-link.active::after {
    border-bottom: 4px solid var(--Color-Primary-Purple, #7A00D6);
    box-shadow: 0px 0px 0px!important;
}
.btn-outline-gray-200, .btn-gray-200, .border-gray-200{
    border-color: #E5E7EB!important;
}
.btn-light-purple, .bg-light-purple{
    background-color: #F4F3FF!important;
}
.btn-outline-primary, .btn-primary, .border-primary{
    /*border-color: rgb(38,38,38)!important;*/
    border: 1px solid var(--gray-200, #E5E7EB) !important;
}
.btn-outline-purple, .btn-purple, .border-purple{
    border-color: #7A00D6!important;
}
.btn-outline-primary:hover{
    background-color: rgb(38,38,38)!important;
    color: #fff!important;
}
.btn-outline-purple:hover{
    background-color: #7A00D6!important;
    color: #fff!important;
}
.btn-disable-primary, .bg-disable-primary{
    background-color: #101840!important;
}
.btn-disable-purple, .bg-disable-purple{
    background-color: #4d0186 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:hover i {
    /*background-color: rgba(39, 96, 242, 1)!important;*/
    color: #fff!important;
}
.btn-outline-purple:hover,
.btn-outline-purple:hover i {
    /*background-color: rgba(39, 96, 242, 1)!important;*/
    color: #fff!important;
}

.btn-dark {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
/************************************
 ****** Navbar **********************
 ************************************/
.navbar-light a{
    color: rgba(39, 96, 242, 1)!important;
}

/************************************
 ****** Sidebar menu **********************
 ************************************/
.sidebar-wrapper{
    /*box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.08);*/
    border-right: 1px solid var(--Color-Neutals-Gray-300, #E7E7E8);
    background: var(---Gray-White, #FFF);
    box-shadow: 8px 0 24px 0 rgba(0, 0, 0, 0.04);
}

.sidebar-wrapper .sidebar-header {
    padding: 12px 1rem;
}

.sidebar-wrapper .sidebar-header .logo{
    width: 100%;
}

.sidebar-wrapper .sidebar-header .logo img{
    width: 90%!important;
    height: 100%!important;
}

.sidebar-wrapper .sidebar-menu ul{
    list-style: none!important;
}

.sidebar-wrapper .sidebar-menu .sidebar-item{
    cursor: pointer;
}
.sidebar-item:hover{
    background-color: #F7F8F9;
}
.sidebar-item:hover > a > div > span{
    color: black !important;
}
.sidebar-item-active {
    background-color: #E0FF25 !important;
    border-radius: 8px;
}

.sidebar-item-active:hover{
    background-color: #E0FF25 !important;
    border-radius: 0.25rem; !important;
    /*color: rgba(39, 96, 242, 1) !important;*/
}
.sidebar-item-active:hover div{
    color:  black!important;
    background-color: #E0FF25 !important;
}
.active-link {
    color: black!important;
}

.inactive-link {
    color: #000000; /* Dark text */
}
.sub-link:hover{
    /*color: rgba(39, 96, 242, 1)!important;*/
    font-weight: bold;
}

.sidebar-wrapper .menu {
    padding-left: 16px !important;
}

/*****************************
******** Forms Inputs **************
******************************/

.form-switch .form-check-input:checked {
    background-color: rgb(38, 38, 38) !important;
    border-color: rgb(38, 38, 38) !important;
}

.form-switch .form-check-input::after {
    content: none !important;
}

.form-switch .form-check-input{
    width: 2.7em;
    height: 1.4em;
}

/*****************************
******** Filters **************
******************************/

/* Tab filters */
.tabFilter{
    border-bottom: 1px solid var(--Color-Neutals-Gray-300, #E7E7E8);
}

.tabFilter .tab-muted{
    color: rgba(173, 181, 189, 1)!important;
}

.tabFilter .active{
    color: #000!important;
    font-weight: 600!important;
}

.tabFilter .nav-link:hover{
    color: #000!important;
    font-weight: 600!important;
}

/* Detailed filters */

.filters .displayed-filters .filter{
    cursor: pointer;
}

.filters .displayed-filters .filter-body input::-webkit-outer-spin-button,
.filters .displayed-filters .filter-body input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.filters {
    border-top: 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    margin-bottom: -4px;
    padding-bottom: 4px;
}

/* Firefox */
.filters .displayed-filters .filter-body input[type=number] {
    -moz-appearance: textfield;
}

.filters .displayed-filters .filter-body ul{
    list-style: none;
}
.filter-select {
    position: relative;
}

.filter {
    height: 44px;
    padding: 8px 12px;
    border-bottom: 2px solid #ABB5BE;
    cursor: pointer;
    align-items: center;
}

.filter span {
    font-size: 14px;
    line-height: 21px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter i {
    transition: transform .15s ease;
}

/* dropdown abierto */
.filter-select.open .bi-chevron-down {
    transform: rotate(180deg);
}

.filter-body {
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
}

/* checkbox */
.filter-body .form-check {
    margin-bottom: 8px;
    padding-left: 0px;
    gap: 8px;
    display: flex;
}

.filter-body .form-check-input {
    cursor: pointer;
}

.filter-body .form-check-label {
    font-size: 14px;
    cursor: pointer;
}

/*
.filters .displayed-filters .search-body{
    z-index: 999;
    width: 450px!important;
}

.filters .displayed-filters .search-body ul{
    list-style: none;
    padding-left: 2px;
}

.filters .displayed-filters .search-body ul li:hover {
    background-color: #0d6efd;
    color: #fff;
    cursor: pointer;
}
*/

.filters .displayed-filters .date .filter-body{
    width: min-content;
}

/*****************************
******** Order detail **************
******************************/

/* Shipmet, pod and billing detail */
.order-detail .detail-data{
    color: #000;
    font-weight: 200;
}

/* Items table */
.order-detail .order-items thead tr th{
    background-color: #FAFAFA;
    border: 1px solid #fff;

}

.order-detail .order-items td img{
    max-width: 40px;
}

/* Notes */

.order-detail .note-body{
    background-color: rgba(204, 224, 255, 0.2);
}

.order-detail .notes-fixed{
    float:  right;
    height: 400px;
    width:  100%;
    padding-right: 5px;
}

.order-detail .notes-content{
    width:  98%;
    overflow-y: auto;
}

.order-detail .edit{
    cursor: pointer;
}

/*****************************
******** Datatables **************
******************************/

.publication-product img{
    max-width: 35px;
}

#perPage {
    display: flex;
    width: 54px !important;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border: 0px;
    color: var(--Color-Primary-Purple, #7A00D6);

    /* Body/Small */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
}
.per-page-text {
    color: var(--Gray-700, #495057);

    /* Body/Small */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
}
.text-muted {
    color: var(--Color-Neutals-Gray-700, #666) !important;

    /* Body/Small */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
}
/* Item option menu */

.item-options .item-button i{
    cursor: pointer;
}

.item-options .menu-wrapper{
    right: 300px;
    width: 100%;
}
.item-options .menu{
    background-color: #ffffff;
    padding: 5px;
    width: 300px;
    z-index: 9999!important;

    box-shadow: 0 2px 6px rgba(10, 13, 18, 0.08);
}
.item-options .menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.item-options .menu ul li{
    width: 100%;
    padding: 0 30px 0 30px;
    border-radius: 5px;
    text-align: left;
    color: #000000;
}

.item-options .menu ul li a,
.item-options .menu ul li a:link,
.item-options .menu ul li a:visited,
.item-options .menu ul li a:active{
    text-decoration: none!important;
    color: #000000;
}

.item-options .menu ul li:hover,
.item-options .menu ul li a:hover{
    cursor: pointer;
    background-color: rgb(38,38,38)!important;
    color: #fff!important;
}

/*****************************
******** Accounts **************
******************************/

.account-create .edit-icon{
    position: relative;
    left: 50px;
    bottom: 65px;
    cursor: pointer;
}

.account-create .edit-icon i{
    width: 35px;
    height: 35px;
}

.account-create .account-image{
    width: 120px;
    height: 120px;
    margin-right: 34px;
    cursor: pointer;
}

.overlay {
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
}

.account-selector .dropdown-item:hover{
    background: #0d6efd;
    color: #fff;
}

.account-selector .dropdown-item{
    cursor: pointer;
}

#account-header{
    background: var(---Gray-White, #FFF);
    box-shadow: 8px 0 15px 0 rgba(0, 0, 0, 0.04);
    display: flex;
    padding: 16px 32px;
    align-items: center;
    gap: 56px;
    z-index: 55;
    position: fixed;
    width: 100% ;
}

.user-menu {
    display: flex;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;
    /*gap: 4px;*/
    border-radius: 8px;
    border: 1px solid var(--Color-Neutals-Gray-400, #D6D6D7);
    /*display: flex;*/
    /*width: 210px;*/
    padding: 8px;
    /*justify-content: center;*/
    /*align-items: center;*/
    gap: 12px;
}

.user-name {
    color: #0E1534;
    font-family: 'Outfit', sans-serif;
    font-size: 21.25px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%; /* 31.875px */
}

/*****************************
******** Reports **************
******************************/

/* JS chart components renderer */
#chart{
    width: 100%;
}

.day-scheduler div label{
    font-size: 0.8em;
}
.subtitle{
    font-size: 0.88em;
    color: #101840 !important;
}
.li-style{
    background-color: #CCE0FF;
    padding: 0px;
    /* margin-left: 5px; */
    margin-right: 2px;
    margin-top: 0px;

}
.text-h6{
    padding-top: 8px;
    padding-left: 8px;
}
.branch-ul li:active{
    background-color:#e7effa !important;
    cursor: pointer;
}

ul.branch-ul li.draggable-source--is-dragging.draggable--over{
    background-color:#eff3fa !important;
}
ul.branch-ul li.draggable-mirror{
    background-color:#e7effa !important;
}

/*****************************
******** Sections **************
******************************/

/* Custom input file */
.btn-file {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
}

/* Input file */
.btn-file input[type=file],
.btn-file input[type=file]:focus,
.btn-file input[type=file]:active,
.btn-file input[type=file]:not(:focus){
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: #ffffff;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
}

/* Custom input file name */
.custom-input{
    width: 100%;
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

.input-file:hover{
    cursor: pointer!important;
    z-index: 999;
}

.custom-input .filenameWrapper{
    border-radius: 22px;
    background: #ABB5BE;
    color: #ffffff;
    padding: 4px 16px 4px 16px;
    font-weight: 600;
}

.custom-input .filenamePlaceholder{
    color: #999999;
}

.section-edit .form-switch .form-check-input{
    height: 16px!important;
    width: 32px!important;
}

.section-edit .form-switch .form-check-input:hover{
    cursor: pointer;
}

.branch-ul li:active{
    background-color:#e7effa !important;
    cursor: pointer;
}

.section-sorteable-items .draggable-source--is-dragging.draggable--over{
    background-color:#e7effa !important;
}
.section-sorteable-items .draggable-mirror{
    background-color:#e7effa !important;
    z-index: 99!important;
    width: 75%;
}

.drag-handle{
    cursor: pointer!important;
    padding: 8px 8px 8px 0;
}

/* Default forms placeholder */
.form-control::-moz-placeholder {
    color: #999;
    opacity: 1;
}
.form-control:-ms-input-placeholder {
    color: #999;
}
.form-control::-webkit-input-placeholder {
    color: #999;
}

input .form-control{
    display: flex;
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 8px !important;
    border: 1px solid #D1D5DB !important;
    gap: 8px;
    flex: 1 0 0;
}

.no-button{
    color: #2A64F2;
    background: none !important;
    border: none;
    margin: 0;
    padding: 0;
}

.tox-promotion-link{
    display: none!important;
}

.detail-font{
    word-wrap: break-word !important;
    font-size: 1.1em;
}
.datatable-font{

    word-wrap: break-word !important;
    width: 20rem;
}
.check-off{
    /* .form-check-input[type=radio] { */
        border-radius: 0% !important;

}

/* coupon create */
.select-item{
    font-size: 0.7em;
    color: #FFF;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.select-item:hover{
    cursor: pointer;
}

.select-item-detail{
    font-size: 0.7em;
}

.item-list:hover{
    cursor: pointer;
}
/* boton de obtener los id checkbox en sucursales */
.end-50 {
    right: 12% !important;
}

.check-scheduler {
    margin-right: 4rem !important;
    margin-left: 3.7rem !important;
}
.combobox{
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 450px;
    z-index: 9999;
}
.sidebar-wrapper::-webkit-scrollbar, .combobox::-webkit-scrollbar {
    width: 4px !important; /* Adjust scrollbar width */
  }
.sidebar-wrapper::-webkit-scrollbar-thumb, .combobox::-webkit-scrollbar-thumb {
    background-color: #727272 !important ;
    border-radius: 15%;
    width: 10px;
    height:5px;
  }
.sidebar-wrapper::-webkit-scrollbar-track, .combobox::-webkit-scrollbar-track {
    background-color: rgb(190, 190, 192); /* Track color */
  }

.list-item {
    max-height: 200px;
    overflow-y: auto;
}

.list-modal-item {
    display: flex;
    flex-wrap: wrap; /* Los items se moverán a la siguiente fila cuando no haya espacio */
    max-height: 240px; /* Limita la altura del contenedor */
    overflow-y: auto; /* Habilita el scroll vertical si el contenido es mayor que el máximo de altura */
    width: 100%; /* Asegura que el div ocupe el ancho completo del contenedor */
    gap: 8px; /* Espacio entre los "pills" */
}


#livewire-error{
    padding: 20vh 30vw 60vh 30vw!important;
    }

#error-bg{
    width: 100vw;
    height: 100vh;
    background-color: #CCE0FF !important;
}
.position-absolute.button-scheduler{
    top: 10%;
    right: 0%;
    margin-right: 190px;
}


.error-font{
    font-size: 0.9em;
}

.thead-color{
    border-bottom: 1px solid var(--Gray-200, #E9EAEB);
    background: var(--Gray-50, #FAFAFA);
    color: var(--Color-Neutals-Gray-700, #666);

    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}
.tr-style{
    background-color: #CCE0FF !important;
}
.disabled-input{
    background-color: #e9ecef !important;
}

.selected{
    background-color: #0a53be;
}

#overlay-div {

    z-index: 999; /* put .gold-box above .green-box and .dashed-box */
    background: white;
    margin: 0;
    right: 0;
    /*top: 10%;*/
    /*top: 0;*/
}

.simple-combobox {
    display: flex;
    padding: 8px 16px 8px 8px;
    align-items: center;
    align-content: center;
    gap: 16px;
    flex-wrap: wrap;
    border-radius: 4px;
    border: 1px solid #2760F2;
    cursor: text;
    background-color: #fff;
    .pills {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        .search-icon {
            display: flex;
            margin-top: 2px;
            width: 18px;
            height: 18px;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            color: #2760F2
        }
        .search {
            display: flex;
            width: 200px;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            overflow: hidden;
            color: #6C757D;
            text-overflow: ellipsis;
            outline: none;
            border: none;
            background-color: #fff;

            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
        }
    }
}

.detail-combobox {
    display: flex;
    padding: 8px 16px 8px 8px;
    align-items: center;
    align-content: center;
    gap: 16px;
    flex-wrap: wrap;
    border-radius: 4px;
    background-color: #fff;
}

.tag {
    display: flex;
    padding: 4px 4px 4px 8px;
    min-height: 26px;
    align-items: center;
    gap: 8px;
    border-radius: 22px;
    background: #2760F2;
    color: #FFF;
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
    .tag-name {
        font-size: 9px;
        text-align: center;
        line-height: 1.2;
    }
    .tag-icon {
        margin-top: -11px;
        margin-right: 3px;
        width: 14px;
        height: 14px;
    }
}
.simple-options {
    margin-left: 0;
    background-color: #FFF !important;
    color: #000;
}

.icon-style {
    background-color: inherit; /* Keep background unchanged */
    color: inherit; /* Keep text color unchanged */
    border: none; /* No border */
    outline: none; /* Remove focus outline as well */
    font-size: 30px;
    cursor: pointer;
}
.arrow-clockwise-size{
    font-size: 10px;
    width: 23px;
    height: 23px;
    margin-top: 100px;
}
.cursor-pointer {
    cursor: pointer;
}
.rotate {
    animation: spin 1s linear infinite;
}


@keyframes spin {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}
.accordion-button:focus {
     z-index: 3;
     border-color: transparent !important;
     outline: 0;
     box-shadow: none !important;
    border-left:transparent !important;

}


.border-accordion{
    z-index: 3;
    --bs-border-width: 3px;
    border-left: 3px solid rgba(39, 96, 242, 1) !important;

}
.accordion-button:not(.collapsed) {
    color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;

}
.accordion-button{
    height: 168px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;

}
.size-img{
    width: 15% !important;
}
.fsize {
   font-size: medium !important;
}

.border-header {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}


.order-items tbody tr{
    z-index: 3;
    --bs-border-width: 3px;
    border-left: 3px solid rgba(39, 96, 242, 1) !important;
}
.order-items tbody tr.collapsed{
    border-left: transparent !important;
}
.order-items tbody tr.sub-items{
    border-left: transparent !important;
}
.order-items tbody tr:has(div.show) {
    border-left: 3px solid rgba(39, 96, 242, 1) !important;
}

/* Fijar tamaño del contenedor del carrusel */
/*#carouselExampleIndicators .carousel-inner {*/
/*    height: 300px; !* Ajustá según tu diseño *!*/
/*}*/

/* Ajustar las imágenes para que se adapten */
#carouselExampleIndicators .carousel-inner img {
    height: 100%;
    width: auto;
    margin: 0 auto;
    object-fit: contain; /* mantiene proporciones sin recortar */
    background-color: #f8f9fa; /* fondo gris claro para contraste */
}

/* Estilos base de los indicadores */
.carousel-indicators [data-bs-target] {
    background-color: #bbb;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    transition: background-color 0.3s ease;
}

/* Indicador activo con color distinto */
.carousel-indicators .active {
    background-color: #0d6efd; /* azul Bootstrap por defecto */
}
.f-size-24{
    font-size: 24px !important;
}
.f-size-16{
    font-size: 16px !important;
}
.f-size-14{
    font-size: 14px !important;
}
.f-size-12{
    font-size: 12px !important;
}


/****************************************
 ****** Cards styles **********************
 ****************************************/
.model-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    padding: 24px;
    border-radius: 8px;
    background: var(---Gray-White, #FFF);
    box-shadow: 8px 0 15px 0 rgba(0, 0, 0, 0.08);
    .description {
        display: flex;
        align-items: flex-start;
        gap: 4px;
        flex: 1 0 0;
        padding-bottom: 24px;
        justify-content: space-between;
        align-self: stretch;
        border-bottom: 1px solid #E7E7E8;
        .title {
            color: #000;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }
        .subtitle {
            color: #535862 !important;
            align-self: stretch;

            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }
    }

    .title {
        color: var(--Color-Basic-Black, #1C1C1C);
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .card-table {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-self: stretch;
        .card-title {
            color: #1C1C1C;

            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            display: flex;
            padding: 8px 0;
            align-items: flex-start;
        }
        .table {
            gap: 24px;
            align-self: stretch;
            border-radius: 8px;
            background: #FFF;
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.10);
            thead tr th {
                height: 44px;
                padding: 12px 24px;
                align-items: center;
                gap: 12px;
                align-self: stretch;
                border-bottom: 1px solid #E9EAEB;
                background: #FAFAFA !important;

                color: #666;

                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 18px;
            }
            tbody tr td {
                height: 72px;
                padding: 16px 24px;
                vertical-align: middle !important;
                /*align-items: center;*/
                /*align-self: stretch;*/
                border-bottom: 1px solid #E9EAEB;

                color: #1C1C1C;

                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 20px;
            }
        }
    }
}
.model-card-detail {
    display: flex;
    flex-direction: column;
    padding: var(--Spacing-SIze-4, 16px);
    align-items: flex-start;
    align-self: stretch;
    border-radius: 8px;
    background: var(--white, #FFF);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    gap: 16px;
    .title {
        color: var(--Color-Basic-Black, #1C1C1C);
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 100% */
    }
    .badge {
        display: flex;
        padding: var(--05, 2px) var(--25, 10px);
        justify-content: center;
        align-items: center;
        gap: var(--0, 0);
        border-radius: var(--rounded-md, 6px);
        color: var(--green-800, var(--green-800, #03543F));
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 18px */
    }
    .subtitle {
        color: var(--Color-Neutals-Gray-600, #929293) !important;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 21px */
    }
}
.form-subtitle {
    color: var(--Color-Neutals-Gray-700, #666);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.input-field {
    display: flex;
    padding: var(--0, 0);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--2, 8px);
    flex: 1 0 0;
    width: 100% !important;

    color: var(--Color-Neutals-Gray-800, #393939);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
    input, select {
        display: flex;
        padding: var(--2, 8px) var(--4, 16px);
        align-items: center;
        gap: var(--25, 10px);
        align-self: stretch;
        border-radius: 8px;
        border: 1px solid var(--gray-300, #D1D5DB);
        color: var(--Color-Neutals-Gray-500, #B4B4B5);

        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 21px */
    }
}
.data-input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    .title {
        color: var(--Color-Neutals-Gray-500, #B4B4B5);
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px; /* 133.333% */
    }
    .value {
        height: 21px;
        /*flex: 1 0 0;*/
        overflow: hidden;
        color: var(--Color-Basic-Black, #1C1C1C);
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px; /* 150% */
    }
    .hyperlink {
        color: var(--Color-Primary-Purple, #7A00D6);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px; /* 150% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }
}

.search-input {
    position: relative;
    width: 289px;
}

.search-input input {
    width: 100%;
    height: 44px;
    padding: 8px 16px 8px 40px;
    border-radius: 8px;
    border: 1px solid var(--Secondary-Light-Color, #ABB5BE);
    background: #FFF;

    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 21px;

    outline: none;
}

.search-input input::placeholder {
    color: var(--Secondary-Light-Color, #ABB5BE);
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    fill: var(--Secondary-Light-Color, #ABB5BE);
    pointer-events: none;
}
.search-input input:focus {
    border-color: #7F56D9;
}

input[type="button"] ,button ,.btn {
    display: flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;


    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

select {
    display: flex;
    width: 100%;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    color: #111928;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color: #fff;
    background-image: url("/icons/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;

    padding-right: 36px; /* espacio para el icono */
}

select.error {
    border: 1px solid var(--red-500, #F05252);
    background: var(--red-50, #FDF2F2);
    color: #C81E1E !important;
    background-image: url("/icons/chevron-down-error.svg");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px; /* espacio para el icono */
}
select:disabled {
    background: var(--gray-50, #F9FAFB);
    color: #6B7280;
}
select option[value=""] {
    color: #6B7280;
}
select:has(option[value=""]:checked) {
    color: #6B7280;
}

input[type="checkbox"]:not(.form-check-input) {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid #D5D7DA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

input[type="checkbox"]:not(.form-check-input):checked {
    background: var(--Brand-50, #F9F5FF);
    border: 1px solid var(--Brand-600, #7F56D9);
}
input[type="checkbox"]:not(.form-check-input):checked::after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: #7F56D9; /* color del check */
    mask: url('/icons/check.svg') no-repeat center;
    -webkit-mask: url('/icons/check.svg') no-repeat center;
}
input[type="checkbox"]:not(.form-check-input):disabled {
    cursor: unset;
    border-radius: 6px;
    border: 1px solid var(--Gray-200, #E9EAEB);
    background: var(--Gray-100, #F5F5F5);
}
input[type="checkbox"]:not(.form-check-input):disabled:hover{
    box-shadow: 0 0px 0px rgba(10, 13, 18, 0.08);
}

input[type="checkbox"]:not(.form-check-input):disabled:checked::after {
    background-color: #B4B4B5;
}
input[type="checkbox"]:not(.form-check-input):checked.error {
    border: 1px solid var(--red-500, #F05252);
}

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--Brand-600, #D5D7DA);
    background: white;
}

input[type="radio"]:checked {
    background: var(--Brand-50, #7F56D9) !important;
    border: 1px solid var(--Brand-600, #7F56D9) !important;
}
input[type="radio"]:checked::after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: white; /* color del check */
    mask: url('/icons/check.svg') no-repeat center;
    -webkit-mask: url('/icons/check.svg') no-repeat center;
}
input[type="radio"]:disabled {
    cursor: unset;
    border-radius: 6px;
    border: 1px solid var(--Gray-200, #E9EAEB);
    background: var(--Gray-100, #F5F5F5);
}
input[type="radio"]:disabled:hover{
    box-shadow: 0 0px 0px rgba(10, 13, 18, 0.08);

}

input[type="radio"]:disabled:checked::after {
    background-color: #B4B4B5;
}
input[type="radio"]:checked.error {
    border: 1px solid var(--red-500, #F05252);
}

.btn-radio{
    display:flex;
    padding:16px;
    align-items:center;
    justify-content:space-between;
    gap:4px;
    border-radius:8px;
    border:1px solid #E9EAEB;
    background:#FFF;
    color:#414651;
    font-size:14px;
    font-weight:500;
    line-height:20px;
    cursor: pointer;
}

.btn-radio:has(input:checked){
    gap:8px;
    border:1px solid #D6BBFB;
    background:#F9F5FF;
    color:#53389E;
}

.supporting-text{
    color:#CDB3F4;
    font-size:12px;
    font-style:italic;
}

.btn-close {
    width: 24px;
    height: 24px;
    padding: 8px;
}

.modal-subtitle {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 10px;
    color: var(--Primary-Dark, #101840);

    /* Body/Base text */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.badge-marketplace-ML {
    /*display: flex;*/
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: #FFF7AC;
    color: #706500;
    text-align: center;

    /* Text sm/Medium */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.badge-marketplace-WOO {
    /*display: flex;*/
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: #EDE7FF;
    color: #720EEC;
    text-align: center;

    /* Text sm/Medium */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}
.badge-role {
    display: flex;
    padding: 2px 8px 2px 6px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 16px;
    background: var(--Blue-gray-50, #F8F9FC);
    color: var(--Blue-gray-700, #363F72);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}
.badge-success {
    /*display: flex;*/
    padding: 2px 10px;
    vertical-align: middle;
    /*justify-content: center;*/
    /*align-items: center;*/
    border-radius: var(--rounded-md, 6px);
    background: var(--green-100, #DEF7EC);
    text-align: center;

    /* Text xs/Medium */
    color: var(--green-800, #03543F);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}
.badge-warning {
    /*display: flex;*/
    padding: 2px 8px;
    vertical-align: middle;
    /*justify-content: center;*/
    /*align-items: center;*/
    border-radius: 16px;
    background: var(--Warning-50, #FFFAEB);
    color: var(--Warning-700, #B54708);
    text-align: center;

    /* Text xs/Medium */
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}
.badge-danger {
    /*display: flex;*/
    padding: 2px 8px;
    vertical-align: middle;
    /*justify-content: center;*/
    /*align-items: center;*/
    border-radius: 16px;
    background: var(--Error-50, #FEF3F2);
    color: var(--Error-700, #B42318) !important;
    text-align: center;

    /* Text xs/Medium */
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}
.badge-danger {
    /*display: flex;*/
    padding: 2px 10px;
    vertical-align: middle;
    /*justify-content: center;*/
    /*align-items: center;*/
    border-radius: var(--rounded-md, 6px);
    background: var(--red-100, #f1c9c9);
    text-align: center;

    /* Text xs/Medium */
    color: var(--red-800, #be0606);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}

.badge-attributes {
    display: inline-flex;
    padding: 2px 8px 2px 6px;
    justify-content: center;
    vertical-align: middle;
    align-items: center;
    gap: 6px;
    border-radius: 16px;
    background: #EEF4FF;

    color: #3538CD;
    text-align: center;

    /* Text xs/Medium */
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}

.badge-attributes .dot {
    font-size: 6px;
    line-height: 1;
}

.metric-item {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid var(--Gray-200, #E9EAEB);
    background: var(--White, #FFF);
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    .metric-title {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        color: var(--Gray-900, #181D27);
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }
    .number-chart {
        display: flex;
        align-items: flex-end;
        gap: 16px;
        align-self: stretch;
        .number-badge {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            flex: 1 0 0;
            .number {
                color: var(--Gray-900, #181D27);
                font-size: 36px;
                font-style: normal;
                font-weight: 600;
                line-height: 44px;
                letter-spacing: -0.72px;
            }
        }
        .change-text {
            display: flex;
            align-items: center;
            gap: 8px;
            align-self: stretch;
            .change {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 4px;
                .icon {
                    width: 20px;
                    height: 20px;
                }
                .text {
                    color: var(--Gray-600, #535862);
                    text-align: center;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 20px;
                }
                .danger {
                    color: var(--Error-700, #B42318);
                }
                .success {
                    color: var(--Success-700, #027A48);
                }
            }
            .text {
                color: var(--Gray-600, #535862);
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 20px;
            }
        }
    }
    .chart:before {
        width: 96px;
        height: 48px;
    }
}

.th-style {
    /*display: flex;*/
    height: 44px;
    padding: 12px 24px !important;
    vertical-align: center !important;
    gap: 12px;
    align-self: stretch;
    border-bottom: 1px solid #E9EAEB !important;
    background: #FAFAFA;
    color: #666 !important;

    /* Cells/title */
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}
.td-style {
    height: 72px !important;
    padding: 0px 24px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #E9EAEB;
    background: #FFF !important;
    color: #1C1C1C;

    /* Text sm/Medium */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.table-empty {
    /*display: flex;*/
    /*flex-direction: column;*/
    width: 512px;
    padding: 40px !important;
    /*justify-content: center;*/
    /*align-items: center;*/
    .message {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        align-self: stretch;
        .empty-image {
            display: flex;
            padding: 12px;
            justify-content: center;
            align-items: center;
            border-radius: 28px;
            border: 8px solid #F9F5FF;
            background: #F4EBFF;
        }
        .title {
            align-self: stretch;
            color: #262626;
            text-align: center;

            /* Text md/Semibold */

            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 24px; /* 150% */
        }
        .subtitle {
            color: #666;
            text-align: center;

            /* Text sm/Regular */

            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
        }
    }
    .action-button {
        display: flex;
        padding: 8px 12px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        background: #1C1C1C;
        color:#FFF;
        /* text-sm/font-medium */

        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 21px */
    }
}
.cancel-action {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid #D5D7DA;
    background: #FFF;
    width: 40px;
    height: 40px;
}
.cancel-action:hover, select:hover, input[type="checkbox"]:hover {
    box-shadow: 0 2px 6px rgba(10, 13, 18, 0.08);
}
.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}
.modal-dialog {
    width: 532px !important;
    max-width: 532px !important;
}
.modal .modal-content {
    border-radius: 8px !important;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12) !important;
    display: flex;
    padding: 24px 16px;
    flex-direction: column;
    gap: 8px;
}
.modal-backdrop {
    background: rgba(16, 24, 64, 0.20) !important;
}

.toast-container {
    display: flex;
    width: 532px;
    padding: 24px;
    align-items: center;
    gap: 8px;
    position: absolute;
    right: 16px;
    top: -74px;
    border-radius: 8px;
    border-left: 6px solid var(--Color-Primary-Pink, #FFD4FF);
    background: var(--Color-Basic-White, #FFF);

    /* shadow/ regular */
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
    color: var(--Color-Neutals-Gray-700, #666);

    /* Body/Base text */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    i {
        margin-bottom: 0px !important;
        padding-bottom: 22px;
    }
}

.text-gray-900 {
    color: #181D27;
}

.text-gray-600 {
    color: #535862;
}


.filter-pills {
    display: flex;
    /*width: 1158px;*/
    padding: 16px;
    align-items: center;
    gap: var(--4, 16px);
    .pill {
        display: flex;
        padding: 10px 16px;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        border: 1px solid var(--Brand-50, #F9F5FF);
        background: var(--Brand-50, #F9F5FF);
        gap: 8px;

        color: var(--Brand-700, #6941C6);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        .x-circle {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            stroke-width: 1.67px;
            stroke: var(--Brand-700, #6941C6);
            cursor: pointer;
        }
    }

    .filter-active {
        color: var(--Color-Primary-Purple, #7A00D6);
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
    }

    .text-gray-700{
        color: #666666;
    }
}