body, html {
    font-family: 'Maven Pro', sans-serif;
}
:root, [data-bs-theme=light] {
    --bs-app-bg-color: #F8F1ED;
    --bs-app-header-sticky-bg-color: #023530;
    --bs-body-font-family: 'Maven Pro', sans-serif;

    --bs-component-active-bg: #165B48;
    --bs-primary: #165B48;
    --bs-text-primary: #3D8458;
    --bs-primary-active: #3D8458;
}

pre {
    margin-top: 5px !important;
    margin-bottom: 0px !important;
}

/* .text-hover-primary:hover {
    color: #3D8458;
} */

.border-radius-0 {
    border-radius: 0px !important;
}

.app-loader {
    width: 90px;
    height: 90px;
    margin: auto;
    position: absolute;
    bottom: 30px;
    right: 30px;
    padding: 10px;
    border-radius: 50%;
    background: transparent;
}
.app-loader .loading {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 2px #6690F4;
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
    display: inline-block;
}

.app-header {
    background-color: #023530;
}
.app-header.is-christmas {
    background-image: url('/assets/media/christmas-bg.svg');
    background-repeat: no-repeat;
    background-size: 100% 100px;
}
.app-content {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
.app-toolbar {
    padding: 0 30px;
}
.card {
    border-radius: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
}
.card .card-header {
    /* background-color: #F9F9F9; */
    background-color: #023530;
    border-radius: 0px;
}
.card .card-header .card-title h2,
.card .card-header .card-title h3 {
    color: #ffffff;
}
.hide {
    display: none;
}

a.disabled {
    cursor: not-allowed;
    color: gray;
    text-decoration: none;
}
.col-form-label {
    padding-top: 0px;
    padding-bottom: 0px;
}
.modal-title {
    font-size: 1.5rem;
}
.col-form-label .form-text {
    margin-top: 0px;
}

/* Datatable */
.datatable-tools:not(.datatable-footer) {
    display: flex;
    padding: 2.25rem;
    background-color: #F9F9F9;
}
div.dataTables_wrapper div.dataTables_length {
    float: left;
    padding: 0px;
}
div.dataTables_wrapper div.dataTables_length label {
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
}
div.DTTT_container {
    position: relative;
    float: right;
}
.pr15 {
    padding-right: 15px;
}
div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
}
.dataTables_filter {
    float: right;
    padding: 0px !important;
}
.dataTables_wrapper .form-control.form-control-solid,
.dataTables_wrapper .form-select.form-select-solid {
    background-color: #FFFFFF;
    border-color: var(--bs-gray-300);
    font-size: 1.1rem;
}
.datatable-tools.datatable-footer {
    margin: 15px 30px;
}
div.dataTables_wrapper div.dataTables_info {
    padding: 0;
    padding-top: 0.65em;
}
div.dataTables_wrapper div.dataTables_paginate {
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_paginate .pagination {
    margin: 2px 0;
    white-space: nowrap;
    justify-content: flex-end;
}
table.dataTable thead tr {
    color: var(--bs-text-gray-400) !important;
    text-transform: uppercase !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
}
table.dataTable thead th {
    border-top: 1px solid #f2f2f2;
    padding: 0.75rem 0.75rem;
}
table.dataTable thead th:first-child {
    padding-left: 30px !important;
}
table.dataTable thead th:last-child {
    padding-right: 30px !important;
}
table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top: 1px dashed #f2f2f2;
    background-color: #ffffff;
    padding: .75rem .75rem;
}
table.dataTable.display tbody th:first-child, table.dataTable.display tbody td:first-child {
    padding-left: 30px;
}
table.dataTable.display tbody th:last-child, table.dataTable.display tbody td:last-child {
    padding-right: 30px;
}
.dataTables_wrapper .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    padding: 7px 10px;
    margin-left: 10px;
    background: #fff;
    border: 1px solid var(--bs-gray-300);
}
table.dataTable.no-footer {
    border-bottom: 1px dashed #f2f2f2;
}
table.dataTable tbody {
    color: var(--bs-text-gray-600)!important;
    font-weight: 500!important;
}
td.option a, .action-option, a.edit {
    cursor: pointer;
    min-width: 28px;
    background: #fff;
    color: #a1a3a5;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    text-align: center;
    margin: 0 5px;
    padding: 2px 0 2.5px 0;
    border: 1px solid #e2e7f1;
    font-size: 14px;
}
td.option a.delete:hover {
    background: #FD397A;
    color: #fff;
    border: 1px solid #FD397A;
}
td.option a:hover, .action-option:hover {
    background: #0ABB87;
    color: #fff;
    border: 1px solid #0ABB87;
}
.icon-16 {
    width: 16px;
    height: 16px;
}
h1.page-heading {
    font-size: 2.25rem !important;
}

/* width properties */
.w120 {
    width: 120px;
}
.w150 {
    width: 150px;
}
.w200 {
    width: 200px;
}

a.config-step-button {
    text-align: center;
    display: block;
    padding: 10px 0;
    background-color: #CCC;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}

.config-card .card-header {
    padding: 8px 16px !important;
}
.config-card tbody td:first-child {
    padding-left: 16px !important;
}
.config-card tbody td:last-child {
    padding-right: 16px !important;
}

.config-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
}
/* Stijl van de scrollbar track */
.config-wrapper::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Achtergrondkleur van de track */
  }
  
  /* Stijl van de scrollbar thumb (de beweegbare balk) */
  .config-wrapper::-webkit-scrollbar-thumb {
    background-color: #888; /* Kleur van de thumb */
    border-radius: 8px;     /* Afgeronde hoeken van de thumb */
  }
  
  /* Verhoog de hoogte van de scrollbar thumb */
  .config-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Kleur van de thumb bij hover */
  }
  
  /* Verhoog de hoogte van de scrollbar thumb */
  .config-wrapper::-webkit-scrollbar-thumb:active {
    background-color: #333; /* Kleur van de thumb bij actieve staat */
  }

.hide {
    display: none !important;
}

.catalog-imported-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.help-block {
    display: block;
    margin-top: 5px;
    color: red;
}

/*modal mask*/
.modal-mask {
    position: relative;
    top: 0;
    left: 0;
    background-color: #fff;
}
.circle-done {
    margin: 10px auto;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 5px rgba(220, 230, 235, 0.5);
    text-align: center;
    font-size: 30px;
    padding: 10px;
    color: #6690F4;
}
.circle-done i {
    display: inline-block;
    max-width: 0%;
    overflow: hidden;
}
.circle-done.ok svg {
    height: 40px;
    width: 40px;
    margin-top: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.collect-list, .list-copy-item {
    padding: 5px 0;
    text-align: center;
    font-weight: 600;
    color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
    justify-content: center;
}
.collect-list:hover {
    cursor: pointer;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}

@media (min-width: 992px) {
    .menu-sub-lg-dropdown, .menu-sub-dropdown {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
    .app-content {
        border-radius: .45rem!important;
    }
}

.ms-27 {margin-left: 6.75rem !important;}
.ms-36 {margin-left: 9rem !important;}
.ms-45 {margin-left: 11.25rem !important;}
.ms-54 {margin-left: 13.5rem !important;}
.ms-63 {margin-left: 15.75rem !important;}
.ms-72 {margin-left: 18rem !important;}
.ms-81 {margin-left: 20.25rem !important;}
.ms-90 {margin-left: 22.5rem !important;}
.ms-99 {margin-left: 24.75rem !important;}

.w-140px {
    width: 140px;
}

.top-rounded {
    border-top-left-radius: .65rem !important;
    border-top-right-radius: .65rem !important;
}
.bottom-rounded {
    border-bottom-left-radius: .65rem !important;
    border-bottom-right-radius: .65rem !important;
}

.variants-list {

}
.variants-list-item {
    display: block;
    padding: 1.25rem;
}

.variants-list-item.active {
    background-color: rgba(241, 241, 241, 1);
    color: rgba(0, 91, 211, 1);
}
.variants-list-item:hover {
    background-color: rgba(247, 247, 247, 1);
    color: rgba(48, 48, 48, 1);
}

.w-full {
    width: 100% !important;
}

.variant-options-row {
    gap: 10px;
}
.variant-option-item {

}
.variant-option-item .card-body {
    padding: 1rem 0;
}

.table-responsive .row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.delete-block {
    display: flex;
    justify-content: center;
    align-items: center;
}
.delete-block .delete-link {
    background-color: #f9f9f9;
    padding: 5px 12px;
    color: red;
    border-radius: 5px;
}


.pb-0 {
    padding-bottom: 0 !important;
}