@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;
        }
    }
}

.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], input[type=password], input[type=email], input[type=file], input[type=number], input[type=datetime-local], textarea, select {
        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: center;
    gap: 10px;
}
.navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;

    svg {
        height: 20px;
    }
}
.navbar {
    padding: 0 !important;
}
.nav-item {
    a {
        display: inline-block;
        align-items: center;

        /*padding-top: 12px;*/
        /*padding-bottom: 12px;*/

    }
    height: 100%;
}
.nmt-1 {
    margin-top: -3px;
}
.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);
}

.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-list-place {
        flex: 1;
    }
}
.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: 25px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 24px;

    svg {
        width: 20px;
        height: 20px;
    }
}
.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;
}
.title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.quick-templates {
    padding: 0;
    list-style: none;
    margin: 5px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;

    li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-left: 11px;
        padding-right: 11px;
        cursor: pointer;
        font-size: 11px;
        background-color: #fff;
        border-radius: 12px;
        border: 1px solid #3D2D7933;
        height: 24px;
        transition: 0.3s;
    }
    li:hover {
        background-color: #f3f3f3;
    }
    li.active {
        background-color: #3D2D79;
        color: #fff;
    }

}

.hero-list, .place-list {
    padding: 0;
    list-style: none;
    margin: 5px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    width: 100%;
    li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;

        .name-inp {
            width: 200px;
        }

        .desc-inp {
            flex: 1;
        }

        .select-inp {
            width: 250px;
        }

        input, select {
            border: 1px solid #cacaca;
            height: 30px;
            border-radius: 4px;
            padding-left: 5px;
            padding-right: 5px;
        }

        .delete-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .delete-link svg {
            width: 20px;
            height: 20px;

            path {
                stroke: #d90000;
            }
        }

    }
}
.full-width {
    width: 100% !important;
}
.select2 {
    width: 100% !important;
}

.status-label {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    height: 22px;
    background-color: #f3f3f3;
    color: #494949;
    border-radius: 11px;
    padding-left: 11px;
    padding-right: 11px;
    font-size: 12px;
}
.status-new {
    background-color: #f3f3f3;
    color: #494949;
}
.status-progress {
    background-color: #5d94ec;
    color: #fff;
}
.status-finished {
    background-color: #7ccc5d;
    color: #fff;
}
.status-error {
    background-color: #9a0000;
    color: #fff;
}
.chapters {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;

    .chapter-title {
        .title-box {
            display: flex;
            align-items: center;
            gap:10px;
        }
        background-color: #f3f3f3;
        min-height: 35px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 10px;
        padding-right: 10px;
        cursor: pointer;
    }
    .chapter-title:hover {
        background-color: #ececec;
    }

    .chapter-content {
        margin-left: 20px;
        margin-top: 3px;
        margin-bottom: 10px;
    }
}
.sub-content {
    margin-top: 10px;
}
.int-flex {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.template-blocks {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;

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

        li {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 3px;

            input {
                flex: 1;
            }

            a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            a svg {
                width: 20px;
                height: 20px;

                path {
                    stroke: #d90000;
                }
            }
        }
    }


}
.template-blocks-fill {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;

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

        li {
            display: flex;
            flex-direction: column;
            gap: 6px;
            background-color: #fff;
            border-radius: 4px;
            border: 1px solid #e3e3e3;
            padding: 15px;

            input {
                flex: 1;
            }

            h5 {
                margin-bottom: 0;
            }

            textarea {
                resize: vertical;
                min-height: 67px;
                border: 1px solid #e3e3e3;
                padding-left: 7px;
                padding-right: 7px;
                padding-top: 5px;
                line-height: normal;
            }

            a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            a svg {
                width: 20px;
                height: 20px;

                path {
                    stroke: #d90000;
                }
            }
        }
    }
}
.move {
    cursor: move;
    width: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #676767;
}
.blue-background-class, .sortable-ghost {
    background-color: #ffefc9 !important;
}
.generated-block {
    padding: 10px;
    background-color: #fdffea;
    border-radius: 4px;
}
.code-template {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e8e8e8;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
}
.chapter-multi-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.chapter-action-link {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    height: 22px;
    font-size: 12px;
}
.pos-input {
    border: 1px solid #bababa;
    border-radius: 3px;
    width: 55px;
    text-align: center;
}