@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

body {
    /* font-family: "Varela Round", sans-serif; */
    font-family: "Urbanist", sans-serif;
}

/* Remove arrows in Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove arrows in Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


button:not(:disabled):active {
    animation: scalingOut .5s ease-in-out;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.payroll {
    display: block;
}

.preloader {
    animation: scalingOut 1s ease-in-out infinite;
}

.safe-h-screen {
    height: calc(var(--vh, 1vh) * 100);
}

.animate-scale {
    animation: scaleInOut 1s ease-in-out;
}

.animate-scale-two {
    animation: scaleInOutSecond .3s ease-in-out;
}

.animate-scale-out {
    animation: scaleOut .3s ease-in-out
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slide-in {
    animation: slideInRight 0.3s ease-out forwards;
}

.infiniteScale {
    animation: scaling 2s ease-out infinite;
}

.recent::-webkit-scrollbar {
    display: none;
}

td,
th {
    border-bottom: 1px solid #dddddd;
    text-align: left;
    padding: 20px 10px;
}

th {
    font-weight: 700;
    background: gray;
    color: white;
    padding: 10px 10px;
}

.second-card {
    background-repeat: no-repeat;
    background-size: 50%, cover;
    background-position: right center, center center;
}

@keyframes scaleInOut {
    0% {
        transform: scale(.8);
    }

    50% {
        transform: scale(1.2);
    }

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

@keyframes scaling {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

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

@keyframes scaleInOutSecond {
    0% {
        transform: scale(.6);
    }

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

@keyframes scaleOut {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(.6);
    }
}

@keyframes scalingOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(.96);
    }

    100% {
        transform: scale(1)
    }
}

.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.step-content {
    overflow: hidden;
}

.cover {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
}