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

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    /* background-color: var(--brand-primary);
    border-color: var(--brand-primary); */
    background-color: var(--btn-primary);
    border-color: var(--btn-primary);
    color: var(--black-color);
}

.btn-secondary {
    background-color: var(--btn-secondary);
    border-color: var(--btn-secondary);
    color: var(--black-color);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    background-color: var(--btn-secondary);
    border-color: var(--btn-secondary);
    color: var(--black-color);
}

.dropdown-menu {
    border-radius: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.dropdown-item {
    padding: .5rem 1.5rem;
}

.dropdown-item .panel-result::before {
    content: url(/lib/mapsvg/mapsvghost/markers/default.png);
    height: 15px;
    filter: sepia(100%) hue-rotate(69deg) saturate(190%);
    display: inline-block;
    margin: -2px 5px 0 -5px;
}

.btn-checkbox .btn-outline-secondary,
.btn-outline-checkbox {
    color: var(--bs-gray-500);
    border-color: var(--bs-gray-500);
    color: var(--bs-gray-900);
}

.btn-checkbox .btn-outline-secondary:hover,
.btn-outline-checkbox:hover {
    color: #fff;
}

.btn-group-sm>.btn,
.btn-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: 0.25rem;
}

.btn-check:active+.btn-outline-checkbox,
.btn-check:checked+.btn-outline-checkbox,
.btn-outline-checkbox.active,
.btn-outline-checkbox.dropdown-toggle.show,
.btn-outline-checkbox:active {
    color: #fff;
    background-color: var(--bs-gray-500);
    border-color: var(--bs-gray-500);
}

.form-range::-moz-range-thumb {
    background-color: var(--btn-primary);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--btn-primary);
}

/* screen size wider than macbook air */
@media (min-width: 1441px) {
    .col-xxxl {
        flex: 1 0 0%;
      }
    
      .row-cols-xxxl-auto > * {
        flex: 0 0 auto;
        width: auto;
      }
    
      .row-cols-xxxl-1 > * {
        flex: 0 0 auto;
        width: 100%;
      }
    
      .row-cols-xxxl-2 > * {
        flex: 0 0 auto;
        width: 50%;
      }
    
      .row-cols-xxxl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
      }
    
      .row-cols-xxxl-4 > * {
        flex: 0 0 auto;
        width: 25%;
      }
    
      .row-cols-xxxl-5 > * {
        flex: 0 0 auto;
        width: 20%;
      }
    
      .row-cols-xxxl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
      }
    
      .col-xxxl-auto {
        flex: 0 0 auto;
        width: auto;
      }
    
      .col-xxxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
      }
    
      .col-xxxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
      }
    
      .col-xxxl-3 {
        flex: 0 0 auto;
        width: 25%;
      }
    
      .col-xxxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
      }
    
      .col-xxxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
      }
    
      .col-xxxl-6 {
        flex: 0 0 auto;
        width: 50%;
      }
    
      .col-xxxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
      }
    
      .col-xxxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
      }
    
      .col-xxxl-9 {
        flex: 0 0 auto;
        width: 75%;
      }
    
      .col-xxxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
      }
    
      .col-xxxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
      }
    
      .col-xxxl-12 {
        flex: 0 0 auto;
        width: 100%;
      }
    
      .offset-xxxl-0 {
        margin-left: 0;
      }
    
      .offset-xxxl-1 {
        margin-left: 8.33333333%;
      }
    
      .offset-xxxl-2 {
        margin-left: 16.66666667%;
      }
    
      .offset-xxxl-3 {
        margin-left: 25%;
      }
    
      .offset-xxxl-4 {
        margin-left: 33.33333333%;
      }
    
      .offset-xxxl-5 {
        margin-left: 41.66666667%;
      }
    
      .offset-xxxl-6 {
        margin-left: 50%;
      }
    
      .offset-xxxl-7 {
        margin-left: 58.33333333%;
      }
    
      .offset-xxxl-8 {
        margin-left: 66.66666667%;
      }
    
      .offset-xxxl-9 {
        margin-left: 75%;
      }
    
      .offset-xxxl-10 {
        margin-left: 83.33333333%;
      }
    
      .offset-xxxl-11 {
        margin-left: 91.66666667%;
      }
    
      .g-xxxl-0,
    .gx-xxxl-0 {
        --bs-gutter-x: 0;
      }
    
      .g-xxxl-0,
    .gy-xxxl-0 {
        --bs-gutter-y: 0;
      }
    
      .g-xxxl-1,
    .gx-xxxl-1 {
        --bs-gutter-x: 0.25rem;
      }
    
      .g-xxxl-1,
    .gy-xxxl-1 {
        --bs-gutter-y: 0.25rem;
      }
    
      .g-xxxl-2,
    .gx-xxxl-2 {
        --bs-gutter-x: 0.5rem;
      }
    
      .g-xxxl-2,
    .gy-xxxl-2 {
        --bs-gutter-y: 0.5rem;
      }
    
      .g-xxxl-3,
    .gx-xxxl-3 {
        --bs-gutter-x: 1rem;
      }
    
      .g-xxxl-3,
    .gy-xxxl-3 {
        --bs-gutter-y: 1rem;
      }
    
      .g-xxxl-4,
    .gx-xxxl-4 {
        --bs-gutter-x: 1.5rem;
      }
    
      .g-xxxl-4,
    .gy-xxxl-4 {
        --bs-gutter-y: 1.5rem;
      }
    
      .g-xxxl-5,
    .gx-xxxl-5 {
        --bs-gutter-x: 3rem;
      }
    
      .g-xxxl-5,
    .gy-xxxl-5 {
        --bs-gutter-y: 3rem;
      }
      .order-xxl-first {
        order: -1 !important;
      }
    
      .order-xxxl-0 {
        order: 0 !important;
      }
    
      .order-xxxl-1 {
        order: 1 !important;
      }
    
      .order-xxxl-2 {
        order: 2 !important;
      }
    
      .order-xxxl-3 {
        order: 3 !important;
      }
    
      .order-xxxl-4 {
        order: 4 !important;
      }
    
      .order-xxxl-5 {
        order: 5 !important;
      }
    
      .order-xxxl-last {
        order: 6 !important;
      }
}