/*general*/
@font-face {
  font-family: "AoPS";
  src: url("new_aops.woff") format("woff");
}
.aops-font {
  font-family: "AoPS" !important;
}
body {
  margin: 0px;
  font-family: "Roboto", sans-serif;
  background-image: linear-gradient(to bottom right, #ffffff, #c8c8c8);
}
.cross {
  position: absolute;
  z-index: 2;
}
#full-wrap {
  height: 100%;
}

/*header*/
.head {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#mafia-title {
  border: 0px;
  font-size: 5vw;
  text-align: center;
  width: 100%;
  margin: 3vw 1vw;
  background-color: transparent;
}
#mafia-title:hover {
  cursor: pointer;
}

/*users*/
.user-overall {
  display: flex;
  width: 100%;
  border: 0px;
  border-top: 5px;
  border-style: solid;
  border-color: black;
}
.userlist-full {
  width: 25%;
  padding: 10px;
  border: 0px;
  border-left: 5px;
  border-style: solid;
  border-color: black;
}
.userlist-user {
  display: flex;
}
.userlist-user > div {
  padding: 5px;
}
.user-wrap {
  width: fit-content;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border: 0px;
  padding: 10px;
}
.user {
  border: rgba(0, 0, 0, 0.5) 5px solid;
  width: 100px;
  height: 100px;
  padding: 15px;
  cursor: pointer;
  margin: 5px;

  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 741px) {
  .user-wrap {
    display: flex;
  }
  .user {
    border: rgba(0, 0, 0, 0.5) 5px solid;
    width: 17vw;
    height: 17vw;
    background-size: 22vw;
    margin: 1vw;
    padding: 4vw;
    border: rgba(0, 0, 0, 0.5) 2vwvw solid;
    cursor: pointer;
  }
  .user-info-wrap {
    flex-direction: column;
  }
  .user-info-wrap > .user-info-left,
  .user-info-wrap > .user-info-right {
    width: 100%;
    margin: 0px 20px 20px 0px;
    background-color: lightblue;
  }
  .user-info-main div {
    font-size: 2rem;
  }
  .userlist-full {
    display: none;
  }
  .user-wrap {
    justify-content: center;
  }
}

/*user data*/
.user-info-wrap {
  display: flex;
  margin: 10px;
  height: 100%;
}
.user-info-wrap > div {
  margin: 10px;
  background-color: lightblue;
  width: 50%;
  box-shadow: 5px 5px 10px rgb(57, 94, 107);
}
.user-info-main {
  text-align: center;
  border-top: 5px;
  border-bottom: 5px;
  border-right: 0px;
  border-left: 0px;
  border-color: black;
  border-style: solid;
  margin-bottom: 20px;
  font-size: 3rem;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*user info left*/
.user-info-left {
  display: flex;
  flex-direction: column;
}
.user-info-left > div {
  background-color: lightblue;
  border: black 1px solid;
  margin: -1px;
  padding: 5px;
  height: 100%;
}
.user-info-scumread-who-users,
.user-info-townread-who-users {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-info-scumread-dropdown,
.user-info-townread-dropdown {
  width: 100%;
  border: 0px;
  margin: 3px 5px;
  font-size: 1.1rem;
  border-radius: 3px;
  padding: 3px;
  cursor: pointer;
}
.scumread-user,
.townread-user {
  width: 90%;
  padding: 0px;
  margin: 0px 5px;
}
.user-info-scumread-who-header,
.user-info-townread-who-header,
.user-info-scumread-by-header,
.user-info-townread-by-header {
  font-weight: 600;
  padding-left: 20px;
  padding: 5px;
}
.user-info-townread-by-users,
.user-info-scumread-by-users {
  margin: 5px;
}

/*user info right*/
.user-info-right {
  border: 1px solid black;
}
.notes-input,
.role-input {
  font-family: "Roboto", sans-serif;
  width: calc(100% - 50px);
  margin: 20px;
  border: 0px;
  padding: 0px;
  padding: 5px;
}
.role-info,
.notes-info,
.alive-info {
  margin: 20px 0px 0px 20px;
}
.alive-check {
  margin: 20px 0px 0px 20px;
  width: 20px;
  height: 20px;
}
.notes-input {
  height: 400px;
}
.role-wrap,
.align-wrap,
.alive-wrap {
  display: flex;
  align-items: center;
}
.role-input {
  height: 2rem;
  font-size: 1rem;
  margin-bottom: 0;
}
.align-wrap {
  margin: 20px 0px 0px 20px;
}
.align-dropdown {
  margin: 0px 20px;
  width: 100%;
  border: 0px;
  height: 30px;
  font-family: "Roboto", sans-serif !important;
  cursor: pointer;
}
.game-info-textarea {
  width: 100%;
  min-height: 400px;
  height: 100%;
  font-family: "Roboto", sans-serif !important;
  padding: 5px;
}
.game-info-wrap {
  width: calc(100% - 50px);
  margin: 0px 20px 20px 20px;
}
.username-hover {
  min-width: 100px;
  min-height: 100px;
  border: 5px solid black;
  border-radius: 10px;
  background-color: white;
  padding: 20px;
}

/*dropdown*/
.move-dropdown-wrap {
  display: flex;
  flex-direction: column;
}
.move-dropdown {
  border: 0px;
  font-size: 1.2em;
  padding: 0px 5px;
  margin: 1px;
  height: 10px;
  background-color: transparent;
}
.remove-dropdown {
  border: 0px;
  background-color: transparent;
  color: rgb(189, 9, 9);
}
.user-info-townread-who-add,
.user-info-scumread-who-add {
  border: 0px;
  background-color: transparent;
  font-size: 1.5em;
  color: rgb(21, 21, 121);
}
/*.move-dropdown-up {

}
.move-dropdown-down {
  margin: 0px 0px;
}*/