:root{
--color-principal: #2ca8ff;
--color-secundario: #2ca8ff;
--color-terciario: #ffb236;
}

/* width */
::-webkit-scrollbar {

    width: 5px;
}

/* button */
::-webkit-scrollbar-button {
    display: none;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #ddd;
}

.navbar-toggler-bar{
	box-shadow: 5px 5px 4px rgba(0,0,0,.8);
}

.tippy-box[data-theme~='tooltip-button-map'] {
  /*background-color: gray;
  color: #fff;*/
  font-size: 1em;

}

@media screen and (max-height: 800px) {
	body{
		font-size: 11px;
	}

	.bootstrap-switch{
		transform: scale(0.8);
	}
	
}

.main-panel{
	height: 100%;
}
	@media (max-width: 500px),(max-height: 500px) {

		.main-panel .navbar{
			padding: 0;		
		}

		
		.main-panel .mapa-leyenda{
			bottom: auto !important;
			top: 1em !important;
			left: auto !important;  
			right: 1em !important;
			min-width: 15em;
			height: 30%;
		}


		.main-panel .mapa-leyenda .card{
			padding: 0.5em !important;
			height: 100%;
		}

		.main-panel .mapa-leyenda .card .card-header{
			height: 15%;
		}

		.main-panel .mapa-leyenda .card .card-header div{
			margin-right: 0.75em;
		}

		.main-panel .mapa-leyenda .card .card-header div i{
			font-size: 10px !important;
		}


		.main-panel .mapa-leyenda .card .card-header h3{
		    margin: 1em 0;
		    font-size: 9px !important;

		}

		.main-panel .mapa-leyenda .card .card-body{
			margin-top: 0 !important;
			height: 70%;
			max-height: 70%;
		}

		.main-panel .mapa-leyenda .ul_principal li.li-capa-leyenda div{
			padding: 0 !important;
			font-size: 9px !important;
		}

		.main-panel .mapa-leyenda .ul_principal li div div{
			padding: 0.25em 0 !important;
			font-size: 9px !important;

		}

		.main-panel .mapa-leyenda .ul_principal li div div i{
			font-size: 24px !important;
		}

		.main-panel .mapa-leyenda .close-button-container{
			display: flex !important;
		}

		.main-panel .mapa-leyenda .card .card-footer{
			height: 15%;
			padding: 0em;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
	}

		@media screen and (max-height: 500px) {

			.main-panel .mapa-leyenda{
				height: 45%;
			}

			.main-panel .mapa-leyenda .card .card-footer{
				padding: 0em;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		
		}



.main-panel .mapa-leyenda .close-button-container{
	/*position: absolute;
	right: 1em;
	top: 1em;*/
	display: flex;
    justify-content: center;
    display: none;
}	

.main-panel .mapa-leyenda .close-button-container .btn{
	padding: 0;
}

.main-panel .navbar .btn-ingresar, .main-panel .navbar .btn-idioma{
	box-shadow: 0 10px 25px 0 rgba(0,0,0,.3);
}	

.main-panel .control-map-container{

    position: absolute;
    width: auto;
    right: 1.5em;
    bottom: 2.5em;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
    display: none;

}

@media (max-width: 500px),(max-height: 500px) {

	.main-panel .control-map-container{
		display: flex;
	}
	
}

@media screen and (max-height: 500px) {

	.main-panel .control-map-container{
		left: 1.5em;
		right: auto;
	}

}

.main-panel .control-map-container .btn{
	box-shadow: 0 10px 25px 0 rgba(0,0,0,.3);

}




#bookmark-section > .nav > li > .nav > li.active > a{
	font-weight: 700;
}

#bookmark-section > .nav > li:hover .nav li.active a{
	
	
	font-weight: 700;
	background: #fff !important;
}

#bookmark-section > .nav > li:hover .nav li.active a i{
	color: var(--color-principal) !important;
}


.dropdown a{
	cursor: pointer;
}

.form-control:focus{
	border-color: var(--color-secundario) !important; 
}

.btn-my-secondary{
	background-color: var(--color-secundario);
}

.btn-my-secondary:hover{
	background-color: var(--color-terciario) !important;

}

.modal{
 	z-index: 9999;
}

.modal-backdrop{
	z-index: 9998;	
	background: rgba(0,0,0,.9);
}

.sidebar{
	z-index: 9997;
}

.sidebar .sidebar-wrapper{
	/*overflow: unset;*/
	overflow-y: auto;
    padding: 0;
}

#mymap{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}

/*-------------------------BOOKMARKS INFO---------------------*/

.section-info-bookmark{
	position: absolute;
    width: 24em !important;
    height: 60%;
    z-index: 1040;
    right: 0;
    display: none;
}

	@media (max-width: 500px),(max-height: 500px) {

		.section-info-bookmark{
			width: 90% !important;
			height: 25%;
			bottom: 1em;
			top: auto;
			right: auto;
			left: 50%;
			transform: translateX(-50%);

		}

		.section-info-bookmark > .col-md-12{
			padding: 0;
		}
		
	}


	@media screen and (max-height: 500px) {

		.section-info-bookmark{
			width: 45% !important;
			height: 45%;
			bottom: 1em;
			top: auto;
			right: 1em;
			left: auto;
			transform: translateX(0);

		}
		
	}

/*FONT STYLE =*/
.section-info-bookmark .box-textarea *
{
	/*font-family: "Trebuchet MS", Helvetica, sans-serif !important;*/
	font-family: Montserrat,Helvetica Neue,Arial,sans-serif;

	-moz-osx-font-smoothing: grayscale !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-font-smoothing: antialiased !important;
	text-rendering: optimizelegibility !important;
	letter-spacing: .03em !important;
}

.section-info-bookmark .card{
	height: 100%;
}

.section-info-bookmark .card .card-body{
	height: 100%;
	max-height: 90%;
	overflow-y: auto;
    padding: 1em 1.1em;
	margin-top: 1em;
}

	@media screen and (max-width: 500px){

		.section-info-bookmark .card .card-body{
			max-height: 84%;
			margin-top: 1em;
			padding: 1em;
		}
		
	}

.section-info-bookmark .card .card-body > h6{
    color: #747474;
    font-weight: 700;
    margin-bottom: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-info-bookmark .card .card-body > h6 i{
	font-weight: 700;

}

.section-info-bookmark .card .card-body p{
	text-align: justify;
	color: #2c2c2c;
	font-family: Montserrat,Helvetica Neue,Arial,sans-serif !important;
	font-size: 11px !important;
}

.section-info-bookmark .card .card-body p font{
	font-size: 11px !important;

}

.section-info-bookmark .card .card-body p span{
	font-family: Montserrat,Helvetica Neue,Arial,sans-serif !important;
	font-size: 11px !important;

}

	@media (max-width: 500px),(max-height: 500px){

		.section-info-bookmark .card .card-body p{
			font-size: 9px !important;
		}

		.section-info-bookmark .card .card-body p font{
			font-size: 9px !important;
			
		}

		.section-info-bookmark .card .card-body p span{
			font-size: 9px !important;
			
		}
		
	}

.section-info-bookmark .card .card-body .bookmark-periodo{
	color: #bababa;
	font-weight: 500;
	font-size: 0.75em;
	text-align: left;
}

.section-info-bookmark .card .card-footer{
	margin-top: 1em;
}

.section-info-bookmark .card .card-footer h5{
	margin-bottom: 0.5em;
}

.section-info-bookmark .card .card-footer p{
	margin-bottom: 0em,
}

.sidebar .user-bookmark{
	margin-top: 0.5em;
}

.sidebar .user-bookmark .info a{
	white-space: normal;
}

.sidebar .user-bookmark:after{
	background-color: transparent !important;
}

.sidebar .user-bookmark .nav li a{
	margin-left: 3em;
	margin-right: 3em;
	border-radius: 0;
}

.sidebar .user-bookmark .nav li a span{
    font-size: 1.1em;
    overflow: hidden;
    white-space: unset !important; 
    text-align: justify;
}

.sidebar-wrapper .nav li h6{

    font-size: 0.8em;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    color: #fff;
    margin-bottom: 3em;

}

.btn-ingresar{
	margin-left: 1em;
}

.btn-registrar, .btn-idioma{
	background-color: #fff;
	/*border: 1px solid var(--color-principal) !important;
	color: var(--color-principal);
	box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);*/
	margin-left: 1em;
}

.dd-idiomas button{
    width: 12em;
    height: 3.3em;
    padding: 0.5em 1em;
}

.dd-idiomas img{
	width: 2em;
}

.btn-registrar:hover{
	background-color: #fff;
	box-shadow: 0 1px 15px 1px rgba(39,39,39,.4);	
}

#ingresarModal .modal-content{
	background-color: rgba(0,0,0,.75);
}

#ingresarModal .card-login .logo-container {
    width: 65px;
    margin: 0 auto;
    margin-bottom: 2em;
}

#ingresarModal .modal-dialog{
	max-width: 350px;
}

#ingresarModal .card-login .logo-container img{
    width: 100%;
}

#ingresarModal .card-footer{

	padding: 1.5rem 1.25rem;
}

#ingresarModal .link {
    font-size: 10px;
    color: #fff;
    text-decoration: none;

}

#ingresarModal .card-footer .btn-container{
	display: flex;
	justify-content: center;
	align-items: center;
}

#ingresarModal .card-footer .btn-extra-container{
	margin-top: 1em;
}

#ingresarModal .card-footer .btn-extra-container h6 a{
	font-size: 0.6em;
}

#registrarModal .modal-dialog{
	min-width: 350px;
}

#registrarModal .modal-body{
	background: #fff;
	padding: 0;
}

#registrarModal .modal-body .card{
	/*
	background: url('../img/logo-am-2.png');
	background-position: -70% 50%;
    background-repeat: no-repeat;
    background-size: 150%;
    margin-top: 1.5em; */
  	
}

#registrarModal .modal-body .card .separador{
	height: 5em;
    width: 100%;
    display: flex;
}

#registrarModal .modal-body .card .separador h5{
	margin-bottom: 0
}

#registrarModal .modal-body .card .separador .texto{
	width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#registrarModal .modal-body .card .separador .texto h5{
	color: #000;
	font-size: 1.2em;
}

#registrarModal .modal-body .card .separador .line-left,
#registrarModal .modal-body .card .separador .line-right{
	width: 45%;
}

#registrarModal .modal-body .card .separador .line-left h5,
#registrarModal .modal-body .card .separador .line-right h5{
	border: 1px solid #eee;
    position: relative;
    top: 50%;

}

#registrarModal .modal-body .card-header h4{
	color: #2c2c2c
}



#registrarModal .input-group-append .input-group-text, #registrarModal .input-group-prepend .input-group-text{
	 background-color: transparent; 
     border: 1px solid #e3e3e3;
     color: #888;
     border-right: none;
}

#registrarModal .input-group-focus .input-group-prepend .input-group-text{
	border-color: var(--color-secundario);
	color: #888;
}

#registrarModal .form-control{
	border: 1px solid #e3e3e3;
	border-left: none;
    color: #2c2c2c;
}

#registrarModal .form-control::placeholder{
	color: #888;
}

#registrarModal .link-terms{
	color: #007bff;
	/*color:#ffb236;;*/
}

#registrarModal .modal-body .card .card-header{
	padding: 1.2em 1.2em 0;
}

#registrarModal .modal-body .card .card-header .social{
	display: flex;
    justify-content: center;
    flex-direction: column;
}

#registrarModal .modal-body .card .card-header .social .btn{
	margin-bottom: 0.5em;
	margin-top: 0.5em;
}

#registrarModal .modal-body .card .card-body{
	padding: 0 1.2em;
}

#registrarModal .modal-body .card .card-body hr{
	/*margin: 0;
	padding-top: 2em;
	padding-bottom: 2em;*/
}

.modal .card .card-description{
	margin-top: 0em;
    text-transform: unset;
    margin-bottom: 0.8em;
    font-weight: 400;
    font-size: 0.8em;
    padding: 0px 3em;
}

#welcomeModal .modal-header{

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#welcomeModal .modal-header h5{
	text-align: center;
}

#welcomeModal .modal-header img{
	width: 4em;
	margin-bottom: 1em;
}

#welcomeModal .modal-body p{
	text-align: justify;
}

.modal-body.privacy-policy
{
	font-family: 'Verdana';
	font-size:1em;
}
.modal-body.privacy-policy h3
{
	font-size:1.4em;
}


  /*LOADING*/
  .loading-container
  {
    position:absolute;
    z-index:1050;
    width:100%;
    height:100%;
    top:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    display:flex;
    flex-direction:column-reverse;
    left: 0;
    /*display:none;*/
  }

  .div-loading
  {
    display:flex;
    justify-content:center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
   
  }

  .div-loading img
  {
    max-width: 100%;
    max-height: 100%;
    margin-left:1.7em;
  }

  p.loading {
    color: white;
    text-align: center;
    margin:0;
    padding:0;
    font-size: 1.5em;
    font-weight: 700;
  }

  /* loading dots */

  .loading:after {
    content: ' .';
    animation: dots 1s steps(5, end) infinite;
  }

  @keyframes dots {
    0%, 20% {
      color: rgba(0,0,0,0);
      text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    40% {
      color: white;
      text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    60% {
      text-shadow:
        .25em 0 0 white,
        .5em 0 0 rgba(0,0,0,0);}
    80%, 100% {
      text-shadow:
        .25em 0 0 white,
        .5em 0 0 white;}
  }

.div-loading .shape-animation{
	margin-left: 1em;
	animation: circle 3s infinite;
	/*background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(44, 168, 255, 1) 100%);*/
	/*background: var(--color-principal);*/
	background: -webkit-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(34,125,229,1) 96%, rgba(32,124,229,1) 100%);
	clip-path: circle(75%);
	height: 1.5em;
	width: 1.5em;
	margin-left: 2em;
	border-radius: 3px;
    transform: rotate3d(10, 10, 10, -45deg);
}

@keyframes circle {
  0% { clip-path: circle(75%); }
  50% { clip-path: circle(25%); }
  100% { clip-path: circle(75%); }
}