.sdm_mobile_side_menu[toggle="false"] {
    transform: translate(-280px, 0);
}

.sdm_mobile_side_menu[toggle="false"][direction="1"] {
    transform: translate(280px, 0);
}

.sdm_mobile_side_menu {
    position        : fixed;
    top             : 94px;
    height          : calc(100% - 104px);
    width           : 280px;
    max-width       : 280px;
    background-color: #f8f8f8;
    padding-bottom  : 10px;
    z-index         : 2;
    transition      : ease 0.3s;
}

.sdm_links_container {
    position       : relative;
    display        : flex;
    flex-direction : column;
    justify-content: flex-start;
    height         : calc(100% - 168px);
    max-height     : calc(100% - 168px);
    width          : 100%;
    overflow-x     : hidden;
    overflow-y     : auto;
    align-items    : center;
}

.sdm_link {
    position       : relative;
    display        : flex;
    align-items    : center;
    padding        : 10px 20px 10px 20px;
    width          : calc(100% - 40px);
    min-height     : 40px;
    max-height     : 40px;
    height         : 40px;
    text-align     : center;
    border-bottom  : 1px solid #cccccc;
    transition     : ease 0.3s;
    text-decoration: none !important;
}


.sdm_text {
    position     : relative;
    font-size    : 16px;
    color        : #898989;
    transition   : ease 0.3s;
    max-width    : 100%;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.sdm_link[active="false"]:active {
    background-color: #4080FF;
}

.sdm_link[active="false"]:active .sdm_text {
    color: white;
}

.sdm_link[active="true"] {
    width: calc(100% - 50px);
}

.sdm_link[active="true"] .sdm_text {
    color: #202020;
}

.sdm_footer {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    position       : relative;
    height         : 158px;
    width          : calc(100% - 40px);
    padding        : 10px 20px 0 20px;
}

.sdm_logo {
    position  : relative;
    width     : 174px;
    height    : 32px;
    margin    : 0 auto;
    background: url(/src/s_logo.svg) center/contain no-repeat;
}

@media(hover:hover) and (pointer:fine) {
    .sdm_link[active="false"]:hover {
        background-color: #4080FF;
    }

    .sdm_link:hover[active="false"] .sdm_text {
        color: white;
    }
}