*{
  font-family: 'Nunito';
}

:root {
  --ng-main-color: #0e151f;
  --ng-main-sub-color: #2d343e;
  --ng-main-text-color: #8391a2;
  --ng-light-border: #e5e5e5;
}
.content {
  background-color: #f4f6ff;
}
.main-wrapper {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.hidden-scroll::-webkit-scrollbar {
  width: 0;
}


.leftbar-small .left-menu-search-block{
  display: none;
}

.leftbar-small.left-menu{
    width: 70px;
}
.leftbar-small.left-menu .left-menu-content{
  padding: 0;
}

.leftbar-small.left-menu .left-menu-content .left-menu-item span{
  display: none;
}
.leftbar-small.left-menu .left-menu-content .left-menu-item i{
  font-size: 28px;
  margin-left: 21px;
}

.leftbar-small.left-menu .left-menu-content .left-menu-label{
  display: none;
}
.leftbar-small.left-menu .left-menu-content .collapse-menu-place {
  display: none;
}
.leftbar-small.content{
  margin-left: 70px;
}
.leftbar-small.content-header{
  left: 70px;
  max-height: 70px;
}
.leftbar-small.left-menu h4{
  display: none;
}
.leftbar-small.left-menu .left-menu-header{
  padding-top: 6px;
}



.left-menu{
  background-color: var(--ng-main-color);
  color: var(--ng-main-text-color);
  width: 260px;
  z-index: 10;
  bottom: 0;
  position: fixed;
  top: 0;
  font-weight: 600;
  padding-top: 60px;
}
.left-menu-header{
  height: 60px;
  margin-bottom: 20px;
  width: 260px;
  position: fixed;
  top:0;
}

.left-menu-content{
  height: 100%;
  padding-left: 30px;
  overflow: hidden scroll;
}
/* полоса прокрутки (скроллбар) */
.left-menu-content:hover::-webkit-scrollbar {
    width: 4px; /* ширина для вертикального скролла */
    height: 8px; /* высота для горизонтального скролла */
    background-color: var(--ng-main-color);
}
.left-menu-content::-webkit-scrollbar {
    width: 4px; /* ширина для вертикального скролла */
    height: 8px; /* высота для горизонтального скролла */
    background-color: transparent;
}

/* ползунок скроллбара */
.left-menu-content::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 0px;
}
.left-menu-content:hover::-webkit-scrollbar-thumb {
    background-color: #6a737e;
    border-radius: 4px;
}




.left-menu-label{
  letter-spacing: .04em;
  pointer-events: none;
  cursor: default;
  font-size: 0.7rem;
  text-transform: uppercase;
  margin-bottom: 20px;
  margin-top: 51px;
  font-weight: 700;
}

.left-menu-item{
  color: var(--ng-main-text-color);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 0 8px 0;
  width: 100%;
}
.left-menu-item i {
  font-size: 18px;
}
.left-menu-item:hover{
  color: #cfcfcf;
  cursor: pointer;
}
.left-menu-item .left-menu-item-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  color: var(--ng-main-text-color);
  width: 100%;
  transition: 0.3s;
}
.left-menu-item:hover .left-menu-item-link{
  color: #cfcfcf;
  cursor: pointer;
}

.left-menu-sub-item{
  color: var(--ng-main-text-color);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 8px 0 8px 0;
  width: 100%;
}
.left-menu-sub-item .left-menu-item-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  color: var(--ng-main-text-color);
  width: 100%;
  transition: 0.3s;
}
.left-menu-sub-item:hover .left-menu-item-link{
  color: #cfcfcf;
  cursor: pointer;
}
.left-menu-sub-item:hover{
  color: #cfcfcf;
  cursor: pointer;
}




.collapse-menu-place {
  padding-left: 25px;
}
.collapse-arrow{
  position: relative;
}
.left-menu-item-collapse .collapse-arrow::before{
  position: absolute;
  top: -12px;
  left: 205px;
  content: "\203A";
  line-height: 24px;
  font-size: 30px;
  transform: rotate(0.25turn);
  transition: 0.3s;
  font-weight: 200;
}

.left-menu-item-collapse.collapsed .collapse-arrow::before{
  position: absolute;
  top: -12px;
  left: 205px;
  content: "\203A";
  line-height: 24px;
  font-size: 30px;
  transform: rotate(0turn);
  transition: 0.3s;
  font-weight: 200;
}
/* .left-menu-item-collapse::before{
  content: "\203A";
  line-height: 24px;
  font-size: 30px;
  position: absolute;
  right: 17px;
  transform: rotate(0.25turn);
  transition: 0.3s;
  font-weight: 200;
}
.left-menu-item-collapse.collapsed::before{
  content: "\203A";
  line-height: 24px;
  font-size: 30px;
  position: absolute;
  right: 17px;
  transform: rotate(0turn);
  transition: 0.3s;
  font-weight: 200;
} */



.content-body{
  margin-top: 70px;
  padding: 0.75rem 0px;
}

.content-header{
  color: var(--ng-main-text-color);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0 0.75rem;
  background-color: #fff;
  -webkit-box-shadow: 0 0 12px 0 rgb(154 161 171 / 15%);
  box-shadow: 0 0 12px 0 rgb(154 161 171 / 15%);
  height: 70px;
  position: fixed;
  left: 260px;
  top: 0;
  right: 0;
  z-index: 1001;
}
.content-header i {
  color: #202020;
}
.user-block{
  border-left:1px solid var(--ng-light-border);
}

.left-menu-toggle-button i {
  font-size: 30px;
}

.icons-block i {
  font-size: 30px;
}







.type-link.left-open-menu{
  color: #cfcfcf;
  font-weight: 700;
  padding: 12px;
}
.type-list.left-open-menu .left-menu-open-header{
  color: #cfcfcf;
  font-weight: 700;
  padding: 12px;
}

.type-list.left-open-menu .left-menu-open-body a{
  color: var(--ng-main-text-color);
  font-weight: 500;
  transition: 0.3s;
}
.type-list.left-open-menu .left-menu-open-body a:hover{
  color: #cfcfcf;
  transition: 0.3s;
}


/* полоса прокрутки (скроллбар) */
.left-menu-open-body::-webkit-scrollbar {
    width: 4px; /* ширина для вертикального скролла */
    height: 8px; /* высота для горизонтального скролла */
    background-color: var(--ng-main-color);
}

/* ползунок скроллбара */
.left-menu-open-body::-webkit-scrollbar-thumb {
    background-color: #6a737e;
    border-radius: 4px;
}




.content{
  margin-left: 260px;
  overflow: hidden;
  min-height: 100vh;
}


.img-slider{
  opacity: 0.6;
}
.img-slider.active{
  opacity: 1!important;
}























.canvas_place canvas{
  background-color: #313a46;
  border-radius: 12px;
  border: 1px solid black;
}







.max-lines{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}