/*CHART*/
.vsi-chart{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#vsi-chart-container{
    position: relative;
    justify-content: center;
    width:100%;
    height: 65vh;
}
#cbistats_chart_loader{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.vsi_chart_buttons{
    display: flex;
    justify-content: center;
}
.vsi_chart_buttons a{
    margin:1rem !important;
}

/*DATATABLE LIST*/
.asi-datatable-container{
    position: relative;
    flex-direction: column;
}
.asi-table-display{
    display: flex;
    width: 100%;
    position: absolute;
    justify-content: end;
}
.asi-table-display a{
    z-index: 99;
}
.asi-back-button{
    text-transform: none !important;
    font-weight: 500 !important;
    margin: 0 !important;
    position: absolute;
    top: -42px;
    left: 67px;
    background-color: #0e2f85 !important;
    color:white !important;
    border-radius: 5px 5px 0 0 !important;
}

.asi-table-display a button, .asi-list-button{
    margin: 0 0.167em 0.333em 0.167em !important;
    text-transform: none !important;
    color: black !important;
    font-weight: inherit !important;
    padding: .5em 1em !important;
    font-size: .88em !important;
    background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
    white-space: nowrap !important;
}
#asi-dt-product-list-loader, #asi-dt-orders-loader, #asi-dt-products-loader, #asi-dt-agencies-loader{
    display: none;
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*GRID*/
#product-cards-container{
    margin-top: 1rem;
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
#product-cards-container-loader{
    display: none;
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.asi-product-img-container{
	position: relative;
}

.asi-grid-buttons{
    display: flex;
    justify-content: space-between;
}
.asi-product-card{
    display: flex;
    flex-direction: column;
    width: min-content;
    border: 1px solid #dcdcde;
    border-radius: 5px;
    margin: 0.5rem;
}
.asi-product-card img{
    border-radius: 5px 5px 0 0;
    min-height: 252px;
    max-width: 252px;
    object-fit: cover;
}
.asi-product-card-content{
    display: flex;
    padding: 1rem 1rem 0 1rem;
    flex-direction: column;
}
.asi-product-card-content p {
    text-align: center;
}
.asi-product-card table{
    text-align: center;
    margin: 0 !important;
    font-size: medium;
}
.asi-product-card table th{
    padding: 0.3rem !important;
    text-align: center !important;
    text-transform: none !important;
}
.asi-product-card table th:last-child{
    border-left: 1px solid #ccc !important;
}
.asi-product-card table th:first-child{
    border-right: 1px solid #ccc !important;
}
.asi-product-card table td{
    padding: 0.3rem !important;
}
.asi-product-card table td:last-child{
    border-left: 1px solid #ccc !important;
}
.asi-product-card table td:first-child{
    border-right: 1px solid #ccc !important;
}
.asi-product-card-badge{
    display: flex;
    justify-content: center;
    padding: 0.5rem 0.123rem 0.5rem 0.123rem;
}
.product-badge-price{
    font-size: medium;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 3px;
	background: #5f5f5f;
	color: white;
	border-radius: 0 5px 0 0;
}
.asi-product-card-heading{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*DATATABLE */
#cibstats_products, #cibstats_orders, #cibstats_agencies, #cibstats_list_stock{
    width: 100% !important;
}
.asi-search-fields-inputs input{
    margin-top: 0 !important;
    height: 100%;
}
.asi-search-fields-input.valid{
    border: 2px #21be9f solid !important;
}
.asi-search-fields-input.invalid{
    border: 2px #be2121 solid !important;
}
.asi-search-fields-inputs{
    display: flex;
    flex-wrap: wrap;
}
.asi-search-fields-input{
    width: 235px !important;
    height: 52px !important;
    margin: 0 !important;
}
.asi-search-fields-input-container{
    display: flex;
    flex-direction: column;
    margin: 0.367em  ;
}
.search-fields-button-container{
    display: flex;
    width: 100%;
    justify-content: end;
}
.superior{
    border: 1px solid #21be9f;
    border-radius: 5px;
    color: #21be9f;
    padding: 2px;
}
.equal{
    border: 1px solid #0e2f85 ;
    border-radius: 5px;
    color: #0e2f85 ;
    padding: 2px;
}

/*DATATABLE BUTTONS*/
.vsi-filter-all{
    background-color: #169bd5 !important;
    color: white !important;
}
.vsi-filter-low{
    background-color: #ec808d !important;
    color: white !important;
}
.vsi-filter-medium{
    background-color: #f59a23 !important;
    color: white !important;
}
.vsi-filter-none{
    background-color: #d9001b !important;
    color: white !important;
}
.vsi-filter-ok{
    background-color: #11a265 !important;
    color: white !important;
}
.vsi-filter.active{
    box-shadow: rgba(50, 50, 93, 0.6) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.6) 0px 18px 36px -18px inset;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

/*BADGES*/
.vsi-badge{
    border-radius: 7px;
    white-space: nowrap;
    background-color: lightgrey;
    padding: 5px;
    font-size: 11pt;
    color: white;
}
.vsi-badge.stock-ok{
    background-color: #11a265 !important;
}
.vsi-badge.stock-medium{
    background-color: #f59a23 !important;
}
.vsi-badge.stock-low{
    background-color: #ec808d !important;
}
.vsi-badge.stock-none{
    background-color: #d9001b !important;
}
.vsi-export-button{
    color: black !important;
}

/* ORDER TRACKING */
.vsi-order-tracking{
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
    padding: 9px 12px;
    margin-bottom: 2em;
}

/*UTILITIES*/
.asi-d-flex{
    display: flex;
}
.asi-nowrap{
    white-space: nowrap;
}

/*THEME OVERRIDE*/
div.dt-buttons>.dt-button, div.dt-buttons>div.dt-button-split .dt-button {
    text-transform: none !important;
    font-weight: inherit !important;

    padding: .5em 1em !important;
    margin: 0 0.167em 0.333em 0.167em !important;
    font-size: .88em !important;
}
div.dtsp-panesContainer button.dtsp-clearAll, div.dtsp-panesContainer button.dtsp-collapseAll, div.dtsp-panesContainer button.dtsp-showAll{
    float: right !important;
    padding: 10px !important;
    text-transform: none !important;
    color:black !important;
    font-weight: inherit !important;
    margin: 0!important;
    border: 1px solid transparent !important;
    font-size: inherit !important;
}
div.dtsp-panesContainer button.dtsp-disabledButton{
    color: rgb(124, 124, 124) !important;
}
div.dtsp-searchPane button.dtsp-paneButton{
    padding: 0 !important;
    color: black !important;
    margin: 2px !important;
}
.asi-grid-buttons-container button{
    text-transform: none !important;
    color: white !important;
    font-weight: inherit !important;
    padding: .5em 1em !important;
    margin: 0 0.167em 0.333em 0.167em !important;
    font-size: .88em !important;
    background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%)
}
.search-fields-button{
    padding: 0.5em 1em !important;
    margin: 0.167em 0.167em 0.333em 0.167em !important;
    text-transform: none !important;
    font-weight: normal !important;
    background-color: #0e2f85 !important;
    font-size: .88em !important;
}
.search-fields-button-x{
    padding: 0.5em 1em !important;
    margin: 0.167em 0.167em 0.333em 0.167em !important;
    text-transform: none !important;
    font-weight: normal !important;
    background-color: #ffffff !important;
    border: 2px solid #e0e0ec!important;
    box-shadow: inset 0 .25rem .125rem 0 rgba(0,0,0,.05)!important;
    font-size: .88em !important;
    color: black !important;
}
.dtsp-emptyMessage{
    display: none;
}
.select2-selection{
    border: 2px solid #e0e0ec!important;
    border-radius: 0.2rem;
    display: flex !important;
    align-items: center;
    min-height: 52px !important;
    box-shadow: inset 0 .25rem .125rem 0 rgba(0,0,0,.05)!important;
}
.select2-selection.select2-selection--multiple{

}
.select2-selection ul{
    margin-bottom: 0 !important;
}
.select2-selection textarea{
    border: none !important;
    box-shadow:none !important;
}
.select2-selection__choice__remove{
    float: none !important;
    color: #999 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    font-size: 1em !important;
    border: none!important;
    border-right: 1px solid #aaa!important;
}
.select2-selection__clear{
    float: none !important;
    color: #999 !important;
    padding: 0 4px !important;
    margin: 0 0 0 4px !important;
    font-size: 1em !important;
    border: none!important;
}

.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 52px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}
.select2-dropdown.select2-dropdown--below{
    border: 2px solid #e0e0ec !important;
    border-top: none !important;
}