#left-menu {
    float: left;
    height: 84vh;
    display: block;
    background-color: var(--primary-bg-color) !important;
    box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 3px var(--primary-bg-color);
    border-radius: 6vh;
    position: fixed;
    transition: all 500ms ease-in-out;
    top: 11vh;
    left: 2vw;

    width: calc(100px + 16vmin);;
}

#bottom-menu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    border-radius: 4vmin 4vmin 0 0;
    width: 100%;

    background: var(--light-gray);
	aspect-ratio: 6.65;
	clip-path: shape(from 0% 28.57%,curve to 4.3% 0% with 0% 12.79%/1.92% 0%,hline to 41.55%,curve to 44.37% 10.11% with 42.68% 0%/43.74% 3.8%,curve to 55.63% 10.11% with 47.03% 37.06%/52.97% 37.06%,curve to 58.45% 0% with 56.26% 3.8%/57.32% 0%,hline to 95.7%,curve to 100% 28.57% with 98.08% 0%/100% 12.79%,vline to 100%,hline to 0%,vline to 28.57%,close);

    height: 7vh;
    z-index: 50;
}

#bottom-menu-container {
    height: inherit;
    display: flex;
    justify-content: space-between;
    padding: 1.7vh 10vw 1vh 10vw;
    list-style-type: none;
    color: var(--primary-bg-color);
    font-weight: 600;
    align-items: center;
    margin-bottom: 0;
}

#bottom-menu-container li a {
    display: flex;
    flex-direction: column;
    list-style: none;
    font-size: 0.8rem;
}

#newCalculationButton {
    display: none;
    border: none;
    background: var(--primary-bg-color);
    color: var(--bg-color);
    cursor: pointer;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 12vmin;
    height: 12vmin;
    gap: 0.5vh;
    transition: all 0.3s ease-in-out;

    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5.4vh;
    z-index: 1000;
}

#newCalculationButton::before {
    content: url("/images/plus.svg");
    scale: 1.2;
    transition: all 0.3s ease-in-out;
    line-height: 100%;
}

body.fab-open {
    overflow: hidden;
}

body.fab-open #newCalculationButton {
    transform: translate(-50%, -1.5vh);
}

body.fab-open #newCalculationButton::before {
    transform: rotate(45deg);
}

#menuCalculationsItem a::before {
    content: url("/images/calculations.svg");
    align-self: center;
    scale: 1.3;
}

#menuContractsItem a::before {
    content: url("/images/contracts.svg");
    align-self: center;
    scale: 1.3;
}

#menuUsersItem a::before {
    content: url("/images/users.svg");
    align-self: center;
    scale: 1.3;
}

#menuRolesItem a::before {
    content: url("/images/roles.svg");
    align-self: center;
    scale: 1.3;
}

#left-menu-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px 30px;
    height: inherit;
    width: 100%;
}

#left-menu-container div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2vh;
}

.menu-border {
    border: 1px solid rgba(255, 255, 255, 0.616);
    border-radius: 100%;
    width: auto;
}

.menu-list {
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
}

.menu-list li a {
    color: white !important;
    padding: 0;
}

.nav-item.dropdown .dropdown-menu.show {
    background: none;
    border: none;
    position: initial !important;
    transform: none !important;
    margin-left: 0.8vw !important;
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
}

#newCalculationOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    z-index: 40;
}

body.fab-open #newCalculationOverlay {
    opacity: 1;
    pointer-events: auto;
}

#newCalculationSheet {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15vh;
    border-radius: 3vmin;
    padding: 3vh 6vw 6vh 6vw;
    transition: all 0.3s ease-in-out;
    min-width: 82vw;
    
	aspect-ratio: 1.165;
	clip-path: shape(from 100% 88.43%,curve to 95.9% 93.21% with 100% 91.07%/98.16% 93.21%,hline to 60.97%,curve to 57.31% 95.41% with 59.49% 93.21%/58.1% 93.94%,curve to 42.69% 95.41% with 53.93% 101.53%/46.07% 101.53%,curve to 39.03% 93.21% with 41.9% 93.94%/40.51% 93.21%,hline to 4.1%,curve to 0% 88.43% with 1.84% 93.21%/0% 91.07%,vline to 4.78%,curve to 4.1% 0% with 0% 2.14%/1.84% 0%,hline to 95.9%,curve to 100% 4.78% with 98.16% 0%/100% 2.14%,vline to 88.43%,close);
    background: var(--light-gray);

    display: flex;
    flex-direction: column;
    gap: 3vh;
}

#newCalculationSheet h3 {
    color: var(--dark-gray);
    font-weight: 550 !important;
    text-align: center;
    font-size: 1.6rem;
}

body.fab-open #newCalculationSheet {
    transform: translate(-50%, -21vh);
}

#newCalculationProducts {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    padding-left: 0;
    max-height: 18vh;
    overflow-y: scroll;
}

#newCalculationProducts li {
    list-style-type: none;
}

#newCalculationProducts li a {
    color: var(--dark-gray) !important;
    font-size: 1.2rem;
    font-weight: 550;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3vw;
}

#newCalculationProducts li a.car::before {
    content: url("/images/car.svg");
    line-height: 90%;
}

#newCalculationProducts li a.estate::before {
    content: url("/images/building.svg");
    line-height: 60%;
}

#toggleMenuBtn {
    display: none;
}

#toggleMenuBtnSm {
    display: block;
}

@media screen and (max-width: 1024px) {
    #left-menu {
        display: none;
    }

    #bottom-menu {
        display: block;
    }

    #newCalculationButton {
        display: flex;
    }
}

@media screen and (max-width: 1024px) {
    #left-menu {
        display: none;
    }

    #bottom-menu {
        display: block;
    }

    #newCalculationButton {
        display: flex;
    }
}

@media screen and (min-height: 800px) {
    #toggleMenuBtnSm {
        display: none;
    }

    #toggleMenuBtn {
        display: block;
    }
}