/* ============================================================
   GEOINFOWORLD
   Spatial Knowledge Browser v1
   ============================================================ */


/* ------------------------------------------------------------
   KNOWLEDGE NAVIGATION
   ------------------------------------------------------------ */

.giw-knowledge-nav {
  padding:
    11px 9px 3px;
}


.giw-earth-index {
  display:
    flex;

  gap:
    5px;

  overflow-x:
    auto;

  padding:
    1px 0 9px;

  scrollbar-width:
    none;
}


.giw-earth-index::-webkit-scrollbar {
  display:
    none;
}


.giw-earth-chip {
  flex:
    0 0 auto;

  min-height:
    31px;

  padding:
    5px 9px;

  cursor:
    pointer;

  border:
    1px solid
    rgba(180,210,240,.10);

  border-radius:
    999px;

  color:
    #94a9bd;

  background:
    rgba(255,255,255,.022);

  font-size:
    .68rem;

  transition:
    .15s ease;
}


.giw-earth-chip:hover {
  color:
    #e8f5ff;

  border-color:
    rgba(69,212,255,.28);

  background:
    rgba(69,212,255,.075);
}


.giw-earth-chip.is-active {
  color:
    #bcefff;

  border-color:
    rgba(69,212,255,.38);

  background:
    linear-gradient(
      135deg,
      rgba(69,212,255,.13),
      rgba(93,140,255,.08)
    );

  box-shadow:
    inset 0 0 18px
    rgba(69,212,255,.035);
}


/* ------------------------------------------------------------
   EXPLORE / ACTIVE MODE
   ------------------------------------------------------------ */

.giw-browser-modes {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    5px;

  margin-bottom:
    8px;
}


.giw-browser-mode {
  min-height:
    34px;

  padding:
    6px 8px;

  cursor:
    pointer;

  border:
    1px solid
    rgba(180,210,240,.10);

  border-radius:
    8px;

  color:
    #7f96aa;

  background:
    rgba(255,255,255,.018);

  font-size:
    .68rem;

  font-weight:
    680;

  letter-spacing:
    .075em;

  text-transform:
    uppercase;

  transition:
    .15s ease;
}


.giw-browser-mode:hover {
  color:
    #cce7f7;
}


.giw-browser-mode.is-active {
  color:
    #9ce8ff;

  border-color:
    rgba(69,212,255,.26);

  background:
    rgba(69,212,255,.075);
}


/* ------------------------------------------------------------
   ACTIVE LAYERS
   ------------------------------------------------------------ */

.giw-active-browser {
  display:
    none;

  padding:
    7px 9px 18px;
}


.giw-active-browser.is-visible {
  display:
    grid;

  gap:
    6px;
}


.giw-active-empty {
  padding:
    22px 14px;

  text-align:
    center;

  color:
    #687f94;

  font-size:
    .74rem;

  line-height:
    1.5;

  border:
    1px dashed
    rgba(180,210,240,.11);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.014);
}


.giw-active-layer {
  padding:
    9px;

  border:
    1px solid
    rgba(180,210,240,.10);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.022);
}


.giw-active-layer-head {
  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:
    8px;

  align-items:
    start;
}


.giw-active-layer-title {
  overflow:
    hidden;

  color:
    #d7e6f3;

  font-size:
    .76rem;

  font-weight:
    590;

  text-overflow:
    ellipsis;
}


.giw-active-layer-context {
  margin-top:
    3px;

  color:
    #698096;

  font-size:
    .63rem;
}


.giw-active-remove {
  width:
    25px;

  height:
    25px;

  cursor:
    pointer;

  border:
    1px solid
    rgba(180,210,240,.10);

  border-radius:
    6px;

  color:
    #73899c;

  background:
    rgba(255,255,255,.02);
}


.giw-active-remove:hover {
  color:
    #ffadb3;

  border-color:
    rgba(255,125,140,.20);
}


.giw-active-opacity {
  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    7px;

  margin-top:
    8px;

  color:
    #657d91;

  font-size:
    .61rem;
}


.giw-active-opacity input {
  width:
    100%;
}


/* ------------------------------------------------------------
   LAYER INFORMATION ACTION
   ------------------------------------------------------------ */

.giw-layer-info-button {
  min-height:
    26px;

  padding:
    3px 7px;

  cursor:
    pointer;

  border:
    1px solid
    rgba(180,210,240,.10);

  border-radius:
    6px;

  color:
    #7fa0b7;

  background:
    rgba(255,255,255,.018);

  font-size:
    .61rem;
}


.giw-layer-info-button:hover {
  color:
    #b9efff;

  border-color:
    rgba(69,212,255,.24);

  background:
    rgba(69,212,255,.055);
}


/* ------------------------------------------------------------
   LAYER INTELLIGENCE
   ------------------------------------------------------------ */

.giw-layer-intelligence {
  margin-bottom:
    11px;

  padding:
    13px;

  border:
    1px solid
    rgba(69,212,255,.16);

  border-radius:
    13px;

  background:
    linear-gradient(
      145deg,
      rgba(69,212,255,.055),
      rgba(93,140,255,.025)
    );
}


.giw-intelligence-eyebrow {
  margin-bottom:
    6px;

  color:
    #55d9ff;

  font-size:
    .61rem;

  font-weight:
    720;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


.giw-intelligence-title {
  margin:
    0;

  color:
    #f0f8ff;

  font-size:
    1rem;

  font-weight:
    650;

  line-height:
    1.3;
}


.giw-intelligence-path {
  margin:
    6px 0 12px;

  color:
    #8297aa;

  font-size:
    .67rem;

  line-height:
    1.4;
}


.giw-intelligence-grid {
  display:
    grid;

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

  gap:
    6px;

  margin-bottom:
    11px;
}


.giw-intelligence-stat {
  padding:
    7px 8px;

  border:
    1px solid
    rgba(180,210,240,.08);

  border-radius:
    8px;

  background:
    rgba(255,255,255,.018);
}


.giw-intelligence-stat span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    #60778b;

  font-size:
    .57rem;

  text-transform:
    uppercase;

  letter-spacing:
    .07em;
}


.giw-intelligence-stat strong {
  display:
    block;

  overflow:
    hidden;

  color:
    #b9cddd;

  font-size:
    .69rem;

  font-weight:
    570;

  text-overflow:
    ellipsis;
}


.giw-intelligence-actions {
  display:
    grid;

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

  gap:
    5px;
}


.giw-intelligence-action {
  min-height:
    32px;

  cursor:
    pointer;

  border:
    1px solid
    rgba(180,210,240,.10);

  border-radius:
    7px;

  color:
    #9db5c9;

  background:
    rgba(255,255,255,.022);

  font-size:
    .65rem;
}


.giw-intelligence-action:hover {
  color:
    #d8f5ff;

  border-color:
    rgba(69,212,255,.25);

  background:
    rgba(69,212,255,.055);
}


/* ------------------------------------------------------------
   EARTH CONTEXT
   ------------------------------------------------------------ */

.giw-earth-context {
  position:
    absolute;

  left:
    14px;

  bottom:
    51px;

  z-index:
    37;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  max-width:
    480px;

  padding:
    7px 9px;

  border:
    1px solid
    rgba(200,225,245,.13);

  border-radius:
    8px;

  color:
    #829aac;

  background:
    rgba(5,15,26,.72);

  backdrop-filter:
    blur(13px);

  font-size:
    .65rem;

  pointer-events:
    none;
}


.giw-earth-context strong {
  color:
    #ccefff;

  font-weight:
    590;
}


/* ------------------------------------------------------------
   SELECTED KNOWLEDGE LAYER
   ------------------------------------------------------------ */

.giw-layer.giw-intelligence-selected {
  border-color:
    rgba(69,212,255,.36) !important;

  box-shadow:
    inset 2px 0 0
    rgba(69,212,255,.65);

  background:
    rgba(69,212,255,.07) !important;
}


/* ------------------------------------------------------------
   SMALL SCREEN
   ------------------------------------------------------------ */

@media (max-width: 700px) {

  .giw-earth-context {
    display:
      none;
  }

}