body {
   margin: 0;
   padding: 0;
 }

 html, body, #map {
   height: 100%;
 }

 #controls {
   position: absolute;
   top: 0px;
   right: 0;
   width: 400px;
   z-index: 999;
 }

 #controls label {
   float: left;
   clear: right;
 }

 #controls input {
   width: 270px;
   float: right;
   margin-top: 5px;
   ;
 }

 .pad0 {
   padding: 2px 10px;
 }

 .alert {
   color: red;
 }

 html {
   font-family: 'Source Sans Pro', sans-serif;
   font-weight: 300;
 }

 a {
   font-weight: 700;
   color: #ffcc00;
 }

 hr {
   background-color: #ffcc00;
   border: none;
   height: 1px;
   margin-top: 20px;
 }

 .line {
   margin: 10px;
   text-align: center;
   color: #ffcc00;
   font-weight: 600;
   font-style: italic;
   font-size: 18px;
 }

 .logo {
   text-align: center;
   margin-top: 20px;
 }

 h1 {
   text-align: center;
   font-family: 'Source Sans Pro', sans-serif;
   font-weight: 700;
   margin-top: 0;
 }

 p {
   margin-top: 5px;
   margin-bottom: 5px;
 }

 #sidepanel {
   opacity: 0.9;
   border-radius: 0px;
   display: block;
   position: absolute;
   float: right;
   top: 20px;
   right: 20px;
   padding: 10px;
   padding-bottom: 0px;
   font-size: 14px;
   color: #333333;
   z-index: 10000;
 }

 #slider, #slider2 {
   width: 240px;
 }

 td {
   line-height: 14px;
 }

 h1 {
   font-size: 17px;
 }

 .leaflet-container {
   background: #eeeeec !important;
 }

 .footnote {
   cursor: pointer;
   color: #ffcc00;
 }

 .info {
   margin-top: 15px;
   font-size: 14px;
   line-height: 170%;
 }

 .hidden {
   font-size: 20px;
   background: none;
   border: 0;
   text-align: center;
 }

 #content {
   padding: 10px;
   width: 300px;
 }

 #footnotediv {
   font-style: italic;
 }

 input[type=range], input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   margin: 0;
   /* padding:0; */
   /* border:0; */
 }

 input[type=range] {
   width: 100%;
   display: inline-block!important;
   vertical-align: middle;
   height: 25px;
   padding: 0 2px;
   border: 2px solid transparent;
   background: rgba(0, 0, 0, 0.25);
   min-width: 100px;
   overflow: hidden;
   cursor: pointer;
   color: #FACF17;
 }

 input[type=range]::-ms-fill-upper {
   background: transparent;
 }

 input[type=range]::-ms-fill-lower {
   background: rgba(250, 207, 25, 0.25);
 }
 /* Browser thingies */

 input[type=range]::-moz-range-track {
   opacity: 0;
 }

 input[type=range]::-ms-track {
   opacity: 0;
 }

 input[type=range]::-ms-tooltip {
   display: none;
 }
 /* For whatever reason, these need to be defined
 * on their own so dont group them */

 input[type=range]::-webkit-slider-thumb {
   background: rgba(250, 207, 25, 0.75);
   height: 12px;
   width: 20px;
   border-radius: 3px;
   cursor: ew-resize;
   box-shadow: rgba(255, 255, 255, 0.25) -1200px 0 0 1200px;
 }

 input[type=range]::-ms-thumb {
   margin: 0;
   padding: 0;
   border: 0;
   background: rgba(250, 207, 25, 0.75);
   height: 12px;
   width: 20px;
   border-radius: 3px;
   cursor: ew-resize;
   box-shadow: rgba(255, 255, 255, 0.25) -1200px 0 0 1200px;
 }

 input[type=range]::-moz-range-thumb {
   margin: 0;
   padding: 0;
   border: 0;
   background: rgba(250, 207, 25, 0.75);
   height: 12px;
   width: 20px;
   border-radius: 3px;
   cursor: ew-resize;
   box-shadow: rgba(255, 255, 255, 0.25) -1200px 0 0 1200px;
 }

 input[type=range]:disabled::-moz-range-thumb {
   cursor: default;
 }

 input[type=range]:disabled::-ms-thumb {
   cursor: default;
 }

 input[type=range]:disabled::-webkit-slider-thumb {
   cursor: default;
 }

 input[type=range]:disabled {
   cursor: default;
 }

 #note {
   font-size: 14px;
   color: #C9C9C4;
 }

 #close {
   width: 30px;
   height: 30px;
   position: absolute;
   right: -5px;
   border-radius: 15px;
   border: solid 2px#ffcc00;
   text-align: center;
   top: -5px;
   cursor: pointer;
   font-size: 20px;
 }

 #close.open {
   background-image: url('open.png');
 }

 #s_sol {
   float: left;
   font-size: 12px;
 }

 #p_sol {
   float: right;
   font-size: 12px;
 }

 h31, .h31 {
   font-size: 13px !important;
 }

 #searchBar {
   position: absolute;
   z-index: 100;
   top: 0;
   left: 45px;
 }

 #map-info {
   background-color: white;
   border-radius: 4px;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
   padding: 10px;
   left: 12px;
   /*bottom: 80px;*/
   bottom: 20px;
   width: 200px;
   z-index: 1000;
   position: absolute;
   opacity: 0.9;
 }

 #map-dades {
   background-color: white;
   border-radius: 4px;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
   font-size: 95%;
   opacity: 0.9;
   padding-left: 5px;
   padding-right: 5px;
   position: absolute;
   right: 12px;
   top: 15px;
   z-index: 1000;
 }

 #logos {
   bottom: 60px;
   cursor: pointer;
   height: 46px;
   left: 0;
   opacity: 0.8;
   padding: 0 10px;
   position: absolute;
   z-index: 1000;
 }

 #map-legend {
   background-color: white;
   border-radius: 4px;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
   color: darkorange;
   cursor: pointer;
   display: block;
   font-size: 160%;
   height: 52px;
   line-height: 52px;
   opacity: 0.9;
   position: absolute;
   right: 35px;
   text-align: center;
   top: 120px;
   width: 52px;
   z-index: 1000;
 }

 #map-title {
   background-color: slategrey;
   border-radius: 4px;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
   color: white;
   cursor: pointer;
   font-size: 100%;
   left: 40%;
   opacity: 0.9;
   padding: 6px;
   position: absolute;
   text-align: center;
   top: 10px;
   width: 280px;
   z-index: 1000;
 }

 #map-title #title {
   font-size: 130%;
   font-weight: bold;
 }

 @media (max-width: 800px) {
   #map-dades {
     background-color: white;
     border-radius: 4px;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
     font-size: 89%;
     opacity: 0.9;
     padding: 2px;
     position: absolute;
     right: 11px;
     top: 70%;
     z-index: 1000;
   }
   #map-legend {
     background-color: white;
     border-radius: 4px;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
     color: darkorange;
     cursor: pointer;
     display: block;
     font-size: 150%;
     height: 46px;
     line-height: 46px;
     opacity: 0.9;
     position: absolute;
     right: 15px;
     text-align: center;
     top: 60%;
     width: 46px;
     z-index: 1000;
   }
   #searchBar {
     left: 10px;
     position: absolute;
     top: 100px;
     width: 77px;
     z-index: 100;
   }
   #map-title {
     font-size: 90%;
     left: 15%;
     width: 260px;
     z-index: 1000;
   }
 }

 .separator-legend {
   border-bottom: 1px solid #E5E5E5;
   margin-bottom: 4px;
   margin-top: 4px;
   overflow: hidden;
   width: 100%;
 }

 .item-legend {
   font-size: 12px;
 }

 .square-legend {
   border: 1px solid #c5c5c5;
   border-radius: 6px;
   float: left;
   height: 20px;
   margin: 2px;
   width: 20px;
   margin-right: 15px;
 }

 .title-legend {
   text-align: center;
   font-weight: bold;
   font-size: 13px;
 }

 .leaflet-social-control {}

 .leaflet-social-control a {
   color: white !important;
 }

 .fa.fa-facebook-square {
   color: #314987;
   font-size: 125%;
 }

 .fa.fa-twitter-square {
   color: #22BBF4;
   font-size: 125%;
 }

 .fa.fa-google-plus-square {
   color: #D01820;
   font-size: 125%;
 }

 @media (max-width: 400px) {
   #map-dades {
     background-color: white;
     border-radius: 4px;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
     font-size: 89%;
     opacity: 0;
     padding: 2px;
     position: absolute;
     right: 11px;
     top: 70%;
     z-index: 1000;
   }
   #map-legend {
     background-color: white;
     border-radius: 4px;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
     color: darkorange;
     cursor: pointer;
     display: none;
     font-size: 150%;
     height: 46px;
     line-height: 46px;
     opacity: 0.9;
     position: absolute;
     right: 15px;
     text-align: center;
     top: 60%;
     width: 46px;
     z-index: 1000;
   }
   #logos {
     bottom: 10px;
     cursor: pointer;
     height: 46px;
     left: 0;
     opacity: 0.8;
     padding: 0 10px;
     position: absolute;
     z-index: 1000;
   }
   .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
     font-size: 0px !important;
   }
   #searchBar {
     left: 10px;
     position: absolute;
     top: 100px;
     width: 77px;
     z-index: 100;
   }
   #map-title {
     font-size: 55%;
     /* left: 15%; */
     width: 105px;
     z-index: 1000;
   }
 }

 #controlcontainer {
   top: 0;
   position: absolute;
   z-index: 4;
   margin: 0!important;
   bottom: 0;
   height: 100%
 }

 #omnibox.vasquette-margin-enabled {
   margin: 8px 0 8px 8px
 }


 #mygrid {
   position: absolute;
 top: 145px;
 z-index: 1000;
 width: 320px;
 height: auto;
 left: 10px;
 background-color: white;
 padding: 10px;
 max-height: 300px;
 overflow: auto;
 font-size: 1em;
 display: none;
 }

 #mygrid li a {

     color: #333 !important;
     text-decoration: none !important;
 }

 #mygrid li a:hover {

   color: #333 !important;
   text-decoration: none !important;
 }
 .switch {
   position: relative;
   display: inline-block;
   height: 34px;
 }

 .switch input {display:none;}

 .slider {
   display: inline-block;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #2196F3;
   -webkit-transition: .4s;
   transition: .4s;
   width: 40px;
    height: 16px;
    border: 1px solid #c3c3c3;
 }

 .slider:before {
   position: absolute;
   content: "";
   height: 12px;
   width: 12px;
   left: 4px;
   bottom: 20px;
   background-color: white;
   border: 1px solid #c3c3c3;
   -webkit-transition: .4s;
   transition: .4s;
 }

 input:checked + .slider {
   background-color: #ffcc00;
 }

 input:focus + .slider {
   box-shadow: 0 0 1px #2196F3;
 }

 input:checked + .slider:before {
   -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
   transform: translateX(26px);
 }

 /* Rounded sliders */
 .slider.round {
   border-radius: 34px;
 }

 .slider.round:before {
   border-radius: 50%;
 }

 .panel-title-ull_footer{

 font-size:0.8em;

 }

 .panel-footer{


 margin-top:40px;

 }

 #logos_icgc{
 /* bottom: 60px; */
 cursor: pointer;
 height: 46px;
 /* left: 0; */
 opacity: 0.8;
 padding: 0 10px;
 /* position: absolute; */
 z-index: 1000;
 }

 #div_panel {
    position: absolute;
    top: 100px;
    width: 320px;
    float: left;
    height: 480px;
    background: #fff;
    display: none;
    radius: 5px;
    z-index: 5000;
    margin-left: 10px;
 }

 .panel-header {
   display: table
 }

 .panel-header-container {
   display: table-row
 }

 .panel-header-title {
   font-weight: 600;
   font-size: 20px;
   text-align: center;
   width: 100%;
   line-height: 24px;
   padding-top: 10px;
   padding-bottom: 10px;
   color: #c3c3c3;
   display: inline-block;
    width: 280px;
 }

 .panel-close-button {
   background: url(images/ic_navigate_before_black_24dp_2x.png) no-repeat;
   background-size: 100%;
   height: 24px;
   width: 24px;
   margin: 5px;
   cursor: pointer;
   opacity: .6;
   vertical-align: middle
 }

 .panel-close-button:hover {
   opacity: .94
 }

 .panel-list {
   border-top: 1px solid #d9d9d9;
   color: #777;
   font-size: 13px;
   padding-top: 10px
 }

 .panel-list-item {
   padding: 10px 20px 20px;
   cursor: pointer
 }

 .panel-list-item-icon {
   width: 22px;
   height: 22px;
   display: inline-block;
   opacity: .5;
   margin-right: 25px
 }


 .panel-content a {
   text-decoration: none
 }

 .panel-title-ull{
    font-size: 1.3em;
       color: #777;
 }


 .panel-item-ull{
  font-size: 1.2em;
  margin-left: 30px

 }

 .searchbox {
   position: relative;
   background: #fff;
   border-radius: 2px;
   box-sizing: border-box;
   width: 320px;
   height: 48px;
   border-bottom: 1px solid transparent;
   padding: 12px 70px 11px;
   transition-property: background, box-shadow;
   transition-duration: .3s
 }

 .searchbox-shadow {
   box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 -1px 0 rgba(0, 0, 0, .02)
 }

 .searchbox-menu-container {
   position: absolute;
   z-index: 1003;
   left: 0;
   top: 0
 }

 .searchbox-menubutton::before {
   content: '';
   display: block;
   background-image: url(images/ic_dehaze_black_24dp_2x.png);
   background-size: 100%;
   background-position: 0 0;
   height: 24px;
   width: 24px;
   opacity: .62
 }

 .searchbox-menubutton {
   display: block;
   cursor: pointer;
   padding: 12px 16px
 }

 #searchboxinput {
   width: 100%
 }

 .searchbox-searchbutton {
   display: block;
   padding: 2px 15px;
   cursor: pointer;
   opacity: .61
 }

 .searchbox-searchbutton:hover {
   opacity: .98
 }

 .searchbox-searchbutton-container, .searchbox-searchbutton-container::after {
   content: "";
   position: absolute;
   right: 0;
   top: 10px;
   border-left: 1px solid #ddd;
   height: 28px
 }

 .searchbox-searchbutton::before {
   content: '';
   display: block;
   width: 24px;
   height: 24px;
   background: url(images/ic_search_black_24dp_2x.png);
   background-size: 100%;
   opacity: .5
 }

 button::-moz-focus-inner, input::-moz-focus-inner, textarea::-moz-focus-inner {
   margin: 0;
   padding: 0;
   border: 0
 }

 a, button, h1, h2, h3, h4, h5, h6, input, ol, p, textarea, th, ul {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font: inherit;
   vertical-align: baseline;
   background: 0 0;
   list-style: none;
   overflow: visible
 }