body {
  width: 100%;
  overflow-x: hidden;
  background-color: #DDD; }
  body #app {
    width: 100%;
    overflow-x: hidden; }
  body #convolab-chattitle h4 {
    font-family: 'DB Ozone X'; }
  body #convolab-preform ::selection {
    background-color: #a5fc00;
    color: #333333;
    text-shadow: none; }
  body #convolab-preform h4 {
    font-family: 'DB Ozone X';
    font-size: 24px;
    line-height: 1; }
  body #convolab-preform .convolab-prefill-submit {
    padding-top: 0; }
  body #convolab-chatbtn {
    bottom: 0; }
  body .ml-1px {
    margin-left: 1px !important; }
  body .mr-1px {
    margin-right: 1px !important; }
  body .ml-10px {
    margin-left: 10px !important; }
  body .mr-10px {
    margin-right: 10px !important; }
  body .ml-12px {
    margin-left: 12px !important; }
  body .mr-12px {
    margin-right: 12px !important; }
  body .ml-20px {
    margin-left: 20px !important; }
  body .mr-20px {
    margin-right: 20px !important; }
  body .ml-30px {
    margin-left: 30px !important; }
  body .mr-30px {
    margin-right: 30px !important; }
  body .ml-32px {
    margin-left: 32px !important; }
  body .mr-32px {
    margin-right: 32px !important; }
  body .ml-36px {
    margin-left: 36px !important; }
  body .mr-36px {
    margin-right: 36px !important; }
  body .ml-40px {
    margin-left: 40px !important; }
  body .mr-40px {
    margin-right: 40px !important; }
  body .pb-40px {
    padding-bottom: 40px !important; }
  body .drop-shadow {
    box-shadow: 0 16px 14px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.2); }
  body .drop-shadow-fade {
    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1); }
  body .no-scroll, body.no-scroll {
    width: 100%;
    height: 100%;
    overflow: hidden; }
  body .bg-alpha0 {
    background-color: rgba(0, 0, 0, 0); }
  body .bg-full-center {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; }
  body .bg-full-right {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right; }
  body .bg-full-left {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left; }
  body .block-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; }
  body .icon-hamburger {
    width: 50px;
    height: 40px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer; }
    body .icon-hamburger span {
      display: block;
      position: absolute;
      height: 3px;
      width: 100%;
      background: #1F191A;
      border-radius: 3px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out; }
    body .icon-hamburger span:nth-child(1) {
      top: 0px; }
    body .icon-hamburger span:nth-child(2),
    body .icon-hamburger span:nth-child(3) {
      top: 18px; }
    body .icon-hamburger span:nth-child(4) {
      top: 36px; }
    body .icon-hamburger.open span:nth-child(1) {
      top: 18px;
      width: 0%;
      left: 50%; }
    body .icon-hamburger.open span:nth-child(2) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg); }
    body .icon-hamburger.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg); }
    body .icon-hamburger.open span:nth-child(4) {
      top: 18px;
      width: 0%;
      left: 50%; }
  body .icon-flipped {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1); }
  body .btn-toggle-eye {
    width: 22px;
    border: 0;
    outline: 0;
    padding: 0;
    background-image: url(../images/icon-eye-slash.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center; }
    body .btn-toggle-eye.show {
      background-image: url(../images/icon-eye.svg); }
  body .input-password-blur {
    padding-right: 40px; }
  body .password-blur {
    position: absolute;
    height: 50px;
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%); }
  body .badge.badge-warning {
    color: white;
    background-color: #FFA11C; }
  body .btn {
    font-weight: 400;
    font-size: 18px;
    cursor: pointer; }
    body .btn.focus, body .btn:focus {
      box-shadow: none; }
    body .btn.btn-search {
      font-size: 22px;
      line-height: 11px; }
    body .btn.btn-next-sidebar {
      padding: 0.25rem 0 0.25rem 1.75rem;
      font-size: 20px;
      line-height: 10px;
      margin-right: -5px; }
      @media (max-width: 575.98px) {
        body .btn.btn-next-sidebar {
          padding: 0.25rem 0 0.25rem 0.25rem; } }
    body .btn.btn-back-sidebar {
      padding: 0.25rem 1.75rem 0.25rem 0;
      font-size: 20px;
      line-height: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
      @media (max-width: 575.98px) {
        body .btn.btn-back-sidebar {
          padding: 0.25rem 0.25rem 0.25rem 0; } }
      body .btn.btn-back-sidebar i {
        font-size: 22px;
        line-height: 11px; }
      body .btn.btn-back-sidebar span {
        font-size: 27px;
        font-weight: 500; }
    body .btn.btn-bcp {
      height: 36px;
      background-size: 300% 100%;
      border-radius: 50rem;
      color: #fff;
      background-image: linear-gradient(90deg, #85B63C, #249F4B, #249F4B, #85B63C);
      padding: 4px 24px;
      box-shadow: none;
      transition: all .3s ease-in-out; }
      body .btn.btn-bcp:hover {
        background-position: 100% 0; }
    body .btn.btn-circle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 0;
      padding: 0; }
    body .btn.btn-lang {
      border-width: 2px;
      width: 36px;
      height: 36px;
      padding: 4px 8px;
      color: #2D2926;
      font-size: 18px;
      line-height: 1.4;
      border-radius: 50%;
      border-color: #2D2926;
      transition: all .3s ease-in-out; }
      body .btn.btn-lang:hover {
        color: #fff;
        background-color: #3AA537;
        border-color: #3AA537; }
      body .btn.btn-lang.disabled, body .btn.btn-lang:disabled {
        opacity: 0.3; }
    body .btn.btn-form-outline {
      display: inline-block;
      height: 36px;
      font-size: 20px;
      font-family: 'DB Ozone X';
      border-radius: 999px;
      color: #DD7600;
      background: linear-gradient(white, white) padding-box, linear-gradient(to right, #DD7600, #FFAB1C) border-box;
      border: 2px solid transparent;
      box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);
      line-height: 22px;
      padding-left: 15px;
      padding-right: 15px;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation; }
    body .btn.btn-form {
      display: inline-block;
      height: 36px;
      font-size: 20px;
      font-family: 'DB Ozone X';
      border-radius: 999px;
      color: white;
      background-image: linear-gradient(90deg, #DD7600 0%, #FFAB1C 51%, #DD7600 100%);
      background-size: 200% auto;
      border: 2px solid transparent;
      box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);
      line-height: 22px;
      padding-left: 15px;
      padding-right: 15px;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation; }
    body .btn.btn-orange {
      display: inline-block;
      width: 150px;
      height: 36px;
      font-size: 22px;
      font-family: 'DB Ozone X';
      border-radius: 999px;
      color: #FFF;
      line-height: 24px;
      padding-left: 15px;
      padding-right: 10px;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation; }
      body .btn.btn-orange span:first-child {
        float: left; }
      body .btn.btn-orange span:last-child {
        float: right;
        padding-top: 1px; }
      body .btn.btn-orange:hover {
        background-position: right center;
        text-decoration: none; }
        body .btn.btn-orange:hover span:last-child {
          position: relative;
          animation: transformButton 1s forwards;
          animation-direction: normal; }
      body .btn.btn-orange:active {
        transform: scale(0.95); }
      body .btn.btn-orange.left-arrow:hover span:first-child {
        position: relative;
        animation: transformButtonLeft 1s forwards;
        animation-direction: normal; }
      body .btn.btn-orange.left-arrow:hover span:last-child {
        position: relative;
        animation: none;
        animation-direction: normal; }
    body .btn.btn-orange-inner {
      border: 0px;
      box-shadow: 0px 0px 14px -7px #aeafaf;
      background-image: linear-gradient(90deg, #DD7600 0%, #FFAB1C 51%, #DD7600 100%);
      transition: 0.2s;
      background-size: 200% auto; }
    body .btn.btn-orange-outer {
      color: #DD7600;
      background: linear-gradient(white, white) padding-box, linear-gradient(to right, #DD7600, #FFAB1C) border-box;
      border: 2px solid transparent; }
      body .btn.btn-orange-outer span:first-child {
        margin-top: -1px; }
      body .btn.btn-orange-outer span:last-child {
        float: right;
        margin-top: -1px; }

@keyframes transformButton {
  0% {
    left: 0px;
    top: 0px; }
  95% {
    left: 35px;
    top: 0px;
    color: transparent; }
  96% {
    left: -5px;
    top: 0px;
    color: transparent; }
  97% {
    left: -2px;
    top: 0px; }
  100% {
    left: 0px;
    top: 0px; } }

@keyframes transformButtonLeft {
  0% {
    left: 0px;
    top: 0px; }
  95% {
    left: -35px;
    top: 0px;
    color: transparent; }
  96% {
    left: -5px;
    top: 0px;
    color: transparent; }
  97% {
    left: -2px;
    top: 0px; }
  100% {
    left: 0px;
    top: 0px; } }
  body .modal-content {
    max-width: 650px;
    position: relative;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.9); }
  body .closeModal.circle-black-button {
    position: absolute;
    width: 50px;
    height: 50px;
    right: -20px;
    top: -20px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    opacity: 1 !important;
    z-index: 14; }
    @media (max-width: 767.98px) {
      body .closeModal.circle-black-button {
        width: 32px;
        height: 32px;
        right: -12px;
        font-size: 20px; } }

#LoginModalPopup,
#ForgotPasswordModalPopup,
#inviteModalPopup {
  font-family: "DB Ozone X";
  font-weight: 400;
  font-size: 20px; }
  #LoginModalPopup .green-color,
  #ForgotPasswordModalPopup .green-color,
  #inviteModalPopup .green-color {
    color: #00b2a9; }
  #LoginModalPopup .modal-dialog,
  #ForgotPasswordModalPopup .modal-dialog,
  #inviteModalPopup .modal-dialog {
    padding-top: 70px; }
  #LoginModalPopup .modal-content,
  #ForgotPasswordModalPopup .modal-content,
  #inviteModalPopup .modal-content {
    max-width: 650px;
    aspect-ratio: auto;
    position: relative;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    height: 100%; }
    #LoginModalPopup .modal-content p,
    #ForgotPasswordModalPopup .modal-content p,
    #inviteModalPopup .modal-content p {
      line-height: 36px; }
    #LoginModalPopup .modal-content .title,
    #ForgotPasswordModalPopup .modal-content .title,
    #inviteModalPopup .modal-content .title {
      font-weight: 400;
      font-size: clamp(1.75em, 2vw, 2em); }
    #LoginModalPopup .modal-content .Headgreenline,
    #ForgotPasswordModalPopup .modal-content .Headgreenline,
    #inviteModalPopup .modal-content .Headgreenline {
      font-weight: 500;
      font-size: clamp(3em, 2vw, 3.3em);
      color: #00aea5;
      line-height: 3rem; }
    #LoginModalPopup .modal-content .sub-title,
    #ForgotPasswordModalPopup .modal-content .sub-title,
    #inviteModalPopup .modal-content .sub-title {
      margin-top: 10px;
      font-size: 23px;
      font-weight: 500; }
    #LoginModalPopup .modal-content hr,
    #ForgotPasswordModalPopup .modal-content hr,
    #inviteModalPopup .modal-content hr {
      margin: 1px 12rem;
      border-top: 1px solid #B7B8B8; }
    #LoginModalPopup .modal-content a,
    #ForgotPasswordModalPopup .modal-content a,
    #inviteModalPopup .modal-content a {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }
    #LoginModalPopup .modal-content p,
    #ForgotPasswordModalPopup .modal-content p,
    #inviteModalPopup .modal-content p {
      font-size: 21px;
      font-weight: 300; }
  #LoginModalPopup .modal-body,
  #ForgotPasswordModalPopup .modal-body,
  #inviteModalPopup .modal-body {
    padding: 3rem 0 0; }
  #LoginModalPopup .modal-footer,
  #ForgotPasswordModalPopup .modal-footer,
  #inviteModalPopup .modal-footer {
    justify-content: center;
    border: 0; }
    #LoginModalPopup .modal-footer a,
    #ForgotPasswordModalPopup .modal-footer a,
    #inviteModalPopup .modal-footer a {
      color: #00aea5;
      font-size: clamp(1em, 2vw, 1em); }
      #LoginModalPopup .modal-footer a span:nth-child(2),
      #ForgotPasswordModalPopup .modal-footer a span:nth-child(2),
      #inviteModalPopup .modal-footer a span:nth-child(2) {
        text-decoration: underline;
        text-decoration-thickness: 1px; }
    #LoginModalPopup .modal-footer img,
    #ForgotPasswordModalPopup .modal-footer img,
    #inviteModalPopup .modal-footer img {
      width: clamp(1em, 2vw, 1em); }
    #LoginModalPopup .modal-footer img.changepassword,
    #ForgotPasswordModalPopup .modal-footer img.changepassword,
    #inviteModalPopup .modal-footer img.changepassword {
      width: clamp(0.5em, 2vw, 0.7em); }
  #LoginModalPopup .reg-bcg-card,
  #ForgotPasswordModalPopup .reg-bcg-card,
  #inviteModalPopup .reg-bcg-card {
    width: 235px;
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  #LoginModalPopup .closeModal,
  #ForgotPasswordModalPopup .closeModal,
  #inviteModalPopup .closeModal {
    position: absolute;
    width: 50px;
    height: 50px;
    right: -20px;
    top: -20px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    opacity: 1;
    z-index: 14; }
  #LoginModalPopup form,
  #ForgotPasswordModalPopup form,
  #inviteModalPopup form {
    /* Chrome, Safari, Edge, Opera */
    /* Firefox */ }
    #LoginModalPopup form input::-webkit-outer-spin-button,
    #LoginModalPopup form input::-webkit-inner-spin-button,
    #ForgotPasswordModalPopup form input::-webkit-outer-spin-button,
    #ForgotPasswordModalPopup form input::-webkit-inner-spin-button,
    #inviteModalPopup form input::-webkit-outer-spin-button,
    #inviteModalPopup form input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0; }
    #LoginModalPopup form input[type="number"],
    #ForgotPasswordModalPopup form input[type="number"],
    #inviteModalPopup form input[type="number"] {
      -moz-appearance: textfield; }
    #LoginModalPopup form input,
    #ForgotPasswordModalPopup form input,
    #inviteModalPopup form input {
      border-radius: 50px;
      width: 100%;
      background-color: #e6e6e6;
      text-align: center;
      font-size: 18px; }
    #LoginModalPopup form input:read-only,
    #ForgotPasswordModalPopup form input:read-only,
    #inviteModalPopup form input:read-only {
      background-color: #009b92;
      color: #ffffff; }
    #LoginModalPopup form .input-group input,
    #ForgotPasswordModalPopup form .input-group input,
    #inviteModalPopup form .input-group input {
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      width: 1%; }
    #LoginModalPopup form .step,
    #ForgotPasswordModalPopup form .step,
    #inviteModalPopup form .step {
      display: block; }
    #LoginModalPopup form .form-control.is-valid,
    #LoginModalPopup form .was-validated .form-control:valid,
    #ForgotPasswordModalPopup form .form-control.is-valid,
    #ForgotPasswordModalPopup form .was-validated .form-control:valid,
    #inviteModalPopup form .form-control.is-valid,
    #inviteModalPopup form .was-validated .form-control:valid {
      border-color: #a4a5a5;
      background-color: #009b92 !important;
      padding-left: calc(1.5em + 0.75rem) !important;
      background-image: url(../images/icon-correct.svg);
      background-repeat: no-repeat;
      background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
      background-position: left calc(0.75em + 0.1875rem) center !important;
      color: #ffffff;
      font-size: 18px; }

#MainModalPopup .modal-body {
  padding: 0.25rem; }

#MainModalPopup .modal-footer {
  padding-top: 0;
  border: none; }

@media (min-width: 767.98px) {
  #MainModalPopup .modal-dialog {
    max-width: 700px; }
  #MainModalPopup .modal-content {
    max-width: 700px; } }

@media (max-width: 767.98px) {
  #MainModalPopup .modal-dialog {
    margin: 1rem; } }

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 2000;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

/* Transparent Overlay */
.loading:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(20, 20, 20, 0.8), rgba(0, 0, 0, 0.8));
  background: -webkit-radial-gradient(rgba(20, 20, 20, 0.8), rgba(0, 0, 0, 0.8)); }

.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0; }

.loading:not(:required):after {
  content: "";
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1s infinite linear;
  -moz-animation: spinner 1s infinite linear;
  -ms-animation: spinner 1s infinite linear;
  -o-animation: spinner 1s infinite linear;
  animation: spinner 1s infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: #17a2b8 1.5em 0 0 0, #249f4b 1.1em 1.1em 0 0,
 #17a2b8 0 1.5em 0 0, #249f4b -1.1em 1.1em 0 0,
 #17a2b8 -1.5em 0 0 0, #249f4b -1.1em -1.1em 0 0,
 #117a8b 0 -1.5em 0 0, #249f4b 1.1em -1.1em 0 0;
  box-shadow: #17a2b8 1.5em 0 0 0, #249f4b 1.1em 1.1em 0 0,
 #17a2b8 0 1.5em 0 0, #249f4b -1.1em 1.1em 0 0,
 #17a2b8 -1.5em 0 0 0, #249f4b -1.1em -1.1em 0 0,
 #17a2b8 0 -1.5em 0 0, #249f4b 1.1em -1.1em 0 0; }

/* Animation */
@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

header {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  font-family: 'DB Ozone X';
  font-weight: 500;
  font-size: 19.8px; }
  header .dropdown .no-notification {
    border: 0;
    background-color: transparent; }
  header .dropdown.dropdown-profile {
    width: auto; }
    header .dropdown.dropdown-profile.show .dropdown-toggle {
      border-top-left-radius: 18px;
      border-top-right-radius: 18px;
      border-bottom-right-radius: 18px;
      border-bottom-left-radius: 18px;
      background-position: 100% 0; }
      header .dropdown.dropdown-profile.show .dropdown-toggle::after {
        content: "\f106"; }
    header .dropdown.dropdown-profile.show .dropdown-top {
      background-position: 100% 0; }
    header .dropdown.dropdown-profile .dropdown-toggle {
      width: 100%;
      height: 36px;
      text-align: left;
      outline: 0;
      border: 0;
      border-radius: 50rem;
      color: #fff;
      background-size: 300% 100%;
      background-image: linear-gradient(90deg, #85B63C, #249F4B, #249F4B, #85B63C);
      padding: 4px 24px 4px 8px;
      box-shadow: none;
      transition: background-position .3s ease-in-out; }
      header .dropdown.dropdown-profile .dropdown-toggle::after {
        content: "\f107";
        font-family: 'Line Awesome Free';
        font-size: 22.4px;
        font-weight: 900;
        vertical-align: middle;
        border: 0;
        margin-left: 0; }
      header .dropdown.dropdown-profile .dropdown-toggle:hover {
        background-position: 100% 0; }
    header .dropdown.dropdown-profile .icon-profile {
      display: none;
      width: 36px;
      height: 36px; }
    header .dropdown.dropdown-profile .icon-user {
      display: inline-block;
      width: 16px;
      height: 16px; }
    header .dropdown.dropdown-profile .hi-user {
      display: inline-block;
      width: 135px; }
    header .dropdown.dropdown-profile .badge {
      font-size: 12px; }
    header .dropdown.dropdown-profile .customer-name {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      font-size: 17px;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle; }
    header .dropdown.dropdown-profile .dropdown-top .customer-name {
      width: 116px; }
    header .dropdown.dropdown-profile .dropdown-menu {
      display: block;
      width: 100%;
      height: 0;
      min-width: 154px;
      padding: 0;
      margin: -36px 0 0;
      border: 0;
      border-top-left-radius: 18px;
      border-top-right-radius: 18px;
      border-bottom-right-radius: 18px;
      border-bottom-left-radius: 18px;
      background-color: rgba(255, 255, 255, 0.91);
      opacity: 0;
      overflow: hidden;
      transition: opacity .3s ease-in-out; }
      header .dropdown.dropdown-profile .dropdown-menu.show {
        opacity: 1;
        height: auto; }
      header .dropdown.dropdown-profile .dropdown-menu .dropdown-top {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 58px;
        line-height: 20px;
        font-size: 22.4px;
        font-weight: 400;
        color: #fff;
        background-size: 300% 100%;
        background-image: linear-gradient(90deg, #85B63C, #249F4B, #249F4B, #85B63C); }
        header .dropdown.dropdown-profile .dropdown-menu .dropdown-top .la-angle-up {
          font-size: 22.4px;
          -webkit-font-smoothing: auto;
          vertical-align: middle; }
        header .dropdown.dropdown-profile .dropdown-menu .dropdown-top .customer-point {
          font-size: 24px;
          font-weight: 500;
          text-align: center;
          margin-top: -2px;
          overflow: hidden;
          white-space: nowrap; }
      header .dropdown.dropdown-profile .dropdown-menu .dropdown-divider {
        margin: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1); }
      header .dropdown.dropdown-profile .dropdown-menu .dropdown-item {
        color: black;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        vertical-align: middle;
        padding: 0.25rem 1rem; }
        header .dropdown.dropdown-profile .dropdown-menu .dropdown-item .badge {
          float: right;
          margin-top: 2px; }
        header .dropdown.dropdown-profile .dropdown-menu .dropdown-item .las {
          font-size: 16px;
          line-height: 24px;
          vertical-align: middle;
          margin-right: -4px;
          float: right; }
        header .dropdown.dropdown-profile .dropdown-menu .dropdown-item.bottom {
          color: #808080; }
        header .dropdown.dropdown-profile .dropdown-menu .dropdown-item:hover {
          color: #489F3F;
          text-decoration: none;
          background-color: transparent; }
  @media (min-width: 1100px) and (max-width: 1199.98px) {
    header .dropdown.dropdown-profile {
      width: 154px; }
      header .dropdown.dropdown-profile .hi-user {
        width: 119px; }
      header .dropdown.dropdown-profile .dropdown-top .customer-name {
        width: 100px; } }
  @media (max-width: 1099.98px) {
    header .dropdown.dropdown-profile {
      width: 36px; }
      header .dropdown.dropdown-profile.show .dropdown-toggle {
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
        border-bottom-left-radius: 18px; }
        header .dropdown.dropdown-profile.show .dropdown-toggle .icon-profile {
          transform: scaleX(-1);
          -moz-transform: scaleX(-1);
          -webkit-transform: scaleX(-1);
          -ms-transform: scaleX(-1); }
      header .dropdown.dropdown-profile .dropdown-toggle {
        overflow: hidden;
        padding: 0;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
        border-bottom-left-radius: 18px; }
        header .dropdown.dropdown-profile .dropdown-toggle::after {
          display: none; }
        header .dropdown.dropdown-profile .dropdown-toggle .icon-profile {
          display: inline-block; }
        header .dropdown.dropdown-profile .dropdown-toggle .hi-user {
          display: none; }
      header .dropdown.dropdown-profile .hi-user {
        width: 135px; }
      header .dropdown.dropdown-profile .dropdown-top .customer-name {
        width: 116px; }
      header .dropdown.dropdown-profile .dropdown-menu {
        width: auto;
        margin-top: 2px;
        margin-left: -134px;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
        border-bottom-left-radius: 18px;
        overflow: hidden; }
        header .dropdown.dropdown-profile .dropdown-menu .dropdown-top {
          height: 58px; } }
  header .dropdown.dropdown-notification {
    width: auto; }
    header .dropdown.dropdown-notification.show .dropdown-toggle {
      border-top-left-radius: 18px;
      border-top-right-radius: 18px;
      border-bottom-right-radius: 18px;
      border-bottom-left-radius: 18px;
      background-position: 100% 0; }
      header .dropdown.dropdown-notification.show .dropdown-toggle::after {
        content: "\f106"; }
    header .dropdown.dropdown-notification.show .dropdown-top {
      background-position: 100% 0; }
    header .dropdown.dropdown-notification .dropdown-toggle {
      width: 100%;
      height: 36px;
      text-align: left;
      outline: 0;
      border: 0;
      border-radius: 50rem;
      color: #fff;
      background-size: 300% 100%;
      background-image: linear-gradient(90deg, #DD7600 0%, #FFAB1C 51%, #DD7600 100%);
      padding: 4px 24px 4px 8px;
      box-shadow: none;
      transition: background-position .3s ease-in-out; }
      header .dropdown.dropdown-notification .dropdown-toggle::after {
        display: none; }
      header .dropdown.dropdown-notification .dropdown-toggle:hover {
        background-position: 100% 0; }
    header .dropdown.dropdown-notification .icon-profile {
      display: none;
      width: 36px;
      height: 36px; }
    header .dropdown.dropdown-notification .icon-user {
      display: inline-block;
      width: 16px;
      height: 16px; }
    header .dropdown.dropdown-notification .badge {
      font-size: 12px; }
    header .dropdown.dropdown-notification .box-title {
      display: flex;
      align-items: center;
      justify-content: space-between; }
    header .dropdown.dropdown-notification .title-name {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      font-size: 17px;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle; }
    header .dropdown.dropdown-notification .dropdown-menu {
      display: block;
      width: 100%;
      height: 0;
      min-width: 180px;
      padding: 0;
      margin: -36px 0 0;
      border: 0;
      border-top-left-radius: 18px;
      border-top-right-radius: 18px;
      border-bottom-right-radius: 18px;
      border-bottom-left-radius: 18px;
      background-color: rgba(255, 255, 255, 0.91);
      opacity: 0;
      overflow: hidden;
      transition: opacity .3s ease-in-out; }
      header .dropdown.dropdown-notification .dropdown-menu.show {
        opacity: 1;
        height: auto; }
      header .dropdown.dropdown-notification .dropdown-menu .dropdown-top {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        cursor: pointer;
        height: 45px;
        line-height: 20px;
        font-size: 22.4px;
        font-weight: 400;
        color: #fff;
        background-size: 300% 100%;
        background-image: linear-gradient(90deg, #DD7600 0%, #FFAB1C 51%, #DD7600 100%); }
        header .dropdown.dropdown-notification .dropdown-menu .dropdown-top .la-angle-up {
          font-size: 22.4px;
          -webkit-font-smoothing: auto;
          vertical-align: middle; }
        header .dropdown.dropdown-notification .dropdown-menu .dropdown-top .customer-point {
          font-size: 24px;
          font-weight: 500;
          text-align: center;
          margin-top: -2px;
          overflow: hidden;
          white-space: nowrap; }
      header .dropdown.dropdown-notification .dropdown-menu .dropdown-divider {
        margin: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1); }
      header .dropdown.dropdown-notification .dropdown-menu .dropdown-item {
        color: black;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        vertical-align: middle;
        padding: 0.25rem 1rem; }
        header .dropdown.dropdown-notification .dropdown-menu .dropdown-item .badge {
          float: right;
          margin-top: 2px; }
        header .dropdown.dropdown-notification .dropdown-menu .dropdown-item .las {
          font-size: 16px;
          line-height: 24px;
          vertical-align: middle;
          margin-right: -4px;
          float: right; }
        header .dropdown.dropdown-notification .dropdown-menu .dropdown-item.bottom {
          color: #808080; }
        header .dropdown.dropdown-notification .dropdown-menu .dropdown-item:hover {
          color: #D47600;
          text-decoration: none;
          background-color: transparent; }
  header .navbar {
    background-color: rgba(255, 255, 255, 0.6);
    transition: background-color 1.2s ease-out; }
    header .navbar.open, header .navbar.no-opacity {
      background-color: white; }
    header .navbar.open .nav-profile {
      transform: scale(0); }
    header .navbar .btn.btn-profile, header .navbar .btn.btn-login {
      border: 0;
      outline: 0;
      padding: 0; }
    header .navbar .btn.btn-login .btn-bcp {
      width: auto; }
    header .navbar .nav-profile {
      display: flex;
      background-color: #00ADA4;
      width: 36px;
      height: 36px;
      cursor: pointer;
      transition: all .3s ease-in-out; }
    header .navbar .navbar-brand {
      display: flex;
      padding: 0;
      height: 64px;
      transition: all .3s ease-in-out; }
    header .navbar .navbar-toggler {
      border: none;
      padding: 0;
      transform: scale(0.7); }
    header .navbar .navbar-collapse {
      width: 100%; }
    header .navbar .sidebar {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 200%;
      height: calc(100vh - 64px);
      overflow-y: auto;
      transition: all .3s ease-in-out; }
      header .navbar .sidebar.slide-1 {
        transform: translate(-50%); }
      header .navbar .sidebar .column {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        color: #2D2926;
        font-weight: 500;
        font-size: 20px; }
        header .navbar .sidebar .column .btn.btn-profile, header .navbar .sidebar .column .btn.btn-login {
          font-weight: 500;
          font-size: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
        header .navbar .sidebar .column .customer-point {
          white-space: nowrap; }
      header .navbar .sidebar .content {
        display: none; }
        header .navbar .sidebar .content.show {
          display: block; }
        header .navbar .sidebar .content hr {
          margin: -1px 0.25rem 0rem 0.25rem; }
    header .navbar .navbar-nav.mobile .nav-item {
      padding: 0.5rem 0; }
      header .navbar .navbar-nav.mobile .nav-item .nav-link {
        position: relative;
        display: inline-block;
        padding: 0;
        color: #2D2926;
        font-size: 20px;
        transition: all .3s ease-in-out; }
        header .navbar .navbar-nav.mobile .nav-item .nav-link:before {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          height: 3px;
          width: 0;
          background: linear-gradient(90deg, #48a23f, #84bd00);
          transition: all .3s ease-in-out; }
        header .navbar .navbar-nav.mobile .nav-item .nav-link.active {
          color: #249F4B; }
        header .navbar .navbar-nav.mobile .nav-item .nav-link:hover:before {
          width: 100%; }
    header .navbar .navbar-nav.desktop .nav-item {
      cursor: pointer;
      margin: 0 1rem;
      padding: 0.5rem 0; }
      header .navbar .navbar-nav.desktop .nav-item .nav-link {
        position: relative;
        display: inline-block;
        padding: 0;
        color: #2D2926;
        transition: all .3s ease-in-out; }
        header .navbar .navbar-nav.desktop .nav-item .nav-link:before {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          height: 3px;
          width: 0;
          background: linear-gradient(90deg, #D47600, #FFA21C);
          transition: all .3s ease-in-out; }
        header .navbar .navbar-nav.desktop .nav-item .nav-link.active {
          text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff, 0 0 60px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 90px #fff, 0 0 100px #fff;
          color: #249F4B; }
      header .navbar .navbar-nav.desktop .nav-item:hover .nav-link:before {
        width: 100%; }
  header .submenu {
    width: 100%;
    height: 0;
    overflow: hidden;
    background: linear-gradient(90deg, #6eb140, #249f4b 60%);
    transition: all .3s ease-out; }
    header .submenu .nav {
      display: none; }
      header .submenu .nav.show {
        display: flex; }
      header .submenu .nav .nav-item {
        cursor: pointer; }
        header .submenu .nav .nav-item .nav-link {
          font-size: 19.8px;
          line-height: 21px;
          color: #fff; }
    header .submenu.show {
      height: 37px; }
  header .form-search {
    position: absolute;
    z-index: 1;
    width: 0;
    overflow: hidden;
    transition: width .3s ease-in-out; }
    header .form-search.show {
      width: 300px; }
      @media (max-width: 1199.98px) {
        header .form-search.show {
          width: 254px; } }
      @media (max-width: 1099.98px) {
        header .form-search.show {
          width: 136px; } }
    header .form-search .input-search {
      background-color: white; }
    header .form-search .input-underline {
      position: relative;
      margin-top: -20px;
      margin-right: 18px;
      margin-left: 50px;
      border-top: 1px solid black; }
  header .btn-search .form-search {
    margin-left: -17px;
    margin-top: -43px; }
  header .input-search {
    outline: 0;
    color: black;
    font-family: 'DB Ozone X', 'Line Awesome 900';
    background: rgba(0, 0, 0, 0.05) url("../images/icon-search.svg") no-repeat 18px center/20px 20px;
    padding: 0.5rem 1rem 0.5rem 50px; }
    header .input-search::-webkit-input-placeholder, header .input-search::placeholder {
      color: rgba(0, 0, 0, 0.5); }
  header .item-promotion-list {
    border-bottom: 1px solid #e3e3e3; }
    header .item-promotion-list a:hover {
      color: #212529;
      text-decoration: none; }
    header .item-promotion-list .card-horizontal {
      display: flex;
      flex: 1 1 auto;
      padding: 0.25rem; }
      header .item-promotion-list .card-horizontal .img-square-wrapper {
        max-width: 100px; }
      header .item-promotion-list .card-horizontal .max-50 {
        max-width: 50px; }
      header .item-promotion-list .card-horizontal .card-list-body {
        line-height: 1.25rem;
        text-decoration: none;
        color: #252525; }
    header .item-promotion-list .ft-list {
      display: flex;
      justify-content: space-between;
      align-items: center; }
    header .item-promotion-list.unread {
      background: #fff2e0; }
  header .back-menu {
    line-height: 2.5rem;
    cursor: pointer; }
  header .dropdown-item-child {
    width: 100%;
    float: left;
    color: #252525;
    padding: 0.25em 0.5em;
    text-decoration: none; }
  @media (min-width: 1234px) {
    header .mr-w1234-3,
    header .mx-w1234-3 {
      margin-right: 1rem !important; }
    header .ml-w1234-3,
    header .mx-w1234-3 {
      margin-left: 1rem !important; } }
  @media (min-width: 1100px) {
    header .d-w1100-block {
      display: block !important; }
    header .d-w1100-inline-block {
      display: inline-block !important; }
    header .d-w1100-none {
      display: none !important; } }

footer {
  font-family: "DB Ozone X";
  font-weight: 400;
  font-size: 20px;
  background: #0eb0a7;
  background: linear-gradient(145deg, #0eb0a7 0%, #00988f 100%);
  color: #ffffff; }
  @media screen and (max-width: 767.98px) {
    footer {
      font-size: 18px; } }
  footer .footer-logo {
    width: 120px; }
    @media screen and (max-width: 1024px) {
      footer .footer-logo {
        width: 100px; } }
    @media screen and (max-width: 767.98px) {
      footer .footer-logo {
        width: 80px; } }
  footer a {
    color: #ffffff;
    text-decoration: none; }
    footer a:hover {
      color: #ffffff;
      text-decoration: none;
      cursor: pointer; }
  footer .icon-caption p {
    line-height: 1.25rem;
    font-size: clamp(1em, 2vw, 1.5em); }
  footer .icon-caption span {
    font-size: clamp(2em, 2vw, 3.5em);
    font-weight: 500; }
    @media screen and (max-width: 767.98px) {
      footer .icon-caption span {
        line-height: 1em; } }
  footer .footer-copyright {
    font-weight: lighter;
    opacity: 0.75; }
    @media screen and (max-width: 767.98px) {
      footer .footer-copyright {
        font-size: 15px; } }
  footer .followus {
    border-right: 1px solid #ffffff82;
    padding-right: 15px; }
  footer .followus img,
  footer .addfriend img {
    width: 25px; }
    @media screen and (max-width: 767.98px) {
      footer .followus img,
      footer .addfriend img {
        width: 40px; } }

#ams_sdk-button-container {
  width: 200px !important;
  height: 40px !important;
  background-image: url("../images/chat-tab.svg") !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  bottom: 0 !important; }
  @media (max-width: 767px) {
    #ams_sdk-button-container {
      width: 50px !important;
      height: 50px !important;
      background-image: url("../images/chat-button.svg") !important;
      bottom: 15px !important; } }
  #ams_sdk-button-container #ams_sdk-frame-content-header {
    background-color: #ffa41c !important; }