:root {
  --l-primary-50: #f1f7ff;
  --l-primary-100: #e7f5ff;
  --l-primary-200: #b2d2ff;
  --l-primary-300: #ace1ff;
  --l-primary-400: #71cbff;
  --l-primary-500: #1c6fe2;
  --l-primary-600: #0c5fd1;
  --l-primary-700: #0463b2;
  --l-primary-800: #0b3c66;
  --l-primary-900: #0e2941;

  --l-header-travel-color:#555555;
  --l-header-health-color:#555555;
  --l-header-shop-color:#555555;


  --l-primary-tenant-button-text: white;
  --l-primary-tenant-color: #F8F8F8;
  --l-primary-tenant-hover-button: pink;

  --l-secondary-tenant-color: #d27000;
  --l-secondary-tenant-button-text: white;
  --l-secondary-tenant-hover-button: orange;

  --l-tertiary-tenant-color: green;

  --l-grey-100: #fdfafa;
  --l-grey-200: #dfdfdf;
  --l-grey-300: #b5b5b5;
  --l-grey-400: #9e9e9e;
  --l-grey-500: #888888;
  --l-grey-600: #6f6f6f;
  --l-grey-700: #555555;
  --l-grey-800: #303030;
  --l-grey-900: #222222;
  --l-grey-000: #ffffff;
  --l-grey-learn-more: #959595;

  --l-positive-100: #d3efd1;
  --l-positive-200: #a9dfa6;
  --l-positive-700: #347426;
  --l-positive-800: #27551e;

  --l-negative-100: #f5d5da;
  --l-negative-200: #ebacb4;
  --l-negative-500: #d63e47;
  --l-negative-600: #b0343d;
  --l-negative-700: #892c33;
  --l-negative-800: #612329;

  --l-warning-100: #fbe6d4;
  --l-warning-200: #f7cdaa;
  --l-warning-700: #98582a;
  --l-warning-800: #6c4221;

}

.container-laasy {
  padding-right: 7.2rem;
  padding-left: 6.7rem;
  font-family: Helvetica, sans-serif !important;

  @media screen and (max-width: 1020px) {
    padding-right: 4.5rem;
    padding-left: 4.5rem;
  }
  @media screen and (max-width: 600px) {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

/* Authentication form styling*/

.l-form-input {
  border: 1px solid var(--grey-300, #d1d1d1);
  border-radius: 12px;
  height: 48px;
  padding: 0rem 0.75rem;
  outline: none;
}

.l-form-input:focus {
  border: 1px solid var(--l-grey-900);
}

.l-form-input-error {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  img {
    height: 1rem;
  }
}

.l-form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.l-form-button {
  margin: 1rem auto;
  height: 3.5rem;
  width: 100%;
  justify-content: center;
}

.l-form-button:disabled {
  opacity: 0.4;
  border: none;
}

.p-inputtext:enabled:focus {
  box-shadow: none !important;
  border: 1px solid var(--l-grey-900) !important;
}

.p-dialog {
  border: none !important;
  ::-webkit-scrollbar {
    width: 0.4rem !important;
  }

  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }

  ::-webkit-scrollbar-thumb {
    background-color: #d3d3d3;
  }
}

.invalid-autocomplete {
  border: 2px solid var(--negative-500, #d63e47) !important;
  border-radius: 0.9rem;
}
.m-0 {
  margin: 0;
}

.profile {
  .profile-picture-container {
    @extend .m-0;
    cursor: pointer;
    .profile-picture {
      &,
      .img-initials {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        color: #fff;
        text-transform: uppercase !important;
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        font-size: 16px;
      }
    }
  }
}


.account-tabs-header {
  color: var(--Grey-900, #222);
  font-family: Helvetica,sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 32px;
}

.hide-scroll {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.hide-scroll::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

svg{
  color: var(--l-grey-900)!important;
}

.primary-button {
  cursor: pointer !important;
  color: var(--l-primary-tenant-button-text) !important;
  background-color: var(--l-primary-tenant-color) !important;
  &:hover {
    background-color: var(--l-primary-tenant-hover-button) !important;
  }
}

.secondary-button {
  cursor: pointer !important;
  color: var(--l-secondary-tenant-color) !important;
  border-radius: 1.5rem !important;
  border: 1px solid var(--l-secondary-tenant-color, #222) !important;
  &:hover {
    background-color: var(--l-secondary-tenant-hover-button, #ececec) !important;
  }
}
.secondary-button-unselect {
  cursor: pointer !important;
  color: var(--l-grey-900) !important;
  border-radius: 1.5rem !important;
  border: 1px solid var(--l-grey-900) !important;
  &:hover {
    background-color: #dfdfdf !important;
  }
}

.tertiary-button {
  color: var(--l-tertiary-tenant-color) !important;
  text-decoration-line: underline !important;
  cursor: pointer !important;
  &:hover {
    color: var(--l-tertiary-tenant-color) !important;
  }
}

.p-checkbox .p-checkbox-box.p-highlight {
  border-color: var(--l-secondary-tenant-color) !important;
  background: var(--l-secondary-tenant-color) !important;
  box-shadow: none !important;
}

.p-checkbox .p-checkbox-box {
  border-color: var(--l-grey-500) !important;
  box-shadow: none !important;
}

.p-checkbox .p-checkbox-icon path {
  stroke: white !important;
}

a {
  color: var(--l-grey-900) !important;
  text-decoration: none !important;
}
a:focus {
  color: var(--l-grey-900) !important;
}

.a-xs {
  color: var(--l-grey-500) !important;
}
.a-xs:hover {
  color: var(--l-grey-400) !important;
}

a:hover {
  color: var(--l-grey-400) !important;
}

::ng-deep p-button button {
  background-color: var(--l-primary-tenant-color) !important;
  color: var(--l-grey-000);
  border: none !important;
}

::ng-deep p-button button:hover {
  background-color: var(--l-primary-tenant-hover-button) !important;
}

.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text {
  color: var(--l-grey-600);
}
.p-menubar
  .p-menubar-root-list
  > .p-menuitem
  > .p-menuitem-link:not(.p-disabled):focus
  .p-menuitem-text {
  color: var(--l-grey-900);
}
.p-menubar
  .p-menubar-root-list
  > .p-menuitem
  > .p-menuitem-link:not(.p-disabled):hover
  .p-menuitem-text {
  color: var(--l-grey-700);
}
.p-menuitem-link-active .p-menuitem-text {
  font-weight: bold;
  color: var(--l-secondary-tenant-color) !important;
}
.p-menubar {
  border: none;
  background: transparent;
  height: 80px;
  padding: 0.5rem 0rem !important;
}
.p-menubar-button {
  display: none !important;
}

.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
  box-shadow: inset 0 0 0 0.15rem transparent;
}

/* header ends */

/* dropdown starts*/
.p-dropdown:not(.p-disabled).p-focus {
  box-shadow: 0 0 0 0 transparent;
}
/* dropdown ends*/

/* button starts */
.p-button {
  background-color: var(--l-primary-tenant-color) !important;
  border-radius: 24px;
  border: none;
  color: var(--l-primary-tenant-button-text) !important;
  font-size: 12px;
  font-weight: 700;
}
/* TODO all deals button affected */
.p-button:enabled:hover {
  border-color: white !important;
}
::ng-deep p-button:enabled:hover {
  border-color: white !important;
}

.p-button:focus {
  border-radius: 1.5rem;
  border: 2px solid var(--grey-000, #fff);
  background: var(--l-primary-tenant-color, #e3447c);
  box-shadow: none;
}
/* button ends */

/* outlined button starts */
.p-button-outlined {
  background-color: var(--l-grey-000) !important;
  color: var(--l-secondary-tenant-color) !important;
  border: 1px solid var(--l-secondary-tenant-color) !important;
  border-radius: 1.5rem;
}
.p-button-outlined:hover {
  border: 1px solid var(--l-secondary-tenant-color) !important;
  border-radius: 1.5rem;
  background-color: var(--l-secondary-tenant-hover-button) !important;
}
/* outlined butotn ends */

/* dropdown starts */
.p-dropdown {
  border: none;
}

.p-dropdown.p-dropdown-trigger:focus {
  border: none;
}

.p-dropdown-label {
  display: none;
}

.p-dropdown-items-wrapper::-webkit-scrollbar {
  width: 5px !important;
  background-color: var(--l-grey-400);
}

.p-dropdown-items-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--l-grey-600);
}

.p-dropdown-panel {
  border: 1px solid #efefef !important;
  border-radius: 12px;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  color: var(--l-primary-tenant-color);
  background: none;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:hover {
  background-color: var(--l-grey-200) !important;
}

.p-dropdown-item {
  font-size: 14px;
}

.p-dropdown-item:hover {
  background: none;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
  background: none;
  color: unset;
}

/* dropdown starts */