:root {
    --special: #d63384;
    font-size: 16px;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Franklin Gothic', 'Franklin Gothic Book', 'Franklin Gothic Demi', sans-serif !important;
    background-color: var(--bs-secondary)!important;
    overflow: hidden;
}

li {
    margin-bottom: 1rem;
}


/* QUERIES */
@font-face {
    font-family: 'Franklin Gothic Demi';
    src: url("../../assets/FRADMCN.TTF");
}

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

@media screen and (max-width: 1100px) {
    #breadcrumbs {
        display: none !important;
    }
}

@media screen and (max-width: 927px), (max-height:600px) {
    #warning-screensize {
        display: flex !important;
    }

    #warning {
        display: block !important;
    }

    #warning-orientation {
        display: none !important;
    }

    #warning {
        border: #ee5b67 3px solid !important;
    }
}

@media screen and ((min-width: 600px) and (min-height: 927px) and (orientation: portrait)) {
    #warning-orientation {
        display: block !important;
    }

    #warning {
        display: block !important;
    }
}

@media screen and ((min-width: 600px) and (min-height:927px)) {
    #warning-screensize {
        display: none !important;
    }
    #warning {
        border: var(--bs-primary) 3px solid !important;
    }
}

@container (width < 952px) {
    #main-nav {
        flex-wrap: nowrap;
        scale: 90%;
    }
}


/* ELEMENTS */
#map-background {
    margin: auto;
    position: absolute;
    background-image: url("../../assets/img/map/default.png");
    background-color: #010104;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background .5s ease-out;
}

#map-content {
    transition-property: opacity, display;
    transition-duration: .5s;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
    opacity: 1;
}

#map-content[style*="display: none"] {
    opacity: 0;
}

#map-content[style*="display: block"] {
    z-index: 1;
}

#threats-nav > .nav-link, #mitigations-nav > .nav-link, #mitigations-8-nav > .nav-link {
    color: black;
    box-shadow: none !important;
}

    #threats-nav > .nav-link.active, #mitigations-nav > .nav-link.active, #mitigations-8-nav > .nav-link.active {
        color: white;
        box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
    }

#majorrecs::before {
    background-color: springgreen;
    width: 300px;
    height: 24px;
}

#bin #graphic {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    max-height: 47.5%;
    bottom: 0;
}

#references-nav .dropdown-toggle::after{
    transform: rotate(-90deg);
}

#references-collapsed .dropdown-toggle::after {
    transform: rotate(90deg);
    vertical-align: middle !important;
}

#references-nav .btn[aria-expanded="true"], #references-nav .btn:hover {
    transform: scale(1.25);
}

#info-icon:hover {
    transform: scale(1.25);
    pointer-events: all;
}

#info-icon.show:hover {
    transform: scale(1.35);
    pointer-events: all;
}

#info-icon.show {
    transform: scale(1.25);
}

#welcome .card-header {
    border-bottom: 12px solid #ee5b67 !important;
}

#bin .card-header > .card-title {
    opacity: 25%;
}

#chord-diagram text {
    font-size: 3vh;
    font-family: 'Franklin Gothic Demi';
}

#chord-diagram .chord {
    cursor: pointer;
    opacity: 0.8;
}

#chord-diagram .tooltip {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 8px;
    border-radius: 4px;
    pointer-events: none;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

#country-info > * {
    max-height: 60vh;
}

#warning {
    background-image: url("../../assets/img/map/themap_bg.png");
    background-size: cover;
    background-position: center;
}


/* CUSTOM CLASSES */
.container {
    container-type: inline-size;
}

.rotated {
    writing-mode: sideways-lr;
}

.pin {
    cursor: pointer;

    .pin-icon {
        width: 18vh;
        height: 12vh;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
    }

    &.selected {
        pointer-events: none;
    }

    &.selected > .pin-icon {
        transform: scale(1.25);
    }

    &.disabled {
        opacity: .25;
        pointer-events: none;
    }

    &:hover > .pin-icon {
        transform: scale(1.25);
    }

    &:hover > .pin-label {
        transform: scale(1.2);
    }

    &:hover > .popup {
        display: flex;
        margin-top: 16px;
        animation: scale .5s both;
    }
}

.popup {
    display: none;
    position: absolute;
    max-width: 12vw;
    top: 100%;
    padding: 8px;
    width: max-content;
    transform-origin: center top;

    &:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        bottom: 100%;
        left: calc(50% - 12px);
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid var(--bs-secondary);
    }
}

.text-shadow {
    text-shadow: 0 0 8px black;
}

.glow {
    box-shadow: currentColor 0px 0px 6px 4px;
}

.lighten:before {
    opacity: 0.75;
}

.show-caret:hover {
    background-image: linear-gradient(rgb(1 1 0/40%) 0 0);
}

.font-alt {
    font-family: "Minion Pro";
}

.hide {
    --bs-text-opacity: .25 !important;
    cursor: default !important;
}

.brighten {
    filter: grayscale(1) brightness(2) contrast(3);
}

.obscure {
    filter: grayscale(1) opacity(0.5);
    pointer-events: none;
}

.scrollbar-adjustment {
    animation: scrolling forwards;
    animation-timeline: scroll(self);
}

.text-highlight {
    color: var(--bs-white);
    font-family: 'Franklin Gothic Demi';
}


/* ANIMATIONS */
@keyframes scale {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes scrolling {
    0%, to {
        padding-right: 9px;
    }
}

@keyframes fadeoutin {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes grow {
    0% {
        display: none;
    }

    100% {
        display: block;
    }
}

@keyframes slide {
    0% {
        display: none;
        clip-path: inset(0);
    }

    100% {
        clip-path: inset(0 0 100% 0);
    }
}


/* BOOTSTRAP HELPER CLASSES */
.w-fill {
    width: -webkit-fill-available !important;
    width: -moz-available !important;
}

.h-fill {
    height: -webkit-fill-available !important;
    height: -moz-available !important;
}

.h-max-fill {
    max-height: -webkit-fill-available !important;
    max-height: -moz-available !important;
}

.w-max-fill {
    max-width: -webkit-fill-available !important;
    max-width: -moz-available !important;
}

.vw-33 {
    width: 33vw;
}

.min-vw-5 {
    min-width: 5vw;
}

.contain-layout {
    contain: layout;
}

.contain-content {
    contain: content;
}

.contain-strict {
    contain: strict;
}

.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.text-justify {
    text-align: justify;
}

.text-smallcaps {
    font-variant: small-caps !important;
}

.text-faded {
    color: #d6efff !important;
}

.justify-items-center {
    justify-items: center !important;
}


/* BOOTSTRAP OVERRIDES */
.card {
    --bs-bg-opacity: 75%;
    --bs-card-cap-bg: rgba(0,0,0,0)!important;
}

.card-header, .card-footer {
    border: none !important;
}

.btn {
    border: none !important;
}

.btn-secondary-2[aria-expanded="true"], .btn-secondary-2:hover {
    background-color: var(--bs-primary) !important;
    border: none !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--bs-primary) !important;
}

.shadow {
    --bs-box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}


/* WEBKIT OVERRIDES */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    -webkit-border-radius: 100vw;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 100vw;
}

::-webkit-scrollbar-thumb {
    background: var(--bs-light);
    -webkit-border-radius: 100vw;

    &:hover {
        background-color: var(--bs-white);
    }

    &:active {
        background: var(--bs-light);
    }

    &:vertical {
        min-height: 10px;
    }

    &:horizontal {
        min-width: 10px;
    }
}