@font-face {
  font-family: rub;
  src: url('../assets/fonts/Rubik-Medium.ttf');
  font-weight: 500;
}
@font-face {
  font-family: rub;
  src: url('../assets/fonts/Rubik-Regular.ttf');
  font-weight: 400;
}
@font-face {
  font-family: rub;
  src: url('../assets/fonts/Rubik-SemiBold.ttf');
  font-weight: 600;
}
@font-face {
  font-family: rub;
  src: url('../assets/fonts/Rubik-Bold.ttf');
  font-weight: 700;
}

:root {
    --color-white: #FFFFFF;
    --color-gray-bg: #F2F2F2;
    --color-gray-d: #7E7C7C;
    --gr-orange: linear-gradient(to right, #FF7E2D, #F64200);
}

* {
    font-family: rub;
    font-size: 500;
}
html, body {
    scroll-behavior: smooth;
}
body {
    position: relative;
}

.aside {
    left: -273px;
    transition: left .5s ease;
}
.aside.active {
    left: calc(50% - 720px);
}
.aside_opener img {
    transform: scale(1, 1);
    transition: transform .5s ease;
}
.aside_opener.active img {
    transform: scale(-1, 1);
} 

.menu_item {
    border-radius: 26px;
    transition: all .3s ease;
}
.menu_item.active {
    background-image: var(--gr-orange);
    border-radius: 26px;
    color: var(--color-white);
}
.menu_item svg path {
    transition: all .3s ease;
}
.menu_item.active svg path {
    fill: var(--color-white);
}

[data-link].active {
    border: 1px solid var(--color-gray-d);
    border-radius: 26px;
}
[data-time].active {
    padding: 6px;
    color: var(--color-black);
    background-color: var(--color-gray-bg);
    border-radius: 12px;
}

@media (max-width: 1535px) {
    .aside.active {left: 0;}
}
@media (max-width: 1023px) {
    .transfers_wrapper, .calendar_wrapper {
        padding: 0 12px;
        width: 100%;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-behavior: smooth;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
}