@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* COLORS
    beige ivory     #F6F7EB
    red cinnabar    #E94F37
    black onyx      #393E41
    blue crayola    #3F88C5
    green keppel    #44BBA4
*/

:root {
    /* theme */
    --logocolour: #ff9900;
    --logocolour2: #38761d;
    --logocolourlight: #fcc574;
    --logocolour2light: #5c9543;
    --background: #000;
    --background2: #fff;
    --background3: #24626e;
    --background4: #6c6c6c;
    --fontcolour: #fff;
    --fontcolour2: #f00;
    --fontcolour3: #1b6ec2;
    --fontcolour4: #b0b3b8;
    --highlight: #E94F37;
    --highlighthover: #44BBA4;
    --highlightfont: white;
    --highlight2: #ebd434;
    --highlight2hover: #44BBA4;
    --highlight2font: black;
    --btn: #44BBA4;
    --btnhover: #ebd434;
    --btnprimary: var(--logocolour2light);
    --btnprimaryadmin: #1b6ec2;
    --btnprimaryhover: #E94F37;
    --btnsecondary: #44BBA4;
    --btnsecondaryhover: #ebd434;
    --btnhighlight: #E94F37;
    --btnhighlighthover: #44BBA4;
    /* Subscription */
    --pt-animate-in-order: 0;
    /* Entities */
    --celebrity: #12c9d2;
    --club: #a97dfb;
    --company: #fcce92;
    --event: #80e1ad;
    --eventorganiser: #cd7e50;
    --venue: #ffd300;
    --icon: #6c6c6c;
    --iconactive: #ffd300;
    --iconhover: #3F88C5;
}
:root {
    --headerLogoHeight: 45px;
    --fontfamily: Arial, sans-serif; /* 'Helvetica Neue', Helvetica, */
}

.light {
    /* theme */
    --logocolour: #ff9900;
    --logocolour2: #38761d;
    --logocolourlight: #fcc574;
    --logocolour2light: #5c9543;
    --background: #dcf8f8; /*#f3f5ee;*/
    --background2: #f8f9f1; /*#bde3e6;*/
    --background3: #6ca6b1;
    --background4: #c8d5e2;
    --background5: #9cbdde;
    --background-cardbottom: #ffffffab;
    --fontcolour: #000;
    --fontcolour2: #fc7c7c;
    --fontcolour3: #2668ac;
    --fontcolour4: #343535;
    --highlight: #E94F37;
    --highlighthover: #44BBA4;
    --highlight2: #ebd434;
    --highlight2hover: #44BBA4;
    --btn: #44BBA4;
    --btnhover: #ebd434;
    --btnselected: #1b6ec2;
    --btnprimary: var(--logocolour2light);
    --btnprimaryadmin: #1b6ec2;
    --btnprimaryhover: #E94F37;
    --btnsecondary: #44BBA4;
    --btnsecondaryhover: #ebd434;
    --btnhighlight: #E94F37;
    --btnhighlighthover: #44BBA4;
}

.dark {
    /* theme */
    --logocolour: #ff9900;
    --logocolour2: #38761d;
    --logocolourlight: #fcc574;
    --logocolour2light: #5c9543;
    --background: #18191a;
    --background2: #363738;
    --background3: #24626e;
    --background4: #6c6c6c;
    --background5: transparent;
    --background-cardbottom: #00000063;
    --fontcolour: #fff;
    --fontcolour2: #fc7c7c;
    --fontcolour3: #64affc;
    --fontcolour4: #b0b3b8;
    --highlight: #E94F37;
    --highlighthover: #44BBA4;
    --highlight2: #ebd434;
    --highlight2hover: #44BBA4;
    --btn: #44BBA4;
    --btnhover: #ebd434;
    --btnselected: #1b6ec2;
    --btnprimary: var(--logocolour2light);
    --btnprimaryadmin: #1b6ec2;
    --btnprimaryhover: #E94F37;
    --btnsecondary: #44BBA4;
    --btnsecondaryhover: #ebd434;
    --btnhighlight: #E94F37;
    --btnhighlighthover: #44BBA4;
}

.donotdisplay {
    display: none !important;
}


/* BLAZOR RECONNECT PANEL */
#components-reconnect-modal {
    opacity: 0.5 !important;
}

    #components-reconnect-modal h5 {
        margin-top: 50px !important;
        font-weight: bolder;
        color: red;
    }

    #components-reconnect-modal button {
        margin-top: 20px !important;
        font-weight: bolder;
        font-size: large;
        color: red;
    }

/* HTML BODY PAGE */
html, body {
    max-width: 100vw;
    height: 100vh;
    font-family: var(--fontfamily); /* 'Helvetica Neue', Helvetica, */
    background-color: var(--background);
    background-image: url(/images/site/VibLogo.png);
    background-position: center;
    background-repeat: no-repeat;
}

body,
#page {
    background-color: var(--background);
    color: var(--fontcolour);
    font-size: 1rem;
}
header {
    background-color: var(--background2);
    color: var(--fontcolour);
    font-size: 1rem;
}
.mobile-menu {
    z-index: 20;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 64px;
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100vw;
    max-height: calc( 100vh - var(--headerLogoHeight) );
    overflow-y: scroll;
    background-color: var(--background);
    color: var(--fontcolour);
}
    .mobile-menu a {
        color: var(--logocolour);
    }
.bold {
    font-weight: bold;
}

@media (min-width: 769px) {
    body {
        font-size: 1em;
    }

    .body {
        min-height: 10rem;
        min-height: calc( 100vh - var(--headerLogoHeight) - 169px );
        border-right: solid 1px rgb(59 130 246 / 100%);
        /*margin-right: 0.5rem;*/
        padding-right: 0rem !important;
    }

    .md\:max-w-screen { /* full screen */
        max-width: 100vw;
    }
}

.logo {
    position: relative;
    display: flex;
    flex-direction: row;
    min-width: 50%;
    align-items: center;
}
    .logo img {
        max-height: var(--headerLogoHeight);
    }
    .logo .test {
        position: absolute;
        left: -3rem;
        transform: rotate(-10deg) scale(1.8);
        font-weight: bold;
        color: #3F88C5;
        pointer-events: none;
    }

@media (min-width: 769px) {
    .logo .test {
        left: 45rem;
    }
}

.main {
    /*    flex: 1 !important; */
    max-width: 100%; /* default = full */
}

.side { /* 1/4 */
    display: none;
}

.copilot-button {
    display: none;
}

/* SCROLLBARS */

::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}
body::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}
.modal::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}
fieldset::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}
/*textarea::-webkit-scrollbar {
    width: unset;
}*/

.pagelayout-manage .main {
    left: 15%;
    width: 100%;
}
.pagelayout-manage textarea {
    min-height: 6rem;
}
.pagelayout-manage .card-image img {
    height: 100%;
    width: auto;
}

/*::-webkit-resizer {
    width: 20px;
}*/

::-webkit-scrollbar-thumb {
    background-color: #3F88C5; /* #393E41;*/
}

.main::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

.main::-webkit-scrollbar-thumb {
    background-color: #3F88C5;
}

.cards-container::-webkit-scrollbar {
    width: 1px;
}

.cards-container::-webkit-scrollbar-thumb {
    background-color: #3F88C5;
}

.side::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

.side::-webkit-scrollbar-thumb {
    background-color: #3F88C5;
}

.center {
    margin: auto
}
.center > div {
    margin: auto
}
.banner{
    position: relative;
}
.main footer {
    display: none;
    background-color: var(--background2);
}
footer.main_footer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    background-color: var(--background2);
}
    footer.main_footer .btn.btn-primary {
        background-color: var(--background4);
        border-color: var(--background4);
        color: var(--fontcolour);
    }

@media (max-width: 769px) {
/*    .main .main_footer{
        display: none;
    }*/
}

@media (min-width: 769px) {

    footer.main_footer {
       flex-direction: row;
    }

    .main footer {
        margin-left: 0rem;
    }

    footer {
        padding-left: 2rem;
        padding-right: 1rem;
    }

    .mainfooter footer {
        display: none;
    }

    .main footer {
        /*display: block;*/
    }

    .main_search {
        display: none;
    }
}

/* HEADER */
header .form-group {
    margin-bottom: unset;
}

.UserPopup {
    z-index: 100;
    position: fixed;
    right: -10px;
    top: 45px;
    min-width: 200px;
    max-width: 400px;
    padding: 0 0 0 5px;
    background-color: var(--background2);
    border: solid 1px var(--fontcolour);
}

    .UserPopup a,
    a.links-item {
        color: var(--fontcolour);
        line-height: 1rem;
        font-weight: 500;
    }
.LanguagePopup {
    z-index: 100;
    position: fixed;
    right: -10px;
    top: 57.9861px;
    min-width: 200px;
    max-width: 400px;
    padding: 0 0 0 5px;
    background-color: var(--background2);
    border: solid 1px var(--fontcolour);
}
    .LanguagePopup .modal {
        background: rgb(25,25,25,0.25);
    }
        .LanguagePopup .modal.show {
            display: block;
        }
        .LanguagePopup .modal .modal-content {
            background-color: var(--background2);
            border-color: var(--fontcolour);
        }

        .LanguagePopup .modal .modal-dialog {
            top: 10%;
            border-radius: 2rem;
        }

            .LanguagePopup .modal .modal-dialog button {
                width: unset;
                margin: 0.3rem;
            }

                .LanguagePopup .modal .modal-dialog button.close {
                    font-size: 3rem;
                    color: #dc3545; /*var(--fontcolour)*/
                }

            .LanguagePopup .modal .modal-dialog .modal-header {
                display: flex;
                justify-content: space-between;
                padding: 0rem 1rem;
            }

                .LanguagePopup .modal .modal-dialog .modal-header .modal-title {
                    max-width: 80%;
                }

                .LanguagePopup .modal .modal-dialog .modal-header .oi {
                    font-size: 2.2rem;
                    cursor: unset;
                    pointer-events: none;
                }

                .LanguagePopup .modal .modal-dialog .modal-header button.close {
                    top: 0;
                    right: 0;
                    bottom: unset;
                    left: unset;
                }

            .LanguagePopup .modal .modal-dialog .modal-body {
                height: 250px;
                max-height: 450px;
            }

                .LanguagePopup .modal .modal-dialog .modal-body * {
                    position: relative;
                }

                .LanguagePopup .modal .modal-dialog .modal-body .form-group label {
                    flex: 3;
                    margin-top: 2px;
                    margin-right: 1rem;
                }

            .LanguagePopup .modal .modal-dialog .modal-footer {
                position: relative;
            }

                .LanguagePopup .modal .modal-dialog .modal-footer .footer-text {
                    position: absolute;
                    right: 2rem;
                    margin-right: 2rem;
                }

                .LanguagePopup .modal .modal-dialog .modal-footer button.close {
                    bottom: -0.75rem;
                    right: 0;
                    top: unset;
                    left: unset;
                }

/* END OF HEADER */

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.form-group.help {
    font-style: italic;
    color: var(--fontcolour3);
    font-size: 0.85em;
    /*margin-top: -15px;*/
    width: 100%;
}

    .form-group.help.big .data * {
        font-size: 1.2rem !important;
    }

    .form-group.help.normal-text .data * {
        font-style: unset;
        color: var(--fontcolour);
    }

    .form-group.help.invalid,
    .form-group.help .invalid {
        outline: none;
        color: red;
        font-weight: normal;
    }

.section-help .form-group.help {
    font-size: 1rem;
}
.form-group .form-group.help {
    width: unset;
}

.has-change {
    background-color: lightyellow;
    outline: 1px solid orange;
}

    .has-change label {
        color: #000;
    }
    .has-change span,
    .has-change .data,
    .has-change .input-control {
        color: lightyellow;
    }

a.icon {
    text-decoration: none;
    color: #fff;
    background-color: var(--btnprimary);
    border-color: var(--btnprimary);
}

    a.icon:hover {
        background-color: var(--btnprimaryhover);
        border-color: var(--btnprimaryhover);
    }

    a.icon .oi {
        color: var(--fontcolour);
    }

    a.icon .icon-text {
        color: var(--fontcolour);
        font-size: 0.7rem;
    }

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* CUSTOMISE */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
}
.h6, h6 {
    margin-top: 0.8rem;
    font-size: 1.2rem;
    text-decoration: underline;
}

.oi {
    width: auto;
}

.oi,
label .oi,
.form-group.help label .oi {
    font-size: 1.2em;
    top: auto;
    bottom: auto;
    padding-right: 0.2rem;
    color: var(--btnprimary);
}
    .oi.oi-check {
        color: var(--bs-blue);
    }
    .oi.oi-x {
        color: red;
    }
    .oi.oi-chevron-left {
        color: var(--logocolour2light);
    }
a .oi,
button .oi,
.btn .oi {
    top: 5px;
    width: 30px;
    height: 35px;
    font-size: 1.5rem;
    color: var(--icon);
}

.bg-peach {
    background-color: var(--highlight);
}

    .bg-peach:hover {
        background-color: var(--highlighthover);
    }

.border-peach {
    border-color: var(--highlight);
}

.bg-gray7 {
    background-color: #393E41;
}

.tabcontrol.btn-group {
    overflow-x: auto;
    max-width: 100%;
}

    .tabcontrol.btn-group::-webkit-scrollbar {
        width: 0px;
        background: transparent;
        display: none;
    }

img {
    border-style: none;
    object-fit: cover
}

svg {
}

    svg.active,
    svg.inactive:hover {
        fill: #f65858;
        width: 27px;
        height: 27px;
    }

        svg.inactive,
        svg.active:hover {
            fill: #a2a2a29c;
            width: 27px;
            height: 27px;
        }

    svg.sponsored {
        fill: #3F88C5;
        width: 27px;
        height: 27px;
    }


.border-blue {
    border-color: #3F88C5;
}

.bottom-2 {
    bottom: 0.5rem;
}

.left-2 {
    left: 0.5rem;
}

/* LAYOUT TABLE */

.table {
    color: var(--fontcolour);
}
    .table tr {
        background-color: var(--background2);
        border: solid 2px var(--background);
    }
    .table td {
        width: 100%;
        max-width: 33%;
        border: none;
    }
        .table td:first-child {
            max-width: unset;
        }
    .table.three-cols td {
        max-width: 45%;
    }
        .table.three-cols td:first-child {
            max-width: 10%;
        }
    .table.four-cols td {
        max-width: 30%;
    }
        .table.four-cols td:first-child {
            max-width: 10%;
        }
    .table.five-cols td {
        max-width: 22.5%;
    }
        .table.five-cols td:first-child {
            max-width: 10%;
        }

@media (max-width: 769px) {
    .table td {
        display: block !important;
        max-width: 100% !important;
    }
}

/* LAYOUT OTHERS */
.section-help {
    flex-direction: column;
    font-style: italic;
    color: var(--fontcolour3);
}

.pagelayout-manage .section * {
    /*max-width: calc( 100% );*/
    /*color: var(--fontcolour);*/
}
.tabcontent .section {
    /*padding-left: 1rem;*/
    /*padding-right: 1rem;*/
}

.section {
    margin-bottom: 1rem;
    width: 100%;
}

    .section .section-row {
        flex-direction: row;
        justify-content: space-between;
    }
    .section .section-title {
        z-index: 15;
        flex-direction: column;
        position: sticky;
        top: 0;
        background-color: var(--background);
    }

        .section .section-title label {
            max-width: 100%;
        }

        .section .section-title.media {
            display: flex;
            flex-flow: wrap;
            justify-content: space-between;
        }

        .section .section-title > div {
            display: block;
        }

        .section .section-title .block {
            display: none;
        }

        .section .section-title svg.active {
            width: 40px;
            height: 40px;
        }

    .section .section-help {
        flex-direction: column;
        font-style: italic;
        color: var(--fontcolour3);
    }

    .section .modal {
        z-index: 2000;
        display: block;
        background: rgb(25,25,25,0.25);
        overscroll-behavior: none;
        overflow: auto;
    }

        .section .modal * {
            margin-top: 0;
            margin-block: 0;
            overscroll-behavior: none;
        }

        .section .modal .modal-content {
            top: 0 !important;
            height: 100%;
            overflow-y: scroll;
            background-color: var(--background2);
            border-color: var(--fontcolour);
        }

        .section .modal .modal-dialog {
            top: 10%;
            height: 90%;
            border-radius: 2rem;
        }

            .section .modal .modal-dialog button {
                width: unset;
                margin: 0.3rem;
            }

                .section .modal .modal-dialog button.close {
                    position: absolute !important; /*was static*/
                    font-size: 3rem;
                    color: #dc3545; /*var(--fontcolour)*/
                    background-color: var(--background);
                }

            .section .modal .modal-dialog .modal-header {
                height: 40px;
                justify-content: unset;
                padding: 0rem 1rem;
            }

                .section .modal .modal-dialog .modal-header .modal-title {
                    max-width: 80%;
                }

                .section .modal .modal-dialog .modal-header .oi {
                    width: 3rem;
                    font-size: 2.2rem;
                    cursor: unset;
                    pointer-events: none;
                }

                .section .modal .modal-dialog .modal-header button.close {
                    top: 0;
                    right: 0;
                    bottom: unset;
                    left: unset;
                }

            .section .modal .modal-dialog .modal-body {
                height: calc( 100% - 40px );
                /*padding: 0.5rem 0 1rem 0.5rem;*/
            }

                .section .modal .modal-dialog .modal-body * {
                    position: relative;
                }

                .section .modal .modal-dialog .modal-body .modal-image,
                .section .modal .modal-dialog .modal-body .modal-image img {
                    max-height: 90%;
                    width: 100%;
                }

                .section .modal .modal-dialog .modal-body .form-group label {
                    flex: 3;
                    margin-top: 2px;
                    margin-right: 1rem;
                }

            .section .modal .modal-dialog .modal-footer {
                position: relative;
            }

                .section .modal .modal-dialog .modal-footer .footer-text {
                    position: absolute;
                    right: 2rem;
                }

                .section .modal .modal-dialog .modal-footer button.close {
                    bottom: -0.75rem;
                    right: 0;
                    top: unset;
                    left: unset;
                }

@media (max-width: 769px) {
    .section .modal .modal-dialog {
        top: 14%;
    }
        .section .modal .modal-dialog .modal-header {
            height: 80px;
        }
        .section .modal .modal-dialog .modal-body {
            height: calc( 100% - 80px );
            /*padding: 0.5rem 0 1rem 0.5rem;*/
        }
}

.section .modal-entity {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    z-index: 1055;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background: rgb(25,25,25,0.25);
}

    .section .modal-entity * {
        margin-top: 0;
        margin-block: 0;
    }

    .section .modal-entity .modal-content {
        top: var(--headerLogoHeight);
        overflow-y: scroll;
        height: calc( 100vh - var(--headerLogoHeight) );
        background-color: var(--background);
        border-color: var(--fontcolour);
    }

    .section .modal-entity button.close {
        z-index: 100;
        /*font-size: 3rem;*/
        color: #dc3545;
    }

    .section .modal-entity .modal-entity-side {
        position: relative;
        height: calc(100vh - var(--headerLogoHeight));
        width: calc( 34%);
        max-width: calc( 34%);
        background-color: var(--background);
    }
        .section .modal-entity .modal-entity-side button.close {
            position: fixed;
            top: 67px;
            right: 40px;
            bottom: unset;
            left: unset;
        }

    .section .modal-entity .modal-entity-dialog {
        position: relative;
        width: calc( 100vw - 34% );
        max-width: calc( 100vw - 34% );
        background-color: var(--background);
    }

        .section .modal-entity .modal-entity-dialog button {
            width: unset;
            /*margin: 0.3rem;*/
        }
        .section .modal-entity .modal-entity-dialog .buttons button {
            margin: 0.3rem;
        }

        .section .modal-entity .modal-entity-dialog .modal-entity-header {
            justify-content: unset;
            padding: 0rem 1rem;
        }

            .section .modal-entity .modal-entity-dialog .modal-entity-header .modal-entity-title {
                max-width: 100%;
            }

            .section .modal-entity .modal-entity-dialog .modal-entity-header .oi {
                width: 3rem;
                font-size: 2.2rem;
                cursor: unset;
                pointer-events: none;
            }

            .section .modal-entity .modal-entity-dialog .modal-entity-header button.close {
                top: 0;
                right: 0;
                bottom: unset;
                left: unset;
            }

        .section .modal-entity .modal-entity-dialog .modal-entity-body {
            height: calc( 100vh - var(--headerLogoHeight));
            max-height: calc( 100vh - var(--headerLogoHeight));
        }

            .section .modal-entity .modal-entity-dialog .modal-entity-body * {
                position: relative;
            }

        .section .modal-entity .modal-entity-dialog .modal-body {
            padding: 0.5rem 0 1rem 0.5rem;
        }
            .section .modal-entity .modal-entity-dialog .modal-body button.back,
            .section .modal-entity-side .modal-content button.back {
                z-index: 10;
                position: sticky;
                top: 0.5rem;
                left: 0rem;
                margin-left: -0.6rem;
                width: 30px;
                background-color: var(--background);
            }
            .section .modal-entity .modal-entity-dialog .modal-body .maintitle {
                position: relative;
                top: -2rem;
                left: 1.5rem;
            }
            .section .modal-entity .modal-entity-dialog .modal-body button.close {
                position: fixed;
                top: 67px;
                /*right: calc(34% + 30px);*/
                bottom: unset;
                left: unset;
                background-color: var(--background);
            }

            .section .modal-entity .modal-entity-dialog .modal-entity-body .modal-entity-image img {
                max-height: 90%;
            }

            .section .modal-entity .modal-entity-dialog .modal-entity-body .form-group label {
                flex: 3;
                margin-top: 2px;
                margin-right: 1rem;
            }

        .section .modal-entity .modal-entity-dialog .modal-entity-footer {
            position: relative;
        }

            .section .modal-entity .modal-entity-dialog .modal-entity-footer .footer-text {
                position: absolute;
                right: 2rem;
            }

            .section .modal-entity .modal-entity-dialog .modal-entity-footer button.close {
                bottom: -0.75rem;
                right: 0;
                top: unset;
                left: unset;
            }
@media (max-width:768px) {
    .section .modal-entity .modal-entity-side {
        display: none;
    }
    .section .modal-entity .modal-entity-dialog {
        top: 10%;
        width: calc( 100vw );
        max-width: calc( 100vw );
    }
        .section .modal-entity .modal-entity-dialog .modal-body button.close {
            right: 20px;
            z-index: 100;
        }
}

.title,
.maintitle h2 {
    font-size: 1.5rem;
    /*line-height: 2.25rem;*/
    font-weight: 700;
}

.side h2 {
    margin-left: 0.25rem;
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight: 700;
}

.side .venue .name,
.side .category {
    font-weight: 600;
    font-size: 1rem;
}

.search-panel {
    margin: 0.5rem;
}
    .search-panel.searchTerm {
        width: 100%;
    }

    .search-panel section {
        margin-top: 1rem;
    }

    .search-panel.mobile {
        display: none;
    }

    .search-panel .form-group {
        flex: 1;
        position: relative;
        margin-right: 0.5rem;
        background-color: transparent;
    }

        .search-panel .form-group .icon {
            position: absolute;
            left: 0.5rem;
            top: 0.7rem;
        }

        .search-panel .form-group .input-control {
            width: 100%;
            display: block;
            margin-bottom: 0.5rem;
            padding: 0.5rem 0.5rem 0.5rem 1.5rem;
        }

        .search-panel .form-group.day {
            flex: 1;
        }

        .search-panel .form-group.month {
            flex: 2;
        }

        .search-panel .form-group.year {
            flex: 1;
        }

    .search-panel .buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .search-panel.last {
        margin-top: -0.5rem;
        margin-right: 1rem;
    }
        .search-panel.last .button {
            margin-top: 0;
        }

@media (max-width:768px) {
    .search-panel {
        margin-top: 0;
    }

        .search-panel.mobile {
            display: block;
        }

        .search-panel.not-mobile {
            display: none;
        }

        .search-panel .buttons {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }

            .search-panel .buttons .btn {
                width: 100%;
            }
    .section-title.flex.justify-between {
        flex-direction: column;
    }

}

@media (min-width:769px) {
    .home-banner img {
        height: 300px;
    }
    .home-banner h3 {
        padding: 0 3rem;
    }

    .section .section-title > div {
        display: flex;
        background-color: var(--background);
    }

    .section .section-title .block {
        display: block;
    }

    .section-title.flex.justify-between {
        flex-direction: row;
    }
        .section-title.flex.justify-between > * {
            margin: 0 0.5rem;
        }

}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

    .cards-container > ul {
        width: 100%;
    }

    .cards-container.small {
        flex-direction: row;
        display: flex;
    }

        .cards-container.small .card {
            max-width: 250px;
            max-width: 195px;
        }

.dragAndScroll {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
    min-width: 100%;
}

.scrollhorizontal {
    width: 100%;
    max-width: unset;
    overflow-x: scroll;
    scroll-behavior: auto;
    display: -webkit-inline-box;
}
    .scrollhorizontal::-webkit-scrollbar {
        width: 1px;
        height: 1px;
    }
.scrollvertical {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    list-style-type: none;
}
@media (max-width: 769px) {
    .scrollvertical {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: auto;
    }
    .cards-container.notification .scrollvertical {
        flex-direction: column;
    }
}

.booking-detail {
    color: var(--fontcolour2);
}

/* BUTTONS */
.buttons {
    flex-wrap: wrap;
    margin-left: 0.5rem;
}

    .buttons.fullwidth {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
    }

        .buttons.fullwidth > * {
            width: unset !important;
        }

        .buttons.fullwidth .fullwidth {
            width: 100% !important;
        }

.buttons-bottom {
    position: absolute;
    bottom: 0;
}

a {
    display: inline;
    cursor: pointer;
}

a {
    color: var(--logocolour);
}

    a:hover,
    .btn-link:hover {
        color: var(--btnhover);
    }

.btn-actions {
    position: relative;
}

    .btn.btn-actions {
        background-color: var(--btnprimary);
        border-color: var(--btnprimary);
        color: #fff;
    }
    .btn-actions,
    .btn-actions .oi {
        color: var(--btnprimary);
    }

        .btn-actions:hover .oi,
        .btn-actions .oi:hover {
            color: var(--btnhover);
        }

.btn {
    /*font-size: 1.25rem;*/
    cursor: pointer;
    padding: 0.5rem 1rem;
}

    .btn .title {
        font-size: var(--font-size);
        font-weight: unset;
    }

    .btn .subtitle {
        font-size: 0.75rem;
    }

    .btn.not-a-button,
    .not-a-button {
        pointer-events: none;
    }

.btn {
    border-radius: 0.35rem;
    line-height: 1;
    color: #000;
    fill: #000;
    background-color: var(--btn);
    border-color: var(--btn);
}
    .btn:hover {
        color: #000;
        background-color: var(--btnhover);
        border-color: var(--btnhover);
    }

.btn-back,
.btn-preview {
    background-color: var(--btn);
    border-color: var(--btn);
}

.btn-action {
    color: #fff;
    background-color: var(--logocolour2light);
    border-color: var(--logocolour2light);
}
    .btn-action:hover {
        color: #fff;
        background-color: var(--btnhover);
        border-color: var(--btnhover);
    }

.btn-primary {
    color: #fff;
    background-color: var(--btnprimary);
    border-color: var(--btnprimary);
}
.btn-link {
    color: var(--logocolour);
}

.btn-linksecondary {
    color: var(--logocolour2);
}

.pagelayout-manage .btn-primary {
    color: #fff;
    background-color: var(--btnprimaryadmin);
    border-color: var(--btnprimaryadmin);
}

    .btn-primary:hover {
        color: #000;
        background-color: var(--btnsecondaryhover);
        border-color: var(--btnsecondaryhover);
    }

.action .btn-primary {
    color: #fff;
    background-color: var(--btnprimaryhover);
    border-color: var(--btnprimaryhover);
}

    .action .btn-primary:hover {
        color: #000;
        background-color: var(--btnsecondaryhover);
        border-color: var(--btnsecondaryhover);
    }

.tabcontrol.btn-group .btn-primary:hover {
    color: #fff;
    background-color: var(--btnprimaryhover);
    border-color: var(--btnprimaryhover);
}

.btn-secondary {
    color: #000;
    background-color: var(--btnsecondary);
    border-color: var(--btnsecondary);
}
/*.btn-secondary:hover {
    color: #000;
    background-color: var(--btnsecondaryhover);
    border-color: var(--btnsecondaryhover);
}*/

.btn-highlight {
    color: #000;
    background-color: var(--btnhighlight);
    border-color: var(--btnhighlight);
}
.btn-highlight:hover {
    color: #000;
    background-color: var(--btnhighlighthover);
    border-color: var(--btnhighlighthover);
}

.language .btn-secondary {
    /*color: #000;
    background-color: #46c0f7;
    border-color: #46c0f7;*/
    background-color: var(--background);
    border-color: var(--primary);
    color: var(--fontcolour);
}
    .language .btn-secondary:hover {
        color: #000;
        background-color: var(--btnprimaryhover);
        border-color: var(--btnprimaryhover);
    }

.btn-largefull {
    width: 100%;
    height: 3rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #fff;
    background-color: #E94F37;
    border-color: #E94F37;
}

.btn-danger,
.btn-reject,
.btn-delete {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

/*.btn-danger:hover,
.btn-reject:hover {
    color: #fff;
    background-color: #000;
    border-color: #777676;
}*/

.btn-accept {
    color: #fff;
    background-color: var(--btnsecondary);
    border-color: var(--btnsecondary);
}

/*.btn-accept:hover {
    color: #fff;
    background-color: var(--btnsecondaryhover);
    border-color: var(--btnsecondaryhover);
}*/

.btn-processed {
    color: #000;
    background-color: #4ed85a;
}

.btn:disabled,
.btn.disabled,
.btn-disabled {
    background: #9e9fa0;
}
.btn.selected {
    background-color: var(--btnselected);
}

.btn-0 {
    color: #FFF;
    background-color: red;
    border-color: red;
}

.btn-1 {
    color: #FFF;
    background-color: #f00;
    border-color: #f00;
}

.btn-2 {
    color: #FFF;
    background-color: #e99937;
    border-color: #e99937;
}

.btn-3 {
    color: #FFF;
    background-color: #4eabde;
    border-color: #4eabde;
}

.btn-4 {
    color: #000;
    background-color: #44bb77;
    border-color: #44bb77;
}

.btn-5 {
    color: #000;
    background-color: #4ed85a;
    border-color: #4ed85a;
}

/* last of btn declarations */
/* TEMPLATES CARD */

.card-icon {
    width: 40%;
}
.card-text {
    width: 100%;
}

    .card-text .deleted {
        background-color: firebrick;
        padding: 0.5rem;
    }

    .card-text .title {
        overflow: hidden;
        padding-top: 0;
        /*padding-bottom: 0.25rem;*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 1.3rem;
        font-size: 1.2rem;
        font-weight: 700;
        text-align: center;
    }

    .card-text .venue {
        background-color: transparent !important;
    }

    .card-text .text {
        width: 100%;
        --tw-text-opacity: 1;
        /*color: #000;*/ /*rgba(117,117,117,var(--tw-text-opacity));*/
        margin-left: auto;
        margin-right: auto;
        /*margin-top: 0.5rem;*/
        /*margin-bottom: 0.5rem;*/
        font-size: .875rem;
        line-height: 1.25rem;
        color: var(--fontcolour4);
    }

        .card-text .text p {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

.card-bottom.bottom {
    position: absolute;
    left: 0.15rem;
    bottom: 0;
    width: 85%;
    /*background-color: var(--background-cardbottom);*/
}

.card-bottom .text {
    width: 85%;
    font-size: 0.9rem;
}

.main .banner .card-bottom.buttons button:not(.btn,.close) {
    /*background: #000;*/
}

.side .banner {
    position: relative;
    overflow: hidden;
    /*overflow: visible;*/
}
.side .more {
    color: var(--logocolour);
}
    .side .more:hover {
        color: var(--btnhover);
    }

.card-bottom.buttons {
    z-index: 10; /* fix the click on the icon Version 0.100-47-5 */
    position: absolute;
    bottom: 0;
    right: 0;
}

    .card-bottom.buttons button {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 0;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 10px;
    }

        .card-bottom.buttons button.active,
        .card-bottom.buttons button.force {
            /*background-color: #000;*/
        }

        /*.card-bottom.buttons button.pending {
        background-color: #787777;
    }*/

        .card-bottom.buttons button .oi {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 2.5rem;
        }

        .card-bottom.buttons button.favourite .text {
            position: absolute;
            bottom: 0;
            right: 35px;
            color: transparent;
            font-size: 0.9rem;
        }

        .card-bottom.buttons button.favourite .number {
            display: none;
            z-index: 10;
            pointer-events: none;
            margin: auto;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .card-bottom.buttons button.favourite.active .number,
        .card-bottom.buttons button.favourite.force .number {
            color: #000;
        }

        .card-bottom.buttons button.favourite.inactive .number {
            color: #000;
        }

        .card-bottom.buttons button.favourite:hover .text {
            color: #f65858;
        }

        .card-bottom.buttons button.favourite {
            right: 10px;
        }

        .card-bottom.buttons button.join {
            right: 40px;
        }

        .card-bottom.buttons button.force {
            cursor: auto;
        }

    .card-bottom.buttons .modal {
        display: block;
        background: rgb(25,25,25,0.25);
    }

        .card-bottom.buttons .modal .modal-content {
            background-color: var(--background2);
            border-color: var(--fontcolour);
        }

        .card-bottom.buttons .modal .modal-dialog {
            top: 10%;
            border-radius: 2rem;
        }

            .card-bottom.buttons .modal .modal-dialog button {
                width: unset;
                margin: 0.3rem;
            }

                .card-bottom.buttons .modal .modal-dialog button.close {
                    font-size: 3rem;
                    color: #dc3545; /*var(--fontcolour)*/
                }

            .card-bottom.buttons .modal .modal-dialog .modal-header {
                justify-content: unset;
                padding: 0rem 1rem;
            }

                .card-bottom.buttons .modal .modal-dialog .modal-header .modal-title {
                    max-width: 80%;
                }

                .card-bottom.buttons .modal .modal-dialog .modal-header .oi {
                    font-size: 2.2rem;
                    cursor: unset;
                    pointer-events: none;
                }

                .card-bottom.buttons .modal .modal-dialog .modal-header button.close {
                    top: 0;
                    right: 0;
                    bottom: unset;
                    left: unset;
                }

            .card-bottom.buttons .modal .modal-dialog .modal-body {
                height: 450px;
                max-height: 450px;
            }

                .card-bottom.buttons .modal .modal-dialog .modal-body * {
                    position: relative;
                }

                .card-bottom.buttons .modal .modal-dialog .modal-body .form-group label {
                    flex: 3;
                    margin-top: 2px;
                    margin-right: 1rem;
                }

            .card-bottom.buttons .modal .modal-dialog .modal-footer {
                position: relative;
            }

                .card-bottom.buttons .modal .modal-dialog .modal-footer .footer-text {
                    position: absolute;
                    right: 2rem;
                }

                .card-bottom.buttons .modal .modal-dialog .modal-footer button.close {
                    bottom: -0.75rem;
                    right: 0;
                    top: unset;
                    left: unset;
                }

@media (max-width: 769px) {
    .card-bottom.buttons .modal .modal-dialog {
        top: 10%;
    }
}

.oi,
label .oi,
.form-group.help label .oi {
    width: 27px;
    height: 27px;
}

    .oi.empty,
    .oi.inactive {
        color: var(--icon);
    }

    /* TEMPORARY SETTING UNTIL BOOKING IS FULLY MANAGED (eventually then change the "going" setting ) */
    .oi.pending,
    .oi.waiting,
    .oi.rejected,
    .oi.like,
    .oi.going,
    .oi.active,
    .oi.force,
    .oi.interested,
    .oi.pending:hover,
    .oi.waiting:hover {
        color: var(--iconactive);
    }

        .oi.empty:hover,
        .oi.inactive:hover,
        .oi.like:hover,
        .oi.going:hover,
        .oi.active:not(.not-a-button):hover,
        .oi.rejected:hover,
        .oi.interested:hover {
            color: var(--iconhover);
        }

    .oi.force {
        cursor: auto;
    }

    .oi.sponsored { /* not used ? */
        color: #2bbd3d;
        color: #3F88C5;
    }

    .oi.button {
        bottom: 0.25rem;
        /*font-size: 2.8rem;*/
        color: var(--logocolour2light);
    }
        .oi.button.oi-heart {
            bottom: 0rem;
            /*font-size: 2.4rem;*/
            color: var(--logocolour2light);
        }
            .oi.button.oi-heart.active {
                color: var(--logocolour2light);
            }
        .oi.button.oi-warning {
            bottom: 0rem;
            /*font-size: 2rem;*/
            color: var(--logocolour2light);
        }
            .oi.button.oi-warning.active {
                color: var(--logocolourlight);
            }
        .oi.button.oi-bell {
            bottom: 0rem;
            /*font-size: 2rem;*/
            color: var(--logocolour2light);
        }
            .oi.button.oi-bell.active {
                color: var(--logocolour);
            }
        .oi.button.oi-flag {
            bottom: 0rem;
            /*font-size: 2.4rem;*/
            color: var(--highlight);
        }

.oi.oi-person {
    color: var(--logocolour2light);
}
#header .oi.oi-person {
    bottom: 0rem;
    font-size: 2rem;
}
.oi.oi-person.active,
.nav-item .oi.oi-person {
    color: var(--logocolourlight);
}

.oi.oi-cog {
    color: var(--logocolourlight);
}
.oi.oi-browser {
    line-height: 0.7;
}
.oi.oi-eye {
    color: var(--logocolour2light);
}
.oi.oi-account-logout {
    color: var(--logocolourlight);
}

@media (max-width: 768px) {
    .oi {
        width: 40px;
        height: 40px;
        font-size: 2em;
    }
}

@media (min-width: 769px) {
    .oi,
    label .oi,
    .form-group.help label .oi {
        width: 35px;
        height: 35px;
        font-size: 1.8em;
    }
}

.card-body {
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    /*background-color: var(--background5);*/
}

.card-image-subtitle {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    margin-top: -13px;
    padding: .15rem 1.5rem;
    height: 3rem;
    color: #fff;
    /*z-index: 90;*/ /* must be less than z-index of ".side .close" */
    overflow: hidden;
}

    .card-image-subtitle.history {
        height: unset;
        margin: 0 auto !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

.card-image {
    position: relative;
    max-height: 149px;
    max-width: 100%;
    height: 149px;
    width: auto; /*265px*/
    margin: 0; /*auto*/
}

    .card-image img {
        object-position: top;
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border-top-right-radius: 0.5rem;
        border-top-left-radius: 0.5rem;
    }

.links-item.card-image-subtitle,
.links-item.card-image-subtitle:hover {
    margin-top: 0;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
    width: 100%;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

    .links-item.card-image-subtitle.celebrity,
    .card-image-subtitle.celebrity,
    .card-image-subtitle.celebrity:hover,
    .btn.btn-people {
        background: var(--celebrity) !important; /*#ff69b3  !important;*/
        border: none;
        color: #000;
    }

    .links-item.card-image-subtitle.club,
    .card-image-subtitle.club,
    .card-image-subtitle.club :hover,
    .btn.btn-club {
        background: var(--club) !important;
        border: none;
        color: #000;
    }

    .links-item.card-image-subtitle.company,
    .card-image-subtitle.company,
    .card-image-subtitle.company:hover,
    .btn.btn-company {
        background: var(--company) !important;
        border: none;
        color: #000;
    }

    .links-item.card-image-subtitle.event,
    .card-image-subtitle.event,
    .card-image-subtitle.event:hover {
        background: var(--event);
        border: none;
        color: #000;
    }
        .card-image-subtitle.event.passed,
        .card-image-subtitle.event.passed:hover {
            background: #9fc6b1;
            border: none;
            color: #6d6d6d;
        }

.btn.btn-event,
#location-search-submit.btn-event {
    top: -1px;
    background-color: var(--logocolour2light);
    color: #fff;
    border: none;
}
    .btn.btn-event.event-highlight {
        background-color: var(--btnselected);
    }

.btn.btn-buzz {
    background-color: var(--logocolour2light);
    color: #fff;
    border: none;
}
    .btn.btn-buzz.buzz-highlight {
        background-color: var(--btnselected);
    }

.links-item.card-image-subtitle.eventorganiser,
.card-image-subtitle.eventorganiser,
.card-image-subtitle.eventorganiser:hover,
.btn.btn-eventorganiser {
    background: var(--eventorganiser) !important; /* #d15b16 !important;*/
    border: none;
    color: #000;
}

.links-item.card-image-subtitle.venue,
.card-image-subtitle.venue,
.card-image-subtitle.venue:hover,
.btn.btn-venue {
    background: var(--venue) !important;
    border: none;
    color: #000;
}

.card-tooltip {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--background);
}

    .card-tooltip > div {
        z-index: 10;
        display: flex;
        flex-direction: row;
        -ms-flex-direction: row;
        align-items: center;
        height: 31px;
        border-radius: 0.25rem;
        background-color: #44bba46e;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 0.125rem;
        padding-left: 0.25rem;
        padding-bottom: 0.125rem;
        padding-right: 0.5rem;
        white-space: nowrap;
        line-height: 1rem;
        font-size: .75rem;
        font-weight: 700;
    }

.cards-container .card-tooltip {
    position: absolute;
    top: calc( 149px - 1.5rem);
    bottom: unset;
}

.cards-container.small .card-tooltip {
    position: absolute;
    top: calc( 149px - 4.0rem);
    bottom: unset;
}

.card {
    display: flex;
    /*flex-direction: row;*/
    justify-content: flex-start;
    position: relative;
    padding: 0;
    margin: 0.5%;
    width: 265px;
    max-width: 100%;
    height: 425px;
    max-height: 100%;
    border-width: 1px;
    border-radius: 0.5rem;
    border-color: var(--fontcolour);
    background-size: cover;
    background-clip: padding-box;
    background-color: var(--background2);
    /*z-index: 0;*/
    overflow: hidden;
    overflow-wrap: break-word;
}
.card {
    height: 380px;
}

    .card.noborder {
        border: unset;
    }

    .card.nobackground {
        background-color: var(--background);
    }

    .card a {
        width: 100%;
        color: var(--fontcolor);
    }

    .card .status-event,
    .banner .status-event,
    .entity-header .status-event,
    .status-alert {
        position: absolute;
        top: 0;
        /*z-index: 10;*/
        margin-top: 20px;
        margin-left: -25px;
        text-align: center;
        width: 120px;
        height: 1.5rem;
        font-size: 0.8rem;
        background: #ff0000;
        color: #fff;
        border: 1px solid #fff;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
    }
.status-alert {
    background: #f65858;
    margin-top: 22px;
    margin-left: -35px;
}

.status-event.test {
    background: var(--highlight2);
    color: var(--highlight2font);
}
.status-event.active {
    background: #4dbb44;
}

.status-event.finaldate {
    background: var(--logocolour2);
}

.status-event.soldout {
    background: var(--logocolour2);
}

.status-event.cancelled,
.status-event.postponed {
    background: #920000;
}

.status-event.cancelled,
.status-event.finaldate,
.status-event.postponed,
.status-event.soldout {
    top: 1rem;
    left: 30%;
    width: 10rem;
    height: 4rem;
    padding: 1rem;
    border-radius: 2rem;
    vertical-align: middle;
    /*opacity: 0.6;*/
    font-size: 1rem;
    font-weight: bold;
}

.vertical .status-event.cancelled,
.vertical .status-event.finaldate,
.vertical .status-event.postponed,
.vertical .status-event.soldout {
    top: 15%;
    left: 5%;
}
.status-event.cancelled,
.status-event.finaldate,
.status-event.postponed,
.status-event.soldout,
.vertical .status-event.cancelled,
.vertical .status-event.finaldate,
.vertical .status-event.postponed,
.vertical .status-event.soldout {
    top: 15%;
    left: -15%;
    border-radius: 0;
    width: 15rem;
}

.view {
    /*display: flex;
justify-content: flex-start;*/
    position: relative;
    padding: 0;
    margin: 0.25rem 0.25rem;
    width: 99%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-width: 1px;
    border-radius: 0.5rem;
    border-color: #e6e9ec;
    background-size: cover;
    background-clip: padding-box;
    background-color: var(--background2);
    /*z-index: 0;*/
    overflow: hidden;
    overflow-wrap: break-word;
}

.notification {
    height: unset;
    font-weight: unset;
    font-style: italic;
}

    .notification.even {
        background-color: var(--background3);
    }

    .notification a {
        color: unset;
    }

    .notification .title {
        font-weight: unset;
    }

    .notification .text {
        font-weight: unset;
    }

    .notification .link {
        color: var(--fontcolour);
        font-weight: unset;
    }

    .notification .from {
        color: var(--fontcolour3);
    }

    /*.notification .date {
        color: var(--fontcolour3);
    }*/

    .notification.notread,
    .notification.notread .date {
        font-weight: bold;
        font-style: unset;
        background-color: var(--background3);
        color: var(--logocolourlight);
    }

.view.notification .panels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .view.notification .panels > div {
        width: 50%;
    }

@media (max-width: 769px) {
    .view.notification .panels {
        flex-direction: column;
    }
    .view.notification .panels > div {
        width: 100%;
    }
}


.view.notification {
    z-index: 30;
    position: relative;
    top: calc(-var(--headerLogoHeight));
    left: -5px;
    padding: 1rem 2.5rem 1rem 1rem;
}

    .view.notification button.close {
        position: absolute;
        top: 0.2rem;
        right: 0.5rem;
        bottom: unset;
        left: unset;
        font-size: 3rem;
        color: #dc3545; /*var(--fontcolour)*/
    }

    .view.notification .title {
        margin-bottom: 1rem;
    }

        .view.notification .title > div {
            margin-right: 0.5rem;
        }

    .view.notification .text {
        margin-top: 1rem;
    }

.li-card.notification {
    width: 100%;
    max-width: 100%;
}

.card.notification {
    display: flex;
    flex-direction: row;
    width: 98%;
    height: unset;
    min-height: 5.5rem;
    max-width: 100%;
}

    .card.notification .content {
        width: 100%;
        padding: 0 1rem;
    }

    .card.notification .image {
        width: 6rem;
        max-height: 6rem;
        padding: 0.5rem;
        border-radius: 9999px;
        -o-object-fit: cover;
        object-fit: cover;
        max-width: 6rem;
    }

        .card.notification .image img {
            width: 100%;
            height: 100%;
            border-radius: 9999px;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .card.notification .icon {
        width: 6rem;
        max-height: 6rem;
        padding: 0.5rem;
        text-align: center;
    }

    .card.notification .title {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

        .card.notification .title .date {
            font-size: 1rem;
        }

    .card.notification .text {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /*-webkit-line-clamp: 2;*/
    }

.li-card {
    min-width: 265px;
    padding-bottom: 1rem;
    margin-right: 0.5em;
}
.card.vertical {
}

    .card.vertical .card-body {
        /*padding-top: 0;*/
    }

        .card.vertical .card-body .title {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        /*.card.vertical .card-body .title,*/
        .card.vertical .card-body .description {
            display: none !important;
        }

    .card.vertical .card-image {
        max-height: 300px;
        height: 100%;
        width: auto;
        max-width: 100%;
        bottom: 0;
    }

        .card.vertical .card-image img {
            width: 100%;
            height: auto;
            max-height: unset;
        }

        .card.vertical .card-image div.subtitle {
            position: absolute;
            /*bottom: -15px;*/
            width: 100%;
            height: 30px;
            text-align: center;
        }

            .card.vertical .card-image div.subtitle .card-image-subtitle {
                height: 22px;
            }

.card-body {
    padding-top: 0;
    height: 70px;
    position: relative;
}
.card-body .card-text {
    height: 100%;
}
.card-body2.vertical {
    position: absolute;
    bottom: 37px;
    background-color: #ffffffcc;
    background-color: var(--background2);
    width: 100%;
}

/*.card.event */
.card-image.newdesign.vertical {
    position: absolute;
    top: 70px;
    /*max-height: 270px;*/
}

    /*.card.event */
    .card-image.newdesign.vertical .subtitle {
        position: absolute;
        /*top: -15px;*/
        width: 100%;
    }

.card-image.newdesign {
    width: 100% !important;
    height: auto;
    min-height: 150px;
    overflow: hidden;
}

    .card-image.newdesign .subtitle {
        position: absolute;
        top: 0px;
        width: 100%;
    }

    .card-image.newdesign div.subtitle .card-image-subtitle {
        margin: 0 auto;
        height: 30px !important;
        width: 100%;
        text-align: center;
        font-size: 1.2em;
    }

.li-card-double-container {
    min-width: calc( 2 * 265px);
    padding-bottom: 1rem;
    margin-right: 0.5em;
}
.li-card-double-container {
    position: relative;
    max-width: 100%;
    min-width: 1004%;
}

.side-hidden .li-card-double-container .status-event.cancelled,
.side-hidden .li-card-double-container .status-event.finaldate,
.side-hidden .li-card-double-container .status-event.postponed,
.side-hidden .li-card-double-container .status-event.soldout,
.side-hidden .li-card-double-container .vertical .status-event.cancelled,
.side-hidden .li-card-double-container .vertical .status-event.finaldate,
.side-hidden .li-card-double-container .vertical .status-event.postponed,
.side-hidden .li-card-double-container .vertical .status-event.soldout {
    top: 0;
    left: -15%;
    border-radius: 0;
    width: 15rem;
}

    /*.li-card-double-container ul {
        width: unset;
    }*/

    .li-card-double-container ul {
        width: 100%;
    }

    .li-card-double-container .li-card {
        position: absolute;
        max-width: 100%;
    }

        .li-card-double-container .li-card.card-hidden {
            display: none;
        }

        .li-card-double-container .li-card.card-previous {
            display: block;
            opacity: 0;
            animation-name: fadeOutOpacity;
            animation-iteration-count: 1;
            animation-timing-function: ease-in;
            animation-duration: 1.5s;
        }

        .li-card-double-container .li-card.card-visible {
            display: block;
            opacity: 1;
            animation-name: fadeInOpacity;
            animation-iteration-count: 1;
            animation-timing-function: ease-in;
            animation-duration: 1s;
        }

    .li-card-double-container .card {
        width: 100%;
    }

        .li-card-double-container .card.horizontal .card-image,
        .li-card-double-container .card.vertical .card-image {
            width: 314px;
            min-width: 314px;
            max-width: 314px;
            height: 380px;
            min-height: 380px;
        }
            .li-card-double-container .card.horizontal .card-image img {
                width: auto;
                max-width: 100%;
                height: 100%;
                min-height: 100%;
                border-radius: unset;
            }
            .li-card-double-container .card.vertical .card-image img {
                width: 100%;
                border-radius: unset;
            }

        .li-card-double-container .card .card-body {
            max-width: calc( 100% - 314px );
            height: 380px;
            padding: 0;
            background-color: var(--background2);
        }

            .li-card-double-container .card .card-body .title {
                overflow: visible;
                background-color: var(--background5);
                text-align: center;
            }

            .li-card-double-container .card .card-body .date {
                overflow: visible;
                padding: 0 0.5rem;
                text-align: center;
                color: var(--logocolour);
            }

            .li-card-double-container .card .card-body .card-text {
                height: 100%;
                padding: 0 0.5rem;
                background-color: var(--background2);
            }

            .li-card-double-container .card .card-body .description {
                display: -webkit-box !important;
                -webkit-line-clamp: 9;
            }

        .li-card-double-container .card .card-bottom.bottom {
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .li-card-double-container .card .subtitle {
            display: none;
        }

.li-card-double-container-button {
    display: block;
    z-index: 1000;
    position: absolute !important;
    top: 40%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid blue;
    background-color: var(--background);
    text-align: center;
}

    .li-card-double-container-button.next {
        /*right: -7px;*/
        left: 285px;
    }

    .li-card-double-container-button.previous {
        left: -10px;
    }

    .li-card-double-container-button span {
        position: absolute;
        top: 5px;
        right: 0;
        cursor: pointer;
        /*color: #3F88C5;*/
    }

        .li-card-double-container-button span .oi.oi-chevron-left,
        .li-card-double-container-button span .oi.oi-chevron-right {
            color: var(--logocolour2light);
        }

    .li-card-double-container-button.tiptip:after,
    .li-card-double-container-button.tiptipLeft:after {
        top: 0;
        background-color: var(--background2);
    }

    .li-card-double-container-button.tiptip:after {
        left: 100%;
    }

.li-card-double-container-slide-control-dot {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
}
    .li-card-double-container-slide-control-dot {
        bottom: 1rem;
    }
    .li-card-double-container-slide-control-dot .oi {
        width: 0.65rem;
        font-size: 0.7rem;
        color: var(--background4);
    }
        .li-card-double-container-slide-control-dot .oi.slide-active {
            color: var(--background3);
        }
.li-card-double-container-slide-control {
    position: absolute;
    bottom: 1.5rem;
    left: 0.5rem;
    width: 50%;
}
    .li-card-double-container-slide-control .progress {
        height: 0.5rem;
        background-color: var(--background3);
    }


@media (max-width: 769px) {
    .section.CardsListLarge .cards-container .li-card {
        width: 100%;
    }

    .side .entity-header .card-image {
        display: none;
    }

    .card-image-subtitle {
        padding-top: 0;
        font-size: 1.5em;
    }

    .card-tooltip {
        font-size: 1rem;
    }

    .card {
        width: 100%;
        min-width: 265px;
        max-width: 100%;
        max-height: 100%;
        height: 455px;
        /*margin: 0;*/
    }
        .card.vertical {
            height: 455px;
        }
        .card,
        .card.vertical {
            height: 380px;
        }

            .card.vertical .vertical {
                max-height: 320px;
            }
}

@media (min-width: 450px) and (max-width: 769px) {
    .li-card {
        width: 50%;
        max-width: 50%;
    }
}

@media (min-width: 769px) {
    .li-card {
        /*width: 32%;*/
        max-width: 32%;
        min-width: unset;
    }

    .scrollArea .li-card {
        margin-left: 1%;
    }

    .card .card-image.vertical {
        /*height: 435px;*/
    }

        .card.vertical .card-body .title {
            -webkit-line-clamp: 2;
        }

    .li-card-double-container {
        max-width: 75%;
        min-width: 75%;
    }
    .side-hidden .li-card-double-container {
        max-width: 50%;
        min-width: 50%;
    }

}


/* CARD EVENT */
.card.event, .side .event {
    /*color: #000;*/
}
    .card.event a {
        /*color: #000;*/
    }

    .card.event .card-tooltip > div {
        background-color: #F6F7EB;
        /*color: #000;*/
    }

    .card.event .card-text .description {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
    }

    .card.event .card-text .date {
        padding-bottom: 0.25rem;
        padding-top: 0.25rem;
        font-size: 0.81rem;
        line-height: 1.25rem;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: -.025em;
    }

        .card.event .card-text .date.small {
            margin-top: -0.7rem;
            margin-bottom: -0.2rem;
            padding-bottom: 0;
            font-size: 0.7rem;
            /*color: var(--fontcolour);*/
        }

    .card.event .card-text .date,
    .side .event .date,
    .page-event-title .date {
        /*color: #ffe200; */ /*yellow*/
        color: var(--logocolour);
    }

        .card.event .card-text .date.passed,
        .side .event .date.passed,
        .page-event-title .date.passed {
            /*color: #ffe200; */ /*yellow*/
            color: var(--logocolour2light);
            color: #6d6d6d;
        }

    .card.event .card-text .place {
        margin-top: -0.2rem;
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--logocolour);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .card.celebrity .card-body2.vertical .card-text .description,
    .card.company .card-body2.vertical .card-text .description,
    .card.event .card-body2.vertical .card-text .description,
    .card.eventorganiser .card-body2.vertical .card-text .description,
    .card.venue .card-body2.vertical .card-text .description {
        display: none;
    }

/* CARD VENUE */
.card.venue,
.side .venue {
    /*background-color: #3f88c52e;*/ /* blue */
    /*background-color: #F6F7EB;*/ /* beige */
    /*color: #000;*/ /*rgba(135,116,87,1);*/
}
    .card.venue a {
        /*color: #000;*/
    }

    .card.venue .card-tooltip > div {
        /*background-color: #3f88c52e;*/
    }

    .card.venue .card-text .description {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
    }

    .card.venue .card-text .city {
        position: absolute;
        bottom: 0;
        padding-bottom: 0.25rem;
        padding-top: 0.25rem;
        line-height: 1.25rem;
        text-transform: uppercase;
        letter-spacing: -.025em;
        font-size: .875rem;
        font-weight: 700;
    }

/* CARD CLUB */
.card.club,
.side .club {
    /*background-color: #3f88c52e;*/ /* blue */
    /*background-color: #703fc52e;*/ /* violet */
    /*color: #000;*/ /*rgba(135,116,87,1);*/
}
    .card.club a {
        /*color: #000;*/
    }

    .card.club .card-tooltip > div {
        /*background-color: #3f88c52e;*/
    }

    .card.club .card-text .description {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
    }

    .card.club .card-text .city {
        padding-bottom: 0.25rem;
        padding-top: 0.25rem;
        line-height: 1.25rem;
        text-transform: uppercase;
        letter-spacing: -.025em;
        font-size: .875rem;
        font-weight: 700;
    }

/* CARD COMPANY */
.card.company,
.side .company {
    /*background-color: #3f88c52e;*/ /* blue */
    /*color: #000;*/ /*rgba(135,116,87,1);*/
}
    .card.company a {
        /*color: #000;*/
    }

    .card.company .card-tooltip > div {
        /*background-color: #3f88c52e;*/
    }

    .card.company .card-text .description {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
    }

    .card.company .card-text .city {
        padding-bottom: 0.25rem;
        padding-top: 0.25rem;
        line-height: 1.25rem;
        text-transform: uppercase;
        letter-spacing: -.025em;
        font-size: .875rem;
        font-weight: 700;
    }

/* CARD EVENTORGANISER */
.card.eventorganiser,
.side .eventorganiser {
    /*background-color: #3f88c52e;*/ /* blue */
    /*background-color: #c5743f2e;*/ /* orange */
    /*color: #000;*/ /*rgba(135,116,87,1);*/
}
    .card.eventorganiser a {
        /*color: #000;*/
    }

    .card.eventorganiser .card-tooltip > div {
        /*background-color: #3f88c52e;*/
    }

    .card.eventorganiser .card-text .description {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
    }

    .card.eventorganiser .card-text .city {
        padding-bottom: 0.25rem;
        padding-top: 0.25rem;
        line-height: 1.25rem;
        text-transform: uppercase;
        letter-spacing: -.025em;
        font-size: .875rem;
        font-weight: 700;
    }

/* CARD CELEBRITY */
.card.celebrity,
.side .celebrity {
    /*background-color: #e9b9b2;*/ /* pale orange */
    /*color: #000;*/
}
    .card.celebrity a {
        /*color: #000;*/
    }

    /*    .card.celebrity .card-tooltip > div {
background-color: #393E41;
}
*/
    .card.celebrity .card-text .description,
    .card.celebrity .card-text .text {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
    }

    .card.celebrity .card-text .title {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /*        color: #E94F37;
*/
    }

    .card.celebrity .city {
        position: absolute;
        bottom: 0;
    }

/* CARD STORY */
.card.story {
    height: 250px;
    background-color: var(--background2); /* pale yellow */
    /*color: #000;*/
}

/* CARD MORE */
.card.more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: unset;
    background-color: var(--background);
    color: var(--logocolour);
    cursor: pointer;
}
    .card.more.card-separator {
        cursor: auto;
    }

/* must be after the specific cards */
.card.sponsored {
    /*background-color: #44bba46e;*/ /* green */
    /*color: #000;*/
}

    .card.sponsored .card-tooltip > div {
        /*background-color: #44bba46e;*/
    }

    .card.sponsored .card-text .title {
        /*color: #000;*/
    }

.card-event.sponsored {
    /*background-color: #44bba46e;*/ /* green */
}

    .card-event.sponsored .card-tooltip > div {
        /*color: #000;*/
    }

    .card-event.sponsored .card-tooltip > div {
        /*background-color: #44bba46e;*/
    }

    .card-event.sponsored .card-text .title {
        /*color: #000;*/
    }

.card.venue.sponsored {
    /*background-color: #44bba46e;*/ /* green */
}

    .card.venue.sponsored a {
        /*color: #000;*/
    }

    .card.venue.sponsored .title,
    .card.venue.sponsored .city {
        /*color: #000;*/
    }

.card.celebrity.sponsored {
    /*background-color: #44bba46e;*/ /* green */
}

    .card.celebrity.sponsored a {
        /*color: #000;*/
    }

    .card.celebrity.sponsored .title,
    .card.celebrity.sponsored .city {
        /*color: #000;*/
    }
/*    .card.celebrity.sponsored .text .description {
color: #fff;
}
*/

/* Entities Icons */
/*.club .oi.like,
.club .oi.going,
.club .oi.active,
.club .oi.force {
    color: var(--club);
}
.company .oi.like,
.company .oi.going,
.company .oi.active,
.company .oi.force {
    color: var(--company);
}
.celebrity .oi.like,
.celebrity .oi.going,
.celebrity .oi.active,
.celebrity .oi.force {
    color: var(--celebrity);
}
.eventorganiser .oi.like,
.eventorganiser .oi.going,
.eventorganiser .oi.active,
.eventorganiser .oi.force {
    color: var(--eventorganiser);
}
.event .oi.like,
.event .oi.going,
.event .oi.active,
.event .oi.force {
    color: var(--event);
}
.venue .oi.like,
.venue .oi.going,
.venue .oi.active,
.venue .oi.force {
    color: var(--venue);
}*/

/* MEDIA */
.card.media {
    height: auto;
    width: 255px;
    flex-direction: column;
    align-items: center;
}

    .card.media .buttons {
        position: absolute;
        bottom: 0;
        margin-top: 1rem;
    }
    .card.media .card-image {
        /*padding: 1em;*/
        cursor: pointer;
        height: 300px;
        max-height: 300px;
        width: auto;
        max-width: 100%;
    }

        .card.media .card-image img {
            height: 100%;
        }

    .card.media .card-tooltip {
        padding: 0 1em;
        top: 5px;
        bottom: unset;
    }

    .card.media .card-text .title {
        font-weight: unset;
    }

    .card.media.album .card-image {
        height: unset;
    }

.cardmanage {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    padding: 0;
    margin: 0.25rem 0.25rem;
    width: 24%;
    max-width: 100%;
    height: auto;
    min-height: 260px;
    max-height: 100%;
    border-width: 1px;
    border-radius: 0.5rem;
    border-color: #e6e9ec;
    background-size: cover;
    background-clip: padding-box;
    background-color: var(--background2);
    /*z-index: 0;*/
    overflow: hidden;
    overflow-wrap: break-word;
}

    .cardmanage .cardmanage {
        justify-items: center;
        min-height: unset;
        margin: auto;
    }
        .cardmanage .cardmanage a .oi {           
            color: var(--fontcolour);
        }

    .cardmanage .video-wrapper {
        height: auto;
        flex-direction: row;
        max-width: 100%;
    }

    .cardmanage .buttons {
        position: absolute;
        bottom: 0;
    }

    .cardmanage label {
        color: var(--fontcolour3);
        font-weight: unset;
    }

.pagelayout-manage .card .date {
    /*color: #000 !important;*/
            /*background-color: #ffff;*/
        }

.pagelayout-manage .card .text .place {
    display: none !important;
}

.pagelayout-manage .card .title {
    /*-webkit-line-clamp: 2 !important;*/
}

/*.card.event .card-text .place {
    margin-top: -0.2rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--logocolour2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}*/

/* BOOKING */
.card.booking,
.card.favourite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 0.4%;
    width: 24%;
    height: unset;
    padding: 0.5rem;
}
    .card.favourite > div {
        padding: 0.5rem;
    }

.card.booking {
    height: 12rem;
}
    .card.booking .card.booking {
        flex-direction: row;
        justify-content: center;
    }
        .card.booking .card.booking a {
            width: auto;
        }
            .card.booking .card.booking a .oi {
                color: var(--fontcolour);
            }

    .card.booking .alert {
        padding: 0;
        margin-bottom: 0;
        padding: 0.5rem;
        border: none;
        background-color: firebrick;
    }

    .card.booking .soldout {
        padding: 0.5rem;
        background-color: green;
    }


@media (max-width: 769px) {

    .side .celebrity,
    .side .club,
    .side .company,
    .side .event,
    .side .eventorganiser,
    .side .venue {
        /*display: none;*/
    }

    .side .sections-container {
        display: none;
    }
}

@media (min-width: 769px) {
    .card.booking {
        width: 250px;
    }
}


/* SIDE ENTITY */
.side .entity-header {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

/* HISTORY BUTTON */
.user-history {
    z-index: 20;
    position: relative;
}

    .user-history .buttons {
        position: sticky;
        /*top: 0.5rem;*/
        right: 1rem;
        /*z-index: 100;*/ /* must be greater than ".card-image-subtitle event" */
    }

    .user-history a.open,
    .user-history a.close {
        position: absolute;
        right: 0;
        background-color: var(--background);
        padding: 6px 0 0 6px;
    }

    .user-history a.close {
        top: -1.5rem;
        font-size: 3rem;
        color: #dc3545;
    }

        .user-history a.close:hover:after {
            top: 1rem;
        }

    .user-history span.oi {
        font-size: 2em;
        color: var(--logocolour2light);
    }

.pagelayout-manage .user-history .close {
    /*hide in Manage pages */
    display: none;
}

/* PAGELAYOUT - customised here as only direct elements can be customised in local css */

.pagelayout .main .banner img {
    width: 100%;
}

.pagelayout .main .card-tooltip {
    /*top: 0.5rem;
left: 0.5rem;
bottom: unset;*/
}

.pagelayout .main .banner .card-tooltip {
    left: 2.5rem;
}

.pagelayout .main .body {
    min-height: calc( 100vh - var(--headerLogoHeight)); /* because logo max-height is 65px */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

    .pagelayout .main .body h3 {
        margin-top: 1rem;
        color: var(--fontcolour);
    }

.pagelayout .side {
    display: block;
    width: 100%;
    position: unset;
    padding-left: 10px;
}

    .pagelayout .side h1 {
        margin-bottom: 2rem;
    }

.tabcontrol .btn-secondary,
.tabcontrol .btn-back {
    background-color: var(--background);
    border-color: var(--fontcolour);
    color: var(--fontcolour);
}

@media (max-width: 768px) {

    .side .user-history {
        /*hide in large screen */
        display: none;
    }

    .sidesubmenu.tabcontrol .btn-secondary,
    .sidesubmenu.tabcontrol .btn-back {
        background-color: var(--background);
        border-color: var(--primary);
        color: var(--fontcolour);
    }

    .sidesubmenu.tabcontrol .btn-link {
        background-color: #46c0f7;
        border-color: #46c0f7;
        color: #000;
        -webkit-text-decoration: none;
        text-decoration: none;
    }
}


@media (min-width: 769px) {
    /* PAGE LAYOUT */

    .main .user-history {
        /*hide in large screen */
        display: none;
    }

    .pagelayout .main {
        /*position: fixed;*/
        position: static;
        float: left;
        /*z-index: 0;*/
        overflow-y: scroll;
        height: calc( 100vh - var(--headerLogoHeight));
        width: 66%;
        max-width: 66%;
    }

        .pagelayout .main footer {
            max-width: 100%;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

    .pagelayout .side {
        /*position: fixed;*/
        position: static;
        float: right;
        /*z-index: 0;*/
        display: block;
        width: 34%;
        max-width: 34%;
        top: 66px;
        right: 0;
        padding-left: 0;
    }

        .pagelayout .side .cards-container.small .card {
            width: 50%;
            max-width: initial;
        }

            .pagelayout .side .cards-container.small .card .card-image img {
                width: 100%;
                height: 100%;
                max-height: 149px;
            }

    .pagelayout .copilot-button {
        display: block;
        z-index: 1000;
        position: absolute;
        top: calc( 5vh );
        left: calc( 65vw - 10px );
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid blue;
        background-color: var(--background);
        text-align: center;
    }
        .pagelayout .copilot-button span {
            position: absolute;
            top: 5px;
            right: 0;
            cursor:pointer;
            color: #3F88C5;
        }

        .pagelayout .copilot-button.tiptip:after,
        .pagelayout .copilot-button.tiptipLeft:after {
            top: 0;
            background-color: var(--background2);
        }
        .pagelayout .copilot-button.tiptip:after {
            left: 100%;
        }

    .pagelayout.side-hidden {
        left: unset;
        right: 0;
    }
        .pagelayout.side-hidden .main {
            /*position: fixed;*/
            position: static;
            float: left;
            /*z-index: 0;*/
            overflow-y: scroll;
            height: calc( 100vh - var(--headerLogoHeight));
            width: 100%;
            max-width: 100%;
        }

        .pagelayout.side-hidden .side {
            display: none;
        }
        .pagelayout.side-hidden .copilot-button {
            left: unset;
            right: -10px;
        }
        .pagelayout.side-hidden .cards-container.simplelist .card {
            width: 32%;
        }

    .pagelayout.pagelayout-manage .copilot-button {
        display: none;
    }

}

@media (min-width: 769px) {
    /* MANAGE PAGE LAYOUT */

    .pagelayout.pagelayout-manage .main {
        width: 85%;
        max-width: 85%;
        /*float: right;*/
    }

    .pagelayout.pagelayout-manage .side {
        left: 0;
        width: 15%;
        max-width: 15%;
        border-right: 1px solid #37a5e9;
    }

        .pagelayout.pagelayout-manage .side .cards-container.small .card {
            width: 50%;
            max-width: initial;
        }

            .pagelayout.pagelayout-manage .side .cards-container.small .card .card-image img {
                width: 100%;
                height: 100%;
                max-height: 149px;
            }

        .pagelayout.pagelayout-manage .side .user-history {
            display: none;
        }

    .pagelayout.pagelayout-manage .viewcomponent .sidesubmenu.tabcontrol {
        top: 10px;
    }

    .pagelayout.pagelayout-manage .sidesubmenu.tabcontrol {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 10px;
        right: 0;
        width: 15%;
        max-width: 15%;
        border-right: 1px solid #37a5e9;
    }

        .pagelayout.pagelayout-manage .sidesubmenu.tabcontrol .btn-secondary,
        .pagelayout.pagelayout-manage .sidesubmenu.tabcontrol .btn-back {
            background-color: var(--background);
            border-color: var(--background);
            color: var(--fontcolour);
        }

        .pagelayout.pagelayout-manage .sidesubmenu.tabcontrol .btn {
            text-align: left;
            border-radius: unset;
            width: 100%;
        }

            .pagelayout.pagelayout-manage .sidesubmenu.tabcontrol .btn .subtitle {
                font-style: italic;
                color: var(--fontcolour3);
                font-size: 0.85em;
            }

        .pagelayout.pagelayout-manage .sidesubmenu.tabcontrol .btn-link {
            background-color: var(--background);
            border-color: var(--background);
            color: var(--fontcolour);
            -webkit-text-decoration: none;
            text-decoration: none;
        }

    .pagelayout.pagelayout-manage footer.main_footer {
        flex-direction: column;
        position: absolute;
        bottom: 0;
        max-width: 15vw;
        padding-left: 0;
        padding-right: 0;
    }

}

/* PAGELAYOUT FOR LIST - customised here as only direct elements can be customised in local css */
        .pagelayout-list .main .banner img {
    width: 100%;
}

.pagelayout-list .main .card-tooltip {
    /*top: 0.5rem;
left: 0.5rem;
bottom: unset;*/
}

.pagelayout-list .main .banner .card-tooltip {
    /*left: 2.5rem;*/
}

.pagelayout-list .main .body {
    padding-left: 10px;
}

    .pagelayout-list .main .body h3 {
        margin-top: 1rem;
    }

.pagelayout-list .side {
    display: block;
    width: 100%;
    position: unset;
    padding-left: 10px;
}

    .pagelayout-list .side h1 {
        margin-bottom: 2rem;
    }

.cards-container.small.smaller .card,
.cards-container.small.smaller .card .card-body {
    margin: 0;
    padding: 0;
}

.main-header.vertical {
    display: flex;
    flex-wrap: wrap;
}
.main-header .banner,
.main-header .headertext {
    position: relative;
    width: 100%;
}

@media (max-width: 768px) {

    /* SMALLER */
    .cards-container.small.smaller {
        /*NO WRAP*/
        flex-wrap: nowrap;
    }

        .cards-container.small.smaller .card {
            height: 360px;
            height: 280px;
        }
            /* ONE LINE*/
            .cards-container.small.smaller .card .title {
                -webkit-line-clamp: 1;
            }
            /* VERTICAL IMAGE */
            .cards-container.small.smaller .card .card-image {
                max-height: 300px;
                height: 100%;
                /*width: auto;
            max-width: 100%;
            bottom: 0;*/
            }

                .cards-container.small.smaller .card .card-image img {
                    width: 100%;
                    height: 100%;
                    max-height: 100%;
                }
            /* HIDE */
            .cards-container.small.smaller .card .description,
            .cards-container.small.smaller .card .city,
            .cards-container.small.smaller .card .card-bottom {
                display: none;
            }
}

@media (min-width: 769px) {

    .pagelayout-list footer {
        width: 100%;
        padding-bottom: 1rem;
    }

    .pagelayout-list .maintitle {
        padding-left: 10px;
    }

    .main-header.vertical {
        flex-wrap: wrap;
    }
        .main-header.vertical > div {
            width: 50%;
            max-width: 50%;
        }
    .main-header .headertext {
        padding: 1rem;
        background-color: var(--background2);
    }

   .pagelayout-list .main {
        overflow-y: scroll;
        height: calc( 100vh - var(--headerLogoHeight));
        width: 66%;
    }

        /*.pagelayout-list .main footer.main_footer {
            width: 100%;
            padding-bottom: 1rem;
        }*/

        .pagelayout-list .main .main-header {
            display: flex;
            flex: 50%;
            padding-left: 10px;
        }

            .pagelayout-list .main .main-header .banner,
            .pagelayout-list .main .main-header .headertext {
                position: relative;
                width: 50%;
            }

            .pagelayout-list .main .main-header .headertext {
                padding-left: 10px;
            }

            .pagelayout-list .main .main-header.vertical {
            }

                .pagelayout-list .main .main-header.vertical .banner {
                    max-height: 400px;
                    width: unset;
                    min-width: 20%;
                    position: relative;
                    flex: 50%;
                }

                    .pagelayout-list .main .main-header.vertical .banner img {
                        width: 100%;
                        max-height: 100%;
                        width: unset;
                        margin-right: 0;
                        margin-left: auto;
                    }

    .pagelayout-list .side {
        display: block;
        position: fixed;
        width: 34%;
        max-width: 34%;
        top: 66px;
        right: 0;
        padding-left: 0;
    }

        .pagelayout-list .side .cards-container.small .card {
            width: 48%;
            max-width: initial;
        }

            .pagelayout-list .side .cards-container.small .card .card-image img {
                width: 100%;
                height: 100%;
                min-height: 100%;
                max-height: 149px;
            }

            .pagelayout-list .side .cards-container.small .card.vertical .card-image img {
                width: 100%;
                height: 100%;
                max-height: 100%;
            }
    /* SMALLER */
    .cards-container.small.smaller .card {
        height: 360px;
        height: 280px;
    }
        /* ONE LINE*/
        .cards-container.small.smaller .card .title {
            width: 101%;
            overflow: hidden;
            background-color: var(--background3);
            -webkit-line-clamp: 2;
        }
        /* VERTICAL IMAGE */
        .cards-container.small.smaller .card .card-image {
            max-height: 300px;
            height: 100%;
            /*width: auto;
            max-width: 100%;
            bottom: 0;*/
        }

        .cards-container.small.smaller .card.event .card-image {
            max-height: 280px;
        }

        .cards-container.small.smaller .card .card-image img {
            width: 100%;
            height: 100%;
            max-height: 100%;
        }
        /* HIDE */
        .cards-container.small.smaller .card .description,
        .cards-container.small.smaller .card .city,
        .cards-container.small.smaller .card .card-bottom {
            display: none;
        }
}

.recurrent-list {
}

    .recurrent-list .table {
        margin-bottom: 0;
    }

    .recurrent-list h3 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .recurrent-list .booking-summary .warning {
        padding: 0 1rem;
        margin-bottom: 0;
    }


.booking-summary {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
}

    .booking-summary .alert,
    .booking-summary .warning,
    .booking-summary .soldout {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        padding: 1rem 1rem 0;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
    }

    .booking-summary .alert {
        background-color: firebrick;
    }

    .booking-summary .warning {
        color: var(--fontcolour); /*#000;*/
        background-color: var(--background2); /*lightyellow;*/
    }

        .booking-summary .alert span,
        .booking-summary .warning span {
            white-space: nowrap;
        }

    .booking-summary .soldout {
        background-color: green;
    }

.booking-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .booking-form.two-cols > * {
        width: 100%;
    }

    .booking-form.four-cols > * {
        width: 100%;
    }

    .booking-form fieldset {
        /*min-height: -webkit-fill-available;*/
        overflow-x: scroll;
        margin-left: 2px;
        margin-right: 2px;
    }

    .booking-form .form-horizontal > .form-group {
        margin: 2px;
    }

    .booking-form .form-vertical {
        flex-direction: column;
    }

        .booking-form .form-vertical > .form-group {
            margin: 2px;
        }

    .booking-form a,
    .booking-form .btn-link {
        color: #3F88C5;
    }

@media (max-width: 768px) {
    .booking-form fieldset {
        height: 100%;
        overflow-y: scroll;
    }
}
@media (min-width: 769px) {
    .booking-form {
        flex-direction: row;
    }

        .booking-form fieldset {
            height: 100%;
            overflow-y: scroll;
        }

       .booking-form.one-col > * {
            width: 100%;
        }

        .booking-form.two-cols > * {
            width: 50%;
        }

        .booking-form.four-cols > * {
            width: 25%;
        }
}

.cards-container.items label {
    flex: unset;
    width: 80%;
    padding-left: 0.3rem;
}

.cards-container.items input,
.cards-container.items .data {
    flex: unset;
    width: 19%;
}

.cards-container.notgrid {
    flex-direction: column;
}

    .cards-container.notgrid * {
        font-size: 0.9rem;
    }

    .cards-container.notgrid label {
        line-height: 0;
        top: 20px;
        position: relative;
        padding-left: 0.2rem;
    }

    .cards-container.notgrid .btn {
        font-size: 0.8rem;
        padding: 0.3rem 0.5rem;
    }

    .cards-container.notgrid .title {
        text-align: left;
    }

    .cards-container.notgrid .card {
        flex-direction: row;
        width: 99%;
        height: unset;
        overflow: hidden;
    }

        .cards-container.notgrid .card .card-text,
        .cards-container.notgrid .card .buttons {
            width: 19%;
            padding-left: 0.2rem;
        }

    .cards-container.notgrid .card {
        background-color: var(--background3);
        border: none;
    }

        .pagelayout-manage .section .cards-container.notgrid .card:hover,
        .cards-container.notgrid .card:hover .card-text {
            background-color: #b3d5fc;
            color: black !important;
        }

.cards-container.media {
}

    .cards-container.media .modal {
        display: block;
        background: rgb(70,70,70,0.70);
    }

        .cards-container.media .modal .modal-dialog {
            top: 10%;
            border-radius: 2rem;
            margin: 0rem auto;
        }

        .cards-container.media .modal .modal-content {
            background-color: var(--background2);
            border-color: var(--fontcolour);
        }

        .cards-container.media .modal .modal-dialog .modal-body {
            height: 500px;
            max-height: 500px;
            display: flex;
            justify-content: space-between;
        }

            .cards-container.media .modal .modal-dialog .modal-body .modal-button-left,
            .cards-container.media .modal .modal-dialog .modal-body .modal-button-right {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2rem;
            }

        .cards-container.media .modal .modal-dialog .modal-header,
        .cards-container.media .modal .modal-dialog .modal-footer {
            margin: 0;
            padding: 0 0 0 1rem;
        }

            .cards-container.media .modal .modal-dialog .modal-header > *,
            .cards-container.media .modal .modal-dialog .modal-footer > * {
                margin: 0;
            }

        .cards-container.media .modal .modal-dialog button {
            width: unset;
            margin: 0.3rem;
        }

            .cards-container.media .modal .modal-dialog button.close {
                margin-left: auto;
                font-size: 3rem;
                color: #dc3545;
            }

            .cards-container.media .modal .modal-dialog button.move {
                margin-left: auto;
                font-size: 3rem;
                color: #3F88C5;
            }

@media (max-width: 769px) {
    .cards-container.media .modal {
        display: none;
    }
}

/* VIDEOS */
.videos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.video-wrapper {
    text-align: center;
    width: 250px;
    max-width: 100%;
}

.videotitle {
    font-size: 1.3rem;
}

.videoclip {
    position: relative;
    width: 100%;
    max-height: 315px;
    padding: 56.25% 0 0 0;
}

    .videoclip iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.card.media .videoclip {
    position: absolute;
    left: 0;
}

@media (max-width: 769px) {
    .video-wrapper {
        width: 100%;
        max-width: 100%;
    }
}

.cards-container.simplelist {
}

    .cards-container.simplelist .content {
        padding-top: 0.5rem;
        width: calc( 100% - 9rem);
        max-width: calc( 100% - 9rem);
    }

    .cards-container.simplelist .card {
        width: 49%;
        height: unset;
        max-width: 100%;
        padding: 0.5rem;
        text-decoration: none;
        color: var(--fontcolour);
    }
        .cards-container.simplelist .card .card-container {
            display: flex;
            flex-direction: row;
            width: 100%;
        }
            .cards-container.simplelist .card .card-container > div {
                padding: 0.5rem;
            }

        /*.cards-container.simplelist card .content {
    width: 100%;
    padding: 0 1rem;
}*/

        .cards-container.simplelist .card .image-container {
            position: relative;
            width: 9rem;
            height: 10rem;
            overflow: visible;
        }

        .cards-container.simplelist .card .image {
            position: relative;
            width: 8rem;
            max-width: 8rem;
            height: 8rem;
            max-height: 8rem;
            overflow: hidden;
            margin: 0.25rem 0.5rem 0.25rem 0;
            border-bottom-left-radius: 8px;
            border-radius: 8px;
        }
            .cards-container.simplelist .card .image img {
                height: 8rem;
                width: 8rem;
                margin-bottom: 0.5rem;
            }

        .cards-container.simplelist .card .icon {
            width: 6rem;
            max-height: 6rem;
            padding: 1rem;
        }

        .cards-container.simplelist .card .title {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            font-size: 1.2rem;
            font-weight: normal;
            /*background-color: var(--background);*/
        }

        .cards-container.simplelist .card .text {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

            .cards-container.simplelist .card .text.text-3 {
                -webkit-line-clamp: 3;
            }

        .cards-container.simplelist .card .date {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: var(--logocolour) !important;
            /*background-color: var(--background);*/
        }
            .cards-container.simplelist .card .date.passed {
                color: var(--logocolour2light) !important;
                color: #6d6d6d;
            }

    .cards-container.simplelist.bannerlist .card {
        width: 100%;
        /*background-color: #14222d;*/ /*#3f88c52e*/
    }
        .cards-container.simplelist.bannerlist .card * {
            background-color: transparent;
        }

    .cards-container.simplelist .status-event.cancelled,
    .cards-container.simplelist .status-event.finaldate,
    .cards-container.simplelist .status-event.postponed,
    .cards-container.simplelist .status-event.soldout,
    .cards-container.simplelist .vertical .status-event.cancelled,
    .cards-container.simplelist .vertical .status-event.finaldate,
    .cards-container.simplelist .vertical .status-event.postponed,
    .cards-container.simplelist .vertical .status-event.soldout {
        top: -10%;
        left: -15%;
        border-radius: 0;
        width: 9rem;
        height: 3rem;
        font-size: 0.8rem;
    }

.search-panel .card {
    width: 100% !important;
}

@media (max-width: 769px) {
    .cards-container.simplelist .card {
        width: 100%;
    }
}

fieldset {
    overflow: hidden;
    margin-left: -8px;
    margin-right: -8px;
    margin-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    border: solid #3F88C5 1px;
    border-radius: 5px 0 0 5px;
    background-color: var(--background2);
}

/* FORM */
input[type=checkbox] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
    transform: scale(2);
    margin-left: 0.5rem;
    width: unset !important;
    margin-top: 0.5rem !important;
}

.form-horizontal {
    display: flex;
    flex-direction: row;
}

    .form-horizontal > .form-group,
    .form-horizontal > button {
        margin: 2rem;
    }

@media (max-width: 769px) {
    .form-horizontal {
        flex-direction: column;
    }
}

.form-buttons {
    position: sticky;
    top: 0px;
    z-index: 100;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
    background-color: unset;
    opacity: 1;
}

.form-group {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5rem;
    padding-right: unset;
    background: var(--background2);
}

    .form-group:last-child {
        margin-bottom: 0;
    }

    .form-group .datarow {
        display: flex;
        flex-direction: row;
        margin-top: 0.5rem;
        font-size: 1rem;
        font-weight: normal;
    }

        .form-group .datarow div {
            margin-left: 0.5rem;
        }

    .form-group .data {
        flex: 3;
        display: block;
        /*margin-top: 3px;*/
        background-color: var(--background2);
        padding: 0.25rem 0.5rem 0.25rem;
    }
    .form-group span.data {
        padding: 0 0.5rem;
    }

        .form-group .data .h4 {
            font-size: 1rem;
            font-weight: bold;
        }

        .form-group .data.radiobuttons {
            display: flex;
            overflow-x: auto;
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }
            /* Hide scrollbar for Chrome, Safari and Opera */
            .form-group .data.radiobuttons::-webkit-scrollbar {
                display: none;
            }

            .form-group .data.radiobuttons .group {
                display: flex;
                margin: 0 0.5rem;
                overflow-x: unset;
            }

                .form-group .data.radiobuttons .group label {
                    margin-left: 0.3rem;
                    font-weight: unset;
                }

            .form-group .data.radiobuttons.disabled input {
                pointer-events: none;
                opacity: 0.5;
            }

            .form-group .data.radiobuttons.disabled label {
                pointer-events: none;
            }

    .form-group.help .data {
        background-color: unset;
        padding: 0;
    }

    .form-group label,
    .form-group label *,
    .form-group.help label,
    .form-group.help label * {
        flex: 1;
        display: inline-block;
        font-weight: 600;
        font-size: 1em;
        margin-top: 3px;
    }

        .form-group.help label,
        .form-group.help label * {
            color: var(--fontcolour);
            font-style: normal;
        }

            .form-group.help label button:hover {
                color: var(--background);
            }

        .form-group label.right-inline {
            text-align: right;
            padding-right: 8px;
            padding-left: 10px;
            width: auto;
        }

    .form-group .input-control {
        flex: 3;
        display: block;
        min-width: fit-content;
        max-width: 100%;
        margin-bottom: 3px;
        margin-right: 8px;
        padding: 4px;
        /*margin-top: -4px;*/
        border-radius: 5px; /* 0 0 5px*/
    }

        .form-group .input-control.mr-0 {
            margin-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .form-group .input-control .input-control {
            margin-bottom: 0px;
            display: inline;
            border: none;
        }

    .form-group div.input-control {
        padding-left: 0px;
    }

    .form-group.form-image .data,
    .form-group.form-icon .data {
        position: relative;
        display: flex;
        margin-left: -5px;
    }

        .form-group.form-image .data.editing {
            display: block;
            /*max-height: 300px;*/
        }

            .form-group.form-image .data.editing img {
                max-height: 80%;
            }

        .form-group.form-image .data .oi {
            color: var(--fontcolour);
        }

        .form-group.form-icon .data .oi {
            flex: 3;
            color: #000;
        }

        .form-group.form-icon .data .icons-grid {
            display: flex;
            flex-wrap: wrap;
        }

            .form-group.form-icon .data .icons-grid .icon {
                text-align: center;
                cursor: pointer;
            }

                .form-group.form-icon .data .icons-grid .icon.selected {
                    color: var(--fontcolour);
                    background-color: var(--highlight);
                }

.form-vertical .form-group {
    display: flex;
    flex-direction: column;
}

select {
    height: fit-content;
}

textarea {
    line-height: 1.5;
}

.form-control,
.form-control:focus,
select,
option,
input,
textarea {
    background-color: var(--background2);
    color: var(--fontcolour);
    border: var(--fontcolour) solid 1px;
    border-radius: 0.25rem;
}

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        background-color: var(--background2);
        color: var(--fontcolour);
    }

        input:-webkit-autofill,
        input:-webkit-autofill:focus {
            transition: background-color 600000s 0s, color 600000s 0s;
        }



@media (max-width: 768px) {
    .form-group {
        flex-direction: column;
    }

        .form-group.form-icon {
            flex-direction: row;
        }

            .form-group.form-icon .oi {
                margin-left: 10px;
            }

        .form-group .input-control {
            margin-top: 2px;
        }

        .form-group label.right-inline {
            text-align: left;
            padding-right: 0;
            padding-left: 0;
        }

    select.form-control.selectpicker {
        font-size: 1rem; /*0.5em;*/
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.fullwidth .data div,
.fullwidth .data h4 {
    background-color: var(--background2);
    padding: 0.25rem 0.5rem;
}

@media (min-width: 768px) {

    .fullwidth > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    /*.fullwidth .fullwidth textarea {
line-height: 1.5;
}*/

    .form-group label {
        max-width: 25%;
    }

        .form-group label.btn {
            max-width: 100%;
        }

    .form-group.form-vertical label {
        max-width: unset;
    }

    .many-cols {
        display: flex;
    }
        .many-cols > div:not(:first-child) {
            border-left: solid 2px var(--background);
        }
        .many-cols div.no-border {
            border: none;
        }

        .many-cols .form-group label,
        .many-cols .form-group .data,
        .many-cols .form-group .input-control,
        .many-cols .form-group .buttons {
            flex: 1;
            width: 50%;
            max-width: 50%;
        }

        .many-cols .form-group:not(:first-child) {
            padding-left: 8px;
            padding-right: 8px;
        }

        .many-cols .form-group .input-control:last-child {
            margin-right: 0;
        }

        .many-cols .form-group.date-group .input-control .input-control {
            margin-right: 0;
        }

        .many-cols .form-group.date-group .input-control select {
            width: 20%;
        }

        .many-cols .form-group.date-group .input-control .input-control[type="date"] {
            width: 50%;
        }

        .many-cols.one-col > * {
            width: 100%;
        }

        .many-cols.two-cols > * {
            width: 50%;
        }

        .many-cols.three-cols > * {
            width: 33%;
        }

        .many-cols.four-cols > * {
            width: 25%;
        }

        .many-cols .fullwidth {
            width: 100%;
        }

        .many-cols label {
            font-weight: 600;
        }

    .cards-container.items label {
        flex: unset;
        width: 80%;
        padding-left: 0.3rem;
    }

    .cards-container.items input,
    .cards-container.items .data {
        flex: unset;
        width: 19%;
    }
}


.section-list .feedback {
    display: flex;
    flex-flow: wrap;
}

    .section-list .feedback.summary {
        flex-direction: column;
        flex-flow: wrap;
    }

    .section-list .feedback .feedback-line {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        flex-direction: column;
        flex-grow: 1;
        max-width: 24%;
        width: 24%;
    }

        .section-list .feedback .feedback-line > div {
            margin-left: 0rem;
        }

            .section-list .feedback .feedback-line > div > div.text {
                margin-left: 5px;
            }

        .section-list .feedback .feedback-line .title {
            font-weight: bold;
            font-size: unset;
            padding-left: 5px;
        }

        .section-list .feedback .feedback-line._1 .title {
            background-color: #dc3545;
        }

        .section-list .feedback .feedback-line._2 .title {
            background-color: #ff8807;
            color: #000;
        }

        .section-list .feedback .feedback-line._3 .title {
            background-color: #00e298;
            color: #000;
        }

        .section-list .feedback .feedback-line.card {
            height: unset;
        }

.question {
    font-style: italic;
    color: var(--fontcolour3);
}

.processed {
    text-align: center;
    background-color: #44BBA4;
    color: var(--background);
}

.pending {
    text-align: center;
    background-color: #f4af65;
    color: var(--background);
}

.reply {
    font-style: italic;
    color: var(--fontcolour3);
}

@media (max-width: 768px) {
    .section-list .feedback {
        flex-direction: column;
    }

        .section-list .feedback .feedback-line {
            max-width: 100%;
            border: 1px solid #ccc
        }

        .section-list .feedback .feedback-button {
            display: flex;
        }

            .section-list .feedback .feedback-button > div {
                margin-left: 1rem;
            }

        .section-list .feedback.summary .feedback-line {
            display: flex;
            flex-direction: row;
        }

            .section-list .feedback.summary .feedback-line > div {
                margin-left: 1rem;
            }

    .section-list .feedback {
        flex-direction: row;
        flex-grow: 1;
        flex-wrap: wrap;
    }

        .section-list .feedback .feedback-line {
            flex-direction: column;
            flex: 1 0 21%;
            border: #ccc 1px solid
        }
}

.section-form {
    position: relative;
}

    .section-form .form-group:not(:first-child) {
        border-top: solid 1px var(--background);
    }

    .section-form.feedback .form-group .data .h4 {
        font-size: 1rem;
        font-weight: unset;
    }

    .section-form .form-body {
        position: relative;
    }

    .section-form .btn-preview {
        position: absolute;
        top: 0;
        right: 0;

    }

    .section-form .form-body .card-preview {
        position: absolute;
        top: 0;
        right: 0;
    }

.side .sections-container,
.modal-entity-side .sections-container {
    padding: 1rem;
}

.sections-login {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .sections-login .section .form-buttons,
    .sections-login .section button,
    .sections-login .section a {
        width: 100%;
    }

    .sections-login .section form {
        margin: 1rem;
    }

    .sections-login .section label {
        flex: 2;
        max-width: unset;
    }

    .sections-login .section .form-group .data {
        margin-top: unset;
        background-color: unset;
        padding: unset;
    }

    .sections-login .section .button {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .sections-login .section .button img {
            width: 2.5rem;
            background-color: #fff;
            border-top-left-radius: 0.35rem;
            border-bottom-left-radius: 0.35rem;
        }

        .sections-login .section .button button {
            width: calc(100% - 2.5rem);
            height: 2.5rem;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            font-weight: 600;
        }

.form-group .data.data-bool {
    max-width: 40px;
}

@media (min-width:769px) {
    .sections-login .section {
        width: 50%;
    }
}

.pagelayout-manage .nav-link {
    color: var(--fontcolour);
    padding: .1rem .5rem;
}

    .pagelayout-manage .nav-link.active {
        color: var(--fontcolour);
        background-color: var(--logocolour2light);
    }

@media (min-width: 769px) {
    .page-event-title .date {
        /*display: none;*/
    }
}

.right {
    position: absolute;
    right: 0;
}

/* Special settings */
.blazored-typeahead__results {
    background: var(--background2);
}

.blazored-typeahead__selected-item,
.blazored-typeahead__selected-item-highlighted {
    background: var(--background3);
    color: var(--fontcolour);
}

/* Calendar */
.calendartitle {
    display: flex;
    justify-content: space-between;
}

    .calendartitle div {
        margin: 0.5rem 0.25rem;
        /*line-height: 2rem;*/
    }

.calendar {
    width: 100%;
}

    .calendar header {
        display: flex;
        align-items: center;
        font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
        justify-content: space-between;
        /*margin-bottom: 1rem;*/
        background: var(--background);
        color: var(--fontcolour);
        text-align: center;
    }

        .calendar header .nav {
            font-size: 1rem;
            color: var(--btnsecondary);
        }

            .calendar header .nav:hover {
                color: var(--logocolour);
                cursor: pointer;
            }

    .calendar .calendar-body {
        padding: 0 2rem;
    }

    .calendar ul,
    .calendar ol {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 1em;
        margin: 0 auto;
        max-width: 64em;
        padding: 0;
    }

    .calendar li {
        display: flex;
        align-items: center;
        justify-content: center;
        list-style: none;
        margin-left: 0;
        font-size: calc(16px + (21 - 16) * ((100vw - 300px) / (1600 - 300)));
        color: var(--fontcolour);
    }

    .calendar ul.weekdays {
        /*margin-bottom: 1em;*/
    }

        .calendar ul.weekdays li {
            height: 4vw;
        }

    .calendar ol.day-grid li {
        position: relative;
        background-color: var(--background);
        color: var(--fontcolour);
        border: 1px solid var(--fontcolour);
        height: 3rem;
        max-height: 4rem;
    }

        .calendar ol.day-grid li.selected {
            background-color: var(--highlighthover);
            color: var(--background);
            font-weight: bold;
        }

            .calendar ol.day-grid li.selected a {
                text-decoration: none;
                color: var(--background);
            }

        .calendar ol.day-grid li.month-prev,
        .calendar ol.day-grid li.month-next {
            background-color: var(--background2);
        }

        .calendar ol.day-grid li.month-prev,
        .calendar ol.day-grid li.month-next {
            color: var(--fontcolour);
        }
        /*.calendar ol.day-grid li.empty {
    background-color: var(--background2);
}*/
        .calendar ol.day-grid li.empty {
            color: #3f5974;
        }

        .calendar ol.day-grid li:not(.selected) a {
            text-decoration: none;
            color: var(--fontcolour);
        }

        .calendar ol.day-grid li .tooltip {
            /*z-index: 1;*/
            visibility: hidden;
            position: absolute;
            top: 3rem;
            left: 1rem;
            right: auto;
            padding: 1rem;
            text-align: center;
            white-space: nowrap;
            font-size: inherit;
            background-color: var(--background2);
            color: var(--fontcolour);
            border: var(--fontcolour) solid 1px;
            border-radius: 6px;
            opacity: unset;
            pointer-events: none;
        }

            .calendar ol.day-grid li .tooltip.left {
                left: auto;
                right: 1rem;
            }

            .calendar ol.day-grid li .tooltip.top {
                top: unset;
                bottom: 3rem;
            }

            .calendar ol.day-grid li .tooltip::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }

        .calendar ol.day-grid li.selected .tooltip {
            /*            background-color: var(--highlighthover);
    color: var(--background)
*/
        }

        .calendar ol.day-grid li:hover .tooltip {
            visibility: visible;
        }

        .calendar ol.day-grid li.today {
            border-width: 1.5px;
        }

    /*.calendar ol.day-grid li:nth-child(1),
.calendar ol.day-grid li:nth-child(2),
.calendar ol.day-grid li:nth-child(3),
.calendar ol.day-grid li:nth-child(34),
.calendar ol.day-grid li:nth-child(35) {
background-color: var(--background);
}*/

    .calendar ul.weekdays abbr[title] {
        border: none;
        font-weight: 800;
        text-decoration: none;
    }
    /* CALENDAR BG COLOURS */
    .calendar ol.day-grid li {
        background-color: var(--logocolour2light);
        color: var(--fontcolour);
    }

        .calendar ol.day-grid li.selected {
            background-color: var(--highlighthover);
            color: var(--background);
        }

            .calendar ol.day-grid li.selected a {
                color: #fff;
            }

        .calendar ol.day-grid li:not(.selected) a {
            color: var(--fontcolour);
        }

        .calendar ol.day-grid li.month-prev,
        .calendar ol.day-grid li.month-next {
            background-color: var(--logocolour2light);
            color: var(--fontcolour);
        }

        .calendar ol.day-grid li.empty {
            background-color: var(--background2);
            color: var(--fontcolour);
        }

        .calendar ol.day-grid li.today {
            background-color: var(--btnselected);
            font-weight: bold;
        }

            .calendar ol.day-grid li.today,
            .calendar ol.day-grid li.today a,
            .calendar ol.day-grid li.today:not(.selected) a {
                border-color: var(--fontcolour);
                color: var(--fontcolour);
            }

    .calendar.mycalendar ol.day-grid li {
        background-color: var(--logocolourlight);
        color: #000;
    }

        .calendar.mycalendar ol.day-grid li.selected {
            background-color: var(--highlighthover);
            color: #fff;
        }

            /*.calendar.mycalendar ol.day-grid li.selected a {
                color: #000;
            }*/

        .calendar.mycalendar ol.day-grid li:not(.selected) a {
            color: #000;
        }

        .calendar.mycalendar ol.day-grid li.month-prev,
        .calendar.mycalendar ol.day-grid li.month-next {
            background-color: var(--logocolourlight);
            color: #000;
        }

        .calendar.mycalendar ol.day-grid li.empty {
            background-color: var(--background);
            color: #3f5974;
        }

        .calendar.mycalendar ol.day-grid li.today {
            background-color: var(--btnselected);
        }

            .calendar.mycalendar ol.day-grid li.today,
            .calendar.mycalendar ol.day-grid li.today a,
            .calendar.mycalendar ol.day-grid li.today:not(.selected) a {
                border-color: var(--fontcolour);
                color: var(--fontcolour);
            }

@media all and (max-width: 800px) {
    .calendar ul,
    .calendar ol {
        grid-gap: .25em;
    }
}

.sections-subscribe {
}

.PricingTable-grid {
    -ms-grid-columns: (minmax(312px,312px))[auto-fit];
    grid-gap: 8px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(312px,312px));
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
}

    .PricingTable-grid .buttons .btn {
        width: 100%;
    }

.PriceColumn {
    -webkit-animation: slideUp .4s ease-in-out;
    animation: slideUp .4s ease-in-out;
    -webkit-animation-delay: calc(var(--pt-animate-in-order)*.2s);
    animation-delay: calc(var(--pt-animate-in-order)*.2s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    border-radius: 12px;
    color: #ffffff;
    /*opacity: .01;*/
    padding: 34px 36px 28px;
    width: 312px;
}

    .PriceColumn.is-highlight {
        -ms-flex-item-align: start;
        -webkit-align-self: flex-start;
        align-self: flex-start;
        background-color: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.2);
        margin-top: -4px;
    }

.PriceColumn-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.PriceColumn-title {
    font-weight: 600;
    font-size: 20px;
}

.PriceColumn-description {
    opacity: .7;
    font-size: 12px;
    margin-bottom: 2rem;
}

.PriceColumn-priceContainer {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 2rem;
}

.PriceColumn-price {
    margin-right: 4px;
    font-weight: 700;
    font-size: 40px;
}

.PriceColumn-interval {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    opacity: .7;
    font-size: 13px;
}

.noborder {
    border: unset;
}

.localized {
    text-decoration: underline;
    text-decoration-color: red;
}

    .localized:hover {
        color: red;
    }

.localizedPopup {
    z-index: 100;
    position: fixed;
    right: -10px;
    top: 57.9861px;
    /*min-width: 200px;*/
    /*max-width: 400px;*/
    padding: 0 0 0 5px;
    text-align: left;
    background-color: var(--background2);
    color: var(--fontcolour);
    border: solid 1px var(--fontcolour);
}

    .localizedPopup .modal {
        position: fixed !important;
        top: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        background: rgb(25,25,25,0.25);
    }

        .localizedPopup .modal.show {
            display: block;
        }

        .localizedPopup .modal .modal-content {
            top: 0;
            height: calc( 100vh - var(--headerLogoHeight) );
            max-height: calc( 100vh - var(--headerLogoHeight) );
        }

            .localizedPopup .modal .modal-content,
            .localizedPopup .modal .modal-content * {
                background-color: var(--background);
                border-color: var(--fontcolour);
            }

                .localizedPopup .modal .modal-content .btn-danger {
                    color: #fff;
                    background-color: #dc3545;
                    border-color: #dc3545;
                }

        .localizedPopup .modal .modal-dialog {
            top: 10%;
            width: 100%;
            max-width: 100%;
            height: 100%;
            max-height: 100%;
            margin: 0;
            border-radius: 2rem;
        }

            .localizedPopup .modal .modal-dialog button {
                width: unset;
                margin: 0.3rem;
            }

                .localizedPopup .modal .modal-dialog button.close {
                    font-size: 3rem;
                    color: #dc3545; /*var(--fontcolour)*/
                }

            .localizedPopup .modal .modal-dialog .modal-header {
                justify-content: unset;
                margin: unset;
                padding: 0rem 1rem;
            }

                .localizedPopup .modal .modal-dialog .modal-header .modal-title {
                    max-width: 80%;
                }

                .localizedPopup .modal .modal-dialog .modal-header .oi {
                    font-size: 2.2rem;
                    cursor: unset;
                    pointer-events: none;
                }

                .localizedPopup .modal .modal-dialog .modal-header button.close {
                    top: 0;
                    right: 0;
                    bottom: unset;
                    left: unset;
                }

            .localizedPopup .modal .modal-dialog .modal-body {
                margin: unset;
                /*height: 250px;
        max-height: 450px;*/
            }

                .localizedPopup .modal .modal-dialog .modal-body * {
                    position: relative;
                }

                .localizedPopup .modal .modal-dialog .modal-body .form-group label {
                    flex: 3;
                    margin-top: 2px;
                    margin-right: 1rem;
                }

            .localizedPopup .modal .modal-dialog .modal-footer {
                position: relative;
            }

                .localizedPopup .modal .modal-dialog .modal-footer .footer-text {
                    position: absolute;
                    font-size: 1rem;
                    font-weight: normal;
                    margin-right: 4rem;
                }

                .localizedPopup .modal .modal-dialog .modal-footer button.close {
                    bottom: -0.75rem;
                    right: 0;
                    top: unset;
                    left: unset;
                }

            .localizedPopup .modal .modal-dialog .form-group label,
            .localizedPopup .modal .modal-dialog .data {
                font-size: 1rem;
                margin-top: 3px;
            }

                .localizedPopup .modal .modal-dialog .data,
                .localizedPopup .modal .modal-dialog .data div {
                    margin: unset;
                    padding: unset;
                    font-size: 1rem;
                    font-weight: normal;
                }

            .localizedPopup .modal .modal-dialog textarea {
                margin: unset;
                font-size: 1rem;
                font-weight: normal;
            }

.help-translators ul {
    list-style: square;
    margin-left: 1rem;
}

    .help-translators ul li {
        list-style: square;
        margin-left: 2rem;
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
    }

.help-translators p {
    margin-left: 1rem;
    margin-right: 0.8rem;
    margin-top: 0.3rem;
    margin-bottom: 0.1rem;
}

.translator-card {
    width: 265px;
}

.nav-item {
    display: flex;
    flex-direction: row;
}

tr.selected {
    background-color: #1b3530;
}

.change-history-selected {
    background-color: var(--fontcolour);
    color: var(--background);
}

.highlight.help {
    font-style: italic;
    color: var(--fontcolour3);
    font-size: 0.85em;
}

/* TOOLTIP */
.column1 {
    background-color: blue;
    text-align: right;
    padding: 3px;
    margin: 1px;
    color: white;
    display: inline-block;
    position: relative;
}

.tiptipCard {
    position: unset !important;
}

.tiptip,
.tiptipLeft,
.tiptipItsme,
.tiptipVibs,
.tiptipHelp,
.tiptipDate,
.tiptipDateLeft,
.tiptipCardLeft {
    position: relative;
}

    .tiptip:not(.notiptip):after,
    .tiptipLeft:not(.notiptip):after,
    .tiptipItsme:not(.notiptip):after,
    .tiptipVibs:not(.notiptip):after,
    .tiptipHelp:not(.notiptip):after,
    .tiptipDate:not(.notiptip):after,
    .tiptipDateLeft:not(.notiptip):after,
    .tiptipCard:not(.notiptip):after,
    .tiptipCardLeft:not(.notiptip):after {
        content: attr(aria-label);
        z-index: 1000;
        position: absolute;
        top: -20px;
        left: 50%;
        background-color: var(--background-cardbottom); /*#575757 #00000070 var(--background2);*/
        color: var(--fontcolour);
        /*background-color: gray;
    color: var(--background);*/
        padding: 0 5px;
        display: none;
        font-size: 1.2rem;
        width: 100%;
        max-width: 100%;
        min-width: max-content;
        font-family: var(--fontfamily);
    }

    .tiptipVibs:not(.notiptip):after {
        font-size: 1.2rem;
    }

    .tiptipLeft:after {
        /*left: -100%;*/
        right: 100% !important;
        left: unset !important;
    }

    .tiptip:not(.notiptip):hover:after,
    .tiptipLeft:not(.notiptip):hover:after,
    .tiptipItsme:not(.notiptip):hover:after,
    .tiptipVibs:not(.notiptip):hover:after,
    .tiptipHelp:not(.notiptip):hover:after,
    .tiptipDate:not(.notiptip):hover:after,
    .tiptipDateLeft:not(.notiptip):hover:after,
    .tiptipCard:not(.notiptip):hover:after,
    .tiptipCardLeft:not(.notiptip):hover:after {
        display: block;
    }

    .tiptipItsme:not(.notiptip):after,
    .tiptipItsme:after {
        top: unset !important;
        left: 90%;
        bottom: 0 !important;
        padding: 5px !important;
    }

    .tiptipVibs:after {
        top: unset !important;
        bottom: 0 !important;
        padding: 5px !important;
    }

    .tiptipHelp:after {
        top: unset !important;
        bottom: 0 !important;
        padding: 5px !important;
    }
    .tiptipHelp:not(.notiptip):hover:after,
    .tiptipHelp:after {
        background-color: var(--background);
    }

    .tiptipDate:after,
    .tiptipDateLeft:after {
        top: -120% !important;
        padding: 5px !important;
    }

    .tiptipCard:after,
    .tiptipCardLeft:after {
        top: 50% !important;
        left: 0% !important;
        padding: 5px !important;
        min-width: unset !important;
    }

    .tiptipDateLeft:after {
        left: -200% !important;
    }

/* RANKING IMAGE COLOURS*/
.rank {
    position: relative;
    height: 2.2rem;
    width: 2.2rem;
}

    .rank.buttons {
        position: absolute;
        bottom: 1px;
        width: 100%;
    }

    .rank .rank-value {
        position: absolute;
        top: 0.45rem;
        left: 0.85rem;
    }

    .rank .svg-icon {
        position: absolute;
        height: 2.2rem !important;
        width: 2.2rem !important;
    }

    .rank.rank-1 .svg-icon > path {
        color: var(--logocolour);
    }

.club .rank.rank-1 .svg-icon > path {
    color: var(--club);
}

.celebrity .rank.rank-1 .svg-icon > path {
    color: var(--celebrity);
}

.company .rank.rank-1 .svg-icon > path {
    color: var(--company);
}

.event .rank.rank-1 .svg-icon > path {
    color: var(--event);
}

.eventorganiser .rank.rank-1 .svg-icon > path {
    color: var(--eventorganiser);
}

.venue .rank.rank-1 .svg-icon > path {
    color: var(--venue);
}

/* CHART */
.chart-legend,
.chart-legend .legend-item {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    margin: 0 1rem;
    color: #fff;
}

    .chart-legend .legend-color {
        font-size: 2rem;
        position: relative;
        top: -1rem;
    }
/*.my-component canvas {
width: 100% !important;
height: 75vh !important;
}*/

/*ITS menu ICON*/
.itsme {
    display: block;
    overflow: visible;
    width: 3rem;
    max-height: 3rem;
    cursor: pointer;
}

    .itsme .itsme-icon svg {
        width: 100%;
    }

    .itsme .itsme-icon .colored1 {
        fill: var(--logocolour2light);
    }

    .itsme .itsme-icon .colored2 {
        fill: var(--background);
    }

    .itsme:hover {
    }

        .itsme:hover .itsme-icon .colored1 {
            fill: var(--logocolourlight);
        }

        .itsme:hover .itsme-icon .colored2 {
            fill: #000;
        }

.card.notification.notread .icon .itsme .itsme-icon .colored1,
.view.notification .itsme .itsme-icon .colored1 {
    fill: var(--logocolourlight);
}

.view.notification .title.itsme {
    display: flex;
    flex-direction: row;
    /*flex-wrap: nowrap;*/
    align-items: center;
    width: 100%;
    cursor: unset;
}

.istme-modal {
}

    .istme-modal .many-cols .form-group.help .data {
        width: 100%;
        max-width: 100%;
        font-style: normal;
    }

    .istme-modal .many-cols .form-group:first-child {
        padding-left: 8px;
        padding-right: 8px;
    }

    .istme-modal .istme-modal-input .form-group {
        flex-direction: column;
    }

        .istme-modal .istme-modal-input .form-group * {
            width: 100%;
            max-width: 100%;
        }
        .istme-modal .istme-modal-input .form-group.invalid .data,
        .istme-modal .istme-modal-input .form-group.invalid .data * {
            outline: 1px solid red;
            color: var(--fontcolour);
        }

.icon.subscribe .oi {
    font-size: 4rem;
    width: auto;
}
/* MODAL NONE */
.modal-body .sections-container {
    padding: 1rem 1rem 0 1rem;
}
    .modal-body .sections-container.buttons {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
    }

/*QRCODE*/
.qrcode-image {
    height: 50vh;
    width: auto;
}

@media (max-width: 769px) {
    .qrcode-image {
        height: 75%;
    }
}

/*QUICK EDIT*/
.quickedit-container {
    /*margin: 0.5rem;*/
}
    .quickedit-container fieldset {
        margin: 0.5rem;
        border-radius: 5px;
    }
        .quickedit-container fieldset legend {
            color: var(--fontcolour);
        }

.quickedit {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0.5rem;
    padding: 0 0.8rem;
    border-top: solid 1px var(--fontcolour3);
    color: var(--fontcolour);
    background: var(--background2);
}

    .quickedit.editing,
    .quickedit.editing .form-group {
        /*border: solid 1px red;*/
        background-color: var(--background4);
    }
    .quickedit.fullwidth > div {
        width: 100%;
    }
    .quickedit > div {
        max-width: 32%;
        min-width: 32%;
    }
        .quickedit > div.w-2 {
            width: 65%;
            max-width: 65%;
            min-width: 32%;
        }

.help {
    position: relative;
}
    .help .help-panel {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0.5rem;
        padding: 0 0.8rem;
        /*border-top: solid 1px var(--fontcolour3);*/
        color: var(--fontcolour);
        background: var(--background2);
    }

    .help.collapsed .help-panel {
        display: none;
    }

    .help.collapsed .help-icon-collapse {
        display: none;
    }
    .help:not(.collapsed) .help-icon-show {
        display: none;
    }

    .help .help-button {
        position: absolute;
        top: 0;
        left: -0.5rem;
        cursor: pointer;
    }
    .help.collapsed .help-button {
        top: -2.1rem;
    }
/* to let a space on the left to display the collapse button */
.above-help {
    margin-left: 1rem;
}

span.oi.oi-info {
    left: 0.5rem;
}

@media (max-width: 769px) {
    .quickedit > div {
        width: unset;
        max-width: 100%;
    }
    .quickedit > div.w-2 {
        width: 105%;
        max-width: 100%;
    }
}

fieldset legend {
    font-size: 1.2rem;
    color: var(--fontcolour3);
}

.header-district {
    margin-left: 10px
}
    header .form-group,
    .header-district .form-group {
        min-width: 7rem;
    }

.proofreading {
}
    .proofreading a:hover {
        text-decoration: none;
    }
    .proofreading .form-group {
        flex-direction: column;
        width: 100%;
    }
    .proofreading .card-text {
        width: 50%;
    }
        .proofreading .card-text .title {
            color: var(--logocolourlight);
        }
        .proofreading .card-text .text {
            padding: 0 1rem;
            height: 100px;
            background-color: var(--background);
            color: var(--fontcolour);
        }
            .proofreading .card-text .text p {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
            }

    .proofreading .many-cols.two-cols > * {
        width: 100%;
    }
    .proofreading .many-cols .form-group label,
    .proofreading .many-cols .form-group .data,
    .proofreading .many-cols .form-group .input-control,
    .proofreading .many-cols .form-group .buttons {
        flex: inherit;
        width: 100%;
        max-width: 100%;
    }
.proofreading-highlight {
    color: var(--logocolourlight);
}
.proofreading-bigger {
    font-size: 1rem;
}

.text-highlight {
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--fontcolour);
    color: var(--highlight);
}
    .text-highlight:hover {
        background-color: var(--btnhighlighthover);
        color: var(--fontcolour);
        cursor: none;
    }

/*TOOTIP*/
.cards-container.simplelist.bannerlist .card .tooltip {
    background-color: var(--background2);
}
.buttons button .tooltip {
    z-index: 1;
    visibility: hidden;
    position: absolute;
    bottom: 40px;
    right: 0;
    min-width: 200px;
    margin-left: -60px;
    padding: 5px 0;
    background-color: var(--background2);
    color: var(--fontcolour);
    border: var(--fontcolour) solid 1px;
    text-align: center;
    border-radius: 6px;
    opacity: unset;
    cursor: unset;
}

    .buttons button .tooltip.alert {
        background-color: var(--background3);
        color: var(--fontcolour);
    }

    .buttons button .tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.side .buttons button .tooltip,
.headertext .buttons button .tooltip {
    left: 5px;
    right: -170px;
    top: -30px;
    bottom: 25px;
}

.side .card-bottom.buttons button .tooltip {
    left: unset;
    right: 0;
}


.buttons button:hover .tooltip,
.btn-actions:hover .tooltip {
    visibility: visible;
}

/* BANNERS */
.banner-container {
    --imageHeight: calc( 100vh - var(--headerLogoHeight) );/*540px;*/
    position: relative;
    overflow: hidden;
    padding-bottom: 65%;
    width: 100%;
    height: var(--imageHeight);
}
    .banner-container .banner-image-container.banner-visible {
        position: absolute;
        display: block;
        width: 100%;
        height: var(--imageHeight);
        /*transition-property: all;
        transition-duration: 2s;
        transition-timing-function: linear;*/
        /*transition-delay: 1s;*/
    }
    .banner-container .banner-image {
        position: absolute;
        top: 0;
        display: block;
        opacity: 0;
        width: 100%;
        height: var(--imageHeight);
    }
        .banner-container .banner-image img {
            width: 100%;
            height: 100%;
            height: var(--imageHeight);
        }
        .banner-container .banner-image.previous {
            display: block;
            opacity: 0;
            animation-name: fadeOutOpacity;
            animation-iteration-count: 1;
            animation-timing-function: ease-in;
            animation-duration: 1.5s;
        }
        .banner-container .banner-image.active {
            display: block;
            opacity: 1;
            animation-name: fadeInOpacity;
            animation-iteration-count: 1;
            animation-timing-function: ease-in;
            animation-duration: 1s;
            /*transform: translate(0,-100%);*/
            /*transform: scale(1,1);*/
        }
    .banner-container .banner-text-container {
        position: absolute;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        left: 1rem;
        /*width: 100%;*/
        min-height: var(--imageHeight); /*calc( 100vw * 0.66 * 0.65);*/
        transition-property: none; /*all;*/
        transition-duration: 2s;
        transition-timing-function: linear;
        /*transition-delay: 1s;*/
    }
    .banner-container .banner-text-container a {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            min-height: 1rem;
            font-size: 1.2rem;
            color: #ffffff;
            background-color: #0000004f;
        } .banner-container .banner-text-container a.active {
                -webkit-line-clamp: 3;
                min-height: 2rem;
                font-size: 2.2rem;
                font-weight: bold;
                background-color: #00000080;
            } @keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} @keyframes fadeOutOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.side-banner.sections-container fieldset {
    margin-bottom: 0;
    padding-right: 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--background2);
    text-align: justify;
}

.side-banner.sections-container .promo {
    margin: -8px -8px 8px -8px;
}
    .side-banner.sections-container .promo:not(:first-child) {
        margin-top: 8px;
    }
.promo-side-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1 / 1;
    width: 100%;
    padding: 2.8rem 1rem;
    background-color: black;
    text-align: center;
}
    .promo-side-card > div {
        margin-bottom: 1rem;
    }
    .promo-side-card .promo-header {
        font-size: 1rem;
        color: #fff;
    }
    .promo-side-card .promo-title {
        font-size: 2.2rem;
        line-height: 2.5rem;
        color: #ff9900;
    }
        .promo-side-card .promo-title select {
            font-size: 2.2rem;
            line-height: 2.5rem;
            color: #ff9900;
            background-color: #000;
        }
        .promo-side-card .promo-title option {
            text-align: center;
        }
    .promo-side-card .promo-price {
        font-size: 2.2rem;
        line-height: 2.5rem;
        color: #2bcd2e;
    }
    .promo-side-card .promo-description {
        font-size: 1.15rem;
        color: #fff;
    }
    .promo-side-card .promo-button .btn {
        font-size: 1.3rem;
        color: #fff;
        background-color: #219b24;
    }
    .promo-side-card .promo-hide button {
        position: absolute;
        bottom: 0;
        right: 0.5rem;
        font-style: italic;
        color: #FFF;
    }

@media (max-width: 769px) {
    .side-banner.sections-container {
        display: block;
    }

    .banner-container {
        --imageHeight: 700px;
        width: 100%;
    }
        .banner-container .banner-image img {
            width: unset;
        }

    .flex.responsive {
        flex-wrap: wrap;
    }

} 

.collapsible.collapsed {
    display: none;
}

.quickaction-back {
    position: fixed;
    margin-top: -1.5rem;
}

.quickaction-fullheight {
    min-height: calc( 100vh - var(--headerLogoHeight) - 75px);
    overflow: visible;
}

form {
}

.help-alert:not(:empty) {
    padding: 0.5rem;
    background-color: var(--highlight);
    color: var(--highlightfont);
}
.help-warning:not(:empty) {
    padding: 0.5rem;
    background-color: var(--highlight2);
    color: var(--highlight2font);
}

.notification .itsme > .itsme-icon {
    width: 3rem;
}

/* AVATAR */
.avatar {
    position: relative;
    min-height: inherit;
    max-height: 50vh;
}
    .avatar .data::after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }
    .avatar::after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }
    .avatar img,
    .avatar .oi {
        position: absolute;
        object-fit: cover;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 50%;
    }
.avatar-medium,
.avatar-medium .avatar {
    width: 8rem;
    height: 8rem;
    max-height: 8rem !important;
    max-width: 8rem !important;
}
    .avatar-medium .avatar img {
        max-height: 8rem;
        max-width: 8rem;
    }
    .avatar-medium .oi.oi-person {
        font-size: 7rem;
    }
.avatar-small,
.avatar-small .avatar {
    width: 5rem;
    height: 5rem;
    max-height: 5rem !important;
    max-width: 5rem !important;
}
    .avatar-small .avatar img {
        max-height: 5rem;
        max-width: 5rem;
    }
    .avatar-small .oi.oi-person {
        font-size: 4rem;
    }

.myprofile {
    position: relative;
}
        .myprofile .avatar .data {
            position: relative;
            margin: 1rem;
        }

        .myprofile .avatar .form-group.form-image .data.editing .image img {
            max-height: 100%;
        }

        .myprofile .avatar .form-group.form-image .data .oi.oi-person {
            font-size: 15rem;
            color: var(--logocolour2light);
        }

.avatar .oi {
    font-size: 3.2em;
}

.view.notification .avatar {
    margin-top: 1rem;
    min-width: 5rem;
}