/* .account {
  grid-template-areas:
  "wel wel title nav ."
  "info info info info info"
  "best best best go .";
} */

.account .info-window {
  /* grid-area: info; */
  grid-column: 1/6;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
}

.info-account {
  grid-template-columns: 5% 27% 36% 27% 5%;
  /* grid-template-areas: 
  ". rat ac . ."; */
  -ms-grid-columns: 5% 27% 36% 27% 5%;
}
.account .rating-window {
  /* grid-area: rat; */
  -ms-grid-row-align: stretch;
  grid-column: 2;
  grid-row: 1;
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

.account-window {
  /* grid-area: ac; */
  grid-column: 3/5;
  grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  display: grid;
  display: -ms-grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 100%));
  -ms-grid-columns: repeat(auto-fit, minmax(7rem, 100%));
  justify-content: space-around;
  align-self: stretch;
  justify-self: stretch;
  position: relative;
}

.content-account-description {
  display: grid;
  display: -ms-grid;
  grid-template-rows: 12% 1fr;
  -ms-grid-rows: 0.1fr 1.3fr;
  -ms-grid-column-align: center;
  justify-items: center;
  justify-self: center;
  width: 20em;
  border-radius: 1.7em;
  border: 0.5rem solid #2388e5;
  background-color: #61808a;
}
.content-account {
  margin-top: 0;
}
.account-window-title {
  font-size: 1rem;
  align-self: center;
  margin: 0 auto;
  -ms-grid-column-align: center;
}
.form-account {
  display: grid;
  display: -ms-grid;
  gap: 0.05rem;
  width: 80%;
  justify-items: center;
  align-content: space-evenly;
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column-align: center;
  -ms-grid-rows: 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr;
}

.f2 {
  -ms-grid-row: 2;
  grid-row: 2;
}
.f3 {
  -ms-grid-row: 3;
  grid-row: 3;
}
.f4 {
  -ms-grid-row: 4;
  grid-row: 4;
}
.f5 {
  -ms-grid-row: 5;
  grid-row: 5;
}
.f6 {
  -ms-grid-row: 6;
  grid-row: 6;
}

.form-account-item {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr;
  gap: 0.2vh;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 45% 0.2vh 45%;
  width: 100%;
  overflow: hidden;
}
.f1 {
  grid-template-columns: 47% 47%;
  gap: 3%;
}
#ball,
.l1 {
  text-align: center;
}
.form-account-label {
  font: normal 400 0.8em Roboto;
  justify-content: flex-start;
  margin: 0;
}

.form-account-control,
.form-account-item {
  font: normal 400 2vh Roboto;
  padding: 0.3vh 0 0 0;
}

input.form-account-control:invalid:not(:placeholder-shown) {
  border-color: red;
}
input.form-account-control:valid:not(:placeholder-shown) {
  border-color: green;
}

.btn-form-ac {
  cursor: pointer;
  font: normal 400 0.7rem/0.7rem Roboto;
  padding: 0.25rem 0.5rem;
  width: 100%;
  color: #ffffff;
  background: rgba(53, 196, 232, 0.8);
  border: 4px solid rgba(147, 146, 146, 0.8);
  border-radius: 3vh;
  text-align: center;
  -ms-grid-row: 7;
  grid-row: 7;
  -ms-grid-row-align: start;
}
#pd {
  grid-template-columns: 0.9fr 0.1fr;
  -ms-grid-columns: 0.9fr 0.1fr;
  align-items: center;
}
#recipient-pd {
  width: 90%;
  height: 90%;
  justify-self: flex-end;
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-column-align: end;
}
#nikName,
#name,
#organization,
#position,
#phone {
  -ms-grid-row: 3;
  grid-row: 3;
}

@media (max-width: 1366px) {
  .info-account {
    grid-template-columns: 3% 32% 30% 32% 3%;
    -ms-grid-columns: 3% 32% 30% 32% 3%;
  }
}

@media (max-width: 1024px) {
  /* .account {  
    grid-template-areas:
      "wel nav"
      "title title"
      "info info"
      "best go";
} */
  .content-account-description {
    width: 90%;
  }
  .info-account {
    grid-template-columns: 1fr 1fr;
    /* grid-template-areas: 
  "rat ac"; */
    -ms-grid-columns: 1fr 1fr;
  }
  .account .info-account {
    grid-column: 1/3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .account .rating-window {
    /* grid-area: rat; */
    grid-column: 1;
    -ms-grid-column: 1;
  }
  .account .account-window {
    /* grid-area: ac; */
    grid-column: 2;
    -ms-grid-column: 2;
  }
}
/* @media (max-width: 890px) {
  .account {  
  grid-template-areas:
      "wel go"
      "title title"
      "info info"
      "best nav";
}
} */
@media (max-width: 540px) {
  /* .account {
     grid-template-areas:
      "wel wel"      
      "title title"
      "info info"
      "go nav"
      "best best";
  }   */

  .content-account-description {
    width: 80%;
  }
  .form-account-item {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .rating-account,
  .account .display-result-block {
    display: none;
  }
  /* .account {
    grid-template-areas:
      "wel "      
      "title"
      "info"      
      "go"
      "nav "
      "best ";
  } */
  .account {
    grid-template-rows: 7% 10% 63% 10% 10%;
    -ms-grid-rows: 7% 10% 63% 10% 10%;
  }
  .account .account-window {
    /* grid-area: ac; */
    grid-column: 1;
    -ms-grid-column: 2;
  }
  .info-account {
    grid-template-columns: 1fr;
    /* grid-template-areas: 
    "ac"; */
    -ms-grid-columns: 1fr;
  }
}