@layer global, components, utilities;

/* @layer global{ */

  /* body.theme-dark-lmtl4{
    --cs-page-bg: rgb(47, 53, 64);

    --cs-bg-color: rgb(37, 43, 54);
    --cs-text-color: rgb(245, 245, 245);
    --cs-text-color-inverted: rgb(0, 0, 0);

    --cs-accent-color: rgb(242, 79, 0);
    --cs-text-on-accent-color: rgb(255, 255, 255);

    --cs-secondary-color: rgb(240, 240, 240);
    --cs-text-on-secondary-color: rgb(0, 0, 0);

    --cs-page-boxes-spacer: 1rem;
  } */

  .full-page-container{
  position: fixed;
  inset: 0;

  background-color: var(--cs-page-bg);
  }

  .sfp-card-full-page{
  height: 75dvh;
  width: 75vw;
  max-width: 1200px;

  background-color: var(--cs-bg-color);
  border: 1px solid var(--cs-shadow-color);
  border-radius: .5rem;
  padding: .5rem;

  box-shadow: 0 0 32px var(--cs-shadow-color);

  @media screen and (992px > width) {
     width: calc(100vw - (16px * 2));
  }

  &.hero{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: .5rem;

    @media screen and (768px > width) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    & > *{
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
    }

    & > :not(.sfp-card-hero){
      padding: 2.5rem 1.5rem;
    }
  }

  .sfp-card-hero{
    border-radius: .5rem;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'stack';

    @media screen and (768px > width) {
      display: none;
    }

    & > *{
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
    }

    & > :is(img, .sfp-card-hero-bg){
      grid-area: stack;
      object-fit: cover;
      user-select: none;
    }

    & > :is(:not(img), .sfp-card-hero-fg){
      grid-area: stack;
      z-index: 1;
      padding: 2.5rem 1.5rem;

      background-color: color-mix(in srgb, var(--cs-accent-color) 20%, transparent);
      color: var(--cs-text-on-accent-color);
      font-weight: 700;

      & > :is(h1, h2, h3, h4, h5, h6){
        font-size: 3rem;
        font-weight: inherit;
        letter-spacing: .1em;
        text-transform: uppercase;
      }
    }


  }
  }

  .sfp-wizard{

  .sfp-wizard-steps{
    height: 100%;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'stack';

    & > .sfp-wizard-step{
      grid-area: stack;
      width: 100%;
      height: 100%;
      min-height: 0;
      min-width: 0;

      transition: opacity 150ms;
      z-index: 1;

      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        'header'
        'body'
        'footer';
      row-gap: 1rem;

      &:not([aria-hidden="false"]){
        opacity: 0;
        pointer-events: none;
      }

      & > .sfp-wizard-step-header{
        grid-area: header;
        border-bottom: 1px solid var(--cs-shadow-color);
        padding-bottom: 1rem;
        
        & > :is(h1, h2, h3, h4, h5, h6){
          margin-bottom: 0;
          font-weight: 700;
          color: var(--cs-accent-color);
        }
      }
      
      & > .sfp-wizard-step-body{
        grid-area: body;

        overflow-y: auto;
        overflow-x: hidden;
      }
      
      & > .sfp-wizard-step-footer{
        grid-area: footer;

        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: 'previous gap next';

        & > .sfp-wizard-control-next{ grid-area: next; }
        & > .sfp-wizard-control-previous{ grid-area: previous; }
      }
    }

  }

  }

  body:is(.theme-white-lmtl4, .theme-dark-lmtl4){
    --cs-page-bg: rgb(245, 245, 245);

    --cs-bg-color: rgb(253, 253, 253);
    --cs-text-color: rgb(60, 60, 60);
    --cs-text-color-inverted: rgb(255, 255, 255);
    --cs-shadow-color: rgba(0, 0, 0, .1);

    --cs-accent-color: rgb(242, 79, 0);
    --cs-text-on-accent-color: rgb(255, 255, 255);

    --cs-secondary-color: rgb(240, 240, 240);
    --cs-text-on-secondary-color: rgb(0, 0, 0);

    --cs-page-boxes-spacer: 1rem;
  }

  body{
    color: var(--cs-text-color);
    background-color: var(--cs-page-bg);
  }

  .modal-dialog{
    max-width: 1200px !important;
  }

  body > .page-content-lmtl4{


    .sidebar-lmtl4.sidebar-main-lmtl4{
      background-color: var(--cs-bg-color);
      color: var(--cs-text-color);
      margin: 1rem;
      margin-right: calc(var(--cs-page-boxes-spacer) / 2);
      margin-bottom: calc(40.2px + 1rem);
      border: 0;

      border-radius: .5rem;
      padding-top: .5rem;

      :is(.sidebar-main-resize-lmtl4, .sidebar-mobile-main-toggle-lmtl4){
        border: 1px solid var(--cs-accent-color) !important;
        color: var(--cs-accent-color);
        background-color: transparent;

        transition: color 150ms, background-color 150ms;
      }

      :is(.sidebar-main-resize-lmtl4, .sidebar-mobile-main-toggle-lmtl4):hover{
        background-color: var(--cs-accent-color);
        color: var(--cs-text-on-accent-color);
      }

      &.sidebar-main-resized-lmtl4 .nav-sidebar-lmtl4 .nav-link-lmtl4 i{
        margin-right: 0;
      }
    }

    #SegmentMainTitle{
      /*font-size: .75rem;
      color: color-mix(in srgb, var(--cs-text-color) 50%, transparent); */
      opacity: 0;
    }

    #mainNavigation :is(.nav-item-lmtl4, a){
      color: var(--cs-text-color);
      background-color: transparent !important;
    }

    #mainNavigation .nav-link-lmtl4{
      position: relative;

      transition: color 150ms, background-color 150ms;
    }

    #mainNavigation .nav-link-lmtl4.active::before{
      content: '';
      position: absolute;
      top: 2px;
      bottom: 2px;
      left: 0;
      width: 4px;
      background-color: var(--cs-accent-color);
      border-start-end-radius: 4px;
      border-end-end-radius: 4px;
    }

    #mainNavigation .nav-link-lmtl4.active{
      color: color-mix(in srgb, var(--cs-accent-color) 85%, transparent);
    }

    #mainNavigation .nav-link-lmtl4:not(.active):is(:hover, :focus){
      color: color-mix(in srgb, var(--cs-accent-color) 85%, transparent);
    }

    #menu :is(.nav-group-sub-lmtl4, .nav-group-sub) :is(.active-lmtl4, .active){
      background-color: transparent !important;
      color: color-mix(in srgb, var(--cs-accent-color) 85%, transparent);
    }

    #menu .nav-item-lmtl4.nav-item-submenu-lmtl4:has(:is(.active-lmtl4, .active)) > a{
      color: color-mix(in srgb, var(--cs-accent-color) 85%, transparent);
    }
  }

  #breadcrumbBox .breadcrumb-item{
    display: flex;
    align-items: center;
  }

  .page-header-lmtl4{
    margin: 1rem;
    margin-left: calc(var(--cs-page-boxes-spacer) / 2);
    margin-bottom: calc(var(--cs-page-boxes-spacer) / 2);
    background-color: var(--cs-bg-color);
    border-bottom: 0 !important;
    border-radius: .5rem;

    .breadcrumb-line-light{
      background-color: transparent !important;
    }
  }
  @media screen and (width > 991px) {
    .sidebar-expand-lg-lmtl4.sidebar-main-resized-lmtl4:not(.sidebar-collapsed-lmtl4) + *{
      margin-left: calc(var(--spacer-lmtl4)*2 + var(--icon-font-size-lmtl4) + .7rem + calc(var(--cs-page-boxes-spacer) / 2))  !important;
    }
  }

  #sfpMainContentBox{
    padding: 0;

    margin: 1rem;
    margin-left: calc(var(--cs-page-boxes-spacer) / 2);
    margin-top: calc(var(--cs-page-boxes-spacer) / 2);
  }

  #contentScroll{
    margin-bottom: calc(40.2px + 1rem);
  }

  #sfpFooterBox{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--cs-bg-color) !important;
    z-index: 100;
    border: 0 !important;
  }

  #navbar-header{
    background-color: var(--cs-bg-color) !important;
    
    ul.nav-lmtl4.flex-row-lmtl4.justify-content-end-lmtl4.order-1-lmtl4.order-lg-2-lmtl4{
      span.d-none-lmtl4.d-lg-inline-block-lmtl4.mx-lg-2-lmtl4{
        color: var(--cs-text-color);
      }
    }

    .navbar-toggler-lmtl4.sidebar-mobile-main-toggle-lmtl4{
      color: var(--cs-text-color);
    }
  }
  #mainForm .nav-tabs-bottom .nav-link.active:before{
    background-color: var(--cs-accent-color);
  }
/* } */

/* @layer components{ */
  .sfp-btn{
    --cs-lcl-color: var(--cs-accent-color);
    --cs-lcl-text: var(--cs-text-on-accent-color);

    display: flex;
    align-items: center;
    gap: .5em;
    padding: .3em 1em;
    font-size: inherit;
    transition: color 150ms, background-color 150ms;
    border-radius: 4px;
    border: 1px solid transparent;
    height: fit-content;
    cursor: pointer;
    
    i > {
      font-size: .75em;
    }

    &.sfp-btn-sm{
      font-size: .875em;
    }

    &.sfp-btn-lg{
      font-size: 1.125em;
    }

    &.sfp-btn-dark{
      --cs-lcl-color: #000;
      --cs-lcl-text: #fff;
    }

    &.sfp-btn-light{
      --cs-lcl-color: #fff;
      --cs-lcl-text: #000;
    }

    &.sfp-btn-text{
      --cs-lcl-color: var(--cs-text-color);
      --cs-lcl-text: var(--cs-text-color-inverted);
    }

    &.sfp-btn-secondary{
      --cs-lcl-color: var(--cs-secondary-color);
      --cs-lcl-text: var(--cs-text-on-secondary-color);
    }

    &:not(.sfp-btn-outline){
      background-color: var(--cs-lcl-color);
      color: var(--cs-lcl-text);
    }

    &.sfp-btn-outline{
      border: 1px solid var(--cs-lcl-color);
      color: var(--cs-lcl-color);
    }
    
    &.sfp-btn-pill{
      border-radius: 9999px;
    }

    &.sfp-btn-outline:is(:hover, :focus-visible){
      background-color: var(--cs-lcl-color);
      color: var(--cs-lcl-text);
    }
    
    &:is(:hover, :focus-visible){
      opacity: .85;
    }
  }


  .sfp-dashboard-card{
    background-color: var(--cs-bg-color);
    border-radius: .5rem;
    padding: 1rem 1.5rem;

    display: flex;
    flex-direction: column;


    .sfp-dashboard-card-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .sfp-dashboard-card-title{
      font-size: 1rem;
    }
    
    .sfp-dashboard-card-body{
      container: card-body / inline-size;
      overflow-y: auto;
      margin-top: 1rem;
      flex-grow: 1;
    }
  }


  a.sfp-card-inline:is(:hover, :focus-visible){
    color: color-mix(in srgb, var(--cs-accent-color) 85%, transparent);
  }

  .sfp-card-inline{
    min-width: 100px;
    display: grid;
    align-items: center;
    grid-template-rows: 1fr 1fr;
    column-gap: .5rem;

    height: 2.5rem;
    color: inherit;
    transition: color 150ms, background-color 150ms;

    &:has(.sfp-card-inline-thumbnail){
      grid-template-columns: 2.5rem 1fr;
      grid-template-areas:
        'thumbnail title'
        'thumbnail description';
    }
 
    &:not(:has(.sfp-card-inline-thumbnail)){
      grid-template-columns: 1fr;
      grid-template-areas:
        'title'
        'description';
    }

    & > *{
      min-height: 0;
      min-width: 0;
      width: 100%;
    }

    .sfp-card-inline-thumbnail{
      grid-area: thumbnail;
      background-color: var(--cs-accent-color);
      border-radius: .25rem;
      aspect-ratio: 1/1;
    }

    .sfp-card-inline-title{
      grid-area: title;
      font-size: 1rem;
      font-weight: 600;

      text-wrap: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin: 0;
    }
    
    .sfp-card-inline-description{
      grid-area: description;
      font-size: .85rem;
      font-weight: 400;
      opacity: .5;

      text-wrap: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin: 0;
    }

  }

  @container card-body (150px < width < 180px) {
    .sfp-card-inline-description{
      display: none;
    }
  
    .sfp-card-inline{
      grid-template-areas:
        'thumbnail title'
        'thumbnail title';
    }
  }

  @container card-body (width < 150px) {
    .sfp-card-inline-thumbnail{
      grid-area: thumbnail;
      background-color: var(--cs-accent-color);
      border-radius: .25rem;
      aspect-ratio: 1/1;
      height: 100%;
      width: unset;
    }

    .sfp-card-inline{
      height: fit-content;
      grid-template-columns: 1fr;
      grid-template-rows: minmax(auto, 40px) minmax(auto, 1fr) minmax(auto, 1fr);
      grid-template-areas:
        'thumbnail'
        'title'
        'description';
    }
  }

  .sfp-table{

    &[role="table"]{
      display: table;
      width: 100%;
      border-collapse: collapse;
    }

    [role="row"]{
      display: table-row;
    }

    a[role="row"]{
      color: inherit;
      transition: color 150ms, background-color 150ms;
    }

    a[role="row"]:nth-child(odd){
      background-color: color-mix(in srgb, var(--cs-accent-color) 3%, transparent);
    }

    a[role="row"]:is(:hover, :focus-visible){
      background-color: color-mix(in srgb, var(--cs-accent-color) 7%, transparent);
    }

    :is([role="cell"], [role="columnheader"]){
      display: table-cell;
      vertical-align: middle;
      padding-inline: 1rem .5rem;
      padding-block: .75rem;
    }
    
    [role="row"]:has([role="columnheader"]){
      font-weight: 600;
      border-bottom: 2px solid var(--cs-secondary-color);
      color: color-mix(in srgb, var(--cs-text-color) 50%, transparent);
    }
  }
/* } */

/* @layer utilities { */
  .tw-list-style-none{
    list-style: none;
  }

  .tw-flex{
    display: flex;
  }

  .tw-flex-column{
    flex-direction: column;
  }

  .tw-gap-2{
    gap: .5rem;
  }

  .tw-gap-4{
    gap: 1rem;
  }

  .tw-gap-y-2{
    row-gap: .5rem;
  }

  .tw-gap-y-4{
    row-gap: 1rem;
  }

  .tw-gap-x-2{
    column-gap: .5rem;
  }

  .tw-gap-x-4{
    column-gap: 1rem;
  }

  .tw-gap-x-6{
    column-gap: 1.5rem;
  }

  .tw-flex-wrap{
    flex-wrap: wrap;
  }

  .tw-content-center{
    justify-content: center;
  }

  .tw-content-end{
    justify-content: end;
  }

  .tw-items-center{
    align-items: center;
  }

  .tw-fs-sm{
    font-size: .85rem;
  }

  i.tw-fs-xl{
    font-size: 3.5rem;
  }

  .tw-fs-xl{
    font-size: 1.5rem;
  }

  .tw-fs-4xl{
    --tw-cs-fs: 4rem;
    font-size: var(--tw-cs-fs);
    line-height: calc(var(--tw-cs-fs, 1em) * var(--tw-cs-lh));
  }

  .tw-lh-default{
    --tw-cs-lh: 1.25;
    line-height: calc(var(--tw-cs-fs, 1em) * var(--tw-cs-lh));
  }

  .tw-lh-lg{
    --tw-cs-lh: 1.5;
    line-height: calc(var(--tw-cs-fs, 1em) * var(--tw-cs-lh));
  }

  .tw-lh-sm{
    --tw-cs-lh: 1.125;
    line-height: calc(var(--tw-cs-fs, 1em) * var(--tw-cs-lh));
  }

  .tw-lh-none{
    --tw-cs-lh: 1;
    line-height: calc(var(--tw-cs-fs, 1em) * var(--tw-cs-lh));
  }

  .tw-fw-bold{
    font-weight: 700;
  }

  .tw-opacity-50{
    opacity: .5;
  }

  .tw-text-center{
    text-align: center;
  }

  .text-accent{
    color: var(--cs-accent-color);
  }

  .bg-accent{
    background-color: var(--cs-accent-color);
  }

  .tw-col-span-1{
    grid-column-start: span 1;
  }

  .tw-col-span-2{
    grid-column-start: span 2;
  }

  .tw-col-span-3{
    grid-column-start: span 3;
  }

  .tw-col-span-4{
    grid-column-start: span 4;
  }

  .tw-col-span-5{
    grid-column-start: span 5;
  }

  .tw-col-span-6{
    grid-column-start: span 6;
  }

  .tw-row-span-1{
    grid-row-start: span 1;
  }

  .tw-row-span-2{
    grid-row-start: span 2;
  }

  .tw-row-span-3{
    grid-row-start: span 3;
  }

  .tw-row-span-4{
    grid-row-start: span 4;
  }

  .tw-row-span-5{
    grid-row-start: span 5;
  }

  .tw-row-span-6{
    grid-row-start: span 6;
  }

  .tw-grid{
    display: grid;
  }

  .tw-grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .tw-grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tw-grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media screen and (576px < width) {
	.xs\:tw-flex-column{
      flex-direction: column;
    }
	
    .xs\:tw-flex-row{
      flex-direction: row;
    }
	
    .xs\:tw-col-span-1{
      grid-column-start: span 1;
    }

    .xs\:tw-col-span-2{
      grid-column-start: span 2;
    }

    .xs\:tw-col-span-3{
      grid-column-start: span 3;
    }

    .xs\:tw-col-span-4{
      grid-column-start: span 4;
    }

    .xs\:tw-col-span-5{
      grid-column-start: span 5;
    }

    .xs\:tw-col-span-6{
      grid-column-start: span 6;
    }

    .xs\:tw-row-span-1{
      grid-row-start: span 1;
    }

    .xs\:tw-row-span-2{
      grid-row-start: span 2;
    }

    .xs\:tw-row-span-3{
      grid-row-start: span 3;
    }

    .xs\:tw-row-span-4{
      grid-row-start: span 4;
    }

    .xs\:tw-row-span-5{
      grid-row-start: span 5;
    }

    .xs\:tw-row-span-6{
      grid-row-start: span 6;
    }

    .xs\:tw-grid-cols-1{
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .xs\:tw-grid-cols-2{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xs\:tw-grid-cols-3{
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (768px < width) {
    .md\:tw-col-span-1{
      grid-column-start: span 1;
    }

    .md\:tw-col-span-2{
      grid-column-start: span 2;
    }

    .md\:tw-col-span-3{
      grid-column-start: span 3;
    }

    .md\:tw-col-span-4{
      grid-column-start: span 4;
    }

    .md\:tw-col-span-5{
      grid-column-start: span 5;
    }

    .md\:tw-col-span-6{
      grid-column-start: span 6;
    }

    .md\:tw-row-span-1{
      grid-row-start: span 1;
    }

    .md\:tw-row-span-2{
      grid-row-start: span 2;
    }

    .md\:tw-row-span-3{
      grid-row-start: span 3;
    }

    .md\:tw-row-span-4{
      grid-row-start: span 4;
    }

    .md\:tw-row-span-5{
      grid-row-start: span 5;
    }

    .md\:tw-row-span-6{
      grid-row-start: span 6;
    }

    .md\:tw-grid-cols-1{
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .md\:tw-grid-cols-2{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:tw-grid-cols-3{
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (992px < width) {
    .lg\:tw-col-span-1{
      grid-column-start: span 1;
    }

    .lg\:tw-col-span-2{
      grid-column-start: span 2;
    }

    .lg\:tw-col-span-3{
      grid-column-start: span 3;
    }

    .lg\:tw-col-span-4{
      grid-column-start: span 4;
    }

    .lg\:tw-col-span-5{
      grid-column-start: span 5;
    }

    .lg\:tw-col-span-6{
      grid-column-start: span 6;
    }

    .lg\:tw-row-span-1{
      grid-row-start: span 1;
    }

    .lg\:tw-row-span-2{
      grid-row-start: span 2;
    }

    .lg\:tw-row-span-3{
      grid-row-start: span 3;
    }

    .lg\:tw-row-span-4{
      grid-row-start: span 4;
    }

    .lg\:tw-row-span-5{
      grid-row-start: span 5;
    }

    .lg\:tw-row-span-6{
      grid-row-start: span 6;
    }

    .lg\:tw-grid-cols-1{
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:tw-grid-cols-2{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:tw-grid-cols-3{
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (1200px < width) {
    .xl\:tw-col-span-1{
      grid-column-start: span 1;
    }

    .xl\:tw-col-span-2{
      grid-column-start: span 2;
    }

    .xl\:tw-col-span-3{
      grid-column-start: span 3;
    }

    .xl\:tw-col-span-4{
      grid-column-start: span 4;
    }

    .xl\:tw-col-span-5{
      grid-column-start: span 5;
    }

    .xl\:tw-col-span-6{
      grid-column-start: span 6;
    }

    .xl\:tw-row-span-1{
      grid-row-start: span 1;
    }

    .xl\:tw-row-span-2{
      grid-row-start: span 2;
    }

    .xl\:tw-row-span-3{
      grid-row-start: span 3;
    }

    .xl\:tw-row-span-4{
      grid-row-start: span 4;
    }

    .xl\:tw-row-span-5{
      grid-row-start: span 5;
    }

    .xl\:tw-row-span-6{
      grid-row-start: span 6;
    }

    .xl\:tw-grid-cols-1{
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .xl\:tw-grid-cols-2{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:tw-grid-cols-3{
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
/* } */

  .tw-fs-3\.5xl{
    --tw-cs-fs: 3.5rem;
    font-size: var(--tw-cs-fs);
    line-height: calc(var(--tw-cs-fs, 1em) * var(--tw-cs-lh));
  }
  
    .tw-content-between{
    justify-content: space-between;
  }