:root {
  --primary-color: #1d1d1d;
}

.event-overlay {
  /* @media only screen and (max-width: 1024px) {
    .header {
      padding: 35px;
    }
    .landing-container {
      padding: 50px 100px;

      .event-details-container {
        display: flex;
        flex-wrap: wrap;

        .event-details-left-container {
          width: 100%;
          margin-bottom: 15px;

          .event-details-left-container-img {
            max-width: 100%;
            text-align: center;
            margin: auto;
            margin-bottom: 39px;
          }
        }
      }
    }
  } */
  /* @media only screen and (max-width: 820px) {
    .landing-container {
      padding: 50px 100px;
      .event-details-container {
        display: flex;
        flex-wrap: wrap;

        .event-details-left-container {
          width: 100%;
          margin-bottom: 15px;

          .event-details-left-container-img {
            max-width: 100%;
            text-align: center;
            margin: auto;
            margin-bottom: 39px;
          }
        }
      }
    }
  } */
  @media only screen and (max-width: 1200px) {
    /* @media only screen and (max-width: 600px) { */
    .header {
      padding: 35px;
    }

    .loading-page {
      .logo {
        width: 65%;
        height: 30%;
      }
    }

    .landing-container {
      padding: 50px 100px;
      padding-top: 0;

      .event-details-container {
        display: flex;
        flex-direction: column;
        padding-top: 110px;

        .event-details-left-container {
          .event-details-left-container-img {
            margin-bottom: 24px;
            height: 400px;
            width: 100%;
            /* max-width: 100%; */
          }

          button {
            display: none;
          }
        }

        .event-details-right-container {
          h2 {
            font-size: 28px;
          }

          .event-tickets-btn {
            display: block;
            width: 100%;
            height: 46px;
            border-radius: 63px;
            font-size: 16px;
            margin-bottom: 24px;
          }
        }
      }
    }

    .buy-ticket-page {
      position: relative;
      height: 100dvh;
      .header {
        /* display: none; */
        .header-buttons {
          .btn-flex {
            p {
              display: none;
            }
          }
        }
      }

      .buy-ticket-container {
        padding: 35px;
        grid-template-columns: auto;
        gap: 0;
        padding-top: 60px;

        .back-btn-link {
          display: block;

          .back-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            background: none;
            border: none;
            margin-bottom: 21px;

            i {
              font-size: 20px;
            }
          }
        }

        .empty-back-btn-gap {
          display: block;
          height: 45px;
        }

        .buy-ticket-container-left {
          .buy-ticket-container-left_step-container {
            display: none;
          }

          .buy-ticket-container-left_ticket-container {
            h3 {
              font-size: 28px;
              margin-bottom: 24px;
            }

            & .buy-ticket-container-left_ticket-container-types {
              & .buy-ticket-container-left_ticket-container-types-type {
                .price {
                  .subtle-description-text {
                    width: calc(100% - 150px);
                  }
                }
              }
            }
          }

          .buy-ticket-container-left_contact-container {
            h3 {
              font-size: 28px;
              margin-bottom: 24px;
            }

            div.form-group {
              &:last-child {
                margin-bottom: 24px !important;
              }
            }

            .row {
              &:last-child {
                div.form-group {
                  &:last-child {
                    margin-bottom: 0 !important;
                  }
                }
              }
            }

            .buy-ticket-container-left_contact-container-form-container {
              &:last-child {
                margin-bottom: 80px !important;
              }
            }
          }

          .buy-ticket-container-mobile-order-summary {
            display: block;
            .buy-ticket-container-right {
              right: unset;
              display: block;
              width: 100%;
              padding-right: 20%;

              h5 {
                font-size: 28px;
                font-weight: 700;
                margin-bottom: 24px;
              }

              .buy-ticket-container-right_order-summary-container-continue-btn {
                display: none;
              }
            }
          }
        }

        .buy-ticket-container-right {
          display: none;
        }
      }

      .continue-btn-container {
        position: fixed;
        background: white;
        display: block;
        height: 96px;
        padding: 24px;
        width: 100%;
        bottom: 0;

        button {
          width: 100%;
          height: 46px;
          border-radius: 63px;
          font-size: 16px;
          font-weight: 500;
          border: none;
          background-color: #1884f6;
          color: #fff;
        }
      }
    }

    .payment-complete-container {
      padding: 40px 24px;

      h6 {
        margin-bottom: 16px;
      }

      h2 {
        width: 95%;
      }

      p.payment-complete-container_description {
        width: 100%;
        margin-bottom: 24px;
      }

      .download-container {
        ul li .download-buttons {
          position: relative;
          left: -11px;
        }
      }
    }
  }

  @media only screen and (max-width: 600px) {
    .landing-container {
      padding: 24px;
    }

    .buy-ticket-page {
      .buy-ticket-container {
        padding-top: 40px;
      }
    }
  }

  @media only screen and (max-width: 590px) {
  }
}

.admin-overlay {
  @media only screen and (max-width: 600px) {
    /* phone screens */
    img.logo {
      width: 200px;
    }
    .login-container {
      .login__form {
        padding: 89px 24px;
        align-items: baseline;

        .login__form-container {
          margin-top: 20px;
        }
      }

      .login__image {
        display: none;
      }
    }

    .loading-page {
      .logo {
        width: 65%;
        height: 65%;
      }
    }

    .dashboard {
      .desktop {
        display: none;
      }

      .mobile {
        display: block;
      }

      .dashboard-content {
        padding: 0 24px !important;
        .dashboard-content__title {
          margin-bottom: 24px;
          h1 {
            font-size: 28px;
            font-weight: 600;
          }
        }

        .dashboard-content__stats {
          .dashboard-content__stats-item {
            display: flex;
            align-items: center;
            gap: 8px;
            align-items: center;
            margin-bottom: 16px;
            justify-content: space-between;

            h4,
            p {
              font-size: 14px;
              font-weight: 400;
              margin-bottom: 0;
            }

            h4 {
              color: #000;
              span {
                color: var(--secondary-text-color);
              }
            }
            p {
              color: #000;
            }

            a {
              font-size: 12px;
              font-weight: 400;
              color: #1884f6;
              text-decoration: none;
            }
          }
        }

        .dashboard-content__search {
          height: auto;
          margin-bottom: 24px;

          .dashboard-content__search-input {
            display: flex;
            align-items: center;
            border: 1px solid #e9e9e9;
            padding: 0px 10px;
            border-radius: 8px;
            height: 32px;
            overflow: hidden;
            padding: 8px 12px;

            i {
              font-size: 16px;
            }

            input {
              border: none;
              font-size: 14px;

              &:focus {
                outline: none;
              }
            }
          }

          .dashboard-content__search-filters {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 10px;

            .custom-select {
              width: 100%;
            }
          }
        }

        .dashboard-content__tickets-list {
          .dashboard-content__tickets-list-item {
            li {
              list-style: none;
            }
            .dashboard-content__tickets-list-item-info {
              margin-bottom: 24px;
              h4 {
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 4px;
              }
              p {
                font-size: 14px;
                font-weight: 400;
                margin-bottom: 4px;
                line-height: 20px;
              }

              .statuses {
                margin-top: 8px;
                display: flex;
                align-items: center;
                gap: 8px;

                p {
                  margin-bottom: 0;
                }
              }
            }
          }
        }
      }
    }

    .header {
      padding: 21px 24px !important;
      border-bottom: none;
    }

    .back-navigation {
      margin-bottom: 10px;
      cursor: pointer;

      i {
        font-size: 16px;
      }
    }

    .request-payout-screen {
      display: block;

      .request-payout-screen__header {
        padding: 0 24px;

        h1 {
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 0;
        }
      }

      .request-payout-screen__container {
        padding: 24px;

        .form-input-group {
          margin-bottom: 12px;

          label {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 10px;

            span {
              color: #d32f2f;
            }
          }
        }

        p {
          font-size: 14px;
          font-weight: 400;
          line-height: 16px;
          margin-bottom: 24px;

          span {
            color: var(--secondary-text-color);
          }
        }
      }
    }

    .pagination-container ul {
      flex-wrap: wrap;
      justify-content: center;
    }

    .create-event {
      .create-event__header {
        padding: 20px;
      }
      .create-event__container {
        padding: 0px 10px;
        flex-direction: column-reverse;

        .upload-event-image-container {
          display: flex;
          justify-content: center;
          padding-bottom: 40px;

          .upload-img-container {
            margin-top: 0;
          }
        }
      }

      .modal-content {
        width: 100% !important;

        .ticket-price {
          .form-group {
            width: 70%;
          }
        }
      }
    }
  }

  @media only screen and (max-width: 768px) {
    .header {
      padding: 0 45px;
    }
    .dashboard {
      .dashboard-content {
        padding: 0 45px;
      }
      .dashboard-header {
        padding: 21px 45px;
        flex-wrap: wrap;
        height: fit-content;
        gap: 10px;

        .dashboard-header__actions {
          .btn {
            font-size: 14px;
          }
        }
      }
    }

    .pagination-container {
      justify-content: center;
      gap: 15px;
    }
  }

  @media only screen and (max-width: 992px) {
    .create-event {
      .create-event__container {
        flex-direction: column-reverse;

        .upload-event-image-container {
          display: flex;
          justify-content: center;
          padding-bottom: 40px;

          .upload-img-container {
            margin-top: 0;
            justify-content: center;
            display: grid;
          }
        }
      }
    }
  }
}

/* .create-event {
  .create-event__header {
    padding: 20px;
  }
  .create-event__container {
    padding: 0px 10px;
    flex-direction: column-reverse;

    .upload-event-image-container {
      display: flex;
      justify-content: center;
      padding-bottom: 40px;

      .upload-img-container {
        margin-top: 0;
      }
    }
  }

  .modal-content {
    width: 100%;
  }
} */