.input{
  background:rgba(0,0,0,0) !important;
  background-color:rgba(0,0,0,0) !important;
  font-size:.9rem;
  padding:.3rem 0;
  border:none;
  border-bottom:1px solid #dee2ed;
  letter-spacing:1px;
  color:#485884;
  font-family:"Poppins",sans-serif;
  transition:border-color .3s ease
}

.input--block{
  display:block;
  width:100%
}

.input:focus{
  border-color:#7b8bb7;
  outline:none
}
.button{
  font-size:1rem;
  font-family:inherit;
  text-decoration:none;
  background-color:#8ac34a;
  color:#fff;
  outline:none;
  border:0;
  padding:12px 16px;
  cursor:pointer;
  border-radius:3px;
  white-space:nowrap;
  display:inline-flex
}

.button:hover{
  color:#fff
}

.button--small{
  font-size:.9rem;
  padding:8px 12px
}

.button--block{
  display:block
}

.button--secondary{
  background-color:#242c42
}

.button--full-width{
  display:block;
  width:100%
}

.button--wide{
  padding-left:40px;
  padding-right:40px
}
.login-page__header{
  font-size:2rem;
  text-align:center
}

.login-page-label{
  display:flex;
  align-items:center
}

.login-page-label__icon{
  height:26px
}

.login-page-error{
  font-size:.9rem;
  width:100%;
  display:flex;
  align-items:center;
  transition:all .2s ease-in-out
}

.login-page-error-enter{
  opacity:0;
  transform:translateY(20px);
  max-height:0
}

.login-page-error-enter-done{
  opacity:1;
  transform:translateY(0);
  max-height:100px
}

.login-page-error__icon{
  flex:none;
  color:#fff;
  background-color:#e84855;
  height:22px;
  width:22px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  font-weight:bold
}
.reports-page-content{
  max-width:100%;
  overflow-x:auto
}

.reports-page__header{
  font-size:2rem
}

.reports-page-table{
  width:100%
}
.language-menu{
  display:flex
}

.language-menu-option{
  cursor:pointer;
  margin-left:8px
}

.language-menu-option:first-child{
  margin-left:0
}
.header{
  height:56px;
  display:flex;
  align-items:stretch;
  border-bottom:1px solid #f2f3f8;
  padding:0 1.5rem
}

@media screen and (min-width: 1100px){
  .header{
    height:66px
  }
}

.header-left{
  display:flex;
  flex:auto
}

.header-right{
  flex:0;
  display:flex
}

.header-item{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  padding:0 .3rem
}

@media screen and (min-width: 1100px){
  .header-item{
    padding:0 .5rem
  }
}

.header-link{
  text-decoration:none;
  font-size:.9rem;
  font-weight:bold;
  color:#5a6ea5
}

.header-link__icon{
  height:16px;
  margin-right:3px
}

.header-home-link{
  color:#242c42
}

.header-language-menu{
  margin-right:12px
}
.report-page{
  padding-bottom:100px
}

.report-page__back{
  display:inline-block
}

.report-page__label{
  font-size:.9rem;
  font-weight:bold
}

.report-page__value{
  margin-bottom:.7rem
}

.report-page__comments{
  margin-top:40px
}

.report-page__table-header{
  margin-top:26px;
  font-weight:bold
}

.report-page__feedback{
  margin-top:26px
}
.wide-page-header{
  flex:none;
  width:100%
}

.wide-page-main{
  padding:2rem 1.2rem;
  width:100%
}

@media(min-width: 800px){
  .wide-page-main{
    padding:3rem 1rem
  }
}
.loader{
  font-size:10px;
  text-indent:-9999em;
  width:3rem;
  height:3rem;
  border-radius:50%;
  background:#8ac34a;
  background:linear-gradient(to right, #8ac34a 10%, rgba(244, 18, 18, 0) 42%);
  position:relative;
  -webkit-animation:load3 1.4s infinite linear;
  animation:load3 1.4s infinite linear;
  transform:translateZ(0)
}

@media(min-width: 800px){
  .loader{
    width:5rem;
    height:5rem
  }
}

.loader:before{
  width:50%;
  height:50%;
  background:#8ac34a;
  border-radius:100% 0 0 0;
  position:absolute;
  top:0;
  left:0;
  content:""
}

.loader:after{
  background:#fff;
  width:75%;
  height:75%;
  border-radius:50%;
  content:"";
  margin:auto;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0
}

@-webkit-keyframes load3{
  0%{
    transform:rotate(0deg)
  }

  100%{
    transform:rotate(360deg)
  }
}

@keyframes load3{
  0%{
    transform:rotate(0deg)
  }

  100%{
    transform:rotate(360deg)
  }
}
.loading-screen{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center
}
.home-page__header{
  font-size:2rem;
  font-weight:bold
}

.home-page-content{
  font-family:"Roboto Slab",serif;
  font-size:1.2rem
}

.home-page-content table{
  margin:50px auto 0
}

.home-page-content ul{
  padding:0;
  margin-top:26px;
  list-style:disc inside
}

.home-page-content li{
  margin-bottom:8px;
  line-height:1.55em
}

.home-page-content h1,.home-page-content h2,.home-page-content h3,.home-page-content h4,.home-page-content h5{
  font-family:"Poppins",sans-serif;
  font-size:1.8rem;
  font-weight:bold;
  margin-top:50px
}

.home-page-content p{
  margin-top:26px
}

.home-page-content h3+p{
  margin-top:12px
}

.home-page-table__td--separator{
  width:20px
}

.home-page-table th{
  font-weight:bold;
  padding:8px
}

.home-page-table td{
  padding:8px;
  width:auto;
  text-align:center
}

.home-page__button{
  display:inline-block
}

.home-page__image{
  display:inline-block;
  margin:25px 15px 5px 0
}
.cancelled-page{
  height:100%;
  display:flex;
  flex-direction:column
}

.cancelled-page__nickname{
  font-size:1.6rem
}

.cancelled-page-buttons{
  display:flex;
  justify-content:flex-end
}
.survey-page__header{
  font-size:2rem
}

.survey-page__label{
  display:block
}

.survey-page__input{
  display:block;
  width:100%
}

.survey-page-error{
  font-size:.9rem;
  width:100%;
  display:flex;
  align-items:center
}

.survey-page-error__icon{
  flex:none;
  color:#fff;
  background-color:#e84855;
  height:20px;
  width:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  font-weight:bold
}
.self-test-entry-page-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center
}

.self-test-entry-page__icon{
  margin-bottom:1rem
}

.self-test-entry-page__message{
  margin-bottom:1rem
}
.small-content-page{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column
}

.small-content-page-header{
  flex:none;
  width:100%
}

.small-content-page-main{
  flex:auto;
  padding:2rem 1.2rem;
  overflow:auto;
  display:flex;
  justify-content:center;
  align-items:center
}
.video-clip-player{
  position:relative;
  width:100%;
  height:100%
}

.video-clip-player__video{
  position:absolute;
  width:100%;
  height:100%;
  transform:translateX(-5000px)
}

.video-clip-player__video--next{
  transform:translateX(0);
  z-index:100
}

.video-clip-player__video--current{
  transform:translateX(0);
  z-index:90
}
.modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column
}

.modal__overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#364263;
  opacity:70%
}

.modal-content{
  position:relative;
  display:flex;
  justify-content:center;
  flex-direction:column;
  background:#fff;
  padding:55px 25px 35px;
  width:100%;
  max-width:550px
}

.modal__close{
  position:absolute;
  top:0;
  right:0;
  height:40px;
  width:40px;
  padding:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,0);
  outline:none;
  border:none
}

.modal__close:hover{
  background-color:#242c42
}

.test-progress-bar{
  position:absolute;
  top:0px;
  left:0;
  width:100%;
  z-index:200
}

.test-cycles{
  padding:15px;
  position:absolute;
  top:20px;
  right:50%;
  transform:translateX(50%);
  background-color:#fff;
  border-radius:3px;
  z-index:200
}

.test-results{
  display:flex;
  flex-direction:column;
  align-items:center
}

.test-results-main{
  margin-bottom:20px
}

.test-results-list__item{
  margin:10px 0
}

.test-results-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:400;
  width:100%;
  border-radius:2px;
  padding:20px
}

.watermark{
  font-size:4rem;
  font-weight:bold;
  color:#fff;
  opacity:60%;
  text-transform:uppercase
}
.self-test-instruction__message{
  white-space:pre-wrap
}
.progress-bar{
  position:relative;
  display:block;
  border:1px solid #8ac34a;
  height:2rem;
  width:100%;
  border-radius:3px;
  background-color:#fff
}

.progress-bar__fill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  background-color:#8ac34a;
  display:block;
  transition-property:width;
  transition-timing-function:linear
}

.progress-bar__label{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:bold;
  font-size:.75rem;
  letter-spacing:.5px
}
.test-title-page{
  height:100%;
  display:flex;
  flex-direction:column
}

.test-title-page-content{
  display:flex;
  flex-direction:column;
  align-items:center
}

.test-title-page__icon{
  width:100px;
  margin-bottom:20px
}
.completed-page{
  height:100%;
  display:flex;
  flex-direction:column
}

.completed-page-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}
.results-page{
  display:flex;
  flex-direction:column
}

.results-page-content{
  padding-top:50px;
  padding-bottom:100px
}

.results-page__image{
  margin:25px auto 5px;
  display:block
}
.radio-button{
  display:flex
}

.radio-button-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  border-top:1px solid #e5e8f1;
  border-left:1px solid #e5e8f1;
  border-bottom:1px solid #e5e8f1;
  padding:15px;
  cursor:pointer
}

.radio-button-item:last-of-type{
  border-right:1px solid #e5e8f1
}

.radio-button-item:hover{
  background-color:#f5f6fa
}

.radio-button__label{
  text-align:center;
  font-size:.9rem
}

.radio-button__circle{
  position:relative;
  display:block;
  height:15px;
  width:15px;
  border-radius:15px;
  border:2px solid #242c42;
  outline:none;
  padding:0
}

.radio-button__circle:focus{
  outline:none
}

.radio-button__circle--highlighted{
  background-color:#8ac34a
}

.radio-button-item-bottom{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:10px
}
.tipi-page-error{
  font-size:.9rem;
  width:100%;
  display:flex;
  align-items:center
}

.tipi-page-error__icon{
  flex:none;
  color:#fff;
  background-color:#e84855;
  height:20px;
  width:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  font-weight:bold
}

.tipi-page-select{
  margin-right:5px;
  padding:3px 5px;
  outline:none
}

.tipi-page__statement-begin{
  margin-bottom:20px
}

.tipi-page__data-disclosure{
  font-size:.9rem
}
.tips-page-content{
  line-height:1.55em;
  font-family:"Roboto Slab",serif;
  font-size:1.2rem;
  white-space:pre-wrap
}

.tips-page__image{
  margin:25px 15px 5px 0;
  display:block
}
html{
  line-height:1.15;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
}

main{
  display:block;
}

h1{
  font-size:2em;
  margin:0.67em 0;
}

hr{
  box-sizing:content-box;
  height:0;
  overflow:visible;
}

pre{
  font-family:monospace, monospace;
  font-size:1em;
}

a{
  background-color:transparent;
}

abbr[title]{
  border-bottom:none;
  text-decoration:underline;
  text-decoration:underline dotted;
}

b,
strong{
  font-weight:bolder;
}

code,
kbd,
samp{
  font-family:monospace, monospace;
  font-size:1em;
}

small{
  font-size:80%;
}

sub,
sup{
  font-size:75%;
  line-height:0;
  position:relative;
  vertical-align:baseline;
}

sub{
  bottom:-0.25em;
}

sup{
  top:-0.5em;
}

img{
  border-style:none;
}

button,
input,
optgroup,
select,
textarea{
  font-family:inherit;
  font-size:100%;
  line-height:1.15;
  margin:0;
}

button,
input{
  overflow:visible;
}

button,
select{
  text-transform:none;
}

button,
[type="button"],
[type="reset"],
[type="submit"]{
  -webkit-appearance:button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{
  border-style:none;
  padding:0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring{
  outline:1px dotted ButtonText;
}

fieldset{
  padding:0.35em 0.75em 0.625em;
}

legend{
  box-sizing:border-box;
  color:inherit;
  display:table;
  max-width:100%;
  padding:0;
  white-space:normal;
}

progress{
  vertical-align:baseline;
}

textarea{
  overflow:auto;
}

[type="checkbox"],
[type="radio"]{
  box-sizing:border-box;
  padding:0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{
  height:auto;
}

[type="search"]{
  -webkit-appearance:textfield;
  outline-offset:-2px;
}

[type="search"]::-webkit-search-decoration{
  -webkit-appearance:none;
}

::-webkit-file-upload-button{
  -webkit-appearance:button;
  font:inherit;
}

details{
  display:block;
}

summary{
  display:list-item;
}

template{
  display:none;
}

[hidden]{
  display:none;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre{
  margin:0;
}

button{
  background-color:transparent;
  background-image:none;
}

button:focus{
  outline:1px dotted;
  outline:5px auto -webkit-focus-ring-color;
}

fieldset{
  margin:0;
  padding:0;
}

ol,
ul{
  list-style:none;
  margin:0;
  padding:0;
}

html{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height:1.5;
}

*,
::before,
::after{
  box-sizing:border-box;
  border-width:0;
  border-style:solid;
  border-color:#e2e8f0;
}

hr{
  border-top-width:1px;
}

img{
  border-style:solid;
}

textarea{
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:#a0aec0;
}

button,
[role="button"]{
  cursor:pointer;
}

table{
  border-collapse:collapse;
}

h1,
h2,
h3,
h4,
h5,
h6{
  font-size:inherit;
  font-weight:inherit;
}

a{
  color:inherit;
  text-decoration:inherit;
}

button,
input,
optgroup,
select,
textarea{
  padding:0;
  line-height:inherit;
  color:inherit;
}

pre,
code,
kbd,
samp{
  font-family:Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object{
  display:block;
  vertical-align:middle;
}

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

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

.bg-white {
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}

.bg-green-700 {
  --bg-opacity: 1;
  background-color: #2f855a;
  background-color: rgba(47, 133, 90, var(--bg-opacity));
}

.rounded {
  border-radius: 0.25rem;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.hidden {
  display: none;
}

.font-bold {
  font-weight: 700;
}

.p-3 {
  padding: 0.75rem;
}

.static {
  position: static;
}

.absolute {
  position: absolute;
}

.bottom-0 {
  bottom: 0;
}

.left-1\/2 {
  left: 50%;
}

.resize {
  resize: both;
}

.text-center {
  text-align: center;
}

.text-white {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
}

.transform {
  --transform-translate-x: 0;
  --transform-translate-y: 0;
  --transform-rotate: 0;
  --transform-skew-x: 0;
  --transform-skew-y: 0;
  --transform-scale-x: 1;
  --transform-scale-y: 1;
  transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
}

.-translate-x-1\/2 {
  --transform-translate-x: -50%;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

html,body{
  height:100%;
  font-family:"Poppins",sans-serif;
  font-size:16px;
  color:#242c42;
  position:relative;
  width:100%
}

@media screen and (min-width: 1100px){
  html,body{
    font-size:18px
  }
}

p{
  line-height:1.55em
}

#app{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}

.content-w-1{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
  width:100%
}

.content-w-2{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  width:100%
}

.content-h-auto{
  width:100%;
  padding:50px 15px 200px
}

.content-h-screen{
  height:100%;
  width:100%;
  padding:15px;
  display:flex;
  justify-content:center;
  align-items:center
}

.table{
  border-spacing:0 0;
  border-radius:3px
}

.table--full{
  width:100%
}

.thead{
  background-color:#fcfcfd;
  color:#5a6ea5
}

.th{
  border:1px solid #f2f3f8;
  padding:9px 12px;
  text-align:left;
  font-size:.9rem
}

.td{
  border:1px solid #f2f3f8;
  padding:.5rem
}

.content{
  padding-left:15px;
  padding-right:15px;
  margin-left:auto;
  margin-right:auto;
  width:100%
}

@media screen and (min-width: 700px){
  .content{
    width:700px
  }
}

@media screen and (min-width: 1100px){
  .content{
    width:1100px
  }
}

@media screen and (min-width: 700px){
  .content--narrow{
    width:500px
  }
}

@media screen and (min-width: 1100px){
  .content--narrow{
    width:500px
  }
}

.clearfix::after{
  content:"";
  clear:both;
  display:table
}

.label{
  display:block;
  margin:.5rem 0;
  font-weight:400
}

.row{
  float:left;
  width:100%
}

.row:first-of-type{
  margin-top:0
}

.column{
  float:left;
  width:100%;
  display:flex;
  padding-bottom:20px
}

@media(min-width: 1100px){
  .column{
    width:50%;
    padding-bottom:35px;
    padding-left:35px
  }

  .column:first-child{
    padding-left:0
  }

  .column:nth-child(3n+1){
    padding-left:0
  }
}

@media screen and (min-width: 1100px){
  .column{
    width:33.3333333333%
  }

  .column:first-child{
    padding-left:0
  }

  .column:nth-child(3n+1){
    padding-left:35px
  }

  .column:nth-child(3n+1){
    padding-left:0
  }
}

.full-height-image{
  position:relative;
  height:100%;
  width:auto;
  margin-left:auto;
  margin-right:auto;
  display:block
}

.full{
  position:relative;
  height:100%;
  width:100%
}

.full-screen{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:100%
}

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

.center-x{
  margin-left:auto;
  margin-right:auto
}

.fill-parent{
  height:100%;
  width:100%
}

.z-layer-1{
  z-index:100
}

.z-layer-8{
  z-index:800
}

.z-layer-9{
  z-index:900
}

.flex-center-children{
  display:flex;
  align-items:center;
  justify-content:center
}

.no-space{
  position:absolute
}

.top-left{
  left:0;
  top:0
}

.popup-size{
  width:80%
}

@media screen and (min-width: 800px){
  .popup-size{
    width:50%
  }
}

.block{
  display:block
}

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

.flex-center-secondary{
  align-items:center
}

.text-center{
  text-align:center
}

.flex-row{
  display:flex
}

.space-bottom{
  margin-bottom:20px
}

.space-left-s{
  margin-left:10px
}

.space-left-max{
  margin-left:auto
}

.space-right-s{
  margin-right:10px
}

.mg-b-1{
  margin-bottom:4px
}

.mg-b-2{
  margin-bottom:8px
}

.mg-b-3{
  margin-bottom:12px
}

.mg-b-4{
  margin-bottom:16px
}

.mg-b-5{
  margin-bottom:20px
}

.mg-b-6{
  margin-bottom:26px
}

.mg-b-7{
  margin-bottom:32px
}

.mg-b-8{
  margin-bottom:38px
}

.mg-b-9{
  margin-bottom:44px
}

.mg-b-10{
  margin-bottom:50px
}

.mg-t-1{
  margin-top:4px
}

.mg-t-2{
  margin-top:8px
}

.mg-t-3{
  margin-top:12px
}

.mg-t-4{
  margin-top:16px
}

.mg-t-5{
  margin-top:20px
}

.mg-t-6{
  margin-top:26px
}

.mg-t-7{
  margin-top:32px
}

.mg-t-8{
  margin-top:38px
}

.mg-t-9{
  margin-top:44px
}

.mg-t-10{
  margin-top:50px
}

.mg-r-1{
  margin-right:4px
}

.mg-r-2{
  margin-right:8px
}

.mg-r-3{
  margin-right:12px
}

.mg-r-4{
  margin-right:16px
}

.mg-r-5{
  margin-right:20px
}

.mg-r-6{
  margin-right:26px
}

.mg-r-7{
  margin-right:32px
}

.mg-r-8{
  margin-right:38px
}

.mg-r-9{
  margin-right:44px
}

.mg-r-10{
  margin-right:50px
}

.link:hover{
  color:#8ac34a
}

.screen-edge-gut{
  padding-left:15px;
  padding-right:15px
}

.scroll-bottom-space{
  padding-bottom:100px
}

@media screen and (min-width: 1100px){
  .scroll-bottom-space{
    padding-bottom:200px
  }
}

@media (min-width: 640px) {
  .sm\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    .sm\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .sm\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .sm\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .sm\:container {
      max-width: 1280px;
    }
  }
}

@media (min-width: 768px) {
  .md\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    .md\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .md\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .md\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .md\:container {
      max-width: 1280px;
    }
  }
}

@media (min-width: 1024px) {
  .lg\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    .lg\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .lg\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .lg\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .lg\:container {
      max-width: 1280px;
    }
  }
}

@media (min-width: 1280px) {
  .xl\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    .xl\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .xl\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .xl\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .xl\:container {
      max-width: 1280px;
    }
  }
}