/*
 * add custom styles here
*/ 

#headmenu_home {
    display:none;
}

p {
    line-height:1.4em;
}

h1 {
    letter-spacing: -0.5px;
}

h2.pageTitle {
    color:#292929;
    text-transform: none;
}

#widgetBox h4 {
    margin: 8px 0;
    text-align: center;
}

#widgetBox .content-bottom h4 {
    text-align: left;
}

#widgetBox .widgetPosition[data-position=left] .spacing-content, #widgetBox .widgetPosition[data-position=right] .spacing-content {
    padding: 18px 41px 2px 41px;
}

#widgetBox .reportItem {
    border-radius: 10px;
}

#widgetBox .button-toggle {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
}

#widgetBox .courseProgressContainer {
    border-radius: 4px;
    margin-top: 4px;
    overflow: hidden;
}

#widgetBox .progressBar {
    height: auto;
}

#widgetBox .widgetFill .fullIcon {
    border-radius: 28px;
}

#widgetBox .widgetFill[data-type=user-category] h4 {
    text-align: left;
}

#widgetBox .widgetFill[data-type=lockout] {
    text-align: center;
}

#widgetBox .widgetFill[data-type=feed] .fullIcon {
    border-radius: 12px;
}

/*
.widgetCol .spacing-full {
    max-height: 410px;
}*/

#widgetBox p {
    margin: 5px 0;
}



.homeSlide h2 {
    padding: 0;
}

.homeSlide p {
    margin: 4px 0;
}

.leaderboardNum {
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    box-sizing: border-box;
    padding-top:5px;
}

.leaderboardNum {
    background-image: url(../../../images/BP_Badge_Icon.png);
    background-size: 90%;
    background-position:  center center;
    background-repeat: no-repeat;
}

.leaderboardNum[data-position="0"] {
    background-image: url(../../../images/BP_GoldTrophy_Icon.png?1);
    background-size: 90%;
    background-position:  center center;
    background-repeat: no-repeat;
}

.leaderboardNum[data-position="1"] {
    background-image: url(../../../images/BP_SilverTrophy_Icon.png?1);
    background-size: 90%;
    background-position:  center center;
    background-repeat: no-repeat;
}

.leaderboardNum[data-position="2"] {
    background-image: url(../../../images/BP_BronzeTrophy_Icon.png?1);
    background-size: 90%;
    background-position:  center center;
    background-repeat: no-repeat;
}

.widgetRight-1 .leaderboardBox {
    max-height: 460px;
    overflow-y: auto;
}

.widgetRight-2 .leaderboardBox {
    max-height: 300px;
    overflow-y: auto;
}

.panel-top, .panel-center {
    border-radius:3px;
    box-shadow: 0px 2px 12px #666;
}


#progressWarning .panel-center {
    margin: 0 auto;
}

#alertPanel .panel-right {
    width: 320px;
    box-shadow: none;
    border-left: 1px solid #DDD;
}

.tab-banner {
    /*box-shadow: 0px 5px 5px #e6e6e6;*/
    border-bottom: 2px solid #e6e6e6;
    margin-bottom:0px;
}

#navPlan.tab-banner {
    border:none;
}

a.button-form {
    background-color:#E31E38;
    color:#FFF;
    box-shadow:none;
}

a.button-control {
    background-color:#E31E38;
    color:#FFF;
    box-shadow:none;
}

a.button-control:hover {
    margin:2px;
     background-color:#E31E38;
     box-shadow:none;
}

.column-left {
    min-height:100%;
}

#topbar-border {
    background-color: #f4f4f4;
    opacity:0.4;
}

#fabric_content #topbar {
    padding-left: 0px;
    padding-right: 30px;
    box-sizing: border-box;
    background: #f4f4f4;
}

#fabric_content[data-screenmode=wide], #fabric_content[data-screenmode=mobile] {
    margin-top: 0;
}

#fabric_content[data-screenmode=wide] #topbar{
    padding-left: 0px;
    padding-right: 30px;
    box-sizing: border-box;
    background: transparent;
    width: 250px;
    right: 0;
    left: auto;
}

@media screen and (min-width: 500px) {
    #fabric_content.editorScreen {
        margin-top: 48px;
    }
}

#fabric_content.editorScreen[data-screenmode=wide] #topbar{
    padding-left: 0px;
    padding-right: 30px;
    box-sizing: border-box;
    background: #FFF;
    width: 100%;
    left: 0;
}


.spacing-header.format-head {
    padding-top: 0;
}

#fabric_content .topbarIconBox {
    margin-top: 6px;
    width: 38px;
    height: 38px;
}

#fabric_content .topbarIcon {
    height: 38px;
}

#fabric_content #alert_button {
    width: 40px;
    height: 40px;
    background-size: 46px;
    background-position: center center;
    background-image: url(../../../images/BP_Notification.png);
}

#fabric_content #search_button {
    width: 40px;
    height: 40px;
    background-size: 46px;
    background-position: center center;
    background-image: url(../../../images/BP_Search_Icon.png);
}

#fabric_content[data-view=Plan][data-screenmode=wide] #topbar, #fabric_content[data-view=Home][data-screenmode=wide] #topbar {
    background: transparent;
}

#topbar-border {
    display: none;
}

#topbar .guide-toggle {
    display: none;
}

#fabric_content #topbar .nav-menu a {
    font-weight: bold;
}

#fabric_content.contentHome {
    background-image: url(../../../content/whats-happening-bg-d.png);
    background-size: 30%;
    background-position:  5% -5%;
    background-repeat: no-repeat;
}

#headPlan {
    background-color: #FFF;
    background-image: url(../../../content/whats-happening-bg-d.png);
    background-size: 25%;
    background-position: 10% 25%;
    background-repeat: no-repeat;
}

/*
#headPlan {
    background-color: #E31E38;
    background-image: url(../../../content/plan-bg.png);
    background-size: 75%;
    background-position: -50% 25%;
    color: #FFF;
}

#headPlan h2, #headPlan a, #headPlan select {
    color: #FFF;
}

#headPlan .nav-tab li.active {
    border-bottom-color: #FFF;
}*/

#headManageProgress {
    background-color: #FFF;
    background-image: url(../../../content/whats-happening-bg-d.png);
    background-size: 25%;
    background-position: 10% 25%;
    background-repeat: no-repeat;
}

#headManageProgress .back-head, #headManageProgress .back-secondary {
    background: transparent;
}

@media screen and (max-width: 500px) {
    #courseScreen .format-content {
        display: block;
    }
    #courseScreen .col3 {
        width: 100%;
        text-align: center;
    }
    #courseScreen .col3 img {
        max-width: 60%;
    }
    #courseScreen .col9 {
        width: 100%;
    }

    #fabric_content .col10.courseIntroBox,
    #fabric_content .col6.courseIntroduction,
    #fabric_content .col6.mediaContainer {
        width: 100%;
    }
}

.flagBox {
    display: none;
}


#progressWarning_content {
    background-color: #b01b20;
    padding: 20px;

}

#progressWarning_content .back-warning {
    background-color: #b01b20;
    border: 1px solid white;
    color: #FFF;
    text-align: center;
}

h2.elementText {
    font-weight:bold;
}

h3.columnTitle {
    font-size:24px;
}

.questionPoolHeader h3 {
    color: #E31E38}

#fabric_content .spacing-section {
    margin: 5px 0;
}

/*
#fabric_content .col3 .spacing-row {
    padding: 10px 10px 10px 0;
}*/

#fabric_content .backNone .spacing-row {
    padding: 10px 10px 10px 0;
}

#fabric_content .col2 .spacing-row {
    padding: 10px 10px 10px 10px;
}

#fabric_content .col2 .topLabelSpace .spacing-row {
    padding: 5px 25px 5px 28px;
}

#fabric_content .border-content .col2 .elementImage.leftbar-content {
    padding: 10px 10px 10px 30px;
}

#fabric_content .border-content .col2 .elementImage.leftbar-content .spacing-element {
    padding: 0;
}

#fabric_content .col2 .elementContent .spacing-element {
    padding: 0;
}

#fabric_content .col2 .elementContent .spacing-element .elementText {
    padding: 0;
}

#fabric_content .col5 .spacing-element.elementFlipcard {
    padding: 0 10px 0 30px;
}

#fabric_content .col1 .spacing-row {
    padding: 4px;
}

#fabric_content .col1 .elementFloat[data-type="Download"] .spacing-row .mediaContainer {
    padding-left: 4px;
    padding-right: 4px;
}

#fabric_content .col1 .spacing-row .mediaContent {
    max-width: 45px;
}

.topLabelSpace strong {
    display: block;
    height: 48px;
}

.topLabelSpace .leftbar-content {
    border: none;
}

#infoPopupContent p {
    margin-top : 0;
}

#fabric_content .post_contents p {
    margin: 5px 0;
}

#fabric_content .feedItem {
    background-color: #FFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 4px 4px 4px #e6e6e6;
}

#fabric_content .feedItem span a, .feedItem .blueText, .feedItem .home-link {
    color: #E31E38;
    text-decoration: none;
}

#fabric_content .feedItem .post_contents {
    min-height: 40px;
    padding-bottom:16px;
}

#courseObjects h4, #courseHead h4 {
    padding-top:10px;
}

#courseBanner .icon-submissions {
    display: none;
}

#courseBar.back-gray {
    background-color: #FFF;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 1px 2px 2px 2px rgb(6  6 6 / 0.1);
    margin-bottom: 10px;
}

#courseBar .smallIconBox {
    width: 60px;
    margin: 4px;
}

#courseBar .sectionTable {
    border: none;
}


#courseBar a {
    font-weight: bold;
}

#pageBar {
    display: none;
}

.courseIntroduction {
    clear: both;
}

#topbar .nav-menu li:nth-child(n+2) {
    border:none;
}

#homeSlider .darkFill {
    background-color: #292929;
    opacity: 0.3;
}

.darkGradient {
    background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 70%), rgb(0 0 0 / 30%), rgb(0 0 0 / 0%));
    opacity: 0.6;
}


.categoryContainer .lightFill {
    background-color: #292929;
    opacity: 0.3;
}

.categoryContainer .lightFill {
    background-color: #333;
    opacity: 0;
}

.categoryContainer .format-header {
    color: #FFF;
    padding-top: 40px;
    padding-bottom: 40px;

    font-family: 'Open Sans', Arial;
    text-align: center;
}

.categoryContainer .format-header p {
    margin: 10px 0;
}

.categoryContainer .spacing-content.format-header {
    float: left;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 0 0 20px;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.border-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 1px 2px 2px 2px rgb(6  6 6 / 0.1);
}

#categoryBox.border-content {
    margin-bottom:10px;
}

#content_screen .border-content {
    margin-bottom: 30px;
}

#fabric_content .progressContainer {
    height: 30px;
    border-radius: 6px;
    overflow: hidden;
}

.progressContainer .progressBar {
    height: 30px;
}

.progressContainer .blockBar {
    height: 30px;
}

.catBox .progressTableItem {
    margin-left: 18px;
}

.showOutline, #courseCopySubmit {
    display: none;
}

.courseItem .plancol strong {
    display: none;
}

.courseLink .fullIconBox {
    border-radius: 6px;
    overflow: hidden;
}

#courseObjects .objectLink.colLeft {
    border-radius: 6px;
    overflow: hidden;
    margin: 4px 10px 4px 4px;

}

#courseObjects .objectLink .mediumIcon {
    padding: 0;
}

#courseObjects .objectLink .fullImg {
    border-radius: 10px; 
    overflow: hidden;
}

#courseEditorList .col2 .col8 {
    width: 100%;
}

#courseEditorList .courseItem.col2 {
    font-size: 0.7em;
    height: 350px;
    overflow: hidden;
}

#courseEditorList .courseItem.col2 .icon-edit {
    padding: 0;
}

.boxItem.objectItem.col2 {
    height: 290px;
}

#homeBox {
    box-shadow: 2px 4px 4px 4px #e6e6e6;
    border-radius: 10px;
}

#homeBox h2 {
    font-size: 30pt;
}

.homeSlide .spacing-content {
    padding: 60px 50px 50px 50px;
}

#fabric_content .eventItem[data-type="1"] {
    padding-left: 40px;
    background-position: 5px 10px;
    background-image : url('../../../content/goal-icon-dark.png');
    background-repeat: no-repeat;
    background-size: auto 30px;
}

#fabric_content .eventItem[data-type=class] {
    padding-left: 40px;
    background-position: 5px 10px;
    background-image : url('../../../content/calendar.png');
    background-repeat: no-repeat;
    background-size: auto 30px;
}

#fabric_content .expiryItem {
    padding-left: 40px;
    background-position: 5px 10px;
    background-image : url('../../../components/com_fabric/img/icons/alert-icon-dark.png');
    background-repeat: no-repeat;
    background-size: auto 30px;
}

.format-content .button-form.back-primary {
    color: #FFF;
    text-decoration: none;
}

.back-warning {
    color: #292929;
}

.back-blue {
    background-color: #19468d;
}

.blueStroke {
    stroke: #19468d;
}

#fabric_content ul.quizOptions li:nth-child(n+2) {
    border: none;
}

.format-content input[type="radio"] {
    background-image: url(../images/RadioButton_Unselected.svg);
    background-size: 20px;
    margin-right: 10px;
}

.format-content input[type="radio"]:checked {
    background-image: url(../images/RadioButton_Selected.svg);
}

.format-content input[type="checkbox"] {
    background-image: url(../images/SquareButton_Unselected.svg);
    background-size: 20px;
    margin-right: 10px;
}

.format-content input[type="checkbox"]:checked {
    background-image: url(../images/SquareButton_Selected.svg);
}

.dragContainer .spacing-label {
    padding: 6px 16px;
}

.greenStroke {
    stroke: #4db918;
}

.yellowStroke {
    stroke: #f4c020;
}

/*
.elementContent .checkAnswer.button-content {
    background-color: #EFEFEF;
    color: #292929;
    border: 1px solid #EFEFEF;

}
    .elementContent .checkAnswer.button-content:hover {
         border-color: #292929;
    }
*/

.elementContent[data-display="Howto"], .elementPreview[data-display="Howto"] {
    background-image: url(../images/how-to-icon.png);
    background-size: 40px;
}

.elementContent[data-display="Keypoint"], .elementPreview[data-display="Keypoint"] {
    padding-left: 0;
    background: none;
}

.elementContent[data-display="Breakout"], .elementPreview[data-display="Breakout"] {
    border: 2px solid #333;
    padding: 5px 20px;
    border-radius: 10px;
}

.imgChoice .linkPopup {
    z-index: 1000;
}

iframe.mediaupload {
    border-radius: 10px;
}

.nav-tab li.active {
    border-bottom: 4px solid #cf0a2c;
}

#fabric_content #planList .courseItem:hover {
    border-left-color: #cf0a2c;
}

#fabric_content #planList .col3 .widgetFill {
    padding: 10px 20px;
}

@media screen and (max-width: 500px) {
     #fabric_content #planList .widgetRowFull {
        display: block;
        min-height: 100px;
     }

     #fabric_content #planList .format-header {
        position: relative;
     }

    #fabric_content #planList .col3 .widgetFill {
        padding: 0;
    }

    #fabric_content #planList .widgetRowFull .col9 {
        width: 75%;
    }

    #fabric_content #planList .widgetRowFull .col3 {
        width: 25%;
    }


    #wright-0 .col2 {
        width: 16%;
    }

      #courseMenu .panel-left {
        width: 95%;
        overflow-y: auto;
        max-width: none;
      }

    #fabric_content .flip-card-back .feedbackContent {
        font-size: 1em;
    }

    .backPage.border-content {
        padding: 0 20px;
        box-sizing: border-box;
    }

    #fabric_content h4.columnTitle {
        font-size: 12pt;
    }

    #fabric_content .cardItem p {
        font-size: 10pt;
    }

    #fabric_content .spacing-row {
        padding: 10px;
    }

    #fabric_content #contentBox .branch-elements .col6 {
        width: 100%;
    }

    #fabric_content #contentBox .branch-elements .col2 {
        width: 33%;
    }

    #fabric_content #contentBox .branch-elements .col4 {
        width: 50%;
    }


    #fabric_content #contentBox .col9 {
        width: 100%;
    }

    #fabric_content #contentBox .col7 {
        width: 50%;
    }
    
    #fabric_content .node[data-action="Navigation"] {
        padding: 10px;
    }
}

#fabric_content .node[data-action="Navigation"] {
    position: relative;
}

.resultTable img.fullImg {
    float: left;
    width: auto;
    margin: 5px;
    max-height: 150px;
    max-width: 33%;
}

.objectHeader .fullIconBox, #userList .listItem, #catalogueList .fullIconBox {
    border-radius: 4px;
    overflow: hidden;
}

#courseHead .fullIconBox {
    border-radius: 6px;
    overflow: hidden;
    margin-left: 10px;
}

#courseHead .largeIconBox    {
    border-radius: 6px;
    overflow: hidden;
    margin-left: 14px;
}

#contentFilter .panel-top {
    max-width: 760px;
}

.sortComments.selectedItem {
    font-weight: bold;
}

#contentBox .showElementComments {
    opacity: 0;
}

#comment_imagelink {
    display: none;
}

.commentItem {
    border-radius: 10px;
    margin-top: 4px;
    border: 1px solid #333;
}

.commentIcon {
    background-image: url('../../../content/comment-icon.png');
    background-size: 40px;

    background-repeat: no-repeat;
    padding-left: 50px;
    min-height: 45px;
}

#fabric_content .commentBox {
    border-radius: 10px;
    border: 1px solid #333;
}

.showElementComments {
    display:none;
}

#courseEditorList .courseItem {
}

.editMachine_head {
    overflow: hidden;
}

.editMachine_body {
    border: 1px solid #DDD;
}

.spacing-element {
    padding: 5px 0px;
}

.spacing-row {
    padding: 5px 30px;
}

#fabric_content[data-type="11"] .spacing-row {
    padding: 8px 0px;
}

#fabric_content[data-type="11"] #content_screen .col6 .elementContent.spacing-row {
    padding-top: 8px;
}

#fabric_content .spacing-element .elementText {
    padding-top: 10px;
    padding-bottom: 10px;

    line-height: 1.4em;
}


.elementFloat[data-layout=15left] .elementContent .colLeft.smallIcon {
    margin-top: -18px;
}

.elementContent p, .elementPreview p, #tinymce p {
    margin: 0;
    min-height:24px;
}

.elementContent ul, .elementPreview ul, #tinymce ul {
    margin: 0;
}

.elementContent h1 {
    line-height: 50px;
}

#fabric_content .elementText a img {
    vertical-align: middle;
    margin-right: 10px;
}

#fabric_content .elementContent[data-display="Quote"] .elementText {
    font-size: 16pt;
    line-height: 28px;
}

#fabric_content .elementContent[data-display="Abstract"]::first-letter,
#fabric_content .elementPreview[data-display="Abstract"]::first-letter {
  font-size:auto;
}

#fabric_content .elementContent[data-display="Tip"],
#fabric_content .elementPreview[data-display="Tip"]{
  font-size:1.2em;
  line-height:1.8em;
  border-top:2px solid #333;
  border-bottom:2px solid #333;
  margin: 0;
  box-sizing:border-box;
}


#fabric_content .videoOverlay {
    background-image: url('../../../content/play.png');
}

.table-head p {
    margin: 10px 0;
}

#progressTable .icon-goal-counter, #progressTable .icon-prodev-counter, #progressTable .icon-expiry-counter {
    margin-left: 0;
}

#popupContent .table-info th, #reportPanel .table-info th {
    color: #FFF;
    background-color: #000;
    text-align: center;
}

#popupContent .table-info td, #reportPanel .table-info td { 
    border: 1px solid #000;
}

#popupContent .table-info td, #reportPanel .table-info td {
    padding: 5px;
}

#popupContent .table-info td:has(div), #reportPanel .table-info td:has(div) { 
    padding: 0;
}

#popupContent .table-info td div, #reportPanel .table-info td div { 
    padding: 5px;
}

.wrapper.body-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.mod-login__pretext {
    display: none;
}


/*
#loginFormWrapper {
    border-radius: 8px;
}

#loginFormWrapper .imgFull, .loginFormWrapper .imgFull {
    margin: 10px 0px;
}

#loginForm button[name=Submit] {
    margin-top: 10px;
    padding: 10px;
    border: none;
    width: 100%;
    background: #E31E38;
    color: #FFF;
    font-size: 14pt;
    border-radius: 4px;
 }

 #loginForm ul.mod-login__options li {
    background: #E31E38;
    color: #FFF;
    border-radius: 4px;
}

#loginForm ul.mod-login__options li a {
    color: #FFF;
}

#loginForm button.btn-primary {
    text-align: center;
    border-radius: 4px;
    padding: 8px;
}

#loginForm .list-group-item {
    background: #E31E38;
    color: #FFF;
    border-radius: 4px;
    display: block;
    width: 100%;
    padding: 5px 10px;
    margin-top: 5px;
    box-sizing: border-box;
}

#loginForm .visually-hidden, .input-password-toggle, #loginForm .controls .input-password-toggle {
    display: none;
}

#loginForm .input-group {
    margin: 8px 0;
}

#loginForm .alert-wrapper .body-wrapper #system-message-container .alert-wrapper {
    margin-left: 0;
}
*/


#loginFormWrapper, .loginFormWrapper {
    border-radius: 0px;
    background-color: #000;
    min-height: 400px;
    padding: 0;
    font-size: 12pt;
}

#loginFormWrapper .imgFull, .loginFormWrapper .imgFull {
    margin: 0 auto;
    margin-top: -60px;
    width: 40%;
    border-radius: 100px;
    border: 10px solid #000;
    overflow: hidden;
}

.loginFormWrapper .button-control {
    border-radius: 10px;
    margin: 16px 0 0 0;
}

    .loginFormWrapper .button-control:hover {
        margin: 16px 0 0 0;
    }

#loginForm button[name=Submit] {
    margin-top: 10px;
    padding: 10px;
    border: none;
    width: 100%;
    background: #E31E38;
    color: #FFF;
    font-size: 12pt;
    border-radius: 4px;
 }

 #loginForm ul.mod-login__options li {
    background: #E31E38;
    color: #FFF;
    border-radius: 4px;
}

#loginForm ul.mod-login__options li a {
    color: #FFF;
}

#loginForm button.btn-primary {
    text-align: center;
    border-radius: 4px;
    padding: 8px;
}

#loginForm .list-group-item {
    background: #E31E38;
    color: #FFF;
    border-radius: 4px;
    display: block;
    width: 100%;
    padding: 5px 10px;
    margin-top: 5px;
    box-sizing: border-box;
}

#loginForm .visually-hidden {
    display:none;
}

.icon-eye {
    display:block;
    background-image: url(../images/showPassword.svg);
    background-size:24px;
    background-position:left center;
    background-repeat: no-repeat;
    height:24px;
    width:24px;
    
}

.icon-eye-slash {
    display:block;
    background-image: url(../images/hidePassword.svg);
    background-size:24px;
    background-position:left center;
    background-repeat: no-repeat; 
    height:24px;
    width:24px;   
}

#showPassword {
    display: none;
}

.input-password-toggle, #loginForm .controls .input-password-toggle {
    position: absolute;
    right:55px;
    margin-top: -27px;
    z-index:200;
    border:none;
    height:24px;
    width:24px;
    background:transparent;
}

#loginForm .input-group {
    margin: 8px 0;
}

#loginForm .alert-wrapper .body-wrapper #system-message-container .alert-wrapper {
    margin-left: 0;
}

#loginBackground footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.colLoginMessage {
    float:left; width:60%;
}

.colLoginForm {
    float:right; width:40%; z-index:200;
}

@media screen and (max-width: 560px) {

    .colLoginMessage {
        width:100%;
        padding-bottom: 100px;
    }

    .colLoginForm {
        width:100%;
    }
}

.body-wrapper #system-message-container {
    position: relative;
}


.wrapper.body-wrapper {
    margin-bottom: 40px;
}


.contentBox {
    max-width: 900px;
}

#content_screen {
    margin-bottom: 0px;
}

#fabric_content.objectView {
    min-height: calc(100vh - 75px);
}

#fabric_content.objectView .wrapper .spacing-element {
    padding: 10px 50px;
}

#fabric_content.objectView .border-content .spacing-element {
    padding: 0;
}

#fabric_content.objectView .wrapper .topLabelSpace .spacing-element {
    padding: 0;
}

@media screen and (min-width: 560px) {
    #content_screen .border-content {
        padding: 15px 50px;
    }

    #fabric_content.objectView .objectHeader {
        padding-left: 30px;
    }

    #fabric_content[data-type=11].objectView .wrapper .spacing-element {
        padding: 10px 50px;
    }
}

#content_screen .border-content .col3 .elementText, #content_screen .border-content .col3 .elementContent .spacing-element {
    padding: 0;
}

#content_screen .border-content .col3.clearLeft .spacing-element {
    padding-bottom: 0;
}

.mediaContent .media-label {
    font-size: 1.1em;
}

.mediaContent .spacing-label {
    padding: 4px 10px;
}

#content_screen .border-content .col3 .mediaContainer {
    padding: 0 10px 0 0;
}

#content_screen .border-content .col3 .mediaContainer.spacing-full {
    margin: 0 10px 0 0;
    padding: 0;
}

#content_screen .border-content .col4 .elementImage  {
    padding-left: 20px;
    padding-right: 20px;
}

#content_screen .border-content .col3 .elementOptions {
    padding: 0 20px;
}

#content_screen .border-content .smallIcon .mediaContainer {
    padding: 0;
}

#content_screen .border-content .mediaContainer.spacing-full {
    margin: 0;
}

#content_screen .border-content .col5 .mediaContainer.spacing-full {
    margin: 10px 0;
}

#fabric_content .spacing-element .elementText {
    padding: 0;
}

#content_screen .border-content .col3.clearLeft .elementOptions .mediaContainer {
    padding: 0 50px;
}

#content_screen .border-content .col4 .colLeft .elementText{
    padding-top: 14px;;
}

#content_screen .border-content .col4 .spacing-row .colLeft .elementText {
    padding-top: 10px;
}

#content_screen .col6.clearLeft .elementText {
    padding-top: 16px;
}

#element_screen .elementitem.clearLeft.col6 .elementPreview p {
    padding-top: 20px;
}

#content_screen .col6 .elementContent.spacing-row {
    padding-top: 0;
}

#content_screen .border-content .col2.colRight {
    padding-top: 16px;
}

.objectHeader {
    padding-top: 10px;
}

.quizOptions.spacing-control {
    padding: 15px;
}

.dragContainer .quizOptions {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
}

#fabric_content #sidemenu a.topmenu_button, #fabric_content #sidemenu a.topmenu_icon {
    display: block;
    background-image : url('https://bplearning.ca/content/media/7911705882373-bp-roundel-eng-fullcolour.png');
    height: 48px;
    width: 48px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    left: 0;
    margin-left: 26px;
}


#fabric_content .topmenu_icon, #fabric_content .topmenu_icon_side {
    background-image : url('https://bplearning.ca/content/media/7911705882373-bp-roundel-eng-fullcolour.png');
}

#fabric_content .topmenu_icon_side:hover {
    background-size: auto 100%;
}

@media screen and (max-width: 560px) {
    #fabric_content #planList .col3 {
        width: 50%;
    }    

    #fabric_content #contentBox .col3 {
        width: 50%;
    }  

    #fabric_content #contentBox .dragContainer .col3 {
        width: 33%;
    }  

    /* hoh cook times*/
    #fabric_content #contentBox .col3:has(.borderColTall) {
        width: 100%;
    }

    #fabric_content #contentBox .col4 .borderColTall {
        border-top: 2px solid #333;
        border-bottom: 2px solid #333;
        margin-bottom: 4px;
    }

    #fabric_content #contentBox .col4 .borderColTall .elementText {
        float:left;
    }

    #fabric_content #contentBox .col5 .borderColTall .mediaContainer {
        margin: 0;
    }

    #fabric_content #contentBox .col5 .borderColTall .elementText {
        float: left;
        margin-top: 15px;
    }

    #progressTable .infoCell .col6 {
        width: 100%;
    }

    #fabric_content #progressTable .infoCell .col2 {
        width: 25%;
    } 

    #fabric_content .largeIconBox {
        width: 70px;
        height: 70px;
    } 

    #fabric_content .largeIcon {
        width: 70px;
    }

    #fabric_content .courseTitleBox.col8 {
        width: 75%;
    }

    #fabric_content #courseBanner {
        margin-top: 0px;
    }
}

@media screen and (min-width: 501px) {
    #fabric_content #courseBanner {
        margin-top: 50px;
    }
}

@media screen and (min-width: 1366px) {
    #fabric_content .topmenu_button.smallOnly {
        display: none;
    }

    #progressWarning .panel-center {
        margin-left: -370px;
    }
}

#fabric_content[data-view=Home] {
    margin-top: 0px;
}

#fabric_content[data-screenmode=normal], #fabric_content[data-screenmode=medium] {
    margin-top: 50px;
}


@media screen and (min-width: 1366px){

    #fabric_content[data-view=Home] .wrapper {
        margin: 0 auto;
    }

    #fabric_content #screen_plan .wrapper {
        margin-left: 140px;
        max-width: 980px;
    }

    #fabric_content #screen_plan .wrapper.slideMenuMargin {
        margin-left: 380px;
        max-width: 980px;
    }

    #fabric_content #topmenu_button, #fabric_content #topmenu_icon {
        margin-left: 31px;
    }
    .maxwrapper {
        margin-left: 100px;
    }

    #fabric_content .wrapper-left {
        margin-left: 140px;
    }

    #fabric_content .wrapper {
        margin-left: 140px;
    }


    #fabric_content #massControls.wrapper-left {
       margin-left: 150px;
       width: calc(100% - 160px);
    }
    .alert-wrapper {
        margin-left: 0px;
    }

    #loginForm .alert-wrapper .body-wrapper #system-message-container .alert-wrapper {
        margin-left: 0;
    }
}

@media screen and (min-width: 1500px){
    #fabric_content #screen_plan .wrapper {
        margin-left: 240px;
        max-width: 980px;
    }

    #catMenuToggle {
        left: 200px;
    }

    .slideMenu {
        left: 203px;
    }

    #fabric_content #screen_plan .wrapper.slideMenuMargin {
      margin-left: 505px;
    }

    #fabric_content .wrapper {
        margin-left: 240px;
    }

    .maxwrapper {
        margin-left: 200px;
    }

    #courseMenu .fillscreen {
        display: none;
    }
    #fabric_content #massControls.wrapper-left {
       margin-left: 200px;
       width: calc(100% - 210px);
    }
}

.back-leftpanel {
    background-color: #FFF;
}

#fabric_content #sidemenu.siteNav.menupanel {
    position: fixed;
    top: 0px;
    height: 100%;
    width: 100px;
    padding-top: 10px;
    z-index: 203;
    left: 0;
}

#sidemenu.program1144 li[data-tooltip="Management"] {
    display:none;
}

#sidemenu.program1144 li[data-tooltip="AdminPosts"] {
    display:none;
}

#sidemenu.program1144 li[data-tooltip="Dashboard"] {
    display:none;
}

@media screen and (min-width: 1500px) {
    #fabric_content .wrapper #sidemenu.siteNav.menupanel {
        left: auto;
        margin-left: -140px;
    }

    #alertPanel .panel-right {
        position: fixed;
        left: calc(50% + 380px);
        top: 0;
    }

    .topmenu_icon_side {
        display: none;
    }
}

@media screen and (min-width: 1600px) {

    #fabric_content #sidemenu.siteNav.menupanel {
        left: auto;
        width: 200px;
    }

    #fabric_content .wrapper #sidemenu.siteNav.menupanel {
        left: auto;
        width: 200px;
        margin-left: -240px;
    }

    #fabric_content .wrapper-left {
        margin-left: 220px;
    }

    #alertPanel .panel-right {
        position: fixed;
        left: calc(50% + 380px);
        top: 0;
    }
}

#fabric_content #sidemenu ul.nav-menu {
    margin: 80px 0 0 20px;
}

.topmenu {
    background: #FFF;
}

#topmenu .nav-menu a {
    font-size: 13pt;
}
#fabric_content #sidemenu .menuHome {
    text-indent: -998em;
    background-image: url(../../../images/BP_Home_MenuIcon.svg);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}


#fabric_content #topmenu .menuHome {
    margin-top: 4px;
    padding-left: 40px;
    background-image: url(../../../images/BP_Home_MenuIcon.svg);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #sidemenu .menuPlan {
    text-indent: -998em;
    background-image: url(../../../images/BP_LearningPath_MenuIcon-1.svg);
    background-size: 32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #topmenu .menuPlan {
    margin-top: 4px;
    padding-left: 40px;
    background-image: url(../../../images/BP_LearningPath_MenuIcon-1.svg);
    background-size: 32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #sidemenu .menuManage {
    text-indent: -998em;
    background-image: url(../../../images/BP_Team.svg);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #topmenu .menuManage {
    margin-top: 4px;
    padding-left: 40px;
    background-image: url(../../../images/BP_Team.svg);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #sidemenu .menuAuthoring {
    text-indent: -998em;
    background-image: url(../../../images/BP_Authoring_MenuIcon.svg);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #sidemenu .menuAdmin {
    text-indent: -998em;
    background-image: url(../../../images/BP_Teams_MenuIcon.svg);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #sidemenu .menuAdminUserReports {
    text-indent: -998em;
    background-image: url(../../../images/BP_Reports_MenuIcon.svg);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #sidemenu .menuAdminGroups {
    text-indent: -998em;
    background-image: url(../../../images/BP_Configuration_MenuIcon.svg);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #sidemenu .menuAdminPosts {
    text-indent: -998em;
    background-image: url(../../../images/BP_Messages_MenuIcon.svg);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #topmenu .menuAdminPosts {
    margin-top: 4px;
    padding-left: 40px;
    background-image: url(../../../images/BP_Messages_MenuIcon.svg);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #sidemenu .menuDashboard {
    text-indent: -998em;
    background-image: url(../../../images/BP_SideMenu_Compliance.png);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

#fabric_content #topmenu .menuDashboard {
    margin-top: 4px;
    padding-left: 40px;
    background-image: url(../../../images/BP_SideMenu_Compliance.png);
    background-size:32px;
    background-position:left center;
    background-repeat: no-repeat;
}

@media screen and (min-width: 1600px) {
    #fabric_content #sidemenu .menuHome {
        text-indent: 0;
        padding-left: 40px;
        background-size:32px;
    }

    #fabric_content #sidemenu .menuPlan {
        text-indent: 0;
        padding-left: 40px;
        background-size:32px;
    }

    #fabric_content #sidemenu .menuManage {
        text-indent: 0;
        padding-left: 40px;
        background-size:32px;
    }

    #fabric_content #sidemenu .menuAuthoring {
        text-indent: 0;
        padding-left: 40px;
        background-size:32px;
    }

    #fabric_content #sidemenu .menuAdmin {
        text-indent: 0;
        padding-left: 40px;
        background-size:32px;
    }

    #fabric_content #sidemenu .menuAdminUserReports {
        text-indent: 0;
        padding-left: 40px;
        background-size:32px;
    }

    #fabric_content #sidemenu .menuAdminGroups {
        text-indent: 0;
        padding-left: 40px;
        background-size:32px;
    }

    #fabric_content #sidemenu .menuAdminPosts {
        text-indent: 0;
        padding-left: 40px;
        background-size:32px;
    }

    #fabric_content #sidemenu .menuDashboard {
        text-indent: 0;
        padding-left: 40px;
        background-size:32px;
    }
}

#fabric_content #sidemenu li {
    padding: 16px 12px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#fabric_content #sidemenu li.selected {
        
}

#fabric_content #sidemenu li:hover {
    background-color: #ededed;
}

#fabric_content #sidemenu a {
    color: #292929;
    padding-left: 0;
    height: 30px;
}

footer {
    clear: both;
    padding: 10px 15px;
}

.linkCategory, .courseTagItem.spacing-tag {
    display: block;
    padding: 4px;
    background-color: transparent;
    border: 1px solid #DDD;
    border-radius: 3px;
}

.courseTagItem.spacing-tag {
    padding: 8px;
}

.linkCategory.selectedItem {
    border-left: 3px solid #E31E38;
}

#screen_plan .column-left {
    padding: 2px;
}

.elementContent .statTable {
    border-radius: 4px;
}

.barMeterBar {
    border-radius: 4px;
    overflow:hidden;
}

/*
@media screen and (min-width: 560px) {
    #fabric_content .elementrow {
        padding-left: 20px;
    }
}*/

#fabric_content .elementrow .elementOptions {
    padding-left: 0;
}

.elementOptions .button-content {
    border: 1px solid #FFF;
}

#fabric_content .format-content .elementContent textarea {
    margin-top: 0;
}

#fabric_content .table-log td {
    
}


@media screen and (min-width: 0px) and (max-width: 560px) {

    h2.pageTitle {
        font-size:20pt;
        line-height: 26pt;
    }

    h4.columnTitle {
        font-size: 13pt;
    }

    #fabric_content .format-content h1 {
        font-size: 18pt;
        line-height: 36px;
    }


    #fabric_content .format-control h3 {
        font-size: 16pt;
    }

    #fabric_content .format-content h4 {
        font-size: 14pt;
    }

    #fabric_content .mediumIconCol {
        width: 60px;
    }

    #fabric_content .mediumIcon {
        width: 60px;
    }

    #fabric_content .col1 {float:left;width:15%;}
    #fabric_content .col1\.5  {float:left;width:20%;}
    #fabric_content .col2 {float:left;width:17%;}


    #fabric_content .border-content .col2 {float:left;width:50%;}

    #fabric_content #wright-0 .col2 {
        width: 16%;
    }

    #fabric_content #topmenu {
        font-weight:1.2em;
    }

    #fabric_content .col20 {float:left;width:100%;}
    #fabric_content .col3 {float:left;width:100%;}
    #fabric_content .col4 {float:left;width:100%;}
    #fabric_content .col5 {float:left;width:100%;}
    #fabric_content .col6 {float:left;width:50%;}
    #fabric_content .col7 {float:left;width:100%;}
    #fabric_content .col8 {float:left;width:100%;}
    #fabric_content .col9 {float:left;width:100%;}
    #fabric_content .col10 {float:left;width:83%;}
    #fabric_content .col10\.5  {float:left;width:80%;}
    #fabric_content .col11 {float:left;width:85%;}

    #fabric_content .courseItem .col3 {
        width: 100%;
    }

    #fabric_content .col4 .col4 {
        width: 33%;
    }

    #bannerPlan .col4 {
        width: 66%;
        float: right;
    }

    #fabric_content .col4 .col3 {
        width: 25%;
    }


    #fabric_content .box-stats .col2 {
        width: 50%;
    }

    #fabric_content .col6 {
        float:left;
        width:50%;
    }

    #fabric_content .objectItem.col6 {
        float:left;
        width:100%;
    }

    #fabric_content .col6.colLg {float:left;width:100%;}

    #fabric_content #contentBox .col6 {
        width: 100%;
    }

    #fabric_content #contentBox .dragContainer .col6 {
        width: 50%;
    }

    #fabric_content .infoCell {
        display: block;
    }

    #fabric_content .spacing-header .col9 {
        width: 100%;
    }

    #fabric_content #bannerPlan .spacing-header .col9 {
        width: 80%;
    }

    #fabric_content #bannerPlan .spacing-header .col3 {
        width: 20%;
    }

    #fabric_content #catMenuToggle {
        display:none;
    }

    #fabric_content .categoryHeader {
        min-height: 100px;
    }

    #fabric_content .col1.progressPercentCell {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
    }

    #fabric_content #tab_progress #filterBox .col2 {
        width: 100%;
    }

    #fabric_content #filterBox #userActive {
        width: 90%;
    }

    #fabric_content .col1.progressPercentCell .viewCourse {
        padding: 15px;
    }

    #fabric_content .col1.progressPercentCell .courseback {
        float: right;
        padding: 5px;
    }

    #fabric_content .col11.progressCell {
        width: 100%;
    }

    #fabric_content #progressTableColumns {
        display:none;
    }

    #fabric_content #filterBox .col6 {
        width: 100%;
    }

    #fabric_content .progressTableItem {
        box-sizing: border-box;
        margin: 0;
    }

    #fabric_content .itemBox {
        box-sizing: border-box;
    }

    #fabric_content .tableBack {
        float:left;
    }

    #fabric_content .progressPercentCell p {
        float:left;
        margin: 0;
    }

    #bannerManageProgress .col2.colRight {
        width: 30%;
        float: right;
    }

    #fabric_content #contentBox.col9 {
        float:none;
        width: auto;
    }
    #fabric_content #sideBox.col3 {
        width: 100%;
    }

    #planBox #contentBox {
        box-sizing: border-box;
        margin-left:10px;
        margin-right: 10px;
    }

    #planMenu {
        display:none;
    }

    #fabric_content .back-topbar-dark  .topmenu_button {
        background-image: url(../../../components/com_fabric/img/hamburger.png);
        background-size:50%;
        background-position:left center;
        background-repeat: no-repeat;
    }

    #fabric_content #content_screen .contentbox {
        
    }

    #fabric_content p.breadcrumbs {
        display: none;
    }

    #fabric_content #planContainer {
        max-width: 100%;
        overflow: scroll;
    }

    #fabric_content #profileBanner .col2 {
        width: 33%;
    }

    #fabric_content .widgetTab .col3 {
        width: 50%;
    }
}

#fabric_content .feedbackContent .col3 {
    max-width: 100px;
}

#fabric_content .elementFeedback.back-incorrect,
#fabric_content .elementFeedback.back-correct {
    background: transparent;
    border: none;
}

#fabric_content .elementFeedback.back-incorrect p {
    font-size: 1.3em;
    font-weight: bold;
    color: #cf0a2c;
}

#fabric_content .elementFeedback.back-correct p {
    font-size: 1.3em;
    font-weight: bold;
    color: #4db918;
}

#fabric_content .elementFeedback.back-neutral {
    background: transparent;
    border: none;
}

#fabric_content .elementFeedback.back-neutral p {
    font-size: 1.3em;
    font-weight: bold;
    color: #19468d;
}

/*
h2.pageTitle {
    font-size:28pt;
    line-height: 36pt;
}
*/
#fabric_content .banner .back-head{
    padding-top: 10px;
}

#quicklinkBox .lightFill {
    opacity: 0.2;
}

#quicklinkBox .format-control h4 a {
    color:#E31E38;
}

.img-feed {
    border-radius: 8px;
}

/*
#fabric_content #postBox .col3, #fabric_content #postBox .col9 {
        width: 100%;
    }*/

/*
#contentBox .show-collapsible.collapse-down, #contentBox .show-collapsible.collapse-up {
    height: 30px;
    width: 30px;
    margin-left:24px;
    background-image: url(../../../content/information.png);
}

#contentBox .show-collapsible-label {
    line-height:30px;
}
*/

#fabric_content #content_screen .wrapper {
    max-width: 1000px;
}


#fabric_content #content_screen .contentbox {
    width: 100%;
    max-width: none;
}

#fabric_content #content_screen .sidebox {
    width: 10%;
    max-width: none;
}

#fabric_content #content_screen #endBox .contentbox {
    width: 79%;
    max-width: 1000px;
}

#resultPage .mediaContent {
    max-width: 400px;
}

.toggleCat {
    display:none;
}

#fabric_content #endBox h3 {
    font-size: 30pt;
    line-height: 32pt;
    color:#E31E38;
}

@media screen and (min-width: 0px) and (max-width: 560px) {
    #fabric_content #endBox h3 {
        font-size: 18pt;
        line-height: 20pt;
        color:#E31E38;
    }
}



.objectHeader {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

h1.objectTitle {
    color: #292929;
    margin-bottom 10px;
}

.cardItem {
    box-sizing: border-box;
    margin-top: 40px;
    overflow: visible;
}

.cardItem .fullIconBox {
    margin:-50px auto 4px auto; 
    width:75%; 
    border-radius:28px; 
    overflow:hidden; 
    box-shadow: 2px 4px 4px 4px rgb(5  5 5 / 0.1);
}
    .cardItem .fullIconBox .fullIcon {
        width: 110%;
        margin: 0px 0 -2px -5px;
    }


.cardContent {
    height: 160px;
    overflow-y:hidden;
    border: none;
}

.cardMetaData {
    color: #999999;
}

.objectLink .mediaContent, .elementFloat[data-type="Image info"] .mediaContent, .elementFloat[data-type="Download"] .mediaContent {
    border-radius:28px; 
    background-color: #f4f4f4;
    overflow:hidden; 
    box-shadow: 2px 3px 3px 3px rgb(5  5 5 / 0.1);
    margin-bottom: 8px;
    margin-right: 6px;
}

.col1 .objectLink .mediaContent, .col1 .elementFloat[data-type="Image info"] .mediaContent, .col1 .elementFloat[data-type="Download"] .mediaContent {
    border-radius: 12px;
    box-shadow: none;
    max-width: 45px;
}

.col2 .objectLink .mediaContent, .col2 .elementFloat[data-type="Image info"] .mediaContent {
    margin-right: 6px;
}

.labelDuration {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url(../images/BP_Icon_Timer.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    text-indent: -998em;
    padding-right: 10px;
    opacity: 0.5;
}

.labelPoints {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url(../images/BP_Icon_Points.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    text-indent: -998em;
    padding-right: 10px;
}

#alertFeed {
    margin-top: 20px;
}

#alertFeed .feedItemSmall {
    background-color: #e6f6ff;
    border-radius: 10px;
    margin-bottom: 8px;
}

#postBox .feedItem {
    margin-bottom: 20px;
}

#bannerPlan .circleHighlight {
    display: none;
}

.elementImage[data-type=Image] {
    border-radius: 12px;
    overflow: hidden;
}

.col6 .elementImage {
    padding: 0 10px 15px 10px;
}

.col7 .elementImage {
    padding: 30px;
}

.mediaContainer {
    border-radius: 12px;
    overflow: hidden;
}

.noRoundedCorners .mediaContainer, .noRoundedCorners .elementImage[data-type=Image] {
    border-radius: 0;
}

.elementPreview .mediaContent {
    border-radius: 12px;
    overflow: hidden;
}

.elementPreview.spacing-full {
    padding: 10px 10px 10px 20px;
}

#courseProgressTop {
    display: none;
}

#courseMenu .icon-md-complete, #courseMenu .icon-md-incomplete {
    width: 18px;
    height: 18px;
    background-size:10px;
    margin: 1px 6px 0 0;
}

#fabric_content .coursePreviousButton {
    background-image: url("../images/left-button.png");
}

#fabric_content .courseNextButton {
    background-image: url("../images/right-button.png");
}

#fabric_content a.nextFlashCard, #fabric_content a.nextFlashcardButton {
    width: 60%;
    margin: 0 auto;
    float: none;
    display: block;
}

.questionContainer {
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
}

#fabric_content .question-elements .questionContainer {
    padding: 10px 0px;
    box-sizing: border-box;
}

#fabric_content .nextQuestionCard.button-content, 
#fabric_content .nextGraduatedCard.button-content, 
#fabric_content .nextGraduatedButton.button-content, 
#fabric_content .nextButton.button-content,
#fabric_content .checkAnswer.button-content {
    float: right;
    border-radius: 18px;
    width: auto;
    min-width: 100px;
    padding: 10px 20px;
}

#fabric_content .assessment_submit.button-content {
    float: right;
    border-radius: 18px;
    width: auto;
    min-width: 100px;
    padding: 10px 20px;
}

#fabric_content .assessmentSubmitBox .button-control {
    background: transparent;
    color: #E31E38;
    font-weight: bold;
    border: 1px solid #E31E38;
}

#fabric_content .colRight .sectionLink {
    background: transparent;
    color: #E31E38;
    font-weight: bold;
    border: 1px solid #E31E38;
}

.branchComplete {
    background-image: url("../../../content/checkmark-big.png");
    background-position: right 10px top 10px;
    background-size: 60px;
    background-repeat: no-repeat;
}

.branchBox {
    width: 100%;
    box-sizing: border-box;
}

#fabric_content .showHint.button-content,
#fabric_content .showHelp.button-content,
#fabric_content .clearButton.button-content {
    float: left;
    border-radius: 18px;
    width: auto;
    padding: 10px 20px;
}

#fabric_content .question_previous.button-control {
    border-radius: 18px;
    width: 80px;
    padding: 10px 10px 10px 30px;
    font-weight: bold;
}

#fabric_content .question_next.button-control, 
#fabric_content .question_next_incomplete.button-control {
    border-radius: 18px;
    width: 80px;
    padding: 10px 30px 10px 10px;
    font-weight: bold;
    text-align: center;
}

#fabric_content .toggleFormat {
    width: 40px;
    height: 40px;
    background-size: 40px;
}

#fabric_content .toggleFormat.button-format-normal {
    background-image: url("../../../images/BP_CardView_Icon.svg");
}

#fabric_content .toggleFormat.button-format-compact {
    background-image: url("../../../images/BP_ListView_Icon.svg");
}


#fabric_content label.imgChoice.selectedImageOption {
    border-radius: 10px;
}

.quizMatching .match_right {
    color: #292929;
    background-color: #ededed;
    border-radius: 0px 6px 6px 0px;
}

.quizMatching .matchRows {
    color: #292929;
    background-color: #ededed;
    background-color: #E3E3E3;
    border-radius: 6px 0px 0px 6px;
}


.match_right .arrow {
    margin-left: -40px;
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.match_right .right {
     transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.sorting_item_button .spacing-control {
    padding: 0px 10px;
}

.sorting_item_button {
    height: 105px;
}

#fabric_content .sortItem {
    text-align: center;
}

#fabric_content .sorting_item_button small.sortLabel {
    font-size: 11px;
    text-align: center;
}

#contentBox .contentbox {
    width: 100%;
    max-width: none;
}

.elementContent[data-type="Sorting answer"] .row .col6 .spacing-control:first {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.elementContent[data-type="Sorting answer"] .row .col6 .spacing-control .elementOptions {
    padding: 0;
}

.elementContent[data-type="Sorting answer"] .row .col6 .spacing-control .elementOptions .dragContainer {
    height: 100%;
    
}

.elementContent[data-type="Sorting answer"] .row .col6 .spacing-control .elementOptions .dragContainer .quizOptions {
    max-height: 450px;
    overflow-y: auto;
}

.elementContent[data-type="Sorting answer"] .row .col6 .spacing-control .elementOptions .dragContainer .quizOptions::-webkit-scrollbar {
  display: none;
}

.elementContent[data-type="Header"] {
    padding-bottom:0;
}

.elementContent[data-type="Header"] h1, .elementContent[data-type="Header"] h2, .elementContent[data-type="Header"] h3, .elementContent[data-type="Header"] h4 {
    margin-bottom: 0px;
}

#fabric_content .elementContent .elementText img {
    width: 100%;
    height: auto;
}

.dragBlank.spacing-label {
    padding: 5px 10px;
}

.sortImage {
    overflow: hidden;
}

.swipe_item {
    border-radius: 12px;
    box-shadow: 2px 4px 4px 4px rgb(5  5 5 / 0.1);
}

#fabric_content .swipeFeedback .elementFeedback.back-incorrect {
    background-color: #cf0a2c;
}

#fabric_content .swipeFeedback .elementFeedback.back-correct {
    background-color: #4db918;
}

#fabric_content .swipeAnswer .fullImg {
    max-width: 120px;
}


@media screen and (max-width: 500px) {

    #fabric_content #contentBox .col3.swipeLeft, #fabric_content #contentBox .col3.swipeRight {
        width: 10%;
    }

    #fabric_content #contentBox .col6.swipeCenter {
        width: 80%;
    }

    #fabric_content .swipeLeft .spacing-control, #fabric_content .swipeRight .spacing-control {
        padding: 0;
    }

    #content_screen.resultView .col10 {
        width: 100%;
    }

    #content_screen.resultView .col2 {
        width: 50%;
    }

    #content_screen.resultView .col4 {
        width: 33.3%;
    }

    #progressTable .userCell {
        border-top: 2px solid #AAA;
    }

    #progressTable .progressPercentCell {
        display: none;
    }
}

#content_screen .border-content .flip-card .col3 .mediaContainer {
    padding-right: 0;
}

.elementFloat[data-layout="25left"] .flip-card .mediaContent {
    margin-right: 0;
}

.flip-card-inner {
    border: 1px solid #E31E38;
    background-image: url(../../../images/flip-icon.png);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: right top;

}

.elementPreview[data-type=Flipcard] {
    border-radius: 10px;
    border: 1px solid #E31E38;
    background-image: url(../../../images/flip-icon.png);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: right top;

}

.flip-card-back {
    background-color: #EFEFEF;
    overflow: hidden;
    overflow-y: auto;
    border-radius: 10px;
}

.flip-card-back .feedbackContent {
    font-size: 1.2em;
}

.col8 .flip-card-back .feedbackContent {
    font-size: 1em;
}

.flip-card-back::-webkit-scrollbar {
    -webkit-appearance: none;
}

.flip-card-back::-webkit-scrollbar:vertical {
    width: 12px;
}

.flip-card-back::-webkit-scrollbar:horizontal {
    height: 12px;
}

.flip-card-back::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

.flip-card-back::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

.flip-card-front.hasMedia {
    display: flex;
    flex-direction: row;
}

.elementPreview[data-type=Flipcard] h3, 
.elementPreview[data-type=Flipcard] h4 {
    margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.flip-card-front .col9 .elementText {
    height: 100%;
    position: relative;
}

.flip-card-front h3,
.flip-card-front h4 {
    margin: 0 0 0 -20px;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;

}

.col8 .flip-card {
    padding-bottom: 10px;
    padding-top: 0;
    height: 180px;
}

#content_screen .border-content .col8 .flip-card-front .mediaContainer {
    padding-top: 20px;
    padding-bottom: 20px;
}

.smallIcon {
    max-width: 60px;
}

    .elementFloat .smallIcon {
        padding-left: 20px;
    }

.smallIconBox {
    width: 60px;
    height: 60px;
}

#findQuestion .panel-right {
    overflow-y: scroll;
}

#downloadReportPDF {
    display: none;
}

#fabric_content #contentBox .col5 .borderColTall .mediaContainer {
    margin: 0;
}

@media screen and (min-width: 800px) {
    .elementFloat.borderCol {
        border-left: 3px solid #666;
        border-right: 3px solid #666666;
        margin-left: 20px;

        padding-top: 10px;
        padding-bottom: 10px;
    }

    .elementFloat.borderColTall {
        margin-top: 30px;
        margin-bottom: 30px;
        border-left: 3px solid #666;
        border-right: 3px solid #666666;
        margin-left: 20px;

        padding-top: 25px;
        padding-bottom: 25px;
    }

    .elementFloat.borderColTall .smallIcon {
        padding-left: 0;
        margin-top: -10px;
    }

    #fabric_content .elementFloat.borderCol .spacing-row {
        padding-left: 10px;
    }


    #fabric_content .elementFloat.borderColTall .spacing-row {
        margin-left: -10px;
    }

    #fabric_content .col3 .elementFloat.borderColTall .spacing-row {
        max-width: 80%;
    }

    .elementPreview.borderCol, .elementPreview.borderColTall {
        border-left: 3px solid #666;
        border-right: 3px solid #666666;
        margin-top: 30px;
        margin-bottom: 30px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .elementPreview.borderColTall .smallIcon {
        padding-left: 0;
        margin-top: -10px;
    }

    .elementFloat.borderColTall {
        text-align: center;
    }

    .elementFloat.borderColTall .spacing-row {
        padding-left: 0;
        padding-right: 0;
        display: inline-block;
    }

    .elementFloat.borderColTall .spacing-row .elementText {
        text-align: left;
        float: left;
    }
}

.col4.clearLeft .elementFloat, .col4.colRight .elementFloat {
    border: none;
}

.paddingBottom .mediaContainer {
    padding-bottom: 8px;
}

#image_list .fullImg {
    min-height: 100px;
    background-color: #AAA;
}

#fabric_content .elementFloat[data-type="Text"] p, #fabric_content .elementPreview[data-type="Text"] p {
    max-width: none;
}

.objectTagContainer {
    display: none;
}


.format-content hr {
    margin: 30px 0;
}

#userDisplaynameField, #userJobtitleField {
    display: none;
}

.blueStroke {
  stroke: #19468d;
}

#rightmenu {
    left: auto;
    right: 10px;
    width: 250px;
    background-color: #FFF;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 1px 2px 2px 2px rgb(6  6 6 / 0.1);
}

#rightmenu a:hover, #rightmenu input:hover {
    opacity: 0.75;
}

.logout-button {
    background: transparent;
    color: #333;
    float: none;
    border: none;
    padding: 2px 5px;
    font-weight: bold;
}

#fabric_content .tableBackButton {
    color: #FFF;
    padding: 4px 10px 5px 25px;
    background-color:#E31E38;
    border-radius: 4px;
    background-image: url("../../../components/com_fabric/img/icons/left-button-white.png");
    background-size: 20px;
}

#userSortSelect option[value="lastvisit;DESC"], #userSortSelect option[value="lastvisit;ASC"], #userSortSelect option[value="u.access;DESC"], #userSortSelect option[value="u.access;ASC"] {
    display: none;
}

#progressBox .button-small {
    background-color:#E31E38;
}

#comment_submit {
    background:transparent;
    color: #292929;
    border: 1px solid #292929;
}

.format-control a.grayText {
    color: #999;
}

#fabric_content[data-language=fr-CA] .cardContent {
    font-size: 0.9em;
}

#fabric_content[data-language=fr-CA] .cardContent h4.columnTitle {
    font-size:18px;
    line-height:20px;
}

#fabric_content.objectView[data-language=fr-CA]  .col2 .topLabelSpace {
    font-size:0.8em;
}

@media screen and (max-width: 560px) {
    #fabric_content[data-language=fr-CA] .cardContent {
        font-size: 0.8em;
    }

    #fabric_content[data-language=fr-CA] .cardContent h4.columnTitle {
        font-size:12pt;
        line-height:16pt;
    }

    #fabric_content #contentBox .elementContent[data-type="Grouping answer"] .col6 {
        width: 50%;
    }

    #fabric_content #contentBox .grouping_item {
        font-size: 1em;
    }
}


strong strong {
    font-weight: bold;
}

h4 strong, h3 strong {
    font-weight: bold;
}