/**
 * @file
 * Subtheme specific CSS.
 */

/* div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
    margin: 0;
    padding: 0;
    direction: rtl;
} */
html {font-size: 62.5%;}

body {font-family: 'Open Sans', sans-serif;  color: #6a6a6a; font-weight: 400; font-size: 1.6rem; line-height: 2.75rem; background: #ffffff !important; }
body.fixed {overflow: hidden;}

.row {
 --bs-gutter-x: 4rem;
 --bs-gutter-y: 0;
 display: flex;
 flex-wrap: wrap;
 margin-top: calc(-1 * var(--bs-gutter-y));
 margin-right: calc(-0.5 * var(--bs-gutter-x));
 margin-left: calc(-0.5 * var(--bs-gutter-x));
}
 
h2, h3, h4, h5, h6 { font-weight: 700;}
h2 {    color: #97ca4e;}

.img-responsive { display: block; width: 100%; height: auto;}
.wrapper, #page-wrapper { overflow: hidden; }
.sec-padding-other { padding: 10px 0;}
.sec-padding-search { padding: 60px 0;}
.sec-padding { padding: 80px 0;} 
.section-title { position: relative; text-align: center; color: rgb(106, 106, 106); font-size: 4rem; line-height: normal; font-family: 'Josefin Sans', sans-serif; font-weight: 600; padding-bottom: 15px; margin-bottom: 50px;}

.section-title:before {position: absolute; content: ''; width: 200px; height: 5px; background-color: #97ca4e;bottom: 0; right: 0;left: 0; margin: 0 auto;}
 .page-title, .sub-heading { position: relative;  color: rgb(106, 106, 106); font-size: 2.063em; line-height: normal; font-family: 'Josefin Sans', sans-serif; font-weight: 600; color:#303030; padding-bottom: 15px; margin-bottom: 30px; display: inline-block;}

.page-title:before,
.sub-heading:before {content: '';position: absolute;width: 100%;height: 5px;background: #97ca4e;margin: auto;
   bottom: 0; right: 0;left: 0;}


/* Header*/
.header { width: 100%;  z-index: 99; position: fixed; width: 100%; left: 0; top: 0; background: #ffffff; height: 115px; transition: 0.5s background linear;}
.header-top { padding: 10px 0 0 0;}
.header-top-right-nav { padding: 0; margin: 0; list-style: none; text-align: right; display: flex; justify-content: end; align-items: center;}
.header-top-right-nav li { font-size: 1.2rem;}
.header-top-right-nav li a { text-decoration: none; color: #2b2a2a; transition: 0.5s all ease-in-out;}
.header-top-right-nav li a:hover {color: #97ca4e;}
.header-top-right-nav .js-form-item{ margin-bottom: 0 !important;}
.header-top-right-nav .form-select {width: auto !important; padding: 5px 28px 5px 15px; font-size: 14px; border-radius: 30px; margin: 0 0 0 10px; border: 1px solid #97c94e;box-shadow: none;  outline: none;}
.logo {width: 190px;}
.logo img{display: block; height: auto; width: 100%;}
.dark-logo { display: block;}
.white-logo { display: none;}
.navigation-wrapper {  display: flex; justify-content: end; align-items: center;}
ul.navigation {padding: 0; list-style: none; margin: 0; display: flex;     justify-content: flex-end;}
ul.navigation > li { position: relative;}
ul.navigation > li > a {color: #303030; font-size: 1.6rem; font-weight: 600; text-decoration: none; display: block; padding: 10px 15px; }
ul.navigation > li:hover > a {color: #97ca4e;}
ul.navigation > li > ul {position: absolute;left: 0;top: 40px; transform: translateX(-50%);background: rgba(255,255,255,0.9);padding: 0;margin: 0;
   list-style: none;width: 200px; display: block;box-shadow:0 6px 12px rgb(0 0 0 / 18%);z-index: 2; opacity: 0;pointer-events: none;
   transform: translateY(20px);transition: all 200ms linear; border-radius: 5px; border: 1px solid rgba(0,0,0,0.15);}
ul.navigation > li:hover > ul:before { width: 100%;}
ul.navigation > li:hover > ul { opacity: 1;  pointer-events: auto;  transform: translateY(0);   }
ul.navigation > li > ul > li {font-size: 0.75em; font-weight: 400; display: block; }
ul.navigation > li > ul > li > a{ text-decoration: none; padding:10px; display: block; color: #414042; transition: 0.5s;  border-bottom: 1px dashed #f2f2f2;}
ul.navigation > li > ul > li > a:hover { background: #f5f5f5; color: #262626;}


.navigation-wrapper .search {border-left: 1px dashed #bdbdbd; border-right: 1px dashed #bdbdbd; padding: 0 10px; cursor: pointer; position: relative;}
.search-form-overlay { position: absolute; right: 0; top: calc(100% + 5px); background: #ffffff; border: 1px solid #f2f2f2; padding: 10px; width: 380px;}
.search-form-close {position: absolute; height: 16px; width: 16px; text-align: center; border-radius: 50%; background: #E31837; color: #fff; font-size: 12px; line-height: 13px; top: -5px; right: -5px; cursor: pointer;}
header #search-block-form { padding: 0; position: relative;}
.search-form-overlay .form-row>fieldset, .form-row>div {width: 100%; margin-bottom: 0 !important;}
.search-form-overlay .form-control {border: none; outline: none !important;  width: 100%; display: block; font-family: "Open Sans",sans-serif; font-size: 1.4rem; color: #969696; float: left;  background-color: #f7f7f7;  padding: 10px 75px 10px 15px; height: 35px; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  border-radius: 5px; box-shadow: none !important;}

.search-form-overlay .btn-primary {background: #97ca4e; height: 35px; font-size: 1.4rem; padding: 5px 15px; border: 2px solid #97ca4e; transition: 0.5s all linear;  position: absolute; right: 0; top: 0;}
.search-form-overlay .btn-primary:hover {color: #97ca4e; background: #ffffff;}

.main-nav > li > ul { position: absolute; left: 0; top: 40px; transform: translateX(-50%); background: rgba(255,255,255,0.9); padding: 0; margin: 0; list-style: none; width: 200px;  display: block; box-shadow: 0 14px 35px 0 rgb(9 9 12 / 40%);  z-index: 2;  opacity: 0;  pointer-events: none;   transform: translateY(20px); transition: all 200ms linear;}

.header.fixed-header { background: #333; padding: 10px 0; height: 80px;}
.header.fixed-header .header-top {display: none;}
.header.fixed-header .dark-logo { display: none;}
.header.fixed-header .white-logo { display: block;}

.header.fixed-header ul.navigation > li > a { color: #ffffff;}
.header.fixed-header .search {color: #ffffff;}


.menu-icon { z-index: 2;  height: 50px;  width: 50px;  border-radius: 50%; transition: all 0.5s linear; opacity: 1; cursor: pointer; display: none;}
.menu-icon.open {}
.menu-icon .menu-icon-btn{ margin:0; padding:0 5px 5px 5px;  width:45px; height:35px; border-radius:100%; cursor:pointer; margin-top: 11px; display: flex; flex-direction: column; justify-content: space-between;}
.menu-icon .menu-icon-btn span{ margin:3px 0; height:2px; display: block; clear:both; border-radius:5px; transition:0.5s; background: #000000; width: 100%;}


.menu-close-icon{  position: absolute; right: 5px; top: 10px; z-index: 5; cursor: pointer; display: none;   }
.menu-close-icon .menu-close-icon-btn{ margin:0; padding:10px 5px 5px 5px;  width:45px; height:45px; border-radius:100%; cursor:pointer; }
.menu-close-icon .menu-close-icon-btn span{ margin:3px 0; height:2px; border-radius:5px; transition:0.5s; background: #000000; position: absolute;}
.menu-close-icon .menu-close-icon-btn span:nth-child(1){ width:30px; transform: rotate(135deg);}
.menu-close-icon .menu-close-icon-btn span:nth-child(2){ width:30px; transform: rotate(-135deg);}

 .menu-icon.open .menu-icon-btn span:nth-child(2) { opacity: 0;}
 .menu-icon.open .menu-icon-btn span:nth-child(1){ width:45px;  width:30px; transform: rotate(45deg); transform-origin: 0% 0%;}
.menu-icon.open .menu-icon-btn span:nth-child(3){ width:45px;  width:30px; transform: rotate(-45deg); transform-origin: 0% 100%;}

.inner-banner, .region-banner {margin-top: 115px;}
.inner-banner  img, .region-banner img {display: block; height: auto; width: 100%;}


@media screen and (max-width:1024px) {
   .menu-icon {display: block;}
   .header-top { display: none;}
   .logo { margin: 5px; width: 150px;}
   .header { background: #ffffff !important; height: 65px; padding: 10px 0;}
   .header .dark-logo { display: block !important;}
   .header .white-logo { display: none !important;}
   ul.navigation { position: fixed; right: 0; top: 65px; height:calc(100% - 65px); width: 300px; background: #303030; display: block; overflow: auto;transition: all 0.5s linear; margin-right: -300px; z-index: 2;}
   ul.navigation.open {margin-right: 0;}
   ul.navigation > li > a { color: #97ca4e !important; text-align: right;}
   ul.navigation > li > ul { position: relative; left: auto; top: auto; opacity: 1; width: 100%; transform: none; border: none; background: none; box-shadow: none; padding: 0 0 0 7px;}
   ul.navigation > li > ul > li > a { color: #ffffff !important; border: none;}
   .header.fixed-header .search {color: #303030 !important;}
   body.fixed .header:after { content: ''; display: block; position: fixed; height: 100%; width: 100%; left: 0; top: 65px; background: rgba(0,0,0,0.7); z-index: 1;}
   .inner-banner, .region-banner { margin-top: 65px;}

}
/* Banner */
.desktop-banner {display:block !important}
.mobile-banner { display: none !important;}
/* #banner-slider { direction: ltr;} */
.slick-slider img {display: block; height: auto; width: 100%;}
#banner-slider .slick-prev,  #banner-slider .slick-next { height:40px; width: 40px;  margin: 0; z-index: 2;}
#banner-slider .slick-prev:before,  #banner-slider .slick-next:before {content: none; display: none;} 
#banner-slider .slick-prev {right:0;  background:  url(../images/left-arrow-slider.webp) no-repeat center center; background-size: 40px; transform: rotate(-180deg);}
#banner-slider .slick-next  {left: 0; background:  url(../images/right-arrow-slider.webp) no-repeat center center; background-size: 40px; transform: rotate(180deg);}

/* [dir='rtl'] #banner-slider .slick-prev {left: 0;}
[dir='rtl'] #banner-slider .slick-next {right: 0; left: auto;} */



.breathing-image { margin-bottom: 20px;}
.breathing-content { text-align: center;}
.breathing-content h3 {font-family: 'Josefin Sans', sans-serif; font-size: 2.4rem; font-weight: 600; color: #303030; padding-bottom: 15px;}
.breathing-content p {padding-bottom: 20px;}

.location-content p { padding-bottom: 20px;}


/* Footer */
.site-footer {font-family: 'Open Sans', sans-serif;}
.site-footer { padding: 50px 0 0 0; background: #303030;}
.site-footer .footer-menu { padding: 0; margin: 0; list-style: none;}
.site-footer .footer-menu li {padding-bottom: 8px;}
.site-footer .footer-menu li > a { position: relative;padding-left: 15px; font-size: 1.4rem; color: #ffffff;font-weight: 400; text-decoration: none;}
.site-footer .footer-menu li:first-child > a  {color: #97ca4e; font-weight: 600;}
.site-footer .footer-menu li > a:hover {text-decoration: underline;} 


/* .site-footer .footer-menu > li > a::before{content: '\f054'; font-family: FontAwesome; position: absolute; left: 0; font-size: .625em;  padding-top: 3px;} */

.sub-footer {margin-top: 40px; padding: 30px 0; text-align: center; border-top: 1px solid #3b3b3b;}
.sub-footer a { color: #ffffff; text-decoration: none;}
.sub-footer a:hover{ text-decoration: underline;}
.footer-link .nav {justify-content: center;}
.footer-link .nav li {font-size: 1.2rem;}
.footer-link .nav li  a,
.footer-link .nav-link {color: #ffffff; text-decoration: none;}
.footer-link .nav li  a:hover{text-decoration: underline;}
.footer .border-right {border-right: 2px solid #fff; display: inline-block; padding-right: 10px;}



.back-to-top{position: relative;  display: none;}
.back-to-top a{display: block;  z-index: 99;  position: fixed;  right: 0;  bottom:0; height: 40px; width: 45px; background: #97c94e; color: #ffffff; text-align: center; border-radius: 5px 5px 0 0; padding-top: 5px; font-size: 22px; box-shadow: 0 0 10px rgba(0,0,0,0.16); }
.back-to-top a:hover {color: #ffffff;}


/* Breadcrumb-wrapper */
.breadcrumb-wrapper { padding: 15px 0; background: #f5f5f5;}
.breadcrumb { margin-bottom: 0; font-size: 1.5rem;}
.breadcrumb li a { color: #6a6a6a; text-decoration: none;}
.breadcrumb li a:hover { text-decoration: underline;}
.breadcrumb li.active {color: #97ca4e;}

.inspiring-stories { background: #fdffdc; margin-top: 30px; }
.inspiring-stories:first-child { margin-top: 0;}
.story-image img { display: block; height: auto; width: 100%; margin: 0 auto;}
.story-text { padding: 15px; font-size: 0.875em;}
.story-text .btn-default  {padding: 10px 25px;}

#bodyContentTab.nav-tabs { border: none; padding-bottom: 5rem; } 
#bodyContentTab.nav-tabs li { border-left: 1px solid #97ca4e; display: flex; align-items: center; margin: 5px 0;}
#bodyContentTab.nav-tabs li:last-child  { border: none;}
#bodyContentTab.nav-tabs .nav-link { font-weight: 600;}
#bodyContentTab.nav-tabs .nav-link { border: none; color:#6a6a6a; border-radius: 0; padding: 1.5rem; line-height: 2rem; font-size: 1.6rem; }
#bodyContentTab.nav-tabs .nav-link.active,  #bodyContentTab.nav-tabs .nav-link:hover { color: #97ca4e;}

.tab-content { padding: 30px 0 0 0;}

.sectional-nav  {padding-bottom: 5rem;}
.sectional-nav ul.content-navigation {display: flex; flex-wrap: nowrap; padding: 0; margin: 0; list-style: none;}
.sectional-nav ul.content-navigation li a{ border: none; border-left: 1px solid #97ca4e;  color: #6a6a6a; border-radius: 0;  padding: 1.5rem; line-height: 2rem;  font-size: 1.6rem;
    font-weight: 600; min-height: 7rem; text-decoration: none;}
.sectional-nav ul.content-navigation li:first-child a {border: none;}    
.sectional-nav ul.content-navigation li a.active, .sectional-nav ul.content-navigation li a:hover {color: #97ca4e;}

.content-navigation-select { padding: 10px 15px; border: 1px solid #97ca4e; width: 100%; display: none;}

@media screen and (max-width: 992px) {
 .sectional-nav ul.content-navigation {display: none;}
 .content-navigation-select {display: block;}
}


/* Locate Us page */
 .locater-filter { padding:0 0 15px 0 ; margin-bottom: 15px; float: left; width: 100%; clear: both; border-bottom: 1px solid rgba(0,0,0,0.15); position: relative; z-index: 2;}
 #show_city_dropdown_search_btn { float: left; width:  525px;}
 .locater-filter .form-item-store-state { float: left; width: 300px; margin: 0 15px 0 0; }
 .locater-filter .form-item-store-city { float: left; width: 300px; }
 .locater-filter .btn { border-radius: 30px; padding: 7px 25px; border: none; outline: none !important; box-shadow: none !important;}
 .locater-filter .store_locator_btn {float: left;  margin: 0px 15px 0 15px; background: #97ca4e; height: 40px; font-size: 1.4rem;}
 .locater-filter .store_locator_btn:hover { background: #F4901D;}
 .locater-filter .reset-store-location { margin-top: 0px; background: #F4901D; color: #ffffff; height: 40px; padding-top: 11px;}
 .locater-filter .reset-store-location:hover {background: #DF1D3A;} 
 .locater-filter label { display: block; color: #ffffff; font-weight: 600; padding-bottom: 5px;}
 .locater-filter .form-select { border-radius:0;  outline: none !important; box-shadow: none !important; height: 40px; font-size: 1.4rem; border-radius: 30px; padding: 10px 25px;}
 .location-wrapper {display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px;}
 .location-wrapper .views-field.views-field-nothing {flex: 0 0 auto;  width: 50%;   padding: 15px; }
 .location-wrapper .views-field.views-field-nothing .location_wrapper_row {padding: 15px;  height: 100%; transition: 0.5s all linear; background: #f1f1f1;}
  .location-wrapper .views-field.views-field-nothing .location_wrapper_row:hover{box-shadow: 0 0 10px rgba(0,0,0,0.16);}
 .desc_body {font-weight: 700;}
 .location-wrapper .views-field.views-field-nothing .store_time,
 .location-wrapper .views-field.views-field-nothing .mbl_mumber,
 .location-wrapper .views-field.views-field-nothing .txt_name { position:relative; padding-left: 30px; padding-bottom: 6px;}
.location-wrapper .views-field.views-field-nothing .store_time:before {font-family: 'FontAwesome'; font-weight: 400; display: inline-block; padding-right: 6px;  color: #97ca4e;
    position: absolute;  left: 0;  top: 0; content: "\f017";} 
  .location-wrapper .views-field.views-field-nothing .mbl_mumber:before {font-family: 'FontAwesome'; font-weight: 400; display: inline-block; padding-right: 6px;  color: #97ca4e;
    position: absolute;  left: 0;  top: 0; content: "\f10b";} 

  .location-wrapper .views-field.views-field-nothing .txt_name:before {font-family: 'FontAwesome'; font-weight: 400; display: inline-block; padding-right: 6px;  color: #97ca4e;
    position: absolute;  left: 0;  top: 0; content: "\f007";} 

 .contact-form .form-select,
 .contact-form .form-control{ padding: 10px 15px; font-size: 1.4rem; font-family: 'Open Sans', sans-serif;}
 .contact-form .form-label {font-weight: 700;}
 .contact-form .form-check {display: inline-block;}
 .contact-form .btn-primary {color: #fff;  background-color: #97ca4e; border: 2px solid #97ca4e;  padding: 15px 35px; border-radius: 30px; font-family: 'Josefin Sans', sans-serif;
    font-size: 1em;  line-height: normal;  transition: 0.5s all linear;}
 .contact-form .mb-3 {margin-bottom: 2rem !important;}


 /* Site Map */
 .sitemap-wrapper ul {padding: 0; margin: 0 0 15px 0; list-style: none;}
 .sitemap-wrapper ul li {padding-bottom: 5px; padding-left: 20px;}
  .sitemap-wrapper ul li:first-child {padding-left: 0;}
 .sitemap-wrapper ul li a{ color: #3b3b3b; text-decoration: none;}
 .sitemap-wrapper ul li a:hover {color:#97ca4e}
 .sitemap-wrapper ul li a strong { display: inline-block; padding-left: 20px; position: relative; }
 .sitemap-wrapper ul li a strong::before {content: "\f105"; display: block; font-family: FontAwesome; position: absolute; left: 0; top:0px ;}

/* Button */
.btn-default {color: #fff;background-color: #97ca4e;border:2px solid #97ca4e;padding:15px 35px; border-radius: 30px;font-family: 'Josefin Sans', sans-serif;font-size: 1em; line-height: normal; transition: 0.5s all linear;}
.btn-default.focus, .btn-default:focus, .btn-default:hover, .btn-default.active.focus, .btn-default.active:focus, 
.btn-default.active:hover, .btn-default.focus:active, .btn-default:active:focus, .btn-default:active:hover, 
.btn-default:active {background-color: #fff;color:#97ca4e;border:2px solid #97ca4e;box-shadow:none;outline: 0px;}

.other-inhaler-video-items {display: none;}
.video_thumbnail {cursor: pointer;}


/* Background */
.bg-grey {background-color: #fafafa;}

.field-error { border: 1px solid red !important; }

.breadcrumb-item+.breadcrumb-item::before { padding:0 0.5rem; float:right}
.search-help-link {display: none;}

.terms-of-use,
.privacy-policy {direction: ltr; padding-top: 2em;}

.video_thumbnail { flex: 0 0 auto;   width: 25%; border-right: 1px solid #97ca4e; margin-bottom: 30px;}

/* ============ Arabic ============= */
html[dir="rtl"] .header-top-right-nav .form-select { margin: 0 10px 0 0;}
html[dir="rtl"] .search-form-overlay { right: auto; left: 0;}
html[dir="rtl"] .search-form-close {right: auto; left: -5px;}
html[dir="rtl"] .search-form-overlay .form-control {padding: 10px 15px 10px 75px;}
html[dir="rtl"] .search-form-overlay .btn-primary {right: auto; left: 0;}

html[dir="rtl"]  .sectional-nav ul.content-navigation li a{ border: none; border-left: none; border-right:1px solid #97c94e;  }
html[dir="rtl"]  .sectional-nav ul.content-navigation li:first-child a {border: none;} 
.node-other {margin-top:60px;}

/* ============ Float button ============= */

.dabadoc-button{
   position: fixed;
   bottom: 5%;
   left: 1%;
   font-size: 1.2em;
}

.dabadoc-button .btn.btn-default:focus{
   color: white;
   background-color: #97ca4e;
}

/* ==== Pop-Up design ==== */

#third-party-popup {position: fixed; height: 100%; width: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 9999;}

#third-party-popup .text-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #ffffff; padding: 50px; width: 90%; max-width: 500px;    border-radius: 8px;  text-align:center}
#third-party-popup .text-msg h2 {font-size: 22px;padding: 0 0 15px 0;line-height: normal; color: #000000;font-weight: 600;}
  
#third-party-popup .text-msg p {padding: 0 0 15px 0;font-size: 16px;color: #000000;}  
#third-party-popup .text-msg a.btn-default {line-height: normal;height: auto;padding: 15px 25px;font-size: 14px;color: #ffffff;border-radius: 30px; }
#third-party-popup .text-msg a.btn-default:hover {line-height: normal; height: auto;padding: 15px 25px;font-size: 14px;color: #97ca4e;border-radius: 30px;}
#third-party-popup .msg-close-btn {position: absolute; right: 10px;  top: 10px; height: 24px; width: 24px; border-radius: 50%; color: #000000;font-size: 22px;
  font-weight: 600;text-align: center; cursor: pointer; }

  

/* ============= Header fixing =============== */

.header{
   height: 95px;
}

.inner-banner, .region-banner{
   margin-top: 95px;
}

.navigation-wrapper ul.navigation > li > ul{
   top: 46px;
}

.header .header-bottom{
   height: 100%;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

.header .header-bottom .container{
   height: 100%;
}

.header .header-bottom .container .row{
   height: 100%;
}

.kbw-signature {
   width: 400px;
   height: 200px;
}

#sig canvas {
   width: 100% !important;
   height: auto;
}

.kbw-signature {
   display: inline-block;
   border: 1px solid #a0a0a0;
}
.kbw-signature-disabled {
   opacity: 0.35;
}