/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXX BSL COURSE RELATED CSS BELOW HERE (CATEGORY ID: 77) XXXXX*/
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* fixes display issue for scenario pages */
/* (a site-wide update to the h5 element had made the title text of the right hand column too big so it wrapped and the tabs were hidden by the enlarged videos */
.category-77 #answers h5, .category-77 .column.three-fifths-col h5  {
font-size: 1.16rem;
}

/* Hide a bunch of HTML5 controls from the video player */
/* needs looking at - shows as incorrect css in my editor */
.category-77 video::-webkit-media-controls-overflow-button, .category-77 video::-webkit-media-controls-volume-slider, .category-77 video::-webkit-media-controls-fullscreen-button, .category-77 video::-webkit-media-controls-timeline, .category-77 video::-webkit-media-controls-mute-button, .category-77 video::-webkit-media-controls-current-time-display, .category-77 video::-webkit-media-controls-time-remaining-display, .category-77 video::-webkit-media-controls-download-button, .category-77 video::-webkit-media-controls-playback-rate-button {
    display: none !important;
}

/* ALL PAGES */

.category-77 .box.branchbuttoncontainer.horizontal, .category-77 .box.branchbuttoncontainer.vertical, .course-484 .box.branchbuttoncontainer.horizontal, .course-484 .box.branchbuttoncontainer.vertical {
    margin-top: -1px!important;
	background-color:transparent;}

/* CLASSES FOR TITLE BAR OF BSL PAGES */
#page-mod-lesson-view.category-77 .sd-slide-controls, #page-mod-lesson-view.course-484 .sd-slide-controls
{
position:relative;
float:right;
z-index:5;
}

#page-mod-lesson-view.category-77 .sd-slide-controlsx, #page-mod-lesson-view.course-484 .sd-slide-controlsx
{
position:relative;
top:10px;
float:right;
margin-right:10px;
z-index:5;
}

#sd-titles-wrapperx {
background-color:#8379b5;
height:60px;
width:100%;
padding-left:10px;
margin-bottom:10px;
}

#page-mod-lesson-view.category-77 .slide-controls, #page-mod-lesson-view.course-484 .slide-controls {
	border: 1px solid transparent;
	cursor: pointer;
}

.slide-take-break-bsl {
	display: inline;
	padding: 0;
	color: #fff;
	font-size: 20px;
	margin-bottom: 20px;
}

.slide-take-break-bsl:hover {
border-color: #8379b5;
color: darkgray!important;
}

/* REMOVES THE PROPERTIES OF THE DEFAULT "SLIDESHOW" DIVISION ON THE NON-QUESTION PAGES  */
#page-mod-lesson-view.category-77 .slideshow, #page-mod-lesson-view.course-484 .slideshow
{
all:unset;
}


/* SCENARIO PAGES */

/* FORMATS ELEMENTS ON THE SCENARIO PAGE */

/* MAIN CONTAINER */
.category-77 #slide-content {
width:100%;
margin: 10px auto;
}

/* QUESTION CONTAINER */
.category-77 .three-fifths-col {
width:52%; 
float:left; 
margin-right:1%; 
margin-left:1%
}

/* RESPONSES CONTAINER */
.category-77 .two-fifths-col {
width:39.05%; 
float:left; 
margin-right:1%; 
margin-left:1%;
background-color:white;
}

/* COLOURED BORDERS FOR ANSWER VIDEOS */
#page-mod-lesson-view.category-77 .scenario-answer {
/*	width:96% !important; */
	border: solid lightgray;
	border-width: 8px 8px 8px 8px;
	padding: 0 !important;
	margin-right: 20px !important;
	margin-top: 0!important;
	display:inline-flex!important;
}

/* COLOURED BORDERS FOR ANSWER VIDEOS SCRIPT TEXT */
#page-mod-lesson-view.category-77 .scenario-answer-words {
	width:100% !important;
/*	border: solid lightgray;
	border-width: 0 8px 8px 8px; */
	padding: 0 25px 0 5px !important;
	margin-top: 0!important;
	margin-left:13px;
	display:inline-flex !important;
	color: black!important;
	text-align: left;
}


/*SIZING THE QUESTION VIDEO SO SUBTITLES CAN BE READ*/
.scenario-question1, .scenario-question2 {
  width: 100%; /* Set the desired initial width */
}

.scenario-question1.enlarged, .scenario-question2.enlarged {
  width: 196%; /* Set the desired enlarged width */
position:relative;
margin-left:0;
margin-top:0;
z-index:200;
}

.scenario-feedback1a,  .scenario-feedback1b, .scenario-feedback1c, .scenario-feedback2a, .scenario-feedback2b, .scenario-feedback2c {
  width: 100%; /* Set the desired initial width */
}

.scenario-feedback1a.enlarged,  .scenario-feedback1b.enlarged, .scenario-feedback1c.enlarged, .scenario-feedback2a.enlarged, .scenario-feedback2b.enlarged, .scenario-feedback2c.enlarged {
  width: 196%; /* Set the desired enlarged width */
position:relative;
margin-left:-89%!important;
margin-top:1px;
z-index:200;
}

/*FOR NAV BAR OF BSL VIDEO SCENARIO SECTIONS*/
.category-77 #slide-body .nav-pills a.link {
color:black!important;
font-weight:600!important;
}

.category-77 #slide-body a, .category-77 #slide-body a:visited, .category-77 #slide-body .tabtree .tabrow0 li a {
color:black!important;
border-right-style:solid;
border-right-width:1px;
border-left-style:solid;
margin-right:1px!important;
border-left-color: rgba(255,255,255,0.2);
border-right-color: rgba(255,255,255,0.2);
border-left-width:1px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}

.category-77 a:focus {
outline-style: none !important;
}

.category-77 #slide-body .nav-pills a.active {
border-style:solid;
border-width:1px;
border-color:#444;
padding: 2px 5px 2px;
background-color:#b3acd5!important;
}

.category-77 #slide-body .nav-pills a:hover {
color:black!important;
background-color:  rgba(0,0,0,0.4)!important;
}

.category-77 .tab-pane {
margin-bottom: -4px !important;
/*  background-color:transparent; */
}

/* ASSESSMENT PAGES - QUESTION AND FEEDBACK */

/* THE QUESTIONS PAGE FOR THE BSA COURSE ASSESSMENT QUESTIONS */

/* FORMATS THE TITLE BAR WHICH SPANS THE WIDTH OF THE PAGE AND NOT THE QUESTION VIDEO (thank you javascript) */
.mform fieldset {
border-bottom:none;
}

/* THE COLUMN THAT CONTAINS THE ANSWER VIDEOS ON THE ASSESSMENT QUESTION PAGE */
#page-mod-lesson-view.category-77 .col-md-9 {
flex: 0 0 100%;
max-width:100%;
margin-top:-5px;
margin-left:-10px;
min-width: 300px;
}

#page-mod-lesson-view.category-77 .col-md-9.form-inline::after {
content:"" !important;
}
/* THE CONTAINER FOR THE MAIN VIDEO */
.category-77 .fcontainer .contents {
width:60%;
float:left;
margin-right:10px;
min-width: 350px;
}

/* THE CONTAINER FOR THE ANSWERS BOX */
.category-77 .fcontainer .tab-content {
width:35%;
margin-top:10px;
float:left;
min-width:350px;
}

/* ADDS "Browse and select your answer(s):" BEFORE THE ANSWER TABS */
.category-77 .tab-container::before {
content:"2. Browse and select your answer(s):";
margin-left: 1%;
margin-right: 14%;
margin-bottom: 15px!important;
white-space: nowrap;
}

/* THE CONTAINER FOR THE TABS */
.category-77 .tab-container {
margin-top:10px;
margin-left:10px;
margin-right:10px;
line-height: 25px;
}

/* STOPS THE NAV BAR WRAPPING AND REMOVES THE BOTTOM BORDER */
.category-77 .tab-container .nav, .category-77 .container .nav {
	flex-wrap:nowrap;
	border-bottom:none;
}

/* MIN WIDTH SET TO MOVE THE TABS DOWN BELOW THE MAIN VIDEO WHEN SCREEN WIDTH IS REDUCED */
#page-mod-lesson-view.category-77 .nav-tabs{
min-width:350px;
}

/* THE TABS  */
.category-77 .nav-tabs {
padding:8px!important;
}

.category-77 .nav-tabs a, .category-77 .nav-tabs a:visited {
padding: 8px;
color: black!important;
/* line-height: 37px; */
background-color: #f2f2f2;
white-space: nowrap;
}

.category-77 .nav-tabs a.active {
background-color: lightgray;
}

.category-77 .nav-tabs a:hover {
background-color: gray;
color: white !important;
}	


/* COLOURED BORDERS FOR ANSWER VIDEOS */
#page-mod-lesson-view.category-77 .answer {
	width:96% !important;
	border: solid lightgray;
	border-width: 8px 8px 8px 8px;
	padding: 0 !important;
	margin-right: 20px !important;
	margin-top: 32px!important;
	display:inline-flex;
}

/* COLOURED BORDERS FOR ANSWER VIDEOS SCRIPT TEXT */
#page-mod-lesson-view.category-77 .answer-words {
	width:96% !important;
	padding: 0 20px 0 5px !important;
	margin-top: -10px!important;
	margin-left:13px; 
	display:inline-flex !important;
	font-size:1.1rem;
}

#page-mod-lesson-view.category-77 .answer-words h5, #page-mod-lesson-view.category-77 .scenario-answer-words h5, #page-mod-lesson-view.category-77 .bg-fail-words h5, #page-mod-lesson-view.category-77 .bg-success-words h5 {
	color: #444!important;
	text-align: left;
}

/* INSERTS THE WORD 'SELECT' BEFORE THE ANSWER CHECKBOXES */
#page-mod-lesson-view.category-77 .checkbox::after {
position: absolute;
display:block;
margin-left:30%;
margin-top:2px;
white-space:normal;
content:"Select: ";
}

/* POSITIONS THE CHECK BOX */
#page-mod-lesson-view.category-77 .form-check-input {
position: absolute;
bottom: -20px;
left: 53%
}

/* FORMAT "submit" BUTTON ON QUESTION PAGES */
#page-mod-lesson-view.category-77 #id_submitbutton {
margin-left:40%;
}

/* THE FEEDBACK PAGE FOR THE BSA COURSE ASSESSMENT QUESTIONS */

/* TRYING TO SORT OUT "RESPONSE:" NONSENSE */
#page-mod-lesson-view.category-77 div.text_to_html>div.correctanswer.generalbox .correct {
color:black !important;
}

#page-mod-lesson-view.category-77 div.text_to_html > div.correctanswer.generalbox {
margin-bottom:20px;
padding-top:5px;
border-top:2px solid #dddddd;
border-bottom:2px solid #dddddd;
}

#page-mod-lesson-view.category-77 div.text_to_html > div.correctanswer.generalbox .incorrect {
color:black !important;
}


/* TITLE BAR FOR QUESTION FEEDBACK PAGE */
.xyz {
    background-color: #8379b5;
    height: 60px;
    width: 100%;
    padding-left: 15px;
padding-top:5px;
    margin-bottom: 10px;
   color: white;
font-weight: 500;
font-size: 16px;
}

/* VARIANT FOR MODERN SLAVERY */
 .category-10 .xyz {
font-size: 30px;
color: white;
background-color: #55595a;
}


/* TABLE REARRANGING TO DISPLAY FEEDBACK VIDEOS NEXT TO CHOSEN ANSWER VIDEOS*/
#page-mod-lesson-view.category-77 table{
  display: block;
width: 98%;
}

#page-mod-lesson-view.category-77 tbody{
width:100%;
background-color:white;
color: rgba(0, 0, 0, 0);
}

#page-mod-lesson-view.category-77 tr {
   display: inline-block;
   float: left;
   width: 46%;
padding-left:0%;
padding-right:0%;
padding-top:20px;
background-color: rgba(0,0,0,0);
margin-left:0;
}

#page-mod-lesson-view.category-77 td {
   display: inline;
padding:0;
margin: auto 10px;
/* font-size:0; 
color: rgba(0, 0, 0, 0); */
color: black !important;
background-color: rgba(0, 0, 0, 0);
border:0;
}

#page-mod-lesson-view.category-77 tr:nth-child(2n+1) {
   clear: left;
margin-bottom:0;
}


/* COLOURED BORDERS FOR FEEDBACK VIDEOS */
#page-mod-lesson-view.category-77 .bg-success {
 	width:96% !important;
	border: solid green;
	border-width: 8px 8px 8px 8px;
	padding: 0 !important;
	margin-right: 20px !important;
	margin-top: 10px!important;
	display:inline-flex;
}

/* COLOURED BORDERS FOR FEEDBACK VIDEOS */
#page-mod-lesson-view.category-77 .bg-success-words {
    width: 96%!important;
	padding: 0 20px 0 5px !important;
    margin-top: 0!important;
    margin-left:13px;
    display: inline-flex!important;
	font-size:1.1rem;
}


#page-mod-lesson-view.category-77 .bg-fail {
	width:96% !important;
	border: solid red;
	border-width: 8px 8px 8px 8px;
	padding: 0 !important;
	margin-right: 20px !important;
	margin-top: 10px!important;
	display:inline-flex;
}

#page-mod-lesson-view.category-77 .bg-fail-words {
    width: 96%!important;
	padding: 0 20px 0 5px !important;
    margin-top: 0!important;
    margin-left:13px;
    display: inline-flex!important;
	font-size:1.1rem;
}


/* REPOSITION "continue" BUTTON ON FEEDBACK PAGES */
#page-mod-lesson-view.category-77 .singlebutton {
display:block!important;
clear:both;
margin-bottom: 20px;
margin-right: 0;
}

/* FORMATTING FOR OTHER ELEMENTS ON THE ASSESSMENT AND FEEDBACK PAGES */
#page-mod-lesson-view.category-77 div.no-overflow {
    overflow-y: visible;
    overflow-x: visible;
}

#page-mod-lesson-view #region-main {
overflow:hidden;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXX END OF BSL CSS SECTION XXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
