#snackbarsuccess {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #2b9e18;
    color: #fff;
    text-align: center;
 
    padding: 8px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
    border-radius: 5px;
}

    #snackbarsuccess.show {
        visibility: visible;
        -webkit-animation: xfadein 0.5s, xfadeout 0.5s 2.5s;
        animation: xfadein 0.5s, xfadeout 0.5s 2.5s;
    }


#snackbarerror {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #a71e1e;
    border-radius:5px;
    color: #fff;
    text-align: center;
 
    padding: 8px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

    #snackbarerror.show {
        visibility: visible;
        -webkit-animation: xfadein 0.5s, xfadeout 0.5s 2.5s;
        animation: xfadein 0.5s, xfadeout 0.5s 2.5s;
    }

@-webkit-keyframes xfadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes xfadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes xfadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes xfadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}



.slideDown {
    position: relative;
    top: 0px;
    -webkit-animation: slideOn 1s forwards;
    -moz-animation: slideOn 1s forwards;
    animation: slideOn 1s forwards;
}

@-webkit-keyframes slideOn {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@-moz-keyframes slideOn {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes slideOn {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

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




.flycard {
    transition: 0.5s all ease 0s;
    -webkit-transition: 0.5s all ease 0s;
    -moz-transition: 0.5s all ease 0s;
    -ms-transition: 0.5s all ease 0s;
    -webkit-animation: moveAnimation 2s;
    animation: moveAnimation 5s;
}

    .flycard:hover {
        -webkit-transform: scale(1.04);
        -moz-transform: scale(1.04);
        -ms-transform: scale(1.04);
        -o-transform: scale(1.04);
        transform: scale(1.04);
        transition: 0.5s all ease 0s;
        -webkit-transition: 0.5s all ease 0s;
        -moz-transition: 0.5s all ease 0s;
        -ms-transition: 0.5s all ease 0s;
    }

#Mynav {
    background: linear-gradient(90deg, rgba(29,207,253,1) 5%, rgba(213,147,81,1) 100%) !important;
}





.slideRight {
    position: relative;
    right: 0px;
    -webkit-animation: slideR 1s forwards;
    -moz-animation: slideR 1s forwards;
    animation: slideR 1s forwards;
}

@-webkit-keyframes slideR {
    0% {
        opacity: 0;
        transform: translateX(300px);
    }

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

@-moz-keyframes slideR {
    0% {
        opacity: 0;
        transform: translateX(300px);
    }

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

@keyframes slideR {
    0% {
        opacity: 0;
        transform: translateX(300px);
    }

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





.slideLeft {
    position: relative;
    left: 0px;
    -webkit-animation: slideIn 2s forwards;
    -moz-animation: slideIn 2s forwards;
    animation: slideIn 2s forwards;
}

@-webkit-keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }

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

@-moz-keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }

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

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }

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








.slideUp {
    position: relative;
    bottom: 0px;
    -webkit-animation: slideTo 2s forwards;
    -moz-animation: slideTo 2s forwards;
    animation: slideTo 2s forwards;
}

@-webkit-keyframes slideTo {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

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

@-moz-keyframes slideTo {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

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

@keyframes slideTo {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

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







.myfadeslow {
 
    -webkit-animation: xfadein 6s; /* Safari, Chrome and Opera  12.1 */
    -moz-animation: xfadein 6s; /* Firefox  16 */
    -ms-animation: xfadein 6s; /* Internet Explorer */
    -o-animation: xfadein 6s; /* Opera  12.1 */
    animation: xfadein 6s;
}

.myfade {
 
    -webkit-animation: xfadein 2s; /* Safari, Chrome and Opera  12.1 */
    -moz-animation: xfadein 2s; /* Firefox  16 */
    -ms-animation: xfadein 2s; /* Internet Explorer */
    -o-animation: xfadein 2s; /* Opera  12.1 */
    animation: xfadein 2s;
}


.text-overflow-ellipses {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Number of lines to show */
    -webkit-box-orient: vertical;
    -webkit-mask-image: linear-gradient(0deg, transparent 16px, red 66px);
}




.insta-grad {
    color: transparent;
    background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
}

.insta-grad:hover {
 
    background: -webkit-linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242), rgb(21, 198, 251)) 0% 0% / 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 4s ease 0s infinite normal none running fontgradient;
    -webkit-animation: fontgradient 4s ease infinite;
    -moz-animation: fontgradient 4s ease infinite;
    animation: fontgradient 4s ease infinite;
}


@-webkit-keyframes fontgradient {
    0% {
        background-position: 0% 92%
    }

    50% {
        background-position: 100% 9%
    }

    100% {
        background-position: 0% 92%
    }
}

@-moz-keyframes fontgradient {
    0% {
        background-position: 0% 92%
    }

    50% {
        background-position: 100% 9%
    }

    100% {
        background-position: 0% 92%
    }
}

@keyframes fontgradient {
    0% {
        background-position: 0% 92%
    }

    50% {
        background-position: 100% 9%
    }

    100% {
        background-position: 0% 92%
    }
}
}




.mycssgradcolors {
    background: linear-gradient(270deg, #4225b1, #2f98d5) !important;
 
    -webkit-animation: mygradcolors 34s ease infinite ;
    -moz-animation: mygradcolors 34s ease infinite;
    -o-animation: mygradcolors 34s ease infinite;
    animation: mygradcolors 34s ease infinite;
}

@-webkit-keyframes mygradcolors {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes mygradcolors {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-o-keyframes mygradcolors {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes mygradcolors {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}



.mytext-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* Number of lines to show */
    -webkit-box-orient: vertical;
}






.modal-backdrop {
    z-index: 100000 !important;
}

.modal {
    z-index: 100001 !important;
}





.moving-left-megamenu {
 
 
    transition: transform 0.3s ease;
    transform: translateX(0px);
 
}

    .moving-left-megamenu:hover {
        transform: translateX(7px);
    }



 
.typewrite {
    color: #0000;
    background: linear-gradient(-90deg,#00DFFC 5px,#0000 0) 10px 0, linear-gradient(#00DFFC 0 0) 0 0;
    background-size: calc(var(--n)*1ch) 200%;
    -webkit-background-clip: padding-box,text;
    background-clip: padding-box,text;
    background-repeat: no-repeat;
    animation: b .7s infinite steps(1), t calc(var(--n)*0.02s) steps(var(--n)) forwards;
}

@keyframes t {
    from {
        background-size: 0 200%
    }
}

@keyframes b {
    50% {
        background-position: 0 -100%,0 0
    }
}



.mygradientbck .mud-badge.mud-badge-default {
    background: linear-gradient(267deg, rgba(183,60,159,1) 8%, rgba(66,37,177,1) 50%, rgba(47,152,213,1) 100%);
    color: white;
}

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 99999;
}


.mygradienttxt {
    background: linear-gradient(318deg, rgba(62,163,234,1) 8%, rgba(60,155,231,1) 45%, rgba(30,49,185,1) 96%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

 

.border .myborder {
 

border: var(--mdb-border-width) var(--mdb-border-style) #fbb11d !important;
}



.ql-container {
 
    font-family: "Roboto";
    font-size: 15px !important;
}




.tooltipx {
    position: relative;
    display: inline-block;
}

    .tooltipx .tooltiptextx {
        background-color: dimgray;
        color: lightgray;
        visibility: hidden;
        width: 80px;
        text-align: center;
        border-radius: 6px;
        padding: 4px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
    }

    .tooltipx:hover .tooltiptextx {
        visibility: visible;
    }