.spinner-container {
        position: relative;
        width: 380px;
        height: 380px;
    }

    .layer {
        position: absolute;
        border-radius: 50%;
        transition: transform 4s cubic-bezier(0.25, 1, 0.3, 1);
        overflow: hidden;
    }

    .layer1 {
        width: 380px;
        height: 380px;
        border: 2px solid #606060;
        background: conic-gradient(#ff5722 0deg 72deg, #ffc107 72deg 144deg, #8bc34a 144deg 216deg, #00bcd4 216deg 288deg, #673ab7 288deg 360deg);
    }

    .layer2 {
        width: 260px;
        height: 260px;
        border: 2px solid #606060;
        top: 60px;
        left: 60px;
        background: conic-gradient(#3f51b5 0deg 72deg, #009688 72deg 144deg, #cddc39 144deg 216deg, #ff9800 216deg 288deg, #9c27b0 288deg 360deg);
    }

    .layer3 {
        width: 140px;
        height: 140px;
        border: 2px solid #606060;
        top: 120px;
        left: 120px;
        background: conic-gradient(#ffeb3b 0deg 72deg, #2196f3 72deg 144deg, #4caf50 144deg 216deg, #f44336 216deg 288deg, #795548 288deg 360deg);
    }

    .pointer {
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 24px solid black;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    .pointer1 {
        top: 1px;
    }

    .pointer2 {
        top: 61px;
    }

    .pointer3 {
        top: 121px;
    }

    .numbers {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4px solid #fff;
    }

    .numbers span {
        position: absolute;
        font-weight: bold;
        color: #000;
        font-size: 13px;
        transform: translate(-66%, -71%);
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
    }

    .scroll-area {
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 5px;
    }

    .scroll-area::-webkit-scrollbar {
        width: 8px;
    }

    .scroll-area::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .scroll-area::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    
    
.form-control,
    .form-select,
    textarea {
        padding: 8px 15px !important;
    }

    .form-check-input {
        height: 1em;
    }

    input[type=number].no-spin::-webkit-inner-spin-button,
    input[type=number].no-spin::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number].no-spin {
        -moz-appearance: textfield;
        /* Firefox */
        pointer-events: none;
        /* make it non-editable */
        background-color: #f8f9fa;
        /* light gray to indicate read-only */
        cursor: not-allowed;
    }