/*
Verde Petróleo = #003942
Vermelho = #C0272C
*/

html, body{margin: 0px; font-family: 'Ubuntu', sans-serif; background: #F5F5F5; color: #333333}
form{margin: 0px}
a, a:visited, a:hover, a:link{text-decoration: none; color: inherit}
.fullLink{position: absolute; width: 100%; height: 100%; top: 0; left: 0}
h1{text-align: center}
section{padding: 20px; min-width: 1000px;}
.contain{min-width: 1000px; margin: 0px auto; font-size: 15px; text-align: justify;}
.containPainel{margin-left: 260px; width: calc(100% - 280px); padding: 10px;}

.flex{display: flex; justify-content: space-between; flex-wrap: wrap}
.txtCenter{text-align: center}

.logo{background: #003942; padding: 30px 15px; text-align: center;}
.logo img{max-width: 100%;}
.header{text-align: center; background: #003942; padding: 20px 15px;}
.header img{height: 70px}
#boxTemp{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: center; z-index: 100000;}
.msgAlerta{padding: 20px; border-radius: 2px; background: #FFFFFF; color: #000000 !important; position: relative}

.sideMenu{width: 260px; position: fixed; top: 0; left: 0; height: 100%; font-size: 17px; transition: 0.6s; z-index: 1001}
.bgMenu{background: #003942; color: #FFFFFF}
.menuTopMobile{display: none}

.contraMenu{display: none; position: fixed; top: 0px; right: 0px; height: 100%; width: calc(100% - 245px); cursor: pointer; z-index: 1000;}
.menuOpen{left: 0px !important}/*Mostra Menu do lado esquerdo*/

.languageDiv{position: absolute; top: 15px; right: 15px}
.flag{width: 30px; height: auto !important; margin-right: 5px; cursor: pointer; border: 2px solid transparent; border-radius: 50%;}
.flagSelected{border: 2px solid #FFF;}

.empresaBox{padding: 5px; border: 1px solid #CCC; background: #FFFFFF; border-radius: 3px; margin: 5px 0px; display: flex; align-items: center;}
.empresaNomeFantasia{width: 280px; font-weight: bold}
.empresaStatus, .empresaResponsavel{width: 280px}
.empresaLinkTestes{width: 100%; margin-top: 20px}
.empresaLinkTestes div{padding: 10px; margin: 5px; background: #97d7f5; width: 280px; margin: 5px 0px; text-align: center; transition: 0.3s}
.empresaLinkTestes div:hover{background: #79bddc;}

.perguntaBox{margin: 10px 0px; width: calc(50% - 20px); border: 1px solid #000000; background: #FFFFFF;}
.perguntaTitulo{font-size: 17px; font-weight: bold; text-align: center; padding: 15px; background: #003942; color: #FFFFFF}
.perguntaOpcoes{font-size: 14px}

.usuariosBox{padding: 5px; border: 1px solid #CCC; background: #FFFFFF; border-radius: 3px; margin: 5px; display: flex; align-items: center;}
.usuariosNome{width: 280px; font-weight: bold}
.usuariosEmail{width: 300px;}
.usuariosPerfil{width: 180px;}
.usuariosAcoes img{width: 28px; cursor: pointer;}

/*INPUT RADIO ALTERNATIVAS*/
/* The container */
.alternativa{display: block; position: relative; padding-left: 35px; margin: 10px; cursor: pointer; font-size: 15px; color: #444; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 27px;}
.alternativaFlex img{width: 250px}
/* Hide the browser's default checkbox */
.alternativa input{position: absolute; opacity: 0; cursor: pointer;}

/* Create a custom checkbox */
.checkmark {position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #DDDDDD; border: 1px solid #CCCCCC; border-radius: 50%}
.checkmark2 {position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #DDDDDD; border: 1px solid #CCCCCC; border-radius: 3px}
	
/* On mouse-over, add a grey background color */
.alternativa:hover input ~ .checkmark {background-color: #BBBBBB;}
.alternativa:hover input ~ .checkmark2 {background-color: #BBBBBB;}

/* When the checkbox is checked, add a blue background */
.alternativa input:checked ~ .checkmark {background-color: #26c6da; border: 1px solid #0097a7;}
.alternativa input:checked ~ .checkmark2 {background-color: #26c6da; border: 1px solid #0097a7;}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after{content: ""; position: absolute; display: none;}
.checkmark2:after{content: ""; position: absolute; display: none;}

/* Show the checkmark when checked */
.alternativa input:checked ~ .checkmark:after {display: block;}
.alternativa input:checked ~ .checkmark2:after {display: block;}

/* Style the checkmark/indicator */
.alternativa .checkmark:after {left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.alternativa .checkmark2:after {left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.alternativa .btDefault{background: #FF9800 !important}			

/*LOGIN*/
.loginHeader{position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.loginHeaderBack{position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: brightness(0.4); background: URL("/img/background-login.jpg"); background-position: center; background-size: cover; background-attachment: fixed}
.loginBox{position: relative; width: 300px; text-align: center; text-align: center; background: #003942; border-radius: 5px; padding: 15px;}
.loginBox img{height: 60px;margin-bottom: 20px;}

.forgot{background: no-repeat; color: #FFFF; border: none;}
.loginInput {padding: 7px; width: 100%; outline: none; border: #CCC; margin-bottom: 10px; font-size: 17px; font-family: 'Nunito Sans', sans-serif;}

#flexMsg, #flexBox { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.85);}
.boxMsg {padding: 15px; background: #FFFFFF; color: #000; text-align: center; margin-top: 55px; position: relative;}
.close {position: absolute; top: 7px; right: 7px; width: 15px; height: 15px; background: URL('/img/close.png'); cursor: pointer; background-size: 15px;}

.itemMenu{position: relative; color: #FFFFFF; display: flex; align-items: center; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 20px;}
.itemMenu:hover{background: rgba(255,255,255,0.1)}
.itemMenu img{margin-right: 10px; max-width: 30px; max-height: 30px;}

.creater{position: absolute; bottom: 10px; color: #FFFFFF; font-size: 13px; width: 100%; text-align: center;}
.creater a{text-decoration: none; color: #FFFFFF}


.input{border: #CCC; font-family: 'Ubuntu', sans-serif; font-size: 15px; padding: 8px; margin: 0px 0px 10px 0px; width: 600px; outline: none; border-radius: 3px; border: 1px solid #BBB;}
.input:disabled {background: #DDD; color: #000;}
.textarea{font-family: 'Ubuntu', sans-serif; font-size: 17px; padding: 8px; margin: 10px 0px; width: 600px; height: 100px; outline: none; border-radius: 3px; border: 1px solid #BBB;}

.bt{background: #027fb7; color: #FFF; font-size: 15px; font-family: 'Ubuntu'; border: none; border-radius: 3px; padding: 10px 30px; cursor: pointer; transition: 0.5s; outline: none; text-align: center; margin: 5px 0px; -webkit-appearance: none; width: max-content;}
.bt:hover{background: #03608a;}

.btVermelho{background: #f44336; color: #FFF; font-size: 15px; font-family: 'Ubuntu'; border: none; border-radius: 3px; margin: 5px 10px 0px 10px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;}
.btVermelho:hover{background: #d32f2f;}

.btCinza{background: #545f65; color: #FFF; font-size: 15px; font-family: 'Ubuntu'; border: none; border-radius: 3px; margin: 5px 10px 0px 10px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;}
.btCinza:hover{background: #374046;}

.btAzul{background: #027fb7; color: #FFF; font-size: 15px; font-family: 'Ubuntu'; border: none; border-radius: 3px; margin: 5px 10px 0px 10px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;}
.btAzul:hover{background: #03608a;}

.setor, .unidade{border: 1px solid #CCC; background: #FFF; margin-top: 20px; padding: 20px}
.btAction{width: 30px; margin-right: 10px; cursor: pointer}
 
.setorLine, .unidadeLine{padding: 5px 5px 1px 5px; line-height: 30px; display: flex;}
.btAction{width: 25px; margin-right: 10px;}
.setorDescricao, .unidadeDescricao{width: 300px}

.footer {font-size: 14px; line-height: 25px;}

.media img {width: 20px; margin-right: 5px; vertical-align: middle;}

.div300{margin: 0 auto; width: max-content;}
.div300 img{height: calc(100% - 40px); max-width: 100%; max-height: calc(100vw - 50px);}

/**** SWITCH CHECK SLIDER ****/
	/* The switch - the box around the slider */
	.switch {position: relative; display: inline-block; width: 60px; height: 25px; margin: 10px 0px}

	/* 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: #BBB; -webkit-transition: .4s; transition: .4s;}

	.slider:before {position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
	input:checked + .slider {background-color: #0fbba0;}
	input:focus + .slider {box-shadow: 0 0 1px #0fbba0;}
	input:checked + .slider:before {-webkit-transform: translateX(34px); -ms-transform: translateX(34px); transform: translateX(34px);}

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

.statusPurple{width: 5px; height: 25px; margin: 3px 5px 0px 5px; border-radius: 5px;background: #a300a6}
.statusOrange{width: 5px; height: 25px; margin: 3px 5px 0px 5px; border-radius: 5px;background: #ff8000}
.statusGray{width: 5px; height: 25px; margin: 3px 5px 0px 5px; border-radius: 5px;background: #777777}
.statusBlue{width: 5px; height: 25px; margin: 3px 5px 0px 5px; border-radius: 5px;background: #0066b3}
.statusRed{width: 5px; height: 25px; margin: 3px 5px 0px 5px; border-radius: 5px;background: #fd6054}
.statusYellow{width: 5px; height: 25px; margin: 3px 5px 0px 5px; border-radius: 5px;background: #ffc107}
.statusGreen{width: 5px; height: 25px; margin: 3px 5px 0px 5px; border-radius: 5px;background: #00cf6f}

.box{border: 1px solid #BBB; border-radius: 3px; width: max-content; background: #FFFFFF; margin-top: 50px; overflow: hidden; position: relative}
.boxHeader{padding: 15px; background: #EEEEEE; font-weight: bold}
.boxClose{position: absolute; top: 0; right: 0; width: 24px; height: 24px; padding: 12px; cursor: pointer; transition: 0.3s;}
.boxClose:hover{background: #DDDDDD;}
.boxClose img{width: 24px;}

.boxContain{padding: 15px;}