:root {
    --max-width-narrow: 400px;
    --max-width-wide: 1024px;
}

.asteriskField {
    display: none;
}

body {
    padding: 70px 0 0 0;
    min-height: 100vh;
    letter-spacing: var(--bs-letter-spacing-base);
}

a, a:hover {
    text-decoration: none;
}

h1:lang(en),
h2:lang(en),
h4:lang(en) {
    text-transform: uppercase;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: var(--bs-font-family-headings)
}

.display-4 {
    letter-spacing: var(--bs-display4-letter-spacing);
    line-height: var(--bs-display4-line-height);
    font-size: var(--bs-display4-font-size);
    font-weight: var(--bs-display4-weight);
}

.display-5 {
    font-size: var(--bs-display5-font-size);
    font-weight: var(--bs-display5-weight);
    letter-spacing: var(--bs-display5-letter-spacing);
    line-height: var(--bs-display5-line-height);
}

h1 {
    font-size: var(--bs-h1-font-size);
    font-weight: var(--bs-h1-font-weight);
    line-height: var(--bs-h1-line-height);
    letter-spacing: var(--bs-h1-letter-spacing);
}

/* override for the rich text widget - can be removed when we build our own editor */
.megadraft-editor h2,
h2 {
    font-family: var(--bs-font-family-headings);
    font-size: var(--bs-h2-font-size);
    font-weight: var(--bs-h2-font-weight);
    line-height: var(--bs-h2-line-height);
    letter-spacing: var(--bs-h2-letter-spacing);
}

.megadraft-editor h3,
h3 {
    font-family: var(--bs-font-family-headings);
    font-size: var(--bs-h3-font-size);
    font-weight: var(--bs-h3-font-weight);
    line-height: var(--bs-h3-line-height);
    letter-spacing: var(--bs-h3-letter-spacing);
}

.megadraft-editor h4,
h4 {
    font-size: var(--bs-h4-font-size);
    font-weight: var(--bs-h4-font-weight);
    line-height: var(--bs-h4-line-height);
    letter-spacing: var(--bs-h4-letter-spacing);
}

.megadraft-editor h5,
h5 {
    font-size: var(--bs-h5-font-size);
    font-weight: var(--bs-h5-font-weight);
    line-height: var(--bs-h5-line-height);
    letter-spacing: var(--bs-h5-letter-spacing);
}

h6 {
    font-size: var(--bs-h6-font-size);
    font-weight: var(--bs-h6-font-weight);
    line-height: var(--bs-h6-line-height);
    letter-spacing: var(--bs-h6-letter-spacing);
}

.display-4:lang(en) {
    text-transform: var(--bs-display4-uppercase);
}

.display-5:lang(en) {
    text-transform: var(--bs-display5-uppercase);
}

h1:lang(en) {
    text-transform: var(--bs-h1-uppercase);
}

h2:lang(en) {
    text-transform: var(--bs-h2-uppercase);
}

h3:lang(en) {
    text-transform: var(--bs-h3-uppercase);
}

h4:lang(en) {
    text-transform: var(--bs-h4-uppercase);
}

h5:lang(en) {
    text-transform: var(--bs-h5-uppercase);
}

h6:lang(en) {
    text-transform: var(--bs-h6-uppercase);
}

button,
.btn {
    --bs-btn-font-size: var(--bs-button-font-size);
    letter-spacing: var(--bs-button-letter-spacing);
    --bs-btn-font-weight: var(--bs-button-font-weight);
    --bs-btn-line-height: var(--bs-button-line-height);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--bs-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-hover-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-hover-bg: var(--bs-hover);
    --bs-btn-active-bg: var(--bs-hover);
    --bs-btn-active-border-color: var(--bs-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-gradient: none;
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-success);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-success);
    --bs-gradient: none;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--bs-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-hover-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-hover-bg: var(--bs-hover);
    --bs-btn-active-bg: var(--bs-hover);
    --bs-btn-active-border-color: var(--bs-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-success);
}

img {
    max-width: 100%;
}

.small,
small {
    font-size: var(--bs-small-font-size);
    line-height: var(--bs-small-line-height);
    font-weight: var(--bs-small-font-weight);
    letter-spacing: var(--bs-small-letter-spacing);
}

label {
    font-size: var(--bs-label-font-size);
    line-height: var(--bs-label-line-height);
    letter-spacing: var(--bs-label-letter-spacing);
    font-weight: var(--bs-label-font-weight);
}

label.small {
    font-size: var(--bs-small-label-font-size);
    line-height: var(--bs-small-label-line-height);
    font-weight: var(--bs-small-label-font-weight);
    letter-spacing: var(--bs-small-label-letter-spacing);
}

.lead {
    font-size: var(--bs-large-font-size);
    line-height: var(--bs-large-line-height);
    font-weight: var(--bs-large-font-weight);
    letter-spacing: var(--bs-large-letter-spacing);
}

.progress {
    --bs-progress-bg: var(--bs-secondary);
    --bs-progress-bar-bg: var(--bs-dark);
    --bs-progress-border-radius: 10px;
    --bs-progress-height: 15px;
}

hr {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* // Custom classes */
.bg-gradient-primary {
    background: linear-gradient(var(--bs-primary), var(--bs-primarygradientend));
}

.bg-gradient-dark-horizontal {
    background: linear-gradient(93deg, var(--bs-dark), var(--bs-darkgradientend));
}

.bg-gradient-dark {
    background: linear-gradient(334deg, var(--bs-dark), var(--bs-darkgradientend));
}

.bg-accent {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-accent-rgb), var(--bs-bg-opacity)) !important;
}

.bg-accenthover {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-accenthover-rgb), var(--bs-bg-opacity)) !important;
}

.btn-accent {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-accent-rgb), var(--bs-bg-opacity)) !important;
}

.btn-muted {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-muted-rgb), var(--bs-bg-opacity)) !important;
}

.alert {
    z-index: 1000;
}

.bg-login-transparent {
    background: rgba(240, 240, 240, 0.75);
}

.bg-nav-links-off-transparent {
    background: rgba(255, 255, 255, 0.5);
}

.bg-overlay {
    background: rgba(16, 28, 51, 0.5);
}

.blur {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

@media (min-width: 768px) {
    .blur-md-none {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

.bootstrap-select>.dropdown-toggle.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active {
    color: var(--bs-muted);
    font-style: italic;
}

:not(.btn-group)>.btn:not(.dropdown-toggle):not([data-bs-toggle="popover"]) {
    border-radius: 1.67em;
    padding: 1em 2em;
}

.btn.dropdown-toggle {
    border-radius: 2px;
}

.btn-floating {
    opacity: 80%;
    padding: 1em !important;
    border-radius: 50% !important;
}

.btn-floating.btn-outline-primary {
    background: white;
}

.btn-floating.nav-btn-left {
    bottom: 3rem;
}

.btn-floating.nav-btn-right {
    bottom: 3rem;
    right: 1rem;
}

@media (min-width: 768px) {

    .btn-floating.nav-btn-left,
    .btn-floating.nav-btn-right {
        bottom: 1rem;
    }
}

.accordion-button::after {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity));
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1.5em" height="1.5em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M16.59 8.59L12 13.17L7.41 8.59L6 10l6 6l6-6z"%2F%3E%3C%2Fsvg%3E');
    mask: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1.5em" height="1.5em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M16.59 8.59L12 13.17L7.41 8.59L6 10l6 6l6-6z"%2F%3E%3C%2Fsvg%3E');
    -webkit-mask-size: cover;
    mask-size: cover;
    background-image: none;
    margin-left: 0;
    margin-right: 0;
}

.btn-group>.btn:not(:last-child) {
    margin-right: 2px;
}

.btn-group>.btn:first-child {
    border-top-left-radius: 1.67em;
    border-bottom-left-radius: 1.67em;
}

.btn-group>.btn:last-child {
    border-top-right-radius: 1.67em;
    border-bottom-right-radius: 1.67em;
}

.btn-group>.btn {
    padding: 0.125rem 1rem;
}

.btn-outline-primary:not(.disabled):hover {
    background: var(--bs-hover2);
    color: var(--bs-primary);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--bs-white);
}

.btn-primary:hover {
    background-color: var(--bs-hover);
}

.btn-square {
    border-radius: 2px !important;
    padding: 0.5em 0.7em !important;
}

.btn-text-primary {
    color: var(--bs-primary);
    padding: 0 !important;
    border: none;
}

.btn-text-primary:hover {
    color: var(--bs-hover);
}

.btn-text-primary.disabled:hover {
    color: var(--bs-primary);
}

button svg {
    font-size: 1rem;
}

.checkout-page .form-control,
.checkout-page .form-select {
    background-color: #FCFCFC;
}

@media (min-width: 1200px) {
    .container {
        /* set container max-width to max-width-wide plus gutter width */
        max-width: calc(var(--max-width-wide) + calc(var(--bs-gutter-x)));
    }
}

@media (min-width: 992px) {
    .container {
        --bs-gutter-x: 5rem;
    }
}

.custom-control-input:focus~.custom-control-label::before,
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border: none;
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--bs-secondary);
}

.custom-control-input~.custom-control-label::before,
.multiselect-container li .custom-checkbox .custom-control-label::before {
    background-color: var(--bs-light);
    border-color: var(--bs-muted);
}

.custom-control-input:checked~.custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before,
.multiselect-container li.active .custom-checkbox .custom-control-label::before {
    color: var(--bs-white);
    border-color: var(--bs-success);
    background-color: var(--bs-success);
}

.custom-control-input[disabled]~.custom-control-label::after,
.custom-control-input:disabled~.custom-control-label::after {
    opacity: 66%;
}

.custom-control-input[disabled]~.custom-control-label::before,
.custom-control-input:disabled~.custom-control-label::before {
    background-color: var(--bs-light);
    opacity: 66%;
}

.custom-control-input[disabled]~.custom-control-label,
.custom-control-input:disabled~.custom-control-label {
    color: var(--bs-dark);
    opacity: 35%;
}

.dropdown-item {
    padding: 0.25rem 1rem;
}

.dropdown-menu .arrow:after,
.dropdown-menu .arrow:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.dropdown-menu-right[x-placement^=bottom] .arrow:after {
    border-bottom-color: var(--bs-white);
    border-width: 11px;
    right: 8px;
}

.dropdown-menu-right[x-placement^=bottom] .arrow:before {
    border-bottom-color: var(--bs-secondary);
    border-width: 12px;
    right: 7px;
}

.dropdown-menu-right[x-placement^=top] .arrow:after {
    border-top-color: var(--bs-white);
    border-width: 11px;
    right: 8px;
    bottom: auto;
    top: 100%;
}

.dropdown-menu-right[x-placement^=top] .arrow:before {
    border-top-color: var(--bs-secondary);
    border-width: 12px;
    right: 7px;
    bottom: auto;
    top: 100%;
}

.dropdown-toggle::after {
    border: none;
    content: '';
}

:not(.dropup) .dropdown-toggle .expand-less,
.dropup .dropdown-toggle .expand-more {
    display: none;
}

.filter-icon {
    position: absolute;
    color: var(--bs-primary);
    left: 0;
    transition: left 0.15s ease-in-out;
}

.filter-icon.active {
    color: var(--bs-muted);
}

.filter-icon:not(.top).active,
.filter-icon.top:not(.active) {
    left: 1.5rem;
}

.filter-input,
.filter-input .btn-group {
    width: 12rem;
}

:focus,
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--bs-secondary);
}

.form-control:focus {
    color: var(--bs-black);
    background-color: var(--bs-white);
    border-color: var(--bs-black);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--bs-secondary);
}

.form-control {
    border-radius: 2px;
}

.form-check-input:checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.fade {
    transition: opacity 0.15s ease-in-out;
}

.grow {
    transition: all 0.15s ease-in-out;
    z-index: 1;
}

.grow:hover {
    transform: scale(1.08);
}

.grow .card-body {
    z-index: 1;
}

.grow.shadow-sm::after,
.grow .shadow-sm::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

@media (min-width: 768px) {

    .grow.shadow-sm::after,
    .grow .shadow-sm::after {
        opacity: 0;
    }
}

.grow:hover.shadow-sm::after,
.grow:hover .shadow-sm::after {
    opacity: 1;
}

.inline-icon {
    right: 10px;
    bottom: 7px;
    font-size: 1.5rem;
    z-index: 10;
    position: absolute;
}

.modal-dialog button.close:not(.rbt-token-remove-button) {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    z-index: 10;
}

@media (min-width: 576px) {
    .modal-dialog:not(.modal-lg, .wizard, .modal-xl, .modal-sm) {
        --bs-modal-width: 624px;
    }
}

.modal-dialog button.close svg,
.modal-header .btn-close {
    font-size: .5rem;
}

.btn-close {
    background: var(--bs-primary);
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
}

.modal-dialog .modal-body {
    padding: 1rem;
}

.modal-dialog .modal-header,
.modal-dialog .modal-footer {
    border: none;
}

.multiselect-native-select .btn-group .btn {
    border-radius: 2px;
    padding: 0.5rem;
}

.multiselect-container>li {
    margin-bottom: 2px;
}

.multiselect-container>li:hover,
.multiselect-container>li.active:hover {
    background: var(--bs-hover);
}

.multiselect-container>li:hover>a>label {
    color: var(--bs-white);
}

.multiselect-container>li.active {
    background: var(--bs-primary);
}

.multiselect-container>li>a.custom-control {
    text-decoration: none;
    padding-left: 1.5rem;
    color: var(--bs-black);
}

.multiselect-container>li>a>label {
    color: var(--bs-black);
    padding: 0;
}

.multiselect-container>li.active>a>label {
    color: var(--bs-white);
}

.multiselect-container li.active .custom-checkbox .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.multiselect-selected-text {
    color: var(--bs-muted);
    font-style: italic;
}

.navbar-footer-uppercase:lang(en) {
    text-transform: uppercase;
}

.navbar-dark .dropdown-menu {
    --bs-dropdown-link-color: var(--bs-white);
}

@media (min-width: 768px) {
    .navbar-dark .dropdown-menu {
        --bs-dropdown-link-color: var(--bs-white-50);
        --bs-dropdown-link-hover-color: var(--bs-white);
    }
}

.nav-link.dropdown-toggle::after {
    content: none;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-hover);
}

.nav-pills .nav-link {
    background: var(--bs-primary);
    padding: 0.5rem 1rem;
}

.object-fit-cover {
    object-fit: cover;
}

.p-3-4 {
    padding: 1.25rem;
}

.p-4-5 {
    padding: 1.5rem;
}

.px-4-5 {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .p-4-5 {
        padding: 2.5rem;
    }

    .px-4-5 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .pt-md-4-5 {
        padding-top: 2.5rem;
    }
}

::placeholder,
.form-select:invalid {
    color: var(--bs-muted);
    font-style: italic;
}

.popover-menu .popover-body {
    padding: 0;
}

.rotate-90 {
    transform: rotate(90deg) !important;
}

.shadow,
.shadown-sm {
    border: 1px solid var(--bs-secondary);
}

.spinner-border-lg {
    width: 3rem;
    height: 3rem;
    border-width: .4em;
}

.text-muted {
    color: var(--bs-muted) !important;
}

.text-accent {
    color: var(--bs-accent) !important;
}

.text-accenthover {
    color: var(--bs-accenthover-rgb) !important;
}

.text-darkgrey {
    color: var(--bs-darkgrey) !important;
}

.text-uppercase {
    text-transform: none;
}

.text-uppercase:lang(en) {
    text-transform: uppercase;
}

.tiny-popover {
    color: red;
    border-radius: 2px;
    box-shadow: 0px 1px 1px #00000026;
}

.w-33 {
    width: 33%;
}

.was-validated .form-control:invalid,
.was-validated .form-control:invalid:focus {
    background-image: none;
}

header .nav-brand img {
    height: 70px;
    /* width: 70px !important; */
    max-width: none;
}

header .user-icon {
    width: 2.35rem;
    height: 2.35rem;
}

.user-icon {
    width: 10rem;
    height: 10rem;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
}

footer {
    z-index: 250;
}

footer .icon {
    width: 3rem;
    height: 3rem;
}

#account-menu-dropdown {
    position: absolute;
    width: 100vw;
    border-radius: 0;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}

#account-menu-dropdown .dropdown-item {
    border-top: 1px solid var(--bs-white);
    --bs-border-opacity: 0.5;
}

#account-menu-dropdown .dropdown-item:hover {
    --bs-dropdown-link-hover-bg: transparent;
}

.socials .nav-link.icon {
    width: 3rem;
    margin-left: 0.65rem;
    margin-right: 0.65rem;
}

@media (min-width: 768px) {
    .socials .nav-link.icon {
        margin-left: 5px;
        margin-right: 5px;
    }
}

#account-menu-dropdown .socials .nav-item:first-child .nav-link.icon {
    margin-left: 0;
}

#account-menu-dropdown .dropdown-divider {
    --bs-border-width: 2px;
    --bs-dropdown-divider-margin-y: 0;
}

#account-menu-dropdown .log-out .log-out-icon {
    margin-right: 0.25rem;
    transition: margin-right 0.25s;
}

#account-menu-dropdown .log-out:hover .log-out-icon {
    margin-right: 0;
}


@media (min-width: 768px) {
    #account-menu-dropdown .dropdown-item.border-md-0 {
        border: none;
    }
}

[data-bs-toggle="collapse"] .icon {
    transition: all 0.15s;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

.cart-badge {
    position: relative;
    top: -15px;
    left: 30px;
    z-index: 100;
    width: 16px !important;
    height: 16px !important;
}

.hero-banner {
    background: var(--bs-black);
    min-height: 22rem;
    max-width: none;
}

.hero-banner .hero-overlay {
    width: 100%;
    min-height: 20vh;
    min-height: 22rem;
    color: var(--bs-white);
}

@media (min-width: 768px) {
    .hero-banner .hero-overlay {
        height: 30vh;
        min-height: 18.75rem;
    }
}

.icon-edit-path {
    width: 1.2em;
    height: 1.2em;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.1em' height='1em' viewBox='0 0 65.416 65.345'%3E%3Cg id='Icons_Create-Edit' data-name='Icons/Create-Edit' transform='translate(0.504 0.845)'%3E%3Cpath id='Create_Edit' data-name='Create Edit' d='M1.33,64A1.334,1.334,0,0,1,0,62.666V9.689A1.334,1.334,0,0,1,1.33,8.356H38.674L20.362,26.67a6.955,6.955,0,0,0-2.053,4.953V45.693H32.382a6.968,6.968,0,0,0,4.953-2.05l18.3-18.307v37.33A1.332,1.332,0,0,1,54.305,64ZM23.642,40.36V31.622a1.67,1.67,0,0,1,.491-1.182L46.211,8.364l9.427,9.43L33.561,39.871a1.668,1.668,0,0,1-1.179.489ZM48.857,5.72,54.776-.2a.5.5,0,0,1,.706,0l8.723,8.723a.5.5,0,0,1,0,.707l-5.918,5.918Z' stroke='rgba(0,0,0,0)' stroke-miterlimit='10' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.1em' height='1em' viewBox='0 0 65.416 65.345'%3E%3Cg id='Icons_Create-Edit' data-name='Icons/Create-Edit' transform='translate(0.504 0.845)'%3E%3Cpath id='Create_Edit' data-name='Create Edit' d='M1.33,64A1.334,1.334,0,0,1,0,62.666V9.689A1.334,1.334,0,0,1,1.33,8.356H38.674L20.362,26.67a6.955,6.955,0,0,0-2.053,4.953V45.693H32.382a6.968,6.968,0,0,0,4.953-2.05l18.3-18.307v37.33A1.332,1.332,0,0,1,54.305,64ZM23.642,40.36V31.622a1.67,1.67,0,0,1,.491-1.182L46.211,8.364l9.427,9.43L33.561,39.871a1.668,1.668,0,0,1-1.179.489ZM48.857,5.72,54.776-.2a.5.5,0,0,1,.706,0l8.723,8.723a.5.5,0,0,1,0,.707l-5.918,5.918Z' stroke='rgba(0,0,0,0)' stroke-miterlimit='10' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: currentColor;
}

.icon-open-in-new {
    width: 1.2em;
    /* make this icon the same width as icon-edit-path so they'll align */
    height: 1em;
    mask-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7Z"%2F%3E%3C%2Fsvg%3E');
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7Z"%2F%3E%3C%2Fsvg%3E');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: currentColor;
}

@media (min-width: 768px) {
    .max-width-narrow {
        max-width: var(--max-width-narrow);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

#navbarDropdownButton {
    height: 60px;
}

#navbarDropdownButton[aria-expanded="true"] #nav_menu_icon {
    transform: rotate(450deg) !important;
    --bs-text-opacity: 1;
}

#nav_menu_icon {
    font-size: 2rem;
    transition: all 0.15s;
    --bs-text-opacity: .4;
}

.navbar.navbar-dark .dropdown.selectable .dropdown-item.selected {
    color: var(--bs-white);
}

.navbar .dropdown.selectable .dropdown-item .check {
    opacity: 0;
    font-size: 1.5rem;
}

.navbar .dropdown.selectable .dropdown-item.selected .check {
    opacity: 1;
}

ol.timeline {
    counter-reset: section;
    padding-inline-start: 80px;
}

ol.timeline>li {
    /* You need to turn on relative positioning so the line is placed relative to the item rather than absolutely on
the page */
    position: relative;
    /* Use padding to space things out rather than margins as the line would get broken up otherwise */
    margin: 0;
    padding-bottom: 1em;
    /* No normal bullets please */
    list-style-type: none;

}

/* The actual line being placed before each list item, tweak width and color as appropriate */
ol.timeline>li:after {
    background-color: var(--bs-secondary);
    width: 2px;
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -45px;
    z-index: -1;
}

ol.timeline>li:before {
    counter-increment: section;
    content: counter(section);
    border-radius: 30%;
    font-size: 3rem;
    font-weight: bold;
    position: absolute;
    --size: 75px;
    left: calc(-1 * var(--bs-size) - 10px);
    line-height: var(--bs-size);
    width: var(--bs-size);
    height: var(--bs-size);
    top: 0;
    background: var(--bs-dark);
    border-radius: 50%;
    text-align: center;
    box-shadow: 1px 1px 0 var(--bs-darkgrey);
    color: var(--bs-white)
}

ol.timeline>li.optional:before {
    content: '+';
    --size: 45px;
    left: calc(-1 * var(--bs-size) - 10px - (var(--bs-size) * .25));
    font-size: 1.5rem;
}


/* Start the line further down on the first list item */
ol.timline>li:first-child:after {
    top: 15px;
}

/* Stop the line short on the final list item */
ol.timeline>li:last-child:after {
    height: 15px;
}

.cropper img {
    object-fit: cover;
}

ol.timeline ul li {
    list-style-type: disc;
}

ol.timeline a[data-toggle="collapse"] {
    color: var(--bs-dark);
}

ol.timeline a[data-toggle="collapse"]:hover {
    color: var(--bs-hover);
}

ol.timeline a[data-toggle="collapse"] .material-icons {
    color: var(--bs-primary)
}

ol.timeline a[aria-expanded="true"] .material-icons {
    transform: rotate(-180deg)
}

ol.timeline a .show-less {
    display: none;
}

ol.timeline a[aria-expanded="true"] .show-less {
    display: inline;
}

ol.timeline a[aria-expanded="true"] .learn-more {
    display: none;
}

.pwstrength_viewport_progress .progress .password-verdict {
    font-size: 0.625rem;
    font-weight: bold;
}

.pwstrength_viewport_progress .progress .password-verdict:lang(en) {
    text-transform: uppercase;
}

#searchbox {
    width: 18rem;
}

#searchbutton {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0px;
    margin-left: -2rem;
    z-index: 1;
}

#topnav {
    height: 70px;
    background: linear-gradient(93deg, var(--bs-dark), var(--bs-darkgradientend));
}

.bg-gradient-dark {
    background: linear-gradient(93deg, var(--bs-dark), var(--bs-darkgradientend));
}

#topnav .navbar-nav {
    --bs-navbar-nav-link-padding-x: 16px;
}

@media (min-width: 768px) {
    #account-menu-dropdown {
        width: 15rem;
        top: 99%;
    }

    #account-menu-dropdown .nav-link.icon {
        width: 1.5rem;
    }

    header .nav-brand img {
        max-width: none;
    }

    #navbarDropdownButton {
        height: 70px;
    }
}

#searchbox::-webkit-input-placeholder {
    color: #FFFFFF;
}

#searchbox::-moz-placeholder {
    color: #FFFFFF;
}

#searchbox::-ms-placeholder {
    color: #FFFFFF;
}

#searchbox::placeholder {
    color: #FFFFFF;
}

.search-bar-override {
    left: -270 !important;
    min-width: 17rem !important;
}

.bg-published {
    background: transparent url(../img/published-bg.png) no-repeat 0 0 / cover;
}