@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
/* Kayllapi */
:root{
    --font-primary: 'Quicksand', sans-serif;
    --fw-default: 600;
    --fs-default: 14px;

    --bs-success-bg-subtle: #94ffb0;
    --bs-success-border-subtle: #227137;
    --bs-info-bg-subtle: #1dd7ff;
    --bs-info-border-subtle: #095161;

    --bs-border-color: {{ $tienda->colorprimario ?? '#0d6efd' }}6e;
}
html {
  height: 100%;
  font-size: var(--fs-default);
  font-family: var(--fw-default);
}

body {
  background-color: var(--color-primary-10);
  height: calc(100% - 58px);
}
          
.row {
    --bs-gutter-x: 5px;
    --bs-gutter-y: 5px;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 5px;
}

html,
body,
button,
input,
select,
textarea,
.navbar-nav .nav-link,
.dropdown-item,
.btn{
    font-family: var(--font-primary) !important;
    font-weight: var(--fw-default) !important;
    /*font-size: var(--fs-default);*/
}

.select2-container{
    font-family: var(--font-primary) !important;
    font-weight: var(--fw-default) !important;
}
.select2-selection__rendered{
    font-weight: var(--fw-default) !important;
}
.table-primary {
  background: var(--color-primary) !important;
}

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

.bg-primary-80 {
  background: var(--color-primary-80) !important;
}

.bg-primary-60 {
  background: var(--color-primary-60) !important;
}

.bg-primary-40 {
  background: var(--color-primary-40) !important;
}

.bg-primary-20 {
    background: var(--color-primary-20) !important;
}

.bg-primary-10 {
    background: var(--color-primary-10) !important;
}

.btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}
.border-primary-80 {
    border-color: var(--color-primary-80) !important;
}
.border-primary-60 {
    border-color: var(--color-primary-60) !important;
}
.border-primary-40 {
    border-color: var(--color-primary-40) !important;
}
.border-primary-20 {
    border-color: var(--color-primary-20) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}
.text-danger {
    color: rgb(255 87 103) !important;
}
.bg-danger {
    background-color: rgb(124 14 25) !important;
}
/*.bg-success {
    background-color: #066911 !important;
}*/
.bg-info {
    background-color: rgb(0 167 201) !important
}

.bg-green {
    background-color: #094f11 !important;
}
.bg-orange {
    background-color: #855600 !important;
}
.bg-blue {
    background-color: #002857 !important;
}
.bg-red {
    background-color: #3b0000 !important;
}

.border-danger {
    border-color: rgb(124 14 25) !important
}
.border-info {
    border-color: rgb(0 167 201) !important
}
.alert-success {
    background-color: #064818 !important;
}
.alert-info {
    background-color: #044e70 !important;
}
.alert-danger {
    background-color: #540b11 !important;
}
.alert-warning {
    background-color: #bd930f !important;
}
.alert-dark {
    background-color: #0e0e0e !important;
}
.btn-dark,
.bg-dark {
    background-color: rgb(0 3 9) !important;
    border: 1px solid rgb(0 3 9) !important;
}
/*.bg-warning {
    background-color: rgb(175 132 4) !important;
}*/
/*.form-control-lg {
font-size: 1rem;
}*/
.btn-close {
    background-color: #fff;
    padding: 6px !important;
    border-radius: 15px;
    margin-top: -5px !important;
    margin-bottom: -4px !important;
    margin-right: 0px !important;
}

.btn-info {
    background-color: #009add !important;
    border: 1px solid #009add !important;
    color: #fff;
}

.btn-info:hover {
    background-color: #0275a7 !important;
    border: 1px solid #0275a7 !important;
    color: #fff;
}
/* mobiel */


.border-primary-mobile {
    color: #000000a1 !important;
}

.bg-primary-mobile {
    background: #000000a1 !important;
}

.bg-primary-mobile-80 {
    background: #0000006e !important;
}

.bg-primary-mobile-white {
    background: #ffffff5c !important
}

/* info - para detalle */
.info-item{
    display:flex;
    padding: 3px 0;
    border-bottom:1px dashed #e9ecef;
}

.info-item .label{
    width:110px;
    min-width:110px;
}

.info-item .value{
    font-weight:500;
}
/* BOOTSTRAP */
.text-justify {
    text-align: justify;
}
.text-warning {
    color: rgb(255 227 7) !important;
}
.alert-light {
    border: 1px solid var(--color-primary-60) !important;
}

mark {
    background-color: #fac20e;
    padding: 0;
    border-radius: 4px;
}
.form-control:disabled {
    background-color: #d1d1d1;
}
.fs-7 {
    font-size: 0.75rem;
}
.invalid-feedback {
    font-size: var(--fw-default) !important;
}
/* CHECKLIST */

.checklist-input:checked + .checklist-card{
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* fancybox */

body .fancybox__container {
    z-index: 2000000 !important;
}

/* modal */
.modal-fullscreen {
    padding: 5px;
}
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.modal-body::-webkit-scrollbar{
    width: 10px;
}
.modal-body::-webkit-scrollbar-track{
    background: var(--color-primary-20) !important;
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb{
    background: #c7c7c73d; !important;
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover{
    background: #c7c7c73d; !important;
}

/* SELECT2 */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
    border: 1px solid var(--color-primary-60) !important;
    box-shadow: none !important;
    outline: none !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple{
    border: 1px solid var(--color-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: #000 !important;
    font-weight: var(--fw-default) !important;
}
.select2-search__field,
.select2-search__field:focus{
    border: 1px solid var(--color-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}
.select2-dropdown{
    border: 1px solid var(--color-primary) !important;
    box-shadow: none !important;
}
.select2-container--bootstrap-5 .select2-selection--single {
    height: auto !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.3;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 25px;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%);
}
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: var(--bs-border-radius-xl) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    font-size: var(--fs-default);
    font-weight: bold;
    padding: .5rem 1rem;
}
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-width: 0 !important;
}
.select2-container--bootstrap-5 .select2-dropdown {
    border-radius: var(--bs-border-radius-xl) !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    border-radius: 1rem !important;
    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)) !important;
    padding: .5rem 1rem !important;
}

/* DATATABLES */
.table>tbody {
    background-color: #ffffff;
}
.dataTable tr th {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    white-space: nowrap;
    height: 42px;
}
.dataTable tr+tr th {
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    background: var(--color-primary-80) !important;
}
.dataTable tfoot tr th {
    padding-top: 2px;
    padding-bottom: 2px;
    background: var(--color-primary) !important;
}
.dataTable tr td {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    height: 35px;
    white-space: nowrap;
}
.dataTable tbody tr:nth-child(odd) td {
    background: var(--color-primary-10);
}
.dataTable tbody tr:nth-child(even) td {
    background: var(--color-primary-20);
}
.dataTable thead tr {
    border-style: hidden !important;
}
.dataTable tbody tr.selected td {
    box-shadow: inset 0 0 0 9999px var(--color-primary-60) !important;
    color: #000 !important;
}
.dataTable thead>tr>th div.dt-column-header span.dt-column-title {
    line-height: 1;   
}
.dt-scroll-body {
    height: calc(-224px + 100vh);
    background-color: var(--color-primary-10);
}
.dt-scroll-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.dt-scroll-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.dt-scroll-body::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px;
}
.dt-scroll-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

@media (max-width: 768px){  
    .col-form-label{
        padding-left: 4px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-bottom: 0;
    }
}