:root{
    --primary: #596fa6;
    --primary-hsl: 223 30% 55%;
    --bg-primary: #21242c;
    --primary-dark: #4d5f8d;
    --primary-muted: #94a1b8;
}

.text-primary {
    color: var(--primary) !important;
}
.text-white{
    color: white !important;
}
.bg-primary{
    background-color: var(--primary) !important;
}
.bg-primary,.bg-primary>a {
    color: #fff !important
}
.bg-primary.btn:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #ececec !important;
}
.bg-primary.btn.active,.bg-primary.btn:active,.bg-primary.btn:not(:disabled):not(.disabled).active,.bg-primary.btn:not(:disabled):not(.disabled):active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff;
}

.swal2-popup.swal2-toast .swal2-title{
    text-align: inherit;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideInTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slideInBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.swal2-slide-in-bottom {
    animation: slideInBottom 0.4s ease-out !important;
}
.swal2-slide-in-top {
    animation: slideInTop 0.4s ease-out !important;
}
.swal2-slide-in-left {
    animation: slideInLeft 0.4s ease-out !important;
}
.swal2-slide-in-right {
    animation: slideInRight 0.4s ease-out !important;
}

.line-through {
    text-decoration-line: line-through;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}
.col-span-5 {
    grid-column: span 5 / span 5;
}
.col-span-6 {
    grid-column: span 6 / span 6;
}
.w-\[50\%\] {
    width: 50%;
}
.w-\[40\%\] {
    width: 40%;
}
.w-\[20\%\] {
    width: 20%;
}
.w-\[10\%\] {
    width: 10%;
}