@font-face {
    font-family: Inter;
    src: url(/assets/fonts/inter-thin.edb371061375075f.ttf) format("truetype");
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: Inter;
    src: url(/assets/fonts/inter-extra-light.de1642355fa969d5.ttf) format("truetype");
    font-weight: 200;
    font-style: normal
}

@font-face {
    font-family: Inter;
    src: url(/assets/fonts/inter-light.c1350cd2cfdafefc.ttf) format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: Inter;
    src: url(/assets/fonts/inter-regular.0fdeb2931d05200e.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Inter;
    src: url(/assets/fonts/inter-medium.b9d1825c254cd73b.ttf) format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Inter;
    src: url(/assets/fonts/inter-semibold.e8331194cc39db45.ttf) format("truetype");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: Inter;
    src: url(/assets/fonts/inter-bold.a2753c92736fd328.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Inter;
    src: url(/assets/fonts/inter-extra-bold.b7197d1427d9852f.ttf) format("truetype");
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: Inter;
    src: url(/assets/fonts/inter-black.7a0c9838fc6b0810.ttf) format("truetype");
    font-weight: 900;
    font-style: normal
}


html, body {
    font-family: Inter, serif;
    height: 100%;
}

.filial {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #F0F0F0;
}

.filial-content {
    width: 100%;
    height: 100%;
    top: 110px;
    position: relative;
    background-color: white;
    border-radius: 35px 35px 0 0;
    padding: 25px;
    padding-top: 60px;
}

.filial-image {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    width: 80px;
    height: 80px;
    top: -40px
}
.filial-image img {
    width: 100%;
    height: auto;
}

.filial-header-name {
    font-weight: bold;
    font-size: 24px;
}
.filial-header-name svg {
    transform: rotate(-90deg);
}
.filial-header-address {
    color: #808080;
    font-size: 14px;
}

.filial-body {
    margin-top: 20px;
}
.filial-body-btn {
    display: flex;
    margin-bottom: 10px;
}
.filial-body-btn:hover {
    cursor: pointer;
}

.filial-body-btn-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #EAEEF4;
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.filial-body-btn-label {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: start;
    font-size: 16px;
    font-weight: 400;
    color: #2b3134;
}

.filial-body-btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}



h2 {
    color: #2b3134;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-wrap: break-word;
    margin: 30px 0;
}

.staff-header {
    display: flex;
    margin-bottom: 10px;
}

.staff-photo {
    border-radius: 50%;
    overflow: hidden;
    width: 50px;
    height: 50px;
    margin-right: 15px;
}
.staff-photo img {
    width: 100%;
    height: auto;
}
.staff-profile {
    flex: 1;
}
.staff-profile-name {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.staff-profile-position {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #71757f;
    margin-bottom: 5px;
}
.staff-profile-rating {
    display: flex;
}
.staff-profile-rating-stars {
    display: flex;
    height: 15px;
    margin-right: 10px;
}
.staff-profile-rating-reviews {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #808080;
}
.staff-info {
    padding: 0 25px;
}
.staff-info-btn {
    background-color: #EAEEF4;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type=radio],
input[type=checkbox] {
    display: none;
}

.staff-btn label {
    width: 25px;
    height: 25px;
    border: 1px solid #C6CBD3;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.staff-btn input[type=radio]:checked + label::after {
    content: '';
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background-color: #10cb00;
}


.staff-schedule-label {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #71757f;
    margin-bottom: 8px;
}
.staff-schedule-label .date {
    color: #2b3134;
}


.time-btn {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

.time-btn label {
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    line-height: 34px;
    border-radius: 45px;
    user-select: none;
    background: #eaeef4;
    color: #2b3134;
    font-weight: 500;
}

.time-btn input[type=radio]:checked + label {
    background: #10cb00;
}

.time-btn input[type=radio]:disabled + label {
    background: #efefef;
    color: #666;
}

.footer-block {
    width: calc(100% - 30px);
    padding: 20px 0;
    position: fixed;
    bottom: 0;
    z-index: 1;
}
.footer-block.with-bg {
    background-color: white;
}
.footer-block-content {
    margin-bottom: 15px;
}
.counter-selected-services {
    display: flex;
    align-items: end;
}
.counter-selected-services span {
    margin-right: 10px;
}
.counter-selected-services span:last-child {
    margin-right: 0;
}
.counter-selected-services .counter {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #2b3134;
}
.counter-selected-services .timer {
    font-size: 12px;
    color: #808080;
    flex: 1;
}
.counter-selected-services .sum {
}
.counter-selected-services .edit svg path{
    fill: #808080;
}

.active-bnt {
    font-family: Inter, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    border-radius: 15px;
    background-color: #10cb00;
    border: none;
    width: 100%;
    padding: 15px;
    color: #2b3134;
}

.header-filial {
    margin-bottom: 15px;
}
.header-filial:hover {
    cursor: pointer;
}
.header-filial-back {
    display: flex;
    align-items: center;
    padding: 0 5px;
}
.header-filial-image {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 10px;
}
.header-filial-image img {
    width: 100%;
    height: auto;
}
.header-filial-info {
    flex: 1;
}
.header-filial-info-name {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}
.header-filial-info-address {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #808080;
    margin-top: 2px;
}

.service-groups-list {
    display: flex;
    overflow: scroll;
    position: sticky;
    top: -1px;
    background-color: white;
    padding: 10px 0;
}
.service-groups-list::-webkit-scrollbar { /* chrome based */
    width: 0;  /* ширина scrollbar'a */
    background: transparent;  /* опционально */
}

.service-groups-list:hover ::-webkit-scrollbar { /* chrome based */
    width: 3px;  /* ширина scrollbar'a */
}

.service-groups-list .group label {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    padding: 10px;
    margin-right: 10px;
    border-radius: 30px;
    background-color: #EAEEF4;
}
.service-groups-list .group:last-child label {
    margin-right: 0;
}
.service-groups-list .group label:hover {
    background-color: #e0e3eb;
    cursor: pointer;
}
.service-groups-list .group input[type=radio]:checked + label {
    background-color: #10cb00;
}

.service-search {
    width: 100%;
    padding: 5px;
    border-radius: 15px;
    border: 1px solid #C6CBD3;
    display: flex;
}
.service-search:hover {
    border-color: #808080;
}
.service-search svg path {
    fill: #808080;
}
.service-search input,
.service-search input:focus
{
    outline: none;
    border: none;
}
.service-search input {
    flex: 1;
}

.service {
    display: flex;
    margin-bottom: 10px;
}
.services-list .service:last-child {
    margin-bottom: 0;
}
.service-info {
    margin-right: 15px;
    flex: 1;
}

.service-name {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #2b3134;
}
.service-content {
    margin: 5px 0;
}
.service-time,
.service-description {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #2b3134;
}
.service-price {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #2b3134;
    white-space: nowrap;
}

.service-btn label {
    width: 20px;
    height: 20px;
    border: 1px solid #c6cbd3;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.service-btn input[type=checkbox]:checked + label {
    background-color: #10cb00;
}

.service-btn input[type=checkbox] + label svg {
    display: none;
}
.service-btn input[type=checkbox]:checked + label svg {
    display: block;
}

.popup {
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
}
.popup.showed {
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup.showed:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000000a6;
    z-index: -1;
}
.popup-content {
    background-color: white;
    max-width: 400px;
    max-height: 80%;
    width: 90%;
    height: 100%;

    padding: 20px;
    border-radius: 20px;
    overflow: hidden;
}
.popup-header {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}
.popup-close {
    width: 20px;
    height: 20px;
    background-color: #eaeef4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-body{
    height: 100%;
    overflow: scroll;
    padding-right: 10px;
}
.popup-body .counter-selected-services {
    margin-bottom: 20px;
    display: flex;
}
.popup-body .counter-selected-services .counter {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
}
.popup-body .counter-selected-services .timer {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
}
.popup-body .counter-selected-services .sum {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
}
.popup-body .service-price {
    margin: 0 10px;
}
.popup-body .service-time {
    color: #71757f;
}



.part-day-header {
    width: 100%;
    display: flex;
    margin: 15px 0;
    cursor: pointer;
}
.part-day-name {
    flex: 1;
    color: #71757f;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}
.part-day-header.collapsed .part-day-arrow {
    transform: rotate(180deg);
}

.calendar.copy {
    width: 100%;
    box-shadow: 0 10px 10px -8px gray;
    background-color: white;
    padding: 0 0 10px;
}
.calendar.copy .vanilla-calendar-header__content {
    justify-content: start;
    padding-left: 0;
}
.calendar.copy .vanilla-calendar-header__content .vanilla-calendar-month {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #2b3134;
    border: 2px solid #E8E8E8;
    border-radius: 8px;
    padding: 5px;
}

.calendar.copy .vanilla-calendar-week__day {
    color: #808080;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.calendar.copy .vanilla-calendar-day .vanilla-calendar-day__btn{
    color: #2b3134;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.calendar.copy .vanilla-calendar-day .vanilla-calendar-day__btn.vanilla-calendar-day__btn_prev,
.calendar.copy .vanilla-calendar-day .vanilla-calendar-day__btn.vanilla-calendar-day__btn_next,
.calendar.copy .vanilla-calendar-day .vanilla-calendar-day__btn.vanilla-calendar-day__btn_disabled{
    color: #959899;
}
.calendar.copy .vanilla-calendar-day .vanilla-calendar-day__btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: white;
}
.calendar.copy .vanilla-calendar-day .vanilla-calendar-day__btn.vanilla-calendar-day__btn_today {
    background-color: #f5f5f5;
}
.calendar.copy .vanilla-calendar-day .vanilla-calendar-day__btn.vanilla-calendar-day__btn_selected {
    background-color: #10CB00;
}

.record-details .staff {
    margin-bottom: 20px;
}
.record-details .date {
    display: flex;
    margin-bottom: 20px;
}
.record-details .date .image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
.record-details .date .date-info {
    flex: 1;
}
.record-details .date .date-info .date-date {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #71757f;
    text-transform: capitalize;
}
.record-details .date .date-info .date-time {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #2b3134;
}
.record-details .services .service-header {
    display: flex;
    align-items: end;
    margin-bottom: 20px;
}
.record-details .services .service-header h2 {
    margin: 0 10px 0 0;
}
.record-details .services .service-header .duration {
    flex: 1;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #808080;
}
.record-details .services .service-body .service {
    display: flex;
    margin-bottom: 15px;
}
.record-details .services .service-body .service-info {
    flex: 1;
}
.record-details .services .service-body .service-name {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #2b3134;
}
.record-details .services .service-body .service-time {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #71757f;
}
.record-details .services .service-body .service-price {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #2b3134;
}
.record-details .services .service-footer {
    display: flex;
}
.record-details .services .service-footer .total-label {
    flex: 1;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}
.record-details .services .service-footer .total-sum {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

.form-data .form-field-label {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #71757f;
}
.form-data .form-field-input {
    width: 100%;
    padding: 10px;
    border-radius: 15px;
    border: 1px solid #C6CBD3;
    display: flex;
}
.form-data .form-field-input input,
.form-data .form-field-input input:focus
{
    outline: none;
    border: none;
}
.form-data .form-field-input input {
    flex: 1;
}

.star path {
    fill: black;
    stroke: black;
}

.star.starred path {
    fill: #FFCB00;
    stroke: #FFCB00;
}

.popup-body .service-data{
    flex: 1;
}