$primary: #00c0ff;
$secondary: #0099ff;
$dark1: #101010;
$dark2: #2a2a2a;
$dark3: #1f1f1f;
$medium: #686868;
$light: #e0e0e0;
$light2: #C5C6C7;
$light3: #a1a1a1;

body
  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
  color: white;
  background-color: $dark1;
  margin: 0;
  padding: 0;

h1
  text-align: center;

h2
  color: $light;
  margin-top: 0;
  text-align: center;

#signin, #signup, #forgotPsw
  padding: 4vw;

.notregister, .alreadyregister
  border: none;
  color: $secondary;
  background-color: transparent;
  font-size: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  cursor: pointer;

.invisible
  display: none;

.signinup
  margin-top: 15vh;
  background-color: $dark2;
  border-radius: 2vw;
  form
    input
      color: $light;
      margin-bottom: 4vh;
      font-size: 25px;
    input[type="submit"]
      padding: 1vw;
      border-radius: 2vw;
      background-color: $secondary;
      color: white;
      border: none;
      width: 40%;
      display: block;
      margin: auto;
      font-size: 25px;
      border: 2px solid #2C3531;
      cursor: pointer;
      transition-duration: 0.3s
    input[type="submit"]:hover
      color: $secondary;
      background-color: $dark1;
      border: 2px solid $secondary;

i
  color: $primary;

#panel
  background-color: $dark2;
  height: 100vh;
  border-right: 2px solid $light3;
  padding: 0;
  position: fixed;

#main
  background-color: $dark1;
  margin-left: 16vw;

#navtop
  font-size: 30px;
  .maintitle
    font-size: 50px;
    text-align: center;
    margin: 0;
    margin-top: 2vh;
  ul
    margin: 0;
    text-align: right;
    li.active
      background: $primary;
      a
        color: black;
    li
      border-top: 1px solid $dark1;
      background: linear-gradient(to right, $dark2 50%, $primary 50%) left;
      background-size: 200%;
      transition: .3s ease-out;

      a
        padding: 1.3vw;
        color: $light2;
        display: block;
        width: 100%;
        transition-duration: 0.3s;
    li:hover
      background-position: right;
      cursor: pointer;
      a
        color: black;

#navprofile
  font-size: 25px;
  padding-top: 1vh;
  padding-bottom: 1vh;
  margin: 0;
  text-align: center;

  p
    margin-top: 1vh;
    margin-bottom: 0;

  a
    cursor: pointer;

.student
  background: radial-gradient(circle, rgb(1, 79, 116) 20%, rgb(15, 15, 99) 100%);
.teacher
  background: radial-gradient(circle, rgb(5, 116, 1) 20%, rgb(11, 68, 10) 100%);
.admin
  background: radial-gradient(circle, rgb(116, 74, 1) 20%, rgb(99, 42, 15) 100%);

#page
  margin: 0;

#edtjour
  .edtflex
    display: flex;
    flex-direction: column;
    div:last-child
      border: none;
    div
      text-align: center;
      font-size: 20px;
      background-color: $dark2;
      padding: 0 10px;
      border-bottom: 2px solid $light3;
    .edthead
      border: none;
      font-size: 30px;
      background-color: $secondary;
    .edtmidi
      height: 100px;
      background-color: $dark3;

#filactu
  .actuflex
    background-color: $dark3;
    padding: 0;
    height: 700px;
    display: flex;
    flex-direction: column;
    div:last-child
      border: none;
    .actucontent
      overflow-y: scroll;
      padding: 0;
      height: 700px;
      cursor: auto;
      div:hover
        background-color: $medium;
    div
      text-align: left;
      cursor: pointer;
      font-size: 20px;
      background-color: $dark2;
      padding: 0 10px;
      border-bottom: 2px solid $light3;
    p
      margin: 0;
      padding: 10px;
    .actuhead
      border: none;
      cursor: auto;
      font-size: 30px;
      background-color: $secondary;
      text-align: center;
      p
        padding: 30px;
    .actuhead:hover
      background-color: $secondary;

#welcome
  padding-bottom: 20px;

h3
  font-size: 30px;
  text-align: center;

#edttable
  margin-top: 100px;
  border-collapse: collapse;
  border: 1px solid white;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  .midi
    td
      height: 109px;
  th
    background-color: $secondary;
    text-align: center;
    border-radius: 0;
    border: 1px solid white;
    font-size: 25px;
  tr
    td:first-child
      border-left: 1px solid white;
    td:last-child
      border-right: 1px solid white;
  tr:last-child
    td
      border-bottom: 1px solid white;
  td
    text-align: center;
    font-size: 20px;
    background-color: $medium;
    padding: 0;
    border-radius: 0;
    border: 1px solid black;
  td:nth-child(even)
    background-color: $dark2;

#edtweek
  i
    cursor: pointer;
  div:nth-child(1)
    text-align: right;
  div:nth-child(3)
    text-align: left;


#marks
  table
    border: 1px solid white;
    margin-top: 80px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
    tbody
      display: block;
      height: 270px;
      overflow: auto;
    thead, tbody tr
      display: table;
      width: 100%;
      table-layout: fixed;
    th
      border: 1px solid white;
      background-color: $secondary;
      text-align: center;
      font-size: 30px;
    td
      font-size: 25px;
      cursor: pointer;
      padding: 0;
      text-align: center;
      background-color: $dark2;
      border-radius: 0;
      border: 1px solid $medium;

.marksdetails
  display: none;
  z-index: 1;
  position: fixed;
  left: 40%
  top: 20%;
  width: 30%;
  table
    border-collapse: collapse;
    border: 1px solid white;
  th
    text-align: center;
    font-size: 25px;
    border: 1px solid white;
    background-color: $secondary;
  td
    text-align: center;
    background-color: $dark2;
    border: none;
    font-size: 25px;
  tr:last-child
    td
      border-bottom: 1px solid white;

div#visible
  display: block;

div#visible + div
  filter: blur(4px) grayscale(80%);

.marksgroup
  display: none;
  margin-top: 300px;
  h3
    background-color: $secondary;
    margin: 0;
    padding: 20px;
    font-size: 30px;

#flexgroup
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  background: $dark2;
  p
    background-color: $medium;
    cursor: pointer;
    padding: 20px;
    font-size: 25px;

#markstable
  width: 95%;
  table-layout: fixed;
  margin: auto;
  tbody
    display: block;
    height: 70vh;
    overflow: auto;
  thead, tbody tr
    display: table;
    width: 100%;
    table-layout: fixed;
  ::placeholder
    color: #000;
    opacity: 1;
  th
    background-color: $secondary;
    border: 2px solid white;
    text-align: center;
    font-size: 30px;
    input
      font-size: 30px;
      border: none;
      color: white;
      text-align: center;
  tr
    td
      background-color: $medium;
  tr:nth-child(even)
    td
      background-color: $dark2;
  td
    text-align: center;
    font-size: 25px;
    border: 1px solid $light;
    input
      font-size: 25px;
      border: none;
      color: white;
      text-align: center;

#marksubmit
  display: block;
  width: 30%;
  background-color: $secondary;
  margin-top: 50px;
  color: white;
  border: none;
  margin-left: auto;
  margin-right: auto;
  font-size: 30px;
  padding: 15px;
  cursor: pointer;
  margin-bottom: 50px;