/* BASE CSS */
            
  /* DEFAULT LIGHT THEME */
  :root, :host {
    --white: #fff;
    --black: #000;
    --primary-text: #fff;
    --secondary-text: #fff;
    --box-shadow: 1rem 1rem 2.5rem rgba(0, 0, 0, 0.1);
    
      /* COLORS LIGHT */
      --gray-50: #f9fafb;
      --gray-100: #f3f4f6;
      --gray-200: #e5e7eb;
      --gray-300: #d1d5db;
      --gray-400: #9ca3af;
      --gray-500: #6b7280;
      --gray-600: #4b5563;
      --gray-700: #374151;
      --gray-800: #1f2937;
      --gray-900: #111827;
      --table-color: #9ca3af;
      --table-color-dark: #9ca3af;
      --heavy:#000;
      --heavy-opposite: #efefef;
      --table-dark-th-bg: #000;
      --table-dark-th-text: #fff;
      --table-light-th-bg: #000;
      --table-light-th-text: #fff;
      --first:#0062cc;
      --primary:#007bff;
      --primaryBtn:#007bff;
      --primaryBtnHover:#0062cc;
      --primaryBtnBorder:#0062cc;
      --primaryBtnBorderWidth:1px;
      --gradient-primary:#22d3ee;
      --gradient-second:#0062cc;
      --sidebar-gradient-primary:#22d3ee;
      --sidebar-gradient-second:#0062cc;
      --nav-active:#000;
      --sidebar-icon-filter:0%;
      --sidebar-icon-filter-active:100%;
      /* --second:#00e1ff; */
      --second:#0062cc;
      --color-primary:#fff;
      --color-hover:#007bff;
      --color-active:#007bff;
      /*FONT*/
      --color:#424444;
      --color-gray:#888899;
      --color-light:#cacdcd;
      /* BACKGROUND */
      --bg:#fff;
      --bg-black:#fff;
      --bg-white:#000;
      --bg-dark:rgba(250,250,250,1);
      --bg-dark-50:#f6f6f6;
      --bg-dark-25:#fcfcfc;
      --bg-light:rgba(250,250,250,1);
      --bg-gradient-start:#f4f4f4;
      --bg-gradient-end:rgba(250,250,250,1);
      --bg-card-gradient-start:rgba(250,250,250,1);
      --bg-card-gradient-end:#f4f4f4;
      --bg-form-input:#f4f4f4;
      --bg-form-input-no-card:rgba(250,250,250,1);
      --bg-readonly:#efefef;
      --list-bg:rgba(255,255,255,1);
      --list-border-b:#f4f4f4;
    
  }
  .navbar{
    box-shadow: 1rem 1rem 2.5rem rgba(0, 0, 0, 0.03); 
  }
  #sidebarBackground{
    box-shadow: 1rem 1rem 2.5rem rgba(0, 0, 0, 0.03);
  }
  .c-icon-sm,.c-icon-md,.c-icon {
    -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
  }
  .btn-black .c-icon-sm,.btn-black .c-icon-md,.btn-black .c-icon,
  .btn-heavy .c-icon-sm,.btn-heavy .c-icon-md,.btn-heavy .c-icon{
    -webkit-filter: invert(0%); /* Safari/Chrome */
    filter: invert(0%);
  }

  .btn-heavy-opposite:focus .c-icon-sm,.btn-heavy-opposite:focus .c-icon-md,.btn-heavy-opposite:focus .c-icon,
  .btn-heavy-opposite:hover .c-icon-sm,.btn-heavy-opposite:hover .c-icon-md,.btn-heavy-opposite:hover .c-icon{
    -webkit-filter: invert(0%) !important; /* Safari/Chrome */
    filter: invert(0%) !important;
  }

  @media (prefers-color-scheme: dark) {
    :root,:host {
      
    /* COLORS DARK */
    --heavy:#fff;
    --heavy-opposite:#000;
    --table-dark-th-bg: #000;
    --table-dark-th-text: #fff;
    --table-light-th-bg: #000;
    --table-light-th-text: #fff;
    /* --first: #0056b3 */
    --first:#0062cc;
    --primary:#007bff;
    --primaryBtn:#007bff;
    --primaryBtnHover:#0062cc;
    --primaryBtnBorder:#0062cc;
    --primaryBtnBorderDark:#0062cc;
    --primaryBtnBorderWidth:1px;
    --gradient-primary:#22d3ee;
    --gradient-second:#0062cc;
    --sidebar-gradient-primary:#22d3ee;
    --sidebar-gradient-second:#0062cc;
    --nav-active:#000;
    --sidebar-icon-filter:0%;
    --sidebar-icon-filter-active:100%;
    /* --second:#00e1ff; */
    --second:#0062cc;
    --color-primary:#fff;
    --color-hover:#007bff;
    --color-active:#007bff;
    /*FONT*/
    --color:#cacdcd;
    --color-gray:#888899;
    --color-light:#424444;
    /* BACKGROUND */
    --bg:#111827;
    --bg-black:#000;
    --bg-white:#fff;

    --bg-dark:#111827;
    --bg-dark-75:#08111f;
    --bg-dark-50:#1f2937;
    --bg-dark-25:#374151;

    --bg-light:#000;
    --bg-gradient-start:#4b5563;
    --bg-gradient-end:#1f2937;
    --bg-card-gradient-start:#374151;
    --bg-card-gradient-end:#1f2937;
    --bg-form-input:#4b5563;
    --bg-form-input-no-card:1f2937;
    --bg-readonly:#1f2937;
    --list-bg:#1f2937;
    --list-border-b:#1f2937;
   
    }
    .btn-heavy:not(.active) .c-icon-sm,.btn-heavy:not(.active) .c-icon-md,.btn-heavy:not(.active) .c-icon,
    .btn-heavy:focus .c-icon-sm,.btn-heavy:focus .c-icon-md,.btn-heavy:focus .c-icon,
    .btn-heavy:focus:hover .c-icon-sm,.btn-heavy:focus:hover .c-icon-md,.btn-heavy:focus:hover .c-icon {
      -webkit-filter: invert(100%); /* Safari/Chrome */
      filter: invert(100%);
    }
    .c-icon-sm,.c-icon-md,.c-icon,
    .btn-heavy:hover .c-icon-sm,.btn-heavy:hover .c-icon-md,.btn-heavy:hover .c-icon{
      -webkit-filter: invert(0%); /* Safari/Chrome */
      filter: invert(0%);
    }
    .btn-heavy:focus .c-icon-sm,.btn-heavy:focus .c-icon-md,.btn-heavy:focus .c-icon,
    .btn-heavy:focus:hover .c-icon-sm,.btn-heavy:focus:hover .c-icon-md,.btn-heavy:focus:hover .c-icon{
      -webkit-filter: invert(0%) !important; /* Safari/Chrome */
      filter: invert(0%) !important;
    }

    .btn-heavy-opposite:hover .c-icon-sm,.btn-heavy-opposite:hover .c-icon-md,.btn-heavy-opposite:hover .c-icon{
      -webkit-filter: invert(100%) !important; /* Safari/Chrome */
      filter: invert(100%) !important;
    }
    .btn.navbar-toggler .c-icon{
      -webkit-filter: invert(0%) !important; /* Safari/Chrome */
      filter: invert(0%) !important;
    }
  }

  :disabled .c-icon-sm,:disabled .c-icon-md,:disabled .c-icon{
    -webkit-filter: invert(50%) !important; /* Safari/Chrome */
    filter: invert(50%) !important;
  }

  html,
  body {
      color: var(--color);
      line-height: 1.5;
      font-family: "Montserrat", sans-serif;;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 400;
  }
  body {
    background-color: var(--bg);
    min-height: 100vh;
  }

  *,
  ::after,
  ::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  :root,
  :host{
    color: var(--color);
    line-height: 1.5;
    font-family: "Montserrat", sans-serif;;
    font-size: 1rem;
  }

  input[type="color"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  select:focus,
  textarea {
    font-size: 1rem;
  }
  p {
    font-size: 0.875rem;
    margin-top: 0;
    margin-bottom: 1rem;
  }
  dl,
  ol,
  ul {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  img {
    vertical-align: middle;
    border-style: none;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 0.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--heavy);
  }
  h1, h2, h3, h4,
  .h1, .h2, .h3, .h4 {
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  label{
    color: var(--color-gray);
  }
  hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }
  a {
    cursor: pointer;
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
  }
  a:hover {
    color: #0062cc;
    text-decoration: underline;
  }
  .modal {
    display: none;
  }
  ::selection {
    background: #007bff !important;
    color: var(--color-primary) !important;
  }
  ::-moz-selection {
    background: #007bff !important; 
    color: var(--color-primary) !important;
  }
  [draggable=true]{
    cursor: move !important;
  }
  .dragging {
    cursor: move !important;
    cursor: -webkit-grabbing !important; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grabbing !important; /* Firefox 1.5-26 */
    cursor:         grabbing !important; /* W3C standards syntax, should come least */
  }
  [draggable=false] {
    cursor: not-allowed;
  }

  castify-draw-container{
    display: none !important;
  }
  @media print{
    html,body {
      font-size: 0.6; /* 0.875rem; */
    }
    :root,
    :host{
      font-size: 0.875rem; /* 1rem */
    }
    textarea {
      font-size: 0.8rem; /* 1rem */
    }
    p {
      font-size: 0.75rem; /* 0.875rem */
      margin-top: 0;
      margin-bottom: 1rem;
    }
  }
  .lock-scroll {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
  }

      
      /* SCROLLBAR */
      ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        scrollbar-color: var(--heavy-opposite) var(--bg-card-gradient-end);
        -webkit-box-shadow: none;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
        background: var(--bg-card-gradient-end);
      }
      
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: var(--black);
        cursor: pointer;
        border-radius: 12px;
      }
      
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: #007bff;
      }  
    
          
          
/* class="scrollbar" */

.browser-not-compatible-warning,
.browser-not-up-to-date-warning {
  display: none;
}
body.browser-not-compatible .browser-not-compatible-warning,
body.browser-not-up-to-date .browser-not-up-to-date-warning {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--bg-gradient-start),
    var(--bg-gradient-end)
  );
  z-index: 999999999;
}
.browser-not-compatible-warning,
.browser-not-up-to-date-warning {
  color: #cacdcd;
}
.browser-not-compatible-warning__headline {
  font-size: 3rem;
  font-weight: 900;
  max-width: 80%;
}
.browser-not-compatible-warning__blue {
  color: #007bff;
}
.browser-not-compatible-warning__p {
  line-height: 1.4em;
  max-width: 80%;
  text-align: center;
}
.browser-not-compatible-warning__button {
  background-color: #007bff;
  border-radius: 16px;
  padding: 4px 8px;
  text-decoration: none;
  margin: 14px;
  cursor: pointer;
}
.browser-not-compatible-warning__button * {
  background-color: #007bff;
  border: 0;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}