@import "./font/DM_Mono/stylesheet.css";
@import "./font/DM_SansSyne/stylesheet.css";
@import "./font/DM_Serif_Display/stylesheet.css";
@import "./font/SF_Mono/style.css";
@import url("./font/IBM_Plex_Sans_Arabic/stylesheet.css");

/* html {
  font-size: 10px;
} */

body{
  font-family: 'DM Sans 18pt', 'fontello', monospace;;
}

h1 {
  font-family: DM Serif Display;
}
.vita--num {
  font-family: DM Mono, 'fontello';
}
/* links */
a:hover {
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}
.vita--breadcrumb{
    
font-family: 'DM Sans 18pt';
}
/* for Body */
.body-b1{
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 80px; /* 111.111% */
  letter-spacing: -0.72px;
}
.body-b2{
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 72px; /* 128.571% */
  letter-spacing: -0.56px;
}
.body-b3{
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 64px; /* 133.333% */
  letter-spacing: -0.4px;
}
.body-b4{
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px; /* 120% */
  letter-spacing: -0.32px;
}
.body-b5{
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px; /* 150% */
  letter-spacing: -0.24px;
}
.body-b6{
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 133.333% */
  letter-spacing: -0.16px;
}
.body-b7{
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
letter-spacing: -0.08px;
}
.body-b8{
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 133.333% */
  letter-spacing: -0.04px;
}
.body-b9{
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.body-b10{
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.08px;
}
.body-b11{
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: 0.04px;
}
/* gap */
.gap-1 {
    gap: 1rem
}
.gap-2 {
    gap: 2rem
}
.gap-3 {
    gap: 3rem
}
.gap-4 {
    gap: 4rem
}
.gap-5 {
    gap: 5rem
}
.gap-6 {
    gap: 6rem
}
.gap-7 {
    gap: 7rem
}
.gap-8 {
    gap: 8rem
}
.gap-9 {
    gap: 9rem
}
.gap-10 {
    gap: 10rem
}
.gap-11 {
    gap: 11rem
}
.gap-12 {
    gap: 12rem
}
.gap-13 {
    gap: 13rem
}
.gap-14 {
    gap: 14rem
}
header{
 padding: 30px 90px;
}
 .btn-list, .btn-grid{
     display: flex;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
 }
 .btn-list.active, .btn-grid.active{
     border: 0.5px solid var(--black-opacities-quinary, rgba(20, 20, 20, 0.17));
     background: var(--gradient-test, radial-gradient(89.15% 141.42% at 100% 0%, rgba(20, 20, 20, 0.00) 50%, rgba(20, 20, 20, 0.04) 100%));
 }
/* pop up style */
#popupContainer ,#popupCart{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
.close-button {
  display: inline-flex;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
}
.header .region_lang{
  display: flex;
  align-items: center;
  width: 100%;
  background: #03283E;
}

/* label */
.vita--label {
    width: 5.3rem;
    border-radius: 3.2rem;
    text-align: center;
    padding: 0.5rem 0;
}

/* inputs */
input.form-control {
  border: none;
  background: transparent;
  text-align: center;
}
.input-group-prepend{
    color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
    font-family: 'DM Sans 18pt';
    text-align: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px;
    border: 0.5px solid var(--black-opacities-quinary, rgba(20, 20, 20, 0.17));
    background: var(--gradientx-transparent, linear-gradient(to bottom right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top right / 50% 50% no-repeat);
    height: 60px !important;
    padding: 16px;
}
.input-group-prepend span{
    display:inline-flex;
}
/* upload--file */
.upload--file--wrapper {
  border: 1px solid rgba(20, 20, 20, 0.04);
  position: relative;

}
.main-title {
    position:relative;
}
.main-title a{
    position: absolute;
    left: 0;
    top: 0;
    display:inline-flex;
    justify-content:Center;
    align-items:Center;
}
.quick--order--page .upload--file{
    width:50rem;
    margin:0 auto;
}
.upload--file input {
  width: 90%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
input:focus, .form-control:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}
/* buttons */
button {
  background: transparent;
  border: none;
  width: 100%;
  padding: 0.8rem;
  color: #fff;
}

.btn-product{
  border: 1px solid #054268;
}
.btn-secondary{
  width: 232px;
  height: 48px;
  padding: 12px 8px 12px 24px;
}

.border-black {
  border: 0.5px solid  rgba(20, 20, 20, 0.17);
}

.owl-carousel .owl-item img {
  width: auto;
}

.flex-direction-column {
  flex-direction: column;
}
.page-title{ 
  font-family: DM Serif Display; 
  background: var(--gradientx-black, radial-gradient(174.86% 141.42% at 100% 0%, #141414 0.03%, #A1A1A1 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pages-padding-top,
.pages-padding-bottom{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.print-order {
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.print-order span{
    margin-right:10px;
}
.form-group label{
  display: flex;
  height: 38px;
  padding: 5px 10px 0px 0px;
  align-items: center;
  gap: 8px;
  color: var(--black-500, #141414);
  font-family: 'DM Sans';
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.08px;
  margin: 0;
}
.form-group select{
    -webkit-appearance: none;
}
.form-group input,
.form-group select{
  color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
  font-family: 'DM Sans';
  text-align: left;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px;
  border: 0.5px solid var(--black-opacities-quinary, rgba(20, 20, 20, 0.17));
  background: var(--gradientx-transparent, linear-gradient(to bottom right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top right / 50% 50% no-repeat);
  height: 60px !important;
  padding: 16px;
}
input.form-control{
    color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
  font-family: 'DM Sans 18pt';
  text-align: left;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px;
}
.form-group textarea{
  border: 0.5px solid var(--black-opacities-quinary, rgba(20, 20, 20, 0.17));
  background: var(--gradientx-transparent, linear-gradient(to bottom right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top right / 50% 50% no-repeat);
  display: flex;
  padding: 16px 16px 16px 13px;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  align-self: stretch;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
  width:100%;
}
.form-group {
  padding: 0 !important;
  margin-bottom: 0rem;
}
.form-row .form-group:nth-child(2) {
  padding-left: 1rem !important;
}
.form-group input::placeholder,.form-group select::placeholder,input::placeholder{
  color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
  font-size: 16px;
  font-weight: 500;
}
.titlepage{
  font-family: DM Sans;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3rem; /* 120% */
  letter-spacing: -0.02rem;
  background: var(--gradient-primary, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #054268 0.03%, #8DC6E8 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contactus .btn-secondary{
  color: var(--white-absolute, #FFF);
  text-shadow: -1px 1px 4px rgba(0, 0, 0, 0.32);
  font-family: 'DM Sans 18pt';
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 150% */
  justify-content:center; 
  text-decoration:none;
  display: flex;
  padding: 1rem 2rem;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  background:  radial-gradient(174.86% 141.42% at 100.00% -0.00%, #054268 0.03%, #8DC6E8 100%);
  width: 100%;
  margin-top: 3rem;
}

.modal-xl {
  max-width: 100%;
}

/* nav-tabs */
.nav-tabs {
  border: 0;
  border-bottom: 4px solid rgba(20, 20, 20, 0.04);
}

.nav-tabs .nav-item .nav-link:hover ,.nav-tabs .nav-link:hover {
  transition: all 0.5s ease-in-out;
}
.nav-tabs .nav-item .nav-link , .nav-tabs .nav-link {
  font-family: 'DM Sans 18pt';
  border: 0;
  border-bottom: 4px solid transparent;
  color:#054268;
}
.nav-tabs .nav-item .nav-link:hover , .nav-tabs .nav-link:hover {
  border: 0;
  border-bottom: 4px solid var(--navy-500, #054268);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  border: 0;
  border-bottom: 4px solid var(--navy-500, #054268);
}


/* checkbox */
.form-check-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.form-check-label{
  position: relative;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: -31px;
  height: 1.25rem;
  width: 1.25rem;
  background-color: #fff;
  border: 2px solid #000;
}

/* When the checkbox is checked, add a blue background */
input:checked ~ .checkmark {
  border: none;
  background: var(--gradientx-lightblue, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #8DC6E8 0.03%, #D1E8F6 100%));}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.checkmark:after {
  left: 9px;
  top: 5px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.product-set-details-page .product-set-item{
  border: 0.5px solid var(--black-opacities-quinary, rgba(20, 20, 20, 0.17));
  height:90%;
}
.product-sets-page button {
  width: 20%;
  border: none;
}

.quick--order--page .item {
  border: 1px solid var(--black-opacities-quaternary, rgba(20, 20, 20, 0.33));
  min-height: 13rem;
}

.quick--order--page .item a {
  color: #8DC6E8;
}

@media (min-width:864px) and (max-width:1024px){
    
  .form-group input, .form-group select { 
    height: 40px !important;
    padding: 7px;
  }
  .product-sets-page button {
    width: auto;
  }
    .product-sets-page.product-set-details-page button {
    width: auto;
  }
  .form-group input::placeholder,.form-group select::placeholder{
    font-size: 13px;
  }
  .contactus .btn-secondary{
    margin-top: 1rem;
  }
  .form-row .form-group:nth-child(2) {
   /* padding-left: 0 !important;*/
  }
  .modal-content .form-row .form-group:nth-child(2),
  .edit-branch .form-row .form-group:nth-child(2),
  .Organization  .form-row .form-group:nth-child(2){ 
    padding-left: 20px !important;
  }
  .updated_order{
    flex-wrap:wrap;
    justify-content:center;
}
  } 
  @media (max-width: 864px){
      .quick--order--page .upload--file {
    width: 100%;
      }
    .d-flex.price-flex {
    flex-wrap: wrap;
    }
}
  @media (max-width: 767px){
      .product-set-details-page .product-name .price {
   
    justify-content: flex-start !important;   
}
      .quick--order--page .upload--file {
    width: 100%;
      }
       .main-title a { 
    top: -25px;
    }
         .d-flex.price-flex {
    flex-wrap: wrap;
    }
    .vita--quantity span img{
        width:25px;
    }
    .product-options .form-check {
    max-width: 45%;
}
  .form-row .form-group:nth-child(2) {
    padding-left: 0rem !important;
  }
  .vita--quantity  span{
    width:15%;
}
.vita--quantity input {
    width:70%;
}
   .form-group input, .form-group select{
        padding:10px;
    }
  .product-sets-page button {
    width: 100%;
  }
  .single-order .reorder .btn-reord {
    width: 80%;
  }
  .region .modal-content {
    width: 100%;
    padding: 1rem;
  }
  .titlepage {
    font-size: 2rem;
  }
  .form-group input, .form-group select{
    height: 45px !important;
  }
}
.table_out::-webkit-scrollbar {
  width: 0px;
}

/*New Styles*/
.main-title .footer-box-link a{
    position: relative;
}
/* #street_2{display:none;} */
.product-item .product-discount{min-height:1.4rem;}

.product--content .green-500, .product-item .positive-text, #block-shipping{display:none;}

.register-modal .modal-content {
  width: 70%; 
  margin: 0 auto;
}

@media (max-width: 768px) {
  .register-modal .modal-content {
      width: 75%; 
  }
}

@media (max-width: 480px) {
  .register-modal .modal-content {
      width: 95%; 
  }
}
.alert.stock{padding:0 !important;}
.alert.stock a{
  padding:0 !important;
  font-size: 1.4rem;
  font-weight: bold;
}

/* Hide STC Pay and Mada on all desktop devices (min-width: 1024px) */
@media (min-width: 1024px) {
  /* Hide STC Pay */
  .payment-method:has(input[value="HyperPay_stc"]) {
      display: none !important;
  }

  /* Hide Mada */
  .payment-method:has(input[value="HyperPay_Mada"]) {
      display: none !important;
  }
}

/* Show Apple Pay only on macOS Safari */
@media (min-width: 1024px) {
  /* Check for WebKit-based browsers (Safari) */
  @supports (-webkit-appearance: none) {
      /* Show Apple Pay on Safari */
      .payment-method:has(input[value="HyperPay_ApplePay"]) {
          display: block !important;
      }
  }

  /* Hide Apple Pay on non-Safari browsers */
  .payment-method:has(input[value="HyperPay_ApplePay"]) {
      display: none !important;
  }
}
.form-address-edit .field.street .field .label{position: initial !important;width:100%;overflow: visible !important;}
.title.heading-h6 {
  font-family: 'DM Sans';
}