$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

#main
  background-color: $dark1

#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
  cursor: pointer

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

  a
    cursor: pointer

.student
  background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%)
.teacher
  background-image: radial-gradient( circle farthest-corner at -1% 57.5%,  rgba(19,170,82,1) 0%, rgba(0,102,43,1) 90% )
.admin
  background-image: radial-gradient( circle farthest-corner at 7.2% 19%,  rgba(120,0,0,1) 0%, rgba(239,75,75,1) 100.2% )

#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
      cursor: auto
  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
    cursor: pointer
    text-align: center
    font-size: 15px
    background-color: $medium
    padding: 0
    border-radius: 0
    border: 1px solid black
    height: 10vh
    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


#marksrow
  padding: 20px 70px



#marksdetails, #details
  z-index: 100001
  position: fixed
  top: 20%
  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

#absences
  padding: 50px
  .abshead
    background-color: $secondary
    font-size: 25px
    text-align: center
    p
      padding: 5px
      margin: 0

  .abscont
    p
      background-color: $dark2
      font-size: 15px
      transition-duration: 0.2s
      margin: 0
      padding: 10px
    p:hover
      background-color: $light3

#btmviescol
  #events, #objtrouv
    padding: 50px
    .eventhead, .objtrouvhead
      background-color: $secondary
      font-size: 25px
      text-align: center
      p
        padding: 5px
        margin: 0

    .eventcont, .objtrouvcont
      p
        background-color: $dark2
        font-size: 15px
        transition-duration: 0.2s
        margin: 0
        padding: 10px

      p:hover
        background-color: $light3

.abogest
  margin: auto
  display: block
  background-color: $secondary
  color: white
  padding: 10px
  border-radius: 2px
  border: none
  font-size: 20px
  margin-top: 30px

.managesub
  z-index: 1
  display: none
  width: 50%
  position: fixed
  top: 30%
  left: 30%
  background-color: $dark2
  .topicname
    background-color: $secondary
    font-size: 20px
    margin: 0
    padding: 10px

  form
    font-size: 15px
    padding: 15px

    input[type='submit']
      display: block
      margin: auto
      padding: 10px
      font-size: 20px
      border: none
      border-radius: 2px
      background-color: $secondary
      color: white
      cursor: pointer

#editprofil
  padding-left: 70px
  padding-right: 70px
  input
    color: white

  input[type='submit']
    color: white
    background: $secondary
    padding: 10px
    font-size: 20px
    border: none
    border-radius: 2px
    display: block
    margin: auto
    cursor: pointer

.detailsedt
  z-index: 1
  position: fixed
  top: 20vh
  left: 30%
  background-color: $dark2
  width: 40%
  border-radius: 50px
  border: 1px solid $light3
  p
    font-size: 20px
    padding: 5px
    color: white
    margin: 0
    text-align: center
  p:first-child
    font-size: 25px
    background-color: $secondary
    border-top-right-radius: 50px
    border-top-left-radius: 50px

#slide-out
  background-color: $dark2
  a
    color: white
    font-size: 20px

#hamburger
  position: fixed
  top: 0
  left: 0
.grades
  border: 2px solid white
  height: 202px
  overflow-y: auto


.evaluationName
  border: 2px solid white
  margin-top: 50px
  border-bottom: none
  background-color: $secondary
  padding: 20px
  margin-left: 0
  margin-right: 0
  margin-bottom: 0
  font-size: 30px
  text-align: center
  z-index: 0

.marksCursorPointer
    width: 50%
    border: 1px solid black
    color: black

.flex-container-marks
  display: flex
  flex-direction: row
  flex-wrap: wrap
  div
    text-align: center
    font-size: 15px
    padding: 10px

#marksdetailsbackground
    z-index: 100000
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 500vh
    background-color: rgba(0,0,0,0.5)

.marks-20
 background-color: #00ff00
.marks-18
  background-color: #40cf49
.marks-16
  background-color: #8dd992
.marks-14
  background-color: #b9f6ca
.marks-12
  background-color: #fff9c4
.marks-10
  background-color: #ffb74d
.marks-8
  background-color: #f57c00
.marks-6
  background-color: #e65100
.marks-4
  background-color: #bf360c

#formteachermarks
  padding: 50px
  margin: 30px
  padding-top: 0
  margin-top: 10px
  label
    color: white
  input
    color: white
  h1
    font-size: 30px