::-webkit-scrollbar {
    max-width: 8px;
    background-color: unset;
    max-height: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    box-shadow: unset;
    background-color: rgb(193, 193, 193);
}

.opacity {
    opacity: .5 !important;
}

.dropdown-toggle::after {
    display: none;
    content: unset
}

.sts-main {
    background: var(--bs-main) !important;
}

.sts-blue-l {
    background: var(--bs-cyan) !important;
}

.sts-gray {
    background: var(--bs-gray-500) !important;
}

.sts-yellow {
    background: #f8ae00 !important;
}

.sts-pink {
    background: #ee5e99 !important;
}

.sts-purple {
    background: #b660e0 !important;
}

.sts-blue {
    background: #5f55ee !important;
}

.sts-greem {
    background: #008844 !important;
}

.sts-orange {
    background: #e16b16 !important;
}

.sts-red {
    background: #d33d44 !important;
}

.sts-main-c {
    color: var(--bs-main) !important;
}

.sts-blue-l-c {
    color: var(--bs-cyan) !important;
}

.sts-gray-c {
    color: var(--bs-gray-500) !important;
}

.sts-yellow-c {
    color: #f8ae00 !important;
}

.sts-pink-c {
    color: #ee5e99 !important;
}

.sts-purple-c {
    color: #b660e0 !important;
}

.sts-blue-c {
    color: #5f55ee !important;
}

.sts-greem-c {
    color: #008844 !important;
}

.sts-orange-c {
    color: #e16b16 !important;
}

.sts-red-c {
    color: #d33d44 !important;
}

.show-on-phone {
    display: none !important;
}

textarea {
    -webkit-touch-callout: auto;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    user-select: auto;
}

@media only screen and (max-width: 480px) {
    /* Styles for extra small devices */
    :root {
        --scale: 86;
    }

    * {
        touch-action: manipulation;
    }

    
    .hidden-on-phone {
        display: none !important;
    }

    .show-on-phone {
        display: flex !important;
    }
}


@media only screen and (min-width: 481px) and (max-width: 768px) {
    /* Styles for small devices */
    :root {
        --scale: 88;
    }

    * {
        touch-action: manipulation;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Styles for medium devices */
    :root {
        --scale: 90;
    }

    * {
        touch-action: manipulation;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {
    /* Styles for large devices */
    :root {
        --scale: 92;
    }

    * {
        touch-action: manipulation;
    }
}

@media only screen and (min-width: 1201px) {
    /* Styles for extra large devices */
    :root {
        --scale: 94;
    }

    * {
        touch-action: manipulation;
    }
}

@media only screen and (orientation: portrait) {
    /* Styles for portrait orientation */
    :root {
    }
}

@media only screen and (orientation: landscape) {
    /* Styles for landscape orientation */
    :root {
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
    /* Styles for retina displays */
    :root {
    }
}

@media (prefers-color-scheme: dark) {
    /* Styles for dark mode */
}

@media (prefers-reduced-motion: reduce) {
    /* Styles for reduced motion preference */
}

@media only screen and (min-width: 1400px) {
    /* Custom styles for screens larger than 1400px */
    :root {
        --scale: 100;
    }
}

@keyframes pulse {
    from {
        box-shadow: 0 0 0 0 #AAAAAA;
    }
}

@keyframes scale-click {
    from {
        transform: scale(.9);
    }

    to {
        transform: scale(1);
    }
}

@keyframes tada {
    10%, 20% {
        transform: scale(0.9) rotate(-1deg);
    }

    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(1deg);
    }

    40%, 60%, 80% {
        transform: scale(1.1) rotate(-1deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}