@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body.modalwcs__opened {
  overflow: hidden;
}

main#eg_wcs {
  background: #efefef;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-family: "Fira Sans", sans-serif;
  margin: 0 auto;
  max-width: 1000px;
  min-height: 100vh;
  padding: 10px;
}
main#eg_wcs button {
  background: #0169ac;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
  padding: 10px;
  text-transform: uppercase;
}
main#eg_wcs button.btn--hidden {
  display: none;
}
main#eg_wcs figure.flag {
  display: inline-block;
  width: 20%;
  margin: 5px;
}
main#eg_wcs form {
  background-color: #cfcfcf;
  color: #a4a4a4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
main#eg_wcs h1 {
  color: #0169ac;
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 20px;
  text-align: center;
  width: 100%;
  max-height: 10vh;
}
main#eg_wcs h1::before {
  border: 2px solid #0169ac;
  content: "";
  display: block;
  margin: 0 auto;
  width: 10%;
}
main#eg_wcs h2 {
  color: #101e3f;
  font-size: 32px;
  font-weight: bold;
  margin: 0 0 10px;
  text-align: center;
  width: 100%;
}
main#eg_wcs .country_name {
  color: #101e3f;
  text-transform: uppercase;
}
main#eg_wcs .team_item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 0;
  width: 100%;
}
main#eg_wcs .team_item .flag {
  width: 20%;
}
main#eg_wcs .team_item .flag img {
  border: 1px solid #a4a4a4;
}
main#eg_wcs .team_item .country_name {
  font-size: 18px;
  font-weight: 500;
  word-break: keep-all;
}
main#eg_wcs .team_item__text {
  display: inline-block;
  margin: 0;
  width: 70%;
}
main#eg_wcs #steps {
  min-height: 90vh;
  position: relative;
  width: 100%;
}
main#eg_wcs .step {
  display: none;
}
main#eg_wcs .step--active {
  display: block;
}
main#eg_wcs #pots {
  border: 1px solid #cfcfcf;
  text-align: center;
  width: 100%;
}
main#eg_wcs #pots form {
  overflow: hidden;
}
main#eg_wcs #pots form .pot_option__label {
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 0;
  text-transform: uppercase;
  width: 50%;
}
main#eg_wcs #pots form .pot_option__label:first-child {
  border-right: 1px solid #a4a4a4;
}
main#eg_wcs #pots form .pot_option__label--selected {
  background: #0169ac;
  color: #fff;
}
main#eg_wcs #pots form input[type=radio] {
  display: none;
}
main#eg_wcs #pots #pot_list {
  background: #f8f8f8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
}
main#eg_wcs #pots #pot_list h2 {
  color: #0169ac;
  font-size: 22px;
  font-weight: bold;
}
main#eg_wcs #pots #pot_list .pot_group {
  display: none;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
}
main#eg_wcs #pots #pot_list .pot_group--selected {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
main#eg_wcs #pots .pot_item {
  padding: 0 10px;
  width: 50%;
}
main#eg_wcs #pots .pot_item:first-child {
  border-right: 1px solid #cfcfcf;
}
main#eg_wcs #pots .pot_item h2 {
  text-align: center;
  text-transform: uppercase;
  margin: 25px 0;
  width: 100%;
}
main#eg_wcs #pots .team_item {
  text-align: left;
}
main#eg_wcs #groups {
  border: 1px solid #cfcfcf;
  text-align: center;
  width: 100%;
}
main#eg_wcs #groups form {
  overflow: hidden;
}
main#eg_wcs #groups form .group_option__label {
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 0;
  text-transform: uppercase;
  width: 50%;
  border-right: 1px solid #a4a4a4;
}
main#eg_wcs #groups form .group_option__label--selected {
  background: #0169ac;
  color: #fff;
}
main#eg_wcs #groups form input[type=radio] {
  display: none;
}
main#eg_wcs #groups #group_list {
  background: #f8f8f8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
}
main#eg_wcs #groups #group_list h2 {
  color: #0169ac;
  font-size: 22px;
  font-weight: bold;
}
main#eg_wcs #groups #group_list .group_group {
  display: none;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
}
main#eg_wcs #groups #group_list .group_group--selected {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
main#eg_wcs #groups h2 {
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
main#eg_wcs #groups .group_item {
  padding: 0 10px;
  width: 49%;
}
main#eg_wcs #groups .group_item:first-child {
  border-right: 1px solid #cfcfcf;
}
main#eg_wcs #groups .group_item h2 {
  text-align: center;
  text-transform: uppercase;
  margin: 10px 0;
  width: 100%;
}
main#eg_wcs #groups .team_item {
  text-align: left;
}

@media (min-width: 360px) {
  main#eg_wcs h1 {
    margin: 0;
  }
}
@media (min-width: 700px) {
  main#eg_wcs {
    padding: 10px 50px;
  }
  main#eg_wcs button {
    font-size: 24px;
    margin: 25px 0;
    padding: 20px;
  }
}
@media (min-width: 1000px) {
  main#eg_wcs #pots #pot_list .pot_group .pot_item {
    padding: 0 70px;
  }
  main#eg_wcs #groups #group_list .group_group .group_item {
    padding: 0 70px;
  }
}