@keyframes b-t {
    0% {
        transform: translateY(100vh);
    }

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

@keyframes b-t-x {
    0% {
        transform: translateX(-100vw);
        opacity: 0.0;

    }

    100% {
        transform: translateX(0vw);
        opacity: 1.0;
    }
}

@keyframes b-t-x-out {
    0% {
        transform: translateX(0vw);
        opacity: 1.0;

    }

    100% {
        transform: translateX(-100vw);
        opacity: 0.0;
        display: none;
    }
}

@keyframes bg-animation-blur {
    0% {
        backdrop-filter: blur(2px);
        -webkti-backdrop-filter: blur(2px);
        background-color: rgba(82, 82, 82, 0.6);
    }

    100% {
        backdrop-filter: blur(0px);
        -webkti-backdrop-filter: blur(0px);
        background-color: rgba(255, 255, 255, 0);
    }
}
@keyframes bg-dark-animation {
     0%{
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(0px);
        -webkti-backdrop-filter: blur(0px);
    }
    100%{
        backdrop-filter: blur(2px);
        -webkti-backdrop-filter: blur(2px);
        background-color: #18181861;
    }
}
@keyframes bg-dark-animation-2 {
    0%{
        backdrop-filter: blur(2px);
        -webkti-backdrop-filter: blur(2px);
        background-color: #18181861;
    }
    100%{
       background-color: rgba(255, 255, 255, 0);
       backdrop-filter: blur(0px);
       -webkti-backdrop-filter: blur(0px);
   }
   
}
@keyframes animation-sc-1 {
    0%{
        transform: translateY(100px);
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
    
}
@keyframes animation-box-out {
    0% {
        transform: translateY(0);
    }

    /* 50%{
        transform: translateY(-5vh);
    } */
    100% {
        transform: translateY(100vh);
    }
}

@keyframes animation_opacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

@keyframes animation_opacity-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes qr-out {
    0% {
        transform: translateX(0%);
    }

    40% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes qr-in {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes wellcome {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1);
        opacity: 1;
    }

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

}

@keyframes wellcome-2 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    65% {
        transform: scale(0);
        opacity: 0;
    }

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

    /* 65%{
        transform: scale(1);
        opacity: 1;
    }
    100%{
        transform: scale(0);
        opacity: 0.0;
     } */
}

@keyframes mode-l {
    0% {

        left: 51%;
    }

    40% {

        left: 51%;
    }

    100% {
        background-color: #ffbc00;
        left: 0;
    }
}

@keyframes s-mode-l {
    0% {
        background-color: #181818;
        color: white;

    }

    40% {
        background-color: #181818;

    }

    100% {
        background-color: white;
        color: black;

    }
}

@keyframes s-mode-d {
    0% {
        background-color: white;
        color: black;

    }

    40% {
        background-color: white;

    }

    100% {
        background-color: #181818;
        color: white;

    }
}

@keyframes mode-in {
    0% {
        color: black;
    }

    40% {
        color: black;
    }

    100% {
        color: white;
    }
}

@keyframes mode-out {
    0% {
        color: white;
    }

    40% {
        color: white;
    }

    100% {
        color: black;
    }
}

@keyframes mode-d {
    0% {

        color: white;
        left: 0%;
    }

    40% {

        color: white;
        left: 0%;
    }

    100% {
        color: white;

        left: 51%;
    }
}

@keyframes out-loading {
    0% {
        backdrop-filter: blur(0px);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        backdrop-filter: blur(10px);
        transform: scale(3);
        opacity: 0;
    }
}

@keyframes wellcome-3 {
    0% {
        transform: translateY(100vh);
        opacity: 0.0;
    }

    20% {
        transform: translateY(110vh);
        opacity: 0.0;
    }

    100% {
        transform: translateY(0vh);
        opacity: 1;
    }

    /* 65%{
        transform: scale(1);
        opacity: 1;
    }
    100%{
        transform: scale(0);
        opacity: 0.0;
     } */
}

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

    70% {
        transform: scale(1);
    }

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

@keyframes wave {
    0% {
        transform: scale(2);
    }

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

@keyframes out-page {
    0% {
        
        opacity: 1;
    }

    60% {
        
        opacity: 0;
    }

    100% {
        
        opacity: 0;
    }
}

@keyframes in-page {
    100% {
        transform: scale(1);
        opacity: 1;
    }

    60% {
        transform: scale(0.8);
        opacity: 0;
    }

    0% {
        transform: scale(0.8);
        opacity: 0;
    }
}
@keyframes notificat-1 {
    0%{
        transform:  scale(0);
    }
    70%{
        transform:  scale(1.05);
    }
    100%{
        transform:  scale(1);
    }
}
@keyframes notificat-2 {
    100%{
        transform:  scale(0);
    }
    70%{
        transform:  scale(1.05);
    }
    0%{
        transform:  scale(1);
    }
}
@keyframes bg-t_g {
    0% {
        background-color: rgba(82, 82, 82, 0);
    }

    100% {
        background-color: rgba(82, 82, 82, 0.6);
    }
}
@keyframes loadin-dot {
    0%{
        transform: translateX(0px);
    }
    100%{
        transform: translateX(32px);
    }
}
@keyframes loadin-dot-s {
    0%{
        transform: scale(0);
        opacity: 0.0;
        transform: translateX(0);
    }
    100%{
        transform: scale(1);
        opacity:1;
        transform: translateX(32px);
    }
}
@keyframes loadin-dot-e {
    0%{
        transform: scale(1);
        opacity:1;
        transform: translateX(0px);
    }
    100%{
        transform: scale(0);
        opacity: 0.0;
        transform: translateX(32px);
    }
    
}
.btn_t_a:hover {
    color: white;
    background-color: black;
}

.animation-c-s:hover {
    flex: 1.05;
}

.post-animation-z:hover {
    transform: scale(1.04);
}

.btn_list_post:hover {
    background-color: rgb(242, 242, 242) !important;
}

.btn_t:hover {
    background-color: #343a40 !important;
    color: #ffc107 !important;
}

.trasition-btn {
    transition: color 0.35s ease;
}

.c-btn:hover {
    background-color: white !important;
    color: #dc3545 !important;
    border: 0.7px #dc3545 solid !important;
}

.co-btn:hover {
    background-color: white !important;
    color: #007bff !important;
    border: 0.7px #007bff solid !important;
}

.co-btn_none-border:hover {
    background-color: white !important;
    color: #007bff !important;

}

.animation-edit-profile:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.22);
}

.co-btn-out:hover {
    background-color: white !important;
    color: #f93535 !important;
    border: 0.7px #f93535 solid !important;
}

.animation_like:hover {
    background-color: #f93535b3;
    color: #f93535;
}