/* =========================================
   MENIU VERTICAL
   ========================================= */

.vertical-menu {
    width: 200px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

.vertical-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vertical-menu li {
    position: relative;
}


/* =========================================
   LINKURI
   ========================================= */

.vertical-menu a {
    display: block;
    box-sizing: border-box;

    padding: 10px 15px;

    background: #F2F6FB;
    color: #000000;

    text-decoration: none;

    border: 1px solid #C1C4C8;
	  border-bottom: 0;
}

	
.vertical-menu a:hover {
    background: #D4D8DD;
}
/* linie jos pentru ultimul meniu din fiecare grup */
.vertical-menu li:last-child > a {
    border-bottom: 1px solid #C1C4C8;
}

/* =========================================
   TITLU SECTIUNE
   ========================================= */

.vertical-menu .menu-titlu {
    box-sizing: border-box;

    width: 100%;

    padding: 12px 5px;

    background: #E3E3E3;
    color: black;

    text-align: center;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;

    border: 1px solid #C1C4C8;
	 border-bottom: 0;
}


/* =========================================
   TOATE SUBMENIURILE
   NIVEL 2, 3, 4, 5...
   ========================================= */

.vertical-menu li > ul {
    display: none;

    position: absolute;

    left: calc(100% + 5px);
    top: 0;

    width: 200px;

    margin: 0;
    padding: 0;

    z-index: 1000;
}


/* =========================================
   DESCHIDEM ORICE NIVEL
   =========================================
   
   AICI ESTE MODIFICAREA IMPORTANTĂ.

   Nu mai limităm meniul la:
   nivel 2
   nivel 3

   Orice LI care are un UL copil
   îl va afișa când este hover.
   ========================================= */

.vertical-menu li:hover > ul {
    display: block;
}


/* =========================================
   ZONA INVIZIBILA DINTRE MENIURI
   ========================================= */

.vertical-menu li > ul::before {
    content: "";

    position: absolute;

    top: 0;
    left: -5px;

    width: 5px;
    height: 100%;

    background: transparent;
}


/* =========================================
   INDICATOR PENTRU ELEMENTELE
   CARE AU SUBMENIU
   ========================================= */

.vertical-menu li:has(> ul) > a::after {
    content: " ▶";

    float: right;
}


/* =========================================
   TITLUL NU ARE SAGEATA
   ========================================= */

.vertical-menu .menu-titlu::after {
    content: "";
}


/* =========================================
   NIVELURILE URMATOARE
   =========================================
   
   Fiecare submeniu se deschide in dreapta
   elementului parinte.
   ========================================= */

.vertical-menu li > ul {
    left: calc(100% + 5px);
    top: 0;
}


/* =========================================
   ZONA INVIZIBILA PENTRU TOATE NIVELURILE
   ========================================= */

.vertical-menu li > ul::before {
    content: "";

    position: absolute;

    top: 0;
    left: -5px;

    width: 5px;
    height: 100%;

    background: transparent;
}