/* alpine: default hide */
[x-cloak] {
    display: none !important;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Font: Source Sans Pro */

@font-face {
    font-family: SourceSansPro;
    src: url('/static/font/source-sans-pro/SourceSansPro-Regular.ttf');
}
@font-face {
    font-family: SourceSansPro;
    src: url('/static/font/source-sans-pro/SourceSansPro-Bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: SourceSansPro;
    src: url('/static/font/source-sans-pro/SourceSansPro-Italic.ttf');
    font-style: italic;
}
@font-face {
    font-family: SourceSansPro;
    src: url('/static/font/source-sans-pro/SourceSansPro-BoldItalic.ttf');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: SourceSansPro;
    src: url('/static/font/source-sans-pro/SourceSansPro-Light.ttf');
    font-weight: 300;
}
@font-face {
    font-family: SourceSansPro;
    src: url('/static/font/source-sans-pro/SourceSansPro-LightItalic.ttf');
    font-style: italic;
    font-weight: 300;
}

body {
    font-family: SourceSansPro;
}

/* ----------------------------------------------------------------------------------------------------------------- */

#skip-to-main-content {
    width: fit-content;
    padding: 0;
    margin: 4px;
}

#navbar {
    padding: 0.25rem 0;
    background-color: var(--dhs-blue);
}

#navCisaLogo {
    border-radius: 22px;
}
#navCisaLogo:focus,
#navCisaLogo:hover {
    outline: 3px solid white;
}

/* no underline normally, shows on hover/focus, disappears on click */
.underline-hover {
    text-decoration: none !important;
}
.underline-hover:focus,
.underline-hover:hover {
    text-decoration: underline !important;
}
.underline-hover:active {
    text-decoration: none !important;
}

#navDeciderHome {
    color: var(--bs-navbar-brand-color) !important;
    display: inline-block !important;
    margin-left: 1.5rem !important;
    padding-left: 1.5rem !important;
    border-left: 1px solid white;
}
@media (min-width: 992px) {
    #navDeciderHome {
        color: var(--bs-navbar-brand-color) !important;
        display: inline-block !important;
        padding-right: 1.5rem !important;
        border-right: 1px solid white;
    }
}

#versionPicker a {
    color: var(--bs-navbar-brand-color) !important;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* NavBar - Mini Tech Search */

@media (max-width: 991px) {
    #navMiniSearch {
        max-width: 100% !important;
        position: relative;
    }
}

@media (min-width: 992px) {
    #navMiniSearch {
        max-width: min(40%, 450px) !important;
        position: relative;
    }
}

#navMiniSearchDropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    max-height: max(200px, 35dvh);
    overflow-y: scroll;
    background-color: #fff;
    border: 2px solid var(--bs-border-color);
}
#navMiniSearchDropdownList {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#navMiniSearchDropdownList > li + li {
    border-top: 2px solid var(--bs-border-color);
}
#navMiniSearchDropdownList > li > a {
    text-decoration: none !important;
}
#navMiniSearchDropdownList > li > a:focus,
#navMiniSearchDropdownList > li > a:hover {
    text-decoration: underline !important;
}
#navMiniSearchDropdownList > li:hover,
#navMiniSearchDropdownList > li:focus-within {
    background-color: #00ffff20 !important;
}

/* ----------------------------------------------------------------------------------------------------------------- */

/* grow to at least 100% (push footer to bottom on short pages) */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#btnScrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

/* bootstrap-icon: bold */
.bi-font-bold::before {
    font-weight: 900 !important;
}

#deciderFooter {
    color: white;
    background-color: var(--dhs-blue);
}

:root {
    /* ATT&CK links */
    --attack-orange: #b0371c; /* adjusted for contrast on gray */
    --attack-orange-alt: #cc0000;

    /* higher contrast links */
    --strong-blue: #0000aa;
    --strong-blue-alt: #0000ff;

    /* higher contrast code */
    --strong-code: #900022;

    /* primary */
    --dhs-blue: #005288;
    --dhs-blue-rgb: 0,82,136;
    --dhs-gray: #c0c2c4;
    --dhs-dark-gray: #5a5b5d;
    --dhs-dark-gray-rgb: 90,91,93;

    /* secondary */
    --dhs-red: #c41230;
    --dhs-light-blue: #0078ae;
    --dhs-green: #5e9732;

    /* color wheel */
    --dhs-gray-20: #edeeee;
    --dhs-blue-60: #003e67;
    --dhs-blue-60-rgb: 0,62,103;
    --dhs-red-60: #950e24;
    --dhs-red-60-rgb: 149,14,36;
    --dhs-green-60: #477326;
    --dhs-green-70: #314f1a;
    --dhs-green-70-rgb: 49,79,26;
    --dhs-dark-gray-60: #444547;
    --dhs-dark-gray-60-rgb: 68,69,71;
}

/* Input | DHS Blue Focus */
.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--dhs-blue);
    outline: 0;
    box-shadow: 0 0 0 .3rem rgba(var(--dhs-blue-rgb), .5);
}

/* Navbar - Cleaner mini search focus */
#navbar .form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #00ffff;
    outline: 0;
    box-shadow: 0 0 0 .25rem #00ffffa1;
}

/* Navbar - Cleaner button focus */
#navbar .btn {
    --bs-btn-focus-shadow-rgb: 0, 255, 255;
}

/* Select | DHS Blue Focus */
.form-select:focus {
    border-color: var(--dhs-blue);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--dhs-blue-rgb), .25);
}

/* BG Secondary | DHS Dark Gray */
.text-bg-secondary {
    color: #fff !important;
    background-color: RGBA(var(--dhs-dark-gray-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* Check | DHS Blue */
.form-check-input:checked {
    background-color: var(--dhs-blue);
    border-color: var(--dhs-blue);
}
.form-check-input:focus {
    border-color: var(--dhs-blue);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--dhs-blue-rgb), .25);
}

/* Button Secondary | DHS Gray (Dark) */
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dhs-dark-gray);
    --bs-btn-border-color: var(--dhs-dark-gray);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dhs-dark-gray-60);
    --bs-btn-hover-border-color: var(--dhs-dark-gray-60);
    --bs-btn-focus-shadow-rgb: var(--dhs-dark-gray-60-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dhs-dark-gray-60);
    --bs-btn-active-border-color: var(--dhs-dark-gray-60);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dhs-dark-gray);
    --bs-btn-disabled-border-color: var(--dhs-dark-gray);
}

/* Button Primary | DHS Blue */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dhs-blue);
    --bs-btn-border-color: var(--dhs-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dhs-blue-60);
    --bs-btn-hover-border-color: var(--dhs-blue-60);
    --bs-btn-focus-shadow-rgb: var(--dhs-blue-60-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dhs-blue-60);
    --bs-btn-active-border-color: var(--dhs-blue-60);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dhs-blue);
    --bs-btn-disabled-border-color: var(--dhs-blue);
}

/* Button Success | DHS Green (60) */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dhs-green-60);
    --bs-btn-border-color: var(--dhs-green-60);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dhs-green-70);
    --bs-btn-hover-border-color: var(--dhs-green-70);
    --bs-btn-focus-shadow-rgb: var(--dhs-green-70-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dhs-green-70);
    --bs-btn-active-border-color: var(--dhs-green-70);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dhs-green-60);
    --bs-btn-disabled-border-color: var(--dhs-green-60);
}

/* Button Danger | DHS Red */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dhs-red);
    --bs-btn-border-color: var(--dhs-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dhs-red-60);
    --bs-btn-hover-border-color: var(--dhs-red-60);
    --bs-btn-focus-shadow-rgb: var(--dhs-red-60-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dhs-red-60);
    --bs-btn-active-border-color: var(--dhs-red-60);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dhs-red);
    --bs-btn-disabled-border-color: var(--dhs-red);
}

.answer-card .card-header mark {
    padding: 0 !important;
    background-color: inherit;
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--dhs-green);
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
}
.answer-card .card-body mark {
    padding: 0 !important;
    background-color: inherit;
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #0f0;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
}

.answer-card {
    --bs-card-inner-border-radius: 0;
    --bs-card-border-radius: 0;

    --bs-card-cap-color: black;
    --bs-card-cap-bg: var(--dhs-gray-20);

    --bs-card-border-color: var(--dhs-gray);

    --bs-card-color: white;
    --bs-card-bg: var(--dhs-blue-60);
}
.answer-card .card-header {
    padding: calc(var(--bs-card-cap-padding-y) * 0.4) calc(var(--bs-card-cap-padding-x) * 0.4);
}
.answer-card .card-footer {
    padding: calc(var(--bs-card-cap-padding-y) * 0.4) calc(var(--bs-card-cap-padding-x) * 0.4);
}
.answer-card code {
    color: rgb(110, 255, 110);
}
.answer-card .stretched-link:hover::after,
.answer-card .stretched-link:focus::after {
    background-color: #00ffff20;
}

.link-attack-orange {
    color: var(--attack-orange) !important;
    -webkit-text-decoration-color: var(--attack-orange) !important;
    text-decoration-color: var(--attack-orange) !important;
}
.link-attack-orange:hover,
.link-attack-orange:focus {
    color: var(--attack-orange-alt) !important;
    -webkit-text-decoration-color: var(--attack-orange-alt) !important;
    text-decoration-color: var(--attack-orange-alt) !important;
}

/* <code> contrast adjust */
.strong-code {
    color: var(--strong-code) !important;
}

.has-strong-codes code {
    color: var(--strong-code) !important;
}

/* <a> contrast adjust */
.link-strong-blue {
    color: var(--strong-blue) !important;
    -webkit-text-decoration-color: var(--strong-blue) !important;
    text-decoration-color: var(--strong-blue) !important;
}
.link-strong-blue:hover,
.link-strong-blue:focus {
    color: var(--strong-blue-alt) !important;
    -webkit-text-decoration-color: var(--strong-blue-alt) !important;
    text-decoration-color: var(--strong-blue-alt) !important;
}

.has-strong-blue-links a {
    color: var(--strong-blue) !important;
    -webkit-text-decoration-color: var(--strong-blue) !important;
    text-decoration-color: var(--strong-blue) !important;
}
.has-strong-blue-links a:hover,
.has-strong-blue-links a:focus {
    color: var(--strong-blue-alt) !important;
    -webkit-text-decoration-color: var(--strong-blue-alt) !important;
    text-decoration-color: var(--strong-blue-alt) !important;
}

.coocCollapseDiv:not(.show) {
    display: block;
    height: 20px;
    overflow: hidden;
}

.coocCollapseDiv {
    max-height: 30dvh;
    overflow-y: scroll;
}

.coocCollapseDiv code {
    color: #ad1a64;
}

#successTechAndSubsList {
    list-style-type: none;
    padding-left: 1rem;
}

#successPage header + section,
#successPage section + section {
    border-top: 2px solid var(--bs-border-color);
    margin-top: 1rem;
    padding-top: 1rem;
}

.badge-group .badge + .badge {
    margin-left: 0.2rem !important;
}

/* < md (compact stacked view) */
@media (max-width: 767px) {
    .filterCheckboxes {
        max-height: 300px;
        overflow-y: scroll;
    }
}
/* >= md (sidebar filters) */
@media (min-width: 768px) {
    .filterCheckboxes {
        max-height: 25dvh;
        overflow-y: scroll;
    }
}

.filterRow {
    border: 2px solid var(--bs-border-color);
    border-radius: 10px;
    background-color: var(--bs-light);
}

#shoppingCart .offcanvas-header {
    background-color: var(--dhs-blue);
    border-bottom: 2px solid var(--bs-border-color);
    color: white;
}

.cart-entry {
    border: 2px solid var(--bs-border-color);
    background-color: var(--bs-light);
    border-radius: 10px;
    padding: 0.5rem;
}

.cart-entry textarea {
    min-height: 30px;
    height: 75px;
    max-height: max(15dvh, 100px);
    overflow-y: scroll;
}

.btn-border-dark {
    --bs-btn-border-color: #8f8f8f;
}

#fullTechniqueSearchBox,
#answerCardSearchBox {
    outline: 4px solid var(--bs-border-color);
}

/* used for "..." in full search snippets */
span.redtext {
    color: rgb(51, 255, 0) !important;
    font-weight: 700 !important;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Classification Banner Styling (modified from original) */
/* https://codepen.io/kvangrae/pen/EWJBpo */

.classification-banner:before,
.classification-banner:not([data-single-banner]):after {
    display: block;
    background-color: #505050;
    color: #fff;
    font-weight: bold;
    text-align: center;
    content: attr(data-classification);
}
.classification-banner[data-banner-content]:before,
.classification-banner[data-banner-content]:not([data-single-banner]):after {
    content: attr(data-banner-content);
}
.classification-banner[data-classification^='U']:before,
.classification-banner[data-classification^='U']:after {
    background-color: #08680e;
}
.classification-banner[data-classification^='C']:before,
.classification-banner[data-classification^='C']:after {
    background-color: #175b96;
}
.classification-banner[data-classification^='S']:before,
.classification-banner[data-classification^='S']:after {
    background-color: #b40a04;
}
.classification-banner[data-classification^='T']:before,
.classification-banner[data-classification^='T']:after {
    background-color: #f0ad4e;
    color: #000;
}
.classification-banner[data-font-size-small]:before,
.classification-banner[data-font-size-small]:not([data-single-banner]):after {
    font-size: 0.8em;
}
.classification-banner[data-font-size-large]:before,
.classification-banner[data-font-size-large]:not([data-single-banner]):after {
    font-size: 1.33333333em;
}
body.classification-banner {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
body.classification-banner:before,
body.classification-banner:not([data-single-banner]):after {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
}
body.classification-banner:before {
    top: 0;
}
body.classification-banner:not([data-single-banner]):after {
    bottom: 0;
}

/* ----------------------------------------------------------------------------------------------------------------- */