:root {
    --color-bg: #0d0f11;
    --color-header-bg: hsl(240, 14%, 10%);
    --color-fg: white;

    --color-intruder-highlight: rgba(255, 196, 0, 0.6);
    --color-intruder-highlight-selected: rgba(131, 101, 0, 0.55);
    --color-intruder-highlight-text: #ffc400;
    --color-intruder-highlight-disabled: rgba(128, 109, 62, 0.56);
    --color-intruder-highlight-danger: rgba(239, 40, 40, 0.6);
    --color-intruder-highlight-success: #198754;
    --color-intruder-hover: rgba(255, 255, 255, 0.15);
    --color-intruder-border: rgba(115, 115, 115, 0.8);
    --color-intruder-border-disabled: rgba(83, 82, 82, 0.68);
    --color-intruder-bg-checked: rgba(115, 115, 115, 0.8);
    --color-intruder-bg-popup: rgba(43, 39, 39, 0.4);

    --theme-button-bg: transparent;
    --theme-button-border: var(--color-intruder-border);
    --theme-button-hover-bg: var(--color-intruder-hover);
    --theme-button-hover-border: var(--color-intruder-border);
    --theme-button-active-bg: var(--color-intruder-highlight);
    --theme-button-active-border: var(--color-intruder-highlight);
    --theme-button-disabled-bg: transparent;
    --theme-button-disabled-border: var(--color-intruder-border-disabled);
    --theme-button-danger-bg: transparent;
    --theme-button-danger-border: var(--color-intruder-border);
    --theme-button-danger-hover-bg: var(--color-intruder-hover);
    --theme-button-danger-hover-border: var(--color-intruder-border);
    --theme-button-danger-active-bg: var(--color-intruder-highlight-danger);
    --theme-button-danger-active-border: var(--color-intruder-highlight-danger);
    --theme-button-danger-disabled-bg: transparent;
    --theme-button-danger-disabled-border: var(--color-intruder-border-disabled);
    --theme-button-success-active-bg: var(--color-intruder-highlight-success);
    --theme-button-success-active-border: var(--color-intruder-highlight-success);
    --theme-button-success-disabled-bg: transparent;
    --theme-button-success-disabled-border: var(--color-intruder-border-disabled);
    --theme-card-light-bg: transparent;
    --theme-card-light-popup-bg: var(--color-intruder-bg-popup);
    --theme-dropdown-item-selected-bg: var(--color-intruder-highlight-selected);
    --theme-nav-bg: var(--color-header-bg);
    --theme-nav-width: 225px;
    
    --theme-popup-border: var(--color-intruder-border);
    
    --theme-card-border-color: #D3D3D3FF;
    --intruder-card-box-shadow: 3px;

    --bs-body-bg: #212529;
    --bs-body-color: #dee2e6;
}

.floating-card {
    display: flex;
    padding: 4px;
    border: 1px solid var(--theme-card-border-color);
    
    box-shadow: inset 0 12px 10px -6px rgba(255, 255, 255, .4);
}

.btn {
    --bs-border-radius: 0;
    --intruder-btn-box-shadow-color: var(--color-intruder-highlight);
    box-shadow: inset var(--intruder-card-box-shadow) 0 0 var(--intruder-btn-box-shadow-color);
}

.btn-danger {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-intruder-border);
    
    --bs-btn-hover-bg: var(--color-intruder-hover);
    --bs-btn-hover-border-color: var(--color-intruder-border);

    --bs-btn-active-bg: var(--color-intruder-highlight-danger);
    --intruder-btn-box-shadow-color: var(--color-intruder-highlight-danger);
}
.btn-success {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-intruder-border);

    --bs-btn-hover-bg: var(--color-intruder-hover);
    --bs-btn-hover-border-color: var(--color-intruder-border);

    --bs-btn-active-bg: var(--color-intruder-highlight-success);
    --intruder-btn-box-shadow-color: var(--color-intruder-highlight-success);
}

.btn:active {
    --intruder-card-box-shadow: 0;
}

.status-popup.status-warn.status-warn {
    --status-popup-border-color: rgba(239, 40, 40, 0.25);
    --status-popup-box-shadow-color: rgba(239, 40, 40, var(--status-popup-box-shadow-opacity-status-popup));
}

.status-popup.status-warn.status-warn:hover {
    --status-popup-border-color: var(--color-intruder-highlight-danger);
}

hr {
    --splitter-percentage-left: 5%;
    --splitter-percentage-left-end: 25%;
    --splitter-percentage-right: 75%;
    --splitter-percentage-right-end: 95%;

    --splitter-color-full: rgba(128, 128, 128, 0.75);
    --splitter-color-transparent: rgba(128, 128, 128, 0);
    
    opacity: 1;
    background: linear-gradient(to right, var(--splitter-color-transparent) var(--splitter-percentage-left), var(--splitter-color-full) var(--splitter-percentage-left-end), var(--splitter-color-full) var(--splitter-percentage-right), var(--splitter-color-transparent) var(--splitter-percentage-right-end));
    height: 1px;
    border: 0;
}

.nav-button {
    user-select: none;
    text-decoration: none;
    border: solid var(--color-intruder-border);
    border-width: 1px;
    margin: 0 .5rem 0 1rem;
    color: var(--color-fg);
}
.nav-button:hover {
    background-color: var(--color-intruder-hover);
}
.nav-button:active {
    background-color: var(--color-intruder-bg-checked);
}

.nav-button.selected {
    color: var(--color-intruder-highlight-text);
    background-color: var(--color-bg);
    border-right-width: 0;
    margin-right: 0;

    --intruder-btn-box-shadow-color: var(--color-intruder-highlight);
    box-shadow: inset var(--intruder-card-box-shadow) 0 0 var(--intruder-btn-box-shadow-color);
}

.tab-button {
    user-select: none;
    text-decoration: none;
    border: solid var(--color-intruder-border);
    border-width: 1px;
    color: var(--color-fg);
    background-color: var(--theme-nav-bg);
    box-shadow: none;

    display: flex;
    flex-direction: row;
    gap: 8px;
    height: 35px;
    padding: 8px;
    align-items: center;
    z-index: 1;
    min-width: 150px;
}
.tab-button:hover {
    background-color: var(--color-intruder-hover);
    border: solid var(--color-intruder-border);
    border-width: 1px;
}
.tab-button:active {
    background-color: var(--color-intruder-bg-checked);
    --intruder-card-box-shadow: 3px;
}

.tab-button.selected {
    color: var(--color-intruder-highlight-text);
    background-color: var(--color-bg);
    border-color: var(--theme-button-active-border);

    --intruder-btn-box-shadow-color: var(--color-intruder-highlight);
    box-shadow: inset 0 var(--intruder-card-box-shadow) 0 var(--intruder-btn-box-shadow-color);
    border-bottom-width: 0;
}

.tab-button-filler {
    border-style: solid;
    border-width: 0 1px 0 1px;
    border-color: transparent;

    height: 4px;
    margin-bottom: -1px;
    z-index: 1;
}

.tab-button-filler.selected {
    border-left-color: var(--theme-button-active-border) !important;
    border-right-color: var(--theme-button-active-border) !important;
    border-bottom-color: var(--color-bg) !important;
    border-bottom-width: 1px !important;
}

.tab-button-filler.position-left {
    height: auto !important;
    margin-bottom: 0 !important;
    border-width: 1px 0 1px 0;

    width: 4px;
    margin-right: -1px;

}

.tab-button.selected.position-left {
    border-bottom-width: 1px !important;
    border-right-width: 0;
    box-shadow: inset var(--intruder-card-box-shadow) 0 0 var(--intruder-btn-box-shadow-color);
}

.tab-button-filler.selected.position-left {
    border-top-color: var(--theme-button-active-border) !important;
    border-bottom-color: var(--theme-button-active-border) !important;
    border-right-color: var(--color-bg) !important;
    border-right-width: 1px !important;
}

input[type=text].form-control {
    border-color: var(--color-intruder-border);
    border-radius: 0;
    background-color: var(--bs-body-bg);
}

.form-control::placeholder {
    color: #ffffff80;
}

.agent-verified {
    font-size: 10pt;
    color: var(--color-intruder-highlight-text);
}

.form-check {
    appearance: none;
    border-radius: 0 !important;
    border: 1px solid var(--color-intruder-border);
    width: 25px !important;
    height: 25px !important;
    margin: 0;
    padding: 0;
    background-color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
}

.form-check:hover {
    background-color: var(--color-intruder-hover);
}
.form-check:active {
    background-color: var(--color-intruder-highlight);
}
.form-check:disabled {
    opacity: 0.8;
    pointer-events: none;
}

.form-check[aria-checked=true] {
    background-color: var(--color-intruder-bg-checked);
}
.form-check span {
    font-family: "bootstrap-icons";
    font-size: 24px;
    color: var(--color-fg);
}
.form-check:checked {
    content: "\F26E";
    font-family: "bootstrap-icons";
    background-color: var(--color-intruder-bg-checked);
}
.form-check:checked:after {
    content: "\F26E";
    font-family: "bootstrap-icons";
    font-size: 24px;
    color: var(--color-fg);
}

.text-dark {
    color: gray !important;
}

textarea {
    &.form-control {
        border-radius: 0 !important;
        border-color: var(--color-intruder-border);
    }
}