:root {
  --n360-border-color: #cdcdcd;
  --n360-main-color: #682243;
  --n360-paragraph-color: #777777;
  --n360-radius-border-color: #777777;
  --n360-btn-label-color: #333333;
  --n360-heading-color: #333333;
  --n360-subheading-color: #696969;
  --n360-bg-dark: #121212;
  --n360-green-color: #007b2a;
  --bs-btn-disabled-bg: #777777;
  --bs-btn-disabled-border-color: #cdcdcd;
  --large-section-wrap: 1600px;
}

/* Default font: Mulish Regular */
* {
  font-family: "Mulish Regular", sans-serif;
}

@media screen and (max-width: 768px) {
  * {
    font-family: "Roboto", sans-serif;
  }
}

.profile.dropdown-toggle::after {
  content: none;
}

.dark-btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

.f-roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.f-roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* @font-face {
  font-family: "GothamNarrow";
  font-display: swap;
  src: url(../fonts/Gotham/GothamNarrow-Thin.ttf) format("truetype");

}

@font-face {
  font-family: "GothamNarrow";
  src: url(../fonts/Gotham/GothamNarrow-XLight.ttf) format("truetype");
  font-weight: 200 !important;
  font-display: swap;
}

@font-face {
  font-family: "GothamNarrow";
  src: url(../fonts/Gotham/GothamNarrow-Light.ttf) format("truetype");
  font-weight: 300 !important;
  font-display: swap;
}

@font-face {
  font-family: "GothamNarrow";
  src: url(../fonts/Gotham/GothamNarrow-Book.ttf) format("truetype");
  font-weight: 400 !important;
  font-display: swap;
}

@font-face {
  font-family: "GothamNarrow";
  src: url(../fonts/Gotham/GothamNarrow-Medium.ttf) format("truetype");
  font-weight: 500 !important;
  font-display: swap;
}

@font-face {
  font-family: "GothamNarrow";
  src: url(../fonts/Gotham/GothamNarrow-Bold.ttf) format("truetype");
  font-weight: 600 !important;
  font-display: swap;
}

@font-face {
  font-family: "GothamNarrow";
  src: url(../fonts/Gotham/GothamNarrow-Black.ttf) format("truetype");
  font-weight: 700 !important;
  font-display: swap;
}

@font-face {
  font-family: "GothamNarrow";
  src: url(../fonts/Gotham/GothamNarrow-Ultra.ttf) format("truetype");
  font-weight: 800 !important;
  font-display: swap;
} */

svg:not(:root) {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Set minimum height of content area */
body {
  min-height: 100vh;
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
}

html {
  position: relative;
  overflow-x: hidden;
  height: 100%;
}

/* Set content area to grow and shrink */
main {
  flex: 1;
}

/*Max-width*/
.large-section-wrap {
  max-width: var(--large-section-wrap);
  margin: 0 auto;
  padding-right: 1rem;
}

@media screen and (max-width: 768px) {
  .large-section-wrap {
    padding: 0;
  }
}

.section-wrap {
  max-width: 1366px;
  margin: 0 auto;
}

.section-wrap-medium {
  max-width: 1170px;
  margin: 0 auto;
}

.header__navbar--wrap {
  max-width: 1171px;
  margin: 0 auto;
  min-height: 90px;
}

/*************/
/* Font-size :
	0.75 rem = 12px;     
	0.875 rem = 14px;
  1rem = 16px;
  1.125rem = 18px; 
  1.25rem = 20px; 
	1.5rem = 24px; 
	1.875rem = 30px; 
*/
.fsize-1 {
  font-size: 0.75rem;
}

.fsize-2 {
  font-size: 0.875rem;
}

.fsize-3 {
  font-size: 1rem;
}

.fsize-4 {
  font-size: 1.125rem;
}

.fsize-5 {
  font-size: 1.25rem;
}

.fsize-6 {
  font-size: 1.5rem;
}

.fsize-7 {
  font-size: 1.875rem;
}

.no-result {
  font-size: 35px;
}

/*Navbar--Search*/
.navbar__search {
  overflow: hidden;
  padding: 2px 3px 2px 2px;
  border-radius: 300px;
  border: 1px solid var(--n360-border-color);
  min-height: 50px;
}

.navbar__logo img {
  width: 100%;
}

.navbar__search input,
.navbar__search input::placeholder {
  color: var(--n360-paragraph-color);
}

.vertical-divider {
  height: 24px;
  width: 1px;
  background-color: #aaa;
}

.circle__search_btn {
  width: 44px;
  height: 44px;
  transition: all 0.3s;
}

/*Color*/
.main-color {
  color: var(--n360-main-color) !important;
}

.main-color-admin {
  color: #682243;
}

.p-color {
  color: var(--n360-paragraph-color);
}

.h-color {
  color: var(--n360-heading-color);
}

.sub-h-color {
  color: var(--n360-subheading-color);
}

.subtext-color {
  color: var(--n360-paragraph-color);
}

.green-color {
  color: var(--n360-green-color);
}

.circle-button {
  min-width: 44px;
  height: 44px;
  border-radius: 50% !important;
}

/*Background*/
.bg-main {
  background-color: var(--n360-main-color) !important;
}

.bg-main-admin {
  background-color: #682243 !important;
}

.bg-n360-dark {
  background-color: var(--n360-bg-dark);
}

.iti-mobile {
  background-color: #212327;
}

.bg-fb {
  background-color: #3e66b7;
}

.bg-gg {
  background-color: #ce0811;
}

/*Background Hover*/
.bg-fb:hover {
  background-color: #315db6;
}

.bg-gg:hover {
  background-color: #f8000c;
}

.bg-main:hover {
  background-color: #cc1d61;
  filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25));
  -webkit-filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25));
}

/*Button*/
.n360-btn-viewall:hover,
.n360-btn-viewall:active,
.n360-btn-viewall:focus,
.n360-btn-viewall:visited {
  color: var(--n360-main-color) !important;
}

.businesses-btn {
  background-color: var(--n360-main-color);
  height: 50px;
  color: #fff;
  transition: all 0.3s;
  text-decoration: none;
  padding: 12px 20px;
}

.login-btn {
  background-color: #fff;
  width: 110px;
  height: 50px;
  color: var(--n360-btn-label-color);
  transition: all 0.3s;
}

.signup-btn {
  background-color: var(--n360-main-color);
  width: 120px;
  height: 50px;
  color: #fff;
  transition: all 0.3s;
}

.businesses-btn:hover,
.signup-btn:hover {
  background-color: #cc1d61;
  filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25));
  -webkit-filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25));
}

.login-btn:hover {
  background-color: #e0e0e0;
  filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25));
  -webkit-filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25));
}

.btn-report {
  aspect-ratio: 1/1;
  width: 35px;
}

/* Signup Divider */
.divider2 {
  font-size: 16px;
  display: flex;
  align-items: center;
  color: #cdcdcd;
}

.divider2::before,
.divider2::after {
  flex: 1;
  content: "";
  padding: 1px;
  background-color: #373737;
  margin: 5px;
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

/* Show the snackbar */
#snackbar.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Fade in animation */
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

/* Fade out animation */
@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

/*Border Radius*/
.radius-300 {
  border-radius: 300px;
}

.radius-2 {
  border-radius: 2px;
}

.radius-10 {
  border-radius: 10px;
}

.radius-14 {
  border-radius: 14px;
}

.radius-16 {
  border-radius: 16px;
}

.radius-20 {
  border-radius: 20px;
}

.radius-bottom-10 {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.radius-top-30 {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

/*Padding*/
.py-20px {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Divider */
.divider2 {
  font-size: 18px;
  display: flex;
  align-items: center;
  color: #cdcdcd;
  margin-bottom: 1.5rem !important;
}

.divider2::before,
.divider2::after {
  flex: 1;
  content: "";
  padding: 1px;
  background-color: #373737;
  margin: 5px;
}

/*Grid*/
.grid {
  display: grid;
}

.grid-column-1 {
  grid-template-columns: 1fr;
}

.grid-column-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-column-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-column-4 {
  grid-template-columns: repeat(4, 1fr);
}

/*Height*/
.h50px {
  height: 50px;
}

.h18px {
  height: 18px;
}

.h-25px {
  height: 25px;
}

/*Line Height*/
.lh-16px {
  line-height: 16px;
}

.lh-18px {
  line-height: 18px;
}

.lh-24px {
  line-height: 24px;
}

.lh-25px {
  line-height: 25px;
}

/*Skeleton*/
.loading {
  width: 100%;
  height: 100%;
  background-color: #cbcbcb;
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 60%) #cbcbcb;
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
  to {
    background-position-x: -20%;
  }
}

.loading-banner {
  height: 516px;
  border-radius: 10px;
  animation-delay: 0.05s;
}

.loading-w-1 {
  height: 1rem;
  width: 4rem;
  margin: 0.2rem 0;
}

.loading-w-2 {
  height: 1rem;
  width: 12rem;
}

.loading-paragraph {
  height: 20px;
  width: 100%;
  margin: 2px 0;
  display: block;
}

.loading-paragraph-2 {
  height: 20px;
  width: 45%;
  margin: 2px 0;
  display: block;
}

.loading-button-1 {
  bottom: 0;
  left: 0;
  position: absolute !important;
  top: 0;
  right: 0;
  border-radius: 300px;
}

/* Footer */
.footer {
  background-color: #f7f7f7;
}

.list_footer--items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 3.5rem 0;
}

.list_footer--items h4 {
  margin-bottom: 2rem;
}

.list_footer--items li {
  line-height: 35px;
  color: #777777;
}

.sub_footer {
  padding: 34px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.social-list {
  list-style-type: none;
  margin: 0;
}

.list-style-none {
  list-style-type: none;
}

.social-list li {
  float: left;
}

.social-list--item+.social-list--item {
  margin-left: 10px;
}

/*Title*/
.login-title,
.add-guest-title,
.add-service-title,
.add-technician-title,
.add-booking-detail-title {
  font-size: 22px;
}

/* SignUp Mobile Phonenumber Field  */
.phone-field-signUp {
  color: #cdcdcd;
  border-radius: 15px;
}

/*Border Color*/
.n360-border-color {
  border-color: var(--n360-border-color);
}

.n360-primary-border {
  border: 1px solid var(--n360-main-color) !important;
}

.n360-border {
  border: var(--bs-border-width) var(--bs-border-style) var(--n360-border-color) !important;
}

.line h2 {
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid var(--n360-border-color);
  position: relative;
}

.text-align-center {
  text-align: center !important;
}

.text-align-left {
  text-align: left !important;
}

.line h2 span {
  color: #333;
  background-color: white;
  position: relative;
  top: 10px;
  padding: 0 10px;
}

.outline-none {
  outline: none;
}

/*Ul*/
.list-style-none {
  list-style-type: none;
}

.profile-menu {
  right: 0;
  left: auto !important;
  /* top: calc(100% + 10px) !important; */
  padding: 0 0 5px;
  border-radius: 10px;
  width: 213px;
}

.messages-menu {
  right: -14px;
  left: auto !important;
  top: calc(100% + 24px) !important;
  padding: 0 0 5px;
  border-radius: 10px;
  width: 370px;
}

.messages-menu-mobile {
  right: -14px;
  left: auto !important;
  top: calc(100% + 24px) !important;
  padding: 0 0 5px;
  border-radius: 10px;
}

.load-more-btn {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

.load-more-btn:hover {
  background-color: #0056b3;
}

#sentinel {
  height: 1px;
}

.notification-header-mobile {
  padding: 0px 20px;
  position: sticky;
  top: 0;
  background-color: #1a1a1a;
  z-index: 10;
  display: flex;
  align-items: center;
}

.cursor-pointer.login-notify {
  position: relative;
}

.svg-inline--fa.fa-bell {
  cursor: pointer;
}

.notification-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  color: white;
  overflow-y: auto;
  transition: right 0.5s ease;
  z-index: 1000;
}

.notification-panel.active {
  right: 0;
}

.notification-panel h2 {
  margin-top: 0;
  font-size: 24px;
  padding: 20px;
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #444;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.notification-content {
  flex-grow: 1;
}

.notification-content h4 {
  margin: 0;
  font-size: 16px;
  color: #ffffff;
}

.notification-content .time {
  font-size: 12px;
  color: #bbbbbb;
}

.notification-content .message {
  font-size: 14px;
  color: #cccccc;
}

.messages-menu .list {
  width: 100%;
  min-height: 35px;
  max-height: 250px;
  overflow-y: scroll;
}

.container-notification {
  overflow-y: auto;
  height: 100%;
  padding: 35px;
  background-color: #212327;
  border-radius: 30px 30px 0px 0px;
}

.messages-menu-mobile .list {
  width: 100%;
  min-height: 35px;
  overflow-y: scroll;
}

.messages-menu .list::-webkit-scrollbar {
  width: 5px;
}

.messages-menu .list::-webkit-scrollbar-track {
  /*background-color: 5f5f5f;*/
  box-shadow: inset 1px 1px 5px #e1e1e1;
  border-radius: 15px;
}

.messages-menu .list::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 15px;
}

.messages-menu .list::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* IE */

.messages-menu .list {
  scrollbar-face-color: #d9d9d9;
  scrollbar-shadow-color: #e1e1e1;
  scrollbar-highlight-color: #777;
}

/* FireFox */
.messages-menu .list {
  scrollbar-color: #d9d9d9;
  scrollbar-width: thin;
}

.profile-menu li,
.messages-menu li {
  /* overflow: hidden; */
  font-size: 1rem;
  line-height: 33px;
  width: 100%;
}

.profile-menu--item {
  color: var(--n360-paragraph-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.messages-menu--item {
  padding: 20px;
  color: var(--n360-paragraph-color);
  display: flex;
  gap: 10px;
  /* border-bottom: 1px solid var(--n360-border-color); */
  transition: 0.3s all;
}

.messages-menu--item-mobile {
  color: #212327;
  /* display: flex;
  gap: 10px; */
  border-bottom: 1px solid #4d4e50;
  padding: 1rem 0;
  transition: 0.3s all;
}

.messages-menu--item.unread {
  background-color: white;
}

.messages-menu--item:hover {
  background-color: #fbd7e3;
}

.messages-menu--item-mobile.unread {
  background-color: #212327;
}

.messages-menu--item-mobile:hover {
  background-color: #212327;
}

.messages-menu--item:last-child {
  border-bottom: 0;
}

.profile-menu--item svg,
.messages-menu--item svg {
  fill: var(--n360-paragraph-color);
}

.profile-menu--item:hover {
  color: var(--n360-main-color);
  background-color: transparent;
}

.profile-menu--item:hover svg,
.messages-menu--item:hover svg {
  fill: var(--n360-main-color);
}

.profile-menu:before,
.messages-menu:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
  display: block;
  float: right;
  position: relative;
  top: -7px;
  right: 10px;
}

.messages-menu--item img {
  width: 56px;
  height: 56px;
  border: 1px solid var(--n360-radius-border-color);
  border-radius: 50%;
  object-fit: cover;
}

.cursor-pointer {
  cursor: pointer;
}

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

/* N360 card */
.n360_card {
  /* width: 281px; */
  height: 298px;
  border-radius: 10px;
  overflow: hidden;
}

.n360_card__feature_img,
.n360_card__feature_img .feature_img {
  height: 150px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.n360_card__btn--loading {
  width: 107px;
  height: 34px;
  display: block;
}

.n360_card__btn {
  width: 107px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--n360-radius-border-color);
  transition: all 0.3s;
  cursor: pointer;
}

.n360_card__btn:hover {
  background-color: var(--n360-main-color);
  color: #fff;
  border: none;
}

.n360_card__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.favorite-icon svg {
  fill: var(--n360-btn-label-color);
}

.favorite-icon svg:hover {
  cursor: pointer;
  fill: var(--n360-main-color);
}

body.no-scroll {
  overflow: hidden;
}

.favorite-icon svg.active {
  cursor: pointer;
  fill: var(--n360-main-color);
}

body.no-scroll {
  overflow: hidden;
}

.mb-login-notify,
.login-notify,
.login-chat {
  position: relative;
}

.mb-login-notify svg,
.login-notify svg,
.login-chat svg {
  color: #fff;
}

/* .login-notify::before,
.login-chat::before{
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: 0px;
  top: 5px;
  border-radius: 50%;
  background-color: var(--n360-main-color);
} */
#noti-count {
  width: 0;
  height: 0;
}

ul.messages {
  margin: 0;
}

.spinner-sm-border {
  width: 1rem;
  height: 1rem;
}

#noti-count.new-noti {
  color: white;
  background: var(--n360-main-color);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10px;
  right: 1px;
}

.notification-header {
  background: #f9f9f9;
  width: 100%;
  justify-content: center;
  border-bottom: 1px solid #ddd;
  font-size: 18px;
  font-weight: 700;
  padding: 10px;
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

#noti-count-mobile {
  color: white;
  background: var(--n360-main-color);
  border: 1px solid #000;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 40%;
  right: 0;
  text-indent: 100%;
  white-space: nowrap;
}

.profile-user {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  /* transition: 2s all; */
}

.profile-user--hidden {
  width: 0;
  height: 0;
  opacity: 0;
}

.profile {
  width: 50px;
  height: 50px;
  background-color: #fff;
  padding: 3px;
  border-radius: 50%;
}

.profile img {
  width: 100%;
  height: 100%;
  border: 1px solid #cdcdcd;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.flex-grow-0pt6 {
  flex-grow: 0.6;
}

/* Custom radio */
.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input[type="radio"]:checked {
  background-color: transparent;
  border-color: var(--n360-main-color);
}

.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23d3427a'/%3e%3c/svg%3e");
}

.form-check-input[type="radio"]:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(211, 66, 122, 0.25);
}

/* Custom checkbox */
.form-check-input:checked[type="checkbox"] {
  background-color: var(--n360-main-color);
  border-color: var(--n360-main-color);
}

.form-check-input:focus[type="checkbox"] {
  box-shadow: 0 0 0 0.25rem rgba(211, 66, 122, 0.25);
}

/*Pagination*/
.page-item {
  border-radius: 50%;
  overflow: hidden;
}

.page-link.active,
.active>.page-link {
  background-color: #333333;
  border-color: #333333;
}

.page-link:hover,
.page-link {
  color: #333333;
}

.page-link:hover {
  background-color: #777;
}

.active>.page-link:hover {
  color: var(--cui-pagination-active-color);
}

.page-link:first-child,
.page-link:last-child {
  border-width: 0;
}

.page-link {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.dots.disabled>.page-link,
.page-link.disabled {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: transparent;
  border-color: unset;
}

.page-item .first,
.page-item .last {
  fill: #333333;
}

.page-item.disabled .first,
.page-item.disabled .last {
  fill: #777;
}

.sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0;
}

.mobile-action-menu {
  position: relative;
}

.mobile-action-menu>*:hover {
  cursor: pointer;
}

#expand-menu {
  display: none;
}

#menu {
  opacity: 0;
  margin: 0;
  padding: 0;
  visibility: hidden;
  position: fixed;
  width: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background-color: #000;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  /* transform: translate(100%, 0); */

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

#close-expand-menu svg {
  fill: #fff;
}

#close-expand-menu:hover svg {
  fill: var(--n360-main-color);
  transition: all 0.3s;
}

.menu__item:hover {
  color: var(--n360-main-color);
  transition: all 0.3s;
}

.transform-none {
  transform: none !important;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  width: 300px !important;
  padding: 50px 50px 0 50px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.body-active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.mobile-profile-controls {
  display: none;
}

.breakline {
  position: relative;
  text-align: center;
}

.breakline::after,
.breakline::before {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 3rem);
  border-top: 1px solid #333;
}

.breakline::before {
  right: 50%;
  margin-right: 15px;
}

.breakline::after {
  left: 50%;
  margin-left: 15px;
}

.intlTel {
  padding-left: 65px !important;
}

.iti {
  display: block !important;
}

.iti__selected-flag {
  border-top-left-radius: 300px;
  border-bottom-left-radius: 300px;
  padding: 0 6px 0 15px !important;
}

#register-form input:read-only {
  background-color: rgba(0, 0, 0, 0.05);
}

.word-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-100 {
  width: 100%;
}

.mrg-0 {
  margin: 0 !important;
}

.mrg-r-5 {
  margin-right: 5px;
}

.mrg-r-10 {
  margin-right: 10px;
}

.mrg-l-10 {
  margin-left: 10px;
}

.mrg-b-10 {
  margin-bottom: 10px;
}

.mrg-b-20 {
  margin-bottom: 20px;
}

.mrg-t-10 {
  margin-top: 10px;
}

.mrg-t-20 {
  margin-top: 20px;
}

.mrg-t-30 {
  margin-top: 30px;
}

.mrg-r-20 {
  margin-right: 20px;
}

.mrg-l-20 {
  margin-left: 20px;
}

.font-size-45 {
  font-size: clamp(30px, 4vw, 45px);
}

.font-size-30 {
  font-size: clamp(24px, 4vw, 30px);
}

.font-size-26 {
  font-size: clamp(1.375rem, 0.6477rem + 3.6364vw, 1.625rem);
}

.font-size-24 {
  font-size: clamp(20px, 3vw, 24px);
}

.font-size-22 {
  font-size: clamp(18px, 3vw, 22px);
}

.font-size-20 {
  font-size: clamp(1rem, 0.2727rem + 3.6364vw, 1.25rem);
}

.font-size-18 {
  font-size: clamp(0.875rem, 0.1477rem + 3.6364vw, 1.125rem);
}

.font-size-16 {
  font-size: clamp(0.75rem, 0.0227rem + 3.6364vw, 1rem);
}

.font-size-14 {
  font-size: clamp(0.625rem, -0.1023rem + 3.6364vw, 0.875rem);
}

.font-size-12 {
  font-size: clamp(0.5rem, -0.2273rem + 3.6364vw, 0.75rem);
}

.font-size-13 {
  font-size: clamp(0.5625rem, -0.1648rem + 3.6364vw, 0.8125rem);
}

.font-w-900 {
  font-weight: 900 !important;
}

.font-w-700 {
  font-weight: 700 !important;
}

.font-w-600 {
  font-weight: 600 !important;
}

.font-w-500 {
  font-weight: 500 !important;
}

.font-w-400 {
  font-weight: 400 !important;
}

.font-color-9B9B9B {
  color: #9b9b9b !important;
}

.font-color-777777 {
  color: #777777 !important;
}

.font-color-333333 {
  color: #333333 !important;
}

.font-color-CDCDCD {
  color: #cdcdcd !important;
}

.font-color-amber {
  color: #fcb82d !important;
}

.font-color-pink {
  color: #d3427a !important;
}

.font-color-white {
  color: white !important;
}

.font-color-black {
  color: black !important;
}

.font-roboto {
  font-family: "Roboto", sans-serif;
}

.code-mobile {
  font-size: 1.5em;
  width: 2.5rem;
  text-align: center;
  border-radius: 5px;
  background-color: #373737;
}

.code-mobile:not(:last-child) {
  margin-right: 1rem;
}

.code-mobile:focus {
  background-color: #373737;
}

.code-mobile:valid {
  font-size: 20px;
  color: #cdcdcd;
  background-color: #d3427a;
}

.code-input {
  font-size: 1.5em;
  width: 1em;
  text-align: center;
  flex: 1 0 1em;
  border-radius: 300px;
}

.code-input:not(:last-child) {
  margin-right: 1rem;
}

.arrow-repeat {
  width: 21px;
}

.ticket {
  border-radius: 6px;
  border: 1px solid #cdcdcd;
}

.eye-pw {
  width: 20px;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.text-limit-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  line-height: normal;
}

.text-limit-2 {
  display: -webkit-box;
  line-height: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.clover-local-modal .modal-content {
  width: 100% !important;
}

.rounded-circle .lazy-load-image-background {
  border-radius: 50%;
}

.lazy-load-image-background {
  width: 100% !important;
}

/* Responsive */
/* // X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1320px) {
  .footer {
    margin-top: 65px;
  }
}

@media (max-width: 1250px) {
  .header__navbar {
    margin-left: 35px;
    margin-right: 35px;
  }
}

@media (max-width: 1199.98px) {

  /* .profile{
    width: 75px;
    height: 75px;
  } */
  .profile-menu {
    /* overflow: hidden; */
  }

  .mobile-profile-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .list_footer--items {
    padding: 3.5rem 1rem;
  }

  /*Grid*/
  .grid-lg-column-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .header__navbar {
    margin-left: 3rem;
    margin-right: 3rem;
  }

  /* .header__navbar .profile-user{
    display: none;
  } */
  #menu .profile-user {
    display: block;
  }

  /* .profile-menu--item, .messages-menu--item{
    margin: 1rem 0;
  } */
  /* .profile-menu--item, .messages-menu--item{
    color: #fff;
  }
  .profile-menu--item svg, .messages-menu--item svg{
    fill : #fff;
  } */
  .search-form-container {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out,
      width 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;

    position: absolute;
    width: 100%;
    gap: 1.5rem;
  }

  .search-form-container #search-form {
    flex-grow: 1;
    z-index: 99;
  }

  .search-form-container--hidden,
  .search-form-container--hidden>* {
    opacity: 0;
    width: 0;
    height: 0;
    visibility: hidden;
    padding: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out,
      width 0.3s ease-in-out;
  }
}

.search_field {
  display: none;
}

@media (max-width: 1196px) {
  .search_field {
    background-color: #212327;
    display: flex;
    padding: 10px;
    height: 42px;
    min-width: 250px;
    justify-content: center;
    align-items: center;
  }
}

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .navbar__logo {
    width: 100%;
    max-width: 42px;
  }

  .header__navbar {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* // Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .mb-section-padding {
    padding: 0 20px;
  }

  .space-b-30px {
    margin-bottom: 30px;
  }

  .bg-dark-phone {
    background-color: #212327 !important;
  }

  body:has(.no-navbar) .site-header {
    display: none;
  }

  .search_address::placeholder {
    font-size: 14px;
    color: #cdcdcd;
  }

  .rounded-none-btn button {
    border-radius: 0 !important;
  }

  .btn-collapse-dark button {
    background-color: #212327;
  }

  .form-check-input {
    background-size: 20px;
  }

  .form-check-input[type="radio"]:checked {
    background-color: transparent;
    border-color: var(--n360-main-color);
  }

  .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23d3427a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  }

  .collapse-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: transparent;
    position: relative;
    border: 1px solid #d3427a;
  }

  .collapse-icon:before {
    position: absolute;
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIzIiB2aWV3Qm94PSIwIDAgOSAzIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOC4wOTk4MSAyLjVIMC44OTk4MDZDMC4zOTM1NTYgMi41IC0wLjAwMDE5MzU5NiAyLjEwNjI1IC0wLjAwMDE5MzU5NiAxLjZDLTAuMDAwMTkzNTk2IDEuMTIxODcgMC4zOTM1NTYgMC43IDAuODk5ODA2IDAuN0g4LjA5OTgxQzguNTc3OTMgMC43IDguOTk5ODEgMS4xMjE4NyA4Ljk5OTgxIDEuNkM4Ljk5OTgxIDIuMTA2MjUgOC41Nzc5MyAyLjUgOC4wOTk4MSAyLjVaIiBmaWxsPSIjRDM0MjdBIi8+Cjwvc3ZnPgo=");
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .collapsed .collapse-icon {
    background-color: #d3427a;
  }

  .collapsed .collapse-icon:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuMjAwMzkgMTAuNDExMUM0Ljc1MDM5IDEwLjQxMTEgNC4zNzUzOSAxMC4wMzYxIDQuMzc1MzkgOS42MTExNEw0LjM3NTM5IDYuMDExMTRMMC43NzUzOSA2LjAxMTE0QzAuMzUwMzkgNi4wMTExNCAwLjAwMDM5MDM3MSA1LjYzNjE0IDAuMDAwMzkwMzkgNS4yMTExNEMwLjAwMDM5MDQwOSA0Ljc2MTE0IDAuMzUwMzkgNC40MTExNCAwLjc3NTM5IDQuNDExMTRMNC4zNzUzOSA0LjQxMTE0TDQuMzc1MzkgMC44MTExMzlDNC4zNzUzOSAwLjM2MTEzOSA0Ljc1MDM5IDAuMDExMTM5NCA1LjIwMDM5IDAuMDExMTM5NEM1LjYyNTM5IDAuMDExMTM5NSA1Ljk3NTM5IDAuMzYxMTM5IDUuOTc1MzkgMC44MTExMzlMNS45NzUzOSA0LjQxMTE0TDkuNTc1MzkgNC40MTExNEMxMC4wMjU0IDQuNDExMTQgMTAuNDAwNCA0Ljc2MTE0IDEwLjQwMDQgNS4yMTExNEMxMC40MDA0IDUuNjM2MTQgMTAuMDI1NCA2LjAxMTE0IDkuNTc1MzkgNi4wMTExNEw1Ljk3NTM5IDYuMDExMTRMNS45NzUzOSA5LjYxMTE0QzYuMDAwMzkgMTAuMDM2MSA1LjYyNTM5IDEwLjQxMTEgNS4yMDAzOSAxMC40MTExWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
    top: 50%;
    left: 50%;
  }

  .nearby-item {
    padding: 16px 20px;
  }

  .noti-heading {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.172;
    text-align: center;
    width: 100%;
  }

  .noti-thumbnail {
    width: 39px;
    height: 36px;
    border-radius: 5px;
    background: #373737;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .noti-unread {
    width: 8px;
    height: 8px;
    background-color: #d3427a;
    border-radius: 50%;
    display: flex;
    margin-left: 10px;
    align-self: center;
  }

  .noti-thumbnail img {
    width: 22.44px;
    height: 22.26px;
  }

  .micro-icon {
    line-height: 14px;
  }

  #bell-icon {
    width: 22.54px;
    height: 28px;
  }

  .navbar__logo {
    max-width: 30px;
  }

  #mini_logo {
    width: 29.75px;
    height: 30px;
  }

  .mb-modal-title {
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.172;
    text-align: center;
  }

  .mb-modal-subtitle {
    font-size: 1rem;
    color: #cdcdcd;
    padding: 1rem 2.5rem 2rem;
  }

  .signInUp-wrapper {
    padding: 3rem 2.5rem;
  }

  .signInUp-wrapper .field {
    margin-bottom: 20px;
  }

  .signInUp-wrapper .field .form-control {
    background-color: #373737;
    box-shadow: none;
    font-size: 14px;
  }

  .sub_footer {
    margin: auto 1rem;
    flex-direction: column-reverse;
    row-gap: 1rem;
  }

  .list_footer--items {
    grid-template-columns: 1fr 1fr;
  }

  /*Grid*/
  .grid-sm-column-1 {
    grid-template-columns: 1fr;
  }

  .messages-menu .list {
    max-height: 350px;
  }

  .profile-user {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-left: 15px;
  }

  :root {
    --mb-wrap: 20px;
  }

  .mb-section-wrap {
    padding: 0 var(--mb-wrap);
  }

  .mb-section-left-wrap {
    padding-left: var(--mb-wrap);
  }

  .view-all-label {
    font-size: 12px;
    line-height: 1.171;
    text-align: left;
  }
}

@media (max-width: 600px) {

  .search_name,
  .search_address {
    display: block;
    width: 50%;
  }

  .circle__search_btn {
    padding: 0 12px;
  }

  .messages-menu {
    width: 290px;
  }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 400px) {
  .messages-menu {
    right: -66px;
  }

  .profile-menu:before,
  .messages-menu:before {
    border: none;
  }

  .profile-user {
    gap: 1rem;
  }

  .list_footer--items {
    grid-template-columns: 1fr;
  }

  .salon-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .social-list {
    padding: 0;
  }

  .sub_footer {
    text-align: center;
  }
}

@media (max-width: 309px) {
  .messages-menu {
    right: 0;
    transform: translateX(-25%);
    left: 50% !important;
    width: 80vw;
  }

  .profile-menu {
    right: 0px;
    left: -50% !important;
    transform: translateX(-25%);
    width: 90vw;
  }
}

#login_email::placeholder {
  color: #999;
  /* Màu của placeholder */
}

/* Chỉnh màu placeholder cho trường input password */
#login_password::placeholder {
  color: #999;
  /* Màu của placeholder */
}

.grey_placeholder::placeholder {
  color: #cdcdcd;
  /* Màu của placeholder */
}

header input:-webkit-autofill,
header input:-webkit-autofill:hover,
header input:-webkit-autofill:focus {
  border: 1px solid #434346;
  -webkit-text-fill-color: #f1f1f1;
  -webkit-box-shadow: 0 0 0px 1000px #00000000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

.dropdown-menu.profile-menu.show {
  transform: none !important;
  filter: drop-shadow(0px 0px 5px rgba(51, 51, 51, 0.35));
  -webkit-filter: drop-shadow(0px 0px 5px rgba(51, 51, 51, 0.35));
  -moz-filter: drop-shadow(0px 0px 5px rgba(51, 51, 51, 0.35));
}

.n360_card__btn_ov {
  width: 107px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--n360-radius-border-color);
  transition: all 0.3s;
  cursor: pointer;
}

.combo-checkbox {
  background-image: var(--cui-form-check-input-checked-bg-image,
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgba%28255, 255, 255, 0.87%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"));
  border-radius: 50% !important;
  --cui-form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.w-max {
  width: max-content;
}

.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.bullet-text::before {
  content: "• ";
  color: #777777;
  display: inline-block;
  width: 1em;
}

.n360-secondary-btn {
  border-radius: 300px;
  background-color: #fff;
  border: 1px solid var(--n360-main-color);
  color: var(--n360-main-color);
  font-weight: bold;
  padding: 0.65rem 1.85rem;
}

.n360-secondary-btn:hover {
  background-color: #FCEDF2;
}

.n360-success-btn {
  border-radius: 300px;
  background-color: #2A7C2F;
  border: 0;
  color: #fff;
  font-weight: bold;
  padding: 0.65rem 1.85rem;
}

.n360-success-btn.added {
  background-color: #5391FF
}

.translate-x-half {
  transform: translateX(50%);
}

.-translate-x-half {
  transform: translateX(-50%);
}

.fw-placeholder-400::placeholder {
  font-weight: 400;
}

.scrollbar-width-thin {
  scrollbar-width: thin;
}


.animate-loading {
  width: 100%;
  height: 100%;
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 60%) #cbcbcb;
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s animateLoading ease-in-out infinite;
}

@keyframes animateLoading {
  to {
    background-position-x: -20%;
  }
}

/* LoadingDots.css */
.loading-dots {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: 20px;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: var(--n360-main-color);
  border-radius: 50%;
  animation: bounce 0.6s infinite ease-in-out;
}

.dot-1 {
  animation-delay: 0s;
}

.dot-2 {
  animation-delay: 0.15s;
}

.dot-3 {
  animation-delay: 0.3s;
}

@keyframes bounce {

  0%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-8px);
  }
}

.main-fill-color {
  fill: var(--n360-main-color)
}

.sub-space-wrap {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.item-product-payment {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: solid 1px #EFEFEF;
}

.item-product-payment .quantity-control {
  height: 30px;
  margin-right: 1rem;
  margin-left: 1rem;
  display: flex;
  border-radius: 8px;
  border: 1px solid #7f7f7f;
}

.item-product-payment .quantity-control button {
  width: 25px;
  background-color: white;
  border: none;
  border-radius: 8px;
}

.item-product-payment .quantity-control input {
  width: 60px;
  text-align: center;
  border: none;
  border-left: 1px solid #7f7f7f;
  border-right: 1px solid #7f7f7f;
  outline: none;
  height: 27px;
}

.item-product-payment .price {
  min-width: 100px;
  text-align: end;
  white-space: nowrap;
  align-self: center;
}