@tailwind base;
@tailwind components;
@tailwind utilities;

.required-label:after {
    content: " *";
    color: red;
}

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

*::-webkit-scrollbar-thumb {
    background-image: linear-gradient(-45deg, #6a5af9, #d66efd);
    border-radius: 50px;
}

.SumoSelect > .CaptionCont > span.placeholder {
    --tw-text-opacity: 1;
    color: #111827;
    font-style: normal !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background: none;
}

.SumoSelect {
    border-radius: 0.5rem;
    border: 1px solid #dee2e6 !important;
    padding: 0.325rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.SumoSelect > select {
    outline: none !important;
    border: none !important;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.SumoSelect > .CaptionCont {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.SumoSelect > .CaptionCont:focus {
    outline: none !important;
    border: none !important;
}

.SumoSelect > .CaptionCont:active {
    outline: none !important;
    border: none !important;
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0)
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0)
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}