.sld_panel
{
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius);
  border-color: var(--surface-border);
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.sld_panel.expanded
{
  border-color: var(--primary-color);
}

.sld_panel .sld_header
{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.sld_field
{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 4px;
}

.sld_panel .box
{
  display: inline-block;
  width: 16px;
  height: 16px;
  border-style: solid;
  border-width: 1px;
}

.sld_panel .summary
{
  display: flex;
  font-family: monospace;
  align-items: center;
  gap: 4px;
  margin-left: 25px;
  margin-top: 2px;
  margin-bottom: 2px;
}

input[type=color]
{
  border-width: 1px;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  border-color: var(--surface-border);
}

@media (max-width: 500px)
{
  .sld_field
  {
    flex-direction:column;
    align-items: flex-start;
  }

  .sld_field > .ui-inputgroup
  {
    width: 100%;
  }
}

.code,
.code > .ui-inputfield
{
  font-family: monospace !important;
}

span.drag
{
  cursor: move;
}

div.ui-growl {
  left: 50%;
  top:40%;
  right: 0;
  margin-left:-150px;
}

@media (max-width: 1000px)
{
  #map_toolbar
  {
    flex-direction: column;
    justify-content:center;
  }

  #map_toolbar .buttons
  {
    padding-top: 4px;
  }
}

@media only screen and (max-width: 850px) 
{
  body .ui-button.ui-button-text-icon-left.mini,
  body .ui-button.ui-button-text-icon-right.mini
  {
    padding-left: 2px;
    padding-right: 2px;
  }
  
  body .ui-button.ui-button-text-icon-left.mini > .ui-button-text,
  body .ui-button.ui-button-text-icon-right.mini > .ui-button-text
  {
    visibility: hidden;
    width: 0;
    padding-right: 0;
    white-space:nowrap;
  }

  body .ui-button.ui-button-text-icon-left.mini > .ui-icon,
  body .ui-button.ui-button-text-icon-right.mini > .ui-icon
  {
    left: 8px;
  }
}

.cql_assistant
{
  color: var(--text-color);
  background-color: var(--surface-ground);
  border-color: var(--primary-color);
  border-width: 1px;
  border-style: solid;
  font-family: var(--font-family);
  font-size: 12px;
  padding: 4px;
}

.cql_assistant .cql_header
{
  font-weight: bold;
}

.cql_assistant a
{
  font-family: monospace;
  text-decoration: none;
  color: #8080ff;
}

.cql_assistant a:hover
{
  text-decoration: underline;  
}

.legend_cut_node
{
  font-style: italic;
  color: var(--primary-color);
}

body .geo_catalogue_button.ui-button.ui-button-icon-only
{
  width: 16px !important;
  height: 16px !important;
  margin-left: 4px;
}

body .geo_catalogue_button.ui-button.ui-button-icon-only .ui-button-text 
{
  padding: 0;
}

.geo_catalogue
{
  color: var(--text-color);
}

.geo_catalogue .current_map > a
{
  color: var(--surface-800);
}

.geo_catalogue .category
{
  border-width: 1px;
  border-style: solid;
  border-color: var(--surface-400);
  border-radius: var(--border-radius);
  margin-top:1rem;
}

.geo_catalogue .category:hover
{
  border-color: var(--surface-500);
}

.geo_catalogue .category_header
{
  background-color: var(--surface-50);
  padding: 1rem;
  border-radius: var(--border-radius);
}

.geo_catalogue .category.expanded > .category_header
{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color:var(--surface-300);
}

.geo_catalogue .category > .category_header .collapse_button
{
  display:none;
}

.geo_catalogue .category.expanded > .category_header .expand_button
{
  display:none;  
}

.geo_catalogue .category.expanded > .category_header .collapse_button
{
  display:inline;
}

.geo_catalogue .category > ul
{
  padding: 1rem;
  display: none;
  flex-wrap: wrap;
}

.geo_catalogue .category.expanded > ul
{
  display: flex;
}

.geo_catalogue .category li.category
{
  width: 100%;
}

.geo_catalogue .category li
{
  width: 100%;
}

.geo_catalogue .category > .category_header .image
{
  width: 3rem;
  height: 3rem;
  mask-repeat: no-repeat;
  mask-position: 0 center;
  mask-size: 32px 32px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 center;
  -webkit-mask-size: 100% 100%;
  background-color: var(--text-color);
  flex-shrink: 0;
}

.geo_catalogue .snapshot
{
  width: 100%;
  transition: transform .2s, border-color .2s;
  background-color: white;
  border: solid 1px var(--surface-300);  
}

.geo_catalogue .snapshot:hover
{
  transform: scale(0.98);
  border-color: var(--surface-700);  
}

.geo_catalogue .popularity
{
  background:var(--primary-color);
  color:var(--primary-color-text);
  border-radius:4px;
  padding:1px;
  padding-left: 4px;
  padding-right: 4px;
  white-space: nowrap;
}

.w200 
{ 
  width: 200px; 
}

@media (min-width: 800px)
{
  .geo_catalogue .category li
  {
    width: 50%;
  }
}

@media (min-width: 1200px)
{
  .geo_catalogue .category li
  {
    width: 33%;
  }
}

@media (min-width: 1600px)
{
  .geo_catalogue .category li
  {
    width: 25%;
  }
}

@media (min-width: 2000px)
{
  .geo_catalogue .category li
  {
    width: 20%;
  }
}