/*Copyright (c) Dr. Heba Sailem 2021*/

header{
    width: 100%;
    background-color: #474747;
    border-bottom: 1px solid #D8D8D8;
    box-shadow: 1px 1px 2px #D8D8D8;
    height: 40px;
}
.navbar{
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

.nav-logo img{
    display: inline-block;
}


.nav-items{
    display: inline-flex;
    justify-content: space-evenly;
    align-items: center;
    vertical-align: super;
}

.nav-item{
    display: inline-block;
    margin: 0 10px;
    font-size: 16px;
}
.nav-item:hover{
    cursor: pointer;
}

.nav-options{
    display: flex;
    align-items: center;
}

.resp-options{
    display: none;
}

#nav-options-collapse{
    background-color: #252525;
    cursor: pointer;
    border: none;
    display: none;
}

#tutsUl a{
    color: black;
    text-decoration: none;
}

#tutorialLink{
    color: black;
    text-decoration: none;
}

.dropdown{
    position: relative;
    z-index: 99999999999;
}

.dropdown-content{
    position: absolute;
    list-style-type: none;
    border: 1px solid #EAEAEA;
    background-color: #ffffff;
    min-width: 170px;
    width: auto;
    display: none;
    z-index: 99999999999;
}

.dropdown-content li{
    white-space: nowrap;
    box-sizing: border-box;
    color: black;
    height: 24px;
    width: 100%;
    padding: 5px;
    padding-bottom: 25px;
    z-index: 100000;
}

.dropdown-content li:hover{
    background-color: lightblue;
    cursor: pointer;
}

.dropdown:hover .dropdown-content{
    display: block;
}

.navbar a{
    color: white;
    text-decoration: none;
}

.side{
    position: relative;
}

.side-list{
    position: absolute;
    list-style-type: none;
    border: 1px solid #EAEAEA;
    background-color: #ffffff;
    min-width: 170px;
    width: auto;
    display: none;
    z-index: 99999999999;
    left: 100%;
    top: 0;

}
.side-list li{
    white-space: nowrap;
    box-sizing: border-box;
    color: black;
    height: 24px;
    width: 100%;
    padding: 5px;
    padding-bottom: 25px;
    z-index: 100000;
    
}

.side:hover>.side-list{
    display: block;
}