.bottom {
    position: absolute;
    bottom: 12px;
    width: 190px;
    background: var(--navbar-bg-color);
    border-radius: var(--side-nav-border-radius);
    font-size: 12px;
    transition: width var(--side-nav-openclose-transition);
    z-index: 999;

    &.closed {
        width: 50px;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

:host ::ng-deep .bottom .donate .side-nav-item {
    justify-content: center;
    min-height: 25px;
    align-items: center;

    :hover {
        background-color: unset;
    }
 }

:host ::ng-deep .bottom .donate .side-nav-item span {
    flex-grow: unset !important;
    min-width: unset !important;;
}

:host ::ng-deep .bottom .donate .side-nav-item span div {
    min-width: unset !important;
}

:host ::ng-deep .bottom .donate .side-nav-item span div i{
    font-size: 12px !important;
}



:host ::ng-deep .bottom .donate .side-nav-item.closed span.phone-hidden div {
    width: 100%;
}

:host ::ng-deep .bottom .donate .side-nav-item.closed span.side-nav-text div {
    width: 0;
}

@media (max-width: 576px) {
    :host ::ng-deep .bottom .donate .side-nav-item.closed {
        display: none;
    }

    :host ::ng-deep .bottom .donate .side-nav-item span.phone-hidden {
        display: block !important;
    }
}

.side-nav {
    padding-bottom: 10px;
    width: 190px;
    background-color: var(--side-nav-bg-color);
    height: calc((var(--vh)*100) - 115px);
    position: fixed;
    margin: 0;
    left: 10px;
    top: 73px;
    border-radius: var(--side-nav-border-radius);
    transition: width var(--side-nav-openclose-transition), background-color var(--side-nav-bg-color-transition), border-color var(--side-nav-border-transition);
    overflow: auto;
    border: var(--side-nav-border);

    &.no-donate {
        height: calc((var(--vh)*100) - 82px);
    }

    &.hidden {
        display: none;
        opacity: 0;
    }

    &.closed {
        width: 50px;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: var(--side-nav-closed-bg-color);
        border: var(--side-nav-border-closed);
    }

    .side-nav-item:first {
        border-top-left-radius: var(--side-nav-border-radius);
        border-top-right-radius: var(--side-nav-border-radius);
    }
}

@media (max-width: 576px) {
    .side-nav {
        padding: 10px 0;
        width: 55vw;
        background-color: var(--side-nav-mobile-bg-color);
        height: calc((var(--vh)*100) - 125px);
        position: fixed;
        margin: 0;
        left: 0;
        top: 56px;
        transition: width var(--side-nav-openclose-transition);
        z-index: 999;
        overflow: auto;
        border: var(--side-nav-mobile-border);

        &.closed {
            width: 0;
            overflow: hidden;
            box-shadow: none;
        }

        .side-nav-item:first {
            border-top-left-radius: var(--side-nav-border-radius);
            border-top-right-radius: var(--side-nav-border-radius);
        }

        &.no-donate {
          height: calc((var(--vh)*100) - 56px);
        }
    }

    .side-nav-overlay {
        background-color: var(--side-nav-overlay-color);
        width: 100vw;
        height: calc((var(--vh)*100) - 56px);
        position: absolute;
        left: 0;
        z-index: 998;

        &.closed {
            display: none;
        }
    }
}

.btn-close {
    margin-top: -28px;
    font-size: 0.8rem;
    position: absolute;
    right: 16px;
}
