@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-Medium.eot');
    src: local('SF Pro Display Medium'), local('SFProDisplay-Medium'),
    url('/lk/assets/fonts/SFProDisplay-Medium.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-Medium.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-Medium.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-Heavy.eot');
    src: local('SF Pro Display Heavy'), local('SFProDisplay-Heavy'),
    url('/lk/assets/fonts/SFProDisplay-Heavy.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-Heavy.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-Heavy.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-UltralightItalic.eot');
    src: local('SF Pro Display UltralightItalic'), local('SFProDisplay-UltralightItalic'),
    url('/lk/assets/fonts/SFProDisplay-UltralightItalic.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-UltralightItalic.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-UltralightItalic.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-UltralightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-RegularItalic.eot');
    src: local('SF Pro Display Regular Italic'), local('SFProDisplay-RegularItalic'),
    url('/lk/assets/fonts/SFProDisplay-RegularItalic.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-RegularItalic.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-RegularItalic.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-RegularItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-Thin.eot');
    src: local('SF Pro Display Thin'), local('SFProDisplay-Thin'),
    url('/lk/assets/fonts/SFProDisplay-Thin.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-Thin.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-Thin.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-Light.eot');
    src: local('SF Pro Display Light'), local('SFProDisplay-Light'),
    url('/lk/assets/fonts/SFProDisplay-Light.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-Light.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-Light.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-Light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-BlackItalic.eot');
    src: local('SF Pro Display Black Italic'), local('SFProDisplay-BlackItalic'),
    url('/lk/assets/fonts/SFProDisplay-BlackItalic.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-BlackItalic.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-BlackItalic.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-Bold.eot');
    src: local('SF Pro Display Bold'), local('SFProDisplay-Bold'),
    url('/lk/assets/fonts/SFProDisplay-Bold.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-Bold.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-Bold.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-Black.eot');
    src: local('SF Pro Display Black'), local('SFProDisplay-Black'),
    url('/lk/assets/fonts/SFProDisplay-Black.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-Black.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-Black.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-SemiboldItalic.eot');
    src: local('SF Pro Display SemiboldItalic'), local('SFProDisplay-SemiboldItalic'),
    url('/lk/assets/fonts/SFProDisplay-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-SemiboldItalic.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-SemiboldItalic.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-Ultralight.eot');
    src: local('SF Pro Display Ultralight'), local('SFProDisplay-Ultralight'),
    url('/lk/assets/fonts/SFProDisplay-Ultralight.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-Ultralight.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-Ultralight.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-Ultralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-LightItalic.eot');
    src: local('SF Pro Display LightItalic'), local('SFProDisplay-LightItalic'),
    url('/lk/assets/fonts/SFProDisplay-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-LightItalic.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-LightItalic.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-LightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-ThinItalic.eot');
    src: local('SF Pro Display ThinItalic'), local('SFProDisplay-ThinItalic'),
    url('/lk/assets/fonts/SFProDisplay-ThinItalic.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-ThinItalic.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-ThinItalic.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-MediumItalic.eot');
    src: local('SF Pro Display MediumItalic'), local('SFProDisplay-MediumItalic'),
    url('/lk/assets/fonts/SFProDisplay-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-MediumItalic.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-MediumItalic.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-Semibold.eot');
    src: local('SF Pro Display Semibold'), local('SFProDisplay-Semibold'),
    url('/lk/assets/fonts/SFProDisplay-Semibold.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-Semibold.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-Semibold.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-HeavyItalic.eot');
    src: local('SF Pro Display HeavyItalic'), local('SFProDisplay-HeavyItalic'),
    url('/lk/assets/fonts/SFProDisplay-HeavyItalic.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-HeavyItalic.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-HeavyItalic.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-HeavyItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-Regular.eot');
    src: local('SF Pro Display Regular'), local('SFProDisplay-Regular'),
    url('/lk/assets/fonts/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-Regular.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-Regular.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/lk/assets/fonts/SFProDisplay-BoldItalic.eot');
    src: local('SF Pro Display BoldItalic'), local('SFProDisplay-BoldItalic'),
    url('/lk/assets/fonts/SFProDisplay-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('/lk/assets/fonts/SFProDisplay-BoldItalic.woff2') format('woff2'),
    url('/lk/assets/fonts/SFProDisplay-BoldItalic.woff') format('woff'),
    url('/lk/assets/fonts/SFProDisplay-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

*{
    font-family: 'SF Pro Display';
}

.logo-menu{
    height: 30px;
}
@media screen and (max-width: 800px){
    .logo-menu{
        width: 100px;
    }
}

.btn{
    border-radius: 50px;
    outline: none;
    font-size: 20px;
    padding: 10px 25px;
    font-weight: 700;
    cursor: pointer;
    transition-duration: .3s;
}

.btn-primary{
    background: linear-gradient(90deg, #01A4FF -11.36%, #1BE194 53.63%, #99FD07 120%);
    color: #ffffff;
    border: none;
}

.btn-danger{
    background: #df0200;
    color: #ffffff;
    border: none;
}

.text-gradient{
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, rgba(1, 164, 255, 0.81) -11.36%, rgba(27, 225, 148, 0.81) 53.63%, rgba(153, 253, 7, 0.8) 120%);
}

.btn-outline{
    border: 1px solid #1BE194;
    background: none;
    color: rgba(153, 253, 7, 0.8);
    border-color: linear-gradient(90deg, rgba(1, 164, 255, 0.81) -11.36%, rgba(27, 225, 148, 0.81) 53.63%, rgba(153, 253, 7, 0.8) 120%);
}

.btn-outline:active{
    background: linear-gradient(90deg, rgba(1, 164, 255, 0.81) -11.36%, rgba(27, 225, 148, 0.81) 53.63%, rgba(153, 253, 7, 0.8) 120%);
    color: white;
}

.btn-primary:hover{
    background: linear-gradient(90deg, rgba(1, 164, 255, 0.81) -11.36%, rgba(27, 225, 148, 0.81) 53.63%, rgba(153, 253, 7, 0.8) 120%);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.btn-primary:active{
    background: rgba(27, 225, 148, 0.81);
}

.link{
    color: #808080;
    text-decoration: none;
}
.link.active{
    text-decoration: underline;
    color: black;
}
.link:hover{
    color: black;
}

.form-control{
    width: 100%;
    outline: none;
    padding: 7px 10px;
    font-size: 18px;
    border: 1px solid #c5c5c5;
    border-radius: 10px;
}

.form-control:focus{
    border: 1px solid #6b6b6b;
}

.container-auth{
    height: 88vh;
    display: flex;
    align-items: center;
}

.profile-coach{
    padding: 10px;
    background: #eeeeee;
    border-radius: 10px;
    width: 250px;
    cursor: pointer;
}

.profile-coach__avatar{
    height: 20px;
    width: 20px;
    border-radius: 50%;
}

.logout-btn:hover{
    transition-duration: .3s;
    color: #000!important;
}

.attestation__category{
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    align-items: center;
}

.attestation__item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition-duration: .3s;
    padding-left: 20px;
}

.attestation__item:hover, .attestation__item.active{
    background-color: #efefef;
}

.attestation{
    margin-bottom: 20px;
}

.edit-item{
    color: #c5c5c5;
    cursor: pointer;
    margin-left: 10px;
    transition-duration: .3s;
}
.edit-item:hover{
    color: #000000;
}

.delete-item{
    color: rgba(251, 0, 4, 0.24);
    cursor: pointer;
    margin-left: 10px;
    transition-duration: .3s;
}
.delete-item:hover{
    color: #ef0004;
}

.br-5px{
    border-radius: 5px;
}

.attestation__item .edit-item,.attestation__item .delete-item{
    opacity: 0;
}

.attestation__item:hover .edit-item,.attestation__item:hover .delete-item{
    opacity: 1;
}

.js-add-requirements{
    color: #c5c5c5;
    transition-duration: .3s;
    cursor: pointer;
}

.js-add-requirements:hover{
    color: #000000;
}

/* свойства модального окна по умолчанию */
.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5); /* цвет фона */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in;
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* при отображении модального окно */
.modal:target {
    opacity: 1; /* делаем окно видимым */
    pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 700px;
        margin: 30px auto; /* для отображения модального окна по центру */
    }
}
/* свойства для блока, содержащего контент модального окна */
.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
    }
}
/* свойства для заголовка модального окна */
.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}
.item-attestation_player{
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 5px;
    transition-duration: .3s;
}
.item-attestation_player:hover{
    background-color: #eeeeee;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

@media screen and (max-width: 800px){
    .m-pl-0{
        padding-left: 0!important;
    }
}