#layout-drawer a {
    padding: 8px 8px 8px 14px;
    text-decoration: none;
    font-size: 12px;
    color: #818181;
    display: block;
    /* transition: left 0.3s; */
}

#layout-drawer-menu {
    /* transition: margin-left .5s; */
    padding: 4px 8px 4px 8px;
}

/* DRAWER BUTTON > ELEMENT */
#layout-drawer-menu div.drawer-button {
    font-size:11px;
    white-space:nowrap;
    border-radius: 15px;
    margin-bottom: 2px;
    font-weight:500;
    display:flex;
    align-items: center;
    transition: color 20ms, background-color 20ms;
}
#layout-drawer-menu div.drawer-button--hover {
    background-color: var(--drawer-item-background-color--hover );
    color:var(--drawer-item-text-color--hover);
}
#layout-drawer-menu div.drawer-button--active {
    background-color: var(--drawer-item-background-color--active );
    color:var(--drawer-item-text-color--active);
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* DRAWER BUTTON > CIRCLE AROUND SVG ICON */
#layout-drawer-menu div.drawer-button div.drawer-circle-svg {
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;

    border-radius:50%;
    position:relative;left:3px;
}
#layout-drawer-menu div.drawer-button--hover div.drawer-circle-svg {
    background-color: rgba(0, 0, 0, 0.1);
}
#layout-drawer-menu div.drawer-button--active div.drawer-circle-svg {
    background-color:var(--drawer-item-text-color--active);
}


/* DRAWER BUTTON > CIRCLE AROUND SVG ICON */
#layout-drawer-menu div.drawer-button div.drawer-circle-svg--logout {
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;

    border-radius:50%;
    position:relative;left:3px;
}
#layout-drawer-menu div.drawer-button--hover div.drawer-circle-svg--logout {
    background-color: rgba(160, 4, 4, 1);
}
#layout-drawer-menu div.drawer-button--active div.drawer-circle-svg--logout {
    background-color:rgba(160, 4, 4, 1);
}

/* PATH FILL COLOR */
#layout-drawer-menu div.drawer-button div.drawer-circle-svg--logout svg.drawer-link-icon path {
    fill:#333;
}
#layout-drawer-menu div.drawer-button--hover div.drawer-circle-svg--logout svg.drawer-link-icon path {
    fill:#FFF;
}
#layout-drawer-menu div.drawer-button--active div.drawer-circle-svg--logout svg.drawer-link-icon path {
    fill:#FFF;
}

/* DRAWER BUTTON > SVG ICON */
#layout-drawer-menu div.drawer-button div.drawer-circle-svg svg.drawer-link-icon {
    display:inline;
    /* position: relative;
    left:10px; */
}
#layout-drawer-menu div.drawer-button--hover div.drawer-circle-svg svg.drawer-link-icon {
    display:block;
}
#layout-drawer-menu div.drawer-button--active div.drawer-circle-svg svg.drawer-link-icon {
    display:block;
}

/* PATH FILL COLOR */
#layout-drawer-menu div.drawer-button div.drawer-circle-svg svg.drawer-link-icon path {
    fill:#333;
}
#layout-drawer-menu div.drawer-button--hover div.drawer-circle-svg svg.drawer-link-icon path {
    fill:var(--drawer-item-text-color--hover);
}
#layout-drawer-menu div.drawer-button--active div.drawer-circle-svg svg.drawer-link-icon path {
    fill:#FFF;
}


/* DRAWER BUTTON > LINK A TEXT */
#layout-drawer-menu div.drawer-button--hover a {
    color:var(--drawer-item-text-color--hover);
}
#layout-drawer-menu div.drawer-button--active a {
    color:var(--drawer-item-text-color--active);
}


#layout-drawer-menu div.drawer-button svg.drawer-link-dot {
    display:none;
}

/* .image-hamburger  {
    fill:blue;
    filter: invert(100%) sepia(0%) saturate(10000%) hue-rotate(0deg);
} */
/* .drawer-button:hover {
  fill: #FF0000; /* New fill color on hover * /
  background-color: #FF9900;
} */
/* 
.drawer-button-home {
    background-image: url('../../assets/pics/home-24.svg');
}
.drawer-button-layout {
    background-image: url('../../assets/pics/home-24.svg');
}
.drawer-button-account {
    /* background-image: url('../../assets/pics/account-24.svg'); * /
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>');
}

.drawer-button-activity {
    background-image: url('../../assets/pics/activity-24.svg');
}
.drawer-button-tracking-sheets {
    background-image: url('../../assets/pics/tracking-sheets-24.svg');
}
.drawer-button-private-lessons--tracking-sheets {
    background-image: url('../../assets/pics/tracking-sheets-24.svg');
}

.drawer-button-private-lessons--activity {
    background-image: url('../../assets/pics/activity-24.svg');
}

.drawer-button-students {
    background-image: url('../../assets/pics/students-24.svg');
}
.drawer-button-student {
    background-image: url('../../assets/pics/students-24.svg');
}
.drawer-button-hours-declaration {
    background-image: url('../../assets/pics/hours-declaration-24.svg');
}
.drawer-button-private-lessons--hours-declaration {
    background-image: url('../../assets/pics/hours-declaration-24.svg');
}

.drawer-button-documents {
    background-image: url('../../assets/pics/documents-24.svg');
}
.drawer-button-upload {
    background-image: url('../../assets/pics/documents-24.svg');
}
.drawer-button-documents--upload {
    background-image: url('../../assets/pics/documents-24.svg');
}


.drawer-button-balance-sheet {
    background-image: url('../../assets/pics/balance-sheet-24.svg');
}
.drawer-button-private-lessons--balance-sheet {
    background-image: url('../../assets/pics/balance-sheet-24.svg');
}

.drawer-button-payments-salary {
    background-image: url('../../assets/pics/payments-salary-24.svg');
}
.drawer-button-profile-publication {
    background-image: url('../../assets/pics/profile-publication-24.svg');
}
.drawer-button-payslip {
    background-image: url('../../assets/pics/payslip-24.svg');
}
.drawer-button-power {
    background-image: url('../../assets/pics/power-24.svg');
} */
/* 
#layout-drawer button {
    font-size: 30px;
    cursor: pointer;
    position: fixed;
    left: 15px;
    top: 15px;
    z-index: 2;
} */

/* #layout-drawer-menu div.drawer-button:hover {
    color: #f1f1f1;
    background-color: rgba(0,0,0,0.2);
    border-radius: 5px;
    /* margin-left:6px;
    margin-right:6px; * /
}

#layout-drawer-menu div.drawer-button:hover a {
    color: #f1f1f1;
} */
    /* padding-left:12px;

    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 20px 20px;
    background-color:rgba(0,0,0,0); */