:root {
      --main: #329cfb;
      --white: #fff;
      --black: #14183e;
      --lightblack: #5e6282;
      --lightgray: #ddd;
      --red: #eb224d;
      --button-bg: #329cfb;
}

.swal-error {
      background-color: #f8d7da !important;
      width: 70vw;
}

#user_tickets tbody tr td:nth-child(3)>div {
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
      margin-bottom: 5px;
}

#user_tickets tbody tr td:nth-child(3)>div:last-child {
      border-bottom: 0;
      padding-bottom: 0px;
      margin-bottom: 0px;
}

.footer {
      left: 0px !important;
}


/* ====================================== Pre-loader Start ================================ */
.main-content {
      position: relative;
      min-height: 100vh;
}

.processing-loader {
      position: absolute;
      top: 70px;
      bottom: 60px;
      left: 0;
      right: 0;
      z-index: 2;
      user-select: none;
      display: none;
}

.processing-loader .loader-section {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      margin: 0;
      background: rgba(0, 0, 0, 0.5);
}

.loader-title {
      background: #ffff;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px 60px;
      margin: 0;
      cursor: progress;
}

.processing-loader.loading {
      display: block !important;
}

/* ====================================== Pre-loader End ================================ */
.select2-container {
      width: 100% !important;
}


& .row-section {
      margin: 40px 0;
}

& .sub-header-text {
      font-size: 18px;
      line-height: 30px;
      color: var(--lightblack);
      font-weight: 600;
}

& .sub-header-text {
      font-size: 18px;
      line-height: 30px;
      color: var(--lightblack);
      font-weight: 600;
}

& .step-description {
      min-height: 113px;
      font-size: 18px;
      line-height: 27px;
      color: var(--lightblack);
      margin-bottom: 0;
      text-align: left;
}

& .page-title {
      font-weight: 700;
      font-size: 40px;
      color: var(--black);
}

& #pills-countries p {
      font-size: 14px;
      line-height: 1.3;
}

& .country-bundle-section {
      margin-top: 30px;

      & .country-card {
            border: 1px solid transparent;
            border-radius: 7px;
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .15);
            overflow: hidden;
            background-color: #fff;
            text-decoration: none;
            display: block;
      }

      & .country-card-body {
            padding: 13px 20px 12px;
            font-family: "IBM Plex Sans", sans-serif;
            font-style: normal;
            font-weight: 500;

            & .country-card-img {
                  width: 40px;
                  height: 30px;

                  & img {
                        width: 100%;
                        height: 100%;
                  }

            }

            & p {
                  color: var(--black);
                  margin: 0;
            }

            & .arrow-icon {
                  color: var(--lightgray);
            }

      }
}

& .region-bundle-section {
      margin-top: 30px;

      & .region-card {
            border: 1px solid transparent;
            border-radius: 7px;
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .15);
            overflow: hidden;
            background-color: #fff;
            text-decoration: none;
            display: block;
      }

      & .region-card-body {
            padding: 13px 20px 12px;

            & .region-card-img {
                  width: 40px;
                  height: 30px;
                  border-radius: 2px;
                  background: var(--lightgray);
                  padding: 3px 4px;

                  & img {
                        width: 100%;
                        height: 100%;
                  }

            }

            & p {
                  color: var(--black);
                  margin: 0;
            }

            & .arrow-icon {
                  color: var(--lightgray);
            }

      }
}

& .global-bundle-section {
      margin-top: 30px;
}

.bundle-card {
      border-radius: 20px;
      box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .15);
      overflow: hidden;
      text-decoration: none;
      display: block;
      background: #ffff;
      margin-bottom: 20px;

      & .bundle-card-body {
            padding: 20px;

            & .bundle-card-header {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 0 0 15px;
                  border-bottom: 1px solid rgba(0, 0, 0, .1);
                  box-sizing: border-box;
                  flex-direction: row;
                  gap: 12px;

                  & .header-img-title {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 10px;

                        & .header-title {
                              font-weight: 500;
                        }

                        & .header-img {
                              width: 55px;
                              height: 55px;
                              object-fit: cover;
                              border-radius: 90px;
                              border: 1px solid #ebebeb;
                              overflow: hidden;

                              & img {
                                    width: 100%;
                                    height: 100%;
                              }

                        }
                  }

                  & .header-data-plan {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 8px;
                        min-width: 90px;

                        & h4 {
                              margin: 0;
                        }

                        & a {
                              color: var(--lightblack);
                        }

                  }
            }

            & .bundle-card-item {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 10px 0;
                  box-sizing: border-box;

                  & .bundle-card-item-validity {
                        font-size: 13px;
                        font-weight: 400;
                  }

                  & .bundle-card-item-available-in {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 5px;

                        & .available-in-title {
                              font-size: 13px;
                        }

                        & .available-in-img {
                              width: 18px;
                              height: 18px;
                              border-radius: 90px;
                              object-fit: cover;
                        }

                  }

                  & .supported-countries {
                        width: 100%;
                        background-color: #f2f4f7;
                        border-radius: 6px;
                        box-shadow: none;
                        padding: 15px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 10px;

                        & .title {
                              font-size: 12px;
                              font-weight: 500;
                              color: var(--lightblack);
                        }

                        & .flag-tags {
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                              position: relative;
                              user-select: none;

                              & .flags-countries {
                                    margin-right: 18px;

                                    & .supported-flag-normal {
                                          border-radius: 90px;
                                          width: 24px;
                                          height: 24px;
                                          margin-left: -10px;
                                          object-fit: cover;
                                    }

                              }

                              & .flag-count {
                                    border-radius: 90px;
                                    width: 24px;
                                    height: 24px;
                                    background-color: #f2f4f7;
                                    border: 2px solid var(--white);
                                    font-size: 12px;
                                    box-sizing: border-box;
                                    position: absolute;
                                    right: 0;
                                    top: 0;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    color: var(--lightblack);
                                    cursor: pointer;
                              }

                        }
                  }

                  & .bundle-purchase-btn {
                        width: 100%;
                        background: #122644;
                        border-radius: 50px;
                        font-weight: 600;
                        padding: 10px 20px;
                        transition: all .25s;
                        color: var(--white);
                        outline: none;
                        border: none;
                        text-align: center;
                        text-decoration: none;

                        &:hover {
                              background-color: var(--main);
                        }

                  }
            }
      }
}

#bundle-detail-modal {

      & .modal-body {

            & .bundle-detail-card {
                  width: 100%;
                  margin-bottom: 30px;

                  & .bundle-detail-item {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 10px;
                        border-bottom: 1px solid var(--lightgray);
                        padding: 10px 0;

                        & .bundle-detail-item-key {
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                              gap: 10px;
                        }

                        & .bundle-detail-item-value {
                              font-weight: 500;
                        }

                  }
            }

            & .supported-countries-card {
                  width: 100%;
                  background-color: #fff;
                  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .15);
                  border-radius: 7px;
                  padding: 10px;


                  & ul {
                        height: 275px;
                        overflow-y: auto;
                        margin: 0;
                        padding: 0;

                        & li {
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                              border-top: 1px solid var(--lightgray);
                              padding: 10px 15px;
                        }

                  }
            }

            & .additional-information-card {
                  width: 100%;
                  background-color: #fff;
                  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .15);
                  border-radius: 7px;
                  padding: 10px;

                  & ul {
                        height: 275px;
                        overflow-y: auto;
                        margin: 0;
                        padding: 0;

                        & li {
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                              border-bottom: 1px solid var(--lightgray);
                              padding: 10px 15px;

                              & .additional-li {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    gap: 10px;

                                    & .additional-details {

                                          & .sub-title {
                                                font-size: 12px;
                                          }

                                          & .title {
                                                font-size: 14px;
                                          }

                                    }
                              }
                        }
                  }
            }
      }

      & .modal-footer {
            justify-content: space-between;

            & .final-buy {
                  width: 40%;
            }

      }
}

.checkout-container {
      width: 100%;
      margin: 30px auto;

      & .bundle-checkout-card {
            border-radius: 20px;
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .15);
            background: var(--white);
            padding: 20px 30px 30px;
            margin-bottom: 20px;

            & .bundle-checkout-item {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  gap: 10px;
                  border-bottom: 1px solid var(--lightgray);
                  padding: 10px 0;

                  & .bundle-checkout-item-key {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 10px;
                  }

                  & .bundle-checkout-item-value {
                        font-weight: 500;

                        & .cart-item-delete-btn {
                              width: 30px;
                              height: 30px;
                              border-radius: 50%;
                              box-shadow: 0 2px 4px 1px rgba(0, 0, 0, .15);
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              color: var(--red);
                              text-decoration: none;
                        }

                  }

            }
      }

      & .coupon-section {
            margin: 10px 0;

            & h5 {
                  margin-bottom: 15px;
            }

            & .coupon-form {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  gap: 15px;
                  margin-bottom: 20px;

                  & input {
                        line-height: 2;
                  }
            }

            & .coupon-section {
                  margin-bottom: 20px;

                  & a {
                        display: inline-block;
                        width: 100%;
                        font-weight: 400;
                        line-height: 2;
                        color: var(--black);
                        background: #329cfb1f;
                        text-align: center;
                        text-decoration: none;
                        vertical-align: middle;
                        cursor: pointer;
                        user-select: none;
                        padding: .375rem .75rem;
                        font-size: 1rem;
                        border-radius: .25rem;
                  }

            }

            & .coupon-apply-btn {
                  background: var(--button-bg);
                  border-radius: 4px;
                  border: 2px solid var(--button-bg);
                  color: #fff;
                  font-size: 18px;
                  text-decoration: none;
                  padding: 7px 25px;
                  height: 100%;
                  box-sizing: border-box;
            }

      }

      & .payment-method-section {
            margin: 10px 0;

            & h5 {
                  margin-bottom: 15px;
            }

            & .payment-method-card {
                  width: 100%;
                  background-color: var(--white);
                  border-radius: 10px;
                  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .15);
                  padding: 10px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                  gap: 5px;
                  cursor: pointer;

                  & img {
                        width: 80px;
                  }

                  & .payment-method-title {}

                  &:hover {
                        background: var(--main);
                        color: var(--white);
                  }

                  &.active {
                        background: var(--main);
                        color: var(--white);
                  }

            }
      }

      & .checkout-summary-section {
            margin: 30px 0;
      }

      & .bundle-checkout-pay-btn {
            display: inline-block;
            background: var(--button-bg);
            border-radius: 42px;
            border: none;
            color: #fff;
            font-size: 18px;
            text-decoration: none;
            padding: 10px 30px;
            margin-top: 10px;
      }

}

.coupon-list-section {
      & .coupon-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;

            & .coupon-info {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  gap: 15px;

                  & .icon {
                        width: 40px;
                        height: 40px;
                        padding: 5px;
                        background: #329cfb1f;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                  }

                  & .title {
                        margin: 0;
                  }

                  & p {
                        margin: 0;
                  }
            }

            & .apply-now {
                  & button {
                        background: var(--button-bg);
                        border-radius: 4px;
                        border: 2px solid var(--button-bg);
                        color: var(--white);
                        font-size: 16px;
                        text-decoration: none;
                        padding: 5px 15px;
                        box-sizing: border-box;
                  }
            }
      }
}

.wallet-card {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 30px;
      box-shadow: 0 3px 12px 0 rgba(0, 0, 0, .06);
      border-radius: 26px;
      padding: 20px;
      margin-bottom: 20px;
}

.top-up-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 5px;
      border-radius: 12px;
      border: 1px solid #e0e0e0;
      background-color: #fff;
      padding: 12px;
      margin-bottom: 10px;

&.active{
       color: var(--main);
       border: 1px solid var(--main);
 }

& .top-up-information{
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        flex-direction: column;

& .top-up-border{
        width: 1px;
        height: 20px;
        background: #dee2e6;
  }

& .top-information{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
  }

& .bottom-information{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        border-top: 1px solid #e0e0e0;
        padding-top: 10px;
  }
}
}