/**
 * BASIC FONT & TYPOGRAHY
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

html, body, td, th, p, li {
    font-family: Roboto, sans-serif;
    color: #000000;
    font-size: 1rem; /* calc(1rem + 0.2vw); */
    line-height: 1.5rem; /* calc(1.6rem + 0.5vw); */
}

.h1, h1 {
    font-family: 'Bebas Neue', sans-serif;
    color: #000000;
    font-weight: 400;
    text-align: center;
}

.h2, h2 {
    font-family: 'Bebas Neue', sans-serif;
    color: #000000;
    font-weight: 400;
}

.h3, h3 {
    font-family: 'Bebas Neue', sans-serif;
    color: #000000;
    font-weight: 400;
}

.h4, h4 {
    font-family: Roboto, sans-serif;
    color: #000000;
    font-weight: 600;
}


h1 {
    line-height: calc(1.4 * (1 + (1 - 4)/25))
}

@media screen and (max-width: 767px ) and (orientation: portrait) {
    h1 {
        font-size:calc((4 - 1) * calc(.012 * min(100vh, 900px)) + 1rem)
    }
}

@media screen and (min-width: 768px ),screen and (max-width:calc(1296px - 1px)) and (orientation:landscape) {
    h1 {
        font-size:calc((4 - 1) * 1.2vw + 1rem)
    }
}

@media screen and (min-width: 1296px) {
    h1 {
        font-size:calc(4 * 1rem)
    }
}

h2 {
    line-height: calc(1.4 * (1 + (1 - 2.8)/25))
}

@media screen and (max-width: 767px ) and (orientation: portrait) {
    h2 {
        font-size:calc((2.8 - 1) * calc(.012 * min(100vh, 900px)) + 1rem)
    }
}

@media screen and (min-width: 768px ),screen and (max-width:calc(1296px - 1px)) and (orientation:landscape) {
    h2 {
        font-size:calc((2.8 - 1) * 1.2vw + 1rem)
    }
}

@media screen and (min-width: 1296px) {
    h2 {
        font-size:calc(2.8 * 1rem)
    }
}

h3 {
    line-height: calc(1.4 * (1 + (1 - 2.2)/25))
}

@media screen and (max-width: 767px ) and (orientation: portrait) {
    h3 {
        font-size:calc((2.2 - 1) * calc(.012 * min(100vh, 900px)) + 1rem)
    }
}

@media screen and (min-width: 768px ),screen and (max-width:calc(1296px - 1px)) and (orientation:landscape) {
    h3 {
        font-size:calc((2.2 - 1) * 1.2vw + 1rem)
    }
}

@media screen and (min-width: 1296px) {
    h3 {
        font-size:calc(2.2 * 1rem)
    }
}

h4 {
    line-height: calc(1.4 * (1 + (1 - 1.6)/25))
}

@media screen and (max-width: 767px ) and (orientation: portrait) {
    h4 {
        font-size:calc((1.6 - 1) * calc(.012 * min(100vh, 900px)) + 1rem)
    }
}

@media screen and (min-width: 768px ),screen and (max-width:calc(1296px - 1px)) and (orientation:landscape) {
    h4 {
        font-size:calc((1.6 - 1) * 1.2vw + 1rem)
    }
}

@media screen and (min-width: 1296px) {
    h4 {
        font-size:calc(1.6 * 1rem)
    }
}

.heading {
    font-family: 'Bebas Neue', sans-serif;
    color: #000000;
    font-weight: 400;
    font-size: 20px;
}

ol, ul {
    padding-left: 1em;
}

.text-small {
    font-size: .875rem;
    line-height: 1;
}
.text-large {
    font-size: 1.15rem;
    line-height: 1;
}

.text-regularcase {
    text-transform: initial !important;
}

hr {
    border-top: 3px solid;
}

:root {
     color-scheme: light only !important;
}


/**
 * BASIC LAYOUT
 */

.container-fluid.not(.container-fluid-fullwidth) {
    max-width: 1400px;
}

.full-width {
    background-color: #a0435a;
    color: white;
    max-width: 100%!important;
    padding: calc(1.2rem + 1vw) 0;
}
.full-width h1 {
    color: inherit;
}

div.walloftext {
    max-width: 940px;
    margin: 2em auto;
}
div.walloftext > ul:last-child,
div.walloftext > p:last-child {
    margin-bottom: 0;
}


/**
 * NAVBAR
 */

nav.navbar,
nav.navbar a {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: none;
    line-height: 1.5em;
    color: #000;
    text-transform: uppercase;
}

nav.navbar {
    padding: calc(1.2rem + 1vw) 0;
}

a.navbar-brand img {
    width: auto;
    max-width: 100%;
    max-height: 75px;
}

nav.navbar .nav-link {
    font-size: 1.2rem;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
}

.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item.active, .dropdown-item:active {
    background-color: rgb(172, 59, 90);
    color: white !important;
}

/**
 * FOOTER
 */

footer {
    background-color: #611e3b;
    color: white;
}

footer p {
    color: white;
}

footer a:not(.btn) {
    color: #FFFFFF;
}
footer a:not(.btn):active,
footer a:not(.btn):focus,
footer a:not(.btn):hover {
    color: white;
}

footer img {
    height: 85px;
    padding: 10px;
    background: white;
    border-radius: 5px;
}


/**
 * LINKS AND BUTTONS
 */

a.nolink {
    text-decoration: none !important;
}

.btn-link,
a:not(.btn) {
    color: rgb(172, 59, 90);
}
a:not(.btn):active,
a:not(.btn):hover,
a:not(.btn):focus {
    color: black;
}

a {
    text-decoration: underline;
}
.nolink {
    text-decoration: none !important;
}

.btn {
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 400;
    font-family: "Helvetica Neue", Roboto, sans-serif;
    letter-spacing: 0.32px;
    font-style: normal;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    transition: .6s cubic-bezier(.2,1,.2,1);
}

.btn.btn-primary {
    background-color: rgb(172, 59, 90);
    border-color: rgb(172, 59, 90);
    color: white;
}
.btn.btn-primary[aria-expanded="true"],
.btn.btn-primary[aria-pressed="true"],
.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:hover {
    background-color: rgb(172, 59, 90);
    border-color: rgb(172, 59, 90);
    color: white;
    opacity: 0.8;
}

.btn.btn-secondary {
    background-color: rgb(243, 224, 229);
    border-color: rgb(172, 59, 90);
    color: black;
}
.btn.btn-secondary[aria-expanded="true"],
.btn.btn-secondary[aria-pressed="true"],
.btn.btn-secondary:active,
.btn.btn-secondary:focus,
.btn.btn-secondary:hover {
    background-color: rgb(243, 224, 229);
    border-color: rgb(172, 59, 90);
    color: black;
    opacity: 0.7;
}

.btn.btn-danger {
    background-color: #B34048 !important;
    border-color: #B34048 !important;
    color: white;
}
.btn.btn-danger[aria-expanded="true"],
.btn.btn-danger[aria-pressed="true"],
.btn.btn-danger:active,
.btn.btn-danger:focus,
.btn.btn-danger:hover {
    background-color: #931018 !important;
    border-color: #931018 !important;
    color: white;
    opacity: 1;
}


h2 > a[aria-label] {  /* internal section hyperlinks */
    font-size: 1.25rem;
    vertical-align: middle;
}


/**
 * COLOR HELPERS
 */

.text-black {
    color: black;
}
.bg-black {
    background-color: black;
}

.text-grey {
    color: #e9ecef;
}
.bg-grey {
    background-color: #e9ecef;
}

.text-red {
    color: #611e3b;
}
.bg-red {
    background-color: #611e3b;
}

.text-lightred {
    color: #a0435a;
}
.bg-lightred {
    background-color: #a0435a;
}

.text-pink {
    color: rgb(243, 224, 229);
}
.bg-pink {
    background-color: rgb(243, 224, 229);
}

.text-white {
    color: white;
}
.bg-white {
    background-color: white;
}


div.striped > div:nth-child(odd) {
    background-color: #FAFAFA;
}


/**
 * FORM CONTROLS
 */

legend {
    font-size: 1em;
    margin: 0;
}

.form-select:disabled,
select[disabled], select[readonly],
textarea[disabled], textarea[readonly],
input[disabled], input[readonly] {
    background-color: #EEEEEE;
}

.form-control:not(:focus) + label {
    color: #666666;
}

.input-group .form-floating > .form-select {
    padding-top: 1rem;
}

.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 1;
}

.form-group > textarea.form-control {
    height: 2in;
}


/**
 * DATATABLES
 */

table.table {
    margin-bottom: 0.4rem;
}

.active > .page-link,
.page-link.active {
    background-color: rgb(172, 59, 90);
    color: white;
}
.active > .page-link:active,
.active > .page-link:focus,
.active > .page-link:hover,
.page-link.active:active,
.page-link.active:focus,
.page-link.active:hover {
    background-color: rgb(172, 59, 90);
    color: black;
    opacity: 0.8;
}

table.dataTable.table-sm .sorting:before,
table.dataTable.table-sm .sorting_asc:before,
table.dataTable.table-sm .sorting_desc:before {
    top: unset !important;
    bottom: 5px;
}
table.dataTable.table-sm .sorting:after,
table.dataTable.table-sm .sorting_asc:after,
table.dataTable.table-sm .sorting_desc:after {
    top: unset !important;
    bottom: 5px;
}

table.dataTable th.sorting.text-end {
    padding-right: 1.75em !important;
}

tfoot {
    border-top: 3px solid black;
}


/**
 * ACCORDIONS
 */

h2.accordion-header,
h2.accordion-header.collapsed {
    font-family: inherit;
    color: black;
}
h2.accordion-header .accordion-button.collapsed,
h2.accordion-header .accordion-button:not(.collapsed) {
    background-color: rgb(234, 242, 246);
    color: black;
}

.accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


/**
 * TABS
 */

.nav-tabs .nav-link {
    color: inherit;
}
.nav-tabs .nav-link.active {
    background-color: rgb(172, 59, 90);
    border-color: rgb(172, 59, 90);
    color: white;
}

.nav-tabs .nav-link:not(.active),
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: #dee2e6;
}


/**
 * MAP POPUPS
 */

div.maplibregl-popup-content {
    padding: 10px;
}

div.maplibregl-popup div.popup-content h1 {
    font-size: 20px;
    padding: 0 20px;
}

div.maplibregl-popup div.popup-content p {
    line-height: 1.2;
    font-size: 14px;
}

div.maplibregl-popup .maplibregl-popup-close-button {
    top: 8px;
    font-size: 25px;
}


/**
 * SMALL LOADING SPINNER
 */

.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 3px solid #eaf2f6;
    border-radius: 50%;
    border-top-color: rgb(172, 59, 90);
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}

/**
 * COLOR SWATCHES
 */

span.swatch {
    display: inline-block;
    height: 1em;
    width: 1em;
    border: 1px solid black;
}
span.swatch.swatch-unpublished {
    background-color: silver;
    border-color: #333333;
}
span.swatch.swatch-published {
    background-color: green;
    border-color: #333333;
}
span.swatch.swatch-needsreview {
    background-color: pink;
    border-color: #333333;
}


/**
 * MDOALS
 */

div.modal-header {
    background-color: #eaf2f6;
}
div.modal-header h2.modal-title {
    font-size: 2rem;
    margin-bottom: 0;
    line-height: 1;
}


/**
 * TOOLTIPSTER TOOLTIPS
 */

.tooltipster-sidetip  .tooltipster-box {
    background-color: white !important;
    border: 1px solid black !important;
}

.tooltipster-sidetip .tooltipster-content {
    max-width: 350px;
    font-size: 14px;
    color: black !important;
}