:root {

    --md-primary-fg-color: #06648F;
    --md-primary-fg-color--light: #ECB7B7;
    --md-primary-fg-color--dark:  #90030C;
    --header-font: lato, sans-serif;
    --body-font: raleway, sans-serif;



    --cutBlue: #06648F;
    --slateGray: #5F6062;
    --metalGray: #D3D4D1;
    --techJade: #8EC7B7;
    --white: #FFFFFF;
}




/* header section styling + fixes */
.md-header__button.md-logo img {
    width: 15rem;
    height: auto;
}

.md-header__inner.md-grid {
    padding: 0 2rem;
}

.md-header_button .md-icon {
    display: block;
}

.md-header__button:hover {
    opacity: 1;
}

.md-header__ellipsis {
    display: flex;
    text-align: end;
}

.md-header__topic {
    height: auto;
    font-size: 2rem;
    font-family: var(--header-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
    font-weight: bold;

}


.noTOCh2 {
    font-family: var(--header-font);
    font-size: 1.5em;
    font-weight: bold;
    color: var(--cutBlue);
}

.md-typeset h1, .md-typeset h2, .md-typeset h3 {
    font-family: var(--header-font);
    font-weight: bold;
}



.md-typeset h1 {

    display: flex;
    color: var(--cutBlue);
    width: 100%;
    height: auto;
    padding: 1em;
    background-color: var(--metalGray);
    font-size: 4rem;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin: 0;

    
}

.mainheader {
    background-image: url("../img/CutLogix_icon_metal.png");
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;

    h1 {
        background-color: transparent;
    }

}

.md-typeset h2 {



    display: flex;
    margin: 0;
    color: var(--techJade);
    width: 100%;
    height: 3em;
    background-color: var(--slateGray);
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;

}

.md-typeset h3 {
    display: flex;
    color: var(--metalGray);
    width: 100%;
    height: auto;
    padding: 0.5em;
    background-color: var(--cutBlue);
    font-size: 2em;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin: 2em 0em 0em 0em;

}






p, a {
    font-family: var(--body-font);
}



.md-tabs__link {
    color: #FFFFFF;
    opacity: 1;

}


/* Nav hover styling */

.md-nav__link[for]:hover, .md-nav__link[href]:hover, .md-nav__link[for]:focus, .md-nav__link[href]:focus {
    color: var(--techJade);
}



/* .md-ellipsis:hover {
    color: var(--techJade);

} */



/* Stuff relating to styling the navigation links and their states */
.md-nav.md-nav--primary {

    background-color: #5F6062;
    height: 100%;
    font-family: var(--header-font);

    .md-nav__item {
        background-color: #5F6062;
    }

    .md-nav__item:hover {
        color: var(--techJade);
    }

    .md-nav__item {
        color: #FFFFFF;
        font-size: 1.5em;
    }

    .md-nav__link--active {
        color: var(--techJade);
    }


}

.md-nav--primary .md-nav__title~.md-nav__list {
    background-color: var(--slateGray);
}


.md-nav__item .md-nav__link--active, .md-nav__link .md-nav__link--active {
    color: var(--techJade);
}

.linkButton {
    color: var(--white) !important;
    background-color:#06648F;
    padding: 1em;
    border-radius: 10px;
    margin: auto;
    width: 10rem;
    text-align: center;
}




@media screen and (max-width: 76.234375em) {
    .md-nav--primary .md-nav__item--active>.md-nav__link:focus, .md-nav--primary .md-nav__item--active>.md-nav__link:hover {
        color: var(--techJade);

    }


}

/* scrollbar and navigation */
@media screen and (min-width: 76.25em) {

    .md-sidebar {
        height: 100%;
    }

    html {
        scroll-padding-top: 6rem;
    }
}


/* get rid of the table of contents */

.md-sidebar--secondary:not([hidden]) {
    display: none;
}

.md-sidebar__scrollwrap {
    height: 100%;
}

.md-sidebar__inner {
    height: 100%;
}


/* page layout change */

/* navigation layout change */

.md-grid {
    width: 100%;
    margin: 0;
    max-width: 150rem;
}


.md-sidebar__scrollwrap {
    height: 100%;
    background-color: var(--slateGray);
}

.md-sidebar__inner {
    height: 100%;
}

.md-nav__list {
    height: 100%;
    background-color: var(--slateGray);
}

/* index */

.indexdiv {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    div {
        display: flex;
        flex-flow: column;
        padding: 1em;
    }

    h4 {
        font-size: 2em;
        color: var(--cutBlue);
        margin: 0;
        align-self: center;
        text-decoration: underline;
    }

    a {
        align-self: center;
    }

}

.indexdiv1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    div {
        display: flex;
        flex-flow: column;
        padding: 0em;
        min-height: 12em;
    }

    h4 {
        font-size: 2.15em;
        color: var(--cutBlue);
        margin: 0;
        align-self: center;
        text-decoration: underline;
    }

    a {
        align-self: center;
        font-size: 1.1em;
    }

}

.indexdiv2 {
    margin-top: 15px;
    font-size: 1.25em;
    color: var(--cutBlue);
    font-style: italic;
}

.indexdiv2_icon {
    display: flex; /* Make the element a flex container */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally (optional) */
}

/* Adjust the size of the image within the .indexdiv2_icon container */
.indexdiv2_icon img {
    width: 50px; /* Adjust the width as needed */
    height: auto; /* Maintain the aspect ratio */
    margin-top: 35px;
}


/* -------------------------------- Supademo window adjustments ------------------------*/
#supaWindow {
    display: none;
    padding: 0em !important;
    background-image: url("../img/icon_pattern_blue.jpg");
    
    .supaWindowIframe {
        width: 1em ;
        height: 7em;
        z-index: 1 !important;
    }
}


.closeDemo {
    position: relative;
    background-color:#90030C;
    color: #FFFFFF;
    font-size: 2em;
    font-weight: bold;
    z-index: 3 !important;
}


.supaWindowOn {
    display: block;

}

.supaWindowOff {
    display: none;

}

.demoButton {
    background-color: var(--cutBlue);
    color: #FFFFFF;
    width: auto;
    height: auto;
    margin: auto;
    padding: 1em 2em 1em 2em;
    text-align: center;
}

/* Footer */

.md-social {
    a svg {
        width: 2em;
        height: 2em;
    }
}



/* Mobile Changes */
@media screen and (max-width: 768px) {
    .md-typeset h1 {
        font-size: 9vw;
    }

    .md-typeset h2 {
        font-size: 4vw;
        padding: 0.5em;

    }

    .md-typeset h3 {
        font-size: 5vw;
    }

    .md-header__topic {
        height: auto;
        font-size: 1rem;
        font-family: var(--header-font);
    
    
    }

    .md-typeset h4 {
        font-size: 4vw;
    }

    .md-header__inner.md-grid {
        padding: 0 1rem;
    }

    .md-nav__list {
        background-color: var(--slateGray);
    }


}

/* Tablet Adjustments */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .md-typeset h1 {
        font-size: 7vw;
    }

    .md-typeset h2 {
        font-size: 2vw;
        padding: 0.5em;

    }

    .md-typeset h3 {
        font-size: 3vw;
    }

    .md-header__topic {
        height: auto;
        font-size: 1.5rem;
        font-family: var(--header-font);
    
    
    }

    .md-header__inner.md-grid {
        padding: 0 1rem;
    }

    .md-nav__list {
        background-color: var(--slateGray);
    }

    .md-sidebar {
        height: 100%;
    }


}

.helplink {
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
}

.helplist {
    padding-left: 20px;
}

.intextlist {
    text-align: left;
    padding-left: 100px;
    list-style-position: inside;
}

/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal content */
.modal-content {
    background-image: url("../img/icon_pattern_blue.jpg");
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    position: relative; /* Ensure positioning context for the close button */
}

.modal-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-iframe {
    width: 100%;
    height: 100%;
    display: flex;
    align-self: center;
}

/* Close button */
.page_help_close-container {
    position: absolute;
    top: -15px; /* Move closer to the top */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 10; /* Ensure it is above other elements */
}

.page_help_close {
    color: red;
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.page_help_close:hover,
.page_help_close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.page_help_button {
    display: flex; 
    align-items: center; 
    font-size: 26px; 
    cursor: pointer;
    margin-right: 100px;
    color: white;
    font-weight: bold;
    position: relative;
}

.page_help_button span {
    margin-right: 10px; /* Adjust the value as needed */
    color: white;
    word-break: normal; /* Disable word breaking */
}

.page_help_hover_image {
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
}

.page_help_hover_image:hover .page_help_hover_image {
    content: url('/img/clx_inverted_icon_whitebg.png');
}

/*----------------------------------------GRID STYLES----------------------------------------*/

.grid-container {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 20px; /* Adjust the gap between items as needed */
    margin-top: .5em;
    margin-bottom: .5em;
    padding-right: 20px;
    font-family: var(--body-font);
}
  
.grid-item {
    display: block;
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
}

.grid-item-flex {
    display: flex;
    align-items: center; /* Center items vertically */
}

.grid-text {
    width: 100%; /* Ensure all text items occupy the same width */
    max-width: 90%; /* Set the maximum width for text wrapping */
    word-wrap: break-word; /* Ensure long words break correctly */
    padding-left: 5px;
    list-style-type: none; /* Remove list markers */ 
}

.grid-full {
    grid-column: 1 / -1;
}

.grid-img {
    display: flex;
}

.grid-list {
    padding-left: 0 !important; /* Remove left padding */
    margin-left: 5px !important; /* Remove left margin */
    margin-top: 0px !important;
}

[dir="ltr"] .grid-list li {
    padding-left: 0 !important; /* Remove left padding from list items */
}

.nested-grid-list {
    margin-left: 2em !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

ul.grid-item.grid-list {
    margin-bottom: 0.7rem !important;
}

.grid-header1 {
    padding-left: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

.grid-header2 {
    font-weight: bold;
    text-decoration: underline;
}

/*----------------------------------------END GRID STYLES----------------------------------------*/

.dropdown-content {
    display: flex !important; /* Ensure the div takes up space */
    visibility: hidden; /* Hide the text content */
    height: 5em; /* Set the height to create space */
    overflow: hidden; /* Ensure no overflow content is visible */
}

.dropdown-content.show {
    visibility: visible; /* Show the text content */
    height: auto; /* Adjust height to fit content */
}
  
.dropdown-header {
    cursor: pointer;
}

.sub-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-top: .5em;
    text-decoration: underline;
}

.flex-container {
    display: flex;
}

.flex-item {
    /*display: flex; /* Use Flexbox for the container */
    flex: 1;
    margin-bottom: 10px;
    font-family: var(--body-font);
}

.flex-item img {
    display: block; /* Ensure the image is treated as a block element */
    margin: auto;
}

.flex-item.text {
    padding-right: 20px;
    padding-left: 5px;
}

.flex-item.text p{
    padding-top: 5px;
}

.flex-item.text ul {
    margin-top: 0px;
    padding-left: 10px;
}

.flex-item.text ul code {
    margin-top: 0;
    display: block; /* Ensure the element is treated as a block element */
    text-align: center; /* Center the text content */
    margin-left: auto; /* Center the block element horizontally */
    margin-right: auto; /* Center the block element horizontally */
    margin-top: 5px; /* Add space above the element */
    margin-bottom: 5px; /* Add space below the element */  
}

.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.popup-content{
    position: fixed; /* Stay in place */
    top: 56%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset by 50% of its own size */
    z-index: 1000; /* Ensure it sits on top */
    background-image: url("../img/icon_pattern_blue.jpg"); /* Add your background image */
    background-size: cover; /* Ensure the background image covers the entire element */
    padding: 30px; /* Add padding to make the background image slightly larger */
}

.close-popup {
    position: absolute;
    top: 5px;
    left: 50%; /* Center horizontally */
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: red;
}

.close-popup:hover {
    color: black;
}

/* GLOSSARY ALPHABET NAVIGATION AND LETTER HEADINGS*/
.alphabet-nav {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  /* Individual links */
  .alphabet-nav .alphabet-link {
    font-size: 1.0rem;     /* Increase text size */
    margin: 0 0.6rem;      /* Space between letters */
    letter-spacing: 0.05em;
    text-decoration: none;
    color: #66ccff;
  }
  
  .alphabet-nav .alphabet-link:hover {
    text-decoration: underline;
    color: #ffffff;
  }

  .glossary-note {
    margin-left: 1.6rem;  /* or padding-left */
    margin-bottom: 0.6rem;
    color: #363434;      /* optional, if you want to gray it out a bit */
    font-style: italic;  /* optional, for note style */
  }

  .letter-heading {
    font-size: 1.2rem;   /* Increase text size */
    font-weight: bold;
    color: #66ccff;
    text-decoration: underline;
  }