﻿/*#dashboard {
display: grid;
gap: 20px;
max-width: 900px;
margin: 40px auto;
padding: 80px 20px;
box-sizing: border-box;
}*/

#progress,
#task-grid {
background-color: light-dark(#fff, #383838);
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dx-menu-item-text.menu-AppName {
font-size: 30px;
}

.dx-menu {
    width: 80%;
    margin: auto;
    margin-top: 50px;
    border-radius: 10px;
    align-content: center;
    padding-bottom: 50px;
    display: flex;
    border-bottom: solid 1px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}

.dx-menu-horizontal {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}
.dx-menu-base .dx-menu-items-container {
    display: flex;
    flex-wrap: wrap;
}
.dx-menu-horizontal .dx-menu-item-wrapper {
    flex-grow: 0;
}
    .dx-menu-item {
        color: #000;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 24px;
        font-weight: 500;
        letter-spacing: -0.01em;
        line-height: 2em;
        /*text-alignment: left;*/
        color: rgb(74, 74, 74);
    }
#navListContainer {
    margin-left: auto;
    margin-right: auto;
}
    #navListContainer li {
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 18px;
    }

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--bs-navbar-active-color);
    background-color: #eee;
}


    .dx-menu-item.dx-state-focused, .dx-menu-item.dx-state-hover {
        /*background-color: #0561ff;*/
        text-decoration: underline;
    }

.dx-menu-item-expanded, .dx-menu-item-expanded.dx-state-focused, .dx-menu-item-expanded.dx-state-hover {
/* color: #fff;
background-color: #0561ff;*/
text-decoration: underline
}

.dx-context-menu .dx-submenu {
/*background-color: #0561ff;*/
border-radius: 4px;
box-shadow: rgba(0,0,0,.12) 0 2px 7.2px 0,rgba(0,0,0,.14) 0 8px 16px 0;
}

#static-menu {
    text-align:center;
width: 80%;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
margin-top: 20px;
display: flex;
border-bottom: 1px solid #ededed;
}

#static-menu .site-logo {
    width: 75px;
}

#static-menu .site-name {
    font-family: "Inter", "Inter Placeholder", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4em;
    color: rgb(74, 74, 74);
}

#static-menu .button-group {
    margin-left: auto;
    display: grid;
    /*align-items:center;*/
}
    /*  #static-menu .button-left.blue {
    border-bottom-width: 1px;
    border-color: rgb(34, 34, 34);
    border-left-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-top-width: 1px;
    background-color: rgb(5, 97, 255);
    border-radius: 999px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 6px 0px;
    padding: 10px 30px 10px 30px;
    margin-right: 20px;
    opacity: 1;
    will-change: transform;
    transform: none;
    color: rgb(246, 246, 246);
    font-weight: 700;
    font-size: 22px;
}*/
   .button-group a {
        text-decoration: none;
        text-decoration-color: #fff;
    }

        .button-group a:hover
         {
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-decoration-color: #fff;
            text-underline-offset: 5px;
        }

.button-left.blue, 
.btn-center.blue {
    background-color: rgb(5, 97, 255);
}

.button-left.red ,
    .btn-center.red {
        background-color: rgb(177, 8, 47);
    }

    #static-menu .button-left,
    .btn-center {
        border-bottom-width: 1px;
        border-color: rgb(34, 34, 34);
        border-left-width: 1px;
        border-right-width: 1px;
        border-style: solid;
        border-top-width: 1px;
        border-radius: 999px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 6px 0px;
        padding: 10px 30px 10px 30px;
        margin-right: 20px;
        opacity: 1;
        will-change: transform;
        transform: none;
        color: rgb(246, 246, 246);
        font-weight: 700;
        font-size: 22px;
    }

    .button-group .btn-center {
        margin-top: 10px;
        /*width: 30%;*/
    }

    #action-buttons {
        margin-top: 10px;
        margin-bottom: 15px;
    }

    div.cal-box {
        border-top: 1px solid #000;
    }

    footer .social-links {
        padding-top: 10px;
        padding-bottom: 20px;
    }

        footer .social-links a {
            padding-left: 10px;
            padding-right: 10px;
            text-decoration: none;
        }

            footer .social-links a img {
                height: 32px;
            }

    footer.footer {
        text-align: center;
        line-height: unset !important;
        padding-top: 30px;
        margin-top: 50px;
        background-color: #000;
        color: #fff;
    }

    body {
        min-height: 100vh;
        padding-bottom: 120px;
    }

        body h1.page-title {
            font-family: Inter, Inter Placeholder, sans-serif;
            font-size: 34px;
            font-weight: 700;
            padding-top: 12px;
        }

        body div.page-info p {
            font-family: Inter, Inter Placeholder, sans-serif;
            font-size: 18px;
            font-weight: 400;
            padding-top: 12px;
        }

        body div.page-text {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }

            body div.page-text h1.page-title {
                padding-top: 40px;
                padding-bottom: 40px;
            }

            body div.page-text p,
            body div.page-text ul li {
                font-family: Inter, Inter Placeholder, sans-serif;
                font-size: 18px;
                /*font-weight: 700;*/
                /*padding-top: 12px;*/
            }

            body div.page-text ul.action-items {
                list-style-type: none;
            }

                body div.page-text ul.action-items li {
                    /* padding-left: 10px;*/
                }

                    body div.page-text ul.action-items li::before {
                        content: "👉";
                        margin-right: 15px;
                    }

    .btn-center {
        margin-left: auto;
        margin-right: auto;
    }

    .w-300 {
        width: 300px;
    }

    .btn-grey {
        background-color: rgb(161,159,159);
        padding: 10px;
        border-radius: 10px;
        border-color: #000;
        border-width: 1px;
        border-style: solid;
        box-shadow: rgba(0,0,0,0.25) 0px 3px 0px 0px;
    }

    .blue-info {
        color: rgb(5, 97, 255);
    }

.phoneContact > .website {
}
.phoneContact .btn {
   /* padding-left: 20px !important;
    padding-right: 20px !important;*/

    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border-radius: 50px;
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    box-shadow: rgba(0,0,0,0.25) 0px 3px 0px 0px;
    text-align: center;
}
.btn-red {
    background-color: rgb(255, 0, 0);
}

    .btn-red:hover {
        background-color: rgb(255, 116, 116);
    }
.btn-green {
    background-color: rgb(0, 155, 0);
}

    .btn-green:hover {
        background-color: rgb(97, 212, 97);
        
    }
.btn.btn-blue {
    background-color: rgb(5, 97, 255);
    
}
.btn.btn-blue:hover {
    background-color: rgb(76, 141, 252);
   
}
    .btn.btn-blue a, .btn.btn-blue i,
    .btn.btn-green a, .btn.btn-green i,
    .btn.btn-red a, .btn.btn-red i {
        color: #fff;
        text-decoration: none;
    }
    
    .phoneContact .hours {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    #find-mutual-aid-grid p {
        padding-top: 2px;
    }

    #find-mutual-aid-grid .notes {
        font-size: 14px;
    }

    #find-mutual-aid-grid .phoneContact p {
        font-size: 16px;
        font-weight: 700;
    }

    a.btn {
        color: #000;
        text-decoration: none;
    }

    p.btn {
        margin-bottom: 0px;
    }

    .btn-grey:hover {
        background-color: rgb(221, 221, 221);
    }

    .page-banner {
        /*height: 400px;*/
        overflow: hidden;
        position: relative; /* Good practice for context */
        display: flex;
        /*align-items: center;*/ /* Vertically centers the text block */
        justify-content: center; /* Horizontally centers the text block */
        /*font-size: 0;*/ /* Kill inherited text spacing */
        /*line-height: 0;*/ /* Kill inherited line spacing */
    }


        .page-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.25); /* Black with 50% opacity */
            z-index: 1; /* Sits above image, below text */
            pointer-events: none; /* Allows clicks to pass through if needed */
        }

        .page-banner img {
            width: 100%;
            aspect-ratio: auto 6240 / 4160;
            /*display: block;*/ /* Removes tiny bottom spacing gaps */
            display: flex; /* Enables flexbox centering */
            /*object-fit: cover;*/ /* CRITICAL: Crops excess to fit while maintaining aspect ratio */
            /*object-position: center center;*/ /* Ensures the center of the image is visible */
            /*object-position: 50% 30%;*/
            position: absolute;
            transform: translate(0%, -20%);
            background-color: rgba(0, 0, 0, 0.6);
        }

@media (max-width: 768px) {
    .page-banner img {
        transform: translate(0%, 0%);
    }
}
    /* Wrapper to hold Title and Subtitle together */
    .banner-content-wrapper {
        position: relative; /* Above the image */
        z-index: 1;
        text-align: center; /* Centers text inside the wrapper */
        color: white; /* Ensure text is visible against image */
        width: 100%; /* Prevents title from stretching too wide */
        padding: 0 20px; /* Safety padding */
        margin-top: 18%;
        margin-bottom: 2%;
    }
        /* Title Styling */
        .banner-content-wrapper div.banner-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
        }
        /* Subtitle Box Styling */
        .banner-content-wrapper div.banner-subtitle {
            display: inline-block;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 700;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            width: 80%;
        }

    .contact-team-block {
        /* Light grey background */
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 15px;
        border-left: 4px solid #ccc; /* Optional: adds a nice visual accent */
    }

    .team-name {
        font-weight: 700; /* Bolder weight */
        font-size: 1.2rem;
        color: #222; /* Darker than regular black for emphasis */
        margin-bottom: 5px;
    }

    .team-email {
        font-weight: 400; /* Normal weight */
        font-size: 1rem;
        color: #333; /* Standard dark text */
        margin-bottom: 10px;
    }

    .team-purpose {
        font-style: italic; /* Italicized */
        font-weight: 400;
        font-size: 0.95rem;
        color: #555; /* Slightly lighter than regular black (regular is usually #333 or #000) */
        line-height: 1.5;
    }

    div.image-80-width {
        margin-top: 20px;
    }

    .image-80-width img {
        width: 80%;
    }

    .full-width-image img {
        width: 100%;
    }

    .margin-center {
        margin-left: auto;
        margin-right: auto;
    }

    .verticle-center {
        margin-top: auto;
        margin-bottom: auto !important;
    }




    .ma-block-holder {
        /* Light grey background */
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
        /*margin-bottom: 15px;*/
        margin-top: 15px;
        border-left: 4px solid #ccc; /* Optional: adds a nice visual accent */
    }

    .ma-title {
        font-weight: 700; /* Bolder weight */
        font-size: 36px;
        color: #222; /* Darker than regular black for emphasis */
        margin-bottom: 5px;
    }

    .ma-tagline {
        font-weight: 400; /* Normal weight */
        font-size: 24px;
        font-style: italic;
        color: #333; /* Standard dark text */
        margin-bottom: 10px;
    }

    .xx-i {
        margin-left: auto;
        margin-right: 15px;
        display: flex;
        float: right;
    }

        .xx-i a {
            color: #666666 !important;
            text-decoration: none;
        }

    .discalaimer-notice {
        color: rgb(112, 112, 112);
        font-style: italic;
    }


.navbar-toggler {
    margin-left: auto;
    margin-right: auto;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}


@media (prefers-reduced-motion: reduce) {
    .nav-link {
   /*     margin-left:auto;
        margin-right:auto;*/
        text-align:center;
    }
    .navbar-nav .dropdown-menu {
        text-align: center;
    }
}



.fc-view-container tr {
    border-color: #ddd;
}
.fc-time-grid-container, .fc-time-grid {
    height: 100% !important;
}

.dx-field-value-static, .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button) {
    width: 80%;
    float:left;
}

.dx-field-label {
    width: 20% ;
   
}

.dx-tag-remove-button.white::before {
  
    color: #ffffff;
}
.dx-tag-remove-button.blackText::before {
    color: #000000;
}
