@font-face {
  font-family: "BubbleRegular";
  src: url("../fonts/regular/Gordita-Regular.woff2");
  font-weight: 400;
}
@font-face {
  font-family: "BubbleMedium";
  src: url("../fonts/medium/Gordita-Medium.woff2");
  font-weight: 500;
}
@font-face {
  font-family: "BubbleBold";
  src: url("../fonts/bold/Gordita-Bold.woff2");
  font-weight: 700;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
}

:root {
  --paragraphMain: 1rem;
  --paragraphLarge: 1.2rem;
  --paragraphLargMeidum: 1.1rem;
  --paragraphMedium: 0.89rem;
  --paragraphSmall: 0.78rem;
  --paragraphTiny: 0.667rem;
  --pagraphTiniest: 0.5rem;
  --displayText: 3.819rem;
  --headerOne: 3.056rem;
  --headerTwo: 2.444rem;
  --headerThree: 1.944rem;
  --headerFour: 1.556rem;
  --headerFive: 1.278rem;
  --headerSix: 1rem;
  --bubbleWhite: #ffffff;
  --neutral-30: #eeeeee;
  --neutral-40: #dbdbdb;
  --neutral-50: #f8f8f8;
  --neutral-100: #ededed;
  --neutral-200: #cfcfcf;
  --neutral-300: #404040;
  --neutral-400: #272829;
  --neutral-500: #000000;
  --bubbleOrange-100: #ff6500;
  --bubbleOrange-200: #f06205;
  --bubbleBlue-50: #eff5ff;
  --bubbleBlue-100: #27374d;
  --bubbleBlue-200: #101823;
  --bubblePink-30: #feeaec;
  --bubblePink-40: #ffc3c9;
  --bubblePink-50: #fff5f6;
  --bubblePink-100: #f67280;
  --bubblePink-200: #ff5769;
  --bubbleDanger-100: #eb1701;
  --bubbleDanger-200: #c51402;
  --success-50: #c6ffea;
  --success-100: #39b54a;
  --success-200: #00aa6c;
  --pending-100: #9300aa;
  --bubbleYesllow-100: #fbbb00;
  --blueGradientTopBottom: linear-gradient(180deg, #27374d 13.44%, rgba(39, 55, 77, 0.3) 100%);
  --orangeGradientTopBottom: linear-gradient(90deg, #ff6500 0%, #fff6e0 100%);
  --pinkGradient: linear-gradient(90deg, #f67280 0%, #35477d 100%);
  --backgroundOverlayDark: rgba(33, 49, 71, 0.5);
  --shadow-one: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

h1,
h2,
h3,
h4,
h,
h6 {
  font-family: "bubbleMedium";
  font-weight: 500;
}

.air-datepicker {
  --adp-cell-background-color-selected: #ff6500 !important;
  --adp-cell-background-color-selected-hover: #ff6500;
  --adp-color-current-date: #ff6500;
  --adp-accent-color: #ff6500;
  --adp-day-name-color: #ff5769;
  --adp-font-family: "BubbleRegular";
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "BubbleRegular";
}

body {
  background-color: var(--neutral-100);
  height: 100vh;
  overflow: hidden;
}

.container {
  padding: 0 24px;
}
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}

label {
  font-family: "BubbleMedium";
  font-size: var(--paragraphSmall);
}

.new-enquiry,
.quote-sent,
.quote-opened,
.not-sent-to-supplier {
  border-radius: 24px;
  color: var(--bubbleWhite);
  padding: 6px 12px;
  font-size: var(--paragraphMedium);
  text-transform: capitalize;
  font-family: "BubbleMedium";
}

.new-enquiry {
  background-color: #404040;
}

.quote-sent {
  background-color: #f28500;
}

.quote-opened {
  background-color: #2566d0;
}

.deposit-paid,
.fully-paid,
.quote-invoice-accepted,
.not-booked,
.pending,
.booked,
.confirmation-not-sent,
.confirmation-sent,
.moved-to-bookings,
.cancelled,
.sent-to-supplier,
.message-count,
.message-cost,
.message-date,
.message-status,
.paid,
.unpaid,
.quote-invoice-paid,
.calendar-pill,
.checking-availability,
.in-progress,
.no-availability,
.unsuccessfull,
.unsuccessful {
  border-radius: 24px;
  color: var(--bubbleWhite);
  padding: 6px 12px;
  font-size: var(--paragraphMedium);
  text-transform: capitalize;
  font-family: "BubbleMedium";
}

.deposit-paid,
.in-progress {
  background-color: #fbbb00;
  color: var(--neutral-400);
}

.fully-paid,
.booked,
.confirmation-sent,
.sent-to-supplier,
.delivered,
.paid,
.quote-invoice-paid {
  background-color: #00aa6c;
}

.moved-to-bookings {
  background-color: #5cb338;
}

.quote-invoice-accepted {
  background-color: #72f6e2;
  color: var(--neutral-400);
}

.pending,
.checking-availability {
  background-color: #9300aa;
}

.confirmation-not-sent,
.not-booked,
.cancelled,
.not-sent-to-supplier,
.failed,
.no-availability,
.unpaid,
.undelivered {
  background-color: #eb1701;
}

.message-count,
.message-cost,
.message-date,
.unsuccessfull,
.unsuccessful {
  background-color: #737373;
}

.no-results-avalable {
  padding: 100px;
  border-radius: 24px;
  overflow: hidden;
}

.feedback-notification-center,
.customer-booking-form-notice-center {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 32px;
}

.success-message,
.error-message {
  width: 100%;
  color: var(--bubbleWhite);
  font-family: "BubbleBold";
  padding: 12px;
  border-radius: 8px;
  font-size: var(--paragraphLargMeidum);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  flex-grow: 1;
}
@media (max-width: 768px) {
  .success-message,
  .error-message {
    font-size: var(--paragraphMedium);
    line-height: 130%;
  }
}

.success-message {
  background-color: var(--success-100) !important;
}

.error-message {
  background-color: var(--bubbleDanger-200) !important;
}

.form-error {
  color: var(--bubbleDanger-100);
  font-family: "BubbleMedium";
  text-transform: capitalize;
  margin-top: 6px;
}

.form-loading-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  z-index: 2;
}

.quick-send-quote {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}
.quick-send-quote img {
  height: 100%;
  width: 100%;
  max-width: 50px;
  max-height: 50px;
  object-fit: contain;
}
.quick-send-quote p {
  font-size: var(--paragraphLarge);
  font-family: "BubbleMedium";
  color: var(--success-100);
}

.notice-item {
  color: var(--bubblePink-100);
  font-family: "BubbleMedium";
  font-size: var(--paragraphMedium);
  text-transform: initial;
  line-height: 130%;
}
@media (max-width: 767px) {
  .toastify.success-message {
    width: 90% !important;
    border-radius: 4px;
  }
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.inner-form-row {
  display: flex;
  align-items: flex-start;
  margin: 0;
  gap: 16px;
  flex-grow: 1;
  width: 100%;
}

.input-element {
  padding: 16px;
  border-radius: 6px;
  outline: 0;
  border: 0;
  width: 100%;
}

.form-button {
  width: 100%;
  border: 0;
  text-align: center;
  text-transform: capitalize;
  border-radius: 6px;
  padding: 16px;
  cursor: pointer;
}

.calendar-pill {
  background-color: var(--bubblePink-200);
}

.mobile-button-and-reload-button {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-reload-button {
  outline: 0;
  border: 0;
  font-size: var(--paragraphLargMeidum);
  text-transform: capitalize;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  transition: all ease-in-out 300ms;
  color: var(--bubbleWhite);
  font-family: "BubbleMedium";
  background-color: var(--bubbleOrange-100);
}
.page-reload-button:hover {
  background-color: var(--bubbleOrange-200);
  color: var(--bubbleWhite);
}
.page-reload-button:hover img {
  filter: brightness(0) invert(1);
}
.page-reload-button {
  padding: 8px;
}

.dashboard-section-container {
  height: 100%;
  overflow: hidden;
}

.dashboard-main-section {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  height: calc(100vh - 48px);
}
.dashboard-main-section .dashboard-left-sidebar {
  max-width: 240px;
  min-width: 240px;
  height: 100%;
  background-color: var(--bubbleWhite);
  border-right: solid 1px var(--neutral-200);
  padding: 16px;
}
@media (max-width: 1024px) {
  .dashboard-main-section .dashboard-left-sidebar {
    display: none;
  }
}
.dashboard-main-section .dashboard-content {
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.dashboard-main-section .dashboard-content #page-start-position {
  padding: 40px 24px 120px 24px;
}
@media (max-width: 767px) {
  .dashboard-main-section .dashboard-content #page-start-position {
    padding-bottom: 70px;
  }
}
.dashboard-main-section .dashboard-content .dynamic-content-per-page {
  max-height: calc(100vh - 64px);
  overflow: hidden;
  overflow-y: auto;
}
@media (max-width: 768px) {
  .dashboard-main-section .dashboard-content .dynamic-content-per-page {
    padding: 24px 16px 60px 16px;
  }
}

.dashboard-left-sidebar.mobile-menu {
  position: fixed;
  right: 0;
  top: 65px;
  z-index: 4;
  display: flex;
  min-width: 100%;
}
@media (max-width: 1024px) {
  .dashboard-left-sidebar.mobile-menu {
    top: 100px;
    height: calc(100vh - 100px);
    overflow: hidden;
    overflow-y: auto;
  }
}
@media (max-width: 767px) {
  .dashboard-left-sidebar.mobile-menu {
    top: 66px;
    height: calc(100vh - 66px);
    overflow: hidden;
    overflow-y: auto;
  }
}
.dashboard-left-sidebar.mobile-menu .left-navigation-container {
  min-width: 100%;
}

.left-navigation-container {
  overflow: auto;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  height: 100%;
}
.left-navigation-container .left-navigation-menu-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 32px;
  height: 100%;
}
.left-navigation-container .left-navigation-menu-items a:last-child {
  margin-top: auto;
}
.left-navigation-container .left-navigation-menu-items a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 6px;
  background-color: var(--neutral-100);
  font-family: "BubbleMedium";
  font-weight: 600;
  color: var(--neutral-400);
  font-size: var(--paragraphMain);
  transition: all ease-in-out 300ms;
}
.left-navigation-container .left-navigation-menu-items a:hover {
  background-color: var(--bubbleOrange-100);
  color: var(--bubbleWhite);
  transition: all ease-in-out 300ms;
}
.left-navigation-container .left-navigation-menu-items a:hover img {
  filter: invert(1) brightness(2);
}
.left-navigation-container .left-navigation-menu-items a.active {
  background-color: var(--bubbleOrange-100);
  color: var(--bubbleWhite);
  transition: all ease-in-out 300ms;
}
.left-navigation-container .left-navigation-menu-items a.active img {
  filter: invert(1) brightness(2);
}

.dashboard-logo {
  width: 100%;
}
.dashboard-logo img {
  padding: 6px;
  border-radius: 50%;
  border: solid 2px var(--bubbleBlue-100);
  background-color: var(--bubbleWhite);
}

.dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background-color: var(--neutral-400);
  padding: 16px 24px;
  height: fit-content;
  position: fixed;
  bottom: 0;
}
@media (max-width: 768px) {
  .dashboard-footer {
    padding: 16px;
    gap: 12px;
  }
}
.dashboard-footer p,
.dashboard-footer a {
  color: var(--bubbleWhite);
  text-transform: capitalize;
  font-size: var(--paragraphMedium);
}
@media (max-width: 768px) {
  .dashboard-footer a {
    display: none;
  }
}

.dashboard-top-bar-container {
  padding: 24px;
  background-color: var(--bubbleWhite);
  border-bottom: solid 1px var(--neutral-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
@media (max-width: 768px) {
  .dashboard-top-bar-container {
    padding: 16px;
  }
}
.dashboard-top-bar-container #top-search-bar {
  margin: 0;
}
.dashboard-top-bar-container .dashboard-reference-search-form {
  flex-grow: 1;
  max-width: 70%;
}
@media (max-width: 768px) {
  .dashboard-top-bar-container .dashboard-reference-search-form {
    display: none;
  }
}
.dashboard-top-bar-container .dashboard-reference-search-form .form-item {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  border-radius: 12px;
  gap: 6px;
  padding: 0 12px;
  border: solid 1px var(--neutral-200);
}
.dashboard-top-bar-container .dashboard-reference-search-form .form-item img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.dashboard-top-bar-container .dashboard-reference-search-form .form-item .search_quotes_input {
  flex-grow: 1;
  border: 0;
  padding: 0;
  font-family: "BubbleRegular";
  font-size: var(--paragraphLargMeidum);
  background-color: var(--bubbleWhite);
  padding: 16px 0;
}
.dashboard-top-bar-container .dashboard-reference-search-form .form-item .search_quotes_input:focus {
  outline: none;
  border: 0;
}
.dashboard-top-bar-container .user-card-top {
  margin-left: auto;
}
@media (max-width: 768px) {
  .dashboard-top-bar-container .user-card-top {
    margin-left: initial;
  }
}
.dashboard-top-bar-container .user-card-top .current-user-info {
  max-width: fit-content;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.dashboard-top-bar-container .user-card-top .current-user-info img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .dashboard-top-bar-container .user-card-top .current-user-info img {
    width: 32px;
    height: 32px;
  }
}
.dashboard-top-bar-container .user-card-top .current-user-info p {
  font-family: "BubbleMedium";
}
.dashboard-top-bar-container .user-card-top .user-first-last-name {
  text-transform: capitalize;
}
.dashboard-top-bar-container .mobile-menu-opener {
  flex-direction: column;
  gap: 8px;
  max-width: 40px;
  width: 40px;
  cursor: pointer;
  overflow: hidden;
  display: none;
}
@media (max-width: 1024px) {
  .dashboard-top-bar-container .mobile-menu-opener {
    display: flex;
  }
}
.dashboard-top-bar-container .mobile-menu-opener:hover span {
  background-color: var(--bubbleOrange-200);
}
.dashboard-top-bar-container .mobile-menu-opener:hover span:nth-child(2) {
  max-width: 100%;
}
.dashboard-top-bar-container .mobile-menu-opener span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--bubbleBlue-200);
}
.dashboard-top-bar-container .mobile-menu-opener span:nth-child(2) {
  max-width: 70%;
  margin-left: auto;
}

.page-heading-content {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}
.page-heading-content .filter-form-container {
  width: 100%;
  padding: 24px;
  border-radius: 12px;
  background-color: var(--bubbleWhite);
  border-radius: 12px;
  border: solid 1px var(--neutral-200);
}
.page-heading-content .filter-form-container .form-item {
  margin-bottom: 0;
}
.page-heading-content .filter-form-container.quotes .form-item {
  width: calc((100% - 36px) / 7);
}
@media (max-width: 1526px) {
  .page-heading-content .filter-form-container.quotes .form-item {
    width: calc((100% - 24px) / 4);
  }
}
@media (max-width: 767px) {
  .page-heading-content .filter-form-container.quotes .form-item {
    width: 100%;
  }
}
.page-heading-content .filter-form-container.bookings .form-item {
  width: calc((100% - 36px) / 8);
}
@media (max-width: 1668px) {
  .page-heading-content .filter-form-container.bookings .form-item {
    width: calc((100% - 36px) / 6);
  }
}
@media (max-width: 1526px) {
  .page-heading-content .filter-form-container.bookings .form-item {
    width: calc((100% - 24px) / 3);
  }
}
@media (max-width: 767px) {
  .page-heading-content .filter-form-container.bookings .form-item {
    width: 100%;
  }
}
@media (max-width: 1526px) {
  .page-heading-content .filter-form-container.quotes .filter-button-and-advance-button-container {
    width: 100%;
  }
}
.page-heading-content .add-comment-button {
  outline: 0;
  border: 0;
  font-size: var(--paragraphLargMeidum);
  text-transform: capitalize;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  transition: all ease-in-out 300ms;
  color: var(--bubbleWhite);
  font-family: "BubbleMedium";
  background-color: var(--bubblePink-100);
}
.page-heading-content .add-comment-button:hover {
  background-color: var(--bubblePink-200);
}
.page-heading-content .add-comment-button {
  font-weight: 700;
}
@media (max-width: 768px) {
  .page-heading-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
.page-heading-content a {
  outline: 0;
  border: 0;
  font-size: var(--paragraphLargMeidum);
  text-transform: capitalize;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  transition: all ease-in-out 300ms;
  color: var(--bubbleWhite);
  font-family: "BubbleMedium";
  background-color: var(--bubblePink-100);
}
.page-heading-content a:hover {
  background-color: var(--bubblePink-200);
}
.page-heading-content h1 {
  background: var(--pinkGradient);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: var(--headerThree);
  font-family: "BubbleMedium";
}

.single-quote-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.single-quote-header .form-row {
  gap: 6px;
}
.single-quote-header .form-item {
  margin: 0;
}
@media (max-width: 767px) {
  .single-quote-header {
    flex-direction: column;
    width: 100%;
  }
  .single-quote-header h1 {
    width: 100%;
  }
}

.booking-header {
  flex-direction: row;
}
@media (max-width: 767px) {
  .booking-header {
    flex-direction: column;
  }
  .booking-header .add-comment-button {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .update-quote-status-form {
    width: 100%;
  }
}
.update-quote-status-form .update-quote-status {
  outline: 0;
  border: 0;
  font-size: var(--paragraphLargMeidum);
  text-transform: capitalize;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  transition: all ease-in-out 300ms;
  color: var(--bubbleWhite);
  font-family: "BubbleMedium";
  background-color: var(--bubbleOrange-100);
}
.update-quote-status-form .update-quote-status:hover {
  background-color: var(--bubbleOrange-200);
  color: var(--bubbleWhite);
}
.update-quote-status-form .update-quote-status:hover img {
  filter: brightness(0) invert(1);
}
@media (max-width: 767px) {
  .update-quote-status-form .update-quote-status {
    width: 100%;
  }
}

.filter-button-and-advance-button-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: fit-content;
  gap: 6px;
}
@media (max-width: 768px) {
  .filter-button-and-advance-button-container {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .filter-button-and-advance-button-container .form-item {
    flex-grow: 1;
  }
}
.filter-button-and-advance-button-container .form-item:last-child {
  max-width: fit-content;
}

.table-pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .table-pagination {
    width: 100%;
    flex-wrap: wrap;
  }
}
.table-pagination a {
  padding: 12px 20px;
  min-height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bubbleWhite);
  color: var(--neutral-400);
  border-radius: 6px;
  font-family: "bubbleMedium";
  transition: all ease-in-out 300ms;
}
.table-pagination a:hover {
  background-color: var(--bubblePink-100);
  color: var(--bubbleWhite);
  transition: all ease-in-out 300ms;
}
.table-pagination a.current-page {
  background-color: var(--bubblePink-200);
  color: var(--bubbleWhite);
}

.activity-list-items {
  background-color: var(--bubbleWhite);
  border-radius: 12px 12px;
  padding: 12px 24px 12px 24px;
  border: solid 1px var(--bubbleOrange-100);
  position: relative;
  display: flex;
  flex-direction: column;
}
.activity-list-items .activity-item {
  padding: 12px 0;
  border-bottom: solid 1px var(--neutral-200);
  cursor: pointer;
  transition: all ease-in-out 300ms;
  text-transform: capitalize;
}
.activity-list-items .activity-item:last-child {
  border: 0;
}
.activity-list-items .activity-item:hover {
  background-color: var(--bubbleOrange-100);
  border-bottom: solid 1px var(--bubbleOrange-100);
  color: var(--bubbleWhite);
  padding: 12px;
  border-radius: 6px;
  transition: all ease-in-out 300ms;
}
.activity-list-items .activity-item:hover:last-child {
  border: 0;
}

.access-denied-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-direction: column;
  background-color: var(--bubbleWhite);
  border-radius: 12px;
  border: solid 1px var(--neutral-200);
  width: 100%;
  height: fit-content;
  padding: 120px 60px;
  max-width: 520px;
}
@media (max-width: 767px) {
  .access-denied-container {
    padding: 120px 24px;
    max-width: calc(100vw - 48px);
  }
}
.access-denied-container h1 {
  background: var(--pinkGradient);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: var(--headerThree);
  font-family: "BubbleMedium";
}
.access-denied-container p {
  font-size: var(--paragraphLargMeidum);
  text-align: center;
  line-height: 140%;
}/*# sourceMappingURL=styles.css.map */