@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');

* { scrollbar-color: rgb(65 68 92);}
*::-webkit-scrollbar { width: 7px; height: 7px; background-color: rgb(90 90 90 / 20%);}
*::-webkit-scrollbar-thumb { background-color: rgb(65 68 92);}

body { margin: 0 auto; font-family: 'Roboto Condensed', sans-serif; font-size: 17px; line-height: 1.2;}
body a { text-decoration: none;}
body h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal;}
body img { border: 0;}
body input { padding: 10px; outline-offset: -1px; background-color: transparent; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; border: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1;}
body select { padding: 0 7px; outline-offset: -1px; background-color: transparent; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; border: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1;}
body textarea { height: 150px; padding: 10px; outline-offset: -1px; background-color: transparent; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; border: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body button { outline-offset: -1px; background-color: transparent; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; padding: 0; border: 0; outline: 0; line-height: 0; cursor: pointer;}

/* HEADER */
body header { position: absolute; top: 0; left: 0; background-color: rgb(25 45 60);}
body header .chave { display: none; width: 40px; height: 40px; top: 50%; left: 10px; margin: -21px 0 0; outline: 1px solid rgb(250 250 250 / 30%); text-transform: uppercase; font-size: 1.5em; color: rgb(250 250 250 / 50%);}
body header .chave.abrir { background-color: rgb(90 90 90 / 5%);}
body header .chave.fechar { background-color: rgb(90 90 90 / 20%);}
body header .logo { float: left; width: 100%; padding: 12px 0 10px; text-align: center; font-size: 0;}
body header .logo img { height: 35px;}
body header .b1 { position: absolute; width: 50px; height: 34px; top: 50%; right: 10px; margin: -17px 0 0; outline: 1px solid rgb(250 250 250 / 30%); color: rgb(250 250 250 / 50%);}

/* MAIN */
body main { overflow: hidden;}
body main .esquerda { float: left; overflow: auto;}
body main .esquerda::-webkit-scrollbar { width: 0;}
body main .direita { float: right; padding: 15px 15px 72px; position: relative; overflow: auto;}
body main .auth { padding: 140px 0 100px;}
body main .auth .icone { width: 80px; height: 80px; top: -50px; left: 50%; margin: 0 0 0 -40px; outline: 1px solid rgb(90 90 90 / 20%); background-color: rgb(250 250 250);}

/* GERAL */
body .float-left { float: left;}
body .float-right { float: right;}
body .fixed { position: fixed;}
body .absolute { position: absolute;}
body .relative { position: relative;}
body .zindex1 { z-index: 1;}
body .zindex2 { z-index: 2;}
body .flex { display: flex;}
body .flex-space { display: flex; justify-content: space-between;}
body .flex-wrap { display: flex; flex-wrap: wrap; align-content: center;}

body .wp100 { float: left; width: 100%;}
body .wp50 { float: left; width: 50%;}
body .wp33 { float: left; width: 33.3333%;}
body .wp20 { float: left; width: 20%;}
body .wx16 { float: left; width: 16px;}
body .wx30 { float: left; width: 30px;}
body .wx35 { float: left; width: 35px;}
body .wx40 { float: left; width: 40px;}
body .wx45 { float: left; width: 45px;}
body .wx50 { float: left; width: 50px;}
body .wx100 { float: left; width: 100px;}
body .wx150 { float: left; width: 150px;}
body .wx180 { float: left; width: 180px;}
body .wxp45 { float: left; width: 45px;}
body .wxp120 { float: left; width: 120px;}

body .h16 { height: 16px;}
body .h25 { height: 25px;}
body .h30 { height: 30px;}
body .h34 { height: 34px;}
body .h35 { height: 35px;}
body .h40 { height: 40px;}
body .h50 { height: 50px;}
body .wh100 { width: 100%; height: 100%;}

body .bloco { outline: 1px solid rgb(90 90 90 / 40%); outline-offset: -1px;}
body .balao { outline: 1px solid rgb(90 90 90 / 40%); outline-offset: -1px; background-color: rgb(90 90 90 / 5%);}
body .grafico { outline: 1px solid rgb(90 90 90 / 40%); outline-offset: -1px; background-color: rgb(250 250 250 / 80%);}

body .auto310 { margin: 0 auto; width: 310px; max-width: 90%;}
body .auto700 { margin: 0 auto; width: 700px; max-width: 90%;}
body .auto1000 { margin: 0 auto; width: 1000px; max-width: 90%;}

body .pad2 { padding: 2px;}
body .pad5 { padding: 5px;}
body .pad10 { padding: 10px;}
body .pad15 { padding: 15px;}
body .pad20 { padding: 20px;}
body .pad155 { padding: 15px 5px;}
body .pad205 { padding: 20px 5px;}
body .pad208 { padding: 20px 8px;}
body .pad2010 { padding: 20px 10px;}
body .pad53 { padding: 5px 3px;}
body .pad510 { padding: 5px 10px;}
body .pad3115 { padding: 31px 15px;}
body .pad105 { padding: 10px 5px;}
body .pad127 { padding: 12px 7px;}
body .pad157 { padding: 15px 7px;}
body .pad135 { padding: 13px 5px;}
body .pad50 { padding: 5px 0;}
body .pad100 { padding: 10px 0;}
body .pad110 { padding: 11px 0;}
body .pad120 { padding: 12px 0;}
body .pad180 { padding: 18px 0;}
body .pad170 { padding: 17px 0;}
body .pad150 { padding: 15px 0;}
body .pad1000 { padding: 100px 0;}
body .pad05 { padding: 0 5px;}
body .pad010 { padding: 0 10px;}
body .pad0011 { padding: 0 0 11px;}

body .mar1 { margin: 1px !important;}
body .mar1yy { margin-top: 1px !important;}
body .mar2yy { margin-top: 2px !important;}
body .mar3yy { margin-top: 3px !important;}
body .mar5yy { margin-top: 5px !important;}
body .mar8yy { margin-top: 8px !important;}
body .mar10yy { margin-top: 10px !important;}
body .mar11yy { margin-top: 11px !important;}
body .mar21yy { margin-top: 21px !important;}
body .mar18yy { margin-top: 18px !important;}
body .maryyy3 { margin-left: 3px !important;}
body .maryyy5 { margin-left: 5px !important;}
body .maryy2 { margin-bottom: 2px !important;}
body .maryy3 { margin-bottom: 3px !important;}
body .maryy5 { margin-bottom: 5px !important;}
body .maryy8 { margin-bottom: 8px !important;}
body .maryy21 { margin-bottom: 21px !important;}
body .mar1y { margin-top: 1px !important; margin-bottom: 1px !important;}
body .mar2y { margin-top: 2px !important; margin-bottom: 2px !important;}
body .mar5y { margin-top: 5px !important; margin-bottom: 5px !important;}
body .mar8y { margin-top: 8px !important; margin-bottom: 8px !important;}
body .mar11y { margin-top: 11px !important; margin-bottom: 11px !important;}
body .mar21y { margin-top: 21px !important; margin-bottom: 21px !important;}
body .mary33y { margin-right: 3px !important; margin-bottom: 3px;}
body .mary2y2 { margin-left: 2px !important; margin-right: 2px !important;}

body .contorno1_40 { border: 1px solid rgb(90 90 90 / 40%);}
body .btop1 { border-top: 1px solid rgb(140 140 140 / 50%);}
body .bright1 { border-right: 1px solid rgb(140 140 140 / 50%);}

body .bg.cinza { background-color: rgb(120 120 120 / 30%);}
body .bg.azul { background-color: rgb(30 102 184 / 30%);}
body .bg.amarelo { background-color: rgb(213 181 19 / 30%);}
body .bg.fosco { background-color: rgb(68 64 137 / 20%);}
body .bg.roza { background-color: rgb(197 91 134 / 30%);}
body .bg.roxo { background-color: rgb(116 73 105); color: rgb(255 255 255) !important;}

body .botao.verde { background-color: rgb(0 150 130); color: rgb(250 250 250) !important;}
body .botao.verde:hover { background-color: rgb(0 160 130);}
body .botao.abacate { background-color: rgb(112 159 96); color: rgb(250 250 250) !important;}
body .botao.abacate:hover { background-color: rgb(132 187 113);}
body .botao.cinza { background-color: rgb(90 90 90); color: rgb(250 250 250) !important;}
body .botao.cinza:hover { background-color: rgb(120 120 120);}
body .botao.cinza.ativo { background-color: rgb(87 133 208);}
body .botao.marrom { background-color: rgb(120 100 70); color: rgb(250 250 250) !important;}
body .botao.marrom:hover { background-color: rgb(150 100 70);}
body .botao.azul { background-color: rgb(80 115 155); color: rgb(250 250 250) !important;}
body .botao.azul:hover { background-color: rgb(110 115 155);}
body .botao.vermelho { background-color: rgb(230 0 50); color: rgb(250 250 250) !important;}
body .botao.vermelho:hover { background-color: rgb(255 0 0);}
body .botao.disfarcado { background-color: rgb(126 84 158 / 15%);}
body .botao.disfarcado:hover { background-color: rgb(126 84 158 / 30%);}
body .botao.disfarcado.ativo { background-color: rgb(126 84 158 / 30%);}

body .pointer { cursor: pointer;}
body .cover { object-fit: cover;}
body .opcy7 { opacity: 0.7;}
body .none { display: none;}
body .obrigatorio { color: rgb(255 120 120);}

body .campo:focus { outline: 1px solid rgb(55 171 200) !important; -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);}
body .textarea:focus { outline: 1px solid rgb(55 171 200) !important; -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);}
body .readonly { background-color: rgb(90 90 90 / 15%);}
body .readonly:focus { outline: 1px solid rgb(90 90 90 / 90%) !important; -webkit-box-shadow: 0 0 0 0 rgb(0 0 0 / 0); -moz-box-shadow: 0 0 0 0 rgb(0 0 0 / 0); box-shadow: 0 0 0 0 rgb(0 0 0 / 0);}
body .disabled { cursor: default !important; background-color: rgb(90 90 90) !important;}
body .disabled:hover { background-color: rgb(90 90 90) !important;}

body .border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body .bordinha { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
body .borda { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
body .circular { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px;}
body .sombrinha { -webkit-box-shadow: 0 1px 8px 0 rgb(0 0 0 / 25%); -moz-box-shadow: 0 1px 8px 0 rgb(0 0 0 / 25%); box-shadow: 0 1px 8px 0 rgb(0 0 0 / 25%);}
body .sombra { -webkit-box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%); box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%);}
body .rapidao { -webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; transition: 0.4s ease-in;}

body .text-uppercase { text-transform: uppercase;}
body .text-left { text-align: left;}
body .text-right { text-align: right;}
body .text-center { text-align: center;}
body .text-through { text-decoration: line-through;}
body .font-bold { font-weight: bold;}
body .line-height0 { line-height: 0;}
body .line-height1 { line-height: 1;}

body .font-09em { font-size: 0.9em;}
body .font-1em { font-size: 1em;}
body .font-15em { font-size: 1.5em;}
body .font-2em { font-size: 2em;}

body .color-roza { color: rgb(255, 31, 169) !important;}
body .color-amarelo { color: rgb(211 164 10) !important;}
body .color-vermelho { color: rgb(255 80 68) !important;}

body .link-menu { padding: 17px 0 17px 30px; background-repeat: no-repeat; background-position: 0 50%; text-align: left;}
body .linkh:hover { color: rgb(0 150 190) !important;}
body .linkh.ativo { color: rgb(0 150 190) !important;}
body .linkh.ativo:hover { text-decoration: underline;}

body .registro.co { padding: 11px 75px 10px 56px; border-bottom: 1px solid rgb(90 90 90 / 40%);}
body .registro.so { padding: 11px 75px 10px 5px; border-bottom: 1px solid rgb(90 90 90 / 40%);}
body .registro.sp { padding: 11px 5px 10px 5px;}

body .alerta { position: fixed; bottom: 10px; right: 10px; z-index: 300; overflow: hidden; color: rgb(20 20 20);}
body .alerta .msg { float: left;}
body .alerta .msg h2 { float: left; width: 200px; padding: 10px; background-color: rgb(165 255 192); font-size: 1em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
body .alerta .msg h3 { float: left; width: 400px; padding: 10px; background-color: rgb(255 192 181); font-size: 1em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
body .alerta .msg b { font-weight: bold; font-size: 1.5em; line-height: 1;}
body .alerta .msg em { margin: 2px 0 0; font-style: normal; font-size: 1.1em;}
body .alerta .fechar { position: absolute; top: 15px; right: 10px; font-weight: bold; font-style: normal; line-height: 0; cursor: pointer;}

body .loader { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 300; background-color: rgb(90 90 90 / 50%);}
body .loader .ico { position: absolute; width: 30px; height: 30px; top: 50%; left: 50%; margin: -25px 0 0 -25px; border: 10px solid rgb(250 250 250); border-top-color: rgb(14 23 30); border-bottom-color: rgb(14 23 30); -webkit-animation: rotacao 1s infinite; -moz-animation: rotacao 1s infinite; animation: rotacao 1s infinite;}

body .carregando { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 200; background-color: rgb(90 90 90 / 50%);}
body .carregando .ico { position: absolute; width: 10px; height: 10px; top: 50%; left: 50%; margin: -15px 0 0 -15px; border: 10px solid rgb(250 250 250); border-top-color: rgb(14 23 30); border-bottom-color: rgb(14 23 30); -webkit-animation: rotacao 1s infinite; -moz-animation: rotacao 1s infinite; animation: rotacao 1s infinite;}

body .table { width: 100%; border-collapse: collapse;}
body .table tbody { overflow-x: auto;}
body .table th, td { padding: 8px; border: 1px solid rgb(90 90 90 / 50%); white-space: nowrap; text-align: left;}

/* MOBILE */
@media only screen and (max-width: 1000px){
  body header { position: relative; float: left;}
  body header .chave { display: block;}
  body main .direita { padding: 15px 12px;}
}
@media only screen and (max-width: 800px){
  body .wp50 { width: 100%;}
  body .wp33 { width: 100%;}
  body .wp20 { width: 100%;}
  body .wxp45 { width: 100%;}
  body .wxp120 { width: 100%;}
}
@media only screen and (max-width: 500px){
  body .alerta { width: 100%; left: 0; bottom: 0;}
  body .alerta .msg { width: 100%;}
  body .alerta .msg h2 { width: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
  body .alerta .msg h3 { width: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
}
@keyframes rotacao{
  to{
    transform: rotate(1turn);
  }
}