/* === Global === */

:root {
    /* cores */
    --ms-black: #333;
    --ms-erro: #B74545;
    --ms-erro-light: #FFD0D0;
    --ms-fundo: #f5f5f5;
    --ms-green: #219653;
    --ms-green-fade: #8ec79e;
    --ms-gray-light: #e0e0e0;
    --ms-orange: #F2994A;
    --ms-orange-dark: #e69043;
    --white: #fff;

    /* fontes */
    --rodape__font--size: 0.85rem;
    --global__font--size: 16px;
}

html {
    font-size: var(--global__font--size);
    font-weight: 400;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: var(--global__font--size);
    font-weight: 400;
    color: var(--ms-black);
    background: var(--ms-fundo);
    margin-bottom: 90px;
}

body.popup {
    margin-top: 0 !important;
}

/* === Folha de estilos para sobreposição da
apresentacao padrao do Django-Admin === */

#top_ms {
    height: 40px;
}

#user-tools {
    padding: 5.2em 10px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

#branding h1 {
    font-weight: bold;
}

/* Inicio dos estilos que afetam o /admin/docs (documentacao tecnica do site) */

div#content-main h2 > p,
div#content-main > p{
    font-size: 1rem;
    color: var(--ms-black-light);
}

div#content-main > h1 {
    font-size: 1.25rem;
    font-weight: normal;
    color: var(--ms-black);
    text-shadow: 1px 1px var(--ms-gray-light);
}

div#content-main h2 > p,
div#content-main > p{
    font-weight: lighter;
}

div#content-main > h3 {
    padding: 1.5rem 0 0.75rem 0;
    font-size: 1.10rem;
    font-weight: normal;
    text-transform: uppercase;
    color: var(--ms-green);
    text-shadow: 1px 1px var(--ms-gray-light);
}

div#content-main > p.small {
    font-size: 0.85rem;
    font-style: normal;
    font-weight: normal;
    color: var(--ms-green);
    margin-top: 1rem;
}

div#content-main table.model {
    display: table;
}

div#content-main table.model td:nth-child(odd) {
    width: 40%;
}

/* Fim dos estilos de documentacao tecnica */

/* fix sobreposicao do rodape no conteudo */
section.custom_history,
section.importacao_resultado,
div.content {
    padding-bottom: 75px;
}

.content-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px;
}

.centralizar {
    height: 17px;
}

ul li {
    list-style-type: none;
    padding: 1px 0;
}

li,
dt,
dd {
    font-size: inherit;
    line-height: 23.533px;
}

/* Zera as margens do navbar e footer */

div#navbarNavDropdown ul {
    margin: 0;
}

/* Change-Form */

.nav {
    margin-bottom: 0;
}

#content-related .actionlist {
    font-size: 0.85rem;
}

.module {
    border: 1px solid #e0e0e0;
    border-bottom: 0;
}

div.module > table {
    display: flex;
    flex-direction: column;
}

table#change-history {
    display: inline-table;
}

div.module > table > caption > a.section {
    color: #333;
}

div.module > table > tbody > tr > th {
    width: 100%;
}

.form-row {
    justify-content: flex-start;
    overflow: hidden;
    padding: 10px 20px 10px 20px;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 5px;
}

.form-row > * {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 30ch;
}

.form-row:last-child {
    padding-bottom: 10px;
    border-bottom: 0;
}

.form-row div div.readonly {
    padding-top: 9px !important;
}

.form-row.field-titulo > div,
.form-row.field-descricao > div,
.form-row.field-solucao > div {
    display: flex;
}

.form-row.field-titulo input,
.form-row.field-descricao textarea,
.form-row.field-solucao textarea {
    width: 100%;
}

/* fix para tela de budget (6 meses por linha) */
.form-row.field-valor01 > * {
    flex-basis: 15%;
}

.fieldBox {
    display: flex;
    flex-direction: column;
    margin: 0 0 10px 0;
    border-left: 5px solid #28a74521;
    padding-left: 10px;
}

.fieldBox.hidden {
    display: none;
}

/* div.field-obs>div, */
div.field-obs_desconto_hist > div {
    display: flex;
    flex-direction: column;
}

div.field-obs_desconto_hist > div {
    padding-bottom: 15px;
}

div.field-obs > div > div.help {
    padding-left: 5px;
}

.field-arquivo_ss,
.field-arquivo_orcamento,
.field-arquivo_pp_final,
.fieldBox input,
.fieldBox select {
    margin-right: auto;
}

.vForeignKeyRawIdAdminField,
.vDateField {
    margin-right: 5px !important;
}

/* campos "orfãos" do form-row para os quais
o django nao cria a classe fieldbox para a div seguinte */
.form-row.field-ultima_interacao > div,
.form-row.field-interacao > div,
.form-row.field-arquivo > div,
.form-row.field-obs > div,
.form-row.field-observacao_processo_aprovacao_relacaodespesa > div,
.form-row.field-observacao_processo_aprovacao_evento > div,
.form-row.field-observacao_processo_aprovacao_ap > div,
.form-row.field-arquivo_contrato > div,
.form-row.field-observacao > div,
.form-row.field-meta_agencia > div,
.form-row.field-consideracoes_ms > div,
.form-row.field-status_prazo > div,
.form-row.field-observacao_processo_aprovacao_plano > div,
.form-row.field-marcas > div,
.form-row.field-arquivo_solicitacao_ajuste > div {
    display: flex;
    flex-direction: column;
    border-left: 5px solid #28a74521;
    margin: 0 0 10px 0;
    padding-left: 10px;
    width: 99%
}

.field-observacao textarea {
    height: 90px;
}

fieldset.collapse {
    display: block;
}

fieldset .collapse-toggle,
.stacked_collapse-toggle {
    color: #0d8a51 !important;
}

#content {
    padding: 0;
}

#content h1 {
    height: 30px;
    text-align: left;
}

div.dropdown-menu-right .related-widget-wrapper-link:link {
    opacity: 1;
}

a.dropdown-toggle::after {
    content: none;
}

.inline-group {
    border: 1px solid #e0e0e0;
    width: 100%;
}

.module h2,
.module caption,
.inline-group h2 {
    color: #333;
    font-weight: bold;
    margin: 0;
    text-align: left;
    background: #e0e0e0;
    text-transform: uppercase;
}

.calendarbox caption {
    caption-side: top;
    text-align: center;
}

.calendarbox div.calendar-shortcuts a {
    color: #219653;
}

.calendar td a:hover,
.calendar td.selected a {
    background-color: #219653;
}

.button.default,
input.default[type="submit"],
.submit-row input.default {
    color: white;
    float: none;
    text-transform: capitalize;
}

/* Retira o label dos campos hidden do admin */
div.hidden-field {
    display: none;
}

/* Retira o nome do objeto do tabular inline */
td.original p {
    visibility: hidden
}

.inline-group .tabular tr.has_original td {
    padding-top: 5px;
}

/* Actions button, override /static/css/base.css button definition */
#changelist .actions .button {
    float: none;
    height: auto;
}

#changelist > #toolbar {
    width: 100%;
}

#changelist-filter {
    z-index: 0;
    width: 200px;
    font-size: 0.85rem;
    top: 120px;
    margin: 0.5rem;
    /* right: -20%; */
}

/*#changelist-form div.results {*/
/*    width: 89%;*/
/*}*/

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

form .aligned p,
form .aligned ul {
    margin-left: 0;
    padding-left: 5px;
}

.aligned p.file-upload {
    margin-left: 0;
}

input,
textarea,
select,
.form-row p {
    font-weight: normal;
    margin: 2px 0;
    padding: 1px 3px;
    vertical-align: middle;
}

input,
.form-row p {
    overflow: hidden;
}

textarea {
    overflow: auto;
}

.vForeignKeyRawIdAdminField {
    width: 7em;
}

.view-link li {
    list-style-type: none;
}


.selector:not(.stacked) {
    width: 1000px;
}

.selector-available,
.selector-chosen {
    width: 470px;
}

.selector select {
    width: 470px;
}

.stacked {
    float: left;
    width: 700px;
}

.stacked select {
    width: 700px;
    height: 10.1em;
}

.stacked .selector-available,
.stacked .selector-chosen {
    width: 700px;
}

.submit-row p.deletelink-box {
    float: right;
    order: 4;
}

.submit-row a.deletelink {
    height: auto;
}

/* Tabelas */

.row1 {
    background: none repeat scroll 0 0 #e8f6ed;
}

a:link,
a:visited {
    color: inherit;
    text-decoration: none;
}

a.btn-secondary,
a.btn-danger {
    color: white;
}

.btn-msystems {
    color: #fff;
    background-color: #0d8a51;
    border-color: #0d8a51;
}

div.help > a {
    color: var(--ms-green);
}

/* Filtro */

#changelist-filter li.selected a {
    color: #025e36 !important;
}

/* Botão */

li.historylink {
    margin-bottom: 15px;
    margin-left: 0;
}

div > table ul.object-tools {
    position: absolute;
}

/* div.form-row>div.fieldBox>ul.object-tools {
    display: -webkit-inline-box;
} */

table tr.row1 > td > ul.object-tools {
    display: contents;
}

.object-tools li:hover {
    background: rgba(0, 0, 0, 0) !important;
}

.object-tools a:hover,
.object-tools li:hover a {
    background: #3e8b58 !important;
}

.object-tools a.viewsitelink:hover,
.object-tools a.golink:hover {
    background: url("../imagens/admin/tooltag-arrowright_over.55abaa53aa85.gif") no-repeat scroll right top #3e8b58 !important;
}

.object-tools a.addlink:hover {
    background: url("../imagens/admin/tooltag-add_over.fa83c33fe4f8.gif") no-repeat scroll right top #3e8b58 !important;
}

.object-tools a.historylink_alert:link,
.object-tools a.historylink_alert:visited {
    background: #e94646 !important;
}

.header-object-tools > * {
    margin-bottom: 15px;
    margin-left: 30px;
    font-size: 0.80rem;
}

/* ---- Conversão Django ---- */
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
    background: #0d8a51 !important;
    border-color: #DDDDDD #AAAAAA #AAAAAA #DDDDDD;
}

a.button.cancel-link {
    display: initial;
    color: white;
}

.aligned label + div.readonly {
    text-align: left;
    margin-left: 5px;
    padding-top: 0;
}

.inline-group .aligned label {
    width: 175px;
}

div.breadcrumbs {
    padding: 5px 0 5px 0;
    background: #f5f5f5 !important;
    color: #7d7c7c !important;
    font-size: 14px;
}

div.breadcrumbs a {
    color: #1b8558 !important;
}

.module {
    margin-bottom: 0 !important;
}

#changelist #toolbar form input[type="submit"] {
    height: 35px;
    background: #fff !important;
}

#changelist #toolbar form #searchbar {
    height: 35px;
}

#changelist #toolbar form div:first-child {
    flex: 2 1 auto;
}

#changelist-search div {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 100%;
}

#changelist-search input#searchbar {
    width: 35%;
}

.object-tools a:focus,
.object-tools a:hover {
    background: #55a46f !important;
}

form .aligned div.help {
    margin-left: 0 !important;
}

div.field-vrimpacto div.help,
div.field-vrliquido div.help,
div.field-vrnegociado_avulso div.help {
    order: 1;
    margin-left: -5px !important;
}

div.interacao {
    display: flex;
    /*width: var(--div__width--xlg);*/
}

.form-row .object-tools {
    height: 2em !important;
    padding-left: 0;
    width: 150px;
}

table .form-row {
    display: table-row;
}

table .empty-form {
    display: none;
}

.errorlist {
    text-align: left !important;
}

/* fix para mensagem de erro
aparecer no lado direito do campo */
ul.errorlist {
    order: 2;
}

ul.errorlist.nonfield {
    font-size: 14px;
    font-weight: 700;
    display: block;
    padding: 10px 12px;
    color: var(--error-fg);
    border: 1px solid var(--error-fg);
    border-radius: 4px;
    background-color: var(--body-bg);
    background-position: 5px 12px;
    overflow-wrap: break-word;
}

.inline-related ul.errorlist.nonfield {
    margin: 1rem;
}

.searchbar input[type="button"] {
    border: 1px solid #ccc;
    padding: 2px 10px;
    margin: 0;
    vertical-align: middle;
    background: #fff !important;
    box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
    cursor: pointer;
    color: #333;
}

.searchbar input[type="button"]:hover,
#changelist-search input[type="submit"]:hover {
    border-color: #999;
    color: #000 !important;
}

.paginator a:link,
.paginator a:visited {
    background: #0d8a51;
}

.paginator a.showall {
    background: none;
    color: #0d8a51;
}

.paginator a.showall:focus,
.paginator a.showall:hover {
    color: #003333;
}

.datetimeshortcuts span {
    padding: 0 4px 0 2px !important;
}

.delete-confirmation form input[type="submit"] {
    background: #ba2121 !important;
}

.delete-confirmation form .cancel-link {
    background: #a6a6a6 !important;
}

.delete-confirmation form .cancel-link:hover {
    background: #929292 !important;
}

.delete-confirmation form input[type="submit"]:active,
.delete-confirmation form input[type="submit"]:focus,
.delete-confirmation form input[type="submit"]:hover {
    background: #a41515 !important;
    border: 0 !important;
}

#container h2 {
    margin: 0 !important;
}

/* ---- Campos Personalizados ---- */

.interacao p {
    margin-left: 1px !important;
    padding-left: 1px !important;
}

/* === Labels === */

.horizontal-radio label {
    width: 9em !important;
}

.interacao label {
    width: 8em !important;
}

.aligned label {
    display: block;
    float: left;
    padding: 4px 0 0;
    min-width: 195px;
    order: -2;
    margin-bottom: 0;
}

label {
    font-size: 0.90rem;
}

/* Largura das labels na tela de alteração de senha (via admin) */
label[for="id_old_password"],
label[for="id_password1"],
label[for="id_new_password1"],
label[for="id_password2"],
label[for="id_new_password2"] {
    width: 195px;
    flex-grow: 0;
}

/* Altura dos inputs na tela de alteração de senha (via admin) */
input#id_password1,
input#id_new_password1,
input#id_old_password,
input#id_password2,
input#id_new_password2,
input#id_email {
    width: 275px;
    height: 40px;
    flex-grow: 0;
}


/* Largura dos inputs na tela de edição do plano de mídia => detalhes do plano */
div#detalherevisaoplano_set-group td.field-fornecedor input,
div#detalherevisaoplano_set-group td.field-praca input,
div#detalherevisaoplano_set-group td.field-detalhepacote input,
div#detalherevisaoplano_set-group td.field-vrimpacto input,
div#detalherevisaoplano_set-group td.field-vrsimpacto input,
div#detalherevisaoplano_set-group td.field-conta select {
    width: 88px;
}

/* Largura dos inputs na tela de edição do novo pacote => patrocinios da revisao do pacote */
div#detalhepacoterevisao_set-group td.field-programacao input,
div#detalhepacoterevisao_set-group td.field-envolvimento input {
    width: 108px;
}

div#detalhepacoterevisao_set-group td.field-dtinicio input,
div#detalhepacoterevisao_set-group td.field-dtfim input,
div#detalhepacoterevisao_set-group td.field-valor_liq input,
div#detalhepacoterevisao_set-group td.field-tipo select,
div#detalhepacoterevisao_set-group td.field-fornecedor select,
div#detalhepacoterevisao_set-group td.field-conta select {
    width: 100px;
}

/* Largura do input de fornecedor na tela de edicao de AP de producao (detalhe da AP) */
div.fieldBox.field-fornecedor input {
    width: 115px;
}

/* => (adicao de restricao NBZ/VBZ) */
.fieldBox.field-nbz a.related-lookup,
.fieldBox.field-vbz a.related-lookup {
}

/* fix para descritivo do servico nao ficar sobrepondo a lupa
quando ja existe servico cadastrado */
div.fieldBox.field-servico div.related-widget-wrapper {
    display: flex;
    flex-direction: column;
}

/* === layout de tela: "adicionar/detalhe restricao nbz/vbz" === */
.form-row.field-nbz.field-vbz.field-ativo .fieldBox.field-nbz,
.form-row.field-nbz.field-vbz.field-ativo .fieldBox.field-vbz,
.form-row.field-nbz.field-vbz.field-ativo .fieldBox.field-ativo {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* === layout de tela: dt conclusao infoms === */
.fieldBox.field-dtconclusao > input {
    width: 40%;
}


/* === layout de tela: tabela/modificar custos de terceiros (producao) === */
td.field-fornecedor input {
    width: 120px;
}

form#tabelaprecorb_form div.field-dtini.field-dtfim > div,
form#tabelaprecoct_form div.field-dtini.field-dtfim > div,
form#avisomodal_form div.field-dt_inicio > div,
form#avisomodal_form div.field-dt_fim > div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

form#tabelaprecoct_form div.field-dtini.field-dtfim input {
    margin-right: 15px;
}

form#gruposervicoct_form div.field-taxa_urgencia {
    display: flex;
    flex-direction: row;
    align-items: center;
}

form#servicoct_form div.add-row {
    position: absolute;
    width: 245px;
    border: 1px solid #e0e0e0;
    margin: 15px 0 15px 0;
}

form#servicoct_form div.field-servicobase > div {
    display: flex;
    align-items: baseline;
}

form#servicoct_form div.submit-row {
    margin-top: 70px
}

/* Layout de tela: cadastro do aviso modal */

form#avisomodal_form div.field-dt_inicio *,
form#avisomodal_form div.field-dt_fim * {
    font-size: 13px;
    margin: 0 0.25rem 0 0;
    padding: 0;
}

form#avisomodal_form div.field-dt_inicio label,
form#avisomodal_form div.field-dt_fim label {
    font-size: 14px;
    margin-left: 5px
}

form#avisomodal_form div.field-dt_inicio br,
form#avisomodal_form div.field-dt_fim br {
    display: none;
}

form#avisomodal_form div.field-dt_inicio input,
form#avisomodal_form div.field-dt_fim input {
    text-align: center;
    padding: 0.25rem;
}

form#avisomodal_form input#id_dt_inicio_1,
form#avisomodal_form input#id_dt_fim_1 {
    margin-left: 0.5rem;
}

form#avisomodal_form .field-titulo input {
    width: 50%;
}

form#avisomodal_form .field-mensagem textarea {
    width: 100%;
    padding: 0.5rem;
}

form#avisomodal_form .field-fixo label,
form#avisomodal_form .field-inline label {
    padding: 0;
}

form#avisomodal_form .field-slug div {
    display: flex;
}

form#negociacao_form div#nav-tab button.nav-link {
    margin-right: 0.15rem;
    border: 1px solid var(--ms-gray-light);
    border-bottom: 0;
}

/* Outros */

.show_responsavel {
    color: #6b6b6b;
    cursor: pointer;
}

.select2-results__option {
    padding: 2px 6px;
    font-size: 13px;
}

.select2-selection__rendered {
    font-size: 13px;
}

.select2-container--default {
    min-width: 185px;
    width: auto;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ms-green);
    color: white
}

.select2-results__message {
    font-size: 12px;
}

/*chamado22310 - largura automatica para select2 do tipo multiplo*/
span.select2custom {
    width: auto !important;
}

/* Spinner para botões de consulta */
/* TODO: atualizar Bootstrap para 4.3+ */

@-webkit-keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
    color: #0d8a51;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

.disabled {
    opacity: 0.5;
    background: #CCC;
}

/* input nao editavel para forms */
.input-nao-editavel {
    background: #f2f2f2;
    color: #808080;
}

/* Largura das colunas de tabela geradas pelo ajax_simple_list.py */
table.ajax-simple-table {
    white-space: nowrap;
}

/* Tooltip wrapper para manter o tooltip do form proximo a label */
.tooltip-wrapper {
    display: flex;
    align-items: baseline;
}

.tooltip-wrapper label {
    width: auto !important;
    min-width: auto !important;
}

.field-descricao_html .readonly ol,
.field-solucao .readonly ol,
.field-descricao_html .readonly ul,
.field-solucao .readonly ul
{
    margin-left: 0;
}

.field-descricao_html .readonly ol > li,
.field-solucao .readonly ol > li
{
    list-style-type: decimal;
    list-style-position: inside;
    margin-left: 1.5em;
}

.field-descricao_html .readonly ul > li,
.field-solucao .readonly ul > li
{
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 1.5em;
}

.fieldbox-descricao-chamado .texto-descricao a,
.fieldbox-solucao-chamado .texto-descricao a,
.field-descricao_html .readonly a,
.field-solucao .readonly a {
    text-decoration: underline;
    color: var(--ms-green)
}

/* Estilos de sobreposição do tinymce */
.tox-toolbar__group {
    border-right: 1px solid #ccced1 !important;
}

.tox-toolbar__group .tox-tbtn:hover {
    background-color: var(--ms-gray-light) !important;
}

.tox-toolbar__group .tox-tbtn.tox-tbtn--enabled,
.tox-tbtn.tox-tbtn--select:hover,
.tox-tbtn.tox-tbtn--select:active,
.tox .tox-collection--list .tox-collection__item--active {
    background-color: var(--ms-gray-light) !important;
}

.tox-tbtn,
.tox-tbtn.tox-tbtn--select,
.tox-tbtn[aria-pressed="false"],
.tox-split-button[aria-pressed="false"] {
    background-color: transparent !important;
}

.tox-dialog__footer-end .tox-button {
    background-color: var(--ms-green) !important;
    border-color: var(--ms-green) !important;
}

.tox-dialog__footer-end .tox-button--secondary {
    background-color: var(--ms-gray-light) !important;
    border-color: var(--ms-gray-light) !important;
}

#nav-conversacao > fieldset {
    display: none
}

#nav-conversacao div.field-obs textarea {
    width: 98%;
}

@media screen and (min-width: 850px) {
    .submit-row {
        margin-bottom: 60px;
    }
}

/* ajustes para mobile */

@media screen and (max-width: 1024px) {
    .selector ul.selector-chooser {
        width: 56px;
    }
}

@media screen and (max-width: 834px) {

    /* botões de fluxo (aprovar, validar...)
    devem ocupar a linha toda na versão mobile */
    .submit-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 60px;
    }

    .submit-row input,
    .submit-row input.default {
        height: 40px;
        margin: 0 0 5px 0;
    }

    .submit-row a.deletelink {
        height: 40px;
        margin: 0 0 5px 0;
        text-align: center;
        font-size: 13px;
    }

    .spinner-position {
        order: -1;
        margin: 0 0 10px 0;
        text-align: center;
    }

    /* fix para o textarea e inputs na versão mobile */
    textarea,
    input#id_titulo {
        width: 100%;
    }

    /* adaptação dos itens do object tools */
    .header-object-tools a {
        font-size: 0.80rem;
    }

    .header-object-tools > * {
        margin-bottom: 10px;
        margin-left: 0;
        font-size: 0.80rem;
        padding: 10px;
    }

    /* === fix largura de input e textarea infoms === */
    .form-row.field-descricao > div,
    .form-row.field-titulo > div,
    .form-row.field-solucao > div {
        display: flex;
        flex-direction: column;
    }

    .form-row div div.readonly {
        word-break: break-word;
    }

    /* === ajustes para selecao de grupos e permissoes no mobile === */
    .form-row > div {
        display: block;
        width: 100%;
        overflow: auto;
    }

    div.results {
        display: block;
        width: 100%;
        overflow: auto;
    }

    /* === ajustes para telas de utilitarios no mobile === */
    form#changelist-form div.results {
        width: 100%;
    }

    div#changelist-filter {
        display: none;
    }

    form#changelist-search > div {
        flex-direction: column;
        align-items: start;
    }

    form#changelist-search > div > label,
    form#changelist-search > div > input,
    form#changelist-search > div > span {
        min-width: 100%;
    }

    form#changelist-search > div > input {
        margin: 0 !important;
    }

    form#changelist-form > div.actions {
        display: flex;
        align-items: center;
        width: 100%;
    }

    form#changelist-form > div.actions > label {
        display: flex;
        max-width: 90%;
    }

    form#changelist-form > div.actions > span.action-counter {
        display: none !important;
    }

    form#changelist-form > p.paginator {
        display: flex;
        align-items: center;
        width: 100%;
    }

    form#changelist-form > p.paginator > * {
        margin: 2px;
    }

    form#changelist-form > p.paginator > span.this-page {
        color: #fff;
        background: #ccc;
    }


}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #79aec8;
        --primary-fg: #fff;

        --body-fg: #333;
        --body-bg: #fff;
        --body-quiet-color: #666;
        --body-loud-color: #000;

        --breadcrumbs-fg: #c4dce8;
        --breadcrumbs-bg: var(--primary);

        --link-fg: #447e9b;
        --link-hover-color: #036;
        --link-selected-fg: #5b80b2;

        --hairline-color: #e8e8e8;
        --border-color: #ccc;

        --error-fg: #ba2121;

        --message-success-bg: #dfd;
        --message-warning-bg: #ffc;
        --message-error-bg: #ffefef;

        --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
        --selected-bg: #e4e4e4; /* E.g. selected table cells */
        --selected-row: #ffc;

        --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
        --close-button-hover-bg: #747474;
    }
}