/* Custom, global HERO CSS rules */
:root {
    /* HERO custom colors */
    --hero-blue-lighter: #d9e8f6;
    --hero-primary-darker-1: #1a1f26;
    --hero-white-hover: #f1f1f1;
    --hero-dark-blue-gray: #323a45;

    /* EPA Style Guide theme */
    /* https://www.epa.gov/themes/epa_theme/pattern-lab/?p=viewall-global-colors */
    --epa-white: #ffffff;
    --epa-blue-base: #005ea2;
    --epa-blue-light-1: #aacdec;
    --epa-blue-light: #4f97d1;
    --epa-blue-dark: #1a4480;
    --epa-blue-dark-1: #162e51;
    --epa-aqua-base: #00bde3;
    --epa-aqua-light-1: #e1f3f8;
    --epa-aqua-light: #97d4ea;
    --epa-aqua-dark: #28A0CB;
    --epa-aqua-dark-1: #07648d;
    --epa-green-base: #5e9f69;
    --epa-green-light-1: #dbebde;
    --epa-green-light: #86b98e;
    --epa-green-dark: #4d8055;
    --epa-green-dark-1: #37493b;
    --epa-gray-1: #edeff0;
    --epa-gray-2: #dfe1e2;
    --epa-gray-3: #a9aeb1;
    --epa-gray-4: #71767a;
    --epa-gray-5: #565c65;
    --epa-gray-6: #3d4551;
    --epa-gray-7: #1c1d1f;
    --epa-black: #000;
}

.text-epa-dark-blue {
    color: var(--epa-blue-dark) !important;
}

/* environment banner */
.env-banner {
    color: white;
    display: inline;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    opacity: 80%;
    margin: 0 40%;
}

.tagtree-btn {
    position: absolute;
    left: -15px;
    top: -1px;
    z-index: 1;
    transform: rotate(0deg);
    transition: transform 250ms ease-in-out;
    cursor: pointer;
}

.tagtree-btn > i {
    font-weight: bold;
}

.tagtree-btn.tag-collapsed {
    transform: rotate(-90deg);
}

/* custom utility HERO style classes */

.w-fit-content {
    width: fit-content;
}

.h-fit-content {
    height: fit-content;
}

.m-vh30 {
    max-height: 30vh;
}

.m-vh60 {
    max-height: 60vh;
}

.vh60 {
    height: 60vh;
}

.m-vh75 {
    max-height: 75vh;
}

.tiny {
    font-size: 0.75rem;
}

.font-big {
    font-size: 1.4rem;
}

.cursor-pointer {
    cursor: pointer;
}

.hidden {
    display: none;
}

.resize-y {
    overflow-y: auto;
    resize: vertical;
}

.box-shadow {
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
}

.box-shadow-minor {
    box-shadow: #0000003d 0 1px 6px -1px;
}

.box-shadow-inset {
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px 0 inset;
}

.bg-gray {
    background-color: #e8e8e8;
}

.bg-primary-darker {
    background-color: var(--epa-blue-dark-1);
}

.bg-hero-dark-gray {
    background-color: var(--hero-dark-blue-gray);
}

.bg-lightgray {
    background-color: #f3f3f3
}

.bg-lightblue {
    background-color: var(--hero-blue-lighter);
}

.btn-outline {
    border: rgba(0, 0, 0, 0.24) solid 1px;
    border-radius: 5px;
}

.border-btm-light {
    border-bottom: 2px solid #e2e2e2 !important;
}

.box-shadow-left {
    box-shadow: -5px 0 9px -7px #0000003d;
}

.text-unselectable {
    user-select: none;
}

.usa-table--striped tbody tr:nth-child(odd) th {
    background-color: #eaeaea;
}
.usa-table--striped tbody th {
    background-color: #f8f9fa;
}

.usa-table--striped tbody>tr>th {
    filter: drop-shadow(3px 10px 5px rgba(0, 0, 0, 0.35));
    -webkit-box-shadow: 3px 10px 5px rgba(0, 0, 0, 0.35);
    box-shadow: 3px 10px 5px rgba(0, 0, 0, 0.35);
    z-index: 99;
}
.usa-table--striped thead>tr>th.th-header {
    filter: drop-shadow(5px 3px 4px rgba(0, 0, 0, 0.35));
    -webkit-box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.35);
    box-shadow: 5px 3px 4px rgba(0, 0, 0, 0.35);
    z-index: 98;
}

.outline-btn {
    height: fit-content;
    color: #666666;
    border: 1px solid #666666 !important;
    transition: all 0.15s ease;
    font-weight: bold;
    line-height: 1;
    font-size: 0.9rem;
    padding: 0.3rem 0.3rem;
}

input[type="submit"].outline-btn, section button.outline-btn, section input[type="button"].outline-btn, section a.outline-btn, .modal-content .outline-btn {
    border: 1px solid #666666 !important;
}

a.outline-btn:hover, .dropdown.outline-btn:hover, .btn.outline-btn:hover {
    text-decoration: none;
    color: black !important;
    background-color: #d4d4d4;
}

.text-select {
    user-select: all;
}

.btn-tny {
    font-size: 0.75rem;
    padding: 0.25em 0.4em;
    line-height: 0.8rem !important;
    margin-bottom: 2px;
    height: fit-content;
}

/* end custom utility HERO style classes */


/* begin mobile responsive classes */

.mobile-responsive.column-default {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.mobile-responsive.row-default {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-responsive.default-hide {
    display: unset;
}

.mobile-responsive.default-show {
    display: none;
}

.mobile-responsive.default-show.collapse.show, .mobile-responsive.default-show.collapsing {
    display: unset;
}

.form-sm-field, .form-sm-field>.ts-control {
    height: fit-content;
}

/* 768px is the bootstrap md column breakpoint */
@media (min-width: 768px) {
    .mobile-responsive.column-default {
        align-items: flex-start;
        flex-direction: column;
    }

    .mobile-responsive.row-default {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .mobile-responsive.default-hide {
        display: none;
    }

    .mobile-responsive.default-show {
        display: unset;
    }

    .form-sm-field, .form-sm-field>.ts-control {
        height: 100%;
    }
}

/* end mobile responsive classes */

/* shared hover box shadow styles */

.hover-grow::after, .hover-shrink::after,
.box-shadow.hover-effect::after, .box-shadow-minor.hover-effect::after {
    content: "";
    border-radius: inherit;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hover-grow:hover::after, .hover-shrink:hover::after, .hover-shrink:focus::after,
.box-shadow.hover-effect:hover::after, .box-shadow-minor.hover-effect:hover::after {
    opacity: 1;
}

/* end shared hover box shadow styles */

/* hover size change classes */
.hover-grow, .hover-shrink {
    box-shadow: #0000003d 0 1px 6px -1px;
    -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hover-grow::after, .hover-shrink::after {
    box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 6px 0;
}

.hover-grow.check-expandable:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 6px 1px;
}

.hover-shrink::after {
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px 0 inset;
}

.hover-grow:hover, .check-expandable.hover-grow:not(.collapsed-box), .check-expandable.hover-grow.expanding-size {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    cursor: pointer;
}

.grow-less:hover, .check-expandable.hover-grow.grow-less:not(.collapsed-box), .check-expandable.hover-grow.grow-less.expanding-size {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}

.hover-shrink:hover, .hover-shrink:focus {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    box-shadow: none;
    cursor: pointer;
}

.hover-shrink:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    box-shadow: none;
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px 0 inset;
    background-color: #f0f2f3;
}

.hover-grow.check-expandable::after {
    box-shadow: none;
}


/* end hover size change classes */

/* hover classes */

.hover-effect, .hover-effect .bg-light {
    transition: all 0.15s ease-out;
    cursor: pointer;
}

.box-shadow.hover-effect::after {
    box-shadow: rgba(0, 0, 0, 0.45) 0 3px 11px;
}

.box-shadow-minor.hover-effect::after {
    box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 6px 0;
}


.hover-effect:hover {
    background-color: #f3f3f3;
}

.hover-effect:active {
    background-color: #e3e4e5;
}

.bg-lightblue.hover-effect:hover {
    background-color: #cbe2f6;
}

.bg-white.hover-effect:hover {
    background-color: #f3f3f3 !important;
}

.bg-light.hover-effect:hover, .hover-effect:hover .bg-light, a:focus .bg-light {
    background-color: #e6e7e8 !important
}

.bg-light.hover-effect:active, .hover-effect:active .bg-light, .bg-light.hover-effect.expanding-size, .hover-effect.expanding-size .bg-light,
.bg-light.hover-effect.shrinking-size, .hover-effect.shrinking-size .bg-light {
    background-color: #d4d5d6 !important;
}

.hover-shadow::after, .hover-shadow:hover, .dropdown-item:hover, .list-group-item-action:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0 2px 5px;
    z-index: 99;
}

.hover-shadow, .dropdown-item, .list-group-item-action {
    transition: box-shadow 125ms ease-out, background-color 125ms ease-out;
}

.list-group-item-action:hover:has(.annot-button:hover) {
    background-color: unset;
    box-shadow: unset;
}

/* end hover classes */

.nav-hero {
    color: white !important;
    background-color: transparent;
    font-family: Source Sans Pro Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans, serif;
    padding: 12px 15px !important;
    display: flex;
    align-items: center;
    height: 3.3rem;
    padding: 1rem 1.5rem !important;
}

.navbar-brand.nav-hero {
    font-weight: bold;
}

.navbar-width {
    margin-left: auto;
    margin-right: auto;
    max-width: 87.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.nav-hero-dropdown {
    text-align: center;
}

.nav-item {
    transition: background-color 110ms ease-in-out, box-shadow 110ms ease-in-out;
}


.nav-item:hover, .navbar-brand.nav-hero:hover, .nav-item:has(>.nav-link:focus),
.navbar-brand.nav-hero:focus, .nav-item:has(>form>.nav-link:focus) {
    background-color: var(--hero-primary-darker-1, #1a1f26);
}

.nav-item.dropdown.show, .nav-item:active,
.navbar-brand.nav-hero:active, .nav-item:has(>.nav-link:active) {
    background-color: var(--epa-black);
    box-shadow: rgba(0, 0, 0, 0.24) 0 2px 5px;
}

/* Disable html5 number spinners in Chrome */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Disable html5 number spinners in Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}

/* Override bootstrap modal width */
.modal-dialog {
    min-width: 950px;
    max-width: 1200px;
}

.modal-body {
    max-height: 600px;
    overflow-y: auto;
}

.modal.fade.in {
    top: 2%;
}

/* form actions */
.form-actions {
    border: 1px solid #e3e3e3;
    background-color: #f5f5f5;
    padding: 0.75rem !important;
    margin: 0.5rem 0 !important;
}

/* FORM FORMATTING */
label {
    font-weight: bold;
}

.form-group {
    padding: 0.75rem 1rem !important;
}

.filter-prepend-field {
    padding: 0 !important;
    margin: 0 !important;
}

/* faceted search box hover button */
.floating-actions {
    position: absolute;
    right: 26px;
    translate: 0 -50px;
    z-index: 99;
    transition: translate 350ms ease-in-out;
}

.floating-actions button, .floating-actions a {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

div.box:hover > div.box__content > div.floating-actions {
    translate: 0;
}

/* custom inline filterset form fields */
.form-sm-field, .form-sm-field>.ts-control {
    font-size: 0.88rem;
    width: auto;
    border-radius: 0;
    line-height: 1.5rem;
    padding: .375rem .75rem !important;
    margin: 0 !important;
    min-width: 12rem;
}

.ts-wrapper.form-sm-field {
    padding: 0 !important;
}

.custom-select {
    padding: .375rem 1.75rem 0.375rem 0.75rem !important;
}

#ff-expand-form {
    border-radius: 0 0 10px 10px;
    box-shadow: rgb(127 142 153 / 31%) 0 8px 15px;
    background-color: #eaf6ff;
}

/* Print styling */
@media print {
    .no-print, .pagetop {
        display: none !important;
        height: 0;
    }
}

/* htmx */
.htmx-swapping {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* project update form usage list HTMX styling */
#tblusage-modal-body.htmx-request .tblusage-modal-form, #tblusage-modal-body .usa-alert--warning, #tblusage-modal-body.htmx-request .usa-alert--success {
    display: none;
}

#tblusage-modal-body.htmx-request .usa-alert--warning {
    display: block;
}

/* Top of page styling */
.pagetop {
    text-align: right;
}

.pagetop > a {
    /* font-size: 1.5rem; */
    margin-right: 0.5em;
    padding: 0 0.25em;
    text-decoration: none;
}

.pagetop > a:before {
    background: no-repeat center/100% url(https://www.epa.gov/sites/all/themes/epa/img/svg/pagetop.svg);
    content: '';
    display: inline-block;
    height: 1em;
    margin: -0.2667em 0.25em 0 0;
    vertical-align: middle;
    width: 1em;
}

.pagetop > a:hover {
    text-decoration: underline;
}

/* button groups */
.btn-group > .btn.btn-primary:not(:last-child) {
    margin-right: 4px;
}

.btn-group > .btn.btn-primary {
    padding: 10px 16px;
}

/* hover table rows */
.hero-table-hover tr:hover, .hero-table-hover tr:hover td, .hero-hover:hover {
    background-color: #f3f3f3 !important;
    transition: background-color 0.20s ease;
}

table, .list-group {
    word-break: break-word;
}

/* Fieldset Styling */
fieldset {
    border: 2px solid #b1b1b1;
    border-radius: 5px;
    padding: 6px 40px 20px 40px;
    margin-bottom: 16px;
}

fieldset > legend {
    background-color: white;
    padding: 0 0 0 16px;
    width: auto;
    color: #3d3d3d;
    font-style: italic;
    position: relative;
    left: -20px;
    font-family: Source Sans Pro Web, sans-serif;
}

fieldset.legend-small > legend {
    font-size: 1.25rem;
}

#ff-expand-form #div_id_include_metadata, #ff-expand-form #div_id_exclude_metadata, #ff-expand-form #div_id_sfl_metadata {
    border: 2px solid #b1b1b1;
    border-radius: 7px;
}

#ff-expand-form #div_id_include_metadata > label, #ff-expand-form #div_id_exclude_metadata > label, #ff-expand-form #div_id_sfl_metadata > label {
    font-size: 1.2rem;
    font-family: Source Sans Pro Web, sans-serif;
    font-style: italic;
}

/* project list category styles */
.shadow {
    position: absolute;
    top: 0;
    z-index: 100;
    width: 12px;
    height: 100%;
}

.shadow-left {
    left: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
}

.shadow-right {
    right: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* detail page styles */
.box-row {
    flex: 1 0 0;
    flex-wrap: wrap;
    display: flex;
}

.small-box {
    min-width: fit-content;
    min-height: 4.5rem;
    height: fit-content;
    border-radius: 7px;
    padding: 10px;
    display: flex;
    margin: 0 15px 15px 0;
    position: relative;
}

.small-box div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.small-box p {
    margin-bottom: 0;
}

.box-header {
    font-size: 1.2rem;
    line-height: 1.4;
    font-family: Merriweather Web, "Noto Sans Arabic", "Noto Sans BN homepage", "Noto Sans GU homepage", "Noto Sans KR homepage", "Noto Sans SC homepage", "Noto Sans BN", "Noto Sans GU", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Georgia, Cambria, "Times New Roman", Times, serif;
}

p {
    margin: 0;
}

.small-box:last-child {
    margin-right: 0;
}

.check-expandable {
    height: fit-content;
    min-width: unset;
    display: block;
    line-height: 1.2rem;
}

.check-expandable span {
    width: fit-content;
}

.check-expandable div {
    display: block;
}

.collapsed-box {
    overflow: hidden;
}

.ellipsis-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.wbkt-ellipsis-overflow, .wbkt-ellipsis-overflow p {
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    white-space: normal;
}

.wbkt-ellipsis-overflow p {
    margin-bottom: 0.25rem;
}

.small-box-height {
    height: 4.5rem;
}

.collapsed .collapsible-icon, .shrinking-size .collapsible-icon, .collapsed-box .collapsible-icon {
    transform: rotate(0deg);
}

.collapsible-icon, .expanding-size .collapsible-icon {
    transform: rotate(-180deg);
    transition: transform 250ms ease-in-out;
}

.hover-effect.shrinking-size, .hover-effect.expanding-size, .hover-effect:active {
    background-color: #e5e6e7;
}

span.d-block + .tags-category-header {
    margin-top: 15px;
}

#project-detail-box > div:has(p,b) {
    margin: 0.5rem 0 1rem 0;
}

.profile-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--epa-blue-light-1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 21px;
    text-transform: uppercase;
}

/* end detail page styles */

/* reference list styles */

.abstract {
    scrollbar-gutter: stable;
    max-height: 15rem;
    border-radius: 7px;
    display: block;
    cursor: pointer;
    background-color: #f8f8f8;
    transition: all 0.15s ease-out;
    overflow-y: auto;
}

.abstract.collapsed-box {
    overflow: hidden;
    height: 1.6rem;
    background-color: #ffffff;
}

.abstract.hover-effect:hover {
    background-color: #f3f3f3;
}

.abstract.hover-effect:active, .abstract.hover-effect.shrinking-size, .abstract.hover-effect.expanding-size {
    background-color: #e5e6e7;
}

.id-box-padding {
    padding: 0.5rem 0;
}

@media (min-width: 768px) {
    .mobile-responsive.id-box-padding {
        padding: 1.5rem 0;
    }
}

/* end reference list custom styles */

.btn-box, .btn-box a {
    background-color: var(--epa-blue-base) !important;
    color: var(--epa-white) !important;
}

.btn-box:hover, .btn-box:hover a {
    background-color: var(--epa-blue-dark) !important;
    color: var(--hero-white-hover);
}

/* pubmed abstract markup: for example see PMID 12545000 */
.abstract_label {
    font-variant-caps: all-small-caps;
    font-size: 1.3rem;
}

/* pubmed abstract markup */

/* reference dedupe page styling */
.disabled_candidate {
    transform: scale(0.96);
    background-color:#f5f5f5;
}
.disabled_candidate>.rounded-top {
    background-color: #e5e5e5 !important;
}
.disabled_candidate .bg-light {
    background-color:#ebebeb !important;
}
.disabled_candidate .abstract {
    background-color: #f5f5f5;
}
.duplicate_candidate>.rounded-top {
    background: repeating-linear-gradient(45deg, #cccccc, #cccccc 45px, #ffda87 10px, #ffda87 90px);
}
.dedupe-candidate-0 {
    background-color: #d8e3ff !important;
}
.dedupe-candidate-1 {
    background-color: #f9e2d2 !important;
}
.dedupe-candidate-2 {
    background-color: #e3d7f1 !important;
}
.dedupe-candidate-3 {
    background-color: #dfefed !important;
}
.dedupe-candidate-4 {
    background-color: #fffbd1 !important;
}

.usa-table td.dedupe-candidate-0 {
    background-color: #e9efff !important;
}
.usa-table--striped tbody tr:nth-child(odd) td.dedupe-candidate-0 {
    background-color: #ccd9fa !important;
}
.usa-table td.dedupe-candidate-1 {
    background-color: #fff6ef !important;
}
.usa-table--striped tbody tr:nth-child(odd) td.dedupe-candidate-1 {
    background-color: #f1ddcf !important;
}
.usa-table td.dedupe-candidate-2 {
    background-color: #ede2fa !important;
}
.usa-table--striped tbody tr:nth-child(odd) td.dedupe-candidate-2 {
    background-color: #d6c7e7 !important;
}
.usa-table td.dedupe-candidate-3 {
    background-color: #e4f7f5 !important;
}
.usa-table--striped tbody tr:nth-child(odd) td.dedupe-candidate-3 {
    background-color: #c4dfdc !important;
}
.usa-table td.dedupe-candidate-4 {
    background-color: #fffcd9 !important;
}
.usa-table--striped tbody tr:nth-child(odd) td.dedupe-candidate-4 {
    background-color: #e9e4b3 !important;
}
.dupe-candidate .bg-light, .dupe-candidate, .dupe-candidate>div {
    transition: all 0.2s ease;
}
/* end reference dedupe page styling */

.bg-danger-dark {
    background: #9b0505 !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #0050d8;
}

.badge-primary, .btn-primary.disabled {
    background-color: var(--epa-blue-base);
}

.badge-success {
    background-color: #00a91c;
}

.badge-warning {
    background-color: #ffbe2e;
}

.badge-error, .badge-danger {
    background-color: #d54309;
}

.badge-info {
    background-color: #00bde3;
}

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

/* end alpine.js */

body {
    font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.filter-white {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(6deg) brightness(104%) contrast(103%);
}

.icon--exit>use {
    scale: 55%;
}