*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  font-size: 16px;
  --width: 100%;
  --height: 100%;
  --scale: 1;
  --btnColor: rgb(61, 61, 61);
  --btnHoverColor: rgb(255, 255, 255);
  --sunsetleft: 95%;
  --sunsettop: 80%;
  --highlight-angle: 135deg;
  --form-font-size: clamp(0.8rem, 1.2vmin, 1rem);
  --modal-margin: 5%;
}

::-webkit-scrollbar {
  display: none;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont.woff2') format('woff2');
}

html {
  scroll-behavior: smooth;
  overflow: hidden;
  height: 100vh;
  max-height: 100vh;
  min-height: 31.25rem;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  min-height: 39.125rem;
  /*font-family: "Segoe UI", system-ui, sans-serif;*/
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0 0.25rem 0 0;
  background: #355c85;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  touch-action: manipulation;
}

a:link {
  color: blue
}

a:visited {
  color: blueviolet
}

a:hover,
a:focus {
  color: blue
}

a:active {
  color: blue
}

canvas {
  position: absolute;
  height: 100vh;
  width: 100vw;
  /*max-height: 100vh !important;*/
  top: 0;
  left: 0;
  z-index: 1;
}

.bg {
  width: 110vw;
  height: 110vh;
  max-height: 110vh;
  position: absolute;
  top: -5%;
  left: -5%;
  z-index: 0;
  background: rgb(255 255 255 / 100%);
  filter: blur(0.25rem);
  opacity: 1;
  overflow: hidden;
}

.weather-wrapper {
  position: absolute;
  display: flex;
  align-items: start;
  flex-direction: column-reverse;
  justify-content: start;
  width: clamp(23.4375rem, 26vw, calc(100vw * 0.28));
  height: fit-content;
  min-height: 280px;
  top: 10%;
  padding-bottom: 1rem;
  left: calc((50vw) - clamp(23.4375rem, 26vw, calc(100vw * 0.28))/2);
  z-index: 5;
}

.dragging * {
  cursor: grabbing;
}

.toprow {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  z-index: 8;
  margin-right: 1rem;
  margin-top: 0.5rem;
  margin-bottom: clamp(0.5rem, 1vmin, 1rem);
  width: calc(100% - 1rem);
  pointer-events: auto;
  touch-action: auto;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s ease;

  .title {
    margin-left: 1rem;
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--btnColor);
    filter: contrast(2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    touch-action: none;
    width: fit-content;
    z-index: 3;
  }

  .btns {
    display: flex;
    justify-content: end;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    gap: 0.5rem;
    pointer-events: auto;
    touch-action: auto;
  }
}

.panel-bg {
  border-radius: 0.875rem;
  background: linear-gradient(var(--highlight-angle),
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0.08) 100%);

  backdrop-filter: blur(1.25rem) saturate(130%);
  -webkit-backdrop-filter: blur(1.25) saturate(130%);

  border: 0.0625rem solid transparent;
  background-clip: padding-box;

  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3), 0 0 0 0.0625rem rgba(255, 255, 255, 0.05),
    inset 0 0.0625rem rgba(255, 255, 255, 0.15), inset 0 -0.0625rem rgba(0, 0, 0, 0.1);
}

.weather-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: grab;
  z-index: 0;

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.875rem;
    padding: 0.0625rem;
    background: linear-gradient(var(--highlight-angle),
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 0.0625rem;
    background: linear-gradient(var(--highlight-angle),
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%);
    pointer-events: none;
  }
}

#weather {
  position: relative;
  margin-left: 1rem;
  color: var(--btnColor);
  filter: contrast(2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  touch-action: none;
  width: 100%;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 3;

  span:not(#timeDisplay span) {
    margin-bottom: clamp(0.5rem, 1vmin, 1rem);
    color: var(--btnColor);
    display: flex;
    position: relative;
    align-items: center;
    pointer-events: none;
    gap: 0.25rem;

    img {
      position: relative;
      height: clamp(0.65rem, 0.65vh, 1rem);
      filter: grayscale(60%);
      pointer-events: all;
    }
  }
}

.btnChangeMode {
  width: 1.5rem;
  height: 1.25rem;
  filter: contrast(2) drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 1));
  outline: none;
  border: none;
  cursor: pointer;
  display: block;
  opacity: 1;
  background-color: var(--btnColor, rgb(207, 207, 207));
  transition: all 0.15s ease;

  &[data-disabled="true"] {
    opacity: 0.7;
    cursor: default;
    filter: none;
    transition: none;

    &:hover {
      filter: none;
      scale: 1;
      background-color: var(--btnColor);
      opacity: 0.7;
    }
  }

  &:hover {
    filter: drop-shadow(0.125rem 0.125rem 0.125rem rgba(0, 0, 0, 1));
    scale: 1.2;
    background-color: var(--btnHoverColor);
  }
}

.btnRealTimeMode {
  -webkit-mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.88 110.55' style='enable-background:new 0 0 122.88 110.55' %3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cpath d='M18.23,78.18c1.54.19,2.63,1.6,2.43,3.14-.19,1.54-1.6,2.63-3.14,2.43-2.04-.26-3.9-.74-5.57-1.43-1.72-.71-3.26-1.64-4.62-2.78h-.01c-1.28-1.07-2.41-2.29-3.36-3.61-2.55-3.52-3.93-7.82-3.96-12.1-.03-4.33,1.32-8.64,4.22-12.12.94-1.13,2.05-2.17,3.32-3.09,1.48-1.07,3.17-1.98,5.07-2.72,1.32-.51,2.72-.94,4.21-1.28,1.68-6.68,5.27-11.83,9.88-15.41,4.31-3.34,9.51-5.29,14.85-5.81,5.32-.51,10.8.39,15.71,2.75,1.55.74,3.04,1.63,4.45,2.66,1.7-2.07,3.79-3.82,6.17-5.12,2.98-1.63,6.38-2.55,9.99-2.55,5.76,0,10.97,2.33,14.75,6.11,3.77,3.77,6.11,8.99,6.11,14.75,0,2.54-.46,4.97-1.29,7.23-.87,2.34-2.14,4.49-3.74,6.34-.08.09-.16.17-.25.25.37,1.87.55,3.8.53,5.72-.05,4.82-1.36,9.63-4.01,13.16-1.73,2.31-3.96,4.18-6.63,5.68-2.57,1.44-5.57,2.53-8.93,3.31-1.51.35-3.02-.6-3.37-2.11-.35-1.51.6-3.02,2.11-3.37,2.84-.66,5.33-1.56,7.44-2.74,2.01-1.13,3.65-2.5,4.89-4.14,1.91-2.54,2.85-6.15,2.89-9.84.04-3.88-.9-7.77-2.74-10.6-.53-.81-1.11-1.55-1.72-2.21-2.76-2.97-6.27-4.27-9.9-4.3-2.64-.02-5.37.62-7.96,1.76-.58.28-1.15.59-1.72.93-1.72,1.01-3.42,2.24-5.15,3.66l-3.7-4.24c1.28-1.18,2.66-2.27,4.13-3.22,1.17-.76,2.39-1.44,3.65-2.02.5-.25,1.02-.49,1.53-.71-2.44-4.32-5.95-7.42-9.93-9.33-3.98-1.91-8.43-2.64-12.76-2.22-4.31.42-8.49,1.98-11.95,4.66-4,3.1-7.04,7.73-8.2,13.87l-.36,1.92-1.91.34c-1.87.33-3.55.78-5.02,1.35-1.42.55-2.69,1.23-3.8,2.03-.89.64-1.65,1.36-2.3,2.14-2.01,2.41-2.95,5.43-2.92,8.49.02,3.1,1.03,6.24,2.9,8.82.69.96,1.5,1.83,2.42,2.6h0c.92.78,1.97,1.41,3.16,1.9,1.2.52,2.58.88,4.11,1.07h0ZM65.9,32.58c1.71,1.88,3.21,4.04,4.45,6.49,1.22-.19,2.45-.29,3.66-.28,5.14.03,10.09,1.87,14,6.08.82.88,1.59,1.87,2.31,2.98.31.48.61.98.88,1.5.36-.66.68-1.34.94-2.06.61-1.64.94-3.43.94-5.3,0-4.2-1.7-8.01-4.46-10.76-2.75-2.75-6.56-4.46-10.76-4.46-2.66,0-5.15.67-7.3,1.85-1.8,1-3.38,2.35-4.66,3.96h0ZM51.38,14.53c-.99-.97-1-2.56-.03-3.55s2.56-1,3.55-.03l6.91,6.82c.99.97,1,2.56.03,3.55s-2.56,1-3.55.03l-6.91-6.82h0ZM78.54,2.52c-.01-1.38,1.11-2.51,2.5-2.52,1.38,0,2.51,1.11,2.52,2.5l.06,9.71c.01,1.38-1.11,2.51-2.5,2.52-1.38.01-2.51-1.11-2.52-2.5l-.06-9.71h0ZM106.52,12.04c.99-.97,2.58-.96,3.55.03s.96,2.58-.03,3.55l-6.91,6.82c-.99.97-2.58.96-3.55-.03s-.96-2.58.03-3.55l6.91-6.82h0ZM120.36,38.66c1.38,0,2.51,1.11,2.52,2.5.01,1.38-1.11,2.51-2.5,2.51l-9.71.06c-1.38,0-2.51-1.11-2.52-2.5-.01-1.38,1.11-2.51,2.5-2.52l9.71-.05h0ZM101.8,57.81c-.99-.97-1-2.56-.03-3.55.97-.99,2.56-1,3.55-.03l6.91,6.82c.99.97,1,2.56.03,3.55-.97.99-2.56,1-3.55.03l-6.91-6.82h0Z'/%3E%3C/g%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cpath d='M41.31,68.76v-15.85c0-1.33-.54-2.53-1.42-3.41-.88-.88-2.09-1.42-3.41-1.42s-2.53.54-3.41,1.42c-.88.88-1.42,2.09-1.42,3.41v30.48c-3.35,1.72-5.64,5.2-5.64,9.23,0,5.72,4.64,10.36,10.36,10.36s10.36-4.64,10.36-10.36c0-3.93-2.19-7.35-5.42-9.11,0,0,0-14.75,0-14.75ZM38.47,85.29c3.18.92,5.51,3.85,5.51,7.32,0,4.21-3.41,7.62-7.62,7.62s-7.62-3.41-7.62-7.62c0-3.48,2.33-6.41,5.51-7.32v-26.83c0-2.62,4.22-2.52,4.22,0v26.83ZM46.4,54.04v-2.24h5.85c.62,0,1.12.5,1.12,1.12s-.5,1.12-1.12,1.12h-5.85ZM46.4,60.16v-2.24h5.85c.62,0,1.12.5,1.12,1.12s-.5,1.12-1.12,1.12h-5.85ZM46.4,66.29v-2.24h5.85c.62,0,1.12.5,1.12,1.12s-.5,1.12-1.12,1.12h-5.85ZM46.4,72.41v-2.24h5.85c.62,0,1.12.5,1.12,1.12s-.5,1.12-1.12,1.12c0,0-5.85,0-5.85,0ZM46.4,78.54v-2.24h5.85c.62,0,1.12.5,1.12,1.12s-.5,1.12-1.12,1.12h-5.85ZM43.78,81.45c3.61,2.4,5.99,6.51,5.99,11.17,0,7.41-6,13.41-13.41,13.41s-13.41-6-13.41-13.41c0-4.76,2.48-8.94,6.21-11.32v-28.39c0-2.01.82-3.84,2.15-5.16,1.33-1.32,3.15-2.15,5.16-2.15s3.84.82,5.16,2.15c1.33,1.33,2.15,3.15,2.15,5.16v28.54h0Z' style='fill-rule: evenodd;'/%3E%3C/g%3E%3C/svg%3E");
  mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.88 110.55' style='enable-background:new 0 0 122.88 110.55' %3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cpath d='M18.23,78.18c1.54.19,2.63,1.6,2.43,3.14-.19,1.54-1.6,2.63-3.14,2.43-2.04-.26-3.9-.74-5.57-1.43-1.72-.71-3.26-1.64-4.62-2.78h-.01c-1.28-1.07-2.41-2.29-3.36-3.61-2.55-3.52-3.93-7.82-3.96-12.1-.03-4.33,1.32-8.64,4.22-12.12.94-1.13,2.05-2.17,3.32-3.09,1.48-1.07,3.17-1.98,5.07-2.72,1.32-.51,2.72-.94,4.21-1.28,1.68-6.68,5.27-11.83,9.88-15.41,4.31-3.34,9.51-5.29,14.85-5.81,5.32-.51,10.8.39,15.71,2.75,1.55.74,3.04,1.63,4.45,2.66,1.7-2.07,3.79-3.82,6.17-5.12,2.98-1.63,6.38-2.55,9.99-2.55,5.76,0,10.97,2.33,14.75,6.11,3.77,3.77,6.11,8.99,6.11,14.75,0,2.54-.46,4.97-1.29,7.23-.87,2.34-2.14,4.49-3.74,6.34-.08.09-.16.17-.25.25.37,1.87.55,3.8.53,5.72-.05,4.82-1.36,9.63-4.01,13.16-1.73,2.31-3.96,4.18-6.63,5.68-2.57,1.44-5.57,2.53-8.93,3.31-1.51.35-3.02-.6-3.37-2.11-.35-1.51.6-3.02,2.11-3.37,2.84-.66,5.33-1.56,7.44-2.74,2.01-1.13,3.65-2.5,4.89-4.14,1.91-2.54,2.85-6.15,2.89-9.84.04-3.88-.9-7.77-2.74-10.6-.53-.81-1.11-1.55-1.72-2.21-2.76-2.97-6.27-4.27-9.9-4.3-2.64-.02-5.37.62-7.96,1.76-.58.28-1.15.59-1.72.93-1.72,1.01-3.42,2.24-5.15,3.66l-3.7-4.24c1.28-1.18,2.66-2.27,4.13-3.22,1.17-.76,2.39-1.44,3.65-2.02.5-.25,1.02-.49,1.53-.71-2.44-4.32-5.95-7.42-9.93-9.33-3.98-1.91-8.43-2.64-12.76-2.22-4.31.42-8.49,1.98-11.95,4.66-4,3.1-7.04,7.73-8.2,13.87l-.36,1.92-1.91.34c-1.87.33-3.55.78-5.02,1.35-1.42.55-2.69,1.23-3.8,2.03-.89.64-1.65,1.36-2.3,2.14-2.01,2.41-2.95,5.43-2.92,8.49.02,3.1,1.03,6.24,2.9,8.82.69.96,1.5,1.83,2.42,2.6h0c.92.78,1.97,1.41,3.16,1.9,1.2.52,2.58.88,4.11,1.07h0ZM65.9,32.58c1.71,1.88,3.21,4.04,4.45,6.49,1.22-.19,2.45-.29,3.66-.28,5.14.03,10.09,1.87,14,6.08.82.88,1.59,1.87,2.31,2.98.31.48.61.98.88,1.5.36-.66.68-1.34.94-2.06.61-1.64.94-3.43.94-5.3,0-4.2-1.7-8.01-4.46-10.76-2.75-2.75-6.56-4.46-10.76-4.46-2.66,0-5.15.67-7.3,1.85-1.8,1-3.38,2.35-4.66,3.96h0ZM51.38,14.53c-.99-.97-1-2.56-.03-3.55s2.56-1,3.55-.03l6.91,6.82c.99.97,1,2.56.03,3.55s-2.56,1-3.55.03l-6.91-6.82h0ZM78.54,2.52c-.01-1.38,1.11-2.51,2.5-2.52,1.38,0,2.51,1.11,2.52,2.5l.06,9.71c.01,1.38-1.11,2.51-2.5,2.52-1.38.01-2.51-1.11-2.52-2.5l-.06-9.71h0ZM106.52,12.04c.99-.97,2.58-.96,3.55.03s.96,2.58-.03,3.55l-6.91,6.82c-.99.97-2.58.96-3.55-.03s-.96-2.58.03-3.55l6.91-6.82h0ZM120.36,38.66c1.38,0,2.51,1.11,2.52,2.5.01,1.38-1.11,2.51-2.5,2.51l-9.71.06c-1.38,0-2.51-1.11-2.52-2.5-.01-1.38,1.11-2.51,2.5-2.52l9.71-.05h0ZM101.8,57.81c-.99-.97-1-2.56-.03-3.55.97-.99,2.56-1,3.55-.03l6.91,6.82c.99.97,1,2.56.03,3.55-.97.99-2.56,1-3.55.03l-6.91-6.82h0Z'/%3E%3C/g%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cpath d='M41.31,68.76v-15.85c0-1.33-.54-2.53-1.42-3.41-.88-.88-2.09-1.42-3.41-1.42s-2.53.54-3.41,1.42c-.88.88-1.42,2.09-1.42,3.41v30.48c-3.35,1.72-5.64,5.2-5.64,9.23,0,5.72,4.64,10.36,10.36,10.36s10.36-4.64,10.36-10.36c0-3.93-2.19-7.35-5.42-9.11,0,0,0-14.75,0-14.75ZM38.47,85.29c3.18.92,5.51,3.85,5.51,7.32,0,4.21-3.41,7.62-7.62,7.62s-7.62-3.41-7.62-7.62c0-3.48,2.33-6.41,5.51-7.32v-26.83c0-2.62,4.22-2.52,4.22,0v26.83ZM46.4,54.04v-2.24h5.85c.62,0,1.12.5,1.12,1.12s-.5,1.12-1.12,1.12h-5.85ZM46.4,60.16v-2.24h5.85c.62,0,1.12.5,1.12,1.12s-.5,1.12-1.12,1.12h-5.85ZM46.4,66.29v-2.24h5.85c.62,0,1.12.5,1.12,1.12s-.5,1.12-1.12,1.12h-5.85ZM46.4,72.41v-2.24h5.85c.62,0,1.12.5,1.12,1.12s-.5,1.12-1.12,1.12c0,0-5.85,0-5.85,0ZM46.4,78.54v-2.24h5.85c.62,0,1.12.5,1.12,1.12s-.5,1.12-1.12,1.12h-5.85ZM43.78,81.45c3.61,2.4,5.99,6.51,5.99,11.17,0,7.41-6,13.41-13.41,13.41s-13.41-6-13.41-13.41c0-4.76,2.48-8.94,6.21-11.32v-28.39c0-2.01.82-3.84,2.15-5.16,1.33-1.32,3.15-2.15,5.16-2.15s3.84.82,5.16,2.15c1.33,1.33,2.15,3.15,2.15,5.16v28.54h0Z' style='fill-rule: evenodd;'/%3E%3C/g%3E%3C/svg%3E");
}

.btnTestMode {
  -webkit-mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 122.88 110.55' style='enable-background:new 0 0 122.88 110.55' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M30.21,98.01c0.31-1.63,1.89-2.71,3.53-2.39c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39 c-1.63-0.31-2.71-1.89-2.39-3.53L30.21,98.01L30.21,98.01z M18.23,78.18c1.54,0.19,2.63,1.6,2.43,3.14 c-0.19,1.54-1.6,2.63-3.14,2.43c-2.04-0.26-3.9-0.74-5.57-1.43c-1.72-0.71-3.26-1.64-4.62-2.78H7.32 c-1.28-1.07-2.41-2.29-3.36-3.61C1.41,72.41,0.03,68.11,0,63.83c-0.03-4.33,1.32-8.64,4.22-12.12c0.94-1.13,2.05-2.17,3.32-3.09 c1.48-1.07,3.17-1.98,5.07-2.72c1.32-0.51,2.72-0.94,4.21-1.28c1.68-6.68,5.27-11.83,9.88-15.41c4.31-3.34,9.51-5.29,14.85-5.81 c5.32-0.51,10.8,0.39,15.71,2.75c1.55,0.74,3.04,1.63,4.45,2.66c1.7-2.07,3.79-3.82,6.17-5.12c2.98-1.63,6.38-2.55,9.99-2.55 c5.76,0,10.97,2.33,14.75,6.11c3.77,3.77,6.11,8.99,6.11,14.75c0,2.54-0.46,4.97-1.29,7.23c-0.87,2.34-2.14,4.49-3.74,6.34 c-0.08,0.09-0.16,0.17-0.25,0.25c0.37,1.87,0.55,3.8,0.53,5.72c-0.05,4.82-1.36,9.63-4.01,13.16c-1.73,2.31-3.96,4.18-6.63,5.68 c-2.57,1.44-5.57,2.53-8.93,3.31c-1.51,0.35-3.02-0.6-3.37-2.11c-0.35-1.51,0.6-3.02,2.11-3.37c2.84-0.66,5.33-1.56,7.44-2.74 c2.01-1.13,3.65-2.5,4.89-4.14c1.91-2.54,2.85-6.15,2.89-9.84c0.04-3.88-0.9-7.77-2.74-10.6c-0.53-0.81-1.11-1.55-1.72-2.21 c-2.76-2.97-6.27-4.27-9.9-4.3c-2.64-0.02-5.37,0.62-7.96,1.76c-0.58,0.28-1.15,0.59-1.72,0.93c-1.72,1.01-3.42,2.24-5.15,3.66 l-3.7-4.24c1.28-1.18,2.66-2.27,4.13-3.22c1.17-0.76,2.39-1.44,3.65-2.02c0.5-0.25,1.02-0.49,1.53-0.71 c-2.44-4.32-5.95-7.42-9.93-9.33c-3.98-1.91-8.43-2.64-12.76-2.22c-4.31,0.42-8.49,1.98-11.95,4.66c-4,3.1-7.04,7.73-8.2,13.87 l-0.36,1.92l-1.91,0.34c-1.87,0.33-3.55,0.78-5.02,1.35c-1.42,0.55-2.69,1.23-3.8,2.03c-0.89,0.64-1.65,1.36-2.3,2.14 c-2.01,2.41-2.95,5.43-2.92,8.49c0.02,3.1,1.03,6.24,2.9,8.82c0.69,0.96,1.5,1.83,2.42,2.6l0,0.01c0.92,0.77,1.97,1.4,3.16,1.89 C15.32,77.63,16.7,77.99,18.23,78.18L18.23,78.18z M65.9,32.58c1.71,1.88,3.21,4.04,4.45,6.49c1.22-0.19,2.45-0.29,3.66-0.28 c5.14,0.03,10.09,1.87,14,6.08c0.82,0.88,1.59,1.87,2.31,2.98c0.31,0.48,0.61,0.98,0.88,1.5c0.36-0.66,0.68-1.34,0.94-2.06 c0.61-1.64,0.94-3.43,0.94-5.3c0-4.2-1.7-8.01-4.46-10.76c-2.75-2.75-6.56-4.46-10.76-4.46c-2.66,0-5.15,0.67-7.3,1.85 C68.76,29.62,67.18,30.97,65.9,32.58L65.9,32.58z M51.38,14.53c-0.99-0.97-1-2.56-0.03-3.55c0.97-0.99,2.56-1,3.55-0.03l6.91,6.82 c0.99,0.97,1,2.56,0.03,3.55c-0.97,0.99-2.56,1-3.55,0.03L51.38,14.53L51.38,14.53z M78.54,2.52c-0.01-1.38,1.11-2.51,2.5-2.52 c1.38-0.01,2.51,1.11,2.52,2.5l0.06,9.71c0.01,1.38-1.11,2.51-2.5,2.52c-1.38,0.01-2.51-1.11-2.52-2.5L78.54,2.52L78.54,2.52z M106.52,12.04c0.99-0.97,2.58-0.96,3.55,0.03c0.97,0.99,0.96,2.58-0.03,3.55l-6.91,6.82c-0.99,0.97-2.58,0.96-3.55-0.03 c-0.97-0.99-0.96-2.58,0.03-3.55L106.52,12.04L106.52,12.04z M120.36,38.66c1.38-0.01,2.51,1.11,2.52,2.5 c0.01,1.38-1.11,2.51-2.5,2.51l-9.71,0.06c-1.38,0.01-2.51-1.11-2.52-2.5c-0.01-1.38,1.11-2.51,2.5-2.52L120.36,38.66L120.36,38.66 z M101.8,57.81c-0.99-0.97-1-2.56-0.03-3.55c0.97-0.99,2.56-1,3.55-0.03l6.91,6.82c0.99,0.97,1,2.56,0.03,3.55 c-0.97,0.99-2.56,1-3.55,0.03L101.8,57.81L101.8,57.81z M30.52,64.4c0.31-1.63,1.89-2.71,3.53-2.39c1.63,0.31,2.71,1.89,2.39,3.53 l-1.03,5.34c-0.31,1.63-1.89,2.71-3.52,2.39c-1.63-0.31-2.71-1.89-2.39-3.53L30.52,64.4L30.52,64.4z M46.48,67.16 c0.31-1.63,1.89-2.71,3.53-2.39c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39 c-1.63-0.31-2.71-1.89-2.39-3.53L46.48,67.16L46.48,67.16z M61.71,71.39c0.31-1.63,1.89-2.71,3.53-2.39 c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39c-1.63-0.31-2.71-1.89-2.39-3.53L61.71,71.39 L61.71,71.39z M57.6,88.27c0.31-1.63,1.89-2.71,3.53-2.39s2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39 c-1.63-0.31-2.71-1.89-2.39-3.53L57.6,88.27L57.6,88.27z M41.92,84.65c0.31-1.63,1.89-2.71,3.53-2.39 c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39c-1.63-0.31-2.71-1.89-2.39-3.53L41.92,84.65 L41.92,84.65z M26.93,81.04c0.31-1.63,1.89-2.71,3.52-2.39c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34 c-0.31,1.63-1.89,2.71-3.53,2.39s-2.71-1.89-2.39-3.53L26.93,81.04L26.93,81.04z M45.19,101.62c0.31-1.63,1.89-2.71,3.52-2.39 c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39c-1.63-0.31-2.71-1.89-2.39-3.52L45.19,101.62 L45.19,101.62z'/%3E%3C/g%3E%3C/svg%3E");
  mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 122.88 110.55' style='enable-background:new 0 0 122.88 110.55' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M30.21,98.01c0.31-1.63,1.89-2.71,3.53-2.39c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39 c-1.63-0.31-2.71-1.89-2.39-3.53L30.21,98.01L30.21,98.01z M18.23,78.18c1.54,0.19,2.63,1.6,2.43,3.14 c-0.19,1.54-1.6,2.63-3.14,2.43c-2.04-0.26-3.9-0.74-5.57-1.43c-1.72-0.71-3.26-1.64-4.62-2.78H7.32 c-1.28-1.07-2.41-2.29-3.36-3.61C1.41,72.41,0.03,68.11,0,63.83c-0.03-4.33,1.32-8.64,4.22-12.12c0.94-1.13,2.05-2.17,3.32-3.09 c1.48-1.07,3.17-1.98,5.07-2.72c1.32-0.51,2.72-0.94,4.21-1.28c1.68-6.68,5.27-11.83,9.88-15.41c4.31-3.34,9.51-5.29,14.85-5.81 c5.32-0.51,10.8,0.39,15.71,2.75c1.55,0.74,3.04,1.63,4.45,2.66c1.7-2.07,3.79-3.82,6.17-5.12c2.98-1.63,6.38-2.55,9.99-2.55 c5.76,0,10.97,2.33,14.75,6.11c3.77,3.77,6.11,8.99,6.11,14.75c0,2.54-0.46,4.97-1.29,7.23c-0.87,2.34-2.14,4.49-3.74,6.34 c-0.08,0.09-0.16,0.17-0.25,0.25c0.37,1.87,0.55,3.8,0.53,5.72c-0.05,4.82-1.36,9.63-4.01,13.16c-1.73,2.31-3.96,4.18-6.63,5.68 c-2.57,1.44-5.57,2.53-8.93,3.31c-1.51,0.35-3.02-0.6-3.37-2.11c-0.35-1.51,0.6-3.02,2.11-3.37c2.84-0.66,5.33-1.56,7.44-2.74 c2.01-1.13,3.65-2.5,4.89-4.14c1.91-2.54,2.85-6.15,2.89-9.84c0.04-3.88-0.9-7.77-2.74-10.6c-0.53-0.81-1.11-1.55-1.72-2.21 c-2.76-2.97-6.27-4.27-9.9-4.3c-2.64-0.02-5.37,0.62-7.96,1.76c-0.58,0.28-1.15,0.59-1.72,0.93c-1.72,1.01-3.42,2.24-5.15,3.66 l-3.7-4.24c1.28-1.18,2.66-2.27,4.13-3.22c1.17-0.76,2.39-1.44,3.65-2.02c0.5-0.25,1.02-0.49,1.53-0.71 c-2.44-4.32-5.95-7.42-9.93-9.33c-3.98-1.91-8.43-2.64-12.76-2.22c-4.31,0.42-8.49,1.98-11.95,4.66c-4,3.1-7.04,7.73-8.2,13.87 l-0.36,1.92l-1.91,0.34c-1.87,0.33-3.55,0.78-5.02,1.35c-1.42,0.55-2.69,1.23-3.8,2.03c-0.89,0.64-1.65,1.36-2.3,2.14 c-2.01,2.41-2.95,5.43-2.92,8.49c0.02,3.1,1.03,6.24,2.9,8.82c0.69,0.96,1.5,1.83,2.42,2.6l0,0.01c0.92,0.77,1.97,1.4,3.16,1.89 C15.32,77.63,16.7,77.99,18.23,78.18L18.23,78.18z M65.9,32.58c1.71,1.88,3.21,4.04,4.45,6.49c1.22-0.19,2.45-0.29,3.66-0.28 c5.14,0.03,10.09,1.87,14,6.08c0.82,0.88,1.59,1.87,2.31,2.98c0.31,0.48,0.61,0.98,0.88,1.5c0.36-0.66,0.68-1.34,0.94-2.06 c0.61-1.64,0.94-3.43,0.94-5.3c0-4.2-1.7-8.01-4.46-10.76c-2.75-2.75-6.56-4.46-10.76-4.46c-2.66,0-5.15,0.67-7.3,1.85 C68.76,29.62,67.18,30.97,65.9,32.58L65.9,32.58z M51.38,14.53c-0.99-0.97-1-2.56-0.03-3.55c0.97-0.99,2.56-1,3.55-0.03l6.91,6.82 c0.99,0.97,1,2.56,0.03,3.55c-0.97,0.99-2.56,1-3.55,0.03L51.38,14.53L51.38,14.53z M78.54,2.52c-0.01-1.38,1.11-2.51,2.5-2.52 c1.38-0.01,2.51,1.11,2.52,2.5l0.06,9.71c0.01,1.38-1.11,2.51-2.5,2.52c-1.38,0.01-2.51-1.11-2.52-2.5L78.54,2.52L78.54,2.52z M106.52,12.04c0.99-0.97,2.58-0.96,3.55,0.03c0.97,0.99,0.96,2.58-0.03,3.55l-6.91,6.82c-0.99,0.97-2.58,0.96-3.55-0.03 c-0.97-0.99-0.96-2.58,0.03-3.55L106.52,12.04L106.52,12.04z M120.36,38.66c1.38-0.01,2.51,1.11,2.52,2.5 c0.01,1.38-1.11,2.51-2.5,2.51l-9.71,0.06c-1.38,0.01-2.51-1.11-2.52-2.5c-0.01-1.38,1.11-2.51,2.5-2.52L120.36,38.66L120.36,38.66 z M101.8,57.81c-0.99-0.97-1-2.56-0.03-3.55c0.97-0.99,2.56-1,3.55-0.03l6.91,6.82c0.99,0.97,1,2.56,0.03,3.55 c-0.97,0.99-2.56,1-3.55,0.03L101.8,57.81L101.8,57.81z M30.52,64.4c0.31-1.63,1.89-2.71,3.53-2.39c1.63,0.31,2.71,1.89,2.39,3.53 l-1.03,5.34c-0.31,1.63-1.89,2.71-3.52,2.39c-1.63-0.31-2.71-1.89-2.39-3.53L30.52,64.4L30.52,64.4z M46.48,67.16 c0.31-1.63,1.89-2.71,3.53-2.39c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39 c-1.63-0.31-2.71-1.89-2.39-3.53L46.48,67.16L46.48,67.16z M61.71,71.39c0.31-1.63,1.89-2.71,3.53-2.39 c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39c-1.63-0.31-2.71-1.89-2.39-3.53L61.71,71.39 L61.71,71.39z M57.6,88.27c0.31-1.63,1.89-2.71,3.53-2.39s2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39 c-1.63-0.31-2.71-1.89-2.39-3.53L57.6,88.27L57.6,88.27z M41.92,84.65c0.31-1.63,1.89-2.71,3.53-2.39 c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39c-1.63-0.31-2.71-1.89-2.39-3.53L41.92,84.65 L41.92,84.65z M26.93,81.04c0.31-1.63,1.89-2.71,3.52-2.39c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34 c-0.31,1.63-1.89,2.71-3.53,2.39s-2.71-1.89-2.39-3.53L26.93,81.04L26.93,81.04z M45.19,101.62c0.31-1.63,1.89-2.71,3.52-2.39 c1.63,0.31,2.71,1.89,2.39,3.53l-1.03,5.34c-0.31,1.63-1.89,2.71-3.53,2.39c-1.63-0.31-2.71-1.89-2.39-3.52L45.19,101.62 L45.19,101.62z'/%3E%3C/g%3E%3C/svg%3E");
}

.btnChange {
  -webkit-mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 122.88 122.88' style='enable-background:new 0 0 122.88 122.88' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M68.23,13.49c10.44,1.49,19.79,6.36,26.91,13.48c7.29,7.29,12.23,16.93,13.58,27.68h14.17v13.58h-14.39 c-1.62,10.13-6.42,19.2-13.36,26.13c-7.11,7.11-16.47,11.99-26.91,13.48v15.04H54.65v-15.04c-10.44-1.49-19.79-6.36-26.9-13.48 c-6.94-6.94-11.74-16-13.36-26.13H0V54.65h14.16c1.35-10.75,6.29-20.39,13.58-27.68c7.11-7.11,16.46-11.99,26.9-13.48V0h13.58 V13.49L68.23,13.49z M61.44,35.41c13.95,0,25.25,11.31,25.25,25.25c0,13.95-11.31,25.25-25.25,25.25 c-13.95,0-25.25-11.31-25.25-25.25C36.19,46.72,47.49,35.41,61.44,35.41L61.44,35.41z M89,33.11c-7.05-7.05-16.8-11.42-27.56-11.42 c-10.76,0-20.51,4.36-27.56,11.42c-7.05,7.05-11.42,16.8-11.42,27.56c0,10.76,4.36,20.51,11.42,27.56 c7.05,7.05,16.8,11.42,27.56,11.42c10.76,0,20.51-4.36,27.56-11.42c7.05-7.05,11.42-16.8,11.42-27.56 C100.41,49.9,96.05,40.16,89,33.11L89,33.11z'/%3E%3C/g%3E%3C/svg%3E");
  mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 122.88 122.88' style='enable-background:new 0 0 122.88 122.88' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M68.23,13.49c10.44,1.49,19.79,6.36,26.91,13.48c7.29,7.29,12.23,16.93,13.58,27.68h14.17v13.58h-14.39 c-1.62,10.13-6.42,19.2-13.36,26.13c-7.11,7.11-16.47,11.99-26.91,13.48v15.04H54.65v-15.04c-10.44-1.49-19.79-6.36-26.9-13.48 c-6.94-6.94-11.74-16-13.36-26.13H0V54.65h14.16c1.35-10.75,6.29-20.39,13.58-27.68c7.11-7.11,16.46-11.99,26.9-13.48V0h13.58 V13.49L68.23,13.49z M61.44,35.41c13.95,0,25.25,11.31,25.25,25.25c0,13.95-11.31,25.25-25.25,25.25 c-13.95,0-25.25-11.31-25.25-25.25C36.19,46.72,47.49,35.41,61.44,35.41L61.44,35.41z M89,33.11c-7.05-7.05-16.8-11.42-27.56-11.42 c-10.76,0-20.51,4.36-27.56,11.42c-7.05,7.05-11.42,16.8-11.42,27.56c0,10.76,4.36,20.51,11.42,27.56 c7.05,7.05,16.8,11.42,27.56,11.42c10.76,0,20.51-4.36,27.56-11.42c7.05-7.05,11.42-16.8,11.42-27.56 C100.41,49.9,96.05,40.16,89,33.11L89,33.11z'/%3E%3C/g%3E%3C/svg%3E");
}

.btnInfo {
  -webkit-mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512'%3E%3Cpath d='M256,42.67c-117.82,0-213.33,95.51-213.33,213.33s95.51,213.33,213.33,213.33,213.33-95.51,213.33-213.33S373.82,42.67,256,42.67ZM228.46,120c7.64-7.33,16.82-11,27.54-11s20.3,3.54,27.94,10.6c7.64,7.07,11.46,16.07,11.46,27s-3.82,19.67-11.46,27c-7.64,7.34-16.95,11-27.94,11s-19.91-3.66-27.54-11c-7.64-7.33-11.46-16.33-11.46-27s3.82-19.26,11.46-26.6ZM321.8,403h-130.02v-6.4l9.61-.4c7.74-.8,12.41-2.66,14.01-5.6,1.6-2.93,2.41-9.33,2.41-19.2l.4-18.4v-95.6l-.4-16.4c-.54-6.4-1.34-11.2-2.4-14.4-1.07-3.2-5.87-5.2-14.4-6l-10.8-.8v-6.4h105.2v139.6l.4,18.4c0,9.6.8,15.94,2.4,19,1.6,3.07,6.26,5,14,5.8l9.6.4v6.4Z' style='fill-rule: evenodd;'/%3E%3C/svg%3E");
  mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512'%3E%3Cpath d='M256,42.67c-117.82,0-213.33,95.51-213.33,213.33s95.51,213.33,213.33,213.33,213.33-95.51,213.33-213.33S373.82,42.67,256,42.67ZM228.46,120c7.64-7.33,16.82-11,27.54-11s20.3,3.54,27.94,10.6c7.64,7.07,11.46,16.07,11.46,27s-3.82,19.67-11.46,27c-7.64,7.34-16.95,11-27.94,11s-19.91-3.66-27.54-11c-7.64-7.33-11.46-16.33-11.46-27s3.82-19.26,11.46-26.6ZM321.8,403h-130.02v-6.4l9.61-.4c7.74-.8,12.41-2.66,14.01-5.6,1.6-2.93,2.41-9.33,2.41-19.2l.4-18.4v-95.6l-.4-16.4c-.54-6.4-1.34-11.2-2.4-14.4-1.07-3.2-5.87-5.2-14.4-6l-10.8-.8v-6.4h105.2v139.6l.4,18.4c0,9.6.8,15.94,2.4,19,1.6,3.07,6.26,5,14,5.8l9.6.4v6.4Z' style='fill-rule: evenodd;'/%3E%3C/svg%3E");
}

.btnDrag {
  -webkit-mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' style='enable-background:new 0 0 80 80'%3E%3Cpath d='M40,3.01l1.5-1.41L40,0l-1.5,1.6,1.5,1.41ZM37.94,27.67c0,1.14.92,2.06,2.06,2.06s2.06-.92,2.06-2.06h-4.11ZM53.83,14.75L41.5,1.6l-3,2.81,12.33,13.15,3-2.81ZM38.5,1.6l-12.33,13.15,3,2.81,12.33-13.15-3-2.81ZM37.94,3.01v24.66h4.11V3.01h-4.11Z'/%3E%3Cpath d='M76.99,40l1.41,1.5,1.6-1.5-1.6-1.5-1.41,1.5ZM52.33,37.94c-1.13,0-2.06.92-2.06,2.06s.92,2.06,2.06,2.06v-4.11ZM65.25,53.83l13.15-12.33-2.81-3-13.15,12.33,2.81,3ZM78.4,38.5l-13.15-12.33-2.81,3,13.15,12.33,2.81-3ZM76.99,37.94h-24.66v4.11h24.66v-4.11Z'/%3E%3Cpath d='M40,76.99l1.5,1.41-1.5,1.6-1.5-1.6,1.5-1.41ZM37.94,52.33c0-1.13.92-2.06,2.06-2.06s2.06.92,2.06,2.06h-4.11ZM53.83,65.25l-12.33,13.15-3-2.81,12.33-13.15,3,2.81ZM38.5,78.4l-12.33-13.15,3-2.81,12.33,13.15-3,2.81ZM37.94,76.99v-24.66h4.11v24.66h-4.11Z'/%3E%3Cpath d='M3.01,40l-1.41,1.5-1.6-1.5,1.6-1.5,1.41,1.5ZM27.67,37.94c1.14,0,2.06.92,2.06,2.06s-.92,2.06-2.06,2.06v-4.11ZM14.75,53.83L1.6,41.5l2.81-3,13.15,12.33-2.81,3ZM1.6,38.5l13.15-12.33,2.81,3-13.15,12.33-2.81-3ZM3.01,37.94h24.66v4.11H3.01v-4.11Z'/%3E%3C/svg%3E");
  mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' style='enable-background:new 0 0 80 80'%3E%3Cpath d='M40,3.01l1.5-1.41L40,0l-1.5,1.6,1.5,1.41ZM37.94,27.67c0,1.14.92,2.06,2.06,2.06s2.06-.92,2.06-2.06h-4.11ZM53.83,14.75L41.5,1.6l-3,2.81,12.33,13.15,3-2.81ZM38.5,1.6l-12.33,13.15,3,2.81,12.33-13.15-3-2.81ZM37.94,3.01v24.66h4.11V3.01h-4.11Z'/%3E%3Cpath d='M76.99,40l1.41,1.5,1.6-1.5-1.6-1.5-1.41,1.5ZM52.33,37.94c-1.13,0-2.06.92-2.06,2.06s.92,2.06,2.06,2.06v-4.11ZM65.25,53.83l13.15-12.33-2.81-3-13.15,12.33,2.81,3ZM78.4,38.5l-13.15-12.33-2.81,3,13.15,12.33,2.81-3ZM76.99,37.94h-24.66v4.11h24.66v-4.11Z'/%3E%3Cpath d='M40,76.99l1.5,1.41-1.5,1.6-1.5-1.6,1.5-1.41ZM37.94,52.33c0-1.13.92-2.06,2.06-2.06s2.06.92,2.06,2.06h-4.11ZM53.83,65.25l-12.33,13.15-3-2.81,12.33-13.15,3,2.81ZM38.5,78.4l-12.33-13.15,3-2.81,12.33,13.15-3,2.81ZM37.94,76.99v-24.66h4.11v24.66h-4.11Z'/%3E%3Cpath d='M3.01,40l-1.41,1.5-1.6-1.5,1.6-1.5,1.41,1.5ZM27.67,37.94c1.14,0,2.06.92,2.06,2.06s-.92,2.06-2.06,2.06v-4.11ZM14.75,53.83L1.6,41.5l2.81-3,13.15,12.33-2.81,3ZM1.6,38.5l13.15-12.33,2.81,3-13.15,12.33-2.81-3ZM3.01,37.94h24.66v4.11H3.01v-4.11Z'/%3E%3C/svg%3E");
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  filter: contrast(2) drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 1));
  outline: 0.0625rem solid var(--btnColor);
  border: 0.0625rem solid var(--btnColor);
  cursor: pointer;
  opacity: 1;
  background-color: var(--btnColor);
  transition: all 0.15s ease;

  &[data-disabled="true"] {
    opacity: 0.7;
    cursor: default;
    filter: none;
    transition: none;
    pointer-events: none;
    touch-action: none;
  }
}

.drag {
  outline: 0.0625rem solid var(--btnColor);
  border: 0.0625rem solid var(--btnColor);
  border-radius: 0.175rem;
  padding: 0.125rem;
  display: block;

  &:active:not([data-disabled="true"]) {
    background-color: var(--btnHoverColor);
    opacity: 1;

    .btnDrag {
      scale: 1.2;
      opacity: 1;
    }
  }

  &:focus {
    outline: 0.0625rem solid var(--btnColor);
    border: 0.0625rem solid var(--btnColor);
  }
}

.topBtn {
  width: 1.25rem;
  height: 1.25rem;
  filter: contrast(2) drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 1));
  outline: none;
  border: none;
  cursor: pointer;
  opacity: 1;
  background-color: var(--btnColor, rgb(207, 207, 207));
  transition: all 0.15s ease;

  &[data-disabled="true"] {
    opacity: 0.7;
    cursor: default;
    filter: none;
    transition: none;
    pointer-events: none;
    touch-action: none;
  }

  &:hover:not([data-disabled="true"]) {
    filter: drop-shadow(0.125rem 0.125rem 0.125rem rgba(0, 0, 0, 1));
    scale: 1.2;
    background-color: var(--btnHoverColor);
    opacity: 1;
  }
}

.sunriseIcon {
  -webkit-mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' style='enable-background:new 0 0 80 80'%3E%3Cpath d='M38.23,11.98c.98-.98,2.56-.98,3.54,0l7.5,7.5c.98.98.98,2.56,0,3.54-.98.98-2.56.98-3.54,0l-3.23-3.23v8.96c0,1.38-1.12,2.5-2.5,2.5s-2.5-1.12-2.5-2.5v-8.96l-3.23,3.23c-.98.98-2.56.98-3.54,0-.98-.98-.98-2.56,0-3.54l7.5-7.5ZM11.72,27.97c.98-.98,2.56-.98,3.54,0l7.07,7.07c.98.98.98,2.56,0,3.54-.98.98-2.56.98-3.54,0l-7.07-7.07c-.98-.98-.98-2.56,0-3.54ZM68.28,27.97c.98.98.98,2.56,0,3.54l-7.07,7.07c-.98.98-2.56.98-3.54,0-.98-.98-.98-2.56,0-3.54l7.07-7.07c.98-.98,2.56-.98,3.54,0ZM40,41.25c8.28,0,15,6.72,15,15,0,2.74-.73,5.3-2.01,7.5h-25.99c-1.28-2.2-2.01-4.76-2.01-7.5,0-8.28,6.72-15,15-15ZM58.55,63.75c.94-2.32,1.45-4.85,1.45-7.5,0-11.05-8.95-20-20-20s-20,8.95-20,20c0,2.65.52,5.18,1.45,7.5H2.5c-1.38,0-2.5,1.12-2.5,2.5s1.12,2.5,2.5,2.5h75c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5h-18.95ZM0,56.25c0-1.38,1.12-2.5,2.5-2.5h10c1.38,0,2.5,1.12,2.5,2.5s-1.12,2.5-2.5,2.5H2.5c-1.38,0-2.5-1.12-2.5-2.5ZM65,56.25c0-1.38,1.12-2.5,2.5-2.5h10c1.38,0,2.5,1.12,2.5,2.5s-1.12,2.5-2.5,2.5h-10c-1.38,0-2.5-1.12-2.5-2.5Z'/%3E%3C/svg%3E");
  mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' style='enable-background:new 0 0 80 80'%3E%3Cpath d='M38.23,11.98c.98-.98,2.56-.98,3.54,0l7.5,7.5c.98.98.98,2.56,0,3.54-.98.98-2.56.98-3.54,0l-3.23-3.23v8.96c0,1.38-1.12,2.5-2.5,2.5s-2.5-1.12-2.5-2.5v-8.96l-3.23,3.23c-.98.98-2.56.98-3.54,0-.98-.98-.98-2.56,0-3.54l7.5-7.5ZM11.72,27.97c.98-.98,2.56-.98,3.54,0l7.07,7.07c.98.98.98,2.56,0,3.54-.98.98-2.56.98-3.54,0l-7.07-7.07c-.98-.98-.98-2.56,0-3.54ZM68.28,27.97c.98.98.98,2.56,0,3.54l-7.07,7.07c-.98.98-2.56.98-3.54,0-.98-.98-.98-2.56,0-3.54l7.07-7.07c.98-.98,2.56-.98,3.54,0ZM40,41.25c8.28,0,15,6.72,15,15,0,2.74-.73,5.3-2.01,7.5h-25.99c-1.28-2.2-2.01-4.76-2.01-7.5,0-8.28,6.72-15,15-15ZM58.55,63.75c.94-2.32,1.45-4.85,1.45-7.5,0-11.05-8.95-20-20-20s-20,8.95-20,20c0,2.65.52,5.18,1.45,7.5H2.5c-1.38,0-2.5,1.12-2.5,2.5s1.12,2.5,2.5,2.5h75c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5h-18.95ZM0,56.25c0-1.38,1.12-2.5,2.5-2.5h10c1.38,0,2.5,1.12,2.5,2.5s-1.12,2.5-2.5,2.5H2.5c-1.38,0-2.5-1.12-2.5-2.5ZM65,56.25c0-1.38,1.12-2.5,2.5-2.5h10c1.38,0,2.5,1.12,2.5,2.5s-1.12,2.5-2.5,2.5h-10c-1.38,0-2.5-1.12-2.5-2.5Z'/%3E%3C/svg%3E");
  width: 2rem;
  height: 2rem;
  filter: contrast(2) drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 1));
  outline: none;
  border: none;
  cursor: default;
  pointer-events: auto;
  touch-action: auto;
  opacity: 1;
  background-color: var(--btnColor, rgb(207, 207, 207));
  transition: all 0.15s ease;

  &[data-disabled="true"] {
    opacity: 0.7;
    cursor: default;
    filter: none;
    transition: none;
    pointer-events: none;
    touch-action: none;
  }
}

.sunsetIcon {
  -webkit-mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' style='enable-background:new 0 0 80 80'%3E%3Cpath d='M38.23,30.52c.98.98,2.56.98,3.54,0l7.5-7.5c.98-.98.98-2.56,0-3.54-.98-.98-2.56-.98-3.54,0l-3.23,3.23v-8.96c0-1.38-1.12-2.5-2.5-2.5s-2.5,1.12-2.5,2.5v8.96l-3.23-3.23c-.98-.98-2.56-.98-3.54,0-.98.98-.98,2.56,0,3.54l7.5,7.5ZM11.72,27.97c.98-.98,2.56-.98,3.54,0l7.07,7.07c.98.98.98,2.56,0,3.54-.98.98-2.56.98-3.54,0l-7.07-7.07c-.98-.98-.98-2.56,0-3.54ZM68.28,27.97c.98.98.98,2.56,0,3.54l-7.07,7.07c-.98.98-2.56.98-3.54,0-.98-.98-.98-2.56,0-3.54l7.07-7.07c.98-.98,2.56-.98,3.54,0ZM40,41.25c8.28,0,15,6.72,15,15,0,2.74-.73,5.3-2.01,7.5h-25.99c-1.28-2.2-2.01-4.76-2.01-7.5,0-8.28,6.72-15,15-15ZM58.55,63.75c.94-2.32,1.45-4.85,1.45-7.5,0-11.05-8.95-20-20-20s-20,8.95-20,20c0,2.65.52,5.18,1.45,7.5H2.5c-1.38,0-2.5,1.12-2.5,2.5s1.12,2.5,2.5,2.5h75c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5h-18.95ZM0,56.25c0-1.38,1.12-2.5,2.5-2.5h10c1.38,0,2.5,1.12,2.5,2.5s-1.12,2.5-2.5,2.5H2.5c-1.38,0-2.5-1.12-2.5-2.5ZM65,56.25c0-1.38,1.12-2.5,2.5-2.5h10c1.38,0,2.5,1.12,2.5,2.5s-1.12,2.5-2.5,2.5h-10c-1.38,0-2.5-1.12-2.5-2.5Z'/%3E%3C/svg%3E");
  mask: center/cover no-repeat url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' style='enable-background:new 0 0 80 80'%3E%3Cpath d='M38.23,30.52c.98.98,2.56.98,3.54,0l7.5-7.5c.98-.98.98-2.56,0-3.54-.98-.98-2.56-.98-3.54,0l-3.23,3.23v-8.96c0-1.38-1.12-2.5-2.5-2.5s-2.5,1.12-2.5,2.5v8.96l-3.23-3.23c-.98-.98-2.56-.98-3.54,0-.98.98-.98,2.56,0,3.54l7.5,7.5ZM11.72,27.97c.98-.98,2.56-.98,3.54,0l7.07,7.07c.98.98.98,2.56,0,3.54-.98.98-2.56.98-3.54,0l-7.07-7.07c-.98-.98-.98-2.56,0-3.54ZM68.28,27.97c.98.98.98,2.56,0,3.54l-7.07,7.07c-.98.98-2.56.98-3.54,0-.98-.98-.98-2.56,0-3.54l7.07-7.07c.98-.98,2.56-.98,3.54,0ZM40,41.25c8.28,0,15,6.72,15,15,0,2.74-.73,5.3-2.01,7.5h-25.99c-1.28-2.2-2.01-4.76-2.01-7.5,0-8.28,6.72-15,15-15ZM58.55,63.75c.94-2.32,1.45-4.85,1.45-7.5,0-11.05-8.95-20-20-20s-20,8.95-20,20c0,2.65.52,5.18,1.45,7.5H2.5c-1.38,0-2.5,1.12-2.5,2.5s1.12,2.5,2.5,2.5h75c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5h-18.95ZM0,56.25c0-1.38,1.12-2.5,2.5-2.5h10c1.38,0,2.5,1.12,2.5,2.5s-1.12,2.5-2.5,2.5H2.5c-1.38,0-2.5-1.12-2.5-2.5ZM65,56.25c0-1.38,1.12-2.5,2.5-2.5h10c1.38,0,2.5,1.12,2.5,2.5s-1.12,2.5-2.5,2.5h-10c-1.38,0-2.5-1.12-2.5-2.5Z'/%3E%3C/svg%3E");
  width: 2rem;
  height: 2rem;
  filter: contrast(2) drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 1));
  outline: none;
  border: none;
  cursor: default;
  pointer-events: auto;
  touch-action: auto;
  opacity: 1;
  background-color: var(--btnColor, rgb(207, 207, 207));
  transition: all 0.15s ease;

  &[data-disabled="true"] {
    opacity: 0.7;
    cursor: default;
    filter: none;
    transition: none;
    pointer-events: none;
    touch-action: none;
  }
}

.weather-select-panel {
  position: fixed;
  display: flex;
  top: calc(10% + clamp(13.125rem, 21vh, calc(100vh * 0.25)) + 0.9375rem);
  left: calc((50vw) - clamp(23.4375rem, 26vw, calc(100vw * 0.28))/2);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 7;
  width: clamp(23.4375rem, 26vw, calc(100vw * 0.28));
  height: 4.25rem;
  pointer-events: none;
  touch-action: none;
}

.panel-body {
  width: 100%;
  height: 100%;
  padding: 1rem;
}

.btnClose {
  position: relative;
  justify-self: end;
  align-self: start;
  margin: 0.25rem 0.25rem 0 0;
  font-weight: 700;
  background: unset;
  outline: unset;
  border: unset;
  cursor: pointer;
  color: var(--btnColor, rgb(207, 207, 207));
  padding-block: 0;
  padding-inline: 0;
  opacity: 0.8;
  width: 1rem;
  height: 1rem;
  filter: contrast(2);
  transition: all 0.25s ease;

  &:after {
    content: '\2715';
    padding: 0.0625rem;
  }

  &:hover {
    filter: contrast(1);
    scale: 1.1;
    color: var(--btnHoverColor);
    opacity: 1;
  }
}

.search-form {
  position: fixed;
  width: calc(100% - 2.5rem);

  &:hover {
    border-color: var(--btnHoverColor);
    outline: 0.125rem solid var(--btnHoverColor);
    outline-offset: -0.0625rem;
    border-radius: 0.175rem;

    #search-bar {
      border-color: var(--btnHoverColor);
      outline: 0.125rem solid var(--btnHoverColor);
      outline-offset: -1px;
      border-radius: 0.175rem;
    }

    .icon {
      color: var(--btnHoverColor);
    }
  }
}

#search-bar {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0.175rem;
  backdrop-filter: blur(10px);
  color: rgb(51, 51, 51);
  width: 100%;
  height: 2rem;
  padding: 0.25rem;

  &:focus,
  &:focus-visible {
    border-color: var(--btnHoverColor);
    outline: 0.125rem solid var(--btnHoverColor);
    outline-offset: -0.0625rem;
  }
}

input::-webkit-input-placeholder {
  color: rgb(51, 51, 51);
}

.icon {
  position: absolute;
  right: .5rem;
  top: 0.5rem;
  text-align: center;
  /*font-size: clamp(0.7rem, 1.1vmin, .95rem);*/
  line-height: 1;
  color: var(--btnColor, rgb(207, 207, 207));
  filter: contrast(2);
  cursor: default;
}

#suggestions-container {
  background: rgba(230, 230, 230, 1);
  backdrop-filter: blur(0.625rem);
  max-height: 15.625rem;
  font-size: clamp(0.8rem, 1.1vmin, .95rem);
  overflow-y: auto;
  box-shadow: 0 0.3125rem 0.3125rem rgba(51, 51, 51, 0.2);
  list-style: none;
  padding: 0;
  margin: 0;
  width: calc(100% - 2.5rem);
  position: fixed;
}

li.suggestion-item {
  display: flex;
  align-items: center;
  gap: clamp(0.125rem, 0.4vmin, 0.25rem);
  border: 1px solid rgba(255, 255, 255, 0.75);
  padding: 1rem 0.5rem;
  cursor: pointer;
  height: 1.5rem;
  cursor: pointer;
  background: transparent;
  background-color: transparent;

  img {
    position: relative;
    height: clamp(0.65rem, 0.65vh, 1rem);
    filter: grayscale(60%);
    pointer-events: all;
  }
}

li.suggestion-item:hover,
li.suggestion-item.active {
  background-color: rgb(189, 237, 251);
}

.canvas-wrapper {
  z-index: 3;
}

.modal {
  visibility: hidden;
  opacity: 0;
  display: flex;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.75);
  transition: .25s ease-in-out;
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
}

.modal-content {
  visibility: hidden;
  opacity: 0;
  margin: 5%;
  padding: 1rem;
  width: 100%;
  height: fit-content;
  transition: .25s ease-in-out;

  div p,
  div h3 {
    font-size: clamp(1.17rem, 2vmin, 1.35rem);
    margin: 0;
    padding: 0;
  }

  div span {
    font-size: small
  }

  div p+p,
  div ul,
  div ul+p {
    font-size: clamp(0.8rem, 1.3vmin, 1.125rem);
    line-height: 1.5;
  }

  div ul {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
    padding-left: 1.25rem;
  }
}

.modal-content.is-open {
  visibility: visible;
  opacity: 1;
}

.modal-bg {
  border-radius: 0.875rem;
  background: linear-gradient(var(--highlight-angle),
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.58) 100%);

  backdrop-filter: blur(2rem) saturate(30%);
  -webkit-backdrop-filter: blur(2) saturate(30%);

  border: 0.0625rem solid transparent;
  background-clip: padding-box;

  box-shadow:
    /* 0 0.5rem 2rem rgba(0, 0, 0, 0.3), 0 0 0 0.0625rem rgba(255, 255, 255, 0.05),*/
    inset 0 0.0625rem rgba(255, 255, 255, 0.15), inset 0 -0.0625rem rgba(0, 0, 0, 0.1);
}


.close {
  position: absolute;
  right: 1rem;
  font-weight: 700;
  background: unset;
  outline: unset;
  border: unset;
  cursor: pointer;
  color: var(--btnColor, rgb(207, 207, 207));
  padding-block: 0;
  padding-inline: 0;
  opacity: 0.8;
  width: 1rem;
  height: 1rem;
  filter: contrast(2);
  transition: all 0.25s ease;

  &:after {
    content: '\2715';
    padding: 0.0625rem;
  }

  &:hover,
  &:focus {
    filter: contrast(1);
    color: var(--btnHoverColor);
    opacity: 1;
    scale: 1.1;
  }
}

#stars {
  top: 0;
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

#clouds {
  z-index: 4;
  --opacity: 1;
  opacity: var(--opacity);
}

#precipitation {
  z-index: 3;
}

.sun {
  position: relative;
  z-index: 2;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: linear-gradient(30deg, #ffb347, #fbeb36);
  box-shadow: 0px -0.375rem 8.5rem 0px #fbeb36, 0px 0px 8.5rem 0px #ffb347;
  offset-path: path(var(--path));
  offset-rotate: 90deg;
  offset-position: 50% 50%;
  aspect-ratio: calc(var(--width) / var(--height));
}

.sun:after {
  content: '';
  position: absolute;
  top: -0.1875rem;
  bottom: -0.1875rem;
  left: -0.1875rem;
  right: -0.1875rem;
  border-radius: 50%;
  filter: blur(0.625rem);
  background: linear-gradient(30deg, rgb(251 235 54 / 30%) 20%, rgb(255 255 255 / 49%));
  z-index: 0;
}

.sunset {
  background: radial-gradient(circle at var(--sunsetleft) var(--sunsettop), rgb(253 97 19 / 70%) 10%, rgb(243 83 0 / 50%) 15%, rgb(93 32 0 / 5%) 30%, rgb(23 63 107 / 60%) 70%, transparent 100%);
  backdrop-filter: contrast(0.8) saturate(110%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  opacity: 0;
  z-index: 2;
}

.sunrise {
  background: linear-gradient(rgb(56, 127, 251) 0%,
      rgb(52, 196, 255) 40%,
      rgb(255, 198, 208) 75%,
      rgb(255, 206, 170) 95%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  z-index: 1;
}

.overcast {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110vw;
  height: 110vh;
  max-height: 110vh;
  background: linear-gradient(0deg, #6d8299 0%, #9fb4c7 40%, #d6e0f0 80%, #f2f6fa 100%);
  backdrop-filter: contrast(40%);
  opacity: 0;
  z-index: 1;
}

.moon,
.moon2,
#moonShadow {
  width: 10rem;
  height: 10rem;
  position: absolute;
  z-index: 2;
  background-size: 100% 110%;
  transform-style: preserve-3d;
  perspective-origin: 150% 150%;
  perspective: 3000px;
  filter: drop-shadow(0 0 2.5rem rgba(255, 255, 255, 0.4));
  color: #ccdbef;
  display: none;
  offset-path: path(var(--path));
  offset-position: 50% 50%;
  offset-rotate: 90deg;
  aspect-ratio: 1;
}

.moon {
  z-index: 3;
}

.moon:before {
  filter: sepia(1) grayscale(.25)
}

.container {
  position: relative;
  width: 95%;
  height: 100%;
  top: 0%;
  z-index: 2;
}

svg:has(#motionPath) {
  position: absolute;
  display: block;
  z-index: 3;
  top: 0;
  width: 100%;
  /*stroke: red;
  stroke-width: 1px;*/
}

#toast {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 999999;
}

.toast {
  display: flex;
  align-items: center;
  background-color: #eee;
  border-radius: 0.125rem;
  padding: 1.25rem 0;
  min-width: 25rem;
  max-width: 28.125rem;
  border-left: 0.25rem solid;
  border-right: 0.0625rem solid;
  border-bottom: 0.0625rem solid;
  border-top: 0.0625rem solid;
  box-shadow: 0 0.375rem 0.5rem rgba(0, 0, 0, 0.08);
  transition: all linear 0.3s;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(calc(100% + 2rem));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.toast--success {
  border-color: #47d864;
}

.toast--success .toast__icon {
  color: #47d864;
}

.toast--info {
  border-color: #2f86eb;
}

.toast--info .toast__icon {
  color: #2f86eb;
}

.toast--warning {
  border-color: #ffc021;
}

.toast--warning .toast__icon {
  color: #ffc021;
}

.toast--error {
  border-color: #ff623d;
}

.toast--error .toast__icon {
  color: #ff623d;
}

.toast+.toast {
  margin-top: 1.5rem;
}

.toast__icon {
  font-size: 1.5rem;
}

.toast__icon,
.toast__close {
  padding: 0 1rem;
}

.toast__body {
  flex-grow: 1;
}

.toast__title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.toast__msg {
  font-size: 0.875rem;
  color: #333;
  margin-top: 0.375rem;
  line-height: 1.5;
}

.toast__close {
  font-size: 1.25rem;
  color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

#weather .testWrapper {
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
  gap: 1.5rem;
  color: var(--btnColor);

  div>span {
    margin-bottom: 0;
    font-size: var(--form-font-size);
    color: var(--btnColor);
  }
}

#weather .testWrapper:has(input[type=radio]) {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 1rem;
  width: 100%;
}

#weather .testWrapper .precipWrapper {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 1rem;
  width: 100%;

  label {
    font-size: var(--form-font-size);
    color: var(--btnColor);
  }
}

#weather .cloudWrapper {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 1rem;
  width: 100%;

  label {
    font-size: var(--form-font-size);
    color: var(--btnColor);
  }
}

#weather .testWrapper select {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  font-size: var(--form-font-size);
  border: 0.0625rem solid rgba(45, 46, 49, 0.75);
  background: rgba(255, 255, 255, 0.75);
  padding: 0.25rem 0.125rem 0.25rem 0.25rem;
  transition: 0.2s;
  width: 7.4rem;
  height: fit-content;
  color: rgb(61, 61, 61);

  &:hover,
  &:focus {
    background-color: rgba(255, 255, 255, 0.5);
    outline: 0.125rem solid var(--btnHoverColor);
  }

}

#weather .testWrapper select,
::picker(select) {
  appearance: base-select;
}

#weather .testWrapper select::picker-icon {
  color: #3d3d3d;
  transition: 0.2s rotate;
  margin-right: 0.125rem;
}

#weather .testWrapper select:open {
  border-color: var(--btnHoverColor);
}

#weather .testWrapper select:open::picker-icon {
  rotate: 90deg;
}

#weather .testWrapper select option:first-of-type {
  border-radius: 0.25rem 0.25rem 0 0;
  background: rgba(255, 255, 255, 0.5);
}

#weather .testWrapper select option {
  background: rgba(255, 255, 255, 1);
  font-size: var(--form-font-size);

  &:hover {
    background: rgba(255, 255, 255, 1) !important;
  }
}

#weather .testWrapper select option:last-of-type {
  border-radius: 0 0 0.25rem 0.25rem;
  background: rgba(255, 255, 255, 0.5);
}

#weather .testWrapper select option:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.5);
}

#weather .testWrapper select::picker(select) {
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.5);
}

#weather .testWrapper select option:not(option:last-of-type) {
  border-bottom: none;
  background: rgba(255, 255, 255, 0.5);
}

#weather .testWrapper select option:checked {
  background: rgba(255, 255, 255, 0.5);
}

#weather .testWrapper select option::checkmark {
  content: "✓";
  font-size: var(--form-font-size);
  color: #3d3d3d;
  margin-right: 0.125rem;
}

.switchContainer label:first-of-type {
  font-size: var(--form-font-size);
  height: 1.125rem;
  pointer-events: auto;
  cursor: pointer;
}

#weather .testWrapper .switchContainer label.switch {
  display: inline-block;
  height: 1.125rem;
  position: relative;
  width: 2.25rem;
  color: var(--btnColor);

  &:hover {
    .slider {
      outline: 0.125rem solid var(--btnHoverColor);
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  input {
    display: none;

    &:checked+.slider {
      &:before {
        transform: translateX(1.125rem);
      }
    }
  }

  .slider {
    background: rgba(255, 255, 255, 0.5);
    border: 0.0625rem solid #3d3d3d;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .2s;
    pointer-events: auto;

    &:before {
      background-color: b(61, 61, 61);
      bottom: 0.125rem;
      content: "";
      height: 0.75rem;
      left: 0.125rem;
      position: absolute;
      transition: .2s;
      width: 0.75rem;
    }

    &.round {
      border-radius: 1.25rem;
      height: 1.125rem;

      &:before {
        border-radius: 50%;
        background-color: #3d3d3d;
      }
    }
  }
}

fieldset {
  min-inline-size: calc(100% - 2rem);
  border: 0.0625rem solid #3d3d3d;
  border-radius: 0.175rem;
  pointer-events: none;
  touch-action: none;
  background: rgba(255, 255, 255, 0.1);
  width: calc(100% - 2rem);
  color: var(--btnColor);
}

.withSpacing {
  margin-top: 0.5rem;
}

.inputTime {
  position: relative;
  transform: scale(1.25);
}

.inputTime svg {
  position: absolute;
  background: #eee;
  z-index: 1;
  top: 0.3125rem;
  left: 0.75rem;
  pointer-events: none;
  touch-action: none;
  border-radius: 50%;
  border: 0.0625rem solid #2D2E31;
}

.inputTime svg path {
  stroke: #3d3d3d;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.timePickerWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  padding: 1rem;
  pointer-events: auto;
}

.timeSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1rem;
  padding: 0;
  margin-top: 0.5rem;
  background: rgba(255, 255, 255, 0.5);
  border: 0.0625rem solid #3d3d3d;
  border-radius: 0.5rem;
  outline: none;
  opacity: 0.7;
  pointer-events: auto;
  cursor: pointer;
  color: var(--btnColor);
  -webkit-transition: .2s;
  transition: .2s;

  &:hover,
  &:focus {
    outline: 0.125rem solid var(--btnHoverColor);
    background-color: rgba(255, 255, 255, 0.5);
  }
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: rgb(61, 61, 61);
  pointer-events: auto;
  cursor: pointer;

  &:hover {
    background: var(--btnHoverColor);
  }
}

#timeDisplay {
  justify-self: center;
  margin-top: 0.5rem;
  font-size: var(--form-font-size);
}

input[type=time] {
  position: relative;
  border: 0.0625rem solid rgba(45, 46, 49, 0.5);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0.175rem;
  color: #3d3d3d;
  height: 1.5rem;
  appearance: none;
  padding: 0 0.125rem 0 1.125rem;
  margin: 0 0.5rem;
  outline: none;
  font-family: inherit;
  width: fit-content;
  font-weight: 500;
  pointer-events: auto;
  cursor: pointer;
}

input[type=time]:focus {
  box-shadow: 0 0 0 0.0625rem rgba(255, 255, 255, 0.25);
}

input[type=time]::-webkit-calendar-picker-indicator {
  position: absolute;
  background: none;
}

input[type=radio] {
  appearance: none;
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border: 0.0625rem solid #3d3d3d;
  transition: 0.175s all linear;
  margin: 0 0.3125rem 0 0;
  background-color: rgba(255, 255, 255, 0.5);
  position: relative;
  color: var(--btnHoverColor);
  pointer-events: auto;
  cursor: pointer;
}

input[type=radio]+label {
  font-size: var(--form-font-size);
  color: var(--btnColor);
  pointer-events: auto;
  cursor: pointer;
}

input[type=radio]:checked {
  outline: 0.0625rem solid #3d3d3d;
  border: 0.125rem solid rgba(255, 255, 255, 0.75);
  background-color: #3d3d3d;
  color: #3d3d3d;
}

input[type=radio]:hover:not(:checked),
input[type=radio]:focus:not(:checked) {
  outline: 0.125rem solid var(--btnHoverColor);
  background-color: rgba(255, 255, 255, 0.5);
}

.btn {
  border: 0.0625rem solid rgba(45, 46, 49, 0.75);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 0.375rem;
  padding: 0.25rem;
  font-size: var(--form-font-size);
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 60px;

  &:hover {
    background-color: rgba(255, 255, 255, 0.5);
    outline: 0.125rem solid var(--btnHoverColor);
  }

  &:focus {
    outline: 0.125rem solid var(--btnHoverColor);
  }

}

.sunTimes {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: start;
  gap: 0.5rem;
}

.precipRadios {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  width: 100%;

  div {
    display: flex;
    align-items: center;
    width: fit-content;
  }

}

.precipSelectWrapper {
  display: flex;
  gap: 0.25rem;
  flex-direction: column;
  width: fit-content;
}

.switchContainer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  flex-wrap: wrap;
  width: 100%;
}

.precipInput {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
}

.cloudInput {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.preload-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  backdrop-filter: blur(0.25rem);
  display: block;
  visibility: hidden;
  will-change: opacity, visibility;
  opacity: 1;
}

.loader {
  top: 18%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #FF3D00;
  border: 5px solid #FFF;
  position: relative;

  &:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.375em;
    transform: translateX(-50%);
    width: 0.5em;
    height: 4em;
    border: 0.125em solid #FFF;
    border-bottom: none;
    background: #FFF;
    color: #FF3D00;
    border-radius: 50px 50px 0 0;
    box-shadow: 0 0 inset;
    -webkit-animation: loaderAnim 2s linear 1 forwards;
    animation: loaderAnim 2s linear 1 forwards;
  }
}

@-webkit-keyframes loaderAnim {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 0 -4em inset;
  }
}

@keyframes loaderAnim {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 0 -4em inset;
  }
}

.loader1 {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .1em currentcolor, -.5em -.5em 0 -.4em currentcolor, 0 -.7em 0 -.4em currentcolor, .5em -.5em 0 -.4em currentcolor, -.5em .5em 0 -.4em currentcolor, 0 .7em 0 -.4em currentcolor, .5em .5em 0 -.4em currentcolor, -.7em 0 0 -.4em currentcolor, .7em 0 0 -.4em currentcolor;
  animation: 5s loaderAnim linear infinite;
}

@keyframes loaderAnim1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


@media screen and (orientation: landscape) {
  :root {
    --form-font-size: clamp(0.7rem, 1.1vmin, 1rem);
  }

  #moonShadow {
    width: calc(10rem / 1.189) !important;
    height: calc(10rem / 1.189) !important;
  }

  .modal-content {
    margin: var(--modal-margin);
  }

  .playground {
    width: fit-content;
    max-width: 37.5rem;
    min-width: 25.3125rem;

    #weather {
      display: flex;
      flex-wrap: wrap;

      .timePickerWrapper {
        width: 100%;
        padding: 0;
      }

      .timeWrapper {
        flex-direction: column;
        gap: 1rem;
        align-items: start;
      }

      .sunTimes {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-bottom: 0.5rem;
      }

      .precipInput {
        flex-wrap: wrap;
        row-gap: 1rem;
        column-gap: 5vmin;
        align-items: start;

        .precipRadios {
          max-width: 50%;
          width: fit-content;
        }

        .precipSelectWrapper {
          max-width: 45%;
        }
      }

      #fieldset1 {
        min-inline-size: unset;
        width: calc(50% - 1rem);
      }

      #fieldset2 {
        min-inline-size: unset;
        width: calc(50% - 1.25rem);
        margin-top: 0;
      }

      .btn {
        width: 65px;
      }
    }
  }
}

@media screen and (orientation: portrait) {

  :root {
    --form-font-size: clamp(0.8rem, 1.2vmin, 1rem);
  }

  #weather {
    display: block !important;
  }

  .moon,
  .moon2 {
    width: 7rem;
    height: 7rem;
  }

  #moonShadow {
    width: calc(7rem / 1.189) !important;
    height: calc(7rem / 1.189) !important;
  }

  .sun {
    width: 5.5rem;
    height: 5.5rem;
  }
}