@import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap");

:root {
  /* Colors */
  --background-color: #ffffff !important;
  --blue: #2087ff !important;
  --dark-blue: #0052bd !important;
  --light-blue: #cbdffe !important;
  --grey: #f4f4f4 !important;
  --dark-grey: #e2e2e2 !important;
  --darker-grey: #777777 !important;
  --red: #ff3b20 !important;
  --light-red: #ffaaaa !important;
  --orange: #ff6f1f !important;
}

.container {
  height: 100vh !important;
  background: var(--background-color) !important;
}

.confirmation_popup {
  height: 100% !important;
  width: 100% !important;
  background: #00000080 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 99999999 !important;

  &__details {
    position: fixed !important;
    z-index: 99999 !important;
    width: 328px !important;
    min-height: 280px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-color: white !important;
    border-radius: 30px !important;
    border: 2px solid #f0f0f0 !important;

    &__header {
      display: flex !important;
      justify-content: space-between !important;
      margin-top: 14px !important;

      &__title {
        font-size: 20px !important;
        line-height: 24px !important;
        letter-spacing: 0em !important;
        width: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin-left: 14px !important;
        font-family: Inter !important;
      }

      &__buttons {
        width: 50% !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 11px !important;
        margin-right: 18px !important;
        cursor: pointer !important;
        &__close {
          height: 12px !important;
          aspect-ratio: 1 !important;
          border-radius: 100% !important;
          padding: 11px !important;
          border: 2px solid #f0f0f0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          &__cross {
            color: #000000 !important;
          }
        }
      }
    }
    &__content {
      margin-top: 6px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
      width: 100% !important;

      &__text {
        margin: 0 14px !important;
        font-size: 16px !important;
        
        & strong {
          font-weight: 600 !important;
          font-size: 16px !important;
        }
      }

      &__input {
        &__label {
          margin: 0 14px !important;
          color: #2087ff !important;
          margin-bottom: 16px !important;
          font-size: 16px !important;
          font-family: Inter !important;
        }

        &__container {
          display: flex !important;
          width: calc(100% - 24px) !important;
          margin: 0 12px !important;
        }
      }
    }
    &__button {
      margin: 24px !important;
    }
  }
}
