* {
    font-weight: 400;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg);
    /*display: flex;*/
    width: 100vw;
    color: var(--title-color);
}

:root {
    --sidebar-left-width: 330px;
    --sidebar-right-width: 400px;
    --banner-height: 10px;
}

button {
    cursor: pointer;
}

button:disabled {
    background: #F0F0F0;
    color: #D0D2D3;
    border: none;
}

button:disabled:hover {
    background: #F0F0F0;
    color: #D0D2D3;
    border: none;
}

a {
    color: var(--title-color);
}

a:hover {
    filter: contrast(0.99);
}

.wrapper {
    height: 100vh !important;
}

.main-user-menu,
.admin-menu {
    display: flex;
    justify-content: center;
    padding: 0 8px;
}

#jci-service,
#gallery-service,
#report_econom-service,
#tests-service,
.not-short-wrapper {
    display: none;
}

#content {
    margin-left: var(--sidebar-left-width);
    width: Calc(100% - var(--sidebar-left-width) - 5px);
    height: Calc(100% - var(--sidebar-top-height));
    padding: 10px;
    max-width: calc(100vw - var(--sidebar-left-width) - var(--sidebar-right-width));
}

#content.expand {
    width: Calc(100% - var(--sidebar-left-width) - 5px);
    max-width: calc(100vw - var(--sidebar-left-width));
}

#content.expand .main {
    max-width: calc(100vw - var(--sidebar-left-width));
}

#content.expand .collapse_right_menu {
    transform: rotateY(180deg);
}

/* #admin-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    top: 0;
    z-index: 10001;
} */

#left-menu,
#admin-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    bottom: unset;
    width: auto;
    width: var(--sidebar-left-width);
    top: Calc(var(--banner-height));
    z-index: 10001;
}

li::marker {
    list-style-type: none;
}

.header__mobile {
    display: flex;
    align-items: center;
}

.header__logo-img {
    background-image: var(--logo);
    width: 175px;
    height: 36px;
}

.menu .menu__list {
    width: 100%;
}

.menu .list__item:hover a:not(.list__item-counter) {
    background: var(--menu-active);
}

.welcome-title-link {
    display: flex;
    margin-right: 15px;
}

.comments-title span {
    margin-left: 10px;
    color: #d0d2d3;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.comments-wrapper input[type="checkbox"]:checked~.comments {
    display: block;
}

.comments-wrapper input[type="checkbox"]:not(:checked)~.comments {
    display: none;
}

.comments__main_input {
    position: relative;
    width: 80%;
}

.comments__main_input input {
    width: 100%;
    /*padding: 14px 0px 14px 14px;*/
    border-radius: 16px;
    border: none;
    background-color: var(--input-bg);
    color: var(--title-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.05em;
}

.subblock__input {
    width: 100%;
    /*padding: 14px 0px 14px 14px;*/
    border-radius: 16px;
    border: none;
    background-color: var(--input-bg);
    color: var(--title-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.05em;
}


/* 2 страница */

.tabs-big {
    display: flex;
}

.tabs-big.tab-buttons {
    display: flex;
    width: 100%;
}

.tabs-big .tabs-big__item,
.tabs-big .tabs-big__item.tab {
    cursor: pointer;
    text-align: center;
    width: 50%;
    padding: 14px 0;
    background-color: var(--news);
    border-radius: 16px 16px 0px 0px;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #D0D2D3;
}

.tabs-big .tabs-big__item.tab.active,
.tabs-big .tabs-big__item.active {
    background-color: var(--block-bg);
    color: var(--title-color);
}

.news__block {
    background-color: var(--block-bg);
}

.ads__block {
    background-color: var(--block-bg);
    padding: 24px 16px;
}

.news__block {
    padding: 24px;
}

.news__header {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-bottom: 16px;
}

.tab-content.simple-block {
    border-radius: 0 0 16px 16px;
}

.news__list {
    cursor: pointer;
    display: flex;
    gap: 32px;
}

.news__list-container {
    width: 100%;
    overflow: hidden;
    /*max-width: 702px;*/
}

.list__container-inner {
    width: 100%;
    overflow: auto;
}

.news__list-item {
    white-space: nowrap;
    transition: color 0.5s;
    padding: 8px 12px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--gray-color);
}

@media (max-width:500px) {
    .news__list-item {
        font-size: 12px;
    }
}

.news__list-item a {
    color: inherit;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.news__list-item.active {
    color: #65BC47;
}

.news__list-item:hover {
    color: #65BC47;
}

.header__tools-exchange {
    border-radius: 8px;
    padding: 10px 12px 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--exchange);
}

.exchange-title {
    white-space: nowrap;
    color: var(--exchange-title);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.exchange-dollar {
    display: flex;
    align-items: center;
    gap: 4px;
    color:
        /*#66A67E*/
        var(--exchange-title);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.exchange-euro {
    display: flex;
    align-items: center;
    gap: 4px;
    color:
        /*#E7686E*/
        var(--exchange-title);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.header__tools-btn {
    white-space: nowrap;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background-color: #4CAE50;
    color: #ffffff;
    border-radius: 16px;
    padding: 12px 25px 13px 25px;
    /*margin-left: auto;*/
}

.news__content {
    margin-top: 40px;
}

.news__content-item {
    background-color: var(--item-bg);
    padding-bottom: 26px;
    border-radius: 20px;
    box-shadow: var(--block-shadow-1);
}

.single-block {
    background-color: var(--subblock-bg);
    padding: 18px;
    border-radius: 20px;
    box-shadow: var(--block-shadow-1);
}

.news__content-item:not(:first-of-type) {
    margin-top: 16px;
}

.news__content-main {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    container-type: inline-size;
    container-name: newsContainer;
}

.news__main-pics {
    display: flex;
}

.news__content-img {
    width: 100%;
    min-width: 256px;
    object-fit: cover;
    max-width: 440px;
    max-height: 266px;
    border-radius: 20px 0 0 0;
}

.news__content-reaction {
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.first-fill {
    fill: var(--reaction-icon-fill);
}

.second-fill {
    fill: var(--reaction-icon-second-fill);
}

.news__content__text {
    max-width: 514px;
    overflow: hidden;
    padding: 16px;
    flex: 1 1;
}

.not-com-add-frm .btn-copy {
    color: #1FA7E7;
    font-family: Open Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: max-content;
    cursor: pointer;
}

.contact-editor-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 0;
}

.contact-editor-item input {
    flex: 1 1;
}

.frmSearch label span,
.label span,
.frmEdit fieldset legend,
.frmSearch fieldset legend,
legend,
.label span,
.inc_part_moderator_label span.span-label {
    color: var(--title-color);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 113%;
}

.tab-buttons {
    cursor: pointer;
    text-align: center;
    width: max-content;
    background-color: var(--news);
    border-radius: 16px 16px 0px 0px;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #D0D2D3;
    gap: 5px;
    overflow: hidden;
}

.tab-buttons .tab {
    padding: 10px;
    font-size: 12px;
    color: #D0D2D3;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.tab-buttons .tab:hover,
.tab-buttons .tab.active {
    background: var(--block-bg);
    color: var(--title-color);
}

.tab-content,
.tabs .tab-content.simple-block {
    display: none;
}

.interface_search_list.new {
    position: relative;
    /*max-width: 240px;*/
    width: 100%;
    position: relative;
    border-radius: 8px;
}

.interface_search_list.new span {
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.interface_search_list.new .interface_search_selected {
    display: flex;
    width: 100%;
    /*max-width: 240px;*/
    padding: 12px 19px 12px 14px;
    align-items: center;
    min-height: 44px;
    height: auto;
    border-radius: 8px;
    flex-wrap: wrap;
    border: none;
    gap: 4px;
    align-self: stretch;
    color: var(--select-color);
    background: var(--exchange);
}

.tag-list-wrapper .interface_search_list.new {
    max-width: fit-content;
    min-width: 240px;
}

.tag-list-wrapper .interface_search_list.new .interface_search_selected {
    max-width: fit-content;
    height: unset;
    min-width: 240px;
    padding-right: 50px;
}

.interface_search_list.new .interface_search_selected .tag_search_item {
    margin-right: 0;
    display: flex;
    padding: 0;
}

.interface_search_list.new .interface_search_selected .tag_search_item .badge {
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    background: var(--block-bg);
}

.interface_search_list.new .interface_search_popup {
    margin-top: 5px;
    border: none;
    background: var(--exchange);
    overflow-y: auto;
    border-radius: 16px;
    padding: 0;
    /*width: max-content;*/
    right: 0;
    left: 0;
    max-width: 100%;
}

.interface_search_list.new .interface_search_items {
    overflow-y: unset;
    background-color: transparent;
}

.interface_search_list.new .interface_search_item {
    border: none;
    display: flex;
    height: auto;
    padding: 12px 14px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    background: var(--exchange);
    color: var(--select-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
}

.interface_search_list.new .interface_search_item:not(:last-child) {
    border-bottom: 0.3px solid #e5e5e559
}

.interface_search_list.new .interface_search_input {
    display: flex;
    padding: 13px 14px;
    align-items: center;
    border: none;
    gap: 10px;
    align-self: stretch;
    background: var(--date-input-item-hover);
    border-radius: 16px 16px 0 0;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    color: var(--create-input-color);
}

.interface_search_list.new .interface_search_input:focus {
    background: var(--scrollbar-thumb-color);
    box-shadow: var(--block-shadow-1);
    color: var(--title-color);
}

.interface_search_list.new .interface_search_item:hover {
    background: var(--scrollbar-track-color);
}

@container newsContainer (width < 650px) {
    .news__main-pics {
        width: 100%;
        flex-wrap: wrap;
    }

    .news__content-img {
        width: 100%;
        height: auto;
        max-width: unset;
        max-height: unset;
        border-radius: 20px 20px 0 0;
    }

    .news__content-reaction {
        flex-direction: row;
    }
}

.news__content__text a:not(.news__content-title) {
    color: #1fa7e7;
}

.news__content-main a:not(.news__content-title) {
    color: #1fa7e7;
}

.news__content-main .news__main-pics a {
    height: max-content;
    width: inherit;
}

.news__content-title {
    margin-top: 22px;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--title-color);
}

.news__content-date {
    margin-top: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #d0d2d3;
}

.news__content__text-item {
    color: var(--title-color);
    margin-top: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.news__content__text-item p,
.news__content__text-item span {
    color: inherit !important;
    line-height: 120%;
    letter-spacing: 0.03em;
    font-weight: 400;
}

.news__content-link {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
    color: #1FA7E7;
}

#news__comments-block {
    padding: 0 28px;
}

#news-comments {
    margin-bottom: 10px;
    gap: 20px;
}

.comment__content {
    display: flex;
    gap: 16px;
    padding: 16px 0;
}

.comment__content img {
    max-width: 44px;
    max-height: 44px;
    width: 100%;
    border-radius: 50%;
}

.comments-item {
    margin-top: 16px;
}

.comments-item:not(:first-of-type)>.comment__content {
    border-top: 1px solid var(--create-line);
}

.comments-item-attached:last-of-type .comment__content {
    border: none;
}

.comments-item-attached .comment__content {
    padding: 16px 0 16px 60px;
}

.comments-item-attached .not-comments-add {
    display: none;
}

/*span #news-comments {
    padding-left: 66px;
}*/

.comment-title {
    color: var(--comments-title);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.comment-text {
    margin-top: 8px;
    color: var(--comments-text);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.comment-footer {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.comment-date {
    color: var(--comments-date);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.comment-link {
    color: #1FA7E7;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.news__pics-top {
    display: flex;
    align-items: center;
}

.news__pics-top img:first-of-type {
    border-radius: 20px 0 0 0;
}

.news__pics-top img {
    width: 100%;
    height: 100%;
    min-width: 126px;
}

.news__pics-bottom {
    display: flex;
    align-items: center;
}

.news__pics-bottom img {
    width: 100%;
    height: 100%;
}

.comments__main_input {
    position: relative;
    width: 100%;
}

#karelia-news .news__content-main {
    display: block;
    padding: 22px 30px 0px 30px;
}

#karelia-news .news__content-title {
    margin-top: 0px;
}

#karelia-news .news__content-title {
    color: #1FA7E7;
}

#karelia-news .news__content-text {
    margin-top: 8px;
    color: var(--karelia-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.kivads__header {
    padding: 25px 0 50px 0;
    display: flex;
    justify-content: end;
}

.kivads__header-btn {
    max-width: 240px;
    text-align: center;
    padding: 13px 25px;
    color: #ffffff;
    border-radius: 16px;
    background: #4CAE50;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.ads__content-item {
    padding: 20px;
    background-color: var(--item-bg);
    border-radius: 20px;
    box-shadow: var(--block-shadow-1);
}

.ads__content-item:not(:first-of-type) {
    margin-top: 16px;
}


.ads__content-item.ads__not-active #btn-unactive {
    cursor: not-allowed;
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-color);
}

.ads__content-item.ads__not-active #btn-active {
    cursor: not-allowed;
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-color);
}

.ads__btn-unactive {
    cursor: not-allowed;
    background: var(--btn-disabled-bg) !important;
    color: var(--btn-disabled-color) !important;
}

.ads__not-active {

    color: grey;

}

.ads__content-item.ads__not-active #btn-active:hover {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-color);
}

.ads__content-item.ads__not-active #btn-unactive:hover {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-color);
}

.ads__btn-unactive:hover {
    cursor: not-allowed;
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-color);
}

.kivads-title {
    color: var(--title-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.kivads-text {
    margin: 16px 0 20px 0;
    color: var(--title-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.kivads-text a {
    color: var(--title-color);
    font-weight: 700;
}

.create__ads-title {
    margin-top: 16px;
    margin-bottom: 16px;
}

.create__ads-date {
    margin: 16px 0;
}

.create__kivads-text {
    margin-top: 16px;
}

.content__create-item {
    background-color: var(--block-bg);
    border-radius: 20px;
    padding: 24px 16px;
    width: 100%
}

.public-input__wrapper {
    background-color: var(--block-bg);
    border-radius: 20px;
    padding: 24px 16px;
    margin: 16px 0;
}

.one-not {
    background: var(--block-bg);
    border-radius: 20px;
    box-shadow: var(--block-shadow-1);
}

.one-not h4 {
    margin: 15px 0 25px;
    /* margin-bottom: 15px; */
    line-height: 100%;
    font-size: 22px;
    font-weight: 400;
    /* color: #727272; */
    /* background-color: #ffffffc2; */
    padding: 3px;
}

.one-not.single-not h4 {
    color: var(--title-color);
    font-weight: 600;
}

.not-info {
    border-bottom: 1px solid #c5c6c6;
}

.one-not.single-not .not-back {
    background-color: var(--scrollbar-thumb-color);
    box-shadow: var(--block-shadow-1);
    font-size: 18px;
    margin: 0;
    margin-right: auto;
    display: flex;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--title-color);
    float: none;
}

.checkbox-input__wrapper {
    background-color: var(--block-bg);
    border-radius: 20px;
    padding: 24px 16px;
    margin: 16px 0;
    display: flex;
    width: 100%;
    align-items: center;
}

.invite__list-wrapper {
    display: none;
    flex-direction: column;
    width: 100%;
    flex-wrap: wrap;
}

.content__create-item:not(:first-of-type) {
    margin-top: 16px;
}

.create-title {
    margin-bottom: 16px;
    color: var(--create-title);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.ads-input-big {
    width: 96%;
    background-color: var(--create-input);
    color: var(--create-input-color);
    border-radius: 16px;
    border: none;
    padding: 14px 0 14px 14px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
}

.ads__date-list {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px;
}

.ads__date-list li {
    position: relative;
}

.ads__date-list img {
    position: absolute;
    top: 13px;
    left: 14px;
}

.create__date-input {
    background-color: var(--create-input);
    border: none;
    border-radius: 16px;
    padding: 14px 50px 14px 41px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    color: var(--create-input-color);
}

li:first-of-type .create__date-input {
    padding: 14px 100px 14px 41px;
}

#jci-main h2 {
    line-height: 100%;
    font-size: 22px;
    font-weight: 400;
    color: var(--title-color);
}

#jci-main h3 {
    line-height: 100%;
    font-size: 20px;
    font-weight: 400;
    color: var(--title-color);
}

.jci-targets {
    width: 100%;
}



.jci-desktop {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
}

.jci-mobile {
    display: none;
}

/* .birth-calendar .owl-stage-outer .owl-stage,
.birth-calendar .owl-stage-outer {
    width: 100%;
    position: relative;
} */

.birth-calendar-month__name {
    text-align: center;
    padding: 10px;
    color: var(--title-color);
    font-weight: bold;
    font-size: 22px;
}

.birth-calendar__day {
    float: left;
    width: Calc(14.28% + 1px);
    text-align: center;
    border: 1px solid #e5e5e5;
    margin-left: -1px;
    margin-top: -1px;
    position: relative;
    background: var(--subblock-bg);
    cursor: pointer;
    box-shadow: var(--block-shadow-1);
}

.birth-calendar__day.birth-calendar-day__header {
    background: transparent;
}

.birth-calendar__day span {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 10px;
    background: var(--default-checkpoint-circle-fill);
    box-shadow: var(--block-shadow-1);
    color: var(--comments-title);
    width: 16px;
    height: 16px;
    text-align: center;
    padding-top: 2px;
    line-height: 100%;
}

.birth-calendar__day.active {
    background: var(--gratitude-bg);
}

.badge {
    padding: 4px 8px;
    border-radius: 4px;
    width: max-content;
    background: black;
    color: white;
}

.single-device {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-items: flex-start;
    gap: 5px;
    position: relative;
}

.device__preview_row {
    display: grid;
    grid-template-columns: 2fr 4fr 1fr 1fr;
    gap: 8px;
    text-align: center;
    align-items: center;
    margin-bottom: 10px;
}

.h3 {
    text-align: center;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    margin: 20px 0;
}


@media (max-width: 768px) {
    .jci-desktop {
        display: none;
    }

    .jci-mobile {
        display: flex;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .jci-pdf-prev {
        width: 100%;
    }

    .single-device {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .device__preview_row {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 24px;
        background-color: var(--bg);
        padding: 12px;
        border-radius: 8px;
    }

    .device__preview_row p:last-of-type {
        margin: 16px 0;
    }
}


#time_input {
    display: flex;
    background-color: var(--create-input);
    border: none;
    border-radius: 16px;
    padding: 14px 50px 14px 41px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    color: var(--create-input-color);
    align-items: center;
    position: relative;
}

#time_input .date-input__inputs {
    display: none;
}

#time_input .date-input__mock {
    display: flex;
}

#time_input.open .date-input__inputs {
    display: flex;
}

#time_input.open .date-input__mock {
    display: none;
}

#time_input input {
    width: 30px;
    background: transparent;
    border: none;
    height: max-content;
    padding: 0;
    text-align: center;
}

.create__date-input::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.default-datepicker-input::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(../img/icons/input-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    border-width: thin;
}

.default-datepicker-input {
    position: relative;
    display: flex;
    max-width: 215px;
    width: 100%;
    height: 44px;
    padding: 14px 20px 14px 40px;
    align-items: center;
    border-radius: 8px;
    gap: 10px;
    background: var(--create-input);
    box-shadow: var(--block-shadow-1);
    border: none;
    color: var(--date-color);
    color-scheme: var(--input-color-scheme);
}

.default-datepicker-input::after {
    content: url('../img/icons/calender-add.svg');
    position: absolute;
    top: calc(50% - 10px);
    left: 10px;
    width: 20px;
    height: 20px;
}


.create__date-input::after {
    position: absolute;
    display: block;
    content: '';
    background: var(--input-arrow);
    width: 11px;
    height: 11px;
    top: 16px;
    right: 20px;
}

.create__ads-search {
    position: relative;
}

.create__ads-search input {
    padding-left: 42px;
    color: var(--title-color);
}

.create__ads-search img {
    position: absolute;
    top: 13px;
    left: 14px;
}

.invite__list {
    margin-top: 10px;
    border-radius: 16px;
}

.invite__list-item {
    position: relative;
    padding: 9px 14px 9px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--create-unchecked-item);
}

.invite__list-item:first-of-type {
    background-color: var(--create-checked-item);
    border-radius: 16px 16px 0 0;
}

.invite__list-item:last-of-type {
    border-radius: 0 0 16px 16px;
}

.invite__checkbox {
    z-index: -1;
    opacity: 0;
}

.invite__checkbox+label {
    display: inline-flex;
    align-items: center;
    user-select: none;
}

.invite__checkbox::before {
    content: "";
    z-index: 2;
    display: block;
    background: center no-repeat url('../img/icons/check-box-unchecked.svg');
    width: 15px;
    height: 15px;
}

.invite__list-item:first-of-type label {
    color: var(--karelia-color);
}

label {
    color: var(--create-input-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%
}

label>span {
    display: inline-block;
    margin-bottom: 8px;
}

.staff__list {
    margin-top: 16px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.staff__list-item {
    background-color: var(--news);
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 4px 8px 4px 4px;
}

.staff-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    color: var(--title-color);
}

.staff-del {
    cursor: pointer;
}

.create__operation-btns {
    display: flex;
    gap: 16px;
    justify-content: end;
}

.del-btn {
    max-width: 272px;
    display: block;
    text-align: center;
    width: 100%;
    padding: 12px 25px 13px 25px;
    border-radius: 16px;
    border: 0.6px solid #D04047;
    font-size: 14px;
    color: #D04047;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    align-self: center;
}

.confirm-btn {
    width: 100%;
    max-width: 273px;
    display: block;
    padding: 12px 25px 13px 25px;
    border-radius: 16px;
    border: none;
    background: #4CAE50;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}

#main__content {
    padding-top: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 50px;
    container-type: inline-size;
    container-name: mainContainer;
}

.wall-add-post {
    font-size: 16px;
    color: var(--radio-checked-rect);
    cursor: pointer;
}

.wall-post__author {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
    position: relative;
    padding-left: 46px;
    height: 40px;
    float: left;
    cursor: pointer;
    max-width: Calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.wall-post__author .date {
    display: block;
    font-size: 0.5rem;
    margin-top: 4px;
}

.wall-post__actions {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.wall-post__actions .heart,
.wall-post__actions .wall-add-comment {
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    /*background: var(--logo-mobile);*/
    margin-right: 10px;
    font-size: 12px;
    text-align: center;
    min-width: 40px;
}

.create__img-list {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-self: center;
}

.img__list-item {
    text-align: center;
}

.img__list-item:first-of-type {
    padding: 20px;
    border-radius: 16px;
    border: 1px dashed var(--img-import-border);
}

.img__list-item:not(:first-of-type) img {
    width: 100%;
}

.img__list-item.dropZone.hoverClassName {
    border: 1px dashed #3bb322;
}

.img__list-text {
    margin: 10px auto;
    color: var(--title-color);
    max-width: 325px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.line {
    margin-top: 16px;
    position: relative;
    color: var(--create-line);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.line::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    display: block;
    width: 43%;
    height: 1px;
    background-color: var(--create-line);
}

.line::after {
    content: '';
    position: absolute;
    top: 7px;
    right: 0;
    display: block;
    width: 43%;
    height: 1px;
    background-color: var(--create-line);
}

.img-input {
    position: relative;
    margin: 10px auto 0 auto;
    width: 100%;
    max-width: 300px;
}

.img-input img {
    position: absolute;
    top: 9px;
    left: 16px;
}

.img-input input {
    padding: 14px 0 14px 50px;
    width: 100%;
    background-color: var(--create-input);
    border: none;
    border-radius: 16px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    color: var(--create-line);
}

.img-btn {
    cursor: pointer;
    width: 90%;
    background-color: #4CAE50;
    border-radius: 16px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #ffffff;
    padding: 12px 0 13px 0;
    margin: 10px auto 0 auto;
    max-width: 300px;
}

.img-formats {
    margin-top: 16px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--img-import-border);
}

.news__header-tools {
    display: none;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding-top: 40px;
}

.news__header-tools.show {
    display: flex;
}

.news__header-tools form {
    width: 100%;
}

.default-input,
.default-search-input,
textarea {
    width: 100%;
    padding: 14px 0px 14px 14px !important;
    border-radius: 16px;
    border: none !important;
    color: var(--create-input-color) !important;
    background: var(--create-input) !important;
    box-shadow: var(--block-shadow-1);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
}

.default-input[type=color] {

    padding: 0 !important;

}

.default-search-input {
    padding: 14px 0 14px 40px !important;
    position: relative;
}

.default-search-input:before {
    content: "";
    display: flex;
    width: 18px;
    height: 18px;
    padding: 0.692px;
    justify-content: center;
    align-items: center;
    background: center no-repeat url('../img/icons/search.svg');
}

.default-input:focus,
.default-search-input:focus,
textarea:focus {
    border: none;
    background: var(--scrollbar-thumb-color);
    box-shadow: var(--block-shadow-1);
    color: var(--title-color);
}

.default-input:-webkit-autofill,
.default-input:-webkit-autofill:hover,
.default-input:-webkit-autofill:focus,
.default-input:-webkit-autofill:active {
    -webkit-box-shadow: inset 0 0 0 50px var(--create-input) !important;
    -webkit-text-fill-color: var(--create-input-color) !important;
    color: var(--create-input-color) !important;
    background: var(--create-input) !important;
    border: 1px solid var(--create-input) !important;
}

/* оборудование */

.device_status {
    border-radius: 20px;
    padding: 16px;
    width: max-content;
    text-align: center;
    margin: 12px 0;
}

.device_ok {
    background-color: #007a3d;
    color: white;
}

.device_not_ok {
    background-color: #F7AEB1;
    color: black;
}

.doc-content label {
    width: 100%;
}

.vid-container {
    max-width: 500px;
    width: 100%;
}

/* документы */

.doc-search__wrapper {
    padding: 16px;
    background-color: var(--block-bg);
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 20px;
}

.doc-search__input {
    margin: 0;
}

.recipient-list {
    max-height: 200px;
    right: 16px;
    left: 16px;
    min-width: 200px;
    overflow: auto;
    position: absolute;
    background: var(--block-bg);
    z-index: 100;
    border-radius: 16px;
}

.doc-waiting {
    padding: 0;
    background: transparent;
    margin: 0;
    border: none;
}

.doc-waiting .btn-orange {
    height: unset;
}

.doc-waiting H5 {
    color: var(--docs-wait-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 10px;
}



.doc-directory__svg {
    width: 100%;
    max-width: 80px;
    min-width: 40px;
}

.doc-directory__svg path {
    fill: var(--doc-directory-svg-fill);
}

.doc-directory__svg-file path {
    fill: #1FA7E7;
}

.device-warning path {
    fill: red !important;
}

.device-directory__svg-file path {
    fill: #4cae50;
}

.doc-content__wrapper {
    background: transparent;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.doc-content {
    display: flex;
    padding: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 0px 0px 16px 16px;
    background: var(--block-bg);
}

.doc-directory {
    display: flex;
    width: 350px;
    padding: 20px 12px;
    /* align-items: center; */
    border-radius: 16px;
    gap: 20px;
    background: var(--modal-bg);
    box-shadow: var(--block-shadow-1);
}

.doc-directory.doc_to_confirm {
    background: #f0808059;
}

.doc-directory__name {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--title-color);
    text-align: left;
    flex: 1;
    text-transform: capitalize;
}

.doc-options {
    padding: 16px;
    background: var(--block-bg);
    margin-bottom: 16px;
    border-radius: 16px;
}

.doc-directory__actions {
    margin-top: 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.doc-directory__actions a {
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    margin-right: 10px;
    text-decoration: none;
}

.doc-content__more {
    padding: 16px;
    margin: 0 0 16px;
    background: var(--item-bg);
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
}

.doc-content__more:before {
    float: left;
    color: dodgerBlue;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
    font-style: normal;
    content: "\f05a";
    opacity: 0.6;
}

.doc-content__more p {
    line-height: 128%;
}

.doc-preview__wrapper {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.doc-preview__info {
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    gap: 10px;
    flex-direction: column;
}

.doc-preview__info-block {
    margin-right: 0;
}

.doc-preview-wrapper {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    position: static;
}

.doc-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.doc-preview__comment {
    margin: 0;
    box-shadow: var(--block-shadow-1);
    padding: 0;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
    height: max-content;
    background-color: transparent;
}

.doc-seen__wrapper {
    display: none;
}

.doc-seen__wrapper.show {
    display: block;
    height: 100%;
    background: var(--modal-bg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.doc-user__seen {
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.doc-user__seen H5 {
    margin: 0;
    font-size: 14px;
    color: var(--title-color);
}

.doc-settings__wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--block-bg);
    border-radius: 16px;
}

.interface_search_list.full {
    max-width: none;
}

.interface_search_list.full .interface_search_selected {
    max-width: none;
}

.collapse-label p,
.collapse-label h3 {
    margin-bottom: 8px;
}

.report-settings__content {
    margin-bottom: 16px;
}

.select-tree__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

table.list {
    box-shadow: var(--block-shadow-1);
}

.link-row {
    cursor: pointer;
}

.link-row:hover {
    transition: scale ease .3;
    scale: 1.005;

}

table.list td {
    background: transparent;
    color: var(--title-color);
    border-top: 1px solid var(--create-line);
    padding: 20px 16px;
    text-align: center;
}

table.list tr:first-of-type td {
    border-top: none;
}

table.list th {
    background: var(--subblock-bg);
    padding: 20px 16px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--title-color);
    margin-bottom: 10px;
}

table.list th:first-of-type {
    border-radius: 16px 0 0 16px;
}

table.list th:last-of-type {
    border-radius: 0 16px 16px 0;
}


/* опросы */

.test-card {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 10px;
    background: var(--vacancy-block-bg);
    box-shadow: var(--block-shadow-1);
}

.test-card.test-card__old button:disabled {
    cursor: not-allowed;
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-color);
}

.test-card__old {

    color: grey;

}

.test-card.test-card__old button:disabled:hover {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-color);
}

.test-card__content {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--title-color);
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.test-card__content span {
    font-weight: 400;
}

.tst-action.contacts__btns-content {
    background: var(--welcome-btn);
}

.one-variant {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 5px;
    margin-top: 15px;
}

.report-settings {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
}

.incident-list {
    width: 100%;
}

.report-form__toggle {
    color: var(--birthday-name)
}

.tst-quest-wrapper label {
    background: transparent;
}

.limit-answer__help {
    color: var(--title-color);
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 80px 80px;
}

.limit-answer__row {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 80px 80px;
    margin-bottom: 10px;
}

.limit-answer__row input {
    height: fit-content;
}

.limit-answer__help span {
    color: var(--title-color);
}

.test-quests__wrapper {
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: center;
    justify-content: space-between;
}

.tst-user-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.tst-timer {
    position: absolute;
    right: 15px;
    top: 15px;
    color: gray;
}

.available-quests,
.selected-quests {
    width: 100%;
    height: 400px;
    overflow: hidden;
    box-shadow: var(--block-shadow-1);
    padding: 0;
}

.quests__search {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-bottom: 15px;
}

.quest-list_wrapper table td i {
    padding: 0;
    margin: 0;
    background: transparent;
}

table.incident-list td,
table.incident-list th {
    padding: 15px 10px;
}

label.tst-user-list__row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding: 10px;
    margin: 0;
    cursor: pointer;
}

.test-rules__wrapper {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.test-rules__one {
    display: flex;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap;
    background: transparent;
}

.list.small td,
.list.small th {
    vertical-align: middle;
}

.test-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tst-user-list__row:hover {
    background: transparent;
}

.single-test__title {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--title-color);
}

.tst-one-quest__wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tst-quest-wrapper {
    margin-bottom: 16px;
}

.tst-quest-wrapper H5 {
    margin: 0;
    margin-bottom: 16px;
    font-size: 16px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.simple-block {
    display: flex;
    padding: 24px 16px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 20px;
    background: var(--block-bg);
}

.hide-content>div:not(:first-of-type) {
    display: none;
}

.simple-block.bg-green {
    background: var(--inc-green-bg);
}

.simple-block.bg-red {
    background: var(--inc-red-bg);
}

.simple-title-h2 {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.tst-checkpoints__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 24px 0px;
    gap: 16px;
    align-self: stretch;
}

.checkpoint__wrapper {
    display: flex;
    flex-direction: column;
    width: max-content;
    gap: 12px;
    align-items: center;
    width: 100%;
    text-align: center;
}

.checkpoint__wrapper .checkpoint rect {
    fill: var(--default-checkpoint-rect-fill);
}

.checkpoint__wrapper .checkpoint circle {
    fill: var(--default-checkpoint-circle-fill);
}

.checkpoint__wrapper .checkpoint path {
    fill: var(--default-checkpoint-path-fill);
}

.checkpoint__wrapper.active .checkpoint rect {
    fill: var(--active-checkpoint-rect-fill);
}

.checkpoint__wrapper.active .checkpoint circle {
    fill: var(--active-checkpoint-circle-fill);
}

.checkpoint__wrapper.active .checkpoint path {
    fill: var(--active-checkpoint-path-fill);
}

.checkpoint__wrapper.done .checkpoint rect {
    fill: var(--done-checkpoint-rect-fill);
}

.checkpoint__wrapper.done .checkpoint circle {
    fill: var(--done-checkpoint-circle-fill);
}

.checkpoint__wrapper.done .checkpoint path {
    fill: var(--done-checkpoint-path-fill);
}

.checkpoint__wrapper span {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.new-test-block {
    display: none;
}

.new-test-block.active {
    display: flex;
}

@container testsContainer (width < 768px) {
    .test-quests__wrapper {
        flex-direction: column;
    }

    .available-quests,
    .selected-quests {
        width: 100%;
    }

    .test-card {
        gap: 16px;
    }

    .test-card__content {
        flex: unset !important;
        padding-bottom: 0;
    }

    .test-card__content span {
        padding-bottom: 8px;
    }
}

.tst-test-more__label {
    font-size: 12px;
    display: block;
    margin-bottom: 8px;
}

.quest-dots__wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.quest-dot__next {
    fill: var(-next-dot-fill);
}

.quest-dot__prev {
    fill: var(-prev-dot-fill);
}

.tst-results-one {
    background-color: var(--item-bg);
    border: none;
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 16px;
}


/* Контакты */

.main__content-contacts {
    /* padding: 24px 16px;
    border-radius: 20px;
    background-color: var(--block-bg); */
    width: 100%;
    height: auto;
}

.tst-user-list-wrapper {
    max-height: 100vh;
    overflow: auto;
    width: 100%;
}

.content__contacts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.create__contacts-search {
    position: relative;
}

.create__contacts-search.frmEdit {
    margin-bottom: 0;
    padding: 0;
}

.create__contacts-search img {
    position: absolute;
    top: calc(50% - 9px);
    left: 14px;
}

.create__contacts-search {
    width: 100%;
    display: flex;
}

.create__contacts-search input {
    padding: 12px 14px;
    border: none;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    letter-spacing: 0.03em;
    padding-left: 40px;
    flex: 1 1 auto;
    color: var(--title-color);
    background: var(--input-bg);
    box-shadow: var(--block-shadow-1);
    border-radius: 16px;
}

.create__contacts-search input:focus {
    background: var(--scrollbar-thumb-color);
    box-shadow: var(--block-shadow-1);
    color: var(--title-color);
}

.create__contacts-search .input__clear {
    position: absolute;
    right: 10px;
    top: calc(50% - 9px);
    font-size: 18px;
    color: var(--title-color);
    width: 20px;
    height: 20px;
    border-radius: 18px;
    cursor: pointer;
    text-align: center;
    display: none;
}

.create__contacts-search input:not(:placeholder-shown)+.input__clear {
    display: block;
}

.create__contacts-search .input__clear:hover {
    background: var(--date-input-item-hover);
}

.content__contacts-header .header-btn {
    max-width: max-content;
    font-size: 14px;
    text-align: center;
    border-radius: 16px;
    width: 100%;
    background-color: #1FA7E7;
    color: white;
    padding: 12px 18px;
}

.contacts__block-header {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.structure-name {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    /* transform: translate(-10px, -10px); */
    /* align-items: center; */
}

.content__contacts-main {
    margin-top: 40px;
}

.contacts__main-block {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 6px 0px rgba(130, 169, 188, 0.08)
        /*, 0px 5px 50px 0px rgba(0, 67, 101, 0.08)*/
    ;
}

.contacts__main-block:not(:first-of-type) {
    margin-top: 16px;
}

.block__header-title {
    cursor: pointer;
    gap: 20px;
    display: flex;
    align-items: center;
}

.structure {
    margin-bottom: 15px;
    margin-left: 25px;
    position: relative;
    min-height: 1em;
    display: flex;
    flex-direction: column;
}

.mail-action-group span,
.mail-move-to {
    font-weight: normal;
    line-height: 100%;
    display: block;
    padding: 10px;
    font-size: 14px;
    text-align: left;
    color: var(--create-input-color);
}

.structure.closed .structure-contact-list {
    display: none !important;
}

.block__header-title.open .block__header-img {
    background: no-repeat url('../img/icons/folder-open.svg');
}

.structure .block__header-img {
    background: no-repeat url('../img/icons/folder-open.svg');
}

.structure.closed .block__header-img {
    background: no-repeat url('../img/icons/folder-close.svg')
}

.structure-sub-name {
    background: transparent;
}

.block__footer-title {
    cursor: pointer;
    gap: 20px;
    display: flex;
    align-items: center;
}

.block__footer-title.open .block__header-img {
    background: no-repeat url('../img/icons/folder-open.svg');
}

.block__employee-title {
    cursor: pointer;
    gap: 20px;
    display: flex;
    align-items: center;
}

.block__employee-title.open .block__header-img {
    background: no-repeat url('../img/icons/folder-employee-close.svg');
}

.block__header-text {
    color: var(--title-color);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    flex: 1 1;
}

.block__header-img {
    background: no-repeat url('../img/icons/folder-close.svg');
    width: 26px;
    height: 26px;
    display: inline-block;
}

.structure__item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1;
}

#contacts-main .structure__item {
    align-items: unset;
    flex-direction: column;
}

.frmSearch input:focus,
.frmEdit input:focus,
.frmEdit textarea:focus {
    background: initial;
}

.free-contact-item {
    background: var(--block-bg);
    border: none;
    color: var(--title-color);
}

.block__main-item-link {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--buses-color);
}

.self-end {
    align-self: flex-end;
}

.structure-name:not(.structure-final) {
    margin-bottom: 15px;
}

.structure.closed .structure-name:not(.structure-final) {
    margin-bottom: 0;
}

.structure-final {
    display: flex;
    align-items: center;
}

.structure-final .structure__item {
    background: var(--item-bg);
    box-shadow: var(--block-shadow-1);
    max-width: 500px;
}

.copy-number {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast {
    display: block !important;
    background: var(--active-checkpoint-circle-fill);
    color: var(--title-color);
    box-shadow: var(--block-shadow-1);
    border-radius: 8px;
    padding: 4px;
    position: absolute;
    right: 0;
    top: 0;
}

.personal-select__form {
    padding-bottom: 40px;
}

.personal-select__form .structure-final .structure__item {
    display: flex;
}

.personal-select__form .structure-final .structure__item .block__item-header {
    padding: 0;
    margin: 0;
    border-bottom: unset;
}

.personal-select__form .structure-final .structure__item .block__item-header .contacts__item-title {
    margin-top: unset;
}

.contacts__block-employee .block__main-items {
    display: none;
}

.contacts__block-employee.openk .block__main-items.open {
    display: flex;
}

.contacts__block-employee .block__header-img {
    background: no-repeat url('../img/icons/folder-employee-open.svg');
    width: 20px;
    height: 23px;
}

.block__header-link {
    cursor: pointer;
    color: #1FA7E7;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.block__main-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.block__main-item {
    margin-top: 16px;
    margin-left: 45px;
    padding: 16px;
    border-radius: 10px;
    max-width: 424px;
    box-shadow: var(--block-shadow-1);
    background: var(--item-bg);
}

.block__main-item>*:last-child {
    margin-bottom: 0;
}

.contacts__main-block .block-main {
    display: none;
    padding-top: 16px;
    padding-left: 45px;
}

.contacts__main-block.open .block-main {
    display: block;
}

.block__item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--create-line);
    flex: 1;
}

.contacts__item-title {
    color: var(--title-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /*margin-top: 8px;*/
}

.contacts__item-btns {
    display: flex !important;
    align-items: center;
    margin-bottom: 10px;
    gap: 12px;
    justify-content: flex-start;
}

.fas.fa-copy {
    font-size: large;
    color: var(--radio-checked-rect);
    margin-left: 30px;
}

.contacts__btns-content {
    cursor: pointer;
    display: flex !important;
    background-color: var(--create-checked-item);
    border-radius: 8px;
    padding: 7px;
    width: 30px;
    height: 30px;
}

.structure-list {
    background: inherit;
    position: relative;
    min-height: 110px;
    padding: 0 8px;
    padding-top: 25px;
}

.dir-pagination {
    padding: 0;
}

.not-com-add-frm {
    position: fixed;
    background-color: inherit;
    display: flex;
    border-radius: 20px;
    /*background: var(--modal-bg);*/
    padding: 0;
    box-shadow: var(--block-shadow-1);
    z-index: 15000;
}

.devices__cab__header {
    width: 100%;
    max-width: 350px;
}

@media (max-width: 600px) {
    .not-com-add-frm {
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: Calc(100% - 10px);
        height: Calc(100% - 10px);
        max-width: Calc(100% - 10px);
        max-height: Calc(100% - 10px);
    }


    .user-notifications .not-back {
        position: relative;
        z-index: 49;
        color: #9d9f9e;
        font-size: 20px;
    }

    .devices__cab__header {
        width: 100%;
        max-width: unset;
    }
}

.arrow-down.rotate {
    transform: rotateX(180deg);
    transition: all .4s ease;
}

.arrow-down {
    cursor: pointer;
    display: block;
    width: 20px;
    height: 20px;
    background-image: var(--input-arrow);
    background-repeat: no-repeat;
    background-size: contain;
}

.not-com-add-frm .modal__form-wrapper {
    position: relative;
    width: 100%;
    height: max-content;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 20px;
    background: var(--bg);
}

.inc-chat__form {
    position: sticky;
    bottom: 0;
    box-shadow: 0px -3px 7px 2px #efefef;
}

.not-com-add-frm .modal__form-wrapper .modal__form-close {
    color: var(--title-color);
    font-size: xx-large;
    align-self: flex-end;
    position: sticky;
    z-index: 15005;
    cursor: pointer;
    right: 15px;
    top: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    background: var(--bg);
    align-items: center;
    border-radius: 50%;
    border: 1px solid;
}

.not-com-add-frm h3 {
    font-size: 20px;
    padding: 15px 0;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--karelia-color);
}

.not-com-add-frm form {
    background: var(--block-bg);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.not-com-add-frm .contact-items-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 15px 0 50px;
}
.star-disabled{fill:#505050}.star-enabled{fill:#ED8A19;}.star{display: inline-block;}.feedback-button{margin-left:20px;}

.btn-green,
.btn-blue,
.btn-gray,
.btn-orange,
.btn-red,
.btn-dark-green {
    display: flex;
    height: 44px;
    min-width: 150px;
    padding: 12px 25px 13px 25px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 16px;
    background: var(--green-btn-bg);
    letter-spacing: 0.05em;
    border: none;
    font-size: 14px;
    font-style: normal;
    /*font-weight: 400;*/
    line-height: normal;
    color: #ffffff;
    width: max-content;
}

.btn-green:hover {
    background: var(--green-btn-bg);
    color: #ffffff;
}

.btn-blue {
    background: var(--blue-btn-bg);
}

.btn-blue:hover {
    background: var(--blue-btn-bg);
    color: #ffffff;
}

.btn-gray {
    background: var(--btn-gray-bg);
    color: var(--create-input-color);
}

.btn-gray:hover {
    background: var(--btn-gray-bg);
    color: var(--create-input-color);
}

.btn-dark-green {
    background: var(--btn-dark-green-bg);
    color: #ffffff;
}

.btn-dark-green:hover {
    background: var(--btn-dark-green-bg);
    color: #ffffff;
}

.btn-red {
    background: transparent;
    color: red;
    border: 1px solid red;
    margin: -1px;
}

.btn-orange {
    background: var(--btn-orange-bg);
    color: var(--btn-orange-color);
}

.btn-small-padding {
    padding: 8px 16px;
    border-radius: 12px;
    height: max-content;
    margin: auto 0;
}

#contacts-main .structure-list>div {
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--block-shadow-1);
    background: var(--subblock-bg);
}

.worker-list__full .structure-list>div {
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--block-shadow-1);
    background: var(--subblock-bg);
}

.contacts__item-tel {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--comments-text);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.contacts__item-tel::before {
    display: block;
    content: '';
    background: url('../img/icons/tel.svg');
    width: 16px;
    height: 16px;
}

.main__content {
    background-color: var(--block-bg);
    padding: 16px;
    border-radius: 20px;
    width: 100%;
    height: auto;
}

.main__content-uncontacts {
    background-color: var(--block-bg);
    padding: 16px;
    border-radius: 20px;
}

.main__content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}

.structure-tabs {
    background: inherit;
    border-bottom: unset;
    display: flex;
    width: 100%;
}

.structure-name {
    color: var(--title-color);
    font-size: 16px;
}

.checked-checkbox,
.unchecked-checkbox {
    display: none;
    cursor: pointer;
}

.structure-select__all, .structure-select__list {
    margin-left: 25px;
    margin-bottom: 15px;
}

.structure-select__all .contacts__main-block {
    background: var(--block-color);
    max-width: 500px;
}

.structure-select__all .contacts__main-block .structure-name {
    margin-bottom: unset;
}

input[type="checkbox"]:checked~.checked-checkbox {
    display: block;
}

input[type="checkbox"]:not(:checked)~.unchecked-checkbox {
    display: block;
}

.workers-list-selected__item {
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--block-shadow-1);
    background: inherit;
}

.workers-list-selected__item span {
    font-size: 16px;
    color: var(--title-color);
}

.selected-tab__actions {
    background: inherit;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
}

.selected-tab__actions .save-group {
    align-self: auto;
    cursor: pointer;
    display: flex !important;
    background: var(--green-btn-bg);
    color: var(--title-color);
    border: none;
    border-radius: 8px;
    padding: 7px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
}

.autogroups__name,
.autogroups__count,
.autogroups__none {
    color: var(--title-color);
    margin-right: 0;
}

.autogroups__load {
    color: var(--base-text-color);
    border: 1px solid var(--base-text-color);
    padding: 3px 4px;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 0;
}

.autogroups__remove {
    color: red;
    border: 1px solid red;
    padding: 3px 4px;
    border-radius: 6px;
    cursor: pointer;
}

.autogroups__load:hover,
.autogroups__remove:hover {
    background: var(--create-input);
}

.gsInformer {
    width: auto !important;
}

.gsCity {
    text-align: center !important;
    font-size: 16px !important;
    overflow: hidden;
    font-weight: 700 !important;
}

.guide-tree__body {
    position: relative;
    display: flex;
}

.guide-tree__items-wrapper {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content;
    gap: 16px;
}

#guide-main {
    container-type: inline-size;
    container-name: guideContainer;
}

#tests-main {
    container-type: inline-size;
    container-name: testsContainer;
}

.guide-tree__item {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), lightgray 0px -70.455px / 100% 123.558% no-repeat;
}

.guide-tree__item img {
    height: auto;
    width: 100%;
}

.guide-tree__item .content-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    padding: 1rem;
}

.guide-tree__item .content-layer::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-clip-path: polygon(20% 0, 100% 0%, 100% 100%, 50% 100%);
    clip-path: polygon(20% 0, 100% 0%, 100% 100%, 50% 100%);
    -webkit-shape-outside: polygon(20% 0, 100% 0%, 100% 100%, 50% 100%);
    z-index: -1;
    background: radial-gradient(141.42% 141.42% at 0% 0%, rgb(102 102 102 / 85%) 50%, rgba(246, 246, 246, 0.00) 100%)
}

.guide-tree__item-title {
    color: #65BC47;
    text-align: right;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
    white-space: unset;
    overflow: unset;
    text-overflow: unset;
}

.guide-tree__item-title span {
    display: block;
    margin-left: auto;
    max-width: 60%;
}

.guide-tree__item-btns {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: max-content;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.guide__item-btn {
    cursor: pointer;
    padding: 5px;
    display: flex;
    width: 34px;
    height: 34px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    border: 2px solid #FFF;
    background: radial-gradient(141.42% 141.42% at 0% 0%, rgba(250, 250, 250, 0.20) 0%, rgba(246, 246, 246, 0.00) 100%);
    /*backdrop-filter: blur(12px);*/
}

.guide__item-btn:hover {
    box-shadow: 0 0 10px 1px #1c78c930;
}

/*.not-com-add-frm fieldset {
    border-top: 1px solid #e5e5e5;
}*/

.guide-content-view__header {
    display: block;
    width: 100%;
    padding: 12px;
    /* background: var(--block-bg); */
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--title-color);
    border-radius: 16px;
    margin-bottom: 16px;
}

.guide-content-view__item {
    background: var(--block-bg);
    color: var(--title-color);
    border: none;
    width: unset;
    margin: unset;
    border-radius: 16px;
    margin: 16px 0 0;
}

.guide-content-view__item p {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.guide-content-view__item img {
    max-width: 800px;
    margin: 16px auto;
    width: 100%;
}

.guide-content-view__item ol,
.guide-content-view__item ul {
    padding-left: 30px;
}

.guide-content-view__item ol li,
.guide-content-view__item ul li {
    margin-bottom: 10px;
}

.guide-download {
    color: var(--title-color);
    background: var(--scrollbar-thumb-color);
}

.guide-content-view__general {
    padding: 16px;
    background: var(--block-bg);
    border-radius: 16px;
}

.not-com-add-frm .modal__form-wrapper h1 {
    /* position: absolute; */
    font-size: 22px;
}

.guide-content-view__general form {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.guide-content-view__general label:not(.structure-name) {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--title-color);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
}

.frmEdit label,
.label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: inherit;
}

.guide-content-view__general label span {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0;
    color: var(--base-text-color);
}

.guide-article-contents__add,
.guide-article-contents {
    padding: 16px;
    border-radius: 16px;
    background: var(--block-bg);
    color: var(--title-color);
}

.guide-article-contents__add {
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: left;
    flex-wrap: wrap;
}

.guide-article-contents__add button {
    border-radius: 10px;
    color: var(--create-input-color);
    background: var(--create-input);
    border: none;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
}

.guide-article-content {
    width: 100%;
    max-width: 1000px;
    background: inherit;
}

.guide-article-content__panel {
    right: -13px;
    top: -23px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.guide-article-content__panel i {
    margin: 0 !important;
}

.guide-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 16px;
    background: var(--block-bg);
}

.guide-content__header {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 16px;
}

.guide-content__header H2 {
    color: var(--title-color);
    margin-bottom: 0;
}

.guide-list-item {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    margin: 0 0 10px;
    border: none;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    background: var(--birthday-block);
    color: var(--base-text-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    box-shadow: var(--block-shadow-1);
}

.guide-list-item:hover {
    box-shadow: 0 0 4px 0 #77717185;
}

.guide__item-name {
    flex: 1 1;
}

.guide-list-item .guide__item-btn {
    border: none;
    background: var(--scrollbar-track-color);
}

.guide-list-item .guide__item-btn:first-of-type {
    margin-left: auto;
}

@container guideContainer (width < 768px) {
    .guide-tree__items-wrapper {
        grid-template-columns: 1fr;
    }

    .guide-tree__item img {
        object-fit: cover;
    }
}

.personal-select__form .autogroups__load {
    color: var(--last-title);
    border: 1px solid var(--last-title);
    border-radius: 6px;
    padding: 3px;
}

.personal-select__form .autogroups__remove {
    color: #D1000A;
    border: 1px solid #D1000A;
    border-radius: 6px;
    padding: 3px;
}

.autogroups__one {
    border-bottom: 1px solid #e5e5e5;
    padding: 10px;
    display: flex;
    font-size: 12px;
    align-items: center;
    gap: 10px;
}

.personal-select__form .uncontacts__block {
    margin-top: 16px;
    padding: 16px;
    background-color: var(--create-input);
    border: none;
    border-radius: 10px;
    box-shadow: var(--block-shadow-1);
}

.uncontacts__block-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.uncontacts__block-text {
    color: var(--title-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.uncontacts__block-tel {
    margin-top: 13px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--comments-text);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.uncontacts__block-tel::before {
    display: block;
    content: '';
    background: url('../img/icons/tel.svg');
    width: 16px;
    height: 16px;
}

.uncontacts__block-mail {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--comments-text);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.uncontacts__block-mail::before {
    display: block;
    content: '';
    background: url('../img/icons/mail.svg');
    width: 16px;
    height: 16px;
}

.uncontacts__block-btns {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contacts-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contacts__item-mail {
    margin-bottom: 13px;
    display: flex !important;
    gap: 15px;
    color: var(--comments-text);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.contacts__item-default {
    margin-bottom: 13px;
    display: flex !important;
    gap: 15px;
    color: var(--comments-text);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.contacts__item-mail::before {
    display: block;
    content: '';
    background: url('../img/icons/mail.svg');
    width: 16px;
    height: 16px;
}

.contacts__item-whats {
    background: no-repeat center url('../img/icons/whats-up-white.svg');
    width: 12px;
    height: 12px;
    background-color: #5CCC81;
    padding: 8px;
    border-radius: 8px;
}

.contacts__block-employee {
    display: none;
    padding-top: 16px;
    padding-left: 46px;
}

.contacts__block-employee.openk {
    display: block;
}


/* Почта */

#mail-main .overlay {
    display: flex;
    position: fixed;
    height: 100vh;
    justify-content: center;
    align-items: center;
    width: 0%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 54;
    background: rgba(0, 0, 0, 0.60);
}

#mail-main .overlay.open {
    display: flex;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 54;
    background: rgba(0, 0, 0, 0.60);
}

.mail__content-wrapper {
    display: flex;
    gap: 20px;
    position: relative;
}

.mail__folders {
    display: flex;
    height: max-content;
    width: 290px;
    padding: 24px 16px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
    border-radius: 16px;
    background: var(--block-bg);
}

.mail__refresh-btn {
    display: flex;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    background: var(--btn-dark-green-bg);
    border-radius: 16px;
    cursor: pointer;
}

.mail__folders .folders {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.mail__folders .folders li a {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    width: 100%;
    gap: 12px;
    border-radius: 16px;
    box-shadow: var(--block-shadow-1);
    cursor: pointer;
}

.mail__folders .folders li:hover a {
    background: var(--mail-menu-li-hover);
    filter: none;
}

.mail__folders .folders li:hover a:hover {
    filter: none;
}

.mail__folders .folders li a,
.mail__folders .folders li a span {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.mail__folders .folders li.mail-dir-active a,
.mail__folders .folders li.mail-dir-active a span {
    font-weight: 700;
}

.mail-add-folder i {
    color: var(--btn-dark-green-bg);
}

.settings-icon path {
    fill: var(--settings-icon-fill);
}

.mail-search__form {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.mail-search__form select {
    padding: 12px 14px;
}

.mail-search-window {
    display: flex;
    height: 44px;
    padding: 8px 16px;
    align-items: center;
    gap: 12px;
    border: none;
    border-radius: 16px;
    background: var(--vacancy-block-bg);
    cursor: pointer;
    box-shadow: var(--block-shadow-1);
    color: var(--settings-icon-fill);
}

.mail-move-letters {
    width: 44px;
    height: 44px;
}

.btn-remove,
.mail-letters-actions {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    border: none;
    align-items: center;
    padding: 8px 10px;
    border-radius: 16px;
    box-shadow: var(--block-shadow-1);
    background: var(--vacancy-block-bg);
}

.btn-remove:disabled,
.mail-letters-actions:disabled,
.btn-remove:disabled:hover,
.mail-letters-actions:disabled:hover {
    padding: 8px 10px;
    border-radius: 16px;
    box-shadow: var(--block-shadow-1);
    background: var(--vacancy-block-bg);
}

.btn-remove:disabled svg path {
    fill: var(-btn-remove-disabled-fill);
}

.mail-letters-actions:disabled svg path {
    fill: var(--default-checkpoint-path-fill);
}

.mail-letters-actions:not(:disabled) svg path {
    fill: var(--done-checkpoint-rect-fill);
}

.btn-remove:not(:disabled) svg path {
    fill: var(--btn-remove-fill);
}

.mail-search-window.active {
    color: var(--title-color);
}

.btn-clear-form {
    display: none;
}

.mail-search-window.active .btn-clear-form {
    display: flex;
}

.popup-menu {
    position: absolute;
    background: var(--block-bg);
    box-shadow: var(--block-shadow-1);
    padding: 0;
    width: 160px;
    top: 55px;
    right: calc(50% - 80px);
    z-index: 100;
    border-radius: 8px;
}

.mail-info .popup-menu.full {
    position: absolute;
    top: 110%;
    left: 20px;
    display: flex;
    min-width: 358px;
    padding: 20px;
    align-items: flex-start;
    gap: 12px;
    background: var(--block-bg);
    box-shadow: var(--block-shadow-1);
    z-index: 100;
    border-radius: 8px;
}

.mail-info .popup-menu.full.closed {
    display: none;
}

.mail-info__wrapper {
    display: grid;
    grid-template-columns: 1fr 4fr;
    width: 100%;
    column-gap: 12px;
    row-gap: 4px;
}

.mail-info__wrapper .first {
    color: var(--date-color);
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.mail-info__wrapper .second {
    color: var(--buses-color);
    text-align: left;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.mail-action-group span.mail-action-group__name {
    border-bottom: 1px dashed #ddd4d4;
    color: var(--title-color);
    font-weight: bold;
}

.mail-action-group i {
    margin-right: 5px;
}

.mail-action-group {
    text-align: left;
    color: var(--comments-date);
    font-weight: bold;
}

.mail__open-menu-btn {
    display: none;
    width: max-content;
    padding: 8px 10px;
    align-items: center;
    gap: 12px;
    border-radius: 16px;
    background: var(--vacancy-block-bg);
    cursor: pointer;
    box-shadow: var(--block-shadow-1);
}

.mail__search-mobile {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.letter-row:hover {
    background: var(--active-checkpoint-circle-fill);
}

.pagination {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 0;
    margin-left: auto;
    gap: 4px;
    padding: 0;
    list-style: none;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    color: var(--date-color);
}

.pagination li:first-child {
    margin-right: 16px;
}

.paginaton-btn,
.paginaton-btn a {
    display: flex;
    width: 18px;
    height: 18px;
    padding: 5.727px 0px;
    justify-content: center;
    align-items: center;
}

.paginaton-btn svg path {
    fill: var(--date-color);
}

.md-show {
    display: none;
}

.letters__wrapper {
    display: grid;
    grid-template-rows: minmax(20px, 1fr);
    width: 100%;
    align-items: start;
    gap: 4px;
}

.letters__wrapper a {
    text-decoration: none;
    color: unset;
    display: flex;
    gap: 8px;
    min-height: 50px;
    align-items: center;
    position: relative;
    width: 100%;
}

.letters__header {
    display: flex;
    align-items: center;
    border-bottom: none;
    padding: 10px 10px 10px 8px;
}

.letter-row {
    display: flex;
    height: 70px;
    align-items: center;
    position: relative;
    padding: 0px 10px;
    border-radius: 4px;
    border-bottom: none;
}

.letter-row span.letter__from-name {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--birthday-name);
}

.letter-row.mail-unseen {
    border-bottom: 1px solid var(-letter-hover-bg);
    background: var(--scrollbar-track-color);
}

.letter-row.mail-unseen span.letter__from-name {
    font-weight: 700;
}

.letter-row .letter__content .letter__subject {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--select-color);
}

.letter-row.mail-unseen span {
    font-weight: 700;
}

.mail-info {
    display: flex;
    padding: 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    background: var(--block-bg);
    box-shadow: var(--block-shadow-1);
    border-radius: 16px;
}

.mail-info__from {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--mail-from-color);
}

.mail-info__from span {
    color: #1FA7E7;
}

.mail-info__btn,
.mail-info__btn.btn-remove,
.mail-info__btn.mail-move-to {
    display: flex;
    height: 26px;
    width: 26px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    gap: 12px;
    border-radius: 16px;
    background: var(--vacancy-block-bg);
    cursor: pointer;
    box-shadow: var(--block-shadow-1);
}

.mail-info__btn svg path,
.mail-info__btn.btn-remove svg path {
    fill: var(--exchange-title);
}

.mail-info__btn.flagged svg path {
    fill: gold;
}


.mail-info__btn.seen svg path {
    fill: greenyellow;
}

.mail-move-to {
    font-weight: normal;
    line-height: 100%;
    display: block;
    padding: 10px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.mail-body {
    margin-top: 25px;
    width: 100%;
    background: var(--block-bg);
    border-radius: 16px;
    min-height: Calc(100% - 200px);
    overflow: auto;
}

.fill-white {
    fill: white !important;
}

.mail-date__wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    font-weight: 400;
}

#mail_letters {
    width: 100%;
    overflow-y: auto;
    padding-bottom: 15px;
    overflow-x: hidden;
}

.letters__actions {
    display: none;
}

.letters__header .mail__all-select-cb {
    display: flex;
    padding: 8px 4px;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: rgba(204, 204, 204, 0.60);
    justify-content: space-around;
    margin-left: -5px;
    cursor: pointer;
    box-shadow: var(--block-shadow-1);
}

.mail__all-select-cb__actions {
    display: none;
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    left: 0;
    top: 110%;
    border-radius: 4px;
    background: var(--next-dot-fill);
    z-index: 55;
}

.mail__all-select-cb__actions span {
    width: 100%;
    cursor: pointer;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 5px 6px;
    text-align: left;
}

.relative {
    position: relative;
}

.ui-widget.ui-widget-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 250px;
    padding: 5px;
    border-radius: 8px;
    background: var(--item-bg);
    box-shadow: var(--block-shadow-1);
    border: none;
    z-index: 15000;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}

.sliders-values {
    color: var(--title-color);
}

.ui-widget-header {
    display: none;
}

.ui-slider .ui-slider-range {
    background: #1FA7E7;
    box-shadow: 0px 15px 30px 0px rgba(121, 191, 105, 0.00);
}

.remove-modal__message {
    color: var(--title-color);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.remove-modal__icon {
    display: flex;
    width: 60px;
    height: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 30px;
    background: #E7686E;
    box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.50) inset, 0px -2px 2px 0px rgba(255, 74, 51, 0.30) inset, 0px -15px 20px 0px rgba(255, 74, 51, 0.30) inset, 0px 10px 20px 0px rgba(255, 74, 51, 0.30);
}

.ui-widget-content {
    border: none;
    background: inherit;
    color: inherit;
}

.ui-dialog .ui-dialog-buttonpane {
    padding: 0;
    width: 100%;
    display: flex;
    gap: 16px;
    margin-top: 0;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    width: 100%;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
}

.ui-dialog .ui-dialog-buttonset button {
    display: flex;
    height: 44px;
    width: max-content;
    min-width: 100px;
    padding: 16px 10px 17px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 16px;
    color: transparent;
    border: none;
    margin: 0;
}

.ui-dialog.modal__remove .ui-dialog-buttonset button:first-child {
    background: var(--remove-modal-bg);
    color: var(--title-color);
}

.ui-dialog.modal__remove .ui-dialog-buttonset button:last-child {
    background: var(--remove-modal-bg-2);
    color: var(--title-color);
}

.ui-dialog.modal__confirm .ui-dialog-buttonset button:first-child {
    border: 1px solid var(--green-btn-bg);
    background: var(--green-btn-bg);
    color: var(--title-color);
}

.ui-dialog.modal__confirm .ui-dialog-buttonset button:last-child {
    border: 1px solid var(--remove-modal-bg);
    background: var(--remove-modal-bg-2);
    color: var(--remove-modal-bg);
}


.mail-info__information {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 8px;
    letter-spacing: 0.4px;
    color: var(--gray-color);
    cursor: pointer;
    margin-bottom: 16px;
}

.mail-info__subject {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--title-color);
}

.recipient-searcher {
    display: flex;
    padding: 8px 14px;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 16px;
    background: var(--item-bg);
    border: none;
    box-shadow: var(--block-shadow-1);
}

.recipient-item {
    position: relative;
    width: max-content;
}

.recipient-item i {
    display: block;
    position: absolute;
    right: 5px;
    top: 9px;
    font-size: 12px;
    color: var(--title-color);
    border-radius: 50%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00d";
    z-index: 100;
    width: 15px;
    text-align: center;
}

.recipient-searcher .recipient-search {
    min-width: 300px;
}

.file-upload__label {
    display: flex;
    width: 100%;
    gap: 16px;
}

.mail-new-attach {
    padding: 5px 10px;
    font-size: 12px;
    background: var(--default-checkpoint-circle-fill);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 200px;
    color: var(--title-color);
    box-shadow: var(--block-shadow-1);
}

.upload-block .upload-btn {
    width: 44px;
    height: 44px;
    display: flex;
    box-shadow: var(--block-shadow-1);
    background: var(--default-checkpoint-circle-fill);
    border-radius: 16px;
}

.upload-block .upload-btn svg {
    width: 44px;
    height: 44px;
}

.recipient-item input,
.recipient-item input:focus {
    display: flex;
    width: max-content;
    padding: 4px 8px 4px 14px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--title-color);
}

.mailboxes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.mailboxes .one-field {
    display: flex;
    padding: 12px 16px;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    background: var(--item-bg);
    box-shadow: var(--block-shadow-1);
    flex-direction: column;
    border: none;
    width: 100%;
}

.mailboxes .one-field.closed .mailbox__settings {
    display: none;
    height: 0;
}

.mailboxes__edit-btn,
.mailboxes__delete-btn {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 3.25px 4.812px 3.249px 5.1px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.mailboxes__delete-btn {
    margin-left: 12px;
}

.mailboxes__delete-btn svg path {
    fill: var();
}

.one-field input,
.one-field select {
    color: var(--date-color);
    background: var(--block-bg);
    height: 44px;
    padding: 12px 14px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    border: none;
    box-shadow: var(--block-shadow-1);
}

.one-field .frmSearch input:focus,
.one-field .frmEdit input:focus,
.one-field .frmEdit textarea:focus {
    color: var(--date-color);
    background: var(--subblock-bg);

    box-shadow: var(--block-shadow-1);
}


/* Транспорт */

#bus-main {
    container-name: busContainer;
    container-type: inline-size
}

.attention__block {
    position: relative;
    display: flex;
    padding: 20px;
    align-items: center;
    gap: 32px;
    flex: 1 0 0;
    border-radius: 10px;
    background: var(--yellow-bg);
}

.attention__block h3 {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--yellow-color);
    margin-bottom: 20px;
}

.attention__block .info {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--karelia-color);
}

.attention__block .yellow-text {
    color: var(--yellow-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.bus-schedule-item {
    display: flex;
    width: 100%;
    padding: 20px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 20px;
    background: var(--block-bg);
    box-shadow: var(--block-shadow-1);
}

.bus-schedule-item:not(:last-child) {
    margin-bottom: 20px;
}

.bus-svg path {
    fill: var(--bus-svg-fill);
}

.bus-schedule__time {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.bus-schedule-capacity .signed-up {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #4CAE50;
}

.bus-user-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.bus-user-item {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
}

.bus-user-list.hide {
    display: none;
}

.bus-user-name {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.bus-schedule-route ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.bus-schedule-route ul li {
    margin-bottom: 12px;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 130%;
}

.bus__title-new-record {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 24px;
}

.text-small {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.text-blue {
    color: #1FA7E7;
}

.bus-stop-help {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.bus__add-until {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.bus-days {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bus-days .custom-checkbox {
    font-size: 14px;
}

.bus-change-route input {
    height: 37px;
    /*max-width: 250px;*/
}

.bus-schedule fieldset {
    padding: 16px 0;
}

.bus-schedule fieldset legend {
    margin-bottom: 0;
}


@container busContainer (width < 768px) {
    .bus-schedule__time {
        font-size: 14px;
    }

    .bus__add-until {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
}


/* Галерея */

#gallery-main {
    container-name: galleryContainer;
    container-type: inline-size
}

.gallery_list__album {
    display: flex;
    padding: 24px 16px 16px 16px;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 20px;
    background: var(--block-bg);
}

.gallery-album__year {
    color: var(--title-color);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 100%;
    margin: 0;
}

.album-wrapper {
    display: flex;
    padding-bottom: 0px;
    flex-direction: column;
    align-items: start;
    align-self: stretch;
    padding: 0;
    width: 30%;
    border-radius: 10px;
    background: var(--subblock-bg);
    box-shadow: var(--block-shadow-1);
}

.album-cover {
    height: 300px;
    width: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.album-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    justify-self: start;
    padding: 16px;
    word-break: break-word;
}


.album-more {
    padding: 16px;
}

.gallery_list {
    display: flex;
    padding: 24px 16px;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 20px;
    background: var(--block-bg);
}

.gallery_list_item__wrapper {
    display: flex;
    width: 31%;
    height: 300px;
    padding-bottom: 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 10px;
    background: var(--subblock-bg);
    box-shadow: var(--block-shadow-1);
}

.gallery_list .gallery-preview {
    width: 100%;
    height: 100%;
    flex: 1;
    margin: 0;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.gallery_list .gallery-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
    transition: all .3s ease;
}

.gallery_list .gallery-preview img:hover {
    object-fit: scale-down;
}

.gallery-preview__likes .reactions-item {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 2px;
    flex: 1;
    padding: 0 16px 8px;
}

.gallery-edit-item {
    display: flex;
    width: 100%;
    gap: 16px;
    background: var(--subblock-bg);
    padding: 16px;
    border-radius: 16px;
}

.gallery-edit-item .img-wrapper {
    height: 200px;
    width: 100%;
    text-align: center;
    padding: 15px;
    border-radius: 15px;
    border: 2px dotted #299a0b;
}

.gallery-edit-item img {
    width: auto;
    height: 100%;
}

.gallery-edit-item .remove-data {
    height: 36px;
    width: 36px;
    min-width: unset;
}

.gallery-edit-more span {
    font-size: 12px;
}

.gallery-edit-more textarea {
    margin-top: 8px;
}


@container galleryContainer (width < 768px) {
    .album-wrapper {
        width: calc(50% - 16px);
    }

    .gallery_list_item__wrapper {
        width: calc(50% - 16px);
    }
}

@container galleryContainer (width < 550px) {
    .album-wrapper {
        width: 100%;
    }

    .gallery_list_item__wrapper {
        width: 100%;
        max-height: 350px;
        height: 100%;
    }
}

@media (max-width:768px) {
    .album-wrapper {
        width: calc(50% - 16px);
    }

    .gallery_list_item__wrapper {
        width: calc(50% - 16px);
    }
}

@media (max-width:550px) {
    .album-wrapper {
        width: 100%;
    }

    .gallery_list_item__wrapper {
        width: 100%;
    }
}

/* Прайс */

.pricelist-group {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    background: var(--block-bg);
    border-radius: 20px;
    box-shadow: var(--block-shadow-1);
    margin: 0;
    margin-bottom: 16px;
}

.pricelist__group-header {
    display: flex;
    width: 100%;
    padding: 16px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-radius: 20px 20px 0 0;
    background: var(--price-header-bg);
    cursor: pointer;
}

.pricelist-group__name {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: white;
}

.pricelist-group.closed .pricelist__group-header {
    border-radius: 20px;
}

.pricelist-group.closed .pricelist-item {
    display: none;
}

.pricelist-item {
    font-size: 14px;
    display: flex;
    padding: 15px;
    padding: 2px 16px;
    align-items: center;
    gap: 28px;
    width: 100%;
    justify-content: space-between;
    line-height: 138%;
}

.pricelist-item__name {
    flex: 1;
    margin-right: 10px;
    width: 100%;
    word-break: break-all;
}

@media (max-width: 768px) {
    .pricelist-group__name {
        font-size: 14px;
    }
}


/* столовая */

.dining-date {
    background-color: #016836;
    border-radius: 8px;
    width: fit-content;
    padding: 4px 8px;
    font-weight: 700;
    margin-bottom: 14px;
}

.dining-block {
    position: relative;
    color: white;
    background: url(../img/design/dining_cover.png);
    background-size: cover;
    border-radius: 10px;
    padding: 20px;
    cursor: default;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 20px;
}

.dining-block.admin {
    background: transparent;
    padding: 0;
}

.dining-block p {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 4px;
    text-align: left;
}

.dining-block.admin h5 {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


/* обращения */

#incs-main {
    container-type: inline-size;
    container-name: incsMain;
}

.filter-svg .svg-change-color {
    fill: var(--filter-svg-bg);
}

#incs-main .more-filters {
    cursor: pointer;
}

#incs-main .more-filters span {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    color: #1FA7E7;
}

#incs-main .set-incs-type {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

#incs-main .set-incs-type .interface_search_list.new {
    border-radius: 8px 0 0 8px;
    flex: 1 1 auto;
}

#incs-main .inc-label {
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 113%;
    color: var(--inc-label-color);
}

#incs-main fieldset.more-search-settings {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: none;
    padding: 0;
    margin: 15px 0;
}

#incs-main .more-search-settings__content {
    display: none;
}

#incs-main .more-search-settings__content.active {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 16px;
}

#incs-main .incs__table-head {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#incs-main .ordering {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#incs-main .inc-card {
    display: flex;
    width: 100%;
    border-radius: 0 0 16px 16px;
    padding: 10px;
}

.inc-fields.hidden {
    display: none;
}

.inc-fields {
    position: absolute;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    top: 110%;
    left: 0%;
    z-index: 100000;
    background: var(--block-bg);
    box-shadow: var(--block-shadow-1);
}

.inc-fields label {
    padding: 10px;
    font-size: 12px;
    line-height: 100%;
    cursor: pointer;
}

.inc-edit-wrapper {
    border-radius: 16px;
}

#incs-main .inc-card__info {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    width: 100%;
}

.inc-card__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.inc-card__content.text-block {
    background-color: rgb(75 190 231 / 8%);
    margin: 0 4px;
    border-radius: 4px;
}

.inc-card__status {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    min-width: 120px;
}

.inc-card__content div:first-child {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    /* 16.56px */
}

.incs-settings {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.set-incs-type button {
    border-radius: 0 8px 8px 0;
    font-size: 14px;
}

.inc-info-block {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.reports-wrapper {

    margin-top: 15px;

    background-color: var(--block-bg);

    border-radius: 20px;

}

.min-w-160 {
    min-width: 160px;
}

.scale__wrapper {
    display: flex;
    align-items: flex-end;
    margin: 0;
}

.inc-comment__text {
    background: var(--subblock-bg);
    padding: 16px;
    border-radius: 8px;
    border: none;
}

.inc-status {
    display: inline-block;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    border: none;
}

.inc-info-block__label {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--date-color);
}

.inc-info-block__content {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    /* 16.56px */
}

.inc-info-block button.square {
    margin-right: 5px;
    padding: 2px 3px;
    font-size: 12px;
    border-radius: 3px;
    margin-top: -2px;
    background: dodgerblue;
    color: #fff;
    width: 25px;
    min-width: unset;
    height: 25px;
}

.scale_item-tooltip {
    position: absolute;
    width: 300px;
    height: fit-content;
    max-width: 500px;
    left: 0%;
    top: 110%;
    z-index: 50;
    opacity: 0;
    display: none;
    font-size: 12px;
    color: #826fc0;
    margin: 5px 0;
}

.inc-change__wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.scale__item:hover .scale_item-tooltip {
    display: block;
    opacity: 1;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 5px;
    transition: all .3s;
}

.tabs-on-top {
    width: 100%;
    overflow-x: scroll;
}

.tabs-on-top::-webkit-scrollbar {
    height: 2px;
}

.tabs-on-top__wrapper,
.tab-buttons.tabs-on-top__wrapper {
    width: 100%;
    display: flex;
    gap: 0px;
    background: transparent;
    overflow-x: auto;
}

.tabs-on-top+.simple-block {
    border-radius: 0 0 16px 16px;
    margin-top: -16px;
}

.tab-buttons .tabs-on-top__tab {
    display: flex;
    padding: 13px 20px 14px 20px;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--title-color);
    gap: 10px;
    flex: 1 0 0;
    border-radius: 20px 20px 0px 0px;
    background: var(--tab-bg);
}

.tabs-on-top__tab.active {
    background: var(--tab-active-bg);
}

.tab-content.active {
    display: block;
}

.tab-content.active.flex {
    display: flex;
}

.tab-content.simple-block.active {
    display: flex;
}

.accordion-item {
    background: var(--subblock-bg);
    box-shadow: var(--block-shadow-1);
    padding: 10px;
    border-radius: 8px;
    width: 100%;
}

.accordion-item .accordion-content {
    display: none;
}

.accordion-item.open .accordion-content {
    margin-top: 15px;
    display: block;
    width: 100%;
}

.accordion-item .accordion-title {
    cursor: pointer;
    font-size: 16px;
    transform: translateY(20px);
}

.accordion-item .accordion-title i {
    margin-right: 8px;
}

.accordion-item .accordion-title .fa-angle-up {
    display: none;
}

.accordion-item .accordion-title .fa-angle-down {
    display: inline-block;
}

.accordion-item.open .accordion-title .fa-angle-down {
    display: none;
}

.accordion-item.open .accordion-title .fa-angle-up {
    display: inline-block;
}


.inc-theme-subtheme,
.inc-theme-parent {
    display: flex;
    gap: 8px;
    font-size: 16px;
}

.inc-part__items {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.incs__bytns-top button {
    width: 50%;
}

.inc-part {
    padding: 20px;
    background: var(--subblock-bg);
    border-radius: 16px;
    width: 100%;
    box-shadow: var(--block-shadow-1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inc-part__item label {
    display: block;
    font-size: 14px;
    color: var(--title-color);
    margin-bottom: 8px;
}

.inc-part__moder {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.inc-part__moder span {
    background: var(--item-bg);
    box-shadow: var(--block-shadow-1);
    border: none;
    padding: 12px;
    border-radius: 16px;
    flex: 1;
}

.inc-history-table th {
    font-weight: bold;
    background: transparent;
}

.inc-history-table td,
.inc-history-table th {
    padding: 10px;
    text-align: left;
    border: 1px solid var(--counter-color);
    background-color: transparent;
    font-size: 14px;
    max-width: 600px;
}

.inc-part__selects-grid__item {
    background: var(--item-bg);
    padding: 16px;
    border-radius: 8px;
}

.inc_change__wrapper {
    padding: 10px;
    background: var(--subblock-bg);
    border-radius: 8px;
    border: none;
    display: flex;
    font-size: 12px;
    box-shadow: var(--block-shadow-1);
}

.inc-part .date-input__border {
    width: 100%;
    flex: 1 1 auto;
    border-radius: 12px;
    overflow: hidden;
    height: auto;
    display: flex;
    box-shadow: var(--block-shadow-1);
}

.incs-title {
    color: var(--incs-title-color);
    font-weight: 600;
}

.inc-part .date-input__border input[type="date"] {
    border: none;
    outline: none;
    padding: 5px 10px;
    height: 100%;
    width: 100%;
    background: var(--subblock-bg);
    color-scheme: var(--input-color-scheme);
}


.inc_change__wrapper .inc_change {
    position: absolute;
    right: 10px;
    top: 5px;
    border-radius: 8px;
    width: 25px;
    height: 25px;
    background: #D2C9FE;
    color: #000;
    border: none;
    outline: none;
    padding: 0;
}

.inc-part .date-input__border ::-webkit-calendar-picker-indicator {
    background-color: #D2C9FE;
    color: #161616;
    padding: 5px;
    cursor: pointer;
    border-radius: 8px;
}

.inc-part__item {
    display: block;
    width: 100%;
}

.inc-container-wrapper {
    width: 100%;
}

.inc-part__wrapper {
    width: 100%;
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--block-shadow-1);
    background: var(--block-bg);
}

.inc-part__wrapper:not(:last-of-type) {
    border-bottom: 1px solid var(--create-line);
    padding-bottom: 24px;
}

.corrective-actions .inc-part__add-action-btn {
    width: 100%;
}


@media (max-width: 768px) {

    #incs-main .more-filters span,
    #incs-main .incs__table-head {
        display: none;
    }

    .inc-card__content:last-of-type {
        margin-left: unset;
    }

    .incs-settings button {
        padding: 8px 12px;
        min-width: unset;
    }

    .incs__bytns-top {
        flex-wrap: wrap;
    }

    .incs__bytns-top button {
        width: 100%;
    }
}

@container incsMain (width < 768px) {

    #incs-main .more-filters span,
    #incs-main .incs__table-head {
        display: none;
    }

    .inc-card__content:last-of-type {
        margin-left: unset;
    }

    .incs-settings button {
        padding: 8px 12px;
        min-width: unset;
    }

    .incs__bytns-top {
        flex-wrap: wrap;
    }

    .incs__bytns-top button {
        width: 100%;
    }
}


/* auth */


.auth__wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-direction: row;
}


.auth-content {
    display: flex;
    width: 50%;
    height: 100vh;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.auth-content .auth {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    max-width: 290px;
    margin: 0 auto;
}

.auth-screen__img {
    background-image: url('../img/auth_screen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 50%;
    height: 100vh;
    background: linear-gradient(0deg, rgba(27, 129, 62, 0.40) 0%, rgba(27, 129, 62, 0.40) 100%), url('../img/auth_screen.jpg'), lightgray 50% / cover no-repeat;
    filter: blur(1.5px);
}

.auth-content .auth button.w-full {
    width: 100%;
}


.auth__logo-img {
    background-image: var(--logo-full);
    background-size: contain;
    background-repeat: no-repeat;
    width: 154px;
    height: 47px;
}


.policy {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    text-align: center;
}

.policy a {
    padding: 0 10px;
    /*text-decoration:none;*/
    color: dodgerblue;
}

.policy span {
    padding: 0 10px;
}

.timec__form {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
}


@media (max-width: 786px) {
    .auth-screen__img {
        display: none;
    }

    .auth-content {
        width: 100%;
    }

    .timec__form {
        flex-direction: column;
        width: 100%;
    }
}

@media (max-height: 430px) {
    .policy {
        display: none;
    }
}

#user-main {
    container-type: inline-size;
    container-name: userMain;
}


.profile__main {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: max-content;
    gap: 16px;
    width: 100%;
}

.profile__open-settings {
    cursor: pointer;
    display: flex;
    padding: 5px;
    height: max-content;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: #F0F0F0;
    backdrop-filter: blur(12px);
}

.profile__open-settings>div {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 2.708px 4.01px 2.707px 4.25px;
    justify-content: center;
    align-items: center;
}

.profile-settings.show {
    display: flex;
}

.profile-settings {
    display: none;
}

.profile-settings__wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}


.for-change-pass {
    display: block;
    padding: 15px;
    background: var(--item-bg);
    box-shadow: var(--block-shadow-1);
}

.profile__main__left {
    grid-row: 1/4;
}

.profile__main__right {
    grid-column: 2/2;
    grid-row: 1/1;
}

.profile__status-wrapper {
    grid-row: 2/2;
    grid-column: 2/2;
}

.profile__main__left h3 {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.profile__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile__links a {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--title-color);
}

.profile__links.mob {
    gap: 8px;
    display: none;
}

.profile__main__left .user-status.is_online.online {
    background: #A7F5B0;
}

.profile__main__left .user-status.is_online.offline {
    background: #F7AEB1;
}

.profile__main__left .user-status.is_online.afk {
    background: #E9EDF5;
}

.profile__main__left .user-status.is_online.online {
    color: green;
}

.profile__main__left .user-status.is_online.offline {
    color: red;
}

.profile__main__left .user-status.is_online.afk {
    color: gray;
}

.profile__main .user-status {
    flex: 0 1 auto;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    /* 16.56px */
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile__name {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
    gap: 8px;
}

.profile__position {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    /* 16.56px */
    color: var(--position-color);
}

.selectCustom {
    position: relative;
    width: 100%;
    max-width: 280px;
}

.selectCustom-trigger {
    max-width: 280px;
    height: 44px;
    padding: 12px 14px;
    align-items: center;
    gap: 6px;
    border-radius: 16px;
    background: var(--item-bg);
    color: var(--title-color);
    box-shadow: var(--block-shadow-1);
}


.selectCustom-trigger::after {
    content: "▾";
    position: absolute;
    top: 3px;
    line-height: initial;
    font-size: 23px;
    right: 10px;
}

.selectCustom-options {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--item-bg);
    box-shadow: var(--block-shadow-1);
    z-index: 3;
    display: none;
    overflow: hidden;
}

.selectCustom.isActive .selectCustom-options {
    display: block;
}

.selectCustom-option {
    cursor: pointer;
    padding: 8px 12px;
}

.selectCustom-option:hover {
    background: var(--subblock-bg);
}

.dash-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

@media (max-width: 768px) {
    .dash-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

.dash-online {
    max-height: 200px;
    overflow: auto;
}

.profile__info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: 2/2;
    grid-row: 3/4;
    overflow: auto;
}

.profile__label {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.wall-write__wrapper {
    width: 100%;
}

.settings__title {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.profile-settings__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
}

.profile-settings__main h3 {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.profile__input {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile__input span {
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--profile-label-color);
}

.progressbar {
    width: 100%;
    margin: 10px 0;
    border: 1px solid #f3f3f3;
    background: #fff;
    font-size: 12px;
    color: #fff;
    background: #ccc;
}

.progressbar .progress {
    width: 0;
    height: 12px;
    background: green;
    line-height: 100%;
    text-align: right;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
}

.profile-avatar-wrapper {
    margin: 0 auto;
    overflow: hidden;
}

.profile-avatar__edit.show {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: var(--base-text-color);
    background: var(--block-bg);
    box-shadow: var(--block-shadow-1);
    box-shadow: 1px 2px 11px rgba(0, 0, 0, 0.41);
    border-radius: 8px;
    opacity: 1;
    cursor: pointer;
    position: absolute;
    z-index: 500;
    top: 100%;
    transition: 0.4s ease;
}

.profile-avatar__edit {
    display: none;
    opacity: 0;
}

.avatar__main-settings,
.avatar__img-settings {
    display: flex;
}


.avatar__img-settings {
    display: none;
}

.profile-avatar__edit .avatar__img-settings>div,
.profile-avatar__edit .avatar__img-settings>label>span,
.profile-avatar__edit .avatar__main-settings>div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: max-content;
    padding: 10px;
    font-size: 12px;
}

.mail-search {
    float: left;
}

.profile-avatar__edit .avatar__main-settings>div img,
.profile-avatar__edit .avatar__img-settings>div img {
    height: 25px;
    margin-bottom: 5px;
}

.profile-avatar__edit .avatar__main-settings>div>label span,
.profile-avatar__edit .avatar__img-settings>div>label span {
    font-size: 12px;
    display: block;
    line-height: 17px;
    text-align: center;
    color: var(--base-text-color);
    margin: 0;
}

.profile-avatar__edit .upload-block>.upload-btn {
    display: inline-block;
}

.upload-btn input {
    display: none;
}

.avatar-upload-block {
    display: none;
}

.remind__wrapper {
    margin: 0 auto;
    width: 100%;
    padding: 15px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    height: 100svh;
    justify-content: center;
}


.remind__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.remind__content span{
    display: flex;
    align-items: center;
    gap:4px;
}

@media (max-width: 786px) {


    .profile__main {
        gap: 8px;
        grid-template-rows: max-content;
    }

    .profile__main__left h3 {
        font-size: 12px;
    }

    .profile__main__left a {
        font-size: 12px;
    }

    .profile__name {
        font-size: 14px;
    }

    .profile__links {
        display: none;
    }

    .profile__links.mob {
        display: flex;
        gap: 8px;
    }

    .profile__links.mob a {
        font-size: 12px;
    }

    .profile__main__left {
        grid-row: 1/3;
    }

    .profile__main__right {
        grid-column: 2/2;
        grid-row: 1/2;
    }

    .profile__status-wrapper {
        grid-row: 2/3;
        grid-column: 2/2;
    }

    .profile__info {
        grid-row: 4/4;
        grid-column: 1/3;
    }

}

@container userMain (width < 768px) {
    .profile__main {
        gap: 8px;
        grid-template-rows: max-content;
    }

    .profile__main__left a {
        font-size: 12px;
    }

    .profile__main__left h3 {
        font-size: 12px;
    }

    .profile__name {
        font-size: 14px;
    }

    .profile__links {
        display: none;
    }

    .profile__links.mob {
        display: flex;
        gap: 8px;
    }

    .profile__links.mob a {
        font-size: 12px;
    }

    .profile__main__left {
        grid-row: 1/3;
    }

    .profile__main__right {
        grid-column: 2/2;
        grid-row: 1/2;
    }

    .profile__status-wrapper {
        grid-row: 2/3;
        grid-column: 2/2;
    }

    .profile__info {
        grid-row: 4/4;
        grid-column: 1/3;
    }

}

.profile__info-blc:hover {
    color: var(--title-color);
}

.profile__info-blc {
    display: grid;
    width: 100%;
    max-width: 500px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px;
    grid-template-columns: 1fr 1fr 1fr;
    color: var(--title-color);
    text-decoration: none;
    cursor: pointer;
}

.profile__info-blc .indicator__wrapper {
    background: var(--item-bg);
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    padding: 7px 5px;
}

.preloader {
    width: 100%;
    height: 100%;
    min-height: 375px;
    min-width: 375px;
    background: url(../img/animated-logo.svg) center center no-repeat rgba(0, 0, 0, 0.3);
    background-size: auto 200px;
    z-index: 10001;
}

.local-preloader:before {
    content: "";
    display: block;
    margin: 15px auto;
    height: 50px;
    width: 50px;
    background: url("../img/loader.gif");
    background-size: 100%;
}

.profile__info-blc .indicator__wrapper img {
    max-width: 20px;
    height: 20px;
    max-width: 20px;
}

.profile__info-blc .indicator__wrapper .indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.indicator.checked {
    background-color: #6fc998;
}

.indicator.unchecked {
    background-color: #ACACAC;
}

.indicator__auto,
.indicator__food {
    cursor: pointer;
}

/* админка */

.enter-list {
    width: 100%;
    height: 400px;
    overflow-y: auto;
    margin: 15px 0;
    padding: 15px;
    border-radius: 4px;
    box-shadow: var(--block-shadow-1);
    position: relative;
}

.enter-row {
    padding: 10px;
    /* border-bottom: 1px solid #e5e5e5; */
}

.enter-row-details-item {
    font-size: 12px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 10px;
    background: var(--item-bg);
    margin-top: 10px;
}

.enter-row-name {
    float: left;
}

.enter-row-total {
    float: right;
}

.enter-row .fa-angle-down {
    display: none;
}

.enter-row i {
    float: left;
    margin-top: 3px;
    margin-right: 10px;
    cursor: pointer;
}

.enter-row.closed .enter-row-details {
    display: none;
}

.enter-row .fa-angle-up {
    display: block;
}

.enter-row.closed .fa-angle-down {
    display: block;
}

.enter-row.closed .fa-angle-up {
    display: none;
}

.mail-stat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
    width: 100%;
}

.mail-stat-row {
    margin-left: 25px;
    font-size: 14px;
}


/* Модалка */

.modal {
    transition: 0.5s all ease-in;
    display: none;
    z-index: 12;
    background-color: #00000099;
    position: absolute;
    width: 100%;
    height: 100%;
}

.modal.open {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal>.closeModalBtn {
    position: absolute;
    top: 78px;
    right: 10px;
    font-size: 50px;
    color: var(--title-color);
    cursor: pointer;
    right: var(--sidebar-right-width);
}

@media (max-width: 768px) {
    .modal>.closeModalBtn {
        right: 0;
    }
}

.modal-content {
    max-width: 1170px;
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    z-index: 13;
    background-color: var(--block-bg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    cursor: pointer;
    color: var(--title-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.modal-close {
    cursor: pointer;
}

.modal__folder:not(:first-of-type) {
    display: none;
    margin-top: 12px;
    margin-left: 26px;
    padding-left: 26px;
}

.modal__folder-employee {
    margin-top: 12px;
    display: none;
}

.modal__folder-group {
    display: none;
}

.modal__folder-group.open .modal__folder-employee {
    display: block;
}

.modal__folder.open {
    display: block;
}

.modal__folder-title {
    cursor: pointer;
    color: var(--title-color);
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.modal__title-img {
    background: url('../img/icons/folder-close.svg');
    width: 26px;
    height: 26px;
}

.modal__title-img.open {
    background: url('../img/icons/folder-open.svg');
}

.employee__title-img {
    background: no-repeat center url("../img/icons/folder-employee-open.svg");
    width: 24px;
    height: 24px;
}

.employee__title-img.open {
    background: no-repeat center url("../img/icons/folder-employee-close.svg");
}

.modal__folder:first-of-type {
    margin-top: 12px;
}

.employee-search {
    width: 100%;
    position: relative;
}

.employee-search input {
    padding-left: 40px;
}

.employee-search img {
    position: absolute;
    top: 12px;
    left: 12px;
}

.folder-employee-main {
    margin-top: 20px;
}

.folder-employee-main form {
    margin-top: 20px;
}

.folder-employee-main form input {
    margin-top: 8px;
}

.folder-employee-main label {
    margin-left: 15px;
}

.folder-employee-btn {
    cursor: pointer;
    margin-top: 20px;
    padding: 12px 0 13px 0;
    width: 100%;
    border-radius: 16px;
    background: #65BC47;
    color: #FFFFFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


@media (max-width: 1140px) {
    .collapse_right_menu {
        display: none;
    }

    #main-menu {
        transform: translateX(200%);
    }

    #left-menu,
    #admin-menu {
        top: 0;
    }

    #content {
        margin: 70px auto;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .header {
        width: 100%;
        padding-left: unset;
    }

    .news__header-tools form {
        width: 100%;
    }

    .news__header-tools form .default-input {
        max-width: 100%;
    }

    .mobile-logo {
        margin-left: 50px;
        display: block;
        background: var(--logo-mobile-img);
        width: 121px;
        height: 25px;
        z-index: 4;
    }

    .popular_pics-content {
        margin: 0 auto;
    }

    body.open-menu {
        overflow: hidden;
    }

    .item_left-jci {
        max-width: none;
    }

    .item_left-events {
        max-width: calc(100vw);
    }

    .header__logo {
        padding: 16px 40px;
    }

    .header__menu-burger {
        cursor: pointer;
        position: relative;
        width: 28px;
        height: 28px;
        display: block;
        z-index: 5;
    }

    .header__menu-burger span,
    .header__menu-burger:after,
    .header__menu-burger:before {
        transform: rotate(0deg);
        height: 3px;
        width: 100%;
        border-radius: 2px;
        position: absolute;
        background: var(--last-title);
        margin: 0 auto;
    }

    .header__menu-burger span {
        top: 12px;
        height: 3px;
        width: 75%;
    }

    .header__logo-img {
        margin-top: 70px;
        margin-left: 50px;
    }

    .header__logo {
        padding: 0;
    }

    .header__menu-burger:after {
        width: 50%;
    }

    .header__menu-burger:after,
    .header__menu-burger:before {
        content: "";
    }

    .header__menu-burger:after {
        bottom: 5px;
    }

    .header__menu-burger:before {
        top: 5px;
    }

    .header__menu-burger.open-menu span {
        opacity: 0;
        transition: 0.5s;
    }

    .header__menu-burger.open-menu::before {
        width: 82%;
        transform: rotate(50deg);
        top: 11.5px;
        transition: 0.4s;
    }

    .header__menu-burger.open-menu::after {
        width: 79%;
        transform: rotate(-45deg);
        bottom: 14px;
        transition: 0.4s;
    }

    .header {
        position: relative;
        padding-top: 0;
        z-index: 3;
    }

    .container.open-menu {
        padding-top: 0;
    }

    #left-menu .menu,
    #admin-menu .menu {
        height: auto;
        background-color: var(--block-bg);
        box-shadow: var(--block-shadow-1);
        border-radius: 20px;
        margin-top: 15px;
        padding: 16px 20px;
        justify-content: flex-start;
    }

    #left-menu .menu li,
    #admin-menu .menu li {
        width: auto;
        height: auto;
        margin: unset;
    }

    #left-menu .menu li a,
    #admin-menu .menu li a {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        color: var(--title-color);
    }

    .container {
        min-width: 50px;
    }

    body {
        flex-direction: column;
    }

    .main {
        grid-template-columns: 1fr;
        max-width: unset;
    }

    .header__mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        background-color: var(--block-bg);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
    }

    .header__logo {
        box-shadow: var(--block-shadow-1);
    }

    .header__inner {
        background-color: var(--logo-color);
        z-index: 3;
        box-shadow: var(--block-shadow-1);
        border-radius: 0;
        position: absolute;
        top: 0px;
        left: -500px;
    }

    .header__inner.open-menu {
        left: 0;
        right: 0;
        position: fixed;
        height: 100vh;
        overflow-y: scroll;
        padding-bottom: 30px;
    }

    .main {
        padding: 0 0 100px;
    }

    .welcome-title {
        font-size: 20px;
    }

    .mobile-btn {
        z-index: 3;
        cursor: pointer;
        background: var(--mobile-btn-img);
        width: 22px;
        height: 22px;
    }

    .mobile-btn.open-menu {
        background: url("../img/icons/scan-active.svg");
        width: 22px;
        height: 22px;
    }

    .main__item.open-menu {
        display: none;
    }

    #main__content.open-menu {
        display: none;
    }

    #main__footer {
        display: none;
        left: 0;
        right: 0;
        top: 70px;
        bottom: 0;
        max-width: 375px;
        margin: 0 auto;
    }

    #main__footer.open-menu {
        display: block;
    }

    #main-menu.open-menu {
        top: 70px;
        right: 0;
        padding: 10px 10px 70px 10px;
        left: 0;
        background: var(--bg);
        z-index: 10002;
        max-width: none;
        transform: translateX(0);
    }
}

@media (max-width: 834px) {
    #content {
        margin-left: unset;
        width: 100%;
    }

    #main__footer {
        display: none;
    }

    #main__footer.open__menu {
        display: block;
    }

    .main__item:first-of-type.open-menu {
        display: none;
    }

    .container {
        max-width: 834px;
        width: 100%;
        height: auto;
    }

    .header {
        min-height: 65px;
        background-color: var(--header-mobile);
    }

    .mobile-btn {
        z-index: 4;
    }

    .header__logo-img {
        display: none;
    }

    .header__inner.open-menu {
        width: 100%;
    }

    .header__inner.open-menu {
        left: 0px;
    }

    .container.open-menu {
        background-color: var(--header-mobile);
    }

    .main__item-inner {
        justify-content: start;
    }

    .inner__items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: inherit;
    }

    .header__logo-main {
        position: relative;
        background-color: var(--logo-mobile);
    }

    .header__inner {
        background-color: var(--header-mobile);
        z-index: 3;
        box-shadow: var(--block-shadow-1);
        border-radius: 0;
        position: absolute;
        top: 0px;
        left: -500px;
    }

    .header__logo {
        margin-top: 100px;
    }

    .events__blocks {
        justify-items: center;
        flex-wrap: wrap;
        display: flex;
    }

    .events__blocks-item {
        width: 100%;
    }

    .main {
        max-width: 100vw;
    }

    .main__item {
        max-width: inherit;
    }

    .news__main_text {
        margin: 22px auto 0 auto;
    }

    .main_text-content {
        margin: 8px auto 0 auto;
        max-width: unset;
    }

    .main_text-title {
        margin: 0 auto;
        white-space: initial;
        max-width: none;
    }

    .item_right-news {
        margin-left: unset;
        padding: 16px 0;
    }

    .nots-slider.owl-carousel .owl-item {
        padding: 0 16px;
    }

    .news-title {
        padding: 0 16px;
    }

    .left_item-popular_pics {
        margin-left: unset;
    }

    .popular_pics-content {
        position: relative;
        margin: 10px auto;
    }

    .menu {
        border-radius: 0px;
    }
}


.container {
    height: 100%;
    max-height: 100vh;
    min-width: 305px;
    overflow: auto;
}

.header {
    width: max-content;
}

.header__inner {
    height: calc(100% + 50px);
}

.header__logo {
    background-color: var(--logo-color);
    padding: 16px 20px;
    border-radius: 20px;
    box-shadow: var(--block-shadow-1);
}

.header__mobile {
    display: flex;
    align-items: center;
}

.header__logo-img {
    background-image: var(--logo);
    width: 175px;
    height: 36px;
}

.header__logo-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    gap: 8px;
}

.user-avatar .palm {
    background-image: url('../img/palm.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 10px;
    width: 50px;
    height: 50px;
    z-index: 5;
}

.profile-avatar .palm {
    background-image: url('../img/palm.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
    right: 25px;
    width: 100px;
    height: 100px;
    z-index: 5;
}

.header__menu-burger {
    display: none;
}

.mobile-logo {
    display: none;
}

.main-img {
    background-image: url("../img/header-acc-pic.png");
    width: 44px;
    height: 44px;
}

.main-name {
    margin-left: 8px;
    color: #ffffff;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.main-nav {
    background-image: url("../img/header-arrow.svg");
    width: 20px;
    height: 19px;
}

.main-test {
    background-color: black;
    width: 200px;
    height: 200px;
}

.menu {
    height: max-content;
    background-color: var(--block-bg);
    border-radius: 20px;
    box-shadow: var(--block-shadow-1);
    margin-top: 15px;
    padding: 16px 20px;
}

.main-user-menu .menu li {
    width: 100%;
}

.menu .list__item:not(.list__item-counter) {
    width: 100%;
    max-width: 300px;
    padding: 12px 0px;
    cursor: pointer;
    border-bottom: none;
    margin-left: 0;
    border-radius: 16px;
}

.menu .list__item:not(:last-child) {
    margin-bottom: 5px;
}

.menu .list__item a:not(.list__item-counter) {
    display: flex;
    padding: 0;
    color: var(--title-color);
    background: transparent !important;
}

.list__item:hover {
    transition-duration: 0.5s;
    transition-property: background padding-left;
    background: var(--menu-active);
    padding-left: 16px!important;
    padding-right: 16px!important;
}

.menu .list__item.menu-active {
    background: var(--menu-active);
    padding-left: 16px;
    padding-right: 16px;
}

.menu .list__item svg .main-bg {
    fill: var(--menu-icon-fill);
}

.menu .list__item.menu-active svg .main-bg,
.menu .list__item:hover svg .main-bg {
    fill: var(--menu-icon-hover-fill);
    transition: fill 0.5s;
}

.list__item-content {
    display: flex;
    align-items: center;
}

.list__item a:not(.list__item-counter) {
    display: flex;
    align-items: center;
}

.list__item a:hover {
    filter: unset;
}

.menu-title {
    font-size: large;
    letter-spacing: 0.05em;
}

.sms__content {
    padding: 0px 0px 12px 0px;
    display: none;
}

.sms__content.open-menu {
    display: block;
}

.sms__content-item {
    display: flex;
    white-space: nowrap;
    padding: 4px 16px 4px 38px;
    margin-top: 15px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.sms__content-item a {
    color: var(--title-color);
}

.list__item-title {
    margin-left: 15px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--title-color);
}

.device-video-delete {
    margin: auto;
    margin-bottom: 5px;
}

.feedback-indicator {
    display: none;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color:#ef2a2a;
    top: -3px;
    right: -3px;
    border: 1px solid #ffffff;
}

.feedback-indicator.show {
    display: block;
}

.list__item-counter {
    margin-left: auto;
    display: flex!important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--counter-color)!important;
    color: #ffffff!important;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 25px;
    height: 25px;
}

.open-menu .list-to-hide {
    display: none;
}

.timec-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.timec-wrapper h4 {
    font-size: 20px;
}


#excel td {
    vertical-align: middle;
}

#excel td img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 12px 0;
}

@media (max-width: 768px) {
    .timec-wrapper {
        grid-template-columns: 1fr;
    }
}

.timec-wrapper b {
    font-weight: 600;
}

.main {
    display: grid;
    grid-template-columns: 2fr;
    gap: 16px;
    /*padding-top: 20px;*/
    max-width: calc(100vw - var(--sidebar-left-width) - var(--sidebar-right-width));
    width: 100%;
    container-type: inline-size;
    container-name: mainAds;
}

@container mainAds (width < 768px) {
    .timec-wrapper {
        grid-template-columns: 1fr;
    }
}

@container mainAds (width < 650px) {
    .tabs-big {
        font-size: 1em;
    }

    .timec__form {
        flex-direction: column;
    }
}

.popular-photo {
    max-width: 400px;
}

.inner__items {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    width: 100%;
}

.main__welcome {
    padding: 24px;
    background-color: var(--block-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
    gap: 16px;
    margin-top: 0px;
}

.inc__chat {
    padding: 24px;
    background-color: var(--block-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
    gap: 16px;
    margin-top: 5px;
    max-width: 80%;
}



#main-menu {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 10002;
    max-width: 375px;
}

.welcome-title {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    color: var(--welcome-color);
    align-items: center;
    gap: 6px;
    display: flex;
    flex-wrap: wrap;
}

.title__back-btn {
    display: flex;
    width: 34px;
    height: 34px;
    padding: 10.818px 0px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--welcome-btn);
    cursor: pointer;
}

.welcome-title span {
    color: #007a3d;
    font-weight: 600;
}

.welcome-subtitle {
    font-size: 14px;
    color: var(--comments-count);
    margin-top: 8px;
    padding-left: 55px;
}

.welcome__btn {
    margin-left: auto;
}

.welcome__btn a {
    cursor: pointer;
    display: flex;
    gap: 8px;
    position: relative;
    border-radius: 16px;
    padding: 10px 16px 10px 16px;
    background-color: var(--welcome-btn);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--title-color);
}

.collapse_right_menu {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-color: var(--subblock-bg);
    box-shadow: var(--block-shadow-1);
    padding: 5px;
    cursor: pointer;
}

.collapse_right_menu svg path {
    fill: var(--radio-checked-hover-rect)
}

.welcome__btn.open-menu {
    background-color: #161616;
}

.welcome__btn__content {
    padding: 0px 0px 12px 0px;
    transition-duration: 0.5s;
    border-radius: 16px;
    background-color: var(--welcome-btn);
    position: absolute;
    z-index: 70;
    top: 0;
    right: 0;
    display: none;
    box-shadow: var(--block-shadow-1);
}

.item__icon {
    background: url("../img/menu-icons/sms-green.svg");
    width: 20px;
    height: 20px;
    position: absolute;
    left: 15px;
}

.welcome__btn__content.open-menu {
    display: block;
}

.btn__content-item {
    white-space: nowrap;
    padding: 4px 16px 4px 50px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 15px;
}

.btn__content-item a {
    color: var(--title-color);
}

.main__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.main__item:not(:first-of-type) {
    justify-self: end;
    width: 100%;
}

.main__item-inner {
    display: flex;
    width: inherit;
}

.news__main {
    width: 100%;
    height: auto;
    padding: 0 5px;
    position: relative;
}

.news__main_content {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.main-block {
    padding: 16px;
    background-color: var(--block-bg);
    border-radius: 20px;
    box-shadow: var(--block-shadow-1);
}

.sub-block {
    padding: 16px 16px;
    background-color: var(--item-bg);
    border-radius: 20px;
    box-shadow: var(--block-shadow-1);
}

.item_left-jci {
    max-width: none;
}

.video-js {
    border-radius: 20px;
    max-height: 400px;
    width: 100%;
}

.video-js .vjs-big-play-button {
    transition-duration: 0.5s;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #e7686e;
    border: none;
    outline: 27px solid #d1000a33;
    left: calc(50% + 22px);
}

.video-js .vjs-big-play-button:hover {
    transition-duration: 0.5s;
    border: 0px solid #d1000a33;
    background-color: #e7686e;
    border: none;
    outline: 0px solid #d1000a33;
}

.vjs-audio-only-mode .vjs-control-bar,
.vjs-has-started .vjs-control-bar {
    border-radius: 0px 0px 20px 20px;
}

.title {
    margin-bottom: 25px;
    color: var(--title-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.link {
    color: #65bc47;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: max-content;
}

.user-notifications.main-page-notifications {
    align-items: center;
}



.events__avatar {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    font-size: 8px;
    background: #DAE3F1;
    color: #3bb322;
    text-align: center;
    padding-top: 5px;
    cursor: default;
}

.events__blocks {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 16px;
}

.events__blocks-item {
    display: flex;
    flex-direction: column;
    padding: 20px 20px;
    width: 100%;
    border-radius: 16px;
    background: var(--buses-active);
    box-shadow: var(--block-shadow-1);
}

.events-title {
    color: var(--title-color);
    margin-bottom: 25px;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.events__date {
    color: var(--date-color);
    position: relative;
    display: flex;
    margin-top: 12px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.events__date img {
    margin-right: 8px;
}

.events__date::before {
    position: absolute;
    top: 25px;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #dae3f1;
}

.events__time {
    color: var(--date-color);
    margin-top: 17px;
    display: flex;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.events__time img {
    margin-right: 8px;
}

.blocks-text {
    margin-top: 17px;
    color: var(--title-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.blocks-text a {
    color: #1fa7e7;
    text-decoration-line: underline;
}

.blocks-text span {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.blocks__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

#bf2 {
    margin-top: 75px;
}

.blocks__members {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blocks__members-title {
    color: var(--title-color);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.blocks__members-pics {
    display: flex;
}

.blocks__members-pics div {
    margin-left: -4px;
}

.blocks__footer-btn {
    text-align: center;
    cursor: pointer;
    color: #545759;
    padding: 12px 44px;
    background-color: #f0f0f0;
    border-radius: 16px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#btn-active {
    color: #ffffff;
    background-color: #65bc47;
}

.inner__item_left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    overflow: hidden;
}

.inner__item_right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    overflow: hidden;
    min-width: 400px;
}

.item_right-news {
    padding: 16px;
    height: max-content;
    min-height: 1px;
}

.item_right-news .nots-slider {
    height: auto;
}

.item_right-news .nots-slider.owl-carousel .owl-stage-outer {
    height: inherit;
}

.main_item-pics {
    width: 100%;
}

.pics-high {
    display: flex;
    width: 100%;
}

.pics-down {
    display: flex;
}

.pics-high a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.pics-high img:first-of-type {
    border-radius: 15px;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 250px;
    margin: 0 auto;
}

.news__reactions {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    justify-content: flex-end;
}

.news__reactions a {
    width: 30px;
}

.reactions-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reactions-item img {
    width: 24px;
    height: 24px;
}

.reactions-item.heart {
    cursor: pointer;
}

.reactions-item span,
.reactions-counter {
    color: var(--title-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    opacity: 0.88;
}

.not-details {
    color: var(--title-color);
    margin: 0;
}

.seens .seen {
    color: var(--counter-color)
}

.seens .unseen {
    color: var(--date-color);
}

.seens p {
    background-color: var(--block-bg);
}

.likes p {
    color: var(--title-color);
    line-height: 110%;
    background-color: var(--block-bg);
    margin: 0;
    padding: 10px;
    margin-bottom: 3px;
    font-size: 12px;
}

.not-details__wrapper {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
}

.not-details__wrapper:hover {
    background: var(--scrollbar-thumb-color);
}

.one-not div.not-body {
    color: var(--title-color);
    margin: 20px 0 50px;
}

.one-not div.not-body p {
    word-break: break-word;
}

.one-not span.not-author,
.one-not span.not-date {
    color: var(--title-color);
}

.news__main_text {
    margin-top: 22px;
}

.main_text-title {
    color: var(--title-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.main_text-date {
    margin-top: 4px;
    color: #d0d2d3;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.main_text-content {
    margin-top: 8px;
    color: var(--title-color);
    max-height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.main_text-content p,
.main_text-content span {
    color: inherit !important;
}

.main_text-link {
    color: #1fa7e7;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
}

.news__comments {
    position: relative;
    margin-top: 35px;
    bottom: 0;
}

.comments-header {
    padding: 10px 0px;
    display: flex;
    align-items: center;
    border-top: 0.6px solid #F0F0F0;
}

.comments-title {
    color: var(--title-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 20px 0;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.comments-title:hover {
    filter: contrast(0.3);
}

.comments-title .comment-title__show-text {
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--counter-color);
    margin-left: 15px;
}

.comments-counter {
    margin-left: 10px;
    color: var(--comments-count);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.comments__main {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    background: var(--subblock-bg);
    padding: 0;
    border-radius: 16px;
}

.comments__main .comments__main-pic {
    object-fit: cover;
    width: 44px;
    height: 44px;
    border-radius: 30%;
}

.user-avatar {
    border-radius: 30%;
    position: relative;
}

.user-grid-wrapper {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
    gap: 15px;
}

.owl-carousel .owl-item .comments__main-pic {
    background: center url("../img/header-acc-pic.png");
    object-fit: cover;
    width: 44px;
    height: 44px;
    border-radius: 30%;
}

.comments__input-btns {
    position: absolute;
    right: 5px;
    top: calc(50% - 17px);
    display: flex;
    gap: 10px;
    align-items: center;
}

.main_input-icon {
    display: none;
    cursor: pointer;
    background: var(--input-icon);
    width: 20px !important;
    height: 20px !important;
}

.main_input-btn {
    cursor: pointer;
    width: 34px !important;
    height: 34px !important;
}

.left_item-popular_pics a {
    /*color: var(--title-color);*/
    color: white;
}

.popular_pics-title {
    color: var(--title-color);
    margin-bottom: 16px;
}

.popular_pics-content {
    position: relative;
}

.popular_pics-content img {
    width: 100%;
    border-radius: 10px;
    filter: brightness(0.5)
}

.content__likes {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
}

.likes-counter {
    margin: 2px 0px 0px 5px;
    color: #d0d2d3;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.likes-icon {
    background: url("../img/icons/like2.svg");
    width: 24px;
    height: 24px;
}

.content-title {
    color: #f0f0f0;
    position: absolute;
    bottom: 17px;
    left: 14px;
    max-width: 295px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.item__date {
    padding: 0;
    max-height: 176px;
}

.item__date-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #016836;
    border-radius: 20px 20px 0px 0px;
}

.item__date-title {
    color: #ffffff;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.item__date__btns {
    display: flex;
}

.date__btns-item {
    cursor: pointer;
}

.date__btns-item:first-of-type {
    background: url("../img/icons/date-left-btn.svg");
    width: 16px;
    height: 16px;
}

.date__btns-item:last-of-type {
    margin-left: 16px;
    background: url("../img/icons/date-right-btn.svg");
    width: 16px;
    height: 16px;
}

.item__date-main {
    display: flex;
    padding: 20px;
    justify-content: center;
}

.date__item {
    cursor: default;
    text-align: center;
    padding: 8px 8px;
    border-radius: 8px;
    max-width: 34px;
}

.date__item:not(:first-of-type) {
    margin-left: 15px;
}

#date-active {
    background-color: #016836;
}

#date-active div {
    color: #ffffff;
}

.date__item-title {
    color: #007a3d;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.date__item-counter {
    margin-top: 8px;
    color: #d0d2d3;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.item__buses {
    margin-top: 8px;
}

.last-title {
    color: var(--last-title);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 10px;
}

.buses__main-item {
    transition-duration: 0.5s;
    transition-property: background, border-radius, box-shadow;
    padding: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.buses__main-item:hover {
    border-radius: 10px;
    background: var(--buses-active);
    box-shadow: var(--block-shadow-1);
}

#buses-active {
    border-radius: 10px;
    background: var(--buses-active);
    box-shadow: var(--block-shadow-1);
}

.buses__main-icon {
    background: url("../img/icons/buses.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 26px;
    height: 26px;
}

.buses__route {
    display: flex;
    align-items: center;
    width: 70%;
    gap: 5px;
}

.buses__main-time {
    color: var(--buses-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
}

.buses__main-start {
    color: var(--buses-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    margin-right: 8px;
}

.buses__main-line {
    width: 16%;
    border-top: 1px dashed var(--buses-color);
    margin-right: 8px;
}

.buses__main-item:not(:first-of-type) .buses__main-line {
    width: 9%;
}

.buses__main-item:last-of-type .buses__main-line {
    width: 16%;
}

.buses__main-destination {
    color: var(--buses-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
}

.buses__main-btn {
    cursor: pointer;
    margin-left: 12px;
    background: url("../img/icons/add.svg");
    width: 18px;
    height: 18px;
}

.buses__main-btn-cancel {
    cursor: pointer;
    margin-left: 12px;
    background: url("../img/icons/subtract.svg");
    width: 18px;
    height: 18px;
    display: block;
}


.buses__map {
    cursor: pointer;
    margin-top: 10px;
    /*background: url("../img/map.png");*/
    width: 336px;
    height: 270px;
    border-radius: 20px;
    overflow: hidden;
}

.buses-btn {
    cursor: pointer;
    text-align: center;
    padding: 12px 25px 13px 25px;
    border-radius: 16px;
    background-color: #4cae50;
    color: #ffffff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 20px;
}

.share-btn {
    cursor: pointer;
    text-align: center;
    padding: 12px 25px 13px 25px;
    border-radius: 16px;
    background-color: #016836;
    color: #ffffff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.item__birthday {
    margin-top: 8px;
}

.birthday__block {
    display: flex;
    align-items: center;
    border-radius: 18px;
    background-color: var(--birthday-block);
    padding: 8px;
    box-shadow: var(--block-shadow-1);
}

.birthday__block:not(:first-of-type) {
    margin-top: 10px;
}

.birthday__block-content {
    margin-left: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.birthday-name {
    max-width: 255px;
    overflow: hidden;
    color: var(--birthday-name);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.birthday-date {
    margin-top: 4px;
    color: #828d99;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.birthday-profession {
    margin-top: 4px;
    color: #66a67e;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.item__new_staff {
    margin-top: 8px;
}

.new_staff__block {
    padding: 8px;
    border-radius: 18px;
    background-color: var(--new_staff);
    box-shadow: var(--block-shadow-1);
    display: flex;
    max-width: 336px;
}

.new_staff__block img {
    /*max-width: 30px;
  max-height: 30px;*/
    width: 44px;
    height: 44px;
}

.new_staff__block-content {
    margin-left: 8px;
}

.new_staff-name {
    color: var(--title-color);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.new_staff-profession {
    margin-top: 4px;
    color: #4cae50;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.new_staff-date {
    color: #d0d2d3;
    margin-top: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.swiper {
    max-width: 336px;
    height: 130px;
}

.swiper-button-prev {
    background: center no-repeat url("../img/icons/swiper-left.svg");
    width: 26px;
    height: 26px;
    margin-top: 38px;
    margin-left: 100px;
}

.swiper-button-next {
    background: center no-repeat url("../img/icons/swiper-right.svg");
    width: 26px;
    height: 26px;
    margin-top: 38px;
    margin-right: 100px;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: #bbc8dc;
}

.swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
    border-radius: 4px;
    background-color: #66a67e;
}

footer {
    display: none;
}



#vacancy-page .tab-content.active {
    display: flex;
}

#vacancy-page .vacancy-block {
    display: flex;
    padding: 16px;
    margin: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 10px;
    border: none;
    background: var(--vacancy-block-bg);
    box-shadow: var(--block-shadow-1);
}

#vacancy-page .vacancy-link a {
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
    color: #1FA7E7;
    border-bottom: none;
}

#vacancy-page .vacancy-name {
    align-self: stretch;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--title-color);
}

#vacancy-page .vacancy-more {
    color: var(--title-color);
}

#vacancy-page .vacancy-more p strong {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#vacancy-page .vacancy-more p {
    margin: 15px 0;
}

#vacancy-page .vacancy-more ul {
    list-style: disc;
    padding-left: 20px;
}

#vacancy-page .vacancy-more ul li {
    line-height: normal;
    font-weight: 400;
}

@media (max-width: 1442px) {
    .main__welcome {
        gap: 10px;
    }

    .ajax.logo,
    .ajax.mob.dining-link {
        display: none;
    }
}

@media (max-width: 1140px) {

    #content {
        margin: 70px auto;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .header {
        width: 100%;
        padding-left: unset;
    }

    .mobile-logo {
        margin-left: 50px;
        display: block;
        background: var(--logo-mobile-img);
        width: 121px;
        height: 25px;
        z-index: 4;
    }

    .popular_pics-content {
        margin: 0 auto;
    }

    body.open-menu {
        overflow: hidden;
    }

    .item_left-jci {
        max-width: none;
    }

    .video-js {
        max-width: none;
        width: 100%;
        margin: 0 auto;
    }

    .item_left-events {
        max-width: calc(100vw);
    }

    .header__mobile-item {
        display: flex;
        align-items: center;
    }

    .header__logo {
        padding: 16px 40px;
    }

    .header__menu-burger {
        cursor: pointer;
        position: relative;
        width: 28px;
        height: 28px;
        display: block;
        z-index: 5;
        margin-right: 20px;
    }

    .header__menu-burger span,
    .header__menu-burger:after,
    .header__menu-burger:before {
        transform: rotate(0deg);
        height: 3px;
        width: 100%;
        border-radius: 2px;
        position: absolute;
        background: var(--last-title);
        margin: 0 auto;
    }

    .header__menu-burger span {
        top: 12px;
        height: 3px;
        width: 75%;
    }

    .header__logo-img {
        margin-top: 70px;
        margin-left: 50px;
    }

    .header__logo {
        padding: 0;
    }

    .header__menu-burger:after {
        width: 50%;
    }

    .header__menu-burger:after,
    .header__menu-burger:before {
        content: "";
    }

    .header__menu-burger:after {
        bottom: 5px;
    }

    .header__menu-burger:before {
        top: 5px;
    }

    .header__menu-burger.open-menu span {
        opacity: 0;
        transition: 0.5s;
    }

    .header__menu-burger.open-menu::before {
        width: 82%;
        transform: rotate(50deg);
        top: 11.5px;
        transition: 0.4s;
    }

    .header__menu-burger.open-menu::after {
        width: 79%;
        transform: rotate(-45deg);
        bottom: 14px;
        transition: 0.4s;
    }

    .header {
        position: relative;
        padding-top: 0;
        z-index: 3;
    }

    .container {
        min-width: 50px;
        max-height: 2225px;
    }

    body {
        flex-direction: column;
    }

    .main {
        grid-template-columns: 1fr;
        max-width: unset;
    }

    .header__mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        background-color: var(--block-bg);
        position: fixed;
        left: 0;
        right: 0;
        z-index: 50;
    }

    .header__logo {
        box-shadow: var(--block-shadow-1);
    }

    .header__inner {
        background-color: var(--logo-color);
        z-index: 3;
        box-shadow: var(--block-shadow-1);
        border-radius: 0;
        position: absolute;
        top: 0px;
        left: -500px;
    }

    .header__inner.open-menu {
        left: 0;
        right: 0;
        position: fixed;
        height: 100vh;
        overflow-y: scroll;
    }

    .main {
        padding: 0 0 100px;
    }

    .header__logo-main {
        background-color: var(--logo-mobile);
        padding: 16px;
    }

    .mobile-btn {
        z-index: 3;
        cursor: pointer;
        background: var(--mobile-btn-img);
        width: 22px;
        height: 22px;
    }

    .mobile-btn.open-menu {
        background: url("../img/icons/scan-active.svg");
        width: 22px;
        height: 22px;
    }

    .main__item.open-menu {
        display: none;
    }

    #main__content.open-menu {
        display: none;
    }
}

@media (max-width: 834px) {
    .header__inner {
        background-color: var(--header-mobile);
        z-index: 3;
        box-shadow: var(--block-shadow-1);
        border-radius: 0;
        position: absolute;
        top: 0px;
        left: -500px;
    }

    .inner__items {
        display: grid;
        grid-template-columns: 1fr;
        width: inherit;
    }

    .header__logo {
        margin-top: 100px;
    }

    .events__blocks {
        justify-items: center;
        flex-wrap: wrap;
        display: flex;
    }

    .events__blocks-item {
        width: 100%;
    }

    .main {
        max-width: 100vw;
    }

    .main__item {
        max-width: inherit;
    }

    .news__main_text {
        margin: 22px auto 0 auto;
    }

    .main_text-content {
        margin: 8px auto;
        max-width: unset;
    }

    .main_text-title {
        margin: 0 auto;
        white-space: initial;
        max-width: none;
    }

    .item_right-news {
        margin-left: unset;
    }

    .left_item-popular_pics {
        margin-left: unset;
    }

    .popular_pics-content {
        position: relative;
        margin: 10px auto;
    }

    .menu {
        border-radius: 0px;
    }

    .news__main-pics {
        flex-direction: column;
    }

    .news__content-reaction {
        flex-direction: row;
        gap: 15px;
        align-items: center;
        padding: 16px 16px 0;
    }

    .reactions-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .reactions-item img {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 1140px) {
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 80px;
        display: block;
        background-color: var(--block-bg);
        z-index: 2;
        width: 100%;
    }

    .footer__inner-list {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 50px;
    }

    .footer__list-item,
    .footer__list-item a {
        display: flex;
        justify-content: center;
        height: 100%;
        width: 100%;
    }

    #footer-icon-1 {
        background: var(--footer-icon-1);
        background-size: contain;
        background-repeat: no-repeat;
        max-width: 51px;
        max-height: 55px;
        width: 100%;
        height: 100%;
    }

    #footer-icon-2 {
        background: var(--footer-icon-2);
        background-size: contain;
        background-repeat: no-repeat;
        max-width: 69px;
        max-height: 55px;
        width: 100%;
        height: 100%;
    }

    #footer-icon-3 {
        background: var(--footer-icon-3);
        background-size: contain;
        background-repeat: no-repeat;
        max-width: 75px;
        max-height: 55px;
        width: 100%;
        height: 100%;
    }

    #footer-icon-4 {
        background: var(--footer-icon-4);
        background-size: contain;
        background-repeat: no-repeat;
        max-width: 62px;
        max-height: 55px;
        width: 100%;
        height: 100%;
    }
}

.reaction-icon.remove-like {
    filter: invert(34%) sepia(25%) saturate(4407%) hue-rotate(114deg) brightness(94%) contrast(101%)
}

.inc-edit-wrapper .interface_search_list {
    background: transparent;
}

.report-search {
    background: transparent;
}

.dining_mark__select img {
    margin-right: 15px;
    cursor: pointer;
    opacity: 0.5;
    border-radius: 50%;
}

.dining_mark__select img:hover {
    opacity: 1;
}

.dining_mark__select img.selected {
    opacity: 1;
    border: 6px solid var(--news);
    box-shadow: 0px 0 4px #ccc;
}

.dining-mark {
    font-size: 60px;
}

.dining-mark__item .heart {
    float: left;
    font-size: 12px;
    cursor: pointer;
    flex-direction: row;
    gap: 8px;
}

.dining_mark__select i {
    font-size: 30px;
    margin-right: 15px;
    cursor: pointer;
    opacity: 0.5;
    border-radius: 50%;
    border: 6px solid transparent;
}

.dining_mark__date {
    display: block;
    margin: 0;
    padding: 15px;
    font-size: 26px;
}

.dining-mark__item {
    padding: 15px 0;
    display: block;
    border-top: 1px solid #e5e5e5;
}

.dining_mark__more {
    display: flex;
    align-items: center;
    gap: 8px;
}

.worker-list__collapse-btn {
    position: relative;
    padding: 8px 40px 8px 12px;
    color: var(--create-input-color);
    font-size: 14px;
    display: flex;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    cursor: pointer;
    margin-left: auto;
    align-items: center;
}

.dining_mark__comment {
    padding: 15px;
    color: var(--date-color);
    font-style: italic;
    background: var(--subblock-bg);
    box-shadow: var(--block-shadow-1);
    font-size: 12px;
    margin: 10px 0;
    border-radius: 8px;
    width: 100%;
}

.dining-mark__author {
    text-decoration: none;
    border-bottom: 1px dashed;
    color: var(--title-color);
    display: inline-block;
    padding-bottom: 3px;
}

.dining-mark__modified {
    color: var(--select-color);
    font-size: 12px;
    margin-right: 10px;
}


.inc-card__wrapper {
    display: flex;
    flex-direction: column;
    background: var(--subblock-bg);
    box-shadow: var(--block-shadow-1);
    width: 100%;
}

.inc-card__header {
    width: 100%;
    height: 40px;
    border-radius: 16px 16px 0 0;
}

.search-notfound {
    display: none !important;
}

.search-found {
    display: flex !important;
}

.search-content {
    position: relative;
}

.inc-others__wrapper {
    border-bottom: 1px solid var(--counter-color);
    padding-top: 16px;
}

.inc-others__wrapper .custom-checkbox {
    align-items: flex-start;
}

.inc-others {
    display: grid;
    grid-template-columns: 5% 5% 100%;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.inc-others-content {
    width: 80%;
}

.inc-others-content img {
    display: none;
}

.inc-others-hidden p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.search-content button[type="submit"] {
    position: fixed;
    top: 80%;
    left: 75%;
}

/* mobile */

@media (max-width:768px) {

    .search-content button[type="submit"] {
        position: fixed;
        top: unset;
        left: 36px;
        right: 32px;
        bottom: 16px;
        width: 85vw;
    }

    a:hover {
        filter: unset;
    }


    .default-datepicker-input {
        max-width: 500px;
        margin: 0 auto;
    }

    .md-show {
        display: flex;
    }

    #content {
        padding: 0;
    }

    #main__content {
        padding: 0 10px 50px;
    }

    .video-js {
        min-width: 100%;
    }

    .main__content-header {
        flex-wrap: wrap;
    }

    .main__content-header button {
        width: 100%;
        max-width: 100%;
    }

    .dining-block {
        background-image: url('../img/design/dining_cover_mob.png');
    }

    .main__welcome {
        border-radius: 0px 0px 20px 20px;
        border-top: 2px solid #ffffff;
        margin-top: 0;
    }

    .test-quests__wrapper {
        flex-direction: column;
    }

    .doc-search__wrapper {
        flex-direction: column;
        align-items: unset;
    }

    .tst-checkpoints__wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .available-quests,
    .selected-quests {
        width: 100%;
    }

    .guide-tree__items-wrapper {
        grid-template-columns: 1fr;
    }

    .bus__add-until {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .guide-tree__item img {
        object-fit: cover;
    }

    .news__content-main {
        gap: 10px;
    }

    .bus-schedule__time {
        font-size: 12px;
    }

    table.list {
        display: table;
    }

    .mail__open-menu-btn {
        display: flex;
    }

    .mail__folders {
        display: none;
    }

    .user-notifications .one-not.single-not {
        padding: 10px;
    }

    .tabs-big .tabs-big__item,
    .tabs-big .tabs-big__item.tab {
        font-size: 16px;
    }

    .user-notifications .one-not.single-not h4 {
        color: var(--title-color);
    }

    .test-card {
        gap: 16px;
    }

    .test-card__content {
        flex: unset !important;
        padding-bottom: 0;
    }

    .test-card__content span {
        padding-bottom: 8px;
    }

    .file-upload__label {
        flex-direction: column;
    }

    .user-notifications .one-not.single-not .not-info {
        border-bottom: 1px solid #c5c6c6;
        padding-bottom: 15px;
    }

    .user-notifications .one-not.single-not .not-info__bottom {
        border-bottom: none;
    }

    .user-notifications .one-not.single-not .like_btns {
        position: absolute;
    }

    .user-notifications .one-not.single-not .not-body {
        color: var(--title-color);
    }

    .news__content-img {
        max-width: unset;
    }

    .structure {
        margin-bottom: 15px;
        margin-left: 0px;
    }

    .structure .structure {
        margin-bottom: 15px;
        margin-left: 10px;
    }

    .structure-select__all, .structure-select__list  {
        margin-left: 0;
        margin-bottom: 15px;
    }

    .block__main-item {
        margin-left: 0;
    }

    #contacts-main .structure-list>div {
        padding: 12px;
    }

    .contacts__main-block {
        padding: 12px;
    }

    .content__contacts-header .header-btn {
        border-radius: 8px;
        padding: 6px 10px;
        font-weight: 400;
    }

    .interface_search_list.new {
        max-width: unset;
    }

    .interface_search_list.new .interface_search_selected {
        max-width: unset;
    }

    .guide-content-view__general form {
        padding: 30px 0 80px;
    }

    .not-com-add-frm .modal__form-wrapper {
        padding: 30px 15px 30px;
    }

    .guide-content-view__header {
        padding: 10px;
        font-size: 20px;
    }

    .guide-content {
        position: unset;
        transform: unset;
    }

    .guide-content {
        z-index: 1;
    }

    .create__img-list {
        flex-direction: column;
    }

    .md-hidden {
        display: none;
    }

    .news__content__text {
        max-width: unset;
        width: 100%;
    }

    .doc-directory {
        width: 100%;
    }

    .attention__image {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 25px;
        height: 25px;
    }

    .attention__image svg {
        height: 100%;
        width: 100%;
    }
}

@media (max-width: 500px) {
    .tab-buttons .tabs-on-top__tab {
        font-size: 16px;
        padding: 9px 15px 8px 15px;
        border: 0.5px solid var(--bg);
    }

    table.list td {
        font-size: 14px;
    }

    .item_right-news {
        padding: 16px 10px;
    }

    .inner__item_right {
        min-width: unset;
    }

    .popular-photo.owl-carousel.owl-drag .owl-item {
        max-width: calc(100vw - 50px);
    }

    #karelia-news .news__content-main {
        padding: 16px;
    }

    .news__block {
        padding: 16px;
    }

    .ads__date-list li {
        width: 100%;
    }

    .inc-chkbx {
        position: absolute;
        right: 0px;
        top: -44px;
        padding: 10px 16px;
    }
}


/* компоненты */

select {
    background: var(--create-input);
    color: var(--title-color);
    padding: 8px 14px;
    border-radius: 16px;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    /* Safari и Chrome */
    -moz-appearance: none;
    /* Mozilla */
    -ms-appearance: none;
    /* IE */
    background-image: url("data:image/svg+xml,<svg height='15px' width='15px' viewBox='0 0 16 16' fill='%23c4e1ee' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    width: 240px;
    height: 44px;
    padding: 8px 32px 8px 16px;
    outline: none;
    cursor: pointer;
}

.custom__date-input_wrapper {
    position: relative;
}

.custom__date-input {
    cursor: pointer;
    display: flex;
    width: 240px;
    height: 44px;
    padding: 14px 40px 14px 14px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    position: relative;
    border-radius: 16px;
    background: var(--create-input);
    color: var(--date-color);
}

.custom__date-input_value {
    width: 100%;
}

.custom__date-input_arrow {
    position: absolute;
    top: calc(50% - 9px);
    right: 12px;
    background-image: var(--input-arrow);
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
}

.date-input__picker {
    width: 240px;
    padding: 10px;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--create-input, #383838);
    box-shadow: 0px 10px 15px 0px rgba(66, 71, 77, 0.10);
    height: 140px;
    position: absolute;
    bottom: -145px;
    left: 0;
    z-index: 50;
    display: none;
}

.custom__date-input.open+.date-input__picker {
    display: flex;
    flex-direction: column;
}

.custom__date-input.open .custom__date-input_arrow {
    transform: rotateX(180deg);
}

.date-input__picker .picker__wrapper {
    height: 100%;
    width: 33%;
    overflow: hidden;
}

.date-input__picker>div {
    display: flex;
    width: 100%;
    height: 90px;
}

.date-input__picker button {
    border-radius: 6px;
    background: var(--block-bg);
    padding: 4px 9px;
    border: none;
    color: var(--buses-color);
    margin-left: auto;
    cursor: pointer;
}

.date-input__picker .picker__wrapper>div {
    height: 100%;
    overflow-y: auto;
    padding-right: 5px;
    padding-left: 5px;
}

.date-input__picker .date-picker__item {
    display: flex;
    height: 24px;
    padding: 0px 4px 0px 6px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    color: var(--title-color);
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    margin-bottom: 5px;
}

.date-input__picker .date-picker__item:first-of-type {
    border-radius: 8px 8px 0 0;
}

.date-input__picker .date-picker__item:last-of-type {
    border-radius: 0 0 8px 8px;
    margin-bottom: 0;
}

.date-input__picker .date-picker__item:hover {
    background-color: var(--date-input-item-hover);
}

.date-input__picker .date-picker__item.active {
    background-color: var(--date-input-item-active);
    border-radius: 4px;
}

.custom__time-input {
    cursor: pointer;
    display: flex;
    width: 240px;
    height: 44px;
    padding: 14px 40px 14px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    position: relative;
    border-radius: 16px;
    background: var(--create-input);
    color: var(--date-color);
}

.custom__time-input.open+.time-input__picker {
    display: flex;
    flex-direction: column;
}

.custom__time-input.open .custom__time-input_arrow {
    transform: rotateX(180deg);
}

.time-input__picker {
    width: 240px;
    padding: 10px;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--create-input, #383838);
    box-shadow: 0px 10px 15px 0px rgba(66, 71, 77, 0.10);
    height: 140px;
    position: absolute;
    bottom: -145px;
    left: 0;
    z-index: 50;
    display: none;
}

.time-input__picker .picker__wrapper {
    height: 100%;
    width: 50%;
    overflow: hidden;
}

.time-input__picker>div {
    display: flex;
    width: 100%;
    height: 90px;
}

.time-input__picker button {
    border-radius: 6px;
    background: var(--block-bg);
    padding: 4px 9px;
    border: none;
    color: var(--buses-color);
    margin-left: auto;
    cursor: pointer;
}

.time-input__picker .picker__wrapper>div {
    height: 100%;
    overflow-y: auto;
    padding-right: 5px;
}

.time-input__picker .date-picker__item {
    display: flex;
    height: 24px;
    padding: 0px 4px 0px 6px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    color: var(--title-color);
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    margin-bottom: 5px;
}

.time-input__picker .date-picker__item:first-of-type {
    border-radius: 8px 8px 0 0;
}

.time-input__picker .date-picker__item:last-of-type {
    border-radius: 0 0 8px 8px;
    margin-bottom: 0;
}

.time-input__picker .date-picker__item:hover {
    background-color: var(--date-input-item-hover);
}

.time-input__picker .date-picker__item.active {
    background-color: var(--date-input-item-active);
}

.inputLabel {
    color: var(--create-input-color);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-left: 15px;
}

label.custom-radio input[type=radio] {
    display: none;
}

.tst-quest-wrapper label.custom-radio input[type=radio] {
    display: none;
}

label.custom-radio {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding: 0;
    padding-left: 25px;
    margin: 0;
    line-height: 18px;
    user-select: none;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.tst-quest-wrapper label.custom-radio {
    display: block;
    cursor: pointer;
    position: relative;
    padding: 0;
    padding-left: 25px;
    margin: 0;
    line-height: 18px;
    user-select: none;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.custom-radio__svg {
    position: absolute;
    left: 3px;
    top: calc(50% - 9px);
    display: inline-block;
    width: 17px;
    height: 18px;
}

.custom-radio input[type=radio]:not(:checked)+.custom-radio__svg circle {
    fill: var(--radio-default-circle);
}

.custom-radio input[type=radio]:not(:checked)+.custom-radio__svg rect {
    fill: var(--radio-default-rect);
}

.custom-radio:hover input[type=radio]:not(:checked)+.custom-radio__svg circle {
    fill: var(--radio-hover-circle);
}

.custom-radio:hover input[type=radio]:not(:checked)+.custom-radio__svg rect {
    fill: var(--radio-hover-rect);
}


/* Checked */

.custom-radio input[type=radio]:checked+.custom-radio__svg circle {
    fill: var(--radio-checked-circle);
}

.custom-radio input[type=radio]:checked+.custom-radio__svg rect {
    fill: var(--radio-checked-rect);
}

.custom-radio:hover input[type=radio]:checked+.custom-radio__svg circle {
    fill: var(--radio-checked-hover-circle);
}

.custom-radio:hover input[type=radio]:checked+.custom-radio__svg rect {
    fill: var(--radio-checked-hover-rect);
}

.custom-checkbox {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 138%;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
    display: none;
}

.custom-checkbox .custom-checkbox__svg {
    width: 18px;
    height: 18px;
}

.custom-checkbox input[type="checkbox"]:not(:checked)+.custom-checkbox__svg .square {
    fill: var(--checkbox-default-sqare);
}

.custom-checkbox input[type="checkbox"]:not(:checked)+.custom-checkbox__svg .square-red {
    fill: var(--checkbox-default-sqare);
}

.custom-checkbox input[type="checkbox"]:not(:checked)+.custom-checkbox__svg .arrow {
    fill: var(--checkbox-default-arrow);
}

.custom-checkbox:hover input[type="checkbox"]:not(:checked)+.custom-checkbox__svg .square {
    fill: var(--checkbox-default-hover-sqare);
}

.custom-checkbox:hover input[type="checkbox"]:not(:checked)+.custom-checkbox__svg .square-red {
    fill: var(--checkbox-default-hover-sqare);
}


.custom-checkbox:hover input[type="checkbox"]:not(:checked)+.custom-checkbox__svg .arrow {
    fill: var(--checkbox-default-hover-arrow);
}



.custom-checkbox input[type="checkbox"]:checked+.custom-checkbox__svg .square {
    fill: var(--checkbox-active-sqare);
}

.custom-checkbox input[type="checkbox"]:checked+.custom-checkbox__svg .square-red {
    fill: #FF0000;
}

.custom-checkbox input[type="checkbox"]:checked+.custom-checkbox__svg .arrow {
    fill: var(--checkbox-active-arrow);
}

.custom-checkbox:hover input[type="checkbox"]:checked+.custom-checkbox__svg .square-red {
    fill: lightcoral;
}

.custom-checkbox:hover input[type="checkbox"]:checked+.custom-checkbox__svg .square {
    fill: var(--checkbox-active-hover-sqare);
}

.custom-checkbox:hover input[type="checkbox"]:checked+.custom-checkbox__svg .arrow {
    fill: var(--checkbox-active-hover-arrow);
}

.custom-checkbox>span {
    margin-bottom: 0;
}

::-webkit-scrollbar-button {
    background-image: none;
    background-repeat: no-repeat;
    width: 5px;
    height: 0px;
}

::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    /*background-color: dodgerblue;*/
    background-color: var(--scrollbar-thumb-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-color);
}

::-webkit-resizer {
    background-image: none;
    background-repeat: no-repeat;
    width: 4px;
    height: 0px;
}

::-webkit-scrollbar {
    width: 4px;
}

@container mainContainer (width < 768px) {
    .inner__items {
        grid-template-columns: 1fr;
    }

    .mail__open-menu-btn {
        display: flex;
    }

    .mail__folders {
        transform: translateX(-200%);
        position: fixed;
        top: 100px;
        left: 10px;
        z-index: 55;
    }

    .mail__folders.open {
        transform: translateX(0);
    }

    .item_right-news.md-hidden {
        display: none;
    }

    .item_right-news.md-block {
        display: block;
    }
}

@container mainContainer (width < 600px) {
    .create__img-list {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 500px) {

    .custom__date-input_wrapper,
    .custom__date-input,
    .custom__time-input {
        width: 100%;
    }

    .welcome-title {
        font-size: 18px;
    }
}


/* utility classes*/

fieldset {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 0;
}

fieldset.column {
    flex-direction: column;
}

fieldset legend {
    display: block;
    color: var(--title-color);
    margin-bottom: 8px;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.gap-5 {
    gap: 20px;
}

.pb-1 {
    padding-bottom: 4px;
}

.pb-2 {
    padding-bottom: 8px;
}

.pb-3 {
    padding-bottom: 12px;
}

.pb-4 {
    padding-bottom: 16px;
}

.pb-5 {
    padding-bottom: 20px;
}

.py-1 {
    padding-bottom: 4px;
    padding-top: 4px;
}

.py-2 {
    padding-bottom: 8px;
    padding-top: 8px;
}

.py-3 {
    padding-bottom: 12px;
    padding-top: 12px;
}

.py-4 {
    padding-bottom: 16px;
    padding-top: 16px;
}

.py-5 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.px-1 {
    padding-left: 4px;
    padding-right: 4px;
}

.px-2 {
    padding-left: 8px;
    padding-right: 8px;
}

.px-3 {
    padding-left: 12px;
    padding-right: 12px;
}

.px-4 {
    padding-left: 16px;
    padding-right: 16px;
}

.px-5 {
    padding-left: 20px;
    padding-right: 20px;
}

.p-1 {
    padding: 4px;
}

.p-2 {
    padding: 8px;
}

.p-3 {
    padding: 12px;
}

.p-4 {
    padding: 16px;
}

.p-5 {
    padding: 20px;
}

.flex-grow {
    flex-grow: 1;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-1 {
    flex: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

.pointer {
    cursor: pointer;
}

.w-max {
    width: max-content;
}

.w-full {
    width: 100% !important;
}

.w-min {
    width: min-content;
}

.min-w-min {
    min-width: min-content;
}

.copy-icon path {
    fill: var(--copy-icon-fill);
}

.my-1 {
    margin-top: 4px;
    margin-bottom: 4px;
}

.my-2 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.my-3 {
    margin-top: 12px;
    margin-bottom: 12px;
}

.my-4 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.my-5 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mb-5 {
    margin-bottom: 20px;
}

.mb-6 {
    margin-bottom: 24px;
}

.mb-7 {
    margin-bottom: 28px;
}

.mr-1 {
    margin-right: 4px;
}

.mr-2 {
    margin-right: 8px;
}

.mr-3 {
    margin-right: 12px;
}

.mr-4 {
    margin-right: 16px;
}

.mr-5 {
    margin-right: 20px;
}

.mr-6 {
    margin-right: 24px;
}

.mr-7 {
    margin-right: 28px;
}

.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

.mt-5 {
    margin-top: 20px;
}

.mt-6 {
    margin-top: 24px;
}

.mt-7 {
    margin-top: 28px;
}

.ml-0 {
    margin-left: 0;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.grid {
    display: grid;
}



.items-center {
    align-items: center;
}

.items-start {
    align-items: start;
}

.items-end {
    align-items: end;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.justify-end {
    justify-content: end;
}

.min-w-250 {
    min-width: 250px;
}

.font-semibold {
    font-weight: 600;
}

.text-xl {
    font-size: 24px;
}

.text-lg {
    font-size: 18px;
}

.text-base {
    font-size: 16px;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.word-break {
    word-break: break-all;
}

.elipsis {
    text-overflow: ellipsis;
}

.hidden {
    display: none;
}

.text-color-default {
    color: var(--title-color);
}

.truncate-overflow {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Количество строк */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .md-flex-row {
        flex-direction: row;
    }

    .md-w-max {
        width: max-content;
    }
}

@media (max-width: 768px) {
    .sx-w-full {
        width: 100%;
    }
}

#switch {
    color: var(--title-color);
    font-weight: 600;
    width: max-content;
    cursor: pointer;
}

#switch svg {
    width: 100px;
    height: 44px;
}



@media (max-width: 400px) {

    .btn-green,
    .btn-blue,
    .btn-gray,
    .btn-orange,
    .btn-red,
    .btn-dark-green {
        font-size: 12px;
        min-width: 130px;
        width: 100%;
        height: max-content;
    }

    #switch svg {
        width: 60px;
        height: auto;
    }
}


@media (max-width: 768px) {
    select {
        width: 100%;
    }

    .md-block {
        display: block;
    }
}