body{font-family: Poppins, sans-serif !important; color: #4e4c4c; line-height:24px; font-weight:400; overflow-x:hidden; font-size: 14px;}



@font-face {
  font-family: Poppins, sans-serif;
  src: url("/fonts/calibri/Calibri Regular.ttf") format("ttf"),
       url("/fonts/calibri/Calibri Bold.TTF") format("TTF"),
       url("/fonts/calibri/Calibri Light.ttf") format("ttf");
}

/*reusable classes*/
a{-webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear;}
a{color: #373737;} 
a:hover{text-decoration: underline; color: #373737;}

body h1{font-size: 30px; font-weight: 700; color: #4e4c4c; font-family: Poppins, sans-serif; }
img{max-width:100%;}
@media (max-width: 700px) {
.flex-center-mbl {
  display: flex;
  justify-content: center;
}
}
.container {
  max-width: 100%; /* You can set a specific px value if you want */
}
@media (max-width:768px){
  .hp-buttons a{
    display: block;
    margin: 10px 0;
  }
  .approve-reject-row {
    position: absolute;
    top: 0px;
  }


 

  .foottop {margin-top: 800px;}
  .footercalendly {margin-top: -850px; position: relative; margin-left: 0px;}
  .ready-increase-content{text-align: center;color: #1545c1; margin-top: -200px; width: 100%; color: #fff;}
  .incolleft {padding-right: 20px; padding-left: 20px; margin-left: 20px; margin-right: 20px;}
  .incolright {padding-left: 20px; padding-right: 20px; margin-left: 20px; margin-right: 20px;}
  .foottop {margin-top: 800px;}
  .footercalendly {margin-top: -850px; position: relative; margin-left: 0px;}
  .ready-increase-content{text-align: center;color: #1545c1; margin-top: -200px; width: 100%; color: #fff;}
  .hidemobile {display: none;}
  .showmobile {display: block;}
	.hp6boxes{margin-top: 30px;}	
	.boxbackground {text-align: center;}
	.abcfg11 {text-align: center; padding-bottom: 10px;}
	.fa12 {padding: 10px 30px 10px 30px ;}	
	.days2go{margin-top: 30px;}	
	.monthend{color: black;}
	.approvalimage{margin-top: -120px;}	
	.invoiceimage{margin-top: -30px; margin-left: 30px;}
	.mobileimage{margin-top: -20px;}
	.paymentsimage{margin-top: -20px;}	
	.control{color: #0047FF;}
	.monthend{margin-top: 20px;}
	.dottedleft2{display: none;}
	.dottedleft{display: none;}
	.dottedright{display: none;}
	.dottedright2{display: none;}	
	.dottedleftlong{display: none;}	
	.ijustlove{font-size: 40px; text-align: center; padding: 20px; line-height: 55px;}
	.saidnoone {font-size: 22px; margin-top: 0px;}
	.intselect{width: 100%; height: 46px; padding: 10px 15px; align-items: center; gap: 172px; border-radius: 12px; border: 0.5px solid #C5C5C5;
background: #FAFAFA; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); font-size: 16px;}
  .faqquestion {font-size: 20px; font-weight: 500; line-height: 24px; padding-left: 45px; margin-bottom: 10px; }
  .ft44 {font-size: 30px; line-height: normal!important;}
  .ft50 {font-size: 30px; line-height: normal!important;}
  .mob-small svg {display: none;}
  .emailForm {margin-left: 0px; margin-bottom: 50px; margin-top: 10px;}
  .easyToUse {display: none; }
  .emailHeader{font-weight: 700; font-size: 18px; color: #2A68EC;}
  .emailText {font-size: 12px;}
  .form-control {width: 80%;}
  .weworkbar {display: none;}
  .popics-mob {display:flex; justify-content: center;}
  .m-alignr {text-align: center;}
  .m-alignl {text-align: center;}
  .wth60 {width: 100%;}
  .floatr{float:none;}
  .sector-yellow-testimonial {font-weight: 500; font-size: 24px; line-height: 30px; padding: 50px 20px 20px 20px;}
  .bg_yellow {background-size: cover; padding-top: 50px;}
  .bg_green {background-size: cover; padding-top: 50px;}
  .bg_blue {background-size: cover; padding-top: 50px;}
  .sector-text{padding: 10px 50px 80px 50px;}
  .bg-inv {height: 775px;}
  .expand-panel {margin-left: 30px; width: 450px;}
  .expand-panel-team {margin-left: 0px; width: 340px;}
  .x-wide {width: 100%; margin-left: 0px;}
  .intbox {margin-left: auto; margin-right: auto; margin-top: 30px;}
  .orangedaysbox {line-height: 100px; }
  .expand-panel-menu {margin-left: 0px; width: 340px;}
  .menu-item.active {border-bottom: none;}
  .form1 {margin-left: 0px; margin-top: 30px; margin-bottom: 50px; min-width: 330px; }
  .bg-form1 {background-color: #001D67; background-image:none; }
  .bg-form2 {background-color: #EB8201; background-image:none; }
  .bg-form3 {background-color: #F5F5F5; background-image:none; }
  .stack {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/sector-box.svg'); height:100px; background-repeat: no-repeat; background-size: contain;
    font-size: 12px; font-weight: 500; color: #001D67; text-align: center; line-height: 16px; padding: 5px 40px 20px 20px; margin-top: -95px;  }
  .sector-accord-header {padding-left: 0px;}
  .hidestack {display: none;}
  .contactusbox {width: 90%; height: 90px;}
  .contactusbox img {width: 30%; margin-top: 5px; }
  .contactusbox {margin-right: 0px; margin-left: 15px; margin-bottom: 30px;}
  .contactusbox h4 {margin-left: 120px; margin-top: -65px;}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    max-width: 540px; /* Increase this value to make the container wider */
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 769px) {
  .container {
    max-width: 720px; /* Increase this value to make the container wider */
  }
  .whitebtn {
    margin: 5px;
  }
  .approve-reject-row {
    position: absolute;
    top: 30px;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    max-width: 1160px; /* Increase this value to make the container wider */
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1340px; /* Increase this value to make the container wider */
  }
  .approve-reject-row {
    position: absolute;
    top: 30px;
  }
}
.bg-grey {background-color: #F4F4F4;}
.title-orange {
  color: #d87737;
  font-family: Poppins;
  font-size: 37;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
  .ft8 {font-size: 8px; line-height: 200%;}
  .ft10 {font-size: 10px; line-height: 200%;}
  .ft12 {font-size: 12px;}
  .ft13 {font-size: 13px;}
  .ft14 {font-size: 14px;}
  .ft15 {font-size: 15px;}
  .ft16 {font-size: 16px;}
  .ft18 {font-size: 18px;}
  .ft20 {font-size: 20px;}
  .ft22 {font-size: 22px;}
  .ft24 {font-size: 24px;}
  .ft28 {font-size: 28px;}
  .ft30 {font-size: 30px;}
  .ft36 {font-size: 36px;}
  .ft38 {font-size: 38px;}
  .ft40 {font-size: 40px;}
  .ft44 {font-size: 44px;}
  .ft50 {font-size: 50px;}
  .ft60 {font-size: 60px;}
  .ft70 {font-size: 70px;}
  .ft80 {font-size: 80px;}
  .ft90 {font-size: 90px;}
  .ft100 {font-size: 100px;}
  .ft110 {font-size: 110px;}

.header-btn-main ul{list-style: none;margin: 0; padding: 0;display: -webkit-flex;display: -moz-flex;display: -ms-flex; display: flex;-webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; justify-content: flex-end;}
.header-btn-main ul li + li{margin-left: 5px;}
.handmobile-main .header-btn-main ul{-webkit-justify-content: center;-moz-justify-content: center;-ms-justify-content: center;justify-content: center;}

@media (min-width: 1110px) {
  .hidedesktop {display: none;}
  } 

@media (min-width: 991px) {
  .hidedesktop {display: none;}
  } 	

    .borderblur {-webkit-box-shadow: 0px 4px 16px rgba(0,0,0,0.08);
      -moz-box-shadow: 0px 4px 16px rgba(0,0,0,0.08);box-shadow: 0px 4px 16px rgba(0,0,0,0.08);}

.justify-center {
    display: flex;
    -ms-flex-center: center;
    margin-right: -15px;
    margin-left: -15px;
    justify-content: center;
}

.pagetop {margin-top: 95px; border-top:none; background-size: contain; width: 85%; }
.pagetop-nb {margin-top: 100px; background-size: contain; width: 85%;}
.nobutton{background-color: white; border: none;}
.nowrap {white-space: nowrap;}
.extrabold {font-weight: 700;}
strong {font-weight: 500;}
.radius {border-radius: 29px;}
.width95 {width: 95%;}
.minht300{min-height: 320px;}
.border1 {border: 0.5px solid #BFBEBE;}
.text-373737{color: #373737;}
.text-585858{color: #585858;}
.line-height-22 {line-height: 22px;}
.line-height-28 {line-height: 28px;}
.line-height-36 {line-height: 36px;}
.fa16{font-size:16px;}
.text-bold{font-weight: 700;}
.text-normal{font-weight: 300;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr40{padding-right: 40p;}
.pa5{padding: 5px;}
.pa8{padding: 8px;}
.pa10{padding:10px;}
.pa15{padding:15px;}
.pa20{padding:20px;}
.pa30{padding: 30px;}
.pa40{padding:40px;}
.py10{padding-top:10px; padding-bottom:10px;}
.py20{padding-top:20px; padding-bottom:20px;}
.py30{padding-top:30px; padding-bottom:30px;}
.py40{padding-top:40px; padding-bottom:40px;}
.py60{padding-top:60px; padding-bottom:60px;}
.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt26{padding-top:26px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt42{padding-top:42px;}
.pt50{padding-top:50px;}
.pt60{padding-top:60px;}
.pt70{padding-top:70px;}
.pt80{padding-top:80px;}
.pt90{padding-top:90px;}
.pt100{padding-top:100px;}
.pt130{padding-top:130px;}
.pb20{padding-bottom:20px;}
.pb26{padding-bottom:26px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb60{padding-bottom:60px;}
.pb80{padding-bottom:80px;}

.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl40{padding-left:40px;}
.pl50{padding-left: 50px;}
.pl60{padding-left: 60px;}
.pl70{padding-left: 70px;}
.pl80{padding-left: 80px;}
.pl90{padding-left: 90px;}
.pl100{padding-left: 100px;}
.pl110{padding-left: 110px;}
.pl120{padding-left: 120px;}
.pl130{padding-left: 130px;}
.pl140{padding-left: 140px;}
.pl150{padding-left: 150px;}
.pr10{padding-right: 10px;}
.pr20{padding-right: 20px;}
.pr30{padding-right: 30px;}
.pr40{padding-right: 40px;}
.pr50{padding-right: 50px;}
.ma10{margin:10px;}
.ma20{margin:20px;}
.ma30{margin:30px;}
.ma40{margin:40px;}
.mt0{margin-top:0px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top: 40px}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
.mt100{margin-top: 100px;}
.mt120{margin-top: 120px;}
.mt130{margin-top: 130px;}
.mt140{margin-top: 140px;}
.mt150{margin-top: 150px;}
.mt155{margin-top: 155px;}
.mt200{margin-top: 200px;}
.mtn90{margin-top: -90px;}
.mtn100{margin-top: -100px;}
.mtn150{margin-top: -150px;}
.mtn200{margin-top: -200px;}
.mb0{margin-bottom: 0px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb60{margin-bottom: 60px;}
.mb80{margin-bottom: 80px;}
.mb100{margin-bottom: 100px;}
.mb130{margin-bottom: 130px;}
.mb140{margin-bottom: 140px;}
.mb150{margin-bottom: 150px;}
.mr10{margin-right:10px;}
.mr40{margin-right: 40px;}
.mr100{margin-right:100px;}
.mg0{ margin-top: 0; margin-bottom: 0;}
.mg10{ margin-top: 10px; margin-bottom: 10px;}
.mg20{ margin-top: 20px; margin-bottom: 20px;}
.mg30{ margin-top: 30px; margin-bottom: 30px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}
.mr50{margin-right: 50px;}
.mr10{margin-right: 10px;}
.mrn40{margin-right: -40px;}
.mrn46{margin-right: -46px;}
.mrn50{margin-right: -50px;}
.ml0 {margin-left: 0px !important;}
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.ml40{margin-left: 40px;}
.ml60{margin-left: 60px;}
.ml-auto{margin-left: auto}
.mtm60-100 {margin-top: 60px;}
.bborder {border: 1px solid #2047BA; border-radius: 40px;}
.oborder {border: 1px solid #EC854B; border-radius: 40px;}
.colfixedheight{display: flex; flex-direction: column; justify-content: space-between; height: 750px;}
.erpbox {margin-top: -80px; border-radius: 29px; background: rgba(255, 255, 255, 0.20); box-shadow: 0px 4px 26px 0px rgba(0, 0, 0, 0.10); 
  backdrop-filter: blur(2px);}

.w800 {width: 800px;}


.rotate-icon {
  transition: transform 0.3s ease;
}

.rotate-icon.rotated {
  transform: rotate(90deg);
}

.rotate-icon.rotated180 {
  transform: rotateY(180deg);
}


@media (max-width:768.98px){
.mtm60-100 {margin-top: 120px;}
.pagetop {width: 100%;}
}

.vendors {text-transform: capitalize;}

/*desktop menu links*/
.footer-main{padding: 40px 0 0;position: relative;}
.foottop {margin-top: 200px;}
.footercalendly {margin-top: -800px;}
.footer-link-main {border-bottom: 1px solid #33424e;}
.footer-logo a{color: #4e4c4c;font-weight: 600;}
.footer-logo a img{max-height: 50px;margin-right: 10px;}
.footer-content{font-size: 16px;margin-top: 8px;}
.footer-mail-link{margin-top: 30px;margin-bottom: 30px;}
.footer-mail-link h5{font-size: 16px;margin: 0;}
.footer-mail-link a{font-size: 16px; line-height: 22px; position: relative;}
.footer-social-link ul{list-style: none;padding: 0; margin: 0;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: flex;}
.footer-social-link ul li + li{margin-left: 20px;}
.footer-social-link ul li a{color: #4e4c4c;}
.footer-social-link ul li a.twitter:hover, .footer-social-link ul li a.twitter:focus {
  color: #0090f1;
}
.footer-social-link ul li a.linkedin:hover, .footer-social-link ul li a.linkedin:focus {
  color: #00537b;
}
.footer-social-link ul li a.youtube:hover, .footer-social-link ul li a.youtube:focus {
  color: #ff0000;
}
.footer-social-link ul li a i{font-size: 0;}
.footer-social-link ul li a i::before{font-size: 25px;}
.footer-links{margin-bottom: 40px;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.footer-links > div{width: calc(33.333333% - 30px);margin: 0 15px;}
.footer-links ul{list-style: disc;padding: 0; margin: 0;}
.footer-links ul li a{color: #4e4c4c;padding: 4px 0;display: block;font-size: 16px;}
.footer-links ul li a:hover, .footer-links ul li a:focus {
  color: #1545c1;
}
.footer-mail-link a:hover, .footer-mail-link a:focus {
  text-decoration: underline;
  padding-left: 15px;
}
.footer-mail-link a::before {
  position: absolute;
  content: "";
}

/* Ticketing */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-status-new { background: #007bff; color: #fff; }
.badge-status-open { background: #17a2b8; color: #fff; }
.badge-status-closed { background: #6c757d; color: #fff; }
.badge-status-awaiting { background: #ffc107; color: #212529; }
.badge-status-dev { background: #6610f2; color: #fff; }
.badge-status-default { background: #adb5bd; color: #212529; }
.badge-priority-high { background: #dc3545; color: #fff; }
.badge-priority-medium { background: #ffc107; color: #212529; }
.badge-priority-low { background: #198754; color: #fff; }
.badge-internal {
  background: #343a40;
  color: #fff;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal[hidden] {
  display: none;
}
.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  width: min(600px, 95vw);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.form-field label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.form-field input,
.form-field textarea,
.form-field select {
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  border: none;
  font-weight: 600;
  transition: background 0.2s ease;
}
.btn-primary {
  background: #ab0058;
  color: #fff;
}
.btn-primary:hover {
  background: #8a0046;
}
.btn-secondary {
  background: #6c757d;
  color: #fff;
}
.btn-secondary:hover {
  background: #5a6268;
}

.ticket-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.ticket-table th,
.ticket-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #dee2e6;
}
.ticket-table tbody tr:hover {
  background: rgba(171, 0, 88, 0.05);
}
.ticket-table .empty {
  text-align: center;
  padding: 2rem 1rem;
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.stat {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  text-align: center;
}
.stat-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6c757d;
}
.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ab0058;
}

.thread-item {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
}
.thread-item-agent {
  border-left: 4px solid #ab0058;
}
.thread-item-customer {
  border-left: 4px solid #17a2b8;
}
.thread-item header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.thread-item .timestamp {
  font-size: 0.8rem;
  color: #6c757d;
}
.thread-item .thread-footer {
  margin-top: 0.75rem;
  background: rgba(171, 0, 88, 0.05);
  border-radius: 8px;
  padding: 0.75rem;
}

.ticket-context {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.ticket-context dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
}
.ticket-context dt {
  font-weight: 600;
  color: #6c757d;
}
.ticket-context dd {
  margin: 0;
}
.ai-logs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ai-logs li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9ecef;
}
.ai-logs time {
  display: block;
  font-size: 0.75rem;
  color: #6c757d;
}

.ticket-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}
.ticket-filters .filter-group {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}

.magic-link-form {
  max-width: 420px;
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.magic-link-form .form-hint {
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 0.5rem;
}

.agent-ticket-detail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}
.agent-ticket-detail .ticket-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}
.agent-ticket-detail textarea {
  width: 100%;
}
.agent-ticket-detail .form-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
}

@media (max-width: 992px) {
  .agent-ticket-detail .ticket-body {
    grid-template-columns: 1fr;
  }
}
  width: 8px;
  height: 8px;
  top: 40%;
  left: 0;
  transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -webkit-transition: all 0.2s ease-in-out 0s;
  background-color: #28a745;
  border-radius: 50%;
  opacity: 0;
}
.footer-mail-link a:hover::before{opacity:1;}
.footer-copyright{color: #ffffff;padding: 15px 0;font-size: 16px;}
.footer-copyright p{margin: 0;color: #7f8890;}
.footer-copyright p i{font-size: 4px;position: relative;top: -3px;margin: 0 5px;}
.artsanace-logo{text-align: right;}
.artsanace-logo img{max-height: 20px;}

@media only screen and (max-width:450px) {
  .xsm-p10{padding: 10px;}
  .xsm-p20{padding: 20px;}
  .xsm-p30{padding: 30px;}
  .xsm-pt60{padding-top: 60px;}
  .xsm-pb60{padding-bottom: 60px;}
  .xsm-mtn60{margin-top: -60px;}
  .xsm-mtn100{margin-top: -100px;}
  .xsm-mtn120{margin-top: -120px;}
  .xsm-mtn130{margin-top: -130px;}
  .xsm-mtn140{margin-top: -140px;}
  .xsm-mtn150{margin-top: -150px;}
  .xsm-mtn200{margin-top: -200px;}
  .xsm-mtn300{margin-top: -300px;}
  .xsm-mt10 {margin-top: 10px;}
  .xsm-mt20 {margin-top: 20px;}
  .xsm-mt30 {margin-top: 30px;}
  .xsm-mt40 {margin-top: 40px;}
  .xsm-mt50 {margin-top: 50px;}
  .xsm-mt60 {margin-top: 60px;}
  .xsm-mt70 {margin-top: 70px;}
  .xsm-mt80 {margin-top: 80px;}
  .xsm-mt100 {margin-top: 100px;}
  .xsm-mt120 {margin-top: 120px;}
  .xsm-mt140 {margin-top: 140px;}
  .xsm-mt150 {margin-top: 150px;}
  .xsm-mrn20 {margin-right: -20px;}
  .xsm-ml-30 {margin-left: -30px;}
}


@media only screen and (min-width: 451px) and (max-width: 768px) {
.sm-p10{padding: 10px;}
.sm-p20{padding: 20px;}
.sm-p30{padding: 30px;}
.sm-pt100{padding-top: 100px;}
.sm-pb100{padding-bottom: 100px;}
.sm-mtn20{margin-top: -20px;}
.sm-mtn30{margin-top: -30px;}
.sm-mtn40{margin-top: -40px;}
.sm-mtn50{margin-top: -50px;}
.sm-mtn60{margin-top: -60px;}
.sm-mtn120{margin-top: -120px;}
.sm-mtn150{margin-top: -150px;}
.sm-mtn200{margin-top: -200px;}
.sm-mtn300{margin-top: -300px;}
.sm-mt40 {margin-top: 40px;}
.sm-mt50 {margin-top: 50px;}
.sm-mt80 {margin-top: 80px;}
.sm-mt100 {margin-top: 100px;}
.sm-mt120 {margin-top: 120px;}
.sm-mt140 {margin-top: 140px;}
.sm-mt150 {margin-top: 150px;}
.sm-mt200 {margin-top: 200px;}
.sm-mb50 {margin-bottom: 50px;}
.sm-mb100 {margin-bottom: 100px;}
.sm-mb140{margin-bottom: 140px;}
.sm-mrn23 {margin-right: -23px;}
.sm-ml-30 {margin-left: -30px;}
}

@media only screen and (min-width: 769px) and (max-width: 1200px){
.lrg-pt140{padding-top: 140px;}
.lrg-pb140{padding-bottom: 140px;}
.lrg-mtn60{margin-top: -60px;}
.lrg-mtn120{margin-top: -120px;}
.lrg-mtn160{margin-top: -160px;}
.lrg-mtn200{margin-top: -200px;}
.lrg-mtn300{margin-top: -300px;}
.lrg-mtn350{margin-top: -350px;}
.lrg-mt20 {margin-top: 20px;}
.lrg-mt30 {margin-top: 30px;}
.lrg-mt40 {margin-top: 40px;}
.lrg-mt50 {margin-top: 50px;}
.lrg-mt60 {margin-top: 60px;}
.lrg-mt80 {margin-top: 80px;}
.lrg-mt90 {margin-top: 90px;}
.lrg-mt100 {margin-top: 100px;}
.lrg-mt110 {margin-top: 110px;}
.lrg-mt120 {margin-top: 120px;}
.lrg-mt140 {margin-top: 140px;}
.lrg-mt150 {margin-top: 150px;}
.lrg-mb100 {margin-bottom: 100px;}
.lrg-mb120 {margin-bottom: 120px;}
.lrg-mb140 {margin-bottom: 140px;}
.lrg-mrn47 {margin-right: -47px;}
.lrg-ml-30 {margin-left: -30px;}
}
@media (min-width:1201px){
.xlrg-pt140{padding-top: 140px;}
.xlrg-pb140{padding-bottom: 140px;}
.xlrg-mtn60{margin-top: -60px;}
.xlrg-mtn120{margin-top: -120px;}
.xlrg-mtn160{margin-top: -160px;}
.xlrg-mtn200{margin-top: -200px;}
.xlrg-mtn300{margin-top: -300px;}
.xlrg-mtn350{margin-top: -350px;}
.xlrg-mrn50 {margin-right: -50px;}
.xlrg-mt20 {margin-top: 20px;}
.xlrg-mt30 {margin-top: 30px;}
.xlrg-mt40 {margin-top: 40px;}
.xlrg-mt50 {margin-top: 50px;}
.xlrg-mt60 {margin-top: 60px;}
.xlrg-mt80 {margin-top: 80px;}
.xlrg-mt100 {margin-top: 100px;}
.xlrg-mt110 {margin-top: 110px;}
.xlrg-mt120 {margin-top: 120px;}
.xlrg-mt140 {margin-top: 140px;}
.xlrg-mt150 {margin-top: 150px;}
.xlrg-mb140 {margin-bottom: 140px;}
.xlrg-mb150 {margin-bottom: 150px;}
.xlrg-ml-30 {margin-left: -30px;}
}

@media (max-width:991px){
  .menu-nav-left ul li a{font-size: 16px;}
  .main-nav .menu__link{font-size: 14px;line-height: 20px;}
  .logo_slider .slick-list{padding: 0 55px 0 0!important;}
  .line-svg{text-align: center;}
  .line-svg svg{position: static;height: 500px;margin-left: 65px;}
  .line-svg .svgline-content{left: 48%;}
  .footer-links > div{width: calc(50% - 30px);}
  .hm-accounting-logo .accounting_slider li{margin-bottom: 10px;}
  .hm-ap-invoice-content{margin-top: 30px;}
  .hm-accounting-logo .accounting_slider{margin-top: 30px;}
  .footer-links .footer-links-one{display: none;}
  .footer-logo-content .footer-logo a{font-size: 0;}
  .footer-logo-content{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: flex;-webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center;}
  .footer-logo-content .footer-logo{width: calc(50% - 30px);;margin: 0 15px;text-align: center;}
  .footer-logo-content .footer-logo-links{width: calc(50% - 30px);margin: 0 15px;}
  .footer-logo-content .footer-logo-links .footer-links-one{text-align: left;margin-bottom: 20px;}
  .footer-logo-content .footer-logo-links ul{list-style: none;padding: 0; margin: 0;display: inline-block;text-align: left;}
  .footer-logo-content .footer-logo-links li a{color: #ffffff;padding: 8px 0;display: block;font-size: 15px;}
  .footer-logo a img {max-height: initial; margin-right: 0;}
  .footer-link-main{border-top: 1px solid #33424e;padding-top: 20px;}
  .footer-content{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: flex;-webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
  .footer-content .footer-content-wraper{width: 100%;order: 2;}
  .footer-content .footer-mail-link{width: 100%;order: 3;margin-top: 0;}
  .footer-content .footer-social-link{width: 100%;order: 1;padding: 40px 0;}
  .footer-social-link ul{-webkit-justify-content: center;-moz-justify-content: center;-ms-justify-content: center;justify-content: center;}
  .footer-links{margin-bottom: 0px;}
  .artsanace-logo {text-align: center;}
  .footer-copyright p i{display: none;}
  .footer-copyright{text-align: center;}
  .footer-copyright p span{display: block; margin-bottom: 15px;}
  .footer-main::before{display: none;}
}

@media only screen and (min-width: 769px) and (max-width: 1366px) {
  .ready-increase-content{margin-left: 100px;}
  .ready-increase-content-hp{margin-left: 20px;}
	.dottedleftlong{margin-left: 300px; margin-top: 40px; max-width: 550px;}	
	.dottedright{margin-left: 300px; margin-top: 60px;}
	.dottedright2{margin-left: 300px; margin-top: 30px; max-width: 550px;}		
	.dottedleft2{margin-left: 500px; margin-top: 10px; margin-bottom: 30px;}
	.homeh2gp{font-size: 12px; word-spacing: 3px; }
	.ijustlove{font-size: 34px; text-align: center;}
	.loveit1 {margin-left: -150px; margin-top: 150px; }		
	.intselect {width: 330px;}
  .homeh1 {line-height: 42px;}
}

.ready-increase-bg{background-repeat: no-repeat;background-position: bottom;padding: 450px 0 20px;}
.ready-increase-content{text-align: center;color: #1545c1; margin-top: -500px; width: 450px;}
.ready-increase-content-hp{text-align: center;color: #1545c1; margin-top: -500px; width: 350px;}
.ready-increase-content h4{font-size: 60px;font-weight: 700;}
.ready-increase-content p{margin: 20px 0 40px;font-size: 16px; line-height: 22px;}


/*-- scroll to top --*/
.scrollToTop{width: 40px; height: 40px; position: fixed; z-index: 9999; right: 10px; bottom: 150px; color: #fff; text-align: center; line-height: 40px;cursor: pointer; border-radius: 100%; border: 1px solid #1545c1; padding: 3px;display: none;}
.scrollToTop:hover{text-decoration: none;}
.scrollToTop i{display: block; width: 100%; height: 100%; background: #1545c1; border-radius: 100%; line-height: 170% !important; font-size: 18px; color: #ffffff;}
/*Magento 2 css End*/
/*------scroll to top end--------*/

.buttonsolidbl {padding: 4px 11px 4px 11px; border-radius: 12px; color: white; background-color: #0047FF; font-weight: 200; font-size: 12px; border: 2px solid #0047FF; height: 38px;}
.buttonsolidbl:hover {background-color: white; color: #0047FF }

.img-contain img {object-fit: contain}

.gradient { position: relative;  min-height: 450px;}	
.gradient::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(42, 104, 234, 0.42) 1.04%, rgba(115, 0, 185, 0.42) 34.38%, rgba(121, 0, 194, 0.42) 67.62%, rgba(42, 104, 234, 0.42) 100%); filter: blur(116.5px); z-index: -1; margin-top: 0px; width: 50%; margin-left: 25%; margin-right: 30%; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);}

.gradcontent {position: relative; z-index: 1;}
.bluegradft {background: linear-gradient(90deg, #030080 6.67%, #2A68EC 37.58%, #2A68EC 61.96%, #030080 90.26%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
	
.homeh1 {font-size: 34px; font-style: normal; font-weight: 700; line-height: normal; background: linear-gradient(262deg, #9F02FF -11.79%, #643BFF 20.65%, #0047FF 49.52%, #5642F6 80.76%, #8F00E7 107.39%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}


.homeh1og {background: linear-gradient(262deg, #FF7A00 -11.79%, #FF8D00 50.93%, #FF7A00 107.39%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.homeh2gp {font-size: 18px; font-weight: 600; background: linear-gradient(287deg, #9F02FF 4.35%, #643BFF 30.39%, #0047FF 53.56%, #5642F6 78.63%, #8F00E7 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}

.yellowh1 {background: linear-gradient(90deg, #FF8D00 50%, #F3BF34 56.11%, #F3BF34 67.15%, #FF8D00 72.86%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

.xeroh1 {background: linear-gradient(261deg, #00738E 9.87%, #1AB4D7 32.49%, #1AB4D7 71.83%, #00738E 96.41%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

.tryzaharah1{background: linear-gradient(262deg, #2047BA -17.21%, #2A68EC 42.49%, #2047BA 102.2%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 700; font-size: 38px; }
.greenheader {background: linear-gradient(262deg, #00620E -11.79%, #00A217 20.64%, #00A517 20.65%, #00B81A 49.52%, #00A517 80.76%, #00620E 107.39%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
.boldclaim{color: #000; font-size: 15px; font-weight: 500;}	
.control{color: #FFF; text-align: center; font-size: 38px; font-weight: 700; line-height: 42px;}	

.hp6boxes {min-width: 200px; padding-top: 10px; min-height: 80px; border-radius: 25px; border: 0.5px solid #EEE; background: rgba(255, 255, 255, 0.72); box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.14); position: relative;}
.hp6boxes .collapse {min-height: 150px;}	

.boxbackground{padding-top: 10px; padding-bottom: 6px; padding-left: 4px;}
.boxopaque{background-color: white; z-index: 300;}
	
.abcfg11 {color: #181818; font-size: 16px; font-weight: 500; letter-spacing: 0.48px;}
.ls1{letter-spacing: 1.68px;}

.monthend {color: #4d4d4d; font-weight: 600; margin-top: 30px;}
.days2go {color: #B12180; font-size: 28px; font-weight: 700; }
.weintegrate{color: #0047FF; font-size: 36px; font-weight: 500; line-height: normal; }
.intselect{text-align: center; width: 250px; height: 46px; padding: 10px 15px; align-items: center; gap: 172px; border-radius: 12px; border: 0.5px solid #C5C5C5;
background: #FAFAFA; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); font-size: 16px;}
.blueboxhp {border-radius: 40px; background: #2A68EA; box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.06); padding: 21px 30px 30px 45px; color: white; font-size: 18px; line-height: 28px;}
.fa12{font-size: 12px;}
.dottedleft{margin-left: 300px; margin-top: 60px;}
.dottedleft2{margin-left: 600px; margin-top: -100px; margin-bottom: 50px;}	
.dottedright{margin-left: 300px; margin-top: -200px;}
.dottedright2{margin-left: 300px; margin-top: -30px;}
.loveit1 {margin-left: -150px;}	
.loveit2 {margin-left: 300px;}	
.dottedleftlong{margin-left: 300px; margin-top: -130px;}		
.colh2{color: #2A68EA; font-size: 30px; font-weight: 700; line-height: 42px;}	
.coltext{font-size: 18px; color: #170F49; font-weight: 400}	
.coltext p {margin-top: 47px;}	
.ctatext{margin-top: 47px; color: #001F5F; font-size: 20px; font-weight: 600;}	
.approvalimage{margin-top: -320px;}	
	.invoiceimage{margin-top: -260px;}	
	.paymentsimage{margin-top: -50px;}	
	.mobileimage{margin-top: -70px;}
	.faqbox{min-height: 132px; border-radius: 18px; box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.14); background-color: white; border: 0.5px solid #EEE; }
	.faqquestion {color: #001F5F; font-size: 22px; font-weight: 500; line-height: 28px; padding-left: 45px; margin-top: 20px; }
	.faqbody{font-size: 16px; padding-left: 30px; padding-bottom: 30px; padding-right: 20px; }
  .faqbody a {color: #2a68ec; text-decoration: underline;}
	.faqicon{margin-top: 20px;}
	.testih4 {color: #4D4D4D; font-size: 24px; font-weight: 400;}
	.ijustlove{margin-top: 30px; font-size: 30px; font-weight: 700; background: linear-gradient(287deg, #9F02FF 4.35%, #643BFF 30.39%, #0047FF 53.56%, #5642F6 78.63%, #8F00E7 100%); 
background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 35px; }
	
.saidnoone{font-size: 28px; font-weight: 400; font-style: italic; background: linear-gradient(287deg, #9F02FF 4.35%, #643BFF 30.39%, #0047FF 53.56%, #5642F6 78.63%, #8F00E7 100%);
background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 20px;}
.po-ml50 {margin-left: -50px; margin-top: -25px;}
.po-ml100 {padding-left: 385px;}
.showmobile {display: none;}
	
	
	@media (min-width: 992px) {
  .custom-container {
    max-width: 1350px; /* Set your desired width for large devices */
  }

}
.bg-white {background-color: #fff; border: solid 1px #cfcfcf; padding: 20px; border-radius: 10px; margin-left: 10px; width: 98%;}
.border-rt {border-right: solid 1px #eaeaea;}   
.blue1 {color: #001D67;}
.blue2 {color: #2A68EC;}
.blue3 {color: #001F5F;}
.blue4 {color: #170F49;}
.green1 {color: #39B34A;}
.green2 {color: #1A7800;}
.black1 {color: #181818;}
.orange1 {color: #FF8D00;}
.purple1 {color: #9A01A1;}
.purple2 {color: #5C0094;}
.grey1 {color: #4d4d4d;}
.xero {color: #1AB4D7;}
.textwhite {color: white;}
.fw400 {font-weight: 400;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.fw800 {font-weight: 800;}
.fw500 {font-weight: 500;}
.fw300 {font-weight: 300;}
.br35{border-radius: 35px;}
.br50{border-radius: 50px;}
.org_fade {background: linear-gradient(262deg, #FF8D00 -17.21%, #FFB800 42.49%, #FF8D00 102.2%); background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;} 
.lh20 {line-height: 20px;}
.lh24 {line-height: 24px;}
.lh32 {line-height: 32px;}    
.lh40 {line-height: 40px;}
.lh50 {line-height: 50px;}
.lh75 {line-height: 75px;}
.lh200 {line-height: 200%}
.emailForm {margin-left: 0px; z-index: 2; width: 300px; margin-top: -300px; }
.easyToUse {margin-top: -310px; margin-left: 300px; z-index: 1 }
.emailHeader{font-weight: 500; font-size: 18px; color: #2A68EC;}
.weworkbar {margin-top: -10px; padding-left: 170px;}
.weworkheader {margin-top: -150px;}

@media (min-width: 701px) {
.bg-po {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/pobak7.svg'); background-size: cover; background-position:center bottom; background-repeat: no-repeat;  height: 650px;}
.bg-ap {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/apbak.svg'); background-size: cover; background-position:center bottom; background-repeat: no-repeat;  height: 750px;}
.bg-inv {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/bg-inv.svg'); background-size: cover; background-position:center bottom; background-repeat: no-repeat; height: 650px;}
}
@media (max-width: 700px) {
  .bg-po {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/pobak7.svg'); background-size: cover; background-position:center bottom; background-repeat: no-repeat; height: 600px;}
  .bg-ap {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/apbak.svg'); background-size: cover; background-position:center bottom; background-repeat: no-repeat; height: 600px;}
  .bg-inv {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/bg-inv.svg'); background-size: cover; background-position:center bottom; background-repeat: no-repeat; height: 600px;}
}

.bg-form1 {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/bg-blue3.svg'); background-size:contain; background-repeat:repeat-y;  background-attachment: fixed; width: 100%; height: 100%; }
.bg-form2 {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/bg-orange.svg'); background-size:contain; background-repeat:repeat-y; background-attachment: fixed; width: 100%; height: 100%; }
.bg-form3 {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/grey-wave.svg'); background-size:contain; background-repeat:repeat-y; background-attachment: fixed; width: 100%; height: 100%; }
.row-purple-swirl {
  background-image: url('https://www.zaharasoftware.com/wp-content/uploads/2024/08/row-purple-swirl.webp'); 
  background-size:cover; 
  background-repeat:no-repeat; 
  width: 100%; 
  background-position:center; 
  height: 236px;}

.bg-features-purple {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/features_swirl2.svg'); background-size:cover; background-repeat:no-repeat; width: 100%; background-position:center; height: 400px;}
.bg-wave-blue {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/bluewave.svg'); background-size:cover; background-repeat:no-repeat; width: 100%; background-position:center; height: 400px;}
.bg-features-grey {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/features-grey-swirl.svg'); background-size:cover; background-repeat:no-repeat; width: 100%; background-position:center; height: 400px;}
.bg_yellow {background-image:url('https://zaharasoftware.com/wp-content/uploads/2023/08/yellowblock.svg'); background-repeat: no-repeat; color: white; width: 90%; background-size: contain; background-position: center;}
.bg_green {background-image:url('https://zaharasoftware.com/wp-content/uploads/2023/08/sector-green.svg'); background-repeat: no-repeat; color: white; width: 90%; background-size: contain; background-position: center;}
.bg_blue {background-image:url('https://zaharasoftware.com/wp-content/uploads/2023/08/sector-blue.svg'); background-repeat: no-repeat; color: white; width: 90%; background-size: contain; background-position: center;}
.bg-sectors-yellow {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/yellow-wave-small.png'); background-size:contain; background-repeat:no-repeat; width: 100%; background-position:center; height: 400px;}
.bg-sectors-green {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/green-wave-small-2.png'); background-size:contain; background-repeat:no-repeat; width: 100%; background-position:center; height: 400px;}
.greenblend {background: linear-gradient(90deg, #26781A 50%, #39B34A 54.69%, #39B34A 67.83%, #26781A 72.86%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Poppins;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal; }
.pohero {margin-top: -500px;}
.popics-mob{display: none;}
.m-alignr {text-align: right;}
.m-alignl {text-align: left;}
.ht100 {height: 100px;}
.wth60 {width: 65%;}
.floatr {float: right;}
.floatl {float: left;}
.sector-yellow-testimonial {font-weight: 500; font-size: 28px; line-height: 32px; padding: 60px 60px 10px 80px;}
.ft-padding {padding-left: 40px; padding-top: 20px;}
.ft-padtop {padding-top: 50px;}
.sector-text{padding: 10px 70px 80px 70px;}



/* Apply styles for Apple devices */
@media screen and (max-width: 1195px) {
  .bg_yellow {width: 100%; } 
  .bg_blue {width: 100%; } 
  .bg_green {width: 100%; } 
  .sector-yellow-testimonial {font-weight: 600; font-size: 24px; line-height: 28px; padding: 120px 50px 0px 50px;}
  .feature-icon svg {width: 80px; height: 80px;}
  .ft-padding {padding-top: 0px;}
  .ft-padtop {padding-top: 0px;}
  .x-wide {width: 1195px; margin-left: -100px;}
  .sector-text{padding: 10px 20px 120px 20px;}
}

@media screen and (min-width: 760px) and (max-width: 890px) {
.x-wide {width: 100%; margin-left: 0px;}

}

      .btn-approve {
  background-color: #007002;
  color: white; /* Blue */
  padding: 8px 36px;
  border-radius: 4px;
  border: solid 2px #007002;
}

.btn-reject {
  background-color: #A00101;
  color: white; /* Blue */
  padding: 8px 36px;
  border-radius: 4px;
  border: solid 2px #A00101;
}

.btn-review {
  background-color: #FC9700;
  color: white; /* Blue */
  padding: 5px 12px;
  border-radius: 4px;
  border: solid 2px #FC9700;
  font-size: 12px;
}

.btn-review:hover {
  background-color: #fff;
  color: #FC9700; /* Blue */
  padding: 4px 12px;
  border-radius: 4px;
  border: solid 2px #f89500f0;
  font-size: 12px;
}


.btn-solid-blue {
  background-color: #0047FF; /* Blue */
  color: white!important;
  padding:5px 13px;
  border: 1px solid #0047FF;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 14px;
}

.btn-solid-blue:hover {
  background-color: white;
  color: #0047FF!important; /* Blue */
  border: 1px solid #0047FF; /* Blue */
  padding: 5px 13px;
  border-radius: 4px;
  font-size: 14px;
}


.btn-solid-zsl {
  background: linear-gradient(90deg, #AB0058 0%, #FF6F00 100%); 
  color: white!important;
  padding:5px 13px;
  border: 1px solid #AB0058;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 14px;
}

.btn-solid-zsl:hover {
  background-color: #ffffff !important;
  color: #ffffff!important; 
  border: 1px solid #AB0058; 
  padding: 5px 13px;
  border-radius: 12px;
  font-size: 14px;
}

.wborder { border: 1px solid #fff;}
.wborde:hover { border: 1px solid #2a68ec;}

/* White Button with Blue Border */
.btn-white-blue-border {
  background-color: white;
  color: #0047FF; /* Blue */
  padding: 5px 12px;
  border: 1px solid #0047FF; /* Blue */
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 12px;
  text-decoration: none;
}

.btn-white-blue-border:hover {
  background-color: #0047FF; /* Blue */
  color: white;
  text-decoration: none;
}

.panel-container {
	display: flex;
	overflow-x: hidden;
}

.panel {
	width: 100%;
	min-height: 300px;
	padding: 20px;
	box-sizing: border-box;
	display: none;
	transition: width 0.4s ease-in-out /* Add smooth transition */
}

/* Show the first panel initially */
.panel:nth-child(1) {
	display: block;
}

.expand-panel {width: 384px; height: 80px; border-radius: 18px;
	border: 0.5px solid #EEE;
	background: rgba(255, 255, 255, 0.52);
	box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.14);
	padding: 25px;
	cursor: pointer;
  transition: height 0.3s ease-in-out /* Add smooth transition */;
 
}

.expand-panel.expanded {
    min-height: 190px;
    background-color: #ffffff;
    animation: bounce 0.8s; /* Add bounce animation */
   
   
}


.expand-panel-ap {width: 384px; height: 80px; border-radius: 18px;
	border: 0.5px solid #EEE;
	background: rgba(255, 255, 255, 0.52);
	box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.14);
	padding: 25px;
	cursor: pointer;
  transition: height 0.3s ease-in-out /* Add smooth transition */;
  position: absolute;
}

.expand-panel-ap.expanded {
    min-height: 190px;
    background-color: #ffffff;
    animation: bounce 0.8s; /* Add bounce animation */
    z-index: 2000;
   
}

.expand-panel-int {width: 384px; height: 80px; border-radius: 18px;
	border: 0.5px solid #EEE;
	background: rgba(255, 255, 255, 0.52);
	box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.14);
	padding: 25px;
	cursor: pointer;
  transition: height 0.3s ease-in-out /* Add smooth transition */
}

.expand-panel-int.expanded {
    min-height: 230px;
    background-color: #ffffff;
    animation: bounce 0.8s; /* Add bounce animation */
   
    
}

.hidden-text {
  display: none; /* Initially hidden */
  position: absolute; /* Position it absolutely within the div */
  left: 0; /* Align it to the left */
  width: 100%; /* Make it full width */
  transform: translateY(-50%); /* Adjust for vertical centering */
  padding: 80px 15px 20px 15px;
  z-index: 1; /* Place it above the content */
  margin-top: 30px;
 
}

.hidden-text-integration {
  display: none; /* Initially hidden */
  position: absolute; /* Position it absolutely within the div */
  left: 0; /* Align it to the left */
  width: 100%; /* Make it full width */
  transform: translateY(-50%); /* Adjust for vertical centering */
  padding: 20% 15px 20px 15px;
  z-index: 1; /* Place it above the content */
  margin-top: 60px;
 
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.expand-panel-team {
  display: none;
  width: 100%;
  height: 500px;
  margin-top: -50px;
  border: 0.5px solid #EEE;
  box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.14);
  padding: 25px;
  cursor: pointer;
  transition: height 0.3s ease-in-out; /* Add smooth transition */
  position: absolute;
  }

.expand-panel-team.expanded {
  height: auto;
  background-color: #ffffff;
  animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  z-index: 1000;
  padding-bottom: 20px;

}

.team-item {cursor: pointer;}

.hidden-text-team {
  display: none; /* Initially hidden */
  left: 0; /* Align it to the left */
  width: 100%; /* Make it full width */
  transform: translateY(-50%); /* Adjust for vertical centering */
  padding: 20px 15px 20px 15px;
  margin-top: 160px;
  
  }



.title {display: block;}


@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes slide-bottom {
  0% {
    
            transform: translateY(0);
  }
  100% {
    
            transform: translateY(20px);
  }
}


.cal1-container {
    background: #fff;
    width: 400px;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
 
.cal1-container header {
    display: flex;
    align-items: center;
    padding: 25px 30px 10px;
    justify-content: space-between;
}
 
header .cal1-navigation {
    display: flex;
}
 
header .cal1-navigation span {
    height: 38px;
    width: 38px;
    margin: 0 1px;
    cursor: pointer;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    user-select: none;
    color: #aeabab;
    font-size: 1.9rem;
}
 
.cal1-navigation span:last-child {
    margin-right: -10px;
}
 
header .cal1-navigation span:hover {
    background: #f2f2f2;
}
 
header .cal1-current-date {
    font-weight: 500;
    font-size: 1.45rem;
}
 
.cal1-body-p {
    padding: 15px;
}
 
.cal1-body-p ul {
    list-style: none;
    flex-wrap: wrap;
    display: flex;
    text-align: center;
}
 
.cal1r-body-p .cal1-dates {
    margin-bottom: 20px;
}
 
.cal1-body-p li {
    width: calc(100% / 7);
    font-size: 14px;
    color: #414141;
}
 
.cal1-body-p .cal1-weekdays li {
    cursor: default;
    font-weight: 500;
}
 
.cal1-body-p .cal1-dates li {
    margin-top: 14px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
 
.cal1-dates li.inactive {
    color: #aaa;
}
 
.cal1-dates li.active {
    color: #fff;
}
 
.cal1-dates li::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
 
.cal1-dates li.active::before {
    background: #6332c5;
}
 
.cal1-dates li:not(.active):hover::before {
    background: #e4e1e1;
}

.intbox {border-radius: 25px; background: #FFF; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08); padding: 20px; width: 213px; height: 124px; text-align: center;}


.orangedaysbox {border-radius: 14.51px; background: linear-gradient(89deg, rgba(255, 92, 0, 0.70) 0.96%, rgba(255, 184, 0, 0.70) 113.64%);
    box-shadow: 1px 7px 17px 0px rgba(212, 118, 2, 0.36); padding: 10px 16px; justify-content: center; align-items: center; color: #fff; white-space: nowrap; }

.orangedaysbox a {color: white;}
.orangedaysbox:hover{background-color: white; }
.orangedaysbox a:hover  {text-decoration: none;}

#menu-panel {
    position: absolute;
    margin-top: 100px;
    top: 100px;
    width: 100%;
    left: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: height 0.5s ease-in, opacity 0.5s ease-in;
    background-color: white;
    border: 1px solid black;
    padding: 10px;
    
  }
  

  #myMenuLink:hover + #menu-panel {
    height: 200px;
    visibility: visible;
    background-color: white;
    opacity: 1;
    z-index: 100;
  }
  
  
  /* This styles the <ul> with a class of "menu" */
  .menu-m1 {
    display: flex; /* This will arrange your <li> elements in a row horizontally */
    list-style: none; /* This removes the default list bullets */
    padding: 10px; /* This removes the default padding */
    margin: 0; /* This removes the default margin */
    justify-content: flex-end;
  }
  
  .menu-item {
    cursor: pointer; /* Changes the cursor to signify clickable items */
    padding-right: 10px; /* Adds some space around the items */
    /* Add other styling as needed */
  }
  
  .menu-item.active {
    border-bottom: 2px solid currentColor; /* Underline thickness and color */
    padding-bottom: 5px; /* Space between text and underline */
}

.menu-item a:hover {
    border-bottom: 2px solid currentColor; /* Underline thickness and color */
    padding-bottom: 5px; /* Space between text and underline */
    text-decoration: none;
}


  /* Optional: if you want to add spacing between your items */
  .menu-m1 li:not(:last-child) {
    margin-right: 20px; /* Adjust the spacing to your preference */
  }
  
  .expand-panel-menu {
      display: none;
      width: 100%;
      height: 220px;
      margin-top: -10px;
      border: 0.5px solid #EEE;
      box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.14);
      padding: 25px;
      cursor: pointer;
      transition: height 0.3s ease-in-out; /* Add smooth transition */
      position: absolute;
  }
  
  .expand-panel-menu.expanded {
      height: 350px;
      background-color: #ffffff;
      animation: slide-bottom 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      z-index: 1000;
      
  }
  
  @keyframes bounceAnimation {
      0%, 100% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-20px);
      }
  }
  

  .menuPanelContainer {
    position: relative;
    /* Other styling */
  }
  
.menuPanelLineHeight {line-height: 40px; }
.resourcesIntegrations {margin-left: 10px;} 

@media (max-width:1195px){
    .resourcesIntegrations {margin-left: 0px; }
    .menuPanelLineHeight {line-height: 34px;}
    .expand-panel-menu {margin-top: 0px;}
    .menu-item {padding-right: 5px; font-size: 12px;}
    .weworkbar {padding-left: 30px;}
    .po-ml50 {margin-top: -50px; margin-left: 100px;}
    .po-ml100 {padding-left: 200px;} 
    
}

.headerbuttonOrange {color: white; background-color: #E56125; padding: 4px 6px 4px 6px; border-radius: 4px; font-size: 12px; border: solid 1px #E56125;}
.headerbuttonOrange:hover {color: #E56125; background-color: #fff;; padding: 4px 6px 4px 6px; border-radius: 4px; font-size: 12px; border: solid 1px #E56125;}

.headerbuttonBlue {color: white; background-color: #2A68ec; padding: 4px 6px 4px 6px; border-radius: 4px; font-size: 12px; border: solid 1px #2a68ec;}
.headerbuttonBlue:hover {color: #2a68ec; background-color: #fff;; padding: 4px 6px 4px 6px; border-radius: 4px; font-size: 12px; border: solid 1px #2a68ec;}

.headerbuttonOgWhite {color: #E56125; background-color: #fff;; padding: 4px 6px 4px 6px; border-radius: 4px; font-size: 12px; border: solid 1px #E56125;}
.headerbuttonOgWhite:hover {color: #fff; background-color: #E56125; padding: 4px 6px 4px 6px; border-radius: 4px; font-size: 12px; border: solid 1px #E56125;}

.headerbuttonOgBlue {color: #2a68ec; background-color: #fff;; padding: 4px 6px 4px 6px; border-radius: 4px; font-size: 12px; border: solid 1px #2a68ec;}
.headerbuttonOgBlue:hover {color: #fff; background-color: #2a68ec; padding: 4px 6px 4px 6px; border-radius: 4px; font-size: 12px; border: solid 1px #2a68ec;}

.sticky-menu {
    position: sticky;
    top: 0;
    z-index: 1000; /* High z-index to ensure the menu stays on top of other content */
    background-color: white; /* or any color that matches your design */
    margin-top: -120px;
    height: 140px;
    min-height: 140px;
}

.header-menu-item {
    position: relative;
    display: inline-block;
}
.header-main {
  min-height: 140px;
}
.header.menu-item i {
    display: block;
}

.header-menu-item .menu-hover-text {
    display: none;
    position: absolute;
    background-color: #fff;
    padding: 2px 6px;
    margin-right: 70px;
    color: #E27A00;
    transform: translate(-50%, -50%);
    margin-top: -2px
}

.header-menu-item:hover i {display: none;}
.header-menu-item:hover .menu-hover-text {display: block;}

/* Apply styles for Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .header-menu-item .hover-text {
        margin-top: 20px; /* Adjust as needed for Safari */
    }
}

/* Apply styles for Apple devices */
@media screen and (max-device-width: 1024px) {
    .header-menu-item .hover-text {
        margin-top: 20px; /* Adjust as needed for Apple devices */
    }
}


.menu-panel-icons {
    width: 75px;
    height: 75px;
    padding: 12px;
    text-align: center;
    border-radius: 14px;
    background: #FFF;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.10);
    display: flex;
    align-items: center; 
    justify-content: center; 
    transition: fill 0.3s; /* Add a transition for a smooth color change */
    fill: #2B68EC !important;
   }

.menu-panel-icons:hover{background-color: #DEE9FF;  } 
.menu-panel-icons svg:hover path {fill: #2B68EC !important;}

.menu-panel-text {font-size: 14px; margin-left: 10px;  }
.menu-panel-text p {font-size: 12px;  }

.blueit a {text-decoration: none;}
.blueit a:hover {color: #2B68EC; fill: #2B68EC;}
.blueit svg:hover path {fill: #2B68EC !important; stroke: #2B68EC;}

 @media screen and (max-width: 1150px) {
    .menu-panel-icons {margin-right: 20px;}
    .menu-panel-text {
        font-size: 12px;
        margin-left: 30px;}
    .menu-item {font-size: 12px;}    
   }

.menu-list {list-style-type: none;  padding-inline-start: 0px; line-height: 40px; padding-left:0px;  }
.menu-list li:hover{background-color: #DEE9FF; border-radius: 14px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.10);  margin-left: -20px; padding-left: 20px; white-space: nowrap;}
.menu-list a {text-decoration: none; display: block;}

.navbar {
    background-color: #333;
    width: 25%;
    height: 100vh;
    display: none;
  }
  
  .navbar ul {
    overflow: hidden;
    list-style-type: none;
    padding-top: 50%;
    margin: 0;
  }
  
  .navbar li {
    display: block;
    margin: 0;
    padding: 5% 50px;
    width: 100%;
  }
  
  .navbar li:hover {
    cursor: pointer;
  }
  
  
  .navbar li a {
    color: #4e4c4c;
    text-decoration: none;
    font-size: 1.6em;
    transition: all .5s;
  }
  
  .navbar li:hover {
    cursor: pointer;
    letter-spacing: 10px;
  }
  
  .hamburger {
    margin: 0;
    margin-left: 15px;
    padding: 0;
    float: left;
    transition: opacity .3s;
  }
  
  .hamburger:hover {
    cursor: pointer;
    opacity: .5;
  }
  
  .hamburger .line{
    width: 40px;
    height: 5px;
    margin: 8px auto;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
  }
  
  .hamburger .line:nth-child(1) {
    background-color: #2B68EC;
  }
  
  .hamburger .line:nth-child(2) {
    background-color: #2B68EC;
  }
  
  .hamburger .line:nth-child(3) {
    background-color: #2B68EC;
  }
  
  .hamburger.isactive .line:nth-child(2) {
    transform: translateY(0px) rotate(90deg);
  }
  
  .hamburger.isactive .line:nth-child(1) {
    transform: translateY(13px) translateX(-12px) rotate(90deg);
  }
  
  .hamburger.isactive .line:nth-child(3) {
    transform: translateY(-13px) translateX(12px) rotate(90deg);
  }
  
  .navbar {
    transition: all 2s ease-in-out;
  }
  
  .navbar.active {
    display: block;
    animation: fade .5s;
  }
  
  @keyframes fade {
    from{transform: translateX(-200px); opacity: 0;}
    to {transform: translateX(0px); opacity: 1;}
  }
  
  
  @media screen and (max-width: 1360px) {
    
      
    .navbar {
      width: 50%;
    }
    
    .navbar ul {
      padding-left: 0%;
    }
    
    .navbar li {
      padding: 3% 0;
    }
    
    .navbar li a {
      font-size: 1.2em;
    }
    
  }
  
  @media screen and (max-width: 968px) {
    .hamburger {
      float: right;
    }
    
    .navbar {
    background-color:  #fff;
    width: 100%;
    height: 75vh;
    display: none;
    overflow:scroll;
  }
  
  .navbar ul {
    overflow: hidden;
    list-style-type: none;
    padding-top: 3%;
    padding-left: 2%;
    padding-right: 3%;
    padding-bottom: 3%;
    margin: 0;
  }
  
  .navbar li {
    display: block;
    margin: 0;
    padding: 5px 20px;
    width: 100%;
    transition: background-color .5s;
  }
  
  .navbar li:hover {
    cursor: pointer;
     }
  
  
  .navbar li a {
    color: #4e4c4c;
    text-decoration: none;
    padding: 5px 16px;
    font-size: 12px;
    transition: all 1s;
  }
  
  .navbar li:hover {
    cursor: pointer;
    letter-spacing: 0px;
  }
  
    }

    .two-column-text {
      column-count: 1; /* Set the number of columns to 2 */
      column-gap: 10px; /* Adjust the gap between columns as needed */
      max-width: 900px;
  }

  @media screen and (max-width: 968px) {

    .two-column-text {column-count: 1;}
    
  }

  .h-container {
    float: right;
    position: relative;
    width: 60px;
    cursor: pointer;
  }
  
  .h-image {
    display: block;
    width: 20px;
    height: auto;
    margin-top: 2px;

  }
  
  .h-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 50%;
    opacity: 0;
    transition: .5s ease;
    background-color: #F17A20;
      }
  
  .h-container:hover .h-overlay {
    opacity: 1;
  }
  
@media screen and (max-width: 1190px) {
  .h-overlay {background-color: #E9702D;}
  
}
  
  .h-text {
    margin-top: 1px;
    color: white;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .intaccth1 {background: linear-gradient(262deg, #1D8400 -11.79%, #55D730 50.93%, #1D8400 107.39%);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
  .intacctList {padding-inline-start: 0px;}  
  .intacctList li {padding-top: 20px; padding-bottom: 20px; list-style-type: none; text-align: center; }
  .arrowList {padding-inline-start: 0px;}  
  .arrowList li {list-style-type: none; text-align: center; }
  
  #contactForm {
    max-width: 550px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-right: solid 1px #aaa;
    padding-right: 50px;
}

.form-field {
    margin-bottom: 20px;
}




.inactive-div {
  color: grey;
  opacity: 0.7;
  pointer-events: none;
  text-decoration: none;
}

.form-inactive-link {
  color: grey;
  pointer-events: none;
}

.form-active-link {
  color: blue;
  pointer-events: auto; /* Corrected from 'visible' to 'auto' */
  cursor: pointer;
}

/* Optional: If you want the cursor to change on hover for inactive links */
.form-inactive-link:hover {
  cursor: not-allowed; /* Or 'default' if you don't want it to change */
}

.bluegrad {background: linear-gradient(90deg, #0038AD 2.25%, #2A68EC 99.91%);}
.cv-form {background: #fff; border-radius: 15px; border-radius: 15px; box-shadow: 0px 4px 16.8px 0px rgba(0, 0, 0, 0.11); min-width: 650px; min-height: 300px;}

.form1 {background: #fff; border-radius: 15px; border-radius: 15px; box-shadow: 0px 4px 16.8px 0px rgba(0, 0, 0, 0.11); min-width: 650px; min-height: 300px; margin-left: 50px; margin-top: 100px;}
.form-boxes {width: 310px; height: 220px; border-radius: 25px; background: #fff; padding: 10px;}


@media only screen and (min-width: 769px) and (max-width: 1190px) {
  .form1 {margin-left: -15px; margin-top: 100px; margin-bottom: 50px; min-width: 550px; }
  .bg-form1 {height: 140%; background-attachment: fixed;}
  .bg-form2 {height: 140%;}

}

@media only screen and (min-width: 1191px) and (max-width: 1766px) {
  .hidesmall {display: none; white-space: none;}


}


@media only screen and (min-width:768px) and (max-width: 993px) {
  .noshow {display: none;}
  .expand-panel-menu.expanded {height: 550px;}
}

.stack {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/sector-box.svg'); height:100px; background-repeat: no-repeat;
font-size: 16px; font-weight: 500; color: #001D67; margin-top: -90px; width: 100%; padding: 40px 40px 20px 0px; }

.largestack {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/sector-rect-big.svg'); width: 100%; height:450px; background-repeat: no-repeat; background-size: contain; }
.sector-accord-header {padding-left: 70px;}


.youtube {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container {border-radius: 22px; background: #FFF; box-shadow: 0px 2.214px 15.499px 0px rgba(66, 66, 66, 0.25);}

.video-strap {border-radius: 18.108px;
  border: 0.412px solid #FFF;
  background: #FFF;
  box-shadow: 1.646px 0px 17.532px 0px rgba(0, 0, 0, 0.03), -17.285px 10.7px 5.762px 0px rgba(0, 0, 0, 0.00), -10.7px 7.408px 4.938px 0px rgba(0, 0, 0, 0.01), -5.762px 4.115px 4.115px 0px rgba(0, 0, 0, 0.03), -2.469px 1.646px 3.292px 0px rgba(0, 0, 0, 0.04), -0.823px 0.823px 1.646px 0px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(19.506982803344727px); width: 95%; padding: 8px; 
  margin-top: 20px;
}

  .video-wrapper {
  overflow: hidden; /* Ensures the content doesn't flow outside the boundary */
  border-radius: 15px; /* Adjusts the roundness of the corners */
}

.approvals-video-container {
  width: 450px;
  border-radius: 22px; 
  background: #FFF; 
  box-shadow: 0px 2.214px 15.499px 0px rgba(66, 66, 66, 0.25);
  padding: 20px;
}

.approvals-video-wrapper {
  height: 263px;
  overflow: hidden; /* Ensures the content doesn't flow outside the boundary */
  background: #FFF; box-shadow: 0px 2.214px 15.499px 0px rgba(66, 66, 66, 0.25);
}

.hp-video-wrapper {
  overflow: hidden; /* Ensures the content doesn't flow outside the boundary */
  border-radius: 15px; /* Adjusts the roundness of the corners */
  height: 460px;
}

.embed-responsive .video {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}


.calendar-container {
  background: #fff;
  width: 400px;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.calendar-container header {
  display: flex;
  align-items: center;
  padding: 25px 30px 10px;
  justify-content: space-between;
}

header .calendar-navigation {
  display: flex;
}

header .calendar-navigation span {
  height: 38px;
  width: 38px;
  margin: 0 1px;
  cursor: pointer;
  text-align: center;
  line-height: 38px;
  border-radius: 50%;
  user-select: none;
  color: #aeabab;
  font-size: 1.9rem;
}

.calendar-navigation span:last-child {
  margin-right: -10px;
}

header .calendar-navigation span:hover {
  background: #f2f2f2;
}

header .calendar-current-date {
  font-weight: 500;
  font-size: 1.45rem;
}

.calendar-body {
  padding: 15px;
}

.calendar-body ul {
  list-style: none;
  flex-wrap: wrap;
  display: flex;
  text-align: center;
}

.calendar-body .calendar-dates {
  margin-bottom: 20px;
}

.calendar-body li {
  width: calc(100% / 7);
  font-size: 1.07rem;
  color: #414141;
}

.calendar-body .calendar-weekdays li {
  cursor: default;
  font-weight: 500;
}

.calendar-body .calendar-dates li {
  margin-top: 30px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.calendar-dates li.inactive {
  color: #aaa;
}

.calendar-dates li.active {
  color: #fff;
}

.calendar-dates li::before {
  position: absolute;
  content: "";
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.calendar-dates li.active::before {
  background: #6332c5;
}

.calendar-dates li:not(.active):hover::before {
  background: #e4e1e1;
}

.hm_logo .logo_slider{padding: 50px 0;}
.hm_logo .slide{text-align: center;height: 60px;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: flex;align-items: center;display: flex; -webkit-align-items: center; -moz-align-items: center; align-items: center;-ms-align-items: center; align-items: center;-webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center;}
.hm_logo .slide img{margin: 0 auto;max-height: 60px;-webkit-filter: grayscale(100%);filter: grayscale(100%); opacity: .8; -webkit-transition: all .3s; -o-transition: all .3s; -moz-transition: all .3s; transition: all .3s;}
.hm_logo .slide img:hover{-webkit-filter: grayscale(0);filter: grayscale(0);opacity: 1;}
.hm_logo .slide{text-align: left;-webkit-justify-content: flex-start;-moz-justify-content: flex-start;-ms-justify-content: flex-start;justify-content: flex-start;}
.hm_logo .slide img{margin: 0;}
.logo-color.hm_logo .slide img {-webkit-filter: none;filter: none;}
  
.testimonials-slide{text-align: center;}
.testimonial-sign{padding: 20px 0;}
/* .testimonial-sign img{max-height: 70px;} */


.contactusbox {border: solid 1px #E4E4E4;  border-radius: 8px; width: 85%; height: 100px; cursor: pointer;}
.contactusbox img {padding-left: 20px; width: 90%;}
.contactusbox h4 {font-size: 16px; margin-left: -20px; margin-right: 20px; cursor:default;}
.contactusbox p  {font-size: 12px; min-height: 40px; }
.contactusbox .sim-button {line-height: 15px;}

/*-- contact page --*/
.inner-banner-white{
  background-color: #ffffff;
  padding: 120px 0 20px;
}
.inner-banner-white .contact-header-content {
  padding-top: 60px;
}
.inner-banner-white .contact-header-content h4 {
  font-size: 34px;
  margin-bottom: 30px;
  font-weight: 700;
}
.inner-banner-white .contact-header-img {
  position: relative;
  max-width: 450px;
  float: right;
  width: 100%;
  margin-bottom: -200px;
}

.inner-banner-white .brochure-header-img {
  position: relative;
  max-width: 650px;
  float: right;
  width: 100%;
  margin-bottom: -200px;
}


.inner-banner-white .contact-header-img > img {
  max-height: 500px;
}
.inner-banner-white .contact-header-img .chat-box {
  position: absolute;
  top: -55px;
  right: 20px;
  -webkit-animation: moveLeftBounce 5s linear infinite;
  animation: moveLeftBounce 5s linear infinite;
}
.inner-banner-white .contact-header-img .chat-box img {
  max-width: 200px;
}
.inner-banner-white .contact-header-img .mail-box {
  position: absolute;
  top: 80px;
  left: 20px;
}
.inner-banner-white .contact-header-img .mail-box img {
  height: 20px;
  -webkit-animation: rotate-scale-down 6s linear infinite both;
  animation: rotate-scale-down 6s linear infinite both;
}

.zahara-contact-main {
  padding-top: 40px;
  padding-bottom: 50px;
}

.zahara-contact-main .contact-form-text {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.zahara-contact-main .contact-form-text p {
  color: #585858;
  line-height: 20px;
}

.zahara-contact-main .contact-form {
  margin-top: 100px;
}

.zahara-brochure-main .contact-form {
  margin-top: 20px;
}

.zahara-contact-main .contact-form form .form-group.form-email {
  position: relative;
  margin-bottom: 0;
  padding: 15px;
  border-radius: 4px;
  -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
  box-shadow: 0px 0px 25px rgba(0, 0, 0, .2);
  background: #fff;
}
.zahara-contact-main .contact-form form .form-group.form-email .input-container {
  position: relative;
}
.zahara-contact-main .contact-form form .form-group.form-email .input-container .form-control {
  background: #fff;
  border: transparent;
  padding: 0;
  font-size: 19px;
  line-height: 30px;
  color: #908989;
}
.zahara-contact-main .contact-form form .form-group.form-email .input-container .form-control:focus {
  background: #ffffff;
  border: transparent;
  box-shadow: none;
}
.pty25 {
  padding-top: 22px;
}
.checkbox {position: relative; }
.checkbox input[type="checkbox"] {position: absolute;visibility: hidden;/* width: 60px;height: 60px; */z-index: 2; float: left;}
.checkbox label {position: relative;display: inline-block;width: 45px;height: 45px;background: #ffffff;border: 5px solid #242424;cursor: pointer;transition: all 0.3s ease-out;float: left;margin: 10px 8px 0 0px;}
.checkbox input[type="checkbox"]:checked + span {/*border: 10px solid #3d9970;*/animation: confirm 0.15s linear;}
.checkbox input[type="checkbox"]:checked + span:after {content: '\f00c'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 23px; line-height: 35px; width: 45px; height: 45px; background: #2ECC40; position: absolute;  top: -5px;  left: -5px; color: #ffffff;  margin-left: 0; padding-left: 6px; border: 5px solid #3d9970;  animation: confirm 0.15s linear;}
.checkbox .custom-list-item-label {font-size: 0px;}
.checkbox .custom-form-control {float: left;}
@keyframes confirm {
0% {
  transform: scale(1);
}
50% {
  transform: scale(0.95);
}
75% {
  transform: scale(0.8);
}
100% {
  transform: scale(1);
}
}
.zahara-contact-main .contact-form form .info_submit {
  margin: auto;
  margin-top: 40px;
  width: 100%;
}
.zahara-contact-main .contact-form form .info_submit .submit-btn {padding: 12px 30px;background: #1e8900;border-radius: 50px;color: #ffffff;font-size: 20px;padding-right: 50px;position: relative;}
.zahara-contact-main .contact-form form .info_submit .disable_btn_alert {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; margin: 0 auto;}
.zahara-contact-main .contact-form form .info_submit .submit-btn[disabled]{background-color:#1e8900; border-color:#1e8900;}
.zahara-contact-main .contact-form form .info_submit{position: relative;}
.zahara-contact-main .contact-form form .info_submit .submit-btn:not([disabled]) ~ div{display: none;}
.zahara-contact-main .contact-form form .info_submit .submit-btn:disabled {	cursor: not-allowed;}
.zahara-contact-main .contact-form form .info_submit .submit-btn::before {
  content: "\f061";
  font-family: 'Line Awesome Free';
  font-weight: 900;
  position: absolute;
}
.zahara-contact-main .contact-form form .info_submit .submit-outer {
  display: inline-block;
  position: relative;
}

.zahara-contact-main .contact-form form .info_submit .submit-outer .contact-icon {
  display: inline-block;
  color: #ffffff;
  position: absolute;
  right: 24px;
  top: 20px;
  cursor: pointer;
}
/*select box icon*/
[include*="form-input-select()"]::before, [include*="form-input-select()"]::after {
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
[include*="form-input-select()"] select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 1px solid transparent;
  font-size: 16px;
  outline: none;
 }
[include*="form-input-select()"] select:focus {
  background-color: transparent;
  outline: none;
}
[include*="form-input-select()"] option {
  font-weight: normal;
}
[include*="form-input-select()"] x:-o-prefocus, [include*="form-input-select()"]::after {
  display: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  [include*="form-input-select()"] select::-ms-expand {
    display: none;
  }
  [include*="form-input-select()"] select:focus::-ms-value {
    background: transparent;
    color: #777777;
  }
}
@-moz-document url-prefix() {
  [include*="form-input-select()"] {
    overflow: hidden;
  }
  [include*="form-input-select()"] select {
    width: 120%;
    width: calc(100% + 3em);
    /* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
  }
  @supports (-moz-appearance: none) {
    [include*="form-input-select()"] select {
      width: 100%;
    }
  }
  [include*="form-input-select()"] select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
}
@supports (-moz-appearance: none) {
  [include*="form-input-select()"] {
    width: 100%;
  }
}
[include*="form-input-select()"]::before, [include*="form-input-select()"]::after {
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
  border: 1px solid transparent;
  width: 0;
  height: 0;
  right: 16px;
}
[include*="form-input-select()"]::before {
  bottom: 55%;
  border-width: 0 6.5px 8px 6.5px;
  border-bottom-color: #777777;
}
[include*="form-input-select()"]::after {
  border-width: 8px 6.5px 0 6.5px;
  border-top-color: #777777;
  top: 55%;
}
@-moz-document url-prefix() {
  [include*="form-input-select()"] {
    border-right: 3px solid #E6E6E6;
  }
}
[include*="form-input-select()"] select {
  border: 3px solid #777777;
  border-radius: 0;
  font-weight: 400;
  color: inherit;
  padding: 11px 15px;
  line-height: normal;
  -webkit-transition: border-color 0.2s ease, outline 0.2s ease;
  transition: border-color 0.2s ease, outline 0.2s ease;
}
[include*="form-input-select()"] select[disabled], [include*="form-input-select()"] select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/*------Blog Stff--------*/
@media (max-width:640px){
	.blog_container{display:block; width:100%;}
	.blog_post > .media .media-body.blog_container{padding-top:20px; padding-left:0}
	.media-left.left_pad img{max-width:100%;}
	 .media_review .media-body{display:block;}
}

/*2. Structure*/.bg-image{background-size:cover;background-position:center}
/*	3. Header- Header image */.header-image{max-height:350px}.has-featured-image .header-image{max-height:none}.header-image img{margin:0 auto;max-height:100%;width:auto;visibility:hidden}
/*5.Blog*/.content{width:68.7%;float:left;margin-top:-120px}.post{display:block;background:#fff;border:1px solid #ddd;position:relative}.infinite-wrap .post:first-child,.post+.post{margin-top:60px}
/* Post Image*/.post-image,.post-image img{display:block}.post-image img{height:auto;max-width:100%}
/* Post Inner */.post-inner{width:629px;max-width:85%;padding:32px 0;margin:0 auto}
/* Post Header*/.post-header+.post-content{margin-top:6px}.post-title{font-family:Montserrat,'Open Sans',sans-serif;font-size:30px;line-height:38px;font-weight:700}.post-title a{color:#767676}.post-title a:hover{color:#4e4c4c;text-decoration:underline}h1.page-title span.vcard{font-size:30px}
/* Post Meta */.post-meta{margin-top:20px;border-top:1px solid #ddd;padding-top:20px}.post-meta p{display:inline-block;font-family:'Open Sans',Helvetica,sans-serif;font-size:.75em;line-height:200%;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:#666}.post-meta p+p:before{content:"/";margin:0 15px 0 11px;color:#4e4c4c}.post-meta a{color:#2774b8;padding-bottom:1px;border-bottom:1px solid #ddd}.post-meta a:hover{border-bottom-color:#2774b8;text-decoration:none}
/*	6. Single Post /* Post Navigation */.post-navigation{border:1px solid #ddd;border-top:none;position:relative}.post-navigation-inner{width:629px;max-width:85%;padding:30px 0;margin:0 auto}.post-navigation:before{content:"";display:block;width:1px;height:100%;background:#ddd;position:absolute;left:50%}.post-navigation-inner:after{clear:both;display:table;content:" "}.post-nav-next,.post-nav-prev{display:block;float:left;width:45%}.post-navigation p{display:inline-block;padding-bottom:2px;border-bottom:2px solid #ccc;margin-bottom:8px;font-family:Montserrat,'Open Sans',sans-serif;font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:#999}.post-navigation h4{display:block;font-size:16px;line-height:130%;font-weight:400}.post-navigation h4 a{color:#4e4c4c}.post-navigation h4 a:hover{color:#69c}.post-nav-next{float:right}.post-nav-next,.post-nav-next h4{text-align:right}
/*	7. Post Content*/.post-content,.post-content p{font-size:16px}.post-content a:hover{text-decoration:underline}.post-content address,.post-content blockquote,.post-content dl,.post-content ol,.post-content p,.post-content pre,.post-content ul{line-height:170%;margin-bottom:1.5em}.post-content :last-child{margin-bottom:0}.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{font-size:24px;margin:20px 0 25px;line-height:36px;font-weight:500}.post-content h1{font-size:30px; font-weight:700;}.post-content h2{font-size:24}.post-content h3{font-size:1.5em}.post-content h4{font-size:1.25em}.post-content h5{font-size:1.1em}.post-content h6{font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:1px}.post-content h1+h1,.post-content h1+h2,.post-content h1+h3,.post-content h1+h4,.post-content h1+h5,.post-content h1+h6,.post-content h2+h1,.post-content h2+h2,.post-content h2+h3,.post-content h2+h4,.post-content h2+h5,.post-content h2+h6,.post-content h3+h1,.post-content h3+h2,.post-content h3+h3,.post-content h3+h4,.post-content h3+h5,.post-content h3+h6,.post-content h4+h1,.post-content h4+h2,.post-content h4+h3,.post-content h4+h4,.post-content h4+h5,.post-content h4+h6,.post-content h5+h1,.post-content h5+h2,.post-content h5+h3,.post-content h5+h4,.post-content h5+h5,.post-content h5+h6,.post-content h6+h1,.post-content h6+h2,.post-content h6+h3,.post-content h6+h4,.post-content h6+h5,.post-content h6+h6{margin-top:25px}
/*	11. Pagination/* Page Title/* Archive Navigation */.archive-navigation{margin-top:60px}.archive-navigation a,.archive-navigation p{display:inline;font-size:.9em;font-weight:700;text-transform:uppercase;letter-spacing:1px}.archive-navigation p+p:before{content:"/";display:inline;margin:0 20px;color:#aaa}.archive-navigation,.archive-navigation a{color:#4e4c4c}.archive-navigation a:hover{color:#2774b8}.archive-navigation a+a{margin-left:15px}
/*	12. Sidebar*/.widget_search .search-field{display:block;width:100%;padding:20px 60px 20px 20px;margin:0;background:#fff;border:1px solid #ddd;border-radius:0;font-size:16px;color:#767676}.widget_search .searchBox{padding-top:0;padding-bottom:0}.widget+.widget{padding-top:40px;border-top:1px solid #ddd;margin-top:40px}.widget-title{display:inline-block;padding-bottom:3px;border-bottom:2px solid #2774b8;margin-bottom:20px;font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:1px}.widget_search .search-submit{display:block;height:100%;width:60px;background:0 0;border-left:1px solid #ddd;text-align:center;position:absolute;top:0;right:0;padding:0;color:#4e4c4c}.widget_search .search-submit .fas{font-size:24px}.widget_search .search-submit:hover{cursor:pointer}.widget_search .search-submit:hover .fas{color:#2774b8}
/* Widget Content*/.widget-content{font-family:Lato,Helvetica,sans-serif;font-size:.95em}.widget-content .textwidget a:hover{text-decoration:underline}.widget-content p{line-height:150%;margin-top:1em}.widget-content p:first-child{margin-top:0}.widget-content li{line-height:140%;padding:12px 0;border-bottom:1px solid #ddd}.widget-content ul ul{margin-left:1em}.widget-content ul ul li:first-child{margin-top:.5em;border-top:1px solid #ddd}.widget-content>ul>li:first-child{padding-top:0}.widget-content li:last-child{padding-bottom:0;border-bottom:none}
/* Lovecraft Widget List */.zahara-widget-list{list-style:none;padding:0;margin:0}.zahara-widget-list li{line-height:140%;padding:12px 0;border-bottom:1px solid #ddd}.zahara-widget-list a{display:block;min-height:55px;position:relative}.zahara-widget-list .post-icon{display:block;width:55px;height:55px;padding:2px;background:#fff;border:1px solid #eee;border-radius:99px;position:absolute;top:0;left:0}.zahara-widget-list .post-icon img{display:block;border-radius:99px}.zahara-widget-list .post-icon .genericon{position:absolute;top:50%;margin-top:-8px;left:50%;margin-left:-8px}.zahara-widget-list .inner{padding-left:65px}.zahara-widget-list .title{line-height:140%;font-weight:700;color:#4e4c4c}.zahara-widget-list .meta{margin-top:3px;font-size:.75em;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#2774b8}
/*	15. Media Queries*/@media (min-height:800px){.header-image{max-height:400px}}

.content{width:68.7%;float:left;margin-top:-120px}
.post{display:block;background:#fff;border:1px solid #ddd;position:relative}
.infinite-wrap .post:first-child,.post+.post{margin-top:60px}
.zahara-widget-list{list-style:none;padding:0;margin:0}
.zahara-widget-list li{line-height:140%;padding:12px 0;border-bottom:1px solid #ddd}.zahara-widget-list a{display:block;min-height:55px;position:relative}
.zahara-widget-list .post-icon{display:block;width:55px;height:55px;padding:2px;background:#fff;border:1px solid #eee;border-radius:99px;position:absolute;top:0;left:0}
.zahara-widget-list .post-icon img{display:block;border-radius:99px}.zahara-widget-list .post-icon .genericon{position:absolute;top:50%;margin-top:-8px;left:50%;margin-left:-8px}
.zahara-widget-list .inner{padding-left:65px}.zahara-widget-list .title{line-height:140%;font-weight:700;color:#4e4c4c}
.zahara-widget-list .meta{margin-top:3px;font-size:.75em;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#2774b8}
.sim-button {padding: 7px 10px 7px 10px!important; border-radius: 10px; background-color:  #2B68EC; font-weight: 200; color: white!important; border:none; }
.sim-button a {color: white!important;}
.sim-button:hover{background-color: white; border: solid 1px #1545c1; color: #1545c1!important; text-decoration: none; }

.probox {
  margin: 10px;
  height: 44px;
  background: #fff!important;
  border: 0 none rgb(255, 255, 255);
  border-radius: 0;
  box-shadow: none;
}


.ipaddotted {margin-left: 200px; position: absolute; margin-top: -130px; width: 1050px;}
.dottedmargin {margin-top: 225px;}
.dottedlower {margin-left: 220px; margin-top: 10px; width: 350px;}

@media (max-width:119px) {
	
  .hidetab {display: none;}
  .leftmenutop {margin-top: 129px;}
  .ipaddotted {margin-left: 200px; position: absolute; margin-top: -200px; width: 750px;}
  .dottedmargin {margin-top: 100px;}
  .dottedlower {margin-left: 220px; margin-top: 10px; width: 270px;}

  
}

.customer-logo-outer {
  margin-bottom: 40px;


}
.customer-logo-outer .customer-logo-box {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 40px;
  border-radius: 5px;
  text-align: center;
}
.customer-logo-outer .customer-logo-box img {
  max-width: 220px;
  min-height: 100px;
  object-fit: contain;
}

.customer-short-text {min-height: 215px;}

.customer-logo-outer .customer-short-text .read-more-btn {
    margin-top: 30px;
  }

  .hm-testimonials-slider{margin-top: 0px; margin-bottom: 0px;}
  .testimonials-slide{text-align: center;}
  .testimonial-content{color: #737373;font-size: 24px !important;line-height: 30px !important;position: relative;max-width: 800px;margin: auto;padding-top: 20px;}
  .testimonial-content p{font-size:24px !important; line-height:30px !important;}
  .testimonial-content i{color: #e2e2e2;-webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2);position: absolute;z-index: -1;}
  .testimonial-content i.fa-quote-left{left: 12px;top: 10px;}
  .testimonial-content i.fa-quote-right{right: 12px;bottom: -15px;}
  .testimonial-destination{color: #878787;}
  .testimonial-sign{padding: 20px 0;}
  .customer-review .testimonial-content i {
    color: #346f8f;
  }
  /* .testimonial-sign img{max-height: 70px;} */
  .youtube {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }


  /*-- team page --*/
  .team-outer {
    display: block;
    overflow: hidden;
    position: relative;
    margin-bottom:30px;
	transition: all 0.3s ease-in-out;
	
  }
  .team-outer .member-img {
    position: relative;
    overflow: hidden;
	border-radius: 10px;  
  }
  .team-outer .member-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
	 border-radius: 10px; 
  }
  .team-outer .member-detail {
    padding: 10px;
    padding-bottom:0px;
	  }
  .team-outer .member-detail h4 {
    font-size: 24px;
    color: #14577c;
    font-weight: 600;
  }
  .team-outer .member-detail p {
    font-size: 14px;
    color: #585858;
    line-height: 22px;
    margin-bottom: 0px;
	transition: all 0.3s ease-in-out;  
  }
  .team-outer:hover .member-img img {
	border-radius: 20px;  
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
	
	
  }
  .our-team-info .tab-content {
    margin-bottom: 30px;
  }
  .our-team-info .tab-content>.tab-pane {
    margin-left: 15px;
    margin-right: 15px;
    border-bottom: 1px solid #585858;
  }
  .our-team-info .nav-pills {
    margin-bottom: 0px !important;
  }
  .our-team-info {padding-top: 60px; padding-bottom: 60px;}
  .our-team-info .nav-pills .nav-link {
    padding: 0px;
  }
  
  .our-team-info .nav-pills li.nav-item {
    margin-bottom: 0px;
  }
  
  .our-team-info .nav-pills .nav-link .team-outer:hover .member-img img, .our-team-info .nav-pills .nav-link.active .team-outer .member-img img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-filter: grayscale(0);
    filter: grayscale(0);

  }
  
  .our-team-info .nav-pills .nav-link.active {
    background-color: transparent;
  }
  .our-team-info .info-outer{border-bottom: 1px solid #737373; margin-bottom: 30px;}
  .our-team-info .info-outer .about-team-outer {
    padding: 10px 10px;
  }
  
  .our-team-info .info-outer .about-team-outer .team-details p {
    font-size: 16px;
    line-height: normal;
    color: #242424;
  }
  .flexcolumn {
    display: flex;
    flex-direction: column;
  }
  .aligncenter{
    align-self: center;
  }
 .post-content a {color: #2A68EC; font-weight: 600;}


 /*=================popular-sec css=================*/
.popular-sec{padding:40px 0;}
.popular-sec .inner-sec{padding: 25px; background: linear-gradient(90deg, #0038AD 2.25%, #2A68EC 99.91%);}
.inner-sec .heading h3{font-size:30px;line-height:32px;color: #ffffff;font-weight: 600;font-family: Poppins;padding-bottom:15px;}
.popular-sec .inner-sec .single-sec{margin-top:15px;}
.popular-sec .inner-sec .single-sec a{display: block;margin-top: 6px;font-weight: 500;color: #fff;transition: all 0.3s ease-in-out;display: flex;}
.popular-sec .inner-sec .single-sec a i{padding-right:10px;}
.popular-sec .inner-sec .single-sec a:hover{padding-left:12px;font-weight:600;}



/*=================category sec css=================*/
.category-sec{padding:40px 0;}
.categories-two{padding-bottom:120px;}
.category-sec .heading h3{color:#333;}
.category-sec .list-sec{display:flex;flex-direction:column;}
.category-sec .title{display:flex;position:relative;z-index:1;padding:65px 0;}
.category-sec .title .shape{position: absolute;z-index: -1;top: 50%;left: 0;transform: translateY(-50%);}
.category-sec .title .shape img{width:320px;}
.category-sec .title .icon img{width:40px;object-fit:contain;}
.category-sec .title .title-content{padding-left:15px;}
.category-sec .title .title-content h4{font-size: 28px;line-height: 35px;color: #1e8900;font-weight: 600;font-family: Poppins;}
.category-sec .title .title-content p{font-size:18px;color: #585858;font-weight: 400;font-family: Poppins;}
.inner-sec .single-list{margin-bottom:20px;}
.inner-sec .single-list a{display: block;margin-top: 20px;font-weight: 500;color: #333;transition: all 0.3s ease-in-out;display: flex;}
.inner-sec .single-list a:first-child{margin-top:0;}
.inner-sec .single-list a i{color:#1e8900;padding-right:10px;}
.inner-sec .single-list a:hover{padding-left:12px;font-weight:600;color:#1e8900;}
.common-btn{margin-top:auto;}
.category-sec .button-one{width:160px;}

/*=================none home page header =================*/
.menubar {background: linear-gradient(90deg, #9A01A1 0%, #FF8C05 100%); margin-top: -10px; height: 25px;}
.logo-header{background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/headerlogo.svg'); width:99%; height:51px; padding-right: 25px; background-repeat: no-repeat;background-size: contain;  }
 
.caret path {
  fill: #4d4d4d; /* Change to any color you prefer */
}

@media only screen and (min-width: 990px) and (max-width: 1197px) {
  .logo-header{margin-top: 20px;}
  }

@media only screen and (max-width: 700px) {
  .pillar-hero {
    max-height: 300px;
    width: auto;
  }
}.freetemplate H4 {font-size: 18px; font-weight: 500; margin-top: 50px;}
.freetemplate img {margin-top: 50px;}
.freetemplate P{line-height: 26px;}
.freetemplate .pophrase	{font-size: 40px; font-weight: 600; line-height: 50px;}
a.word {background-color: #2a68ec; color: #fff; padding: 7px 10px 7px 10px; border-radius: 4px; border: solid 1px #2a68ec;}
a.word:hover {text-decoration: none; background-color: #fff; border: solid 1px #2a68ec; color: #2a68ec;}
a.excel {background-color: #1A7800; color: #fff; padding: 7px 10px 7px 10px; border-radius: 4px; margin-left: 30px; border: solid 1px #1A7800;}
a.excel:hover {text-decoration: none; background-color: #fff; border: solid 1px #1A7800; color: #1A7800; border: solid 1px #1A7800;}

@media only screen and (max-width: 700px) {
    
    .about-page-title h1{
    font-size: 40px;
    line-height: 40px;
  }
    .about-page-title {
      display: flex;
      width: 120px;
      align-items: flex-start;
    }
}
@media only screen and (min-width: 701px) {
    .about-page-title h1{
      font-size: 80px;
      line-height: 80px;
    }
    .about-page-title {
      display: flex;
      width: 317px;
      align-items: flex-start;
    }
}
.about-team-photo{
  width: 350px;
  margin: 0 auto;
  display: flex;
}



@media only screen and (max-width: 700px) {
  .middle-column {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
  }
  .middle-column::before {
    content: '';
    width: 2px;
    background-color: #dfdfdf;
    height: 100%;
  }
}

@media only screen and (min-width: 701px) {
  .middle-column {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
  }
  .middle-column::before {
    content: '';
    width: 2px;
    background-color: #dfdfdf;
    height: 100%;
  }
}
.video-container {
  margin: 10px;
  padding-top: 15px;
  max-width: 430px;
}
.video-row {
  margin-right: -40px;
  margin-left: -40px;
}




.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #aaa;
  border-radius: 13px;
  padding: 5px;
  background-color: transparent;
  margin-left: 13px;
}

.dataTables_length {width: 600px; margin-bottom: 30px; font-size: 16px; padding: 10px;}
.dataTables_paginate paging_simple_numbers {padding: 20px;}
.paginate_button  {padding-right: 20px; font-size: 16px; font-weight: 600; margin-top: 12px; cursor: pointer;}

.dataTables_paginate {margin-top: 20px;}
.dataTables_info {margin-top: 30px; color: grey;}

.metric_red {font-size: 18px; color: #fff; padding: 30px; border-radius: 4.563px;
  background: linear-gradient(109deg, #E30000 0%, #930000 101.26%); text-align: center; width: 90%; float: right;}

.metric_blue {font-size: 18px; color: #fff; padding: 30px; border-radius: 4.563px;
    background: linear-gradient(289deg, #002167 0%, #2A68EC 100%); text-align: center; width: 90%;}

.metric_orange {font-size: 18px; color: #fff; padding: 30px; border-radius: 4.563px;
  background: linear-gradient(108deg, #FB6900 1.19%, #C30303 100%); text-align: center; width: 90%; }

  .metric_green {font-size: 18px; color: #fff; padding: 30px; border-radius: 4.563px; 
    background: linear-gradient(289deg, #006104 0%, #39AB14 100%, #39AB14 100.01%);  text-align: center; width: 90%;}

  .filtersbg {background-color: rgb(249, 249, 249); border-radius: 8px; padding: 12px;}
   



.noborder {border-radius: 0px;}

  .active1 {
    background-color: rgb(255, 255, 255);
    color: #4d4d4d;
    padding: 5px 15px 5px 15px;
    border-radius: 15px;
  }
  
  .inactive {
    background-color: red;
    color: white;
    padding: 5px 15px 5px 15px;
    border-radius: 15px;  }
    
  .bg-wht {background-color: #fff; border: solid 1px #cfcfcf; border-radius: 10px; padding: 10px;}

  .select-container {
    position: relative;
    width: 250px;
  }

  .selectlist {
    /* ... (existing styles) */
    padding-right: 40px; /* Make room for the caret and the cross */
  }

  .select-container::before,
  .select-container::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* Caret (Down Arrow) */
  .select-container::before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #8B8B8B;
    right: 12px;
    z-index: 1;
  }

  /* Cross (X) */
  .select-container::after {
    content: "\2715"; /* Unicode for 'X' */
    font-size: 14px;
    right: 30px;
    z-index: 1;
    color: #8B8B8B;
  }

  .selectlist {
    display: block;
    width: 250px;
    padding: 7px;
    margin: 8px 0;
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    background-image: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none; /* for older versions of Safari */
    appearance: none;
    font-weight: 300;
    color: #626262;
  }

  .selectlist:focus {
    border: 1px solid #8B8B8B;
    outline: none;
    box-shadow: 0 2px 4px rgba(98, 0, 234, 0.3);
  }

  .date-picker-container {
    position: relative;
    width: 250px;
  }

  .date-picker {
    display: block;
    width: 100%;
    padding: 8px;
    margin: 8px 0;
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
    appearance: none;
    font-weight: 300;
    color: #626262;
  }

.date-picker:focus {
border: 1px solid #6200ea;
outline: none;
box-shadow: 0 2px 4px rgba(98, 0, 234, 0.3);
}

.width175 {width: 175px; font-size: 13px;}
.width375 {width: 375px; font-size: 13px;}
.width325 {width: 325px; font-size: 13px;}
.width50 {width: 50px; font-size: 13px;}
.width100 {width: 100px; font-size: 13px;}
.width200 {width: 200px; font-size: 13px;}
.width330 {width: 330px; font-size: 13px;}

.createblock {font-weight: 300; font-size: 13px; padding-left: 10px;}

/* Example styling for "No" value */
.highlight-yes {
  background-color: #ffcccc; /* Light red background */
  color: #900; /* Dark red text */
  font-weight: bold;
}
.login {border-radius: 10px; border: solid 1px #e7e7e7; padding: 5px 12px 5px 12px; background-color: #d3d3d3; }
.login:hover {background-color: #000; color: #fff;}

.checkboxes .form-check-input {
  margin-right: 10px; /* Add space between checkbox and label */
}
.notesbox {border: solid 1px #e7e7e7; border-radius: 10px; padding: 10px; height: 450px;}
.metricsbox {background: #FCFCFC; border: solid 1px #D8D8D8; border-radius: 10px; padding: 10px; box-shadow: 0px 3.038px 3.038px 0px rgba(0, 0, 0, 0.03) inset; }



.innerNotes {height: 320px; overflow: scroll;}
.nobutton {background-color: none; border: none;}

.btn-outline-secondary {
  border: none; /* Remove the border */
  padding: 0; /* Remove padding */
  background-color: transparent; /* Make the background transparent */
}


.dropdown-button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;  
  cursor: pointer; 
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-button:hover   
 .dropdown-content {
  display: block;
}

.toolbox {padding: 10px; border: solid 1px #d3d3d3; border-radius: 10px; height: 350px;}

.btn-tool1 {
  background-color: #ff5e00; /* Blue */
  color: white!important;
  padding:5px 12px;
  border: 1px solid #ff5e00;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 14px;
}

.btn-tool1:hover {
  background-color: white;
  color: #ff5e00!important; /* Blue */
  border: 1px solid #ff5e00; /* Blue */
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 14px;
}

.toolcomms {min-height: 120px;}
.midsection {min-height: 100px;}


.db1 {border-radius: 16px; background: #FFE2E5; width: 180px; height: 184px; ;}
.db2 {border-radius: 16px; background: #FFF4DE; width: 180px; height: 184px; }
.db3 {border-radius: 16px; background: var(--Colors-Green-100, #DCFCE7); width: 180px; height: 184px; }
.db4 {border-radius: 16px; background: var(--Colors-Purple-100, #F3E8FF); width: 180px; height: 184px; }
.db5 {border-radius: 16px; background: rgba(0, 157, 255, 0.32); width: 180px; height: 184px; }
.db6 {border-radius: 16px; background: rgba(0, 224, 150, 0.68); width: 180px; height: 184px; }
.dbIcon {padding: 20px;}
.dbNumber{padding: 0px 20px 10px 20px; color: var(--Greys-Blue-Grey-900, #151D48); 
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px; /* 133.333% */}
.dbText{color: #425166;

  /* base/Medium */
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
   padding: 0px 20px 0px 20px; }



   .filters-container {
    display: flex; /* Use Flexbox */
    justify-content: space-between; /* Ensure equal spacing between items */
  }
  
  .filter {
    width: 180px; /* Fixed width for each metric */
    text-align: left; /* Optional: Align text in the center */
    
  }

  .membership {border: solid 1px #d3d3d3; padding: 20px; border-radius: 10px; height: 400px; overflow: scroll;}
  
  /* Modal container */
#statsModal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
  overflow: auto; /* Enable scroll if needed */
}

/* Modal content */
#statsModal .modal-content {
  background-color: #fff;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border-radius: 8px;
  width: 50%; /* Adjust as needed */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Close button */
#statsModal .close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}


/* Modal container */
#lineItemsModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
}

/* Modal content */
#lineItemsModal .modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border-radius: 8px;
  width: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Close button */
#lineItemsModal .close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}


.metricnumber1 {border-radius: 8px; border: 1px solid #0095FF; background: var(--Colors-Light-Blue-50, #F0F9FF); width: 50px;
  height: 24px; flex-shrink: 0; padding: 6px; color: #0095FF; text-align: center; font-size: 13px; font-weight: 400; line-height: 16px; /* 123.077% */}

.metricnumber2 {border-radius: 8px; border: 1px solid #FF8900; background: var(--Supporting-Color-yellow-Shade, #FEF6E6); width: 50px;
    height: 24px; flex-shrink: 0; padding: 6px; color: #FF8900; text-align: center; font-size: 13px; font-weight: 400; line-height: 16px; /* 123.077% */}

.bridge-pic {background-image: url('/images/thebridge.png'); min-height: 1200px; background-size:cover; }


.dataTables_filter {padding-top: 10px;}

  /* Modal container */
  #uniqueTicketModal {
      display: none; /* Hidden by default */
      position: fixed;
      z-index: 1050; /* Ensure it's above other modals */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto; /* Enable scrolling if needed */
      background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  }

  /* Modal content */
  .custom-modal-content {
      background-color: #f9f9f9;
      margin: 10% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 50%;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      font-family: Arial, sans-serif;
  }

  /* Close button */
  .custom-modal-close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
  }

  .custom-modal-close:hover,
  .custom-modal-close:focus {
      color: black;
      text-decoration: none;
  }


  .search-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-input, .search-button {
    display: none;
}

.search-input.visible, .search-button.visible {
    display: inline-block;
    position: relative;
   
}
.search-icon {
    cursor: pointer;
    font-size: 1.5rem;
}

.dropdown-menu {inset: 20px 0px auto auto !important;  }

.notes-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.notes-modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 5px;
  width: 60%;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

.notes-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.notes-modal-close:hover,
.notes-modal-close:focus {
  color: #000;
  text-decoration: none;
}

.notes-modal-body {
  max-height: 400px;
  overflow-y: auto;
  border-top: solid 1px #C5C5C5;
  margin-top: 20px;
}


.AddressModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.AddressModalContent {
  background-color: white;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  border-radius: 8px;
}
.AddressClose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.pointer {cursor: pointer;}


#demoProgressBarContainer {
  width: 300px; /* Set a max width for the container */
  height: 300px; /* Set a max height for the container */
  margin: auto; /* Center the chart */
  position: relative;
}

#demoProgressBar {
  max-width: 100%;
  max-height: 100%;
}

.graphname {font-size: 18px; font-weight: 500; color: #001D67; }

.modal-wide {
  max-width: 75% !important;  /* Set modal width to 75% */
  margin: auto;  /* Ensure it's centered */
  margin-top: 50px;
}


.metrics-container {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.metric-box {
  background: white;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.metric-box h4 {
  margin: 0;
  font-size: 16px;
  color: #007bff;
}
.metric-box p {
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0 0;
}

.bg_kb {border-radius: 8px; background: linear-gradient(91deg, #0038AD 0%, var(--Colour-Brand-Primary, #2A68EC) 100%); color: #fff; padding: 20px;}


/* Make the row a flex container and add a gap between items */
.custom-flex {
  display: flex;
  gap: 30px;
  margin-left: 5px; 
  margin-right: 5px;
 
  
}

/* Optional: make each box grow equally */
.custom-flex .box {
  flex: 1;
  /* Add some styling for visibility */
  padding: 30px 20px 30px 20px;
  background-color: #fff;
  text-align: leftr;
  border: 1px solid #ccc;
  width: 400px;
  border-radius: 6px;

}

.answer-height{padding-top: 30px; height: 300px; overflow: scroll;}

.loader-container {
  display: none; /* Initially hidden */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1.2rem;
  font-family: Arial, sans-serif;
  color: #ffcc00;
  background: #222;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
  z-index: 1000;
}

@import url("https://fonts.googleapis.com/css?family=Slabo+27px&display=swap");
*, *:after, *:before {
  box-sizing: border-box;
}

.pacman {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #F2D648;
  position: relative;
  margin-top: 20px;
  
  &__eye {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 20px;
    right: 40px;
    background: #333333;
  }
  
  &__mouth {
    background: #000;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
    animation-name: eat;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
  }
  &__food {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #FFF;
    border-radius: 50%;
    top: 40%;
    left: 120px;
    animation-name: food;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
   }
}

@keyframes eat {
  0% {
    clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
  }
  25% {
    clip-path: polygon(100% 60%, 44% 48%, 100% 40%);
  }
  
  50% {
    clip-path: polygon(100% 50%, 44% 48%, 100% 50%);
  }
  
  75% {
   clip-path: polygon(100% 59%, 44% 48%, 100% 35%);
  }
  
  100% {
   clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
  }
}

@keyframes food {
  0% { 
    transform: translateX(0);
     opacity: 1;
  }
  100% {
    transform: translateX(-50px);
    opacity: 0;
  }
}

.hsquare {
width: 100%;
border: solid 1px #4d4d4d;
border-radius: 10px;
background-color: #fff;
padding: 20px; 
height: 550px;

}

.hpanel {
  width: 100%;
  border: solid 1px #4d4d4d;
  border-radius: 10px;
  background: linear-gradient(90deg, #AB1988 0%, #E76B2C 100%);
  padding: 20px; 
  min-height: 320px;
  color: #fff;
  padding-bottom: 40px;
    
  }

.news {overflow:auto;}

.page-item active{background-color: #2868ec;}

#user-tags-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

#tags-list {
  display: flex;
  flex-wrap: wrap;  /* Ensures tags wrap instead of overflowing */
  gap: 8px;  /* Adds spacing between tags */
  align-items: center; /* Aligns items vertically */
}

.status {
  background-color: green;
  color: white;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 14px;
}

.tag {
  display: flex;
  background-color: #e0e0e0;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.tag .remove-tag {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #555;
}

#add-tag-btn {
  background: none;
  border: none;
  font-size: 14px;
  color: #555;
  cursor: pointer;
}

#new-tag-input {
  padding: 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: none;
}

/* Collapsible Article Suggestions */
.article-suggestions {
  margin: 15px 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #f8f9fa;
}

.article-summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 500;
  color: #2A68EC;
  background: #fff;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s ease;
}

.article-summary:hover {
  background: #f0f4ff;
}

.article-summary::-webkit-details-marker {
  display: none;
}

.article-summary::after {
  content: '▼';
  float: right;
  font-size: 12px;
  color: #666;
  transition: transform 0.2s ease;
}

.article-suggestions[open] .article-summary::after {
  transform: rotate(180deg);
}

.article-list {
  padding: 16px;
  background: #fff;
  border-radius: 0 0 8px 8px;
}

.article-link {
  display: block;
  padding: 8px 0;
  color: #2A68EC;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: color 0.2s ease;
}

.article-link:hover {
  color: #1a4bb8;
  text-decoration: underline;
}

.article-link:last-child {
  border-bottom: none;
}

/* Improved Feedback Buttons */
.feedback-buttons {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.feedback-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.feedback-btn:hover {
  border-color: #2A68EC;
  color: #2A68EC;
  background: #f0f4ff;
}

.feedback-btn.helpful {
  border-color: #28a745;
  color: #28a745;
}

.feedback-btn.helpful:hover {
  background: #f0fff4;
  border-color: #1e7e34;
  color: #1e7e34;
}

.feedback-btn.not-helpful {
  border-color: #dc3545;
  color: #dc3545;
}

.feedback-btn.not-helpful:hover {
  background: #fff5f5;
  border-color: #c82333;
  color: #c82333;
}

.feedback-btn i {
  font-size: 16px;
}

.topic-divider {
  text-align: center;
  margin: 20px 0;
  padding: 10px;
  background: linear-gradient(90deg, #f5f5f5 0%, #e6e6e6 50%, #f5f5f5 100%);
  border-radius: 6px;
  font-size: 12px;
  color: #666;
  font-style: italic;
  letter-spacing: 0.5px;
}

.chat-greeting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2A68EC;
  font-weight: 500;
}

.chat-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(42, 104, 236, 0.2);
  border-top-color: #2A68EC;
  border-radius: 50%;
  animation: chat-spin 0.6s linear infinite;
}

@keyframes chat-spin {
  to {
    transform: rotate(360deg);
  }
}

.chat-input-disabled {
  background-color: #f4f4f4;
  cursor: not-allowed;
}

.email-capture {
  background: #f8faff;
  border: 1px solid #dfe8ff;
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}

.email-capture-text {
  margin-bottom: 12px;
  font-size: 14px;
  color: #2A2A2A;
}

.email-capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.email-capture-actions input {
  flex: 1 1 220px;
  min-width: 180px;
}

.email-submit-btn {
  background: #2A68EC;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.email-submit-btn:hover {
  background: #1c4db3;
}

.email-decline-btn {
  background: transparent;
  border: none;
  color: #666;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.email-decline-btn:hover {
  color: #333;
}

.email-capture-status {
  margin-top: 10px;
  font-size: 13px;
}

.email-capture-status.status-info {
  color: #2A68EC;
}

.email-capture-status.status-success {
  color: #1e7e34;
}

.email-capture-status.status-error {
  color: #c82333;
}