/*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
/* Bulma Utilities */
@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.delete,
.modal-close,
.button,
.file,
.breadcrumb,
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis,
.tabs,
.is-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.select:not(.is-multiple):not(.is-loading)::after,
.navbar-link:not(.is-arrowless)::after {
  border: 3px solid transparent;
  border-radius: 2px;
  border-right: 0;
  border-top: 0;
  content: " ";
  display: block;
  height: 0.625em;
  margin-top: -0.4375em;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: rotate(-45deg);
  transform-origin: center;
  width: 0.625em;
}

.box:not(:last-child),
.content:not(:last-child),
.notification:not(:last-child),
.progress:not(:last-child),
.table:not(:last-child),
.table-container:not(:last-child),
.title:not(:last-child),
.subtitle:not(:last-child),
.block:not(:last-child),
.highlight:not(:last-child),
.breadcrumb:not(:last-child),
.level:not(:last-child),
.message:not(:last-child),
.pagination:not(:last-child),
.tabs:not(:last-child) {
  margin-bottom: 1.5rem;
}

.delete,
.modal-close {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: rgba(10, 10, 10, 0.2);
  border: none;
  border-radius: 290486px;
  cursor: pointer;
  pointer-events: auto;
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 0;
  height: 20px;
  max-height: 20px;
  max-width: 20px;
  min-height: 20px;
  min-width: 20px;
  outline: none;
  position: relative;
  vertical-align: top;
  width: 20px;
}

.delete::before,
.modal-close::before,
.delete::after,
.modal-close::after {
  background-color: white;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform-origin: center center;
}

.delete::before,
.modal-close::before {
  height: 2px;
  width: 50%;
}

.delete::after,
.modal-close::after {
  height: 50%;
  width: 2px;
}

.delete:hover,
.modal-close:hover,
.delete:focus,
.modal-close:focus {
  background-color: rgba(10, 10, 10, 0.3);
}

.delete:active,
.modal-close:active {
  background-color: rgba(10, 10, 10, 0.4);
}

.is-small.delete,
.is-small.modal-close {
  height: 16px;
  max-height: 16px;
  max-width: 16px;
  min-height: 16px;
  min-width: 16px;
  width: 16px;
}

.is-medium.delete,
.is-medium.modal-close {
  height: 24px;
  max-height: 24px;
  max-width: 24px;
  min-height: 24px;
  min-width: 24px;
  width: 24px;
}

.is-large.delete,
.is-large.modal-close {
  height: 32px;
  max-height: 32px;
  max-width: 32px;
  min-height: 32px;
  min-width: 32px;
  width: 32px;
}

.button.is-loading::after,
.loader,
.select.is-loading::after,
.control.is-loading::after {
  animation: spinAround 500ms infinite linear;
  border: 2px solid #dbdbdb;
  border-radius: 290486px;
  border-right-color: transparent;
  border-top-color: transparent;
  content: "";
  display: block;
  height: 1em;
  position: relative;
  width: 1em;
}

.image.is-square img,
.image.is-square .has-ratio,
.image.is-1by1 img,
.image.is-1by1 .has-ratio,
.image.is-5by4 img,
.image.is-5by4 .has-ratio,
.image.is-4by3 img,
.image.is-4by3 .has-ratio,
.image.is-3by2 img,
.image.is-3by2 .has-ratio,
.image.is-5by3 img,
.image.is-5by3 .has-ratio,
.image.is-16by9 img,
.image.is-16by9 .has-ratio,
.image.is-2by1 img,
.image.is-2by1 .has-ratio,
.image.is-3by1 img,
.image.is-3by1 .has-ratio,
.image.is-4by5 img,
.image.is-4by5 .has-ratio,
.image.is-3by4 img,
.image.is-3by4 .has-ratio,
.image.is-2by3 img,
.image.is-2by3 .has-ratio,
.image.is-3by5 img,
.image.is-3by5 .has-ratio,
.image.is-9by16 img,
.image.is-9by16 .has-ratio,
.image.is-1by2 img,
.image.is-1by2 .has-ratio,
.image.is-1by3 img,
.image.is-1by3 .has-ratio,
.modal,
.modal-background,
.is-overlay,
.hero-video {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.button,
.input,
.textarea,
.select select,
.file-cta,
.file-name,
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis {
  -moz-appearance: none;
  -webkit-appearance: none;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: none;
  display: inline-flex;
  font-size: 1rem;
  height: 2.5em;
  justify-content: flex-start;
  line-height: 1.5;
  padding-bottom: calc(0.5em - 1px);
  padding-left: calc(0.75em - 1px);
  padding-right: calc(0.75em - 1px);
  padding-top: calc(0.5em - 1px);
  position: relative;
  vertical-align: top;
}

.button:focus,
.input:focus,
.textarea:focus,
.select select:focus,
.file-cta:focus,
.file-name:focus,
.pagination-previous:focus,
.pagination-next:focus,
.pagination-link:focus,
.pagination-ellipsis:focus,
.is-focused.button,
.is-focused.input,
.is-focused.textarea,
.select select.is-focused,
.is-focused.file-cta,
.is-focused.file-name,
.is-focused.pagination-previous,
.is-focused.pagination-next,
.is-focused.pagination-link,
.is-focused.pagination-ellipsis,
.button:active,
.input:active,
.textarea:active,
.select select:active,
.file-cta:active,
.file-name:active,
.pagination-previous:active,
.pagination-next:active,
.pagination-link:active,
.pagination-ellipsis:active,
.is-active.button,
.is-active.input,
.is-active.textarea,
.select select.is-active,
.is-active.file-cta,
.is-active.file-name,
.is-active.pagination-previous,
.is-active.pagination-next,
.is-active.pagination-link,
.is-active.pagination-ellipsis {
  outline: none;
}

.button[disabled],
.input[disabled],
.textarea[disabled],
.select select[disabled],
.file-cta[disabled],
.file-name[disabled],
.pagination-previous[disabled],
.pagination-next[disabled],
.pagination-link[disabled],
.pagination-ellipsis[disabled],
fieldset[disabled] .button,
fieldset[disabled] .input,
fieldset[disabled] .textarea,
fieldset[disabled] .select select,
.select fieldset[disabled] select,
fieldset[disabled] .file-cta,
fieldset[disabled] .file-name,
fieldset[disabled] .pagination-previous,
fieldset[disabled] .pagination-next,
fieldset[disabled] .pagination-link,
fieldset[disabled] .pagination-ellipsis {
  cursor: not-allowed;
}

/* Bulma Elements */
.box {
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
    0 0px 0 1px rgba(10, 10, 10, 0.02);
  color: #4a4a4a;
  display: block;
  padding: 1.25rem;
}

a.box:hover,
a.box:focus {
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc;
}

a.box:active {
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc;
}

.container {
  flex-grow: 1;
  margin: 0 auto;
  position: relative;
  width: auto;
}

.container.is-fluid {
  max-width: none;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

@media screen and (max-width: 1215px) {
  .container.is-widescreen {
    max-width: 1152px;
  }
}

@media screen and (max-width: 1407px) {
  .container.is-fullhd {
    max-width: 1344px;
  }
}

@media screen and (min-width: 1216px) {
  .container {
    max-width: 1152px;
  }
}

@media screen and (min-width: 1408px) {
  .container {
    max-width: 1344px;
  }
}

.image {
  display: block;
  position: relative;
}

.image img {
  display: block;
  height: auto;
  width: 100%;
}

.image img.is-rounded {
  border-radius: 290486px;
}

.image.is-fullwidth {
  width: 100%;
}

.image.is-square img,
.image.is-square .has-ratio,
.image.is-1by1 img,
.image.is-1by1 .has-ratio,
.image.is-5by4 img,
.image.is-5by4 .has-ratio,
.image.is-4by3 img,
.image.is-4by3 .has-ratio,
.image.is-3by2 img,
.image.is-3by2 .has-ratio,
.image.is-5by3 img,
.image.is-5by3 .has-ratio,
.image.is-16by9 img,
.image.is-16by9 .has-ratio,
.image.is-2by1 img,
.image.is-2by1 .has-ratio,
.image.is-3by1 img,
.image.is-3by1 .has-ratio,
.image.is-4by5 img,
.image.is-4by5 .has-ratio,
.image.is-3by4 img,
.image.is-3by4 .has-ratio,
.image.is-2by3 img,
.image.is-2by3 .has-ratio,
.image.is-3by5 img,
.image.is-3by5 .has-ratio,
.image.is-9by16 img,
.image.is-9by16 .has-ratio,
.image.is-1by2 img,
.image.is-1by2 .has-ratio,
.image.is-1by3 img,
.image.is-1by3 .has-ratio {
  height: 100%;
  width: 100%;
}

.image.is-square,
.image.is-1by1 {
  padding-top: 100%;
}

.image.is-5by4 {
  padding-top: 80%;
}

.image.is-4by3 {
  padding-top: 75%;
}

.image.is-3by2 {
  padding-top: 66.6666%;
}

.image.is-5by3 {
  padding-top: 60%;
}

.image.is-16by9 {
  padding-top: 56.25%;
}

.image.is-2by1 {
  padding-top: 50%;
}

.image.is-3by1 {
  padding-top: 33.3333%;
}

.image.is-4by5 {
  padding-top: 125%;
}

.image.is-3by4 {
  padding-top: 133.3333%;
}

.image.is-2by3 {
  padding-top: 150%;
}

.image.is-3by5 {
  padding-top: 166.6666%;
}

.image.is-9by16 {
  padding-top: 177.7777%;
}

.image.is-1by2 {
  padding-top: 200%;
}

.image.is-1by3 {
  padding-top: 300%;
}

.image.is-16x16 {
  height: 16px;
  width: 16px;
}

.image.is-24x24 {
  height: 24px;
  width: 24px;
}

.image.is-32x32 {
  height: 32px;
  width: 32px;
}

.image.is-48x48 {
  height: 48px;
  width: 48px;
}

.image.is-64x64 {
  height: 64px;
  width: 64px;
}

.image.is-96x96 {
  height: 96px;
  width: 96px;
}

.image.is-128x128 {
  height: 128px;
  width: 128px;
}

/* Bulma Grid */
.column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0.75rem;
}

.columns.is-mobile > .column.is-narrow {
  flex: none;
}

.columns.is-mobile > .column.is-full {
  flex: none;
  width: 100%;
}

.columns.is-mobile > .column.is-three-quarters {
  flex: none;
  width: 75%;
}

.columns.is-mobile > .column.is-two-thirds {
  flex: none;
  width: 66.6666%;
}

.columns.is-mobile > .column.is-half {
  flex: none;
  width: 50%;
}

.columns.is-mobile > .column.is-one-third {
  flex: none;
  width: 33.3333%;
}

.columns.is-mobile > .column.is-one-quarter {
  flex: none;
  width: 25%;
}

.columns.is-mobile > .column.is-one-fifth {
  flex: none;
  width: 20%;
}

.columns.is-mobile > .column.is-two-fifths {
  flex: none;
  width: 40%;
}

.columns.is-mobile > .column.is-three-fifths {
  flex: none;
  width: 60%;
}

.columns.is-mobile > .column.is-four-fifths {
  flex: none;
  width: 80%;
}

.columns.is-mobile > .column.is-offset-three-quarters {
  margin-left: 75%;
}

.columns.is-mobile > .column.is-offset-two-thirds {
  margin-left: 66.6666%;
}

.columns.is-mobile > .column.is-offset-half {
  margin-left: 50%;
}

.columns.is-mobile > .column.is-offset-one-third {
  margin-left: 33.3333%;
}

.columns.is-mobile > .column.is-offset-one-quarter {
  margin-left: 25%;
}

.columns.is-mobile > .column.is-offset-one-fifth {
  margin-left: 20%;
}

.columns.is-mobile > .column.is-offset-two-fifths {
  margin-left: 40%;
}

.columns.is-mobile > .column.is-offset-three-fifths {
  margin-left: 60%;
}

.columns.is-mobile > .column.is-offset-four-fifths {
  margin-left: 80%;
}

.columns.is-mobile > .column.is-0 {
  flex: none;
  width: 0%;
}

.columns.is-mobile > .column.is-offset-0 {
  margin-left: 0%;
}

.columns.is-mobile > .column.is-1 {
  flex: none;
  width: 8.33333%;
}

.columns.is-mobile > .column.is-offset-1 {
  margin-left: 8.33333%;
}

.columns.is-mobile > .column.is-2 {
  flex: none;
  width: 16.66667%;
}

.columns.is-mobile > .column.is-offset-2 {
  margin-left: 16.66667%;
}

.columns.is-mobile > .column.is-3 {
  flex: none;
  width: 25%;
}

.columns.is-mobile > .column.is-offset-3 {
  margin-left: 25%;
}

.columns.is-mobile > .column.is-4 {
  flex: none;
  width: 33.33333%;
}

.columns.is-mobile > .column.is-offset-4 {
  margin-left: 33.33333%;
}

.columns.is-mobile > .column.is-5 {
  flex: none;
  width: 41.66667%;
}

.columns.is-mobile > .column.is-offset-5 {
  margin-left: 41.66667%;
}

.columns.is-mobile > .column.is-6 {
  flex: none;
  width: 50%;
}

.columns.is-mobile > .column.is-offset-6 {
  margin-left: 50%;
}

.columns.is-mobile > .column.is-7 {
  flex: none;
  width: 58.33333%;
}

.columns.is-mobile > .column.is-offset-7 {
  margin-left: 58.33333%;
}

.columns.is-mobile > .column.is-8 {
  flex: none;
  width: 66.66667%;
}

.columns.is-mobile > .column.is-offset-8 {
  margin-left: 66.66667%;
}

.columns.is-mobile > .column.is-9 {
  flex: none;
  width: 75%;
}

.columns.is-mobile > .column.is-offset-9 {
  margin-left: 75%;
}

.columns.is-mobile > .column.is-10 {
  flex: none;
  width: 83.33333%;
}

.columns.is-mobile > .column.is-offset-10 {
  margin-left: 83.33333%;
}

.columns.is-mobile > .column.is-11 {
  flex: none;
  width: 91.66667%;
}

.columns.is-mobile > .column.is-offset-11 {
  margin-left: 91.66667%;
}

.columns.is-mobile > .column.is-12 {
  flex: none;
  width: 100%;
}

.columns.is-mobile > .column.is-offset-12 {
  margin-left: 100%;
}

@media screen and (max-width: 768px) {
  .column.is-narrow-mobile {
    flex: none;
  }
  .column.is-full-mobile {
    flex: none;
    width: 100%;
  }
  .column.is-three-quarters-mobile {
    flex: none;
    width: 75%;
  }
  .column.is-two-thirds-mobile {
    flex: none;
    width: 66.6666%;
  }
  .column.is-half-mobile {
    flex: none;
    width: 50%;
  }
  .column.is-one-third-mobile {
    flex: none;
    width: 33.3333%;
  }
  .column.is-one-quarter-mobile {
    flex: none;
    width: 25%;
  }
  .column.is-one-fifth-mobile {
    flex: none;
    width: 20%;
  }
  .column.is-two-fifths-mobile {
    flex: none;
    width: 40%;
  }
  .column.is-three-fifths-mobile {
    flex: none;
    width: 60%;
  }
  .column.is-four-fifths-mobile {
    flex: none;
    width: 80%;
  }
  .column.is-offset-three-quarters-mobile {
    margin-left: 75%;
  }
  .column.is-offset-two-thirds-mobile {
    margin-left: 66.6666%;
  }
  .column.is-offset-half-mobile {
    margin-left: 50%;
  }
  .column.is-offset-one-third-mobile {
    margin-left: 33.3333%;
  }
  .column.is-offset-one-quarter-mobile {
    margin-left: 25%;
  }
  .column.is-offset-one-fifth-mobile {
    margin-left: 20%;
  }
  .column.is-offset-two-fifths-mobile {
    margin-left: 40%;
  }
  .column.is-offset-three-fifths-mobile {
    margin-left: 60%;
  }
  .column.is-offset-four-fifths-mobile {
    margin-left: 80%;
  }
  .column.is-0-mobile {
    flex: none;
    width: 0%;
  }
  .column.is-offset-0-mobile {
    margin-left: 0%;
  }
  .column.is-1-mobile {
    flex: none;
    width: 8.33333%;
  }
  .column.is-offset-1-mobile {
    margin-left: 8.33333%;
  }
  .column.is-2-mobile {
    flex: none;
    width: 16.66667%;
  }
  .column.is-offset-2-mobile {
    margin-left: 16.66667%;
  }
  .column.is-3-mobile {
    flex: none;
    width: 25%;
  }
  .column.is-offset-3-mobile {
    margin-left: 25%;
  }
  .column.is-4-mobile {
    flex: none;
    width: 33.33333%;
  }
  .column.is-offset-4-mobile {
    margin-left: 33.33333%;
  }
  .column.is-5-mobile {
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-5-mobile {
    margin-left: 41.66667%;
  }
  .column.is-6-mobile {
    flex: none;
    width: 50%;
  }
  .column.is-offset-6-mobile {
    margin-left: 50%;
  }
  .column.is-7-mobile {
    flex: none;
    width: 58.33333%;
  }
  .column.is-offset-7-mobile {
    margin-left: 58.33333%;
  }
  .column.is-8-mobile {
    flex: none;
    width: 66.66667%;
  }
  .column.is-offset-8-mobile {
    margin-left: 66.66667%;
  }
  .column.is-9-mobile {
    flex: none;
    width: 75%;
  }
  .column.is-offset-9-mobile {
    margin-left: 75%;
  }
  .column.is-10-mobile {
    flex: none;
    width: 83.33333%;
  }
  .column.is-offset-10-mobile {
    margin-left: 83.33333%;
  }
  .column.is-11-mobile {
    flex: none;
    width: 91.66667%;
  }
  .column.is-offset-11-mobile {
    margin-left: 91.66667%;
  }
  .column.is-12-mobile {
    flex: none;
    width: 100%;
  }
  .column.is-offset-12-mobile {
    margin-left: 100%;
  }
}

@media screen and (min-width: 769px), print {
  .column.is-narrow,
  .column.is-narrow-tablet {
    flex: none;
  }
  .column.is-full,
  .column.is-full-tablet {
    flex: none;
    width: 100%;
  }
  .column.is-three-quarters,
  .column.is-three-quarters-tablet {
    flex: none;
    width: 75%;
  }
  .column.is-two-thirds,
  .column.is-two-thirds-tablet {
    flex: none;
    width: 66.6666%;
  }
  .column.is-half,
  .column.is-half-tablet {
    flex: none;
    width: 50%;
  }
  .column.is-one-third,
  .column.is-one-third-tablet {
    flex: none;
    width: 33.3333%;
  }
  .column.is-one-quarter,
  .column.is-one-quarter-tablet {
    flex: none;
    width: 25%;
  }
  .column.is-one-fifth,
  .column.is-one-fifth-tablet {
    flex: none;
    width: 20%;
  }
  .column.is-two-fifths,
  .column.is-two-fifths-tablet {
    flex: none;
    width: 40%;
  }
  .column.is-three-fifths,
  .column.is-three-fifths-tablet {
    flex: none;
    width: 60%;
  }
  .column.is-four-fifths,
  .column.is-four-fifths-tablet {
    flex: none;
    width: 80%;
  }
  .column.is-offset-three-quarters,
  .column.is-offset-three-quarters-tablet {
    margin-left: 75%;
  }
  .column.is-offset-two-thirds,
  .column.is-offset-two-thirds-tablet {
    margin-left: 66.6666%;
  }
  .column.is-offset-half,
  .column.is-offset-half-tablet {
    margin-left: 50%;
  }
  .column.is-offset-one-third,
  .column.is-offset-one-third-tablet {
    margin-left: 33.3333%;
  }
  .column.is-offset-one-quarter,
  .column.is-offset-one-quarter-tablet {
    margin-left: 25%;
  }
  .column.is-offset-one-fifth,
  .column.is-offset-one-fifth-tablet {
    margin-left: 20%;
  }
  .column.is-offset-two-fifths,
  .column.is-offset-two-fifths-tablet {
    margin-left: 40%;
  }
  .column.is-offset-three-fifths,
  .column.is-offset-three-fifths-tablet {
    margin-left: 60%;
  }
  .column.is-offset-four-fifths,
  .column.is-offset-four-fifths-tablet {
    margin-left: 80%;
  }
  .column.is-0,
  .column.is-0-tablet {
    flex: none;
    width: 0%;
  }
  .column.is-offset-0,
  .column.is-offset-0-tablet {
    margin-left: 0%;
  }
  .column.is-1,
  .column.is-1-tablet {
    flex: none;
    width: 8.33333%;
  }
  .column.is-offset-1,
  .column.is-offset-1-tablet {
    margin-left: 8.33333%;
  }
  .column.is-2,
  .column.is-2-tablet {
    flex: none;
    width: 16.66667%;
  }
  .column.is-offset-2,
  .column.is-offset-2-tablet {
    margin-left: 16.66667%;
  }
  .column.is-3,
  .column.is-3-tablet {
    flex: none;
    width: 25%;
  }
  .column.is-offset-3,
  .column.is-offset-3-tablet {
    margin-left: 25%;
  }
  .column.is-4,
  .column.is-4-tablet {
    flex: none;
    width: 33.33333%;
  }
  .column.is-offset-4,
  .column.is-offset-4-tablet {
    margin-left: 33.33333%;
  }
  .column.is-5,
  .column.is-5-tablet {
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-5,
  .column.is-offset-5-tablet {
    margin-left: 41.66667%;
  }
  .column.is-6,
  .column.is-6-tablet {
    flex: none;
    width: 50%;
  }
  .column.is-offset-6,
  .column.is-offset-6-tablet {
    margin-left: 50%;
  }
  .column.is-7,
  .column.is-7-tablet {
    flex: none;
    width: 58.33333%;
  }
  .column.is-offset-7,
  .column.is-offset-7-tablet {
    margin-left: 58.33333%;
  }
  .column.is-8,
  .column.is-8-tablet {
    flex: none;
    width: 66.66667%;
  }
  .column.is-offset-8,
  .column.is-offset-8-tablet {
    margin-left: 66.66667%;
  }
  .column.is-9,
  .column.is-9-tablet {
    flex: none;
    width: 75%;
  }
  .column.is-offset-9,
  .column.is-offset-9-tablet {
    margin-left: 75%;
  }
  .column.is-10,
  .column.is-10-tablet {
    flex: none;
    width: 83.33333%;
  }
  .column.is-offset-10,
  .column.is-offset-10-tablet {
    margin-left: 83.33333%;
  }
  .column.is-11,
  .column.is-11-tablet {
    flex: none;
    width: 91.66667%;
  }
  .column.is-offset-11,
  .column.is-offset-11-tablet {
    margin-left: 91.66667%;
  }
  .column.is-12,
  .column.is-12-tablet {
    flex: none;
    width: 100%;
  }
  .column.is-offset-12,
  .column.is-offset-12-tablet {
    margin-left: 100%;
  }
}

@media screen and (max-width: 1023px) {
  .column.is-narrow-touch {
    flex: none;
  }
  .column.is-full-touch {
    flex: none;
    width: 100%;
  }
  .column.is-three-quarters-touch {
    flex: none;
    width: 75%;
  }
  .column.is-two-thirds-touch {
    flex: none;
    width: 66.6666%;
  }
  .column.is-half-touch {
    flex: none;
    width: 50%;
  }
  .column.is-one-third-touch {
    flex: none;
    width: 33.3333%;
  }
  .column.is-one-quarter-touch {
    flex: none;
    width: 25%;
  }
  .column.is-one-fifth-touch {
    flex: none;
    width: 20%;
  }
  .column.is-two-fifths-touch {
    flex: none;
    width: 40%;
  }
  .column.is-three-fifths-touch {
    flex: none;
    width: 60%;
  }
  .column.is-four-fifths-touch {
    flex: none;
    width: 80%;
  }
  .column.is-offset-three-quarters-touch {
    margin-left: 75%;
  }
  .column.is-offset-two-thirds-touch {
    margin-left: 66.6666%;
  }
  .column.is-offset-half-touch {
    margin-left: 50%;
  }
  .column.is-offset-one-third-touch {
    margin-left: 33.3333%;
  }
  .column.is-offset-one-quarter-touch {
    margin-left: 25%;
  }
  .column.is-offset-one-fifth-touch {
    margin-left: 20%;
  }
  .column.is-offset-two-fifths-touch {
    margin-left: 40%;
  }
  .column.is-offset-three-fifths-touch {
    margin-left: 60%;
  }
  .column.is-offset-four-fifths-touch {
    margin-left: 80%;
  }
  .column.is-0-touch {
    flex: none;
    width: 0%;
  }
  .column.is-offset-0-touch {
    margin-left: 0%;
  }
  .column.is-1-touch {
    flex: none;
    width: 8.33333%;
  }
  .column.is-offset-1-touch {
    margin-left: 8.33333%;
  }
  .column.is-2-touch {
    flex: none;
    width: 16.66667%;
  }
  .column.is-offset-2-touch {
    margin-left: 16.66667%;
  }
  .column.is-3-touch {
    flex: none;
    width: 25%;
  }
  .column.is-offset-3-touch {
    margin-left: 25%;
  }
  .column.is-4-touch {
    flex: none;
    width: 33.33333%;
  }
  .column.is-offset-4-touch {
    margin-left: 33.33333%;
  }
  .column.is-5-touch {
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-5-touch {
    margin-left: 41.66667%;
  }
  .column.is-6-touch {
    flex: none;
    width: 50%;
  }
  .column.is-offset-6-touch {
    margin-left: 50%;
  }
  .column.is-7-touch {
    flex: none;
    width: 58.33333%;
  }
  .column.is-offset-7-touch {
    margin-left: 58.33333%;
  }
  .column.is-8-touch {
    flex: none;
    width: 66.66667%;
  }
  .column.is-offset-8-touch {
    margin-left: 66.66667%;
  }
  .column.is-9-touch {
    flex: none;
    width: 75%;
  }
  .column.is-offset-9-touch {
    margin-left: 75%;
  }
  .column.is-10-touch {
    flex: none;
    width: 83.33333%;
  }
  .column.is-offset-10-touch {
    margin-left: 83.33333%;
  }
  .column.is-11-touch {
    flex: none;
    width: 91.66667%;
  }
  .column.is-offset-11-touch {
    margin-left: 91.66667%;
  }
  .column.is-12-touch {
    flex: none;
    width: 100%;
  }
  .column.is-offset-12-touch {
    margin-left: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .column.is-narrow-desktop {
    flex: none;
  }
  .column.is-full-desktop {
    flex: none;
    width: 100%;
  }
  .column.is-three-quarters-desktop {
    flex: none;
    width: 75%;
  }
  .column.is-two-thirds-desktop {
    flex: none;
    width: 66.6666%;
  }
  .column.is-half-desktop {
    flex: none;
    width: 50%;
  }
  .column.is-one-third-desktop {
    flex: none;
    width: 33.3333%;
  }
  .column.is-one-quarter-desktop {
    flex: none;
    width: 25%;
  }
  .column.is-one-fifth-desktop {
    flex: none;
    width: 20%;
  }
  .column.is-two-fifths-desktop {
    flex: none;
    width: 40%;
  }
  .column.is-three-fifths-desktop {
    flex: none;
    width: 60%;
  }
  .column.is-four-fifths-desktop {
    flex: none;
    width: 80%;
  }
  .column.is-offset-three-quarters-desktop {
    margin-left: 75%;
  }
  .column.is-offset-two-thirds-desktop {
    margin-left: 66.6666%;
  }
  .column.is-offset-half-desktop {
    margin-left: 50%;
  }
  .column.is-offset-one-third-desktop {
    margin-left: 33.3333%;
  }
  .column.is-offset-one-quarter-desktop {
    margin-left: 25%;
  }
  .column.is-offset-one-fifth-desktop {
    margin-left: 20%;
  }
  .column.is-offset-two-fifths-desktop {
    margin-left: 40%;
  }
  .column.is-offset-three-fifths-desktop {
    margin-left: 60%;
  }
  .column.is-offset-four-fifths-desktop {
    margin-left: 80%;
  }
  .column.is-0-desktop {
    flex: none;
    width: 0%;
  }
  .column.is-offset-0-desktop {
    margin-left: 0%;
  }
  .column.is-1-desktop {
    flex: none;
    width: 8.33333%;
  }
  .column.is-offset-1-desktop {
    margin-left: 8.33333%;
  }
  .column.is-2-desktop {
    flex: none;
    width: 16.66667%;
  }
  .column.is-offset-2-desktop {
    margin-left: 16.66667%;
  }
  .column.is-3-desktop {
    flex: none;
    width: 25%;
  }
  .column.is-offset-3-desktop {
    margin-left: 25%;
  }
  .column.is-4-desktop {
    flex: none;
    width: 33.33333%;
  }
  .column.is-offset-4-desktop {
    margin-left: 33.33333%;
  }
  .column.is-5-desktop {
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-5-desktop {
    margin-left: 41.66667%;
  }
  .column.is-6-desktop {
    flex: none;
    width: 50%;
  }
  .column.is-offset-6-desktop {
    margin-left: 50%;
  }
  .column.is-7-desktop {
    flex: none;
    width: 58.33333%;
  }
  .column.is-offset-7-desktop {
    margin-left: 58.33333%;
  }
  .column.is-8-desktop {
    flex: none;
    width: 66.66667%;
  }
  .column.is-offset-8-desktop {
    margin-left: 66.66667%;
  }
  .column.is-9-desktop {
    flex: none;
    width: 75%;
  }
  .column.is-offset-9-desktop {
    margin-left: 75%;
  }
  .column.is-10-desktop {
    flex: none;
    width: 83.33333%;
  }
  .column.is-offset-10-desktop {
    margin-left: 83.33333%;
  }
  .column.is-11-desktop {
    flex: none;
    width: 91.66667%;
  }
  .column.is-offset-11-desktop {
    margin-left: 91.66667%;
  }
  .column.is-12-desktop {
    flex: none;
    width: 100%;
  }
  .column.is-offset-12-desktop {
    margin-left: 100%;
  }
}

@media screen and (min-width: 1216px) {
  .column.is-narrow-widescreen {
    flex: none;
  }
  .column.is-full-widescreen {
    flex: none;
    width: 100%;
  }
  .column.is-three-quarters-widescreen {
    flex: none;
    width: 75%;
  }
  .column.is-two-thirds-widescreen {
    flex: none;
    width: 66.6666%;
  }
  .column.is-half-widescreen {
    flex: none;
    width: 50%;
  }
  .column.is-one-third-widescreen {
    flex: none;
    width: 33.3333%;
  }
  .column.is-one-quarter-widescreen {
    flex: none;
    width: 25%;
  }
  .column.is-one-fifth-widescreen {
    flex: none;
    width: 20%;
  }
  .column.is-two-fifths-widescreen {
    flex: none;
    width: 40%;
  }
  .column.is-three-fifths-widescreen {
    flex: none;
    width: 60%;
  }
  .column.is-four-fifths-widescreen {
    flex: none;
    width: 80%;
  }
  .column.is-offset-three-quarters-widescreen {
    margin-left: 75%;
  }
  .column.is-offset-two-thirds-widescreen {
    margin-left: 66.6666%;
  }
  .column.is-offset-half-widescreen {
    margin-left: 50%;
  }
  .column.is-offset-one-third-widescreen {
    margin-left: 33.3333%;
  }
  .column.is-offset-one-quarter-widescreen {
    margin-left: 25%;
  }
  .column.is-offset-one-fifth-widescreen {
    margin-left: 20%;
  }
  .column.is-offset-two-fifths-widescreen {
    margin-left: 40%;
  }
  .column.is-offset-three-fifths-widescreen {
    margin-left: 60%;
  }
  .column.is-offset-four-fifths-widescreen {
    margin-left: 80%;
  }
  .column.is-0-widescreen {
    flex: none;
    width: 0%;
  }
  .column.is-offset-0-widescreen {
    margin-left: 0%;
  }
  .column.is-1-widescreen {
    flex: none;
    width: 8.33333%;
  }
  .column.is-offset-1-widescreen {
    margin-left: 8.33333%;
  }
  .column.is-2-widescreen {
    flex: none;
    width: 16.66667%;
  }
  .column.is-offset-2-widescreen {
    margin-left: 16.66667%;
  }
  .column.is-3-widescreen {
    flex: none;
    width: 25%;
  }
  .column.is-offset-3-widescreen {
    margin-left: 25%;
  }
  .column.is-4-widescreen {
    flex: none;
    width: 33.33333%;
  }
  .column.is-offset-4-widescreen {
    margin-left: 33.33333%;
  }
  .column.is-5-widescreen {
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-5-widescreen {
    margin-left: 41.66667%;
  }
  .column.is-6-widescreen {
    flex: none;
    width: 50%;
  }
  .column.is-offset-6-widescreen {
    margin-left: 50%;
  }
  .column.is-7-widescreen {
    flex: none;
    width: 58.33333%;
  }
  .column.is-offset-7-widescreen {
    margin-left: 58.33333%;
  }
  .column.is-8-widescreen {
    flex: none;
    width: 66.66667%;
  }
  .column.is-offset-8-widescreen {
    margin-left: 66.66667%;
  }
  .column.is-9-widescreen {
    flex: none;
    width: 75%;
  }
  .column.is-offset-9-widescreen {
    margin-left: 75%;
  }
  .column.is-10-widescreen {
    flex: none;
    width: 83.33333%;
  }
  .column.is-offset-10-widescreen {
    margin-left: 83.33333%;
  }
  .column.is-11-widescreen {
    flex: none;
    width: 91.66667%;
  }
  .column.is-offset-11-widescreen {
    margin-left: 91.66667%;
  }
  .column.is-12-widescreen {
    flex: none;
    width: 100%;
  }
  .column.is-offset-12-widescreen {
    margin-left: 100%;
  }
}

@media screen and (min-width: 1408px) {
  .column.is-narrow-fullhd {
    flex: none;
  }
  .column.is-full-fullhd {
    flex: none;
    width: 100%;
  }
  .column.is-three-quarters-fullhd {
    flex: none;
    width: 75%;
  }
  .column.is-two-thirds-fullhd {
    flex: none;
    width: 66.6666%;
  }
  .column.is-half-fullhd {
    flex: none;
    width: 50%;
  }
  .column.is-one-third-fullhd {
    flex: none;
    width: 33.3333%;
  }
  .column.is-one-quarter-fullhd {
    flex: none;
    width: 25%;
  }
  .column.is-one-fifth-fullhd {
    flex: none;
    width: 20%;
  }
  .column.is-two-fifths-fullhd {
    flex: none;
    width: 40%;
  }
  .column.is-three-fifths-fullhd {
    flex: none;
    width: 60%;
  }
  .column.is-four-fifths-fullhd {
    flex: none;
    width: 80%;
  }
  .column.is-offset-three-quarters-fullhd {
    margin-left: 75%;
  }
  .column.is-offset-two-thirds-fullhd {
    margin-left: 66.6666%;
  }
  .column.is-offset-half-fullhd {
    margin-left: 50%;
  }
  .column.is-offset-one-third-fullhd {
    margin-left: 33.3333%;
  }
  .column.is-offset-one-quarter-fullhd {
    margin-left: 25%;
  }
  .column.is-offset-one-fifth-fullhd {
    margin-left: 20%;
  }
  .column.is-offset-two-fifths-fullhd {
    margin-left: 40%;
  }
  .column.is-offset-three-fifths-fullhd {
    margin-left: 60%;
  }
  .column.is-offset-four-fifths-fullhd {
    margin-left: 80%;
  }
  .column.is-0-fullhd {
    flex: none;
    width: 0%;
  }
  .column.is-offset-0-fullhd {
    margin-left: 0%;
  }
  .column.is-1-fullhd {
    flex: none;
    width: 8.33333%;
  }
  .column.is-offset-1-fullhd {
    margin-left: 8.33333%;
  }
  .column.is-2-fullhd {
    flex: none;
    width: 16.66667%;
  }
  .column.is-offset-2-fullhd {
    margin-left: 16.66667%;
  }
  .column.is-3-fullhd {
    flex: none;
    width: 25%;
  }
  .column.is-offset-3-fullhd {
    margin-left: 25%;
  }
  .column.is-4-fullhd {
    flex: none;
    width: 33.33333%;
  }
  .column.is-offset-4-fullhd {
    margin-left: 33.33333%;
  }
  .column.is-5-fullhd {
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-5-fullhd {
    margin-left: 41.66667%;
  }
  .column.is-6-fullhd {
    flex: none;
    width: 50%;
  }
  .column.is-offset-6-fullhd {
    margin-left: 50%;
  }
  .column.is-7-fullhd {
    flex: none;
    width: 58.33333%;
  }
  .column.is-offset-7-fullhd {
    margin-left: 58.33333%;
  }
  .column.is-8-fullhd {
    flex: none;
    width: 66.66667%;
  }
  .column.is-offset-8-fullhd {
    margin-left: 66.66667%;
  }
  .column.is-9-fullhd {
    flex: none;
    width: 75%;
  }
  .column.is-offset-9-fullhd {
    margin-left: 75%;
  }
  .column.is-10-fullhd {
    flex: none;
    width: 83.33333%;
  }
  .column.is-offset-10-fullhd {
    margin-left: 83.33333%;
  }
  .column.is-11-fullhd {
    flex: none;
    width: 91.66667%;
  }
  .column.is-offset-11-fullhd {
    margin-left: 91.66667%;
  }
  .column.is-12-fullhd {
    flex: none;
    width: 100%;
  }
  .column.is-offset-12-fullhd {
    margin-left: 100%;
  }
}

.columns {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  margin-top: -0.75rem;
}

.columns:last-child {
  margin-bottom: -0.75rem;
}

.columns:not(:last-child) {
  margin-bottom: calc(1.5rem - 0.75rem);
}

.columns.is-centered {
  justify-content: center;
}

.columns.is-gapless {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}

.columns.is-gapless > .column {
  margin: 0;
  padding: 0 !important;
}

.columns.is-gapless:not(:last-child) {
  margin-bottom: 1.5rem;
}

.columns.is-gapless:last-child {
  margin-bottom: 0;
}

.columns.is-mobile {
  display: flex;
}

.columns.is-multiline {
  flex-wrap: wrap;
}

.columns.is-vcentered {
  align-items: center;
}

@media screen and (min-width: 769px), print {
  .columns:not(.is-desktop) {
    display: flex;
  }
}

@media screen and (min-width: 1024px) {
  .columns.is-desktop {
    display: flex;
  }
}

.columns.is-variable {
  --columnGap: 0.75rem;
  margin-left: calc(-1 * var(--columnGap));
  margin-right: calc(-1 * var(--columnGap));
}

.columns.is-variable .column {
  padding-left: var(--columnGap);
  padding-right: var(--columnGap);
}

.columns.is-variable.is-0 {
  --columnGap: 0rem;
}

@media screen and (max-width: 768px) {
  .columns.is-variable.is-0-mobile {
    --columnGap: 0rem;
  }
}

@media screen and (min-width: 769px), print {
  .columns.is-variable.is-0-tablet {
    --columnGap: 0rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .columns.is-variable.is-0-tablet-only {
    --columnGap: 0rem;
  }
}

@media screen and (max-width: 1023px) {
  .columns.is-variable.is-0-touch {
    --columnGap: 0rem;
  }
}

@media screen and (min-width: 1024px) {
  .columns.is-variable.is-0-desktop {
    --columnGap: 0rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .columns.is-variable.is-0-desktop-only {
    --columnGap: 0rem;
  }
}

@media screen and (min-width: 1216px) {
  .columns.is-variable.is-0-widescreen {
    --columnGap: 0rem;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .columns.is-variable.is-0-widescreen-only {
    --columnGap: 0rem;
  }
}

@media screen and (min-width: 1408px) {
  .columns.is-variable.is-0-fullhd {
    --columnGap: 0rem;
  }
}

.columns.is-variable.is-1 {
  --columnGap: 0.25rem;
}

@media screen and (max-width: 768px) {
  .columns.is-variable.is-1-mobile {
    --columnGap: 0.25rem;
  }
}

@media screen and (min-width: 769px), print {
  .columns.is-variable.is-1-tablet {
    --columnGap: 0.25rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .columns.is-variable.is-1-tablet-only {
    --columnGap: 0.25rem;
  }
}

@media screen and (max-width: 1023px) {
  .columns.is-variable.is-1-touch {
    --columnGap: 0.25rem;
  }
}

@media screen and (min-width: 1024px) {
  .columns.is-variable.is-1-desktop {
    --columnGap: 0.25rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .columns.is-variable.is-1-desktop-only {
    --columnGap: 0.25rem;
  }
}

@media screen and (min-width: 1216px) {
  .columns.is-variable.is-1-widescreen {
    --columnGap: 0.25rem;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .columns.is-variable.is-1-widescreen-only {
    --columnGap: 0.25rem;
  }
}

@media screen and (min-width: 1408px) {
  .columns.is-variable.is-1-fullhd {
    --columnGap: 0.25rem;
  }
}

.columns.is-variable.is-2 {
  --columnGap: 0.5rem;
}

@media screen and (max-width: 768px) {
  .columns.is-variable.is-2-mobile {
    --columnGap: 0.5rem;
  }
}

@media screen and (min-width: 769px), print {
  .columns.is-variable.is-2-tablet {
    --columnGap: 0.5rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .columns.is-variable.is-2-tablet-only {
    --columnGap: 0.5rem;
  }
}

@media screen and (max-width: 1023px) {
  .columns.is-variable.is-2-touch {
    --columnGap: 0.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .columns.is-variable.is-2-desktop {
    --columnGap: 0.5rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .columns.is-variable.is-2-desktop-only {
    --columnGap: 0.5rem;
  }
}

@media screen and (min-width: 1216px) {
  .columns.is-variable.is-2-widescreen {
    --columnGap: 0.5rem;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .columns.is-variable.is-2-widescreen-only {
    --columnGap: 0.5rem;
  }
}

@media screen and (min-width: 1408px) {
  .columns.is-variable.is-2-fullhd {
    --columnGap: 0.5rem;
  }
}

.columns.is-variable.is-3 {
  --columnGap: 0.75rem;
}

@media screen and (max-width: 768px) {
  .columns.is-variable.is-3-mobile {
    --columnGap: 0.75rem;
  }
}

@media screen and (min-width: 769px), print {
  .columns.is-variable.is-3-tablet {
    --columnGap: 0.75rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .columns.is-variable.is-3-tablet-only {
    --columnGap: 0.75rem;
  }
}

@media screen and (max-width: 1023px) {
  .columns.is-variable.is-3-touch {
    --columnGap: 0.75rem;
  }
}

@media screen and (min-width: 1024px) {
  .columns.is-variable.is-3-desktop {
    --columnGap: 0.75rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .columns.is-variable.is-3-desktop-only {
    --columnGap: 0.75rem;
  }
}

@media screen and (min-width: 1216px) {
  .columns.is-variable.is-3-widescreen {
    --columnGap: 0.75rem;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .columns.is-variable.is-3-widescreen-only {
    --columnGap: 0.75rem;
  }
}

@media screen and (min-width: 1408px) {
  .columns.is-variable.is-3-fullhd {
    --columnGap: 0.75rem;
  }
}

.columns.is-variable.is-4 {
  --columnGap: 1rem;
}

@media screen and (max-width: 768px) {
  .columns.is-variable.is-4-mobile {
    --columnGap: 1rem;
  }
}

@media screen and (min-width: 769px), print {
  .columns.is-variable.is-4-tablet {
    --columnGap: 1rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .columns.is-variable.is-4-tablet-only {
    --columnGap: 1rem;
  }
}

@media screen and (max-width: 1023px) {
  .columns.is-variable.is-4-touch {
    --columnGap: 1rem;
  }
}

@media screen and (min-width: 1024px) {
  .columns.is-variable.is-4-desktop {
    --columnGap: 1rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .columns.is-variable.is-4-desktop-only {
    --columnGap: 1rem;
  }
}

@media screen and (min-width: 1216px) {
  .columns.is-variable.is-4-widescreen {
    --columnGap: 1rem;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .columns.is-variable.is-4-widescreen-only {
    --columnGap: 1rem;
  }
}

@media screen and (min-width: 1408px) {
  .columns.is-variable.is-4-fullhd {
    --columnGap: 1rem;
  }
}

.columns.is-variable.is-5 {
  --columnGap: 1.25rem;
}

@media screen and (max-width: 768px) {
  .columns.is-variable.is-5-mobile {
    --columnGap: 1.25rem;
  }
}

@media screen and (min-width: 769px), print {
  .columns.is-variable.is-5-tablet {
    --columnGap: 1.25rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .columns.is-variable.is-5-tablet-only {
    --columnGap: 1.25rem;
  }
}

@media screen and (max-width: 1023px) {
  .columns.is-variable.is-5-touch {
    --columnGap: 1.25rem;
  }
}

@media screen and (min-width: 1024px) {
  .columns.is-variable.is-5-desktop {
    --columnGap: 1.25rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .columns.is-variable.is-5-desktop-only {
    --columnGap: 1.25rem;
  }
}

@media screen and (min-width: 1216px) {
  .columns.is-variable.is-5-widescreen {
    --columnGap: 1.25rem;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .columns.is-variable.is-5-widescreen-only {
    --columnGap: 1.25rem;
  }
}

@media screen and (min-width: 1408px) {
  .columns.is-variable.is-5-fullhd {
    --columnGap: 1.25rem;
  }
}

.columns.is-variable.is-6 {
  --columnGap: 1.5rem;
}

@media screen and (max-width: 768px) {
  .columns.is-variable.is-6-mobile {
    --columnGap: 1.5rem;
  }
}

@media screen and (min-width: 769px), print {
  .columns.is-variable.is-6-tablet {
    --columnGap: 1.5rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .columns.is-variable.is-6-tablet-only {
    --columnGap: 1.5rem;
  }
}

@media screen and (max-width: 1023px) {
  .columns.is-variable.is-6-touch {
    --columnGap: 1.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .columns.is-variable.is-6-desktop {
    --columnGap: 1.5rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .columns.is-variable.is-6-desktop-only {
    --columnGap: 1.5rem;
  }
}

@media screen and (min-width: 1216px) {
  .columns.is-variable.is-6-widescreen {
    --columnGap: 1.5rem;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .columns.is-variable.is-6-widescreen-only {
    --columnGap: 1.5rem;
  }
}

@media screen and (min-width: 1408px) {
  .columns.is-variable.is-6-fullhd {
    --columnGap: 1.5rem;
  }
}

.columns.is-variable.is-7 {
  --columnGap: 1.75rem;
}

@media screen and (max-width: 768px) {
  .columns.is-variable.is-7-mobile {
    --columnGap: 1.75rem;
  }
}

@media screen and (min-width: 769px), print {
  .columns.is-variable.is-7-tablet {
    --columnGap: 1.75rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .columns.is-variable.is-7-tablet-only {
    --columnGap: 1.75rem;
  }
}

@media screen and (max-width: 1023px) {
  .columns.is-variable.is-7-touch {
    --columnGap: 1.75rem;
  }
}

@media screen and (min-width: 1024px) {
  .columns.is-variable.is-7-desktop {
    --columnGap: 1.75rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .columns.is-variable.is-7-desktop-only {
    --columnGap: 1.75rem;
  }
}

@media screen and (min-width: 1216px) {
  .columns.is-variable.is-7-widescreen {
    --columnGap: 1.75rem;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .columns.is-variable.is-7-widescreen-only {
    --columnGap: 1.75rem;
  }
}

@media screen and (min-width: 1408px) {
  .columns.is-variable.is-7-fullhd {
    --columnGap: 1.75rem;
  }
}

.columns.is-variable.is-8 {
  --columnGap: 2rem;
}

@media screen and (max-width: 768px) {
  .columns.is-variable.is-8-mobile {
    --columnGap: 2rem;
  }
}

@media screen and (min-width: 769px), print {
  .columns.is-variable.is-8-tablet {
    --columnGap: 2rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .columns.is-variable.is-8-tablet-only {
    --columnGap: 2rem;
  }
}

@media screen and (max-width: 1023px) {
  .columns.is-variable.is-8-touch {
    --columnGap: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .columns.is-variable.is-8-desktop {
    --columnGap: 2rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .columns.is-variable.is-8-desktop-only {
    --columnGap: 2rem;
  }
}

@media screen and (min-width: 1216px) {
  .columns.is-variable.is-8-widescreen {
    --columnGap: 2rem;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .columns.is-variable.is-8-widescreen-only {
    --columnGap: 2rem;
  }
}

@media screen and (min-width: 1408px) {
  .columns.is-variable.is-8-fullhd {
    --columnGap: 2rem;
  }
}

.tile {
  align-items: stretch;
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  min-height: -webkit-min-content;
  min-height: min-content;
}

.tile.is-ancestor {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  margin-top: -0.75rem;
}

.tile.is-ancestor:last-child {
  margin-bottom: -0.75rem;
}

.tile.is-ancestor:not(:last-child) {
  margin-bottom: 0.75rem;
}

.tile.is-child {
  margin: 0 !important;
}

.tile.is-parent {
  padding: 0.75rem;
}

.tile.is-vertical {
  flex-direction: column;
}

.tile.is-vertical > .tile.is-child:not(:last-child) {
  margin-bottom: 1.5rem !important;
}

@media screen and (min-width: 769px), print {
  .tile:not(.is-child) {
    display: flex;
  }
  .tile.is-1 {
    flex: none;
    width: 8.33333%;
  }
  .tile.is-2 {
    flex: none;
    width: 16.66667%;
  }
  .tile.is-3 {
    flex: none;
    width: 25%;
  }
  .tile.is-4 {
    flex: none;
    width: 33.33333%;
  }
  .tile.is-5 {
    flex: none;
    width: 41.66667%;
  }
  .tile.is-6 {
    flex: none;
    width: 50%;
  }
  .tile.is-7 {
    flex: none;
    width: 58.33333%;
  }
  .tile.is-8 {
    flex: none;
    width: 66.66667%;
  }
  .tile.is-9 {
    flex: none;
    width: 75%;
  }
  .tile.is-10 {
    flex: none;
    width: 83.33333%;
  }
  .tile.is-11 {
    flex: none;
    width: 91.66667%;
  }
  .tile.is-12 {
    flex: none;
    width: 100%;
  }
}

.is-flex-direction-row {
  flex-direction: row !important;
}

.is-flex-direction-row-reverse {
  flex-direction: row-reverse !important;
}

.is-flex-direction-column {
  flex-direction: column !important;
}

.is-flex-direction-column-reverse {
  flex-direction: column-reverse !important;
}

.is-flex-wrap-nowrap {
  flex-wrap: nowrap !important;
}

.is-flex-wrap-wrap {
  flex-wrap: wrap !important;
}

.is-flex-wrap-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.is-justify-content-flex-start {
  justify-content: flex-start !important;
}

.is-justify-content-flex-end {
  justify-content: flex-end !important;
}

.is-justify-content-center {
  justify-content: center !important;
}

.is-justify-content-space-between {
  justify-content: space-between !important;
}

.is-justify-content-space-around {
  justify-content: space-around !important;
}

.is-justify-content-space-evenly {
  justify-content: space-evenly !important;
}

.is-justify-content-start {
  justify-content: start !important;
}

.is-justify-content-end {
  justify-content: end !important;
}

.is-justify-content-left {
  justify-content: left !important;
}

.is-justify-content-right {
  justify-content: right !important;
}

.is-align-content-flex-start {
  align-content: flex-start !important;
}

.is-align-content-flex-end {
  align-content: flex-end !important;
}

.is-align-content-center {
  align-content: center !important;
}

.is-align-content-space-between {
  align-content: space-between !important;
}

.is-align-content-space-around {
  align-content: space-around !important;
}

.is-align-content-space-evenly {
  align-content: space-evenly !important;
}

.is-align-content-stretch {
  align-content: stretch !important;
}

.is-align-content-start {
  align-content: start !important;
}

.is-align-content-end {
  align-content: end !important;
}

.is-align-content-baseline {
  align-content: baseline !important;
}

.is-align-items-stretch {
  align-items: stretch !important;
}

.is-align-items-flex-start {
  align-items: flex-start !important;
}

.is-align-items-flex-end {
  align-items: flex-end !important;
}

.is-align-items-center {
  align-items: center !important;
}

.is-align-items-baseline {
  align-items: baseline !important;
}

.is-align-items-start {
  align-items: start !important;
}

.is-align-items-end {
  align-items: end !important;
}

.is-align-items-self-start {
  align-items: self-start !important;
}

.is-align-items-self-end {
  align-items: self-end !important;
}

.is-align-self-auto {
  align-self: auto !important;
}

.is-align-self-flex-start {
  align-self: flex-start !important;
}

.is-align-self-flex-end {
  align-self: flex-end !important;
}

.is-align-self-center {
  align-self: center !important;
}

.is-align-self-baseline {
  align-self: baseline !important;
}

.is-align-self-stretch {
  align-self: stretch !important;
}

.is-flex-grow-0 {
  flex-grow: 0 !important;
}

.is-flex-grow-1 {
  flex-grow: 1 !important;
}

.is-flex-grow-2 {
  flex-grow: 2 !important;
}

.is-flex-grow-3 {
  flex-grow: 3 !important;
}

.is-flex-grow-4 {
  flex-grow: 4 !important;
}

.is-flex-grow-5 {
  flex-grow: 5 !important;
}

.is-flex-shrink-0 {
  flex-shrink: 0 !important;
}

.is-flex-shrink-1 {
  flex-shrink: 1 !important;
}

.is-flex-shrink-2 {
  flex-shrink: 2 !important;
}

.is-flex-shrink-3 {
  flex-shrink: 3 !important;
}

.is-flex-shrink-4 {
  flex-shrink: 4 !important;
}

.is-flex-shrink-5 {
  flex-shrink: 5 !important;
}

.is-clearfix::after {
  clear: both;
  content: " ";
  display: table;
}

.is-pulled-left {
  float: left !important;
}

.is-pulled-right {
  float: right !important;
}

.is-radiusless {
  border-radius: 0 !important;
}

.is-shadowless {
  box-shadow: none !important;
}

.is-clickable {
  cursor: pointer !important;
}

.is-clipped {
  overflow: hidden !important;
}

.is-relative {
  position: relative !important;
}

.is-marginless {
  margin: 0 !important;
}

.is-paddingless {
  padding: 0 !important;
}

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

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.m-3 {
  margin: 0.75rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mr-3 {
  margin-right: 0.75rem !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.ml-3 {
  margin-left: 0.75rem !important;
}

.mx-3 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

.my-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.m-4 {
  margin: 1rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mr-4 {
  margin-right: 1rem !important;
}

.mb-4 {
  margin-bottom: 1rem;
}

.ml-4 {
  margin-left: 1rem !important;
}

.mx-4 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.my-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.m-5 {
  margin: 1.5rem !important;
}

.mt-5 {
  margin-top: 1.5rem !important;
}

.mr-5 {
  margin-right: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 1.5rem !important;
}

.ml-5 {
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.my-5 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.m-6 {
  margin: 3rem !important;
}

.mt-6 {
  margin-top: 3rem !important;
}

.mr-6 {
  margin-right: 3rem !important;
}

.mb-6 {
  margin-bottom: 3rem !important;
}

.ml-6 {
  margin-left: 3rem !important;
}

.mx-6 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.my-6 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.p-3 {
  padding: 0.75rem !important;
}

.pt-3 {
  padding-top: 0.75rem !important;
}

.pr-3 {
  padding-right: 0.75rem !important;
}

.pb-3 {
  padding-bottom: 0.75rem !important;
}

.pl-3 {
  padding-left: 0.75rem !important;
}

.px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.p-4 {
  padding: 1rem !important;
}

.pt-4 {
  padding-top: 1rem !important;
}

.pr-4 {
  padding-right: 1rem !important;
}

.pb-4 {
  padding-bottom: 1rem !important;
}

.pl-4 {
  padding-left: 1rem !important;
}

.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.p-5 {
  padding: 1.5rem !important;
}

.pt-5 {
  padding-top: 1.5rem !important;
}

.pr-5 {
  padding-right: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 1.5rem !important;
}

.pl-5 {
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.py-5 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.p-6 {
  padding: 3rem !important;
}

.pt-6 {
  padding-top: 3rem !important;
}

.pr-6 {
  padding-right: 3rem !important;
}

.pb-6 {
  padding-bottom: 3rem !important;
}

.pl-6 {
  padding-left: 3rem !important;
}

.px-6 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.py-6 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.is-size-1 {
  font-size: 3rem !important;
}

.is-size-2 {
  font-size: 2.5rem !important;
}

.is-size-3 {
  font-size: 2rem !important;
}

.is-size-4 {
  font-size: 1.5rem !important;
}

.is-size-5 {
  font-size: 1.25rem !important;
}

.is-size-6 {
  font-size: 1rem !important;
}

.is-size-7 {
  font-size: 0.75rem !important;
}

@media screen and (max-width: 768px) {
  .is-size-1-mobile {
    font-size: 3rem !important;
  }
  .is-size-2-mobile {
    font-size: 2.5rem !important;
  }
  .is-size-3-mobile {
    font-size: 2rem !important;
  }
  .is-size-4-mobile {
    font-size: 1.5rem !important;
  }
  .is-size-5-mobile {
    font-size: 1.25rem !important;
  }
  .is-size-6-mobile {
    font-size: 1rem !important;
  }
  .is-size-7-mobile {
    font-size: 0.75rem !important;
  }
}

@media screen and (min-width: 769px), print {
  .is-size-1-tablet {
    font-size: 3rem !important;
  }
  .is-size-2-tablet {
    font-size: 2.5rem !important;
  }
  .is-size-3-tablet {
    font-size: 2rem !important;
  }
  .is-size-4-tablet {
    font-size: 1.5rem !important;
  }
  .is-size-5-tablet {
    font-size: 1.25rem !important;
  }
  .is-size-6-tablet {
    font-size: 1rem !important;
  }
  .is-size-7-tablet {
    font-size: 0.75rem !important;
  }
}

@media screen and (max-width: 1023px) {
  .is-size-1-touch {
    font-size: 3rem !important;
  }
  .is-size-2-touch {
    font-size: 2.5rem !important;
  }
  .is-size-3-touch {
    font-size: 2rem !important;
  }
  .is-size-4-touch {
    font-size: 1.5rem !important;
  }
  .is-size-5-touch {
    font-size: 1.25rem !important;
  }
  .is-size-6-touch {
    font-size: 1rem !important;
  }
  .is-size-7-touch {
    font-size: 0.75rem !important;
  }
}

@media screen and (min-width: 1024px) {
  .is-size-1-desktop {
    font-size: 3rem !important;
  }
  .is-size-2-desktop {
    font-size: 2.5rem !important;
  }
  .is-size-3-desktop {
    font-size: 2rem !important;
  }
  .is-size-4-desktop {
    font-size: 1.5rem !important;
  }
  .is-size-5-desktop {
    font-size: 1.25rem !important;
  }
  .is-size-6-desktop {
    font-size: 1rem !important;
  }
  .is-size-7-desktop {
    font-size: 0.75rem !important;
  }
}

@media screen and (min-width: 1216px) {
  .is-size-1-widescreen {
    font-size: 3rem !important;
  }
  .is-size-2-widescreen {
    font-size: 2.5rem !important;
  }
  .is-size-3-widescreen {
    font-size: 2rem !important;
  }
  .is-size-4-widescreen {
    font-size: 1.5rem !important;
  }
  .is-size-5-widescreen {
    font-size: 1.25rem !important;
  }
  .is-size-6-widescreen {
    font-size: 1rem !important;
  }
  .is-size-7-widescreen {
    font-size: 0.75rem !important;
  }
}

@media screen and (min-width: 1408px) {
  .is-size-1-fullhd {
    font-size: 3rem !important;
  }
  .is-size-2-fullhd {
    font-size: 2.5rem !important;
  }
  .is-size-3-fullhd {
    font-size: 2rem !important;
  }
  .is-size-4-fullhd {
    font-size: 1.5rem !important;
  }
  .is-size-5-fullhd {
    font-size: 1.25rem !important;
  }
  .is-size-6-fullhd {
    font-size: 1rem !important;
  }
  .is-size-7-fullhd {
    font-size: 0.75rem !important;
  }
}

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

.has-text-justified {
  text-align: justify !important;
}

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

.has-text-right {
  text-align: right !important;
}

@media screen and (max-width: 768px) {
  .has-text-centered-mobile {
    text-align: center !important;
  }
}

@media screen and (min-width: 769px), print {
  .has-text-centered-tablet {
    text-align: center !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .has-text-centered-tablet-only {
    text-align: center !important;
  }
}

@media screen and (max-width: 1023px) {
  .has-text-centered-touch {
    text-align: center !important;
  }
}

@media screen and (min-width: 1024px) {
  .has-text-centered-desktop {
    text-align: center !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .has-text-centered-desktop-only {
    text-align: center !important;
  }
}

@media screen and (min-width: 1216px) {
  .has-text-centered-widescreen {
    text-align: center !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .has-text-centered-widescreen-only {
    text-align: center !important;
  }
}

@media screen and (min-width: 1408px) {
  .has-text-centered-fullhd {
    text-align: center !important;
  }
}

@media screen and (max-width: 768px) {
  .has-text-justified-mobile {
    text-align: justify !important;
  }
}

@media screen and (min-width: 769px), print {
  .has-text-justified-tablet {
    text-align: justify !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .has-text-justified-tablet-only {
    text-align: justify !important;
  }
}

@media screen and (max-width: 1023px) {
  .has-text-justified-touch {
    text-align: justify !important;
  }
}

@media screen and (min-width: 1024px) {
  .has-text-justified-desktop {
    text-align: justify !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .has-text-justified-desktop-only {
    text-align: justify !important;
  }
}

@media screen and (min-width: 1216px) {
  .has-text-justified-widescreen {
    text-align: justify !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .has-text-justified-widescreen-only {
    text-align: justify !important;
  }
}

@media screen and (min-width: 1408px) {
  .has-text-justified-fullhd {
    text-align: justify !important;
  }
}

@media screen and (max-width: 768px) {
  .has-text-left-mobile {
    text-align: left !important;
  }
}

@media screen and (min-width: 769px), print {
  .has-text-left-tablet {
    text-align: left !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .has-text-left-tablet-only {
    text-align: left !important;
  }
}

@media screen and (max-width: 1023px) {
  .has-text-left-touch {
    text-align: left !important;
  }
}

@media screen and (min-width: 1024px) {
  .has-text-left-desktop {
    text-align: left !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .has-text-left-desktop-only {
    text-align: left !important;
  }
}

@media screen and (min-width: 1216px) {
  .has-text-left-widescreen {
    text-align: left !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .has-text-left-widescreen-only {
    text-align: left !important;
  }
}

@media screen and (min-width: 1408px) {
  .has-text-left-fullhd {
    text-align: left !important;
  }
}

@media screen and (max-width: 768px) {
  .has-text-right-mobile {
    text-align: right !important;
  }
}

@media screen and (min-width: 769px), print {
  .has-text-right-tablet {
    text-align: right !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .has-text-right-tablet-only {
    text-align: right !important;
  }
}

@media screen and (max-width: 1023px) {
  .has-text-right-touch {
    text-align: right !important;
  }
}

@media screen and (min-width: 1024px) {
  .has-text-right-desktop {
    text-align: right !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .has-text-right-desktop-only {
    text-align: right !important;
  }
}

@media screen and (min-width: 1216px) {
  .has-text-right-widescreen {
    text-align: right !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .has-text-right-widescreen-only {
    text-align: right !important;
  }
}

@media screen and (min-width: 1408px) {
  .has-text-right-fullhd {
    text-align: right !important;
  }
}

.is-capitalized {
  text-transform: capitalize !important;
}

.is-lowercase {
  text-transform: lowercase !important;
}

.is-uppercase {
  text-transform: uppercase !important;
}

.is-italic {
  font-style: italic !important;
}

.has-text-weight-light {
  font-weight: 300 !important;
}

.has-text-weight-normal {
  font-weight: 400 !important;
}

.has-text-weight-medium {
  font-weight: 500 !important;
}

.has-text-weight-semibold {
  font-weight: 600 !important;
}

.has-text-weight-bold {
  font-weight: 700 !important;
}

.is-family-primary {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    "Helvetica", "Arial", sans-serif !important;
}

.is-family-secondary {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    "Helvetica", "Arial", sans-serif !important;
}

.is-family-sans-serif {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    "Helvetica", "Arial", sans-serif !important;
}

.is-family-monospace {
  font-family: monospace !important;
}

.is-family-code {
  font-family: monospace !important;
}

.is-block {
  display: block !important;
}

@media screen and (max-width: 768px) {
  .is-block-mobile {
    display: block !important;
  }
}

@media screen and (min-width: 769px), print {
  .is-block-tablet {
    display: block !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .is-block-tablet-only {
    display: block !important;
  }
}

@media screen and (max-width: 1023px) {
  .is-block-touch {
    display: block !important;
  }
}

@media screen and (min-width: 1024px) {
  .is-block-desktop {
    display: block !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .is-block-desktop-only {
    display: block !important;
  }
}

@media screen and (min-width: 1216px) {
  .is-block-widescreen {
    display: block !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .is-block-widescreen-only {
    display: block !important;
  }
}

@media screen and (min-width: 1408px) {
  .is-block-fullhd {
    display: block !important;
  }
}

.is-flex {
  display: flex !important;
}

@media screen and (max-width: 768px) {
  .is-flex-mobile {
    display: flex !important;
  }
}

@media screen and (min-width: 769px), print {
  .is-flex-tablet {
    display: flex !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .is-flex-tablet-only {
    display: flex !important;
  }
}

@media screen and (max-width: 1023px) {
  .is-flex-touch {
    display: flex !important;
  }
}

@media screen and (min-width: 1024px) {
  .is-flex-desktop {
    display: flex !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .is-flex-desktop-only {
    display: flex !important;
  }
}

@media screen and (min-width: 1216px) {
  .is-flex-widescreen {
    display: flex !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .is-flex-widescreen-only {
    display: flex !important;
  }
}

@media screen and (min-width: 1408px) {
  .is-flex-fullhd {
    display: flex !important;
  }
}

.is-inline {
  display: inline !important;
}

@media screen and (max-width: 768px) {
  .is-inline-mobile {
    display: inline !important;
  }
}

@media screen and (min-width: 769px), print {
  .is-inline-tablet {
    display: inline !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .is-inline-tablet-only {
    display: inline !important;
  }
}

@media screen and (max-width: 1023px) {
  .is-inline-touch {
    display: inline !important;
  }
}

@media screen and (min-width: 1024px) {
  .is-inline-desktop {
    display: inline !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .is-inline-desktop-only {
    display: inline !important;
  }
}

@media screen and (min-width: 1216px) {
  .is-inline-widescreen {
    display: inline !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .is-inline-widescreen-only {
    display: inline !important;
  }
}

@media screen and (min-width: 1408px) {
  .is-inline-fullhd {
    display: inline !important;
  }
}

.is-inline-block {
  display: inline-block !important;
}

@media screen and (max-width: 768px) {
  .is-inline-block-mobile {
    display: inline-block !important;
  }
}

@media screen and (min-width: 769px), print {
  .is-inline-block-tablet {
    display: inline-block !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .is-inline-block-tablet-only {
    display: inline-block !important;
  }
}

@media screen and (max-width: 1023px) {
  .is-inline-block-touch {
    display: inline-block !important;
  }
}

@media screen and (min-width: 1024px) {
  .is-inline-block-desktop {
    display: inline-block !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .is-inline-block-desktop-only {
    display: inline-block !important;
  }
}

@media screen and (min-width: 1216px) {
  .is-inline-block-widescreen {
    display: inline-block !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .is-inline-block-widescreen-only {
    display: inline-block !important;
  }
}

@media screen and (min-width: 1408px) {
  .is-inline-block-fullhd {
    display: inline-block !important;
  }
}

.is-inline-flex {
  display: inline-flex !important;
}

@media screen and (max-width: 768px) {
  .is-inline-flex-mobile {
    display: inline-flex !important;
  }
}

@media screen and (min-width: 769px), print {
  .is-inline-flex-tablet {
    display: inline-flex !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .is-inline-flex-tablet-only {
    display: inline-flex !important;
  }
}

@media screen and (max-width: 1023px) {
  .is-inline-flex-touch {
    display: inline-flex !important;
  }
}

@media screen and (min-width: 1024px) {
  .is-inline-flex-desktop {
    display: inline-flex !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .is-inline-flex-desktop-only {
    display: inline-flex !important;
  }
}

@media screen and (min-width: 1216px) {
  .is-inline-flex-widescreen {
    display: inline-flex !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .is-inline-flex-widescreen-only {
    display: inline-flex !important;
  }
}

@media screen and (min-width: 1408px) {
  .is-inline-flex-fullhd {
    display: inline-flex !important;
  }
}

.is-hidden {
  display: none !important;
}

.is-sr-only {
  border: none !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 0.01em !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 0.01em !important;
}

@media screen and (max-width: 768px) {
  .is-hidden-mobile {
    display: none !important;
  }
}

@media screen and (min-width: 769px), print {
  .is-hidden-tablet {
    display: none !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .is-hidden-tablet-only {
    display: none !important;
  }
}

@media screen and (max-width: 1023px) {
  .is-hidden-touch {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) {
  .is-hidden-desktop {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .is-hidden-desktop-only {
    display: none !important;
  }
}

@media screen and (min-width: 1216px) {
  .is-hidden-widescreen {
    display: none !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .is-hidden-widescreen-only {
    display: none !important;
  }
}

@media screen and (min-width: 1408px) {
  .is-hidden-fullhd {
    display: none !important;
  }
}

.is-invisible {
  visibility: hidden !important;
}

@media screen and (max-width: 768px) {
  .is-invisible-mobile {
    visibility: hidden !important;
  }
}

@media screen and (min-width: 769px), print {
  .is-invisible-tablet {
    visibility: hidden !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .is-invisible-tablet-only {
    visibility: hidden !important;
  }
}

@media screen and (max-width: 1023px) {
  .is-invisible-touch {
    visibility: hidden !important;
  }
}

@media screen and (min-width: 1024px) {
  .is-invisible-desktop {
    visibility: hidden !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .is-invisible-desktop-only {
    visibility: hidden !important;
  }
}

@media screen and (min-width: 1216px) {
  .is-invisible-widescreen {
    visibility: hidden !important;
  }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
  .is-invisible-widescreen-only {
    visibility: hidden !important;
  }
}

@media screen and (min-width: 1408px) {
  .is-invisible-fullhd {
    visibility: hidden !important;
  }
}
.blink {
  background: white;
  animation: blink-animation 0.5s steps(5, start) infinite;
  -webkit-animation: blink-animation 0.5s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 50px;
}

.lds-ellipsis div {
  position: absolute;
  top: -8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  /* background: #ffffff; */
  background: #07032b;
  /* background: var(--primary-text-color); */
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis.chat-widget div {
  background: #07032b;
  background: var(--primary-text-color);
}

.lds-ellipsis div:nth-child(1) {
  left: 5px;
  animation: lds-ellipsis1 0.7s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 5px;
  animation: lds-ellipsis2 0.7s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 20px;
  animation: lds-ellipsis2 0.7s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 35px;
  animation: lds-ellipsis3 0.7s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(15px, 0);
  }
}

.bot-chat-bubble-container {
  margin-bottom: 24px;
}

.bot-chat-bubble-container .bot-chat-bubble {
  display: flex;
  position: relative;
  padding-left: 50px;
}

.bot-chat-avatar-container {
  width: 35px;
  height: 35px;
  box-shadow: 0 0 10px rgba(215, 214, 230, 0.5);
  border-radius: 50%;
  margin-right: 8px;
  position: absolute;
  bottom: 0px;
  left: 0;
  min-width: 35px;
  min-height: 35px;
  padding: 0px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bot-chat-avatar-container .bot-avatar-img {
  width: 100%;
}

.bot-chat-message {
  border-radius: 35px 35px 35px 0px;
  /* background: linear-gradient(
    to right,
    #f2c667 0%,
    #f2c667 45.31%,
    #f9b234 100%
  ); */
  background: #f9b234;
  background: var(--primary-color);
  padding: 1rem 2.8rem 1rem 1.6rem;
  color: #07032b;
  color: var(--primary-text-color);
  font-weight: 600;
  font-size: 0.85rem;
}

.bot-chat-media-message {
  border-radius: 35px 35px 35px 0px;
  color: #07032b;
  font-weight: 600;
  font-size: 0.85rem;
}

.bot-chat-message img,
.bot-chat-media-message img {
  max-width: 60%;
  height: auto;
  border-radius: 5px;
  display: block;
  margin-bottom: 5px;
}

.bot-chat-time {
  font-size: 0.6rem;
  color: #bfbfbf;
  font-weight: bold;
  margin-top: 2px;
  padding-left: 48px;
}

.bot-chat-feedback-container {
  margin-left: 12px;
}

.bot-chat-feedback-icon {
  font-size: 0.65rem;
  margin-right: 4px;
  cursor: pointer;
}

.bot-chat-feedback-icon:before {
  color: #a8a8a8 !important;
}

.bot-chat-feedback-icon-selected:before {
  color: #f2c667 !important;
}

.bot-chat-message iframe,
.bot-chat-media-message iframe {
  border: none;
  border-radius: 5px;
  max-width: 300px;
}

.bot-chat-media-message a {
  /* background: linear-gradient(
    to right,
    #f2c667 0%,
    #f2c667 45.31%,
    #f9b234 100%
  ); */
  background-color: #f9b234;
  background-color: var(--primary-color);
}

/* Add animation (fade in the popup) */

@keyframes bubbleEntry {
  from {
    transform: (scale(0));
  }
  to {
    transform: (scale(1));
  }
}

.bot-chat-bubble-container .more-menu-wrapper {
  position: absolute;
  right: 40px;
  top: 5px;
}

.bot-chat-bubble-container .more-menu-wrapper:hover .more-dropdown-menu,
.bot-chat-bubble-container .more-menu-button:hover .more-dropdown-menu {
  display: block;
}

.more-dropdown-menu:active {
  display: block;
}

.bot-chat-bubble-container .more-dropdown-menu .header-dropdown-menu-item {
  font-family: "Muli";
  font-size: 0.85rem;
  color: #07032b;
  cursor: pointer;
  letter-spacing: 0.02rem;
  font-weight: 600;
}

.bot-chat-bubble-container .more-dropdown-menu {
  right: 0;
  position: absolute;
  background: #fff;
  top: 30px;
  box-shadow: 0 0 25px rgba(215, 214, 230, 0.6);
  width: -webkit-max-content;
  width: max-content;
  max-width: 250px;
  z-index: 200;
  display: none;
  min-width: 100px;
}

.bot-chat-bubble-container .more-dropdown-menu .header-dropdown-menu-item {
  padding: 10px 15px;
  cursor: pointer;
  color: #07032b;
}

.bot-chat-bubble-container
  .more-dropdown-menu
  .header-dropdown-menu-item:hover {
  background: #f2f2ed;
}

.bot-chat-bubble-container .more-menu-button {
  border: none;
  box-sizing: border-box;
  font-size: 1.1rem;
  cursor: pointer;
  background: none;
}

.bot-chat-bubble-container .more-menu-button:focus {
  outline: none;
}

.bot-chat-bubble-container i {
  margin-right: 5px;
  font-size: 0.9rem;
  color: #ffffff;
  color: var(--primary-text-color);
}

.custom-input {
  width: 100%;
  border-radius: 5px;
  background: #fff;
  /* box-shadow: 0px 0px 12px rgba(237, 237, 232, 0.8); */
  border: 1px solid #5F5E5E;
  font-family: Muli;
  font-weight: normal;
  font-size: 0.9rem;
  text-align: left;
  color: #07032b;
  padding: 0.6rem 0.8rem;
  box-sizing: border-box;
}

.custom-input:focus {
  outline: none;
}

.textinput-label {
  font-family: "Muli";
  font-size: 0.8rem;
  font-weight: bold;
  color: #07032b;
  margin-bottom: 10px;
  display: block;
  letter-spacing: 0.02rem;
}

.textinput-description {
  font-size: 0.65rem;
  color: #07032b;
  font-weight: normal;
  margin-top: 3px;
}

.textinput-container .info-message {
  color: #64bfeb;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 600;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
.pointer-events-none {
  pointer-events: none !important;
}
.pointer-events-auto {
  pointer-events: auto !important;
}
.visible {
  visibility: visible !important;
}
.collapse {
  visibility: collapse !important;
}
.static {
  position: static !important;
}
.fixed {
  position: fixed !important;
}
.absolute {
  position: absolute !important;
}
.relative {
  position: relative !important;
}
.sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}
.inset-2 {
  inset: 0.5rem !important;
}
.bottom-0 {
  bottom: 0px !important;
}
.left-0 {
  left: 0px !important;
}
.left-5 {
  left: 1.25rem !important;
}
.left-60 {
  left: 15rem !important;
}
.left-\[5\%\] {
  left: 5% !important;
}
.right-0 {
  right: 0px !important;
}
.right-5 {
  right: 1.25rem !important;
}
.right-\[5\%\] {
  right: 5% !important;
}
.top-0 {
  top: 0px !important;
}
.top-1\/2 {
  top: 50% !important;
}
.top-5 {
  top: 1.25rem !important;
}
.z-10 {
  z-index: 10 !important;
}
.z-40 {
  z-index: 40 !important;
}
.z-50 {
  z-index: 50 !important;
}
.z-\[1000000\] {
  z-index: 1000000 !important;
}
.z-\[100\] {
  z-index: 100 !important;
}
.z-\[99999\] {
  z-index: 99999 !important;
}
.z-\[9999\] {
  z-index: 9999 !important;
}
.col-span-1 {
  grid-column: span 1 / span 1 !important;
}
.m-0 {
  margin: 0px !important;
}
.-mx-4 {
  margin-left: -1rem !important;
  margin-right: -1rem !important;
}
.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.my-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}
.mb-0 {
  margin-bottom: 0px !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-12 {
  margin-bottom: 3rem !important;
}
.mb-3 {
  margin-bottom: 0.75rem !important;
}
.mb-4 {
  margin-bottom: 1rem !important;
}
.mb-5 {
  margin-bottom: 1.25rem !important;
}
.ml-2 {
  margin-left: 0.5rem !important;
}
.ml-3 {
  margin-left: 0.75rem !important;
}
.ml-5 {
  margin-left: 1.25rem !important;
}
.ml-7 {
  margin-left: 1.75rem !important;
}
.mr-1 {
  margin-right: 0.25rem !important;
}
.mr-2 {
  margin-right: 0.5rem !important;
}
.mr-3 {
  margin-right: 0.75rem !important;
}
.mr-4 {
  margin-right: 1rem !important;
}
.mr-5 {
  margin-right: 1.25rem !important;
}
.mr-auto {
  margin-right: auto !important;
}
.mt-0 {
  margin-top: 0px !important;
}
.mt-0\.5 {
  margin-top: 0.125rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-20 {
  margin-top: 5rem !important;
}
.mt-3 {
  margin-top: 0.75rem !important;
}
.mt-4 {
  margin-top: 1rem !important;
}
.mt-5 {
  margin-top: 1.25rem !important;
}
.mt-6 {
  margin-top: 1.5rem !important;
}
.mt-8 {
  margin-top: 2rem !important;
}
.block {
  display: block !important;
}
.inline-block {
  display: inline-block !important;
}
.inline {
  display: inline !important;
}
.flex {
  display: flex !important;
}
.inline-flex {
  display: inline-flex !important;
}
.table {
  display: table !important;
}
.grid {
  display: grid !important;
}
.hidden {
  display: none !important;
}
.h-0 {
  height: 0px !important;
}
.h-10 {
  height: 2.5rem !important;
}
.h-16 {
  height: 4rem !important;
}
.h-2 {
  height: 0.5rem !important;
}
.h-4 {
  height: 1rem !important;
}
.h-5 {
  height: 1.25rem !important;
}
.h-6 {
  height: 1.5rem !important;
}
.h-8 {
  height: 2rem !important;
}
.h-9 {
  height: 2.25rem !important;
}
.h-\[100dvh\] {
  height: 100dvh !important;
}
.h-\[30px\] {
  height: 30px !important;
}
.h-\[50px\] {
  height: 50px !important;
}
.h-auto {
  height: auto !important;
}
.h-full {
  height: 100% !important;
}
.max-h-48 {
  max-height: 12rem !important;
}
.max-h-\[170px\] {
  max-height: 170px !important;
}
.max-h-\[64px\] {
  max-height: 64px !important;
}
.max-h-\[84px\] {
  max-height: 84px !important;
}
.min-h-10 {
  min-height: 2.5rem !important;
}
.min-h-\[50px\] {
  min-height: 50px !important;
}
.min-h-full {
  min-height: 100% !important;
}
.w-10 {
  width: 2.5rem !important;
}
.w-16 {
  width: 4rem !important;
}
.w-2 {
  width: 0.5rem !important;
}
.w-4 {
  width: 1rem !important;
}
.w-5 {
  width: 1.25rem !important;
}
.w-6 {
  width: 1.5rem !important;
}
.w-60 {
  width: 15rem !important;
}
.w-8 {
  width: 2rem !important;
}
.w-9 {
  width: 2.25rem !important;
}
.w-\[200px\] {
  width: 200px !important;
}
.w-\[20px\] {
  width: 20px !important;
}
.w-full {
  width: 100% !important;
}
.min-w-0 {
  min-width: 0px !important;
}
.min-w-10 {
  min-width: 2.5rem !important;
}
.min-w-\[20px\] {
  min-width: 20px !important;
}
.max-w-3xl {
  max-width: 48rem !important;
}
.max-w-\[120px\] {
  max-width: 120px !important;
}
.max-w-\[150px\] {
  max-width: 150px !important;
}
.max-w-\[64px\] {
  max-width: 64px !important;
}
.max-w-\[800px\] {
  max-width: 800px !important;
}
.max-w-\[80px\] {
  max-width: 80px !important;
}
.flex-1 {
  flex: 1 1 !important;
}
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.-translate-y-1\/2 {
  --tw-translate-y: -50% !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.translate-x-1\/2 {
  --tw-translate-x: 50% !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.scale-105 {
  --tw-scale-x: 1.05 !important;
  --tw-scale-y: 1.05 !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.scale-110 {
  --tw-scale-x: 1.1 !important;
  --tw-scale-y: 1.1 !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite !important;
}
.cursor-grab {
  cursor: grab !important;
}
.cursor-grabbing {
  cursor: grabbing !important;
}
.cursor-not-allowed {
  cursor: not-allowed !important;
}
.cursor-pointer {
  cursor: pointer !important;
}
.resize {
  resize: both !important;
}
.list-disc {
  list-style-type: disc !important;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.flex-row-reverse {
  flex-direction: row-reverse !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.items-start {
  align-items: flex-start !important;
}
.items-center {
  align-items: center !important;
}
.items-stretch {
  align-items: stretch !important;
}
.justify-start {
  justify-content: flex-start !important;
}
.justify-center {
  justify-content: center !important;
}
.justify-between {
  justify-content: space-between !important;
}
.gap-0 {
  gap: 0px !important;
}
.gap-2 {
  gap: 0.5rem !important;
}
.gap-2\.5 {
  gap: 0.625rem !important;
}
.gap-3 {
  gap: 0.75rem !important;
}
.gap-4 {
  gap: 1rem !important;
}
.gap-6 {
  gap: 1.5rem !important;
}
.overflow-auto {
  overflow: auto !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}
.overflow-y-auto {
  overflow-y: auto !important;
}
.overflow-x-hidden {
  overflow-x: hidden !important;
}
.whitespace-normal {
  white-space: normal !important;
}
.whitespace-nowrap {
  white-space: nowrap !important;
}
.break-words {
  overflow-wrap: break-word !important;
}
.rounded {
  border-radius: 0.25rem !important;
}
.rounded-2xl {
  border-radius: 1rem !important;
}
.rounded-full {
  border-radius: 9999px !important;
}
.rounded-lg {
  border-radius: 0.5rem !important;
}
.rounded-md {
  border-radius: 0.375rem !important;
}
.rounded-xl {
  border-radius: 0.75rem !important;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
}
.border {
  border-width: 1px !important;
}
.border-2 {
  border-width: 2px !important;
}
.border-4 {
  border-width: 4px !important;
}
.border-b {
  border-bottom-width: 1px !important;
}
.border-l {
  border-left-width: 1px !important;
}
.border-r {
  border-right-width: 1px !important;
}
.border-t {
  border-top-width: 1px !important;
}
.border-none {
  border-style: none !important;
}
.border-\[\#001DE0\] {
  --tw-border-opacity: 1 !important;
  border-color: rgb(0 29 224 / 1) !important;
  border-color: rgb(0 29 224 / var(--tw-border-opacity, 1)) !important;
}
.border-black {
  --tw-border-opacity: 1 !important;
  border-color: rgb(28 27 28 / 1) !important;
  border-color: rgb(28 27 28 / var(--tw-border-opacity, 1)) !important;
}
.border-black-10 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(230 225 230 / 1) !important;
  border-color: rgb(230 225 230 / var(--tw-border-opacity, 1)) !important;
}
.border-black-20 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(202 197 202 / 1) !important;
  border-color: rgb(202 197 202 / var(--tw-border-opacity, 1)) !important;
}
.border-black-30 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(174 170 174 / 1) !important;
  border-color: rgb(174 170 174 / var(--tw-border-opacity, 1)) !important;
}
.border-blue-900 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(30 58 138 / 1) !important;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1)) !important;
}
.border-current {
  border-color: currentColor !important;
}
.border-gray-200 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / 1) !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
}
.border-gray-300 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(209 213 219 / 1) !important;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
}
.border-red-200 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(254 202 202 / 1) !important;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1)) !important;
}
.border-red-600 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(220 38 38 / 1) !important;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1)) !important;
}
.border-r-transparent {
  border-right-color: transparent !important;
}
.border-t-transparent {
  border-top-color: transparent !important;
}
.bg-\[\#001DE0\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(0 29 224 / 1) !important;
  background-color: rgb(0 29 224 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#E6EDFF\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(230 237 255 / 1) !important;
  background-color: rgb(230 237 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#FFFBFF\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 251 255 / 1) !important;
  background-color: rgb(255 251 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#f8f7f880\] {
  background-color: #f8f7f880 !important;
}
.bg-black-70 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(72 70 74 / 1) !important;
  background-color: rgb(72 70 74 / var(--tw-bg-opacity, 1)) !important;
}
.bg-black-80 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(50 48 51 / 1) !important;
  background-color: rgb(50 48 51 / var(--tw-bg-opacity, 1)) !important;
}
.bg-gray-200 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(229 231 235 / 1) !important;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)) !important;
}
.bg-gray-800 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(31 41 55 / 1) !important;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)) !important;
}
.bg-primary {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(0 29 224 / 1) !important;
  background-color: rgb(0 29 224 / var(--tw-bg-opacity, 1)) !important;
}
.bg-red-100 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 226 226 / 1) !important;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)) !important;
}
.bg-red-200 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 202 202 / 1) !important;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)) !important;
}
.bg-transparent {
  background-color: transparent !important;
}
.bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / 1) !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6) !important;
}
.bg-yellow-100 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 249 195 / 1) !important;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)) !important;
}
.bg-opacity-25 {
  --tw-bg-opacity: 0.25 !important;
}
.bg-opacity-5 {
  --tw-bg-opacity: 0.05 !important;
}
.bg-contain {
  background-size: contain !important;
}
.bg-center {
  background-position: center !important;
}
.bg-no-repeat {
  background-repeat: no-repeat !important;
}
.object-contain {
  object-fit: contain !important;
}
.object-cover {
  object-fit: cover !important;
}
.p-0 {
  padding: 0px !important;
}
.p-1\.5 {
  padding: 0.375rem !important;
}
.p-2 {
  padding: 0.5rem !important;
}
.p-3 {
  padding: 0.75rem !important;
}
.p-4 {
  padding: 1rem !important;
}
.p-5 {
  padding: 1.25rem !important;
}
.p-6 {
  padding: 1.5rem !important;
}
.p-8 {
  padding: 2rem !important;
}
.px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.px-10 {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}
.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.px-8 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.pb-0 {
  padding-bottom: 0px !important;
}
.pb-1 {
  padding-bottom: 0.25rem !important;
}
.pb-10 {
  padding-bottom: 2.5rem !important;
}
.pb-20 {
  padding-bottom: 5rem !important;
}
.pb-3 {
  padding-bottom: 0.75rem !important;
}
.pb-7 {
  padding-bottom: 1.75rem !important;
}
.pl-2 {
  padding-left: 0.5rem !important;
}
.pl-3 {
  padding-left: 0.75rem !important;
}
.pl-60 {
  padding-left: 15rem !important;
}
.pl-\[67px\] {
  padding-left: 67px !important;
}
.pr-0 {
  padding-right: 0px !important;
}
.pr-3 {
  padding-right: 0.75rem !important;
}
.pr-4 {
  padding-right: 1rem !important;
}
.pr-6 {
  padding-right: 1.5rem !important;
}
.pr-8 {
  padding-right: 2rem !important;
}
.pt-2 {
  padding-top: 0.5rem !important;
}
.pt-3 {
  padding-top: 0.75rem !important;
}
.pt-4 {
  padding-top: 1rem !important;
}
.pt-5 {
  padding-top: 1.25rem !important;
}
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}
.text-\[13px\] {
  font-size: 13px !important;
}
.text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}
.text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}
.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
.text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
.font-bold {
  font-weight: 700 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.uppercase {
  text-transform: uppercase !important;
}
.italic {
  font-style: italic !important;
}
.leading-4 {
  line-height: 1rem !important;
}
.leading-6 {
  line-height: 1.5rem !important;
}
.leading-8 {
  line-height: 2rem !important;
}
.leading-relaxed {
  line-height: 1.625 !important;
}
.text-\[\#02072c\] {
  --tw-text-opacity: 1 !important;
  color: rgb(2 7 44 / 1) !important;
  color: rgb(2 7 44 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#0923E6\] {
  --tw-text-opacity: 1 !important;
  color: rgb(9 35 230 / 1) !important;
  color: rgb(9 35 230 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#0e0748\] {
  --tw-text-opacity: 1 !important;
  color: rgb(14 7 72 / 1) !important;
  color: rgb(14 7 72 / var(--tw-text-opacity, 1)) !important;
}
.text-\[var\(--button-color\)\] {
  color: var(--button-color) !important;
}
.text-black {
  --tw-text-opacity: 1 !important;
  color: rgb(28 27 28 / 1) !important;
  color: rgb(28 27 28 / var(--tw-text-opacity, 1)) !important;
}
.text-blue-900 {
  --tw-text-opacity: 1 !important;
  color: rgb(30 58 138 / 1) !important;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1)) !important;
}
.text-gray-400 {
  --tw-text-opacity: 1 !important;
  color: rgb(156 163 175 / 1) !important;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important;
}
.text-gray-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(75 85 99 / 1) !important;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important;
}
.text-grey {
  --tw-text-opacity: 1 !important;
  color: rgb(95 94 94 / 1) !important;
  color: rgb(95 94 94 / var(--tw-text-opacity, 1)) !important;
}
.text-pink-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(219 39 119 / 1) !important;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1)) !important;
}
.text-primary {
  --tw-text-opacity: 1 !important;
  color: rgb(0 29 224 / 1) !important;
  color: rgb(0 29 224 / var(--tw-text-opacity, 1)) !important;
}
.text-primary-80 {
  --tw-text-opacity: 1 !important;
  color: rgb(0 8 102 / 1) !important;
  color: rgb(0 8 102 / var(--tw-text-opacity, 1)) !important;
}
.text-red-700 {
  --tw-text-opacity: 1 !important;
  color: rgb(185 28 28 / 1) !important;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1)) !important;
}
.underline {
  -webkit-text-decoration-line: underline !important;
          text-decoration-line: underline !important;
}
.opacity-0 {
  opacity: 0 !important;
}
.opacity-100 {
  opacity: 1 !important;
}
.opacity-35 {
  opacity: 0.35 !important;
}
.opacity-40 {
  opacity: 0.4 !important;
}
.opacity-50 {
  opacity: 0.5 !important;
}
.opacity-90 {
  opacity: 0.9 !important;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow-\[0_0_16px_rgba\(215\2c 214\2c 230\2c 0\.8\)\] {
  --tw-shadow: 0 0 16px rgba(215,214,230,0.8) !important;
  --tw-shadow-colored: 0 0 16px var(--tw-shadow-color) !important;
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow-none {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.outline {
  outline-style: solid !important;
}
.blur {
  --tw-blur: blur(8px) !important;
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.brightness-0 {
  --tw-brightness: brightness(0) !important;
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.invert {
  --tw-invert: invert(100%) !important;
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.backdrop-blur-\[9\%\] {
  --tw-backdrop-blur: blur(9%) !important;
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
}
.transition {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter !important;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color !important;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-opacity {
  transition-property: opacity !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.duration-150 {
  transition-duration: 150ms !important;
}
.duration-200 {
  transition-duration: 200ms !important;
}
.duration-300 {
  transition-duration: 300ms !important;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body {
  margin: 0;
  font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #07032b;
  letter-spacing: 0.01rem;
  font-size: 0.9rem;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

/* Muli regular */
@font-face {
  font-family: "Muli";
  src: url(/static/media/Muli-Regular.afb1e25abb71ce4b9be4.eot);
  src: url(/static/media/Muli-Regular.afb1e25abb71ce4b9be4.eot?#iefix)
      format("embedded-opentype"),
    url(/static/media/Muli-Regular.7a33618fa5d213193297.woff2) format("woff2"),
    url(/static/media/Muli-Regular.1097f30cacc100fa75f3.woff) format("woff"),
    url(/static/media/Muli-Regular.e9aab0fdac684ccdc422.ttf) format("truetype"),
    url(/static/media/Muli-Regular.e9f4221e7098163ef70d.svg) format("svg");
  font-weight: 400;
  font-style: normal;
}

/* Muli medium */
@font-face {
  font-family: "Muli";
  src: url(/static/media/Muli-Medium.c3cac11acd50b1cb00dc.eot);
  src: url(/static/media/Muli-Medium.c3cac11acd50b1cb00dc.eot?#iefix)
      format("embedded-opentype"),
    url(/static/media/Muli-Medium.e337749750ff6a314ba7.woff2) format("woff2"),
    url(/static/media/Muli-Medium.1fd425fc7b352cb653b4.woff) format("woff"),
    url(/static/media/Muli-Medium.b6c92c76aea74335f0de.ttf) format("truetype"),
    url(/static/media/Muli-Medium.caf8448d942ce2bae175.svg) format("svg");
  font-weight: 500;
  font-style: normal;
}

/* Muli semibold */
@font-face {
  font-family: "Muli";
  src: url(/static/media/Muli-SemiBold.377642b744b1130814a6.eot);
  src: url(/static/media/Muli-SemiBold.377642b744b1130814a6.eot?#iefix)
      format("embedded-opentype"),
    url(/static/media/Muli-SemiBold.4a2588dd3ea55a62a3a1.woff2) format("woff2"),
    url(/static/media/Muli-SemiBold.e4511dae91686ad50116.woff) format("woff"),
    url(/static/media/Muli-SemiBold.534f8b00662d5445104d.ttf) format("truetype"),
    url(/static/media/Muli-SemiBold.92f2d74d0e8176747610.svg) format("svg");
  font-weight: 600;
  font-style: normal;
}

/* Muli bold */
@font-face {
  font-family: "Muli";
  src: url(/static/media/Muli-Bold.272946a4f86a171bc431.eot);
  src: url(/static/media/Muli-Bold.272946a4f86a171bc431.eot?#iefix)
      format("embedded-opentype"),
    url(/static/media/Muli-Bold.6bb24c1cfa3617fe46d0.woff2) format("woff2"),
    url(/static/media/Muli-Bold.14e4b6420c2efbb19edd.woff) format("woff"),
    url(/static/media/Muli-Bold.85c0b343300dccfa10e7.ttf) format("truetype"),
    url(/static/media/Muli-Bold.1337b84f296faef75be4.svg) format("svg");
  font-weight: 700;
  font-style: normal;
}

/* Muli extra-bold */
@font-face {
  font-family: "Muli";
  src: url(/static/media/Muli-ExtraBold.9a7ffd55ccc3be1e1896.eot);
  src: url(/static/media/Muli-ExtraBold.9a7ffd55ccc3be1e1896.eot?#iefix)
      format("embedded-opentype"),
    url(/static/media/Muli-ExtraBold.d344b105c0563d2aa435.woff2) format("woff2"),
    url(/static/media/Muli-ExtraBold.15c583a87616c5ce8010.woff) format("woff"),
    url(/static/media/Muli-ExtraBold.e59a298dcd54ab53886b.ttf) format("truetype"),
    url(/static/media/Muli-ExtraBold.b923e5810a2fadb5ead1.svg) format("svg");
  font-weight: 800;
  font-style: normal;
}

/* Muli black */
@font-face {
  font-family: "Muli";
  src: url(/static/media/Muli-Black.af1a95707d8646868b18.eot);
  src: url(/static/media/Muli-Black.af1a95707d8646868b18.eot?#iefix)
      format("embedded-opentype"),
    url(/static/media/Muli-Black.10b47408f424ce046902.woff2) format("woff2"),
    url(/static/media/Muli-Black.fb50e7b3f128b43266ab.woff) format("woff"),
    url(/static/media/Muli-Black.65e46745a5a5486857ac.ttf) format("truetype"),
    url(/static/media/Muli-Black.94de2b86e16bfb67caca.svg) format("svg");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "icomoon";
  src: url(/static/media/icomoon.8d429f1f6e77080ac341.eot);
  src: url(/static/media/icomoon.8d429f1f6e77080ac341.eot) format("embedded-opentype"),
    url(/static/media/icomoon.2b2eece2dfa51ebc99d0.ttf) format("truetype"),
    url(/static/media/icomoon.f045c9de84099d9c0176.woff) format("woff"),
    url(/static/media/icomoon.4692c7c828a0c19997b2.svg) format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

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

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

.icon-lab:before {
  content: "\e95d";
}
.icon-beta:before {
  content: "\e95d";
}
.icon-experiment:before {
  content: "\e95d";
}
.icon-test:before {
  content: "\e95d";
}
.icon-flow-tree:before {
  content: "\e95e";
}
.icon-star-outline:before {
  content: "\e955";
}
.icon-star:before {
  content: "\e956";
}
.icon-security:before {
  content: "\e958";
}
.icon-alternate_email:before {
  content: "\e959";
}
.icon-bookmark:before {
  content: "\e907";
}
.icon-fullscreen:before {
  content: "\e92a";
}
.icon-line-spacing:before {
  content: "\e92b";
}
.icon-indent:before {
  content: "\e92c";
}
.icon-outdent:before {
  content: "\e92d";
}
.icon-number-list:before {
  content: "\e92e";
}
.icon-highlight:before {
  content: "\e92f";
}
.icon-text-color:before {
  content: "\e930";
}
.icon-redo:before {
  content: "\e931";
}
.icon-undo:before {
  content: "\e932";
}
.icon-alert-circle:before {
  content: "\e95f";
}
.icon-eye-off:before {
  content: "\e95a";
}
.icon-link-2:before {
  content: "\e95b";
}
.icon-code:before {
  content: "\e95c";
}
.icon-tick-line:before {
  content: "\e957";
}
.icon-gift:before {
  content: "\e914";
}
.icon-home:before {
  content: "\e90d";
}
.icon-chevron-right:before {
  content: "\e94f";
}
.icon-chevron-left:before {
  content: "\e950";
}
.icon-chevron-down:before {
  content: "\e951";
}
.icon-chevron-up:before {
  content: "\e952";
}
.icon-bell:before {
  content: "\e953";
}
.icon-emoji:before {
  content: "\e94d";
}
.icon-call-line:before {
  content: "\e94e";
}
.icon-email-line:before {
  content: "\e94c";
}
.icon-send-line:before {
  content: "\e94b";
}
.icon-more:before {
  content: "\e93b";
}
.icon-view:before {
  content: "\e933";
}
.icon-video:before {
  content: "\e934";
}
.icon-image:before {
  content: "\e935";
}
.icon-link:before {
  content: "\e936";
}
.icon-bullet-list:before {
  content: "\e937";
}
.icon-italic:before {
  content: "\e938";
}
.icon-underline:before {
  content: "\e939";
}
.icon-bold:before {
  content: "\e93a";
}
.icon-quote:before {
  content: "\e929";
}
.icon-document:before {
  content: "\e954";
}
.icon-strike:before {
  content: "\ea65";
}
.icon-superscript:before {
  content: "\ea69";
}
.icon-subscript:before {
  content: "\ea6a";
}
.icon-table:before {
  content: "\ea71";
}
.icon-edit-line:before {
  content: "\e960";
}
.icon-calendar-line:before {
  content: "\e93c";
}
.icon-setting:before {
  content: "\e93d";
}
.icon-user-line:before {
  content: "\e93e";
}
.icon-thumbs-down-line:before {
  content: "\e93f";
}
.icon-tumbs-up-line:before {
  content: "\e940";
}
.icon-tips:before {
  content: "\e941";
}
.icon-download-line:before {
  content: "\e942";
}
.icon-upload-line:before {
  content: "\e943";
}
.icon-password:before {
  content: "\e944";
}
.icon-username:before {
  content: "\e945";
}
.icon-logout-line:before {
  content: "\e946";
}
.icon-login-line:before {
  content: "\e947";
}
.icon-help-line:before {
  content: "\e948";
}
.icon-save-line:before {
  content: "\e949";
}
.icon-create-line:before {
  content: "\e94a";
}
.icon-move-down:before {
  content: "\e926";
}
.icon-move-up:before {
  content: "\e927";
}
.icon-new:before {
  content: "\e928";
}
.icon-edit:before {
  content: "\e925";
}
.icon-copy:before {
  content: "\e923";
  color: #07032b;
}
.icon-check:before {
  content: "\e924";
  color: #1e4c88;
}
.icon-earth:before {
  content: "\e922";
  color: #07032b;
}
.icon-text:before {
  content: "\e91c";
}
.icon-date:before {
  content: "\e91d";
}
.icon-para:before {
  content: "\e91e";
}
.icon-menu:before {
  content: "\e91f";
}
.icon-radio:before {
  content: "\e920";
}
.icon-checkbox:before {
  content: "\e921";
}
.icon-delete:before {
  content: "\e91b";
}
.icon-power:before {
  content: "\e91a";
}
.icon-refresh:before {
  content: "\e919";
}
.icon-template:before {
  content: "\e918";
  color: #39b7ef;
}
.icon-tick:before {
  content: "\e917";
  color: #26ad6a;
}
.icon-calendar:before {
  content: "\e916";
  color: #fff;
}
.icon-back-arrow:before {
  content: "\e915";
  color: #07032b;
}
.icon-form:before {
  content: "\e913";
  color: #c37943;
}
.icon-add-simple:before {
  content: "\e912";
  color: #1e4c88;
}
.icon-send:before {
  content: "\e910";
  color: #dbdbdb;
}
.icon-attach-file:before {
  content: "\e911";
  color: #dbdbdb;
}
.icon-left-arrow:before {
  content: "\e90e";
  color: #d5d5d5;
}
.icon-right-arrow:before {
  content: "\e90f";
  color: #07032b;
}
.icon-bulb:before {
  content: "\e900";
  color: #f9b234;
}
.icon-thumbs-down:before {
  content: "\e901";
  color: #b10f0f;
}
.icon-thumbs-up:before {
  content: "\e902";
  color: #108e68;
}
.icon-close:before {
  content: "\e903";
  color: #c7c7be;
}
.icon-up-chevron:before {
  content: "\e904";
  color: #07032b;
}
.icon-down-chevron:before {
  content: "\e905";
  color: #07032b;
}
.icon-left-chevron:before {
  content: "\e906";
  color: #07032b;
}
.icon-warning:before {
  content: "\e908";
  color: #c73131;
}
.icon-add:before {
  content: "\e909";
  color: #1e4c88;
}
.icon-download:before {
  content: "\e90a";
  color: #1e4c88;
}
.icon-upload:before {
  content: "\e90b";
  color: #f9b234;
}
.icon-forward-arrow:before {
  content: "\e90c";
  color: #07032b;
}

.skip-to-main-content-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;
}

.skip-to-main-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}
.message-container {
  font-size: inherit;
}

.custom-arrow-prev {
  color: black !important;
}

.custom-arrow-prev.slick-disabled {
  display: none !important;
}

.custom-arrow-prev::before {
  display: none;
}

.custom-arrow-next {
  color: black !important;
}

.custom-arrow-next.slick-disabled {
  display: none !important;
}
.custom-arrow-next::before {
  display: none;
}

.welcome-container img {
  max-width: 100px;
  max-height: 100px;
  margin: auto;
  /*display: none;*/
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05 !important;
  --tw-scale-y: 1.05 !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

.hover\:border-gray-300:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(209 213 219 / 1) !important;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
}

.hover\:bg-black\/5:hover {
  background-color: rgb(28 27 28 / 0.05) !important;
}

.hover\:bg-blue-900:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(30 58 138 / 1) !important;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(243 244 246 / 1) !important;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(249 250 251 / 1) !important;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / 1) !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:text-primary:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(0 29 224 / 1) !important;
  color: rgb(0 29 224 / var(--tw-text-opacity, 1)) !important;
}

.hover\:text-white:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / 1) !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color) !important;
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed !important;
}

.disabled\:opacity-35:disabled {
  opacity: 0.35 !important;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5 !important;
}

@media not all and (min-width: 768px) {

  .max-md\:left-0 {
    left: 0px !important;
  }

  .max-md\:m-0 {
    margin: 0px !important;
  }

  .max-md\:-ml-60 {
    margin-left: -15rem !important;
  }

  .max-md\:ml-0 {
    margin-left: 0px !important;
  }

  .max-md\:hidden {
    display: none !important;
  }

  .max-md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .max-md\:p-0 {
    padding: 0px !important;
  }

  .max-md\:px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .max-md\:pb-14 {
    padding-bottom: 3.5rem !important;
  }

  .max-md\:pb-5 {
    padding-bottom: 1.25rem !important;
  }

  .max-md\:pl-0 {
    padding-left: 0px !important;
  }

  .max-md\:pr-5 {
    padding-right: 1.25rem !important;
  }
}

@media (min-width: 640px) {

  .sm\:left-4 {
    left: 1rem !important;
  }

  .sm\:right-4 {
    right: 1rem !important;
  }
}

@media (min-width: 768px) {

  .md\:mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .md\:mb-0 {
    margin-bottom: 0px !important;
  }

  .md\:ml-4 {
    margin-left: 1rem !important;
  }

  .md\:inline-block {
    display: inline-block !important;
  }

  .md\:flex {
    display: flex !important;
  }

  .md\:inline-flex {
    display: inline-flex !important;
  }

  .md\:grid {
    display: grid !important;
  }

  .md\:hidden {
    display: none !important;
  }

  .md\:h-screen {
    height: 100vh !important;
  }

  .md\:max-h-\[170px\] {
    max-height: 170px !important;
  }

  .md\:w-2\/6 {
    width: 33.333333% !important;
  }

  .md\:w-60 {
    width: 15rem !important;
  }

  .md\:w-\[67px\] {
    width: 67px !important;
  }

  .md\:w-auto {
    width: auto !important;
  }

  .md\:max-w-\[1200px\] {
    max-width: 1200px !important;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .md\:flex-row {
    flex-direction: row !important;
  }

  .md\:justify-center {
    justify-content: center !important;
  }

  .md\:pb-6 {
    padding-bottom: 1.5rem !important;
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }

  .lg\:col-start-2 {
    grid-column-start: 2 !important;
  }

  .lg\:col-start-3 {
    grid-column-start: 3 !important;
  }

  .lg\:block {
    display: block !important;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.quiz-table-editor-wrapper {
  /* border: 1px solid #bec5d9;
  background-color: #fff; */
  border: 1px solid #bec5d9;
  width: 100%;
  /* border-radius: 5px; */
  /* overflow: hidden; */
}

.quiz-table-editor-wrapper .quiz-table {
  width: 100%;
}

.quiz-table-editor-header-row,
.quiz-table-editor-row {
  /* display: table-row; */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.quiz-table-editor-row,
.quiz-table-editor-header-row {
  border-bottom: 1px solid #bec5d9;
  position: relative;
}

.quiz-table-editor-row:last-child {
  border-bottom: none;
}

.quiz-table-editor-header-row .quiz-table-header-cell-wrapper,
.quiz-table-editor-row .quiz-table-row-cell-wrapper {
  /* width: 300px; */
  display: table-cell;
  background-color: #fff;
  vertical-align: top;
  padding: 0;
  /* border-right: 1px solid #f9b234; */
}

.quiz-table-editor-row .column-header-cell-wrapper {
  /* max-width: 300px; */
  display: table-cell;
  background-color: #eceff7;
  vertical-align: top;
  font-weight: bold;
  font-size: 0.8rem;
  padding: 8px;
  border: none;
  /* border-right: 1px solid #f9b234; */
}

.quiz-table-editor-header-row .quiz-table-header-cell-wrapper {
  position: relative;
}

.quiz-table-editor-header-row
  .quiz-table-header-cell-wrapper:hover
  .column-toolbar {
  display: block;
}

.quiz-table-editor-header-row .quiz-table-header-cell-wrapper:last-child,
.quiz-table-editor-row .quiz-table-row-cell-wrapper:last-child,
.quiz-table-editor-row .column-header-cell-wrapper:last-child {
  border-right: none;
}

.quiz-table-editor-header-row .quiz-table-header-cell-wrapper input {
  background-color: #eceff7;
  border-radius: 1px;
  border: none;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 0.8rem;
}

.quiz-table-editor-row .quiz-table-row-cell-wrapper textarea,
.quiz-table-editor-row .column-header-cell-wrapper textarea {
  border-radius: 0px;
  border: none;
  /* border-right: 1px solid #f9b234; */
  font-size: 0.8rem;
  padding: 8px 16px;
  resize: none;
  height: 100%;
}

.quiz-table-editor-row .column-header-cell-wrapper textarea {
  background-color: #eceff7;
  font-weight: bold;
}

.quiz-table-editor-row .quiz-table-row-cell-wrapper:last-child textarea,
.quiz-table-editor-row .column-header-cell-wrapper:last-child textarea {
  border: none;
}

.quiz-table-header-disabled-cell {
  background-color: #eceff7;
  border-radius: 1px;
  border: none;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 0.8rem;
  /* width: 300px; */
  display: table-cell;
}

.quiz-table-editor-row:hover .quiz-table-editor-row-actions {
  display: block;
}

.quiz-table-editor-row-actions {
  position: absolute;
  right: -72px;
  z-index: 1;
  top: 8px;
  display: none;
  padding: 0 8px;
  min-width: 60px;
}

.quiz-table-editor-row-actions .toolbar-btn {
  border: none;
  background-color: transparent;
  height: 30px;
  width: 30px;
  margin-right: 0px;
  cursor: pointer;
  padding: 0;
}

.quiz-table-editor-row-actions .icon-delete {
  color: #c34343;
  font-size: 0.75rem;
}

.column-remove-btn,
.column-convert-header-btn {
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0 5px;
}

.column-toolbar {
  position: absolute;
  right: 0;
  top: 6px;
  display: flex;
  display: none;
}

.column-remove-btn .icon-delete {
  color: #c34343;
  font-size: 0.75rem;
}

.no-justify-flex {
  justify-content: left !important;
}

.quiz-table-editor-add-column-btn-wrapper {
  padding: 8px 4px;
  min-width: 115px;
}

.emoji-mart,
.emoji-mart * {
  box-sizing: border-box;
  line-height: 1.15;
}

.emoji-mart {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 16px;
  display: inline-block;
  color: #222427;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
}

.emoji-mart .emoji-mart-emoji {
  padding: 6px;
}

.emoji-mart-bar {
  border: 0 solid #d9d9d9;
}
.emoji-mart-bar:first-child {
  border-bottom-width: 1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.emoji-mart-bar:last-child {
  border-top-width: 1px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.emoji-mart-anchors {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 6px;
  line-height: 0;
}

.emoji-mart-anchor {
  position: relative;
  display: block;
  flex: 1 1 auto;
  color: #858585;
  text-align: center;
  padding: 12px 4px;
  overflow: hidden;
  transition: color .1s ease-out;
  margin: 0;
  box-shadow: none;
  background: none;
  border: none;
}
.emoji-mart-anchor:focus { outline: 0 }
.emoji-mart-anchor:hover,
.emoji-mart-anchor:focus,
.emoji-mart-anchor-selected {
  color: #464646;
}

.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
  bottom: 0;
}

.emoji-mart-anchor-bar {
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%; height: 3px;
  background-color: #464646;
}

.emoji-mart-anchors i {
  display: inline-block;
  width: 100%;
  max-width: 22px;
}

.emoji-mart-anchors svg,
.emoji-mart-anchors img {
  fill: currentColor;
  height: 18px;
  width: 18px;
}

.emoji-mart-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 270px;
  padding: 0 6px 6px 6px;
  will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
}

.emoji-mart-search {
  margin-top: 6px;
  padding: 0 6px;
  position: relative;
}

.emoji-mart-search input {
  font-size: 16px;
  display: block;
  width: 100%;
  padding: 5px 25px 6px 10px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  outline: 0;
}

.emoji-mart-search input,
.emoji-mart-search input::-webkit-search-decoration,
.emoji-mart-search input::-webkit-search-cancel-button,
.emoji-mart-search input::-webkit-search-results-button,
.emoji-mart-search input::-webkit-search-results-decoration {
  /* remove webkit/blink styles for <input type="search">
   * via https://stackoverflow.com/a/9422689 */
  -webkit-appearance: none;
}

.emoji-mart-search-icon {
  position: absolute;
  top: 7px;
  right: 11px;
  z-index: 2;
  padding: 2px 5px 1px;
  border: none;
  background: none;
}

.emoji-mart-category .emoji-mart-emoji span {
  z-index: 1;
  position: relative;
  text-align: center;
  cursor: default;
}

.emoji-mart-category .emoji-mart-emoji:hover:before {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #f4f4f4;
  border-radius: 100%;
}

.emoji-mart-category-label {
  z-index: 2;
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.emoji-mart-category-label span {
  display: block;
  width: 100%;
  font-weight: 500;
  padding: 5px 6px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, .95);
}

.emoji-mart-category-list {
  margin: 0;
  padding: 0;
}

.emoji-mart-category-list li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.emoji-mart-emoji {
  position: relative;
  display: inline-block;
  font-size: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.emoji-mart-emoji-native {
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
}

.emoji-mart-no-results {
  font-size: 14px;
  text-align: center;
  padding-top: 70px;
  color: #858585;
}
.emoji-mart-no-results-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.emoji-mart-no-results .emoji-mart-category-label {
  display: none;
}
.emoji-mart-no-results .emoji-mart-no-results-label {
  margin-top: .2em;
}
.emoji-mart-no-results .emoji-mart-emoji:hover:before {
  content: none;
}

.emoji-mart-preview {
  position: relative;
  height: 70px;
}

.emoji-mart-preview-emoji,
.emoji-mart-preview-data,
.emoji-mart-preview-skins {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.emoji-mart-preview-emoji {
  left: 12px;
}

.emoji-mart-preview-data {
  left: 68px; right: 12px;
  word-break: break-all;
}

.emoji-mart-preview-skins {
  right: 30px;
  text-align: right;
}

.emoji-mart-preview-skins.custom {
  right: 10px;
  text-align: right;
}

.emoji-mart-preview-name {
  font-size: 14px;
}

.emoji-mart-preview-shortname {
  font-size: 12px;
  color: #888;
}
.emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
.emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
.emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
  margin-left: .5em;
}

.emoji-mart-preview-emoticon {
  font-size: 11px;
  color: #bbb;
}

.emoji-mart-title span {
  display: inline-block;
  vertical-align: middle;
}

.emoji-mart-title .emoji-mart-emoji {
  padding: 0;
}

.emoji-mart-title-label {
  color: #999A9C;
  font-size: 26px;
  font-weight: 300;
}

.emoji-mart-skin-swatches {
  font-size: 0;
  padding: 2px 0;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  background-color: #fff;
}

.emoji-mart-skin-swatches.custom {
  font-size: 0;
  border: none;
  background-color: #fff;
}

.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {
  width: 16px;
  padding: 0 2px;
}

.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected:after {
  opacity: .75;
}

.emoji-mart-skin-swatch {
  display: inline-block;
  width: 0;
  vertical-align: middle;
  transition-property: width, padding;
  transition-duration: .125s;
  transition-timing-function: ease-out;
}

.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0s }
.emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s }
.emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s }
.emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s }
.emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s }
.emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s }

.emoji-mart-skin-swatch.selected {
  position: relative;
  width: 16px;
  padding: 0 2px;
}

.emoji-mart-skin-swatch.selected:after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background-color: #fff;
  border-radius: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease-out;
}

.emoji-mart-skin-swatch.custom {
  display: inline-block;
  width: 0;
  height: 38px;
  overflow: hidden;
  vertical-align: middle;
  transition-property: width, height;
  transition-duration: .125s;
  transition-timing-function: ease-out;
  cursor: default;
}

.emoji-mart-skin-swatch.custom.selected {
  position: relative;
  width: 36px;
  height: 38px;
  padding: 0 2px 0 0;
}

.emoji-mart-skin-swatch.custom.selected:after {
  content: "";
  width: 0;
  height: 0;
}

.emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {
  background-color: #f4f4f4;
  border-radius: 10%;
}

.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {
  width: 36px;
  height: 38px;
  padding: 0 2px 0 0;
}

.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected:after {
  opacity: .75;
}

.emoji-mart-skin-text.opened {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  color: #888;
  font-size: 11px;
  padding: 5px 2px;
  width: 95px;
  height: 40px;
  border-radius: 10%;
  background-color: #fff;
}

.emoji-mart-skin {
  display: inline-block;
  width: 100%;
  padding-top: 100%;
  max-width: 12px;
  border-radius: 100%;
}

.emoji-mart-skin-tone-1 { background-color: #ffc93a }
.emoji-mart-skin-tone-2 { background-color: #fadcbc }
.emoji-mart-skin-tone-3 { background-color: #e0bb95 }
.emoji-mart-skin-tone-4 { background-color: #bf8f68 }
.emoji-mart-skin-tone-5 { background-color: #9b643d }
.emoji-mart-skin-tone-6 { background-color: #594539 }

/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
.emoji-mart-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/*
 * Dark mode styles
 */

.emoji-mart-dark {
  color: #fff;
  border-color: #555453;
  background-color: #222;
}

.emoji-mart-dark .emoji-mart-bar {
  border-color: #555453;
}

.emoji-mart-dark .emoji-mart-search input {
  color: #fff;
  border-color: #555453;
  background-color: #2f2f2f;
}

.emoji-mart-dark .emoji-mart-search-icon svg {
  fill: #fff;
}

.emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover:before {
  background-color: #444;
}

.emoji-mart-dark .emoji-mart-category-label span {
  background-color: #222;
  color: #fff;
}

.emoji-mart-dark .emoji-mart-skin-swatches {
  border-color: #555453;
  background-color: #222;
}

.emoji-mart-dark .emoji-mart-anchor:hover,
.emoji-mart-dark .emoji-mart-anchor:focus,
.emoji-mart-dark .emoji-mart-anchor-selected {
  color: #bfbfbf;
}

.emoji-mart-bar {
  display: none;
}

.custom-icon-label-button {
  border: none;
  font-family: "Muli" !important;
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 0.02rem;
  color: #0923e6;
  cursor: pointer;
  background: none;
}

.custom-icon-label-button:focus {
  outline: none;
}

.custom-icon-label-button-icon {
  margin-right: 8px;
  font-size: 10px;
}

.custom-icon-label-button .download-link {
  text-decoration: none;
  color: #0923e6;
}

.custom-icon-label-red {
  color: #a71b04;
}

.custom-icon-label-button .icon-add::before {
  color: #0923e6;
}

.checkbox-container {
  position: relative;
  font-size: 0.9rem;
}

.checkbox-container .custom-checkbox {
  width: 0.8rem;
  height: 0.8rem;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid #5F5E5E;
  padding: 6px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  vertical-align: text-top;
  margin-right: 0.4rem;
  margin-left: 0;
  vertical-align: middle;
  cursor: pointer;
  margin-top: 0;
}

.checkbox-container .custom-checkbox:checked:after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  top: 3px;
  left: 3px;
  background: #1e4c88;
  border-radius: 1px;
}

.checkbox-label {
  font-size: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0;
  cursor: pointer;
}

.quiz-checkbox-wrapper {
  border: 1px solid #8F94A3;
  border-radius: 5px;
  padding: 10px 20px 10px 40px;
  margin: 0 0 15px;
  cursor: pointer;
  width: 100%;
  background: #fff;
  display: inline-block;
  /* min-width: 70%; */
}

.checkbox-container .custom-checkbox:checked + label {
  border-color: #1e4c88;
}

.quiz-checkbox {
  font-size: 14px;
}

.absolute-quiz-checkbox {
  position: absolute !important;
  left: 15px;
  top: 15px;
}

.checkbox-container:last-child .quiz-checkbox-wrapper {
  margin-bottom: 0;
}

.quiz-checkbox p {
  margin-bottom: 5px;
}

* {
  box-sizing: border-box;
}

.center {
  text-align: center;
}

.periodic-table-wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: 1700px;
}

.periodic-table-wrapper #table {
  display: grid;
  grid-template-columns: repeat(17, auto) 1fr;
}

/* Every element box  */
.periodic-table-wrapper .element {
  cursor: pointer;
  width: 30px;
  height: 30px;
  padding: 2px;
  border: 1px solid #333;
  border-collapse: collapse;
  overflow: hidden;
}

.periodic-table-wrapper .number {
  float: left;
  font-size: 6px;
  position: absolute;
}

.periodic-table-wrapper .symbol {
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
  font-size: 12px;
}

.periodic-table-wrapper .element-name {
  font-size: 4px;
  text-align: center;
}

.periodic-table-wrapper #element-box .symbol {
  font-size: 12px;
}

.periodic-table-wrapper #element-box .number {
  font-size: 6px;
}

.periodic-table-wrapper #element-box .element-name {
  font-size: 8px;
}

.periodic-table-wrapper #element-box {
  grid-column: 3/5;
  grid-row: 2/4;
  margin: 0;
  padding: 0.2vw;
  overflow: hidden;
}

/* Information Table  */
.periodic-table-wrapper #information {
  grid-column: 5/13;
  grid-row: 2/4;
  padding: 0.5vw;
  padding-top: 0;
  font-size: 1vw;
  max-height: 10vw;
  overflow-y: scroll;
}

.periodic-table-wrapper #information h1 {
  margin: 0 0 0.5vw 0;
}

.periodic-table-wrapper .big_title {
  display: inline-block;
}

.periodic-table-wrapper .cat_name {
  border-radius: 3px;
  padding: 0 5px;
  margin-left: 5px;
  top: -0.7vw;
  position: relative;
}

.periodic-table-wrapper .close-button {
  float: right;
  cursor: pointer;
  color: #ccc;
}

.periodic-table-wrapper .close-button:hover {
  color: #333;
}

.periodic-table-wrapper .appearance {
  margin-bottom: 0.5vw;
}

.periodic-table-wrapper .atom_info {
  margin-bottom: 0.5vw;
  color: #998100;
}

/* Helium to the top right  */
.element-2 {
  grid-column-start: -2;
}

/* Boron & Alumunium to the right  */
.element-5,
.element-13 {
  grid-column-start: 13;
}

/* Lanthinide & Actinoid split  */
.element-58,
.element-90 {
  grid-column-start: 3;
}

/* I DID NOT KNOW THERE WAS 119th ONE! */

.element-119 {
  grid-column-start: -2;
}

/* Categories and Groups */

/* Noble Gas  */
.periodic-table-wrapper .noble {
  background: #f3d2e8;
}

/* Alkali Metal  */
.alkali {
  background: #f88379;
}

/* Alkaline Earth Metal  */
.alkaline {
  background: #ffc3a0;
}

/* Transition Metal  */
.periodic-table-wrapper .transition {
  background: #e9ff08;
}

/* Polyatomic Non Metal  */
.polyatomic {
  background: #a3d2d5;
}

/* Diatomic Non Metal  */
.diatomic {
  background: #a3d5bf;
}

/* Post Transition Metal  */
.periodic-table-wrapper .post-transition {
  background: #8eb1e7;
}

/* Metalloid  */
.metalloid {
  background: #5ed89c;
}

/* Lanthanide  */
.lanthanide {
  background: #c9f;
  /* Put a space to seperate the split table  */
  /* margin-top: 2.5vw; */
}

/* Actinide  */
.periodic-table-wrapper .actinide {
  background: #ad87bd;
}

/* The Unknown Element  */
.periodic-table-wrapper .unknown {
  background: #cff;
}

/* Disable the top space for the first lathenide which sits inside the table  */
.periodic-table-wrapper .element-57 {
  margin: 0;
}

/* When in the hover state  */
.periodic-table-wrapper .active {
  background: #fff;
  /* border-color: yellow; */
}

.math-symbol-picker {
  border: 1px solid #eceff7;
  border-radius: 5px;
}

.math-symbol-picker-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 270px;
  padding: 16px 6px 6px 6px;
  will-change: transform;
}

.math-symbol-set-tray {
  /* margin-bottom: 16px; */
  display: flex;
  width: 319px;
  height: 36px;
  white-space: nowrap;
  position: relative;
  /* overflow-x: scroll; */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 6px 6px;
  border-bottom: 1px solid #eceff7;
}

.math-symbol-set-thumbnail {
  background-color: #eee;
  float: none;
  height: 100%;
  width: 25px;
  margin: 0 0.25%;
  display: inline-block;
  zoom: 1;
  cursor: pointer;
  background-color: #fff;
  border: none;
  padding: 4px;
  /* font-size: 0.7rem; */
  /* font-weight: bold; */
  /* color: #f9b234; */
  /* border: 1px solid #f9b234; */
  border-radius: 2px;
}

.math-symbol-set-thumbnail-active {
  background-color: #f9b234;
  color: #fff;
}

.math-symbol-set-thumbnail-img {
  height: 100%;
  width: auto;
}

.math-symbol-item {
  width: 50px;
  border: none;
  background-color: #fff;
  cursor: pointer;
  border-radius: 3px;
  padding: 2px 0;
  height: 30px;
  font-size: 16px;
}

.math-symbol-img {
  width: 100%;
  height: auto;
}

.math-symbol-item:hover {
  background-color: #eceff7;
}

.rdw-option-wrapper {
  border: 1px solid #F1F1F1;
  padding: 5px;
  min-width: 25px;
  height: 20px;
  border-radius: 2px;
  margin: 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: white;
  text-transform: capitalize;
}
.rdw-option-wrapper:hover {
  box-shadow: 1px 1px 0px #BFBDBD;
}
.rdw-option-wrapper:active {
  box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-option-active {
  box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-option-disabled {
  opacity: 0.3;
  cursor: default;
}

.rdw-dropdown-wrapper {
  height: 30px;
  cursor: pointer;
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  margin: 0 3px;
  text-transform: capitalize;
  background: white;
}
.rdw-dropdown-wrapper:focus {
  outline: none;
}
.rdw-dropdown-wrapper:hover {
  box-shadow: 1px 1px 0px #BFBDBD;
  background-color: #FFFFFF;
}
.rdw-dropdown-wrapper:active {
  box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-dropdown-carettoopen {
  height: 0px;
  width: 0px;
  position: absolute;
  top: 35%;
  right: 10%;
  border-top: 6px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.rdw-dropdown-carettoclose {
  height: 0px;
  width: 0px;
  position: absolute;
  top: 35%;
  right: 10%;
  border-bottom: 6px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.rdw-dropdown-selectedtext {
  display: flex;
  position: relative;
  height: 100%;
  align-items: center;
  padding: 0 5px;
}
.rdw-dropdown-optionwrapper {
  z-index: 100;
  position: relative;
  border: 1px solid #F1F1F1;
  width: 98%;
  background: white;
  border-radius: 2px;
  margin: 0;
  padding: 0;
  max-height: 250px;
  overflow-y: scroll;
}
.rdw-dropdown-optionwrapper:hover {
  box-shadow: 1px 1px 0px #BFBDBD;
  background-color: #FFFFFF;
}

.rdw-dropdownoption-default {
  min-height: 25px;
  display: flex;
  align-items: center;
  padding: 0 5px;
}
.rdw-dropdownoption-highlighted {
  background: #F1F1F1;
}
.rdw-dropdownoption-active {
  background: #f5f5f5;
}
.rdw-dropdownoption-disabled {
  opacity: 0.3;
  cursor: default;
}

.rdw-inline-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap
}
.rdw-inline-dropdown {
  width: 50px;
}
.rdw-inline-dropdownoption {
  height: 40px;
  display: flex;
  justify-content: center;
}

.rdw-block-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap
}
.rdw-block-dropdown {
  width: 110px;
}

.rdw-fontsize-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap
}
.rdw-fontsize-dropdown {
  min-width: 40px;
}
.rdw-fontsize-option {
  display: flex;
  justify-content: center;
}

.rdw-fontfamily-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap
}
.rdw-fontfamily-dropdown {
  width: 115px;
}
.rdw-fontfamily-placeholder {
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rdw-fontfamily-optionwrapper {
  width: 140px;
}

.rdw-list-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap
}
.rdw-list-dropdown {
  width: 50px;
  z-index: 90;
}
.rdw-list-dropdownOption {
  height: 40px;
  display: flex;
  justify-content: center;
}

.rdw-text-align-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap
}
.rdw-text-align-dropdown {
  width: 50px;
  z-index: 90;
}
.rdw-text-align-dropdownOption {
  height: 40px;
  display: flex;
  justify-content: center;
}
.rdw-right-aligned-block {
  text-align: right;
}
.rdw-left-aligned-block {
  text-align: left !important;
}
.rdw-center-aligned-block {
  text-align: center !important;
}
.rdw-justify-aligned-block {
  text-align: justify !important;
}
.rdw-right-aligned-block > div {
  display: inline-block;
}
.rdw-left-aligned-block > div {
  display: inline-block;
}
.rdw-center-aligned-block > div {
  display: inline-block;
}
.rdw-justify-aligned-block > div {
  display: inline-block;
}

.rdw-colorpicker-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
  flex-wrap: wrap
}
.rdw-colorpicker-modal {
  position: absolute;
  top: 35px;
  left: 5px;
  display: flex;
  flex-direction: column;
  width: 175px;
  height: 175px;
  border: 1px solid #F1F1F1;
  padding: 15px;
  border-radius: 2px;
  z-index: 100;
  background: white;
  box-shadow: 3px 3px 5px #BFBDBD;
}
.rdw-colorpicker-modal-header {
  display: flex;
  padding-bottom: 5px;
}
.rdw-colorpicker-modal-style-label {
  font-size: 15px;
  width: 50%;
  text-align: center;
  cursor: pointer;
  padding: 0 10px 5px;
}
.rdw-colorpicker-modal-style-label-active {
  border-bottom: 2px solid #0a66b7;
}
.rdw-colorpicker-modal-options {
  margin: 5px auto;
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  overflow: scroll;
}
.rdw-colorpicker-cube {
  width: 22px;
  height: 22px;
  border: 1px solid #F1F1F1;
}
.rdw-colorpicker-option {
  margin: 3px;
  padding: 0;
  min-height: 20px;
  border: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  box-shadow: 1px 2px 1px #BFBDBD inset;
}
.rdw-colorpicker-option:hover {
  box-shadow: 1px 2px 1px #BFBDBD;
}
.rdw-colorpicker-option:active {
  box-shadow: -1px -2px 1px #BFBDBD;
}
.rdw-colorpicker-option-active {
  box-shadow: 0px 0px 2px 2px #BFBDBD;
}

.rdw-link-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
  flex-wrap: wrap
}
.rdw-link-dropdown {
  width: 50px;
}
.rdw-link-dropdownOption {
  height: 40px;
  display: flex;
  justify-content: center;
}
.rdw-link-dropdownPlaceholder {
  margin-left: 8px;
}
.rdw-link-modal {
  position: absolute;
  top: 35px;
  left: 5px;
  display: flex;
  flex-direction: column;
  width: 235px;
  height: 205px;
  border: 1px solid #F1F1F1;
  padding: 15px;
  border-radius: 2px;
  z-index: 100;
  background: white;
  box-shadow: 3px 3px 5px #BFBDBD;
}
.rdw-link-modal-label {
  font-size: 15px;
}
.rdw-link-modal-input {
  margin-top: 5px;
  border-radius: 2px;
  border: 1px solid #F1F1F1;
  height: 25px;
  margin-bottom: 15px;
  padding: 0 5px;
}
.rdw-link-modal-input:focus {
  outline: none;
}
.rdw-link-modal-buttonsection {
  margin: 0 auto;
}
.rdw-link-modal-target-option {
  margin-bottom: 20px;
}
.rdw-link-modal-target-option > span {
  margin-left: 5px;
}
.rdw-link-modal-btn {
  margin-left: 10px;
  width: 75px;
  height: 30px;
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  cursor: pointer;
  background: white;
  text-transform: capitalize;
}
.rdw-link-modal-btn:hover {
  box-shadow: 1px 1px 0px #BFBDBD;
}
.rdw-link-modal-btn:active {
  box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-link-modal-btn:focus {
  outline: none !important;
}
.rdw-link-modal-btn:disabled {
  background: #ece9e9;
}
.rdw-link-dropdownoption {
  height: 40px;
  display: flex;
  justify-content: center;
}
.rdw-history-dropdown {
  width: 50px;
}

.rdw-embedded-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
  flex-wrap: wrap
}
.rdw-embedded-modal {
  position: absolute;
  top: 35px;
  left: 5px;
  display: flex;
  flex-direction: column;
  width: 235px;
  height: 180px;
  border: 1px solid #F1F1F1;
  padding: 15px;
  border-radius: 2px;
  z-index: 100;
  background: white;
  justify-content: space-between;
  box-shadow: 3px 3px 5px #BFBDBD;
}
.rdw-embedded-modal-header {
  font-size: 15px;
  display: flex;
}
.rdw-embedded-modal-header-option {
  width: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.rdw-embedded-modal-header-label {
  width: 95px;
  border: 1px solid #f1f1f1;
  margin-top: 5px;
  background: #6EB8D4;
  border-bottom: 2px solid #0a66b7;
}
.rdw-embedded-modal-link-section {
  display: flex;
  flex-direction: column;
}
.rdw-embedded-modal-link-input {
  width: 88%;
  height: 35px;
  margin: 10px 0;
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  font-size: 15px;
  padding: 0 5px;
}
.rdw-embedded-modal-link-input-wrapper {
  display: flex;
  align-items: center;
}
.rdw-embedded-modal-link-input:focus {
  outline: none;
}
.rdw-embedded-modal-btn-section {
  display: flex;
  justify-content: center;
}
.rdw-embedded-modal-btn {
  margin: 0 3px;
  width: 75px;
  height: 30px;
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  cursor: pointer;
  background: white;
  text-transform: capitalize;
}
.rdw-embedded-modal-btn:hover {
  box-shadow: 1px 1px 0px #BFBDBD;
}
.rdw-embedded-modal-btn:active {
  box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-embedded-modal-btn:focus {
  outline: none !important;
}
.rdw-embedded-modal-btn:disabled {
  background: #ece9e9;
}
.rdw-embedded-modal-size {
  align-items: center;
  display: flex;
  margin: 8px 0;
  justify-content: space-between;
}
.rdw-embedded-modal-size-input {
  width: 80%;
  height: 20px;
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  font-size: 12px;
}
.rdw-embedded-modal-size-input:focus {
  outline: none;
}

.rdw-emoji-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
  flex-wrap: wrap
}
.rdw-emoji-modal {
  overflow: auto;
  position: absolute;
  top: 35px;
  left: 5px;
  display: flex;
  flex-wrap: wrap;
  width: 235px;
  height: 180px;
  border: 1px solid #F1F1F1;
  padding: 15px;
  border-radius: 2px;
  z-index: 100;
  background: white;
  box-shadow: 3px 3px 5px #BFBDBD;
}
.rdw-emoji-icon {
  margin: 2.5px;
  height: 24px;
  width: 24px;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rdw-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.rdw-spinner > div {
  width: 12px;
  height: 12px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.rdw-spinner .rdw-bounce1 {
  animation-delay: -0.32s;
}
.rdw-spinner .rdw-bounce2 {
  animation-delay: -0.16s;
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  } 40% {
    transform: scale(1.0);
  }
}

.rdw-image-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
  flex-wrap: wrap
}
.rdw-image-modal {
  position: absolute;
  top: 35px;
  left: 5px;
  display: flex;
  flex-direction: column;
  width: 235px;
  border: 1px solid #F1F1F1;
  padding: 15px;
  border-radius: 2px;
  z-index: 100;
  background: white;
  box-shadow: 3px 3px 5px #BFBDBD;
}
.rdw-image-modal-header {
  font-size: 15px;
  margin: 10px 0;
  display: flex;
}
.rdw-image-modal-header-option {
  width: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.rdw-image-modal-header-label {
  width: 80px;
  background: #f1f1f1;
  border: 1px solid #f1f1f1;
  margin-top: 5px;
}
.rdw-image-modal-header-label-highlighted {
  background: #6EB8D4;
  border-bottom: 2px solid #0a66b7;
}
.rdw-image-modal-upload-option {
  width: 100%;
  color: gray;
  cursor: pointer;
  display: flex;
  border: none;
  font-size: 15px;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  outline: 2px dashed gray;
  outline-offset: -10px;
  margin: 10px 0;
  padding: 9px 0;
}
.rdw-image-modal-upload-option-highlighted {
  outline: 2px dashed #0a66b7;
}
.rdw-image-modal-upload-option-label {
  cursor: pointer;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}
.rdw-image-modal-upload-option-label span{
  padding: 0 20px;
}
.rdw-image-modal-upload-option-image-preview {
  max-width: 100%;
  max-height: 200px;
}
.rdw-image-modal-upload-option-input {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.rdw-image-modal-url-section {
  display: flex;
  align-items: center;
}
.rdw-image-modal-url-input {
  width: 90%;
  height: 35px;
  margin: 15px 0 12px;
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  font-size: 15px;
  padding: 0 5px;
}
.rdw-image-modal-btn-section {
  margin: 10px auto 0;
}
.rdw-image-modal-url-input:focus {
  outline: none;
}
.rdw-image-modal-btn {
  margin: 0 5px;
  width: 75px;
  height: 30px;
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  cursor: pointer;
  background: white;
  text-transform: capitalize;
}
.rdw-image-modal-btn:hover {
  box-shadow: 1px 1px 0px #BFBDBD;
}
.rdw-image-modal-btn:active {
  box-shadow: 1px 1px 0px #BFBDBD inset;
}
.rdw-image-modal-btn:focus {
  outline: none !important;
}
.rdw-image-modal-btn:disabled {
  background: #ece9e9;
}
.rdw-image-modal-spinner {
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.rdw-image-modal-alt-input {
  width: 70%;
  height: 20px;
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 5px;
}
.rdw-image-modal-alt-input:focus {
  outline: none;
}
.rdw-image-modal-alt-lbl {
  font-size: 12px;
}
.rdw-image-modal-size {
  align-items: center;
  display: flex;
  margin: 8px 0;
  justify-content: space-between;
}
.rdw-image-modal-size-input {
  width: 40%;
  height: 20px;
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  font-size: 12px;
}
.rdw-image-modal-size-input:focus {
  outline: none;
}
.rdw-image-mandatory-sign {
  color: red;
  margin-left: 3px;
  margin-right: 3px;
}

.rdw-remove-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
  flex-wrap: wrap
}

.rdw-history-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap
}
.rdw-history-dropdownoption {
  height: 40px;
  display: flex;
  justify-content: center;
}
.rdw-history-dropdown {
  width: 50px;
}

.rdw-link-decorator-wrapper {
  position: relative;
}
.rdw-link-decorator-icon {
  position: absolute;
  left: 40%;
  top: 0;
  cursor: pointer;
  background-color: white;
}

.rdw-mention-link {
  text-decoration: none;
  color: #1236ff;
  background-color: #f0fbff;
  padding: 1px 2px;
  border-radius: 2px;
}

.rdw-suggestion-wrapper {
  position: relative;
}
.rdw-suggestion-dropdown {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid #F1F1F1;
  min-width: 100px;
  max-height: 150px;
  overflow: auto;
  background: white;
  z-index: 100;
}
.rdw-suggestion-option {
  padding: 7px 5px;
  border-bottom: 1px solid #f1f1f1;
}
.rdw-suggestion-option-active {
  background-color: #F1F1F1;
}

.rdw-hashtag-link {
  text-decoration: none;
  color: #1236ff;
  background-color: #f0fbff;
  padding: 1px 2px;
  border-radius: 2px;
}

.rdw-image-alignment-options-popup {
  position: absolute;
  background: white;
  display: flex;
  padding: 5px 2px;
  border-radius: 2px;
  border: 1px solid #F1F1F1;
  width: 105px;
  cursor: pointer;
  z-index: 100;
}
.rdw-alignment-option-left {
  justify-content: flex-start;
}
.rdw-image-alignment-option {
  height: 15px;
  width: 15px;
  min-width: 15px;
}
.rdw-image-alignment {
  position: relative;
}
.rdw-image-imagewrapper {
  position: relative;
}
.rdw-image-center {
  display: flex;
  justify-content: center;
}
.rdw-image-left {
  display: flex;
}
.rdw-image-right {
  display: flex;
  justify-content: flex-end;
}
.rdw-image-alignment-options-popup-right {
  right: 0;
}

.rdw-editor-main {
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.rdw-editor-toolbar {
  padding: 6px 5px 0;
  border-radius: 2px;
  border: 1px solid #F1F1F1;
  display: flex;
  justify-content: flex-start;
  background: white;
  flex-wrap: wrap;
  font-size: 15px;
  margin-bottom: 5px;
  -webkit-user-select: none;
          user-select: none;
}
.public-DraftStyleDefault-block {
  margin: 1em 0;
}
.rdw-editor-wrapper:focus {
  outline: none;
}
.rdw-editor-wrapper {
  box-sizing: content-box;
}
.rdw-editor-main blockquote {
  border-left: 5px solid #f1f1f1;
  padding-left: 5px;
}
.rdw-editor-main pre {
  background: #f1f1f1;
  border-radius: 3px;
  padding: 1px 10px;
}
/**
 * Draft v0.9.1
 *
 * Copyright (c) 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */
.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:left;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4}
.markdown-label {
  font-size: 0.8rem;
  font-weight: bold;
  color: #07032b;
  color: var(--text-color);
  margin-bottom: 16px;
  display: block;
  letter-spacing: 0.02rem;
}

.markdown-description {
  font-size: 0.7rem;
  color: #5f5d73;
  color: var(--light-text-color);
  font-weight: normal;
  margin-top: 3px;
}

.markdown-container .markdown-error {
  color: #c34343;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 600;
}

.rdw-editor-main {
  background: #fff;
  padding: 16px;
  font-size: 0.9rem;
  border-radius: 5px;
  /* border: 1px solid #eceff7; */
}

.rdw-image-alignment,
.rdw-image-imagewrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.rdw-image-alignment img,
.rdw-image-imagewrapper img {
  width: 100%;
}

.rdw-editor-main figure {
  margin: 0;
}

.markdown-container {
  width: 100%;
}

.markdown-editor-wrapper {
  border: 1px solid #5F5E5E;
  border-radius: 5px;
  background-color: #fff;
}

.rdw-editor-toolbar {
  border: none;
  border-bottom: 1px solid #eceff7;
  margin-bottom: 0;
  border-radius: 5px;
}

.markdown-toolbar-option img {
  width: 16px;
}

.public-DraftStyleDefault-block {
  margin: 0;
}

.rdw-dropdown-wrapper:hover,
.rdw-option-wrapper:hover {
  box-shadow: none;
  border-color: #bec5d9;
}

.rdw-dropdown-wrapper,
.rdw-option-wrapper {
  border-color: #eceff7;
}

.rdw-link-modal,
.rdw-emoji-modal,
.rdw-sticker-modal,
.rdw-periodic-modal {
  border-color: #f9fafd;
  box-shadow: 3px 3px 8px rgba(215, 214, 230, 0.5);
}

.rdw-image-modal-size {
  display: none;
}

.markdown-container input {
  border: 1px solid #bec5d9 !important;
  border-radius: 3px !important;
  margin-bottom: 0 !important;
}

.rdw-link-modal {
  height: auto;
  width: 280px;
}

.rdw-emoji-modal,
.rdw-sticker-modal {
  height: auto;
  width: 335px;
}

.rdw-periodic-modal {
  /* height: auto;
  width: 580px; */

  /* Updated styling for periodic table in quizzes */
  overflow: auto;
}

.link-modal-action-bar {
  padding: 32px 16px 8px;
  text-align: center;
}

.link-modal-action-bar .custom-icon-label-button {
  margin: 0 16px;
  color: #1e4c88 !important;
}

.rdw-variable-menu {
  width: 180px;
  padding: 0;
}

.rdw-variable-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.8rem;
}

.rdw-variable-menu-item:hover {
  background-color: #f1f1f1;
}

.radio-wrapper {
  position: relative;
  display: flex;
  margin-bottom: 5px;
}

.position-type-radio {
  width: 15px;
  height: 15px;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid #5F5E5E;
  padding: 6px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin: 0;
}

.position-type-radio:checked:after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  top: 3px;
  left: 3px;
  background: #1e4c88;
  border-radius: 50%;
}

.radio-label {
  font-size: 0.8rem;
  vertical-align: text-top;
  margin-left: 8px;
  margin-bottom: 0;
}

.quiz-radio-wrapper {
  border: 1px solid #8F94A3;
  border-radius: 5px;
  padding: 10px 20px 10px 40px;
  margin: 0 0 15px;
  cursor: pointer;
  width: 100%;
  background: #fff;
  /* min-width: 70%; */
}

.radio-wrapper .position-type-radio:checked + label {
  border-color: #1e4c88;
}

.quiz-radio {
  font-size: 14px;
}

.absolute-quiz-radio {
  position: absolute;
  left: 15px;
  top: 14px;
}

.radio-wrapper:last-child .quiz-radio-wrapper {
  margin-bottom: 0;
}

.quiz-radio p {
  margin-bottom: 5px;
}

.custom-button {
  border-radius: 10px;
  border: none;
  box-shadow: 0px 0px 16px rgba(226, 226, 221, 0.7);
  padding: 11px 32px;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  color: var(--primary-text-color);
  cursor: pointer;
}

.custom-button:focus {
  outline: none;
}

.grey-button {
  background: #eceff7;
  color: #4a4a4a;
}

.primary-button {
  /* background-image: linear-gradient(to right, #f2c667 5%, #f9b234 100%); */
  background-color: #f9b234;
  background-color: var(--primary-color);
}

.orange-btn {
  border-radius: 10px;
  border: none;
  margin: 0.75rem;
  background: #f9b234;
  padding: 0.75rem 2.2rem;
  font-family: Muli;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-align: center;
  color: #07032b;
}

.green-button {
  color: #fff !important;
  background: #0d7d29;
}

.orange-btn:focus {
  outline: none;
}

.text-btn {
  border: none;
  background: transparent;
  font-family: Muli;
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-align: center;
  color: #07032b;
  cursor: pointer;
}

.text-btn:focus {
  outline: none;
}

.disabled-button {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #ccc;
}

.user-chat-bubble-container {
  display: flex;
  position: relative;
  /* padding: 0 48px 0 0; */
  max-width: 100%;
  justify-content: flex-end;
  margin-bottom: 25px;
  word-break: break-word;
}

.user-chat-message-container {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: end;
  flex: 1 1;
}

.user-chat-message {
  border-radius: 35px 35px 0px 35px;
  background: #eceff5;
  background: var(--user-color);
  padding: 1rem 1.6rem 1rem 1.6rem;
  color: #07032b;
  color: var(--user-text-color);
  /* font-weight: 600; */
  font-size: 0.85rem;
  font-weight: 600;
  white-space: pre-wrap;
  cursor: pointer;
  text-align: left;
  max-width: 90%;
  /* background: #fff;
  padding: 1rem 2.8rem 1rem 1.6rem;
  color: #07032b;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid #a5b7cf; */
}

.user-chat-time {
  font-size: 0.7rem;
  color: #0e0748;
  font-weight: 500;
  margin-top: 2px;
}

.user-button-container {
  text-align: right;
  float: right;
  min-width: 500px;
  padding: 8px 0;
}

.user-button-container:has(.buttons-paging) {
  min-width: 0;
  min-width: initial;
}

.user-chat-bubble-container .more-menu-wrapper {
  position: absolute;
  right: 52px;
  top: 5px;
}

.user-chat-bubble-container .more-menu-wrapper:hover .more-dropdown-menu,
.user-chat-bubble-container .more-menu-button:hover .more-dropdown-menu {
  display: block;
}

.user-chat-bubble-container .more-dropdown-menu .header-dropdown-menu-item {
  font-family: 'Muli';
  font-size: 0.85rem;
  color: #07032b;
  color: var(--user-text-color);
  cursor: pointer;
  letter-spacing: 0.02rem;
  font-weight: 600;
}

.user-chat-bubble-container .more-dropdown-menu {
  right: 0;
  position: absolute;
  background: #fff;
  top: 30px;
  box-shadow: 0 0 25px rgba(215, 214, 230, 0.6);
  width: -webkit-max-content;
  width: max-content;
  max-width: 250px;
  z-index: 200;
  display: none;
  min-width: 100px;
}

.user-chat-bubble-container .more-dropdown-menu .header-dropdown-menu-item {
  padding: 10px 15px;
  cursor: pointer;
  color: #07032b;
  color: var(--user-text-color);
}

.user-chat-bubble-container
  .more-dropdown-menu
  .header-dropdown-menu-item:hover {
  background: #f2f2ed;
}

.user-chat-bubble-container .more-menu-button {
  border: none;
  box-sizing: border-box;
  font-size: 1.1rem;
  cursor: pointer;
  background: none;
  color: #07032b;
  color: var(--user-text-color);
}

.user-chat-bubble-container .more-menu-button:focus {
  outline: none;
}

.user-chat-bubble-container i {
  margin-right: 5px;
  font-size: 0.9rem;
}

@media screen and (max-width: 768px) {
  .user-button-container {
    min-width: 90%;
  }
}

.userbubble-bookmark {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 0;
}

.wmi .user-button-container {
  padding: 0 !important;
  margin: 0 !important;
}

.wmi .user-button-container .suggestion-button {
  display: flex;
  flex-wrap: nowrap;
  background: #dfe4ec;
  border-radius: 8px;
  font-size: 1rem !important;
  padding: 10px 12px;
}

.input-card-wrapper-anchor {
  display: flex;
  width: 100%;
  /* margin-bottom: 32px; */
  color: #151418;
}

.input-card-wrapper-anchor:last-child {
  /* margin-bottom: 0; */
}

.input-card {
  background-color: #fff;
  /* box-shadow: 3px 0 10px rgba(215, 214, 230, 0.5); */
  position: relative;
  border-radius: 0 10px 10px 0;
  flex: 1 1;
}

.input-card .textinput-container {
  width: 100%;
}

.input-card .textinput-container textarea {
  overflow: hidden;
  resize: none;
  border: none;
  border-bottom: 1px solid #eceff7;
  border-radius: 0;
  background-color: transparent;
  min-height: 36px;
}

.input-card input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #eceff7;
  border-radius: 0;
  margin-bottom: 10px;
  background-color: transparent;
}

.input-card .markdown-container .textinput-container input {
  border: 1px solid #bec5d9;
  border-radius: 3px;
  margin-bottom: 0;
}

/* .input-card:hover {
  transition: all 0.1s ease;
  border: 1px solid var(--secondary-color);
  backface-visibility: hidden;
} */

.input-card-close-button {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 12px;
  z-index: 1;
  font-size: 0.7rem;
}

.input-card-close-button .icon-close::before {
  color: #07032b;
  color: var(--text-color);
}

.input-card-close-button:focus {
  outline: none;
}

.input-card-label {
  margin-right: 0.5rem;
  font-weight: bold;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-top: 1px;
}

/* .input-card-wrapper-anchor:focus-within .input-card {
  border: 1px solid var(--secondary-color);
} */

.input-card-wrapper-anchor .add-button-container {
  text-align: right;
  width: 100px;
  margin-left: 8px;
  box-sizing: border-box;
  padding: 16px 0;
}

.input-card .primary-section,
.input-card .secondary-section,
.input-card .primary-add-section,
.input-card .secondary-add-section {
  padding: 5px 32px 5px 20px;
  position: relative;
}

.input-card .number-section-label {
  padding-top: 10px;
}

.input-card .primary-add-section input {
  border-color: #1e4c88;
  border-color: var(--secondary-color);
}

.input-card .primary-section {
  /* background-color: #f1f7ff;number-section-label */
}

.input-card .primary-add-section {
  background-color: #d6e2f4;
}

.input-card .secondary-section {
  background-color: #fcfcf7;
}

.input-card .secondary-add-section {
  background-color: #f7f7ee;
}

.input-card .primary-section-label,
.input-card .secondary-section-label {
  position: absolute;
  left: -25px;
  top: 0;
  font-size: 0.7rem;
  color: #fff;
  font-weight: 600;
  padding: 5px;
  border-radius: 16px 0px 0 16px;
  width: 16px;
  height: 57px;
}

.input-card .primary-section-label span,
.input-card .secondary-section-label span {
  transform: rotate(-90deg);
  display: inline-block;
  position: absolute;
  left: -12px;
  top: 24px;
  width: 48px;
  text-align: center;
}

.input-card .secondary-section-label span {
  left: -17px;
}

.input-card .primary-section-label {
  background-color: #1e4c88;
  background-color: var(--secondary-color);
}

.input-card .secondary-section-label {
  background-color: #8d8d79;
}

.input-card .textinput-container input:focus {
  border-top: none;
  border-left: none;
  border-right: none;
}

.input-card .markdown-container .textinput-container input:focus {
  border: 1px solid #bec5d9;
}

.bullet-editor {
  box-sizing: border-box;
  border: 1px solid #bec5d9;
  padding: 16px 8px;
  text-align: center;
  background-color: #fff;
  border-radius: 5px;
  transition: all 0.5s ease-in-out;
}

.bullet-editor .bullet-editor-instruction {
  text-align: left;
  font-size: 0.75rem;
  padding: 5px 28px 0;
  font-weight: 600;
  color: #0923E6;
}

.drag-match-editor-wrapper .drag-match-definition-list {
  border: 1px solid #eceff7;
  background-color: #fff;
  padding: 16px;
  border-radius: 10px;
  max-width: 100%;
}

.drag-match-editor-wrapper .smooth-dnd-container {
  /* border: 1px solid #eceff7; */
  background-color: #fff;
  border-radius: 10px;
  /* padding: 16px; */
  max-width: 100%;
  min-width: 300px;
}

.drag-match-editor-wrapper .drag-card {
  background-color: #fff;
  /* box-shadow: 0 0 16px rgba(215, 214, 230, 0.5); */
  background-color: #f4f6fb;
  padding: 12px;
  border-radius: 5px;
  margin: 4px;
  font-size: 0.8rem;
  cursor: grab;
}

.drag-match-editor {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eceff7;
}

.drag-match-editor table {
  width: 100%;
}

.drag-match-editor td {
  min-width: 300px;
  border: 1px solid #eceff7;
  vertical-align: middle;
  /* border-radius: 5px; */
  font-size: 0.8rem;
}

.drag-match-editor .smooth-dnd-container {
  background-color: transparent;
  border-radius: 3px;
  border: none;
  padding: 0;
  min-height: 40px;
}

/* .drag-match-editor .smooth-dnd-container::before {
  content: "Drop here";
  width: 100px;
  font-size: 0.8rem;
  color: #5f5d73;
  position: absolute;
  z-index: -1;
  top: 8px;
  left: 8px;
} */

.drag-match-editor th {
  border: none;
  font-size: 0.8rem;
  padding: 12px;
  background-color: #eceff7;
  width: 50%;
}

.drag-match-editor-wrapper .smooth-dnd-container.horizontal {
  display: flex;
  flex-wrap: wrap;
}

.drag-match-editor-wrapper .target-drop-placeholder {
  border: 1px dashed #5f5d73;
  border-radius: 3px;
}

.drag-match-editor .target-drop-cell {
  position: relative;
}

.drag-match-editor .target-drop-cell .placeholder {
  position: absolute;
  top: 50%;
  left: 24px;
  font-size: 0.8rem;
  color: #5f5d73;
}

.bot-quiz-bubble-container {
  position: relative;
  width: -webkit-max-content;
  width: max-content;
  max-width: 90%;
}

.bot-quiz-bubble-wrapper .loading-bubble {
  background: #fff;
  background: var(--primary-color);
  padding: 16px 24px;
  color: #07032b;
  color: var(--primary-text-color);
  font-weight: 600;
  font-size: 0.85rem;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
  word-break: break-word;
  border-radius: 5px;
}

.bot-quiz-bubble-container a {
  color: #07032b;
  text-decoration: underline;
}

.bot-quiz-bubble-wrapper {
  margin-bottom: 24px;
}

.bot-followed-reply-wrapper {
  margin-bottom: 8px;
  margin-top: 8px;
}

.bot-quiz-bubble-container i {
  font-size: 0.9rem;
  color: #ffffff;
  color: var(--primary-text-color);
}

.bot-quiz-bubble-feedback-icon {
  font-size: 0.65rem;
  margin-right: 4px;
  cursor: pointer;
}

.bot-chat-avatar-container {
  width: 38px;
  height: 38px;
  box-shadow: 0 0 10px rgba(215, 214, 230, 0.5);
  border-radius: 50%;
  margin-right: 8px;
  position: absolute;
  bottom: 0px;
  left: 0;
  min-width: 35px;
  min-height: 35px;
  padding: 0px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bot-chat-avatar-container .bot-avatar-img {
  width: 100%;
}

.bot-quiz-bubble-container a {
  color: #07032b;
  text-decoration: underline;
}

.bot-quiz-bubble-container .quiz-question-frame p {
  margin: 0;
}

.bot-quiz-bubble-container .quiz-question-frame {
  border: 1px solid #f9b234;
  border: 1px solid var(--primary-color);
  padding: 16px;
  color: #07032b;
  font-weight: 600;
  font-size: 0.85rem;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
  word-break: break-word;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 12px rgba(215, 214, 230, 0.5);
}

.bot-quiz-bubble-wrapper .bot-quiz-input-container {
  width: 100%;
}

.bot-quiz-input-container .quiz-text-input-frame {
  /* max-width: 500px; */
  transition: all 0.1s ease-in-out;
  margin-top: 16px;
  margin-left: 48px;
  padding-right: 3px;
}

.bot-quiz-input-container .send-button .icon-send {
  position: absolute;
  left: 17px;
  top: 14px;
}

.bot-quiz-input-container .send-button .icon-send::before {
  color: #fff;
  color: var(--primary-text-color);
  display: inline-block;
  transform: rotate(-45deg);
}

.bot-quiz-input-container .send-button:focus {
  outline: none;
}

.bot-quiz-input-container .send-button {
  border: none;
  background: #f9b234;
  background: var(--primary-color);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  color: #fff;
  color: var(--primary-text-color);
  box-shadow: 0 0 16px rgba(215, 214, 230, 0.8);
  padding: 5px;
  border-radius: 50%;
  height: 48px;
  width: 48px;
  position: relative;
  margin-left: 12px;
}

.bot-quiz-input-container .send-button:disabled,
.bot-quiz-input-container .send-button[disabled] {
  background: #bbb;
  opacity: 0.5;
}

.bot-quiz-input-container .quiz-text-input-action {
  text-align: right;
  padding: 16px 0;
}

.bot-quiz-input-container .quiz-table-input-action {
  text-align: right;
  padding: 16px 0;
}

.bot-quiz-input-container .quiz-option-input-frame .quiz-option-btn {
  display: block;
  margin-bottom: 8px;
  border: none;
  background-color: #c5d2e3;
  background-color: var(--button-color);
  padding: 8px 16px;
  border-radius: 5px;
  box-shadow: 0 0 24px rgba(215, 214, 230, 0.5);
  width: 100%;
  min-width: 200px;
  max-width: -webkit-max-content;
  max-width: max-content;
  font-weight: 600;
  font-size: 0.85rem;
}

.bot-quiz-input-container .quiz-option-input-frame {
  margin-top: 16px;
  margin-left: 48px;
  width: 100%;
  /* max-width: 500px; */
  transition: all 0.1s ease-in-out;
  padding-right: 48px;
}

.bot-quiz-bubble-container .quiz-question-frame ul {
  list-style-type: disc !important;
  margin-left: 25px;
  margin-bottom: 5px;
}

.bot-quiz-bubble-container .quiz-question-frame ol {
  list-style: auto;
  margin-left: 25px;
  margin-bottom: 5px;
}

.bot-quiz-bubble-container .quiz-question-frame.isStrong strong {
  font-weight: 700 !important;
}

.bot-quiz-bubble-container .quiz-question-frame.isStrong p {
  font-weight: 400 !important;
}

.description-editor-wrapper {
  /* border: 1px solid #bec5d9;
  background-color: #fff; */
  border: 1px solid #bec5d9;
  width: 100%;
  /* border-radius: 5px; */
  /* overflow: hidden; */
}

.description-editor-wrapper .table-row-cell-wrapper {
  /* border-right: 1px solid #bec5d9; */
}

.table-row-cell-wrapper:last-of-type {
  border-right: none;
}

.description-editor-wrapper .table-header-cell-wrapper {
  position: relative;
}

.description-editor-wrapper .table-header-cell-wrapper:hover .column-toolbar {
  display: block;
}

.description-editor-wrapper .table-header-cell-wrapper:last-child,
.description-editor-wrapper .table-row-cell-wrapper:last-child,
.description-editor-wrapper .column-header-cell-wrapper:last-child {
  border-right: none;
}

.description-editor-wrapper .table-header-cell-wrapper textarea {
  background-color: #eceff7;
  border-radius: 0px;
  border: none;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 0.8rem;
  resize: none;
}

.description-editor-wrapper .table-header-cell-wrapper textarea::placeholder {
  color: #605D61;
}

.description-editor-wrapper .table-row-cell-wrapper textarea {
  border-radius: 0px;
  border: none;
  /* border-right: 1px solid #f9b234; */
  font-size: 0.8rem;
  padding: 8px 16px;
  resize: none;
  height: 100%;
}

.description-editor-wrapper .column-header-cell-wrapper textarea {
  background-color: #eceff7;
  font-weight: bold;
}

.description-editor-wrapper .description-editor-row {
  background-color: #fff;
  vertical-align: top;
}

.description-editor-wrapper .table-row-cell-wrapper:last-child textarea,
.description-editor-wrapper .column-header-cell-wrapper:last-child textarea {
  border: none;
}

.table-header-disabled-cell {
  background-color: #eceff7;
  border-radius: 1px;
  border: none;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 0.8rem;
  width: 300px;
  display: table-cell;
}

.description-editor-wrapper:hover .description-editor-wrapper-actions {
  display: block;
}

.description-editor-wrapper-actions {
  position: absolute;
  right: -72px;
  z-index: 1;
  top: 8px;
  display: none;
  padding: 0 8px;
  min-width: 60px;
}

.description-editor-wrapper-actions .toolbar-btn {
  border: none;
  background-color: transparent;
  height: 30px;
  width: 30px;
  margin-right: 0px;
  cursor: pointer;
  padding: 0;
}

.description-editor-wrapper-actions .icon-delete {
  color: #c34343;
  font-size: 0.75rem;
}

.column-remove-btn,
.column-convert-header-btn {
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0 5px;
}

.column-toolbar {
  position: absolute;
  right: 0;
  top: 6px;
  display: flex;
  display: none;
}

.column-remove-btn .icon-delete {
  color: #c34343;
  font-size: 0.75rem;
}

.no-justify-flex {
  justify-content: left !important;
}

.description-editor-add-column-btn-wrapper {
  padding: 8px 4px;
  min-width: 115px;
}

.description-editor-row-actions {
  position: absolute;
  right: -72px;
  z-index: 1;
  top: 8px;
  display: none;
  padding: 0 8px;
  min-width: 60px;
}

.description-editor-row-actions .toolbar-btn {
  border: none;
  background-color: transparent;
  height: 30px;
  width: 30px;
  margin-right: 0px;
  cursor: pointer;
  padding: 0;
}

.description-editor-row-actions .icon-delete {
  color: #c34343;
  font-size: 0.75rem;
}

.quiz-submission-page-frame {
  /* padding: 16px; */
  box-sizing: border-box;
  position: relative;
  height: 100%;
  overflow-y: auto;
  text-align: center;
  border: 1px solid #f9b234;
  border: 1px solid var(--primary-color);
  background-color: #fff;
  width: 70%;
  border-radius: 5px;
}

.quiz-submission-page-frame-full {
  width: 95%;
}

.quiz-submission-page-frame h4 {
  font-size: 0.8rem;
  font-weight: bold;
  margin: 10px 0;
}

.quiz-submission-page-frame .score-container {
  width: 100%;
  text-align: center;
}

.quiz-submission-page-frame .button-container {
  text-align: center;
  margin: 16px 0 32px;
}

.quiz-submission-page-frame .total-score-number {
  font-size: 0.65rem;
}

.quiz-submission-page-frame h5 {
  font-weight: bold;
  font-size: 0.8rem;
}

.quiz-submission-page-frame .answer-table-question {
  text-align: left;
  font-size: 0.8rem;
}

.quiz-submission-page-frame .main-action-container {
  margin: 32px 0;
}

.quiz-submission-page-frame .condition-message {
  font-weight: bold;
  font-size: 0.8rem;
}

.quiz-submission-page-frame .condition-message a {
  color: blue;
}

/* Style the accordion section */

.accordion-section {
  display: flex;
  flex-direction: column;
  border: 1px solid #5f5e5e;
  border-radius: 5px;
  margin-bottom: 24px;
}

/* Style the buttons that are used to open and close the accordion panel */

.accordion {
  background: none;
  color: #07032b;
  cursor: pointer;
  border: none;
  outline: none;
  transition: background-color 0.2s ease;
  padding: 16px 40px 16px 20px;
  position: relative;
  text-align: left;
  line-height: 16px;
}

.accordion-section .active {
  border-bottom: 1px solid #eceff7;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

.accordion:hover,
.active {
  background: none;
}

/* Style the accordion content title */

.accordion-title {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin: 0;
  color: #07032b;
  margin-bottom: 3px;
}

.accordion-title-icon {
  font-size: 20px;
  margin-right: 16px;
}

.accordion-description {
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.02rem;
  color: #5f5d73;
}

/* Style the accordion chevron icon */

.accordion-icon {
  transition: transform 0.6s ease;
  color: #07032b;
  position: absolute;
  right: 20px;
  top: 0px;
  bottom: 0;
  margin: auto;
}

/* Style to rotate icon when state is active */

.rotate {
  transform: rotate(90deg);
}

/* Style the accordion content panel. Note: hidden by default */

.accordion-content {
  background: none;
  /* overflow: hidden; */
  transition: max-height 0.6s ease;
  padding: 20px;
}

/* Style the accordion content text */

.accordion-text {
  padding: 18px;
  font-weight: normal;
  font-size: 14px;
  text-align: left;
}

.accordion-summary {
  display: flex;
}

.accordion-title-wrapper {
  margin-top: 2px;
}

.accordion-section .flex-container {
  display: flex;
  justify-content: space-between;
}

.accordion-section .accordion-actions {
  padding: 0px 10px 0px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.accordion-section .accordion-actions .inner {
  display: flex;
  justify-content: space-between;
}

.accordion-actions .custom-button {
  padding: 3px 16px 4px;
  text-transform: capitalize;
  font-size: 0.7rem;
  border-radius: 5px;
  border-width: 1px;
}

.snackbar-container {
  min-width: 250px;
  max-width: 350px;
  border-radius: 10rem;
  padding: 1rem 1.5rem 1.2rem;
  position: fixed;
  z-index: 1000;
  top: 3rem;
  right: 2rem;
  font-size: 0.9rem;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #fff;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  animation: fadein 0.5s forwards;
}

.snackbar-success {
  background: #00864D;
}

.snackbar-info {
  background: #0097c6;
}

.snackbar-error {
  background: #c85e5e;
}

.snackbar-warning {
  background: #e6bc40;
}

.snackbar-bubble {
  background: #5f5d73;
  padding: 12px 24px;
  min-width: 200px;
}

.snackbar-close {
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  margin-left: 20px;
}

.snackbar-close .icon-close::before {
  color: #fff;
}

.snackbar-close:focus {
  outline: none;
}

.snackbar-secondary-message {
  font-size: 0.8rem;
}

@keyframes fadein {
  from {
    right: 0;
    opacity: 0;
  }
  to {
    right: 2rem;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    right: 2rem;
    opacity: 1;
  }
  to {
    right: 0;
    opacity: 0;
  }
}

.quiz-submission-page {
  padding: 30px;
  box-sizing: border-box;
  position: relative;
  height: 100%;
  overflow-y: auto;
  text-align: center;
  background-color: #fff;
}

.quiz-submission-page h4 {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
}

.quiz-submission-page .score-badge {
  width: 100px;
  height: 100px;
  margin: 24px auto 32px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABhCAYAAADP7W/ZAAAACXBIWXMAAAsSAAALEgHS3X78AAAHtElEQVR4nO2dW2xURRjH/7vsrQVaaBpuYguFBGhKuwgECRsg4YHEF6sxEZ6KERP1AWuiiSYYi5c3EzD4YBRDSbxANErj9UFMGzZRMZVuASFaLhsiEAItK+32spdjZs/ZsmW658y5zZ7Dzu+p+eZsu5l/53K+75tvPJIkwRHEHonAG9gLf80G+GZXw+P35L5W+r9RZEauITP8JVb//rqprxr17ALQCiAMoF6xxgH0AegG0ImIdIf6HGdKL0rv0mZUNHyN4MJlVNv9ZJJpjF19Fc1/HKDa1JDFIJ+pVnmKkFCeO1BKcUorSt/q3ZjV+NHkqGBl/HoXGk+0Mj0d9XQCaKPs6sQA7EJE6lN9yiZKJ4osyMfw+KkmJliEMSZInkRumotIV6gWm/Hy/oM5yJQljxCqiZngwsdxNrK36ONRT7sJQaBMdccpKwdKIwpZQ/ROWdMReugt9K9vp1pkQfZTdv20KOsRV/hPX2SUzNkUo+xmSN8dRnqoF0Mnu5XdVYuFvz2OiLSEstqIj+cfy+GvfY2ymcU3exZ8s7cA2GLDN65H1BPmuejzn768wQ2Uzfls5dpFlMVufFU1blDhPuZQFhspzUIvUIW/KFI2RNmcD9eFnq8oZOcVqHWjKA/wmlKx9DvK5g7IDqyD1zc1tyWOhevhDT4Pb3DjpE3KDCE7dhTNvcemPOevOYngooep3+Ee3kQ097471VkZ9WydZiTJXmeDTk1jL4+nVz6G4KIPVTuZeHSzY8O5n/01fHYv1z+jTDaQUDodSgigmOc5obhpOvT6z/SLcubRn1C5fDtldwJ8RNELEacdEamT9XP61pS/tg04VhDnQkbSYT0+NHZRyAhhCUQJikGEUQ816BKlt2GHGCGW0ImoR3N9ZRMlVKcv/CooRnVufdFAWxSS0BBaPJ+yC4yiubZoi+KZ8SJlE5hBDgWowCCKr5GyCcyi6rbRFsU/t56yCcyiuthriyKl0pRNYCvaomSSFymbwCyqbhdtUbJjpyibwCyq8X5tUVKDhyibwAxxrSQMbVHWXu7H+HUxhVmHZlyG7Y1+9NKTkFIOSc93NTEWbzGbKGS0jFw4TNkFemHyFLN7iVtizyKdmKDsAlaOsCb06YunTNw6T9kErHSzPqhPFK8/QNkElqNPFF+1CHIZR9XfVQi7KP3rP4evWowU47RpeYfzsIlydtM3mLliJ2UX6KVbSUlSpXg2Cwlu+aoOwl/ThBmV/I9MGMGZ2SzTEcuFhoucRqZFIYlzvjnHEVrMNNQchXtEyZNQ8sKmhNunTl9EkFDdeVcK4k6qc8cA5QOzk9wTJS+Ir6qi3HuqBLQVCnNPFF/Vj0KQktKmHKBVRCG5waG6VeXaGw6ig+SFyaIE5r1X7r3hEMga0yqL4q9dUe694SBavYh6lmBGpTj76BzCXlStYys8I+BFvRghDsSL1O0b5d4JTsOLtZeOlnsnOIweefoav5Eo955wEH2yKJmRr8q9JxxEpyxK4rdXcqd5BaWmiyRXyKIQn37ynxeEJCUlkT/ldW9LHD5zCMmLn5RjbziARC6Gr5y3n/qesvrX3Rg5f1BkQ3IlrggymRNGvzw29+5B4lQ4lz8spahmgWWQ0bFPqeg6JUmPDgcXkqu9UvEGggvbXBGnd0c4uEep71K0kqu6KHnI2e+abVcQXFCsDokzcL4oJHXVgtPBUHZnoxc3i+nMFHEWQaArGY9k3qcGb1F2ASs2FczJjp+jbAJWbErwhnclZRKwYkMuMan/GJwvyoEYx4bSUjNX9Zi6MEBAyn8wFR5iE+XMxkPcSg4+2LzEknnPJgp5eRRYhQWlpU6vfNk1WffuoE2rEJu2KIF5j1M2gVlUpzCGgjnZ4mVuBUZR3R5ri+LOWxxcjbYo6TsjlE1gKyyV8QYom8AsqkUOtEWZuNlF2QRmUfWDaYuy5sJ+ZJJZyi4wStd0h0/1iUIYi39L2QRG0XS1sInS3Nuau1hZYBYSeVSduthFIST/fkpkuZgixuJigS5R1lz4AcmBnWJ9MURMSSNSXUvy6AtykduDRi81YPzaVapNUIx9iEhhPbcOGb+mlpwoDix4F76qFVOOekupLFJDN5G++z2k9NmczRvYgdDiDbbHY+zPZkkoNSALbxpqnebGoR7llqHjRm7p5nd3cP/ap1G5/AtLLnIuhr2i6JqCzMDveB2Z+pIDH1B299DKQxBwv1KQpMRmXOlK6zEyDRmF/0HU7DiX/zaLYU4PsgJxOtiBlODuYHHLhBb8RXHnLROqrnar4S9K6vYxyuZ8HvA1RQ4FWDeFpQbvYPTyc1j2qQcRibwDPaG8U1jFEV5b4Tz8Xh4LiYX3YlbT25RdL+S0WeOJ5dSn5BQe8t/dQrXpZynP7TBKtvtq6XvH9PUfJJSQur2NskM5TyO7P8wWbXiGtyAo6ZZ48Jd1hh2bmdEJSKntaOmLU2155M7cakKY9/VcwmwlpZm+Cjm3uRuhui2UvRipoVsY/3edqiCFyLm7nTqmMt23YltN6UWBUpjaP7cTgdqGog7L9N1hpAYPo+nkHqqNBfmW645c9vv0xBXxDvBe2O/HGaIU0r++HR5fE7x+eQGXsj8jk+xGy59RS36/PHKWFKSOkmmuj/VuE9sB8D8581R/854NPwAAAABJRU5ErkJggg==);
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  padding: 30px 0;
}

.quiz-submission-page .score-container {
  width: 100%;
  text-align: center;
}

.quiz-submission-page .review-comment {
  padding: 0.3rem 0.4rem;
}

.quiz-submission-page .button-container {
  text-align: center;
  margin: 16px 0 32px;
}

.quiz-submission-page .total-score-number {
  font-size: 0.65rem;
}

.quiz-submission-page h5 {
  font-weight: bold;
  font-size: 0.8rem;
}

.quiz-submission-page .correct-answers-container {
  margin-top: 40px;
}

.quiz-submission-page .correct-answers-container .accordion-section {
  background: #fff;
}

.quiz-submission-page .correct-answers-container .accordion-content {
  background-color: #fbfbfb;
}

.quiz-submission-page .answer-table-question,
.quiz-submission-page .answer-table-question * {
  text-align: left;
  font-size: 0.8rem !important;
  white-space: pre-wrap;
}

.quiz-submission-page .answer-table-subquestion {
  font-weight: bold;
}

.quiz-submission-page .main-action-container {
  margin: 32px 0;
}

.quiz-submission-page .condition-message {
  font-weight: bold;
  font-size: 0.8rem;
  text-align: left;
}

.quiz-submission-page .condition-message a {
  color: blue;
}

.quiz-submission-page .condition-buttons {
  text-align: left;
  border-bottom: 1px solid #eceff7;
  padding-bottom: 8px;
}

.quiz-submission-page .condition-buttons .suggestion-button {
  margin-left: 0;
  margin-right: 16px;
  margin-bottom: 16px;
  font-weight: 600;
  letter-spacing: 0.01rem;
}

.quiz-submission-page table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.quiz-submission-page th,
td {
  padding: 3px 8px;
}

.correct-answer-record-container .notify-block {
  color: #26ad6a;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 8px;
}

.quiz-submission-page .send-review-action-panel {
  position: fixed;
  /* width: 67%; */
  padding: 13px;
  top: 70px;
  z-index: 21;
  box-shadow: 0 0 15px rgba(215, 214, 230, 0.5);
  background: #1e4c88;
  color: #fff;
  left: 0;
  right: 0;
  animation: slide-down 0.4s ease;
  font-size: 0.8rem;
  font-weight: 600;
}

.quiz-submission-page .send-review-btn {
  border-radius: 3px;
  border: none;
  padding: 7px 16px 9px;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.03rem;
  font-family: 'Muli';
  background-color: #fbc300;
  color: #07032b;
}

.quiz-submission-page .cancel-review-btn {
  border-radius: 3px;
  border: none;
  padding: 7px 16px 9px;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.03rem;
  font-family: 'Muli';
  background-color: #eceff7;
  color: #07032b;
}

.quiz-submission-page .checkbox-label {
  color: #1e4c88;
  font-weight: bold;
}

.quiz-submission-page .checkbox-container {
  display: inline-block;
}

.quiz-submission-page .question-conditions-container {
  background-color: #eceff7;
  padding: 0px 24px;
  margin: 16px 16px 0;
}

.quiz-submission-page .page-main-heading {
  font-weight: bold;
  font-size: 0.9rem;
  text-align: left;
  margin: 0 0 16px;
  text-decoration: underline;
}

.essay-feed-back {
  text-align: left;
  white-space: pre-wrap;
}

.answer-table-question.bullet ul {
  display: flex;
  flex-direction: column;
}

.answer-table-question.question ul {
  list-style-type: disc !important;
  margin-left: 20px;
  margin-bottom: 5px;
}

.answer-table-question.question ol {
  list-style-type: auto;
  margin-left: 20px;
  margin-bottom: 5px;
}

.quiz-submission-page .condition-message .isStrong strong {
  font-weight: 700 !important;
}

.quiz-submission-page .condition-message .isStrong p {
  font-weight: 600 !important;
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.suggestion-button {
  border: none;
  background: #c5d2e3;
  background: var(--button-color);
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
  font-family: 'Muli';
  font-size: 0.8rem;
  padding: 10px 16px;
  color: #07032b;
  color: var(--button-text-color);
  margin-left: 15px;
  margin-bottom: 15px;
  letter-spacing: 0.03rem;
  font-weight: bold;
}

.suggestion-button:focus {
  outline: none;
}

.suggestion-button-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: calc(1.6em * 3);
}

/*!
 * Viewer.js v1.11.7
 * https://fengyuanchen.github.io/viewerjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-11-24T04:32:14.526Z
 */.viewer-close:before,.viewer-flip-horizontal:before,.viewer-flip-vertical:before,.viewer-fullscreen-exit:before,.viewer-fullscreen:before,.viewer-next:before,.viewer-one-to-one:before,.viewer-play:before,.viewer-prev:before,.viewer-reset:before,.viewer-rotate-left:before,.viewer-rotate-right:before,.viewer-zoom-in:before,.viewer-zoom-out:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 560 40%27%3E%3Cpath fill=%27%23fff%27 d=%27M49.6 17.9h20.2v3.9H49.6zm123.1 2 10.9-11 2.7 2.8-8.2 8.2 8.2 8.2-2.7 2.7-10.9-10.9zm94 0-10.8-11-2.7 2.8 8.1 8.2-8.1 8.2 2.7 2.7 10.8-10.9zM212 9.3l20.1 10.6L212 30.5V9.3zm161.5 4.6-7.2 6 7.2 5.9v-4h12.4v4l7.3-5.9-7.3-6v4h-12.4v-4zm40.2 12.3 5.9 7.2 5.9-7.2h-4V13.6h4l-5.9-7.3-5.9 7.3h4v12.6h-4zm35.9-16.5h6.3v2h-4.3V16h-2V9.7Zm14 0h6.2V16h-2v-4.3h-4.2v-2Zm6.2 14V30h-6.2v-2h4.2v-4.3h2Zm-14 6.3h-6.2v-6.3h2v4.4h4.3v2Zm-438 .1v-8.3H9.6v-3.9h8.2V9.7h3.9v8.2h8.1v3.9h-8.1v8.3h-3.9zM93.6 9.7h-5.8v3.9h2V30h3.8V9.7zm16.1 0h-5.8v3.9h1.9V30h3.9V9.7zm-11.9 4.1h3.9v3.9h-3.9zm0 8.2h3.9v3.9h-3.9zm244.6-11.7 7.2 5.9-7.2 6v-3.6c-5.4-.4-7.8.8-8.7 2.8-.8 1.7-1.8 4.9 2.8 8.2-6.3-2-7.5-6.9-6-11.3 1.6-4.4 8-5 11.9-4.9v-3.1Zm147.2 13.4h6.3V30h-2v-4.3h-4.3v-2zm14 6.3v-6.3h6.2v2h-4.3V30h-1.9zm6.2-14h-6.2V9.7h1.9V14h4.3v2zm-13.9 0h-6.3v-2h4.3V9.7h2V16zm33.3 12.5 8.6-8.6-8.6-8.7 1.9-1.9 8.6 8.7 8.6-8.7 1.9 1.9-8.6 8.7 8.6 8.6-1.9 2-8.6-8.7-8.6 8.7-1.9-2zM297 10.3l-7.1 5.9 7.2 6v-3.6c5.3-.4 7.7.8 8.7 2.8.8 1.7 1.7 4.9-2.9 8.2 6.3-2 7.5-6.9 6-11.3-1.6-4.4-7.9-5-11.8-4.9v-3.1Zm-157.3-.6c2.3 0 4.4.7 6 2l2.5-3 1.9 9.2h-9.3l2.6-3.1a6.2 6.2 0 0 0-9.9 5.1c0 3.4 2.8 6.3 6.2 6.3 2.8 0 5.1-1.9 6-4.4h4c-1 4.7-5 8.3-10 8.3a10 10 0 0 1-10-10.2 10 10 0 0 1 10-10.2Z%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:280px;color:transparent;display:block;font-size:0;height:20px;line-height:0;width:20px}.viewer-zoom-in:before{background-position:0 0;content:"Zoom In"}.viewer-zoom-out:before{background-position:-20px 0;content:"Zoom Out"}.viewer-one-to-one:before{background-position:-40px 0;content:"One to One"}.viewer-reset:before{background-position:-60px 0;content:"Reset"}.viewer-prev:before{background-position:-80px 0;content:"Previous"}.viewer-play:before{background-position:-100px 0;content:"Play"}.viewer-next:before{background-position:-120px 0;content:"Next"}.viewer-rotate-left:before{background-position:-140px 0;content:"Rotate Left"}.viewer-rotate-right:before{background-position:-160px 0;content:"Rotate Right"}.viewer-flip-horizontal:before{background-position:-180px 0;content:"Flip Horizontal"}.viewer-flip-vertical:before{background-position:-200px 0;content:"Flip Vertical"}.viewer-fullscreen:before{background-position:-220px 0;content:"Enter Full Screen"}.viewer-fullscreen-exit:before{background-position:-240px 0;content:"Exit Full Screen"}.viewer-close:before{background-position:-260px 0;content:"Close"}.viewer-container{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;bottom:0;direction:ltr;font-size:0;left:0;line-height:0;overflow:hidden;position:absolute;right:0;top:0;touch-action:none;-webkit-user-select:none;user-select:none}.viewer-container ::selection,.viewer-container::selection{background-color:transparent}.viewer-container:focus{outline:0}.viewer-container img{display:block;height:auto;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.viewer-canvas{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.viewer-canvas>img{height:auto;margin:15px auto;max-width:90%!important;width:auto}.viewer-footer{bottom:0;left:0;overflow:hidden;position:absolute;right:0;text-align:center}.viewer-navbar{background-color:rgba(0,0,0,.5);overflow:hidden}.viewer-list{box-sizing:content-box;height:50px;margin:0;overflow:hidden;padding:1px 0}.viewer-list>li{color:transparent;cursor:pointer;float:left;font-size:0;height:50px;line-height:0;opacity:.5;overflow:hidden;transition:opacity .15s;width:30px}.viewer-list>li:focus,.viewer-list>li:hover{opacity:.75}.viewer-list>li:focus{outline:0}.viewer-list>li+li{margin-left:1px}.viewer-list>.viewer-loading{position:relative}.viewer-list>.viewer-loading:after{border-width:2px;height:20px;margin-left:-10px;margin-top:-10px;width:20px}.viewer-list>.viewer-active,.viewer-list>.viewer-active:focus,.viewer-list>.viewer-active:hover{opacity:1}.viewer-player{background-color:#000;bottom:0;cursor:none;display:none;right:0;z-index:1}.viewer-player,.viewer-player>img{left:0;position:absolute;top:0}.viewer-toolbar>ul{display:inline-block;margin:0 auto 5px;overflow:hidden;padding:6px 3px}.viewer-toolbar>ul>li{background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;float:left;height:24px;overflow:hidden;transition:background-color .15s;width:24px}.viewer-toolbar>ul>li:focus,.viewer-toolbar>ul>li:hover{background-color:rgba(0,0,0,.8)}.viewer-toolbar>ul>li:focus{box-shadow:0 0 3px #fff;outline:0;position:relative;z-index:1}.viewer-toolbar>ul>li:before{margin:2px}.viewer-toolbar>ul>li+li{margin-left:1px}.viewer-toolbar>ul>.viewer-small{height:18px;margin-bottom:3px;margin-top:3px;width:18px}.viewer-toolbar>ul>.viewer-small:before{margin:-1px}.viewer-toolbar>ul>.viewer-large{height:30px;margin-bottom:-3px;margin-top:-3px;width:30px}.viewer-toolbar>ul>.viewer-large:before{margin:5px}.viewer-tooltip{background-color:rgba(0,0,0,.8);border-radius:10px;color:#fff;display:none;font-size:12px;height:20px;left:50%;line-height:20px;margin-left:-25px;margin-top:-10px;position:absolute;text-align:center;top:50%;width:50px}.viewer-title{color:#ccc;display:inline-block;font-size:12px;line-height:1.2;margin:5px 5%;max-width:90%;min-height:14px;opacity:.8;overflow:hidden;text-overflow:ellipsis;transition:opacity .15s;white-space:nowrap}.viewer-title:hover{opacity:1}.viewer-button{-webkit-app-region:no-drag;background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;height:80px;overflow:hidden;position:absolute;right:-40px;top:-40px;transition:background-color .15s;width:80px}.viewer-button:focus,.viewer-button:hover{background-color:rgba(0,0,0,.8)}.viewer-button:focus{box-shadow:0 0 3px #fff;outline:0}.viewer-button:before{bottom:15px;left:15px;position:absolute}.viewer-fixed{position:fixed}.viewer-open{overflow:hidden}.viewer-show{display:block}.viewer-hide{display:none}.viewer-backdrop{background-color:rgba(0,0,0,.5)}.viewer-invisible{visibility:hidden}.viewer-move{cursor:move;cursor:grab}.viewer-fade{opacity:0}.viewer-in{opacity:1}.viewer-transition{transition:all .3s}@keyframes viewer-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.viewer-loading:after{animation:viewer-spinner 1s linear infinite;border:4px solid hsla(0,0%,100%,.1);border-left-color:hsla(0,0%,100%,.5);border-radius:50%;content:"";display:inline-block;height:40px;left:50%;margin-left:-20px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:1}@media (max-width:767px){.viewer-hide-xs-down{display:none}}@media (max-width:991px){.viewer-hide-sm-down{display:none}}@media (max-width:1199px){.viewer-hide-md-down{display:none}}
.image-preview-anchor {
  text-decoration: none;
  border: 1px solid #eceff7;
  border-radius: 5px;
  display: block;
  padding: 8px;
  cursor: pointer;
  background-color: #fff;
}

.image-preview-img {
  width: 100%;
  height: auto;
  max-width: 300px;
  border-radius: 3px;
}

.viewer-backdrop {
  background-color: rgba(251, 251, 251, 1);
}

.bot-reply-container .image-preview-anchor {
  background-color: transparent;
  background-color: initial;
  border: none;
}

.bot-reply-container .video-preview-wrapper {
  background-color: transparent;
  background-color: initial;
  border: none;
}

.sticker-preview-anchor {
  text-decoration: none;
  border-radius: 5px;
  display: block;
  padding: 8px;
  cursor: pointer;
  background: transparent;
}

.sticker-preview-img {
  width: auto;
  height: auto;
  border-radius: 3px;
  max-height: 200px;
}

.video-preview-wrapper {
  border: 1px solid #eceff7;
  border-radius: 5px;
  padding: 8px;
  background-color: #fff;
}

.video-preview-wrapper iframe {
  border-radius: 3px;
  max-width: 100%;
}

.video-expanded-wrapper {
  text-align: center;
  --primary-text-color: #f9b234;
  max-width: 300px;
}

.video-expanded-wrapper .new-tab-btn {
  font-size: 0.8rem;
}

.video-preview {
  max-width: 320px;
}

.bot-reply-container {
  position: relative;
  width: -webkit-max-content;
  width: max-content;
  /* max-width: 90%; */
}

.bot-bubble {
  display: flex;
  position: relative;
  /* padding-left: 50px; */
}

.text-reply-container,
.loading-bubble {
  /* background: var(--primary-color); */
  background: transparent;
  padding: 1rem 1rem 1rem 1rem;
  color: #07032b;
  /* color: var(--primary-text-color); */
  font-weight: 600;
  font-size: 0.85rem;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
  word-break: break-word;
}

.reference-container {
  border-top: 1px solid #f5eff4;
  /* background: var(--primary-color);
  color: var(--primary-text-color); */
  font-size: 14px;
  background: transparent;
  padding: 1rem 1rem 1rem 1rem;
  color: #07032b;
}

.reference-container .doc-item {
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
}

.reference-container .doc-item button {
  text-decoration: underline;
  text-align: left;
  word-break: break-all;
}

.wmi .text-reply-container,
.wmi .user-chat-message,
.wmi .bot-reply-container {
  font-size: 1rem;
}

.loading-bubble,
.first-bubble {
  border-radius: 35px 35px 35px 0px;
}
.first-bubble.view-srouce {
  border-bottom-right-radius: 0px;
}

.followed-bubble {
  border-radius: 0px 35px 35px 35px;
}

.text-reply-container img {
  max-width: 350px;
  width: 100%;
}

.text-reply-container hr {
  margin: 8px 0;
}

.bot-reply-container a {
  color: #07032b;
  color: var(--primary-text-color);
  text-decoration: underline;
}

.bot-reply-wrapper {
  /* margin-bottom: 37px; */
  position: relative;
}

.bot-reply-wrapper:has(+ .bot-reply-wrapper) {
  margin-bottom: 16px;
}

.bot-reply-wrapper:has(+ .bot-reply-wrapper)::before {
  content: '';
  position: absolute;
  bottom: -16px;
  /* margin-bottom: 16px; */
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: #ddd;
}

.btn {
  margin: 0.2rem !important;
}
.bot-followed-reply-wrapper {
  margin-bottom: 8px;
  margin-top: 8px;
}

.bot-reply-container .more-menu-wrapper {
  position: absolute;
  right: 8px;
  top: 5px;
}

.bot-reply-container .more-menu-wrapper:hover .more-dropdown-menu,
.bot-reply-container .more-menu-button:hover .more-dropdown-menu {
  display: block;
}

.bot-reply-container .more-dropdown-menu .header-dropdown-menu-item {
  font-family: 'Muli';
  font-size: 0.85rem;
  color: #07032b;
  cursor: pointer;
  letter-spacing: 0.02rem;
  font-weight: 600;
}

.bot-reply-container .more-dropdown-menu {
  right: 0;
  position: absolute;
  background: #fff;
  top: 30px;
  box-shadow: 0 0 25px rgba(215, 214, 230, 0.6);
  width: -webkit-max-content;
  width: max-content;
  max-width: 250px;
  z-index: 200;
  display: none;
  min-width: 100px;
}

.bot-reply-container .more-menu-button {
  border: none;
  box-sizing: border-box;
  font-size: 1.1rem;
  cursor: pointer;
  background: none;
}

.bot-reply-container i {
  font-size: 0.9rem;
  color: #ffffff;
  color: var(--primary-text-color);
}

.bot-reply-feedback-icon {
  font-size: 0.65rem;
  margin-right: 4px;
  cursor: pointer;
}

.bot-reply-feedback-icon:before {
  color: #5f5e5e !important;
  font-size: 10px;
}

.bot-reply-feedback-icon-selected:before {
  color: #f2c667 !important;
}

.bot-reply-feedback-container {
  margin-left: 12px;
}

.bot-chat-avatar-container {
  width: 38px;
  height: 38px;
  box-shadow: 0 0 10px rgba(215, 214, 230, 0.5);
  border-radius: 50%;
  margin-right: 8px;
  position: absolute;
  bottom: 0px;
  left: 0;
  min-width: 35px;
  min-height: 35px;
  padding: 0px;
  background: #fff;
  overflow: hidden;
}

.bot-chat-avatar-container .bot-avatar-img {
  width: 100%;
}

.bot-reply-container a {
  color: #07032b;
  color: var(--primary-text-color);
  text-decoration: underline;
}
.text-reply-container .bot-reply-feedback-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 0;
}
.text-reply-container .bot-reply-feedback-icon {
  margin: 0 1rem;
}
.text-reply-container {
  min-width: 110px;
  cursor: pointer;
  width: 100%;
}
/* new reply chat */
.text-reply-new {
  display: flex;
  align-items: center;
  /* background-color: #fefaeb; */
  color: #07032b;
}
.toltip-description {
  background-color: #ffe6f1;
  padding: 1rem;
  color: #0e0748;
  font-size: 0.875rem;
  border-radius: 8px 0px 8px 8px;
  width: 20rem;
  position: absolute;
  top: 11px;
  right: 100%;
  z-index: 999;
  display: none;
}
.toltip-description:after {
  content: '';
  border: 10px solid transparent;
  border-left-color: #ffe6f1;
  position: absolute;
  left: 100%;
  top: 0;
}
.chatInfo-toltip:hover .toltip-description {
  display: block;
}
.action-wraper {
  position: absolute;
  right: 0;
  top: 100%;
}
.showBookmarks {
  display: none;
  z-index: 2;
  position: relative;
}
.showBookmarks.shown {
  display: block;
}

.text-reply-list ol {
  list-style: auto;
  margin-left: 15px;
}

.text-reply-list ul {
  list-style-type: '-  ';
  margin-left: 15px;
}

.text-reply-list p {
  margin-top: 10px;
}

.text-reply :nth-child(1) {
  margin-top: 0px;
}

@media screen and (max-width: 768px) {
  .text-reply-new {
    align-items: flex-start;
  }

  .chatInfo-toltip {
    position: absolute !important;
    right: 5px;
    top: 15px;
  }

  .bot-reply-feedback-container {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 575px) {
  .toltip-description {
    width: 14rem;
  }
}

.d-none-imp {
  display: none !important;
}

.text-reply-list pre:has(code) {
  background-color: #f3f2f2;
  color: #383a42;
}

.text-reply-list pre:has(code):first-of-type {
  margin-top: 16px;
  padding-top: 8px;
}

.text-reply-list pre:has(code):last-of-type {
  margin-bottom: 16px;
  padding-bottom: 8px;
}

.text-reply-list pre {
  padding-left: 8px;
  padding-right: 8px;
  line-height: normal;
}

.text-reply-list pre code {
  border-left: 2px solid #e6edff;
  padding-left: 8px;
  display: block;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.chat-messages-header {
  background-color: #fff;
  padding: 0.875rem 2.5rem 0.875rem 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 15;
}
.main-logo {
  max-width: 80px;
}
.main-logo img {
  width: 100%;
  height: 40px;
  object-fit: contain;
}

.chat-messages-header .left-section {
  display: flex;
}

.header-avatar-container {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  position: relative;
  border: 1px solid #eceff5;
  /*padding: 3px;*/
}

.header-avatar-container img {
  width: 100%;
}

.right-section {
  display: inline-flex;
}

.more-menu-wrapper {
  position: relative;
  height: 100%;
}
.more-menu-wrapper .header-avatar-container > img {
  border-radius: 50%;
  height: 100%;
  object-fit: cover;
}
.more-menu-wrapper .more-menu-button .icon-down-chevron {
  font-size: 7px;
  margin-left: 0.75rem;
}
.chat-messages-header .more-menu-wrapper:hover .more-dropdown-menu,
.chat-messages-header .more-menu-button:hover .more-dropdown-menu {
  display: block;
}
.chat-messages-header .more-menu-wrapper:focus .more-dropdown-menu,
.chat-messages-header .more-menu-button:focus .more-dropdown-menu {
  display: block;
}

.chat-messages-header .more-dropdown-menu .header-dropdown-menu-item {
  font-family: 'Muli';
  font-size: 0.85rem;
  color: #07032b;
  cursor: pointer;
  letter-spacing: 0.02rem;
  padding: 0.6rem;
  display: flex;
  align-items: center;
}

.chat-messages-header .more-dropdown-menu {
  right: 0;
  position: absolute;
  background: #fff;
  top: 100%;
  box-shadow: 0px 4px 4px 0px #b9b6e0;
  width: -webkit-max-content;
  width: max-content;
  max-width: 250px;
  z-index: 200;
  display: none;
  min-width: 100px;
  border-radius: 8px;
  padding: 0.5rem 1rem;
}

.chat-messages-header .more-dropdown-menu .header-dropdown-menu-item:hover {
  background: #f2f2ed;
}

.chat-messages-header .more-menu-button {
  border: none;
  box-sizing: border-box;
  font-size: 1.1rem;
  cursor: pointer;
  background: none;
  height: 100%;
}

.chat-messages-header .more-menu-button:focus {
  outline: none;
}

.chat-messages-header .header-back-btn {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-right: 12px;
  cursor: pointer;
}

.chat-messages-header .admin-custom-btn {
  border-radius: 3px;
  border: none;
  padding: 6px 16px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03rem;
  font-family: 'Muli';
  margin-right: 12px;
  background-color: #f9b234;
  background-color: var(--button-color);
  box-shadow: 0px 0px 12px rgba(215, 214, 230, 0.5);
  color: #fff;
  color: var(--button-text-color);
  /* border: 1px solid #fff; */
  margin-top: 2px;
}

.chat-messages-header .admin-custom-btn[disabled] {
  background-color: #ccc;
}

.chat-messages-header .notification-btn {
  position: relative;
}

.chat-messages-header .unread-mark {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #f9b234;
  /* background-color: var(--primary-color); */
  border-radius: 50%;
  right: 5px;
}

.dropdown-head {
  padding: 0.5rem 0;
}
.dropdown-head > div {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
}
.dropdown-head > div > span {
  color: #6b7085;
  font-size: 0.75rem;
  font-weight: 400;
}
.more-dropdown-menu hr {
  border-top-color: #cdd5ef;
  margin: 0.5rem 0;
}
.menu-icons {
  width: 18px;
  margin-right: 0.5rem;
}
.menu-icons svg {
  width: 17px;
  height: 16px;
}

.is-widget .icon-down-chevron {
  font-size: 7px;
  margin-left: 0.75rem;
}

/* media queries */

@media screen and (max-width: 768px) {
  .chat-messages-header .left-section .header-avatar-container,
  .main-logo {
    display: none;
  }
  .chat-messages-header {
    padding: 0.5rem 1rem;
  }
}

.dropdown_wrapper {
  position: relative;
}
.dropdown_wrapper label {
  font-family: "Muli";
  font-size: 0.8rem;
  font-weight: bold;
  color: #07032b;
  color: var(--text-color);
  margin-bottom: 16px;
  display: block;
  letter-spacing: 0.02rem;
}
.dropdown_text {
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid #d8d8d2;
  border-radius: 5px;
  font-size: 0.8rem;
  color: #07032b;
  color: var(--text-color);
  font-family: "Muli";
}
.dropdown_text[readonly] {
  cursor: pointer;
}
.dropdown_text:focus {
  outline: none;
}
.dropdown_menu {
  position: absolute;
  border: 1px solid;
  width: 100%;
  left: 0;
  box-sizing: border-box;
  top: 100%;
  border: 1px solid #bec5d9;
  z-index: 12;
  max-height: 280px;
  overflow-y: auto;
}

.dropdown_menu_list {
  width: 100%;
  text-align: left;
  padding: 10px;
  border: none;
  background-color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: "Muli";
  color: #07032b;
  color: var(--text-color);
}

.dropdown_menu_list:hover,
.dropdown_menu_list.hover {
  background-color: #bec5d9;
}
.dropdown_wrapper .arrow-down {
  position: absolute;
  top: 18px;
  right: 16px;
  z-index: 1;
  font-size: 0.4rem;
  color: #07032b;
}

.css-1uccc91-singleValue {
  color: #07032b !important;
  color: var(--text-color) !important;
}

.css-mxetbz-control {
  border-color: #bec5d9;
  font-size: 0.8rem;
}

.css-1okebmr-indicatorSeparator {
  display: none;
}

.dropdown_wrapper .dropdown-description {
  font-size: 0.65rem;
  font-weight: 600;
  color: #5f5d73;
  margin-bottom: 8px;
}

.nested-optgroup-label {
  color: #07032b;
  font-weight: bold;
}

.chat-page-container > .chat-modal {
  padding-top: 0px;
}

.chat-modal {
  background-color: rgba(236, 239, 247, 0.8);
  z-index: 20; /* correct */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

/* Modal content */
.chat-modal .modal-content {
  background-color: #fff;
  width: 90%;
  margin: auto;
  /* box-shadow: 0px 0px 15px rgba(215, 214, 230, 0.5); */
  border-radius: 10px;
  padding: 0px;
  position: relative;
  max-height: 500px;
  border: none;
  max-width: 400px;
}

.chat-modal .mt-20 {
  margin-top: 20px;
}

.chat-modal .modal-title {
  font-size: 1.1rem;
  letter-spacing: 0.03rem;
  font-family: "Muli";
  font-weight: bold;
  color: #07032b;
  padding-left: 15px;
  padding-top: 15px;
}

.chat-modal .modal-subtitle {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  color: #6a6a6a;
  margin-top: 5px;
}

.chat-modal .modal-body {
  padding: 32px 32px 30px;
}

.chat-modal .modal-button-container {
  text-align: center;
  margin-top: 30px;
}

.chat-modal .modal-button-container .custom-button {
  margin: 10px 10px;
}

/* Close button */
.chat-modal .close {
  color: #07032b;
  margin-right: 0.5rem;
  float: right;
  font-size: 25px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 10px;
}

.chat-modal .close:hover,
.chat-modal .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.chat-modal .modal-banner {
  border-radius: 10px 10px 0 0;
  padding: 30px 40px;
  text-align: center;
}

.chat-modal .modal-banner-img {
  max-height: 80px;
}

.profile-modal .modal-title{
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #848282;
  margin-bottom: 0;
}

.profile-modal .chat-modal .modal-body{
  padding: 10px 0px;
  
}

.profile-modal .content-edit {
  max-height: 400px;
  overflow: auto;
}

.profile-modal .modal-button-container{
  display: none;
}

.profile-modal .chat-modal .modal-content {
  max-height: none;
  max-height: initial;
}

.profile-modal .profile-ava {
  position: relative;
  cursor:pointer;
}

.edit-ava .image {
  border-radius: 50%;
  display: inline-block;
  margin: 5px;
  cursor:pointer;
}

.edit-ava .image.selected {
  border: 3px solid #CDD5EF;
}

.profile-modal .edit-ava {
  padding: 5px 20px;
}

.edit-ava .image.plus {
  background: #ECEFF7;
  position: relative;
}

.profile-modal .edit-ava .plus-icon{
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

.profile-modal .image img{
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  border-radius: 50%;
}

.edit-ava .image.is-80x80 {
  height: 80px;
  width: 80px;
}

.profile-modal .camera-icon {
  background-image: url(/static/media/camera.82c2ae8fb4241e1e1e22.svg);
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-size: auto;
  border-radius: 50%;
  background-position: center;
  position: absolute;
  bottom: -7px;
  right: 1px;
}

.profile-modal button.secondary {
  color: #0923E6;
  background: white;
}

.profile-modal .footer {
  gap: 16px;
  border-top: 1px solid #848282;
  width: 100%;
  padding: 0 20px;
  padding-top: 10px;
  margin-top: 10px;
}

.profile-modal button {
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #0923E6;
  padding: 6px 16px;
}

.profile-modal button.main {
  color: white;
  background: #0923E6;
}

.profile-modal .tag {
  font-size: 12px;
  border-radius: 50px;
  background: #0923E6;
  color: white;
  padding: 4px 16px;
  margin: 5px;
  display: inline-block;
}

.profile-modal .email {
  font-size: 18px;
  color: #495057;
}

.profile-modal .name {
  font-size: 20px;
  font-weight: 600;
}

.profile-modal .edit-name-title {
  font-size: 16px;
  color: #495057;
}


.profile-modal .edit-name {
  padding: 5px 20px;
}

.profile-modal .edit-name input {
  width: 100%;
  border: 1px solid #848282;
  padding-top: 2px;
  padding-bottom: 2px;
  height: 2rem;
  margin-top: 3px;
  font-size: 16px;
  padding-left: 10px
}

.profile-modal .tag-list {
  padding: 5px 20px;
}

.tag-list .tag-title{
  font-size: 18px;
  padding: 8px 0;
}

.profile-modal .block-ui {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.5;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.chat-input-container {
  display: flex;
  gap: 16px;
  min-height: 52px;
  /* padding: 8px 16px; */
  justify-content: space-between;
  /* background-color: #e4e8f2; */
  z-index: 1;
  align-items: center;
  border-radius: 16px;
}

.chat-input-container .avatar-container {
  height: 32px;
  width: 32px;
  border-radius: 50%;
}

.chat-input-container .avatar-container img {
  width: 100%;
}

.chat-input-container .input-container {
  display: flex;
  gap: 8px;

  flex: 1 1;
  border-radius: 24px;
}

.chat-input-container .action-container {
  display: flex;
}

.chat-input-container .input-container .input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Muli';
  font-size: 0.9rem;
  color: #07032b;
  border: none;
  height: 31px;
  padding: 0 !important;
  background-color: transparent;
  border-radius: 0 !important;
  resize: none;
  max-height: 185px;
  outline: none !important;
  /* border-bottom: 1px solid #eee; */
}

.chat-input-container .input-container .input::-webkit-scrollbar {
  width: 6px;
}

.chat-input-container .input-container .input::-webkit-scrollbar-track {
  background-color: #cdd5ef;
  border-radius: 8px;
}

.chat-input-container .input-container .input::-webkit-scrollbar-thumb {
  background-color: #9398ab;
  border-radius: 8px;
}

.chat-input-container .input-container .input:focus {
  outline: none;
}

.chat-input-container .action-container .cancel-record-button {
  font-size: 16px;
}

.chat-input-container .action-container .end-session-button {
  background: #03a8f4;
  color: #fff;
}

.chat-input-container .action-container .end-session-button-icon {
  position: absolute;
  left: 17px;
  top: 16px;
}

.chat-input-container .end-session-button .icon-close::before {
  color: #ffffff;
  font-size: 0.85rem;
}

.chat-input-container .admin-custom-btn {
  height: 35px;
  margin-top: 6px;
  border-radius: 3px;
  border: none;
  padding: 7px 22px 9px;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.03rem;
  font-family: 'Muli';
  margin-left: 12px;
  background-color: #f9b234;
  color: #fff;
}

.chat-input-container .admin-custom-btn[disabled] {
  background-color: #ccc;
}

.chat-input-container .input-container .input[disabled] {
  opacity: 0.7;
}

/* media queries */
@media screen and (max-width: 768px) {
  .chat-input-container {
    padding: 8px;
  }
}

/* .avatar-icon {
  width: 20px;
  height: 20px;
  opacity: 0.7;
} */

.form-submission-message-page {
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: 30px;
}

.form-submission-message-page .message-content-wrapper {
  flex: 1 1;
  padding: 10%;
}

.form-submission-message-page .message-content-wrapper-convo {
  padding: 10%;
}

.form-submission-message-page .message-content {
  text-align: center;
}

.form-submission-message-page .message-content ul,
.form-submission-message-page .message-content ol {
  text-align: left;
}

.form-submission-message-page .heading {
  margin: 24px 0 16px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.form-submission-message-page .form-submission-message {
  font-size: 0.9rem;
  margin: auto;
}

.form-submission-message-page .icon-tick,
.form-submission-message-page .icon-warning {
  font-size: 70px;
}

.form-submission-message-page .footer {
  text-align: center;
}

.form-submission-message-page .form-success-gif {
  max-width: 70px;
}

.form-success-gif-container {
  display: flex;
  justify-content: center;
}
.popup-notification-modal {
  background-color: rgba(236, 239, 247, 0.8);
  z-index: 20;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: table;
}

/* Modal content */
.popup-notification-modal .popup-notification-modal-box {
  width: 90%;
  margin: auto;
  /* box-shadow: 0px 0px 15px rgba(215, 214, 230, 0.5); */
  border-radius: 10px;
  padding: 0px;
  position: relative;
  max-height: 500px;
  border: none;
  max-width: 500px;
  display: table-cell;
  vertical-align: middle;
}

.popup-notification-modal .mt-20 {
  margin-top: 20px;
}

.popup-notification-modal .popup-notification-modal-title {
  font-size: 1.2rem;
  letter-spacing: 0.03rem;
  font-family: "Muli";
  font-weight: bold;
  margin-bottom: 16px;
  color: #07032b;
}

.popup-notification-modal .popup-notification-modal-description {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02rem;
  margin-top: 5px;
}

.popup-notification-modal .popup-notification-modal-content {
  padding: 32px 32px 30px;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  max-width: 500px;
  text-align: center;
  position: relative;
  animation-name: zoom-in;
  animation-duration: 0.5s;
}

/* Close button */
.popup-notification-modal .popup-notification-modal-close-btn {
  color: #07032b;
  margin-right: 0.5rem;
  float: right;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: transparent;
  border: none;
}

.popup-notification-modal-close-btn .icon-close::before {
  color: #07032b;
}

.popup-notification-modal .popup-notification-modal-close-btn:hover,
.popup-notification-modal .popup-notification-modal-close-btn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.popup-notification-modal .popup-notification-modal-img {
  max-width: 180px;
  margin-bottom: 32px;
}

.popup-notification-modal .popup-notification-btn-wrapper {
  margin-top: 24px;
}

.popup-notification-modal .popup-notification-btn-wrapper .notification-btn {
  background-color: transparent;
  border: 1px solid #1e4c88;
  font-size: 12px;
  border-radius: 3px;
  font-weight: bold;
  padding: 5px 16px;
  color: #1e4c88;
  margin: 8px 12px;
}

.popup-notification-modal .popup-notification-modal-description>ul {
  list-style-type: disc;
  text-align: left;
  display: inline-block;
}

ul { 
  list-style-type: disc; 
  list-style-position: inside; 
}
ol { 
  list-style-type: decimal; 
  list-style-position: inside; 
}
ul ul, ol ul { 
  list-style-type: circle; 
  list-style-position: inside; 
  margin-left: 15px; 
}
ol ol, ul ol { 
  list-style-type: lower-latin; 
  list-style-position: inside; 
  margin-left: 15px; 
}

@keyframes zoom-in {
  0% {
    transform: scale(0, 0);
  }
  50% {
    transform: scale(0.5, 0.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

.quiz-generator-container {
  padding: 40px;
  box-sizing: border-box;
  /* background: #fff url("../../assets/images/quiz.png") bottom center no-repeat; */
  background-size: 40%;
  position: relative;
  height: 100%;
  overflow-y: auto;
}

.quiz-generator-container .go-back-button {
  font-size: 0.8rem;
  background: none;
  cursor: pointer;
  border: none;
  font-weight: bold;
  letter-spacing: 0.03rem;
  padding: 0;
  color: #07032b;
  position: absolute;
  left: 30px;
  top: 30px;
}

.quiz-generator-container .go-back-button .back-icon {
  display: inline-block;
  margin-right: 5px;
  font-size: 0.6rem;
}

.quiz-generator-container .quiz-summary {
  text-align: center;
  margin: 20px 10px;
  border-radius: 10px;
}
.quiz-generator-container .quiz-summary:focus {
  outline: auto;
}

.quiz-generator-container .quiz-title {
  font-size: 1rem;
  letter-spacing: 0.02rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.quiz-generator-container .quiz-description {
  font-size: 0.9rem;
  font-family: 'Muli';
  letter-spacing: 0.02rem;
}

.quiz-generator-container .quiz-description-important {
  font-size: 0.8rem;
  color: #c34343;
  font-weight: bold;
}

.quiz-generator-container .quiz-navigation-bar {
  padding: 24px 0;
  text-align: center;
  display: flex;
  justify-content: flex-end;
}

.quiz-generator-container .quiz-submit-bar {
  padding: 20px 0;
  text-align: center;
}

.quiz-generator-container .quiz-questions {
  /* background: rgba(256, 256, 256, 0.9); */
  padding: 0px 10px 30px;
  border-radius: 10px;
  overflow-y: auto;
  height: 100%;
}

.quiz-generator-container .quiz-question-text {
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.quiz-generator-container .quiz-question-text p {
  margin-bottom: 5px;
}

.quiz-generator-container .inside-quiz-heading {
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.02rem;
}

.quiz-generator-container .custom-input {
  border-color: #cdd8e6;
}

.quiz-generator-container .question-container {
  padding: 24px 0;
}

.quiz-generator-container .all-in-one-question-container {
  /* border-bottom: 1px dashed #5f5d73; */
}

.quiz-generator-container .single-question-manager .question-container {
  min-height: 200px;
}

.quiz-generator-container .next-animation {
  animation: next-slide 0.3s;
}

.quiz-generator-container .previous-animation {
  animation: previous-slide 0.3s;
}

.quiz-generator-container .single-question-manager {
  /* overflow: hidden; */
  /* Updated styling for periodic table in quizzes */
  overflow: visible;
}

.quiz-navigation-button {
  background: #0923e6;
  border-radius: 10px;
  /* padding: 0.6rem 2.2rem; */
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  width: 45px;
  height: 45px;
  padding: 6px 13px 9px;
  margin-left: 8px;
}

.quiz-navigation-button-icon {
  width: 90%;
  height: auto;
}

.quiz-generator-container .quiz-submit-btn {
  border-radius: 10px;
  margin-left: 8px;
}

.quit-btn-container {
  position: absolute;
  top: 52px;
  right: 8px;
  z-index: 10;
}

.quit-btn {
  font-size: 0.7rem;
  font-weight: bold;
  color: #c34343;
  border: 1px solid #c34343;
  background-color: #f5f6fa;
  border-radius: 10px;
  padding: 10px 8px 10px 10px;
  letter-spacing: 0.03rem;
  height: 40px;
  width: 40px;
}

.quit-btn .quit-quiz-icon {
  height: 100%;
  width: auto;
}

.quiz-summary .quiz-navigation-bar {
  justify-content: space-evenly;
}

.quiz-generator-container td {
  padding: 5px 16px;
  border: 1px solid #ccc;
}

.quiz-generator-container table {
  border-collapse: collapse;
  background-color: #fff;
}

.quiz-navigation-button[disabled] {
  /* border-color: #ccc;
  color: #ccc; */
  opacity: 50%;
}

.se-image-container img {
  max-width: 100%;
}

.question-score-container {
  text-align: right;
  margin-bottom: 8px;
  font-weight: 600;
  color: #c34343;
  font-size: 0.8rem;
}

.quiz-generator-container .quiz-loading-gif-container {
  width: 100%;
  text-align: center;
  padding: 120px 0;
}

.quiz-generator-container .quiz-loading-gif {
  max-width: 50px;
  margin: auto;
}

.quiz-generator-container .question-number-container {
  min-width: 40px;
  font-weight: bold;
}

.quiz-generator-container .quiz-question-text ul {
  list-style-type: disc !important;
  margin-left: 25px;
  margin-bottom: 5px;
}

.quiz-generator-container .quiz-question-text ol {
  list-style: auto;
  margin-left: 25px;
  margin-bottom: 5px;
}

.quiz-generator-container .quiz-question-text.isStrong strong,
.quiz-generator-container
  .all-in-one-question-container
  .quiz-question-text.isStrong
  strong {
  font-weight: 700 !important;
}

.quiz-generator-container .quiz-question-text.isStrong p,
.quiz-generator-container
  .all-in-one-question-container
  .quiz-question-text.isStrong
  p {
  font-weight: 400 !important;
}

@keyframes next-slide {
  0% {
    transform: translateX(-100px);
    opacity: 0.6;
  }
  20% {
    transform: translateX(-400px);
    opacity: 0.3;
  }
  40% {
    transform: translateX(-600px);
    opacity: 0;
  }
  60% {
    transform: translateX(600px);
    opacity: 0.3;
  }
  80% {
    transform: translateX(300px);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes previous-slide {
  0% {
    transform: translateX(100px);
    opacity: 0.6;
  }
  20% {
    transform: translateX(300px);
    opacity: 0.3;
  }
  40% {
    transform: translateX(600px);
    opacity: 0;
  }
  60% {
    transform: translateX(-600px);
    opacity: 0.3;
  }
  80% {
    transform: translateX(-300px);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.rating-range {
  margin: 8px 0;
  display: flex;
}

.rating-item {
  width: 45px;
  height: 45px;
  border-radius: 3px;
  margin-right: 8px;
  padding: 5px 0 3px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.rating-item:hover {
  background-color: #eceff7;
}

.rating-item-active-1 {
  border: 1px solid #e53835;
  background-color: #e5383538;
}

.rating-item-active-1:hover {
  background-color: #e5383538;
}

.rating-item-active-2 {
  border: 1px solid #ee6b00;
  background-color: #ee6b003d;
}

.rating-item-active-2:hover {
  background-color: #ee6b003d;
}

.rating-item-active-3 {
  border: 1px solid #fdc00b;
  background-color: #fdc00b38;
}

.rating-item-active-3:hover {
  background-color: #fdc00b38;
}

.rating-item-active-4 {
  border: 1px solid #ccda39;
  background-color: #ccda3942;
}

.rating-item-active-4:hover {
  background-color: #ccda3942;
}

.rating-item-active-5 {
  border: 1px solid #8ac248;
  background-color: #8ac24836;
}

.rating-item-active-5:hover {
  background-color: #8ac24836;
}

.rating-item-img {
  width: 100%;
}

.agent-select-container {
  height: 100vh;
  padding: 40px;
  /* background-color: #eceff7; */
}

.agent-select-heading {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 40px 0 32px;
  text-align: center;
}

.agent-options {
  text-align: center;
}

.agent-option-item {
  min-width: 180px;
  padding: 32px 32px 24px;
  display: inline-block;
  /* border: 1px solid #eceff7; */
  border-radius: 5px;
  margin: 24px;
  min-height: 130px;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 5px 5px 25px rgba(215, 214, 230, 0.5);
  vertical-align: top;
  background-color: #fff;
  text-align: left;
}

.agent-option-btn {
  display: block;
  /* background-color: #fff; */
  color: #f9b234;
  margin-top: 32px;
  border: none;
  border-radius: 30px;
  padding: 5px 20px 6px;
  font-weight: bold;
  font-size: 0.8rem;
  border: 1px solid #f9b234;

  background: linear-gradient(to right, #f9b234 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.2s ease-out;
}

.agent-option-btn-active {
  background-position: left bottom;
  color: #fff;
}

.agent-description {
  font-weight: normal;
}

.agent-option-item:hover .agent-option-btn {
  /* background-color: #f9b234; */
  color: #fff;
  background-position: left bottom;
}

.agent-option-item:hover {
  box-shadow: 5px 5px 45px rgba(215, 214, 230, 0.7);
}

.agent-option-item-active {
  border: 1px solid #f9b234;
}

.agent-option-btn-disabled {
  background: #eceff7;
  border: 1px solid #eceff7;
  color: #aaa;
}

.agent-option-item-disabled {
  border: 1px solid #eceff7;
}


.accordion-ag .card-header {
  > button {
    opacity: 0;
    transition: opacity .35s ease;
    font-weight: 600;
    color: #0923E6;
  }
}

.accordion-ag .card-header:hover, .card-header:active  {
  > button {
      opacity: 1;
  }
}

.accordion-ag .card-header:after {
  display: none !important;
}

.accordion-ag .btn.focus, .accordion-ag.btn:focus {
  box-shadow: none !important;
  
}
.no-data-screen-container {
  max-width: 600px;
  margin: 50px auto;
}

.no-data-screen-img-wrapper {
  opacity: 0.6;
}

.no-data-screen-container .no-data-screen-img {
  width: 100%;
}

.no-data-screen-container .no-data-screen-text {
  margin: 32px 0;
  text-align: center;
  font-size: 0.9rem;
  color: #5f5d73;
  font-weight: 500;
}

.notification-checkbox-container .custom-checkbox {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  margin: 0 16px 0 0;
  cursor: pointer;
  vertical-align: sub;
}

.notification-checkbox-container .custom-checkbox:after {
  content: "";
  font-family: "icomoon";
  background-color: #e5e5e0;
  height: 15px;
  width: 15px;
  display: inline-block;
  border-radius: 50%;
  font-size: 16px;
  margin-left: 8px;
}

.notification-checkbox-container .custom-checkbox:checked:after {
  content: "";
  font-family: "icomoon";
  background-color: #1e4c88;
  color: var(--secondary-color);
  font-size: 16px;
}

.notification-checkbox-container .checkbox-label {
  font-size: 0.9rem;
}

.notification-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  position: relative;
  border-bottom: 1px solid #eceff7;
  padding: 16px 32px;
}

.notification-container:hover,
.notification-time:hover {
  /* opacity: 0.6; */
}

.notification-read {
  background-color: #ffffff;
}

.notification-unread {
  background-color: #f9fafd;
}

.notification-container .notification-content-header {
  justify-content: space-between;
}
.notification-container .notification-content-container {
  margin-left: 20px;
  flex: 1 1;
}

.notification-container .notification-icon-container {
  padding-top: 2px;
}
.notification-container .checkbox-container .custom-checkbox {
  width: 13px;
  height: 13px;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid #cacece;
  padding: 0px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  content: normal;
  content: initial;
  vertical-align: baseline;
  margin-top: 4px;
  margin-left: 10px;
  margin-bottom: 2px;
}

.notification-container .checkbox-container .custom-checkbox:after {
  content: normal;
  content: initial;
}

.notification-container .checkbox-container .custom-checkbox:checked:after {
  /* content: ""; */
  width: 0px;
  height: 0px;
  /* top: -1px;
  left: -10px;
  border: 1px solid #f9b234;
  background: #f9b234;
  border-radius: 10px;
  display: inline-block; */
}

.notification-container .checkbox-container .custom-checkbox:checked {
  background-color: #f9b234;
  border: 1px solid #f9b234;
}

.notification-container .option-delete-btn {
  margin-left: 10px;
  border: none;
  font-size: 0.75rem;
  z-index: 100;
  background: transparent;
  cursor: pointer;
}

.notification-container .notification-title {
  display: flex;
  height: auto;
  font-weight: 600;
  font-size: 14px;
}

.notification-container .notification-content {
  /* display: flex; */
  margin: 3px 0px;
  word-wrap: break-word;
  font-weight: 600;
  font-size: 9px;
}

.notification-container .notification-view-more {
  /* display: flex; */
  background: transparent;
  border: none;
  /* word-wrap: break-word; */
  font-weight: 800;
  font-size: 9px;
  cursor: pointer;
}

.notification-container .notification-time {
  font-weight: 600;
  font-size: 7px;
  text-align: right;
}

.notification-container .notification-btn-wrapper {
  margin-top: 12px;
}

.notification-container .notification-btn {
  background-color: transparent;
  border: 1px solid #1e4c88;
  font-size: 10px;
  border-radius: 3px;
  font-weight: bold;
  padding: 3px 10px;
  color: #1e4c88;
  margin: 4px 12px 4px 0;
}

.notification-content .content-format ul {
  list-style-type: disc !important;
  margin-left: 12px;
}

.notification-content .content-format ol {
  list-style: auto;
  margin-left: 10px;
}

.suggestion-button {
  border: none;
  background: #c5d2e3;
  background: var(--button-color);
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
  font-family: "Muli";
  font-size: 0.8rem;
  padding: 10px 16px;
  color: #07032b;
  color: var(--button-text-color);
  margin-left: 15px;
  margin-bottom: 15px;
  letter-spacing: 0.03rem;
  font-weight: bold;
}

.suggestion-button:focus {
  outline: none;
}

.chat-feedback-container {
  /* display: flex; */
  /* box-shadow: 0 -2px 6px rgba(92, 92, 92, 0.08); */
  float: right;
  position: absolute;
  right: 0px;
  bottom: 85px;
  width: 350px;
  height: 250px;
  padding: 12px 32px 24px;
  justify-content: space-between;
  /* border-top: 1px solid #efefef; */
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #c6cbd6;
  overflow: hidden;
  margin: 16px;
  z-index: 200;
}

.chat-feedback-container .avatar-container {
  height: 32px;
  width: 32px;
  border-radius: 50%;
}

.chat-feedback-container .avatar-container img {
  width: 100%;
}

.chat-feedback-container .input-container {
  flex: 1 1;
}
.chat-feedback-container .mt-20 {
  margin-top: 20px;
}

.chat-feedback-container .icon-close {
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  font-size: 0.8rem;
}

.chat-feedback-container .input-container .input {
  width: 100%;
  box-sizing: border-box;
  font-family: "Muli";
  font-size: 0.9rem;
  color: #07032b;
  border: none;
  height: 31px;
  background-color: #eceff5;
  padding: 24px 24px 26px;
  border-radius: 35px;
  /* border-bottom: 1px solid #eee; */
}

.chat-feedback-container .input-container .input:focus {
  outline: none;
}

.chat-feedback-container .action-container .send-button,
.chat-feedback-container .action-container .end-session-button {
  border: none;
  background: #f9b234;
  background: var(--primary-color);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  color: #fff;
  color: var(--primary-text-color);
  box-shadow: 0 0 16px rgba(215, 214, 230, 0.8);
  padding: 5px;
  border-radius: 50%;
  height: 48px;
  width: 48px;
  position: relative;
  margin-left: 12px;
}

.chat-feedback-container .textinput-container {
  margin-top: 11px;
}

.chat-feedback-container .custom-button {
  margin-top: 2.1rem;
}
.chat-feedback-container .action-container .end-session-button {
  background: #ff372f;
}

.chat-feedback-container .action-container .send-button .icon-send {
  position: absolute;
  left: 17px;
  top: 14px;
}

.chat-feedback-container .action-container .send-button .icon-send::before {
  color: #fff;
  color: var(--primary-text-color);
  display: inline-block;
  transform: rotate(-45deg);
}

.chat-feedback-container .action-container .send-button:focus {
  outline: none;
}

.chat-feedback-container .action-container {
  padding-top: 5px;
}

.chat-feedback-container .action-container .end-session-button-icon {
  height: 13px;
  width: 13px;
  border-radius: 1px;
  background: #fff;
  position: absolute;
  left: 17px;
  top: 17px;
}

/* media queries */

@media screen and (max-width: 768px) {
  .chat-feedback-container {
    padding: 12px 16px 24px;
  }
}

.content-preview-file-content {
  background-color: white;
  padding: 8px 16px;
  border-radius: 0 0 0 0;
}

.content-preview-file-content pre {
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

.option-question-container .range-field-wrapper .textinput-container {
  max-width: 80px;
  margin-left: 16px;
}

.option-question-container .range-field-wrapper .range-slider__wrap {
  flex: 1 1;
}

.option-question-container .back-button-wrapper {
  display: flex;
  line-height: 30px;
  margin-bottom: 1rem;
}

.option-question-container .header-back-btn {
  /* background: rgba(255, 168, 114, 0.6); */
  height: 30px;
  width: 30px;
  border-radius: 8px;
  border: none;
  font-size: 0.7rem;
  cursor: pointer;
  margin-right: 16px;
}

.option-question-container .preview-button-up {
  background-color: #edeff7;
  border-radius: 5px 0 0 0;
  border: none;
  padding: 6px 30px;
  letter-spacing: 0.03rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.option-question-container .preview-button-down {
  background-color: #edeff7;
  border-radius: 0 0 0 5px;
  border: none;
  padding: 6px 30px;
  letter-spacing: 0.03rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.option-question-container .preview-button-wrapper {
  background-color: #f8fafe;
  border-radius: 5px 5px 0 5px;
}

.option-question-container .preview-button-wrapper-down {
  background-color: #f8fafe;
  border-radius: 5px 0 5px 5px;
}

.option-question-container .content-preview-wrapper {
  border: none;
}

.is-hidden-tablet .document-preview-wrapper,
.widget .document-preview-wrapper {
  position: fixed;
  z-index: 9999999999;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  padding: 0;
}

.is-hidden-tablet .option-question-container,
.widget .option-question-container {
  width: 90%;
  height: 100%;
  background: #f0f4ff;
  padding: 40px 20px 10px;
}

.content-preview-wrapper .close {
  cursor: pointer;
}

.content-preview-wrapper .doc-title {
  color: #0e0748;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  padding: 16px 18px;
  border-radius: 2px;
}

.doc-title.active {
  background-color: #0923e6;
  color: white;
}

.reference-preview {
  background-color: white;
  height: 340px;
  overflow-y: scroll;
  border-radius: 2px;
  padding: 6px 12px;
}

.reference-preview-container {
  position: relative;
}

.reference-preview-container > .preview-loader {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  background-color: #eceff7;
}

.reference-preview::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 1px;
}

.doc-title .doc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-header-heading {
  color: #0923e6;
}

.document-preview-wrapper .page-subheading {
  font-weight: bold;
  font-size: 1rem;
}

.textinput-container textarea {
  resize: none;
}
.document-preview-wrapper .back-button-wrapper {
  cursor: pointer;
}

.additional-reference {
  display: flex;
  justify-content: space-between;
}

.popover {
  color: #0e0748;
  font-size: 14px;
  border: 0;
  line-height: normal;
  background-color: #ffe6f1;
  padding: 10px;
}

.view-btn {
  cursor: pointer;
  color: #0923e6;
}

.hover-text {
  position: relative;
  display: inline-block;
}

.custom-scrollbar.sidebar-scroll-content {
  height: calc(100% - 90px);
  overflow-y: auto;
}

@media screen and (max-width: 768px) {
  .doc-title .doc-name {
    max-width: 500px;
  }

  .sidebar-scroll-content {
    height: calc(100% - 90px);
    overflow-y: auto;
  }
}

.reference-preview .text-highlight {
  background-color: rgba(255, 255, 0, 0.4);
}

.all-bookmarks-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 40px;
  overflow-y: auto;
}
.all-bookmarks-container::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 1px;
}

.all-bookmarks-container::-webkit-scrollbar-track {
  background-color: transparent;
  width: 1px;
}
.all-bookmarks-container .all-bookmarks-decor-img {
  position: absolute;
  right: -16px;
  bottom: -16px;
  height: 60px;
  opacity: 0.3;
}

.all-bookmarks-container .all-bookmarks-decor-img img {
  height: 100%;
  width: auto;
}

.all-bookmarks-container .all-bookmarks-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  /* position: sticky; */
  top: 0;
  /* background: #fff; */
  /* padding: 8px 0; */
}
.all-bookmarks-header .custom-icon-label-button{
  padding: 0;
  font-size: 0.875rem;
}
.all-bookmarks-container .all-bookmarks-header .left-partition {
  display: flex;
  line-height: 30px;
}

.all-bookmarks-container .all-bookmarks-header .right-partition {
  padding-top: 4px;
}

.all-bookmarks-container .all-bookmarks-header .header-heading {
  font-size:1rem;
  font-weight: bold;
}

.all-bookmarks-container .header-back-btn {
  background: rgba(255, 168, 114, 0.6);
  height: 30px;
  width: 30px;
  border-radius: 8px;
  border: none;
  font-size: 0.7rem;
  cursor: pointer;
  margin-right: 16px;
}

.all-bookmarks-container .header-back-btn .icon-left-chevron::before {
  color: #cc4f00;
}

.all-bookmarks-container .bookmark-item {
  /* border-bottom: 1px solid #eceff7; */
  padding:9px 0;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  /* cursor: pointer; */
}

.all-bookmarks-container .bookmark-item:hover {
  /* background: #eceff7; */
}

.all-bookmarks-container .bookmark-item-icon {
  font-size: 0.8rem;
  margin-right: 16px;
  margin-top: auto;
  margin-bottom: auto;
}

.all-bookmarks-container .bookmark-item .left-partition {
  display: flex;
}

.all-bookmarks-container .bookmark-item-duration {
  font-size: 0.75rem;
  color: #4B5065;
}

@media screen and (max-width: 768px) {
  .all-bookmarks-container{
    padding: 1.125rem 1rem;
  }
  .all-bookmarks-container .all-bookmarks-header{
    margin-bottom: 1rem;
  }
  .chat-feature-panel-body{
    padding-left: 0;
    padding-right: 0;
  }
  .all-bookmarks-container .bookmark-item{
    padding: 6px 0;
  }
}
.rdrDay .rdrStartEdge,.rdrDay .rdrEndEdge,.rdrDay .rdrInRange{background-color:rgba(253,25,158,.2)}.rdrDay.rdrDayToday .rdrStartEdge.rdrEndEdge,.rdrDay.rdrDayToday .rdrSelected{background-color:rgba(253,25,158,.2)}.rdrDay.rdrDayToday .rdrDayNumber span{color:#fd199e !important}.rdrDay .rdrDayInPreview,.rdrDay .rdrDayStartPreview,.rdrDay .rdrDayEndPreview{border-color:#fd199e !important}.rdrDay.rdrDayHovered .rdrDayNumber:after{border-color:#fd199e !important}.rdrDay .rdrDayNumber span{color:#0e0748 !important}.rdrDay .rdrDayNumber span:after{height:0}.rdrMonthAndYearWrapper .rdrNextPrevButton i{transform:rotate(45deg);width:7px !important;height:7px !important;border-color:#808495}.rdrMonthAndYearWrapper .rdrNextPrevButton.rdrPprevButton i{border-width:0 0 2px 2px}.rdrMonthAndYearWrapper .rdrNextPrevButton.rdrNextButton i{border-width:2px 2px 0px 0px}.rdrStaticRanges .rdrStaticRangeSelected{color:#fd199e !important}
.chat-page-wrapper {
  background: #fff;
  flex-grow: 1;
  height: 100%;
  padding-bottom: 0;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.chat-page-container {
  height: calc(100% - 71px);
  padding-bottom: 0;
  display: flex;
}

.chat-sidebar {
  position: relative;
  display: flex;
  flex-flow: column;
  height: calc(100% - 24px);
  overflow-y: auto;
  background-color: #f5f6fa;
  /* border-right: 1px solid #c6cbd6; */
  overflow: hidden;
  transition: width 0.05s ease-in-out;
  /* box-shadow: 2px 0 12px rgba(215, 214, 230, 0.5); */
  z-index: 12;
  margin: 0px 24px 40px 40px;
  border-radius: 16px;
  width: calc(35% - 80px);
  box-shadow: 0px 4px 4px 0px #b9b6e0;
}

.chat-sidebar-collapsed {
  width: 35px;
  position: relative;
  display: flex;
  flex-flow: column;
  height: calc(100% - 40px);
  background-color: #e4e8f2;
  transition: width 0.05s ease-in-out;
  z-index: 12;
  border-radius: 40px;
  margin: 0 40px 40px;
}

.document-preview-wrapper {
  /* background: #f9fafd; */
  overflow: hidden;
  padding: 40px 20px 10px;
  /* margin-right: 20px; */
  box-sizing: border-box;
  transition: all 0.5s ease-in-out;
  /* margin-left: -20px; */
  z-index: 220;
  /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.12); */
}

.chat-wrapper {
  flex: 1 1;
  position: relative;
  background-color: #f5f6fa;
  background-size: contain;
  background-position: bottom center;
  display: flex;
  flex-flow: column;
  height: calc(100% - 24px);
  border-radius: 16px;
  transition: width 0.05s ease-in-out;
  margin: 0 40px 40px 0;
  width: calc(65% - 40px);
  box-shadow: 0px 4px 4px 0px #b9b6e0;
}

.chat-wrapper-collapsed {
  position: relative;
  background-size: contain;
  background-position: bottom center;
  display: flex;
  flex-flow: column;
  height: calc(100% - 40px);
  width: calc(100% - 150px);
  transition: width 0.05s ease-in-out;
  background-color: #f5f6fa;
  border-radius: 40px;
  margin: 0 40px 40px 0;
}

.chat-messages-outer-container {
  /* padding: 40px 60px; */
  flex: 1 1;
  /* overflow-y: auto; */
  transition: all 0.3s ease;
  max-height: calc(100% - 95px);
}

.parent-container {
  /* padding: 40px 60px; */
  padding: 2.5rem 1rem;
  /* Padding changes for mobile responsive */
  overflow-y: auto;
  height: 100%;
  scroll-behavior: smooth;
}

.custom-scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 1px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
  width: 1px;
}

.chat-footer-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  z-index: 2;
}

.chat-footer-container .chat-footer {
  background-color: #fff;
}

.chat-page-container .chat-footer .chat-input-wrapper .chat-input-container {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #eceff7;
  padding: 8px;
}

.chat-page-container .chat-input-container .input-container {
  background-color: #fff;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #8f94a3;
}

.chat-page-container .chat-input-container .input-container .input {
  background-color: #fff;
  border-radius: 8px;
  font-size: 14px;
}

input::placeholder {
  color: #6b7085 !important;
}

.powerby-nf {
  color: #0923e6;
  font-weight: 700;
  font-size: 12px;
  position: absolute;
  top: calc(100% - 25px);
  right: 40px;
  display: flex;
  margin: 5px 0;
}

.powerby-nf span {
  color: #6b7085;
  font-weight: normal;
  margin: 0 3px;
}

.powerby-nf .powerby-nf-click {
  border-color: #6b7085;
  color: #0923e6;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding-right: 5px;
  margin-right: 0;
}

.back-to-chatbot-btn {
  font-size: 18px;
  font-weight: 600;
  line-height: 23.4px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #0923e6;
}

.powerby-nf .accessibility-click {
  border-color: #6b7085;
  padding-left: 5px;
  color: #0923e6;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.accessibility-container {
  padding: 40px;
}

.accessibility-container iframe {
  margin-top: 10px;
  height: 80vh;
}

#notification-panel {
  width: 100%;
  max-width: 35em;
}

.chat-page-container .notification-panel-header .icon-close {
  font-size: 0.8rem;
}

.chat-page-container .notification-action-container {
  display: flex;
  margin-right: 8px;
}

.chat-page-container .notification-panel-header .icon-setting {
  font-size: 0.9rem;
}

.chat-page-container .notification-panel-header .icon-close::before,
.chat-page-container .notification-panel-header .icon-setting::before {
  color: #07032b;
}

.chat-page-container .panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(214, 215, 231, 0.5);
  box-sizing: content-box;
  padding-top: 55px;
  overflow: scroll;
}

#notification-panel .panel {
  padding-top: 0px;
  padding-bottom: 40px;
}

#notification-panel .send-notification-btn {
  position: fixed;
  bottom: 0;
  z-index: 100;
  background-color: #f9b234;
  color: #07032b;
  width: 100%;
  height: 40px;
  cursor: pointer;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.chat-page-container .panel .notification-count {
  background-color: #f9b234;
  background-color: var(--primary-color);
  /* margin-left: 8px; */
  font-weight: bold;
  /* position: absolute; */
  /* left: 9rem; */
  font-size: 0.7rem;
  margin-left: 8px;
  height: 18px;
  padding: 0px 5px;
  border-radius: 10px;
  color: #07032b;
  color: var(--text-color);
}

.chat-page-container .panel-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 500px;
  transform: translateX(100%);
  transition: 0.3s ease-out;
  z-index: 250;
}

.chat-page-container .open-panel-wrap {
  transform: translateX(0%);
}

.chat-page-container .notification-panel-header {
  background: white;
  padding: 19px 24px;
  box-shadow: 0 2px 10px rgba(92, 92, 92, 0.15);
  display: flex;
  justify-content: space-between;
  /* position: absolute; */
  top: 0;
  box-sizing: border-box;
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 1px solid #eceff7;
}

.chat-page-container .notification-panel-header .close-button {
  float: right;
  margin-top: 2px;
  padding: 0;
}

.chat-page-container .test-bot-panel-header .close-button,
.chat-page-container .test-bot-panel-header .refresh-button,
.chat-page-container .notification-panel-header .see-all-button,
.chat-page-container .notification-panel-header .mark-read-button,
.chat-page-container .notification-panel-header .close-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 0.7rem;
}

.chat-page-container .notification-panel-header .see-all-button {
  font-size: 0.8rem;
  letter-spacing: 0.02rem;
}

.chat-page-container .notification-panel-header .mark-read-button {
  color: #5f5d73;
  vertical-align: text-top;
}

.chat-wrapper .chat-footer .chat-footer-feedback {
  /* position: absolute; */
  /* bottom: 0; */
  /* width: 100%; */
  /* z-index: 1; */
  border-radius: 10px;
  overflow: hidden;
}

.chat-page-container .modal-heading {
  margin-bottom: 10px;
}

.chat-page-container .modal-content {
  max-width: 500px;
}

.topics-container .subtopic-header {
  position: relative;
}

.topics-container .topics-container-nav-button {
  background: none;
  border: none;
  position: absolute;
  font-family: 'Muli';
  font-size: 0.8rem;
  color: #07032b;
  font-weight: 600;
  top: -2px;
  left: 18px;
  cursor: pointer;
}

.topics-container .topics-container-nav-button:focus {
  outline: none;
}

.topics-container .topics-container-nav-icon:before {
  color: #07032b;
  font-size: 0.6rem;
  margin-right: 5px;
}

.chat-page-container .logout-button {
  position: absolute;
  right: 40px;
  top: 20px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

video {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

.not-visible,
.not-visible * {
  opacity: 0;
}

.chat-page-container .chat-floating-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #f9b234;
  background: var(--primary-color);
  box-shadow: 0 0 16px rgba(215, 214, 230, 0.8);
  border: none;
  color: #fff;
  color: var(--primary-text-color);
  cursor: pointer;
  font-size: 1.1rem;
}

.chat-page-container .chat-floating-button .icon-send::before {
  color: #fff;
  color: var(--primary-text-color);
  display: inline-block;
  transform: rotate(-45deg);
}

.chat-page-container .chat-overlay-container {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  z-index: 14;
  background-color: #f5f6fa;
  border-radius: 40px;
  overflow-y: auto;
}

.suggested-arrow-spaceholder {
  height: 10px;
}

.btn-opneai {
  background: #e4e8f2;
  color: #0923e6;
  font-size: 12px;
  border-radius: 16px 16px 0 0;
  position: absolute;
  right: 0;
  bottom: 100%;
}

.btn-opneai + .chat-footer {
  border-radius: 16px 0px 16px 16px;
}

.btn-back-to-top {
  background-color: #0923e6;
  background-color: var(--primary-color);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  position: fixed;
  bottom: 115px;
  right: 57px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.btn-back-to-top:hover {
  background-color: var(--primary-color);
  opacity: 0.8;
  transform: scale(1.05);
}

.btn-back-to-top img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.model-badge {
  background-color: #00a67e;
  color: #fff;
  font-size: 0.875rem;
  padding: 2px 16px;
  text-align: center;
  border-radius: 8px 8px 0 0;
  transform: rotate(-90deg);
  position: absolute;
  top: 131px;
  left: -11px;
  transform-origin: top left;
  white-space: nowrap;
}

/* .powered-by {
  padding: 8px 30px 14px;
  font-size: 0.75rem;
  color: #6B7085;
}
.powered-by strong{
  color: #0923E6;
  cursor: pointer;
} */

.suggested-prompts-container .heading {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #07032b;
  flex: 1 1;
  text-align: left;
  font-size: 14px;
}

.suggested-prompts-container .suggested-prompts-header {
  display: flex;
  padding: 16px 5px 8px 0px;
}

.suggested-prompts-container .content {
  display: flex;
}

.suggested-prompts-container .prompts-icon {
  padding: 16px 16px 0px 0px;
}

.suggested-prompts-container {
  padding: 0px 16px 16px;
  transition: all 0.2s ease-in-out;
  background: #e6edff;
  max-height: 180px;
  margin: 0rem 2rem 6rem;
  border: 1px solid #cdd5ef;
}

.suggested-prompts-body {
  overflow-y: auto;
  max-height: 100px;
  color: #0923e6;
  font-size: 14px;
  font-weight: 600;
}

.prompts {
  padding: 8px 0px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #0923e6;
  font-weight: 600;
  border-bottom: 1px solid #5f5e5e;
}

.wmi .prompts {
  font-size: 1.125rem;
}

.empty-prompt {
  background-color: #eceff7;
  border-radius: 8px;
  height: 18px;
  animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }

  100% {
    background-color: hsl(200, 20%, 92%);
  }
}

.suggested-prompts-header:hover .suggested-prompts-header .heading {
  color: #f9b234;
  color: var(--primary-color);
}

.suggested-prompts-container {
  /* box-shadow: 0 -2px 10px rgba(92, 92, 92, 0.12); */
  /* padding: 0px 32px 0px; */
  transition: all 0.1s ease-in-out;
  position: relative;
  border-radius: 8px;
}

.chat-page-container .widget-panel-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 500px;
  transform: translateX(-100%);
  transition: 0.3s ease-out;
  z-index: 250;
}

.chat-page-container .widget-panel-wrap .notification-panel-header {
}

.suggested-prompts-tooltip .tooltip-inner {
  background-color: #ffe6f1;
  border-radius: 4px;
  color: #ff009e;
  font-size: 16px;
  text-align: right;
  max-width: 250px;
}

.suggested-prompts-tooltip .arrow::before {
  border-top-color: #ffe6f1;
}

.suggested-prompts-tooltip .tooltip-inner span {
  display: block;
  text-align: left;
}

.suggested-prompts-tooltip .btn {
  background-color: #0923e6;
  border: 0;
  font-size: 14px;
  padding: 2px 8px;
  margin: 4px 0;
}

.chat-page-container
  .notification-panel-header
  .notification-panel-header-actions {
  display: flex;
}

.chat-page-container
  .notification-panel-header
  .notification-panel-header-actions
  .notification-action-container
  .mark-read-button {
  padding-left: 8px;
}

/* media queries */

@media screen and (max-width: 768px) {
  .chat-wrapper {
    width: 100%;
    margin: 0 !important;
    height: 100%;
    background-color: #f0f4ff;
  }

  .chat-sidebar {
    width: 100%;
    padding: 8px;
    height: 100%;
    margin: 0;
    border-radius: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    bottom: 0;
    max-width: 300px;
    background-color: #f0f4ff;
  }

  .sidebar-overlay {
    position: fixed;
    content: '';
    width: calc(100% - 300px);
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
    top: 0;
    right: 0;
  }

  .suggested-prompts-container {
    margin: 0rem 1rem 6rem;
  }

  .chat-footer {
    margin: 8px;
  }

  .chat-page-container {
    margin: 0.5rem 1.25rem 1rem;
    height: calc(100% - 86px);
    padding-top: 0;
  }

  .chat-sidebar .chat-feature-panel-wrapper {
    padding: 0;
  }

  .parent-container,
  .chat-footer-container {
    padding: 1rem 0.85rem;
  }

  .btn-back-to-top {
    bottom: 105px;
    right: 35px;
  }

  /* .powered-by {
    padding: 8px 16px;
  } */
}

.parent-container.custom-scrollbar {
  margin-bottom: 70px;
}

.parent-container.custom-scrollbar.listen-sse {
  padding-bottom: calc(100vh - 337px);
  max-height: calc(100% - 70px);
}

/* .sidebar-menu .sidebar-menu-btn:after {
  content: none !important;
} */

.clamp-5-lines {
  display: -webkit-box;
  /* Required for line clamping */
  -webkit-box-orient: vertical;
  /* Required for line clamping */
  overflow: hidden;
  /* Hide overflowing text */
  text-overflow: ellipsis;
  /* Add ellipsis at the end */
  -webkit-line-clamp: 5;
  /* Number of lines to show */
}

.ws-conversation-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f8f7f8;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ws-modal-content {
  flex: 1 1;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #f8f7f8;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  padding-bottom: 60px;
}

/* Mobile styles */
@media (max-width: 768px) {
  .ws-modal-content {
    padding-bottom: 0;
    width: 100%;
  }

  .ws-avatar-controls-bar {
    height: 70px;
  }
}

.ws-conversation-modal .footer {
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .ws-conversation-modal .footer {
    margin-bottom: 70px;
  }
}

/* Remove sidebar states */
.ws-conversation-modal.sidebar-opened,
.ws-conversation-modal.sidebar-closed {
  left: 0;
  width: 100vw;
}

/* Avatar renderer container */
.ws-conversation-modal .ws-avatar-renderer {
  position: relative;
  width: 100%;
  height: calc(100vh - 10px - 100px);
  /* Increased from 120px to 100px (half of previous change) */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop Content Container - new wrapper */
.ws-conversation-modal .desktop-content-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -17px;
  width: 100%;
  height: 100%;
  z-index: 10;
  /* Above avatar & media */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* Changed from space-between to flex-end to push everything to bottom */
  padding: 20px 0 40px 0;
  /* Increased bottom padding to give more space from bottom edge */
  pointer-events: none;
  gap: 20px;
  /* Add gap between elements */
}

/* Mobile Content Container - new wrapper */
.ws-conversation-modal .mobile-content-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  z-index: 10;
  /* Above avatar & media */
  display: none;
  /* Hidden by default, shown on mobile */
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* Push everything to bottom */
  padding: 10px 0 20px 0;
  /* Reduced padding for mobile */
  pointer-events: none;
  gap: 15px;
  /* Reduced gap for mobile */
}

/* Desktop Content Container - new wrapper */
.ws-conversation-modal .desktop-content-container > * {
  pointer-events: auto;
}

/* Mobile Content Container - new wrapper */
.ws-conversation-modal .mobile-content-container > * {
  pointer-events: auto;
}

/* Avatar Buttons Container - moved from MediaBoard */
.ws-conversation-modal .avatar-buttons-container {
  /* Auto layout */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* Keep center alignment for desktop */
  padding: 0px 32px 0px;
  gap: 16px;
  isolation: isolate;

  /* Size */
  width: 100%;
  max-width: 1440px;
  height: auto;

  /* Position */
  z-index: 10;
  position: relative;
  /* Use relative positioning in flexbox container */

  /* Layout */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */

  /* Enhanced scroll behavior */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */

  /* Scroll snap for better UX */
  scroll-snap-type: x mandatory;

  /* Transition for smooth position changes */
  transition: all 0.3s ease;

  /* Add subtle gradient fade effect on edges */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

/* Hide scrollbar for webkit browsers */
.ws-conversation-modal .avatar-buttons-container::-webkit-scrollbar {
  display: none;
}

.ws-conversation-modal .avatar-btn:hover:not(:disabled) {
  background: #001de0;
  border-color: #001de0;
  color: #fefeff;
  transform: scale(1.05);
  box-shadow: 0 4px 6px rgba(0, 29, 224, 0.2);
}

.ws-conversation-modal .avatar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.5);
  color: #9ca3af;
  transform: none;
  box-shadow: none;
}

.ws-conversation-modal .avatar-nav-btn {
  /* Navigation button styling */
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Flex properties */
  flex-shrink: 0;

  /* Scroll snap support */
  scroll-snap-align: start;
}

/* Controls bar styling */
.ws-conversation-modal .ws-avatar-controls-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background-color: transparent;
  width: 100%;
  position: relative;
  /* Changed from absolute to relative for flexbox container */
  gap: 20px;
}

/* Control buttons */
.ws-conversation-modal .ws-avatar-controls-bar .close-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
  width: 56px;
  height: 56px;
  border: 1px solid #d5d5d5;
  border-radius: 24px;
  background-color: transparent;
  cursor: pointer;
}

/* .ws-conversation-modal .ws-avatar-controls-bar .mic-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100px;
  height: 100px;
  background: #f8f7f8;
  border: 1px solid #d5d5d5;
  box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.1);
  border-radius: 100%;
  cursor: pointer;
} */

/* Button icons */
/* .ws-conversation-modal .button-icon {
  width: 24px;
  height: 24px;
}

.ws-conversation-modal .mic-button .button-icon {
  width: 42px;
  height: 42px;
} */

.ws-conversation-modal .mic-button .button-icon {
  width: 42px;
  /* Adjusted to maintain ratio with 100px button */
  height: 42px;
}

.ws-conversation-modal .close-button .button-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0);
}

/* Mic button states */
.ws-conversation-modal .mic-button.active {
  background: #ffcbc8;
  border: 1px solid #eec1be;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .ws-conversation-modal {
    width: 100vw;
  }

  .ws-conversation-modal .ws-avatar-renderer {
    height: calc(100dvh - 17px - 85px);
    /* Increased from 100px to 85px (half of previous change) */
    /* Further increased height after removing header */
  }

  .ws-conversation-modal .avatar-buttons-container {
    max-width: 98%;
    gap: 8px;
    padding: 0px 12px 8px;
    /* Enhanced scroll behavior for mobile */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    position: relative;
    /* Changed to relative for mobile content container */

    /* Adjust gradient fade for mobile */
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
  }

  .ws-conversation-modal .ws-avatar-controls-bar {
    position: relative;
    /* Changed to relative for mobile content container */
  }

  /* legacy avatar-btn removed
.ws-conversation-modal .avatar-btn {
    font-size: 11px;
    padding: 8px 12px;
    min-width: 80px;
    /* Scale down for mobile */
  /* transform: scale(0.9);
  } */

  .ws-conversation-modal .avatar-nav-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
    /* Scale down for mobile */
    transform: scale(0.9);
  }
}

/* Tablet view */
@media (min-width: 768px) and (max-width: 1024px) {
  .ws-conversation-modal .desktop-content-container {
    padding: 15px 0 30px 0;
    /* Reduced padding for tablet but keep bottom spacing */
    gap: 15px;
    /* Reduced gap for tablet */
  }

  .ws-conversation-modal .avatar-buttons-container {
    max-width: 96%;
    gap: 14px;
    padding: 0px 24px 14px;
    position: relative;
    /* Use relative positioning in desktop container */

    /* Enhanced scroll behavior for tablet */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    /* Adjust gradient fade for tablet */
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    );
  }

  /* legacy avatar-btn removed
.ws-conversation-modal .avatar-btn {
    font-size: 12px;
    padding: 10px 18px;
    min-width: 100px;
    transform: scale(0.95);
  }

  .ws-conversation-modal .avatar-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
    transform: scale(0.95);
  }
}

/* Extra small mobile devices (iPhone SE, etc.) */
  @media (max-width: 375px) {
    .ws-conversation-modal .avatar-buttons-container {
      max-width: 100%;
      gap: 6px;
      padding: 0px 8px 6px;
      /* Enhanced swipe experience for small screens */
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      position: relative;
      /* Changed to relative for mobile content container */

      /* Adjust gradient fade for small screens */
      mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 3%,
        black 97%,
        transparent 100%
      );
      -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 3%,
        black 97%,
        transparent 100%
      );
    }

    .ws-conversation-modal .ws-avatar-controls-bar {
      position: relative;
      /* Changed to relative for mobile content container */
    }

    /* legacy avatar-btn removed
.ws-conversation-modal .avatar-btn {
    font-size: 10px;
    padding: 6px 10px;
    min-width: 70px;
    /* Scale down more for small screens */
    /* transform: scale(0.85); */
    /* Snap to grid for better swipe */
    /* scroll-snap-align: start; */
  }

  .ws-conversation-modal .avatar-nav-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
    /* Scale down more for small screens */
    transform: scale(0.85);
    /* Snap to grid for better swipe */
    scroll-snap-align: start;
  }
}

.ws-conversation-modal .ws-avatar-controls-bar .mic-button {
  padding: 16px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
}

.ws-conversation-modal .mic-button .button-icon {
  width: 36px;
  height: 36px;
}

@media (max-height: 600px) {
  .ws-conversation-modal .ws-avatar-renderer {
    height: calc(100% - 80px);
    /* Increased from 90px to 80px (half of previous change) */
    /* Further reduced space for shorter screens */
  }

  .mobile-media-container {
    height: calc(100% - 80px);
    /* Match short screen ws-avatar-renderer height */
  }

  .ws-conversation-modal .desktop-content-container {
    padding: 10px 0 20px 0;
    /* Reduced padding for short screens but keep bottom spacing */
    gap: 10px;
    /* Reduced gap for short screens */
  }

  .ws-conversation-modal .mobile-content-container {
    padding: 8px 0 15px 0;
    /* Reduced padding for short screens but keep bottom spacing */
    gap: 8px;
    /* Reduced gap for short screens */
  }

  .ws-conversation-modal .ws-avatar-controls-bar {
    padding: 8px 0;
    height: 90px;
    /* Further reduced height for shorter screens */
  }

  .ws-conversation-modal .ws-avatar-controls-bar .mic-button {
    padding: 12px;
    width: 70px;
    height: 70px;
    border-radius: 100%;
  }

  .ws-conversation-modal .mic-button .button-icon {
    width: 32px;
    height: 32px;
  }
}

@media (min-width: 1200px) {
  .ws-modal-content {
    min-width: 100%;
    margin: 0;
    width: 100%;
    max-width: 100%;
    background-color: #ffffff;
  }
}

@media (min-width: 1440px) {
  .ws-modal-content {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    margin: 0;
    background-color: #ffffff;
  }
}

/* SoundWave positioned between canvas and control bar */
.ws-conversation-modal .modal-soundwave-overlay {
  position: absolute;
  z-index: 8;
  /* Below media (9) and controls (10) */
  pointer-events: none;

  /* Dynamic centering between canvas and control bar */
  left: 50%;
  /* Control bar takes ~160px (112px button + 48px padding), 
     so soundwave should be at 50% of remaining space above controls */
  bottom: calc(160px + (100vh - 57px - 160px) * 0.25);
  /* 25% up from controls */
  transform: translateX(-50%);

  /* Simple responsive scaling */
  scale: clamp(0.6, 1.5vw, 1.2);

  /* Smooth appearance animation */
  animation:
    modal-soundwave-appear 0.4s ease-out forwards,
    modal-soundwave-float 3s ease-in-out infinite 0.4s;
}

/* Simple animations */
@keyframes modal-soundwave-appear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes modal-soundwave-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0px);
  }

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

/* Simple responsive adjustments */
@media (max-width: 768px) {
  .ws-conversation-modal .modal-soundwave-overlay {
    bottom: calc(160px + (100vh - 57px - 160px) * 0.2);
    /* Closer to controls on mobile */
    scale: clamp(0.5, 2vw, 1);
  }
}

@media (max-height: 600px) {
  .ws-conversation-modal .modal-soundwave-overlay {
    bottom: calc(140px + (100vh - 57px - 140px) * 0.3);
    /* Adjust for short screens */
    scale: clamp(0.4, 1.8vw, 0.8);
  }
}

@media (min-width: 1200px) {
  .ws-conversation-modal .modal-soundwave-overlay {
    bottom: calc(160px + (100vh - 57px - 160px) * 0.3);
    /* Higher position on desktop */
    scale: clamp(0.8, 1.2vw, 1.4);
  }
}

@media (min-width: 1440px) {
  .ws-conversation-modal .modal-soundwave-overlay {
    bottom: calc(160px + (100vh - 57px - 160px) * 0.35);
    /* Even higher on XL screens */
    scale: clamp(1, 1vw, 1.6);
  }
}

/* Footer styling */
.ws-conversation-modal .powerby-nf span {
  color: #6b7085;
  font-weight: normal;
  margin: 0 3px;
}

.ws-conversation-modal .powerby-nf .powerby-nf-click {
  color: #0923e6;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.ws-conversation-modal .powerby-nf .accessibility-click {
  border-left: 1px solid #6b7085;
  padding-left: 5px;
  color: #0923e6;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.ws-conversation-modal .accessibility-container {
  padding: 40px;
}

.ws-conversation-modal .accessibility-container iframe {
  margin-top: 10px;
  height: 80vh;
}

.ws-conversation-modal .accessibility-container p {
  margin-bottom: 16px;
  color: #323033;
}

.ws-conversation-modal .accessibility-container ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 16px;
}

.ws-conversation-modal .accessibility-container li {
  color: #323033;
  margin-bottom: 8px;
}

.ws-avatar-nav {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #888;
  font-size: 32px;
  color: #222;
  cursor: pointer;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition:
    background 0.15s,
    border 0.15s;
}

.ws-avatar-nav:hover {
  background: #f3f4f6cc;
  border-color: #333;
}

.ws-avatar-nav[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.ws-avatar-nav.prev {
  order: 0;
  margin-left: 0;
  margin-right: 24px;
}

.ws-avatar-nav.next {
  order: 2;
  margin-right: 0;
  margin-left: 24px;
}

.transcript-toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 60px;
  z-index: 12;

  padding: 8px 16px;
  border-radius: 8px;

  background: #000000;
  color: #f8f7f8;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);

  font-family: 'Mulish', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.01em;

  pointer-events: none;
  opacity: 1;
  transition: all 0.3s ease;

  width: auto;
}

/* Khi có cả transcription và buttons, đẩy transcription lên trên */
.transcript-toast.transcript-with-buttons {
  bottom: 120px;
}

.transcript-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 80vw;
}

.transcript-stack .text {
  white-space: nowrap;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: white;
  text-shadow: 1px 1px 2px black;
  background: rgba(0, 0, 0, 0.8);
  padding: 4px 12px;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

@media (max-width: 640px) {
  .transcript-toast {
    bottom: 40px;
    max-width: 90vw;
  }

  .transcript-toast.transcript-with-buttons {
    bottom: 100px;
  }

  .transcript-stack .text {
    font-size: 13px;
    line-height: 18px;
  }
}

.mobile-media-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100dvh - 10px - 100px);
  background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 50%, #f0f0f0 100%);
  /* White gradient */
  z-index: 9;
  /* Above ws-avatar-renderer (default) and soundwave (12 below), but below content containers (10) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-media-content {
  max-width: 90%;
  max-height: 80%;
  overflow: auto;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Mobile navigation styles moved to NavigationButtons.css */

/* Removed mobile-mixed-content and related styles as they're no longer needed */

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .mobile-media-container {
    height: calc(100dvh - 17px - 85px);
    /* Match mobile ws-avatar-renderer height */
  }

  .mobile-media-content {
    max-width: 95%;
    max-height: 85%;
    padding: 20px;
  }

  /* Mobile navigation button styles moved to NavigationButtons.css */

  .ws-conversation-modal .mobile-content-container {
    padding: 8px 0 15px 0;
    gap: 12px;
  }

  .ws-conversation-modal .mobile-content-container .avatar-buttons-container {
    flex-shrink: 0;
    max-height: 25%;
  }

  .ws-conversation-modal .mobile-content-container .transcription-container {
    flex: 0 0 20%;
    /* Reserve 30% height between buttons and controls */
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.6);
    /* White background with opacity */
    -webkit-backdrop-filter: blur(9%);
            backdrop-filter: blur(9%);
    /* Add blur effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    transition: all 0.3s ease-in-out;
    /* Smooth transitions */
  }

  .ws-conversation-modal .mobile-content-container .ws-avatar-controls-bar {
    flex-shrink: 0;
    /* Don't shrink controls */
    max-height: 25%;
  }
}

@media (max-width: 480px) {
  .mobile-media-content {
    max-width: 98%;
    max-height: 90%;
  }
}

/* Responsive adjustments for desktop content container */
@media (max-width: 1024px) {
  .ws-conversation-modal .desktop-content-container {
    padding: 15px 0 25px 0;
    /* Reduced padding for smaller screens but keep bottom spacing */
    gap: 15px;
    /* Reduced gap for smaller screens */
  }

  .ws-conversation-modal .mobile-content-container {
    padding: 12px 0 20px 0;
    /* Reduced padding for smaller screens but keep bottom spacing */
    gap: 12px;
    /* Reduced gap for smaller screens */
  }
}

/* Use aspect ratio instead of fixed width to match JavaScript logic (screenRatio < 1.2) */
@media (max-width: 768px), (max-aspect-ratio: 1.2/1) {
  .ws-conversation-modal .desktop-content-container {
    display: none;
    /* Hide on mobile since we have separate mobile layout */
  }

  .ws-conversation-modal .mobile-content-container {
    display: flex;
    /* Show on mobile */
  }

  /* Ensure transcription occupies a fixed region and scrolls within */
  .ws-conversation-modal .mobile-content-container .transcription-container {
    flex: 0 0 20%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Make inner flex wrapper grow and allow child to size */
  .ws-conversation-modal
    .mobile-content-container
    .transcription-container
    .flex-1.flex.flex-col {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* The actual scrollable area takes full height of container */
  .ws-conversation-modal
    .mobile-content-container
    .transcription-container
    .mobile-transcription-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

.ws-avatar-renderer {
  position: relative;
  width: 100vw;
  height: calc(100vh - 57px - 120px);
  margin: 0 auto;
  overflow: hidden;
  background-color: #f8f7f8;
  /* base avatar size for layout math */
  --avatar-size: min(220px, 40vw);
}

.ws-avatar-renderer canvas {
  width: 100vw !important;
  height: 100% !important;
  object-fit: contain;
}

/* Stack wrapper (optional) */
.ws-avatar-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Static avatar image when 3D avatar is disabled */
.ws-avatar-static {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    left 0.5s ease-in-out,
    transform 0.5s ease-in-out;
}

/* Move static avatar left when media board is shown (desktop only) */
@media (min-aspect-ratio: 1.2/1) {
  .ws-avatar-static.has-media-board {
    left: 25%;
    /* Move left to make room for media board */
    transform: translate(-50%, -50%);
  }
}

.ws-avatar-static img {
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: #fff;
  max-width: 500px;
}

/* Soundwave positioned right below the avatar */
.ws-avatar-soundwave {
  position: absolute;
  top: calc(50% + (var(--avatar-size) / 2) + 12px);
  left: 45%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  /* smaller wave */
  scale: 0.65;
  animation:
    ws-avatar-soundwave-appear 0.4s ease-out forwards,
    ws-avatar-soundwave-float 3s ease-in-out infinite 0.4s;
}

@keyframes ws-avatar-soundwave-appear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes ws-avatar-soundwave-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0px);
  }

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .ws-avatar-renderer {
    --avatar-size: min(180px, 50vw);
  }

  .ws-avatar-soundwave {
    scale: 0.55;
  }
}

@media (max-height: 600px) {
  .ws-avatar-renderer {
    --avatar-size: min(160px, 38vw);
  }

  .ws-avatar-soundwave {
    scale: 0.5;
  }
}

@media (min-width: 1200px) {
  .ws-avatar-soundwave {
    scale: 0.7;
  }
}

@media (min-width: 1440px) {
  .ws-avatar-soundwave {
  }
}

:root {
  --accent: #ff7a1a;
  --accent-dark: #8b4513;
  --surface: rgba(255, 255, 255, 0.9);
  --on-surface: #1f2937;
  --line: #6b7280;
  --elev: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.media-board-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Removed media-board-container - functionality moved to media-board-wrapper */

.media-board {
  position: relative;
  width: 600px;
  height: 450px;
  min-width: 400px;
  min-height: 300px;
  max-width: 90%;
  max-height: 90%;
  background: #ffffff;
  border: 15px solid #000000;
  border-radius: 20px 20px 0 0;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
  transform: perspective(1000px) rotateX(2deg) rotateY(-1deg);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* Media content styles moved from .media-container and .media-content */
.media-board .avatar-media-bubble-video,
.media-board .avatar-media-bubble-image,
.media-board .avatar-media-bubble-image-html,
.media-board .avatar-media-bubble-sticker,
.media-board .avatar-media-bubble-loading {
  position: relative;
  width: 100%;
  height: 350px;
  min-height: 250px;
  max-height: 450px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 10px;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  opacity: 1;
  filter: none;
  padding: 0;
  transform: none;
  box-sizing: border-box;
}

.media-board.hidden {
  opacity: 0;
  display: none;
}

.media-board::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      circle at 20% 30%,
      rgba(255, 255, 255, 0.15) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 40% 80%,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 60% 20%,
      rgba(255, 255, 255, 0.08) 1px,
      transparent 1px
    );
  background-size:
    50px 50px,
    30px 30px,
    40px 40px,
    25px 25px;
  pointer-events: none;
  border-radius: 10px;
}

.media-board::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse at 30% 40%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 60%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 50%
    );
  pointer-events: none;
  border-radius: 10px;
}

.media-board .avatar-media-bubble-video .video-preview-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-board .avatar-media-bubble-video .video-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.media-board .avatar-media-bubble-video .video-preview video,
.media-board .avatar-media-bubble-video .video-preview iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.media-board .avatar-media-bubble-image .image-preview,
.media-board .avatar-media-bubble-image-html .image-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.media-board .avatar-media-bubble-image .image-preview img,
.media-board .avatar-media-bubble-image-html .image-preview img,
.media-board .avatar-media-bubble-image-html .image-preview div {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Consolidated RcViewer wrapper styles */
.media-board .avatar-media-bubble-image .image-preview-anchor > div,
.media-board
  .avatar-media-bubble-image
  .image-preview-anchor
  .rc-viewer-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-board .avatar-media-bubble-image,
.media-board .avatar-media-bubble-image-html {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.media-board .avatar-media-bubble-sticker .sticker-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.media-board .avatar-media-bubble-sticker .sticker-preview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: block;
  margin: 0 auto;
}

.media-board .avatar-media-bubble-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-board .avatar-media-bubble-loading .loading-animation {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-board .avatar-media-bubble-video .video-expanded-wrapper {
  margin-top: 8px;
  text-align: center;
  flex-shrink: 0;
  overflow: hidden;
}

.media-board .avatar-media-bubble-video .new-tab-btn {
  display: inline-block;
  padding: 4px 8px;
  background: #f0f0f0;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-size: 10px;
  transition: background 0.2s;
  margin-top: 4px;
  white-space: nowrap;
}

.media-board .avatar-media-bubble-video .new-tab-btn:hover {
  background: #e0e0e0;
  text-decoration: none;
}

.media-board .video-preview-wrapper {
  border: none;
  padding: 0;
  background-color: transparent;
}

/* Removed duplicate .bubble-nav styles - using .media-container .bubble-nav instead */

/* Removed duplicate .bubble-nav-btn styles - consolidated below */

.bubble-nav-counter {
  font-size: 16px;
  color: #222;
  min-width: 50px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
}

@media (min-aspect-ratio: 1.2/1) {
  .media-board-wrapper {
    justify-content: flex-end;
    align-items: flex-start;
    height: 80%;
    width: 100%;
    pointer-events: none;
  }
  .media-board-container {
    height: 80%;
    max-height: 80%;
    min-height: 350px;
    width: 60%;
    max-width: 60%;
    min-width: 400px;
    pointer-events: auto;
    margin-right: 0;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
  }
  .media-board {
    height: 80%;
    width: 60%;
    min-height: 350px;
    min-width: 400px;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 4/3;
    margin-right: 1%;
    margin-left: auto;
    margin-top: 0;
  }
}

@media (max-aspect-ratio: 1.2/1) {
  .media-board-wrapper {
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    pointer-events: none;
    top: 0;
    position: absolute;
  }
  .media-board-container {
    height: 30%;
    max-height: 30%;
    min-height: 200px;
    width: 100%;
    max-width: 100%;
    min-width: 300px;
    pointer-events: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    top: 0;
    position: relative;
  }
  .media-board {
    height: 100%;
    width: 100%;
    min-height: 200px;
    min-width: 300px;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 4/3;
    margin: 0;
    top: 0;
  }

  .bubble-nav-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
  }
  .bubble-nav-counter {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .media-board-container {
    max-width: 98%;
    max-height: 98%;
  }

  .media-board {
    padding: 10px;
    border-width: 8px;
    transform: none;
    width: 100%;
    height: auto;
    min-width: 280px;
    min-height: 280px;
    max-width: 450px;
    max-height: 350px;
  }

  .media-content {
    font-size: 1rem;
    padding: 2px;
    transform: scale(1.02);
  }

  .media-board .avatar-media-bubble-video,
  .media-board .avatar-media-bubble-image,
  .media-board .avatar-media-bubble-image-html,
  .media-board .avatar-media-bubble-sticker,
  .media-board .avatar-media-bubble-loading {
    transform: scale(1.05);
    height: 200px;
    min-height: 180px;
    max-height: 240px;
    margin-bottom: 10px;
  }

  .bubble-nav {
    gap: 8px;
    margin-top: 8px;
  }

  .bubble-nav-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 14px;
  }

  .bubble-nav-counter {
    font-size: 11px;
    min-width: 40px;
  }

  .avatar-buttons-container {
    gap: 1px;
    margin-top: -1px;
    margin-bottom: 1px;
    padding: 0px 2px;
  }

  .avatar-btn {
    font-size: 12px;
    padding: 6px 12px;
    min-width: 60px;
  }

  .avatar-nav-btn {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
}

/* Extra small mobile devices (iPhone SE, etc.) */
@media (max-width: 375px) {
  .media-board {
    padding: 8px;
    border-width: 6px;
    min-width: 260px;
    min-height: 260px;
    max-height: 320px;
  }

  .media-board .avatar-media-bubble-video,
  .media-board .avatar-media-bubble-image,
  .media-board .avatar-media-bubble-image-html,
  .media-board .avatar-media-bubble-sticker,
  .media-board .avatar-media-bubble-loading {
    transform: scale(1.03);
    height: 180px;
    min-height: 160px;
    max-height: 200px;
    margin-bottom: 8px;
  }

  .bubble-nav {
    gap: 6px;
    margin-top: 6px;
  }

  .bubble-nav-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    font-size: 12px;
  }

  .bubble-nav-counter {
    font-size: 10px;
    min-width: 35px;
  }

  .avatar-buttons-container {
    gap: 4px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0 8px;
  }

  .avatar-btn {
    font-size: 11px;
    padding: 5px 10px;
    min-width: 50px;
  }

  .avatar-nav-btn {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

/* Consolidated image preview styles for MediaBoard */
.media-board .avatar-media-bubble-image .image-preview,
.media-board .avatar-media-bubble-image .image-preview-anchor,
.media-board .avatar-media-bubble-image-html .image-preview,
.media-board .avatar-media-bubble-image-html .image-preview-anchor {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding: 0;
  border: none;
  background-color: transparent;
}

.media-board .avatar-media-bubble-image img,
.media-board .avatar-media-bubble-image-html img,
.media-board .avatar-media-bubble-image .image-preview-img,
.media-board .avatar-media-bubble-image-html .image-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-width: none;
  max-height: none;
  border-radius: 8px;
}

.media-board {
  overflow: hidden;
}

/* MediaBoard now only handles media content - transcription moved outside */

/* Media container - optimized for new structure */
.media-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  position: relative;
}

.media-container .avatar-media-bubble-video,
.media-container .avatar-media-bubble-image,
.media-container .avatar-media-bubble-image-html,
.media-container .avatar-media-bubble-sticker,
.media-container .avatar-media-bubble-loading {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  flex: 1 1;
  min-height: 250px;
}

.bubble-nav {
  position: absolute;
  top: 50%;
  left: 5%;
  width: 100%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  padding: 0 20px;
}

.bubble-nav-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 9999px;
  -webkit-backdrop-filter: saturate(140%) blur(6px);
          backdrop-filter: saturate(140%) blur(6px);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #07135f;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
  pointer-events: auto;
  margin: 0;
  flex-shrink: 0;
}

.bubble-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

.bubble-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.bubble-nav-counter {
  display: none;
}

/* Case 3: Only media - centered */
.media-board.media-only {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.media-board.media-only .media-container {
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 450px;
}

/* Responsive adjustments for media-only layout */
@media (max-aspect-ratio: 1.2/1) {
  .media-container {
    min-height: 200px;
  }

  .media-container .avatar-media-bubble-video,
  .media-container .avatar-media-bubble-image,
  .media-container .avatar-media-bubble-image-html,
  .media-container .avatar-media-bubble-sticker,
  .media-container .avatar-media-bubble-loading {
    min-height: 180px;
  }
}

@media (max-width: 480px) {
  .media-container {
    min-height: 150px;
  }

  .media-container .avatar-media-bubble-video,
  .media-container .avatar-media-bubble-image,
  .media-container .avatar-media-bubble-image-html,
  .media-container .avatar-media-bubble-sticker,
  .media-container .avatar-media-bubble-loading {
    min-height: 120px;
  }

  .media-container .bubble-nav-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
  }
}

@media (max-width: 375px) {
  .media-container {
    min-height: 120px;
  }

  .media-container .avatar-media-bubble-video,
  .media-container .avatar-media-bubble-image,
  .media-container .avatar-media-bubble-image-html,
  .media-container .avatar-media-bubble-sticker,
  .media-container .avatar-media-bubble-loading {
    min-height: 100px;
  }

  .media-container .bubble-nav-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 18px;
  }
}

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

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

/* Custom overflow-wrap utility */
.overflow-wrap-break-word {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Partial transcript styling for realtime effect */
.desktop-transcription-partial {
  color: #9ca3af;
  /* Lighter gray color for partial transcript */
  font-style: italic;
  position: relative;
  opacity: 0.6;
  /* Make text more faded/muted */
}

.desktop-transcription-partial::after {
  content: '...';
  animation: partial-dots 1.5s infinite;
  color: #3b82f6;
  font-weight: bold;
}

/* Bot thinking indicator styling */
.desktop-transcription-thinking {
  color: #6b7280;
  /* Gray color for thinking indicator */
  font-style: italic;
  position: relative;
}

.desktop-transcription-thinking::after {
  content: '...';
  animation: thinking-dots 2s infinite;
  color: #f59e0b;
  /* Orange color for thinking */
  font-weight: bold;
  font-size: 1.2em;
  /* Make dots bigger */
}

/* Mobile partial transcript styling */
.mobile-transcription-partial {
  color: #9ca3af;
  /* Lighter gray color for partial transcript */
  font-style: italic;
  position: relative;
  opacity: 0.6;
  /* Make text more faded/muted */
}

.mobile-transcription-partial::after {
  content: '...';
  animation: mobile-partial-dots 1.5s infinite;
  color: #3b82f6;
  font-weight: bold;
}

/* Mobile bot thinking indicator styling */
.mobile-transcription-thinking {
  color: #6b7280;
  /* Gray color for thinking indicator */
  font-style: italic;
  position: relative;
}

.mobile-transcription-thinking::after {
  content: '...';
  animation: mobile-thinking-dots 2s infinite;
  color: #f59e0b;
  /* Orange color for thinking */
  font-weight: bold;
  font-size: 1.2em;
  /* Make dots bigger */
}

/* Animation keyframes */
@keyframes partial-dots {
  0%,
  20% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  80%,
  100% {
    opacity: 0;
  }
}

@keyframes thinking-dots {
  0%,
  25% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mobile-partial-dots {
  0%,
  20% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  80%,
  100% {
    opacity: 0;
  }
}

@keyframes mobile-thinking-dots {
  0%,
  25% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Style HTML elements within transcription content */
.transcription-content h1,
.transcription-content h2,
.transcription-content h3,
.transcription-content h4,
.transcription-content h5,
.transcription-content h6 {
  margin: 0.1em 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.transcription-content ol,
.transcription-content ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  list-style-position: outside;
}

.transcription-content li {
  margin: 0.2em 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  display: list-item;
  list-style-position: outside;
}

.transcription-content strong {
  font-weight: bold;
  display: inline;
}

.transcription-content p {
  margin: 0 0 12px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  display: inline;
}

.transcription-content p:last-child {
  margin-bottom: 0;
}

.transcription-content li > p {
  display: inline;
  margin: 0;
}

.transcription-content li > p > strong {
  display: inline;
  margin: 0;
}

.transcription-content li > ul,
.transcription-content li > ol {
  margin: 0.2em 0 0.2em 1.5em;
  padding-left: 0;
}

.transcription-content li > ul > li,
.transcription-content li > ol > li {
  margin: 0.1em 0;
  display: list-item;
  list-style-position: outside;
}

.transcription-content li > ul > li > p,
.transcription-content li > ol > li > p {
  display: inline;
  margin: 0;
}

.transcription-content li > ul > li > p > strong,
.transcription-content li > ol > li > p > strong {
  display: inline;
  margin: 0;
}

.transcription-content li > ul > li > ul,
.transcription-content li > ul > li > ol,
.transcription-content li > ol > li > ul,
.transcription-content li > ol > li > ol {
  margin: 0.2em 0 0.2em 1.5em;
  padding-left: 0;
}

.transcription-content li > ul > li > ul > li,
.transcription-content li > ul > li > ol > li,
.transcription-content li > ol > li > ul > li,
.transcription-content li > ol > li > ol > li {
  margin: 0.1em 0;
  display: list-item;
  list-style-position: outside;
}

.transcription-content li > ul > li > ul > li > p,
.transcription-content li > ul > li > ol > li > p,
.transcription-content li > ol > li > ul > li > p,
.transcription-content li > ol > li > ol > li > p {
  display: inline;
  margin: 0;
}

.transcription-content li > ul > li > ul > li > p > strong,
.transcription-content li > ul > li > ol > li > p > strong,
.transcription-content li > ol > li > ul > li > p > strong,
.transcription-content li > ol > li > ol > li > p > strong {
  display: inline;
  margin: 0;
}

.transcription-content br {
  display: block;
  content: '';
  margin: 0.05em 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .desktop-transcription-content {
    font-size: 16px;
    padding: 16px;
    max-height: 250px;
  }
}

@media (max-width: 768px) {
  .mobile-transcription-content {
    font-size: 20px;
    scroll-behavior: smooth;
    /* Let outer container control height on mobile */
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .mobile-transcription-content {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    font-size: 16px;
    /* Let outer container control height on small mobile */
  }
}

/* DayPicker styles */

.DayPicker {
  display: inline-block;
  font-size: 1rem;
}

.DayPicker-wrapper {
  position: relative;

  flex-direction: row;
  padding-bottom: 1em;

  -webkit-user-select: none;

          user-select: none;
}

.DayPicker-Months {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.DayPicker-Month {
  display: table;
  margin: 0 1em;
  margin-top: 1em;
  border-spacing: 0;
  border-collapse: collapse;

  -webkit-user-select: none;

          user-select: none;
}

.DayPicker-NavBar {
}

.DayPicker-NavButton {
  position: absolute;
  top: 1em;
  right: 1.5em;
  left: auto;

  display: inline-block;
  margin-top: 2px;
  width: 1.25em;
  height: 1.25em;
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
  color: #8B9898;
  cursor: pointer;
}

.DayPicker-NavButton:hover {
  opacity: 0.8;
}

.DayPicker-NavButton--prev {
  margin-right: 1.5em;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC);
}

.DayPicker-NavButton--next {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==);
}

.DayPicker-NavButton--interactionDisabled {
  display: none;
}

.DayPicker-Caption {
  display: table-caption;
  margin-bottom: 0.5em;
  padding: 0 0.5em;
  text-align: left;
}

.DayPicker-Caption > div {
  font-weight: 500;
  font-size: 1.15em;
}

.DayPicker-Weekdays {
  display: table-header-group;
  margin-top: 1em;
}

.DayPicker-WeekdaysRow {
  display: table-row;
}

.DayPicker-Weekday {
  display: table-cell;
  padding: 0.5em;
  color: #8B9898;
  text-align: center;
  font-size: 0.875em;
}

.DayPicker-Weekday abbr[title] {
  border-bottom: none;
  text-decoration: none;
}

.DayPicker-Body {
  display: table-row-group;
}

.DayPicker-Week {
  display: table-row;
}

.DayPicker-Day {
  display: table-cell;
  padding: 0.5em;
  border-radius: 50%;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}

.DayPicker-WeekNumber {
  display: table-cell;
  padding: 0.5em;
  min-width: 1em;
  border-right: 1px solid #EAECEC;
  color: #8B9898;
  vertical-align: middle;
  text-align: right;
  font-size: 0.75em;
  cursor: pointer;
}

.DayPicker--interactionDisabled .DayPicker-Day {
  cursor: default;
}

.DayPicker-Footer {
  padding-top: 0.5em;
}

.DayPicker-TodayButton {
  border: none;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: #4A90E2;
  font-size: 0.875em;
  cursor: pointer;
}

/* Default modifiers */

.DayPicker-Day--today {
  color: #D0021B;
  font-weight: 700;
}

.DayPicker-Day--outside {
  color: #8B9898;
  cursor: default;
}

.DayPicker-Day--disabled {
  color: #DCE0E0;
  cursor: default;
  /* background-color: #eff1f1; */
}

/* Example modifiers */

.DayPicker-Day--sunday {
  background-color: #F7F8F8;
}

.DayPicker-Day--sunday:not(.DayPicker-Day--today) {
  color: #DCE0E0;
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
  position: relative;

  background-color: #4A90E2;
  color: #F0F8FF;
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
  background-color: #51A0FA;
}

.DayPicker:not(.DayPicker--interactionDisabled)
  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
  background-color: #F0F8FF;
}

/* DayPickerInput */

.DayPickerInput {
  display: inline-block;
}

.DayPickerInput-OverlayWrapper {
  position: relative;
}

.DayPickerInput-Overlay {
  position: absolute;
  left: 0;
  z-index: 1;

  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.date-picker-container {
  /* position: relative; */
}

.date-picker-container .DayPicker-Weekday {
  color: #6B7085;
}

.DayPicker-NavButton--next {
  filter: invert(50%) sepia(100%) saturate(200%) hue-rotate(175deg) brightness(80%);
}

.DayPicker-NavButton--prev {
  filter: invert(50%) sepia(100%) saturate(200%) hue-rotate(175deg) brightness(80%);
}

.date-picker-container .DayPicker {
  font-size: 0.8rem;
  background: #fff;
  border-radius: 0.3rem;
}

.date-picker-container .DayPicker-Day {
  height: 30px;
  width: 30px;
  padding: 0;
}

.date-picker-container
  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
  background: #0ba8a2;
}

.date-picker-button {
  position: relative;
  border: 1px solid #5F5E5E;
  background: #fff;
  padding: 10px 15px 7px;
  border-radius: 3px;
  font-size: 0.8rem;
  max-width: 100%;
  width: 100%;
  text-align: left;
  color: transparent;
  opacity: 0;
}

.date-picker-icon-wrapper {
  background: #1e4c88;
  font-size: 0.7rem;
  padding: 12px;
  position: absolute;
  top: -1px;
  height: 40px;
  width: 40px;
  right: 0px;
  text-align: center;
  border-radius: 0 3px 3px 0;
}

.date-picker-container .date-picker-popover {
  position: absolute;
  top: 0;
  background: #a8a8a8c7;
  z-index: 10; /* correct */
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: table;
}

.display-cell {
  display: table-cell;
  vertical-align: middle;
}

.date-picker-popover-actions {
  margin-top: 1rem;
}

.close-date-picker-button,
.reset-date-picker-button {
  background: #0923E6;
  border-radius: 30rem;
  color: #fff;
  border: none;
  font-size: 0.8rem;
  font-family: "Muli";
  padding: 0.3rem 2.3rem;
  font-weight: bold;
  letter-spacing: 0.02rem;
  margin: 0 0.3rem;
}

.selected-date-preview-item {
  font-size: 0.7rem;
  color: #07032b;
  border: 1px solid #eee;
  padding: 0.2rem 1.3rem 0.25rem 0.5rem;
  border-radius: 10rem;
  position: relative;
  margin-right: 0.5rem;
  font-weight: 600;
  display: inline-block;
  background-color: #fff;
}

.selected-date-preview-item-delete {
  position: absolute;
  right: 8px;
  border: none;
  background: none;
  padding: 0;
  font-size: 0.4rem;
  top: 7px;
  cursor: pointer;
}

.selected-date-preview-item-delete .icon-close::before {
  color: #c34343;
}

.selected-dates-preview {
  margin-top: 0.3rem;
}

.date-picker-input-wrapper {
  position: relative;
  max-width: 100%;
  border-radius: 3px;
  border: 1px solid #5F5E5E;
  background-color: #ffffff;
}

.date-picker-input-helptext {
  font-size: 0.8rem;
  position: absolute;
  top: 8px;
  left: 10px;
}

.file-uploader input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.file-uploader {
  position: relative;
  border: 1px solid #5F5E5E;
  background: #fff;
  color: #07032b;
  padding: 10px 15px;
  border-radius: 3px;
  font-size: 0.8rem;
  max-width: 100%;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-uploader-icon-wrapper {
  background: #1e4c88;
  font-size: 0.8rem;
  padding: 12px;
  position: absolute;
  top: -1px;
  height: 41px;
  width: 41px;
  text-align: center;
  right: 0px;
  border-radius: 0 0.3rem 0.3rem 0;
}

.file-uploader-icon-wrapper .icon-attach-file::before {
  color: #fff;
}

.file-uploader-container .selected-file-name {
  font-size: 0.7rem;
  margin-top: 0.2rem;
}

.file-uploader-container .info-message {
  color: #0923E6;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 600;
}

.file-uploader-container .error-message {
  color: #c34343;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 600;
}

.dropdown_wrapper {
  position: relative;
  z-index: 3;
}
.dropdown_wrapper .form-builder__indicator {
  color: #6B7085;
}
.dropdown_wrapper label {
  font-family: "Muli";
  font-size: 0.8rem;
  font-weight: bold;
  color: #07032b;
  margin-bottom: 10px;
  display: block;
  letter-spacing: 0.02rem;
}
.dropdown_text {
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid #d8d8d2;
  border-radius: 5px;
  font-size: 0.8rem;
  color: #07032b;
  font-family: "Muli";
}
.dropdown_text[readonly] {
  cursor: pointer;
}
.dropdown_text:focus {
  outline: none;
}
.dropdown_menu {
  position: absolute;
  border: 1px solid;
  width: 100%;
  left: 0;
  box-sizing: border-box;
  top: 100%;
  border: 1px solid #ccc;
  z-index: 12;
  max-height: 280px;
  overflow-y: auto;
}

.dropdown_menu_list {
  width: 100%;
  text-align: left;
  padding: 10px;
  border: none;
  background-color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: "Muli";
  color: #07032b;
}
.dropdown_menu_list:hover,
.dropdown_menu_list.hover {
  background-color: #ccc;
}
.dropdown_wrapper .arrow-down {
  position: absolute;
  top: 18px;
  right: 15px;
  z-index: 1;
  font-size: 0.4rem;
  color: #6a6a6a;
}
.Select-menu-outer {
  z-index: 3;
}
.form-builder__menu {
  max-height: none !important;
  overflow: visible !important;
  overflow: initial !important;
}

.form-container {
  padding: 20px 30px 0;
  color: #07032b;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  border-radius: 40px;
}

.form-container.full-chat {
  padding: 20px 30px 0;
  color: #07032b;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  margin: initial;
  border-radius: 40px;
  background: none;
}

.form-container .go-back-button {
  font-size: 0.8rem;
  background: none;
  cursor: pointer;
  border: none;
  font-weight: bold;
  letter-spacing: 0.03rem;
  padding: 0;
  color: #07032b;
}

.form-container .go-back-button .back-icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 0.65rem;
}

.form-container .control-label {
  margin-bottom: 8px;
  font-size: 0.8rem;
  /* text-transform: capitalize; */
  font-weight: 600;
  letter-spacing: 0.03rem;
}

.form-container .form-field-description {
  font-size: 0.7rem;
  margin-bottom: 0.4rem;
  margin-top: -0.3rem;
}

.form-container .form-control {
  border: 1px solid #5F5E5E;
  font-size: 0.8rem;
  border-radius: 3px;
  padding: 20px 15px;
}

.form-control::placeholder {
  color: #6b7085;
}

.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #1e4c88;
}

.help-block {
  font-size: 0.7rem;
  margin-top: 0.2rem;
}

form {
  margin-top: 1rem;
}

.submit-button-container {
  text-align: center;
  padding-bottom: 30px;
}

.form-primary-header,
.form-secondary-header {
  font-size: 0.9rem;
  margin-top: 1rem;
  /* font-weight: 600; */
}

.form-secondary-header {
  margin-top: 0.5rem;
}

.form-container .mandatory-star,
.form-container .required {
  color: red;
  font-size: 0.9rem;
  vertical-align: middle;
  margin-left: 2px;
}

.checkbox input {
  width: 0.8rem;
  height: 0.8rem;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid #5F5E5E;
  padding: 6px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  vertical-align: text-top;
  margin-right: 0.4rem;
  margin-left: 0;
  vertical-align: middle;
}

.checkbox input:checked:after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  top: 3px;
  left: 3px;
  background: #1e4c88;
  border-radius: 1px;
}

.checkbox {
  font-size: 0.9rem;
}

.checkbox span {
  font-size: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0;
}

.checkbox label {
  margin-bottom: 2px;
}

.form-container .form-group .checkbox input {
  padding: 6px;
}

.form-container .form-group {
  margin-bottom: 10px;
}

.form-button-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.form-container [type="submit"] {
  background-color: var(--primary-color);
}

.checkbox-options-container {
  margin-top: 1rem;
  margin-left: 48px;
}

.checkbox-options-container .selected-option-label {
  font-size: 14px;
  font-weight: 600;
  color: #000000;
}

.checkbox-options-container .checkbox-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fefaeb;
  height: 38px;
  margin-bottom: 0.5rem;
}

.checkbox-options-container .checkbox-options .option-label {
  margin-bottom: 0;
  padding: 16px;
}

.checkbox-options-container .checkbox-options .close-btn {
  font-size: 8px;
  padding: 15px;
}

.checkbox-options-container .checkbox-options .close-btn .icon-close:before {
  color: #6b7085;
}

.form-bubble-zindex {
  z-index: 3 !important;
}

.intro-panel-container {
  text-align: center;
  position: relative;
}

.intro-panel-container .intro-panel-card {
  text-align: left;
  padding: 30px 24px 15px;
  border-radius: 10px;
  /* display: flex; */
}

.intro-panel-container .logo-container {
  margin-right: 16px;
  width: 100%;
  max-height: 160px;
  display: flex;
}

.intro-panel-container .logo-img {
  max-width: 100%;
  object-fit: contain;
  max-height: 100%;
}

.intro-panel-container .message-container {
  margin-top: 24px;
}

.intro-panel-container .message-container p {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #07032b;
  line-height: 16px;
}

.intro-panel-container .message-container ul {
  list-style-type: disc;
  margin-left: 15px;
}

.intro-panel-container .message-container ol {
  list-style-type: decimal;
  margin-left: 15px;
}

@media screen and (max-width: 768px) {
  .intro-panel-container .intro-panel-card {
    padding: 20px 16px;
  }
}

.chat-feature-panel-wrapper {
  padding: 0 30px 25px;
}

.chat-feature-panel {
  border-radius: 10px;
  flex-wrap: wrap;
  position: relative;
}

.chat-feature-panel .feature-card-wrapper {
  margin: 0 16px 24px 16px;
}

.chat-feature-panel .decor-img {
  position: absolute;
  right: 10px;
  bottom: 10px;
  height: 60px;
  opacity: 0.3;
}

.chat-feature-panel .decor-img img {
  height: 100%;
  width: auto;
}

.chat-feature-panel .chat-feature-panel-body {
  overflow-y: auto;
  height: 100%;
}

.chat-feature-panel-wrapper .class-list {
  padding: 24px;
  background-color: #f4f6f9;
  border-radius: 10px;
  margin: 0 40px 24px;
}

.chat-feature-panel-wrapper .class-item {
  padding: 16px;
  font-size: 0.8rem;
  border-bottom: 1px solid #eceff7;
  cursor: pointer;
}

.chat-feature-panel-wrapper .class-item-active {
  background-color: #e2ece8;
  border-radius: 10px;
}

.chat-feature-panel-wrapper .class-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.chat-feature-panel-wrapper .class-list-heading {
  font-weight: bold;
  font-size: 0.8rem;
  padding: 0 0 8px;
}

.chat-feature-panel-wrapper .class-item-radio {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #c5d2e3;
  margin-right: 8px;
  vertical-align: middle;
}

.chat-feature-panel-wrapper .class-item-radio-active {
  border: 1px solid #147b51;
  background-color: #147b51;
}

.chat-feature-panel-wrapper .no-class-btn {
  padding: 0;
  margin-bottom: 24px;
}

/* .chat-feature-panel .sidebar-menu {
  margin-top: 24px;
} */

.chat-feature-panel .sidebar-menu-btn {
  display: block;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 1px;
  font-size: 0.8rem;
  padding: 16px;
  width: 100%;
  text-align: left;
  font-weight: 600;
  display: flex;
}

.chat-feature-panel .sidebar-menu-btn-active {
  color: #0923e6;
  background-color: #e8eaf5;
}

.chat-feature-panel .sidebar-menu-btn:focus {
  outline: none;
}

.chat-feature-panel .sidebar-icon-wrapper {
  width: 30px;
}

img.sidebar-icon {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.chat-feature-panel .sidebar-icon {
  margin-top: -2px;
}

.chat-feature-panel .sidebar-menu-btn .sidebar-title {
  vertical-align: middle;
}
.custom-scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 1px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
  width: 1px;
}
@media screen and (max-width: 768px) {
  .chat-feature-panel .feature-card-wrapper {
    margin: 0 0px 24px 0;
  }

  .chat-feature-panel {
    padding: 0 16px 0px;
  }

  .chat-feature-panel-wrapper .class-list {
    margin: 0 24px 24px;
  }
  .chat-feature-panel .sidebar-menu {
    margin-top: 0;
  }
  .chat-feature-panel .sidebar-menu-btn-active {
    background-color: #f0f4ff;
  }
}

.header-tabs-wrapper {
  position: fixed;
  top: 16px;
  z-index: 210;
  margin: 0;
  /* left: 110px; */
  /* padding: 0 10px; */
}

.header-tabs-wrapper .header-tab {
  color: #5f5d73;
  background: #ffffff;
  border: none;
  font-size: 0.8rem;
  margin-right: 10px;
  padding: 8px 16px;
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: 0.02rem;
  cursor: pointer;
}

.header-tabs-wrapper .header-tab-active {
  color: #0923E6;
  background: #E6EDFF;
  font-weight: bold;
}

#past-session-panel{
  top: 84px;
}
#past-session-panel .panel {
  padding: 48px 16px 16px;
  overflow: visible;
}

.past-session-panel-header {
  background: white;
  padding: 24px 16px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  font-size: 0.9rem;
  font-weight: 600;
  position: fixed;
  top: 0;
  z-index: 2;
  left: 0;
  width: 100%;
}

.past-session-panel-header .close-button {
  float: right;
  padding: 0;
}

.past-session-card .card-heading {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
}

.past-session-card ol,
.past-session-card li {
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  margin-left: 0.5rem;
  padding: 0;
  line-height: 1.8;
}

.past-session-card p {
  margin-bottom: 2px;
}

.past-session-card .summary-topic-header,
.past-session-card .quiz-name-header {
  font-weight: bold;
  font-size: 0.9rem;
}

.past-session-card .quiz-result {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.8;
}

.past-session-card .correct-answers-container {
  margin-top: 10px;
}

.past-session-card .correct-answers-container .accordion-section .accordion {
  padding: 9px 40px 9px 20px;
}

.past-session-card .session-duration-container {
  float: right;
  font-size: 0.7rem;
}

.past-session-card .session-duration-container i {
  margin-right: 5px;
}

.panel .chat-bubbles-wrapper {
  margin-top: 2.5rem;
}

.panel .past-session-card {
  margin-top: 1.5rem;
  text-align: left;
}

.past-session-panel-header .see-all-button,
.past-session-panel-header .mark-read-button,
.past-session-panel-header .close-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 0.7rem;
}

.past-session-panel-header .see-all-button {
  font-size: 0.8rem;
  letter-spacing: 0.02rem;
}

.past-session-panel-header .mark-read-button {
  color: #5f5d73;
  vertical-align: text-top;
}

.past-session-card .page-subheading {
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.past-session-card .accordion-content {
  background-color: #f4f5f8;
}

.past-session-card .answer-table-question,
.past-session-card .answer-table-question * {
  text-align: left;
  font-size: 0.8rem !important;
  white-space: pre-wrap;
  word-break: break-word;
}

.past-session-card .custom-icon-label-button {
  padding: 0;
}

.past-session-card table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.past-session-card th,
td {
  padding: 3px 8px;
}

.past-session-card .summary-record-loading-gif {
  width: 20px;
}

.session-heading {
  font-weight: bold;
  font-size: 1rem;
}
#past-session-panel .notification-panel-header{
  box-shadow: none;
  border-bottom: 0;
}
@media only screen and (max-width:768px) {
  #past-session-panel{
    top: 64px;
  }
} 
.all-sessions-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 40px;
  overflow-y: auto;
}
.all-sessions-container::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 1px;
}

.all-sessions-container::-webkit-scrollbar-track {
  background-color: transparent;
  width: 1px;
}

.all-sessions-container .all-sessions-decor-img {
  position: absolute;
  right: -16px;
  bottom: -16px;
  height: 60px;
  opacity: 0.3;
}

.all-sessions-container .all-sessions-decor-img img {
  height: 100%;
  width: auto;
}

.all-sessions-container .all-sessions-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  /* position: sticky; */
  top: 0;
  /* background: #fff; */
  /* padding: 8px 0; */
}

.all-sessions-container .all-sessions-header .left-partition {
  display: flex;
  line-height: 30px;
}

.all-bookmarks-container .all-bookmarks-header .right-partition {
  padding-top: 4px;
}

.all-sessions-container .all-sessions-header .header-heading {
  font-size:1rem !important;
  font-weight: bold;
}

.all-sessions-container .header-back-btn {
  background: rgba(173, 132, 214, 0.6);
  height: 30px;
  width: 30px;
  border-radius: 8px;
  border: none;
  font-size: 0.7rem;
  cursor: pointer;
  margin-right: 16px;
}

.all-sessions-container .header-back-btn .icon-left-chevron::before {
  color: #582190;
}

.all-sessions-container .session-item {
  border-bottom: 1px solid #eceff7;
  padding: 12px 0;
  font-size: 0.8rem;
  cursor: pointer;
  position: relative;
}

.all-sessions-container .session-item-flex-wrapper {
  display: flex;
  justify-content: space-between;
}

.all-sessions-container .session-item:hover {
  background: #eceff7;
}

.all-sessions-container .session-item-icon {
  font-size: 0.8rem;
  margin-right: 16px;
  margin-top: auto;
  margin-bottom: auto;
}

.all-sessions-container .session-item .left-partition {
  display: flex;
}

.all-sessions-container .session-item-duration {
  font-size: 0.6rem;
  color: rgb(7, 3, 43, 0.6);
}

.all-sessions-container .active-session-label {
  border: 1px solid #147b51;
  background: #e4fff4;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.7rem;
  height: 25px;
  margin-left: 16px;
}

.all-sessions-container .pagination-btn {
  display: inline-block;
  margin: 16px 8px 8px 0;
  width: 20px;
  height: 20px;
  background-color: #eceff7;
  border-radius: 3px;
  text-align: center;
  font-size: 11px;
  padding-top: 2px;
  cursor: pointer;
}

.all-sessions-container .pagination-btn:hover {
  background-color: #1e4c88;
  color: #fff;
}

.all-sessions-container .pagination-btn-active {
  background-color: #1e4c88;
  color: #fff;
}

.all-sessions-container .topic-name {
  font-size: 11px;
  font-weight: 600;
}

.all-sessions-container .topic-list-wrapper {
  padding-left: 22px;
  margin-top: 5px;
}

.all-sessions-container .session-item:hover .session-tooltip,
.all-sessions-container .session-item-active:hover .session-tooltip {
  display: block;
}

.all-sessions-container .session-tooltip {
  display: none;
  font-size: 0.7rem;
  position: absolute;
  left: calc(100% + 16px);
  bottom: 12px;
  color: #fff;
  /* width: ; */
  background-color: #05254f;
  padding: 8px 8px 10px;
  min-width: 80px;
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  font-weight: 600;
  z-index: 2;
  width: -webkit-max-content;
  width: max-content;
}

.all-sessions-container .session-item:hover .session-tooltip::after,
.all-sessions-container .session-item-active:hover .session-tooltip::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent #05254f;
  border-radius: 3px;
  display: block;
  width: 0;
  z-index: 1;
  left: -5px;
  bottom: 9px;
}

.all-sessions-container .session-item:hover .session-tooltip::before,
.all-sessions-container .session-item-active:hover .session-tooltip::before {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent #05254f;
  border-radius: 3px;
  display: block;
  width: 0;
  z-index: 0;
  left: -6px;
  bottom: 9px;
}
.all-sessions-container .chat-modal{
  background: rgba(0, 0, 0, 0.35);
  padding-top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.all-sessions-container .chat-modal .modal-button-container{
  margin-top: 0;
  padding:0.5rem 1rem;
  border-top: 1px solid #ECEFF7;
}
.all-sessions-container .chat-modal .modal-body {
  padding: 0;
}
.confirm-msg{
  padding:1rem;
  color: #0E0748;
  font-size: 0.875rem;
  font-weight: 600;
}
.all-sessions-container .chat-modal .modal-button-container button{ 
  margin: 0 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
}
.all-sessions-container .chat-modal .modal-button-container button.grey-button{
  background-color: #fff;
  color: #0923E6;
  border: 1px solid #0923E6;
}
.all-sessions-container .chat-modal .modal-button-container button.primary-button{
  background-color: #0923E6;
  color: #fff;
}

.chat-sidebar-content {
  overflow-y: auto;
  height: 100%;
}

.widget .document-preview-wrapper {
  overflow: hidden;
  padding: 40px 20px 10px;
  box-sizing: border-box;
  transition: all 0.5s ease-in-out;
  bottom: 0;
  display: flex;
  left: 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999999;
}

.chat-footer {
  background-color: #e4e8f2;
  border-radius: 0 0 16px 16px;
  margin: 16px;
}

#notification-panel {
  width: 100%;
  max-width: 35em;
}

.chat-page-container .notification-panel-header .icon-close {
  font-size: 0.8rem;
}

.chat-page-container .notification-action-container {
  display: flex;
  margin-right: 8px;
}

.chat-page-container .notification-panel-header .icon-setting {
  font-size: 0.9rem;
}

.chat-page-container .notification-panel-header .icon-close::before,
.chat-page-container .notification-panel-header .icon-setting::before {
  color: #07032b;
}
.chat-page-container .panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(214, 215, 231, 0.5);
  box-sizing: content-box;
  padding-top: 55px;
  overflow: scroll;
}

#notification-panel .panel {
  padding-top: 0px;
  padding-bottom: 40px;
}
#past-session-panel .panel {
  padding-top: 0px;
  padding-bottom: 40px;
}
#notification-panel .send-notification-btn {
  position: fixed;
  bottom: 0;
  z-index: 100;
  background-color: #f9b234;
  color: #07032b;
  width: 100%;
  height: 40px;
  cursor: pointer;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.chat-page-container .panel .notification-count {
  background-color: #f9b234;
  background-color: var(--primary-color);
  /* margin-left: 8px; */
  font-weight: bold;
  /* position: absolute; */
  /* left: 9rem; */
  font-size: 0.7rem;
  margin-left: 8px;
  height: 18px;
  padding: 0px 5px;
  border-radius: 10px;
  color: #07032b;
  color: var(--text-color);
}

.chat-page-container .panel-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  /* width: 500px; */
  transform: translateX(100%);
  transition: 0.3s ease-out;
  z-index: 250;
}

.chat-page-container .open-panel-wrap {
  transform: translateX(0%);
}

.chat-page-container .notification-panel-header {
  background: white;
  padding: 19px 24px;
  box-shadow: 0 2px 10px rgba(92, 92, 92, 0.15);
  display: flex;
  justify-content: space-between;
  /* position: absolute; */
  top: 0;
  box-sizing: border-box;
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 1px solid #eceff7;
}

.chat-page-container .notification-panel-header .close-button {
  float: right;
  margin-top: 2px;
  padding: 0;
}

.chat-page-container .test-bot-panel-header .close-button,
.chat-page-container .test-bot-panel-header .refresh-button,
.chat-page-container .notification-panel-header .see-all-button,
.chat-page-container .notification-panel-header .mark-read-button,
.chat-page-container .notification-panel-header .close-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 0.7rem;
}

.chat-page-container .notification-panel-header .see-all-button {
  font-size: 0.8rem;
  letter-spacing: 0.02rem;
}

.chat-page-container .notification-panel-header .mark-read-button {
  color: #5f5d73;
  vertical-align: text-top;
}

.chat-wrapper .chat-footer .chat-footer-feedback {
  /* position: absolute; */
  /* bottom: 0; */
  /* width: 100%; */
  /* z-index: 1; */
  border-radius: 10px;
  overflow: hidden;
}

.chat-page-container .modal-heading {
  margin-bottom: 10px;
}

.chat-page-container .modal-content {
  max-width: 500px;
}

.topics-container .subtopic-header {
  position: relative;
}

.topics-container .topics-container-nav-button {
  background: none;
  border: none;
  position: absolute;
  font-family: 'Muli';
  font-size: 0.8rem;
  color: #07032b;
  font-weight: 600;
  top: -2px;
  left: 18px;
  cursor: pointer;
}

.topics-container .topics-container-nav-button:focus {
  outline: none;
}

.topics-container .topics-container-nav-icon:before {
  color: #07032b;
  font-size: 0.6rem;
  margin-right: 5px;
}

.chat-page-container .logout-button {
  position: absolute;
  right: 40px;
  top: 20px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

video {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

.not-visible,
.not-visible * {
  opacity: 0;
}

.chat-page-container .chat-floating-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #f9b234;
  background: var(--primary-color);
  box-shadow: 0 0 16px rgba(215, 214, 230, 0.8);
  border: none;
  color: #fff;
  color: var(--primary-text-color);
  cursor: pointer;
  font-size: 1.1rem;
}

.chat-page-container .chat-floating-button .icon-send::before {
  color: #fff;
  color: var(--primary-text-color);
  display: inline-block;
  transform: rotate(-45deg);
}

.chat-page-container .chat-overlay-container {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  z-index: 14;
  background-color: #f5f6fa;
  border-radius: 40px;
  overflow: hidden;
  overflow-y: auto;
}

/* media queries */

@media screen and (max-width: 768px) {
  .chat-wrapper {
    width: 100%;
    margin: 0 !important;
    height: 100%;
    /* padding: 8px !important; */
  }

  .chat-sidebar {
    width: 100%;
    padding: 8px;
    height: 100%;
  }

  .chat-footer {
    margin: 8px;
  }
}

.widget-chat-page-container .user-button-container {
  float: none;
  max-width: 100%;
}

.widget-chat-page-container .suggestion-button {
  font-size: 0.7rem !important;
}

.wmi .suggestion-button {
  font-size: 1.125rem !important;
}

@media screen and (max-width: 768px) {
  .user-chat-bubble-hasbutton-container {
    padding: 8px !important;
  }
}

#past-session-panel .header-tabs-wrapper {
  position: static !important;
}
#past-session-panel .chat-bubbles-wrapper,
#past-session-panel .past-session-card {
  padding: 20px 16px 16px;
}

#past-session-panel .notification-lists {
  margin-top: 20px;
  height: calc(100% - 46px) !important;
}

:root {
  --topPanelBg: #ededed;
  --menuActive: #406568;
  --menuHover: #f0f4ff;
  --chatBodyBg: #c8c5c8;
  /* --chatBodyBg: #ffffff; */
  --bookmarkBg: #f0f4ff;
  --menuhoverDesc: #6b7085;
  --menuDesc: #6b7085;
  --menuBlue: #000273;
  --clearBtn: #ffe6f1;
  --clearTxt: #d00026;
  --chatWindowBg: #f0f4ff;
  /* --primary-bg: #fffbff; */
  --primary-bg: #ffffff;
  --container-inner-bg: #ffffff;

  /* --skyBlue: #F0F4FF;
  --white: #ffffff;
  --menuWhite:#ffffff;
  --panelHeader:#ffffff;
  --bubbleBlue:#0923E6;
  --markRead:#0923E6;
  --markTxt:#FFE6F1;
  --bubbleGrey:#dce5ed; */
}
:root .wmi {
  --topPanelBg: #ededed;
  --menuActive: #406568;
  --menuHover: #8ca3a5;
  --chatWindowBg: #ededed;
  --chatBodyBg: #c8c5c8;
  --bookmarkBg: #ffffff;
  --menuhoverDesc: #ffffff;
  --menuDesc: #6b7085;
  --menuBlue: #ffffff;
  --primary-bg: #ffffff;

  /* --panelHeader:#C8C5C8; */
  /* --markRead:#BC724B; */
  /* --bubbleBlue:#BC724B; */
}

.widget-chat-page-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: fixed;
  inset: 0px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.chat-right-position-shape {
  /* background: #fff; */
  margin: 0 auto;
  /* width: calc(100% - 24px);
  padding: 12px 16px 16px; */
  position: relative;
  /* border-radius: 40px 40px 16px 40px; */
  height: calc(100% - 30px);
  margin: 12px;
  /* border: 1px solid #dfd7d7; */
}

.chat-left-position-shape {
  background: #fff;
  margin: 0 auto;
  width: calc(100% - 24px);
  padding: 12px 16px 16px;
  position: relative;
  border-radius: 40px 40px 40px 16px;
  height: calc(100% - 30px);
  margin: 12px;
  border: 1px solid #dfd7d7;
}

.widget-bubble {
  background: transparent;
  flex-grow: 1;
  width: 100%;
  margin: auto;
  display: flex;
  position: relative;
  height: 100%;
}

.widget-chat-sidebar {
  width: 100%;
  /* max-width: 500px; */
  margin: auto;
  position: relative;
  display: flex;
  flex-flow: column;
  height: calc(100%);
  overflow-y: auto;
  background-color: #fff;
  overflow: hidden;
  transition: width 0.05s ease-in-out;
  z-index: 12;
  border-radius: 30px 30px 30px 60px;
}

.document-preview-wrapper {
  /* background: #f9fafd; */
  overflow: hidden;
  padding: 40px 20px 10px;
  /* margin-right: 20px; */
  box-sizing: border-box;
  transition: all 0.5s ease-in-out;
  /* margin-left: -20px; */
  z-index: 220;
}

.widget-chat-page-container .notification-panel-header .icon-close {
  font-size: 0.8rem;
}

.widget-chat-page-container .notification-action-container {
  display: flex;
}

.widget-chat-page-container .notification-panel-header .icon-setting {
  font-size: 0.9rem;
}

.widget-chat-page-container .notification-panel-header .icon-close::before,
.widget-chat-page-container .notification-panel-header .icon-setting::before {
  color: #07032b;
}
.widget-chat-page-container .panel {
  background: #fff;
  box-sizing: content-box;
  padding-top: 55px;
  /* overflow: scroll; */
  height: calc(100% - 18px);
  border-radius: 28px;
}
.widget-chat-page-container .notification-lists,
.widget-chat-page-container .chat-bubbles-wrapper {
  height: calc(100% - 83px);
  overflow-y: scroll;
}
.notification-lists .notification-container {
  padding: 1rem;
  background-color: #fff;
  border-bottom-color: #d9d9d9;
}
.notification-lists .notification-container .notification-content-header {
  align-items: flex-start;
}
.notification-lists .option-delete-btn,
.option-delete-btn .icon-delete {
  color: #d00026;
  font-weight: bold;
}
.notification-lists .notification-container .notification-time {
  color: #6b7085;
  font-size: 10px;
  font-weight: 400;
}
.notification-lists .notification-container .notification-title,
.notification-lists .notification-container .notification-content {
  font-size: 12px;
  font-weight: 700;
  color: #000;
}
.notification-lists .notification-container .notification-content {
  font-weight: 400;
}
.notification-lists .notification-checkbox-container .custom-checkbox {
  vertical-align: top;
  margin-right: 0;
}
.notification-lists .notification-checkbox-container .custom-checkbox:after {
  height: 10px;
  width: 10px;
}
.notification-lists::-webkit-scrollbar {
  width: 0px;
}

.widget-chat-page-container .panel .notification-count {
  background-color: var(--primary-color);
  /* margin-left: 8px; */
  font-weight: bold;
  /* position: absolute; */
  /* left: 9rem; */
  font-size: 0.7rem;
  margin-left: 8px;
  height: 18px;
  min-width: 18px;
  line-height: 20px;
  padding: 0px 5px;
  border-radius: 10px;
  color: #fff;
}

.widget-chat-page-container .panel-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  max-width: 100% !important;
  transform: translateX(-110%);
  transition: 0.3s ease-out;
  z-index: 250;
  padding: 12px 12px 20px;
}

.widget-chat-page-container .open-panel-wrap {
  transform: translateX(0%);
}

.widget-chat-page-container .notification-panel-header {
  background: var(--panelHeader);
  padding: 19px 24px;
  display: flex;
  justify-content: space-between;
  position: relative;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 2px 4px -2px #b9b6e0;
}

.widget-chat-page-container .notification-panel-header .close-button {
  float: right;
  margin-top: 2px;
  padding: 0;
  position: absolute;
  left: 50px;
}
.widget-chat-page-container .notification-panel-header > div {
  justify-content: center;
}

.widget-chat-page-container .test-bot-panel-header .close-button,
.widget-chat-page-container .test-bot-panel-header .refresh-button,
.widget-chat-page-container .notification-panel-header .see-all-button,
.widget-chat-page-container .notification-panel-header .mark-read-button,
.widget-chat-page-container .notification-panel-header .close-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 0.7rem;
}

.widget-chat-page-container .notification-panel-header .see-all-button {
  font-size: 0.8rem;
  letter-spacing: 0.02rem;
}

.widget-chat-page-container .notification-action-container .mark-read-button {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 7px 16px;
  border: 0;
  border-radius: 0 0 0 28px;
}
.widget-chat-page-container
  .notification-action-container
  .mark-read-button.clear-btn {
  color: #d00026;
  color: var(--clearTxt);
  background-color: #ffe6f1;
  background-color: var(--clearBtn);
  border-radius: 0 0 28px 0;
}

.widget-chat-page-container .modal-heading {
  margin-bottom: 10px;
}

.widget-chat-page-container .modal-content {
  max-width: 500px;
}

.widget-chat-page-container .logout-button {
  position: absolute;
  right: 40px;
  top: 20px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.widget-chat-page-container .chat-overlay-container {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 15;
  border-radius: 24px;
  overflow: hidden;
  background-color: #fff;
}

.widget-chat-wrapper {
  position: relative;
  background-size: contain;
  background-position: bottom center;
  display: flex;
  flex-flow: column;
  height: calc(100%);
  width: 100%;
  /* max-width: 500px; */
  margin: auto;
  transition: width 0.05s ease-in-out;
}

.widget-chat-wrapper-collapsed {
  position: relative;
  background-size: contain;
  background-position: bottom center;
  display: flex;
  flex-flow: column;
  height: calc(100%);
  width: calc(100% - 30px);
  transition: width 0.05s ease-in-out;
}

.widget-chat-wrapper .chat-footer .chat-footer-feedback {
  border-radius: 10px;
  overflow: hidden;
}

.auto-scroll {
  overflow-y: auto;
}

.widget-launch-btn-container {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  text-align: right;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.widget-launch-btn {
  box-shadow: 8px 8px 16px rgba(185, 182, 224, 0.4);
  border-radius: 50%;
  height: 100px;
  width: 100px;
  background-color: #fff;
  border: none;
  padding: 20px;
}

.widget-launch-btn:focus {
  outline: none;
}

body {
  background: transparent !important;
}

.widget-launch-btn img {
  max-width: 100%;
  height: auto;
}

.widget-close-btn {
  position: absolute;
  right: 13px;
  top: 8px;
  border: none;
  background-color: transparent;
  z-index: 25;
  padding: 6px;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
}

.widget-close-btn .icon-close:before {
  color: black;
}
.sidebar-overlay {
  z-index: 16 !important;
  background-color: rgba(0, 0, 0, 0.3);
  content: '';
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  width: calc(100% - 300px);
}

.widget-chat-sidebar {
  height: 100%;
  width: 100%;
  background: #ededed;
  background: var(--topPanelBg);
  border-radius: 28px;
  box-shadow: 0px 4px 4px 0px #b9b6e0;
}
.widget-chat-sidebar .chat-feature-panel-wrapper {
  padding: 0 0px 20px;
  height: 100%;
  border-radius: 16px 16px 0 0;
  background-color: #ffffff;
  background-color: var(--container-inner-bg);
}
.widget-chat-sidebar .intro-panel-container {
  background-color: #ededed;
  background-color: var(--topPanelBg);
}
.widget-chat-sidebar .intro-panel-container .logo-container {
  width: 100%;
  max-height: 100px;
  margin: 0 auto 24px;
  display: flex;
}
.widget-chat-sidebar .intro-panel-container .intro-panel-card {
  padding: 1.5rem 1.875rem;
}
.widget-chat-sidebar .intro-panel-container .message-container {
  margin-top: 12px;
}
.widget-chat-sidebar .intro-panel-container .message-container p {
  font-size: 14px;
  font-weight: 400;
}
.widget-chat-sidebar .intro-panel-container .message-container ol {
  list-style-type: decimal;
  margin-left: 15px;
}
.widget-chat-sidebar .intro-panel-container .message-container ul {
  list-style-type: disc;
  margin-left: 15px;
}
.widget-chat-sidebar .chat-feature-panel {
  padding: 0;
}
.widget-chat-sidebar .sidebar-menu .sidebar-menu-btn {
  font-size: 1rem;
  border-radius: 4px;
  padding: 1rem 1.875rem;
  line-height: normal;
  position: relative;
  align-items: center;
}
.auth-sso-widget .sidebar-menu .sidebar-menu-btn:after {
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid #6b7085;
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
  position: absolute;
  right: 1.5rem;
  top: 50%;
  margin-top: -6px;
}

.widget-chat-sidebar .sidebar-menu .sidebar-menu-btn:hover {
  background-color: #f0f4ff;
  background-color: var(--menuHover);
  color: #000273;
  color: var(--menuBlue);
}
.widget-chat-sidebar .sidebar-menu .sidebar-menu-btn:hover .title-desc {
  color: #6b7085;
  color: var(--menuhoverDesc);
}
.widget-chat-sidebar .sidebar-menu .sidebar-menu-btn.sidebar-menu-btn-active {
  background-color: #406568;
  background-color: var(--menuActive);
  color: #fff;
}
.sidebar-menu-btn.sidebar-menu-btn-active:after {
  border-color: #fff;
}
.widget-chat-sidebar .sidebar-menu .sidebar-menu-btn:first-child {
  border-radius: 16px 16px 4px 4px;
}
.widget-chat-sidebar .sidebar-menu .sidebar-menu-btn:last-child {
  border-radius: 4px 4px 16px 16px;
}
.title-desc {
  font-size: 0.875rem;
  font-weight: 400;
  color: #6b7085;
  color: var(--menuDesc);
}
.sidebar-menu-btn-active .title-desc {
  color: var(--menuWhite) !important;
}
.widget-chat-page-container .chat-body-wrapper {
  box-shadow: 0px 4px 4px 0px #b9b6e0;
  background-color: #c8c5c8;
  background-color: var(--chatBodyBg);
  border-radius: 28px !important;
  padding: 8px;

  position: relative;
  display: flex;
  flex-flow: column;
  height: 100%;
  z-index: 1500;
  max-width: 100%;
}

.widget-chat-page-container .all-bookmarks-container,
.widget-chat-page-container .all-sessions-container,
.widget-chat-page-container .report-container {
  border-radius: 16px;
  background-color: #ffffff;
  background-color: var(--container-inner-bg);
  padding: 16px !important;
}
.widget-chat-page-container .all-bookmarks-header .custom-icon-label-button {
  color: #0923e6;
}
.widget-chat-page-container .all-bookmarks-container .bookmark-item-icon {
  margin-top: 6px;
}
.widget-chat-page-container .chat-input-container .input-container {
  padding: 2px;
  border-radius: 8px;
  border: 0 !important;
  background-color: #fff;
}
.widget-chat-page-container .chat-footer-container {
  left: 0;
  padding: 8px;
}
.widget-chat-page-container .parent-container {
  background-color: var(--white);
  border-radius: 16px 16px 0 0;
  padding: 16px;
  margin-bottom: 60px;
  padding-bottom: 40px;
}
.widget-chat-page-container .chat-messages-header {
  background-color: transparent;
  padding: 8px;
}

.widget-chat-page-container .document-preview-wrapper {
  position: absolute !important;
}

.widget-chat-page-container
  .document-preview-wrapper
  .option-question-container {
  width: 100%;
  border-radius: 28px;
}

/* med ia queries */

@media screen and (max-width: 768px) {
  .widget-chat-wrapper {
    width: 100%;
    margin: 0 !important;
    height: 100%;
  }
}

.widget-chat-page-container .text-reply-container {
  padding: 1rem;
}
.widget-chat-page-container .chat-messages-header .notification-btn,
.widget-chat-page-container .chat-messages-header .is-widget {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-chat-page-container .chat-messages-header .is-widget {
  margin-left: 8px;
}
.widget-chat-page-container
  .chat-messages-header
  .is-widget
  .icon-down-chevron {
  margin-left: 0;
}
.widget-chat-page-container .chat-messages-header .header-back-btn {
  width: 38px;
  height: 38px;
  margin-right: 8px;
}
.widget-chat-page-container .chat-footer-container .chat-input-wrapper {
  padding: 8px;
}
.widget-chat-page-container .chat-footer-container .chat-input-container {
  border-radius: 8px;
  background-color: transparent;
}
.widget-chat-page-container
  .chat-footer-container
  .chat-input-container
  .input-container
  .input {
  background-color: #fff;
}
.widget-chat-page-container
  .chat-footer-container
  .chat-input-container
  .action-container
  .send-button {
  width: 38px;
  height: 38px;
  background-color: #fff;
  margin-left: 8px;
}
.widget-chat-page-container
  .chat-footer-container
  .chat-input-container
  .action-container
  .send-button
  i::before {
  color: #6b7085;
}

.btn-back-to-top {
  background-color: #0923e6;
  background-color: var(--primary-color);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  position: fixed;
  bottom: 115px;
  right: 57px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.btn-back-to-top:hover {
  background-color: var(--primary-color);
  opacity: 0.8;
  transform: scale(1.05);
}

.btn-back-to-top img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.widget-chat-page-container .quiz-submission-page .send-review-action-panel {
  top: 20px;
  left: 20px;
  right: 20px;
  border-radius: 24px 24px 0 0;
}

@media (max-width: 768px) {
  .btn-back-to-top {
    bottom: 105px;
    right: 35px;
  }
}

h1 {
  font-size: 1.5rem;
}
.font-600 {
  font-weight: 600 !important;
}

.font-18-px {
  font-size: 18px !important;
}
.choose-organisation .card {
  border: 1px solid #CDD5EF !important;
    border-radius: 8px !important;
    margin-bottom: 1rem;
    box-shadow: 0px 4px 4px #B9B6E0;
}
.choose-organisation .card-header {
  position: relative;
  font-size: 1rem;
  font-weight: 600;
  padding: 0;
  border-radius: 8px !important;
  border: 0;
  background-color: #FFFFFF;
  cursor: pointer;
}

.choose-organisation .card-header span {
  /* padding: 15px 20px !important; */
}

.clr-pink {
  color: #FF009E;
  font-size: 12px;
}

.font-weight-bold {
  font-weight: 700 !important;
}
.m-0 {
  margin: 0 !important;
}


.accordion-org .card-header {
  > button {
    opacity: 0;
    transition: opacity .35s ease;
    font-weight: 600;
    color: #0923E6;
  }
}

.accordion-org .card-header:hover, .card-header:active  {
  > button {
      opacity: 1;
  }
}

.accordion-org .card-header:after {
  display: none !important;
}

.accordion-org .btn.focus, .accordion-org.btn:focus {
  box-shadow: none !important;
  
}
body {
  display: block !important;
}

.team-discussion {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.custom-icon-label-button {
  color: #6b7085;
  font-size: 16px;
}

.custom-icon-label-button.active {
  color: #0923e6;
  border-bottom: 1px solid #0923e6;
}

.ques-item-container {
  background: white;
  border-radius: 8px;
  padding-left: 24px;
  padding-right: 24px;
}

.avar {
  border: 1px solid #eceff5;
  border-radius: 50%;
  height: 40px;
  position: relative;
  width: 40px;
}

.ques-title {
  color: #0923e6;
  font-size: 16px;
  font-weight: bold;
}

.ques-first-name {
  color: #6b7085;
}

input.search-questions {
  background-image: url(/static/media/search-img.504183aab6688252c800.svg);
  background-repeat: no-repeat;
  background-position: 11px 50%;
  padding: 7px 15px;
  padding-left: 40px;
  background-color: #fff;
  border: 1px solid #cdd5ef;
  border-radius: 10px;
  color: #0e0748;
  font-size: 14px;

  /* height: 47px; */
}

.select-sort .select-target-prefix__control {
  min-width: 180px;
  padding: 0 16px;
  border-color: #0923e6;
}

.select-sort .select-target-prefix__control:hover {
  border-color: #0923e6;
}

.select-target-prefix__value-container .select-target-prefix__single-value {
  color: #0923e6 !important;
}

.select-target-prefix__control .select-target-prefix__value-container {
  padding: 0;
}

.team-discussion * img {
  object-fit: contain;
}

.spinner-container-dicussion {
  width: 100%;
  height: 300px;
  background-color: white;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.team-discussion {
  height: 100vh;
  overflow: hidden;
  position: fixed;
  width: 100vw;
  padding: 16px;
}

.icon-button {
  cursor: pointer;
  width: 16px;
  height: 15px;
  object-fit: contain;
}

.sticky-top {
  top: 0;
  position: -webkit-sticky;
  position: sticky;
  z-index: 2;
}

.send-button[disabled] {
  background-color: #d9d9d9;
  cursor: not-allowed;
  opacity: 0.7;
}

.send-button {
  background: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(215, 214, 230, 0.8);
  color: #fff;
  color: var(--primary-text-color);
  cursor: pointer;
  margin-left: 12px;
  position: relative;
  height: 35px;
  font-size: large;
}

se .icon-send:before {
  color: black;
  display: inline-block;
  transform: rotate(-45deg);
}

.post-input-container {
  position: fixed;
  bottom: 0;
  width: 98%;
  padding: 8px;
  justify-content: center;
  align-items: center;
  background-color: #f1f2f4;
  border-radius: 16px;
}

.post-input {
  padding: 4px 8px;
  background: white;
  border: 0.6px solid #cdd5ef;
  border-radius: 10px;
  font-size: 0.9rem;
}

.edit-input {
  padding: 3px;
  background-color: #fff;
  border: 1px solid #cdd5ef;
  border-radius: 10px;
  color: #0e0748;
  font-size: 0.9rem;
}

.feeback-mobile {
  max-width: 120px;
  margin: 0px auto;
  padding-bottom: 10px;
}

.posts-container {
  /* padding-bottom: 50px; */
}

.chat-discussion-container {
  width: 100%;
  height: 100%;
  padding: 26px;
}

.chat-discussion-container .team-discussion {
  width: 100%;
  height: 98%;
  position: relative;
  padding: 0px;
}

.chat-discussion-container .post-input-container {
  position: -webkit-sticky;
  position: sticky;
  border-radius: 10px;
  width: 100%;
}

.chat-discussion-container .sticky-top {
  padding: 0;
}

.posts-container {
  flex: 1 1;
  overflow: auto;
}

.questions-container {
  overflow-y: auto;
  overflow-x: hidden;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url(data:image/gif;base64,R0lGODlhIAAgAPUAAP///wAAAPr6+sTExOjo6PDw8NDQ0H5+fpqamvb29ubm5vz8/JKSkoaGhuLi4ri4uKCgoOzs7K6urtzc3D4+PlZWVmBgYHx8fKioqO7u7kpKSmxsbAwMDAAAAM7OzsjIyNjY2CwsLF5eXh4eHkxMTLCwsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAIAAgAAAG/0CAcEgkFjgcR3HJJE4SxEGnMygKmkwJxRKdVocFBRRLfFAoj6GUOhQoFAVysULRjNdfQFghLxrODEJ4Qm5ifUUXZwQAgwBvEXIGBkUEZxuMXgAJb1dECWMABAcHDEpDEGcTBQMDBQtvcW0RbwuECKMHELEJF5NFCxm1AAt7cH4NuAOdcsURy0QCD7gYfcWgTQUQB6Zkr66HoeDCSwIF5ucFz3IC7O0CC6zx8YuHhW/3CvLyfPX4+OXozKnDssBdu3G/xIHTpGAgOUPrZimAJCfDPYfDin2TQ+xeBnWbHi37SC4YIYkQhdy7FvLdpwWvjA0JyU/ISyIx4xS6sgfkNS4me2rtVKkgw0JCb8YMZdjwqMQ2nIY8BbcUQNVCP7G4MQq1KRivR7tiDEuEFrggACH5BAAKAAEALAAAAAAgACAAAAb/QIBwSCQmNBpCcckkEgREA4ViKA6azM8BEZ1Wh6LOBls0HA5fgJQ6HHQ6InKRcWhA1d5hqMMpyIkOZw9Ca18Qbwd/RRhnfoUABRwdI3IESkQFZxB4bAdvV0YJQwkDAx9+bWcECQYGCQ5vFEQCEQoKC0ILHqUDBncCGA5LBiHCAAsFtgqoQwS8Aw64f8m2EXdFCxO8INPKomQCBgPMWAvL0n/ff+jYAu7vAuxy8O/myvfX8/f7/Arq+v0W0HMnr9zAeE0KJlQkJIGCfE0E+PtDq9qfDMogDkGmrIBCbNQUZIDosNq1kUsEZJBW0dY/b0ZsLViQIMFMW+RKKgjFzp4fNokPIdki+Y8JNVxA79jKwHAI0G9JGw5tCqDWTiFRhVhtmhVA16cMJTJ1OnVIMo1cy1KVI5NhEAAh+QQACgACACwAAAAAIAAgAAAG/0CAcEgkChqNQnHJJCYWRMfh4CgamkzFwBOdVocNCgNbJAwGhKGUOjRQKA1y8XOGAtZfgIWiSciJBWcTQnhCD28Qf0UgZwJ3XgAJGhQVcgKORmdXhRBvV0QMY0ILCgoRmIRnCQIODgIEbxtEJSMdHZ8AGaUKBXYLIEpFExZpAG62HRRFArsKfn8FIsgjiUwJu8FkJLYcB9lMCwUKqFgGHSJ5cnZ/uEULl/CX63/x8KTNu+RkzPj9zc/0/Cl4V0/APDIE6x0csrBJwybX9DFhBhCLgAilIvzRVUriKHGlev0JtyuDvmsZUZlcIiCDnYu7KsZ0UmrBggRP7n1DqcDJEzciOgHwcwTyZEUmIKEMFVIqgyIjpZ4tjdTxqRCMPYVMBYDV6tavUZ8yczpkKwBxHsVWtaqo5tMgACH5BAAKAAMALAAAAAAgACAAAAb/QIBwSCQuBgNBcck0FgvIQtHRZCYUGSJ0IB2WDo9qUaBQKIXbLsBxOJTExUh5mB4iDo0zXEhWJNBRQgZtA3tPZQsAdQINBwxwAnpCC2VSdQNtVEQSEkOUChGSVwoLCwUFpm0QRAMVFBQTQxllCqh0kkIECF0TG68UG2O0foYJDb8VYVa0alUXrxoQf1WmZnsTFA0EhgCJhrFMC5Hjkd57W0jpDsPDuFUDHfHyHRzstNN78PPxHOLk5dwcpBuoaYk5OAfhXHG3hAy+KgLkgNozqwzDbgWYJQyXsUwGXKNA6fnYMIO3iPeIpBwyqlSCBKUqEQk5E6YRmX2UdAT5kEnHKkQ5hXjkNqTPtKAARl1sIrGoxSFNuSEFMNWoVCxEpiqyRlQY165wEHELAgAh+QQACgAEACwAAAAAIAAgAAAG/0CAcEgsKhSLonJJTBIFR0GxwFwmFJlnlAgaTKpFqEIqFJMBhcEABC5GjkPz0KN2tsvHBH4sJKgdd1NHSXILah9tAmdCC0dUcg5qVEQfiIxHEYtXSACKnWoGXAwHBwRDGUcKBXYFi0IJHmQEEKQHEGGpCnp3AiW1DKFWqZNgGKQNA65FCwV8bQQHJcRtds9MC4rZitVgCQbf4AYEubnKTAYU6eoUGuSpu3fo6+ka2NrbgQAE4eCmS9xVAOW7Yq7IgA4Hpi0R8EZBhDshOnTgcOtfM0cAlTigILFDiAFFNjk8k0GZgAxOBozouIHIOyKbFixIkECmIyIHOEiEWbPJTTQ5FxcVOMCgzUVCWwAcyZJvzy45ADYVZNIwTlIAVfNB7XRVDLxEWLQ4E9JsKq+rTdsMyhcEACH5BAAKAAUALAAAAAAgACAAAAb/QIBwSCwqFIuicklMEgVHQVHKVCYUmWeUWFAkqtOtEKqgAsgFcDFyHJLNmbZa6x2Lyd8595h8C48RagJmQgtHaX5XZUYKQ4YKEYSKfVKPaUMZHwMDeQBxh04ABYSFGU4JBpsDBmFHdXMLIKofBEyKCpdgspsOoUsLXaRLCQMgwky+YJ1FC4POg8lVAg7U1Q5drtnHSw4H3t8HDdnZy2Dd4N4Nzc/QeqLW1bnM7rXuV9tEBhQQ5UoCbJDmWKBAQcMDZNhwRVNCYANBChZYEbkVCZOwASEcCDFQ4SEDIq6WTVqQIMECBx06iCACQQPBiSabHDqzRUTKARMhSFCDrc+WNQIcOoRw5+ZIHj8ADqSEQBQAwKKLhIzowEEeGKQ0owIYkPKjHihZoBKi0KFE01b4zg7h4y4IACH5BAAKAAYALAAAAAAgACAAAAb/QIBwSCwqFIuicklMEgVHQVHKVCYUmWeUWFAkqtOtEKqgAsgFcDFyHJLNmbZa6x2Lyd8595h8C48RagJmQgtHaX5XZUUJeQCGChGEin1SkGlubEhDcYdOAAWEhRlOC12HYUd1eqeRokOKCphgrY5MpotqhgWfunqPt4PCg71gpgXIyWSqqq9MBQPR0tHMzM5L0NPSC8PCxVUCyeLX38+/AFfXRA4HA+pjmoFqCAcHDQa3rbxzBRD1BwgcMFIlidMrAxYICHHA4N8DIqpsUWJ3wAEBChQaEBnQoB6RRr0uARjQocMAAA0w4nMz4IOaU0lImkSngYKFc3ZWyTwJAALGK4fnNA3ZOaQCBQ22wPgRQlSIAYwSfkHJMrQkTyEbKFzFydQq15ccOAjUEwQAIfkEAAoABwAsAAAAACAAIAAABv9AgHBILCoUi6JySUwSBUdBUcpUJhSZZ5RYUCSq060QqqACyAVwMXIcks2ZtlrrHYvJ3zn3mHwLjxFqAmZCC0dpfldlRQl5AIYKEYSKfVKQaW5sSENxh04ABYSFGU4LXYdhR3V6p5GiQ4oKmGCtjkymi2qGBZ+6eo+3g8KDvYLDxKrJuXNkys6qr0zNygvHxL/V1sVD29K/AFfRRQUDDt1PmoFqHgPtBLetvMwG7QMes0KxkkIFIQNKDhBgKvCh3gQiqmxt6NDBAAEIEAgUOHCgBBEH9Yg06uWAIQUABihQMACgBEUHTRwoUEOBIcqQI880OIDgm5ABDA8IgUkSwAAyij1/jejAARPPIQwONBCnBAJDCEOOCnFA8cOvEh1CEJEqBMIBEDaLcA3LJIEGDe/0BAEAIfkEAAoACAAsAAAAACAAIAAABv9AgHBILCoUi6JySUwSBUdBUcpUJhSZZ5RYUCSq060QqqACyAVwMXIcks2ZtlrrHYvJ3zn3mHwLjxFqAmZCC0dpfldlRQl5AIYKEYSKfVKQaW5sSENxh04ABYSFGU4LXYdhR3V6p5GiQ4oKmGCtjkymi2qGBZ+6eo+3g8KDvYLDxKrJuXNkys6qr0zNygvHxL/V1sVDDti/BQccA8yrYBAjHR0jc53LRQYU6R0UBnO4RxmiG/IjJUIJFuoVKeCBigBN5QCk43BgFgMKFCYUGDAgFEUQRGIRYbCh2xACEDcAcHDgQDcQFGf9s7VkA0QCI0t2W0DRw68h8ChAEELSJE8xijBvVqCgIU9PjwA+UNzG5AHEB9xkDpk4QMGvARQsEDlKxMCALDeLcA0rqEEDlWCCAAAh+QQACgAJACwAAAAAIAAgAAAG/0CAcEgsKhSLonJJTBIFR0FRylQmFJlnlFhQJKrTrRCqoALIBXAxchySzZm2Wusdi8nfOfeYfAuPEWoCZkILR2l+V2VFCXkAhgoRhIp9UpBpbmxIQ3GHTgAFhIUZTgtdh2FHdXqnkaJDigqYYK2OTKaLaoYFn7p6j0wOA8PEAw6/Z4PKUhwdzs8dEL9kqqrN0M7SetTVCsLFw8d6C8vKvUQEv+dVCRAaBnNQtkwPFRQUFXOduUoTG/cUNkyYg+tIBlEMAFYYMAaBuCekxmhaJeSeBgiOHhw4QECAAwcCLhGJRUQCg3RDCmyUVmBYmlOiGqmBsPGlyz9YkAlxsJEhqCubABS9AsPgQAMqLQfM0oTMwEZ4QpLOwvMLxAEEXIBG5aczqtaut4YNXRIEACH5BAAKAAoALAAAAAAgACAAAAb/QIBwSCwqFIuicklMEgVHQVHKVCYUmWeUWFAkqtOtEKqgAsgFcDFyHJLNmbZa6x2Lyd8595h8C48RahAQRQtHaX5XZUUJeQAGHR0jA0SKfVKGCmlubEhCBSGRHSQOQwVmQwsZTgtdh0UQHKIHm2quChGophuiJHO3jkwOFB2UaoYFTnMGegDKRQQG0tMGBM1nAtnaABoU3t8UD81kR+UK3eDe4nrk5grR1NLWegva9s9czfhVAgMNpWqgBGNigMGBAwzmxBGjhACEgwcgzAPTqlwGXQ8gMgAhZIGHWm5WjelUZ8jBBgPMTBgwIMGCRgsygVSkgMiHByD7DWDmx5WuMkZqDLCU4gfAq2sACrAEWFSRLjUfWDopCqDTNQIsJ1LF0yzDAA90UHV5eo0qUjB8mgUBACH5BAAKAAsALAAAAAAgACAAAAb/QIBwSCwqFIuickk0FIiCo6A4ZSoZnRBUSiwoEtYipNOBDKOKKgD9DBNHHU4brc4c3cUBeSOk949geEQUZA5rXABHEW4PD0UOZBSHaQAJiEMJgQATFBQVBkQHZKACUwtHbX0RR0mVFp0UFwRCBSQDSgsZrQteqEUPGrAQmmG9ChFqRAkMsBd4xsRLBBsUoG6nBa14E4IA2kUFDuLjDql4peilAA0H7e4H1udH8/Ps7+3xbmj0qOTj5mEWpEP3DUq3glYWOBgAcEmUaNI+DBjwAY+dS0USGJg4wABEXMYyJNvE8UOGISKVCNClah4xjg60WUKyINOCUwrMzVRARMGENWQ4n/jpNTKTm15J/CTK2e0MoD+UKmHEs4onVDVVmyqdpAbNR4cKTjqNSots07EjzzJh1S0IADsAAAAAAAAAAAA=) center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url(/static/media/slick.a4e97f5a2a64f0ab1323.eot);
    src: url(/static/media/slick.a4e97f5a2a64f0ab1323.eot?#iefix) format('embedded-opentype'), url(/static/media/slick.295183786cd8a1389865.woff) format('woff'), url(/static/media/slick.c94f7671dcc99dce43e2.ttf) format('truetype'), url(/static/media/slick.2630a3e3eab21c607e21.svg#slick) format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.footer-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  z-index: 2;
}

.footer-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 8px 30px 14px;
}

.powered-by {
  font-size: 0.75rem;
  color: #6b7085;
}

.powered-by strong {
  color: #0923e6;
  cursor: pointer;
}

.accessibility-link {
  border-left: 1px solid #6b7085;
  padding-left: 5px;
  color: #0923e6;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.back-to-chatbot {
  font-size: 18px;
  font-weight: 600;
  line-height: 23.4px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #0923e6;
}

@media screen and (max-width: 768px) {
  .footer-content {
    padding: 8px 16px;
  }
}

.no-agent-found-page {
  text-align: center;
  padding: 80px 100px 0px;
  overflow: hidden;
  max-height: 100vh;
}

.no-agent-found-page .heading {
  font-size: 50px;
  font-weight: 900;
  margin-bottom: 10px;
}

.no-agent-found-page .sub-heading {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 10px;
}

.no-agent-found-page .page-description {
  font-size: 20px;
  font-weight: 600;
}

.no-agent-found-page .hero-image {
  width: 90%;
}

.no-agent-found-page .logout-btn-container {
  text-align: center;
  margin: 30px 0 0;
}

.all-notifications-page-container {
  /* background: #f4f5f8; */
  flex-grow: 1;
  height: 100%;
  overflow-y: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.all-notifications-page-container .page-header {
  background-color: #fff;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  /* border-bottom: 1px solid #c6cbd6; */
  box-shadow: 0 0 12px rgba(215, 214, 230, 0.5);
}

.all-notifications-page-container .header-btn {
  border: none;
  background-color: transparent;
  font-size: 0.8rem;
  font-weight: bold;
  color: #0923e6;
  text-align: left;
}

.all-notifications-page-container .header-btn .icon-left-chevron::before {
  color: #0923e6;
  font-size: 0.6rem;
  margin-right: 8px;
}

.all-notifications-page-container .header-btn:hover {
  opacity: 0.7;
}

.all-notifications-page-container .header-heading {
  text-align: center;
  text-transform: capitalize;
}

.all-notifications-page-container .page-content,
.all-notifications-page-container .badge-page-content {
  flex: 1 1;
  padding: 40px;
  overflow-y: auto;
}

.all-notifications-page-container .page-heading {
  font-size: 1.2rem;
  font-weight: 800;
}

.all-notifications-page-container .page-subheading {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 32px;
}

.all-notifications-page-container .badge-card {
  margin-right: 56px;
  text-align: center;
  display: inline-block;
  max-width: 200px;
  vertical-align: top;
}

.all-notifications-page-container .badge-img-wrapper {
  width: 120px;
  margin: auto;
}

.all-notifications-page-container .badge-img {
  width: 100%;
  height: auto;
}

.all-notifications-page-container .locked-badge-img {
  filter: grayscale();
}

.all-notifications-page-container .badge-description {
  margin-top: 8px;
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.all-notifications-page-container .badge-name {
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  font-size: 0.75rem;
  font-weight: bold;
  margin-top: 24px;
}

.all-notifications-page-container .badge-date {
  font-size: 0.7rem;
  margin-top: 0px;
}

.all-notifications-page-container .badge-page-img-container {
  width: 300px;
  margin: auto;
}

.all-notifications-page-container .badge-page-img {
  width: 100%;
}

.all-notifications-page-container .badge-page-description {
  font-weight: bold;
  margin-top: 56px;
  text-align: center;
  font-size: 1rem;
}

.all-notifications-page-container .badge-page-date {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.all-notifications-page-container .badge-page-content {
  background: url(/static/media/confetti-bg.60ad4e9e2f148d41bd24.png);
  background-repeat: repeat;
}

.all-notifications-page-container .bulk-action-container {
  width: 100%;
  text-align: right;
  margin-bottom: 16px;
}

.sls .bg {
  background-image: url(/static/media/sls-bottom-bg.533c57897453234649cc.png);
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.blue-button {
  border-radius: 6px;
  border: none;
  background: #0923E6;
  background: var(--noodle-factory-v-20-primary-col-6-base, #0923E6);
  padding: 8px 16px;
  color: white;
}
.blue-button[disabled] {
  background: #ECEFF7;
  background: var(--noodle-factory-v-20-grey-grey-4-base, #ECEFF7);
  color: gray;
}


.title {
  color: #0923E6;
  color: var(--noodle-factory-v-20-primary-col-6-base, #0923E6);
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.sls-select-label {
  color: #6B7085;
  color: var(--noodle-factory-v-20-grey-grey-7, #6B7085);
}
.widget-chat-wrapper .widget-login-screen-message {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
  background-color: #0923e6;
  color: #fff;
  margin: 16px 16px 0px;
  border-radius: 40px 40px 0 0;
  padding: 32px;
}

.widget-chat-wrapper .widget-login-screen-form {
  text-align: center;
  margin: 0 16px;
  overflow-y: auto;
  background: #fff;
  height: 100%;
  padding-top: 36px;
}

.widget-login-screen-form .textinput-container {
  text-align: left;
}

.widget-login-screen-form .widget-login-screen-btn {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
  background-color: #0923e6;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
}

.access-denied-page {
  text-align: center;
  padding: 80px 100px 0px;
  overflow: hidden;
  max-height: 100vh;
}

.access-denied-page .heading {
  font-size: 50px;
  font-weight: 900;
  margin-bottom: 10px;
}

.access-denied-page .sub-heading {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 10px;
}

.access-denied-page .page-description {
  font-size: 20px;
  font-weight: 600;
}

.access-denied-page .hero-image {
  width: 100%;
}

.access-denied-page .logout-btn-container {
  text-align: center;
  margin: 30px 0 0;
}

.rdrCalendarWrapper {
  box-sizing: border-box;
  background: #ffffff;
  display: inline-flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDateDisplay{
  display: flex;
  justify-content: space-between;
}

.rdrDateDisplayItem{
  flex: 1 1;
  width: 0;
  text-align: center;
  color: inherit;
}

.rdrDateDisplayItem + .rdrDateDisplayItem{
    margin-left: 0.833em;
  }

.rdrDateDisplayItem input{
    text-align: inherit
  }

.rdrDateDisplayItem input:disabled{
      cursor: default;
    }

.rdrDateDisplayItemActive{}

.rdrMonthAndYearWrapper {
  box-sizing: inherit;
  display: flex;
  justify-content: space-between;
}

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

.rdrMonthPicker{}

.rdrYearPicker{}

.rdrNextPrevButton {
  box-sizing: inherit;
  cursor: pointer;
  outline: none;
}

.rdrPprevButton {}

.rdrNextButton {}

.rdrMonths{
  display: flex;
}

.rdrMonthsVertical{
  flex-direction: column;
}

.rdrMonthsHorizontal > div > div > div{
  display: flex;
  flex-direction: row;
}

.rdrMonth{
  width: 27.667em;
}

.rdrWeekDays{
  display: flex;
}

.rdrWeekDay {
  flex-basis: calc(100% / 7);
  box-sizing: inherit;
  text-align: center;
}

.rdrDays{
  display: flex;
  flex-wrap: wrap;
}

.rdrDateDisplayWrapper{}

.rdrMonthName{}

.rdrInfiniteMonths{
  overflow: auto;
}

.rdrDateRangeWrapper{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDateInput {
  position: relative;
}

.rdrDateInput input {
    outline: none;
  }

.rdrDateInput .rdrWarning {
    position: absolute;
    font-size: 1.6em;
    line-height: 1.6em;
    top: 0;
    right: .25em;
    color: #FF0000;
  }

.rdrDay {
  box-sizing: inherit;
  width: calc(100% / 7);
  position: relative;
  font: inherit;
  cursor: pointer;
}

.rdrDayNumber {
  display: block;
  position: relative;
}

.rdrDayNumber span{
    color: #1d2429;
  }

.rdrDayDisabled {
  cursor: not-allowed;
}

@supports (-ms-ime-align: auto) {
  .rdrDay {
    flex-basis: 14.285% !important;
  }
}

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  pointer-events: none;
}

.rdrInRange{}

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  pointer-events: none;
}

.rdrDayHovered{}

.rdrDayActive{}

.rdrDateRangePickerWrapper{
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDefinedRangesWrapper{}

.rdrStaticRanges{
  display: flex;
  flex-direction: column;
}

.rdrStaticRange{
  font-size: inherit;
}

.rdrStaticRangeLabel{}

.rdrInputRanges{}

.rdrInputRange{
  display: flex;
}

.rdrInputRangeInput{}

.rdrCalendarWrapper{
  color: #000000;
  font-size: 12px;
}

.rdrDateDisplayWrapper{
  background-color: rgb(239, 242, 247);
}

.rdrDateDisplay{
  margin: 0.833em;
}

.rdrDateDisplayItem{
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
  border: 1px solid transparent;
}

.rdrDateDisplayItem input{
    cursor: pointer;
    height: 2.5em;
    line-height: 2.5em;
    border: 0px;
    background: transparent;
    width: 100%;
    color: #849095;
  }

.rdrDateDisplayItemActive{
  border-color: currentColor;
}

.rdrDateDisplayItemActive input{
    color: #7d888d
  }

.rdrMonthAndYearWrapper {
  align-items: center;
  height: 60px;
  padding-top: 10px;
}

.rdrMonthAndYearPickers{
  font-weight: 600;
}

.rdrMonthAndYearPickers select{
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 30px 10px 10px;
    border-radius: 4px;
    outline: 0;
    color: #3e484f;
    background: url("data:image/svg+xml;utf8,<svg width=%279px%27 height=%276px%27 viewBox=%270 0 9 6%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27><g id=%27Artboard%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27 transform=%27translate%28-636.000000, -171.000000%29%27 fill-opacity=%270.368716033%27><g id=%27input%27 transform=%27translate%28172.000000, 37.000000%29%27 fill=%27%230E242F%27 fill-rule=%27nonzero%27><g id=%27Group-9%27 transform=%27translate%28323.000000, 127.000000%29%27><path d=%27M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z%27 id=%27arrow%27></path></g></g></g></svg>") no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    text-align: center
  }

.rdrMonthAndYearPickers select:hover{
      background-color: rgba(0,0,0,0.07);
    }

.rdrMonthPicker, .rdrYearPicker{
  margin: 0 5px
}

.rdrNextPrevButton {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 0.833em;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #EFF2F7
}

.rdrNextPrevButton:hover{
    background: #E1E7F0;
  }

.rdrNextPrevButton i {
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    text-align: center;
    border-style: solid;
    margin: auto;
    transform: translate(-3px, 0px);
  }

.rdrPprevButton i {
    border-width: 4px 6px 4px 4px;
    border-color: transparent rgb(52, 73, 94) transparent transparent;
    transform: translate(-3px, 0px);
  }

.rdrNextButton i {
    margin: 0 0 0 7px;
    border-width: 4px 4px 4px 6px;
    border-color: transparent transparent transparent rgb(52, 73, 94);
    transform: translate(3px, 0px);
  }

.rdrWeekDays {
  padding: 0 0.833em;
}

.rdrMonth{
  padding: 0 0.833em 1.666em 0.833em;
}

.rdrMonth .rdrWeekDays {
    padding: 0;
  }

.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
  display: none;
}

.rdrWeekDay {
  font-weight: 400;
  line-height: 2.667em;
  color: rgb(132, 144, 149);
}

.rdrDay {
  background: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 0;
  padding: 0;
  line-height: 3.000em;
  height: 3.000em;
  text-align: center;
  color: #1d2429
}

.rdrDay:focus {
    outline: 0;
  }

.rdrDayNumber {
  outline: 0;
  font-weight: 300;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rdrDayToday .rdrDayNumber span{
  font-weight: 500
}

.rdrDayToday .rdrDayNumber span:after{
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #3d91ff;
  }

.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{
      background: #fff;
    }

.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{
          color: rgba(255, 255, 255, 0.85);
        }

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  background: currentColor;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 5px;
}

.rdrSelected{
  left: 2px;
  right: 2px;
}

.rdrInRange{}

.rdrStartEdge{
  border-top-left-radius: 1.042em;
  border-bottom-left-radius: 1.042em;
  left: 2px;
}

.rdrEndEdge{
  border-top-right-radius: 1.042em;
  border-bottom-right-radius: 1.042em;
  right: 2px;
}

.rdrSelected{
  border-radius: 1.042em;
}

.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{
    border-top-left-radius: 1.042em;
    border-bottom-left-radius: 1.042em;
    left: 2px;
  }

.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{
    border-top-right-radius: 1.042em;
    border-bottom-right-radius: 1.042em;
    right: 2px;
  }

.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{
    border-top-left-radius: 1.333em;
    border-bottom-left-radius: 1.333em;
    border-left-width: 1px;
    left: 0px;
  }

.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{
   border-top-right-radius: 1.333em;
   border-bottom-right-radius: 1.333em;
   border-right-width: 1px;
   right: 0px;
 }

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  background: rgba(255, 255, 255, 0.09);
  position: absolute;
  top: 3px;
  left: 0px;
  right: 0px;
  bottom: 3px;
  pointer-events: none;
  border: 0px solid currentColor;
  z-index: 1;
}

.rdrDayStartPreview{
  border-top-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-top-left-radius: 1.333em;
  border-bottom-left-radius: 1.333em;
  left: 0px;
}

.rdrDayInPreview{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.rdrDayEndPreview{
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-top-right-radius: 1.333em;
  border-bottom-right-radius: 1.333em;
  right: 0px;
}

.rdrDefinedRangesWrapper{
  font-size: 12px;
  width: 226px;
  border-right: solid 1px #eff2f7;
  background: #fff;
}

.rdrDefinedRangesWrapper .rdrStaticRangeSelected{
    color: currentColor;
    font-weight: 600;
  }

.rdrStaticRange{
  border: 0;
  cursor: pointer;
  display: block;
  outline: 0;
  border-bottom: 1px solid #eff2f7;
  padding: 0;
  background: #fff
}

.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{
      background: #eff2f7;
    }

.rdrStaticRangeLabel{
  display: block;
  outline: 0;
  line-height: 18px;
  padding: 10px 20px;
  text-align: left;
}

.rdrInputRanges{
  padding: 10px 0;
}

.rdrInputRange{
  align-items: center;
  padding: 5px 20px;
}

.rdrInputRangeInput{
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  border: solid 1px rgb(222, 231, 235);
  margin-right: 10px;
  color: rgb(108, 118, 122)
}

.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{
    border-color: rgb(180, 191, 196);
    outline: 0;
    color: #333;
  }

.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
  content: '';
  border: 1px solid currentColor;
  border-radius: 1.333em;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0px;
  right: 0px;
  background: transparent;
}

.rdrDayPassive{
  pointer-events: none;
}

.rdrDayPassive .rdrDayNumber span{
    color: #d5dce0;
  }

.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{
    display: none;
  }

.rdrDayDisabled {
  background-color: rgb(248, 248, 248);
}

.rdrDayDisabled .rdrDayNumber span{
    color: #aeb9bf;
  }

.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{
    filter: grayscale(100%) opacity(60%);
  }

.rdrMonthName{
  text-align: left;
  font-weight: 600;
  color: #849095;
  padding: 0.833em;
}

:root {
  --primary-color: #f9b234;
  --primary-text-color: #ffffff;
  --user-color: #d8e7fb;
  --user-text-color: #07032b;
  --button-color: #c5d2e3;
  --button-text-color: #07032b;
}

*:focus {
  outline: none !important;
  outline-width: 0 !important;
}

body {
  background-color: transparent;
}

a {
  color: #07032b;
  text-decoration: underline;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
}

.flex-1 {
  flex: 1 1;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #09d3ac;
}

.flex-container {
  display: flex;
}

.flex-one {
  flex: 1 1;
}

.clearfix {
  height: 32px;
}

.half-clearfix {
  height: 16px;
}

.quarter-clearfix {
  height: 8px;
}

a:hover {
  opacity: 0.8;
}

.right-align {
  text-align: right;
}

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

.page-subheading {
  font-weight: bold;
  font-size: 0.8rem;
  text-align: left;
  margin: 0 0 16px;
}

.side-padding {
  padding: 0 16px;
}

.c-green {
  color: #00864d;
}

.c-blue {
  color: #0923e6;
}

.c-gray {
  color: #6b7085;
}

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

.c-pink {
  color: #ff009e;
}

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

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

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

.f-w-600 {
  font-weight: 600;
}

.f-w-700 {
  font-weight: 700;
}

.spinner-loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner-loader {
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top: 2px solid #0923e6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}

.animate-wave {
  animation-delay: calc(1s - var(--i));
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.zindex-ini {
  z-index: auto;
  z-index: initial;
}

.bot-chat-bubble-container {
  display: flex;
  position: relative;
  padding: 0 38px 0 5px;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0.8rem;
  word-break: break-word;
}

.bot-chat-avatar-container {
  width: 30px;
  height: 30px;
  box-shadow: 0 0 10px rgba(64, 64, 64, 0.12);
  border-radius: 50%;
  margin-right: 10px;
  position: absolute;
  bottom: 14px;
  left: 0;
}

.bot-chat-avatar-container img {
  width: 100%;
}

.bot-chat-message {
  border-radius: 35px 35px 35px 0px;
  /* background: linear-gradient(
    to right,
    #ffda84 0%,
    #ffda84 45.31%,
    #f2cc7b 100%
  ); */
  background: #f2c667;
  background: var(--primary-color);
  padding: 1rem 1.6rem;
  color: #07032b;
  color: var(--primary-text-color);
  font-weight: 600;
  font-size: 14px;
}

.bot-chat-media-message {
  border-radius: 35px 35px 35px 0px;
  color: #07032b;
  font-weight: 600;
  font-size: 14px;
}

.bot-chat-message img,
.bot-chat-media-message img {
  max-width: 90%;
  height: auto;
  border-radius: 5px;
  display: block;
}

.bot-chat-time {
  font-size: 8px;
  color: #bfbfbf;
  font-weight: bold;
  margin-top: 2px;
}

.bot-chat-feedback-container {
  position: absolute;
  right: 0;
  top: 16px;
}

.bot-chat-feedback-icon {
  font-size: 0.65rem;
  margin-right: 4px;
  cursor: pointer;
}

.bot-chat-feedback-icon:before {
  color: #a8a8a8 !important;
}

.bot-chat-feedback-icon-selected:before {
  color: #07032b !important;
  color: var(--primary-color) !important;
}

.bot-chat-message iframe,
.bot-chat-media-message iframe {
  border: none;
  border-radius: 5px;
  max-width: 100%;
}

.bot-chat-media-message a {
  background: #f2c667;
  background: var(--primary-color);
}

/* Add animation (fade in the popup) */

@keyframes bubbleEntry {
  from {
    transform: (scale(0));
  }
  to {
    transform: (scale(1));
  }
}

.user-chat-bubble-container {
  display: flex;
  position: relative;
  padding: 0 5px 0 0;
  max-width: 100%;
  justify-content: flex-end;
  margin-bottom: 0.8rem;
  word-break: break-word;
}

.user-chat-avatar-container {
  width: 30px;
  height: 30px;
  box-shadow: 0 0 10px rgba(64, 64, 64, 0.12);
  border-radius: 50%;
  margin-left: 10px;
  position: absolute;
  bottom: 14px;
  right: 0;
}

.user-chat-avatar-container img {
  width: 100%;
}

.user-chat-message-container {
  text-align: right;
}

.user-chat-message {
  border-radius: 35px 35px 0px 35px;
  background: #c5d2e3;
  background: var(--user-color);
  padding: 12px 24px;
  color: #07032b;
  color: var(--user-text-color);
  font-weight: 600;
  font-size: 0.8rem;
  /* width: max-content; */
  /* float: right; */
  white-space: pre-wrap;
}

.user-chat-time {
  font-size: 8px;
  color: #bfbfbf;
  font-weight: bold;
  margin-top: 2px;
}

.user-button-container {
  text-align: right;
}

.custom-button {
  border-radius: 5px;
  border: none;
  box-shadow: 0px 0px 16px rgba(226, 226, 221, 0.7);
  padding: 8px 24px;
  letter-spacing: 0.08rem;
  font-size: 0.7rem;
  font-weight: bold;
  color: #07032b;
  cursor: pointer;
}

.custom-button:focus {
  outline: none;
}

.grey-button {
  background: #e5e5e0;
}

.primary-button {
  /* background-image: linear-gradient(to right, #ffda84 44.33%, #f2cc7b 100%); */
  background: #f2c667;
  background: var(--primary-color);
  color: #07032b;
  color: var(--primary-text-color);
}

.orange-btn {
  border-radius: 4rem;
  border: none;
  margin: 0.75rem;
  background: #f2c667;
  background: var(--primary-color);
  padding: 0.75rem 2.2rem;
  font-family: Muli;
  font-weight: bold;
  font-size: 0.7rem;
  letter-spacing: 0.08rem;
  text-align: center;
  color: #07032b;
}

.orange-btn:focus {
  outline: none;
}

.text-btn {
  border: none;
  background: transparent;
  font-family: Muli;
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-align: center;
  color: #07032b;
  cursor: pointer;
}

.text-btn:focus {
  outline: none;
}

.disabled-button {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-modal {
  background-color: rgba(149, 149, 149, 0.4);
  z-index: 11;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 180px;
}

/* Modal content */
.chat-modal .modal-content {
  background-color: #f9f9f8;
  width: 70%;
  margin: auto;
  padding: 10px;
  box-shadow: 0px 0px 16px rgba(226, 226, 221, 0.7);
  border-radius: 10px;
  padding: 40px 40px 30px;
  position: relative;
  max-height: 500px;
  font-size: 0.8rem;
}

.chat-modal .modal-title {
  font-size: 1.1rem;
  letter-spacing: 0.03rem;
  font-family: 'Muli';
  font-weight: bold;
  margin-bottom: 30px;
  color: #07032b;
}

.chat-modal .modal-subtitle {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  color: #6a6a6a;
  margin-top: 5px;
}

.chat-modal .modal-button-container {
  text-align: center;
  margin-top: 20px;
}

.chat-modal .modal-button-container button {
  font-size: 0.7rem;
}

/* Close button */
.chat-modal .close {
  color: #07032b;
  margin-right: 0.5rem;
  float: right;
  font-size: 25px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 10px;
}
.chat-modal .close:hover,
.chat-modal .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.custom-input {
  width: 100%;
  border-radius: 3px;
  background: #fff;
  /* box-shadow: 0px 0px 12px rgba(237, 237, 232, 0.8); */
  border: 1px solid #eceff7;
  font-family: Muli;
  font-weight: normal;
  font-size: 16px;
  text-align: left;
  color: #07032b;
  padding: 0.5rem;
  box-sizing: border-box;
}

.custom-input:focus {
  outline: none;
}

.textinput-label {
  font-family: 'Muli';
  font-size: 0.8rem;
  font-weight: bold;
  color: #07032b;
  margin-bottom: 10px;
  display: block;
  letter-spacing: 0.02rem;
}

.textinput-description {
  font-size: 0.65rem;
  color: #6a6a6a;
  font-weight: normal;
  margin-top: 3px;
}

.textinput-container .info-message {
  color: #1e4c88;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 600;
}

.suggestion-button {
  border: none;
  background: #c5d2e3;
  background: var(--button-color);
  border-radius: 3px;
  box-shadow: none;
  cursor: pointer;
  font-family: 'Muli';
  font-size: 0.8rem;
  padding: 6px 18px 7px;
  /* color: var(--primary-text-color); */
  color: #07032b;
  color: var(--button-text-color);
  margin-left: 8px;
  margin-bottom: 10px;
  /* text-align: right; */
  max-width: 250px;
  /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); */
  font-weight: bold;
  letter-spacing: 0.2px;
}

.suggestion-button:focus {
  outline: none;
}

.file-uploader input[type='file'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  font-size: 16px;
}

.file-uploader {
  position: relative;
  border: 1px solid #eceff7;
  background: #fff;
  color: #07032b;
  padding: 0.4rem 2rem 0.5rem 0.5rem;
  border-radius: 3px;
  font-size: 14px;
  max-width: 100%;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-uploader-icon-wrapper {
  background: #1e4c88;
  font-size: 14px;
  padding: 9px 0;
  position: absolute;
  top: -2px;
  height: 38px;
  width: 38px;
  right: 0px;
  border-radius: 0 3px 3px 0;
  text-align: center;
}

.file-uploader-icon-wrapper .icon-attach-file::before {
  color: #fff;
}

.file-uploader-container .selected-file-name {
  font-size: 0.7rem;
  margin-top: 0.2rem;
}

.file-uploader-container .info-message {
  color: #64bfeb;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 600;
}

.file-uploader-container .error-message {
  color: #c34343;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 600;
}

.date-picker-container {
  /* position: relative; */
}

.date-picker-container .DayPicker {
  font-size: 14px;
  background: #fff;
  border-radius: 0.3rem;
}

.date-picker-container .DayPicker-Day {
  height: 30px;
  width: 30px;
  padding: 0;
}

.date-picker-container
  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
    .DayPicker-Day--outside
  ) {
  background: #0ba8a2;
}

.date-picker-button {
  position: relative;
  border: 1px solid #eceff7;
  background: #fff;
  padding: 0.25rem 1.6rem 0.4rem 0.5rem;
  border-radius: 3px;
  font-size: 16px;
  max-width: 100%;
  width: 100%;
  text-align: left;
  color: transparent;
  opacity: 0;
}

.date-picker-icon-wrapper {
  background: #1e4c88;
  font-size: 13px;
  padding: 9px 0;
  position: absolute;
  top: -1px;
  height: 38px;
  right: 0px;
  border-radius: 0 3px 3px 0;
  width: 38px;
  text-align: center;
}

.date-picker-container .date-picker-popover {
  position: absolute;
  top: 0;
  background: #a8a8a8c7;
  z-index: 10;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: table;
}

.display-cell {
  display: table-cell;
  vertical-align: middle;
}

.date-picker-popover-actions {
  margin-top: 1rem;
}

.close-date-picker-button,
.reset-date-picker-button {
  background: #0ba8a2;
  border-radius: 30rem;
  color: #fff;
  border: none;
  font-size: 0.8rem;
  font-family: 'Muli';
  padding: 0.3rem 2.3rem;
  font-weight: bold;
  letter-spacing: 0.02rem;
  margin: 0 0.3rem;
}

.selected-date-preview-item {
  font-size: 0.7rem;
  color: #07032b;
  border: 1px solid #eee;
  padding: 0.2rem 1.3rem 0.25rem 0.5rem;
  border-radius: 10rem;
  position: relative;
  margin-right: 0.5rem;
  font-weight: 600;
  display: inline-block;
}

.selected-date-preview-item-delete {
  position: absolute;
  right: 8px;
  border: none;
  background: none;
  padding: 0;
  font-size: 0.4rem;
  top: 7px;
  cursor: pointer;
}

.selected-date-preview-item-delete .icon-close::before {
  color: #c34343;
}

.selected-dates-preview {
  margin-top: 0.3rem;
}

.date-picker-input-wrapper {
  position: relative;
  max-width: 100%;
  border-radius: 3px;
  border: 1px solid #eceff7;
}

.date-picker-input-helptext {
  font-size: 14px;
  position: absolute;
  top: 7px;
  left: 10px;
}

.dropdown_wrapper {
  position: relative;
}
.dropdown_wrapper label {
  font-family: 'Muli';
  font-size: 0.8rem;
  font-weight: bold;
  color: #07032b;
  margin-bottom: 10px;
  display: block;
  letter-spacing: 0.02rem;
}
.dropdown_text {
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid #d8d8d2;
  border-radius: 5px;
  font-size: 0.8rem;
  color: #07032b;
  font-family: 'Muli';
}
.dropdown_text[readonly] {
  cursor: pointer;
}
.dropdown_text:focus {
  outline: none;
}
.dropdown_menu {
  position: absolute;
  border: 1px solid;
  width: 100%;
  left: 0;
  box-sizing: border-box;
  top: 100%;
  border: 1px solid #ccc;
  z-index: 12;
  max-height: 280px;
  overflow-y: auto;
}

.dropdown_menu_list {
  width: 100%;
  text-align: left;
  padding: 10px;
  border: none;
  background-color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: 'Muli';
  color: #07032b;
}
.dropdown_menu_list:hover,
.dropdown_menu_list.hover {
  background-color: #ccc;
}
.dropdown_wrapper .arrow-down {
  position: absolute;
  top: 18px;
  right: 16px;
  z-index: 1;
  font-size: 0.4rem;
  color: #6a6a6a;
}

.rating-range {
  margin: 8px 0;
  display: flex;
}

.rating-item {
  width: 45px;
  height: 45px;
  border-radius: 3px;
  margin-right: 8px;
  padding: 5px 0 3px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.rating-item:focus {
  outline: none;
}

.rating-item:hover {
  background-color: #eceff7;
}

.rating-item-active-1 {
  border: 1px solid #e53835;
  background-color: #e5383538;
}

.rating-item-active-1:hover {
  background-color: #e5383538;
}

.rating-item-active-2 {
  border: 1px solid #ee6b00;
  background-color: #ee6b003d;
}

.rating-item-active-2:hover {
  background-color: #ee6b003d;
}

.rating-item-active-3 {
  border: 1px solid #fdc00b;
  background-color: #fdc00b38;
}

.rating-item-active-3:hover {
  background-color: #fdc00b38;
}

.rating-item-active-4 {
  border: 1px solid #ccda39;
  background-color: #ccda3942;
}

.rating-item-active-4:hover {
  background-color: #ccda3942;
}

.rating-item-active-5 {
  border: 1px solid #8ac248;
  background-color: #8ac24836;
}

.rating-item-active-5:hover {
  background-color: #8ac24836;
}

.rating-item-img {
  width: 100%;
}

.radio-wrapper {
  display: flex;
  margin-bottom: 5px;
  position: relative;
}

.position-type-radio {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid #cacece;
  padding: 6px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin: 0;
  min-width: 16px;
  margin-top: 4px;
}

.position-type-radio:checked:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 3px;
  left: 3px;
  background: #1e4c88;
  border-radius: 50%;
}

.radio-label {
  font-size: 14px;
  vertical-align: top;
  margin-left: 10px;
  margin-bottom: 0;
}

.quiz-radio-wrapper {
  border: 1px solid #bec5d9;
  border-radius: 5px;
  padding: 10px 20px 10px 40px;
  margin: 0 0 16px;
  cursor: pointer;
  width: 100%;
  /* min-width: 70%; */
}

.radio-wrapper .position-type-radio:checked + label {
  border-color: #1e4c88;
}

.quiz-radio {
  font-size: 0.8rem;
}

.absolute-quiz-radio {
  position: absolute;
  left: 16px;
  top: 9px;
}

.radio-wrapper:last-child .quiz-radio-wrapper {
  margin-bottom: 0;
}

.quiz-radio p {
  margin-bottom: 5px;
}

.form-container {
  padding: 20px 20px 0;
  color: #07032b;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.form-container .go-back-button {
  font-size: 0.8rem;
  background: none;
  cursor: pointer;
  border: none;
  font-weight: bold;
  letter-spacing: 0.03rem;
  padding: 0;
  color: #07032b;
}

.form-container .go-back-button .back-icon {
  display: inline-block;
  margin-right: 5px;
  font-size: 0.6rem;
}

.form-container .control-label {
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  text-transform: none;
  font-weight: bold;
  letter-spacing: 0.03rem;
}

.form-container .form-field-description {
  font-size: 12px;
  margin-bottom: 0.4rem;
  margin-top: -0.3rem;
}

.form-container .form-control {
  border: 1px solid #eceff7;
  font-size: 16px;
  border-radius: 3px;
  padding: 10px 12px 13px;
}

.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #1e4c88;
  border-color: var(--primary-color);
}

.help-block {
  font-size: 0.7rem;
  margin-top: 0.2rem;
}

form {
  margin-top: 10px;
}

.submit-button-container {
  text-align: center;
  padding-bottom: 30px;
}

.form-primary-header,
.form-secondary-header {
  font-size: 14px;
  margin-top: 1rem;
  /* font-weight: 600; */
}

.form-secondary-header {
  margin-top: 0.5rem;
}

.form-container .mandatory-star,
.form-container .required {
  color: red;
  font-size: 0.9rem;
  vertical-align: middle;
  margin-left: 2px;
}

.checkbox input {
  width: 0.8rem;
  height: 0.8rem;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid #cacece;
  padding: 6px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  vertical-align: text-top;
  margin-right: 10px;
  margin-left: 0;
  vertical-align: middle;
}

.checkbox input:checked:after {
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  top: 3px;
  left: 3px;
  background: #1e4c88;
  border-radius: 1px;
}

.checkbox {
  font-size: 0.9rem;
}

.checkbox span {
  font-size: 14px;
  vertical-align: text-top;
  margin-bottom: 0;
}

.checkbox label {
  margin-bottom: 2px;
}

.form-submission-message-page {
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: 0 0 30px;
}

.form-submission-message-page .message-content-wrapper {
  flex: 1 1;
  margin: 20px;
}

.form-submission-message-page .message-content {
  text-align: center;
}

.form-submission-message-page .message-content ul,
.form-submission-message-page .message-content ol {
  text-align: left;
}

.form-submission-message-page .heading {
  margin: 0 0.5rem 0.7rem;
  font-size: 1rem;
  font-weight: bold;
}

.form-submission-message-page .form-submission-message {
  font-size: 0.9rem;
  margin: auto;
  max-height: 300px;
  overflow: auto;
}

.form-submission-message-page .icon-tick,
.form-submission-message-page .icon-warning {
  font-size: 1.5rem;
}

.form-submission-message-page .footer {
  text-align: center;
}

.checkbox-container {
  position: relative;
  font-size: 0.9rem;
}

.checkbox-container .custom-checkbox {
  width: 0.8rem;
  height: 0.8rem;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid #cacece;
  padding: 6px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  vertical-align: text-top;
  margin-right: 0.4rem;
  margin-left: 0;
  vertical-align: middle;
}

.checkbox-container .custom-checkbox:checked:after {
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  top: 3px;
  left: 3px;
  background: #1e4c88;
  border-radius: 1px;
}

.checkbox-container {
  font-size: 0.9rem;
}

.checkbox-label {
  font-size: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0;
}

.quiz-checkbox-wrapper {
  border: 1px solid #bec5d9;
  border-radius: 5px;
  padding: 10px 20px 10px 40px;
  margin: 0 0 16px;
  cursor: pointer;
  width: 100%;
  /* min-width: 70%; */
}

.checkbox-container .custom-checkbox:checked + label {
  border-color: #1e4c88;
}

.quiz-checkbox {
  font-size: 0.8rem;
}

.absolute-quiz-checkbox {
  position: absolute !important;
  left: 16px;
  top: 14px;
}

.checkbox-container:last-child .quiz-checkbox-wrapper {
  margin-bottom: 0;
}

.quiz-checkbox p {
  margin-bottom: 5px;
}

.quiz-generator-container {
  padding: 60px 0px 0px;
  box-sizing: border-box;
  background: #fff url(/static/media/quiz.b410835b6246c1e84989.png) bottom center
    no-repeat;
  background-size: 40%;
  position: relative;
  height: 100%;
  overflow-y: auto;
}

.quiz-generator-container .go-back-button {
  font-size: 0.8rem;
  background: none;
  cursor: pointer;
  border: none;
  font-weight: bold;
  letter-spacing: 0.03rem;
  padding: 0;
  color: #07032b;
  position: absolute;
  left: 30px;
  top: 30px;
}

.quiz-generator-container .go-back-button .back-icon {
  display: inline-block;
  margin-right: 5px;
  font-size: 0.6rem;
}

.quiz-generator-container .quiz-summary {
  text-align: center;
  margin: 20px 10px;
  background: rgba(256, 256, 256, 0.7);
  border-radius: 10px;
}

.quiz-generator-container .quiz-title {
  font-size: 1rem;
  letter-spacing: 0.02rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.quiz-generator-container .quiz-description {
  font-size: 0.9rem;
  font-family: 'Muli';
  letter-spacing: 0.02rem;
}

.quiz-generator-container .quiz-description-important {
  font-size: 0.8rem;
  color: #c34343;
  font-weight: bold;
}

.quiz-generator-container .quiz-navigation-bar {
  padding: 24px 0;
  text-align: center;
  display: flex;
  justify-content: space-between;
}

.quiz-generator-container .quiz-submit-bar {
  padding: 20px 0;
  text-align: center;
}

.quiz-generator-container .quiz-questions {
  background: rgba(256, 256, 256, 0.9);
  padding: 0px 10px 30px;
  border-radius: 10px;
  overflow-y: auto;
  height: 100%;
}

.quiz-generator-container .quiz-question-text {
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.quiz-generator-container .quiz-question-text p {
  margin-bottom: 5px;
}

.quiz-generator-container .inside-quiz-heading {
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.02rem;
}

.quiz-generator-container .custom-input {
  border-color: #cdd8e6;
}

.quiz-generator-container .question-container {
  padding: 24px 0;
}

.quiz-generator-container .single-question-manager .question-container {
  min-height: 200px;
}

.quiz-generator-container .next-animation {
  animation: next-slide 0.3s;
}

.quiz-generator-container .previous-animation {
  animation: previous-slide 0.3s;
}

.quiz-generator-container .single-question-manager {
  overflow: hidden;
}

.quiz-navigation-button__chat-widget {
  background: none;
  border: 1px solid #03a8f4;
  border-radius: 5px;
  padding: 0.6rem 2.2rem;
  font-size: 14px;
  font-weight: bold;
  color: #03a8f4;
  cursor: pointer;
}

.quiz-generator-container .quiz-submit-btn {
  border-radius: 5px;
}

.quit-btn-container__chat-widget {
  position: absolute;
  top: 20px;
  right: 0px;
}

.quit-btn {
  font-size: 0.7rem;
  font-weight: bold;
  color: #c34343;
  border: 1px solid #c34343;
  background-color: #fff;
  border-radius: 3rem;
  padding: 0.2rem 1rem 0.3rem;
  letter-spacing: 0.03rem;
}

.quiz-summary .quiz-navigation-bar {
  justify-content: space-evenly;
}

.quiz-generator-container td {
  padding: 5px 16px;
  border: 1px solid #ccc;
}

.quiz-generator-container table {
  border-collapse: collapse;
}

.quiz-navigation-button__chat-widget[disabled] {
  border-color: #ccc;
  color: #ccc;
}

.se-image-container img {
  max-width: 100%;
}

.question-score-container {
  text-align: right;
  margin-bottom: 8px;
  font-weight: 600;
  color: #c34343;
  font-size: 0.8rem;
}

.quiz-generator-container .quiz-loading-gif-container {
  width: 100%;
  text-align: center;
  padding: 120px 0;
}

.quiz-generator-container .quiz-loading-gif {
  max-width: 50px;
  margin: auto;
}

@keyframes next-slide {
  0% {
    transform: translateX(-100px);
    opacity: 0.6;
  }
  20% {
    transform: translateX(-400px);
    opacity: 0.3;
  }
  40% {
    transform: translateX(-600px);
    opacity: 0;
  }
  60% {
    transform: translateX(600px);
    opacity: 0.3;
  }
  80% {
    transform: translateX(300px);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes previous-slide {
  0% {
    transform: translateX(100px);
    opacity: 0.6;
  }
  20% {
    transform: translateX(300px);
    opacity: 0.3;
  }
  40% {
    transform: translateX(600px);
    opacity: 0;
  }
  60% {
    transform: translateX(-600px);
    opacity: 0.3;
  }
  80% {
    transform: translateX(-300px);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.custom-icon-label-button {
  border: none;
  font-family: 'Muli' !important;
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 0.02rem;
  color: #1e4c88;
  cursor: pointer;
  background: none;
}

.custom-icon-label-button:focus {
  outline: none;
}

.custom-icon-label-button-icon {
  margin-right: 5px;
}

.custom-icon-label-button .download-link {
  text-decoration: none;
  color: #1e4c88;
}

.custom-icon-label-red {
  color: #a71b04;
}

.custom-icon-label-button .icon-add::before {
  color: #1e4c88;
}

.markdown-label {
  font-size: 0.8rem;
  font-weight: bold;
  color: #07032b;
  color: var(--text-color);
  margin-bottom: 16px;
  display: block;
  letter-spacing: 0.02rem;
}

.markdown-description {
  font-size: 0.7rem;
  color: #5f5d73;
  color: var(--light-text-color);
  font-weight: normal;
  margin-top: 3px;
}

.markdown-container .markdown-error {
  color: #c34343;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 600;
}

.rdw-editor-main {
  background: #fff;
  padding: 16px;
  font-size: 0.9rem;
  border-radius: 5px;
  /* border: 1px solid #eceff7; */
}

.rdw-image-alignment,
.rdw-image-imagewrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.rdw-image-alignment img,
.rdw-image-imagewrapper img {
  width: 100%;
}

.rdw-editor-main figure {
  margin: 0;
}

.markdown-container {
  width: 100%;
}

.markdown-editor-wrapper {
  border: 1px solid #bec5d9;
  border-radius: 5px;
  background-color: #fff;
}

.rdw-editor-toolbar {
  border: none;
  border-bottom: 1px solid #eceff7;
  margin-bottom: 0;
  border-radius: 5px;
}

.markdown-toolbar-option img {
  width: 16px;
}

.public-DraftStyleDefault-block {
  margin: 0;
}

.rdw-dropdown-wrapper:hover,
.rdw-option-wrapper:hover {
  box-shadow: none;
  border-color: #bec5d9;
}

.rdw-dropdown-wrapper,
.rdw-option-wrapper {
  border-color: #eceff7;
}

.rdw-link-modal,
.rdw-emoji-modal {
  border-color: #f9fafd;
  box-shadow: 3px 3px 8px rgba(215, 214, 230, 0.5);
}

.rdw-image-modal-size {
  display: none;
}

.markdown-container input {
  border: 1px solid #bec5d9 !important;
  border-radius: 3px !important;
  margin-bottom: 0 !important;
}

.rdw-link-modal {
  height: auto;
  width: 280px;
}

.link-modal-action-bar {
  padding: 32px 16px 8px;
  text-align: center;
}

.link-modal-action-bar .custom-icon-label-button {
  margin: 0 16px;
  color: #1e4c88 !important;
}

.rdw-variable-menu {
  width: 180px;
  padding: 0;
}

.rdw-variable-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.8rem;
}

.rdw-variable-menu-item:hover {
  background-color: #f1f1f1;
}

.input-card-wrapper-anchor {
  display: flex;
  width: 100%;
  /* margin-bottom: 32px; */
  color: #151418;
}

.input-card-wrapper-anchor:last-child {
  /* margin-bottom: 0; */
}

.input-card {
  background-color: #fff;
  /* box-shadow: 3px 0 10px rgba(215, 214, 230, 0.5); */
  position: relative;
  border-radius: 0 10px 10px 0;
  flex: 1 1;
}

.input-card .textinput-container {
  width: 100%;
}

.input-card .textinput-container textarea {
  overflow: hidden;
  resize: none;
  border: none;
  border-bottom: 1px solid #eceff7;
  border-radius: 0;
  background-color: transparent;
  min-height: 36px;
}

.input-card input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #eceff7;
  border-radius: 0;
  margin-bottom: 10px;
  background-color: transparent;
}

.input-card .markdown-container .textinput-container input {
  border: 1px solid #bec5d9;
  border-radius: 3px;
  margin-bottom: 0;
}

/* .input-card:hover {
    transition: all 0.1s ease;
    border: 1px solid var(--secondary-color);
    backface-visibility: hidden;
  } */

.input-card-close-button {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 12px;
  z-index: 1;
  font-size: 0.7rem;
}

.input-card-close-button .icon-close::before {
  color: #07032b;
  color: var(--text-color);
}

.input-card-close-button:focus {
  outline: none;
}

.input-card-label {
  margin-right: 0.5rem;
  font-weight: bold;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-top: 1px;
}

/* .input-card-wrapper-anchor:focus-within .input-card {
    border: 1px solid var(--secondary-color);
  } */

.input-card-wrapper-anchor .add-button-container {
  text-align: right;
  width: 100px;
  margin-left: 8px;
  box-sizing: border-box;
  padding: 16px 0;
}

.input-card .primary-section,
.input-card .secondary-section,
.input-card .primary-add-section,
.input-card .secondary-add-section {
  padding: 5px 16px 5px 8px;
  position: relative;
}

.input-card .number-section-label {
  padding-top: 7px;
  color: #07032b;
}

.input-card .primary-add-section input {
  border-color: #1e4c88;
  border-color: var(--secondary-color);
}

.input-card .primary-section {
  /* background-color: #f1f7ff;number-section-label */
}

.input-card .primary-add-section {
  background-color: #d6e2f4;
}

.input-card .secondary-section {
  background-color: #fcfcf7;
}

.input-card .secondary-add-section {
  background-color: #f7f7ee;
}

.input-card .primary-section-label,
.input-card .secondary-section-label {
  position: absolute;
  left: -25px;
  top: 0;
  font-size: 0.7rem;
  color: #fff;
  font-weight: 600;
  padding: 5px;
  border-radius: 16px 0px 0 16px;
  width: 16px;
  height: 57px;
}

.input-card .primary-section-label span,
.input-card .secondary-section-label span {
  transform: rotate(-90deg);
  display: inline-block;
  position: absolute;
  left: -12px;
  top: 24px;
  width: 48px;
  text-align: center;
}

.input-card .secondary-section-label span {
  left: -17px;
}

.input-card .primary-section-label {
  background-color: #1e4c88;
  background-color: var(--secondary-color);
}

.input-card .secondary-section-label {
  background-color: #8d8d79;
}

.input-card .textinput-container input:focus {
  border-top: none;
  border-left: none;
  border-right: none;
}

.input-card .markdown-container .textinput-container input:focus {
  border: 1px solid #bec5d9;
}

.bullet-editor {
  box-sizing: border-box;
  border: 1px solid #bec5d9;
  padding: 8px;
  text-align: center;
  background-color: #fff;
  border-radius: 5px;
  transition: all 0.5s ease-in-out;
}

.bullet-editor .bullet-editor-instruction {
  text-align: left;
  font-size: 0.7rem;
  padding: 0px 28px 0;
  font-weight: 600;
  color: #03a8f4;
}

.quiz-table-editor-wrapper {
  /* border: 1px solid #bec5d9;
  background-color: #fff; */
  border: 1px solid #bec5d9;
  width: 100%;
  /* border-radius: 5px; */
  /* overflow: hidden; */
}

.quiz-table-editor-wrapper .quiz-table {
  width: 100%;
}

.quiz-table-editor-header-row,
.quiz-table-editor-row {
  /* display: table-row; */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.quiz-table-editor-row,
.quiz-table-editor-header-row {
  border-bottom: 1px solid #bec5d9;
  position: relative;
}

.quiz-table-editor-row:last-child {
  border-bottom: none;
}

.quiz-table-editor-header-row .quiz-table-header-cell-wrapper,
.quiz-table-editor-row .quiz-table-row-cell-wrapper {
  /* width: 300px; */
  display: table-cell;
  background-color: #fff;
  vertical-align: top;
  padding: 0;
  /* border-right: 1px solid #f9b234; */
}

.quiz-table-editor-row .column-header-cell-wrapper {
  /* max-width: 300px; */
  display: table-cell;
  background-color: #eceff7;
  vertical-align: top;
  font-weight: bold;
  font-size: 0.8rem;
  padding: 8px;
  border: none;
  /* border-right: 1px solid #f9b234; */
}

.quiz-table-editor-header-row .quiz-table-header-cell-wrapper {
  position: relative;
}

.quiz-table-editor-header-row
  .quiz-table-header-cell-wrapper:hover
  .column-toolbar {
  display: block;
}

.quiz-table-editor-header-row .quiz-table-header-cell-wrapper:last-child,
.quiz-table-editor-row .quiz-table-row-cell-wrapper:last-child,
.quiz-table-editor-row .column-header-cell-wrapper:last-child {
  border-right: none;
}

.quiz-table-editor-header-row .quiz-table-header-cell-wrapper input {
  background-color: #eceff7;
  border-radius: 1px;
  border: none;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 0.8rem;
}

.quiz-table-editor-row .quiz-table-row-cell-wrapper textarea,
.quiz-table-editor-row .column-header-cell-wrapper textarea {
  border-radius: 0px;
  border: none;
  /* border-right: 1px solid #f9b234; */
  font-size: 0.8rem;
  padding: 8px 16px;
  resize: none;
  height: 100%;
}

.quiz-table-editor-row .column-header-cell-wrapper textarea {
  background-color: #eceff7;
  font-weight: bold;
}

.quiz-table-editor-row .quiz-table-row-cell-wrapper:last-child textarea,
.quiz-table-editor-row .column-header-cell-wrapper:last-child textarea {
  border: none;
}

.quiz-table-header-disabled-cell {
  background-color: #eceff7;
  border-radius: 1px;
  border: none;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 0.8rem;
  /* width: 300px; */
  display: table-cell;
}

.quiz-table-editor-row:hover .quiz-table-editor-row-actions {
  display: block;
}

.quiz-table-editor-row-actions {
  position: absolute;
  right: -72px;
  z-index: 1;
  top: 8px;
  display: none;
  padding: 0 8px;
  min-width: 60px;
}

.quiz-table-editor-row-actions .toolbar-btn {
  border: none;
  background-color: transparent;
  height: 30px;
  width: 30px;
  margin-right: 0px;
  cursor: pointer;
  padding: 0;
}

.quiz-table-editor-row-actions .icon-delete {
  color: #c34343;
  font-size: 0.75rem;
}

.column-remove-btn,
.column-convert-header-btn {
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0 5px;
}

.column-toolbar {
  position: absolute;
  right: 0;
  top: 6px;
  display: flex;
  display: none;
}

.column-remove-btn .icon-delete {
  color: #c34343;
  font-size: 0.75rem;
}

.no-justify-flex {
  justify-content: left !important;
}

.quiz-table-editor-add-column-btn-wrapper {
  padding: 8px 4px;
  min-width: 115px;
}

.description-editor-wrapper {
  /* border: 1px solid #bec5d9;
  background-color: #fff; */
  border: 1px solid #bec5d9;
  width: 100%;
  /* border-radius: 5px; */
  /* overflow: hidden; */
}

.description-editor-wrapper .table-row-cell-wrapper {
  /* border-right: 1px solid #bec5d9; */
}

.table-row-cell-wrapper:last-of-type {
  border-right: none;
}

.description-editor-wrapper .table-header-cell-wrapper {
  position: relative;
}

.description-editor-wrapper .table-header-cell-wrapper:hover .column-toolbar {
  display: block;
}

.description-editor-wrapper .table-header-cell-wrapper:last-child,
.description-editor-wrapper .table-row-cell-wrapper:last-child,
.description-editor-wrapper .column-header-cell-wrapper:last-child {
  border-right: none;
}

.description-editor-wrapper .table-header-cell-wrapper textarea {
  background-color: #eceff7;
  border-radius: 0px;
  border: none;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 0.8rem;
  resize: none;
}

.description-editor-wrapper .table-row-cell-wrapper textarea {
  border-radius: 0px;
  border: none;
  /* border-right: 1px solid #f9b234; */
  font-size: 0.8rem;
  padding: 8px 16px;
  resize: none;
  height: 100%;
}

.description-editor-wrapper .column-header-cell-wrapper textarea {
  background-color: #eceff7;
  font-weight: bold;
}

.description-editor-wrapper .description-editor-row {
  background-color: #fff;
  vertical-align: top;
}

.description-editor-wrapper .table-row-cell-wrapper:last-child textarea,
.description-editor-wrapper .column-header-cell-wrapper:last-child textarea {
  border: none;
}

.table-header-disabled-cell {
  background-color: #eceff7;
  border-radius: 1px;
  border: none;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 0.8rem;
  width: 300px;
  display: table-cell;
}

.description-editor-wrapper:hover .description-editor-wrapper-actions {
  display: block;
}

.description-editor-wrapper-actions {
  position: absolute;
  right: -72px;
  z-index: 1;
  top: 8px;
  display: none;
  padding: 0 8px;
  min-width: 60px;
}

.description-editor-wrapper-actions .toolbar-btn {
  border: none;
  background-color: transparent;
  height: 30px;
  width: 30px;
  margin-right: 0px;
  cursor: pointer;
  padding: 0;
}

.description-editor-wrapper-actions .icon-delete {
  color: #c34343;
  font-size: 0.75rem;
}

.column-remove-btn,
.column-convert-header-btn {
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0 5px;
}

.column-toolbar {
  position: absolute;
  right: 0;
  top: 6px;
  display: flex;
  display: none;
}

.column-remove-btn .icon-delete {
  color: #c34343;
  font-size: 0.75rem;
}

.no-justify-flex {
  justify-content: left !important;
}

.description-editor-add-column-btn-wrapper {
  padding: 8px 4px;
  min-width: 115px;
}

.description-editor-row-actions {
  position: absolute;
  right: -72px;
  z-index: 1;
  top: 8px;
  display: none;
  padding: 0 8px;
  min-width: 60px;
}

.description-editor-row-actions .toolbar-btn {
  border: none;
  background-color: transparent;
  height: 30px;
  width: 30px;
  margin-right: 0px;
  cursor: pointer;
  padding: 0;
}

.description-editor-row-actions .icon-delete {
  color: #c34343;
  font-size: 0.75rem;
}

.drag-match-editor-wrapper .drag-match-definition-list {
  border: 1px solid #eceff7;
  background-color: #fff;
  padding: 16px;
  border-radius: 10px;
  max-width: 100%;
}

.drag-match-editor-wrapper .smooth-dnd-container {
  /* border: 1px solid #eceff7; */
  background-color: #fff;
  border-radius: 10px;
  /* padding: 16px; */
  max-width: 100%;
  min-width: 300px;
}

.drag-match-editor-wrapper .drag-card {
  background-color: #fff;
  /* box-shadow: 0 0 16px rgba(215, 214, 230, 0.5); */
  background-color: #f4f6fb;
  padding: 12px;
  border-radius: 5px;
  margin: 4px;
  font-size: 0.8rem;
  cursor: grab;
}

.drag-match-editor {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eceff7;
}

.drag-match-editor-scroll {
  overflow: scroll;
}

.drag-match-editor table {
  width: 100%;
}

.drag-match-editor td {
  min-width: 300px;
  border: 1px solid #eceff7;
  vertical-align: middle;
  /* border-radius: 5px; */
  font-size: 0.8rem;
}

.drag-match-editor .smooth-dnd-container {
  background-color: transparent;
  border-radius: 3px;
  border: none;
  padding: 0;
  min-height: 40px;
}

/* .drag-match-editor .smooth-dnd-container::before {
  content: "Drop here";
  width: 100px;
  font-size: 0.8rem;
  color: #5f5d73;
  position: absolute;
  z-index: -1;
  top: 8px;
  left: 8px;
} */

.drag-match-editor th {
  border: none;
  font-size: 0.8rem;
  padding: 12px;
  background-color: #eceff7;
  width: 50%;
}

.drag-match-editor-wrapper .smooth-dnd-container.horizontal {
  display: flex;
  flex-wrap: wrap;
}

.drag-match-editor-wrapper .target-drop-placeholder {
  border: 1px dashed #5f5d73;
  border-radius: 3px;
}

.drag-match-editor .target-drop-cell {
  position: relative;
}

.drag-match-editor .target-drop-cell .placeholder {
  position: absolute;
  top: 50%;
  left: 24px;
  font-size: 0.8rem;
  color: #5f5d73;
}

/* Style the accordion section */

.accordion-section {
  display: flex;
  flex-direction: column;
  border: 1px solid #eceff7;
  border-radius: 5px;
  margin-bottom: 24px;
}

/* Style the buttons that are used to open and close the accordion panel */

.accordion {
  background: none;
  color: #07032b;
  cursor: pointer;
  border: none;
  outline: none;
  transition: background-color 0.2s ease;
  padding: 16px 40px 16px 20px;
  position: relative;
  text-align: left;
  line-height: 16px;
}

.accordion-section .active {
  border-bottom: 1px solid #eceff7;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

.accordion:hover,
.active {
  background: none;
}

/* Style the accordion content title */

.accordion-title {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin: 0;
  color: #07032b;
  margin-bottom: 3px;
}

.accordion-title-icon {
  font-size: 20px;
  margin-right: 16px;
}

.accordion-description {
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.02rem;
  color: #5f5d73;
}

/* Style the accordion chevron icon */

.accordion-icon {
  transition: transform 0.6s ease;
  color: #07032b;
  position: absolute;
  right: 20px;
  top: 0px;
  bottom: 0;
  margin: auto;
}

/* Style to rotate icon when state is active */

.rotate {
  transform: rotate(90deg);
}

/* Style the accordion content panel. Note: hidden by default */

.accordion-content {
  background: none;
  /* overflow: hidden; */
  transition: max-height 0.6s ease;
  padding: 20px;
}

/* Style the accordion content text */

.accordion-text {
  padding: 18px;
  font-weight: normal;
  font-size: 14px;
  text-align: left;
}

.accordion-summary {
  display: flex;
}

.accordion-title-wrapper {
  margin-top: 2px;
}

.accordion-section .flex-container {
  display: flex;
  justify-content: space-between;
}

.accordion-section .accordion-actions {
  padding: 0px 10px 0px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.accordion-section .accordion-actions .inner {
  display: flex;
  justify-content: space-between;
}

.accordion-actions .custom-button {
  padding: 3px 16px 4px;
  text-transform: capitalize;
  font-size: 0.7rem;
  border-radius: 5px;
  border-width: 1px;
}

.quiz-submission-page__chat-widget {
  padding: 30px;
  box-sizing: border-box;
  position: relative;
  height: 100%;
  overflow-y: auto;
  text-align: center;
  background-color: #fff;
}

.quiz-submission-page__chat-widget h4 {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
}

.quiz-submission-page__chat-widget .score-badge {
  width: 100px;
  height: 100px;
  margin: 24px auto 32px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABhCAYAAADP7W/ZAAAACXBIWXMAAAsSAAALEgHS3X78AAAHtElEQVR4nO2dW2xURRjH/7vsrQVaaBpuYguFBGhKuwgECRsg4YHEF6sxEZ6KERP1AWuiiSYYi5c3EzD4YBRDSbxANErj9UFMGzZRMZVuASFaLhsiEAItK+32spdjZs/ZsmW658y5zZ7Dzu+p+eZsu5l/53K+75tvPJIkwRHEHonAG9gLf80G+GZXw+P35L5W+r9RZEauITP8JVb//rqprxr17ALQCiAMoF6xxgH0AegG0ImIdIf6HGdKL0rv0mZUNHyN4MJlVNv9ZJJpjF19Fc1/HKDa1JDFIJ+pVnmKkFCeO1BKcUorSt/q3ZjV+NHkqGBl/HoXGk+0Mj0d9XQCaKPs6sQA7EJE6lN9yiZKJ4osyMfw+KkmJliEMSZInkRumotIV6gWm/Hy/oM5yJQljxCqiZngwsdxNrK36ONRT7sJQaBMdccpKwdKIwpZQ/ROWdMReugt9K9vp1pkQfZTdv20KOsRV/hPX2SUzNkUo+xmSN8dRnqoF0Mnu5XdVYuFvz2OiLSEstqIj+cfy+GvfY2ymcU3exZ8s7cA2GLDN65H1BPmuejzn768wQ2Uzfls5dpFlMVufFU1blDhPuZQFhspzUIvUIW/KFI2RNmcD9eFnq8oZOcVqHWjKA/wmlKx9DvK5g7IDqyD1zc1tyWOhevhDT4Pb3DjpE3KDCE7dhTNvcemPOevOYngooep3+Ee3kQ097471VkZ9WydZiTJXmeDTk1jL4+nVz6G4KIPVTuZeHSzY8O5n/01fHYv1z+jTDaQUDodSgigmOc5obhpOvT6z/SLcubRn1C5fDtldwJ8RNELEacdEamT9XP61pS/tg04VhDnQkbSYT0+NHZRyAhhCUQJikGEUQ816BKlt2GHGCGW0ImoR3N9ZRMlVKcv/CooRnVufdFAWxSS0BBaPJ+yC4yiubZoi+KZ8SJlE5hBDgWowCCKr5GyCcyi6rbRFsU/t56yCcyiuthriyKl0pRNYCvaomSSFymbwCyqbhdtUbJjpyibwCyq8X5tUVKDhyibwAxxrSQMbVHWXu7H+HUxhVmHZlyG7Y1+9NKTkFIOSc93NTEWbzGbKGS0jFw4TNkFemHyFLN7iVtizyKdmKDsAlaOsCb06YunTNw6T9kErHSzPqhPFK8/QNkElqNPFF+1CHIZR9XfVQi7KP3rP4evWowU47RpeYfzsIlydtM3mLliJ2UX6KVbSUlSpXg2Cwlu+aoOwl/ThBmV/I9MGMGZ2SzTEcuFhoucRqZFIYlzvjnHEVrMNNQchXtEyZNQ8sKmhNunTl9EkFDdeVcK4k6qc8cA5QOzk9wTJS+Ir6qi3HuqBLQVCnNPFF/Vj0KQktKmHKBVRCG5waG6VeXaGw6ig+SFyaIE5r1X7r3hEMga0yqL4q9dUe694SBavYh6lmBGpTj76BzCXlStYys8I+BFvRghDsSL1O0b5d4JTsOLtZeOlnsnOIweefoav5Eo955wEH2yKJmRr8q9JxxEpyxK4rdXcqd5BaWmiyRXyKIQn37ynxeEJCUlkT/ldW9LHD5zCMmLn5RjbziARC6Gr5y3n/qesvrX3Rg5f1BkQ3IlrggymRNGvzw29+5B4lQ4lz8spahmgWWQ0bFPqeg6JUmPDgcXkqu9UvEGggvbXBGnd0c4uEep71K0kqu6KHnI2e+abVcQXFCsDokzcL4oJHXVgtPBUHZnoxc3i+nMFHEWQaArGY9k3qcGb1F2ASs2FczJjp+jbAJWbErwhnclZRKwYkMuMan/GJwvyoEYx4bSUjNX9Zi6MEBAyn8wFR5iE+XMxkPcSg4+2LzEknnPJgp5eRRYhQWlpU6vfNk1WffuoE2rEJu2KIF5j1M2gVlUpzCGgjnZ4mVuBUZR3R5ri+LOWxxcjbYo6TsjlE1gKyyV8QYom8AsqkUOtEWZuNlF2QRmUfWDaYuy5sJ+ZJJZyi4wStd0h0/1iUIYi39L2QRG0XS1sInS3Nuau1hZYBYSeVSduthFIST/fkpkuZgixuJigS5R1lz4AcmBnWJ9MURMSSNSXUvy6AtykduDRi81YPzaVapNUIx9iEhhPbcOGb+mlpwoDix4F76qFVOOekupLFJDN5G++z2k9NmczRvYgdDiDbbHY+zPZkkoNSALbxpqnebGoR7llqHjRm7p5nd3cP/ap1G5/AtLLnIuhr2i6JqCzMDveB2Z+pIDH1B299DKQxBwv1KQpMRmXOlK6zEyDRmF/0HU7DiX/zaLYU4PsgJxOtiBlODuYHHLhBb8RXHnLROqrnar4S9K6vYxyuZ8HvA1RQ4FWDeFpQbvYPTyc1j2qQcRibwDPaG8U1jFEV5b4Tz8Xh4LiYX3YlbT25RdL+S0WeOJ5dSn5BQe8t/dQrXpZynP7TBKtvtq6XvH9PUfJJSQur2NskM5TyO7P8wWbXiGtyAo6ZZ48Jd1hh2bmdEJSKntaOmLU2155M7cakKY9/VcwmwlpZm+Cjm3uRuhui2UvRipoVsY/3edqiCFyLm7nTqmMt23YltN6UWBUpjaP7cTgdqGog7L9N1hpAYPo+nkHqqNBfmW645c9vv0xBXxDvBe2O/HGaIU0r++HR5fE7x+eQGXsj8jk+xGy59RS36/PHKWFKSOkmmuj/VuE9sB8D8581R/854NPwAAAABJRU5ErkJggg==);
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  padding: 30px 0;
}

.quiz-submission-page__chat-widget .score-container {
  width: 100%;
  text-align: center;
}

.quiz-submission-page__chat-widget .button-container {
  text-align: center;
  margin: 16px 0 32px;
}

.quiz-submission-page__chat-widget .total-score-number {
  font-size: 0.65rem;
}

.quiz-submission-page__chat-widget h5 {
  font-weight: bold;
  font-size: 0.8rem;
}

.quiz-submission-page__chat-widget .correct-answers-container {
  margin-top: 40px;
}

.quiz-submission-page__chat-widget
  .correct-answers-container
  .accordion-section {
  background: #fff;
}

.quiz-submission-page__chat-widget
  .correct-answers-container
  .accordion-content {
  background-color: #fbfbfb;
}

.quiz-submission-page__chat-widget .answer-table-question,
.quiz-submission-page__chat-widget .answer-table-question * {
  text-align: left;
  font-size: 0.8rem !important;
  white-space: pre-wrap;
}

.quiz-submission-page__chat-widget .answer-table-subquestion {
  font-weight: bold;
}

.quiz-submission-page__chat-widget .main-action-container {
  margin: 32px 0;
}

.quiz-submission-page__chat-widget .condition-message {
  font-weight: bold;
  font-size: 0.8rem;
  text-align: left;
}

.quiz-submission-page__chat-widget .condition-message a {
  color: blue;
}

.quiz-submission-page__chat-widget .condition-buttons {
  text-align: left;
  border-bottom: 1px solid #eceff7;
  padding-bottom: 8px;
}

.quiz-submission-page__chat-widget .condition-buttons .suggestion-button {
  margin-left: 0;
  margin-right: 16px;
  margin-bottom: 16px;
  font-weight: 600;
  letter-spacing: 0.01rem;
}

.quiz-submission-page__chat-widget table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.quiz-submission-page__chat-widget th,
td {
  padding: 3px 8px;
}

.correct-answer-record-container .notify-block {
  color: #26ad6a;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 8px;
}

.quiz-submission-page__chat-widget .question-conditions-container {
  background-color: #eceff7;
  padding: 0px 24px;
  margin: 16px 16px 0;
}

.quiz-submission-page__chat-widget .page-main-heading {
  font-weight: bold;
  font-size: 0.9rem;
  text-align: left;
  margin: 0 0 16px;
  text-decoration: underline;
}

.user-details-form-container__chat-widget {
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 20px) !important;
  overflow-y: auto;
  margin: 24px 24px 0;
}

.user-details-form-container__chat-widget .form-container {
  padding: 20px 0px 0;
  color: #07032b;
  height: 100%;
  overflow-y: visible;
  overflow-y: initial;
  box-sizing: border-box;
}

.user-details-form-container__chat-widget .form-header {
  position: relative;
  background: #f9b234;
  background: var(--primary-color);
  background-position: center bottom -40px;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px 20px 2px 2px;
  /* margin: 16px 16px 0; */
}

.user-details-form-container__chat-widget .message-header {
  padding: 32px;
  color: #fff;
  color: var(--primary-text-color);
  border-radius: 5px 5px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.03rem;
  text-align: center;
  font-weight: 600;
  max-width: 500px;
  margin: auto;
}

.user-details-form-container__chat-widget .user-details-form-close {
  position: absolute;
  right: 19px;
  top: 8px;
  z-index: 1;
}

.user-details-form-container__chat-widget .header-avatar-wrapper {
  height: 60px;
  width: 60px;
  /* background-color: #fff; */
  /* border-radius: 50%; */
  margin: 0 auto 20px;
}

.user-details-form-container__chat-widget .header-avatar-wrapper img {
  max-width: 100%;
  max-height: 100%;
}

.user-details-form-container__chat-widget .form-header .wave-wrapper {
  position: absolute;
  bottom: calc(0px - 400px);
  left: 0;
  width: 100%;
}

.user-details-form-container__chat-widget .form-header .wave-wrapper img {
  min-width: 100%;
}

@media only screen and (min-width: 600px) {
  .user-details-form-container__chat-widget .form-header {
    background: #f9b234;
    background: var(--primary-color);
  }

  .user-details-form-container__chat-widget .message-header {
    padding: 40px;
  }
}

.bot-quiz-bubble-container {
  position: relative;
  width: -webkit-max-content;
  width: max-content;
  max-width: 90%;
}

.bot-bubble {
  display: flex;
  position: relative;
  /* padding-left: 50px; */
}

.bot-quiz-bubble-wrapper .loading-bubble {
  background: #fff;
  background: var(--primary-color);
  padding: 12px 24px;
  color: #07032b;
  color: var(--primary-text-color);
  font-weight: 600;
  font-size: 0.85rem;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
  word-break: break-word;
  border-radius: 5px;
}

.bot-quiz-bubble-container a {
  color: #07032b;
  text-decoration: underline;
}

.bot-quiz-bubble-wrapper {
  margin-bottom: 24px;
}

.bot-followed-reply-wrapper {
  margin-bottom: 8px;
  margin-top: 8px;
}

.bot-quiz-bubble-container i {
  font-size: 0.9rem;
  color: #ffffff;
  color: var(--primary-text-color);
}

.bot-quiz-bubble-feedback-icon {
  font-size: 0.65rem;
  margin-right: 4px;
  cursor: pointer;
}

.bot-chat-avatar-container {
  width: 38px;
  height: 38px;
  box-shadow: 0 0 10px rgba(215, 214, 230, 0.5);
  border-radius: 50%;
  margin-right: 8px;
  position: absolute;
  bottom: 0px;
  left: 0;
  min-width: 35px;
  min-height: 35px;
  padding: 0px;
  background: #fff;
  overflow: hidden;
}

.bot-chat-avatar-container .bot-avatar-img {
  width: 100%;
}

.bot-quiz-bubble-container a {
  color: #07032b;
  text-decoration: underline;
}

.bot-quiz-bubble-container .quiz-question-frame p {
  margin: 0;
}

.bot-quiz-bubble-container .quiz-question-frame {
  border: 1px solid #f9b234;
  border: 1px solid var(--primary-color);
  padding: 12px 16px;
  color: #07032b;
  font-weight: 600;
  font-size: 0.85rem;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
  word-break: break-word;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 12px rgba(215, 214, 230, 0.5);
}

.bot-quiz-bubble-wrapper .bot-quiz-input-container {
  width: 100%;
}

.bot-quiz-input-container .quiz-text-input-frame {
  /* max-width: 500px; */
  transition: all 0.1s ease-in-out;
  margin-top: 16px;
  /* margin-left: 48px; */
  padding-right: 3px;
}

.bot-quiz-input-container .send-button .icon-send {
  position: absolute;
  left: 17px;
  top: 14px;
}

.bot-quiz-input-container .send-button .icon-send::before {
  color: #fff;
  color: var(--primary-text-color);
  display: inline-block;
  transform: rotate(-45deg);
}

.bot-quiz-input-container .send-button:focus {
  outline: none;
}

.bot-quiz-input-container .send-button {
  border: none;
  background: #f9b234;
  background: var(--primary-color);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  color: #fff;
  color: var(--primary-text-color);
  box-shadow: 0 0 16px rgba(215, 214, 230, 0.8);
  padding: 5px;
  border-radius: 50%;
  height: 48px;
  width: 48px;
  position: relative;
  margin-left: 12px;
}

.bot-quiz-input-container .send-button:disabled,
.bot-quiz-input-container .send-button[disabled] {
  background: #bbb;
  opacity: 0.5;
}

.bot-quiz-input-container .quiz-text-input-action {
  text-align: right;
  padding: 16px 0;
}

.bot-quiz-input-container .quiz-table-input-action {
  text-align: right;
  padding: 16px 0;
}

.bot-quiz-input-container .quiz-option-input-frame .quiz-option-btn {
  display: block;
  margin-bottom: 8px;
  border: none;
  background-color: #c5d2e3;
  background-color: var(--button-color);
  padding: 8px 16px;
  border-radius: 5px;
  box-shadow: 0 0 24px rgba(215, 214, 230, 0.5);
  width: 100%;
  min-width: 200px;
  max-width: -webkit-max-content;
  max-width: max-content;
  font-weight: 600;
  font-size: 0.85rem;
}

.bot-quiz-input-container .quiz-option-input-frame {
  margin-top: 16px;
  /* margin-left: 48px; */
  width: 100%;
  /* max-width: 500px; */
  transition: all 0.1s ease-in-out;
  /* padding-right: 48px; */
}

.bot-quiz-input-container .quiz-option-input-frame .user-chat-bubble-container {
  margin: 24px 0 24px;
}

.quiz-submission-page-frame__chat-widget {
  /* padding: 16px; */
  box-sizing: border-box;
  position: relative;
  height: 100%;
  overflow-y: auto;
  text-align: center;
  border: 1px solid #f9b234;
  border: 1px solid var(--primary-color);
  background-color: #fff;
  width: 70%;
}

.quiz-submission-page-frame-full__chat-widget {
  width: 95%;
}

.quiz-submission-page-frame__chat-widget h4 {
  font-size: 0.8rem;
  font-weight: bold;
  margin: 10px 0;
}

.quiz-submission-page-frame__chat-widget .score-container {
  width: 100%;
  text-align: center;
}

.quiz-submission-page-frame__chat-widget .button-container {
  text-align: center;
  margin: 16px 0 32px;
}

.quiz-submission-page-frame__chat-widget .total-score-number {
  font-size: 0.65rem;
}

.quiz-submission-page-frame__chat-widget h5 {
  font-weight: bold;
  font-size: 0.8rem;
}

.quiz-submission-page-frame__chat-widget .answer-table-question {
  text-align: left;
  font-size: 0.8rem;
}

.quiz-submission-page-frame__chat-widget .main-action-container {
  margin: 32px 0;
}

.quiz-submission-page-frame__chat-widget .condition-message {
  font-weight: bold;
  font-size: 0.8rem;
}

.quiz-submission-page-frame__chat-widget .condition-message a {
  color: blue;
}

html,
body {
  background: none;
}

.chat-page-container__chat-widget {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: absolute;
  inset: 0px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.chat-widget.ws-conversation-modal {
  position: fixed;
  top: 54px;
  left: 10px;
  right: 10px;
  bottom: 12px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: auto;
  width: initial;
  border-radius: 20px;
  overflow: hidden;
}

.chat-widget.chat-right-position-shape {
  background: #fff;
  margin: 0 auto;
  width: calc(100% - 24px);
  padding: 12px 16px 16px;
  position: relative;
  border-radius: 40px 40px 16px 16px;
  height: calc(100% - 50px);
  margin: 12px;
  box-shadow: 0px 2px 4px -2px #b9b6e0;
}

.chat-widget.chat-left-position-shape {
  background: #fff;
  margin: 0 auto;
  width: calc(100% - 24px);
  padding: 12px 16px 16px;
  position: relative;
  border-radius: 40px 40px 80px 0px;
  height: calc(100% - 50px);
  margin: 12px;
  box-shadow: 0px 2px 4px -2px #b9b6e0;
}

.chat-left-position-shape:after {
  width: 0;
  height: 0;
  border: 35px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
  border-left: 0;
  content: '';
  position: absolute;
  bottom: -30px;
  left: 0px;
}

.chat-wrapper__chat-widget {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-widget.chat-body-wrapper {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  /* height: 100%; */
  /* HACK:  if height < 100% and flex: 1, the height will auto fit the rest space of parent */
  height: 25%;
  flex: 1 1;
  z-index: 1500;
  max-width: 100%;
  /* max-height: calc(100% - 31px); */
  background-color: rgba(236, 239, 247, 0.5);
}

.chat-widget.document-preview-wrapper {
  padding: 40px 35px 20px;
}

.chat-widget.chat-messages-container {
  padding: 24px 16px 16px;
  flex: 1 1;
  overflow: hidden;
  overflow-y: auto;
  transition: all 0.3s ease;
}

.brand-tab {
  position: absolute;
  right: 8px;
  bottom: -20px;
  font-size: 8px;
  color: #07032b;
  font-weight: 600;
  padding: 5px;
  /* border-radius: 10px 0px 0 10px; */
  width: 100px;
  height: 18px;
  /* background: #f3f4f7; */
  cursor: pointer;
  left: 0;
  margin: auto;
}

.chat-widget.brand-tab:hover {
  color: #f2c667;
}

.chat-widget.brand-tab span {
  /* transform: rotate(-90deg); */
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  width: 85px;
  color: #07032b;
}

.chat-widget.brand-tab .icon-power {
  margin-right: 3px;
  vertical-align: middle;
  color: #ffae00;
}

.chat-widget.brand-tab:hover .icon-power {
  color: #07032b;
}

.chat-widget.brand-tab a {
  text-decoration: none;
}

.chat-page-container__chat-widget .modal-heading {
  margin-bottom: 10px;
}

.chat-page-container__chat-widget .modal-content {
  max-width: 400px;
}

.chat-page-container__chat-widget .modal-content .custom-input {
  font-size: 16px;
}

.chat-page-container__chat-widget .logout-button {
  position: absolute;
  right: 40px;
  top: 20px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.chat-widget.chat-messages-header {
  border-radius: 5px 5px 0px 0px;
  /* background: linear-gradient(#ffda84 0%, #ffda84 45.32%, #f2cc7b 100%); */
  background: #ffffff;
  /* background: var(--primary-color); */
  padding: 0 16px 12px;
  /* box-shadow: 2px 2px 16px rgba(215, 214, 230, 0.9); */
  display: flex;
  justify-content: space-between;
  z-index: 1;
}

.chat-widget.chat-messages-header .icon-left-chevron {
  cursor: pointer;
  font-size: 12px;
  position: absolute;
  top: 17px;
  left: 19px;
}

.chat-widget.chat-messages-header .icon-left-chevron::before {
  color: #07032b;
  /* color: var(--primary-text-color); */
}
.flex-container {
  display: flex;
}

.chat-popup-close-btn {
  border: none;
  background: none;
  cursor: pointer;
  position: absolute;
  top: 6px;
  right: 16px;
}

.chat-popup-close-btn .icon-close {
  font-size: 11px;
}

.chat-popup-close-btn .icon-close::before {
  color: #07032b;
  /* color: var(--primary-text-color); */
}

.chat-launch-button {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.position-left {
  position: absolute;
  bottom: 30px;
  left: 30px;
}

.position-right {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.chat-launch-button:focus {
  outline: none;
}

.chat-launch-button .launch-button-icon {
  width: 65%;
  margin: auto;
}

video {
  width: 100%;
  height: auto;
}

a {
  color: #07032b !important;
  color: blue !important;
  text-decoration: underline;
}

video {
  width: 100%;
  max-width: 100%;
  margin-top: 5px;
  height: auto;
  border-radius: 5px;
}

.chat-page-container__chat-widget .header-custom-btn {
  border-radius: 3px;
  border: none;
  padding: 6px 16px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03rem;
  font-family: 'Muli';
  margin-right: 12px;
  background-color: #f9b234;
  background-color: var(--button-color);
  box-shadow: 0px 0px 12px rgba(215, 214, 230, 0.5);
  color: #fff;
  color: var(--button-text-color);
  /* border: 1px solid #fff; */
  margin-top: 2px;
}

.chat-page-container__chat-widget .header-custom-btn:hover {
  opacity: 0.7;
}

.chat-page-container__chat-widget .header-custom-btn[disabled] {
  opacity: 0.7;
}

.topic-button-disabled {
  border: none;
  padding: 4px 16px 6px;
  border-radius: 3px;
  font-family: 'Muli';
  color: #fff;
  font-size: 0.7rem;
  cursor: pointer;
  background: #ccc;
  margin: 0 8px 8px 0;
  font-weight: 600;
}

.chat-page-container__chat-widget .chat-overlay-container {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: #f5f7fb;
  border-radius: 25px 25px 25px 60px;
  overflow: hidden;
}

.chat-page-container__chat-widget .chat-overlay-pulled-container {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: #fff;
  overflow-y: auto;
}

.chat-widget.chat-messages-header .bot-name-wrapper {
  font-size: 0.8rem;
  font-weight: bold;
  width: 100%;
  text-align: center;
  letter-spacing: 0.02rem;
}

.top-peeping-img-face {
  max-width: 100px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.top-peeping-img,
.side-peeping-img {
  max-width: 100%;
  height: auto;
}

.peeping-img-hands {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 43px;
  margin: auto;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.peeping-img-left-hand,
.peeping-img-right-hand {
  width: 26px;
  margin: 0 36px;
}

.left-side-peeping-img-face {
  max-width: 95px;
  position: absolute;
  left: 0;
  top: 100px;
  transform: rotate(-30deg);
}

.right-side-peeping-img-face {
  max-width: 95px;
  position: absolute;
  right: 0;
  top: 100px;
  transform: rotate(30deg);
}

.left-side-peeping-img-hand-wrapper {
  position: absolute;
  z-index: 1;
  left: 55px;
  top: 158px;
  margin: auto;
  width: auto;
}

.right-side-peeping-img-hand-wrapper {
  position: absolute;
  z-index: 1;
  right: 55px;
  top: 158px;
  margin: auto;
  width: auto;
}

.left-side-peeping-img-hand,
.right-side-peeping-img-hand {
  height: 24px;
}

.right-side-peeping-img-hand {
  transform: scaleX(-1);
}

.error-banner {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #fff3cd;
  padding: 5px 10px;
}

.error-banner-radius {
  border-radius: 25px 25px 0 0;
}

.error-banner-a {
  color: #0923e6 !important;
  text-decoration: none;
}

.error-banner-a:hover {
  text-decoration: none;
}

.w-calc {
  width: calc(100% - 30px);
}

.error-banner-close-btn {
  border: none;
  background: none;
  cursor: pointer;
  position: absolute;
  top: 35px;
  right: 16px;
}

.error-banner-close-btn .icon-close {
  font-size: 11px;
}

.error-banner-close-btn .icon-close::before {
  color: #07032b;
  /* color: var(--primary-text-color); */
}

.custom-arrow-prev {
  color: black !important;
}

.custom-arrow-prev.slick-disabled {
  display: none !important;
}

.custom-arrow-prev::before {
  display: none;
}

.custom-arrow-next {
  color: black !important;
}

.custom-arrow-next.slick-disabled {
  display: none !important;
}
.custom-arrow-next::before {
  display: none;
}