#app {
  max-width: 98%;

}

/* General stuff */

h2 {
  margin-top: 1em;
}

div.sitetitle {
  text-align: center;
  margin: 0px 0px 30px 0px;
}

div.sitelogo {
  text-align: center;
  margin: 50px 0px 20px 0px;
}

div.login {
  margin: 0px 0px 0.5em 0px;
  text-align: center;
}

div.login label {
  width: 120px;
  text-align: left;
}

div.login input[type=text] {
  width: 200px;
}

div.login input[type=password] {
  width: 200px;
}

/* div.login input[type=submit] {
width: 120px;
margin: 1em 0px 0px 155px;
} */

.list-group-item {
  padding: 10px 20px 10px 20px;
  border: none;
  background-color: none;
}

div.timer {
  font-size: 5em;
  font-weight: bold;
}

@media (min-width: 639px) {
  .onlymobile {
    display: none;
  }
}

@media (max-width: 640px) {


  .nomobile {
    display: none;
  }

  #app {
    padding: 0px 10px 10px 10px;
  }
}

button {
  background-color: #ff9900;
}

/* --- Schritte BEGIN --- */

div.steps {
  margin: 1em 0px 2em 0px;
}

ul.steps li {
  background-color: #ddd;
  margin: 0px 5px 0px 5px;
}

ul.steps li.active {
  background-color: #dd0;
  font-weight: bold;
}

.onlymobile .list-group-item {
  padding: 10px;
}

ul.steps.onlymobile li {
  margin: 0px 10px 0px 0px;
}

/* --- Schritte END --- */


/* --- Fehler BEGIN --- */

div.error {
  border: 2px solid red;
  padding: 20px;
  margin: 20px 0px 0px 0px;
}

/* --- Fehler END --- */


/* --- Identification BEGIN --- */

img.passportselfie {
  margin: 0px 0px 20px 0px;
  width: 360px;
}

/* --- Identification END --- */


/* --- Chat BEGIN --- */

#chatbox {
  /* text-align: left; */
  margin: 0 auto;
  margin-bottom: 25px;
  padding: 10px;
  background: #fff;
  height: 470px;
  width: 100%;
  border: 1px solid #ACD8F0;
  overflow: hidden auto;
}

#usermsg {
  width: 100%;
  border: 1px solid #ACD8F0;
}

#submit {
  width: 80px;
  margin: 1em 0px 0px 0px;
}


div.cmsg {
  margin: 0px 0px 1em 0px;
  word-break: break-all;
}

.sentmsg {
  font-weight: bold;
  width: 80%;
  margin-left: 20%;
  text-align: right;
  background-color: #55b2e5;
  padding: 10px;
  border-radius: 5px;
}

.receivedmsg {
  margin-right: 30px;
  width: 80%;
  background-color: #eee;
  padding: 10px;
  border-radius: 5px;
}

.sentReply {
  border-right: 5px solid blue;
  padding-right: 20px;
  font-weight: normal;
}

.receivedReply {
  border-left: 5px solid blue;
  padding-left: 20px;
}

.icnReply {
  visibility: hidden;
  width: 15px;
  height: 15px;
}

.cmsg:hover .icnReply {
  visibility: visible;
}

.icnReply:hover {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.icnCancleReply {
  width: 15px;
  height: 15px;
}

.icnCancleReply:hover {
  cursor: pointer;
}

input#submitmsg {
  margin-top: 10px;
  margin-bottom: 20px;
}

span.chattime {
  color: #666;
  font-weight: normal;
}

span.chatsender {
  font-weight: bold;
}

span.chatmsg {
  color: blue;
}

/* --- Chat END --- */

/* --- Heartbeat BEGIN --- */

span.component {
  margin-left: 20px;
}

.online {
  height: 12px;
  width: 12px;
  background-color: #5a2;
  border-radius: 50%;
  display: inline-block;
}
.offline {
  height: 12px;
  width: 12px;
  background-color: #d33;
  border-radius: 50%;
  display: inline-block;
}

/* --- Heartbeat END --- */


/* --- Dashboard BEGIN --- */

.examinees {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

}

.examinee {
  flex-grow: 0;
  position: relative;
  height: 110px;
  width: 300px;
  border: 1px solid grey;
  margin: 0px 20px 20px 0px;
  padding: 0px;
  border-radius: 3px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}

.examinee .info {
  font-size: 0.7em;
  line-height: 1.0em;
}

.examinee .name {
  width: 75%;
  float: left;
  padding: 5px;
  font-size: 1.2em;
  line-height: 1.0em;
}

.examinee .status {
  float: right;
  height: 100%;
  width: 20%;
  font-size: 1.6em;
  text-align: center;
  vertical-align: middle;
}

.status_none {
  background-color: grey;
}

.status_ident {
  background-color: #5DADE2;
}

.status_intro {
  background-color: #AED6F1;
}

.status_confirm {
  background-color: #2E86C1;
}

.status_wait {
  background-color: #F7DC6F;
}

.status_download {
  background-color: #ABEBC6;
}

.status_exam {
  background-color: #2ECC71;
}

.status_upload {
  background-color: #D7BDE2;
}

.status_submit {
  background-color: #9B59B6;
}

.status_done {
  background-color: #0FFFEE;
}

table.statuslegende td.number {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
}

.status_offline {
  background: repeating-linear-gradient(
  45deg,
  #ddd,
  #ddd 10px,
  #e99 10px,
  #e99 20px
  );

}

.list-group-item.active {
  color: black;
}

/* --- Dashboard END --- */


/* --- Administration START --- */


.wide-modal{
  min-width: min(65rem, 90vw);
}

.tall-modal{
  height: 75vh;
}

.examiner_container, .examinee_container{
  height: 50vh;
  overflow: auto;
}

.examiner_option, .exam_creator, .examiner_self, .examinee_option{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(0,0,0,.125);
}

.exam_creator, .examiner_self{
  background-color: #eee;
}

.examiner_option, .examinee_option{
  cursor: pointer;
}

.examiner_option:hover, .examinee_option:hover{
  background-color: lightgray;
}

.input_examinees_table{
  height: 45vh;
  overflow-y: auto;
  overflow-x: clip;
}

#inputTable{
  margin-left: auto;
  margin-right: auto;
}

.ql-toolbar.ql-snow{
  border-radius: 0.25rem;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.required-asterisk{
  vertical-align: top;
  color: red;
  font-size: 1rem;
  font-weight: bold;
}

.ql-container{
  height: 10vh;
  border-radius: 0.25rem;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

/* --- Administration END --- */