html{font-size:84%;}
body, body * {
    direction: rtl;
    font-family: 'IBM Plex Sans Arabic', 'fontello' !important;
}
.cats-name .item .body-b5{
    padding-right: 1.3125rem;
    padding-left: 0;
}
.cats-name .item:hover .body-b5{
    transform: translateX(60px);
  }

  .cats-name .item:hover .arrow{
    transform:  scale(1) translateX(-250px) rotate(180deg);
  }
  .discount .text .btn-secondary span img{
    transform: rotate(180deg);
  } 
  
.vita--breadcrumb{
    
font-family: 'DM Sans 18pt';
}
.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;
}

  /* pop up style */
#popupContainer ,#popupCart{
  display: none;
  position: fixed;
  top: 0;
  right: 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;
  left: 15px;
  font-size: 20px;
  cursor: pointer;
}
/* 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 .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;
}

/* upload--file */
.upload--file--wrapper {
  border: 1px solid rgba(20, 20, 20, 0.04);
  position: relative;

}
.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;
}
.quick--order--page .upload--file{
    width:50rem;
    MARGIN:0 auto;
}
.main-title {
    position:relative;
}
.main-title a{
    flex-direction: row-reverse;
    display:inline-flex;
    justify-content:Center;
    align-items:Center;
    position: absolute;
    right: 0;
    left:auto;
    top: 0;
}
.upload--file input {
  width: 90%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 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 24px 12px 8px;
}

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

.owl-carousel .owl-item img {
  width: auto;
}
.phone span{
    direction:ltr;
    display:inline-block;
}
.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-left:10px;
}
.form-group label{
  display: flex;
  height: 38px;
  padding: 5px 0px 0px 10px;
  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 input,
.form-group select{
  color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
  font-family: 'DM Sans';
  text-align: right;
  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 left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom left / 50% 50% no-repeat, 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 top right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top right / 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);
  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: right;
  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(1) {
  padding-left: 1rem !important;
}
.form-group select{
    -webkit-appearance: none;
}
.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;
  display:inline-block;
 background: 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% -41.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;
  right: -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 {
  right: 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);
}


@media (min-width:864px) and (max-width:1024px){
.form-group input, .form-group select { 
  height: 40px !important;
  padding: 7px;
}
.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-right: 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-right: 20px !important;
}
.updated_order{
    flex-wrap:wrap;
    justify-content:center; 
} 
}
@media (max-width: 864px){
    .d-flex.price-flex {
    flex-wrap: wrap;
    }
    .quick--order--page .upload--file {
    width: 100%;
    }
}
@media (max-width: 767px){
    .product-set-details-page .product-name .price {
   
    justify-content: flex-start !important;   
}
    .quick--order--page .upload--file {
    width: 100% !important;
    }
    .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%;
}
.vita--quantity  span{
    width:15%;
}
.vita--quantity input {
    width:70%;}
.form-row .form-group:nth-child(2) {
  padding-right: 0rem !important;
}
 .form-group input, .form-group select{
        padding:10px;
    }
.titlepage {
  font-size: 2rem;
}
.form-group input, .form-group select{
  height: 45px !important;
  -webkit-height:45px !important;
}
}
.table_out::-webkit-scrollbar {
  width: 0px;
}

.main-title .footer-box-link a{
    position: relative;
}

.quick--order--page .row .item {
    min-height: 15rem;
}

html:lang(ar) .logo {
    margin: 0px auto 0px 0;
}

html:lang(en) .column.main {
    float: right;
}

html:lang(en) .sidebar.sidebar-main {
    float: left;
}

html:lang(ar) .column.main {
    float: left;
}

html:lang(ar) .sidebar.sidebar-main {
    float: right;
    padding-left: 2%;
    padding-right: 0;
}

.block-collapsible-nav .item a, .block-collapsible-nav .item > strong {
    border-left: 0;
    color: #575757;
    display: block;
    padding: 0;
}

html:lang(ar) .block-collapsible-nav .item a,.block-collapsible-nav .item>strong {
    border-right:3px solid transparent;
    color:#575757;
    display:block;
    padding:5px 18px 5px 15px
}

html:lang(ar) .fieldset.info{
    float:right;
}
.alert.stock{padding:0 !important;}
.alert.stock a{
  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;}

.add-to-cart-btn .tocart{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 2rem !important;
    gap: 10px;
}

.add-to-cart-btn .tocart span{
    text-align: right;
    flex: 1;
}
.products-grid .product-item .add-to-cart-btn{width:100%}
.products-grid .product-item .btn-secondary{padding:0}
.catalog-product-view .add-to-cart-btn .tocart span{margin: 0; flex:none;}

.replacebreadcrumbs  img{transform: rotate(180deg);}