*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  line-height: 26px;
  color:var(--client-text-colour);
  background-color:#f5f5fc;
  overflow-x:hidden;
}

img{
  border: 0;
  max-width:100%;
  vertical-align:middle;
}

a{
  text-decoration: none;
  cursor:pointer;
  transition:.7s color, .7s background-color, .7s box-shadow, .7s opacity;
  color:var(--client-link-colour);
}
a:focus{
  outline: none;
  color:var(--client-link-colour);
}
a:hover{
  transition:.3s color, .3s background-color, .3s box-shadow, .3s opacity;
  color:var(--client-link-colour);
  opacity: .5;
}


h2{
  font-size: 35px;
  line-height: 40px;
  font-weight: 500;
  margin-bottom: 45px;
  color:var(--client-heading-colour);
}


h3{
  font-size: 30px;
  line-height: 35px;
  font-weight:500;
  margin-top: 40px;
  margin-bottom: 20px;
  color:var(--client-heading-colour);
}


h4{
  font-size: 16px;
  font-weight: 600;
  margin: 30px 0 5px 0;
  color:var(--client-heading-colour);
}

h3:first-child, h4:first-child{
  margin-top:0;
}
h3:last-child{
  margin-bottom:0;
}

p{
  margin-bottom: 15px;
}
p:last-child{
  margin-bottom:0;
}

ul, ol{
  margin: 0 0 15px 30px;
}

.large{
  font-size: 20px;
  line-height: 35px;
}
.small{
  font-size: 14px;
  line-height: 20px;
}

.light{
  font-weight:300;
}
.semi{
  font-weight: 600;
}

.clear{ clear: both; }

#wrapper{
  position:relative;
}

.container{
  margin: 0 auto;
  width: 96%;
  max-width: 900px;
  position:relative;
  overflow:hidden;
}
.container.narrow{
  max-width: 750px;
}

.widthlimit{
  max-width: 500px;
  margin: 0 auto;
}

.fullheight{
  height: 100vh;
}

.white{
  background-color:#FFF;
}
.radius{
  border-radius: 12px;
}
.shadow-light{  
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;
}

.flex{
  display:flex;
}
.flex.wrap{
  flex-wrap:wrap;
}
.flex.end{
  align-items:flex-end;
}
.flex.vert{
  align-items:center;
}

.flex .half{
  width: 47%;
  margin-right: 6%;
}
.flex .half:nth-child(2n+2){
  margin-right:0;
}

.flex .third{
  width: 32%;
  margin-right: 2%;
}
.flex .third:nth-child(3n+3){
  margin-right:0;
}

.flex .main{
  width: 80%;
}
.flex .side{
  width: 20%;
}


.margined{
  margin: 75px auto;
}
.margined-small{
  margin: 20px auto;
}

.topmargin{
  margin-top: 75px;
}
.bottommargin{
  margin-bottom: 75px;
}
.topmargin-sm{
  margin-top: 20px;
}
.bottommargin-sm{
  margin-bottom: 20px;
}


.padded{
  padding: 75px;
}
.padded-sm{
  padding: 40px;
}


.left{
  text-align:left;
}
.center{
  text-align:center;
}
.right{
  text-align:right;
}



.inline{
  display:inline !important;
}
.inlineblock{
  display:inline-block !important;
  width: auto !important;
}
.block{
  display:block !important;
}

.bgcover{
  background-size:cover;
  background-position: center center;
}

.blur{
  filter: blur(3px);
  transition: 1s filter;
}

.relative{
  position:relative;
}
.absolute{
  position:absolute;
}
.absolute.top{
  top:0;
  left:0;
  width:100%;
}
.absolute.bottom{
  bottom:0;
  left:0;
  width:100%;
}



label{
  display: block;
  margin: 25px 0;
}

.input, .textarea, .select{
  display:block;
  width: 100%;
  background-color:#FFF;
  padding: 20px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  color:#1D3368;
  border:0;
  border-radius: 12px;
  transition:.7s box-shadow;
}
.textarea{
  height: 150px;
}

.input::placeholder, .textarea::placeholder{
  color: #8F9AB4;
}
.input:focus, .textarea:focus{
  outline: none;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  transition:.3s box-shadow;
}



.button{
  display: block;
  width: 100%;
  border-radius: 12px;
  background-color:var(--client-theme-colour);
  color:#FFF;
  padding: 15px 50px;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  border:0;
  transition: .7s box-shadow;
  cursor:pointer;
}

.button.white{
  background-color:#FFF;
  color:var(--client-theme-colour);
}
.button.white:hover{
  color:var(--client-theme-colour);
}

.button.light{
  background-color:#f1f1f1;
  color: #666;
}
.button.light:hover{
    color:var(--client-theme-colour);
}

.button.icon{
  display: inline-block;
  width: auto;
  padding: 5px;
  width: 50px;
  font-size: 20px;
  background-color: #666;
}
.button.icon:hover{
  background-color:var(--client-theme-colour);
}

.button.completebutton{
  margin: 0 auto 0 auto;
  border-radius: 90px 90px 0 0;
  position:relative;
  top: 40px;
  max-width: 400px;
  background-color:var(--client-theme-colour);
  color:#FFF;
}

.button:hover{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  color:#FFF;
  transition: .3s box-shadow;
}

.login{
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
}

.reset{
  margin-top: 20px;
  font-size: 14px;
}

.copy{
  font-size: 12px;
  line-height: 15px;
  color: #8F9AB4;
  padding: 25px 0;
}





.logo{
  max-width: 150px;
  max-height: 80px;
}


#login-container{
  position:relative;
  width: 100vw;
  z-index: 9;
}

#login-container.slide-left{
  width: 50vw;
  background-color:#f5f5fc;
  transition: 1s all;
}


#agreement{
  position:absolute;
  z-index: 99;
  top:0;
  right:0;
  width: 50vw;
  height: 100vh;
  background-color:var(--client-theme-colour);
  color:#FFF;
  overflow-y: auto;
  font-size: 12px;
  line-height: 17px;
}
#agreement.off{
  right: -80vw;
}
#agreement.on{
  right: 0;
  transition: 1s right;
}


.bio-photo{
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 5px solid #BCD6FC;
  background-size: cover;
  background-position: top center;
}


.course-header{
  padding: 20px 50px;
  margin-bottom: 15px;
}
.course-header .left, .course-header .right{
  width: 20%;
}
.course-header .heading{
  width: 60%;
}

.menu-photo{
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background-color:#1D3368;
  background-size: cover;
  background-position: top center;  
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  position:relative;
  overflow:hidden;
}


#mobilenav {
  width: 45px;
  height: 35px;
  position: absolute;
  left: 20px;
  top: 23px;
  opacity: 0;
  transition: .7s opacity;
}

#mobilenav span {
  display: block;
  position: absolute;
  height: 5px;
  width: 50%;
  background: #fff;
  opacity: 1;
}

#mobilenav span:nth-child(even) {
  left: 50%;
}

#mobilenav span:nth-child(odd) {
  left:0px;
}

#mobilenav span:nth-child(1), #mobilenav span:nth-child(2) {
  top: 5px;
}

#mobilenav span:nth-child(3), #mobilenav span:nth-child(4) {
  top: 15px;
}

#mobilenav span:nth-child(5), #mobilenav span:nth-child(6) {
  top: 25px;
}

.menu-photo:hover #mobilenav{
  opacity: .8;
  transition:.3s opacity;
}


#sidebar{
  position:fixed;
  z-index: 99;
  top:0;
  width: 400px;
  height: 100vh;
  background-color:var(--client-theme-colour);
  color:#FFF;
  text-align:center;
  padding: 40px;
}

#sidebar.off{
  right: -500px;
  transition: 1s right;
}
#sidebar.on{
  right: 0;
  transition: 1s right;
}

#sidebar h3{
  color:#FFF !important;
}

.curve{
  position:absolute;
  right: 400px;
  bottom:0;
  width: 100px;
  z-index:10;
}
#agreement .curve{
  right: 50vw;
}



#sidebar.on .sidebar-close{
  display:block;
  position:fixed;
  right: 400px;
  top:0;
  height: 100vh;
  width: 100vw;
  cursor: default;
}
#sidebar .menu-photo{
  width: 120px;
  height: 120px;
}

#sidebar nav a{
  display: block;
  color:#FFF;
  margin-bottom: 15px;
  font-size: 18px;
}
#sidebar nav a.current{
  font-weight: 500;
}

#sidebar nav .sublinks{
  margin-bottom: 15px;
}
#sidebar nav .sublinks a{
  font-size: 13px;
  margin-bottom: 5px;
}

#sidebar .close{
  position:absolute;
  right:20px;
  top: 20px;
  color:#FFF;
}

.progress{
  display:block;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 12px;
  font-size: 18px;
}
.progress:last-child{
  margin-bottom:0;
}
.progress .number{
  display: inline-block;
  width: 40px;
  color:var(--client-theme-colour); 
  font-weight: 500;
}
.progress .number img{
  width: 20px;
}
.progress .bar{
  display:block;
  background-color: #EEF3FD;
  height: 12px;
  border-radius: 5px;
  margin-top: 5px;
}
.progress .bar .percent{
  display: block;
  height: 12px;
  border-radius: 5px;
  background-color:var(--client-theme-colour);
  animation: progress-bar 2s;
}



@keyframes progress-bar {
   0% { width: 0; opacity: 1;}
}

.progress:hover{  
  color: #1D3368;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;
}



.apexcharts-text {
  font-weight: 500 !important;
  font-family: 'Ubuntu', sans-serif !important;
}


.top-progress{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height: 10px;
  display:flex;
}
.top-progress div{
  flex:1;
  border-right: 1px solid #FFF;
}
.top-progress div.complete{
  animation: progress-complete;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.top-progress div.complete.in-progress{
  opacity: .3;
}
@keyframes progress-complete{
  0%{
    background-color:#FFF;  
  }
  100%{
    background-color:var(--client-theme-colour);    
  }
}
.top-progress div:last-child{
  border-right:0;
}

.delay1{  animation-delay: 0.1s !important; }
.delay2{  animation-delay: 0.2s !important; }
.delay3{  animation-delay: 0.3s !important; }
.delay4{  animation-delay: 0.4s !important; }
.delay5{  animation-delay: 0.5s !important; }
.delay6{  animation-delay: 0.6s !important; }
.delay7{  animation-delay: 0.7s !important; }
.delay8{  animation-delay: 0.8s !important; }
.delay9{  animation-delay: 0.9s !important; }
.delay10{  animation-delay: 1.0s !important; }
.delay11{  animation-delay: 1.1s !important; }
.delay12{  animation-delay: 1.2s !important; }
.delay13{  animation-delay: 1.3s !important; }
.delay14{  animation-delay: 1.4s !important; }
.delay15{  animation-delay: 1.5s !important; }


.grey{  
  background-color:#f5f5fc;
  padding: 20px;
}


.numberline{
  margin-bottom: 5px;
  font-size: 12px;
  text-transform: uppercase;
}
.blue-number{
  display: inline-block;
  background-color:var(--client-theme-colour);
  color:#FFF;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  border-radius: 100%;
  margin-right: 5px;
  vertical-align:middle;
}

.round{
  border-radius: 12px;
}

.link{
  margin-bottom: 20px;
}
.link .icon{
  width: 50px;
  text-align:center;
}
.link .icon img{
  width: 25px;
  transition:.7s width;
}

.link .title{
  width: calc(100% - 50px);
  padding: 15px;
  border-radius: 12px;
  color:#8F9AB4;
  font-size: 18px;
  transition:.7s box-shadow, .7s color;
}
.link:hover .title{
  color: #1D3368;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;  
  transition:.3s box-shadow, .3s color;
}
.link:hover .icon img{
  width: 32px;
  transition:.3s width;
}

.link.disabled, .progress.disabled{
  cursor:not-allowed;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.embedded-item{
  min-height: 400px;
}


.file{
  display:block;
  padding: 10px;
  border-radius:12px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;
  color:#8F9AB4;
  font-size: 18px;
}
.file:hover{
  color: #1D3368;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.file span{
  display: block;
  border-radius: 12px;  
  background-color:#f5f5fc;
  padding: 20px;
}
.file i{
  margin-right: 15px;
}



.fadein{
  opacity: 0;
  animation: fade-in .5s;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
   0% { opacity: 0;}
   100%{ opacity: 1;}
}



.field{
  margin: 0 0 5px 0;
}

.field .label{
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 13px;
}

.field label{
  margin:0;
  position:relative;
  padding: 15px 15px 15px 55px;
  border-radius: 12px;
  color:#666;
  font-size: 18px;
  transition:.7s box-shadow, .7s color;
}
.field label:hover{
  color: #1D3368;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;  
  transition:.3s box-shadow, .3s color;
}

.field.radio input{
  display:none;
}

.field.radio img{
  position:absolute;
  top: 15px;
  left: 15px;
  width: 25px;
  margin-right: 15px;
  transition:.3s opacity;
}

.field.radio img.checked{
  opacity:0;
}
.field.radio img.unchecked{
  opacity:.5;
}

.field.radio:hover img.checked{
  opacity: 0;
  transition:.3s opacity;
}
.field.radio:hover img.unchecked{
  opacity: 1;
  transition:.3s opacity;
}

.field.radio input:checked + label img.checked{
  opacity: 1;
  transition:.3s opacity;
}
.field.radio input:checked + label img.unchecked{
  opacity: 0;
  transition:.3s opacity;
}

.field.radio input:checked + label{
  color: #1D3368;
}

.field .textarea, .field .input, .field .select{
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;  
}
.field .textarea:focus, .field .input:focus, .field .select:focus{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.field.margined{
  margin: 20px 0;
}

.todo{
  color:red;
  border: 2px dashed red;
  padding: 20px;
  text-align:center;
  margin: 20px 0;
}


.result{
  margin-top: 25px;
}
.result .result-question{
  width: 80%;
}
.result .icon{
  width: 20%;
  text-align:right;
}
.result .icon img{
  width: 25px;
}

.result .result-question .result-answer{
  font-style: italic;
  font-size: 14px;
  line-height: 21px;
}

.result.wrong{
  color:var(--client-theme-colour);
}



.note{
  padding: 10px 20px;
  text-align:center;
  border-radius: 12px;
  margin: 20px 0;
  color: #FFF;
  background-color:var(--client-link-colour);
}
.error{
  padding: 10px 20px;
  text-align:center;
  border: 2px solid red;
  border-radius: 12px;
  margin: 20px 0;
  color: red;
  background-color:#FFF;
}



.menu-photo-position{
  position: fixed;
  top: 20px;
  right: 50px;
  transition:.3s top;
}
.blur .menu-photo-position{
  top: -100px;
  transition:.3s top;
}


.sidenav-pad{
  padding: 20px 0 20px 20px;
}
.sidenav{
  width: 280px;
  position:absolute;
  left:0;
  top: 0;
  min-height: calc(100vh - 20px);
  font-size: 15px;
}

.sidenav .portal-logo{
  padding-left: 50px;
  height: 100px;
}

.sidenav ul{
  list-style-type:none;
  margin: 0 0 0 20px;  
}
.sidenav ul li a{
  display: block;
  padding: 8px 5px 8px 30px;
  color:#1D3368;
}
.sidenav ul li a:hover{
  color: var(--client-theme-colour);
}

.sidenav ul li a.current{
  background-color:#FFF;
  padding-left: 25px;
  border-left: 5px solid var(--client-theme-colour);
  border-radius: 0 12px 12px 0;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;
}

.sidenav ul li ul{
  margin-top: 0;
  margin-bottom: 0px;
}

.sticky{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}


.gone{ display: none; }
.here{ display: block; }


.modal{
  padding: 35px 60px;
  overflow:hidden;
}
.fancybox-content{
  padding: 0 !important;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;
}
.fancybox-bg{
  background-color:#f5f5fc !important;
  opacity: .8 !important;
}

body.editor{
  font-family: helvetica, arial;
  font-weight: normal;
  padding: 20px;
}

.divider{
  margin: 40px 0;
  border-bottom: 1px solid #f5f5fc;
}
  

table{
  border-collapse:collapse;
  width:100%;
}
table tr td, table tr th{
  border-bottom: 1px solid #CCC;
  padding: 10px 15px;
  text-align:left;
}
table tr th{
  font-weight:700;
}


.mobileheading{
  display:none;
}

.spacer{
  height: 45px;
}

.zindex{
  position:relative;
  z-index:1;
}

.quiz-back{
  position:absolute;
  left: 10px;
  top:10px;
}


.redo{
  background-color:#f1f1f1;
  padding: 15px;
  margin-top: 5px;
  margin-bottom: 40px;
  border-radius:5px;
}

.float-img-right{
  float:right;
  width: 50%;
  margin: 0 0 10px 20px;
}


.float-img-left{
  float:left;
  width: 50%;
  margin: 0 20px 10px 0;
}

#search.input{
  margin: 10px 0 30px 0;
  padding: 10px 20px;
}


.search-result{
  display:block;
  margin-bottom: 15px;
  color:#8F9AB4;
}