@font-face {
    src: url("../fonts/SF-PRO-ROUNDED-BOLD.OTF");
    font-family: "sf-pro-rounded-bold";
}
@font-face {
    src: url("../fonts/SF-PRO-ROUNDED-MEDIUM.OTF");
    font-family: "sf-pro-rounded-medium";
}
@font-face {
    src: url("../fonts/SF-PRO-ROUNDED-REGULAR.OTF");
    font-family: "sf-pro-rounded-regular";
}

body {
    overflow: hidden;
    user-select: none;
    /* background-color: rgba(0, 0, 0, 0.502);  */
}

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

.openbillmodal-enter-active {
    animation: opendetailbills 1s ease forwards;
}

.openbillmodal-leave-active {
    animation: closeBillDeatil 3s ease forwards;
}

@keyframes opendetailbills {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(30%);
    }
}

.forhovertext::placeholder {
    opacity: 0.5;
}

.openbillmodal2-enter-active {
    animation: opendetailbills2 1s ease forwards;
}

.openbillmodal2-leave-active {
    animation: closedetailbills2 1s ease forwards;
}

@keyframes opendetailbills2 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes closedetailbills2 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.openbillmodal3-enter-active {
    animation: opendetailbills3 1s ease forwards;
}

.openbillmodal3-leave-active {
}

@keyframes opendetailbills3 {
    0% {
        height: 0;
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        height: 86.5%;
    }
}

.paybutton-enter-active {
    animation: opendetailbills4 10s ease forwards;
}

.paybutton-leave-active {
}

@keyframes opendetailbills4 {
    0% {
        height: 40%;
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        height: 15.5%;
    }
}

.fade-enter-active {
    animation: opentabletanim 1s ease forwards;
}
.fade-leave-active {
    animation: closetabletanim 1s ease forwards;
}

@keyframes opentabletanim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes closetabletanim {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.test {
    animation: down 1.8s ease forwards;
}

@keyframes down {
    0% {
        transform: translateY(0%);
        transform: rotate(10deg);
    }

    100% {
        transform: translateY(900%);
    }
}

.test2 {
}

.blueborder1 {
    animation: blueborder 1s ease forwards;
}
@keyframes blueborder {
    0% {
        height: 86.5%;
    }

    100% {
        height: 70.5%;
    }
}

.blueborder2 {
    animation: blueborder2 3s ease forwards;
}

.whitebg2 {
    animation: whitebg 1s ease forwards;
}

@keyframes whitebg {
    0% {
        height: 80%;
    }

    100% {
        height: 93%;
    }
}

.paid2 {
    animation: paid 0.5s ease forwards;
}
.paid1 {
}
@keyframes paid {
    0% {
        scale: 3;
    }

    100% {
        scale: 1;
    }
}
@keyframes blueborder2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadenotify-enter-active,
.fadenotify-leave-active {
    transition: all 0.5s ease;
}
.fadenotify-enter {
    opacity: 0;
}

.fadenotify-enter-to {
    opacity: 1;
}
.fadenotify-leave {
    opacity: 1;
}
.fadenotify-leave-to {
    opacity: 0;
}

.text-container {
    position: relative;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid rgba(0, 0, 0, 0.17);
}

input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    background: rgba(255, 255, 255, 0.07);

    /* Not removed via appearance */
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: currentColor;
    width: 2.5vh;
    height: 2.5vh;
    border-radius: 6px;

    display: grid;
    place-content: center;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    /* Windows High Contrast Mode */
    background-color: #ffffff;
}
input[type="checkbox"]:checked {
    background: #3e8fef;
}
input[type="checkbox"]:checked::before {
    transform: scale(1);
}

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