/* docara-shell-source: runtime/utility/svg-size/default/css/default.css */
@layer sf.utilities {
  .svg-1\/4 {
    width: var(--sf-text-size-1\/4);
    height: var(--sf-text-size-1\/4);
    line-height: var(--sf-text-height-1\/4);
  }
  .svg-1\/3 {
    width: var(--sf-text-size-1\/3);
    height: var(--sf-text-size-1\/3);
    line-height: var(--sf-text-height-1\/3);
  }
  .svg-1\/2 {
    width: var(--sf-text-size-1\/2);
    height: var(--sf-text-size-1\/2);
    line-height: var(--sf-text-height-1\/2);
  }
  .svg-1 {
    width: var(--sf-text-size-1);
    height: var(--sf-text-size-1);
    line-height: var(--sf-text-height-1);
  }
  .svg-2 {
    width: var(--sf-text-size-2);
    height: var(--sf-text-size-2);
    line-height: var(--sf-text-height-2);
  }
  .svg-3 {
    width: var(--sf-text-size-3);
    height: var(--sf-text-size-3);
    line-height: var(--sf-text-height-3);
  }
  .svg-4 {
    width: var(--sf-text-size-4);
    height: var(--sf-text-size-4);
    line-height: var(--sf-text-height-4);
  }
  .svg-5 {
    width: var(--sf-text-size-5);
    height: var(--sf-text-size-5);
    line-height: var(--sf-text-height-5);
  }
  .svg-6 {
    width: var(--sf-text-size-6);
    height: var(--sf-text-size-6);
    line-height: var(--sf-text-height-6);
  }
  .svg-7 {
    width: var(--sf-text-size-7);
    height: var(--sf-text-size-7);
    line-height: var(--sf-text-height-7);
  }
  .svg-8 {
    width: var(--sf-text-size-8);
    height: var(--sf-text-size-8);
    line-height: var(--sf-text-height-8);
  }
  .svg-9 {
    width: var(--sf-text-size-9);
    height: var(--sf-text-size-9);
    line-height: var(--sf-text-height-9);
  }
  .svg-10 {
    width: var(--sf-text-size-10);
    height: var(--sf-text-size-10);
    line-height: var(--sf-text-height-10);
  }
  .svg-11 {
    width: var(--sf-text-size-11);
    height: var(--sf-text-size-11);
    line-height: var(--sf-text-height-11);
  }
  .svg-12 {
    width: var(--sf-text-size-12);
    height: var(--sf-text-size-12);
    line-height: var(--sf-text-height-12);
  }
}

/* docara-shell-source: runtime/utility/svg-size/md/css/md.css */
@layer sf.utilities {
  @media (min-width: 44rem) {
    .md\:svg-1\/4 {
      width: var(--sf-text-size-1\/4);
      height: var(--sf-text-size-1\/4);
      line-height: var(--sf-text-height-1\/4);
    }
    .md\:svg-1\/3 {
      width: var(--sf-text-size-1\/3);
      height: var(--sf-text-size-1\/3);
      line-height: var(--sf-text-height-1\/3);
    }
    .md\:svg-1\/2 {
      width: var(--sf-text-size-1\/2);
      height: var(--sf-text-size-1\/2);
      line-height: var(--sf-text-height-1\/2);
    }
    .md\:svg-1 {
      width: var(--sf-text-size-1);
      height: var(--sf-text-size-1);
      line-height: var(--sf-text-height-1);
    }
    .md\:svg-2 {
      width: var(--sf-text-size-2);
      height: var(--sf-text-size-2);
      line-height: var(--sf-text-height-2);
    }
    .md\:svg-3 {
      width: var(--sf-text-size-3);
      height: var(--sf-text-size-3);
      line-height: var(--sf-text-height-3);
    }
    .md\:svg-4 {
      width: var(--sf-text-size-4);
      height: var(--sf-text-size-4);
      line-height: var(--sf-text-height-4);
    }
    .md\:svg-5 {
      width: var(--sf-text-size-5);
      height: var(--sf-text-size-5);
      line-height: var(--sf-text-height-5);
    }
    .md\:svg-6 {
      width: var(--sf-text-size-6);
      height: var(--sf-text-size-6);
      line-height: var(--sf-text-height-6);
    }
    .md\:svg-7 {
      width: var(--sf-text-size-7);
      height: var(--sf-text-size-7);
      line-height: var(--sf-text-height-7);
    }
    .md\:svg-8 {
      width: var(--sf-text-size-8);
      height: var(--sf-text-size-8);
      line-height: var(--sf-text-height-8);
    }
    .md\:svg-9 {
      width: var(--sf-text-size-9);
      height: var(--sf-text-size-9);
      line-height: var(--sf-text-height-9);
    }
    .md\:svg-10 {
      width: var(--sf-text-size-10);
      height: var(--sf-text-size-10);
      line-height: var(--sf-text-height-10);
    }
    .md\:svg-11 {
      width: var(--sf-text-size-11);
      height: var(--sf-text-size-11);
      line-height: var(--sf-text-height-11);
    }
    .md\:svg-12 {
      width: var(--sf-text-size-12);
      height: var(--sf-text-size-12);
      line-height: var(--sf-text-height-12);
    }
  }
}

/* docara-shell-source: runtime/utility/svg-size/xl/css/xl.css */
@layer sf.utilities {
  @media (min-width: 72rem) {
    .xl\:svg-1\/4 {
      width: var(--sf-text-size-1\/4);
      height: var(--sf-text-size-1\/4);
      line-height: var(--sf-text-height-1\/4);
    }
    .xl\:svg-1\/3 {
      width: var(--sf-text-size-1\/3);
      height: var(--sf-text-size-1\/3);
      line-height: var(--sf-text-height-1\/3);
    }
    .xl\:svg-1\/2 {
      width: var(--sf-text-size-1\/2);
      height: var(--sf-text-size-1\/2);
      line-height: var(--sf-text-height-1\/2);
    }
    .xl\:svg-1 {
      width: var(--sf-text-size-1);
      height: var(--sf-text-size-1);
      line-height: var(--sf-text-height-1);
    }
    .xl\:svg-2 {
      width: var(--sf-text-size-2);
      height: var(--sf-text-size-2);
      line-height: var(--sf-text-height-2);
    }
    .xl\:svg-3 {
      width: var(--sf-text-size-3);
      height: var(--sf-text-size-3);
      line-height: var(--sf-text-height-3);
    }
    .xl\:svg-4 {
      width: var(--sf-text-size-4);
      height: var(--sf-text-size-4);
      line-height: var(--sf-text-height-4);
    }
    .xl\:svg-5 {
      width: var(--sf-text-size-5);
      height: var(--sf-text-size-5);
      line-height: var(--sf-text-height-5);
    }
    .xl\:svg-6 {
      width: var(--sf-text-size-6);
      height: var(--sf-text-size-6);
      line-height: var(--sf-text-height-6);
    }
    .xl\:svg-7 {
      width: var(--sf-text-size-7);
      height: var(--sf-text-size-7);
      line-height: var(--sf-text-height-7);
    }
    .xl\:svg-8 {
      width: var(--sf-text-size-8);
      height: var(--sf-text-size-8);
      line-height: var(--sf-text-height-8);
    }
    .xl\:svg-9 {
      width: var(--sf-text-size-9);
      height: var(--sf-text-size-9);
      line-height: var(--sf-text-height-9);
    }
    .xl\:svg-10 {
      width: var(--sf-text-size-10);
      height: var(--sf-text-size-10);
      line-height: var(--sf-text-height-10);
    }
    .xl\:svg-11 {
      width: var(--sf-text-size-11);
      height: var(--sf-text-size-11);
      line-height: var(--sf-text-height-11);
    }
    .xl\:svg-12 {
      width: var(--sf-text-size-12);
      height: var(--sf-text-size-12);
      line-height: var(--sf-text-height-12);
    }
  }
}