.password-rules-container {
    background: linear-gradient(135deg, #f9f9f9, #f1faff);
    border-left: 5px solid var(--bs-orange);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
}

    .password-rules-container ul li {
        transition: all 0.3s ease;
    }

        .password-rules-container ul li.valid i {
            color: #198754;
            transform: scale(1.2);
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .password-rules-container ul li.invalid i {
            color: #6c757d;
            transition: color 0.3s ease;
        }

    .password-rules-container .progress {
        height: 10px;
        border-radius: 10px;
        background-color: #e9ecef;
        overflow: hidden;
    }

    .password-rules-container .progress-bar {
        height: 100%;
        border-radius: 10px;
        background: linear-gradient(90deg,#0d6efd,#20c997);
        transition: width 0.5s ease, background 0.5s ease;
    }



.hide-scrollbar {
    -ms-overflow-style: none; /* IE и Edge */
    scrollbar-width: none; /* Firefox */
}

    .hide-scrollbar::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }


.form-floating .input-prefix {
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    pointer-events: none;
    color: #495057;
}

.form-floating .form-control.with-prefix {
    padding-left: 3.5rem; /* место для +996 */
}

/* Чтобы ValidationMessage не ломал высоту */
.form-floating .validation-message {
    --position: absolute;
    --left: 100px;
    --top: 5px;
}


.camera-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* затемнение фона */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    .camera-container video {
        max-width: 90vw;
        max-height: 60vh;
        border: 4px solid white;
        border-radius: 8px;
    }

    .camera-container .overlay {
        position: absolute;
        border: 3px dashed lime;
        width: 220px;
        height: 220px;
        box-sizing: border-box;
    }

.bottom-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

    .back-btn,
    .flash-btn,
    .bottom-buttons .btn {
        background: white;
        border: none;
        padding: 10px 15px;
        font-size: 1.2rem;
        border-radius: 5px;
        cursor: pointer;
    }







.card:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    background-color: lightgrey;
}






.title {
    margin-top: 10px;
    font-weight: bold;
    font-size: 20px;
}
.section {
    padding: 1px;
    border-radius: 5px;
    background: #ecf0f1;
}

.custom-tooltip .tooltip-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    z-index: 10;
    white-space: nowrap;
    min-width: 200px;
}

.custom-tooltip:hover .tooltip-box {
    display: block;
}





.access-denied {
    text-align: center;
    padding: 20px;
    border: 1px solid #f44336;
    border-radius: 12px;
    background-color: #ffebee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 50px auto;
}


/* -------------- OnlineService -----------------*/
.online-circle {
    top: 6px;
    position: relative;
    color: transparent;
    width: 12px;
    height: 12px;
    background-color: #009688;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.6), 0 0 20px rgba(76, 175, 80, 0.4);
    animation: pulse 1.5s infinite; /* Анимация пульсации */
}

.offline-circle {
    top: 6px;
    position: relative;
    color: transparent;
    width: 12px;
    height: 12px;
    background-color: #f44336;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.6), 0 0 20px rgba(244, 67, 54, 0.4);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.6), 0 0 20px rgba(76, 175, 80, 0.4);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 15px rgba(76, 175, 80, 0.8), 0 0 30px rgba(76, 175, 80, 0.5);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.6), 0 0 20px rgba(76, 175, 80, 0.4);
    }
}
/* -------------- OnlineService -----------------*/

details summary {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    font-weight: bold;
    cursor: pointer;
    color: orangered;
}

    details summary::before {
        content: '►'; /* Символ стрелки вправо */
        display: inline-block;
        margin-right: 10px;
        transition: transform 0.3s ease;
    }

details[open] summary::before {
    content: '▼'; /* Символ стрелки вниз */
}

summary:hover {
    color: #007BFF;
}



.input-label {
    position: absolute;
    top: 6px;
    left: 50px;
    color: gray;
    pointer-events: none;
}

.fixed-width {
    width: 150px;
}

.selectLastEdit {
    width: 180px;
}

.cardLastEdit-container {
    position: relative;
    --top: 170px;
    --right: -730px;
    --transform: translateX(-50%);
    --width: 270px;
}

.styleEmployer {
    margin-left: 185px;
}

.cardFiles {
    transition: all 0.2s ease;
    box-shadow: 0px 1px 5px -3px #424242
}

.cards {
    transition: all 0.2s ease;
    box-shadow: 0px 5px 5px -3px #424242;
    width: 97px;
}

.cardlink {
    width: 180px;
    height: 200px;
    padding: 10px;
    display: inline-block;
    text-align: center;
    border: 1px solid #CCC;
    border-radius: 5px;
    vertical-align: top;
    margin: 10px;
    background-color: antiquewhite;
}

    .cardlink img {
        width: 128px;
        height: 128px;
        padding-bottom: 10px;
    }

.cards:hover {
    box-shadow: 0px 9px 5px -3px #424242;
}

.cardlink2 {
    color: black;
    font-size: 20px;
    font-weight: 400;
    width: 250px;
    height: 45px;
    padding: 5px;
    display: inline-block;
    text-align: center;
    border: 1px solid #CCC;
    border-radius: 5px;
    vertical-align: top;
    background-color: #dee2e6;
}

.circle {
    display: inline-block;
    width: 70px;
    height: 45px;
    line-height: 40px;
    border-radius: 25%;
    text-align: center;
    background-color: #2c3e50;
    border: 3px solid rgba(0, 0, 0, .2);
    position: absolute;
    color: #2196F3;
    right: 50px;
    font-weight: 600;
    text-shadow: rgb(0 0 0) 1px 1px 1px;
}

.labelName {
    display: inline-block;
    position: absolute;
    color: #FF5722;
    font-weight: 600;
    text-shadow: rgb(0 0 0) 1px 1px 1px;
}

.iconDanger {
    font-size: 4em;
    color: #d9534f;
    margin-bottom: 20px;
}

.flex-grow-1-5 {
    flex: 0.3;
}

.dropdown-menu-right {
    left: 35px; /* Отмена выравнивания по умолчанию */
    top: 0;
}

.exclamation::before {
    content: "!";
    color: red;
    font-size: 30px;
    position: absolute;
    left: -12px; /* Регулируйте отступ от input */
    top: 50%;
    transform: translateY(-50%);
    animation: bounce 0.2s infinite alternate;
    text-shadow: 0 0 6px #FFEB3B; /* Добавление тени */
}

@keyframes bounce {
    from {
        transform: translateY(-50%) scale(1);
    }

    to {
        transform: translateY(-50%) scale(1.2);
    }
}

.form-control-xs {
    padding: 4px; /* Уменьшаем внутренние отступы */
    font-size: 1rem; /* Уменьшаем размер шрифта */
    --line-height: 1; /* Уменьшаем высоту строки */
}

.custom-select {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E %3Cg%3E %3Cpath transform='matrix(1 0 0 -1 0 512)' d='M509.158,275.253L261.692,53.387c-3.234-2.918-8.149-2.918-11.383,0L2.842,275.253C1.033,276.866,0,279.179,0,281.602 v85.333v85.333c0,3.362,1.98,6.417,5.052,7.791c3.072,1.365,6.673,0.811,9.173-1.442L256,241.854l241.775,216.764 c1.596,1.434,3.627,2.185,5.692,2.185c1.178,0,2.364-0.247,3.482-0.742c3.072-1.374,5.052-4.429,5.052-7.791v-85.333v-85.333 C512,279.179,510.968,276.866,509.158,275.253z M494.933,347.821L261.692,138.72c-3.234-2.918-8.149-2.918-11.383,0 L17.067,347.821v-62.413L256,71.187l238.933,214.221V347.821z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(1.25rem - 0.5px - 15px) center;
    background-size: 16px 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.modal-content {
    background-color: #F0F0F0;
    box-shadow: 0 0 0 80em #00000091, 0 0 0 0.2em #dedede;
}

.modal-header {
    background-color: #2C3E50;
    color: white;
}

.modal-footer {
    background: #2e3c53;
    color: white;
}

.headerTitle {
    position: absolute;
    margin-top: -26px;
    margin-left: 0px;
    padding-left: 10px;
    padding-right: 85px;
    z-index: 2;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: var(--bs-dark-bg-subtle);
    border-radius: 4px;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 1px #000000;
    box-shadow: 0px -5px 5px -3px #000000;
}

.detailTitle {
    position: absolute;
    margin-top: 4px;
    margin-left: 0px;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 2;
    font-size: 20px;
    font-weight: bold;
    color: #0069bd;
    background-color: var(--bs-dark-bg-subtle);
    border-radius: 4px;
    transition: all 0.2s ease;
    --text-shadow: 1px 1px 1px #4a4a4a;
    box-shadow: 0px -5px 5px -3px #424242;
}

.serviceTitle {
    margin-top: -150px;
}

.cardHead {
    color: white;
    position: relative;
    background-color: var(--bs-dark-bg-subtle);
    border-radius: 5px;
    transition: all 0.2s ease;
    box-shadow: 0px 1px 5px -3px #424242;
    margin-bottom: 5px;
}

.cardDetails {
    margin-top: 30px;
    color: #333333;
    position: relative;
    background-color: var(--bs-dark-bg-subtle);
    border-radius: 5px;
    transition: all 0.2s ease;
    box-shadow: 0px 1px 5px -3px #424242;
}

.button-container {
    position: absolute;
    top: 10px;
    right: 0px;
    transform: translateX(-50%);
    width: 50px;
}

.cardInfo-container {
    position: relative;
    top: -10px;
    right: 0px;
    z-index: 2;
}

.cardQR-container {
    position: absolute;
    top: -110px;
    left: 1175px;
    transform: translateX(-50%);
}

.checkbox-item {
    display: flex;
    align-items: center;
    padding: 6px;
    background-color: #f8f9fa;
    border-radius: 2px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    user-select: none;
    border-radius: 5px;
}

    .checkbox-item:hover {
        background-color: #fff3cd; /* Изменение фона при наведении */
    }

.myCheckbox-item:hover {
    background-color: #e2e6ea;
}

.icon {
    margin-right: 10px;
    color: #495057;
}

.label {
    flex-grow: 1; /* Чтобы надпись занимала всю доступную ширину */
}

.cardFooter {
    background-color: #607d8b69;
    border: 3px solid #f8f9fa;
    transition: all 0.2s ease;
    box-shadow: 0px 1px 5px -3px #424242
}

.crud-container {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 10px; /* Расстояние между секциями */
}

.printBtn {
    position: relative;
    top: 7px;
    z-index: 2;
    grid-column: 2; /* Размещаем в правом столбце */
    display: flex;
    justify-content: flex-end; /* Выровнять вправо */
    gap: 10px; /* Расстояние между кнопками */
    padding-right: 10px;
}

.crud-page-view {
    grid-column: 1; /* Размещаем в левом столбце */
}

.sort {
    cursor: pointer;
}

.table {
    --bs-table-bg: transparent !important;

}
tr.selected-row {
    background-color: #6ca7ff !important;
}

.checked-row {
    background-color: #fff3cd;
}

.expired-row {
    background-color: #f4433694;
}

.toast-container {
    z-index: 20000 !important;
    animation: toast 0.5s ease-out;
}

@keyframes toast {
    0% {
        transform: translateX(100px)
    }

    100% {
        transform: translateY(0);
    }
}

.toast-body {
    background: var(--bs-toast-border-color);
}

.spinner {
    border: 8px solid silver;
    border-top: 8px solid #607D8B;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    animation: spin 700ms linear infinite;
    position: initial;
    background: var(--bs-table-accent-bg);
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}


.progress-bar {
    position: relative;
    width: 100%;
    height: 10px;
    background-color: #ECEFF1;
    border-radius: 5px;
    overflow: hidden;
}

    .progress-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        width: 0%;
        background: repeating-linear-gradient( 135deg, #CFD8DC 0px, #CFD8DC 12px, #607D8B 12px, #607D8B 24px );
        background-size: 40px 40px;
        border-radius: 5px;
        animation: moveStripes 1.2s linear infinite, fillProgress 5s ease-in-out infinite;
    }

@keyframes moveStripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 0;
    }
}

@keyframes fillProgress {
    0% {
        width: 0%;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}




.page-content {
    --left: 260px;
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: start;
    margin-top: -60px;
}

.page-footer {
    color: white;
    left: 250px;
    width: 88%;
    bottom: 0;
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 58px;
    background-color: #2C3E50;
    padding: 10px;
    z-index: 1;
    border: 1px solid #050e12;
    padding-left: 10px;
    padding-right: 10px;
    text-shadow: 1px 1px 1px #000000;
}
.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg); /* если нужно, чтобы читалось сверху вниз */
}

.notification {
    display: inline-block;
    transition: opacity 1s ease-in-out;
    opacity: 0;
    animation: fade-in-out 5s infinite;
}

.ticker {
    display: inline-block;
    animation: slideInFromRight 5s infinite;
}

@keyframes fade-in-out {
    0%, 100% {
        opacity: 0;
    }

    10%, 90% {
        opacity: 1;
    }
}

.crud-container-fluid {
    position: fixed;
    z-index: 2;
    width: 100%;
    margin-top: -18px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #000000;
    padding-left: 10px;
    box-shadow: 0px 2px 0px 0px var(--bs-warning-text-emphasis);
    background-color: var(--bs-gray-800);
}

.table-container {
    margin-top: 0px;
    max-height: 730px;
    max-width: 1225px;
    min-width: 900px;
}

.table-container-medium {
    margin-top: 0px;
    max-height: 730px;
    max-width: 1225px;
    min-width: 700px;
}

.table-container-mini {
    margin-top: 0px;
    max-height: 730px;
    max-width: 1225px;
    min-width: 250px;
}

.table-solid {
    margin-right: 5px;
    margin-top: 45px;
    min-height: 732px;
    max-height: 732px;
    overflow: auto;
    --position: relative;
    border: solid #ccc 1px;
    border-radius: 0.2rem;
    background-color: var(--bs-secondary-bg-subtle);
}

.Table-LastEdit {
    min-height: 230px;
    max-height: 230px;
    overflow-y: auto;
    margin-top: 0px;
    height: 230px;
}
.table-solid-two {
    margin-top: 85px;
    min-height: 722px;
    max-height: 722px;
    overflow: auto;
    position: relative;
    border: solid #ccc 1px;
    border-radius: 0.2rem;
    background-color: #fff3e0;
}

.table-solid-modal {
    margin-top: 5px;
    min-height: 210px;
    max-height: 300px;
    overflow: auto;
    position: relative;
    border-radius: 5px;
    background-color: aliceblue;
}

.table-solid-mini {
    max-height: 230px;
    overflow-y: auto;
    margin-top: 5px;
    height: 230px;
    overflow: auto;
    position: relative;
    border-radius: 0.2rem;
    background-color: #fff3e0;
}

.thead-primary {
    background-color: var(--bs-dark-border-subtle);
    background-position: 0 0, 0.2em 0.2em;
    background-size: 0.4em 0.4em;
    color: #f0f0f0;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 3px solid #333333;
    position: sticky;
    top: 0;
    z-index: 1;
}

.bg-gray {
    background-color: var(--bs-gray-500);
}
.bg-deepblue {
    background-color: #4c6370;
}
.bg-blue {
    background-color: #5f8093;
}
.bg-yellow {
    background-color: #fff27e;
}
.bg-light-yellow {
    background-color: #f3f0d7;
}
.bg-red {
    background-color: #fba19b;
}
.bg-violet {
    background-color: var(--bs-purple);
}
.bg-green {
    background-color: #8bc34a;
}

.text-violet {
    color: var(--bs-purple);
}

.btn-info {
    background-color: #1c9db7;
    color: white;
    border: none;
}
    .btn-info:hover {
        background-color: #007a93;
        color: white;
    }

    .btn-info:disabled {
        background-color: #5da1af;
        color: #f0f0f0;
    }

    .btn-info:active {
        background-color: #00b0d3 !important;
        color: white !important;
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125) !important;
    }

.btn-purple {
    background-color: var(--bs-purple);
    color: white;
    border: none;
}

    .btn-purple:hover {
        background-color: var(--bs-purple-dark, #5a32a3);
        color: white;
    }

    .btn-purple:disabled {
        background-color: var(--bs-purple-300, #b89edc);
        color: #f0f0f0;
    }
    .btn-purple:active {
        background-color: var(--bs-purple-dark, #5a32a3) !important;
        color: white !important;
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125) !important;
    }

/*.btn-warning {
    background-color: var(--bs-warning);
    color: white;
    border: none;
}

    .btn-warning:hover {
        background-color: var(--bs-warning-dark, #d9a300);
        color: white;
    }

    .btn-warning:disabled {
        background-color: var(--bs-warning-300, #cdbe90);
        color: #f0f0f0;
    }

    .btn-warning:active {
        background-color: var(--bs-warning-dark, #d9a300) !important;
        color: white !important;
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125) !important;
    }*/


.cardStackItems {
    font-size: large;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    transition: all 0.2s ease;
    box-shadow: 0px 1px 5px -3px #424242
}

.mySidebar {
    background: linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%), linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%) 0.1875em 0.1875em, radial-gradient(at 50% 0, #484847, #090909);
    background-size: 0.375em 0.375em, 0.375em 0.375em, 100% 100%;
    height: 100vh;
    position: sticky;
    top: 0;
}

.myInput {
    position: absolute;
    cursor: pointer;
}

    .myInput:checked:before {
        content: "";
        top: -5px;
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        border: 4px solid #9E9E9E;
        background-color: var(--bs-secondary-bg-subtle);
        transition: all 0.2s linear;
    }

    .myInput:before {
        content: "";
        top: -5px;
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        border: 4px solid #9E9E9E;
        border-radius: 10px;
        background-color: var(--bs-secondary-bg-subtle);
    }

    .myInput:after {
        content: "";
        display: block;
        position: absolute;
        width: 12px;
        height: 21px;
        border: solid rgb(5 23 40 / 7%); /* Серый цвет с низкой прозрачностью */
        border-width: 0 5px 5px 0;
        transform: rotate(45deg);
        top: 2px;
        left: 14px;
        transition: all 0.2s linear;
    }

    .myInput:checked:after {
        content: "";
        display: block;
        position: absolute;
        width: 12px;
        height: 21px;
        border: solid var(--bs-purple);
        border-width: 0 5px 5px 0;
        transform: rotate(45deg);
        top: 2px;
        left: 14px;
    }



.hidden {
    display: none;
}

/* Hide the default checkbox */
.myCheckbox-container input[type="checkbox"] {
    display: none;
}

/* Create a custom checkbox */
.myCheckbox, .myCheckbox-big {
    margin-top: 7px;
    margin-left: 7px;
    width: 18px;
    height: 18px;
    background-color: #eee;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

    .myCheckbox:before {
        content: '';
        position: absolute;
        left: 12px;
        top: 12px;
        width: 16px;
        height: 16px;
        border: solid #fff;
        border-width: 0 4px 4px 0;
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity 0.3s;
    }

.myCheckbox-container input[type="checkbox"]:checked + .custom-checkbox {
    background-color: #4caf50;
}

    .myCheckbox-container input[type="checkbox"]:checked + .custom-checkbox:before {
        opacity: 1;
    }

.myCheckbox:hover {
    background-color: #ddd;
}

.myCheckbox:active {
    background-color: #ccc;
}





.btn-xs {
    padding: .25rem .5rem; 
    font-size: .75rem; 
    line-height: 1;
    border-radius: .2rem;
}

.dropdown-menu {
    border: 2px solid orange;
    border-radius: 5px;
    padding: 5px;
}

.dropdown-item {
    margin-bottom: 3px;
    padding: 5px;
    user-select: none;
}

    .dropdown-item:hover {
        background-color: #ffedcc;
    }

.DropDownULStyle {
    max-height: 300px;
    position: absolute;
    z-index: 99999;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.DropDownLIStyle {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    list-style: square inside;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 0px;
}

    .pagination button {
        margin: 0 0.25rem;
        padding: 5px 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #f8f9fa;
        cursor: pointer;
    }

        .pagination button.active {
            background-color: #007bff;
            color: white;
        }

        .pagination button:disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }


.OnRight {
    font-weight: bold;
    text-align: right;
    display: block;
}

.keywords {
    color: gray; /* Цвет для ключевых слов */
    font-weight: bold; /* Жирный шрифт */
    text-align: center; /* Центрирование текста */
    display: block; /* Делаем элемент блочным для центрирования */
}

.scanning-started {
    color: orange; /* Цвет для сообщения о начале сканирования */
}

.scanned-files {
    color: blue; /* Цвет для сообщения об отсканированных файлах */
}

.total-files {
    color: darkgreen; /* Цвет для сообщения о количестве файлов */
}

.error-files {
    color: gray;
}

.processed-files {
    color: green; /* Цвет для сообщения об обработанных файлах */
}

.scanning-completed {
    color: green; /* Цвет для сообщения о завершении сканирования */
}

.files-not-found {
    color: red; /* Цвет для сообщения о ненайденных файлах */
}

.time-spent {
    color: blue; /* Цвет для сообщения о затраченном времени */
}

.card-body {
    width: 100%;
}

.modal-title {
    color: aliceblue;
}

.myCheckbox-big {
    width: 27px;
    height: 27px;
}


@media (max-width: 1400px) and (min-width: 0px) {
    .img-fluid {
        max-width: 150%;
    }
}
@media (max-width: 1366px) {
    .btn-group .btn {
        font-size: 0.8rem;
    }
    body {
        font-size: 0.8rem;
    }
    .input-group-text {
        font-size: 0.8rem;
    }
    .form-control {
        font-size: 0.8rem;
    }
}
/* Общие настройки для мобильных устройств */
@media (max-width: 640px) {
    .MyContent {
        left: 0;
        position: absolute;
    }
    .title {
        font-size: 15px;
    }

    .crud-container-fluid {
        background-color: transparent;
        border: 0;
        top: 50px;
    }

    .printBtn {
        display: none;
    }

    .page-content {
        left: 0;
        position: fixed;
        display: block;
    }

    .crud-container-fluid {
        padding-left: 5px;
    }

        .crud-container-fluid .row {
            justify-content: center; /* Выравнивание кнопок по центру */
            flex-wrap: wrap; /* Разрешить перенос кнопок на следующую строку */
        }

    .col-md-5.btn-group button {
        flex: 1 1 auto; /* Кнопки занимают равное место */
        max-width: 30%;
        margin: 0 0 5px 0;
        padding: 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .btn-group .btn i {
        margin-right: 1px; /* Уменьшить расстояние между иконкой и текстом */
    }

    .btn-group {
        flex-direction: row;
        align-items: stretch;
        width: 100%;
    }

        .btn-group .btn {
            --margin-bottom: 10px;
            --width: 100%;
        }



    .input-group {
        flex-wrap: nowrap;
    }
    /* Контейнеры */




    .thead-primary {
        border-bottom: 0;
        font-size: 14px;
    }

    

    /* Кнопки в футере */
    .page-footer {
        flex-direction: column;
        padding: 10px;
        display: none;
    }

        .page-footer strong {
            margin-bottom: 10px;
            text-align: center;
        }

        .page-footer .col-md-5,
        .page-footer .col-md-6,
        .page-footer .col-md-1 {
            width: 100%;
        }


    .myCheckbox {
        width: 20px;
        height: 20px;
    }
    .myCheckbox-big {
        width: 47px;
        height: 47px;
        margin-right:15px;
    }
    .cardlink {
        width: 169px;
    }
    .consent-link {
        white-space: pre-wrap; /* Разрешает перенос строк */
    }
}