.subNav {
    display: none;
}
.breadcrumbs {
    display: none;
}

.page {
    box-shadow: none;
    background: none;
}

.page__content-wrapper {
    padding: 0;

    margin-left: 15px;
    margin-right: 15px;
}

.welcome-box {
    border: 1px solid white;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 255, 255, 0.97);

    border-radius: 10px;
    margin-bottom: 35px;
    overflow: hidden;
}
.welcome-box--alert {
    background-color: rgba(255, 120, 120, 0.97);
}

.welcome-box__title {
    margin: 0;

    padding: 15px;
    padding-top: 10px;
    padding-bottom: 5px;

    position: relative;
}

.welcome-box__title:after {
    content: '';
    z-index: 1;
    height: 1px;
    width: calc(100% - 30px);
    position: absolute;
    bottom: -4px;
    left: 15px;
    margin-top: 0;
    background: black;
}

.welcome-box__content {
    padding: 15px;
    padding-top: 21px;
    padding-bottom: 25px;
    position: relative;
}

.welcome-box__text p {
    margin: 0;
}

.welcome-box__img {
    float: right;
    max-width: 300px;
    border-radius: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    width: 100%;
}

@media screen and (max-width: 600px) {
    .welcome-box__content {
        display: flex;
        flex-direction: column;
    }
    .welcome-box__img {
        align-self: center;
        order: 2;
        margin: 0;
    }
    .welcome-box__content {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.welcome-section {
    padding: 15px;
    
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-bottom: 35px;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.welcome-section h2 {
    color: #30567d;
    /* padding-bottom: 5px; */
    /* border-bottom: #30567d solid 3px; */
    margin: 0 0 15px 0;
    position: relative;
}

/* @media screen and (max-width: 600px) {
    .welcome-section {
        margin: 15px;
    }
} */

.wait-time-headers {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wait-time-headers h2 {
    margin: 0;
}
@media screen and (max-width: 1150px) {
    .wait-time-headers {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding-bottom: 5px;
    }
    .wait-time-headers h2 {
        margin: 0;
    }
}

.wait-time-headers:has(option[value="Drivers License"]:checked) ~ .welcome-sectioned-box__content .wait-time-list .wait-time-item__wait:not([data-queue="Drivers License"]),
.wait-time-headers:has(option[value="Title"]:checked) ~ .welcome-sectioned-box__content .wait-time-list .wait-time-item__wait:not([data-queue="Title"]),
.wait-time-headers:has(option[value="Tag Renewal"]:checked) ~ .welcome-sectioned-box__content .wait-time-list .wait-time-item__wait:not([data-queue="Tag Renewal"]) {
    display: none;
}

.wait-time-list {
    padding: 0;
}
.wait-time-item {
    list-style-type: none;
    padding: 0;
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #dfe0e1;
    
    /* font-weight: bold; */
}
.wait-time-item__name {
    flex-grow: 1;
    display: inline-block;
    padding-right: 10px;
}
.wait-time-item__wait {
    text-align: center;
}
.wait-time-item__name.wait-time-item__name a {
    text-decoration: none;
    color: black;
}
.wait-time-item__queue {
    margin-right: 5px;
}

.welcome__view-all-link.welcome__view-all-link.welcome__view-all-link {
    margin: 0;
    margin-top: 15px;
    display: inline-block;
    color: black;
    text-decoration: none;
    font-weight: 600;
}

.welcome-box__content:has(.welcomeCarousel) {
    padding: 15px;
}
.welcomeCarousel {
    display: grid;
    /* margin: 40px 0; */
    gap: 20px;
    justify-content: space-between;
    grid-template-columns: repeat(8, 1fr);
}
.welcomeCarousel a.imageTextLinkList__item {
    display: grid;
    grid-template-rows: 100px auto;

    padding-top: 10px;

    background-color: rgba(255, 255, 255, 0.7);

    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    font-weight: bold;
    color: black;

    /* width: 150px; */
    width: 100%;
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.25);
}
.welcomeCarousel a.imageTextLinkList__item:hover {
    box-shadow: 2px 2px 10px 0px rgba(var(--theme-dark-blue-rgb), 0.5);
}
.welcomeCarousel .imageTextLinkList__img-wrapper {
    width: 100%;
    height: 100px;
}
.welcomeCarousel .imageTextLinkList__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.welcomeCarousel .imageTextLinkList__item .imageTextLinkList__text {
    padding: 10px;
    text-align: center;
}
@media screen and (max-width: 1000px) {
    .welcomeCarousel {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media screen and (max-width: 550px) {
    .welcomeCarousel {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .welcomeCarousel a.imageTextLinkList__item {
        width: 100%;
        grid-template-rows: minmax(60px, min-content) auto;
    }
    .welcomeCarousel .imageTextLinkList__img {
        aspect-ratio: 3/2;
    }
    .welcomeCarousel .imageTextLinkList__img-wrapper {
        height: 100%;
    }
}


.welcome-sectioned {
    background-repeat: no-repeat;
    background-size: cover;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding: 20px;
}
.welcome-sectioned-box {
    border: 2px solid white;
    border-radius: 10px;

    padding: 5px 15px;

    background-color: white;

    overflow: hidden;
}
.welcome-sectioned-box__title,
.welcome-sectioned-box__title h2 {
    font-weight: 500;
}
.welcome-sectioned-box__title {
    margin: 0;
    margin-bottom: 20px;

    position: relative;
}
.welcome-sectioned-box__title:after {
    content: '';
    z-index: 1;
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: -4px;
    left: 0;
    margin-top: 0;
    background: black;
}

@media screen and (max-width: 900px) {
    .welcome-sectioned {
        grid: "contact contact" min-content
              "dates branches" min-content
              / 1fr 1fr;
    }
    .welcome-sectioned-box:first-child {
        grid-area: contact;
    }
    .welcome-sectioned-box:first-child .welcome-sectioned-box__content {
        column-count: 2;
        padding-bottom: 5px;
    }
    .welcome-sectioned-box:first-child .welcome-sectioned-box__content p {
        margin-top: 0;
    }
    .welcome-sectioned-box:first-child .welcome-sectioned-box__content span {
        display: inline-block;
    }
}

@media screen and (max-width: 650px) {
    .welcome-sectioned {
        grid: "contact" min-content
              "dates" min-content
              "branches" min-content
              / 1fr;
        gap: 10px;
        padding: 10px;
    }
    .welcome-sectioned-box:first-child {
        grid-area: contact;
    }
    .welcome-sectioned-box:first-child .welcome-sectioned-box__content {
        column-count: 1;
        padding-bottom: 0;
    }
}

.triangle-behind {
    z-index: 0;
    position: relative;
}
.triangle-behind--red {
    /* color: rgb(255, 60, 60); */
    --triangle-color-rgb: 255, 60, 60;
}
.triangle-behind--blue {
    --triangle-color-rgb: var(--theme-light-blue-rgb);
}
.triangle-behind--green {
    --triangle-color-rgb: var(--theme-light-green-rgb);
    --triangle-size: 300px;
}
.triangle-behind--tan {
    --triangle-color-rgb: var(--theme-tan-rgb);
    --triangle-size: 300px;
}
.triangle-behind::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--triangle-size, 200px);
    height: var(--triangle-size, 200px);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    z-index: -1;
    background: linear-gradient(182deg,
        rgba(var(--triangle-color-rgb), 0.4),
        rgba(var(--triangle-color-rgb), 0) 50px,
        rgba(var(--triangle-color-rgb), 0));
}

@media screen and (max-width: 900px) {
    .news-list {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media screen and (max-width: 800px) {
    .news-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 450px) {
    .news-list {
        grid-template-columns: 1fr;
    }
}

.welcome-sectioned-box--dates {
    display: flex;
    flex-direction: column;
}
.welcome-sectioned-box--dates .welcome-sectioned-box__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.welcome-sectioned-box--dates .welcome__view-all-link.welcome__view-all-link.welcome__view-all-link {
    margin-bottom: 15px;
}

.welcome-section--dark-gradient {
    background: linear-gradient(to bottom, var(--theme-dark-blue), var(--theme-light-blue));
    color: white;
    position: relative;
}
.welcome-section--dark-gradient :is(h2, .welcome__view-all-link.welcome__view-all-link) {
    color: white;
}
.welcome-section--dark-gradient::before {
    --triangle-color-rgb: 255, 255, 255;
    --triangle-size: 400px;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--triangle-size, 200px);
    height: var(--triangle-size, 200px);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    --loc: 100px;
    --size: 10px;
    --size2: 5px;
    --offset: 100px;
    background: linear-gradient(135deg,
        rgba(var(--triangle-color-rgb), 0),
        rgba(var(--triangle-color-rgb), 0) calc(var(--loc) - var(--size) - 50px),
        rgba(var(--triangle-color-rgb), 0.05) calc(var(--loc) - var(--size)),
        rgba(var(--triangle-color-rgb), 0.2) var(--loc),
        rgba(var(--triangle-color-rgb), 0.05) calc(var(--loc) + var(--size)),
        rgba(var(--triangle-color-rgb), 0) calc(var(--loc) - var(--size) + 50px),
        
        rgba(var(--triangle-color-rgb), 0) calc(var(--loc) - var(--size2) - 50px + var(--offset)),
        rgba(var(--triangle-color-rgb), 0.05) calc(var(--loc) - var(--size2) + var(--offset)),
        rgba(var(--triangle-color-rgb), 0.2) calc(var(--loc) + var(--offset)),
        rgba(var(--triangle-color-rgb), 0.05) calc(var(--loc) + var(--size2) + var(--offset)),
        rgba(var(--triangle-color-rgb), 0) calc(var(--loc) - var(--size2) + 50px + var(--offset)),
        rgba(var(--triangle-color-rgb), 0));
}

.welcome-section--dark-gradient::after {
    rotate: 180deg;
    z-index: -1;
    --triangle-color-rgb: 255, 255, 255;
    --triangle-size: 400px;
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: var(--triangle-size, 200px);
    height: var(--triangle-size, 200px);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    --loc: 100px;
    --size: 10px;
    --size2: 5px;
    --offset: 100px;
    background: linear-gradient(135deg,
        rgba(var(--triangle-color-rgb), 0),
        rgba(var(--triangle-color-rgb), 0) calc(var(--loc) - var(--size) - 50px),
        rgba(var(--triangle-color-rgb), 0.05) calc(var(--loc) - var(--size)),
        rgba(var(--triangle-color-rgb), 0.2) var(--loc),
        rgba(var(--triangle-color-rgb), 0.05) calc(var(--loc) + var(--size)),
        rgba(var(--triangle-color-rgb), 0) calc(var(--loc) - var(--size) + 50px),
        
        rgba(var(--triangle-color-rgb), 0) calc(var(--loc) - var(--size2) - 50px + var(--offset)),
        rgba(var(--triangle-color-rgb), 0.05) calc(var(--loc) - var(--size2) + var(--offset)),
        rgba(var(--triangle-color-rgb), 0.2) calc(var(--loc) + var(--offset)),
        rgba(var(--triangle-color-rgb), 0.05) calc(var(--loc) + var(--size2) + var(--offset)),
        rgba(var(--triangle-color-rgb), 0) calc(var(--loc) - var(--size2) + 50px + var(--offset)),
        rgba(var(--triangle-color-rgb), 0));
}

.faq-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    gap: 10px;
}
.faq-list {
    padding: 0;
    margin: 0;
    position: relative;
}
.faq-list li {
    margin-bottom: 15px;
    margin-left: 20px;
    break-inside: avoid;
}
.faq-list.faq-list li a {
    color: white;
}

@media screen and (max-width: 800px) {
    .faq-lists {
        grid-template-columns: 1fr;
    }
}