:root {
    --primary: #164A7C;
    --primary-dark: #0c4a7c;
    --accent-blue: #0071BC;
    --accent-green: #8CC63F;
    --accent-orange: #FA9800;
    --text-dark: #222;
    --text-muted: #444;
}

body {
    padding-top: 0px;
    padding-bottom: 20px;
    font-family: "Droid Sans", sans-serif;
    line-height: 2.0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Droid Sans", sans-serif;
    font-weight: bold;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.pageTitle {
    font-size:26px; 
    font-weight:normal; 
    color:#174A7D;
    padding-bottom: 25px;
    letter-spacing:-1px;
}

.pageSubTitle {
    font-size:18px; 
    font-weight:bold;
}

.btn-margin-top {
    margin-top:50px;
}

.btn-margin-right {
    margin-right:50px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.loadingIconModal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background-color: rgba( 255, 255, 255, .7 );
    background-image: url('../Images/ajax-loader.gif');
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 25%;
    /* IE 8 Fix for opacity */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
    background: rgba( 255, 255, 255, .7 ) 
                url('../Images/ajax-loader.gif')
                50% 25% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loadingIcon {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loadingIcon .loadingIconModal {
    display: block;

/* Optional fix for when a modal is displaying disabled with the rest of the page.
    This will turn off the disabled look of the page behind the modal. Modal will still
    work but page behind won't be greyed out.
    Other fix is to append the modal to the body element of the page (which is how SEAP is currently implemented)

.modal-backdrop {
    display: none;    
}
*/
}

/*Buttons*/
.btn-Large {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 24px;
    font-weight: bold;
}

.btn-Med {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 20px;
    font-weight: bold;
}

.btn-Small {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 15px;
    font-weight: bold;
}

.btn-White {
    color:#0071BC;
    background-color:white;
    border-color: #EEF4FB;
}

.btn-White:hover,
.btn-White:focus,
.btn-White:active,
.open .dropdown-toggle.btn-White {
    color:#0071BC;
    background-color:#EEF4FB;
    border-color:#EEF4FB;
}

.btn-Blue {
    color: white;
    background-color:#0071BC;
    border-color: white;
}

.btn-Blue:hover,
.btn-Blue:focus,
.btn-Blue:active,
.open .dropdown-toggle.btn-Blue {
    color:#0071BC;
    background-color:white;
    border-color:#0071BC;
}

.btn-Green {
    color: white;
    background-color:#8CC63F;
    border-color: white;
}

.btn-Green:hover,
.btn-Green:focus,
.btn-Green:active,
.open .dropdown-toggle.btn-Green {
    color:#8CC63F;
    background-color:white;
    border-color:#8CC63F;
}

.btn-Orange {
    color: white;
    background-color:#FA9800;
    border-color: white;
}

.btn-Orange:hover,
.btn-Orange:focus,
.btn-Orange:active,
.open .dropdown-toggle.btn-Orange {
    color:#FA9800;
    background-color:white;
    border-color:#FA9800;
}

/*Overriding link tag color to DOR specified color for accessibility*/
a {
    color: #005C99;
    text-decoration:underline;
}

/*Overriding default color for primary buttons to one with more contrast and DOR accessibility color*/
.btn-primary {
    background-color: var(--primary);
}


/* Header */
.top-header .container-fluid {
    padding-left: 15px;
}

.top-header a img {
    height: auto;
    width: 36px;
}

.top-header a {
    padding-right: 5px;
    font-weight: 600;
    align-items: center;
}

.dept-header {
    background: #0c4a7c;
    color: white;
    padding: 18px 0;
}

    .dept-header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 400;
        color: white;
    }

    .dept-header .container {
        padding-left: 15px;
        padding-right: 15px;
    }

/* Footer */
.site-footer {
    background: #444;
    color: white;
    padding-top: 20px;
    padding-bottom: 10px;
}

.footer-grid {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.footer-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
}
    .footer-links a {
        color: white;
        text-decoration: underline;
    }

.copyright {
    text-align: center;
    padding: 15px 10px;
    color: #ddd;
    font-size: 14px;
}

.site-footer p {
    margin: 4px 0; /* smaller vertical spacing */
    line-height: 1.4; /* optional: makes them more compact */
}

/* Hero */
.hero-section {
    background-image: url('/Content/images/Lake_Mt.png');
    background-size: cover;
    background-position: center;
    min-height: 200px;
    position: relative;
}

.hero-overlay {
    background: rgba(0,0,0,0.15);
    min-height: 200px;
}

.hero-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 200px;
}

/* Login Card */
.login-card {
    background: #efefef;
    width: 340px;
    padding: 28px;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

    .login-card h2 {
        margin-top: 0;
        font-size: 30px;
        font-weight: 500;
    }

    .login-card p {
        color: #444;
        margin-bottom: 24px;
    }

.login-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 16px;
    background: white;
    border: 2px solid #2b6ca3;
    color: #2b6ca3;
    font-size: 26px;
    text-decoration: none;
    transition: 0.2s ease;
}

    .login-btn:hover {
        background: #2b6ca3;
        color: white;
    }

/* Responsive */
@media (max-width: 768px) {

    .hero-content {
        justify-content: center;
        padding: 40px 20px;
    }

    .login-card {
        width: 100%;
    }

    .footer-grid {
        flex-direction: column;
    }

    .dept-header h1,
    .section-title,
    .info-card h3 {
        font-size: 28px;
    }

    .footer-grid {
        flex-direction: column;
        gap: 24px;
    }

    .footer-links {
        position: static;
        left: auto;
        transform: none;
        width: 100%;
    }
}

/* Content */
.content-section {
    padding: 30px 0;
}

.section-title {
    font-size: 32px;
    margin-bottom: 12px;
}

.info-card {
    background: white;
    border: 1px solid #2b6ca3;
    border-left: 5px solid #2b6ca3;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

    .info-card h3 {
        font-size: 26px;
        font-weight: 400;
        margin-top: 10px;
    }

    .info-card p {
        font-size: 18px;
        line-height: 1.7;
        color: #444;
        margin: 8px 0 14px 0;
    }

.text-link {
    color: #1565a9;
    text-decoration: underline;
    font-size: 18px;
}

.demo-banner {
    margin: 16px;
    padding: 12px 16px;
    background-color: #f8d7da;
    border: 2px solid #c62828;
    border-radius: 8px;
    color: #222;
    font-size: 16px;
}