/* Master Style Variables */

  :root {
    /* Fonts */
    --primary-font: 'Inter', sans-serif;
    --secondary-font: 'Open Sans', sans-serif;
    
    /* Colors */
    --primary: #FF521D;
    --secondary: #1d9777;
    --tertiary: #f0f0f0;
    --success: #1da782;
    --warning: #f7b761;
    --danger: #f95353;
    --error: #f95353;
    --white: #ffffff;
    
      /* Dark Colors */
      --dark: #323232;
      --secondary-dark: #9d9d9d;
      --tertiary-dark: #393939;

      /* Accent Colors */
      --accent-primary: #FF521D;
      --accent-tertiary: #606060;
      --accent-dark: #434343;
      --accent-light: #f5f5f5;
      --accent-grey: #e0e0e0;

    /* Shadows */
    --box-shadow-light-primary: 0px 6px 15px -3px #00000010; /* Use for Shadow over White Background */
    --box-shadow-light-tertiary: 0px 6px 15px -3px #00000005; /* Use for Shadow over Tertiary Background */
    --box-shadow-dark-primary: 0px 6px 15px -3px #00000010; /* Use for Shadow over White Background */
    --box-shadow-dark-tertiary: 0px 6px 15px -3px #00000005; /* Use for Shadow over Tertiary Background */

    /* Border Radius */
    --border-radius-primary: 10px;
    --border-radius-secondary: 8px;

    /* Border Colors */
    --primary-border-light: var(--secondary-dark); /* Dark Border for v-dividers */
    --primary-border-dark: var(--accent-tertiary); /* Light Border for v-dividers */
    --secondary-border-light: var(--accent-grey);  /* Light Border for Lists */
    --secondary-border-dark: var(--accent-tertiary); /* Dark Border for Lists */

    /* Font Weights */
    --font-weight-primary: 400;
    --font-weight-secondary: 700;

    /* Letter Spacing */
    --letter-spacing-primary: -0.02em;
    --letter-spacing-secondary: -0.04em;
  }


  /* HJ List Styles */

  .hj-list-primary {
    padding: 8px 10px !important;
    background: var( --primary-background) !important;
    color: var(--secondary-text) !important;
    border-radius: var(--border-radius-secondary) !important;
    margin-bottom: 8px !important;
  }

  .hj-list-secondary {
    padding: 8px 10px !important;
    background: var(--secondary-background) !important;
    color: var(--secondary-text) !important;
    border-radius: var(--border-radius-secondary) !important;
    margin-bottom: 4px !important;

    .v-list-item__title {
      color: var(--secondary-text) !important;
    }
  }

  /* HJ Button Styles */

  .button-primary{
    background-color: var(--primary-color)!important;
    box-shadow: var(--box-shadow-primary) !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--tertiary)!important;
      .v-icon{
        color: var(--tertiary)!important;
      }
    }
  }
  .button-primary-outlined{
    background-color: transparent!important;
    box-shadow: none !important;
    border: thin solid var(--primary-color) !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--primary-color)!important;
      .v-icon{
        color: var(--primary-color)!important;
      }
    }
  }

  .button-primary-disabled{
    background-color: transparent!important;
    box-shadow: none !important;
    border: thin solid var(--secondary-border-color) !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--quaternary-background)!important;
      .v-icon{
        color: var(--quaternary-background)!important;
      }
    }
  }

  .button-primary-outlined-disabled{
    background-color: transparent!important;
    box-shadow: none !important;
    border: thin solid var(--secondary-border-color) !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--quaternary-background)!important;
      .v-icon{
        color: var(--quaternary-background)!important;
      }
    }
  }

  .button-success{
    background-color: var(--success)!important;
    box-shadow: var(--box-shadow-primary) !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--tertiary)!important;
      .v-icon{
        color: var(--tertiary)!important;
      }
    }
  }

  .button-success-outlined{
    background-color: transparent!important;
    box-shadow: none !important;
    border: thin solid var(--success) !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--success)!important;
      .v-icon{
        color: var(--success)!important;
      }
    }
  }

  .button-secondary{
    background-color: var(--secondary-text)!important;
    box-shadow: var(--box-shadow-primary) !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--tertiary)!important;
      .v-icon{
        color: var(--tertiary)!important;
      }
    }
  }
  .button-secondary-outlined{
    background-color: transparent!important;
    box-shadow: none !important;
    border: thin solid var(--primary-border-color) !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--secondary-text)!important;
      .v-icon{
        color: var(--secondary-text)!important;
      }
    }
  }

  .button-white-outlined{
    background-color: transparent!important;
    box-shadow: none !important;
    border: thin solid var(--tertiary) !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--tertiary)!important;
      .v-icon{
        color: var(--tertiary)!important;
      }
    }
  }

  
  /* HJ Chip Styles */
  .chip-primary{
    background-color: var(--primary-color)!important;
    margin-bottom: 4px !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--tertiary)!important;
      .v-icon{
        color: var(--tertiary)!important;
      }
    }
  }

  .chip-success{
    background-color: var(--success)!important;
    margin-bottom: 4px !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--tertiary)!important;
      .v-icon{
        color: var(--tertiary)!important;
      }
    }
  }

  .chip-danger{
    background-color: var(--danger)!important;
    margin-bottom: 4px !important;
    border-radius: var(--border-radius-secondary)!important;
    span{
      color: var(--tertiary)!important;
      .v-icon{
        color: var(--tertiary)!important;
      }
    }
  }

  /* HJ Overlay - specifically for locked list items */
  .hj-overlay{
    background-color: var(--primary-color) !important;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    border-radius: var(--border-radius-primary);
    color: var(--tertiary);
    z-index: 2;
    display: flex; 
    align-items: center !important;
  }

  /* HJ Skeleton Loader */
  .primary-skeleton {
    .v-skeleton-loader__list-item-avatar {
      background-color: var(--secondary-background)!important;
    }
    .v-skeleton-loader__avatar, .v-skeleton-loader__bone{
      animation: pulse-bg 1s infinite;
    }

    .v-skeleton-loader__bone:after{
      background: linear-gradient(90deg, hsl(0deg 100% 50% / 0%), hsla(0, 0%, 100%, .05), hsla(0, 0%, 100%, 0)) !important;
    }
  }

  @keyframes pulse-bg {
    0% { background: var(--primary-background) !important; }
    50% { background: var(--secondary-background) !important; }
    100% { background: var(--primary-background) !important; }
  }


@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

*, h2, h3, p, body, .v-card {
  font-family: var(--primary-font), sans-serif!important;
  letter-spacing: var(--letter-spacing-primary);
}

i.fa, i.fas, i.far, i.fab {
  font-family: "Font Awesome 5 Free", "FontAwesome" !important;
}
.mce-ico {
  font-family: 'tinymce', Arial !important;
}
.tags-hj {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-text)!important;
}

.subtitle-1, .title {
  line-height: 1.25!important;
}

body {
    margin: 0;
    line-height: 1.5;
  }

  .my-toggler span, .my-toggler span:before, .my-toggler span:after {
    background: #fff!important;
  }
  
  html {
    font-size: 80.5%;
  }