@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,700');

.no-gutters {
    margin-right: 0;
    margin-left: 0;

    > .col,
    > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}

#scheduler,
html {
    scroll-behavior: smooth;
}

body {
    overscroll-behavior: contain;
    font-family: 'IBM Plex Sans', sans-serif;
}

.navbar-dark .navbar-toggler {
    background-color: #292c33 !important;
}

.text-default { color: #111; }

body.locked { overflow-y: hidden; }
body.locked2 { overflow: hidden; max-width: 99.6vw; }

body.loading {
    overflow: hidden;
}

body.loading:after {
    z-index: 91599;
    position: fixed;
    inset: 0;
    content: " " attr(data-loading-label) " ";
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9) url('../img/load.gif') no-repeat center 40%;
    background-size: 128px 128px;
    font-weight: bold;
    color: #eee;
    /*pointer-events: none;*/
}

body:not(.route-scheduler) {
    background-color: #eee;
}

body,
.dropdown-menu {
    font-size: 14px;
}

body.slim header > .navbar,
body.slim .scheduler-grid-sidebar,
body[data-referer^="https://www.joy-house.ch"] header > .navbar,
body[data-referer^="http://www.joy-house.ch"] header > .navbar,
body.route-app_login header > .navbar {
    display: none;
}

.w-100 > .btn-group {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .flex-container {
        display: none;
    }
}

@media screen and (max-width: 767px) {

    /* Parent container styles */
    .navbar .flex-container {
        display: flex;
        justify-content: flex-end;
        align-items: stretch; /* Ensures children stretch to the height of the tallest child */
    }

    /* First child styles */
    .navbar .flex-container > :first-child:not(:only-child) {
        flex-grow: 1;          /* Let it occupy remaining space */
    }

    /* Last child styles */
    .navbar .flex-container > :last-child,
    .navbar .flex-container > :only-child {
        flex-shrink: 0;        /* Prevent it from shrinking */
        flex-basis: auto;      /* Take up as much width as its content needs */
    }

    .navbar-toggler svg {
        fill: #fff;
    }

    button.bg-light.navbar-toggler:hover,
    button.bg-light.navbar-toggler:focus {
        background-color: black !important;
    }

    .navbar {
        padding-left: 4px;
        padding-right: 4px;
    }


}

.navbar-dark .navbar-nav .nav-link {
    color: #ddd;
}

@media screen and (max-width: 1140px) {
    .navbar .btn,
    .navbar-text a,
    .navbar-nav .nav-link {
        font-size: 14px;
    }

    .navbar .btn {
        padding: .125rem .25rem
    }
}

.navbar-brand {
    filter: drop-shadow(2px 4px 6px black)
}

body header > nav.navbar .dropdown-menu {
    z-index: 5005; /* must be greater than timeline dots (max. 5000) */
}

body.slim .scheduler-grid-view-wrapper {
    width: 100% !important;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 !important;
}


/*
body.route-app_login {
    height: 100vh;
    background-image: linear-gradient(45deg, #874da2 0%, #c43a30 100%);
}
 */
.table thead th {
    border-top: 0;
}

.card-header {
    background-color: #fff;
}

.card-header .heading {
    color: #444;
    font-size: 38px;
    font-weight: 100;
    text-transform: uppercase;
}

#bookingTableCard > .card-header > .card-header-tabs {
    margin-bottom: -0.55rem;
}

@media screen and (max-width: 767px) {
    .card-header .heading {
        font-size: 16px;
        text-transform: none;
    }
}

h4.heading.secondary-heading,
.card-header h4.heading {
    font-size: 22px;
    text-transform: none;
    margin-top: 10px;
}

.card-header h4.heading a {
    /*display: block;*/
    color: inherit;
}

@media screen and (max-width: 1119px) {
    h4.heading.secondary-heading,
    .card-header h4.heading {
        font-size: 22px;
        text-transform: none;
    }
}

@media screen and (max-width: 479px) {
    h4.heading.secondary-heading,
    .card-header h4.heading {
        font-size: 14px;
    }

    .card-header h4.heading small {
        font-size: inherit;
    }
}

.tingle-modal {
    z-index: 90595;
}

.tingle-modal .heading small,
.card-header .heading small {
    font-size: 20px;
    color: #888;
    text-transform: none;
}

label {
    /*margin-bottom: .2rem;*/
    margin-bottom: 0;
}

.small, small {
    font-size: 85%;
}

.custom-control-label {
    padding-top: 3px;
    /*border-bottom: 1px dotted #e4e4e4;
    display: block;*/
}

#scheduler {
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

@media screen and (min-width: 992px) {
    #scheduler {
        overflow-y: scroll;
        height: calc(100vh - 56px); /* 56px is equal to the header height */
        will-change: transform, scroll-position;
        /*-webkit-clip-path: inset(100%);*/

    }
}

.item-row-slot-temporary.item-row,
.item-row-slot-temporary .item-day,
.item-row-slot-temporary .item-hour,
.item-row-slot-temporary .item-dp,
.item-row-slot-regular.item-row,
.item-row-slot-regular .item-day,
.item-row-slot-regular .item-hour,
.item-row-slot-regular .item-dp {
    height: 30px;
    line-height: 30px;
}

.item-row-slot-dynamic .item-day,
.item-row-slot-dynamic .item-hour,
.item-row-slot-dynamic .item-dp {
    height: inherit;
    line-height: inherit;
    border: 0 !important;
}

.item-row.item-row-heading,
.item-day.item-day-heading {
    height: 46px;
    line-height: 20px;
}

.item-row {
    /*margin-bottom: 0px;*/
    position: relative;
    background-color: #fff;
    will-change: transform;
    display: none;
}

.item-day.item-day-heading {
    border-bottom: 2px solid #ccc;
    text-align: center;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.item-day.item-day-heading.item-day-today {
    font-weight: bold;
    background-color: #eee;
}

.item-day.item-day-today:not(.item-day-heading) {
    background-color: rgba(0, 0, 0, .25);
}

@media screen and (max-width: 771px) {
    .item-row.item-row-heading, .item-day.item-day-heading {
        height: 30px;
        line-height: 14px;
        font-size: 2.4vw;
    }
}

.narrow .item-day.item-day-heading {
    writing-mode: vertical-rl;
    text-align: right;
    font-weight: bold;
    padding-bottom: 4px;
}

.item-day {
    border-bottom: 1px solid rgba(0, 0, 0, .20);
    border-top: 1px solid rgba(255, 255, 255, .55);
    float: left;
    display: block;
}

.item-dp,
.item-hour {
    float: left;
}

.item-hour:nth-child(12n) {
    border-right: 1px dashed rgba(0, 0, 0, .10);
}

.item-hour:nth-child(24n) {
    border-right: 1px solid rgba(0, 0, 0, .25);
}

.item-dp:nth-child(1) {
    border-right: 1px dashed rgba(0, 0, 0, .10);
}

.item-dp:nth-child(2) {
    border-right: 1px solid rgba(0, 0, 0, .15);
}

.item-row-slot-dynamic .item-day {
    line-height: 15px;
    position: relative;
}

.item-row-slot-dynamic .item-day:hover {
    background: rgba(0, 0, 0, .5);
    cursor: pointer;
}
.item-row-slot-dynamic .item-day:hover:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "+";
    font-weight: bold;
    color: #fff;
    text-align: center;
}

.schedule-item {
    background-color: #87bceb;
    color: #fff;
    position: absolute;
    /*padding: 0 15px;*/
    border-top: 1px solid rgba(0, 0, 0, .25);
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    /*opacity: .77;*/
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    margin-top: 0;
    transition: all .15s ease-in-out;
    z-index: 90;

    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    perspective: 1000;

    clip-path: polygon(calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0% 100%, 6px 50%, 0% 0%);
    will-change: scroll-position;
}

.item-row.item-row-slot-dynamic {
    height: 15px;
    backdrop-filter: contrast(0.7);
}

.item-row.item-row-slot-dynamic.big {
    height: 30px;
}

.item-row.item-row-slot-dynamic .schedule-item {
    height: inherit;
    line-height: 15px;
    clip-path: unset;
    border: 0;
    background: rgba(0,0,0, .45);
    font-size: 12px;
    border-right: 1px solid rgba(255, 255, 255, .4);
}

.item-row.item-row-slot-dynamic.big .schedule-item {
    line-height: 30px;
    font-size: 14px;
}

.item-row.item-row-slot-dynamic .schedule-item strong {
    font-weight: normal;
    opacity: .5;
}

.item-row.item-row-slot-dynamic .schedule-item:not(.background):hover {
    background: rgba(0,0,0, .75) !important;
}

.schedule-item > i,
.schedule-item > span.icon,
.schedule-item > strong {
    text-indent: 0;
}

.schedule-item.just-added {
    box-shadow: 0 0 20px royalblue;
}

.schedule-item.missing-model-relation {
    color: #111;
    background-color: rgba(255, 255, 255, .85);
    border-style: dashed;
    font-style: italic;

    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: #fff;
}

.item-row-slot-dynamic .schedule-item.missing-model-relation {
    color: #fff;
    background-color: rgba(255, 0, 0, .25);
}

.schedule-item.invalid {
    /*border-width: 2px;
    border-color: red;*/
}

.schedule-item.invalid,
.schedule-item.missing-model-relation {
    z-index: 100;
}

.schedule-item.background {
    z-index: 50;
    opacity: .25;
    color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0) !important;
}

.schedule-item:not(.background):hover {
    /* opacity: 1; */
    /* border: 1px solid rgba(0, 0, 0, .35); */
    color: #fff;
    /* text-decoration: none; */
    z-index: 111;
}

.schedule-item:not(.background).missing-model-relation:hover {
    color: #222;
    background-color: #fff;
}

/*
.schedule-item:before,
.schedule-item:after {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    z-index: 1111;
    top: 5px;
    content: "";
}

.schedule-item:before {
    border-width: 9px 0 9px 8px;
    border-color: transparent transparent transparent rgba(0, 0, 0, .55);
    left: 0;
}

.schedule-item:after {
    border-width: 9px 7px 9px 0;
    border-color: transparent rgba(0, 0, 0, .25) transparent transparent;
    right: 0;
}
*/


.legend-item {
    width: 18px;
    height: 18px;
    display: inline-block;
    position: relative;
    top: 3px;
    margin: -2px 2px -2px 0;
}

.select2-container--default .select2-selection--single {
    /*border-radius: 0;*/
    height: 37px;
    border-color: #ced4da;
}

.instant-edit-form .select2-container--default .select2-selection--single {
    height: 33px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
}

.dayidx-hover {
    /*background-color: rgba(0,0,0, .05);*/
    background-color: rgba(255, 255, 255, .15);
    cursor: pointer;
    opacity: .5;

}

.item-row-slot-regular .item-day-dow-7:not(.item-day-heading) {
    box-shadow: -10px 0 10px -4px rgba(0, 0, 0, .15) inset;
}

.scheduler-grid-view {
    width: 100%;
    /*float: left;*/
    /*transition: all 1.4s ease-in-out;*/
    position: relative;
}

.tpd-size-medium .tpd-content, .tpd-size-medium .tpd-title {
    padding: 4px 7px;
}

.tpd-title {
    text-transform: none;
}

.schedule-item .icon-❓ {
    display: none;
}

.schedule-item .icon-✈ {
    color: #fff;
    text-shadow: 0 0 4px #000;
}

.heading {
    margin-top: 25px;
}

table.table td > .dropdown,
table.table td > .btn-group {
    margin: -0.75rem; /* removes padding */
}

table.table td > .btn {
    margin-top: -.75rem;
    margin-bottom: -.75rem;
}

@media (min-width: 1140px) {
    .modal-lg {
        max-width: 1000px;
    }
}

legend {
    text-transform: uppercase;
    opacity: 0.5;
    font-weight: bold;
    border-bottom: 1px solid #999;
    padding-left: 20px;
    margin-bottom: 10px !important;
    font-size: inherit;
    padding-bottom: calc(.375rem + 1px);
    line-height: 1.25;
}

.form-group {
    position: relative;
}

.form-group .invalid-feedback > span {
    position: absolute;
    bottom: -14px;
}

.form-group .invalid-feedback .form-error-icon.text-uppercase {
    display: none;
}

.form-check {
    margin-bottom: 0.6em;
}

#now {
    width: 2px;
    /*height: 100%;*/
    position: absolute;
    /* z-index: 111111; */
    left: 0;
    top: 0;
    bottom: 0;
    /*box-shadow: -9999px 0 0px 9999px rgba(50,50,50, .18)*/
}

.item-row-heading-wrapper.sticky {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 921;
}

.item-row-heading {

}

#sidebarContent {
    display: none;
}

@media screen and (max-width: 1023px) {

    h1, .h1 {
        font-size: 26px;
    }

    h2, .h2 {
        font-size: 22px;
    }
}

@media screen and (max-width: 767px) {

    .visibility-toggler,
    .studio-toggler {
        column-count: 2;
    }

    #sidebarContentInner {
        display: none;
        margin: 10px;
    }

    #sidebarContent > .alert {
        margin: 0 !important;
        border-radius: 0;
        border: 0;
    }


}

@media screen and (max-width: 479px) {
    /*
    body:not(.modal-open) #scheduler_wrap {
        margin: 0 -15px;
    }
    */
}

.select2-container {
    width: 100%;
    display: block;
}

.scheduler-grid-contextmenu {
    padding: 10px;
    border-radius: 10px;
    position: fixed;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    top: calc(50% - 30vh);
    left: calc(50% - 200px);
    background-color: #fff;
    box-shadow: 0 0 0 999px rgba(0,0,0, .75);
    z-index: 1000;
    overflow: hidden;
}

@media screen and (max-width: 479px) {
    .scheduler-grid-contextmenu {
        width: 400px;
        top: 56px;
        border-radius: 0;
        padding: 10px 20px 30px 20px;
        left: calc(50% - 200px - 10px);
    }

    .scheduler-grid-contextmenu .close {
        font-size: 60px;
    }

    .scheduler-grid-contextmenu #schedulerGridContextMenuTitle {
        text-align: left;
    }
}

/* Datatable setup below */
.table-img {
    max-height: 12px;
}

table td.btn-cell {
    padding: 2px 0 !important;
}

div.dt-button-background {
    display: none !important;
}

.dataTables_wrapper > .dt-buttons,
.dataTables_wrapper > .dataTables_filter {
    width: 50%;
    float: left;
}

.dataTables_wrapper > .dataTables_filter label {
    overflow: hidden;
}

.dataTables_wrapper .btn-group > .btn {
    flex: 0 1 auto;
}

.form-control-sm {
    height: calc(1.6rem + 1px);
}

.form-control-sm,
.btn-sm,
.btn-group-sm > .btn {
    padding: 0.125rem 0.5rem;
    font-size: 0.85rem;
}

.table td.action-cell {
    padding: 9px 0 !important;
}

.buttons-colvis {
    border-radius: 0 0 3px 0;
    font-size: 12px;
    padding: .25rem .5rem;
}

.dataTables_filter input[type=search] {
    border-radius: 0 0 0 3px;
    border: 0;
    background-color: #eee;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin-bottom: 0 !important;
}

.dataTables_paginate .page-link {
    border-bottom: 0 !important;
    border-right: 0 !important;
}

.dataTables_paginate .page-item:first-child .page-link {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.dataTables_paginate .page-item:last-child .page-link {
    border-top-right-radius: 0 !important;
}

div.dataTables_wrapper div.dataTables_info {
    color: #888;
    text-align: center;
    padding-top: 0.6em !important;
    border-top: 1px solid #ccc;
    margin-top: -6px;
}

.dataTable tfoot th.select-filter {
    padding: 0.325rem 0;
}

.dataTable tfoot th.select-filter select {
    border-radius: 0;
}

.bg-cover {
    background-size: cover;
}

.chart-container {
    position: relative;
}

.scheduler-grid-contextmenu .close {
    color: #fff;
    opacity: .9;
    text-shadow: 0 0 10px #000; /* let close icon visible even on white background */
}

.dropdown-header {
    text-transform: uppercase;
    font-weight: 500;
    text-indent: 17px;
    padding-bottom: .2rem;
}

/*
.dropdown-item [class^="mbri-"] {
    margin-left: -6px;
    margin-right: 6px;
}
*/

@media screen and (max-width: 991px) {
    .c100.big {
        font-size: 190px;
    }
}


.ms {
    font-family: monospace;
    font-weight: bold;
}

.ms.ms-big {
    font-size: 50px;
    font-weight: 400;
}

.ms > span {
    padding: 0.8vh 1.6vw;
    border: 1px solid #ccc;
}

a:hover,
a:hover .btn,
a:hover .btn * {
    text-decoration: none;
    color: currentColor;
}

.tingle-modal-box {
    width: 94%;
    max-width: 1140px;
}

@media screen and (max-width: 479px) {
    .tingle-modal-box__content {
        padding: 10px;
        overflow-y: visible;

    }

    .tingle-modal-box {
        width: 100%;

    }

}

.card-footer + .progress {
    height: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /*opacity: .5;*/
}

.card-body + .progress {
    height: 1px;
    border-radius: 0;
}

.card-footer + .progress.progress-with-button {
    position: relative;
    height: 34px;
}

.card-footer + .progress.progress-with-button .btn {
    position: absolute;
    margin: 4px;
}


.instant-edit-row .instant-edit-cell-readonly {
    display: block;
}

.instant-edit-row .instant-edit-cell-readonly,
.instant-edit-row input,
.instant-edit-row select {
    padding: 7px 6px;
}

body.appearance-default .instant-edit-row .instant-edit-cell-readonly,
body.appearance-default .instant-edit-row input,
body.appearance-default .instant-edit-row select {
    padding: 6px;
}

.instant-edit-row input,
.instant-edit-row select,
.instant-edit-row .select2-selection--single {
    border: 0;
    margin: 1px 0;
    background-color: rgba(248, 249, 250, 1);
    width: calc(100% - 2px);
}

.instant-edit-row:nth-child(2n) input,
.instant-edit-row:nth-child(2n) select,
.instant-edit-row:nth-child(2n) .select2-selection--single {
    background-color: rgba(238, 239, 240, 1);
}

.booking-row .btn,
.booking-row .select2-container--default .select2-selection--single {
    border-radius: 0;
    border: 0;
}

header + .container-fluid > .card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media screen and (max-width: 479px) {
    .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    header + .container-fluid > .card {
        border-radius: 0;
        border: 0;
    }
}

.processing {
    /*
    background-image: url('../process.gif');
    background-repeat: repeat;
    background-size: contain;
    opacity: .75;
    */
}

.processing input,
.processing .select2-selection--single {

    pointer-events: none;
    position: relative;
    background: rgba(248, 249, 250, 1) linear-gradient(90deg,
    rgba(134, 29, 84, .25) 50%,
    rgba(134, 29, 84, 0) 100%
    );
    background-size: 200%;
    -webkit-animation: loadingBackground 1s ease infinite;
    animation: loadingBackground 1s ease infinite;
}

@-webkit-keyframes loadingBackground {
    0% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0 50%
    }

}

@keyframes loadingBackground {
    0% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0 50%
    }
}

.instant-edit-form [readonly] {
    /*opacity: .1;
    cursor: not-allowed;*/
    border-color: transparent !important;
}

.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .2);
}

.notice-sm {
    padding: 10px;
    font-size: 80%;
}

@media screen and (max-width: 767px) {
    .notice {
        padding: 5px;
        font-size: 85%;
    }
}

.notice-lg {
    padding: 35px;
    font-size: large;
}

.notice-success {
    border-color: #80D651;
}

.notice-success > strong {
    color: #80D651;
}

.notice-info {
    border-color: #45ABCD;
}

.notice-info > strong {
    color: #45ABCD;
}

.notice-warning {
    border-color: #FEAF20;
}

.notice-warning > strong {
    color: #FEAF20;
}

.notice-danger {
    border-color: #d73814;
}

.notice-danger > strong {
    color: #d73814;
}

.ajax-loader-badge {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 100;
    text-transform: uppercase;
    position: absolute;
    display: none;
}

.processing .ajax-loader-badge {
    display: inline-block;
}

#bookingModelTabs.nav-tabs .nav-item {
    margin-right: 1px;
    font-weight: bold;
}

#bookingModelTabs .nav-link.active {
    /*box-shadow: 0 -6px 10px -5px currentColor;*/
    /*text-decoration: underline;*/
    /*noinspection CssUnresolvedCustomProperty*/
    background-color: var(--model-color);
    color: #fff !important;
}

.comment-bubble-wrapper h6 {
    font-size: 14px;
    opacity: .9;
}

.comment-bubble-wrapper .comment-bubble {
    border-radius: 4px;
    background-color: #fff;
    padding: 7px 14px;
    margin-bottom: 14px;
    margin-left: 15px;
    width: 70%;
    display: block;
    position: relative;
}


.comment-bubble-wrapper .comment-bubble.comment-bubble-own {
    margin-left: calc(30% - 15px);
    background-color: rgba(134, 29, 84, .1);
}

.comment-bubble-wrapper .comment-bubble-others:after,
.comment-bubble-wrapper .comment-bubble-own:after {
    width: 0;
    height: 0;
    border-style: solid;
    content: " ";
    top: calc(50% - 15px);
    position: absolute;
}

.comment-bubble-wrapper .comment-bubble-others:after {
    border-width: 15px 15px 15px 0;
    border-color: transparent #ffffff transparent transparent;
    left: -15px;
}

.comment-bubble-wrapper .comment-bubble-own:after {
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent rgba(134, 29, 84, .1);
    right: -15px;
}


.comment-bubble-wrapper .comment-bubble p {
    font-size: 16px;
    margin-bottom: 0;

}

.instant-edit-form .text,
.instant-edit-form .customer-name {
    line-height: 38px;
}

.bg-mma-timing,
body.appearance-default input[data-field="actualStartTime"] {
    color: #548725;
    border: 1px solid rgba(155, 188, 30, 0.71);
    background-color: rgba(166, 205, 34, 0.2);
}

.bg-mma-priceregular,
body.appearance-default input[data-field="priceRegular"],
body.appearance-default [data-field="currency"] {
    color: rgba(148, 12, 0, 0.86);
    border: 1px solid rgba(148, 12, 0, 0.44);
    background-color: rgba(217, 12, 0, 0.22);
}

.bg-mma-priceextras,
body.appearance-default input[data-field="priceExtras"],
body.appearance-default [data-field="currencyExtras"] {
    color: rgb(161, 89, 28);
    border: 1px solid rgba(249, 148, 29, 0.76);
    background-color: rgba(249, 148, 29, 0.3);
}

.bg-mma-rebate,
body.appearance-default input[data-field="coupon"],
body.appearance-default input[data-field="rebate"] {
    color: rgb(0, 47, 79);
    border: 1px solid rgba(0, 88, 135, 0.42);
    background-color: rgba(0, 122, 189, 0.22);
}

body.appearance-default input[data-field="upgrade"] {
    color: rgb(40, 40, 40);
    border: 1px solid #ccc;
    background-color: rgba(248, 249, 250, 1);
}

.clean-navlist a {
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

@media screen and (min-width: 768px) {
    .booking-counter-text-index {
        padding: 2px;
        background: black;
        border-radius: 50%;
        color: #fff;
        width: 2em;
        display: inline-block;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
    }
}

@media screen and (max-width: 479px) {
    .booking-counter-text {
        overflow: hidden;
        margin-top: 20px;
    }


    .booking-counter-text > span {
        display: table;
        white-space: nowrap;
        color: #888;
        line-height: 38px;
    }

    .booking-counter-text > span:before,
    .booking-counter-text > span:after {
        border-top: 5px solid #ccc;
        content: '';
        display: table-cell;
        position: relative;
        top: 1.1em;
        width: 45%;
    }

    .booking-counter-text > span:before {
        right: 1.5%;
    }

    .booking-counter-text > span:after {
        left: 1.5%;
    }
}

@media screen and (min-width: 480px) {
    .booking-counter-text {
        padding: 6px !important;
    }
}

.profile-card-img {
    object-fit: cover;
    height: 50vh;
    object-position: top;
}

.card-text-description {
    background-color: rgba(0, 0, 0, .4);
}

table.evaluation-calendar tr > .scope-outer {
    font-weight: normal;
    /*opacity: .5;*/
}

/*
table.evaluation-calendar .week-beginning-row:not(:first-of-type) {
    border-top: 2px solid #555;
}
*/

table.evaluation-calendar .input-cell {
    padding: 6px 0;
}

table.evaluation-calendar .input-cell .input-group-text {
    font-family: monospace;
}

@media screen and (min-width: 992px) {
    table.evaluation-calendar .input-cell .input-group {
        padding-left: 20%;
    }


}

table.evaluation-calendar .input-cell .input-group .input-group-text,
table.evaluation-calendar .input-cell .input-group input {
    border-radius: 0 !important;
}

body.appearance-default table.evaluation-calendar .input-cell .input-group + .input-group {
    margin-top: -1px;
}

table.evaluation-calendar input[type="number"]::-webkit-outer-spin-button,
table.evaluation-calendar input[type="number"]::-webkit-inner-spin-button {
    opacity: .1;
}

table.evaluation-calendar input[type="number"]:hover::-webkit-outer-spin-button,
table.evaluation-calendar input[type="number"]:hover::-webkit-inner-spin-button {
    opacity: .5;
}

table.evaluation-calendar .total-amounts,
table.evaluation-calendar .total-days {
    line-height: 30px;
    padding: 6px 10px 0 0 !important;
}

table.evaluation-calendar input {
    max-width: 90px;
}

.booking-row-template {
    display: none;
}

.booking-row-template-new {
    background-color: #eee;
}

.bt-overlay {
    min-height: 50vh;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fff;
    display: none;
    z-index: 9876;
}

.toast-important {
    box-shadow: 0 0 50px rgba(220, 53, 69, .5);
}

.toast-important .toast-body {
    color: #dc3545;
    font-weight: bold;
}

#timelineWrapper {
    background-color: #fff;
}

table.dataTable {
    max-width: 100% !important;
    width: 100% !important;
}

#commentsWrapper.invisible {
    visibility: hidden;
}

.select2-container {
    /* Thanks to https://stackoverflow.com/a/38717295/1085345 */
    width: 100% !important;
}

@media (min-width: 1440px) {
    .row-cols-xxl-8 > * {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
}

.card-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.card-image.card-image-contain {
    background-size: contain;
    aspect-ratio: 5/7;
}

.card-image.selected {
    outline: 6px #4d8cff solid;
}

.media-bulk-sync {
    filter: invert(1) contrast(0.7);
    position: relative;
    top: -2px;
    opacity: 0.3;
    border-radius: 50%;
    cursor: help;
}

@media (max-width: 767px) {
    .pagination li {
        display: none;
        flex-grow: 1;
        text-align: center;
    }

    .pagination li:first-child,
    .pagination li:nth-last-child(2) {
        display: list-item;
    }

    .pagination li.active,
    .pagination li.active + li,
    .pagination li.active + li + li {
        display: list-item;
    }
}

[data-selected-tags*="trash"] {
    opacity: .75;
    outline: 1px dashed #ff9b00;
}

/* Style for the container holding the buttons */
.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Style for individual buttons */
.button-container button {
    flex: 0 1 calc(50% - 10px); /* 2 buttons per row on mobile */
    max-width: calc(50% - 10px); /* 2 buttons per row on mobile */
    margin: 4px 4px;
    aspect-ratio: 3/2;
    font-size: 16px;
}

/* Media query for desktop devices */
@media screen and (min-width: 768px) {

    .button-container {
        justify-content: flex-start;
    }

    .button-container button {
        flex: 0 1 calc(20% - 10px); /* 4 buttons per row on desktop */
        max-width: calc(20% - 10px); /* 4 buttons per row on desktop */
        margin: unset unset 10px;
    }
}

/* tom select */
.ts-wrapper {
    height: 100% !important;
    padding: 0 !important;
    cursor: text;
    border-radius: 0 !important;
}

.ts-dropdown .active {
    background-color: #111 !important;
    text-decoration: underline;
    color: #fff !important;
    font-weight: bold;
}

.ts-dropdown .create {
    background-color: #888 !important;
    color: #fff !important;
}

body.appearance-theme-dark [data-ts-item] {
    color: #fff;
}

body.appearance-theme-dark .ts-control > input {
    color: #fff !important;
}