/*
File: style.css
Author: Gijs de Jong
*/

body {
  background-color: #fff;
}

/*---------------------------------------------------------------------------------------------------*/

#wrapper, #awrapper, #aawrapper {
  font-family: "Open-Sans", sans-serif;

  display: none;
  overflow: hidden;

  width: 100%;
  height: 100vh;
}

#loading {
  position: absolute;

  width: 0;
  height: 4px;

  background-color: #444;
}

/*---------------------------------------------------------------------------------------------------*/

#logo {
  position: absolute;
  z-index: 99;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 320px;
  height: auto;
  margin-top: -90px;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
}

.formtext {
  font-size: 18pt;

  text-align: center;

  color: #444;
}

#login, #admin, #startt, #endd, #subject, #upload, #settingss {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 320px;
  margin: auto;
}
#ask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;

  width: 420px;
  height: 402px;
  margin: auto;
}
#asked {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;

  width: 420px;
  height: 402px;
  margin: auto;
}
#subject, #upload {
  position: absolute;
  top: 0;
  bottom: 0;

  width: 320px;
  margin: auto;
}
#subject {
  right: 360px;
}
#upload {
  left: 360px;
}
#login, #startt, #subject, #upload {
  height: 250px;
}
#endd {
  height: 266px;
}
#admin, #settingss {
  height: 310px;
}

#startt, #endd, #subject, #upload, #settingss {
  display: none;
}

#loginform, #adminform, #startform, #endform, #subjectform, #uploadform, #settingsform {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  margin: auto;

  text-align: center;

  border-radius: 2px;
  background-color: #0080b5;
  box-shadow: 0 0 4px #444;
}
#askform, #askedform {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 308px;
  margin: auto;

  text-align: center;

  border-radius: 2px;
  background-color: #0080b5;
  box-shadow: 0 0 4px #444;
}
#loginform, #startform, #subjectform, #uploadform {
  height: 156px;
}

#adminform, #settingsform {
  height: 216px;
}
#endform {
  height: 172px;
}

.input, .sinput, .submit, #filecontainer, .select {
  font-size: 12pt;

  -webkit-transition: 0.2s;
          transition: 0.2s;

  color: #444;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 0 3px #444;
}

.input {
  width: 252px;
  height: 40px;
  margin-bottom: 16px;
  padding-right: 8px;
  padding-left: 8px;
}

.sinput {
  width: 160px;
  height: 40px;
  margin-bottom: 16px;
  padding-right: 8px;
  padding-left: 8px;

  text-align: center;
}
.sinput[name="subjectasked"] {
  margin-right: 5px;
}
.sinput[name="dateasked"] {
  margin-left: 5px;
}

.submit {
  width: 270px;
  height: 44px;

  cursor: pointer;
}

#ask .input, #asked .input {
  width: 352px;
}
#ask .submit, #asked .submit {
  width: 370px;
}

.prioritytext {
  font-size: 12pt;

  margin-bottom: 16px;

  text-align: center;

  color: #fff;
}
#priority, #prioritya {
  width: 370px;
  height: 44px;
  margin-bottom: 16px;
  margin-left: 25px;
}
#low, #medium, #high, #lowa, #mediuma, #higha {
  position: absolute;

  width: 44px;
  height: 44px;
}
#low, #lowa {
  right: auto;
  left: 25px;
}
#medium, #mediuma {
  right: 0;
  left: 0;

  margin-right: auto;
  margin-left: auto;

  text-align: center;
}
#high, #higha {
  right: 25px;
  left: auto;
}
#lowcheckboxlabel, #lowcheckboxlabela {
  padding: 20px;

  border: 2px solid green;
  background-color: green;
}
#mediumcheckboxlabel, #mediumcheckboxlabela {
  padding: 20px;

  border: 2px solid yellow;
  background-color: yellow;
}
#highcheckboxlabel, #highcheckboxlabela {
  padding: 20px;

  border: 2px solid red;
  background-color: red;
}
#lowcheckboxlabela, #mediumcheckboxlabela, #highcheckboxlabela {
  cursor: default;
}

.select {
  width: 270px;
  height: 44px;
  margin-bottom: 16px;
  padding-right: 8px;
  padding-left: 8px;
}

#ask .select {
  width: 370px;
}

.checkboxtext {
  font-size: 12pt;

  margin-top: 16px;
  margin-bottom: 16px;

  text-align: center;

  color: #fff;
}
#checkboxcontainer {
  height: 44px;
  margin-bottom: 16px;

  text-align: center;
}
.checkbox {
  display: none;
}
.checkboxlabel {
  display: inline;
}
.checkbox + .checkboxlabel {
  position: relative;

  display: inline-block;

  padding: 21px;

  cursor: pointer;

  color: #444;
  border: 1px solid #cacece;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 0 3px #444;
}
.checkbox + .checkboxlabel:active, .checkbox:checked + .checkboxlabel:active {
  border: 1px solid #0080b5;
}
.checkbox:checked + .checkboxlabel {
  border: 1px solid #0080b5;
  box-shadow: 0 0 5px #444;
}
.checkbox:checked + .checkboxlabel:after {
  font-size: 30pt;

  position: absolute;
  top: 1px;
  left: -2px;

  width: 44px;
  height: 40px;

  content: "\2714";
}

#filecontainer {
  width: 268px;
  height: 42px;
  margin-right: auto;
  margin-bottom: 16px;
  margin-left: auto;
}
#file {
  position: absolute;
  top: 26px;
  left: 25px;

  width: 270px;
  height: 44px;

  cursor: pointer;

  opacity: 0;
}

.filetext {
  line-height: 44px;

  text-align: center;
}

.input:hover, .submit:hover, #uploadfilecontainer:hover {
  box-shadow: 0 0 5px #444 !important;
}

.input:focus, .submit:active, #uploadfilecontainer:active {
  border: 1px solid #0080b5;
}

/*---------------------------------------------------------------------------------------------------*/

#vieww {
  position: absolute;
  top: 120px;
  right: 0;
  left: 0;

  display: none;
  overflow-y: scroll;
  /*width: 844px;*/

  width: 1000px;
  height: calc(100vh - 190px);
  margin-right: auto;
  margin-left: auto;

  border-top: 3px solid #444;
  border-bottom: 3px solid #444;
}

#viewtext {
  font-size: 18pt;

  width: 400px;
  height: 30px;
  margin: 12px auto;

  text-align: center;

  color: #444;
}

.studentviewtext, .adminviewtext, .archiveviewtext {
  display: inline;

  padding-right: 4px;
  padding-left: 4px;

  cursor: pointer;
  -webkit-transition: 0.3s;
          transition: 0.3s;
}
.studentviewtext {
  float: left;
}
.archiveviewtext {
  float: right;
}
.studentviewtext:hover, .adminviewtext:hover, .archiveviewtext:hover {
  color: #0080b5;
}

#sorttext {
  font-size: 15pt;

  position: absolute;

  width: 115px;
  height: 128px;
  margin-top: 16px;

  text-align: left;

  color: #444;
}

.datesorttexta, .datesorttextd, .prioritysorttexta, .prioritysorttextd {
  margin-bottom: 15px;

  cursor: pointer;
}
.dstexta, .dstextd, .pstexta, .pstextd {
  -webkit-transition: 0.3s;
          transition: 0.3s;
}
.dstextd {
  text-decoration: underline;
}
.datesorttexta:hover > .dstexta, .datesorttextd:hover > .dstextd, .prioritysorttexta:hover > .pstexta, .prioritysorttextd:hover > .pstextd, #optiontext:hover > .optiontext {
  color: #0080b5;
}

#optiontext {
  font-size: 15pt;

  position: absolute;

  width: 115px;
  height: 30px;
  margin-top: 180px;

  text-align: left;

  color: #444;
}

.optiontext {
  line-height: 30px;

  cursor: pointer;
  -webkit-transition: 0.3s;
          transition: 0.3s;
}

.removeall {
  position: absolute;

  width: 20px;
  height: auto;
  margin-top: 3px;
  margin-left: 5px;
}

#studentvieww, #adminvieww, #archivevieww {
  position: absolute;
  right: 0;
  left: 0;

  display: none;

  width: 500px;
  height: calc(100% - 54px);
  margin-right: auto;
  margin-left: auto;
}

.squestioncontainer {
  font-size: 13pt;

  display: none;

  width: calc(100% - 4px);
  height: auto;
  margin-top: 16px;
  margin-bottom: 16px;

  color: #444;
  border: 2px solid transparent;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 0 3px #444;
}

.questioncontainer {
  font-size: 12pt;

  display: none;

  width: calc(100% - 4px);
  height: auto;
  margin-top: 16px;
  margin-bottom: 16px;

  color: #444;
  border: 2px solid transparent;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 0 3px #444;
}

.restore {
  position: absolute;
  right: 0;

  width: 22px;
  height: auto;
  margin-top: 4px;
  margin-right: 60px;

  cursor: pointer;
}

.remove {
  position: absolute;
  right: 0;

  width: 20px;
  height: auto;
  margin-top: 2px;
  margin-right: 7px;

  cursor: pointer;
}

.q_id, .aq_id, .sq_name, .q_question, .sq_subject, .q_subject, .sq_date, .q_date, .aq_date, .q_ip {
  position: relative;
}
.q_id {
  margin-top: 10px;
  margin-right: 40px;
  margin-left: 10px;
}
.aq_id {
  margin-top: 10px;
  margin-right: 95px;
  margin-left: 10px;
}
.sq_name {
  margin-top: 10px;
  margin-right: 40px;
  margin-left: 10px;
}
.q_question {
  margin-top: 4px;
  margin-right: 10px;
  margin-left: 10px;
}
.sq_subject {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}
.q_subject {
  margin-top: 8px;
  margin-left: 10px;
}
.sq_date {
  float: right;

  margin-top: -26px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.q_date {
  float: right;

  margin-top: -26px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.aq_date {
  float: right;

  margin-top: -26px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.q_ip {
  margin-top: 4px;
  margin-bottom: 10px;
  margin-left: 10px;
}

/*---------------------------------------------------------------------------------------------------*/

#name {
  font-size: 19.5pt;
  line-height: 50px;

  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;

  width: 220px;
  height: 50px;
  margin-right: auto;
  margin-left: auto;

  -webkit-transition: 0.3s;
          transition: 0.3s;
  text-align: center;

  color: #0080b5;
  border-right: 3px solid #444;
  border-left: 3px solid #444;
}

#header {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;

  width: 1000px;
  height: 50px;
  margin-right: auto;
  margin-left: auto;
}

.itemcontainer {
  font-size: 19.5pt;
  line-height: 50px;

  position: absolute;

  width: 210px;
  height: 50px;

  cursor: pointer;
  -webkit-transition: 0.3s;
          transition: 0.3s;
  text-align: center;

  color: #444;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}

.itemcontainer:hover {
  color: #0080b5 !important;
  border-color: #444;
}
.itemcontainer:active {
  border-color: #0080b5;
}

#item1 {
  left: 0;
}
#item2 {
  right: 261.3px;
  left: 0;

  margin-right: auto;
  margin-left: auto;
}
#item3 {
  right: 0;
  left: 261.3px;

  margin-right: auto;
  margin-left: auto;
}
#item4 {
  right: 0;
}

#accountloading {
  position: absolute;
  bottom: 52px;

  width: 0;
  height: 4px;

  background-color: #444;
}

#footer {
  font-size: 14pt;

  position: absolute;
  bottom: 0;

  width: 100%;
  height: 40px;

  color: #444;
}

.copy {
  margin-left: 25px;
}

.about {
  cursor: pointer;
  -webkit-transition: 0.3s;
          transition: 0.3s;
}

.logout {
  position: absolute;
  right: 0;
  left: 0;

  width: 68px;
  margin-right: auto;
  margin-left: auto;

  cursor: pointer;
  -webkit-transition: 0.3s;
          transition: 0.3s;
  text-align: center;
}

.logout:hover {
  color: #0080b5;
}

/*---------------------------------------------------------------------------------------------------*/

/* LOGIN AND ADMIN LOGIN */
@media (max-width: 350px) {
  #login, #admin, #startt, #endd, #subject, #upload, #settingss {
    width: 91vw;
  }
  .input {
    width: 75.8vw;
  }
  .submit, #classes, #filecontainer, #file {
    width: 81vw;
  }
  #logo {
    width: 91vw;
    margin-top: -25vw;
  }
}
@media (max-width: 250px) {
  .submit, #classes, #filecontainer, #file {
    width: 83vw;
  }
}
@media (max-width: 175px) {
  .input {
    width: 73vw;
  }
}
@media (max-height: 430px) {
  #login {
    top: 90px;

    height: 225px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }
  #loginform {
    top: 45px;

    margin-top: 0;
    margin-right: auto;
    margin-bottom: 25px;
    margin-left: auto;
  }
}
@media (max-height: 490px) {
  #admin {
    top: 90px;

    height: 225px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }
  #adminform {
    top: 45px;

    margin-top: 0;
    margin-right: auto;
    margin-bottom: 25px;
    margin-left: auto;
  }
}

/* STUDENT ACCOUNT */
@media (max-width: 470px) {
  #ask, #asked {
    width: 91vw;
  }
  #ask .input, #asked .input {
    width: 77vw;
  }
  .sinput {
    width: 35.2vw;
  }
  .sinput[name="subjectasked"] {
    margin-right: 1vw;
  }
  .sinput[name="dateasked"] {
    margin-left: 1vw;
  }
  #ask .select, #ask .submit, #asked .submit {
    width: 81vw;
  }
  #priority, #prioritya {
    width: 82vw;
  }
  #low, #lowa {
    left: 5vw;
  }
  #high, #higha {
    right: 5vw;
  }
  .copy {
    margin-left: 4.5vw;
  }
  .logout {
    margin-right: 4.5vw;
  }
}
@media (max-width: 340px) {
  .sinput {
    width: 34.2vw;
  }
}
@media (max-width: 300px) {
  .sinput {
    width: 33.6vw;
  }
}
@media (max-height: 610px) {
  #name {
    top: 20px;
  }
}
@media (max-height: 566px) {
  #ask, #asked {
    margin-top: 80px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }
}
@media (max-height: 500px) {
  #awrapper #accountloading {
    top: 446px;
    bottom: 0;
  }
  #awrapper #footer {
    top: 460px;
  }
}

/* ADMIN ACCOUNT */
@media (max-height: 490px) and (min-width: 971px) {
  #startt, #endd {
    margin-top: 120px;
  }
  #subject {
    top: 0;

    margin-top: 120px;
  }
  #upload {
    top: 0;

    margin-top: 120px;
  }
}
@media (max-height: 550px) and (min-width: 971px) {
  #settingss {
    margin-top: 120px;
  }
}
@media (max-width: 1020px) {
  #header {
    width: 950px;
  }
  #vieww {
    width: 93.5vw;
  }
}
@media (max-width: 970px) {
  #header {
    width: 500px;
    height: 100px;
  }
  #item2 {
    right: 0;
    left: auto;
  }
  #item3 {
    right: auto;
    left: 0;

    margin-top: 50px;
  }
  #item4 {
    right: 0;
    left: auto;

    margin-top: 50px;
  }
  #vieww {
    top: 170px;

    height: calc(100% - 230px);
  }
}
@media (max-width: 865px) {
  #vieww {
    top: 170px;

    height: calc(100% - 230px);
  }
  #sorttext {
    right: 0;
    left: 0;

    margin: auto;
  }
  #optiontext {
    right: 0;
    left: 0;

    margin: 140px auto auto auto;
  }
  #studentvieww, #adminvieww, #archivevieww {
    height: calc(100% - 224px);
    margin-top: 170px;
  }
}
@media (max-width: 550px) {
  #studentvieww, #adminvieww, #archivevieww {
    width: 100%;
  }
}
@media (max-height: 590px) and (max-width: 970px) {
  #startt, #endd {
    margin-top: 170px;
  }
  #subject {
    top: 0;

    margin-top: 170px;
  }
  #upload {
    top: 0;

    margin-top: 170px;
  }
}
@media (max-height: 650px) and (max-width: 970px) {
  #settingss {
    margin-top: 170px;
  }
}
@media (max-width: 710px) {
  #subject {
    top: -225px;
    right: 0;
    left: 0;
  }
  #upload {
    top: 225px;
    right: 0;
    left: 0;
  }
}
@media (max-height: 810px) and (max-width: 710px) {
  #subject {
    top: 0;

    margin-top: 170px;
  }
  #upload {
    top: 0;

    margin-top: 395px;
  }
}
@media (max-width: 520px) {
  #header {
    top: 20px;

    width: 216px;
    height: 200px;
  }
  #vieww {
    top: 240px;

    height: calc(100% - 300px);
  }
  #item1 {
    right: 0;

    margin-right: auto;
    margin-left: auto;
  }
  #item2 {
    left: 0;

    margin-top: 50px;
  }
  #item3 {
    right: 0;

    margin-top: 100px;
  }
  #item4 {
    left: 0;

    margin-top: 150px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (max-width: 440px) {
  #viewtext {
    width: 100%;
  }
}
@media (max-width: 300px) {
  #viewtext {
    height: 95px;
  }
  .studentviewtext, .adminviewtext, .archiveviewtext {
    position: absolute;
    right: 0;
    left: 0;

    margin-right: auto;
    margin-left: auto;
  }
  .adminviewtext {
    margin-top: 35px;
  }
  .archiveviewtext {
    margin-top: 70px;
  }
  #studentvieww, #adminvieww, #archivevieww {
    height: calc(100% - 289px);
  }
}
@media (max-height: 955px) and (max-width: 520px) {
  #subject {
    top: 0;

    margin-top: 240px;
  }
  #upload {
    top: 0;

    margin-top: 465px;
  }
}
@media (max-height: 790px) and (max-width: 520px) {
  #settingss {
    margin-top: 240px;
  }
}
@media (max-height: 730px) and (max-width: 520px) {
  #startt, #endd {
    margin-top: 240px;
  }
}
@media (max-height: 765px) and (max-width: 316px) {
  #endd {
    margin-top: 240px;
  }
}
@media (min-height: 831px) and (max-width: 250px) {
  #upload {
    top: 225px;

    margin-top: auto;
  }
}
@media (max-height: 1000px) and (max-width: 250px) {
  #subject {
    top: 0;

    margin-top: 260px;
  }
  #upload {
    top: 0;

    margin-top: 485px;
  }
}

@media (max-width: 316px) {
  #endd {
    height: 282px;
  }
  #endform {
    height: 188px;
  }
}

@media (max-width: 250px) {
  #awrapper, #awrapper #footer, #header {
    width: 250px;
  }
  #name {
    margin-right: 10px;
    margin-left: 10px;
  }
  #ask, #asked, #startt, #endd, #subject, #upload, #settingss {
    width: 250px;
  }
  #askform, #askedform, #startform, #endform, #subjectform, #uploadform, #settingsform {
    width: 227.5px;
  }
  #awrapper .input {
    width: 184px;
  }
  .sinput {
    width: 78px;
  }
  .sinput[name="subjectasked"] {
    margin-right: 3px;
  }
  .sinput[name="dateasked"] {
    margin-left: 3px;
  }
  #awrapper .select, #filecontainer, #file, #awrapper .submit {
    width: 202px;
  }
  #subject .formtext {
    margin-top: -20px;
  }
}

@media (max-height: 740px) and (min-width: 971px) {
  #vieww {
    height: 556px;
  }
}
@media (max-height: 790px) and (min-width: 866px) and (max-width: 970px) {
  #vieww {
    height: 726px;
  }
}
@media (max-height: 870px) and (min-width: 521px) and (max-width: 865px) {
  #vieww {
    height: 811px;
  }
}
@media (max-height: 950px) and (min-width: 301px) and (max-width: 520px) {
  #vieww {
    height: 891px;
  }
}
@media (max-height: 1015px) and (max-width: 300px) {
  #vieww {
    height: 956px;
  }
}