* {
	font-family: 'Raleway', sans-serif;
	color: #333;
}

body {
	background:	url("../img/backgrounds_2.jpg");
	background-attachment: fixed;
	}

html, body {
	margin: 0 auto;
	height: 1200px;
}

a:link {
	text-decoration: none;
}

.paginacion {
	margin:20px;

}
.paginacion i{
	color: white;
}
 
.paginacion ul {
	list-style:none;
	text-align: center;
}
 
.paginacion ul li {
	display:inline-block;
	margin-right:10px;
}
 
.paginacion ul li a {
	display:block;
	padding:10px 20px;
	color:#fff;
	background:#024959;
	text-decoration: none;
}
 
.paginacion ul li a:hover {
	background:#037E8C;
}
 
.paginacion ul li .active {
	background:#037E8C;
	font-weight:bold;
}
/*********************
ICONS
*********************/

.logo {
	width: 80px;
	margin: 10px 10px 10px 20px;
	vertical-align: middle;
}
/********************
BUTTONS
********************/

button, input[type="submit"] {
	border: none;
}

.btn {
	cursor: pointer;
	padding: 10px;
	display: inline-block;
	border-radius: 2px;
	margin: 10px 0 10px 0;
	font-size: 1.1em;
	font-weight: bold;
	color: white;
	min-width: 96px;
		background-color: #00BCD4;
	border-bottom: 3px solid rgb(123, 212, 244);
}
.btns {
	cursor: pointer;
	display: inline-block;
	border-radius: 2px;
	margin: 10px 0 10px 0;
	font-size: 1.1em;
	font-weight: bold;
	color: white;
	min-width: 66px;
		background-color: #00BCD4;
	border-bottom: 3px solid rgb(123, 212, 244);
}
.btn a,
.btn span,
.btn input, {
	font-weight: bold;
	cursor: inherit;
	color: white;
}


.btn:hover {
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}


	/* 
	-webkit-box-shadow: 2px 0px 43px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 0px 43px -3px rgba(0,0,0,0.75);
box-shadow: 2px 0px 43px -3px rgba(0,0,0,0.75);
	*/
}



.btn a {
	font-size: 1.1em;
	color: white;
	font-color:white;
}

.btn i {
	margin-right: 5px;
	vertical-align: middle;
	color: white;
}

.btn-danger {
	background-color: firebrick;
	border-bottom: 3px solid rgb(239, 129, 129)
}
.btn-danger a {
	color:red;
}
.btn-primary {
	background-color: #00BCD4;
	border-bottom: 3px solid rgb(123, 212, 244);
}

.btn-disabled {
	cursor: disabled;
}

/**********************
NAVIGATION
**********************/

#nav .collapsible-nav {
	background-color: #388E3C;
	width:100%;
	position: absolute;
	display: none;
	top: 86px;
	padding: 25px;
	width: 25%;
	right: 355px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#nav #collapse:hover > .collapsible-nav  {
	display: block;
}

.collapsible-nav li a {
	display: block;
	padding: 10px;
}

.nav {
	height: 80px;
	background-color: #388E3C;
	border-bottom: 8px solid #4CAF50;

}
.nav a {
	font-size: 1.2em;
	color: white;
}

.nav a:hover {
	color: #C8E6C9;
}

.nav ul {
	display: inline;
}

li {
	list-style: none;
}



.acciones li{
	display: inline;
}

.nav-right {
	margin: 44px 20px 0 0;
	float: right;
}
.nav-mid {
	text-align: center;
}
.nav-left {
	margin: 0 0 30px 20px;
}
.circulo {
	text-align: center;
     width: 50px;
     height: 100px;
     -moz-border-radius: 15%;
     -webkit-border-radius: 15%;
     border-radius: 15%;
     background: #536DFE;
     border-width:5px;
     border-color: #B6B6B6;
}
/*************************
MAPS
*************************/

#markerMap {
	height: 250px;
}

#pathsMap {
	margin: 5px;
	height: 800px;
}

.leaflet-control-container .leaflet-routing-container-hide {
	display: none;
}

/*************************
COMPONENTES: MODAL
*************************/
.modal1 {
  background: #00BCD4;
  display: inline;
}

.modal1 > label {
	background: #00BCD4;
	cursor: pointer;
	display: inline;
	font-size: 1.2em;
	color: white;
}

.modal {
  background: #fff;
  display: inline;
}
.modal__delete {
  background: #fff;
  display: inline;
}

.modal > label {
	background: #388E3C;
	cursor: pointer;
	display: inline;
	color: white;
	font-size: 1.2em;
}
.modal__delete > label {
	cursor: pointer;
	display: inline;
	color: white;
	font-size: 1.2em;
}
.modal.delete > label {
	background: white;
	cursor: pointer;
	display: inline;
	color: white;
	font-size: 1.2em;
}
.modal > label:hover {
	color: #00BCD4;
}

.modal__overlay {
  background: rgba(0, 0, 0, 0.9);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
  text-shadow: none;
  top: 0;
  z-index: 600;
}

.modal__wrap {
  padding: 1em 0;
  position: relative;
  margin: 0 auto;
  max-width: 500px;
  width: 90%;
}

.modal__map__wrap {
	padding: 1em 0;
	position: relative;
	margin: 0 auto;
	width: 90%;
}

#close-modal {

}

@media (min-width: 50em) {
  .modal__wrap {
    padding: 1.75em;
  }
}

@media (min-height: 37.5em) {
  .modal__wrap {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -80%);
  }
}

.toggle-modal {
  background: firebrick;
  border-radius: 50%;
  color: #FFF;
  cursor: pointer;
  display: inline-block;
  height: 1.5em;
  line-height: 1.5;
  position: relative;
  right: 3.5em;
  top: 1em;
  width: 1.5em;
}

#modal__trigger {
	display: none;
}

.modal input:focus ~ label {
  transform: scale(0.97);
}

.modal__overlay {
  opacity: 0;
  z-index: -100;
  transform: scale(0.5);
  transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input:checked ~ .modal__overlay {
  opacity: 1;
  transform: scale(1);
  z-index: 800;
}

.modalTarea {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content */
.modalTarea-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 45%;
}
.modalTarea-content input{
	align:left;
	margin:0;
    vertical-align: bottom;
    position: relative;
        padding: 0;
}
/* The Close Button */
.closeModalTarea {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.closeModalTarea:hover,
.closeModalTarea:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
/*************************
COMPONENTES: CONTAINER
*************************/

.container {
	margin: 2.5% auto;
	padding: 1%;
	width: 80%;
	min-height: 30%;
	border-radius: 5px;
}

.card {
	padding: 20px 15px 20px 15px;
	background-color: white;
	border-bottom: 4px solid #B6B6B6;
	border-radius: 2px;
}


.main-header {
	margin: 0 auto;
	margin-bottom: 5%;
	padding: 5%;
	width: 50%;
	font-weight: bold;
	text-align: center;
	border-bottom: 4px solid #B6B6B6;
	color: #444;
	background-color: white;
	border-radius: 5px;
}
.conf 


.main-header .title {
	display: inline;
}


.main-header span {
	vertical-align: super;
}

.main-header .main-description {
	margin-bottom: 0;
	font-weight: normal;
	padding: 20px;
}

.icon {
	margin-right: 10px;
}

.right {
	float: right;
}

.title {
	padding-bottom: 10px;
}

/****************************
TABLE
****************************/

table {
	width: 100%;
	font-weight: normal;
	text-align: center;
	border-collapse: collapse;
	padding-top: 20px;
	background-color: white;
	border-radius: 5px;
}
.table-data-row tr{	font-weight: bold;
	border-bottom: 2px solid #B6B6B6;}



tr {
	border-bottom: 2px solid #B6B6B6;
}

td {
	height: 40px;
	vertical-align: middle;
}

th {
	height: 40px;
}

.even {
	background-color: #B6B6B6;
}

/**************************
GRID
**************************/

.col {
	text-align: center;
	display: inline-block;
	float: left;
	margin: 0.5%;s
}

.col-2 {
	width: 15%;
}

.col-3 {
    width: 32.333%;
}

.col-4 {
	width: 40%;
}

.col-4-center {
	width: 40%;
	margin-left:30%;
	margin-right:30%;
}

.col-6 {
	min-width: 45%;
	max-width: 45%;
	display: inline-block;
}
.col-6-center {
	min-width: 45%;
	max-width: 45%;
		margin-left:30%;
	margin-right:30%;
	display: inline-block;
}

.col-8 {
	width: 52.333%;
}

.col-12 {
	min-width: 90%;
	max-width: 95%;
}



/**************************
LISTADOS
**************************/

.listado {
	padding-top: 20px;
	background-color: white;
	border-radius: 5px;
	border-bottom: 4px solid #B6B6B6;
}

.formulario {
	text-align: left;
}

.nav-listado {
	display: none;
	padding-top: 20px;
	margin: 20px auto;
	border-top: 2px solid #B6B6B6;
	font-size: 1.2em;
}

.nav-listado ul {
	padding: 0;
	display: inline;
}

.nav-listado ul li {
	margin: 5px;
}

.nav-listado ul li a:hover {
	color: #00BCD4;
}

.listado-header {
	padding: 10px;
	width: 90%;
	text-align: left;
	display: inline-block;
}

.listado a {
	color: #00BCD4;
}
.listado span a {
	color: white;
}

.listado-header .btn {
	vertical-align: middle;
}

.listado-title {
	display: inline;
	line-height: 2.3;
}


/*************************
FORMS
*************************/

.input-group {
	display: block;
}

.input-group label {
	display: inherit;
	margin-bottom: 10px;
}

.input-group input {
	display: inline;
	margin-bottom: 15px;
}

.input-inline {
	display: inline;
	margin: 5px;
}

.input-inline input {
	margin: 0 5px 0 5px;
}

input[type="text"],
input[type="number"],
input[type="text"]{
	width: 25%;
}

input[type="submit"] {
	padding: 0;
	background-color: inherit;
	color: inherit;
	font-size: inherit;
}

input[type]:focus {
	border: 1px solid #00BCD4;
}

.form-centered {
	margin-left: 27%;
}


.parrafo p{
	text-align: left;
	margin-left: 30%;
	margin-right: 30%;
	border:grey 1px solid;
}

/************************
ALUMNO
************************/

.student-data {
	text-align: left;
	margin-top: 5%;
}

.field {
	font-weight: bold;
	margin-right: 10px;
}

/***********************
DEBUG
***********************/

.debug {
	background-color: grey;
	min-height: 40px;
}

/***********************
FLASH
***********************/

.flash {
	padding:	.3em .4em;
	margin: 0 auto .5em;
	min-height: 50px;
	text-align: center;
	width: 100%;
	border-bottom: 3px solid;
}

.flash.success {
	background-color: #159906;
	border-bottom-color: #158109; 
}

.flash.error {
	background-color: #D32F2F;
	border-bottom-color: #961F1F;
}

.flash > p {
	color: white;
}

.flash .close {
    float:	right;
}

.flash .close a {
    color:				#f00;
    text-decoration:	none;
}

/************************
BOOTSTRAP OVERRIDES
************************/

.dropdown-menu {
	background-color: #ddd;
	display: none;
	padding: 0;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.dropdown-menu .suggestion {
	padding: 10px;
	cursor: pointer;
}

.dropdown-menu .suggestion:hover {
	background-color: #eee;
}

.suggestion-selected {
	background-color: #eee;
}

/************************
LOCATION
************************/

.location-params {
	display: none;
}

/************************
COLORES
************************/

/*
*
* negro-fuentes = #333;
* borde-container = #B6B6B6;
*
*
*/
/*agregado por sesg */

.style-3{
float: left;
border: solid;
border-radius: 0px;
border-width: 3px;
margin: 5%;
 }
.style-4 {
	background-color: white;
	border: solid;
	border-radius: 15px;
	border-width: 3px;
    margin-left: 20%;
    margin-right: 30%;
    margin-top: 10px;
	border: solid;
    opacity: 1;
    padding: 20px; 
    width: 50%;
	float: 0;
	padding: 0px 10px 0 10px;
	}
.style-4 ul{
	margin-top: 5px;

}
.style-4 ul li{
list-style: none;
}
.style-4 h1{
	text-align: center;
}
.insert input{
		float: left;
	    display: block;
    	margin: 0 auto -40px;	
}
.insert ul li{
	list-style: none;
}

.style-5 {
	background-color: white;
   border-radius: 15px;
    border-color: #00B0F6;
    border: solid;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 10px;
    opacity: 1;
    padding: 20px; 
    width: 40%;
	float: 0;
	padding: 0px 10px 0 10px;
	}

 .style-5 input[type="text"] {
  padding: 6px;
  border: solid 1px #fff;
  border-radius:5px;
  opacity: 0.8;
  box-shadow: inset 1px 1px 2px 0 #00B0F6;
  transition: box-shadow 0.3s;
  margin: 3px;
}
.style-5 input[type="text"]:focus,
.style-5 input[type="text"].focus {
  box-shadow: inset 1px 1px 5px 0 #00B0F6;
}
.style-5 ul li{
	list-style: none;
}
.style-5 button{
		background-color: #00BCD4;
	border-bottom: 3px solid rgb(123, 212, 244);
	border-radius: 2px;
	margin-left: 40%;
	margin-right: 40%;
	width: 20%;
	height: 40px;
	font-size: 1.1em;
	color: white;

}
.style-5 ul{display: inline;}
@media only screen and (max-width: 600px) {
    .style-5 {
    margin-right: 5%;
    border-radius: 15px;
    border-color: #00B0F6;
    border: solid;
    float: right;
    opacity: 0.7;
    width: 80%;
    }
.style-5 input[type="text"]:focus,
.style-5 input[type="text"].focus {
  box-shadow: inset 1px 1px 5px 0 #00B0F6;
  width: 50%;
}
/************************
Configuracion
************************/
textarea :disabled{

	background-color: white;
	border-width: 0px;
}




}


/*fin agregado por sesg*/
/* navbar prueba inicio*/
.dropbtn {
    background-color: #388E3C;
    color: white;
    padding: 6px;
	font-size: 1.0em;
	color: white;
    border-bottom: 8px solid #4CAF50; 
    cursor: pointer;
}

.dropdown {

    position: relative;
    display: inline-block;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    border-width: 3px;
    text-decoration: none;
    display: block;
}
.dropdown-content-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content-content a {
    color: black;
    padding: 12px 16px;
    border-width: 3px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1;
display: block;}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #4CAF50;
}


/* navbar prueba fin*/
input[id^="spoiler"]{
 display: none;
}
input[id^="spoiler"] + label {
  display: block;
  background: #fff;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all .6s;
}
input[id^="spoiler"]:checked + label {
  color: #333;
  background: #ccc;
}
input[id^="spoiler"] ~ .spoiler {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 10px auto 0; 
  padding: 10px; 
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: all 1.6s;
}
input[id^="spoiler"]:checked + label + .spoiler{
  height: auto;
  opacity: 1;
  padding: 10px;
}

/*---edicion de horas---*/
input[id^="spoilerHoras"]{
 display: none;
}
input[id^="spoilerHoras"] + label {
  display: block;
  background: #fff;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all .6s;
}
input[id^="spoilerHoras"]:checked + label {
  color: #333;
  background: #ccc;
}
input[id^="spoilerHoras"] ~ .spoilerHoras {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 10px auto 0; 
  padding: 10px; 
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: all 1.6s;
}
input[id^="spoilerHoras"]:checked + label + .spoilerHoras{
  height: auto;
  opacity: 1;
  padding: 10px;
}