header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 100;
    margin-left: 190px;
    transition: margin-left 0.3s ease, padding-left 0.3s ease;
}
/* language_selector */
.wrapper_dropdown_ls {
  /* background-color: #191826; */
  background-color: #2B2A54;
  /*padding: 10px 20px;*/
  font-size: 10px;
  border-radius: 10px;
  position: relative;
  display: flex;
  cursor: pointer;
  /*position: absolute;*/
  /*margin-left: -117px;
  margin-top: -23px;*/
  overflow: hidden;
  height: 40px;
  z-index: 1;
  /*top: 45px;*/
}

.wrapper_dropdown_ls.opened_ls {
  height: 570px;
}
.wrapper_dropdown_ls {
margin-left: 0px;
}
.trans_02_ls {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.sel_arrow_ls, .back_arrow_ls::before {
  width: 20px;
  height: 20px;
  margin : 12px;
  /*padding-left: 30px;*/
  /*margin-right: 15px;*/
  margin-top: 10px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' fill='%2383818c' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 330 330' style='enable-background:new 0 0 330 330;' xml:space='preserve'%3E%3Cpath id='XMLID_224_' d='M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394 l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393 C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  transform: rotate(180deg);
}
/* класс не используется - на удаление (-) */
.back_arrow_ls::before {
  width: 15px !important;
  height: 15px !important;
  content: ' ';
  position: relative;
  transform: rotate(-90deg) !important;
  display: block;
  float: left;
  margin-top: 1px !important;
}

.opened_ls .sel_arrow_ls {
  transform: rotate(0deg);
}
.flag_icon_ls {
  flex-shrink: 0;
  width: 42px;
  height: 27px;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(/images/flags.webp);
  margin-bottom: 20px;
}
.dropdown_container_ls {
  display: flex;
  flex-direction: column;
}
.language_selector_block {
  /* position: absolute;*/
    padding: 10px;
/*  display: flex;*/
/*  align-items: start;*/
}

/* language_selector - end*/

/* footer */
.footer-content {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-col-name {
    font-weight: 600;
    font-size: larger;
    color: white;
    margin: 12px 5px;
}

.footer-link {
    margin: 5px;
    font-size: larger;
    color: rgba(255, 255, 255, 0.622);
    text-decoration: none;
}

.footer-link:hover {
    color: white;
}

.footer-logo {
    background-image: url('/images/new_homepage/south1_logo.png');
    height: 50px;
    width: 250px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    transition: 0.5s ease-in-out;
    margin: 0;
    padding-bottom: 20px;
}
/* footer - end*/


.logo-header {
    display: flex;
    /*align-items: center;*/
}

.header-nav-link {
    color: #ffffffaa;
    display: block;
    padding: 20px 8px;
    position: relative;

}

.header-nav-link:hover {
    color: #fff;
}

 header .language:hover {
    color:white;
}

.header-nav-link:hover:after {
    width: calc(100% - 14px);
    left: 7px;
}

.header-nav-link::after {

    display: block;
    position: absolute;
    left: 45%;
    width: 0;
    top: 80%;
    line-height: 3px;
    height: 2px;
    background-color: #14ab32;
    content: "";
    transition: 0.15s ease-out;
}

.language {
    display: flex;
    align-items: center;

    border: 2px solid #14ab32;
    background-color: transparent;
    color: #ffffffaa;
    border-radius: 5px;
    padding: 9px;
}

#header .avatar:hover {
    cursor: pointer;
}

.h-btn {
    background: none;
    border: none;
    color: white;
}

.home-navbar {
    display: flex;
    height: 60px;
    justify-content: space-between;
    z-index: 999;
    background-color: #23224C;

    transition: border-bottom-left-radius 0.5s ease-in-out;
}

/* #region dropdown */
.dropdown-menu {
    top: 10px !important;
    min-width: 370px !important;
    background-color: #23224C !important;
    padding: 18px !important;
    color: white !important;

    right: -110px !important;
}

.dropdown-menu li {
    margin-top: 10px ;
    margin-bottom: 10px ;
}

.dropdown-menu li:first-child {
    margin-top: 0;
}
.dropdown-menu li:last-child {
    margin-bottom: 0;
}


.dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: white !important;
    width: auto !important;
    background-color: #242C53 !important;
    padding: 10px !important;
    border-radius: 5px !important;
}

.dropdown-item:hover {
    background-color: #2a356c !important;
}

.dropdown-item:active,
.dropdown-item:focus {
    background-color: #242C53 !important;
}

#header .profile {
    background: rgb(73,66,100);
    background: linear-gradient(180deg, rgba(73,66,100,1) 0%, rgba(115,70,75,1) 100%);
}

.username {
    font-weight: bold;
    max-width: 25ch;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.level-badge {
    font-size: 12px !important;
    color: black;
    font-weight: bold;
    border-radius: 10px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: white;
    min-width: 30px;

    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;
}

.progress {
    height: 4px !important;
    background-color: #191d3e !important;
}

.progress-bar {
    height: 4px !important;
    background-color: #14ab32 !important;
}

.exp {
    color: #ffffffaa;
    font-size: small;
}

/* #endregion dropdown */

#toggle-notifications svg:hover {
    fill: rgba(255, 255, 255, 0.859);
}

#toggle-chat svg:hover {
    fill: rgba(255, 255, 255, 0.859);
}

.unread-message {
    display: block;
    position: absolute ;
    top: 0 ;
    left: 100% ;
    transform: translate(-50%,-50%) ;
    padding: 0.3rem;
    background-color: #14ab32 ;
    border-radius: 100%;
}

.home-logo img {
    border-radius: 20px;
}

.font-weight-600 {
    font-weight: 600;
}

.home-sidebar {
    grid-area: sidebar;
    flex: 1 0 220;
    width: 220px;
    min-width: 60px;
    max-width: 220px;
    background-color: #110F24;
    position: sticky;
    top: 0;
    margin-top: -60px;
    height: 100vh;
    overflow-y: auto;
    transition: width 0.3s ease;
}

.sidebar-collapsed {
    overflow-x: hidden;
}

.home-sidebar .img-container {
    position: relative;
    height: 35px;
    transition: height 0.3s ease, width 0.3s ease, padding-right 0.3s ease;
}

.home-sidebar.sidebar-collapsed .img-container {
    height: 30px;
    width: calc(100% + 2px);
    padding-right: 14px;
}

.img-container .sidebar-image-extended,
.img-container .sidebar-image-collapsed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.5s ease-in-out;
  }

.home-sidebar.sidebar-collapsed .img-container .sidebar-image-collapsed {
    width: 30px;
    height: 30px;
    background-position: 0 50%;
  }

.home-sidebar{
    .sidebar-image-extended {
        opacity: 1;
    }
    .sidebar-image-collapsed {
        opacity: 0;
    }
}

.home-sidebar.sidebar-collapsed{
    .sidebar-image-extended {
        opacity: 0;
    }
    .sidebar-image-collapsed {
        opacity: 1;
    }
  }

.home-sidebar ul a:hover {
    color: #18c929 !important;
    transition: transform 0.1s ease-out !important;
}

.home-sidebar.sidebar-collapsed ul a:hover {
    img{
    transform: scale(1.3);
    transition: 0.1s ease-out;
    }
}

.home-sidebar.sidebar-collapsed a .sidebar-image-collapsed:hover {
    transform: scale(1.3);
    transition: 0.1s ease-out;
}

.home-sidebar:not(.sidebar-collapsed) ul a:hover {
    transform: scale(1.1);
}

.home-sidebar.sidebar-collapsed ul li{
    width: 100%;
    transform: translateY(-40px);
}

.home-sidebar ul li {
    transition: transform 0.4s ease;
}

.home-sidebar.sidebar-collapsed a.nav-link {
    width: 100%;
    padding-left: 0;
    margin-left: -1px;
}

.custom-tooltip {
    --bs-tooltip-bg: black;
    --bs-tooltip-color: white;
}

.home-sidebar a.nav-link{
    padding-left: 0.35rem;
    transition: margin-left, padding-left 0.4s ease;
}

.home-sidebar .nav-link img{
    height: 25px;
    width: 25px;
    border-radius: 20%;
    transition: width 0.3s ease, height 0.3s ease;
}

.home-sidebar.sidebar-collapsed .nav-link img{
    height: 30px;
    width: 30px;
}

.home-sidebar.sidebar-collapsed .nav-link span,
.home-sidebar.sidebar-collapsed h4 {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.home-sidebar:not(.sidebar-collapsed) .nav-link span,
.home-sidebar:not(.sidebar-collapsed) h4 {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.home-sidebar a span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-sidebar a {
    display: inline-flex;
    align-items: center;
}

.home-sidebar .logo,
header .logo {
    background-image: url('/images/new_homepage/south1_logo.png');
    height: 50px;
    width: 150px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    transition: 0.5s ease-in-out;
    margin: 0;
    padding: 0;
}

.home-sidebar a:hover,
.home-sidebar button:hover,
header a:hover,
header button:hover {
    cursor: pointer;
}

header option {
    background-color: #110A1D;
}

header .h-btn-green {
    background-color: #14ab32;
    border-radius: 5px;
    padding: 9px;
    text-wrap: nowrap;
}

header .h-btn-green:hover {
    background-color: #14ab32c2;
    color: rgba(255, 255, 255, 0.919);
}

header.row,
#sidebar .row,
footer .row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-around;
}

.home-sidebar a,
header a {
    text-decoration: none;
}



footer {
    grid-area: footer;
    padding: 30px 0px !important;
    /* margin-top: 50px !important; */
    background-color: #13132D;
    overflow: hidden;
}