html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 14px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  /*margin-bottom: 60px;*/
  overflow-x: hidden;
}

footer {
    /* Adjust the height as needed */
    /*background: url('~/Images/iStock-FooterBG.jpg') center/cover no-repeat;*/ /* Replace 'your-background-image.jpg' with your image path */
    /*color: white;*/ /* Text color on top of the image */
    /*overflow-x: hidden;*/
}

.nav-link {
    font-weight: bold;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the transparency (0.5 is 50%) */
}

.text-grey-white a:link{
    color: #fbfbfb;
}

.dropdown {
    position: relative;
    display: inline-block;
    /*font-family: 'Source Sans Pro',sans-serif;*/
    font-family: 'Brandon Grotesque',brandon-grotesque;
    font-weight: 500;
}

/* Style for the dropdown button (or trigger) */
.dropdown-btn {
    background-color: rgba(0,0,0,0);
    font-size: 16px;
    color: black;
    padding: 20px;
    border: none;
    cursor: pointer;
    /*font-family: 'Source Sans Pro',sans-serif;*/
    font-family: 'Brandon Grotesque',brandon-grotesque;
    font-weight: bold;
}

    .dropdown-btn:hover {
        color: #0088FF;
    }

.navbar {
    position: relative;
}

/* Navbar Toggle Button */
/* Adjusted Navbar Toggle Button */
.navbar-toggler {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 40px; /*40px;*/
    height: 40px; /*40px;*/
    background: white;
    border: none;
    cursor: pointer;
    position: relative;
    top: 0px;
    left: -10px;
    z-index: 10;
    padding: 0;
    transition: background 0.3s ease;
    outline: none;
    box-shadow: none; /* Prevent any box-shadow from showing up */
    -webkit-tap-highlight-color: transparent; /* For iOS devices */
}

    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: none; /* Remove outline for focus and active states */
        box-shadow: none; /* Remove box shadow on focus/click */
    }

    /* Adjusted Lines for Closer and Longer Appearance */
    .navbar-toggler .line {
        width: 28px; /* Slightly longer lines */
        height: 3px;
        background-color: black; /* black lines initially */
        transition: all 0.3s ease;
        border-radius: 2px;
        transform-origin: center;
    }

/* Tweak for Initial Positioning */
.line1 {
    transform: translateY(3px); /* Moves top line slightly closer */
}

.line2 {
    opacity: 1;
}

.line3 {
    transform: translateY(-3px); /* Moves bottom line slightly closer */
}

/* Transform to X on Click */
.navbar-toggler.active {
    background: white; /* White background when active */
}

    .navbar-toggler.active .line1 {
        transform: rotate(47deg) translate(8px, 10px); /* Centered intersection */
        background-color: black;
    }

    .navbar-toggler.active .line2 {
        opacity: 0; /* Hide middle line */
    }

    .navbar-toggler.active .line3 {
        transform: rotate(-47deg) translate(9px, -10px); /* Centered intersection */
        background-color: black;
    }

/* Dropdown Menu Positioning */
.dropdown-menu {
    position: absolute;
    top: 55px; /* Positioned below the toggle */
    left: 0; /* Align with the toggle on the left wall */
    /*width: 200px;*/
    width: 100vw;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
    z-index: 9;
    /*font-family: 'Source Sans Pro',sans-serif;*/
    font-family: 'Brandon Grotesque',brandon-grotesque;
    font-weight: 500;
}

.menu-item {
    position: relative;
}

    .menu-item:not(:first-child) {
        border-top: 1px solid #ccc; /* Adjust color as needed */
    }

.menu-link {
    display: block;
    padding: 10px;
    font-weight: 500;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

    .menu-link.active {
        background-color: #0088FF; /* Keeps background color when active */
        color: white; /* Text color when active */
    }

    /* Current page indicator */
    .menu-link.current, .submenu-link.current {
        background-color: #00a5bd; /* Current page background */
        color: white; /* Current page text color */
    }

    .menu-link.open {
        background-color: #0088FF;
        color: white;
    }

    .menu-link:hover,
    .menu-link.active {
        background-color: #0088FF;
        color: white;
    }

/* Chevron Style */
.chevron {
    /*float: right;*/
    transition: transform 0.3s ease;
    width: 14px;
    /*height: 26px;
    margin-top: -10px*/
}

    .chevron.active {
        transform: rotate(180deg);
    }

.chevron-current {
    /*float: right;*/
    transition: transform 0.3s ease;
}

    .chevron-current.active {
        transform: rotate(180deg);
    }

.submenu {
    display: none; /* Hidden by default */
    /*background-color: #f8f9fa;*/ /* Light background */
    margin-top: 5px;
    padding: 0px;
    border-radius: 3px;
    
}

.submenu-link {
    display: block;
    padding: 5px 10px;
    color: black;
    text-decoration: none;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 16px;
}

    /*.submenu-link:hover {
        background-color: #bbb;*/ /* Light gray hover for submenu items */
        /*color: #000;
    }*/

    /* Styles for active menu link */
    .submenu-link.active, .submenu-link:focus, .submenu-link:hover {
        background-color: #0088FF !important; /* Light gray background on click */
        color: white; /* White text */
    }

    .dropdown-menu a {
        display: block;
        color: #333;
        padding: 10px 0;
        text-decoration: none;
    }

        .dropdown-menu a:hover {
            background-color: #f0f0f0;
        }

/* Responsive: Hide toggle button on screens above 991px */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none;
    }

    .dropdown-menu {
        display: none;
    }
}

/* Show toggle button and dropdown menu on smaller screens */
@media (max-width: 991px) {
    .navbar-toggler {
        display: flex;
    }

        /* Only show dropdown when toggle button is active */
        .navbar-toggler.active + .dropdown-menu {
            display: block;
        }
}


@media (min-width: 992px) {
    .mobile-hidden {
        display: block;
    }

    .desktop-hidden {
        display: none;
    }
}

/* Show toggle button and dropdown menu on smaller screens */
@media (max-width: 991px) {
    .mobile-hidden {
        display: none;
    }

    .desktop-hidden {
        display: block;
    }
}


/* Style for the arrow/chevrons on the menu items*/
.arrow {
    margin-left: 8px;
    transition: transform 0.3s ease;
    width: 14px; /* Adjust based on your arrow image size */
    height: auto;
}

.dropdown-btn:hover .arrow {
    /*transform: rotate(180deg);*/
   /* content: url("/Images/chevron-down-blue/icons8-chevron-down-50.png");
    color: #0088FF;*/
}

/* Style for the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    color: black;
    position: absolute;
    top: calc(100% + 0px);
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-align: center;
    font-size: 14px;
    font-family: 'Source Sans Pro',sans-serif;
    font-weight: bold;
}

.hollow-chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white; /* Top border creates the "V" shape */
    transform: rotate(180deg); /* Points the "V" downwards */
}

.dropdown-content::before {
    content: "";
    position: absolute;
    top: -10px; /* Adjust this value to position the triangle */
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px; /* Adjust size of the triangle */
    border-style: solid;
    border-color: transparent transparent white transparent; /* Triangle pointing down */
}

    /* Style for individual dropdown items */
    .dropdown-content a {
        color: black;
        padding: 16px 20px;
        text-decoration: none;
        display: block;
    }

/* Show the dropdown content when hovering over the dropdown container */
.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover {
    /*background: #0094aa;
    color:#0094aa;*/
}

.dropdown-content a:hover {
    background-color: #0088FF;
    color: whitesmoke;
}
    /*form*/


@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('/fonts/Brandon-Grotesque-Font/brand_ssv/Brandon_reg.otf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/Source_Sans_3/static/SourceSans3-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('/fonts/Brandon-Grotesque-Font/brand_ssv/Brandon_bld.otf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


#FOIA {
    /*background-image: url(../Images/FOIAFormImage.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: local;
    position:center;
    width: 813px;
    height: 2124px;*/
}

.signature-pad > canvas {
    display: block;
    width: 700px;
    height: 500px;
    max-width: 1000px;
    max-height: 500px;
    margin-bottom: 5px;
}

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

.modal2 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* 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-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }