* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Neo components / Styled components does this */
html {
  font-size: 14px;
}
:root {
  /* PRIMARY COLORS */
  --teal-25: #ecf8f6;
  --teal-50: #e0f4f1;
  --teal-100: #b1e3db;
  --teal-200: #7dd1c4;
  --teal-300: #45bead;
  --teal-400: #00af9a;
  --teal-500: #00a089;

  /* SECONDARY COLORS */
  --blue-50: #e0f3f7;
  --blue-100: #b1e1eb;
  --blue-200: #81cddf;
  --blue-300: #56bad3;
  --blue-400: #38accd;
  --blue-500: #1a9ec8;
  --blue-600: #0f91bb;
  --blue-700: #007fa9;
  --blue-800: #006e96;

  /* NEUTRAL COLORS */
  --white: #fff;
  --white-gray: #f9fafb;
  --bright-gray: #e5e8e9;
  --powder-blue: #d4dce2;
  --cloud-gray: #97aaba;
  --blue-gray: #5e788d;
  --lightest-slate: #51677b;
  --light-slate: #3d4e5c;
  --dark-slate: #29343d;
  --dark-gray: #1d252c;
  --pale-gray: #f3f5f7;

  /* RISK LEVEL COLORS */
  --low-risk: #57b748;
  --medium-risk: #f3e614;
  --high-risk: #ff8c1d;
  --critical-risk: #ff3c1c;
  --info-blue: #16ade3;

  /* ADDITIONAL DUP COLORS*/
  --light-pink: #fef1f2;
  --palest-green: #f0f9ec;
  --off-white: #fffce6;
  --ice-blue: #ecf7f9;
  --mid-pink: #fde2e4;
  --mid-purple: #9480ff;
  --reorder-border: #9380ff40;

  /* TEXT COLORS */
  --main-text: var(--dark-slate);
  --dark-text: var(--dark-gray);
  --secondary-text: var(--light-slate);
  --link-text: var(--teal-400);
  --platform-header-height: 2.86rem;
  --platform-sidebar-width: 14.29rem;
  --platform-expanded-sidebar-header-width: calc(14.29rem + 1.5rem);
  --platform-sidebar-width-collapsed: 4rem;
  --platform-current-sidebar-width: var(--platform-sidebar-width);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiI2B.woff2)
    format("woff2");
  unicode-range:
    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZthiI2B.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZNhiI2B.woff2)
    format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZxhiI2B.woff2)
    format("woff2");
  unicode-range:
    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZBhiI2B.woff2)
    format("woff2");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZFhiI2B.woff2)
    format("woff2");
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

html p,
html span,
html div,
html input,
html a,
html button,
html label,
* {
  font-family: "Inter", sans-serif !important;
}

body {
  background-color: #f3f5f7 !important;
  padding-top: var(--platform-header-height);
}

body.iframe-app.menu-open {
  position: relative;
}

body.iframe-app.menu-open:after {
  position: absolute;
  content: "";
  height: calc(100vh - (var(--platform-header-height)));
  width: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}

#shell-alert {
  position: relative;
  height: calc(100vh - (var(--platform-header-height)));
}

#shell-alert .shell-alert {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.shell-alert {
  max-width: 767px;
  width: 100%;
  line-height: 1.4;
  text-align: center;
  padding: 15px;
}

.shell-alert .shell-alert-icon {
  position: relative;
  height: 150px;
}

.err-icon-height {
  height: 130px;
}

.shell-alert h2 {
  font-family: kanit, sans-serif;
  font-size: 33px;
  font-weight: 200;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 16px;
  letter-spacing: 3px;
}

.shell-alert p {
  font-family: kanit, sans-serif;
  font-size: 16px;
  font-weight: 200;
  margin-top: 0;
  margin-bottom: 25px;
}

.shell-alert a {
  font-family: kanit, sans-serif;
  color: #00af9a;
  font-weight: 200;
  text-decoration: none;
  border-bottom: 1px dashed #00af9a;
  border-radius: 2px;
}
.Toastify .Toastify__toast-container--top-center {
  top: 3.2rem !important;
}

@media only screen and (max-width: 480px) {
  .shell-alert .shell-alert-icon {
    position: relative;
    height: 168px;
  }

  .shell-alert .shell-alert-icon h1 {
    font-size: 142px;
  }

  .shell-alert h2 {
    font-size: 22px;
  }
}

.skeleton-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas:
    "header header"
    "sidemenu content";
  grid-template-columns: var(--platform-sidebar-width) 1fr;
  grid-template-rows: var(--platform-header-height) 1fr;
  z-index: 999999;
  background-color: #f3f5f7;
  transition: opacity 0.3s ease;
}

.skeleton-loader .header-skeleton {
  grid-area: header;
  background-color: #29343d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.skeleton-loader .sidemenu-skeleton {
  grid-area: sidemenu;
  background-color: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.skeleton-loader .circle-loader-container {
  grid-area: content;
  display: flex;
  justify-content: center;
  flex-direction: column;
  animation: 0.2s ease 0s 1 forwards fade-in;
}

.skeleton-loader .skeleton-item {
  width: 80%;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(230, 232, 233, 0.5) 0%,
    #e6e8e9 68.27%,
    rgba(230, 232, 233, 0.5) 100%
  );
  margin: 12px 0;
  animation: skeleton-item-gradient 4s linear 0s infinite forwards;
}

.skeleton-loader .skeleton-item.small {
  width: 50%;
  margin: 6px 0;
}

.header-skeleton .skeleton-item {
  opacity: 20%;
  width: 15%;
}

.circle-skeleton-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 14px;
  padding: 24px;
  position: absolute;
  top: var(--platform-header-height);
  left: var(--platform-sidebar-width);
  width: calc(100vw - var(--platform-sidebar-width));
}

.circle-skeleton-container .skeleton-item {
  width: 15%;
}

.circle-loader {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.skeleton-loader .f-loader,
.global-loader .f-loader {
  width: 60px;
  height: 60px;
  padding: 12px;
  transform: none;
}

.skeleton-loader .loading-text,
.global-loader .loading-text {
  font-size: 12px;
  font-weight: bold;
  color: #97aaba;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 62vh;
}
.skeleton-loader .loading-dsc-text,
.global-loader .loading-dsc-text {
  font-weight: bold;
  font-size: 16px;
  color: var(--teal-400);
  padding: 0;
  margin: 0;
  position: absolute;
  top: 65vh;
}
.global-loader .loading-text {
  top: calc(62vh - var(--platform-header-height));
}
.global-loader .loading-dsc-text {
  top: calc(65vh - var(--platform-header-height));
}

.circle-loader .f-loader-container {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid var(--bright-gray);
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50%;
}

@keyframes skeleton-item-gradient {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

.skeleton-loader circle {
  fill: none;
  stroke: var(--teal-300);
  stroke-width: 6px;
  stroke-dashoffset: 450;
  stroke-dasharray: 450;
  animation: circle-progress 2s ease 1 forwards;
}

.skeleton-loader .circle-2 {
  stroke: var(--teal-100);
  stroke-dashoffset: 0;
  animation: none;
}

.skeleton-loader .circle-svg {
  position: absolute;
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  transform: rotate(-90deg);
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes circle-progress {
  0% {
    stroke-dashoffset: 450;
  }
  60% {
    stroke-dashoffset: 200;
  }
  90% {
    stroke-dashoffset: 40;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.f-loader-container:has(.third-loader) {
  border: none;
}

/* HTML: <div class="loader"></div> */
.third-loader {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--teal-100);
  border-right-color: var(--teal-400);
  animation: l2 1s infinite linear;
  position: absolute;
}
@keyframes l2 {
  to {
    transform: rotate(1turn);
  }
}