/* CUSTOM LESSON PAGE*/

/*adjust moodle framing and elements*/

#page-mod-lesson-view #page-content {
height:auto;
width:100%;
max-width:1300px;
margin-left:auto;
margin-right:auto;
padding-bottom:150px;
}

/*lesson nav buttons*/

#page-mod-lesson-view .box.branchbuttoncontainer.horizontal, #page-mod-lesson-view .box.branchbuttoncontainer.vertical {
position:relative;
margin-top:-5px!important;
background-color:white;
padding-top:5px;
padding-bottom:30px;
}

#page-mod-lesson-view .box.branchbuttoncontainer.horizontal>.singlebutton {
position:absolute;
top:1px;
}

#page-mod-lesson-view .box.branchbuttoncontainer.horizontal>.singlebutton:nth-child(2) {
right:0;
}

#page-mod-lesson-view a.centerpadded.lessonbutton.standardbutton {
border:2px solid;
padding:10px;
}

#page-mod-lesson-view .standardbutton {
padding:10px;
text-align:center;
margin-right:5px;
}



/*CUSTOM LESSON PAGE*/

.path-mod-lesson #custom-lesson-page, .path-mod-lesson #custom-lesson-page-vid {
position:relative;
overflow:hidden;
height:800px;
min-height:300px;
}


/* Intital media managment */

.anim-paused {
animation-play-state:paused;
}

.ini-hidden {
display:none;
}

.play-slide-middle, .full-text-middle {
z-index:1;
position:absolute;
left:0;
width:100px;
}

.play-slide-middle {
top:100px;
-webkit-animation-name:slide-in; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
 animation-name: slide-in;
 animation-duration: 0.5s;
}

.full-text-middle {
top:175px;
-webkit-animation-name:slide-in; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 0.75s; /* Safari 4.0 - 8.0 */
 animation-name: slide-in;
 animation-duration: 0.75s;
}

.play-slide-middle > i, .full-text-middle > i {
background-color:white;
padding:10px;
font-size:300%;
cursor:pointer;
color:#8379b5;
border-radius:0 50% 50% 0;
box-shadow:1px 1px 2px #ccc;
}

.play-slide-middle > i:hover, .full-text-middle > i:hover {
background-color:#8379b5;
color:white;
}


 /* top right slide controls*/

#sd-titles-wrapper, #sd-titles-wrapper-ms {
height:60px;
width:100%;
}

#sd-titles-wrapper, .sd-titles-wrapper {
background-color:#8379b5;
}

.slide-pause, .slide-repeat, .slide-read-text, .slide-additional, .slide-pause-ms, .slide-repeat-ms, .slide-read-text-ms, .slide-additional-ms {
padding: 2px 8px 2px 8px;
}

.slide-play, .slide-pause, .slide-repeat, .slide-read-text, .slide-additional, .slide-take-break, .slide-play-feedback {
color:#8379b5;
background-color:white;
}

.slide-play, .slide-play-ms {
padding: 2px 6px 2px 10px;
border-radius:20px 0 0 20px;
}

.slide-controls {
border: 1px solid #8379b5;
cursor:pointer;
}

.slide-controls > i, .slide-controls-ms > i {
font-size:175%;
padding:5px;
}

.slide-controls:hover {
color:white;
background-color:#8379b5;
border:1px solid white;
}

.slide-controls-ms {
border: 1px solid #3c61ad;
cursor:pointer;
} 

.slide-controls-ms:hover {
background-color:#3c61ad; 
border: 1px solid white;
color:white;
} 


.slide-play-feedback, .slide-play-feedback-ms {
padding: 2px 8px 2px 8px;
border-radius:20px 20px 20px 20px;
}

.slide-take-break, .slide-take-break-ms {
padding: 2px 8px 2px 8px;
border-radius:0 20px 20px 0;
}

.sd-title-text {
color:white!important;
padding:5px 0 0 5px;
font-size:16px;
}

.sd-sub-title-text {
color:white;
padding-left:5px;
font-size:16px;
font-weight:600;
}

.sd-slide-controls {
position:absolute;
top:10px;
right:10px;
z-index:5;
}


/*custom slide body */

.path-mod-lesson #slide-body {
height:715px;
min-height:360px;
overflow:hidden;
margin-top:1px;
}


.path-mod-lesson #slide-body > iframe {
width:100%;
height:100%;
min-height:400px;
}

.path-mod-lesson #slide-body.vimeo > iframe {
margin-top:-50px;
}

.path-mod-lesson #slide-body.background {
background-color:#c1c2d0;
}

#page-mod-lesson-view #slide-body li {line-height:16px;}

#page-mod-lesson-view #narrator {visibility:hidden;}



#page-mod-lesson-view .hide-on-lesson-view, #page-mod-lesson-edit .hide-on-lesson-view, #page-mod-lesson-editpage .hide-on-lesson-view {
display:none;
}

/*custom lesson page - OTHER ELEMENTS */

/*progress bar*/

#custom-lesson-page .progress {
position:absolute;
bottom:5px;
height:20px;
padding-top:2px;
border-radius:0;
line-height:5px;
}

#custom-lesson-page .progress p {
position:absolute;
top:12px;
}

div.progress > div.progress-bar.progress-bar-success {
background-color:#609e1b;
}


/*Scenario pages*/

#slide-body .scenario-feedback-text {
padding:5px 15px;
background-color:#f0f0f0;
}

#slide-body .scenario-feedback-text.incorrect {
color: red;
font-size:inherit!important;
}

#slide-body .scenario-feedback-text.correct {
color: green;
font-size:inherit!important;
}


body.vp-center {
height:95%!important;
}



/*3x3 CENTRED GRID LAYOUT */

.centered {
margin-left:auto;
margin-right:auto;
width:375px;
}

.grid-wrapper {
width:375px;
height:375px;
margin-left:auto;
margin-right:auto;
}

.grid-item {
width:125px;
height:125px;
float:left;
}

.grid-clickme {
width:121px;
height:121px;
margin:2px 2px 2px 2px;
background-color:#09696a;
transition:0.1s ease;
border-radius:3px;
}

.grid-clickme:hover {
background-color:red;
width:124px;
height:124px;
margin:0 0 0 0;
}

.grid-clickme.revealed {
background-color:black;
opacity:0.8;
}

.grid-clickme i {
font-size:50px;
margin-left:auto;
margin-right:auto;
padding:30px;
color:white;
cursor:pointer;
}

.grid-clickme p {
font-weight:500;
text-align:center;
padding:35px 5px 0 5px;
color:white;
}

/*4x3 CENTRED GRID LAYOUT*/

#fourbythree .grid-wrapper {
width:500px;
height:375px;
}

#fourbythree.centered {
width:500px;
margin-left:auto;
margin-right:auto;
}

/*GENERIC -  BOX SHADOW UTILITIES*/

.box-shadow {
box-shadow:1px 1px 10px gray;
}

.box-shadow-lower {
box-shadow:0 1px 1px 1px gray;
}

/*BOOTSTRAP CAROUSEL ELEMENT IN LESSONS*/

#page-mod-lesson-view .carousel-indicators li {
background-color:#B4ADE6;
}

#page-mod-lesson-view .carousel-indicators li.active {
background-color:slateblue;
}

#page-mod-lesson-view a.carousel-control-prev, #page-mod-lesson-view a.carousel-control-next  {
box-shadow:none!important;
}

#page-mod-lesson-view .carousel-nav {
color:slateblue;
font-size:20px;
}

#page-mod-lesson-view .card.carousel-card {
max-width:500px;
margin:2rem auto;
border:unset;
}

/* icon colours (RADA I think - TH) */
.fas.fa-check, .fas.fa-bolt, .fas.fa-info-circle, .fas.fa-fist-raised, .fas.fa-mars, .fas.fa-cross, .fas.fa-transgender  {
color:green; 
}

.fas.fa-heart-broken, .fas.fa-exclamation-triangle {
color:#BB1F4C!important;
}