@font-face { font-family: Montserrat; src: url('../fonts/Montserrat/static/Montserrat-Black.ttf'); font-weight: 700;}
@font-face { font-family: Montserrat; src: url('../fonts/Montserrat/static/Montserrat-Bold.ttf'); font-weight: 600;}
@font-face { font-family: Montserrat; src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf'); font-weight: 500;}
@font-face { font-family: Montserrat; src: url('../fonts/Montserrat/static/Montserrat-Medium.ttf'); font-weight: 400;}
@font-face { font-family: Montserrat; src: url('../fonts/Montserrat/static/Montserrat-Regular.ttf'); font-weight: 300;}
@font-face { font-family: Montserrat; src: url('../fonts/Montserrat/static/Montserrat-Light.ttf'); font-weight: 200;}
@font-face { font-family: Montserrat; src: url('../fonts/Montserrat/static/Montserrat-Thin.ttf'); font-weight: 100;}

@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;
}

:root {
	--rosa: #b52ba4;
	--roxo: #6610f0;
	--cinza-escuro: #575757;
	--cinza: #848484;
	--cinza-claro: #dfdfdf;
	--branco: #fff;
	--vermelho: #eb2d2d;
}

label { margin-bottom: unset; }

#barraBusca:focus { 
	outline: none !important;
   box-shadow:none !important;
   border: none !important;
}

*:focus {
   outline: none !important;
   box-shadow:none !important;
   border:1px solid #ccc !important;
}

.input-painel::placeholder {
	color: var(--cinza) !important;
}

body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: var(--cinza);
}

.row {
	margin: 0;
}

.menu {
	background-color: var(--rosa);
	height: 100px;
}

.item {
	line-height: 100px;
	display: inline-block;
	vertical-align: middle;
	padding: 0;
	text-align: center;
	width: 100%;
	color: #fff;
}

.icons {
	text-align: right;
	color: #fff;
	font-size: 20px;
}

.item i {
	margin-right: 10px;
	vertical-align: middle;
}


.card-questao {
	padding: 20px;
	border-radius: 10px;
	border: 1px solid var(--cinza-claro);
}

.cardLista{
	padding: 5px 10px;
   border-radius: 10px;
   margin: 0.5rem 0;
   background: var(--cinza-claro);
}

#origem { font-weight: 600; }

#enunciado { 
	padding: 10px 0;
	font-weight: 500;
}

.linha {
	outline: 1px solid var(--cinza-claro);
	border-radius: 10px;
	margin: 10px 0;
	padding: 10px;
	/*user-select: none;*/
}

.letra {
	border-radius: 100%;
    padding: 5px;
    width: 35px;
    /*height: 35px;*/
    text-align: center;
    outline: 1px solid var(--cinza-claro);
    margin-right: 10px;
}

.marcado {
	outline: 2px solid #6a6a6a;
}

.certa {
	outline: 2px solid green;
	color: green;
}

.errada {
	outline: 2px solid red;
	color: red;
}

.botao {
	display: inline-block;
	border-radius: 10px;
	padding: 10px;
	border: 1px solid var(--cinza-claro);
	width: 200px;
	text-align: center;
	margin-top: 10px;
	cursor: pointer;
}

.resumo {
	padding-bottom: 20px;
}

.parcial div {
	display: inline-block;
}

.resumo .row {
	align-items: center;
}

.resumo .col {
	text-align: center;
}

.cronometro, .finalizar {
	border-radius: 10px;
	border: 1px solid var(--cinza-claro);
	padding: 5px 30px;
	width: fit-content;
}

.timer {
	vertical-align: middle;
	display: inline-block;
	margin: 0 10px;
	line-height: normal;
}

.tempo {
	width: 80px;
	text-align: left;
}

.circulo {
	border-radius: 100%;
	border: 1px solid var(--cinza-claro);
	text-align: center;
	width: 35px;
	margin-right: 10px;
}

.valor {
	padding: 5px;
	font-size: 15px;
}

#comentario, #proxima { display: none; }

#proxima {
	/*text-align: right;*/
}

.input-painel {
	border: 1px solid var(--cinza-claro);
	border-radius: 5px;
	width: 100%;
	padding: 5px 10px;
	margin: 5px 0;
}

.titulo-input {
	padding: 5px 0;
}

.subtitulo-input {
	padding-bottom: 10px;
	font-size: 15px;
	color: var(--cinza);
}

.titulo-painel {
	font-size: 20px;
	font-weight: 600;
	color: var(--cinza-escuro);
	padding: 5px 0;
	border-bottom: 1px solid var(--cinza-claro);
	margin-bottom: 20px;
}

.campos {
	border: 1px solid var(--cinza-claro);
	border-radius: 5px;
	width: 100%;
	height: 100%;
	padding: 5px 10px;
	margin-bottom: 15px;
	background-color: #fafafa;
}

.adicionar {
	cursor: pointer;
	border: 1px solid var(--cinza-claro);
	color: var(--cinza);
	border-radius: 5px;
	text-align: center;
	background-color: var(--cinza-claro);
	font-weight: 500;
}

.adicionar:hover {
	background-color: var(--cinza-claro);
	color: var(--cinza-escuro);
}

.enviar {
	cursor: pointer;
	border: 1px solid var(--rosa);
	background-color: var(--rosa);
	color: #fff;
	border-radius: 5px;
	padding: 5px 0;
	text-align: center;
	font-weight: 500;
	width: 200px;
	margin-bottom: 10px;
}

.redirect {
	border-radius: 10px;
	padding: 30px 10px;
	border: 1px solid var(--cinza);
	width: 100%;
	text-align: center;
	margin-top: 20px;
	cursor: pointer;
	font-size: 20px;
	font-weight: 500;
}

.redirect:hover {
	background-color: var(--cinza-claro);
}

.icones {
	float: right;
}

.icones i {
	font-size: 13px;
	margin: 0 5px;
	cursor: pointer;
}

.swalEditar {
	font-size: 16px;
}

.aba {
	display: inline-block;
	padding: 5px 20px;
	cursor: pointer;
}

.ativo {
	/*border: 1px solid var(--cinza-claro);*/
	/*border-radius: 10px 10px 0 0;*/
	/*border-bottom: none;*/
	/*background-color: var(--rosa);*/
	/*color: #fff;*/
	border-bottom: 2px solid var(--rosa);
	font-weight: 600;
}

#totEsp, #totGeral {
	border-radius: 50%;
	border: 1px solid var(--cinza-claro);
	width: 35px;
   height: 35px;
   line-height: 35px;
   font-size: 12px;
   text-align: center;
   font-weight: 400;
}

.formulario {
	width: 100%; 
	height: 40px; 
	background: #f7f7f7; 
	margin-top: 10px; 
	border-radius: 50px; 
	transition: all 0.2s ease; 
	border: 1px solid var(--cinza-claro);
}

.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: #999;
}

.filtro {
	width: 100%;
   text-align: left;
   justify-content: space-between;
   display: flex;
   align-items: center;
   border-radius: 50px;
   background: #f7f7f7;
   border: 1px solid var(--cinza-claro);
}

.row.linhaFiltro {
   margin: 10px -5px;
}

.linhaFiltro > .col {
	padding-right: 5px;
   padding-left: 5px;
}

.dropdown-item.titulo {
	font-size: 18px;
   font-weight: 600;
   padding-top: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--cinza-claro);
}

.dropdown-menu {
	padding-top: 0;
}

#filtrarOrigem:selected {
	background-color: black;
}

[id*="filtrar"] {
	height: 220px;
   overflow-y: scroll;
   padding-top: 5px;
}

.opcaoOrigem label::before { visibility: hidden; }

#listaOrigem {
	width: 350px;
   position: absolute;
   z-index: 1000;
   height: 245px;
   overflow-y: auto;
   transform: translate3d(0px,-20px, 0px);
}


#origens_list {
	padding: 0 7px;
}

.origemCheck {
	margin-right: 5px;
}

.listaOrigem {
	font-size: 15px;
}

.list {
	background: #fff url('../img/seta.svg') no-repeat right 0.75rem center; background-size: 8px 10px;
	-webkit-appearance: none;
   -moz-appearance: none;
}

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


/*cards*/

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease;
  box-shadow: 0 10px 20px rgba(223, 223, 223, 0.5);
  transform-style: preserve-3d;
}

.linha{
	perspective: 1000px;
	border: none;
	outline: none;
}

.card-front {
	background-color: var(--branco);
	top: 0;
	left: 0;
	border-radius: 1rem;
	padding: 1rem;
	display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-back {
	background-color: var(--branco);
	top: 0;
	left: 0;
	border-radius: 1rem;
	padding: 1rem;
	transform: rotateY(180deg);
}

.linha.flipped .card-front {
	transform: rotateY(180deg) translateZ(0);
}

.linha.flipped .card-back {
	transform: rotateY(0deg) translateZ(0);
}

.botaoPagina{
	width: 2rem; 
	display: flex; 
	align-items: center;
	justify-content: center;
	margin: 1rem 5px;
	height:2rem;
	border-radius: 1rem;
	cursor:pointer;
}

.paginaAtiva{
	background-color: var(--rosa);
	color: var(--branco);
	border: 1px solid var(--rosa);
	border-radius: 1rem;
}

/*fim cards*/


/*estilo dos switches*/

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 1rem;
}

/* 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: var(--cinza);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
   position: absolute;
	content: "";
	height: 0.8rem;
	width: 0.8rem;
	left: 2px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
  background-color: var(--rosa);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--rosa);
}

input:checked + .slider:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*fim da estilização dos switches*/