:root {
  --color-green: #69bbaf;
  --color-light-blue: #007c61;
  --color-text-primary: #484545;
  --color-text-secondary: #B8B8B8;
  --header-height: 125px;
  --bs-btn-active-border-color:#e8f5f3 !important;
}
@media (max-width: 992px){
.mobile-container {
    padding-inline: 40px;
}}
.form-label {
  font-family: "HelveticaNeueLTArabic-Bold", sans-serif;
  font-weight: bold;
  color: #02644f;}

.required-field-indicator {
  color: #FF0606;
}

.form-control-lg:focus,
.form-select:focus {
  border-color: #82BC00;
  border-color: var(--color-green);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.form-control-lg {
  min-height: unset;
  padding: 1rem 1.5rem;
}
/* input.webform-counter-warning, input.form-text.webform-counter-warning, textarea.webform-counter-warning, textarea.form-textarea.webform-counter-warning {
  border-color: unset !important;
  background: #fff !important;

} */

/* textarea.form-control-lg {
  border: 0.03125rem solid #69bbaf;
  border-radius: 0;
  border-color: unset !important;
  background: unset !important;
} */

.text-count-wrapper.webform-counter-warning {
  color: unset !important;
  font-weight: unset !important;
}

.form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.25rem;
  /* border-top: 0.0625rem solid #007c61; */
  padding-top: 1.875rem;
  margin-bottom: 3.125rem;
} 

[dir=rtl] [type=email],
[dir=rtl] [type=number],
[dir=rtl] [type=tel],
[dir=rtl] [type=url] {
  direction: rtl;
}

/* Add form-required required fields indicator in forms */
.form-required::after{
	content: ' *';
	color: #FF0606;
}
/* Add style to upload button for contact us form */
.webform-file-button:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #82BC00;
  background-color: var(--color-green);
  border-end-end-radius: 0.625rem;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
}
.webform-file-button:hover::before {
  opacity: 1;
}
.webform-file-button{
  display: inline-block;
} 
/* Add style to remove button for contact us form */
.webform-file-button , input[name="attachment_remove_button"]
{
  position: absolute;
  inset-inline-end: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: inherit;
  font-family: unset;
  font-size: 1.5rem;
  color: #fff;
  background-color: #82BC00;
  background-color: var( --color-light-blue);
  z-index: 1;
  overflow: hidden;
  padding: 0.75rem 4.125rem;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  margin-top: -1rem;
  margin-right: -1rem;
  border-radius: 0;
  /* padding-top: 0rem;
  padding-bottom: 1rem;
  padding-left: 4rem;
  padding-right: 4rem; */
}

@media (max-width: 1023px) and (max-width: 767px){
.webform-file-button , input[name="attachment_remove_button"]{
    line-height: 50px;
}}
/* Added for attachment and category labels for contact us form */
.label-margin{
  margin-bottom: 0.3rem!important
}
/* Hide default button */
.webform-file-button-input {
	display: none;
}

/* Fix style of form actions for mobile  */
#edit-flexbox-actions {
	display: flex;
	margin: 1em -0.5em;
	gap: 1.875rem;
}


/* fix webforms margin top issue */
.field-margin {
	margin-top: unset;
}
/*Added for contact us form*/
.form-required::after{
content: ' *';
color: #FF0606;
}

/*for disbled first default select in category in webform*/
#edit-category > option:first-child{
display:none;
}


/* Fix the autofill highlight getting out of the field and override browser css */
/* input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
} */
input[data-autocompleted] {
    background-color: transparent !important;
}
.placeholder {
	cursor: unset;
    background-color: unset;
    opacity: unset;
}
.confirmation-message {
	color: #325e1c;
    box-shadow: -8px 0 0 #77b259;
	padding: 15px 20px 15px 35px;
    word-wrap: break-word;
    border: 1px solid;
    border-width: 1px 1px 1px 0;
    border-radius: 2px;
    background: no-repeat 10px 17px;
    overflow-wrap: break-word;
    margin: 9px 0 10px 8px;
    border-color: #0000001f;
    background-color: #c9e1bd3b;
}
/* contact us form  */
.message  {
	line-height: 2.5;
   }
   .message.error  {
	color: red;
   }
   .message.warning  {
	color: orange;
   }

.iti {
  position: relative;
  display: block;
}
.form-control-lg {
  display: block;
  width: 100%;
  /* padding: 0.375rem 0.75rem; */
  font-weight: 400;
  background-color: #fff;
  border-color: #007c61;
  background-clip: padding-box;
  border: 1px solid #007c61;
  border-radius: 0rem;
  height:unset;

}
/* select list  */
#webform-submission-contact-us-add-form > div > div:nth-child(4) > div:nth-child(2) > div > .form-select ,
#webform-submission-contact-us-node-18-add-form > div > div:nth-child(4) > div:nth-child(2) > div > .form-select , #edit-category{
  border-radius: 0!important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  min-height: unset!important;
  /* line-height: 1.63; */
  color: #999;
  background: url(/themes/saudi-payments/assets/images/DW-HR-01.PNG) white;
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 2rem 2rem;
}

.form-item-attachment .webform-element-description {
  color: rgba(92,92,92,0.56);
  font-size: 1.375rem;
  line-height: 0.8;
  padding: 0.4rem 1rem;
}

/* Added for webform contact us file upload */
input[type=file]{
  color:transparent;
}
.filetrigger{

padding-right: 35%;
padding-top: 0.8%;
margin-top: 0.8%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 2.625rem;
  background-color: #fff;
  cursor: pointer;
  border: 0.0625rem solid #00A1DF;
  -webkit-padding-start: 1rem;
  padding-inline-start: 1rem;
  -webkit-margin-end: 1.375rem;
  margin-inline-end: 1.375rem;
  -webkit-transition: border-color 0.3s ease-in-out;
  -o-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;

}
	/* Added for webform file upload field*/
.form-managed-file{
height: unset;
/* line-height: 0.6; */
/* margin-top: 4px; */
padding: 1rem 1.5rem;
position: relative;
white-space: nowrap;
overflow: hidden;
margin-bottom: 0.5rem;
color: #999;

} 
/* attachment filename */
.file {
text-overflow: ellipsis;
display: -webkit-inline-box;
-webkit-line-clamp: 1;
overflow: hidden;
max-width: 10rem;
/* height: 1.1rem; */
line-height: 1;
-webkit-box-orient: vertical;
}


.webform-managed-file-placeholder{
color: rgba(92, 92, 92, 0.56);
margin: 0;
}

.first-bar{
  padding-block: 1.25rem;
background-color: #037b60;
height: 8rem;
}
.second-bar{
	
  padding-block: 1.25rem;
background-color: #deedea;
height: 8rem;

}

.webform-submission-form{
  background-color: #f6f9f9;
}

@media (max-width:992px) and (max-width: 767px){
  .btn-rest, #edit-flexbox-actions > div.webform-flex.webform-flex--1 > div > div > button {
    margin-top: 1.25em !important;
  }}

  .btn-rest {
    margin-top: 1.35em !important;
  } 

#edit-flexbox-actions > div.webform-flex.webform-flex--0 > div > div > input ,
#edit-flexbox-actions > div.webform-flex.webform-flex--1 > div > div > button ,
.btn-rest{
  --bs-btn-padding-x: 2rem;
  --bs-btn-padding-y: 0.55rem;
  /* font-family: "HelveticaNeueLTArabic-Bold", sans-serif; */
  border-radius: 0;
  font-size: 1.4rem;
  line-height: 42px;
  margin: 0;
  padding: 0 30px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#edit-flexbox-actions > div.webform-flex.webform-flex--0 > div > div > input ,
#edit-flexbox-actions > div.webform-flex.webform-flex--1 > div > div > button{
  text-transform: uppercase;
}
#edit-flexbox-actions > div.webform-flex.webform-flex--0 > div > div > input:focus,
#edit-flexbox-actions > div.webform-flex.webform-flex--0 > div > div > input:active:focus ,
#edit-flexbox-actions > div.webform-flex.webform-flex--1 > div > div > button {
  -webkit-box-shadow: none;
          box-shadow: none;
}
#edit-flexbox-actions > div.webform-flex.webform-flex--0 > div > div > input:focus-visible ,
#edit-flexbox-actions > div.webform-flex.webform-flex--1 > div > div > button {
  outline: none;
}

/* .btn-lg {
  --bs-btn-padding-y: 1rem;
  --bs-btn-padding-x: 1.5rem;
} */

.btn-primary {
  background-color: #00A1DF;
  background-color: var(--color-light-blue);
  border-color: #e8f5f3;
  border-color: var(--color-light-blue);
}
.btn-primary:hover {
  background-color: #82BC00;
  background-color: var(--color-green);
  border-color: #82BC00;
  border-color: var(--color-green);
}
.btn-primary:active {
  background-color: #70a300;
  border-color: #70a300;
}
.btn-primary:focus {
  background-color: #5f8900;
  border-color: #5f8900;
}

.btn-outline-primary {
  background-color: #fff;
  color: #f6f9f9;
  color: var(--color-light-blue);
  border-color: #f6f9f9;
  border-color: var(--color-light-blue);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #f6f9f9;
  background-color: var(--color-light-blue);
  border-color: #f6f9f9;
  border-color: var(--color-light-blue);
}
.btn-outline-primary:active {
  background-color: #008fc6;
  border-color: #008fc6;
}
.btn-outline-primary:focus {
  background-color: #007cac;
  border-color: #007cac;
}

input[name="attachment_remove_button"]{
  height: unset;
  margin-top: -5rem;
}

/* arabic page */

html[dir=rtl] .form-label{
  float:right
}

html[dir=rtl] .iti--allow-dropdown input, .iti--allow-dropdown input[type=tel]{

    padding-right: 36px;
    /* padding-left: unset;
    margin-left: unset; */
}

html[dir=rtl] .iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container{
  right: auto;
  left: auto;

}

html[dir=rtl] #webform-submission-contact-us-add-form > div > div:nth-child(4) > div:nth-child(2) > div > .form-select ,
html[dir=rtl] #webform-submission-contact-us-node-18-add-form > div > div:nth-child(4) > div:nth-child(2) > div > .form-select ,
html[dir=rtl] #edit-category{
  background-position: left 0.75rem center;
}


html[dir=rtl] .iti__selected-flag{
  padding: 16px 6px 0 8px;

}

html[dir=rtl] .webform-file-button{
  margin-left: -1rem;
  margin-top: -1rem;
  /* padding: 0; */

}

html[dir=rtl] input[name="attachment_remove_button"]{
  margin-left: -1rem;
  height: unset;
  margin-top: -3rem;
}
html[dir=rtl] .file {

    margin-right: 1rem;
}
html[dir=rtl] .file {
    text-overflow: ellipsis;
    /* display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; */
    float: right;
    overflow: hidden;
    line-height: unset;
}

html[dir=rtl] .webform-managed-file-placeholder{
  float: right;
  margin: 0; 
}

html[dir=rtl] .label-margin {
  margin-bottom: 0.5rem!important;
}
.form-managed-file{
  height: 40px;
}

html[dir=rtl] .btn-rest {
    margin-top: 1rem !important;
    float: right;}

html[dir=rtl] .captcha{

  direction: rtl;
  float:right
}

/* Add +966 before phone fields */
.phone-prefix::before {
  content: '+966-';
  display: flex;
  align-items: center;
  padding-inline-end: 1.5rem;
  background-color: #ededed;
  padding-inline-start: 0.75rem;
  border: 1px solid var(--color-light-blue);
  position: absolute;
  padding: 11px;
  margin: 1px;
  background-color: #037b60;
}
/* Add padding for phone prefix */
.phone-input {
	padding-inline-start: 6.7rem !important;
}

html[dir=rtl] .phone-prefix::before {
  content: '+966-';
  display: flex;
  align-items: center;
  padding-inline-end: 1.5rem;
  background-color: #ededed;
  padding-inline-start: 0.75rem;
  border: 1px solid var(--color-light-blue);
  position: absolute;
  padding: 11px;
  margin: 1px;
  background-color: #037b60;
  margin-top: 2.1rem;
}

/* pager style */

.pager{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.pager__items{

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.9375rem;
  margin-bottom: 0;
  line-height: 2;
  width: fit-content;
  /* padding: 1rem; */
  /* color: var(--color-light-blue); */
  padding-left: 3rem;
  padding-right: 3rem;
  background-color: #fff;
  border: 1px solid var(--color-light-blue);
}


.previous_page{
  margin-inline-start: 1.5625rem;
  background: url(/themes/saudi-payments/assets/images/DW-left.png);
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 2rem;
  background-position: center;
  padding: 1rem;
  height: 10rem;
}

.next_page{

  margin-inline-end: 1.5625rem;
  background: url(/themes/saudi-payments/assets/images/DW-right.png);
  background-repeat: no-repeat;
  background-position: left 0 center;
  background-size: 2rem 2rem;
  padding: 1rem;
}

.item-color {
color: var(--color-light-blue);
}

@media (max-width: 1023px) and (max-width: 479px) {
  .pager__items {
    width: fit-content;
}
.pager__items{
gap: 3.9375rem;
}

.pager{

  margin-bottom: 3rem;
}
}
.contact-us-bar-img {
  background-image: url(/themes/saudi-payments/assets/images/contactus-photo.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
  height: 15rem;
}


html[dir=rtl] .previous_page{
  margin-inline-start: 1.5625rem;
  background: url(/themes/saudi-payments/assets/images/DW-right.png);
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 2rem;
  background-position: center;
  padding: 1rem;
  height: 10rem;
}

html[dir=rtl] .next_page{

  margin-inline-end: 1.5625rem;
  background: url(/themes/saudi-payments/assets/images/DW-left.png);
  background-repeat: no-repeat;
  background-position: left 0 center;
  background-size: 2rem 2rem;
  padding: 1rem;
}

.news-text > [data-align="left"]{

  margin-right: auto;
}

.news-text > [data-align="right"]{
  
  margin-left: auto;
}

.news-text > [data-align="center"]{

  margin: auto;
}
.webforms > .dialog-off-canvas-main-canvas > div > .messages--status {
  position: absolute;
  z-index: 999;
  width: 100%;
  margin-top: 17.5rem;
  text-align: center
}
.webforms > .dialog-off-canvas-main-canvas > div > .messages--error {
  position: absolute;
  z-index: 999;
  width: 100%;
  margin-top: 21rem;
  text-align: center;
}