@import url(https://rsms.me/inter/inter.css);


.no-mask *,
.no-mask .bug-border::before,
.no-mask *::before,
.no-mask *::after {
    animation: none !important;
    transition: none !important;
}

.no-mask .animate-spin-slow {
    animation: spin-slow 1.5s linear 3 !important;
    /*infinite*/
}

.no-mask .bug-border.is-bug-focused::before {
    animation: rotateBug 2s linear 3 !important;
}

.no-mask .bug-border-globo.is-bug-focused::before {
    animation: rotateBug 6s linear 3 !important;
}

.no-mask .selected-border::before,
.no-mask .focused-card-border::before,
.no-mask .focused-border::before {
    background: transparent !important;
    content: none !important;
}

.no-mask .focused-card-border,
.no-mask .focused-border {
    border: 0.2rem solid var(--dtv-gradient-secondary) !important;
    box-shadow: none !important;
}

.no-mask .selected-border {
    border: 0.2rem solid var(--dtv-success) !important;
    box-shadow: none !important;
}

.no-mask .default-border,
.no-mask .default-card-border,
.no-mask .panel-border {
    border: 0.2rem solid rgba(255, 255, 255, 0.15) !important;
}

.no-mask .focused-card-border,
.no-mask .focused-border,
.no-mask .focused-key-border {
    border: 0.2rem solid var(--dtv-gradient-primary);
}

.no-mask .focused-border {
    border-radius: 100%;
}

.no-mask .focused-key-border {
    border-radius: 0.5rem;
}

.no-mask .focused-card-border::before,
.no-mask .focused-border::before,
.no-mask .default-border::before,
.no-mask .default-card-border::before,
.no-mask .panel-border::before,
.no-mask .focused-key-border::before,
.no-mask .default-key-border::before {
    content: "";
    background: transparent;
    position: absolute;
}

.no-mask .default-border,
.no-mask .default-card-border,
.no-mask .panel-border,
.no-mask .default-key-border {
    border: 0.15rem solid rgba(255, 255, 255, 0.2);
}

.no-mask .default-key-border {
    border-radius: 0.5rem;
}



*,
::before,
::after {
    box-sizing: border-box;
}


html {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}



html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}



body {
    margin: 0;
}


body {
    font-family:
        system-ui,
        -apple-system,
        /* Firefox supports this but not yet `system-ui` */
        'Segoe UI',
        Roboto,
        Helvetica,
        Arial,
        sans-serif,
        'Apple Color Emoji',
        'Segoe UI Emoji';
}



hr {
    height: 0;
    /* 1 */
    color: inherit;
    /* 2 */
}


abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}


b,
strong {
    font-weight: bolder;
}



code,
kbd,
samp,
pre {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        'Liberation Mono',
        Menlo,
        monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}


small {
    font-size: 80%;
}


sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}



table {
    text-indent: 0;
    /* 1 */
    border-color: inherit;
    /* 2 */
}



button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}


button,
select {
    /* 1 */
    text-transform: none;
}


button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}


::-moz-focus-inner {
    border-style: none;
    padding: 0;
}



legend {
    padding: 0;
}


progress {
    vertical-align: baseline;
}



::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}



[type='search'] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}


::-webkit-search-decoration {
    -webkit-appearance: none;
}


::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}



summary {
    display: list-item;
}



blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

button {
    background-color: transparent;
    background-image: none;
}

fieldset {
    margin: 0;
    padding: 0;
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}



html {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* 1 */
    line-height: 1.5;
    /* 2 */
}


body {
    font-family: inherit;
    line-height: inherit;
}



*,
::before,
::after {
    box-sizing: border-box;
    /* 1 */
    border-width: 0;
    /* 2 */
    border-style: solid;
    /* 2 */
    border-color: currentColor;
    /* 2 */
}


hr {
    border-top-width: 1px;
}



img {
    border-style: solid;
}

textarea {
    resize: vertical;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af;
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af;
}

button,
[role="button"] {
    cursor: pointer;
}



table {
    border-collapse: collapse;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}



a {
    color: inherit;
    text-decoration: inherit;
}


button,
input,
optgroup,
select,
textarea {
    padding: 0;
    line-height: inherit;
    color: inherit;
}



pre,
code,
kbd,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    /* 1 */
    vertical-align: middle;
    /* 2 */
}


img,
video {
    max-width: 100%;
    height: auto;
}

/**
 * Ensure the default browser behavior of the `hidden` attribute.
 */

[hidden] {
    display: none;
}

*,
::before,
::after {
    --tw-border-opacity:
        1;
    border-color:
        rgba(229, 231, 235, var(--tw-border-opacity));
}

html {
    font-size: 16px;
}

@media (min-width: 1920px) {
    html {
        font-size: 24px;
    }
}

@media (min-width: 3840px) {
    html {
        font-size: 48px;
    }
}

:root {
    --dtv-gray-30: rgba(25, 31, 39, 0.3);
    --dtv-white-60: rgba(255, 255, 255, 0.6);
    --dtv-gradient-primary: #35c7f3;
    --dtv-gradient-secondary: #414ffd;
    --dtv-success: #11bb0e;
}

.container {
    width:
        100%;
}

@media (min-width: 640px) {
    .container {
        max-width:
            640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width:
            768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width:
            1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width:
            1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width:
            1536px;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width:
            1920px;
    }
}

@media (min-width: 3840px) {
    .container {
        max-width:
            3840px;
    }
}

.pointer-events-none {
    pointer-events:
        none;
}

.visible {
    visibility:
        visible;
}

.static {
    position:
        static;
}

.fixed {
    position:
        fixed;
}

.absolute {
    position:
        absolute;
}

.relative {
    position:
        relative;
}

.sticky {
    position:
        sticky;
}

.inset-0 {
    top:
        0px;
    right:
        0px;
    bottom:
        0px;
    left:
        0px;
}

.inset-x-0 {
    left:
        0px;
    right:
        0px;
}

.top-0 {
    top:
        0px;
}

.top-6 {
    top:
        1.5rem;
}

.-top-10 {
    top:
        -2.5rem;
}

.top-0\.6 {
    top:
        0.6rem;
}

.right-1 {
    right:
        0.25rem;
}

.right-8 {
    right:
        2rem;
}

.right-20 {
    right:
        5rem;
}

.bottom-0 {
    bottom:
        0px;
}

.bottom-8 {
    bottom:
        2rem;
}

.left-0 {
    left:
        0px;
}

.isolate {
    isolation:
        isolate;
}

.z-10 {
    z-index:
        10;
}

.col-span-2 {
    grid-column:
        span 2 / span 2;
}

.m-1 {
    margin:
        0.25rem;
}

.mx-2 {
    margin-left:
        0.5rem;
    margin-right:
        0.5rem;
}

.-mx-10 {
    margin-left:
        -2.5rem;
    margin-right:
        -2.5rem;
}

.my-6 {
    margin-top:
        1.5rem;
    margin-bottom:
        1.5rem;
}

.mt-1 {
    margin-top:
        0.25rem;
}

.mt-2 {
    margin-top:
        0.5rem;
}

.mt-4 {
    margin-top:
        1rem;
}

.mt-5 {
    margin-top:
        1.25rem;
}

.mt-px {
    margin-top:
        1px;
}

.mt-2\.5 {
    margin-top:
        0.625rem;
}


.mr-2 {
    margin-right:
        0.5rem;
}

.mr-6 {
    margin-right:
        1.5rem;
}

.-mr-1 {
    margin-right:
        -0.25rem;
}

.-mr-2 {
    margin-right:
        -0.5rem;
}

.mb-0 {
    margin-bottom:
        0px;
}

.mb-1 {
    margin-bottom:
        0.25rem;
}

.mb-2 {
    margin-bottom:
        0.5rem;
}

.mb-3 {
    margin-bottom:
        0.75rem;
}

.mb-4 {
    margin-bottom:
        1rem;
}

.mb-5 {
    margin-bottom:
        1.25rem;
}


.mb-8 {
    margin-bottom:
        2rem;
}

.mb-0\.5 {
    margin-bottom:
        0.125rem;
}

.ml-2 {
    margin-left:
        0.5rem;
}

.ml-6 {
    margin-left:
        1.5rem;
}

.box-content {
    box-sizing:
        content-box;
}

.block {
    display:
        block;
}

.inline-block {
    display:
        inline-block;
}

.inline {
    display:
        inline;
}

.flex {
    display:
        flex;
}

.inline-flex {
    display:
        inline-flex;
}

.table {
    display:
        table;
}

.grid {
    display:
        grid;
}

.grid-cols-6 {
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
}

.w-9 {
    width: 2.25rem;
}

.h-9 {
    height: 2.25rem;
}

.contents {
    display:
        contents;
}

.list-item {
    display:
        list-item;
}

.hidden {
    display:
        none;
}

.h-4 {
    height:
        1rem;
}

.h-5 {
    height:
        1.25rem;
}

.h-6 {
    height:
        1.5rem;
}

.h-8 {
    height:
        2rem;
}

.h-12 {
    height:
        3rem;
}

.h-16 {
    height:
        4rem;
}

.h-20 {
    height:
        5rem;
}

.h-24 {
    height:
        6rem;
}

.h-36 {
    height:
        9rem;
}

.h-52 {
    height:
        13rem;
}

.h-60 {
    height:
        15rem;
}

.h-96 {
    height:
        24rem;
}

.h-auto {
    height:
        auto;
}

.h-full {
    height:
        100%;
}

.h-screen {
    height:
        100vh;
}


.w-0 {
    width:
        0px;
}

.w-4 {
    width:
        1rem;
}

.w-5 {
    width:
        1.25rem;
}

.w-6 {
    width:
        1.5rem;
}

.w-8 {
    width:
        2rem;
}

.w-10 {
    width:
        2.5rem;
}

.w-12 {
    width:
        3rem;
}

.w-13 {
    width:
        3.25rem;
}

.w-16 {
    width:
        4rem;
}

.w-20 {
    width:
        5rem;
}

.w-28 {
    width:
        7rem;
}

.w-40 {
    width:
        10rem;
}

.w-48 {
    width:
        12rem;
}

.w-56 {
    width:
        14rem;
}

.w-60 {
    width:
        15rem;
}

.w-64 {
    width:
        16rem;
}

.w-72 {
    width:
        18rem;
}

.w-96 {
    width:
        24rem;
}

.w-0\.16 {
    width:
        0.16rem;
}

.w-full {
    width:
        100%;
}

.w-screen {
    width:
        100vw;
}



.flex-1 {
    flex:
        1 1 0%;
}

.flex-none {
    flex:
        none;
}

.flex-shrink-0 {
    flex-shrink:
        0;
}

.flex-grow-0 {
    flex-grow:
        0;
}

.flex-grow {
    flex-grow:
        1;
}

.origin-bottom-right {
    transform-origin:
        bottom right;
}

.origin-bottom-left {
    transform-origin:
        bottom left;
}

.transform {
    --tw-translate-x:
        0;
    --tw-translate-y:
        0;
    --tw-rotate:
        0;
    --tw-skew-x:
        0;
    --tw-skew-y:
        0;
    --tw-scale-x:
        1;
    --tw-scale-y:
        1;
    transform:
        translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform-gpu {
    --tw-translate-x:
        0;
    --tw-translate-y:
        0;
    --tw-rotate:
        0;
    --tw-skew-x:
        0;
    --tw-skew-y:
        0;
    --tw-scale-x:
        1;
    --tw-scale-y:
        1;
    transform:
        translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-8 {
    --tw-translate-y:
        2rem;
}

.translate-y-28 {
    --tw-translate-y:
        7rem;
}

.-translate-y-2 {
    --tw-translate-y:
        -0.5rem;
}

.scale-75 {
    --tw-scale-x:
        .75;
    --tw-scale-y:
        .75;
}

.scale-100 {
    --tw-scale-x:
        1;
    --tw-scale-y:
        1;
}

.scale-110 {
    --tw-scale-x:
        1.1;
    --tw-scale-y:
        1.1;
}

@keyframes spin {
    to {
        transform:
            rotate(360deg);
    }
}

@keyframes ping {

    75%,
    100% {
        transform:
            scale(2);
        opacity:
            0;
    }
}

@keyframes pulse {
    50% {
        opacity:
            .5;
    }
}

@keyframes bounce {

    0%,
    100% {
        transform:
            translateY(-25%);
        animation-timing-function:
            cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform:
            none;
        animation-timing-function:
            cubic-bezier(0, 0, 0.2, 1);
    }
}

.resize {
    resize:
        both;
}

.list-disc {
    list-style-type:
        disc;
}

.flex-row {
    flex-direction:
        row;
}

.flex-row-reverse {
    flex-direction:
        row-reverse;
}

.flex-col {
    flex-direction:
        column;
}

.flex-wrap {
    flex-wrap:
        wrap;
}

.items-start {
    align-items:
        flex-start;
}

.items-end {
    align-items:
        flex-end;
}

.items-center {
    align-items:
        center;
}

.items-stretch {
    align-items:
        stretch;
}

.justify-start {
    justify-content:
        flex-start;
}

.justify-end {
    justify-content:
        flex-end;
}

.justify-center {
    justify-content:
        center;
}

.justify-between {
    justify-content:
        space-between;
}

.justify-around {
    justify-content:
        space-around;
}

.justify-items-center {
    justify-items:
        center;
}

.gap-1 {
    gap:
        0.25rem;
}

.gap-2 {
    gap:
        0.5rem;
}

.gap-1\.5 {
    gap:
        0.375rem;
}

.space-x-0> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(0px * var(--tw-space-x-reverse));
    margin-left:
        calc(0px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-1> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(0.25rem * var(--tw-space-x-reverse));
    margin-left:
        calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(0.5rem * var(--tw-space-x-reverse));
    margin-left:
        calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(0.75rem * var(--tw-space-x-reverse));
    margin-left:
        calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(1rem * var(--tw-space-x-reverse));
    margin-left:
        calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-5> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(1.25rem * var(--tw-space-x-reverse));
    margin-left:
        calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(1.5rem * var(--tw-space-x-reverse));
    margin-left:
        calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-7> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(1.75rem * var(--tw-space-x-reverse));
    margin-left:
        calc(1.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(2rem * var(--tw-space-x-reverse));
    margin-left:
        calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-9> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(2.25rem * var(--tw-space-x-reverse));
    margin-left:
        calc(2.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-10> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(2.5rem * var(--tw-space-x-reverse));
    margin-left:
        calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-11> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(2.75rem * var(--tw-space-x-reverse));
    margin-left:
        calc(2.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-12> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(3rem * var(--tw-space-x-reverse));
    margin-left:
        calc(3rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-0\.5> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse:
        0;
    margin-right:
        calc(0.125rem * var(--tw-space-x-reverse));
    margin-left:
        calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(0px * var(--tw-space-y-reverse));
}

.space-y-1> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-7> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(1.75rem * var(--tw-space-y-reverse));
}

.space-y-8> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(2rem * var(--tw-space-y-reverse));
}

.space-y-9> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(2.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(2.25rem * var(--tw-space-y-reverse));
}

.space-y-10> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(2.5rem * var(--tw-space-y-reverse));
}

.space-y-11> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(2.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(2.75rem * var(--tw-space-y-reverse));
}

.space-y-12> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(3rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(3rem * var(--tw-space-y-reverse));
}

.space-y-3\.5> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse:
        0;
    margin-top:
        calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:
        calc(0.875rem * var(--tw-space-y-reverse));
}

.divide-x> :not([hidden])~ :not([hidden]) {
    --tw-divide-x-reverse:
        0;
    border-right-width:
        calc(1px * var(--tw-divide-x-reverse));
    border-left-width:
        calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y> :not([hidden])~ :not([hidden]) {
    --tw-divide-y-reverse:
        0;
    border-top-width:
        calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width:
        calc(1px * var(--tw-divide-y-reverse));
}

.divide-dtv-light-gray-30> :not([hidden])~ :not([hidden]) {
    border-color:
        rgba(149, 160, 177, 0.3);
}

.divide-dtv-white-20> :not([hidden])~ :not([hidden]) {
    border-color:
        rgba(255, 255, 255, 0.2);
}

.self-start {
    align-self:
        flex-start;
}

.self-end {
    align-self:
        flex-end;
}

.overflow-hidden {
    overflow:
        hidden;
}

.overflow-visible {
    overflow:
        visible;
}

.truncate {
    overflow:
        hidden;
    text-overflow:
        ellipsis;
    white-space:
        nowrap;
}

.break-all {
    word-break:
        break-all;
}

.rounded-none {
    border-radius:
        0px;
}

.rounded {
    border-radius:
        0.25rem;
}

.rounded-md {
    border-radius:
        0.375rem;
}

.rounded-xl {
    border-radius:
        0.75rem;
}

.rounded-2xl {
    border-radius:
        1rem;
}

.rounded-3xl {
    border-radius:
        1.5rem;
}

.rounded-full {
    border-radius:
        9999px;
}

.rounded-dtv-card {
    border-radius:
        2.5rem;
}

.rounded-dtv-card-focused {
    border-radius:
        2.5rem;
}

.rounded-r {
    border-top-right-radius:
        0.25rem;
    border-bottom-right-radius:
        0.25rem;
}

.border {
    border-width:
        1px;
}

.border-b {
    border-bottom-width:
        1px;
}

.border-l-0 {
    border-left-width:
        0px;
}

.border-black {
    --tw-border-opacity:
        1;
    border-color:
        rgba(0, 0, 0, var(--tw-border-opacity));
}

.border-dtv-white {
    --tw-border-opacity:
        1;
    border-color:
        rgba(255, 255, 255, var(--tw-border-opacity));
}

.border-dtv-white-50 {
    border-color:
        rgba(255, 255, 255, 0.5);
}

.border-opacity-10 {
    --tw-border-opacity:
        0.1;
}

.bg-black {
    --tw-bg-opacity:
        1;
    background-color:
        rgba(0, 0, 0, var(--tw-bg-opacity));
}

.bg-white {
    --tw-bg-opacity:
        1;
    background-color:
        rgba(255, 255, 255, var(--tw-bg-opacity));
}

.bg-red-500 {
    --tw-bg-opacity:
        1;
    background-color:
        rgba(239, 68, 68, var(--tw-bg-opacity));
}

.bg-dtv-gray {
    --tw-bg-opacity:
        1;
    background-color:
        rgba(183, 192, 204, var(--tw-bg-opacity));
}

.bg-dtv-white {
    --tw-bg-opacity:
        1;
    background-color:
        rgba(255, 255, 255, var(--tw-bg-opacity));
}

.bg-dtv-dark-gray {
    --tw-bg-opacity:
        1;
    background-color:
        rgba(43, 49, 58, var(--tw-bg-opacity));
}

.bg-dtv-gray-30 {
    background-color:
        rgba(25, 31, 39, 0.3);
}

.bg-dtv-gray-20 {
    background-color:
        rgba(25, 31, 39, 0.2);
}

.bg-dtv-white-10 {
    background-color:
        rgba(255, 255, 255, 0.1);
}

.bg-dtv-white-30 {
    background-color:
        rgba(255, 255, 255, 0.3);
}

.bg-dtv-black-30 {
    background-color:
        rgba(0, 0, 0, 0.3);
}

.bg-dtv-black-50 {
    background-color:
        rgba(0, 0, 0, 0.5);
}

.bg-opacity-10 {
    --tw-bg-opacity:
        0.1;
}

.bg-gradient-to-r {
    background-image:
        linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-b {
    background-image:
        linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-black-transparent {
    background-image:
        linear-gradient(to top, black 25%, transparent);
}

.bg-gradient-black-right-transparent {
    background-image:
        linear-gradient(135deg, transparent 30%, black 90%);
}

.bg-gradient-black-left-transparent {
    background-image:
        linear-gradient(225deg, transparent 30%, black 90%);
}

.bg-gradient-green {
    background-image:
        linear-gradient(121deg, #2B313A66 42.02%, #11BB0E33 89.69%);
}

.bg-gradient-red {
    background-image:
        linear-gradient(121deg, #2B313A66 42.02%, #DE2C2C33 89.69%);
}

.bg-gradient-gray {
    background-image:
        linear-gradient(121deg, #2B313A66 42.02%, #88888833 89.69%);
}

.bg-gradient-black-right-top-transparent {
    background-image:
        linear-gradient(225deg, black 5%, transparent 35%);
}

.from-dtv-white {
    --tw-gradient-from:
        #FFFFFF;
    --tw-gradient-stops:
        var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.from-dtv-dark-gray {
    --tw-gradient-from:
        #2B313A;
    --tw-gradient-stops:
        var(--tw-gradient-from), var(--tw-gradient-to, rgba(43, 49, 58, 0));
}

.to-black {
    --tw-gradient-to:
        #000;
}

.to-dtv-gray-gradient-end {
    --tw-gradient-to:
        #999999;
}

.bg-cover {
    background-size:
        cover;
}

.bg-clip-text {
    -webkit-background-clip:
        text;
    background-clip:
        text;
}

.bg-top {
    background-position:
        top;
}

.object-contain {
    -o-object-fit:
        contain;
    object-fit:
        contain;
}

.object-cover {
    -o-object-fit:
        cover;
    object-fit:
        cover;
}

.object-center {
    -o-object-position:
        center;
    object-position:
        center;
}

.p-0 {
    padding:
        0px;
}

.p-1 {
    padding:
        0.25rem;
}

.p-2 {
    padding:
        0.5rem;
}

.p-3 {
    padding:
        0.75rem;
}

.p-4 {
    padding:
        1rem;
}

.p-5 {
    padding:
        1.25rem;
}

.p-6 {
    padding:
        1.5rem;
}

.p-7 {
    padding:
        1.75rem;
}

.p-8 {
    padding:
        2rem;
}

.p-10 {
    padding:
        2.5rem;
}

.p-bug {
    padding:
        0.3rem;
}

.px-1 {
    padding-left:
        0.25rem;
    padding-right:
        0.25rem;
}

.px-2 {
    padding-left:
        0.5rem;
    padding-right:
        0.5rem;
}

.px-3 {
    padding-left:
        0.75rem;
    padding-right:
        0.75rem;
}

.px-4 {
    padding-left:
        1rem;
    padding-right:
        1rem;
}

.px-7 {
    padding-left:
        1.75rem;
    padding-right:
        1.75rem;
}

.px-10 {
    padding-left:
        2.5rem;
    padding-right:
        2.5rem;
}

.px-1\.5 {
    padding-left:
        0.375rem;
    padding-right:
        0.375rem;
}

.py-1 {
    padding-top:
        0.25rem;
    padding-bottom:
        0.25rem;
}

.py-2 {
    padding-top:
        0.5rem;
    padding-bottom:
        0.5rem;
}

.py-3 {
    padding-top:
        0.75rem;
    padding-bottom:
        0.75rem;
}

.py-5 {
    padding-top:
        1.25rem;
    padding-bottom:
        1.25rem;
}

.py-10 {
    padding-top:
        2.5rem;
    padding-bottom:
        2.5rem;
}

.pt-1 {
    padding-top:
        0.25rem;
}

.pt-2 {
    padding-top:
        0.5rem;
}

.pt-3 {
    padding-top:
        0.75rem;
}

.pt-7 {
    padding-top:
        1.75rem;
}

.pt-8 {
    padding-top:
        2rem;
}

.pt-2\.5 {
    padding-top:
        0.625rem;
}

.pr-1 {
    padding-right:
        0.25rem;
}

.pr-2 {
    padding-right:
        0.5rem;
}

.pr-3 {
    padding-right:
        0.75rem;
}

.pb-3 {
    padding-bottom:
        0.75rem;
}

.pb-4 {
    padding-bottom:
        1rem;
}

.pb-6 {
    padding-bottom:
        1.5rem;
}

.pb-7 {
    padding-bottom:
        1.75rem;
}

.pb-10 {
    padding-bottom:
        2.5rem;
}

.pl-1 {
    padding-left:
        0.25rem;
}

.pl-2 {
    padding-left:
        0.5rem;
}

.pl-3 {
    padding-left:
        0.75rem;
}

.pl-5 {
    padding-left:
        1.25rem;
}

.pl-7 {
    padding-left:
        1.75rem;
}

.text-left {
    text-align:
        left;
}

.text-center {
    text-align:
        center;
}

.text-right {
    text-align:
        right;
}

.text-xs {
    font-size:
        0.75rem;
    line-height:
        1rem;
}

.text-sm {
    font-size:
        0.875rem;
    line-height:
        1.25rem;
}

.text-base {
    font-size:
        1rem;
    line-height:
        1.5rem;
    color: #fff;
}

.text-lg {
    font-size:
        1.125rem;
    line-height:
        1.75rem;
}

.text-xl {
    font-size:
        1.25rem;
    line-height:
        1.75rem;
}

.text-dtv-large {
    font-size:
        1.75rem;
}

.text-dtv-micro {
    font-size:
        0.63rem;
}

.font-normal {
    font-weight:
        400;
}

.font-medium {
    font-weight:
        500;
}

.font-semibold {
    font-weight:
        600;
}

.font-bold {
    font-weight:
        700;
}

.uppercase {
    text-transform:
        uppercase;
}

.lowercase {
    text-transform:
        lowercase;
}

.capitalize {
    text-transform:
        capitalize;
}

.italic {
    font-style:
        italic;
}

.ordinal {
    --tw-ordinal:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-slashed-zero:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-numeric-figure:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-numeric-spacing:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-numeric-fraction:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    font-variant-numeric:
        var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.ordinal {
    --tw-ordinal:
        ordinal;
}

.leading-tight {
    line-height:
        1.25;
}

.tracking-tight {
    letter-spacing:
        -.01em;
}

.tracking-normal {
    letter-spacing:
        0em;
}

.tracking-widest {
    letter-spacing:
        .10em;
}

.text-transparent {
    color:
        transparent;
}

.text-dtv-gray {
    --tw-text-opacity:
        1;
    color:
        rgba(183, 192, 204, var(--tw-text-opacity));
}

.text-dtv-white {
    --tw-text-opacity:
        1;
    color:
        rgba(255, 255, 255, var(--tw-text-opacity));
}

.text-dtv-neutral-white {
    --tw-text-opacity:
        1;
    color:
        rgba(238, 238, 238, var(--tw-text-opacity));
}

.text-dtv-light-white {
    --tw-text-opacity:
        1;
    color:
        rgba(230, 234, 239, var(--tw-text-opacity));
}

.text-dtv-light-gray {
    --tw-text-opacity:
        1;
    color:
        rgba(136, 136, 136, var(--tw-text-opacity));
}

.text-dtv-white-30 {
    color:
        rgba(255, 255, 255, 0.3);
}

.text-dtv-white-50 {
    color:
        rgba(255, 255, 255, 0.5);
}

.text-dtv-white-70 {
    color:
        rgba(255, 255, 255, 0.7);
}

.underline {
    text-decoration:
        underline;
}

.line-through {
    text-decoration:
        line-through;
}

.opacity-0 {
    opacity:
        0;
}

.opacity-20 {
    opacity:
        0.2;
}

.opacity-30 {
    opacity:
        0.3;
}

.opacity-50 {
    opacity:
        0.5;
}

.opacity-70 {
    opacity:
        0.7;
}

.opacity-100 {
    opacity:
        1;
}

*,
::before,
::after {
    --tw-shadow:
        0 0 #0000;
}

.shadow {
    --tw-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    box-shadow:
        var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

*,
::before,
::after {
    --tw-ring-inset:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-ring-offset-width:
        0px;
    --tw-ring-offset-color:
        #fff;
    --tw-ring-color:
        rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow:
        0 0 #0000;
    --tw-ring-shadow:
        0 0 #0000;
}

.filter {
    --tw-blur:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-brightness:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-contrast:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-grayscale:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-hue-rotate:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-invert:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-saturate:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-sepia:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-drop-shadow:
        var(--tw-empty,
            /*!*/
            /*!*/
        );
    filter:
        var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur {
    --tw-blur:
        blur(8px);
}

.invert {
    --tw-invert:
        invert(100%);
}

.transition-all {
    transition-property:
        all;
    transition-timing-function:
        cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration:
        150ms;
}

.transition {
    transition-property:
        background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function:
        cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration:
        150ms;
}

.transition-opacity {
    transition-property:
        opacity;
    transition-timing-function:
        cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration:
        150ms;
}

.transition-transform {
    transition-property:
        transform;
    transition-timing-function:
        cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration:
        150ms;
}

.transition-width {
    transition-property:
        width;
    transition-timing-function:
        cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration:
        150ms;
}

.delay-300 {
    transition-delay:
        300ms;
}

.duration-300 {
    transition-duration:
        300ms;
}

.duration-500 {
    transition-duration:
        500ms;
}

.duration-700 {
    transition-duration:
        700ms;
}

.duration-1000 {
    transition-duration:
        1000ms;
}

.ease-out {
    transition-timing-function:
        cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
    transition-timing-function:
        cubic-bezier(0.4, 0, 0.2, 1);
}

.line-clamp-1 {
    overflow:
        hidden;
    display:
        -webkit-box;
    -webkit-box-orient:
        vertical;
    -webkit-line-clamp:
        1;
}

.line-clamp-2 {
    overflow:
        hidden;
    display:
        -webkit-box;
    -webkit-box-orient:
        vertical;
    -webkit-line-clamp:
        2;
}

.line-clamp-3 {
    overflow:
        hidden;
    display:
        -webkit-box;
    -webkit-box-orient:
        vertical;
    -webkit-line-clamp:
        3;
}

.line-clamp-4 {
    overflow:
        hidden;
    display:
        -webkit-box;
    -webkit-box-orient:
        vertical;
    -webkit-line-clamp:
        4;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(2.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-2.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(150%);
    }
}

@keyframes slideLeft {
    from {
        transform: translateX(120%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        transform: translateX(-20%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes rotateBug {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 500ms ease-in-out forwards;
}

.animate-fadeInDown {
    animation: fadeInDown 500ms ease-in-out forwards;
}

.animate-fadeOut {
    animation: fadeOut 300ms ease-in-out forwards;
}

.animate-fadeIn {
    animation: fadeIn 300ms ease-in-out forwards;
}

.animate-scaleIn {
    animation: scaleIn 500ms ease-in-out forwards;
}

.animate-slideDown {
    animation: slideDown 1000ms ease-in-out forwards;
}

.animate-slideLeft {
    animation: slideLeft 800ms ease-in-out forwards;
}

.animate-slideRight {
    animation: slideRight 800ms ease-out forwards;
}

.animate-gradient {
    background:
        radial-gradient(circle at bottom center,
            var(--dtv-gradient-primary) 0%,
            transparent 65%),
        radial-gradient(circle at top center, #0b0f2a -50%, transparent 40%),
        linear-gradient(to bottom, var(--dtv-gradient-secondary), #0b0f2a) !important;
}

.icon-button-gradient {
    background:
        radial-gradient(ellipse 60% 60% at top,
            var(--dtv-gradient-primary) -30%,
            transparent 100%),
        linear-gradient(to bottom, black, black);
}

.selected-animate-gradient {
    background:
        radial-gradient(circle at bottom center,
            var(--dtv-success) 0%,
            transparent 65%),
        radial-gradient(circle at top center, #0b0f2a -50%, transparent 40%),
        linear-gradient(to bottom, var(--dtv-success), #0b0f2a) !important;
}

.animate-gradient-without-background {
    background:
        radial-gradient(circle at bottom center,
            var(--dtv-gradient-primary) -30%,
            transparent 45%),
        linear-gradient(to bottom, rgba(43, 49, 58, 0.2), rgba(43, 49, 58, 0.2)) !important;
}

.grey-overlay-gradient {
    background: linear-gradient(270deg,
            rgba(153, 153, 153, 0.3) 0%,
            rgba(255, 255, 255, 0.3) 100%) !important;
}

*:focus {
    outline: none;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: "Inter", sans-serif;
    font-feature-settings:
        "cv11" on,
        "cv05" on,
        "cv04" on,
        "cv03" on,
        "cv06" on,
        "cv01" on;
    margin: 0;
}

svg {
    display: block;
    width: 100%;
    height: 100%;
}

.default-card-border,
.focused-card-border,
.selected-border,
.is-correct-border,
.is-incorrect-border,
.focused-border,
.panel-border,
.card-border-white-gray,
.default-border,
.table-border,
.focused-key-border,
.default-key-border {
    position: relative;
}

.default-card-border::before,
.focused-card-border::before,
.selected-border::before,
.is-correct-border::before,
.is-incorrect-border::before,
.panel-border::before,
.focused-border::before,
.card-border-white-gray::before,
.default-border::before,
.table-border::before,
.focused-key-border::before,
.default-key-border::before {
    content: "";
    position: absolute;
    left: -0.15rem;
    top: -0.15rem;
    right: -0.15rem;
    bottom: -0.05rem;
    border-radius: 50%;
    padding: 0.25rem;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.selected-border::before {
    background: var(--dtv-success);
    border-radius: 2.5rem;
}

.is-correct-border::before {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.1) 50%),
        radial-gradient(ellipse 60% 25% at bottom, rgb(17, 187, 14, 0.7), #de2c2c00);
    padding: 0.12rem;
    border-radius: 2.5rem;
}

.is-incorrect-border::before {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.1) 50%),
        radial-gradient(ellipse 60% 25% at bottom, rgba(213, 82, 6, 0.7), #de2c2c00);
    padding: 0.12rem;
    border-radius: 2.5rem;
}

.focused-card-border::before {
    background: conic-gradient(var(--dtv-gradient-secondary),
            var(--dtv-gradient-primary),
            var(--dtv-gradient-secondary));
    border-radius: 2.5rem;
}

.focused-key-border::before,
.default-key-border::before {
    border-radius: 0.5rem;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.focused-key-border::before {
    padding: 0.1875rem;
    background: conic-gradient(var(--dtv-gradient-secondary),
            var(--dtv-gradient-primary),
            var(--dtv-gradient-secondary));
}

.default-key-border::before {
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.1) 50%);
    padding: 0.0625rem;
}

.focused-border::before {
    background: conic-gradient(from 180deg,
            var(--dtv-gradient-secondary),
            var(--dtv-gradient-primary),
            var(--dtv-gradient-secondary));
}

.icon-button-border {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0.12rem;
}

.icon-button-border::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.01rem;
    top: -0.01rem;
    right: -0.01rem;
    bottom: -0.01rem;
    border-radius: 50%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.08) 50%);
    padding: 0.12rem;
}

.icon-button-border.is-icon-button-focused::before {
    left: -0.12rem;
    top: -0.12rem;
    right: -0.12rem;
    bottom: -0.12rem;
    background: linear-gradient(to bottom,
            var(--dtv-gradient-primary),
            var(--dtv-gradient-secondary));
}

.bug-border {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0.15rem;
}

.bug-border.is-bug-focused::before {
    opacity: 1;
    animation: rotateBug 2s linear 3;
}

.bug-border::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.1rem;
    top: -0.1rem;
    right: -0.1rem;
    bottom: -0.1rem;
    border-radius: 50%;
    background: linear-gradient(to right,
            #5fd9ef 4%,
            #1545ff 90%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
}

.default-border::before {
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.08) 50%);
    padding: 0.12rem;
}

.panel-border::before,
.default-card-border::before,
.table-border::before {
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.1) 50%);
    padding: 0.12rem;
    border-radius: 2.5rem;
}

.panel-border::before {
    border-radius: 1rem;
}

.card-border-white-gray::before {
    top: -0.125rem;
    left: -0.14rem;
    right: -0.14rem;
    bottom: -0.125rem;
    padding: 0.125rem;
    border-radius: 1.5rem;
    background: linear-gradient(153.43deg,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(100, 100, 100, 0.3) 50%);
}

.border-b-gradient {
    border-bottom: 1px solid transparent;
    -o-border-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent) 1;
    border-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent) 1;
}

.table-border::before {
    border-radius: 1rem;
    z-index: -1;
}

.border-b-gradient-reverse {
    border-bottom: 1px solid transparent;
    -o-border-image: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent) 1;
    border-image: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent) 1;
}

.text-shadow-black-70 {
    text-shadow: 0.67px 0.67px 1.33px #000000b2;
}


#icone-botao {
    display: none;
}

.rounded-dtv-card-focused #icone-botao,
.selecionado #icone-botao {
    display: flex;
}

.botao-titulo {
    --tw-text-opacity: 1;
    color: rgba(183, 192, 204, var(--tw-text-opacity));
    text-align: left;
    font-weight: 700;
    letter-spacing: 0em;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    opacity: 1;
}


.selecionado .botao-titulo {
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}


.botao-card {
    position: relative;
    border-radius: 2.5rem;
    background-color: rgba(25, 31, 39, 0.3);
    display: inline-block;
}

.selecionado .botao-card {
    background:
        radial-gradient(circle at bottom center,
            var(--dtv-gradient-primary) 0%,
            transparent 65%),
        radial-gradient(circle at top center, #0b0f2a -50%, transparent 40%),
        linear-gradient(to bottom, var(--dtv-gradient-secondary), #0b0f2a) !important;
}


.selecionado .botao-card::before {
    background: conic-gradient(var(--dtv-gradient-secondary),
            var(--dtv-gradient-primary),
            var(--dtv-gradient-secondary));
    content: "";
    position: absolute;
    left: -0.15rem;
    top: -0.15rem;
    right: -0.15rem;
    bottom: -0.15rem;
    padding: 0.25rem;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.botao-card::before {
    content: "";
    position: absolute;
    left: -0.15rem;
    top: -0.15rem;
    right: -0.15rem;
    bottom: -0.15rem;
    padding: 0.12rem;
    border-radius: 2.5rem;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.1) 50%);
}

.botao-card>div {
    width: 12rem;
    height: 9rem;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.botao-card>div>div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    flex: 1 1 0%;
}

.dtv-menu-content-transition {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-delay: 300ms;
    opacity: 1;
}

.dtv-icon-center-container {
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: width, height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

.dtv-icon-btn-border {
    transition-property: transform;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.dtv-icon-bg-circle {
    background-color: #000000;
    border-radius: 9999px;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-icon-button-focused .dtv-icon-bg-circle {
    background: radial-gradient(ellipse 60% 60% at top, var(--dtv-gradient-primary) -30%, transparent 100%), linear-gradient(to bottom, black, black);
}

.dtv-menu-flex-end {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
}

.dtv-menu-flex-end>*+* {
    margin-top: 1rem;
}

.dtv-submenu-panel {
    width: 100%;
    height: 15rem;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    animation: fadeInUp 500ms ease-in-out forwards;
}



#icone-botao-fechar {
    width: 2rem;
    height: 2rem;
    color: white;
    --icon-color-0: white;
    --icon-color-1: white;
}