* {
    box-sizing: border-box;
    border: none;
    outline: none;
}

html {
    height: 100%;
    font-size: 14px;
}

#hostinger-preview-banner {
    display: none !important;
}

@font-face {
    font-family: R400;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), url(/fonts/Roboto-Regular.woff) format('woff')
}

@font-face {
    font-family: R400I;
    font-style: italic;
    font-weight: 400;
    src: local('Roboto'), url(/fonts/Roboto-Italic.woff) format('woff')
}

@font-face {
    font-family: R700;
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), url(/fonts/Roboto-Bold.woff) format('woff')
}

@font-face {
    font-family: R700I;
    font-style: italic;
    font-weight: 700;
    src: local('Roboto Bold'), url(/fonts/Roboto-BoldItalic.woff) format('woff')
}

@font-face {
    font-family: R250;
    font-style: normal;
    font-weight: 250;
    src: local('Roboto Thin'), url(/fonts/Roboto-Thin.woff) format('woff')
}

@font-face {
    font-family: R250I;
    font-style: italic;
    font-weight: 250;
    src: local('Roboto Thin'), url(/fonts/Roboto-ThinItalic.woff) format('woff')
}

@font-face {
    font-family: R300;
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), url(/fonts/Roboto-Light.woff) format('woff')
}

@font-face {
    font-family: R300I;
    font-style: italic;
    font-weight: 300;
    src: local('Roboto Light'), url(/fonts/Roboto-LightItalic.woff) format('woff')
}

@font-face {
    font-family: R500;
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), url(/fonts/Roboto-Medium.woff) format('woff')
}

@font-face {
    font-family: R500I;
    font-style: italic;
    font-weight: 500;
    src: local('Roboto Medium'), url(/fonts/Roboto-MediumItalic.woff) format('woff')
}

@font-face {
    font-family: R900;
    font-style: normal;
    font-weight: 900;
    src: local('Roboto Black'), url(/fonts/Roboto-Black.woff) format('woff')
}

@font-face {
    font-family: roboto black;
    font-style: italic;
    font-weight: 900;
    src: local('Roboto Black'), url(/fonts/Roboto-BlackItalic.woff) format('woff')
}

:root {
    --hm-white: #FFFFFF;
    --hm-light: #EBEDEE;
    --hm-light25: #FAFBFB;
    --hm-light50: #F5F6F7;
    --hm-slate: #A2AAAD;
    --hm-slate60: rgba(162, 170, 173, 0.6);
    --hm-gunmetal: #5B6770;
    --hm-gray: #333333;
    --hm-yellow: #FFDD00;
    --hm-yellow12: #FFFBDF;
    --hm-yellow25: #FFF7BF;
    --hm-yellow50: #FFEE80;
    --hm-yellow75: #FFE540;
    --hm-yellow-dark: #FFD400;
    --hm-licorice: #1D252D;
    --hm-error-block: #FFEAE6;
    --hm-red: #F27761;
    --hm-red-light: #FC9C8B;
    --hm-waiting-list: #FFBE9E;
    --hm-smoke: #D0D3D4;
    --hm-green: #5FCC29;
    --hm-monday: #C9D4FF;
    --hm-tuesday: #C6E0FF;
    --hm-wednesday: #BCEEFE;
    --hm-thursday: #B3FFDD;
    --hm-friday: #BEFFC3;
    --hm-green-super-light: #B6F796;
    --hm-green-light: #99E573;
}


body {
    height: 100%;
    background-color: var(--hm-light50);
    overflow: hidden;
    padding: 0;
    margin: 0;
    zoom: 100%;
}


/*  Установки при автозаполнении  */

input:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 50px var(--hm-light50) inset !important;
    -webkit-text-fill-color: var(--hm-licorice);
    font-size: 18px !important;
}

input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px var(--hm-light25) inset !important;
    -webkit-text-fill-color: var(--hm-licorice);
    font-size: 18px !important;
}

textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
}

/*  Цвет placeholder */
::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: var(--hm-slate);
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: var(--hm-slate);
    opacity: 1;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: var(--hm-slate);
    opacity: 1;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--hm-slate);
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: var(--hm-slate);
}

::placeholder {
    /* Most modern browsers support this now. */
    color: var(--hm-slate);
}

/*  Очищаем placeholder при фокусе*/

:focus::-webkit-input-placeholder {
    color: transparent
}

:focus::-moz-placeholder {
    color: transparent
}

:focus:-moz-placeholder {
    color: transparent
}

:focus:-ms-input-placeholder {
    color: transparent
}


input[type="date"] {
    position: relative;
    padding-left: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    /*display: block;*/
    /*position: absolute;*/
    /*left: 10px;*/
    /*opacity: 0.3;*/
    display: none;
    -webkit-appearance: none;
}

input[type="date"]:before {
    content: '';
    position: absolute;
    display: block;
}

.flex-block-center {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-hm {
    font-family: R400, sans-serif;
    background-color: var(--hm-light50);
    font-size: 18px;
    line-height: 100%;
    padding: 8px 12px;
    width: 100%;
    color: var(--hm-licorice);
    border: 1px solid var(--hm-light50);
    height: 36px;
}

.button-action {
    background-image: linear-gradient(90deg, var(--hm-yellow75), var(--hm-yellow75), var(--hm-yellow), var(--hm-yellow));
    /*background: linear-gradient(270deg, rgba(255, 212, 0, 1), rgba(255, 212, 0, 1), rgba(255, 229, 64, 1), rgba(255, 229, 64, 1)) !important;*/
    color: var(--hm-licorice);
    font-family: R500, sans-serif;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    padding: 11px;
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s;
}

.button-action:hover {
    background-position-x: 100%;
}

.button-action-add {
    background-image: linear-gradient(90deg, var(--hm-yellow50), var(--hm-yellow50), var(--hm-yellow), var(--hm-yellow));
    color: var(--hm-licorice);
    font-family: R500, sans-serif;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    padding: 12px;
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s;
}

.button-action-add:hover {
    background-position-x: 100%;
}

.wrapper {
    position: relative;
    width: 1440px;
    margin: 0 auto;
    height: 100%;
    min-width: 770px;
    overflow: hidden;
}

.header-slate {
    background-image: linear-gradient(90deg, var(--hm-slate), var(--hm-slate), var(--hm-yellow), var(--hm-yellow));
    font-family: R500, sans-serif;
    font-size: 14px;
    line-height: 100%;
    color: var(--hm-licorice);
    padding: 12px 18px;
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s;
    cursor: pointer;
}

.header-slate:hover {
    background-position-x: 100%;
}

.header-white {
    background-image: linear-gradient(90deg, var(--hm-white), var(--hm-white), var(--hm-yellow25), var(--hm-yellow25));
    font-family: R400, sans-serif;
    font-size: 16px;
    line-height: 100%;
    color: var(--hm-licorice);
    padding: 12px 18px;
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.header-white:hover {
    background-position-x: 100%;
    color: var(--hm-licorice);
}

.header-white-yellow {
    background-image: linear-gradient(90deg, var(--hm-white), var(--hm-white), var(--hm-yellow50), var(--hm-yellow50));
    font-family: R400, sans-serif;
    font-size: 16px;
    line-height: 100%;
    color: var(--hm-licorice);
    padding: 12px 18px;
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.header-white-yellow:hover {
    background-position-x: 100%;
    color: var(--hm-licorice);
}

.header-white-gunmetal {
    background-image: linear-gradient(90deg, var(--hm-white), var(--hm-white), var(--hm-yellow25), var(--hm-yellow25));
    font-family: R400, sans-serif;
    font-size: 14px;
    line-height: 100%;
    color: var(--hm-gunmetal);
    padding: 13px 28px;
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
    text-decoration: none;
}

.header-white-gunmetal:hover {
    background-position-x: 100%;
    color: var(--hm-licorice);
}

.header-white-gunmetal.action {
    background-position-x: 100%;
    color: var(--hm-licorice);
}

.header-white-smoke {
    background-image: linear-gradient(90deg, var(--hm-smoke), var(--hm-smoke), var(--hm-yellow75), var(--hm-yellow75));
    font-family: R500, sans-serif;
    font-size: 16px;
    line-height: 100%;
    color: var(--hm-licorice);
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.header-white-smoke:hover {
    background-position-x: 100%;
    color: var(--hm-licorice);
}

.header-smoke {
    background-image: linear-gradient(90deg, var(--hm-smoke), var(--hm-smoke), var(--hm-yellow50), var(--hm-yellow50));
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.8s, color 0.8s;
    cursor: pointer;
}

.header-smoke:hover {
    background-position-x: 100%;
}

.close-block {
    background-image: linear-gradient(90deg, var(--hm-gunmetal), var(--hm-gunmetal), var(--hm-licorice), var(--hm-licorice));
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.close-block:hover {
    background-position-x: 100%;
}

.header-light {
    background-image: linear-gradient(90deg, var(--hm-light50), var(--hm-light50), var(--hm-yellow50), var(--hm-yellow50));
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.header-light:hover {
    background-position-x: 100%;
}

.header-light-yellow {
    background-image: linear-gradient(90deg, var(--hm-light50), var(--hm-light50), var(--hm-yellow12), var(--hm-yellow12));
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.header-light-yellow:hover {
    background-position-x: 100%;
}

.header-light50-yellow25 {
    background-image: linear-gradient(90deg, var(--hm-light50), var(--hm-light50), var(--hm-yellow25), var(--hm-yellow25));
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.header-light50-yellow25:hover {
    background-position-x: 100%;
}

.light-red {
    background-image: linear-gradient(90deg, var(--hm-light), var(--hm-light), var(--hm-red-light), var(--hm-red-light));
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.light-red:hover {
    background-position-x: 100%;
}

.light-y25 {
    background-image: linear-gradient(90deg, var(--hm-light), var(--hm-light), var(--hm-yellow25), var(--hm-yellow25));
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.light-y25:hover {
    background-position-x: 100%;
}

.light-white-red {
    background-image: linear-gradient(90deg, var(--hm-white), var(--hm-white), var(--hm-red-light), var(--hm-red-light));
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.light-white-red:hover {
    background-position-x: 100%;
}

.header-yellow {
    background-image: linear-gradient(90deg, var(--hm-white), var(--hm-white), var(--hm-yellow12), var(--hm-yellow12));
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.4s, color 0.4s;
    cursor: pointer;
}

.header-yellow:hover {
    background-position-x: 100%;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background:after {
    content: '';
    position: absolute;
    background-color: var(--hm-gunmetal);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    z-index: -1;
}


.blur {
    filter: blur(1px);
}

.input-form,
.textarea-form {
    background-color: var(--hm-light50);
    padding: 8px 12px;
    font-family: R400, sans-serif;
    font-size: 18px;
    line-height: 100%;
    width: 100%;
    border: 1px solid var(--hm-light50);
    outline: none;
    cursor: pointer;
    color: var(--hm-licorice)
}

.textarea-form {
    min-height: 76px;
    max-height: 76px;
    max-width: 100%;
    min-width: 100%;
    scrollbar-width: none;
}

.input-form:hover,
.input-form:focus,
.textarea-form:hover,
.textarea-form:focus {
    border-color: var(--hm-yellow50);
}

.input-form:focus,
.textarea-form:focus {
    background-color: var(--hm-light25);
}

.error-input-form {
    background-color: var(--hm-yellow25);
    position: absolute;
    z-index: 9;
    padding: 8px 12px;
    font-family: R400, sans-serif;
    font-size: 14px;
    line-height: 100%;
    color: var(--hm-red);
}

.scroll-block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
}

.scroll-block::-webkit-scrollbar {
    display: none;
}

.main-block {
    position: relative;
    padding: 45px 45px 95px 45px;
    min-height: calc(100% - 50px);
}

.header-line {
    height: 40px;
    display: flex;
    align-items: center;
    background-color: var(--hm-white);
}

.logo-line {
    position: relative;
    background-image: linear-gradient(90deg, var(--hm-white), var(--hm-white), var(--hm-yellow), var(--hm-yellow));
    background-size: 400% 400%;
    background-position-x: 0;
    transition: background-position 0.2s, color 0.2s;
    height: 100%;
    padding: 4px 9px;
    width: 86px;
    cursor: pointer;
}

.logo-line:hover {
    background-position-x: 100%;
}

.logo-line img {
    display: block;
    position: absolute;
    top: 4px;
    left: 9px;
    width: 68px;
    height: 32px;
}

.logo-line img#yellow {
    display: none;
}

.logo-line:hover img#white {
    display: none;
}

.logo-line:hover img#yellow {
    display: block;
}

.name-line {
    width: 80%;
    display: flex;
    align-items: center;
}

#check_in {
    cursor: pointer;
    padding: 8px;
}

#check_in:hover {
    background-color: var(--hm-yellow25);
}

#check_in:active {
    background-color: var(--hm-yellow50);
}

.name.header-white {
    display: inline-block;
}

.header-menu-line {
    margin-top: 1px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 5px;

}

.franchisee {
    display: inline-block;
    font-size: 16px;
    height: 40px;
}

.help.header-white-gunmetal {
    display: inline-block;
}

.password-edit-block {
    position: absolute;
    top: 45px;
    left: 148px;
    padding: 25px 30px 74px;
    background-color: var(--hm-white);
    display: flex;
}

.password-left {
    display: flex;
}

.password-right {
}

.password-right label {
    font-size: 16px;
    font-family: R400, sans-serif;
    line-height: 110%;
    color: var(--hm-gunmetal);
    height: 18px;
}

.password-right .input-form {
    margin-top: 4px;
    margin-bottom: 0;
    height: 36px;
}

.password-right .button-form {
    height: 30px;
    width: 100%;
    padding: 8px 18px;
}

.password-right .save-button-block {
    margin-top: 10px;
}

.password-left .full-name {
    font-size: 18px;
    font-family: R400, sans-serif;
    line-height: 110%;
    color: var(--hm-licorice);
    padding-right: 4px;
    min-height: 50px;
    margin-right: 20px;
    white-space: nowrap;
}

.password-left .info-user {
    margin-right: 10px;
}

.password-left .info-user div {
    font-family: R400, sans-serif;
    font-size: 18px;
    line-height: 110%;
    color: var(--hm-gunmetal);
    white-space: nowrap;
}

.save-button-block {
    display: flex;
    height: 38px;

}

.save-button-block .button-save,
.save-button-block .button-cancel {
    flex-basis: 50%;
    width: 50%;
    padding: 10px 10px 12px 10px;
    text-align: center;
    font-family: R500, sans-serif;
    font-size: 16px;
    line-height: 110%;
    cursor: pointer;
}

.save-button-block .button-cancel {
    color: var(--hm-light50);
}

.password-bottom {
    position: absolute;
    width: 100%;
    bottom: 25px;
    left: 30px;
}

.password-bottom .button-out {
    width: 90px;
    height: 38px;
    cursor: pointer;
}

.password-right.action {
    width: 270px;
    flex-basis: 270px;
}

.password-hide {
    display: none;
}

.button-change {
    height: 30px;
    text-align: center;
    padding: 8px 16px;
    font-size: 14px;
    width: 100%;
}

.password-edit-block.action {
    /*width: 580px;*/
}

.password-edit-block.action .button-change {
    display: none;
}

.password-edit-block.action .password-hide {
    display: block;
    width: 270px;
    margin-left: 10px;
}

.password-edit-block.action .password-right {
    /*width: 270px;*/
    /*flex-basis: 270px;*/
}

.input-box,
.textarea-box {
    background-color: var(--hm-light50);
    padding: 8px 12px;
    font-family: R400, sans-serif;
    font-size: 18px;
    line-height: 100%;
    width: 100%;
    border: 1px solid var(--hm-light50);
    outline: none;
    cursor: pointer;
    color: var(--hm-licorice);
}

.time-item {
    display: inline-block;
}

.time-block {
    display: flex;
    background-color: var(--hm-light50);
    align-items: stretch;
    height: 24px;
    border: 1px solid var(--hm-light50);
}

.time-block:hover,
.time-block:focus-within {
    border-color: var(--hm-yellow50);
}

.time-input {
    font-family: R400, sans-serif;
    font-size: 14px;
    line-height: 110%;
    color: var(--hm-licorice);
    width: 52px;
    background-color: var(--hm-light50);
    padding: 4px 8px;
}

.pm-select {
    display: none;
    position: absolute;
    background-color: var(--hm-white);
    top: 0;
    right: 0;
    width: 48px;
    z-index: 10;
}

.pm-select.action {
    display: block;
}

.pm-value {
    position: relative;
    font-family: R400, sans-serif;
    font-size: 14px;
    color: var(--hm-licorice);
    display: flex;
    align-items: center;
    height: 22px;
    background-color: var(--hm-light50);
    padding-right: 8px;
    cursor: pointer;
}

.pm-value:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid var(--hm-slate);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    margin-left: 4px;
}

.pm-item {
    height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--hm-slate);
    padding: 6px;
    cursor: pointer;
}

.pm-item.action,
.pm-item:hover {
    color: var(--hm-gunmetal);
    background-color: var(--hm-light50);
}


.pm-item:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 6px;
}

.pm-item.action:before {
    background: center center url(/images/time-arrow.svg) no-repeat;
}

.message-on {
    font-family: R400, sans-serif;
    font-size: 16px;
    color: var(--hm-gunmetal);
}

.select-view-block {
    position: relative;
    height: 24px;
    width: 200px;
    background-color: var(--hm-light50);
    cursor: pointer;
    font-family: R400, sans-serif;
    font-size: 14px;
    color: var(--hm-gunmetal);
    padding: 5px 28px 5px 10px;
    line-height: 100%;
}

.select-view-block:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 4px solid var(--hm-slate);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    right: 10px;
    top: 50%;
    margin-top: -2px;
}

.select-list-block {
    display: none;
    position: absolute;
    background-color: var(--hm-light25);
    width: 185px;
    z-index: 10;
}

.select-list-block.action {
    display: block;
}

.item-education-value {
    font-family: R400, sans-serif;
    font-size: 14px;
    padding: 4px 10px;
    color: var(--hm-gunmetal);
    cursor: pointer;
}

.background-message {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.edit-box-message {
    background-color: var(--hm-white);
    padding: 25px 30px;
    width: 330px;
    z-index: 10;
}

.background-message:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--hm-gunmetal);
    opacity: .5;
}

.text-message-on {
    font-family: R400, sans-serif;
    font-size: 16px;
    color: var(--hm-gunmetal);
}