$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: 15px
  display: block
  margin-left: auto
  margin-right: auto
  margin-top: 15px
  cursor: pointer

.invisible
  display: none

.signinup
  margin-top: 15vh
  background-color: $dark2
  border-radius: 2vw
  form
    input
      color: $light
      margin-bottom: 4vh
      font-size: 18px
    input[type="submit"]
      padding: 1vw
      border-radius: 2vw
      background-color: $secondary
      color: white
      border: none
      width: 40%
      display: block
      margin: auto
      font-size: 18px
      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: 22px
  .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: 18px
  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:first-child
      p
        margin: 22px
    div:last-child
      border: none
    div
      text-align: center
      font-size: 15px
      background-color: $dark2
      padding: 0 10px
      border-bottom: 2px solid $light3
      p
        margin: 10px
    .edthead
      border: none
      font-size: 22px
      background-color: $secondary
    .edtmidi
      height: 10vh
      background-color: $dark3

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

#welcome
  padding-bottom: 25px
  font-size: 35px

h3
  font-size: 22px
  text-align: center

#edttable
  margin-top: 5vh
  border-collapse: collapse
  border: 1px solid white
  width: 90%
  margin-left: auto
  margin-right: auto
  .midi
    td
      height: 10vh
  th
    background-color: $secondary
    text-align: center
    border-radius: 0
    border: 1px solid white
    font-size: 18px
  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: 15px
    background-color: $medium
    padding: 0
    border-radius: 0
    border: 1px solid black
    p
      margin: 10px
  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: 194px
      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: 22px
    td
      font-size: 18px
      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: 18px
    border: 1px solid white
    background-color: $secondary
  td
    text-align: center
    background-color: $dark2
    border: none
    font-size: 18px
  tr:last-child
    td
      border-bottom: 1px solid white

div#visible
  display: block

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

.marksgroup
  margin-top: 300px
  h3
    background-color: $secondary
    margin: 0
    padding: 15px
    font-size: 22px

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

#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: 22px
    input
      font-size: 22px
      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: 18px
    border: 1px solid $light
    input
      font-size: 18px
      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: 22px
  padding: 15px
  cursor: pointer
  margin-bottom: 50px

#notvisible
  display: none

#marksform
  display: none