:root{
	--bg-gray: #222;
	--bg-lightGray: #2b2b2b;
	--lightGray: #bbb;
	--gray: #555;
	--orange: #d29a38;
}
body{
	background: var(--bg-gray);
}
*{
	font-family: 'Convergence';
	color: var(--lightGray);
	background: var(--bg-gray);
}
table{
	border-collapse: collapse;
	margin-top: 5px;
	padding: 0px;
	font-size: 12px;
}
th{
	border: 1px solid var(--gray);
	padding: 4px;
	text-align: center;
}
td{
	border-bottom: 1px solid var(--gray);
	background: inherit;
	text-align: center;
	margin: 0px;
	padding: 4px;
}
tr{
	background: var(--bg-lightGray);
	cursor: pointer;
}

tr:hover{
	background: var(--gray);
}
h1{
	background: inherit;
	margin:0px;
	font-family: 'Tinos';
}
i, b, ul, li, div, label{
	background: inherit;
}
ul{
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

li{
	padding: 5px;
}

.glyphicon-filter{
	background: inherit;
	padding: 0px;
	padding-right: 5px;
}

.glyphicon-search{
	padding: 0px;
}

.nombres{
	text-align: left;
}

.dropdown{
	cursor: pointer;
}

.dropdown:hover {
	background: var(--bg-lightGray);
}

.checkbox-item{
	padding: 4px;
}

.checkbox-item:hover{
	background: var(--bg-lightGray);
}




#title{
	color: var(--lightGray);
	margin-top: 10px;
	margin-left: 7.5%;
	margin-bottom: 10px;
}

#view-container{
	background: var(--bg-gray);
	margin-left: 7%;
	display: flex;
	width: 86%;
}

#buscador{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 5px;
	padding: 5px;
	width: 57%;
}
#search-bar{
	display: flex;
	border: 1px solid var(--gray);
	justify-content: space-between;
	align-items: center;
	padding-left: 5px;
	width: 100%;
}

#search-input{
	border: none;
	width: 85%;
}

#filter-dropdown{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10%;
	height: 100%;
	margin: 0px;
	padding: 3px;
}

#filter-dropdown:hover #filter-dropdown-list{
	display: flex;
	flex-direction: column;
	min-width: max-content;
}

#filter-dropdown-list{
	border: 1px solid var(--gray);
	display: none;
	position: absolute;
	top: 100%;
	background: var(--bg-gray);
}

#nivel-dropdown{
	position: relative;
}

#nivel-dropdown:hover #nivel-dropdown-list{
	display: flex;
	flex-direction: column;
	min-width: max-content;
}

#nivel-dropdown-list {
	border: 1px solid var(--gray);
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	background: var(--bg-gray);
}

#escuela-dropdown{
	position: relative;
}

#escuela-dropdown:hover #escuela-dropdown-list{
	display: flex;
	flex-direction: column;
	min-width: max-content;
}

#escuela-dropdown-list {
	border: 1px solid var(--gray);
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	background: var(--bg-gray);
}

#componentes-dropdown{
	position: relative;
}

#componentes-dropdown:hover #componentes-dropdown-list{
	display: flex;
	flex-direction: column;
	min-width: max-content;
}

#componentes-dropdown-list {
	border: 1px solid var(--gray);
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	background: var(--bg-gray);
}

#clases-dropdown{
	position: relative;
}

#clases-dropdown:hover #clases-dropdown-list{
	display: flex;
	flex-direction: column;
	min-width: max-content;
}

#clases-dropdown-list {
	border: 1px solid var(--gray);
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	background: var(--bg-gray);
}

#spellTable{
	margin: 5px;
	width:100%;
}
#spellCard-container{
	padding-left: 10px;
	width: 40%;
}

#spellCard{
	background: var(--bg-lightGray);
	border-top: 5px solid var(--gray);
	border-bottom: 5px solid var(--gray);
	margin-top: 10px;
	text-align: justify;
	padding: 5px;
	font-size: 14px;
}

#spell-header{
	color: var(--orange);
}

#contenedor-condiciones{
	background: var(--bg-lightGray);
	display: grid;
	grid-template-columns: auto auto;
}

#contenedor-descripcion{
	margin-top: 10px;
	margin-bottom: 10px;
	background: var(--bg-lightGray);
}