.app-inner.app-inner__custom#app-inner {
  padding-bottom: 0 !important;
}

.b-section.b-section__content#content {
  padding-top: 0 !important;
}

.life-situations {
  --summer-night: #0B1F33;
  --text-helper: #66727F;
  --gray: #EDF2FE;
  --calcestruzzo: #D1D5DF;
  --gosblue: #0D4CD3;
  --dark-gosblue: #0B3BA1;
  --blu-digitale: #4D83FA;
  --background-light: #FAFCFF;
  --background-blue: #D2DFFB;
  --background-rect: white;
  --yellow-background-color: #FEF0CC;
  --orange-color-block: #FF8A00;
  --default-gap: 30px;
  --default-margin-top: 30px;
  --line-app: #99B1E6;
  --banner-image: none;
  --banner-background: none;
  --banner-message-color: var(--summer-night);
  --size-icon-color-block: 24px;
  --box-shadow-style: 0 1px 4px #E3EBFC, 0 24px 48px rgba(230, 235, 245, 0.4);

  --font-h4: bold 20px/28px 'Lato-Bold';
  --plain-text: 16px/24px 'Lato-Regular';
  --plain-small: 14px/20px 'Lato-Regular';
  --plain-bold: bold 14px/20px 'Lato-Bold';
}

@font-face {
  font-family: "Lato-Regular";
  font-style: normal;
  font-weight: 400;
  src: local("Lato-Regular-v2"),
  url("./fonts/Lato-Regular-v2.woff2") format("woff2");
}

@font-face {
  font-family: "Lato-Bold";
  font-style: normal;
  font-weight: 700;
  src: local("Lato-Bold-v2"),
  url("./fonts/Lato-Bold-v2.woff2") format("woff2");
}

body {
  margin: 0;
}

.life-situations {
  color: var(--summer-night);
  font: var(--plain-text);
}

.banner-new {
  background: var(--banner-background, white);
  height: 250px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.banner-message {
  color: var(--banner-message-color);
  margin: var(--form-margin-left);
  flex-basis: 80%;
}

.banner-print {
  background-image: var(--banner-image, none);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  width: 50%;
  height: 250px;
  margin-right: var(--form-margin-left);
}

a {
  cursor: pointer;
}

.step-topic + .step-content {
  margin-top: 30px;
}

.step-list {
  display: flex;
  flex-direction: column;
}

.step-list:first-child {
  margin-top: 24px;
}

.info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--default-gap);
}

.life-situations > .content,.blue > .content, .green > .content {
  margin: 0 var(--form-margin-left);
}

.content > .content, .content > .info {
  margin: 50px auto;
}

 .content > .content {
  align-items: center;
  gap: var(--default-gap);
}

.content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: var(--summer-night);
}

.content > a, .link {
  color: var(--gosblue);
}

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

.rect {
  display: flex;
  background-color: white;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  border-radius: 15px;
  border: 2px solid #f3f6fd;
  gap: var(--default-gap);
  justify-content: space-between;
  box-shadow: var(--box-shadow-style);
}

.rect.rect-w-icon {
  padding: 24px;
}

.rect-w-icon {
  flex-direction: row;
  align-items: flex-start;

}

.rect h1, .rect h2, .rect h3 {
  margin-top: 0;
}

.rect a {
  text-decoration: underline;
  color: var(--gosblue);
}

.rect .list {
  margin: 0;
}

h1 {
  font: bold 36px/40px 'Lato-Bold';
  margin: 0;
}

h2 {
  font: bold 32px/40px 'Lato-Bold';
  margin: 0;
}

h3 {
  font: bold 24px/32px 'Lato-Bold';
  margin: 0;
}

h4 {
  font: bold 20px/28px 'Lato-Bold';
  margin: 0;
}

h5 {
  font: bold 18px/24px 'Lato-Bold';
  margin: 0;
}

h6 {
  font: bold 16px/24px 'Lato-Bold';
  margin: 0;
}

.plain-text, .plain-text-through {
  font: 16px/24px 'Lato-Regular';
}

.plain-text-through {
  text-decoration: line-through;
}

.plain-small {
  font: 14px/20px 'Lato-Regular';
}

.plain-bold {
  font: bold 14px/20px 'Lato-Bold';
}

.banner {
  width: 100%;
  height: 220px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

ol li::marker {
  color: var(--blu-digitale);
  font-weight: bold;
}

.list {
  margin: 30px;
  font: var(--plain-text);
  min-height: 101px;
}

.button {
  border-radius: 10px;
  font: var(--plain-text);
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px 14px 40px;
  vertical-align: middle;
  text-align: center;
}


.button-blue {
  border: 2px solid var(--gosblue);
  color: white !important;
  background-color: var(--gosblue) !important;
}

.button-blue:hover {
  background-color: var(--dark-gosblue) !important;
}

a.button-blue {
  text-decoration: none;
}

.button-white {
  border: 2px solid var(--gosblue) !important;
  color: var(--gosblue) !important;
}

.button-block {
  display: flex;
  justify-content: space-evenly;
  gap: var(--default-gap);
  align-items: stretch;
}

li {
  margin-bottom: 5px;
}

.step-content {
  line-height: 1.6;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--default-gap);
}

.mt10 {
  margin-top: 10px;
}

.mt {
  margin-top: 30px;
}

.step, .finish-step {
  display: block;
  position: relative;
  padding-bottom: 60px;
}

.step-info {
  margin-left: 80px;
  margin-top: 10px;
}

.h370px {
  height: 370px;
}

.preview-image {
  position: sticky;
  box-sizing: border-box;
  border: 2px solid #D2DFFB;
  border-radius: 12px;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}

.show {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  border: none;
  right: 0;
  background-position: 50% 50%;
  background-size: contain;
  width: calc(60vh * 1.6);
  height: auto;
  max-height: 70vh;
  transform: translate(calc(calc(100vw - 96vh) / 2), 40%);
}

.step:after {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  left: 20px;
  top: 55px;
  bottom: -10px;
  background-image: linear-gradient(180deg, #fff 40%, var(--sidebar-line, var(--gosblue)) 40%);
  background-size: 1px 15px;
  background-repeat: repeat;
}

.sidebar-icon {
  position: absolute;
  top: 14px;
  fill: var(--sidebar-line);
}

.content-list {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--default-gap);
}

.content-columns {
  width: 45%;
  display: flex;
  flex-direction: column;
  min-width: 350px;
  gap: var(--default-gap);
}

.two-columns {
  width: var(--two-columns-rect-width);
}

.color-block {
  width: auto;
  border-radius: 12px;
  box-shadow: var(--box-shadow-style);
  display: flex;
  padding: 20px;
  min-width: 220px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  flex-direction: column;
  align-items: center;
}

.color-block > .color-block {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  box-shadow: none;
  gap: 5px;
  flex-wrap: nowrap;
}

.color-block .color-block:not(.white-block) {
  padding: 0;
}

.color-block > .color-block > .color-block-content {
  width: calc(100% - calc(var(--size-icon-color-block) + 2px));
}

.color-block > .color-block-content > .color-block {
  flex-direction: row;
}

.color-block svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.color-block.top-align {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.color-block.center-align {
  align-items: center;
  flex-wrap: nowrap;
}

.color-block-icon {
  width: var(--size-icon-color-block);
  height: var(--size-icon-color-block);
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.gray-block {
  background-color: #EDF2FE;
}

.gray-block svg, .white-block svg {
  fill: var(--gosblue);
}

.white-block {
  color: var(--gosblue);
  background-color: white;
}

.yellow-block {
  background-color: var(--yellow-background-color);
}

.yellow-block svg {
  fill: var(--orange-color-block);
}

.shadow {
  position: fixed;
  background-color: gray;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 80%;
}

.life-situation-popup {
  position: fixed;
  left: 0;
  top: 120px;
  margin: 1vh calc(calc(100vw - 900px) / 2);
  z-index: 10;
  max-width: 900px;
}

.life-situation-popup > .rect {
  padding: 24px;
}

/* Quest*/
.quest-page {
  display: flex;
  flex-direction: column;
}

.quest-block {
  display: flex;
  flex-direction: column;
  margin: 30px auto 50px;
  max-width: 900px;
  gap: 30px;
}

.quest-block + .color-block.gray-block {
  padding: 12px 24px;
  position: inherit;
  margin: 40px 0 40px calc(100% - 320px);
}

.answer-options {
  width: 100%;
  display: flex;
  gap: 30px;
  flex-direction: column;
}

.option {
  box-shadow: var(--box-shadow-style);
  background-color: white;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 400px;
}

.option-text {
  padding: 14px 20px;
  text-align: left;
  color: var(--gosblue);
  font: var(--plain-text);
}

.option:hover {
  background-color: var(--gosblue);
}

.option:hover .option-text {
  color: white;
}

.option:after {
  content: url("/images/pgu2/svg/itc/life_situations/opeka/right.svg");
  margin: auto 20px;
}

.option:hover:after {
  content: url("/images/pgu2/svg/itc/life_situations/opeka/right-white.svg");
}

.w25 {
  width: 25%;
}

.w30 {
  width: 30% ;
}

.w50 {
  width: 50%;
}

.w80 {
  width: 80% ;
}

.w90 {
  width: 90% ;
}

.w100 {
  width: 100%;
}

.last-block  {
  margin-bottom: 200px!important;
}

@media screen and (max-width: 1400px) {
  .w50 {
    width: 100%;
  }
}

@media screen and (max-width: 849px) {
  .banner-print {
    display: none;
  }
}