:root {
    --svg-color:rgb(41, 143, 204);
    --form-bg: #ffffff; 
    --d-text: #000b27;
    --flame-bgColor2: rgb(0, 105, 170); 
    --loginIn-col: rgba(0,0,0,0.94); 
    --bord-searchBar: 2px solid #6e6e6e;
    
    
}

.dark-mode  {
    --svg-color: rgb(41, 143, 204); 
    --form-bg: #ffffff; 
    --d-text: #000b27;  
    --flame-bgColor2: #298fcc;
    --loginIn-col: #fefefe;
    --bord-searchBar: 1px solid rgba(0, 0, 0, 0.2);
    
}

.nav_flex_col {
    flex-direction: column; 
}

.nav_space_around {
    justify-content: space-around; 
}

.nav_justify_center {
    justify-content: center; 
}

.nav_text_alignCen {
    text-align:center; 
}

.navArea_container {
    width: 1232px; 
}


.secLogoContainer {
    width: 1232px; 
}


.logoContainersvg {
    padding-left: .35rem; 
    margin-top: -0.25rem;
}

.heartButtonNav {
    background-color: transparent; 
    outline:none;
    border: none; 
    cursor: pointer; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: transform 0.2s ease-in-out; 
    margin-right: 0.8rem; 
    opacity: 1; 
    transition: opacity .3s ease-in-out; 
}

.heartButtonNav:hover {
    opacity: 0.75; 
}

.navbarMainContainer {
    width: 100%; 
    background-color: var(--nav-mapBg2); 
    border-bottom: var(--border-bottomOfNav);
}

.navInformational ul li {
    font-weight: 400; 
    font-size: 1rem;
    border-radius: 4px;  
}

ul li {
    padding: 0.45rem 0.45rem;
    background-color: #155a8a; 
    margin-top: 0.35rem; 
    margin-bottom: 0.35rem; 
    border-radius: 2px; 
    transition: background-color 0.33s ease-in-out; 
    opacity: 1; 
}

ul li:hover {
    background-color: var(--mobile-nav-buttBg);
}

.logoButton_container {
    width: 1.95rem; 
    height: 1rem; 
    margin-left: 0.90rem;    
}

.toggle-checkbox {
    display: none; 
}

.toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #1a8cd8; 
    border-radius: 25px; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    transition: background-color 0.3s; 
    box-shadow: var(--box-shadowLightDark); 
}

.toggle-switch {
    position: absolute; 
    width: 1rem; 
    height: 1rem; 
    background-color: white; 
    border-radius: 50%;
    transition: transform 0.3s; 
}

.toggle-checkbox:checked + .toggle-label .toggle-switch {
    transform: translateX(0.925rem); 
}

.toggle-label:active .toggle-switch {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
}

.toggle-checkbox-bottom {
    display: none; 
}

.toggle-label-bottom {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #1a8cd8; 
    border-radius: 25px; 
    height: 1.25rem; 
    width: 2.5rem; 
    position: relative; 
    transition: background-color 0.3s;
    box-shadow: var(--box-shadowLightDark);  
}

.toggle-switch-bottom {
    position: absolute; 
    width: 20px; 
    height: 18px; 
    background-color: #ffffff; 
    border-radius: 50%; 
    transition: transform 0.3s; 
}

.toggle-checkbox-bottom:checked + .toggle-label-bottom .toggle-switch-bottom {
    transform: translateX(20px); 
}

.toggle-label-bottom:active .toggle-switch-bottom {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
}

.navNewCust {
    font-weight: 700; 
    font-size: 0.875rem; 
    color: var(--text-whiteBlack); 
    transition: underline 0.23s ease-in-out; 
    font-weight: 800; 
}

.navNewCust:hover {
    text-decoration: underline; 
}

#signInNavButton {
    position: relative;
    margin-right: 0.8rem;
    margin-top: 0.03rem;
    opacity: 1; 
    transition: opacity 0.22s ease-in-out; 
}

#signInNavButton:hover {
    opacity: 0.8; 
}

#signInDropDown {
    display: none; 
    padding: 1.5rem; 
    position: absolute; 
    background-color: var(--loginIn-col); 
    z-index: 1000; 
    right: 0; 
    top: 100%; 
    width: 275px; 
    border-radius: 10px; 
    box-shadow: var(--box-shadowLightDark); 
}

#heartButtonNav {
    position: relative; 
}

#likesNavDropDown {
    display:none;
    position: absolute;
    padding: 1rem;  
    top: 100%;
    right: 2rem; 
    background-color: var(--body-bg); 
    color: var(--text-whiteBlack); 
    z-index: 1000; 
    width: 275px; 
    border-radius: 10px; 
    box-shadow: var(--box-shadowLightDark); 
    flex-direction: column; 
}

#likesNavDropDown.modal {
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 300px; 
    background-color: var(--body-bg); 
    color: var(--text-whiteBlack);
    box-shadow: var(--box-shadowLightDark); 
    border-radius: 10px;
    padding: 1.5rem;
    z-index: 1000;
    display: block;
}

/* #signInNavButton::after {
    content: '';
    position: absolute;
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-whiteBlack); 
    transition: transform 0.3s ease; 
}

#signInNavButton.flipped::after {
    transform: translateY(-50%) rotate(180deg);
} */

.navSuggestColor {
    color: var(--nav-suggestColor);
    font-size: 0.875rem; 
}

.navSuggestColor2 {
    color: var(--nav-suggestColor);
    font-size: 0.7rem; 
    text-align: center; 
}

.padTopStandNav {
    padding-top: 0.5rem; 
}

.padBotStandNav {
    padding-bottom: 0.5rem; 
}

.padTopStandNav2 {
    padding-top:1.2rem; 
}

.padBotStandNav2 {
    padding-bottom:1.2rem; 
}

.padBotStandNav4 {
    padding-bottom: 0.2rem; 
}

.nav_form_control {
    font-family: 'Inter'; 
    width: 100%; 
    padding: 0.6rem; 
    border: var(--bord-location);; 
    outline: none; 
    box-sizing: border-box; 
    border-radius: 7px; 
    background-color: var(--form-bg); 
    color: var(--d-text); 
}

.nav_form_control:focus {
    border-color: black; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
}

.nav_form_control::placeholder {
    color: var(--d-text);  
    opacity: 1; 
    font-family: 'Inter'; 
}

.navLogInButt {
    width: 100%;
    margin: 0 auto; 
    cursor: pointer;
    border: none; 
    background: #0066d9; 
    color: white; 
    font-weight: bold; 
    font-size: 1rem;
    padding-top: 0.65rem; 
    padding-bottom: 0.65rem; 
    opacity: 1; 
    transition: opacity .33s ease-in-out; 
    border-radius: 20px; 
    margin-top: 0.5rem; 
}

.navForgotPW {
    padding-bottom: 1.5rem; 
    padding-top: 0.85rem; 
    padding-left: 0.25rem; 
    opacity: 1; 
    transition: opacity .33s ease-in-out; 
}

.navForgotPW a {
    color: var(--nav-suggestColor);
    font-size: 0.875rem; 
    transition: color 0.23s ease-in-out; 
}

.navForgotPW a:hover {
    border-bottom: var(--text-blackWhite);  
}

#closeMobileSignIn {
    cursor: pointer; 
    font-size: 2.25rem; 
    color: var(--text-whiteBlack); 
    position: absolute; 
    top: 0px; 
    right: 10px; 
    z-index: 1001; 
    font-weight: 400; 
}

.logoButtMobile {
    padding: 0.75rem 1rem 1rem 0.5rem; 
}


/**************bottom Navbar*********************/ 
.bottomNavbarContainer {
    position:fixed; 
    bottom:0; 
    width: 100%; 
    z-index: 1990; 
    padding-top: 0.35rem; 
    padding-bottom: 0.35rem;
    background-color: var(--bottom-nav-color); 
    font-family: "Poppins"; 
}

.darkModeBottomToggleContainer {
    width: 35px; 
}

.bottomNavbarButtCont {
    display: flex; 
    justify-content: space-evenly; 
    align-items:center;
}

/* .bottomNavbarButt {
    border: none; 
    outline: none; 
    background-color: transparent;
    border-radius: 7px; 
    font-size: 0.85rem; 
    font-weight: 400; 
    color: var(--text-whiteBlack); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 5px; 
    cursor: pointer; 
    opacity: 1; 
    min-width: 3rem;
    transition: opacity 0.23s ease-in-out; 
    line-height: 1; 
    font-family: 'Poppins'; 
    width: 4rem;
} */


.bottomNavbarButt:hover {
    opacity: 0.6; 
}

.copyright {
    color: var(--nav-suggestColor); 
    font-size: 0.65rem; 
    text-align:center;
    padding-top: 0.55rem; 
    padding-bottom: 0.55rem;  
}

.header_link_button {
    background: transparent;
    color: #e6e6e6;
    font-weight: 500;
    padding: 0.5rem 0.75rem 0.4rem 0.75rem;;
    font-size: 0.9rem;
    transition: opacity 0.33s ease-in-out;
    opacity: 1;
    font-family: "Inter";
    border: none;
    outline: none;
    cursor: pointer;
}

.header_link_button:hover {
    opacity: 0.6; 
}

.p1r5r1r5r2 {
    border: var(--bord-searchBar); 
    border-radius: 20px;
}

#infoButtonHeaderButton {
    margin-left: 1rem; 
}

@media screen and (max-width: 576px) {
    #signInDropDown {
        padding: 3rem 4rem 3rem 4rem; 
    }

    .bottomNavbarContainer {
        background-color: var(--bottom-nav-color);
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    #signInDropDown {
        padding: 4rem 10rem 4rem 10rem; 
    }
}

@media screen and (max-width: 576px) {
    .p1r5r1r5r2 {
        width: 90%; 
    }
}

@media screen and (min-width: 578px) and (max-width: 768px) {
    .p1r5r1r5r2 {
        width: 500px; 
    }
}

@media screen and (max-width: 768px) {
    #signInDropDown {
        display: none; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100vh; 
        border-radius: 0; 
        z-index: 2100; 
        overflow: hidden; 
        box-sizing: border-box; 
        justify-content: center; 
        align-items: center; 
    }

    .p1r5r1r5r2 {
        position: absolute;
        top:3.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1900; 
    }

    #darkModeSvg svg {
        width: 22px; 
        height: 22px; 
    }

    ul li {
        background-color: var(--nav-bg2); 
        color: var(--dark-text); 
        margin: 0rem 0.5rem; 
    }

    .logoButton_container {
        display:  none; 
    }

    #heartButtonNav {
        display: none; 
    }

    #signInNavButton2 {
       display: none; 
    }

    .logoContainersvg {
        padding-left: 0.25rem; 
    }

    .scrollLeft2 {
        visibility: hidden;
    }

    .scrollRight2 {
        visibility: hidden;
    }

    .moonSvg {
        height: 18px; 
        width: 18px; 
    }

    #infoButtonHeaderButton {
        margin-left: 1.3rem; 
        margin-right: 0.5rem;
    }

    .darkModeSunMoon {
        margin-left: 0.5rem;
    }
}

@media screen and (min-width: 769px) {
    #closeMobileSignIn {
        display: none; 
    }

    .bottomNavbarButtCont {
        display: none; 
    }

    .bottomNavbarContainer {
        padding-top: 0rem;
        display: none;
    }

    .logoContainersvg {
        padding-left: 1.1rem; 
    }

    .p1r5r1r5r2 {
        position: static;
    }
}

@media screen and (min-width: 1125px) {
    .logoContainersvg {
        padding-left: 1.3rem; 
    }
}

@media screen and (min-width: 1550px) {
    .secLogoContainer {
        width: 1600px;
     }

     .navArea_container {
        width: 1600px; 
     }
}