/* THEME SET */

:root {
    --root-fs: 16px;
    --background: #0493C9;
    --primary-1: #fff;
    --primary-2: #F4F4F4; 
    /*--primary-3: #c4c4c4;
    --primary-4: #aeaeae;
    --primary-5: #0493C9; */
    --primary-6: #000;
    --accent-1: #97CA3D;
    --accent-2: #C5B3D7;
    --accent-3: #FFDD00;
    --accent-4: #FCB316;
    --accent-5: #97D5C9;
    --text-dark: #000000;
    --text-dark2: #1D252C;
    --text-light: #fff;
    --font-heading-1: itc-avant-garde-gothic-pro, sans-serif;
    --font-heading-2: itc-avant-garde-gothic-pro, sans-serif;
    --font-paragraph: itc-avant-garde-gothic-pro, sans-serif;
    --fs-1: 3rem;
    --fs-2: 1.875rem;
    --fs-3: 1.125rem;
    --fs-4: 1rem;
    --fs-5: 0.75rem;
    --bg-img: var(--bg-colour);
    --border-radius-default: 0;
    --play-button: var(--play-colour);
}

html{
    font-size: var(--root-fs);
}

html[data-theme='blue']{
    --accent-colour: var(--accent-4);
    --accent-colour-2: #00B5AD;
    --bg-colour: url("../images/photos/SPL\ -\ Bags.jpg");
    --play-colour: url(../images/core/status/not_yet_started_teal_amaze.svg);
}
html[data-theme='orange']{
    --accent-colour: var(--accent-orange);
    --bg-colour: url("../images/photos/orange-bg.jpg");
    --play-colour: url(../images/core/status/not_yet_started_orange.svg);
}
html[data-theme='green']{
    --accent-colour: var(--accent-green);
    --text-light: var(--text-dark);
    --bg-colour: url("../images/photos/green-bg.jpg");
    --play-colour: url(../images/core/status/not_yet_started_green.svg);
}

body {
    margin: 0;
    background: none;
    background-color: #fff;
    background-attachment: fixed;
}

body::before {
    content: url("../images/core/background/Amaze_Hexagon_Blue.svg");
    position: fixed;
    width: 500px;
    height: 500px;
    top: -70px;
    right: -230px;
    transform: rotate(35deg);
    z-index: -1;
}

body::after {
    content: url("../images/core/background/Amaze_Hexagon_Purple.svg");
    position: fixed;
    width: 900px;
    height: 900px;
    bottom: -650px;
    left: 0px;
    transform: rotate(35deg);
    z-index: -1;
}

.fixed #header{
    box-shadow: none;
}

#legend{
    background-color: rgba(255, 255, 255, 0.85);
}

/*.fixed #legend{
    position: fixed;
    margin-top: 0;
    top: 135px;
    left: 0;
    width: 100%;
    z-index: 3;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 8px 6px rgb(28 27 27 / 30%)
}*/

#hamburger {
    background: url("../images/core/hamburger/hamburger_2x.png") no-repeat center var(--primary-2);
    padding: 5px;
}

#hamburger.open {
    background-image: url("../images/core/hamburger/close_2x.png");
}

#topMenu {
    top: 70px;
}

#topMenu li {
    background-color: var(--accent-colour);
}

#menu-items li {
    font-family: var(--font-paragraph) !important;
}



#topMenu li:hover, #topMenu li:focus {
    background-color: var(--accent-colour);
    opacity: 70%;
}

#topLine,
#footer {
    background-size: auto 80%;
    background-position: 50px;
    display: flex;
    height: 90px;
    justify-content: space-around;
}

#topLine {
    background-image: url("../images/logo/logo.png");
    background-size: auto 100%;
    background-position: 40px;
    background-color: var(--primary-2);
    display: flex;
    justify-content: space-around;
}

#footer #powered {
    background-image: url("../images/core/clearlogo/nobox-powered.png");
}

#journey {
    background: rgba(255, 255, 255, 0.85);
    max-width: 1098px;
}

.fixed {
    animation: 2s all ease;
}

.fixed #topLine::before {
    height: 70px;
}

.fixed #topLine {
    height: 70px;
}

.fixed #hamburger {
    top: 16px;
}

.fixed #header {
    text-align: center;
    display: flex;
}

.fixed #header h1 {
    font-size: 35px;
    margin: auto;
}

#footer::before {
    left: auto;
    right: -250px;
    top: 0px;
}

#footer a {  align-self: center;}
#footer #powered {
    height: 38px;
    width: 169px;
    align-self: center;
    background-image: url("../images/core/clearlogo/nobox-powered.png");
}

#footer #clientLogo {
    max-height: 45px;
    margin: auto 0; 
}

#header {
    background-color: var(--accent-colour);
    height: 90px;
    display: flex;
    justify-content: center;
}

#header h1 {
    font-family: var(--font-heading-1);
    /* text-transform: uppercase; */
    font-size: var(--fs-1);
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.05em;
    justify-content: center;
    align-self: center;
}

.nodeTitle {
    width: 350px;
    border-bottom: var(--accent-colour-2) 4px solid;
    border-radius: var(--border-radius-default);
    background-color: var(--primary-1);
    margin-left: -200px;
    margin-top: -60px;
    box-shadow: 0px 4px 21px rgba(0, 0, 0, 0.16);
    /* border:none !important; */
}

.nodeTitle.single {
    margin-top: -46px !important;
}

/* .nodeTitle::after {
    content: '';
    position: absolute;
    height: 5px;
    width: 340px;
    background-color: #E2178F;
    margin-left: -170px;
} */

.nodeTitle h2 {
    font-family: var(--font-heading-2);
    color: var(--text-dark2);
    font-style: normal;
    font-size: var(--fs-2);
    line-height: 114%;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
    text-align: left;
    /* text-transform: uppercase; */
}

.nodeTitle h2 span {
    color: var(--accent-colour) !important;
}

.nodeTitle .detailtext {
    margin-left: -322px;
    margin-top: 10px;
    color: var(--text-dark);
    font-size: var(--fs-3);
    background-color: transparent;
    box-shadow: none;
    font-family: var(--font-paragraph);
    width: 288px;
    text-align: right;
    font-weight: normal;
}

.line {
    color: var(--primary-1) !important;
    border-left: 0.125rem solid var(--primary-1) !important;
    margin-top: 15%;
    left: 43%;
    height: calc(100%);
    border-image: linear-gradient(to bottom, var(--accent-colour-2) calc(100% - 51px), rgba(0, 0, 0, 0) 0px);
    border-image-slice: 1;
}

.node .activity .status::before{
    content: 'Not yet started';
    color: var(--text-dark);
    font-size: var(--fs-5);
    line-height: 12px;
    font-weight: normal;
    font-family: var(--font-paragraph);
    position: absolute;
    top: -16px;
    left: 4px;
    cursor:default;
}

.activity h3 button {
    background-color: var(--primary-1);
    color: var(--text-dark);
    text-transform: none;
    font-weight: normal;
    font-family: var(--font-paragraph);
    padding-left: 48px;
    border: 0.125rem solid var(--accent-colour-2);
    border-radius: var(--border-radius-default);
    text-align: left;
    font-size: var(--fs-3);
    width: 318px;
    height: 86px;
    min-height: 70px;
    line-height: 26px;
    /* padding-right: 60px; */
    top: -60px
}

.activity h3 button .icons {
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: default;
}

.activity:not(.completed) h3 button svg.completed{
    display: none;
}

.activity button .tick {
    display: none;
    position: absolute;
    color: var(--text-light);
    height: 25px;
    width: 25px;
    right: 37px;
    top: 26px;
    font-size: 35px;
}

.activity h3 button:hover, .activity h3 button:focus{
   background-color: var(--accent-colour-2);
   color: var(--text-light);
}

.activity.completed h3 button:hover, .activity.completed h3 button:focus{
    /*opacity: 80%;*/
 }

.activity.inprogress h3 button {
    background-color: var(--accent-colour-2);
    color: var(--text-light);
    border: none;
}

.node .activity.inprogress .status::before{
    content: 'In progress';
}

.activity.completed h3 button {
    background-color: var(--accent-colour-2);
    color: var(--text-light);
    border: none;
}

/* Using h3 button::before instead of material icons */
/* .activity.completed button .tick {
    display: block;
} */

.node .activity.completed .status::before{
    content: 'Completed';
}

.activity .complete h3 button::before {
    border-left: 18px solid var(--text-light);
}

.activity {
    padding-left: 697px;
    padding-right: 0;
    top: 20px;
    height: 40px;
    margin-bottom:51px;
}

.activity h3 {
    height:0;
    width:0;
}

.activity:nth-child(2n+1) h3 {
    left: 0;
}

.node .activity .status {
    border: none;
    background-color: var(--accent-colour-2);
    height: 2px;
    width: 516px;
    border-radius: none !important;
    left: 50%;
    top: 46%;
}

.continue {
    background-color: var(--text-light) !important;
    border-color: var(--accent-colour) !important;
}

.node::after {
    background-image: none !important;
}

.activity .detailtext {
    left: 15% !important;
    top: 10% !important;
    width: 310px;
    margin-left: 0px !important;
    color: #000;
    font-size: var(--fs-3);
    background-color: transparent;
    box-shadow: none;
    font-family: Interstate, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    text-align: right;
    cursor:default;
}

.activity h3::before,
.activity:nth-child(odd) h3::before {
    background: transparent;
}

/* .activity.single-line h3 button::before {
    top: 14px;
} */

.activity.completed .status::after,
.activity.inprogress .status::after,
.video::after {
    background-image: none !important;
    cursor:default;
}

.activity.completed .status::after {
    background-image: none !important;
    cursor:default;
}

/* setting modal window to be 100% */
.modal-window { overflow:hidden !important;}
#contentWindow {width:100%; padding:0;}
#content { width:100% !important; height:100% !important; background-color: #f4f4f4 !important; }

.qzzr #content { width:80% !important; height:80% !important; padding:1em;}
.qzzr .lightbox-btn.lightbox-btn {top:8%; right:9.5%;}

/* Hiding icons */
.activity::after{
    display: none;
}

/* Icons on activity nodes */

.activity h3 button::before{
    content: '';
    position: absolute;
    background-size: 22px 22px;
    width: 22px;
    height: 22px;
    left: 15px;
    top: 32px;
}

.c2r h3 button::before, #icons li.c2r{
    background-image: url('../images/core/activity_icons/c2r_amaze_black.svg');
}

.video h3 button::before, .youtube h3 button::before, .vimeo h3 button::before, #icons li.video{
    background-image: url('../images/core/activity_icons/video_amaze_black.svg');
}

.quiz h3 button::before, #icons li.quiz{
    background-image: url('../images/core/activity_icons/quiz_amaze_black.svg');
}

.keymessage h3 button::before, #icons li.keymessage{
    background-image: url('../images/core/activity_icons/keymessage_amaze_black.svg');
}

.reflection h3 button::before, #icons li.reflection{
    background-image: url('../images/core/activity_icons/reflection_amaze_black.svg');
}

.task h3 button::before, #icons li.task{
    background-image: url('../images/core/activity_icons/task_amaze_black.svg');
}

.completed.c2r h3 button::before, .c2r h3 button:hover:before, .c2r h3 button:focus:before{
    background-image: url('../images/core/activity_icons/c2r_amaze_white.svg');
}

.completed.video h3 button::before, .completed.youtube h3 button::before, .completed.vimeo h3 button::before, .youtube h3 button:hover:before,  .youtube h3 button:focus:before, .vimeo h3 button:hover:before, .vimeo h3 button:focuss:before{
    background-image: url('../images/core/activity_icons/video_amaze_white.svg');
}

.completed.quiz h3 button::before, .quiz h3 button:hover:before, .quiz h3 button:focus:before{
    background-image: url('../images/core/activity_icons/quiz_amaze_white.svg');
}

.completed.keymessage h3 button::before, .keymessage h3 button:hover:before, .keymessage h3 button:focus:before{
    background-image: url('../images/core/activity_icons/keymessage_amaze_white.svg');
}

.completed.reflection h3 button::before, .reflection h3 button:hover:before, .reflection h3 button:focus:before{
    background-image: url('../images/core/activity_icons/reflection_amaze_white.svg');
}

.completed.task h3 button::before, .task h3 button:hover:before, .task h3 button:focus:before{
    background-image: url('../images/core/activity_icons/task_amaze_white.svg');
}

#icons li{
    background-size: 35px 35px;
    font-family: var(--font-paragraph);
    font-size:var(--fs-4);
    padding-top:49px;
}

.fixed #icons li{
    background-size: 25px 25px;
    padding-top:35px;
    height:35px;
    font-size:var(--fs-5);
}

#continue {
    border-radius: 0px;
    background-color:#fff;
    font-family:var(--font-heading-2);
    color:#000;
    font-size:var(--fs-2);
    height:200px;
    line-height:1;
}

#continue a {
    background-color:var(--background);
    color:#fff;
    border-radius: 0px;
    font-size:var(--fs-2);   
    padding-top:10px;
    bottom:35px;
}

.lightbox-btn-close:hover::before {
    border-radius:20px;
}