@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;600&display=swap");
@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot");
  src: url("../fonts/icomoon.eot") format("embedded-opentype"),
    url("../fonts/icomoon.ttf?28i0mu") format("truetype"),
    url("../icomoon.woff?28i0mu") format("woff"),
    url("../onts/icomoon.svg?28i0mu#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon";
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-location-define-svgrepo-com:before {
  content: "\e917";
}
.icon-paw-svgrepo-com:before {
  content: "\e918";
}
.icon-creative_idea .path1:before {
  content: "\e919";
}
.icon-creative_idea .path2:before {
  content: "\e91a";
  margin-left: -1em;
}
.icon-creative_idea.path3:before {
  content: "\e91b";
  margin-left: -1em;
}
.icon-home:before {
  content: "\e915";
}
.icon-chat_message_mail_email_letter_icon .path1:before {
  content: "\e910";
}
.icon-chat_message_mail_email_letter_icon .path2:before {
  content: "\e911";
  margin-left: -1em;
}
.icon-chat_message_mail_email_letter_icon .path3:before {
  content: "\e912";
  margin-left: -1em;
}
.icon-chat_message_mail_email_letter_icon .path4:before {
  content: "\e913";
  margin-left: -1em;
}
.icon-chat_message_mail_email_letter_icon .path5:before {
  content: "\e914";
  margin-left: -1em;
}
.icon-exit_logout_entrance_out_icon:before {
  content: "\e907";
}
.icon-check:before {
  content: "\e900";
}
.icon-settings_icon:before {
  content: "\e902";
}
.icon-account_user:before {
  content: "\e903";
}
.icon-files:before {
  content: "\e90f";
}
.icon-messages:before {
  content: "\e90d";
}
.icon-location:before {
  content: "\e906";
}
.icon-clock:before {
  content: "\e909";
}
.icon-filter:before {
  content: "\e90a";
}
.icon-help-circle:before {
  content: "\e904";
}
.icon-list:before {
  content: "\e90e";
}
.icon-toggle-left:before {
  content: "\e905";
}
.icon-arrow-right:before {
  content: "\e916";
}
.icon-calendar:before {
  content: "\e908";
}
.icon-heart:before {
  content: "\e90b";
}
.icon-map2:before {
  content: "\e94c";
}
.icon-bell-o:before {
  content: "\e901";
}
.icon-search:before {
  content: "\e90c";
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --primary-text-color: #393939;
  --secondary-text-color: #505050;
  --pending-bg: #ffe4e2;
  --pending-text: #db5b52;
  --completed-bg: #f2e5fd;
  --completed-text: #642697;
  --draft-bg: #dfdfdf;
  --draft-text: #7e7e7e;
  --navigate-light-bg: #fffbf1;
  --navigate-color: #f1b201;
  --drop-shadow-colmn: 0px 12px 42px rgba(0, 0, 0, 10%);
  --drop-shadow-colmn-2: 0px 5px 20px rgba(0, 0, 0, 10%);
  --drop-shadow-colmn-3: 0px 2px 10px rgba(0, 0, 0, 5%);
  --search-bg: #f6f6f6;
}
input,
input:focus,
a,
a:hover,
a:focus,
textarea,
textarea:focus-visible,
select:focus {
  border: 0px;
  outline: 0px;
  text-decoration: none;
  transition: ease-in 0.5s;
}

textarea {
  resize: none;
}

ul,
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

body,
html {
  font-family: "Poppins", sans-serif !important;
  width: 100%;
  /* height: 100%; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: "Poppins", sans-serif !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--secondary-text-color);
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul li,
label,
span {
  font-family: "Poppins", sans-serif !important;
}

p {
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
}

.status-badge {
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 4px;
}

.status-badge-pending {
  background-color: #fff4cc;
  color: #856404;
}

.status-badge-contacted {
  background-color: #d1ecf1;
  color: #0c5460;
}

.status-badge-follow-up {
  background-color: #cce5ff;
  color: #004085;
}

.status-badge-resolved {
  background-color: #d4edda;
  color: #155724;
}


.btn-close:focus {
  box-shadow: none;
}
img,
img a {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--completed-text);
}
.navigate,
.navigate:hover {
  color: var(--navigate-color);
  font-size: 1rem;
}
.secondary_link,
.secondary_link:hover {
  font-size: 14px;
  color: var(--completed-text);
}
#app_header {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  z-index: 9;
  position: fixed;
  left: 0px;
  top: 0px;
}
/* .fixedHeader {
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
} */

.main-menu {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.main-menu .navigation {
  position: relative;
  margin: 0px;
  display: flex;
  align-items: center;
}

.main-menu .navigation > li {
  position: relative;
  float: left;
  margin-right: 0px;
}

.main-menu .navigation > li > a {
  font-family: "poppins";
  position: relative;
  display: block;
  font-weight: 400;
  font-size: 14px;
  padding: 0.65rem 1rem 0.65rem 1.75rem;
  opacity: 1;
  color: var(--font-color);
}

.main-menu .navigation > li.dropdown a {
  padding-left: 0.45rem;
}

.main-menu .navigation > li > a .icon_top {
  position: absolute;
  top: 3px;
  left: 0px;
  width: 25px;
}
.main-menu .navigation > li > a .count {
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  line-height: 22px;
  background-color: var(--navigate-color);
  border: 2px solid #fff;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  top: -8px;
  left: 8px;
}
.navigation > li.dropdown .profile_thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.main-menu .navigation > li > .sub-menu {
  background-color: #fff;
  box-shadow: var(--drop-shadow-colmn-2);
  padding: 15px;
}
.main-menu .navigation > li.dropdown > a:after {
  content: "";
  width: 8px;
  height: 8px;
  background: transparent;
  border-right: 1px solid var(--draft-text);
  border-bottom: 1px solid var(--draft-text);
  position: absolute;
  display: block;
  margin: 0px;
  vertical-align: middle;
  border-top: 0px;
  transform: rotate(45deg);
  top: 25px;
  right: 0px;
  border-left: 0px;
}

.main-menu .sub-menu .sub-menu_header {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #dddcdc;
  padding: 10px 0px 15px;
}
.sub-menu .sub-menu_header .userImg {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  display: block;
  margin: 0px auto 10px;
}

.sub-menu .sub-menu_header .user_name {
  font-size: 16px;
  font-weight: 500;
  color: var(--secondary-text-color);
}
.sub-menu .sub-menu_header .user_email {
  font-size: 12px;
  font-weight: 400;
  color: var(--secondary-text-color);
}

.sub-menu .sub-menu_header .status {
  font-size: 13px;
  padding: 10px 20px !important;
  margin: 5px 0px;
  display: inline-block;
  background: var(--completed-text);
  color: #ffff;
  border-radius: 20px;
}

ul.top_header-menu {
  width: 100%;
  padding-top: 15px;
}
ul.top_header-menu li {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0px 10px 30px;
  position: relative;
}
ul.top_header-menu li a {
  font-family: "poppins";
  color: var(--secondary-text-color);
  font-size: 14px;
}
ul.top_header-menu li .setcicon {
  margin-right: 4px;
  position: absolute;
  left: 0px;
  width: 20px;
}
.header_bottom-nav ul {
  display: flex;
  justify-content: flex-end;
}
.header_bottom-nav ul li a {
  font-family: "poppins";
  position: relative;
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--font-color);
  padding: 0.65rem 0.75rem 0.65rem 1.25rem;
}
.header_bottom-nav ul li a > .icon {
  width: 17px;
  position: absolute;
  top: 7px;
  left: 0px;
}
.logo_wrap {
  padding: 10px 10px;
  border-right: 1px solid #eaeaea;
}
.header_center-block {
  display: flex;
  align-items: center;
  width: 100%;
}

.custom_select {
  width: auto;
  height: 50px;
  border-radius: 5px;
  background: #f5f5f5 url(../images/field_arrow.svg) no-repeat;
  background-size: 21px;
  background-position: 95%;
  -webkit-appearance: none;
  appearance: none;
  padding: 5px 65px 5px 10px;
  border: 0px;
  font-weight: 400;
}
.md-height {
  height: 47px;
}
.fieldSearch {
  width: 100%;
  height: 50px;
  padding: 8px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
  border-radius: 5px;
}

.fieldSearch .fieldColmn {
  flex: 0 0 85%;
  max-width: 85%;
  outline: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 300;
  border: 0px;
}
.fieldSearch .srchBtn {
  flex: 0 0 40px;
  max-width: 40px;
  position: relative;
  outline: 0;
  border: 0px;
  background: transparent;
}

.fieldSearch .srchBtn::after {
  content: "\e90c";
  font-family: "icomoon";
  color: #7e7e7e;
  font-size: 1.65rem;
}
.hiddenSiteSearch {
  width: 100%;
  height: 50px;
  padding: 8px;
  background: #f5f5f5;
  display: none;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
  border-radius: 5px;
}
.siteSearch {
  width: 100%;
  height: 50px;
  padding: 8px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
  border-radius: 5px;
}

.siteSearch .fieldColmn {
  flex: 0 0 85%;
  max-width: 85%;
  outline: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 300;
  border: 0px;
}

.siteSearch .srchBtn {
  flex: 0 0 40px;
  max-width: 40px;
  position: relative;
  outline: 0;
  border: 0px;
  background: transparent;
}

.siteSearch .srchBtn::after {
  content: "\e90c";
  font-family: "icomoon";
  color: #7e7e7e;
  font-size: 1.65rem;
}
.btn_group {
  display: flex;
  margin-left: 5px;
}
.btn__large {
  display: inline-block;
  height: 50px;
  border-radius: 5px;
  padding: 0px 55px 0px 65px;
  margin: 5px 5px;
  position: relative;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
  text-wrap: nowrap;
}
.btn__large .icon {
  position: absolute;
  width: 25px;
  left: 30px;
  top: -1px;
}
.btn_header {
  display: inline-block;
  height: 50px;
  border-radius: 5px;
  padding: 0px 15px 0px 45px;
  margin: 0px 5px;
  position: relative;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
  text-wrap: nowrap;
}
.btn_header .icon {
  position: absolute;
  width: 25px;
  left: 10px;
  top: -1px;
}
.icon_btn_flex {
  display: inline-block;
  padding: 10px 20px 10px 30px;
  border-radius: 5px;
  position: relative;
  font-size: 15px;
}
.icon_btn_flex.load {
  border: 1px solid var(--completed-text);
  color: var(--completed-text);
}
.icon_btn_flex.load .icon {
  position: absolute;
  width: 15px;
  left: 10px;
  top: 8px;
}

.btn_primary-bdr,
.btn_primary-bdr:hover {
  padding: 10px 18px;
  font-size: 15px;
  border: 1px solid var(--navigate-color);
  background: transparent;
  border-radius: 4px;
  color: var(--navigate-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn_primary-bdr .icon {
  margin-right: 10px;
}
.btn_submit-small {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 5px;
  color: var(--primary-text-color);
  font-size: 15px;
  border: 0px;
  position: relative;
  background-color: #f9f1dc;
}
.btn_block-primary {
  width: 100%;
  padding: 10px 30px;
  border-radius: 5px;
  color: #fff;
  font-size: 15px;
  border: 0px;
  background-color: var(--navigate-color);
}
.btn__primary-small,
.btn__draft-small,
.btn__primary-small:hover,
.btn__draft-small:hover {
  display: inline-flex;
  padding: 10px 25px;
  border-radius: 5px;
  color: #fff;
  font-size: 15px;
  border: 0px;
  position: relative;
  margin: 0px 4px;
}
.btn__primary-small {
  background-color: var(--navigate-color);

  align-items: center;
}
.btn__primary-small .icon {
  width: 25px;
  margin-right: 5px;
}
.btn__draft-small {
  background-color: #a7a7a7;
  display: flex;
  align-items: center;
}

.btn__draft-small .icon {
  width: 25px;
  margin-right: 5px;
}

.primary_color,
.primary_color:hover {
  background-color: var(--navigate-color);
  color: #fff;
}
.secondary_color,
.secondary_color:hover {
  background-color: var(--completed-text);
  color: #fff;
}
.primary_btn,
.primary_btn:hover {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: var(--navigate-color);
  color: #fff;
  font-size: 15px;
  border: 0px;
  position: relative;
}

.secondary_btn,
.secondary_btn:hover {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #894eac;
  color: #fff;
  font-size: 15px;
  border: 0px;
  position: relative;
}

.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.star-rating input[type="radio"] {
  display: none;
}

.star-rating label {
  font-size: 2rem;
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #ffcc00;
}

.star-rating input[type="radio"]:checked ~ label {
  color: #ffcc00;
}

.bg_cost {
  background: #f9f1dc;
  border: 1px solid #ece2c8;
  border-radius: 5px;
}
.btn_element:after {
  content: "\e916";
  font-family: "icomoon" !important;
  margin-left: 6px;
  font-size: 12px;
}
.profile_progress-wrap {
  width: 100%;
  padding: 10px 20px;
  border-radius: 10px;
  margin: 25px 0px;
  background-color: var(--navigate-light-bg);
  border: 1px solid var(--navigate-color);
}
.banner_single-row {
  width: 100%;
  margin-top: 20px;
  position: relative;
}

.banner_single-row .home_left-banner {
  width: 100%;
  padding: 35px 55px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100%;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.banner_single-row .home_left-banner:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: rgba(100, 38, 151, 1);
  z-index: -1;
}
.banner_single-row .home_left-banner .title {
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 15px;
}

.banner_single-row .home_right-banner {
  width: 100%;
  background-image: url(../images/bg_banner.png);
  padding: 0px 50px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.paw {
  position: absolute;
  width: 40px;
  height: auto;
  pointer-events: none;
  opacity:0.4;
}

/* Specific paw placements */
.paw-1 {
  top: -65px;
  left: 20px;
}

.paw-2 {
  top: -65px;
  right: 25px;
}

.benefits-list li {
  margin-bottom: 8px;
  padding-left: 1.5rem;
  position: relative;
}

.banner_text-wrap {
  margin: 15px 0px;
}

.banner_single-row .home_right-banner .title {
  color: #393939;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 15px;
}
.banner_single-row .home_right-banner p {
  font-size: 14px;
  font-weight: 300;
  color: var(--secondary-text-color);
}

.home_right-banner .banner_poster {
  position: relative;
}

.banner_single-row .service_provide-banner {
  width: 100%;
  background: url(../images/bg-service-provider.jpg);
  position: relative;
  background-size: cover;
  padding: 25px;
  overflow: hidden;
  border-radius: 15px;
}

.btn_primary-flow {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px 5px;
  font-size: 14px;
  font-weight: 500;
  color: #94059f;
  padding: 6px 14px;
  border-radius: 5px;
}

.btn_outline-flow {
  border: 1px solid #94059f;;
}

.btn_space-lg-flow {
  padding: 10px 15px;
}

.btn_outline-flow:hover {
  background: #f2e1f3;
  border-color: #f2e1f3;
  color: #94059f;;
}


.service_provide-banner .title {
  color: #fff;
  font-weight: 300;
  font-size: 1.45rem;
}

.service_provide-banner .update_service-block {
  width: 100%;
  padding: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 20px;
}
.update_service-block .icon_colmn {
  width: 70px;
  margin-right: 20px;
}
.update_service-block .content_colmn .sub-title {
  color: #fff;
  font-weight: 500;
  font-size: 1.25rem;
}
.update_service-block .content_colmn p {
  color: #bc9bd7;
  margin: 0px;
  font-weight: 400;
}

.service_provide-banner .btnMore {
  color: var(--navigate-color);
  font-size: 16px;
  font-weight: 400;
  position: relative;
  float: right;
  margin-top: 5px;
}
.service_provide-banner .btnMore:after {
  content: "\e916";
  font-family: "icomoon" !important;
  margin-left: 3px;
  font-size: 13px;
}

.hiring-paraVets-banner {
  width: 100%;
  background: url(../images/hiring-banner-bg.png) no-repeat;
  background-size: cover;
  padding: 20px;
  border-radius: 15px;
  position: relative;
  display: flex;
  align-items: center;
}
.hiring-paraVets-banner .content_colmn {
  height: 100%;
}
.hiring-paraVets-banner .content_colmn .title {
  font-weight: 600;
}
.hiring-paraVets-banner .content_colmn p {
  font-size: 14px;
  margin: 0px;
}

.hiring-paraVets-banner .image_wrapper {
  width: 100%;
  position: absolute;
  width: 557px;
  right: 0px;
  bottom: 0px;
}

/* index-page step bar*/
.stepper-wrapper {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0px;
}
.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.stepper-item:first-child {
  align-items: flex-start;
}
.stepper-item:last-child {
  align-items: flex-end;
}
.stepper-item::before {
  position: absolute;
  content: "";
  height: 10px;
  background-color: #eddaa3;
  width: 100%;
  top: 56px;
  left: 0;
  z-index: 2;
}

.color_item::before {
  background-color: #7f55a3 !important;
}

.stepper-item::after {
  background-color: #eddaa3;
  position: absolute;
  content: "";
  width: 100%;
  height: 10px;
  top: 56px;
  left: 0%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eddaa3;
  color: #fff;
  border: 4px solid #fff;
  box-shadow: var(--drop-shadow-colmn);
  margin-bottom: 6px;
}
.color__counter {
  width: 40px;
  height: 40px;
  border: 4px solid #7f55a3 !important;
  background-color: #5f237d !important;
}
.stepper-item.active .step-counter::before {
  content: "x";
  position: absolute;
  /*border-bottom: 2px solid #fff;*/
  z-index: 2;
  width: 10px;
  height: 15px;
  /*border-right: 2px solid #fff;*/
  /* border-radius: 3px;*/
  /*transform: rotate(45deg);*/
  /*top: 6px;*/
  top: 10%;
  left: 37%;
}
.stepper-item.completed .step-counter::before {
  content: "";
  position: absolute;
  border-bottom: 2px solid #fff;
  z-index: 2;
  width: 10px;
  height: 15px;
  border-right: 2px solid #fff;
  /* border-radius: 3px; */
  transform: rotate(45deg);
  top: 6px;
}
.stepper-item.active {
  font-weight: bold;
}
.step-name {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.step-name .count-value {
  font-size: 20px;
  font-weight: 700;
}
.color_value {
  color: #d8c1eb !important;
}
.step-name .step__name {
  font-size: 11px;
  line-height: 12px;
  padding-left: 10px;
  color: #7e7e7e;
}

.color_name {
  color: #bc9bd7 !important;
}

.step-name .step__name label {
  display: block;
}
.stepper-item.completed .step-counter {
  background-color: #61b643;
}
.stepper-item.active .step-counter {
  background-color: #f1b201;
}
.stepper-item.completed::after {
  position: absolute;
  content: "";
  height: 10px;
  background: rgb(241, 178, 1);
  background: linear-gradient(
    90deg,
    rgba(241, 178, 1, 1) 0%,
    rgba(97, 182, 67, 1) 61%,
    rgba(49, 181, 3, 1) 82%
  );
  width: 150%;
  top: 56px;
  left: 0;
  z-index: 3;
}
.stepper-item.completed + .stepper-item.completed:after {
  width: 150%;
  left: 50%;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}
/* index-page step bar*/

/* rvt dashboard step bar */
.rvt_profile_completion {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0px;
  margin-top: 20px;
}
.rvt_profile-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
/* .rvt_profile-item:first-child {
  align-items: flex-start;
}
.rvt_profile-item:last-child {
  align-items: flex-end;
} */
.rvt_profile-item::before {
  position: absolute;
  content: "";
  height: 10px;
  background-color: #7f55a3;
  width: 100%;
  top: 56px;
  left: -99%;
  z-index: 2;
}

.rvt_profile-item::after {
  position: absolute;
  content: "";
  width: 100%;
  top: 40px;
  left: 50%;
  z-index: 2;
}

.rvt_profile-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #7f55a3;
  color: #642697;
  box-shadow: var(--drop-shadow-colmn);
  margin-bottom: 6px;
}

.rvt_profile-item.active .step-counter::before,
.rvt_profile-item.completed .step-counter::before {
  content: "";
  position: absolute;
  border-bottom: 2px solid #642697;
  z-index: 2;
  width: 10px;
  height: 15px;
  border-right: 2px solid #642697;
  transform: rotate(45deg);
  top: 6px;
}
.rvt_profile-item.active {
  font-weight: bold;
}
.rvt_step-name {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
}
.rvt_step-name .count-value {
  font-size: 20px;
  font-weight: 700;
}
.color_value {
  color: #d8c1eb !important;
}
.rvt_step-name .rvt_step__name {
  font-size: 11px;
  line-height: 15px;
  padding-left: 10px;
  color: #7e7e7e;
}

.color_name {
  color: #bc9bd7 !important;
}

.rvt_step-name .rvt_step__name label {
  display: block;
}
.rvt_profile-item.completed .step-counter {
  background-color: #f1b201;
}
.rvt_profile-item.active .step-counter {
  background-color: #61b643;
}
.rvt_profile-item.completed::after {
  position: absolute;
  content: "";
  height: 10px;
  background: rgb(241, 178, 1);
  background: linear-gradient(
    90deg,
    rgba(241, 178, 1, 1) 0%,
    rgba(97, 182, 67, 1) 61%,
    rgba(49, 181, 3, 1) 82%
  );
  width: 100%;
  top: 56px;
  left: 1%;
  z-index: 3;
}
/* .rvt_profile-item.completed + .stepper-item.completed:after {
  width: 150%;
  left: 50%;
} */

.rvt_profile-item:first-child::before {
  content: none;
}
.rvt_profile-item:last-child::after {
  content: none;
}

/* rvt dashboard step bar */

.title_wrap .title {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  margin: 0px;
}
.title_wrap .title label {
  display: block;
  font-weight: 600;
}

.booking_list-wraper {
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  margin-top: 20px;
  padding-bottom: 20px;
}

.booking_list-wraper .bookList_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px 10px;
}
.booking_list-wraper .bookList_header .btnMore {
  color: var(--navigate-color);
  font-size: 15px;
  font-weight: 400;
  position: relative;
}
.bookList_header .btnMore:after {
  content: "\e916";
  font-family: "icomoon" !important;
  margin-left: 3px;
  font-size: 12px;
}

.bookingListScroll .item {
  padding: 0px 0px;
  margin-top: 15px;
}
.booking_card-col {
  width: 100%;
  border-radius: 10px;

  position: relative;
  padding: 20px;
  margin-bottom: 30px;
  background-color: #fff;
  overflow: hidden;
}

.card_shadow {
  box-shadow: var(--drop-shadow-colmn-2);
}
.booking_card-col .booking_card-head {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-top: 25px;
}
.booking_card-col .booking_card-head .booking_label {
  font-size: 13px;
  color: #7e7e7e;
  background-color: #fff;
  font-weight: 300;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid #dddddd;
  position: absolute;
  right: 15px;
  top: 10px;
}
.booking_card-col .booking_card-head .quote_label {
  font-size: 13px;
  color: var(--completed-text);
  background-color: #fff;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid #dddddd;
  position: absolute;
  right: 0px;
  top: 5px;
}
.booking_card-head .profile_img {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 1px solid #cfcfcf;
  border-radius: 50%;
  min-height: 10px;
}
.booking_card-head .profile_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.booking_card-head .profile_content {
  flex: 1;
  position: relative;
  padding-left: 5px;
}
.booking_card-head .profile_content .user_name {
  font-size: 16px;
  font-weight: 500;
  color: var(--secondary-text-color);
  margin: 0px;
}
.booking_card-head .profile_content .post_date {
  font-size: 0.75rem;
  color: var(--draft-text);
}
.profile_content .pending_prop a {
  font-size: 14px;
  color: var(--completed-text);
  margin-top: 4px;
}

.booking_card-body ul {
  width: 100%;
}

.booking_card-body ul li {
  font-size: 14px;
  font-weight: 300;
  color: #7e7e7e;
  position: relative;
  padding: 4px 0px 4px 20px;
}
.booking_card-body ul li .icon {
  font-size: 15px;
  position: absolute;
  top: 7px;
  left: 0px;
  color: var(--completed-text);
}
.booking_card-body ul li .icon img {
  width: 15px;
  margin-top: -4px;
}
.booking_card-body ul li a {
  color: var(--completed-text);
  font-weight: 500;
}

.booking_card-col .card_footer {
  width: 100%;
  padding: 10px 0px;
}

.booking_card-col .card_footer .applicant_value {
  font-size: 13px;
  font-weight: 400;
  color: #505050;
  margin: 0px;
}
.booking_card-col .card_footer .booking_status {
  font-size: 14px;
  font-weight: 300;
  padding: 5px 20px;
  border-radius: 50px;
  margin-top: 10px;
}
.booking_status.pending {
  color: #db5b52;
  background-color: #ffe4e2;
}
.booking_status.confirmed {
  color: #4eac2d;
  background-color: #e6fadf;
}
.booking_status.completed {
  color: var(--completed-text);
  background-color: var(--completed-bg);
}
.booking_status.draft {
  color: #7e7e7e;
  background-color: #dfdfdf;
}

.profile_availability {
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 20px;
  margin-top: 20px;
}

.profile_availability .bookList_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px 0px;
}
.profile_availability .bookList_header .block_avail-btn {
  display: inline-block;
  height: 35px;
  border-radius: 5px;
  padding: 0px 15px 0px 30px;
  margin: 0px 5px;
  position: relative;
  line-height: 35px;
  font-size: 13px;
  background-color: var(--navigate-color);
  color: #fff;
  font-weight: 300;
  text-wrap: nowrap;
}
.block_avail-btn .icon {
  position: absolute;
  width: 16px;
  left: 8px;
  top: -1px;
}
.date_avail-wrap {
  width: 100%;
  margin-top: 20px;
}

ul.month_details-list {
  display: flex;
  justify-content: space-between;
}
ul.month_details-list li {
  color: var(--draft-text);
  font-size: 14px;
}
ul.month_details-list li.active {
  color: var(--completed-text);
}
ul.date_avail-list {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  flex-wrap: wrap;
}

ul.date_avail-list .date {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
}
ul.date_avail-list .week {
  display: block;
  text-align: center;
  color: #a7a7a7;
  font-weight: 400;
  font-size: 13px;
  margin-top: 4px;
}

.singel_block-title {
  font-size: 24px;
  font-weight: 600;
  color: #393939;
  margin: 0px;
}

.singel_title {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-text-color);
  margin: 0px;
}

.date-bg-1 {
  background-color: #fbf5fe;
  color: var(--primary-text-color);
}

.date-bg-2 {
  background-color: #f1b201;
  color: #fff;
}

.date-bg-3 {
  background-color: #fcf5e2;
  color: var(--primary-text-color);
}

.date-bg-4 {
  background-color: #f8f8f8;
  color: var(--primary-text-color);
}
.date-bg-5 {
  background-color: #f4fdf0;
  color: var(--primary-text-color);
}
.date-bg-6 {
  background-color: #fff1f0;
  color: var(--primary-text-color);
}
.date-bg-7 {
  background-color: var(--completed-text);
  color: #fff;
}

.profile_data_filter {
  width: 100%;
  padding: 40px 0px;
}
.profile_data-blockHeader {
  width: 100%;
  margin-bottom: 20px;
}
.left_header-block {
  position: relative;
}

.btn_filter-holder {
  width: auto;
  height: 50px;
  background: #f5f5f5;
  border: 0px;
  padding: 5px 10px 5px 40px;
  border-radius: 4px;
  /* margin: 0px 10px; */
  position: relative;
}
.btn_filter-holder .icon {
  position: absolute;
  left: 9px;
}
.bookingSearch {
  margin: 0px 0px 0px 10px;
}

ul.tab_view-data {
  display: inline-flex;
  justify-content: end;
  background-color: #f4f4f4;
  border: 1px solid #eaeaea;
  border-radius: 6px;
}

ul.tab_view-data li a {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary-text-color);
  cursor: pointer;
}
ul.tab_view-data li .icon {
  margin-right: 4px;
}
ul.tab_view-data li.active-menu {
  background: var(--navigate-color);
  cursor: default;
  border-radius: 6px;
  color: #fff;
}
ul.tab_view-data li.active-menu a {
  color: #fff;
}

.listedData-parent:first-child {
  display: block;
}
.listedData-parent {
  display: none;
}

/* filter sidebar */

.filter_sidebar {
  width: 100%;
  border-radius: 10px;
  box-shadow: var(--drop-shadow-colmn);
}
.leftSide__feed {
  width: 100%;
  padding: 12px;
  display: flex;
  border-bottom: 1px solid #eaeaea;
}
.leftSide__feed .navigate {
  display: flex;
}
.leftSide__feed:nth-last-child() {
  border-bottom: 0px;
}
.leftSide__feed .user_image {
  flex: 0 0 60px;
  max-width: 60px;
  border-radius: 50%;
  margin-right: 5px;
}
.leftSide__feed .user_image img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.leftSide__feed .user_text p,
.leftSide__feed .user_text p a {
  font-size: 14px;
  font-weight: 400;
  margin: 0px;
  color: var(--primary-text-color);
}
.sidebar-gutter {
  padding: 15px;
}

.left_comment-block {
  width: 100%;
  padding: 15px 12px;
}
.left_comment-block .comment_palet {
  width: 100%;
  padding: 10px 10px;
  border-radius: 5px;
  background-color: #f5f5f5;
  overflow: hidden;
}
.left_comment-block .comment_palet .comment_field {
  background: transparent;
  width: 100%;
  height: 60px;
  font-size: 13px;
  border: 0px;
}
.left_comment-block .comment_palet .btn_comment {
  width: 40px;
  height: 40px;
  background: url(../images/send.png);
  background-size: 100%;
  border: 0px;
  float: right;
}

.petProfile_sidebar {
  width: 100%;
  border-radius: 10px;
  box-shadow: var(--drop-shadow-colmn);
}
.petProfile_sidebar .filter_header {
  width: 100%;
  position: relative;
  vertical-align: middle;
  padding: 16px 16px 0px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.petProfile_sidebar .filter_header .title {
  font-size: 20px;
  font-weight: 600;
}
.petProfile_sidebar .sideBar_wrapper {
  width: 100%;
  padding: 5px 0px;
}
.filter_sidebar .filter_header {
  width: 100%;
  position: relative;
  vertical-align: middle;
  padding: 16px 16px 0px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.filter_sidebar .filter_header .title {
  font-size: 20px;
  font-weight: 600;
}
.filter_sidebar .filter_header .icon {
  margin-right: 7px;
}
.filter_sidebar .filter_header .icon img {
  width: 20px;
}
.filter_sidebar .filter_header .more_nav {
  color: var(--navigate-color);
  font-size: 0.8rem;
}
.filter_sidebar .sideBar_wrapper {
  width: 100%;
  padding: 5px 0px;
}

.filterSearch {
  width: 90%;
  height: 45px;
  padding: 8px;
  background: #f6f6f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px auto;
}

.filterSearch .fieldSearch {
  flex: 0 0 85%;
  max-width: 85%;
  outline: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 400;
  border: 0px;
}

.filterSearch .btnSearch {
  flex: 0 0 40px;
  max-width: 40px;
  position: relative;
  outline: 0;
  border: 0px;
  background: transparent;
}

.filterSearch .btnSearch::after {
  content: "\e90c";
  font-family: "icomoon";
  color: #c5c2c2;
  font-size: 1.65rem;
}

.sidebar_cate-row {
  width: 100%;
  position: relative;
  padding: 15px 13px;
  border-bottom: 1px solid #eeeeee;
}
.sidebar_cate-row:last-child {
  border-bottom: 0px;
}
.sidebar_cate-row .cate-row_header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar_cate-row .cate-row_header .cateList-toggle {
  width: 12px;
  height: 12px;
  background: transparent;
  border-right: 1px solid #a7a7a7;
  border-bottom: 1px solid #a7a7a7;
  position: absolute;
  display: block;
  cursor: pointer;
  margin: 0px;
  transform: rotate(45deg);
  top: 15px;
  right: 10px;
  transition: ease-in 500ms;
}
.cate-row_header .cateList-toggle.off {
  transform: rotate(-135deg);
}

.sidebar_cate-row .title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

ul.category_listItem {
  width: 100%;
  margin: 0px;
}

ul.category_listItem li {
  padding: 4px 0px;
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary-text-color);
}
ul.category_listItem li .form-check-input {
  margin-right: 8px;
}
.form-check-input:checked {
  background-color: var(--navigate-color);
  border-color: var(--navigate-color);
}

.form-label.required::after {
  content: " *";
  color: #ef4444;
}

.sliderRange .value-range {
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary-text-color);
  margin-bottom: 15px;
  display: block;
}
.sliderRange .ui-slider-horizontal {
  height: 2px;
  margin-bottom: 10px;
}

.sliderRange .ui-slider .ui-slider-handle {
  top: -0.5em;
  border-radius: 50%;
  background-color: var(--completed-text);
  border: 0px;
}
.sliderRange #amount {
  color: var(--primary-text-color) !important;
  font-size: 14px;
  font-weight: 400 !important;
  text-align: left;
  margin-top: 10px;
}
.sliderRange .ui-widget-content {
  background-color: #d9d9d9;
  border: 0px;
}
.sliderRange .ui-widget-header {
  background-color: var(--completed-text);
}
.sliderRange input[type="text"] {
  border: 0;
  color: #f6931f;
  font-weight: bold;
}
.sidebar_cate-row .loacation_anchor {
  width: 100%;
  padding: 7px 7px 7px 25px;
  background-color: #faf2ff;
  border-radius: 5px;
  margin-bottom: 8px;
  font-size: 14px;
  position: relative;
  color: var(--completed-text);
}
.sidebar_cate-row .loacation_anchor .icon {
  position: absolute;
  width: 15px;
  left: 8px;
  top: 6px;
}
.sidebar_cate-row .loacation_anchor a {
  color: var(--completed-text);
}

/* landing profile data structure */

.primary_data-card {
  width: 100%;
  border-radius: 10px;
  box-shadow: var(--drop-shadow-colmn);
  background: #fff;
  position: relative;
  margin: 20px 0px;
  overflow: hidden;
}
.data_card-body {
  width: 100%;
}
.data_card-body .title {
  font-weight: 500;
  font-size: 1.1rem;
}
.data_card-body .title .date {
  font-size: 0.85rem;
  color: var(--draft-text);
  font-weight: 300;
  float: right;
  padding-left: 25px;
  display: block;
  position: relative;
}
.data_card-body .title .date .icon {
  position: absolute;
  left: 0px;
  top: -2px;
  width: 20px;
}
.data_card-body p {
  margin: 0px;
}
.data_card-footer {
  width: 100%;
  border-top: 1px solid #eaeaea;
}

ul.card_footer-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
}
ul.card_footer-list li {
  margin-right: 15px;
  font-size: 14px;
  color: var(--draft-text);
  position: relative;
  padding-left: 20px;
}
ul.card_footer-list li .icon {
  width: 18px;
  position: absolute;
  left: 0px;
  top: -2px;
}
ul.card_footer-list li.dismiss {
  margin-left: auto;
  margin-right: 0px;
}
ul.card_footer-list li a {
  color: var(--completed-text);
}
/*modal alert */
.modal__alert {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  z-index: 21;
}
.modal__alert.clicked {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.modal__alert .modal__content {
  background-color: white;
  max-width: 500px;
  margin: 2rem auto;
  border-radius: 0.5rem;
  text-align: center;
}
.modal__alert .modal__content .modal__body {
  padding: 2rem 2rem;
}
.modal__alert .modal__content .icon__wrap {
  width: 70px;
  margin-bottom: 20px;
}
.modal__alert .modal__content .title {
  font-weight: 600;
  line-height: 1.65rem;
  margin-bottom: 20px;
}
.modal__alert .modal__content .modal__footer {
  padding: 1rem 2rem;
  border-top: 1px solid #eaeaea;
}
ul.modal_btn-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
ul.modal_btn-group li .btn__primary {
}
/*modal alert */

/* site_modal*/
/* .modal {
  position: fixed;
  left: -600px;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}

.modal.show {
  left: 0px;
  opacity: 1;
  visibility: visible;
}
.modal .modal-dialog {
  margin-left: -600px;
  transition: linear ease-in 0.5s;
}
.modal.show .modal-dialog {
  margin-left: auto;
} */

/* site_modal*/

.land_profile-colmn {
  width: 100%;
  border-radius: 10px;
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.element_shadow {
  box-shadow: var(--drop-shadow-colmn);
}
.land_profile-colmn .top_fav-row {
  width: 100%;
  padding: 15px 15px;
  text-align: center;
  position: relative;
}
.top_fav-row .favourite_icon {
  width: 32px;
  height: 32px;
  line-height: 33px;
  position: absolute;
  right: 7%;
  top: 9%;
  border: 1px solid #d2b9e7;
  background-color: var(--completed-bg);
  border-radius: 50%;
  color: var(--completed-text);
}
.land_profile-colmn .profile_snap {
  width: 100px;
  height: 100px;
  margin: 0px auto;
}
.land_profile-colmn .profile_snap img {
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: cover;
  border: 3px solid rgba(100, 38, 151, 0.12);
  border-radius: 50%;
}

ul.rating_prof {
  display: flex;
  margin: 5px 0px 0px;
  justify-content: center;
}

ul.rating_prof li {
  margin: 0px 2px;
}
ul.rating_prof li img {
  width: 16px;
}
.p-abslt-r {
  position: absolute;
  right: 20px;
  top: 20px;
}
.land_profile-colmn .profile_body-row {
  width: 100%;
  padding: 4px 8px 60px;
  text-align: center;
}

.profile_body-row .name_title {
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary-text-color);
}

.profile_body-row .user_slogan {
  font-size: 14px;
  font-weight: 400;
  color: #7e7e7e;
}

ul.profile_address-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px;
  justify-content: center;
  margin-top: 12px;
}

ul.profile_address-list li {
  font-size: 13px;
  font-weight: 500;
  color: #7e7e7e;
  padding: 5px 10px;
  line-height: 12px;
}
/* ul.profile_address-list li:first-child {
  border-right: 1px solid #b9b9b9;
} */
ul.profile_address-list li .icon {
  color: var(--completed-text);
  font-size: 14px;
  padding-right: 3px;
}

ul.pet_care-navigate {
  display: flex;
  margin: 24px 0px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px;
}
ul.pet_care-navigate li {
  position: relative;
  margin: 7px 2px;
}

.pet_care-navigate .nav_badge {
  margin: 5px 0px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 400;
  border: 1px solid #dfdfdf;
  border-radius: 20px;
  color: var(--secondary-text-color);
}
.pet_care-navigate .nav_badge label {
  font-weight: 600;
}
.land_profile-colmn .card_footer-row {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: var(--navigate-light-bg);
  border-top: 1px solid #f1ede0;
}

ul.card_footer-button {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 0px;
  padding: 0px;
}

ul.card_footer-button li {
  padding: 15px 10px;
  flex: 0 0 50%;
  text-align: center;
}
ul.card_footer-button li:first-child {
  border-right: 1px solid #f1ede0;
}
ul.card_footer-button li a {
  color: var(--navigate-color);
  font-size: 16px;
  line-height: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.card_footer-button li a .icon {
  padding-right: 4px;
  font-size: 17px;
}
.site_pagimation {
  width: 100%;
}

ul.pagination_nav {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
ul.pagination_nav li a {
  font-size: 17px;
  margin: 0px 5px;
  width: 30px;
  height: 30px;
  display: block;
  text-align: center;
  line-height: 30px;
  color: var(--primary-text-color);
  border-radius: 50%;
  position: relative;
}
ul.pagination_nav li a.prev:before {
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  border-right: 1px solid #a7a7a7;
  border-bottom: 1px solid #a7a7a7;
  position: absolute;
  display: block;
  cursor: pointer;
  margin: 0px;
  transform: rotate(136deg);
  top: 10px;
  right: 0px;
}
ul.pagination_nav li a.next:before {
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  border-right: 1px solid #a7a7a7;
  border-bottom: 1px solid #a7a7a7;
  position: absolute;
  display: block;
  cursor: pointer;
  margin: 0px;
  transform: rotate(-40deg);
  top: 10px;
  right: 0px;
}
ul.pagination_nav li a.active {
  background-color: var(--navigate-color);
  color: #fff;
}

/* landing profile data structure */
.feed_parent-row {
  padding: 1.5rem;
}
.feed_parent-row .feed_user-row {
  display: flex;
  position: relative;
  align-items: center;
}
.feed_user-row .user_image-colmn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}
.feed_user-row .user_image-colmn img {
  width: 100%;
  height: 100%;
}
.feed_comment_field {
  width: 100%;
  display: flex;
}
.feed_parent-row .user_details-colmn .title {
  font-weight: 600;
  font-size: 15px;
  margin: 0px 0px 3px 0px;
  color: var(--secondary-text-color);
}
.feed_parent-row .user_details-colmn .post_date {
  font-size: 13px;
  font-weight: 300;
  color: #7e7e7e;
}

.feed_parent-row .feed_action-wrapper {
  width: 100%;
  padding: 20px 0px;
  border-top: 1px solid #eaeaea;
  margin-top: 15px;
}
ul.feed_group-btn {
  width: 100%;
  display: flex;
}
ul.feed_group-btn li {
  position: relative;
  padding: 0px 0px 0px 30px;
  margin-right: 40px;
}
ul.feed_group-btn li.align-right {
  margin-left: auto;
  margin-right: 0px;
}
ul.feed_group-btn li .icon {
  position: absolute;
  width: 25px;
  left: 0px;
  top: -4px;
}
ul.feed_group-btn li a {
  color: var(--draft-text);
}

.feed_comment_field .user_pro-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  justify-content: space-between;
  align-items: center;
}
.feed_comment_field .user_comment-colmmn {
  display: flex;
  height: 50px;
  border: 1px solid #dcdcdc;
  flex: 1;
  border-radius: 30px;
  align-items: center;
  padding: 3px;
  justify-content: space-between;
}
.feed_comment_field .user_comment-colmmn .comment_field {
  width: 70%;
  height: 42px;
  font-weight: 300;
  font-size: 14px;
  background-color: transparent;
  border: 0px;
  margin-left: 20px;
}
.feed_comment_field .button_wrapper {
  display: flex;
  justify-content: space-between;
}
.feed_comment_field .button_wrapper .attachment_wraper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.attachment_wraper .attachemnt_file {
  background: url(../images/attachemnt-icon.svg) no-repeat;
  width: 30px;
  height: 30px;
  border: 0px;
  cursor: pointer;
  margin: 14px 0px 0px;
}

.attachment_wraper input[type="file"] {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.feed_comment_field .button_wrapper .btn_submit {
  background: url(../images/send-btn.png) no-repeat;
  width: 42px;
  height: 42px;
  background-size: cover;
  border: 0px;
  outline: 0px;
  margin-top: 4px;
}
.feed_comment_field .button_wrapper .emoji_btn {
  background: url(../images/emoji.svg) no-repeat;
  width: 25px;
  height: 25px;
  background-size: cover;
  border: 0px;
  outline: 0px;
  margin: 14px 15px 0px;
}

.feed_top-border {
  border-top: 1px solid #eaeaea;
}
.comment_author-parent {
  padding: 0.5rem 1.5rem;
}
.feed__reply-row {
  display: flex;
  width: 100%;
  margin: 15px 0px;
}
.feed__reply-row .user__profile {
  width: 50px;
  height: 50px;
  overflow: hidden;

  margin-right: 10px;
}
.feed__reply-row .user__profile img {
  border-radius: 50%;
}
.feed__reply-row .user_reply-colmn {
  width: 100%;
  padding: 15px;
  background-color: #f5f8fc;
  border-radius: 10px;
}
.feed__reply-row .user_reply-colmn .user_title {
  font-weight: 600;
  font-size: 15px;
  margin: 0px 0px 10px 0px;
  color: var(--secondary-text-color);
  position: relative;
}

.user_reply-colmn .user_title .post_time {
  font-size: 13px;
  font-weight: 500;
  color: #a7a7a7;
  position: relative;
  padding-left: 10px;
}
.user_reply-colmn .user_title .post_time:after {
  content: "";
  width: 8px;
  height: 1px;
  background: #a7a7a7;
  position: absolute;
  top: 7px;
  left: 0px;
}
.comment_author-child {
  padding: 0.2rem 0rem 1.5rem 3.7rem;
}
.show_reply-wraper {
  display: none;
}
.show_reply-wraper.active {
  display: block;
}
.btn_replies.fade__in {
  color: var(--draft-text);
}
.pet_portfiolio-slide {
  margin-bottom: 20px;
}
.pet_portfiolio-slide img {
  border-radius: 10px;
}
.petImageScroll .owl-dots {
  margin-top: -30px !important;
  position: relative;
  z-index: 2;
}
.pet_profile-side-row {
  width: 100%;
  padding: 10px 0px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 10px;
}
.pet_profile-side-row:last-child {
  border-bottom: 0px;
}
.pet_profile-side-row .title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--secondary-text-color);
}
.pet_history .pet_name {
  font-weight: 500;
  font-size: 1.25rem;
  font-weight: 600;
}
.pet_history .pet_name .status {
  font-size: 14px;
  font-weight: 300;
  padding: 5px 20px;
  border-radius: 50px;
  color: #7e7e7e;
  border: 1px solid #dddddd;
}

ul.pet_specific-list {
  display: flex;
  justify-content: center;
  margin: 0px -4px 10px;
  flex-wrap: wrap;
}
ul.pet_specific-list li {
  display: flex;
  padding: 0px 4px;
  flex-wrap: wrap;
  flex: 0 0 25%;
  width: 25%;
}
.pet_specific-list .pet_spec-block {
  width: 100%;
  padding: 10px 12px;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 15px;
  height: 100%;
}
.pet_specific-list .pet_spec-block .spec_title {
  color: var(--completed-text);
  margin-bottom: 15px;
  font-size: 0.9rem;
}
.pet_specific-list .pet_spec-block .spec_value {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0px;
}
.pet_specific-list .pet_spec-block .spec_unit {
  color: var(--draft-text);
  font-size: 0.8rem;
}

ul.pet_birth-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul.pet_birth-list li .brth_date {
  color: var(--draft-text);
  font-weight: 500;
}
ul.pet_vacine-list {
  width: 100%;
  margin-top: 12px;
}
ul.pet_vacine-list li {
  width: 100%;
  margin: 6px 0px;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
}
ul.pet_vacine-list li .vacine_cate {
  position: relative;
  padding-left: 35px;
  font-size: 1rem;
  font-weight: 600;
}
ul.pet_vacine-list li .vacine_date .time {
  margin: 0px;
  font-size: 1rem;
  color: var(--secondary-text-color);
  font-weight: 600;
}
ul.pet_vacine-list li .vacine_date .fulldate {
  color: var(--draft-text);
  font-weight: 300;
  font-size: 0.85rem;
}
ul.pet_vacine-list li .vacine_cate .icon {
  position: absolute;
  width: 35px;
  left: 0px;
  top: -7px;
}

.pet_owner-sideBar {
  padding: 0px;
  box-shadow: none;
  margin: 0px;
}
.pet_owner-sideBar .booking_card-head {
  padding-top: 10px;
  margin-bottom: 10px;
}
.booking_action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.booking_tab-list {
  margin-right: 10px;
}
.booking_tab-list .tab_view-data {
  background: #f5f5f5;
  border: 0px;
  overflow: hidden;
}
.booking_tab-list .tab_view-data li.active-menu {
  border-radius: 0px;
}
.booking_tab-list .tab_view-data li a {
  height: 50px;
  padding: 15px 10px;
  font-size: 20px;
}
.connect_google-btn,
.connect_google-btn:hover {
  margin-left: 10px;
  box-shadow: var(--drop-shadow-colmn);
  color: var(--primary-text-color);
  padding: 14px 10px 14px 40px;
  border-radius: 8px;
  font-size: 14px;
  position: relative;
  text-wrap: nowrap;
}
.connect_google-btn .icon {
  position: absolute;
  width: 30px;
  left: 5px;
}
.footer {
  width: 100%;
  padding: 10px 0px 6px;
  background: #f2f2f2;
  margin-top: auto;
}

.footer p {
  font-size: 0.8rem;
  margin: 0px;
  color: var(--secondary-text-color);
}
.footer_nav ul {
  display: flex;
  justify-content: flex-end;
  margin: 0px;
}

.footer_nav ul li {
  padding: 0px 8px;
  border-left: 1px solid var(--draft-text);
  line-height: 14px;
  margin: 0px;
}
.footer_nav ul li:first-child {
  border-left: none;
}
.footer_nav ul li a {
  font-size: 0.8rem;
  color: var(--secondary-text-color);
  font-weight: 300;
}

.submit_filter {
  margin-top: 20px;
  display: none;
}
body.modal-open .modal {
  /* display: flex;
  height: 100%; */
  padding: 0.5rem;
}

body.modal-open .modal .modal-dialog {
  border: 0px;
}
.modal-dialog .modal-content {
  border: 0px;
}
.app__modal .modal-body {
  padding: 0px;
}

.app__modal .modal-header {
  border: 0px;
}
.app__modal.modal.fade .modal-dialog {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.app__modal.modal.fade.show .modal-dialog {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.user_profile-parent {
  width: 100%;
  display: flex;
  align-items: center;
}
.user_profile-parent .user_prof-colmn {
  display: flex;
  align-items: center;
}
.user_profile-parent .user_prof-colmn .prof_img {
  width: 130px !important;
  height: 130px;
  overflow: hidden;
}
.user_prof-colmn .prof_img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user_profile-parent .user_prof-colmn .prof-content {
  margin: 0px 15px;
}

.user_profile-parent .user_prof-colmn .twitter_update {
  margin: 0px 15px;
  border-left: 1px solid #a7a7a7;
  padding-left: 15px;
}
.user_prof-colmn .prof-content .location {
  margin-bottom: 6px;
}
.user_prof-colmn .prof-content .location .icon {
  color: #5f237d;
  font-size: 1rem;
}
.social_comment img {
  width: 17px;
}

.social-icons i {
  color: white;
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.social-icons i:hover {
  transform: scale(1.1);
  color: #dddddd;
}


ul.twiter_trigger {
  display: flex;
  margin-top: 12px;
}
ul.twiter_trigger li {
  padding: 0px 5px;
  border-left: 1px solid #bdbbbb;
  font-size: 15px;
  color: var(--navigate-color);
}
ul.twiter_trigger li:nth-child(1) {
  border-left: 0px;
  padding-left: 0px;
  color: #db5b52;
}

ul.profile_short-dtls {
  display: flex;
  margin: 10px 0px 20px;
}
ul.profile_short-dtls li {
  text-align: center;
  padding-right: 30px;
  /* border-left: 1px solid #c2c2c2; */
  position: relative;
}
ul.profile_short-dtls li:after {
  content: "";
  width: 1px;
  height: 100%;
  background: #e6e3e3;
  position: absolute;
  right: 15px;
  top: 3px;
}

ul.profile_short-dtls li:last-child:after {
  background: none;
}
ul.profile_short-dtls li .value {
  display: block;
  font-weight: 600;
  font-size: 1.15rem;
  position: relative;
}
ul.profile_short-dtls li .icon img {
  width: 18px;
  position: absolute;
  top: 3px;
}
ul.profile_short-dtls li .type {
  color: var(--draft-text);
  font-weight: 400;
  font-size: 0.9rem;
}
.twitter_update .call_us {
  margin-top: 15px;
  display: inline-block;
  font-weight: 600;
  color: var(--completed-text);
  position: relative;
  margin-bottom: 10px;
  padding-left: 40px;
}
.twitter_update .call_us .icon {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #f4ebf9;
  position: absolute;
  top: -3px;
  left: 0px;
  text-align: center;
}
/* ---------My Booking Modal----------- */
.myBooking_wraper .modal-header {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 1rem 2rem;
}
.myBooking_wraper .modal-body {
  padding: 0px;
  overflow: hidden;
  border-radius: 10px;
}
.myBooking_wraper .user_details-wrap {
  width: 100%;
  padding: 1rem 2rem;
  background: #f9f2ff;
  margin-bottom: 15px;
}
.myBooking_wraper .user_details-wrap .profile_details {
  display: flex;
  align-items: center;
}
.user_details-wrap .profile_details .profile_img {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  min-height: 10px;
}
.user_details-wrap .profile_details .profile_content {
  margin-left: 10px;
}
.user_details-wrap .profile_details .profile_content .user_name {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-text-color);
  margin-bottom: 5px;
}
.user_details-wrap .profile_details .profile_content .user_address {
  margin-bottom: 0px;
  font-weight: 300;
  font-size: 13px;
  position: relative;
  padding-left: 23px;
}
.profile_content .user_address .icon {
  color: var(--completed-text);
  font-size: 18px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.user_details-wrap .id_details {
  text-align: right;
}
.user_details-wrap .id_details .book_id {
  font-size: 14px;
}

.step_progress-wraper {
  width: 100%;
}
.step_progress-wraper .card-footer {
  background-color: #f9f2ff;
  display: flex;
  justify-content: flex-end;
}
.step_wraper-row {
  display: flex;
  flex-wrap: wrap;
}
.step_wraper-row .step_navigation {
  flex: 0 0 auto;
  width: 30%;
  padding: 1.45rem 1.7rem;
}

.step_wraper-row .step_content-wraper {
  flex: 0 0 auto;
  width: 70%;
  border-left: 1px solid #e7e5e5;
  overflow: hidden;
  position: relative;
}

.field_group-wrapper {
  width: 100%;
}
.pet_booking_title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--primary-text-color);
  text-transform: uppercase;
}
.bullet_tag {
  color: #7e7e7e;
  font-size: 0.9rem;
  font-weight: 400;
  position: relative;
  padding-left: 15px;
  display: inline-block;
}
.bullet_tag_active {
  color: green;
  font-size: 0.9rem;
  font-weight: 400;
  position: relative;
  padding-left: 15px;
  display: inline-block;
}
.bullet_tag::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b1adad;
  position: absolute;
  left: 0px;
  top: 3px;
}

.link_secondary,
.link_secondary:hover {
  color: var(--navigate-color);
}
.link_primary,
.link_primary:hover {
  color: var(--completed-text);
  font-size: 0.9rem;
}

.custom_file-upload .field_title {
  padding: 4px;
  background: #fff;
  font-size: 0.9rem;
  color: #858585;
}
.form_label-row {
  width: 100%;
  min-height: 55px;
  padding: 15px 15px;
  border: 1px solid #cecbcb;
  border-radius: 8px;
  margin-bottom: 15px;
  position: relative;
}

.form_label-row-alt {
  width: 100%;
  min-height: 55px;
  padding: 0px 15px;
  border: 1px solid #cecbcb;
  border-radius: 8px;
  margin-bottom: 30px;
  position: relative;
}
.form_label-row-alt .field_title-alt {
  position: absolute;
  padding: 4px;
  background: #fff;
  top: -15px;
  left: 0px;
  font-size: 0.9rem;
  color: #858585;
}
.form_label-row-alt .error_mssg {
  font-size: 12px;
  font-weight: 300;
  color: #b80c0c;
  display: none;
  margin-top: 12px;
}
.error_text{
  color: #b80c0c;
  margin-top: 12px;
}
.warning_text {
  color: #ff9900;  /* warning orange */
  margin-top: 12px;
}
.field_colmn-wrap-alt {
  width: 100%;
  position: relative;
  min-height: 55px;
}
.field_colmn-wrap-alt .form__field-alt {
  width: 100%;
  font-weight: 400;
  font-size: 0.95rem;
  min-height: 55px;
}
.field_colmn-wrap-alt .date_pick {
  background: url(../images/icon_calendar-grey.png) no-repeat;
  background-size: 21px;
  background-position: 100%;
}

.form_label-row-sml {
  min-height: 45px;
  height: 45px;
  padding: 10px 15px;
  margin-left: 25px;
}
.message_field-row {
  height: 120px;
}
.message_field-row .text_area {
  width: 100%;
  height: 90px;
  outline: 0px;
}
.form_label-row .field_title {
  position: absolute;
  padding: 4px;
  background: #fff;
  top: -29px;
  left: 0px;
  font-size: 0.9rem;
  color: #858585;
}
.form_label-row .error_mssg {
  font-size: 12px;
  font-weight: 300;
  color: #b80c0c;
  display: none;
  margin-top: 12px;
}

.single_field-row {
  width: 100%;
  margin-bottom: 40px;
  position: relative;
}
.single_field-row .title {
  font-size: 0.9rem;
  color: #858585;
  margin-bottom: 5px;
}
.single_field-row .week_days {
  display: flex;
  border: 1px solid #cecbcb;
  border-radius: 8px;
  align-items: center;
  overflow: hidden;
}
.single_field-row .week_days .w-day {
  height: 55px;
  border-right: 1px solid #cecbcb;
  flex: 1;
  padding: 5px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.single_field-row .week_days .w-day:last-child {
  border-right: 0px;
}
.single_field-row .week_days .w-day.active {
  background: #e4f6e6;
}
.field_colmn-wrap {
  width: 100%;
  position: relative;
}

.field_colmn-wrap .radio_field_title {
  display: block;
  font-size: 0.9rem;
  color: #858585;
}

.field_colmn-wrap .field_unit {
  position: absolute;
  padding: 4px 4px 4px 10px;
  background: #fff;
  top: -4px;
  right: 2px;
  font-size: 0.9rem;
  color: #858585;
  border-left: 1px solid #c3c2c2;
}

.field_colmn-wrap .form-check {
  float: left;
  margin-right: 20px;
}

.field_colmn-wrap .form__field {
  width: 100%;
  font-weight: 400;
  font-size: 0.95rem;
}

.field_colmn-wrap .data_select-opt {
  width: 100%;
  background: url(../images/field_arrow.svg) no-repeat;
  background-size: 21px;
  background-position: 100%;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

.field_colmn-wrap .date_pick {
  background: url(../images/icon_calendar-grey.png) no-repeat;
  background-size: 21px;
  background-position: 100%;
}

.field_colmn-wrap .time_pick {
  background: url(../images/time_icon.png) no-repeat;
  background-size: 21px;
  background-position: 100%;
}

.form__group-wrap {
  width: 100%;
  margin-bottom: 10px;
}
.form__group-wrap .field__title {
  font-size: 1rem;
  font-weight: 600;
}
.form__group-wrap .form__control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #cecbcb;
  border-radius: 8px;
}
.form__group-wrap .form__control-select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #cecbcb;
  border-radius: 8px;
  background: url(../images/field_arrow.svg) no-repeat;
  background-size: 21px;
  background-position: 90%;
  -webkit-appearance: none;
  appearance: none;
}
.bg_field {
  background-color: #f4f4f4;
}
.form__group-wrap .form__control-textarea {
  width: 100%;
  height: 100px;
  padding: 15px 15px;
  border: 1px solid #cecbcb;
  border-radius: 8px;
}
.form__group-wrap .error_mssg {
  font-size: 12px;
  font-weight: 300;
  color: #b80c0c;
  display: none;
  margin-top: 12px;
}
.form__group-wrap ::placeholder {
  color: #c9c9c9;
  font-weight: 300;
}

.form__group-wrap ::-ms-input-placeholder {
  color: #c9c9c9;
  font-weight: 300;
}
ul.add_vaccine-list {
  display: flex;
  margin-bottom: 30px;
  justify-content: space-between;
}

ul.add_vaccine-list li {
  color: var(--draft-text);
  font-size: 1rem;
}
ul.add_vaccine-list li a {
  color: var(--navigate-color);
}

.pet_file-upload {
  width: 100%;
}
.pet_file-upload .title {
  font-size: 1rem;
  display: block;
}

.pet_upload-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  background: #f1f1f1;
  outline: 1px dashed #a7a7a7;
  outline-offset: 5px;
  border-radius: 10px;
  margin: 15px 0px 0px 5px;
}
.pet_upload-btn img {
  margin-bottom: 15px;
}

.btn__pet {
  border: 0px;
  color: gray;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  background: transparent;
}

.pet_upload-btn input[type="file"] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.bg_light-f {
  background-color: #f3f3f3;
}
.footer_model {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e6e6e6;
}
/* .myBooking_wraper {
  overflow: hidden;
} */
.myBooking_wraper .modal__footer {
  width: 100%;
  padding: 0.5rem 0.5rem;
  background: #f9f2ff;
  bottom: 0px;
  height: 60px;
}
ul.myBooking_step-nav {
  width: 100%;
  position: relative;
}
ul.myBooking_step-nav::before {
  content: "";
  width: 2px;
  height: 95%;
  position: absolute;
  background: #e7e5e5;
  left: 19px;
  top: 2px;
}

ul.myBooking_step-nav li {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  margin-bottom: 50px;
}
/* ul.myBooking_step-nav li::before {
  content: "";
  width: 2px;
  height: 100%;
  position: absolute;
  background: var(--draft-text);
} */
ul.myBooking_step-nav li .counter {
  width: 40px;
  height: 40px;
  background: #e3e3e3;
  line-height: 40px;
  position: relative;
  border-radius: 50%;
  text-align: center;
  color: var(--primary-text-color);
  font-weight: 600;
  margin-right: 10px;
}
ul.myBooking_step-nav li.active .counter {
  background-color: var(--completed-text);
  color: #fff;
}
ul.myBooking_step-nav li.complete .counter {
  background-color: #4eac2d;
  color: #fff;
}
ul.myBooking_step-nav li.complete .counter::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #4eac2d;
  left: 0px;
}
ul.myBooking_step-nav li.complete .counter::after {
  content: "";
  position: absolute;
  border-bottom: 2px solid #fff;
  z-index: 2;
  width: 10px;
  height: 15px;
  border-right: 2px solid #fff;
  left: 16px;
  top: 10px;
  transform: rotate(45deg);
}
ul.myBooking_step-nav li .counter_info .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-text-color);
  margin: 0px;
}
ul.myBooking_step-nav li .counter_info .sub_title {
  font-size: 13px;
  font-weight: 300;
  color: var(--draft-text);
}
.myBooking_step-row {
  position: relative;
  /* overflow-y: auto;
  overflow-x: hidden; */
}
.myBooking_step-row:not(:first-of-type) {
  display: none;
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 8px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;

  /*stacking fieldsets above each other*/
  position: relative;
}
#msform fieldset:not(:first-of-type) {
  display: none;
}
.myBooking_step-row.step_padding {
  padding: 0px 30px;
}
.myBooking_step-row .field__body {
  width: 100%;
  /* height: 700px; */
  overflow-y: auto;
  overflow-x: hidden;
}
/* @media (max-width: 450px){
  .myBooking_step-row .field__body {
    height: 55vh;
  }
} */
.field_footer {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.pet_selection-row {
  /* padding-top: 40px; */
  padding-top: 20px;
  text-align: center;
}
.pet_selection-row .add_pets-btn {
  color: var(--completed-text);
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.pet_thumb_anchor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pet_thumb_anchor .pet_colmn {
  padding: 20px 40px 5px;
  margin: 10px 10px;
  border-radius: 5px;
  text-align: center;
  position: relative;
  flex: 0 0 28%;
}
.pet_thumb_anchor .pet_colmn.active {
  border: 2px solid var(--completed-text);
}
.pet_thumb_anchor .pet_colmn:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--completed-text);
  border: 2px solid #fff;
  color: #fff;
  top: -18px;
  right: -12px;
  display: none;
}
.pet_thumb_anchor .pet_colmn:after {
  content: "";
  position: absolute;
  border-bottom: 2px solid #fff;
  z-index: 2;
  width: 8px;
  height: 12px;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  top: -11px;
  right: -1px;
}
.pet_thumb_anchor .pet_colmn .pet_name {
  font-size: 1rem;
  margin: 5px 0px;
  color: var(--primary-text-color);
}
.pet_colmn .pet_name .pet_var {
  display: block;
  font-size: 12px;
  margin: 5px 0px 0px;
}
.pet_services-row {
  width: 100%;
}
.pet_service_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pet_service_header .pet_title {
  font-size: 1rem;
}
.pet_service_header .pet_title span {
  font-size: 0.85rem;
  font-weight: 300;
}

.pet_service_header .bg_light-search {
  background-color: #fff;
  border: 1px solid #e9e9e9;
}
.pet_services-row .service_colmn-block {
  width: 100%;
  padding: 0.75rem;
  border-radius: 5px;
  border: 1px solid #e9e9e9;
  display: flex;
  align-items: center;
  margin: 10px 0px;
  position: relative;
}
.pet_services-row .service_colmn-block.active {
  border: 1px solid var(--completed-text);
  background-color: #f2e5fd;
}
.pet_services-row .service_colmn-block.active:after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 1;
  background: var(--completed-text);
  right: -1px;
  top: -8px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.pet_services-row .service_colmn-block.active::before {
  content: "";
  position: absolute;
  border-bottom: 2px solid #fff;
  z-index: 2;
  width: 8px;
  height: 12px;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  top: -2px;
  right: 9px;
}
.pet_services-row .service_colmn-block .pet_image {
  width: 110px;
  margin-right: 15px;
}
.service_colmn-block .pet_image img {
  border-radius: 5px;
}

.pet_services-row .service_colmn-block .service_details {
  width: 80%;
}
.service_colmn-block .service_details .title {
  font-size: 1rem;
}
.service_colmn-block .service_details p {
  margin: 0px;
}

.booking_order-thumb {
  background: #fafafa;
  padding: 1rem;
  border: 1px solid #dedede;
  border-radius: 5px;
  box-shadow: var(--drop-shadow-colmn-3);
}

.booking_order-thumb .pet_name {
  font-size: 1.15rem;
  font-weight: 600;
}
.booking_order-thumb .pet_vacs {
  margin: 0px;
  font-weight: 500;
  color: var(--draft-text);
}
.booking_order-thumb .order_id {
  display: block;
  color: var(--navigate-color);
  font-weight: 300;
  font-size: 0.9rem;
}
.booking_order-thumb .order_address {
  display: block;
  position: relative;
  color: var(--draft-text);
  font-size: 0.9rem;
  font-weight: 400;
  padding-left: 21px;
  margin: 10px 0px;
}
.booking_order-thumb .order_address .icon {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 19px;
}
.booking_order-thumb .order_value-block {
  padding-top: 10px;
  border-top: 1px solid #dedede;
}
.booking_order-thumb .order_value-block .list_amount {
  display: block;
  margin: 4px 0px;
  font-size: 0.9rem;
}
.booking_order-thumb .total_value {
  font-weight: 500;
}
.booking_order-thumb .total_value .total_amount {
  font-weight: 600;
  color: var(--navigate-color);
}

.booking_order-thumb .order_date {
  font-weight: 300;
  font-size: 0.8rem;
  text-wrap: nowrap;
}
.border-top {
  border-top: 1px solid #e6e6e6;
}
.mrg-l-auto {
  margin-left: auto;
}
.booking_paymet-list h5 {
  font-weight: 600;
  margin: 8px 0px;
}
.booking_paymet-list .pay_status-dtls {
  position: relative;
  margin-bottom: 10px;
  justify-content: space-between;
}
.booking_paymet-list .pay_status-dtls .status_paid {
  padding: 5px 12px;
  background: #50b15b;
  color: #fff;
  border-radius: 5px;
}
.booking_paymet-list .pay_status-dtls .status_pending {
  padding: 5px 12px;
  background: #894eac;
  color: #fff;
  border-radius: 5px;
}
.booking_paymet-list .total_pan {
  /* margin-top: 15px; */
  padding-top: 10px;
  border-top: 1px solid #e1dbcb;
}
.payCard_grid-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0px -10px;
}
.payCard_select {
  position: relative;
  flex: 0 0 50%;
  padding: 10px 10px;
}
.card_wrap-parent {
  background-color: #fafafa;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  padding: 0.5rem;
  display: flex;
}
.payCard_select.active .card_wrap-parent {
  border: 1px solid #ead9f4;
  background: #fbf4ff;
}
.payCard_select .radio_btn {
  position: absolute;
  right: 30px;
  top: 20px;
}
.payCard_select.active .radio_btn {
  accent-color: var(--completed-text);
}

.payCard_select .card_thumb {
  width: 60px;
}
.payCard_select .card_details {
  margin-left: 10px;
}
.payCard_select .card_details .card_no {
  font-size: 1rem;
  font-weight: 600;
}
.payCard_select .card_details .exp_date {
  font-size: 0.9rem;
  color: var(--draft-text);
  margin-bottom: 15px;
}
.payCard_select ul {
  justify-content: space-between;
}
.payCard_select ul li {
  font-size: 0.75rem;
}
.form__control {
  width: 100%;
  margin: 15px 0px;
}
.form__control .title {
  font-size: 0.85rem;
  color: var(--draft-text);
  margin-bottom: 4px;
}
.form__control .field__control {
  width: 100%;
  padding: 8px 10px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #f1f1f1;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
}
.form__control .field__control.card_field {
  background: url(../images/payment_card.png) no-repeat;
  background-position: 97%;
}
.form__control .field__control.cvc_field {
  background: url(../images/cvc.png) no-repeat;
  background-position: 97%;
}
.user_profile ul.tab_view-data {
  background: transparent;
  border-radius: 0px;
  background: transparent;
  border-radius: 0px;
  width: 100%;
  justify-content: flex-start;
  border-left: 0px;
  border-right: 0px;
}
.user_profile ul.tab_view-data li.active-menu {
  background: transparent;
}
.user_profile ul.tab_view-data li a {
  padding: 15px 15px;
}
.user_profile ul.tab_view-data li.active-menu a {
  color: var(--navigate-color);
  border-bottom: 1px solid var(--navigate-color);
}

.user_profile ul.tab_view-data li.active-menu a .icon-about {
  background: url(../images/aboutme-hover.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-size: 18px;
  background-position: 100%;
}
.user_profile ul.tab_view-data li a .icon-about {
  background: url(../images/aboutme-active.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-size: 18px;
  background-position: 100%;
}

.user_profile ul.tab_view-data li.active-menu a .icon-pet {
  background: url(../images/pet-active.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-size: 18px;
  background-position: 100%;
}
.user_profile ul.tab_view-data li a .icon-pet {
  background: url(../images/pet-deactive.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-size: 18px;
  background-position: 100%;
}
.user_profile ul.tab_view-data li.active-menu a .icon-reviews {
  background: url(../images/reviews-deactive.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-size: 18px;
  background-position: 100%;
}
.user_profile ul.tab_view-data li a .icon-reviews {
  background: url(../images/reviews-active.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-size: 18px;
  background-position: 100%;
}
.user_profile ul.tab_view-data li.active-menu a .icon-service {
  background: url(../images/service-active.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-size: 18px;
  background-position: 100%;
}
.user_profile ul.tab_view-data li a .icon-service {
  background: url(../images/service-deactive.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-size: 18px;
  background-position: 100%;
}
ul.grid_list {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
ul.grid_list li {
  padding: 0px 5px;
  border-left: 1px solid #bdbbbb;
}
ul.grid_list li a {
  color: var(--primary-text-color);
}
ul.grid_list li:nth-child(1) {
  border-left: 0px;
}
ul.grid_list li span {
  font-weight: 600;
  color: var(--primary-text-color);
}
.colmn_block-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--primary-text-color);
}
.account_setting-row {
  margin: 20px 0px;
  border-radius: 15px;
}
.setting_bar-wrap {
  padding: 15px 15px;
}
.account_setting-row .setting_inner-sidebar {
  border-radius: 10px;
}
#user_settings-tab {
  width: 100%;
  padding: 10px 15px;
  position: relative;
}
#announcementModal .modal-dialog {
  max-width: 60%; /* Adjust the width as needed */
}
#user_settings-tab li {
  width: 100%;
  box-shadow: var(--drop-shadow-colmn-3);
  border-left: 4px solid transparent;
  border-radius: 10px;
  margin: 12px 0px;
}

#user_settings-tab .tab_row {
  display: flex;
  align-items: center;
  padding: 15px;
}
#user_settings-tab li.tab_active {
  border-left: 4px solid var(--navigate-color);
  box-shadow: var(--drop-shadow-colmn-2);
}
#user_settings-tab .tab_row .icon {
  max-width: 40px;
}
#user_settings-tab .tab_row .tab_info-colmn {
  padding-left: 15px;
  width: 100%;
}

#user_settings-tab .title {
  font-weight: 600;
  color: var(--primary-text-color);
  margin-bottom: 5px;
}
#user_settings-tab .sub_title {
  color: var(--draft-text);
  margin-bottom: 0px;
}

.setting_content-row {
  width: 100%;
  position: relative;
  padding: 15px;
}
.setting_content-row .inner_wrap-col {
  width: 100%;
  position: relative;
}
.setting_content-row .inner_wrap-col .set_content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.setting_content-row .notification_row {
  width: 100%;
  padding: 10px 0px;
  border-top: 1px solid #eaeaea;
}
.notification_row .notification_content {
  width: 85%;
}
.notification_row .notification_content.lf-space {
  position: relative;
  padding-left: 30px;
}
.notification_content.lf-space .icon {
  position: absolute;
  left: 0px;
}
.notification_content .title {
  color: var(--primary-text-color);
}

.notification_row .btn_trigger .btn_title {
  font-size: 0.8rem;
  font-weight: 300;
  margin-left: 5px;
}

.btn_trigger .action__btn {
  display: flex;
  align-items: center;
  margin: 12px 0px;
}

.toggle_btn[type="checkbox"] {
  position: relative;
  width: 40px;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--draft-bg);
  outline: none;
  border-radius: 2rem;
  cursor: pointer;
}

.toggle_btn[type="checkbox"]::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
}

.toggle_btn[type="checkbox"]:checked::before {
  transform: translateX(100%);
  background: #fff;
}

.toggle_btn[type="checkbox"]:checked {
  background: var(--completed-text);
}
.setting_content-row .inner_wrap-col .set_content-footer {
  width: 100%;
  padding: 20px 0px;
  border-top: 1px solid #eaeaea;
  display: flex;
  justify-content: flex-end;
}
.sidebar_profile-row {
  position: relative;
  padding: 0px 15px;
}
.coupon_template-colmn {
  width: 100%;
  padding: 15px 10px 15px 65px;
  border-radius: 5px;
  background: #fafafa;
  border: 1px solid #f1f1f1;
  margin: 0px 0px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.coupon_template-colmn .coup_id {
  font-size: 1.25rem;
}
.coupon_template-colmn .icon {
  width: 55px;
  height: 55px;
  text-align: center;
  line-height: 53px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e3e3e3;
  position: absolute;
  left: 10px;
}
.coupon_template-colmn .content_colmn {
  width: 70%;
  padding-left: 10px;
}
.coupon_template-colmn .dis_value {
  color: #7e7e7e;
}
.coupon_template-colmn .btn_remove {
  text-transform: uppercase;
  color: var(--navigate-color);
}
.sidebar_profile-row .avatar_user-block {
  background: #f5f5f5;
  padding: 25px 15px 80px;
  border-radius: 10px;
  text-align: center;
}
.avatar_image {
  width: 200px;
  height: 200px;
  position: relative;
  border: 5px solid #fff;
  border-radius: 50%;
  overflow: hidden;
}

.avatar_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none; /* Disable pointer events on the image */
}

.avatar_image .upload_profile {
  position: absolute;
  right: 20px; /* Adjust the value as needed */
  bottom: 15px;
}

.avatar_image .upload_profile .btn {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: var(--navigate-color) url(../images/edit.png) no-repeat;
  background-position: 50% 50%;
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(241, 178, 1, 0.3);
}

.avatar_image .upload_profile input[type="file"] {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
  width: 40px;
  height: 44px;
}

.avatar_user-block .location {
  font-size: 0.9rem;
  font-weight: 300;
  margin-bottom: 15px;
  display: block;
  color: var(--draft-text);
}
.avatar_user-block .location .icon {
  color: var(--completed-text);
  font-size: 18px;
  padding-right: 3px;
}
.add_discount-check {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.15rem;
}
.discount_check {
  border: 1px solid var(--completed-text);
}
.discount_check:checked {
  background-color: var(--completed-text);
  border-color: var(--completed-text);
}
.profile_setting-toggle {
  display: none;
}

ul.payment_tab-link {
  width: 100%;
  background: transparent;
  border: 0px;
  border-radius: 0px;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: flex-start;
}

ul.payment_tab-link li {
  text-transform: uppercase;
}
ul.payment_tab-link li a {
  display: block;
  color: var(--primary-text-color);
  padding: 10px 15px;
  font-size: 0.85rem;
}
ul.payment_tab-link li.active a {
  color: var(--navigate-color);
  border-bottom: 1px solid var(--navigate-color);
}

.pie_chart_block {
  width: 100%;
  border-radius: 10px;
  position: relative;
  padding: 20px 10px;
  margin-bottom: 30px;
  background-color: #fff;
  overflow: hidden;
}
.piechart {
  position: relative;
  display: inline-block;
  color: #bbb;
  text-align: center;
}
.piechart canvas {
  position: absolute;
  top: 0;
  left: 0;
}
ul.pieChart-listValue {
  display: flex;
  margin: 0px -15px;
  flex-wrap: wrap;
}
.pieChart-listValue li .paypoint {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--completed-text);
  position: absolute;
  left: 12px;
  top: 16px;
}
.pieChart-listValue li .paymentpoint {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #4eac2d;
  position: absolute;
  left: 12px;
  top: 16px;
}
.pieChart-listValue li .refundpoint {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--navigate-color);
  position: absolute;
  left: 12px;
  top: 16px;
}

ul.pieChart-listValue li {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 10px 15px 10px 33px;
  text-align: left;
  position: relative;
}
ul.pieChart-listValue li .value {
  display: block;
  color: var(--completed-text);
  font-weight: 600;
}
.payout_block {
  width: 100%;
  border-radius: 10px;
  position: relative;
  padding: 20px 10px;
  margin-bottom: 30px;
  background-color: #fff;
  overflow: hidden;
}
.payout_block .earned {
  color: #4eac2d;
  font-weight: 600;
}
.payout_block .pending {
  color: #db5b52;
  font-weight: 600;
}

.transit_search-panel .title {
  color: #a3a3a3;
  font-weight: 300;
}
.transit_search-panel .field_control {
  width: 100%;
  height: 44px;
  padding: 8px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
}
.transit_search-panel .fieldColmn {
  width: 100%;
  outline: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 300;
  border: 0px;
}

.transit_search-panel .srchBtn {
  flex: 0 0 40px;
  max-width: 40px;
  position: relative;
  outline: 0;
  border: 0px;
  background: transparent;
}

.transit_search-panel .srchBtn::after {
  content: "\e90c";
  font-family: "icomoon";
  color: #7e7e7e;
  font-size: 1.65rem;
}
.table-header {
  width: 100%;
  display: table;
  margin: 5px;
}
.row-header,
.row-body {
  display: table-row;
  border-radius: 5px;
}
.data_table-wrap .row-header .cell {
  font-size: 0.85rem;
  color: #7e7e7e;
}
.row-header .cell,
.row-body .cell {
  display: table-cell;
  padding: 5px;
  vertical-align: middle;
}
.cell.cell-width {
  width: 22%;
}
.data_table-wrap .row-body {
  box-shadow: var(--drop-shadow-colmn-3);
  margin-bottom: 5px;
}
.data_table-wrap .row-body .cell {
  font-size: 0.9rem;
  padding: 15px 8px;
}
.row-body .cell .price {
  color: var(--completed-text);
}
.row-body .cell .status {
  padding: 5px 8px;
  border-radius: 5px;
  text-align: center;
}
.row-body .cell .status.active {
  background: #e8f8e2;
  color: #4eac2d;
}
.row-body .cell .status.inactive {
  background: #f9f3e4;
  color: #f1b201;
}
.ui-timepicker-standard {
  z-index: 9999 !important;
}

.Rvt_calendar-row .alert_side-panel {
  width: 100%;
  padding: 10px;
  border: 1px solid #eeeeee;
}
.Rvt_calendar-row .alert_avail {
  background: lightgreen;
  padding: 0.5rem 0.5rem;
  margin: 0px 0px;
}
.Rvt_calendar-row .alert_notavail {
  background: hsl(0, 73%, 75%);
  padding: 0.5rem 0.5rem;
  margin: 5px 0px;
}
.Rvt_calendar-row .alert_avail .btn-close {
  padding: 0.85rem;
}
.Rvt_calendar-row .rvt_avail-calendar {
  padding: 10px;
  border: 1px solid #eeeeee;
  margin-bottom: 15px;
}
.rvt_avail-calendar .ui-datepicker {
  width: 100%;
  max-height: 600px;
  border: 0px;
}
.rvt_avail-calendar .ui-datepicker td span,
.rvt_avail-calendar .ui-datepicker td a {
  text-align: center;
  padding: 15px;
  border: 0px;
}
.rvt_avail-calendar .ui-state-default {
  background-color: #fff;
}
.rvt_avail-calendar .ui-state-default.ui-state-highlight,
.rvt_avail-calendar .ui-state-active {
  background-color: lightgreen;
}
.rvt_avail-calendar .ui-icon {
  background: url(../images/field_arrow.svg) no-repeat;
  background-size: 18px;
  background-position: 100%;
}
.rvt_avail-calendar .ui-datepicker .ui-datepicker-next {
  right: 2px;
  transform: rotate(-90deg);
  top: 1px;
}
.rvt_avail-calendar .ui-datepicker .ui-datepicker-prev {
  right: 2px;
  transform: rotate(90deg);
  top: 5px;
}
.trigger_link {
  margin-left: 15px;
  margin-bottom: 15px;
}
.trigger_link a {
  color: var(--navigate-color);
  position: relative;
  font-weight: 400;
  font-size: 0.9rem;
  display: block;
  padding-left: 25px;
}
.trigger_link a .icon {
  width: 20px;
  position: absolute;
  top: -2px;
  left: 0px;
}
.clear_avail-modal {
  position: relative;
}
.clear_avail-modal .btn-close {
  position: absolute;
  right: 9px;
  top: 17px;
}
.clear_avail-icon {
  width: 55px;
  margin-right: 15px;
}
ul.avail_status {
  width: 100%;
}
ul.avail_status li {
  position: relative;
  padding-left: 20px;
}
ul.avail_status li .avail {
  position: absolute;
  left: 0px;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #12b726;
  border: 1px solid #c7e8ca;
}
ul.avail_status li .notavail {
  position: absolute;
  left: 0px;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: hsl(0, 73%, 75%);
  border: 1px solid #edbbbb;
}
.email_notification {
  width: 100%;
  margin-bottom: 15px;
}
.email_notification input[type="radio"] {
  accent-color: var(--completed-text);
}
.email_notification .email_radio {
  width: 100%;
}
.email_notification .email_details {
  width: auto;
  padding: 10px 20px;
  margin-top: 5px;
  border-radius: 8px;
  border: 1px solid #eeee;
  display: inline-flex;
  align-items: center;
}
.email_notification .email_details .icon {
  margin-right: 8px;
}
ul.generate_step-nav {
  width: 100%;
  position: relative;
  margin-top: 50px;
}
ul.generate_step-nav::before {
  content: "";
  width: 2px;
  height: 95%;
  position: absolute;
  background: #e7e5e5;
  left: 19px;
  top: 2px;
}

ul.generate_step-nav li {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  margin-bottom: 50px;
}

ul.generate_step-nav li .counter {
  width: 40px;
  height: 40px;
  background: #e3e3e3;
  line-height: 40px;
  position: relative;
  border-radius: 50%;
  text-align: center;
  color: var(--primary-text-color);
  font-weight: 600;
  margin-right: 10px;
}
ul.generate_step-nav li.active .counter {
  background-color: var(--completed-text);
  color: #fff;
}
ul.generate_step-nav li.complete .counter {
  background-color: #4eac2d;
  color: #fff;
}
ul.generate_step-nav li.complete .counter::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--completed-text);
  left: 0px;
}
ul.generate_step-nav li.complete .counter::after {
  content: "";
  position: absolute;
  border-bottom: 2px solid #fff;
  z-index: 2;
  width: 10px;
  height: 15px;
  border-right: 2px solid #fff;
  left: 16px;
  top: 10px;
  transform: rotate(45deg);
}
ul.generate_step-nav li .counter_info .title {
  font-size: 17px;
  font-weight: 600;
  color: var(--primary-text-color);
  margin: 0px;
}
ul.generate_step-nav li .counter_info .sub_title {
  font-size: 13px;
  font-weight: 300;
  color: var(--draft-text);
}
.generate_booking-row {
  width: 100%;
  min-height: 500px;
  box-shadow: var(--drop-shadow-colmn-2);
  padding: 80px 100px;
  border-radius: 15px;
  margin-bottom: 40px;
  margin-top: 50px;
  position: relative;
}
.generate_booking-row .pet_booking_title {
  position: absolute;
  top: -35px;
  left: 0px;
}

.generate_booking-row .card-footer {
  display: flex;
  background: transparent;
  justify-content: center;
  border: 0px;
}
.pet_details-field-row .add_field_button,
.pet_details-field-row .add_field_button:hover {
  width: 23px;
  height: 23px;
  display: block;
  text-align: center;
  line-height: 23px;
  background: var(--navigate-color);
  border-radius: 50%;
  color: #fff;
}
.pet_details-field-row .remove_field {
  width: 28px;
  height: 28px;
  display: block;
  background: url(../images/field_close.png) no-repeat;
  background-position: 89%;
  background-size: 15px;
}
.brd_bottom {
  border-bottom: 1px solid #e9e9e9;
}
.booking_link-card {
  width: 100%;
  display: flex;
  margin: 15px 0px;
}
.booking_link-card .icon {
  margin-right: 20px;
}
.booking_link-card .data_row .title {
  color: #a7a7a7;
  font-weight: 400;
  display: block;
}
.colmn_bg-grey {
  background-color: #f8f8f8;
  border-radius: 5px;
}

.pay_option {
  width: 100%;
  position: relative;
  margin-bottom: 20px;
  background: #fff;
  text-align: center;
}
.pay_option::before {
  content: "";
  display: block;
  width: 30%;
  height: 1px;
  background-color: #f8f8f9;
  position: absolute;
  left: 0px;
  top: 12px;
}
.pay_option::after {
  content: "";
  display: block;
  width: 30%;
  height: 1px;
  background-color: #f8f8f9;
  position: absolute;
  right: 0px;
  top: 12px;
}

.wraper_chat-board {
  /* width: 100%; */
  position: relative;
  padding: 15px;
}



.chat-sidebar__panel {
  padding: 15px;
}
.booking-detail-sidebar__panel {
  padding: 15px;
}

.chat_sidebar-inner {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.chat-sidebar__panel .chat_sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid #e9e9e9;
}
.booking-detail-sidebar__panel .chat_sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid #e9e9e9;
}


.btn_booking-dtls:focus {
  outline: 0px;
  box-shadow: none;
}
.btn_booking-dtls::after {
  border: 0px;
  background: transparent;
}
.chat-sidebar__panel .chat_sidebar-body {
  width: 100%;
  height: calc((100vh - 360px));
  overflow: hidden;
  overflow-y: auto;
}
.booking-detail-sidebar__panel .chat_sidebar-body {
  width: 100%;
  /* height: calc((100vh - 360px)); */
  overflow: hidden;
  overflow-y: auto;
}


.chat__board-inner-wrap {
  background-color: #fff;
}
.rounded-5 {
  border-radius: 10px;
}
.bg_sidebar {
  background: #fbfbfb;
}
.chat_sidebar-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #eaeaea;
  background-color: #fff;
}
.rvt_bk-chat-head {
  width: 100%;
  padding: 0px 0px;
  position: relative;
}
.W-100 {
  width: 100%;
}
ul.bk_chat-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: transparent;
  border: 0px;
  border-bottom: 1px solid #e9e9e9;
  border-radius: 0px;
}
ul.bk_chat-list li.active-menu {
  background: transparent;
}

ul.bk_chat-list li {
  padding: 15px 15px;
}
ul.bk_chat-list li.active-menu {
  border-bottom: 1px solid var(--navigate-color);
  border-radius: 0px;
}
ul.bk_chat-list li a {
  padding: 0px;
}
ul.bk_chat-list li.active-menu a {
  color: var(--navigate-color);
}

.activity-list-wrap {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
ul.list__activity {
  width: 100%;
  position: relative;
}
ul.list__activity::before {
}
ul.list__activity li {
  position: relative;
  display: flex;
  width: 100%;
  padding-bottom: 15px;
  padding-left: 25px;
}
ul.list__activity li::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: #ccc;
  position: absolute;
  top: 4px;
  left: 4px;
}
ul.list__activity li:last-child::after {
  width: 0px;
  background: transparent;
}
ul.list__activity li::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #ccc;
  position: absolute;
  border-radius: 50%;
  top: 4px;
  left: 0px;
}
.list__activity .post__date {
  width: 100px;
  font-size: 0.85rem;
  color: #a7a7a7;
}
.list__activity .post__details {
  width: 100%;
  padding-left: 15px;
}

.list__activity .post_details .post__author {
  color: var(--primary-text-color);
  font-size: 1rem;
  position: relative;
}

.list__activity .post__details .post__time {
  position: absolute;
  font-size: 0.85rem;
  color: #a7a7a7;
  right: 0px;
}
.list__activity .post__body-content {
  width: 100%;
}
.list__activity .post__body-content .poost__block {
  flex: 1;
  display: flex;
  padding: 15px;
  box-shadow: var(--drop-shadow-colmn-3);
  margin: 15px 0px;
  border: 1px solid #efefef;
}
.post__body-content .poost__block .author__image {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  margin-right: 15px;
}
.poost__block .author__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 100%;
}
.post__body-content .poost__block .author__post {
  flex: 1;
}

.chat__board-inner-wrap .main_chat-body {
  height: calc(100vh - 300px);
}
.chat_input-section {
  padding: 0.5rem 1.5rem;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 25px;
}
.chat_input-section .chat_comment-field {
  width: 100%;
  display: flex;
}
.chat_comment-field .attachment_wraper {
  position: relative;
  display: inline-block;
}
.chat_comment-field .attachment_wraper .attachemnt_file {
  background: url(../images/attachemnt-icon.svg) no-repeat;
  width: 30px;
  height: 30px;
  border: 0px;
  cursor: pointer;
  margin: 14px 0px 0px;
}

.chat_comment-field .attachment_wraper input[type="file"] {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.chat_comment-field .comment_field {
  flex: 1;
  height: 42px;
  font-weight: 300;
  font-size: 14px;
  background-color: transparent;
  border: 0px;
  margin-left: 20px;
}
.chat_comment-field .emoji_btn {
  background: url(../images/emoji.svg) no-repeat;
  width: 25px;
  height: 25px;
  background-size: cover;
  border: 0px;
  outline: 0px;
  margin: 14px 15px 0px;
}
.chat_comment-field .btn_submit {
  background: url(../images/send-btn.png) no-repeat;
  width: 42px;
  height: 42px;
  background-size: cover;
  border: 0px;
  outline: 0px;
  margin-top: 4px;
}

.content_height-wrap {
  width: 100%;
  height: calc((100vh - 220px));
  overflow: hidden;
  overflow-y: auto;
}

.cloud_uplaod {
  width: 100%;
  height: auto;
  margin: 15px 10px;
}

.uplaoded__file-block {
  width: 100%;
  margin: 15px 0px;
  border-radius: 15px;
  padding: 10px;
  box-shadow: var(--drop-shadow-colmn-3);
}
.uplaoded__file-block .file_format-icon {
  display: inline-block;
  padding: 10px;
  margin: 15px 0px;
  border-radius: 10px;
  border: 1px solid #e9e9e9;
  box-shadow: var(--drop-shadow-colmn-3);
}

.uplaoded__file-block .uploaded_file-footer {
  border-top: 1px solid #e9e9e9;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}
.uploaded_file-footer .title {
  font-size: 1rem;
  margin-bottom: 0px;
}
.uploaded_file-footer .value {
  color: #a3a3a3;
}
.trash__btn {
  background-color: #f0f0f0;
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
}
.note__list-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn_grp-act {
  border: 1px solid #f0f0f0;
  font-size: 0.95rem;
  font-weight: 400;
  border-radius: 5px;
}
ul.custom_dropdown {
  padding: 0px;
  border: 0px;
  box-shadow: var(--drop-shadow-colmn-2);
}
ul.custom_dropdown li .dropdown-item {
  font-size: 0.9rem;
  padding: 0.5rem 1.25em 0.5rem 2.25rem;
  position: relative;
}
ul.custom_dropdown li .dropdown-item .icon {
  position: absolute;
  width: 15px;
  left: 10px;
  top: 7px;
}
.note__list-colm {
  display: flex;
  margin: 10px 0px;
}

.note__list-colm .icon_date {
  width: 45px;
  height: 45px;
  display: inline-flex;
  border-radius: 100%;
  border: 1px solid #dddddd;
}
.note__list-colm .icon_date img {
  width: 100%;
  height: 100%;
  padding: 8px;
}
.note__list-colm .notes__details {
  flex: 1;
  margin-inline-start: 15px;
}
.note__list-colm .notes__details .title {
  position: relative;
  padding-right: 80px;
  line-height: 1.45rem;
}
.note__list-colm .notes__details .post_time {
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 0.9rem;
}
.notes__details .post_time img {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}
.note__list-colm .btn_notes {
  width: 38px;
  height: 38px;
  display: inline-flex;
  border-radius: 100%;
  background: #f0f0f0;
  margin-right: 10px;
}
.note__list-colm .btn_notes img {
  width: 100%;
  height: 100%;
  padding: 12px;
}
.profile_card-details {
  display: flex;
  width: 100%;
  padding: 15px;
  border-radius: 15px;
  border: 1px solid var(--navigate-color);
}
.profile_card-details .profile_img {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 1px solid #cfcfcf;
  border-radius: 50%;
  min-height: 10px;
}
.profile_card-details .profile_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile_card-details .profile_content {
  padding-left: 5px;
}
.profile_card-details .profile_content .user_name {
  font-size: 16px;
  font-weight: 500;
  color: var(--secondary-text-color);
  margin-bottom: 5px;
}
.profile_card-details .profile_content .sub_text {
  position: relative;
  font-size: 0.85rem;
  font-weight: 400;
  margin: 2px 0px;
  display: block;
  color: #4d4d4d;
  padding-left: 20px;
}
.profile_content .sub_text .icon {
  position: absolute;
  left: 0px;
}

.closeBtn {
  display: none;
}
.chat_board-sidebar {
  padding: 15px;
}

.chatBoard__inner-block {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.chatBoard__inner-block .chatBoard_sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
}
.chatBoard__inner-block .chatBoard_sidebar-body {
  width: 100%;
  height: calc((100vh - 230px));
  overflow: hidden;
  overflow-y: auto;
}

.chat_user-listBlock {
  width: 100%;
  padding: 12px 10px;
  border-radius: 8px;
  margin: 10px 0px;
  box-shadow: var(--drop-shadow-colmn-3);
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.chat_user-listBlock:hover {
  background-color: #ddd;
}
.chat_user-listBlock .chat-user-avatar {
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  margin-right: 10px;
  cursor: pointer;
}
.chat_user-listBlock .chat-user-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 100%;
}
.chat_user-listBlock .chat-user-details {
  flex: 1;
  cursor: pointer;
}
.chat_user-listBlock .chat-user-details .title {
  display: block;
  font-size: 0.85rem;
  cursor: pointer;
}
.chat_user-listBlock .chat-user-details .short_mssg {
  display: block;
  font-size: 0.75rem;
  color: var(--draft-text);
}
.chat_user-listBlock .chat-user-details .post_time {
  position: absolute;
  color: #858585;
  font-size: 0.8rem;
  right: 10px;
  top: 13px;
}
.chat_user-listBlock .chat-user-details .mssg_count {
  position: absolute;
  display: block;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 100%;
  background-color: var(--navigate-color);
  color: #fff;
  font-size: 0.8rem;
  bottom: 11px;
  right: 13px;
}
.active-chat {
  background-color: #e0e0e0; /* Grey color for active chat */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Subtle box shadow for active chat */
  color: #000; /* Change this to your desired text color for active chat */
}
.chatBoard__userFilter {
  width: 60px;
}
.chatBoard__userFilter .btn {
  padding: 0px 0px 0px 10px;
}
.chatBoard-display-wrap {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.chatBorad_inner-area li {
  display: flex;
  margin-block-end: 1rem;
}
.chatBorad_inner-area .chat_day-level {
  width: 100%;
  text-align: center;
}
.chatBorad_inner-area .chat_day-level .post-level {
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 300;
}

.chatBorad_inner-area .chat-item-start .chat-list-inner,
.chatBorad_inner-area .chat-item-end .chat-list-inner {
  /* max-width: 75%; */
  display: flex;
  align-items: top;
}
.chatBorad_inner-area .chat-item-end {
  justify-content: flex-end;
}

.chat-list-inner .chat_user-profile {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  margin-right: 15px;
}
.chat-list-inner .chat_user-profile img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 100%;
}
.chat-list-inner .chat_content-wrap {
  flex: 1;
}
.chat-list-inner .chat_content-wrap .post_time {
  font-size: 0.85rem;
  font-weight: 300;
  margin-top: 10px;
  display: block;
}
.chatBorad_inner-area .chat-item-end .post_time {
  text-align: right;
}
.chat-list-inner .text_block {
  padding: 15px;
  width: fit-content;
}

.chat-list-inner .text_block p {
  margin: 0px;
}
.chat-item-start .chat-list-inner .text_block {
  background: #fff;
  box-shadow: var(--drop-shadow-colmn-3);
  border-start-start-radius: 0;
  border-start-end-radius: 0.8rem;
  border-end-end-radius: 0.8rem;
  border-end-start-radius: 0.8rem;
}
.chat-item-end .chat-list-inner .main_chat-mssg {
  margin-right: 15px;
}
.chat-item-end .chat-list-inner .text_block {
  background-color: #894eac;
  box-shadow: var(--drop-shadow-colmn-3);
  color: #fff;
  border-start-start-radius: 0.8rem;
  border-start-end-radius: 0;
  border-end-end-radius: 0.8rem;
  border-end-start-radius: 0.8rem;
}

ul.chat_header-tigger {
  display: flex;
  align-items: center;
}
ul.chat_header-tigger li {
  margin-left: 10px;
}
ul.chat_header-tigger li:last-child {
  margin-left: 4px;
}
.chat_avatar-head {
  display: block;
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  border: 1px solid #7f55a3;
  margin-right: 15px;
}
.chat_avatar-head img {
  padding: 3px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 100%;
}
.chat_avatar-details {
  flex: 1;
}
.chat_avatar-details .title {
  display: block;
  font-size: 0.85rem;
  margin: 0px;
}
.chat_avatar-details .status {
  font-size: 0.75rem;
  color: #7e7e7e;
  margin: 0px;
}
@media (min-width: 576px) {
  .myBooking_wraper .modal-dialog {
    max-width: 1200px;
  }

  .modal_md-wrap {
    max-width: 680px;
  }
}

@media (min-width: 993px) {
  .account_setting-row {
    display: flex;
  }
}
@media (max-width: 767px) {
  .chat_avatar-head {
    width: 45px;
    height: 45px;
    margin-right: 5px;
  }
  ul.avail_status li {
    margin: 10px 0px;
  }
  .trigger_link {
    margin-left: 0px;
  }
  .sidebar_profile-row .avatar_user-block {
    height: 100%;
  }
  .profile_card-details {
    flex-direction: column;
  }
  .profile_card-details .profile_content {
    padding: 8px 0px 0px 0px;
  }
  .note__list-colm {
    flex-direction: column;
  }
  .note__list-colm .notes__details {
    margin-inline-start: 0px;
    margin-top: 10px;
  }
  .note__list-colm .notes__details .title {
    padding-right: 0px;
  }
  .note__list-colm .notes__details .post_time {
    display: block;
    position: relative;
    margin-top: 10px;
  }
  .wraper_chat-board {
    padding: 10px 0px;
  }
  .wraper_messages-board {
    padding: 10px 0px;
  }
  ul.bk_chat-list li {
    padding: 5px 10px;
  }
  ul.list__activity li {
    flex-direction: column;
    padding-left: 18px;
  }
  .list__activity .post__details {
    padding-left: 0px;
  }
  .list__activity .post__details .post__time {
    position: relative;
    display: block;
  }
  .booking_paymet-list h5 {
    font-size: 1rem;
  }
  .form_label-row-sml {
    margin-left: 0px;
  }
  .rvt_cal-footer {
    flex-direction: column;
  }
  .custom_select {
    width: 100%;
    margin: 8px 0px;
  }
  .header_bottom-nav ul {
    justify-content: center;
  }
  .header_bottom-nav ul li {
    flex: 1;
  }
  .log-index {
    order: 1;
  }

  .search-index {
    order: 3;
  }

  .icon-index {
    order: 2;
  }
  .data_card-body .title .date {
    display: block;
    float: none;
    margin-top: 20px;
  }

  ul.card_footer-list {
    flex-direction: column;
  }
  ul.card_footer-list li {
    margin-top: 8px;
  }
  ul.card_footer-list li.dismiss {
    margin-left: 0px;
    margin-top: 15px;
  }
  .hiring-paraVets-banner {
    margin-top: 15px;
  }
  .hiring-paraVets-banner .image_wrapper {
    position: relative;
    width: 100%;
  }
  ul.month_details-list {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  ul.month_details-list li {
    flex: 0 0 33.33333%;
    max-width: 33.3333%;
  }
  ul.date_avail-list {
    justify-content: flex-start;
  }
  ul.date_avail-list li {
    max-width: 20%;
    flex: 0 0 20%;
    text-align: center;
    margin: 5px 5px;
  }
  .feed_comment_field .user_pro-img {
    display: none;
  }
  ul.pet_specific-list li {
    display: flex;
    padding: 4px 4px;
    flex: 0 0 50%;
    width: 50%;
  }
  .booking_action-row {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
  }
  .connect_google-btn {
    width: 100%;
    margin: 0px 0px;
  }

  .booking_action-row .bookingSearch {
    margin: 10px 0px;
  }
  .stepper-wrapper {
    margin-bottom: 20px;
  }

  .rvt_step-name .count-value {
    font-size: 14px;
  }
  .rvt_step-name .rvt_step__name {
    font-size: 9px;
    line-height: 12px;
  }
  .rvt_profile-item .step-counter {
    width: 27px;
    height: 27px;
  }
  .rvt_profile-item.active .step-counter::before,
  .rvt_profile-item.completed .step-counter::before {
    width: 7px;
    height: 12px;
  }

  .rvt_step-name {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    height: 40px;
  }
  .user_profile-parent .user_prof-colmn {
    flex-direction: column;
  }
  .user_profile-parent .user_prof-colmn .prof_img,
  .user_profile-parent .user_prof-colmn .prof-content,
  .user_profile-parent .user_prof-colmn .twitter_update {
    width: 100%;
    text-align: center;
    margin: 4px 0px;
    border: 0px;
  }
  .user_prof-colmn .prof_img img {
    width: 150px;
  }
  .user_profile-parent {
    display: block;
  }
  ul.twiter_trigger {
    justify-content: center;
  }
  .myBooking_wraper .user_details-wrap {
    padding: 1rem;
  }

  .step_wraper-row .step_content-wraper {
    width: 100%;
    padding: 0.3rem;
  }
  .myBooking_step-row.step_padding {
    padding: 0px;
  }
  .user_details-wrap .id_details {
    text-align: left;
    margin-top: 10px;
  }
  .payCard_select {
    width: 100%;
    flex: 0 0 100%;
  }

  ul.profile_short-dtls {
    justify-content: center;
  }
  .user_profile ul.tab_view-data li a {
    padding: 15px 5px;
    text-wrap: nowrap;
  }
  ul.profile_short-dtls li .type {
    font-size: 0.75rem;
  }
  .pet_thumb_anchor .pet_colmn {
    padding: 10px 10px 5px;
    margin: 10px 10px;
    border-radius: 5px;
    text-align: center;
    position: relative;
    /* flex: 0 0 40%; */
  }
  .step_wraper-row .step_navigation {
    width: 100%;
    padding-bottom: 0px;
  }
  .generate_booking-row {
    padding: 40px 20px 50px;
  }
  .generate_booking-row .card-footer {
    padding: 0px;
  }
  ul.generate_step-nav {
    position: relative;
    display: flex;
    justify-content: center;
  }
  ul.generate_step-nav::before {
    background: transparent;
  }
  ul.generate_step-nav li {
    margin: 0px 15px;
  }
  ul.generate_step-nav li .counter_info {
    display: none;
  }

  .btn__primary-small,
  .btn__draft-small,
  .btn__primary-small:hover,
  .btn__draft-small:hover {
    padding: 10px 10px;
    font-size: 14px;
  }

  .pet_details-field-row {
    overflow-x: scroll;
  }
  ul.myBooking_step-nav {
    position: relative;
    display: flex;
    justify-content: space-between;
  }
  ul.myBooking_step-nav li .counter_info {
    display: none;
  }
  ul.myBooking_step-nav::before {
    content: "";
    width: 96%;
    height: 2px;
    position: absolute;
    background: #e7e5e5;
    left: 0px;
    top: 19px;
  }

  .add_discount-check {
    flex-direction: column;
  }
  ul.payment_tab-link li a {
    font-size: 0.8rem;
    padding: 10px 7px;
  }
  .setting_content-row .inner_wrap-col .set_content-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
  }
  .chatBorad_inner-area .chat-item-start .chat-list-inner,
  .chatBorad_inner-area .chat-item-end .chat-list-inner {
    max-width: 100%;
  }
}

@media (max-width: 992px) {
  .logo_wrap {
    border: 0px;
    width: 100px;
  }
  .main-menu .navigation > li label {
    display: none;
  }
  .main-menu .navigation > li.dropdown a {
    margin-top: 3px;
  }

  .home_left-banner {
    margin-bottom: 20px;
  }

  .singel_block-title {
    font-size: 18px;
  }
  ul.tab_view-data li a {
    padding: 10px;
  }
  ul.tab_view-data li span {
    display: none;
  }
  ul.tab_view-data li .icon {
    font-size: 16px;
  }
  .land_profile-colmn {
    margin-bottom: 15px;
  }
  .submit_filter {
    display: block;
  }
  .pet_services-row {
    width: 100%;
    padding: 0px 10px;
  }
  .field_colmn-wrap .form-check {
    margin-bottom: 30px;
  }
  .setting_bar-wrap {
    padding-left: 0px;
    padding-right: 0px;
  }
  .setting_inner-sidebar.card_shadow {
    box-shadow: none;
  }
  #user_settings-tab {
    padding: 0px;
  }

  .setting_content-row {
    padding-left: 0px;
    padding-right: 0px;
  }
  .coupon_template-colmn {
    margin-bottom: 15px;
  }
  #user_settings-tab {
    display: flex;
    flex-wrap: wrap;
  }
  #user_settings-tab .tab_row {
    padding: 10px 5px;
  }
  #user_settings-tab li {
    flex: 31%;
    max-width: 31%;
    padding: 0px 5px;
    box-shadow: none;
    display: flex;
    justify-content: center;
    border: 1px solid #f0f0f0;
    border-left: 0px;
    margin: 1%;
  }
  #user_settings-tab li.tab_active {
    box-shadow: none;
    border: 1px solid var(--navigate-color);
  }
  #user_settings-tab .tab_row .icon {
    max-width: 25px;
  }
  #user_settings-tab .tab_row {
    flex-direction: column;
  }
  #user_settings-tab .tab_row .tab_info-colmn {
    padding: 0px;
    text-align: center;
  }
  #user_settings-tab .title {
    font-size: 0.75rem;
    font-weight: 400;
    margin-top: 5px;
  }
  #user_settings-tab .sub_title {
    display: none;
  }
}

@media (max-width: 1024px) {
  .chat__board-inner-wrap .rvt_bk-chat-head {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .chatBoard_sidebar-head .btn_close {
    position: relative;
    top: 0px;
    left: 0;
  }
  .chat_user-filter {
    width: auto;
    background-image: url(../images/icon_filter.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    background-size: 90%;
    padding: 15px 15px;
    margin-right: 8px;
  }
  /* .chat__user-list {
    width: 100%;
    position: fixed;
    background: #fff;
    z-index: 9;
    left: -100%;
    top: 0px;
    height: 100%;
    padding: 0px;
    transition: linear 0.2s;
  } */
  .chat__user-list.open__user-list {
    left: 0px;
  }
  .chat__user-list .chatBoard_sidebar-body {
    height: calc(100vh - 78px);
  }
  /* .pending_request-list {
    width: 100%;
    position: fixed;
    background: #fff;
    z-index: 9;
    left: -100%;
    top: 0px;
    height: 100%;
    padding: 0px;
  } */
  .pending_request-list .chatBoard_sidebar-body {
    height: calc(100vh - 78px);
  }
  .chat-sidebar__panel .chat_sidebar-body {
    height: calc(100vh - 240px);
  }
  .booking-detail-sidebar__panel .chat_sidebar-body {
    height: calc(100vh - 240px);
  }

  .btn_bk-sidebar {
    width: 50px;
    height: 50px;
    display: block;
    background: url(../images/menu_dot.svg) no-repeat;
    position: absolute;
    right: 0px;
    background-position: 50%;
    top: 2px;
  }
  .chat-sidebar__panel {
    position: fixed;
    top: 0px;
    left: -100%;
    padding: 5px;
    z-index: 99;
    height: 100vh;
    width: 100%;
    background: #fff;
    transition: linear 0.2s;
  }
  .booking-detail-sidebar__panel {
    position: fixed;
    top: 0px;
    left: -100%;
    padding: 5px;
    z-index: 99;
    height: 100vh;
    width: 100%;
    background: #fff;
    transition: linear 0.2s;
  }


  .chat-sidebar__panel.open__sidebar {
    left: 0px;
  }
  .chat-sidebar__panel .chat_sidebar-head {
    padding: 31px 10px 10px 10px;
  }
  .booking-detail-sidebar__panel.open__sidebar {
    left: 0px;
  }
  .booking-detail-sidebar__panel .chat_sidebar-head {
    padding: 31px 10px 10px 10px;
  }


  .chat__board-inner-wrap .main_chat-body {
    height: calc(100vh - 359px);
  }
  .content_height-wrap {
    height: calc(100vh - 300px);
  }
  .content_height-wrap_overide {
    height: auto !important;
  }
  .chat_comment-field .comment_field {
    width: 100%;
  }
  .chat_comment-field .btn_submit {
    width: 30px;
    height: 30px;
    margin-top: 10px;
  }
  .fixedHeader .header_bottom-nav {
    transform: translateY(calc(100vh - 100px));
  }
  .left_header-block {
    margin-bottom: 15px;
    padding-top: 15px;
  }

  .modal__alert .modal__content {
    max-width: 500px;
    margin: 1rem;
  }
  .btn_header {
    padding: 0px 20px 0px 25px;
  }
  .btn_header span {
    display: none;
  }
  .header_bottom-nav {
    position: fixed;
    background: #fff;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 19;
    padding-top: 10px;
    padding-bottom: env(safe-area-inset-bottom); /* Adjust the bottom padding to respect the safe area */
    box-shadow: var(--drop-shadow-colmn);
  }

  .header_bottom-nav ul li {
    flex: 1;
  }
  .header_bottom-nav ul {
    justify-content: center;
  }
  .header_bottom-nav ul li a {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 0px;
    font-size: 11px;
  }
  .header_bottom-nav ul li a > .icon {
    position: inherit;
    top: 0px;
    margin-bottom: 4px;
  }
  .btn_mobileFilter {
    width: auto;
    background-image: url(../images/icon_filter.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    background-size: 40%;
    padding: 18px 30px;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    margin-right: 8px;
  }
  .pet_profile-tigger {
    width: 38px;
    height: 38px;
    border: 0px;
    background: transparent;
    position: absolute;
    right: 18px;
    top: 14px;
  }
  .pet_profile-tigger span {
    display: block;
    width: 100%;
    height: 1px;
    margin: 7px 0px;
    background: var(--primary-text-color);
  }
  .pet_booking-data {
    width: 100%;
    position: fixed;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    left: 0px;
    top: 0px;
    background-color: #fff;
    padding: 15px;
    z-index: 39;
    left: -100%;
    transition: linear 0.2s;
  }
  .pet_booking-data.opensidebar {
    left: 0px;
  }

  .filter_sidebar {
    width: 100%;
    position: fixed;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    left: 0px;
    top: 0px;
    background-color: #fff;
    padding: 5px;
    z-index: 39;
    left: -100%;
    transition: linear 0.2s;
  }
  .filter_sidebar.opensidebar {
    left: 0px;
  }

  .hiddenOver {
    overflow: hidden;
  }

  .btn_close {
    width: 20px;
    height: 20px;
    background-image: url(../images/close.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    right: 10px;
    top: 12px;
  }

  .filter_sidebar .filter_header {
    flex-direction: column;
  }
  .filter_sidebar .filter_header .more_nav {
    margin-top: 10px;
  }
  .sideBar_wrapper {
    /* height: calc(100vh - 30px);
    overflow-y: auto; */
  }
  .profileSidebar {
    width: 100%;
    position: fixed;
    height: 100vh;
    right: 0px;
    top: 0px;
    background-color: #fff;
    padding: 5px;
    z-index: 39;
    right: -100%;
    transition: linear 0.2s;
    overflow-y: auto;
  }
  .profileSidebar.openSidebar {
    right: 0px;
  }

  .closeBtn {
    width: 20px;
    height: 20px;
    background-image: url(../images/close.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: block !important;
    position: absolute;
    left: 10px;
    top: 12px;
  }
  .profile_data_filter {
    padding: 40px 0 70px;
  }
  .banner_text-wrap {
    text-align: center;
  }
  .profile_progress-wrap .title_wrap {
    text-align: center;
    margin-bottom: 15px;
  }
  .profile_progress-wrap .btn_wrap {
    width: 100%;
    text-align: center;
  }

  .data_table-res {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .row-header .cell,
  .row-body .cell {
    text-wrap: nowrap;
  }
}

@media (min-width: 1024px) {
  .dg-flex {
    display: flex;
  }

  .pr-col {
    padding-right: 200px;
  }
  .pet_profile-tigger {
    display: none;
  }
  .main-menu .navigation > li > .sub-menu {
    position: absolute;
    overflow: hidden;
    right: 0px;
    top: 10px;
    top: 100%;
    width: 272px;
    z-index: 100;
    opacity: 1;
    border-radius: 4px;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
  }

  .sub-menu-notification {
    position: absolute;
    overflow: hidden;
    right: 0px;
    top: 10px;
    top: 100%;
    width: 272px;
    z-index: 100;
    /* opacity: 1; */
    border-radius: 4px;
    visibility: hidden;
    /* opacity: 0; */
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
  }

  .main-menu .navigation > li.dropdown:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    top: 100%;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }

  .btn_mobileFilter {
    opacity: 0;
  }

  .siteSearch {
    width: 50%;
  }
}
@media (min-width: 1300px) and (max-width: 1400px) {
  .logo-index {
    width: 13%;
  }
  .icon-index {
    width: 37%;
  }
  .pet_specific-list .pet_spec-block {
    padding: 10px 8px;
  }
  .pet_specific-list .pet_spec-block .spec_title {
    font-size: 0.85rem !important;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .col-sidebar {
    width: 22%;
  }
  .col-dataHolder {
    width: 78%;
  }
  .singel_block-title {
    font-size: 20px;
  }
  .update_service-block .icon_colmn {
    width: 55px;
  }
  .update_service-block .content_colmn p {
    font-size: 0.8rem;
  }
  .update_service-block .content_colmn .sub-title {
    font-size: 1.1rem;
  }
  .hiring-paraVets-banner .image_wrapper {
    width: 440px;
  }
  .pet_specific-list .pet_spec-block {
    padding: 10px 8px;
  }
  .pet_specific-list .pet_spec-block .spec_title {
    font-size: 0.85rem !important;
  }
  ul.profile_address-list li {
    padding: 0px 6px;
  }

  .setting_bar-wrap {
    min-width: 22em;
    max-width: 22em;
  }
  .chat-sidebar__panel {
    min-width: 25em;
    max-width: 25em;
  }

  /* .booking-detail-sidebar__panel {
    min-width: 25em;
    max-width: 25em;
  } */
  .generate_booking-colmn {
    width: 60%;
  }
  /* .sidebar_profile-row {
    min-width: 20em;
    max-width: 20em;
  } */
  /* .chat_board-sidebar {
    min-width: 24em;
    max-width: 24em;
  } */
}

@media (min-width: 1200px) {

  .sidebar_profile-row {
    min-width: 20em;
    max-width: 20em;
  }

}

@media (min-width: 1600px) and (max-width: 2000px) {
  .col-sidebar {
    width: 19%;
  }
  .col-dataHolder {
    width: 81%;
  }
  .banner_single-row .small_banner {
    width: 20%;
  }
  .banner_single-row .large_banner {
    width: 80%;
  }
  .profile_progress-wrap .progress_left {
    width: 19%;
  }
  .profile_progress-wrap .progress_right {
    width: 15%;
  }
  .profile_progress-wrap .progress_center {
    width: 66%;
  }

  .home_right-banner .left_content {
    width: 31%;
  }
  .home_right-banner .center_content {
    width: 32%;
  }

  .siteSearch {
    width: 60%;
  }

  .col-xls-5 {
    width: 20%;
  }
}

/* @media (min-width: 1600px) {
  .col-xls-5 {
    flex: 0 0 auto;
    width: 20%;
  }
  .setting_bar-wrap {
    min-width: 30em;
    max-width: 30em;
  }

  .generate_booking-colmn {
    width: 50%;
  }

  .sidebar_profile-row {
    min-width: 25em;
    max-width: 25em;
  }
  .chat-sidebar__panel {
    min-width: 30em;
    max-width: 30em;
  }

  .chat_board-sidebar {
    min-width: 26em;
    max-width: 26em;
  }
} */

@media (max-width: 1200px) {
  .setting_bar-wrap .setting_sidebar-head {
    display: flex;
    position: relative;
  }
  .sidebar_profile-row {
    max-width: 0px;
    position: fixed;
    top: 0px;
    height: 100vh;
    left: 0px;
    padding: 0px;
    z-index: 9;
    overflow: hidden;
    transition: max-width ease-in 0.5s;
  }
  .sidebar_profile-row.openSidebar {
    max-width: 400px;
  }
  .profile_close {
    width: 20px;
    height: 20px;
    background-image: url(../images/close.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    right: 10px;
    top: 12px;
  }
  .profile_setting-toggle {
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    top: -10px;
    right: 1px;
  }
}

.reset_filter {
  cursor: grab;
}

.reset_filter:hover {
  color: #f1b201;
}

.reset_filter_mobile {
  margin-top: 20px;
}

@media screen and (max-width: 1024px) {
  .reset_filter {
    display: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .reset_filter_mobile {
    display: none !important;
  }
}

.buttons-container {
  display: flex;
  justify-content: space-between; /* Spreads out the buttons */
  padding-top: 10px; /* Optional: Adjust as needed */
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink 1s linear infinite;
}

/* CSS rules for mobile devices only */
@media screen and (max-width: 768px) {
  .mobile_only {
    display: block; /* or inline, inline-block, etc., depending on your layout */
    display: flex;
    justify-content: center;
  }
  .desktop_only {
    display: none;
  }
}

/* CSS rules for desktop devices only */
@media screen and (min-width: 769px) {
  .mobile_only {
    display: none;
  }
  .desktop_only {
    display: block; /* or inline, inline-block, etc., depending on your layout */
  }
}

@media screen and (min-width: 992px) {
  .pet_image-profile {
    height: 300px;
    object-fit: cover;
    width: 100%; /* Adjust the width as needed */
  }

  .pet-description {
    height: 150px; /* Adjust the height as needed */
    overflow: hidden; /* Hides text that overflows */
    text-overflow: ellipsis; /* Optional, can add an ellipsis to overflow text */
  }
}

.favorite-added {
  color: #642697 !important; /* Favorite added color */
}

.icon-heart {
  color: grey; /* Default color when not a favorite */
}

.clickable-card {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.clickable-card:hover {
  transform: scale(1.05);
}

.notification_icon {
  position: absolute;
  top: 3px;
  left: 0px;
  width: 25px;
}

.notification_navigation {
  font-family: "poppins";
  position: relative;
  display: block;
  font-weight: 400;
  font-size: 14px;
  padding: 0.65rem 1rem 0.65rem 1.75rem;
  opacity: 1;
  color: var(--font-color);
  cursor: pointer !important;
}

.notification_count {
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  line-height: 22px;
  background-color: var(--navigate-color);
  border: 2px solid #fff;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  top: -8px;
  left: 8px;
}

.notificationPopup {
  position: absolute;
  overflow: hidden;
  right: 0px;
  top: 100px;
  width: 272px;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  border-radius: 4px;
  background-color: #fff;
  transition: all 300ms linear;
}

.notification-wrapper:hover .notificationPopup {
  top: 50px;
  visibility: visible;
  opacity: 1;
  transition: all 300ms linear;
  padding: 15px 0px 15px 0px;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .notificationPopup {
    position: fixed;
    width: 100%; /* Full width on mobile */
    left: 0; /* Align to the left edge */
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.notification-item {
  border: 1px solid #f9f9f9;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px;
  position: relative;
  color: var(--secondary-text-color);
}
.notification-description {
  font-size: 14px;
  margin: 8px;
}

.notification-title {
  /* font-weight: bold; */
  color: #642697;
  margin-bottom: 5px; /* Space between title and description */
}

.mark-as-read-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #642697;
  cursor: pointer;
}

.notification-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px; /* Spacing above the footer */
}

.notification-timestamp {
  font-size: 0.85em;
  color: #666;
}

@media (max-width: 767px) {
  .notificationPopup {
    position: fixed; /* Fixes the popup to the screen */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    z-index: 9999; /* Ensure it's above other content */
  }

  .notification-wrapper {
    width: 100%;
  }
}

.closeBtn {
  position: absolute;
  top: 10px; /* Adjust as needed */
  right: 10px; /* Adjust as needed */
  cursor: pointer;
  /* Additional styling for the button, if needed */
}

/* Add padding at the bottom of the notification list to avoid overlap with the close button */
.notificationPopup ul {
  margin-bottom: 30px; /* Adjust as needed */
}

/* Media query adjustments for mobile devices */
@media (max-width: 767px) {
  .notificationPopup {
    /* Other styles... */
    padding-top: 40px; /* Space for the close button */
  }
}
@media (max-width: 425px) {
  .fc-toolbar-title{
    font-size: medium !important;
  }
  .fc-dayGridMonth-button{
    font-size: small !important;
  }
  .fc-timeGridWeek-button{
    font-size: small !important;
  }
  .fc-timeGridDay-button{
    font-size: small !important;
  }
  .fc-listWeek-button{
    font-size: small !important;
  }
  .fc-prev-button{
    font-size: small !important;
  }
  .fc-next-button{
    font-size: small !important;
  }
  .fc-today-button{
    font-size: small !important;
    margin-top: 2px !important;
  }
}

li.menu-item.notification-item {
  border-color: #ffe4e2;
}

.booking_link-card.detail_card {

  margin: 5px 0px !important;
}

.scroll-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  /* Additional styling as needed */
}


.notification-flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-content {
  flex-grow: 1; /* Allows the content to fill available space */
}

.mark-as-read-btn {
  padding: 4px 4px !important; /* Your existing styles */
  /* Additional styling for alignment and appearance */
  white-space: nowrap; /* Prevents the text from wrapping */
}

.notification-time {
  font-size: 12px;
}


.danger-block {
  width: 100%;
  padding: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 20px;
  background-color: #f1b201;
}

.chatBorad_inner-area {
  /* display: flex; */
  /*flex-direction: column-reverse; This reverses the display order*/
  overflow-y: auto;
}




/* Base CSS */
.main_body-wraper .dg-flex {
  display: flex;
  flex-wrap: nowrap; /* Prevents wrapping */
  height: 100%; /* Adjust based on your needs */
}

.chat_board-sidebar {
  flex: 0 0 20%; /* Fixed width for the sidebar */
  max-width: 20%; /* Ensures it does not grow larger than 20% */
  min-width: 250px; /* Minimum width to maintain usability */
  overflow: auto; /* Adds scroll to the sidebar if content is too long */
}

.wraper_chat-board {
  flex: 0 0 50%; /* Fixed width for the chat area */
  max-width: 50%; /* Ensures it does not grow larger than 60% */
  overflow: auto; /* Adds scroll to the chat area if content is too long */
}



.pending_request-list {
  flex: 0 0 30%; /* Fixed width for the pending requests sidebar */
  max-width: 30%; /* Ensures it does not grow larger than 20% */
  min-width: 250px; /* Minimum width to maintain usability */
  overflow: auto; /* Adds scroll if content is too long */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
  .main_body-wraper .dg-flex {
      flex-wrap: wrap; /* Allow wrapping on small screens */
  }
  .chat_board-sidebar,
  .wraper_chat-board,
  .pending_request-list {
      flex: 1 0 100%; /* Each takes full width on smaller screens */
      max-width: 100%; /* Full width */
      min-width: 100%; /* Full width */
  }
}
@media (max-width: 1024px) {

  .chat_board-sidebar,
  .wraper_messages-board,
  .pending_request-list {
      flex: 1 0 100%; /* Each takes full width on smaller screens */
      max-width: 100%; /* Full width */
      min-width: 100%; /* Full width */
  }
}





.center-container {
  display: flex;
  justify-content: center;  /* Aligns items on the horizontal line */
  align-items: center;      /* Aligns items on the vertical line */
  height: 100%;             /* Optional: it depends on the container's desired height */
}



/* Define these styles inside your existing CSS file */
@media (max-width: 1024px) {
  .mobile-hidden {
      display: none !important;
  }

  .mobile-visible {
      display: block !important;
  }
}


@media (max-width: 1024px) {
  .rvt_bk-chat-head {
      /* display: flex; */
      /* flex-wrap: wrap; Allow items to wrap as needed */
      justify-content: space-between; /* Spread out content across the header */
  }

  .rvt_bk-chat-head .d-flex.align-items-center {
      /* Group the avatar and details together */
      flex: 1 0 100%; /* Take full width to push to new line */
      justify-content: flex-end; /* Align these items to the end/right */
  }

  .chat_user-filter {
      flex: 0 0 auto; /* Do not grow, do not shrink, based on content width */
      order: 1; /* Ensure this is the first item in the flex container */
  }

  .rvt_bk-chat-head .d-flex.justify-content-end {
      width: 100%; /* Full width for the triggers */
      justify-content: flex-end; /* Keep triggers to the end/right */
      order: 3; /* Ensure this is positioned last in the visual layout */
  }
}


/* Hide the View Bookings button on larger screens by default */
.view-bookings-btn {
  display: none;
  padding: 8px 16px;
  background-color: #007bff; /* Bootstrap primary color */
  color: white;
  border: none;
  border-radius: 5px;
  margin: 0 15px; /* Add some spacing around the button */
  cursor: pointer;
}

/* Use a media query to show the button on tablet and mobile screens */
@media (max-width: 1024px) {
  .view-bookings-btn {
    display: block; /* Show the button on small screens */
  }
}






.close_bookings_button {
  display: none;
}

/* Show the button only when viewport width is 1024px or less */
@media (max-width: 1024px) {
  .close_bookings_button {
      display: block; /* Show the button */
  }
}

.chat_image-preview img {
  max-width: 100%; /* Ensures the image does not overflow its container */
  height: auto; /* Maintains aspect ratio */
  border-radius: 8px; /* Rounds the corners of the image */
  margin-bottom: 10px; /* Adds space below the image */
  padding: 5px; /* Adds padding around the image */
  background: #f4f4f4; /* Optional: adds a background color to the padding area */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: adds subtle shadow for depth */
}


/* Styles for larger screens (desktops) */
@media (min-width: 992px) { /* Adjust the breakpoint as needed for desktop */
  .dg-flex-booking-detail {
      display: flex;
      flex-wrap: nowrap; /* Prevents wrapping */
      width: 100%;
  }

  .wraper_messages-board {
      flex: 0 0 70%; /* Does not grow, does not shrink, starts at 70% of the parent container */
      max-width: 70%; /* Ensures it does not grow beyond 70% */
      /* Add more styling here as needed */
  }

  .booking-detail-sidebar__panel {
      flex: 0 0 30%; /* Does not grow, does not shrink, starts at 30% of the parent container */
      max-width: 30%; /* Ensures it does not grow beyond 30% */
      /* Additional styles */
  }
}

/* Styles for tablet and above but less than desktop */
@media (min-width: 768px) and (max-width: 991px) {
  .dg-flex-booking-detail {
      display: block; /* Stacks the children */
  }

  .wraper_messages-board,
  .booking-detail-sidebar__panel {
      flex: 0 0 100%; /* Takes full width */
      max-width: 100%; /* Ensures it occupies the full container width */
  }
}

/* Styles for mobile screens (optional if you want to adjust below tablet) */
@media (max-width: 767px) {
  .dg-flex-booking-detail {
      display: block; /* Stacks the children */
  }

  .wraper_messages-board,
  .booking-detail-sidebar__panel {
      flex: 0 0 100%; /* Takes full width */
      max-width: 100%; /* Ensures it occupies the full container width */
  }
}


/* Styles for the sidebar to fill the height and enable internal scrolling */
.booking-detail-sidebar__panel {
  position: relative; /* Ensures the panel is positioned relative to its nearest positioned ancestor */
  height: 100%; /* Makes the sidebar take full height of its parent */
  overflow-y: auto; /* Allows vertical scrolling if content overflows */
  box-sizing: border-box; /* Ensures padding and border are included in the width and height */
}

/* Ensure the parent container allows the sidebar to achieve 100% height */
.dg-flex-booking-detail {
  display: flex;
  /* height: 100vh; */
  overflow: hidden; /* Prevents the flex container from scrolling */
}




/* Inner wrapper for chat content, should scroll */
.chat__board-inner-wrap {
  flex-grow: 1; /* Takes all available space */
  overflow-y: auto; /* Adds scrolling to this container */
  height: 100%;
}

/* Base styles for all devices */
.open_sidebar {
  display: block;  /* Change this to 'flex' or other display styles if needed */
}



/* Styles for tablets (devices with widths between 768px and 1024px) */
@media (max-width: 1024px) {
  .close_sidebar {
    display: none;
  }
}



.ui-datepicker {
  overflow-y: auto; /* Adds scrollability if the content overflows */
}


.primary_data_card-cal{
  padding: 3px
}

@media (max-width: 420px) {
  .card-body {
      padding: 0; /* Removes padding */
  }

  .ui-datepicker table {
    font-size: 0.7em;
  }

  .primary_data_card-cal{
    padding: 0px
  }

}

.bold-text {
  font-weight: bold;
}


.star-icon {
  display: inline-block; /* Ensures icons are side by side */
  margin-right: 2px; /* Adds a small space between stars */
  color: #f1b201;
}

.gray-star {
  filter: grayscale(100%); /* Grays out the star */
}


p.booking-description {
  margin: 20px;
  padding: 35px;
  box-shadow: var(--drop-shadow-colmn-3);
  margin: 15px 0px;
  border: 1px solid #efefef;
}

.text-warning{
  color: #f1b201 !important
}


.setting_content-row {
  overflow-x: auto;
}

.pb-40{
  padding-bottom: 40px !important;
}

.ck-editor__editable {
    min-height: 250px;
}

.edit-icon-container {
  cursor: pointer;
}

.edit-icon-circle {
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid var(--navigate-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navigate-color);
  font-size: 16px;
}

.edit-icon-text {
  display: none;
}

.non-bulleted-tag{
  color: #7e7e7e;
  font-size: 0.9rem;
  font-weight: 400;
  position: relative;
  display: inline-block;
}

.hover-text-yellow:hover {
  color: #f1b201
}

.hover-pointer {
  cursor: pointer;
}

.disabled-pointer {
  cursor: not-allowed;
}

.btn_block-primary:disabled {
  background-color: #d3d3d3;
  color: #7d7d7d;
  cursor: not-allowed;
}

@media (max-width: 576px) {
  .d-flex.justify-content-between {
      flex-direction: column;
      align-items: start !important;
  }

  .edit-icon-circle {
    display: none;
  }

  .edit-icon-text {
    display: inline;
    font-weight: 400;
    color: var(--navigate-color);
    text-decoration: underline;
  }

  .payout-summary .section-title {
    margin-top: 1rem;
  }

  .payout-summary {
    padding: 20px 10px
  }

}

.centered-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding-top: 130px;
  padding-bottom: 70px;
  width: 100%;
  max-width: 600px; /* Adjust based on design */
  margin: 0 auto;   /* Center horizontally */
  box-sizing: border-box;
}


@media only screen and (max-width: 1024px) {
  .footer {
    display: none;
  }
}

[aria-labelledby="select2-info-address-container"],
[aria-labelledby="select2-search-card-address-container"],
[aria-labelledby="select2-reg-booking-address-container"],
[aria-labelledby="select2-booking-update-address-container"] {
  border: none !important;
}

[aria-labelledby="select2-custom-booking-address-container"] {
  height: 49px !important;
  padding: 12px 15px;
}

[aria-labelledby="select2-search-card-address-container"] {
  background-color: #f6f6f6 !important;
}

[aria-labelledby="select2-search-card-address-container"] .select2-selection__rendered {
  color: black !important;
  font-size: 12px !important;
}

[aria-labelledby="select2-search-card-address-container"] .select2-selection__placeholder {
  color: #7e7e7e !important;
  font-size: 12px !important;
}

.select2-container--open .select2-dropdown--below {
  z-index: 9999;
}