/* --- Variables --- */

:root {
    --navbar-height: 67px;
    --expandable-transition-time: 0.2s;

    --light-shadow-down: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    --deep-shadow-down: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    --light-shadow-right: 2px 0px 4px 0 rgba(0, 0, 0, 0.2);
    --deep-shadow-right: 4px 0px 8px 0 rgba(0, 0, 0, 0.2);

    --light-shadow-left: -2px 0px 4px 0 rgba(0, 0, 0, 0.2);
    --deep-shadow-left: -4px 0px 8px 0 rgba(0, 0, 0, 0.2);

    --bender-colour: #FFD61F;
    --bender-highlight-colour: #eac419;
    --w3w-colour: #e11f26;

}


/* --- Basic --- */

/* Body */
body {
    font-family: Calibri, sans-serif;
}

.preload * {
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    transition: background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}

/* Dropdown */
.dropdown-menu {
    z-index: 99999
}

.experimental {
    background-color: #F5C6CB;
}

/* --- Expandables --- */

/* Expandable button when collapsed */
.expandable-button {
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: border-bottom-left-radius 0s linear var(--expandable-transition-time), border-bottom-right-radius 0s linear var(--expandable-transition-time), border-bottom-width 0s linear var(--expandable-transition-time);
}

.expandable-button::after {
    content: '\002B';
    /* Unicode character for "plus" sign (+) */
    /* color: var(--primary-color); */
    font-weight: bold;
    float: right;
}

/* Expandable button when expanded */
.expandable-button.active {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-width: 0px;
    transition: border-bottom-left-radius 0s linear 0s, border-bottom-right-radius 0s linear 0s, border-bottom-width 0s linear 0s;
}

.expandable-button.active:after {
    content: "\2212";
    /* Unicode character for "minus" sign (-) */
}

/* Expandable content */
.expandable-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--expandable-transition-time) ease-out, border 0s linear var(--expandable-transition-time);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.expandable-content.active {
    transition: max-height var(--expandable-transition-time) ease-out, border 0s linear 0s;
}

.expandable-content .checkbox-column {
    margin: var(--medium-padding);
}


/* --- Map --- */

/* Checkbox columns */
.checkbox-column {
    display: flex;
    flex-direction: column;
}

/* Fixed height for map page */
.canvas {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--navbar-height));
}

/* Sidebar */
.sidebar {
    position: absolute;
    z-index: 1;
    transition: left 0.5s ease;
}

.sidebar-button {
    border: none;
    border-radius: 0;
    writing-mode: vertical-lr;
    z-index: 3;
}

#filter-sidebar-button {
    box-shadow: var(--light-shadow-right);
}

#search-sidebar-button {
    box-shadow: var(--light-shadow-left);
}

/* Page container */
#page-container {
    transition: margin-left .5s;
    position: relative;
    z-index: 2;
}

/* Sidebar content */
.sidebar .selection,
.sidebar .expandable,
.sidebar .submit-buttons,
.sidebar h2 {
    margin: var(--medium-padding);
}

/* Map switch button */
/* Map */
#map-container {
    transition:
        margin-left .5s,
        margin-right .5s;
    display: flex;
    align-items: left;
    justify-content: left;
    position: relative;
    height: 100%;
    z-index: 2;
}

#map {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

input.searchbox {
    border-radius: var(--border-radius);
    width: 100%;
    border: 0px;
    border-bottom: 1px solid var(--dark);
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
}

/* Map sidebar table inputs */
table.map-sidebar-input {
    margin-top: var(--medium-padding);
    margin-left: var(--medium-padding);
    margin-right: var(--medium-padding);
}

/* --- Timeline --- */
.timeline {
    width: 85%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    padding: 0 0 32px 32px;
    border-left: 2px solid #e3e3e3;
}

.timeline-item {
    display: flex;
    gap: 24px;

    &+* {
        margin-top: 24px;
    }

    &+.extra-space {
        margin-top: 48px;
    }
}

.timeline-item.timeline-item-sm {

    &+* {
        margin-top: 0;
    }

    &+.extra-space {
        margin-top: 48px;
    }
}

.timeline-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: -53px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 0 6px #fff;

    svg {
        width: 20px;
        height: 20px;
    }

    &.no-icon {
        background-color: #fff0;
        box-shadow: none;
    }

    &.primary-icon {
        background-color: var(--primary);
        color: #fff;
    }

    &.secondary-icon {
        background-color: var(--secondary);
        color: #fff;
    }

    &.success-icon {
        background-color: var(--success);
        color: #fff;
    }

    &.danger-icon {
        background-color: var(--danger);
        color: #fff;
    }

    &.warning-icon {
        background-color: var(--warning);
        color: #fff;
    }

    &.info-icon {
        background-color: var(--info);
        color: #fff;
    }

    &.light-icon {
        background-color: var(--light);
        color: var(--dark);
    }
}

.timeline-item-description {
    display: flex;
    padding-top: 6px;
    gap: 8px;
}

.collapsing.no-animation {
    transition: none !important;
}

/* bender button */

.btn-outline-bender {
    background-color: var(--bender-colour);
    color: #3A3A3A;
    border-color: var(--bender-colour);
}

.btn-outline-bender:hover {
    color: #fff;
    background-color: var(--bender-highlight-colour);
    border-color: var(--bender-highlight-colour);
}

.btn-outline-bender:not(:disabled):not(.disabled).active,
.btn-outline-bender:not(:disabled):not(.disabled):active,
.show>.btn-outline-bender.dropdown-toggle {
    color: #fff;
    background-color: var(--bender-colour);
    border-color: var(--bender-colour);
}

.btn-outline-bender:focus {
    box-shadow: 0 0 0 0.2rem rgba(225, 31, 38, 0.5);
}


/* what3words button */

.btn-outline-w3w {
    color: var(--w3w-colour);
    border-color: var(--w3w-colour);
}

.btn-outline-w3w:hover {
    color: #fff;
    background-color: var(--w3w-colour);
    border-color: var(--w3w-colour);
}

.btn-outline-w3w:not(:disabled):not(.disabled).active,
.btn-outline-w3w:not(:disabled):not(.disabled):active,
.show>.btn-outline-w3w.dropdown-toggle {
    color: #fff;
    background-color: var(--w3w-colour);
    border-color: var(--w3w-colour);
}

.btn-outline-w3w:focus {
    box-shadow: 0 0 0 0.2rem rgba(225, 31, 38, 0.5);
}

/* Trees */
ul.tree,
ul.tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.tree ul {
    margin-left: 10px;
}

ul.tree li {
    margin: 0;
    padding: 0 7px;
    line-height: 20px;
    border-left: 1px solid rgb(100, 100, 100);
}

ul.tree li:last-child {
    border-left: none;
}

ul.tree li:before {
    position: relative;
    top: -0.3em;
    height: 1em;
    width: 12px;
    color: white;
    border-bottom: 1px solid rgb(100, 100, 100);
    border-left: 1px solid rgb(100, 100, 100);
    content: '';
    display: inline-block;
    left: -8px;
}

ul.tree li:last-child:before {
    border-left: 1px solid rgb(100, 100, 100);
    left: -7px;
}

/* Selection tree */

ul.tree.selection-tree ul {
    margin-left: 18px;
}

ul.tree.selection-tree li:last-child {
    margin-left: 1px;
}

ul.tree.selection-tree li:before {
    height: 0.8em;
    margin-right: 1px;
}

ul.tree.selection-tree li:last-child:before {
    width: 13px;
    left: -8px;
    margin-right: 0px;
}

/* Compact tree */
ul.tree.compact-tree ul {
    margin-left: 0px;
}

/* Cursors */
.cursor-pointer {
    cursor: pointer;
}

/* Colours */
.color-clear {
    color: #00000000
}