@import "/bss/javax.faces.resource/assets/css/reset.css.xhtml";
@import "/bss/javax.faces.resource/assets/css/theme.css.xhtml";
@import "/bss/javax.faces.resource/assets/css/header.css.xhtml";
@import "/bss/javax.faces.resource/assets/css/toast.css.xhtml";
@import "/bss/javax.faces.resource/assets/css/modal.css.xhtml";
@import "/bss/javax.faces.resource/assets/css/form.css.xhtml";
@import "/bss/javax.faces.resource/assets/css/icons.css.xhtml";
@import "/bss/javax.faces.resource/assets/css/buttons.css.xhtml";


html {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

body {
  text-rendering: optimizeLegibility;
  font-family: "Verdana", sans-serif;
  padding: 50px 20px 25px;
  position: relative;
  background-color: var(--vtal-theme-baseGray-celeste);
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body.imgBg {
  background-image: url("/bss/javax.faces.resource/assets/imgs/nds-bg-mobile.png.xhtml");
  background-repeat: no-repeat;
  background-size: cover;
}

body main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body main > p {
  margin: 0px 0px 8px;
  font-size: 16px;
  color: var(--vtal-theme-baseGray-Cod);
  max-width: 320px;
}

body.imgBg main > p {
  color: var(--vtal-theme-white);
}

body main > p a {
  color: var(--vtal-theme-white);
}

body.imgBg main > ul.rulesList {
  color: var(--vtal-theme-white);
}

body main > ul.rulesList {
  padding-left: 16px;
  align-self: flex-start;
  transition: all 0.5s ease;
}

body main > ul.rulesList li.ruleItem.fulfilled {
  color: var(--vtal-theme-baseFeedback-positive);
  position: relative;
  transition: all 0.5s ease;
  list-style-type: none;
}

body main > ul.rulesList li.ruleItem.fulfilled::before {
  content: "\2713";
  position: absolute;
  left: -18px;
}

body main > ul.rulesList li.ruleItem.missed {
  color: var(--vtal-theme-baseFeedback-negative);
  position: relative;
  transition: all 0.5s ease;
  list-style-type: none;
}

body main > ul.rulesList li.ruleItem.missed::before {
  content: "\00d7";
  position: absolute;
  left: -18px;
}

@media only screen and (min-width: 768px) {
  body {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  body.imgBg {
    background-image: url("/bss/javax.faces.resource/assets/imgs/nds-bg-tablet.png.xhtml");
  }

  body main {
    width: 320px;
    margin: 0 auto;
  }

  body.imgBg main {
    align-items: center;
  }

  /* body.imgBg main > p {
    text-align: center;
  } */
}

@media only screen and (min-width: 1024px) {
  body {
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
    max-height: 100vh;
  }

  body.imgBg {
    align-items: flex-end;
    padding-right: 12vw;
    background-image: url("/bss/javax.faces.resource/assets/imgs/nds-bg-desktop.png.xhtml");
    background-position: right center;
  }

  body.imgBg main {
    align-items: flex-start;
    margin: unset;
  }
}