/* Root Colors */
@import url(/css/roboto.css);
:root {
    --blue-main: #2E6CF0;
    --blue-secondary: #2E55A9;
    --light-primary: #FFFFFF;
    --light-secondary: #F4F6FA;
    --dark-primary: #1B2027;
    --dark-secondary: #282F38;
    --dark-third: #42474E;
    --light-gray-primary: #C9D1DD;
    --gray-primary: #6A7993;
    --gray-secondary: #6D7784;
    --gray-third: #4e535a;
    --light-gray-third: #C8D1DD;
    --light-gray-secondary: #ECEFF5;


    --variable-width: 1080px;
    font-family: 'roboto', sans-serif;
    
}
html {
	background: var(--dark-primary);
}
body{
    margin: 0;
    display: flex;    
    min-height: 100vh;
    flex-direction: column;
    overflow-x: hidden;
    text-overflow: ellipsis;
    background: var(--dark-primary) !important;
}
form {
    margin: 0;
}
b {
    font-weight: 500;
}
select {
    outline: 0;
    border: 0;
    background-color: var(--light-gray-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    fill: var(--gray-primary);
    color: var(--gray-primary);
    transition: background .1s, color .1s, text-decoration-line .1s;
}
select:hover {
    background-color: var(--light-secondary);
}
.hidden {
    display: none;
}
.active {
    display: block !important;
}
.mobile {
    display: none !important;
}
.desktop {
    display: block !important;
}
.header_hr {
    height: 2px;
    background: var(--blue-main);
    margin: 0;
    border-color: var(--blue-main);
}
input {
    font-family: 'roboto', sans-serif;
}
main {
    display: flex;
    flex-direction: column;
    flex:1;
    background: var(--light-primary);
}
main > * {
    padding-bottom: 32px;
    padding-top: 32px;
    box-sizing: border-box;
}
main > *:first-child, footer{
    padding-top: 32px;
}
main > *:last-child, footer {
    padding-bottom: 32px;
}
.default-p {
    margin: 0;
}
.default-anchor, a {
    color: var(--blue-main);
}
.default-anchor:hover, .default-anchor:active {
    text-decoration: underline;
    color: var(--blue-main);
}
.general-div {
    background-color: var(--light-secondary);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 32px;
}
.default-div {
    display: flex;
    flex-direction: column;
    gap:16px;
}
.default-h1, h1 {
    color: var(--dark-secondary);
    font-size: 48px;
    font-weight: 500;
    margin: 0;
}
.default-h2 {
    color: var(--dark-secondary);
    font-size: 32px;
    font-weight: 500;
    margin: 0;
}
.default-h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}
.default-h4 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    color: var(--dark-secondary);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: .3px;
    margin: 0;
}
.default-h5 {
    color: var(--dark-secondary);
    margin: 0;
    font-size: 16px;
}
.default-subheading {
    color: var(--blue-main);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4%;
}
.default-hr {
    width: 100%;
    border-color: var(--light-gray-primary);
    border-top: none;
    color: var(--light-gray-primary);
    outline: none;
    margin: 0;
}
.default-inline-flex {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:16px;
}
.default-heading-div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.blue-main {
    color: var(--blue-main);
}
.gray-primary {
    color: var(--gray-primary);
}
.dark-third {
    color: var(--dark-third);
}
a:hover .default-h4, a:hover .default-h5 {
    color: var(--blue-main);
    text-decoration: underline;
    text-decoration-style: solid;
}
.article-entry > img {
    min-height: 144px;
    outline: 0px;
    border: 0px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--light-primary);
    background-color: var(--light-secondary);
    box-sizing: border-box;
    transition: 125ms linear;
}
a:hover .article-entry > img[src=""] {
    background-color: var(--light-gray-secondary);
    transition: 125ms linear;
}
/* Warning Div */
.warning-div {
    display: flex;
    position: relative;
    flex-direction: row;
    background-color: var(--light-primary);
    border-radius: 4px;
    align-items: center;
    border: solid 1px var(--light-gray-primary);
    padding: 8px;
    gap: 12px;
    button{
       opacity: 0%; 
    }
}
.warning-div:hover {
    transition: linear 150ms;
    button{
       opacity: 100%; 
    }
}
.warning-div button{
    background-color: transparent;
    border: transparent;
    border-radius: 4px;
    display: flex;
    align-content: center;
    justify-content: center;
    margin: 0;
    position: absolute;
    top: 4px;
    right: 4px;
    :active{
        border-radius: 4px;
        /* box-shadow: inset 2px black; */
    }
}
.informationSVG{
    width: fit-content;
    height: fit-content;
    max-width: 16px;
    max-height: 16px;
}
.warning-div p1 {
    font-size: 12px;
    color: var(--gray-secondary);
}
/* Header CSS */
    .header_div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 16px;
        padding-top: 16px;
        background: var(--dark-primary);

        flex: none;
        align-self: stretch;

        padding-left: max(16px, calc((100% - var(--variable-width)) / 2));
        padding-right: max(16px, calc((100% - var(--variable-width)) / 2));
    }
    main > *, .main_header > *, .main_footer {
        padding-left: max(16px, calc((100% - var(--variable-width)) / 2));
        padding-right: max(16px, calc((100% - var(--variable-width)) / 2));
    }

    .regular_search_form {   
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        background: #FFFFFF;
        border: 2px solid var(--dark-secondary);
        border-radius: 8px;
    }
    
    .regular_search_input {
        width: 100%;
    }
    .regular_search_form:focus-within {
            box-sizing: border-box;
            outline: 2px solid var(--blue-main);
            outline-offset: 2px;
    }
    .regular_search_form > * {
        padding: 8px 16px;
        outline: none;
        border: none;
        background: none;
    }
    .regular_search_form > button, .regular_search_button {
        cursor: pointer;
    }
    .header_search{
        display: flex;
        justify-content: center;
    }

    .header_nav_ul {
        display: flex;
        flex-direction: row;
        list-style: none;
        gap: 16px;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .header_nav {
        display: flex;
        flex-direction: column;
        background: var(--dark-secondary);
        padding-top: 16px;
        padding-bottom: 16px;
        gap: 16px;
    }
    .header_label {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .header_anchor {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 12px;
        padding-right: 16px;
        gap: 16px;
        color: white;
        transition: 125ms linear;
       
    }
    /* Header Hover */
        .article_hover {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            background: var(--light-primary);
            border-radius: 4px;
            box-shadow: 0 4px 6px rgb(0, 0, 0, 0.1);
        }
        .header_category {
            height: 100%;
        }
        .header_category_ul {
            width: fit-content;
            height: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            background: var(--light-secondary);
            border: 1px solid var(--light-gray-primary);
            border-radius: 4px 0px 0px 4px;

            h4 {
                margin: 0;
                font-size: 16px;
                font-weight: normal;
                color: var(--dark-secondary) !important;
            }
        }
        .header_category_entry {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 8px 16px;
            width: 100%;
            border-bottom: 1px solid var(--light-gray-primary);
            box-sizing: border-box;
        }
        .header_category_entry:last-child{
            border: none;
            height: 100%;
        }
/* Icon CSS */
a {
    text-decoration-line: none;
}
.general-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background-color: var(--blue-main);
    border-radius: 4px;
    border: 1px solid #91B1F5;
    box-sizing: border-box;
    color: #91B1F5;

    font-size: 12px;
}

/* Hover Menu */
    .header_nav {
        position: relative;
    }

    .article_hover {
        position: absolute;
        top: 48px;
        display: none;
        z-index: 1000;
    }

    .article_hover.show {
        display: flex;
    }

    /* Ensure proper layout */
    .article_hover {
        flex-direction: row;
    }

    .header_entries_div {
        flex: 1;
    }

    /* Hide all article sections except active one */
    .header_entries {
        display: none;
    }

    .header_entries h4 {
        font-weight: bold;
        color: var(--dark-secondary);
        font-size: 14px;
        text-transform: uppercase;
        margin: 0;
    }

    .header_entries {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 4px;
        background: #FFFFFF;
    }
    .header_entries > hr {
        border-color: var(--light-gray-primary);
        border-top: none;
        color: var(--light-gray-primary);
        outline: none;
    }
    .header_dropdown_entry {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-right: 12px;
    }
    .header_nav_li {
        border-radius: 4px;
    }
    .header_nav_li:hover {
        background-color: var(--dark-primary);
        transition: 125ms linear;
    }
    .header_nav_li.active {
        background-color: var(--blue-secondary) !important;
        transition: 125ms linear;
    }
    .header_dropdown_entry.active:hover {
        background-color: var(--blue-main) !important;
        transition: 125ms linear;
    }
    .header_entries ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-left: 8px;
    }
    .header_article_a {
        display: flex;
        flex-direction: row;
        gap: 8px;
        color: var(--blue-main);
        align-items: center;
    }
    .header_article_a:hover:active{
        color: var(--blue-secondary);
    }
    .header_article_p {
        display: -webkit-box;        
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;

        overflow: hidden;            
        text-overflow: ellipsis;     
        word-break: break-word; 
        margin: 0;
    }

    .header_mobile_nav {
        display: none;
    }
    .header_nav .search_bar_regular {
        display: none;
    }
    .header_entries, .header_entries_div {
    border-radius: 4px;
    }

/* Footer */
    footer {
        margin-top: auto;
    }
    .main_footer {
        display: flex;
        flex-direction: row;
        padding-top: 32px;
        padding-bottom: 32px;
        gap: 16px;

        background: var(--dark-primary);
    }
    .footer_logo {
        display: flex;
        flex-direction: column;
        padding: 0px;
        gap: 16px;
        max-width: 224px;
        color: var(--light-gray-primary);
    }
    .footer_nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 12px 16px;
        gap: 16px;
        box-sizing: border-box;
    }
    .footer_nav_section {
        display: flex;
        gap:8px;
        flex-direction: column;
        h4 {
            margin: 0;
            color: var(--light-primary);
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        a {
            color: var(--light-gray-primary);
            transition: 125ms linear;
        }
        a:hover, a:active {
            color: var(--light-primary);
            transition: 125ms linear;
        }
    }

/* Nav Directory */
    .nav_dir_ol {
        display: flex;
        flex-direction: row;
        list-style: none;
        gap: 8px;
        margin: 0;
        padding: 0;
    }    
    .nav_dir_li {
        display: flex;
        color: var(--blue-main);
        align-items: center;
    }
    .nav_dir_anchor {
        color: var(--blue-main);
    }
    .nav_dir_anchor:hover {
        color: var(--blue-secondary);
        text-decoration: underline;
    }
/* JSON Factsheet and Search */
    .default-box {
            display: flex;
            flex-direction: column;
            width: fit-content;
            border-radius: 4px;
            background-color: var(--light-primary);
            border: 1px solid var(--light-gray-third);
            padding: 16px;
            gap: 8px;
            box-sizing: border-box;
    }
    .default-box-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-content: center;
        gap: 8px;
    }
    .default-box-content > :first-child{
        margin-right: auto;
    }
    .default-box-anchor {
        width: fit-content;
    }
    .value-p {
        margin: 0;
        color: var(--gray-primary);
        align-content: center;
    }
    .default-box-heading {
        display: flex;
        flex-direction: row;
        gap: 8px;
        justify-content: space-between;
        align-items: center;
    }
    .default-box-heading > :first-child {
        margin-right: auto;
    }
    .default-box-heading > :nth-child(2) {
        margin-left: 8px;
    }
/* Tags */
    .tag {
        min-width: 18px;
        width: fit-content;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border-radius: 4px;
        padding: 2px 6px;
        background-color: rgba(129, 147, 185, 0.15);
        color: var(--gray-primary);
    }
    .tag > * {
        display: inline-block;
        text-align: center; /*Redudant centering*/
    }
    .tag.ref{
        padding: 2px !important;
        transition: background .1s, color .1s, text-decoration-line .1s;
    }
    .tag.ref:hover {
        background-color: var(--light-secondary);
    }
    .tag.red{
        background-color: rgba(255, 69, 69, 0.1);
        color: #E86365 !important;
    }
    .tag.green{
        background-color: rgba(0, 255, 61, 0.1);
        color: #53A667 !important;
    }
    .tag-container {
        display: flex;
        flex-direction: row;
        gap: 4px;
    }
/* Breakpoints */
    @media (max-width: 768px) {
        main > * {
            padding-bottom: 16px;
            padding-top: 16px;
        }
        main > *:first-child, footer{
            padding-top: 16px;
        }
        main > *:last-child, footer {
            padding-bottom: 16px;
        }
        .mobile {
            display: block !important;
        }
        .desktop {
            display: none !important;
        }
        .default-box-anchor {
            width: 100%;
        }
        .default-box {
            width: 100%;
        }
        .search_bar_regular {
            display: none;
        }
        .header_nav .search_bar_regular {
            display: inline;
        }
        .header_mobile_nav {
            display: flex;
            justify-content: center;            
        }
        .header_mobile_nav > button {
            background: none;
            border: none;
            outline: none;
            min-height: 32px;
            min-width: 32px;
            margin: 0;
            cursor: pointer;
        }
        .header_mobile_nav > button:active {
            background: var(--dark-secondary);
            border-radius: 8px;
        }
        .header_mobile_button.cancel {
            display: none;
        }
        .header_nav_ul {
            flex-direction: column;
        }
        .article_hover {
            position: relative;
            top: 0;
        }
        .header_category {
            display: none;
        }
        .header_anchor {
            justify-content: space-between;
        }
        /* Opening */
        .header_nav > .search_bar_regular, .header_nav > .header_nav_ul {
            display: none;
        }
        /* Footer */
        .main_footer {
            padding-top: 16px;
            padding-bottom: 16px;
            flex-direction: column;
        }
        .footer_logo {
            max-width: 100%;
            width: 100%;
        }
    }