body {
    background-image: url('https://documentos.anpeextremadura.es/web/librerias/images/fondopizarra.jpg') !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
	background-size: cover !important;
	margin:0;
}

/*============================================
    ESTILOS LIBRETA
==============================================*/

div.libreta{
    padding: 1%;
    border: 1px solid black;
    background: #FFFFFF url('https://documentos.anpeextremadura.es/web/librerias/images/binder.png') repeat-y 2% bottom;
    background-size: 2vw;
	-webkit-border-radius: 0 10px 10px 0;
	-moz-border-radius: 0 10px 10px 0;
	border-radius: 0 10px 10px 0;
	height: 98vh;
}

div.notas_index{
	font-size: x-small !important;
	max-height: 100%;
	overflow: hidden;
	float: left;
}

div.notas_cuerpo{
	text-align:justify;
	font-size:small;
	overflow: auto;
	margin-right: 10px;
	max-height: 100%;
	width: 95%;
	float: right;
	/*padding: 0 70px;*/
}
    

table.dataTable thead tr{
	background-color: cadetblue;
}

table.dataTable tfoot tr {
	background-color: cadetblue;
}

table.dataTable thead tr th {
	border:1px solid;
}

/*====================================================
    ESTILOS PARA FORMULARIOS CON CONTROL DE ERRORES
======================================================*/ 
	.check-form .content{
		padding: 15px;
	}
	.check-form input:focus:invalid, .check-form textarea:focus:invalid { /* when a field is considered invalid by the browser */
		-webkit-box-shadow: 0 0 6px red;
		-moz-box-shadow: 0 0 6px red;
				box-shadow: 0 0 6px red;
	}

	.check-form input:focus:valid, .check-form textarea:focus:valid { /* when a field is considered invalid by the browser */
		-webkit-box-shadow: 0 0 6px green;
		-moz-box-shadow: 0 0 6px green;
				box-shadow: 0 0 6px green;
		
	}

	.check-form input, 
	.check-form textarea {
		padding-right: 0px;
	}

	.check-form input:required:valid, 
	.check-form textarea:required:valid { /* entrada formulario válida */
		border-right-color: #28921f;
		border-right-width: 3px;
		background: #fff url('https://documentos.anpeextremadura.es/web/librerias/images/ok.png') no-repeat 98% center;
		background-size: 20px;
	}

	.check-form select:required:valid { /* entrada formulario válida */
		border-right-color: #28921f;
		border-right-width: 3px;
	}

	.check-form input:invalid,
	.check-form textarea:invalid { /* entrada formulario obligatoria no válida */
		border-right-color: red;
		border-right-width: 3px;
		background: #fff url('https://documentos.anpeextremadura.es/web/librerias/images/fallo.png') no-repeat 98% center;
		background-size: 15px;
	}

	.check-form select:invalid { /* entrada formulario obligatoria no válida */
		border-right-color: red;
		border-right-width: 3px;
		/* background: #fff url(images/fallo.png) no-repeat 95% center; */
		/* background-size: 15px; */
		/* padding-right: 10%; */
	}



	.cabecera {
		z-index:2;
		position: fixed;
		width: 100%;
		top:0;
		-webkit-box-shadow: 0px 8px 6px -6px black;
		-moz-box-shadow: 0px 8px 6px -6px black;
				box-shadow: 0px 8px 6px -6px black;
	}




/*==================================================
	 ESTILOS DIV CON ELEMENTOS FLOTANTES
====================================================*/

	div.bflex {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	div.bflex div.iflex {
		/*flex:content;*/
		flex:auto;
		margin:5px 10px;
	}

	div.iflex label{
        	display: contents;
    }


/*======================================================
	 ESTILOS DIV PANEL PARA FILTROS ELEMENTOS FLOTANTES
=========================================================*/
	div.filtro {
		background-color: beige; 
		-webkit-box-shadow: rgba(0, 0, 0, 0.4) 2px 3px 3px; 
		-moz-box-shadow: rgba(0, 0, 0, 0.4) 2px 3px 3px; 
				box-shadow: rgba(0, 0, 0, 0.4) 2px 3px 3px; 
		border-radius: 5px; 
		margin-bottom: 5px;
		margin-top:5px;
		box-sizing:border-box;
		padding:5px;
		display:none;
	}

	div.filtro div.bflex {
		border:2px solid rgba(0,0,0,0.2);
		padding:10px;
		margin:0;
	}

/*====================================================
	 ESTILOS CHECKBOX INTERRUPTOR DESLIZANTE
	<label class="content-input">
		<input type="checkbox" checked>
			Texto.....<i></i>
	</label>
======================================================*/
	.content-input{
		/*margin-bottom: 15px;*/
		cursor: pointer;
		position: relative;
		/*margin-bottom: 30px;*/
		/*padding:5px 0 5px 60px;*/
		/*display: block;*/
	}


	.content-input input,
	.content-select select{
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}


	.content-input i,
	.content-input i:before{
		-webkit-transition: all 0.25s ease;
		   -moz-transition: all 0.25s ease;
				transition: all 0.25s ease;
	}

	/* 
	Ocultamos nuestros inputs.
	Con opacity 0. Si utilizamos visibility:hidden o display:none;
	no funcionarían
	*/
	.content-input input{
		visibility: hidden;
		position: absolute;
		right: 0;
	}

	/*
	Propiedades para cualquier el elmento i después de un input
	dentro de la capa .content-input
	*/
	.content-input input + i{
		background: red;
		/*border:2px solid rgba(0,0,0,0.2);*/
		-webkit-box-shadow: rgba(0, 0, 0, 0.3) 2px 1px 1px inset, rgba(255, 255, 255, 0.2) -3px -3px 3px inset;
		   -moz-box-shadow: rgba(0, 0, 0, 0.3) 2px 1px 1px inset, rgba(255, 255, 255, 0.2) -3px -3px 3px inset;
				box-shadow: rgba(0, 0, 0, 0.3) 2px 1px 1px inset, rgba(255, 255, 255, 0.2) -3px -3px 3px inset;
		position: absolute;
		left: 0;
		top: 0;
	}

	/*
	Propiedades para el checkbox
	*/
	.content-input input[type=checkbox ] + i{
		width: 46px;
		height: 24px;
		-webkit-border-radius: 15px;
		   -moz-border-radius: 15px;
				border-radius: 15px;
	}

	/*
	Creamos el círculo que aparece encima de los checkbox
	con la etqieta before. Importante aunque no haya contenido
	debemos poner definir este valor.
	*/
	.content-input input[type=checkbox] + i:before{
		content: ''; /* No hay contenido */
		width: 20px;
		height: 20px;
		background: #fff;
		-webkit-border-radius: 50%;
		   -moz-border-radius: 50%;
				border-radius: 50%;
		position: absolute;
		z-index: 1;
		left: 2px;
		top: 2px;
		/*-webkit-box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);
		   -moz-box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);
				box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);*/
		-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
			-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
				box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	}


	.content-input input[type=checkbox] + i:after{
		content: 'NO';
		position: absolute;
		font-size: 12px;
		color: black;
		top: 4px;
		left: 24px;
		opacity: 1;
		/*transition: all 0.25s ease 0.25s;*/
	}


	/*
	Creamos el cículo que se mostrará cuando hagamos click 
	en cualquier radio y lo ocultamos con opacity 0
	*/

	.content-input:hover input[type=checkbox]:not(:checked) + i{
		/*background: #B1E8CD;*/
	}

	/*
	Con :checked definimos los valores css cuando un input
	como radio o checkbox está checheado
	*/
	.content-input input[type=checkbox]:checked + i{
		background: #2AC176;
	}

	.content-input input[type=checkbox]:checked + i:before{
		left: 22px;
		-webkit-box-shadow: -3px 0 3px 0 rgba(0,0,0,0.2);
		   -moz-box-shadow: -3px 0 3px 0 rgba(0,0,0,0.2);
				box-shadow: 3px 0 -3px 0 rgba(0,0,0,0.2);
	}


	.content-input input[type=checkbox]:checked + i:after{
		/*opacity: 1;*/
		content: 'SI';
		color:white;
		left: 5px;
		top:4px;
		font-size: 13px;
	}


/*================================
   ESTILO BOTON INPUT RECIBOS
=================================*/
span.input-group-addon.recibo {
	width:auto !important;
}



/*=========================================
    ESTILOS BOTONES EN DATATABLES
===========================================*/

	/*========= columna de enlaces ============*/
	table.dataTable td.link {
		color:blue;
		cursor:pointer;
	}

	/*========= checkbox en celda datatablas ============*/
	input.subcheck[type="checkbox"]{
		width: 20px;
		height: 20px;
		margin: 6px 0;
	}

	input.supercheck[type="checkbox"]{
		width: 20px;
		height: 20px;
		margin: 6px 0;
	}