@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    font-family: Roboto, serif;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    svg {
        width: 18px;
        height: 18px;
    }

    .delete-link svg {
        width: 20px;
        height: 20px;

        path {
            stroke: #d90000;
        }
    }
}
.delete-car-item, .delete-work-item {
    svg {
        width: 20px;
        height: 20px;

        path {
            stroke: #d90000;
        }
    }
}
.navbar.shadow-sm {
    box-shadow: none !important;
    border-bottom: 1px solid #eaeaea;
}

.navbar {
    a {
        color: #000;
    }
}

.hidden-elem {
    display: none !important;
}

form {
    input[type=text]:not(:disabled), .datetime-inp:not(:disabled), input[type=password]:not(:disabled), input[type=email]:not(:disabled), input[type=file]:not(:disabled), input[type=date]:not(:disabled), textarea:not(:disabled), select:not(:disabled) {
        background-color: #fff !important;
    }
}
.user-avatar {
    width: 100%;
    max-width: 250px;
}
.alert {
    ul {
        margin: 0 0 0 20px;
        padding: 0;
    }
}
.form-check-input + .form-check-label {
    opacity: 0.5;
    transition: opacity 0.1s ease;
}

.form-check-input:checked + .form-check-label {
    opacity: 1;
    color: #000 !important
}
.flat-input {
    border: 1px solid silver;
    border-radius: 4px;
    box-shadow: none !important;
    outline: none !important;
}
.copy-link {
    svg {
        /*width: 21px;*/
        /*height: 21px;*/
    }
}
.table-extra-small {
    font-size: 11px;
}
.mass-actions-flex {
    display: flex;
    align-items: flex-end;
    gap: 13px;
    flex: 1;
    width: 100%;
    margin-bottom: 13px;

    .mass-action-item {
        display: flex;
        flex-direction: column;
        gap: 2px;


        span {
            flex: 1;
        }
    }
}
.mass-actions-flex {
    background-color: #fffbe2;
    border: 1px solid #e6e1c2;
    border-radius: 6px;
    padding: 12px;
}
.alert {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
}
.filter-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;

    svg {
        height: 30px;
    }
}
.navbar {
    padding: 0 !important;
}
.nav-item {
    a {
        display: inline-block;
        /*padding-top: 12px;*/
        /*padding-bottom: 12px;*/

    }
    height: 100%;
}
.nav-link.active, .nav-item.active {
    background-color: #e6e6e6 !important;
}
.navbar-toggler {
    margin-top: 6px;
    margin-bottom: 6px;
}
@media (max-width: 1024px) {
    .nav-item {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        a {
            padding-top: 0.2rem !important;
            padding-bottom: 0.2rem !important;
        }
    }
}
.nav-item {
    .dropdown-menu {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}
.dropdown-menu {
    overflow: hidden;
}
.dropdown-item:hover {
    background-color: #e6e6e6 !important;
}
.menu-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    svg {
        width: 18px;
    }
}
.text-right {
    text-align: right;
}
.settings-flex-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
select:disabled {
    background-color: #ececec !important;
    color: #b1b1b1 !important;
}
.flex-cell-middle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tire-title {
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
}
.layout-container {
    /*background-color: #f1f5fa;*/
    margin-top:10px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*padding: 30px;*/

    .section-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;

        .section-list-item.has-places .section-container {
            background-color: #e7f3e4;
            color: #137009;
        }

        .section-list-item {


            .section-container {
                background-color: #f3e4e4;
                color: #700909;
                border-radius: 5px;

                display: flex;
                gap: 10px;
                padding: 10px;

                .section-mover {
                    width: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: move;

                    i {
                        color: #8c8c8c;
                    }
                }
                .section-delete {
                    width: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    /*color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;*/

                    svg {
                        width: 20px;
                        height: 20px;

                        path {
                            /*stroke: #dc3545 !important;*/
                        }
                    }
                }
                .section-content {
                    flex: 1;
                    display: flex;
                    align-items: center;


                    .expander {
                        width: 30px;
                        display: flex;
                        align-items: center;
                        /*justify-content: center;*/
                    }

                    .row-info {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-wrap: wrap;
                        flex: 1;
                        width: 100%;

                        .section-info {
                            flex: 1;
                            min-width: 200px;
                        }
                        .progress {
                            flex: 1;
                        }
                    }

                    .section-title {
                        span {
                            font-weight: bolder;
                        }
                    }
                }
            }
        }
    }
}

.light-button {
    display: inline-block;
    background-color: #f6f8fa;
    color: #24292f;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.light-button:hover {
    background-color: #f3f4f6;
    border-color: rgba(27, 31, 35, 0.2);
}

.dark-button {
    display: inline-block;
    background-color: #5d94ec;
    color: #ffff;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.dark-button:hover {
    background-color: #5d94ec;
    border-color: rgba(27, 31, 35, 0.2);
}

.light-button-2 {
    display: inline-block;
    background-color: #d0d9e4;
    color: #1c2127;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.light-button-2:hover {
    background-color: #c6d1df;
    border-color: rgba(27, 31, 35, 0.2);
}


.shelving {

    padding: 20px;
    background-color: #f4f4f4;

    border: 2px solid #ccc;
    border-radius: 8px;

    .shelving-box {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 100%; /* можно ограничить ширину, если нужно */
    }
}

.shelf {

    padding: 10px;
    background-color: #e1e4e8;
    border: 1px solid #ccc;
    border-radius: 4px;

    .shelf-box {
        display: flex;
        flex-wrap: wrap; /* перенос ячеек */
        gap: 10px;

        .cell {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 0;

            .cell-size {
                font-size: 9px;
                font-weight: normal;
            }

            .cell-title {
                font-size: 11px;
            }
        }
    }
}

.cell {
    position: relative;
    flex: 0 0 60px;
    height: 60px;
    background-color: #fff;
    border: 2px solid #24292f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: sans-serif;

}

.cell:hover {
    .delete-cell {
        display: inherit;
    }
}

.level-box {
    margin-top: 10px;
}

.busy {
    background-color: #ffa4a4;
}
.reserved {
    background-color: #ffc367;
}
.shelving-menu {
    display: flex;
    align-items: center;
    justify-content:space-between;
}
.level-delete {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;*/

    svg {
        width: 20px;
        height: 20px;

        path {
            /*stroke: #dc3545 !important;*/
        }
    }
}
.shelving-menu .info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;

    a {
        width: 30px;
    }

    div {
        flex: 1;
        text-align: center;
    }
}
.bg-light2 {
    background-color: #e8e8e8 !important;
}
.delete-cell {
    color: #9a0000;
    position: absolute;
    right: 1px;
    top: 0;
    line-height: 10px;
    font-size: 10px;
    display: none;
    text-decoration: none;
}
.schema-head-buttons {
    gap: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .checker {
        display: flex;
        align-items: center;
        gap: 6px;

        input {
            flex: 1;
        }

        button {
            width: 140px;
        }
    }
}
.contract-wheel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;

    li {
        display: flex;
        align-items: flex-start;
        gap: 10px;

        background-color: #f3f3f3;
        padding: 10px;
        border-radius: 10px;


    }
}
.wheel-num {
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*height: 20px;*/
    /*background-color: #0088cc;*/
    /*color: #fff;*/
    /*border-radius: 10px;*/
    /*font-size: 11px;*/
    /*font-weight: bolder;*/
}

.wheel-mark-input {
    border: 1px solid #989898;
    border-radius: 3px;
    text-align: center;
    flex: 1;
    height: 28px;
}

.wheel-comment-input {
    border: 1px solid #989898;
    border-radius: 3px;
    flex: 1;
    resize: vertical;
    min-height: 90px;
    padding-left: 6px;
    padding-right: 6px;
    line-height: normal;
}

.wheel-manufacturer-input {
    flex: 1;
}

.wheel-type-input {
    flex: 1;
}
.wheel-list-item {
    display: flex;
    gap: 15px;
    flex: 1;
    align-items: flex-start;
    .wheel-list-form-column {
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1;
    }

    .wheel-list-form {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 3px;

        .wheel-qr {
            width: 95px;
            border-radius: 5px;
        }
    }
    .wheel-list-place {
        flex: 1;
    }
}
.comment-wheel {
    width: 100%;
    min-height: 95px;
    background-color: #fff;
    padding: 5px;
    border-radius: 5px;
}
.wheel-list-photos {
    display: inline-flex;
    align-items: center;
    gap: 5px !important;
    flex-wrap: wrap;

    div {
        background-size:     cover;
        background-repeat:   no-repeat;
        background-position: center center;
        border-radius: 5px;
        overflow: hidden;
        width: 90px;
        height: 90px;

        position: relative;
        background-color: #f3f3f3;



        a {
            color: #9a0000;
            position: absolute;
            right: 4px;
            top: 3px;
            line-height: 10px;
            font-size: 13px;
            /*display: none;*/
            text-decoration: none;

        }


    }
    .add-photo-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.2s;
    }
    .add-photo-btn:hover {
        background-color: #dcdcdc;
    }
}
.wheel-act {
    width: 55px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    gap: 10px;

    svg {
        width: 20px;
        height: 20px;
    }
}
.delete-user-item {
    line-height: normal !important;
    svg {
        width: 17px;
        height: 17px;
    }
}
.contract-wheels-header {
    display: flex;
    align-items: center;
    gap: 10px;

    a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
}
.place-box {
    display: flex;
    flex-direction: column;

}
.available-title {
    font-weight: bolder;
}
.custom-place-selector {
    display: flex;
    gap: 1px;
    flex-direction: column;

    .section-row-title {
        text-transform: uppercase;
        font-weight: bolder;
        font-size: 10px;
        background-color: #e3e3e3;
        color: #505050;
        padding: 3px;
        cursor: pointer;
    }

    .section-levels {
        margin-left: 20px;

        .section-levels-title {
            text-transform: uppercase;
            font-weight: bolder;
            font-size: 10px;
            background-color: #e8e8e8;
            color: #505050;
            padding: 3px;
        }

        .cells {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 3px;
            margin-top: 2px;

            .cell {
                width: 20px;
                height: 20px;
                flex: inherit;
                border: 1px solid #e8e8e8;

                input {
                    display: none;
                }
            }
        }
    }
}
.warning-message {
    font-weight: bolder;
    color: #cd0000;
}
.selected-cell {
    /*outline: 2px solid #000;*/
    background-color: #139a13;
}
.wheel-list-place {
    .busy {
        opacity: 0.2;
        /*background-color: #ffe6e6;*/
    }
    .reserved {
        opacity: 0.2;
        /*background-color: #ffe7c3;*/
    }

    .selectable-cell {
        border: 1px solid #000 !important;
    }

    .disabled-cell {
        visibility: hidden;
    }
}
.date-picker-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1;

    input {

    }
}
.contract-list {
    margin: 0 0 0 20px;
    padding: 0;
    list-style: none;

    .text-dark {
        color: #000;
    }
}
.ml-0 {
    margin: 0 !important;
}
.client-cars-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: 3px;

    li {
        display: flex;
        align-items: center;
        gap: 5px;

        .select2 {
            /*flex: 1;*/
        }

        .year-input {
            width: 90px;
            text-align: center;
            border: 1px solid #d6d6d6;
            border-radius: 3px;
            height: 28px;
        }

        .vin-input {
            width: 150px;
            text-align: center;
            border: 1px solid #d6d6d6;
            border-radius: 3px;
            height: 28px;
        }
    }
}
#kanban {
    max-width: 100%;
    min-height: calc(100vh - 205px);
    overflow: auto;

    .kanban-board {
        background-color: #f3f3f3;
    }

    .custom-board-header {
        background-color: #e8e8e8;
    }
}
.add-record-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 35px;
    text-decoration: none;
    color: #515151;

    svg {
        width: 15px;
        height: 15px;
    }
}
.kanban-drag {
    padding: 0 !important;
}
.select2-container {
    z-index: 10 !important;
}
.select2  {
    width: 100% !important;
}
.task-form {
    input[type="text"], input[type="date"], input[type="number"], .datetime-inp:not(:disabled) {
        height: 28px;
        width: 100%;
        background-color: #fff;
        border: 1px solid #aaa;
        border-radius: 4px;
        padding-left: 10px;
        padding-right: 10px;
    }
    textarea {
        min-height: 100px;
        width: 100%;
        resize: vertical;
        background-color: #fff;
        border: 1px solid #aaa;
        border-radius: 4px;
        padding-left: 10px;
        padding-right: 10px;
    }

    label {
        margin-bottom: 1px;
    }
}
.kanban-item {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    padding: 10px;
    cursor: move;
    transition: none !important;
}

.kanban-board {
    padding: 0;
}

.gu-mirror {
    position: fixed !important;
    z-index: 9999 !important;
    pointer-events: none;
    opacity: 0.8;
    transform: none !important;
}

.gu-transit {
    opacity: 0.3;
}
.kanban-item {
    margin-bottom: 3px !important;
}
.modal-footer-flex {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
}
.stage-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 15px;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #f3f3f3;
    border: 1px solid #dddddd;
    color: #535353;
}
.flex-task-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: normal;

    i {
        margin-top: 3px;
        width: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
.flex-column {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .flex-column-row {
        display: flex;
        flex-direction: column;


        .flex-column-row-title {
            width: 120px;
            font-weight: bold;
        }

        .flex-column-row-value {
            flex: 1;
        }
    }
}
.flex-column-sm {
    display: flex;
    flex-direction: column;
    gap: 5px;

    .flex-column-row {
        display: flex;
        flex-direction: column;


        .flex-column-row-title {
            width: 120px;
            font-weight: bold;
        }

        .flex-column-row-value {
            flex: 1;
        }
    }
}
.task-form {
    h6 {
        font-weight: bolder;
        color: #7e7e7e;
        text-transform: uppercase;
        margin-bottom: 4px;
        margin-top: 12px;
    }
}
.small-label {
    font-size: 12px;
    color: #818181;
}
.label-value {

}
.task-extra-comment {
    min-height: 100px !important;
}
.task-extra-comment2 {
    min-height: 40px !important;
}
.header-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    a {
        font-weight: normal;

    }
}
.search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;

    .search-form-space {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }

    .search-block {
        flex-wrap: wrap;
        height: 64px;
        display: flex;
        flex-direction: column;
        align-content: flex-end;

        label {
            font-size: 12px;
            color: #818181;
        }

        button {
            height: 35px;
        }

        input {
            height: 35px;
            width: 100%;
            background-color: #fff;
            border: 1px solid #aaa;
            border-radius: 4px;
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    .search-block-btns .search-block-btns-flex {
        flex-direction: row;
        gap: 5px;
        align-items: center;
    }
}
.wheel-qr-image {
    width: 190px;
    border-radius: 5px;
}
.flex-col-2 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bordered-box {
    border: 1px solid #000;
}
.client-qr {
    max-width: 200px;
}
.chat-messages-box {

    .message-item {
        margin-bottom: 3px;
        width: 60%;
        background-color: #f3f3f3;
        border-radius: 6px;
        padding: 4px 7px;

        .user-name {
            font-size: 11px;
            color: #474747;
            font-weight: normal;
        }

        .message-date {
            font-size: 11px;
            color: #8e8e8e;
            font-weight: normal;
        }
    }

    .message-to-right {
        /*float: right;*/
        background-color: #deebff;
    }
}
.chat-align-to-right {
    display: flex;
    justify-content: end;
}
.chat-align-to-left {
    display: flex;
}
.form-label {
    margin-bottom: 0 !important;
    margin-top: .3rem;
}
.popup-schema {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;

    .section-title {
        background-color: #d8d8d8;
        font-weight: bold;
        text-transform: uppercase;
        padding: 3px 3px 3px 10px;
    }


    .section-title.section-not-available {
        background-color: #ffd9d9;
        font-weight: bold;
        text-transform: uppercase;
        padding: 3px 3px 3px 10px;
    }

}
.popup-schema-levels {
    margin: 0 0 0 30px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;

    .level-title {
        background-color: #f1f1f1;
        font-weight: bold;
        text-transform: uppercase;
        padding: 3px 3px 3px 10px;

        display: flex;
        align-items: center;
        gap: 4px;

        .title-col {
            width: 120px;
        }

        .progress-col {
            flex: 1;
        }

    }

    .level-title:hover {
        background-color: #cacaca;
    }
}
.progress-title {
    text-transform: none !important;
    font-weight: normal;
    font-size: 12px;
}
.select-level-popup.active {
    background-color: #a8c9ff;
}
input:disabled {
    color: #444;
    background-color: #eee !important;
}
.not-available {
    opacity: 0.3;
    cursor: not-allowed !important;
    .progress-bar {
        background-color: #535353;
    }
}
.section-title {
    cursor: pointer !important;
}
.client-row {
    display: flex;
    align-items: center;
    gap: 6px;

    select {
        flex: 1;
    }

    .create-client-btn {
        height: 28px;
        width: 28px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        background-color: #eaeaea;
        border-radius: 3px;
        text-decoration: none;

        svg {
            width: 18px;
        }
    }

    .open-client-btn {
        height: 28px;
        width: 28px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        background-color: #eaeaea;
        border-radius: 3px;
        text-decoration: none;

        svg {
            width: 18px;
        }
    }
}

.client-form-box {
    display: flex;
    flex-direction: column;

    .form-block-title {
        background-color: #5d94ec;
        color: #fff;
        padding-left: 8px;
        padding-top: 3px;
        padding-bottom: 3px;
        font-weight: bolder;
        height: 32px;

        display: flex;
        align-items: center;

        border-top-right-radius: 3px;
        border-top-left-radius: 3px;

        cursor: pointer;
    }

    .form-block-content {
        border: 1px solid #5d94ec;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        padding:6px;
    }

}
.work-list, .materials-list {
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 2px;

    li {
        display: flex;
        align-items: center;
        gap: 5px;

        .select2, .material-custom-inp, .material-custom-inp {
            width: initial !important;
            flex: 1;
        }

        .work-dict-inp, .work-custom-inp {
            flex: 1 !important;
        }

        input {
            /*width: initial !important;*/
            width: 150px !important;
        }
    }
}
.add-work-links, .add-material-links {
    margin-top: 5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;

    a {
        text-decoration: none;
        background-color: #f3f3f3;
        color: #000;
        height: 20px;
        font-size: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        padding-left: 6px;
        padding-right: 6px;
        border: 1px solid #c8c8c8;
    }
}
.price-block {
    margin-top: 12px;
    .title-value {
        font-size: 18px;
        font-weight: bold;
    }

    span {
        display: block;
        line-height: 18px !important;
    }
}
.price-row {
    display: inline-flex;
    gap: 35px;
}
.payment-input-box {
    display: flex;
    flex-direction: column;
    gap: 5px;

    .payment-input-row {
        display: flex;
        align-items: center;
        gap: 20px;

        span.title {
            width: 200px;
        }

        input, .select2 {
            flex: 1;
            width: 100% !important;
        }
    }
}
.car-list-photos {
    display: inline-flex;
    flex-direction: column;
    gap: 5px !important;
    flex-wrap: wrap;
    width: 100%;

    .photo-item {
        display: flex;
        gap: 10px;
        padding: 6px;

        overflow: hidden;
        width: 100%;
        min-height: 90px;

        position: relative;
        background-color: #f3f3f3;

        .photo-comment-inp {
            flex: 1;
        }

        .photo-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        textarea {
            min-height: auto !important;
            line-height: normal !important;
            padding-top: 4px;
        }

        .image-preview {
            position: relative;
            width: 90px !important;
            height: 90px !important;
            border-radius: 5px;
            background-size:     cover;
            background-repeat:   no-repeat;
            background-position: center center;
        }

        a {
            color: #9a0000;
            position: absolute;
            right: 4px;
            top: 3px;
            line-height: 10px;
            font-size: 13px;
            /*display: none;*/
            text-decoration: none;

        }


    }
    .add-car-photo-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.2s;

        width: 90px;
        height: 90px;
    }
    .add-car-photo-btn:hover {
        background-color: #dcdcdc;
    }
}
:root{
    --muted: #6b6b78;
    --ok: #c7f0d1;
    --warn: #fff1c2;
    --busy: #ffd6e0;
    --font: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

/* Блок-компонент */
.status-comment{
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.3;
    color: #20232a;
    margin: 0 0 10px;
}

/* Вводный абзац */
.status-comment__intro{
    margin: 0 0 4px 0;
    font-size: 11px;
    color: var(--muted);
}

/* Список статусов */
.status-comment__list{
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Элемент списка */
.status-comment__item{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

/* Бейдж статуса */
.status-badge{
    display: inline-block;
    padding: 1px 6px;
    font-weight: 600;
    font-size: 11px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Цвета бейджей */
.status-badge--ok{
    background: var(--ok);
    color: #165b2e;
}
.status-badge--warn{
    background: var(--warn);
    color: #6a4b00;
}
.status-badge--busy{
    background: var(--busy);
    color: #7a2b3d;
}

.readonly-form {
    input, select, textarea {
        border: 0 !important
    }
}

.schema {
    /*body {*/
    /*    margin: 0;*/
    /*    font-family: Arial, sans-serif;*/
    /*    background: #f2f2f2;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    align-items: center;*/
    /*    height: 100vh;*/
    /*}*/

    .hall {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 10px;
        gap: 3px;
    }

    .last-col-cell {
        width: 40%;
        background: #fff;
        border-top-left-radius: 10px;
    }

    .level  {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 33.34%;
        height: 100%;
        text-align: center;
        align-self: flex-end;
        font-size: 10px;
        position: relative;
        transition: 0.2s;
    }

    .level:hover {
        cursor: pointer;
        background: #a8c9ff;
    }

    .level.selected, .level.busy{
        font-size: 10px;
    }
    .level.busy{
        border-top: 1px solid #6b6b6b;
    }


    .flex-1 {
        flex: 1 0 auto;
    }

    .px-20 {
        padding-right: 20px;
        padding-left: 20px;
    }

    .p-20 {
        padding: 15px;
    }

    .row-cell {
        display: flex;
        gap: 5px;
        position: relative;

        .level:not(:last-child) {
            border-right: 1px solid #acacac;
        }
    }
    .v-progress {
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: #ea4335a6;
    }
    .level-title-cell {
        position: absolute;
        bottom: 7px;
        width: 100%;
        font-size: 11px;
    }
    .rol-cell-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .w-100 {
        width: 100%;
        gap: 0;
    }

    .justify-between {
        justify-content: space-between;
    }

    .justify-end {
        justify-content: flex-end;
    }

    .col-cell {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .table-cell {
        width: 80px;
        height: 50px;
        display: flex;
        background: #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        transition: 0.3s;
        overflow: hidden;
    }

    .busy {
        background: #ea4335a6; /* красный */
        color: #fff;
    }

    .selected {
        background: #16BE2F80; /* зеленый */
        color: #fff;
    }

    .c26, .c27, .c28, .c29 {
        width: 100px;
        height: 80px;
    }

    .c11, .c1, .c4, .c8 {
        width: 100px;
        height: 80px;
        margin-bottom: 10px;
    }

    .c12, .c2, .c5, .c9 {
        width: 100px;
        height: 80px;
    }

    .c14, .c15, .c16, .c17 {
        width: 100px;
        height: 80px;
    }

    .c18, .c19, .c20, .c21 {
        width: 100px;
        height: 80px;
    }


    .c13, .c3, .c6, .c10 {
        width: 100px;
        height: 80px;
    }

    .c7 {
        height: 100px;
        width: 100px;
    }

    .c22, .c23 {
        width: 100px;
        height: 80px;
    }
    .c23 {
        /*margin-right: 80px;*/
        width: 100px;
    }

    .c24, .c25 {
        width: 100px;
        height: 80px;
    }

    .gap100 {
        gap: 100px;
    }

    .mt30 {
        margin-top: 20px;
    }

    .c8, .c4, .c1 {
        margin-bottom: 0;
        width: 100px;
    }

}
#calendar {
    a {
        text-decoration: none;
    }
}
.borderless-wheel {
    border: 3px solid #e1e1e1;
    background-color: #fafafa;
    border-radius: 10px;
}
.selected-wheel {
    border: 3px solid #d1e5ff;
    background-color: #e3eeff;
    border-radius: 10px;
}
.count-children {
    /*font-style: italic;*/
    opacity: 0.5;
}
.toggle-users {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    svg {
        height: 18px;
    }
}
.service-users-block {
    background-color: #e2f6ff;
    padding: 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.user-list-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    select {
        border: 1px solid #bcbcbc;
        border-radius: 3px;
    }

    .service-users-select {
        min-width: 250px;
    }

    .service-role-select {
        min-width: 250px;
    }
}
.user-list-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.salary-table {
    tr {
        th {
            vertical-align: middle;
            line-height: normal !important;
        }
    }
    thead {
        tr {
            th {
                text-align: center;
            }
        }
    }
    .percent-cell {
        text-align: center;
    }

    .percent-inp {
        text-align: center;
        width: 90px;
        border: 1px solid #bcbcbc;
        border-radius: 3px;
    }

    .sub-info {
        font-weight: normal !important;
        font-size: 11px;
    }
    .padding-left-salary {
        padding-left: 40px;
    }
}
.select2-selection--multiple {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    font-size: .7875rem !important;
    border-radius: var(--bs-border-radius-sm) !important;
}
.select2-container .select2-selection--multiple {
    min-height: 30px !important;
}
.fc-event, .event-title {
    padding: 0 1px;
    white-space: normal !important;
}