/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    WARNING:    DO NOT UPDATE OR CHANGE THIS FILE                    +
+     IF YOU WANT MODIFY THESE STYLES PLEASE USE THE OVERRIDE FILE IN YOUR CSS_SITE   +
+     FOLDER, UPDATES TO THESE STYLES DELETED UPON NEXT TEMPLATE UPGRADE              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*-------------
    FOR TESTING
------------------*/

.grid-item {
    /* border: solid 1px red;
    padding: 10px;*/
}

.highlight-search-text {
    background-color: var(--orange);
    color: var(--orange-text);
}

/*----------------------------------
    REMOVE LOADING DATA MESSAGE 
---------------------------------------*/

div[id*="-ajax"]:not(.loading-data):not(.item-headshot) {
    position: relative;
}

.no-loading-data {
    display: none;
}

.loading-data {
    position: absolute;
    z-index: 9999999999999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: var(--eighth);
}

.motion-remove-up-space {
    animation-name: remove-up;
    animation-duration: var(--animation-time-fast);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
    position: absolute;
    z-index: 9999999999999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: var(--eighth);
    overflow: hidden;
}

@keyframes remove-up {
    0% {
        visibility: visible;
        opacity: 1;
        height: var(--eighth);
    }

    20% {
        visibility: visible;
        opacity: .95;
        height: 8vh;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        height: 0px;
    }
}


/*----------------------------------------------------
    BASIC GRID ELEMENTS
------------------------------------------------*/
.ibp-title, .ibp-title * {
    font-size: var(--font-size-ibp-title)
}

.ibp-subtitle, .ibp-subtitle * {
    font-size: var(--font-size-ibp-subject);
    font-style: italic;
}

.ibp-key, .ibp-key * {
    font-size: var(--font-size-small);
    font-variant: small-caps;
    letter-spacing: 2px;
    font-weight: 600;
}

.ibp-contact, .ibp-contact * {
    font-size: var(--font-size);
    font-weight: 300;
}

.ibp-extra-large-text, .ibp-extra-large-text * {
    font-size: var(--font-size-extra-large);
}

.ibp-large-text, .ibp-large-text * {
    font-size: var(--font-size-large);
}

.ibp-regular-text, .ibp-regular-text * {
    font-size: var(--font-size);
}

.ibp-small-text, .ibp-small-text * {
    font-size: var(--font-size-small);
}


/*-----------------------------------------------
    GRID GAPS: ROWS, COLS, BOTH
-------------------------------------------------*/
.info-block-grid {
    grid-gap: 0px;
}

.ibp-gap-row-2 .info-block-grid {
    grid-row-gap: 2px;
}

.ibp-gap-row-5 .info-block-grid {
    grid-row-gap: 5px;
}

.ibp-gap-row-10 .info-block-grid {
    grid-row-gap: 10px;
}

.ibp-gap-row-15 .info-block-grid {
    grid-row-gap: 15px;
}

.ibp-gap-row-20 .info-block-grid {
    grid-row-gap: 20px;
}

.ibp-gap-col-2 .info-block-grid {
    grid-column-gap: 2px;
}

.ibp-gap-col-5 .info-block-grid {
    grid-column-gap: 5px;
}

.ibp-gap-col-10 .info-block-grid {
    grid-column-gap: 10px;
}

.ibp-gap-col-15 .info-block-grid {
    grid-column-gap: 15px;
}

.ibp-gap-col-20 .info-block-grid {
    grid-column-gap: 20px;
}

.ibp-gap-2 .info-block-grid {
    grid-gap: 2px;
}

.ibp-gap-5 .info-block-grid {
    grid-gap: 5px;
}

.ibp-gap-10 .info-block-grid {
    grid-gap: 10px;
}

.ibp-gap-15 .info-block-grid {
    grid-gap: 15px;
}

.ibp-gap-20 .info-block-grid {
    grid-gap: 20px;
}

/*-----------------------------------------------
    GRID LAYOUT - 01
-------------------------------------------------*/

.ibp-grid-1 .info-block-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
}

    .ibp-grid-1 .info-block-grid .grid-item:nth-child(n+6) {
        grid-column: span 2;
    }

    .ibp-grid-1 .info-block-grid .grid-item:first-child {
        grid-row: span 4;
        grid-column: unset;
    }


/*-----------------------------------------------
    GRID LAYOUT - 02
-------------------------------------------------*/

.ibp-grid-2 .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

    .ibp-grid-2 .info-block-grid .grid-item:nth-child(1) {
        grid-column: span 3;
        grid-row: span 2;
    }

    .ibp-grid-2 .info-block-grid .grid-item:nth-child(9) {
        grid-row: span 3;
        grid-column: span 2;
    }



/*-----------------------------------------------
    GRID LAYOUT - 03
-------------------------------------------------*/

.ibp-grid-3 .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

    .ibp-grid-3 .info-block-grid .grid-item:nth-child(1) {
        grid-column: span 4;
        grid-row: span 2;
    }

    .ibp-grid-3 .info-block-grid .grid-item:nth-child(n+3) {
        grid-column: span 2;
    }

    .ibp-grid-3 .info-block-grid .grid-item:nth-child(2),
    .ibp-grid-3 .info-block-grid .grid-item:nth-child(13), .ibp-grid-3 .info-block-grid .grid-item:nth-child(14),
    .ibp-grid-3 .info-block-grid .grid-item:nth-child(19), .ibp-grid-3 .info-block-grid .grid-item:nth-child(20) {
        grid-column: span 4;
    }

    .ibp-grid-3 .info-block-grid .grid-item:nth-child(7), .ibp-grid-3 .info-block-grid .grid-item:nth-child(8) {
        grid-row: span 3;
        grid-column: span 2;
    }


/*-----------------------------------------------
    GRID LAYOUT - 04
-------------------------------------------------*/

.ibp-grid-4 .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

    .ibp-grid-4 .info-block-grid .grid-item:nth-child(1), .ibp-grid-4 .info-block-grid .grid-item:nth-child(11), .ibp-grid-4 .info-block-grid .grid-item:nth-child(19) {
        grid-column: span 2;
    }

    .ibp-grid-4 .info-block-grid .grid-item:nth-child(2), .ibp-grid-4 .info-block-grid .grid-item:nth-child(10) {
        grid-row: span 3;
    }


/*-----------------------------------------------
    GRID LAYOUT - 05
-------------------------------------------------*/

.ibp-grid-5 .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

    .ibp-grid-5 .info-block-grid .grid-item:nth-child(4), .ibp-grid-5 .info-block-grid .grid-item:nth-child(10),
    .ibp-grid-5 .info-block-grid .grid-item:nth-child(14), .ibp-grid-5 .info-block-grid .grid-item:nth-child(16) {
        grid-column: span 2;
    }


/*-----------------------------------------------
    GRID LAYOUT - 06
-------------------------------------------------*/

.ibp-grid-6 .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(1), .ibp-grid-6 .info-block-grid .grid-item:nth-child(12), .ibp-grid-6 .info-block-grid .grid-item:nth-child(28),
    .ibp-grid-6 .info-block-grid .grid-item:nth-child(33), .ibp-grid-6 .info-block-grid .grid-item:nth-child(34), .ibp-grid-6 .info-block-grid .grid-item:nth-child(n+50) {
        grid-column: span 20;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(2), .ibp-grid-6 .info-block-grid .grid-item:nth-child(3) {
        grid-column: span 12;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(4) {
        grid-column-start: 13;
        grid-column-end: 21;
        grid-row-start: 2;
        grid-row-end: 4;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(5) {
        grid-column: span 12;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(6), .ibp-grid-6 .info-block-grid .grid-item:nth-child(7) {
        grid-column: span 3;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(8) {
        grid-column: span 6;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(9) {
        grid-column-start: 13;
        grid-column-end: 21;
        grid-row-start: 4;
        grid-row-end: 6;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(10) {
        grid-column: span 8;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(11) {
        grid-column: span 12;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(13), .ibp-grid-6 .info-block-grid .grid-item:nth-child(14), .ibp-grid-6 .info-block-grid .grid-item:nth-child(15), .ibp-grid-6 .info-block-grid .grid-item:nth-child(16),
    .ibp-grid-6 .info-block-grid .grid-item:nth-child(17), .ibp-grid-6 .info-block-grid .grid-item:nth-child(18), .ibp-grid-6 .info-block-grid .grid-item:nth-child(19), .ibp-grid-6 .info-block-grid .grid-item:nth-child(20) {
        grid-column: span 5;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(21) {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 10;
        grid-row-end: 12;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(22), .ibp-grid-6 .info-block-grid .grid-item:nth-child(23), .ibp-grid-6 .info-block-grid .grid-item:nth-child(24),
    .ibp-grid-6 .info-block-grid .grid-item:nth-child(25), .ibp-grid-6 .info-block-grid .grid-item:nth-child(26), .ibp-grid-6 .info-block-grid .grid-item:nth-child(27) {
        grid-column: span 5;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(29), .ibp-grid-6 .info-block-grid .grid-item:nth-child(30),
    .ibp-grid-6 .info-block-grid .grid-item:nth-child(31), .ibp-grid-6 .info-block-grid .grid-item:nth-child(32) {
        grid-column: span 10;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(35), .ibp-grid-6 .info-block-grid .grid-item:nth-child(36), .ibp-grid-6 .info-block-grid .grid-item:nth-child(37), .ibp-grid-6 .info-block-grid .grid-item:nth-child(38), .ibp-grid-6 .info-block-grid .grid-item:nth-child(39),
    .ibp-grid-6 .info-block-grid .grid-item:nth-child(40), .ibp-grid-6 .info-block-grid .grid-item:nth-child(41), .ibp-grid-6 .info-block-grid .grid-item:nth-child(42), .ibp-grid-6 .info-block-grid .grid-item:nth-child(43), .ibp-grid-6 .info-block-grid .grid-item:nth-child(44) {
        grid-column: span 4;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(45) {
        grid-column-start: 1;
        grid-column-end: 13;
        grid-row-start: 19;
        grid-row-end: 21;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(46), .ibp-grid-6 .info-block-grid .grid-item:nth-child(47) {
        grid-column: span 8;
    }

    .ibp-grid-6 .info-block-grid .grid-item:nth-child(48), .ibp-grid-6 .info-block-grid .grid-item:nth-child(49) {
        grid-column: span 10;
    }

/*-----------------------------------------------
    GRID LAYOUT - 07
-------------------------------------------------*/

.ibp-grid-7 .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(1),
    .ibp-grid-7 .info-block-grid .grid-item:nth-child(n+34) {
        grid-column: span 7;
    }

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(2), .ibp-grid-7 .info-block-grid .grid-item:nth-child(9),
    .ibp-grid-7 .info-block-grid .grid-item:nth-child(16),
    .ibp-grid-7 .info-block-grid .grid-item:nth-child(18), .ibp-grid-7 .info-block-grid .grid-item:nth-child(20),
    .ibp-grid-7 .info-block-grid .grid-item:nth-child(28), .ibp-grid-7 .info-block-grid .grid-item:nth-child(29) {
        grid-column: span 3;
    }

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(3), .ibp-grid-7 .info-block-grid .grid-item:nth-child(13),
    .ibp-grid-7 .info-block-grid .grid-item:nth-child(17),
    .ibp-grid-7 .info-block-grid .grid-item:nth-child(19), .ibp-grid-7 .info-block-grid .grid-item:nth-child(21) {
        grid-column: span 4;
    }

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(4), .ibp-grid-7 .info-block-grid .grid-item:nth-child(12) {
        grid-column: span 3;
        grid-row: span 2;
    }

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(5), .ibp-grid-7 .info-block-grid .grid-item:nth-child(6),
    .ibp-grid-7 .info-block-grid .grid-item:nth-child(7), .ibp-grid-7 .info-block-grid .grid-item:nth-child(8),
    .ibp-grid-7 .info-block-grid .grid-item:nth-child(10), .ibp-grid-7 .info-block-grid .grid-item:nth-child(11),
    .ibp-grid-7 .info-block-grid .grid-item:nth-child(14), .ibp-grid-7 .info-block-grid .grid-item:nth-child(15),
    .ibp-grid-7 .info-block-grid .grid-item:nth-child(32), .ibp-grid-7 .info-block-grid .grid-item:nth-child(33) {
        grid-column: span 2;
    }

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(22) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(23) {
        grid-column: span 5;
    }

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(30) {
        grid-column: span 3;
        grid-row: span 2;
    }

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(31) {
        grid-column: span 4;
    }

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(24), .ibp-grid-7 .info-block-grid .grid-item:nth-child(25) {
        grid-column: span 2;
    }

    .ibp-grid-7 .info-block-grid .grid-item:nth-child(26), .ibp-grid-7 .info-block-grid .grid-item:nth-child(27) {
        grid-column: span 1;
    }


/*-----------------------------------------------
    GRID LAYOUT - 08
-------------------------------------------------*/

.ibp-grid-8 .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

    .ibp-grid-8 .info-block-grid .grid-item:nth-child(1), .ibp-grid-8 .info-block-grid .grid-item:nth-child(4), .ibp-grid-8 .info-block-grid .grid-item:nth-child(9), .ibp-grid-8 .info-block-grid .grid-item:nth-child(10),
    .ibp-grid-8 .info-block-grid .grid-item:nth-child(19), .ibp-grid-8 .info-block-grid .grid-item:nth-child(20), .ibp-grid-8 .info-block-grid .grid-item:nth-child(21), .ibp-grid-8 .info-block-grid .grid-item:nth-child(n+38) {
        grid-column: span 4;
    }

    .ibp-grid-8 .info-block-grid .grid-item:nth-child(2), .ibp-grid-8 .info-block-grid .grid-item:nth-child(3),
    .ibp-grid-8 .info-block-grid .grid-item:nth-child(11), .ibp-grid-8 .info-block-grid .grid-item:nth-child(12),
    .ibp-grid-8 .info-block-grid .grid-item:nth-child(13), .ibp-grid-8 .info-block-grid .grid-item:nth-child(14),
    .ibp-grid-8 .info-block-grid .grid-item:nth-child(22), .ibp-grid-8 .info-block-grid .grid-item:nth-child(23),
    .ibp-grid-8 .info-block-grid .grid-item:nth-child(24), .ibp-grid-8 .info-block-grid .grid-item:nth-child(25) {
        grid-column: span 2;
    }

    .ibp-grid-8 .info-block-grid .grid-item:nth-child(34), .ibp-grid-8 .info-block-grid .grid-item:nth-child(37) {
        grid-column: span 3;
    }


/*---------------------------------------------------------
        MOBILE UPDATES
    */

@media screen and (max-width:800px) {

    *[class*='ibp-grid'] .info-block-grid {
        grid-template-columns: 1fr;
    }

    .info-block-grid .grid-item {
        grid-row: unset;
        grid-column: unset;
        grid-row-start: unset;
        grid-column-start: unset;
        grid-row-end: unset;
        grid-column-end: unset;
    }
}

.mobile-test .info-block-grid {
    grid-template-columns: 1fr !important;
}

    .mobile-test .info-block-grid .grid-item {
        grid-row: unset !important;
        grid-column: unset !important;
    }


/*---------------------------------------------------------------
        DYNAMIC CONTENT 
    */

/*---------------------------------------------------------------
        DYNAMIC CONTENT : APP
*/

/*-- SNAPSHOTS --*/

/*-----------------------------------------------
    DYNAMIC CONTENT SNAPSHOTS
*/

.grid-item.feature, .grid-item.feature-middle {
    display: block !important;
}

    .grid-item.feature .overlay-content, .grid-item.feature-middle .overlay-content {
        /* padding: 10px;*/
        height: 100%;
    }

.snapshot-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-evenly;
    min-height: 30vh;
    transform: rotateX(0deg);
    transform-origin: top center;
}

    .snapshot-holder .snapshotFlex {
        flex-basis: 24%;
        /* height: 100%;*/
    }

.snapshot-col-1 .snapshot-holder .snapshotFlex {
    flex-basis: 100%;
}

.snapshot-col-2 .snapshot-holder .snapshotFlex {
    flex-basis: 48%;
}

.snapshot-col-3 .snapshot-holder .snapshotFlex {
    flex-basis: 32%;
}

.snapshot-col-4 .snapshot-holder .snapshotFlex {
    flex-basis: 24%;
}

.snapshot-col-5 .snapshot-holder .snapshotFlex {
    flex-basis: 18%;
}

.snapshot-holder .snapshotFlex {
    min-width: 260px;
}

.tablet .snapshot-holder .snapshotFlex {
    flex-basis: 32%;
}

.tablet-small .snapshot-holder .snapshotFlex {
    flex-basis: 48%;
}

.small-content .snapshot-holder .snapshotFlex,
.mobile .snapshot-holder .snapshotFlex {
    flex-basis: 85%;
}

.snapshot {
    /* height: 100%;*/
    display: flex;
    flex-direction: column;
    min-height: 350px;
    min-width: 1fr;
    border: solid 1px var(--my-gray);
    background-color: var(--my-white);
    color: var(--my-white-text);
    padding: 0px;
    margin: 0px;
    border-radius: var(--border-radius-small);
}

.grid-item[class*="feature"] .snapshot {
    /* for feature blocks that aren't from an info block */
    height: 100%;
}

div.feature:hover .snapshot, div.feature:focus-within .snapshot {
    box-shadow: 2px 2px 4px rgba(0,0,0,.25);
    transition: box-shadow ease-in-out 400ms;
}

.snapshot-top {
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
    padding: 10px;
    background-size: cover;
    /* background-position: center;*/
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    min-height: 150px;
    height: 14vh;
}

    .snapshot-top * {
        margin: 0px;
        padding: 0px;
        margin-bottom: 5px;
    }

.feature-middle .snapshot-top {
    place-content: center;
    text-align: center;
}

.snapshot-top.has-background, .snapshot-top[class*='stock-'] {
    position: relative;
    z-index: 1;
}

    .snapshot-top.has-background:before, .snapshot-top[class*='stock-']:before {
        position: absolute;
        content: " ";
        background-color: var(--box-shade-background);
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-top-left-radius: var(--border-radius-small);
        border-top-right-radius: var(--border-radius-small);
        z-index: 2;
    }

/*--background positioning --*/
.bg-top-left .snapshot-top.has-background {
    background-position: top left;
}

.bg-top-center .snapshot-top.has-background {
    background-position: top center;
}

.bg-top-right .snapshot-top.has-background {
    background-position: top right;
}

.bg-left .snapshot-top.has-background {
    background-position: left;
}

.bg-center .snapshot-top.has-background {
    background-position: center;
}

.bg-right .snapshot-top.has-background {
    background-position: right;
}

.bg-bottom-left .snapshot-top.has-background {
    background-position: bottom left;
}

.bg-bottom-center .snapshot-top.has-background {
    background-position: bottom center;
}

.bg-bottom-right .snapshot-top.has-background {
    background-position: bottom right;
}

.snapshot-top.feau-fix-bg:before {
    /*-removes the background darkening color-*/
    background-color: unset;
}

.snapshot-top.background-1, .snapshot-top.background-1 * {
    background-color: var(--primary) !important;
    color: var(--primary-text) !important;
}

.snapshot-top.background-2, .snapshot-top.background-2 * {
    background-color: var(--secondary) !important;
    color: var(--secondary-text) !important;
}

.snapshot-top.background-3, .snapshot-top.background-3 * {
    background-color: var(--neutral) !important;
    color: var(--neutral-text) !important;
}

.snapshot-top.background-4, .snapshot-top.background-4 * {
    background-color: var(--dark) !important;
    color: var(--dark-text) !important;
}

.snapshot-top.background-5, .snapshot-top.background-5 * {
    background-color: var(--accent-1) !important;
    color: var(--accent-1-text) !important;
}

.snapshot-top.background-6, .snapshot-top.background-6 * {
    background-color: var(--accent-2) !important;
    color: var(--accent-2-text) !important;
}

.snapshot-top.background-black, .snapshot-top.background-black * {
    background-color: var(--my-black) !important;
    color: var(--my-black-text) !important;
}

.snapshot-top.background-gray, .snapshot-top.background-gray * {
    background-color: var(--my-gray) !important;
    color: var(--my-gray-text) !important;
}

.snapshot-top.background-white, .snapshot-top.background-white * {
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
}

.snapshot:hover .snapshot-top.has-background:before, .snapshot:hover .snapshot-top[class*='stock-']:before,
.snapshot:focus-within .snapshot-top.has-background:before, .snapshot:focus-within .snapshot-top[class*='stock-']:before {
    background-color: var(--box-shade-background-more);
}


.snapshot:hover .snapshot-top.feau-fix-bg:before, .snapshot:focus-within .snapshot-top.feau-fix-bg:before {
    /*-removes the background darkening color-*/
    background-color: unset;
}

.snapshot-top.has-background *, .snapshot-top[class*='stock-'] *, .snapshot-top[style*='background-image'] * {
    z-index: 3;
    position: relative;
    text-shadow: var(--text-shadow-snapshot);
    font-size: var(--font-size-extra-large);
    font-weight: 400;
    line-height: calc(var(--font-size-extra-large) + .2em);
    margin-bottom: 0px;
    margin-top: 10px;
    flex-basis: auto;
}

.snapshot-top[class*='stock-'] *, .snapshot-top[style*='background-image'] * {
    background-color: var(--background-overlay) !important;
    color: var(--my-white) !important;
}

.snapshot-top.has-background-image *, .snapshot-top[class*='stock-'] *, .snapshot-top[style*='background-image'] * {
    background-color: var(--background-overlay) !important;
    color: var(--my-white) !important;
    text-shadow: var(--text-shadow-snapshot) !important;
}

.snapshot-top.has-background .smaller, .snapshot-top[class*='stock-'] .smaller {
    font-size: var(--font-size-reduced);
    font-weight: bold;
}

.snapshot-top p.accordion-title {
    width: 100%;
}

.snapshot-bottom {
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
}

    .snapshot-bottom img, .snapshot-bottom .accordion-title {
        display: none;
    }

    .snapshot-bottom, .snapshot-bottom *:not([class*='button']):not(button):not(i) {
        background-color: var(--my-white) !important;
        color: var(--my-white-text) !important;
        text-shadow: none !important
    }

        .snapshot-bottom p, .snapshot-bottom li, .snapshot-bottom td, .snapshot-bottom th {
            margin: 0px;
            margin-bottom: 3px;
            font-size: var(--font-size-reduced);
        }

        .snapshot-bottom *:last-child {
            margin-top: auto;
        }

            .snapshot-bottom *:last-child i {
                margin-top: unset;
                padding-top: 2px;
            }

.snapshot-button-holder {
    width: 100%;
    display: flex !important;
    justify-content: end;
    align-items: flex-end;
}

.snapshot-bottom button {
    border: solid 1px var(--border-gray);
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    cursor: pointer;
    width: 30%;
    min-width: 80px;
    border-radius: var(--border-radius-round);
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 5px;
    align-content: center;
    align-items: center;
    min-height: 35px;
}

    .snapshot-bottom button i {
        text-align: end;
    }

        .snapshot-bottom button i:before {
            display: grid;
            height: 4px;
        }

    .snapshot-bottom button:hover, .snapshot-bottom button:hover * {
        background-color: var(--orange-hover) !important;
        color: var(--orange-hover-text) !important;
    }

.mobile .snapshot, .mobile .snapshot-top, .mobile .snapshot-bottom {
    height: unset;
    min-height: unset;
}

.mobile .snapshot {
    box-shadow: var(--box-shadow);
}


/*-- SNAP SHOTS WITH DATA--*/

.snapshot-active .app-data-holder, .app-data-holder {
    transform: rotateX(90deg);
    transform-origin: top center;
    height: 0px;
    width: 0px;
    opacity: 0;
}

.snapshot-hidden .app-data-holder {
    width: 100%;
    height: auto;
    transform: rotateX(0deg);
    transform-origin: top center;
    animation: 100ms snapshot-fade-in 1s forwards;
}

.snapshot-hidden .app-data-holder {
    opacity: 0;
    animation: 400ms linear 600ms forwards fade-in;
}


.snapshot-active .snapshot-holder {
    transform: rotateX(0);
    transform-origin: top center;
    height: auto;
    width: 100%;
    transition: all var(--transition-time) ease-in-out;
}

.snapshot-hidden .snapshot-holder {
    transform-origin: top center;
    animation-name: snapshot-fade-out;
    animation-delay: 15ms;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
    transform: rotateX(90deg);
    transform-origin: top center;
    transition: transform var(--transition-time) ease-in-out;
    min-height: unset;
    height: 0px;
}

@keyframes snapshot-roll-down {
    from {
        transform: rotateX(90deg);
        opacity: 0;
        height: auto;
    }

    to {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes snapshot-roll-up {
    from {
        transform-origin: top center;
        transform: rotateX(0deg);
    }

    to {
        transform-origin: top center;
        transform: rotateX(90deg);
        height: 0px;
    }
}

@keyframes snapshot-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes snapshot-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/*--------------------------------
    filter option
*/

li.filter-value.hide-option {
    text-decoration: line-through;
    display: none;
}

/*-----------------------------------------
    INFO BLOCK APPLICATIONS
*/
[id*="app-filter-reset"] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
    height: 100%;
    align-items: flex-end;
}

.btn-reset-filter {
    min-width: 125px;
    background-color: var(--cloud);
    color: var(--cloud-text);
    border-radius: var(--border-radius-small);
    border: solid 1px var(--warm-gray);
    height: 35px;
    padding: 8px;
    cursor: pointer;
}

    .btn-reset-filter * {
        background-color: inherit;
        color: inherit;
    }

.btn-mobile-filter {
    display: none;
}

.mobile .btn-mobile-filter {
    display: block;
}

.dark-mode .btn-reset-filter, .dark-mode .btn-reset-filter *:not(i) {
    background-color: var(--dialog);
    color: var(--dialog-text);
}

.btn-reset-filter:hover, .btn-reset-filter:hover *:not(i) {
    background-color: var(--medium-blue);
    color: var(--medium-blue-text);
}


.app-data-holder {
    display: grid;
    grid-template-areas: "searchbar openclose"
        "content filter";
    grid-template-columns: calc(100% - 350px) minmax(350px, 1fr);
    gap: 10px;
    align-items: start;
}


.filter-left .app-data-holder {
    display: grid;
    grid-template-areas: "openclose searchbar"
        "filter content";
    grid-template-columns: 350px 1fr;
    gap: 10px;
    align-items: start;
}

.app-data-holder.no-filter-tools,
.app-data-holder.no-filter {
    display: grid;
    grid-template-areas:
        "searchbar searchbar clear-search openclose"
        "content content content content";
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: end;
}

.app-data-holder.two-column.no-filter-tools,
.app-data-holder.one-column.no-filter-tools,
.app-data-holder.two-column.no-filter,
.app-data-holder.one-column.no-filter,
.app-data-holder.col-2.no-filter-tools,
.app-data-holder.col-1.no-filter-tools,
.app-data-holder.col-2.no-filter,
.app-data-holder.col-1.no-filter {
    grid-template-areas: "searchbar searchbar"
        "clear-search openclose"
        "content content";
}

.app-data-holder.no-filter-tools .btn-mobile-filter,
.app-data-holder.no-filter .btn-mobile-filter {
    display: none;
}

.tablet-small .app-data-holder,
.mobile .app-data-holder,
.mobile .app-data-holder.no-filter-tools {
    grid-template-columns: unset;
    grid-template-areas:
        "searchbar"
        "clear-search"
        "openclose"
        "filter"
        "content" !important;
}

.app-search-bar {
    grid-area: searchbar;
}

.app-search-tools {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 10px;
    align-items: end;
}

.mobile .app-search-tools {
    grid-template-columns: 1fr;
}

.search-count p {
    margin: 0px;
    color: var(--orange-dark-hover);
    font-weight: 700;
    padding: 4px;
    margin-bottom: 0px;
    line-height: unset;
    text-align: center;
}

.dark-mode .search-count p {
    color: var(--light-blue);
}

.msg-expand-results {
    font-size: var(--font-size-portal-small);
}

    .msg-expand-results button {
        font-size: var(--font-size-portal-small);
        padding: 4px;
        border-radius: var(--border-radius-chamfer);
    }

.app-open-close-btn-holder {
    grid-area: openclose;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-around;
    height: 100%;
    align-items: flex-end;
}

.small-content .app-open-close-btn-holder {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-items: center;
}

.app-open-close-btn-holder button {
    min-width: 100px;
    background-color: var(--cloud);
    color: var(--cloud-text);
    border-radius: var(--border-radius-small);
    border: solid 1px var(--warm-gray);
    height: 35px;
    padding: 6px 10px;
    cursor: pointer;
}

    .app-open-close-btn-holder button:hover, .app-open-close-btn-holder button:hover * {
        background-color: var(--orange-hover) !important;
        color: var(--orange-hover-text) !important;
    }

.app-open-close-btn-holder.has-snapshot button {
    min-width: 150px;
}

.mobile .app-open-close-btn-holder button {
    width: 100%;
    flex-basis: 48%;
}

.no-filter.no-search .app-data-holder {
    grid-template-areas: "content";
    align-content: start;
}

.the-app-data {
    grid-area: content;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    height: min-content;
}

.the-filter-tools {
    grid-area: filter;
    /*width: min(30vw, 350px);*/
    max-width: 350px;
    width: 100%;
}

.small-content .the-filter-tools,
.tablet-small .the-filter-tools,
.mobile .the-filter-tools {
    width: 100%;
    max-width: unset;
}

.app-data-holder.no-filter-tools .the-filter-tools,
.no-filter .app-data-holder .the-filter-tools {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-content: end;
}

    .app-data-holder.no-filter-tools .the-filter-tools [id*='app-filter-reset'],
    .no-filter .app-data-holder .the-filter-tools [id*='app-filter-reset'] {
        grid-area: clear-search;
        padding: 0px;
        align-items: flex-end;
    }



.app-data-holder.no-filter-tools .the-filter-tools,
.no-filter .app-data-holder .the-filter-tools {
    display: none;
}

.filter-search-results-reset-box {
    /* margin-bottom: 10px;*/
}

.app-search, .app-dataset, .app-filter {
    margin-bottom: 0px;
}

.app-search-bar {
    position: relative;
}

.app-search label {
    position: relative;
    z-index: 3;
    display: inherit;
}

.app-search-bar label {
    display: block;
    position: relative;
    font-size: var(--font-size-small);
}

.app-search-input {
    border-radius: 10px;
    font-size: var(--font-size);
    line-height: 33px;
    display: grid;
    align-items: center;
    width: 100%;
    padding-right: 40px;
    padding-left: 10px;
    border: solid 1px var(--border-gray);
    box-sizing: border-box;
}

    .app-search-input:focus {
        border: solid 3px var(--orange);
        outline: 0;
    }

.app-search-bar label button {
    position: absolute;
    bottom: 4px;
    right: 1%;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: var(--white);
    color: var(--medium-blue);
    font-size: var(--font-size);
    border: 0px;
    cursor: pointer;
}

    .app-search-bar label button:hover {
        border: solid 1px var(--warm-gray);
        background-color: var(--light-gray);
        color: var(--light-gray-text);
    }

        .app-search-bar label button:hover * {
            background-color: var(--light-gray);
            color: var(--light-gray-text);
        }

.dark-mode .app-search-bar label button {
    background-color: inherit;
    color: inherit;
}

.app-filter details {
    margin-bottom: 0px;
}

    .app-filter details.no-show-options {
        display: none;
    }

    .app-filter details summary {
        display: grid;
        grid-template-columns: 1fr 35px 35px;
        gap: 10px;
        align-items: center;
        text-transform: capitalize;
        padding: 10px 8px;
        font-weight: 300;
        min-height: 44px;
    }

        .app-filter details summary * {
            font-weight: 300;
        }

        .app-filter details summary i:before {
            content: "\2b";
        }

    .app-filter details[open] summary i:before {
        content: "\f068";
    }

.active-count.active {
    background-color: inherit;
    color: inherit;
    border: solid 1px var(--light-gray);
    border-radius: var(--border-radius-round);
    padding: 8px;
    text-align: center;
    font-size: var(--font-size-small);
}

.filter-header {
    background-color: var(--dialog);
    color: var(--dialog-text);
    padding: 8px;
    text-align: center;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    margin: 0px;
}

.app-filter ul {
    margin: 0px;
    padding: 5px;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.app-filter li {
    margin: 0px;
    padding: 8px;
    flex-basis: 50%;
    display: grid;
}

.one-column .app-filter li,
.col-1 .app-filter li {
    flex-basis: 100%;
}

.app-filter li.filter-value {
    flex-basis: 50%;
}

.one-column .app-filter li.filter-value,
.col-1 .app-filter li.filter-value {
    flex-basis: 100%;
}

.mobile .app-filter li.filter-value {
    flex-basis: 100%;
    min-height: 44px;
}


.app-filter label {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .5em;
    align-items: start;
    font-size: .85rem;
    line-height: 1rem;
    /* text-transform: capitalize;
     align-items:start;*/
    width: max-content;
}

.collections label,
.collections label .the-label-text {
    text-transform: unset !important;
}

.app-filter label input[type='checkbox'] {
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    min-width: 1.15em;
    height: 1.15em;
    border: 0.15em solid var(--secondary);
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
}

.dark-mode .app-filter label input[type='checkbox'] {
    /*  border: 0.15em solid var(--medium-blue-dark);*/
}

.app-filter label input[type='checkbox']:before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--orange);
}

.app-filter label input[type='checkbox']:checked::before {
    transform: scale(1);
}

.app-filter label input[type='checkbox']:hover {
    border: 0.15em solid var(--dark);
}

.dark-mode .app-filter label input[type='checkbox']:hover {
    /* border: 0.15em solid var(--orange-dark);*/
}

.filter-section-header {
    font-size: var(--font-size-small);
    font-weight: 600;
    border-bottom: solid 1px var(--light-gray);
    width: 100%;
}

.app-data {
    flex-basis: 32.333333%;
    min-height: 44px;
    padding: 0px;
    border: solid 1px var(--border-gray);
    /* border-radius: var(--border-radius-chamfer);*/
    box-shadow: var(--box-shadow-less);
    background-color: var(--my-white);
}

    .app-data .data-content .app-data-set-name {
        font-size: var(--font-size-navigation-lower);
        font-size: .75rem;
        font-weight: bold;
        line-height: .6875rem;
        margin-bottom: 6px;
        margin-top: 10px;
        margin-left: 8px;
        padding: 8px 14px;
        width: fit-content;
        background-color: var(--accent-2);
        color: var(--accent-2-text);
        border-radius: 4px;
        text-transform: uppercase;
    }

.dark-mode .app-data .data-content .app-data-set-name {
    background-color: var(--accent-2-dark);
    color: var(--accent-2-dark-text);
}

.app-data .block-main-title {
    font-size: var(--font-size-larger);
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 5px;
    padding-bottom: 10px;
}

    .app-data .block-main-title:first-child {
        font-size: var(--font-size-extra-large);
        color: var(--medium-blue);
        margin-top: 10px;
    }

.dark-mode .app-data .block-main-title:first-child {
    color: var(--my-black);
}

.app-data-holder.no-filter-tools .app-data {
    flex-basis: 24%;
}

.mobile .app-data,
.mobile .app-data-holder.no-filter-tools .app-data,
.small-content .app-data-holder.no-filter-tools .app-data,
.one-column .app-data-holder.no-filter-tools .app-data,
.one-column .app-data,
.col-1 .app-data-holder.no-filter-tools .app-data,
.col-1 .app-data,
.mobile .two-column .app-data, .mobile .two-column .app-data-holder.no-filter-tools .app-data,
.mobile .three-column .app-data, .mobile .three-column .app-data-holder.no-filter-tools .app-data,
.mobile .col-2 .app-data, .mobile .col-2 .app-data-holder.no-filter-tools .app-data,
.mobile .col-3 .app-data, .mobile .col-3 .app-data-holder.no-filter-tools .app-data {
    flex-basis: 99%;
}


.two-column .app-data, .two-column.app-data-holder.no-filter-tools .app-data,
.tablet .app-data-holder.no-filter-tools .app-data,
.two-column .app-data-holder.no-filter-tools .app-data,
.col-2 .app-data,
.col-2 .app-data-holder.no-filter-tools .app-data {
    flex-basis: 48%;
}

.three-column .app-data,
.three-column .app-data-holder.no-filter-tools .app-data,
.col-3 .app-data,
.col-3 .app-data-holder.no-filter-tools .app-data {
    flex-basis: 32%;
}

.medium-content.three-column .app-data,
.medium-content.three-column .app-data-holder.no-filter-tools .app-data,
.medium-content.col-3 .app-data,
.medium-content.col-3 .app-data-holder.no-filter-tools .app-data {
    flex-basis: 48%;
}

/*--- button preview images --*/
.app-title.app-preview-img {
    grid-template-columns: 80px 1fr;
    /* gap: 10px;*/
    padding-left: 0px !important;
    padding-top: 0px !important;
}

.app-preview-img .app-preview-img-file {
    height: 60px;
    width: 90px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* border-radius: 10px;*/
    margin: 0px;
}

.app-data.active .app-preview-img .app-preview-img-file {
    margin-top: 0px;
    display: none;
}

.app-button-top-image .app-data {
    padding: 0px;
}

.app-button-top-image .app-title {
    border-radius: var(--border-radius-chamfer);
}

    .app-button-top-image .app-title.app-preview-img {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0px;
    }

.app-button-top-image .app-preview-img .app-preview-img-file {
    background-position: top center;
    height: 80px;
    background-size: cover;
    width: 100%;
    border-radius: 0px;
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
}

.app-button-top-image .app-data.active .app-preview-img-file {
    display: none;
}

.app-button-top-image .app-data.active .app-title {
    padding: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/*-- application data elements --*/
.app-data > * {
    display: none;
}

.app-data.active, .app-data.active > * {
    display: block;
}

    .app-data.active .data-content {
        clear: both;
    }

.app-data .directory-direct-link {
    display: none;
}

.app-data.active .directory-direct-link {
    display: grid;
    padding-top: 0px;
    /*padding-right: 10px;*/
}

    .app-data.active .directory-direct-link button {
        border-radius: 0px;
    }

.app-data.active .last-updated-date {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px 15px;
    gap: 10px;
    font-weight: 100;
    line-height: 1.8em;
    font-size: var(--font-size-tiny);
    justify-content: end;
    background-color: initial !important;
    color: initial !important;
}

    .app-data.active .last-updated-date .the-date {
        font-weight: 600;
    }

.app-data.active .data-content {
    padding-top: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
}

    .app-data.active .data-content > *:first-child {
        margin-top: 0px;
        padding-top: 8px;
    }

.app-data.active p {
    margin-top: 2px;
}

.app-data img {
    display: block;
}

.app-data .accordion-set {
    display: none;
}

.app-data.active .accordion-set {
    display: block;
}

.app-data.active,
.app-data-holder.no-filter-tools .app-data.active {
    flex-basis: 100%;
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    border: solid 1px var(--my-gray-border-alt);
    padding: 0px;
    position: relative;
}

    .app-data.active .app-title-text {
        display: none;
    }

    .app-data.active > p {
        padding: 1rem;
        line-height: 2.3rem;
        width: 100%;
        margin-top: 0;
        margin-bottom: 8px;
    }

    .app-data.active > ul {
        padding: 5px 4rem;
        margin: 0;
    }

    .app-data.active > p, .app-data.active > h2, .app-data.active > h3, .app-data.active > h4, .app-data.active > h5,
    .app-data.active > h6, .app-data.active > section, .app-data.active > div, .app-data.active > hr {
        clear: both;
    }

    .app-data.active > *[class*='notice'] {
        min-width: 85%;
        max-width: 95%;
        width: unset;
        padding-left: 80px;
    }

    .app-data.active > hr {
        margin: 20px 0px;
        padding: 0px;
        line-height: 1rem;
        clear: both;
        width: 100%;
    }

    .app-data.active > .app-data-header-image, .app-data.active > .app-data-header-image img {
        margin: 0;
        padding: 0;
        display: block;
    }

    /*--- COLOR APP DATA --*/
    .app-data.active .data-content,
    .app-data.active .data-content p:not([class*='background']), .app-data.active .data-content strong, .app-data.active .data-content i,
    .app-data.active .data-content ul:not([class*='background']), .app-data.active .data-content ol:not([class*='background']), .app-data.active .data-content li,
    .app-data.active .data-content table, .app-data.active .data-content td, .app-data.active .data-content td span, .app-data.active .data-content caption {
        background-color: var(--my-white) !important;
        color: var(--my-white-text) !important;
    }

        .app-data.active .data-content th {
            background-color: var(--primary) !important;
            color: var(--primary-text) !important;
            font-size: var(--font-size-large);
            font-weight: 300;
            text-align: center;
        }

            .app-data.active .data-content p[class*='background'] *,
            .app-data.active .data-content th * {
                background-color: inherit !important;
                color: inherit !important;
            }

        .app-data.active .data-content ol, .app-data.active .data-content ul {
            margin-left: 5px;
            padding-left: 40px;
        }

            .app-data.active .data-content ol li:before {
                left: -40px;
                top: 1px;
            }

    .app-data.active p.app-data-set-name {
        position: relative;
        color: var(--dark) !important;
        border-radius: 0px;
        font-weight: 700;
        text-transform: capitalize;
        font-size: .650em !important;
        letter-spacing: 0.05rem;
        padding: 8px 20px 2px 30px !important;
        margin: 0px;
        /*border-top: solid 1px var(--accent-2-border-alt) !important;
            border-bottom: solid 1px var(--accent-2-border-alt) !important;*/
    }

        .app-data.active p.app-data-set-name:before {
            content: " ";
            background-color: var(--accent-1) !important;
            position: absolute;
            left: 10px;
            top: 8px;
            height: 10px;
            width: 10px;
            border-radius: 2px;
        }

    .app-data.active .data-content .block-main-title, .app-data.active .data-content .block-main-title * {
        background-color: var(--my-white) !important;
        color: var(--primary) !important;
    }

    .app-data.active .data-content .accordion-title, .app-data.active .data-content .accordion-title * {
        background-color: var(--my-white) !important;
        color: var(--secondary) !important;
    }

    .app-data.active a:not([class*='button']), .app-data.active a:not([class*='button']) strong, .app-data.active a:not([class*='button']) em, .app-data.active a:not([class*='button']) i {
        background-color: var(--my-white) !important;
        color: var(--secondary) !important;
    }

    .app-data.active .data-content .block-main-title a:not([class*='button']) {
        padding: 12px 4px;
        background-color: var(--my-white) !important;
        color: var(--secondary) !important;
        display: flex;
        align-items: baseline;
    }



/*----------
   APP DATA TABLE SPECIALS
*/
.app-data.table-by-2:not(.active) table {
    display: none;
}

.table-by-2 table,
.app-data.active.table-by-2 table {
    width: 47%;
    padding: 0px;
    margin: 1%;
    margin-bottom: 15px;
    border: 0px;
    display: inline-table;
}

.two-column .table-by-2 table,
.two-column .app-data.active.table-by-2 table,
.one-column .table-by-2 table,
.one-column .app-data.active.table-by-2 table,
.col-2 .table-by-2 table,
.col-2 .app-data.active.table-by-2 table,
.col-1 .table-by-2 table,
.col-1 .app-data.active.table-by-2 table {
    width: 98%
}


.app-data button.app-title {
    display: grid;
    align-items: start;
    align-content: baseline;
    height: 100%;
    font-size: var(--font-size);
    padding: 4px;
    padding-bottom: 0px;
    cursor: pointer;
    position: relative;
    border: 0px;
    /*margin-bottom: 5px;*/
    width: 100%;
    text-align: left;
    background-color: inherit;
    color: inherit;
    border-bottom: solid 4px transparent;
    font-size: var(--font-size-large);
    background-color: var(--my-white) !important;
    color: var(--secondary) !important;
}

.app-data .app-button-title-text, .app-data .app-button-title-text * {
    background-color: var(--my-white) !important;
    color: var(--secondary) !important;
}

.app-data .app-button-title-text, .app-data .app-site-name,
.app-data .app-button-title-text, .app-data .app-data-set-name {
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    font-weight: bold;
    margin: 0px;
}

.app-data .app-site-name {
    font-style: italic;
    font-weight: normal;
    padding-left: 0px;
}

.app-data button.app-title:hover {
    border-bottom: solid 4px var(--medium-blue-hover);
}

.app-data button.app-title:focus {
    border-bottom: solid 4px var(--orange-hover);
}

.app-button-title-text {
    display: grid !important;
    text-align: left !important;
    justify-content: left !important;
    padding: 10px;
}

.app-data.active button.app-title {
    margin-bottom: 0px;
}

    .app-data.active button.app-title,
    .app-data.active button.app-title * {
        background-color: var(--my-gray) !important;
        color: var(--my-gray-text) !important;
    }

.app-data.active .app-button-title-text {
    padding: 4px;
}

    .app-data.active .app-button-title-text p {
        padding: 0px;
        font-weight: 300;
        font-style: italic;
        font-size: var(--font-size-small) !important;
        font-weight: normal !important;
        display: none;
    }

    .app-data.active .app-button-title-text small {
        display: none;
    }

button.app-title small {
    color: var(--medium-blue);
}

.dark-mode button.app-title small {
    color: var(--light-blue);
}

.app-data.active > button {
    background-color: var(--light-gray);
    color: var(--light-gray-text);
    background-color: var(--border-gray);
    color: var(--border-gray-text);
    height: 38px;
    width: 100%;
    margin-bottom: 4px;
    display: grid;
    align-content: center;
}

.app-data.active .directory-direct-link {
    display: grid;
    grid-template-areas: "clipboard-notice link";
    gap: 10px;
    min-height: 44px;
    z-index: 5;
    padding-right: 10px;
    background-color: initial !important;
    color: initial !important;
}

    .app-data.active .directory-direct-link > p {
        grid-area: clipboard-notice;
    }

    .app-data.active .directory-direct-link > button {
        grid-area: link;
    }


    .app-data.active .directory-direct-link > * {
        flex-basis: content;
    }

    .app-data.active .directory-direct-link button {
        background-color: var(--accent-2) !important;
        color: var(--accent-2-text) !important;
        border: solid 1px var(--accent-2-border-alt);
        border-radius: var(--border-radius-big-pill);
        padding: 6px !important;
        font-size: var(--font-size-small-title);
        margin-top: 4px;
        height: 30px;
    }

        .app-data.active .directory-direct-link button * {
            background-color: inherit !important;
            color: inherit !important;
        }

        .app-data.active .directory-direct-link button:hover {
            border: solid 1px var(--orange);
            background-color: var(--orange-hover) !important;
            color: var(--orange-hover-text) !important;
        }

            .app-data.active .directory-direct-link button:hover * {
                background-color: inherit !important;
                color: inherit !important;
            }

.dark-mode .app-data.active .directory-direct-link button {
    border: solid 1px var(--orange-dark);
}

.dark-mode .app-data.active button {
    background-color: var(--dark-gray);
    color: var(--dark-gray-text);
}

.app-data.active button.app-title:after {
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    right: 10px;
    top: 20%;
    content: "\f057";
    z-index: 5;
}

.app-data.active button * {
    background-color: inherit;
    color: inherit;
    /* text-shadow: var(--text-shadow-less);*/
}

.app-data.active button.app-title:before {
    transform: rotateZ(0);
    transition: all var(--transition-time) ease-in-out;
}


.app-data .app-title .app-site-name,
.app-data .app-title .app-data-set-name {
    display: block;
    font-size: var(--font-size-portal-small);
    line-height: var(--font-size-portal-medium);
    margin: 0;
    padding: 0px;
    padding-bottom: 3px;
}

.app-data.active .app-title .app-data-set-name {
    padding-left: 0;
}

.app-content-title {
    padding: 0;
    margin: 0;
    width: auto;
    font-weight: 300;
}

.active .app-content-title {
    font-weight: bold;
    font-size: var(--font-size-main);
}

.app-title:hover {
    border-left: solid 4px var(--orange);
}

.search-match {
    border-bottom: solid 6px var(--sunshine);
}

.app-title-text {
    font-weight: bold;
    font-size: var(--font-size-large);
    border-bottom: solid 2px var(--primary);
    margin: 0px;
}

.application-list .app-search-bar,
.application-list .filter-search-results-reset-box,
.application-list .the-filter-tools,
.application-list .app-open-close-btn-holder,
.application-list .app-data {
    display: none !important;
}

.application-list .app-data-holder {
    padding-bottom: 5vh;
    grid-template-columns: 1fr;
}

.application-list .application-list-dropdown label {
    display: grid;
    grid-template-columns: 280px 1fr;
    font-size: var(--font-size-large);
    color: var(--secondary) !important;
    align-items: center;
    text-transform: capitalize;
}

.mobile .application-list .application-list-dropdown label,
.small-content.application-list .application-list-dropdown label {
    grid-template-columns: 1fr;
    font-size: var(--font-size);
}

.application-list .application-list-dropdown select {
    width: 100%;
    font-size: var(--font-size-large);
    padding: 8px;
    border: solid 3px var(--secondary);
    background-color: var(--my-white);
    color: var(--my-white-text);
}

.dark-mode .application-list .application-list-dropdown select {
    background-color: var(--my-white-dark);
    color: var(--my-white-dark-text);
    border-color: var(--secondary-dark);
}

.application-list .application-list-dropdown select option {
    font-size: var(--font-size-large);
    border-bottom: dotted 2px var(--border-gray);
}

.mobile .application-list .application-list-dropdown select option,
.small-content .application-list .application-list-dropdown select option {
    font-size: var(--font-size);
}

.application-list .app-data.active {
    display: block !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
}

.application-list .app-title {
    display: none !important;
}

/*-- APP Link Directory */

.app-link-directory .app-data-holder {
    display: grid;
    grid-template-areas: "searchbar clear-search"
        "content filter";
    /*grid-template-columns: 3fr minmax(280px, 1fr);*/
    gap: 10px;
    align-items: start;
    grid-template-rows: min-content;
}

.app-link-directory .app-search-bar {
    display: grid;
    align-items: end;
    height: 100%;
}

.app-link-directory .the-app-data {
    gap: 5px;
}

.app-link-directory .app-open-close-btn-holder {
    display: none;
}

.app-link-directory .app-data[match="1"] {
    padding: 0px;
    min-height: 46px;
    flex-basis: 32%;
    box-shadow: none;
    display: grid;
    align-content: center;
    margin-bottom: 8px !important;
}

    .app-link-directory .app-data[match="1"] .app-list-collection-item,
    .app-link-directory .app-data[data-source-match="1"] .app-list-collection-item {
        display: grid;
        grid-template-columns: 1fr;
        position: relative;
        min-height: 44px;
        padding: 0px !important;
        /* padding-bottom: 8px !important;*/
    }

        .app-link-directory .app-data[match="1"] .app-list-collection-item p,
        .app-link-directory .app-data[data-source-match="1"] .app-list-collection-item p {
            margin: 0px;
            font-size: var(--font-size-small);
            width: fit-content;
            z-index: 1;
            line-height: unset;
        }

        .app-link-directory .app-data[match="1"] .app-list-collection-item a,
        .app-link-directory .app-data[data-source-match="1"] .app-list-collection-item a,
        .app-link-directory .app-data[match="0"] .app-list-collection-item a,
        .app-link-directory .app-data[data-source-match="0"] .app-list-collection-item a,
        .app-link-directory .app-group .app-data[match="1"] a,
        .app-link-directory .app-group .app-data[data-source-match="1"] a,
        .app-link-directory .app-group .app-data[match="0"] a,
        .app-link-directory .app-group .app-data[data-source-match="0"] a {
            margin: 0px;
            width: fit-content;
            font-size: var(--font-size);
            font-weight: 300;
            text-decoration: none;
            color: var(--secondary);
            z-index: 0;
            display: flex;
            align-items: center;
            align-content: end;
            border-bottom: solid 2px transparent;
            padding-bottom: 0px;
            padding-left: 0px;
            margin-left: 10px;
        }

.app-link-no-dataset {
    height: 100%;
}

.app-link-directory .app-data[match="1"] .app-list-collection-item a i {
    display: inline-flex;
    align-content: flex-end;
    flex-wrap: wrap;
    padding-bottom: 4px;
    padding-left: 4px;
}

.app-link-directory .app-data[match="1"] .app-list-collection-item a:hover,
.app-link-directory .app-data[match="1"] .app-list-collection-item a:focus,
.app-group .app-data[match="1"] a:hover,
.app-group .app-data[match="1"] a:focus {
    font-weight: 700;
    border-bottom: solid 2px var(--orange-dark);
}

.app-link-directory .app-data a {
    transition: none;
    padding: 6px 8px;
}

.app-link-directory .app-data:hover {
    border: solid 1px var(--border-gray-dark);
    border-bottom: solid 1px var(--orange-dark);
    box-shadow: var(--box-shadow-less);
    background-color: var(--secondary);
    color: var(--secondary-text);
}

    .app-link-directory .app-data:focus-within,
    .app-link-directory .app-data:focus-within p,
    .app-link-directory .app-data:focus-within a,
    .app-link-directory .app-data:focus-within .app-list-collection-item a,
    .app-link-directory .app-data:hover,
    .app-link-directory .app-data:hover p,
    .app-link-directory .app-data:hover a,
    .app-link-directory .app-data:hover .app-list-collection-item a {
        background-color: var(--secondary);
        color: var(--secondary-text);
    }

.app-link-directory .the-app-data.one-column,
.app-link-directory .the-app-data.col-1 {
    display: grid;
    grid-template-columns: 1fr;
}

.app-link-directory .the-app-data.two-column .app-data {
    flex-basis: 48%;
}

.app-link-directory .the-app-data.three-column .app-data {
    flex-basis: 32%;
}

.tablet .app-link-directory .app-data {
    flex-basis: 48%;
}

.mobile .app-link-directory .app-data {
    flex-basis: 100%;
    position: relative;
}

.app-link-directory .app-data a:first-child {
    display: flex;
    flex-direction: row;
    gap: 1px;
    min-height: 40px;
    align-items: center;
    padding-left: 10px;
    text-decoration: none;
    font-size: var(--font-size-reduced);
    cursor: pointer;
    border-bottom: solid 2px transparent;
    font-weight: unset;
    width: 100%;
}

.app-link-directory .search-match {
    background-color: unset !important;
    color: unset !important;
    padding: unset !important;
    border-bottom: dashed 1px var(--orange);
}

/*-----------------------------
    APP DATA GROUP BY DISPLAY
*/
[class*='group-'] .app-data-holder {
    grid-template-areas: unset;
    grid-template-columns: 1fr;
}

.app-group-search-bar {
    display: grid;
    grid-template-columns: 1fr 300px minmax(300px, 450px);
    gap: 10px;
    width: 96%;
    margin: auto;
    margin-bottom: 20px;
}

.tablet .app-group-search-bar {
    grid-template-columns: auto auto;
}

    .tablet .app-group-search-bar label:first-child {
        grid-column: span 2;
    }

.mobile .app-group-search-bar,
.small-content .app-group-search-bar {
    grid-template-columns: 1fr;
    gap: 20px;
}

.app-group-search-bar label {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    position: relative;
}

    .app-group-search-bar label span {
        font-size: var(--font-size-small);
    }

.app-group-search-bar .app-search-input {
    padding-right: 48px;
}

.app-group-search-bar .app-search-select {
    padding-right: 10px;
    min-height: 33px;
}

.app-group-search-bar label button {
    position: absolute;
    bottom: 4px;
    right: 1%;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: var(--my-white);
    color: var(--my-white-text);
    font-size: var(--font-size);
    border: 0px;
    cursor: pointer;
}

    .app-group-search-bar label button:hover, .app-group-search-bar label button:focus {
        background-color: var(--secondary-hover);
        color: var(--secondary-hover-text);
    }

.app-group-open-close-btn-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-around;
    height: 100%;
    align-items: flex-end;
}

    .app-group-open-close-btn-holder button {
        min-width: 130px;
        background-color: var(--cloud);
        color: var(--cloud-text);
        border-radius: var(--border-radius-small);
        border: solid 1px var(--warm-gray);
        height: 35px;
        padding: 6px 10px;
        cursor: pointer;
    }

        .app-group-open-close-btn-holder button:hover {
            background-color: var(--orange-hover);
            color: var(--orange-hover-text);
        }

.app-group-no-results {
    grid-column: span 3;
}

.tablet .app-group-no-results {
    grid-column: span 2;
}

.mobile .app-group-no-results, .small-content .app-group-no-results {
    grid-column: unset;
}

.app-group-by-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

    .app-group-by-items > div {
        flex-basis: auto;
        min-width: 280px;
        background-color: inherit;
        color: inherit;
        border: solid 0px var(--border-gray);
        padding: 10px;
        border-radius: var(--border-radius-chamfer);
        box-shadow: none;
        flex: 1 1 auto;
    }

    .app-group-by-items div.app-data {
        box-shadow: none;
    }

.col-1 .app-group-by-items > div {
    flex-basis: 100%;
}

.col-2 .app-group-by-items > div {
    flex-basis: 48%;
}

.col-3 .app-group-by-items > div {
    flex-basis: 32.333333%;
}

.col-4 .app-group-by-items > div {
    flex-basis: 24.242424%;
}

.col-5 .app-group-by-items > div {
    flex-basis: 19.191919%;
}

.tablet .app-group-by-items > div,
.app-group-by-items.col-auto > div {
    flex-basis: auto;
}

.mobile .app-group-by-items > div,
.small-content .app-group-by-items > div {
    flex-basis: 100%;
}

[class*='background'] .app-group > details[open], [class*='background'] .app-group > details[open] > *:not(summary),
[class*='background'] .app-group > details,
.app-group-by-items details, .app-group-by-items details[open] {
    border: 0px !important;
    padding: 3px;
    background-color: inherit !important;
    color: inherit !important;
}

    .app-group-by-items details summary {
        display: grid;
        grid-template-columns: 1fr 30px;
        font-size: var(--font-size-large);
        font-weight: bold;
        color: inherit;
        text-transform: capitalize;
        padding: 2px;
        background-color: inherit;
        border-bottom: solid 2px var(--my-gray-hover);
    }

        .app-group-by-items details summary i {
            padding: 8px;
            font-size: var(--font-size-reduced);
            transform: rotateZ(0deg);
            transition: transform var(--transition-time) ease;
        }

    .app-group-by-items details:not([open]) summary i {
        transform: rotateZ(90deg);
        transform-origin: center center;
        transition: transform var(--transition-time) ease;
    }

:not([class*='background']) .app-group > details > summary {
    color: var(--medium-blue);
}

.dark-mode :not([class*='background']) .app-group > details > summary {
    /* color: var(--medium-blue-hover);*/
}

.app-group-by-items details .app-data {
    border: 0px;
    background: inherit;
    color: inherit;
}

    .app-group-by-items details .app-data:hover,
    .app-group details .app-data:hover {
        border: 0px !important;
        box-shadow: unset;
        background-color: unset;
        color: unset;
    }

.app-group-by-items details .app-data,
.app-group-by-items details .app-list-collection-item {
    padding: 0px !important;
    margin: 0px !important;
    min-height: unset !important;
}

.app-group-by-items details .app-data {
    padding-left: 5px !important;
}

.app-group-by-items details .app-list-collection-item p {
    display: none;
}

.app-group-by-items details .app-list-collection-item {
    display: flex !important;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
    align-content: center;
}

    .app-group-by-items details .app-list-collection-item .subtitle {
        display: grid;
        padding: 0px;
        margin: 0px;
        align-items: center;
        font-size: var(--font-size-reduced);
        background: inherit;
        color: inherit;
    }

    .app-group-by-items details .app-list-collection-item a:before,
    .app-group details a:before {
        content: "\f04b";
        font-family: "Font Awesome 6 Duotone";
        position: absolute;
        left: 4px;
        top: 40%;
        font-size: 10px;
    }

    .app-group-by-items details .app-list-collection-item a:hover:before,
    .app-group details a:hover:before {
        color: var(--orange);
    }

    .app-group details .app-data:hover a,
    .app-group details .app-data a,
    .app-group details .app-data:hover a,
    .app-group-by-items details .app-list-collection-item a,
    .app-group-by-items details .app-data:hover a {
        padding: 0px !important;
        padding-left: 20px !important;
        margin: 0px !important;
        border: 0px !important;
        border-bottom: solid 2px transparent !important;
        width: 100% !important;
        display: flex !important;
        align-content: center !important;
        align-items: center !important;
        min-height: 40px;
        position: relative;
    }

        .app-group details a:hover, .app-group details a:first-child:hover,
        .app-group-by-items details .app-list-collection-item a:hover {
            /* border-bottom: dotted 2px var(--dark-orange) !important;*/
            background-color: inherit !important;
            color: inherit !important;
        }

.mobile .app-group {
    padding: 0px;
}

    .mobile .app-group details {
        width: 100%;
        margin: 0px 0px 10px 0px;
    }

/*-- application inventory--*/
.application-inventory .app-open-close-btn-holder button:not(.btn-reset-filter) {
    display: none;
}

.application-inventory .app-data-holder.no-filter-tools.no-search .app-open-close-btn-holder {
    display: none !important;
}

.application-inventory .app-data button:first-child {
    display: none;
}

.application-inventory .app-data > * {
    display: grid;
}

.application-inventory .app-data .data-content .app-data-set-name {
    position: relative;
    color: var(--dark) !important;
    border-radius: 0px;
    font-weight: 700;
    text-transform: capitalize;
    font-size: .650em !important;
    letter-spacing: 0.05rem;
    padding: 4px 20px 8px 20px !important;
    padding-left: 20px !important;
}

    .application-inventory .app-data .data-content .app-data-set-name:before {
        content: " ";
        background-color: var(--accent-1) !important;
        position: absolute;
        left: 4px;
        top: 5px;
        height: 8px;
        width: 8px;
    }

.application-inventory .app-data .block-main-title {
    margin: 0px;
    font-size: var(--font-size-large);
    padding: 2px 10px 5px 10px;
}

    .application-inventory .app-data .block-main-title:first-child {
        font-size: var(--font-size-larger);
    }

/*-------------
        APPLICATION READING LIST
    */

.application-reading .app-data-holder {
    display: grid;
    grid-template-areas: "searchbar searchbar openclose"
        "reading-list content filter" !important;
    grid-template-columns: 340px 1fr 340px;
    align-items: start;
}

.application-reading.no-filter .app-data-holder {
    display: grid;
    align-items: start;
    grid-template-areas: "searchbar searchbar openclose"
        "reading-list content content" !important;
    grid-template-columns: minmax(300px, 350px) 1fr minmax(350px, 1fr);
    align-items: start;
}

.application-reading .the-filter-tools {
    height: max-content;
    position: sticky;
    top: 5px;
}

.application-reading details summary {
    padding: 10px;
}

.application-reading details[open] summary i:before {
    /* content: "\f068";*/
}

.application-reading .app-reading-list {
    grid-area: reading-list;
    padding: 8px;
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    border-radius: var(--border-radius-chamfer);
    height: max-content;
    position: sticky;
    top: 5px;
}

    .application-reading .app-reading-list p:not(.reading-title),
    .application-reading .data-content div,
    .application-reading .pre-bucket, .application-reading .bucket-content-holder {
        background-color: var(--my-white) !important;
        color: var(--my-white-text) !important;
    }

.application-reading .the-app-data {
    align-items: start;
}

    .application-reading .the-app-data .app-data {
        flex-basis: 100%;
        display: none;
    }

        .application-reading .the-app-data .app-data.active {
            flex-basis: 100%;
            display: grid;
        }

.application-reading .app-reading-list .dataset-name {
    background-color: var(--primary) !important;
    color: var(--primary-text) !important;
    border-bottom: solid 1px var(--primary-border-alt);
    padding: 8px;
    margin: 0px;
    border-radius: var(--border-radius-small);
}

.application-reading .app-reading-list p {
    margin: 0px;
}

.application-reading .reading-title {
    font-weight: bold;
    font-size: var(--font-size-small);
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    border-bottom: solid 3px var(--accent-1);
    padding: 2px;
    margin-bottom: 10px !important;
    text-transform: uppercase;
    text-align: center
}

.application-reading .app-reading-list button {
    color: var(--primary) !important;
    background-color: inherit !important;
    border: 0;
    margin: 0px;
    width: 100%;
    padding: 8px;
    padding-left: 34px;
    cursor: pointer;
    border-bottom: solid 2px transparent;
    display: block;
    text-align: left;
    position: relative;
}

    .application-reading .app-reading-list button *:not(i) {
        color: var(--primary) !important;
        background-color: inherit !important;
    }

    .application-reading .app-reading-list button:hover {
        text-decoration: underline;
        text-underline-offset: var(--text-underline-offset);
        text-decoration-color: var(--orange);
        text-decoration-thickness: 2px;
    }

    .application-reading .app-reading-list button.active:before {
        content: "\f058";
        font-family: "Font Awesome 6 Pro";
        position: absolute;
        left: 10px;
        top: 6px;
        font-size: var(--font-size);
        color: var(--secondary);
    }

.mobile .application-reading .app-data-holder {
    grid-template-areas: "searchbar"
        "openclose"
        "reading-list"
        "content" !important;
    grid-template-columns: 1fr;
    gap: 5px;
}

.mobile .application-reading .app-reading-list {
    position: relative;
    margin-bottom: 10px;
}

/*-------------------------------------------------------
    APPLICATION SEARCH FIRST
*/
.application-search-first .app-search-body {
    /* min-height: var(--half);
    border: solid 1px var(--primary);
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    border-radius: var(--border-radius);*/
    width: 100%;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
}

.small-content.application-search-first .app-search-body,
.mobile .application-search-first .app-search-body {
    padding: 0px;
}


.application-search-first .app-search-body.search-start {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "search-box"
        "instructions";
    align-content: center;
    justify-content: center;
}

.medium-content.application-search-first .app-search-body.search-start,
[class*='tablet'] .application-search-first .app-search-body.search-start,
.mobile .application-search-first .app-search-body.search-start {
    align-content: start;
    justify-content: start;
    padding: 2px;
}

.application-search-first .app-search-body:not(.search-start) {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "search-box"
        "search-data";
    /* grid-template-rows: 110px;*/
    align-content: start;
    justify-content: start;
    gap: 0px;
}

.medium-content.application-search-first .app-search-body:not(.search-start),
[class*='tablet'] .application-search-first .app-search-body:not(.search-start),
.mobile .application-search-first .app-search-body:not(.search-start) {
    gap: 0px;
}

.application-search-first .app-search-search {
    grid-area: search-box;
    padding: 5px;
    margin: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    /*border-bottom: solid 1px var(--dark);*/
    padding-bottom: 10px;
    margin-bottom: 0px;
    max-height: fit-content;
}

.application-search-first .app-search-body.search-start .app-search-search {
    flex-wrap: wrap;
}

.large-content.application-search-first .app-search-search {
    display: flex;
}

.medium-content.application-search-first .app-search-search,
[class*='tablet'] .application-search-first .app-search-search,
.tablet-small .application-search-first .app-search-search {
    display: grid;
    grid-template-areas: "search-box search-box reset"
        "results-count filter filter";
    grid-template-columns: auto auto auto;
    gap: 10px;
}

.small-content.application-search-first .app-search-search,
.mobile .application-search-first .app-search-search {
    display: grid;
    grid-template-areas: "search-box search-box"
        "results-count  reset"
        "filter filter";
    grid-template-columns: auto auto;
    gap: 10px;
}

    .small-content.application-search-first .app-search-search button:not(.app-btn-search),
    [class*='tablet'] .application-search-first .app-search-search button:not(.app-btn-search),
    .mobile .application-search-first .app-search-search button:not(.app-btn-search) {
        width: fit-content;
        margin: auto;
        margin-bottom: 5px;
        transition: width var(--transition-time) ease;
        min-width: 150px;
    }

.application-search-first .search-start .app-search-search {
    border-bottom: 0px;
}

.medium-content.application-search-first .search-start .app-search-search {
    display: grid;
    grid-template-areas: unset;
    grid-template-columns: 1fr;
}

.application-search-first .app-search-search .app-p-search {
    margin: 0px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.application-search-first .search-start .app-search-search .app-p-search {
    margin: auto;
    width: 90%;
}

.medium-content.application-search-first .search-start .app-search-search .app-p-search,
[class*='tablet'] .application-search-first .search-start .app-search-search .app-p-search,
.mobile .application-search-first .search-start .app-search-search .app-p-search {
    margin: auto;
    width: 100%;
}

.application-search-first .search-start .app-search-search .app-search-box {
    flex-basis: 100% !important;
    width: 90%;
}

.large-content.application-search-first .search-start .app-search-search .app-search-box,
.medium-content.application-search-first .search-start .app-search-search .app-search-box,
.small-content.application-search-first .search-start .app-search-search .app-search-box,
[class*='tablet'] .application-search-first .search-start .app-search-search .app-search-box,
.mobile .application-search-first .search-start .app-search-search .app-search-box {
    flex-basis: 100% !important;
    width: 100%;
    grid-column: span 4;
}

.medium-content.application-search-first .app-search-search .app-search-box,
[class*='tablet'] .application-search-first .app-search-search .app-search-box,
.small-content.application-search-first .app-search-search .app-search-box,
.tablet-small .application-search-first .app-search-search .app-search-box,
.mobile .application-search-first .app-search-search .app-search-box {
    flex-basis: 100% !important;
    width: 100%;
    grid-column: span 2;
}


.application-search-first *:not(.search-start) .app-search-search .app-search-box {
    flex-basis: 65%;
    width: 100%;
    margin: auto;
}

.medium-content.application-search-first .app-search-search .app-search-box {
    flex-basis: 100%;
}

.application-search-first .app-search-search .app-p-search label {
    margin: 0px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    margin: auto;
}

.application-search-first .search-start .app-search-search .app-p-search label {
}

.application-search-first .app-search-search .app-p-search label span {
    font-size: small;
    width: 100%;
}

.application-search-first .app-search-search .app-p-search label input {
    flex-basis: 100%;
    font-size: var(--font-size-medium);
    background-color: var(--my-white);
    color: var(--primary);
    box-shadow: var(--box-shadow-down);
    border-radius: var(--border-radius);
    padding: 12px;
    padding-right: 50px;
}

.application-search-first .app-search-search .app-p-search label button {
    height: 35px;
    width: 35px;
    font-size: var(--font-size-medium);
    background-color: var(--my-white);
    color: var(--primary);
    border-radius: var(--border-radius-circle);
    border: 0;
    display: grid;
    align-content: center;
    justify-content: center;
    position: absolute;
    z-index: 50;
    right: 5px;
    bottom: 6px;
    cursor: pointer;
}

    .application-search-first .app-search-search .app-p-search label button:hover,
    .application-search-first .app-search-search .app-p-search label button:focus {
        background-color: var(--primary);
        color: var(--my-white);
    }

.application-search-first .app-search-count {
    grid-area: results-count;
    flex-basis: auto;
    align-items: end;
    justify-content: center;
    display: grid;
    min-width: 150px;
}

    .application-search-first .app-search-count p {
        margin: 0px;
        margin-bottom: 10px;
        padding: 0px;
        font-size: var(--font-size-reduced);
    }

.application-search-first .search-start .app-search-count,
.application-search-first .search-start .app-search-filter,
.application-search-first .search-start .app-search-ai {
    display: none;
}

.application-search-first .app-search-filter {
    grid-area: filter;
    flex-basis: auto;
    align-items: end;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0px;
}

    .application-search-first .app-search-filter .filter-count.active-count {
        display: grid;
        aspect-ratio: 1 / 1;
        height: 28px;
        border-radius: var(--border-radius);
        padding: 4px;
        font-size: var(--font-size-small);
        background-color: var(--my-white);
        color: var(--my-white-text);
        border: solid 1px var(--border-gray);
        align-items: center;
        align-content: center;
        justify-content: center;
    }

    .application-search-first .app-search-filter .filter-group-title {
        font-size: var(--font-size-portal-small);
        flex-basis: 100%;
        margin: 0px;
        padding: 0px 6px;
        text-align: left;
    }


.application-search-first .app-search-ai {
    grid-area: ask-ai;
    flex-basis: auto;
    align-items: end;
    justify-content: center;
    display: grid;
    display: none;
}

    .application-search-first .app-search-ai button .ai-logo img {
        height: 30px;
        width: auto;
        padding: 2px;
        margin-top: 4px;
        border-radius: var(--border-radius-round);
        border: solid 1px var(--orange);
    }

    .application-search-first .app-search-ai button.active .ai-logo img {
        border: solid 1px var(--secondary);
    }

.application-search-first .app-search-reset {
    grid-area: reset;
    flex-basis: auto;
    align-items: end;
    justify-content: center;
    display: grid;
}

.application-search-first .search-start .app-search-reset {
    display: none;
}

.application-search-first .app-search-filter button,
.application-search-first .app-search-ai button,
.application-search-first .app-search-reset button {
    height: 40px;
    width: fit-content;
    min-width: 110px;
    font-size: var(--font-size-reduced);
    background-color: var(--cloud);
    color: var(--cloud-text);
    border-radius: var(--border-radius-small);
    border: solid 1px var(--border-gray);
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.application-search-first .app-search-filter button {
    justify-content: left;
    min-width: auto;
    gap: 10px;
    text-align: left;
    margin-right: 10px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: fit-content;
    transition: width var(--transition-time) ease;
}

    .application-search-first .app-search-filter button:hover,
    .application-search-first .app-search-filter button:focus,
    .application-search-first .app-search-ai button:hover,
    .application-search-first .app-search-ai button:focus,
    .application-search-first .app-search-search .app-search-reset button:hover,
    .application-search-first .app-search-search .app-search-reset button:focus {
        background-color: var(--primary);
        color: var(--my-white);
    }

    .application-search-first .app-search-filter button.active,
    .application-search-first .app-search-ai button.active {
        background-color: var(--orange-hover);
        color: var(--orange-hover-text);
    }

.application-search-first .app-search-filter span[class*='-count'].active {
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid 1px var(--border-gray);
    border-radius: var(--border-radius-circle);
    padding: 3px;
    display: grid;
    align-content: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-width: 30px;
}

.application-search-first .app-search-instructions {
    display: none;
}

.application-search-first .search-start .app-search-instructions {
    display: grid;
    grid-template-columns: 1fr;
    width: 90%;
    margin: auto;
}

.medium-content.application-search-first .search-start .app-search-instructions,
[class*='tablet'] .application-search-first .search-start .app-search-instructions,
.mobile .application-search-first .search-start .app-search-instructions {
    width: 100%;
    grid-column: span 4;
}

.application-search-first .app-search-sources {
    display: grid;
    position: sticky;
    top: 0px;
    grid-area: search-sources;
    background-color: var(--my-white);
    color: var(--primary);
    padding: 10px;
    border: solid 1px var(--border-gray);
    border-radius: var(--border-radius);
    height: fit-content;
    align-content: start;
    min-width: 250px;
    display: none; /* going in a different direction with layout, but don't delete things*/
}

.application-search-first .search-start .app-search-sources {
    display: none;
}

.application-search-first .app-search-sources fieldset {
    border: 0px;
    border-bottom: solid 1px var(--border-gray);
    padding: 6px 0px;
}

.application-search-first .app-search-sources .app-sources-sort-by fieldset legend {
    font-size: var(--font-size-portal-small);
}

.application-search-first .app-search-sources .app-sources-sort-by fieldset p {
    margin: 0px;
    padding: 2px;
}

    .application-search-first .app-search-sources .app-sources-sort-by fieldset p label {
        display: flex;
        flex-direction: row-reverse;
        gap: 10px;
        justify-content: flex-end;
        cursor: pointer;
    }

.application-search-first .app-search-sources .app-sources-sort-by p {
    margin: 0px;
    padding: 8px 0px;
}

.application-search-first .app-search-sources .app-sources-sort-by label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size);
}

    .application-search-first .app-search-sources .app-sources-sort-by label span {
        font-size: var(--font-size-small);
    }

    .application-search-first .app-search-sources .app-sources-sort-by label select {
        font-size: var(--font-size);
        min-height: 44px;
        background: var(--my-white);
        color: var(--primary);
        border-radius: var(--border-radius-chamfer);
    }

.application-search-first .app-search-sources p {
    margin: 0px;
    padding: 2px;
}

    .application-search-first .app-search-sources p[disabled] {
        display: none;
    }

.application-search-first .app-search-sources .btn-app-search-group {
    background: inherit;
    color: inherit;
    min-height: 44px;
    display: grid;
    align-content: center;
    padding-left: 28px;
    border: solid 1px transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-radius: var(--border-radius-chamfer);
    position: relative;
}

    .application-search-first .app-search-sources .btn-app-search-group.active,
    .application-search-first .app-search-sources .btn-app-search-group.active:focus,
    .application-search-first .app-search-sources .btn-app-search-group.active:hover {
        width: 110%;
        background-color: var(--primary);
        color: var(--primary-text);
        transition: width var(--transition-time) ease;
        border-color: var(--accent-1);
    }

    .application-search-first .app-search-sources .btn-app-search-group:before {
        position: absolute;
        left: 6px;
        height: 100%;
        width: 18px;
        font-family: var(--font-awesome-family);
        content: "\f466";
        display: grid;
        align-items: center;
    }

    .application-search-first .app-search-sources .btn-app-search-group.dataset:before {
        content: "\f466";
    }

    .application-search-first .app-search-sources .btn-app-search-group.site:before {
        content: "\e60e";
    }

    .application-search-first .app-search-sources .btn-app-search-group.active:before {
        content: "\f00c";
    }

    .application-search-first .app-search-sources .btn-app-search-group:hover,
    .application-search-first .app-search-sources .btn-app-search-group:focus {
        background: var(--accent-2);
        color: var(--accent-2-text);
        border: solid 1px var(--border-gray);
    }

.application-search-first .app-search-data {
    grid-area: search-data;
    padding: 8px;
    padding-top: 0px;
    min-height: var(--half);
    overflow: auto;
}

.application-search-first .search-start .app-search-data {
    display: none;
}

.application-search-first .data-storage,
.application-search-first .data-storage-formatted {
    display: none;
}

.application-search-first .app-search-data .data-no-results {
    flex-basis: 100%;
    grid-area: no-results;
}

    .application-search-first .app-search-data .data-no-results > * {
        font-size: var(--font-size-medium);
    }

.application-search-first .no-matching-clear-options {
    padding: var(--padding-width-thick);
    border-top: solid 5px var(--border-gray);
    font-size: var(--font-size-large);
}

    .application-search-first .no-matching-clear-options button {
        border: solid 1px var(--border-gray);
        padding: 8px;
        min-height: 44px;
        border-radius: var(--border-radius-chamfer);
        font-size: var(--font-size);
        background-color: var(--cloud);
        color: var(--cloud-text);
        cursor: pointer;
    }

        .application-search-first .no-matching-clear-options button:hover,
        .application-search-first .no-matching-clear-options button:focus {
            background-color: var(--secondary);
            color: var(--secondary-text)
        }

.application-search-first .app-search-data .app-data {
    display: grid;
    border: 0px;
    box-shadow: var(--box-shadow-faint);
    background-color: inherit;
    color: inherit;
    margin: 0px;
    margin-top: 15px;
    margin-bottom: 5px;
    height: auto;
    min-height: 65px;
    border: solid 1px var(--border-gray);
    border-left: solid 2px var(--primary);
}


.small-content.application-search-first .app-search-data .app-data,
[class*='tablet'] .application-search-first .app-search-data .app-data,
.mobile .application-search-first .app-search-data .app-data {
    height: unset;
    min-height: 80px;
}

.application-search-first .app-search-data .app-data:not(.active):hover,
.application-search-first .app-search-data .app-data:not(.active):focus-within {
    box-shadow: var(--box-shadow-down);
    border-top: solid 1px var(--secondary);
    border-right: solid 1px var(--secondary);
    border-bottom: solid 1px var(--secondary);
}

.application-search-first .app-search-data .app-data.no-show,
.application-search-first .app-search-data .app-data.no-match {
    display: none !important;
}

.application-search-first .app-search-data .app-data .item-header {
    display: grid;
    border: 0px;
    background-color: inherit;
    color: inherit;
    width: 100%;
}

.application-search-first .app-search-data .app-data .meta-scope {
    display: grid;
    align-content: center;
    border: 0px;
    background-color: inherit;
    color: inherit;
    width: 100%;
    text-align: left;
    justify-content: start;
    position: absolute;
    top: 8px;
}

    .application-search-first .app-search-data .app-data .meta-scope .item-meta-data {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        width: auto;
    }

.small-content.application-search-first .app-search-data .app-data .meta-scope .item-meta-data,
.mobile .application-search-first .app-search-data .app-data .meta-scope .item-meta-data {
    /*gap: 8px;*/
}

.application-search-first .app-search-data .app-data .meta-scope .item-meta-data li {
    margin: 0px;
    padding: 4px 6px;
    font-size: var(--font-size-portal-small);
    text-transform: uppercase;
    padding-left: 15px;
    line-height: 1em;
    width: max-content;
}

    .application-search-first .app-search-data .app-data .meta-scope .item-meta-data li button {
        font-size: var(--font-size-portal-small);
        flex-basis: auto;
        display: flex;
        align-items: center;
        margin: 0px;
        padding: 6px 10px;
        border-radius: var(--border-radius-chamfer);
        border: solid 1px transparent;
        background-color: inherit;
        color: inherit;
        cursor: pointer;
    }

        .application-search-first .app-search-data .app-data .meta-scope .item-meta-data li button:hover {
            border: solid 1px var(--primary);
            background-color: var(--accent-2);
            color: var(--accent-2-text);
        }

.application-search-first .app-search-data .app-data .btn-data-title {
    display: grid;
    border: 0px;
    background-color: inherit;
    color: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-bottom: solid 2px transparent;
}

    .application-search-first .app-search-data .app-data .btn-data-title:hover {
        border-bottom: solid 2px var(--secondary);
    }

    .application-search-first .app-search-data .app-data .btn-data-title .title {
        font-size: var(--font-size-large);
        /*font-weight: bold;*/
        margin: 0px;
        padding: 0px;
        padding-left: 8px;
        padding-top: 30px;
        padding-right: 30px;
    }

.application-search-first .app-search-data .app-data .data-main-content {
    display: none;
    visibility: hidden;
    opacity: 0;
}

.application-search-first .app-search-data .app-data.active .data-main-content {
    display: block;
    visibility: visible;
    opacity: 0;
    animation-name: fade-in;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

.application-search-first .app-search-data .app-data.active {
    background-color: initial !important;
    color: initial !important;
    border-top: solid 2px var(--border-gray);
    border-bottom: solid 2px var(--border-gray);
    border-left: solid 2px var(--border-gray);
    border-right: solid 2px var(--border-gray);
    height: fit-content;
    transition: height var(--transition-time) ease;
    box-shadow: var(--box-shadow-down );
}

    .application-search-first .app-search-data .app-data.active .item-header {
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        border-bottom: solid 1px var(--border-gray);
        position: relative;
    }

        .application-search-first .app-search-data .app-data.active .item-header:hover,
        .application-search-first .app-search-data .app-data.active .item-header:focus-within {
            background: linear-gradient(35deg, var(--primary), var(--primary-hover) 100%);
            color: var(--primary-text);
        }

    .application-search-first .app-search-data .app-data.active .btn-data-title {
        margin-bottom: 0px;
        padding-right: 50px;
    }

.application-search-first .app-search-data .app-data .btn-data-title:after {
    content: "\f13a";
    font-family: var(--font-awesome-family);
    position: absolute;
    z-index: 50;
    width: 50px;
    height: 100%;
    right: 0px;
    top: 0px;
    display: grid;
    align-content: center;
    justify-content: center;
    font-size: var(--font-size-larger);
    font-weight: 100;
}

.application-search-first .app-search-data .app-data.active .btn-data-title:after {
    content: "\f2d3";
}

.application-search-first .app-search-data .app-data.active .btn-data-title .title {
    font-size: var(--font-size);
    font-style: italic;
    font-weight: normal;
}

.application-search-first .app-search-data .app-data.active .last-updated-date {
    display: flex;
    flex-direction: row;
    gap: 10px;
    background-color: initial !important;
    color: initial !important;
    padding: 0px 15px;
    margin: 0px;
    justify-content: end;
    font-size: var(--font-size-tiny);
    font-weight: 100;
    line-height: 1.8em;
}

    .application-search-first .app-search-data .app-data.active .last-updated-date .the-date {
        font-weight: 500;
    }

.application-search-first .app-search-data .app-data.active .data-main-content {
    display: grid;
    background-color: initial !important;
    color: initial !important;
    padding: 0px 20px 10px 25px;
}

    .application-search-first .app-search-data .app-data.active .data-main-content p:not([class*='notice']) {
        padding: 8px;
        margin: 2px;
        width: calc(100% - 4px);
    }

.application-search-first .app-data.active .data-main-content *[class*='-title']:not(.accordion-title-text),
.application-search-first .app-data.active .data-main-content a:not([class*='button']) {
    background-color: initial !important;
    color: initial !important;
}

.application-search-first .app-results-toolbar {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-content: center;
    /*background-color: var(--cloud);
    color: var(--neutral-text);*/
    /*border: solid 1px var(--border-gray);
    padding: 4px;
    margin-bottom: 8px;*/
    border-radius: var(--border-radius);
}

    .application-search-first .app-results-toolbar > * {
        flex-basis: auto;
        /* margin: 2px 4px;*/
    }

    .application-search-first .app-results-toolbar .app-results-toolbar-title {
        font-size: var(--font-size-portal-small);
        width: fit-content;
    }

    .application-search-first .app-results-toolbar button {
        border-radius: var(--border-radius-chamfer);
        border: solid 1px var(--border-gray);
        font-size: var(--font-size-small);
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        cursor: pointer;
    }

        .application-search-first .app-results-toolbar button:hover,
        .application-search-first .app-results-toolbar button:focus {
            background-color: var(--primary);
            color: var(--primary-text)
        }

        .application-search-first .app-results-toolbar button.active {
            background-color: var(--orange-hover);
            color: var(--orange-hover-text)
        }

.application-search-first .app-results-overview {
    display: none;
}

    .application-search-first .app-results-overview.active {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 10px;
        justify-content: center;
        border: solid 1px var(--border-gray);
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        border-radius: var(--border-radius);
        border-top-left-radius: var(--border-radius-chamfer);
        border-top-right-radius: var(--border-radius-chamfer);
    }

    .application-search-first .app-results-overview .filter-results-title {
        width: 100%;
        border-top-left-radius: var(--border-radius-chamfer);
        border-top-right-radius: var(--border-radius-chamfer);
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 80px;
        padding: 10px;
    }

        .application-search-first .app-results-overview .filter-results-title p {
            margin: 0px;
            padding: 0px;
        }

.medium-content.application-search-first .app-results-overview .filter-results-title,
[class*='tablet'] .application-search-first .app-results-overview .filter-results-title,
.mobile .application-search-first .app-results-overview .filter-results-title {
    gap: 25px;
    padding: 6px 25px;
}

.mobile .application-search-first .app-results-overview .filter-results-title {
    gap: 10px;
    padding: 6px 10px;
}

    .mobile .application-search-first .app-results-overview .filter-results-title p,
    .mobile .application-search-first .app-results-overview .filter-results-title button {
        font-size: var(--font-size-portal-small);
    }

.application-search-first .app-results-overview .filter-results-title button {
    border-radius: var(--border-radius-chamfer);
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid 1px var(--border-gray);
    cursor: pointer;
    height: 40px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

    .application-search-first .app-results-overview .filter-results-title button.filter-close {
        border-radius: 100%;
        background-color: inherit;
        color: var(--primary);
        border: solid 0px var(--border-gray);
        cursor: pointer;
        height: 40px;
        width: 40px;
        font-size: var(--font-size-large);
        grid-template-columns: 1fr;
    }

.application-search-first .app-results-overview .bottom-close-btn {
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding: 10px;
}

    .application-search-first .app-results-overview .bottom-close-btn button.filter-close {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
        border-radius: var(--border-radius-chamfer);
        background-color: inherit;
        color: var(--primary);
        border: solid 1px var(--border-gray);
        cursor: pointer;
        height: 40px;
        width: max-content;
        align-items: center;
    }

        .application-search-first .app-results-overview .filter-results-title button:hover,
        .application-search-first .app-results-overview .filter-results-title button:focus,
        .application-search-first .app-results-overview .bottom-close-btn button.filter-close:hover,
        .application-search-first .app-results-overview .bottom-close-btn button.filter-close:focus {
            background-color: var(--secondary);
            color: var(--secondary-text);
        }

.application-search-first .app-results-overview.active .filter-container {
    display: grid;
    grid-template-columns: 1fr;
    padding: 8px;
}

.application-search-first .app-results-overview .filter-results-title button.button-info-landmark {
    min-height: 40px;
    background-color: inherit;
    color: inherit;
    border: solid 1px var(--border-gray);
    text-align: left;
}

    .application-search-first .app-results-overview .filter-results-title button.button-info-landmark i {
        font-size: var(--font-size);
    }

    .application-search-first .app-results-overview .filter-results-title button.button-info-landmark:hover,
    .application-search-first .app-results-overview .filter-results-title button.button-info-landmark:focus {
        background-color: var(--secondary);
        color: var(--secondary-text);
    }

    .application-search-first .app-results-overview .filter-results-title button.button-info-landmark.active {
        background-color: var(--orange-hover);
        color: var(--orange-hover-text);
    }

.application-search-first .app-results-overview .filter-options-info {
    visibility: hidden;
    opacity: 0;
    height: 0px;
}

    .application-search-first .app-results-overview .filter-options-info.active {
        visibility: visible;
        height: auto;
    }

        .application-search-first .app-results-overview .filter-options-info.active .info-container {
            border-top: solid 2px var(--orange);
            border-bottom: solid 2px var(--orange);
            margin: 5px 20px 40px 20px;
            padding: 6px;
        }

            .application-search-first .app-results-overview .filter-options-info.active .info-container p.info-title {
                font-weight: 100;
                font-size: var(--font-size-large);
                margin: 2px;
                padding: 0px;
            }

            .application-search-first .app-results-overview .filter-options-info.active .info-container p.title {
                font-weight: 300;
                font-size: var(--font-size-medium);
                margin: 2px;
                padding: 0px;
            }

            .application-search-first .app-results-overview .filter-options-info.active .info-container p:not(.title):not(.info-title) {
                padding: 4px 15px 2px 30px;
                font-size: var(--font-size-reduced);
            }

.small-content.application-search-first .app-results-overview .filter-options-info.active .info-container p:not(.title):not(.info-title),
.mobile .application-search-first .app-results-overview .filter-options-info.active .info-container p:not(.title):not(.info-title) {
    padding: 6px 0px 0px 10px;
    font-size: var(--font-size-reduced);
}

.application-search-first.no-meta-filter .results-group-overview.data-categories-tags {
    display: none;
}

.application-search-first .results-group-overview.data-categories-tags {
    grid-column: span 1;
}

.small-content.application-search-first .results-group-overview.data-categories-tags,
.mobile .application-search-first .results-group-overview.data-categories-tags {
    grid-column: span 1;
}

.application-search-first .results-group-overview.data-categories-tags > div {
    padding: 0px;
}

.application-search-first .results-group-overview.data-categories-tags ul.breakdown-search button {
    border: solid 1px var(--border-gray);
    border-radius: var(--border-radius-chamfer);
    padding: 10px;
    min-width: 230px;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: auto 30px;
    padding-left: 30px;
    position: relative;
    cursor: pointer;
    background-color: var(--neutral);
    color: var(--neutral-text);
    text-align: left;
    margin: 3px;
}

    .application-search-first .results-group-overview.data-categories-tags ul.breakdown-search button:hover,
    .application-search-first .results-group-overview.data-categories-tags ul.breakdown-search button:focus {
        background-color: var(--secondary);
        color: var(--secondary-text);
    }

    .application-search-first .results-group-overview.data-categories-tags ul.breakdown-search button:before {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 30px;
        display: grid;
        align-content: center;
        justify-content: center;
        font-size: var(--font-size);
        content: "\f0c8";
        font-family: var(--font-awesome-family);
    }

    .application-search-first .results-group-overview.data-categories-tags ul.breakdown-search button.active:before {
        content: "\f00c";
    }

.application-search-first .small-collection .app-results-overview.active .filter-container {
    grid-template-columns: 260px 1fr;
    grid-template-columns: 1fr;
}

.small-content.application-search-first .app-results-overview.active .filter-container,
.medium-content.application-search-first .app-results-overview.active .filter-container,
.tablet-small .application-search-first .app-results-overview.active .filter-container,
.mobile .application-search-first .app-results-overview.active .filter-container {
    grid-template-columns: 1fr;
}

.application-search-first .app-results-overview .content-tabs {
}

    .application-search-first .app-results-overview .content-tabs ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        padding-bottom: 8px;
        border-bottom: solid 1px var(--border-gray);
        min-height: 44px;
        width: 100%;
    }

        .application-search-first .app-results-overview .content-tabs ul li {
            margin: 0px;
            padding: 0px;
            flex-basis: auto;
            display: grid;
        }

            .application-search-first .app-results-overview .content-tabs ul li a {
                padding: 6px 12px;
                min-height: 40px;
                background-color: var(--my-gray);
                color: var(--secondary);
                border: solid 1px var(--border-gray);
                border-radius: var(--border-radius-chamfer);
                text-decoration: none;
                display: grid;
                grid-template-columns: auto auto;
                gap: 10px;
                align-items: center;
            }

                .application-search-first .app-results-overview .content-tabs ul li a[aria-selected='true'] .tab-text {
                    border-bottom: solid 4px var(--my-black);
                }

                .application-search-first .app-results-overview .content-tabs ul li a[aria-selected='true']:hover .tab-text {
                    border-bottom: solid 4px var(--my-white);
                }

                .application-search-first .app-results-overview .content-tabs ul li a .active-count:not(.no-count) {
                    display: grid;
                    aspect-ratio: 1 / 1;
                    height: 28px;
                    border-radius: var(--border-radius);
                    padding: 4px;
                    font-size: var(--font-size-small);
                    background-color: var(--my-white);
                    color: var(--my-white-text);
                    border: solid 1px var(--border-gray);
                    align-items: center;
                    align-content: center;
                    justify-content: center;
                }

                .application-search-first .app-results-overview .content-tabs ul li a.active {
                    background-color: var(--orange-hover);
                    color: var(--orange-hover-text);
                }

                .application-search-first .app-results-overview .content-tabs ul li a:hover {
                    background-color: var(--secondary);
                    color: var(--secondary-text);
                }

                .application-search-first .app-results-overview .content-tabs ul li a:focus {
                    outline: solid 2px var(--my-black);
                }

.application-search-first .app-results-overview .results-group-overview {
    display: none;
    padding: 0px;
    border: solid 1px var(--border-gray);
    background-color: var(--my-white);
    color: var(--my-white-text);
    width: 100%;
    margin: 0px;
    margin-bottom: 10px;
    align-content: start;
}

.desktop .application-search-first .app-results-overview .results-group-overview summary {
    display: none;
}

.application-search-first .app-results-overview .results-group-overview summary {
    display: grid;
    grid-template-columns: 20px 1fr 30px;
    gap: 8px;
    align-content: center;
    padding: 8px;
    width: 100%;
    flex-basis: 100%;
}

    .application-search-first .app-results-overview .results-group-overview summary .open-status {
        position: relative;
    }

        .application-search-first .app-results-overview .results-group-overview summary .open-status:before {
            position: absolute;
            content: "\2b";
            font-family: var(--font-awesome-family);
        }

.application-search-first .app-results-overview .results-group-overview[open] summary .open-status:before {
    position: absolute;
    content: "\f068";
    font-family: var(--font-awesome-family);
}

.application-search-first .app-results-overview .results-group-overview ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    gap: 0px;
    width: 100%;
}

    .application-search-first .app-results-overview .results-group-overview ul li {
        flex-basis: 33%;
        padding: 5px;
    }

.medium-content.application-search-first .app-results-overview .results-group-overview ul li,
.tablet-small .application-search-first .app-results-overview .results-group-overview ul li {
    flex-basis: 49%;
    padding: 5px;
}

.small-content.application-search-first .app-results-overview .results-group-overview ul li,
.mobile .application-search-first .app-results-overview .results-group-overview ul li {
    flex-basis: 100%;
    padding: 5px;
}

.application-search-first .app-results-overview .results-group-overview.active {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.application-search-first.no-metadata .app-results-overview .results-group-overview.data-categories-tags {
    display: none !important;
}

.application-search-first.side-filter .app-results-overview .results-group-overview.data-categories-tags.active {
    display: none;
}


.application-search-first .app-results-overview .results-group-overview .overview-panel {
    padding: 3px;
    flex-basis: 32%;
    /*min-width: 250px;*/
}

.large-content.application-search-first .app-results-overview .results-group-overview .overview-panel,
.medium-content.application-search-first .app-results-overview .results-group-overview .overview-panel,
.tablet .application-search-first .app-results-overview .results-group-overview .overview-panel {
    padding: 3px;
    flex-basis: 48%;
    min-width: unset;
}

.small-content .application-search-first .app-results-overview .results-group-overview .overview-panel,
.tablet-small .application-search-first .app-results-overview .results-group-overview .overview-panel,
.mobile .application-search-first .app-results-overview .results-group-overview .overview-panel {
    padding: 3px;
    flex-basis: 98%;
    min-width: 98%;
    min-width: unset;
}

.application-search-first .app-search-data.small-collection .app-results-overview .results-group-overview.data-dataset .overview-panel {
    padding: 3px;
    flex-basis: 98%;
    min-width: 98%;
}

.application-search-first .app-results-overview .results-group-overview .btn-search-filter {
    border: solid 1px var(--border-gray);
    border-radius: var(--border-radius-chamfer);
    padding: 10px;
    flex-basis: 24%;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: auto 30px;
    padding-left: 30px;
    position: relative;
    cursor: pointer;
    background-color: var(--neutral);
    color: var(--neutral-text);
    text-align: left;
    margin: 3px;
}

.application-search-first .app-results-overview .results-group-overview.data-site .btn-search-filter {
    /*  min-width: 280px;*/
}

.application-search-first .app-results-overview .results-group-overview .btn-search-filter span:first-child {
    font-weight: 700;
}

.application-search-first .app-results-overview .results-group-overview .btn-search-filter .data-count {
    text-align: center;
}

.application-search-first .app-results-overview .results-group-overview .btn-search-filter:before {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 30px;
    display: grid;
    align-content: center;
    justify-content: center;
    font-size: var(--font-size);
    content: "\f0c8";
    font-family: var(--font-awesome-family);
}

.application-search-first .app-results-overview .results-group-overview .btn-search-filter:hover,
.application-search-first .app-results-overview .results-group-overview .btn-search-filter:focus {
    background-color: var(--secondary);
    color: var(--secondary-text);
}

.application-search-first .app-results-overview .results-group-overview .btn-search-filter.active,
.application-search-first .app-results-overview .results-group-overview .breakout-word.active,
.application-search-first .breakdown-search .breakout-word.active {
    background-color: var(--orange-hover);
    color: var(--orange-hover-text);
}

    .application-search-first .app-results-overview .results-group-overview .btn-search-filter.active:hover,
    .application-search-first .app-results-overview .results-group-overview .breakout-word.active:hover,
    .application-search-first .breakdown-search .breakout-word.active:hover {
        background: linear-gradient(0deg, var(--orange-dark) 0%, var(--orange) 32%, var(--orange-hover) 100%);
        color: var(--orange-hover-text);
    }

    .application-search-first .app-results-overview .results-group-overview .btn-search-filter.active:before,
    .application-search-first .breakdown-search .breakout-word.active:before {
        content: "\f00c";
    }


.application-search-first .app-results-overview .results-group-overview .btn-search-filter[aria-disabled='true']:before {
    content: "\f05e";
}

.application-search-first .app-results-overview .results-group-overview .btn-search-filter[aria-disabled='true'] {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    cursor: not-allowed;
}

.application-search-first .app-results-overview .overview-panel-contents {
    width: 100%;
    height: 100%;
    display: block;
    padding-bottom: 8px;
    align-content: center;
    justify-content: center;
    background-color: var(--my-white);
    color: var(--my-white-text);
    border-radius: var(--border-radius);
}

.application-search-first .app-results-overview .results-group-overview p.data-type {
    font-size: var(--font-size-portal-small);
    text-align: left;
    background-color: var(--primary);
    color: var(--primary-text);
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
    padding: 6px 12px;
    margin: 0px;
    flex-basis: 100%;
    height: 26px;
    width: 100%;
    justify-content: center;
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: center;
    align-items: center;
}

.application-search-first .app-results-overview .results-group-overview p.data-dataset {
    background-color: var(--secondary);
    color: var(--secondary-text);
}

.application-search-first .app-results-overview .results-group-overview p.data-site {
    background-color: var(--dark);
    color: var(--dark-text);
}


.application-search-first .app-results-overview .overview-panel p {
    font-size: var(--font-size-reduced);
    text-align: center;
}

    .application-search-first .app-results-overview .overview-panel p.data-title {
        font-size: var(--font-size-medium);
        font-weight: bold;
        display: grid;
        grid-template-columns: 1fr;
        align-content: center;
        height: 100%;
    }

    .application-search-first .app-results-overview .overview-panel p.data-count {
        margin-top: auto;
    }

.application-search-first .search-results-holder {
    display: grid;
    grid-template-areas: "search-breakdown"
        "search-data";
    grid-template-columns: 1fr;
    gap: 10px;
}

    .application-search-first .search-results-holder.search-ai {
        grid-template-areas: "search-breakdown"
            "search-data";
    }

.application-search-first.side-filter .search-results-holder {
    display: grid;
    grid-template-areas: "search-data  search-breakdown";
    grid-template-columns: 3fr 1fr;
    gap: 10px;
}

    .application-search-first.side-filter .search-results-holder.search-ai {
        grid-template-areas: "search-data search-breakdown";
    }

.medium-content.application-search-first.side-filter .search-results-holder.search-ai,
.small-content.application-search-first.side-filter .search-results-holder.search-ai,
.tablet .application-search-first.side-filter .search-results-holder.search-ai,
.mobile .application-search-first.side-filter .search-results-holder.search-ai {
    grid-template-areas: "search-breakdown"
        "search-data";
    grid-template-columns: 1fr;
}

.medium-content.application-search-first .search-results-holder,
.tablet-small .application-search-first .search-results-holder,
.mobile .application-search-first .search-results-holder {
    display: grid;
    grid-template-areas:
        "search-breakdown"
        "search-data";
    grid-template-columns: 1fr;
}

.application-search-first .app-search-data-results {
    grid-area: search-results;
}

.application-search-first .app-search-breakdown {
    grid-area: search-breakdown;
    gap: 10px;
    margin: 0px;
    padding: 0px;
}

.application-search-first .app-search-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    gap: 10px;
}

.application-search-first .app-search-breakdown {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: min-content;
    gap: 10px;
}

.application-search-first.side-filter .app-search-breakdown,
.small-content.application-search-first.side-filter .app-search-breakdown,
.tablet-small .application-search-first.side-filter .app-search-breakdown,
.mobilel .application-search-first.side-filter .app-search-breakdown {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    gap: 10px;
    height: fit-content;
}

.tablet-small .application-search-first .app-search-breakdown,
.mobile .application-search-first .app-search-breakdown {
    display: flex;
    flex-direction: column;
}

.application-search-first .app-search-breakdown .search-terms {
    flex-basis: 20%;
}

.application-search-first .app-search-breakdown .search-categories {
    display: none;
}

.application-search-first.side-filter .app-search-breakdown .search-categories {
    display: grid;
}

.application-search-first.side-filter.show-meta .app-search-breakdown .search-categories {
    display: flex;
    flex-basis: 80%;
}

.application-search-first .app-search-breakdown .search-categories details {
    color: inherit;
    background-color: inherit;
    border: 0px;
}

    .application-search-first .app-search-breakdown .search-categories details ul {
        margin: 0px;
        padding: 0px;
        width: 100%;
    }

    .application-search-first .app-search-breakdown .search-categories details summary {
        color: inherit;
        background-color: inherit;
        padding: 0px;
        font-size: var(--font-size-portal-small);
        font-weight: 300;
        border: 0px;
    }

.application-search-first .app-search-breakdown .search-categories details {
    color: inherit;
    background-color: inherit;
    border: solid 1px var(--border-gray);
    border-radius: var(--border-radius);
    padding: 10px;
}

    .application-search-first .app-search-breakdown .search-categories details summary {
        height: 33px;
        padding-left: 25px;
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
    }

        .application-search-first .app-search-breakdown .search-categories details summary:hover,
        .application-search-first .app-search-breakdown .search-categories details summary:focus {
            font-weight: bold;
        }

        .application-search-first .app-search-breakdown .search-categories details summary:before {
            content: "\f055";
            position: absolute;
            height: 33px;
            display: grid;
            align-items: center;
            font-family: var(--font-awesome-family);
            font-size: var(--font-size-portal-small);
            top: 0px;
            left: 0px;
            justify-content: center;
            width: 20px;
        }

    .application-search-first .app-search-breakdown .search-categories details[open] summary:before {
        content: "\f056";
    }

    .application-search-first .app-search-breakdown .search-categories details[open] {
        color: inherit;
        background-color: inherit;
    }

.application-search-first .app-search-breakdown .breakdown-search {
    margin: 0px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    font-size: var(--font-size-reduced);
    list-style: none;
}

    .application-search-first .app-search-breakdown .breakdown-search .full-row {
        flex-basis: 100%;
        font-size: var(--font-size-portal-small);
        margin: 0px;
    }

    .application-search-first .app-search-breakdown .breakdown-search li {
        margin: 0px;
        padding: 3px;
    }

    .application-search-first .app-search-breakdown .breakdown-search .breakout-word {
        cursor: pointer;
        color: var(--my-gray-text);
        background-color: var(--my-gray);
        padding: 4px 8px;
        border: solid 1px var(--border-gray);
        border-radius: var(--border-radius-chamfer);
        min-height: 33px;
    }

        .application-search-first .app-search-breakdown .breakdown-search .breakout-word:hover,
        .application-search-first .app-search-breakdown .breakdown-search .breakout-word:focus {
            color: var(--primary-text);
            background-color: var(--primary);
            border: solid 1px var(--my-white);
        }

        .application-search-first .app-search-breakdown .breakdown-search .breakout-word.active {
            color: var(--orange-hover-text);
            background-color: var(--orange-hover);
            border: solid 1px var(--border-gray);
            position: relative;
            padding-left: 30px;
            transition: padding-left var(--transition-time-fase) ease;
        }

            .application-search-first .app-search-breakdown .breakdown-search .breakout-word.active:before {
                position: absolute;
                left: 0px;
                top: 0px;
                display: grid;
                height: 100%;
                width: 25px;
                justify-content: center;
                align-items: center;
                content: "\f00c";
                font-family: var(--font-awesome-family);
            }

.application-search-first .app-search-breakdown .search-variants-data {
    display: none;
}

.application-search-first .app-search-breakdown .search-variants .variant-title {
    font-size: var(--font-size-portal-small);
    margin: 0px;
}

.application-search-first .app-search-breakdown .search-variants .variant-button {
    display: grid;
    justify-content: start;
}

    .application-search-first .app-search-breakdown .search-variants .variant-button button {
        cursor: pointer;
        color: var(--accent-2-text);
        background-color: var(--accent-2);
        padding: 4px 8px;
        border: solid 1px var(--border-gray);
        border-radius: var(--border-radius-chamfer);
        min-height: 33px;
    }

        .application-search-first .app-search-breakdown .search-variants .variant-button button:hover,
        .application-search-first .app-search-breakdown .search-variants .variant-button button:focus {
            color: var(--secondary-text);
            background-color: var(--secondary);
        }

.application-search-first .app-search-ituffy {
    grid-area: ituffy;
    display: grid;
    visibility: hidden;
    opacity: 0;
    height: 0px;
    grid-template-columns: 100px 1fr;
    min-height: var(--third);
}

.application-search-first .app-search-ituffy {
    display: none;
}

    .application-search-first .app-search-ituffy .ituffy-logo {
        grid-area: ituffy-logo;
        font-size: var(--font-size-large-fact-large);
        width: auto;
        text-align: center;
    }

.tablet .application-search-first .app-search-ituffy .ituffy-logo,
.tablet-small .application-search-first .app-search-ituffy .ituffy-logo,
.mobile .application-search-first .app-search-ituffy .ituffy-logo {
    font-size: var(--font-size-large-fact);
}

.application-search-first .ituffy-logo {
    grid-row: span 2;
}

.application-search-first .app-search-ituffy .ituffy-logo img {
    max-height: 70px;
    width: auto;
}

.application-search-first .app-search-ituffy .ituffy-question {
    grid-area: ituffy-question;
}

.application-search-first .app-search-ituffy .ituffy-response {
    grid-area: ituffy-response;
}

.application-search-first .app-search-ituffy .ask-ai-close-response {
    grid-area: ituffy-close;
}

.application-search-first .app-search-ituffy.active {
    display: grid;
    grid-template-areas: "ituffy-logo ituffy-question"
        "ituffy-logo ituffy-response";
    grid-template-columns: 100px 1fr;
    grid-template-rows: min-content;
    align-items: center;
    background-color: var(--my-white);
    color: var(--secondary);
    border: solid 1px var(--border-gray);
    padding: 10px;
    height: auto !important;
    border-radius: var(--border-radius-chamfer);
    align-items: start;
    width: 95%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.medium-content.application-search-first .app-search-ituffy.active,
.small-content.application-search-first .app-search-ituffy.active,
.tablet-small .application-search-first .app-search-ituffy.active,
.mobile .application-search-first .app-search-ituffy.active {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ituffy-logo ituffy-question"
        "ituffy-response ituffy-response";
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.application-search-first .ituffy-question {
    display: grid;
    padding: 8px;
    padding-left: 35px;
    font-size: var(--font-size-large);
    font-weight: bold;
    position: relative;
}

    .application-search-first .ituffy-question:before {
        content: "\f059";
        font-family: var(--font-awesome-family);
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 30px;
        display: grid;
        align-items: center;
        justify-content: center;
    }

.application-search-first .ask-ai-close-response {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

    .application-search-first .ask-ai-close-response button {
        border-radius: var(--border-radius-chamfer);
        background-color: var(--my-white);
        color: var(--my-white-text);
        border: solid 1px var(--border-gray);
        cursor: pointer;
        padding: 8px;
        width: fit-content;
    }

        .application-search-first .ask-ai-close-response button:hover,
        .application-search-first .ask-ai-close-response button:focus {
            background-color: var(--secondary);
            color: var(--secondary-text);
        }

.application-search-first .ituffy-response {
    grid-column: span 2;
}

.small-content.application-search-first .app-search-ituffy.active,
.mobile .application-search-first .app-search-ituffy.active {
    grid-template-columns: 50px 1fr;
    padding: 6px;
}

    .small-content.application-search-first .app-search-ituffy.active p.ituffy-logo,
    .mobile .application-search-first .app-search-ituffy.active p.ituffy-logo {
        padding: 2px;
        display: grid;
        align-content: center;
        justify-content: center;
        width: 54px;
    }

        .small-content.application-search-first .app-search-ituffy.active p.ituffy-logo img,
        .mobile .application-search-first .app-search-ituffy.active p.ituffy-logo img {
            height: 50px;
            width: auto;
        }

.application-search-first .ituffy-response .ai-related-url a {
    position: relative;
    padding-left: 30px;
    margin-left: 20px;
}

    .application-search-first .ituffy-response .ai-related-url a:before {
        content: "\e60e";
        font-family: var(--font-awesome-family);
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        display: grid;
        align-content: center;
        justify-content: center;
    }

.application-search-first .ituffy-response .ai-related-searches-title {
    font-weight: 300;
    font-size: var(--font-size-large);
    padding: 4px 8px;
    margin: 0px;
}

.application-search-first .ituffy-response .ai-more-suggestions {
    margin: 0px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    list-style-type: none;
}

    .application-search-first .ituffy-response .ai-more-suggestions li button {
        margin: 0px;
        padding: 8px;
        border-radius: var(--border-radius);
        border: solid 1px var(--border-gray);
        background-color: var(--accent-2);
        color: var(--accent-2-text);
        cursor: pointer;
    }

        .application-search-first .ituffy-response .ai-more-suggestions li button:hover,
        .application-search-first .ituffy-response .ai-more-suggestions li button:focus {
            background-color: var(--secondary);
            color: var(--secondary-text);
        }

.application-search-first .app-search-ituffy .no-search-term {
    opacity: 1;
    visibility: visible;
    grid-column: span 3;
    min-height: 30vh;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

.application-search-first .app-search-data-tabs {
    width: 100%;
    display: grid;
}

    .application-search-first .app-search-data-tabs ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0px;
        padding: 0px;
        padding-bottom: 10px;
        list-style-type: none;
        gap: 8px;
        border-bottom: solid 2px var(--border-gray);
        width: 100%;
    }

        .application-search-first .app-search-data-tabs ul li {
            margin: 0px;
            padding: 6px 0px;
            flex-basis: auto;
        }

            .application-search-first .app-search-data-tabs ul li a {
                margin: 0px;
                padding: 6px 20px;
                height: 100%;
                min-height: 50px;
                /* background-color: var(--my-white);
                color: var(--my-white-text);*/
                display: grid;
                grid-template-columns: 2fr 1fr;
                gap: 5px;
                align-items: center;
                text-decoration: none;
                border: solid 1px var(--border-gray);
                border-radius: var(--border-radius-chamfer);
            }

                .application-search-first .app-search-data-tabs ul li a:focus {
                    outline: solid 2px var(--my-black);
                }

                .application-search-first .app-search-data-tabs ul li a.ask-ai {
                    grid-template-columns: 20px 1fr;
                    gap: 6px;
                    min-width: 110px;
                }

                    .application-search-first .app-search-data-tabs ul li a.ask-ai.active .ai-logo img {
                        border: solid 1px var(--secondary);
                    }

                    .application-search-first .app-search-data-tabs ul li a.ask-ai .ai-logo img {
                        height: 30px;
                        width: auto;
                        padding: 2px;
                        margin-top: 4px;
                        border-radius: var(--border-radius-round);
                        border: solid 1px var(--orange);
                    }

                .application-search-first .app-search-data-tabs ul li a .dataset-count {
                    display: grid;
                    aspect-ratio: 1 / 1;
                    height: 28px;
                    border: solid 1px var(--border-gray);
                    border-radius: var(--border-radius);
                    padding: 4px;
                    font-size: var(--font-size-small);
                    background-color: var(--my-white);
                    color: var(--my-white-text);
                    align-items: center;
                    align-content: center;
                    justify-content: center;
                }

                .application-search-first .app-search-data-tabs ul li a.active {
                    background-color: var(--orange-hover);
                    color: var(--orange-hover-text);
                    border-radius: var(--border-radius-chamfer);
                }

                .application-search-first .app-search-data-tabs ul li a[aria-selected='false'] .tab-text {
                    border-bottom: solid 4px transparent;
                }

                .application-search-first .app-search-data-tabs ul li a[aria-selected='true']:hover .tab-text,
                .application-search-first .app-search-data-tabs ul li a[aria-selected='true']:focus .tab-text {
                    border-bottom: solid 4px var(--my-white);
                }

                .application-search-first .app-search-data-tabs ul li a[aria-selected='true'] .tab-text {
                    border-bottom: solid 4px var(--my-black);
                }

                .application-search-first .app-search-data-tabs ul li a:hover,
                .application-search-first .app-search-data-tabs ul li a:focus {
                    background-color: var(--secondary);
                    color: var(--secondary-text);
                }

/*-------------------------------------------------------
    APPLICATION LINK META
*/

.app-link-meta-body {
    display: grid;
    grid-template-areas: "app-link-search"
        "app-link-categories"
        "app-link-data";
    border-bottom: solid 4px var(--border-gray);
    gap: 10px;
    padding-bottom: 20px;
}

    .app-link-meta-body .data-storage {
        display: none;
        grid-area: app-link-data-storage;
    }

    .app-link-meta-body .app-search {
        grid-area: app-link-search;
        display: grid;
        grid-template-columns: 3fr 1fr 300px;
        gap: 10px;
        width: 96%;
        margin: auto;
        margin-bottom: 20px;
    }

        .app-link-meta-body .app-search .app-p-search label {
            display: grid;
            grid-template-columns: 1fr;
            gap: 4px;
        }

            .app-link-meta-body .app-search .app-p-search label span {
                font-size: var(--font-size-small);
            }

            .app-link-meta-body .app-search .app-p-search label input {
                font-size: var(--font-size-medium);
                background-color: var(--secondary-text);
                color: var(--secondary);
                border-radius: var(--border-radius);
                padding: 10px;
                min-height: 40px;
                padding-right: 50px;
            }

            .app-link-meta-body .app-search .app-p-search label button {
                font-size: var(--font-size-reduced);
                background-color: var(--secondary);
                color: var(--secondary-text);
                cursor: pointer;
                border-radius: var(--border-radius-pill);
                width: 30px;
                height: 30px;
                position: absolute;
                bottom: 6px;
                right: 6px;
            }

                .app-link-meta-body .app-search .app-p-search label button:hover, .app-link-meta-body .app-search .app-p-search label button:focus {
                    background-color: var(--orange-hover);
                    color: var(--orange-hover-text);
                }

        .app-link-meta-body .app-search .app-search-reset {
            display: grid;
            grid-template-columns:1fr 1fr 1fr;
            gap:10px;
            align-items: end;
        }

            .app-link-meta-body .app-search .app-search-reset button {
                background-color: var(--cloud);
                color: var(--cloud-text);
                border: solid 1px var(--border-gray);
                border-radius: var(--border-radius-chamfer);
                padding: 4px 8px;
                height: fit-content;
                min-height: 40px;
                cursor: pointer;
            }

                .app-link-meta-body .app-search .app-search-reset button:hover, .app-link-meta-body .app-search .app-search-reset button:focus {
                    background-color: var(--orange-hover);
                    color: var(--orange-hover-text);
                }

    .app-link-meta-body .app-categories {
        grid-area: app-link-categories;
    }

    .app-link-meta-body .app-search-breakdown {
        grid-area: app-link-breakdown;
    }

    .app-link-meta-body .app-data-results {
        grid-area: app-link-data;
    }

    .app-link-meta-body .app-categories ul {
        width: 100%;
        display: flex;
        margin: 0px;
        margin-left: auto;
        padding: 3px;
        flex-direction: row;
        gap: 5px;
        list-style-type: none;
        flex-wrap: wrap;
        justify-content: end;
    }

        .app-link-meta-body .app-categories ul li {
            flex: 1 1 auto;
            flex-basis: auto;
            margin: 0px;
        }

            .app-link-meta-body .app-categories ul li.spacer {
                flex: 30 1 auto;
            }

            .app-link-meta-body .app-categories ul li button {
                background: inherit;
                color: inherit;
                border: 0px;
                padding: 4px 8px 0px 8px;
                margin: 0px;
                cursor: pointer;
                min-height: 44px;
                width: fit-content;
                min-width: 80px;
                position: relative;
            }

                .app-link-meta-body .app-categories ul li button:after {
                    content: "";
                    position: absolute;
                    bottom: 0px;
                    left: 0px;
                    background-color: transparent;
                    height: 6px;
                    width: 100%;
                    border-radius: var(--border-radius);
                }

                .app-link-meta-body .app-categories ul li button:hover:after, .app-link-meta-body .app-categories ul li button:focus:after {
                    background: var(--primary);
                }

                .app-link-meta-body .app-categories ul li button.active:after {
                    background: var(--orange-hover);
                }

                .app-link-meta-body .app-categories ul li button.active:hover:after, .app-link-meta-body .app-categories ul li button.active:focus:after {
                    background: linear-gradient(0deg, var(--orange-dark) 0%, var(--orange) 32%, var(--orange-hover) 100%);
                }

.app-data-results {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .app-data-results details {
        flex: 1 1 auto;
        width: unset;
        border: 0px;
        flex-basis: 30%;
        min-width:300px;
    }

        .app-data-results details summary {
            text-transform: uppercase;
            font-size: var(--font-size-small);
            font-weight: 300;
            padding: 8px 20px;
            margin-bottom: 0px;
            display: grid;
            align-items: center;
        }

        .app-data-results details[open] summary {
            margin-bottom: 5px;
        }


        .app-data-results details[open]:focus-within summary,
        .app-data-results details:hover summary {
            background-color: var(--orange-hover);
            color: var(--orange-hover-text);
        }

        .app-data-results details[open]:focus-within:hover summary {
            background: linear-gradient(0deg, var(--orange-dark) 0%, var(--orange) 32%, var(--orange-hover) 100%);
            color: var(--orange-hover-text);
        }


        .app-data-results details summary i {
            padding: 8px;
            font-size: var(--font-size-reduced);
            transform: rotateZ(0deg);
            transition: transform var(--transition-time) ease;
        }

        .app-data-results details:not([open]) summary i {
            transform: rotateZ(90deg);
            transform-origin: center center;
            transition: transform var(--transition-time) ease;
        }

.col-4 .app-data-results details {
    flex-basis: 23%
}

.col-3 .app-data-results details {
    flex-basis: 32%
}

.col-2 .app-data-results details {
    flex-basis: 49%
}

.app-link-meta-body .app-data-results details ul,
.app-link-meta-body .app-search-results ul {
    margin: 0px;
    padding: 5px 10px;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .app-link-meta-body .app-data-results details ul li,
    .app-link-meta-body .app-search-results ul li {
        padding: 2px 10px;
        margin: 0px;
        min-width: 300px;
    }

.app-link-meta-body .app-search-results ul {
    list-style-type: unset;
    width: 100%;
    padding: 4px 30px;
    gap: 5px;
}

    .app-link-meta-body .app-search-results ul li {
        padding: 8px 10px;
        min-width: 24%;
    }

.small-content .app-link-meta-body .app-search,
.mobile .app-link-meta-body .app-search {
    grid-template-columns: 1fr;
}

.medium-content .app-link-meta-body .app-categories ul li:first-child,
.small-content .app-link-meta-body .app-categories ul li:first-child,
.mobile .app-link-meta-body .app-categories ul li:first-child {
    flex-basis: 100%;
    text-align: center;
}

.medium-content .app-link-meta-body .app-categories ul li:nth-child(2),
.small-content .app-link-meta-body .app-categories ul li:nth-child(2),
.mobile .app-link-meta-body .app-categories ul li:nth-child(2) {
    display: none;
}


.large-content .app-link-meta-body .app-search-results ul,
.medium-content .app-link-meta-body .app-search-results ul,
.tablet .app-link-meta-body .app-search-results ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.large-content .app-link-meta-body .app-search-results li {
    flex-basis: 32%;
    min-width: 300px;
}


.medium-content .app-link-meta-body .app-search-results li,
.tablet .app-link-meta-body .app-search-results li {
    flex-basis: 49%;
    min-width: 300px;
}

.small-content .app-link-meta-body .app-search-results ul,
.mobile .app-link-meta-body .app-search-results ul {
    display: grid;
    grid-template-columns: 1fr;
}


.medium-content .app-link-meta-body .app-data-results details,
.medium-content [class*='col-'] .app-link-meta-body .app-data-results details {
    flex-basis: 47%;
}

.small-content .app-link-meta-body .app-data-results details,
.mobile .app-link-meta-body .app-data-results details {
    flex-basis: 100%;
}

/*-------------------------------------------------------
    DIRECTORY
*/
.directory-shell {
    display: grid;
    grid-template-columns: 1fr;
    /* border: solid 1px var(--gray);*/
    align-items: start;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
}

    .directory-shell.has-filter {
        grid-template-columns: 3fr minmax(250px, 1fr);
    }

        .no-filter .directory-shell, .directory-shell.has-filter.one-column {
            grid-template-columns: 1fr;
        }

.no-search.no-filter .directory-shell {
    gap: 0px;
}

.directory-sections.roll-up, .directory-filter.roll-up, .full-view-item.roll-up, .directory-search-tools.roll-up {
    transform: rotateX(90deg);
    transform-origin: top center;
    height: 0px;
    opacity: 0;
    transition: opacity var(--transition-time-fast) ease-in-out, transform var(--transition-time) ease-in-out;
    display: none;
}


.directory-sections, .directory-filter, .full-view-item, .directory-search-tools {
    transform: rotateX(0deg);
    transform-origin: top center;
    height: auto;
    opacity: 1;
    transition: opacity var(--transition-time) ease-in-out, transform var(--transition-time) ease-in-out;
}

.directory-shell .view-tabs {
    display: grid;
    justify-content: end;
    grid-template-columns: auto auto;
    border-bottom: solid 1px var(--border-gray);
    padding-right: 20px;
    transform: rotateX(90deg);
    transform-origin: bottom center;
    transition: transform var(--transition-time) ease-in-out;
    height: 0px;
    display: none;
}

    .directory-shell .view-tabs.active {
        display: grid;
        transform: rotateX(0deg);
        transform-origin: bottom center;
        transition: transform var(--transition-time) ease-in-out;
        height: auto;
    }

.view-tabs.has-filter {
    grid-column: span 2;
}

.mobile .view-tabs.has-filter {
    grid-column: span 1;
}

.view-tabs button {
    padding: 12px 18px;
    font-size: var(--font-size-reduced);
    border: solid 1px var(--border-gray);
    border-bottom: 0px;
    margin-left: 8px;
    cursor: pointer;
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
}


.full-view-item.has-filter {
    grid-column: span 2;
}

.mobile .full-view-item.has-filter {
    grid-column: span 1;
}

.full-view-item .expand-data {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 10px;
}

    .full-view-item .expand-data .expand-closer {
        grid-column: span 2;
        text-align: right;
        padding: 8px;
        padding-right: 30px;
    }

.full-view-item .item-headshot-bg.item-headshot-top {
    display: none;
}

.directory-search-tools {
    grid-row: 2 / 3;
}

.mobile .directory-search-tools {
    grid-row: 1/2;
    grid-column: 1/1;
}

.directory-filter {
    grid-row: 2 / 4;
}

.mobile .directory-filter {
    grid-row: 3 / 4;
    grid-column: 1/1;
}

.directory-sections {
    grid-row: 3 / 4;
}

.mobile .directory-sections {
    grid-column: 1/1;
    grid-row: 4/5;
}


.mobile .full-view-item .expand-data {
    grid-template-columns: 1fr;
}

    .mobile .full-view-item .expand-data .expand-closer {
        grid-column: span 1;
    }

.full-view-item .expand-data .expand-closer button {
    cursor: pointer;
    padding: 8px;
    border: solid 1px var(--border-gray);
    border-radius: var(--border-radius-pill);
}

    .view-tabs button:hover, .view-tabs button:focus,
    .full-view-item .expand-data .expand-closer button:hover, .full-view-item .expand-data .expand-closer button:hover *,
    .full-view-item .expand-data .expand-closer button:focus, .full-view-item .expand-data .expand-closer button:focus * {
        background-color: var(--medium-blue) !important;
        color: var(--medium-blue-text) !important;
    }

    .full-view-item .expand-data .expand-closer button:focus {
        outline: solid 2px var(--orange);
        outline-offset: .2rem;
    }

.full-view-tab-item.active, .full-view-tab-directory.active {
    background-color: var(--my-white);
    color: var(--my-white-text);
}


.directory-search-tools {
    position: relative;
    display: grid;
    grid-template-columns: 7fr 3fr;
    align-items: end;
    gap: 10px;
}

.mobile .directory-search-tools {
    grid-template-columns: 1fr;
}

.directory-search-tools .search-count {
    margin: 0px;
    padding: 4px;
    margin-bottom: 6px;
    line-height: unset;
    text-align: center;
}

.directory-search-tools .app-search-label {
    font-size: var(--font-size-small);
}

.directory-search-tools .dir-btn-search {
    position: absolute;
    bottom: 4px;
    right: 1%;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: var(--white);
    color: var(--medium-blue);
    font-size: var(--font-size);
    border: 0px;
    cursor: pointer;
}

.dir-btn-search:hover, .dir-btn-search:focus {
    border: solid 1px var(--warm-gray);
    background-color: var(--light-gray);
    color: var(--light-gray-text);
}

.directory-filter {
    /* border-left: solid 1px var(--light-gray);*/
    padding: 8px;
    position: sticky;
    top: 100px;
}

.filter-count-reset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    font-size: var(--font-size-reduced);
}

    .filter-count-reset p {
        margin: 0px;
    }

.mobile .filter-count-reset {
    grid-template-columns: auto auto;
}

.mobile-dir-filter {
    display: none;
}

.mobile .mobile-dir-filter {
    display: block;
    border-radius: var(--border-radius-small);
    padding: 8px;
    border: solid 1px var(--gray);
    cursor: pointer;
}

    .mobile .mobile-dir-filter:hover {
        background-color: var(--secondary);
        color: var(--secondary-text)
    }

    .mobile .mobile-dir-filter.active {
        background-color: var(--accent-1);
        color: var(--accent-1-text)
    }

.mobile .app-filter {
    display: none;
}

    .mobile .app-filter.active {
        display: block;
    }


.directory-filter.one-column details ul li,
.directory-filter.col-1 details ul li {
    flex-basis: 99%;
}

.filter-count-reset button {
    width: 100%;
    margin-left: unset;
    margin-bottom: unset;
}

.mobile .directory-filter, .tablet .directory-filter {
    position: unset;
    top: unset;
}

.ib-dir-view {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    justify-content: end;
    margin-bottom: 10px;
}

.directory-shell.has-filter .ib-dir-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: 12px;
}

.directory-filter.one-column .ib-dir-view,
.directory-filter.col-1 .ib-dir-view {
    width: 95%;
}

    .directory-filter.one-column .ib-dir-view button,
    .directory-filter.col-1 .ib-dir-view button {
        font-size: var(--font-size-reduced);
    }

.ib-dir-view p {
    display: grid;
    justify-content: space-evenly;
    margin: 0px;
}

.ib-dir-view-button {
    border: 0px;
    border-bottom: solid 2px var(--gray);
    background-color: inherit;
    cursor: pointer;
    display: grid !important;
    grid-template-columns: auto auto !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--font-size-navigation-lower);
    padding: 8px;
    width: max-content;
}

    .ib-dir-view-button i {
        padding-top: 0px !important;
    }

    .ib-dir-view-button:hover, .ib-dir-view-button:hover * {
        background-color: var(--light-gray);
        color: var(--light-gray-text);
    }

    .ib-dir-view-button.active {
        border-bottom: solid 2px var(--orange);
    }

.mobile .directory-shell.has-filter .ib-dir-view,
.no-filter .ib-dir-view {
    display: none;
}

.directory-filter details summary, .directory-filter details summary * {
    background-color: var(--off-white);
    color: var(--primary);
}

.directory-filter details[open] summary {
    background-color: var(--secondary);
    color: var(--secondary-text);
    transition: background-color var(--transition-time) ease-in-out;
}

    .directory-filter details[open] summary * {
        background-color: inherit;
        color: inherit;
    }

.directory-filter details[open] summary {
    border-bottom: solid 1px var(--dark-warm-gray);
}

.directory-filter .app-filter details {
    border-color: var(--border-gray);
    border-bottom: 0px;
}

    .directory-filter .app-filter details[open] ul {
        max-height: 400px;
        overflow-y: auto;
    }

    .directory-filter .app-filter details[open] ul {
        scrollbar-color: var(--primary) var(--my-gray);
        scrollbar-width: thin;
    }

.directory-filter .app-filter.first-child details,
.directory-filter .app-filter.first-child details summary {
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
}

.directory-filter .app-filter:last-child details {
    border-bottom: solid 1px var(--border-gray);
    border-bottom-left-radius: var(--border-radius-chamfer);
    border-bottom-right-radius: var(--border-radius-chamfer);
}

    .directory-filter .app-filter:last-child details:not([open]) summary {
        border-bottom-left-radius: var(--border-radius-chamfer);
        border-bottom-right-radius: var(--border-radius-chamfer);
    }

.directory-filter details summary *:last-child {
    text-align: right;
}

.directory-filter .app-filter li {
    flex-basis: 50%;
    justify-content: start;
}

.directory-filter .app-filter ul.small-list li {
    flex-basis: 100%;
}

/*-- directory no filter --*/

.no-filter .directory-filter {
    display: none;
}

.no-search .directory-search-tools {
    display: none;
}

.no-nav-tab .view-tabs, .no-nav-tab .directory-shell .view-tabs.active {
    display: none;
}

.directory-items {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    height: min-content;
}

    .directory-items .data-set-name {
        width: 100%;
    }

        .directory-items .data-set-name.title {
            font-size: var(--font-size-large);
            font-weight: 200;
            border-bottom: solid 2px var(--secondary);
            padding: 10px 24px;
            padding-left: 10px;
            margin: 0px;
        }

.directory-item {
    padding: 5px;
    display: flex;
    /*flex-flow: row wrap;*/
    flex: var(--flex-default);
    min-width: var(--min-col-width);
}

    .directory-item .item-headshot-top {
        display: none;
    }

.directory-details-box {
    padding: 0px;
    border-radius: var(--border-radius-chamfer);
    margin: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
    box-shadow: var(--box-shadow);
    border: solid 1px var(--border-gray);
    display: flex;
}

    .directory-details-box:not([class*='background-']) {
        background-color: var(--my-white);
        color: var(--my-white-text);
    }

.grid-item[class*='stock-'] .directory-details-box:not([class*='background-']) {
    background-color: var(--background-shade-darkest);
    color: var(--my-white-text);
    backdrop-filter: blur(3px);
}

.grid-item[class*='stock-'] .directory-item:not([class*='background-']) .item-content {
    background-color: var(--background-shade-darkest) !important;
    color: var(--my-white-text) !important;
    text-shadow: none !important
}

    .grid-item[class*='stock-'] .directory-item:not([class*='background-']) .item-content * {
        text-shadow: none !important
    }

.directory-details {
    border-radius: var(--border-radius-chamfer);
    width: 100%;
}

.directory-item-details-front {
    position: relative;
    margin: auto;
    padding: 20px;
    padding-top: 5px;
    border-bottom-left-radius: var(--border-radius-chamfer);
    border-bottom-right-radius: var(--border-radius-chamfer);
    display: flex;
    flex-direction: column;
    min-height: 240px;
    gap: 10px;
    max-height: 100%;
}

    .directory-item-details-front.use-direct-link {
        height: calc(100% - 150px);
    }

.directory-thin .directory-item-details-front,
.directory-base-thin .directory-item-details-front {
    min-height: 80px;
}

.directory-medium .directory-item-details-front,
.directory-base-medium .directory-item-details-front {
    min-height: 160px;
}

.directory-thick .directory-item-details-front,
.directory-base-thick .directory-item-details-front {
    min-height: 320px;
}

.directory-ultra .directory-item-details-front,
.directory-base-ultra .directory-item-details-front {
    min-height: 560px;
}


.mobile .directory-item-details-front {
    min-height: 60px;
}

.directory-item-details-front .item-name {
    text-align: center;
}

.mobile .directory-shell, .mobile .directory-items, .small-content .directory-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

.small-content .directory-item, .mobile .directory-item {
    margin: auto;
    display: block;
    width: 100% !important;
    min-width: unset;
    flex-basis: 100%;
}

.list-view .directory-item {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 2fr;
    max-width: unset;
    gap: 10px;
    border-bottom: solid 1px var(--gray);
    padding: 10px;
}

.mobile .list-view .directory-item {
    grid-template-columns: 1fr;
    width: 100%;
}

.list-view .directory-item .item-content {
    transform: rotateY(0deg);
    width: auto;
    height: auto;
    opacity: 1;
    transition: all var(--transition-time) ease-in-out;
    padding: 10px;
}

.list-view .directory-details .item-headshot {
    height: 325px;
}

.directory-details .item-bg-crop {
    overflow: hidden;
}

.directory-details .item-headshot-bg {
    display: none;
}

.directory-details .item-headshot {
    height: 325px;
    background-size: cover;
    background-position: center;
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
}

.full-image .directory-details .item-headshot {
    margin-top: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.headshot-thin .item-headshot {
    height: 100px;
}

.headshot-medium .item-headshot {
    height: 200px;
}

.headshot-thick .item-headshot {
    height: 450px;
}

.headshot-ultra .item-headshot {
    height: 560px;
}


.directory-details .item-name {
    display: grid;
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-item-name);
    font-weight: bold;
}

    .directory-details .item-name button {
        font-size: var(--font-size-item-name);
        font-weight: bold;
        min-height: 44px;
        margin: 0px;
        padding: 8px;
        cursor: pointer;
        border: solid 1px var(--border-gray);
        border: solid 1px transparent;
        border-bottom-width: 2px;
        border-bottom-color: var(--orange-dark);
        border-radius: var(--border-radius-tiny);
        text-wrap: balance;
        width: 100%;
    }

        .directory-details .item-name button * {
            background-color: inherit;
            color: inherit;
        }

        .directory-details .item-name button:hover {
            box-shadow: var(--box-shadow);
            border-bottom: solid 2px var(--orange);
            transition: all 100ms ease-in-out;
            background-color: var(--primary);
            color: var(--primary-text);
        }

.dark-mode .directory-details .item-name button:hover {
    background-color: var(--primary-dark);
    color: var(--primary-dark-text);
}

.directory-details .pronouns {
    margin-top: 5px;
    font-size: var(--font-size-reduced);
}

.directory-details .item-role {
    margin: 0px;
    padding: 0px;
    font-weight: normal;
}

.directory-details .item-title,
.directory-details .item-position,
.directory-details .item-department,
.directory-details .item-role,
.directory-details .item-location,
.directory-details .item-hours,
.directory-details .item-email,
.directory-details .item-phone,
.directory-details .item-description,
.directory-details .item-web,
.directory-details .item-status {
    font-size: var(--font-size-reduced);
    padding: 0px;
    padding-top: 4px;
    padding-left: 35px;
    margin: 0px;
    position: relative;
    word-break: break-word;
    display: grid;
    align-items: center;
}

.directory-details .item-title {
    font-size: var(--font-size-large);
    font-weight: 300;
}

    .directory-details .item-title:before {
        content: "\f14e";
        font-size: var(--font-size);
    }

.directory-details .item-position:before {
    content: "\f013";
    font-size: var(--font-size);
}

.directory-details .item-department:before {
    content: "\f1ad";
}

.directory-details .item-role:before {
    content: "\f65c";
    font-weight: 300;
}

.directory-details .item-location:before {
    content: "\f3c5";
}

.directory-details .item-hours:before {
    content: "\f017";
}

.directory-details .item-email:before {
    content: "\f0e0";
}

.directory-details .item-phone:before {
    content: "\f095";
}

.directory-details .item-description:before {
    content: "\f05a";
}

.directory-details .item-web:before {
    content: "\f0c1";
}

.directory-details .item-status:before {
    content: "\f04b";
}

.directory-details .item-title:before,
.directory-details .item-position:before,
.directory-details .item-department:before,
.directory-details .item-role:before,
.directory-details .item-location:before,
.directory-details .item-hours:before,
.directory-details .item-email:before,
.directory-details .item-phone:before,
.directory-details .item-description:before,
.directory-details .item-web:before,
.directory-details .item-status:before {
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 2px;
    left: 4px;
    display: grid;
    align-items: start;
    height: 100%;
    width: 25px;
    justify-content: center;
}

.directory-details .item-department, .directory-details .item-role {
    font-weight: bold;
    flex-basis: auto;
    margin: 0px;
    font-size: var(--font-size-reduced);
}

.directory-details .item-role {
    font-weight: 300;
}

.info-department-role-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: start;
}

.directory-direct-link {
    display: grid;
    gap: 10px;
    grid-template-areas: "clipboard-notice direct-link-button";
    grid-template-columns: auto auto;
    justify-content: end;
    width: 100%;
    padding-top: 8px;
    margin-top: auto;
}

.directory-direct-link-button {
    display: grid !important;
    gap: 10px;
    grid-area: direct-link-button;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: fit-content;
    padding: 8px;
    border: solid 1px transparent;
    background-color: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: var(--border-radius-pill)
}

.directory-direct-link p {
    opacity: 0;
}

    .directory-direct-link p.notice-success.copy-msg-active {
        opacity: 1;
        transition: opacity var(--transition-time-slow) ease-in;
        grid-area: clipboard-notice;
        display: grid;
        align-items: center;
        font-size: var(--font-size-small-disclaimer) !important;
        padding: 1px 8px !important;
        padding-left: 30px !important;
        min-height: 30px;
    }

.copy-msg-active {
    font-size: var(--font-size-small-disclaimer) !important;
    padding: 2px !important;
    padding-left: 30px !important;
    padding-right: 20px !important;
    margin-left: 0px !important;
    margin-bottom: 0px !important;
    min-width: unset !important;
    max-width: unset !important;
}

    .copy-msg-active:before {
        font-size: var(--font-size) !important;
        left: 0px !important;
        top: 20%;
    }

main button.directory-direct-link-button i {
    padding-top: unset !important;
}

.directory-direct-link-button,
.app-data.active .directory-direct-link button {
    position: relative;
    padding-top: 12px;
}

    .directory-direct-link-button:after {
        content: "";
        position: absolute;
        bottom: -2px;
        width: 0px;
        height: 4px;
        left: 50%;
        background-color: transparent;
    }

.directory-item .item-content {
    transform: rotateY(90deg);
    width: 0px;
    height: 0px;
    opacity: 0;
    transform-origin: center left;
    transition: opacity var(--transition-time-fast) ease-in-out;
}

.directory-item.active .item-content {
    transform: rotateY(0deg);
    width: auto;
    height: auto;
    opacity: 1;
    transition: all var(--transition-time) ease-in-out;
}

.directory-item .item-web a:hover {
    color: var(--my-black);
    text-underline-offset: 3px;
}

.item-content .block-main-title {
    font-size: var(--font-size-larger);
    font-weight: 700;
    border-bottom: solid 2px var(--orange);
    padding-bottom: 14px;
}


.directory-expand .expand-data .accordion-title {
    font-size: var(--font-size-large);
    font-weight: bold;
    color: var(--primary);
}

.directory-expand {
    position: fixed;
    height: 0px;
    width: 0px;
    top: 0px;
    left: 0px;
}

    .directory-expand.active {
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    .directory-expand .expand-data {
        display: none;
    }

    .directory-expand.active .expand-data {
        position: fixed;
        z-index: 10;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: min-content;
        background-color: var(--off-white);
        color: var(--off-white-text);
        height: 80vh;
        width: 80vw;
        top: calc(140px + 5vh);
        left: 10vw;
        overflow: auto;
        gap: 10px;
        padding: 20px;
        border: solid 1px var(--gray);
        border-radius: var(--border-radius-small);
        box-shadow: 0 0 4px rgba(0,0,0,.3);
    }

        .directory-expand.active .expand-data .expand-closer {
            grid-column: span 2;
            text-align: right;
        }

            .directory-expand.active .expand-data .expand-closer button {
                cursor: pointer;
            }

                .item-name button:focus,
                .directory-expand.active .expand-data .expand-closer button:focus {
                    outline: solid 2px var(--orange);
                    outline-offset: .4em;
                }

                .directory-expand.active .expand-data .expand-closer button:hover {
                    background-color: var(--primary);
                    color: var(--primary-text);
                }

        .directory-expand.active .expand-data .directory-details {
            margin: auto;
            margin-top: 0;
        }

.directory-tabbed-content {
    width: 100%;
}

.mobile .directory-expand.active .expand-data .expand-closer {
    grid-column: span 1;
}

.mobile .directory-expand.active .expand-data {
    top: calc(100px + 1vh);
    grid-template-columns: 1fr;
}

    .mobile .directory-expand.active .expand-data .directory-details {
        margin: auto;
    }


/*-- active directory item --*/

.directory-item.active {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 2fr;
    gap: 10px;
}

.full-view-item .directory-details-box {
    border-radius: 0px;
    border: 0px;
    padding: 20px 10px;
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    box-shadow: var(--box-shadow-down);
}

.full-view-item .directory-details .item-headshot {
    height: auto;
    max-width: 100%;
    display: grid;
    align-content: center;
}

    .full-view-item .directory-details .item-headshot img {
        max-width: 100%;
        height: auto;
        max-height: 500px;
        margin: auto;
        display: block;
        padding: 0px;
        border: 0px;
    }

.full-view-item .item-content .item-headshot-bg {
    min-height: 175px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 12px;
}

.full-view-item .item-content.bg-auto .item-headshot-bg {
    background-size: auto;
}

.full-view-item .item-content.bg-cover .item-headshot-bg {
    background-size: cover;
}

.full-view-item .item-content.bg-contain .item-headshot-bg {
    background-size: contain;
}

.full-view-item .item-content.bg-top-left .item-headshot-bg {
    background-position: top left;
}

.full-view-item .item-content.bg-top-center .item-headshot-bg {
    background-position: top center;
}

.full-view-item .item-content.bg-top-right .item-headshot-bg {
    background-position: top right;
}

.full-view-item .item-content.bg-left .item-headshot-bg {
    background-position: left;
}

.full-view-item .item-content.bg-center .item-headshot-bg {
    background-position: center;
}

.full-view-item .item-content.bg-right .item-headshot-bg {
    background-position: right;
}

.full-view-item .item-content.bg-bottom-left .item-headshot-bg {
    background-position: bottom left;
}

.full-view-item .item-content.bg-bottom-center .item-headshot-bg {
    background-position: bottom center;
}

.full-view-item .item-content.bg-bottom-right .item-headshot-bg {
    background-position: bottom right;
}

.full-view-item .item-content .item-headshot-bg.color-bar {
    min-height: 60px;
    border-bottom: solid 4px var(--secondary);
}

.dark-mode .full-view-item .item-content .item-headshot-bg.background-1 {
    background-color: var(--primary-dark);
}

.dark-mode .full-view-item .item-content .item-headshot-bg.color-bar {
    min-height: 60px;
    border-bottom: solid 4px var(--secondary-dark);
}


.full-view-item .directory-item-details-front {
    padding: 10px;
}


.full-view-item .directory-details .item-name {
    border-bottom: solid 2px var(--secondary);
    border-radius: 0px;
    display: grid !important;
    grid-template-columns: 1fr;
    padding: 20px !important;
}

.full-view-item .directory-details .pronouns {
    display: grid !important;
    grid-template-columns: 1fr;
}

.dark-mode .full-view-item .directory-details .item-name {
    border-bottom: solid 4px var(--slate-text);
}

.directory-shell .full-view-item .directory-details .item-description {
    display: none;
}

.full-view-item .item-content {
    min-height: 60vh;
    padding: 2px 5px;
}

.full-view-item .photo-desc-,
.additinal-content .photo-desc- {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 10px;
    border-top: solid 2px var(--secondary);
    align-content: flex-start;
    padding-top: 20px;
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: solid 2px var(--secondary);
}

.full-view-item .photo-, .full-view-item .desc-,
.additional-content .photo-, .additional-content .desc- {
    display: grid;
    grid-template-columns: 1fr;
    border-top: solid 2px var(--secondary);
    padding-top: 20px;
    margin-top: 15px;
}

.dir-open-details-front .item-content .additional-content {
    display: none;
}

.full-view-item .photo- div, .full-view-item .desc- div, .full-view-item .photo-desc- div {
    display: grid;
    align-items: start;
    align-content: start;
}

.full-view-item .photo- p, .full-view-item .desc- p, .full-view-item .photo-desc- p {
    margin: 0px;
    margin-bottom: 5px;
    padding: 0px;
}

.full-view-item .additional-content .content-sections {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

    .full-view-item .additional-content .content-sections > div {
        flex-basis: auto;
        min-width: 190px;
        padding: 5px;
        flex-grow: 3;
    }

        .full-view-item .additional-content .description-title,
        .full-view-item .additional-content .content-sections > div > p {
            font-weight: bold;
            font-size: var(--font-size);
            text-transform: capitalize;
        }

            .full-view-item .additional-content .description-title button {
                display: none;
            }

.full-view-item .additional-content .description-text {
    font-weight: normal;
    font-size: var(--font-size-reduced);
    margin-bottom: 8px;
}


/* -- directory top title -- */
.directory-top-title .directory-details-box {
    border-radius: unset;
    box-shadow: unset;
    border: 0px;
}

.directory-top-title .directory-details {
    border-radius: unset;
    display: flex;
    flex-direction: column-reverse;
}

.directory-top-title .directory-details-box:not([class*='background-']) {
    background-color: unset;
    color: unset;
}

.directory-top-title .directory-details .item-headshot {
    border-radius: unset;
    height: 250px;
    width: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
}

.directory-top-title .directory-item-details-front {
    border-radius: unset;
    min-height: 8vh;
    display: grid;
    align-items: center;
    background-size: contain;
    margin: unset;
    padding: unset;
}

.directory-top-title .directory-details .item-name {
    border-radius: unset;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

    .directory-top-title .directory-details .item-name button {
        border-radius: unset;
        border: 0px;
        background-color: unset;
        color: unset;
        width: 100%;
        text-align: left;
        font-size: var(--font-size-large);
        box-shadow: none;
        border-bottom: solid 4px transparent;
    }

        .directory-top-title .directory-details .item-name button:hover {
            outline: none;
            border-bottom: solid 4px var(--orange);
        }


        .directory-top-title .directory-details .item-name button:focus {
            outline: solid 1px var(--medium-blue);
            border-bottom: solid 4px var(--orange);
        }


.directory-top-title .full-view-item .directory-details .item-name {
    border-radius: unset;
    width: 100%;
    padding: 8px;
    margin: 0px;
    text-align: center;
    font-size: var(--font-size-large);
    font-weight: bold;
}

.directory-top-title .full-view-item .directory-details .item-headshot {
    border: 0px;
}

/*----------------------------------------------------
    DIRECTORY SIMPLE PROFILE
*/

.directory-simple .directory-shell, directory-simple-profile .directory-shell {
    padding-top: 20px;
}

.directory-simple-profile .directory-details-box,
.directory-simple .directory-details-box {
    background-color: inherit;
    color: inherit;
    border-radius: 0px;
    box-shadow: none;
    border: 0px;
}

.dark-mode .directory-simple-profile .directory-details-box:not([class*='background-']),
.dark-mode .directory-simple .directory-details-box:not([class*='background-']) {
    background-color: inherit;
    color: inherit;
}

.directory-simple-profile .item-headshot,
.directory-simple .item-headshot {
    border-radius: 0px;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform var(--transition-time) ease-in-out;
    position: relative;
    z-index: 3;
}

.directory-simple-profile .directory-item:hover .item-headshot,
.directory-simple .directory-item:hover .item-headshot {
    transform: scale(1.2);
    transition: transform var(--transition-time) ease-in-out;
}

.directory-simple-profile .directory-item .item-bg-crop,
.directory-simple .directory-item .item-bg-crop {
    position: relative;
    height: 200px;
    border: solid 1px var(--my-gray-dark);
    box-shadow: var(--box-shadow-down);
}

.directory-simple-profile .directory-item .item-bg-crop,
.directory-simple .directory-item .item-bg-crop {
    overflow: hidden;
    border-radius: var(--border-radius-chamfer);
}

    .directory-simple-profile .directory-item .item-bg-crop:after,
    .directory-simple .directory-item .item-bg-crop:after {
        background: var(--box-shade-background);
        content: "";
        top: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        position: absolute;
        z-index: 0;
        transition: top var(--transition-time-fast) ease-in-out, opacity var(--transition-time) ease-in-out;
    }

.directory-simple-profile .directory-item:hover .item-bg-crop:after,
.directory-simple .directory-item:hover .item-bg-crop:after {
    top: 0;
    opacity: .12;
    z-index: 0;
    transition: top var(--transition-time-slow) ease-in-out, opacity var(--transition-time) ease-in-out;
}

.directory-simple-profile .directory-item-details-front,
.directory-simple .directory-item-details-front {
    padding: 10px 0px;
    min-height: 100px;
}

.directory-simple-profile .item-name,
.directory-simple-profile .item-name button,
.directory-simple .item-name,
.directory-simple .item-name button {
    border-radius: 0px;
    border: 0px;
    margin: 0px;
    text-align: left;
    padding: 0px;
    padding-left: 0px;
    width: auto;
}

    .directory-simple-profile .item-name.no-btn,
    .directory-simple .item-name.no-btn {
        padding-top: 5px;
        padding-left: 10px;
        font-weight: normal;
    }

    .directory-simple-profile .item-name button,
    .directory-simple .item-name button {
        border-radius: 0px;
        border: 0px;
        text-align: left;
        background-color: inherit;
        color: inherit;
        box-shadow: none;
        font-size: var(--font-size-item-name);
        font-weight: normal;
        margin: 0px;
        padding-left: 10px;
        width: 100%;
    }

        .directory-simple-profile .item-name button .pronouns,
        .directory-simple .item-name button .pronouns {
            font-size: var(--font-size-reduced);
            background-color: inherit;
            color: inherit;
        }

    .directory-simple-profile .item-name button,
    .directory-simple .item-name button {
        position: relative;
    }

        .directory-simple-profile .item-name button:hover,
        .directory-simple .item-name button:hover {
            background-color: unset;
            color: unset;
            box-shadow: none;
            border-bottom: none;
            text-shadow: var(--text-shadow-less);
            position: relative;
        }

        .directory-simple-profile .item-name button:before,
        .directory-simple .item-name button:before {
            content: "";
            position: absolute;
            background-color: var(--orange);
            height: 5px;
            bottom: -5px;
            width: 15px;
            transition: width var(--transition-time) ease-in-out;
        }

        .directory-simple-profile .item-name button:hover:before,
        .directory-simple .item-name button:hover:before {
            background-color: var(--secondary);
            width: calc(100% - 35px);
            transition: all var(--transition-time) ease-in-out;
        }

        .directory-simple-profile .item-name button:hover .pronouns,
        .directory-simple .item-name button:hover .pronouns {
            background-color: transparent;
            color: var(--my-white-dark);
        }

.directory-simple-profile .info-department-role-group,
.directory-simple .info-department-role-group {
    display: block;
    padding: 0px;
}

.directory-simple-profile .item-department, .directory-simple-profile .item-role, .directory-simple-profile .item-position,
.directory-simple .item-department, .directory-simple .item-role, .directory-simple .item-position {
    width: auto;
    font-weight: normal;
    padding-left: 30px;
    font-size: var(--font-size-reduced);
}

.directory-simple-profile .item-position,
.directory-simple .item-position {
    margin: 0px;
}

.directory-simple-profile .item-role:before,
.directory-simple-profile .item-title, .directory-simple-profile .item-location,
.directory-simple-profile .item-email, .directory-simple-profile .item-phone,
.directory-simple .item-role:before,
.directory-simple .item-title, .directory-simple .item-location,
.directory-simple .item-email, .directory-simple .item-phone {
    display: none;
}

.directory-simple-profile .expand-data .item-headshot,
.directory-simple .expand-data .item-headshot {
    padding-bottom: 30px;
}

.directory-simple-profile .expand-data .directory-item-details-front,
.directory-simple .expand-data .directory-item-details-front {
    padding: 10px 30px;
}

    .directory-simple-profile .expand-data .directory-item-details-front > *,
    .directory-simple .expand-data .directory-item-details-front > * {
        font-size: var(--font-size-reduced);
        padding-left: 25px;
    }

    .directory-simple-profile .expand-data .directory-item-details-front *,
    .directory-simple .expand-data .directory-item-details-front * {
        font-weight: normal;
        font-size: var(--font-size-reduced);
    }

.directory-simple-profile .expand-data .pronouns,
.directory-simple-profile .expand-data .item-department, .directory-simple-profile .expand-data .item-role,
.directory-simple .expand-data .pronouns,
.directory-simple .expand-data .item-department, .directory-simple .expand-data .item-role {
    padding-left: 0px;
}

.directory-simple-profile .expand-data .item-name,
.directory-simple .expand-data .item-name {
    font-size: var(--font-size-large);
    border-bottom: 0px;
}

.directory-simple-profile .expand-data .item-description,
.directory-simple .expand-data .item-description {
    display: none;
}

.directory-simple-profile .expand-data .item-title, .directory-simple-profile .expand-data .item-location,
.directory-simple-profile .expand-data .item-email, .directory-simple-profile .expand-data .item-phone,
.directory-simple .expand-data .item-title, .directory-simple .expand-data .item-location,
.directory-simple .expand-data .item-email, .directory-simple .expand-data .item-phone {
    display: block;
}

/*---------------------
    DIRECTORY CATALOG
*/

:not(.mobile) .directory-catalog .directory-items {
    gap: 10px;
}

:not(.mobile) .directory-catalog .directory-item {
    flex-basis: unset;
    padding: 0px;
    min-width: var(--min-col-width-catalog);
    max-width: 195px;
    max-width: var(--min-col-width-catalog);
}

:not(.mobile) .directory-catalog .list-view .directory-items {
    display: flex;
    flex-flow: column nowrap;
}

.mobile .directory-catalog .directory-item,
.small-content.directory-catalog .directory-item,
.small-gutter .medium-content.directory-catalog .directory-item {
    flex-basis: 100%;
    max-width: unset;
    width: 100%;
}

:not(.mobile) .directory-catalog .directory-item .item-headshot {
    height: 200px;
}

.directory-catalog .directory-item .item-bg-crop,
.directory-catalog .directory-item .item-headshot {
    background-color: var(--my-gray);
}

.directory-catalog .directory-item:hover .item-bg-crop,
.directory-catalog .directory-item:hover .item-headshot {
    background-color: var(--orange-hover);
}

.dark-mode .directory-catalog .directory-item .item-bg-crop,
.dark-mode .directory-catalog .directory-item .item-headshot {
    background-color: var(--my-gray-dark);
}

.dark-mode .directory-catalog .directory-item:hover .item-bg-crop,
.dark-mode .directory-catalog .directory-item:hover .item-headshot {
    background-color: var(--orange-dark-hover);
}

.directory-catalog .list-view .directory-item {
    flex-basis: 100%;
}

.directory-catalog .list-view .directory-item {
    flex-basis: 100%;
    min-width: unset;
    max-width: unset;
}

    .directory-catalog .list-view .directory-item .quickview,
    .directory-catalog .list-view .directory-item .item-content .description-title button {
        display: none !important;
    }

    .directory-catalog .list-view .directory-item .item-web a {
        font-size: var(--font-size-large);
        padding-left: 30px;
    }


:not(.mobile) .directory-catalog .list-view .directory-item .item-headshot {
    height: 120px;
}


:not(.mobile) .directory-catalog .list-view .directory-item .item-headshot {
    background-size: contain;
    background-repeat: no-repeat;
}


.directory-catalog .directory-item .directory-details-box {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

    .directory-catalog .directory-item .directory-details-box:hover {
        box-shadow: var(--box-shadow-item-hover);
        border: solid 1px var(--my-white);
    }

.mobile .directory-catalog .directory-details .item-bg-crop {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mobile .directory-catalog .directory-item .item-headshot {
    background-size: cover;
    background-repeat: no-repeat;
}

.mobile .directory-catalog.image-contain .directory-item .item-headshot {
    background-size: contain;
    background-repeat: no-repeat;
}

.dark-mode .directory-catalog .directory-item .directory-details-box:hover {
    box-shadow: var(--box-shadow-item-hover-dark);
    border: solid 1px var(--my-white-dark);
}

.directory-catalog .directory-item-details-front {
    min-height: 88px;
    padding: 6px;
    border-top: solid 2px var(--my-gray);
}

    .directory-catalog .directory-item-details-front * {
        font-size: var(--font-size-small-discalimer);
        padding-left: 22px;
    }

    .directory-catalog .directory-item-details-front .item-title, .directory-catalog .directory-item-details-front .item-description {
        display: none;
    }

.directory-catalog .directory-item .directory-details-box:hover .directory-item-details-front {
    border-top: solid 2px var(--secondary-hover);
}

.directory-catalog .directory-item-details-front .item-name.quickview {
    margin: 0px;
    padding: 0px;
    display: grid;
    justify-content: end;
}

    .directory-catalog .directory-item-details-front .item-name.quickview button {
        margin: 0px;
        min-height: unset;
        text-align: right;
        border: solid 1px transparent;
        padding: 6px;
        font-size: var(--font-size-navigation-lower);
        box-shadow: none;
        border-radius: 0px;
        width: fit-content;
        background-color: inherit;
        color: inherit;
    }

        .directory-catalog .directory-item-details-front .item-name.quickview button:hover {
            border: solid 1px var(--orange);
        }

.dark-mode .directory-catalog .directory-item-details-front .item-name.quickview button:hover {
    border: solid 1px var(--orange-dark);
}

.directory-catalog .directory-item-details-front .item-web {
    padding: 0px;
    padding-left: 2px;
}

    .directory-catalog .directory-item-details-front .item-web a {
        font-size: var(--font-size-small);
        font-size: var(--font-size-navigation-lower);
        padding-left: 20px;
        position: relative;
        display: grid;
    }

        .directory-catalog .directory-item-details-front .item-web a:before {
            font-family: 'font awesome 6 pro';
            content: '\f0c1';
            color: var(--primary);
            left: 0px;
            position: absolute;
            top: 0px;
        }

        .directory-catalog .directory-item-details-front .item-web a:hover:before {
            color: var(--orange);
        }

.directory-catalog .directory-item-details-front .directory-direct-link {
    grid-template-areas: "direct-button"
        "clipboard-notice";
    padding-left: 0px;
    grid-template-columns: 1fr;
}

    .directory-catalog .directory-item-details-front .directory-direct-link button {
        padding: 8px 2px;
        grid-template-columns: auto 14px;
        grid-area: direct-button;
    }

        .directory-catalog .directory-item-details-front .directory-direct-link button i {
            padding: 0px;
        }

    .directory-catalog .directory-item-details-front .directory-direct-link p {
        margin-top: 0px;
        margin-bottom: 2px;
    }

.directory-catalog .full-view-item .directory-item-details-front .item-web a:before {
    display: none;
}

.directory-catalog .full-view-item .directory-item-details-front .item-web a {
    font-size: var(--font-size-large);
}

.directory-catalog .full-view-item .item-name.quickview {
    display: none !important;
}

.directory-catalog .item-web:before {
    display: none;
}

.directory-catalog .full-view-item .item-web:before {
    display: grid;
}

.directory-catalog .full-view-item .item-bg-crop {
    border-bottom: solid 4px var(--primary);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.dark-mode .directory-catalog .full-view-item .item-bg-crop {
    border-bottom: solid 4px var(--primary-dark);
}

.mobile .directory-catalog .directory-details {
    display: grid;
    grid-template-columns: 1fr 3fr;
    border-radius: 0px;
}

.mobile .directory-catalog .directory-details-box {
    border-radius: 0px;
}

.mobile .directory-catalog .directory-details .item-headshot {
    height: 100%;
    border-radius: 0px;
}

.mobile .directory-catalog .directory-details .directory-item-details-front {
    min-height: 65px;
    border-top: 0px;
    width: 100%;
}

.mobile .directory-catalog .directory-item .directory-details-box:hover .directory-item-details-front {
    border-top: 0px;
    border-radius: 0px;
}

.directory-catalog .directory-details .item-name.no-btn,
.directory-catalog .directory-details .info-department-role-group,
.directory-catalog .directory-details .item-email,
.directory-catalog .directory-details .item-phone,
.directory-catalog .directory-details .item-location,
.directory-catalog .directory-details .item-pronouns {
    display: none;
}
/*----------------------
    NO RESULTS
*/
[id*="data-no-results"] {
    width: 90%;
    margin: auto;
    margin-top: 20px;
}

    [id*="data-no-results"] .headline {
        margin-bottom: 0px;
        padding-bottom: 5px;
        border-bottom: dashed 2px var(--gray);
    }

/*-----------------------
        DIRECTORY COMPACT
*/

.directory-compact .directory-details-box {
    border-radius: 0px;
    box-shadow: var(--box-shadow-faint);
}

.directory-compact .directory-item-details-front {
    padding: 6px;
    gap: 3px;
}

.directory-compact .directory-details .item-headshot {
    border-radius: 8%;
    height: 90%;
    width: 90%;
    aspect-ratio: 1 / 1;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 5%;
    min-height: var(--min-col-width);
    min-width: var(--min-col-width);
    max-height: 200px;
    max-width: 200px;
}

.directory-compact .directory-item:hover .item-bg-crop {
    background-color: var(--orange-hover);
}


.directory-compact .directory-details .item-name {
    margin: 0px;
    padding: 0px;
}

    .directory-compact .directory-details .item-name button {
        font-size: var(--font-size-item-name);
        font-weight: bold;
        min-height: 40px;
        margin: 0px;
        padding: 2px;
        cursor: pointer;
        border: solid 0px var(--border-gray);
        border-bottom-width: 0px;
        border-radius: 0px;
        box-shadow: none;
        background-color: inherit;
        color: inherit;
        text-wrap: balance;
        text-decoration: underline solid 2px var(--orange);
        text-underline-offset: var(--text-underline-offset-more);
        line-height: var(--line-height);
    }

        .directory-compact .directory-details .item-name button:hover {
            text-underline-offset: var(--text-underline-offset);
        }

.directory-compact .info-department-role-group, .directory-compact .info-department-role-group *, .directory-compact .item-position {
    display: block;
    font-size: var(--font-size-reduced);
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    padding-top: 0px;
}

.directory-compact .item-position,
.directory-compact .item-role,
.directory-compact .item-department {
    font-weight: normal;
    padding-left: 30px;
    padding-top: 4px;
}


/*---------------------
    DIRECTORY BADGE
*/

.directory-badge .directory-details-box {
    position: relative;
    border-radius: 0px;
    box-shadow: none;
    display: grid;
}

.directory-badge .directory-details {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 0px;
}

.directory-badge .directory-item {
    flex-basis: 48%;
}

[class*="col-"] .directory-badge .directory-items {
    gap: 0.5%;
}

.col-1.directory-badge .directory-item {
    flex-basis: 99%;
}

.col-2.directory-badge .directory-item {
    flex-basis: 49%;
}

.col-3.directory-badge .directory-item {
    flex-basis: 32.3333%;
}

.col-4.directory-badge .directory-item {
    flex-basis: 24%;
}

.col-5.directory-badge .directory-item {
    flex-basis: 19%;
}


.directory-badge .item-bg-crop {
    position: absolute;
    height: 40%;
    width: 30%;
    top: 25%;
    left: 20px;
    border-radius: 20px;
    z-index: 5;
}

.directory-badge .item-headshot {
    height: 100%;
    border-radius: 0px;
}

.directory-badge .directory-item-details-front {
    margin: 0px;
    padding-left: 37%;
    border-radius: 0px;
    padding-top: 85px;
}

.directory-badge .directory-item:hover .directory-details-box {
    background-color: var(--box-shade-background-hover) !important;
    color: var(--my-white);
    text-shadow: var(--text-shadow);
}

.directory-badge .directory-item-details-front * {
    border-radius: 0px;
    background-color: transparent !important;
    color: inherit;
}

.directory-badge .item-name {
    margin: 0px;
    position: absolute;
    top: 4px;
    left: 10px;
    z-index: 8;
    text-align: left;
    width: auto;
}

    .directory-badge .item-name.no-btn {
        top: 20px;
    }

    .directory-badge .item-name button {
        text-align: left;
        padding: 8px;
        width: auto;
        box-shadow: none;
        position: relative;
        border: solid 1px var(--border-gray);
        border-radius: var(--border-radius-chamfer);
    }

.directory-badge .directory-item:hover .item-name button {
    background-color: inherit !important;
    color: var(--my-white);
    text-shadow: var(--text-shadow);
}

.directory-badge .item-name button:hover {
    box-shadow: none;
    border: 0px;
}

.directory-badge .item-name button:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 0px;
    background-color: var(--medium-blue);
    height: 100%;
    transition: width var(--transition-time-fast);
    border-radius: var(--border-radius-chamfer);
    z-index: -1;
}

.dark-mode .directory-badge .item-name button:after {
    background-color: var(--medium-blue-dark);
}

.directory-badge .item-name button:hover:after {
    width: 100%;
    transition: width var(--transition-time-fast);
}

.directory-badge .info-department-role-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

    .directory-badge .info-department-role-group .item-department {
        padding-bottom: 0px;
    }

    .directory-badge .info-department-role-group .item-role {
        padding-left: 30px;
        padding-top: 0px;
    }

.directory-badge .item-title, .directory-badge .item-description {
    display: none;
}
/*--small items or mobile --*/
.directory-badge .directory-item.item-medium .item-bg-crop,
.directory-badge .directory-item.item-small .item-bg-crop {
    position: relative;
    height: 325px;
    width: 100%;
    border-radius: 0px;
    top: unset;
    left: unset;
}

.directory-badge .directory-item.item-medium .item-headshot,
.directory-badge .directory-item.item-small .item-headshot {
    height: calc(100% - 20px);
    border-radius: 20px;
    margin: 20px;
}


.directory-badge .directory-item.item-medium .directory-item-details-front,
.directory-badge .directory-item.item-small .directory-item-details-front {
    padding-left: unset;
    padding: 20px;
}

.directory-badge .directory-item.item-medium .item-name,
.directory-badge .directory-item.item-small .item-name {
    position: relative;
}

    .directory-badge .directory-item.item-medium .item-name button,
    .directory-badge .directory-item.item-small .item-name button {
        text-align: center;
    }

    .directory-badge .directory-item.item-medium .item-name.no-btn,
    .directory-badge .directory-item.item-small .item-name.no-btn {
        top: unset;
    }

/*-- List View / Single Item View --*/

.directory-badge .directory-sections[active-view="grid"] .directory-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.directory-badge .directory-sections[active-view="grid"] .directory-item .item-name,
.directory-badge .full-view-item .item-name {
    position: relative;
}

.directory-badge .directory-sections[active-view="grid"] .directory-details,
.directory-badge .full-view-item .directory-details,
.directory-badge .full-view-item .info-department-role-group {
    display: block !important;
}

.directory-badge .directory-sections[active-view="grid"] .directory-item-details-front,
.directory-badge .full-view-item .directory-item-details-front {
    margin: 0px;
    padding-left: 20px;
    padding-bottom: 80px;
    border-radius: 0px;
    padding-top: unset;
}

.directory-badge .directory-sections[active-view="grid"] .item-bg-crop,
.directory-badge .full-view-item .item-bg-crop {
    margin: 20px;
    position: relative;
    height: auto;
    width: auto;
    top: unset;
    left: unset;
}

.directory-badge .directory-sections[active-view="grid"] .directory-item:hover .directory-item-details-front,
.directory-badge .directory-sections[active-view="grid"] .directory-item:hover .item-name button {
    background-color: inherit !important;
    color: inherit;
    text-shadow: unset;
}

/*-- DIRECTORY PROFILE --*/
.directory-profile .item-headshot-bg.item-headshot-top {
    display: none;
}

.directory-profile .directory-details-box {
    border-radius: 0px;
}

.directory-profile .item-bg-crop {
    position: relative;
    height: 150px;
    background-color: var(--my-white);
}

.mobile .directory-profile .item-bg-crop:not(.has-headshot) {
    height: 30px;
}

.directory-profile .item-headshot-bg {
    height: 65%;
    background-size: cover;
    background-position: bottom;
    width: 100%;
    display: block;
}

.directory-profile .item-headshot,
.directory-profile .list-view .directory-details .item-headshot {
    position: absolute;
    border-radius: 50%;
    border: solid 6px var(--my-white);
    height: 126px;
    width: 126px;
    margin: auto;
    bottom: 0px;
    z-index: 5;
    left: calc(50% - 63px);
}

.directory-profile .list-view .item-content .item-headshot-bg {
    display: none;
}

.directory-profile .directory-item-details-front {
    margin: 0px;
    margin-top: 8px;
    padding: 5px 60px;
    padding-bottom: 35px;
}

    .directory-profile .directory-item-details-front p {
        padding-top: 0px;
    }

.directory-profile .item-name {
    margin: 0px;
}

    .directory-profile .item-name button {
        border: 0px;
        box-shadow: none;
        border-radius: 0px;
        padding: 10px;
        position: relative;
    }

        .directory-profile .item-name button:after {
            position: absolute;
            content: "";
            height: 4px;
            width: 40px;
            bottom: 0px;
            left: calc(50% - 20px);
            background-color: var(--orange);
            transition: all var(--transition-time) ease;
        }

        .directory-profile .item-name button:hover {
            border: 0px;
            box-shadow: none;
            background: inherit;
            color: inherit;
        }

            .directory-profile .item-name button:hover:after {
                width: 80%;
                left: 10%;
                transition: all var(--transition-time) ease;
            }

.directory-profile .item-title, .directory-profile .item-description {
    display: none;
}

/*-- DIRECTORY PROFILE SMALL / MEDIUM --*/
.directory-profile .item-medium .directory-item-details-front,
.directory-profile .item-small .directory-item-details-front {
    margin: 0px;
    padding: 5px 10px;
    padding-bottom: 20px;
}

/*-- DIRECTORY PROFILE FULL VIEW --*/
.directory-profile .full-view-item .directory-details-box {
    background-color: inherit;
    height: auto;
    box-shadow: none;
}

.directory-profile .full-view-item .item-headshot-bg.item-headshot-top {
    display: block;
    height: 200px;
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    margin-top: 60px;
}

.directory-profile .full-view-item .directory-details .item-bg-crop {
    background-color: inherit;
    height: auto;
}

.directory-profile .full-view-item .directory-details .item-headshot-bg,
.directory-profile .full-view-item .item-content .item-headshot-bg {
    display: none;
}

.directory-profile .full-view-item .directory-details .item-headshot {
    position: relative;
    height: auto;
    width: auto;
    border: 0px;
    border-radius: 0px;
    min-height: 250px;
    left: 0px;
}

    .directory-profile .full-view-item .directory-details .item-headshot img {
        border-radius: 50%;
        height: 250px;
        width: 250px;
        aspect-ratio: 1 / 1;
        border: solid 8px var(--my-white);
        object-fit: cover;
    }


.directory-profile .full-view-item .directory-details .item-name {
    justify-content: center;
    padding-left: 0px;
}

.directory-profile .full-view-item .item-content {
    margin-top: 200px;
}
/*-- header profile large --*/

.directory-profile .full-view-item.profile-large .item-headshot-bg.item-headshot-top,
.directory-profile.profile-large .full-view-item .item-headshot-bg.item-headshot-top {
    height: 300px;
    border-bottom: solid 10px var(--secondary-hover);
    box-shadow: var(--box-shadow);
}

.directory-profile .full-view-item.profile-large .directory-details .item-headshot img,
.directory-profile.profile-large .full-view-item .directory-details .item-headshot img {
    height: 400px;
    width: 400px;
}

.directory-profile .full-view-item.profile-large .item-content,
.directory-profile.profile-large .full-view-item .item-content {
    margin-top: 310px;
}

/*-- header bg placement --*/
.header-bg-top .item-headshot-bg {
    background-position: top;
}

.header-bg-top-left .item-headshot-bg {
    background-position: top left;
}

.header-bg-top-right .item-headshot-bg {
    background-position: top right;
}

.header-bg-center .item-headshot-bg {
    background-position: center;
}

.header-bg-center-left .item-headshot-bg {
    background-position: center left;
}

.header-bg-center-right .item-headshot-bg {
    background-position: center right;
}

.header-bg-bottom .item-headshot-bg {
    background-position: bottom;
}

.header-bg-bottom-left .item-headshot-bg {
    background-position: bottom left;
}

.header-bg-bottom-right .item-headshot-bg {
    background-position: bottom right;
}
/*---------------------
    DIRECTORY MODIFIERS
*/
.directory-item-image-full .item-headshot {
    border-radius: 0px !important;
    margin: 0px !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover;
    aspect-ratio: unset !important;
    max-width: unset !important;
}

.directory-item-image-round .item-headshot {
    border-radius: 50% !important;
    height: 65% !important;
    width: 65% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: calc(var(--min-col-width) - 15%) !important;
    min-width: calc(var(--min-col-width) - 15%) !important;
    margin: auto;
    margin-top: 5%;
}

.mobile .directory-item-image-round .item-headshot {
    min-width: calc(var(--min-col-width) - 65%) !important;
}

.directory-item-image-chamfer .item-headshot {
    border-radius: var(--border-radius-chamfer) !important;
    height: 75% !important;
    width: 75% !important;
    aspect-ratio: 1 / 1 !important;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 5%;
    box-shadow: var(--box-shadow-down);
}

.directory-item-image-chamfer .directory-item:hover .item-bg-crop {
    background-color: var(--orange-hover);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.directory-item-image-chamfer .directory-item:hover .item-headshot {
    box-shadow: var(--box-shadow-more);
}

/*-- remove full view image / data modifications --*/
.directory-shell .full-view-item .item-headshot {
    box-shadow: none;
    height: auto !important;
    min-height: unset !important;
    min-width: unset !important;
    margin: auto !important;
}

.directory-shell .full-view-item .directory-item-details-front * {
    display: flex;
    padding-left: 0px;
}

.directory-shell .full-view-item .directory-item-details-front > *,
.directory-shell .full-view-item .directory-item-details-front .info-department-role-group > * {
    padding-left: 30px;
    margin-top: unset;
}

.directory-shell .full-view-item .directory-item-details-front > .item-name {
    font-size: var(--font-size-large);
    text-align: center;
}

.directory-shell .full-view-item .directory-item-details-front .directory-direct-link {
    padding-left: 10px;
    padding-top: 8px;
    display: grid !important;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "direct-message direct-link";
    gap: 10px;
}

    .directory-shell .full-view-item .directory-item-details-front .directory-direct-link button {
        grid-area: direct-link;
        width: max-content;
    }

    .directory-shell .full-view-item .directory-item-details-front .directory-direct-link p {
        grid-area: direct-message;
    }

.directory-shell .full-view-item .info-department-role-group {
    padding: 0px;
}


.hide-additional-info .directory-shell .full-view-item .additional-content,
.hide-full-direct-link .directory-shell .full-view-item .directory-details .directory-direct-link {
    display: none !important;
}

/*--- additional fields fixes --*/

[class*='directory-'].hide-additional-info .full-view-item .directory-item-details-front .item-title,
[class*='directory-'].hide-additional-info .full-view-item .directory-item-details-front .item-description {
    display: grid !important;
}

[class*='directory-']:not(.hide-additional-info) .full-view-item .directory-item-details-front .item-title,
[class*='directory-']:not(.hide-additional-info) .full-view-item .directory-item-details-front .item-description {
    display: none !important;
}
/*--- DIRECTORY BUCKETS ---*/
.bucket-content-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    gap: 1%;
}

    .bucket-content-holder div {
        width: 100%;
        border-radius: var(--border-radius-chamfer);
        border: solid 1px var(--border-gray);
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        padding: 15px;
        margin-bottom: 1%;
        overflow-wrap: break-word;
    }

.bucket-content-no-lines .bucket-content-holder div {
    background-color: inherit;
    color: inherit;
    border: unset;
}

.bucket-content-holder .bucket-title {
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 5px;
    font-weight: bold;
}

.bucket-content-holder.bucket-large .bucket-title {
    font-size: var(--font-size-large);
}

.bucket-content-holder.bucket-medium .bucket-title {
    font-size: var(--font-size);
}

.bucket-content-holder.bucket-small .bucket-title {
    font-size: var(--font-size-reduced);
}

.bucket-content-holder p:not(.bucket-title) {
    margin-top: 2px;
    margin-bottom: 1px;
    font-size: var(--font-size-reduced);
}

.bucket-content-1.bucket-large .bucket-content-holder div {
    width: 49%;
}

.bucket-content-2.bucket-large .bucket-content-holder div {
    width: 32%;
}

.bucket-content-2.bucket-medium .bucket-content-holder div {
    width: 49%;
}

    .bucket-content-2.bucket-medium .bucket-content-holder div:nth-child(3n+1) {
        width: 99%;
    }

.bucket-content-3.bucket-large .bucket-content-holder div:nth-child(3n+1) {
    width: 99%;
}

.bucket-content-3.bucket-large .bucket-content-holder div:nth-child(3n+2) {
    width: 32.33%;
}

.bucket-content-3.bucket-large .bucket-content-holder div:nth-child(3n+3) {
    width: 66%;
}

.bucket-content-4.bucket-large .bucket-content-holder div:nth-child(3n+1) {
    width: 99%;
}

.bucket-content-4.bucket-large .bucket-content-holder div:nth-child(3n+2),
.bucket-content-4.bucket-large .bucket-content-holder div:nth-child(3n+3) {
    width: 49%;
}

.bucket-content-5.bucket-large .bucket-content-holder div:nth-child(6n+1),
.bucket-content-5.bucket-large .bucket-content-holder div:nth-child(6n+2),
.bucket-content-5.bucket-large .bucket-content-holder div:nth-child(6n+3),
.bucket-content-5.bucket-large .bucket-content-holder div:nth-child(6n+4) {
    width: 32.33%;
}

.bucket-content-5.bucket-large .bucket-content-holder div:nth-child(6n+5) {
    width: 66%;
}

.bucket-content-5.bucket-large .bucket-content-holder div:nth-child(6n+6) {
    width: 99%;
}


.bucket-content-6.bucket-large .bucket-content-holder div:nth-child(6n+1) {
    width: 99%;
}

.bucket-content-6.bucket-large .bucket-content-holder div:nth-child(6n+2),
.bucket-content-6.bucket-large .bucket-content-holder div:nth-child(6n+3),
.bucket-content-6.bucket-large .bucket-content-holder div:nth-child(6n+4) {
    width: 32.33%;
}

.bucket-content-6.bucket-large .bucket-content-holder div:nth-child(6n+5),
.bucket-content-6.bucket-large .bucket-content-holder div:nth-child(6n+6) {
    width: 49%;
}


.bucket-content-7.bucket-large .bucket-content-holder div:nth-child(6n+1),
.bucket-content-7.bucket-large .bucket-content-holder div:nth-child(6n+2) {
    width: 49%;
}

.bucket-content-7.bucket-large .bucket-content-holder div:nth-child(6n+3),
.bucket-content-7.bucket-large .bucket-content-holder div:nth-child(6n+6) {
    width: 32.33%;
}

.bucket-content-7.bucket-large .bucket-content-holder div:nth-child(6n+4),
.bucket-content-7.bucket-large .bucket-content-holder div:nth-child(6n+5) {
    width: 66%;
}


.bucket-content-8.bucket-large .bucket-content-holder div:nth-child(6n+1),
.bucket-content-8.bucket-large .bucket-content-holder div:nth-child(6n+2) {
    width: 49%;
}

.bucket-content-8.bucket-large .bucket-content-holder div:nth-child(6n+3) {
    width: 99%;
}

.bucket-content-8.bucket-large .bucket-content-holder div:nth-child(6n+4),
.bucket-content-8.bucket-large .bucket-content-holder div:nth-child(6n+5),
.bucket-content-8.bucket-large .bucket-content-holder div:nth-child(6n+6) {
    width: 32.33%;
}


/* bucket sizing small */
[class*="bucket-content-"][class*="bucket-small"] .bucket-content-holder div {
    width: 100%;
}
/*-------------------
    DIRECTORY SPOTLIGHT
*/
.directory-spotlight .spotlight-hide {
    opacity: 0;
}

.directory-spotlight .ib-dir-view {
    display: none;
}

.directory-spotlight .directory-items .data-set-name {
    display: none !important;
}

.directory-spotlight .directory-item {
    flex-basis: 100%;
    border-radius: 0px;
    border: 0px;
    display: none;
}

.directory-spotlight .item-full:not(.directory-item-details-front) {
    display: none;
    opacity: 0;
}


.directory-spotlight .directory-item.item-full.active {
    display: grid;
    opacity: 1;
    gap: 0px;
    transition: opacity var(--transition-time-slow) ease;
}


.directory-spotlight .directory-details-box {
    background-color: inherit;
    color: inherit;
    border: 0px;
    box-shadow: none;
}

.directory-spotlight .directory-details {
    display: grid;
    grid-template-columns: minmax(200px, 330px) 1fr;
    border-radius: 0px;
    background-color: inherit;
    color: inherit;
    gap: 0px;
    margin: auto;
    margin-bottom: 10vh;
}

.directory-spotlight .item-headshot {
    flex-direction: row;
    border-radius: 0px;
    max-width: 300px;
    width: auto;
    height: 100%;
    margin: auto;
    border: solid 1px var(--border-gray);
}


.directory-spotlight .directory-item-details-front {
    flex-direction: column;
    width: 100%;
    gap: 0px;
    padding: 0px;
    justify-content: end;
}

.directory-spotlight .item-full p {
    margin: 0px;
    padding: 0px;
    line-height: unset;
}

.directory-spotlight .spotlight-status {
    text-transform: uppercase;
    font-size: var(--font-size-navigation-lower);
    font-weight: bold;
}

.directory-spotlight .spotlight-title a {
    font-size: var(--font-size-large);
    font-weight: bold;
    text-decoration: none;
    line-height: 44px;
}

    .directory-spotlight .spotlight-title a:hover {
        text-decoration: solid 2px var(--orange);
    }

.directory-spotlight .spotlight-user {
    font-weight: bold;
}

    .directory-spotlight .spotlight-user .pronouns {
        font-weight: normal;
        font-size: var(--font-size-reduced);
    }

.directory-spotlight .spotlight-department-role {
    display: flex;
    flex-direction: row;
    width: fit-content;
    gap: 2px;
    padding-top: 6px;
    padding-bottom: 6px;
}

    .directory-spotlight .spotlight-department-role * {
        flex-basis: content;
        font-style: italic;
    }

    .directory-spotlight .spotlight-department-role * {
        flex-basis: content;
    }

.directory-spotlight .spotlight-content section {
    display: none;
}

    .directory-spotlight .spotlight-content section.before-section,
    .directory-spotlight .spotlight-content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .directory-spotlight .spotlight-content.show-full section.before-section,
        .directory-spotlight .spotlight-content.show-full {
            display: grid;
            -webkit-box-orient: unset;
            -webkit-line-clamp: unset;
            line-clamp: unset;
            overflow: visible;
            text-overflow: unset;
        }


        .directory-spotlight .spotlight-content p {
            padding-bottom: 6px;
        }

.directory-spotlight .spotlight-show-more-holder {
    display: grid;
    justify-content: end;
}

.directory-spotlight .spotlight-show-more {
    padding: 6px;
    background-color: inherit;
    color: inherit;
    border: 0px;
    width: auto;
    text-align: right;
    cursor: pointer;
    font-style: italic;
    border-bottom: solid 2px transparent;
}

    .directory-spotlight .spotlight-show-more:hover, .directory-spotlight .spotlight-show-more:focus {
        border-bottom: solid 2px var(--border-gray);
    }


/*-------------------
    DIRECTORY LISTING
*/
.directory-listing .directory-shell {
    grid-template-columns: 240px 1fr;
    grid-template-areas: "filter items";
    gap: 20px;
    opacity: 0;
}

    .directory-listing .directory-shell.no-filter {
        grid-template-columns: 1fr;
        grid-template-areas: "items";
    }

    .directory-listing .directory-shell.active {
        animation-delay: var(--animation-delay);
        animation-fill-mode: forwards;
        animation-name: directory-fade-in;
        animation-duration: 500ms;
    }

@keyframes directory-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.directory-listing .original-data,
.directory-listing .ib-dir-view {
    display: none;
}

.directory-listing .directory-bin {
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid 1px var(--border-gray);
    border-radius: var(--border-radius-chamfer);
    margin-top: 15px;
    padding: 6px;
    padding-top: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
}

.directory-listing.medium-content .directory-shell.active,
.directory-listing.medium-content.no-filter .directory-shell.active,
.tablet .directory-listing .directory-shell.active,
.tablet-small .directory-listing .directory-shell.active,
.tablet .directory-listing.no-filter .directory-shell.active,
.tablet-small .directory-listing.no-filter .directory-shell.active,
.mobile .directory-listing .directory-shell.active,
.mobile .directory-listing.not-filter .directory-shell.active,
.mobile .directory-listing.not-filter.no-search .directory-shell.active,
.directory-listing.small-content .directory-shell.active {
    grid-template-columns: 1fr;
    grid-template-areas: unset;
    gap: 0px;
}

.directory-listing .directory-shell.expand {
    grid-template-columns: 240px minmax(280px, 1fr) 3fr;
    grid-template-areas: "filter items expand";
}

.directory-listing.no-filter .directory-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "items";
    gap: 0px;
}

    .directory-listing.no-filter .directory-shell.expand {
        grid-template-columns: minmax(280px, 1fr) 3fr;
        grid-template-areas: "items expand";
        gap: 20px;
    }

.tablet-small .directory-shell.no-filter.expand,
.mobile .directory-listing.no-filter .directory-shell.expand {
    grid-template-columns: 1fr;
    grid-template-areas: unset;
}

.directory-listing .directory-listing-tabs {
    display: none;
    grid-template-columns: auto 1fr 1fr;
    gap: 10px;
    border-bottom: solid 2px var(--border-gray);
}

.directory-listing.no-filter .directory-shell .directory-listing-tabs {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.directory-listing .directory-listing-tabs p {
    margin: 0px;
    padding: 0px;
}

.directory-listing .directory-listing-tabs button {
    padding: 8px;
    min-width: 125px;
    background-color: var(--cloud);
    color: var(--cloud-text);
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
    border: solid 1px var(--warm-gray);
    height: 35px;
    border-bottom: 0px;
    cursor: pointer;
}

    .directory-listing .directory-listing-tabs button:hover, .directory-listing .directory-listing-tabs button:focus {
        background-color: var(--orange-hover);
        color: var(--orange-hover-text);
    }

    .directory-listing .directory-listing-tabs button.active {
        background-color: var(--secondary);
        color: var(--secondary-text);
    }

    .directory-listing .directory-listing-tabs button.show-selected-item {
        display: none;
    }

        .directory-listing .directory-listing-tabs button.show-selected-item.has-item {
            display: block;
        }

.tablet .directory-listing .directory-listing-tabs,
.tablet-small .directory-listing .directory-listing-tabs,
.mobile .directory-listing .directory-listing-tabs,
.medium-content.directory-listing .directory-listing-tabs,
.small-content.directory-listing .directory-listing-tabs {
    display: grid;
    width: 100%;
    gap: 6px;
}

.mobile .directory-listing .directory-listing-tabs,
.small-content.directory-listing .directory-listing-tabs {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    border-bottom: 0px;
}

    .mobile .directory-listing .directory-listing-tabs .show-selected-item,
    .small-content.directory-listing .directory-listing-tabs .show-selected-item {
        grid-column: span 2;
    }

.mobile .directory-listing.no-filter .directory-listing-tabs .show-selected-item,
.small-content.directory-listing.no-filter .directory-listing-tabs .show-selected-item {
    grid-column: span 1;
}

.tablet .directory-listing.no-filter .show-filters,
.tablet-small .directory-listing.no-filter .show-filters,
.small-content .directory-listing.no-filter .show-filters,
.mobile .directory-listing.no-filter .show-filters {
    display: none;
}

.mobile .directory-listing .directory-listing-tabs button,
.small-content.directory-listing .directory-listing-tabs button {
    border-bottom: solid 1px var(--warm-gray);
    border-radius: var(--border-radius-small);
}

.directory-listing .directory-search-tools {
    grid-area: filter;
}

.directory-listing .directory-sections {
    grid-area: items;
}

.directory-listing .directory-shell.expand .directory-sections,
.directory-listing .directory-shell.expand .directory-search-tools {
    position: sticky;
    top: 70px;
}

.directory-listing.no-filter .directory-shell.expand .directory-sections,
.directory-listing.no-filter .directory-shell.expand .directory-search-tools {
    top: 20px;
}

.directory-listing .directory-expand-data {
    grid-area: expand;
    position: relative;
    padding-top: 30px;
}

.directory-listing .directory-search-tools {
    grid-template-columns: 1fr;
    grid-template-areas: "results"
        "search "
        "reset";
}

.directory-listing .directory-reset {
    margin: 4px;
    padding: 0px;
    width: 100%;
    text-align: center;
}

    .directory-listing .directory-reset button {
        padding: 8px;
        cursor: pointer;
        margin: auto;
    }

.directory-listing .data-set-name.title {
    font-size: var(--font-size-large);
    font-weight: 500;
    border-bottom: 0px;
    margin: 0px;
    padding: 0px;
}

    .directory-listing .data-set-name.title .group-title {
        background: inherit;
        color: var(--secondary);
        font-size: var(--font-size);
        font-weight: bold;
        text-align: left;
        justify-content: start;
        border-radius: 0px;
        height: fit-content;
        padding: 16px 10px;
        text-transform: capitalize;
        position: relative;
        margin: 0px;
        width: 100%;
        left: unset;
        top: unset;
        display: grid;
    }

.directory-listing .expand .data-set-name.title,
.directory-listing .one-column .data-set-name.title {
    padding: 0px;
    margin: 0px;
    width: 100%;
}

.directory-listing .directory-item {
    min-width: 32%;
    border-radius: 0px;
}

.directory-listing .two-column .directory-item {
    min-width: 49%;
}

.small-content.directory-listing .directory-item,
.directory-listing .one-column .directory-item,
.directory-listing .directory-shell.expand .directory-item {
    min-width: 99%;
}

.tablet-small .directory-listing .directory-shell.expand .directory-item {
    min-width: 49%;
}

.directory-listing.medium-content .directory-sections,
.tablet .directory-listing .directory-sections,
.tablet-small .directory-listing .directory-sections,
.mobile .directory-listing .directory-sections,
.directory-listing.small-content .directory-sections {
    grid-area: unset;
    grid-row: unset;
}

.directory-listing.medium-content .directory-items,
.tablet .directory-listing .directory-items,
.tablet-small .directory-listing .directory-items,
.mobile .directory-listing .directory-items,
.directory-listing.small-content .directory-items {
    display: none;
}

    .directory-listing.medium-content .directory-items.active,
    .tablet .directory-listing .directory-items.active,
    .tablet-small .directory-listing .directory-items.active,
    .mobile .directory-listing .directory-items.active,
    .directory-listing.small-content .directory-items.active {
        display: flex;
    }

.directory-listing .directory-details-box {
    flex-direction: row;
    border-radius: 0px;
    padding: 5px;
    background-color: inherit;
    color: inherit;
    box-shadow: none;
    border: 0px;
}

    .directory-listing .directory-details-box .directory-details {
        display: grid;
        grid-template-columns: 50px 1fr;
        gap: 10px;
        align-items: start;
    }

        .directory-listing .directory-details-box .directory-details .item-headshot {
            height: 50px;
            border-radius: 0px;
            background-size: cover;
            background-repeat: no-repeat;
            margin-top: 0px;
        }

        .directory-listing .directory-details-box .directory-details .directory-item-details-front {
            margin: 0px;
            padding: 0px;
            min-height: 40px;
            gap: 0px;
        }

            .directory-listing .directory-details-box .directory-details .directory-item-details-front p:not(.item-name),
            .directory-listing .directory-details-box .directory-details .directory-item-details-front .directory-direct-link {
                display: none !important;
            }

            .directory-listing .directory-details-box .directory-details .directory-item-details-front .item-name {
                margin: 0px;
                padding: 0px;
            }

                .directory-listing .directory-details-box .directory-details .directory-item-details-front .item-name button {
                    margin: 0px;
                    padding: 0px;
                    font-size: var(--font-size);
                    font-weight: 300;
                    background-color: inherit;
                    color: inherit;
                    border-radius: 0px;
                    text-align: left;
                    padding-left: 0px;
                    border: 0px;
                    display: grid;
                    align-items: start;
                    min-height: fit-content;
                    text-decoration: underline;
                    text-decoration-style: solid;
                    text-decoration-thickness: 1px;
                    text-decoration-color: var(--secondary);
                }

                    .directory-listing .directory-details-box .directory-details .directory-item-details-front .item-name button:hover {
                        box-shadow: none;
                        font-weight: bold;
                        text-decoration-style: solid;
                        text-decoration-color: var(--secondary-hover);
                        text-decoration-thickness: 2px;
                        transition: all 100ms ease-in-out;
                    }

.directory-listing[class*='listing-add-'] .directory-details-box .directory-details .directory-item-details-front .item-name span {
    font-size: var(--font-size-small);
    display: grid;
    width: 100%;
    text-align: left;
}
/*-- directory listing formatting for expanded data -- */
.directory-listing.medium-content .directory-expand-data,
.tablet .directory-listing .directory-expand-data,
.tablet-small .directory-listing .directory-expand-data,
.mobile .directory-listing .directory-expand-data,
.directory-listing.small-content .directory-expand-data {
    display: none;
}

    .directory-listing.medium-content .directory-expand-data.active,
    .tablet .directory-listing .directory-expand-data.active,
    .tablet-small .directory-listing .directory-expand-data.active,
    .mobile .directory-listing .directory-expand-data.active,
    .directory-listing.small-content .directory-expand-data.active {
        display: flex;
        grid-area: unset;
        padding-top: 0px;
    }

.directory-listing.medium-content .full-view-item.has-filter,
.tablet .directory-listing .full-view-item.has-filter,
.tablet-small .directory-listing .full-view-item.has-filter,
.mobile .directory-listing .full-view-item.has-filter,
.directory-listing.small-content .full-view-item.has-filter {
    grid-column: unset;
}

.directory-expand-data .p-close {
    justify-content: end;
    display: grid;
    margin: 0px;
    position: absolute;
    z-index: 5;
}

    .directory-expand-data .p-close button {
        background-color: var(--primary);
        color: var(--primary-text);
        height: 44px;
        width: 44px;
        padding: 0px;
        font-size: var(--font-size-large);
        border: 0px;
        font-weight: bold;
        border-radius: var(--border-radius-chamfer);
        cursor: pointer;
    }

        .directory-expand-data .p-close button:hover, .directory-expand-data .p-close button:focus {
            background-color: var(--orange-hover);
            color: var(--orange-hover-text);
        }

.directory-expand-data .directory-profile {
    background-color: var(--primary);
    color: var(--primary-text);
    border-bottom: solid 3px var(--primary-border-alt);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    padding: .4em;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.directory-expand-data .directory-profile-headshot {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 8px;
    object-fit: contain;
    background-size: contain;
    display: grid;
    align-content: center;
    grid-row: span 2;
    margin: auto;
}

    .directory-expand-data .directory-profile-headshot img {
        border-radius: 50%;
        object-fit: cover;
        aspect-ratio: 1 / 1;
        background-color: var(--my-black);
        outline-color: var(--my-white);
        outline-width: 6px;
        outline-style: solid;
        padding: 0px;
        max-width: 200px;
        background-position: unset;
        height: auto;
        max-height: 200px;
    }

.full-image .directory-expand-data .directory-profile-headshot img {
    border-radius: var(--border-radius-chamfer);
    max-width: 300px;
    max-height: 400px;
    width: auto;
    height: auto;
    margin: auto;
    margin-top: 20px;
    margin-left: 10px;
    outline-width: 2px;
}

.full-image .directory-expand-data:not(.large-content) .directory-profile-headshot img {
    max-width: 180px;
}

.directory-expand-data .directory-profile .directory-item-name {
    height: fit-content;
}

.directory-expand-data .directory-profile .item-name {
    font-size: var(--font-size-extra-large);
    font-weight: bold;
    position: relative;
    padding: 40px 8px 6px 0px;
    margin-bottom: 6px;
}

    .directory-expand-data .directory-profile .item-name:after {
        content: "";
        position: absolute;
        bottom: -3px;
        left: 2px;
        height: 4px;
        background-color: var(--accent-1);
        width: calc(100% - 4px);
    }

    .directory-expand-data .directory-profile .item-name .pronouns {
        font-size: var(--font-size);
        font-weight: normal;
    }

.directory-expand-data .directory-profile .directory-profile-details p {
    font-size: var(--font-size);
    font-weight: normal;
    margin: 0px;
    margin-bottom: 4px;
    padding: 0px 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-content: end;
}

.directory-expand-data .directory-profile .directory-profile-details .item-label {
    font-size: var(--font-size-small);
    font-weight: 200;
    flex-basis: 135px;
    text-align: right;
}

.directory-expand-data .directory-profile .directory-profile-details p > span:not(.item-label) {
    flex-basis: calc(100% - 145px);
}

.directory-expand-data:not(.large-content) .directory-profile .directory-profile-details p {
    gap: 0px;
    margin-bottom: 10px;
}

    .directory-expand-data:not(.large-content) .directory-profile .directory-profile-details p > span.item-label {
        line-height: var(--font-size-reduced);
    }

    .directory-expand-data:not(.large-content) .directory-profile .directory-profile-details p > span {
        width: 100%;
        flex-basis: 100%;
        text-align: left;
    }

.directory-expand-data .directory-profile .item-office-contact {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 10px;
    border-top: dotted 2px var(--primary-border-alt);
    margin-top: 10px;
    padding-top: 10px;
    grid-column: span 2;
}

    .directory-expand-data .directory-profile .item-office-contact p {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        flex-basis: 32%;
        min-width: 200px;
        align-items: flex-start;
        margin: 0px;
        margin-bottom: auto;
        padding: 0px;
        padding-left: 15px;
    }

.directory-expand-data.medium-content .directory-profile .item-office-contact p {
    flex-basis: 49%;
}

.directory-expand-data .directory-profile .item-office-contact .item-label {
    flex-basis: 100%;
    text-align: left;
    height: .8em;
    padding: 0px 6px;
    font-size: var(--font-size-small);
    font-weight: 200;
    background-color: var(--secondary);
    color: var(--secondary-text);
    width: 100%;
    border-radius: var(--border-radius-tiny);
}

.directory-expand-data .directory-profile .item-office-contact span:not(.item-label) {
    padding: 0px 10px;
    font-size: var(--font-size-reduced);
}

.directory-expand-data .directory-profile .item-office-contact span > a {
    color: var(--primary-text);
    font-weight: normal;
    text-underline-offset: 4px;
    text-decoration-color: var(--primary-text);
}

    .directory-expand-data .directory-profile .item-office-contact span > a:hover,
    .directory-expand-data .directory-profile .item-office-contact span > a:focus {
        text-decoration-style: solid;
        text-decoration-thickness: 3px;
        text-underline-offset: 5px;
        text-decoration-color: var(--accent-1);
        transition: text-underline-offset ease var(--transition-time);
    }


.directory-expand-data .directory-profile .direct-link {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    grid-column: span 2;
}


    .directory-expand-data .directory-profile .direct-link p {
        flex-basis: 63%;
        margin: 0px;
        align-content: center;
    }

.directory-expand-data.small-content .directory-profile .direct-link p {
    flex-basis: 96%;
    margin: auto;
}

.directory-expand-data .directory-profile .direct-link button {
    flex-basis: 33%;
    border: solid 1px var(--border-gray);
}

.directory-expand-data.small-content .directory-profile .direct-link button {
    flex-basis: 66%;
    margin: auto;
}

.directory-expand-data .directory-profile .direct-link button:hover, .directory-expand-data .directory-profile .direct-link button:focus {
    background-color: var(--orange-hover);
    color: var(--orange-hover-text);
}

.directory-expand-data .listing-info-bottom {
    margin: 0px;
    padding: 0px;
    padding-bottom: 20px;
    border: solid 1px var(--border-gray);
    border-top: 0;
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
    background-color: var(--my-white);
    color: var(--my-white-text);
    box-shadow: var(--box-shadow-down);
    min-height: 125px;
}

    .directory-expand-data .listing-info-bottom:not(.no-headshot-bg) .item-headshot-bg {
        min-height: 175px;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 12px;
    }

    .directory-expand-data .listing-info-bottom p {
        margin: 0px;
        padding: 16px 25px 2px 25px;
        font-size: var(--font-size);
        font-weight: normal;
    }

    .directory-expand-data .listing-info-bottom ul {
        margin: 0px;
        margin-left: 1.5em;
        padding: 0px 30px 8px 30px;
    }

    .directory-expand-data .listing-info-bottom li {
        margin: 0px;
        padding: 4px 2px;
        font-size: var(--font-size-reduced);
        font-weight: 300;
    }

    .directory-expand-data .listing-info-bottom img {
        padding: 0px;
    }

    .directory-expand-data .listing-info-bottom .block-main-title {
        font-weight: bold;
        font-size: var(--font-size-app-main-title);
        line-height: normal;
        color: var(--secondary);
    }

    .directory-expand-data .listing-info-bottom .accordion-title {
        font-weight: bold;
        font-size: var(--font-size-extra-large);
        color: var(--dark);
    }

    .directory-expand-data .listing-info-bottom .standout {
        font-size: var(--main-standout-font-size);
        font-weight: 200;
    }

    .directory-expand-data .listing-info-bottom .standout-block {
        font-size: var(--main-standout-block-font-size);
        font-weight: 300;
        padding: var(--notice-padding-clamp);
        padding-left: 25px;
    }

    .directory-expand-data .listing-info-bottom .larger {
        font-size: var(--font-size-larger);
    }

    .directory-expand-data .listing-info-bottom .bucket-title {
        font-weight: bold;
        font-size: var(--font-size-blockquote);
        color: var(--secondary-border-alt);
    }

    .directory-expand-data .listing-info-bottom .additional-content .photo- div,
    .directory-expand-data .listing-info-bottom .additional-content .desc- div,
    .directory-expand-data .listing-info-bottom .additional-content.photo-desc- div {
        display: grid;
        align-items: start;
        align-content: start;
    }

    .directory-expand-data .listing-info-bottom .additional-content .photo-desc- {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 10px;
        border-top: solid 1px var(--border-gray);
        align-content: flex-start;
        padding-top: 20px;
        padding-left: 25px;
        margin-top: 15px;
        padding-bottom: 15px;
        border-bottom: solid 1px var(--border-gray);
    }

        .directory-expand-data .listing-info-bottom .additional-content .photo-desc- p,
        .directory-expand-data .listing-info-bottom .additional-content .photo-desc- div {
            padding: 8px 0px;
        }

    .directory-expand-data .listing-info-bottom .additional-content .description-title {
        font-weight: bold;
        font-size: var(--font-size-ibp-title);
        text-transform: capitalize;
        color: var(--secondary-border-alt);
    }

    .directory-expand-data .listing-info-bottom .additional-content .additional-content {
        padding-left: 25px;
    }

    .directory-expand-data .listing-info-bottom .additional-content .content-sections {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

        .directory-expand-data .listing-info-bottom .additional-content .content-sections div {
            flex-basis: auto;
            min-width: 190px;
            padding: 5px;
            flex-grow: 3;
        }

            .directory-expand-data .listing-info-bottom .additional-content .content-sections div p:first-child {
                padding: 5px;
                color: var(--primary);
                font-size: var(--font-size-headline);
            }

            .directory-expand-data .listing-info-bottom .additional-content .content-sections div ul {
                margin: 0px;
                padding: 0px 25px;
            }

    .directory-expand-data .listing-info-bottom .bucket-content-holder {
        padding: 4px 25px;
    }

/*-- small content --*/
.directory-expand-data.small-content .directory-profile {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "item-name"
        "item-image"
        "item-details"
        "item-office-contact";
    gap: 5px;
}

    .directory-expand-data.small-content .directory-profile .directory-profile-headshot {
        grid-area: item-image;
        grid-row: span 1;
    }

    .directory-expand-data.small-content .directory-profile .directory-item-name {
        grid-area: item-name;
        padding-left: 20px;
        padding-right: 20px;
    }

    .directory-expand-data.small-content .directory-profile .directory-profile-details {
        grid-area: item-details;
    }

    .directory-expand-data.small-content .directory-profile .item-office-contact {
        grid-area: item-office-contact;
    }

        .directory-expand-data.small-content .directory-profile .item-office-contact p {
            flex-basis: 96%;
            min-width: unset;
            padding-left: unset;
        }

/*-- directory listing filter options --*/

.directory-listing .directory-search-tools .filter-letter {
    border-top: solid 1px var(--border-gray);
    border-bottom: solid 1px var(--border-gray);
    padding: 8px 0px;
}

    .directory-listing .directory-search-tools .filter-letter .filter-label {
        font-weight: bold;
        font-size: var(--font-size-reduced);
        margin: 0px;
        padding: 0px;
    }

    .directory-listing .directory-search-tools .filter-letter ul {
        margin: 0px;
        margin: auto;
        padding: 0px;
        list-style-type: none;
        display: flex;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .directory-listing .directory-search-tools .filter-letter li {
        flex-basis: 40px;
    }

        .directory-listing .directory-search-tools .filter-letter li button {
            min-width: 34px;
            margin: auto;
            background-color: var(--cloud);
            color: var(--cloud-text);
            border-radius: var(--border-radius-small);
            border: solid 1px var(--warm-gray);
            height: 34px;
            padding: 8px;
            cursor: pointer;
        }

            .directory-listing .directory-search-tools .filter-letter li button:hover, .directory-listing .directory-search-tools .filter-letter li button:focus {
                background-color: var(--orange-hover);
                color: var(--orange-hover-text);
            }

            .directory-listing .directory-search-tools .filter-letter li button.active {
                background-color: var(--secondary);
                color: var(--secondary-text);
            }

.directory-listing .directory-search-tools .filter-holder {
    border-bottom: solid 1px var(--border-gray);
    padding: 8px 0px;
    padding-bottom: 20px;
}

.directory-listing .directory-search-tools label {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

    .directory-listing .directory-search-tools label span:first-child {
        font-weight: bold;
        font-size: var(--font-size-reduced);
    }

    .directory-listing .directory-search-tools label select {
        width: 240px;
        padding: 6px;
        background-color: var(--primary-text);
        color: var(--primary);
    }

        .directory-listing .directory-search-tools label select option {
            overflow-wrap: break-word;
            margin-bottom: 4px;
            font-size: var(--font-size);
        }
/*-- small format ---*/

.directory-listing.medium-content .directory-search-tools,
.tablet .directory-listing .directory-search-tools,
.tablet-small .directory-listing .directory-search-tools,
.mobile .directory-listing .directory-search-tools,
.directory-listing.small-content .directory-search-tools {
    display: none;
}

    .directory-listing.medium-content .directory-search-tools.active,
    .tablet .directory-listing .directory-search-tools.active,
    .tablet-small .directory-listing .directory-search-tools.active,
    .mobile .directory-listing .directory-search-tools.active,
    .directory-listing.small-content .directory-search-tools.active {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        grid-area: unset;
    }

.directory-listing.medium-content .app-search,
.tablet .directory-listing .app-search,
.tablet-small .directory-listing .app-search,
.mobile .directory-listing .app-search,
.directory-listing.small-content .app-search {
    flex-basis: 99%;
}

.directory-listing.medium-content .search-count,
.tablet .directory-listing .search-count,
.tablet-small .directory-listing .search-count,
.mobile .directory-listing .search-count,
.directory-listing.small-content .search-count {
    flex-basis: 99%;
    text-align: center;
    font-size: var(--font-size-large);
}

.directory-listing.medium-content .directory-reset,
.tablet .directory-listing .directory-reset,
.tablet-small .directory-listing .directory-reset,
.mobile .directory-listing .directory-reset,
.directory-listing.small-content .directory-reset {
    flex-basis: 99%;
}

.directory-listing.medium-content .filter-letter,
.tablet .directory-listing .filter-letter,
.tablet-small .directory-listing .filter-letter,
.mobile .directory-listing .filter-letter,
.directory-listing.small-content .filter-letter {
    flex-basis: 99%;
}

.directory-listing.medium-content .filter-holder,
.tablet .directory-listing .filter-holder {
    flex-basis: 32%;
    min-width: 240px;
}

.tablet-small .directory-listing .filter-holder {
    flex-basis: 49%;
    min-width: unset;
}

.mobile .directory-listing .filter-holder,
.directory-listing.small-content .filter-holder {
    flex-basis: 99%;
    width: 100%;
}

    .directory-listing.medium-content .filter-holder select,
    .tablet .directory-listing .filter-holder select,
    .tablet-small .directory-listing .filter-holder select,
    .mobile .directory-listing .filter-holder,
    .directory-listing.small-content .filter-holder select {
        width: 100%;
    }

/*-- sort options --*/
p.sort-options {
    padding: 0px 18px;
    padding-left: 0px;
    margin: 0px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px;
}

    p.sort-options label span:first-child {
        font-size: var(--font-size-small);
        font-weight: bold;
        margin-right: 8px;
    }

    p.sort-options label select {
        padding: 6px;
        background-color: var(--primary-text);
        color: var(--primary);
        border-radius: var(--border-radius-small);
        min-width: 150px;
    }

        p.sort-options label select option {
            padding: 6px;
            background-color: var(--primary-text);
            color: var(--primary);
        }

/*-- DIRECTORY CONTACT --*/
.directory-contact .data-set-name.title,
.directory-contact .view-tabs {
    display: none !important;
}

.directory-contact .directory-item {
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
    flex-wrap: wrap;
}

.directory-contact .directory-details {
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
    flex-wrap: wrap;
}

    .directory-contact .directory-details .item-bg-crop {
        min-width: 250px;
        margin: 10px 0px;
    }

    .directory-contact .directory-details .item-headshot {
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        border-radius: 0px;
    }

.directory-contact .directory-details-box {
    border-radius: 0px;
    box-shadow: none;
    border: 0px;
}

.directory-contact .directory-details .directory-item-details-front {
    margin: 1%;
    position: relative;
    border-radius: 0px;
    padding-top: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    min-height: unset;
    gap: 0px;
    max-height: unset;
}

    .directory-contact .directory-details .directory-item-details-front p {
        display: none;
    }

        .directory-contact .directory-details .directory-item-details-front p.item-name,
        .directory-contact .directory-details .directory-item-details-front p.item-role,
        .directory-contact .directory-details .directory-item-details-front p.item-location,
        .directory-contact .directory-details .directory-item-details-front p.item-email,
        .directory-contact .directory-details .directory-item-details-front p.item-phone {
            display: grid;
            margin: 0px;
            padding: 3px;
            padding-left: 35px;
        }
/*-----------------------------------------------------------------------------------
        BLOG PREVIEW
    -------------------------------------------------------*/
.blog-preview-block {
    align-items: start;
    margin-bottom: 5px;
}

    .blog-preview-block .blog-dates, .blog-preview-block .author p {
        margin: 0px;
        padding: 6px;
        padding-left: 0px;
        font-size: var(--font-size-navigation-lower);
    }

    .blog-preview-block .author p {
        padding: .25em;
        padding-left: 0px;
        margin: 0px;
        line-height: .45em !important;
    }

.preview-link-holder a {
    text-decoration: none !important;
}

    .preview-link-holder a:hover, .preview-link-holder a:focus {
        text-decoration: underline 2px var(--orange) !important;
        text-underline-offset: 4px !important;
    }

.blog-dates .text-pub-date {
    display: none;
}

/*-- preview list --*/

.blog-preview-holder .blog-preview-data {
    /*  border-bottom: dashed 1px var(--border-gray);*/
    padding-bottom: 0.55em;
    margin-bottom: 0.55em;
}

    .blog-preview-holder .blog-preview-data:last-child {
        border-bottom: none;
    }

.preview-list .blog-preview-block {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px;
}

.preview-list .preview-img-holder {
    width: 80px;
    height: 80px;
}

    .preview-list .preview-img-holder.no-image {
        background-color: var(--slate);
    }

    .preview-list .preview-img-holder img {
        height: 80px;
        width: 80px;
        object-fit: cover;
        padding: 0px;
    }

.preview-list .preview-link-holder {
    height: min-content;
    line-height: normal;
}

    .preview-list .preview-link-holder > a {
        line-height: 1.4em;
    }

.preview-list .preview-text {
    display: none;
}

/*-- preview story --*/
.preview-story .blog-preview-block {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 10px;
    height: 200px;
}

.preview-story .blog-preview-data {
    border-bottom: solid 1px var(--orange);
    padding-top: 25px;
    padding-bottom: 25px;
    width: 90%;
    margin: auto;
}

    .preview-story .blog-preview-data:first-child {
        border-top: solid 1px var(--orange);
    }

.preview-story .preview-img-holder {
    width: 300px;
}

    .preview-story .preview-img-holder.no-image {
        height: 200px;
        background-color: var(--slate);
    }

    .preview-story .preview-img-holder img {
        height: 200px;
        width: 300px;
        object-fit: cover;
        margin: auto;
    }

.preview-story .preview-link-holder,
.preview-story .preview-text {
    display: grid;
    align-content: start;
}

    .preview-story .preview-link-holder a {
        font-size: var(--font-size-larger);
    }

.preview-story .preview-text {
    padding-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.preview-story .author {
    padding-top: 10px;
}


/*-- preview story column --*/
.preview-story-columns .blog-preview-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 200px;
    align-content: flex-start;
}

.full-content.preview-story-columns .blog-preview-data {
    flex-basis: 32%;
}

.large-content.preview-story-columns .blog-preview-data,
.preview-limit-3.preview-story-columns .blog-preview-data {
    flex-basis: 32%;
}

.medium-content.preview-story-columns .blog-preview-data,
.preview-limit-3.preview-story-columns .blog-preview-data {
    flex-basis: 48%;
}

.small-content.preview-story-columns .blog-preview-data,
.mobile .preview-story-columns .blog-preview-data {
    flex-basis: 98%;
}

.preview-story-columns .blog-preview-data .blog-preview-block {
    display: grid;
    grid-template-areas: "image title"
        "image date"
        "image text"
        "image author";
    grid-template-columns: 150px 1fr;
    gap: 10px;
}

.preview-story-columns .preview-img-holder {
    grid-area: image;
    width: 150px;
}

    .preview-story-columns .preview-img-holder.no-image {
        grid-area: image;
        width: 150px;
        height: 200px;
        background-color: var(--slate);
    }

    .preview-story-columns .preview-img-holder img {
        height: 200px;
        width: 150px;
        object-fit: cover;
    }

.preview-story-columns .preview-link-holder {
    grid-area: title;
}

.preview-story-columns .preview-text {
    grid-area: text;
}

.preview-story-columns .preview-link-holder,
.preview-story-columns .preview-text {
    display: grid;
    align-content: start;
}

    .preview-story-columns .preview-link-holder a {
        font-size: var(--font-size);
    }

.preview-story-columns .preview-text {
    padding-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.preview-story-columns .author {
    padding-top: 10px;
}

/*-- preview feature --*/

.preview-feature .blog-preview-holder {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.preview-feature .blog-preview-data {
    flex-basis: 24%;
}


.tablet .preview-feature .blog-preview-data {
    flex-basis: 32%;
}

.mobile .preview-feature .blog-preview-data,
.medium-content.preview-feature .blog-preview-data {
    flex-basis: 48%;
}

.small-content.preview-feature .blog-preview-data,
.mobile .medium-content.preview-feature .blog-preview-data {
    flex-basis: 98%;
}


.blog-preview-feature-holder.snapshot {
    min-height: 200px;
    box-shadow: var(--box-shadow-less);
}

.blog-preview-feature-holder .snapshot-top {
    padding: 0px;
    justify-content: flex-start;
    height: 150px;
}

    .blog-preview-feature-holder .snapshot-top.no-image {
        background-color: var(--slate);
        height: 150px;
    }

    .blog-preview-feature-holder .snapshot-top img {
        object-fit: cover;
        height: 150px;
        border-top-left-radius: var(--border-radius-small);
        border-top-right-radius: var(--border-radius-small);
    }

.blog-preview-feature-holder .snapshot-bottom {
    height: 200px;
}

.blog-preview-feature-holder .preview-link-holder a {
    font-size: var(--font-size-large);
    line-height: var(--font-size-extra-large);
    color: var(--medium-blue) !important;
}


.blog-preview-feature-holder .preview-text {
    padding-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-preview-feature-holder .blog-dates,
.blog-preview-feature-holder .blog-dates *,
.blog-preview-feature-holder .author,
.blog-preview-feature-holder .author p {
    margin: 0px;
    padding: 0px;
    padding-top: 4px;
    font-size: var(--font-size-navigation-lower);
}

/*-- preview news --*/

.preview-news .blog-preview-holder {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.full-content.preview-news .blog-preview-data {
    flex-basis: 24%;
}

.large-content.preview-news .blog-preview-data,
.preview-news.preview-limit-3 .blog-preview-data {
    flex-basis: 32%;
}

.medium-content.preview-news .blog-preview-data,
.preview-news.preview-limit-2 .blog-preview-data {
    flex-basis: 48%;
}

.small-content.preview-news .blog-preview-data,
.mobile .preview-news .blog-preview-data {
    flex-basis: 98%;
}


.preview-news .blog-preview-data .preview-img-holder {
    height: 150px;
    margin-bottom: 10px;
}

    .preview-news .blog-preview-data .preview-img-holder.no-image {
        background-color: var(--my-gray);
        height: 150px;
    }

    .preview-news .blog-preview-data .preview-img-holder img {
        display: block;
        width: auto;
        margin: auto;
        height: 150px;
    }

.preview-news.img-crop .blog-preview-data .preview-img-holder img {
    object-fit: contain;
    width: 100%;
    padding: 0px;
    max-height: 150px;
}

.preview-news .blog-preview-data .blog-preview-item-data .preview-text {
    font-size: var(--font-size-reduced);
}


/*-- preview top --*/
.preview-top .blog-preview-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.preview-top .preview-img-holder.no-image {
    background-color: var(--slate);
    height: 100px;
}

.preview-top .preview-img-holder img {
    max-height: 100px;
    object-fit: cover;
    width: 100%;
    padding: 0px;
}

.preview-top .blog-preview-data:first-child .preview-img-holder {
    height: 300px;
}

    .preview-top .blog-preview-data:first-child .preview-img-holder img {
        max-height: 300px;
        object-fit: cover;
        width: 100%;
    }

.preview-top .blog-preview-item-data {
    padding-top: 15px;
}

.preview-top .preview-link-holder a {
    font-size: var(--font-size-large);
    padding-top: 10px;
}


.preview-top .blog-preview-data {
    flex-basis: 32%;
}

    .preview-top .blog-preview-data .preview-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .preview-top .blog-preview-data:first-child {
        flex-basis: 98%;
        margin-bottom: 30px;
        padding-bottom: 30px;
        border-bottom: solid 1px var(--border-gray);
    }

/*-- preview left --*/

.preview-left .blog-preview-holder {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.preview-left .blog-preview-data:first-child {
    grid-column: span 2;
}

    .preview-left .blog-preview-data:first-child .preview-img-holder img {
        object-fit: cover;
        width: 100%;
        padding: 0px;
        max-height: 170px;
    }

.preview-left .blog-preview-data .preview-img-holder img {
    object-fit: cover;
    width: 100%;
    padding: 0px;
    max-height: 170px;
}

.preview-left .blog-preview-data .preview-img-holder {
    max-height: 170px;
    margin-bottom: 10px;
}

    .preview-left .blog-preview-data .preview-img-holder.no-image {
        height: 170px;
        background-color: var(--slate);
    }

.preview-left .blog-preview-data .preview-link-holder a {
    font-size: var(--font-size-large);
}

.preview-left .blog-preview-data .preview-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/*-- preview left big --*/

.preview-left-big .blog-preview-holder {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.medium-content.preview-left-big .blog-preview-holder {
    grid-template-columns: 1fr 1fr 1fr;
}

.small-content.preview-left-big .blog-preview-holder,
.mobile .preview-left-big .blog-preview-holder {
    grid-template-columns: 1fr;
}

.preview-left-big .blog-preview-data:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.medium-content.preview-left-big .blog-preview-data:first-child {
    grid-column: span 2;
    grid-row: span 1;
}

.small-content.preview-left-big .blog-preview-data:first-child,
.mobile .preview-left-big .blog-preview-data:first-child {
    grid-column: span 1;
    grid-row: span 1;
}

.preview-left-big .blog-preview-data:first-child .preview-img-holder img {
    object-fit: cover;
    width: 100%;
    padding: 0px;
    max-height: unset;
}

.preview-left-big .blog-preview-data .preview-img-holder img {
    object-fit: cover;
    width: 100%;
    padding: 0px;
    max-height: 170px;
}

.preview-left-big .blog-preview-data:first-child .preview-img-holder {
    max-height: unset;
    margin-bottom: 10px;
}

.preview-left-big .blog-preview-data .preview-img-holder {
    max-height: 170px;
    margin-bottom: 10px;
}

.preview-left-big .blog-preview-data:first-child .preview-img-holder.no-image {
    min-height: 350px;
    margin-bottom: 10px;
}

.medium-content.preview-left-big .blog-preview-data:first-child .preview-img-holder.no-image,
.small-content.preview-left-big .blog-preview-data:first-child .preview-img-holder.no-image {
    min-height: 170px;
    margin-bottom: 10px;
}

.small-content.preview-left-big .blog-preview-data .preview-img-holder img,
.small-content.preview-left-big .blog-preview-data .preview-img-holder,
.mobile .preview-left-big .blog-preview-data .preview-img-holder img,
.mobile .preview-left-big .blog-preview-data .preview-img-holder {
    max-height: unset;
}

.preview-left-big .blog-preview-data .preview-img-holder.no-image {
    height: 170px;
    background-color: var(--slate);
}

.preview-left-big .blog-preview-data .preview-link-holder a {
    font-size: var(--font-size-large);
}

.preview-left-big .blog-preview-data .preview-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*-- preview right --*/

.preview-right .blog-preview-holder {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.preview-right .blog-preview-data:nth-child(3) {
    grid-column: span 2;
}

    .preview-right .blog-preview-data:nth-child(3) .preview-img-holder img {
        object-fit: cover;
        width: 100%;
        padding: 0px;
        max-height: 170px;
    }

    .preview-right .blog-preview-data:nth-child(3) .preview-img-holder {
        max-height: 170px;
        height: unset;
    }


.preview-right .blog-preview-data .preview-img-holder {
    height: 170px;
    margin-bottom: 10px;
}

    .preview-right .blog-preview-data .preview-img-holder img {
        object-fit: cover;
        width: 100%;
        padding: 0px;
        max-height: 170px;
    }

    .preview-right .blog-preview-data .preview-img-holder.no-image {
        height: 170px;
        background-color: var(--slate);
    }

.preview-right .blog-preview-data .preview-link-holder a {
    font-size: var(--font-size-large);
}

.preview-right .blog-preview-data .preview-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*-- preview random --*/

.preview-random .blog-preview-data.hidden {
    display: none;
}

.preview-random .blog-preview-data.active {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: center;
}

.preview-random .preview-img-holder img {
    object-fit: cover;
    width: 100%;
    max-height: 200px;
}

.preview-random .blog-preview-data.active .preview-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



/*-- preview dates --*/

.preview-dates .preview-img-holder, .preview-dates .preview-text,
.preview-dates .author {
    display: none;
}

.preview-dates .preview-link-holder {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    align-items: center;
}

    .preview-dates .preview-link-holder a {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

.preview-dates .blog-dates {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin: 0;
    padding: 0;
}

.preview-dates .pub-date {
    display: none;
}

.preview-dates .text-pub-date {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    display: grid;
    grid-template-columns: 1fr;
    font-size: var(--font-size-navigation-lower);
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 0;
}

    .preview-dates .text-pub-date span:nth-child(2) {
        font-size: var(--font-size);
        font-weight: 700;
    }

    .preview-dates .text-pub-date span:nth-child(3) {
        display: none;
    }

/*-- preview links --*/
.preview-links .preview-img-holder, .preview-links .preview-text,
.preview-links .author {
    display: none;
}

/*-- limit posts previews --*/
[class*="preview-"] .blog-preview-holder .blog-preview-data:nth-child(n+11) {
    display: grid;
}

[class*="preview-"].preview-limit-1 .blog-preview-holder .blog-preview-data:nth-child(n+2),
[class*="preview-"].preview-limit-2 .blog-preview-holder .blog-preview-data:nth-child(n+3),
[class*="preview-"].preview-limit-3 .blog-preview-holder .blog-preview-data:nth-child(n+4),
[class*="preview-"].preview-limit-4 .blog-preview-holder .blog-preview-data:nth-child(n+5),
[class*="preview-"].preview-limit-5 .blog-preview-holder .blog-preview-data:nth-child(n+6),
[class*="preview-"].preview-limit-6 .blog-preview-holder .blog-preview-data:nth-child(n+7),
[class*="preview-"].preview-limit-7 .blog-preview-holder .blog-preview-data:nth-child(n+8),
[class*="preview-"].preview-limit-8 .blog-preview-holder .blog-preview-data:nth-child(n+9),
[class*="preview-"].preview-limit-9 .blog-preview-holder .blog-preview-data:nth-child(n+10) {
    display: none;
}

/*-----------------------------------------------------------------------------------
        BLOG
    -------------------------------------------------------*/

.blog-data-holder {
    display: grid;
    grid-template-columns: 3fr minmax(250px, 1fr);
    gap: 15px;
}

.no-filter .blog-data-holder {
    grid-template-columns: 1fr;
}

.no-filter .blog-data-filter {
    display: none;
}

.blog-data-filter {
    position: sticky;
    height: min-content;
    top: 5px;
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    padding: 4px;
    border-radius: var(--border-radius-chamfer);
    border: solid 1px var(--my-gray-border-alt);
}

.blog-toolbar.expand {
    display: none;
}

.blog-toolbar.expand {
    opacity: 0;
    display: grid;
    height: auto;
    grid-template-columns: 1fr;
    padding-bottom: 5px;
    margin-bottom: 5px;
    animation: fade-in;
    animation-duration: var(--animation-time);
    animation-fill-mode: forwards;
    border-bottom: dotted 2px var(--my-gray-border-alt);
}

.blog-data-holder.active .blog-toolbar.expand {
    opacity: 1;
}

.blog-toolbar p {
    margin: 0px;
    width: auto;
    font-size: var(--font-size-reduced) !important;
}

.blog-toolbar .show-blog-spacer {
    display: none;
}

.blog-toolbar label {
    margin-right: 6px;
}

    .blog-toolbar label span:first-child {
        width: 42px;
        display: inline-block
    }

    .blog-toolbar label select {
        width: 55px;
        display: inline-block;
        padding: 3px;
        border: solid 1px var(--dark);
        border-radius: var(--border-radius-chamfer);
    }

    .blog-toolbar label option {
        text-align: center;
    }

.blog-toolbar .blog-page-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

    .blog-toolbar .blog-page-nav * {
        flex-basis: auto;
        font-size: var(--font-size-reduced) !important;
    }

.blog-search {
    border: solid 0px var(--border-gray);
    padding: 15px;
    margin-bottom: 0px;
    display: grid;
}

    .blog-search label {
        position: relative;
    }

.blog-search-label {
    font-size: var(--font-size-reduced);
    /*  color: var(--primary);*/
    display: block;
    padding-bottom: 5px;
}

.blog-search input {
    font-size: var(--font-size);
    padding: 4px;
    padding-right: 44px;
    border-radius: var(--border-radius-small);
    width: 100%;
    min-height: 40px;
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid 1px var(--dark);
}

.blog-search button {
    position: absolute;
    bottom: 3px;
    right: 5px;
    border: solid 1px transparent;
    background-color: var(--primary);
    color: var(--primary-text);
    cursor: pointer;
    border-radius: 44px;
    height: 34px;
    width: 34px;
}

    .blog-search button:hover {
        border: solid 1px var(--orange);
        background-color: var(--primary-text);
        color: var(--primary);
    }

    .blog-search button:focus {
        outline: solid 2px var(--orange);
        outline-offset: var(--outline-offset);
    }

.blog-search-count, .blog-search-count * {
    font-size: var(--font-size-reduced);
    text-align: right;
    margin: 0;
    padding: 4px;
    /* color: var(--primary);*/
}

.blog-filter-reset {
    text-align: right;
    margin-bottom: 10px;
}

.blog-choices {
    border: 0px;
    background-color: inherit;
    color: inherit;
}

    .blog-choices details > ul {
        list-style: none;
        margin: 0;
        padding: 5px 0px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

.one-column .blog-choices details > ul,
.col-1 .blog-choices details > ul {
    grid-template-columns: 1fr;
}

.blog-choices li {
    margin: 0;
    padding: 0px 10px;
    font-size: var(--font-size-reduced);
}

.blog-choices .filter-value label {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .5em;
    align-items: start;
    font-size: .85rem;
    line-height: 1rem;
    text-transform: capitalize;
    width: max-content;
    /*  align-items:start;*/
}

.blog-choices details, .blog-choices details[open] {
    border: 0px;
    background-color: unset;
    color: unset;
    border: 0px;
    padding-bottom: 8px;
    border-bottom: dotted 2px var(--my-gray-border-alt);
}

.blog-choices:last-child details {
    border-bottom: 0px;
}

.blog-choices details summary {
    display: grid;
    grid-template-columns: 1fr 35px 35px !important;
    min-height: unset !important;
    gap: 10px;
    align-items: center;
    background-color: inherit;
    color: inherit;
    font-weight: 500;
    padding: 8px;
}

.blog-choices details[open] summary span {
    font-weight: 400;
    padding: 2px;
}

.blog-choices details summary {
    color: var(--secondary);
}

.blog-choices details[open] summary {
    padding: 8px;
    padding-bottom: 1px;
}


/*-- BLOG DATA --*/

.blog-data {
    display: inline-block;
    border: solid 1px var(--border-gray);
    padding: 0px;
    background-color: var(--my-white);
    color: var(--my-white-text);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow-less);
    width: 100%;
    position: relative;
}

    .blog-data.blog-hide,
    .blog-data.no-match {
        display: none !important;
    }

.div-blog-header {
    position: relative;
    display: block;
    height: 200px;
}

    .div-blog-header img {
        object-fit: cover;
        width: 100%;
        height: 200px;
        padding: 0px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }

.blog-data .blog-direct-link {
    display: grid;
    grid-template-areas: "clipboard-notice link";
    gap: 8px;
    min-height: 44px;
    z-index: 5;
    padding-right: 15px;
    position: absolute;
    right: 5px;
    top: 8px;
}

.blog-direct-link p.notice-success.copy-msg-active {
    opacity: 1;
    transition: opacity var(--transition-time-slow)ease-in;
    grid-area: clipboard-notice;
    display: grid;
    align-items: center;
    font-size: var(--font-size-small-disclaimer) !important;
    padding: 1px 8px !important;
    padding-left: 30px !important;
    height: 30px;
}

.blog-direct-link-button, .blog-data.active .blog-direct-link button {
    position: relative;
}

.blog-direct-link button {
    background-color: var(--accent-2) !important;
    color: var(--accent-2-text) !important;
    border: solid 1px var(--accent-2-border-alt);
    border-radius: var(--border-radius-big-pill);
    padding: 6px !important;
    font-size: var(--font-size-small-title);
    margin-top: 4px;
    height: 30px;
}


    .blog-direct-link button *,
    .blog-direct-link button:hover *,
    .blog-direct-link button:focus * {
        background-color: inherit !important;
        color: inherit !important;
    }


    .blog-direct-link button:hover,
    .blog-direct-link button:focus {
        background-color: var(--accent-2-text) !important;
        color: var(--accent-2) !important;
    }

.blog-direct-link-button:after {
    content: "";
    position: absolute;
    bottom: -2px;
    width: 0px;
    height: 4px;
    left: 50%;
    background-color: transparent;
}

.blog-data .blog-header-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.blog-data .div-blog-header .block-main-title {
    color: var(--my-white);
    background: var(--background-overlay);
    text-shadow: var(--text-shadow);
    z-index: 5;
    flex-basis: 100%;
    padding: .85em !important;
    padding-bottom: .35em !important;
}

.div-blog-header .blog-header-text-group {
    position: relative;
    padding-top: 60px;
}

    .div-blog-header .blog-header-text-group:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--box-shade-background);
        background: var(--background-gradient-bottom-up);
        z-index: 3;
    }

.div-blog-header .blog-dates {
    color: var(--my-white);
    background: var(--background-overlay);
    text-shadow: var(--text-shadow);
    z-index: 4;
    position: relative;
    display: block;
    font-size: var(--font-size);
    font-weight: bold;
}

.blog-data p:not(.accordion-title):not(.block-main-title) {
    padding: .4rem 2rem;
    margin: 0px;
}


.blog-data p[class*='notice-']:not(.accordion-title):not(.block-main-title) {
    padding: .5rem 4rem;
    margin: .5em auto;
}

.blog-data .blog-author:not(.accordion-title) {
    margin: 0px;
    padding: 14px 0px 0px 20px;
    font-size: var(--font-size-reduced);
    font-weight: 400;
}


.blog-data p.has-image {
    /* float: left;*/
    padding: 20px;
    width: auto;
}

.blog-data button.btn-blog-target {
    height: 1px;
    width: 1px;
    border: 0px;
    position: absolute;
    top: -35px;
    left: 0;
    visibility: hidden;
    pointer-events: none;
}

.blog-data ul, .blog-data ol {
    margin: 0px;
    padding-left: 4rem;
    padding-right: 3rem;
    padding-top: 1rem;
}

    .blog-data ul li ul, .blog-data ol li ol {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

.blog-data li {
    line-height: 1.6rem;
    margin-bottom: .4rem;
}

.blog-data .block-main-title {
    color: var(--my-white);
    background: var(--background-overlay);
    font-size: var(--font-size-larger);
    font-weight: 700;
    margin-left: 0rem;
    padding-left: 2rem;
    margin-bottom: 0px;
    margin-top: 15px;
    padding-right: 180px;
    line-height: normal;
}

.blog-data .block-main-title {
    font-size: var(--font-size-extra-large);
    padding-bottom: 2px !important;
}

.blog-data .accordion-title {
    /*font-size: var(--font-size-extra-large);*/
    padding-left: .5rem;
    margin-left: 1rem;
    margin-bottom: 4px;
    width: calc(100% - 1rem);
}

.blog-data table {
    width: calc(100% - 30px);
    margin: auto;
    margin-top: 5px;
    margin-bottom: 15px;
}

.blog-dates {
    font-size: var(--font-size-reduced);
    margin-left: 0rem;
    padding-left: 2rem;
    margin-bottom: 1.2rem;
}

.no-first-block-main-title > p.block-main-title {
    display: none;
}

/*-- blog tablet --*/

.tablet .blog-data p.accordion-title,
.tablet .blog-data .blog-dates {
    padding: 14px;
    margin: 0;
}

.tablet .blog-data p:not(.accordion-title):not([class*='notice']) {
    padding: 5px;
}

.tablet .blog-data ol, .tablet .blog-data ul {
    padding: 15px;
    padding-left: 40px;
}
/*-- blog mobile --*/

.tablet-small .blog-data-holder,
.mobile .blog-data-holder {
    grid-template-columns: unset;
    grid-template-areas:
        "filter"
        "data";
}

.tablet-small .blog-data-story,
.mobile .blog-data-story {
    grid-area: data;
}

.tablet-small .blog-data-filter
.mobile .blog-data-filter {
    grid-area: filter;
    position: relative;
}

.tablet-small .blog-data-filter .filter-search-results-reset-box,
.mobile .blog-data-filter .filter-search-results-reset-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-content: space-evenly;
}

.tablet-small .blog-filter-reset, .tablet-small .blog-mobile-filter,
.mobile .blog-filter-reset, .mobile .blog-mobile-filter {
    margin: auto;
    text-align: center;
}

.tablet-small .blog-choices,
.mobile .blog-choices {
    display: none;
}

.tablet-small .active .blog-choices,
.mobile .active .blog-choices {
    display: grid;
}

.tablet-small .blog-data p.accordion-title,
.mobile .blog-data p.accordion-title,
.tablet-small .blog-data .blog-dates,
.mobile .blog-data .blog-dates {
    padding: 14px;
    margin: 0;
}

.tablet-small .blog-data p:not(.accordion-title),
.mobile .blog-data p:not(.accordion-title) {
    padding: 15px;
}

.tablet-small .blog-data ol, .tablet-small .blog-data ul,
.mobile .blog-data ol, .mobile .blog-data ul {
    padding: 15px;
    padding-left: 40px;
}


/*-- NO BLOG HEADER IMAGE --*/

.blog-data.no-header-img .block-main-title {
    background: inherit;
    color: inherit;
}

/*-- NO BLOG DATES --*/

.no-dates .blog-data .div-blog-header .blog-dates {
    display: none;
}

.no-dates .blog-data .div-blog-header .block-main-title {
    padding-bottom: .5em !important;
}

/*--- BLOG DETAIS / SUMMARY --*/
.blog-data-details {
    border-color: var(--border-gray);
}

    .blog-data-details summary, .blog-data-details {
        background-color: var(--my-white);
        color: var(--secondary);
    }

.dark-mode .blog-data-details summary, .dark-mode .blog-data-details {
    background-color: var(--my-white-dark);
    color: var(--secondary-dark);
}

.blog-data-details summary {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
}

.blog-summary-open-close:before {
    content: "\f0fe";
    font-family: "font awesome 6 pro";
    font-size: 1.5em;
    border: solid 1px var(--my-black);
    background-color: var(--primary);
    color: var(--primary-text);
    padding: 0px 2px;
    border-radius: var(--border-radius-small);
}

details[open].blog-data-details .blog-summary-open-close:before {
    content: "\f146";
    font-family: "font awesome 6 pro";
    font-size: 1.5em;
}

details[open] .blog-summary-open-close:before {
    content: "\f146";
    font-family: "font awesome 6 pro";
    font-size: 1.5em;
}

details[open].blog-data-details summary {
    border-bottom: solid 4px var(--orange);
    background-color: var(--light-gray);
    color: var(--light-gray-text);
    margin-bottom: 0px;
}

.dark-mode details[open].blog-data-details summary {
    border-bottom: solid 4px var(--orange-dark);
    background-color: var(--dark-gray);
    color: var(--dark-gray-text);
}


.blog-summary-info {
    display: grid;
    grid-template-columns: 1fr;
}

    .blog-summary-info > * {
        padding-bottom: 4px;
    }

.summary-dataset-name, .summary-published {
    font-size: var(--font-size-small);
    font-weight: 300;
}

.summary-author {
    font-size: var(--font-size-reduced);
    font-weight: 500;
}

.summary-title {
    font-size: var(--font-size-larger);
}

.blog-data-details .blog-data {
    border: 0px;
}

.has-header-img .blog-main-content .block-main-title:first-child {
    display: none;
}

details.blog-data-details .has-header-img .div-blog-header .block-main-title,
details.blog-data-details .has-header-img .div-blog-header .blog-dates,
details.blog-data-details .has-header-img .div-blog-header:before,
details.blog-data-details .blog-main-content .blog-dates,
details.blog-data-details .blog-main-content .block-main-title:first-child,
details.blog-data-details .data-content .blog-author {
    display: none;
}

details.blog-data-details .summary-img {
    display: none;
}

details.blog-data-details .blog-data {
    box-shadow: none;
    padding-top: 50px;
}

    details.blog-data-details .blog-data.has-header-img {
        padding-top: 0px;
    }

.blog-data .vertical-tabs {
    display: grid;
    grid-template-columns: 1fr 3fr;
    padding: 10px;
    padding-bottom: 20px;
    gap: 0px;
}

    .blog-data .vertical-tabs .tabbed-content-buttons-section {
        width: 100% !important;
    }

        .blog-data .vertical-tabs .tabbed-content-buttons-section button {
            width: 100%;
            text-align: left;
            font-size: var(--font-size-reduced);
        }

    .blog-data .vertical-tabs details {
        width: 100%;
    }

.small-content .blog-data .vertical-tabs,
.tablet-small .blog-data .vertical-tabs,
.mobile .blog-data .vertical-tabs {
    display: block;
}

    .small-content .blog-data .vertical-tabs .tabbed-content-buttons-section,
    .tablet-small .blog-data .vertical-tabs .tabbed-content-buttons-section,
    .mobile .blog-data .vertical-tabs .tabbed-content-buttons-section {
        display: none;
    }


.small-content .blog-data .blog-main-content details,
.tablet-small .blog-data .blog-main-content details,
.mobile .blog-data .blog-main-content details {
    padding-top: 0px !important;
    padding-bottom: 0px;
    margin-bottom: 10px !important;
    display: block;
}

    .small-content .blog-data .blog-main-content details summary,
    .tablet-small .blog-data .blog-main-content details summary,
    .mobile .blog-data .blog-main-content details summary {
        min-height: unset;
    }

/*-------------
    blog styles
*/

/*-- TOP SHELF --*/
.blog-detail-top-shelf .blog-data-story {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.blog-detail-top-shelf details:first-child,
.blog-detail-top-shelf details[open] {
    grid-column: span 3;
}

.blog-detail-top-shelf .blog-data {
    box-shadow: none;
}


.blog-detail-top-shelf .blog-data-story.two-column,
.tablet .blog-detail-top-shelf .blog-data-story,
.medium-content .blog-detail-top-shelf .blog-data-story {
    grid-template-columns: 1fr 1fr;
}

    .blog-detail-top-shelf .blog-data-story.two-column details:first-child,
    .blog-detail-top-shelf .blog-data-story.two-column details[open],
    .tablet .blog-detail-top-shelf details[open],
    .medium-content .blog-detail-top-shelf details[open] {
        grid-column: span 2;
    }

.blog-detail-top-shelf .blog-data-story.one-column,
.mobile .blog-detail-top-shelf .blog-data-story,
.small-content .blog-detail-top-shelf .blog-data-story {
    grid-template-columns: 1fr;
}

    .blog-detail-top-shelf .blog-data-story.one-column details:first-child,
    .blog-detail-top-shelf .blog-data-story.one-column details[open],
    .mobile .blog-detail-top-shelf details[open],
    .small-content .blog-detail-top-shelf details[open] {
        grid-column: span 1;
    }

/*-- LIST --*/
.blog-detail-list .blog-data-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row: auto;
    align-content: start;
    gap: 5px;
}

.blog-detail-list details:first-child,
.blog-detail-list details[open] {
    grid-column: span 2;
}

.blog-detail-list details:not([open]), .blog-detail-list details:not([open]) * {
    background-color: inherit;
    color: inherit;
    border: 0px;
}

.blog-detail-list .blog-data {
    box-shadow: none;
}

.blog-detail-list details summary {
    padding: 3px 8px;
}

    .blog-detail-list details summary .blog-summary-info .blog-summary-open-close:before {
        font-size: var(--font-size-reduced);
    }

    .blog-detail-list details summary .blog-summary-info * {
        display: none;
    }

    .blog-detail-list details summary .blog-summary-info .summary-title,
    .blog-detail-list details summary .blog-summary-info .summary-title * {
        display: grid;
        font-size: var(--font-size);
    }

.blog-detail-list details[open] summary {
    padding: 8px;
}

    .blog-detail-list details[open] summary .blog-summary-info .summary-title {
        display: grid;
        font-size: var(--font-size-large);
    }

    .blog-detail-list details[open] summary .blog-summary-info .summary-published {
        display: grid;
        font-size: var(--font-size-reduced);
    }


.tablet .blog-detail-list .blog-data-story,
.medium-content .blog-detail-list .blog-data-story {
    grid-template-columns: 1fr 1fr;
}

.tablet .blog-detail-list details[open],
.medium-content .blog-detail-list details[open] {
    grid-column: span 2;
}

.blog-detail-list .blog-data-story.one-column details:first-child,
.mobile .blog-detail-list details:first-child,
.small-content .blog-detail-list details:first-child {
    grid-column: span 1;
}

.blog-detail-list .blog-data-story.one-column,
.mobile .blog-detail-list .blog-data-story,
.small-content .blog-detail-list .blog-data-story {
    grid-template-columns: 1fr;
}

    .blog-detail-list .blog-data-story.one-column details[open],
    .mobile .blog-detail-list details[open],
    .small-content .blog-detail-list details[open] {
        grid-column: span 1;
    }

/*-- POSTER --*/
.blog-detail-posters details:not(.categories):not(.tags) summary, .blog-detail-posters details[open]:not(.categories):not(.tags) summary {
    position: relative;
    padding: 8px;
    background-color: var(--primary);
}

.dark-mode .blog-detail-posters details:not(.categories):not(.tags) summary, .dark-mode .blog-detail-posters details[open]:not(.categories):not(.tags) summary {
    background-color: var(--primary-dark);
}

.blog-detail-posters details:not([open]) summary {
    min-height: 400px;
    grid-template-columns: 1fr;
}

.blog-detail-posters details:not(.categories):not(.tags) summary *:not(img) {
    z-index: 4;
    color: var(--my-white);
}

.blog-detail-posters details:not([open]) .blog-summary-open-close {
    height: 44px;
    width: 44px;
    display: grid;
    align-content: center;
    justify-content: center;
}

    .blog-detail-posters details:not([open]) .blog-summary-open-close:hover:before {
        box-shadow: var(--box-shadow-down);
        background-color: var(--primary-text);
        color: var(--primary);
    }

.blog-detail-posters details:not([open]) .summary-img {
    display: grid;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
}

.blog-detail-posters details:not([open]) summary:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: var(--box-shade-background);*/
    z-index: 3;
}

.blog-detail-posters details:not([open]) .blog-summary-info {
    margin-top: auto;
    background-color: var(--box-shade-background-most);
    padding: 8px;
}

.blog-detail-posters .blog-data-story {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
}

.blog-detail-posters details[open] {
    grid-column: span 3;
}

.blog-detail-posters .blog-data-story.two-column,
.tablet .blog-detail-posters .blog-data-story,
.medium-content .blog-detail-posters .blog-data-story {
    grid-template-columns: 1fr 1fr;
}

    .blog-detail-posters .blog-data-story.two-column details[open],
    .tablet .blog-detail-posters details[open],
    .medium-content .blog-detail-posters details[open] {
        grid-column: span 2;
    }

.blog-detail-posters .blog-data-story.one-column,
.mobile .blog-detail-posters .blog-data-story,
.small-content .blog-detail-posters .blog-data-story {
    grid-template-columns: 1fr;
}

    .blog-detail-posters .blog-data-story.one-column details[open],
    .mobile .blog-detail-posters details[open],
    .small-content .blog-detail-posters details[open] {
        grid-column: span 1;
    }
/*-------------------
    BLOG PROGRAM
*/

.blog-program-shell {
    margin: 0px;
    border-radius: var(--border-radius);
    border: solid 1px var(--border-gray);
    padding: 0px;
}

.blog-program .search-tools {
    padding: 6px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    margin: 6px;
}

    .blog-program .search-tools .blog-p-search {
        flex-basis: 40%;
        min-width: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .blog-program .search-tools .blog-p-search label {
            width: 100%;
            margin: auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            position: relative;
        }

            .blog-program .search-tools .blog-p-search label span {
                font-size: var(--font-size-portal-small);
                width: 100%;
            }

            .blog-program .search-tools .blog-p-search label input {
                flex-basis: 100%;
                font-size: var(--font-size-medium);
                background-color: var(--my-white);
                color: var(--primary);
                box-shadow: var(--box-shadow-down);
                border-radius: var(--border-radius);
                padding: 12px;
                padding-right: 50px;
                width: 100%;
            }

            .blog-program .search-tools .blog-p-search label button {
                height: 35px;
                width: 35px;
                font-size: var(--font-size-medium);
                background-color: var(--my-white);
                color: var(--primary);
                border-radius: var(--border-radius-circle);
                border: 0;
                display: grid;
                align-content: center;
                justify-content: center;
                position: absolute;
                z-index: 50;
                right: 5px;
                bottom: 3px;
                cursor: pointer;
            }

                .blog-program .search-tools .blog-p-search label button:hover,
                .blog-program .search-tools .blog-p-search label button:focus {
                    background-color: var(--primary);
                    color: var(--primary-text);
                }

.blog-program .collections-category-tag-group {
    flex-basis: 58%;
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: space-evenly
}

.blog-program .search-option {
    flex-basis: auto;
    display: flex;
    align-items: center;
    min-width: fit-content;
    justify-content: center;
}

    .blog-program .search-option button {
        padding: 8px 20px;
        border: solid 1px var(--border-gray);
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        font-size: var(--font-size-small);
        border-radius: var(--border-radius);
        cursor: pointer;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0px;
        align-items: center;
        min-height: 60px;
    }

        .blog-program .search-option button.active {
            background-color: var(--orange-hover);
            color: var(--orange-hover-text);
        }

        .blog-program .search-option button:hover,
        .blog-program .search-option button:focus {
            background-color: var(--secondary);
            color: var(--secondary-text);
        }

.blog-program .blog-filter-tools {
    display: none;
}

    .blog-program .blog-filter-tools.active {
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
        padding: 5px 15px;
        margin: auto;
        justify-content: center;
    }

.blog-program .search-option .total-count {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    align-items: center;
    border: solid 1px var(--border-gray);
    background-color: var(--my-white);
    color: var(--my-white-text);
    font-size: var(--font-size-small);
    border-radius: var(--border-radius);
    margin-left: 12px;
    width: 40px;
    aspect-ratio: 1 / 1;
}

.blog-program .blog-filter-tools [class*='blog-filter-'] {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: start;
    align-content: start;
    background-color: var(--my-white);
    color: var(--my-white-text);
    border-radius: var(--border-radius);
    padding: 0px;
    border: solid 1px var(--border-gray);
}

.blog-program .blog-filter-tools.show-count-1 [class*='blog-filter-'] {
    flex-basis: 100%;
}

.blog-program .blog-filter-tools.show-count-2 [class*='blog-filter-'] {
    flex-basis: 48%;
}

.blog-program .blog-filter-tools.show-count-3 [class*='blog-filter-'] {
    flex-basis: 32%;
}

.blog-program .blog-filter-tools .blog-filter-collections,
.blog-program .blog-filter-tools .blog-filter-categories,
.blog-program .blog-filter-tools .blog-filter-tags {
    display: none;
}

    .blog-program .blog-filter-tools .blog-filter-collections.active,
    .blog-program .blog-filter-tools .blog-filter-categories.active,
    .blog-program .blog-filter-tools .blog-filter-tags.active {
        display: flex;
    }

.blog-program .blog-filter-tools .title {
    flex-basis: 100%;
    background-color: var(--secondary);
    color: var(--secondary-text);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    padding: 8px;
    margin: 0px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

    .blog-program .blog-filter-tools .title .closer {
        border: 0px;
        background-color: inherit;
        color: inherit;
        cursor: pointer;
    }

.blog-program .blog-filter-tools .filter-holder {
    display: flex;
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    justify-content: flex-start;
    align-content: space-between;
}

.blog-program .blog-filter-tools [class*='blog-filter-'] button:not(.closer) {
    margin: 3px;
    background-color: var(--neutral);
    color: var(--neutral-text);
    padding: 6px;
    padding-left: 35px;
    border-radius: var(--border-radius-chamfer);
    border: solid 1px var(--border-gray);
    cursor: pointer;
    min-height: 40px;
    position: relative;
    /* min-width: 135px; */
    text-align: left;
    justify-content: start;
}

.blog-program .blog-filter-tools.show-count-1 [class*='blog-filter-'] button:not(.closer) {
    flex-basis: content;
    min-width: 225px;
}

.blog-program .blog-filter-tools.show-count-2 [class*='blog-filter-'] button:not(.closer) {
    flex-basis: 48%;
}

.blog-program .blog-filter-tools.show-count-3 [class*='blog-filter-'] button:not(.closer) {
    flex-basis: 47%;
}

.blog-program .blog-filter-tools [class*='blog-filter-'] button:not(.closer):before {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 30px;
    display: grid;
    align-content: center;
    justify-content: center;
    font-size: var(--font-size);
    content: "\f0c8";
    font-family: var(--font-awesome-family);
}

.blog-program .blog-filter-tools [class*='blog-filter-'] button:hover,
.blog-program .blog-filter-tools [class*='blog-filter-'] button:focus {
    background-color: var(--primary);
    color: var(--primary-text);
}

.blog-program .blog-filter-tools [class*='blog-filter-'] button:not(.closer).active {
    background-color: var(--orange-hover);
    color: var(--orange-hover-text);
}

    .blog-program .blog-filter-tools [class*='blog-filter-'] button:not(.closer).active:before {
        content: "\f00c";
    }


.blog-program .blog-top-holder {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "blog-main-story blog-up-next"
        "blog-related-stories blog-related-stories";
    gap: 10px;
    padding: 8px 20px;
}

.blog-program .blog-data {
    background-color: inherit;
    color: inherit;
    border: 0px;
    box-shadow: none;
}

.blog-program .blog-main-story-holder {
    padding: 20px;
    display: grid;
    grid-template-areas: "blog-main-title blog-image"
        "blog-dataset blog-image"
        "blog-date blog-image";
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--border-radius);
    display: grid;
    height: 100%;
    align-content: center;
    margin-top: auto;
}

    .blog-program .blog-main-story-holder p {
        margin: 0px;
        padding: 0px;
    }

    .blog-program .blog-main-story-holder .blog-dataset-name {
        grid-area: blog-dataset;
        display: grid;
        align-content: start;
        border-top: solid 1px var(--border-gray);
    }


    .blog-program .blog-main-story-holder .blog-main-title {
        grid-area: blog-main-title;
        font-size: var(--font-size-large-fact-large);
        line-height: normal;
        display: grid;
        align-content: center;
        width: fit-content;
    }

    .blog-program .blog-main-story-holder .blog-story-date {
        grid-area: blog-date;
        display: grid;
        align-content: end;
    }

    .blog-program .blog-main-story-holder .blog-main-image {
        grid-area: blog-image;
    }

        .blog-program .blog-main-story-holder .blog-main-image img {
            border-radius: var(--border-radius);
        }

.blog-program .blog-area-title {
    font-weight: bold;
    font-size: var(--font-size-large);
    text-align: center;
    border-bottom: solid 1px var(--border-gray);
    padding: 8px;
}

.blog-program .recent-story {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 0px;
    border-bottom: dashed 1px var(--border-gray);
    margin-bottom: 5px;
    padding: 2px 6px;
}

    .blog-program .recent-story:last-child {
        border-bottom: 0px;
    }

    .blog-program .recent-story p {
        margin: 0px;
        padding: 0px;
        display: grid;
        grid-template-columns: 1fr;
    }

    .blog-program .recent-story .story-image {
        grid-row: span 2;
        padding: 6px;
        min-width: 100px;
    }

    .blog-program .recent-story .story-title {
        font-size: var(--font-size-medium);
        align-items: end;
    }


    .blog-program .recent-story .story-update {
        font-size: var(--font-size-portal-small);
        align-items: start;
    }

.blog-program .blog-collection-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: solid 4px var(--primary);
    padding: 8px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.blog-program .explore-bar {
    position: relative;
    width: 100%;
    padding: 8px;
    font-size: var(--font-size-large);
    text-align: center;
    flex-basis: 100%;
}

    .blog-program .explore-bar:before, .blog-program .explore-bar:after {
        content: " ";
        position: absolute;
        top: 50%;
        height: 8px;
        background-color: var(--primary);
        width: calc(50% - 250px);
        left: 10px;
    }

    .blog-program .explore-bar:after {
        left: unset;
        right: 10px;
    }
/*---------------------------------------------------
    GALLERIES
*/

.gallery-item-data.no-match {
    display: none !important;
}

.image-showcase .directory-item-details-front {
    min-height: 130px;
}

.image-showcase .item-headshow {
    min-height: 230px;
}

.gallery-editor .info-block-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}

    .gallery-editor .info-block-grid .grid-item {
        flex-basis: 32%;
    }

        .gallery-editor .info-block-grid .grid-item img {
            max-height: 280px;
            max-width: 300px;
            height: auto;
            width: auto;
        }

.gallery-editor .info-block-item {
    grid-template-areas: "Editor"
        "Meta" !important;
    grid-template-columns: unset !important;
}

.gallery-editor .edit-info-block-meta {
    grid-template-columns: 1fr 1fr;
    grid-area: unset;
}

.gallery-editor .small .edit-info-block-meta {
    grid-template-columns: 1fr;
    grid-area: unset;
}

.gallery-editor .edit-info-block-meta *[label*='hours'],
.gallery-editor .edit-info-block-meta *[label*='events'] {
    display: none;
}

/*-- gallery-snapshots --*/
.gallery-snapshot .snapshot-image {
    height: 200px;
    background-size: cover;
    border-radius: var(--border-radius-pill);
}

/*-- production styles --*/

.gallery-tools {
    padding: 8px;
    display: grid;
    grid-template-columns: 10fr minmax(90px, 1fr);
    gap: 10px;
    justify-items: end;
}

    .gallery-tools label {
        font-weight: 300;
    }

    .gallery-tools input:hover {
        cursor: pointer;
    }

    .gallery-tools .image-size-text {
        font-weight: 500;
        font-size: var(--font-size-small);
        font-style: italic;
        margin: 0px;
        padding: 0px;
    }

.mobile .gallery-tools, .no-gallery-tools .gallery-tools {
    display: none;
}

.gallery-holder {
    width: 100%;
    border: solid 1px var(--border-gray);
    padding: 10px;
}

.the-gallery-data {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 15px;
    justify-content: space-evenly;
}

.gallery-holder .image-holder {
    /*height: 20vh;*/
    height: 15vh;
    flex: 1 1 auto;
}

.gallery-8.gallery-holder .image-holder {
    height: 8vh;
}

.gallery-12.gallery-holder .image-holder {
    height: 15vh;
}

.gallery-16.gallery-holder .image-holder {
    height: 30vh;
}

.gallery-20.gallery-holder .image-holder {
    height: 40vh;
}

.gallery-24.gallery-holder .image-holder {
    height: 60vh;
}

.medium-content .gallery-24.gallery-holder .image-holder {
    height: auto;
}

.small-content .gallery-8.gallery-holder .image-holder,
.mobile .gallery-8.gallery-holder .image-holder {
    max-height: 6vh;
    height: unset;
}

.small-content .gallery-12.gallery-holder .image-holder,
.mobile .gallery-12.gallery-holder .image-holder {
    max-height: 12vh;
    height: unset;
}

.small-content .gallery-16.gallery-holder .image-holder,
.mobile .gallery-16.gallery-holder .image-holder {
    max-height: 25vh;
    height: unset;
}

.small-content .gallery-20.gallery-holder .image-holder,
.mobile .gallery-20.gallery-holder .image-holder {
    max-height: 35vh;
    height: unset;
}

.small-content .gallery-24.gallery-holder .image-holder,
.mobile .gallery-24.gallery-holder .image-holder {
    height: auto;
}

.gallery-holder .image-holder {
    flex-grow: 4;
}


.gallery-holder .image-content {
    display: none;
}

.gallery-holder p {
    display: none;
}

.gallery-holder img {
    max-height: 100%;
    width: 100%;
    object-fit: cover;
    vertical-align: bottom;
    padding: 0px;
}

.mobile .gallery-holder img {
    max-height: unset;
}

.gallery-contain .gallery-holder img {
    object-fit: contain;
}

.gallery-scale .gallery-holder img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}


.gallery-holder .image-holder {
    border: solid 2px transparent;
}

    .gallery-holder .image-holder:hover,
    .gallery-holder .image-holder:focus,
    .gallery-holder .image-holder:focus-within {
        border: solid 2px var(--orange);
    }

    .gallery-holder .image-holder:hover {
        cursor: pointer;
    }

/*-- mason column style --*/
.gallery-mason .gallery-holder .the-gallery-data {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
}

.mobile .gallery-mason .gallery-holder {
    grid-template-columns: 1fr;
}

.gallery-mason .gallery-tools {
    display: none;
}

.gallery-mason .image-holder {
    height: unset;
}

.gallery-mason .gallery-holder img {
    opacity: 1;
    width: 100%;
    height: 100%;
    max-height: unset;
    min-width: unset;
    object-fit: cover;
}

.gallery-mason .gallery-holder .wide {
    grid-column: span 2;
}

.gallery-mason .gallery-holder .tall {
    grid-row: span 2;
}

.gallery-mason .gallery-holder .big {
    grid-column: span 2;
    grid-row: span 2;
}

.mobile .gallery-mason .gallery-holder .wide,
.mobile .gallery-mason .gallery-holder .tall,
.mobile .gallery-mason .gallery-holder .big,
.small-content .gallery-mason .gallery-holder .big {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery-8.gallery-holder .mason-column .image-holder {
    height: 150px;
}

.gallery-8 .mason-column img {
    max-height: 150px;
}

.gallery-12 .mason-column img {
    max-height: 400px;
}

.gallery-16 .mason-column img {
    max-height: 440px;
}

.gallery-20 .mason-column img {
    max-height: 470px;
}


.gallery-24 .mason-column img {
    max-height: 500px;
}

/*-- gallery-title-hover-more --*/

.gallery-title-hover-more .image-holder {
    flex-basis: 24%;
    min-height: 40vh;
    overflow: hidden;
    position: relative;
}

.gallery-title-hover-more .gallery-8.gallery-holder .image-holder {
    flex-basis: 18%;
}

.gallery-title-hover-more .gallery-12.gallery-holder .image-holder {
    flex-basis: 24%;
}

.gallery-title-hover-more .gallery-16.gallery-holder .image-holder {
    flex-basis: 32%;
}

.gallery-title-hover-more .gallery-20.gallery-holder .image-holder {
    flex-basis: 48%;
}

.gallery-title-hover-more .gallery-24.gallery-holder .image-holder {
    flex-basis: 48%;
}

.medium-content.gallery-title-hover-more .image-holder {
    flex-basis: 32%;
}

.small-content.gallery-title-hover-more .image-holder {
    flex-basis: 99%;
}

    .small-content.gallery-title-hover-more .image-holder img {
        object-fit: cover;
    }

.gallery-title-hover-more .gallery-holder img {
    min-height: 100%;
    position: relative;
}

.gallery-title-hover-more .gallery-holder .image-holder:before {
    content: " ";
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /*background-color: var(--box-shade-background-less);*/
    background: linear-gradient(0deg, var(--background-shade-darkest) 5%, var(--background-shade-dark) 15%, transparent 25%);
    color: var(--white);
}

.gallery-title-hover-more .gallery-holder .image-holder:hover:before,
.gallery-title-hover-more .gallery-holder .image-holder:focus:before,
.gallery-title-hover-more .gallery-holder .image-holder:focus-within:before {
    content: " ";
    position: absolute;
    z-index: 2;
    background-color: var(--box-shade-background-more);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.gallery-title-hover-more .image-holder .image-content {
    display: block;
    position: absolute;
    z-index: 3;
    width: 100%;
    padding: 4%;
    text-align: center;
    top: 85%;
}

    .gallery-title-hover-more .image-holder .image-content * {
        color: var(--my-white);
        background-color: var(--background-overlay);
        text-shadow: var(--text-shadow);
        /* transition: all var(--transition-time) ease-in-out;*/
    }

    .gallery-title-hover-more .image-holder .image-content .title {
        font-size: var(--font-size-large);
        font-weight: bold;
        margin: 0;
    }

    .gallery-title-hover-more .image-holder .image-content *:not(.title) {
        display: none;
    }

.gallery-title-hover-more .gallery-holder .image-holder:hover .image-content,
.gallery-title-hover-more .gallery-holder .image-holder:focus .image-content,
.gallery-title-hover-more .gallery-holder .image-holder:focus-within .image-content {
    position: absolute;
    display: block;
    z-index: 3;
    width: 100%;
    padding: 10px;
    text-align: center;
    top: 0px;
    color: var(--my-white);
    font-size: var(--font-size-reduced);
    transition: all var(--transition-time) ease-in-out;
}

    .gallery-title-hover-more .gallery-holder .image-holder:hover .image-content *:not(.image-parent),
    .gallery-title-hover-more .gallery-holder .image-holder:focus .image-content *:not(.image-parent),
    .gallery-title-hover-more .gallery-holder .image-holder:focus-within .image-content *:not(.image-parent) {
        display: block;
        text-align: left;
        margin: 4px 0px;
        padding: 4px;
        background-color: var(--background-overlay) !important;
        color: var(--my-white) !important;
        /*font-size: var(--font-size-reduced);*/
    }

.gallery-title-hover-more .gallery-holder .image-holder .image-content p.image-parent {
    display: none !important;
}


.gallery-title-hover-more .gallery-holder .image-holder p.margin-bottom-zero {
    margin-bottom: 0px;
}

.gallery-title-hover-more .gallery-holder .image-holder p.margin-top-zero {
    margin-top: 0px;
}

.gallery-title-hover-more .gallery-holder .image-holder p.margin-top-bottom-zero {
    margin-top: 0px;
    margin-bottom: 0px;
}

.gallery-title-hover-more .gallery-holder .image-holder p a {
    padding-left: 4px !important;
}

.gallery-title-hover-more .gallery-holder .image-holder:hover .image-content .title,
.gallery-title-hover-more .gallery-holder .image-holder:focus .image-content .title,
.gallery-title-hover-more .gallery-holder .image-holder:focus-within .image-content .title {
    font-size: var(--font-size-large);
    text-align: center;
}

.gallery-title-hover-more .gallery-holder .image-holder .title,
.gallery-title-hover-more .gallery-holder .image-holder:hover .title,
.gallery-title-hover-more .gallery-holder .image-holder:focus-within .title,
.gallery-title-hover-more .gallery-holder .image-holder [class*="button"],
.gallery-title-hover-more .gallery-holder .image-holder:hover [class*="button"],
.gallery-title-hover-more .gallery-holder .image-holder:focus-within [class*="button"] {
    display: block;
    text-align: center;
}

.gallery-title-hover-more .gallery-holder .image-holder [class*="button"],
.gallery-title-hover-more .gallery-holder .image-holder:hover [class*="button"],
.gallery-title-hover-more .gallery-holder .image-holder:focus-within [class*="button"] {
    background: transparent;
}

.gallery-title-hover-more .gallery-holder .image-holder .image-content p[class*='small'] {
    font-size: var(--font-size-small);
}

.gallery-title-hover-more .gallery-holder .image-holder .image-content p[class*='medium'] {
    font-size: var(--main-standout-block-font-size);
}

.gallery-title-hover-more .gallery-holder .image-holder .image-content p[class*='standout'] {
    font-size: var(--main-standout-font-size);
    font-weight: 200;
    line-height: calc(var(--main-standout-font-size) - .5em);
}

.gallery-title-hover-more .gallery-holder .image-holder .image-content p[class*='large'] {
    font-size: var(--font-size-large);
}

.gallery-title-hover-more .gallery-holder .image-holder .image-content p[class*='larger'] {
    font-size: var(--font-size-larger);
}

.gallery-title-hover-more.gallery-keep-grid .gallery-holder {
    justify-content: center;
}

.gallery-title-hover-more.gallery-keep-grid .image-holder {
    flex-basis: unset;
    max-width: 400px;
}

.gallery-title-hover-more.gallery-keep-grid.gallery-profile .image-holder {
    min-height: 500px;
}

/*-- gallery blocks --*/
.gallery-blocks .gallery-holder .the-gallery-data {
    display: grid;
    grid-template-columns: repeat(auto-fit, 65px);
    /*grid-template-rows:65px;*/
    gap: 1px;
}

.gallery-blocks .gallery-holder .image-holder {
    height: 65px;
    width: unset;
    max-height: unset;
    max-width: unset;
}

.gallery-blocks .gallery-8.gallery-holder {
    grid-template-columns: repeat(auto-fit, 50px);
}

.gallery-blocks .gallery-8 .image-holder {
    height: 50px;
}

.gallery-blocks .gallery-12.gallery-holder {
    grid-template-columns: repeat(auto-fit, 65px);
}

.gallery-blocks .gallery-12 .image-holder {
    height: 65px;
}

.gallery-blocks .gallery-16.gallery-holder {
    grid-template-columns: repeat(auto-fit, 95px);
}

.gallery-blocks .gallery-16 .image-holder {
    height: 95px;
}

.gallery-blocks .gallery-20.gallery-holder {
    grid-template-columns: repeat(auto-fit, 150px);
}

.gallery-blocks .gallery-20 .image-holder {
    height: 150px;
}

.gallery-blocks .gallery-24.gallery-holder {
    grid-template-columns: repeat(auto-fit, 220px);
}

.gallery-blocks .gallery-24 .image-holder {
    height: 220px;
}

.gallery-blocks .gallery-holder .image-holder img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.mobile .gallery-blocks .gallery-holder,
.small-content .gallery-blocks .gallery-holder .image-holder {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    grid-template-rows: 65px !important;
}

.mobile .gallery-blocks .image-holder,
.small-content .gallery-blocks .image-holder {
    height: 65px;
}

/*-- gallery museum --*/

.gallery-museum .gallery-holder {
    border: 0px;
    gap: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

    .gallery-museum .gallery-holder .image-holder img {
        outline: solid 5px transparent;
        outline-offset: 5px;
    }

    .gallery-museum .gallery-holder .image-holder {
        border: solid 1px transparent;
    }

        .gallery-museum .gallery-holder .image-holder:hover, .gallery-museum .gallery-holder .image-holder:focus, .gallery-museum .gallery-holder .image-holder:focus-within {
            border: solid 1px transparent;
        }

            .gallery-museum .gallery-holder .image-holder:hover img,
            .gallery-museum .gallery-holder .image-holder:focus img,
            .gallery-museum .gallery-holder .image-holder:focus-within img {
                outline: solid 5px var(--orange-hover);
                outline-offset: 5px;
            }


    .gallery-museum .gallery-holder .image-holder {
        display: grid !important;
        grid-template-areas: "museumImage museumInfo";
        width: auto;
        gap: 15px;
        height: auto;
        flex: unset;
        align-content: center;
        justify-content: start
    }

        .gallery-museum .gallery-holder .image-holder.empty-content {
            align-content: start;
        }

    .gallery-museum .gallery-holder .image-content-holder {
        grid-area: museumInfo;
        display: grid;
        grid-template-columns: 1fr;
        align-items: end;
        max-width: 400px;
    }

        .gallery-museum .gallery-holder .image-content-holder.empty {
            display: none;
        }

    .gallery-museum .gallery-holder .image-holder > .img-frame {
        grid-area: museumImage;
        display: flex;
        min-width: unset;
        height: auto;
        width: auto;
        margin-top: auto;
        margin-bottom: auto;
        object-fit: contain;
        background-color: var(--my-gray);
        padding: 40px;
        border: solid 11px var(--slate);
        flex-basis: 30%;
        box-shadow: inset 2px 2px 9px 2px rgba(0,0,0,0.21), inset 1px 1px 3px 1px rgba(0,0,0,0.41), 0px 10px 6px 2px rgba(0,0,0,0.11);
    }

    .gallery-museum .gallery-holder .image-holder .img-shadow {
        position: relative;
        z-index: 4;
    }

        .gallery-museum .gallery-holder .image-holder .img-shadow img {
            position: relative;
            z-index: 3;
        }

        .gallery-museum .gallery-holder .image-holder .img-shadow:before {
            position: absolute;
            z-index: 5;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            box-shadow: inset 2px 2px 9px 2px rgba(0,0,0,0.21), inset 1px 1px 3px 1px rgba(0,0,0,0.41), inset 0px 10px 6px 2px rgba(0,0,0,0.11);
        }

    .gallery-museum .gallery-holder .image-holder.image-pop .img-shadow:before {
        position: absolute;
        z-index: 5;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 7px 7px 4px 1px rgba(0,0,0,0.11), 2px 2px 3px 1px rgba(0,0,0,0.85), 12px 12px 10px 5px rgba(0,0,0,0.11), -1px -1px 1px 1px rgba(255,255,255,0.95);
    }

    .gallery-museum .gallery-holder .image-parent.image-vignette .img-shadow:after {
        position: absolute;
        z-index: 6;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(transparent 65%, rgba(0,0,0,.70));
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .gallery-museum .gallery-holder .image-holder.mat-1 > .img-frame {
        background-color: var(--primary);
    }

    .gallery-museum .gallery-holder .image-holder.frame-1 > .img-frame {
        border-color: var(--primary);
    }


    .gallery-museum .gallery-holder .image-holder.mat-2 > .img-frame {
        background-color: var(--secondary);
    }

    .gallery-museum .gallery-holder .image-holder.mat-3 > .img-frame {
        background-color: var(--neutral);
    }

    .gallery-museum .gallery-holder .image-holder.mat-4 > .img-frame {
        background-color: var(--dark);
    }

    .gallery-museum .gallery-holder .image-holder.mat-5 > .img-frame {
        background-color: var(--accent-1);
    }

    .gallery-museum .gallery-holder .image-holder.mat-6 > .img-frame {
        background-color: var(--accent-2);
    }

    .gallery-museum .gallery-holder .image-holder.mat-black > .img-frame {
        background-color: var(--my-black);
    }

    .gallery-museum .gallery-holder .image-holder.mat-gray > .img-frame {
        background-color: var(--my-gray);
    }

    .gallery-museum .gallery-holder .image-holder.mat-white > .img-frame {
        background-color: var(--my-white);
    }

    .gallery-museum .gallery-holder .img-frame img {
        height: auto;
        max-width: 200px;
    }

.gallery-museum .gallery-8.gallery-holder {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

    .gallery-museum .gallery-8.gallery-holder .img-frame {
        margin: auto;
    }

        .gallery-museum .gallery-8.gallery-holder .img-frame img {
            height: auto;
            max-width: 90px;
        }

    .gallery-museum .gallery-8.gallery-holder .image-holder {
        grid-template-areas: "museumImage"
            "museumInfo";
        align-content: start;
    }

        .gallery-museum .gallery-8.gallery-holder .image-holder .img-shadow {
            max-width: 90px;
        }


.gallery-museum .gallery-12.gallery-holder .img-frame img {
    height: auto;
    max-width: 200px;
}

.gallery-museum .gallery-16.gallery-holder {
    grid-template-columns: repeat(auto-fit, minmax(525px, 1fr));
}

    .gallery-museum .gallery-16.gallery-holder .img-frame img {
        height: auto;
        max-width: 400px;
    }

.gallery-museum .gallery-20.gallery-holder .img-frame img {
    height: auto;
    max-width: 500px;
}

.gallery-museum .gallery-20.gallery-holder,
.gallery-museum .gallery-24.gallery-holder {
    grid-template-columns: 1fr;
}


    .gallery-museum .gallery-20.gallery-holder .image-holder,
    .gallery-museum .gallery-24.gallery-holder .image-holder {
        grid-template-areas: "museumImage museumInfo";
        justify-content: end;
    }

    .gallery-museum .gallery-24.gallery-holder .img-frame img {
        height: auto;
        max-width: 800px;
    }

.small-content.gallery-museum .gallery-holder,
.mobile .gallery-museum .gallery-holder {
    grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
}

    .medium-content.gallery-museum .gallery-holder .image-holder,
    .small-content.gallery-museum .gallery-holder .image-holder,
    .mobile .medium-content.gallery-museum .gallery-holder .image-holder {
        grid-template-areas: "museumImage"
            "museumInfo";
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .medium-content.gallery-museum .gallery-holder .image-holder > .img-frame,
        .small-content.gallery-museum .gallery-holder .image-holder > .img-frame,
        .mobile .medium-content.gallery-museum .gallery-holder .image-holder > .img-frame {
            max-height: unset;
            max-width: 100%;
        }

            .medium-content.gallery-museum .gallery-holder .image-holder > .img-frame img,
            .small-content.gallery-museum .gallery-holder .image-holder > .img-frame img,
            .mobile .medium-content.gallery-museum .gallery-holder .image-holder > .img-frame img {
                max-height: unset;
                max-width: 100%;
            }

    .small-content.gallery-museum .gallery-holder .image-content {
        margin-bottom: 0px;
        max-width: unset;
    }

.gallery-museum .gallery-holder .image-content {
    flex-basis: 40%;
    border: solid 1px var(--border-gray);
    box-shadow: var(--box-shadow-less);
    padding: 10px;
    text-align: left !important;
    background-color: var(--my-white);
    color: var(--my-white-text);
    display: grid;
    align-items: end;
    box-shadow: var(--box-shadow);
    margin: auto;
}

.gallery-museum .gallery-20.gallery-holder .image-content {
    width: 450px;
}

.gallery-museum .gallery-24.gallery-holder .image-content {
    width: 375px;
}

.dark-mode .gallery-museum .gallery-holder .image-content {
    background-color: var(--slate);
    color: var(--slate-text);
}

.gallery-museum .image-content p, .gallery-museum .image-content div {
    display: block;
    margin: 0px;
    border: 0px;
    padding: 4px;
    box-shadow: none;
}

.gallery-museum .image-content .museum-label-artist,
.gallery-museum .image-content .museum-label-medium {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

    .gallery-museum .image-content .museum-label-artist p, .gallery-museum .image-content .museum-label-medium p {
        flex-basis: auto;
    }

        .gallery-museum .image-content .museum-label-artist p[class*="museum-label-first"] {
            font-size: var(--font-size-large);
        }

.gallery-museum .image-content .museum-label-lifespan,
.gallery-museum .image-content .museum-label-medium {
    font-size: var(--font-size-reduced);
}

.gallery-museum .image-content .museum-label-first-last {
    flex-grow: 2;
}

.gallery-museum .image-content .museum-label-title {
    font-size: var(--font-size-larger);
}

.gallery-museum .image-content .museum-label-artist * {
    font-weight: bold;
}

.gallery-museum .image-content div {
    padding: 0px;
}

.gallery-museum .image-content a[class*='glass-button']:not(:hover) {
    color: var(--my-white-text) !important;
    text-shadow: none;
}

.gallery-museum .image-content p:not([class*='mus']):not([class*='title']) {
    font-size: var(--font-size-reduced);
}

.gallery-museum .image-content .title {
    font-size: var(--font-size-large);
}


/*------------
    FRAMES
*/

.gallery-frames .gallery-holder {
    border: 0px;
}

    .gallery-frames .gallery-holder .image-holder {
        display: grid;
        width: auto;
        gap: 15px;
        height: auto;
        flex: unset;
        align-items: end;
        border: solid 4px transparent;
    }

    .gallery-frames .gallery-holder .image-content-holder {
        display: none;
    }

    .gallery-frames .gallery-holder .image-holder > .img-frame {
        min-width: unset;
        height: auto;
        width: auto;
        object-fit: contain;
        background-color: var(--my-gray);
        padding: 15px;
        border: solid 8px var(--slate);
        border-radius: var(--border-radius-chamfer);
        flex-basis: 30%;
        box-shadow: inset 2px 2px 9px 2px rgba(0,0,0,0.21), inset 1px 1px 3px 1px rgba(0,0,0,0.41), 0px 10px 6px 2px rgba(0,0,0,0.11);
    }

    .gallery-frames .gallery-holder .image-holder .img-shadow {
        position: relative;
        z-index: 4;
    }

        .gallery-frames .gallery-holder .image-holder .img-shadow img {
            position: relative;
            z-index: 3;
        }

        .gallery-frames .gallery-holder .image-holder .img-shadow:before {
            position: absolute;
            z-index: 5;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            box-shadow: inset 2px 2px 9px 2px rgba(0,0,0,0.21), inset 1px 1px 3px 1px rgba(0,0,0,0.41), inset 0px 10px 6px 2px rgba(0,0,0,0.11);
        }

    .gallery-frames .gallery-holder .image-holder.image-pop .img-shadow:before {
        position: absolute;
        z-index: 5;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 7px 7px 4px 1px rgba(0,0,0,0.11), 2px 2px 3px 1px rgba(0,0,0,0.85), 12px 12px 10px 5px rgba(0,0,0,0.11), -1px -1px 1px 1px rgba(255,255,255,0.95);
    }

    .gallery-frames .gallery-holder .image-holder.image-vignette .img-shadow:after {
        position: absolute;
        z-index: 6;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(transparent 65%, rgba(0,0,0,.70));
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

.gallery-frames .img-frame img {
    width: 80px;
    height: auto;
}

.gallery-frames .gallery-holder.gallery-8 .img-frame img {
    width: 40px;
    height: auto;
}

.gallery-frames .gallery-holder.gallery-12 .img-frame img {
    width: 80px;
    height: auto;
}

.gallery-frames .gallery-holder.gallery-16 .img-frame img {
    width: 200px;
    height: auto;
}

.gallery-frames .gallery-holder.gallery-20 .img-frame img {
    width: 300px;
    height: auto;
}

.gallery-frames .gallery-holder.gallery-24 .img-frame img {
    width: 400px;
    height: auto;
}


.gallery-frames .gallery-holder .image-holder:hover,
.gallery-frames .gallery-holder .image-holder:focus,
.gallery-frames .gallery-holder .image-holder:focus-within {
    border-radius: var(--border-radius-chamfer);
    background-color: var(--orange);
    border-width: 4px;
}

.dark-mode .gallery-frames .gallery-holder .image-holder:hover,
.dark-mode .gallery-frames .gallery-holder .image-holder:focus,
.dark-mode .gallery-frames .gallery-holder .image-holder:focus-within {
    background-color: var(--orange-dark);
}
/*-- mobile galleries --*/
.mobile .gallery-holder .image-holder {
    flex-basis: 99%;
    height: auto;
}

.mobile .gallery-holder img {
    object-fit: contain;
}


/*--- gallery lightbox --*/
.show-full-image {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 10px;
}

.tablet .show-full-image,
.mobile .show-full-image {
    grid-template-columns: 1fr;
}

.show-full-image .display-image {
    margin: 0;
    padding: 0;
    min-height: 80vh;
    display: grid;
}

.tablet .show-full-image .display-image,
.mobile .show-full-image .display-image {
    min-height: unset;
}

.show-full-image .display-image img {
    max-width: 96%;
    max-height: 85vh;
    height: auto;
    width: auto;
    margin: auto;
    display: block;
    border: solid 1px var(--my-gray);
    box-shadow: 0px 10px 9px 2px rgba(0,0,0,.5);
}


.tablet .show-full-image .display-image img,
.mobile .show-full-image .display-image img {
    max-height: 45vh;
}

.show-full-image .display-content {
    background-color: var(--my-black);
    color: var(--my-black-text);
    padding: 15px;
    border: solid 1px var(--my-gray);
    display: flex;
    flex-direction: column;
}

    .show-full-image .display-content img {
        max-width: 96%;
        max-height: 85vh;
        height: auto;
        width: auto;
        margin: auto;
        display: block;
    }

    .show-full-image .display-content p {
        margin: 4px 0px;
        padding: 8px 0px 0px 0px;
    }

        .show-full-image .display-content p.margin-bottom-zero {
            margin-bottom: 0px;
        }

        .show-full-image .display-content p.margin-top-zero {
            margin-top: 0px;
        }

        .show-full-image .display-content p.margin-top-bottom-zero {
            margin-top: 0px;
            margin-bottom: 0px;
        }

    .show-full-image .display-content a:not([class*='button']) {
        color: var(--my-white);
        padding-left: 2px;
        width: fit-content;
        text-decoration: none;
        padding-bottom: 4px;
        border-bottom: dotted 2px var(--my-white);
    }

    .show-full-image .display-content a[class*='icon-'] {
        padding-left: 35px;
    }

        .show-full-image .display-content a[class*='icon-']:before {
            left: 2px;
            width: 30px;
        }


    .show-full-image .display-content a:not([class*='button']):hover, .show-full-image .display-content a:not([class*='button']):focus {
        border-bottom: dotted 2px var(--orange);
    }

    .show-full-image .display-content [class*='button'] {
        margin: 10px 4px;
        display: block;
    }

    .show-full-image .display-content .museum-label-title {
        font-size: var(--font-size-larger);
    }

    .show-full-image .display-content [class*='museum-label-first'],
    .show-full-image .display-content .title {
        font-size: var(--font-size-app-main-title);
    }

    .show-full-image .display-content .image-controls {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 5px;
        padding: 10px;
        border-top: solid 3px var(--my-gray);
        margin-top: auto;
    }

    .show-full-image .display-content .show-image-control {
        flex-basis: auto;
        height: 58px;
        width: 58px;
        cursor: pointer;
        border: solid 1px var(--my-gray);
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 101;
    }

        .show-full-image .display-content .show-image-control:hover {
            border: solid 1px var(--orange);
        }

/*-----------
            MAX GALLERY HEIGHT
        */
.max-gallery-full .gallery-holder, .max-gallery-three-quarters .gallery-holder, .max-gallery-two-thirds .gallery-holder, .max-gallery-half .gallery-holder,
.max-gallery-third .gallery-holder, .max-gallery-quarter .gallery-holder, .max-gallery-eighth .gallery-holder {
    overflow-y: auto;
    scrollbar-color: var(--primary) var(--primary-text);
    scrollbar-width: thin;
}

.max-gallery-full .gallery-holder {
    max-height: var(--full);
}

.max-gallery-three-quarters .gallery-holder {
    max-height: var(--three-quarters);
}

.max-gallery-two-thirds .gallery-holder {
    max-height: var(--two-thirds);
}

.max-gallery-half .gallery-holder {
    max-height: var(--half);
}

.max-gallery-third .gallery-holder {
    max-height: var(--third);
}

.max-gallery-quarter .gallery-holder {
    max-height: var(--quarter);
}

.max-gallery-eighth .gallery-holder {
    max-height: var(--eighth);
}

/*---------------------------
  GALLERY SHOWCASE DATA
-----------------------------------------*/
.gallery-holder.showcase {
    display: grid;
    gap: 10px;
    border: 0px;
}

.gallery-holder.use-search {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "gallery-search gallery-reset"
        "gallery-data gallery-data";
}

    .gallery-holder.use-search .the-gallery-data {
        /*  grid-column: span 2;*/
    }


.gallery-holder.use-filter {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "gallery-data gallery-reset"
        "gallery-data gallery-filter";
    grid-template-rows: 100px auto;
}

    .gallery-holder.use-filter .the-gallery-data {
        grid-row: span 2;
    }

.no-search .gallery-holder .no-search-results,
.no-search .gallery-holder .no-search-results p {
    display: grid !important;
    text-align: center;
}

.gallery-holder.use-search.use-filter {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "gallery-search gallery-reset"
        "gallery-data gallery-filter";
}

.gallery-search-bar {
    position: relative;
    grid-area: gallery-search;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 10px;
    align-content: end;
}

    .gallery-search-bar .search-count {
        position: relative;
        display: grid;
        align-items: end;
    }

.gallery-holder .gallery-search-bar p {
    display: grid;
}

.gallery-reset {
    position: relative;
    display: grid;
    grid-area: gallery-reset;
    align-items: end;
}

    .gallery-reset button {
        width: fit-content;
    }

.gallery-filter {
    grid-area: gallery-filter;
}

.gallery-data {
    grid-area: gallery-data;
}

    .gallery-data .image-holder {
        width: 200px;
        flex: unset;
    }

.gallery-search-tools {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 10px;
    align-items: end;
}

.gallery-search-bar label {
    display: block;
    position: relative;
    font-size: var(--font-size-small);
}

.gallery-search-input {
    border-radius: 10px;
    font-size: var(--font-size);
    line-height: 33px;
    display: grid;
    align-items: center;
    width: 100%;
    padding-right: 40px;
    padding-left: 10px;
    border: solid 1px var(--border-gray);
    box-sizing: border-box;
}

.gallery-search-bar label button {
    position: absolute;
    bottom: 4px;
    right: 1%;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: var(--white);
    color: var(--medium-blue);
    font-size: var(--font-size);
    border: 0px;
    cursor: pointer;
}

.gallery-holder .the-filter-tools {
    width: 300px;
}

.small-content .gallery-holder .the-filter-tools,
.mobile .gallery-holder .the-filter-tools {
    width: 100%;
}

.gallery-holder .the-filter-tools details {
    width: 100%;
}

    .gallery-holder .the-filter-tools details summary {
        display: grid;
        grid-template-columns: 1fr 35px 35px;
        gap: 10px;
        align-items: center;
        padding: 10px 8px;
        font-weight: 300;
    }

        .gallery-holder .the-filter-tools details summary i:before {
            content: "\2b";
        }

    .gallery-holder .the-filter-tools details[open] summary i:before {
        content: "\f068";
    }

    .gallery-holder .the-filter-tools details ul {
        margin: 0px;
        padding: 5px;
        list-style: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .gallery-holder .the-filter-tools details li {
        margin: 0px;
        padding: 8px;
        flex-basis: 50%;
        display: grid;
    }

.gallery-holder .the-filter-tools details {
    width: 100%;
    margin: 0px;
    margin-top: 10px;
}

    .gallery-holder .the-filter-tools details label {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: .5em;
        align-items: start;
        font-size: .85rem;
        line-height: 1rem;
        width: max-content;
    }

.gallery-holder .the-filter-tools label input[type='checkbox'] {
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    min-width: 1.15em;
    height: 1.15em;
    border: 0.15em solid var(--secondary);
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
}

    .gallery-holder .the-filter-tools label input[type='checkbox']:before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--orange);
    }

    .gallery-holder .the-filter-tools label input[type='checkbox']:checked::before {
        transform: scale(1);
    }

    .gallery-holder .the-filter-tools label input[type='checkbox']:before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--orange);
    }

/*-- showcase items --*/
.gallery-holder.showcase .the-gallery-data {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    border: 0px;
    height: max-content;
    justify-content: space-evenly;
}

.large-content .gallery-holder.showcase .the-gallery-data,
.medium-content .gallery-holder.showcase .the-gallery-data,
.tablet .gallery-holder.showcase .the-gallery-data {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}


.small-content .gallery-holder.showcase .the-gallery-data,
.tablet-small .gallery-holder.showcase .the-gallery-data,
.mobile .gallery-holder.showcase .the-gallery-data {
    grid-template-columns: 1fr;
    gap: 20px;
}

.showcase-item {
    flex: 1 1 auto;
    width: 19%;
    max-width: 500px;
    min-width: 250px;
    margin: 0px auto;
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid 0px var(--border-gray);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    padding: 0px;
    box-shadow: var(--box-shadow-faint);
    transform: translateY(0px);
    transition: transform var(--transition-time) ease;
}

    .showcase-item:hover, .showcase-item:focus, .showcase-item:focus-within {
        transform: translateY(-4px);
        box-shadow: var(--box-shadow-down);
        transition: transform var(--transition-time) ease;
    }

.showcase-item-image-background-holder {
    position: relative;
    height: 240px;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}

.showcase-item-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    height: 100%;
    width: 100%;
    transform: scale3d(1, 1, 1);
    transition: transform var(--transition-time-fast) ease;
}

    .showcase-item-bg:hover {
        transform: scale3d(1.15, 1.15, 1.15);
        transition: transform var(--transition-time-fast) ease;
    }

    .showcase-item-bg:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--box-shade-background-less);
        /*border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);*/
        z-index: 1;
    }

.showcase-item:hover .showcase-item-bg:before, .showcase-item:focus .showcase-item-bg:before, .showcase-item:focus-within .showcase-item-bg:before {
    display: none;
}

.showcase-bottom {
    display: block;
    /*flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;*/
    padding: 10px;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-top: solid 2px var(--accent-1);
    height: calc(100% - 240px);
}

.showcase-item:hover .showcase-bottom, .showcase-item:focus .showcase-bottom, .showcase-item:focus-within .showcase-bottom {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
}

.showcase-bottom-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

    .showcase-bottom-content > * {
        flex-basis: auto;
        display: inline-block !important;
        font-size: var(--font-size-reduced);
        margin: 0px;
        height: fit-content;
    }

        .showcase-bottom-content > *:last-child {
            /* margin-top: auto;*/
        }

.showcase-bottom .snapshot-title {
    font-weight: bold;
    font-size: var(--font-size-large);
}

.showcase-bottom .snapshot-description {
    display: grid;
    font-size: var(--font-size-small);
    padding: 4px 0px;
}

    .showcase-bottom .snapshot-description > * {
        display: grid !important;
        font-size: var(--font-size-small);
        line-height: calc(var(--font-size-small) + .5em);
    }

    .showcase-bottom .snapshot-description > p {
        margin: 0px;
        display: inline-block !important;
    }

    .showcase-bottom .snapshot-description > ul {
        margin: 0px;
        margin-left: 30px;
    }

    .showcase-bottom .snapshot-description img {
        display: none !important;
    }

.showcase-bottom > p:last-child {
    margin-top: auto;
}

.showcase-bottom p button {
    width: 100%;
    border: solid 2px var(--orange-hover);
    color: var(--primary);
    background-color: var(--primary-text);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    padding: 0px 20px;
    line-height: 40px;
    font-size: var(--font-size-reduced);
}

    .showcase-bottom p button:hover, .showcase-bottom p button:focus {
        color: var(--primary-text);
        background-color: var(--primary);
    }

/*-- non matching items --*/

li.no-match {
    text-decoration: line-through;
}

    li.no-match input {
        filter: saturate(50%);
        border: solid 0.15em var(--border-gray) !important;
    }

/*-- showcase search results items --*/

.gallery-holder .search-match {
    width: fit-content;
}

[id*='-gallery-data-no-results'] {
    grid-column: span 3;
}

    [id*='-gallery-data-no-results'] p {
        display: block !important;
    }

/*-- column layouts --*/
.col-1 .gallery-holder.showcase .the-gallery-data .showcase-item {
    flex-basis: 100%;
}

.col-2 .gallery-holder.showcase .the-gallery-data .showcase-item {
    flex-basis: 49%;
}

.col-3 .gallery-holder.showcase .the-gallery-data .showcase-item {
    flex-basis: 32%;
}

.col-4 .gallery-holder.showcase .the-gallery-data .showcase-item {
    flex-basis: 23%;
}

.col-5 .gallery-holder.showcase .the-gallery-data .showcase-item {
    flex-basis: 19%;
}

.medium-content .showcase-item {
    min-width: 280px;
}

/*- showcase mobile and tablet --*/
.tablet-small .gallery-holder .the-filter-tools {
    width: 250px;
}

.mobile .gallery-holder.use-search.use-filter {
    grid-template-areas: "gallery-search"
        "gallery-reset"
        "gallery-filter"
        "gallery-data";
}

.mobile .gallery-holder.use-search {
    grid-template-areas: "gallery-search"
        "gallery-reset"
        "gallery-data";
    grid-template-columns: 1fr;
}

.mobile .gallery-holder.use-filter {
    grid-template-areas:
        "gallery-reset"
        "gallery-filter"
        "gallery-data";
    grid-template-columns: 1fr;
}

.mobile .gallery-holder .gallery-search-bar {
    grid-template-columns: 1fr;
}

.mobile .gallery-holder .gallery-reset {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .mobile .gallery-holder .gallery-reset button {
        width: 100%;
    }

.mobile .no-filter .gallery-holder .gallery-reset {
    grid-template-columns: 1fr;
}

    .mobile .no-filter .gallery-holder .gallery-reset .btn-mobile-filter {
        display: none;
    }

    .mobile .no-filter .gallery-holder .gallery-reset .btn-reset-filter {
        width: 100%;
    }

.mobile .no-search .gallery-holder .gallery-reset .no-search-results {
    grid-column: span 2;
}


.mobile .gallery-holder .the-filter-tools {
    display: none;
}

    .mobile .gallery-holder .the-filter-tools.active {
        display: grid;
    }

/*-- showcase modifiers --*/
/* --- showcase image all */
.showcase-image-all .the-gallery-data .showcase-item-bg {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- showcase list */

.showcase-list .the-gallery-data .showcase-item {
    border-radius: 0px;
    transform: none;
    transition: none;
    position: relative;
    border: solid 1px var(--my-gray);
    margin: unset;
}

.showcase-list .the-gallery-data .showcase-item-image-background-holder {
    height: 100%;
    width: 60px;
    position: absolute;
    top: 0;
    left: 0;
}

.showcase-list .the-gallery-data .showcase-item-bg {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--my-white);
    color: var(--my-white-text);
}

    .showcase-list .the-gallery-data .showcase-item-bg:before {
        background-color: unset;
    }

.showcase-list .the-gallery-data .showcase-item:hover .showcase-item-bg,
.showcase-list .the-gallery-data .showcase-item:focus-within .showcase-item-bg {
    transform: scale3d(1.15, 1.15, 1.15);
    transition: transform var(--transition-time-fast) ease;
    background-color: var(--primary);
    color: var(--primary-text);
}

.showcase-list .showcase-item:hover .showcase-bottom, .showcase-list .showcase-item:focus-within .showcase-bottom {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    border-radius: 0px;
}

.showcase-list .the-gallery-data .showcase-bottom {
    padding-left: 70px;
    border: 0px;
    height: 100%;
    align-items: center;
}

.showcase-list .showcase-bottom .snapshot-title {
    font-weight: bold;
    font-size: var(--font-size-medium);
    display: grid;
    height: 100%;
    align-content: start;
    justify-content: center;
}

    .showcase-list .showcase-bottom .snapshot-title a:hover,
    .showcase-list .showcase-bottom .snapshot-title a:focus,
    .showcase-list .showcase-item:hover .showcase-bottom .snapshot-title a,
    .showcase-list .showcase-item:focus-within .showcase-bottom .snapshot-title a {
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-thickness: 2px;
        text-decoration-color: var(--orange);
    }

.showcase-list .the-gallery-data .showcase-bottom .snapshot-description {
    display: none !important;
}


/*-- showcase topic --*/
.showcase-topic .the-gallery-data .showcase-item {
    border-radius: 0px;
    transform: none;
    transition: none;
    position: relative;
    border: solid 1px var(--my-gray);
    background-color: var(--primary);
    color: var(--primary-text);
    margin: unset;
    min-height: 15vh;
}

.showcase-topic .the-gallery-data .showcase-item-image-background-holder {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.showcase-topic .the-gallery-data .showcase-item-bg {
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}

.showcase-topic .the-gallery-data .showcase-item:hover .showcase-item-bg,
.showcase-topic .the-gallery-data .showcase-item:focus-within .showcase-item-bg {
    transform: scale3d(1.15, 1.15, 1.15);
    transition: transform var(--transition-time-fast) ease;
}

.showcase-topic .the-gallery-data .showcase-bottom .snapshot-description {
    display: none !important;
}

.showcase-topic .showcase-item .showcase-bottom {
    background-color: inherit;
    color: inherit;
    position: relative;
    border: 0px;
    height: 100%;
}

.showcase-topic .showcase-item:hover .snapshot-title {
    background-color: unset !important;
    color: var(--primary-text) !important;
    text-shadow: var(--text-shadow-dark) !important;
    height: 100%;
}

.showcase-topic .showcase-item .snapshot-title:before {
    content: " ";
    z-index: 7;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: var(--box-shade-background);
}

.showcase-topic .showcase-item:hover .snapshot-title:before,
.showcase-topic .showcase-item:focus-within .snapshot-title:before {
    background-color: var(--box-shade-background-more);
}

.showcase-topic .showcase-item .snapshot-title a {
    padding: 0.5em 1em;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 15;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-decoration: none;
    align-content: end;
    align-items: baseline;
    transition: none;
    font-size: var(--font-size);
    color: var(--my-black-text);
    /* background-color: var(--box-shade-background-more);*/
    text-shadow: var(--text-shadow-dark);
    margin-top: auto;
}

    .showcase-topic .showcase-item .snapshot-title a:hover,
    .showcase-topic .showcase-item .snapshot-title a:focus,
    .showcase-topic .showcase-item:hover .snapshot-title a,
    .showcase-topic .showcase-item:focus-within .snapshot-title a {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-decoration-color: var(--orange);
    }

.showcase-topic .showcase-bottom-content {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


/*--------------------------------
    SEARCH BOX STYLES
  */
.search-box-block .app-search-tools label {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 5px;
    align-items: baseline;
}


.search-box-block .app-search-tools .app-search-label {
    text-transform: uppercase;
    font-size: var(--font-size-small);
}

.search-box-block .app-search-tools input {
    background-color: inherit;
    color: inherit;
    border: 0px;
    border-radius: 0px;
    line-height: unset;
    border-bottom: solid 3px var(--border-gray);
    padding-right: 0px;
    padding-left: 0px;
}

    .search-box-block .app-search-tools input:focus {
        border-bottom: solid 3px var(--orange);
    }

.dark-mode .search-box-block .app-search-tools input {
    border-bottom: solid 3px var(--orange-dark);
}

.search-box-block .app-search-tools button {
    background-color: inherit;
    color: inherit;
    border: 0px;
    border-radius: 0px;
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
}


/* --- showcase simple */

.showcase-simple .the-gallery-data .showcase-item {
    border-radius: 0px;
    transform: none;
    transition: none;
    position: relative;
    border: 0px;
    margin: unset;
    background-color: inherit;
    color: inherit;
    box-shadow: none;
    min-width: 300px;
}

    .showcase-simple .the-gallery-data .showcase-item .showcase-item-image-background-holder {
        border: solid 1px var(--border-gray);
        box-shadow: var(--box-shadow);
    }

    .showcase-simple .the-gallery-data .showcase-item:hover .showcase-item-image-background-holder {
        border: solid 1px var(--my-black);
        box-shadow: var(--box-shadow-down);
    }

    .showcase-simple .the-gallery-data .showcase-item .showcase-bottom {
        border-radius: 0px;
        position: relative;
        border: 0px;
        background-color: inherit;
        color: inherit;
        margin: unset;
        padding: 1em 0px;
    }

    .showcase-simple .the-gallery-data .showcase-item .showcase-bottom-content > *:not(.snapshot-title) {
        display: none !important;
    }

    .showcase-simple .the-gallery-data .showcase-item .showcase-bottom-content .snapshot-title {
        display: block;
        margin: 0px;
        padding: 0px;
    }

        .showcase-simple .the-gallery-data .showcase-item .showcase-bottom-content .snapshot-title,
        .showcase-simple .the-gallery-data .showcase-item .showcase-bottom-content .snapshot-title a {
            font-size: var(--font-size);
            font-weight: 400 !important;
            text-underline-offset: 4px;
        }

    .showcase-simple .the-gallery-data .showcase-item:hover .showcase-bottom-content .snapshot-title a,
    .showcase-simple .the-gallery-data .showcase-item:focus-within .showcase-bottom-content .snapshot-title a {
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-thickness: 4px;
        text-decoration-color: var(--orange);
        font-weight: bold !important;
    }

/*-----------------------------
    NEWSLETTER STYLE
*/

/*--- presentation options ---*/
#div-ib-dynamic-newsletter-options.active {
    overflow-y: auto;
    height: calc(100vh - 80px);
}

.newsletter-display-version {
    background-color: var(--warm-gray);
    color: var(--warm-gray-text);
    padding: 4px;
}

    .newsletter-display-version ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 80%;
        justify-content: center;
        list-style: none;
        margin: 0px;
        padding: 0px;
        margin: auto;
    }

    .newsletter-display-version li {
        text-align: center;
    }

    .newsletter-display-version button {
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        border: solid 2px var(--my-gray-hover);
        padding: 8px;
        min-width: 120px;
        border-radius: var(--border-radius-chamfer);
        cursor: pointer;
    }

        .newsletter-display-version button.active {
            background-color: var(--primary);
            color: var(--primary-text);
            border: solid 2px var(--primary-hover);
        }

        .newsletter-display-version button:hover, .newsletter-display-version button:focus {
            background-color: var(--secondary);
            color: var(--secondary-hover-text);
            border: solid 2px var(--secondary);
        }

.newsletter-web-version, .newsletter-email-version {
    display: none;
}

    .newsletter-web-version.active, .newsletter-email-version.active {
        display: grid;
    }

#divNewsletterClass {
    display: grid;
    grid-template-columns: 1fr 600px;
    gap: 10px;
    align-items: start;
}

#divNewsletterEdit, .edit-info-newsletter-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.newsletter-image.no-image {
    display: none;
}

.newsletter-logo {
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 600px;
    padding: 5px 20px;
}

.newsletter-image {
    height: 130px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

    .newsletter-image img {
        margin: 0px;
        padding: 0px;
        width: auto;
        max-width: 100%;
        height: auto;
    }

.newsletter-header {
    padding: 5px 20px;
}

    .newsletter-header p {
        margin: 0px;
        margin-bottom: 4px;
        padding: 0px;
        padding-bottom: 2px;
    }


        .newsletter-header p:first-child {
            margin-top: 15px;
            font-size: var(--font-size-extra-large);
            font-weight: bold;
        }

.newsletter-content {
    height: 80px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    text-align: center;
}

.newsletter-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px 8px;
}

.newsletter-footer-social {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    text-align: center;
}

/*-- newsletter - production email --*/

.newsletter-preview-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}

    .newsletter-preview-header p {
        margin: 0px;
        padding: 4px;
    }

    .newsletter-preview-header button {
        border-radius: var(--border-radius-chamfer);
        padding: 8px !important;
        width: max-content;
        height: 44px;
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 0px;
        background-color: var(--background-1);
        color: var(--background-1-text);
        font-size: var(--font-size);
    }

    .newsletter-preview-header div[id*="copy-message-"] {
        grid-column: span 2;
    }

.newsletter-preview iframe {
    min-height: 600px;
    margin-top: 10px;
    width: 100%;
    height: calc(100% - 100px);
    position: absolute;
    top: 90px;
    left: 0px;
}

.newsletter-body {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    margin: 0px;
    padding: 0px;
}

.newsletter-container {
    width: 100%;
}

.newsletter-web-contents, .newsletter-email-contents {
    display: none;
}

    .newsletter-web-contents.active, .newsletter-email-contents.active {
        display: grid;
    }


.newsletter-web-stories, .newsletter-email-stories {
    border: solid 1px var(--border-gray);
    border-top: 4px var(--orange);
    background-color: var(--my-white);
    color: var(--my-white-text);
    width: 600px;
    padding: 0px;
    margin: auto;
    box-shadow: var(--box-shadow-down);
}

.newsletter-email-stories {
    width: unset;
}


.newsletter-header {
    border-bottom: solid 1px var(--border-gray);
}

.newsletter-banner {
    height: 90px;
    position: relative;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

    .newsletter-banner img {
        display: none;
    }

.newsletter-main-contents {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0px;
}

    .newsletter-main-contents > p, .newsletter-main-contents .newsletter-top-content > p, .newsletter-main-contents .story-content > p {
        padding: 5px 20px !important;
        margin: 0px !important;
        width: 100%;
        max-width: unset !important;
        display: grid;
        line-height: 1.55em;
    }

        .newsletter-main-contents .story-content > p:not([class*='notice']) {
            line-height: 1.8em;
        }

    .newsletter-main-contents p.accordion-title {
        font-size: var(--font-size-extra-large);
        font-weight: bold;
        color: var(--primary);
    }

    .newsletter-main-contents p[class*='notice'] {
        background-color: var(--light-gray);
        color: var(--light-gray-text);
        border-radius: 0px !important;
        padding-top: 15px !important;
        padding-bottom: 20px !important;
        padding-left: 120px !important;
        padding-right: 20px !important;
        display: block;
    }

    .newsletter-main-contents .notice-date:before,
    .newsletter-main-contents .notice-time:before,
    .newsletter-main-contents .notice-event:before {
        top: 15px;
        left: 40px;
    }

    .newsletter-main-contents img {
        max-width: 100%;
        height: auto;
        margin: auto;
    }

.newsletter-footer {
    margin: auto;
    margin-top: 15px;
    max-width: 600px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    background-color: var(--my-gray);
    color: var(--my-gray-text);
}

    .newsletter-footer > div {
        min-width: 250px;
        flex: 49%;
    }

.newsletter-footer-show-rows > div {
    min-width: 600px;
    flex: 100%;
}

.newsletter-main-contents .story-content:nth-child(even) {
    background-color: var(--light-blue);
    color: var(--light-blue-text);
    border-top: solid 1px var(--titan-blue);
    border-bottom: solid 1px var(--titan-blue);
}

.newsletter-footer-content-center > div {
    display: grid;
    justify-content: center;
}

.newsletter-footer-content-left ul, .newsletter-footer-social-left ul {
    display: grid;
    justify-content: start;
    width: fit-content;
}

.newsletter-footer-content-center ul, .newsletter-footer-social-center ul {
    display: grid;
    justify-content: center;
    width: fit-content;
}

.newsletter-footer-content-right ul, .newsletter-footer-social-right ul {
    display: grid;
    justify-content: end;
    width: fit-content;
}
/*-- interface --*/
.newsletter-preview {
    display: none;
}

.info-block-newsletter .newsletter-preview {
    position: relative;
    display: grid;
    align-content: start;
}

.info-block-newsletter .newsletter-holder {
    display: grid;
    grid-template-columns: 660px minmax(660px, 1fr);
    gap: 10px;
}

.info-block-newsletter .info-block-item {
    grid-template-columns: 1fr;
    grid-template-areas: "Meta"
        "Editor";
}

.info-block-newsletter .edit-info-block-meta {
    width: 100%;
}

    .info-block-newsletter .edit-info-block-meta [button-text='Categories'],
    .info-block-newsletter .edit-info-block-meta [button-text='Tags'],
    .info-block-newsletter .edit-info-block-meta [button-text='Events'],
    .info-block-newsletter .edit-info-block-meta [button-text='Hours'],
    .info-block-newsletter .edit-info-block-meta [button-text='Details'] {
        display: none;
    }

/*-- NEWSLETTER PUBLIC PAGE INTERFACE --*/

.newsletter-holder {
    display: grid;
    grid-template-columns: minmax(200px, 350px) minmax(600px, 1fr);
    gap: 20px;
}

.newsletter-titles {
    border: solid 1px var(--border-gray);
    padding: 12px;
    border-radius: var(--border-radius-chamfer);
    height: fit-content;
    position: sticky;
    top: 110px;
}

.newsletter-titles-holder div {
    padding: 4px;
    margin: 0px;
    border-bottom: 1px solid var(--border-gray);
    display: grid;
    width: 100%;
    justify-content: end;
}

    .newsletter-titles-holder div:last-child {
        border-bottom: 0px;
    }

.newsletter-titles button {
    padding: 8px;
    margin: 0px;
    font-size: var(--font-size-reduced);
    border: 0px;
    border-bottom: solid 2px transparent;
    background-color: inherit;
    color: var(--secondary);
    font-weight: bold;
    cursor: pointer;
}

.dark-mode .newsletter-titles button {
    color: var(--dark-mode-medium-blue-headers);
}

.newsletter-titles button:hover {
    border-bottom: solid 2px var(--orange);
}

.newsletter-titles p {
    padding: 2px;
    margin: 0px;
    font-size: var(--font-size-small);
    text-align: right
}

.newsletter-titles .show-titles {
    display: none;
}

.news-shell {
    width: 100%;
    padding: 20px;
    position: relative;
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    border-radius: var(--border-radius-chamfer);
}

.news {
    margin: auto;
    width: 100%;
    max-width: 600px;
    border: solid 1px var(--border-gray);
    background-color: var(--white);
    color: var(--white-text);
    border-top: solid 4px var(--orange);
    box-shadow: var(--box-shadow-down);
}

.newsletter-data .newsletter-banner {
    padding: 0px;
    margin: 0px;
    display: grid;
    background-image: unset;
    height: unset;
}

    .newsletter-data .newsletter-banner img {
        display: grid;
        width: 100%;
        max-width: 600px;
        height: auto;
        max-height: 125px;
        padding: 0;
        margin: 0;
        object-fit: cover;
    }

.newsletter-data .newsletter-top > * {
    padding-left: 40px;
    margin: 0px;
}

    .newsletter-data .newsletter-top > *:first-child {
        margin: 0px;
        background-color: var(--primary);
        color: var(--primary-text);
        padding: 20px 30px;
        font-size: var(--font-size-large);
    }

.newsletter-data .newsletter-top ul.flex-list {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding-left: 0px;
    width: 100%;
}

    .newsletter-data .newsletter-top ul.flex-list li {
        flex-basis: 33%;
        flex: 1;
        min-width: unset;
        justify-content: center;
        display: grid;
        padding: 8px;
        margin: 0px;
        align-items: center;
        align-content: center;
        text-align: center;
    }

.newsletter-data .newsletter-contents {
    /*padding: 0px 0px 20px 0px;*/
    margin: 0px;
}

    .newsletter-data .newsletter-contents > * {
        padding: 10px 40px 5px 40px;
        width: 100%;
        margin: 0px;
    }

    .newsletter-data .newsletter-contents p {
        padding: 0px 30px 10px 30px;
        margin: 0px;
        font-size: var(--font-size-medium);
    }

    .newsletter-data .newsletter-contents > ul {
        padding: 15px 40px;
        padding-left: 80px;
    }

    .newsletter-data .newsletter-contents p[class*='notice'] {
        padding-left: 100px !important;
        padding: 30px;
        margin: 0px;
        border-radius: 0px;
        background-color: var(--light-gray);
        color: var(--light-gray-text);
        width: 100%;
        max-width: 100%;
    }

.dark-mode .newsletter-data .newsletter-contents p[class*='notice'] {
    background-color: var(--my-black-dark-hover);
    color: var(--my-black-dark-hover-text);
}

.newsletter-data .newsletter-contents p[class*='notice']:before {
    left: 30px;
    top: 20px;
}

.newsletter-data .newsletter-contents p[class*='notice'] strong {
    font-size: var(--font-size-large);
    color: var(--primary);
    font-weight: bold;
    line-height: normal;
}

.dark-mode .newsletter-data .newsletter-contents p[class*='notice'] strong {
    color: var(--primary-hover);
}

.newsletter-data .newsletter-contents .block-main-title {
    font-size: var(--font-size-extra-large);
    color: var(--primary);
    padding-top: 15px;
    padding-bottom: 15px;
}

.dark-mode .newsletter-data .newsletter-contents .block-main-title {
    font-size: var(--font-size-extra-large);
    color: var(--titan-blue-dark);
}

.newsletter-data .newsletter-contents a[class*="button"] {
    border-radius: var(--border-radius-chamfer);
    margin-top: 8px;
    margin-bottom: 8px;
}

.newsletter-data .newsletter-contents img {
    max-width: 480px;
    max-height: 300px;
    height: auto;
    width: auto;
    margin: auto;
    padding: unset;
    display: grid;
}

.newsletter-data .newsletter-contents .accordion-title {
    font-size: var(--font-size-larger);
    color: var(--primary);
    padding-bottom: 15px;
    padding-top: 30px !important;
}

/*--newsletter groups --*/
.newsletter-data .newsletter-contents .newsletter-top-content,
.newsletter-data .newsletter-contents .newsletter-groups {
    padding: 0px;
}

    .newsletter-data .newsletter-contents .newsletter-groups .story-content {
        /* padding: 20px 0px;*/
        border-top: solid 2px var(--primary);
    }

        .newsletter-data .newsletter-contents .newsletter-groups .story-content > *:not([class*='notice']) {
            padding: 10px 40px 5px 40px;
            width: 100%;
            margin: 0px;
        }

        .newsletter-data .newsletter-contents .newsletter-groups .story-content ul,
        .newsletter-data .newsletter-contents .newsletter-groups .story-content ol {
            margin-left: 40px !important;
            width: calc(100% - 50px) !important;
            padding: 5px 45px 5px 15px !important;
        }

        .newsletter-data .newsletter-contents .newsletter-groups .story-content > *:last-child:not([class*='notice']) {
            padding-bottom: 20px;
        }


        .newsletter-data .newsletter-contents .newsletter-groups .story-content:nth-child(even) {
            background-color: var(--light-blue);
            color: var(--light-blue-text);
            /* border-top: dashed 1px var(--light-blue-dark);
            border-bottom: dashed 1px var(--light-blue-dark);*/
        }

.dark-mode .newsletter-data .newsletter-contents .newsletter-groups .story-content:nth-child(odd) .accordion-title {
    color: var(--medium-blue-dark);
}

.dark-mode .newsletter-data .newsletter-contents .newsletter-groups .story-content:nth-child(even) {
    background-color: var(--light-blue-dark);
    color: var(--light-blue-dark-text);
    border-top: dashed 1px var(--light-blue-dark-hover);
    border-bottom: dashed 1px var(--light-blue-dark-hover);
}

/*-- newsletter bottom --*/
.newsletter-bottom {
    max-width: 600px;
    margin: auto;
    padding: 10px;
}

    .newsletter-bottom.newsletter-footer-content-center {
        text-align: center;
    }

.newsletter-bottom-headline {
    font-size: var(--font-size-reduced);
}

.newsletter-disclaimer p {
    font-size: var(--font-size-small);
    font-weight: 400;
    font-style: italic;
    margin: 0px;
    margin: auto;
    padding: 8px;
}

/*-- newsletter small content / mobile --*/

.mobile .newsletter-holder,
.medium-content .newsletter-holder,
.small-content .newsletter-holder {
    grid-template-columns: 1fr;
}

.mobile .newsletter-titles,
.medium-content .newsletter-titles,
.small-content .newsletter-titles {
    position: relative;
    top: unset;
}

    .mobile .newsletter-titles div,
    .medium-content .newsletter-titles div,
    .small-content .newsletter-titles div {
        justify-content: start;
    }

    .mobile .newsletter-titles.has-stories,
    .medium-content .newsletter-titles.has-stories,
    .small-content .newsletter-titles.has-stories {
        display: grid;
        grid-template-columns: 1fr 50px;
        gap: 10px;
        align-items: flex-start;
    }

        .mobile .newsletter-titles.has-stories .newsletter-index button, .mobile .newsletter-titles.has-stories .newsletter-index p,
        .medium-content .newsletter-titles.has-stories .newsletter-index button, .medium-content .newsletter-titles.has-stories .newsletter-index p,
        .small-content .newsletter-titles.has-stories .newsletter-index button, .small-content .newsletter-titles.has-stories .newsletter-index p {
            text-align: left;
            justify-content: start;
            padding-left: 8px;
        }

        .mobile .newsletter-titles.has-stories:not(.active) .newsletter-index,
        .medium-content .newsletter-titles.has-stories:not(.active) .newsletter-index,
        .small-content .newsletter-titles.has-stories:not(.active) .newsletter-index {
            display: none;
        }

        .mobile .newsletter-titles.has-stories:not(.active) .newsletter-titles-holder,
        .medium-content .newsletter-titles.has-stories:not(.active) .newsletter-titles-holder,
        .small-content .newsletter-titles.has-stories:not(.active) .newsletter-titles-holder {
            margin: 0px;
        }

        .mobile .newsletter-titles.has-stories:not(.active) .newsletter-index.active,
        .medium-content .newsletter-titles.has-stories:not(.active) .newsletter-index.active,
        .small-content .newsletter-titles.has-stories:not(.active) .newsletter-index.active {
            display: grid;
            border-bottom: 0px;
        }

        mobile .newsletter-titles.has-stories.active .newsletter-titles-holder,
        .medium-content .newsletter-titles.has-stories.active .newsletter-titles-holder,
        .small-content .newsletter-titles.has-stories.active .newsletter-titles-holder {
            max-height: 200px;
            overflow-y: auto;
        }

        .mobile .newsletter-titles.has-stories .show-titles,
        .medium-content .newsletter-titles.has-stories .show-titles,
        .small-content .newsletter-titles.has-stories .show-titles {
            display: grid;
            border-bottom: 0px;
        }

            .mobile .newsletter-titles.has-stories .show-titles button,
            .medium-content .newsletter-titles.has-stories .show-titles button,
            .small-content .newsletter-titles.has-stories .show-titles button {
                border: solid 1px var(--border-gray);
                background-color: var(--my-gray);
                color: var(--my-gray-text);
                min-height: 44px;
                min-width: 44px;
                border-radius: var(--border-radius-chamfer);
                cursor: pointer;
                font-size: var(--font-size-large);
            }

                .mobile .newsletter-titles.has-stories .show-titles button:hover,
                .medium-content .newsletter-titles.has-stories .show-titles button:hover,
                .small-content .newsletter-titles.has-stories .show-titles button:hover {
                    border: solid 1px var(--my-black);
                    background-color: var(--my-gray-text);
                    color: var(--my-gray);
                    box-shadow: var(--box-shadow);
                }

.mobile .newsletter-logo,
.medium-content .newsletter-logo,
.small-content .newsletter-logo {
    width: 100%;
}

.mobile .newsletter-data .newsletter-banner img, .mobile .newsletter-data .newsletter-contents img,
.medium-content .newsletter-data .newsletter-banner img, .medium-content .newsletter-data .newsletter-contents img,
.small-content .newsletter-data .newsletter-banner img, .small-content .newsletter-data .newsletter-contents img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: unset;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+              END OF STANDARD STYLES YOU ARE                                         +
+     USE THE MY STYLE OVERRIDE CSS FILE TO ADJUST STYLES AS NEEDED                   +
+     PLEASE MAINTAIN YOUR SITE NAVIGATION SECTION IN THE MY NAVIGATION CSS FILE      +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/