@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald:400,500,600,700" rel="stylesheet"');

:root {
  --color-a: #961010; --color-b: #138469; --color-c: #116994;
  --color-d: #680000; --color-e: #006800; --color-f: #000068;
  --color-g: #D00; --color-h: #071; --color-i: #009; --color-j: #FFF; 
  --color-k: #000; --color-l: #555; --color-m: #333; --color-n: #F00;
  --color-o: #F5DEB3; --color-p: #D5B59C; --color-q: #E3E3E3; --color-r: #528B9E; 
  --color-s: #2F4F4F; --color-t: #808080; --color-u: #CD5C5C; --color-v: #88001B;
  --color-x: #003399; --color-z: #BFBFBC;
  --shadow: 0px 3px 6px var(--color-m);
}

* {margin: 0; padding: 0; box-sizing: border-box;}
img {width: 100%;}
body[id="myBody"] {background: var(--color-z); && a {text-decoration: none;}}
header {background: var(--color-o); color: var(--color-l); font: 400 16px Oswald; position: fixed; top: 0; left: 0; height: 60px; width: 100%; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); z-index: 99;}

.sh_header {display: flex; justify-content: space-between; height: 100%;}
.sh_logotexto {display: flex;}
.sh_logo {display: inline-block; padding: 5px;}
.sh_texto {display: inline-block;}
.sh_font22 {font: 400 22px Oswald; line-height: 1.8;}
.sh_font14 {font: 500 16px Oswald; line-height: 0.2;}

.sh_menu {display: flex; list-style: none; padding-top: 16px; padding-right: 10px; font: 500 16px Oswald; letter-spacing: 0.4px;}
.sh_menuLink {background: none; padding: 6px 10px; color: var(--color-c); text-decoration: none; border-radius: 7px; border: 1px solid transparent;}
.sh_menuLink:hover {background: var(--color-o); border-color: var(--color-o); box-shadow: var(--shadow);}

.select {color: var(--color-v);}
.sh_menuLink[class="sh_menuLink"]:hover {color: var(--color-c);}
.sh_menuLink[class="sh_menuLink select"]:hover {color: var(--color-v);}

.sh_footer {display: block; background-color: var(--color-c); color: var(--color-j); padding: 5px 7px 6px; font: 500 16px Oswald; letter-spacing: 0.4px;}
.sh_between {width: 100%; display: flex; justify-content: space-between;}
.sh_btnPower {color: var(--color-j);}

.sh_fontPadrao1 {color: var(--color-c);}
.sh_fontPadrao2 {color: var(--color-b);}

.sh_background1 {background-color: var(--color-c);}
.sh_background2 {background-color: var(--color-b);}
/* CSS FORM LOGIN ***************************************************************************** */
/* ******************************************************************************************** */
.container-login {display: flex; flex-direction: column; align-items: center; margin: auto; width: 100%; background: var(--color-z);}
.container-login p.sh_titulo {font: 700 22pt Oswald; color: var(--color-v); letter-spacing: 0.4px; margin: 160px 0 20px;}

.login_msg {width: 360px; margin: auto; padding: 15px; background: var(--color-n); border-color: var(--color-g); font: 400 14pt Oswald; color: var(--color-j); text-align: center; letter-spacing: 0.4px;}
.container-login div.login_msg {margin: 160px 0 20px;}
.container-login div.sh_boxBody {width: 360px; padding: 1.5em 1.5em; background: var(--color-j); border-radius: 7px;}

.sh_boxTitle p.sh_boxTitulo {font: 500 20px Oswald; color: var(--color-j); padding: 0.15em 0 0.15em 0.15em; height: 40px; background-color: var(--color-s); border: 1px solid var(--color-s); border-radius: 7px;}
.form-group input.classLogin {font: 500 16px Oswald; padding-top: 0.11rem;}

.sh_loginFooter {display: flex; justify-content: space-between;}
.sh_loginBox1, .sh_loginBox2 {height: 40px; width: 120px; display: inline-block;}
.sh_loginBox1 a.sh_btn1, .sh_loginBox2 button.sh_btn2 {font: 500 16px Oswald; height: 100%; width: 100%; border-radius: 7px; color: var(--color-j); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);}

.sh_loginBox1 a.sh_btn1:hover {background-color: var(--color-d);}
.sh_loginBox2 button.sh_btn2:hover {background-color: var(--color-f);}
/* CSS PARA NÃO ALTERAR A COR DE FUNDO DO INPUT *********************************************** */
/* ******************************************************************************************** */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {-webkit-text-fill-color: var(--color-k); -webkit-box-shadow: 0 0 0px 1000px var(--color-j) inset;}
/* CSS SPINNER ************************************************************************************************************* */ 
/* ************************************************************************************************************************* */
.spinner {position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; display: none; justify-content: center; align-items: center;}
.sh_spinner {border: 15px solid rgba(0, 0, 128, 0.7); border-left-color:  rgba(0, 0, 0, 0); height: 80px; width: 80px; border-radius: 50%; animation: spinner 1s linear infinite;}
@keyframes spinner {to  {transform: rotate(360deg);}}
/* CSS SWALTALERT ***************************************************************************** */
/* ******************************************************************************************** */
.sh_bg{background: hsl(24, 17%, 94%);}
.sh_mt{margin: 15px 0 0;}

.sh_bodySwal{position: relative; width: 500px;}
.sh_titleSwal{font: 600 18pt Oswald; color: #528b9e; letter-spacing: 0.4px;}
.sh_buttonSwal{height: 40px; width: 120px; font: 600 12pt Oswald; color: #FFF; border-radius: 7px;}

.sh_groupSwal{position: relative;}
.sh_groupSwal ul.listarErros{list-style-type: none; padding: 0; color: #F00; font: 500 16px Oswald; letter-spacing: 0.4px; font-weight: 500;}
.sh_groupSwal ul.delimitar{list-style-type: none; padding: 0 20px; font: 600 12pt Oswald; color: #528b9e; text-align: left; letter-spacing: 0.4px;}

.sh_groupSwal p.paragrafo{font: 500 16px Oswald; text-align: center; margin: 0 auto; padding-bottom: 15px; letter-spacing: 0.4px;}
.sh_groupSwal p.delimitar{font: 600 12pt Oswald; color: #528b9e; text-align: left; padding: 0 20px; letter-spacing: 0.4px;}

.sh_swalTexto{position: relative; width: 800px; height: auto; border-radius: 7px;}
.sh_swalTexto .sh_titleSwal{padding: 0 0 15px;}
.sh_groupSwal textarea.swalTexto{overflow-y: scroll; overflow-x: hidden; height: 300px; width: 100%; outline: 0; resize: none; padding: 15px; font-size: 14px; color: #2F4F4F;}
.sh_groupSwal button#shBtnAlerta{background-color: #145183; border-color: #145183; box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);}
.sh_groupSwal button#shBtnAlerta:hover {background-color: #103654; border-color: #103654; color: #FFF; transition: all 0 5s linear; -webkit-transition: all 0 5s linear; -moz-transition: all 0 5s linear;}

.sh_hrSwal{width: auto; border: 0.5px solid hsl(0, 0%, 90%);}
.sh_msgSwal{font: 600 12pt Oswald; color: #D00; letter-spacing: 0.4px; padding: 15px 0 0;}

.sh_groupRadioSwal{display: flex; justify-content: space-evenly; margin: 30px 0 15px;}
.sh_groupRadioSwal .sh_labelRadioSwal{font: 600 14pt Oswald; color: #2F4F4F; letter-spacing: 0.4px;}
.sh_groupRadioSwal .sh_inputRadioSwal{transform: scale(1.6); align-items: center; margin: 0 7px 0 0;}

.sh_delimitar{position: relative; width: 800px; height: auto; background: var(--color-a); border-radius: 7px;}
/* .sh_groupSwal .sh_titleSwal{font: 600 18pt Oswald; color: #186db3; text-align: center; letter-spacing: 0.4px;} */

.sh_bodyTeste{position: relative; width: 600px; height: auto; border-radius: 7px;}
.sh_msgTeste{font: 600 10pt Oswald; color: #D00; margin-top: 15px; letter-spacing: 0.4px;}
.sh_inputTeste{font: 600 12pt Oswald; color: #2F4F4F; letter-spacing: 0.4px;}
.sh_bodyTeste input[type=radio]{transform: scale(1.6); align-items: center; margin: 0 7px 0 0;}
.sh_btnTeste{height: 40px; width: 120px; font: 600 12pt Oswald; color: #FFF; border-radius: 7px; background-color: #145183; border-color: #145183; box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);}
.sh_btnTeste:hover {background-color: #103654; border-color: #103654; color: #FFF; transition: all 0 5s linear; -webkit-transition: all 0 5s linear; -moz-transition: all 0 5s linear;}

.sh_rowSwal{display: flex; justify-content: center; align-items: center;}
.sh_borderSwal{background: #fff; border-radius: 7px; border: 1px solid #c4c1d5; margin-top: 11px; padding: 11px;}
input.clsSwal{outline: 0; border: none; text-align: center; height: 30px; width: 100%; padding: 3px 4px 5px 4px; font: 400 16pt Oswald; color: #2F4F4F; border-radius: 7px; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;}

.sh_footerSwal{width: 100%; padding: 4px 4px 0;}
.sh_footerSwal button#swalBtn1{background-color: #da1f1f; border-color: #da1f1f; box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);}
.sh_footerSwal button#swalBtn2{background-color: #145183; border-color: #145183; box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);}
.sh_footerSwal button#swalBtn1:hover{background-color: #c21a1a; border-color: #c21a1a; color: #FFF; transition: all 0 5s linear; -webkit-transition: all 0 5s linear; -moz-transition: all 0 5s linear;}
.sh_footerSwal button#swalBtn2:hover{background-color: #103654; border-color: #103654; color: #FFF; transition: all 0 5s linear; -webkit-transition: all 0 5s linear; -moz-transition: all 0 5s linear;}
/* APLICANDO MEDIA QUERY PARA SITES RESPONSIVOS *********************************************** */
/* ******************************************************************************************** */
@media all and (max-width: 660px){
  .sh_font14 {display: none;}
  .sh_font22 {line-height: 2.5;}
	.sh_footer {font: 500 12px Oswald; padding: 6px 7px 5px;}
}
@media all and (max-width: 1280px){
	body {min-height: 100%;}
}