*,
*::before,
*::after {
  margin: 0;
  padding: 0; }

*:focus {
  border-bottom: 2px solid blue; }

html {
  box-sizing: border-box;
  font-size: 62.5%; }
  @media only screen and (max-width: 25rem) {
    html {
      font-size: 50%; } }

body {
  font-weight: 300;
  line-height: 1.6;
  font-family: "Montserrat", "Sans-serif";
  height: 100vh; }

.main-window {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; }

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden; }
  .background-img {
    width: 100%;
    height: 100%; }

.main-window__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  backdrop-filter: blur(4px); }

.display-info-box {
  position: relative;
  height: 90vh;
  background-color: rgba(176, 176, 176, 0.185);
  overflow: hidden;
  border-radius: 4px;
  display: flex;
  width: 90vw;
  display: none; }

.display-info-box__background {
  position: absolute;
  top: -5.5vh;
  left: -4.6vw;
  width: 100vw;
  height: 100vh;
  z-index: -1; }
  .display-info-box__background-img {
    width: 100%;
    height: 100%; }

.first-window {
  background-color: rgba(176, 176, 176, 0.185);
  overflow: hidden;
  border-radius: 4px;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem; }
  .first-window__form {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; }
    .first-window__form input {
      font-size: 2.4rem;
      background-color: transparent;
      border-style: none;
      border-bottom: 1px solid #d6d6d6;
      color: #e9ecef;
      border-radius: 4px;
      padding: 0.5rem 1rem;
      padding-top: 3rem;
      outline: none;
      font-family: "Montserrat", "Sans-serif"; }
      .first-window__form input:hover {
        background-color: rgba(155, 154, 154, 0.185); }
    .first-window__form label {
      font-size: 2.4rem;
      color: #e9ecef;
      position: absolute;
      top: 40%;
      left: 3.5%;
      transition: all 0.3s;
      user-select: none; }
    .first-window__form .bar {
      transform: translateY(-0.3rem);
      width: 10%;
      border-radius: 4px;
      height: 0.3rem;
      background-color: transparent;
      transition: 0.3s width; }
    .first-window__form input:focus + .first-window__form-input-bar {
      background-color: #5a9ada;
      width: 100%; }
  .first-window__settings {
    display: flex;
    justify-content: space-around;
    width: 100%; }
    .first-window__settings input {
      display: none; }
    .first-window__settings .settings-label {
      display: inline-block;
      background-color: #d6dadd;
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      border: 2px solid #d6dadd;
      transition: all 0.3s; }
    .first-window__settings .label {
      color: #e9ecef;
      font-size: 1.2rem;
      font-weight: 500; }
    .first-window__settings--hour-format, .first-window__settings--temp {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem; }
      .first-window__settings--hour-format p, .first-window__settings--temp p {
        font-size: 1.6rem;
        color: #e9ecef;
        margin-bottom: 0.5rem; }
      .first-window__settings--hour-format-box, .first-window__settings--hour-format--box, .first-window__settings--temp-box, .first-window__settings--temp--box {
        display: flex;
        align-items: center;
        gap: 0.5rem; }

.display-info-box__right-panel {
  padding: 3rem 4rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  min-width: 70%;
  max-width: 70%;
  color: #e9ecef;
  transition: all 0.5s;
  overflow: auto; }
  @media only screen and (max-width: 78.125rem) {
    .display-info-box__right-panel {
      min-width: unset;
      max-width: unset; } }
  .display-info-box__right-panel h2 {
    font-size: 7rem;
    font-weight: 200;
    letter-spacing: -3px;
    grid-column: 1 / -1;
    grid-row: 1 / span 1;
    display: flex;
    gap: 2.3rem;
    align-items: center; }
    @media only screen and (max-width: 62.5rem) {
      .display-info-box__right-panel h2 {
        word-break: break-word; } }
    @media only screen and (max-width: 48.75rem) {
      .display-info-box__right-panel h2 {
        letter-spacing: 0; } }
    @media only screen and (max-width: 31.25rem) {
      .display-info-box__right-panel h2 {
        gap: 1.5rem; } }
    .display-info-box__right-panel h2 .right-panel__title-icon {
      display: flex;
      justify-self: flex-start; }
  .display-info-box__right-panel .right-panel__time-date-box {
    grid-column: 1 / 6;
    grid-row: 2 / span 1;
    font-size: 2.8rem;
    font-weight: 400;
    display: flex;
    flex-direction: column; }
    @media only screen and (max-width: 48.75rem) {
      .display-info-box__right-panel .right-panel__time-date-box {
        font-size: 2.2rem;
        gap: 0.5rem;
        margin-top: 1rem; } }
    @media only screen and (max-width: 31.25rem) {
      .display-info-box__right-panel .right-panel__time-date-box {
        font-size: 1.8rem;
        gap: 1rem; } }
  .display-info-box__right-panel .right-panel__down-list {
    grid-row: 6 / -1;
    grid-column: 1 / -1;
    border-top: solid 1px #e9ecef;
    display: flex;
    align-items: center;
    gap: 2rem;
    scroll-behavior: smooth; }
    @media only screen and (max-width: 62.5rem) {
      .display-info-box__right-panel .right-panel__down-list {
        grid-row: 5 / 8; } }
    @media only screen and (max-width: 48.75rem) {
      .display-info-box__right-panel .right-panel__down-list {
        grid-row: 5 / 7; } }
    @media only screen and (max-height: 45rem) and (min-width: 45rem) {
      .display-info-box__right-panel .right-panel__down-list {
        grid-row: 5 / -1; } }
  .display-info-box__right-panel .right-panel__weather-description {
    grid-row: 5 / 6;
    grid-column: 1 / -1;
    font-size: 7rem; }
    @media only screen and (max-width: 62.5rem) {
      .display-info-box__right-panel .right-panel__weather-description {
        grid-row: 4 / 5;
        font-size: 6rem; } }
    @media only screen and (max-width: 48.75rem) {
      .display-info-box__right-panel .right-panel__weather-description {
        font-size: 5rem; } }
    @media only screen and (max-width: 31.25rem) {
      .display-info-box__right-panel .right-panel__weather-description {
        font-size: 4rem; } }
    @media only screen and (max-height: 45rem) and (min-width: 45rem) {
      .display-info-box__right-panel .right-panel__weather-description {
        grid-row: 4 / 5; } }

.right-panel__down-list--list-item {
  background-color: transparent;
  padding: 1rem;
  font-size: 2rem;
  min-width: 12rem;
  max-width: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(6px);
  border-radius: 3px;
  border: 1px solid #e9ecef; }
  @media only screen and (max-width: 45rem) {
    .right-panel__down-list--list-item {
      font-size: 1.5rem;
      min-width: 9rem;
      padding: 0.5rem; } }

.right-panel__time, .right-panel__date {
  display: flex;
  gap: 3.5rem; }
  @media only screen and (max-width: 31.25rem) {
    .right-panel__time, .right-panel__date {
      gap: 1.5rem; } }
  .right-panel__time span, .right-panel__date span {
    display: flex;
    align-items: center; }

.display-info-box__left-panel--outer {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  transition: 0.3s width;
  height: 100%;
  width: 30%; }
  @media only screen and (max-width: 78.125rem) {
    .display-info-box__left-panel--outer {
      position: absolute;
      z-index: 2;
      width: 30%; } }
  @media only screen and (max-width: 68.75rem) {
    .display-info-box__left-panel--outer {
      width: 40%; } }
  @media only screen and (max-width: 48.75rem) {
    .display-info-box__left-panel--outer {
      width: 50%; } }
  @media only screen and (max-width: 45rem) {
    .display-info-box__left-panel--outer {
      width: 55%; } }
  @media only screen and (max-width: 31.25rem) {
    .display-info-box__left-panel--outer {
      width: 70%; } }

@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .display-info-box__left-panel--outer {
    background-color: transparent; } }

.display-info-box__left-panel {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2rem 2rem;
  padding-bottom: 5rem;
  border-right: solid 1px rgba(165, 165, 165, 0.496);
  padding-top: 2.5rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  transition: opacity 0.3s;
  height: 100%; }
  @media only screen and (max-width: 78.125rem) {
    .display-info-box__left-panel {
      visibility: visible;
      pointer-events: all;
      overflow: hidden;
      opacity: 1; } }
  .display-info-box__left-panel .search-input {
    font-size: 1.6rem;
    background-color: transparent;
    border-style: none;
    border-bottom: 1px solid #d6d6d6;
    color: #e9ecef;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    padding-top: 3rem;
    outline: none;
    font-family: "Montserrat", "Sans-serif"; }
    .display-info-box__left-panel .search-input:hover {
      background-color: rgba(155, 154, 154, 0.185); }
  .display-info-box__left-panel .left-panel__search-form-bar {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    width: 10%;
    border-radius: 4px;
    height: 0.3rem;
    background-color: transparent;
    transition: 0.3s width; }
  .display-info-box__left-panel .search-input:focus + .left-panel__search-form-bar {
    background-color: #5a9ada;
    width: 100%; }
  .display-info-box__left-panel--buttons {
    order: 5;
    display: flex;
    align-items: center;
    gap: 1rem; }
    .display-info-box__left-panel--buttons button {
      position: relative;
      padding: 0.5rem;
      border-radius: 3px;
      background-color: transparent;
      color: #e9ecef;
      backdrop-filter: blur(4px);
      border-style: none;
      border-bottom: 1px solid #e9ecef;
      transition: 0.3s all;
      cursor: pointer; }
      .display-info-box__left-panel--buttons button::after {
        content: "";
        width: 10%;
        height: 0.3rem;
        border-radius: 4px;
        background-color: transparent;
        transition: 0.3s width;
        position: absolute;
        top: 98%;
        left: 50%;
        transform: translateX(-50%); }
      .display-info-box__left-panel--buttons button:hover {
        background-color: #f7f9fb0c; }
      .display-info-box__left-panel--buttons button:hover::after, .display-info-box__left-panel--buttons button:focus::after {
        background-color: #5a9ada;
        width: 101%; }
  .display-info-box__left-panel form {
    order: 1;
    position: relative; }
    .display-info-box__left-panel form label {
      font-size: 1.6rem;
      color: #e9ecef;
      position: absolute;
      top: 50%;
      left: 5%;
      transition: all 0.3s;
      user-select: none; }
  .display-info-box__left-panel .left-panel__temperature {
    order: 2;
    font-size: 5.5rem;
    color: #e9ecef; }
  .display-info-box__left-panel--settings {
    width: 100%;
    order: 4;
    margin-top: 0.5rem;
    border-top: 1px solid #e9ecef;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    display: flex;
    justify-content: space-around; }
    .display-info-box__left-panel--settings .settings-label {
      display: inline-block;
      background-color: #d6dadd;
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      border: 2px solid #d6dadd;
      transition: all 0.3s; }
    .display-info-box__left-panel--settings input {
      display: none; }
  .display-info-box__left-panel--forecasts {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 50%; }
    .display-info-box__left-panel--forecasts h3 {
      margin-bottom: 2rem;
      color: #e9ecef;
      font-size: 1.8rem;
      font-weight: 400;
      padding-bottom: 1rem;
      border-bottom: 1px solid #e9ecef; }
    .display-info-box__left-panel--forecasts-list {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      overflow-y: scroll;
      align-items: center;
      scroll-behavior: smooth; }
      .display-info-box__left-panel--forecasts-list div {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #e9ecef;
        font-size: 2rem;
        min-width: 14rem;
        max-width: 14rem;
        border: 2px solid #e9ecef;
        backdrop-filter: blur(2px);
        border-radius: 4px;
        padding: 1rem; }
        .display-info-box__left-panel--forecasts-list div .day-name {
          font-weight: 500; }

@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .display-info-box__left-panel {
    background-color: rgba(0, 0, 0, 0.815); } }

.left-panel__toggle {
  position: absolute;
  top: 47%;
  right: -50px;
  right: -30px;
  padding: 1rem;
  background-color: transparent;
  border: none;
  align-items: center;
  display: none;
  cursor: pointer;
  border-radius: 4px; }
  @media only screen and (max-width: 78.125rem) {
    .left-panel__toggle {
      display: flex; }
      .left-panel__toggle:not(:hover) {
        animation: toggleButtonAnimation infinite 2s; } }
  @media only screen and (max-width: 48.75rem) {
    .left-panel__toggle {
      right: -23px; } }
  .left-panel__toggle-icon {
    width: 5rem;
    height: 5rem; }
  .left-panel__toggle:hover {
    background-color: rgba(155, 154, 154, 0.185); }

.left-panel-inner-collapsed {
  visibility: hidden;
  pointer-events: none;
  opacity: 0; }

.left-panel-outer-collapsed {
  width: 3%; }

@keyframes toggleButtonAnimation {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(10px); } }

.weather-icon {
  width: 4rem;
  height: 4rem; }
  @media only screen and (max-width: 45rem) {
    .weather-icon {
      width: 3.5rem;
      height: 3.5rem; } }

.icon {
  width: 3rem;
  height: 3rem;
  fill: #e9ecef; }
  @media only screen and (max-width: 31.25rem) {
    .icon {
      width: 2.6rem;
      height: 2.6rem; } }

.weather-icon {
  fill: #e9ecef; }

.highlighted {
  background-color: #e9ecef48; }

.title-icon {
  width: 4.6rem;
  height: 4.6rem;
  fill: #e9ecef; }
  @media only screen and (max-width: 48.75rem) {
    .title-icon {
      width: 3.6rem;
      height: 3.6rem; } }

.refresh-button {
  position: absolute;
  top: 7%;
  right: 6.5%;
  border: 1px transparent;
  border-style: none;
  padding: 1rem;
  background-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  display: none;
  align-items: center;
  justify-content: center; }
  .refresh-button:hover {
    background-color: #f7f9fb25; }
  @media only screen and (max-width: 62.5rem) {
    .refresh-button {
      right: 7%; } }
  @media only screen and (max-width: 45rem) {
    .refresh-button {
      top: 6.5%; } }
  @media only screen and (max-width: 45rem) {
    .refresh-button {
      top: 6%; } }
  .refresh-button .refresh-icon {
    width: 3rem;
    height: 3rem; }

.display-info-box__left-panel--forecasts-list::-webkit-scrollbar,
.right-panel__down-list::-webkit-scrollbar {
  width: 7px; }

.display-info-box__left-panel--forecasts-list::-webkit-scrollbar-track,
.right-panel__down-list::-webkit-scrollbar-track {
  background: transparent; }

.display-info-box__left-panel--forecasts-list::-webkit-scrollbar-thumb,
.right-panel__down-list::-webkit-scrollbar-thumb {
  background: #e9ecef;
  border-radius: 4px; }

.display-info-box__left-panel--forecasts-list::-webkit-scrollbar-thumb:hover,
.right-panel__down-list::-webkit-scrollbar-thumb:hover {
  background: #d6dadd; }

.display-info-box__left-panel--forecasts-list::-webkit-scrollbar-button,
.right-panel__down-list::-webkit-scrollbar-button {
  fill: #d6dadd; }

.move-label {
  transform: translate(-1px, -25px);
  font-size: 1.4rem !important; }

.move-f-label {
  transform: translate(-1px, -25px);
  font-size: 1.6rem !important; }

.left-panel--settings__hour-format,
.left-panel--settings__temp {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; }
  .left-panel--settings__hour-format p,
  .left-panel--settings__temp p {
    font-size: 1.6rem;
    color: #e9ecef; }
  .left-panel--settings__hour-format div,
  .left-panel--settings__temp div {
    display: flex;
    align-items: center;
    gap: 1rem; }
    .left-panel--settings__hour-format div .label,
    .left-panel--settings__temp div .label {
      color: #e9ecef;
      font-weight: 500; }

#h24:checked + .settings-label {
  background-color: #5a9ada; }

#ampm:checked + .settings-label {
  background-color: #5a9ada; }

#fahrenheit:checked + .settings-label {
  background-color: #5a9ada; }

#celsius:checked + .settings-label {
  background-color: #5a9ada; }

#fh24:checked + .settings-label {
  background-color: #5a9ada; }

#fampm:checked + .settings-label {
  background-color: #5a9ada; }

#ffahrenheit:checked + .settings-label {
  background-color: #5a9ada; }

#fcelsius:checked + .settings-label {
  background-color: #5a9ada; }

.loading-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  border: 1px solid #e9ecef;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  backdrop-filter: blur(4px);
  display: none; }
  .loading-box span {
    color: #e9ecef;
    font-size: 1.8rem;
    font-weight: 400; }

.loading-icon {
  width: 2rem;
  height: 2rem;
  animation: spin infinite 2s; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.message-box {
  position: absolute;
  z-index: 10;
  padding: 1rem 2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(177, 21, 21, 0.16);
  backdrop-filter: blur(4px);
  border: 1px solid #e9ecef; }
  .message-box span {
    font-size: 1.8rem;
    color: #e9ecef; }

.message-box-hidden {
  visibility: hidden;
  opacity: 0; }