html {
    font-size: 10px;
    background: #E8F8EF;

}
html,
body {
    height:100%;
    margin: 0;
    padding: 0;
    

}
/* ###############
LINKS
############### */
a {
    text-decoration: none;
    color: var(--color-blue);
}
ul {list-style-type: none;}


/* ###############
colours
############### */
:root {
    --color-coral: hsl(16, 100%, 66%);
    --color-white: #fff;
    --color-off-white: hsl(60, 3%, 94%);
    --color-off-white2: ghostwhite;
    --color-blue: hsl(217, 89%, 61%);
    --color-light-grey:  hsl(0, 0%, 87%);
    --color-black: hsl(0, 0%, 0%);
    --color-black-grey: hsl(0, 0%, 20%);
    --color-pink: hsl(350, 100%, 88%);
    --color-alpha-grey: rgba(0,0,0,.03);
    --color-purple: #82368C;
/* SHADOWS */
    --shadow-black: hsla(0, 0%, 0%,.3);
  }

/* ###############
HEADERS AND TEXT
############### */
* { 
    font-size: 1.6rem;
    font-family: Helvetica,Arial,sans-serif;
    color: var(--color-black-grey);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
h1,h2,h3,h4,h5 {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 3.2rem;
    margin: 0;
    color: var(--color-purple);
    text-align: center;
    margin: 1rem 0;
}


h1 {margin: 4rem 0;}
i {color: var(--color-purple);}
h1 i {
    font-size: 1em;
}

/* ###############
REGISTER FORM
############### */
.signInContainer,.container {
    background-color: var(--color-off-white);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.column{
    background-color: var(--color-white);
    min-height: 300px;
    max-height: 100%;
    min-width: 35rem;
    box-shadow: var(--shadow-black) 0 1px 2px;
    padding: 2rem 3.5rem;
    overflow-y: auto;
}

.column form {
    display: flex;
    flex-direction: column;
}

.column form input[type="text"]
.column form input[type="email"],
.column form input[type="password"] {
    font-size: 1.6rem;
    margin: 10px 0;
    border: none;
    border-bottom: 1px solid var(--color-light-grey);
}
.column form input[type="submit"]{
    background-color: var(--color-blue);
    color: var(--color-white);
    height: 3.6rem;
    width: 8.8rem;
    border: none;
    border-radius: 3px;
    font-weight: 500;
    margin: 10px 0 20px 0;
    font-size: 1.6rem;
}
.signupHeader {
    padding: 2rem 0;
}
.signupHeader img {
    width: 150px;
    margin-left: 5rem;
}
.signInMessage {
    font-size: 1.4rem;
    text-decoration: none;
}

.errorMessage {
    color: red;
    font-size: 1.4rem;
    text-align: center;
    font-weight: 400;
}
/* ###############
HEADER
############### */
header {background: #fff;}



/* ###############
NAV
############### */

.nav_links li {
    padding: 1rem;
    white-space: nowrap;
    border: none;
   
}
.nav_links a{
    color: var(--color-purple);
}

/* ###############
MOBILE NAV
############### */
.nav_links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

}
.toggle {
    order: 1;
}
.toggle i{
    font-size: 2.5rem;
    transition: .4s;
}
/*
.logo {
    max-width: 12rem;
}*/
.logo-icon{max-width: 100%;}
.logo a:hover {
    text-decoration: none;
}

.item {
    width: 100%;
    text-align: left;
    order: 3;
    display: none;
    transition: .6s;
    background-color: var(--color-off-white2);
}
.item.user {
    order:2;
   
}

/* OLD NAV WITH SPAN
.account {
    background-color: var(--color-pink);
    border-radius: 8px;
    padding: .5rem 0;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    order: 2;
    display: flex;
}
.account li {
    margin: 0 auto;
}
.admin_nav {
    background-color: var(--color-alpha-grey);
    border-radius: 8px;
    padding: .5rem 0;
}
*/
.item.active {display: block;transition: .7s;}
/* ###############
TABLET NAV
############### */
@media all and (min-width: 600px) { 
    .nav_links {justify-content: center;}
    .logo{flex: 1;}
    .toggle{
        flex: 1;
        text-align: right;
    }
    .item.user{
        width: auto;
        order: 1;
        display: block;
        background: none;
        padding-right: 2rem;

    }
    .toggle{order: 2;}
    .user a, .first_assessment_link {
        padding: 7.5px 15px;
        background-color: var(--color-purple);
        border: 1px var(--color-purple) solid;
        border-radius: 4px;
        color: var(--color-white);
        transition: .4s;

    }
    .user i,.first_assessment_link i {
        color: var(--color-white);
    }
    .user a:hover,.first_assessment_link:hover {
        text-decoration: none;
        background-color: var(--color-blue);
        border-color:var(--color-blue);
    }
    

}
@media all and (min-width: 900px){
    .item {
        display: block;
        width: auto;
    }
    .toggle{display: none;}
    .logo {order:0;}
    .item {order:1;background: none;}
    .user{order:2;}
    .nav_links li {padding: 1rem .8rem;}
    .nav_links li .user{padding-right: 0;}
}


/* ###############
MAIN CONTENT
############### */
form {
    margin-bottom: 10rem;
}
fieldset,.edit_table, .list_table,.main_section,.secondary_section{
    position: relative;
    border-radius: 15px;
    border: none;
    background-color: #FFF;
    border-radius: 15px;
    padding: 2rem;
    letter-spacing: -0.5px;
    margin: 2rem;
}
.assessment_date {text-align: center;}
legend {
    position: absolute;
    top: 1rem;
    left: 2rem;
    font-size: 2.2rem;
    color: var(--color-purple);
    font-weight: 600;
}
fieldset p {
    margin: 2rem 0;
}
.title-heading {
    font-size: 25px;
    margin-bottom: 1em;
}
form button {
    margin: 1rem 0 0 3rem;
}
.survey_span{ /* assessment form user info headings */
 font-size: 2.5rem;
 color: var(--color-purple);
 font-weight: 600;
}
.assessment_message{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 2rem auto;
    padding: 2rem;
}
input[type=radio]{
    padding: 0;
    margin-right: .1rem;
    min-width: .8rem;
}
#skills-form label{
    padding: 0;
    margin-right: .5rem;
}
/* ADMIN MANAGE SURVEY */
section h1 {
    text-align: center;
    margin: 4rem 0;
  }
  .manage-survey{
      display: flex;
      justify-content: space-between;
  }
  .edit_table, .list_table{
      align-items: flex-start;
      display: inline-flex;
      width: 30%;
      flex-direction: column;
    
  }
  .list_table {width: 60%;}
  .form_group label,.form_group button, .list_table h3,.list_table table{
      display: block;
      margin: 1rem 0;
  }
  tr,td,th {
      /*border:1px solid #cfcfcf;*/
      margin: 0;
      padding: 0;
  }
  td {
    padding: .5rem;
    border-bottom: 1px solid var(--color-blue);
  }
  @media screen and (max-width: 760px) {
      .edit_table, .list_table{
        
          display: block;
          width: 100%;
       
        
      }
  }
  
  input,select {
    font-size: 1.6rem;
    padding: 1rem;  
    border-radius: 4px;
    border: 1px solid lightblue;
    max-width: 300px;
  }
 
  label {
    font-size: 2rem;
  }
.form_group h3, h4, h5 {
    text-align: left;
}
.current_selection {
    text-align: left;
}
p.current_selection{
    background: lightgrey;
    padding: 1em;
    max-width: 25rem;
}

/* ###############
BUTTON
############### */
  .courses__category-button {
      font-size: 15px;
      letter-spacing: -0.3px;
      display: inline-block;
      position: relative;
      width: auto;
      line-height: 1;
      letter-spacing: -0.35px;
      color: white;
      font-weight: bold;
      background-color: #82368C;
      box-shadow: #5F2766 0px 6px 0px 0px;
      border: none;
      border-radius: 5px;
      padding: 1em 3em 1em 1em;
      display: inline-block;
      margin-bottom: 1em;
      transition: padding 0.5s, background-color 0.1s, box-shadow 0.1s, -webkit-transform 0.1s;
      transition: padding 0.5s, transform 0.1s, background-color 0.1s, box-shadow 0.1s;
      transition: padding 0.5s, transform 0.1s, background-color 0.1s, box-shadow 0.1s, -webkit-transform 0.1s;
      cursor: pointer; }
      .courses__category-button::after {
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s; }
      .courses__category-button:hover {
        box-shadow: #5F2766 0px 4px 0px 0px;
        -webkit-transform: translateY(2px);
                transform: translateY(2px); }
        .courses__category-button:hover::after {
          -webkit-transform: translateX(5px);
                  transform: translateX(5px); }
      .courses__category-button:active {
        -webkit-transform: translateY(5px);
                transform: translateY(5px);
        background-color: #5F2766;
        box-shadow: #5F2766 0px 0px 0px 0px;
        -webkit-tap-highlight-color: #5F2766; }
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .courses__category-button {
          border-bottom: 1px solid #82368C; } }
      .courses__category-button::after {
        content: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z' fill='%23fff'/%3E%3C/svg%3E");
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: absolute;
        right: 0;
        width: 3em;
        top: 0.15rem;
        height: 100%; }



  /* 
  ========================================
  ====  MANAGER DASHBOARD ======= ======= 
  ========================================
  */

  #tutor-select, #scores{display: none;} 

  /* 
  ====================
  ====  CHARTS ======= 
  ====================
  */
   .score_header {
       background-color: var(--color-purple);
   }
  .user_scores_table {
    border-radius: 6px;
    box-shadow: var(--shadow-black);
    display: table;
    border-collapse: separate;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
    width: 100%;
    margin: 0 auto;
   
  }
  .user_scores_table th{
    color: #ffffff;
    background: var(--color-purple);
    padding: .7rem 1rem;
    text-align: left;
    }
    .user_scores_table td {
        padding: 1rem;
        text-align: left;
        background-color: var(--color-off-white);
        border-bottom: var(--color-blue);
    }


 /* ###############
CSS BASED CHART
############### */
    dl {
        display: -webkit-box;
        display: flex;
        background-color: white;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        width: 100%;
        max-width: 700px;
        position: relative;
        padding: 20px;
      }
      
      dt {
        align-self: flex-start;
        width: 100%;
        font-weight: 700;
        display: block;
        text-align: center;
        font-size: 1.2em;
        font-weight: 700;
        margin-bottom: 20px;
        margin-left: 130px;
      }
      
      .text {
        font-weight: 600;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
                align-items: center;
        height: 40px;
        width: 130px;
        background-color: white;
        position: absolute;
        left: 0;
        -webkit-box-pack: end;
                justify-content: flex-end;
      }
      
      .percentage {
        font-size: .8em;
        line-height: 1;
        text-transform: uppercase;
        width: 100%;
        height: 40px;
        margin-left: 130px;
        background: repeating-linear-gradient(to right, #ddd, #ddd 1px, #fff 1px, #fff 5%);
      }
      .percentage:after {
        content: "";
        display: block;
        background-color: #3d9970;
        width: 50px;
        margin-bottom: 10px;
        height: 90%;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        -webkit-transition: background-color .3s ease;
        transition: background-color .3s ease;
        cursor: pointer;
      }
      .percentage:hover:after, .percentage:focus:after {
        background-color: #aaa;
      }
      
      .percentage-1:after {
        width: 20%;
      }
      
      .percentage-2:after {
        width: 40%;
      }
      
      .percentage-3:after {
        width: 60%;
      }
      
      .percentage-4:after {
        width: 80%;
      }
      
      .percentage-5:after {
        width: 100%;
      }