/* You can add global styles to this file, and also import other style files */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import "tailwindcss";
@import "ngx-toastr/toastr";

* {
    font-family: "Poppins", sans-serif;
}

.toast-container .ngx-toastr {
    position: relative;
    overflow: hidden;
    margin: 0 0 0 6px;
    padding: 10px 15px;
    width: 350px;
    border-radius: 10px;
    margin-top: 10px;
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 24px;
    color: #292929;
    border: 1px solid #d1d1d1;
    box-shadow: 0px 0px 40px -29px rgba(0, 0, 0, 1);
    -webkit-box-shadow: 0px 0px 40px -29px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 40px -29px rgba(0, 0, 0, 1);
    transition: all;
}

.toast-container .ngx-toastr:hover {
    box-shadow: 0px 0px 55x -29px rgba(0, 0, 0, 1);
    -webkit-box-shadow: 0px 0px 55px -29px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 55px -29px rgba(0, 0, 0, 1);
}

.toast-success {
    background-color: white;
}

.toast-error {
    background-color: #fff;
}

.toast-title {
    font-size: 16px;
    font-weight: 600;
}

.toast-message {
    font-size: 14px;
    margin-top: -1px;
}

.loader {
    width: 50px;
    aspect-ratio: 1.154;
    position: relative;
    background: conic-gradient(
        from 120deg at 50% 64%,
        #0000,
        #1d1c1c 1deg 120deg,
        #0000 121deg
    );
    animation: l27-0 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}
.loader:before,
.loader:after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    transform-origin: 50% 66%;
    animation: l27-1 1.5s infinite;
}
.loader:after {
    --s: -1;
}

@keyframes l27-0 {
    0%,
    30% {
        transform: rotate(0);
    }
    70% {
        transform: rotate(120deg);
    }
    70.01%,
    100% {
        transform: rotate(360deg);
    }
}
@keyframes l27-1 {
    0% {
        transform: rotate(calc(var(--s, 1) * 120deg)) translate(0);
    }
    30%,
    70% {
        transform: rotate(calc(var(--s, 1) * 120deg))
            translate(calc(var(--s, 1) * -5px), 10px);
    }
    100% {
        transform: rotate(calc(var(--s, 1) * 120deg)) translate(0);
    }
}
