@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* HTML font size and scaling */

/* html {height:100%}  */

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
}

#main {
  min-height: 100vh;
  padding: 0.4rem 0px;
  display: flex;
  flex-direction: column;
}

#page-wrapper {
  padding: 1rem;
  flex: 1 1 auto;
}

/* HTML font size and scaling */

html {
  font-size: 62.5%; /* 62.5% of 16px = 10px */
}

@media (min-width: 1600px) {
  html {
      font-size: 62.5%;
  }
}
@media (min-width: 1920px) {
  html {
      font-size: 62.5%;
  }
}
@media (min-width: 2560px) {
  html {
      font-size: 62.5%;
  }
}
@media (min-width: 3840px) {
  html {
      font-size: 62.5%;
  }
}

/* Auto-scaling disabled */

@media (min-width: 1600px) {
  html.auto-scaling-disabled {
      font-size: 62.5%;
  }
}
@media (min-width: 1920px) {
  html.auto-scaling-disabled {
      font-size: 62.5%;
  }
}
@media (min-width: 2560px) {
  html.auto-scaling-disabled {
      font-size: 62.5%;
  }
}
@media (min-width: 3840px) {
  html.auto-scaling-disabled {
      font-size: 62.5%;
  }
}

/* Auto-scaling disabled */
@media (min-width: 1600px) {
  html.auto-scaling-disabled {
      font-size: 10px;
  }
}
@media (min-width: 1920px) {
  html.auto-scaling-disabled {
      font-size: 10px;
  }
}
@media (min-width: 2560px) {
  html.auto-scaling-disabled {
      font-size: 10px;
  }
}
@media (min-width: 3840px) {
  html.auto-scaling-disabled {
      font-size: 10px;
  }
}

/* DOM body */
body {
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 400;
}
.dark-mode {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
}

.font-heading {
  font-family: var(--font-heading);
}

.font-normal {
  font-family: var(--font-body);
}

.btn span.material-icons {
  vertical-align: middle;
  font-size: 1.6rem;
  padding-bottom: 2px;
}

.lm-hidden {
  display: initial;
}
.dark-mode .lm-hidden {
  display: none;
}

.dm-hidden {
  display: none;
}
.dark-mode .dm-hidden {
  display: initial;
}

.material-icons, .material-icons-outlined,
.material-icons-round, .material-icons-sharp,
.material-icons-two-tone {
  line-height: 1;
  font-size: 1.6rem;
  vertical-align: middle;
}

/* .material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
} */

.mi-topic {
  color: transparent;
  background: rgb(255 208 25);
  background-clip: text;
  -webkit-background-clip: text;
}

.ck-editor .ck-content {
  background: var(--lm-body-backgroud-color);
  color: var(--lm-base-text-color);
}

.dark-mode .ck-editor .ck-content {
  background: var(--dm-body-backgroud-color) !important;
  color: var(--dm-base-text-color);
}

/*** COLORS *************************************/
body {
  background-color: var(--lm-body-backgroud-color);
  background-image: var(--lm-body-backgroud-gradient);
  color:var(--lm-base-text-color);
}
body.dark-mode {
  background-color: var(--dm-body-backgroud-color);
  background-image: var(--dm-body-backgroud-gradient);
  color: var(--dm-base-text-color);
}
/*
-------------------------------------------------------------------------------
3.  Scrollbars [hm-03]

Notes:
    ~ Any scrollbars on the body itself is not affected. This is because the 
    page-wrapper is always expected, as the entire framework is built around 
    it.
    ~ Only styled on screens larger than 768px, because mobiles and tablets 
    have disappearing scrollbars, which look great most of the time.
    ~ The webkit scrollbars work on webkit based browsers, such as Chrome, 
    Safari, Brave, and the new Microsoft Edge.
    ~ The custom CSS scrollbars work only on Firefox as of 2020. It is a very 
    new specification.
-------------------------------------------------------------------------------
*/

@media (min-width: 769px) {
  /* Base scrollbar */

  body.with-custom-webkit-scrollbars::-webkit-scrollbar {
      width: 1.4rem;
      height: 1.4rem;
      background-color: transparent;
  }
  body.dark-mode.with-custom-webkit-scrollbars::-webkit-scrollbar {
      background-color: transparent;
  }
  body.with-custom-webkit-scrollbars::-webkit-scrollbar-track:vertical {
      border-left: 1px solid rgba(0, 0, 0, 0.1);
  }
  body.with-custom-webkit-scrollbars::-webkit-scrollbar-track:horizontal {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  body.dark-mode.with-custom-webkit-scrollbars::-webkit-scrollbar-track {
      border-color: rgba(255, 255, 255, 0.05);
  }
  body.with-custom-webkit-scrollbars::-webkit-scrollbar-thumb {
      min-width: 3rem;
      min-height: 3rem;
      background-color: rgba(0, 0, 0, 0.25);
      border: 0.4rem solid transparent;
      -moz-background-clip: content;     /* Firefox 3.6 */
      -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
      background-clip: content-box;
      border-radius: 1rem;
  }
  body.with-custom-webkit-scrollbars::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, 0.4);
      border-color: transparent;
  }
  body.dark-mode.with-custom-webkit-scrollbars::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.25);
      border-color: transparent;
  }
  body.dark-mode.with-custom-webkit-scrollbars::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.4);
      border-color: transparent;
  }
  body.with-custom-webkit-scrollbars::-webkit-scrollbar-corner {
      background-color: transparent;
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  body.dark-mode.with-custom-webkit-scrollbars::-webkit-scrollbar-corner {
      background-color: transparent;
      border-color: rgba(255, 255, 255, 0.05);
  }

  body.with-custom-css-scrollbars {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
  }
  body.dark-mode.with-custom-css-scrollbars {
      scrollbar-color: rgba(255, 255, 255, 0.25) #25282c;
  }

  /* Sidebar scrollbar */

  .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar {    
      width: 0.5rem;
      height: 0.5rem;
      background-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar {
      background-color: transparent;
  }
  .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-track {
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-track {
      border-color: rgba(255, 255, 255, 0.05);
  }
  .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.25);
      border-width: 0.4rem;
      border-color: transparent;
      border-radius: 1rem;
  }
  .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, 0.4);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.25);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.4);
      border-color: transparent;
  }
  .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-corner {
      background-color: transparent;
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-corner {
      background-color: transparent;
      border-color: rgba(255, 255, 255, 0.05);
  }

  .with-custom-css-scrollbars .sidebar {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
  }
  .dark-mode.with-custom-css-scrollbars .sidebar {
      scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
  }

  /* Modal scrollbar */
  
  .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar,
  .with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body::-webkit-scrollbar {
      width: 1.0rem;
      height: 1.4rem;
      background-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar,
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body::-webkit-scrollbar {
      background-color: transparent;
  }
  .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-track,
  .with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
      border-width: 1px;
      border-color: rgba(255, 255, 255, 0.05);
  }
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-track,
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
      border-color: rgba(255, 255, 255, 0.05);
  }
  .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb,
  .with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.25);
      border-width: 0.4rem;
      border-color: transparent;
      border-radius: 1rem;
  }
  .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb:hover,
  .with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.4);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb,
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.25);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb:hover,
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.4);
      border-color: transparent;
  }
  .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-corner,
  .with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body::-webkit-scrollbar-corner {
      background-color: transparent;
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-corner,
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body::-webkit-scrollbar-corner {
      background-color: transparent;
      border-color: rgba(255, 255, 255, 0.05);
  }

  .with-custom-css-scrollbars .modal-dialog,
  .with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }
  .dark-mode.with-custom-css-scrollbars .modal-dialog,
  .dark-mode.with-custom-webkit-scrollbars .modal-dialog-scrollable .modal-body {
      scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }

  /* Full screen modal scrollbar */
  
  .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar {
      width: 1.4rem;
      height: 1.4rem;
      background-color: #ffffff;
  }
  .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar {
      background-color: #191c20;
  }
  .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-track {
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-track {
      border-color: rgba(255, 255, 255, 0.05);
  }
  .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.25);
      border-width: 0.4rem;
      border-color: transparent;
      border-radius: 1rem;
  }
  .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, 0.4);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.25);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.4);
      border-color: transparent;
  }
  .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-corner {
      background-color: #ffffff;
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-corner {
      background-color: #191c20;
      border-color: rgba(255, 255, 255, 0.05);
  }

  .with-custom-css-scrollbars .modal-full .modal-dialog {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
  }
  .dark-mode.with-custom-css-scrollbars .modal-full .modal-dialog {
      scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
  }

  /* Card scrollbar */

  .with-custom-webkit-scrollbars .card::-webkit-scrollbar {
      width: 1.4rem;
      height: 1.4rem;
      background-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar {
      background-color: transparent;
  }
  .with-custom-webkit-scrollbars .card::-webkit-scrollbar-track {
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-track {
      border-color: rgba(255, 255, 255, 0.05);
  }
  .with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.25);
      border-width: 0.4rem;
      border-color: transparent;
      border-radius: 1rem;
  }
  .with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, 0.4);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.25);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.4);
      border-color: transparent;
  }
  .with-custom-webkit-scrollbars .card::-webkit-scrollbar-corner {
      background-color: transparent;
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-corner {
      background-color: transparent;
      border-color: rgba(255, 255, 255, 0.05);
  }

  .with-custom-css-scrollbars .card {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
  }
  .dark-mode.with-custom-css-scrollbars .card {
      scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
  }

  /* Darshboard scrollbar */

  .with-custom-webkit-scrollbars .dashboard-wrapper::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
    background-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .dashboard-wrapper::-webkit-scrollbar {
      background-color: transparent;
  }
  .with-custom-webkit-scrollbars .dashboard-wrapper::-webkit-scrollbar-track {
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .dashboard-wrapper::-webkit-scrollbar-track {
      border-color: rgba(255, 255, 255, 0.05);
  }
  .with-custom-webkit-scrollbars .dashboard-wrapper::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.25);
      border-width: 0.4rem;
      border-color: transparent;
      border-radius: 1rem;
  }
  .with-custom-webkit-scrollbars .dashboard-wrapper::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, 0.4);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .dashboard-wrapper::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.25);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .dashboard-wrapper::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.4);
      border-color: transparent;
  }
  .with-custom-webkit-scrollbars .dashboard-wrapper::-webkit-scrollbar-corner {
      background-color: transparent;
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .dashboard-wrapper::-webkit-scrollbar-corner {
      background-color: transparent;
      border-color: rgba(255, 255, 255, 0.05);
  }

  .with-custom-css-scrollbars .dashboard-wrapper {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
  }
  .dark-mode.with-custom-css-scrollbars .dashboard-wrapper {
      scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
  }

  /* Darshboard scrollbar */

  .with-custom-webkit-scrollbars .dashboard-column-body::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
    background-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .dashboard-column-body::-webkit-scrollbar {
      background-color: transparent;
  }
  .with-custom-webkit-scrollbars .dashboard-column-body::-webkit-scrollbar-track {
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .dashboard-column-body::-webkit-scrollbar-track {
      border-color: rgba(255, 255, 255, 0.05);
  }
  .with-custom-webkit-scrollbars .dashboard-column-body::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.25);
      border-width: 0.4rem;
      border-color: transparent;
      border-radius: 1rem;
  }
  .with-custom-webkit-scrollbars .dashboard-column-body::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, 0.4);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .dashboard-column-body::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.25);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .dashboard-column-body::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.4);
      border-color: transparent;
  }
  .with-custom-webkit-scrollbars .dashboard-column-body::-webkit-scrollbar-corner {
      background-color: transparent;
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .dashboard-column-body::-webkit-scrollbar-corner {
      background-color: transparent;
      border-color: rgba(255, 255, 255, 0.05);
  }

  .with-custom-css-scrollbars .dashboard-column-body {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
  }
  .dark-mode.with-custom-css-scrollbars .dashboard-column-body {
      scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
  }

  /* Darshboard scrollbar */

  .with-custom-webkit-scrollbars .form-checkbox-list ul::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
    background-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .form-checkbox-list ul::-webkit-scrollbar {
      background-color: transparent;
  }
  .with-custom-webkit-scrollbars .form-checkbox-list ul::-webkit-scrollbar-track {
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .form-checkbox-list ul::-webkit-scrollbar-track {
      border-color: rgba(255, 255, 255, 0.05);
  }
  .with-custom-webkit-scrollbars .form-checkbox-list ul::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.25);
      border-width: 0.4rem;
      border-color: transparent;
      border-radius: 1rem;
  }
  .with-custom-webkit-scrollbars .form-checkbox-list ul::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, 0.4);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .form-checkbox-list ul::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.25);
      border-color: transparent;
  }
  .dark-mode.with-custom-webkit-scrollbars .form-checkbox-list ul::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.4);
      border-color: transparent;
  }
  .with-custom-webkit-scrollbars .form-checkbox-list ul::-webkit-scrollbar-corner {
      background-color: transparent;
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode.with-custom-webkit-scrollbars .form-checkbox-list ul::-webkit-scrollbar-corner {
      background-color: transparent;
      border-color: rgba(255, 255, 255, 0.05);
  }

  .with-custom-css-scrollbars .form-checkbox-list ul {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
  }
  .dark-mode.with-custom-css-scrollbars .form-checkbox-list ul {
      scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
  }

  /* CSS scrollbar with transparent track (utility class) */

  .with-custom-css-scrollbars .css-scrollbar-transparent-track {
      scrollbar-width: thin !important;
      scrollbar-color: rgba(0, 0, 0, 0.25) transparent !important;
  }
  .dark-mode.with-custom-css-scrollbars .css-scrollbar-transparent-track {
      scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
  }
}

/*** CARDS *************************************/

.blur {
  backdrop-filter: blur( 15.0px );
  -webkit-backdrop-filter: blur( 15.0px );  
}

.card {
  border-radius: var(--border-radius);
  background: rgb(255 255 255 / 100%);
  box-shadow:
    0 2.5px 10px -15px rgba(0, 0, 0, 0.112),
    0 12px 20px -15px rgba(0, 0, 0, 0.22)
  ;
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(0deg, rgb(110 110 110 / 10%), rgb(255 255 255));
}

.dark-mode .card {
    background: rgb(43 53 61 / 30%);
    box-shadow: 3px 3px 6px 0px rgb(21 21 21 / 10%), 0 12px 20px -16px rgb(0 0 0 / 22%);
    border-image-source: linear-gradient(0deg, rgb(0 0 0 / 10%), rgb(50 50 50 / 50%));
}

.border-gradient {
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(0deg, rgb(40 40 40 / 10%), rgb(255 255 255));
}

.dark-mode .border-gradient {
  border-image-source: linear-gradient(0deg, rgb(0 0 0 / 10%), rgb(50 50 50 / 50%));
}

.card .card {
  background: rgb(255 255 255 / 70%);
  box-shadow: 0 3px 4px 0px rgb(0 0 0 / 11%), 0 10px 25px -8px rgb(0 0 0 / 22%);
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(0deg, rgb(28 28 28 / 20%), rgb(255 255 255));
}

.dark-mode .card .card {
  background: rgb(26 35 42 / 28%);
  box-shadow: 0 3px 6px -4px rgb(6 6 6 / 18%), 0 12px 16px -6px rgb(0 0 0 / 22%);
  border-image-source: linear-gradient(0deg, rgb(0 0 0 / 10%), rgb(50 50 50 / 50%));
}

/*** ARTICLE CARDS ***********************************************************/

.card-article {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  background-color: var(--bs-white);

  border: 1px solid var(--bs-dark);
  border-radius: 1rem;

  padding: 2rem;
}

.dark-mode .card-article {
  background-color: transparent;
}

.card-article .card-article-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1rem;
}

.card-article .card-article-header .card-article-title a {
  text-decoration: none;
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: bold;
  color: var(--lm-base-text-color);
}

.dark-mode .card-article .card-article-header .card-article-title a {
  color: var(--dm-base-text-color);

}
  
.card-article .card-article-header .card-article-img {
  margin-left: 3rem;
  width: 10rem;
  height: 10rem;
}

.card-article .card-article-header .card-article-img img {
  object-fit: cover;
  height: 100%;
  min-width: 10rem;
  border-radius: 0.8rem;
}

.card-article .card-article-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.card-article .card-article-footer {
  margin-top: 1rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.card-article .card-article-footer .card-article-show-more {
  text-align: right;
}

.card-article .card-article-footer .card-article-show-more .show-more-btn span {
  transition: transform 0.2s ease-out;
}
.card-article .card-article-footer .card-article-show-more .show-more-btn.opened span {
  transform: rotate(180deg);
  transition: transform 0.2s ease-out;
}

#control {
  position: absolute;
}

/*** BLURS *************************************/

.blur {
  box-shadow: inset 0px 0px 2px #fefefed1;
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  backdrop-filter: saturate(200%) blur(30px);
  background-color: rgba(255, 255, 255, 0.8) !important;
}

.dark-mode .blur {
  box-shadow: inset 0px 0px 2px #242424d1;
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  backdrop-filter: saturate(200%) blur(30px);
  background-color: rgba(26, 26, 26, 0.5) !important;
}

.blur.saturation-less {
  -webkit-backdrop-filter: saturate(20%) blur(30px);
  backdrop-filter: saturate(20%) blur(30px);
}

.blur.blur-rounded {
  border-radius: 40px;
}

.blur.blur-light {
  background-color: rgba(255, 255, 255, 0.4);
}

.blur.blur-dark {
  background-color: rgba(0, 0, 0, 0.3);
}

.shadow-blur {
  box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9), 0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-card {
  box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

.navbar-blur {
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  backdrop-filter: saturate(200%) blur(30px);
  background-color: rgba(255, 255, 255, 0.58) !important;
}

.blur-section {
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  backdrop-filter: saturate(200%) blur(30px);
}

.blur-section.blur-gradient-primary {
  background-image: linear-gradient(310deg, rgba(121, 40, 202, 0.95) 0%, rgba(255, 0, 128, 0.95) 100%);
}

*.move-on-hover {
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  overflow: hidden;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: perspective(999px) rotateX(0deg) translate3d(0, 0, 0);
  transform: perspective(999px) rotateX(0deg) translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, box-shadow;
}

*.move-on-hover:hover {
  -webkit-transform: perspective(999px) rotateX(7deg) translate3d(0px, -4px, 5px);
  transform: perspective(999px) rotateX(7deg) translate3d(0px, -4px, 5px);
}

*.gradient-animation {
  background: linear-gradient(-45deg, #2152ff, #ea0606, #f53939, #7928CA, #252f40);
  background-size: 400% 400% !important;
  animation: gradient 10s ease infinite;
}


/*** HORIZONTAL RULE *************************************/

hr.vertical {
  position: absolute;
  background-color: transparent;
  height: 100%;
  right: 0;
  top: 0;
  width: 1px;
}

hr.vertical.light {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0));
}

hr.vertical.dark {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

hr.vertical.gray-light {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

hr.horizontal {
  background-color: transparent;
}

hr.horizontal {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.dark-mode hr.horizontal {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0));
}

hr.horizontal.gray-light {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

hr.horizontal.light {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0));
}

/*** COLORS ********************************************/
.bg-facebook {
  color: #FFFFFF;
  background-color: var(--facebook-color) !important;
}
.bg-instagram {
  color: #FFFFFF;
  background-color: var(--instagram-color) !important;
}
.bg-twitter {
  color: #FFFFFF;
  background-color: var(--twitter-color) !important;
}
.bg-youtube {
  color: #FFFFFF;
  background-color: var(--youtube-color) !important;
}

.bg-facebook:hover,
.bg-facebook:focus {
  color: #FFFFFF;
  background-color: var(--facebook-color-hover) !important;
}
.bg-instagram:hover,
.bg-instagram:focus {
  color: #FFFFFF;
  background-color: var(--instagram-color-hover) !important;
}
.bg-twitter:hover,
.bg-twitter:focus {
  color: #FFFFFF;
  background-color: var(--twitter-color-hover) !important;
}
.bg-youtube:hover,
.bg-youtube:focus {
  color: #FFFFFF;
  background-color: var(--youtube-color-hover) !important;
}
  
/*** Alternative BG COLORS *****************************/
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-success {
  background-color: var(--bs-success) !important;
}

.bg-info {
  background-color: var(--bs-info) !important;
}

.bg-warning {
  background-color: var(--bs-warning) !important;
}

.bg-danger {
  background-color: var(--bs-danger) !important;
}

.bg-light {
  background-color: var(--bs-light) !important;
}

.bg-dark {
  background-color: var(--bs-dark) !important;
}

.bg-dark-light {
  background-color: var(--bs-gray-light) !important;
}

.bg-body {
  background-color: var(--lm-body-backgroud-gradient) !important;
}

.dark-mode .bg-body {
  background-color: var(--dm-body-backgroud-gradient) !important;
}

.bg-white {
  background-color: var(--bs-white) !important;
}

.lm-bg-white {
  background-color: var(--bs-white);
}

.dark-mode .lm-bg-white {
  background-color: transparent;
}

.dark-mode .dm-bg-dark {
  background-color: var(--bs-dark);
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-gradient {
  background-image: var(--bs-gradient) !important;
}

.bg-gradient-blue {
  background: #0F2027;
  background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027);
}

.bg-purple {
  background-color: var(--purple-color) !important;
}
.dark-mode .bg-purple {
  background-color: var(--purple-color-very-dark) !important;
}

.bg-indigo {
  background-color: var(--indigo-color) !important;
}
.dark-mode .bg-indigo {
  background-color: var(--indigo-color-very-dark) !important;
}

.bg-green {
  background-color: var(--green-color) !important;
}
.dark-mode .bg-green {
  background-color: var(--green-color-very-dark) !important;
}

.bg-yellow {
  background-color: var(--yellow-color) !important;
}
.dark-mode .bg-yellow {
  background-color: var(--yellow-color-very-dark) !important;
}

.bg-pink {
  background-color: var(--pink-color) !important;
}
.dark-mode .bg-pink {
  background-color: var(--pink-color-very-dark) !important;
}

.bg-orange {
  background-color: var(--orange-color) !important;
}
.dark-mode .bg-orange {
  background-color: var(--orange-color-very-dark) !important;
}

.bg-red {
  background: rgba( 155, 17, 30, 0.8 );
  backdrop-filter: blur( 8.0px );
  -webkit-backdrop-filter: blur( 8.0px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  color: var(--white);
}
.dark-mode .bg-red {
  background: rgba( 155, 17, 30, 0.60 ) !important;
  backdrop-filter: blur( 8.0px ) !important;
  -webkit-backdrop-filter: blur( 8.0px ) !important;
  border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
  color: var(--white) !important;
}

/*** New Button Styles ******************/
.btn i {
  line-height: inherit !important;
}

.btn.btn-help {
  color: var(--lm-button-help-text-color);
  background-color: var(--lm-button-help-bg-color);
  background-image: var(--lm-button-help-bg-image);
  border-color: var(--lm-button-help-border-color);
  -moz-box-shadow: var(--lm-button-help-box-shadow);
  -webkit-box-shadow: var(--lm-button-help-box-shadow);
  box-shadow: var(--lm-button-help-box-shadow);
}

.dark-mode .btn.btn-help {
  color: var(--dm-button-help-text-color);
  background-color: var(--dm-button-help-bg-color);
  background-image: var(--dm-button-help-bg-image);
  border-color: var(--dm-button-help-border-color);
  -moz-box-shadow: var(--dm-button-help-box-shadow);
  -webkit-box-shadow: var(--dm-button-help-box-shadow);
  box-shadow: var(--dm-button-help-box-shadow);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.btn.btn-help:hover {
  color: var(--lm-button-help-text-color-hover);
  background-color: var(--lm-button-help-bg-color-hover);
  background-image: var(--lm-button-help-bg-image-hover);
  border-color: var(--lm-button-help-border-color-hover);
  -moz-box-shadow: var(--lm-button-help-box-shadow-hover);
  -webkit-box-shadow: var(--lm-button-help-box-shadow-hover);
  box-shadow: var(--lm-button-help-box-shadow-hover);
}

.dark-mode .btn.btn-help:hover {
  color: var(--dm-button-help-text-color-hover);
  background-color: var(--dm-button-help-bg-color-hover);
  background-image: var(--dm-button-help-bg-image-hover);
  border-color: var(--dm-button-help-border-color-hover);
  -moz-box-shadow: var(--dm-button-help-box-shadow-hover);
  -webkit-box-shadow: var(--dm-button-help-box-shadow-hover);
  box-shadow: var(--dm-button-help-box-shadow-hover);
}

/*** Sidebar Footer ******************/
.sidebar-menu {
  margin-bottom: 4rem;
}

.sidebar-footer {
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;

  width: var(--sidebar-width);
  background-color: var(--gray-800);
  position: fixed;
  bottom: 0;
  margin: 0;
  padding: 5px 30px;
  border-top: 1px solid var(--dm-border-color);

  font-size: 1.4rem;
  font-weight: 400;
  color: var(--dm-sidebar-brand-text-color);
}

.dark-mode .sidebar-footer {
  color:var(--dm-sidebar-brand-text-color);
  background-color: var(--gray-700);
}
  
.sidebar-footer:hover {
  color:var(--dm-sidebar-brand-text-color-hover);
  text-decoration:none
}
.dark-mode .sidebar-footer:hover {
  color:var(--dm-sidebar-brand-text-color-hover)
}

.sidebar-footer img {
  height:var(--sidebar-brand-image-height);
  margin-right:var(--sidebar-brand-image-margin-right)
}

/*** STAT CARDS ******************/
.stats-square {
  padding: 0rem;
}
.stats-square > .card-title {
  font-size: 1.2em;
}

.stats-square > .card-counter {
  font-weight: bolder;
  font-size: 3.5rem;
  line-height: 4rem;
}

.stats-square > .card-compare-number {
  /* color: var(--success-color); */
  font-size: 1.4em;
}

.stats-square > .card-compare-description {
  font-size: 1em;
}
  
/*** ARTICLE PAGE ****************************/

.article-header {
  padding: 2rem;
  border-radius: var(--border-radius);
  background: rgb(255 255 255 / 100%);
  box-shadow:
    0 2.5px 10px -15px rgba(0, 0, 0, 0.112),
    0 12px 20px -15px rgba(0, 0, 0, 0.22)
  ;
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(0deg, rgb(110 110 110 / 10%), rgb(255 255 255));
}
  
.dark-mode .article-header {
  background: rgb(43 53 61 / 30%);
  box-shadow: 3px 3px 6px 0px rgb(21 21 21 / 10%), 0 12px 20px -16px rgb(0 0 0 / 22%);
  border-image-source: linear-gradient(0deg, rgb(0 0 0 / 10%), rgb(50 50 50 / 50%));
}

.article-toolbar {
  position: absolute;
  display: flex;
  background-color: var(--gray-800);
  padding: 0.5rem;
  opacity: 0;
  border-radius: .75rem;
  z-index: 999;
  box-shadow: 3px 3px 6px 0px rgb(21 21 21 / 10%), 0 12px 20px -16px rgb(0 0 0 / 22%);
  transition: opacity 0.2s ease-in-out;
}

.article-toolbar.active {
  opacity: 1;
}

.dark-mode .article-toolbar {
  background-color: var(--gray-300);
}

.article-toolbar .toolbar-group {
  display: flex;
  margin-right: 1rem;
  padding-right: 1rem;
  box-shadow: inset -1px 0px 0 rgb(255 255 255 / 20%);
}

.dark-mode .article-toolbar .toolbar-group {
  box-shadow: inset -1px 0px 0 rgb(0 0 0 / 20%);
}

.article-toolbar .toolbar-group:last-of-type {
  margin-right: .75rem;
  padding-right: 0;
  box-shadow: none;
}

.toolbar-group .btn-toolbar {
  background-color: transparent;
  color: var(--gray-100);
  border: 0;
  padding: var(--btn-padding);
  font-size: var(--btn-base-font-size);
  border-radius: var(--border-radius);
}

.dark-mode .toolbar-group .btn-toolbar {
  color: var(--gray-900);
}

.toolbar-group .btn-toolbar:hover {
  background-color: var(--gray-500);
}

.dark-mode .toolbar-group .btn-toolbar:hover {
  background-color: var(--gray-500);
}

/* Dashboard *********************/
.dashboard-wrapper {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

.dashboard-content {
  margin:0;
  padding: 0;

  list-style: none;

  display: inline-flex;
  align-items: center;

  height: calc(100vh - 6.2rem);
}

.dashboard-content li:not(:last-child) {
  margin-right: 0.5rem;
}

li.dashboard-column,
li.dashboard-column-add {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  scroll-snap-align: start;
}

li.dashboard-column {
  border-radius: var(--border-radius);
  background: var(--bs-white);
  box-shadow:
    0 2.5px 10px -15px rgba(0, 0, 0, 0.112),
    0 12px 20px -15px rgba(0, 0, 0, 0.22)
  ;
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(135deg, rgb(110 110 110 / 10%), rgb(255 255 255));
}
.dark-mode li.dashboard-column {
  background: rgb(35 35 35 / 10%);
  box-shadow: 3px 3px 6px 0px rgb(21 21 21 / 10%), 0 12px 20px -16px rgb(0 0 0 / 22%);
  border-image-source: linear-gradient(0deg, rgb(0 0 0 / 10%), rgb(50 50 50 / 50%));
}

li.dashboard-column-add {
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 768px) {
  .dashboard-content .dashboard-column {
    width: 75vw !important;
  }
}

.dashboard-column-wrapper {
  height: auto;
}

.dashboard-column-wrapper .dashboard-column-header {
  background: var(--bs-blue);
  color: var(--bs-white);
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  align-items: center;
  padding: 0;

  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
.dark-mode .dashboard-column-wrapper .dashboard-column-header {
  background: var(--bs-dark) !important;
}

.dashboard-column-wrapper .edit-field {
  width:100%;
  height: auto;
  padding: 1rem;
  background-color: var(--gray-900);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.dashboard-column-stats {
  padding: .5rem 0;
  background-color: rgb(165 165 165 / 20%);
  border-bottom: 1px solid rgb(165, 165, 165);
}

.dark-mode .dashboard-column-stats {
  background-color: rgba(0 0 0 / 20%);
  border-bottom: 1px solid rgb(165 165 165);
}

.dashboard-column-body {
  overflow-y: scroll;
  background: transparent;
}
.dark-mode .dashboard-column-body {
  background: transparent;
}

.dashboard-column-add .dashboard-column-body {
  overflow: hidden;
  background-color: transparent !important;
}

.dashboard-column-loading {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 5rem auto;
}

.column-drag-handles span {
  color: var(--white-bg-color);
  cursor: move;
  line-height: inherit !important;
  font-size: 1.6rem;
}

.dragging {
  opacity: .65;
}

.add-column-button {
  border: none;
  background: transparent;
  color: var(--bs-primary);
  margin: 0 auto;
}
.dark-mode .add-column-button {
  color: var(--bs-white);
}
.add-column-button span.material-icons {
  font-size: 4rem;
}

.column-choices {
  text-align: center;
  padding: 1.5rem 0;
}

.column-choices .column-choice {

}

.column-choices .column-choice .column-icon {
  text-decoration: none;
}

.column-choices .column-choice .column-icon span {
  font-size: 5rem;
}

.column-choices .column-choice .column-icon p {
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
}

/*** NOTIFICATIONS ***************************/
.notif-counter {
  position: absolute;
  left: 70%;
  top: 20%;

  color: var(--bs-white);

  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 30%;
}

.no-alert-image {
  font-size: 3em;
}
.alert-item {
  position: relative;
}

.alert-item:hover .alert-actions {
  visibility: visible;
}

.alert-actions .activated {
  visibility: visible;
}

.alert-actions {
  visibility: hidden;
  position: absolute;
  top: 25%;
  right: 10%;
}

.alert-body {
  z-index: 2;
}

.alert-body i {
  font-size: 0.8em;
}

.alert-settings {
  visibility: hidden;
  position: absolute;
  background-color: var(--gray-color);
  padding: 1rem;
  right: 0;
  z-index: 10;
  border-radius: var(--base-border-radius);
  border-width: var(--base-border-width);
  border-color: var(--base-border-color);
}

.alert-settings .activated {
  visibility: visible;
}

.dark-mode .alert-settings {
  background-color: var(--gray-color);
}

/* Fake window */
.fake-window .fake-window-top-row {
  padding: 1rem;
  background-color: #ecf0f1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
}
.dark-mode .fake-window .fake-window-top-row {
  background-color: rgba(0, 0, 0, 0.1);
}
.fake-button {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
}
.fake-button:after {
  content: '\200b';
}
.fake-content {
  height: 1.4rem;
  background-color: #ecf0f1;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-bottom: 1rem;
  border-radius: 0.2rem;
}
.dark-mode .fake-content {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.025);
}
.fake-content:after {
  content: '\200b';
}
.fake-content:last-child {
  margin-bottom: 0;
}


/*** REPORTS ***********************************/
.canvas-border {
  border: 0.5em dashed rgba(0, 0, 0, 0.1);
  border-radius: 3em;
  padding: 2em;
  margin: 2em;
}

.dark-mode .canvas-border {
  border-color: rgba(255, 255, 255, 0.1);
}

.element-drag-handle span {
  color: var(--white-bg-color);
  cursor: move;
  line-height: inherit !important;
}

#report-container {
  list-style-type: none;
}

/****************************************************/
.blurb {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blurb .blurb-icon {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.blurb .blurb-icon .material-icons {
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

.blurb .blurb-text {
  font-size: 1.6rem;
  font-weight: bold;
}


/* LOADER *********************/
.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 2rem auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: var(--bs-primary);
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}

/*** Apex Charts **************************************/
.apexcharts-canvas {
  background-color: rgb(0 0 0 / 0%);
}

.apexcharts-tooltip.apexcharts-theme-light {
  color: var(--lm-base-text-color);
  border: 1px solid #e3e3e3;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
}

.dark-mode .apexcharts-tooltip.apexcharts-theme-light {
  color: var(--dm-base-text-color);
  border: 1px solid var(--gray-900);
  background: var(--gray-800);
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: #ECEFF1;
  border-bottom: 1px solid #ddd;
}

.dark-mode .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: var(--gray-900);
  border-bottom: 1px solid var(--gray-900);;
}

.apexcharts-title-text {
  color: var(--lm-base-text-color);
  fill: var(--lm-base-text-color);
}

.dark-mode .apexcharts-title-text {
  color: var(--dm-base-text-color);
  fill: var(--dm-base-text-color);
}

.xaxis-label-text,
.yaxis-label-text {
  color: var(--lm-base-text-color);
  fill: var(--lm-base-text-color);
}

.dark-mode .xaxis-label-text,
.dark-mode .yaxis-label-text {
  color: var(--dm-base-text-color);
  fill: var(--dm-base-text-color);
}

.dark-mode .apexcharts-menu {
  background: #191c20;
  border-color: #111417;
  color: rgba(255, 255, 255, 0.8);
}

.dark-mode .apexcharts-theme-light .apexcharts-menu-item:hover {
  background: #1d2227;
}

.dark-mode .apexcharts-datalabels-group .apexcharts-datalabel-value {
  color: var(--dm-base-text-color);
}

/*** PAGE ELEMENTS ****************************/
.page-toolbar {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 5px 15px;
  margin-bottom: 1em;
  box-shadow: #727272 1px 2px 5px;
}

.dark-mode .page-toolbar {
  background-color: #272731;
  box-shadow: #000000 1px 2px 5px;
}

.card-body .page-toolbar {
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
  padding: 5px 5px;
}

.dark-mode .card-body .page-toolbar {
  background-color: #0000001a;
  box-shadow: none;
}


/*** TABLES ************************************/
th.orderable {
  cursor: pointer;
  position: relative;
}

th.orderable a::after {
  content: '\e5d8'; /* arrow_upward */
  font-family: 'Material Icons';
  opacity: 0.3;
  margin-left: 5px;
  vertical-align: middle;
}

th.orderable.desc a::after {
  content: '\e5db'; /* arrow_downward */
}

th.orderable.asc a::after {
  opacity: 1;
}

th.orderable.desc a::after {
  opacity: 1;
}