.rotate90 {
  transform: rotate(90deg);
}

.large-link {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
}
.modal-form button {
  background-color: var(--v-blue);
  cursor: pointer;
  border-radius: 5px;
  padding: 5px 12px;
  margin: 5px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  color: #f7f7f7;

  margin: 5px 0 0 100px ;
  padding: 100px;
}
button:hover {
  background-color: #f7f7f7;
  border-color: var(--v-blue);
  color: var(--v-blue);
}
.close {          /* x: close modal form */
  color: #f7f7f7;
  float: right;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 0 15px 0 0;
  background-color: var(--v-maroon);
  background-color: var(--v-blue);

/*
  padding: 0 0 35px 0;
  margin: -15px 0 10px -15px;
  color: black;
  border: 1px solid black;

  height: 10px;
  width: 35px;
  border-radius: 50%;
  background-color: #f7f7f7;
  z-index: 9999;
*/
}
.close:hover,
.close:focus {
  text-decoration: none;
  cursor: pointer;
  color: #f7f7f7;
}
button.button {       /* modal button */
  display: inline;
  background-color: var(--v-blue);
  cursor: pointer;
  padding: 0.3rem 0.6em;
  padding: 0.4rem 1.2em;
  text-align: center;
  vertical-align: middle;
  color: #f7f7f7;
  text-decoration: none;
  font: bold 12px verdana, helvetica, arial, sans-serif;
  width: max-content;
  border-radius: 5px;
  border: 1px solid var(--box-border);
  box-shadow: 2px 1px 2px var(--box-border);
  white-space: nowrap;
}
button.button:hover {
  background-color: #f7f7f7;
  border: 1px solid var(--v-blue);
  border-radius: 5px;
  color: var(--v-blue);
}
.modal {    /* option popup */
  display: none;
  position: fixed;
  z-index: 8;
  left: 180px;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: transparent;
  z-index: 9999 !important;
}
/* -------------------------------------------------------------------------- */
/*      Tablet      */
@media only screen and (max-width: 1200px) {
  .modal {    /* option popup */
    left: 100px;
  }
}
/* -------------------------------------------------------------------------- */
/*      Small phone      */
@media only screen and (max-width: 602px) {
  .modal {    /* option popup */
    left: 10px;
  }
}
/* media */
.modal .option {
  padding: 5px 10px 0px 10px;
  font-size: .9rem;
}
.modal-content,          /* register, log in form */
.modal-content-left {    /* change display form */
  border: 1px solid var(--box-border);
  width: 300px;
  width: max-content;
  padding: 10px 0 10px 0;
  border-radius: 8px;
  background-color: #f7f7f7;
  font-size: 0.9rem;
  margin: 100px auto;
  box-shadow: 3px 3px 3px var(--box-border);
}
.modal-content-left {   /* change display form */
  margin: 80px 0 0 20px;
}
.modal-row {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-col-left {
  flex: 35%;
  text-align: right;
  padding: 3px 3px 3px 5px;
  font-weight: bold;
  white-space: nowrap;
}
.modal-col-right {
  flex: 65%;
  padding: 3px 0 3px 5px;
}
.modal-col-full {
  margin: 0 auto;
  padding: 3px 0 3px 0;
  text-align: center;
}
.modal-col-full-left {
  text-align: left;
  padding: 3px 0 5px 0;
  white-space: nowrap;
}
.modal-header {
  margin: -10px 0 15px 0;
  padding: 0 0 0 10px;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 2.4rem;
  color: #f7f7f7;
  background-color: var(--v-blue);
  width: 100%;
  border-radius: 5px 5px 0 0;
}