object-browser/portal-ui/public/styles/root-styles.css

/*Lato Font import*/

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato/Lato-BlackItalic.eot");
  src: url("./fonts/Lato/Lato-BlackItalic.eot?#iefix")
      format("embedded-opentype"),
    url("./fonts/Lato/Lato-BlackItalic.woff2") format("woff2"),
    url("./fonts/Lato/Lato-BlackItalic.woff") format("woff"),
    url("./fonts/Lato/Lato-BlackItalic.ttf") format("truetype"),
    url("./fonts/Lato/Lato-BlackItalic.svg#Lato-BlackItalic") format("svg");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato/Lato-Bold.eot");
  src: url("./fonts/Lato/Lato-Bold.eot?#iefix") format("embedded-opentype"),
    url("./fonts/Lato/Lato-Bold.woff2") format("woff2"),
    url("./fonts/Lato/Lato-Bold.woff") format("woff"),
    url("./fonts/Lato/Lato-Bold.ttf") format("truetype"),
    url("./fonts/Lato/Lato-Bold.svg#Lato-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato/Lato-BoldItalic.eot");
  src: url("./fonts/Lato/Lato-BoldItalic.eot?#iefix")
      format("embedded-opentype"),
    url("./fonts/Lato/Lato-BoldItalic.woff2") format("woff2"),
    url("./fonts/Lato/Lato-BoldItalic.woff") format("woff"),
    url("./fonts/Lato/Lato-BoldItalic.ttf") format("truetype"),
    url("./fonts/Lato/Lato-BoldItalic.svg#Lato-BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato/Lato-Light.eot");
  src: url("./fonts/Lato/Lato-Light.eot?#iefix") format("embedded-opentype"),
    url("./fonts/Lato/Lato-Light.woff2") format("woff2"),
    url("./fonts/Lato/Lato-Light.woff") format("woff"),
    url("./fonts/Lato/Lato-Light.ttf") format("truetype"),
    url("./fonts/Lato/Lato-Light.svg#Lato-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato/Lato-Black.eot");
  src: url("./fonts/Lato/Lato-Black.eot?#iefix") format("embedded-opentype"),
    url("./fonts/Lato/Lato-Black.woff2") format("woff2"),
    url("./fonts/Lato/Lato-Black.woff") format("woff"),
    url("./fonts/Lato/Lato-Black.ttf") format("truetype"),
    url("./fonts/Lato/Lato-Black.svg#Lato-Black") format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato/Lato-Italic.eot");
  src: url("./fonts/Lato/Lato-Italic.eot?#iefix") format("embedded-opentype"),
    url("./fonts/Lato/Lato-Italic.woff2") format("woff2"),
    url("./fonts/Lato/Lato-Italic.woff") format("woff"),
    url("./fonts/Lato/Lato-Italic.ttf") format("truetype"),
    url("./fonts/Lato/Lato-Italic.svg#Lato-Italic") format("svg");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato Hairline";
  src: url("./fonts/Lato/Lato-Hairline.eot");
  src: url("./fonts/Lato/Lato-Hairline.eot?#iefix") format("embedded-opentype"),
    url("./fonts/Lato/Lato-Hairline.woff2") format("woff2"),
    url("./fonts/Lato/Lato-Hairline.woff") format("woff"),
    url("./fonts/Lato/Lato-Hairline.ttf") format("truetype"),
    url("./fonts/Lato/Lato-Hairline.svg#Lato-Hairline") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato/Lato-Regular.eot");
  src: url("./fonts/Lato/Lato-Regular.eot?#iefix") format("embedded-opentype"),
    url("./fonts/Lato/Lato-Regular.woff2") format("woff2"),
    url("./fonts/Lato/Lato-Regular.woff") format("woff"),
    url("./fonts/Lato/Lato-Regular.ttf") format("truetype"),
    url("./fonts/Lato/Lato-Regular.svg#Lato-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato Hairline";
  src: url("./fonts/Lato/Lato-HairlineItalic.eot");
  src: url("./fonts/Lato/Lato-HairlineItalic.eot?#iefix")
      format("embedded-opentype"),
    url("./fonts/Lato/Lato-HairlineItalic.woff2") format("woff2"),
    url("./fonts/Lato/Lato-HairlineItalic.woff") format("woff"),
    url("./fonts/Lato/Lato-HairlineItalic.ttf") format("truetype"),
    url("./fonts/Lato/Lato-HairlineItalic.svg#Lato-HairlineItalic")
      format("svg");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato/Lato-LightItalic.eot");
  src: url("./fonts/Lato/Lato-LightItalic.eot?#iefix")
      format("embedded-opentype"),
    url("./fonts/Lato/Lato-LightItalic.woff2") format("woff2"),
    url("./fonts/Lato/Lato-LightItalic.woff") format("woff"),
    url("./fonts/Lato/Lato-LightItalic.ttf") format("truetype"),
    url("./fonts/Lato/Lato-LightItalic.svg#Lato-LightItalic") format("svg");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato/Lato-Thin.eot");
  src: url("./fonts/Lato/Lato-Thin.eot?#iefix") format("embedded-opentype"),
    url("./fonts/Lato/Lato-Thin.woff2") format("woff2"),
    url("./fonts/Lato/Lato-Thin.woff") format("woff"),
    url("./fonts/Lato/Lato-Thin.ttf") format("truetype"),
    url("./fonts/Lato/Lato-Thin.svg#Lato-Thin") format("svg");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  background-color: #fff;
  font-family: "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#loader-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#loader-block .loader-svg-container {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 15px;
  animation: loader-container-keyframes 1.4s linear infinite;
}

#loader-block .loader-svg-container .loader-style {
  stroke: #073052;
  animation: animation-keyframes 1.4s ease-in-out infinite;
  stroke-dasharray: 80px, 200px;
  stroke-dashoffset: 0px;
}

@keyframes animation-keyframes {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0px;
  }
  50% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
  }
  100% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -125px;
  }
}

@keyframes loader-container-keyframes {
  0% {
    transform-origin: 50% 50%;
  }
  100% {
    transform: rotate(360deg);
  }
}