/* 
Author: John Behling
Date: September 20, 2023
Description: This stylesheet is meant to work with the utah design system. Here, we will overwrite any
styles that we need to. Any custom compoenents that we style will be made here too. 
*/

/* Make sure that the page has a min height of at least  */
#page {
    position: relative; 
    overflow: clip;
    min-height: 90vh;
}

.page-padding {
    padding: 24px;
}
@media screen and (max-width: 600px) {
    .page-padding {
        padding: 0;
    }
}

/* For the link button on informational pages */
.resource-link {
    width: 300px;

}
.resource-link i {
    margin-right: 10px;
}
.resource-link a {
    padding: 10px;
}
.resource-link a::after {
    content: "\f054"; /* Unicode for the right-chevron icon in Font Awesome */
    font: var(--fa-font-solid);
    padding-left: 10px; /* Add spacing between the link text and the icon */
}

/* This is a title image card. This looks good on the informational pages */
.title-img-card {
    height: 300px;
    max-width: 800px;
    overflow: hidden;
}
.tic-title {
    text-align: center;
    padding: 15px;
    background-color: var(--primary-color-light);
}
/* 
The background image is set with an inline style.
For example:
background-image: url('/_john/glenCanyonDam.png');
*/
.tic-img {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: bottom;
}


/* This reading-text-container works well on informational pages. */
/* Setting the page text contents to have a max width will help improve readability. */
.reading-text-container {
    max-width: 800px;
}
.reading-text-container-large {
    max-width: 1000px;
}

/* ************************************************ */
/* The following styles are for the site submenu. */
/* ************************************************ */
#siteMenu {
    position: absolute;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 0px 3.2px;
    transition: all 0.5s;
    z-index: 1;
}

#siteMenu li {
    list-style-type: none;
    width: 260px;
}
#sub-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    /* position: sticky; 
    top: 10px; */
}
#sub-menu-heading h6 {
    text-wrap: nowrap;
    overflow: hidden;
    transition: all 0.5s;
}
.sticky-container{
    position: sticky;
    top: 10px;
}

#nav-collapse {
    transition: all 0.5s;
}
.site-menu-open {
    padding: 2rem 1.5rem 2rem 2rem;
    width: 315px;
}
.site-menu-open #nav-collapse {
    width: 100%;
    /* overflow will get set to visible after a slight delay so that the text doesn't appear before it's open */
}
.site-menu-open #sub-menu-heading h6 {
    width: 100px;
    padding-left: 20px;
}
.site-menu-closed {
    padding: 2rem 0.5rem;
    width: 44px;
}
.site-menu-closed #nav-collapse {
    width: 0;
    overflow: hidden;
}
.site-menu-closed #sub-menu-heading h6 {
    width: 0;
    padding-left: 0;
}
.utah-design-system .menu-side-panel ul {
    padding: 0 20px 0 20px;
    width: 200px;
}
.utah-design-system .menu-item__title {
    display: block;
}
.utah-design-system .menu-side-panel .menu-item__title a {
    border-radius: 15px;
}
.nav-menu-scroll-container {
    overflow-y: auto;
    overflow-x: visible;
    height: 80vh;
}
#toggleSiteMenu {
    background-color: rgb(238, 243, 252);
}
.page-flex-centered {
    display: flex;
    justify-content: center;
}
.page-content {
    padding: 3rem;
}
.page-content-submenu {
    padding: 3rem 1rem 3rem 5rem;
}

/* For accordions when they've been selected with a fragment identifier */
.highlighted {
    border: solid 2px var(--accent-color);
    border-radius: 5px;
    padding: 6px;
}



@media (max-width: 767px) {
    .site-menu-open {
        padding: 2rem 0.5rem 2rem 0.5rem;
        width: 260px;
    }
    #siteMenu li {
        list-style-type: none;
        width: 200px;
    }
    .tic-title {
        font-size: 30px !important;
    } 
}
@media (max-width: 400px) {
    .site-menu-closed {
        padding: 2rem 0.2rem;
        width: 22px;
    }
    #toggleSiteMenu button {
        padding: 0 2px !important;
    }
    #toggleSiteMenu svg {
        height: 12px !important;
    }
    .page-content {
        padding: 1rem;
    }
}

/* ************************************************ */
/* The following styles are for long text containers. */
/* These will include show more buttons that expand the text */
/* ************************************************ */
.long-text-clipped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    cursor: s-resize;
}
.long-text-full {
    cursor: n-resize;
}
.show-more:hover {
    cursor: pointer;
}

/* 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;
}

/* ************************************************ */
/* The following styles are for the skeletons of data tables */
/* before they are fully loaded */
/* ************************************************ */
.table-loader {
    visibility: hidden;
}

.table-loader:before {
    visibility: visible;
    display: table-caption;
    content: " ";
    width: 100%;
    height: 600px;
    background-image:
        linear-gradient(rgba(235, 235, 235, 1) 1px, transparent 0),
        linear-gradient(90deg, rgba(235, 235, 235, 1) 1px, transparent 0),
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(rgba(240, 240, 242, 1) 35px, transparent 0);

    background-repeat: repeat;

    background-size:
        1px 35px,
        calc(100% * 0.1666666666) 1px,
        30% 100%,
        2px 70px;

    background-position:
        0 0,
        0 0,
        0 0,
        0 0;

    animation: shine 0.5s infinite;
}

@keyframes shine {
    to {
        background-position:
            0 0,
            0 0,
            40% 0,
            0 0;
    }
}

/* ************************************************ */
/* The style is for the percentCircle macro
/* ************************************************ */
.percent-circle {
    border-radius: 10px;
    transition: background-color ease-in-out 0.2s;
}
.percent-circle:hover {
    cursor: pointer;
    background-color: var(--primary-color-light);
}
.percent-circle-text {
    text-anchor: middle;
    alignment-baseline: middle;
    font-family: var(--normal-font-family);
    font-weight: bold;
    fill: var(--primary-color);
    transform-origin: center;
    transform: rotate(90deg);
}

/* ************************************************ */
/* Popup Modal */
/* ************************************************ */
.simple-modal {
    --gutter: 14px;
    --modal-color: #ffffff;
    --soft-color: #fafafa;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    padding-top: 2%;
}

.simple-modal__content {
    width: 95vw;
    max-height: 90vh;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin: 0 auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

.simple-modal__content header {
    min-height: 60px;
    height: 60px;
    color: var(--gray-dark-color);
    background-color: var(--modal-color);
    display: grid;
    padding-left: var(--gutter);
    align-items: center;
    grid-template-columns: auto 60px;
    border-bottom: solid 1px var(--gray-border);
}

.simple-modal__content header h4 {
    margin: 0;
    text-align: left;
}

.simple-modal__content header .close {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 45px;
    color: var(--gray-dark-color);
    cursor: pointer;
}

.simple-modal__content header span:hover {
    opacity: 1;
}

.simple-modal__content .modal-main {
    flex: 1;
    text-align: left;
    overflow: auto;
    padding: var(--gutter);
}

.simple-modal__content footer {
    height: auto;
    text-align: right;
    border-top: solid 1px #cccccc;
    padding: var(--gutter);
    background-color: var(--soft-color);
}

.simple-modal__content footer button,
.simple-modal__content footer input {
    margin: 0;
}

.simple-modal__content footer button:not(:last-child),
.simple-modal__content footer input:not(:last-child) {
    margin-right: var(--gutter);
}
/* ************************************************ */
/* End of Modal */
/* ************************************************ */