* {font-family: Verdana, Geneva, Tahoma, sans-serif;}

:root {
  --body-background: #fff;
  --body-color: #000;
  --input-background: var(--body-background);
  --input-color: var(--body-color);
  --input-border: 1px solid #777;
  --textarea-background: var(--body-background);
  --textarea-color: var(--body-color);
  --textarea-border: var(--input-border);
  --select-background: var(--body-background);
  --select-color: var(--body-color);
  --select-border: var(--input-border);

  --input-textarea-select-focus: #369;
  --a: #dd1a2a;
  --a-hover: #f33444;
  --a-visited: var(--a);

  --button-background: #1e374b;
  --button-color: #fafafa;

  --coluna-tabela: var(--body-background);
  --celula-tabela-claro-background: #cfb53b40;
  --celula-tabela-escuro-background: #cfb53b59;
  --celula-tabela-alerta-background: #f8645962;
  --link-nome-solicitante-color: var(--body-color);
  --link-nome-solicitante-visited: var(--link-nome-solicitante-color);
  --link-nome-solicitante-color-hover: var(--a-hover);
  --linha-tabela-hover: #cfb53b1a;
  --linha-tabela-pedidos-solicitante-hover: var(--linha-tabela-hover);
  --texto-verde: #049906;
  --texto-vermelho: #dd1a2a;
  --caixa-arquivo-color: var(--input-color);
  --caixa-arquivo-border: var(--input-border);

  --barra-rolagem-background-barra: #b9b9b9;
  --barra-rolagem-background-fundo: #dbdbdb;

  --caixa-busca-background_image: url(../imagens/busca.png);
}

html {font-size: 62.5%;}
body {margin: 0; padding: 0; background: var(--body-background); color: var(--body-color); font-size: 1.2em;}
input {height: 28px; border: var(--input-border); font-size: 1.1em; background: var(--input-background); color: var(--input-color); outline: none;}
input[type="file"] {display: none;}
input[type="checkbox"] {width: 1.5rem; height: 1.5rem;}
input[type="file"]:focus, input:focus, textarea:focus, select:focus {border-color: var(--input-textarea-select-focus);}
textarea {border: var(--textarea-border); font-size: 1.1em; background: var(--textarea-background); color: var(--textarea-color); outline: none;}
select {height: 32px; border: var(--select-border); font-size: 1.1em; background: var(--select-background); color: var(--select-color); outline: none;}
button {font-size: 1.1em; text-transform: uppercase; background: var(--button-background); color: var(--button-color); border: 0px; height: 30px; outline: none; cursor: pointer;}
a {text-decoration: none; color: var(--a)}
a:visited {text-decoration: none; color: var(--a-visited)}
a:hover {color: var(--a-hover)}
table {width: 100%;}

#cabecalho_esquerdo {float: left; width: 48%; height: 50px; padding-left: 2%; background: #1E374B; color: #fff; font-size: 1.5em; display: flex; justify-content: left; align-items: center;}
#cabecalho_direito {float: right; width: 47%; height: 50px; padding-right: 3%; background: #1E374B; color: #fff; font-size: 1.4em; line-height:50px; text-align: right;}
#cabecalho_monitor {width: 98%; height: 50px; padding-left: 2%; background: #1E374B; color: #fff; font-size: 2em; display: flex; align-items: center;}

#cabecalho_direito a:link {text-decoration: none; color: #DAA520;}
#cabecalho_direito a:visited {text-decoration: none; color: #DAA520;}
#cabecalho_direito a:hover {color: #FFD700;}

#menu_vazio {float: left; width: 100%; height: 35px;}
#menu {float: left; width: 60%; background: #333; height: 35px;}
#menu ul {list-style: none; float: left; position: absolute; top: 37px; z-index: 1;}
#menu ul li {float: left; height: 35px;}
#menu ul li a {float: left; text-decoration: none; font: 15px Arial; color: #fff; padding: 9px 15px;}
#menu ul li:hover {background: #666;}
#menu ul li ul {display: none;}
#menu ul li:hover ul {display: block; position: absolute; top: 35px; background: #666; width: 180px;}
#menu ul li:hover ul li {float: left; position: relative; left: -40px; width: 220px; border-bottom: 1px solid #777;}
#menu ul li:hover ul li:last-child {border: none;}
#menu ul li:hover ul li a {width: 190px;}
#menu ul li:hover ul li a:hover {background: #888;}

#menu_nome_tela {display: flex; width: 40%; background: #333; color: #fff; height: 35px; align-items: center; justify-content: right;}
#menu_nome_tela {color: #FFD700; text-transform: uppercase;}

#conteudo {float: left; width: 100%; text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: 85px; bottom: 45px; overflow-y: auto;}
#conteudo #conteudo_bloqueado_ate_carregar {display: none;}
#conteudo #mensagem_carregando {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#conteudo #mensagem_enviando {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: auto; background: #f44336; color: #fff; font-size: 1.5em; opacity: 0.85; padding-top: 15px; padding-bottom: 15px;}
#conteudo #bloco_central {width: 75vw; max-width: 1024px; text-align: left; margin: 0 auto;}
#conteudo #bloco_central_reduzido {width: auto; text-align: left;}
#conteudo #bloco_central_visualizar {width: 90vw; text-align: left;}
#conteudo #tabela_padrao {width: 100%; height: 68vh; text-align: center; overflow: auto; overflow-y: scroll;}
#conteudo #tabela_pequena {width: 100%; height: 40vh; text-align: center; overflow: auto; overflow-y: scroll;}
#conteudo #titulo_tabela {background: #369; color: #fff; text-align: center;}

#relatorio {float: left; width: 100%;}
#relatorio #titulo {text-align: center; height: 30px; font-weight: bold;}

#celula_tabela_incolor {padding-left: 5px; padding-top: 10px; padding-bottom: 10px;}
#celula_tabela_claro {background: var(--celula-tabela-claro-background); padding-left: 5px; padding-top: 10px; padding-bottom: 10px;}
#celula_tabela_escuro {background: var(--celula-tabela-escuro-background); padding-left: 5px; padding-top: 10px; padding-bottom: 10px;}
#celula_tabela_alerta {background: var(--celula-tabela-alerta-background); padding-left: 5px; padding-top: 10px; padding-bottom: 10px;}
#celula_tabela_azul {background: rgba(51, 102, 153, 0.295); padding-left: 5px; padding-top: 10px; padding-bottom: 10px;}
#coluna_tabela {background: var(--coluna-tabela);}
#linha_tabela_pedidos_solicitante {cursor: pointer;}
#linha_tabela_pedidos_solicitante:hover {background: var(--linha-tabela-pedidos-solicitante-hover);}
#linha_tabela:hover {background: var(--linha-tabela-hover);}

#mensagem_vazio {float: left; width: 100%; height: 20px; position: absolute; bottom: 25px;}
#mensagem_vermelho {float: left; width: 100%; height: 15px; padding-top: 2px; padding-bottom: 3px; background: #DD1A2A; color: #fff; font-size: 1.2em; text-align: center; position: absolute; bottom: 25px;}
#mensagem_verde {float: left; width: 100%; height: 15px; padding-top: 2px; padding-bottom: 3px; background: #049906; color: #fff; font-size: 1.2em; text-align: center; position: absolute; bottom: 25px;}

.texto_verde{color: var(--texto-verde);}
.texto_vermelho{color: var(--texto-vermelho);}

#rodape {float:left; width: 100%; height: 25px; background: #1E374B; color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0px;}

.caixa_texto_grande {width: 98%; height: 100px; padding: 10px; resize: none;}
.caixa_texto_grande_invisivel {width: 98%; height: 18vh; padding: 10px; padding-top: 0; padding-left: 0; resize: none; border: none; font-size: 1.1em;}
.caixa_texto_grande_invisivel_reduzida {width: 98%; height: 14vh; padding: 10px; padding-top: 0; padding-left: 0; resize: none; border: none; font-size: 1.1em;}
.caixa_texto_registrar_pedido {width: 98%; height: 85px; padding: 10px; resize: none;}
.caixa_grande {padding-left: 7px; margin-bottom: 5px; width: 700px;}
.caixa_padrao {padding-left: 7px; margin-bottom: 5px; width: 300px;}
.caixa_pequena {padding-left: 7px; margin-bottom: 5px; width: 150px;}
.caixa_user {display: inline-block; padding-left: 34px; width: 250px; background-position: 7px center; background-repeat: no-repeat; background-image: url(../imagens/user.png);}
.caixa_pass {display: inline-block; padding-left: 34px; width: 250px; background-position: 7px center; background-repeat: no-repeat; background-image: url(../imagens/key.png);}
.caixa_busca {display: inline-block; padding-left: 38px; width: 30%; margin-bottom: 5px; background-position: 4px center; background-repeat: no-repeat; background-image: var(--caixa-busca-background_image);}

.caixa_arquivo_mobile {display: inline-block; border: var(--caixa-arquivo-border); border-left: 0px; border-top: 0px; color: var(--caixa-arquivo-color); display: flex; justify-content: space-between; align-items: center; padding: 1vh; max-width: 55vh; height: 3vh; font-size: 2vh;}
.botao_arquivo_mobile {color: #fff; background: #666; padding: 5px; padding-left: 25px; padding-right: 25px; cursor: pointer;}

.select_grande {padding-left: 7px; margin-bottom: 5px; width: 400px;}
.select_padrao {padding-left: 7px; margin-bottom: 5px; width: 200px;}

#link_solicitante {text-decoration: none; color: var(--link-nome-solicitante-color);}
#link_solicitante:visited {text-decoration: none; color: var(--link-nome-solicitante-visited);}
#link_solicitante:hover {color: var(--link-nome-solicitante-color-hover);}

.botao_padrao {width: 100px;}
.botao_grande {width: 160px;}
.botao_link {padding: 0px; border: 0px; width: 25px; height: 25px; background: none;}
.botao_link_fosco {padding: 0px; border: 0px; width: 25px; height: 25px; background: none; opacity: 30%; cursor: auto;}
.botao_sim_nao {border: 0px; width: 120px; height: 30px; margin: 15px;}
.botao_padrao_adicionar {width: 30px; margin-left: 2px; font-weight: bold;}

.body_monitor {margin: 0; padding: 0; background: #000; color: #ffd700; font-size: 1.3em;}
.container_monitor {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly;}
.caixa_pedido_monitor_normal {width: 40vh; height: 27vh; background: #1E374B; font-size: 1.8vh; margin-top: 1vh; padding: 1vh; border: 1px solid #67ace6; border-radius: 5px; box-shadow: #67ace6 0px 8px 24px;}
.caixa_pedido_monitor_atrasado {width: 40vh; height: 27vh; background: #f1ab4f62; font-size: 1.8vh; margin-top: 1vh; padding: 1vh; border: 1px solid #ebc490; border-radius: 5px; box-shadow: #ebc490 0px 8px 24px;}
.caixa_textarea_monitor {width: 40vh; height: 20vh; background: none; font-size: 2vh; color: #fff; resize: none; border: none; overflow-y: hidden;}

#imagem_mobile {width: 50vh; height: 27vh;}
#conteudo_mobile {font-size: 2vh; width: 100vw; height: 70vh; overflow-y: auto;}
#texto_mobile {font-size: 2vh;}
#nome_arquivo_anexar {font-size: 12px;}
.botao_mobile_grande {font-size: 2vh; color: #FFF; background: #1E374B; border: 0px; margin-top: 0.5vh; width: 40vh; height: 7vh;}
.botao_mobile_padrao {font-size: 2vh; color: #FFF; background: #1E374B; border: 0px; margin-top: 0.4vh; margin-right: 0.4vh; margin-left: 0.4vh; width: 35vh; height: 5vh;}
.botao_mobile_pequeno {font-size: 2vh; color: #FFF; background: #1E374B; border: 0px; margin: 0.5vh; margin-top: 2vh; width: 20vh; height: 5vh;}
.botao_mobile_excluir_arquivo {font-size: 2vh; font-weight: bold; color: #FFF; background: #f44336; border: 0px; margin-left: 0.5vh; margin-right: 0.5vh; width: 4vh; height: 4vh;}
.caixa_input_mobile {display:inline-block; border-left: 0px; border-top: 0px; margin-bottom: 1vh; width: 40vh; height: 5vh; min-width: 40vh; font-size: 2vh;}
.caixa_textarea_mobile {display:inline-block; border-left: 0px; border-top: 0px; margin-top: 2vh; margin-bottom: 0.5vh; width: 50vh; height: 30vh; min-width: 40vh; font-size: 2vh; padding: 10px; resize: none;}
.caixa_textarea_mobile_confirmacao {display:inline-block; border-left: 0px; border-top: 0px; margin-top: 2vh; margin-bottom: 0.5vh; width: 50vh; height: 20vh; min-width: 40vh; font-size: 2vh; padding: 10px; resize: none;}
.caixa_textarea_mobile_menor {border: 0px; width: 70vw; height: 14vh; font-size: 2vh; margin-bottom: 1vh; resize: none;}
.caixa_textarea_mobile_borda {border-left: 0px; border-top: 0px; width: 70vw; height: 17vh; font-size: 2vh; resize: none;}
.caixa_select_mobile {padding-left: 7px; margin-bottom: 5px; width: 40vh; height: 5vh; border-left: 0; border-top: 0; min-width: 40.5vh; font-size: 1.7vh;}

.respostas_rapidas {text-decoration: none; color: #fff;}
.respostas_rapidas:hover {color: #FFD700; cursor: pointer;}

/* Alert personalizado */
.monitor_informa_verde {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 76%; opacity: 0.95; background-color: null;}
.monitor_informa_verde_int {margin-top: 15%; padding-top: 5vh; padding-bottom: 5vh; width: 100%; background-color: #049906; color: #fff; font-size: 4vh; text-align: center; line-height: 25px; border-top: 1px solid #00ff04; border-bottom: 1px solid #00ff04; box-shadow: #049906 0px 7px 29px 0px;}
.monitor_informa_vermelho {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 76%; opacity: 0.92; background-color: null;}
.monitor_informa_vermelho_int {margin-top: 10%; padding-top: 8vh; padding-bottom: 8vh; width: 100%; background-color: #f44336; color: white; font-size: 4vh; text-align: center; line-height: 25px; box-shadow: #f44336 0px 8px 24px;}

.alerta {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50vh; height: 70vh; opacity: 0.95; background-color: null;}
.alerta_int {margin-top: 25vh; margin-left: 3vh; padding: 15px; width: 42vh; background-color: #f44336; color: white; font-size: 2vh; text-align: center; line-height: 3vh;}
.confirmacao_abertura_pedido {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50vh; height: 80vh; background-color: #fff;}
.confirmacao_abertura_pedido_int {margin-top: 10vh; margin-left: 3vh; padding: 15px; width: 42vh; background-color: #049906; color: white; font-size: 2vh; text-align: center; line-height: 4vh;}
.confirma_exclusao {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76%; height: 76%; opacity: 0.95; background-color: null;}
.confirma_exclusao_int {margin-top: 15%; margin-left: 25%; margin-right: 15px; padding: 15px; width: 50%; background-color: #f44336; color: white; font-size: 1.4em; text-align: center; line-height: 25px;}
.informa {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76%; height: 76%; opacity: 0.95; background-color: null;}
.informa_int {margin-top: 15%; margin-left: 25%; margin-right: 15px; padding: 15px; width: 50%; background-color: #666; color: white; font-size: 1.4em; text-align: center; line-height: 25px;}

.selecionar_resposta_rapida {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76%; height: 86%; opacity: 0.95; background-color: null;}
.selecionar_resposta_rapida_int {margin-top: 8%; margin-left: 15%; margin-right: 15px; padding: 15px; width: 70%; background-color: #666; color: white; text-align: center;}
.selecionar_resposta_rapida_tabela {margin-top: 5%; margin-left: 2%; width: 95%; height: 40vh; overflow-y: scroll;}

.closebtn {margin-left: 15px;color: white; font-weight: bold; float: right; font-size: 2.2em; line-height: 15px; cursor: pointer; transition: 0.3s;}
.closebtn:hover {color: black;}
/* Alert personalizado */

.esconde_tela {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; background-color: null;}

  /* barra de rolagem estilizada */
  ::-webkit-scrollbar-track {
    background-color: var(--barra-rolagem-background-fundo);
  }
  ::-webkit-scrollbar {
    width: 12px;
    background: var(--barra-rolagem-background-fundo);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--barra-rolagem-background-barra);
  }
  /* barra de rolagem estilizada */

  /* The switch - the box around the slider */
  .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
  }

  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
  /* Rounded sliders */