/*********************theming*********************/
/*text*/
h1 {
    font-size: var(--h1-size);
}
h2 {
    font-size: var(--h2-size)
}
h3 {
    font-size: var(--h3-size)
}
h4 {
    font-size: var(--h4-size)
}
/*all texts should have this font family*/
h1, h2, h3, h4, div, span, input, label, a {
    font-family: var(--text-font-family);
}

/*all text defaults to medium text*/
div, span, input, label, span, a, .normal-text,
.normal-text span, .normal-text input, .normal-text label, .normal-text span, .normal-text a {
    font-size: var(--normal-text-size);
}
.extra-large-text, .extra-large-text span, .extra-large-text input, .extra-large-text label, .extra-large-text span, .extra-large-text a {
  font-size: var(--extra-large-text-size);
}
.large-text,
.large-text span, .large-text input, .large-text label, .large-text span, .large-text a {
    font-size: var(--large-text-size);
}
.medium-text,
.medium-text span, .medium-text input, .medium-text label, .medium-text span, .medium-text a {
    font-size: var(--medium-text-size);
}
.small-text,
table td div,
table td span,
.small-text span, .small-text input, .small-text label, .small-text span, .small-text a {
    font-size: var(--small-text-size);
}
body {
    background-color: var(--body-background);
}

body h1, body h2, body h3, body h4, body span, body div, body table caption, body div.DNQuantityChanger input, body div.DNTextBox input.form-control, body div.DNTextBox input:-webkit-autofill, body div.DNTextBox input:-webkit-autofill:hover, body div.DNTextBox input:-webkit-autofill:focus, body div.DNTextBox input:-webkit-autofill:active, body textarea.form-control, body textarea.form-control:-webkit-autofill:focus, body textarea.form-control:-webkit-autofill:hover, body textarea.form-control:-webkit-autofill:active, body textarea.form-control:focus {
    color: var(--body-foreground);
    -webkit-text-fill-color: var(--body-foreground);
    border-color: var(--body-foreground);
}
body table caption {
    color: var(--body-foreground);
    -webkit-text-fill-color: var(--body-foreground);
    border-color: var(--body-foreground);
}

    body div.DNQuantityChanger input, body div.DNTextBox input.form-control, body div.DNTextBox input:-webkit-autofill, body div.DNTextBox input:-webkit-autofill:hover, body div.DNTextBox input:-webkit-autofill:focus, body div.DNTextBox input:-webkit-autofill:active, body textarea.form-control, body textarea.form-control:-webkit-autofill:active, body textarea.form-control:-webkit-autofill:focus, body textarea.form-control:-webkit-autofill:hover, body div.DNCheckBox .custom-control-label::before, body textarea.form-control:focus, .applycode-success, .applycode-form, input.form-control, input.form-control:-webkit-autofill, input.form-control:-webkit-autofill:hover, input.form-control:-webkit-autofill:focus, input.form-control:-webkit-autofill:active, input.form-control:focus {
        background-color: var(--body-background);
        -webkit-box-shadow: 0 0 0 30px var(--body-background) inset;
    }
body div.DNCheckBox .custom-control-label::before {
    box-shadow: none;
    -webkit-box-shadow: none
}
/*header*/
header,
.bread-crumbs-nav {
    background-color: var(--header-background);
}

    header .header-foreground,
    header h1,
    header h2,
    header h3,
    header h4,
    header span,
    header div,
    header table caption,
    header div.DNQuantityChanger input,
    header div.DNTextBox input.form-control,
    header div.DNTextBox input:-webkit-autofill,
    header div.DNTextBox input:-webkit-autofill:hover,
    header div.DNTextBox input:-webkit-autofill:focus,
    header div.DNTextBox input:-webkit-autofill:active {
        color: var(--header-foreground);
        -webkit-text-fill-color: var(--header-foreground);
        border-color: var(--header-foreground);
    }

header div.DNTextBox input.form-control,
header div.DNTextBox input:-webkit-autofill,
header div.DNTextBox input:-webkit-autofill:hover,
header div.DNTextBox input:-webkit-autofill:focus,
header div.DNTextBox input:-webkit-autofill:active,
header div.DNCheckBox .custom-control-label::before {
    background-color: var(--body-background);
    -webkit-box-shadow: 0 0 0 30px var(--body-background) inset;
}
/*body*/

/*content*/
.content-color-section, section.event-list-block.list > .event-block {
  background-color: var(--content-background);
}

.content-color-section h1,
.content-color-section h2,
.content-color-section h3,
.content-color-section h4,
.content-color-section span,
.content-color-section div,
.content-color-section table caption,
.content-color-section div.DNQuantityChanger input,
.content-color-section div.DNTextBox input.form-control,
.content-color-section div.DNTextBox input:-webkit-autofill,
.content-color-section div.DNTextBox input:-webkit-autofill:hover,
.content-color-section div.DNTextBox input:-webkit-autofill:focus,
.content-color-section div.DNTextBox input:-webkit-autofill:active {
    color: var(--content-foreground);
    -webkit-text-fill-color: var(--content-foreground);
    border-color: var(--content-foreground);
}


.content-color-section table caption {
    color: var(--content-foreground);
    -webkit-text-fill-color: var(--content-foreground);
    border-color: var(--content-foreground);
}
    
.content-color-section div.DNQuantityChanger input,
.content-color-section div.DNTextBox input.form-control,
.content-color-section div.DNTextBox input:-webkit-autofill,
.content-color-section div.DNTextBox input:-webkit-autofill:hover,
.content-color-section div.DNTextBox input:-webkit-autofill:focus,
.content-color-section div.DNTextBox input:-webkit-autofill:active,
.content-color-section div.DNCheckBox .custom-control-label::before {
    background-color: var(--content-background);
    -webkit-box-shadow: 0 0 0 30px var(--content-background) inset;
}
/*footer*/
footer {
    background-color: var(--footer-background);
}



footer h1,
footer h2,
footer h3,
footer h4,
footer span,
footer div,
footer a,
footer table caption,
footer .footer-logo,
footer div.DNTextBox input.form-control{
    color: var(--footer-foreground);
    border-color: var(--footer-foreground);
}

    footer h1,
    footer h2,
    footer h3,
    footer h4,
    footer span,
    footer div,
    footer a,
    footer table caption,
    footer .footer-logo,
    footer div.DNTextBox input.form-control {
        -webkit-text-fill-color: var(--footer-foreground);
    }

    footer div.DNTextBox input:-webkit-autofill,
    footer div.DNTextBox input:-webkit-autofill:hover,
    footer div.DNTextBox input:-webkit-autofill:focus,
    footer div.DNTextBox input:-webkit-autofill:active {
        color: var(--footer-foreground);
        -webkit-text-fill-color: var(--footer-foreground);
        border-color: var(--footer-foreground);
    }

footer input.DNTextBox,
footer input.DNTextBox.form-control,
footer input.DNTextBox:-webkit-autofill,
footer input.DNTextBox:-webkit-autofill:hover,
footer input.DNTextBox:-webkit-autofill:focus,
footer input.DNTextBox:-webkit-autofill:active {
    background-color: var(--footer-background);
    -webkit-box-shadow: 0 0 0 30px var(--footer-background) inset;
}

a {
    color: var(--accent-background);
    -webkit-text-fill-color: var(--accent-background);
}

a i {
    color: var(--accent-foreground);
    -webkit-text-fill-color: var(--accent-foreground);
}
/*DNButton*/
button.DNButton.btn-primary {
    background-color: var(--accent-background);
    border-color: var(--accent-background);
}
button.DNButton.btn-primary > span {
    color: var(--accent-foreground);
    -webkit-text-fill-color: var(--accent-foreground);
}
button.DNButton.btn-primary:hover {
    background-color:var(--hover-background);
    border-color:var(--hover-background);
}
button.DNButton.btn-primary:hover > span {
    color: var(--hover-foreground);
    -webkit-text-fill-color: var(--hover-foreground);
}
div.DNQuantityChanger button.DNButton:disabled > span,
button.DNButton.btn-primary:disabled {
  background-color: var(--disabled-background);
  border-color: var(--disabled-background);
}
div.DNQuantityChanger > button:disabled,
button.DNButton.btn-primary:disabled,
button.DNButton:disabled {
  opacity: 0.3;
  cursor: not-allowed !important;
  pointer-events: unset;
}

div.DNQuantityChanger button.DNButton:disabled > span,
button.DNButton.btn-primary:disabled > span {
  color: var(--disabled-foreground);
  -webkit-text-fill-color: var(--disabled-foreground);
}
button.DNButton.btn-primary:focus {
    background-color: var(--focused-background);
    border-color: var(--focused-background);
}
button.DNButton.btn-primary:focus > span {
    color: var(--focused-foreground);
    -webkit-text-fill-color: var(--focused-foreground);
}
/*table*/
div.DNTable table:not(.kurs-timeslot-list) td:not(.disabled-cell):not(.notexist):hover {
  background-color: var(--hover-background);
  cursor: pointer;
}
  div.DNTable table:not(.kurs-timeslot-list) td:not(.disabled-cell):hover div.slot {
    color: var(--hover-foreground);
    -webkit-text-fill-color: var(--hover-foreground);
  }
div.DNTable td:hover div.slot, div.DNTable td:hover div.slot div, div.DNTable td:hover div.slot span,
div.DNTable td.selected:hover div.slot, div.DNTable td.selected:hover div.slot div, div.DNTable td.selected:hover div.slot span {
  color: var(--hover-foreground);
  -webkit-text-fill-color: var(--hover-foreground);
}
div.DNTable table:not(.kurs-timeslot-list) td:not(.available, .waitinglist), div.DNTable table.room-booking-table.table td.disabled-cell {
    background-color: var(--slot-unavailable-background);
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: unset;
}
div.DNTable td:not(.available) div.slot, div.DNTable td:not(.available) div.slot div, div.DNTable td:not(.available) div.slot span,
div.DNTable td:not(.available) div.availability .av-value {
    color: var(--slot-unavailable-foreground);
    -webkit-text-fill-color: var(--slot-unavailable-foreground);
}
div.DNTable td.selected {
    background-color: var(--focused-background);
}
    div.DNTable td.selected div.slot, div.DNTable td.selected div.slot div, div.DNTable td.selected div.slot span {
        color: var(--focused-foreground);
        -webkit-text-fill-color: var(--focused-foreground);
    }
    div.DNTable td.selected div.slot, div.DNTable td.selected div.slot div, div.DNTable td.selected div.slot span {
      color: var(--focused-foreground);
      -webkit-text-fill-color: var(--focused-foreground);
    }
/*DNTextBox*/
body textarea.form-control:focus,
div.DNTextBox input:focus:-webkit-autofill:hover, div.DNTextBox input:focus:-webkit-autofill:focus, div.DNTextBox input:focus:-webkit-autofill:active, div.DNTextBox input:focus,
input.form-control:focus:-webkit-autofill:hover, input.form-control:focus:-webkit-autofill:focus, input.form-control:focus:-webkit-autofill:active, input.form-control:focus {
    border-color: var(--accent-background);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px var(--accent-background) !important;
    outline: 0 none;
} div.DNTextBox > input:disabled {
    background-color: var(--disabled-background);
    color: var(--disabled-foreground);
    -webkit-text-fill-color: var(--disabled-foreground);
}
/*DNCheckBox*/
/*div.DNCheckBox .custom-control-label::before {
    background-color: var(--accent-background) !important;
}*/
div.DNCheckBox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--accent-background) !important;
    border-color: var(--accent-background);
} div.DNCheckBox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px var(--accent-background), 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
    border-color: var(--accent-background);
}
/*need a way to apply variable color to svg*/
/*div.DNCheckBox .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 8 8'%3e%3cpath fill='white' d='m6.564.75l-3.59 3.612-1.538-1.55l0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
*/
/*links*/
/*a {
    color: var(--accent-background) !important;
    -webkit-text-fill-color: var(--accent-background) !important;
}*/
/*focused element*/
a:focus, button:focus, button[tabindex="-1"]:focus {
    outline: 5px auto var(--focused-background) !important;
    outline-offset: 1px !important;
}
/* Bergen kommune  */
.event-filter-list button:focus, .event-filter-list button[tabindex="-1"]:focus {
    outline:none !important;
    outline-offset:unset !important;
}
/*badges*/
.badge, .item-counter {
    background-color: var(--header-foreground);
    color: var(--header-background);
    -webkit-text-fill-color: var(--header-background);
}
/*tabs*/
body .tabs-section-nav-inline {
    border: 1px solid var(--body-foreground);
} div.content-color-section .tabs-section-nav-inline {
    border: 1px solid var(--header-foreground);
} body .tabs-section-nav-inline {
    border: 1px solid var(--body-foreground);
} footer .tabs-section-nav-inline {
    border: 1px solid var(--footer-foreground);
}
/*DNQuantityChanger*/
div.DNQuantityChanger button.DNButton > span, .single-qty-persons-container button.DNButton > span {
  background-color: var(--accent-background);
  color: var(--accent-foreground);
  -webkit-text-fill-color: var(--accent-foreground);
} div.DNQuantityChanger button.DNButton:hover > span, .single-qty-persons-container button.DNButton:hover > span {
  background-color: var(--hover-background);
  color: var(--hover-foreground);
  -webkit-text-fill-color: var(--hover-foreground);
} div.DNQuantityChanger button.DNButton:focus > span, .single-qty-persons-container button.DNButton:focus > span {
  background-color: var(--focused-background);
  color: var(--focused-foreground);
  -webkit-text-fill-color: var(--focused-foreground);
} .DNQuantityChanger button:focus {
    outline-offset: -1px !important;
}
/*various custom theming*/
/*timeslot calendar selector*/
div.DNQuantityChanger.timeslot-week-change.qty-input button {
    background-color: var(--accent-background);
    color: var(--accent-foreground);
    -webkit-text-fill-color: var(--accent-foreground);
} div.DNQuantityChanger.timeslot-week-change.qty-input button:hover {
    background-color: var(--hover-background);
    color: var(--hover-foreground);
    -webkit-text-fill-color: var(--hover-foreground);
} div.DNQuantityChanger.timeslot-week-change.qty-input button:focus {
    background-color: var(--focused-background);
    color: var(--focused-foreground);
    -webkit-text-fill-color: var(--focused-foreground);
} div.DNQuantityChanger.timeslot-week-change.qty-input button:disabled {
    background-color: var(--disabled-background);
    color: var(--disabled-foreground);
    -webkit-text-fill-color: var(--disabled-foreground);
  }
/*bootstrap state coloring*/
.text-danger, .invalid-feedback, .was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
    color: var(--error-color) !important;
    -webkit-text-fill-color: var(--error-color) !important;
} .invalid-feedback {
    font-size: var(--normal-text-size);
} .success {
    color: var(--success-color) !important;
    -webkit-text-fill-color: var(--success-color) !important;
}
/*calendar popup*/
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
    background: var(--accent-background);
    color: var(--accent-foreground);
} .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default > div, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current > div, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current > div {
    color: var(--accent-foreground);
    -webkit-text-fill-color: var(--accent-foreground);
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
    background: var(--hover-background) !important;
    color: var(--accent-foreground) !important;
} .xdsoft_datetimepicker .xdsoft_calendar td:hover > div, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover > div {
    color: var(--hover-foreground) !important;
    -webkit-text-fill-color: var(--hover-foreground) !important;
}
/*********************theming end*********************/
tr.cart-table-row td {
    background: transparent !important;
}
.room-booking-table tbody td.waitinglist .slot,
div.DNTable td.waitinglist div.slot, div.DNTable td.waitinglist div.slot div,
div.DNTable td.waitinglist div.slot span, div.DNTable td.waitinglist div.availability .av-value {
  color: var(--slot-available-foreground);
  -webkit-text-fill-color: var(--slot-available-foreground);
}



.room-booking-table tbody td.waitinglist:hover .slot,
div.DNTable td.waitinglist:hover div.slot div,
.room-booking-table tbody td.waitlist:hover .slot, td.waitinglist:hover:after,
.room-booking-table tbody td.waitlist:hover .waitinglistavailability .av-value {
  color: var(--hover-foreground) !important;
  -webkit-text-fill-color: var(--hover-foreground) !important;
}

/*  Header Menu */

.headerrow2 a {
    color: var(--header-foreground) !important;
    -webkit-text-fill-color: var(--header-foreground) !important;
}



@media screen and (max-width: 992px) {
    .headerrow2 a, header span.fa:before {
        color: var(--header-foreground) !important;
        -webkit-text-fill-color: var(--header-foreground) !important;
    }
}

    @media (max-width: 767px) {
        .headerrow2 a, header span.fa:before {
            color: var(--header-foreground) !important;
            -webkit-text-fill-color: var(--header-foreground) !important;
        }
    }