@font-face {
  font-family: 'sys-user';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/fa-solid-900.eot");
  src: url("../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.woff") format("woff"), url("../fonts/fa-solid-900.ttf") format("truetype"), url("../fonts/fa-solid-900.svg#fontawesome") format("svg");
}

.fa, .fas, .sys-icon {
    font-family:"sys-user", sans-serif;
    font-weight:500;
    font-style:normal;
    font-size: 20px;
}

@font-face {
  font-family: 'sys-user-far';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fa-regular-400.eot");
  src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"), url("../fonts/fa-regular-400.svg#fontawesome") format("svg"); 
}

.far, .sys-icon.far {
    font-family:"sys-user-far", sans-serif;
    font-weight:400; 
    font-style:normal;
}

@font-face {
    font-family: 'sys-user-fab';
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/fa-brands-400.eot");
    src: url("../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.woff") format("woff"), url("../fonts/fa-brands-400.ttf") format("truetype"), url("../fonts/fa-brands-400.svg#fontawesome") format("svg"); 
}

.fab, .sys-icon.fab {
    font-family:'sys-user-fab';
    font-style:normal;
}

@font-face {
    font-family: 'sys-user-fal';
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/fa-light-300.eot");
    src: url("../fonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-light-300.woff2") format("woff2"), url("../fonts/fa-light-300.woff") format("woff"), url("../fonts/fa-light-300.ttf") format("truetype"), url("../fonts/fa-light-300.svg#fontawesome") format("svg");
}

.fal, .sys-icon.fal {
    font-family:'sys-user-fal';
    font-weight:300;
    font-style:normal;
}

@font-face {
    font-family: 'sys-user-fad';
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url("../fonts/fa-duotone-900.eot");
    src: url("../fonts/fa-duotone-900.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-duotone-900.woff2") format("woff2"), url("../fonts/fa-duotone-900.woff") format("woff"), url("../fonts/fa-duotone-900.ttf") format("truetype"), url("../fonts/fa-duotone-900.svg#fontawesome") format("svg");
}

.fad, .sys-icon.fad {
    position: relative;
    font-family:'sys-user-fad';
    font-weight:900;
    font-style:normal;
    vertical-align:baseline !important;
}

.fad:before, .sys-icon.fad:before {
  position: absolute;
  color: var(--fa-primary-color, inherit);
  opacity: 1;
  opacity: var(--fa-primary-opacity, 1); 
}

.fad:after, .sys-icon.fad:after {
  color: var(--fa-secondary-color, inherit);
  opacity: 0.4;
  opacity: var(--fa-secondary-opacity, 0.4); 
}