.sidenav .collapsible-header, .sidenav.fixed .collapsible-header
{
    padding: 20px 0px;
    padding-left: 5px;
    font-weight: 400;
    font-size: 1.3em;
    text-transform: uppercase;
}
.mapboxgl-map, .maplibregl-map
{
    font: unset!important;
    position: static;
}
.sidenav .collection .collection-item
{

    margin-left: 7px;
    background-color: unset!important;
    padding: 5px 0px!important;
}
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v94/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
  }
    .mapboxgl-ctrl-group>button
    {
      background: unset!important;
        background-color: unset!important;
    }
  .mapboxgl-popup-content,.mapboxgl-ctrl-group > button
  {
     background: unset!important;
    background-color: unset!important;

  }
  nav ul a:hover
  {
    background-color: unset;
  }
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }


  html {
    font-family: sans-serif !important;
    /* background: var(--bg-color); */
  }
  /* table,label,div,.card-content-content .collection-item,
  .mapboxgl-popup-content,.mapboxgl-popup-content,
  .collapsible-body .card, .sidenav .collapsible-body, i,
  div.material-tooltip,.popper-popup,
  button.mapboxgl-ctrl-icon,button.mapboxgl-ctrl-icon i,
  .mapboxgl-ctrl-group > button,
  span,nav,.btn,text */
html *
  {
    text-rendering: optimizeLegibility;
    /* background-color:var(--bg-color);
    color:var(--font-color); */
    /* fill:var(--font-color); */




  }
    .highcharts-legend-item text {
    fill: var(--bs-body-color) !important
}


.myTooltip,
.highcharts-tooltip span
{

  color:white!important;
}
  svg,g,text,rect {

    /* color: var(--bs-body-color)!important */
  }

 .dark.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
 .dark.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23e8e5df'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.light.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
.light.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333333'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
}

  .light.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,
  .light.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon
{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333333'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")


}

.dark.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,
.dark.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon
{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23e8e5df'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")
}

  .cloned,.cloned >div
  {

  }
  .spinner-accordion>div
  {


  }
  .mapboxgl-popup-content .main_title
  {
  background-color: var(--font-higlight)!important;
  font-size: 1.2rem;
  }
  .params_select .collection-item b,.mapboxgl-popup-content b,
  .chart_table table b
  {
    text-decoration: underline;
    text-decoration-color: #ff9800;
    text-decoration-thickness: 2px;

  }

  .initial_modal .btn-small,
  .mapboxgl-ctrl-icon,.mapboxgl-ctrl-top-right .material-icons
  {
    background-color: var(--font-color);
    color:var(--bg-color);
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
  }
  .initial_modal .btn-small:hover,
  .mapboxgl-ctrl-icon:hover,
  .mapboxgl-ctrl-top-right .material-icons:hover
  {
    background-color: var(--font-higlight)!important;
    color:var(--font-color)!important;
  }
  .mapboxgl-ctrl-top-right .right_messages .material-icons
  {
    background-color: unset!important;
  }

  .material-icons:hover,.right_messages .material-icons:hover
  {
    color: var(--font-higlight)!important;
    transition: color .5s ease-in-out;
    -webkit-transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
  }
  span.download_box
  {

    display: flex;
    flex-direction: revert;
    background-color: rgb(58, 51, 51);
    align-items: center;
    padding: 5px;

    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    outline: 1px solid gray;
  }

  span.download_box:hover
  {
    cursor: pointer;
    background-color:var(--font-higlight)!important;
    color:var(--font-color)!important;
  }
  span.enabled,.btn.enabled
  {
    color: var(--font-higlight)!important;
  }
  nav .nav-wrapper
  {


    z-index: 11;
  }


  .noUi-horizontal .noUi-tooltip,
  .noUi-horizontal .noUi-tooltip span,
  .materialized_slider_container .noUi-base,
  .mapboxgl-popup,.select-dropdown.dropdown-content li.selected,
  .select-dropdown.dropdown-content li.selected span,
  span.bucket_color

  {
    background-color: unset!important;
  }
  .noUi-tooltip span
  {
    color:var(--bg-color)!important;
  }

  .materialized_slider_container div,
  .materialized_slider_container span
  {
    background-color: unset!important;
  }

  .noUi-target.noUi-horizontal .noUi-tooltip
  {
    background-color: var(--font-color)!important;
  }


  /* i.popper-button-highlight */
  /* { */
    /* color:var(--font-color); */
  /* } */
  .mapboxgl-control-container button
  {
    border: unset!important;
    width:4rem!important;
    height: 4rem!important;
  }
  .light .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
    /* %23 equivalent to # */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23333333;' d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z'/%3E %3C/svg%3E")!important;
  }
  .light .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23333333;' d='m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z'/%3E %3C/svg%3E")!important;
  }
  .dark .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
    /* %23 equivalent to # */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23eeeeee' d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z'/%3E %3C/svg%3E")!important;
  }
  .dark .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23eeeeee' d='m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z'/%3E %3C/svg%3E")!important;
  }


  div.material-tooltip,.popper-popup
  {
    border: 1px solid var(--font-color)!important;
  }
  .mapboxgl-ctrl-top-right,.map_legend_control_ctrl,.map_legend_control_ctrl > div,
  .noUi-handle-touch-area,.slider,.slider .nosUi-origin,.mapboxgl-ctrl-bottom-right
  {
    /* background-color: unset!important; */
  }
  .mapboxgl-ctrl-top-right
  {
  display: flex;
  margin-right: 15px;
  /* preventing on add rect_container_container */
  z-index: 13;
}
  .noUi-base,.noUi-origin,.slider {
    background-color: #ffc1077d!important;
  }

  .sidenav > .row
  {
    /* border: 1px solid var(--border-color); */
    height: 100vh;
  }

  .nav-wrapper a
  {
    color:var(--font-color);
    font-size: .9rem;
  }
  .collapsible li.active
  {
    background-color:var(--bg-color-softer)
  }

  table,label,div,span
  {

    /* color: var(--font-color); */
  }
  .sidenav .card-content-content .collapsible-header:hover,
  .reference_collection .collection-item:hover
  {

    /* background-color:var(--bg-color-softer); */
  }

  .sidenav {
    transform: translateX(1px);
    top:10px!important;
    left: 1px;
    /* overflow-y: unset!important; */
    overflow-y: auto;


    padding-bottom: 0px!important;
    height: 100vh;
    /* to be changed depending on resolution */
    width: 22vw;
    position: absolute;
    z-index: 11;
  background-color: #d0bfbf00!important;
  }
  /* #slide-out.collapsed  */
  /* { */
     /* transform: translateX(-500px)!important;  */
  /* } */
  #layers
  {
    height: 100vh;
    overflow: auto;
padding: unset;

      transform: translateY(-1px);
    border-top: 1px solid gray;

  }

  #adminUnits_collapse > div > ul
  {
    /* max-height: 400px; */
    max-height: 50vh;
    overflow: auto!important;
  }

  .sidenav .collapsible {
    /* border: 1px solid grey!important; */
  }

  .z-depth-1,
  nav,
  .card-panel,
  .card,
  .toast,
  .btn,
  .btn-large,
  .btn-small,
  .btn-floating,
  .dropdown-content,
  .collapsible,
  .sidenav {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
  }

  .sidenav li {
    line-height: unset!important;
  }

  .sidenav .card.collapsible-header {
    display: none;

    min-height: 69px;

    margin: 0 0;
    line-height: 0px !important;
    border-bottom: 1px solid grey;
  }

  .sidenav .card .card-content {
    padding-left: 10px;

    position: relative;
    min-height: 50px;
    padding: 0px;

  }

  .card .card-content {

    border-radius: 0 0 0px 0px;
    padding-top: 0px !important;
  }

  .card-stacked>.card-content .card-title {


    font-size: 1.4rem;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .sidenav .collapsible-body {
    border-bottom: 1px solid #d2c4c4;


    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    max-height: 450px;
  }

  .sidenav li.analysis_layer {
    overflow: hidden;

  }

  .collapsible-body .card {
    position: relative;

    margin: 0 0 0.1px 0;

    transition: box-shadow 0.25s;
    border-radius: 0px;
  }

  .indicators_li .collapsible-body .layers_list .card .card-content .card-title,
  .queryable_layers_list .collapsible-body .layers_list .card .card-content .card-title,
  li.queryable_li.active>div.collapsible-body>ul>li>div.card .card-content .card-title {
    display: block;

    line-height: unset!important;

    padding: 5px;
    padding-left: 9px;
  }

  .queryable_layers_list .card-title.activator .col {
    padding: 0px !important;
  }

  .card-title.activator .row .col.s8>div {

    text-transform: uppercase;
    font-size: 1.3rem;
    padding: 9px;
    padding-bottom: 2px;
    border-bottom: 3px solid #ff9800;

  }

  .card .card-content .card-actions {
    margin-top: -6px;
  }

  .card .card-content .card-title i {
    top: 9px;
    line-height: 16px !important;

    margin-right: 8px !important;
    margin-left: 1px !important;
    font-size: 17px;
    padding-right: 10px;
    position: relative;
  }


  .params_select .input-field {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .select-wrapper {
    height: auto;
    border: 1px solid #fb9702;
    /* background: #19181a; */
    border-radius: 1px;
    margin-bottom: 4px;
    margin-right: 4px;
  }




  .select-wrapper .caret {
    fill: #fb9702;
    height: 95%;
    width: 34px;

  }


  ul.tabs {
    list-style-type: none!important;
    line-height: 18px;
    height: 30px;
    /* margin-bottom: 5px; */
  }

  .tabs .tab {
    height: 30px;
  }

  /* .tab.col { */
    /* color: #575050!important; */
  /* } */

  .tabs .tab a {
    text-align: left!important;
    text-transform: none !important;
    padding: 0px 0px!important;
    /* font-size: 14px!important; */
    font-size: 11px!important;

    text-transform: uppercase!important;
    /* margin-top: 7px; */
    position: relative;
    bottom: 9px;
    height: 35px;
  }

  .card-content-content>.row {
    margin-left: 1px!important;
    margin-right: 1px!important;
    /* border:1px solid grey; */
    border-top: unset;
  }

  .col.tab_data {
    margin-left: 5px;
    padding: 0 0.25rem;
    padding-left: 0px!important;
    /* background: #282626; */
  }

  .description,
  .instructions,
  .instructions_txt {
    font-size: 1rem;
    margin-top: 4px;
    padding: unset;
  }

  .filter>span {
    margin-top: 15px;
  }

  .description .param {
    color: var(--font-higlight)!important;
  }

  .description .param_extended {
    color: #ede7e7;
    font-size: .9rem;
    display: none;
    border: 1px solid #786f6f;
    margin: 2px;
    margin-left: 0px;
    padding: 5px;
  }

  .extend_param:hover
  {
    cursor: pointer;
  }
  .extend_param {

    /* color: var(--font-higlight); */
    text-decoration: underline;
    text-decoration-color: #ff9800;
    text-decoration-thickness: 2px;
    display: block;
    font-size: 1rem;
  }


  /* td.group span
  {
    padding-left: 0px!important;
  } */

  .select-wrapper .dropdown-content {
    /* background-color: #201d1d!important; */
  }

  .select-dropdown li.disabled,
  .select-dropdown li.disabled>span,
  .select-dropdown li.optgroup {
    color: var(--font-color);
  }

  .select-dropdown.dropdown-content li.selected {
    background-color: #f79801!important;
    color: var(--font-color);
    padding: 0;
  }

  .dropdown-content li>a,
  .dropdown-content li>span {
    font-size: 1rem!important;

    display: block;
    line-height: 20px;
    padding: 5px;
    overflow: hidden;
    max-width:95%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .dropdown-content li {
    max-height: 35px!important;
    min-height: unset!important;
  }

  .dropdown-content li:hover {
    background: white;
  }

  .tab_data {
    /* display: none;  */
  }

  @media only screen and (min-width: 992px) {
    html {
        font-size: 11px;
        font-size: 13px;
    }
  }

  .gradients {
    height: 15px;
    /* width: 600px; */
  }

  .collection-item .row {
    margin-bottom: 5px;
  }

  .collection_gradients {
    height: 15px;
    /* width: 600px; */
  }

  .color_schema_collection .collection-item {
    min-height: 25px;

    border-bottom: 1px solid var(--font-color);
  }

  .color_schema_collection {
    overflow: auto;
  }

  .color_schema_collection .collection-item:hover {
    cursor: pointer;
  }

  .color_schema_collection .collection-item.active {
    background: #ffc107!important;
    border: 1.5px solid #ffeb3b;
  }

  .select-wrapper input.select-dropdown {

    padding-left: 5px;
    font-size: .9rem;
    max-width:90%;
  }

  ul.symbolize_ul>li .collapsible-header {
    padding: 4px 4px;
    min-height: 20px;
  }

  #select-options-a2038a98-5df5-8c5b-59fb-a836b669bfa21::after {
    content: 'test'
  }

  .category_legend {
    padding-left: 5px;
  }

  .highlight {
    /* display: none; */
  }

  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;

    font-family: 'Open Sans', sans-serif;
    /* -webkit-font-smoothing: antialiased; */
    -webkit-font-smoothing: auto;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    font-weight: 100;
    overflow: hidden;
  }

  .range-value {
    position: absolute;
    top: -50%;
  }

  .range-wrap {
    width: 100%;
    /* position: relative;
    top: 55px; */
    margin-top: 100px;
  }

  .analysis_layer {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .info {
    /* display: none;
    position: absolute;
    top: 20px; */
    color: white;
    /* font-size: 1.2rem;
    padding: 10px;
    background-color: black;
    z-index: 3333;
    left: 44vw; */
  }

  .mapboxgl-popup-content {
    /* font-size: 1rem; */
    /* box-shadow: 0px -1px 4px #2196F3; */

/*     -webkit-box-shadow: 10px 10px 32px 19px #2196F3;
-moz-box-shadow: 10px 10px 32px 19px #2196F3;
box-shadow: 10px 10px 32px 19px #2196F3; */
    font-weight: 200;
    padding: 10px;
    text-align: center;
    /* border: 1px solid #76747447; */
    /* max-height: 50vh; */
    /* overflow: auto; */

  }


  /* .mapboxgl-popup-content  */
  .pa_info>div,
  .mapboxgl-popup-content .mining_info>div {
    margin-bottom: 1px;
    display: flow-root;

  }
  .pa_info .link {
    display: block;
    text-align: left!important;
    font-size: .7rem;
}

    .pa_info.charts_container
    {
      /* width: inherit; */

    }

  .feature_map_popup .mapboxgl-popup-content .cat {
    font-size: 1.5rem;
    padding: 5px;
  }

  .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip, .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
  .mapboxgl-popup-anchor-right .mapboxgl-popup-tip, .mapboxgl-popup-anchor-right .maplibregl-popup-tip,
  .mapboxgl-popup-anchor-left .mapboxgl-popup-tip, .mapboxgl-popup-anchor-left .maplibregl-popup-tip,
  .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip, .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
  .mapboxgl-popup-anchor-top .mapboxgl-popup-tip, .maplibregl-popup-anchor-top .maplibregl-popup-tip,
    .mapboxgl-popup-anchor-right .mapboxgl-popup-tip,.maplibregl-popup-anchor-right .maplibregl-popup-tip
  {

    background-color: unset!important;
    background: unset!important;
  }

  nav ul li {
    transition: background-color .3s;
    /* float: none!important; */
    padding: 0;
  }

  .tabs {
    /* display: none; */
  }

  nav,ul#nav-mobile {


    height: 56px!important;
    line-height: 56px!important;
    box-shadow: none!important;
  }


  .row {
    margin-left: auto!important;
    margin-right: auto!important;
    margin-bottom: 0px!important;
  }

  .ceat_sidenav .row,
  .ceat_nav .row {
    margin: unset;
  }

  .category_legend {
    padding: unset;
  }

  .category_legend text {
    fill: var(--font-color);
  }

  input {
    color: var(--font-color);
  }
  #menu
  {
    display: none;
    z-index:200000!important;
  }
  #menu,.right_messages{
    z-index: 11;
    /* display: none; */
    position: absolute;

    /* padding: 7px; */
    /* font-family: "Open Sans", sans-serif; */
    right: 20px;
    border: 1px solid var(--font-color);
    /* max-width: 33vw; */
    /* max-width: 17vw; */
    top: 9% !important;
    padding: 5px;
    border: 2px solid gray;
  }



  #menu.active,.right_messages.active {
    /* max-width: 17vw; */
    z-index: 111;
  }

  #menu form {
    display: block;
  }

  #baselayers_switcher {
    margin-right: 10px;
    /* border-bottom: 1px solid #685d5d; */
    margin-bottom: 10px;
  }

  #menu form label {
    margin-right: 5px;
    display: block;
  }

  #menu form span {
    /* padding-left: 28px !important; */
  }

  #menu input {
    padding: 8px;
  }

  #menu form span {
     padding-left: 5px;
  }

  [type="checkbox"].filled-in:checked+span:not(.lever):after {
    top: 0;
    width: 15px;
    height: 15px;
    /* border: 2px solid #26a69a; */
    background-color: #cd8b27;
    z-index: 0;
  }

  [type="checkbox"].filled-in:not(:checked)+span:not(.lever):after {
    height: 15px;
    line-height: 15px;
    width: 15px;
    border: 1px solid var(--font-color);
  }

  [type="checkbox"]+span:not(.lever) {
    position: relative;
    /* margin-left: 15px; */
    height: 15px;
    line-height: 15px;
    bottom:2px;
    margin-left: 3px;
  }



  [type="checkbox"].filled-in:checked+span:not(.lever):before {
    top: -2px;
    left: 1px;
    width: 5px;
    height: 10px;
  }

  [type="checkbox"].filled-in:checked+span:not(.lever):before {
    opacity: 0;
    /* border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%; */
  }

  [type="checkbox"].filled-in:checked+span:not(.lever):after {
    border: unset;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: unset!important;
  }

  #menu .btn-small {
    display: inline-block;
  }

  div#overlays_switcher i {
    padding: unset;

  }

  #overlays_switcher>div,
  #baselayers_switcher>label {
    margin-bottom: 10px;
  }

  .overlays_switcher_palette,
  .overlays_switcher_labels {
    margin-right: 10px;
    display: none;
  }


  /**** Custom styles for Range ****/



  /**** Custom styles for noUiSlider ****/

  .test-slider {
    width: 300px;
    /* height: 3px; */
    /* height: 30px; */
    margin-left: 20px;
    margin-top: 10px;
  }


  /**** Custom styles for noUiSlider ****/



  .noUi-target.noUi-horizontal .noUi-tooltip {
    /* background-color: purple; */
    border: 1px solid var(--font-color);
    font-size: .8rem;
    background: var(--bg-color);
  }

  .slider .noUi-handle,
  .slider .noUi-handle {
    background: #ff9800!important;
  }


  .slider .noUi-tooltip {
    background-color: var(--font-color);
  }



  .noUi-horizontal .noUi-handle,
  .noUi-vertical .noUi-handle {
    background: var(--bg-color);
  }

  .noUi-target.noUi-horizontal .noUi-tooltip {
    /* background: var(--bg-color); */
    background: #ffc107!important;
  }

  input[type=range]+.thumb.active .value {
    color:  var(--font-color);
  }



  .tabs {
    background-color: #3a3d3c;
  }

  .tabs .tab a {
    color:  var(--font-color);
    text-transform: uppercase;
  }

  .tabs .indicator {
    background-color: #ffc107;
    height: 3px;
    width: 25%;
    /* margin-left: 5px; */
    position: absolute;
    bottom: 4px;
  }

  @media only screen and (min-width: 0) {
    html {
        /* my macos */
        /* font-size: 11px; */
        font-size: 13px;
    }
  }
  .filters_container .title,
  .filters_container .number_class_container,
  .filters_container .materialized_slider_container {
    padding-left: 5px;
  }

  .number_class_container input.validate {
    font-size: 1.3rem!important;
    color: var(--font-higlight);
    height: 12px!important;
  }

  .symbolize_ul>li.active {
    /* background-color: #ff9800; */
    background-color: var(--bg-color);
    border: 1px solid var(--font-color);
  }

  .row.gradients {
    /* display: none; */
    /* margin-left: 10px!important; */
    margin-top: 10px;
  }

  .number_class_container {
    /* min-height: 50px; */
    width: 100%;
    /* padding-right: 5px; */
    /* border-bottom: 1px solid grey; */
  }

  .materialized_slider_container>div {
    min-height: 70px;
  }

  .materialized_slider_container .noUi-horizontal {
    position: relative;
    /* top: 20px; */
    top: 10px;
    width: 95%;
    margin-left: 4px;
    margin-top: 10px;

  }

  .nice-number {
    /* display: inline-flex; */
    justify-content: stretch;
  }

  .nice-number input {
    vertical-align: middle;
    -moz-appearance: textfield;
    box-sizing: content-box;
    margin: 0;
    text-align: center;
  }

  .nice-number input::-webkit-inner-spin-button,
  .nice-number input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .nice-number {
    margin-top: 7px;
    height: 15px;

    color: var(--font-color)!important;
    padding: 0 0;
  }

  .nice-number button {
    height: 15px;
    border: unset;
    color: var(--font-color);
    background: #e1851f;
  }

  .nice-number input {
    height: 22px!important;
    border: unset;
    width: 40px;
    margin: unset!important;
  }



  .landcover_legend text.label {
  font-size: 1rem;
  }

  text.label_sec {
    fill: var(--font-color);
    font-size: 0.8rem;
  }

  .category_legend_icons i {
    display: inline-block;
    font-size: 1.1rem;
  }

  .category_legend_icons i:hover,
  .menu {
    cursor: pointer;
  }

  .category_legend svg .label_sec {
    display: none;
  }

  .symbolize_ul,
  .symbolize_ul>li {
    display: none;
  }

  .category_legend_icons i {
    margin-left: 5px!important;
    position: relative;
    /* top: 8px; */
  }

  .category_legend_icons span:first-child i {
    margin-left: 0px!important;
  }

  i.activated {
    color:#FF9800!important;
  }

  i.param_description:hover {
    cursor: pointer;
  }

  i.param_description {
    margin-left: 5px;
    display: inline-block;
    font-size: 0.8rem;
    margin-top: 2px;
  }

  .description {
    /* display: none; */

    padding: 2px 5px;
    width: 100%;
    margin-bottom: .5rem;
  }

  .noUi-connect {
    background: var(--bg-color)!important;
  }

  .select-dropdown {
    position: revert!important;
  }

  .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-bottom-color: var(--bg-color);
  }

  .mapboxgl-popup-content {}

  .mapboxgl-popup-content .l_title {
    color: var(--font-higlight)!important;
    text-transform: uppercase;
    font-weight: 400;
  }

  .mapboxgl-popup-content .title span {
    display: block;
    padding: 0px;
    max-width: 100%;

    float: left;
  }

  .mapboxgl-popup .main_title span:first-child {
    color: #ff9800;
  }

  .mapboxgl-popup .main_title span {
    display: block;
  }

  .mapboxgl-popup.main_title span.val {
    color: red;
    font-size: 1.2rem;
  }

  .mapboxgl-ctrl-bottom-right {
    margin: 8px !important;
    bottom: 6%;
    width: 20px;
    display: block!important;
  }

  .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
    margin: 10px 10px 2px 2px;
    float: right;
    border-width: 1px;
    border-style: outset;
    border-color: var(--font-color);
    border-radius: unset!important;
    /* width: 33px; */
  }

  .old_map_legend_control_ctrl {
    /* max-height: 438px; */
    width: auto!important;
    overflow: auto;
    color: var(--font-color);
    /* min-width: 233px;
    background-color:#030303!important; */
    padding: 3px!important;
    /* border: 1px solid #c5d0d7; */

    overflow: hidden;
    margin-top: 0px!important;
    position: relative;
    left: 2px;
    border:unset!important;
  }

  .cloned {
    margin: .2rem;
  }

  .cloned .param_container {
    font-size: 0.9rem;
  }

  .cloned span.param {
    color: goldenrod
  }

  .cloned .param_container .filter {
    margin-left: 5px;
    display: block;
    margin-top: 0px;
  }

  .expand_more {
    display: none;
  }

  .card-content-content {
    /* display: none; */
  }

  svg.buckets g:hover,
  svg.landcover_legend g:hover {
    cursor: pointer;
  }

  svg.buckets g.off,
  svg.landcover_legend g.off {
    opacity: .2;
  }

  .slider {
    margin-bottom: 1rem;
    /* margin-left: 5px; */
    width: 90%;
  }



  .material-icons.menu {
    background: var(--font-color);
    color: var(--bg-color);
    border: unset;
    /* padding: 5px; */
    margin: 2px;
    /* border-radius: 13%; */
    border: 1px solid var(--font-color);
    position: relative;
    left: 2px;
    width: 26px;
    border-radius: 6%;
  }

  .cloned {
    display: none;

    /* padding-left: .5rem; */
    width: 100%;
    margin:.3rem;
    /* padding-left: 3px; */
  }
  .cloned.on {
    display: block;
  }
  .cloned .row>.col.s10
  {
    margin-left: 0;
    padding-left: 0px;
    font-weight: 500;
    color:var(--font-higlight)!important;
  }
  .cloned.active {
    display: block;
    color: var(--font-color);
    background-color: var(--bg-color);
    position: relative;
    /* border-bottom: 1px solid #c6c5c5; */
    right: 5px;
    /* right: 30px; */
  }

  .map_legend_control_ctrl {
    display: none;
  }

  .right_messages {
    display: none;
    width: auto;
    margin-right: 0px;
    right: 5px;

  /*   position: relative; */
    max-height: 60vh;
    /* max-width: 35vw; */
    max-width: 300px;
    overflow: auto;
    overflow-x: hidden;
    border:1px solid #c6c5c5;
    overflow-y: auto;
  }

  .cloned .s4 i:hover {
    cursor: pointer;
  }

  .cloned .s7 {
    font-size: 1.1rem;
    color:var(--font-color)!important;
    padding-left: 3px;
    margin-left: 0px!important;
  }

  .cloned .badge {
    margin-left: 0px!important;
    display: none;
  }

  .cloned .param {
    /* padding-left: 3px; */
    /* color: var(--font-higlight)!important; */
  }

  .cloned i {
    font-size: 1rem;
    margin-left: 3px!important;
  }

  .deactivated {
    opacity: .4;
    cursor: none;
    pointer-events: none;
  }

  i.visibility.deactivated {
    opacity: 1!important;
    cursor: pointer;
    pointer-events: auto!important;
  }

  .tabs .tab a:focus,
  .tabs .tab a:focus.active {
    background-color: unset!important;
  }

  .tabs {
    background: black!important;
  }

  #table2 .table-responsive {
    margin-bottom: 30px;
  }

  .slider .noUi-base {
    height: 4px;
  }

  .slider .noUi-base {
    height: unset;
  }

  .slider .noUi-horizontal {
    height: 2px;
  }

  .mapboxgl-ctrl-icon.mapboxgl-ctrl-compass {
    display: none!important;
  }

  /* Click any category to show/hide */
  .instructions.i_show_hide,.units
  {
    padding-left: 8px!important;
  }
  .instructions_show_hide {
    width: 100%;
    font-size: .8rem;
    color: #cb810f;
    margin-top: 8px;
    /* margin-top: 10px; */
  }

  .slider_val
  {
    margin-left: 5px;
    color:orange!important;
    font-weight: bold;
  }
  .instructions {
    font-size: 1rem;
    color: var(--font-color);
    margin-top: .5rem;
    /* margin-bottom: .5rem; */
    width: 100%;
    padding-left: 0px!important;
  }

  svg.buckets,
  svg.landcover_legend {
    margin-left: 5px;
  }



  .mapboxgl-ctrl-scale {

    border: 1px solid grey!important;


    margin-right: 10px;
  }

  .mapboxgl-ctrl-scale .map-position span {
    color: #9d9797;
    margin-right: 10px;
    display: inline;
  }

  .metric-scale::after,
  .metric-scale::before {
    content: '|';
    height: 10px;
    position: relative;
    top: 9px;
    right: 2px;
  }

  .metric-scale::after {
    right: 14px;
    position: absolute;
    top: 30px;
  }

  .metric-scale {
    border-bottom: 1px solid var(--font-higlight);
    width: 100%!important;
  }

  .select-wrapper input.select-dropdown {
    border-bottom: unset!important;
    height: unset!important;

    line-height: 22px!important;
    margin-top: 4px;

    font-weight: 100;
    color: var(--font-color);
    margin-bottom: 3px;
    /* margin-left: 5px; */
    /* padding-bottom: 5px; */
  }

  .dropdown_info {
    margin-top: 5px;
    margin-bottom: 3px;
    /* font-size: .75rem; */

  }


  .print_map,
  .blayer,
  .map_legend_control {

    border: unset;
    padding: 5px;
    /* margin: 2px; */
    /* border-radius: 13%; */
    color: black;
  }

  .print_map i,
  .blayer i,
  .change_modal_ctrl i,
  .map_legend_control_ctrl i {
    /* margin-top: 2px; */
    /* font-size: 18px; */
    font-size: 1.5rem;

  }

  .blayer_ctrl.active button i,.map_legend_control_ctrl.active button i
  {
    color: var(--font-higlight)!important;
  }

  .mapboxgl-ctrl>button:hover {
    background-color: var(--font-color);
    cursor: pointer;
  }

  .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
    margin: 10px 5px 2px 2px;
    float: right;
    border: unset;
    outline: 1px solid gray;
    height:100%;

  }
  .mapboxgl-ctrl-group
  {
    display: flex;
  }
  .print_ctrl>.mapboxgl-ctrl-icon,
  .blayer_ctrl>.mapboxgl-ctrl-icon,
  .change_modal_ctrl>.mapboxgl-ctrl-icon,
  .map_legend_control_ctrl>.mapboxgl-ctrl-icon {
    position: relative;
    /* left: 2px; */

  }
  .mapboxgl-ctrl-compass
  {
    display: none!important;
  }
  .city_active {
    background: #979700;
  }

  .popper-popup-highlight {
    display: none;
  }

  #stats_modal .modal-close {
    /* display: none; */
  }

  .mapboxgl-popup {
    max-width: 30vw;
  }


  .mapboxgl-popup .title span::not(:first-child)
  {
    font-size: .8rem;
  }
  .mapboxgl-popup .title span:first-child,
    .pa_info .title span:first-child {
    /* color: #bbb6b6; */
    text-align: left;
    float: left;
    font-size: .9rem;
    margin-right: .7rem;
    max-width: 80%;
    color: #009688 !important;
  }



  .query_div {}

  .query_div_options div {
    display: inline-block;
    font-size: 1rem;
    margin-right: 10px;
    margin-left: 0px;

    padding: 2px;
    text-decoration: underline;

    text-decoration-color: #989ca3;
  }

  .query_div_options div:hover {
    cursor: pointer;
  }

  .query_div .selected {
    text-decoration: underline;
    text-decoration-color: var(--font-higlight);
  }

  .pa_close_popup,
    .close_popup

    {
    font-size: 1.7rem;
    color: var(--font-color);
  }
/* storing the close icon */
  .pa_info .t_title>span
{
position: absolute;
right: 7px;
}

.pa_close_popup
{
position: absolute;
    right: 7px;
}
  .pa_close_popup,.close_popup:hover {
    cursor: pointer;
  }

  .category_legend_icons>span {
    float: left;
  }

  .tab_data {
    padding-right: 0px;
    padding-left: 0px!important;
  }

  .row .col.s12 {
    padding-right: 0px;
  }

  .filter {
    margin-top: 2rem;
    padding-left: 5px;
  }

  .filters_li {
    /* display: none; */
    border: 1px solid grey;
    margin: 10px;
    padding: 3px;
  }

  .min_max_avg span {
    margin: 5px;
    font-size: .9rem;
  }

  .min_max_avg {
    text-align: center;
    width: 100%;
  }

  .tab_data>div {
    margin-left: 0px!important;
  }

  .filters_container {
    display: none;
  }

  .filters_li .title {
    font-size: 1.3rem;
    width: 100%;
    float: right;
  }

  .open_table:hover {
    cursor: pointer;
  }

  .select-dropdown.dropdown-content li:hover {
    background-color: rgb(243, 182, 13);
    color: white;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #ffc107;
    -webkit-box-shadow: 0 0 1px rgb(255 255 255 / 50%);
  }

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 6px;
  }



  .material-tooltip > span {
    font-size:1rem;
    padding:10px;
  }

  .circles_svg_container
  {
    display: inline-table;

  }
  svg.circles_svg,svg.landcover_legend
  {
    /* in order to avoid duplicates on letters (??) */
    fill:none;
  }

  svg.landcover_legend
  {
    /* border: 1px solid tomato; */
  }
  /* .popper-popup.scale */
  /* { */
    /* font-size: .9rem; */
    /* min-width: 220px; */
  /* } */
  .image-list-item {
    display: flex;
    align-items: center;
    margin-right: 5px;
        margin-top: 5px;
  }

  .image-list-item img {

    height: 35px;
    margin-right: 5px;

    margin-top: 6px;
  }
  .switch label .lever
  {
    background-color: gray!important;
  }
  #map
  {
    border-top: 1px solid gray;
  }
  .cloned i:hover
  {
    cursor: pointer;
  }
  path.domain
  {
   opacity: 0;
  }



  .mapboxgl-ctrl-bottom-right
  {
    bottom:70px!important;
  }

  .right_messages .cloned >* {
    /* outline: 1px solid red; */
  }
  .params_select
  {
    display: none;
    margin-bottom: 10px;
  }

  .params_select .collection .collection-item
  {
    line-height: 1.1rem!important;
    padding: 9px 10px!important;
  }
  .params_select .collection {
    max-height: 300px;
    overflow: auto;
    border: 1px solid gray;
    margin: 5px;
    width: 98%;
  }
  .params_select ul li.selected
  {
    background-color: var(--font-higlight)!important;
  }
  .params_select ul li:hover
  {
    cursor: pointer;
    background-color: gray;
  }
  .change_param_li
  {
    text-decoration: underline;
    text-decoration-color: #ff9800;
    text-decoration-thickness: 2px;
  }
  .change_param_li:hover
  {
    cursor: pointer;
  }
  .discover_city
  {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .modal .ul_references
  {
    border: unset;
    font-size: .9rem;
  }

  .modal .ul_references li
  {
    border: 0px;
    background-color:unset;
    padding: 5px;
  }
  ul.queryable_layers_list
  {
    position: relative;
  }
  ul.collapsible > i.show_hide_lateral
  {
    /* display: none; */
  z-index: 11;
        top: -1px;
        position: absolute;
        right: 0px;
        border-radius: 50%;
        border: 1px solid #bdb6b3;
        background: #ff9800;
        color: black;
        font-size: 1.5rem!important;
    }

  .legend_container
  {

      outline: 1px solid gray;

      outline: 1px solid white;
              display: flex;
              align-items: center; /* Vertically center the content */

  }

  .legend_container .left img
  {
      display: block; /* Remove default inline behavior */
              max-width: 100%; /* Ensure the image doesn't exceed the line's width */
              height: auto; /* Maintain the image's aspect ratio */
  }
  .legend_container .left
  {
      width: 30%;
      /* because we have svg setup at 32px.. */
      height: 27px;
      position: relative;


  }


  .legend_container .right
  {
      width: 70%;
      float:left;
      margin-left: 10px;
  }


    .map_container{
      display: block;
    }
    .charts
    {
       visibility: hidden;
      border: 1px solid var(--bg-color);
      display: flex;
       /**
     * Rotate the main axis so that the children
     * are laid out vertically, the same as in the
     * above "Side bar" example.
     */
    flex-direction: column;

    /**
     * Instead of pushing the children apart, as in
     * previous examples, we will group them together
     * in the center of their container.
     */
    /* justify-content: center; */

    /**
     * Align the children in the center, along
     * the main axis. Because the direction is
     * "column" this has a similar effect as setting
     * text-align: center.
     */
    /* align-items: center; */
    align-items: left;


    padding: 10px;

    }
    .leftBar
    {
      width: 20vw;
      outline:1px solid var(--bg-color);
    }
    .leftBar >div
    {

      margin: 20px;
    }

    .wrapper {
      display: grid;
      height: 100%;
      grid-template-columns: 1fr 3fr 1fr;

      grid-gap: 10px;

    }

    .box,.sub {
    /*   background-color: #444; */
      color: #fff;
      border-radius: 5px;
      padding: 20px;
      font-size: 150%;
      border: 1px solid var(--border-color);
    }

    .sub
    {
      /* background-color: orange; */
      display: inline-grid;

    }
    .sub_a
    {

    }
    .box.left
    {
      grid-gap: 10px;

      display: inline-grid;
      grid-template-rows: 1fr 1.5fr;


    }

    .box .siteHeader__item.is-site-header-item-selected
    {
      margin:12%;

    }
    .symbology_container
    {

      padding-top: 12px;
      height: 0px;

    }
        .msg.right_messages .legend_content
    {
      display: none;
    }
    .sidenav .legend_content
    {
      margin-left:0px;
    }

    .legend_content.on
    {
      display: inline-block;
      width: 95%;

    }
  .sidenav .legend_content .symbology_container
  {
    max-height: 450px;
    overflow: auto;
    /* overflow-x: hidden; */
    /* margin-right: 5px!important; */

    /* we let circles, rects.. have space.. */
    padding-left: 6px!important;
    /* padding-bottom: 4px; */
  }
  .sidenav .legend_content .symbology_container_obj object{
    /* margin-top: 7px; */
  }
  .sidenav .legend_content .symbology_container_obj
  {
    max-height: unset;
  }

  .sidenav .legend_content .symbology_container_obj li.collection-item
  {
    padding: 9px 0px!important;
  }
    .legend_content .symbology_container svg,
    div.legend_content > div.symbology_container > svg
    {
      display: none;
    }
    .legend_content.on .symbology_container svg,
    .legend_content.on .symbology_container svg
    {
      display: block;
    }
    .test_centered .busy-load-container-item
{
    color: #f7f7f7!important;
    opacity: .9;
    background-color: #333333!important;
    padding: 10px!important;
    /* border: 2px solid tomato!important; */
}
.test_centered .spinner-accordion>div
{
    color:white!important;
}
.msg
{
    position: absolute;

    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    /* max-height: 90px; */
    z-index: 9999;
}

.test_centered
{
  top: 50%;
}
.messages
{
  top: 1vh;
}
.dataTables_scrollHead >div
{
  width: inherit!important;
}
.right_messages,#menu
{
  max-width: 25vw;
  /* width: 18vw; */
  width: auto;
  height: auto;
  right: 20px;
  left:unset;
  top: 10%;
  display: grid;
  background-color: var(--bs-body-bg);
  justify-content: left;

}
.msg,
.maplibregl-control-container >div
{
  background-color: #171818;
  color: #dee2e6;
  /*  var(--bs-body-color); */
}
.mapboxgl-ctrl-top-right
{
  background-color: unset!important;
  background: var(--bs-body-color);
}
.mapboxgl-ctrl-top-right>div
{

  background: var(--bs-body-color);
}
.mapboxgl-popup-content
{
  max-width: 300px;
  background: var(--bs-body-bg)!important;
}
.mining_wdpa_popup .mapboxgl-popup-content
{
  background-color: #521429 !important;
  border: 2px solid #a79e9c;
}

.right_messages_pa {
  width: 340px;
  /* height: auto; */
  max-height: 90vh;
  right: 20px;
  left: unset;
  bottom: 1%;
  overflow-y: auto;
  overflow-x: hidden;
}
 .right_messages_pa .highcharts {
  display: none;
 }
 .right_messages_pa .pa_info
 {
  /* same height as parent */
  height: 90vh;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  width: inherit;
  border:1px solid gray;
  overflow: auto;
 }
 .small_msg
 {
  font-size: .8rem;
 }
  /* .right_messages_pa .pa_info  */
  .pa_name
  {
    font-size: 1.5rem;
    font-weight: 300;
  }
.spinner-accordion
{
    margin:unset!important;
}
.lateral_legend_container
{
  padding: 5px;


    /* margin-right: 15px; */
}
.main_header
{
  min-width:300px;
}
.main_header .expand_legend:hover
{
  cursor: pointer;
}
.main_header .expand_legend
{
  margin-right: 13px;
  transform: rotate(90deg);
}

.main_header .expand_legend:hover
{
  cursor: pointer;
}
.main_header .expand_legend.on
{
  transform: rotate(270deg);
}



.main_headersss span::after{
  content: "";
    display: block;
    border-left: 7px solid #555;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.right_messages .content
{
  display: none;
}
.right_messages .content.expanded
{
  display: block!important;
}

.right_messages .lateral_legend_container .legend_content,
.sidenav .symbology_container,
.sidenav .symbology_container_obj
{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: 10px; */
            /* grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr; */

            grid-auto-rows: auto; /* Automatically size rows based on content */
/*            grid-template-rows:repeat(4, 1fr); */
  grid-row-gap: 5px;
    grid-column-gap: 3px;
  align-items: center;
  width: 100%;
}

.sidenav .symbology_container.single,
.cloned .legend_content.single
{
  grid-template-columns: repeat(1, 1fr);
}
.sidenav .symbology_container_obj.single>div,
.sidenav .symbology_container.single>div,

.cloned .legend_content.single>div
{
  grid-template-columns:.5fr 8fr;
}
.right_messages .lateral_legend_container>div

{
  display:grid;

   grid-template-columns: repeat(1, 1fr);

  align-items: center;
  /* grid-gap: 10px; */


}
.right_messages .header_btns
{
    /* outline: 1px solid red; */
}
.right_messages .header {
    grid-column: span 3;
    grid-template-columns:70% 30%!important;
    color: white;
    margin-bottom: 10px;

}
.gridded_li
{
    display: grid;
    grid-template-columns: 5fr 1fr;
    grid-gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.gridded_li_controls
{
  display: inline-block;
}
li.gridded_li>div {
  margin: 5px;
  color:#6e6a6aad!important;
}
.gridded_li_controls i
{
  font-size: 1rem;
}
.symbol
{
/* width:10px; */
/* height:10px; */
/* margin-right:5px; */
/* display: inline-block; */

}
.symbol.pattern
{
  width: auto;
  height: auto;
}

.symbol.pattern img
{
  width: 15px;
  height: 15px;
}

.symbol
{
  width: 1rem;
  height: 1rem;
  /* width:15px; */
  /* height:15px; */
}
.legendSvg .symbol
{
  /* not working? */
  width:auto;
height:35px;

}
/* left side legend bigger than right side */
.symbology_container_obj .symbol
{
  /* width: 20px; */
  /* height: 35px; */
  /* width: 34px; */
  /* height: 34px; */
}

.legend_content div ,
.sidenav .symbology_container_obj>div,
.sidenav .symbology_container>div
{
        display: grid;
        /* grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); */
        grid-template-columns:repeat(2, minmax(15px, auto));
        grid-auto-rows: auto; /* Automatically size rows based on content */
        justify-content: left;
        align-items: center;
        font-size: 1rem;
        grid-column-gap:5px;
        /* outline: 1px solid gray */

}

.header_title
{
margin-left: 0;
padding-left: 0px;
font-weight: 500;
color:var(--font-higlight)!important;
}
.cloned .header .param_container {
font-size: 0.9rem;
grid-column:1/-1;
}

.cloned .param {

margin: .5rem;
margin-left: unset;
}

.cloned .header .param_container .filter {

display: none;
margin-top: 0px;
}
.show_hide_lateral
{
position: absolute;

z-index: 11111;

border:1px solid gray;
height: 1.3rem;
}
.show_hide_lateral i
{
 font-size: 1.2rem;

}
.sidenav .symbology_container ul.collection
{
  margin:0px!important;
}
.sidebar_controler>div
{
 margin:.8rem;
}
.sidebar_controler_icon
{



    height: 100%;

    align-items: center;

    border: 0;
    z-index: 2;
    outline: none;

    display: grid;
    justify-content: right;


}
.sidebar_controler_icon:hover
{
  cursor: pointer;
}
.sidebar_controler_icon i
{
  transform:rotate(90deg);
}

.sidebar_controler_icon.collapsed i
{
  transform:rotate(270deg);
}
.sidebar_controler_icon.collapsed
{
  height: 100vh;
}
.sidebar_controler_icon.collapsed span
{
  top: 17px;
  position: absolute;
}
/* Tabs
====================================*/
.tabs-nav {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
  background: var(--bg-color);
  }

  .tabs-nav li {
  float: left;
  line-height: 38px;
  overflow: hidden;
  padding: 0;
  position: relative;
  margin-top: 8px;

  }

  .tabs-nav li a {
  background-color: var(--bg-color);
  border: 1px solid #555555;
  /* border-right: none; */
  color: #8db2e5;
  font-weight: 500;
  display: block;
  letter-spacing: 0;
  outline: none;
  padding: 15px 20px;
  text-decoration: none;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  line-height: 18px;

  }

  /* .tabs-nav li:first-child a { border-left: 1px solid #e0e0e0; } */
  /* .tabs-nav li:last-child a { border-right: 1px solid #e0e0e0; } */



  .tabs-nav li i:before { color: #909090; }
  .tabs-nav li span { margin-left: -7px; }

  .tabs-nav li i {opacity: 0.64; filter: alpha(opacity=64); margin: 10px 0 0 0; }

  .tab-content {padding: 20px;}
  .tabs-container {
  border-top-width:1px;
  border-right-width:0px;
  border-bottom-width:0px;
  border-left-width:0px;
  margin: -1px 0 0px;
  overflow: hidden;
  width: 100%;
  line-height: 21px;
  display: grid;
    grid-template-columns: auto 25px;
  }
  .mapboxgl-popup-content .close_popup,.mapboxgl-popup-content .pa_close_popup {
    /* top: -12px; */

    position: absolute;

    /* right: -15px; */
    border-radius: 50%;
     border: 1px solid #bdb6b3;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 1.2rem!important;

    top: -.5rem;

    right: -.6rem;
}
.switch label .lever:before, .switch label .lever:after {

  width: 14px!important;
  height: 14px!important;
  top:0px!important;

}
.switch_container:hover
{
  cursor: pointer;
}
.switch_container
{
  padding: 10px 0px;
}
.sidenav .symbol_container:hover
{
  cursor: pointer;
}
.symbol_container.off
{

}
.symbol_container
{
  display: flex;
  align-items: left;
  margin-bottom: 5px;
  margin-right: 10px;
}
.symbol_container .symbol
{
  width: 1rem;
  height: 1rem;
  margin-right: 5px;
}
li[val="all_wdpa_filtered"] .symbol_container
{
  margin-left: 10px;
}
.slider_text_container
{
  display: none;
}

.highlight
{
  text-decoration: underline;
  text-decoration-color: #ff9800;
  text-decoration-thickness: 2px;
font-weight: 300;
}
.pa_map_popup
{
  width: 100%;;
}
.pa_map_popup .maplibregl-popup-content
{
  border: 1px solid gray;
}
.right_messages_pa .highcharts,
.pa_map_popup .highcharts
{
  width: 100%;
  min-height: 200px;
  background-color: black!important;
}

.highcharts-legend-item
{
  font-weight: normal!important;
}
svg.rect_container_container
{
  position: absolute;
  z-index: 10;
}
.right_messages>div.commodities
{
  margin-top: 5px;
}
.right_messages >div
{
  display: inherit;
  /* width: 100%; */
  width: inherit;
padding-left: 5px;
  margin-bottom: 10px;
  /* margin: 3px; */
}
.right_messages .both_filters_info
{
  display: inline;

}

.legend_content div ,
.sidenav .symbology_container_obj>div,
.sidenav .symbology_container>div
{
        display: grid;
        /* grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); */
        grid-template-columns:repeat(2, minmax(15px, auto));
        grid-auto-rows: auto; /* Automatically size rows based on content */
        justify-content: left;
        align-items: left;
        font-size: 1rem;
        /* grid-column-gap:5px; */
        /* outline: 1px solid gray */

}

.mining_wdpa_container .labels_container>div,
.mining_wdpa_container .labels_container
{
  display: block;


}



.labels_params >div
{
  display: grid;
  grid-auto-rows: auto; /* Automatically size rows based on content */
  grid-template-columns:repeat(2, minmax(auto, auto));
  grid-gap: 5px;
  align-items: left;
  margin: 10px;
}
.sidenav .list-group-item:hover,.checkbox_label_container:hover
{


  cursor: pointer;
}


.msg.messages {
  padding: 10px;
  color: white!important;
  background: #0b4b45!important;
  border: 2px solid;
  font-size: .9rem;
  /* top: -100px; */
  display: grid;
  text-align: center;
  left:24vw!important;
}
.svg_legend.wdpa_iucn path
{
  opacity: .7;
}
.labels_container,
.symbol_param_container
{

  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid #524949;
  background: #8080803d;
}
.labels_container .form-select.right_messages>div
{
  display: none;
  margin-top: 5px;
  margin-bottom: 5px;
}
.labels_container,
.labels_container .form-switch,
.labels_container label
{
/* background-color: #e8e6ec!important; */
}


.labels_container:hover,.labels_container label:hover
{
  cursor: pointer;
}
.notowrkinglabels_container .form-switch .form-check-input
{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29/%3e%3")
}
.right_messages .user_info
{
      font-weight: 300;
font-size: small;
margin-bottom: 5px;
}

.deactivated
{
  opacity: .3;
}

body .off
{
  display: none!important;
}
/* .sidenav .group.accordion-item.off
{
  display: none;
 }
 */


.highcharts-credits{
  display: none;
}
.right_messages_pa .show_more .title:hover
{
  cursor: pointer;
}
.right_messages_pa .show_more .title
{

    text-decoration-line: underline;
    /* text-decoration-style: dotted; */
    text-decoration-color: #03A9F4;
    text-decoration-thickness: 2px;
    text-decoration-skip: spaces;
}
.right_messages_pa .show_more .list-group-item
{
  font-size: .9rem;
  padding: 5px;

  margin-bottom: 2px;
}
.right_messages_pa .show_more .list-group-item .name
{
  font-weight: 300;
}

.gridded
{
    display: grid;
    grid-template-columns: 2fr .5fr 1fr;
    grid-gap: 1px;
    align-items: center;
    margin-bottom: 1px;
}
.gridded>span
{
  display: inline-block;
}
.legendCells text {
  font-size: .9rem;

  fill: var(--bs-body-color);
}
.row.country_stats>div {
  max-height: 70px;
  overflow: auto;
  margin-bottom: 10px;
}

.row.country_stats>div b
{
  font-size: .9rem;
  font-weight: 300;
  color: #04cbae;
}

.row.country_stats hr
{
  margin: 0.1rem 0px;
}

.accordion-button {

  color: var(--bs-body-color)!important;
  background-color: #0b4b45!important;

}
.more_info_pa
{
  color: tomato;
  text-decoration: underline;
  text-decoration-thickness: 2px;
    text-decoration-color: #E91E63;
}
.more_info_pa:hover
{
  cursor: pointer;
}




.both_filters_info {
  font-size: .8rem;
}
.msg.messages .close_container
{
  position: absolute;
    top: -1px;
    right: -7px;
    text-align: right;
    font-size: .5rem;
}
.msg.messages .close_container:hover
{
  cursor: pointer;
}
.msg.messages .close_container i
{
  font-size: 1.3rem;
}



.highcharts-legend-item text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svg_legend.all_wdpa_filtered.off
{
  display: none;
}
.slider_container
{
  margin-left: 10px;
}

.sidenav .fas.on {
  color:gold!important;
}
.dataTables_paginate:hover
{
  cursor: pointer;
}

.table_container .dt-container
{
  max-height: 55vh;
  overflow: auto;
  overflow-x: hidden;
}
.dt-info
{
  font-size: .8rem;
  background: unset;
  margin-bottom: 5px;
  margin-top: 5px;
}

.dt-search label
{

  margin-right: 7px;
}

.table_tooltip .tooltip-inner {
  font-size: 1rem;

  background-color: #4e7126;
  border-radius: unset;
  color: white;
  border: 1px solid white;
}

.table_owners_tooltip .tooltip-inner
{
  font-size: 1rem;

  background-color: #7c260c;
  border-radius: unset;
  color: white;
  border: 1px solid white;
}
.table_warning
{
  margin-top: 5px;
  padding-left: 3px!important;
  padding: 5px;;
  font-size: .9rem;
  background-color: #333030;
    border: 2px solid #184f1a;
}

.group.accordion-item .accordion-collapse
{
  margin-left: 5px;
  margin-right: 5px;
}

.table_container tbody tr:hover
{
  background: #262b48;
}
.owners_stats.table_container tbody tr:hover
{
  background: unset!important;
  pointer-events:'none';
}
.form-switch .form-check-input
{
  /* background-color: #048f82!important; */
}

.mining_wdpa_container .symbol_container
{
  /* display: none!important; */
}
span.label {
  text-align: left!important;
  margin-right: 10px;
  color: #a89d9b;
  font-weight: 300;
  font-size: 1rem;
}

.msg.messages.info_filtering
{
  text-align: unset;
}

.msg.messages.info_filtering h2
{
  text-align: center;
}
.msg.messages.info_filtering small
{
  text-align: center;
  color:rgb(255, 136, 0);
}
.num_mines_warning
{
  color:tomato;
  font-size: 2rem;
}
.num_mines_warning_container
{
  display: flex;
  justify-content: left;
font-size: .9rem;
}

.sidenav .downloads .list-group-item {
  margin-left: 10px;

}

.sidenav .downloads .list-group-item a
{
  color: #e1d2d2cc;
  font-size: .9rem;
}

.charts_container
{
  width:100%!important;

}
.table_info
{
  display: inline!important;
  width: 100%;
  font-size: .9rem;
}

.ul_container ul
{
  list-style: none;
  padding-left: 0px;
  font-size: .9rem;
}

.ul_container ul li span.area
{
  font-size: .8rem;
}

.ul_container ul li span.country
{
  text-decoration: underline;
  text-decoration-color: #ff9800;
}

.ul_container ul b
{
  font-size: 1.1rem;
  font-weight: 300;
  color: #109386;
}
.right_messages .user_info{
  color: #e0aa08c4;
}

.inactive
{
opacity: .2;
pointer-events: none;
}

.pa_mining_stats .busy-load-container
{
  background: #009688!important;
}
.pa_mining_stats .spinner-accordion,
.pa_mining_stats .busy-load-text
{
  background-color: unset!important;
  background: unset !important;
}