.mobile__menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, .8);
  z-index: 15;
  padding: 0 16px;
  display: none;
}

.mobile__wrap {
  /*position: relative;*/
  margin: 56px auto 0;
  background-color: var(--color-white);
  max-width: max-content;
  min-width: 287px;
  padding: 48px 0 0 34px;
  overflow-y: auto;
  height: 100vh;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mobile__wrap::-webkit-scrollbar{
  width: 0;
}

.mobile__title {
  font-family: "Montserrat-Bold", "Arial", sans-serif;
}

.mobile__button-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  border: none;
  outline: none;
  background: url("../images/close-icon.svg") center no-repeat;
}

.mobile__menu .main-menu {
  list-style-type: none;
  margin: 32px 0 0;
  padding: 0 0 48px 0;
}

.mobile__menu .main-menu li {
  position: relative;
  margin: 0;
  font-size: 14px;
}

.mobile__menu .main-menu li a {
  color: #51555d;
  outline: none;
  display: flex;
  margin-bottom: 24px;
  padding-right: 30px;
  align-items: baseline;
  transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
}

.mobile__menu .main-menu li > span {
  color: #51555d;
  outline: none;
  display: flex;
  margin-bottom: 24px;
  padding-right: 30px;
  align-items: baseline;
  transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
}

.mobile__menu .main-menu li a span{
  line-height: 20px;
  -webkit-transition: 350ms opacity ease-in-out;
  -moz-transition: 350ms opacity ease-in-out;
  -o-transition: 350ms opacity ease-in-out;
  transition: 350ms opacity ease-in-out;
}


.mobile__menu .main-menu li ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  overflow: hidden;
  z-index: 1;
}

.mobile__menu .main-menu li ul.visible {
  display: block;
  max-width: 287px;
}

.mobile__menu .main-menu li ul > li > a, .mobile__menu .main-menu li ul > li > span {
  padding-left: 32px;
  padding-right: 10px
}

.mobile__menu .main-menu li.has-sub > a .sidebar__img {
  width: 16px;
  height: 16px;
  background-image: url('../images/up.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 8px;
  transition: all 300ms ease-in-out;
}

.mobile__menu .main-menu li.has-sub.opened > a .sidebar__img {
  transform: rotate(90deg);
}

.has-sub ul li.active > span {
    color: #002ea6 !important;
    font-weight: bold;
}