:root {

      --main-color: blueviolet;
      --main-color-warning: rgb(226, 165, 43);
      --main-color-danger: rgb(226, 64, 43);
      --main-color-disabled: rgb(208, 208, 208);
      --main-color-outline: rgb(255, 255, 255);

      --cds-interactive-01: #0f92fe;
      --cds-interactive-02: #393939;
      --cds-interactive-03: #0f62fe;
      --cds-interactive-04: #0f62fe;
      --cds-ui-background: #ffffff;
      --cds-ui-01: #f4f4f4;
      --cds-ui-02: #ffffff;
      --cds-ui-03: #e0e0e0;
      --cds-ui-04: #8d8d8d;
      --cds-ui-05: #161616;
      --cds-text-01: #161616;
      --cds-text-02: #393939;
      --cds-text-03: #a8a8a8;
      --cds-text-04: #ffffff;
      --cds-text-05: #6f6f6f;
      --cds-icon-01: #161616;
      --cds-icon-02: #525252;
      --cds-icon-03: #ffffff;
      --cds-link-01: #0f62fe;
      --cds-inverse-link: #78a9ff;
      --cds-field-01: #f4f4f4;
      --cds-field-02: #ffffff;
      --cds-inverse-01: #ffffff;
      --cds-inverse-02: #393939;
      --cds-support-01: #da1e28;
      --cds-support-02: #24a148;
      --cds-support-03: #f1c21b;
      --cds-support-04: #0043ce;
      --cds-inverse-support-01: #fa4d56;
      --cds-inverse-support-02: #42be65;
      --cds-inverse-support-03: #f1c21b;
      --cds-inverse-support-04: #4589ff;
      --cds-overlay-01: rgba(22, 22, 22, 0.5);
      --cds-danger: #da1e28;
      --cds-focus: #0f62fe;
      --cds-inverse-focus-ui: #ffffff;
      --cds-hover-primary: #1577c7;
      --cds-active-primary: #002d9c;
      --cds-hover-primary-text: #0043ce;
      --cds-hover-secondary: #4c4c4c;
      --cds-active-secondary: #6f6f6f;
      --cds-hover-tertiary: #0353e9;
      --cds-active-tertiary: #002d9c;
      --cds-hover-ui: #e5e5e5;
      --cds-active-ui: #c6c6c6;
      --cds-selected-ui: #e0e0e0;
      --cds-inverse-hover-ui: #4c4c4c;
      --cds-hover-selected-ui: #cacaca;
      --cds-hover-danger: #ba1b23;
      --cds-active-danger: #750e13;
      --cds-hover-row: #e5e5e5;
      --cds-visited-link: #8a3ffc;
      --cds-disabled-01: #f4f4f4;
      --cds-disabled-02: #c6c6c6;
      --cds-disabled-03: #8d8d8d;
      --cds-highlight: #d0e2ff;
      --cds-skeleton-01: #e5e5e5;
      --cds-skeleton-02: #c6c6c6;
      --cds-brand-01: #0f62fe;
      --cds-brand-02: #393939;
      --cds-brand-03: #0f62fe;
      --cds-active-01: #c6c6c6;
      --cds-hover-field: #e5e5e5;
  }


  A:link {
      text-decoration: none;
      color: #ff00c3;
  }

  A:visited {
      text-decoration: none;
      color: #ff00c3;
  }

  A:hover {
      text-decoration: none;
      color: #ff00c3;
  }

  A:active {
      text-decoration: none;
      color: #ff00c3;
  }




  html {
      background-color: #fafafa;
      font-family: 'Roboto Flex';
      font-style: normal;
      font-weight: 300;
      font-size: 18px;
  }

  html,
  body {
      height: 100%;
      margin: 0px;
  }

  * {
      box-sizing: border-box;
  }

  .wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      align-items: center;
  }

  .header {
      z-index: 1000 !important;
  }

  .topLogo {
      top: 0px;
      left: 0px;
      width: 55px;
      height: 55px;
      position: fixed;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
  }

  .main {
      margin: 0px;
      width: 100%;
      min-height: 100%;
      z-index: 500;
      padding-left: 55px;
      box-sizing: border-box;
      transition: padding-left 200ms ease;
  }

  .main .row::after {
      display: none;
  }

  body.menu-open .main {
      padding-left: 190px;
      transition: padding-left 600ms ease;
  }

  /* Shared horizontal page margin — keep left/right consistent across all pages.
     Top differs: .content has topBar so needs 70px clearance; .platformPage is flush. */
  .content,
  .platformPage {
      margin-left: 60px;
      margin-right: 60px;
  }

  .content {
      margin-top: 80px;
  }

  .pageActions {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      justify-content: flex-end;
      margin-bottom: 16px;
  }

  .platformPage {
      margin-top: 80px;
      padding-bottom: 10px;
  }

  .main .row {
      display: flex;
      flex-wrap: nowrap;
      gap: 2%;
  }

  .main .row>[class*="column"] {
      margin-left: 0 !important;
      display: flex;
      flex-direction: column;
  }

  .main .row>[class*="column"]>.graphModule {
      flex: 1 1 auto;
      height: 100%;
  }

  .main .row>[class*="column"] {
      width: auto !important;
      min-width: 0;
      flex-basis: 0;
  }

  .main .row>.one.columns {
      flex-grow: 1;
  }

  .main .row>.two.columns {
      flex-grow: 2;
  }

  .main .row>.three.columns {
      flex-grow: 3;
  }

  .main .row>.four.columns,
  .main .row>.one-third.column {
      flex-grow: 4;
  }

  .main .row>.five.columns {
      flex-grow: 5;
  }

  .main .row>.six.columns,
  .main .row>.one-half.column {
      flex-grow: 6;
  }

  .main .row>.seven.columns {
      flex-grow: 7;
  }

  .main .row>.eight.columns,
  .main .row>.two-thirds.column {
      flex-grow: 8;
  }

  .main .row>.nine.columns {
      flex-grow: 9;
  }

  .main .row>.ten.columns {
      flex-grow: 10;
  }

  .main .row>.eleven.columns {
      flex-grow: 11;
  }

  .main .row>.twelve.columns,
  .main .row>.twelve.column {
      flex-grow: 12;
  }

  .topBar {
      top: 0px;
      left: 55px;
      right: 0;
      height: 55px;
      position: fixed;
      display: flex;
      align-items: center;
      flex-direction: row;
      z-index: 100;
      background-color: var(--main-color) !important;
      color: #fff;
      overflow: hidden;
      box-sizing: border-box;
      transition: left 200ms ease;
  }

  body.menu-open .topBar {
      left: 190px;
      transition: left 600ms ease;
  }

  .topBar .spacer {
      flex: 0 0 55px;
      background-color: var(--main-color);
  }

  .topBar .useArea {
      flex: 1 1 0;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 60px;
      padding-right: 60px;
      background-color: var(--main-color);
      color: #fff;
      min-width: 0;
      gap: 15px;
      overflow: hidden;
  }

  .topBar .useArea .defaultButton {
      flex: 0 0 auto;
  }

  .topBar .useArea .reportLabel+.defaultButton {
      margin-left: auto;
  }

  .topBar .reportLabel {
      min-width: 0;
      flex: 0 1 auto;
  }

  .topBar .reportTitle {
      text-transform: uppercase;
  }

  .topBarRight {
      flex: 0 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      padding-right: 20px;
  }

  .topBar .reportLabel {
      font-size: 32px;
      font-weight: 100;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .reportList {
      list-style: none;
      padding: 0;
      margin: 0;
      max-height: 400px;
      overflow-y: auto;
  }

  .reportListItem {
      padding: 12px 16px;
      border-bottom: 1px solid #f1f3f6;
      cursor: pointer;
      text-transform: uppercase;
      font-size: 14px;
      color: #1f2937;
      transition: background 0.15s;
  }

  .reportListItem:hover {
      background: #f5f5f5;
  }

  .reportListItem.active {
      background: var(--main-color);
      color: #fff;
      font-weight: 600;
  }

  .topBar .userName {
      display: flex;
      align-items: center;
      font-size: 13px;
      text-transform: uppercase;
      color: #fff;
      white-space: nowrap;
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      user-select: none;
      transition: background .15s;
  }

  .topBar .userName:hover {
      background-color: rgba(255, 255, 255, .15);
  }

  .topBar .defaultButton {
      background-color: #fff;
      color: var(--main-color);
  }

  .topBar .defaultButton:hover {
      background-color: rgba(255, 255, 255, 0.9);
      color: var(--main-color);
  }

  /* Grey topbar variant for non-dashboard pages */
  .topBar.platformBar {
      background-color: #f3f4f6 !important;
      color: #1f2937;
      border-bottom: 1px solid #e5e7eb;
  }

  .topBar.platformBar .useArea {
      background-color: #f3f4f6;
      color: #1f2937;
      justify-content: flex-end;
  }

  .topBar.platformBar .userName {
      color: #1f2937;
  }

  .topBar.platformBar .userName:hover {
      background-color: rgba(0, 0, 0, .05);
  }

  .userMenuWrap {
      position: relative;
  }

  .userMenuDropdown {
      position: fixed;
      min-width: 160px;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
      padding: 6px;
      display: none;
      z-index: 2000;
  }

  .userMenuDropdown.show {
      display: block;
  }

  .userMenuDropdown form {
      margin: 0;
  }

  .userMenuItem {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      background: transparent;
      border: 0;
      border-radius: 6px;
      font-size: 13px;
      color: #1f2937;
      text-align: left;
      cursor: pointer;
      transition: background .12s;
  }

  .userMenuItem:hover {
      background-color: #f3f4f6;
      color: var(--main-color);
  }

  .leftMenu {
      position: fixed;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin: 0px !important;
      left: 0px;
      top: 0px;
      height: 100%;
      width: 55px;
      background-color: #efefef;
      list-style-type: none;
      padding-inline-start: 0px;
      transition: all 200ms ease;
      overflow: hidden;
      z-index: 1000 !important;
      box-shadow: 10px 10px 30px rgba(0, 0, 0, 0);

  }

  .leftMenu:hover,
  .leftMenu.open,
  body.menu-open .leftMenu {
      transition: all 600ms ease;
      width: 190px;
      box-shadow: 10px 10px 30px rgb(0, 0, 0, 0.4);
  }

  body.preload,
  body.preload * {
      transition: none !important;
  }


  .leftMenu li {
      cursor: pointer;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      height: 55px;
      font-size: 12px;
      color: #222 !important;
      background-color: #ddd;
      border-bottom: #fff solid 1px;
      filter: grayscale(100%) opacity(.5);

  }

  .leftMenu li:hover {
      filter: grayscale(0%) opacity(1);
  }

  .leftMenu li a {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-start;
  }

  .leftMenu li a:visited, .leftMenu li a:link {
      color: #444 !important;
  }

  .leftMenu li a:hover {
      color: rgb(0, 0, 0) !important;
      background-color: #cffffb;
  }

  .leftMenu li i {
      color: rgb(149, 0, 255);
      font-size: 18px;

  }

  .leftMenu .iconContainer {
      width: 55px;
      height: 55px;
      display: flex;
      justify-content: center;
      align-items: center;

  }

  .leftMenu .title {
      width: 145px;
      height: 55px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
  }


  .footer {
      margin-top: 30px;
      padding: 20px 30px;
      margin-left: 55px;
      background-color: #f0eef8;
      border-top: 1px solid #e2ddf0;
      text-align: right;
      font-size: 13px;
      color: #6b7280;
      transition: margin-left 200ms ease;
  }

  body.menu-open .footer {
      margin-left: 190px;
      transition: margin-left 600ms ease;
  }

  .loginFormWrapper {
      width: 400px;
      height: 400px;
      padding: 20px;
      /* border: 1px solid #444; */
  }

  .loginFormWrapper .itensAlign {
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
  }

  .graphModule {
      display: flex;
      flex-direction: column;
      /* height:280px; */
      border: 1px solid #ddd;
      border-radius: 5px;
      color: #444 !important;
      overflow: hidden;
  }

  .graphModule tspan {
      font-family: 'Roboto Flex' !important;
  }

  .graphModule text {
      font-family: 'Roboto Flex' !important;
  }

  .module {
      height: 280px !important;
  }


  .graphModule .graphTitle {
      text-transform: uppercase;
      font-size: 12px;
      padding: 10px;
  }

  .graphModule .graphContainer {
      padding-left: 10px;
      padding-right: 10px;
      height: 100%;
  }

  .graphModule .graphTop {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: stretch;
      width: 100%;
      background-color: #eee;
      position: relative;
  }

  .graphModule .graphIcon {
      width: 5px;
      background-color: #53d1ff;
  }

  .graphModule .graphToggle {
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      margin: 0;
      padding: 0;
      background: rgba(0, 0, 0, 0.06);
      border: 0;
      color: #555;
      width: 22px;
      height: 22px;
      border-radius: 100px;
      font-size: 11px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background-color .15s, color .15s;
  }

  .graphModule .graphToggle:hover {
      background: var(--main-color, #53d1ff);
      color: #fff;
  }

  .row {
      margin-bottom: 20px;
  }

  .flickity-page-dots {
      bottom: 10px !important;
  }

  .flickity-button {}

  /* Platform: page header */
  .platformPage .pageHead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 25px;
  }

  .platformPage .pageTitle {
      font-size: 30px;
      font-weight: 100;
      color: #2b2f33;
      margin: 0;
      text-transform: uppercase;
      letter-spacing: .03em;
  }

  /* Platform buttons — defaultButton + color/size variants */
  .defaultButton {
      background-color: var(--main-color);
      color: #fff;
      border: 1px solid transparent;
      height: 30px;
      padding: 0 15px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .04em;
      cursor: pointer;
      transition: opacity .15s, background-color .15s, color .15s, border-color .15s;
      margin-bottom: 0;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }

  .defaultButton span {
      margin-top: 2px;
  }

  .defaultButton:hover {
      opacity: .85;
      color: #fff;
  }

  .defaultButton i {
      margin-right: 6px;
  }

  /* Color variants */
  .defaultButton.warning {
      background-color: var(--main-color-warning);
      color: #fff;
      border-color: transparent;
  }

  .defaultButton.warning:hover {
      color: #fff;
  }

  .defaultButton.danger {
      background-color: var(--main-color-danger);
      color: #fff;
      border-color: transparent;
  }

  .defaultButton.danger:hover {
      color: #fff;
  }

  .defaultButton.outline {
      background-color: var(--main-color-outline);
      color: var(--main-color);
      border-color: var(--main-color);
  }

  .defaultButton.outline:hover {
      color: var(--main-color);
      background-color: var(--main-color-outline);
  }

  .defaultButton.disabled,
  .defaultButton:disabled {
      background-color: var(--main-color-disabled);
      color: #fff;
      border-color: transparent;
      cursor: not-allowed;
      pointer-events: none;
      opacity: 1;
  }

  /* Size variants */
  .defaultButton.small {
      height: 24px;
      padding: 0 10px;
      font-size: 10px;
  }

  .defaultButton.big {
      height: 40px;
      padding: 0 24px;
      font-size: 14px;
  }

  .defaultButton.circle {
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 50%;
      font-weight: 700;
      font-size: 12px;
  }

  .defaultButton.circle i {
      margin-right: 0;
  }

  .cachedReportItem {
      display: flex;
      align-items: center;
      gap: 16px;
      text-transform: none;
  }

  .cachedReportItem .cachedIndex {
      flex: 0 0 40px;
      font-weight: 700;
      color: var(--main-color);
      font-size: 14px;
  }

  .cachedReportItem .cachedDays {
      flex: 0 0 80px;
      font-weight: 600;
      font-size: 13px;
  }

  .cachedReportItem .cachedRange {
      flex: 1 1 auto;
      color: #6b7280;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .cachedReportItem:hover .cachedRange {
      color: #1f2937;
  }

  .cachedReportItem .cachedDeleteBtn {
      flex: 0 0 auto;
      margin-left: auto;
      color: #b00020;
      cursor: pointer;
      padding: 4px 6px;
      font-size: 14px;
  }

  .cachedReportItem .cachedDeleteBtn:hover {
      color: #7a0014;
  }

  .btnPrimary {
      background: var(--main-color);
      border: 0;
      color: #fff;
      height: 36px;
      padding: 0 18px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: opacity .15s;
  }

  .btnPrimary:hover {
      opacity: .9;
  }

  .btnSecondary {
      background: #fff;
      border: 1px solid #e5e7eb;
      color: #4b5563;
      height: 36px;
      padding: 0 16px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      transition: background .15s;
  }

  .btnSecondary:hover {
      background: #f7f8fa;
  }

  .btnDanger {
      background: #dc2626;
      border: 0;
      color: #fff;
      height: 36px;
      padding: 0 18px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: opacity .15s;
  }

  .btnDanger:hover {
      opacity: .9;
  }

  /* Modal system */
  .gmModalOverlay {
      position: fixed;
      inset: 0;
      background: rgba(20, 20, 30, .45);
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
  }

  .gmModalOverlay.show {
      display: flex;
  }

  .gmModal {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
      width: 460px;
      max-width: 90vw;
      overflow: hidden;
  }

  .gmModal .head {
      padding: 17px 22px;
      border-bottom: 1px solid #eef0f3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #eee;
  }

  .gmModal .head h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      text-transform: uppercase;
      letter-spacing: .03em;
  }

  .gmModal .head .close {
      background: 0;
      border: 0;
      color: #9aa1ab;
      font-size: 20px;
      cursor: pointer;
      line-height: 1;
  }

  .gmModal .body {
      padding: 22px;
  }

  .gmModal .row {
      margin-bottom: 14px;
  }

  .gmModal label {
      display: block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: #6b7280;
      margin-bottom: 6px;
      font-weight: 500;
  }

  .gmModal input[type="text"],
  .gmModal input[type="email"],
  .gmModal input[type="password"],
  .gmModal input[type="number"],
  .gmModal select,
  .gmModal textarea {
      width: 100%;
      height: 38px;
      padding: 0 12px;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      font-size: 14px;
      outline: none;
      transition: border-color .15s;
      box-sizing: border-box;
      background: #fff;
      font-family: inherit;
  }

  .gmModal textarea {
      height: auto;
      padding: 10px 12px;
      resize: vertical;
      min-height: 80px;
  }

  .gmModal input:focus,
  .gmModal select:focus,
  .gmModal textarea:focus {
      border-color: var(--main-color);
  }

  .gmModal .foot {
      padding: 14px 22px;
      border-top: 1px solid #eef0f3;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
  }

  .gmModal .foot .alert {
      color: #f59e0b;
      font-size: 13px;
      flex: 1;
  }

  .daterangepicker td.end-date {
      border-radius: 0 12px 12px 0 !important;
  }

  .daterangepicker td.start-date {
      border-radius: 12px 0 0 12px !important;
  }

  /* .daterangepicker td.in-range {
      background-color: var(--main-color);
      border-color: transparent;
      color: #ffffff;
      border-radius: 0;
  } */