/* CSS for Tiny Portrait Screens (e.g. iPhone 5, Galaxy Note 3) */
@media only screen and (min-width: 300px) {
  .not_sure_emoji_icon_path {
    transform: scale(0.4);
  }

  .not_sure_booked_emoji_icon_path {
    transform: scale(0.6);
  }

  .unsure_popup_buttons_container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.4rem;
  }

  .unsure_popup_not_sure_button {
    background: rgb(44, 44, 52);
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 30px;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .unsure_popup_dismiss_button {
    border: 2px solid rgb(44, 44, 52);
    color: rgb(44, 44, 52);
    text-align: center;
    border-radius: 30px;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* CSS for Small Portrait Screens (e.g. iPhone 6/7/8, iPhone X) */
@media only screen and (min-width: 360px) {
  .unsure_popup_not_sure_button {
    font-size: 0.8rem;
    padding: 0.6rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .unsure_popup_dismiss_button {
    font-size: 0.8rem;
    padding: 0.6rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Google Pixel 4XL */
@media screen and (device-width: 480px) and (device-height: 1014px) {
  @supports not (-webkit-overflow-scrolling: touch) {
    /* CSS for other than iOS devices */
    .unsure_popup_not_sure_button {
      font-size: 0.9rem;
      padding: 0.5rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-right: 1rem;
    }

    .unsure_popup_dismiss_button {
      font-size: 0.9rem;
      padding: 0.5rem;
      padding-left: 2rem;
      padding-right: 2rem;
      margin-left: 1rem;
    }
  }
}

/* CSS for Tablets in Portrait Mode */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .unsure_popup_not_sure_button,
  .unsure_popup_dismiss_button {
    font-size: 1rem;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .notification_text_container {
    width: 65%;
  }

  .notification_text_container h3 {
    font-size: 1.5rem;
  }

  .notification_text_container p {
    font-size: 1rem;
  }

  .unsure_popup_not_sure_button {
    margin-right: 2rem;
  }

  .unsure_popup_buttons_container {
    padding-top: 0.5rem;
    justify-content: flex-start;
  }
}

/* CSS for Larger Tablets in Portrait Mode */
@media only screen and (min-width: 1024px) and (max-device-height: 1400px) {
  .unsure_popup_not_sure_button,
  .unsure_popup_dismiss_button {
    font-size: 1.8rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .notification_text_container h3 {
    font-size: 1rem;
  }
}

/* CSS for laptops and regular-sized desktops */
@media only screen and (min-width: 1200px) and (orientation: portrait) {
  .unsure_popup_not_sure_button,
  .unsure_popup_dismiss_button {
    font-size: 1.5rem;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .notification_text_container {
    width: 65%;
  }

  .notification_text_container h3 {
    font-size: 1.9rem;
  }

  .notification_text_container p {
    font-size: 1.5rem;
  }

  .unsure_popup_not_sure_button {
    margin-right: 2rem;
  }

  .unsure_popup_buttons_container {
    padding-top: 1.5rem;
    justify-content: flex-start;
  }
}

/* CSS for laptops and regular-sized desktops */
@media only screen and (min-width: 1200px) and (orientation: landscape) {
  .unsure_popup_buttons_container {
    padding-top: 0.5rem;
  }

  .unsure_popup_not_sure_button,
  .unsure_popup_dismiss_button {
    font-size: 0.7rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .unsure_popup_not_sure_button {
    background: rgb(74, 74, 82);
  }

  .unsure_popup_not_sure_button:hover {
    background: rgb(44, 44, 52);
    transition: all 0.5s ease;
  }

  .unsure_popup_not_sure_button {
    margin-right: 0.5rem;
  }

  .unsure_popup_dismiss_button {
    margin-left: 0.5rem;
    border: 2px solid rgb(74, 74, 82);
  }

  .unsure_popup_dismiss_button:hover {
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.5s ease;
  }
}

/* CSS for Medium Laptops */
@media only screen and (min-width: 1400px) {
  .unsure_popup_not_sure_button,
  .unsure_popup_dismiss_button {
    font-size: 0.8rem;
    padding-left: 2.3rem;
    padding-right: 2.3rem;
  }
}

/* CSS for Big Desktops */
@media only screen and (min-width: 1800px) {
  .unsure_popup_buttons_container {
    padding-top: 1rem;
  }

  .unsure_popup_not_sure_button,
  .unsure_popup_dismiss_button {
    font-size: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .unsure_popup_not_sure_button {
    margin-right: 3rem;
  }

  .unsure_popup_dismiss_button {
    margin-left: 3rem;
  }
}

/* CSS for Huge Desktops */
@media only screen and (min-width: 2200px) {
  .unsure_popup_buttons_container {
    padding-top: 1rem;
  }

  .unsure_popup_not_sure_button,
  .unsure_popup_dismiss_button {
    font-size: 1.5rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .unsure_popup_not_sure_button {
    margin-right: 3rem;
  }

  .unsure_popup_dismiss_button {
    margin-left: 3rem;
  }
}
