:root {
  --white-color: #FFFFFF;
  --grey-color: #E0E1E3;
  --dark-grey-color: #626770;
  --terquise-color: #40BEB4;
  --light-terquise-color: #ECF9F8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: DiodrumArabicMedium;
  font-size: 14px;
}

@font-face {
  font-family: "DiodrumArabic";
  src: url("../fonts/DiodrumArabic.ttf");
}
@font-face {
  font-family: "DiodrumArabicMedium";
  src: url("../fonts/DiodrumArabicMedium.ttf");
}
@font-face {
  font-family: "DiodrumArabicBold";
  src: url("../fonts/DiodrumArabicBold.ttf");
}
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  margin: 0;
  padding: 0;
}

.data-currency {
  display: flex;
}

.loading {
  width: 100%;
  height: 100%;
  position: fixed;
  transform: translateY(0%);
  display: flex;
  z-index: 9999;
}
.loading img {
  width: 50% !important;
  height: auto;
  margin: auto;
  display: block;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999999999;
  display: none;
}

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  padding: 20px;
  z-index: 9999999999;
  max-width: 80%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  width: 90%;
  height: 55%;
  border-radius: 16px;
  overflow: scroll;
}
.popup .title {
  text-align: center;
}
.popup .title h2,
.popup .title p {
  font-size: 20px !important;
  font-family: DiodrumArabicMedium;
}
.popup .title h2 {
  font-weight: bold;
}
.popup .image {
  width: 80%;
  margin: 15px auto;
}
.popup .image img {
  width: 100%;
}
.popup button {
  border-radius: 12px;
  background: #3FBFB3;
  width: 100%;
  border: none;
  height: 48px;
  margin: 15px 0;
  color: white;
}

.container {
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
}
.container .active {
  border: 2px solid var(--terquise-color) !important;
  background: var(--light-terquise-color) !important;
}
.container .donation-card {
  border-radius: 30px;
  background: #FEF4EB;
  margin-top: 35px;
  margin-bottom: 5px;
}
.container .donation-card .title {
  display: flex;
  font-style: normal;
  font-weight: 400;
  height: 100%;
}
.container .donation-card .title h2 {
  font-size: 20px;
  margin-top: 30px;
  margin-inline-start: 16px;
  font-family: DiodrumArabicBold;
  font-size: 20px !important;
}
.container .donation-card .title h2 #title-text {
  font-size: 20px;
}
.container .donation-card .title img {
  object-fit: contain;
}
.container .donation-card .options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 3%;
  margin: 30px 10px 0;
}
.container .donation-card .options div[class^=option-] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  border: 1px solid var(--grey-color);
  background: var(--white-color);
  width: 31%;
  height: 55px;
  padding: 16px 11px;
  margin-bottom: 12px;
  text-align: center;
}
.container .donation-card .options div[class^=option-] input {
  display: none;
}
.container .donation-card .options div[class^=option-] label {
  vertical-align: super;
}
.container .donation-card .options .option-last {
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 10px 3px;
}
.container .donation-card .options .option-last .wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}
.container .donation-card .options .option-last .wrapper .input {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  width: 100px;
}
.container .donation-card .options .option-last .wrapper input[type=radio] {
  display: none !important;
}
.container .donation-card .options .option-last .wrapper .customRadioButton {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin-bottom: 1px;
  cursor: pointer;
  vertical-align: middle;
}
.container .donation-card .options .option-last .wrapper input[type=radio]:checked + .customRadioButton {
  border: 5px solid var(--terquise-color);
}
.container .donation-card .options .option-last .custom-amount {
  width: 100%;
}
.container .donation-card .options .option-last .custom-amount input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--grey-color);
  padding: 10px 16px;
}
.container .donation-card .options .option-last .custom-amount input[type=number]:focus {
  outline: none;
}
.container .donation-card .options .option-last input {
  display: block !important;
}
.container .donation-card .automatic-payment {
  margin: 0 15px;
  padding-bottom: 13px;
}
.container .donation-card .automatic-payment .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .donation-card .automatic-payment .header .toggleButton input {
  display: block;
  opacity: 0;
}
.container .donation-card .automatic-payment .header .toggleButton label {
  position: relative;
  width: 55px;
  height: 25px;
  display: inline-block;
  background: #666666;
  border-radius: 30px;
  cursor: pointer;
  transition: all ease-out 0.5s;
  -moz-transition: all ease-out 0.5s;
  -webkit-transition: all ease-out 0.5s;
}
.container .donation-card .automatic-payment .header .toggleButton label::after {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 4px #666666;
}
.container .donation-card .automatic-payment .header .toggleButton input:checked + label {
  background: var(--terquise-color);
}
.container .donation-card .automatic-payment .header .toggleButton input:checked + label:after {
  left: auto;
  right: 0px;
}
.container .donation-card .automatic-payment .details {
  display: none;
}
.container .donation-card .automatic-payment .details > p {
  color: grey;
}
.container .donation-card .automatic-payment .details[active] {
  display: block;
}
.container .donation-card .automatic-payment .details .automatic-payment-options {
  margin: 10px 0;
}
.container .donation-card .automatic-payment .details .automatic-payment-options .automatic-payment-container {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.container .donation-card .automatic-payment .details .automatic-payment-options .automatic-payment-container .payment-option {
  width: 31%;
  min-height: 56px;
  height: 100%;
  border-radius: 16px;
  line-height: 2.5;
  text-align: center;
  border: 1px solid var(--grey-color);
  background: white;
  transition: all linear 0.2s;
  font-weight: bold;
  overflow: hidden;
}
.container .donation-card .automatic-payment .details .automatic-payment-options .automatic-payment-container .payment-option input[type=radio] {
  display: none;
}
.container .donation-card .automatic-payment .details .automatic-payment-options .automatic-payment-container .payment-option label {
  vertical-align: middle;
}
.container .package-details {
  border-radius: 16px;
  border: 1px solid var(--grey-color);
  background: var(--white-color);
  width: 100%;
  margin-top: 16px;
  display: none;
}
.container .package-details .title,
.container .package-details .discount,
.container .package-details .total,
.container .package-details .vat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: auto;
  padding: 12px 0 0;
}
.container .package-details .vat {
  padding-bottom: 5px;
  display: none;
}
.container .package-details .title .icon {
  display: flex;
  align-items: center;
  width: 50%;
  gap: 2%;
}
.container .package-details .title .icon img {
  width: 50px;
}
.container .package-details .discount {
  padding-top: 5px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--grey-color);
}
.container .package-details .total {
  padding-bottom: 12px;
}
.container .package-details .total p {
  font-weight: bold;
  font-family: DiodrumArabicBold;
}
.container .scholarship {
  border-radius: 16px;
  border: 1px solid var(--grey-color);
  background: var(--white-color);
  width: 100%;
  margin-top: 16px;
}
.container .scholarship .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed var(--grey-color);
  width: 90%;
  margin: auto;
  padding: 12px 0;
}
.container .scholarship .title .icon {
  display: flex;
  align-items: center;
  gap: 5%;
  width: 60%;
}
.container .scholarship .total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: auto;
  padding: 12px 0;
}
.container .scholarship .total p {
  font-weight: bold;
}
.container .payments {
  margin-top: 16px;
  margin-bottom: 200px;
}
.container .payments h2:first-of-type {
  margin-bottom: 15px;
}
.container .payments .payments-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3%;
  flex-wrap: wrap;
}
.container .payments .payments-container .payment-icon {
  width: 105px;
  height: 60px;
  border-radius: 16px;
  border: 1px solid var(--grey-color);
  margin-bottom: 3%;
  transition: all linear 0.2s;
}
.container .payments .payments-container .payment-icon input[type=radio] {
  display: none;
}
.container .payments .payments-container .payment-icon img {
  border-radius: 16px;
  width: 100%;
  height: 100%;
  padding: 4px;
}
.container .confirmation {
  background: var(--white-color);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 33px;
  box-shadow: 0px -3px 15px 0px rgba(0, 0, 0, 0.08);
}
.container .confirmation .card-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container .confirmation .card-container p:first-of-type {
  font-family: DiodrumArabicMedium !important;
}
.container .confirmation .card-container .card-data {
  border-radius: 12px;
  background: var(--grey-color);
  width: 165px;
  height: 100%;
  margin: 12px 0 5px;
  padding: 12px;
}
.container .confirmation .card-container .card-data p {
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 5px;
}
.container .confirmation .card-container .card-data p #total-donation-cost {
  font-weight: bold;
}
.container .confirmation .card-container .card-data p:nth-of-type(2) {
  font-weight: bold;
}
.container .confirmation .button {
  width: 95%;
  margin: 10px auto;
  height: 52px;
}
.container .confirmation .button button {
  border-radius: 12px;
  background: var(--terquise-color);
  width: 100%;
  height: 100%;
  border: none;
}
.container .confirmation .button button span {
  display: inline-block;
  color: white;
  font-weight: bold;
  margin-bottom: 10px;
}
.container .confirmation .button button:disabled {
  opacity: 0.4;
}

@media (max-width: 377px) {
  .container .donation-card .title {
    margin-bottom: 50px;
  }
}

.apple-pay-btn {
  display: block;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 40px;
}

.payment-icon.apple-pay {
  background-color: white !important;
}

.donator-info {
  /* margin: 20px; */
}

.donator-info h2 {
  margin-top: 36px;
  margin-bottom: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  font-family: DiodrumArabicMedium, sans-serif;
}

.donator-info .input {
  margin-top: 10px;
  margin-bottom: 10px;
}

.donator-info .input input {
  width: 100%;
  height: 46px;
  border-radius: 8px;
  padding: 7px;
  border: 1px solid var(--Foundation-Neutral-N40, #e0e1e3);
}

.donator-info.ar .input input {
  direction: rtl;
}

.donator-welcome {
  font-weight: 700;
    font-size: larger;
    color: #00beae;
}

.flex-container {
  display: flex; /* Establishes a flex container */
  justify-content: space-between; /* Distributes space between items */
  width: 100%; /* Example width for the container */
  padding: 10px;
}

.logout-button {

}

.text-button {
    border: none;
    background: none;
    color: #5fc9bd;
    font-size: 19px;
    cursor: pointer;
    text-decoration: underline;
}

.my-donations-button {
 width: 95%;
  margin: 10px auto;
  height: 52px;
   border-radius: 12px;
  background: var(--terquise-color);
  width: 100%;
  height: 100%;
  border: none;
}

.my-donations-button span {
  display: inline-block;
  color: white;
  font-weight: bold;
  margin-bottom: 10px;
}


/*# sourceMappingURL=style.css.map */