/* FORMULÁRIOS */

form{
	width: 100%;
	flex-flow: row wrap;
	padding: 10px;
	display: flex;
    justify-content: space-evenly;
    flex: 1;
}
form label{
	margin: 9px 0px;
	position: absolute;
    font-size: 13px;
    color: #363535;
    z-index: -1;
    transition: .5s;
}
.formAdministracao .inputsForm .inputs label{
	z-index: 1;
}
.formAdministracao .botoes {
	justify-content: space-around;
}
input, option:not(#lista_paciente, .auto_complete), select{
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	height: 30px;
	padding: 0px 0px 0px 3px;
	background-color: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
}
select{
	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
  	background-size: 2rem 2rem;
  	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23adb5bd' d='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/%3E%3C/svg%3E") 100% 50% no-repeat;
  	width: 100%;
	color: #646161;
}
input, select{
	text-align: center;
}
input{
	margin: 0px;
    color: #363535;
}
.inputs + h3{
	margin-top: 20px;
}
button{
	outline: 0;
	border: none;
	background: none;
	cursor: pointer;
}
.botao-custom-datatable {
	color: #fff;
	border-radius: 10px;
	background: #485fc7;
	padding: 10px 15px;
	font-size: 20px;
	/* margin: 0px 5px; */
}
.container-botao{
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 20px;
}
.container-botao button{
	padding: 10px 20px;
	border-radius: 10px;
	background-color: #ed501e;
	color: #fff;
	font-size: 25px;
	border: 3px solid transparent;
	transition: 1s;
}
.container-botao button:hover{
	border: 3px solid #fff;
}
.container-botao button + button{
	margin: 0px 15px;
}
form .inputs input:nth-child(5){
	text-align: left;
}

/* Efeito Label */
input:not(:read-only, [type="date"]):focus + label{
	font-weight: bold;
	color: rgb(237 80 30);
	transform: translateY(-20px);
	transition: .5s;
}
input:not(:placeholder-shown, [type="checkbox"], [type="radio"]) + label{
	font-weight: bold;
	color: rgb(237 80 30);
	transform: translateY(-20px);
	transition: .5s;
}
select:focus + label{
	color: rgb(237 80 30);
	font-weight: bold;
	transition: .5s;
}
select + label, input[type="date"] + label, div .checkbox-group-step2 + label{
	transform: translateY(-20px);
	color: rgb(237 80 30);
	font-weight: bold;
}

/* ------------------- */

input:not(:read-only):focus{
	box-shadow: 0 0 0 0;
    outline: 0;
	border-color: #ed501e;
}
input:not([type="checkbox"], [type="radio"]):read-only{
	cursor: not-allowed;
	padding: 15px;
}
/* input:read-only ~ label{
	color: blue;
} */
input:focus, select:focus{
	outline: 0;
}
.inputs{
	display: flex;
    flex-flow: column;
	justify-content: flex-start;
    margin: 10px;
	height: 60px;
}
.hiding{
	display: none !important;
}
.showing{
	display: flex !important;
}

/* AUTO COMPLETE */
#autoComplete{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fit, minmax(0px, 30px)); */
    gap: 5px;
    position: relative;
	z-index: 10;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: -195px;
	overflow-y: scroll;
    border: 1px solid rgb(0, 85, 162, .5);
	height: 200px;
	padding: 10px 0px;
}
#autoComplete option{
	display: flex;
    justify-content: center;
	align-items: center;
	font-size: 14px;
    color: #00000099;
    text-transform: uppercase;
    letter-spacing: 0.01em;
	padding: 5px;
    transition: .5s;
}
#autoComplete .selecionado{
    cursor: pointer;
    color: #fff;
    background-color: rgb(0, 85, 162, .8);
    transition: .5s;
}
#autoComplete option:hover{
	cursor: pointer;
	color: #fff;
	background-color: rgb(0, 85, 162, .8);
	transition: .5s;
}
/* ---------------- */

input[autocomplete="off"]:not(#pts){
	background-image: url('../img/search.png');
	background-repeat: no-repeat;
    background-size: 20px;
    background-position-x: right;
    background-position-y: center;
}
.container-formulario{
	display: flex;
	align-items: center;
	padding: 30px 0px;
	width: 85%;
	margin: 0 auto;
	justify-content: center;
}
.container-infos{
	width: clamp(300px, 100%, 1280px);
	display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr;
    gap: 60px;
	box-shadow: 0px 1px 5px #000;
	border-radius: 10px;
}
.form-titulo{
	display: flex;
	align-items: center;
	width: 100%;
	background-color: #ed501e;
	color: #fff;
	padding: 15px 30px;
	font-size: 15px;
	border-radius: 10px;
}
.formulario{
	padding: 0px 30px;
}

/* QUESTIONÁRIO AD */

.container-infos.container-infos--formAd{
	grid-template-rows: 60px 50px 1fr;
	gap: 30px;
}
.inputsEscondidos{
	display: none;
}
.container-steps{
	display: grid;
	grid-template-rows: repeat(2, 40px);
	justify-items: center;
	width: 100%;
	padding: 0px 30px;
}
.container-nomes, .container-step{
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(50px, 1fr) );
	width: 100%;
}
.container-step{
	grid-row: 2;
}
.container-nomes{
	color: #ccc;
	justify-items: center;
	grid-row: 1;
}
.nome-step{
	padding: 11px;
    border-radius: 10px 10px 0px 0px;
	cursor: pointer;
	background-color: #ccc;
	color: #fff;
}
.step{
	display: flex;
	flex-flow: row-reverse;
	justify-content: space-between;
	align-items: center;
	height: 5px;
	background-color: #ccc;
	cursor: pointer;
	border-radius: 10px;
	transition: 1s;
}
.step--complete{
	background-color: #4bf04b !important;
	transition: 1s;
}
.step--incomplete{
	background-color: #f85954 !important;
	transition: 1s;
}
.step--selected{
	background-color:#787878;
	transition: 1s;
}
.step--blur{
	background-color:#ccc;
	transition: 1s;
}
.step::after{
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	transform: translateX(5px);
	background-color: inherit;
}
.form-steps{
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr;
}
.form-steps__sessao{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px;
	width: 100%;
}
.form-steps__sessao:not(:first-child){
	display: none;
}
.form-steps__coluna > .form-steps__titulo{
	margin-top: 0px;
}
.form-steps__titulo{
	font-size: 16px;
	margin-bottom: 25px;
	color: #5e5e5e;
}
.checkbox-group {
	height: auto;
	margin-bottom: 25px;
} 
.checkbox-group-step2 {
	display: grid;
	margin: 10px 0px
}
.checkbox-group-step2 .checkbox-subgroup,
.checkbox-group-step2 .checkbox-subgroup-subitens{
	display: grid;
	grid-template-columns: 5% 95%;
	align-items: center;
}
.checkbox-group-step2 .checkbox-subgroup input {
	width: fit-content
}
.checkbox-group-step2 label {
	position: inherit;
}
.checkbox-group-step2 .item1 label,
.checkbox-group-step2 .item2 label,
.checkbox-group-step2 .item3 label,
.checkbox-group-step2 .item4 label,
.checkbox-group-step2 .item5 label,
.checkbox-group-step2 .item6 label{
	padding-left: 10px;
}
.checkbox-group-step2 .item1{
	display: flex;
	grid-area: 2/2;
}
.checkbox-group-step2 .item2 {
	grid-area: 3/2;
}
.checkbox-group-step2 .item3{
	grid-area: 4/2;
}
.checkbox-group-step2 .item4{
	grid-area: 5/2;
}
.checkbox-group-step2 .item5{
	grid-area: 6/2;
}
.checkbox-group-step2 .item6{
	grid-area: 7/2;
}
.checkbox-group-step2 .indic_clin_cond_avanc_saude_doenca_hepatica_5_cirrose_1 label {
	position:absolute;
	padding: 73px 0px 0px 25px;
}
.checkbox-group-step2 .indic_clin_cond_avanc_saude_doenca_hepatica_5_transplante_2 {
	padding-top: 70px;
}
 /* COVID */

#formCOVID{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

/* PACIENTE */

/* MODAL */

.container-infos.container-infos--formPaciente{
	gap: 60px;
}
#formP{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
#container-form-paciente{
	display: none;
	align-items: center;
	position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.5);
}
.form-titulo--formPaciente{
	justify-content: space-between;
}
#container-form-paciente .container-infos{
	background: #fff;
}
#container-form-paciente .formulario{
	background: #fff;
	border-radius: 15px;
}
#container-form-paciente .form-titulo{
	margin-bottom: 0px;
}
#container-form-paciente #close{
	background-color:  #fff;
	color: #dd1009;
	border-radius: 25px;
    padding: 5px 10px;
    cursor: pointer;
}
#formP label{
	z-index: 1;
}

/* LOGIN */

.bg{
	background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
.container-infos.container-infos--form-login{
	grid-template-rows: 1fr;
}
.container-login{
	height: inherit;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 1fr;
	justify-items: center;
}
.titulo{
	grid-column: 2;
	grid-row: 1;
	align-self: flex-end;
	margin: 0px;
}
.container-login h1{
	color: #fff;
    text-align: center;
}
.formulario-login{
	grid-column: 2;
	grid-row: 2;
	padding: 0px;
	width: clamp(300px, 500px, 1000px);
}
.imgcontainer{
	margin-bottom: 50px;
}
#form_login, 
#form_cadastrar, 
#form_senha, 
#form_senha_header,
#form-novo-acesso{
	background: #fff;
	border-radius: 10px;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr repeat(2, 70px) 100px;
}
#form_login label, 
#form_cadastrar label, 
#form_senha label, 
#form_senha_header label,
#form-novo-acesso label{
	z-index: 1;
	font-size: 16px;
}
#form_login .container-botao{
	margin: 10px;
	justify-content: space-between;
    align-self: center;
	width: 100%;
}
#form_login button{
	font-size: 16px;
}
#form_cadastrar .container-botao, #form_senha .container-botao, #form_senha_header .container-botao{
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.formulario-cadastrar-login,
.formulario-senha-login {
	display: none;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: inherit;
	background-color: #80808094;
}

.formulario-senha-header {
	display: none;
	position: fixed;
	z-index: 2;
	width: 100%;
	height: inherit;
	background-color: #80808094;
}
.formulario-senha-header > div {
	width: 40%;
}
#form_senha_header .container-botao button{
	font-size: 15px !important;
}

.formulario-senha-header h2 {
	padding: 20px 0px;
	text-align: center;
}

/* HISTORICO */

.container-historico{
	display: none;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 80px 1fr;
	overflow-x: hidden;
	max-height: 70vh;
	padding: 0px 30px 30px;
}
.container-historico__titulo{
	color: #5e5e5e;
	grid-column: 1;
	grid-row: 1;
}
.container-mudancas{
	max-height: 55vh;
	overflow-y: scroll;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 30px;
	grid-column: 1/ 3;
	grid-row: 2;
}
.mudanca{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	border-bottom: 1px solid #cccccc67;
}
.mudanca li div{
	margin: 5px;
}
.mudanca__item{
	flex-direction: column;
}
.mudanca__item, .mudanca__item__de, .mudanca__item__para{
	display: flex;
	justify-content: flex-start
}
.mudanca__item__de, .mudanca__item__para{
	align-items: center;
}
.mudanca__titulo--de{
	background-color: #dd1009;
}
.mudanca__titulo--para{
	background-color: #10c510;
}
.mudanca__titulo.mudanca__titulo--de, .mudanca__titulo.mudanca__titulo--para{
	color: #fff;
	border-radius: 10px;
	padding: 5px;
}
.mudanca__titulo{
	margin-right: 10px;
	color: #5e5e5e;
	font-size: 14px;
}
.mudanca__info{
	color: #363535;
	font-size: 12px;
}
.container-historico--gridrow{
	grid-template-rows: auto !important;
}
.container-hsitorico__fechar{
	width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: flex-end;
    align-self: flex-start;
	color: #fff;
	background-color: #dd1009;
	padding: 10px;
	border-radius: 10px;
	grid-column: 2;
	grid-row: 1;
	cursor: pointer;
	border: 3px solid transparent;
	transition: 1s;
}
.container-hsitorico__fechar:hover{
	border: 3px solid #fff;
}
@media only screen and (max-width: 768px) {
	.form-steps__sessao{
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 1fr);
		gap: 16px;
	}
}