/* 
When upating the contents of this file to the latest version of the utah design system, do not 
replace the styles below this comment as they are our own.

*************************************************
CUSTOM ADDITIONS
*************************************************
*/
.utah-design-system {
    --danger-color-dark: #630000;
    --success-color: #00c300;

}
.utah-design-system button.utah-logo-svg svg {
    fill: var(--gray-3-1-contrast);
}
.utah-design-system .footer-social-media-bar__icon-bar a.icon-link {
    color: white;
    text-decoration: none;
}
.utah-design-system .footer-social-media-bar__icon-bar a.icon-link:hover {
    color: white;
}
.utah-design-system .footer-agency-information__title {
    margin-top: 0;
}
.utah-design-system .button--danger-color {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: #fff;  
}
.utah-design-system .button--danger-color:hover {
    background-color: var(--danger-color-dark);
    color: #fff
}
.utah-design-system .button--danger-color:hover svg {
    fill: #fff
}


/* **************************************************** */
/* A little hack to overwrite the Utah Id Sign in button text. We want it to be invisible until the js code changes it in headerSettings.js */
/* **************************************************** */
.utah-design-system .utds-utah-id__button {
    opacity: 0;
}

/* **************************************************** */
/* Fix the social media bar so the icons wrap */
/* **************************************************** */
.utah-design-system .footer-social-media-bar {
    flex-wrap: wrap;
}
.utah-design-system .footer-social-media-bar__icon-bar {
    flex-wrap: wrap;
}

/* **************************************************** */
/* For the menu item bar under the header while it's loading */
/* **************************************************** */
.menu-items-loading {
    height: 100%;
    width: 100%;
    background: linear-gradient(-90deg, #efefef 0%, #fcfcfc 50%, #efefef 100%);
    background-size: 400% 400%;
    -webkit-animation: menu-items-loading 1.2s ease-in-out infinite;
            animation: menu-items-loading 1.2s ease-in-out infinite;    
}

.menu-items-loading .main-menu__wrapper {
    pointer-events: none;
    opacity: 0;
}


@-webkit-keyframes menu-items-loading {
0% {
    background-position: 0% 0%;
}
100% {
    background-position: -135% 0%;
}
}
@keyframes menu-items-loading {
0% {
    background-position: 0% 0%;
}
100% {
    background-position: -135% 0%;
}
}

/* Custom design for the accordions */
.utah-design-system .accordion__header.accordion__header.button--primary-color {
    border-left: solid 10px var(--secondary-color) !important;
}

.utah-design-system input[type=search], .utah-design-system textarea {
    color: var(--gray-color);
    min-height: var(--form-ele-medium);
    border-radius: var(--radius-small);
    box-sizing: border-box;
    border: 1px solid var(--gray-color);
    width: 100%;
    padding: 0 var(--spacing-xs);
    box-shadow: var(--hover-gray-color) 0 0 0 0;
    transition: box-shadow var(--timing-xquick) ease-in-out;
}

.utah-design-system input[type=number], .utah-design-system textarea {
    color: var(--gray-color);
    min-height: var(--form-ele-medium);
    border-radius: var(--radius-small);
    box-sizing: border-box;
    border: 1px solid var(--gray-color);
    width: 100%;
    padding: 0 var(--spacing-xs);
    box-shadow: var(--hover-gray-color) 0 0 0 0;
    transition: box-shadow var(--timing-xquick) ease-in-out;
}


/* **************************************************** */
/* For the selected link in the site header menu */
/* **************************************************** */
.selected-link {
    border-left: solid 5px gray !important;
}
.sl-primary {
    border-color: var(--primary-color) !important;
}
.sl-secondary {
    border-color: var(--accent-color) !important;
}

.selected-link > span > .vertical-menu__button-title, 
.selected-link > span > .vertical-menu__link-title, 
.selected-link .menu-item__button-title {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


/* Define a CSS animation for color transition */
@keyframes colorTransition {
    0% { color: var(--success-color); }
    100% { color: var(--gray-color); }
}
.color-animation {
    animation: colorTransition 1.5s linear;
}

@media screen and (max-width: 768px) {
    .utah-design-system #state-header-img {
        height: 60px !important;
    }
    .utah-design-system #wr-logo-text span:nth-child(1) {
        font-size: 17px !important;
        font-weight: 600 !important;
        line-height: 10px !important;
    }
    .utah-design-system #wr-logo-text span:nth-child(2) {
        font-size: 25px !important;
        font-weight: bolder !important;
        line-height: 13px !important;
    } 
}

@media screen and (max-width: 480px) {
    .utds-header .utds-logo-vert-line:last-of-type {
        display: none;
    }
    .utah-design-system .utds-title-wrapper {
        padding: 0;
    }
    .utah-design-system #wr-logo-text span:nth-child(1)::before {
        content: "Utah ";
    }
    .utah-design-system #testEnvInfo {
        display: none !important;
    }
    .testEnvBanner:first-of-type {
        display: flex !important;
    }
}

@media screen and (max-width: 330px) {
    .utds-header .utah-logo-svg {
        display: none;
    }
    .utds-header .utds-logo-vert-line:first-of-type {
        display: none;
    }    
}



.utah-design-system {
    --primary-color: #0057a4;
    --primary-color-dark: #2f3d5a;
    --primary-color-light: #eef3fc;
    --gray-on-primary-color: #FFF;
    --secondary-color: #b2441e;
    --secondary-color-dark: #71321c;
    --secondary-color-light: #eef6f5;
    --gray-on-secondary-color: #FFF;
    --accent-color: #ffd26b;
    --accent-color-dark: #ffb100;
    --accent-color-light: #ffe3a5;
    --gray-on-accent-color: #474747;
    --form-ele-color: #2765e4;
    --form-ele-color-light: #7aa0ee;
    --form-ele-disabled-color: #949494;
    --gray-color: #474747;
    --gray-medium-color: #616161;
    --gray-3-1-contrast: #949494;
    --gray-medium-light-color: #d7d7d7;
    --gray-light-color: #f1f1f1;
    --gray-dark-color: #333333;
    --disabled-gray: rgba(0, 0, 0, .05);
    --hover-gray-color: rgba(0, 0, 0, .07);
    --hover-gray-color-opaque: rgba(233, 233, 233);
    --code-color: #e4e4e4;
    --gray-border: #d7d7d7;
    --danger-color: #ba0000;
    --warning-color: #ba6300;
    --info-color: var(--secondary-color);
    --success-color: #2f8700;
    --timing-xquick: .1s;
    --timing-quick: .2s;
    --timing-medium: .4s;
    --timing-slow: .6s;
    --radius-small1x: 3px;
    --radius-small: 6px;
    --radius-medium: 9px;
    --radius-large: 12px;
    --radius-circle: 999px;
    --form-ele-small4x: .75rem;
    --form-ele-small3x: 1rem;
    --form-ele-small2x: 1.25rem;
    --form-ele-small1x: 1.5rem;
    --form-ele-small: 1.875rem;
    --form-ele-medium: 2.25rem;
    --form-ele-large: 2.5rem;
    --form-ele-large1x: 3.125rem;
    --form-checkbox-small: .875rem;
    --form-checkbox-medium: 1.125rem;
    --form-checkbox-large: 1.375rem;
    --content-width-narrow: 808px;
    --content-width-medium: 1016px;
    --content-width: 1224px;
    --content-width-wide: 1432px;
    --documentation-width: 700px;
    --documentation-left-width: 200px;
    --documentation-right-width: 200px;
    --documentation-padding: var(--spacing-2xl) var(--spacing-xl);
    --documentation-padding-small: var(--spacing-xl) var(--spacing);
    --drop-shadow-color: rgba(0, 0, 0, .3);
    --drop-shadow-color-top: rgba(0, 0, 0, .15);
    --elevation-small: 0 3px 6px var(--drop-shadow-color);
    --elevation-medium: 0 6px 12px var(--drop-shadow-color);
    --elevation-large: 0 12px 16px var(--drop-shadow-color);
    --elevation-small-borderless: 0 3px 6px var(--drop-shadow-color), 0 -3px 3px var(--drop-shadow-color-top);
    --elevation-medium-borderless: 0 6px 12px var(--drop-shadow-color), 0 -3px 6px var(--drop-shadow-color-top);
    --elevation-large-borderless: 0 12px 16px var(--drop-shadow-color), 0 -3px 12px var(--drop-shadow-color-top)
}