body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    -webkit-font-smoothing: antialiased
}

.loader.available {
    opacity: 0
}

.loader {
    background-color: #f9fafb;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 1;
    pointer-events: none;
    transition: opacity cubic-bezier(.4, 0, .2, 1) 436ms;
    z-index: 9999
}

.logo-frame {
    display: -moz-flex;
    display: flex;
    -moz-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: center;
    justify-content: center;
    animation: fadein 436ms;
    height: 98%
}

.logo-frame-img {
    font-size: 30px;
    padding-left: 10px;
    padding-right: 10px;
    align-self: center
}

.loader-head {
    background-color: #c6dafc;
    height: 4px;
    overflow: hidden;
    position: relative
}

.loader-head .first,
.loader-head .second {
    background-color: #4f46e5;
    inset: 0;
    position: absolute;
    transform-origin: left center;
    transform: scaleX(0)
}

.loader-head .first {
    animation: first 2s linear infinite
}

.loader-head .second {
    animation: second 2s linear infinite
}

@keyframes fadein {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes first {
    0% {
        transform: translate(0) scaleX(0)
    }
    25% {
        transform: translate(0) scaleX(.5)
    }
    50% {
        transform: translate(25%) scaleX(.75)
    }
    75% {
        transform: translate(100%) scaleX(0)
    }
    to {
        transform: translate(100%) scaleX(0)
    }
}

@keyframes second {
    0% {
        transform: translate(0) scaleX(0)
    }
    60% {
        transform: translate(0) scaleX(0)
    }
    80% {
        transform: translate(0) scaleX(.6)
    }
    to {
        transform: translate(100%) scaleX(.1)
    }
}

html {
    font-family: Inter, Cantarell, Roboto, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Oxygen, Ubuntu, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth
}

* {
    transition-property: background-color, color, border-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .2s
}

@media (prefers-reduced-motion) {
    * {
        transition: none !important
    }
}

body {
    margin: 0
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}

.label {
    text-overflow: clip;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: thin
}

.disabled {
    opacity: .8;
    cursor: not-allowed
}

.hoverable {
    transition: opacity .3s
}

.hoverable:hover {
    opacity: .75
}

.w-card-toggle-sm {
    width: calc(100% - 2rem)
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background-color: #9ca3af;
    border-radius: 10px;
    cursor: pointer
}

::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280
}

.arrows-handle {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: grab
}

.arrows-handle::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background-color: #6366f1;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E);
    background-position: center;
    background-repeat: no-repeat;
    cursor: grab
}

.arrows-handle::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background-color: #6366f1;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E);
    background-position: center;
    background-repeat: no-repeat;
    cursor: grab
}