html {
    position: relative;
    min-height: 100%;
    /*box-shadow: inset 0 0 5rem rgba(235, 222, 240, .5);*/
}

/*Prevent Chrome kiosk gesture*/
html, body {
    overscroll-behavior: none;
}

body {
    height: 100%;
    min-height: 100%;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #333;
    min-width: 320px;
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-size: 1rem;
    font-weight: 400;
    /*Disable highlighting words in browser*/
    /*-moz-user-select: none;*/ /* Firefox */
    /*-ms-user-select: none;*/ /* Internet Explorer */
    /*-khtml-user-select: none;*/ /* KHTML browsers (e.g. Konqueror) */
    /*-webkit-user-select: none;*/ /* Chrome, Safari, and Opera */
    /*-webkit-touch-callout: none;*/ /* Disable Android and iOS callouts*/
}

.body-class {
    padding-top: 16px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 70px;
    padding-bottom: 20px;
}

/*Exclude IE*/
@supports not (-ms-high-contrast: none) {
    body {
        display: -ms-flexbox;
    }
}

/*County Court theme*/
a {
    color: #522a6c;
    font-weight: 700;
    text-decoration-line: none;
}

    a:hover {
        color: #2c163a;
        text-decoration-line: underline;
    }

h3, h4, h6, h7 {
    color: #522a6c;
}

.subtitle {
    color: #522a6c;
}

.subtitleSecondary {
    color: #33393d;
    font-size: 1rem;
    font-weight: 700;
}

.custom-label {
    color: #522a6c;
    text-align: left !important;
}

.custom-checkbox {
    color: #522a6c;
    width: 1.5rem;
    height: 1.5rem;
}

/* Custom button */
.btn-secondary,
.btn-secondary:active, .btn-secondary.active,
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:focus, .btn-secondary.focus {
    color: #fff;
    text-shadow: none; /* Prevent inheritance from body */
    background-color: #522a6c;
    border: .05rem solid #fff;
}

    .btn-secondary:hover {
        background-color: #004f73;
        border-color: #004f73;
        text-decoration: none;
    }

.btn-clear,
.btn-clear:active, .btn-clear.active,
.btn-clear:not(:disabled):not(.disabled):active, .btn-clear:not(:disabled):not(.disabled).active,
.btn-clear:not(:disabled):not(.disabled):active:focus, .btn-clear:not(:disabled):not(.disabled).active:focus,
.btn-clear:focus, .btn-clear.focus {
    color: #fff;
    text-shadow: none; /* Prevent inheritance from body */
    background-color: #c81f66;
    border: .05rem solid #fff;
}

    .btn-clear:hover {
        background-color: #fff;
        border-color: #c81f66;
        color: #c81f66;
        text-decoration: none;
    }

/* Custom button */
.btn-returnto,
.btn-returnto:active, .btn-returnto.active,
.btn-returnto:not(:disabled):not(.disabled):active, .btn-returnto:not(:disabled):not(.disabled).active,
.btn-returnto:not(:disabled):not(.disabled):active:focus, .btn-returnto:not(:disabled):not(.disabled).active:focus,
.btn-returnto:focus, .btn-returnto.focus {
    color: #522a6c;
    text-shadow: none; /* Prevent inheritance from body */
    background-color: #fff;
    border: .05rem solid #522a6c;
}

    .btn-returnto:hover {
        background-color: #004f73;
        border-color: #004f73;
        color: #fff;
        text-decoration: none;
    }


/*Custom text box*/
.input-custom:focus {
    border-color: #E2CEEF;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(226, 206, 239, 0.25);
}

.input-custom::placeholder {
    font-size: 13px;
    vertical-align: central
}

/*Room header*/
.courtroom {
    background-color: #eee;
    border: solid rgba(14,121,170,.3);
    border-width: 1px 0 1px;
}

/*Home Page*/
.cover-container {
    max-width: 80em;
}

@media (min-width: 1440px) {
    .cover-container {
        max-width: 80em;
        /*height: 100%;*/
    }
}

@media (min-height: 400px) and (min-width: 1440px) {
    .push-footer-down {
        height: 140%;
    }
}

@media (min-width: 1440px) {
    .search-container {
        height: 100%;
    }
}

#main {
    height: 100%;
}

/*Cover*/
.cover {
    padding: 0 1.5rem;
}

    .cover .btn-lg {
        padding: .75rem 1.25rem;
        font-weight: 700;
    }

.cover-heading {
    line-height: 38px;
    font-family: Roboto,sans-serif;
    font-size: 40px;
    font-weight: 400;
}

/*Suggestion List*/
.suggestion-container {
    position: relative;
    display: inline-block;
}

.suggestion-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    color: #333;
}

    .suggestion-items div {
        padding: 5px;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

.logoDiv {
    min-width: 172px;
}

/*Navigation*/
.navbar-nav .nav-link {
    color: #522a6c;
}

    .navbar-nav .nav-link:hover {
        color: #2c163a;
        text-decoration-line: none;
    }

.nav-masthead .nav-link {
    padding: .25rem 0;
    font-size: large;
    font-weight: 700;
    border-bottom: .25rem solid transparent;
}

    .nav-masthead .nav-link:hover,
    .nav-masthead .nav-link:focus {
        border-bottom-color: rgba(255, 255, 255, .25);
    }

    .nav-masthead .nav-link + .nav-link {
        margin-left: 1rem;
    }

.nav-masthead .active .nav-link {
    color: #0172a6;
}

.navbar-collapse {
    background-color: white;
    color: #eee;
}

    .navbar-collapse .navbar-nav .nav-item {
        color: white;
    }

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(82,42,108)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
    border-color: rgb(82, 42, 108);
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

@media (max-width: 575.98px) {
    #navbarNav {
        height: calc(100% - 93px)
    }

    .top .top_link {
        padding: 0;
        left: 0;
        position: absolute
    }

    .top .logoDiv > .component__logo {
        width: 33%
    }
}

@media (min-width: 576px) and (max-width:767.98px) {
    #navbarNav {
        height: calc(100% - 133px)
    }
}

@media (max-width: 767.98px) {
    #navbarNav {
        /*background-color: #522a6c;TODO*/
        order: 2;
        overflow-x: hidden;
        overflow-y: scroll
    }
}


@media (min-width: 576px) and (max-width:767.98px) {
    /* .navbar-toggler {
        height: 133px
    }*/ /*fix nagivation (burger button alignment) */
}

/*Responsive*/
@media (min-width:950px) {
    .logo {
        /*height: 110px;*/
        width: 300px;
        height: 92px;
    }
}

@media (min-width:801px) and (max-width:949px) {
    .logo {
        width: 290px;
        height: 115px;
    }

    .logoDiv {
        width: 290px;
    }
}

@media (min-width:600px) and (max-width:800px) {
    .logo {
        width: 260px;
        height: 80px;
    }

    .logoDiv {
        width: 260px;
    }
}

@media (min-width:576px) and (max-width:599px) {
    .logo {
        width: 240px;
        height: 74px;
    }

    .logoDiv {
        width: 240px;
    }
}

/*@media (min-width:500px) and (max-width:575px) {
    .logo {
        width: 220px;
    }
}*/


/*Maximize Navigation*/
@media (min-width:414px) {
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

        .navbar-expand-custom .navbar-nav {
            flex-direction: row;
        }

            .navbar-expand-custom .navbar-nav .nav-link {
                padding-right: .5rem;
                padding-left: .5rem;
            }

        .navbar-expand-custom .navbar-collapse {
            display: flex !important;
        }

        .navbar-expand-custom .navbar-toggler {
            display: none;
        }
}

/*Minimise Navigation*/
@media (max-width:414px) {
    .cover-heading {
        line-height: 38px;
        font-family: Roboto,sans-serif;
        font-size: 30px;
        font-weight: 400;
    }

    .navbar-collapse {
        color: #522a6c;
    }

        .navbar-collapse .nav-link {
            padding-left: 3px;
            color: #522a6c;
            border-bottom: 1px solid hsla(0,0%,100%,.2)
        }

        .navbar-collapse .nav-item:hover,
        .navbar-collapse .nav-item:focus {
            border-bottom-color: #522a6c;
        }

        .navbar-collapse .nav-item .active {
            background-color: #0172a6;
        }
}

a#ddmGroundFloor, a#ddmLevelOne {
    color: #522a6c;
}

.dropdown-menu > a:hover {
    background-image: none;
    background-color: rgba(132, 147, 157, 0.25);
}


/*Dropdown multilevel - Accordion*/
@media (min-width: 992px) {
    .dropdown-menu .dropdown-toggle:after {
        border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }

    .dropdown-menu .dropdown-menu .dropdown-item {
        color: #522a6c;
        margin-left: 0;
        margin-right: 0;
    }

    .dropdown-menu li {
        position: relative;
    }

    .nav-item .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
    }

    .nav-item .submenu-left {
        right: 100%;
        left: auto;
    }

    .dropdown-menu > li:hover {
        background-color: rgba(132, 147, 157, 0.25);
    }

        .dropdown-menu > li:hover > .submenu {
            display: block;
        }
}

/* Stop bootstrap to show validate results on not required field
    Add "nonrequired" to fields class that are not mandatory
*/
.was-validated .nonrequired {
    border-color: #ced4da !important;
    background-image: none !important;
    /*box-shadow: inherit !important;*/
    /*box-shadow: 0 0 0 0.2rem rgba(226, 206, 239, 0.25) !important;*/
}

    .was-validated .nonrequired:focus {
        border-color: #E2CEEF;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(226, 206, 239, 0.25) !important;
    }


.alert-danger {
    color: #c81f66;
    background-color: #ffffff;
    border-color: #c81f66;
}

    .alert-danger .alert-link {
        color: #c81f66;
    }

.alert-success {
    color: #000000;
    background-color: #9aa93e;
    border-color: #9aa93e;
}

    .alert-success .alert-link {
        color: #000000;
    }

/*Multiselelct options*/
.overwriteOptions {
    /*position: absolute;*/
    white-space: normal !important;
    /*height: 30px;*/
}


/*Footer*/
.footer {
    /*bottom: 0;
    left: 0;*/
    left: 0 !important;
    width: 100% !important;
    color: #ffffff !important;
    background-color: #333;
    /*height: 30px;*/
}

    .footer a {
        color: #ffffff;
        font-weight: normal;
    }
/*Fix footer overrided when the height is too low. E.g. mobile landscape*/
/*@media (min-height:613px) {
    .footer {
        position: absolute;
    }
}*/

.footerlogo {
    /*width: 7em;*/
    width: 112px;
    height: 132px;
}

.bottom .acknowledgement__flags {
    white-space: nowrap
}

    .bottom .acknowledgement__flags .flag {
        display: inline-block;
        /*margin-top: 6px;*/ /*CK - 27 Jun 2022 apply flag attribute */
        vertical-align: middle;
        width: 40px;
        height: 26px
    }

/*Copyright class*/
.copyright {
    /*padding-top: 22px;*/
    padding-bottom: 10px;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

/*Court Footer*/
.social_link {
    text-align: left !important;
}

.atom__social_link {
    display: inline-block;
    height: 36px;
    text-align: center;
    width: 36px;
    text-decoration: none;
}

@media (min-width: 768px) {
    .atom__social_link {
        height: 48px;
        width: 48px
    }
}

.atom__social_link:active, .atom__social_link:focus, .atom__social_link:hover {
    text-decoration: none
}

.fab:before {
    color: #333;
    line-height: 36px
}

.fab:active:before, .fab:focus:before, .fab:hover:before {
    color: #fff;
}

.style-linkedin {
    background: #e0e4e6
}

    .style-linkedin:active,
    .style-linkedin:focus,
    .style-linkedin:hover {
        background: #0077b5;
    }

.style-twitter {
    background: #e0e4e6
}

    .style-twitter:active,
    .style-twitter:focus,
    .style-twitter:hover {
        background: #000;
    }

.style-youtube {
    background: #e0e4e6
}

    .style-youtube:active,
    .style-youtube:focus,
    .style-youtube:hover {
        background: red;
    }



@media (min-width: 768px) {

    .fab:before {
        font-size: 1.5rem;
        line-height: 48px
    }
}

@media (max-width:575.98px) {
    .social_link {
        text-align: center !important;
    }

    .atom__top_link {
        background-color: #522a6c;
        display: block;
        text-transform: uppercase;
        width: 100%
    }
}

.atom__top_link, .atom__top_link:active, .atom__top_link:focus, .atom__top_link:hover {
    color: #eee;
    text-decoration: none
}

    .atom__top_link .text {
        line-height: 24px;
        font-family: Source Sans Pro,sans-serif;
        font-size: 16px;
        font-weight: 400
    }

@media (min-width: 576px) and (max-width:767.98px) {
    .atom__top_link .text {
        display: none
    }
}

@media (min-width: 768px) {
    .atom__top_link .text {
        line-height: 60px;
        vertical-align: top
    }
}

@media (min-width: 576px) {
    .atom__top_link .icon {
        border: 2px solid #81549d;
        font-size: 2rem;
        line-height: 60px;
        width: 60px
    }
}

#menu__audience li {
    text-align: left
}

    #menu__audience li a {
        color: #eee;
        position: relative
    }

        #menu__audience li a span {
            display: table-cell
        }

@media (max-width: 767.98px) {
    #menu__audience li .dropdown-toggle {
        display: flex;
        justify-content: space-between
    }
}

#menu__audience li .dropdown-toggle:after {
    content: "";
    font-family: Font Awesome\ 5 Free;
    font-weight: 600;
    border: 0;
    line-height: 2em
}

#menu__audience li .dropdown-toggle[aria-expanded=true]:after {
    content: "\f107"
}

@media (min-width: 768px) {
    #menu__audience li .dropdown-toggle[aria-expanded=true] {
        background-color: #2c163a
    }
}

#menu__audience li .dropdown-menu {
    background-color: transparent;
    border-radius: 0;
    border-width: 0;
    margin: 0;
    padding: 0
}

    #menu__audience li .dropdown-menu a {
        background-color: rgba(0,0,0,.33);
        padding-left: 3rem
    }

@media (min-width: 768px) and (max-width:991.98px) {
    #menu__audience li .dropdown-menu a {
        padding-left: .5rem
    }
}

@media (min-width: 768px) {
    #menu__audience li .dropdown-menu a {
        background-color: transparent;
        border-top: 1px solid hsla(0,0%,100%,.2);
        height: inherit;
        padding-top: .5rem;
        padding-bottom: .5rem
    }
}

@media (min-width: 992px) {
    #menu__audience li .dropdown-menu a {
        padding-left: 1.5rem
    }
}

#menu__audience li .dropdown-menu a:hover {
    background-color: #522a6c
}

#menu__audience li a, #menu__footer li a {
    line-height: 22px;
    font-family: Roboto,sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.2px;
    text-transform: uppercase
}

.menu__footer {
    line-height: 22px
}

.menu__footer, .menu__main {
    font-family: Roboto,sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.2px;
    text-transform: uppercase
}

@media screen and (max-width:1023px) {
    .multiselect-container button.dropdown-item {
        pointer-events: none;
    }

    .multiselect-container span.form-check input {
        pointer-events: all;
    }

    .multiselect-container span.form-check label {
        pointer-events: none;
    }
}

/*Date Picker*/
/*Hide Today button in datepicker*/
button.ui-datepicker-current {
    display: none;
}

/*Customsie close button **Close button has changed to "Today"*/
button.ui-datepicker-close {
    color: #fff !important;
    text-shadow: none !important; /* Prevent inheritance from body */
    background-color: #522a6c !important;
    border: .05rem solid #fff !important;
}

    button.ui-datepicker-close:hover {
        background-color: #004f73 !important;
        border-color: #004f73 !important;
    }

/*Today date*/
.ui-state-highlight {
    background: #f6f6f6 !important;
    border: 1px solid #c5c5c5 !important;
    color: #454545 !important;
}


.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: #0172a6 !important;
    border: 1px solid #0172a6 !important;
    color: #ffffff !important;
}

.customDatepicker {
    background: #ffffff !important;
}


/* Court Connect */
.watermark-container {
    position: relative;
    overflow: visible;
}

    .watermark-container::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Ctext x='50%25' y='50%25' fill='rgba(200%2C200%2C200%2C0.2)' font-size='22' font-family='Arial' font-weight='bold' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45%2C200%2C100)'%3ENot an official document%3C%2Ftext%3E%3C%2Fsvg%3E");
        background-repeat: repeat;
        background-size: 400px 200px;
        pointer-events: none;
        z-index: 9999;
        white-space: nowrap;
        user-select: none;
    }

/*Search Page*/
.required-indicator {
    color: red !important;
}

/*Civil List*/
.hover-row:hover {
    background-color: rgba(0, 0, 0, 0.04);
}


@media print {
    /* 1. Reset root elements to allow natural pagination */
    html, body {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Flatten flexbox and fixed heights on layout wrappers */
    /* This prevents the "blank first page" issue caused by flex layout */
    .d-flex,
    .h-100,
    .w-100,
    .container-md,
    .container.body-content.watermark-container {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        transform: none !important;
        break-before: auto !important;
        page-break-before: auto !important;
    }

    /* 3. Ensure the main content starts immediately */
    .container.body-content {
        top: 0 !important;
    }

    /* 4. Optional: Clean up vertical spacing */
    .pt-3, .py-3 {
        padding-top: 0.5rem !important;
    }

    /* Hide unnecessary spacers in print */
    br {
        display: none !important;
    }

    /* 5. Force background colors and images to print */
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    body::before {
        content: "" !important;
        position: fixed !important; /* This is the key for repetition */
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: -1000 !important;
        pointer-events: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Ctext x='50%25' y='50%25' fill='rgba(200%2C200%2C200%2C0.2)' font-size='22' font-family='Arial' font-weight='bold' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45%2C200%2C100)'%3ENot an official document%3C%2Ftext%3E%3C%2Fsvg%3E") !important; /* Your SVG URL */
        background-repeat: repeat !important;
        background-position: center !important;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        display: block !important;
    }
    /* 3. Hide the original container-based watermark to avoid overlap */
    .watermark-container::before {
        display: none !important;
        content: none !important;
    }

    /* 4. Flatten layout containers */
    .d-flex, .h-100, .w-100, .container-md, .watermark-container {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
    }
}