@font-face {
  font-family: 'TT Hoves';
  src: url('/etc/clientlibs/clean/dependencies/fonts/tthoves/TT-Hoves-Bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Hoves';
  src: url('/etc/clientlibs/clean/dependencies/fonts/tthoves/TT-Hoves-SemiBold.woff2') format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Hoves';
  src: url('/etc/clientlibs/clean/dependencies/fonts/tthoves/TT-Hoves-Medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #00c0e8;
  --gradientblue1: #020e15;
  --gradientblue2: #0c527b;
  --black: black;
  --white: white;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid !important;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  color: #fff;
  background-color: #000;
  padding-bottom: 60px;
  font-family: Decimal Pro, Arial, sans-serif;
  font-size: 18px;
  line-height: 24px;
}

.page-bg,
.animation-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page-bg {
  z-index: 0;
}

.animation-wrapper {
  z-index: 1;
  overflow: hidden;
  filter: brightness(1.35) saturate(1.25);
}

.particle,
.particle::after {
  background: transparent;
}

.particle {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(120, 235, 255, 1);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.particle-alt-1,
.particle-alt-2,
.particle-alt-3,
.particle-alt-4 {
  top: 220px;
}

.particle-1.particle-alt-1 {
  animation-duration: 75s;
  animation-delay: -10s;
}

.particle-2.particle-alt-2 {
  animation-duration: 150s;
  animation-delay: -25s;
}

.particle-3.particle-alt-3 {
  animation-duration: 220s;
  animation-delay: -40s;
}

.particle-4.particle-alt-4 {
  animation-duration: 700s;
  animation-delay: -140s;
}

.particle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 4800px;
  background: transparent;
  box-shadow: inherit;
}

.particle-1 {
  width: 6px;
  height: 6px;
  opacity: 1;
  box-shadow:
    117px 161px rgba(255,255,255,0.35), 288px 635px rgba(0,192,232,0.35), 444px 214px rgba(255,255,255,0.22),
    647px 277px rgba(0,192,232,0.28), 820px 183px rgba(255,255,255,0.20), 975px 976px rgba(0,192,232,0.26),
    1067px 33px rgba(255,255,255,0.20), 1196px 125px rgba(0,192,232,0.24), 1341px 722px rgba(255,255,255,0.16),
    1506px 143px rgba(0,192,232,0.22), 1677px 181px rgba(255,255,255,0.14), 1837px 829px rgba(0,192,232,0.20),
    1912px 134px rgba(255,255,255,0.12), 1970px 495px rgba(0,192,232,0.18),
    2140px 1120px rgba(255,255,255,0.14), 2380px 320px rgba(0,192,232,0.22), 2590px 840px rgba(255,255,255,0.12),
    2810px 120px rgba(0,192,232,0.20), 3040px 680px rgba(255,255,255,0.10), 3275px 1040px rgba(0,192,232,0.18),
    3490px 430px rgba(255,255,255,0.12), 3680px 960px rgba(0,192,232,0.18), 3895px 210px rgba(255,255,255,0.10),
    4120px 760px rgba(0,192,232,0.16), 4360px 1180px rgba(255,255,255,0.10), 4580px 540px rgba(0,192,232,0.14),
    4720px 980px rgba(255,255,255,0.08);
  animation: animParticleX 60s linear infinite;
  animation-delay: -30s;
}

.particle-2 {
  width: 8px;
  height: 8px;
  opacity: 0.95;
  box-shadow:
    140px 180px rgba(0,192,232,0.28), 360px 360px rgba(255,255,255,0.18), 580px 160px rgba(0,192,232,0.24),
    820px 420px rgba(255,255,255,0.14), 1060px 200px rgba(0,192,232,0.22), 1280px 380px rgba(255,255,255,0.12),
    1500px 140px rgba(0,192,232,0.20), 1720px 420px rgba(255,255,255,0.10),
    220px 860px rgba(0,192,232,0.18), 480px 720px rgba(255,255,255,0.12), 760px 980px rgba(0,192,232,0.16),
    1040px 760px rgba(255,255,255,0.10), 1320px 920px rgba(0,192,232,0.14), 1600px 740px rgba(255,255,255,0.08),
    1980px 1040px rgba(0,192,232,0.14), 2240px 260px rgba(255,255,255,0.10), 2510px 820px rgba(0,192,232,0.12),
    2790px 520px rgba(255,255,255,0.08), 3080px 1120px rgba(0,192,232,0.12), 3360px 340px rgba(255,255,255,0.08),
    3650px 880px rgba(0,192,232,0.10), 3920px 160px rgba(255,255,255,0.06), 4180px 980px rgba(0,192,232,0.10),
    4460px 640px rgba(255,255,255,0.06), 4700px 1220px rgba(0,192,232,0.08);
  animation: animParticleX 120s linear infinite;
  animation-delay: -60s;
}

.particle-3 {
  width: 10px;
  height: 10px;
  opacity: 0.85;
  box-shadow:
    260px 260px rgba(255,255,255,0.16), 740px 320px rgba(0,192,232,0.18), 1120px 280px rgba(255,255,255,0.12),
    1560px 340px rgba(0,192,232,0.14), 520px 860px rgba(255,255,255,0.12), 980px 820px rgba(0,192,232,0.14),
    1440px 900px rgba(255,255,255,0.10), 1760px 780px rgba(0,192,232,0.12),
    2060px 1080px rgba(255,255,255,0.10), 2440px 420px rgba(0,192,232,0.12), 2920px 940px rgba(255,255,255,0.08),
    3300px 260px rgba(0,192,232,0.10), 3720px 840px rgba(255,255,255,0.08), 4180px 1120px rgba(0,192,232,0.10);
  animation: animParticleX 180s linear infinite;
  animation-delay: -90s;
}

.particle-4 {
  width: 6px;
  height: 6px;
  opacity: 0.75;
  box-shadow:
    96px 640px rgba(255,255,255,0.12), 260px 780px rgba(0,192,232,0.16), 420px 930px rgba(255,255,255,0.08),
    610px 720px rgba(0,192,232,0.14), 780px 910px rgba(255,255,255,0.08), 980px 760px rgba(0,192,232,0.12),
    1140px 860px rgba(255,255,255,0.08), 1310px 710px rgba(0,192,232,0.12), 1490px 940px rgba(255,255,255,0.06),
    1640px 760px rgba(0,192,232,0.10), 1790px 900px rgba(255,255,255,0.06),
    2010px 1100px rgba(0,192,232,0.08), 2290px 280px rgba(255,255,255,0.06), 2570px 820px rgba(0,192,232,0.08),
    2860px 560px rgba(255,255,255,0.06), 3140px 1280px rgba(0,192,232,0.08), 3420px 360px rgba(255,255,255,0.06),
    3710px 980px rgba(0,192,232,0.08), 3990px 160px rgba(255,255,255,0.05), 4280px 1180px rgba(0,192,232,0.07),
    4560px 700px rgba(255,255,255,0.05), 4740px 1320px rgba(0,192,232,0.06);
  animation: animParticleX 600s linear infinite;
  animation-delay: -300s;
}

@keyframes animParticleX {
  from { transform: translate3d(-4800px, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .particle {
    animation: none;
  }
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  padding-left: 50px;
  font-size: 42px;
  font-weight: 700;
  line-height: 50px;
  color: white;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 500;
  line-height: 38px;
  color: white;
}

h3 {
  margin-top: 0;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  color: white;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  color: white;
}

li {
  padding-bottom: 10px;
}

.section {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

.section.results {
  filter: blur(16px);
}

.logoarea {
  text-align: center;
  background-image: linear-gradient(#000, #0000);
  padding-top: 20px;
  padding-bottom: 100px;
}

.blue {
  color: var(--blue);
}

.introarea {
  background-image: url('/content/dam/pan/en_US/includes/igw/prisma-browser-checklist/images/photo.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 400px;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.panel {
  border-top: 1px solid var(--blue);
  background-image: linear-gradient(180deg, var(--gradientblue1), var(--gradientblue2));
  border-radius: 20px;
  margin-bottom: 20px;
  padding: 50px;
}

.link-block {
  display: block;
}

.link {
  display: block;
}

.iconblock {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.grid2panel {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
}

.icon {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}

.button {
  background-color: var(--blue);
  color: var(--black);
  cursor: pointer;
  border-radius: 50px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 35px;
  display: inline-block;
  text-decoration: none;
  border: none;
  font-family: Decimal Pro, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: var(--white);
  text-decoration: none;
}

.w-button {
  display: inline-block;
  padding: 10px 40px;
  text-decoration: none;
  line-height: inherit;
}

.grid3panel {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.checkbox {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.checklist-item {
  width: 24px;
  height: 24px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #262626;
  border: 2px solid var(--blue);
  border-radius: 4px;
  position: relative;
  margin: 0;
  flex-shrink: 0;
}

.checklist-item:checked {
  background-color: var(--blue);
}

.checklist-item:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.heading {
  font-size: 24px;
  line-height: 28px;
}

.center {
  text-align: center;
}

.bigrisklevel {
  color: var(--blue);
  margin-bottom: 30px;
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
}

.bigicon {
  width: 60px;
  height: 60px;
  margin-right: 20px;
}

.margbotm40 {
  margin-bottom: 40px;
}

.instructions {
  color: var(--blue);
  margin-bottom: 20px;
}

.link {
  color: #fff;
  text-decoration: none;
}
.link:hover, .link-block:hover {
  text-decoration: none;
  color: #fff;
}
.restart {
  color: var(--blue);
  margin-bottom: 40px;
}

#rivanimation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#risk-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  max-width: 600px;
}

#checklist {
  display: none;
}

.introh2 {
  color: var(--blue);
  padding-left: 50px;
}

.list {
  list-style-type: none;
}

#results .list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 10px;
  padding-left: 0;
}

#selection-counter {
  margin-top: 20px;
  text-align: left;
}

.listchecked {
  color: var(--blue);
  background-image: url('/content/dam/pan/en_US/includes/igw/prisma-browser-checklist/images/circle-check.svg');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: auto;
  padding-left: 25px;
}

.listunchecked {
  background-image: url('/content/dam/pan/en_US/includes/igw/prisma-browser-checklist/images/circle-x.svg');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-left: 25px;
}

#selection-counter {
  padding-left: 0px;
}

.marbotm20 {
  margin-bottom: 20px;
}

.link-block {
  color: var(--white);
  text-decoration: none;
}

@media screen and (max-width: 991px) {
  h1 {
    padding-left: 20px;
    font-size: 36px;
    line-height: 44px;
  }

  .logoarea {
    padding-bottom: 40px;
  }

  .introarea {
    background-size: cover;
    min-height: 300px;
    margin-bottom: 20px;
    padding-bottom: 60px;
  }

  .grid2panel, .grid3panel {
    grid-template-columns: 1fr;
  }

  .heading-2 {
    font-size: 36px;
    line-height: 42px;
  }

  .introh2 {
    padding-left: 20px;
  }

  .assessment {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 32px;
    line-height: 40px;
  }

  .bigrisklevel {
    font-size: 36px;
    line-height: 44px;
  }

  .introh2 {
    font-size: 26px;
    line-height: 34px;
  }
}

@media screen and (max-width: 479px) {
  .introarea {
    background-position: 0 100%;
  }

  .panel {
    padding: 20px;
  }

  .button {
    padding-left: 20px;
    padding-right: 20px;
  }

  .bigrisklevel {
    font-size: 30px;
    line-height: 36px;
  }

  .bigicon {
    width: 40px;
    height: 40px;
  }

  .assessment {
    padding-left: 21px;
    padding-right: 21px;
  }

  .list {
    padding-left: 0;
  }

  #results .list {
    grid-template-columns: 1fr;
  }
}