/*
Trix 1.3.1
Copyright © 2020 Basecamp, LLC
http://trix-editor.org/*/
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }
trix-toolbar * {
  box-sizing: border-box; }
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }
trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%; }
trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-dialogs {
  position: relative; }
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }
trix-toolbar .trix-dialog--link {
  max-width: 600px; }
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight; }
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }
trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }
trix-editor .trix-button-group {
  display: inline-flex; }
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }
trix-editor .attachment__metadata-container {
  position: relative; }
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }
@charset "UTF-8";
.trix-content {
  line-height: 1.5; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' · '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
 


 /* ------------------variables------------------------- */
 :root {
    --gabSiteDarkColor: #003049;
    --gabSiteLiteRowBackground: #f0f1f6;
 }
  
 
 /* ------------------debugging------------------------- */
 /* * {*/
 /*    outline: 1px solid red;*/
 /*} */
 

 /* ------------------utilities------------------------- */
 .gabRowHeight {
     min-height: 400px;
 }
 

 .no-cursor-change {
 cursor: default;
}

.scroll_menu {
 height: 100vh; 
 overflow: auto;
 scrollbar-width: none; /* For Firefox */
 -ms-overflow-style: none;  /* IE and Edge */
}


.scroll_menu::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}
 
 /* ------------------elements------------------------- */
 
 .gabRowGray {
   background: #f7f9fa !important;
 }
 
 .gabFrontEndCard {
   border-radius: 12px;
   box-shadow: 0px 0px 70px -40px var(--gabSiteDarkColor);
   background: white;
 }
 .gabFrontEndCard_bu {
   border-radius: 12px;
   /*box-shadow: 0px 0px 70px -40px var(--gabSiteDarkColor);*/
   background: var(--gabSiteLiteRowBackground);
 }
 
 .gabSimpleCard {
  border: 1px solid black;
 }
 
.limitedLanch {
    background: rgba(52,221,135,.1);
    border: 2px solid #34dd87;
    border-radius: 100px;
    color: #34dd87;
    display: inline-block;
    font-weight: 700;
    margin: 0 0 20px;
    padding: 3px 10px;
    margin: auto;
    font-size: 14px;
}
 
 .circle {
  width: 40px; /* adjust size as needed */
  height: 40px; /* adjust size as needed */
  background-color: #ccc; /* or any color you prefer */
  border-radius: 50%; /* to make it a circle */
  display: flex;
  justify-content: center;
  align-items: center;
}

.initials {
  font-size: 12px; /* adjust font size as needed */
  color: #000; /* or any color you prefer */
}

.comment_box {
  /*background: #fbfafa;*/
  background: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid lightgray;
  overflow: hidden !important;
}

  .audio-player {
    display: flex; /* Allow horizontal layout for controls */
    max-width: 800px; /* Set a maximum width */
    margin: 10px auto; /* Center the player horizontally */
  }
  
  .image_box {
    border-radius: 10px;
    padding: 14px;
    overflow-x: hidden;
    background: white;
    margin-bottom: 12px;
  }
  
  .iframe-container {
  position: relative;
  overflow: hidden; /* This prevents scrollbars within the iframe */
  width: 100%; /* Make the container 100% width */
  padding-top: 56.25%; /* Set padding-top based on aspect ratio */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Set iframe width to 100% of its container */
  height: 100%; /* Set iframe height to 100% of its container */
}

.signature_pad {
  width: 100%;
  margin: 0 auto;
}

.signature_pad_body {
  width: 100%;
  height: 0;
  padding-bottom: 50%; /* This maintains the 2:1 aspect ratio */
  position: relative;
}

.signature_pad_body canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px dotted #444;
}
 input[type=checkbox] {
  appearance: none;
}
/* Use custom icons */
input[type=checkbox]::before {
 content: "\f058"; 
  font-family: FontAwesome; 
  font-size: 20px;
  width: 20px;
  height: 20px;
  text-align: center;
    vertical-align: middle; 
  
}

input[type=checkbox]:checked::before {
}


input[type=checkbox]:not(:checked)::before {
  content: "\f058"; 
  color: lightgray;
}

.dashboard_banner {
  /*background: #ffe4e4;*/
  background: #ffcdcd;
 /*padding: 11px;*/
 margin-bottom: 12px;
 border-radius: 5px;;
 }


  .countdown_container {
      text-align: center;
      margin-top: 50px;
  }
  .countdown_section {
display: inline-block;
text-align: center;
background: white;
margin: 6px;
max-width: 40px;
min-height: 40px;
border-radius: 5px;
  }
  .countdown_number {
      font-size: 14px;
  }
  .countdown_title {
      font-size: 10px;
  }
  
  
  .gab_icon {
    background: color(srgb 0.942 0.9456 0.9633);
    padding: 20px;
    width: 200px;
    margin: auto;
    border-radius: 6px;
    height: 185px;
  }
 /* ------------------checkboxes------------------------- */

/* Hide default checkbox */
.comment_box input[type="checkbox"] {
  display: none;
}

/* Style custom checkbox wrapper */
.checkbox-wrapper {
  /*display: inline-block;*/
  cursor: pointer;
  /*margin-right: 10px; */
}

/* Style custom checkbox */
.custom-checkbox {
  width: 30px;
  height: 30px;
  background-color: none;
  border-radius: 50px;
  display: inline-block;
  position: relative;
  border: 1px solid lightgray;
}

/* Style custom checkmark */
.custom-checkbox::after {
  content: "\f00c"; /* Checkmark character */
  font-family: FontAwesome; /* Use Font Awesome font */
  font-size: 14px; /* Size of the checkmark */
  color: gray; /* Color of the checkmark */
  position: absolute;
  left: 50%; /* Center horizontally */
  top: 50%; /* Center vertically */
  transform: translate(-50%, -50%); /* Center the checkmark */
  opacity: 0; /* Initially hide the checkmark */
}

/* Show checkmark when custom checkbox is checked */
.checkbox-wrapper input:checked + .custom-checkbox::after {
  opacity: 1; /* Show the checkmark when checked */
}
 /* ------------------typography------------------------- */
 .gabExtraLargeHeading {
   font-family: var(--gabFontA);
   font-size: 60px;
   line-height: 54px;
   letter-spacing: -3px;
   text-transform: capitalize;
 }
 
 .one_verb {
  font-family: var(--gabFontA);
  font-size: calc(50px + (65 - 50) * ((100vw - 300px) / (1600 - 300)));
  letter-spacing: -1px;
  font-weight: 700;
   }
   
  
 .gabLargeHeading {
font-family: var(--gabFontA);
font-size: 38px;
line-height: 41px;
letter-spacing: -1px;
font-weight: 700;
 }
 
 .gabSmallHeading {
   font-family: var(--gabFontA);
   letter-spacing: -1px;
   font-weight: 700;
   font-size: 32px;
   line-height: 38px;
 }
 
 .gabSmallHeadingSubtitle {
   font-family: var(--gabFontA);
   font-weight: 700;
   font-size: 18px;
   line-height: 20px;
   margin-top: 5px;
  
 }
 
 
 .gab_icon_text {
   font-family: var(--gabFontA);
   font-weight: 700;
   margin-top: 13px;
   font-size: 16px;
   line-height: 16px;
 }
 
 
 .gabHeadingSubText {
  font-family: var(--gabFontA);
  color: gray;
  line-height: 22px;
  font-size: 18px;
  font-weight: 300;
 }
 
 .gabParagraph {
  font-family: var(--gabFontB);
  line-height: 22px;
  color: gray;
  font-size: 18px;
  font-weight: 300;

 }
 
 .gabLightText {
  color: white;
 }
 
 .gabDarkText {
  color: var(--gabSiteDarkColor);
  
 }
 
 .gabUnderline {
  text-decoration: underline;
  font-weight: bold;
 }
 
 .pricingHeader {
   color: var(--gabSiteDarkColor);
   font-family: var(--gabFontA);
   font-size: 18px;
   text-transform: uppercase;
 }
 
 .price {
   font-family: var(--gabFontA);
  font-size: 45px;
  font-weight: bold;
  margin-bottom: 19px !important;
  padding-bottom: 0px !important;
 }
 
 .pricingCurrency {
   font-family: var(--gabFontA);
  font-weight: 100;
  font-size: 45%;
  position: relative;
  bottom: 15px;
  left: -2px;
 }
 
 .pricingFeature {
   font-family: var(--gabFontA);
  text-align: left;
  color: #6d7c90;
  text-transform: capitalize;
  font-weight: 300;
 }
 
 .textStandout {
  color: var(--adminAccentColorBright);

 }
 
 .comment_text {
   margin-bottom: 0px !important;
   font-weight: bold;
 }
 
 .comment_text::first-letter {
  text-transform: uppercase
 }
 
 .checkboxButonText {
  color: gray;
  font-size: 10px;
  padding-bottom: 8px;
 }
  .red_text {
   color: var(--adminAccentColorBright) !important;
  }
  
  .skewed_text {
  font-family: "Shantell Sans", cursive;
font-size: 32px;
text-align: center;
color: var(--adminAccentColorBright);
transform: rotate(18deg);
line-height: 42px;
  }
  
  .lead {
   line-height: 21px;
  }
  
  .gab_lecture_card_text {
    line-height: 14px !important;
    font-size: 12px !important;
}
  }
  
  
  .gab_qutoe_service_description {
   color: rgb(199, 199, 199);
   font-size: 90%;
  }
 /* ------------------buttons------------------------- */
 
 .gabAppButtonAlternative, .gabAppButtonAlternative a {
   background: var(--appRed);
   color: white;
   border-radius: 2px;
   text-transform: uppercase;
   padding: 14px;
   min-width: 200px;
   
 }
 
 .gabAppButtonAlternativeOutline {
   background: none;
   border: 1px solid var(--appRed);
   border-radius: 2px;
   text-transform: uppercase;
   padding: 14px;
   min-width: 200px;
 }
 .gabAppButtonMain {
   background: var(--gabSiteDarkColor);
   text-transform: uppercase;
   padding: 14px;
   color: white;
   box-shadow: rgba(0, 0, 0, 0.2) 0.3125rem 0.25rem 0.9375rem;
   border-radius: 0.3125rem;
   font-weight: bold;
   padding: 16px 70px;
  
 }
 
 .gabAppButtonMainRed {
   background: var(--adminAccentColorBright);
   text-transform: uppercase;
   padding: 14px;
   color: white;
   box-shadow: rgba(0, 0, 0, 0.2) 0.3125rem 0.25rem 0.9375rem;
   border-radius: 0.3125rem;
   font-weight: bold;
   padding: 16px 70px;
   border: none !important;
  
 }
 .gabAppButtonMainGray {
   background: gray;
   text-transform: uppercase;
   padding: 14px;
   color: white;
   box-shadow: rgba(0, 0, 0, 0.2) 0.3125rem 0.25rem 0.9375rem;
   border-radius: 0.3125rem;
   font-weight: bold;
   padding: 16px 70px;
   border: none !important;
  
 }
 
 .gabAppButtonMainOutline {
   background: none;
   border-radius: 2px;
   border: 1px solid var(--appBlue);
   text-transform: uppercase;
   padding: 14px;
   min-width: 200px;
  
 }
 .gabAppButtonOutlineWhite, .gabAppButtonOutlineWhite a  {
   background: none;
   border: 1px solid white;
   color: white;
   border-radius: 2px;
   text-transform: uppercase;
   padding: 14px;
   min-width: 200px;
  
 }
 
 .gabTextButton, .gabTextButton a {
  color: var(--gabSiteDarkColor);
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 10px;
 }
 
 .pricingButton, .pricingButton:hover {
  text-align: center;
  background: var(--adminAccentColorBright);
  border-radius: 5px;
  color: white;
  padding: 20px 0px;
  font-family: var(--gabFontA);
  width: 100%;
  margin-bottom: 10px;

 }
 
 .joinButton, .joinButton:hover  {
  background: var(--adminAccentColorBright);
  color: white;
  border-radius: 5px;
  margin-right: 50px:
  text-transform: uppercase;

 }
 /* ------------------images------------------------- */

 .gabAppImage {
   border-radius: 33px;
   box-shadow: 6px 45px 115px -65px var(--gabSiteDarkColor);
  
 }

 .images_container {
  
 }
 .image_1 {
   border-radius: 33px;
   box-shadow: 6px 45px 115px -65px var(--gabSiteDarkColor);
 

  
 }
 .image_2{
  
   border-radius: 33px;
   box-shadow: 6px 45px 545px -44px var(--gabSiteDarkColor);

 }
 
 .image_home_feature {
   border-radius: 12px;
   /*box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);*/
   box-shadow: 6px 45px 115px -65px var(--gabSiteDarkColor);
  
 }
 /* ------------------dropzone------------------------- */
 .dropzone-msg-title {
   font-size: 14px;
 }
 
 .dropzone-msg-desc {
  color: gray;
  font-size: 12px;
 }

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;600;700&display=swap');

/** {*/
/*  font-family: 'Raleway', sans-serif;*/
/* }*/
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Raleway', sans-serif;
 }
 
    
    .gabPdfTableHead {
        background: #003049;
        padding: 4px 0px;
        font-weight: bold;
        color: whitesmoke;
        border-radius: 4px;
    }

    .gabPdfTableRow {
    padding: 0px;
        color: gray;
    }
    
    
    .gabPdfTotalRow {
       border-top: 1px solid #d3d3d3;
    }
    
    .gabPdfSectionTitle {
        color: #003049;
        font-weight: bold;
        font-size: 25px;
        margin-bottom: 2px;
    }
    .gabSubTotal {
        color: #003049;
        font-weight: bold; 
        font-size: 18px;
    }
    
    
    .publishedProposal .attachment__caption {
        display: none;
    }
    
    .pricingSection {
        margin-top: 40px;
    }
    
    .trix-content img {
        border-radius: 8px;
        box-shadow: 5px 5px 37px -31px #003049;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    
    .trix-content h1 {
        font-size: 180%;
    }
    
    .proposalHeader {
          color: white;
      width: 100%;
      background: #003049;
      border-radius: 10px;
      padding: 45px;
      box-shadow: 5px 5px 37px -9px #003049;
    }

 :root {
    /* --------colors-------- */
    --menu_text_color: #b0b0b0;
 }


body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

main {
  display: flex;
  flex-wrap: nowrap;
  height: 100vh;
  height: -webkit-fill-available;
  max-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
}

.b-example-divider {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
  background-color: var(--menu_text_color);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.bi {
  vertical-align: -.125em;
  pointer-events: none;
  fill: currentColor;
}

.dropdown-toggle { outline: 0; }

.nav-flush .nav-link {
  border-radius: 0;
}

.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--menu_text_color);
  background-color: transparent;
  border: 0;
}



.btn-toggle-nav a {
  display: inline-flex;
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}

.scrollarea {
  overflow-y: auto;
}

.fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }

.gab_selected_side_menu_item {
    color: white !important;
    font-weight: bold;

}

.fs_menu_link_color {
  color: var(--adminAccentColorFontColor) !important;
  font-family: var(--gabFontA) !important;
  text-transform: uppercase;
}

.btn:hover {
  color: white !important;
}


  .gabMenuGroup {
      border-bottom: 1px solid #57608c;
      padding-bottom: 5px;
      z-index: 500;
      background:  var(--adminAccentColor);
  }
  
  
  .gabMenuHeadItem, .gabMenuHeadItem a, .gabMenuHeadItem:hover {
    color: var(--adminAccentColorFontColor) !important;
    text-transform: uppercase !important;
    /*color: red !important;*/
  }
  
  
.nav-item {
  color: var(--adminAccentColor);
}

 .bg-dark {
     background: var(--adminAccentColor) !important
 }



.gab_selected_side_menu_item {
    color: var(--adminAccentColorButton) !important;
    font-weight: 600;
    

}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 
 

 /* ------------------debugging------------------------- */
 /* * {*/
 /*    outline: 1px solid red;*/
 /*} */
 
    .red {
        background: red !important;
    }
    
    .blue {
        background: blue !important;
    }
     
    .green {
        background: green !important;
    }




 /* ------------------variables------------------------- */
 :root {
    /* --------colors-------- */
    --liteBackground: #f2f4f5;
    --colorA: #3c37ff;
    --colorALite: #c4c3ec;
    --colorAExtraLite: #c4c3ec33;
    --colorB: blue;
    --gray: gray;
    --subtle: #efeff5;
    --liteGray: #f8f8f8;
    
    --adminAccentColor:  #003049;
    --adminAccentColorBright: #C94500;
    --adminAccentColorButton: #f77f00;
    --adminAccentColorFontColor: #caccd6;
    
    /*--adminAccentColor:  #16215B;*/
    /*--adminAccentColorBright: #F25929;*/
    /*--adminAccentColorButton: #F25929;*/
    /*--adminAccentColorFontColor: #caccd6;*/
    
    /*--adminAccentColor:  #2d6ee1; */
    /*--adminAccentColorBright: #D62828;*/
    /*--adminAccentColorButton: #ffba05;*/
    /*--adminAccentColorFontColor: #fff;*/
    
    --adminGray:  #392084;
    --adminFontColorBold:  #0d161b;
    --adminFontColorRegular:  #7b7b7b;
    --adminAccentColor2:  #ecc148;
    --adminBackgroundColor: #fff;
    --appRed: rgba(241,80,103,1);
    --appBlue: rgba(80,113,241,1);
    --appBorderLight: 1px solid #d5d7d9 !important;

    /* --------fonts-------- */
    --gabFontA: 'Poppins', sans-serif;
    --gabFontB: 'Merriweather Sans', sans-serif;

    /* --------other-------- */
    --gab_shadow: 1px 1px 1px 0 rgba(0,0,0,.04);
    --gabShadowLarge: 2px 3px 23px -6px gray;
    --gab_border_radius: 5px;
    --gab_border: 1px solid var(--subtle);
  }

 /* ------------------debugging------------------------- */
 
     .red {
        outline: 5px solid red;
    }
    .blue {
        outline: 5px solid blue;
    }
    .green {
        outline: 5px solid green;
    }
 /* ------------------settings------------------------- */

    a:link { 
        text-decoration: none; 
        
    }
    
    html, body {
    max-width: 100%;
    overflow-x: hidden;
}

    
  /* ------------------utilities------------------- */
  .gabFullPageAndCenterV {
      width: 100%;
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      align-content: center;

  }


  .gabFullPageAndCenterV {
    width: 100%;
    min-height: 80vh;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;

}

   .gabCenter {
    display: grid;
    place-items: center;
 }
   .gabCenterVandH {
    display: grid;
    place-items: center;
    min-height: 40vh;
 }
  
  .gab_form_max_widht {
     max-width: 700px;
      
  }
  
  .gabCenterVertical {
    display: grid; 
    align-content: center;  
  }
  
  .gabCenterItemsVerticalFlexStart {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: center;
  }
  .gabCenterItemsVerticalFlexEnd {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-end;
	align-content: center;
  }
  .gabCenterItemsVerticalFlexCenter {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
  }
  
  .gabCenterVerticalChild {
      margin: auto;
  }
  
  .gab_center_vertical_text {
      position: relative;
        top: 50%;
        transform: translate(0, -50%);
  }
  
  .gabShadowLarge {
      box-shadow: var(--gabShadowLarge) !important;
  }
  
  .hidden {
      display: none !important;
  }
  
  .edit_phase {
      display: inline
  }
  
  .gabAdminLinkColor, .gabAdminLinkColor a {
      color: var(--adminAccentColor) !important;
      font-weight: 600 !important;
  }
      
    .iframeContainer {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding-top: 100%; /* 1:1 Aspect Ratio */
        height: 100% !important;
        
    }
    
    .responsiveIframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    
    table {
      table-layout: fixed;
      width: 100%;
    }
    
    .gabLogInPageLeft {
        min-height: 85vh; 
        display: flex; 
        flex-direction: row; 
        flex-wrap: nowrap; 
        justify-content: center; 
        align-items: center; 
        align-content: center;
        padding: 10% !important;
    }
    
    .gabLogInPageRight {
        min-height: 85vh; 
        display: flex; 
        flex-direction: column; 
        flex-wrap: nowrap; 
        justify-content: center; 
        align-items: stretch; 
        align-content: center;
        box-shadow: 0px 0px 120px -30px gray;
    }
    
    .gabMaxWidth700 {
        max-width: 700px !important;
    }
    
    .gabMarginAuto {
        margin: auto !important;
    }
    
    .paid {
        text-decoration: line-through;
        opacity: .5;
    }
    
    .gabAppBackgroundColor {
         background: #f2f3f5;
    }
    
    .gabScroll {
        max-height: 80vh;        
        overflow-y: scroll;
        overflow-x: hidden;
        padding-right: 10px;
        
    }
    
    @media only screen and (max-width: 980px) {
        .hideOnMobile {
            display: none !important;
        }
        
        .fullWidthButtonOnMobile {
            width: 100% !important;
            text-align: center !important;
        }
    }
  /* ------------------elements------------------- */
  .gabCard {
      box-shadow: var(--gab_shadow);
      border-radius: var(--gab_border_radius);
      padding: 20px;
      border: 1px solid gray !important;
      background: var(--liteGray) !important;
    }
  .gabCard2 {
      box-shadow: var(--gab_shadow);
      border-radius: var(--gab_border_radius);
      padding: 20px;
      background: var(--liteGray) !important;
      margin-bottom: 10px;
    }
  .gabCard4 {
      border-radius: var(--gab_border_radius);
      padding: 20px;
      background: white !important;
      margin-bottom: 10px;
    }
    
    .gabCardBottomBorder1 {
        border-bottom: 5px solid blue;
    }
    .gabCardTopBorder1 {
        border-top: 5px solid blue;
    }
    
    .gabFeatureCard {
        margin-bottom: 15px;
        margin-top: 15px;
        /*background: var(--gabSiteLiteRowBackground);*/
        /*border-radius: 25px;*/
        /*width: 160px;*/
        /*height: 160px;*/
        /*margin: 20px auto;*/
        /*box-shadow: 0px 0px 32px -5px gray;*/
        /*box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);*/
        /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.25), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1);*/
    }
    
    .gabCodeArea {
        background: black !important;
        color: white !important;
        min-height: 400px !important;
    }
    
    .warning {
        background: #8c0808; 
        color: white;
        padding: 10px;
        border-radius: 5px;
        margin-top: 18px;
    }
    
    .gabMessageField {
        border-radius: 10px 0px 0px 10px !important;
    }
    
    #new_message {
       background: #fbfafa;
        padding: 10px;
        border-radius: 200px;
        margin-bottom: 20px;
        
    }
    
    #message_body, #message_body:focus {
        background: none;
        border: none !important;
        box-shadow: none !important;
        color: #b3b6b7 !important;
    }
    #new_project_video_comment {
       background: #fbfafa;
        padding: 10px;
        border-radius: 200px;
        margin-bottom: 20px;
        
    }
    #project_video_comment_comment, #project_video_comment_comment:focus {
        background: none;
        border: none !important;
        box-shadow: none !important;
        color: #b3b6b7 !important;
    }
    .client_message {
        text-align: right;
        width: 90%;
        box-shadow: var(--gab_shadow);
        border-radius: var(--gab_border_radius);
        padding: 20px;
        background: var(--liteGray) !important;
        margin-bottom: 10px;
    }
    
    .company_message {
        width: 90%;
        box-shadow: var(--gab_shadow);
        border-radius: var(--gab_border_radius);
        padding: 20px;
        background: var(--liteGray) !important;
        margin-bottom: 10px;
    }
    
    .messages_container {
        max-height: 60vh;
        overflow-y: scroll;
        padding-right: 10px;
    }
    
    .gabAdminCard,.gabAdminCardRounded {
        margin-bottom: 30px;    
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.1), 0 1px 3px 0 rgba(0,0,0,.06);
        padding: 24px 24px;
        overflow: hidden;
    }
    
    /*.gabAdminCardRounded {*/
    /*  margin-bottom: 12px;*/
    /*  border-radius: 19px;*/
    /*  background-color: #fff;*/
    /*  box-shadow: 1px 1px 41px -39px #003049;*/
    /*  padding: 24px;*/
    /*  overflow: hidden;*/

    /*}*/
    
    .gabAdminBorderLeft {
        border-left: 3px solid var(--adminAccentColor);
    }
    
    .gabAdminLeftPageMenu {
          box-shadow: var(--gab_shadow);
          border-radius: var(--gab_border_radius);
          padding: 20px;
          background: var(--liteGray) !important;
          margin-bottom: 10px;
    }
    
    .gabAdminLeftPageMenu a {
        color: gray !important ;
    }
    
    .gabNavLink {
        line-height: 16px;
    }
    
    .gabAdminCircle, .gabAdminCircle a {
        color: var(--adminAccentColor) !important;
        font-size: 20px;
    }
    
    .messagesSection {
        background: white;
        padding: 18px;
        border-radius: 8px;
        
    }
    
    .proposalBody {
        background: white;
        padding: 28px;
        height: 85vh;
        overflow: scroll;
    }
    
    .gabAdminTodo {
        background: white;
        margin: 5px;
    }
    
    .attachment__caption {
        background: gray;
        color: white;
        padding: 5px;
        border-radius: 4px;
    }
    
    .gabCardsContainer {
        background: white;
        border-radius: 8px;
        padding: 0px 30px;
    }
    
    .gabTabNav {
        /*background: var(--adminAccentColor) !important;;*/
        /*padding: 20px;*/
        /*border-radius: 5px;*/
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 30px;
    }
    
    .move {
        color: #cfd2d4 !important;
    }
    
    
    .gabPdfContainer {
        box-shadow: 5px -10px 55px -5px gray;
        border: 10px solid gray;
        border-radius: 10px;
    }
   .appErrorMessage {
       background: var(--adminAccentColor);
       color: white;
       border-radius: 5px ;
       padding: 16px 22px 2px 10px;
       margin-bottom: 22px;
   }
   
   label.label-checkbox {
       color: var(--adminFontColorRegular) !important;
       font-size: 12px;
   }
   
   .roundedArrow {
       background: var(--adminAccentColor);
        color: whitesmoke;
        font-size: 12px;
        width: 18px;
        height: 18px;
        border-radius: 140px;
        text-align: center;
        box-shadow: 1px 1px 11px -2px var(--adminAccentColor);
        margin: auto;
   }
   
   .gabDashboardMessages {
       
   }
   
   .alert, .notice {
       background: var(--adminAccentColor);
        color: white;
        /*max-width: 600px;*/
        margin: 0px !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        padding: 10px;
        border-radius: 5px;
        
   }
   
   .client_login_image {
       border-radius: 22px !important;
       max-width: 50%
   }
   
   .gabKanbanCard {
        background: white;
        padding: 15px;
        margin-bottom: 10px;
        overflow-x: hidden;
        border-radius: 6px;
   }
   
   .projects_pills {
    height: 60px;
    background: white;
   }
   /* ------------------forms------------------- */
    .gabFormField {
        border: var(--appBorderLight);
        background: none !important;
        padding: 20px !important;
        margin-bottom: 8px;
    }
    
    .gabVideoField, .gabVideoField:focus {
        border: 1px dashed lightgray !important;
        caret-color: transparent;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        align-content: stretch;
        padding: 1vw 5vw;
    }
    
    .attachment__caption {
      background: var(--adminAccentColor);
      color: white;
      padding: 5px;
      border-radius: 4px;
      padding: 30px;
      font-size: 10px;
    }
    .gabShortField {
        height: 42px !important;
    }

    .form-control:focus {
        box-shadow:var(--gab_shadow) !important;
    }
    
    .edit_proposal_gear, .edit_proposal_service, .edit_proposal_location, .edit_proposal_crew, .edit_cast, .edit_other_expense {
        box-shadow: var(--gabShadowLarge) !important;
        border-radius: 10px;
        margin: 32px auto;
        padding: 20px;
        max-width: 400px;
    }
    
    .phaseNameTextFiled {
        border: none;
        padding: 10px;
        width: 100%;
        border-radius: 5px;
    }
    
    .completeSteupMessage {
        background: white;
        padding: 10px 42px;
        border-radius: 75px;
        margin-bottom: 30px;
        box-shadow: 5px 5px 25px -14px gray;
    }

  /* ------------------buttons------------------- */
  
  button {
      all: unset
  }
  
  .gabButtonA, .gabButtonA:hover {
      background: var(--adminAccentColor) !important;
      color: var(--liteBackground) !important;
      padding: 10px 20px !important;
      border-radius: var(--gab_border_radius) !important;
      border: none !important;
    }
  .gabButtonOverlay, .gabButtonOverlay:hover {
      background: #9f3535 !important;
      color: white !important;
      padding: 20px 20px !important;
      border-radius: 5px !important;
      border: none !important;
      position: fixed; 
      bottom: 20px; 
      right: 20px;
      z-index: 5000;
    }
    
    .gabButtonB, .gabButtonB:hover {
      border: 1px solid var(--adminAccentColor) !important;
      color: black !important;
      padding: 10px 40px !important;
      border-radius: var(--gab_border_radius) !important;
   
    }
    
    .gabButtonAction {
        background: var(--adminAccentColorBright) !important;
        color: var(--liteBackground) !important;
        padding: 10px 20px !important;
        border-radius: opx;
        box-shadow: 2px 2px 26px -11px var(--adminAccentColorBright);
    }
    .gabButtonBlock {
           display: block;
      text-align: center;
    }
    
    .gabFullWidth {
        width: 100% !important;
    }
    
    ::file-selector-button {
        background: var(--colorAExtraLite);
        color: var(--gray);
        padding: 5px 20px;
        border-radius: var(--gab_border_radius);
        border: none;
    }
    
    .gabViewSchoolButton {
        background: white;
        border-radius: 5px !important;
        border: 1px solid #dfdfdf !important;
    }
    
    .help_button {
        width: 45px !important;
        height: 45px !important;
        text-align: center;
        border-radius: 50px !important; 
        background: var(--adminAccentColor);
        display: block;
        color: white;
        box-shadow: 3px 3px 25px -6px var(--adminAccentColor);
        
        position: fixed;
        right: 10px;
        bottom: 10px;
        border-radius: 500px;
        width: 20px;
        height: 31px;
    }
    /* ------------------links------------------- */

    .gab_gray_link, .gab_gray_link a {
        color: var(--gray) !important;
        text-decoration: none !important;
    }
    .gab_white_link, .gab_white_link a {
        color: white !important;
    }
    .gab_black_link, .gab_black_link a {
        color: black !important;
    }
    
    .input-group > .gabMessageButton {
         width: 45px !important;
        height: 45px !important;
        text-align: center;
        border-radius: 50px !important; 
        background: var(--adminAccentColorBright);
        display: block;
        color: white;
        box-shadow: 3px 3px 25px -6px var(--adminAccentColorBright);
    }
    

    /* ------------------typography------------------- */
    .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .display-7  {
        font-family: var(--gabFontA);
        font-weight: 700;
    }
    
    .gab_display_1  {
        font-family: var(--gabFontA);
        font-weight: 700;
         font-size: calc(40px + (80 - 40) * ((90vw - 300px) / (1600 - 300)));
         line-height: calc(45px + (85 - 45) * ((90vw - 300px) / (1600 - 300)));
        
    }  
    
    
    .gabHeader {
        font-family: var(--gabFontA) !important;
    }


    .gabHintText {
        color: gray;
        font-size: 12px;        
        font-family: var(--gabFontA) !important;
    }
    
    
    h1, h2, h3, h4, h5, h6 {
        /*font-family: 'Tilt Warp', cursive;*/
        font-family: var(--gabFontA) !important;
    }

    
    ::placeholder {
        color: #dedede !important;
    }
    
    label {
        color: var(--adminFontColorBold) !important;
        margin-top: 20px;
        font-size: 16px;
        font-family: var(--gabFontA) !important;
        font-weight: 500;
        margin-bottom: 5px;
        
    }

    .cardMainText {
        margin-bottom: 0px !important;
        font-family: var(--gabFontA) !important;
    }
    .gabAdminCardSubText, .gabAdminCardSubText a {
        color: #6b6d7c;
        font-size: 15px;
        font-weight: 400;
        margin-bottom: 0px;
        font-family: var(--gabFontA) !important;
    }  
    
    .gabAdminSectionTitle {
        font-size: 12px;
        font-weight: 600;
        line-height: 12px;
        font-family: var(--gabFontA) !important;
        text-transform: uppercase;
        color: #747282;
    }

    .gabAdminCardNumber, .gabAdminCardNumber a {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 0px;
        color: black;
        font-family: var(--gabFontA) !important;
        line-height: 16px;
    }
    
    .gabAdminCardContext {
        color: #212338;
        font-size: 16px; 
        font-weight: 400;
        font-family: var(--gabFontA) !important;
        
    }

    .gabAdminCardLink, .gabAdminCardLink a {
       color: #212338 !important;
       border-bottom: 1px solid #9294a0;
       font-size: 12px;
        font-family: var(--gabFontA) !important;
    }
    .gabAdminCardText{
       color: #212338 !important;
       font-size: 12px;
        font-family: var(--gabFontA) !important;
    }
    
    .gabAdminFormTitle {
        font-size: 22px;
        color: #222222;
        margin-bottom: 24px!important ;
        font-family: var(--gabFontA) !important;
        text-transform: capitalize;
        font-weight: 500;
    }
    
    .proposalTitle {
        font-weight: bold;
        text-transform: capitalize;
        font-family: var(--gabFontA) !important;
    }
    
    .proposalInfo {
        color: gray;
        font-family: var(--gabFontA) !important;
    }
    
    .gabLabelInfo {
        color: gray !important;
        font-size: 12px;
        line-height: 14px;
        font-family: var(--gabFontA) !important;
    }
    
    .gabPhaesHeader {
        font-size: 10px;
        padding: 0px;
        font-family: var(--gabFontA) !important;
    }
    
    .gabAdminCardLargeText, .gabAdminCardLargeText a {
        font-family: var(--gabFontA) !important;
        color: #757383;
        text-transform: capitalize;
        font-weight: 450;
    }
    
    .gabAdminCardSmallText, .gabAdminCardSmallText a {
        font-family: var(--gabFontA) !important;
        color: #b4b3bf;
        font-size: 12px;
        display: grid;
        align-content: center;
    }
    
    .gabMessageHeading {
        font-family: var(--gabFontA) !important;
        color: #424243;
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: 2px;
        
    }
    
    .gabMessageSubHeadding {
        font-family: var(--gabFontA) !important;
        color: #787d8b;
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: 2px;
        
    }
    
    .dashboradMessageBody {
        font-family: var(--gabFontA) !important;
        color: #b4b3bf;
        font-size: 10px;
        
    }
    
    .gabMessageTime {
        font-family: var(--gabFontA) !important;
        color: #b4b3bf;
        font-size: 12px;
        line-height: 11px;
        
    }
    
    .gabMessageIcon {
        font-family: var(--gabFontA) !important;
        color: #b4b3bf;
        font-size: 8px;
        padding: 5px;
        border: 1px solid lightgray;
        border-radius: 4px;
        margin-bottom: 5px;
          
    }
    
    .lightInputText {
        color: lightgray;
        font-weight: bold;
    }
    
    .logo {
       font-family: 'Poppins', sans-serif;
       letter-spacing: 1px;
    }
    
    .capitalize {
        text-transform: capitalize;
    }
    
    .startHereTitles {
        font-size: 14px;
        font-weight: 600;
        line-height: 17px;
        font-family: var(--gabFontA) !important;
        color: #747282;
    }
    
    .startHereSubText {
        font-size: 12px;
        font-weight: 600;
        line-height: 17px;
        font-family: var(--gabFontA) !important;
        color: #747282;
        margin-bottom: 0px !important;
        opacity: .5;
    }
    
    
    .active_lecture {
        background: lightgray;
    }
    /* ------------------links------------------- */
    
    .gbExtraLink {
        color: gray !important;
    }
    
    .gabIndexTitle {
        font-size: 22px;
        color: var(--adminFontColorBold);
        font-weight: 600;
        font-family: var(--gabFontA) !important;
    }
    
    
    /* ------------------trixEditor------------------- */
    trix-editor {
        min-height: 300px;
    }
    
    trix-toolbar .trix-button-row {
      flex-wrap: wrap;
    }
    
    trix-toolbar .trix-button-group {
        font-size: 8px;
    }
    
    trix-editor .trix-button--remove {
        color: var(--adminAccentColor);
        position: absolute;
        top: 0;
        right: -8px;
    }
    
    
    /* ------------------overridingBootstrap------------------- */
    
      btn {
          font-family: var(--gabFontA) !important;
      }
    
    .nav-pills .nav-link {
        /*background: #dfdfdf;*/
        /*border-radius: 0px;*/
        /*border-bottom: 4px solid var(--adminAccentColor) !important;*/
        color: #53595b !important;
        padding: 0px 20px 10px 0px;
    }
    
    .nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
        background: none !important;
        color: #0d161a !important;
        border-radius: 0px !important;
        border-bottom: 2px solid #0d161a;
        padding-bottom: 10px;
        
        
    }
    
    
    .nav-tabs .nav-link:hover {
        border: none;
        background: red;
    }
    
    .card {
        border: none !important;
        box-shadow: var(--gabShadowLarge) !important;
    }
    .btn-toggle-nav a {
        line-height: 15px !important;
        padding: 10px 12px !important;
    }
    
    .progress-bar {
        background-color: var(--adminAccentColor) !important;
    }
    
    
    tr {
        border: 0px solid #eae8e8 !important;
        font-size: 15px !important;
        background: white !important;
    }
    
    .bg-primary {
        background-color: var(--adminAccentColor) !important;
        color: #e1dddd !important;
        
    }
    
    .bg-secondary {
        background-color: #edeff0 !important;
        color: var(--adminFontColorRegular) !important;
        font-weight: 500 !important;
    }
    
    
    .bg-success {
        background-color: var(--adminAccentColorFontColor) !important;
        color: var(--adminAccentColor) !important;
        font-weight: 800 !important;
    }
    
    .badge {
       border-radius: 50px;
        padding: 9px 11px;
        font-size: 9px;
        margin: 1px;
    }
    
    .table-group-divider {
        border: none!important;
    }
    input[type=checkbox] {
      accent-color: var(--adminAccentColor);
        
    }
    
    .form-control:focus {
        border: 1px solid  var(--adminAccentColor) !important;
    }
    
    .btn-primary {
      background: var(--adminAccentColor) !important;
      border: none !important;
        
    }
    
    .text-bg-primary {
        background: none !important;
        color: var(--adminAccentColor) !important;
        border: 1px solid var(--adminAccentColor) !important;
    }
    
    .modal-header {
        border-bottom: none !important;
    }
    
    .modal-footer {
        border-top: none !important;
        
    }
    /* ------------------tables------------------- */
    
    .table {
      border-bottom: var(--appBorderLight);
    }
    
    .gabTableBorder {
    /*  border: var(--appBorderLight);*/
    /*padding: 20px;*/
    /*border-radius: 8px;*/
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1), 0 1px 3px 0 rgba(0,0,0,.06);
    }
    
    /*larger than 800*/
    /*@media not all and (max-width: 860px) {*/
    /*    .gabTableNarrow {*/
    /*        margin: 0px 10vw 0px 0px;*/
    /*    }*/
    /*}*/
    th {
        padding: 20px !important;
        border: 0px solid white;
        
    }
    
    td {
        padding: 16px 25px !important;
        border: 0px solid white;
        color: var(--adminFontColorRegular);
        line-height: 14px !important;
    }
    
    .total_row {
       background: white;
        padding: 18px 20px;
        font-weight: bold;
    }
    
    .totals_item {
        text-align: right;
        color: gray;
    }
    
    .heighlighted_item {
        font-weight: bold;
        font-size: 120%;
        padding-bottom: 12px;
    }
    
    .final_price {
        color: black;
        font-size: 160%;
    }
    
    .gabTableStriped>tbody>tr:nth-child(odd)>td{
       background-color: #fafafa !important; 
     }
     
     
    /* ------------------gabTables------------------- */
    .gabTableHeader {
        background: white;
        color: black;
        padding: 20px 0px;
        font-size: 14px;
        border-bottom: 1px solid lightgray;
    }
    
    .gabTableHeaderRow {
        background: white;
        color: gray;
        padding: 20px 0px;
        font-size: 14px;
    }
    
    .addButton {
        background: white;
        color: lightgray;
        font-size: 30px;
        padding: 10px;
        border-radius: 30px;
        width: 50px;
        height: 50px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 25px;
    }
    
    .smallRoundedButton {
        background: none;
        color: gray;
        font-size: 15px;
        padding: 10px;
        border-radius: 30px;
        width: 50px;
        height: 50px;
        text-align: center;
        margin-top: 10px;
    }
    
    
    .gabEditButton {
           margin-bottom: 0px;
        text-align: center;
        background: none !important;
        border: 1px solid #caccd6;
        border-radius: 4px;
        padding: 8px 16px; 
        color: var(--adminAccentColor) !important;
        text-transform: uppercase;
        font-size: 12px;
    }
    
    th {
        color: var(--adminFontColorRegular) !important;
        font-family: var(--gabFontA) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
         height: 50px;
          vertical-align: middle;
          line-height: 15px;
        
    }
    
    .gabTableTextFirstCol, .gabTableTextFirstCol a {
        /*color: var(--adminFontColorRegular) !important;*/
        /*font-family: var(--gabFontA) !important;*/
        /*font-size: 14px !important;*/
        /*font-weight: 600 !important;*/
        
        color: var(--adminFontColorRegular) !important;
        font-family: var(--gabFontA) !important;
        font-size: 14px !important;
        font-weight: 300 !important;
    }
    
    
    .gabTableText {
        color: var(--adminFontColorRegular) !important;
        font-family: var(--gabFontA) !important;
        font-size: 14px !important;
        font-weight: 300 !important;
    }
    /* ------------------extraStuff------------------- */
    .dataTables_filter label {
        width: 100% !important;
        margin-bottom: 5px;
    }
    
    /* ------------------messaging------------------- */
    .message-sent, .message-received {
      padding: 0;
    }
    
    .message-received  {
      text-align: left;
    }
    
    .message-sent  {
      text-align: right;
    }
    
    .message-received .bubble {
      border-radius: 200px 200px 200px 0px;
    }
    
    .message-sent .bubble {
      border-radius: 200px 0px 200px 200px;
      background: #a2a2a2;
      color: white !important;
    }
    
    .bubble {
        padding: 10px 16px;
        border-radius: 16px;
        background-color: #fbfafa;
        border: none !important;
        display: inline-block;
        vertical-align: middle;
        line-height: 22px;
        cursor: pointer;
        max-width: 97%;
        user-select: none;
        color: #9a9d9f !important;
        font-size: 12px;
        min-width: 100px;
          margin-top: 10px;
          line-height: 14px;

    }
    
    /*.message-sent .bubble {*/
    /*  background: var(--adminAccentColor);*/
    /*  color: whitesmoke;*/
        
    /*}*/
    
    .timestamp {
        margin: 8px 0;
        margin-top: 0px;
        margin-bottom: 5px;
    }
    .avatar {
        border-radius: 50%;
        background: linear-gradient(to top right, rgb(252, 74, 26), rgb(247, 183, 51));
        display: inline-block;
        width: 25px;
        height: 20px;
        vertical-align: top;
        color: #fff;
        font-size: 10px;
        text-align: center;
        padding-top: 5px;
    }
    .time {
        display: inline-block;
        font-size: 8px;
        color: #d9d9d9;
        margin: 0 5px;
        text-transform: uppercase;
    }
    
    
    
    /* ------------------vidoe------------------- */
    
    video {
      width: 100%;
      height: auto;
    }
    
    .gabAdminVideo, .video-js, .vjs-tech {
        border-radius: 10px !important;
        overflow: hidden;
    }
    
    .vjs-no-js {
        display: none !important;
    }
    .vjs-poster img {
        height:100%;
        width:100%;
    }
    .video-js img {
        height:100%;
        width:100%;
    }

    /* ------------------extraStuff------------------- */

    #company_time_zone  {
        background-color: var(--colorAExtraLite) !important;
        border: none;
        padding: 10px;
        border-radius: var(--gab_border_radius) !important;
    }
    
    .swal2-popup {
        background: var(--adminAccentColor) !important;
    }
    
    #swal2-content {
        color: white !important;
    }
    
    body.swal2-no-backdrop .swal2-shown.swal2-center {
        
        top: 90% !important;
        left: 84% !important;
        width: 260px !important;
    }
    
    .swal2-header {
        height: 0px;
    }
    
    #proposal_proposal_info .attachment__caption {
        display: none !important;
    }