.with-likes {
  & {
    position: relative;
  }
.likes-wrapper {
  position: absolute;
}
}
.lite-page+.likes-wrapper {
  max-width:100px;
       width: fit-content;
}
.likes-wrapper {
  & {
     position: static;
        bottom: 15px;
        right: 15px;
        display: flex;
        gap: 5px;
        border-radius:50%;
        border: 1px solid var(--deep-gray);
        padding: 8px;
        transition: .3s;
        justify-content: space-between;
      .like-counter {
          display: none;
      }
  }
  svg path {
    transition:.3s;
    stroke: rgba(131, 135, 174, 0.60);
    fill:rgba(131, 135, 174, 0);
  }
  &.pressed {
      background-color:var(--gray-color);
        svg path {
            stroke:var(--primary-color);
            fill: var(--primary-color);
        }
  }
}
.likes-wrapper:hover {
  & {
    background:#F8F9FC;
  }
}
.like-counter {
  color:rgba(131, 135, 174, 0.60);
  transition:.3s;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
}
.pressed .like-counter {
  color: rgba(185, 12, 16, 0.70);
}
.likes-wrapper.blocked {
  cursor:not-allowed;
  opacity:.9;
  user-select: none;
}
.lesson-list.fullpicture {
  .likes-wrapper {
    bottom: auto;
    top: 15px;
    left: 15px;
    max-width: max-content;
    margin-right: auto;
    background:rgba(255,255,255,.3);
              width: fit-content;
  }
  svg {
    min-width:30px!important;
    width:30px!important;
    height:30px!important;
    margin-right:0!important;
  }
}
.favourites-widget {
    gap: 15px;
  &.flex {
    display:flex;
  }
  &.flex-wrap {
    flex-wrap:wrap;
  }
  &.p-30 {
    padding:30px;
  }
  &.br-16 {
    border-radius: 16px;
  }
  &.b-white {
    background: var(--white-color, white);
  }
  .widget-title {
    & {
      color: var(--primary-color);
      position: relative;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 120%;
    }
    svg {
      position: absolute;
      top:7px;
      right:0px;
      transition:.3s;
        path {
            stroke:var(--primary-color)!important;
        }
    }
    &[aria-expanded="true"] {
      svg {
        transform:rotate(180deg);
      }
    }
  }
  .widget-body {
    width: 100%;
  }

  .favourite-item {
      text-decoration: none;
        display: flex;
        gap:10px;
        align-items: center;
        justify-content: space-between;
        svg {
            width:20px;
            height:20px;
        }
    padding:15px;
    border-radius: 12px;
    background: var(--gray-color);
    margin-bottom:10px;
    overflow: hidden;
    color: var(--black-text);
    width:100%;
    max-width:100%;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
      &:last-child {
          margin-bottom:0;
      }
  }
  .lds-ring {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 4px;
    border: 4px solid var(--main-color);
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--main-color) transparent transparent transparent;
  }
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width:991px) {
  .likes-wrapper {
    bottom: auto;
    top: 15px;
  }

  .likes-wrapper {
    svg {
      min-width:18px!important;
      width:18px!important;
      height:18px!important;
    }
    .like-counter {
      font-size:12px;
    }
  }
}


/* ------------- 
content start - fix
------------- */

.with-likes {
	 position: relative;
}
 .with-likes .likes-wrapper {
	 position: absolute;
}
 .lite-page + .likes-wrapper {
	 max-width: 100px;
}
 .likes-wrapper {
	 position: static;
	 bottom: 15px;
	 right: 15px;
	 display: flex;
	 gap: 5px;
	 border-radius: 50%;
	 border: 1px solid var(--deep-gray);
	 padding: 8px;
	 transition: 0.3s;
	 justify-content: space-between;
}
 .likes-wrapper .like-counter {
	 display: none;
}
 .likes-wrapper svg path {
	 transition: 0.3s;
	 stroke: rgba(131, 135, 174, 0.60);
	 fill: rgba(131, 135, 174, 0);
}
 .likes-wrapper.pressed {
	 background-color: var(--gray-color);
}
 .likes-wrapper.pressed svg path {
	 stroke: var(--primary-color);
	 fill: var(--primary-color);
}
 .likes-wrapper:hover {
	 background: #f8f9fc;
}
 .like-counter {
	 color: rgba(131, 135, 174, 0.60);
	 transition: 0.3s;
	 font-size: 20px;
	 font-style: normal;
	 font-weight: 700;
}
 .pressed .like-counter {
	 color: rgba(185, 12, 16, 0.70);
}
 .likes-wrapper.blocked {
	 cursor: not-allowed;
	 opacity: 0.9;
	 user-select: none;
}
 .lesson-list.fullpicture .likes-wrapper {
	 bottom: auto;
	 top: 15px;
	 left: 15px;
	 max-width: max-content;
	 margin-right: auto;
	 background: rgba(255, 255, 255, .3);
	 width: fit-content;
}
 .lesson-list.fullpicture svg {
	 min-width: 30px !important;
	 width: 30px !important;
	 height: 30px !important;
	 margin-right: 0 !important;
}
 .favourites-widget {
	 gap: 15px;
}
 .favourites-widget.flex {
	 display: flex;
}
 .favourites-widget.flex-wrap {
	 flex-wrap: wrap;
}
 .favourites-widget.p-30 {
	 padding: 30px;
}
 .favourites-widget.br-16 {
	 border-radius: 16px;
}
 .favourites-widget.b-white {
	 background: var(--white-color, white);
}
 .favourites-widget .widget-title {
	 color: var(--primary-color);
	 position: relative;
	 font-size: 20px;
	 font-style: normal;
	 font-weight: 600;
	 line-height: 120%;
}
 .favourites-widget .widget-title svg {
	 position: absolute;
	 top: 7px;
	 right: 0px;
	 transition: 0.3s;
}
 .favourites-widget .widget-title svg path {
	 stroke: var(--primary-color) !important;
}
 .favourites-widget .widget-title[aria-expanded="true"] svg {
	 transform: rotate(180deg);
}
 .favourites-widget .widget-body {
	 width: 100%;
}
 .favourites-widget .favourite-item {
	 text-decoration: none;
	 display: flex;
	 gap: 10px;
	 align-items: center;
	 justify-content: space-between;
	 padding: 15px;
	 border-radius: 12px;
	 background: var(--gray-color);
	 margin-bottom: 10px;
	 overflow: hidden;
	 color: var(--black-text);
	 width: 100%;
	 max-width: 100%;
	 font-size: 14px;
	 font-style: normal;
	 font-weight: 400;
	 line-height: 130%;
}
 .favourites-widget .favourite-item svg {
	 width: 20px;
	 height: 20px;
}
 .favourites-widget .favourite-item:last-child {
	 margin-bottom: 0;
}
 .favourites-widget .lds-ring {
	 display: inline-block;
	 position: relative;
	 width: 20px;
	 height: 20px;
}
 .favourites-widget .lds-ring div {
	 box-sizing: border-box;
	 display: block;
	 position: absolute;
	 width: 16px;
	 height: 16px;
	 margin: 4px;
	 border: 4px solid var(--main-color);
	 border-radius: 50%;
	 animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	 border-color: var(--main-color) transparent transparent transparent;
}
 .lds-ring div:nth-child(1) {
	 animation-delay: -0.45s;
}
 .lds-ring div:nth-child(2) {
	 animation-delay: -0.3s;
}
 .lds-ring div:nth-child(3) {
	 animation-delay: -0.15s;
}
 @keyframes lds-ring {
	 0% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(360deg);
	}
}
 @media (max-width: 991px) {
	 .likes-wrapper {
		 bottom: auto;
		 top: 15px;
	}
	 .likes-wrapper svg {
		 min-width: 18px !important;
		 width: 18px !important;
		 height: 18px !important;
	}
	 .likes-wrapper .like-counter {
		 font-size: 12px;
	}
}
 
/* ------------- 
content finish - fix
------------- */

/* ------------- 
content start - css from scss
------------- */

.with-likes {
	 position: relative;
}
 .with-likes .likes-wrapper {
	 position: absolute;
}
 .lite-page + .likes-wrapper {
	 max-width: 100px;
	 width: fit-content;
}
 .likes-wrapper {
	 position: static;
	 bottom: 15px;
	 right: 15px;
	 display: flex;
	 gap: 5px;
	 border-radius: 50%;
	 border: 1px solid var(--deep-gray);
	 padding: 8px;
	 transition: 0.3s;
	 justify-content: space-between;
}
 .likes-wrapper .like-counter {
	 display: none;
}
 .likes-wrapper svg path {
	 transition: 0.3s;
	 stroke: rgba(131, 135, 174, 0.60);
	 fill: rgba(131, 135, 174, 0);
}
 .likes-wrapper.pressed {
	 background-color: var(--gray-color);
}
 .likes-wrapper.pressed svg path {
	 stroke: var(--primary-color);
	 fill: var(--primary-color);
}
 .likes-wrapper:hover {
	 background: #f8f9fc;
}
 .like-counter {
	 color: rgba(131, 135, 174, 0.60);
	 transition: 0.3s;
	 font-size: 20px;
	 font-style: normal;
	 font-weight: 700;
}
 .pressed .like-counter {
	 color: rgba(185, 12, 16, 0.70);
}
 .likes-wrapper.blocked {
	 cursor: not-allowed;
	 opacity: 0.9;
	 user-select: none;
}
 .lesson-list.fullpicture .likes-wrapper {
	 bottom: auto;
	 top: 15px;
	 left: 15px;
	 max-width: max-content;
	 margin-right: auto;
	 background: rgba(255, 255, 255, .3);
	 width: fit-content;
}
 .lesson-list.fullpicture svg {
	 min-width: 30px !important;
	 width: 30px !important;
	 height: 30px !important;
	 margin-right: 0 !important;
}
 .favourites-widget {
	 gap: 15px;
}
 .favourites-widget.flex {
	 display: flex;
}
 .favourites-widget.flex-wrap {
	 flex-wrap: wrap;
}
 .favourites-widget.p-30 {
	 padding: 30px;
}
 .favourites-widget.br-16 {
	 border-radius: 16px;
}
 .favourites-widget.b-white {
	 background: var(--white-color, white);
}
 .favourites-widget .widget-title {
	 color: var(--primary-color);
	 position: relative;
	 font-size: 20px;
	 font-style: normal;
	 font-weight: 600;
	 line-height: 120%;
}
 .favourites-widget .widget-title svg {
	 position: absolute;
	 top: 7px;
	 right: 0px;
	 transition: 0.3s;
}
 .favourites-widget .widget-title svg path {
	 stroke: var(--primary-color) !important;
}
 .favourites-widget .widget-title[aria-expanded="true"] svg {
	 transform: rotate(180deg);
}
 .favourites-widget .widget-body {
	 width: 100%;
}
 .favourites-widget .favourite-item {
	 text-decoration: none;
	 display: flex;
	 gap: 10px;
	 align-items: center;
	 justify-content: space-between;
	 padding: 15px;
	 border-radius: 12px;
	 background: var(--gray-color);
	 margin-bottom: 10px;
	 overflow: hidden;
	 color: var(--black-text);
	 width: 100%;
	 max-width: 100%;
	 font-size: 14px;
	 font-style: normal;
	 font-weight: 400;
	 line-height: 130%;
}
 .favourites-widget .favourite-item svg {
	 width: 20px;
	 height: 20px;
}
 .favourites-widget .favourite-item:last-child {
	 margin-bottom: 0;
}
 .favourites-widget .lds-ring {
	 display: inline-block;
	 position: relative;
	 width: 20px;
	 height: 20px;
}
 .favourites-widget .lds-ring div {
	 box-sizing: border-box;
	 display: block;
	 position: absolute;
	 width: 16px;
	 height: 16px;
	 margin: 4px;
	 border: 4px solid var(--main-color);
	 border-radius: 50%;
	 animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	 border-color: var(--main-color) transparent transparent transparent;
}
 .lds-ring div:nth-child(1) {
	 animation-delay: -0.45s;
}
 .lds-ring div:nth-child(2) {
	 animation-delay: -0.3s;
}
 .lds-ring div:nth-child(3) {
	 animation-delay: -0.15s;
}
 @keyframes lds-ring {
	 0% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(360deg);
	}
}
 @media (max-width: 991px) {
	 .likes-wrapper {
		 bottom: auto;
		 top: 15px;
	}
	 .likes-wrapper svg {
		 min-width: 18px !important;
		 width: 18px !important;
		 height: 18px !important;
	}
	 .likes-wrapper .like-counter {
		 font-size: 12px;
	}
}
 
/* ------------- 
content finish - css from scss
------------- */