/* temporary fix to load default gradio font in frontend instead of backend */


:root, .dark{
    --checkbox-label-gap: 0.25em 0.1em;
    --section-header-text-size: 12pt;
    --block-background-fill: transparent;
    width: 50%;
    min-width: 1024px;
    justify-self: center;
    align-items: center;
}

.block.padded:not(.gradio-accordion) {
    padding: 0 !important;
}

div.gradio-container{
    max-width: unset !important;
}

.hidden{
    display: none !important;
}

.compact{
    background: transparent !important;
    padding: 0 !important;
}

div.form{
    border-width: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    gap: 0.5em;
}

div.gradio-group, div.styler{
    border-width: 0 !important;
    background: none;
}
.gap.compact{
    padding: 0;
    gap: 0.2em 0;
}

div.compact{
    gap: 1em;
}


.block.gradio-dropdown,
.block.gradio-slider,
.block.gradio-textbox,
.block.gradio-number {
    border-width: 0 !important;
    box-shadow: none !important;
}

.gradio-slider input[type="number"]{
    width: 6em;
}

.gradio-slider{
    margin-top: 0.75em;
}

/* .gradio-dropdown label span:not(.has-info),
.gradio-textbox label span:not(.has-info),
.gradio-number label span:not(.has-info)
{
    margin-bottom: 0;
} */
/* 
.gradio-dropdown label span,
.gradio-textbox label span,
.gradio-number label span
{
    margin-bottom: 0 !important;
} */

.gradio-button{
    max-width: 2.2em;
    min-width: 2.2em !important;
    height: 2.4em;
    align-self: end;
    line-height: 1em;
    border-radius: 0.5em;
}