body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.badge {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.65em;
    padding-top: 5px;
}

[data-bs-theme="dark"] .btn-primary {
    background-color: #652bae;
    border-color: #652bae;
    color: white;
}

    [data-bs-theme="dark"] .btn-primary:hover,
    [data-bs-theme="dark"] .btn-primary:focus,
    [data-bs-theme="dark"] .btn-primary:active {
        background-color: darkorchid !important;
        border-color: darkorchid;
        color: white;
    }

    [data-bs-theme="dark"] .btn-primary:disabled,
    [data-bs-theme="dark"] .btn-primary.disabled {
        background-color: #652bae !important;
        border-color: #652bae !important;
        color: white !important;
        opacity: 0.65;
    }

[data-bs-theme="light"] .btn-primary {
    background-color: #652bae;
    border-color: #652bae;
    color: white;
}

    [data-bs-theme="light"] .btn-primary:hover,
    [data-bs-theme="light"] .btn-primary:focus,
    [data-bs-theme="light"] .btn-primary:active {
        background-color: darkorchid !important;
        border-color: darkorchid;
        color: white;
    }

    [data-bs-theme="light"] .btn-primary:disabled,
    [data-bs-theme="light"] .btn-primary.disabled {
        background-color: #652bae !important;
        border-color: #652bae !important;
        color: white !important;
        opacity: 0.65;
    }

.ripple {
    position: relative;
    overflow: hidden;
}

    .ripple::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        transform: scale(0);
        background: rgba(255, 255, 255, 0.4); /* Цвет волны */
        animation: ripple-animation 600ms linear;
        pointer-events: none;
    }

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.card-body-style {
    display: block;
    box-sizing: border-box;
}

.btn-link {
    text-transform: uppercase;
    text-decoration: none;
    font-size: small;    
}

textarea.form-control {
    height: auto !important; 
}


.offcanvas-end {
    --bs-offcanvas-width: 80%;
}


@media (min-width: 992px) {
    .offcanvas-end {
        --bs-offcanvas-width: 60%; 
    }
}


@media (min-width: 1400px) {
    .offcanvas-end {
        --bs-offcanvas-width: 40%; 
    }
}


.code-span {
    display: inline-block;
    background-color: transparent;
    color: #6386aa;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
}