/* @import url("../fontawesome5/css/all.css"); */
:root {
  --verde: #1dd1a1;
  --verde-18b38a : #18b38a;
  --verde-escuro: #10ac83;
  --verde-desativo: #65a493;
  --vermelho: #ff6b6b; 
  --vermelho-menu: #ff6b6b; 
  --vermelho-escuro: #ee5253; 
  --azul: #57789e;
  --azul-curtida: #2e86de;
  --azul-escuro: #425c79;
  --branco: #fff;
  --cinza-tiny: #fff;
  --bg-conjunto-input: #fff;
  --branco-botao: #fff;
  --branco-escurecido: #fafafa;
  --branco-submenu: #f4f4f4;
  --preto: #000;
  --cinza: #666;
  --cinza-escuro: #333;
  --cinza-claro: #888;
  --cinzinha: #eee;
  --cinza-8395a7: #8395a7;
  --cinza-itemLista: #f2f2f2;
  --itemLista-hover: #eeeeee;
  --cinza-preload: #f9f9f9;
  --cinza-label: #999;
  --input-border: #e6e6e6;
  --input-placeholder: #bbb;
  --bg-body: #eeeff3;
  --input-color: #444;
  --etiqueta-border: #f0f0f0;
  --slider-border: #ccc;
  --msg-pac:#b0b0b0;
  --cinza-trash: #ddd;
  --cinza-999: #999999;
  --cinza-c3c3c3: #c3c3c3;
  --cinza-e9e9e9: #e9e9e9;
  --ativoRefeicao: #c8d6e5;
  --amarelo: #E8CB42;
  --escolhido: #1dd1a140;
  --box-shadow: rgba(0, 0, 0, 0.7);
  --cinza-table: #e6e6e6;
  --bg-calendario-block: #6d6e6a;
  --bg-seta: url('../img/setas.svg');
  --botao-invalido: #ccc;
  --preto-swal: #5a6268;
  --cinza-swal:#999;
  --questLinha-color: #222f3e80;  
  --larguraSwal: 500px;
  --larguraSwal-arquivo: 600px;
  --fqm-filter: invert(0);
  --fqm-blend:  unset;
  --backgroundEtiqueta : #fff;
  --colorEtiqueta : #959595;
  --bg-cardReceita: rgb(239,239,239);
  --receitas-scrollClass: #ddd!important;
  --cinza-desabilitado: #c3c3c3;
}
@import url("../fontawesome5/css/all.css");
@import url("../uicons-solid-rounded/css/uicons-solid-rounded.css?v=1");
@import url("../uicons-regular-rounded/css/uicons-regular-rounded.css?v=1");

@font-face { font-family: Circular; src: url('../fonts/circular-std-font-family/CircularStd-Bold.woff'); font-weight: 600; }
@font-face { font-family: Circular; src: url('../fonts/circular-std-font-family/CircularStd-Medium.woff'); font-weight: 500; }
@font-face { font-family: Circular; src: url('../fonts/circular-std-font-family/CircularStd-Book.woff'); font-weight: 400; }
@font-face { font-family: Circular; src: url('../fonts/circular-std-font-family/CircularStd-Book.woff'); font-weight: 300; }

@font-face {
    font-family: 'Icones app';
    src: url('../fonts/Icones-app.eot');
    src: url('../fonts/Icones-app.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Icones-app.woff') format('woff'),
         url('../fonts/Icones-app.ttf') format('truetype'),
         url('../fonts/Icones-app.svg#Icones-app') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {  -webkit-font-smoothing: antialiased !important; }
*:focus { outline: none !important; }

b { font-weight: 500; }
strong { font-weight: 600; }

a { color: var(--preto); font-weight: 500; transition: all ease 0.2s; }
a:hover { color: var(--cinza) !important; font-weight: 500; text-decoration: none; }
a:active { color: var(--preto); font-weight: 500 }


h1 { font-weight: 300; margin: 0px; font-size: 38px; letter-spacing: -1px;}
h3 { font-weight: 300; margin: 5px 0px; font-size: 16px;}

#conversasRetorno a {
    color: var(--cinza-c3c3c3); font-weight: 500; transition: all ease 0.2s;
}
#conversasRetorno a:hover{
    color: var(--branco-botao) !important; font-weight: 500; text-decoration: none;
}

.appGlobal { position: relative; display: inline-block; }
.app { width: 100%; background: var(--branco); border-radius: 5px; background-size: cover; padding: 25px; text-align: left; display: inline-block; }


.bagde { position: absolute; top: 5px; left: calc(100% - 65px); width: 60px; text-align: center; font-size: 30px; color: var(--preto); cursor: pointer;  }

.modal-content { background-clip: border-box !important; background: var(--branco); border-radius:5px; }
.modal-dialog { width: 100%; max-width: 1100px; left: calc(50% - 550px); margin: 0; margin: 20px 0px; padding: 0;border-radius:5px;}
.modal-header{ border:none; }

.estiloModal { padding-top: 0; }

.lni-close{ color: var(--cinza); }

.ativo { background: var(--verde) !important; border-color: var(--verde) !important; color: var(--branco-botao) !important; font-weight: 500 !important }
.ativo > span { color: var(--branco) !important; transition: all 0.2s ease;}
.inativo { background: var(--branco-escurecido) !important; border-color: var(--verde) !important; color: var(--preto) !important; font-weight: 500 !important }

.alimentoEquivalenteSecundario { background: var(--cinza-claro) !important; }

.categoriaQuestionario{
	margin-bottom: 10px;
    cursor: default;
    background: var(--cinzinha);
    padding: 10px;
    border-radius: 5px;
}
.linhaPergunta {
	color: var(--cinza);
	transition: color 0.3s ease-in-out;
}

.linhaPergunta:hover {
  color: var(--cinza-escuro);
}

.dropdown-menu{
	color:var(--cinza);
	background: var(--branco);
	top: 12px!important;
    left: 10px!important;
}

.dropdown-item:focus, .dropdown-item:hover{
	background: none!important;
	color: var(--cinza)!important;
}
.dropdown-item{
	color: var(--preto);
}

.ui-widget, .ui-widget button {
    font-family: Circular !important;
}

.ui-widget button {
    font-size: 13px !important;
}

.ui-datepicker .ui-datepicker-header{
	background: var(--cinza-itemLista)!important;
	color: var(--cinza)!important;
	border: none;
}

.ui-datepicker table{
	background: var(--cinza-itemLista)!important;
	color: var(--cinza)!important;
}
.ui-widget.ui-widget-content {
    border: 1px solid var(--backgroundEtiqueta)!important;
	background: var(--cinza-itemLista)!important;
    color: var(--cinza-escuro)!important;
}
.ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all{
	background: var(--cinza-itemLista)!important;
	color: var(--cinza)!important;
}
.ui-widget-content .ui-state-default:not(.ui-state-highlight){
	border: 1px solid transparent!important;
    background: var(--cinzinha)!important;
    font-weight: normal!important;
    color: var(--cinza)!important;
    border-radius: 5px!important;
}

.ui-state-highlight {
    background-color: var(--cinza-c3c3c3)!important;
	border: 1px solid transparent!important;
    border-radius: 5px!important;
    color: var(--branco-botao) !important;
}

.ui-widget-content .ui-state-default:hover{
	background: var(--cinza-999)!important;
}
/*.ui-datepicker-today{
	border: 1px solid var(--verde)!important;
    background: var(--verde)!important;
}*/
.form-switch { margin-bottom: 0px !important; }
.tox .tox-edit-area__iframe{
	background-color: var(--cinza-tiny)!important;
}
.btn-primary.focus, .btn-primary:focus{
	box-shadow: none!important;
}

.tox-toolbar-overlord svg, .tox-toolbar-overlord span {
	fill: var(--cinza)!important;
	color: var(--cinza)!important;
}

.tox-toolbar-overlord svg:hover, .tox-toolbar-overlord span:hover{
	fill: var(--cinza)!important;
	color: var(--cinza)!important;
}

 .tox .tox-tbtn:hover{
 	cursor: pointer;
 	border:none!important;
 	background: var(--branco)!important;
 }

 .tox .tox-split-button:hover{
 	box-shadow: none!important;
 }

 .tox .tox-tbtn:active, .tox .tox-tbtn:focus, .tox .tox-split-button:focus{
 	background: var(--branco)!important;
 }


/*.tox .tox-tbtn--disabled svg, .tox .tox-tbtn--disabled:hover svg, .tox .tox-tbtn:disabled svg, .tox .tox-tbtn:disabled:hover svg{
	fill: var(--cinza)!important;
}

.tox-tbtn__select-label{
	color: var(--cinza)!important;
}
*/
.tox-toolbar__primary{
	background: var(--cinzinha)!important;
}

/*.tox .tox-tbtn svg{
	fill: var(--cinza)!important;
}*/

/*.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type){
	border-right: none!important;
}*/

.mce-content-body { color: var(--branco) }

.titulo { font-size: 20px; font-weight: 600; color: var(--cinza-escuro); }
.tituloSecundario { font-size: 16px; font-weight: 600; color:var(--cinza-escuro); }
.subtitulo { font-size: 16px; font-weight: 400; margin-top: 2px; color: var(--cinza); }
.subtituloSecundario { font-size: 14px; font-weight: 400; color:var(--cinza-escuro); }

.submenu {  padding: 10px; line-height: 1; color: var(--preto); font-size: 15px; cursor: pointer; transition: all 0.1s ease; text-align: center; font-weight: 200; }
.submenu:hover { background: var(--vermelho-menu); color: var(--branco); border-color: var(--vermelho-menu) }
.submenuPai {
	position: absolute; top: 50px; left: calc(50% - 115px); height: auto; width: 230px; z-index: 9; background: var(--branco); border-radius: 5px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); display: none;
}

.marcado { background: var(--vermelho) !important; color: var(--branco) !important; border-color: var(--vermelho) !important; }

.itemLista { border-radius: 5px; background: var(--cinza-itemLista); margin-bottom: 5px; padding: 15px 20px; cursor: pointer; transition: all 0.2s ease; }
.itemLista:hover { background: var(--itemLista-hover); }

.atalhoClass:hover { transition: all 0.2 ease; background: var(--vermelho-escuro) !important; }

.scrollClass{
	display: flex;
	flex-direction: column;
}
.scrollClass::-webkit-scrollbar { width: 10px; }
.scrollClass::-webkit-scrollbar-track { background: transparent; }
.scrollClass::-webkit-scrollbar-thumb { 
    background: var(--cinzinha);  
    border-left: 4px solid var(--branco);
    border-top: 7px solid var(--branco);
    border-bottom: 7px solid var(--branco);
}
.scrollClass::-webkit-scrollbar-thumb:hover { background: var(--cinzinha); }

.is-highlight { border: 1px solid var(--branco); background: var(--cinza-999) !important; }

.reticencias { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.headerContainer{position: fixed; top: 0px; left: 0px; height: 60px; width: 100%; z-index: 9; background: var(--branco); border-bottom: 1px solid var(--bg-body)}
.headerBarra { position: fixed; top: 0px; left: calc(50% - 535px); height: 60px; width: 1070px; z-index: 9; background: var(--branco); border-bottom: 1px solid var(--bg-body); }
.headerItem {color: var(--input-color); margin: 0px 6px; cursor: pointer; display: inline-block; position: relative;}
.swal2-container {
  z-index: 9999999 !important;
}
.swal2-popup.swal2-modal.swal2-show{
	background: var(--branco);
}


.swalTitle {
  	font-size: 20px; 
  	font-weight: 600; 
  	color: var(--cinza-escuro);
  	margin-top: -15px;
}

.swalSubtitle{
    font-size: 16px; 
    font-weight: 400; 
    margin-top: 2px; 
    color: var(--cinza);
    margin: 5px 0px 15px 0px;
}

.swalSubtitleInfo{
	font-size: 15px;
    font-weight: 300;
    margin-top: 5px;
	color: var(--cinza);
}

.pageContainer {
    width: 1100px; 
    display: inline-block; 
    margin-top: 70px
}

.conteudo {
    width: calc(100% - 25px); 
    vertical-align: top; 
    margin: 10px; 
    display: inline-block;
}
    
.input-busca {
	width: calc(100% - 50px);
	color: var(--cinza);
    height: 100%;
    margin-left: 10px;
    background: none;
    border: none;
    display: inline-block;
    font-size: 16px;
    font-family: 'Circular', sans-serif;
}

.cabecalhoItemLista {
    border-radius: 5px; 
    color: var(--cinza);
    padding: 5px 20px; 
}

#notFound {
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.notFound {
    display: flex; 
    align-items: center; 
    justify-content: center;
}


.fileLabel{
    color: var(--cinza);
    font-size: 15px;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.previewImg{
    width: 100px; 
    height: 100px; 
    display: inline-block; 
    border-radius: 100%; 
    background-repeat: no-repeat; 
    background-color: var(--cinzinha); 
    background-position: center center; 
    background-size: cover; 
    margin-bottom: 10px;
}

.tituloCalculoEnergetico{
    margin-bottom: 5px; font-size: 15px; display:flex; justify-content:space-between;
}

.menuPaciente { border-radius: 5px; background: var(--cinza-itemLista); margin-bottom: 2px; font-size: 15px; padding: 7px 8px; color: var(--cinza); text-align: left; padding-left: 15px; cursor: pointer }
.menuPaciente:hover { background: var(--itemLista-hover); }
.menuPaciente:hover .menuPacienteSort { display: inline-block !important; }


.menuPacienteTutorial { border-radius: 5px; background: var(--cinza-itemLista); margin-bottom: 2px; font-size: 15px; padding: 7px 8px; color: var(--cinza-999); text-align: left; padding-left: 15px; cursor: pointer }
.menuPacienteTutorial:hover { background: var(--itemLista-hover); }
.tutorialLinhaAtivo{
    font-weight: 500;
    color: var(--cinza);   
}

.cardMenuPaciente { position: relative; font-weight: 300; height: 100px; line-height: 120%; margin-top: 5px; border-radius: 5px; cursor: pointer; background: var(--verde); color: var(--branco-botao); display: inline-flex; flex-flow: column; justify-content: center; vertical-align: middle; align-items: center; text-align: center; transition: all ease 0.3s }
.cardMenuPaciente:hover { background: var(--verde-18b38a) !important; color: var(--branco-botao) !important; }

.preload { background: linear-gradient(90deg, var(--cinza-itemLista) 20%, transparent 50%, var(--cinza-itemLista) 80%); background-size: 600% 600%; animation: animacao 1.5s linear infinite; animation-fill-mode: forwards; }
@keyframes animacao { 0%{background-position:100% 0%}; 100%{background-position:0% 100%}; }

.bordaAnimada {
	animation: circularAnimation 0.5s ease forwards; /* Aplica a animação */
}

@keyframes circularAnimation {
  0% {
    opacity: 0.6; /* Cor da borda no início da animação */
  }
  100% {
    opacity: 1;
    font-weight: 500;
  }
}

.botao { 
	width: 100%;
	padding: 10px;
	color: var(--branco-botao);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: 500;
	background: var(--verde) !important;
	border-radius: 5px;
	transition: all 0.2s ease;
}


.titulo.listagem { font-size: 14px !important; color: inherit; color: var(--cinza);}

.subtitulo.listagem { font-size: 14px !important;}



.links-app { float: right; margin-top: 7px; font-size: 15px; }

.formulario { width: 100%; height: 40px; background: var(--cinza-itemLista); margin-top: 10px; border-radius: 5px; transition: all 0.2s ease; }

.formulario .icone { width: 30px; height: 100%; line-height: 40px; text-align: left; padding-left: 12px; display: inline-block; font-family: 'Icones app'; vertical-align: middle; color: var(--cinza-label) }

.form-control:focus {
  box-shadow: none;
}

.tox-tinymce {
	border: 1px solid var(--input-border) !important;
	border-radius: 5px !important;
}

.tox-statusbar {
	border-top: 1px solid var(--input-border) !important;
}


.tox-tbtn--bespoke[aria-label='Tamanhos da fonte'] {
	width: 70px !important;
}

.tox-tbtn__select-label {
	font-weight: 500 !important;
}

.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary{
    background-color: var(--cinzinha)!important;
}
.tutorialAtivo{
    background: var(--verde)!important;
    color: var(--branco-botao)!important;
}
.tutorialAtivo:hover{
    background: var(--verde);
    color: var(--branco-botao);
}
.tutorialAtivoSecao{
    border-radius: 5px 5px 0 0;
    border: 2px solid var(--verde);
    color: var(--branco-botao);
    background: var(--verde)!important;
    margin-bottom: -1px;
}
.tutorialAtivoSecao:hover{
    border-radius: 5px 5px 0 0;
    border: 2px solid var(--verde);
    color: var(--branco-botao);
    background: var(--verde)!important;
    margin-bottom: -1px;
}

.imgTutoriais{
    width: 2.5rem;
}

.menuTutorialDiv{
    display: flex;
    align-items: center;
    gap:5px;
    font-size: 14px;
    position: relative;
}

.bolinhaTutorial{
    width: 6px; 
    border-radius: 50%;
    background-color: var(--verde);
    aspect-ratio: 1; 
    position: absolute; 
    top: calc(50% - 2.5px); 
    left: 5px;
}
input::-webkit-contacts-auto-fill-button {
	visibility: hidden;
}

input::placeholder {
	color: var(--input-placeholder);
	font-weight: 400;
}

input:required { box-shadow:none; }

hr { border: none; height: 1px; background-color: var(--cinza-table); }

select {
	-moz-appearance: none;
	-webkit-appearance: none;
}

/* colocando a variavel branco como fundo dos options pq quando acessamos o web com um windows e estamos no modo escuro,
o select fica, por padrao, com os options brancos, o que é ruim pra ler, ja que o fundo e a cor das letras ficam em branco*/
select option {
    background-color: var(--branco)
}

select optgroup{
    background-color: var(--branco)
}


body {
	
	background: var(--bg-body);
	font-family: 'Circular', sans-serif;
	font-weight: 400;
	color: var(--preto);
	text-align: center;
	font-size: 15px;
}

.content { 

	position: absolute;
	top: 90px;
	left: calc(50% - 360px);
	width: 920px;
	text-align: left;
	display: inline-block;
}


.conjunto-input {

	width: 100%;
	height: 60px;
	padding: 0px;
	background: var(--bg-conjunto-input);
	text-align: left;
	display: inline-block;
	border-radius: 5px;
	line-height: 100%;
	vertical-align: top;
	position: relative;
	margin-bottom: 5px;
	border: 1px solid var(--input-border);
}

.conjunto-input > input, textarea {
	width: 100%;
	height: 100%;
	padding: 0px 10px;
	margin-top: 0px;
	color: var(--input-color);
	font-size: 15px;
	border: none;
	background: transparent;
	font-weight: 500;
	transition: all 0.3s ease;
	appearance: none;
}

.conjunto-input > select {
	width: 100%;
	height: 60px;
	line-height: 20px;
	padding: 0px 10px;
	color: var(--input-color);
	border: none;
	font-size: 15px;
	font-weight: 500;
	text-align: left;
	padding-top: 15px;
	background: transparent var(--bg-seta) no-repeat right 0.75rem center;
	background-size: 8px 10px;
	-moz-appearance: none;
	-webkit-appearance: none;
}

.conjunto-input > .label {
	position: absolute;
	left: 10px;
	top: 3px;
	font-size: 12px;
	font-weight: 300;
	display: none; 
	color: var(--cinza-label);
	line-height: 27px;
}

.conjunto-input > input:valid {

	display: inline-block;
	padding-top: 15px;
}

.input-slim {

	width: 100%;
	height: 47px;
	padding: 0px;
	background: var(--branco);
	text-align: left;
	display: inline-block;
	border-radius: 5px;
	line-height: 100%;
	vertical-align: top;
	position: relative;
	margin-bottom: 5px;
	border: 1px solid var(--input-border);
}

.input-slim > input:valid {

	display: inline-block;
	padding-top: 0px !important;
	font-size: 14px;
}

.input-slim > input:read-only {

	border-radius: 5px;
	background: var(--cinza-itemLista);
	cursor: not-allowed;
	font-size: 14px;
}


.input-slim > select {
		
	padding-top: 0px !important;
	height: 34px !important;
	font-size: 14px;

}


/*diario alimentar*/

.conteudoDiario{
    background-color: var(--cinza-itemLista);
    border-radius: 5px;
    width: 100%;
}

.acoesDiario{
    display: flex;
    flex-flow: column;
    justify-content: center
}

.msgTrashDiario{
    color: var(--cinza-trash);
    font-size: 14px;
    cursor: pointer;
}

.msgPenDiario{
    color: var(--cinza-trash);
    font-size: 14px;
    cursor: pointer;
}

.msgTrashDiario:hover{color: var(--vermelho)}

.msgPenDiario:hover{color: var(--verde)}

.divReacoes{
    width: auto;
    border-radius: 5px;
    padding: 5px 10px;
}

.resposta{
    width: 100%;
    border-top: 1px solid var(--backgroundEtiqueta);
    text-align: right;
    font-size: 15px;
    color: var(--cinza-999);
}

.comentario_nutri{
    background-color: var(--azul);
    border-radius: 10px;
    padding: 5px 10px; 
    color: var(--branco);
    text-align: left;
    max-width: 250px;
}

.fotoPacienteClass{
	display:flex;
	align-items: start;
	gap: 1%;
	position: relative;
}

.linhaTimeline{
	width: 1px;
    position: absolute;
    background: var(--cinzinha);
    height: calc(100% - 6.8rem);
    top: 6.8rem;
    left: 2.8rem;
}	

.reacoesHide{
	display:inline-flex; 
	flex-direction: column; 
	color: var(--branco); 
	height:0;
	border-radius: 5px;
	overflow: hidden;
}
.reacoesShow{
	display:inline-flex; 
	flex-direction: column; 
	color: var(--branco); 
	padding:10px;
	border-radius: 5px;
	overflow: hidden;
	gap: 10px;
}

/* .comentarioLinha:before{
	position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 14px solid var(--input-border);
    left: -14px;
    top: 5px;
} */

/*fim diario alimentar*/

/*

.conjunto-input-refeicao {

	padding: 10px 5px;
	background: var(--branco);
	text-align: left;
	display: inline-block;
	border-radius: 5px;
	vertical-align: top;
	position: relative;
	margin-bottom: 5px;
	border: 1px solid var(--cinza-trash);
	font-family: 'Circular', sans-serif;
}

.conjunto-input-refeicao input, textarea, select {
	width: 100%;
	margin-top: 0px;
	color: var(--input-color);
	font-size: 18px;
	border: none;
	background: none;
	font-weight: 300;
	text-align: center;
	transition: all 0.3s ease;
	-moz-appearance: none;
	-webkit-appearance: none;
	font-family: 'Circular', sans-serif;
}
*/
*[ativoFiltroPaciente="sim"] {
    color: var(--cinza-escuro);
}

.popover {

  z-index: 1!important;
  background-color: var(--itemLista-hover)!important;
  border:1px solid var(--cinza-itemLista)!important;
  box-shadow:1px 1px 1px 1px var(--itemLista-hover)!important;

}

.popover .arrow {
  border-top-color: var(--preto);
  display: none;
}



.clip-text {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tagEtiqueta {
	font-size: 12px; 
	background: var(--backgroundEtiqueta);
    color: var(--colorEtiqueta); 
	text-align: center; 
	display: inline-block; 
	padding: 2px 7px; 
	border-radius: 5px; 
	font-weight: 200; 
}


.destaque2 { 

	background-size: 600% 600% !important;
	animation: animacaoheader 1s ease infinite;
}

@keyframes animacaoheader { 
    0%{background: #dc00ff}
    50%{background: #129bfa}
    100%{background: #dc00ff}
}


/* Slider */

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.5) 0%, rgba(72, 219, 251, 0.5) 50%, rgba(255, 107, 107, 0.5) 100%);
  outline: none;
  opacity: 1;
}

.slider#diasTemp { background: linear-gradient(90deg, rgba(255, 107, 107, 0.5) 0%, rgba(72, 219, 251, 0.5) 100%) !important; }

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 25px;
  background: var(--branco);
  border: 2px solid var(--slider-border);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: transparent;
  border: 2px solid var(--cinza-label);
  cursor: pointer;
}


/* Customização pagina receitas*/


.avulsosLinha:hover { background: var(--verde) !important; color: var(--branco-botao) !important; font-weight: 500 !important; }

.progress {
	background: var(--branco);
	opacity: 0.1;
    justify-content: flex-start;
    border-radius: 100px;
    align-items: center;
    position: relative;
    padding: 0 5px;
    display: flex;
    height: 5px;
    width: 500px;
}

.progress-value {
    box-shadow: 0 10px 40px -10px var(--branco);
    border-radius: 100px;
    background: var(--branco);
    height: 3px;
    width: 0%;
    transition: all 1s ease;
}

#botao-busca {
    width: 10%;
    margin: 20px 0px 20px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px
}

.receitas-cabecalho {
    display: grid;
    grid-template-columns: 45% 15% 10% 30%;
    cursor: default;

    border-radius: 5px; 
    color: var(--cinza);
    padding: 5px 13px; 
}

.scrollClassReceitas::-webkit-scrollbar { width: 2px;}
.scrollClassReceitas::-webkit-scrollbar-track { background: transparent;}
.scrollClassReceitas::-webkit-scrollbar-thumb { background: var(--receitas-scrollClass); }
.scrollClassReceitas::-webkit-scrollbar-thumb:hover { background: var(--receitas-scrollClass); }

/* Modal receitas */

#receitasModalLargura {
    width: 900px; 
    left: calc(50% - 450px);
}



.div-switch {
    width: 45px; 
    height: 30px; 
    display: inline-block; 
    /* float: right;  */
    vertical-align: middle; 
    margin-top: -3px
}

.receitasContent {
    margin-top: 20px;
}


/* Fim do modal receitas */

.receitasTipo:hover {
    background: var(--cinza-itemLista) !important;
}

/*------ fim receitas ------*/


/* Impressos */

#impressos {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-row-gap: 5px; 
    grid-column-gap: 5px;
}

.impresso {
    display: flex;
    justify-content: center;
    margin-bottom: 0
}

.impresso-documento { 
    text-align: center; 
    cursor: pointer; 
}

/* Fim impressos */

/* Laminas */


.menuItem {
    text-align: center; 
    padding: 10px 0px; 
}

.botaoLaminas {
	width: calc(50% - 5px); 
	border-radius: 5px; 
	cursor: pointer; 
	display: inline-block;
	background: var(--bg-body);
}

#mudarExibicao { 
    position: absolute;
    top: 0px;
    right: -204px;
    background: var(--cinza-itemLista);
    padding: 5px 6px;
    height: 40px;
    cursor: pointer;
    display: flex;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
}

.laminasContentMiniatura {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
    margin-top: 10px;
}

.laminasContentMiniatura .laminaClass { 
    width: 100%; 
    padding: 10px; 
    display: inline-block; 
    border-radius: 5px; 
    vertical-align: top; 
    text-align: center; 
    cursor: pointer; 
    position: relative;
}

.laminasContentLista {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.laminasContentLista img {
    width: 8% !important;
}

.laminasContentLista .laminaClass {
    width: 100%; 
    padding: 10px; 
    /* margin-bottom: 5px;  */
    gap: 20px;
    display: flex; 
    align-items: center;
  
    border-radius: 5px; 
    vertical-align: top; 
    text-align: center; 
    cursor: pointer; 
    position: relative;
}

.etiquetaLaminaLista {
    position: absolute;
    top: 10px;
    right: 11px;
    width: 100px;
    font-size: 12px;
    color: #fff;
    border-radius: 5px;
    z-index: 3;
}

/* .abaAtiva {
    background: var(--verde);
    color: var(--branco-botao);
    font-weight: 500;
} */

.cientificaNome {
    margin-top: 10px;
    font-weight: 200;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
}

.etiquetaLaminaMiniatura {
    position: absolute;
    top: 10px;
    left: -20px;
    width: 89px;
    font-size: 11px;
    color: #fff;
    transform: rotate(-45grad);
    border-radius: 5px;
    z-index: 3;
}

/* Fim laminas */

/* Treinamento */


.horario, .dia { 
    background: var(--verde)!important;
    color: var(--branco-botao) !important;
    border: 1px solid var(--verde) !important;
    border-color: var(--vermelho); 
} 

#dias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px
}

.diasDisponiveis {
    padding: 0;
    width: 20%; 
    height: 60px; 
    font-size: 16px; 
    text-align: center; 
    line-height: 60px; 
    cursor: pointer;
}

.horariosDisponiveis {
    padding: 0;
    width: 20%; 
    margin-top: 3px; 
    font-size: 16px; 
    text-align: center; 
    line-height: 60px; 
    cursor: pointer; 
    display: inline-block;
}

.horariosIndisponiveis {
    padding: 0;
    width: 20%; 
    margin-top: 3px; 
    font-size: 16px; 
    text-align: center; 
    line-height: 60px; 
    cursor: pointer; 
    display: none;
}

/* Fim treinamento */


/* Telefones */


.cursiva {
    color: var(--preto);
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 15px
}

.telefone {
    font-size: 22px; 
    margin-top: 10px; 
    font-weight: 200; 
    color: var(--verde); 
    cursor: pointer;
}


/* Fim telefones */

/* Logo */


#tabela { 
    border: 0px solid var(--slider-border); 
    text-align: left; 
    padding: 5px; 
}

#carimbo-receitas, #farmacias-parceiras {
    width: calc(50% - 25px); 
    vertical-align: top; 
    margin: 10px; 
    display: inline-block;
}

#camposFarmacia {
    margin-top: 20px;
}

#cabecalhoTexto {
    font-size: 16px;
}

/* Fim logo */

/*Lixeira*/

.menuFavoritos { 
    width: calc(20% - 14px); 
    border: 1px solid var(--cinza-trash); 
    padding: 10px; 
    text-align: center; 
    vertical-align: top; 
    justify-content: center; 
    flex-direction: column; 
    cursor: pointer; 
    border-radius: 5px; 
    margin: 5px; display: 
    inline-flex; 
    font-size: 16px; 
    font-weight: 200; 
    color: var(--preto);
}

.menuAtivo { 
    background: var(--verde); 
    border-color: var(--verde); 
    font-weight: 500; 
    color: var(--branco); 
}

.favoritoLinha { 
    font-weight: 200; 
    border-bottom: 1px solid var(--input-border); 
    color: var(--preto); 
}

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


/*links*/

#linksPage { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}
#linksPage li { 
    border: none; 
    background: none; 
}
.iti--separate-dial-code .iti__selected-flag { 
    background: none !important; 
    margin-top: 4px; 
    font-size: 16px; 
}
.iti__country-list { 
    font-size: 16px; 
}
.iti.iti--allow-dropdown.iti--separate-dial-code { 
    margin-top: 3px; 
    margin-left: -5px; 
}
.diasemanaClass { 
    border-radius: 5px;
    background: var(--cinza-itemLista);
    margin-bottom: 2px;
    font-size: 15px;
    padding: 7px 8px;
    color: var(--cinza);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.turnoClass {
	margin-top: 3px; 
    border-radius: 5px;
    background: var(--cinza-itemLista);
    margin-bottom: 2px;
    font-size: 15px;
    padding: 7px 8px;
    color: var(--cinza);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acesse {
    background: var(--cinzinha); 
    text-align: center; 
    padding: 15px; 
    margin-top: 10px; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 20px;
}

.meusLinks {
    width: calc(65% - 25px); 
    vertical-align: top; 
    display: inline-block;
}

.personalizacao {
    width: calc(35% - 25px); 
    vertical-align: top; 
    display: inline-block;
    border-radius: 5px;
}

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


/* Email personalizado */

.crcAtivo{ 
    background: var(--itemLista-hover); 
 }
.envioAtivo{ 
    background: var(--verde); 
    border: none; 
    color: var(--branco); 
}

.abaTipos {
    margin: 10px 0px; 
    width: 50%; 
    cursor: pointer; 
    text-align: center; 
    border-radius: 5px;
    border: 1px solid var(--etiqueta-border);   
    padding: 5px;
}

.selectRec {
    color: #fff;
    cursor: pointer;
    border-radius: 15px;
    padding: 5px;
    height: 38px;
    padding-right: 24px;
    background: transparent url(./assets/img/setasDark.svg) no-repeat right 0.7rem center;
    background-size: 8px 10px;
}

.dataEmail {
    width: 105px;
    font-size: 17px;
    border-radius: 5px;
    padding: 2px 6px;
    border: none;
    background: var(--branco-botao);
}

input.dataEmail::placeholder {
    font-size: 14px;
}
/*-------------------------*/

/* Ebooks */

.ebooksAba{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	margin-top: 20px;
}

.ebookClass { 
	margin-bottom: 0;
    padding: 20px; 
    display: inline-block; 
    border: 1px solid var(--cinza-trash); 
    border-radius: 5px; 
    vertical-align: top; 
    text-align: center; 
    cursor: pointer; 
    position: relative; 
}

.comprarClass:hover { 
    background: var(--preto) !important; 
    color: var(--branco) !important; 
}

.estiloAba {
    width: calc(50% - 4px); 
    display: inline-block; 
    text-align: center; 
    padding: 10px 0px; 
    font-size: 17px; 
    border-radius: 5px; 
    cursor: pointer
}

/*---------------------------*/
/*Artigos*/

.tag { 
    font-weight: 300; 
    font-size: 12px; 
    background: var(--verde); 
    display: inline-block; 
    padding: 2px 6px; 
    color: var(--branco-botao); 
    cursor: pointer; 
    border-radius: 5px; 
}

.secaoArtigo {
	color: var(--cinza);
    font-size: 15px; 
    line-height: 180%; 
    margin-top: 10px; 
    font-weight: 100; 
    background: var(--cinza-itemLista); 
    padding: 1rem; 
    border-radius:5px;
}

.pdfContainer{
	cursor: pointer;
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--vermelho-escuro);
    padding: 5px;
    border-radius: 5px;
}

.verArtigoContainer {
	cursor: pointer;
	gap: 5px;
    display: flex;
    align-items: center;
    color: var(--verde);
    padding: 5px;
    border-radius: 5px;
}


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



/* Site personalizado */

.acoesSite {
    float: right;
    display: flex;
    justify-content: space-around;
    width: 250px
}

.visualizacaoUrlSite {
    padding: 20px; 
    border-radius: 5px; 
    background: var(--bg-body);
}

.nomeUrl {
    width: 250px; 
    font-size: 30px; 
    border: none; 
    border-bottom: 1px solid var(--cinza-label)
}

.configContainer {
    width: 100%; 
    border-radius: 5px;
}

.itemConfig {
    padding: 30px!important;
    cursor: default
}

.envioImagem {
    width: 100%; 
    height: auto; 
    text-align: center;
}

.legendaEnvio {
    margin: 8px 1px; 
    font-size: 12px; 
    font-weight: 200; 
    color: var(--cinza-label)
}

.viewFoto {
    width: auto; 
    max-width: 100%; 
    height: auto; 
    max-height: 200px; 
    cursor: pointer;
}

.conjunto-input-textarea {
    width: 100%; 
    margin-top: 10px; 
    height: auto
}

.textarea {
    text-align: left;
    line-height: 140%;
    height: 100px;
    font-size: 13px;
    margin-top: 25px
}

.servicos { 
    width: calc(20% - 4px);
    display: inline-block; 
    /* border: 1px solid var(--input-border);  */
    border-radius: 5px; 
    text-align: center; 
    padding: 15px 0px; 
    margin-bottom: 3px; 
    cursor: pointer; 
    font-weight: 300;
    transition: all 0.2s ease;
}

.dias-div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 5px;
}

.dias {
    width: 100%; 
    /* border: 1px solid var(--input-border);  */
    border-radius: 5px; 
    text-align: center; 
    padding: 15px 0px; 
    /* margin-bottom: 3px;  */
    cursor: pointer; 
    font-weight: 300;
    transition: all 0.2s ease;
    background: var(--branco);
    color: var(--cinza-escuro);
    position: relative;
    height: 55px;
    margin-bottom: 10px;
}

.diaAtivo {
    /* background: #ef5350;
    color: var(--branco);*/
    border-radius: 5px 5px 0 0; 
    background: var(--branco);
    height: 65px;
    margin-bottom: 0;

}

#turnos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    width: 100%;
    
}

#turnos-container {
    width: 100%;
    height: 0px;
    background: var(--branco);
    border-radius: 5px;
    padding: 20px 20px;
    display: none;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.turno {
    width: 100%;
    text-align: center;
    display: none;
}


.turnoSelecionado {
    background: var(--verde);
    color: var(--branco);
}

.turnoSelecionado:hover {
    background: var(--verde);
}

.dot {
    margin-top: -5px;
    display: none
}

.icon {
    float: right;
    font-weight: 500;
    color: var(--preto);
    transition: transform 0.5s ease 0s;

}

/* Fim site personalizado */




/*Inicio financeiro*/

.linha-financeiro {
	font-weight:300;
}

.tagCategorias {
	padding: 5px 10px; margin-right: 5px; cursor:pointer; background: var(--cinza-desabilitado); opacity: 1; color: var(--branco-botao); display:inline-block; border-radius: 4px;
}

.selecionado { background: var(--verde) !important; color: var(--branco-botao) !important;  font-weight: 500 !important }

.linha-registro { height: 70px; border-bottom: 1px solid var(--cinza-trash); }

.carrosel-cat { padding-bottom: 5px; margin-top: 20px; min-width: 100%; overflow-x: auto;display: flex; flex-direction: row; flex-wrap: nowrap; white-space: nowrap; }


/*fim financeiro*/




/* Inicio pasta compartilhada */


.folderClass { 
	box-shadow: 1px 1px 10px 1px var(--cinzinha);
    padding: 10px; 
    margin-bottom: 5px; 
    display: inline-block; 
    border-radius: 5px; 
    vertical-align: top; 
    text-align: center; 
    cursor: pointer; 
    position: relative; 
}

.itemPasta {
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 10px 0px;
}



/* Fim pasta compartilhada */




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



/* Inicio emails */


.emailLinha {
    cursor: default;
}


/* Fim emails */




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




/* Inicio do beneficios */

#beneficiosPage {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.acoesBeneficios {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



/* Fim do beneficios */




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



/* Inicio dados */


/* Inicio equipe / secretaria */


#usuarios-cabecalho {
    display: grid;
    grid-template-columns: 30% 35% 20% 15%;
}


/* Fim usuario / secretaria */



/* Inicio app paciente */


.itemListaToogle {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    cursor: default
}

.questionario-toogle {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    cursor: default;
    padding: 15px 0;
    background: transparent
}

/* Fim app paciente */


/* Fim dados */



/* Inicio estatisticas */

.cardInfoEstatistica {
    background: var(--cinza-itemLista); 
    padding: 10px; 
    border-radius: 5px;
}

/* Fim estatisticas */


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



/* Inicio extensões */

.extensaoSwalContent {
    text-align: left; 
    width: 100%;
    display: flex;
    max-height: 350px
}

.extensaoLeftContent {
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
    width: 60%;
    margin-right: 30px
}

.extensaoRightContent {
    width: 40%;
    display: inline-block;
    vertical-align: top;
    height: auto;
    border-left: 1px solid var(--cinzinha);
    padding-left: 30px;
}

.descricaoExtensao {
    margin-top: 20px;
    overflow-y: auto;
    height: calc(100% - 30px);
}

.cardExtensaoBt {
    width: 150px;
    height: 35px; 
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardExtensaoImg {
    /* border-bottom: 1px solid var(--cinzinha);  */
    /* background-size: cover!important;  */
    background-position: center!important;
    background-size: contain;
    background-repeat: no-repeat;
}

.cardExtensaoContent {
    padding-top: 15px;
    height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



/* Fim extensoes */



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


/* Inicio acesso secretaria */


/* Todos */
.headerSecretaria {
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 60px; 
    width: 100%; 
    z-index: 9; 
    background: var(--branco);
}

.headerSecretariaContent{
    width: 1100px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.headerEsquerdaSecretaria {
    width: 45px;
}

.headerSecretariaMensagem {
    color: var(--preto); 
    margin: 0px 30px; 
    font-weight: 200; 
    display: inline-block
}

.bt-menu {
    background: var(--branco); 
    color: var(--preto)
}

.bts-menu {
    width: 100%; 
    margin: 10px; 
    vertical-align: top;
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    gap: 10px
}

#secretariaContent {
    width: 100%;
    margin: 10px;
}


/*pre consulta*/

.adicionarPergunta{
	padding: 10px;
    margin-top: 10px;
    background: var(--branco);
    text-align: center;
    border-radius: 5px;
    color: var(--cinza);
    cursor: pointer;
    border: 1px solid var(--input-border);
    width: 100%;
    font-size: 18px;
}

/*fim pre consulta*/


/* Pacientes */
#pacientesPage {
    height: auto; 
}

.pacienteFoto {
    width: 40px; 
    height: 40px; 
    margin: 0px 20px 0px 10px; 
    vertical-align: middle; 
    display: inline-block; 
    border-radius: 40px; 
}

.pacienteAcoes {
    display: flex; 
    align-items: center
}





/* Agenda */
.subtitulo-legenda {
    font-size: 14px; 
    vertical-align: middle; 
    display: inline-block; 
    font-weight: 300
}

.bloqueado { 
	background: var(--vermelho) !important; 
	color: var(--branco-botao) !important; 
	border-color: var(--vermelho) !important; 
}


/* Financeiro */
.tipoClass {
    width: calc(50% - 8px); 
    background: var(--branco); 
    border: 1px solid var(--input-border); 
    color: var(--input-color); 
    display: inline-block; 
    margin-right: 5px; 
    margin-top: 20px;
    font-size: 15px
}

/* Agenda */

.fc .fc-toolbar-title{
    font-size: 20px!important; font-weight: 600; color: var(--cinza-escuro);
}

.bolinha { width: 20px; height: 20px; border-radius: 20px; margin: 7px 0px; display: inline-block; vertical-align: middle;  }
#swal2-content{ margin-top: -18px; }
.fc-daygrid-day-number, .fc-timegrid-slot-label-cushion { font-weight: 200; color: var(--cinza-label) !important; font-size: 12px; }
.fc-timegrid-slot-label-frame { text-align: center !important; }
.btn-primary { background: var(--verde) !important; border-color: var(--branco) !important; }	
.btn-primary:hover { border-color: var(--branco) !important; background: var(--verde-18b38a) !important;}
.fc-timegrid-slot { cursor: pointer; }
.fc-timegrid-slot:hover { background: rgba(0,0,0,0.03) !important; }
.fc-daygrid-event-dot{ display: none;}
.fc-list-event-graphic{ display: none;}
.fc-list-event{ position: relative; }
.fc-event-time { display: none; }
.fc-list-event-time { display: none; }
.fc-list-event-title { display: none; }
.fc-event-title {display: none;}
.fc-event-main{ display: none;}
.table-bordered {
	border: none;
}
.table-bordered td, .table-bordered th{
	border: 1px solid var(--cinza-table);
}

.table-bordered thead td, .table-bordered thead th{
	background: var(--branco);
}
#agendamentosPage {
  position: relative;
  z-index: 1;
}

.fc .fc-list-empty{
	border-radius: 5px;
}

.fc .fc-list-sticky .fc-list-day > *{
	background: var(--branco)!important;
}
.fc-toolbar-title:first-letter{
	text-transform: capitalize;
}

.zIndexAuto{
	z-index: auto !important;
}
.zIndex5{
	z-index: 5 !important;
}
.tooltipSemana:before {
	content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.fc-scroller-harness{
	overflow:visible !important;
}
.btn-group>.btn:first-child{
	font-size: 14px;
	font-weight: 500;
}

.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child){
	font-size: 14px;
	font-weight: 500;
	
}

/* Fim acesso secretaria */


/*Casos clinicos*/

.grupo{ 
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 50px;
	font-weight: 200;
	text-align: left;
	background: var(--vermelho);
	color: var(--branco);
	display: inline-block;
	text-align: center;
	margin-bottom: 5px;
	font-size: 16px;
} 

/*.grupo-plus {
	width: 50px;
    line-height: 50px;
    border-radius: 50px;
    font-weight: 200;
    text-align: left;
    font-size: 16px;
    background: var(--branco);
    border: 1px solid var(--cinza-trash);
    color: var(--cinza-label);
    font-size: 28px;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}*/

#move-up-down {
	position: fixed;
	background:var(--branco);
	border: none;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	left: calc(100% - 100px);
	top: calc(100% - 100px);
	cursor: pointer;
	z-index: 99999;
	padding-top: 14px;
	display: none;
}

.grupoIcone{
	width: 20%;
	aspect-ratio: 1; 
	display: flex;border-radius: 50%; 
	align-items: center; 
	justify-content:center; 
	border: 1px solid var(--cinza-c3c3c3); 
	color: var(--branco-botao); 
	font-size: 20px; 
	cursor: pointer;
	width: 20%;
	font-size: 16px;
	line-height: 1;
}

.casosClinicos {
	display: flex;
    flex-direction: column;
    max-height: calc(100vh - 315px);
    overflow: auto;
    gap: 5px;
}

.conjunto-linha {
	background: var(--cinza-e9e9e9); 
	width:100%; 
	text-align:center; 
	border-radius: 5px 5px 0 0; 
	margin-top: 20px;
}

.multipla, .texto, .unica {
	width: fit-content; display: inline-block; padding: 10px; background: var(--bg-body); cursor: pointer; border-radius: 5px; margin: 10px 0; 
}

/*.favoritoLinha { text-align:left; background: #fafafa; width: 100%; display: inline-block; font-size: 16px; border: 1px solid #eee; border-top: 0px; padding:10px; transition: all 0.2s ease; }
.favoritoLinha:hover { background: #f4f4f4; }*/

.questaoDiv {
	margin-top: 10px;

}

.questLinha {
	font-size: 16px;

}

.exitResposta {
	border-radius: 50%; 
	position: absolute; 
	top: -10px; 
	left: -10px; 
	height:20px; 
	width:20px; 
	background: var(--branco); 
	text-align: center;
	display:none; 
}

.botao-nova-resp {
	width: calc(25% - 5px);
	height: 50px;
	line-height: 50px;
	color: var(--cinza);
	text-align: center;
	display: inline-block;
	cursor: pointer;
	font-size: 18px;
	font-weight: 300;
	background: var(--cinzinha);
	border-radius: 5px;
}

/*.div-content { width: calc(100% - 25px); vertical-align: top; margin: 10px; display: inline-block; }*/

.btn-link { cursor:pointer; font-weight:300; font-size: 12px; color: var(--preto) !important; }

.btn-link:hover { color: var(--preto); }

.fa-question-circle { font-size: 14px; cursor: pointer; }

.escolhido {
	-webkit-text-stroke-width: 1px!important;
    -webkit-text-stroke-color: #faac04!important;
	color: #faac04!important;
}

.ebookBloqueado { filter: grayscale(97%); }


.sticky-bottom {
	position: sticky; 
	bottom: 0px; 
	padding: 0.5rem 1rem 1rem; 
	background-color: var(--branco);
}

.linhaCaso {
	position: relative;
	width: 97%;
	margin: 0 0 0 auto;
	min-height: 100%;
}

.linhaCaso::after {
	content: '';
    position: absolute;
    width: 2px;
    background-color: var(--bg-body);
    top: 0px;
    bottom: 10px;
    margin-left: -15px;
}

.fa-thumbs-up {
	color: var(--input-placeholder);
	cursor: pointer;
}

.curtida {
	color: var(--azul-curtida);
}


/* [data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.2s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #444;
    color: var(--branco);
    font-size: 14px;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: 2em;
    left: 50%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border-radius: 3px;
    z-index: 99999;
    visibility: hidden;
}
/* 
/*
[data-title] {
    position: relative;
}*/

/*fim casos clinicos*/

/*inicio gerador de artes*/

.bgClass { width: calc(25% - 3.5px); padding: 20px; border-radius: 5px; border: 1px solid var(--input-border); display: inline-block; margin-bottom: 3.5px; text-align: center; cursor: pointer; }

.arteLinha { width: 100%; height: 235px; border: 1px solid var(--input-border); display: inline-block; margin-bottom: 4px; cursor: pointer; }

.arte { height: auto; padding: 10px; display: inline-block; border: 1px solid var(--branco) }

.botaoCriar:hover{
	background: var(--verde);
	color: var(--branco);
	transition: all 0.2 ease;
}

.imgArtes{
	width: 50px; 
	height: 50px; 
	margin: 10px 2px; 
	cursor: pointer;
}

/*fim gerador de artes*/

.container-aba {

	display: flex;

	gap: 5px;

	margin-top: 20px;

}




.botao-aba {

	width: 50%;

	border-radius: 5px;

	cursor: pointer;

	display: inline-block;

	background: var(--bg-body);




	font-size: 16px;

	font-weight: 400;

	color: var(--cinza);

	/* border: 1px solid var(--bg-body); */

}




.aba-ativa {

	background: var(--verde);

	color: var(--branco-botao);

	font-weight: 500;

}

/* inicio painel audios */

.card-player {
  width: 100%; 
  display: inline-block; 
  height: auto; 
  border-bottom: 1px solid var(--cinza-e9e9e9); 
  padding: 15px;
  cursor: pointer;
}

.card-player:hover {
  background-color: var(--branco-escurecido); 
}

.card-tag {
  display: inline-block; 
  text-align: left; 
  font-size: 22px; 
  font-weight: 500; 
  padding: 8px 24px; 
  width: 100%;
  margin-top: -16px;
}

.etiqueta {
  display: inline-block;
  color: black;
  border: 0px;
  border-radius: 4px;
  background-color: var(--bg-body);
  padding: 2px 20px;
  cursor: pointer;
}

.audio-controle {
  display: inline-block;
  text-align: center;
  background: var(--slider-border);
  width: 180px; 
  color: var(--branco);
  font-size: 13px;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 400;
}

/*fim painel audios*/

/* Metodo qualitativo */
.menuRefeicao{
    border-radius: 5px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cinza-escuro);
}
.lembrete { padding: 10px 20px; background: var(--cinza-claro); color: var(--branco); width: calc(25% - 15px); text-align: center; display: inline-block; margin: 5px; vertical-align: top; border-radius: 5px; cursor: pointer; transition: all 0.2s ease; }
.grupoTips { width: 220px; text-align: left; padding: 10px; background: var(--cinza-escuro); color: var(--branco); position: absolute; top: -40px; left: 50%; float: left; display: none; font-weight: 300; font-size: 14px; border-radius: 5px }
.grupoTips:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-top-color: var(--cinza-escuro); border-width: 10px; margin-left: -10px;}
.ativoRefeicao{ background-color: var(--verde-desativo) !important; border-color: var(--verde-desativo) !important;}
/* .receitasClass { width: 100%; display: inline-block; padding: 10px 20px; margin: 5px 0px; text-align: left; border-radius: 5px; border: 1px solid var(--input-border); cursor: pointer; font-size: 16px }
.receitasClass:hover { background: var(--branco-escurecido); } */
.refeicoesClass { width: 100%; display: inline-block; padding: 10px 20px; margin: 5px 0px; text-align: left; border-radius: 5px; border: 1px solid var(--input-border); cursor: pointer; font-size: 16px }
.refeicoesClass:hover { background: var(--branco-escurecido); }
.pilotoClass { width: 100%; display: inline-block; padding: 10px 20px; margin: 5px 0px; text-align: left; border-radius: 5px; border: 1px solid var(--input-border); cursor: pointer; font-size: 16px; font-weight: 200}
.pilotoClass:hover { background: var(--branco-escurecido); }
.gradiente {  background: linear-gradient(45deg, var(--verde), var(--amarelo)); background-size: 600% 600%; animation: animacao 0.5s ease infinite; color: var(--branco) !important;}
@keyframes animacao { 
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.tagRefeicao{
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
    background: var(--backgroundEtiqueta);
    margin: 0 3px 3px 0;
}
.corte { 
    width: 30px;
    border-bottom: 3px solid red;
    position: absolute;
    top: 8px;
    left: -5px;
    transform: rotate(-45deg);
    z-index: 8;
 }
.tt-hint, .tt-input, .tt-menu { width: 300px; }
.alimentoCardapio { position: relative; width: calc(50% - 3px); text-align: center; display: inline-block; cursor: pointer;}
.alimentoCardapio:hover { background: var(--verde) !important; border-color: var(--verde) !important; color: var(--branco-botao) !important; font-weight: 300 !important }
.cardapiofinal { color: var(--branco-botao) !important; cursor: default; width: 258px; border: 1px solid var(--cinza-table); border-radius: 5px; padding: 10px 0;  }
.cardapiofinal:hover { background: var(--branco) !important; border: 1px solid var(--cinza-table) !important; }
.micronutrientesClass { border: 1px solid var(--input-border); text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column;  padding: 10px 0px; border-radius: 5px; }
#refeicoesPage { list-style-type: none; margin: 0; padding: 0; }
#refeicoesPage li { border: none; background: none; }


/*Fim metodo qualitativo */ 


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


/* Inicio rastreamento metabólico */


.botoesPrincipais{ width: calc(25% - 3px); margin-top: 20px; font-size: 16px; background: var(--cinza-8395a7) }
.rastMarcado { color: var(--branco-botao); border-radius: 5px }
.rast { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0}
.legendasRastreamentoContainer{ line-height: 17px; margin: 10px 0; color: var(--cinza); display: flex; gap:10px; align-items: center; }
.legenda-quadradinho-rast{width: 25px; height: 25px; border-radius: 5px;}
.verdeRastreamento { background: var(--verde); }
.amareloRastreamento { background: #ebbd13 !important; }
.laranjaRastreamento { background: #ffa425; }
.vermelhoRastreamento { background: #fa5423; }
.vermelhoescuroRastreamento { background: #e61c24; }

.boxResultado { margin-top: 20px; color: var(--branco-botao); border-radius: 5px; text-align: center; padding: 10px; font-weight: 600 }

/* Fim rastreamento */



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




/* Inicio sinais e sintomas */


.sintoma, .sintomaBusca { display: inline-block }
.sintomaMarcado, .sintomaBuscaMarcado { background: var(--verde);color: var(--branco-botao);display: inline-block }
.sintomaMarcado:hover, .sintomaBuscaMarcado:hover { background: var(--verde) }
.microNut { width: auto; padding: 5px 10px; text-align: center; font-size: 16px; font-weight: 200; background: var(--verde); cursor: pointer; display: inline-block; border-radius: 5px; margin-bottom: 5px; color: var(--branco-botao); }
.legenda-1-sintoma { width: 20px; height: 20px; border-radius: 5px; margin: 2px 0px; display: inline-block; vertical-align: middle; background: #ebbd13 }
.legenda-2-sintomas { width: 20px; height: 20px; border-radius: 5px; margin: 2px 0px; display: inline-block; vertical-align: middle; background: #ffa425 }
.legenda-3-sintomas { width: 20px; height: 20px; border-radius: 5px; margin: 2px 0px; display: inline-block; vertical-align: middle; background: #fa5423 }
.legenda-4-sintomas { width: 20px; height: 20px; border-radius: 5px; margin: 2px 0px; display: inline-block; vertical-align: middle; background: #e61c24 }



/* Fim sinais e sintomas */



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




/* Inicio risco de disbiose */

.opcoes-disbiose { display: inline-block}
.opcoes-disbiose-marcado { background: var(--verde); display: inline-block; color: var(--branco-botao); }
.opcoes-disbiose-marcado:hover { background: var(--verde) }


/* Fim do risco de disbiose */



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



/* Inicio questionario de cafeina */


.rastMarcadoCafeina { color: var(--branco-botao); border-radius: 5px  }
.rastMarcadoCafeina:hover { background: var(--verde) }
.legenda-quadradinho{border-radius: 5px; cursor: default; width: 25px; height: 25px; pointer-events: none; background-color: var(--verde); color: var(--branco-botao)}
.verdeCafeina { background: var(--verde); }
.verdeescuroCafeina { background: #79af17; }
.amareloCafeina { background: #ebbd13; }
.laranjaCafeina { background: #ffa425; }
.vermelhoCafeina { background: #fa5423; }
.vermelhoescuroCafeina { background: #e61c24; }
.vazado { border: 1px solid rgb(221, 221, 221) !important; background: none; color: var(--preto) !important;}

.tipoQuestionario { text-align: center; width: calc(50% - 5px); padding: 10px 0px; display: inline-block; border-radius: 5px; border: 1px solid var(--verde); color:var(--branco); cursor: pointer; font-weight: 500; }



/* Fim questionario de cafeina */





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





/* Inicio registro de exames */


.parametro { width: auto; padding: 5px 5px; text-align: center; font-size: 16px; background: var(--cinza-itemLista); color: var(--cinza); font-weight: 200; cursor: pointer; border-radius: 5px; display: inline-block; margin-bottom: 5px; }
.parametro:hover { background: var(--itemLista-hover);}
.parametroMarcado { width: auto; padding: 5px 5px; text-align: center; font-size: 16px; font-weight: 200; background: var(--verde); cursor: pointer; display: inline-block; border-radius: 5px; margin-bottom: 5px; color: var(--branco-botao); }

.amareloExames { background: #ffa425; }
.verdeExames { background: var(--verde); }




/* Fim registro de exames */

/* CSS do CHAT */

.msgBoxPro { width: 100%; text-align: right; margin-top: 10px; }
.msgBoxPac { width: 100%; text-align: left; margin-top: 10px; }
.msgPro { width: auto; max-width: 75%; background: var(--azul); display: inline-block; border-radius: 5px; padding: 10px; font-size: 15px; color: var(--branco-botao); font-weight: 500; text-align: left; vertical-align: middle; }
.msgPac { width: auto; max-width: 75%; background: var(--msg-pac); display: inline-block; border-radius: 5px; padding: 10px; font-size: 15px; color: var(--branco); font-weight: 500; text-align: left; }
.msgTrashChat { vertical-align: middle; display: inline-block; margin-right: 10px; color: var(--cinza-trash); display: none; font-size: 16px; cursor: pointer; }
.msgTrashChat:hover { color: var(--vermelho); }
.msgBoxPro:hover .msgTrashChat { display: inline-block; }

.scrollClassChat::-webkit-scrollbar { display: none; }
.scrollClassChat { -ms-overflow-style: none;}
.msgAguardandoChat { background: var(--azul-escuro); }
.botaoChatClass{ width: 40px; height: 40px; line-height: 40px; text-align: center; display: inline-block; vertical-align: middle; background: var(--branco-submenu); color: var(--cinza); cursor: pointer; font-size: 16px; border-radius: 100%; transition: all 0.2s ease; }
.botaoChatClass:hover { background: var(--verde) !important; color: var(--branco) !important; }

/* painel de pasta Compartilhada */

.opcoesPastaC{
    border-radius: 5px;
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s ease;
    margin-top: 5px;
    margin-top: 5px;
}

.del:hover{
    color: var(--cinza-claro)!important;
}
/* fim */



/* Estilos para os checkboxes do select da pagina de favoritos */

.dropdownCheckbox {
    position: relative;
    display: inline-block;
}

.dropdownCheckboxOpcoes {
    display: none;
    position: absolute;
    background-color: var(--cinza-itemLista);
    width: 93%;
    margin-top: 2px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdownCheckboxItem {
    display: flex;
    padding: 4px 10px;
    color: var(--cinza);
    cursor: pointer
}

.custom-checkbox {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: var(--branco);
    /* Not removed via appearance */
    margin: 0;


    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-color: var(--cinza-c3c3c3);
    border-radius: 0.30em;
    transform: translateY(-0.075em);
    margin-right: 4px;

    display: grid;
    place-content: center;
}

.custom-checkbox::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--verde);
    /* Windows High Contrast Mode */
    /* background-color: var(--amarelo); */
}

.custom-checkbox:checked::before {
    transform: scale(1);
}
  
.custom-checkbox:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}

.iti__country-container{
    height: 20px!important;
    line-height: 1;
}

.iti iti--allow-dropdown iti--show-flags iti--inline-dropdown{
    margin-top: 30px!important;
}

.mascaraTel{
    border: none!important;
    padding-left: 50px!important;
    background: none!important;
    color: var(--cinza)!important;
}

.iti{
    font-size: 15px;
    margin-top: 30px;
    line-height: 1;
}

.iti__selected-dial-code{
    display: none!important;
}

.iti--inline-dropdown .iti__dropdown-content{
    background-color: var(--bg-cardReceita)!important;
}

.iti__globe{
	filter: invert(1)!important;
}


.botaoIA {
    background: linear-gradient(135deg, #ff69b4, #c084fc); 
    color: white;
    border: none;
    font-weight: bold;
    text-align: center;
}

.botaoIAVerde{
    background: linear-gradient(90deg, #15BE8E 0%, #15AFDD 100%);
    color: white;
    border: none;
    font-weight: bold;
    text-align: center; 
    transition: transform 0.2s ease, box-shadow 0.2s;
    animation: moverCor 3s ease infinite;
    background-size: 200% auto;
}

.shiny-metal {
    background: linear-gradient(135deg, #f0e68c, #e600ff, #ed8cf0);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2s linear infinite;
}

@keyframes shine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes waves {
	from { background-position-x: -11%; }
	to   { background-position-x: -10000px; }
}

.black-logo {

	position: absolute;
	top: 15px;
	left: 0px;
	height: 30px;
	border-radius: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 12px;
	padding: 0px 10px;
	gap: 5px;
	background: linear-gradient(135deg, #111 25%, var(--cinza-label) 50%, #111 75%);
	color: #fff;
	background-size: 200% 200%;
	animation: reflexo 4s ease infinite;
}

@keyframes reflexo {
	0% {
		background-position: 100% 100%;
	}
	40% {
		background-position: 0% 0%;
	}
	60% {
		background-position: 0% 0%; 
	}
	100% {
		background-position: 100% 100%;
	}
}

/* From Uiverse.io by Smit-Prajapati */ 
.AIloader {
  --size: 250px;
  --duration: 2s;
  /* Um tom lilás suave para o logo */
  --logo-color: #d1d1ff;
  /* Gradiente entre azul piscina e lilás rosado */
  --background: linear-gradient(
    135deg,
    rgba(0, 255, 230, 0.15) 0%,
    rgba(191, 107, 255, 0.15) 50%,
    rgba(255, 107, 214, 0.15) 100%
  );
  height: var(--size);
  aspect-ratio: 1;
  position: relative;
}

.AIloader .box {
  position: absolute;
  background: var(--background);
  border-radius: 50%;
  /* Bordas coloridas com baixa opacidade para o efeito de vidro */
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* Substituí a sombra preta por um leve glow neon */
  box-shadow: 0 0 20px rgba(191, 107, 255, 0.2);
  backdrop-filter: blur(8px);
  animation: ripple var(--duration) infinite ease-in-out;
}

/* Ajuste individual das cores das bordas para criar profundidade */
.AIloader .box:nth-child(1) {
  inset: 40%;
  z-index: 99;
}

.AIloader .box:nth-child(2) {
  inset: 30%;
  z-index: 98;
  border-color: rgba(191, 107, 255, 0.5); /* Lilás */
  animation-delay: 0.2s;
}

.AIloader .box:nth-child(3) {
  inset: 20%;
  z-index: 97;
  border-color: rgba(255, 107, 214, 0.4); /* Rosa */
  animation-delay: 0.4s;
}

.AIloader .box:nth-child(4) {
  inset: 10%;
  z-index: 96;
  border-color: rgba(0, 255, 230, 0.3); /* Azul Piscina */
  animation-delay: 0.6s;
}

.AIloader .box:nth-child(5) {
  inset: 0%;
  z-index: 95;
  border-color: rgba(191, 107, 255, 0.2); /* Lilás */
  animation-delay: 0.8s;
}

.AIloader .logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 30%;
}

.AIloader .logo svg {
  fill: var(--logo-color);
  width: 100%;
  /* Filtro de brilho no logo */
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  animation: color-change var(--duration) infinite ease-in-out;
}

.loader-text {
  margin-top: 50px;
  color: #ffffff;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Suas especificações */
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  
  /* Estética */
  text-align: center;
  text-shadow: 0 0 8px rgba(191, 107, 255, 0.6);
  opacity: 0.8;
  
  /* Gatilho da animação */
  animation: pulse-text 2s infinite ease-in-out;
}

@keyframes pulse-text {
  0% {
    transform: scale(0.98);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
    text-shadow: 0 0 15px rgba(0, 255, 230, 0.8);
  }
  100% {
    transform: scale(0.98);
    opacity: 0.6;
  }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(191, 107, 255, 0.2);
  }
  50% {
    transform: scale(1.15); /* Reduzi levemente o scale para ficar mais fluido */
    box-shadow: 0 0 40px rgba(0, 255, 230, 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(191, 107, 255, 0.2);
  }
}

@keyframes color-change {
  0% {
    fill: var(--logo-color);
  }
  50% {
    fill: #ffffff;
    filter: drop-shadow(0 0 15px rgba(0, 255, 230, 0.8));
  }
  100% {
    fill: var(--logo-color);
  }
}

 .botaoIAVerde:active {
     transform: scale(0.97);
 }

 /* 4. A animação movimenta o fundo da esquerda para a direita, e depois volta */
 @keyframes moverCor {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }