/* Configurações Gerais */
:root {
	--space-xxs: 4px;
	--space-xs: 8px;
	--space-sm: 16px;
	--space: 24px; 
	--space-md: 32px;
	--space-lg: 48px;
	--space-xlg: 64px;
  
	--screen-sm: 768px;
  
	--gray: #555;
	--gray-dark: #333;
	--gray-darker: #111;
	--gray-light: #f1f1f1;
	--gray-lighter: #fafafa;
	--blue: #187888;
	--yellow: #e6af05;
	--white: #fff;
	--black: #000;
  
	--brand-primary: var(--blue);
	--background: var(--white);
	--text-color: var(--gray-darker);
  }

body, html{
	width: 100% !important;
	height: 100% !important;
	margin:0;
}

*,*::before,*::after{
	box-sizing: border-box !important;
}

.clear{
	clear: both;
}

/* Cor de Baground */

.fundo-primario{
	background-color: #1ba1e2;
}

.fundo-secundario{
	background-color: #d1ecf9;
}

/* Cor de fonte */

.text-cor{
	color: black;
}

/* Configuração de botões */

.btn:hover{
	background-color: #d1ecf9 !important;
	color: #FFF;
}

#btnBusca{
	width:100%;
}

#divBusca > .btn{
	width: 5%;
	border: 2px solid #000;
}



nav .btn, .btn-padrao{
	color:black;
	border-width: 6px !important;
	border-color: #274A5C;
	border-style: double;
}

nav .btn:hover, .btn-padrao:hover{
	border: 6px solid #274A5C;
	color: #1ba1e2;
}

/* Divs */

#listaLivros img{
	width: 100%;
}

#divBusca{
	margin: auto;
	text-align: center;
}

.div-login{
	text-align: right !important;
	width: 49%;
	display: inline-block;
	position: relative;
	height: auto;
}

.corpo{
	width: 100%;
	height: 80%;
}

/* Menu Login */

#login ul, #login{
	list-style: none;
	text-decoration: none;
}

#login a{
	color: #000;
	text-decoration: none;
}

#img-login{
	width:20% !important;

}

#login{
	width: 25%;
	position: relative;
	float: right;
	z-index: 1;
}

#login:hover ul{
	display: block;	
}

#login ul{
	position: absolute;
	display: none;
	border: 6px solid #274A5C;
	border-radius: 10px;
	top: 80%;
	right: 0;
}

#login ul li{
	border-bottom: 1px solid #274A5C;
}
/*
.div-login{
	float: right;
}
*/
/*
#login a ul li{
	text-decoration: none;
	list-style: none;
}

#login{
	position: relative;
}

#login > ul{
	position: absolute;
	display: none;
	border: 6px solid #274A5C;
	border-radius: 10px;
	top: 80%;
	right: 0;
}

#login:hover ul{
	display: block;	
}

#login ul li{
	border-bottom: 1px solid #274A5C;
}
*/

/* Campo de digitação */

#txtBusca{
	width: 40% !important;
	text-align:left;
	padding:1%;
	margin-top: 2%;
	margin-bottom: 2%;
	color:#000;
	border: 2px solid #000;
	background-color: #d1ecf9;
	border-radius: 10px;
}

/* Menus */

.home{
	font-family: 'lapis';
	border-style: dashed;
	border-width: 5px;
	border-color: #274A5C;
	width: auto;
	display: inline-block;
	padding: 1%;
	margin-left: 1%;
	margin-top: 1%;
	margin-right: 1%;
}

.menu{
	display:inline-block;
}

.filtro-esquerdo{
	width: 20%;
	display: inline-block !important;
	background-color:#d1ecf9 !important;
	border: 3px solid black;
	margin-left: 0.2%;
}

nav{
	border-bottom: 4px solid black;; 
}

.filtro-direito{
	width: 20%;
	background-color:#d1ecf9 !important;
	border: 3px solid black;

}

.filtro-direito, .filtro-esquerdo, .conteudo{
	margin-right: 0.5%;
	height: 100%;
	overflow: auto !important;

}

.badge{
	white-space: normal !important;
	margin-bottom: 5%;
}

.pesquisar{
	border-radius: 10%;
}

/* Checkbox personalizada */

.container-filtro{
	display: block;
	position: relative;
	cursor: pointer;
	padding-left: 35px;
	margin-bottom: 12px;
}

.container-filtro input{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.filtro{
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: lightseagreen;
	border: 2px solid #000;
	border-radius: 2px;
}

/* Details */

details{
	background-color: white;
}

.container-filtro:hover input ~ .filtro{
	background-color: #0557d1;
}

.container-filtro input:checked ~ .filtro{
	background-color: #0557d1 !important;
}

.container-filtro .filtro:after{
	content: "";
	position: absolute;
	display: none;
	left: 9px;
	top: 5px;
	width: 8px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.container-filtro input:checked ~ .filtro::after{
	display: block;
}

details summary{
	list-style: none;
	
}

summary::before{
	content: "\27A1 \FE0F";
}

details[open] summary::before{
	content: "\2B07 \FE0F";
}

details{

	border: solid 1px var(--gray-lighter);
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
	transition: background-color 0.25s;
	will-change: background-color;

}

details:first-child{
	margin-top: var(--space);
}

details:not(:last-child) {
    margin-bottom: var(--space-sm);
}

details:hover {
    background-color: var(--gray-lighter);
}

/* Conteudo */

.conteudo{
	width: 58%;
	/*margin: 0% 1% 0% 1%;*/
	background-color:#d1ecf9 !important;
	border: 3px solid black;
}

.card > a{
	text-decoration:none;
	color:#000;
}

.card > a:hover{
	border: 5px solid #1ba1e2;
}


/* CSS Tela Login */

.login{
	max-width: 40%;
}

.login > form{
	background-color: #32a8e2;
	border-radius: 4%;
}

.login > form > button{
		width: 100%;
		background-color: #d1ecf9;
}

.login > form > button:hover{
	width: 100%;
	background-color: #d1ecf9;
	font-weight: bold;
	color: #000;
}

.acesso{
	list-style-type: none;
	background-color: #edf2f7 !important;
	border-radius: 5px;
	width: 100%;
}

.acesso > div > input:checked + label{
	color: #0557d1;
	font-weight: bold;
}

/* CSS do Cadastro */

.cadastro{
	margin: 2% 25% 0 25%;
	background-color: #bcdaf9 !important;
	padding: 2%;
	border-radius: 10px;
}

/* Fonte personalizadas */

@font-face {
	font-family: 'lapis';
	src: url(../Framework/fontes/Pencilized\ Demo.ttf);
}