/*** DROPDOWN ***/


/* The container <div> - needed to position the dropdown content */

@media screen and (min-width: 1024px) 
{
    /* CSS code to apply when the screen width is 768px or more */
    .dropdown 
    {
        position: relative;
        display: inline-block;
    }
}


@media screen and (max-width: 1023px) 
{
    /* CSS code to apply when the screen width is between 1023px or less */
    .dropdown 
    {
        position: relative;
        display: inline-block;

        margin-right: 4rem;
    }
}

.nav-margin-right
{
    margin-right: 5rem;
}


/** Source : https://blog.logrocket.com/making-dropdown-menus-css/ **/
.arrow 
{
    display: inline-block;
    margin-left: 0.3rem;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgb(48, 52, 54);
    transition: transform ease-in-out 0.3s;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content 
{
    display: none;
    position: absolute;
    background-color: rgb(36, 37, 37);
    margin-top: 1.4rem;
    /*min-width: 10rem;*/
    width: auto;
    box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a 
{
    text-align: center;
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    display: block;

    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rgba(77, 82, 87, 0.8);}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .nav-link {background-color: rgba(36, 37, 37, 0.8);}











/* SOURCE : https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/ */

/* The container <div> - needed to position the dropdown content */
.dropdown-menu
{
    position: relative;
    
}


/* Dropdown Content (Hidden by Default) */
.dropdown-menu-content
{
    display: none;
    position: relative;

    background-color: rgb(36, 37, 37);
    box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-menu-content a
{
    text-align: center;
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-menu-content a:hover {background-color: rgba(77, 82, 87, 0.8);}

/* Show the dropdown menu on hover */
.dropdown-menu:hover .dropdown-menu-content {display: block;}



/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown-menu:hover .nav-link {background-color: rgba(77, 82, 87, 0.8);}

.dropdown-content-ref .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0px;
}

.dropdown-submenu > .dropdown-submenu {
    display: block;
}



/* Dropdown container */
.dropdown-mobile {
    display: flex;
    flex-direction: column;
}

.dropdown-mobile > a.nav-link-mobile {
    cursor: pointer;
    position: relative;
}

.dropdown-mobile .arrow {
    float: right;
    margin-left: 0.3125rem; /* 5px -> 0.3125rem */
    transition: transform 0.3s;
}

.dropdown-content-mobile {
    display: none;
    flex-direction: column;
    padding-left: 0.625rem; /* 10px -> 0.625rem */
    background-color: #fafafa;
    border-left: 0.125rem solid #ccc; /* 2px -> 0.125rem */
    margin: 0.3125rem 0; /* 5px -> 0.3125rem */
}

.dropdown-submenu-mobile {
    display: flex;
    flex-direction: column;
    padding-left: 0.9375rem; /* 15px -> 0.9375rem */
    border-left: 0.0625rem dashed #ccc; /* 1px -> 0.0625rem */
    margin: 0.3125rem 0;
}

/* Show dropdown on click */
.dropdown-mobile.active .dropdown-content-mobile {
    display: flex;
}

.dropdown-mobile.active > a.nav-link-mobile .arrow {
    transform: rotate(90deg);
}