.app_navbar{
    background: content-box linear-gradient(to bottom, rgb(0,0,0,0.7), rgba(0,0,0,0) );
    height: 150px;
    padding-top: 0;
    & .navbar-toggler{
        position: absolute;
        top: 150px;
        background-color: var(--light-color);
        color: var(--light-color);
        & .navbar-toggler-icon {
            background-color: var(--light-color);
            background:  url("../../images/utils/menu_cream.svg");
            color: var(--light-color);
        }
    }
    & .content{
        margin: 30px 0;
        & li{
            margin: 0 15px;
        }

        & a {
            color: var(--light-color);
            font-size: 1em;
            text-transform: uppercase;
            & span{
                font-weight: bold;
            }
        }
        & .logo{
            & img{
                height: 100px;
                width: 201px;
            }
        }
    }
}

.app_navbar_small{
    background: content-box linear-gradient(to bottom, rgb(0,0,0,7), rgba(0,0,0,0) );
    height: 90px;
    padding-top: 0;
    & .navbar-toggler{
        border: 0;
        top: 10px;
        & .navbar-toggler-icon {
            background:  url("../../images/utils/menu_cream.svg");
        }
    }
    & .content{
        & a {
            /*color: var(--light-color);*/
            font-size: 1em;
            text-transform: uppercase;
            & span{
                font-weight: bold;
            }
        }
        & .logo{
            & img{
                height: 60px;
                width: 121px;
            }
        }
    }
    & .navbar-collapse{
        background-color: var(--light-color);
    }
}

.app_navbar_dark{
    background: content-box var(--background-dark-color);
    color: var(--light-color);
    & a:visited{
        color: var(--light-color);
    }
}

.app_navbar.scrolled, .app_admin_navbar.scrolled, .app_navbar_small.scrolled{
    background: content-box rgba(255, 255, 255, 100%);
    height: 90px;
    padding-top: 0;
    & .content{
        margin: 30px 0;
        & a {
            color: rgba(85, 85, 85, 100%);;
            font-size: 1em;
            & span{
                font-weight: bold;
            }
        }
        & .logo_small{
            & img{
                height: 60px;
                width: 121px;
            }
        }
    }
}

.app_navbar_small.scrolled{
    & .navbar-toggler{
        & .navbar-toggler-icon {
            background:  url("../../images/utils/menu_light_brick.svg");

        }
    }
    & .content{
        margin: 0;
        & a {
            color: var(--light-color);
            font-size: 1em;
            text-transform: uppercase;
            & span{
                font-weight: bold;
            }
        }
        & .logo{
            & img{
                height: 60px;
                width: 121px;
            }
        }
    }

}

.app_admin_navbar.scrolled{
    height: 100px;
    & .content {
        & ul.dropdown-menu.show {
            background: content-box  rgba(255, 255, 255, 100%);
        }
        & .logo_small {
            color: var(--dark-brick);
            & img {
                margin-bottom: 0;
            }
        }
        & li{
            & .app-nav-link.show{
                color: var(--dark-color);
            }
            & .nav-link.show{
                color: var(--dark-color);
            }
        }
    }

}
.app_admin_navbar{
    background: content-box rgba(35, 35, 35, 1);
    height: 160px;
    padding-top: 0;
    & #back_to_site{
        & a{
            display: flex;
            align-items: center;
        }
        & img{
            height: 1.7em;
        }
        & .back-text{
            font-size: 0.7em;
            padding-left: 0.5vw;
            padding-right: 10vw;
        }
    }
    & .content{
        margin: 30px 0;
        & ul.dropdown-menu.show {
            padding-bottom: 0;
            background: content-box rgba(35, 35, 35, 1);
            & li{
                padding: 2vh 0;
                & :hover{
                    color: rgba(35, 35, 35, 1);
                }
            }
        }
        & li{
            padding: 0 15px;
            & .app-nav-link.show{
                color: var(--light-color);
            }
            & .nav-link.show{
                  color: var(--light-color);
              }
        }
        & a {
            color: var(--light-color);
            font-size: 1em;
            text-transform: uppercase;
            & span{
                font-weight: bold;
            }        }
        & .logo{
            color: var(--light-color);
            & img{
                height: 100px;
                width: 201px;
            }
        }
    }
}

.navbar-toggler, .navbar-toggler:focus-visible, .navbar-toggler:focus{
    border: 0;
    box-shadow: none;
}

.app_navbar_small_block{
    & .fixed-top{
        z-index: 999;
    }
    & .modal{
        & .modal-content {
            & .logo{
                & img{
                    height: 60px;
                    width: 121px;
                }
            }
        }
        & .modal-body{
            margin-top: 10vh;
            & .nav-item{
                margin: 10px;
            }
            & .social_media{
                margin-top: 10vh;
                padding: 0 2vh;
                background-color: var(--medium-brick);
            }
        }
    }
}