/* Variáveis */

:root {
 --cor-base:#468;
 --cor-clara:#68A;
 --cor-escura:#246;
 --cor-nuance:#f0f0f9;
 --cor-bg:#fff;
}

/* Reset */

* {
 margin:0; padding:0; border:0; outline:0;
 box-sizing:border-box;
}

/* Base */ 

html {
 position:relative;
 min-height:100%;
}

body {
 margin:0;
 height:100%;
 min-width:300px;
 overflow-y:scroll;
 overflow-x:hidden;
 background-color:var(--cor-bg);
 color:#000;
 font-size:1em;
 font-weight:400;
 font-family:Inter,Tahoma,Arial,Helvetica;
}

/* Scroll */

::-webkit-scrollbar {
 width:10px;
}

::-webkit-scrollbar-track {
 background-color:var(--cor-bg);
}

::-webkit-scrollbar-thumb {
 -webkit-border-radius:6px;
 background-color:var(--cor-base);
}

::-webkit-scrollbar-thumb:hover {
 background-color:var(--cor-escura);
}

/* jQuery UI */

.ui-widget {
 font-style:inherit !important;
 font-family:Inter,Tahoma,Arial,Helvetica !important;
 font-size:100% !important;
}

.ui-icon {
 filter:invert(0.6);
}

.ui-accordion-header{
 font-size: 1.1em !important;
}

.ui-accordion-header-icon {
 filter:invert(0);
}

.ui-icon-circle-triangle-w,.ui-icon-circle-triangle-e {
 filter:brightness(3);
}

.ui-dialog-titlebar-close {
 visibility:hidden;
}

.ui-tooltip-content {
 font-size:0.8em;
 line-height:initial;
}

.ui-accordion-header {
 outline:none !important;
}

.ui-datepicker {
 font-size:0.95em !important;
}

.ui-datepicker-calendar td,.ui-datepicker-calendar th {
 min-width:unset !important;
 margin:unset !important;
}

.ui-progressbar-value {
 height:2em !important;
}

.ui-widget-shadow {
 -webkit-box-shadow:2px 2px 5px var(--cor-base) !important;
 box-shadow: 2px 2px 5px var(--cor-base) !important;
}

.ui-autocomplete {
 max-height:200px;
 overflow-y:auto;
 overflow-x:hidden;
}

#dialog {
 display:none;
}

.dialog-fixed {
 position:fixed !important; 
}

/* Tags */

a {
 text-decoration:none;
 color:var(--cor-base);
 outline:none;
 overflow-wrap:anywhere;
}

a:hover {
 text-decoration:underline;
 color:var(--cor-escura);
}

input[type=text],input[type=password],input[type=number],input[type=time],input[type=datetime-local],input[type=date],input[type=month],input[type=file],select,textarea {
 font-family:Inter,Arial,Helvetica;
 border-style:solid;
 border-width:1px;
 border-color:var(--cor-base);
 border-radius:6px;
 background-color:#fff;
 color:#000;
 padding:3px 8px;
 margin-bottom:8px;
 outline:none;
 resize:none;
}

input[type=file] {
 width:100%;
 max-width:350px;
}

input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,input[type=time]:focus,input[type=datetime-local]:focus,input[type=date]:focus,input[type=month]:focus,select:focus,textarea:focus {
 background-color:var(--cor-nuance);
}

input[type=checkbox] {
 margin:10px 4px 13px 17px;
 vertical-align:middle;
}

input[type=checkbox]:nth-child(1) {
 margin-left:0;
}

::placeholder {
 color:var(--cor-escura);
 opacity:0.4;
 font-size:0.9em;
}

button,input[type=button],input[type=submit] {
 background-color:var(--cor-base);
 border:solid 1px var(--cor-base);
 border-radius:15px;
 padding:8px 19px;
 margin-right:6px;
 color:#fff;
 outline:none;
 cursor:pointer;
}

button:hover,input[type=button]:hover,input[type=submit]:hover {
 background-color:var(--cor-escura);
}

hr {
 border:0;
 width:100%;
 height:1px;
 background-color:var(--cor-base);
}

break {
 flex-basis:100%;
 width:0; height:0; 
 overflow:hidden;
}

header {
 position:fixed;
 width:100%;
 top:0;
 z-index:3;
}

section {
 padding-top:120px;
}

main {
 margin:1em auto 80px auto;
 padding:0 1em;
 max-width:1400px;
}

h1 {
 font-family:"Roboto Condensed",sans-serif;
 font-weight:600;
 font-size:1.9em;
 color:var(--cor-base);
 margin:1em 0 0.5em 0;
 padding:0.3em 0;
 border-bottom:solid 2px var(--cor-clara);
}

h2 {
 font-family:"Roboto Condensed",sans-serif;
 font-weight:500;
 font-size:1.7em;
 color:var(--cor-escura);
 margin:1em 0 0.5em 0;
 padding:0.3em 0;
 border-bottom:dotted 2px var(--cor-base);
}

h3 {
 font-family:"Roboto Condensed",sans-serif;
 font-weight:500;
 font-size:1.5em;
 color:var(--cor-escura);
 margin:1em 0 0 0;
}

h3t {
 display:block;
 margin-bottom:1em;
 color:var(--cor-escura);
 font-size:0.95em;
}

/* Específicos */

.nosel {
 user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 -webkit-user-select:none;
 -webkit-touch-callout:none;
 -webkit-tap-highlight-color:transparent;
}

.yessel {
 user-select:text !important;
 -moz-user-select:text !important;
 -ms-user-select:text !important;
 -webkit-user-select:text !important;
}

.noresp {
 display:initial;
}

.yesresp {
 display:none;
}

.flex {
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
}

.loading {
 display:none;
 z-index:99;
}

.load1 {
 position:absolute;
 top:0; left:0;
 z-index:99;
 width:100%;
 height:100%;
 background-color:#fff;
 opacity:0.2;
}

.load2 {
 width:48px;
 height:48px;
 position:fixed;
 top:49%;
 left:49%;
 transform:translate(-50%,-50%);
 animation:rotation 1.7s infinite ease-in-out;
}

#lightbox {
 display:none;
 width:100vw;
 height:100vh;
 top:0; left:0;
 position:fixed;
 backdrop-filter:grayscale(1) brightness(0.8);
 z-index:99;
}

#lightbox-content {
 display:none;
 position:absolute;
 width:100%; max-height:100%;
 top:50%; left:50%;
 transform:translate(-50%,-50%);
 background:#fff;
 width:100%; max-height:100%;
 border:solid 5px var(--cor-base);
 border-radius:10px;
 padding:1em;
 overflow:auto;
 margin:0 auto;
}

#lightbox-close {
 position:absolute;
 top:0; right:0;
 margin:8px 4px;
 z-index:99;
}

#lightbox-close span {
 background-color:#fff;
 border:solid 8px #fff;
 padding:8px;
 border-radius:16px;
 cursor:pointer;
 box-shadow:0 0 5px;
}

#lightbox-close span:hover {
 border:solid 8px var(--cor-base);
}

@keyframes rotation {
 from { transform:rotate(0deg); }
 to { transform:rotate(359deg); }
}

@media screen and (max-width:750px) {
 
 header {
  position:relative;
 }
 
 section {
  padding-top:0;
 }

 body {
  font-size:0.9em;
 }
 
 button {
  margin-bottom:1em;
 }
 
 .noresp {
  display:none;
 }

 .yesresp {
  display:initial;
 }

 tr { 
  display:flex; 
  justify-content:center;
  flex-direction:row;
  flex-wrap:wrap;
 }

 td,th {
  flex:1;
  min-width:200px;
  margin:1em;
 }
 
 .menu div {
  margin:0.4em 0.6em !important;
 }
 
 .topo {
  display:block;
  font-size:1.1em;
 }

}

@media screen and (max-width:200px) {
 body { display:table-column;background:url(/imagens/layout/logotipo.png) center center / contain no-repeat fixed padding-box content-box var(--cor-bg); }
}

/* Projeto */

.roboto {
 font-family:"Roboto Condensed",sans-serif;
 font-optical-sizing:auto;
 font-style:normal;
}

.inter {
 font-family:Inter,sans-serif;
 font-optical-sizing:auto;
 font-style:normal;
 font-weight:400;
}

.topo {
 padding:0.4em;
 background-color:var(--cor-nuance);
 text-align:center;
}

.footer {
 padding:0.6em;
 background-color:var(--cor-base);
 color:#fff;
 position:absolute;
 bottom:0;
 width:100%;
 min-width:300px;
}

#logo {
 width:208px;
 height:47px;
 margin:11px;
}

.menu {
 padding:0.5em;
 background-color:var(--cor-base);
 font-weight:500;
 font-size:1.1em;
}

.menu div {
 margin:0 1em;
 white-space:nowrap;
}

.menu .mpq {
 margin:-2px 0.7em;
}

.menu a {
 color:#fff;
 display:flex;
}

.menu a:hover {
 text-decoration:none;
 color:#ffd;
}

nav {
 display:none;
}

#player,#player-inout {
 display:none;
 font-size:0.75em;
 color:#779;
 width:100%;
 max-width:500px;
}

.embed-container { position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%; }
.embed-container iframe,.embed-container object,.embed-container embed { position:absolute;top:0;left:0;width:100%;height:100%; }
