:root {
    --svg-color:  #4a8bb0; 
    --form-bg: #f7f7f7; 
    --d-text: #000b27; 
    --login-bgmap:rgb(0, 0, 0, 0.94);
    --flame-bgColor2: rgb(0, 105, 170);
    --bord-loginButt: 1px solid #6e6e6e;
}

.dark-mode  {
    --svg-color: #1a8cd8;  
    --form-bg: #ffffff; 
    --d-text: #000b27; 
    --login-bgmap: #fefefe;
    --flame-bgColor2: #298fcc;
    --bord-loginButt: 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; 
}

.navInformational ul {
    margin-left: 0.7rem;  
    background: #155a8a;
}

.navArea_container {
    width: 100%; 
}

.secLogoContainer {
   width: 100%;
}

.header_link_button {
    background:transparent; 
    color: #cecece; 
    font-weight: 600; 
    padding: 0.5rem 0.75rem 0.4rem 0.75rem;; 
    font-size: 1.2rem; 
    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;
}


.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; 
}

.heartButtonNav svg {
    color: #1a8cd8; 
}

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

.navInformational ul li {
    font-weight: 600; 
    font-size: 0.875rem;
}

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;
    border-radius: 4px;  
}

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

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

.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.1rem; 
    width: 2.4rem; 
    position: relative; 
    transition: background-color 0.3s;
    box-shadow: var(--box-shadowLightDark);  
}

.toggle-switch-bottom {
    position: absolute; 
    width: 0.95rem; 
    height: 0.95rem; 
    background-color: #ffffff; 
    border-radius: 50%; 
    transition: transform 0.3s;
    margin-left: 0.1rem;  
}

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

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

.navNewCust {
    font-weight: 500; 
    font-size: 1rem; 
    color: var(--text-whiteBlack); 
    transition: underline 0.23s ease-in-out; 
    font-family: 'Inter'; 
    letter-spacing: 0.1px;
}


.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-MJoBVe {
    background-color: black !important; 
}

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

#signInNavButton {
    position: relative;
    margin-right: 0.8rem;
}

#signInDropDown {
    display: none; 
    padding: 1.5rem; 
    position: absolute; 
    background-color: var(--login-bgmap); 
    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;
}


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

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

.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 {
    width: 100%; 
    padding: 0.6rem; 
    border: none; 
    outline: none; 
    box-sizing: border-box; 
    border-radius: 7px; 
    font-weight: 500; 
    background-color: var(--form-bg); 
    color: var(--d-text); 
    border: var(--bord-loginButt); 
    font-family: 'Inter'; 
    font-size: 1rem; 
}

.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';  
    font-size: 1rem;
}

.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; 
    font-family: 'Inter'; 
}

.nsm7Bb-HzV7m-LgbsSe   {
    padding: 0.5rem 0; 
}

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

.navForgotPW a {
    color: var(--nav-suggestColor);
    font-size: 0.95rem; 
    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; 
    background-color: var(--login-bgmap); 
}

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

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

.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; 
    font-family: 'Poppins'; 
    transition: opacity 0.23s ease-in-out; 
    line-height: 1; 
   
} */

.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;  
}

.hiddenSunMoon {
    display: none;
}

#locationButton {
   font-family: 'Poppins';
    cursor: pointer;
    outline: none;
    /* padding: 0rem 0rem 0rem 0.75rem; */
    position: relative;
    background: transparent;
    color: var(--text-whiteBlack);
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    opacity: 1;
    transition: opacity 0.26sease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 115px;
    max-width: 165px;
    display: inline-block;
    line-height: 1.2;
    font-weight: 800;
    padding-right: 2rem;
    z-index: 100; 
}

#signInNavButton2 {
    margin-right: 0.65rem;
}

#arrowAfterLocate {
   content: '';
    margin-right: 0.75rem;
    /* 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;
    position: absolute;
    right: 0;
    z-index: 25; 
  }
  

  #arrowAfterLocate.rotated {
    transform: translateY(-50%) rotate(180deg);
  }


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

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



@media (min-width: 477px) and (max-width: 600px) {
    #signInDropDown {
        padding: 3rem 6.5rem 3rem 6.5rem; 
    }
}

@media (min-width: 600px) and (max-width: 700px) {
    #signInDropDown {
        padding: 3rem 11rem 3rem 11rem; 
    }
}

@media (min-width: 700px) and (max-width: 768px) {
    #signInDropDown {
        padding: 3rem 14rem 3rem 14rem; 
    }

 
}

@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; 
    }

    #arrowAfterLocate {
        margin-right: 0.75rem;
    }

    #locationButton {
        font-size: 1rem;
        min-width: 0px;
        padding-right: 2rem; 
    }

    #signInNavButton2 {
        margin-right: 0.95rem;
    }

    #heartButtonNav {
        margin-right: 0.95rem; 
    }

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

    .logoButton_container {
        display: none; 
    }

    #heartButtonNav {
        display: none; 
    }
}

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

    .bottomNavbarButtCont {
        display: none; 
    }

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


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

   
}