/**
 * @author <ziad.khoury.hanna@oceandatalab.com>
 *
 * Copyright (C) 2014-2025 OceanDataLab
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
#seashot-dialog .Dialog-Content {
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  background: hsl(0, 0%, 0%);
  color: #eee;
}
#seashot-dialog h1 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.1em;
}
#seashot-dialog p {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.1em;
}
#seashot-dialog .SEAShot-CallToAction {
  margin-top: 6px;
  align-self: center;
  border-radius: 10px;
  padding: 10px 16px;
  background: linear-gradient(-30deg, hsl(300, 100%, 50%), hsl(240, 100%, 50%));
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  opacity: 0.9;
  transition: opacity 200ms;
}
#seashot-dialog .SEAShot-CallToAction:hover {
  opacity: 1;
}
#seashot-dialog .SEAShot-CallToAction .opens-in-new-tab-icon {
  vertical-align: baseline;
}

.SEAShot-MapViewOverlay {
  position: absolute;
  top: calc(50% - 256px);
  left: calc(50% - 256px);
  width: 512px;
  height: 512px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #000;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0.2, 0.5, 1.4);
}
.SEAShot-MapViewOverlay.hidden {
  opacity: 0;
}

.SEAShot {
  --base-font-size: 16px;
  --base-line-height: 1.21;

  --color-lightgrey-hs: 0, 0%;
  --color-lightgrey-hsl: var(--color-lightgrey-hs), 82.7%;
  --color-lightgrey: hsl(var(--color-lightgrey-hsl));
  --color-info-hs: 0, 0%;
  --color-info-hsl: var(--color-info-hs), 41.2%;
  --color-info: hsl(var(--color-info-hsl));
  --color-info-hs: 216, 100%;
  --color-info-hsl: var(--color-info-hs), 66.7%;
  --color-info: hsl(var(--color-info-hsl));
  --color-good-hs: 120, 100%;
  --color-good-hsl: var(--color-good-hs), 25.1%;
  --color-good: hsl(var(--color-good-hsl));
  --color-warning-hs: 38.8, 100%;
  --color-warning-hsl: var(--color-warning-hs), 50%;
  --color-warning: hsl(var(--color-warning-hsl));
  --color-error-hs: 354.9, 73%;
  --color-error-hsl: var(--color-error-hs), 52.2%;
  --color-error: hsl(var(--color-error-hsl));

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(0, 0%, 10%);
  display: grid;
  grid-template:
    "h h h h" min-content
    ". m f ." 512px
    ". t f ." 1fr / 0 512px 1fr 0;
  gap: 24px;
  font: 1rem / 1.21 'Helvetica Neue', helvetica, arial, sans-serif;
  overflow-y: auto;
  z-index: 100;
}
@media (max-width: 900px) {
  .SEAShot {
    grid-template:
      "h" min-content
      "m" min(512px, 100vw)
      "t" 1fr
      "f" 1fr / minmax(min-content, 1fr);
    gap: 0;
  }
}
.SEAShot[aria-hidden=true] {
  display: none;
}

.SEAShot-Header {
  --gap: 8px;

  position: sticky;
  top: 0;
  grid-area: h;
  background-color: hsl(0, 0%, 100%);
  padding: var(--gap);
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  border-bottom: 1px solid hsl(0, 0%, 80%);
  box-sizing: border-box;
  color: hsl(0, 0%, 0%);
  overflow: hidden;
  -webkit-user-select: none;
          user-select: none;
  z-index: 10000;
}
  .SEAShot-Header > .-left {
    justify-self: left;
  }
  .SEAShot-Header > .-right {
    justify-self: right;
  }
  .SEAShot-Header h1 {
    margin: 0 calc(2 * var(--gap));
    align-self: center;
    text-align: center;
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .SEAShot-HeaderButtonsWrapper {
    display: flex;
  }
  .SEAShot-HeaderButton {
    position: relative;
    margin: 0;
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 2px;
    background: hsl(0, 0%, 90%);
    font: inherit;
    cursor: pointer;
    overflow: hidden;
  }
  .SEAShot-HeaderButton select {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    display: block;
    appearance: none;
    opacity: 0;
    cursor: inherit;
  }
  .SEAShot-HeaderButton.-cancel,
  .SEAShot-HeaderButton.-user {
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .SEAShot:not(.-logged-in) .SEAShot-HeaderButton.-user {
    border-radius: 999px;
  }
  .-logged-in .SEAShot-HeaderButton.-user::after {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: green;
    border-radius: 50%;
    content: '';
  }
  .SEAShot-HeaderButton.-submit {
    margin-right: var(--gap);
    padding: 0 8px;
    visibility: hidden;
  }
    .SEAShot-HeaderButton:disabled {
      opacity: 0.5;
      cursor: auto;
    }
    .SEAShot-HeaderButton:not(:disabled):hover {
      border-color: hsl(0, 0%, 0%);
    }
    .SEAShot-HeaderButton:not(:disabled):active {
      background: hsl(0, 0%, 80%);
    }
    @media (max-width: 900px) {
      .SEAShot-Header {
        --gap: 4px;
      }
      .SEAShot-HeaderButton.-submit {
        visibility: visible;
      }
    }

.SEAShot-SyntoolWrapper {
  grid-area: m;
  position: relative;
  overflow: hidden;
  max-height: 512px;
}
.SEAShot-SyntoolWrapper .Syntool#syntool-instance {
  position: absolute;
  top: calc(50% - 512px / 2);
  left: calc(50% - 512px / 2);
  width: 512px;
  height: 512px;
  min-height: auto !important;
  overflow: hidden;
}
  .SEAShot-SyntoolWrapper .Syntool > :not(.MapView):not(.UIOverlay):not(#splashscreen),
  .SEAShot-SyntoolWrapper .olLayerGoogleV3-nn {
    display: none !important;
  }
  .SEAShot-SyntoolWrapper .DateTimeControl,
  .SEAShot-SyntoolWrapper .ScaleLineControl,
  .SEAShot-SyntoolWrapper .LatLonGridControlLabel {
    filter: drop-shadow(0 0 1px black);
  }
  .SEAShot-SyntoolWrapper .DateTimeControl {
    bottom: 30px;
    left: auto;
    right: 50px;
  }
  .SEAShot-SyntoolWrapper .ScaleLineControl {
    bottom: 30px;
    left: 50px;
    right: auto;
  }
  .SEAShot-SyntoolWrapper .ScaleLineControlTop,
  .SEAShot-SyntoolWrapper .ScaleLineControlBottom {
    pointer-events: none;
  }

.SEAShot-Loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(0, 0%, 100%);
  z-index: 1;

  opacity: 1;
  transition: 0.2s cubic-bezier(0.4, 0.2, 0.5, 1.4);
}
  .SEAShot-Loading[aria-hidden=true] {
    opacity: 0;
    pointer-events: none;
    transition-timing-function: ease;
  }

.SEAShot-TimelapseControls {
  grid-area: t;
  align-self: start;
  margin-top: -8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: hsl(0, 0%, 90%);
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .SEAShot-TimelapseControls {
    margin: 0;
    padding: 8px;
    padding-bottom: 0;
  }
}
.SEAShot-TimelapseControls:not(.-is-timelapse) .-for-timelapse {
  display: none;
}

.SEAShot-Controls {
  grid-area: f;
  margin-top: -8px;
  padding: 0;
  display: flex;
  flex-flow: column;
  color: hsl(0, 0%, 90%);
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .SEAShot-Controls {
    /* margin: 0; */
    padding: 8px;
    padding-bottom: 0;
  }
}
.SEAShot-TimelapseControls .SEAShot-Control {
  width: min-content;
  flex-flow: row wrap;
}

#SEAShot_timelapseResult {
  width: 100%;
}
#SEAShot_timelapseResult summary {
  cursor: pointer;
}
#SEAShot_timelapseResult ol {
  margin-top: 0;
}

.SEAShot-Req {
  font-weight: normal;
  color: var(--color-error);
  cursor: help;
}

.SEAShot-Button {
  align-self: end;
  margin: 8px 0;
  height: 44px;
  border: 1px solid hsl(0, 0%, 80%);
  border-radius: 2px;
  background: hsl(0, 0%, 90%);
  padding: 0 16px;
  font: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}
  @media (max-width: 900px) {
    .SEAShot-Button {
      align-self: stretch;
    }
  }
  .SEAShot-Button:disabled {
    opacity: 0.5;
    cursor: auto;
  }
  .SEAShot-Button:not(:disabled):hover {
    border-color: hsl(0, 0%, 0%);
  }
  .SEAShot-Button:not(:disabled):active {
    background: hsl(0, 0%, 80%);
  }

.SEAShot-Control {
  position: relative;
  margin: 8px 0;
  display: flex;
  flex-flow: column nowrap;
}
  .SEAShot-Control > label {
    flex: auto;
    white-space: pre;
    -webkit-user-select: none;
            user-select: none;
  }
  .SEAShot-ControlField {
    flex: auto;
    margin: 2px 0;
    padding: 2px;
    font: inherit;
  }
    .SEAShot-ControlField:not(.utags) {
      min-width: 100%;
      padding: 5px;
      box-sizing: border-box;
    }
    .SEAShot-ControlField:focus,
    .SEAShot-ControlField.focus {
      border-color: var(--color-info);
      outline: none;
    }
    .SEAShot-ControlField.warning {
      border-color: var(--color-warning);
      color: var(--color-warning);
      box-shadow:
        0 0 10px 3px hsla(var(--color-warning-hsl), 0.7),
        0 1px 5px hsla(var(--color-warning-hsl), 0.2) inset;
    }
    .SEAShot-ControlField:invalid,
    .SEAShot-ControlField.invalid {
      border-color: var(--color-error);
      box-shadow:
        0 0 10px 3px var(--color-error),
        0 1px 5px hsla(var(--color-error-hsl), 0.2) inset;
    }
  .SEAShot-ControlRequirements {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(100% + 8px);
    max-width: max-content;
    display: none;
    padding: 8px;
    font-size: small;
    z-index: 1;
    -webkit-user-select: none;
            user-select: none;
    pointer-events: none;
  }
    .SEAShot-ControlField:focus + .SEAShot-ControlRequirements,
    .SEAShot-ControlField.focus + .SEAShot-ControlRequirements {
      display: block;
    }
    .SEAShot-ControlField:focus-within + .SEAShot-ControlRequirements {
      display: block;
    }
    .SEAShot-ControlRequirement {
      --requirement-color: hsl(0, 0%, 25%);

      display: block;
      border-radius: 8px;
      background: var(--requirement-color);
      padding: 8px;
      color: hsl(0, 0%, 100%);
      font-size: small;
      white-space: pre-wrap;
      box-shadow: 0px 0px 15px var(--requirement-color);
    }
    .SEAShot-ControlRequirement + .SEAShot-ControlRequirement {
      margin-top: 10px;
    }
    .SEAShot-ControlRequirement.-info {
      --requirement-color: var(--color-info);
    }
    .SEAShot-ControlRequirement.-warning {
      display: none;
      --requirement-color: var(--color-warning);
      color: hsl(0, 0%, 0%);
    }
    .SEAShot-ControlRequirement.-error {
      display: none;
      --requirement-color: var(--color-error);
    }
    .SEAShot-ControlField:invalid + .SEAShot-ControlRequirements .SEAShot-ControlRequirement.-error,
    .SEAShot-ControlField.invalid + .SEAShot-ControlRequirements .SEAShot-ControlRequirement.-error,
    .SEAShot-ControlField.warning + .SEAShot-ControlRequirements .SEAShot-ControlRequirement.-warning {
      display: block;
    }

textarea.SEAShot-ControlField {
  overflow: auto;
}
.SEAShot-ControlField,
.SEAShot-ControlField.utags .list {
  border: 2px solid #ccc;
  border-radius: 2px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.SEAShot-ControlField.utags {
  width: initial;
  overflow: visible;
}
  .SEAShot-ControlField.utags > .tag.dupe {
    --tag-color: hsl(0, 100%, 93%);
    --tag-border-color: hsl(0, 100%, 23%);
    transform: scale3d(1.2, 1.2, 1.2);
  }
  .SEAShot-ControlField.utags > .tag.invalid {
    --tag-color: hsl(var(--color-error-hs), 93%);
    --tag-border-color: var(--color-error);
    --tag-selected-color: hsl(var(--color-error-hs), 47%);
  }
  .SEAShot-ControlField.utags > .tag.warning {
    --tag-color: hsl(var(--color-warning-hs), 93%);
    --tag-border-color: var(--color-warning);
    --tag-selected-color: hsl(var(--color-warning-hs), 47%);
  }

  .SEAShot-ControlField.utags .list {
    --item-vertical-padding: 0.2em;
    --list-max-size: 6;

    --suggestion-text-color: hsl(0, 0%, 0%);
    --suggestion-background: transparent;
    --suggestion-mark-color: hsl(65, 100%, 50%);

    max-height: calc(
      (var(--base-line-height) * 1em + var(--item-vertical-padding) * 2) *
        var(--list-max-size)
    );
    transition: 0.2s cubic-bezier(0.4, 0.2, 0.5, 1.4);
    overflow: auto;
  }
  .SEAShot-ControlField.utags .list[aria-hidden=true] {
    opacity: 0;
    pointer-events: none;
    transition-timing-function: ease;
  }
    .SEAShot-ControlField.utags .list > li {
      position: relative;
      background: var(--suggestion-background);
      padding: var(--item-vertical-padding) 0.5em;
      color: var(--suggestion-text-color);
      cursor: pointer;
    }
    .SEAShot-ControlField.utags .list > li:hover {
      --suggestion-text-color: hsl(0, 0%, 0%);
      --suggestion-background: hsl(200, 40%, 80%);
      --suggestion-mark-color: hsl(68, 100%, 41%);
    }
    .SEAShot-ControlField.utags .list > li[aria-selected='true'] {
      --suggestion-text-color: hsl(0, 0%, 100%);
      --suggestion-background: hsl(205, 40%, 40%);
      --suggestion-mark-color: hsl(86, 100%, 21%);
    }
      .SEAShot-ControlField.utags .list > li mark {
        background: var(--suggestion-mark-color);
        color: inherit;
      }