@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');:root {
    --nintex--color--black: #0E0E0E;
    --nintex--color--cyan-bluish-gray: #abb8c3;
    --nintex--color--white: #FFFFFF;
    --nintex--color--pale-pink: #f78da7;
    --nintex--color--vivid-red: #cf2e2e;
    --nintex--color--luminous-vivid-orange: #ff6900;
    --nintex--color--luminous-vivid-amber: #fcb900;
    --nintex--color--light-green-cyan: #7bdcb5;
    --nintex--color--vivid-green-cyan: #00d084;
    --nintex--color--pale-cyan-blue: #8ed1fc;
    --nintex--color--vivid-cyan-blue: #0693e3;
    --nintex--color--vivid-purple: #9b51e0;
    --nintex--color--ivory: #FFF9F4;
    --nintex--color--nintex-orange: #FF6D00;
    --nintex--color--light-orange: #ff9f7b;
    --nintex--color--pale-orange: #FEE9E3;
    --nintex--color--pink-050: #FFD4EB;
    --nintex--color--navy: #030A47;
    --nintex--color--pink-200: #D60D8C;
    --nintex--color--pink-100: #ED2891;
    --nintex--color--pink-300: #BE0075;
    --nintex--color--pale-blue: #D4D7FC;
    --nintex--color--pink-400: #850052;
    --nintex--color--purple: #8439A6;
    --nintex--color--deep-purple: #3D0456;
    --nintex--color--blue: #2A348A;
    --nintex--color--deep-navy: #000426;
    --nintex--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
    --nintex--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --nintex--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
    --nintex--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
    --nintex--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
    --nintex--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --nintex--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --nintex--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --nintex--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --nintex--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --nintex--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --nintex--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
    --nintex--font-size--small: 13px;
    --nintex--font-size--medium: 20px;
    --nintex--font-size--large: 36px;
    --nintex--font-size--x-large: 42px;
    --nintex--font-size--nintex-small: 13px;
    --nintex--font-size--nintex-default: 14px;
    --nintex--font-size--nintex-large: 16px;
    --nintex--font-family--primary: "Plus Jakarta Sans", "Arial", sans-serif;
    --nintex--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --nintex--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --nintex--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --nintex--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --nintex--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}

 body,
 .np-homepage-featured .np-homepage-headline,
 .np-sub-navigation-content-item-link,
 .np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
     color: #000426;
 }


 .np-homepage-featured {
     margin-top: 0 !important;
 }

 body, .np-dashboard {
     background-color: white !important;
     font-family: var(--nintex--font-family--primary);
 }

 .np-homepage {
     margin-bottom: 0;
 }

 .np-header {
     position: relative;
 }

 .header-content {
     position: relative;
     z-index: 3;
     text-align: center;
     max-width: 900px;
 }

 .np-header-mobile-menu-content-button,
 .np-header-mobile-menu-content-name,
 .np-header-search-input,
 .np-header-search-icon {
     color: var(--nintex--color--deep-purple)
 }

 .np-header-search-input {
     border-color: var(--nintex--color--deep-purple);
 }

 .display-flex{
    display: flex;
 }

 .nintex-ivory-bg {
     background-color: var(--nintex--color--ivory);
 }

 .nintex-section {
     padding: 40px 4%;
     text-align: center;
 }

 .nintex-headline {
     font-size: 1.5rem;
     font-weight: 900;
     padding-bottom: 40px;
 }
 .nintex-subheadline {
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: 40px;
 }


 .nintex-card {
     translate: none;
     rotate: none;
     scale: none;
     transform: translate(0px, 0em);
     opacity: 1;
     transition: all .2s ease-out;
     width: 100%;
     align-items: flex-start;
     box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .1);
     display: flex;
     flex-flow: column;
     padding: 0;
     position: relative;
     margin-bottom: 20px;
     background-color: var(--nintex--color--white);
 }

 .nintex-card-image {
     height: 200px;
     width: 100%;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }

 .nintex-btns-container{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
 }

 .nintex-card:hover {
     transform: scale(1.03) !important;
 }

 .nintex-card-content {
     padding: 60px 34px 35px;
     text-align: left;
     position: relative;
     width: 100%;
     height: calc(100% - 200px);
 }

 .nintex-card-header {
     font-size: 30px;
     line-height: 1.25;
     font-weight: 700;
     margin: 15px 0;
 }

 .nintex-card-text {
     font-size: 14px;
     line-height: 1.5;
     font-weight: 400;
 }
 .nintex-card-link, .nintex-text-button {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--nintex--color--pink-300);
    font-weight: 800;
    padding: 8px 0;
    text-wrap: balance;
    transition: all .1s linear;
    font-size: var(--nintex--font-size--nintex-large);
    text-decoration: none;
    position: relative;
    cursor: pointer;
 }

.nintex-card-link:after, .nintex-text-button:after {
    background-color: var(--nintex--color--pink-400);
    bottom: -1px;
    content: "";
    height: 2px;
    position: absolute;
    right: 100%;
    transition: width .3s ease, right .3s ease;
    width: 0;
}

 .nintex-card-link:hover, .nintex-text-button:hover {
    color: var(--nintex--color--pink-400);
 }

 .nintex-card-link path, .nintex-text-button path{
    fill: var(--nintex--color--pink-300);
    transition: all .1s linear;
 }

 .nintex-card-link:hover path, .nintex-text-button:hover path{
    fill: var(--nintex--color--pink-400);
 }

 /* Disabled state for nintex text button */
 .nintex-text-button:disabled,
 .nintex-text-button.disabled {
    color: var(--nintex--color--cyan-bluish-gray);
    cursor: default;
    opacity: 0.6;
    pointer-events: none;
 }

 .nintex-text-button:disabled:after,
 .nintex-text-button.disabled:after {
    background-color: var(--nintex--color--cyan-bluish-gray);
    width: 0;
    right: 100%;
 }

 .nintex-text-button:disabled path,
 .nintex-text-button.disabled path {
    fill: var(--nintex--color--cyan-bluish-gray);
 }

 .nintex-text-button:disabled:hover,
 .nintex-text-button.disabled:hover {
    color: var(--nintex--color--cyan-bluish-gray);
 }

 .nintex-text-button:disabled:hover path,
 .nintex-text-button.disabled:hover path {
    fill: var(--nintex--color--cyan-bluish-gray);
 }

 .nintex-card-ribbon {
    background-color: white;
    color: var(--nintex--color--deep-navy);
    padding: 3px 12px 2px;
    border: 1px solid var(--nintex--color--blue);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
 }

 .nintex-card-ribbons{
    display: flex;
    position: absolute;
    top: 10px;
    left: 10px;
    gap: 10px;
 }

 .nintex-card-footer{
  position: absolute;
  bottom: 0;
  min-height: 40px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  gap: 10px;
  width: calc(100% - 68px);
  justify-content: space-between;
}

 .nintex-card-footer-placeholder{
    height: 40px;
 }

 .nintex-card-preheader{
    display: flex
    ;
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
        border-bottom: 4px solid;
 }

 .nintex-card-preheader-div{
    width: fit-content;
 }

 .nintex-fw-container{
    padding: 40px 4%;
    text-align: center;
    margin:0;
 }

 .np-sub-navigation-content-item-link{
    height: fit-content !important;
 }

 .np-footer{
    background-color: var(--np-header-color);
 }

 .np-footer .np-button-color, .np-footer-support-help, .np-footer-support-item{
    color: var(--np-header-font-color);
 }

 .nintex-footer-logo-image{
    height: 30px;
 }

 .np-footer-navigation-item{
    width: fit-content;
    white-space: nowrap;
 }

 .np-footer-navigation-list{
    align-items: center;
 }

 @media screen and (min-width: 768px) {
     .nintex-headline {
         font-size: 2rem;
     }
     .nintex-subheadline {
        font-size: 1.25rem;
        font-weight: 400;
        padding-bottom: 40px;
     }

     .nintex-section {
         padding: 58px 4%;
     }

     .nintex-card-text {
         font-size: 16px;
     }

     .nintex-card-stretch {
         display: flex;
     }

     .nintex-card-link:hover:after, .nintex-text-button:hover:after {
        right: 0;
        width: 100%;
    }
    .nintex-fw-container{
        padding: 58px calc(4% + 30px);
        text-align: center;
        margin: 0;
     }

     .np-footer-navigation-list{
        margin-right: 60px;
        flex-wrap: wrap;
        gap: 20px;
        align-items: flex-start;
     }
 }

 @media screen and (min-width: 1440px) {

   .nintex-fw-container{
       padding: 58px calc(50vw - 720px + 4%);
    }
}

.progress-card {
    border-radius: 8px;
    padding: 0;
    display: flex;
    margin-bottom: 2.187rem;
    width: 100%;
    flex-direction: column;
  }

  .progress-ring circle {
    stroke-linecap: round;
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: center;
  }

  .progress-bar-wrapper {
    height: 10px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    width: 80%;
    margin: 0 auto;
  }

  .progress-bar-completed,
  .progress-bar-in-progress {
    height: 100%;
    position: absolute;
    top: 0;
  }

  .progress-indicator-text {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
  }

  .progress-indicators-label {
    display: flex
    ;
        width: 80%;
        margin: 0 auto;
        gap: 20px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
  }

  .progress-indicator-wrapper{
    margin-bottom: 20px;
  }

  .nintex-filters-line{
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .nintex-filters-input-wrapper{
    position: relative;
    flex: 1;
    max-width: 300px;
    min-width: 150px;
  }

  .nintex-filters-input{    
    width: 100%;
    border-radius: 5px;
    outline: none;
    padding-left: 30px !important;
    
  }

  .nintex-filters-input-wrapper i{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc
  }

  .nintex-filters-select{
    outline: none;
    border-radius: 23px;
  }

  .nintex-filters-input, .nintex-filters-select{
    padding: 10px;
    height:45px;
    border: 2px solid #ccc;
  }

  /* Dashboard Tab Styles */
  .nintex-tab-selector {
    margin-bottom: 1.5rem;
  }

  .nintex-tab-selector-container {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    gap: 0;
  }

  .nintex-tab-button {
    background: none;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
  }

  .nintex-tab-button:hover {
    color: var(--nintex--color--blue);
  }

  .nintex-tab-button.nintex-tab-active {
    color: var(--nintex--color--blue);
  }

  .nintex-tab-button.nintex-tab-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--nintex--color--blue);
  }

  .nintex-tab-content {
    transition: opacity 0.3s ease;
  }

  .nintex-tab-content.nintex-hidden {
    display: none;
  }

  .nintex-hidden {
    display: none;
  }

  /* Dashboard Filters and Search Styles */
  .nintex-filters-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .nintex-search-container {
    flex: 1;
    min-width: 250px;
  }

  .nintex-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .nintex-search-icon {
    position: absolute;
    left: 12px;
    color: #666;
    font-size: 14px;
  }

  .nintex-search-input {
    width: 100%;
    padding: 10px 12px 10px 35px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
  }

  .nintex-search-input:focus {
    border-color: var(--nintex--color--blue);
  }

  .nintex-filter-buttons {
    display: flex;
    gap: 0.5rem;
  }

  .nintex-filter-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 16px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .nintex-filter-button:hover {
    border-color: var(--nintex--color--blue);
    color: var(--nintex--color--blue);
  }

  .nintex-chevron-down {
    font-size: 12px;
    transition: transform 0.2s ease;
  }

  .nintex-filter-button:hover .nintex-chevron-down {
    transform: rotate(180deg);
  }

  /* Dashboard Pagination Styles */
  .nintex-pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem 0;
    border-top: 1px solid #e0e0e0;
  }

  .nintex-pagination-info {
    font-size: 14px;
    color: #666;
  }

  .nintex-pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .nintex-pagination-button {
    padding: 8px 16px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .nintex-pagination-button:hover:not(:disabled) {
    border-color: var(--nintex--color--blue);
    color: var(--nintex--color--blue);
  }

  .nintex-pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .nintex-page-numbers {
    display: flex;
    gap: 0.25rem;
  }

  .nintex-page-number:hover {
    border-color: var(--nintex--color--blue);
    color: var(--nintex--color--blue);
  }

  .nintex-page-number.nintex-page-active {
    background: var(--nintex--color--blue);
    color: white;
    border-color: var(--nintex--color--blue);
  }

  /* Pagination Numbers Display */
  .nintex-pagination-numbers {
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }

  .nintex-page-number {
    width: fit-content;
    color: #000;
    font-size: 0.9rem;
    font-weight: bold;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .nintex-filters-container {
      flex-direction: column;
      align-items: stretch;
    }

    .nintex-search-container {
      min-width: auto;
    }

    .nintex-pagination-container {
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }
  }

  /* Catalog Page Specific Styles */
  .np-catalog .nintex-filters-input:focus,
  .np-catalog .nintex-filters-select:focus,
  .np-catalog .nintex-filters-input:hover,
  .np-catalog .nintex-filters-select:hover {
    border-color: var(--nintex--color--deep-purple);
  }

  .np-catalog .nintex-filters-input-wrapper:hover i,
  .np-catalog .nintex-filters-input-wrapper:focus-within i,
  .np-catalog .nintex-filters-input-wrapper:has(input:focus) i {
    color: var(--nintex--color--deep-purple);
  }

  /* Learning Paths Page Specific Styles */
  .np-learning-paths .nintex-filters-input:focus,
  .np-learning-paths .nintex-filters-select:focus,
  .np-learning-paths .nintex-filters-input:hover,
  .np-learning-paths .nintex-filters-select:hover {
    border-color: #8349a6;
  }

  .np-learning-paths .nintex-filters-input-wrapper:hover i,
  .np-learning-paths .nintex-filters-input-wrapper:focus-within i,
  .np-learning-paths .nintex-filters-input-wrapper:has(input:focus) i {
    color: #8349a6;
  }

  .embla-container {
    position: relative;
  }
  .embla {
    overflow: hidden;
  }
  .embla__container {
    display: flex;
  }
  .embla__slide {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
  }

  .embla-buttons {
    display: none;
  }

  @media screen and (min-width: 768px) {
    .embla__container {
      gap: 1rem;
    }
    .embla-buttons {
      display: flex
;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        width: calc(100% + 50px);
        height: 100%;
        left: -25px;
    }
    .embla-button {
      background-color: transparent;
      border: none;
      cursor: pointer;
      transition: 0.3s ease;
    }

    .embla-button svg {
      transform: scale(2.5);
    }

    .embla-button--prev svg {
      transform: rotate(180deg) scale(2.5);
    }

    .embla-button:hover {
      transform: scale(1.1);
    }
  }
  
  .header-search-input{
    border: 2px solid #bac4ca;
    border-radius: 4px;
    color: #486776;
    font-size: 15px;
    opacity: 1;
    outline: none;
    padding: 0 56px 0 20px;
    width: 100%;
    height: 44px;
    background-color: white;
  }

  .nintex-card-property-ribbons{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: 30px;
  }

  .nintex-card-property-ribbon{
    padding: 4px 8px 3px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #333d44;
    background-color: #e6e7eb;
  }

  .nintex-card-property-ribbon i{
    font-size: 12px;
    margin-right: 5px;
  }

  .nintex-course-rating{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
  }

  .nintex-course-rating i{
    color: #fdb705;
  }


  .np-learning-paths-resources-container{
    border: none;
    padding: 0;
  }

  #courses-progress, #learning-paths-progress{
    margin-top: 59px;
  }

  #courses-progress {
    margin-bottom: 50px;
  }
  
  .np-resource-title{
    text-transform:none;
  }