/*********************************/
/* Reset Styles :: BEGIN */
/*********************************/
:root {
    /* UI colors HEX */
    --color-white: #FFFFFF;
    --color-light: #F8F9FA;
    --color-grey: #666666;
    --color-dark: #333333;
    --color-black: #000000;
    --color-success: #007B23;
    --color-warning: #F59D27;
    --color-danger: #DA1E28;
    --color-info: #0043CE;
    --color-link: #0F62FE;
  
    --color-success-light: #e5f1e8;
    --color-warning-light: #FFF1E5;
    --color-danger-light: #fbe8e9;
    --color-info-light: #EDF5FF;
  
    --color-success-dark: #0E6027;
    --color-warning-dark: #684E00;
    --color-danger-dark: #A2191F;
    --color-info-dark: #0043CE;
  
    --color-sul-secondary: #FBB819;
    --color-sul-text-muted: #B8BDCA;
    --color-dark-secondary: #0E1B3E;
    --color-warning-secondary: #FFB200;
    --color-primary-violet: #9100FF;
    --color-primary-violet-light: #F4E5FF;
  
  
    /* UI Colors RGB */
    --color-rgb-white: 255 255 255;
    --color-rgb-light: 248 249 250;
    --color-rgb-grey: 102 102 102;
    --color-rgb-dark: 51 51 51;
    --color-rgb-black: 0 0 0;
    --color-rgb-success: 36 161 72;
    --color-rgb-warning: 241 194 27;
    --color-rgb-danger: 218 30 40;
    --color-rgb-info: 0 67 206;
    --color-rgb-link: 15 98 254;
  
    /* Form Elements Colors (Text Input / Select / Text area) */
    --color-form-elements-border: #9E9E9E;
    --color-form-elements-placeholder: #666666;
    --color-form-elements-label: var(--color-form-elements-placeholder);
    --color-form-elements-icon: var(--color-form-elements-placeholder);
    --color-form-elements-icon-actionable: var(--color-link);
    --color-form-elements-value: #212121;
    --color-form-elements-bg: var(--color-white);
  
    --color-form-elements-helper-text: #666666;
    --color-form-elements-border-hover: #212121;
  
    --color-form-elements-border-focus: var(--color-link);
    --color-form-elements-label-focus: var(--color-form-elements-border-focus);
  
    --color-form-elements-border-success: var(--color-success);
    --color-form-elements-label-success: var(--color-form-elements-border-success);
  
    --color-form-elements-border-error: var(--color-danger);
    --color-form-elements-label-error: var(--color-form-elements-border-error);
  
    --color-form-elements-value-disabled: #a1a1a1;
    --color-form-elements-label-disabled: var(--color-form-elements-value-disabled);
    --color-form-elements-border-disabled: #f0f0f0;
    --color-form-elements-bg-disabled: #fafafa;
  
    /* Button Elements Colors */
    --color-button-disabled-text: #a1a1a1;
    --color-button-disabled-border: #a1a1a1;
    --color-button-disabled-bg: #e0e0e0;
  
    /* Section dividers & Border color */
    --color-border: #D7D7D7;
  
    /* RGB color variables for black and white :: BEGIN */
    /* Box Shadow */
    --box-shadow-1: 0 1px 3px rgba(var(--color-rgb-black) / 12%), 0 1px 2px rgba(var(--color-rgb-black) / 24%);
    --box-shadow-2: 0 3px 6px rgba(var(--color-rgb-black) / 16%), 0 3px 6px rgba(var(--color-rgb-black) / 23%);
    --box-shadow-3: 0 10px 20px rgba(var(--color-rgb-black) / 19%), 0 6px 6px rgba(var(--color-rgb-black) / 23%);
    --box-shadow-4: 0 14px 28px rgba(var(--color-rgb-black) / 25%), 0 10px 10px rgba(var(--color-rgb-black) / 22%);
    --box-shadow-5: 0 19px 38px rgba(var(--color-rgb-black) / 30%), 0 15px 12px rgba(var(--color-rgb-black) / 22%);
    --box-shadow-6: 0 11px 15px -7px rgb(var(--color-rgb-black) / 20%), 0 24px 38px 3px rgb(var(--color-rgb-black) / 14%), 0 9px 46px 8px rgb(var(--color-rgb-black) / 12%);
  
    /* Animation Functions */
    --animation-function-1: cubic-bezier(.4, 0, .2, 1);
  
    /* z-index */
    /* Order (From bottom to top layer)    /*:: On page :: Fixed Header :: Panel :: Bottom Sheet :: Toaster :: Dialog*/
    /* fab: 2345, appbar: 1138, bottom nav: 4716, loaders inside any container */
    --zindex-1: 1000;
    /* overflow menu: 3295, tooltip, richtooltip, floating dialog */
    --zindex-2: 1100;
    /* drawer: 3353 */
    --zindex-3: 1200;
    /* panel: 3356 */
    --zindex-4: 1300;
    /* bottomsheet: 2546 */
    --zindex-5: 1400;
    /* Top most z-index value for panel or botomsheet */
    --z-index-top: 1401;
    /* dialog: 3559 */
    --zindex-6: 1500;
    /* page level loader: 1465 */
    --zindex-7: 1600;
    /* toast: Toast css not added */
    --zindex-8: 1700;
    --zindex-9: 1800;
    --zindex-10: 1900;
    /* Backdrop */
    --backdrop-white: rgba(var(--color-rgb-white) / 60%);
    --backdrop-black: rgba(var(--color-rgb-black) / 50%);
    /* Border Radius Base */
    --radius-base: 0.4rem;
    /* 0.8rem */
    --radius-large: calc(var(--radius-base) * 2);
    /*1.6rem */
    --radius-xlarge: calc(var(--radius-base) * 4);
    /*2rem */
    --radius-xxlarge: calc(var(--radius-base) * 5);
    /* 10 rem */
    --radius-pill: calc(var(--radius-base) * 25);
    /* Round */
    --radius-round: 50%;
  
    /* Transition */
    --transition-1: 500ms all ease;
    --transition-2: 1000ms all ease;
    --transition-3: 1500ms all ease;
    --transition-4: 2000ms all ease;
    --transition-5: 2500ms all ease;
  
    /*Rating star image*/
    --star-rating: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 15 45' overflow='visible' xml:space='preserve'%3E%3Cpath fill='none' d='M7.5,15l2.3,5l5.3,0.7l-3.9,3.8l1,5.5l-4.6-2.7L2.9,30l1-5.5L0,20.7L5.3,20L7.5,15z'/%3E%3Cpath fill='%23666666' d='M7.5,17.5l-1.3,3L5.9,21L5.4,21l-3.2,0.4l2.4,2.4l0.4,0.4l-0.1,0.5l-0.6,3.3L7,26.5l0.5-0.3L8,26.5l2.8,1.6 l-0.6-3.3l-0.1-0.5l0.4-0.4l2.4-2.4L9.6,21L9.1,21l-0.2-0.5L7.5,17.5 M7.5,15l2.3,5l5.3,0.7l-3.9,3.8l1,5.5l-4.6-2.7L2.9,30l1-5.5 L0,20.7L5.3,20L7.5,15z'/%3E%3Cpath fill='%23FEB42B' d='M2.9,15l4.6-2.7l4.6,2.7l-1-5.5L15,5.7L9.8,5L7.5,0L5.3,5L0,5.7l3.9,3.8L2.9,15z M12.2,35.4L9.8,35l-2.3-5 l-2.3,5L0,35.7l0,0l0,0l3.9,3.8l-1,5.5l0,0v0l4.6-2.7l4.6,2.7v0l0,0l-0.4-2.2l-0.6-3.2l2.4-2.4l1.4-1.4l0,0l0,0L12.2,35.4z M10.4,38.8l-0.4,0.4l0.1,0.5l0.6,3.3L8,41.5l-0.5-0.3v-8.7l1.3,3L9.1,36L9.6,36l3.2,0.4L10.4,38.8z'/%3E%3C/svg%3E");
  }
  
  html {
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-primary);
    font-size: 62.5%;
    line-height: var(--line-height-base);
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  body {
    font-family: var(--font-family-primary);
    margin: 0;
    color: var(--color-body-color);
    background: var(--color-body-background);
    padding-top: 0;
    font-size: var(--font-size-base);
    overflow: auto;
    overflow: overlay;
  }
  
  a {
    color: var(--color-link);
    text-decoration: none;
  }
  
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  b,
  strong {
    font-weight: var(--font-weight-bold, bolder);
  }
  
  blockquote {
    margin: 0 0 calc(var(--base-font-size) * 0.0625);
    font-size: calc(var(--base-font-size) * 0.125);
  }
  
  figure {
    margin: 0;
    border-radius: inherit;
  }
  
  img,
  picture,
  video,
  canvas,
  svg {
    border: 0;
    display: block;
    max-width: 100%;
  }
  
  figure img,
  figure .sk-icons {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  
  p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-top: 0;
    margin-bottom: var(--gutter-base);
  }
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: var(--line-height-base);
    margin: 0;
  }
  
  button,
  input {
    overflow: visible;
    outline: 0;
  }
  
  button,
  select {
    text-transform: none;
    outline: 0;
    border: 0;
  }
  
  textarea {
    overflow: auto;
  }
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }
  
  /* Search field close button hide */
  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
  
  /*Remove up/down arrow from input*/
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    opacity: 0;
  }
  
  input[type=number] {
    -moz-appearance: textfield;
  }
  
  input:-webkit-autofill {
    background-color: transparent !important;
  }
  
  input:autofill {
    background-color: transparent !important;
  }
  
  /* Table style :: BEGIN */
  table {
    border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
  }
  
  table th {
    background: var(--table-header-background);
    color: var(--color-dark);
  }
  
  table td {
    color: var(--color-dark);
  }
  
  table td,
  table th {
    border: var(--table-border-width) solid var(--table-border-color);
    text-align: left;
    border-bottom: 0.1rem solid var(--table-border-color);
    padding: 1rem;
  }
  
  /* Custom table */
  .sk-data-table {
    width: 100%;
    overflow-x: auto;
    overflow-x: overlay;
    font-size: 1.4rem;
  }
  
  /* Table fixed header */
  .sk-data-table.sk-table-fixed-header th {
    position: sticky;
    top: 0;
  }
  
  /* Flat Table (Border bottom only) */
  .sk-data-table.sk-flat-table table,
  .sk-data-table.flat-table table {
    margin: 0;
    background-color: transparent;
    border: 0;
  }
  
  .sk-data-table.sk-flat-table th,
  .sk-data-table.flat-table th {
    background-color: transparent;
    border: 0;
  }
  
  .sk-data-table.sk-flat-table td,
  .sk-data-table.flat-table td {
    border-left: 0;
    border-right: 0;
  }
  
  .sk-data-table.sk-flat-table tr:last-child td,
  .sk-data-table.flat-table tr:last-child td {
    border: 0;
  }
  
  /* Borderless table */
  .sk-data-table.sk-table-borderless th,
  .sk-data-table.sk-table-borderless td {
    border: 0;
    background-color: transparent;
  }
  
  /* Fixed/Equal column width */
  .sk-data-table.sk-table-fixed table,
  .sk-data-table.layout-fixed table {
    table-layout: fixed;
    width: 100%;
  }
  
  /* Stripped rows */
  .sk-data-table.sk-table-striped tr:nth-of-type(even) {
    background: var(--table-header-background);
  }
  
  /* Hoverable rows */
  .sk-data-table.sk-table-hover tr:hover td {
    background: var(--table-header-background);
  }
  
  
  /* Table Cell width:: BEGIN  */
  .sk-width-xxlarge {
    width: 35rem;
    min-width: 35rem;
  }
  
  .sk-width-xlarge {
    width: 28rem;
    min-width: 28rem;
  }
  
  .sk-width-large {
    width: 20rem;
    min-width: 20rem;
  }
  
  .sk-width-medium {
    width: 15rem;
    min-width: 15rem;
  }
  
  .sk-width-small {
    width: 10rem;
    min-width: 10rem;
  }
  
  .sk-width-xsmall {
    width: 8rem;
    min-width: 8rem;
  }
  
  .sk-width-xxsmall {
    width: 3rem;
    min-width: 3rem;
  }
  
  @media (min-width: 769px) {
    .sk-width-xxlarge {
      width: 50rem;
      min-width: 50rem;
    }
  
    .sk-width-xlarge {
      width: 35rem;
      min-width: 35rem;
    }
    .sk-width-large {
      width: 25rem;
      min-width: 25rem;
    }  
  }
  /* Table Cell width:: End */
  
  
  /* Table style :: BEGIN */
  
  
  /* Custom Scroll Bar :: BEGIN */
  *::-webkit-scrollbar,
  *::-webkit-scrollbar-thumb {
    width: 5px;
    height: 0;
    border-radius: 13px;
    background-clip: padding-box;
  }
  
  *::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 0 10px;
    color: transparent;
  }
  
  *:hover::-webkit-scrollbar-thumb {
    color: rgba(0, 0, 0, 0.3);
  }
  
  /* * {
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
  } */
  
  
  * .sk-scroll-visible {
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
  }
  
  @media (max-width: 768px) {
    *::-webkit-scrollbar {
      display: none;
    }
  }
  
  /* Custom Scroll Bar :: END */
  /* The Notch and CSS :: BEGIN */
  /* Note: Use meta tag with viewport-fit=cover in order to use the full available screen for phones that have notch like iPhone <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">   along with the env() variables to define padding respectively. */
  body {
    padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
  }
  
  /* The Notch and CSS :: END */
  /*********************************/
  /* Reset Styles :: END */
  /*********************************/
  
  /*********************************/
  /* Ripple Effect :: BEGIN */
  /*********************************/
  .sk-ripple-container {
    position: absolute;
    box-sizing: content-box;
    overflow: hidden;
    z-index: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  
  .sk-ripple-container:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, currentColor 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s
  }
  
  .sk-ripple-container:active:after {
    transform: scale(0, 0);
    opacity: .2;
    transition: 0s
  }
  
  /*********************************/
  /* Ripple Effect :: END */
  /*********************************/
  
  /*********************************/
  /* Typography :: BEGIN */
  /*********************************/
  /*sk-h1 - Title xxlarge
  sk-h2 - Title xlarge
  sk-h3 - Title Large
  sk-h4 - Title Medium
  sk-h5 - Title Small
  sk-h6 - Title xsmall*/
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .sk-h1,
  .sk-h2,
  .sk-h3,
  .sk-h4,
  .sk-h5,
  .sk-h6 {
    font-family: var(--font-family-headings, var(--font-family-primary));
    margin-top: 0;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.2;
  }
  .sk-h7,
  .sk-h8,
  .sk-h9 {
    margin-top: 0;
    font-family: var(--font-family-headings, var(--font-family-primary));
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: var(--gutter-base);
    font-weight: var(--font-weight-bold);
    /* Font bold will be applied only for h1 - h6 tags. Not for sk-h1 to h6 class names. */
  }
  
  .sk-h1,
  .sk-h2,
  .sk-h3,
  .sk-h4,
  .sk-h5,
  .sk-h6 {
    margin-bottom: 0;
    font-weight: 600;
  }
  
  h1,
  .sk-h1 {
    font-size: 4.2rem;
  }
  
  h2,
  .sk-h2 {
    font-size: 3.6rem;
  }
  
  h3,
  .sk-h3 {
    font-size: 3rem;
  }
  
  h4,
  .sk-h4 {
    font-size: 2.4rem;
  }
  
  h5,
  .sk-h5 {
    font-size: 2rem;
  }
  
  h6,
  .sk-h6 {
    font-size: 1.8rem;
  }
  
  @media(max-width: 1200px) {
  
    h1,
    .sk-h1 {
      font-size: 4.8rem;
    }
  
    h2,
    .sk-h2 {
      font-size: 3.6rem;
    }
  
    h3,
    .sk-h3 {
      font-size: 2.8rem;
    }
  
    h4,
    .sk-h4 {
      font-size: 2.2rem;
    }
  
    h5,
    .sk-h5 {
      font-size: 1.8rem;
    }
  
    h6,
    .sk-h6 {
      font-size: 1.6rem;
    }
  }
  
  
  /* Other Typography :: BEGIN */
  .sk-h7 {
    font-size: 1.6rem;
  }
  .sk-h8 {
    font-size: 1.4rem;
  }
  .sk-h9 {
    font-size: 1.2rem;
  }
  .sk-h10 {
    font-size: 1rem;
  }
  /* Other Typography :: END */
  
  /* Font Weight :: BEGIN */
  .sk-font-regular {
    font-weight: var(--font-weight-regular);
  }
  .sk-font-medium {
    font-weight: var(--font-weight-medium);
  }
  .sk-font-bold {
    font-weight: var(--font-weight-bold);
  }
  /* Font Weight :: END */
  
  /* Headings h1 - h6 :: END */
  
  
  /* Sub Titles :: BEGIN */
  :is([class^="sk-subtitle"]) {
    font-weight: var(--font-weight-medium, 500)
  }
  
  .sk-subtitle-1 {
    font-size: 1.6rem;
    letter-spacing: 0.0094rem;
  }
  
  .sk-subtitle-2 {
    font-size: 1.4rem;
    letter-spacing: 0.0072rem;
  }
  
  /* Sub Titles :: END */
  /* lead paragraph and small tags :: BEGIN */
  .sk-lead,
  .sk-lead-text {
    font-size: 2rem;
    font-size: calc(var(--font-size-base) * 1.25);
    font-weight: var(--font-weight-regular, 400);
  }
  
  .sk-body-text-1 {
    font-size: 1.6rem;
    letter-spacing: 0.032rem;
    line-height: 2.4rem;
  }
  
  .sk-body-text-2 {
    font-size: 1.4rem;
    letter-spacing: 0.018rem;
    line-height: 2rem;
  }
  
  .sk-caption-text {
    font-size: 1.2rem;
    letter-spacing: .032rem;
    line-height: 1.6rem;
    color: var(--color-text-muted);
  }
  
  .sk-overline-text {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.166rem;
    font-weight: var(--font-weight-medium, 500)
  }
  
  small,
  .sk-small {
    font-size: 1.2rem;
  }
  
  /* TODO :: Its used, This can be check and remove */
  .sk-description-text {
    color: var(--color-text-muted);
    display: block;
  }
  
  .sk-bold {
    font-weight: var(--font-weight-bold, 600);
  }
  
  /* lead paragraph and small tags :: END */
  /*********************************/
  /* Typography :: END */
  /*********************************/
  
  /*********************************/
  /* Utilities :: BEGIN */
  /*********************************/
  :root {
    --gutter-xsmall: calc(var(--gutter-base) * 0.25);
    /* 0.4rem */
    --gutter-small: calc(var(--gutter-base) * 0.5);
    /* 0.8rem */
    --gutter-large: calc(var(--gutter-base) * 1.5);
    /* 2.4rem */
    --gutter-xlarge: calc(var(--gutter-base) * 3);
    /* 4.8 rem */
  }
  
  /* Color Utilities :: BEGIN */
  .sk-primary {
    color: var(--color-primary);
  }
  
  .sk-secondary {
    color: var(--color-secondary);
  }
  
  .sk-success {
    color: var(--color-success);
  }
  
  .sk-danger {
    color: var(--color-danger);
  }
  
  .sk-warning {
    color: var(--color-warning);
  }
  
  .sk-info {
    color: var(--color-info);
  }
  
  .sk-light {
    color: var(--color-light);
  }
  
  .sk-dark {
    color: var(--color-dark);
  }
  
  .sk-link {
    color: var(--color-link);
  }
  
  .sk-white {
    color: var(--color-white);
  }
  
  .sk-black {
    color: var(--color-black);
  }
  
  .sk-primary-violet {
    color: var(--color-primary-violet);
  }
  
  /* background color utilities */
  .sk-bg-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
  }
  
  .sk-bg-secondary {
    background-color: var(--color-secondary) !important;
  }
  
  .sk-bg-success {
    background-color: var(--color-success);
  }
  
  .sk-bg-danger {
    background-color: var(--color-danger);
  }
  
  .sk-bg-warning {
    background-color: var(--color-warning);
  }
  
  .sk-bg-info {
    background-color: var(--color-info);
  }
  
  .sk-bg-light {
    background-color: var(--color-light);
  }
  
  .sk-bg-dark {
    background-color: var(--color-dark);
  }
  
  .sk-bg-link {
    background-color: var(--color-link);
  }
  
  .sk-bg-white {
    background-color: var(--color-white);
  }
  
  .sk-bg-black {
    background-color: var(--color-black);
  }
  /* light variant background color utilities */
  :is(.sk-bg-primary-light) {
    background-color: var(--color-primary-light) !important;
  }
  :is(.sk-bg-gray-light) {
    background-color: var(--color-light) !important;
  }
  
  :is(.sk-bg-secondary-light) {
    background-color: var(--color-secondary-light) !important;
  }
  
  :is(.sk-bg-success-light) {
    background-color: var(--color-success-light) !important;
    color: var(--color-success) !important;
  }
  
  :is(.sk-bg-danger-light) {
    background-color: var(--color-danger-light) !important;
    color: var(--color-danger) !important;
  }
  
  :is(.sk-bg-warning-light) {
    background-color: var(--color-warning-light) !important;
    color: var(--color-warning) !important;
  }
  
  :is(.sk-bg-info-light) {
    background-color: var(--color-info-light) !important;
  }
  
  :is(.sk-bg-primary-violet) {
    background-color: var(--color-primary-violet) !important;
  }
  
  :is(.sk-bg-primary-light-violet) {
    background-color: var(--color-primary-violet-light) !important;
    color: var(--color-primary-violet) !important;
  }
  
  :is(.sk-bg-white) {
    background-color: var(--color-white) !important;
    color: var(--color-black) !important;
  }
  
  /* Color Utilities :: END */
  
  /* Flex Utililties :: BEGIN */
  .sk-flex {
    display: flex !important;
  }
  
  /* Alingment Vertically */
  .sk-flex-align-start {
    align-items: flex-start !important;
  }
  
  .sk-flex-align-end {
    align-items: flex-end !important;
  }
  
  .sk-flex-align-center {
    align-items: center !important;
  }
  
  .sk-flex-wrap {
    flex-wrap: wrap !important;
  }
  
  .sk-flex-no-wrap {
    flex-wrap: nowrap !important;
  }
  
  /*TODO :: Remove this and use proper utilities */
  .sk-flex-row.sk-no-wrap {
    flex-wrap: nowrap;
  }
  
  .sk-flex.align-center {
    align-items: center;
  }
  
  /*TODO :: Remove this and use proper utilities */
  
  
  .sk-flex-direction-row {
    flex-direction: row;
  }
  
  /* TODO :: Do we need two different classes here */
  .sk-flex-direction-column,
  .sk-flex-column {
    flex-direction: column;
  }
  
  /* Alingment Horizontally */
  .sk-flex-justify-start {
    justify-content: flex-start !important;
  }
  
  .sk-flex-justify-end {
    justify-content: flex-end !important;
  }
  
  .sk-flex-justify-center {
    justify-content: center !important;
  }
  
  .sk-flex-justify-between {
    justify-content: space-between !important;
  }
  
  .sk-flex-justify-around {
    justify-content: space-around !important;
  }
  
  .sk-flex-justify-evenly {
    justify-content: space-evenly !important;
  }
  
  .sk-flex-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  /* Truncate & Line clamp */
  .sk-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }
  
  .sk-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .sk-line-clamp.sk-line-2 {
    -webkit-line-clamp: 2;
  }
  
  .sk-line-clamp.sk-line-3 {
    -webkit-line-clamp: 3;
  }
  
  .sk-line-clamp.sk-line-4 {
    -webkit-line-clamp: 4;
  }
  
  /* text alignments */
  .sk-text-start {
    text-align: left !important;
  }
  
  .sk-text-center {
    text-align: center !important;
  }
  
  .sk-text-end {
    text-align: right !important;
    margin-left: auto;
  }
  
  /* text wrap and word break */
  /* TODO :: Check this and remove, Its not used anywhere */
  .sk-text-nowrap {
    white-space: nowrap !important;
  }
  
  /* Break single lengthy word */
  .sk-text-break-word {
    word-wrap: break-word !important;
    word-break: break-all !important;
  }
  
  /* text transforms */
  .sk-text-lowercase {
    text-transform: lowercase !important;
  }
  
  .sk-text-uppercase {
    text-transform: uppercase !important;
  }
  
  .sk-text-capitalize {
    text-transform: capitalize !important;
  }
  
  /* Text Decoration */
  .sk-line-through {
    text-decoration: line-through !important;
  }
  
  .sk-underline {
    text-decoration: underline !important;
  }
  
  /* Common Utilities :: BEGIN */
  .sk-hide {
    display: none !important;
  }
  
  .sk-show {
    display: block !important;
  }
  
  /* TODO :: Check and remove this. Already we have different type of text color. This can be replaced with "sk-danger" & "sk-success" */
  .sk-error-text {
    color: var(--color-danger);
  }
  
  .sk-success-text {
    color: var(--color-success);
  }
  
  .sk-warning-text {
    color: var(--color-warning);
  }
  
  /* TODO ::  This clss name can be replaced with "sk-warning" */
  
  
  /* line height */
  .sk-line-height-large {
    line-height: var(--line-height-large) !important;
  }
  
  .sk-line-height-small {
    line-height: var(--line-height-small) !important;
  }
  
  /* Rupee symbol css */
  .sk-rupee:before {
    content: "\20B9";
    font-family: Arial, Helvetica, sans-serif;
    font-weight: var(--font-weight-regular);
    font-size: 100%;
  }
  
  /* Required Class */
  /* .sk-required {
    color: var(--color-primary) !important;
  } */
  .sk-required {
    color: var(--color-danger) !important;
  }
  
  /* Stretched Link */
  .sk-stretched-link {
    color: var(--color-link);
  }
  
  .sk-stretched-link.sk-light {
    color: var(--color-text-muted);
  }
  
  /* Divider */
  .sk-divider {
    border-bottom: 0.1rem solid var(--color-border);
    margin: var(--gutter-base) 0;
  }
  
  .sk-divider-vertical {
    border-right: .1rem solid var(--color-border);
    margin: 0 var(--gutter-small);
    min-height: 100%;
  }
  
  /* Disable Scroll */
  .no-scroll,
  .sk-disabled-scroll {
    overflow: hidden;
  }
  
  /* Disabled Element */
  .sk-disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  
  /* Backdrop for Panels, Dialogs and Bottom sheets */
  .sk-backdrop {
    content: '';
    position: fixed;
    background: var(--backdrop-black);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    animation: fadeIn 0.4s var(--animation-function-1);
  }
  
  /* TODO :: Add this in component level instead of css */
  .sk-persistent .sk-backdrop {
    pointer-events: none;
  }
  
  /* TODO :: Add this in component level instead of css */
  
  /* TODO :: ".sk-chat-list .sk-card" This css style seems project specific, Please check and move/remove. */
  .sk-clickable {
    cursor: pointer;
  }
  
  @media (min-width:768px) {
  
    /* It's used to hide particular section in web*/
    .sk-web-hide {
      display: none !important;
    }
  }
  
  @media (max-width:768px) {
  
    /* It's used to hide particular section in mobile */
    .sk-mobile-hide {
      display: none !important;
    }
  }
  
  @media (max-width:992px) {
  
    /* Enable Horizontal Scroll for the wrapper */
    .sk-x-scroll {
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
    }
  
    .sk-x-scroll * {
      white-space: normal;
    }
  }
  
  /* Common Utilities :: END */
  /* Padding :: BEGIN */
  /* Padding X & Y */
  .sk-padding-0 {
    padding: 0 !important;
  }
  
  .sk-padding-top-0 {
    padding-top: 0 !important;
  }
  
  .sk-padding-top-large {
    padding-top: var(--gutter-large) !important;
  }
  
  .sk-padding-bottom-0 {
    padding-bottom: 0 !important;
  }
  
  .sk-padding {
    padding: var(--gutter-base) !important;
  }
  
  .sk-padding-small {
    padding: var(--gutter-small) !important;
  }
  
  
  
  .sk-padding-xsmall {
    padding: var(--gutter-xsmall) !important;
  }
  
  .sk-padding-large {
    padding: var(--gutter-large) !important;
  }
  
  .sk-padding-xlarge {
    padding: var(--gutter-xlarge) !important;
  }
  
  .sk-padding-x-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  
  .sk-padding-x {
    padding-right: var(--gutter-base) !important;
    padding-left: var(--gutter-base) !important;
  }
  
  /* Padding Y */
  .sk-padding-y-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .sk-padding-y {
    padding-top: var(--gutter-base) !important;
    padding-bottom: var(--gutter-base) !important;
  }
  
  .sk-padding-y-large {
    padding-top: var(--gutter-large) !important;
    padding-bottom: var(--gutter-large) !important;
  }
  
  .sk-padding-top {
    padding-top: var(--gutter-base) !important;
  }
  
  .sk-padding-bottom {
    padding-bottom: var(--gutter-base) !important;
  }
  
  .sk-padding-left {
    padding-left: var(--gutter-base) !important; 
  }
  /* Padding :: END */
  /* Margin :: BEGIN */
  .sk-margin-start-auto {
    margin-left: auto !important;
  }
  
  .sk-margin-end-auto {
    margin-right: auto !important;
  }
  
  .sk-margin-start-0 {
    margin-left: 0 !important;
  }
  
  .sk-margin-end-0 {
    margin-right: 0 !important;
  }
  
  /* Margin X */
  .sk-margin-x-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  .sk-margin-x {
    margin-right: var(--gutter-base) !important;
    margin-left: var(--gutter-base) !important;
  }
  
  
  /* Margin Y */
  .sk-margin-top-0 {
    margin-top: 0 !important;
  }
  
  .sk-margin-bottom-0 {
    margin-bottom: 0 !important;
  }
  
  .sk-margin-y-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .sk-margin-y {
    margin-top: var(--gutter-base) !important;
    margin-bottom: var(--gutter-base) !important;
  }

  .sk-margin-y-xlarge {
    margin-top: var(--gutter-xlarge) !important;
    margin-bottom: var(--gutter-xlarge) !important;
  }
  
  .sk-margin-top {
    margin-top: var(--gutter-base) !important;
  }
  
  .sk-margin-bottom {
    margin-bottom: var(--gutter-base) !important;
  }
  
  .sk-margin-bottom-large {
    margin-bottom: var(--gutter-large) !important;
  }
  
  .sk-margin-bottom-xlarge {
    margin-bottom: var(--gutter-xlarge) !important;
  }
  
  .sk-padding-bottom-large {
    margin-bottom: var(--gutter-large) !important;
  }
  
  .sk-padding-bottom-xlarge {
    margin-bottom: var(--gutter-xlarge) !important;
  }
  
  .sk-margin-bottom-large {
    margin-bottom: var(--gutter-large) !important;
  }
  
  /* Margin :: END */
  /* Border Radius :: BEGIN */
  .sk-radius-x-0 {
    border-radius: 0 !important;
  }
  
  .sk-radius {
    border-radius: var(--radius-base) !important;
  }
  
  .sk-radius-large {
    border-radius: var(--radius-large) !important;
  }
  
  .sk-radius-pill {
    border-radius: var(--radius-pill) !important;
  }
  
  .sk-radius-round {
    /* Apply only for square elements */
    border-radius: var(--radius-round) !important;
  }
  
  /* Border Radius :: END */
  /* Box Shadow :: BEGIN */
  .sk-elevation-0 {
    box-shadow: none !important;
  }
  
  .sk-elevation-1 {
    box-shadow: var(--box-shadow-1) !important;
  }
  
  .sk-elevation-2 {
    box-shadow: var(--box-shadow-2) !important;
  }
  
  .sk-elevation-3 {
    box-shadow: var(--box-shadow-3) !important;
  }
  
  .sk-elevation-4 {
    box-shadow: var(--box-shadow-4) !important;
  }
  
  .sk-elevation-5 {
    box-shadow: var(--box-shadow-5) !important;
  }
  
  /* Box Shadow :: END */
  /* Text Utilities :: END */
  /* Animation :: BEGIN */
  @keyframes slideInUp {
    0% {
      transform: translate3d(0, 100%, 0);
      visibility: visible
    }
  
    to {
      transform: translateZ(0)
    }
  }
  
  @keyframes slideInDown {
    0% {
      transform: translate3d(100%, 0, 0);
      visibility: visible
    }
  
    to {
      transform: translateZ(0)
    }
  }
  
  .animate__slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0
    }
  
    to {
      opacity: 1
    }
  }
  
  .animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
  }
  
  /* Animation :: END */
  /*********************************/
  /* Utilities :: END */
  /*********************************/
  
  /*********************************/
  /* App bar & Title bar :: BEGIN */
  /*********************************/
  .sk-appbar {
    background-color: var(--color-white);
    width: 100%;
    display: flex;
    align-items: center;
    height: 5.6rem;
    border-bottom: 0.1rem solid var(--color-border);
    z-index: var(--zindex-3);
  }
  
  .sk-appbar-shadow {
    /* Todo: Define a box shadow variable from the root variables */
    box-shadow: 0 0 0.5rem 0 #bbb;
  }
  
  .sk-appbar.sk-appbar-fixed {
    top: 0;
    position: sticky;
  }
  
  .sk-appbar-row,
  .sk-appbar-row :is(.sk-container, .sk-container-fluid),
  .sk-title-bar {
    display: flex;
    width: 100%;
    align-items: center;
  }
  
  .sk-appbar-row :is(.sk-container, .sk-container-fluid) {
    padding-left: 0;
    padding-right: 0;
  }
  
  .sk-title-bar {
    margin: var(--gutter-base) 0;
    height: 4rem;
  }
  
  .sk-appbar-section,
  .sk-title-bar-section {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
  }
  
  .sk-appbar-align-start,
  .sk-title-bar-start {
    justify-content: flex-start;
  }
  
  .sk-appbar-align-end {
    gap: 1rem;
  }
  
  .sk-appbar-align-end .sk-overflow-menu {
    display: flex;
  }
  
  .sk-appbar .sk-overflow-menu .sk-overflow-list {
    right: 1.5rem;
  }
  
  .sk-appbar-align-end,
  .sk-title-bar-end {
    justify-content: flex-end;
  }
  
  .sk-appbar .sk-h4 {
    font-size: 2rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 0;
  }
  
  
  
  /* Title bar  */
  /* TODO :: This title bar can be moved to consumer app specific css file. */
  .sk-title-bar .sk-title-bar-start {
    overflow: hidden;
    flex-wrap: wrap;
  }
  
  .sk-title-bar .sk-title-bar-start .sk-title {
    font-weight: var(--font-weight-bold, bold);
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 0;
  }
  
  .sk-title-bar .sk-title-bar-start .sk-sub-head:not(:empty) {
    font-size: 1.4rem;
    margin-top: 0.5rem;
    display: block;
    font-weight: normal;
    color: var(--color-text-muted);
    width: 100%;
    line-height: 120%;
  }
  
  .sk-title-bar .sk-title-bar-section .sk-button {
    white-space: nowrap;
  }
  
  /* Appbar header start with title & button gutter space  styles */
  .sk-appbar-section.sk-appbar-align-start .sk-button+.sk-h4 {
    padding-left: 0;
  }
  
  .sk-appbar-section.sk-appbar-align-start .sk-h4:first-child:not(:empty) {
    padding-left: var(--gutter-base);
  }
  
  /* Logo with app bar */
  .sk-appbar-logo {
    margin: 0 var(--gutter-base);
  }
  
  .sk-appbar-align-start .sk-button~.sk-appbar-logo {
    margin-left: var(--gutter-base);
  }
  
  .sk-appbar .sk-logo svg {
    max-width: 7.5rem;
    margin-left: 1.2rem;
  }
  
  .sk-appbar-logo img {
    object-fit: contain;
  }
  
  @media (min-width: 768px) {
    .sk-appbar {
      height: 6.4rem;
      padding: 0 var(--gutter-base);
    }
  
    .sk-appbar-logo {
      margin: 0 var(--gutter-base) 0 0;
    }
  }
  
  @media (max-width: 768px) {
    .sk-appbar {
      height: 5.6rem;
    }
  }
  
  /*********************************/
  /* App bar & Title bar :: END */
  /*********************************/
  /*********************************/
  /* Sticky level css :: BEGIN */
  /*********************************/
  .sk-sticky {
    position: sticky !important;
  }
  
  .sk-sticky-top-3 {
    top: 10.5rem;
    z-index: var(--zindex-1);
  }
  
  .sk-sticky-top-2 {
    top: 5.6rem;
    z-index: var(--zindex-2);
  }
  
  .sk-sticky-top-1 {
    top: 0;
    z-index: 10;
  }
  
  /*this style used to nav sticky menu*/
  @media (min-width: 768px) {
    .sk-sticky-top-2 {
      top: 6.4rem;
    }
  
    .sk-sticky-top-3 {
      top: 13.3rem;
    }
  }
  
  /*********************************/
  /* Sticky level css :: END */
  /*********************************/
  /*********************************/
  /* Empty state and Overlay :: BEGIN */
  /*********************************/
  
  /* TODO :: Need to check and prepare documentation for "sk-overlay-content" */
  .sk-empty-state {
    position: relative;
    display: none;
  }
  
  .sk-overlay-content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
    background-color: var(--backdrop-black);
    color: var(--color-white);
    padding: 1.5rem;
  }
  
  .sk-card .sk-overlay-content {
    border-radius: var(--radius-base);
  }
  
  .sk-empty-state .sk-empty-inner,
  .sk-overlay-content .sk-overlay-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: 100%;
  }
  
  .sk-empty-state .sk-empty-inner {
    height: revert;
    padding: var(--gutter-xlarge);
  }
  
  .sk-empty-state .sk-image {
    height: 20rem;
  }
  
  .sk-empty-state .sk-image+b,
  .sk-empty-state .sk-image+p {
    margin-top: var(--gutter-base);
  }
  
  @media (max-width: 768px) {
    .sk-empty-state .sk-empty-inner {
      padding: var(--gutter-base);
    }
  }
  
  /*********************************/
  /* Empty state and Overlay :: END */
  /*********************************/
  /*********************************/
  /* Layout Styles :: BEGIN */
  /*********************************/
  @media (min-width: 576px) {
    .sk-container {
      width: 100%;
      max-width: 132rem;
    }
  
    .sk-container.sk-container-small {
      max-width: 54rem;
    }
  
    .sk-container.sk-container-medium {
      max-width: 72rem;
    }
  
    .sk-container.sk-container-large {
      max-width: 96rem;
    }
  
    .sk-container.sk-container-xlarge {
      max-width: 114rem;
    }
  }
  
  .sk-container,
  .sk-container-fluid {
    width: 100%;
    margin: 0 auto;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  
  .sk-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -1.2rem;
    margin-left: -1.2rem;
  }
  
  [class^=sk-col-],
  [class^=sk-col] {
    position: relative;
    width: 100%;
    min-height: 0.1rem;
    padding-right: 1.2rem;
    padding-left: 1.2rem;
  }
  
  .sk-col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%
  }
  
  .sk-col-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  
  .sk-col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  
  .sk-col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  
  .sk-col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  
  .sk-col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  .sk-col-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  
  .sk-col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .sk-col-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  
  .sk-col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  
  .sk-col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  
  .sk-col-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  
  .sk-col-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  
  .sk-col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  @media (max-width: 768px) {
    .sk-col-fluid {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
  
  /*********************************/
  /* Layout Styles :: END */
  /*********************************/
  
  /*********************************/
  /* Loader :: BEGIN */
  /*********************************/
  
  /* Loader Structure :: BEGIN */
  .sk-loader {
    display: none;
    z-index: var(--zindex-7);
  }
  
  .sk-loader .sk-loader-inner {
    height: 100%;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  /* Loader text */
  .sk-loader .sk-loader-text {
    color: var(--color-primary);
    margin: 1rem 0;
  }
  
  /* Loader Structure :: END */
  
  /* Spinner Loader :: BEGIN */
  .sk-spinner-loader {
    position: relative;
    width: 3.8rem;
    height: 3.8rem;
  }
  
  .sk-spinner-loader .sk-circular {
    animation: sprocess-rotate 2s linear infinite;
    -webkit-animation: sprocess-rotate 2s linear infinite;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  
  .sk-spinner-loader .sk-path {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: 0;
    animation: sprocess-dash 1.5s ease-in-out infinite, sprocess-color 3s ease-in-out infinite;
    -webkit-animation: sprocess-dash 1.5s ease-in-out infinite, sprocess-color 3s ease-in-out infinite;
    stroke-linecap: round;
    stroke-width: 3;
    stroke-miterlimit: 10;
  }
  
  /* Keyframe :: BEGIN */
  @keyframes sprocess-rotate {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes sprocess-rotate {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  @keyframes sprocess-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
  
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
  
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }
  
  @-webkit-keyframes sprocess-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
  
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
  
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }
  
  /* Multi Color Keyframe */
  @keyframes sprocess-color {
  
    100%,
    0% {
      stroke: var(--color-primary);
    }
  }
  
  @-webkit-keyframes sprocess-color {
  
    100%,
    0% {
      stroke: var(--color-primary);
    }
  }
  
  /* Light Color Keyframe */
  @keyframes sprocess-white-color {
    0% {
      stroke: var(--color-white);
    }
  
    100% {
      stroke: var(--color-white);
    }
  }
  
  /* Current color */
  @keyframes sprocess-current-color {
    0% {
      stroke: currentColor;
    }
  
    100% {
      stroke: currentColor;
    }
  }
  
  /* Keyframe :: END */
  /* Spinner Loader :: END */
  
  /* Linear Loader :: BEGIN */
  /* Note:: Interminate is default - Determinate can be changed by adding props */
  .sk-linear-loader {
    overflow: hidden;
    width: 100%;
    height: 0.4rem;
    background-color: rgba(var(--color-rgb-primary)/20%);
  }
  
  .sk-linear-loader .sk-linear-indeterminate {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .sk-linear-loader .sk-linear-indeterminate:before {
    content: '';
    position: absolute;
    height: 100%;
    background-color: var(--color-primary);
    animation: indeterminate-first 1.5s infinite ease-out;
  }
  
  .sk-linear-loader .sk-linear-indeterminate:after {
    content: '';
    position: absolute;
    height: 100%;
    background-color: rgba(var(--color-rgb-primary)/20%);
    animation: indeterminate-second 1.5s infinite ease-in;
  }
  
  .sk-linear-loader .sk-linear-determinate {
    position: relative;
    max-width: 100%;
    height: 100%;
    -webkit-transition: width 500ms ease-out 1s;
    -moz-transition: width 500ms ease-out 1s;
    -o-transition: width 500ms ease-out 1s;
    transition: width 500ms ease-out 1s;
    background-color: var(--color-primary);
  }
  
  @keyframes indeterminate-first {
    0% {
      left: -100%;
      width: 100%;
    }
  
    100% {
      left: 100%;
      width: 10%;
    }
  }
  
  @keyframes indeterminate-second {
    0% {
      left: -150%;
      width: 100%;
    }
  
    100% {
      left: 100%;
      width: 10%;
    }
  }
  
  /* Linear Loader :: END */
  
  /* Surface & Cover Loader :: BEGIN */
  .sk-loader-surface:after,
  .sk-loader-cover:after {
    content: '';
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
  }
  
  /* Surface Loader :: BEGIN */
  .sk-loader.sk-loader-surface {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  .sk-loader.sk-loader-surface:after {
    background: var(--backdrop-white);
    position: absolute;
  }
  
  .sk-loader.sk-loader-surface .sk-loader-inner {
    justify-content: center;
  }
  
  /* Surface Loader :: END */
  
  /* Full Page cover :: BEGIN */
  .sk-loader.sk-loader-cover {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }
  
  .sk-loader.sk-loader-cover:after {
    position: fixed;
    background: var(--backdrop-black);
  }
  
  .sk-loader.sk-loader-cover .sk-loader-inner {
    justify-content: center;
  }
  
  .sk-loader.sk-loader-cover .sk-loader-text {
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05rem;
    margin: 1.5rem 0;
  }
  
  .sk-loader.sk-loader-cover.sk-light-backdrop .sk-loader-text {
    color: var(--color-primary);
  }
  
  .sk-loader.sk-light-backdrop:after {
    background: var(--backdrop-white);
  }
  
  /* Spinner loader - Cover type */
  .sk-loader-cover .sk-spinner-loader .sk-path {
    animation: sprocess-dash 1.5s ease-in-out infinite, sprocess-white-color 3s ease-in-out infinite;
    -webkit-animation: sprocess-dash 1.5s ease-in-out infinite, sprocess-white-color 3s ease-in-out infinite;
  }
  
  .sk-loader-cover.sk-light-backdrop .sk-spinner-loader .sk-path {
    animation: sprocess-dash 1.5s ease-in-out infinite, sprocess-color 3s ease-in-out infinite;
    -webkit-animation: sprocess-dash 1.5s ease-in-out infinite, sprocess-color 3s ease-in-out infinite;
  }
  
  /* Linear loader - Cover type */
  .sk-loader-cover .sk-linear-loader {
    width: 20rem;
  }
  
  /* Full Page cover :: END */
  /* Surface & Cover Loader :: BEGIN */
  
  /* Loader Sizes :: BEGIN */
  .sk-loader.sk-small .sk-spinner-loader {
    width: 3rem;
    height: 3rem;
  }
  
  .sk-loader.sk-large .sk-spinner-loader {
    width: 4.8rem;
    height: 4.8rem;
  }
  
  .sk-loader.sk-xlarge .sk-spinner-loader {
    width: 5.6rem;
    height: 5.6rem;
  }
  
  /* Loader Sizes :: END */
  
  /* Dot loader :: BEGIN */
  .sk-dot-loader {
    position: relative;
    left: -9999px;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    animation: dot-loader 1.5s infinite linear;
  }
  
  @keyframes dot-loader {
    0% {
      box-shadow: 9984px 0 0 0 rgb(var(--color-rgb-primary) / 40%), 9999px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 10014px 0 0 0 rgb(var(--color-rgb-primary) / 30%);
    }
  
    16.667% {
      box-shadow: 9984px -3px 0 0 rgb(var(--color-rgb-primary) / 100%), 9999px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 10014px 0 0 0 rgb(var(--color-rgb-primary) / 30%);
    }
  
    33.333% {
      box-shadow: 9984px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 9999px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 10014px 0 0 0 rgb(var(--color-rgb-primary) / 30%);
    }
  
    50% {
      box-shadow: 9984px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 9999px -3px 0 0 rgb(var(--color-rgb-primary) / 100%), 10014px 0 0 0 rgb(var(--color-rgb-primary) / 30%);
    }
  
    66.667% {
      box-shadow: 9984px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 9999px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 10014px 0 0 0 rgb(var(--color-rgb-primary) / 30%);
    }
  
    83.333% {
      box-shadow: 9984px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 9999px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 10014px -3px 0 0 rgb(var(--color-rgb-primary) / 100%);
    }
  
    100% {
      box-shadow: 9984px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 9999px 0 0 0 rgb(var(--color-rgb-primary) / 30%), 10014px 0 0 0 rgb(var(--color-rgb-primary) / 30%);
    }
  }
  
  /* Dot loader :: END */
  
  /*********************************/
  /* Loader :: END */
  /*********************************/
  
  /*********************************/
  /* Skeleton Loader :: BEGIN */
  /*********************************/
  .sk-skeleton-loader {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--zindex-7);
  }
  .sk-skeleton-inner {
    height: 100%;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-xlarge);
    overflow: hidden;
    padding: 3rem;
    gap: 1.5rem;
  }
  .sk-skeleton-row {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 1.5rem;
  }
  .sk-skeleton-row-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 1;
    width: 100%;  
    gap: 1.5rem;
  }
  .sk-skeleton-loader .sk-skeletor {
    position: relative;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.12);
  }
  .sk-skeleton-loader .sk-skeletor:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(37, 22, 22, 0));
    animation: skeletonshimmer 1.5s infinite;
  }
  .sk-skeleton-avatar {
    width: 7rem;
    height: 7rem;
    border-radius: var(--radius-base);
    flex-shrink: 0;
  }
  .sk-skeleton-line,
  .sk-skeleton-line-short,
  .sk-skeleton-line-long {
    line-height: 1;
    display: inline-block;
    width: 100%;
    height: inherit;
    vertical-align: middle;
    border-radius: var(--radius-base);  
    flex-shrink: 0;
  }
  .sk-skeleton-line,
  .sk-skeleton-line-short,
  .sk-skeleton-line-long {
    height: 1.5rem;
  }
  .sk-skeleton-line-short {
    width: 50%;
  }
  .sk-skeleton-line-long {
    width: 75%;
  }
  
  /* Small */
  .sk-skeleton-loader.sk-small .sk-skeleton-avatar {
    width: 5rem;
    height: 5rem;
  }
  .sk-skeleton-loader.sk-small .sk-skeleton-row {
    gap: 1.5rem;
    margin-bottom: 1rem;
  }
  .sk-skeleton-loader.sk-small .sk-skeleton-inner,
  .sk-skeleton-loader.sk-small .sk-skeleton-row-group {
    gap: 1rem;
  }
  .sk-skeleton-loader.sk-small .sk-skeleton-line,
  .sk-skeleton-loader.sk-small .sk-skeleton-line-short,
  .sk-skeleton-loader.sk-small .sk-skeleton-line-long {
    height: 1rem;
  }
  
  /* Skeleton List view */
  .sk-skeleton-list .sk-skeleton-avatar {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: var(--radius-pill);
  }
  .sk-skeleton-list .sk-skeleton-inner {
    padding: 1rem;
    border-radius: 0;
  }
  .sk-skeleton-list .sk-skeleton-row,
  .sk-skeleton-list.sk-small .sk-skeleton-row {
    margin: 0;
  }
  
  @keyframes skeletonshimmer {
      100% {
          transform: translateX(100%);
      }
  }
  /*********************************/
  /* Skeleton Loader :: END */
  /*********************************/
  
  /**********************************/
  /* SVG Icons :: BEGIN */
  /**********************************/
  .sk-icons svg {
    fill: currentColor;
  }
  
  /**********************************/
  /* SVG Icons :: END */
  /**********************************/
  
  /**********************************/
  /* Button & Button Group :: BEGIN */
  /**********************************/
  /* Button Group :: BEGIN */
  .sk-button-group {
    display: flex;
    gap: 1rem;
  }
  
  .sk-button-group.sk-inline .sk-button {
    flex-shrink: 1;
  }
  
  .sk-button-group.sk-block {
    flex-wrap: wrap;
  }
  
  @media (max-width: 576px) {
    .sk-button-group.sk-mobile-block {
      flex-wrap: wrap;
    }
  }
  
  /* Button Block */
  .sk-button-group.sk-inline,
  .sk-button-group.sk-inline :is(button, .sk-button),
  .sk-button-group.sk-block,
  .sk-button.sk-block,
  .sk-button-group.sk-block :is(button, .sk-button) {
    width: 100%;
  }
  
  
  /* Button Group :: END */
  /* Buttons Base :: BEGIN */
  :is(button, .sk-button) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-base);
    user-select: none;
    font-weight: var(--font-weight-medium, 500);
    overflow: visible;
    position: relative;
    font-size: var(--font-size-base);
    background-color: var(--color-white);
    border: 0.1rem solid transparent;
    color: var(--color-body-color);
    line-height: 1.5;
    text-transform: inherit;
    height: 3.8rem;
    min-width: 6.4rem;
    padding: 0 var(--gutter-base);
    flex-shrink: 0;
  }
  
  /* Button Hover */
  .sk-button:hover {
    /* box-shadow: var(--box-shadow-1); */
  }
  
  /* Filled Buttons :: BEGIN */
  .sk-button.sk-primary,
  .sk-badge.sk-primary,
  .sk-card.sk-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
  }
  
  .sk-button.sk-secondary,
  .sk-badge.sk-secondary,
  .sk-card.sk-secondary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-on-secondary);
  }
  
  .sk-button.sk-light,
  .sk-badge.sk-light,
  .sk-card.sk-light {
    background: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-dark);
  }
  
  .sk-button.sk-dark,
  .sk-badge.sk-dark,
  .sk-card.sk-dark {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-white);
  }
  
  .sk-button.sk-link,
  .sk-badge.sk-link,
  .sk-card.sk-link {
    background: var(--color-link);
    border-color: var(--color-link);
    color: var(--color-white);
  }
  
  .sk-button.sk-success,
  .sk-badge.sk-success,
  .sk-card.sk-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
  }
  
  .sk-button.sk-danger,
  .sk-badge.sk-danger,
  .sk-card.sk-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-white);
  }
  
  .sk-button.sk-warning,
  .sk-badge.sk-warning,
  .sk-card.sk-warning {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-dark);
  }
  
  .sk-button.sk-info,
  .sk-badge.sk-info,
  .sk-card.sk-info {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-white);
  }
  
  /* Partially disabled button view */
  :is(button, .sk-button).sk-semi-disabled {
    opacity: 0.5;
  }
  
  /* SVG Icon color :: BEGIN */
  :is(button, .sk-button) .sk-icons {
    fill: currentColor;
  }
  
  :is(button, .sk-button) .sk-button-text+.sk-icons {
    margin-left: 0.8rem;
    margin-right: 0;
  }
  
  /* SVG Icon color :: END */
  
  /* Filled Buttons :: END */
  /* Button Rounded */
  /* Button Pill */
  :is(button, .sk-button).sk-pill {
    border-radius: 2.8rem;
  }
  
  /* Button disabled */
  :is(button, .sk-button).sk-disabled,
  :is(button, .sk-button):disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    color: var(--color-button-disabled-text) !important;
    background-color: var(--color-button-disabled-bg) !important;
    border-color: var(--color-button-disabled-border) !important;
  }
  
  .sk-button[class*="-outline"].sk-disabled,
  .sk-button[class*="-outline"]:disabled {
    border: 0.1rem solid var(--color-button-disabled-border) !important;
  }
  
  .sk-button[class*="-no-border"].sk-disabled,
  .sk-button[class*="-no-border"]:disabled {
    background: none !important;
  }
  
  /* .sk-button[class*="-text"].sk-disabled,
  .sk-button[class*="-text"]:disabled {
    background-color: transparent !important;
  } */
  .sk-button[class*="-text"].sk-disabled:not(.sk-text-end),
  .sk-button[class*="-text"]:disabled:not(.sk-text-end) {
    background-color: transparent !important;
  }
  
  /* Button with Shadow */
  :is(button, .sk-button).sk-shadow {
    box-shadow: var(--box-shadow-1);
  }
  
  :is(button, .sk-button).sk-shadow:hover {
    box-shadow: var(--box-shadow-2);
  }
  
  /* Button Hover - No Shadow */
  :is(button, .sk-button).sk-no-shadow:hover {
    box-shadow: none;
  }
  
  /* Outlined Buttons :: BEGIN */
  .sk-button[class*="-outline"] {
    border-color: currentColor;
    background: transparent;
  }
  
  .sk-button.sk-primary-outline {
    color: var(--color-primary);
  }
  
  .sk-button.sk-secondary-outline {
    color: var(--color-secondary);
  }
  
  .sk-button.sk-light-outline {
    color: var(--color-light);
  }
  
  .sk-button.sk-dark-outline {
    color: var(--color-dark);
  }
  
  .sk-button.sk-link-outline {
    color: var(--color-link);
  }
  
  .sk-button.sk-success-outline {
    color: var(--color-success);
  }
  
  .sk-button.sk-danger-outline {
    color: var(--color-danger);
  }
  
  .sk-button.sk-warning-outline {
    color: var(--color-warning);
  }
  
  .sk-button.sk-info-outline {
    color: var(--color-info);
  }
  
  
  /* Outlined Buttons :: END */
  /* No Border Buttons :: BEGIN */
  .sk-button[class*="-text"]:hover {
    box-shadow: none;
  }
  
  .sk-button[class*="-text"]:hover::after,
  .sk-button[class*="-text"].sk-button.sk-button-loader::after {
    content: "";
    background-color: currentColor;
    border-radius: inherit;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    transition: opacity .2s cubic-bezier(.4, 0, .6, 1);
    opacity: .07;
  }
  
  .sk-button.sk-primary-text {
    color: var(--color-primary);
    background: transparent;
  }
  
  .sk-button.sk-secondary-text {
    color: var(--color-secondary);
    background: transparent;
  }
  
  .sk-button.sk-light-text {
    color: var(--color-light);
    background: transparent;
  }
  
  .sk-button.sk-dark-text {
    color: var(--color-dark);
    background: transparent;
  }
  
  .sk-button.sk-primary-violet {
    color: var(--color-primary-violet);
    background: transparent;
  }
  
  .sk-button.sk-primary-violet:hover {
    background: var(--color-primary-violet-light);
    box-shadow: none;
  }
  
  /* Todo :: Need to think through to enhace this link button with & without padding by passing props */
  .sk-button.sk-button-link {
    /* TODO: These adding padding-left & padding-right should be removed and need to add proper solution to this */
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: var(--color-link);
    background: transparent;
    box-shadow: none;
    min-width: unset;
  }
  
  .sk-button.sk-no-padding {
    padding: 0 var(--gutter-base);
    color: var(--color-link);
    background: transparent;
    box-shadow: none;
    min-width: unset;
  }
  
  .sk-button.sk-success-text {
    color: var(--color-success);
    background: transparent;
  }
  
  .sk-button.sk-danger-text {
    color: var(--color-danger);
    background: transparent;
  }
  
  .sk-button.sk-warning-text {
    color: var(--color-warning);
    background: transparent;
  }
  
  .sk-button.sk-info-text {
    color: var(--color-info);
    background: transparent;
  }
  
  /* No Border Buttons :: END */
  /* Button Not Rounded :: BEGIN */
  :is(button, .sk-button) {
    height: 3.8rem;
  }
  
  :is(button, .sk-button) .sk-icons {
    font-size: 2rem;
    margin-right: 0.6rem;
    flex-shrink: 0;
  }
  
  :is(button, .sk-button) .sk-button-text+.sk-icons {
    margin-left: 0.4rem;
    margin-right: 0;
  }
  
  :is(button, .sk-button) .sk-icons svg {
    height: 2rem;
    width: 2rem;
  }
  
  /* Button Not Rounded :: END */
  /* Button Rounded :: BEGIN */
  :is(button, .sk-button):is(.sk-round, .sk-rounded),
  :is(button, .sk-button):is(.sk-round, .sk-rounded):is(.sk-xlarge, .sk-large, .sk-small) {
    padding: 0;
    min-width: inherit;
  }
  
  :is(button, .sk-button):is(.sk-round, .sk-rounded) {
    height: 3.8rem;
    width: 3.8rem;
  }
  
  :is(button, .sk-button).sk-round,
  :is(button, .sk-button).sk-round .sk-ripple-container {
    border-radius: 50%;
  }
  
  :is(button, .sk-button):is(.sk-round, .sk-rounded):is(.sk-xlarge) {
    height: 5.6rem;
    width: 5.6rem;
  }
  
  :is(button, .sk-button):is(.sk-round, .sk-rounded):is(.sk-large) {
    height: 4.8rem;
    width: 4.8rem;
  }
  
  :is(button, .sk-button):is(.sk-round, .sk-rounded):is(.sk-small) {
    height: 3.2rem;
    width: 3.2rem;
  }
  
  :is(button, .sk-button):is(.sk-round, .sk-rounded) .sk-icons {
    font-size: 2.2rem;
    margin: 0;
  }
  
  :is(button, .sk-button):is(.sk-round, .sk-rounded):is(.sk-xlarge):is(.sk-icons) {
    font-size: 2.8rem;
  }
  
  :is(button, .sk-button):is(.sk-round, .sk-rounded):is(.sk-large):is(.sk-icons) {
    font-size: 2.6rem;
  }
  
  :is(button, .sk-button):is(.sk-round, .sk-rounded):is(.sk-small):is(.sk-icons) {
    font-size: 2rem;
  }
  
  /* Button Rounded :: END */
  
  /* Button Ripple  */
  :is(button, .sk-button).sk-round .sk-ripple-container {
    border-radius: var(--radius-round);
  }
  
  :is(button, .sk-button).sk-rounded .sk-ripple-container {
    border-radius: var(--radius-base);
  }
  
  /* Button Size :: BEGIN */
  /* Extra Large */
  :is(button, .sk-button).sk-xlarge {
    padding: 0 2.4rem;
    font-size: 2rem;
    /* font-size: 1.8rem; */
    height: 5.6rem;
    min-width: 9.2rem;
  }
  
  :is(button, .sk-button).sk-xlarge .sk-icons svg {
    height: 2.4rem;
    width: 2.4rem;
  }
  
  /* Large */
  :is(button, .sk-button).sk-large {
    padding: 0 2rem;
    font-size: 1.8rem;
    /* font-size: 1.6rem; */
    height: 4.8rem;
    min-width: 7.8rem;
  }
  
  :is(button, .sk-button).sk-large .sk-icons svg {
    height: 2.2rem;
    width: 2.2rem;
  }
  
  /* Small */
  :is(button, .sk-button).sk-small {
    padding: 0 1.2rem;
    font-size: 1.4rem;
    height: 3.2rem;
    min-width: 5rem;
  }
  
  :is(button, .sk-button).sk-small .sk-icons svg {
    height: 1.8rem;
    width: 1.8rem;
  }
  
  /* Button Size :: END */
  
  /* Button Material icon font size :: BEGIN */
  :is(button, .sk-button).sk-xlarge .sk-icons {
    font-size: 2.6rem;
  }
  
  :is(button, .sk-button).sk-large .sk-icons {
    font-size: 2.4rem;
  }
  
  :is(button, .sk-button).sk-small .sk-icons {
    font-size: 2rem;
  }
  
  /* Button with loader */
  :is(button, .sk-button).sk-button-loader {
    pointer-events: none;
    cursor: not-allowed;
  }
  
  :is(button, .sk-button) .sk-spinner-loader {
    width: 2.3rem;
    height: 2.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  :is(button, .sk-button):is(.sk-small) .sk-spinner-loader {
    width: 1.8rem;
    height: 1.8rem;
  }
  
  :is(button, .sk-button):is(.sk-button-loader) .sk-spinner-loader {
    position: absolute;
  }
  
  :is(button, .sk-button):is(.sk-loader-leading) .sk-spinner-loader {
    margin-right: 0.8rem;
  }
  
  :is(button, .sk-button):is(.sk-loader-trailing) .sk-spinner-loader {
    margin-left: 0.8rem;
  }
  
  :is(button, .sk-button):is(.sk-button-loader) :is(.sk-button-text, .sk-icons) {
    visibility: hidden;
    opacity: 0;
  }
  
  :is(.sk-button):is(.sk-primary, .sk-secondary, .sk-dark, .sk-link, .sk-success, .sk-danger, .sk-warning, .sk-info) .sk-spinner-loader .sk-path {
    animation: sprocess-dash 1.5s ease-in-out infinite, sprocess-white-color 3s ease-in-out infinite;
    -webkit-animation: sprocess-dash 1.5s ease-in-out infinite, sprocess-white-color 3s ease-in-out infinite;
  }
  
  :is(.sk-button):not(.sk-button:disabled):is(.sk-primary, .sk-secondary, .sk-dark, .sk-link, .sk-success, .sk-danger, .sk-warning, .sk-info) .sk-spinner-loader .sk-path,
  :is(.sk-button):is(.sk-primary-outline, .sk-secondary-outline, .sk-dark-outline, .sk-link-outline, .sk-success-outline, .sk-danger-outline, .sk-warning-outline, .sk-info-outline) .sk-spinner-loader .sk-path,
  :is(.sk-button):is(.sk-primary-text, .sk-secondary-text, .sk-dark-text, .sk-link-text, .sk-success-text, .sk-danger-text, .sk-warning-text, .sk-info-text) .sk-spinner-loader .sk-path {
    animation: sprocess-dash 1.5s ease-in-out infinite, sprocess-current-color 3s ease-in-out infinite;
    -webkit-animation: sprocess-dash 1.5s ease-in-out infinite, sprocess-current-color 3s ease-in-out infinite;
  }
  
  /* Button Material icon font size :: BEGIN */
  /* Fab Button :: BEGIN */
  :is(button, .sk-button).sk-fab {
    position: fixed;
    right: 4.4rem;
    bottom: 4.4rem;
    z-index: var(--zindex-1);
    box-shadow: var(--box-shadow-3);
    border-radius: 2.8rem;
  }
  
  .sk-fab+* {
    padding-bottom: 8rem;
  }
  
  /* Fab Button :: END */
  
  /* Fab Button positioning for mobile :: BEGIN */
  @media (max-width:768px) {
    :is(button, .sk-button).sk-fab {
      bottom: 8rem
    }
  }
  
  /* Fab Button positioning for mobile :: END */
  /* Reduce the Button size for mobile devices :: BEGIN */
  @media (max-width: 576px) {
    :is(button, .sk-button).sk-large {
      font-size: 1.6rem;
    }
  
    :is(button, .sk-button).sk-large .sk-icons svg {
      width: 2rem;
      height: 2rem;
    }
  
    :is(button, .sk-button) {
      font-size: 1.4rem;
    }
  
    :is(button, .sk-button) .sk-icons svg {
      width: 1.8rem;
      height: 1.8rem;
    }
  
    :is(button, .sk-button).sk-small .sk-icons svg {
      width: 1.6rem;
      height: 1.6rem;
    }
  }
  
  /* Reduce the Button size for mobile devices :: END */
  /**********************************/
  /* Button & Button Group :: END */
  /**********************************/
  
  /*********************************/
  /* Bottom Sheet :: BEGIN */
  /*********************************/
  .sk-bottomsheet {
    position: fixed;
    height: 100%;
    box-sizing: border-box;
    display: none;
    z-index: var(--zindex-5);
  }
  
  .sk-bottomsheet .sk-bottomsheet-container {
    display: flex;
    align-items: center;
    position: relative;
    width: auto;
    pointer-events: none;
  }
  
  .sk-bottomsheet .sk-bottomsheet-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    width: 100%;
    height: auto;
    max-height: 100%;
    z-index: 1;
    position: fixed;
    bottom: 0;
    left: 0;
    pointer-events: auto;
    animation: slideInUp 0.3s var(--animation-function-1);
    box-shadow: var(--box-shadow-6);
  }
  
  .sk-bottomsheet.show {
    display: block;
  }
  
  .sk-bottomsheet .sk-bottomsheet-header {
    flex-shrink: 0;
  }
  
  .sk-bottomsheet .sk-bottomsheet-body {
    position: relative;
    flex: 1 1 auto;
    scroll-behavior: smooth;
    padding: var(--gutter-base);
    overscroll-behavior: none;
    overflow-y: auto;
    overflow-y: overlay;
  }
  
  .sk-bottomsheet .sk-bottomsheet-footer {
    position: sticky;
    bottom: 0;
    padding: var(--gutter-base);
    border-top: 0.1rem solid var(--color-border);
  }
  
  /* Mobile bottom sheet - Web Modal */
  @media(min-width:768px) {
    .sk-bottomsheet.sk-web-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: none;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      outline: 0;
    }
  
    .sk-bottomsheet.sk-web-modal {
      z-index: var(--zindex-4);
    }
  
    .sk-bottomsheet.sk-web-modal .sk-bottomsheet-container {
      display: flex;
      align-items: center;
      height: 100%;
      min-height: 100%;
      margin: 0 auto;
      position: relative;
      width: auto;
      pointer-events: none;
    }
  
    .sk-bottomsheet.sk-web-modal .sk-bottomsheet-inner {
      overflow: hidden;
      width: 100%;
      height: 100%;
      max-height: 100%;
      z-index: 1;
      pointer-events: auto;
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--color-white);
    }
  
    .sk-bottomsheet.sk-web-modal .sk-bottomsheet-header:not(:empty) {
      border-bottom: 0.1rem solid var(--color-border);
      flex-shrink: 0;
    }
  
    .sk-bottomsheet.sk-web-modal .sk-bottomsheet-header .sk-appbar {
      border-bottom: 0;
    }
  
    .sk-bottomsheet.sk-web-modal .sk-bottomsheet-body {
      position: relative;
      flex: 1 1 auto;
      scroll-behavior: smooth;
      padding: var(--gutter-large);
      overscroll-behavior: none;
      overflow-y: auto;
      overflow-y: overlay;
    }
  
    .sk-bottomsheet.sk-web-modal .sk-bottomsheet-footer:not(:empty) {
      padding: var(--gutter-base);
      border-top: 0.1rem solid var(--color-border);
      flex-shrink: 0;
      position: relative;
    }
  
    .sk-bottomsheet.sk-web-modal .sk-bottomsheet-container {
      height: calc(100% - 3.5rem);
      min-height: calc(100% - 3.5rem);
      max-width: 60rem;
      margin: 1.6rem auto;
    }
  
    .sk-bottomsheet.sk-web-modal .sk-bottomsheet-inner {
      height: auto;
      background-clip: padding-box;
      border: 0.1rem solid var(--color-border);
      border-radius: var(--radius-xlarge);
      outline: 0;
      box-shadow: var(--box-shadow-6);
    }
    .sk-bottomsheet-wrapper .sk-bottomsheet .sk-bottomsheet-inner {
        border-top-left-radius: var(--radius-xlarge);
        border-top-right-radius: var(--radius-xlarge);
    }
  }
  @media(max-width:768px) {
    .sk-bottom-sheet-wrapper .sk-bottomsheet .sk-bottomsheet-inner {
        border-top-left-radius: var(--radius-xlarge);
        border-top-right-radius: var(--radius-xlarge);
    }
  }
  /*********************************/
  /* Panel / Modal & drawer :: BEGIN */
  /*********************************/
  
  /*********************************/
  /* Bottom Sheet :: END */
  /*********************************/
  
  
  
  /**************************************************/
  /* Form Group :: BEGIN */
  /**************************************************/
  .sk-form-group .sk-text-field,
  .sk-form-group .sk-text-select {
    margin-bottom: 2rem;
  }
  
  .sk-form-row .sk-form-label {
    margin-bottom: var(--gutter-small);
    font-weight: var(--font-weight-medium);
  }
  
  .sk-text-column {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
  }
  
  fieldset {
    border: 0.1rem solid var(--color-form-elements-border);
    border-radius: var(--radius-base);
    padding: var(--gutter-base);
    margin-bottom: var(--gutter-large);
    position: relative;
  }
  
  legend {
    font-weight: var(--font-weight-medium, 500);
    font-size: 1.8rem;
  }
  
  /*********************************/
  /* Text Area :: BEGIN */
  /*********************************/
  textarea {
    border: 0.1rem solid var(--color-form-elements-border);
    border-radius: var(--radius-base);
    min-height: 5rem;
    width: 100%;
    font-size: 1.6rem;
    color: var(--color-form-elements-value);
    padding: 1.5rem;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    background: var(--color-form-elements-bg);
    margin-bottom: 0.5rem;
    vertical-align: top;
    resize: vertical;
  }
  
  textarea:hover {
    border: 0.1rem solid var(--color-form-elements-border-hover);
  }
  
  .sk-text-field textarea:focus {
    border: 0.1rem solid var(--color-form-elements-border-focus);
    outline: 0.2rem solid var(--color-form-elements-border-focus);
    outline-offset: -0.1rem;
  }
  
  .sk-text-field.sk-error textarea {
    border: 0.2rem solid var(--color-form-elements-border-error);
    outline: 0;
  }
  
  /*********************************/
  /* Text Area :: END */
  /*********************************/
  
  /*********************************/
  /* Cards :: BEGIN */
  /*********************************/
  /* Card Group :: BEGIN */
  /* TODO :: Add "sk-card-group" In documentation */
  .sk-card-group {
    margin: var(--gutter-base) 0;
  }
  
  .sk-card-group .sk-card {
    margin-bottom: var(--gutter-base);
  }
  
  /* Base Card :: BEGIN */
  .sk-card {
    --card-disabled-bg: #D7D7D7;
    --card-disabled-border: #BDBDBD;
    --card-disabled-data: #B8B8B8;
  
    background: var(--color-white);
    position: relative;
    border-radius: var(--radius-xlarge);
    transition: .3s var(--animation-function-1);
    transition-property: color, background-color;
    will-change: color, background-color;
    margin-bottom: 2.4rem;
    /* box-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.2); */
  }
  
  /* Card Elevated */
  .sk-card.sk-card-elevated {
    box-shadow: var(--box-shadow-1);
  }
  
  /* Card - Outlined */
  .sk-card.sk-card-outlined {
    border: 0.1rem solid var(--card-outlined-border);
    box-shadow: none;
  }
  
  /* Card - Filled */
  .sk-card.sk-card-Filled {
    background: var(--card-filled-bg);
  }
  
  /* Card - Selected */
  .sk-card.sk-card-selected {
    background: var(--card-selected-bg);
    border: solid 0.1rem var(--card-outlined-border);
  }
  
  /* Card Disabled */
  .sk-card.sk-disabled {
    pointer-events: none;
    user-select: none;
    background: var(--card-disabled-bg);
    opacity: 1;
  }
  
  .sk-card.sk-disabled.sk-card-outlined {
    border-color: var(--card-disabled-border);
  }
  
  .sk-card.sk-disabled * {
    color: var(--card-disabled-data);
  }
  
  .sk-card.sk-disabled .sk-button {
    pointer-events: none;
    cursor: not-allowed;
    color: var(--card-disabled-data);
    background-color: var(--card-disabled-bg);
    border-color: var(---card-disabled-border);
  }
  
  /* Card With Media Content */
  .sk-card .sk-card-media:not(:empty) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20rem;
  }
  
  .sk-card .sk-chart-area:not(:empty) {
    width: 100%;
    height: 25rem;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  
  .sk-card .sk-chart-area>div {
    flex: 1 1 auto;
  }
  
  .sk-card .sk-card-media img,
  .sk-card .sk-card-media iframe,
  .sk-card .sk-card-media video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-base) var(--radius-base) 0 0;
  }
  
  .sk-card .sk-card-media .sk-avatar-title {
    font-size: 4.2rem;
    width: 7rem;
    height: 7rem;
    line-height: 7rem;
  }
  
  /* Card Content Section */
  .sk-card .sk-card-primary:not(:empty) {
    padding: var(--gutter-large);
  }
  
  .sk-card .sk-card-secondary:not(:empty),
  .sk-card .sk-card-content:not(:empty) {
    padding: 0 var(--gutter-large) var(--gutter-large) var(--gutter-large);
  }
  
  .sk-card .sk-card-actions {
    display: flex;
    align-items: center;
  }
  
  .sk-card .sk-card-actions:not(:empty) {
    padding: 0 var(--gutter-large) var(--gutter-large);
  }
  
  /*********************************/
  /* Cards :: END */
  /*********************************/
  
  /*********************************/
  /* Surface styles :: BEGIN */
  /*********************************/
  /* this styles used similiar in card  */
  .sk-surface,
  .sk-surface-outlined {
    background: var(--color-white);
    position: relative;
    border-radius: var(--radius-xlarge);
    margin-bottom: 2.4rem;
    width: 100%;
  }
  
  .sk-surface-outlined {
    border: 0.1rem solid var(--color-border);
  }
  
  .sk-surface.sk-gutter-base {
    padding: var(--gutter-base);
  }
  
  .sk-surface.sk-gutter-large {
    padding: var(--gutter-large);
  }
  
  .sk-surface.sk-gutter-xlarge {
    padding: var(--gutter-xlarge);
  }
  
  /*********************************/
  /* Surface styles :: END */
  /*********************************/
  /*********************************/
  /* Alert :: BEGIN */
  /*********************************/
  .sk-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--gutter-base);
    border-radius: var(--radius-base);
    position: relative;
    padding: 1.6rem;
    margin-bottom: 1rem;
    color: #084298;
  }
  
  /* Alert icon only variant */
  .sk-alert.sk-alert-rounded {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    padding: 0.5rem;
    flex-shrink: 0;
  }
  
  .sk-alert .sk-icons {
    display: flex;
    align-items: center;
  }
  
  .sk-alert.sk-primary {
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
  }
  
  .sk-alert.sk-secondary {
    color: var(--color-secondary-dark);
    background: var(--color-secondary-light);
  }
  
  .sk-alert.sk-success {
    color: var(--color-success-dark);
    background: var(--color-success-light);
  }
  
  .sk-alert.sk-danger {
    color: var(--color-danger-dark);
    background: var(--color-danger-light);
  }
  
  .sk-alert.sk-warning {
    color: var(--color-warning-dark);
    background: var(--color-warning-light);
  }
  
  .sk-alert.sk-info {
    color: var(--color-info-dark);
    background: var(--color-info-light);
  }
  
  /* Todo: Add other variants of alerts like danger, warning, info etc., */
  /* Notification Bar Alerts */
  :is(.sk-alert.sk-notification-bar) {
    gap: var(--gutter-small);
    padding: var(--gutter-xsmall) var(--gutter-small);
    align-items: center;
    font-weight: var(--font-weight-medium, 500);
  }
  
  :is(.sk-alert.sk-notification-bar) .sk-text-end:has(button.sk-button:only-child) {
    font-size: 0;
  }
  
  :is(.sk-alert.sk-notification-bar) .sk-icons {
    font-size: 1.8rem;
  }
  
  :is(.sk-alert.sk-notification-bar) .sk-button.sk-round {
    height: 1.8rem;
    width: 1.8rem;
  }
  
  /*********************************/
  /* Alert :: END */
  /*********************************/
  
  /*********************************/
  /* Switch Button :: BEGIN */
  /*********************************/
  .sk-switch,
  .sk-switch * {
    /* --switch-lever-bg:#989898; */
    /* --switch-lever-bg-disabled:#D1D1D1; */
  
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }
  
  .sk-switch label {
    cursor: pointer;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
  }
  
  .sk-switch label input[type=checkbox] {
    opacity: 0;
    width: 0;
    height: 0
  }
  
  .sk-switch label .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: 3.6rem;
    height: 1.4rem;
    background-color: var(--color-form-elements-border);
    border-radius: 3rem;
    /* margin-right: 1rem; */
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
    vertical-align: middle;
    /* margin: 0 1.3rem */
  }
  
  .sk-switch .sk-leading+input[type=checkbox] {
    margin-left: 1rem;
  }
  
  .sk-switch input[type=checkbox]+.lever {
    margin-right: 1rem;
  }
  
  .sk-switch label .lever:before,
  .sk-switch label .lever:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    left: 0;
    top: -0.3rem;
    -webkit-transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
    transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease
  }
  
  .sk-switch label .lever:after {
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-2);
  }
  
  /* Disabled switch */
  .sk-switch.sk-disabled .lever {
    background-color: var(--color-form-elements-border-disabled);
  }
  
  /* Default Primary color */
  .sk-switch input[type=checkbox]:checked+.lever:after {
    background-color: var(--color-primary);
  }
  
  .sk-switch input[type=checkbox]:checked+.lever {
    background-color: rgba(var(--color-rgb-primary) / 28%);
  }
  
  /* Secondary color */
  .sk-switch.sk-secondary input[type=checkbox]:checked+.lever:after {
    background-color: var(--color-secondary);
  }
  
  .sk-switch.sk-secondary input[type=checkbox]:checked+.lever {
    background-color: rgba(var(--color-rgb-secondary) / 28%);
  }
  
  /* Link color */
  .sk-switch.sk-link input[type=checkbox]:checked+.lever:after {
    background-color: var(--color-link)
  }
  
  .sk-switch.sk-link input[type=checkbox]:checked+.lever {
    background-color: rgba(var(--color-rgb-link) / 28%);
  }
  
  /* Success color */
  .sk-switch.sk-success input[type=checkbox]:checked+.lever:after {
    background-color: var(--color-success)
  }
  
  .sk-switch.sk-success input[type=checkbox]:checked+.lever {
    background-color: rgba(var(--color-rgb-success) / 28%);
  }
  
  /* Warning color */
  .sk-switch.sk-warning input[type=checkbox]:checked+.lever:after {
    background-color: var(--color-warning)
  }
  
  .sk-switch.sk-warning input[type=checkbox]:checked+.lever {
    background-color: rgba(var(--color-rgb-warning) / 28%);
  }
  
  .sk-switch label input[type=checkbox]:checked+.lever:before,
  .sk-switch label input[type=checkbox]:checked+.lever:after {
    left: 1.8rem
  }
  
  /* Material 3 Variant */
  .sk-switch-wide label .lever {
    width: 5rem;
    height: 3rem;
    border: 0.1rem solid var(--color-form-elements-border);
    background: var(--color-light);
  }
  
  .sk-switch-wide label .lever:before,
  .sk-switch-wide label .lever:after {
    width: 1.4rem;
    height: 1.4rem;
    left: 0.6rem;
    top: 0.7rem;
    box-shadow: none;
    background: var(--color-form-elements-border);
  }
  
  .sk-switch-wide label input[type=checkbox]:checked+.lever:before,
  .sk-switch-wide label input[type=checkbox]:checked+.lever:after {
    width: 2rem;
    height: 2rem;
    top: 0.4rem;
    left: 2.4rem;
  }
  
  .sk-switch-wide label .sk-icon:after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    left: 3.2rem;
    top: 1.2rem;
    width: 0;
    height: 0;
    border-width: 0 0.2rem 0.2rem 0;
    border-style: solid;
    transform-origin: bottom left;
    transform: rotate(45deg);
    color: transparent;
    z-index: 1;
    transition: all 200ms ease;
  }
  
  .sk-switch-wide input[type=checkbox]:checked+.lever .sk-icon:after {
    width: 0.6rem;
    height: 1.2rem;
    left: 2.8rem;
    top: 0.3rem;
    color: var(--color-primary);
  }
  
  .sk-switch-wide input[type=checkbox]:checked+.lever {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }
  
  .sk-switch-wide input[type=checkbox]:checked+.lever:after,
  .sk-switch-wide.sk-secondary input[type=checkbox]:checked+.lever:after,
  .sk-switch-wide.sk-link input[type=checkbox]:checked+.lever:after,
  .sk-switch-wide.sk-success input[type=checkbox]:checked+.lever:after,
  .sk-switch-wide.sk-warning input[type=checkbox]:checked+.lever:after {
    background-color: var(--color-white);
  }
  
  .sk-switch-wide.sk-secondary input[type=checkbox]:checked+.lever {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
  }
  
  .sk-switch-wide.sk-link input[type=checkbox]:checked+.lever {
    background-color: var(--color-link);
    border-color: var(--color-link);
  }
  
  .sk-switch-wide.sk-success input[type=checkbox]:checked+.lever {
    background-color: var(--color-success);
    border-color: var(--color-success);
  }
  
  .sk-switch-wide.sk-warning input[type=checkbox]:checked+.lever {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
  }
  
  .sk-switch-wide.sk-secondary input[type=checkbox]:checked+.lever .sk-icon:after,
  .sk-switch-wide.sk-link input[type=checkbox]:checked+.lever .sk-icon:after,
  .sk-switch-wide.sk-success input[type=checkbox]:checked+.lever .sk-icon:after,
  .sk-switch-wide.sk-warning input[type=checkbox]:checked+.lever .sk-icon:after {
    color: currentColor;
  }
  
  /*********************************/
  /* Switch Button :: END */
  /*********************************/
  
  /***********************************/
  /* Overflow Dropdown Menu :: BEGIN */
  /***********************************/
  .sk-overflow-menu,
  .sk-overflow-menu .sk-menu-trigger {
    display: inline-block;
  }
  
  .sk-overflow-menu .sk-menu-trigger {
    cursor: pointer;
  }
  
  .sk-overflow-menu {
    position: relative;
  }
  
  .sk-overflow-menu .sk-menu-trigger,
  .sk-select-event {
    /* Todo: Remove .sk-overflow-menu .sk-menu-trigger from above line once all HTML has been restructured for the overflow menu */
    z-index: 0;
  }
  
  .sk-overflow-right .sk-overflow-list {
    left: auto;
    right: 0;
  }
  
  
  .sk-overflow-list {
    --color-overflow-list-hover: #f5f5f5;
    display: none;
    background: var(--color-white);
    box-shadow: var(--box-shadow-1);
    border-radius: var(--radius-base);
    line-height: 1.5rem;
    list-style-type: none;
    color: var(--color-body-color);
    position: absolute;
    /* right: 1.5rem; */
    min-width: max-content;
    z-index: var(--zindex-2);
    padding: 0.5rem 0;
    top: calc(100% + 1rem);
  }
  
  .sk-overflow-menu.sk-text-end .sk-overflow-list {
    right: 1.5rem;
  }
  
  .sk-overflow-list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    position: relative;
    min-width: 10rem;
    width: 100%;
    border-bottom: 0.1rem solid var(--color-border);
    text-transform: capitalize;
    line-height: normal;
  }
  
  .sk-overflow-list li:last-child {
    border-bottom: 0;
  }
  
  .sk-overflow-list li .sk-icons {
    font-size: 2rem;
  }
  
  .sk-overflow-list li .sk-icons:empty {
    display: none;
  }
  
  .sk-overflow-list li .sk-button.sk-round,
  .sk-overflow-list li .sk-button.sk-rounded {
    width: auto;
    height: auto;
  }
  
  .sk-overflow-list ul {
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
  }
  
  .sk-overflow-list li:hover {
    background: var(--color-overflow-list-hover);
    color: var(--color-black);
  }
  
  .sk-overflow-list li:hover .sk-button {
    background: none;
  }
  
  .sk-overflow-list .sk-divider {
    padding: 0 !important;
  }
  
  .sk-overflow-list .sk-selected {
    background: var(--color-form-elements-bg);
    color: var(--color-link);
    font-weight: var(--font-weight-medium, 500);
  }
  
  .sk-overflow-menu.sk-overflow-menu-right .sk-overflow-list {
    right: 1.5rem;
  }
  
  .sk-overflow-menu.sk-overflow-menu-left .sk-overflow-list {
    left: 1.5rem;
  }
  
  .sk-overflow-list .sk-list-footer {
    position: sticky;
    bottom: 0;
    padding: var(--gutter-small) var(--gutter-base);
    background: var(--color-white);
    box-shadow: var(--box-shadow-2);
  }
  
  .sk-text-select .sk-overflow-list:has(.sk-list-footer) {
    padding-bottom: 0;
  }
  
  .sk-overflow-list:has(.sk-list-footer) ul {
    margin-bottom: var(--gutter-small);
  }
  
  .sk-text-select .sk-helper-line:has(.sk-show)+.sk-overflow-menu .sk-overflow-list {
    top: calc(100% - 1.6rem);
  }
  
  /* Dropdown bottom sheet css :: BEGIN  */
  .sk-overflow-bottom .sk-overflow-header,
  .sk-overflow-bottom .sk-backdrop {
    display: none;
  }
  
  @media (max-width: 768px) {
  
    /* bottom sheet absolute value change for height */
    .sk-overflow-bottom .sk-overflow-list {
      position: static;
      box-shadow: none;
    }
  
    /* bottom sheet absolute value change for height */
    .sk-overflow-bottom .sk-overflow-list li {
      line-height: 2;
      font-size: 1.6rem;
    }
  
    .sk-overflow-bottom .sk-overflow-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 0.1rem solid var(--color-border);
      padding: 1rem;
    }
  
    .sk-overflow-bottom .sk-overflow-header .sk-button {
      background: transparent;
    }
  
    .sk-overflow-bottom .sk-backdrop {
      display: block;
      z-index: -1;
    }
  
  }
  
  /* Dropdown bottom sheet css :: END  */
  /***********************************/
  /* Overflow Dropdown Menu :: END */
  /***********************************/
  
  /*********************************/
  /* Panel / Modal & drawer :: BEGIN */
  /*********************************/
  /* Multi Panel Ordering :: BEGIN */
  .sk-top-layer {
    z-index: var(--z-index-top) !important
  }
  
  /* Multi Panel Ordering :: END */
  .sk-panel,
  .sk-drawer,
  .sk-gallery-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    outline: 0;
  }
  
  .sk-drawer {
    z-index: var(--zindex-3);
  }
  
  .sk-panel,
  .sk-gallery-panel {
    z-index: var(--zindex-4);
  }
  
  .sk-panel .sk-panel-container,
  .sk-drawer .sk-drawer-container {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    position: relative;
    width: auto;
    pointer-events: none;
  }
  
  .sk-panel .sk-panel-inner,
  .sk-drawer .sk-drawer-inner {
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 100%;
    z-index: 1;
    pointer-events: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
  }
  
  .sk-gallery-panel .sk-gallery-inner {
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 100%;
    z-index: 1;
    pointer-events: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
  }
  
  .sk-panel .sk-panel-header:not(:empty),
  .sk-drawer .sk-drawer-header:not(:empty),
  .sk-gallery-panel .sk-gallery-header:not(:empty) {
    border-bottom: 0.1rem solid var(--color-border);
    flex-shrink: 0;
  }
  
  .sk-panel-header .sk-appbar,
  .sk-drawer-header .sk-appbar {
    border-bottom: 0;
  }
  
  .sk-panel .sk-panel-body,
  .sk-drawer .sk-drawer-body,
  .sk-gallery-panel .sk-gallery-body {
    position: relative;
    flex: 1 1 auto;
    scroll-behavior: smooth;
    padding: var(--gutter-large);
    overscroll-behavior: none;
    overflow-y: auto;
    overflow-y: overlay;
  }
  
  .sk-panel .sk-panel-footer:not(:empty),
  .sk-drawer .sk-drawer-footer:not(:empty),
  .sk-gallery-panel .sk-gallery-footer:not(:empty) {
    padding: var(--gutter-base);
    border-top: 0.1rem solid var(--color-border);
    flex-shrink: 0;
    position: relative;
  }
  
  .sk-panel .sk-appbar,
  .sk-drawer .sk-appbar {
    z-index: auto;
  }
  
  /* Drawer specific styles */
  .sk-drawer .sk-drawer-container,
  .sk-drawer .sk-drawer-inner {
    height: 100%;
  }
  
  .sk-drawer .sk-drawer-container {
    margin: 0;
  }
  
  .sk-drawer.sk-drawer-right .sk-drawer-container {
    margin-left: auto;
  }
  
  /* Drawer specific styles */
  @media(min-width:768px) {
    .sk-panel .sk-panel-container {
      height: calc(100% - 3.5rem);
      min-height: calc(100% - 3.5rem);
      max-width: 60rem;
      margin: 1.6rem auto;
    }
  
    .sk-panel .sk-panel-inner {
      height: auto;
      background-clip: padding-box;
      border: 0.1rem solid var(--color-border);
      border-radius: var(--radius-xlarge);
      outline: 0;
      box-shadow: var(--box-shadow-6);
    }
  
    .sk-drawer .sk-drawer-inner {
      border-radius: 0;
    }
  
    .sk-panel .sk-appbar {
      border-radius: var(--radius-base) var(--radius-base) 0 0;
    }
  
    .sk-panel .sk-appbar .sk-appbar-title {
      /* Todo: Check if this css is needed */
      font-size: 2rem;
      font-weight: var(--font-weight-medium, 500);
    }
  
    /* Panel Variants :: BEGIN  */
    /* Size Variants */
    .sk-drawer .sk-drawer-container {
      max-width: 40rem;
    }
  
    .sk-panel-xlarge .sk-panel-container,
    .sk-drawer-xlarge .sk-drawer-container {
      max-width: 114rem;
    }
  
    .sk-panel-large .sk-panel-container,
    .sk-drawer-large .sk-drawer-container {
      max-width: 80rem;
    }
  
    .sk-panel-medium .sk-panel-container,
    .sk-drawer-medium .sk-drawer-container {
      max-width: 47rem;
    }
  
    .sk-panel-small .sk-panel-container,
    .sk-drawer-small .sk-drawer-container {
      max-width: 30rem;
    }
  
    /* Full screen */
    .sk-panel-fullscreen .sk-panel-container {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
    }
  
    .sk-panel-fullscreen .sk-panel-inner {
      height: 100%;
      border: 0;
      border-radius: 0;
    }
  
    .sk-panel-fullscreen .sk-panel-body {
      overflow-y: auto;
      overflow-y: overlay;
    }
  
    /* Panel Variants :: END  */
    /* Web on-page static - Mobile panel :: BEGIN */
    .sk-panel.sk-panel-onpage {
      position: static;
      display: block;
      z-index: auto;
      height: inherit;
    }
  
    .sk-panel.sk-panel-onpage .sk-panel-container {
      height: auto;
      min-height: auto;
      max-width: 100%;
      margin: 0;
    }
  
    .sk-panel.sk-panel-onpage .sk-backdrop {
      display: none;
    }
  
    .sk-panel.sk-panel-onpage .sk-panel-inner {
      box-shadow: none;
      z-index: inherit;
    }
  
    /* Fixed Height */
  
    .sk-panel.sk-fixed-height>.sk-panel-container>.sk-panel-inner {
      height: inherit;
      max-height: 80vh;
      min-height: 60rem;
    }
  
    /* Web on-page static - Mobile panel :: END */
  
    /* Fixed Height */
    .sk-panel.sk-fixed-height>.sk-panel-container>.sk-panel-inner {
      height: inherit;
      max-height: 80vh;
      min-height: 60rem;
    }
  }
  
  /*********************************/
  /* Panel / Modal & drawer :: BEGIN */
  /*********************************/
  /*********************************/
  /* Dialog :: BEGIN */
  /*********************************/
  .sk-dialog {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    outline: 0;
    z-index: var(--zindex-6);
  }
  
  .sk-dialog .sk-dialog-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: auto;
    pointer-events: none;
    height: calc(100% - 3.5rem);
    min-height: calc(100% - 3.5rem);
    min-width: 28rem;
    max-width: 60rem;
    margin: 1.6rem auto;
  }
  
  .sk-dialog .sk-dialog-inner {
    overflow: hidden;
    min-width: 28rem;
    max-height: 100%;
    z-index: 1;
    pointer-events: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    height: auto;
    background-clip: padding-box;
    border: 0.1rem solid var(--color-border);
    border-radius: var(--radius-xlarge);
    outline: 0;
    box-shadow: var(--box-shadow-6);
  }
  
  .sk-dialog .sk-dialog-header {
    flex-shrink: 0;
    padding: var(--gutter-base);
  }
  
  .sk-dialog .sk-dialog-body {
    position: relative;
    flex: 1 1 auto;
    scroll-behavior: smooth;
    padding: 0 var(--gutter-base) var(--gutter-base) var(--gutter-base);
    overscroll-behavior: none;
    overflow-y: auto;
    overflow-y: overlay;
  }
  
  .sk-dialog .sk-dialog-footer {
    padding: var(--gutter-base);
    flex-shrink: 0;
  }
  
  /* Size Variants */
  .sk-dialog-xlarge .sk-dialog-container {
    max-width: 60rem;
  }
  
  .sk-dialog-large .sk-dialog-container {
    max-width: 50rem;
  }
  
  /* Floating Dialog :: BEGIN */
  .sk-floating-dialog {
    position: relative;
    display: inline-block;
  }
  
  .sk-floating-dialog .sk-dialog-container {
    z-index: 1;
    opacity: 0;
    display: none;
    visibility: hidden;
    transition-property: bottom, opacity;
    transition-duration: .3s;
    position: absolute;
    border-radius: 0.4rem;
    bottom: 0;
  }
  
  .sk-floating-dialog .sk-dialog-container.sk-show {
    opacity: 1;
    visibility: visible;
    display: block;
    bottom: 100%;
    right: 0;
  }
  
  /* .sk-tooltip .sk-dialog-inner {
    display: block;
    padding: 0.4rem var(--gutter-small);
    font-size: 1.2rem;
  } */
  
  /* Floating Dialog :: END */
  @media(max-width:576px) {
    .sk-dialog .sk-dialog-container {
      max-width: calc(100% - 3.2rem);
    }
  }
  
  /*********************************/
  /* Dialog :: END */
  /*********************************/
  /*********************************/
  /* Toast :: BEGIN */
  /*********************************/
  .sk-toast {
    --toast-color-bg: #202020;
  
    position: fixed;
    bottom: 8rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    transform: translateY(0);
    transition: 800ms ease;
    z-index: var(--zindex-7);
  }
  
  .sk-toast.sk-hide {
    transform: translateY(1000%);
    display: flex !important;
  }
  
  .sk-toast-container {
    background: var(--toast-color-bg);
    color: var(--color-white);
    min-width: 34rem;
    max-width: 67rem;
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 1.4rem;
    padding: 1rem 2rem;
    border-radius: 0.4rem;
    box-shadow: var(--box-shadow-2);
  }
  
  .sk-toast-container:has(.sk-icons:not(:empty)) {
    gap: 1rem;
  }
  
  .sk-toast-label {
    flex-grow: 1;
    line-height: 1.2;
  }
  
  .sk-toast-container .sk-icons {
    font-size: 2rem;
  }
  
  .sk-toast-action .sk-button:hover {
    box-shadow: none;
  }
  
  @media (max-width: 768px) {
    .sk-toast {
      margin: 0 2rem;
    }
  }
  
  @media (max-width: 414px) {
    .sk-toast-container {
      min-width: auto;
      width: 100%;
    }
  }
  
  /*********************************/
  /* Toast :: END */
  /*********************************/
  
  /**************************************************/
  /* Menu :: BEGIN */
  /**************************************************/
  /* Menu :: BEGIN */
  .sk-menu nav ul,
  .sk-menu.sk-scrollable nav {
    display: flex;
    position: relative;
    overflow-y: hidden;
    flex: 1 0 auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    will-change: transform;
  }
  
  .sk-menu li {
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    overflow: visible;
    position: relative;
    font-size: var(--font-size-base);
    border: 0.1rem solid transparent;
    color: var(--color-body-color);
    height: 4.8rem;
    min-width: 6.4rem;
    display: flex;
    line-height: 4.8rem;
    background: none;
    border-radius: 0;
    flex: 1 0 auto;
  }
  
  .sk-tabs.sk-menu li:only-child {
    flex: 0;
    min-width: revert;
    width: max-content;
  }
  
  .sk-menu li:hover {
    background: rgba(var(--color-rgb-primary) / 4%);
    box-shadow: none;
  }
  
  .sk-menu li.sk-active {
    color: var(--color-primary);
  }
  
  .sk-menu li.sk-active a {
    color: var(--color-link);
  }
  
  .sk-menu li a {
    color: inherit;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.4rem;
    text-transform: uppercase;
    padding: 0 var(--gutter-base);
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
  }
  
  .sk-menu li a figure {
    width: 3.4rem;
    height: 3.4rem;
  }
  
  /* Menu item small variant */
  .sk-menu.sk-small a {
    font-size: 1.2rem;
    padding: 0 var(--gutter-small);
  }
  
  /* Menu Indicator :: BEGIN */
  .sk-menu-indicator {
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }
  
  .sk-menu-indicator::before {
    content: '';
    border-top: .2rem solid var(--color-primary);
    opacity: 0;
    align-self: flex-end;
    box-sizing: border-box;
    width: 100%;
  }
  
  .sk-menu li.sk-active .sk-menu-indicator::before {
    opacity: 1;
  }
  
  /* Tab Indicator :: END */
  /* Menu :: END */
  /* Scrollable Menu :: BEGIN */
  .sk-menu.sk-scrollable nav {
    overflow: hidden;
  }
  
  .sk-menu.sk-scrollable nav ul {
    overflow-x: auto;
    overflow-x: overlay;
    max-width: 100%;
    scroll-behavior: smooth;
  }
  
  .sk-menu.sk-scrollable nav ul::-webkit-scrollbar {
    display: none;
  }
  
  .sk-menu.sk-scrollable li {
    min-width: 9rem;
    flex: 0 0 auto;
  }
  
  .sk-menu-nav {
    display: none;
  }
  
  .sk-menu.sk-scrollable.sk-scroll-enabled nav ul {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  
  .sk-menu.sk-scrollable.sk-scroll-enabled .sk-menu-nav {
    display: block;
    position: absolute;
  }
  
  .sk-menu.sk-scrollable.sk-scroll-enabled .sk-menu-nav .sk-button {
    min-width: revert;
    width: 4rem;
  }
  
  .sk-menu.sk-scrollable.sk-scroll-enabled .sk-menu-nav.sk-prev {
    left: 0;
  }
  
  .sk-menu.sk-scrollable.sk-scroll-enabled .sk-menu-nav.sk-next {
    right: 0;
  }
  
  /* Scrollable Menu :: END */
  /* Vertical Menu :: BEGIN */
  .sk-menu.sk-vertical ul {
    flex-direction: column;
  }
  
  /* Vertical Menu :: END */
  @media (max-width: 768px) {
    .sk-menu.sk-scrollable .sk-menu-nav {
      display: none;
    }
  
    .sk-menu.sk-scrollable.sk-scroll-enabled nav ul {
      padding: 0;
    }
  
    .sk-menu li:hover {
      background: transparent;
    }
  }
  
  /**************************************************/
  /* Menu :: END */
  /**************************************************/
  
  /**************************************************/
  /* Tabs :: BEGIN */
  /**************************************************/
  /* Vertical Tab Menu :: BEGIN */
  .sk-tabs.sk-vertical>.sk-menu {
    display: flex;
    flex-direction: column;
    flex: 0 0 30%;
    border-right: 0.1rem solid var(--color-border);
    border-bottom: none;
  }
  
  .sk-tabs.sk-vertical>.sk-menu nav ul {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: overlay;
    border-bottom: 0;
  }
  
  .sk-tabs.sk-vertical>.sk-menu nav ul {
    scrollbar-width: none;
  }
  
  .sk-tabs.sk-vertical>.sk-menu nav ul:hover {
    scrollbar-width: thin;
  }
  
  .sk-tabs.sk-vertical>.sk-menu li {
    line-height: var(--line-height-base);
    height: revert;
    justify-content: flex-start;
  }
  
  .sk-tabs.sk-vertical>.sk-menu li a {
    padding: var(--gutter-small);
  }
  
  .sk-tabs.sk-vertical>.sk-menu .sk-menu-indicator {
    justify-content: flex-start;
  }
  
  .sk-tabs.sk-vertical>.sk-menu .sk-menu-indicator::before {
    border-top: 0;
    height: 100%;
    width: 0;
    border-left: .2rem solid currentColor;
  }
  
  /* Vertical Tab Menu :: END */
  /* Tab Content Data :: BEGIN */
  .sk-tab-content {
    display: flex;
    flex-direction: column;
    height: inherit;
    position: relative;
    flex: 1 1 auto;
  }
  
  .sk-tab-data {
    display: none;
    transition: opacity .15s linear;
    padding: var(--gutter-base);
    height: 100%;
  }
  
  .sk-tab-data:has(.sk-zoomed) {
    height: auto;
  }
  
  .sk-tab-data.sk-active {
    display: block;
  }
  
  /* Tab Content Data :: END */
  
  /* Vertical Tabs :: BEGIN */
  .sk-tabs.sk-vertical {
    display: flex;
  }
  
  .sk-tabs.sk-vertical>.sk-menu li {
    width: 100%;
  }
  
  /* Vertical Tabs :: END */
  
  /* Show scrollbar on hover for firefox :: BEGIN */
  .sk-tabs.sk-vertical .sk-menu nav ul {
    scrollbar-width: none;
  }
  
  .sk-tabs.sk-vertical .sk-menu nav ul:hover {
    scrollbar-width: thin;
  }
  
  
  .sk-tabs.sk-vertical .sk-tab-menu {
    flex-shrink: 0;
  }
  .sk-tabs.sk-vertical > .sk-tab-menu .sk-menu {
    display: flex;
    flex-direction: column;
    flex: 0 0 30%;
    border-right: 0.1rem solid var(--color-border);
    border-bottom: none;
  }
  .sk-menu nav ul, .sk-menu.sk-scrollable nav {
    display: flex;
    position: relative;
    overflow-y: hidden;
    flex: 1 0 auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    will-change: transform;
  }
  .sk-tabs.sk-vertical > .sk-tab-menu .sk-menu nav ul {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: overlay;
    border-bottom: 0;
  }
  
  .sk-tabs.sk-vertical>.sk-menu nav ul {
    scrollbar-width: none;
  }
  .sk-tabs.sk-vertical > .sk-tab-menu .sk-menu li {
    line-height: var(--line-height-base);
    height: revert;
    justify-content: flex-start;
  }
  
  .sk-tabs.sk-vertical > .sk-tab-menu .sk-menu li a {
    padding: var(--gutter-small);
  }
  
  .sk-tabs.sk-vertical > .sk-tab-menu .sk-menu .sk-menu-indicator {
    justify-content: flex-start;
  }
  .sk-tabs.sk-vertical > .sk-tab-menu .sk-menu .sk-menu-indicator:before {
    border-top: 0;
    height: 100%;
    width: 0;
    border-left: 0.2rem solid currentColor;
  }
  
  @media (max-width: 1024px) {
  
    /* Mobile horizontal for vertical tabs :: BEGIN */
    .sk-tabs.sk-vertical.sk-mobile-horizontal {
      flex-direction: column;
    }
  
    .sk-tabs.sk-vertical.sk-mobile-horizontal .sk-menu,
    .sk-tabs.sk-vertical.sk-mobile-horizontal .sk-menu nav ul {
      flex-direction: row;
    }
  
    .sk-tabs.sk-vertical.sk-mobile-horizontal .sk-menu {
      border-bottom: 0.1rem solid var(--color-border);
      border-right: 0;
    }
  
    .sk-tabs.sk-vertical.sk-mobile-horizontal .sk-menu nav ul {
      width: 100%;
      overflow-y: hidden;
      overflow-x: auto;
      overflow-x: overlay;
      max-width: 100vw;
    }
  
    .sk-tabs.sk-vertical.sk-mobile-horizontal .sk-menu li {
      height: 4.8rem;
      width: auto;
  
    }
  
    .sk-tabs.sk-vertical.sk-mobile-horizontal .sk-menu .sk-menu-indicator::before {
      border-left: 0;
      border-top: 0.2rem solid currentColor;
      height: 0;
      width: 100%;
    }
  
    /* Mobile horizontal for vertical tabs :: END */
  }
  
  /* Show scrollbar on hover for firefox :: END */
  
  /**************************************************/
  /* Tabs :: END */
  /**************************************************/
  /*********************************/
  /* Chips :: BEGIN */
  /*********************************/
  .sk-chip {
    /* --chip-color-border: var(--color-form-elements-border); */
    /* --chip-color-border-selected: var(--color-primary); */
    /* --chip-color-filled-bg: #D7D7D7; */
    /* --chip-color-bg-selected: rgba(var(--color-rgb-primary) / 4%); */
    /* --chip-color-text: var(--color-form-elements-value); */
    /* --chip-color-text-selected: var(--color-primary); */
    /* --chip-color-icon: var(--color-form-elements-icon); */
    /* --chip-color-icon-selected: var(--color-primary); */
  
    background: var(--color-white);
    color: var(--color-form-elements-value);
    font-size: 1.4rem;
    height: 3.2rem;
    line-height: 3.2rem;
    display: inline-flex;
    position: relative;
    padding: 0 1rem;
    margin: 0;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    border: 0.1rem solid var(--color-form-elements-border);
    user-select: none;
    cursor: pointer;
    vertical-align: middle;
    gap: 0.5rem;
  }
  
  .sk-chip.sk-chip-filled {
    border-color: transparent;
    background: rgba(var(--color-rgb-dark) / 16%);
  }
  
  .sk-chip:hover::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(var(--color-rgb-dark) / 4%);
    border-radius: inherit;
  }
  
  .sk-chip.sk-chip-selected:hover::after {
    background: rgba(var(--color-rgb-primary) / 4%);
  }
  
  /* Chip group */
  .sk-chipset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter-small);
    margin: var(--gutter-base) 0;
  }
  
  .sk-chipset.sk-scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  
  .sk-chipset .sk-chip {
    flex-shrink: 0;
  }
  
  /* Variants :: BEGIN */
  /* Selected */
  .sk-chip.sk-chip-selected {
    color: var(--color-success);
    font-weight: var(--font-weight-medium, 500);
    background: rgba(var(--color-rgb-success) / 4%);
    border-color: var(--color-success);
  }
  
  .sk-chip.sk-chip-filled.sk-chip-selected {
    border-color: transparent;
  }
  
  /* with icon */
  .sk-chip span:not(.sk-icons) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15rem;
  }
  
  .sk-chip .sk-button {
    background: transparent;
    padding: 0;
    height: revert;
    min-width: revert;
    z-index: 1;
  }
  
  .sk-chip .sk-button:hover {
    box-shadow: none;
  }
  
  .sk-chip button .sk-icons svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--color-form-elements-icon);
  }
  
  .sk-chip .sk-icons svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: currentColor;
  }
  
  .sk-chip .sk-icons {
    font-size: 2.2rem;
  }
  
  .sk-chip .sk-icons,
  .sk-chip .sk-button .sk-icons {
    color: var(--color-form-elements-icon);
    font-size: 2rem;
  }
  
  .sk-chip.sk-chip-selected .sk-icons,
  .sk-chip.sk-chip-selected .sk-button .sk-icons {
    color: var(--color-success);
  }
  
  /* .sk-chip > .sk-icons {
    margin-left: -0.3rem;
  } */
  .sk-chip>.sk-button {
    margin-right: -0.5rem;
  }
  
  .sk-chip .sk-button .sk-icons {
    margin: 0;
    font-size: 2rem;
  }
  
  /* Removable chip */
  /* Shaped Chip */
  .sk-chip.sk-chip-shaped {
    border-radius: var(--radius-base);
  }
  
  /* Sizes :: BEGIN */
  /* xsmall */
  .sk-chip.sk-xsmall {
    font-size: 1.2rem;
    height: 2rem;
    line-height: 2rem;
    padding: 0 0.5rem;
  }
  
  .sk-chip.sk-xsmall .sk-icons {
    margin-left: 0;
    /* margin-right: 0.2rem; */
    font-size: var(--font-size-base);
  }
  
  .sk-chip.sk-xsmall .sk-button {
    margin-left: 0.2rem;
    margin-right: -0.4rem;
  }
  
  .sk-chip.sk-xsmall .sk-icons svg {
    width: 1.6rem;
    height: 1.6rem;
  }
  
  .sk-chip.sk-xsmall .sk-button .sk-icons svg {
    width: 0.6rem;
    height: 0.6rem;
  }
  
  /* small */
  .sk-chip.sk-small {
    font-size: 1.4rem;
    height: 2.4rem;
    line-height: 2.4rem;
    padding: 0 0.8rem;
  }
  
  .sk-chip.sk-small .sk-icons {
    margin-left: -0.3rem;
    margin-right: 0.3rem;
    font-size: 1.6rem;
  }
  
  .sk-chip.sk-small .sk-button {
    margin-right: -0.3rem;
  }
  
  .sk-chip.sk-small .sk-button .sk-icons svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  
  /* large */
  .sk-chip.sk-large {
    font-size: 1.6rem;
    height: 4.6rem;
    line-height: 4.6rem;
    padding: 0 1.6rem;
  }
  
  .sk-chip.sk-large .sk-icons {
    margin-left: -0.8rem;
    margin-right: 0.8rem;
    font-size: 2.4rem;
  }
  
  .sk-chip.sk-large .sk-button {
    margin-left: 0.8rem;
    margin-right: -0.8rem;
  }
  
  .sk-chip.sk-large .sk-icons svg {
    width: 2.4rem;
    height: 2.4rem;
  }
  
  .sk-chip.sk-large .sk-button .sk-icons svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  
  /*********************************/
  /* Badge :: BEGIN */
  /*********************************/
  .sk-badge {
    border-radius: var(--radius-base);
    padding: 0.4rem;
    font-size: 1.4rem;
    font-weight: var(--font-weight-medium, 500);
    line-height: 0.8rem;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    background: var(--color-danger);
    user-select: none;
    flex-shrink: 0;
  }
  
  .sk-badge.sk-badge-small {
    font-size: 1.2rem;
  }
  
  .sk-badge.sk-badge-large {
    font-size: 1.6rem;
    padding: 1rem;
  }
  
  .sk-badge .sk-icons {
    margin-right: 0;
  }
  
  .sk-badge-round {
    border-radius: var(--radius-pill);
  }
  
  .sk-badge-primary {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
  }
  
  .sk-badge-secondary {
    background: var(--color-secondary) !important;
    color: var(--color-on-secondary) !important;
  }
  
  .sk-badge-success {
    background: var(--color-success) !important;
    color: var(--color-white) !important;
  }
  
  .sk-badge-danger {
    background: var(--color-danger) !important;
    color: var(--color-white) !important;
  }
  
  .sk-badge-warning {
    background: var(--color-warning) !important;
    color: var(--color-white) !important;
  }
  
  .sk-badge-info {
    background: var(--color-info);
  }
  
  .sk-badge-light {
    background: var(--color-light);
  }
  
  .sk-badge-dark {
    background: var(--color-dark);
  }
  
  .sk-badge-muted {
    background: var(--color-grey);
  }
  
  .sk-badge-violet-light {
    background: var(--color-violet-light);
  }
  
  
  /* light variant background color utilities */
  :is(.sk-bg-primary-light) {
    background-color: var(--color-primary-light) !important;
  }
  
  :is(.sk-bg-secondary-light) {
    background-color: var(--color-secondary-light) !important;
  }
  
  :is(.sk-bg-success-light) {
    background-color: var(--color-success-light) !important;
    color: var(--color-success) !important;
  }
  
  :is(.sk-bg-danger-light) {
    background-color: var(--color-danger-light) !important;
    color: var(--color-danger) !important;
  }
  
  :is(.sk-bg-warning-light) {
    background-color: var(--color-warning-light) !important;
    color: var(--color-warning);
  }
  
  :is(.sk-bg-info-light) {
    background-color: var(--color-info-light) !important;
    color: var(--color-info-dark) !important;
  }
  
  :is(.sk-bg-primary-violet) {
    background-color: var(--color-primary-violet) !important;
  }
  
  :is(.sk-bg-primary-light-violet) {
    background-color: var(--color-primary-violet-light) !important;
    color: var(--color-primary-violet) !important;
  }
  
  
  /*********************************/
  /* Badge :: END */
  /*********************************/
  /*********************************/
  /* Radio Button :: BEGIN */
  /*********************************/
  .sk-radio .sk-radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none
  }
  
  .sk-radio .sk-check-label:empty {
    padding: 0 0rem 2rem 0;
  }
  
  .sk-radio .sk-check-label {
    position: relative;
    padding-left: 3rem;
    cursor: pointer;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    line-height: 2rem;
    -webkit-transition: .28s ease;
    transition: .28s ease;
    user-select: none;
    color: var(--color-form-elements-label);
  }
  
  .sk-checkbox .sk-check-label:empty {
    padding: 0;
    width: 2rem;
    height: 2rem;
  }
  
  .sk-radio .sk-check-label:before,
  .sk-radio .sk-check-label:after {
    content: '';
    position: absolute;
    left: 0;
    width: 2rem;
    height: 2rem;
    z-index: 0;
    transition: .28s ease;
    border-radius: 50%;
  }
  
  .sk-radio .sk-radio-input:not(:checked)+label:before {
    border: 0.2rem solid var(--color-form-elements-border);
  }
  
  .sk-radio .sk-radio-input:checked+label:before {
    border: 0.2rem solid var(--color-primary);
  }
  
  .sk-radio .sk-radio-input:checked+label:after {
    background-color: var(--color-primary);
    transform: scale(0.5);
    border: 0.2rem solid var(--color-primary);
  }
  
  .sk-radio-group.sk-inline .sk-list {
    overflow-x: auto;
    overflow-x: overlay;
    display: flex;
    gap: 1rem;
    position: relative;
    scroll-behavior: smooth;
    white-space: nowrap;
    overflow-y: hidden;
  }
  
  /* Disabled :: BEGIN */
  .sk-radio .sk-radio-input:disabled:not(:checked)+label:before {
    border-color: var(--color-form-elements-border-disabled)
  }
  
  .sk-radio .sk-radio-input:disabled:checked+label:before {
    border: 0.2rem solid var(--color-form-elements-value-disabled)
  }
  
  .sk-radio .sk-radio-input:disabled:checked+label:after {
    background-color: var(--color-form-elements-value-disabled);
    border-color: var(--color-form-elements-value-disabled)
  }
  
  .sk-radio .sk-radio-input:disabled+label,
  .sk-radio .sk-radio-input:disabled+label * {
    cursor: not-allowed;
    color: var(--color-form-elements-value-disabled)
  }
  
  /* Disabled :: END */
  /* Radio Button Large Size :: BEGIN */
  .sk-radio.sk-large .sk-check-label {
    padding-left: 3.4rem;
    line-height: 2.4rem;
  }
  
  .sk-radio.sk-large .sk-check-label:before,
  .sk-radio.sk-large .sk-check-label:after {
    width: 2.4rem;
    height: 2.4rem;
  }
  
  /* Large Size :: END */
  /* Group :: BEGIN */
  .sk-radio .sk-list-item {
    width: 100%;
  }
  
  .sk-radio.sk-inline .sk-list-item {
    width: auto;
    flex: 0 0 auto;
  }
  
  /* Group :: END */
  /* Hint Text :: BEGIN */
  .sk-radio .sk-helper-text {
    color: var(--color-form-elements-helper-text);
    font-size: 1.4rem;
    width: 100%;
    display: block;
    line-height: normal;
  }
  
  /* Hint Text :: END */
  /*********************************/
  /* Radio Button :: END */
  /*********************************/
  /*********************************/
  /* Checkbox :: BEGIN */
  /*********************************/
  .sk-checkbox .item-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
  }
  
  .sk-checkbox .sk-list-item {
    width: 100%;
  }
  
  .sk-checkbox .sk-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none
  }
  
  .sk-checkbox .sk-check-label {
    position: relative;
    padding-left: 3rem;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    user-select: none;
    width: 100%;
    color: var(--color-form-elements-text);
    word-break: break-word;
  }
  
  .sk-checkbox .sk-check-input:checked+label:before {
    left: 0.10rem;
    width: 0.8rem;
    height: 1.3rem;
    border-top: 0 solid transparent;
    border-left: 0.2rem solid transparent;
    border-right: 0.2rem solid var(--color-white);
    border-bottom: 0.2rem solid var(--color-white);
    transform: rotateZ(37deg);
    scale: 1;
    transform: translate(54%, -20%) rotate(37deg);
  }
  
  .sk-checkbox .sk-check-input+label:after {
    border-radius: var(--radius-base);
  }
  
  .sk-checkbox .sk-check-input+label:before,
  .sk-checkbox .sk-check-input+label:after {
    content: '';
    left: 0;
    position: absolute;
    transition: all 0.2s;
    z-index: 1
  }
  
  .sk-checkbox .sk-check-input:not(:checked)+label:before {
    width: 0;
    height: 0;
    border: 0.3rem solid transparent;
    left: 0.6rem;
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
    transform: translate(26%, -35%);
    scale: 0;
  }
  
  .sk-checkbox .sk-check-input:not(:checked)+label:after {
    height: 2rem;
    width: 2rem;
    background-color: var(--color-form-elements-bg);
    border: 0.1rem solid var(--color-form-elements-border);
    z-index: 0
  }
  
  .sk-checkbox .sk-check-input:checked+label:after {
    width: 2rem;
    height: 2rem;
    border: 0.2rem solid var(--color-primary);
    background-color: var(--color-primary);
    z-index: 0
  }
  
  
  .sk-checkbox .sk-check-input:not(:checked)+label:hover:after {
    border-color: var(--color-form-elements-border-hover);
  }
  
  /* Disabled :: BEGIN */
  .sk-checkbox .sk-check-input:disabled {
    background-color: var(--color-form-elements-bg-disabled);
    border: 0.2rem solid var(--color-form-elements-bg-disabled);
  }
  
  .sk-checkbox .sk-check-input:disabled+label,
  .sk-checkbox .sk-check-input:disabled+label * {
    cursor: not-allowed;
    color: var(--color-form-elements-value-disabled);
  }
  
  .sk-checkbox .sk-check-input:disabled:not(:checked)+label:after {
    border-color: var(--color-form-elements-border-disabled);
    background: var(--color-form-elements-bg-disabled)
  }
  
  .sk-checkbox .sk-check-input:disabled:checked+label:after {
    background-color: var(--color-form-elements-value-disabled);
    border-color: var(--color-form-elements-value-disabled)
  }
  
  /* Disabled :: END */
  
  /* Group :: BEGIN */
  .sk-checkbox-group.sk-inline,
  .sk-radio-group.sk-inline {
    overflow-x: auto;
    overflow-x: overlay;
    display: flex;
    gap: 1rem;
    position: relative;
    scroll-behavior: smooth;
    gap: var(--gutter-large);
  }
  
  .sk-checkbox-group .sk-checkbox,
  .sk-radio-group .sk-radio {
    margin-bottom: 1rem;
  }
  
  .sk-checkbox-group .sk-checkbox:last-child,
  .sk-radio-group .sk-radio:last-child {
    margin-bottom: 0rem;
  }
  
  /* Group :: END */
  /* Large :: BEGIN */
  .sk-checkbox.sk-large .sk-check-label {
    line-height: 2.4rem;
    padding-left: 3.4rem;
  }
  
  .sk-checkbox.sk-large .sk-check-input:checked+label:after,
  .sk-checkbox.sk-large .sk-check-input:not(:checked)+label:after {
    height: 2.4rem;
    width: 2.4rem;
  }
  
  .sk-checkbox.sk-large .sk-check-input:checked+label:before {
    height: 1.6rem;
    left: 0.3rem;
  }
  
  /* Large :: END */
  /* Hint Text :: BEGIN */
  .sk-checkbox .hint-text {
    color: var(--color-form-elements-helper-text);
    font-size: 1.4rem;
    width: 100%;
    display: block;
    line-height: normal;
  }
  
  /* Hint Text :: END */
  /*********************************/
  /* Checkbox :: END */
  /*********************************/
  
  /**************************************************/
  /* Bottom Navigation :: BEGIN */
  /**************************************************/
  .sk-bottom-nav {
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 1rem;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: var(--zindex-1);
    box-shadow: var(--box-shadow-2);
  }
  
  .sk-bottom-nav .sk-button {
    height: 6.6rem;
    font-size: 1.3rem;
    font-weight: normal;
    color: var(--color-body-color);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 0;
    gap: 0.4rem;
    padding: 0;
    user-select: none;
    text-transform: none;
  }
  
  .sk-bottom-nav .sk-button:hover {
    background: rgba(var(--color-rgb-primary) / 4%);
  }
  
  .sk-bottom-nav .sk-button .sk-icons {
    margin: 0;
  }
  
  .sk-bottom-nav .sk-button .sk-icons svg {
    fill: currentColor;
    margin: auto;
    height: 1.8rem;
    width: 1.8rem;
  }
  
  .sk-bottom-nav .sk-bottom-nav-label {
    line-height: normal;
  }
  
  .sk-bottom-nav .sk-active {
    color: var(--color-primary);
  }
  
  .sk-bottom-nav .sk-button.sk-disabled {
    border: none;
    background: transparent !important;
  }
  
  .sk-bottom-nav .sk-badge {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    font-size: 1rem;
    padding: 0.4rem 0.4rem;
  }
  
  .sk-bottom-nav .sk-button:hover {
    box-shadow: none;
  }
  
  /* Note: Add this class to the body when bottom nav enabled */
  .sk-bottom-nav-enabled {
    padding-bottom: 6.6rem;
  }
  
  @media (max-width: 1200px) {
    body:has(.sk-bottom-nav) {
      padding-bottom: 6.6rem;
    }
  }
  
  @media(max-width: 350px) {
    .sk-bottom-nav .sk-bottom-nav-label {
      font-size: 1.1rem;
    }
  }
  
  /**************************************************/
  /* Bottom Navigation :: END */
  /**************************************************/
  
  /**************************************************/
  /* Tooltip :: BEGIN */
  /**************************************************/
  /* Tooltip Base :: BEGIN */
  [data-sk-tooltip] {
    position: relative;
    cursor: pointer;
  }
  
  [data-sk-tooltip]:hover:before {
    transform: translateX(-55%);
  }
  
  [data-sk-tooltip]:before {
    content: attr(data-sk-tooltip);
    position: absolute;
    bottom: 3rem;
    left: 0%;
    padding: 0.8rem;
    transform: translateX(-50%) scale(0);
    transition: transform 0.2s ease-in-out;
    transform-origin: top;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: var(--border-radius-4);
    font-size: 1.2rem;
    font-family: 'sf-pro-text', sans-serif;
    z-index: 2;
  }
  
  /* Tooltip for first level appbar :: BEGIN */
  .sk-appbar.sk-appbar-fixed:first-of-type .sk-appbar-section.sk-appbar-align-end [data-sk-tooltip]:hover:before {
    bottom: revert;
    left: -0.5rem;
    transform: translate(-100%, 0);
  }
  
  /* Tooltip for first level appbar :: END */
  
  /* tooltip for fab (Floating action button) :: BEGIN */
  button.sk-fab [data-sk-tooltip]:hover:before {
    transform: translate(-100%, -250%);
  }
  
  /* tooltip for fab (Floating action button) :: END */
  
  /* Tooltip Rich :: BEGIN */
  .sk-tooltip-rich {
    position: relative;
    display: inline-block;
  }
  
  .sk-tooltip-rich .sk-tooltip-wrapper {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s;
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: auto;
    transform: translateX(-50%);
    padding-top: 0.5rem;
  }
  
  .sk-tooltip-rich.sk-tooltip-top .sk-tooltip-wrapper,
  .sk-tooltip-rich.sk-tooltip-bottom .sk-tooltip-wrapper {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .sk-tooltip-rich.sk-tooltip-left .sk-tooltip-wrapper,
  .sk-tooltip-rich.sk-tooltip-right .sk-tooltip-wrapper {
    top: 50%;
    transform: translateX(50%);
    transform: translateY(-50%);
  }
  
  .sk-tooltip-rich.sk-tooltip-top .sk-tooltip-wrapper {
    top: auto;
    bottom: 100%;
    padding: 0 0 0.5rem 0;
  }
  
  .sk-tooltip-rich.sk-tooltip-right .sk-tooltip-wrapper {
    left: 100%;
    padding: 0 0 0 0.5rem;
  }
  
  .sk-tooltip-rich.sk-tooltip-bottom .sk-tooltip-wrapper {
    top: 100%;
    bottom: auto;
    padding: 0.5rem 0 0 0;
  }
  
  .sk-tooltip-rich.sk-tooltip-left .sk-tooltip-wrapper {
    left: auto;
    right: 100%;
    padding: 0 0.5rem 0 0;
  }
  
  .sk-tooltip-rich .sk-tooltip-inner {
    color: var(--color-white);
    background-color: var(--color-black);
    border-radius: 0.4rem;
    padding: var(--gutter-xsmall) var(--gutter-base);
    width: max-content;
    max-width: 35rem;
  }
  
  .sk-tooltip-rich .sk-tooltip-wrapper.sk-light .sk-tooltip-inner {
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-2);
    color: var(--color-body-color);
  }
  
  .sk-tooltip-rich .sk-tooltip-wrapper.sk-tooltip-rich-enabled .sk-tooltip-inner {
    padding: var(--gutter-base);
  }
  
  .sk-tooltip-rich .sk-tooltip-trigger {
    display: flex;
    align-items: center;
    color: var(--color-body-color);
    cursor: pointer;
    z-index: 1;
    font-weight: normal;
  }
  
  .sk-tooltip-rich:hover .sk-tooltip-wrapper,
  .sk-tooltip-rich:hover .sk-tooltip-wrapper:hover {
    opacity: 1;
    visibility: visible;
    display: block;
  }
  
  .sk-tooltip-inner ul {
    margin: 1rem 0 0;
  }
  
  .sk-tooltip-inner li {
    padding-bottom: var(--gutter-small);
  }
  
  .sk-tooltip-inner li:last-child {
    padding-bottom: 0;
  }
  
  .sk-tooltip-rich :not(.sk-light) .sk-tooltip-inner * {
    color: var(--color-white);
    font-size: 1.4rem;
  }
  
  .sk-tooltip-rich .sk-tooltip-inner p:last-child {
    margin-bottom: 0;
  }
  
  .sk-tooltip-rich .sk-tooltip-inner p:not(:last-child) {
    margin-bottom: 0.5rem;
  }
  
  .sk-tooltip-rich .sk-tooltip-inner ul {
    list-style-type: disc;
    text-align: left;
    list-style-position: initial;
    padding-left: var(--gutter-base);
  }
  
  /* Rich Tooltip :: END */
  /* Variants :: END */
  @media (max-width: 1024px) {
    .sk-tooltip-rich {
      position: initial;
    }
  
    .data-wrapper:has(.sk-tooltip-rich) {
      position: relative;
    }
  
    .sk-tooltip-rich .sk-tooltip-wrapper {
      scale: 0;
      transition: scale, opacity .2s ease;
      bottom: revert;
      left: 50%;
      top: revert;
      right: revert;
      transform: translateX(-50%)
    }
  
    .sk-tooltip-rich .sk-tooltip-trigger:hover+.sk-tooltip-wrapper {
      scale: 1;
    }
  
    .sk-tooltip-rich.sk-tooltip-top .sk-tooltip-wrapper,
    .sk-tooltip-rich.sk-tooltip-right .sk-tooltip-wrapper,
    .sk-tooltip-rich.sk-tooltip-bottom .sk-tooltip-wrapper,
    .sk-tooltip-rich.sk-tooltip-left .sk-tooltip-wrapper {
      bottom: revert;
      left: 50%;
      top: revert;
      right: revert;
      transform: translateX(-50%)
    }
  }
  
  /**************************************************/
  /* Tooltip :: END */
  /**************************************************/
  
  /**************************************************/
  /* Expansion Panels :: BEGIN */
  /**************************************************/
  .sk-expansion-panels {
    padding: 0;
  }
  
  .sk-expansion-panels .sk-expansion-inner {
    flex: 1 0 100%;
    max-width: 100%;
    position: relative;
    transition: .3s cubic-bezier(.25, .8, .5, 1);
    border-top: 0.1rem solid var(--color-border);
  }
  
  .sk-expansion-panels .sk-expansion-inner:first-child {
    border-top: 0;
  }
  
  .sk-expansion-panels .sk-expansion-header {
    align-items: center;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    display: flex;
    line-height: 1;
    outline: none;
    padding: 1rem 1rem 1rem var(--gutter-base);
    position: relative;
    transition: min-height .3s cubic-bezier(.25, .8, .5, 1);
    width: 100%;
    cursor: pointer;
  }
  
  .sk-expansion-panels .sk-expansion-action {
    padding: 0;
    text-align: left;
    line-height: 1.25;
    width: 100%;
    justify-content: space-between;
    display: flex;
  }
  
  .sk-expansion-panels .sk-expansion-action .sk-icons {
    flex-shrink: 0;
  }
  
  .sk-expansion-panels .sk-expansion-content {
    display: none;
    padding: 0 var(--gutter-base) var(--gutter-base);
  }
  
  .sk-expansion-inner.sk-active .sk-expansion-content {
    display: block;
  }
  
  .sk-expansion-panels .sk-expansion-action .sk-icons svg {
    fill: var(--color-form-elements-icon);
  }
  
  .sk-expansion-inner.sk-active .sk-expansion-action .sk-icons svg {
    transform: rotate(180deg);
  }
  
  /**************************************************/
  /* Expansion Panels :: END */
  /**************************************************/
  /**************************************************/
  /* Ratings Star :: BEGIN */
  /**************************************************/
  /*Review & Ratings*/
  .sk-ratings {
    display: flex;
    align-items: center;
    line-height: normal;
  }
  
  .sk-ratings .sk-star {
    margin-right: 1rem;
    color: var(--color-dark);
    font-size: 1.4rem;
  }
  
  .sk-ratings.sk-small [class*=star],
  .sk-ratings.sk-medium [class*="star"],
  .sk-ratings.sk-large [class*="star"],
  .sk-ratings.sk-xlarge [class*="star"] {
    background-image: var(--star-rating), var(--star-rating), var(--star-rating), var(--star-rating), var(--star-rating);
    background-repeat: no-repeat;
    display: inline-block;
    overflow: hidden;
    text-indent: -300rem;
  }
  
  /* Ratings small variant */
  .sk-ratings.sk-small [class*=star] {
    background-size: 1.5rem 4.5rem;
    width: 8.1rem;
    height: 1.5rem;
  }
  
  .sk-ratings.sk-small .sk-star0 {
    background-position: center left, center left 1.6rem, center left 3.2rem, center left 4.8rem, center left 6.4rem
  }
  
  .sk-ratings.sk-small .sk-star0-5 {
    background-position: bottom left, center left 1.6rem, center left 3.2rem, center left 4.8rem, center left 6.4rem
  }
  
  .sk-ratings.sk-small .sk-star1 {
    background-position: top left, center left 1.6rem, center left 3.2rem, center left 4.8rem, center left 6.4rem
  }
  
  .sk-ratings.sk-small .sk-star1-5 {
    background-position: top left, bottom left 1.6rem, center left 3.2rem, center left 4.8rem, center left 6.4rem
  }
  
  .sk-ratings.sk-small .sk-star2 {
    background-position: top left, top left 1.6rem, center left 3.2rem, center left 4.8rem, center left 6.4rem
  }
  
  .sk-ratings.sk-small .sk-star2-5 {
    background-position: top left, top left 1.6rem, bottom left 3.2rem, center left 4.8rem, center left 6.4rem
  }
  
  .sk-ratings.sk-small .sk-star3 {
    background-position: top left, top left 1.6rem, top left 3.2rem, center left 4.8rem, center left 6.4rem
  }
  
  .sk-ratings.sk-small .sk-star3-5 {
    background-position: top left, top left 1.6rem, top left 3.2rem, bottom left 4.8rem, center left 6.4rem
  }
  
  .sk-ratings.sk-small .sk-star4 {
    background-position: top left, top left 1.6rem, top left 3.2rem, top left 4.8rem, center left 6.4rem
  }
  
  .sk-ratings.sk-small .sk-star4-5 {
    background-position: top left, top left 1.6rem, top left 3.2rem, top left 4.8rem, bottom left 6.4rem
  }
  
  .sk-ratings.sk-small .sk-star5 {
    background-position: top left, top left 1.6rem, top left 3.2rem, top left 4.8rem, top left 6.4rem
  }
  
  /* Ratings medium variant */
  .sk-ratings.sk-medium [class*="star"] {
    background-size: 2rem 6rem;
    width: 11rem;
    height: 2rem;
  }
  
  .sk-ratings.sk-medium .sk-star0 {
    background-position: center left, center left 2.2rem, center left 4.4rem, center left 6.6rem, center left 8.8rem;
  }
  
  .sk-ratings.sk-medium .sk-star0-5 {
    background-position: bottom left, center left 2.2rem, center left 4.4rem, center left 6.6rem, center left 8.8rem;
  }
  
  .sk-ratings.sk-medium .sk-star1 {
    background-position: top left, center left 2.2rem, center left 4.4rem, center left 6.6rem, center left 8.8rem;
  }
  
  .sk-ratings.sk-medium .sk-star1-5 {
    background-position: top left, bottom left 2.2rem, center left 4.4rem, center left 6.6rem, center left 8.8rem;
  }
  
  .sk-ratings.sk-medium .sk-star2 {
    background-position: top left, top left 2.2rem, center left 4.4rem, center left 6.6rem, center left 8.8rem;
  }
  
  .sk-ratings.sk-medium .sk-star2-5 {
    background-position: top left, top left 2.2rem, bottom left 4.4rem, center left 6.6rem, center left 8.8rem;
  }
  
  .sk-ratings.sk-medium .sk-star3 {
    background-position: top left, top left 2.2rem, top left 4.4rem, center left 6.6rem, center left 8.8rem;
  }
  
  .sk-ratings.sk-medium .sk-star3-5 {
    background-position: top left, top left 2.2rem, top left 4.4rem, bottom left 6.6rem, center left 8.8rem;
  }
  
  .sk-ratings.sk-medium .sk-star4 {
    background-position: top left, top left 2.2rem, top left 4.4rem, top left 6.6rem, center left 8.8rem;
  }
  
  .sk-ratings.sk-medium .sk-star4-5 {
    background-position: top left, top left 2.2rem, top left 4.4rem, top left 6.6rem, bottom left 8.8rem;
  }
  
  .sk-ratings.sk-medium .sk-star5 {
    background-position: top left, top left 2.2rem, top left 4.4rem, top left 6.6rem, top left 8.8rem;
  }
  
  /* Ratings Large variant */
  .sk-ratings.sk-large [class*="star"] {
    background-size: 4rem 10.8rem;
    width: 20rem;
    height: 3.5rem;
  }
  
  .sk-ratings.sk-large .sk-star0 {
    background-position: center left, center left 4rem, center left 8rem, center left 12rem, center left 16rem;
  }
  
  .sk-ratings.sk-large .sk-star0-5 {
    background-position: bottom left, center left 4rem, center left 8rem, center left 12rem, center left 16rem;
  }
  
  .sk-ratings.sk-large .sk-star1 {
    background-position: top left, center left 4rem, center left 8rem, center left 12rem, center left 16rem;
  }
  
  .sk-ratings.sk-large .sk-star1-5 {
    background-position: top left, bottom left 4rem, center left 8rem, center left 12rem, center left 16rem;
  }
  
  .sk-ratings.sk-large .sk-star2 {
    background-position: top left, top left 4rem, center left 8rem, center left 12rem, center left 16rem;
  }
  
  .sk-ratings.sk-large .sk-star2-5 {
    background-position: top left, top left 4rem, bottom left 8rem, center left 12rem, center left 16rem;
  }
  
  .sk-ratings.sk-large .sk-star3 {
    background-position: top left, top left 4rem, top left 8rem, center left 12rem, center left 16rem;
  }
  
  .sk-ratings.sk-large .sk-star3-5 {
    background-position: top left, top left 4rem, top left 8rem, bottom left 12rem, center left 16rem;
  }
  
  .sk-ratings.sk-large .sk-star4 {
    background-position: top left, top left 4rem, top left 8rem, top left 12rem, center left 16rem;
  }
  
  .sk-ratings.sk-large .sk-star4-5 {
    background-position: top left, top left 4rem, top left 8rem, top left 12rem, bottom left 16rem;
  }
  
  .sk-ratings.sk-large .sk-star5 {
    background-position: top left, top left 4rem, top left 8rem, top left 12rem, top left 16rem;
  }
  
  /* Ratings extra large variant */
  .sk-ratings.sk-xlarge [class*="star"] {
    background-size: 5rem 15rem;
    width: 27rem;
    height: 5rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star0 {
    background-position: center left, center left 5.5rem, center left 11rem, center left 16.5rem, center left 22rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star0-5 {
    background-position: bottom left, center left 5.5rem, center left 11rem, center left 16.5rem, center left 22rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star1 {
    background-position: top left, center left 5.5rem, center left 11rem, center left 16.5rem, center left 22rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star1-5 {
    background-position: top left, bottom left 5.5rem, center left 11rem, center left 16.5rem, center left 22rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star2 {
    background-position: top left, top left 5.5rem, center left 11rem, center left 16.5rem, center left 22rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star2-5 {
    background-position: top left, top left 5.5rem, bottom left 11rem, center left 16.5rem, center left 22rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star3 {
    background-position: top left, top left 5.5rem, top left 11rem, center left 16.5rem, center left 22rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star3-5 {
    background-position: top left, top left 5.5rem, top left 11rem, bottom left 16.5rem, center left 22rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star4 {
    background-position: top left, top left 5.5rem, top left 11rem, top left 16.5rem, center left 22rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star4-5 {
    background-position: top left, top left 5.5rem, top left 11rem, top left 16.5rem, bottom left 22rem;
  }
  
  .sk-ratings.sk-xlarge .sk-star5 {
    background-position: top left, top left 5.5rem, top left 11rem, top left 16.5rem, top left 22rem;
  }
  
  /* Ratings Inline */
  .sk-ratings-group {
    display: flex;
    align-items: center;
    gap: 0.5rem
  }
  
  .sk-ratings-group.sk-inline {
    display: flex;
    align-items: center;
  }
  
  /**************************************************/
  /* Ratings Star :: END */
  /**************************************************/
  /**************************************************/
  /* Pagination :: BEGIN */
  /**************************************************/
  .sk-pagination {
    display: flex;
    width: 100%;
  }
  
  .sk-pagination ul {
    align-items: center;
    display: inline-flex;
    list-style-type: none;
    max-width: 100%;
    gap: 1rem;
    margin: var(--gutter-base) 0;
  }
  
  .sk-pagination li {
    background: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
    min-width: 3rem;
    padding: 0 0.5rem;
    font-size: 1.4rem;
    text-decoration: none;
    color: var(--color-body-color);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-base);
    border: 0.1rem solid var(--color-border);
    transition: all 200ms ease;
    position: relative;
  }
  
  .sk-pagination li:hover,
  .sk-pagination li.sk-active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
  }
  
  .sk-pagination li.sk-active {
    pointer-events: none;
  }
  
  .sk-pagination li.dots {
    border: 0;
    font-weight: 700;
    pointer-events: none;
  }
  
  .sk-pagination li a {
    color: inherit;
  }
  
  .sk-pagination li:hover .sk-icons {
    color: inherit;
  }
  
  .sk-pagination li:hover .sk-icons svg {
    fill: var(--color-white);
  }
  
  .sk-pagination .sk-icons {
    color: var(--color-body-color);
    display: flex;
    align-items: center;
  }
  
  .sk-pagination .sk-icons svg {
    fill: var(--color-body-color);
    width: 2.4rem;
    height: 2.4rem;
  }
  
  /**************************************************/
  /* Pagination :: END */
  /**************************************************/
  /*********************************/
  /* Carousel :: BEGIN */
  /*********************************/
  .sk-carousel {
    position: relative;
  }
  
  .sk-carousel .sk-carousel-inner {
    display: flex;
    overflow-x: auto;
    overflow-x: overlay;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: var(--gutter-base);
    scroll-padding-left: 10%;
    overflow-y: hidden;
  }
  
  .sk-carousel .sk-carousel-item {
    max-width: 30rem;
    width: 80%;
    flex-shrink: 0;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.5rem;
    scroll-snap-align: start;
    scroll-padding: 2rem;
  }
  
  .sk-carousel .sk-carousel-item .sk-card {
    margin-bottom: 0;
  }
  
  /* Carousel Center Mode */
  .sk-carousel.sk-carousel-center .sk-carousel-inner {
    max-width: 50rem;
    margin: 0 auto;
  }
  
  .sk-carousel.sk-carousel-center .sk-carousel-item {
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .sk-carousel.sk-carousel-center .sk-carousel-inner {
    scroll-padding-left: 0;
  }
  
  .sk-carousel .sk-carousel-nav {
    justify-content: space-between;
    align-items: center;
  }
  
  .sk-carousel .sk-carousel-nav .sk-icons {
    cursor: pointer;
    font-size: 4.8rem;
    color: var(--color-body-color);
    display: block;
  }
  
  .sk-carousel .sk-carousel-nav .sk-prev,
  .sk-carousel .sk-carousel-nav .sk-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .sk-carousel .sk-carousel-nav .sk-prev {
    left: 0;
  }
  
  .sk-carousel .sk-carousel-nav .sk-next {
    right: 0;
  }
  
  .sk-carousel .sk-carousel-nav svg {
    cursor: pointer;
    width: 5rem;
    height: 5rem;
    padding: 1.2rem;
    fill: var(--color-dark);
  }
  
  /* Dot Navigation */
  .sk-carousel .sk-carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: var(--gutter-base);
  }
  
  .sk-carousel .sk-carousel-dots .sk-dot {
    width: 0.6rem;
    height: 0.6rem;
    border: 0.1rem solid var(--color-text-muted);
    margin: 0.4rem;
    border-radius: 1rem;
    background-color: var(--color-white);
  }
  
  .sk-carousel .sk-carousel-dots .sk-dot.sk-active {
    background-color: var(--color-dark);
  }
  
  @media (min-width: 768px) {
    .sk-carousel .sk-carousel-nav {
      display: flex;
    }
  }
  
  /*********************************/
  /* Carousel :: BEGIN */
  /*********************************/
  /******************************************************/
  /* Full Screen Gallery :: BEGIN */
  /******************************************************/
  .sk-gallery-panel .sk-gallery-header {
    padding: 1rem;
  }
  
  .sk-gallery-panel .sk-gallery-inner {
    background-color: var(--color-body-color);
  }
  
  .sk-gallery-panel .sk-gallery-header .sk-icons {
    color: var(--color-white);
  }
  
  .sk-gallery-panel .sk-gallery-header button {
    background-color: transparent;
  }
  
  .sk-gallery-panel .sk-gallery-header button:hover {
    background-color: var(--color-light);
  }
  
  .sk-gallery-panel .sk-gallery-header button:hover svg {
    fill: var(--color-dark);
  }
  
  .sk-gallery-panel .sk-gallery-header button svg {
    fill: currentColor;
  }
  
  .sk-gallery-panel .sk-gallery-body {
    margin: 0;
    height: 100%;
  }
  
  .sk-gallery-panel .sk-menu {
    position: fixed;
    top: 0;
    justify-content: center;
    width: calc(100% - 10rem);
    left: 0;
    right: 0;
    margin: 0 auto;
    border-bottom: 0;
  }
  
  .sk-gallery-panel .sk-menu ul {
    justify-content: center;
    border-bottom: 0;
  }
  
  .sk-gallery-panel .sk-menu li {
    color: var(--color-light);
    height: 5.6rem;
    flex: initial;
    border-bottom: 0;
  }
  
  .sk-gallery-panel .sk-menu li.sk-active {
    color: var(--color-white);
  }
  
  .sk-gallery-panel .sk-menu li:hover {
    background-color: transparent;
  }
  
  .sk-gallery-panel .sk-gallery-image {
    max-width: 100%;
    max-height: 100%;
  }
  
  .sk-gallery-panel .sk-panel-footer {
    border-top: 0;
  }
  
  .sk-gallery-panel .sk-carousel-nav .sk-icons:hover {
    background: var(--color-light);
    border-radius: 100%;
  }
  
  .sk-gallery-panel .sk-carousel-nav .sk-icons:hover svg {
    fill: var(--color-dark);
  }
  
  .sk-gallery-panel .sk-carousel-video {
    width: 100%;
    height: 100%;
  }
  
  .sk-gallery-panel .sk-menu nav {
    border-bottom: 0;
  }
  
  /* gallery carousel custom css */
  .sk-gallery-panel .sk-carousel {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  
  .sk-gallery-panel .sk-gallery-header {
    text-align: right;
  }
  
  .sk-gallery-panel .sk-carousel .sk-carousel-item {
    border: 0;
    height: 100%;
  }
  
  .sk-gallery-panel .sk-carousel .sk-carousel-inner {
    scroll-padding-left: 0;
    align-items: center;
    max-width: 100%;
  }
  
  /* ID should not be used, need to check and restructure this style */
  /* .sk-gallery-panel #videoContent .sk-carousel .sk-carousel-inner {
    max-width: 100%;
  } */
  
  .sk-gallery-panel .sk-tab-content {
    height: 100%;
    justify-content: center;
  }
  
  .sk-gallery-panel .sk-carousel img {
    margin: auto;
    height: 100%;
    object-fit: contain;
  }
  
  /* ID should not be used, need to check and restructure this style */
  /* .sk-gallery-panel #videoContent .sk-carousel-item {
    height: calc(100vh - 15rem);
    max-width: 100%;
    width: 100%;
  } */
  
  .sk-gallery-panel .sk-gallery-body .sk-tabs {
    height: 100%;
  }
  
  @media (min-width: 768px) {
    .sk-gallery-panel .sk-gallery-header {
      padding: 1.2rem;
    }
  
    .sk-gallery-panel .sk-menu li {
      height: 6.4rem;
    }
  
    .sk-gallery-panel .sk-carousek-video {
      width: 80%;
      height: 80%;
    }
  
    .sk-gallery-panel .sk-carousel .sk-carousel-inner {
      max-width: 75%;
    }
  }
  
  /*********************************/
  /* List Items :: BEGIN */
  /*********************************/
  .sk-list .sk-list-item {
    display: flex;
  }
  
  .sk-list.sk-list-inline {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  /*********************************/
  /* List Items :: END */
  /*********************************/
  /************************************************************/
  /* Text Select :: BEGIN */
  /************************************************************/
  .sk-text-select {
    position: relative;
  }
  
  .sk-text-select.sk-disabled,
  .sk-text-select.sk-disabled.sk-focus .sk-event-group,
  .sk-text-select.sk-disabled.sk-focus .sk-floating-label {
    border-color: var(--color-form-elements-border-disabled) !important;
    color: var(--color-form-elements-label-disabled);
  }
  
  .sk-text-select .sk-event-group,
  .sk-text-select select {
    cursor: pointer;
  }
  
  /* disabled state :: BEGIN */
  .sk-text-select[disabled] {
    cursor: not-allowed;
  }
  
  .sk-text-select[disabled] .sk-event-group,
  .sk-text-select[disabled] select,
  .sk-text-select[disabled] .sk-helper-line {
    pointer-events: none;
    border-color: var(--color-form-elements-border-disabled) !important;
  }
  
  .sk-text-select[disabled] .sk-event-group,
  .sk-text-select[disabled] .sk-input,
  .sk-text-select[disabled] .sk-floating-label,
  .sk-text-select[disabled] .sk-required,
  .sk-text-select[disabled] select,
  .sk-text-select[disabled] .sk-helper-line {
    color: var(--color-form-elements-label-disabled) !important;
  }
  
  .sk-text-select[disabled] .sk-event-group>.sk-icons {
    color: var(--color-form-elements-label-disabled);
  }
  
  .sk-text-select[disabled] .sk-icons svg {
    fill: var(--color-form-elements-label-disabled) !important;
  }
  
  /* disabled state :: END */
  
  .sk-text-select .sk-event-group {
    border: 0.1rem solid var(--color-form-elements-border);
    border-radius: var(--radius-base);
    width: 100%;
    font-size: var(--font-size-base);
    color: var(--color-form-elements-value);
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    background: var(--color-form-elements-bg);
    height: 3.8rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0 var(--gutter-base);
  }
  
  .sk-text-select .sk-event-group:has(select) {
    padding: 0;
  }
  
  .sk-text-select .sk-event-group:hover {
    border: 0.1rem solid var(--color-form-elements-border-hover);
  }
  
  .sk-text-select select,
  .sk-text-select .sk-selected-text {
    width: 100%;
    height: auto;
    border: 0;
    padding: 0;
    border-radius: inherit;
  }
  
  .sk-text-select.sk-valid select,
  .sk-text-select.sk-valid .sk-selected-text {
    color: var(--color-form-elements-value);
  }
  
  .sk-text-select select {
    padding: 0 var(--gutter-base);
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
  }
  
  .sk-text-select.sk-large select,
  .sk-text-select.sk-xlarge select,
  .sk-text-select.sk-xlarge .sk-selected-text,
  .sk-text-select.sk-large .sk-selected-text {
    font-size: var(--font-size-base);
  }
  
  
  /* Input focus highlight border color */
  .sk-text-select.sk-focus .sk-event-group {
    border: 0.1rem solid var(--color-form-elements-border-focus);
    outline: 0.2rem solid var(--color-form-elements-border-focus);
    gap: 1rem;
    outline-offset: -0.1rem
  }
  
  /* Floating Label */
  .sk-text-select .sk-floating-label {
    position: absolute;
    left: var(--gutter-base);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-form-elements-label);
    transition: all .2s;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    text-transform: inherit;
    pointer-events: none;
    z-index: 1;
    font-size: 1.6rem;
    line-height: normal;
  }
  
  .sk-text-select.sk-focus .sk-floating-label,
  .sk-text-select.sk-valid .sk-floating-label,
  .sk-text-select.sk-error .sk-floating-label,
  .sk-text-field .sk-input:focus~.sk-floating-label {
    top: -0.1rem;
    background: var(--color-form-elements-bg);
    font-weight: normal;
    font-size: 1.2rem;
    padding: 0 0.4rem;
    left: 1.2rem;
  }
  
  .sk-text-select.sk-focus .sk-floating-label,
  .sk-text-select.sk-focus.sk-valid .sk-floating-label {
    color: var(--color-form-elements-label-focus);
  }
  
  .sk-text-select.sk-valid .sk-floating-label {
    color: var(--color-form-elements-value);
  }
  
  /* Input error highlight border color */
  .sk-text-select.sk-error .sk-event-group {
    border: 0.2rem solid var(--color-form-elements-border-error);
    outline: 0;
  }
  
  .sk-text-select.sk-error .sk-floating-label,
  .sk-text-select.sk-focus.sk-error .sk-floating-label {
    color: var(--color-form-elements-label-error);
  }
  
  /* Helper Text / Error Message / Character Count */
  .sk-helper-line {
    display: flex;
    align-items: center;
  }
  
  .sk-helper-line .sk-helper-text,
  .sk-helper-line .sk-error-text,
  .sk-helper-line .sk-char-counter {
    font-size: 1.4rem;
    letter-spacing: .04rem;
    margin-top: 0.5rem;
    display: none;
    line-height: normal;
  }
  
  .sk-helper-line .sk-error-text:empty,
  .sk-helper-line .sk-helper-text:empty,
  .sk-helper-line .sk-char-counter:empty {
    display: none;
  }
  
  .sk-helper-line .sk-char-counter {
    margin-left: auto;
  }
  
  .sk-helper-line .sk-helper-text,
  .sk-helper-line .sk-char-counter {
    color: var(--color-form-elements-helper-text);
  }
  
  .sk-helper-line .sk-error-text {
    color: var(--color-form-elements-label-error);
  }
  
  /* Extra Large Size */
  .sk-text-select.sk-xlarge .sk-event-group {
    height: 5.6rem;
  }
  
  /* Large Size */
  .sk-text-select.sk-large .sk-event-group {
    height: 4.8rem;
  }
  
  /* Small Size */
  .sk-text-select.sk-small .sk-event-group {
    height: 3.2rem;
    padding: 0 1.2rem;
  }
  
  .sk-text-select.sk-small .sk-floating-label {
    left: 1.2rem;
  }
  
  .sk-text-select.sk-small.sk-focus .sk-floating-label,
  .sk-text-select.sk-small.sk-valid .sk-floating-label,
  .sk-text-select.sk-small.sk-error .sk-floating-label,
  .sk-text-field.sk-small .sk-input:focus~.sk-floating-label {
    left: 0.8rem;
  }
  
  .sk-text-select.sk-xlarge .sk-floating-label,
  .sk-text-select.sk-xlarge .sk-selected-text,
  .sk-text-select.sk-large .sk-floating-label,
  .sk-text-select.sk-large .sk-selected-text {
    font-size: var(--font-size-base);
  }
  
  .sk-text-select.sk-xlarge.sk-focus .sk-floating-label,
  .sk-text-select.sk-xlarge.sk-valid .sk-floating-label,
  .sk-text-select.sk-xlarge.sk-error .sk-floating-label,
  .sk-text-select.sk-large.sk-focus .sk-floating-label,
  .sk-text-select.sk-large.sk-valid .sk-floating-label,
  .sk-text-select.sk-large.sk-error .sk-floating-label {
    font-size: 1.2rem
  }
  
  .sk-text-select .sk-event-group>.sk-icons {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    user-select: none;
    margin-right: -0.5rem;
    color: var(--color-form-elements-icon);
    flex-shrink: 0;
    transition: all 500ms ease;
  }
  
  @media (max-width: 768px) {
    .sk-text-select.sk-mobile-icon .sk-event-group>.sk-icons {
      margin-right: 0;
    }
  }
  
  .sk-text-select.sk-focus .sk-event-group>.sk-icons {
    transform: rotate(180deg);
  }
  
  .sk-text-select select+.sk-icons {
    position: absolute;
    right: 1.6rem;
    left: auto;
    pointer-events: none;
  }
  
  /* Text Select */
  /* Native Select :: BEGIN */
  .sk-text-select select,
  .sk-text-select .sk-selected-text {
    -webkit-appearance: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: normal;
    text-align: left;
    color: var(--color-form-elements-label);
  }
  
  .sk-text-select.sk-large select,
  .sk-text-select.sk-xlarge select {
    font-size: var(--font-size-base);
  }
  
  /* Native Select :: END */
  .sk-text-select .sk-overflow-list,
  .sk-text-field .sk-overflow-list {
    left: 0;
    min-width: 100%;
    max-width: 100%;
    max-height: 27rem;
    overflow: hidden;
    overflow-y: auto;
    overflow-y: overlay;
    top: calc(100% + 0.1rem);
  }
  
  .sk-overflow-list:empty {
    padding: 0;
  }
  
  .sk-text-select.sk-overflow-right .sk-overflow-list {
    left: auto;
    right: 0;
  }
  
  .sk-text-select .sk-overflow-list li {
    line-height: 1.2;
    white-space: normal;
    text-align: left;
    margin: 0;
    border-bottom: 0;
  }
  
  .sk-text-select .sk-selected-text img {
    margin-right: 1rem;
  }
  
  .sk-text-select .sk-overflow-list li img,
  .sk-text-select .sk-selected-text img {
    width: 2rem;
    height: 2rem;
    max-width: 2rem;
    max-height: 2rem;
  }
  
  /* Custom select multi select :: BEGIN */
  .sk-text-select .sk-chipset {
    margin: 0;
  }
  
  /* Custom select multi select :: END */
  .sk-text-select img {
    width: 2rem;
    height: 2rem;
    max-width: 2rem;
    max-height: 2rem;
  }
  
  .sk-text-select .sk-selected-text img {
    margin-right: 1rem;
  }
  
  /**************************************************/
  /* Text Select :: END */
  /**************************************************/
  /**************************************************/
  /* Text input field :: BEGIN */
  /**************************************************/
  .sk-text-field {
    position: relative;
  }
  
  .sk-text-field .sk-input {
    border: 0.1rem solid var(--color-form-elements-border);
    border-radius: var(--radius-base);
    width: 100%;
    font-size: 1.6rem;
    color: var(--color-form-elements-value);
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    background: var(--color-form-elements-bg);
    padding: 0 var(--gutter-base);
    height: 3.8rem
  }
  
  .sk-text-field .sk-input:hover {
    border: 0.1rem solid var(--color-form-elements-border-hover);
  }
  
  /* Input focus highlight border color */
  .sk-text-field .sk-input:focus {
    border: 0.1rem solid var(--color-form-elements-border-focus);
    outline: 0.2rem solid var(--color-form-elements-border-focus);
    outline-offset: -0.1rem;
  }
  
  /* Floating Label */
  .sk-text-field .sk-floating-label {
    position: absolute;
    top: .7rem;
    left: 1.6rem;
    z-index: 1;
    color: var(--color-form-elements-label);
    transition: all .2s;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    text-transform: inherit;
    pointer-events: none;
    font-size: 1.6rem;
    line-height: normal;
  }
  
  .sk-text-field.sk-large .sk-floating-label {
    top: 1.2rem;
    font-size: 1.6rem;
  }
  
  .sk-text-field.sk-leading-icon .sk-floating-label {
    left: 4.8rem;
  }
  
  .sk-text-field.sk-outlined-input .sk-input:focus+.sk-floating-label,
  .sk-text-field.sk-outlined-input .sk-textarea:focus+.sk-floating-label {
    color: var(--color-form-elements-label-focus);
  }
  
  .sk-text-field.sk-outlined-input .sk-input:focus+.sk-floating-label,
  .sk-text-field.sk-outlined-input .sk-input:valid+.sk-floating-label,
  .sk-text-field.sk-outlined-input .sk-input:read-only+.sk-floating-label,
  .sk-text-field.sk-outlined-input .sk-textarea:focus+.sk-floating-label,
  .sk-text-field.sk-outlined-input .sk-textarea:valid+.sk-floating-label,
  .sk-text-field.sk-outlined-input .sk-textarea:read-only+.sk-floating-label {
    top: -0.8rem;
    background: var(--color-form-elements-bg);
    font-weight: normal;
    z-index: 55;
    font-size: 1.2rem;
    padding: 0 0.4rem;
    left: 1.2rem;
    line-height: normal;
  }
  
  /* Input error highlight border color */
  .sk-text-field.sk-error .sk-input,
  .sk-text-field.sk-error .sk-textarea {
    border: 0.2rem solid var(--color-form-elements-border-error);
    outline: 0;
  }
  
  .sk-text-field.sk-error .sk-input:focus+.sk-floating-label,
  .sk-text-field.sk-error .sk-textarea:focus+.sk-floating-label {
    color: var(--color-form-elements-label-error);
  }
  
  .sk-text-field.sk-error .sk-floating-label {
    color: var(--color-danger);
  }
  
  /* Leading & Trailing icons & Text */
  .sk-text-field.sk-leading-icon .sk-icons,
  .sk-text-field.sk-trailing-icon .sk-icons,
  .sk-text-field.sk-trailing-icon .sk-button,
  .sk-text-field.sk-leading-text .sk-icons,
  .sk-text-field.sk-leading-text .sk-text {
    position: absolute;
    top: 2.4rem;
    transform: translateY(-2.4rem);
    width: 4.8rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    height: 3.8rem;
  }
  .sk-text-field .sk-text-inner {
    display: flex;
    justify-content: space-around;
    width: 100%;
    cursor: pointer;
  }
  .sk-text-field.sk-leading-text .sk-text-inner .sk-icons {
    border-right: 0;
  }
  .sk-text-field .sk-text .sk-icons {
    border-right: 0;
    position: static;
    height: auto;
    transform: none;
    width: 1.2rem;
    font-size: 2.2rem;
  }
  
  .sk-text-field.sk-large .sk-icons,
  .sk-text-field.sk-large .sk-button,
  .sk-text-field.sk-large .sk-text {
    height: 4.8rem;
  }
  
  .sk-text-field.sk-small .sk-icons,
  .sk-text-field.sk-small .sk-button,
  .sk-text-field.sk-small .sk-text {
    height: 3rem;
  }
  
  .sk-text-field.sk-trailing-icon .sk-icons~.sk-icons,
  .sk-text-field.sk-trailing-icon .sk-icons~.sk-button,
  .sk-text-field.sk-trailing-icon .sk-icons,
  .sk-text-field.sk-trailing-icon .sk-button {
    right: 0;
    left: auto;
    padding: 0;
    font-size: 2.2rem;
    color: var(--color-form-elements-icon);
  }
  
  .sk-text-field.sk-trailing-icon .sk-button,
  .sk-text-field.sk-trailing-icon .sk-icons~.sk-button {
    cursor: pointer;
  }
  
  .sk-text-field.sk-leading-icon .sk-icons {
    left: 0;
    right: auto;
    /* color: var(--color-primary); */
    color: var(--color-form-elements-icon);
    font-size: 2.2rem;
  }
  
  .sk-text-field.sk-leading-icon .sk-input {
    padding-left: 3.8rem;
  }
  
  .sk-text-field.sk-trailing-icon .sk-input {
    padding-right: 3.8rem;
  }
  
  /* Leading Text */
  .sk-text-field.sk-leading-text .sk-floating-label {
    left: 5.8rem;
    top: 1.4rem;
  }
  
  .sk-text-field.sk-leading-text .sk-icons,
  .sk-text-field.sk-leading-text .sk-text {
    border-right: 0.1rem solid var(--color-form-elements-border);
  }
  
  .sk-text-field.sk-disabled .sk-text {
    border-right: 0.1rem solid var(--color-form-elements-placeholder);
  }
  
  .sk-text-field.sk-leading-text.sk-disabled .sk-text {
    border-right: 0.1rem solid var(--color-form-elements-border-disabled);
    color: var(--color-form-elements-value-disabled);
  }
  
  .sk-text-field.sk-leading-text .sk-input {
    padding-left: 5.8rem;
  }
  
  .sk-text-field.sk-leading-text .sk-text {
    font-size: 1.6rem;
    font-family: var(--font-family-primary);
    color: var(--color-form-elements-icon);
  }
  
  /* Trailing Action Button */
  .sk-text-field .sk-button {
    min-width: 0;
    background-color: transparent;
    box-shadow: none;
  }
  
  .sk-text-field.sk-trailing-icon .sk-button .sk-icons {
    position: static;
    display: flex;
    align-items: center;
    transform: translate(0);
    color: var(--color-form-elements-icon-actionable);
  }
  
  /* Text Input Large */
  .sk-text-field.sk-large .sk-input {
    height: 4.8rem;
  }
  
  .sk-text-field.sk-xlarge .sk-input {
    height: 5.2rem;
  }
  
  .sk-text-field.sk-xlarge .sk-floating-label {
    top: 1.6rem;
  }
  
  .sk-text-field.sk-filled-input.sk-large .sk-input:focus+.sk-floating-label,
  .sk-text-field.sk-filled-input.sk-large .sk-input:valid+.sk-floating-label {
    top: 0.8rem;
  }
  
  .sk-text-field.sk-filled-input .sk-input:focus,
  .sk-text-field.sk-filled-input .sk-input:valid {
    padding-bottom: 0.8rem;
  }
  
  /* Text Input Small */
  .sk-text-field.sk-small .sk-input {
    height: 3.2rem;
  }
  
  
  .sk-text-field.sk-small .sk-input {
    padding: 0 1.2rem;
  }
  
  .sk-text-field.sk-small .sk-input:focus+.sk-floating-label,
  .sk-text-field.sk-small .sk-input:valid+.sk-floating-label {
    left: 0.8rem;
  }
  
  .sk-text-field.sk-small .sk-floating-label {
    top: 0.6rem;
    left: 1.2rem;
  }
  
  .sk-text-field.sk-filled-input.sk-small .sk-input:focus+.sk-floating-label,
  .sk-text-field.sk-filled-input.sk-small .sk-input:valid+.sk-floating-label {
    top: 0.2rem;
  }
  
  .sk-text-field.sk-filled-input.sk-small .sk-input:focus,
  .sk-text-field.sk-filled-input.sk-small .sk-input:valid {
    padding-top: 2rem;
  }
  
  .sk-text-field.sk-leading-icon.sk-small .sk-input {
    padding-left: 4.2rem;
  }
  
  .sk-text-field.sk-trailing-icon.sk-small .sk-input {
    padding-right: 4.2rem;
  }
  
  .sk-text-field.sk-filled-input.sk-leading-icon.sk-small .sk-input:focus+.sk-floating-label,
  .sk-text-field.sk-filled-input.sk-leading-icon.sk-small .sk-input:valid+.sk-floating-label,
  .sk-text-field.sk-leading-icon.sk-small .sk-floating-label {
    left: 4.2rem;
  }
  
  /* Text Field Disabled */
  .sk-text-field.sk-disabled {
    cursor: not-allowed;
  }
  
  .sk-text-field>input[disabled],
  .sk-text-field.sk-disabled>input,
  .sk-text-field>textarea[disabled],
  .sk-text-field.sk-disabled>textarea {
    pointer-events: none;
    color: var(--color-form-elements-value-disabled);
    border: 0.1rem solid var(--color-form-elements-border-disabled);
    cursor: not-allowed;
  }
  
  .sk-text-field>input[disabled]+.sk-floating-label,
  .sk-text-field.sk-disabled>input+.sk-floating-label,
  .sk-text-field>textarea[disabled]+.sk-floating-label,
  .sk-text-field.sk-disabled>textarea+.sk-floating-label {
    pointer-events: none;
    color: var(--color-form-elements-label-disabled);
  }
  
  .sk-text-field>input[disabled]+.sk-floating-label .sk-required,
  .sk-text-field.sk-disabled>input+.sk-floating-label .sk-required,
  .sk-text-field>textarea[disabled]+.sk-floating-label .sk-required,
  .sk-text-field.sk-disabled>textarea+.sk-floating-label .sk-required {
    color: var(--color-form-elements-label-disabled) !important;
  }
  
  .sk-text-field.sk-disabled {
    opacity: 1;
    pointer-events: all;
  }
  
  .sk-text-field.sk-disabled .sk-icons,
  .sk-text-field.sk-disabled .sk-button:not(.sk-button-edit),
  .sk-text-field.sk-disabled .sk-button:not(.sk-button-edit) .sk-icons {
    color: var(--color-form-elements-value-disabled);
    pointer-events: none;
  }
  
  .sk-text-field .sk-button .sk-icons {
    margin: 0;
  }
  
  /* Input placeholder */
  .sk-text-field .sk-input::placeholder,
  .sk-text-field .sk-textarea::placeholder {
    color: var(--color-form-elements-placeholder);
  }
  
  .sk-text-field .sk-input::-webkit-input-placeholder,
  .sk-text-field .sk-textarea::-webkit-input-placeholder {
    font-size: 1.6rem;
    color: var(--color-form-elements-label);
  }
  
  .sk-text-field .sk-input:-moz-placeholder,
  .sk-text-field .sk-textarea:-moz-placeholder {
    font-size: 1.6rem;
    opacity: 1;
  }
  
  .sk-text-field .sk-input::-moz-placeholder,
  .sk-text-field .sk-textarea::-moz-placeholder {
    font-size: 1.6rem;
    opacity: 1;
  }
  
  .sk-text-field .sk-input:-ms-input-placeholder,
  .sk-text-field .sk-textarea:-ms-input-placeholder {
    font-size: 1.6rem;
  }
  
  /* Input error placeholder */
  .sk-text-field.sk-error .sk-input::placeholder,
  .sk-text-field.sk-error textarea::placeholder {
    color: var(--color-form-elements-label-error);
  }
  
  .sk-text-field.sk-error .sk-input::-webkit-input-placeholder,
  .sk-text-field.sk-error textarea::-webkit-input-placeholder {
    color: var(--color-form-elements-label-error);
  }
  
  .sk-text-field.sk-error .sk-input:-moz-placeholder,
  .sk-text-field.sk-error textarea:-moz-placeholder {
    color: var(--color-form-elements-label-error);
  }
  
  .sk-text-field.sk-error .sk-input::-moz-placeholder,
  .sk-text-field.sk-error textarea::-moz-placeholder {
    color: var(--color-form-elements-label-error);
  }
  
  .sk-text-field.sk-error .sk-input:-ms-input-placeholder,
  .sk-text-field.sk-error textarea:-ms-input-placeholder {
    color: var(--color-form-elements-label-error);
  }
  
  /* Disabled Placeholder */
  .sk-text-field.sk-disabled .sk-input::-webkit-input-placeholder,
  .sk-text-field.sk-disabled .sk-textarea::-webkit-input-placeholder {
    color: var(--color-form-elements-label-disabled);
  }
  
  @media (min-width:768px) {
  
    .sk-text-field.sk-small .sk-input,
    .sk-text-field.sk-small label.sk-floating-label,
    .sk-text-select.sk-small .sk-event-group .sk-selected-text,
    .sk-text-select.sk-small .sk-event-group .sk-floating-label,
    .sk-autocomplete.sk-small .sk-event-group .sk-selected-text input,
    .sk-autocomplete.sk-small .sk-event-group .sk-floating-label {
      font-size: 1.4rem;
    }
  }
  
  .sk-text-field .sk-overflow-menu {
    position: static;
  }
  
  
  .sk-text-field.sk-large.sk-leading-text {
    height: 4.8rem;
  }
  
  .sk-text-field.sk-large .sk-text-inner {
    top: 2.7rem;
    position: absolute;
    transform: translateY(-1.5rem);
  }
  
  .sk-text-field.sk-large .sk-text-inner .sk-icons {
    height: auto;
  }
  
  /**************************************************/
  /* Text input field :: END */
  /**************************************************/
  
  /* sk-text-select varient size fornt icon padding & spacing css :: BEGIN  */
  .sk-text-select.sk-xlarge .sk-event-group .sk-icons:first-child {
    font-size: 2.4rem;
  }
  
  .sk-text-select.sk-large .sk-event-group .sk-icons:first-child {
    font-size: 2.2rem;
  }
  
  .sk-text-select.sk-small .sk-event-group .sk-icons:first-child {
    font-size: 1.6rem;
  }
  
  .sk-text-select .sk-event-group .sk-icons:first-child {
    font-size: 2rem;
    transform: rotate(0);
  }
  
  .sk-text-select .sk-event-group .sk-icons~.sk-floating-label {
    left: 3rem;
  }
  
  .sk-text-select.sk-valid .sk-event-group .sk-icons~.sk-floating-label,
  .sk-text-select.sk-focus .sk-event-group .sk-icons~.sk-floating-label {
    left: var(--gutter-base);
  }
  
  .sk-text-select select,
  .sk-text-select.sk-small .sk-selected-text {
    line-height: 1.4;
  }
  
  /* sk-text-select varient size fornt icon padding & spacing css :: END  */
  
  
  
  /* Datepicker icon css :: BEGIN  */
  .sk-text-field input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
  }
  
  .sk-text-field input[type=date]+.sk-button {
    pointer-events: none;
    padding-left: 1rem;
  }
  
  .sk-text-field input[type=date]+.sk-button .sk-icons {
    font-size: 1.8rem;
  }
  
  .sk-text-field input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  /* Datepicker icon css :: END  */
  
  
  /* Browser specific css code :: BEGIN  */
  
  @-moz-document url-prefix() {
    .sk-text-field input[type=date]+.sk-button {
      display: none;
    }
  }
  
  /* Browser specific css code :: END  */
  
  
  /* Dropdown bottom sheet css :: BEGIN  */
  .sk-overflow-list .sk-list-label {
    display: none;
  }
  
  @media (max-width: 768px) {
  
    /* bottom sheet css once click dropdown */
    .sk-overflow-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: var(--zindex-3);
      background: var(--color-white);
      box-shadow: var(--box-shadow-2);
      display: block;
    }
  
    /* bottom sheet css once click dropdown */
  
    /* bottom sheet absolute value change for height */
    .sk-overflow-bottom .sk-overflow-list {
      height: 100%;
      position: static;
      box-shadow: none;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
  
    .sk-overflow-list .sk-list-label {
      font-weight: var(--font-weight-bold, bold);
      padding: var(--gutter-base);
      display: block;
    }
  
    /* bottom sheet absolute value change for height */
  
    .sk-overflow-bottom .sk-overflow-list li {
      line-height: 2;
      font-size: 1.6rem;
    }
  
    .sk-overflow-bottom .sk-flex {
      padding: 1rem;
      align-items: center;
      justify-content: space-between;
      border-bottom: 0.1rem solid var(--color-border);
    }
  
    .sk-overflow-bottom .sk-flex .sk-button {
      background: transparent;
    }
  
    .sk-overflow-bottom .sk-backdrop {
      z-index: -1;
      display: none;
    }
  
    .sk-overflow-bottom :is(.sk-show)+.sk-backdrop {
      display: block;
    }
  }
  
  /* Dropdown bottom sheet css :: END  */
  
  /* Progress Bar Base Style */
  /* TODO :: HEX Code should be removed and variable names needs to be used */
  progress {
    --progress-track-bg-color: #eaeaea;
    height: 1rem;
    width: 100%;
  }
  
  progress,
  progress[value]::-webkit-progress-bar {
    background-color: var(--progress-track-bg-color);
    border-radius: var(--radius-pill);
    border: none !important;
  }
  
  progress,
  progress[value]::-webkit-progress-value {
    border-radius: var(--radius-pill);
    background-color: var(--progress-track-bg-color);
  }
  
  progress[value]::-webkit-progress-value {
    background-color: var(--color-warning);
  }
  
  /* Firefox Hacks */
  progress::-moz-progress-bar {
    background-color: var(--color-warning);
    border-radius: var(--radius-pill);
  }
  
  
  progress.progress-moderate[value]::-webkit-progress-value {
    background-color: var(--color-primary);
  }
  
  /* Firefox Hacks */
  progress::-moz-progress-bar {
    background-color: var(--color-warning);
    border-radius: var(--radius-pill);
  }
  
  .progress-moderate {
    color: var(--color-primary);
  }
  
  progress.progress-good[value]::-webkit-progress-value {
    background-color: var(--color-success);
  }
  
  /* Firefox Hacks */
  progress::-moz-progress-bar {
    background-color: var(--color-warning);
  }
  
  .progress-good {
    color: var(--color-success);
  }
  
  progress.progress-poor[value]::-webkit-progress-value {
    background-color: var(--color-danger);
  }
  
  /* Firefox Hacks */
  progress::-moz-progress-bar {
    background-color: var(--color-warning);
  }
  
  .progress-poor {
    color: var(--color-danger);
  }
  
  /* Progress Bar Base Style */
  
  
  /* Avatar css:: BEGIN */
  .sk-avatar {
    width: 3.8rem;
    height: 3.8rem;
    position: relative;
    background-color: var(--color-body-background);
    border-radius: var(--radius-round);
  }
  
  .sk-avatar .sk-avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-text-muted);
    width: 100%;
    height: 100%;
  }
  
  .sk-avatar img {
    border-radius: var(--radius-round);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .sk-avatar.sk-rounded {
    border-radius: var(--radius-base);
  }
  
  .sk-avatar.sk-rounded .sk-image {
    border-radius: var(--radius-base);
  }
  
  .sk-avatar.sk-small {
    width: 3.8rem;
    height: 3.8rem;
  }
  
  .sk-avatar.sk-small .sk-avatar-title {
    font-size: 1.6rem;
  }
  
  .sk-avatar.sk-large {
    width: 6.2rem;
    height: 6.2rem;
  }
  
  .sk-avatar.sk-large .sk-avatar-title {
    font-size: 2.4rem;
  }
  
  .sk-avatar .sk-badge {
    position: absolute;
    top: 0;
    left: 70%;
    font-size: 1rem;
    border-radius: var(--radius-large);
  }
  
  .sk-avatar .sk-badge .sk-icons {
    margin: 0;
    font-size: 1.4rem;
  }
  
  .sk-avatar .sk-badge:has(.sk-icons) {
    padding: 0rem;
  }
  
  .sk-avatar .sk-avatar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;
  }
  
  .sk-avatar .sk-avatar-icon .sk-icons {
    font-size: 2.4rem;
    color: var(--color-text-muted);
  }
  
  .sk-avatar .sk-avatar-label {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: normal;
  }
  
  /* Avatar random colors */
  .sk-avatar-multicolor .sk-avatar .sk-avatar-title {
    color: var(--color-white);
  }
  
  .sk-avatar-multicolor .sk-avatar-item:nth-child(10n+1) .sk-avatar,
  .sk-avatar-color-1 {
    background-color: #673AB7;
  }
  
  .sk-avatar-multicolor .sk-avatar-item:nth-child(10n+2) .sk-avatar,
  .sk-avatar-color-2 {
    background-color: #FF9800;
  }
  
  .sk-avatar-multicolor .sk-avatar-item:nth-child(10n+3) .sk-avatar,
  .sk-avatar-color-3 {
    background-color: #9C27B0;
  }
  
  .sk-avatar-multicolor .sk-avatar-item:nth-child(10n+4) .sk-avatar,
  .sk-avatar-color-4 {
    background-color: #3F51B5;
  }
  
  .sk-avatar-multicolor .sk-avatar-item:nth-child(10n+5) .sk-avatar,
  .sk-avatar-color-5 {
    background-color: #0591a3;
  }
  
  .sk-avatar-multicolor .sk-avatar-item:nth-child(10n+6) .sk-avatar,
  .sk-avatar-color-6 {
    background-color: #F44336;
  }
  
  .sk-avatar-multicolor .sk-avatar-item:nth-child(10n+7) .sk-avatar,
  .sk-avatar-color-7 {
    background-color: #2196F3;
  }
  
  .sk-avatar-multicolor .sk-avatar-item:nth-child(10n+8) .sk-avatar,
  .sk-avatar-color-8 {
    background-color: #E91E63;
  }
  
  .sk-avatar-multicolor .sk-avatar-item:nth-child(10n+9) .sk-avatar,
  .sk-avatar-color-9 {
    background-color: #009688;
  }
  
  .sk-avatar-multicolor .sk-avatar-item:nth-child(10n+10) .sk-avatar,
  .sk-avatar-color-10 {
    background-color: #4CAF50;
  }
  
  /* Avatar css:: END */
  
  /* Breadcrumbs :: BEGIN */
  .sk-breadcrumbs {
    margin-bottom: var(--gutter-base)
  }
  
  .sk-breadcrumbs a {
    cursor: pointer;
  }
  
  .sk-breadcrumbs a:after {
    content: "/";
    color: var(--color-text-muted);
    padding: 0 5px;
    cursor: text;
  }
  
  /* Breadcrumbs :: END */