@charset "utf-8";
/* CSS Document */

#contentDocumentContainer{display: none;}
#mainWrapper, #lessonAttachmentsButtonDiv, #openCompleteModalButton{
    display: none;
}
.ctaButton.redCTAButton{
    display: none;
}
.pageTopContainer{
    max-height: calc(100vh - 160px);
}
#generatedCodeDiv{
    float: left;
    width: 100%;
    height: auto;
}
.wrapper{
    padding-left: 13px;
    padding-right: 13px;
}
/*  -- not sure if these are used --  */
.goBackContainer .pageLink{
    margin: 0;
}
.contentDocumentContainer{
    display: block;
    padding: 0.5%;
}
/*  ^^ not sure if these are used ^^  */

/* Progress bar starts here */
.lessonPartProgressContainer{
    float: left;
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 600;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    background-color: #fdfdfd;
    padding: 13px;
}
.progressBarContainer{
    float: left;
    width: 100%;
    height: 25px;
    min-height: 25px;
    padding: 0;
    border-left: none;
    border-right: none;
}
.progressBarContainer span{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0px 0px 6px 5px rgba(0,0,0,0.1);
    background-color: #9C9C9C;
    border-radius: 5px;
}
.progressBarContainer span > span{
    content: "";
    width: 0%;
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    overflow: hidden;
    border-radius: 5px;
}
.organizationProgressBar > span {
    background-color: #305a30; 
}
/* Lesson Complete Message here */
.lessonCompleteMessageContainer{
    display: none;/*flex*/
    align-items: center;
    float: left;
    width: 100%;
    height: 40px;
    margin-top: 1%;
}
.lessonCompleteMessageContainer img{
    max-height: 40px;
    max-width: 40px;
    -webkit-filter: brightness(0) saturate(100%) invert(84%) sepia(11%) saturate(5480%) hue-rotate(340deg) brightness(83%) contrast(80%);
    filter: brightness(0) saturate(100%) invert(84%) sepia(11%) saturate(5480%) hue-rotate(340deg) brightness(83%) contrast(80%);
}
.lessonCompleteMessageContainer h2{
    width: calc(100% - 50px);
    max-height: 40px;
    padding-top: 1%;
    padding-bottom: 1%;
    border-color: #C3922E;
    font-size: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Lesson parts left side nav starts here*/
.remainingLessonParts{
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.remainingLessonParts p{
    font-size: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lessonLeftContainer{
    background-color: #f2f2f2;
}
/*   Lesson parts    */
#lessonPartButtonContainer{
    min-height: 50px;
    justify-content: flex-start;
    overflow: hidden;
}
.lessonPartContainer{
    margin-top: 13px;
}
.lessonPartContainer.newNonTextOutputLabelContainer{
    padding-top: 10px;
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    background-color: #fdfdfd;
}
/* Lesson part buttons */
.lessonPart{
    width: 100%;
    height: auto;
    min-height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    text-decoration: none;  
    margin-bottom: 13px;
    margin-left: -100%;
    visibility: hidden;
    animation: flyInLeft 0.3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
.lessonPart:nth-child(20n + 2){
    animation-delay: 0.1s;
}
.lessonPart:nth-child(20n + 3){
    animation-delay: 0.2s;
}
.lessonPart:nth-child(20n + 4){
    animation-delay: 0.3s;
}
.lessonPart:nth-child(20n + 5){
    animation-delay: 0.4s;
}
.lessonPart:nth-child(20n + 6){
    animation-delay: 0.5s;
}
.lessonPart:nth-child(20n + 7){
    animation-delay: 0.6s;
}
.lessonPart:nth-child(20n + 8){
    animation-delay: 0.7s;
}
.lessonPart:nth-child(20n + 9){
    animation-delay: 0.8s;
}
.lessonPart:nth-child(20n + 10){
    animation-delay: 0.9s;
}
.lessonPart:nth-child(20n + 11){
    animation-delay: 1s;
}
.lessonPart:nth-child(20n + 12){
    animation-delay: 1.1s;
}
.lessonPart:nth-child(20n + 13){
    animation-delay: 1.2s;
}
.lessonPart:nth-child(20n + 14){
    animation-delay: 1.3s;
}
.lessonPart:nth-child(20n + 15){
    animation-delay: 1.4s;
}
.lessonPart:nth-child(20n + 16){
    animation-delay: 1.5s;
}
.lessonPart:nth-child(20n + 17){
    animation-delay: 1.6s;
}
.lessonPart:nth-child(20n + 18){
    animation-delay: 1.7s;
}
.lessonPart:nth-child(20n + 19){
    animation-delay: 1.8s;
}
.lessonPart:nth-child(20n + 20){
    animation-delay: 1.9s;
}
@keyframes flyInLeft{
    0%{
        visibility: visible;
        margin-left: -100%;
    }
    95%{
        margin-left: 2%;
    }
    100%{
        visibility: visible;
        margin-left: 0;
    }
}
.lessonPart:hover{
    cursor: pointer;
}
.partNotSelected,
.partSelected{
    width: 80%;
    height: auto;
    min-height: 40px;
    padding: 2%;
    font-size: 1.6rem;
    margin-left: 0;
    text-align: left;
}
.lessonBubble{
    display:block;
    position: relative;
    width: 15%;
    opacity: 1;
    transition-duration: 0.2s;
}
/* Lesson Part Buttons*/
.partSelected{
    border-radius: 3px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
}
.partSelected:hover, .partSelected:focus{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
    cursor: pointer;
}
.partSelected:active{
    box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.24);
}
.partNotSelected{
	box-shadow: none;
}
.partNotSelected:hover, .partNotSelected:focus{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    cursor: pointer;
    border-radius: 3px;
}
.partNotSelected:active{
    border-radius: 3px;
    box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.24);
}
.partNotSelected + img{
    scale: 0.8;
}
.partSelected + img{
    scale: 1.2;
}
.lessonPart:hover .partNotSelected + .lessonBubble{
    scale: 1.2;
}
/* ---------------- info not complete ---------------- */
.info_nc_off_button{
    border-left: medium solid #999999;
}
.info_nc_off_button + img{
    /* Gray Icon */
    -webkit-filter: invert(72%) sepia(0%) saturate(244%) hue-rotate(180deg) brightness(85%) contrast(88%);
    filter: invert(72%) sepia(0%) saturate(244%) hue-rotate(180deg) brightness(85%) contrast(88%);
}
.info_nc_on_button{
    border-right: medium solid #999999;
}
.info_nc_on_button + img{
    /* Gray Icon */
    -webkit-filter: invert(72%) sepia(0%) saturate(244%) hue-rotate(180deg) brightness(85%) contrast(88%);
    filter: invert(72%) sepia(0%) saturate(244%) hue-rotate(180deg) brightness(85%) contrast(88%);
}
/* ---------------- info complete ---------------- */
.info_c_off_button{
    color: #305a30;
    border-left: medium solid #305a30;
}
.info_c_off_button + img{
    /* Green Icon */
    -webkit-filter: invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
    filter: invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
}
.info_c_on_button{
    border-right: medium solid #305a30;
    background-color: #305a30;
    opacity: 0.8;
    color: #fdfdfd;
}
.info_c_on_button:active{
    opacity: 0.9;
}
.info_c_on_button + img{
    /* Green Icon */
    -webkit-filter: invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
    filter: invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
}
/* ---------------- question not complete ---------------- */
.question_nc_off_button{
    border-left: medium solid #999999;
    transition-duration: 0.2s;
}
.question_nc_off_button + img{
    /* Gray Icon */
    -webkit-filter: invert(72%) sepia(0%) saturate(244%) hue-rotate(180deg) brightness(85%) contrast(88%);
    filter: invert(72%) sepia(0%) saturate(244%) hue-rotate(180deg) brightness(85%) contrast(88%);
}
.question_nc_on_button{
    border-right: medium solid #999999;
    transition-duration: 0.2s;
}
.question_nc_on_button + img{
    /* Gray Icon */
    -webkit-filter: invert(72%) sepia(0%) saturate(244%) hue-rotate(180deg) brightness(85%) contrast(88%);
    filter: invert(72%) sepia(0%) saturate(244%) hue-rotate(180deg) brightness(85%) contrast(88%);
}
/* ---------------- question wrong ---------------- */
.wrong_off_button{
    color: #bf161c;
    border-left: medium solid #bf161c;
    transition-duration: 0.2s;
}
.wrong_off_button + img{
    /* Red Icon */
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(60%) saturate(4431%) hue-rotate(346deg) brightness(113%) contrast(102%);
    filter: brightness(0) saturate(100%) invert(13%) sepia(60%) saturate(4431%) hue-rotate(346deg) brightness(113%) contrast(102%);
}
.wrong_on_button{
    border-right: medium solid #bf161c;
    transition-duration: 0.2s;
    background-color: #bf161c;
    opacity: 0.8;
    color: #fdfdfd;
    border-radius: 3px;
}
.wrong_on_button:active{
    opacity: 0.9;
}
.wrong_on_button + img{
    /* Red Icon */
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(60%) saturate(4431%) hue-rotate(346deg) brightness(113%) contrast(102%);
    filter: brightness(0) saturate(100%) invert(13%) sepia(60%) saturate(4431%) hue-rotate(346deg) brightness(113%) contrast(102%);
}
/* ---------------- question correct ---------------- */
.right_off_button{
    color: #305a30;
    border-left: medium solid #305a30;
    transition-duration: 0.2s;
}
.right_off_button + img{
    /* Green Icon */
    -webkit-filter: invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
    filter: invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
}
.right_on_button{
    border-right: medium solid #305a30;
    transition-duration: 0.2s;
    background-color: #305a30;
    opacity: 0.8;
    color: #fdfdfd;
    border-radius: 3px;
}
.right_on_button:active{
    opacity: 0.9;
}
.right_on_button + img{
    /* Green Icon */
    -webkit-filter: invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
    filter: invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
}
/* ---------------- question submitted ---------------- */
.submitted_off_button{
    color: #056c9b;
    border-left: medium solid #056c9b;
    transition-duration: 0.2s;
}
.submitted_off_button + img{
    /* Blue Icon */
    -webkit-filter: brightness(0) saturate(100%) invert(22%) sepia(78%) saturate(2327%) hue-rotate(179deg) brightness(97%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(22%) sepia(78%) saturate(2327%) hue-rotate(179deg) brightness(97%) contrast(96%);
}
.submitted_on_button{
    border-right: medium solid #056c9b;
    transition-duration: 0.2s;
    background-color: #056c9b;
    opacity: 0.8;
    color: #fdfdfd;
    border-radius: 3px;
}
.submitted_on_button:active{
    opacity: 0.9;
}
.submitted_on_button + img{
    /* Blue Icon */
    -webkit-filter: brightness(0) saturate(100%) invert(22%) sepia(78%) saturate(2327%) hue-rotate(179deg) brightness(97%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(22%) sepia(78%) saturate(2327%) hue-rotate(179deg) brightness(97%) contrast(96%);
}

/* Lesson top section starts here */
.lessonPageTopSection{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 45px;
}

.lessonTopCenterButtonContainer{
    float: left;
    width: 80%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    padding-right: 1%;
}
.lessonTopCenterButtonContainer .secondaryButtonGreen{
    width: 100%;
}

.backToProgress, .previousLessonButtonContainer, .nextLessonButtonContainer, .lessonSettingsButtonContainer, .lessonAssetsButtonContainer{
    float: right;
    width: 50%;
    height: auto;
    display: flex;
    padding: 0.5%;
}

.nextLessonButtonContainer button{
    width: 100%;
}
.lessonPageLink{
    width: 100%;
    margin: 0;
}
.lessonPageLink p{
    padding-right: 5px;
}
.downloadButtonContainer{
    position: initial;
    padding: 0;
}
.downloadButtonContainer .actionButton{
    width: 48%;
    margin-left: 51%;
    margin-top: 2%;
}


.topRightSpecialSection{
    float: left;
    width: 20%;
    height: auto;
}
.topRightSpecialSection .whitelistBlickelContainer{
    align-items: flex-start;
    margin-top: 0;
}
/* Lesson top section ends */ 

/* Lesson part sections start here */
.lessonSettingsContainer{
    float: left;
    width: 100%;
    height: auto;
    min-height: 50px;
    margin-bottom: 1%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    z-index: 500;
    background-color: #fdfdfd;
}

.lessonSettingsContainer .sectionHeader img{
    margin-left: 5px;
}

.currentLessonPartName{
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lessontext{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 2%;
	margin-bottom: 2%;
    padding-left: 2.5%;
    padding-right: 2.5%;    
}

/* Lesson audio, video, image code */
.lessonAudioContainer{
    float: left;
    display: block;
    width: 95%;
	margin-left: 2.5%;
    margin-bottom: 26px;
}

.lessonAudioContainer audio{
    width: 100%;
}

.lessonImageVideoContainer{
    float: left;
    width: 100%;
    height: auto;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.lessonImageVideoContainer .shareButton{
    width: 25%;
    margin-right: 0;
    margin-left: 0;
}

.viewLessonImageContainer{
    float: right;
    width: 95%;
    height: auto;
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.viewLessonImageContainer .borderOnHoverButtonGreen{
    height: 50px;
}

.viewLessonImageContainer img{
    display: block;
    float: right;
    width: 30px;
    height: 30px;
}

.viewLessonImageContainer img:hover{
    cursor: pointer;
}

.canvasContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lessonImageContainer{
    float: left;
    width: 95%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 26px;
}

.lessonImageContainer canvas,
.lessonimage, .lessonImage{
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 13px;
}

.lessonVideoContainer{
    float: left;
    width: 95%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 26px;
}

.youTubeVideoContainer{
    display: block;
    float: left;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;/* 16:9 */
    padding-top: 25px;
    margin-top: 2%;
    height: auto;
}

.youTubeVideoCover{
    display: none;
}

.youTubeVideoContainer .youTubeVideoCover::after {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    background-color: #0a090c;
    background-repeat: no-repeat;
    background-position: center; 
    background-size: 64px 64px;
    background-image: url(/images/icons/replayIcon.svg);
}

.youTubeVideoContainer iframe,
.lessonVimeoVideoDiv iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lessonYouTubeVideoDiv{
    float: left; 
    width: 100%;
    height: auto;
}

.lessonVimeoVideoDiv{
    float: left; 
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 56.25%;/* 16:9 */
    padding-top: 25px;
    margin-top: 2%;
    height: auto;
}

#vimeoIFrame, .vimeoIFrame{
    float: left;
    width: 100%;
    margin-left: 0;
}
.lessonPartStart,
.lessonPartEnd{
    float: left;
    width: 100%;
    height: 1px;
}
/* Lesson part sections ends here */

/* User message modal starts here */
.userMessageOutput{
    display: none;
    width: 80%;
    margin-left: 10%;
    border: 2px solid #056c9e;
}
.userMessageOutput .cardHeader p{
    color: #056c9e;
}
.userMessageOutput .secondaryButtonRed{
    width: 33.33%;
    margin-left: 33.33%;
}
.userMessageContent{
    display: none;  
    float: left; 
    width: 70%;
    max-width: 1200px;
    height: auto;
    margin-bottom: 2.5%;
    margin-left: 15%;
    background-color: #f2f2f2; 
    border-radius: 3px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 25px 0 rgba(0,0,0,0.19);
}
.userMessageHeading{
    display: block;
    width: 100%;
    padding-bottom: 1%;
    margin-bottom: 1%;
    text-align: center;
    padding-top: 2%;
    background-color: #305a30;
    color: #f2f2f2;
    font-size: 2rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.userMessageBox{
    width: 90%;
    margin-left: 5%;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}
.userMessageBox h1, .userMessageBox h2{
    text-align: center;
    color: #333333;
    padding-bottom: 1%;
    margin-bottom: 1%;
}
.userMessageBox p{
    color: #333333;
    text-align: center;
    padding-bottom: 1%;
    margin-bottom: 1%;
}
.userMessageButtonContainer{
    float: left;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: auto;
    padding: 1%;
    background-color: #fdfdfd;
    border-top: 3px solid #305a30;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-box-shadow: 0 -12px 16px 0 rgba(0,0,0,0.24);
    box-shadow: 0 -12px 16px 0 rgba(0,0,0,0.24);
}
/* Lesson nav and inputs start here */

.viewAllLessonNavBox{
    float: left;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 1%;
    margin-bottom: 26px;
}
.viewAllLessonNavBox .newInputLabelContainerLesson,
.viewAllLessonOpenEndedNavBox .newInputLabelContainer{
    margin-left: 70px;
}
.viewAllLessonOpenEndedNavBox{
    float: left;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 26px;
    margin-top: 1%;
}
.viewAllLessonOpenEndedNavBox .newInputLabelContainer{
    margin-bottom: 0;
}
input.viewAllSingleInput{
    float: left;
    width: 70%;
    height: 50px;
    margin-right: 2.5%;
    margin-left: 2.5%;
    background-color: #F2F2F2;
    border: 2px solid #999999;
}
input.correctInput{
    border-color: #056c9b;
}
input.incorrectInput{
    border-color: #8f1015;
}
input.viewAllSingleInput.correctInput{
    background: url(/images/testOrLessonImages/questionRightOn.svg);
    background-repeat: no-repeat;
    background-position: 99% center;
    background-size: auto 90%;
}
input.viewAllSingleInput.incorrectInput{
    background: url(/images/testOrLessonImages/questionWrongOn.svg);
    background-repeat: no-repeat;
    background-position: 99% center;
    background-size: auto 90%;
}
.viewAllLessonNavBox .noInputButton{
    width: 25%;
    margin-left: 75%;
}
.viewAllOpenTextareaContainer{
    display: inline-block;
    width: 70%;
    min-width: 70%;
    max-width: 70%;
    margin-right: 2.5%;
    margin-left: 2.5%;
}
.viewAllOpenTextareaContainer .lessonTextarea{
    border: 2px solid #999999;
}
.lessonTextarea:focus,
.viewAllSingleInput:focus{
    border-color: #056c9b;
}
.lessonPartContent .sectionHeader{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
}
/* Lesson Navigation Buttons */
.mobileNavButton{
    height: 20px;
}
#previousButton, #nextButton{
    width: 35%;
}

/* Lesson inputs starts here -- I think we can delete the follow 2 rule sets */

#answerInputFieldContainer{
	visibility: visible;
}
input[type="text"].lesson_input{
    display: none/*block*/;
    visibility: visible;
    position: relative;
    height: 40px;
    width: 70%;
    background-color: #F2F2F2;
    border: medium solid #999999;
    border-bottom-color: #b9baa3;
    margin: 0 auto;
    margin-right: 5%;
}

/* Lesson bottom nav bar */
.lessonnav{
    float: left;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;  
    max-width: 1500px;  
    height: auto;
    /*max-height: 400px;*/
    z-index: 600;
}
.lessonNavBox{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 80px;
    padding: 1%;
    z-index: 500;
    background-color: #fdfdfd;
    border-top: 3px solid #305a30;
    -webkit-box-shadow: 0 -12px 16px 0 rgba(0,0,0,0.24);
    box-shadow: 0 -12px 16px 0 rgba(0,0,0,0.24);
}
.finishLessonButtonContainer{
    float: right;
    width: 15%;
    height: auto;
    position: -webkit-sticky;
    position: sticky;
    bottom: 100px;
    right: 100px;
    z-index: 500;
}
.finishLessonButton{
    width: 100%;
    margin: 0;
    min-height: 50px;
}
.finishLessonButton .actionButtonImageContainerBlue{
    min-height: 50px;
}

/* View all mode viewing starts here */
.allLessonWrapper{
    float: left;
    width: 100%;
    height: auto;
}
.allLessonWrapper .lessonCenterContainer{
    float: left;
    width: 100%;
    height: auto;    
}
.allLessonWrapper .lessonPartContent{
    float: left;
    width: 100%;
    height: auto;
    min-height: auto;
}
.lessonPartContent.viewAll{
    margin-bottom: 50px;
    padding-bottom: 2.5%;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    padding: 13px;
    padding-bottom: 26px;
}
.lessonPartContent.viewAll:last-child{
    border-bottom: none;
    margin-bottom: 75px;
}
#lessonViewAnswerInputOpenEndedInputContainer{
    display: none;
}
/* Lesson mode viewing starts here */
.lessonWrapper{
    float: left;
    width: 100%;
    height: auto;
}
.lessonWrapper .lessonCenterContainer{
    float: left;
    width: 100%;
    height: auto;    
}
.lessonCenterContainer .newLabel,
.lessonCenterContainer .newTextInput{
    background-color: #fdfdfd;
}
.lessonWrapper .lessonPartContent{
    display: none;
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 50px;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    padding: 13px;
}
.lessonWrapper .lessonPartContentContainer{
    float: left;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 140px);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
}
.lessonWrapper .lesson{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    padding: 1.5%;
    padding-top: 0;
}
/*/////// Lesson Comments /////////////////*/

.lessonCommentContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 25%;
    margin-top: 150px;
    position: relative;
}
.lessonCommentContainer .sectionHeader{
    position: sticky;
    top: 80px;
    z-index: 400;
    background-color: #fdfdfd;
    padding-top: 10px;
    padding-bottom: 10px;
}
.lessonWrapper .lessonCommentContainer .sectionHeader{
    top: 0;
}
.commentSectionMessage{
    display: none;
    float: left;
    width: 100%;
    height: auto;
}
.commentSectionMessage p{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 5%;
    padding-right: 5%;
}
.lessonCommentInputContainer{
    float: left;
    width: calc(100% - 70px);
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin-top: 2%;
    margin-left: 70px;
    z-index: 300;
    background-color: #fdfdfd;
}
.lessonCommentInputContainer .newInputLabelContainer{
    margin-bottom: 0;
}
.lessonCommentInputContainer textarea:optional{
    max-width: 80%;
    min-height: 40px;
}
.lessonCommentInputContainer .secondaryButtonGreen{
    width: 18%;
    margin: 0;
    margin-left: 2%;
}
#commentSectionTextareaContainer{
    padding-left: 13px;
}
#commentSectionTextareaContainer .inputContainer{
    width: 82%;
}
#commentSectionTextareaContainer .textareaInput,
.lessonCommentCreateReplyContainer .textareaInput{
    min-height: 40px;
}
#commentSectionTextareaContainer .ctaButton{
    width: 18%;
}
.lessonCommentListContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 1%;
}
.lessonCommentContainer .lessonCommentListContainer:last-child{
    margin-bottom: 30px;
}
.lessonCommentContainer .lessonCommentInnerRepliesContainer .lessonCommentListContainer:last-child{
    margin-bottom: 0;
}
.lessonComment{
    float: left;
    width: 100%;
    height: auto;
}
.lessonCommentLeftSide{
    float: left;
    width: 40px;
    height: auto;
}
.lessonCommentUserIconContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.lessonCommentUserIconContainer img{
    display: block;
    float: left;
    width: 30px;
    height: 30px;
}
.lessonCommentUserIconContainer p{
    float: left;
    width: 100%;
    height: auto;
    font-size: 1.2rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.executiveCommentIcon img{
    -webkit-filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%); /* Blue */
}
.contentCreatorCommentIcon img{
    -webkit-filter: brightness(0) saturate(100%) invert(27%) sepia(53%) saturate(450%) hue-rotate(71deg) brightness(93%) contrast(89%);
    filter: brightness(0) saturate(100%) invert(27%) sepia(53%) saturate(450%) hue-rotate(71deg) brightness(93%) contrast(89%);/* Green */
}
.instructorCommentIcon img{
    -webkit-filter: brightness(0) saturate(100%) invert(11%) sepia(62%) saturate(4331%) hue-rotate(346deg) brightness(103%) contrast(102%);
    filter: brightness(0) saturate(100%) invert(11%) sepia(62%) saturate(4331%) hue-rotate(346deg) brightness(103%) contrast(102%);/* Red */
}
.lessonCommentRightSide{
    float: left;
    width: calc(100% - 40px);
    height: auto;
}
.lessonCommentEdited{
    color: #305a30;
}
.lessonCommentDetailsContainer{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
}
.lessonCommentDetailsLeft{
    float: left;
    width: 90%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.lessonCommentDetailsRight{
    float: left;
    width: 10%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.lessonCommentUsername{
    float: left;
    width: auto;
    height: auto;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
}
.executiveCommentUsername{
    color: #056c9b;
    border-bottom: 2px solid #056c9b;
}
.contentCreatorCommentUsername{
    color: #305a30;
    border-bottom: 2px solid #305a30;
}
.instructorCommentUsername{
    color: #8f1015;
    border-bottom: 2px solid #8f1015;
}
.lessonCommentDateTime{
    float: left;
    width: auto;
    height: auto;
    padding-left: 10px;
    padding-right: 3px;
}
.lessonCommentMenuButtonContainer{
    float: right;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid #999999;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.24);
}
.lessonCommentMenuButtonContainer:hover{
    cursor: pointer;
    box-shadow: none;
    border-color: #056c9b;
}
.lessonCommentMenuButtonContainer img{
    width: 40px;
    height: 40px;
    -webkit-filter: brightness(0) saturate(100%) invert(64%) sepia(0%) saturate(0%) hue-rotate(67deg) brightness(94%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(64%) sepia(0%) saturate(0%) hue-rotate(67deg) brightness(94%) contrast(96%);
}
.lessonCommentMenuButtonContainer:hover img{
    -webkit-filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
}
.commentMenuOpen{
    border: 2px solid #056c9b;
    border-radius: 50%;
    box-shadow: none;
}
.commentMenuOpen img{
    -webkit-filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
}
.lessonCommentMenuContainer{
    height: 60px;
    padding: 1%;
    padding-left: 0;
    padding-right: 0;
    display: none;
    justify-content: flex-end;
    align-items: center;
    align-self: flex-end;
    position:absolute;
    left: 0;
    right: 0;
    top: 40px;
}
.lessonCommentMenuContainer .secondaryButtonGreen{
    width: 18%;
    min-height: 40px;
    margin: 0;
    margin-right: 13px;
}
.lessonCommentMenuContainer .secondaryButtonRed{
    width: 18%;
    min-height: 40px;
    margin: 0
}
.lessonCommentMenuContainer .reportCommentButton{
    margin-left: 13px;
}
.lessonCommentTextContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 10px;
    padding-left: 10px;
}
.commentMenuIsOpen{
    margin-top: 60px;
}
.lessonCommentReplyContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 10px;
}
.lessonCommentCreateReplyContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.lessonCommentCreateReplyContainer .inputContainer{
    margin-bottom: 0;
}
.lessonCommentCreateReplyContainer textarea:optional{
    display: none;
    float: left;
    width: 60%;
    min-width: 60%;
    max-width: 60%;
    min-height: 40px;
    margin-right: 2%;
    border: 2px solid #999999;
}
.lessonCommentCreateReplyContainer .secondaryButtonGreen,
.lessonCommentCreateReplyContainer .ctaButton{
    width: 18%;
}
.lessonCommentCreateReplyContainer .secondaryButtonRed{
    width: 18%;
    margin: 0;
    margin-right: 13px;
}
.lessonCommentCreateReplyContainer .commentReplyButton{
    margin-top: 45px;
}
.lessonCommentCreateReplyContainer .inputContainer, .commentPostReplyButton, .commentDeleteReplyButton{
    display: none;
}
.lessonCommentReadRepliesContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top:1%;
}
.commentHasReplies{
    border-left: 2px solid #999999;
    padding-left: 5px;
}
.lessonCommentCreateReplyContainer .lessonCommentReplyReplyButton{
    margin-right: 2%;
}
.lessonCommentReplyDiscardButton,
.lessonCommentReplyPostButton{
    display: none;
}
.lessonCommentReplyDiscardButton{
    float: right;
}
.lessonCommentCreateReplyContainer .textButton{
    width: 25%;
    margin: 0;
    margin-left: 0.5px;
}
.lessonCommentCreateReplyContainer .textButton span{
    float: right;
    margin-left: 5px;
    display:block;
	transform: rotate(90deg);
	transition:transform 0.2s;
}
.lessonCommentCreateReplyContainer .textButton:hover span{
    transform: rotate(0deg);
}
.lessonCommentInnerRepliesContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 2%;
}
.noCommentsMessage{
    float: left;
    width: 90%;
    height: auto;
    margin-left: 5%;
    margin-top: 2%;
    margin-bottom: 5%;
}
.noCommentsMessage p{
    text-align: center;
}

/* responsive screen code */
@media only screen and (min-width: 1500px) {
/* Extra large devices (large laptops and desktops, 1500px and up) */
    .lessonTopCenterButtonContainer{
        width: 70%;
    }
    .topRightSpecialSection{
        width: 30%;
    }
    .finishLessonButtonContainer, .backToTopContainer{
        margin-right: 25px;
    }
    .lessontext .lessonTextParagraph{
        width: 80%;
        margin-left: 10%;
    }
    /* -- Old Code Above -- */
    #previousButton, #nextButton{
        width: 25%;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
/* Extra large devices (large laptops and desktops, 1200px and up) */
    .lessonTopCenterButtonContainer{
        width: 70%;
    }
    .topRightSpecialSection{
        width: 30%;
    }
    .lessontext .lessonTextParagraph{
        width: 80%;
        margin-left: 10%;
    }
    /* -- Old Code Above -- */
    #previousButton, #nextButton{
        width: 25%;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
/* Large devices (laptops/desktops, 992px and up) */
    .lessonTopCenterButtonContainer{
        width: 70%;
    }
    .backToProgress, .previousLessonButtonContainer, .nextLessonButtonContainer, .lessonSettingsButtonContainer, .lessonAssetsButtonContainer{
        width: 50%;
    }
    .topRightSpecialSection{
        width: 30%;
    }
    .lessontext .lessonTextParagraph{
        width: 90%;
        margin-left: 5%;
    }
    /* -- Old Code Above -- */
    /* Lesson Part */
    .partNotSelected, .partSelected{
        width: 75%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
/* Medium devices (landscape tablets, 768px and up) */
    .lessonTopCenterButtonContainer{
        width: 70%;
    }
    .topRightSpecialSection{
        width: 30%;
    }
    .backToProgress, .previousLessonButtonContainer, .nextLessonButtonContainer, 
    .lessonSettingsButtonContainer, .lessonAssetsButtonContainer{
        width: 50%;
    }
    .lessonNavBox{
        height: 75px;
    }
    .finishLessonButtonContainer{
        width: 20%;
        bottom: 90px;
        right: 75px;
    }
    .backToTopContainer, .pageSettingsContainer{
        bottom: 90px;
    }
    .lessontext .lessonTextParagraph{
        width: 90%;
        margin-left: 5%;
    }
    /* -- Old Code Above -- */
    /* Larger Image Code */
    .viewLessonImageContainer .borderOnHoverButtonGreen{
        width: 50%;
    }
    /* Lesson Part */
    .partNotSelected, .partSelected{
        width: 75%;
    }
    .userMessageOutput .secondaryButtonRed{
        width: 50%;
        margin-left: 25%;
    }
    /* Comment Code */
    .lessonCommentMenuContainer .secondaryButtonGreen,
    .lessonCommentMenuContainer .secondaryButtonRed{
        width: 26%;
    }
    .lessonCommentReadRepliesContainer,
    .lessonCommentCreateReplyContainer{
        width: calc(100% + 30px);
        margin-left: -30px;
        flex-wrap: wrap;
    }
    #commentSectionTextareaContainer .inputContainer{
        width: 100%;
        margin-right: 0;
    }
    #commentSectionTextareaContainer .ctaButton{
        width: 33.33%;
        margin-left: 66.66%;
        margin-top: 13px;
    }
    .lessonCommentCreateReplyContainer .ctaButton,
    .lessonCommentCreateReplyContainer .secondaryButtonRed{
        width: 33.33%;
        margin-top: 13px;
    }
    .lessonCommentCreateReplyContainer .commentReplyButton{
        margin-top: 0;
        width: 25%;
    }
}
@media only screen and (min-width: 601px) and (max-width: 767px) {
/* Small devices (portrait tablets and large phones, 600px and up) */
    .lessonTopCenterButtonContainer{
        width: 100%;
    }
    .topRightSpecialSection{
        width: 100%;
        margin-top: 13px;
    }
    .backToProgress, .previousLessonButtonContainer, .nextLessonButtonContainer, 
    .lessonSettingsButtonContainer, .lessonAssetsButtonContainer{
        width: 50%;
    }
    .viewAllLessonNavBox, .viewAllLessonOpenEndedNavBox{
        flex-wrap: wrap;
        margin-bottom: 50px;
        margin-top: 2%;
    }
    .viewAllLessonNavBox .viewAllSingleInput{
        width: 100%;
    }
    .centerMultChoiceContainer, .viewAllOpenTextareaContainer{
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .viewAllLessonNavBox .centerMultChoiceContainer {
        min-width: 80%;
    }
    .viewLessonImageContainer{
        display: none;
    }
    .lessonNavBox{
        height: 75px;
    }
    #previousButton, #nextButton{
        width: 48%;
    }
    .lessonCommentContainer .sectionHeader{
        top: 0;
    }
    .commentSectionMessage p{
        padding-left: 2%;
        padding-right: 2%;
    }
    .lessonCommentContainer, .lessonCommentInputContainer{
        width: 100%;
        margin-left: 0;
    }
    .lessonCommentInputContainer{
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .lessonCommentInputContainer textarea:optional{
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }    
    .lessonCommentLeftSide{
        width: 40px;
    }
    .lessonCommentDetailsLeft{
        flex-wrap: wrap;
        height: auto;
    }
    .lessonCommentUserIconContainer img{
        width: 20px;
        height: 20px;
    }
    .lessonCommentUserIconContainer p{
        font-size: 1rem;
    }
    .lessonCommentRightSide{
        width: calc(100% - 40px);
    }
    .lessonCommentReadRepliesContainer,
    .lessonCommentCreateReplyContainer{
        width: calc(100% + 30px);
        margin-left: -30px;
    }
    .lessonCommentCreateReplyContainer textarea:optional{
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin-bottom: 2%;
    }
    .lessonVideoContainer, .lessonImageContainer{
        width: 100%;
    }
    .lessonAudioContainer{
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
    }
    /* -- Old Code Above -- */
/* ---- Page Tools Code ---- */
    .finishLessonButtonContainer{
        width: 30%;
        bottom: 90px;
        right: 75px;
    }
    .backToTopContainer, .pageSettingsContainer{
        bottom: 90px;
    }
/* ---- Left Side Code ---- */
    .pageTopContainer{
        max-height: 100%;
    }
    .progressBarContainer{
        margin-top: 2%;
    }
    .lessonPartContainer{
        width: 100%;
        height: auto;
    }
    .lessonPart{
        float: left;
        width: 10%;
        min-height: 30px;
        max-height: 30px;
    }
    .lessonPart button{
        display: none;
    }
    .lessonBubble{
        float: left;
        width: 90%;
        height: auto;
        max-height: 30px;
        left: 0px;
    }
/* ---- Lesson Part Code ---- */
    .lessonSettingsContainer{
        top: 0;
    }
    .userMessageOutput .secondaryButtonRed{
        width: 50%;
        margin-left: 25%;
    }
/* ---- Lesson Nav Code ---- */
/* ---- Comment Code ---- */
    .lessonCommentMenuContainer .secondaryButtonGreen,
    .lessonCommentMenuContainer .secondaryButtonRed{
        width: 50%;
    }
    .lessonCommentReadRepliesContainer,
    .lessonCommentCreateReplyContainer{
        width: calc(100% + 30px);
        margin-left: -30px;
        flex-wrap: wrap;
    }
    .lessonCommentCreateReplyContainer .ctaButton,
    .lessonCommentCreateReplyContainer .secondaryButtonRed{
        width: 25%;
        margin-top: 13px;
    }
    #commentSectionTextareaContainer .inputContainer{
        width: 100%;
        margin-right: 0;
    }
    #commentSectionTextareaContainer .ctaButton{
        width: 33.33%;
        margin-left: 66.66%;
        margin-top: 13px;
    }
    .lessonCommentCreateReplyContainer .commentReplyButton{
        margin-top: 34px;
        width: 25%;
    }
}
@media only screen and (max-width: 600px) {
/* Extra small devices (phones, 600px and down) */
/* ---- Page Tools Code ---- */
    .pageSettingsContainer{
        bottom: 100px;
    }
    .finishLessonButtonContainer{
        width: 60%;
        bottom: 70px;
        right: 75px;
    }
    .backToTopContainer, .pageSettingsContainer{
        bottom: 70px;
    }
/* ---- Left Side Code ---- */
    .pageTopContainer{
        max-height: 100%;
    }
    .lessonTopCenterButtonContainer{
        width: 100%;
    }
    .topRightSpecialSection{
        width: 100%;
        margin-top: 13px;
    }
    .backToProgress, .previousLessonButtonContainer, .nextLessonButtonContainer, 
    .lessonSettingsButtonContainer, .lessonAssetsButtonContainer{
        width: 50%;
    }
    .progressBarContainer{
        margin-top: 2%;
    }
    .lessonPartContainer{
        width: 100%;
        height: auto;
    }
    .lessonPart{
        float: left;
        width: 10%;
        min-height: 30px;
        max-height: 30px;
    }
    .lessonPart button{
        display: none;
    }
    .lessonBubble{
        float: left;
        width: 90%;
        height: auto;
        max-height: 25px;
        left: 0px;
    }
/* ---- Lesson Part Code ---- */
    .lessonSettingsContainer{
        top: 0;
    }
    .viewLessonImageContainer{
        display: none;
    }
    .lessonVideoContainer, .lessonImageContainer{
        width: 100%;
    }
    .lessonImage{
        width: 100%;
    }
    .lessonAudioContainer{
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
    }
    .userMessageOutput .secondaryButtonRed{
        width: 50%;
        margin-left: 25%;
    }
/* ---- Lesson Nav Code ---- */
    .viewAllLessonNavBox, .viewAllLessonOpenEndedNavBox{
        flex-wrap: wrap;
        margin-bottom: 50px;
        margin-top: 2%;
    }
    .lessonNavBox{
        height: 60px;
    }
    #previousButton, #nextButton{
        width: 48%;
    }
/* ---- Feedback ---- */
    .userMessageContent,
    .userMessageOutput{
        width: 100%;
        margin-left: 0;
    }
    .userMessageButtonContainer .secondaryButtonRed{
        width: 50%;
    }
/* ---- Comment Code ---- */
    .lessonCommentContainer .sectionHeader{
        top: 0;
    }
    #commentSectionTextareaContainer{
        padding-left: 0;
        flex-wrap: wrap;
    }
    #commentSectionTextareaContainer .inputContainer{
        width: 100%;
    }
    #commentSectionTextareaContainer .ctaButton{
        width: 33.33%;
        margin-left: 66.66%;
        margin-top: 13px;
    }
    .commentSectionMessage p{
        padding-left: 2%;
        padding-right: 2%;
    }
    .lessonCommentContainer{
        width: 100%;
        margin-left: 0;
    }
    .lessonCommentLeftSide{
        width: 40px;
    }
    .lessonCommentDetailsLeft{
        flex-wrap: wrap;
        height: auto;
    }
    .lessonCommentUserIconContainer img{
        width: 20px;
        height: 20px;
    }
    .lessonCommentUserIconContainer p{
        font-size: 1rem;
    }
    .lessonCommentRightSide{
        width: calc(100% - 40px);
    }
    .lessonCommentReadRepliesContainer,
    .lessonCommentCreateReplyContainer{
        width: calc(100% + 30px);
        margin-left: -30px;
        flex-wrap: wrap;
    }
    .lessonCommentCreateReplyContainer textarea:optional{
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 13px;
    }
    .lessonCommentMenuButtonContainer,
    .lessonCommentMenuButtonContainer img{
        width: 30px;
        height: 30px;
    }
    .lessonCommentCreateReplyContainer .clickButton.lessonCommentReplyPostButton{
        margin-bottom: 2%;
    }
    .lessonCommentMenuContainer .secondaryButtonGreen,
    .lessonCommentMenuContainer .secondaryButtonRed{
        width: 50%;
    }
    .lessonCommentCreateReplyContainer .secondaryButtonGreen{
        width: 33.33%;
    }
    .lessonCommentCreateReplyContainer .ctaButton,
    .lessonCommentCreateReplyContainer .secondaryButtonRed{
        width: 33.33%;
        margin-top: 13px;
    }
    .lessonCommentCreateReplyContainer .commentReplyButton{
        margin-top: 0;
    }
}
@media only screen and (max-width: 400px) {
/* Super Extra small devices (phones, 400px and down) */
    .lessonPart{
        width: 15%;
    }
    .lessonBubble{
        max-height: 30px;
    }
    #commentSectionTextareaContainer .ctaButton{
        width: 50%;
        margin-left: 50%;
    }
    .lessonCommentCreateReplyContainer .commentReplyButton,
    .lessonCommentCreateReplyContainer .commentDeleteReplyButton,
    .lessonCommentCreateReplyContainer .commentPostReplyButton{
        width: 47%;
    }
}