@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");

:root {
    --btn-disabled-background: #808080;
    --btn-primary-background: #003459;
    --btn-primary-active-background: #003e72;
    --btn-primary-hover-background: #00131f;
    --btn-primary-border: #003459;
    --btn-info-background: #128091; /* this color has more than 1:4.5 color contrast with white text */
    --btn-info-background-hover: #0F6876;
    --btn-info-background-disabled: #0E7865;
    --btn-info-border: #128091;
    --btn-info-light-border: #71b8c3; /*lighter tone of blue to contrast the button from background*/
    --btn-warning-background: #CC4E00; /*contrast of exactly 4.5:1 with with both white and black text which complies with WCAG AA*/
    --btn-warning-background-hover: #B75000;
    --text-link: #004C9E; /*bootstrap color from <a> link, darkened so color contrast > 7:1*/
    --text-link-hover: #003975; /*darkenend bootstrap color from <a> link, darkened so color contrast > 7:1 */
    --form-control-checked: #088d3e; /*old bootstrap green TODO check contrast */
    --form-control-checked-background: #12b152; /*old bootstrap green TODO check contrast */
    --form-control-border: #757575; /*grey with > 4.5 color coontrast to both black and white WCAG AA*/
    --form-control-border-hover: #3D3D3D;
    --form-control-label: #5b5b5b; /*bootstrap color grey*/
    --form-control-text: #495057; /*bootstrap color darker grey slight blue tint*/
    --required-star: #E52828; /*old red color darkened so color contrast == 4.5:1 with white. Complies with wcag AA*/
    --required-star-hover: #AD210B; /*old red color darkened so color contrast == 7:1 with white. Complies with wcag AAA*/
    --form-control-background-readonly: #e9ecef; /*old bootstrap color for readonlyfields*/
}

.lSSlideOuter {
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lightSlider:before, .lightSlider:after {
    content: " ";
    display: table;
}

.lightSlider {
    overflow: hidden;
    margin: 0;
}

.lSSlideWrapper {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

    .lSSlideWrapper > .lightSlider:after {
        clear: both;
    }

    .lSSlideWrapper .lSSlide {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: all 1s;
        -webkit-transition-property: -webkit-transform, height;
        -moz-transition-property: -moz-transform, height;
        transition-property: transform, height;
        -webkit-transition-duration: inherit !important;
        transition-duration: inherit !important;
        -webkit-transition-timing-function: inherit !important;
        transition-timing-function: inherit !important;
    }

    .lSSlideWrapper .lSFade {
        position: relative;
    }

        .lSSlideWrapper .lSFade > * {
            position: absolute !important;
            top: 0;
            left: 0;
            z-index: 9;
            margin-right: 0;
            width: 100%;
        }

    .lSSlideWrapper.usingCss .lSFade > * {
        opacity: 0;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
        -webkit-transition-duration: inherit !important;
        transition-duration: inherit !important;
        -webkit-transition-property: opacity;
        transition-property: opacity;
        -webkit-transition-timing-function: inherit !important;
        transition-timing-function: inherit !important;
    }

    .lSSlideWrapper .lSFade > *.active {
        z-index: 10;
    }

    .lSSlideWrapper.usingCss .lSFade > *.active {
        opacity: 1;
    }

/** /!!! End of core css Should not edit !!!/**/
/* Pager */
.lSSlideOuter .lSPager.lSpg {
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
}

    .lSSlideOuter .lSPager.lSpg > li {
        cursor: pointer;
        display: inline-block;
        padding: 0 5px;
    }

        .lSSlideOuter .lSPager.lSpg > li a {
            background-color: #222222;
            border-radius: 30px;
            display: inline-block;
            height: 8px;
            overflow: hidden;
            text-indent: -999em;
            width: 8px;
            position: relative;
            z-index: 99;
            -webkit-transition: all 0.5s linear 0s;
            transition: all 0.5s linear 0s;
        }

        .lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
            background-color: #428bca;
        }

.lSSlideOuter .media {
    opacity: 0.8;
}

    .lSSlideOuter .media.active {
        opacity: 1;
    }

/* End of pager */
/** Gallery */
.lSSlideOuter .lSPager.lSGallery {
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate3d(0px, 0px, 0px);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .lSSlideOuter .lSPager.lSGallery li {
        overflow: hidden;
        -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s;
        transition: border-radius 0.12s linear 0s 0.35s linear 0s;
    }

        .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
            border-radius: 5px;
        }

    .lSSlideOuter .lSPager.lSGallery img {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after {
        content: " ";
        display: table;
    }

    .lSSlideOuter .lSPager.lSGallery:after {
        clear: both;
    }

/* End of Gallery*/
/* slider actions */
.lSAction > a {
    width: 32px;
    display: block;
    top: 50%;
    height: 32px;
    background-image: url("../img/controls.png");
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -16px;
    opacity: 0.5;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
}

    .lSAction > a:hover {
        opacity: 1;
    }

.lSAction > .lSPrev {
    background-position: 0 0;
    left: 10px;
}

.lSAction > .lSNext {
    background-position: -32px 0;
    right: 10px;
}

.lSAction > a.disabled {
    pointer-events: none;
}

.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}

/* vertical */
.lSSlideOuter.vertical {
    position: relative;
}

    .lSSlideOuter.vertical.noPager {
        padding-right: 0px !important;
    }

    .lSSlideOuter.vertical .lSGallery {
        position: absolute !important;
        right: 0;
        top: 0;
    }

    .lSSlideOuter.vertical .lightSlider > * {
        width: 100% !important;
        max-width: none !important;
    }

    /* vertical controlls */
    .lSSlideOuter.vertical .lSAction > a {
        left: 50%;
        margin-left: -14px;
        margin-top: 0;
    }

    .lSSlideOuter.vertical .lSAction > .lSNext {
        background-position: 31px -31px;
        bottom: 10px;
        top: auto;
    }

    .lSSlideOuter.vertical .lSAction > .lSPrev {
        background-position: 0 -31px;
        bottom: auto;
        top: 10px;
    }

/* vertical */
/* Rtl */
.lSSlideOuter.lSrtl {
    direction: rtl;
}

.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
    padding-left: 0;
    list-style: none outside none;
}

.lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager {
    padding-right: 0;
}

.lSSlideOuter .lightSlider > *, .lSSlideOuter .lSGallery li {
    float: left;
}

.lSSlideOuter.lSrtl .lightSlider > *, .lSSlideOuter.lSrtl .lSGallery li {
    float: right !important;
}

/* Rtl */
@-webkit-keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}

@keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}

@-webkit-keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}

@keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}

@keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}

@-webkit-keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}

@keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}

.lSSlideOuter .rightEnd {
    -webkit-animation: rightEnd 0.3s;
    animation: rightEnd 0.3s;
    position: relative;
}

.lSSlideOuter .leftEnd {
    -webkit-animation: leftEnd 0.3s;
    animation: leftEnd 0.3s;
    position: relative;
}

.lSSlideOuter.vertical .rightEnd {
    -webkit-animation: topEnd 0.3s;
    animation: topEnd 0.3s;
    position: relative;
}

.lSSlideOuter.vertical .leftEnd {
    -webkit-animation: bottomEnd 0.3s;
    animation: bottomEnd 0.3s;
    position: relative;
}

.lSSlideOuter.lSrtl .rightEnd {
    -webkit-animation: leftEnd 0.3s;
    animation: leftEnd 0.3s;
    position: relative;
}

.lSSlideOuter.lSrtl .leftEnd {
    -webkit-animation: rightEnd 0.3s;
    animation: rightEnd 0.3s;
    position: relative;
}

/*/  GRab cursor */
.lightSlider.lsGrab > * {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab;
}

.lightSlider.lsGrabbing > * {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: -o-grabbing;
    cursor: -ms-grabbing;
    cursor: grabbing;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
}

body {
    background: #fff;
}

.app {
    padding-top: 75px;
}

@media (max-width: 1100px) {
    .app {
        padding-top: 50px;
    }
}

.searching {
    padding: 50px 0;
}

@media (max-width: 1100px) {
    .searching {
        padding: 15px 0;
    }

    .col-12 {
        max-height: 250px;
    }
}

.hide {
    display: none !important;
}

a {
    cursor: pointer;
}

h3 {
    margin-bottom: 25px;
    font-size: 25px;
}

    h3 strong {
        font-size: 25px;
    }

    h3 i {
        font-size: 20px;
    }

footer {
    height: 60px;
    line-height: 60px;
    margin-top: 60px;
}

    footer .container {
        border-top: 1px solid #ddd;
    }

/**
    Button styles
 **/
.btn {
    min-height: 0;
    height: auto;
    line-height: 14px;
    padding: 8px 12px;
    margin: 0;
}

a.btn, a.btn:focus, a.btn:active {
    text-decoration: none;
}

.btn.btn-disabled {
    opacity: 0.3;
    font-style: italic;
}

.btn.btn-block {
    width: 100%;
    text-align: left;
}

.btn:focus {
    box-shadow: none !important;
    outline-offset: 3px;
}

.btn.btn-xs {
    font-size: 11px;
    padding: 4px 7px;
}

.btn.btn-sm {
    font-size: 12px;
    padding: 6px 10px;
}

.btn.btn-lg {
    font-size: 14px;
    padding: 12px 16px;
}

.btn.btn-space {
    margin-left: 10px;
}

.btn.btn-primary {
    border: 1px solid #003459;
    background: #003459;
    color: #fff;
    text-decoration: none;
}

    .btn.btn-primary:active, .btn.btn-primary:hover {
        background: #00131f;
    }

.btn.btn-secondary {
    border: 3px solid rgba(255, 102, 0, 0.3);
    background: #fff;
    color: #f60;
}

    .btn.btn-secondary:hover {
        background: #f60;
        color: #fff;
    }

.btn.btn-default {
    border: 1px solid #007EA7;
    background: #fff;
    color: #007EA7;
}

    .btn.btn-default:hover {
        background: #007EA7;
        color: #fff;
    }

.btn.btn-success {
    border: 1px solid #088d3e;
    background: #12b152;
    color: #fff;
}

    .btn.btn-success:hover {
        background: #088d3e;
        border: 1px solid #088d3e;
        color: #fff;
    }

.btn.btn-warning {
    border: 1px solid #CC4E00;
    background: #CC4E00;
    color: #fff;
}

    .btn.btn-warning:hover {
        background: #AD4200;
        border: 1px solid #AD4200;
        color: #fff;
    }

.btn.text-success:hover {
    background: #12b152;
    border: 1px solid #12b152;
    color: #fff !important;
}

.btn.text-warning:hover {
    background: #f60;
    border: 1px solid #f60;
    color: #fff !important;
}

.btn.text-danger:hover {
    background: #e13931;
    border: 1px solid #e13931;
    color: #fff !important;
}

/**
    Card styles
 **/

.above-card {
    margin: 20px 0;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.2;
}

.card {
    box-shadow: none;
    border: 2px solid #003459;
    margin-bottom: 10px;
    border-radius: 10px;
    flex-flow: row wrap;
}

.card-detail-error {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.card.sport {
    border-color: #12b152;
}

.card.vergaderen {
    border-color: #e13931;
}

.card.test {
    border-color: #3e99d4;
}

.card > .table {
    margin-bottom: 0;
}

.card.small .card-body {
    padding: 25px;
}

.card .card-body {
    padding: 20px;
}

    .card .card-body img {
        max-width: 100%;
    }

    .card .card-body .mid-card-header {
        margin-top: 3rem;
        font-size: 1.5rem;
    }

    .card .card-body .card-title {
        color: rgb(var(--app-secondary));
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

.above-card i {
    font-size: 20px;
}

.card .card-body h4 {
    color: rgb(var(--app-secondary));
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

@media (max-width: 1100px) {
    .card .card-body {
        padding: 20px;
    }
}

.form-group {
    position: relative;
    margin-bottom: 15px;
}

.search .form-group .form-row {
    padding: 5px;
    padding-top: 0;
}

.PlanningDates.form-group {
    padding-bottom: 0;
    margin-bottom: 0;
}
/********************************************************************
 **** Validation
 ********************************************************************/

.form-group.required > label:after {
    content: "";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-size: 7px;
    line-height: 15px;
    vertical-align: top;
    padding: 0 2px;
    color: #e13931;
    font-weight: bold;
}

.form-group .field-validation-error {
    color: #e13931;
}

.validation-summary-errors {
    color: #e13931;
}

.form-group > label {
    font-size: 16px;
    margin-bottom: 5px;
    color: #5b5b5b;
}

.form-group.is-valid .control-label {
    color: #12b152;
    font-weight: bold;
}

    .form-group.is-valid .control-label:before {
        font-family: "Font Awesome 5 Free";
        content: "";
        color: #12b152;
        display: inline-block;
        padding-right: 3px;
    }

.form-group.is-valid .form-control {
    border-color: #12b152;
}

.form-group.is-valid .input-group-append,
.form-group.is-valid .input-group-prepend {
    border-color: #12b152;
}

.form-group.is-invalid .control-label {
    color: #e13931;
}

.form-group.is-invalid .form-control {
    border-color: #e13931;
    box-shadow: 0 0 0 1px rgba(225, 57, 49, 0.8);
}

.form-group.is-invalid .input-group {
    box-shadow: 0 0 0 1px rgba(225, 57, 49, 0.8);
}

    .form-group.is-invalid .input-group .input-group-addon,
    .form-group.is-invalid .input-group .form-control {
        border-color: #e13931;
        box-shadow: none;
    }

.form-group.is-invalid .validate {
    border: 1px solid #e13931;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 25px;
    box-shadow: 0 0 5px rgba(225, 57, 49, 0.8);
    padding: 10px 0 15px 0;
}

.form-group.is-invalid .invalid-feedback {
    margin-top: 2px;
    display: inline-block;
    color: #e13931;
    font-size: 12px;
    line-height: 14px;
    vertical-align: middle;
}

    .form-group.is-invalid .invalid-feedback i {
        color: #e13931;
    }

.form-group.is-invalid .input-group-append,
.form-group.is-invalid .input-group-prepend {
    border-color: #e13931;
}

.form-group .input-group:focus-within .input-group-append,
.form-group .input-group:focus-within .input-group-append .input-group-text,
.form-group .input-group:focus-within .input-group-prepend,
.form-group .input-group:focus-within .input-group-prepend .input-group-text {
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
}

/**
    Form styles
 **/
.form-group .input-group-append .input-group-text {
    border-left: 0;
    border-radius: 0 6px 6px 0;
}

.form-group .input-group-append.input-group-text {
    border-left: 0;
    border-radius: 0 6px 6px 0;
}

.form-group .input-group-prepend .input-group-text {
    border-right: 0;
    border-radius: 6px 0 0 6px;
}

.form-group .input-group-prepend.input-group-text {
    border-right: 0;
    border-radius: 6px 0 0 6px;
}
/*.form-group .input-group .form-control:first-child {
  border-right: 0;
}
.form-group .input-group .form-control:last-child {
  border-left: 0;
}*/
.form-group .input-group-text {
    color: rgb(var(--app-primary));
    background: #fff;
    border: 1px solid #D7D7D7;
    font-weight: normal;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control {
    border-color: #D7D7D7;
    border-radius: 6px;
    padding: 7px 12px;
    line-height: 24px !important;
    font-size: 16px;
    height: auto;
}

    .form-control:active, .form-control:visited, .form-control:focus {
        outline-offset: 3px;
    }

    .form-control.price {
        text-align: right;
    }

select.form-control {
    height: 40px;
    line-height: 40px;
}

.warning {
    color: #e13931;
    font-weight: bold;
}

/********************************************************************
 **** Checkbox
 ********************************************************************/
.radio,
.checkbox {
    display: inline-block;
    cursor: pointer;
    min-height: 20px;
    line-height: 18px;
    margin: 2px 0;
}

    .radio.block,
    .checkbox.block {
        display: block;
    }

    .radio > input,
    .checkbox > input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

        .radio > input:focus + span:before,
        .checkbox > input:focus + span:before,
        checkbox + .toggle-extra {
            outline: 5px auto Highlight;
            outline: 5px auto -webkit-focus-ring-color;
        }

    .radio span,
    .checkbox span {
        position: relative;
        padding: 0 12px 0 24px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .radio span:before,
        .checkbox span:not(.filter-result-count):before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            display: block;
            width: 18px;
            height: 18px;
            line-height: 17px;
            text-align: center;
            background: #fff;
            border: 1px solid #D7D7D7;
            border-radius: 4px;
            color: #fff;
            font-weight: bold;
        }

    .radio:hover span:before, .radio:focus span:before,
    .checkbox:hover span:before,
    .checkbox:focus span:before {
        border-color: #888;
    }

    .radio input:checked + span:before,
    .checkbox input:not([disabled]):checked + span:before {
        background: #12b152;
        font-size: 10px;
        border: 1px solid #088d3e;
    }

.checkbox {
    display: block;
}

    .checkbox input:not([disabled]):checked + span:before {
        font-family: "Font Awesome 5 Free";
        content: "";
        color: #fff;
    }

.checkbox input[type=checkbox][disabled] + span:before {
    background-color: lightgray;
}

.filter-result-count {
    display: inline;
    float: right;
}

.radio span:before {
    border-radius: 10px;
}

.radio input:checked + span:before {
    border: 1px solid #088d3e;
    box-shadow: inset 0 0 0 2px #fff;
}

.top {
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    height: 75px;
    background: #fff;
    z-index: 5000000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

    .top a.logo {
        display: inline-block;
    }

        .top a.logo img {
            max-height: 55px;
        }

    .top .row {
        height: 75px;
    }

@media (max-width: 1100px) {
    .top {
        height: 50px;
    }

        .top .row {
            height: 50px;
        }

        .top img {
            height: 50px;
        }
}

/*Chat bot*/
.chat-button {
    position: fixed;
    height: 50px;
    width: 50px;
    border-radius: 25%;
    right: 15px;
    bottom: 15px;
    z-index: 3;
    background: url('../images/openai-white-logomark.png') no-repeat, #003459;
    background-position: center;
    background-size: 90%;
}

/*#openchat:checked ~.chat-button{
    display:none;
}*/

.chat-window {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 3;
    width: 350px;
    height: 450px;
    background-color: white;
    border: 2px solid #5f497a;
    border-radius: .75rem;
    display: block;
}

.chat-window-text{
    width: 100%;
    height: calc( 90% - 3rem - 1px );
    overflow: auto;
}

.chat-window-header {
    background-color: #003459;
    color: #fff;
    height: 3rem;
    padding: .5rem;
    font-size: 1.3rem;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
    border-bottom: 1px solid #fff;
}

@keyframes show {
    100% {
        opacity: 1;
    }
}

.chat-window-message {
    width: 80%;
    background-color: #003459;
    color: #fff;
    margin: .5rem 1rem;
    padding: 1rem;
    border-radius: 1em;
    clear: both;
    position: relative;
    opacity: .333;
    animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
}

.chat-window-message:after {
    content: "";
    position: absolute;
    bottom: -15px;
    border-width: 15px 15px 0 0;
    border-style: solid;
}

.chat-window-message-loading{
    width: 20%;
}

.chat-window-message-me {
    float: right;
    background-color: #ccc;
    color: #333;
}

.chat-window-message-ai {
    float: left;
}

.chat-window-message-ai:after {
    transform: skewX(0deg);
    border-color: #003459 transparent;
    left: 15px;
}

.chat-window-message-me:after {
    transform: skewX(45deg);
    right: 15px;
    border-color: #ccc transparent;
}

.chat-window-container {
    display: flex;
    justify-content: flex-start;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
}

.chat-input {
    width: 85%;
    border-bottom: none;
    border-left: none;
    border-left: none;
    border-top: 2px solid #5f497a;
    border-bottom-left-radius: .75rem;
}

.chat-input:disabled {
    background-color: #ddd;
}

.chat-submit {
    background: #003459;
    width: 15%;
    border-bottom-right-radius: .75rem;
    text-align: center;
    color: white;
}

.chat-close, .chat-clear {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    padding: .1rem .75rem;
    text-align: center;
    background: none;
    position: absolute;
    right: .1rem;
    top: .1rem;
    text-decoration: none;
    border-radius: 1rem;
}

.chat-clear {
    right: 1.8rem;
}

.chat-close:hover, .chat-clear:hover{
    text-decoration: none;
    background-color: #fff;
    color: #003459;
}

/*#openchat:checked +.chat-window {
    display: block;
}*/


.chat-hiddencheckbox {
    opacity:0;
    position: fixed;
    bottom: 15px;
    right: 15px;
    height: 50px;
    width: 50px;
    z-index: 4;
    cursor: pointer;
}


/********************************************************************
 **** Search Layout
 ********************************************************************/

.search {
    height: 250px;
    background: rgba(0, 0, 0, 0.6);
    position: relative;
}

    .search:before {
        display: block;
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("../images/header.jpg");
        z-index: -1;
    }

    .search .container,
    .search .row {
        height: 100%;
    }

    .search .form-group label {
        color: #fff;
        font-size: 16px;
    }

    .search strong {
        color: #fff;
        font-size: 18px;
    }

#SearchButton {
    display: block;
    height: 40px;
    margin: 0;
    margin-left: 10px;
    box-shadow: none !important;
    border: 2px solid #71b8c3;
    transition: none;
    color: #fff;
}

    #SearchButton i {
        padding-left: 3px;
    }

.search .labeledInput label + .form-control {
    width: 100%;
    border-radius: 6px;
    height: 40px;
    overflow: clip;
    font-size: 16px;
    padding-right: 0;
}

@media (max-width: 1100px) {
    .search .labeledInput label + .form-control {
        padding: 2%;
        padding-right: 0;
        min-height: 2rem;
        max-height: 4rem;
    }

    .search .labeledInput label + select {
        overflow: visible;
        white-space: break-spaces;
        word-wrap: break-word;
    }
}

/*+ and - as details icons*/
details:first-of-type summary::marker,
:is(::-webkit-details-marker) {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' version='1.1' id='svg1' sodipodi:docname='newplus2.svg' inkscape:version='1.4 (86a8ad7, 2024-10-11)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Csodipodi:namedview id='namedview1' pagecolor='%23e6e6e6' bordercolor='%23000000' borderopacity='0.42745098' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' inkscape:zoom='64.092158' inkscape:cx='-0.17942913' inkscape:cy='4.4077155' inkscape:window-width='2560' inkscape:window-height='1351' inkscape:window-x='2551' inkscape:window-y='-9' inkscape:window-maximized='1' inkscape:current-layer='svg1' /%3E%3Cpath d='M 5.1428574,0 H 2.8571431 V 2.8571429 H 0 V 5.1428574 H 2.8571431 V 8 H 5.1428574 V 5.1428574 H 8 V 2.8571429 H 5.1428574 Z' fill='%23000000' id='path1' style='display:inline;mix-blend-mode:normal;fill:%23ffffff;stroke-width:0.571428' /%3E%3C/svg%3E%0A");
}

details[open]:first-of-type summary::marker {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' version='1.1' id='svg1' sodipodi:docname='newplus2 - Copy.svg' inkscape:version='1.4 (86a8ad7, 2024-10-11)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Csodipodi:namedview id='namedview1' pagecolor='%23e6e6e6' bordercolor='%23000000' borderopacity='0.42745098' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' inkscape:zoom='64.092158' inkscape:cx='-0.17942913' inkscape:cy='4.4077155' inkscape:window-width='2560' inkscape:window-height='1351' inkscape:window-x='2551' inkscape:window-y='-9' inkscape:window-maximized='1' inkscape:current-layer='svg1' /%3E%3Cpath d='M 2.8571431,2.8571429 H 0 V 5.1428574 H 2.8571431 5.1428574 8 V 2.8571429 H 5.1428574 Z' fill='%23000000' id='path1' style='display:inline;mix-blend-mode:normal;fill:%23ffffff;stroke-width:0.571428' sodipodi:nodetypes='ccccccccc' /%3E%3C/svg%3E%0A");
    */
}

details.toggle-map {
    transform: translateY(-2.9rem);
    margin-bottom: -2.9rem;
}

    details .toggle-map summary:hover {
        background: #0F6876; /* this color has more then 1:4.5 color contrast with white text */
    }

    details.toggle-map summary:focus {
        outline-offset: 3px;
    }

    details.toggle-map summary {
        background: #128091;
        border-color: #128091;
        cursor: pointer;
        padding: 8px 14px;
        margin-left: auto;
        width: fit-content;
    }

        details.toggle-map summary i {
            margin-right: -5px;
            margin-left: 0.35rem;
            font-size: 16px;
        }

.big-map {
    margin-top: 15px;
    width: 100%;
    padding-left: 100%;
    padding-top: 75%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.searching > .container > .row > .col-md-9 > .row {
    max-width: 80%;
}

.toggle-filters, .close-filters, .toggle-map summary {
    height: 2.9rem;
    max-height: 2.9rem;
    display: flex;
    background: #003459;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 25px;
    margin-bottom: 0;
}

    .toggle-filters:focus {
        outline-offset: 3px;
    }

@media (max-width: 1100px) {
    summary.toggle-filters {
        margin-bottom: 14px;
        width: 11rem;
        text-align: right;
    }
}

.close-filters {
    margin: 0;
    margin-bottom: 14px;
}

.toggle-filters:hover {
    background: #00131f;
}

.toggle-filters i, .close-filters i {
    display: inline-block;
    color: #fff;
    font-size: 19px;
    margin-right: 0.6rem;
}

.filter-groups .filters {
    background: #eff7f9;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 20px;
    border: 1px solid #d1e9eb;
}

ul.filter-groups > li:first-child,
ul.filter-groups fieldset.filters menu {
    margin-top: 14px;
}

.filters > .btn {
    margin-top: 14px;
    margin-bottom: 10px;
    text-decoration: none;
    padding: 15.5px;
    width: 100%;
}

fieldset.filters {
    position: relative;
}

    fieldset.filters legend {
        position: absolute;
        top: 1rem;
        margin: 0;
        max-width: fit-content;
    }

        fieldset.filters legend > strong {
            font-size: 14px;
            display: block;
        }

@media (max-width: 1100px) {
    details[open] summary.toggle-filters {
        position: fixed;
        top: 50px;
        z-index: 4000001;
        left: 0;
        width: 17rem;
        border-radius: 0;
    }

    ul.filter-groups {
        position: fixed;
        top: 86.5px;
        bottom: 0;
        left: -300px;
        background: #eff7f9;
        width: 100%;
        max-width: 17rem;
        z-index: 4000000;
        overflow: auto;
        transition: 0.4s;
    }

        ul.filter-groups.open {
            left: 0;
            transition: 0.4s;
        }

            ul.filter-groups.open fieldset.filters {
                border-radius: 0;
                border: 0;
                border-bottom: 2px solid #d1e9eb;
                padding-top: 2.5rem;
                padding-bottom: 1rem;
            }

    .close-filters {
        position: relative;
    }

        .close-filters:hover {
            background: #e13931;
            color: #fff;
        }

        .close-filters i {
            font-size: 22px;
        }

    ul.filter-groups .btn {
        margin-top: 1rem;
        margin-bottom: 0;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        width: calc(100% - 1rem);
    }
}

fieldset.filters button.toggle-extra, fieldset.filters button.toggle-less {
    padding: 0;
    color: #004C9E; /*bootstrap color from <a> link, darkened so color contrast > 7:1*/
    text-decoration: none;
    border: 0;
    background-color: transparent;
}

    fieldset.filters button.toggle-extra i, fieldset.filters button.toggle-less i {
        margin-right: 3px;
    }

    fieldset.filters button.toggle-extra:focus, fieldset.filters button.toggle-extra:hover,
    fieldset.filters button.toggle-less:focus, fieldset.filters button.toggle-less:hover {
        text-decoration: underline;
        color: #003975; /*bootstrap color from <a> link, darkened so color contrast > 7:1*/
    }

.side-tab-title {
    margin-bottom: 25px;
    font-size: 25px;
    margin-top: 0;
}

.my-account-main-title {
    margin-bottom: 25px;
}

@media (max-width: 1100px) {
    .my-account-main-title {
        margin: 25px 0;
    }
}

.profile-buttons {
    display: flex;
    flex-direction: column;
    width: 20rem;
    align-items: flex-start;
}

    .profile-buttons > form > button, .profile-buttons > form {
        width: 100%;
    }

        .profile-buttons > form:is(:not(:first-child)) > button,
        .profile-buttons > button:is(:not(:first-child)) {
            margin-top: 0.5rem;
        }

.main-title {
    margin-bottom: 10px;
    font-size: 25px;
    margin-top: 0;
}

.main-subtitle {
    margin-top: 0;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 25px;
}

*:focus, *:focus-visible {
    outline-color: black;
}
/* Style the tab */
.tabs .tabsHeader {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons that are used to open the tab content */
    .tabs .tabsHeader button {
        background-color: inherit;
        float: left;
        border: none;
        overflow: hidden;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-weight: bold;
        font-size: 1.2rem;
    }

        /* Change background color of buttons on hover */
        .tabs .tabsHeader button:focus {
            transition: 0;
            outline-offset: -2px;
        }

        .tabs .tabsHeader button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tabs .tabsHeader button.active {
            background-color: #ccc;
        }

/* Style the tab content */
.tabs .tabcontent {
    display: block;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================================================*/
/*                        Schedular                                         */
/* =========================================================================*/

#calendar {
    display: flex;
    flex-direction: column;
}

#navButtons {
    display: flex;
    justify-content: space-between;
}

.week-container {
    display: flex;
}

.day-column {
    flex: 1;
    padding: 5px;
    border-right: 1px solid #ccc;
    font-weight: bold;
    text-align: center;
}

.date-cell {
    flex: 1;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    border: 1px solid black;
}

.scheduler {
    display: flex;
    margin-bottom: 10px;
}

.time-slot-column {
    flex: 1;
    padding: 5px;
    border: 1px solid black;
    margin-top: -1px;
    min-height: 10rem;
}

.time-slot {
    /*border-right: 1px solid black;*/
    text-align: center;
}

.event {
    background-color: #003459;
    color: #fff;
    padding: 2px;
    margin-bottom: 2px;
    display: block
}

#prevWeekButton, #todayButton {
    margin-top: 10px;
    margin-right: 10px;
}

#nextWeekButton {
    margin-top: 10px;
}

.today {
    background-color: #ffffe0;
}

.button-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
}

.week-label {
    font-weight: bold;
    text-align: center;
    position: absolute;
    transform: translateY(-50%);
}

.weekDiv {
    margin-top: 1rem;
    height: calc(100% - 7rem);
}

.headerDiv {
    display: flex;
}

.date-cell:not(:first-child) {
    margin-left: -1px;
}

.date-cell:hover {
    border-color: #f60;
    z-index: 1;
}

.time-slot-column:not(:first-child) {
    margin-left: -1px;
}

.time-slot-column:not(.closedDay):hover {
    border-color: #f60;
    z-index: 1;
}

.time-slot a:hover {
    color: #ffa812;
    text-decoration: none;
}

.displayNone {
    display: none;
}

.buttonFlex {
    display: flex;
    justify-content: space-between;
}

.divLineHeight {
    line-height: 10px;
}

.closedDay {
    background: repeating-linear-gradient(45deg,transparent, transparent 10px, #ccc 11px, #ccc 12px);
}

.box {
    float: left;
    height: 20px;
    width: 20px;
    margin-right: 5px;
    border: 1px solid black;
    clear: both;
}

.availableDay {
    background-color: #003459;
}

.schedulerInfo {
    margin-bottom: 10px
}

.order__circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    margin: auto;
}

.paid {
    background-color: green;
}

.failed {
    background-color: red;
}

.icon__styling {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    font-size: 150px;
}

@media screen and (max-width: 768px) {
    .scheduler {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 100%;
        overflow-x: auto;
        padding: 10px;
    }

    .event {
        padding: 5px;
        border-radius: 5px;
    }

    .button-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .week-container {
        padding: 10px 10px 0px;
    }

    .prev-button,
    .today-button,
    .next-button {
        margin-left: 10px;
        margin-right: 10px;
    }

    .time-slot {
        padding: 5px;
    }

    .schedulerInfo {
        padding: 10px;
    }
}

@media screen and (min-width: 993px) {
    .time-slot {
        padding: 5px;
    }
}

#schedular p {
    padding-top: 1rem;
    font-size: 1.2rem;
}

.col-md-9 > menu.categories {
    margin-top: 14px;
}

details.toggle-items summary::before {
    display: inline-block;
    margin-left: 2px;
}

details.toggle-items[open] summary::before {
    content: attr(data-open);
}

details.toggle-items:not([open]) summary::before {
    content: attr(data-close);
}

.categories details summary {
    padding: 0 20px;
    border-radius: 10px;
}

    .categories details summary:focus {
        outline: revert-layer;
        outline-offset: 3px;
    }

menu.categories,
.categories menu.items,
menu.categories menu.items,
.categories ul,
ul.filter-groups,
.filters menu {
    list-style: none;
    display: block;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}

summary.category {
    background: #003459;
}

menu.underCardButtons {
    list-style: none;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}

.filter-on-categories-title {
    margin-bottom: 25px;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0;
}

.toggle-filters h2 {
    margin-bottom: 0;
    font-size: 25px;
    font-weight: 500;
    line-height: unset;
}

.categories h3 strong {
    font-size: revert;
}

.categories a h3 {
    margin-bottom: revert;
    margin-top: revert;
    padding: 0 0px;
}

.categories .items .item {
    position: relative;
    margin: 10px 0;
    border: 2px solid #5f497a;
    border-radius: 0.75rem;
    display: flex;
    width: 100%;
    color: #000;
}

    .categories .items .item:not(:is(.small)):hover {
        border-color: #413155; /* this color has color contrast > 1:7.5 */
    }

    .categories .items .item:not(:is(.small)):focus-within {
        outline: 5px auto Highlight;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: 4px;
    }

    .categories .items .item a:not(:is(.btn))::after {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .categories .items .item .col-md {
        position: revert;
        padding: 0;
    }

    .categories .items .item .info .row {
        margin: 0;
        max-width: 100%;
    }

    .categories .items .item.small {
        margin: 0 0 5px 0;
    }

        .categories .items .item.small .image {
            width: 20%;
        }

    .categories .items .item:hover {
        text-decoration: none;
        color: #000;
    }

    .categories .items .item > .info {
        display: grid;
        align-content: end;
        width: 100%;
    }

    .categories .items .item .image {
        width: 43.5%;
        min-width: 75px;
        padding: 0.25rem;
        border-radius: 0.5rem;
    }

        .categories .items .item .image .img {
            display: block;
            width: 100%;
            border-radius: 0.5rem;
            aspect-ratio: 1;
            background-size: contain;
            background-repeat: no-repeat;
        }

    .categories .items .item .info {
        padding: 0.25rem;
        padding-left: 3%;
        border-radius: 0.5rem;
    }

        .categories .items .item .info > h3 {
            margin-bottom: 0;
        }

            .categories .items .item .info > h3 > strong {
                font-size: 14px;
                display: block;
                margin-bottom: 1.15rem;
                padding-bottom: 1.15rem;
                border-bottom: 1px solid #ddd;
                margin-top: 1.15rem;
                margin-right: 1.75rem;
            }

    .categories .items .item.small .info > h3 > strong {
        margin-top: 3%;
        margin-right: calc(calc(40%) + 1.75rem);
    }

        .categories .items .item.small .info > h3 > strong.longCardTitle {
            margin-top: 3%;
            margin-right: 3%;
        }

    .categories .items .item p {
        margin-top: 0;
        margin-bottom: 0;
    }

    .categories .items .item hr {
        margin-top: 1.15rem;
        margin-bottom: 1.15rem;
        border: 0;
        border-top: 1px solid #ddd;
        margin-right: 1.75rem;
    }

    .categories .items .item .withMap hr {
        margin-right: 2rem;
    }

    .categories .items .item .info .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
        min-width: 55%;
        margin-bottom: 1.15rem;
        margin-bottom: 3%;
    }

        .categories .items .item .info .col-md.withMap {
            max-width: 78%;
        }

        .categories .items .item .info .col-md.text-right {
            max-width: 42%;
            min-width: 19%;
            margin-bottom: 3%;
            margin-right: 3%;
        }

    .categories .items .item .info .col-md-4 {
        flex: 0 0 25%;
        max-width: 37%;
        min-width: 19%;
        padding: 0;
        align-content: end;
        margin-top: auto;
    }


.categories li.item .SmallCardWithButtons menu.buttons li {
    overflow-x: hidden;
    overflow-y: hidden;
}

    .categories li.item .SmallCardWithButtons menu.buttons li:focus-within {
        overflow: visible !important;
    }

.SmallCardWithButtons {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.categories .items .item.small .info .SmallCardWithButtons .btn {
    display: block;
    width: 100%;
    padding: 5%;
    text-decoration: none;
}
.category-header{
    margin-left:1rem;
}

.categories .items .item.small .info menu.buttons {
    display: flex;
    min-height: 5.5rem;
    flex-direction: column;
    margin-top: -3.6rem;
    list-style: none;
    margin-right: 3%;
    margin-left: 3%;
    margin-block-end: 0;
    min-width: 6rem;
    overflow-y: hidden;
    overflow-x: hidden;
    overflow-wrap: break-word;
    max-width: 25%;
    margin-bottom: 3%;
}

    .categories .items .item.small .info menu.buttons:focus-within,
    .categories li.item .SmallCardWithButtons menu.buttons:focus {
        overflow: visible !important;
    }

.categories .items .item.small .info .buttons li + li {
    margin-top: 0.5rem;
}

.categories .items .item .info .map {
    display: block;
    padding-top: 100%;
    width: 100% !important;
    border-radius: 0.5rem;
}

.categories .items .item .buttons {
    display: block;
    padding-top: 3px;
}

.categories .category {
    margin-bottom: 10px;
}

.categories details.toggle-items summary {
    color: #fff;
    line-height: 45px;
    font-weight: bold;
}

.categories .category .toggle-items summary {
    color: #fff;
    text-decoration: none;
    line-height: 45px;
    font-weight: bold;
}

    .categories .category .toggle-items summary:hover {
    }

.categories .category.sport .toggle-items {
    background: #12b152;
}

    .categories .category.sport .toggle-items:hover {
        background: #088d3e;
    }

.categories .category.sport .item {
    border-color: #12b152;
}

    .categories .category.sport .item:hover {
        border-color: #088d3e;
    }

.categories .category.vergaderen .toggle-items {
    background: #e13931;
}

    .categories .category.vergaderen .toggle-items:hover {
        background: #af2c26;
    }

.categories .category.vergaderen .item {
    border-color: #e13931;
}

    .categories .category.vergaderen .item:hover {
        border-color: #af2c26;
    }

.categories .category.test .toggle-items {
    background: #3e99d4;
}

    .categories .category.test .toggle-items:hover {
        background: #3076a3;
    }

.categories .category.test .item {
    border-color: #3e99d4;
}

    .categories .category.test .item:hover {
        border-color: #3076a3;
    }


/********************************************************************
 **** booking
 ********************************************************************/

.BookingFormWithSide {
    display: flex;
    flex-wrap: wrap;
}

.sideMenuBooking {
    position: relative;
    width: 30%;
    flex: 0 0 30%;
    max-width: 30%;
}

.mainBookingForm {
    position: relative;
    width: 70%;
    flex: 0 0 70%;
    max-width: 70%;
}

.smallFormField {
    padding-right: 5px;
    padding-left: 5px;
}

.mediumFormField {
    padding-right: 5px;
    padding-left: 5px;
}

.largeFormField {
    padding-right: 5px;
    padding-left: 5px;
}

@media (max-width: 1100px) {
    .mainBookingForm, .sideMenuBooking {
        position: relative;
        width: 100%;
        max-width: 100%;
        flex: 100%;
    }

    .sideMenuBooking {
        margin-top: 20px;
    }
}

.image-slider {
    position: relative;
    height: 475px;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .image-slider {
        height: 205px;
    }
}

.image-slider img {
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.image-slider .prev,
.image-slider .next {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
    width: 50px;
    color: #fff;
    text-align: center;
}

    .image-slider .prev i,
    .image-slider .next i {
        font-size: 50px;
    }

    .image-slider .prev:hover,
    .image-slider .next:hover {
        cursor: pointer;
        color: #003459;
    }

.image-slider .prev {
    left: 5px;
    padding: 0;
    border: 0;
    background: transparent;
}

.image-slider .next {
    right: 5px;
    padding: 0;
    border: 0;
    background: transparent;
}

.spacer {
    margin: 0 21px;
}

.screen-reader-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

.thumbs {
    font-size: 0;
    padding: 5px 0;
    margin-left: -5px;
    margin-right: -5px;
}

    .thumbs a.thumbnail {
        display: inline-block;
        width: 20%;
        padding: 5px;
        opacity: 0.6;
    }

        .thumbs a.thumbnail img {
            max-width: 100%;
        }

        .thumbs a.thumbnail.slick-current, .thumbs a.thumbnail.active, .thumbs a.thumbnail:hover {
            opacity: 1;
        }

.times ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .times ul li {
        padding: 5px 8px;
        background: rgba(18, 177, 82, 0.1);
        border-radius: 0.3rem;
        margin-bottom: 2px;
    }

    .times.times_closeddays ul li {
        background: rgba(177, 18, 18, 0.1);
    }

        .times ul li span:first-child {
            width: 85px;
            display: inline-block;
        }

        .times ul li span.value {
            font-weight: bold;
        }

.item-map {
    padding-top: 100%;
    margin-bottom: 10px;
}

.scheduler .time-slot a.event:focus {
    outline-offset: 3px;
}

/********************************************************************
 **** lines layout (used in Customer pages)
 ********************************************************************/
.row-title {
    font-size: 1.5rem;
}

.row-text {
    font-size: 1.25rem;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

.lines {
    margin-bottom: 5px;
}

menu.lines {
    margin-block-start: 0;
    margin-block-end: 10px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}

.lines .header .line > span {
    height: 24px;
    padding: 5px 10px;
    color: #888;
    font-size: 11px;
    line-height: 14px;
}

    .lines .header .line > span strong {
        font-size: 11px;
        line-height: 11px;
    }

.lines .header .line .icon {
    height: auto;
}

    .lines .header .line .icon:after {
        height: auto;
    }

.lines .item {
    height: 36px;
    line-height: 18px;
    font-size: 14px;
    padding: 0 2%;
    display: block;
    position: relative;
    border-radius: 10px;
    color: #003459;
    background: #eff7f9;
    z-index: 1;
    margin: 0 0 2px 0;
}

/*  old  
.lines .item.active {
    border: 1px solid rgba(18, 177, 82, 0.8);
}

.lines .item:hover .icon.edit {
    color: #fff;
    background: #f60;
}*/

.lines .line {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    white-space: nowrap;
}

    .lines .line.strong > span {
        font-weight: bold;
    }

    .lines .line > span + span {
        padding-left: 2.5%;
    }

    .lines .line > span.norows {
        font-style: italic;
        padding: 15px;
        opacity: 0.6;
        display: block;
        font-size: 11px;
    }

    .lines .line > span.price {
        width: 90px;
        text-align: right;
    }

.dateSpan {
    display: contents;
    min-width: 27%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.nameSpan {
    display: block;
    min-width: 53%;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
}

.btnSpan {
    display: contents;
    min-width: 20%;
    overflow: hidden;
}

.lines .line > span.mini {
    width: 70px;
}

.lines .line > span.smaller {
    width: 85px;
}

.lines .line > span.check {
    width: 35px;
}

.lines .line > span.date {
    width: 95px;
}

.lines .line > span.datetime {
    width: 125px;
}

.lines .line > span.datetimesec {
    width: 150px;
}

.lines .line > span.medium {
    width: 100px;
}

.lines .line > span.standard {
    width: 150px;
}

.lines .line > span.normal {
    width: 200px;
}

    .lines .line > span.normal.small {
        width: 125px;
    }

.lines .line > span.large {
    width: 225px;
}

.lines .line > span.input {
    padding: 2px;
}

.lines .line > span.strong {
    font-weight: bold;
}

.lines .line .icon {
    width: 38px;
    height: 38px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

    .lines .line .icon > .checkbox {
        display: inline-block;
        margin: 7px 0 0 0;
        width: 20px;
    }

        .lines .line .icon > .checkbox span {
            text-align: center;
        }

    .lines .line .icon:after {
        font-weight: bold;
        display: block;
        width: 38px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-family: "Font Awesome 5 Pro";
        font-size: 14px;
    }

    .lines .line .icon.edit {
        color: #f60;
    }

        .lines .line .icon.edit:hover {
            background: #f60;
            color: #fff;
        }

        .lines .line .icon.edit:after {
            content: "";
        }

    .lines .line .icon.delete {
        color: #e13931;
        background: #fff;
    }

        .lines .line .icon.delete:hover {
            background: #af2c26;
            color: #fff;
        }

        .lines .line .icon.delete:after {
            content: "";
        }

.linklist ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .linklist ul li {
        margin-bottom: 1px;
    }

        .linklist ul li button {
            min-width: 100%;
            text-align: left;
            border-style: none;
            display: block;
            height: 36px;
            line-height: 18px;
            font-size: 14px;
            border-radius: 10px;
            padding: 9px 18px;
            color: #003459;
            border-left: 2px solid #003459;
            background: #eff7f9;
        }

            .linklist ul li button:hover {
                background: #003459;
                color: #fff;
                text-decoration: none;
                outline-offset: 3px;
            }

            .linklist ul li button.active {
                outline-offset: 3px;
                background: #003459;
                color: #fff;
                font-weight: bold;
            }

/*# sourceMappingURL=app.css.map */

/*for next and previous buttons*/
.not-active {
    cursor: none;
    pointer-events: none;
    background-color: #808080 !important;
}

#gif {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 23%;
    width: 4%;
}

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    cursor: pointer;
}

.checkbox.disabled span, .checkbox.disabled {
    pointer-events: none;
}

    .checkbox.disabled span:before {
        background: lightgray;
    }

.warningMessage {
    color: orange;
    font-style: italic;
}

ul.multiDatePickerList {
    padding-top: 0;
    margin-bottom: 0;
}

li.multiDatePickerList {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.Euro {
    display: inline-block;
}


/********************************************************************
 **** carousel layout (used in Accommodation detail page)
 ********************************************************************/
.CarouselBottomTabs {
    display: grid;
    justify-items: center;
    padding: 1rem;
    margin-bottom: -4rem;
}

    .CarouselBottomTabs .CategoryButtons {
        display: inline-flex;
        list-style: none;
        margin-bottom: 1.5rem;
    }

        .CarouselBottomTabs .CategoryButtons label {
            align-self: flex-end;
            margin-right: 10px;
        }

    .CarouselBottomTabs a {
        outline-offset: 2.5px;
        display: inline-block;
        padding: 8px 14px;
        border-radius: 10px;
    }

        .CarouselBottomTabs a.btn {
            display: inline-block;
            border-radius: .3rem;
        }

        .CarouselBottomTabs a.active, .CarouselBottomTabs a:hover {
            background: #138496 !important;
            color: #fff;
            text-decoration: none;
        }

        .CarouselBottomTabs a.active {
            font-weight: bold;
        }


/********************************************************************
 **** Skip links
 ********************************************************************/

.skip-link {
    background-color: #eee;
    color: #333;
    display: block;
    padding: 1em;
}

    .skip-link:focus {
        clip: auto;
        clip-path: none;
        height: auto;
        left: 1em;
        top: 1em;
        width: auto;
        z-index: 5000001;
        position: fixed;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }

/* Do not show the outline on the skip link target. */
#main[tabindex="-1"]:focus {
    outline: 0;
}


/********************************************************************
 **** altered css originally in bootstrap.min.css
 ********************************************************************/

a {
    color: #004C9E; /*bootstrap color from <a> link, darkened so color contrast > 7:1*/
    text-decoration: underline;
    border: 0;
    background-color: transparent;
}

    a:hover, a:focus {
        color: #003975;
        text-decoration: underline;
    }


.btn-warning:hover, .btn-warning:active {
    background-color: #C75000;
    border-color: #C75000;
    color: #fff;
}

.btn-info {
    background-color: #128091; /* this color has more then 1:4.5 color contrast with white text */
    border-color: #128091; /* this color has more then 1:4.5 color contrast with white text */
    color: #fff;
}

    .btn-info:active, .btn-space:active, .btn-lg:active {
    }

    .btn-info:hover {
        background-color: #0F6876; /* this color has more then 1:4.5 color contrast with white text */
        border-color: #128091; /* this color has more then 1:4.5 color contrast with white text */
        color: #fff;
    }

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 1100px) {
    .container,
    .container-sm {
        max-width: 90%;
        padding-right: 0;
        padding-left: 0;
    }
}
/* OLD
@media (min-width: 768px) {
.container,
.container-md,
.container-sm {
    max-width: 720px;
}
}

@media (min-width: 992px) {
.container,
.container-lg,
.container-md,
.container-sm {
    max-width: 960px;
}
}
*/
@media (min-width: 1100px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1040px;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 1100px) {
    .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .row-cols-md-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-md-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-md-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-md-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-md-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-md-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-md-first {
        -ms-flex-order: -1;
        order: -1;
    }

    .order-md-last {
        -ms-flex-order: 13;
        order: 13;
    }

    .order-md-0 {
        -ms-flex-order: 0;
        order: 0;
    }

    .order-md-1 {
        -ms-flex-order: 1;
        order: 1;
    }

    .order-md-2 {
        -ms-flex-order: 2;
        order: 2;
    }

    .order-md-3 {
        -ms-flex-order: 3;
        order: 3;
    }

    .order-md-4 {
        -ms-flex-order: 4;
        order: 4;
    }

    .order-md-5 {
        -ms-flex-order: 5;
        order: 5;
    }

    .order-md-6 {
        -ms-flex-order: 6;
        order: 6;
    }

    .order-md-7 {
        -ms-flex-order: 7;
        order: 7;
    }

    .order-md-8 {
        -ms-flex-order: 8;
        order: 8;
    }

    .order-md-9 {
        -ms-flex-order: 9;
        order: 9;
    }

    .order-md-10 {
        -ms-flex-order: 10;
        order: 10;
    }

    .order-md-11 {
        -ms-flex-order: 11;
        order: 11;
    }

    .order-md-12 {
        -ms-flex-order: 12;
        order: 12;
    }

    .offset-md-0 {
        margin-left: 0;
    }

    .offset-md-1 {
        margin-left: 8.333333%;
    }

    .offset-md-2 {
        margin-left: 16.666667%;
    }

    .offset-md-3 {
        margin-left: 25%;
    }

    .offset-md-4 {
        margin-left: 33.333333%;
    }

    .offset-md-5 {
        margin-left: 41.666667%;
    }

    .offset-md-6 {
        margin-left: 50%;
    }

    .offset-md-7 {
        margin-left: 58.333333%;
    }

    .offset-md-8 {
        margin-left: 66.666667%;
    }

    .offset-md-9 {
        margin-left: 75%;
    }

    .offset-md-10 {
        margin-left: 83.333333%;
    }

    .offset-md-11 {
        margin-left: 91.666667%;
    }
}

.list-group-item.active {
    background-color: var(--btn-primary-background);
    border: var(--btn-primary-background);
}