@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap');
body {
    height: 100vh;
}

.flex {
    display: flex;
}

.full-h {
    height: 100%;
}

.full-w {
    width: 100%;
}

.max-h-350 {
    max-height: 350px;
}

.max-h-460 {
    max-height: 460px;
}

.max-w-600 {
    max-width: 600px!important;
}

.max-w-490 {
    width: 490px!important;
    max-width: 490px!important;
}

.max-w-460 {
    width: 300px!important;
    max-width: 300px!important;
}

.max-w-270 {
    width: 270px!important;
    max-width: 270px!important;
}

.container-full-right {
    position: relative;
    height: 100%;
    position: relative;
    animation-name: allAnimR;
    animation-duration: 3s;
}

.container-full{
    position: relative;
    height: 100%;
    position: relative;
    animation-name: allAnim;
    animation-duration: 3s;
}
.container-mask{
    position: relative;
    animation-name: cover6Anim;
    animation-duration: 3s;
}
@keyframes allAnim {
    0% {
      left: 0px;
      top: -500px;
    }
    100% {
      left: 0px;
      top: 0px;
    }
    }
@keyframes allAnimR {
0% {
  left: -500px;
  top: 0px;
}
100% {
  left: 0px;
  top: 0px;
}
}
@keyframes cover6Anim {
    0% {
      left: 0px;
      top: -500px;
    }
    100% {
      left: 0px;
      top: 0px;
    }
  }
.bg-green {
    background-color: #5AA152;
}

.bg-blue {
    background-color: #00A1D5!important;
}
.bg-orange {
    background-color: #f89e1e!important;
}

.bg-yellow{
    background-color: #fcd404!important;
}

.left-header {
    width: 14vw;
    max-width: 100px;
    height: 100%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: auto;
}

.right-header {
    width: 14vw;
    max-width: 100px;
    height: 100%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    right: 0%;
    left: auto;
}

.border-right-line {
    border-right: 2px solid #000000;
}

.border-left-line {
    border-left: 2px solid #000000;
}

.border-green {
    border-color: #5AA152!important;
}

.border-blue {
    border-color: #00A1D5!important;
}
.border-orange {
    border-color: #f89e1e!important;
}
.border-yellow {
    border-color: #fcd404!important;
}

.page-number__wrapper {
    position: relative;
    margin-top:30%;
    margin-left: 20%;
    margin-right: -20%;
    border: 1.5px solid #000000;
    padding-right: 20%;
    padding-block: 3px;
    font-size: 22px;
    z-index: 1;
}

.page-number-right__wrapper {
    position: relative;
    margin-top:30%;
    margin-right: 20%;
    margin-left: -20%;
    border: 1.5px solid #000000;
    padding-left: 20%;
    padding-block: 3px;
    font-size: 22px;
    z-index: 1;
}

.page-number-triangle {
    position: absolute;
    bottom:-20%;
    max-width: 20%;
    height: 100%;
}

.container-full {
    margin-left: 140px;
    margin-right: 20px;
    height: 100%;
    max-width: 800px;
}

.container-full-right {
    margin-right: 140px;
    margin-left: 20px;
    height: 100%;
    max-width: 800px;
    float: right;
}

.bordered-title {
    width: 100%;
    min-width: 200px;
    max-width: 200px;
    padding: 5px 5px 1px 5px;
    background-color: #5AA152;
    border: 2px solid #000000;
    border-left: 0;
}

.bordered-title-right {
    width: 100%;
    min-width: 200px;
    max-width: 200px;
    padding: 5px 5px 1px 5px;
    background-color: #5AA152;
    border: 2px solid #000000;
    border-right: 0;
    float: right;
}

.bordered-content {
    width: 100%;
    font-size: 14px;
    min-width: 400px;
    max-width: 400px;
}

.bordered-content-right {
    width: 100%;
    font-size: 14px;
    min-width: 400px;
    max-width: 400px;
}

.half-border-content__wrapper {
    width: 100%;
}

.bordered {
    border: 2px solid #000000;
}

.container-full .bordered {
    max-width: 400px;
}

.divider {
    height: 1px;
    width: 100%;
    background-color: #5AA152;
}

@media only screen and (max-width: 550px) {
  .container-full {
    margin-left: 70px;
  }
  .container-full-right {
    margin-right: 70px;
  }
  .left-header {
      width: 30px;
  }
  .right-header {
      width: 30px;
  }
}

@media only screen and (max-width: 400px) {
  .container-full {
    margin-left: 40px;
  }
  .container-full-right {
    margin-right: 40px;
  }
  .left-header {
      width: 30px;
  }
  .right-header {
      width: 30px;
  }
}