@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@font-face {
    font-family: 'RF Dewi Extended Bold';
    src: url('/fileservice/file/download/h/8170ff0ce5844cee76d6954fa232c88d.otf/a/442890/sc/212') format('opentype'),
         url('/fileservice/file/download/h/3525db17fd0aeef5589aceaa43292a05.woff/a/442890/sc/280') format('woff');
}

@font-face {
    font-family: 'RF Dewi Extended Light';
    src: url('/fileservice/file/download/h/3c234d3b26873d85aa2a8021559cec99.otf/a/442890/sc/99') format('opentype'),
         url('/fileservice/file/download/h/4b4293c7ac86773ed9fbad5bf0cc2815.woff/a/442890/sc/295') format('woff');
}

@font-face {
    font-family: 'RF Dewi Extended Regular';
    src: url('/fileservice/file/download/h/2c2b7f54c10b381be0fc1c9e7053df38.otf/a/442890/sc/231') format('opentype'),
         url('/fileservice/file/download/h/e5f11c5102b6262c1c7b1430de66c322.woff/a/442890/sc/70') format('woff');
}

:root {
    --color-black: #000000;
    --color-cyan-bluish-gray: #0b6aba;
    --color-white: #ffffff;
    --color-gray: #F6F6F6;
    --color-vivid-red: #cf2e2e;
    --color-orange: #ff6900; 
    --color-amber: #fcb900;
    --color-yellow: #FFD600;
    --color-green-cyan: #00d084;
    --gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
    --gradient-orange-to-yellow: linear-gradient(35deg, #fcb900 0%, #FFD600 100%);
    --gradient--cool-to-warm-spectrum: linear-gradient(35deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
    --gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
    --font-size--small: 13px;
    --font-size--medium: 20px;
    --font-size--large: 36px;
    --font-size--x-large: 42px;
    --spacing--20: 0.44rem;
    --spacing--30: 0.67rem;
    --spacing--40: 1rem;
    --spacing--50: 1.5rem;
    --spacing--60: 2.25rem;
    --shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --primary-font-1: 'RF Dewi Extended Bold', sans-serif;
    --primary-font-2: 'RF Dewi Extended Light', sans-serif;
    --primary-font-3: 'RF Dewi Extended Regular', sans-serif;    
    --secondary-font: 'Inter', sans-serif;
}

body {
    min-width: 360px;
    background: var(--color-gray);
}

.breadcrumbs {
    font-family: var(--primary-font-1);
    color: var(--color-black)!important;
}

.breadcrumbs a {
    font-family: var(--primary-font-1);
    color: var(--color-black)!important;
}

.helps-block :hover {
    transform: translatey(10px);
    box-shadow: var(--shadow--natural);
    transition: 2s ease transform; 
}

.page-header h1 {
    margin-right: 50px;
    margin-top: 0px;
    margin-left: 0px;
    font-family: var(--primary-font-1);   
}

.lesson-list {
    margin: 0 -15px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    padding: 0 !important;
    background: 0 !important
}

.lesson-list li {
    position: relative;
    flex: 0 1 30%;
    margin: 14px;
    padding: 15px;
    height: 280px;
    border: 1px solid var(--color-yellow);
    border-radius: 15px;
    box-shadow: var(--shadow--natural);
    transition: all .3s;
    background: var(--gradient-orange-to-yellow);
}

.lesson-list li:hover {
  transform:scale(1.03);
  transition: 2s ease transform;  
  box-shadow: var(--shadow--natural);
  cursor: pointer;
}

.lesson-list li.first-unreached {
    margin-top: 12px;
}

.lesson-list li.divider {
    display: none;
}

.lesson-list li.user-state-reached .user-state-label.has-start-at {
    display: none;
}

.lesson-list li::before {
    content: "Перейти к изучению";
    font-family: var(--secondary-font);   
    position: absolute;
    bottom: 25px;
    left:25px;
    color: var(--color-black);
    font-size: 12px;
    font-weight: 400;
    display: inline-block;
    padding: 5px 7px;
    /*padding: 9px 17px;*/
    background: var(--color-white);
    border-radius: 5px;
    border: 1px solid var(--color-black);
}


.lesson-list li:hover::before {
    content: "Перейти к изучению";
    position: absolute;
    bottom: 25px;
    left:25px;
    color: var(--color-white);
    font-size: 12px;
    font-weight: 400;
    display: inline-block;
    padding: 5px 7px;
    /*padding: 9px 17px;*/
    background: var(--color-black);
    border-radius: 5px;
}

.lesson-list li .description {
    flex: 0 0 100%;
    margin: 20px 5px 0px 10px;
    font-size: 13px;
    font-family: var(--secondary-font)!important;
    color: #000;
    order: 2 !important;
}

.lesson-list li .title {
    flex: 0 0 100%;
    margin: 20px 5px 0px 10px;
    font-family: var(--secondary-font)!important;
    font-size: 18px !important;
    line-height: 1.2;
    color: var(--color-black);
    order: 1 !important;
}

.lesson-list li.user-state-not_reached .title,
.lesson-list li.user-state-not_reached .description,
.lesson-list li.user-state-not_reached a::after,
.lesson-list li.user-state-not_reached .info .vmiddle::before {
    color: var (--color-gray);

}

.lesson-list li.user-state-not_reached {
  transform:scale(1.03);
  transition: 2s ease transform; 
  background: #fef8e5;
  cursor: default;
}

.lesson-list li.user-state-not_reached:hover {
  transform:scale(1.03);
  transition: 2s ease transform; 
  background: #fef1cc !important;
  cursor: default;
}

.lesson-list li a {
    position: relative;
    display: block;
    height: 100%;
    background: 0 !important;
}

.lesson-list li.user-state-need_accomplish a::before,
.lesson-list li.user-state-has_mission a::before {
    content: url(https://fs.getcourse.ru/fileservice/file/download/a/116041/sc/76/h/d6912371d759bcc49569c86f18f43a56.png);
    position: absolute;
    bottom: 48px;
    left: 10px;
}

.lesson-list li.user-state-need_accomplish a::after,
.lesson-list li.user-state-has_mission a::after {
    content: "Есть задание";
    position: absolute;
    bottom: 50px;
    left: 30px;
    color: var(--color-black)!important;
    font-size: 12px;
}

.lesson-list li.user-state-answered a::before {
    content: url(https://fs.getcourse.ru/fileservice/file/download/a/116041/sc/185/h/ec75fa661c80274ec0cda25075f4241e.png);
    position: absolute;
    bottom: 48px;
    left: 10px;
}

.lesson-list li.user-state-answered a::after {
    content: "На проверке";
    position: absolute;
    bottom: 50px;
    left: 30px;
    color: var(--color-cyan-bluish-gray)!important;
    font-size: 12px;
}

.lesson-list li.user-state-accomplished a::before {
    content: url(https://fs.getcourse.ru/fileservice/file/download/a/305077/sc/491/h/681b704401c59e1be37423b731231ea0.png);
    position: absolute;
    bottom: 48px;
    left: 10px;
}

.lesson-list li.user-state-accomplished:hover {
    border-color: var(--color-green-cyan)!important;
}

.lesson-list li.user-state-accomplished a::after {
    content: "Выполнено";
    position: absolute;
    bottom: 50px;
    left: 30px;
    color: var(--color-green-cyan) !important;
    font-size: 12px;
}

.lesson-list li.user-state-accomplished a:hover::before {
    content: url(https://fs.getcourse.ru/fileservice/file/download/a/305077/sc/229/h/6e5ee3db9123024443f5fe40c108fabc.png);
    position: absolute;
    bottom: 48px;
    left: 10px;
}

.lesson-list li .hidden-xs {
    display: none;
}

.lesson-list li .info {
    margin-left: 0;
    background: 0 !important;
    border: 0 !important;
}

.lesson-list li table {
    min-width: inherit;
}

.lesson-list li .info .vmiddle {  
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.lesson-list li .description {
    flex: 0 0 100%;
    margin: 20px 5px 0px 10px;
    font-size: 13px;
    font-family: var(--secondary-font)!important;
    color: #000;
    order: 2 !important;
}

.lesson-list li .title {
    flex: 0 0 100%;
    margin: 20px 5px 0px 10px;
    font-family: var(--secondary-font)!important;
    font-size: 18px !important;
    line-height: 1.2;
    color: var(--color-black);
    order: 1 !important;
}

.lesson-list li .user-state-label {
    display: none;
}

.lesson-list li .info .vmiddle::before {
    position: absolute;
    bottom: 0px;
    right: 0;
    color: #000
}

.lesson-list li.user-state-not_reached {
  transform:scale(1.03);
  transition: 2s ease transform; 
  background: #fef8e5;
  cursor: default;
}

.lesson-list li.user-state-not_reached:hover {
  transform:scale(1.03);
  transition: 2s ease transform; 
  background: #fef1cc !important;
  cursor: default;
}

.lesson-list li.user-state-not_reached .title,
.lesson-list li.user-state-not_reached .description,
.lesson-list li.user-state-not_reached a::after,
.lesson-list li.user-state-not_reached .info .vmiddle::before {
    color: var (--color-gray);
}

.lesson-list li.user-state-not_reached .description::before {
    content: url(https://fs.getcourse.ru/fileservice/file/download/a/116041/sc/107/h/0d6b9b13b5723e3839f765ec22759f0b.png);
    position: relative;
    top: 2px;
}


@media (max-width:1245px) {
.lesson-list li {
  flex: 0 1 100% !important;
    }
  
.lesson-list li .title {
    margin: 135px 10px;
    font-size: 22px !important;
}
    
.lesson-list li::before {
    bottom: 40px;
    left: 465px;
}
  
.lesson-list li:hover::before {
    position: absolute;
    bottom: 40px;
    left: 465px;
}    
}

@media (max-width:1024px) {
.lesson-list li::before {
    bottom: 40px;
    left: 475px;
}
  
.lesson-list li:hover::before {
    position: absolute;
    bottom: 40px;
    left: 475px;
}    
}

@media (max-width:850px) {
.lesson-list li::before {
    bottom: 40px;
    left: 465px;
}
  
.lesson-list li:hover::before {
    position: absolute;
    bottom: 40px;
    left: 465px;
}
  
}

@media (max-width:768px) {    
.lesson-list {
    margin: 10px -15px 10px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}  
}

@media (max-width:540px) {
.lesson-list li {
        flex: 0 0 95% !important;
    }
    
.lesson-list li::before {
    left: 355px;
}

.lesson-list li:hover::before {
    left: 355px;
}    
}

@media (max-width:490px) {
.lesson-list li {
        flex: 0 0 95% !important;
    }
    
.lesson-list li::before {
    left: 215px;
}

.lesson-list li:hover::before {
    left: 215px;
}

.lesson-list li.user-state-need_accomplish a::before, .lesson-list li.user-state-has_mission a::before {
    left: 25px;
  }
  
.lesson-list li.user-state-need_accomplish a::after,
.lesson-list li.user-state-has_mission a::after {
    left: 50px;
}  
  
  
.lesson-list li.user-state-answered a::before {
    left: 25px;
}
  
.lesson-list li.user-state-answered a::after {
    left: 50px;
}  
  
.lesson-list li.user-state-accomplished a::after {
    left: 50px;
}  
  
.lesson-list li.user-state-accomplished a:hover::before {
    left: 25px;
}      
    
}

@media (max-width:420px) {
.lesson-list li::before {
    left: 205px!important;
}

.lesson-list li:hover::before {
    left: 205px!important;
}    
}

.helps-block {
    display: flex;
    flex-direction: column;
}

.helps-block__link:not(:last-child) {
    margin-bottom: 15px;
}

.helps-block__link:active, .helps-block__link:visited, .helps-block__link:link {
    text-decoration: none;
    color: var(--white-color);
}

.helps-block__link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 19px;
    background: var(--color-yellow);
    border-radius: 15px;
    font-family: var(--secondary-font);
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-size--medium);
    line-height: 120%;
    text-align: center;
    color: var(--white-color);
    transition: all 0.3s ease;
}


@media (max-width:1024px) {
.helps-block__link  {
        font-size: var(--font-size--small);
}
}

@media (max-width:820px) {
.helps-block {
    margin-left: 10px;
    }
    
.helps-block__link  {
        font-size: var(--font-size--small);
}
}

.progress-block {
  margin-top: 15px;
  border:2px solid var(--color-amber);
  padding:15px;
  border-radius:10px;
  box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.13);
}

.progress-block .header {
  font-size: 18px;
  line-height: 20px;
  font-family:var(--secondary-font);
  font-weight:500;
  margin-bottom:5px;
}

.progress-block .title {
  font-size: 16px;
  line-height: 20px;
  font-family: var(--secondary-font);
  font-weight:300;
  margin-bottom:10px;
}

.progress-block .progress-wrapper {
  background: #f0f0f0;
  border-radius: 7px;
  height: 20px;
  width: 100%;
  position: relative;
}

.progress-block .scale {
    position: absolute;
    width: 0%;
    max-width: 100%;
    height: 20px;
    border-radius: 7px;
    background: var(--color-amber);
}