/* "s-" for custom style Scoliologic */

:root {
    --s-color-white: #fff;
    --s-color-black: #000;
    --s-color-light-soft: #fcfcfc;
    --s-color-light: #f0f2f5;
    --s-color-dark: #002329;
    --s-color-soft: #e6f7ff;
    --s-color-accent: #69c0ff;
    --s-color-action: #1890ff;
    --s-color-gray: #c2c2c2;
    --s-color-gray-dark: #5c5c5c;
    --s-color-main: #2D90A5;
    
    --s-color-success: #52c41a;
    --s-color-warning: #ffc107;
    --s-color-danger: #dc3545;

    --s-color-busy: #fff1b8;

    --s-table-font-size: 0.75rem;
    --s-table-color-dark: #fafafa;
    --s-table-color-gray: #919191;
    --s-table-color-hover: #e6f7ff;

    --s-color-egisz-required: #D32F2F;
    --s-color-egisz-should: #ff9a17;
    --s-color-egisz-could: #f1da08;
    --s-color-egisz-unable: #388E3C;
}

::selection {
    background: var(--s-color-action);
    color: var(--s-color-white);
}

svg {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}  

body {
    background-color: var(--s-color-light);
    overflow: hidden;
}

#toasts {
    z-index: 9999;
    pointer-events: none;
    box-sizing: border-box;
}

.mw-100 {
    max-width: 100%;
}

.mh-100 {
    max-height: 100%;
}

.s-cursor-default {
    cursor: default;
}

.s-cursor-disabled {
    cursor: not-allowed;
}

.s-pointer {
    cursor: pointer;
}

.s-a {
    color: var(--s-color-action);
    text-decoration: none;
    cursor: pointer;
}

.s-a:focus,
.s-a:active,
.s-a:focus-visible {
    text-decoration: underline;
}

.s-a:hover {
    color: var(--s-color-accent);
}

.s-a.underline {
    text-decoration: underline;
}

.s-a-list {
    color: var(--s-color-black);
    text-decoration: none;
}

.s-a-list:hover {
    color: var(--s-color-action);
}

.s-a-breadcrumb {
    color: var(--s-color-black);
    text-decoration: underline;
}

.s-a-breadcrumb:hover {
    color: var(--s-color-action);
}


.s-bg-white {
    background-color: var(--s-color-white);
}

.s-bg-black {
    background-color: var(--s-color-black);
}

.s-bg-gray {
    background-color: var(--s-color-gray);
}

.s-bg-light-soft {
    background-color: var(--s-color-light-soft);
}

.s-bg-light {
    background-color: var(--s-color-light);
}

.s-bg-dark {
    background-color: var(--s-color-dark);
}

.s-bg-accent {
    background-color: var(--s-color-accent);
}

.s-bg-action {
    background-color: var(--s-color-action);
}

.s-bg-main {
    background-color: var(--s-color-main);
}

.s-bg-success {
    background-color: var(--s-color-success);
}

.s-bg-warning {
    background-color: var(--s-color-warning);
}

.s-bg-busy {
    background-color: var(--s-color-busy);
}

.s-bg-sticky-bottom {
    background-color: rgba(0, 35, 41, 0.5);
}

.s-border-accent {
    border: 1px solid var(--s-color-accent);
}

.s-border-action {
    border: 1px solid var(--s-color-action);
}

.s-border-main {
    border: 1px solid var(--s-color-main);
}

.s-color-white {
    color: var(--s-color-white);
}

.s-color-black {
    color: var(--s-color-black);
}

.s-color-light {
    color: var(--s-color-light);
}

.s-color-dark {
    color: var(--s-color-dark);
}

.s-color-actions {
    color: var(--s-color-action);
}

.s-color-accent {
    color: var(--s-color-accent);
}

.s-color-gray {
    color: var(--s-color-gray);
}

.s-color-gray-dark {
    color: var(--s-color-gray-dark);
}

.s-color-main {
    color: var(--s-color-main);
}

.s-color-hover-red:hover {
    color: var(--s-color-danger);
}

.s-color-success {
    color: var(--s-color-success);
}

.btn-m-inner {
    margin: -0.5rem;
}

@media (max-width: 768px) {
    .btn-m-inner {
        margin: -0.25rem;
    }
}

.s-btn-primary {
    --bs-btn-color: var(--s-color-white);
    --bs-btn-bg: var(--s-color-action);
    --bs-btn-border-color: var(--s-color-action);
    --bs-btn-hover-color: var(--s-color-white);
    --bs-btn-hover-bg: var(--s-color-accent);
    --bs-btn-hover-border-color: var(--s-color-accent);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--s-color-white);
    --bs-btn-active-bg: var(--s-color-accent);
    --bs-btn-active-border-color: var(--s-color-accent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.s-btn-secondary {
    --bs-btn-color: var(--s-color-black);
    --bs-btn-bg: var(--s-color-white);
    --bs-btn-border-color: var(--s-color-white);
    --bs-btn-hover-color: var(--s-color-white);
    --bs-btn-hover-bg: var(--s-color-accent);
    --bs-btn-hover-border-color: var(--s-color-accent);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--s-color-white);
    --bs-btn-active-bg: var(--s-color-accent);
    --bs-btn-active-border-color: var(--s-color-accent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.s-btn-tertiary {
    --bs-btn-color: var(--s-color-black);
    --bs-btn-bg: var(--s-color-white);
    --bs-btn-border-color: var(--s-color-gray);
    --bs-btn-hover-color: var(--s-color-accent);
    --bs-btn-hover-bg: var(--s-color-white);
    --bs-btn-hover-border-color: var(--s-color-accent);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--s-color-black);
    --bs-btn-active-bg: var(--s-color-white);
    --bs-btn-active-border-color: var(--s-color-accent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.s-btn-tertiary.control.active {
    --bs-btn-active-color: var(--s-color-white);
    --bs-btn-active-bg: var(--s-color-accent);
    --bs-btn-active-border-color: var(--s-color-accent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.s-btn-quaternary {
    --bs-btn-color: var(--bs-btn-close-color);
    --bs-btn-bg: var(--s-color-white);
    --bs-btn-border-color: var(--s-color-white);
    --bs-btn-hover-color: var(--bs-btn-close-color);
    --bs-btn-hover-bg: var(--s-color-white);
    --bs-btn-hover-border-color: var(--s-color-white);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--bs-btn-close-color);
    --bs-btn-active-bg: var(--s-color-white);
    --bs-btn-active-border-color: var(--s-color-white);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
    opacity: 0.5;
}

.s-btn-quaternary:hover {
    opacity: 0.75;
}

.s-btn-dashed {
    border: 1px dashed var(--s-color-gray);
}

.s-btn-outline-group-select {
    --bs-btn-color: var(--s-color-black);
    --bs-btn-border-color: var(--s-color-gray);
    --bs-btn-hover-color: var(--s-color-action);
    --bs-btn-hover-bg: var(--s-color-white);
    --bs-btn-hover-border-color: var(--s-color-gray);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--s-color-action);
    --bs-btn-active-bg: var(--s-color-white);
    --bs-btn-active-border-color: var(--s-color-action);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--s-color-gray);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--s-color-gray);
    --bs-gradient: none;
    width: 100%;
}

.btn-check:checked+.s-btn-outline-group-select.success {
    --bs-btn-color: var(--s-color-success);
    --bs-btn-border-color: var(--s-color-success);
    --bs-btn-color: var(--s-color-success);
    --bs-btn-active-border-color: var(--s-color-success);
    --bs-btn-active-color: var(--s-color-success);
}

.btn-check:checked+.s-btn-outline-group-select.danger {
    --bs-btn-color: var(--s-color-danger);
    --bs-btn-border-color: var(--s-color-danger);
    --bs-btn-color: var(--s-color-danger);
    --bs-btn-active-border-color: var(--s-color-danger);
    --bs-btn-active-color: var(--s-color-danger);
}

.s-btn-toggle {
    --bs-btn-color: var(--s-color-gray-dark);
    --bs-btn-bg: var(--s-color-white);
    --bs-btn-border-color: var(--s-color-gray-dark);
}

.btn-check:checked+.s-btn-toggle {
    color: var(--s-color-white);
    background-color: var(--s-color-action);
    border-color: var(--s-color-action);
}

.s-btn-sidebar {
    --bs-btn-color: var(--s-color-white);
    --bs-btn-border-color: var(--s-color-dark);
    --bs-btn-hover-color: var(--s-color-white);
    --bs-btn-hover-bg: var(--s-color-accent);
    --bs-btn-hover-border-color: var(--s-color-accent);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--s-color-white);
    --bs-btn-active-bg: var(--s-color-accent);
    --bs-btn-active-border-color: var(--s-color-accent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.s-text-xs {
    font-size: 0.7rem;
}

.s-text-sm {
    font-size: 0.75rem;
}

.s-text-md {
    font-size: 0.875rem;
}

.s-text-lg {
    font-size: 1rem;
}

.s-text-xl {
    font-size: 1.125rem;
}

.s-text-underline {
    text-decoration: underline;
}

.s-modal-title {
    font-size: 1rem;
}

.s-form-label {
    font-size: 0.75rem;
}

.form-label:has(+ input[required])::after,
.form-label:has(+ input[required=""])::after,
.form-label:has(+ div input[required])::after,
.form-label:has(+ div input[required=""])::after,
.form-label:has(+ select[required])::after,
.form-label:has(+ select[required=""])::after,
.form-label:has(+ div select[required])::after,
.form-label:has(+ div select[required=""])::after,
.form-label:has(+ textarea[required])::after,
.form-label:has(+ textarea[required=""])::after,
.form-label:has(+ div textarea[required])::after,
.form-label:has(+ div textarea[required=""])::after,
.form-label:has(+ .form-control[required])::after,
.form-label:has(+ .form-control[required=""])::after,
.form-label:has(+ div .form-control[required])::after,
.form-label:has(+ div .form-control[required=""])::after {
    content: " *";
    color: var(--s-color-main);
    font-weight: bold;
}

.form-label:has(+ input[egisz-required])::after,
.form-label:has(+ div input[egisz-required])::after,
.form-label:has(+ select[egisz-required])::after,
.form-label:has(+ div select[egisz-required])::after,
.form-label:has(+ textarea[egisz-required])::after,
.form-label:has(+ div textarea[egisz-required])::after,
.form-label:has(+ .form-control[egisz-required])::after,
.form-label:has(+ .btn-group[egisz-required])::after  {
    content: " ЕГИСЗ" !important;
    vertical-align: top !important;
    font-weight: bold !important;
    font-size: 7px !important;
    color: var(--s-color-egisz-required) !important;
}

.form-label:has(+ input[egisz-should])::after,
.form-label:has(+ div input[egisz-should])::after,
.form-label:has(+ select[egisz-should])::after,
.form-label:has(+ div select[egisz-should])::after,
.form-label:has(+ textarea[egisz-should])::after,
.form-label:has(+ div textarea[egisz-should])::after,
.form-label:has(+ .form-control[egisz-should])::after,
.form-label:has(+ .btn-group[egisz-should])::after {
    content: " ЕГИСЗ" !important;
    vertical-align: top !important;
    font-weight: bold !important;
    font-size: 7px !important;
    color: var(--s-color-egisz-should) !important;
}

.form-label:has(+ input[egisz-could])::after,
.form-label:has(+ div input[egisz-could])::after,
.form-label:has(+ select[egisz-could])::after,
.form-label:has(+ div select[egisz-could])::after,
.form-label:has(+ textarea[egisz-could])::after,
.form-label:has(+ div textarea[egisz-could])::after,
.form-label:has(+ .form-control[egisz-could])::after,
.form-label:has(+ .btn-group[egisz-could])::after  {
    content: " ЕГИСЗ" !important;
    vertical-align: top !important;
    font-weight: bold !important;
    font-size: 7px !important;
    color: var(--s-color-egisz-could) !important;
}

.form-label:has(+ input[egisz-unable])::after,
.form-label:has(+ div input[egisz-unable])::after,
.form-label:has(+ select[egisz-unable])::after,
.form-label:has(+ div select[egisz-unable])::after,
.form-label:has(+ textarea[egisz-unable])::after,
.form-label:has(+ div textarea[egisz-unable])::after,
.form-label:has(+ .form-control[egisz-unable])::after,
.form-label:has(+ .btn-group[egisz-unable])::after  {
    content: " ЕГИСЗ" !important;
    vertical-align: top !important;
    font-weight: bold !important;
    font-size: 7px !important;
    color: var(--s-color-egisz-unable) !important;
}

.s-form-label-big {
    font-size: 0.875rem;
}

.s-form-title {
    font-weight: 500;
    font-size: 1rem;
}

.s-form-check-input:checked {
    background-color: var(--s-color-action);
    border-color: var(--s-color-action);
}

.s-text-sidebar {
    font-size: 0.6rem;
    line-height: 1;
    font-weight: 300;
}

.s-text-header {
    line-height: 34px;
}

.s-text-footer {
    font-size: 0.9rem;
    line-height: 1;
}

.s-table {
    font-size: var(--s-table-font-size);
}

.s-table-min-height {
    min-height: 150px
}

.s-table-total-count {
    display: inline-block;
    background: var(--s-table-color-dark);
    border: 1px solid #e8e8e8;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    font-size: var(--s-table-font-size);
    padding: 0.25rem .5rem;
}

.s-table thead th {
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    background-color: var(--s-table-color-dark);
}

.s-table thead th p {
    margin: 0px;
}

.s-table thead th .s-thead-lable {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.s-table tr {
    border: 1px solid #e8e8e8;
}

.table-hover>tbody>tr:hover>* {
    --bs-table-color-state: var(--bs-table-hover-color);
    --bs-table-bg-state: var(--s-table-color-hover);
}

.s-btn-column-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.1rem;
    font-size: var(--s-table-font-size);
    font-weight: 500;
    --bs-btn-color: rgba(0, 0, 0, 0.75);
    --bs-btn-border-color: var(--s-table-color-dark);
    --bs-btn-hover-color: var(--s-color-action);
    --bs-btn-hover-bg: var(--s-table-color-dark);
    --bs-btn-hover-border-color: var(--s-table-color-dark);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--s-color-action);
    --bs-btn-active-bg: var(--s-table-color-dark);
    --bs-btn-active-border-color: var(--s-table-color-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.s-btn-column-order {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: -2px;
    --bs-btn-color: rgba(0, 0, 0, .5);
    --bs-btn-border-color: var(--s-table-color-dark);
    --bs-btn-hover-color: var(--s-color-action);
    --bs-btn-hover-bg: var(--s-table-color-dark);
    --bs-btn-hover-border-color: var(--s-table-color-dark);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--s-color-action);
    --bs-btn-active-bg: var(--s-table-color-dark);
    --bs-btn-active-border-color: var(--s-table-color-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.s-btn-table-column-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    border: none;
    font-size: var(--s-table-font-size);
    --bs-btn-color: rgba(0, 0, 0, 0.75);
    --bs-btn-border-color: var(--s-table-color-dark);
    --bs-btn-hover-color: var(--s-color-accent);
    --bs-btn-hover-bg: var(--s-table-color-hover);
    --bs-btn-hover-border-color: var(--s-table-color-hover);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--s-color-accent);
    --bs-btn-active-bg: var(--s-color-white);
    --bs-btn-active-border-color: var(--s-color-white);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.s-deleted > td {
    background-color: rgba(0, 0, 0, 0.025);
    color: rgba(0, 0, 0, 0.35) ;
}

.s-deleted .s-btn-column-delete {
    color: red;
}

.s-page-link {
    font-size: var(--s-table-font-size);
    color: var(--s-color-action);
    background-color: var(--s-color-white);
}

.active>.s-page-link {
    font-size: var(--s-table-font-size);
    color: var(--s-color-white);
    background-color: var(--s-color-action);
}

.s-btn-search-actions {
    --bs-btn-color: var(--s-color-action);
    --bs-btn-bg: var(--s-color-white);
    --bs-btn-border-color: var(--s-color-white);
    --bs-btn-hover-color: var(--s-color-accent);
    --bs-btn-hover-bg: var(--s-color-white);
    --bs-btn-hover-border-color: var(--s-color-white);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--s-color-accent);
    --bs-btn-active-bg: var(--s-color-white);
    --bs-btn-active-border-color: var(--s-color-white);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.s-select-search-image {
    margin: 0px 0px 5px 5px;
    padding-left: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    transition: transform 0.3s ease;
    color: var(--s-color-gray);
    background-color: var(--s-color-white);
}

.s-select-multiple-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0.75rem;
    top: 36px;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.3s ease;
}

div.form-label ~ .s-select-multiple-arrow {
    top: 32px;
}

.s-input-clear {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 1rem;
    top: 36px;
    cursor: pointer;
}

/* для коректного отрабатывания tooltip */
.select2-hidden-accessible {
    top: 100%;
    left: 120px;
}

.s-select-multiple-arrow.open {
    transform: rotate(180deg);
}

.s-checkbox:checked {
    background-color: var(--s-color-action);
    border-color: var(--s-color-action);
}

.s-formUser-copy {
    right: 3%;
    bottom: 3.5px;
    border: 0px
}

.s-search-result-block {
    position: absolute;
    border: 1px solid var(--s-color-gray);
    border-top: none;
    margin-top: -0.1rem;
    top: 100%;
    width: calc(100% - 1.5rem);
    background-color: var(--s-color-light) !important;
    z-index: 3;
    box-shadow: 0px 0.5rem 0.5rem #0000004d;
    border-radius: 0px 0px 4px 4px;
}

.s-search-result-block.wide {
    width: 100%;
}

.s-search-result-item {
    cursor: pointer;
    font-size: .8rem;
    padding: 0.4rem .75rem;
}

.s-search-result-item:hover {
    background-color: var(--s-table-color-hover);
}

.s-accordion-button {
    padding: 0.75rem;
}

.s-accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--s-color-black);
    box-shadow: none;
}

.s-accordion-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.s-accordion-button-second {
    background-color: var(--s-color-light);
    padding: 0.75rem;
}

.s-accordion-button-second:not(.collapsed) {
    background-color: var(--s-color-light);
    color: var(--s-color-black);
    box-shadow: none;
}

.s-accordion-button-second:focus {
    outline: none !important;
    box-shadow: none !important;
}

.s-accordion-button-third {
    background-color: var(--s-color-white);
    padding: 0.75rem;
    transition: background-color 0s;
}

.s-accordion-button-third:not(.collapsed) {
    background-color: var(--s-color-white);
    color: var(--s-color-black);
    box-shadow: none;
}

.s-accordion-button-third:focus {
    outline: none !important;
    box-shadow: none !important;
}

.accordion-button::before {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.875rem;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: 0.875rem;
    transform: rotate(-90deg);
    transition: var(--bs-accordion-btn-icon-transition);
}

.accordion-button:not(.collapsed)::before {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: rotate(0deg);
}

.accordion-button::after {
    display: none;
}

.s-input-clock {
    cursor: pointer;
    right: 0.5rem;
    top: 2px;
}

.s-photo-block {
    width: 140px;
    height: 140px;
    border: 1px solid var(--s-color-gray);
    border-radius: 0.3rem;
    position: relative;
}

.photo-checkbox {
    cursor: pointer;
}

.s-photo-block.select::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid var(--s-color-action);
}

.s-photo-block.select .s-photo-actions {
    display: flex;
    background-color: transparent;
}

.s-photo-block.select:hover .s-photo-actions {
    background-color: hsla(0, 0%, 0%, 0.5);
}

.s-photo-block.select .s-photo-actions .s-photo-actions-title,
.s-photo-block.select .s-photo-actions .s-photo-actions-show,
.s-photo-block.select .s-photo-actions .x-ray-btn,
.s-photo-block.select .s-photo-actions .open-comment-btn,
.s-photo-block.select .s-photo-actions .delete-btn {
    display: none;
    z-index: auto;
}

.s-photo-block.select .s-photo-actions .s-photo-actions-actions {
    height: 100%;
    align-items: end;
}

.s-photo-block.select .s-photo-actions .d-flex.gap-1 {
    width: 100%;
}

.s-photo-block.select:hover .s-photo-actions .s-photo-actions-actions {
    height: auto;
}

.s-photo-block.select:hover .s-photo-actions .s-photo-actions-title,
.s-photo-block.select:hover .s-photo-actions .x-ray-btn,
.s-photo-block.select:hover .s-photo-actions .delete-btn,
.visit-gallery.active .s-photo-block.select:hover .s-photo-actions .open-comment-btn,
.s-photo-block.select:hover .s-photo-actions .s-photo-actions-show,
.s-photo-block.select:hover .s-photo-actions .photo-checkbox {
    display: block;
    z-index: 10;
}

.s-photo-block.select:hover .s-photo-actions .s-photo-actions-show {
    display: flex;
}

.s-photo-block-sm {
    width: 60px;
    height: 60px;
}

.upload-label {
    width: 140px;
    height: 140px;
    border: 1px solid var(--s-color-gray);
    border-radius: 0.3rem;
    position: relative;
}

.upload-label-sm {
    width: 60px;
    height: 60px;
}

.upload-actions {
    display: none;
    background-color: hsla(0, 0%, 0%, 0.5);
}

.upload-label:hover .upload-actions {
    display: flex;
}

.s-photo-block .photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.s-photo-actions {
    padding: 0.25rem;
    color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.3rem;
    background-color: hsla(0, 0%, 0%, 0.5);
}

.s-photo-block:hover .s-photo-actions {
    display: flex;
}

.s-photo-actions-title {
    max-width: 100%;
    min-height: 20%;
}

.s-photo-actions-show {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.s-photo-actions-actions {
    width: 100%;
    display: flex;
    justify-content: end;
    gap: 0.25rem;
}

/* Плавающее окно галереи */
#gallery.gallery-floating {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 560px;
    max-width: 95vw;
    height: 420px;
    max-height: 90vh;
    z-index: 1050;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    border: 1px solid var(--s-color-gray);
    display: flex;
    flex-direction: column;
    background-color: var(--s-color-white);
    overflow: hidden;
}

/* В floating-режиме вся иерархия аккордеона должна подчиняться высоте окна */
#gallery.gallery-floating > .accordion {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#gallery.gallery-floating .accordion-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#gallery .accordion-header {
    cursor: default;
}

#gallery.gallery-floating .hr-block-gallery {
    display: none;
}

#gallery.gallery-floating .btn-m-inner {
    margin: 0;
}

#gallery.gallery-floating .accordion-header {
    cursor: move;
}

/* В floating-режиме тело аккордеона должно занимать доступную высоту и скроллиться внутри */
#gallery.gallery-floating .accordion-collapse {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* важно для корректной работы overflow внутри flex */
}

#gallery.gallery-floating .gallery-actions {
    flex: 0 0 auto;
}

#gallery.gallery-floating .accordion-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#gallery.gallery-floating .accordion-button {
    background-color: transparent;
    box-shadow: none;
    border: none;
    padding-left: 0;
    padding-right: 0;
    cursor: inherit;
}

#gallery.gallery-floating .accordion-button::before {
    display: none;
}

#gallery .gallery-resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    right: 4px;
    bottom: 4px;
    cursor: se-resize;
    z-index: 5;
}

#gallery .gallery-resize-handle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-right: 2px solid var(--s-color-gray);
    border-bottom: 2px solid var(--s-color-gray);
    border-radius: 0 0 4px 0;
}

#ModalPhoto .photo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.s-video-block {
    width: 140px;
    height: 140px;
    border: 1px solid var(--s-color-gray);
    border-radius: 0.3rem;
    position: relative;
}

.s-video-block .photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.s-video-actions {
    padding: 0.25rem;
    color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.3rem;
    background-color: hsla(0, 0%, 0%, 0.5);
}

.s-video-block:hover .s-video-actions {
    display: flex;
}

.s-video-actions-title {
    max-width: 100%;
    min-height: 20%;
}

.s-video-actions-show {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.s-video-actions-actions {
    width: 100%;
    display: flex;
    justify-content: end;
    gap: 0.25rem;
}

.s-visits-info {
    max-height: 500px;
}

.s-visit-history {
    margin-left: 10px;
    border-left: 1px solid var(--s-color-gray);
}

.s-visit-history-circle {
    padding-top: .2rem;
    position: relative;
    padding-left: 10px;
}

.s-visit-history-circle::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    top: 8px;
    left: -5.5px;
    background-color: var(--s-color-white);
    border: 2px solid var(--s-color-action);
    border-radius: 50%;
    margin-right: 10px;
}

.s-visit-history-circle.active::before {
    background-color: var(--s-color-action);
    border-color: var(--s-color-action);
}

.s-visit-history-services {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 15px;
}

.s-visit-history-date {
    display: flex;
    gap: 0.5rem;
    cursor: pointer;
}

.s-visit-history-service {
    cursor: pointer;
}

.s-visit-history-date-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transition: transform 0.3s ease;
    opacity: 0.65;
}

.s-visit-history-date:not(.collapsed) .s-visit-history-date-arrow {
    transform: rotate(180deg);
}

.s-form-check-input-mini {
    width: 14px;
    height: 14px;
    border: 1px solid var(--s-color-gray-dark);
}

#Timetable {
    min-width: 100%;
    font-size: 0.875rem;
    background-color: #f5f5f5;
    user-select: none;
}

#Timetable th {
    background-color: #00474f;
    color: white;
}

#Timetable .occupied {
    cursor: pointer;
    color: black;
    background-color: var(--occupied-bg-color);
}

#Timetable .free {
    color: white;
    font-weight: bold;
    background: #95de64;
}

#Timetable .busy {
    color: #389e0d;
    font-weight: bold;
    background: #e6f7ff;
}

#Timetable .busy.odd {
    background: #bddef3;
}

#Timetable .time-slot {
    position: relative;
}

#Timetable .booked {
    background-color: var(--s-color-busy) !important;
    color: #0050b3 !important;
    font-weight: bold;
}

#Timetable .user-selected-duration {
    background: rgba(255, 0, 0, 0.1) !important;
}

#Timetable .user-selected {
    position: relative;
}

#Timetable .user-selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid red;
}

#timeSlots .ui-selecting {
    background: #69c0ff !important;
    color: black;
}

#timeSlots .ui-selecting.occupied-selecting {
    background: #4a90e2 !important;
    color: white;
}

#timeSlots .ui-selected {
    background: #b6d93f !important;
    color: black;
}

#timeSlots .ui-selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-left: 2px dashed var(--s-color-action);
    border-right: 2px dashed var(--s-color-action);
}

#timeSlots .ui-selected.occupied {
    background: #718a1e !important;
}

#timeSlots .ui-selected.occupied-selected {
    background: #8bc34a !important;
    color: white;
    border-left: 2px dashed var(--s-color-action);
    border-right: 2px dashed var(--s-color-action);
}

#Timetable, #Timetable th, #Timetable td {
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    border-collapse: collapse;
    line-height: normal;
}

#Timetable th, #Timetable td {
    cursor: pointer;
    padding: 0.25rem 0.25rem;
}

#Timetable td {
    color: #696969;
}

.appointment-timetable.mini th, .appointment-timetable.mini td  {
    padding: 0.125rem 0.125rem !important;
    font-size: 0.8rem !important;
}

.table-day-of-week {
    cursor: pointer;
    background-color: #00474f;
    color: white;
    text-align: center;
    font-size: 0.825rem;
    padding: 0.25rem;
    font-weight: 700;
}

.table-day-of-week.weekend {
    color: #ff7979 !important;
}

.table-day-of-week.active {
    background-color: var(--s-color-accent) !important;
}

.table-day-of-week:hover {
    background-color: var(--s-color-accent) !important;
}

.isShowDeleteRow {
    min-width: 180px;
}

.s-context-menu {
    display: none;
    position: fixed;
    background-color: white;
    border-radius: 4px;
    padding: 0.125rem;
    box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.75);
    z-index: 1400;
}

.s-context-menu ul {
    padding: 0;
    margin: 0;
}

.s-context-menu li {
    cursor: pointer;
    font-size: 0.875rem;
    list-style: none;
    padding: 0.25rem 0.5rem;
    margin: 0;
    border-bottom: 1px solid var(--s-color-gray);
}

.s-context-menu li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.s-context-menu ul li:last-child {
    border-bottom: 1px solid transparent;
}

.s-context-menu ul li:hover {
    background-color: var(--s-table-color-hover);
}

.s-list-group-item {
    padding: 0.125rem 0.5rem;
}

.s-list-group-item.active {
    background-color: var(--s-color-action);
    border-color: var(--s-color-action);
}

.s-vertical-text {
    writing-mode: sideways-lr;
    vertical-align: middle;
    align-items: center;
}

.s-form-control-40 {
    width: 42px;
}

.s-form-control-50 {
    width: 52px;
}

.s-form-control-narrow {
    min-height: auto;
    padding: 0.125rem;
    font-size: 12px;
    line-height: normal;
    padding-block: 0px;
    padding-inline: 0px;
}

.visit-gallery .open-comment-btn {
    display: none;
}
.visit-gallery.active .open-comment-btn {
    display: block;
}

.x-ray-btn {
    background-color: var(--s-color-gray);
    color: var(--s-color-white);
    border-radius: 1rem;
    padding: 0px 0.25rem;
    font-size: 0.675rem;
    height: 16px;
    cursor: pointer;
    font-weight: 700;
    position: relative;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

.x-ray-btn.x-ray-btn-lg {
    font-weight: 400;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    height: auto;
    border: none;
    border-radius: 0.25rem;
}

.x-ray-btn.active {
    background-color: var(--s-color-action);
    text-decoration: none;
}

.s-history-timeline {
    padding-left: 5px;
}

.s-history-timeline-inner {
    border-left: 2px solid var(--s-color-gray);
    padding-left: 0.75rem;
}

.s-history-timeline-block {
    position: relative;
    margin-top: 1rem;
}

.s-history-timeline-block:first-child {
    margin-top: 0rem;
}

.s-history-timeline-block::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    top: 0.375rem;
    left: -18px;
    background-color: var(--s-color-white);
    border: 2px solid var(--s-color-action);
    border-radius: 2rem;
    margin-right: 10px;
}

.s-history-timeline-block.active .s-history-timeline-text {
    display: none;
}

.s-history-timeline-textarea {
    min-height: 78px !important;
    margin-top: 1rem;
    display: none;
}

.s-history-timeline-block.active .s-history-timeline-textarea {
    display: flex;
}

.visit-gallery .upload-label {
    display: none
}

.visit-gallery.active .upload-label {
    display: flex
}

.visit-files {
    display: none
}

.visit-files.active {
    display: block
}

.visit-3d-scans {
    display: none
}

.visit-3d-scans.active {
    display: block
}

.visit-issued-documents {
    display: none
}

.visit-issued-documents.active {
    display: flex
}

.document:hover {
    background-color: #f7f7f7;
    transition: all 0.3s;
}

.visit-products {
    display: none
}

.visit-products.active {
    display: block
}

.visit-patient-history .delete-visit-btn {
    display: none;
}

.visit-patient-history:hover .delete-visit-btn {
    display: block;
}
.visit-patient-history .date-visit {
    display: block !important;
}

.visit-patient-history:hover .date-visit {
    display: none !important;
}

.progress.mini {
    height: 8px;
}

.s-progress-bar-success {
    background-color: var(--s-color-success);
}

.offcanvas-fullscreen {
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: 100dvw !important;
    max-height: 100dvh !important;
    z-index: 1100 !important;
}

/* Ползунок */
.s-form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--s-color-action);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -7px;
    transition: background-color 0.3s ease;
}

.s-form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--s-color-action);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

.s-form-range::-webkit-slider-thumb:active {
    background: var(--s-color-action);
}

.s-form-range::-moz-range-thumb:active {
    background: var(--s-color-action);
}

#drawXRAYZoomValue {
    width: 36px;
    min-width: 36px;
}

.drawXRAYZoomSlider {
    opacity: 0.5;
    min-width: 25%;
}

.drawXRAYZoomSlider:hover {
    opacity: 1;
}

#AppointmentScheduleLoading {
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.85);
    cursor: not-allowed;
}

.hide-appointments {
    position: absolute;
    right: -8%;
    top: 50%;
    transform:translateY(-50%);
    background-color: var(--s-color-main);
    color: var(--s-color-white);
    height: 14px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    font-size: 0.6rem;
    box-shadow: 1px 1px 4px -1px var(--s-color-black);
    z-index: 9;
}

.s-form-control-xs {
    min-height: calc(0.125em + .125rem + calc(var(--bs-border-width) * 2));
    padding: .125rem .25rem;
}

.s-nav-underline {
    --bs-nav-underline-link-active-color: var(--s-color-action);
}

.s-nav {
    --bs-nav-link-color: var(--s-color-gray-dark);
    --bs-nav-link-hover-color: var(--s-color-action);
    --bs-nav-link-disabled-color: var(--s-color-gray);
}

.s-nav-underline .nav-link.active {
    font-weight: normal;
    color: var(--s-color-action);
    border-bottom-color: var(--s-color-action);
}

.legend-item {
    display: flex;
    cursor: pointer;
    transition: all 0.3s;
}

.legend-info {
    width: 100%;
    height: 100%;
    border: 0.1px solid var(--s-color-gray);
    border-radius: 0px 5px 5px 0px;
}

.legend-item.active .legend-info {
    border-top: 0.1px solid var(--s-color-main);
    border-right: 0.1px solid var(--s-color-main);
    border-bottom: 0.1px solid var(--s-color-main);
    border-left: 0.1px solid var(--s-color-gray);
}

.legend-color {
    flex-grow: 1;
    min-width: 24px; 
    min-height: 100%;
    border: 0.1px solid var(--s-color-gray); 
    border-radius: 5px 0px 0px 5px; 
}

.legend-item.active .legend-color {
    border-top: 0.1px solid var(--s-color-main);
    border-right: 0.1px solid var(--s-color-gray);
    border-bottom: 0.1px solid var(--s-color-main);
    border-left: 0.1px solid var(--s-color-main);
}

.passport:has(.delete-passport:hover) {
    background-color: #fff5f5;
    border-radius: 5px;
}

.address:has(.delete-address:hover) {
    background-color: #fff5f5;
    border-radius: 5px;
}

.phone:has(.delete-phone:hover) {
    background-color: #fff5f5;
    border-radius: 5px;
}

.representative:has(.delete-representative:hover) *:not(.btn, .btn *, .s-accordion-button-second, .s-bg-light) {
    background-color: #fff5f5 !important;
    transition: none;
}

.w-min-content {
    width: min-content !important;
}

.visit-patient-history.s-busy::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 6px;
    background-color: var(--s-color-danger);
    z-index: 10;
    animation: pulse 3s infinite;
}

.s-border-danger-blink {
    border: 2px solid var(--s-color-danger);
    animation: blink-border 1s infinite;
}

@keyframes blink-border {
    0%,
    100% {
        border-color: var(--s-color-danger);
    }
    50% {
        border-color: transparent;
    }
}

.form-control-xs {
    min-height: calc(0.9em + .15rem + calc(var(--bs-border-width) * 2));
    padding: .1rem .2rem;
    font-size: .7rem;
    border-radius: var(--bs-border-radius-sm);
}

input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}

/* Стили для input с красным placeholder */
input.s-input-placeholder-red::-webkit-input-placeholder { /* Chrome, Safari, Opera */
    color: rgba(255, 0, 0, 0.3);
}
input.s-input-placeholder-red::-moz-placeholder { /* Firefox 19+ */
    color: rgba(255, 0, 0, 0.3);
    opacity: 1; /* чтобы убрать прозрачность по умолчанию */
}
input.s-input-placeholder-red:-ms-input-placeholder { /* IE 10+ */
    color: rgba(255, 0, 0, 0.3);
}
input.s-input-placeholder-red::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(255, 0, 0, 0.3);
}

input.s-input-placeholder-red[disabled]::-webkit-input-placeholder { /* Chrome, Safari, Opera */
    color: rgba(0, 0, 0, 0);
}
input.s-input-placeholder-red[disabled]::-moz-placeholder { /* Firefox 19+ */
    color: rgba(0, 0, 0, 0);
    opacity: 1; /* чтобы убрать прозрачность по умолчанию */
}
input.s-input-placeholder-red[disabled]:-ms-input-placeholder { /* IE 10+ */
    color: rgba(0, 0, 0, 0);
}
input.s-input-placeholder-red[disabled]::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(0, 0, 0, 0);
}

/* Стили для textarea с красным placeholder */
textarea.s-textarea-placeholder-red::-webkit-input-placeholder { /* Chrome, Safari, Opera */
    color: rgba(255, 0, 0, 0.3);
}
textarea.s-textarea-placeholder-red::-moz-placeholder { /* Firefox 19+ */
    color: rgba(255, 0, 0, 0.3);
    opacity: 1; /* чтобы убрать прозрачность по умолчанию */
}
textarea.s-textarea-placeholder-red:-ms-input-placeholder { /* IE 10+ */
    color: rgba(255, 0, 0, 0.3);
}
textarea.s-textarea-placeholder-red::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(255, 0, 0, 0.3);
}

textarea.s-textarea-placeholder-red[disabled]::-webkit-input-placeholder { /* Chrome, Safari, Opera */
    color: rgba(0, 0, 0, 0);
}
textarea.s-textarea-placeholder-red[disabled]::-moz-placeholder { /* Firefox 19+ */
    color: rgba(0, 0, 0, 0);
    opacity: 1; /* чтобы убрать прозрачность по умолчанию */
}
textarea.s-textarea-placeholder-red[disabled]:-ms-input-placeholder { /* IE 10+ */
    color: rgba(0, 0, 0, 0);
}
textarea.s-textarea-placeholder-red[disabled]::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(0, 0, 0, 0);
}

/* Стили для select с красным placeholder */
.s-block-select-placeholder-red .select2-selection__placeholder {
    color: rgba(255, 0, 0, 0.3) !important;
}
.s-block-select-placeholder-red[disabled] .select2-selection__placeholder {
    color: rgba(0, 0, 0, 0) !important;
}

.s-block-select-placeholder-red .select2-search__field::-webkit-input-placeholder  {
    color: rgba(255, 0, 0, 0.3) !important;
}
.s-block-select-placeholder-red .select2-search__field::-moz-placeholder {
    color: rgba(255, 0, 0, 0.3) !important;
}
.s-block-select-placeholder-red .select2-search__field::-ms-input-placeholder {
    color: rgba(255, 0, 0, 0.3) !important;
}
.s-block-select-placeholder-red[disabled] .select2-search__field::-webkit-input-placeholder  {
    color: rgba(0, 0, 0, 0) !important;
}
.s-block-select-placeholder-red[disabled] .select2-search__field::-moz-placeholder {
    color: rgba(0, 0, 0, 0) !important;
}
.s-block-select-placeholder-red[disabled] .select2-search__field::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0) !important;
}

.radio-placeholder-block .old-select{
    background: rgba(255, 0, 0, 0.3);
}

.corset-measurements-img {
    width: 390px;
    height: 375px;
    user-select: none;
}

.corset-measurements .circle1-block {
    position: absolute;
    top: 108px;
    left: 26px;
}

.corset-measurements .circle2-block {
    position: absolute;
    top: 149px;
    left: 26px;
}

.corset-measurements .circle3-block {
    position: absolute;
    top: 229px;
    left: 26px;
}

.corset-measurements .circle4-block {
    position: absolute;
    top: 264px;
    left: 26px;
}

.corset-measurements .circle5-block {
    position: absolute;
    top: 317px;
    left: 26px;
}

.corset-measurements .fas1-block {
    position: absolute;
    top: 108px;
    left: 112px;
}

.corset-measurements .fas2-block {
    position: absolute;
    top: 149px;
    left: 112px;
}

.corset-measurements .fas3-block {
    position: absolute;
    top: 229px;
    left: 112px;
}

.corset-measurements .fas4-block {
    position: absolute;
    top: 264px;
    left: 112px;
}

.corset-measurements .fas5-block {
    position: absolute;
    top: 317px;
    left: 112px;
}

.circle-help-text {
    position: absolute;
    top: 10px;
    left: 36px;
    user-select: none;
}

.fas-help-text {
    position: absolute;
    top: 66px;
    left: 121px;
    user-select: none;
}

.corset-measurements input {
    text-align: center;
}

.step-circle {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
    border-radius: 100px;
    border: 1px solid var(--s-color-main);
    color: var(--s-color-main);
    margin-right: 0.5rem;
}

.circle-success {
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
    border-radius: 100px;
    border: 1px solid var(--s-color-success);
    background-color: var(--s-color-success);
    color: var(--s-color-white);
}

.step-info .title {
    color: var(--s-color-gray-dark);
}

[step].active .step-info .title {
    color: var(--s-color-black);
}

.circle-success i {
    font-size: 12px;
}

.steps-line {
    width: 100%;
    min-width: 5px;
    min-height: 1px;
    max-height: 1px;
    background-color: var(--s-color-main);
}

.product-step.ready .step-circle {
    border-color: var(--s-color-success);
    color: var(--s-color-white);
}

.product-step.ready .steps-line {
    background-color: var(--s-color-success);
}

.product-step.ready .step-circle .bi-check-lg::before {
    color: var(--s-color-success);
}

[step].active .step-circle {
    background-color: var(--s-color-main);
    color: var(--s-color-white);
}

[step].active .title {
    font-weight: 500;
}

[step] .ready {
    display: none;
}

[step].ready .ready {
    display: block;
}

[step] .step-number {
    display: block;
}

[step].ready .step-number {
    display: none;
}

/* ПЕРЕОПРЕДЕЛЕНИЕ СТИЛЕЙ ИСПОЛЬЗУМЫХ БИБЛИОТЕК */
/* ПЕРЕОПРЕДЕЛЕНИЕ СТИЛЕЙ ИСПОЛЬЗУМЫХ БИБЛИОТЕК */
/* ПЕРЕОПРЕДЕЛЕНИЕ СТИЛЕЙ ИСПОЛЬЗУМЫХ БИБЛИОТЕК */

/* boosrtap */
.form-control::placeholder {
    color: var(--s-color-gray);
}

.form-check-input:disabled:not(:checked) {
    background-color: var(--s-color-gray);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--s-color-action);
}

/* boosrtap */

/* select2 */
.select2-container {
    font-size: .875rem;
}

.select2-results__option {
    padding: 3px 6px
}

.select2-container--default .select2-selection--multiple {
    border: var(--bs-border-width) solid var(--bs-border-color);
    margin: 0px;
}

.select2-selection.select2-selection--multiple {
    cursor: pointer;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: var(--bs-border-width) solid var(--bs-border-color);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    font-size: 0.875rem;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: rgb(233, 236, 239);
    pointer-events: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: 0.875rem;
    background-color: var(--s-color-light);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-top: -1px;
}

.select2-container--default .select2-selection--single {
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: calc(1.5em + .5rem + calc(var(--bs-border-width)* 2));
    padding: 0.25rem;
    font-size: .875rem;
    border-radius: var(--bs-border-radius-sm);
    border: var(--bs-border-width) solid var(--bs-border-color);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    font-size: 0.875rem;
}

.select2-container .select2-selection--single {
    height: 32px;
}

.select2-selection__arrow {
    display: none;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--s-color-accent);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: .875rem;
}

.select2-container--default .select2-search--inline .select2-search__field {
    font-size: .875rem;
    font-family: system-ui;
    opacity: 0.75;
    margin-left: 0.5rem;
}

.select2-selection__placeholder {
    pointer-events: none;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    height: 26px;
    color: rgba(108, 117, 125) 
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--bs-secondary-bg);
}

.select2-results__message {
    color: #999;
}
/* select2 */

/* jquery UI */
#ui-datepicker-div {
    z-index: 1200 !important;
}

.ui-widget-content .ui-state-active {
    border: 1px solid var(--s-color-accent);
    background: var(--s-color-accent);
}

.ui-widget-content .ui-state-highlight {
    border: 1px solid var(--s-color-main);
    background: var(--s-color-main);
    color: var(--s-color-white);
}

.ui-datepicker.ui-datepicker-header.hide-calendar ~ .ui-datepicker-calendar {
    display: none !important;
}

.ui-state-disabled {
    opacity: 0.75;
}

.ui-sortable-handle {
    cursor: pointer;
}
/* jquery UI */

/* jstree jquery */
.jstree [aria-level="1"] {
    font-weight: bold;
}

.jstree-default .jstree-clicked {
    background: var(--s-color-gray);
}

.jstree-default .jstree-hovered {
    background: var(--s-table-color-hover);
}
/* jstree jquery */

/* ПЕРЕОПРЕДЕЛЕНИЕ СТИЛЕЙ ИСПОЛЬЗУМЫХ БИБЛИОТЕК */
/* ПЕРЕОПРЕДЕЛЕНИЕ СТИЛЕЙ ИСПОЛЬЗУМЫХ БИБЛИОТЕК */
/* ПЕРЕОПРЕДЕЛЕНИЕ СТИЛЕЙ ИСПОЛЬЗУМЫХ БИБЛИОТЕК */

@media (max-width: 1200px) {
    .s-visits-info {
        max-height: 70dvh;
    }

    .s-form-title {
        font-size: 0.825rem;
    }

    .s-form-label {
        font-size: 0.7rem;
    }

    .s-text-lg {
        font-size: 0.875rem;
    }

    .s-text-md {
        font-size: 0.8rem;
    }

    .s-text-xs {
        font-size: 0.65rem;
    }

    .s-text-sm {
        font-size: 0.7rem;
    }

    .s-photo-block {
        width: 100px;
        height: 100px;
    }

    .s-video-block {
        width: 100px;
        height: 100px;
    }

    .upload-label {
        width: 100px;
        height: 100px;
    }

    .upload-label-sm {
        width: 60px;
        height: 60px;
    }
}

/* Стили для палитры цветов */
/* Стили для цветового пикера */
.color-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.selected-color {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.selected-color:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.color-palette-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
    z-index: 1000;
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: max-content;
}

.color-palette-dropdown.show {
    display: grid;
}

.color-option {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(0,0,0,0.1);
}

.color-option:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.measurement-block {
    max-width: 500px;
}

.measurement-block.mini {
    max-width: 350px;
}

.svg-circle.active {
    stroke: #ff0055;
    stroke-width: 6;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

.egisz-required {
    color: var(--s-color-egisz-required);
    vertical-align: top;
    font-weight: bold;
    font-size: 7px;
}

.egisz-should {
    color: var(--s-color-egisz-should);
    vertical-align: top;
    font-weight: bold;
    font-size: 7px;
}

.egisz-could {
    color: var(--s-color-egisz-could);
    vertical-align: top;
    font-weight: bold;
    font-size: 7px;
}

.egisz-unable {
    color: var(--s-color-egisz-unable);
    vertical-align: top;
    font-weight: bold;
    font-size: 7px;
}

#helpOffcanvas {
    --bs-offcanvas-width: 100vw;
}

@media (min-width: 992px) {
    #helpOffcanvas {
        --bs-offcanvas-width: 50vw;
    }
}