/***************************************************
 * ESTILOS PARA DATATABLE
 ***************************************************/
	
	table.dataTable td.details-control {
        background: url('https://cursosanpeextremadura.es/traslados/images/details_open.png') no-repeat center center;
        cursor: pointer;
    }
    
    table.dataTable tr.shown td.details-control {
        background: url('https://cursosanpeextremadura.es/traslados/images/details_close.png') no-repeat center center;
    }


	.table-striped > tbody > tr:nth-of-type(2n+1) {
	  background-color: #e7e4e4;
	}

	:root {
	  --theadColor: #6c7ae0;
	}

	thead {
		background-color: var(--theadColor);

	}

	thead > tr,
	thead > tr > th {
		background-color: transparent;
		color: #fff;
		font-weight: normal;
		text-align: start;
	}


	.dataTables_wrapper > div {
		margin: 5px;
	}


	table.dataTable thead th {
		position: relative;
		/*background-image: none !important;*/
		text-align: center;
	}

	table.dataTable thead th.sorting:after,
	table.dataTable thead th.sorting_asc:after,
	table.dataTable thead th.sorting_desc:after {
		position: absolute;
		top: 12px;
		right: 8px;
		display: block;
		font-family: "Font Awesome\ 5 Free";
	}
	table.dataTable thead th.sorting:after {
		content: "\f0dc";
		color: #ddd;
		font-size: 0.8em;
		padding-top: 0.12em;
	}
	table.dataTable thead th.sorting_asc:after {
		content: "\f0de";
	}
	table.dataTable thead th.sorting_desc:after {
		content: "\f0dd";
	}

	table.dataTable.display tbody tr:hover > .sorting_1,
	table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
		background-color: #f2f2f2 !important;
		color: #000;
	}

	tbody tr:hover {
		background-color: #f2f2f2 !important;
		color: #000;
	}

	table.dataTable tbody tr {
		font-size: smaller;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
	.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {

	     border-radius: 50px;

	}

	.paginate_button.current:hover 	{
	        background: none !important;
	             border-radius: 50px;
	             background-color: var(--theadColor) !important;
	         color:#fff !important
	}



	.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
	.dataTables_wrapper .dataTables_paginate .paginate_button:hover {

		border-radius: 50px !important;

	}



a.leaflet-control-zoom-in,a.leaflet-control-zoom-out{
width: 44px !important;
height: 44px !important;
padding: 5px !important;
font-size: xx-large !important;
text-shadow: 0px 3px 3px rgba(255,255,255,0.4),0px -1px 1px rgba(0,0,0,0.3);
color: darkred;
background: mediumaquamarine;
}	


.collapse.in{
    display: block;
}

#accordion .panel{
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin:0;
    overflow: hidden;
    position: relative;
    background: transparent;
}
#accordion .panel-heading{
    padding: 0;
    border: none;
    border-radius: 0;
    margin-bottom: 0px;
    z-index: 1;
    position: relative;
}
#accordion .panel-heading:before,
#accordion .panel-heading:after{
    content: "";
    width: 50%;
    height: 20%;
    box-shadow: 0 15px 5px rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 15px;
    left: 10px;
    transform: rotate(-3deg);
    z-index: -1;
}
#accordion .panel-heading:after{
    left: auto;
    right: 10px;
    transform: rotate(3deg);
}
h4.panel-title{margin:1px 0px !important;}
#accordion .panel-title a{
    display: block;
    padding: 7px 70px 7px 70px;
    margin: 0;
    background: mediumaquamarine;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    color: darkred;
    border-radius: 0;
    text-shadow: 0px 3px 3px rgba(255,255,255,0.4),0px -1px 1px rgba(0,0,0,0.3);
    position: relative;
}
#accordion .panel-title a:before,
#accordion .panel-title a.collapsed:before{
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    width: 55px;
    height: 100%;
    text-align: center;
    line-height: 35px;
    border-left: 2px solid #D11149;
    position: absolute;
    top: 0;
    right: 0;
}
#accordion .panel-title a.collapsed:before{ content: "\f107"; }
#accordion .panel-title a .icon{
    display: inline-block;
    width: 55px;
    height: 100%;
    border-right: 2px solid #d11149;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}
#accordion .panel-body{
    padding: 10px 15px;
    margin: 0 0 20px;
    /*border-bottom: 3px solid #d11149;*/
    border-top: none;
    background: whitesmoke;
    font-size: 14px;
    color: #333;
    line-height: 27px;
    margin-bottom: 0;
}

.accordion-base{
    padding: 10px;
    background: white;
	background-size: contain;
    /*height: 500px;*/
    margin:5px;
    
    position:absolute;
    z-index:1001;
    
    width:350px;
    right:0px;
    box-shadow: 1px 5px 8px 3px;
    border-radius:13px;
}



.Mycluster div {
  width: 30px;
  height: 30px;
  margin-left: -2px;
  margin-top: 5px;
  text-align: center;
  border-radius: 15px;
  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.Mycluster span {
  line-height: 15px;
  color:black;
}

.Mycluster {
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: center;
	background-color: transparent;
	height: auto !important;	
}

.Mycluster.houserojo{
	background-image: url("https://cursosanpeextremadura.es/traslados/librerias/mapa/marcas/caja_clips/house_srojo.png");
}

.Mycluster.housenaranja{
	background-image: url("https://cursosanpeextremadura.es/traslados/librerias/mapa/marcas/caja_clips/house_snaranja.png");
}

.Mycluster.houseverde{
	background-image: url("https://cursosanpeextremadura.es/traslados/librerias/mapa/marcas/caja_clips/house_sverde.png");
}


.Mycluster.houselila{
	background-image: url("https://cursosanpeextremadura.es/traslados/librerias/mapa/marcas/caja_clips/house_slila.png");
}

.Mycluster.globorojo{
	background-image: url("https://cursosanpeextremadura.es/traslados/librerias/mapa/marcas/caja_clips/grupo-red.png");
}


.Mycluster.globoverde{
	background-image: url("https://cursosanpeextremadura.es/traslados/librerias/mapa/marcas/caja_clips/grupo-green.png");
}


.Mycluster.globoazul{
	background-image: url("https://cursosanpeextremadura.es/traslados/librerias/mapa/marcas/caja_clips/grupo-blue.png");
}

.Mycluster.globooro{
	background-image: url("https://cursosanpeextremadura.es/traslados/librerias/mapa/marcas/caja_clips/grupo-gold.png");
}

.Mycluster.globonaranja{
	background-image: url("https://cursosanpeextremadura.es/traslados/librerias/mapa/marcas/caja_clips/grupo-orange.png");
}



	li.clip{
		cursor:pointer;
	}
	li.clip.activ img{
		visibility:visible;
	}
	li.clip.sleep img{
		visibility:hidden;
	}
	/* Clases para los contenedores de Radio y Checkbox*/
	.content-input{
		margin-bottom: 15px;
		cursor: pointer;
	}

	.content-input{
		position: relative;
		margin-bottom: 30px;
		padding:5px 0 5px 60px;
		display: block;
	}


	.content-input.small{
		margin-bottom: 6px;
		padding:2px 0 5px 36px;
		margin-left: 2px;
	}

	/* 
	La propiedadd appearance da un aspecto standard a un elemento.
	Por ejemplo: appearance: button
	Como vamos a personalizar nuestros elemento añadimos el valor none
	 */
	.content-input input,
	.content-select select{
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}


	.content-input i,
	.content-input i:before{
		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: #f0f0f0;
		border:2px solid rgba(0,0,0,0.2);
		position: absolute;
		left: 0;
		top: 0;
	}

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

	.content-input.small input[type=checkbox ] + i{
		width: 34px;
		height: 21px;
		border-radius: 10px;
	}

	/*
	Propiedades para radio
	*/
	.content-input input[type=radio] + i{
		height: 20px;
		width: 20px;
		border-radius: 100%;
		left: 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;
		border-radius: 50%;
		position: absolute;
		z-index: 1;
		left: 0px;
		top: 1px;
		-webkit-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.small input[type=checkbox] + i:before{	
		width: 16px;
		height: 16px;
	}

	.content-input input[type=checkbox] + i:after{
		content: 'SI';
		position: absolute;
		font-size: 12px;
		color: rgba(255,255,255,0.6);
		top: 3px;
		left: 4px;
		opacity: 0;
		transition: all 0.25s ease 0.25s;
	}

	.content-input.small input[type=checkbox] + i:after{
		top: -4px;
		left: 2px;
	}

	/*
	Creamos el cículo que se mostrará cuando hagamos click 
	en cualquier radio y lo ocultamos con opacity 0
	*/
	.content-input input[type=radio] + i:before{
		content: '';
		display: block;
		height: 18px;
		width: 18px;
		background: red;
		border-radius: 100%;
		position: absolute;
		z-index: 1;
		top: 4px;
		left: 4px;
		background:#2AC176;
		transition: all 0.25s ease;
		transform: scale(0);
		opacity: 0; /* Lo ocultamos*/
	}



	.content-input:hover input[type=radio]:not(:checked) + i,
	.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);
		box-shadow: 3px 0 -3px 0 rgba(0,0,0,0.2);
	}

	.content-input.small input[type=checkbox]:checked + i:before{
		left: 16px;
	}

	.content-input input[type=checkbox]:checked + i:after{
		opacity: 1;
	}

	.content-input input[type=radio]:checked + i:before{
		transform: scale(1);
		opacity: 1;
	}


	.leaflet-control-container .leaflet-control-layers{
		top:60px;
	}

	.leaflet-control-container .leaflet-control-zoom{
		top:60px;
	}


/*======================================
  INPUT MULTICHECK FORMULARIOS
======================================*/

div.multicheck {
	max-width: 100%;
}

div.multicheck div.options {
	display: none;
  max-height: 0;
  transition: max-height 0.75s ease-out; 
  flex-direction: column;  
  overflow: auto; 
  border: 1px solid #ccc;
  font-size: smaller;
}

div.multicheck div.options.visible {
	display:flex;
  max-height: 150px; 
  transition: max-height 0.75s ease-in;
	background-color: white;
	max-width: 98%;
	padding-right: 10px;
	box-shadow: 0 8px 13px -6px black;
	-webkit-box-shadow: 0px 8px 13px -6px black;
	-moz-box-shadow: 0 8px 13px -6px black;
}

div.multicheck span.optgroup{
	position: relative;
	margin-left: 10px;
	font-weight: bold;
	flex-direction: column;
	display: flex;
}

div.multicheck label.opt{
	position:relative;
	margin-left: 10px;
	color:gray !important;
	font-weight: normal !important;
}

div.multicheck label.opt input{
	margin-right: 5px;
}

div.multicheck div.datos{
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 3px;
	min-height: 32px;
	max-height: 100px;
	overflow: scroll;
}

div.multicheck div.datos ul{
	padding: 0;
	margin-left: 5px;
}

div.multicheck div.datos li{
	position: relative;
	margin: 3px 5px 3px 0;
	padding: 5px;
	border: 1px solid #aaa;
	max-width: 100%;
	border-radius: 3px;
	background-color: #eee;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),to(#eee));
	background-image: linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
	background-size: 100% 19px;
	background-repeat: repeat-x;
	background-clip: padding-box;
	color: #333;
	line-height: 13px;
	cursor: default;
	float: left;
	list-style: none;
	max-width: 90px;
	white-space: nowrap;
	overflow-x: scroll;
	padding-bottom: 10px;
}