* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: "Noto Sans Arabic", sans-serif;
}

:root {
  --main-01-color: #d9ac4f;
  --light-main-color: rgba(217, 172, 79, 0.4);
  --light-main-color-2: rgba(217, 172, 79, 0.5);
  --light-main-02-color: rgba(217, 172, 79, 0.16);
  --light-main-03-color: rgba(217, 172, 79, 0.08);
  --light-main-04-color: rgba(217, 172, 79, 0.12);
  --white-01-color: #ffffff;
  --dark-01-color: #000000;
  --dark-02-color: rgba(0, 0, 0, 0.7);
  /* --dark-03-color: rgba(0, 0, 0, 0.8); */
  --dark-03-color: #28305F;
  --dark-04-color: rgba(0, 0, 0, 0.4);
  --dark-05-color: rgba(0, 0, 0, 0.05);
  --dark-06-color: rgba(0, 0, 0, 0.6);
  --dark-07-color: rgba(0, 0, 0, 0.12);
  --new-01-color: #c3a474;
  --light-new-color: rgba(217, 172, 79, 0.2);
  --dark-blue-color: #28305f;
  --light-blue-color: rgba(40, 48, 95, 0.12);
  --light-blue-color-02: rgba(40, 48, 95, 0.06);
  --light-blue-color-03: rgba(40, 48, 95, 0.8);
  --light-blue-color-04: rgba(40, 48, 95, 0.4);
  --light-blue-color-05: rgba(40, 48, 95, 0.2);
  --light-blue-color-06: rgba(40, 53, 108, 0.2);
  --green-01-color: rgba(47, 202, 137, 1);
  --gray-01-color: rgba(195, 195, 195, 1);
  --gray-02-color: rgba(218, 218, 218, 1);

  --radius-8: 8px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-40: 40px;
  --box-shadow: 6px 6px 54px 0px rgba(0, 0, 0, 0.05);
}

body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--white-01-color);
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* =================================
START SHARED
==================================*/
.btn-main {
  width: auto ;
  padding: 5px 24px !important;
  background: var(--main-01-color) !important;
  color: var(--white-01-color) ;
  font-size: 17px !important;
  font-weight: 500 !important;
  text-align: center !important;
  border: 1px solid var(--main-01-color) !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.btn-main-dark {
  background: var(--dark-blue-color) !important;
  border-color: var(--dark-blue-color) !important;
}

.btn-transparent-bg {
  background: transparent !important;
  border-color: var(--main-01-color) !important;
  color: var(--main-01-color) !important;
  height: 45px !important;
  padding: 15px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.5s !important;
}

.btn-transparent-bg:hover {
  background: var(--main-01-color) !important;
  color: var(--white-01-color) !important;
}

.status-shared {
  background: var(--light-new-color) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--main-01-color) !important;
  text-align: center !important;
  max-width: max-content !important;
  padding: 5px 27px !important;
  border-radius: 50px !important;
}

.status-blue {
  background: var(--light-blue-color) !important;
  color: var(--dark-blue-color) !important;
  background: linear-gradient() !important;
}

.status-new {
  background: var(--light-main-03-color) !important;
  color: var(--dark-02-color) !important;
}

.button-filter {
  position: fixed !important;
  bottom: 40px !important;
  left: 50% !important ;
  transform: translateX(-50%) !important;
  display: none !important;
}
.button-filter .btn-main {
  padding-block: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.btn-main-gray {
  background: var(--gray-01-color) !important;
  border-color: var(--gray-01-color) !important;
}
.btn-main-gray-2 {
  background: var(--light-blue-color) !important;
  border-color: var(--light-blue-color) !important;
}
.height-50 {
  height: 50px !important;
}

.height-56 {
  height: 56px !important;
}
.raduis-14 {
  border-radius: 14px !important;
}
.gradient-btn {
  background: radial-gradient(
    50% 50% at 50% 50%,
    #31408d 0%,
    #2f375f 100%
  ) !important;
  color: var(--white-01-color) !important;
  border-color: var(--dark-blue-color) !important;
  padding-inline: 25px !important;
  gap: 15px !important;
}
.gradient-btn:hover {
  color: var(--white-01-color) !important;
  background: radial-gradient(
    50% 50% at 50% 50%,
    #31408d 0%,
    #2f375f 100%
  ) !important;
}
/* =================================
END SHARED
================================== */
/* ===========================================
START HEADER GOLDEN
============================================= */
.all-main-content {
  padding: 145px 0 50px 0 !important;
}
.header-golden .image-product img {
  width: 100% !important;
  height: 115px !important;
  /* min-height: 100% !important; */
  aspect-ratio: 1.8 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--radius-12) !important;
}
.header-golden :is(.title-product, .title-top) {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--dark-01-color) !important;
  line-height: 1.5 !important;
}
.header-golden :is(.title-product) {
    max-width: 500px !important;
    height: 60px !important;
    max-height: 60px !important;
    /* max-width: 400px !important; */
    margin-bottom: 0 !important;
}
.header-golden .icon-arrow-left {
  display: none;
}


@media screen and (max-width: 1250px) {
  .header-golden :is(.title-product) {
    max-width: 100% !important;
  }
}
.header-golden .info-card-header .text-icon {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--dark-02-color) !important;
  margin-bottom: 0 !important;
}
@media screen and (max-width: 450px) {
  .header-golden .info-card-header .text-icon {
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  .all-main-content .content-header-golden .title-product {
    font-size: 12px !important;
  }
  .header-golden .info-card-header {
    gap: 8px !important;
  }
}
.all-main-content .right-content-box {
  position: relative !important;
}

.all-main-content .right-content-box::after {
  content: "" !important;
  position: absolute !important;
  width: 1px !important;
  height: 98% !important;
  background: var(--light-main-color) !important;
  left: 0 !important;
  top: 30px !important;
}
.all-main-content .bottom-filter {
  border-bottom: 1px solid var(--light-main-color) !important;
}

.all-cards-tickets {
  padding-left: 15px !important;
  background: var(--white-01-color) !important;
}
.all-cards-tickets .title-top {
  font-size: 17px !important;
  line-height: initial !important;
  padding: 12px 0 0 0 !important;
}
.all-cards-tickets .main-cards-tickets {
  height: 500px !important;
  overflow-y: auto !important;
  padding-left: 15px !important;
}
.all-cards-tickets .main-cards-tickets::-webkit-scrollbar,
.custom-select .all-options::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
:is(
    .main-title-filter .title-top-filter,
    .all-main-content .left-content-box-top,

    .main-filter-buttons .btn-main
  ) {
  display: none !important;
}

.main-title-filter .title-top-filter {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--dark-01-color) !important;
  padding-bottom: 12px !important;
}
@media screen and (max-width: 767px) {
  .all-main-content .right-content-box::after {
    display: none !important;
  }
  .all-main-content .right-content-box .image-product {
    display: none !important;
  }
  .main-title-filter .title-top-filter {
    display: block !important;
  }
  .main-filter-buttons .btn-main {
    padding: 18px 12px !important;
    display: flex !important;
    border-radius: 14px !important;
  }
  .bg-overlay-filter {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(40, 48, 95, 0.5) !important;
    z-index: 2 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -120% !important;
    transition: bottom 0.4s !important;
  }
  .all-main-content .main-filter-buttons,
  .all-main-content .main-filter-buttons .bottom-filter {
    position: fixed !important;
    background: var(--white-01-color) !important;
    width: 100% !important;
    bottom: -120% !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1005 !important;
    padding: 15px !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .all-main-content .main-filter-buttons.active,
  .all-main-content .main-filter-buttons .bottom-filter.active {
    transition: bottom 0.8s !important;
    bottom: 0 !important;
  }
  .all-main-content .main-filter-buttons.active,
  .bg-overlay-filter.active {
    bottom: 0 !important;
  }
  .arrow-mobile {
    display: block !important;
  }
  .arrow-desktop {
    display: none !important;
  }
  .main-filter-buttons .all-options {
    position: fixed !important;
    width: 100% !important;
    background: var(--white-01-color) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 58.8% !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .custom-select .all-options::-webkit-scrollbar {
    display: none !important;
  }
  .custom-select .all-options {
    transform: translateY(-27%) !important;
    padding: 8px 15px 15px 15px !important;
    background: var(--white-01-color) !important;
    height: 61vh !important ;
    max-height: 100% !important;
    transform: translateY(-30%) !important;
    padding: 15px !important;
  }
  .custom-select .options-container-tickets .option {
    border: 1px solid var(--light-main-color) !important;
    color: var(--light-main-color) !important;
    padding: 15px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
  }
  .custom-select .options-container-tickets .option.selected-option {
    border-color: var(--main-01-color) !important;
    color: var(--main-01-color) !important;
  }
  .custom-select .options-container-category .option {
    color: var(--dark-01-color) !important;
    margin-bottom: 7px !important;
  }
  .all-main-content .main-filter-buttons .bottom-filter .main-filters-select {
    flex-direction: column !important;
  }
  :is(.custom-select-tickets, .custom-select-category, .toggle-container-1) {
    width: 100% !important;
  }
  .all-main-content .left-content-box-top {
    display: flex !important;
  }
  .left-content-box-top {
    position: sticky !important;
    top: 0 !important;
    max-height: 500px !important;
  }
  .custom-select .select-box,
  .toggle-container-1,
  .toggle-container-1 .toggle-info {
    justify-content: center !important;
    gap: 10px !important;
  }
  .custom-select .text-select,
  .custom-select .option,
  .toggle-container-1 .text-toggle {
    color: var(--main-01-color) !important;
  }
  .custom-select .select-box,
  .toggle-container-1 {
    padding: 18px 12px !important;
  }
  .all-main-content .content-header-golden {
    width: 100% !important;
  }
  .header-golden :is(.title-product) {
    max-width: 100% !important;
    max-height: 100% !important;
    height: 25px !important;
  }
  .header-golden .icon-arrow-left {
    display: block;
  }
  .all-main-content .header-golden .content-header-golden {
    border: 1px solid var(--light-main-color) !important;
    border-radius: 12px !important;
    background: var(--white-01-color) !important;
    box-shadow: 0px 0px 12px 0px rgba(217, 172, 79, 0.3) !important;
    padding: 15px !important;
  }
  .all-main-content .header-golden {
    flex-direction: column-reverse !important;
  }
  .all-main-content .content-header-golden .title-product {
    font-size: 16px !important;
  }
  .all-main-content .header-golden .info-card-header {
    margin: 6px 0 0 0 !important;
  }
}
/* Track (background) */
.all-cards-tickets .main-cards-tickets::-webkit-scrollbar-track,
.custom-select .all-options::-webkit-scrollbar-track {
  background: var(--light-main-02-color) !important;
  border-radius: 10px !important;
}
/* Handle (scroll thumb) */
.all-cards-tickets .main-cards-tickets::-webkit-scrollbar-thumb,
.custom-select .all-options::-webkit-scrollbar-thumb {
  background: var(--main-01-color) !important;
  border-radius: 10px !important;
}
.all-cards-tickets .card-product-one {
  border-bottom: 1px solid var(--light-new-color) !important;
  padding: 15px 0 !important;
}
.all-cards-tickets .card-product-one .image-card-product {
  border-radius: 20px !important;
  border-right: 4px solid #120aff !important;
  background: rgba(40, 48, 95, 0.08) !important;
  width: 89px !important;
  height: 89px !important;
  flex-grow: 1 !important;
  flex-basis: 89px !important;
  position: relative !important;
  background: rgba(238, 238, 242, 1) !important;
}
.all-cards-tickets .card-product-one .image-card-product::before {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  left: 44px !important;
  right: -2px !important;
  bottom: -2px !important;
  background: linear-gradient(
    to left,
    #120aff,
    rgba(102, 102, 102, 0)
  ) !important;
  border-radius: inherit !important;
  z-index: -1 !important;
}
.all-cards-tickets .card-product-one .content-info {
  flex-grow: 1 !important;
  flex-basis: 82% !important;
}
.all-cards-tickets .card-product-one :is(.title, .price-card) {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--dark-01-color) !important;
}
.all-main-content .left-content-box img {
  aspect-ratio: 1 / 1.3 !important;
  /* width: 652.29px !important; */
  object-fit: contain !important;
}
@media screen and (max-width: 1399px) {
  .all-main-content .left-content-box .image-card-left {
    aspect-ratio: 1 / 1.1 !important;
    width: 580px !important;
  }
}
@media screen and (max-width: 1199px) {
  .all-main-content .left-content-box .image-card-left {
    width: 100% !important;
  }
}
.pay-info-image .image-src-pay {
  margin-top: 15px !important;
}
.pay-info-image .image-src-pay .image-pay {
  width: 310px !important;
}
@media screen and (max-width: 450px) {
  .pay-info-image .image-src-pay .image-pay {
    width: 100% !important;
  }
}
/* ===========================================
END HEADER GOLDEN
============================================= */
/* ===================================
START PAGE PAYMENT DETAILS
================================== */

.right-content-box-pay .title-text {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--dark-01-color) !important;
  padding: 35px 0 !important;
}
:is(
    .cards-details-boxes .card-box-one .title-box,
    .left-content-box-pay .title-top
  ) {
  font-size: 16px !important; /*size 18*/
  font-weight: 700 !important; /*size 500*/
  color: var(--dark-01-color) !important;
}
.left-content-box-pay .title-top {
  font-size: 15px !important;
}
:is(.cards-details-boxes .card-box-one .text-box) {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--dark-02-color) !important;
  padding-top: 0 !important;
  margin: 0 !important;
}
.cards-details-boxes {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 15px !important;
}
.icon-currency {
  color: var(--dark-blue-color) !important;
  font-size: 25px !important;
}
.icon-currency-dark {
  color: var(--dark-01-color) !important;
  font-size: 23px !important;
}
.left-content-box-pay .total-tickets-price {
  background: var(--light-blue-color-02) !important;
  padding: 9px 20px !important;
  border-radius: 8px !important;
}
.left-content-box-pay .price-info {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--dark-blue-color) !important;
  padding-top: 0px !important;
  margin: 0 !important;
}
.left-content-box-pay .price-info .num-price {
  padding-top: 3px !important;
}
.left-content-box-pay .info-text {
  font-size: 15px !important;
  color: var(--light-blue-color-03) !important;
  font-weight: 500 !important;
}
.left-content-box-pay .status-info-pay {
  width: 100% !important;
  max-width: 100% !important;
  padding-block: 27px !important;
  margin-top: 15px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}
.left-content-box-pay .btn-main-dark {
  width: 100% !important;
  padding: 14px !important;
  border-radius: 14px !important;
  margin-top: 15px !important;
}
.select-box-tickets .form-select {
  padding: 13px;
  border-color: var(--gray-02-color) !important;
  border-radius: 8px ;
  color: var(--dark-04-color) !important;
  font-weight: 500 !important;
  --bs-form-select-bg-img: url("") !important;
}
.select-option-data label {
  font-size: 15px !important;
  color: var(--dark-03-color) !important;
  font-weight: 500 !important;
  padding-bottom: 7px !important;
}
.select-box-tickets {
  position: relative !important;
}
.select-box-tickets .icon-arrow {
  position: absolute !important;
  top: 50% !important;
  left: 15px !important;
  transform: translateY(-50%) !important;
}
.left-content-box-pay .select-box-tickets .form-select {
  border-color: var(--light-blue-color-04) !important;
  color: var(--dark-02-color) !important;
}
.select-option-data .form-select {
  padding-block: 15px !important;
  padding-inline: 24px !important;
}
/* ===================================
END PAGE PAYMENT DETAILS
================================== */
/* ============================
START PAYMENT PAY
============================== */
.no-arrows::-webkit-inner-spin-button,
.no-arrows::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Hide arrows in Firefox */
.no-arrows {
  -moz-appearance: textfield !important;
}
.gift-friend {
  padding: 16px 22px !important;
  border: 1px solid var(--light-main-color-2) !important;
  border-radius: 10px !important;
}
.gift-friend .inputs-gift {
  width: 394px !important;
  margin-right: 25px !important;
  margin-top: 22px !important;
}
.gift-friend .inputs-gift input {
  border: 1px solid var(--light-blue-color-05) !important;
  background: var(--light-main-04-color) !important;
  border-radius: 8px !important;
  padding: 9px !important;
}
.gift-friend .inputs-gift input::placeholder {
  color: var(--light-blue-color-04) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.form-group-check {
  display: block !important;
}
.form-group-check input {
  padding: 0 !important;
  height: initial !important;
  width: initial !important;
  margin-bottom: 0 !important;
  display: none !important;
  cursor: pointer !important;
}

.form-group-check label {
  position: relative !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--dark-02-color) !important;
}
.form-group-check label:before {
  content: "" !important;
  -webkit-appearance: none !important;
  background-color: transparent !important;
  border: 2px solid var(--main-01-color) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05) !important;
  padding: 10px !important;
  display: inline-block !important;
  position: relative !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  margin-left: 7px !important;
  border-radius: 1px !important;
}
.form-group-check input:checked + label:after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 4px !important;
  right: 9px !important;
  width: 6px !important;
  height: 14px !important;
  border: solid var(--white-01-color) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
.form-group-check input:checked + label::before {
  background: var(--main-01-color) !important;
}
.left-content-box-pay .input-code input {
  padding: 8px 15px !important;
  border-color: var(--light-blue-color-04) !important;
  border-radius: 8px !important;
}
.left-content-box-pay .input-code .button-pay-code {
  height: 44px !important;
  border-radius: 8px !important;
}
.left-content-box-pay .details-pay-info {
  background: var(--light-blue-color-02) !important;
  border: 1px solid var(--light-blue-color) !important;
  border-radius: 10px !important;
  padding: 15px 22px !important;
}
.left-content-box-pay .details-pay-info :is(.title-pay-info, .text-pay-info) {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dark-01-color) !important;
  display: flex !important;
  gap: 3px !important;
}
.left-content-box-pay .text-main {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--dark-04-color) !important;
  padding: 5px 0 0 0 !important;
  margin: 0 !important;
}
.left-content-box-pay .details-pay-info .title-pay-info {
  color: var(--light-blue-color-03) !important;
}
.left-content-box-pay .text-pay-info .icon-currency {
  font-size: 20px !important;
  color: var(--dark-01-color) !important;
  padding-right: 5px !important;
}
.left-content-box-pay .info-pay-one:not(:first-child) {
  padding-top: 12px !important;
}
.left-content-box-pay .btn-transparent-bg {
  border-color: var(--dark-blue-color) !important;
  color: var(--dark-blue-color) !important;
  padding-inline: 60px !important;
  height: 45px !important;
  border-radius: 14px !important;
}
.left-content-box-pay .btn-transparent-bg:hover {
  background: var(--dark-blue-color) !important;
  color: var(--white-01-color) !important;
}

.left-content-box-pay .details-tamara {
  border: 1px solid var(--light-blue-color) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}
.left-content-box-pay .details-tamara .text {
  font-size: 13px !important;
  color: var(--dark-02-color) !important;
  font-weight: 500 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.timer-counter .content-counter :is(.text-top, .text-bottom) {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--dark-01-color) !important;
}
.timer-counter .content-counter .text-bottom {
  color: var(--dark-02-color) !important;
  font-weight: 500 !important;
  padding-top: 2px !important;
  font-size: 12px !important;
}
.timer-container {
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: max-content !important;
  padding-block: 0 !important;
  height: 48px !important;
  margin: 0 !important;
}
.timer-container .countdown {
  margin-top: 0.2rem !important;
}
/* ============================
END PAYMENT PAY
============================== */
/* =============================
START CUSTOM SELECT AND TOGGLE
================================ */
.custom-select {
  position: relative !important;
  user-select: none !important;
}
.custom-select .select-box,
.toggle-container-1 {
  background: var(--white-01-color) !important;
  border: 1px solid var(--main-01-color) !important;
  padding: 10px ;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-around;
  align-items: center !important;
  border-radius: 16px !important;
  gap: 0px ;
}
.custom-select .options-container {
  position: absolute !important;
  width: 100% !important;
  background: white !important;
  border: 1px solid var(--main-01-color) !important;
  border-top: none !important;
  display: none !important;
  flex-direction: column !important;
  z-index: 100 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.custom-select .option {
  padding: 5px 15px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.custom-select .hidden {
  display: none !important;
}
.color-box {
  width: 24px !important;
  height: 24px !important;
  border-radius: 2px !important;
}
.custom-select .text-select {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.custom-select .text-select,
.custom-select .option,
.toggle-container-1 .text-toggle {
  font-size: 15px !important;
  color: #7e839f !important;
  font-weight: 500 !important;
}
.custom-select .option:hover {
  background: var(--light-main-04-color) !important;
}
.custom-select .active {
  display: flex !important;
}
.custom-select .arrow {
  transition: transform 0.3s !important;
}
.custom-select .rotate {
  transform: rotate(180deg) !important;
}
.custom-select .all-options {
  height: 100% !important;
  overflow-y: auto !important;
  max-height: 200px ;
}
/* START TOGGLE */
.toggle-container-1 .toggle-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: space-around ;
  width: 100% !important;
}
.toggle-container-1 .toggle-switch {
  position: relative !important;
  width: 50px !important;
  height: 17px !important;
  display: flex !important;
  align-items: center !important;
}
.toggle-container-1 .toggle-input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.toggle-container-1 .toggle-label {
  display: block !important;
  width: 50px !important;
  height: 100% !important;
  background: #d9d9d9 !important;
  border-radius: 50px !important;
  position: relative !important;
  transition: background 0.3s !important;
  cursor: pointer !important;
}
.toggle-container-1 .toggle-label::after {
  content: "" !important;
  position: absolute !important;
  width: 24px !important;
  height: 24px !important;
  background: var(--main-01-color) !important;
  border-radius: 50% !important;
  top: 50% !important;
  left: -3px !important;
  transform: translateY(-50%) !important;
  transition: left 0.3s !important;
}
.toggle-container-1 .toggle-input:checked + .toggle-label {
  background: var(--main-01-color) !important;
}
.toggle-container-1 .toggle-input:checked + .toggle-label::after {
  left: 33px !important;
}
.custom-select-category {
  width: 191px ;
}
.custom-select-tickets {
  width: 152px ;
}
.toggle-container-1 {
  width: 209px ;
}
/* =============================
END CUSTOM SELECT AND TOGGLE
================================ */
.inputs-gift {
  display: none;
}
/* ========================
START SCREENS
======================== */
:is(.main-boxes-cards-mobile, .timer-counter-mobile) {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .all-main-content .main-boxes-cards {
    overflow: auto hidden !important;
  }
  .all-main-content .main-boxes-cards::-webkit-scrollbar {
    display: none !important;
  }
  .all-main-content .cards-details-boxes {
    display: flex !important;
    align-items: center !important;
    width: max-content !important;
    box-shadow: var(--box-shadow) !important;
    background: var(--white-01-color) !important;
    border-radius: 20px !important;
    padding: 14px !important;
    border: 1px solid #ededed !important;
  }
  :is(.main-boxes-cards-desktop, .timer-counter-desktop) {
    display: none !important;
  }
  :is(.main-boxes-cards-mobile, .timer-counter-mobile) {
    display: block !important;
    margin-top: 12px !important;
  }
  .timer-counter-mobile {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-top: 18px !important;
  }
  .gift-friend .inputs-gift {
    width: 100% !important;
    margin-right: 0 !important;
  }
  .left-content-box-pay .btn-transparent-bg {
    padding-inline: 25px !important;
  }
  .left-content-box-pay .details-pay-info {
    margin-bottom: 25px !important;
  }
  .main-info-bottom-pay {
    padding-top: 18px !important;
  }
  .gift-friend {
    margin-bottom: 0 !important;
  }
}
@media screen and (max-width: 575px) {
  .body-index {
    overflow: initial !important;
  }
  .all-cards-tickets {
    /* position: relative !important; */
    z-index: 100 !important;
    box-shadow: 0 -2px 40px 5px #1212121f !important;
    padding: 0 10px !important;
    background: var(--white-01-color) !important;
  }
  .navbar-menu-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
  }
  .all-main-content {
    padding: 90px 0 !important;
  }
  .all-main-content-home .row > * {
    padding: 0 !important;
  }
  .all-main-content-home .g-3 {
    --bs-gutter-y: 0rem !important;
  }
  .all-main-content-home .container {
    padding: 0 8px !important;
  }
  .all-cards-tickets .main-cards-tickets {
    padding-left: 0 !important;
    max-height: initial !important;
    overflow: initial !important;
    height: 100% !important;
  }
  .all-cards-tickets .main-cards-tickets::-webkit-scrollbar {
    display: none !important;
  }
  .all-cards-tickets .card-product-one :is(.title, .price-card) {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--dark-01-color) !important;
  }
  .all-cards-tickets :is(.status-shared) {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
  }
  .all-cards-tickets :is(.btn-main) {
    font-size: 12px !important;
    padding: 6px 14px !important;
  }
  .all-cards-tickets .card-product-one :is(.content-info, .image-card-product) {
    flex-grow: initial !important;
    flex-basis: initial !important;
  }
  .all-cards-tickets .card-product-one .image-card-product {
    height: 100% !important;
    width: 75px !important;
  }
  .all-cards-tickets .card-product-one .image-card-product::before {
    display: none !important;
  }
  .all-cards-tickets .card-product-one {
    gap: 7px !important;
  }
  .button-filter {
    display: block !important;
    z-index: 101 !important;
  }
  /* .all-main-content .left-content-box .image-card-left {
    margin-top: 40px !important;
  } */
  .all-main-content .header-golden .content-header-golden {
    /* position: fixed !important; */
    left: 50% !important;
    width: 95% !important;
    transform: translateX(-50%) !important;
    z-index: 101 !important;
    top: 20px !important;
    margin: 0 !important;
  }
}
@media screen and (max-width: 450px) {
  .right-content-box-pay .title-text {
    font-size: 13px !important;
    padding: 20px 0 !important;
  }
  .left-content-box-pay .status-info-pay {
    font-size: 11px !important;
    font-weight: 700 !important;
  }
}
@media screen and (max-width: 350px) {
  .all-cards-tickets .card-product-one .image-card-product {
    width: 65px !important;
    border-radius: 13px !important;
  }
}
.icon-screen {
  position: absolute !important;
  bottom: 23px !important;
  right: 25px !important;
}
.icon-screen img {
  width: 44px !important;
  height: 47px !important;
}
/* ========================
END SCREENS
======================== */
/* ============================
START NAVBAR
================================ */
.navbar-menu-header {
  background: var(--white-01-color) !important;
  box-shadow: 0 4px 25px 0 rgba(40, 48, 95, 0.2) !important;
  padding: 16px 0 !important;
}
.navbar-menu-header .navbar-nav .nav-link {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--dark-06-color) !important;
  position: relative !important;
  width: max-content !important;
}
.navbar-menu-header .navbar-nav .nav-link.active::after {
  content: "" !important;
  position: absolute !important;
  width: 80% !important;
  height: 3px !important;
  background: var(--main-01-color) !important;
  border-radius: 8px !important;
  left: 52% !important;
  transform: translateX(-50%) !important;
  bottom: 0 !important;
}
.navbar-menu-header .button-sell {
  padding-inline: 25px !important;
}
.navbar-menu-header .button-sell {
  background: var(--light-main-03-color) !important;
}
.navbar-menu-header .button-sell:hover {
  color: var(--main-01-color) !important;
}
.navbar-menu-header .dropdown-toggle::after {
  border: none !important;
  background-image: url("../images/icons/arrowDown2.svg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  width: 12px !important;
  height: 7px !important;
  top: 6px !important;
  position: relative !important;
  left: -3px !important;
}
/* ============================
END NAVBAR
================================ */
/* ======================
START HOME PAGE
======================== */
.header-home {
  background-image: url("../images/background/bg.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.header-home .main-header-home .content-top-header {
  /* padding: 100px 0 !important; */
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: center !important;
}
.header-home .main-header-home .content-top-header .title {
  font-size: 48px !important;
  font-weight: 700 !important;
  /* color: var(--dark-03-color) !important; */
  color: #28305F !important;
  margin-bottom: 24px !important;
}
.header-home
  .main-header-home
  .content-top-header
  :is(.text-top, .text-details) {
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--light-blue-color-03) !important;
  margin: 0 !important;
  line-height: 1.8 !important;
}
.header-home .main-header-home .content-top-header .info-content {
  width: 100% !important;
  max-width: 700px !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.search-input {
  border: 1px solid var(--white-01-color) !important;
  display: flex !important;
  align-items: center !important;
  background: var(--white-01-color) !important;
  width: 100% !important;
  max-width: 679px !important;
  padding: 12px !important;
  box-shadow: 0px 0px 12px 0px rgba(40, 48, 95, 0.2) !important;
  border-radius: var(--radius-20) !important;
  margin: 56px auto 0 auto !important;
  margin-bottom: 50px !important;
}
.search-input input {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  width: 100% !important;
  background: transparent !important;
}
.main-boxes-cards-header {
  width: 100% !important;
  max-width: 92% !important;
  margin: auto !important;
  transform: translateY(-50%) !important;
}
.main-boxes-cards-header .all-boxes-cards-data {
  background: var(--white-01-color) !important;
  box-shadow: var(--box-shadow) !important;
  border-radius: 40px !important;
  padding: 35px 15px !important;
}
.main-boxes-cards-header .cards-details-boxes {
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
}
.main-boxes-cards-header :is(.cards-details-boxes .card-box-one .text-box) {
  font-size: 12px !important;
  font-weight: 500 !important;
}
@media screen and (max-width: 767px) {
  .header-home .main-header-home .content-top-header .title {
    font-size: 35px !important;
  }
  .main-boxes-cards-header {
    position: relative !important;
    overflow: auto !important;
    max-width: 100% !important;
  }
  .main-boxes-cards-header .all-boxes-cards-data {
    width: max-content !important;
  }
}
@media screen and (max-width: 575px) {
  .header-home
    .main-header-home
    .content-top-header
    :is(.text-top, .text-details) {
    font-size: 16px !important;/*size:18*/
  }
  .header-home .main-header-home .content-top-header .title {
    font-size: 32px !important; /*size:28*/
    color: #28305F !important;
  }
  .header-home .main-header-home .content-top-header {
    padding: 100px 0 30px 0 !important;
  }
  .navbar-menu-header {
    padding: 8px 0 !important;
  }
  .search-input
  {
    margin: 10px auto 0 auto !important;
    margin-bottom: 10px !important;
  }
}
/* ======================
END HOME PAGE
======================== */
/* ========================
START OPTIONS BEST
======================== */
.title-section-details {
  font-size: 30px !important;
  font-weight: 600 !important;
  color: var(--dark-01-color) !important;
  margin-bottom: 32px !important;
}
.best-options {
  margin-top: 0px !important;
}
.card-option-link {
  color: transparent !important;
  text-decoration: none !important;
}
.card-option-one {
  border: 1px solid var(--main-01-color) !important;
  border-radius: 30px !important;
  background: var(--white-01-color) !important;
  box-shadow: 0px 4px 6px 0px rgba(217, 172, 79, 0.12) !important;
}
.card-option-one .image-card img {
  border-radius: 30px 30px 0 0 !important;
  height: 100% !important;
  aspect-ratio: 1.3 / 1 !important;
}
.card-option-one .content-option-card {
  padding: 18px 25px !important;
}
.card-option-one .content-option-card .title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--dark-01-color) !important;
}
.card-option-one .text-card-details {
  font-size: 16px;
  font-weight: 500;
  color: var(--dark-02-color) !important;
  padding-top: 5px !important;
}
.card-option-one .text-card-details .price-num {
  padding-top: 5px !important;
  color: var(--dark-01-color) !important;
  font-weight: 600 !important;
}
.best-options .link-more {
  border: 1px solid var(--main-01-color) !important;
  padding: 14px 10px !important;
  text-align: center !important;
  border-radius: var(--radius-20) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--main-01-color) !important;
  text-decoration: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 35px !important;
}
.best-options .link-more .text-link {
  position: relative !important;
}
.best-options .link-more .text-link::after {
  content: "" !important;
  position: absolute !important;
  width: 100% !important;
  height: 1.7px !important;
  background: var(--main-01-color) !important;

  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 5px !important;
}
@media screen and (max-width: 991px) {
  .card-option-one .content-option-card .title {
    font-size: 20px !important; /*size 16*/
  }
}
@media screen and (max-width: 575px) {
  .title-section-details {
    font-size: 28px !important;  /*size 28*/
  }
  .best-options .row {
    flex-wrap: nowrap !important;
    width: auto !important;
  }
  .best-options .row .col-12 {
    width: 83% !important;
  }
  .best-options .all-best-options {
    overflow-x: auto !important;
  }
}
@media screen and (max-width: 450px) {
  .title-section-details {
    font-size: 28px !important; /*size 20*/
  }
}
/* ========================
END OPTIONS BEST
======================== */
/* ==================================
START SECTION SELL YOUR TICKET
===================================== */
.sell-your-ticket {
  padding-top: 88px !important;
}
.sell-your-ticket .all-sell-ticket .card-sell-one {
  background: var(--light-main-04-color) !important;
  border-radius: var(--radius-20) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  padding: 25px 15px 15px 15px !important;
  box-shadow: var(--box-shadow) !important;
  height: 100% !important;
}
.sell-your-ticket .all-sell-ticket .card-sell-one .title-sell {
  padding-bottom: 22px !important;
  font-size: 28px !important; /*26*/
  font-weight: 600 !important;
  color: var(--dark-blue-color) !important;
}
/* ==================================
END SECTION SELL YOUR TICKET
===================================== */
/* ====================================
START SECTION FAQ
=============================== */
.section-faq {
  padding-top: 90px !important;
}
.section-faq .all-faq-info .right-content-faq .text-top-faq {
  font-size: 17px;
  font-weight: 500 ;
  color: var(--dark-06-color) !important;
}
.section-faq .all-faq-info .right-content-faq .text-top-faq-1 {
  font-size: 24px;
}
.section-faq .all-faq-info .right-content-faq .title-head {
  margin: 7px 0 !important;
}
.section-faq .accordion-button:not(.collapsed)::after,
.section-faq .accordion-button::after {
  background-image: url("../images/icons/arrowAccordion.svg") !important;
  margin-right: auto !important;
  margin-left: initial !important;
}
.section-faq .accordion-item {
  background: var(--dark-05-color) !important;
  border: 1px solid var(--dark-05-color) !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
  padding: 7px 4px !important;
}
.section-faq .accordion-button {
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: right;
}
.accordion-button:not(.collapsed) {
  color: var(--dark-01-color) !important;
  box-shadow: none !important;
}
.section-faq .accordion-button:focus {
  box-shadow: none !important;
}
.section-faq .accordion-body {
  border-top: 1px solid var(--dark-05-color) !important;
}
.section-faq .show-more {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dark-06-color) !important;
  padding-top: 15px !important;
}
.section-faq .show-more .link-route {
  color: var(--main-01-color) !important;
}
/* ====================================
END SECTION FAQ
=============================== */
/* =================================
START SUCCESS PARTNERS
============================== */
.success-partners {
  padding-top: 120px !important;
}
.success-partners .cards-success-partners {
  padding-top: 15px !important;
}
.success-partners .card-success-one {
  border-radius: 15px !important;
  padding: 30px 25px !important;
  background: var(--white-01-color) !important;
  box-shadow: 10px 10px 25.3px 0px rgba(0, 0, 0, 0.05) !important;
  margin-left: 15px !important;
}
@media screen and (max-width: 575px) {
  .success-partners {
    display: none !important;
  }
}
/* =================================
END SUCCESS PARTNERS
============================== */
/* ============================
START FOOTER
============================ */
footer {
    margin-top: 50px !important;
}
.footer-web {
  padding: 134px 0 64px 0 !important;
}
.footer-web .footer-content {
  padding: 48px 54px 23px 54px !important;
  border-radius: 20px !important;
  border: 1px solid #d9ac4f !important;
  background: #fff !important;
  box-shadow: 0px 0px 12px 0px rgba(217, 172, 79, 0.5) !important;
}
.footer-web .logo-footer {
  margin-bottom: 20px !important;
  display: block !important;
}
.footer-web .logo-footer img {
  width: 70% !important;
  height: 89px !important;
}
.footer-web .social-links-footer {
  margin-top: 18px !important;
  gap: 12px !important;
}
.footer-web ul {
  padding: 0 !important;
  margin: 0 !important;
}
.footer-web .list-footer .nav .nav-item .nav-link,
.footer-web .list-footer .title-footer {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dark-01-color) !important;
  transition: all 0.5s !important;
}
.footer-web .list-footer .title-footer {
  font-size: 20px !important;
  padding-bottom: 7px !important;
}
.footer-web .list-footer .nav .nav-item .nav-link:hover,
.footer-web .list-footer .title-footer-2 .text-golden {
  color: var(--main-01-color) !important;
}
.footer-web .list-footer .title-footer-2 {
  color: var(--dark-blue-color) !important;
  margin-bottom: 26px !important;
}
.footer-web  .list-apps {
  gap: 15px !important;
text-align: right !important;
}
.footer-web  .list-apps .icon img{

    height: 25px;
}
.footer-web  .list-apps .card-contact{
  gap: 14px;
  justify-content: flex-start !important;
}
.footer-web  .list-apps .card-contact p{
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 10px 0!important;
  color: var(--dark-01-color);
}
.footer-web  .list-apps .card-contact *{
  text-decoration: none !important;
}
.footer-web .bottom-footer {
  padding-top: 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
}
.footer-web .bottom-footer-two {
  display: none !important;
}
.footer-web .bottom-footer .title-bottom-footer {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--dark-01-color) !important;
  position: relative !important;
  margin-bottom: 14px !important;
}
.footer-web .bottom-footer .title-bottom-footer::after {
  content: "" !important;
  position: absolute !important;
  width: 49px !important;
  height: 1px !important;
  background: var(--dark-01-color) !important;
  bottom: -3px !important;
  right: 9px !important;
}
@media screen and (max-width: 575px) {
  .footer-web .footer-content {
    padding: 40px 23px 23px 23px !important;
    text-align: center !important;
  }
  .footer-web .btn-transparent-bg {
    width: 100% !important;
  }
  .footer-web .buttons-footer {
    padding: 0 23px !important;
  }
  .footer-web .social-links-footer {
    justify-content: center !important;
  }
  .footer-web .list-footer-one,
  .footer-web .list-footer-two .title-footer {
    display: none !important;
  }
  .footer-web .list-footer-two .nav {
    align-items: center !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .footer-web .list-footer .nav .nav-item .nav-link {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
  }
  .footer-web .list-footer .title-footer-2 {
    margin-bottom: 12px !important;
  }
  .footer-web .list-apps {
    flex-direction: column !important;
    gap: 15px !important;
text-align: right !important;

  }
  .footer-web .list-apps img {
    width: 100% !important;
  }
  .footer-web .list-footer-three,
  .footer-web .bottom-footer {
    display: none !important;
  }
  .footer-web :is(.list-footer-bottom, .bottom-footer-two) {
    display: block !important;
  }
  .footer-web .list-footer .title-footer {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  .footer-web .bottom-footer .title-bottom-footer {
    width: max-content !important;

    margin-inline: auto !important;
  }
  .footer-web {
    padding: 10px 0 30px 0 !important; /*size 100*/
  }
  footer .container .row
  {
    margin: 0 !important;
  }
}
/* ============================
END FOOTER
============================ */
/* ============================================================
END HOME PAGE
=============================================================== */
/* ============================================================
staRT PRODUCT DETAILS PAGE
=============================================================== */

.main-container-step .stepper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 40px !important;
  position: relative !important;
  gap: 10px !important;
  background: var(--light-main-04-color) !important;
  padding: 24px 14px 12px 14px !important;
  border-radius: var(--radius-20) !important;
}

.main-container-step .step-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: start !important;
  flex: 1 !important;
}
.main-container-step .step {
  width: 100% !important;
  height: 14px !important;
  background-color: var(--light-blue-color-06) !important;
  transition: background-color 0.3s ease !important;
  z-index: 1 !important;
}
.main-container-step .step-container #step1 {
  border-radius: 0px 20px 20px 0 !important;
}
.main-container-step .step-container #step3 {
  border-radius: 20px 0px 0px 20px !important;
}
.main-container-step .step.active {
  background-color: var(--dark-blue-color) !important;
}

.main-container-step .step.completed {
  background-color: var(--green-01-color) !important;
}
.main-container-step .step.previous {
  background-color: var(--light-blue-color-06) !important;
}
.main-container-step .content-step--1 {
  display: none !important;
}
.main-container-step .content-step--1.active {
  display: block !important;
}
.main-container-step .text-step {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--dark-04-color) !important;
  padding-top: 24px !important;
}
.main-container-step .step.active ~ .text-step,
.main-container-step .step.completed ~ .text-step {
  color: var(--dark-blue-color) !important;
}
.card-send-success {
  border: 1px solid var(--main-01-color) !important;
  background: var(--light-main-04-color) !important;
  border-radius: 12px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  flex-direction: column !important;
  gap: 25px !important;
  padding: 5px 15px 65px 15px !important;
  margin-top: 80px !important;
}
.card-send-success .image-success {
  width: 270px !important;
}
.card-send-success .content-success .text-success-1 {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--dark-blue-color) !important;
  padding-bottom: 15px !important;
}
.card-send-success .content-success .title-success {
  font-size: 30px !important;
  font-weight: 600 !important;
}

.content-step .form-group-check label {
  color: var(--dark-blue-color) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.content-step .form-group-check .text-label-p {
  line-height: 1.8 !important;
  font-size: 15px !important;
}
.content-step .card-content-terms {
  background: var(--white-01-color) !important;
  box-shadow: var(--box-shadow) !important;
  border-radius: var(--radius-12) !important;
  border: 1px solid var(--dark-07-color) !important;
  padding: 15px 14px 12px 14px !important;
  height: 100% !important;
}
.step-card-product .title-top-step {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--dark-01-color) !important;
  margin-bottom: 0px ;
}
.step-card-product .buttons-steps {
  width: 38% !important;
  margin-top: 72px !important;
  margin-right: auto !important;
}
.step-card-product .buttons-steps .btn-main {
  width: 100% !important;
}
.content-step-one .icon-screen {
  bottom: -17% !important;
  right: 0 !important;
}
.main-container-step :is(.line-step, .step-one),
.main-container-step .text-steps-details .title-top-step {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .main-container-step .step,
  .main-container-step .step-container #step1,
  .main-container-step .step.active,
  .main-container-step .step-container #step3,
  .main-container-step .step.completed,
  .main-container-step .step.previous {
    border-radius: 50% !important;
  }
  .step-card-product .buttons-steps {
    width: 45% !important;
  }
  .main-container-step :is(.line-step, .step-one),
  .main-container-step .text-steps-details .title-top-step {
    display: flex !important;
  }
  .main-container-step .step {
    border-radius: 0% !important;
    background: transparent !important;
  }
  .main-container-step .stepper {
    align-items: flex-start !important;
  }
  .main-container-step .step.active {
    border-color: #56cb4e !important;
  }
  .step-one {
    position: relative !important;
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    background: rgba(239, 239, 240, 1) !important;
    border: 5px solid #fff !important;
    box-shadow: 0 2px 4px rgba(4, 20, 124, 0.15) !important;
    z-index: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .line-step {
    width: 35% !important;
    border: 2px dashed rgba(160, 163, 178, 1) !important;
    position: absolute !important;
    top: 27% !important;
    transform: translateY(-50%) !important;
  }
  .main-container-step .step-container .step.completed .line-step,
  .main-container-step .step-container .step.completed .step-one {
    border-color: #56cb4e !important;
  }
  .main-container-step .stepper {
    background: transparent !important;
    padding: 0 !important;
  }
  .main-container-step :is(.icon-dark, .icon-green) {
    display: none !important;
  }
  .main-container-step .step-container .step.completed .icon-dark,
  .main-container-step .step-container .step.completed .icon-gray,
  .main-container-step .step.active .icon-gray {
    display: none !important;
  }
  .main-container-step .step-container .step.completed .icon-green {
    display: block !important;
  }

  .main-container-step .step.active .step-one {
    border-color: #56cb4e !important;
  }
  .main-container-step .step.active .icon-dark {
    display: block !important;
  }
  .main-container-step .title-top-step {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--dark-06-color) !important;
  }
  .main-container-step .title-top-step--12 {
    font-size: 20px !important;
  }
  .main-container-step .text-steps-details .text-step {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--dark-03-color) !important;
    font-size: 15px !important;
  }
  .main-container-step .text-steps-details {
    padding-top: 10px !important;
    text-align: center !important;
    margin: auto !important;
    display: none !important;
  }
  .main-container-step {
    padding-top: 20px !important;
  }
  .main-container-step .step.active ~ .text-steps-details {
    display: block !important;
  }
  .main-container-step .step {
    height: 100% !important;
    width: auto !important;
    margin: auto !important;
  }
}
@media screen and (max-width: 550px) {
  .step-card-product .buttons-steps {
    width: 100% !important;
  }
}
.content-step-one .form-step-one {
  padding-top: 64px !important;
}
.main-bottom-step-one {
  display: flex !important;
  align-items: center !important;
  row-gap: 20px !important;
  column-gap: 60px !important;
  padding-top: 24px !important;
  flex-wrap: wrap !important;
}
.main-bottom-step-one .input-price-ticket {
  width: 400px !important;
}
.main-bottom-step-one .input-price-ticket .input-data-price {
  border: 1px solid var(--gray-02-color) !important;
  border-radius: var(--radius-12) !important;
  overflow: hidden !important;
}
.main-bottom-step-one .input-price-ticket .input-data-price input {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
}
.main-bottom-step-one .input-price-ticket .form-label {
  padding-bottom: 10px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dark-01-color) !important;
}
.main-bottom-step-one .text-price-div {
  background: var(--main-01-color) !important;
  font-size: 15px !important;
  color: var(--white-01-color) !important;
  position: relative !important;
}
.main-bottom-step-one .text-price-div .select-box-data {
  background: transparent !important;
  border: none !important;
  padding: 12px 17px 12px 0 !important;
  width: 75px !important;
  text-align: center !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--white-01-color) !important;
}
.main-bottom-step-one .text-price-div .select-box-data option:not(:checked),
.main-bottom-step-one .text-price-div .select-box-data option:checked {
  color: var(--dark-01-color) !important;
}
.main-bottom-step-one .text-price-div .icon-select {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.main-bottom-step-one .price-offer-num,
.main-bottom-step-one .title {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--dark-01-color) !important;
}
.main-bottom-step-one .price-offer-num {
  padding-top: 14px !important;
  font-size: 22px !important;
  display: flex !important;
  gap: 12px !important;
  font-weight: 600 !important;
}
.main-bottom-step-one .price-offer-num .icon-currency-dark {
  font-size: 30px !important;
}
@media screen and (max-width: 767px) {
  .main-bottom-step-one .input-price-ticket {
    width: 100% !important;
  }
}
/* START CONTENT UPLOAD */
.content-upload .info-details-offer-price {
  background: var(--light-main-04-color) !important;
  padding: 22px 32px !important;
  width: 100% !important;
  border-radius: var(--radius-20) !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
}
.content-upload .info-details-offer-price .main-bottom-step-one {
  padding: 0 !important;
}
.content-upload .toggle-checked .toggle-container-1 {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  flex-direction: column !important;
  justify-content: unset !important;
}
.content-upload .toggle-checked .toggle-container-1 .toggle-info {
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.content-upload .toggle-checked .text-toggle {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dark-01-color) !important;
  padding-bottom: 15px !important;
}

.content-upload .toggle-checked .main-toggle-checked {
  gap: 12px !important;
}
.content-upload .toggle-container-1 .toggle-switch {
  width: 43px !important;
}
.content-upload
  .toggle-container-1
  .toggle-input:checked
  + .toggle-label::after {
  left: 20px !important;
}
.content-upload .text-one {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dark-06-color) !important;
}
@media screen and (max-width: 767px) {
  .content-upload .info-details-offer-price {
    background: var(--dark-blue-color) !important;
  }
  .main-bottom-step-one--1 .input-price-ticket .form-label,
  .main-bottom-step-one--1 .price-offer-num,
  .main-bottom-step-one--1 .title,
  .main-bottom-step-one--1 .price-offer-num .icon-currency-dark,
  .content-upload .toggle-checked .text-toggle {
    color: var(--white-01-color) !important;
  }
  .content-upload .text-one {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  /* .main-bottom-step-one--1 .input-price-ticket {
    width: 50% !important;
  } */
  .main-bottom-step-one--1 .input-price-ticket .input-data-price {
    border-color: var(--main-01-color) !important;
  }
  .main-bottom-step-one--1
    .input-price-ticket
    .input-data-price
    input::placeholder {
    color: var(--main-01-color) !important;
  }
  .main-bottom-step-one--1 .custom-select .select-box,
  .toggle-container-1 {
    padding: 0 ;
    /* margin-top: 12px ; */
  }
  .main-bottom-step-one--1 {
    flex-wrap: nowrap !important;
  }
  .main-bottom-step-one--1 .title,
  .main-bottom-step-one--1 .input-price-ticket .form-label {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  .content-upload .info-details-offer-price {
    padding: 20px !important;
    border-radius: 12px !important;
  }
}
@media screen and (max-width: 450px) {
  .uploader-files .file-name {
    font-size: 10px !important;
    font-weight: 600 !important;
  }
}
@media screen and (max-width: 360px) {
  .main-bottom-step-one--1 {
    flex-wrap: wrap !important;
  }
  .main-bottom-step-one--1 .input-price-ticket {
    width: 100% !important;
  }
}
/* END CONTENT UPLOAD */
/* ============================================================
END PRODUCT DETAILS PAGE
=============================================================== */
/* ===================================
START FILE UPLOADER
============================= */
.upload-box {
  border: 1px dashed var(--main-01-color);
  padding: 27px 20px ;
  cursor: pointer !important;
  background: var(--white-01-color) !important;
  border-radius: var(--radius-20);
}
.upload-box .text-upload {
  font-size: 16px ;
  font-weight: 500 ;
  color: var(--dark-06-color) !important;
  margin: 0 !important;
}
.upload-box .text-upload-2 {
  color: var(--main-01-color) !important;
  padding: 16px 0 3px 0 !important;
}
.file-list {
  margin-top: 20px !important;
}
.main-file-upload {
  border: 1px solid var(--main-01-color) !important;
  padding: 12px 13px !important;
  border-radius: var(--radius-8) !important;
  margin-bottom: 15px !important;
}
.main-file-upload .file-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--white-01-color) !important;
  border-radius: 5px !important;
  margin-bottom: 10px !important;
}
.main-file-upload .file-info {
  display: flex !important;
  align-items: center !important;
}
.main-file-upload .file-info img {
  width: 40px !important;
  height: 40px !important;
}
.main-file-upload .progress-container {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.main-file-upload .progress-container .progress {
  height: 8px !important;
  margin-top: 5px !important;
  width: 100% !important;
}
.main-file-upload .progress-container .progress-bar {
  background-color: var(--main-01-color) !important;
}
.main-file-upload .icon-trash {
  cursor: pointer !important;
}
.table-data {
  margin-bottom: 50px !important;
}
.table-data table {
  width: 100% !important;
  margin-top: 20px !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

.table-data th,
.table-data td {
  padding: 10px !important;
  text-align: center !important;
}
.table-data thead th {
  color: var(--white-01-color) !important;
  background-color: var(--dark-blue-color) !important;
  padding: 13px 5px !important;
}
.table-data thead tr:first-child th:first-child,
.table-data tbody tr:first-child td:first-child {
  border-top-right-radius: var(--radius-12) !important;
  border-bottom-right-radius: var(--radius-12) !important;
}

.table-data thead tr:first-child th:last-child,
.table-data tbody tr:first-child td:last-child {
  border-top-left-radius: var(--radius-12) !important;
  border-bottom-left-radius: var(--radius-12) !important;
}

.table-data tbody tr td {
  background: var(--light-main-04-color) !important;
  padding: 16px 5px !important;
  width: 30% !important;
}

.table-data .text-td {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--dark-blue-color) !important;
}

.download-btn--1 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.table-data .main-file-uploaded-td {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: max-content !important;
}
.table-data .file-info--1 {
  width: max-content !important;
}
.table-data tbody tr:first-child td:first-child {
  padding-right: 60px !important;
}
.table-data .file-details {
  text-align: right !important;
}
@media screen and (max-width: 767px) {
  .step-card-product .buttons-steps {
    width: 70% !important;
  }
}
@media screen and (max-width: 575px) {
  .card-send-success .content-success .title-success {
    font-size: 20px !important;
  }
  .card-send-success .content-success .text-success-1 {
    font-size: 14px !important; /*size 16*/
    margin-bottom: 5px !important;
  }
  .card-send-success .content-success .title-success {
    font-size: 28px !important; /*size 16*/
    margin-bottom: 5px !important;
    font-weight: 700 !important;
  }
  .card-send-success {
    padding: 5px 15px 30px 15px !important;
  }
  .step-card-product .buttons-steps {
    width: 100% !important;
  }
}
@media screen and (max-width: 400px) {
  .buttons-success-card {
    flex-wrap: wrap !important;
    width: 90% !important;
    margin: auto !important;
  }
  .buttons-success-card .btn-main {
    width: 100% !important;
  }
}
/* =========== START CARD DATA ========= */
.all-cards-data-upload {
  display: none !important;
}
.card-data-upload {
  border: 1px solid var(--dark-07-color) !important;
  background: var(--white-01-color) !important;
  border-radius: var(--radius-12) !important;
  box-shadow: 6px 6px 54px 0 var(--dark-05-color) !important;
  padding: 14px 13px !important;
  margin-bottom: 15px !important;
}
.card-data-upload .file-info--1 {
  background: rgba(217, 172, 79, 0.1) !important;
  padding: 6px 8px !important;
  border-radius: var(--radius-8) !important;
}
.card-data-upload .type-card {
  padding-top: 16px !important;
}
.card-data-upload .type-card :is(.text-type, .main-type) {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dark-06-color) !important;
}
.card-data-upload .type-card .main-type {
  color: var(--main-01-color) !important;
  font-weight: 600 !important;
}
/* =========== END CARD DATA ========= */
@media screen and (max-width: 575px) {
  .all-cards-data-upload {
    display: flex !important;
  }
  .table-data {
    display: none !important;
  }
  .footer-web  .list-apps{
    margin-top: 25px;
  }
}

.footer-web .d-flex, .search-input input {
  border: none !important;
  color: inherit !important;
}

.pay-by .btn-tabby {
  height: auto !important;
}
/* ===================================
END FILE UPLOADER
============================= */
@media screen and (max-width: 575px) {
    .ticket-input
    {
        color: #fff !important;
    }
    .search-input
    {
        background: #28305F;

    }
    .select-box-tickets .form-select
    {
        font-size: 13px !important;
    }
}

/* .buy-search::placeholder {
    color: #999999 !important
} */
.buttons-success-card
{
    color: #28305F !important
}
::placeholder
{
    font-size: 13px !important;
    color: #999999 !important;
}
/* h2.title-success
{
    font-size: 28px !important;
    font-weight: 700 !important;
} */