/* Define DESNZ brand colours */

:root {
    --desnz-blue: #003479;
    --navy: #182D4C;
    --sky-blue: #62C3F4;
    --sky-blue-transparency: #62C3F440;
    --cyan: #33DDEC;
    --cyan-transparency: #33DDEC40;
    --white: #FFFFFF;
    --black: #000000;
    --text-lowlight: #FFFFFF;
    --transparent: #FFFFFF00;

    --text: #444444;
    --text-secondary: #595959;

    --background-grey: #D9D9D9;
    --zero-grey: #B3B3B3;
    
    --desnz-blue-gradient-0: #003479;
    --desnz-blue-gradient-0-5: #074083;
    --desnz-blue-gradient-1: #0d4c8c;
    --desnz-blue-gradient-2: #23649e;
    --desnz-blue-gradient-3: #3b7caf;
    --desnz-blue-gradient-4: #5595bf;
    --desnz-blue-gradient-5: #72adce;
    --desnz-blue-gradient-6: #91c6dd;
    --desnz-blue-gradient-7: #b2dfee;
    --desnz-blue-gradient-8: #d4f7ff;

    --navy-gradient-0: #182D4Cff;
    --navy-gradient-1: #324460ff;
    --navy-gradient-2: #4B5C74ff;
    --navy-gradient-3: #657388ff;
    --navy-gradient-4: #7F8A9Cff;
    --navy-gradient-5: #98A2AFff;
    --navy-gradient-6: #B2B9C3ff;
    --navy-gradient-7: #CCD0D7ff;
    --navy-gradient-8: #E5E8EBff;

    --separator: var(--navy-gradient-6);
    scrollbar-color: var(--desnz-blue) var(--white);
}

/* Edit some global html tags */
html {
    background-color: var(--white); /* Ensures that "out of bounds" is still the background navy colour. Some mobile displays may let this be visible. */
    /* overflow: hidden; */
}

body {
    font-family: Arial; /* Set font globally */
    background-color: var(--white); /* Ensures that "out of bounds" is still the background navy colour. Some mobile displays may let this be visible. */
    margin: 0px;
}

table {
    border-collapse: collapse;
}

th {
    border-bottom: 1px solid var(--zero-grey);
    padding: 8px;
}

td {
    border-bottom: 1px solid var(--zero-grey);
    padding: 8px;
}

h1 {
    font-size: 2.0rem;
    font-weight: bold;
}

h2 {
    font-size: 1.75rem;
    font-weight: bold;
}

h3 {
    font-size: 1.25rem;
    font-weight: bold;
}

h4 {
    font-size: 1.12rem;
    font-weight: bold;
}

h5 {
    font-size: 1.025rem;
    font-weight: bold;
}


label {
    font-size: 1rem;
}

legend {
    font-size: 1rem;
}

.text-source {
    font-size: 0.875rem;
}

.text-small {
    font-size: 0.875rem;
}


#page-content > div {
    height:100%;
    width: 100%;
}

#_pages_content {
    height:100%;
    width: 100%;
}

.center-children {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon {
    color: var(--white);
}

.icon-offset {
    margin-top: 2px; /* Icons are slightly vertically offset, so add a custom offset to correct for that */
}

.header-custom{
    background-color: #FFFFFF;
    border-color: #D9D9D9;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    padding: 0.5rem;
}

/* In the header, text is centred based on its total bounding box, which includes text descenders
 * This looks ever so slightly off, so maually tweak to recenter. Value chosen by eye.
 */
.title-optical-align {
    transform: translateY(0.06em);
}

.back-to-map-bar {
    background-color: var(--desnz-blue);
    color: white;
    font-size: large;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.leaflet-tooltip{
    white-space: normal !important; 
    max-width: 80vw !important; 
    min-width: 350px;               
    word-wrap: break-word;                      
}

a:link {
    color: var(--desnz-blue);
}

a {
    color: var(--desnz-blue);
}

.no-history-link-light {
    color: var(--white) !important;
}

.no-history-link-light:visited {
    color: var(--white) !important;
}

.no-history-link-dark {
    color: var(--desnz-blue);
}

.no-history-link-dark:visited {
    color: var(--desnz-blue);
}

.text-secondary {
    color: var(--text-secondary) !important;
}

 /* If using the Cropped version of the logo, set min sizes */
 .desnz-logo {
    height: 96px;              /* fixed height */
    width: auto;               /* maintain aspect ratio */
    max-width: 100%;           /* prevent overflow on smaller screens */
    object-fit: contain;       /* ensure the image scales to fit its box */
}

/* If using Cropped version of the logo, and don't have margins enforced elsewhere,
   set margins. These were calculated based on the size of the "D" in the logo, as
   detailed in the branding guidance. */
.desnz-logo-margins {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 13px;
    margin-right: 13px;
}

.conditional-min-height {
    min-height: 200px; /* Fallback for older browsers, will use the min(200px, 75dvh) if browser supports it. */
}

@supports (min-height: min(1px, 1dvh)) {
  .conditional-min-height {
    min-height: min(200px, 85dvh);
  }
}

 .text-page-padding-bottom {
    padding-bottom: 10rem;
 }

/*
 * Buttons
 */

.btn-primary {
    background-color: var(--desnz-blue);
    border: var(--desnz-blue);
    box-shadow: none !important;
    border-radius: 0px;
}


.btn-primary:hover {
    background-color: var(--desnz-blue-gradient-0-5) !important;
}

.btn-primary:focus {
    box-shadow: none;
    background-color: var(--desnz-blue-gradient-0-5) !important;
}

.btn-primary:active {
    background-color: var(--desnz-blue-gradient-1) !important;
}

/*
 * Sidebar
 */

.dynamic-sidebar {
    background: var(--white);
    width: 30rem;
    max-width: 85%;
    flex-grow: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(0);
    transition: transform 0.3s ease;
    z-index: 900;
    display: flex; /* May want some children to grow to fill this container. Particularly useful to trigger overflows. */
}

.sidebar-scroll-container {
    height: 100%;
    width: 100%;
    padding: 1rem;
    overflow-y: auto;
}

.dynamic-sidebar.hide {
    transform: translateX(-100%);
}

.sidebar-toggle-button {
    margin-top: auto;
    margin-bottom: auto;
    height: 2rem;
    width: 2rem;
    left: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}


.backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    z-index: 20;
}

.backdrop.hide {
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 1024px) {
    /* Overwrite the hiding behaviour present on smaller screens */
    .dynamic-sidebar.hide {
        transform: translateX(0);
        position: relative;
    }
    .dynamic-sidebar{
        transform: translateX(0);
        position: relative;
        width: 32rem;
    }
    .backdrop {
        display: none;
    }
    .lg-hidden {
        display: none; 
    }
}

@media (min-width: 1440px) {
    .dynamic-sidebar{
        width: 36rem;
    }
}

.sidebar-heading {
    width: 100%;
    background-color: var(--desnz-blue);
    color: white;
    padding: 0.5rem;
}


.sidebar-footer {
    width: 100%;
    background-color: var(--desnz-blue);
    color: white;
}

.sidebar-tab-panel {
    padding-top: 1rem;
}

.sidebar-tab-tab {
    width: 55%;
}

.anchor-bottom {
    background-color: #FFFFFFBB;
    position: absolute;
    left: 40%;
    right: 2rem;
    bottom: 1rem;
    height: 25dvh;
    overflow-y: auto;
    padding: 1rem;
}




.form-check-input:checked {
    background-color: var(--desnz-blue);
    border-color: var(--desnz-blue);
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--desnz-blue-gradient-7);
    box-shadow: none;
}

.form-check-input {
    border-color: #00000088;
    box-shadow: none !important;
}

/*
 * Dash mantine tabs
 */

.mantine-Tabs-tab {
    position: relative;
    border-width: 0px;
    border-color: #000;
    border-radius: 0px;
    background-color: var(--navy-gradient-8);
}

.mantine-Tabs-tab:hover {
    background-color: var(--navy-gradient-7);
}

.mantine-Tabs-tab[data-active]{
    background-color: var(--desnz-blue);
    color: white;
    font-weight: bold;
}

/* 
 * Cookie banner
 */

.cookie-banner {
    background-color: var(--background-grey);
    padding: 1rem;
    border-color: var(--zero-grey);
    border-style: solid;
    border-width: 0px 0px 1px 0px;
}

/*
 * Slider settings
 */

.unindent-slider {
    padding-left: 5px !important;
}

.rc-slider-track {
    background-color: var(--desnz-blue);
}

.rc-slider-rail {
    background-color:var(--background-grey);
}

.rc-slider-handle {
    background-color: var(--desnz-blue);
    border-color: var(--navy) !important;
    box-shadow: none !important;
}

.rc-slider-handle-click-focused {
    border-color: var(--desnz-blue);
    /* box-shadow: none; */
}

.rc-slider-dot{
    background-color: var(--background-grey);
    border-color: var(--background-grey);
}

.rc-slider-dot-active{
    background-color: var(--desnz-blue);
    border-color: var(--desnz-blue);
}

.rc-slider-mark-text {
    color: var(--text);
}

.rc-slider-mark-text-active {
    color: var(--text);
}

.rc-slider-tooltip-inner {
    background-color: var(--desnz-blue) !important;
    color: white !important;
    border-radius: 4px;
}


._dash-loading {
    position: fixed;            
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: auto;
    height: auto;
    color: transparent;
    z-index: 1000;
    text-align: center;
}

._dash-loading::after {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 2rem;
    color: var(--desnz-blue);
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border 0.75s linear infinite;
    animation: spinner-border 0.75s linear infinite;
    margin-top: 2rem;
}

/* 
 *Apply a strong focus outline to all focusable elements
 *
 * We'll do something slightly strange in order to ensure backwards-compatibility.
 *
 * First, we apply settings to *:focus, which will apply the styling to every element
 * whenever they're focused, including from clicks. This is undesirable.
 *
 * Then, we remove these stylings with *:focus:not(:focus-visible), which removes
 * the styling applied above but only if :focus-visible is available in the browser.
 *
 * Finally, if :focus-visible is available, apply the styling.
 *
 * The net effect is we have the preferred :focus-visible style when it's available,
 * and otherwise fall back on :focus.
 * 
 * See https://www.sarasoueidan.com/blog/focus-indicators/
 */

*:focus { 
	outline: 3px solid var(--desnz-blue) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 9px var(--white) !important;
    border-color: none !important;
}

*:focus:not(:focus-visible) {
    outline: inherit !important;
    outline-offset: 3px;
    box-shadow: inherit !important;
    border-color: inherit !important;
}

*:focus-visible { 
    outline: 3px solid var(--desnz-blue) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 9px var(--white) !important;
    border-color: none !important;
}