.bg {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -1;
  background-image: url('/static/images/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #00000030;
}

@media screen and (min-width:480px) {
  .col-ssm {
    flex: 1 0 0%;
  }

  .mb-ssm-0 {
    margin-bottom: 0 !important;
  }

  .mb-ssm-3 {
    margin-bottom: 1rem !important;
  }
}

body {
  user-select: none;
}

input[type="checkbox"]~label {
  display: inline
}

.content {
  max-width: 900px;
  margin: auto;
}

form .card .card-body {
  display: grid;
  grid-template-areas:
    "fn fn fn fn fn fn"
    "iua iua iua iua iua iua"
    "e e e e e e"
    "ps ps pn pn pid pid"
    "pib pib pib pib pib pib"
    "phnmbr phnmbr phnmbr a a a"
    "td td td tt tt tt"
    "tm tm tm tm tm tm"
    "ia ia ia ia ia ia";
  gap: 1.5rem;
}

form .card .card-body.underage {
  grid-template-areas:
    "fn fn fn fnua fnua fnua"
    "iua iua iua iua iua iua"
    "e e e e e e"
    "ps ps pn pn pid pid"
    "pib pib pib pib pib pib"
    "phnmbr phnmbr phnmbr a a a"
    "td td td tt tt tt"
    "tm tm tm tm tm tm"
    "ia ia ia ia ia ia";
}

form .card .card-body .fullname {
  grid-area: fn;
}

form .card .card-body .is_underage {
  grid-area: iua;
}

form .card .card-body .fullname_underage {
  grid-area: fnua;
}

form .card .card-body .email {
  grid-area: e;
}

form .card .card-body .passport_series {
  grid-area: ps;
}

form .card .card-body .passport_number {
  grid-area: pn;
}

form .card .card-body .passport_issued_by {
  grid-area: pib;
}

form .card .card-body .passport_issued_date {
  grid-area: pid;
}

form .card .card-body .address {
  grid-area: a;
}

form .card .card-body .phone_number {
  grid-area: phnmbr;
}

form .card .card-body .train_days {
  grid-area: td;
}

form .card .card-body .train_time {
  grid-area: tt;
}

form .card .card-body .train_months {
  grid-area: tm;
}

form .card .card-body .is_agree {
  grid-area: ia;
}

@media screen and (max-width: 768px) {
  form .card .card-body {
    grid-template-areas:
      "fn fn"
      "iua iua"
      "fnua fnua"
      "e e"
      "ps pn"
      "pib pid"
      "a a"
      "phnmbr phnmbr"
      "td tt"
      "tm tm"
      "ia ia" !important;
  }

  form .card .card-body .train_months {
    grid-template-columns: repeat(4, 1fr);
  }

  form .card .card-body .train_months label {
    grid-column-end: 5;
  }
}

@media screen and (max-width: 450px) {
  form .card .card-body .train_months {
    grid-template-columns: repeat(3, 1fr);
  }

  form .card .card-body .train_months label {
    grid-column-end: 4;
  }
}

@media screen and (max-width: 380px) {
  form .card .card-body {
    grid-template-areas:
      "fn"
      "iua"
      "fnua"
      "e"
      "ps"
      "pn"
      "pib"
      "pid"
      "a"
      "phnmbr"
      "td"
      "tt"
      "tm"
      "ia" !important;
  }
}

@media screen and (max-width: 350px) {
  form .card .card-body .train_months {
    grid-template-columns: repeat(2, 1fr);
  }

  form .card .card-body .train_months label {
    grid-column-end: 3;
  }
}