@font-face {
    font-family: 'MonaSans-Regular';
    src:
        url('Mona-Sans.woff2') format('woff2 supports variations'),
        url('Mona-Sans.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
}

* {
    font-family: 'MonaSans-Regular', sans-serif;
}


body {
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    width: 100vw;
    text-rendering: optimizeLegibility;
}

.file-upload {
    display: block;
    height: 100%;
    width: 200%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 9;
}

input::-webkit-file-upload-button {
    display: block;
    height: 100%;
    width: 200%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0%;
    right: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 9;
}

.shouldCover {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    display: flex;
    flex-direction: column;
}

input,
input:focus,
input:active,
input:focus-visible {
    outline: 0px solid transparent !important
}

input::placeholder {
    font-weight: 300;
}

input:-internal-autofill-selected {
    background: transparent !important;
}

html {
    font-family: 'MonaSans-Regular', sans-serif !important;
}

.ErrorCounter-dark,
.ErrorCounter {
    z-index: -1;
    width: 125px;
    height: 35px;
    position: absolute;
    left: 0
}


.blip {
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
}

.blip::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;

    display: inline-block;
    width: 5px;
    height: 5px;

    background-color: #2DCA72;
    border-radius: 360px;
    animation: pulse2 1500ms cubic-bezier(0.25, 0.1, 0.25, 0.1) infinite 2500ms;
    animation-fill-mode: forwards;
}

.ErrorCounter::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;

    display: inline-block;
    width: 125px;
    height: 35px;

    background-color: #fff;
    border-radius: 10px;
    animation: pulse 1500ms cubic-bezier(0.25, 0.1, 0.25, 0.1) infinite 2500ms;
    animation-fill-mode: forwards;
}

.ErrorCounter-dark::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;

    display: inline-block;
    width: 125px;
    height: 35px;

    background-color: black;
    border-radius: 10px;
    animation: pulse 1500ms cubic-bezier(0.25, 0.1, 0.25, 0.1) infinite 2500ms;
    animation-fill-mode: forwards;
}

.rotate-animation {
    animation: rotate360 15s linear infinite;
}

iframe {
    border: none;
    outline: none;
}

#crisp-chatbox>div>a {
    /* margin-bottom: 100px !important; */
    /* position: absolute !important; */
    bottom:60px !important;
    /* display: none; */
}

@keyframes pulse {
    0% {
        opacity: .8;
        transform: scaleX(1) scaleY(1);
    }

    100% {
        opacity: 0;
        transform: scaleX(1.2) scaleY(1.8);
    }
}

@keyframes pulse2 {
    0% {
        opacity: .8;
        transform: scaleX(1) scaleY(1);
    }

    100% {
        opacity: 0;
        transform: scaleX(2.5) scaleY(2.5);
    }
}

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        display: none;
        /* Hides scrollbar for WebKit browsers */
    }

    /* For Firefox */
    * {
        scrollbar-width: none;
    }

    /* For Edge and IE */
    *::-ms-scrollbar {
        display: none;
    }

    /* Ensure content is still scrollable */
    body {
        -ms-overflow-style: none;
        /* Hide scrollbar for IE and Edge */
        scrollbar-width: none;
        /* Hide scrollbar for Firefox */
        overflow-y: scroll;
        /* Ensure scrolling still works */
    }
}

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

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


/*
 * react-circular-progressbar styles
 * All of the styles in this file are configurable!
 */

.CircularProgressbar {
    /*
     * This fixes an issue where the CircularProgressbar svg has
     * 0 width inside a "display: flex" container, and thus not visible.
     */
    width: 100%;
    /*
     * This fixes a centering issue with CircularProgressbarWithChildren:
     * https://github.com/kevinsqi/react-circular-progressbar/issues/94
     */
    vertical-align: middle;
}

.CircularProgressbar .CircularProgressbar-path {
    stroke: #ffffff50;
    stroke-linecap: round;
    -webkit-transition: stroke-dashoffset 0.5s ease 0s;
    transition: stroke-dashoffset 0.5s ease 0s;
}

.CircularProgressbar .CircularProgressbar-trail {
    stroke: #ffffff50;
    /* Used when trail is not full diameter, i.e. when props.circleRatio is set */
    stroke-linecap: round;
}

.CircularProgressbar .CircularProgressbar-text {
    fill: #ffffff50;
    font-size: 20px;
    dominant-baseline: middle;
    text-anchor: middle;
}

.CircularProgressbar .CircularProgressbar-background {
    fill: #00000000;
}

/*
   * Sample background styles. Use these with e.g.:
   *
   *   <CircularProgressbar
   *     className="CircularProgressbar-inverted"
   *     background
   *     percentage={50}
   *   />
   */
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
    fill: #ffffff01;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
    fill: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
    stroke: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
    stroke: transparent;
}