@charset "utf-8";
/* CSS Document */
/* Blickel Standard Css */
/*  --  Standard  --  */
/*  --  css reset  --  */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Vollkorn';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybgGDoxxrvAnPhYGzMlQLzuMasz6Df2MHGeHmmc.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Vollkorn';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybgGDoxxrvAnPhYGzMlQLzuMasz6Df27naeHmmc.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 
    vendor prefixes 

    -webkit-   Safari      
    -moz-      Firefox
    -ms-       IE10+/Edge

    font conversion 
    
    24pt = 32px = 3.2rem - H1
    22.5pt = 30px = 3rem
    18pt = 24px = 2.4rem - H2
    14.5pt = 20px = 2rem
    13.5pt = 18px = 1.8rem - H3, Label, Button
    12pt = 16px = 1.6rem - H4, P
    10.5pt = 14px = 1.4rem
    9pt = 12px = 1.2rem
    7.5pt = 10px = 1rem (base)
*/

html{
    font-size: 62.5%;
}
h1{
    font-family: 'Vollkorn', serif;
	font-size: 3.2rem;
	font-weight: normal;
}
h2{
    font-family: 'Vollkorn', serif;
	font-size: 2.6rem;
	font-weight: normal;
}
h3{
    font-family: 'Vollkorn', serif;
	font-size: 2rem;
	font-weight: normal;
}
label, p, span, li, input, select, textarea, button{
    font-family: 'Roboto', sans-serif;
	font-size: 1.6rem;
	font-weight: normal;
}
.makeFontRoboto{
    font-size: 1.4rem;
    margin-left: 5px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number] {
    width: 100%;
    height: 50px;
    padding-top: 5px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-sizing: border-box;
}
body{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
    overflow-x: hidden;
}
.mainWrapper{
    float: left;
    width: 100%;
    position: relative;
}
.pageTopContainer{
    float: left;
    width: 25%;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 13px;
    padding-right: 6.5px;
    padding-bottom: 25px;
    margin-bottom: 1%;
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    left: 0;
    bottom: 0;
    z-index: 5;
    background-color: #fdfdfd;
}
.goBackContainer, .learnPageContainer{
    float: left;
    width: 100%;
    height: 50px;
    margin-bottom: 13px;
}
.goBackContainer a, .goBackContainer .secondaryButtonGreen,
.learnPageContainer a, .learnPageContainer .ctaButton{
    width: 100%;
    text-decoration: none !important;
}
.wrapper{
    float: left;
    width: 75%;
    min-height: 100vh;
    margin: auto;
    margin-top: 1%;
	padding-left: 6.5px;
	padding-right: 13px;
}
.lessonTextParagraph{/* If this classname changes update in javaScript also */
    text-indent: 10px;
    font-size: 2rem;
    line-height: 140%;
    margin-bottom: 10px;
}
/*  --  Headers  --  */
.pageHeader{
    float: left;
	width: 100%;
    height: auto;
    min-height: 40px;
	margin-bottom: 26px;
    display: flex;
    align-items: center;
}
.pageHeader img{
	float: left;
    display: block;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    margin-right: 10px;
}
.pageHeader h1, .pageHeader h2{
	float: left;
    width: calc(100% - 60px);
    height: auto;
    padding-left: 10px;
    padding-right: 5px;
    border-left: 3px solid #305a30;
}
#accordianHeader{
    margin-bottom: 0;
    margin-top: 13px;
}
.sectionHeader{
    float: left;
	width: 100%;
    height: auto;
    min-height: 40px;
	margin-top: 13px;
	margin-bottom: 13px;
    display: flex;
    align-items: center;
}
.sectionHeader img{
	float: left;
    display: block;
    width: 30px;
    height: 30px;
    margin-left: 15px;
    margin-right: 15px;
}
.sectionHeader h1, .sectionHeader h2{/* index page only h1 is only 1 on the page*/
	float: left;
    width: calc(100% - 60px);
    height: auto;
    font-size: 2rem;
    padding-left: 10px;
    padding-right: 5px;
    border-left: 3px solid #999999;
}
.organizationHeader{
    float: left;
    width: 100%;
    height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
    margin-top: 2%;
    margin-bottom: 2%;
    display: flex;
	flex-wrap: wrap;
    align-items: center;
    position: sticky;
    top: 80px;
    background-color: #fdfdfd;
    z-index: 900;
}
.organizationHeaderLogoContainer{
    float: left;
    width: 15%;
    height: 70px;
    background-color: #fdfdfd;
    display: flex;
    justify-content: center;
    align-items: center;
}
.organizationHeaderLogoContainer img{
    float: left;
    width: auto;
    height: auto;
    max-height: 65px;
    max-width: 90%;
}
.organizationHeader h2{
    display: block;
    float: left;
    width: 85%;
    height: auto;
    padding-left: 20px;
    padding-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 3px solid #305a30;
}
.organizationHeaderButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
	flex-wrap: wrap;
    justify-content: flex-end;
    align-items: stretch;
	margin-top: 13px;
}
.organizationHeaderButtonContainer .secondaryButtonGreen{
    width: auto;
    min-width: 200px;
    margin-left: 13px;
}
.organizationHeaderButtonContainer .secondaryButtonRed,
.organizationHeaderButtonContainer .ctaButton{
    width: auto;
    min-width: 200px;
}
/*  --  Sections  --  */
.cardContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 13px;
    margin-bottom: 13px;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
}
.cardHeader{
    float: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 30px;
    height: auto;
    padding-right: 13px;
}
.letTextWrapHeader{
    height: auto;
    min-height: 30px;
}
.stickyCardHeader{
    height: 50px;
    padding-left: 5px;
    position: sticky;
    top: 80px;
    z-index: 800;
    background-color: #fdfdfd;
}
.cardHeader img{
    float: left;
    display: block;
    width: 25px;
    height: 25px;
}
.cardHeader p{
    width: calc(100% - 30px);
    padding-left: 10px;
    font-size: 1.6rem;
    color: #020a00;
}
.cardHeader p.letTextWrap{
    white-space: unset;
}
.cardHeader span{
    float: left;
    display: block;
    width: 40px;
    font-size: 1.6rem;
    color: #020a00;
    font-weight: bold;
    text-align: center;
}
.cardHeader span:hover{
    cursor: pointer;
    background-color: rgba(12,12,12,0.4);
    border-radius: 3px;
}
.cardDetailsContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 13px;
}
/*  -- current community -- */
.currentCommunityCard{
    padding-bottom: 6.5px;
}
.currentCommunityCard .cardHeader{
    height: auto;
    overflow: hidden;
}
.currentCommunityCard .cardHeader p{
    white-space: normal;
    overflow: initial;
    text-overflow: initial;
}
.currentCommunityCard .cardDetailsContainer{
    height: 77px;
    margin-top: 6.5px;
    padding-top: 6.5px;
    padding-bottom: 6.5px;
    border: 2px solid transparent;
}
.currentCommunityCard .cardDetailsContainer:hover,
.currentCommunityCard .cardDetailsContainer:focus{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);
    border-color: #305a30;
    border-radius: 3px;
    cursor: pointer;
}
.currentCommunityCard .cardDetailsContainer img{
    display: block;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 60px;
}
.currentContentCard{
    padding: 0;
    padding-top: 13px;
}
.currentContentCard .cardHeader{
    padding-left: 13px;
    padding-right: 13px;
}
.currentContentImageContainer{
    width: 100%;
    height: 70px;  
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center; 
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: border-box; 
}
.currentContentImageContainer img{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 50px;
}
/*  --  Icon Key  --  */
#sideSectionIconKeyContainer{
    display: none;
}
.iconKeyContainer .cardDetailsContainer{
    align-items: stretch;
    justify-content: flex-start;
    padding-left: 13px;
    padding-right: 13px;
}
.iconKeyContainer{
    margin-bottom: 0;
    padding: 0;
    border: 2px solid transparent;
}
.iconKeyContainer:hover,
.iconKeyContainer:focus-within{
    border-color: #305a30;
}
.dropDownMenu{
    padding: 13px;
    height: auto;
    max-height: 50px;
}
.dropDownMenu:hover{
    cursor: pointer;
}
.dropDownMenu:hover .toggleMenuArrow{
    scale: 1.3;
    color: #305a30;
    font-weight: bold;
}
.dropDownMenu:focus .toggleMenuArrow{
    scale: 1.3;
    color: #305a30;
    font-weight: bold;
}
/*  --  Quick Jump Links  --  */
.quickJumpLinks{
    border: 2px solid transparent;
}
.quickJumpLinks:hover,
.quickJumpLinks:focus-within{
    border-color: #305a30;
}
.quickJumpLinks .cardHeader:hover{
    cursor: pointer;
}
.quickJumpLinks .cardDetailsContainer{
    justify-content: flex-start;
}
.quickJumpLinks .cardDetailsContainer p{
    width: 100%;
}
.quickJumpLinks:hover .toggleMenuArrow{
    scale: 1.3;
    color: #305a30;
    font-weight: bold;
}
.quickJumpLinks:focus .toggleMenuArrow{
    scale: 1.3;
    color: #305a30;
    font-weight: bold;
}
.toggleMenuArrow{
    display: block;
    float: right;
    font-size: 1.8rem;
	transform: rotate(90deg);
    transition:transform 0.2s;
}
.closedArrow{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition:transform 0.2s;
}
.openArrow{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition:transform 0.2s;
}
/*  --  Message to User  --  */
.bannerMessageContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fdfdfd;
    border: 3px solid #056c9b;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    padding: 40px;
}
/*  --  Outputs and Inputs  --  */
.outputCardContainer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    padding: 13px;
    margin-bottom: 13px;
}
.outputContainerContent{
    float:left;
    width: 100%;
    height: auto;
    padding: 13px;
}
.output{
    width: 100%;
    height: auto;
    min-height: 50px;
}
.largeOutputText{
    font-size: 3rem;
}
.largeCenteredOutputText{
    font-size: 3rem;
    text-align: center;
}
.inputContainer{
    float: left;
    width: 100%;
    height: auto;
    min-height: 80px;
    margin-bottom: 13px;
    margin-right:1%;
    padding-top: 30px;
    position: relative;
}
.labelForInput{
    float: left;
    width: auto;
    max-width: 90%;
    height: 25px;
    padding-left: 13px;
    padding-right: 13px;
    margin-left: 13px;
    transition-duration: 0.3s;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 5;
    background-color: #fdfdfd;
	font-weight: bold;
    color: #020a00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.innerLabel{
    float: left;
    width: auto;
    max-width: 90%;
    height: 25px;
    padding-left: 13px;
    padding-right: 13px;
    margin-left: 13px;
    transition-duration: 0.3s;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 5;
    background-color: #fdfdfd;
	font-weight: bold;
    color: #020a00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toolTip{
    float: left;
    display: block;
    width: 20%;
    height: 25px;
    margin-left: 0;
    margin-top: 5px;
    /* 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%);
}
.toolTip:hover, .toolTip:focus{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 5px;
}
.inputContainerContent{
    float:left;
    width: 100%;
    height: auto;
    min-height: 50px;
    border:2px solid #999999;
    border-radius: 3px;
    transition-duration: 0.3s;
}
#openEndedInputFieldContainer .inputContainerContent{
    background-color: #fdfdfd;
}
.inputContainerContentText{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 13px;
}
/*  --  Text Input  --  */
.textInput{
    width:100%;
    height:50px;
    background-color: #fdfdfd;
}
.inputContainerContent:hover,
.inputContainerContent:focus-within{
    border-color: #056c9b;
}
.inputContainer:focus-within .labelForInput,
.inputContainer:active .labelForInput{
    top: 0;
    bottom: auto;
    color: #056c9b;
}
/*  --  Disabled Input  --  */
.disabledInput label{
    color: #999999;
}
.disabledInput label:hover{
    cursor: not-allowed;
}
.disabledInput label:active{
    top: 20px;
}
.disabledInput .inputContainerContent:hover, 
.disabledInput .inputContainerContent:focus-within,
.disabledInput input:hover,
.disabledInput input:active{
    cursor: not-allowed;
    border-color: #999999;
}
.disabledInput textarea:hover,
.disabledInput textarea:focus-within{
    cursor: not-allowed;
}
.disabledInput.inputContainer:focus-within .labelForInput,
.disabledInput.inputContainer:active .labelForInput{
    top: 20px;
    bottom: auto;
    color: #999999;
}
.disabledInput.inputContainerContent:hover,
.disabledInput.inputContainerContent:focus-within{
    border-color: #999999;
}
/*  --  Error in Input  --  */
.errorWithInput .labelForInput{
    color: #bf161c;
}
.errorWithInput .inputContainerContent{
    border-color: #bf161c;
}
.errorWithInput.inputContainerContent:hover,
.errorWithInput.inputContainerContent:focus-within{
    border-color: #bf161c;
}
.errorWithInput.inputContainer:focus-within .labelForInput,
.errorWithInput.inputContainer:active .labelForInput{
    top: 0;
    bottom: auto;
    color: #bf161c;
}
/*  --  Correct Input  --  */
.correctAnswerInput .labelForInput{
    color: #305a30;
}
.correctAnswerInput .inputContainerContent{
    border-color: #305a30;
}
.correctAnswerInput.inputContainerContent:hover,
.correctAnswerInput.inputContainerContent:focus-within{
    border-color: #305a30;
}
.correctAnswerInput.inputContainer:focus-within .labelForInput,
.correctAnswerInput.inputContainer:active .labelForInput{
    top: 0;
    bottom: auto;
    color: #305a30;
}
/*  --  Error Output  --  */
.errorOutput{
    border: 2px solid #bf161c;
}
.errorOutput .cardHeader p{
    color: #bf161c;
}
/*  --  Correct Output  --  */
.correctOutput{
    border: 2px solid #305a30;
}
.correctOutput .cardHeader p{
    color: #305a30;
}
/*  --  Attention Output  --  */
.attentionOutput{
    border: 2px solid #056c9b;
}
.attentionOutput .cardHeader p{
    color: #056c9b;
}
/* --  Select Input  --  */
.selectInput{
    float:left;
    width:100%;
    height:50px;
    padding: 13px;
    padding-right: 30px;
    border-radius: 3px;
    background-color: #fdfdfd;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(/images/icons/selectArrowIcon.svg);
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.selectInput:hover,
.selectInput:focus{
    cursor: pointer;
    border-color: #056c9b;
}
.simpleSelect{
    height: 40px;
    background-position: 95% center;
    border:2px solid #999999;
    border-radius: 3px;
    padding: 5px;
    padding-right: 26px;
}
/* --  Color Input  --  */
.colorInput{
    float: left;
    width: 100%;
    height: 70px;
    padding-top: 13px;
}
.colorInput:hover,
.colorInput:focus{
    cursor: pointer;
    border-color: #056c9b;
}
.colorSelectText{
    width: 98%;
    height: auto;
    text-align: center;
    position: absolute;
    left: 1%;
    right: 1%;
    top: 60%;
    bottom: 20%;
    color: #fdfdfd;
    text-shadow: 1px 1px 5px #333333,1px 1px 10px #333333;
    -webkit-user-select: none;    
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    pointer-events: none;
}
.colorInputContainer:focus-within .labelForInput,
.colorInputContainer:active .labelForInput{
    top: 0;
    bottom: auto;
    color: #056c9b;
}
/*  --  Radio Input  --  */
.radioInputLegend{
    display: none;
}
.radioOptionContainer{
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 2%;
}
.radioOptionContainer:last-child{
    margin-bottom: 13px;
}
.radioOptionContainer33{
    float: left;
    width: 33.33%;
    display: flex;
    align-items: center;
    margin-bottom: 1%;
    padding-left: 2%;
}
.radioOptionContainer50{
    float: left;
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 1%;
    padding-left: 2%;
}
.radioInputContainer{
    padding-top: 13px;
}
.radio{
    float: left;
    width: 95%;
    margin-top: 2%;
    padding: 6.5px;
    font-family: 'Roboto', sans-serif;
}
.radio:hover, .radio:focus-within{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 5px;
}
.radio input[type=radio]{
    margin-right: 5px;
}
.monetizeContentAlert{
    display: none;
    float: left;
    width: 90%;
    height: auto;
    margin-top: 13px;
    margin-left: 5%;
    padding-bottom: 6.5px;
    padding-left: 13px;
    padding-right: 13px;
    border-bottom: 2px solid #bf161c;
}
/*  --  Image Radio Input  --  */
.radioImageOptionContainer{
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    margin-bottom: 1%;
    margin-top: 2%;
    padding: 13px;
}
.imageRadioOption{
    float: left;
    width: 33.33%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1%;
}
.imageRadioOption .radio{
    width: 100%;
    height: calc(100% - 30px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    border: 2px solid transparent;
}
.imageRadioOption .radio:hover{
    border: 2px solid #056c9b;
}
.imageRadioOption.roleSelected .radio:hover,
.imageRadioOption.roleSelected .radio:focus-within{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.imageRadioOption .radio .checkbox{
    opacity: 0;
    width: 100%;
    height: 1px;
}
.imageRadioOption .radio img{
    display: block;
    width: 50px;
    height: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.imageRadioOption .radio p{
    width: 100%;
    height: auto;
    text-align: center;
}
.roleAssigned{
    visibility: hidden;
    float: left;
    width: 100%;
    height: 30px;
    background-color: #056c9b;
    color: #fdfdfd;
    text-align: center;
    padding-top: 4px;
}
.roleSelected .radio{
    border: 2px solid #056c9b;
    border-top: none;
}
.roleSelected .radio:hover{
    border-top: none;
}
.roleSelected:hover .roleAssigned,
.roleSelected:focus-within .roleAssigned{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.roleSelected .roleAssigned{
    visibility: visible;
}
/*  --  Checkbox Input  --  */
.checkboxLabelInput{
    margin-left: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 13px);
    margin-top: 6.5px;
    margin-bottom: 6.5px;
    margin-left: 6.5px;
    padding: 6.5px;
}.checkboxLabelInput:first-of-type{
    margin-top: 16px;
}
.checkboxLabelInput:hover, .checkboxLabelInput:focus-within{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 5px;
}
.checkboxInput{
    display: block;
    width: 20px;
    margin-right: 13px;
}
.checkboxInput:hover{
    cursor: pointer;
}
.disabledLabel{
    color: #4f4c4d;
}
.disabledLabel:hover{
    cursor: not-allowed;
}
.disabledLabel:hover .checkboxInput, .disabledLabel:focus-within .checkboxInput{
    animation: unavailableButtonShake 0.6s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
/*  --  Slider Input  --  */
input[type=text].textInputForSliderInput{
    width: 100px;
    text-align: center;
}
.sliderContainer{
    width: calc(100% - 120px);
    float: right;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 13px;
}
.slider{
    width: 90%;
}
/*  --  Lesson Input and Button  --  */
.lessonInputButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 13px;
}/*
not sure what this was for
.lessonInputButtonContainer:focus-within .labelForInput,
.lessonInputButtonContainer:active .labelForInput{
    top: 0;
    bottom: auto;
    color: #056c9b;
}*/
.lessonInputButtonContainer .inputContainer{
    margin-bottom: 0;
    width: 82%;
}
.lessonInputButtonContainer .ctaButton,
.lessonInputButtonContainer .ctaButton.redCTAButton,
.lessonInputButtonContainer .ctaButton.unavailable{
    width: 18%;
}
/*  --  File Attachment Input  --  */
.fileAttachmentInput{
    width: auto;
    max-width: calc(100% - 13px);
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 13px;
    margin-left: 13px;
}
.fileAttachmentInput:hover{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 5px;
}
/*  --  Multiple Choice Input  --  */
.multipleChoiceOptionsContainer{
    padding-top: 20px;
    overflow: hidden;
}
.multipleChoiceOption, .nonselectedMultipleChoiceOption{
    display: flex;
    width: 80%;
    height: auto;
    justify-content: flex-start;
    align-items: center;   
    margin-bottom: 13px;
    margin-left: 10%;
    animation: flyInRight 0.3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    visibility: hidden;
}
.multipleChoiceOption:nth-child(19n + 2){
    animation-delay: 0.1s;
}
.multipleChoiceOption:nth-child(19n + 3){
    animation-delay: 0.2s;
}
.multipleChoiceOption:nth-child(19n + 4){
    animation-delay: 0.3s;
}
.multipleChoiceOption:nth-child(19n + 5){
    animation-delay: 0.4s;
}
.multipleChoiceOption:nth-child(19n + 6){
    animation-delay: 0.5s;
}
.multipleChoiceOption:nth-child(19n + 7){
    animation-delay: 0.6s;
}
.multipleChoiceOption:nth-child(19n + 8){
    animation-delay: 0.7s;
}
.multipleChoiceOption:nth-child(19n + 9){
    animation-delay: 0.8s;
}
.multipleChoiceOption:nth-child(19n + 10){
    animation-delay: 0.9s;
}
.multipleChoiceOption:nth-child(19n + 11){
    animation-delay: 1s;
}
.multipleChoiceOption:nth-child(19n + 12){
    animation-delay: 1.1s;
}
.multipleChoiceOption:nth-child(19n + 13){
    animation-delay: 1.2s;
}
.multipleChoiceOption:nth-child(19n + 14){
    animation-delay: 1.3s;
}
.multipleChoiceOption:nth-child(19n + 15){
    animation-delay: 1.4s;
}
.multipleChoiceOption:nth-child(19n + 16){
    animation-delay: 1.5s;
}
.multipleChoiceOption:nth-child(19n + 17){
    animation-delay: 1.6s;
}
.multipleChoiceOption:nth-child(19n + 18){
    animation-delay: 1.7s;
}
.multipleChoiceOption:nth-child(19n + 19){
    animation-delay: 1.8s;
}
.multipleChoiceOption:nth-child(19n + 20){
    animation-delay: 1.9s;
}
@keyframes flyInRight{
    0%{
        visibility: hidden;
        margin-left: 100%;
    }
    2%{
        visibility: visible;
    }
    95%{
        margin-left: 2.5%;
    }
    100%{
        visibility: visible;
        margin-left: 5%;
    }
}
.multipleChoiceImage{
    display: block;
    width: 25px;
    height: 25px;
    margin-left: 0;
    position: relative;
    left: 50px;
    opacity: 0;
    transition-duration: 0.3s;
    /* Gray Icon */
    -webkit-filter: brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(244%) hue-rotate(180deg) brightness(85%) contrast(88%);
    filter: brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(244%) hue-rotate(180deg) brightness(85%) contrast(88%);
}
.multipleChoiceOptionButton{
    width: calc(100% - 40px);
    height: auto;
    min-height: 50px;
    margin-left: 15px;
    text-align: left;
    padding-left: 13px;
    padding-right: 13px;
    background-color: #fdfdfd;
    transition-duration: 0.3s;
    border: 2px solid transparent;
}
.multipleChoiceOption:hover .multipleChoiceImage,
.multipleChoiceOption:focus-within .multipleChoiceImage,
.nonselectedMultipleChoiceOption:hover .multipleChoiceImage,
.nonselectedMultipleChoiceOption:focus-within .multipleChoiceImage{
    left: 0;
    opacity: 1;
}
.multipleChoiceOption:hover .multipleChoiceOptionButton,
.multipleChoiceOption:focus-within .multipleChoiceOptionButton,
.nonselectedMultipleChoiceOption:hover .multipleChoiceOptionButton,
.nonselectedMultipleChoiceOption:focus-within .multipleChoiceOptionButton{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    border-color: #056c9b;
}
.selectedMultipleChoiceOption .multipleChoiceImage{
    left: 0;
    opacity: 1;
    /* 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%);
}
.selectedMultipleChoiceOption .multipleChoiceOptionButton{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    border-color: #056c9b;
    background-color: #056c9b;
    opacity: 0.8;
    color: #fdfdfd;
}
.correctMultipleChoiceOption .multipleChoiceImage{
    left: 0;
    opacity: 1;
    /* Green Icon */
    -webkit-filter: brightness(0) saturate(100%) invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
    filter: brightness(0) saturate(100%) invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
}
.correctMultipleChoiceOption .multipleChoiceOptionButton{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    background-color: #305a30;
    opacity: 0.8;
    color: #fdfdfd;
    border-color: transparent;
}
.incorrectMultipleChoiceOption .multipleChoiceImage{
    left: 0;
    opacity: 1;
    /* 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%);
}
.incorrectMultipleChoiceOption .multipleChoiceOptionButton{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    background-color: #bf161c;
    opacity: 0.8;
    color: #fdfdfd;
    border-color: transparent;
}
.correctMultipleChoiceOption:hover .multipleChoiceOptionButton,
.correctMultipleChoiceOption:focus-within .multipleChoiceOptionButton,
.incorrectMultipleChoiceOption:hover .multipleChoiceOptionButton,
.incorrectMultipleChoiceOption:focus-within .multipleChoiceOptionButton{
    border-color: transparent;
    cursor: initial;
}
.nonselectedMultipleChoiceOption:hover .multipleChoiceImage,
.nonselectedMultipleChoiceOption:focus-within .multipleChoiceImage{
    left: 50px;
    opacity: 0;
}
.nonselectedMultipleChoiceOption:hover .multipleChoiceOptionButton,
.nonselectedMultipleChoiceOption:focus-within .multipleChoiceOptionButton{
    cursor: initial;
    box-shadow: none;
    border-radius: 0;
    border-color: transparent;
}
/*  --  Select All Input  --  */
.incorrectSelectAllOption .multipleChoiceImage{
    left: 0;
    opacity: 1;
    /* 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%);
}
.incorrectSelectAllOption .multipleChoiceOptionButton{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    background-color: #fdfdfd;
    opacity: 0.8;
    color: #000000;
    border-color: #bf161c;
}
.incorrectSelectAllOption:hover .multipleChoiceOptionButton,
.incorrectSelectAllOption:focus-within .multipleChoiceOptionButton{
    cursor: initial;
    border-color: #bf161c;
}
.nonselectedCorrectSelectAllOption .multipleChoiceImage{
    left: 0;
    opacity: 1;
    /* Green Icon */
    -webkit-filter: brightness(0) saturate(100%) invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
    filter: brightness(0) saturate(100%) invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
}
.nonselectedCorrectSelectAllOption .multipleChoiceOptionButton{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    background-color: #fdfdfd;
    opacity: 0.8;
    color: #000000;
    border-color: #305a30;
}
.nonselectedCorrectSelectAllOption:hover .multipleChoiceOptionButton,
.nonselectedCorrectSelectAllOption:focus-within .multipleChoiceOptionButton{
    cursor: initial;
    border-color: #305a30;
}

/*  --  Textarea Input  --  */
.textareaInputToolsContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
}
.openEndedInfomationContainer{
    display: flex;
    width: 100%;
    height: auto;
	padding-top: 13px;
}
.openEndedInfomationContainer p{
    width: 20%;
    height: auto;
    color: #0a090c;
    text-align: center;
    padding-top: 1%;
    padding-bottom: 1%;
    font-size: 1.4rem;
}
.openEndedInfomationContainer .limitReached{
    background-color: #bf161c;
    color: #f2f2f2;
}
.openEndedInfomationContainer .gradedPoints{
    background-color: #056c9b;
    color: #f2f2f2;
    border-top-right-radius: 3px;
}
.openEndedInfomationContainer span{
    display: block;
    width: 90%;
    margin-left: 5%;
    margin-top: 1%;
}
.limitReached span{
    font-weight: bold;
    border: 2px solid #f2f2f2;
}
.gradedPoints span{
    font-weight: bold;
    border: 2px solid #f2f2f2;
}
.inputTool{
    float: left;
    width: 20%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 13px;
}
.inputTool img{
    display: block;
    width: 25px;
    height: 25px;
}
.inputTool p{
    width: calc( 100% - 30px);
    padding-right: 13px;
    padding-left: 13px;
    font-size: 1.2rem;
}
.inputTool:hover{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
}
.textareaInput{
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: 150px;
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    margin-top: 10px;
    display: inline-block;
    box-sizing: border-box;
    color: #0a090c;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    transition-duration: 0.3s;
    background-color: #fdfdfd;
}
.labelIconRight{
    display: block;
    float: left;
    width: auto;
    height: 25px;
    margin-right: 10px;
}
.labelIconRight:hover,
.labelIconRight:focus-within{
    cursor: pointer;
    scale: 1.25;
}
.labelIconRight img{
    display: block;
    width: auto;
    height: 25px;
}
/*  --  Images  --  */
.grayIcon{ /* #999999 */
    -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%);
}
.blueIcon{ /* #056c9b */
    -webkit-filter: invert(22%) sepia(78%) saturate(2327%) hue-rotate(179deg) brightness(97%) contrast(96%);
    filter: invert(22%) sepia(78%) saturate(2327%) hue-rotate(179deg) brightness(97%) contrast(96%);
}
.greenIcon{ /* #305a30 */
    -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%);
}
.redIcon{ /* #bf161c */
    -webkit-filter: invert(13%) sepia(60%) saturate(4431%) hue-rotate(346deg) brightness(113%) contrast(102%);
    filter: invert(13%) sepia(60%) saturate(4431%) hue-rotate(346deg) brightness(113%) contrast(102%);
}
.whiteIcon{ /* white icon */
    -webkit-filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(49deg) brightness(102%) contrast(98%);
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(49deg) brightness(102%) contrast(98%);
}
.goldIcon{ /* #ffcc33 */
    -webkit-filter: brightness(0) saturate(100%) invert(80%) sepia(88%) saturate(736%) hue-rotate(328deg) brightness(102%) contrast(101%);
    filter: brightness(0) saturate(100%) invert(80%) sepia(88%) saturate(736%) hue-rotate(328deg) brightness(102%) contrast(101%);
}
/*  --  Content View Options  --  */
.contentViewOptionSection{
    float: left;
    width: 33.33%;
    height: 50px;
    margin-bottom: 26px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.viewOptionHeaderIcon{
    display: block;
    float: left;
    width: 35px;
    height: 35px;
    margin-left: 12.5px;
    margin-right: 12.5px;
}
.contentViewOptionOptionsContainer{
    float: left;
    width: calc( 100% - 60px);
    height: 35px;
    border-left: 3px solid #999999;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.viewOption{
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    min-height: 30px;
    transform:scale(1);
    transition-duration: 0.3s;
    /* Gray Icon #999999 */
    -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%);
}
.viewOption:hover,
.viewOption:focus{
    cursor: pointer;
    border-radius: 50%;
    transform:scale(1.3);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    /* Green Icon #305a30 */
    -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%);
}
.viewOption.favorite:hover,
.viewOption.favorite:focus{
    /* Red Icon #bf161c */
    -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%);
}
.viewOption.selectedContentViewOption{
    border-radius: 50%;
    transform:scale(1.3);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    /* Green Icon #305a30 */
    -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%);
}
.viewOption.favorite.selectedContentViewOption{
    /* Red Icon #bf161c */
    -webkit-filter: invert(13%) sepia(60%) saturate(4431%) hue-rotate(346deg) brightness(113%) contrast(102%);
    filter: invert(13%) sepia(60%) saturate(4431%) hue-rotate(346deg) brightness(113%) contrast(102%);
}
/*  --  view progress button Program, Course, Unit, Test  --  */
.viewProgressButtonContainer{
    float: left;
    width: 66.66%;
    height: auto;
}
.viewProgressButtonContainer .secondaryButtonGreen{
    width: 50%;
    margin-left: 50%;
}
/*  --  Table Heading  --  */
.tableHeadingContainer{
    float: left;
    width: 100%;
    height: 30px;
    background-color: #999999;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tableHeadingSection{
    float: left;
    width: 20%;
    font-size: 1.4rem;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-right: 2px solid #4c4c4c;
}
.tableHeadingSection:last-child{
    border: none;
}
.tableHeadingSection p{
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*  --  Arrow Nav  --  */
.arrowNavContainer{
	float: left;
    width: 100%;
    height: auto;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.arrowNavContainer .borderOnHoverButtonGreen{
    width: 100%;
}
.previousNextArrowContainer{
    float: left;
    width: 15%;
    height: 40px;
}
.navNumberButtonsContainer{
    float: left;
    width: 70%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 13px;
	padding-right: 13px;
}
.pageContainer{
    float: left;
    width: 12.5%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
}
.pageContainer:hover,
.pageContainer:focus{
    cursor: pointer;
    color: #0a090c;
    background-color: #999999;
}
.currentPage{
    background-color: #305a30;
    color: #f2f2f2;
}
.pageNotClickable .borderOnHoverButtonGreen:hover{
    cursor: not-allowed;
}
/*  --  Content Overview  --  */
.contentOverviewContainer{
    float: left;
    width: 100%;
    height: auto;
    display:flex; /*flex*/
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.contentCardContainer{
    float: left;
    width: 32%;
    height: auto;
    position: relative;
    z-index: 500;
}
.contentCardContainer .optionContainer{
    width: 100%;
    padding: 0;
    margin: 0;
}
.contentCardContainer .optionContainer .option{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);
}
.contentCardContainer .option:hover{
    transform: scale(1);
}
.contentCardContainer .title{
    display: block;
    height: 150px;
}
.contentCardContainer .title:hover{
    cursor: initial;
}
.contentCardContainer .titlePrivacyLevelContainer{
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.7);
    border-radius: 0;
    border-bottom-right-radius: 0px;
    border-bottom-right-radius: 5px;
    margin-left: 0;
    margin-right: 0;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
}
.contentCardContainer .optionNameContainer{
    float: left;
    width: 100%;
    height: 90px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
}
.contentCardContainer .optionContentDetailsContainer{
    height: 120px;
}
.contentCardContainer .optionNameContainer h2{
    font-size: 1.6rem;
    font-weight: bold;
}
.contentOverviewContainer .descriptionContainer{
    height: 100px;
}
.contentOverviewLeftContainer{
    float: left;
    width: 68%;
}
.contentOverviewDetailsContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 25px;
    padding-top: 13px;
    padding-bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
    background-origin:border-box;
    border-top-right-radius: 3px;
}
.contentOverviewDescriptionContainer{
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 10px;
}
.contentOverviewDescription{
    float: left;
    width: 100%;
    height: 190px;
    color: #fdfdfd;
    padding-bottom: 25px;
    padding-left: 13px;
    overflow: hidden;
    text-indent: 10px;
    text-shadow: 1px 1px 5px #928c8c,1px 1px 10px #333333;
}
.readMore{
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;/*flex*/
    justify-content: flex-end;
    align-items: flex-end;
    width: calc( 100% + 50px);
    margin-right: -25px;
    height: 75px;
    padding-bottom: 10px;
    padding-right: 25px;
    background: rgb(153,153,153);
    background:linear-gradient(180deg, rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 1) 50%);
    transition-duration: 5s;
}
.readMore:hover,
.readMore:focus{
    cursor: pointer;
    background:linear-gradient(180deg, rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 1) 55%);
}
.readMore p{
    font-size: 1.6rem;
    width: 100%;
    text-align: right;
}
.readMore:hover p,
.readMore:focus p{
    font-weight: bold;
}
.contentOverviewSubcontentContainer{
    float: left;
    width: 100%;
    height: auto;
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-left: 13px;
}
.contentOverviewSubcontent{
    float: left;
    width: 33.33%;
    height: auto;
    margin-bottom: 13px;
    display:flex;
    justify-content: flex-start;
    align-items: center;
}
.contentOverviewSubcontent img{
    display: block;
    width: 25px;
    height: 25px;
    -webkit-filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
}
.contentOverviewSubcontent p{
    padding-left: 10px;
    color: #fdfdfd;
    font-size: 1.4rem;
    text-shadow: 1px 1px 5px #333333,1px 1px 10px #333333;
}
.contentOverviewButtonContainer{
    float: left;
    width: 100%;
    height: 50px;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 13px;
}
.contentOverviewButtonContainer .contentAttachmentsButtonContainer,
.contentOverviewButtonContainer .secondaryButtonGreen{
    float: right;
    width: auto;
    min-width: 40%;
}
.contentOverviewButtonContainer .actionButton{
    display: none;
}
.contentOverviewButtonContainer .clickButton .clickButtonHeaderContainerGreen,
.contentOverviewButtonContainer .actionButton .actionButtonHeaderContainerBlue{
    padding-right: 13px;
}
.contentOverviewButtonContainer .contentPriceSection{
    float: left;
    width: 100%;
    height: auto;   
    display:none;/*flex*/
    justify-content: space-between;
    align-items: center;
}
.contentOverviewButtonContainer .ctaButton{
    float: right;
    width: auto;
    min-width: 40%;
}
.contentPriceSection .contentPrice{
    width: auto;
    min-width: 20%;
    font-size: 3.5rem;
    text-align: right;
    padding-left: 26px;
    padding-right: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 4px solid #fc3;
}
.communityAdminContentPrice{
    color: #999999;
}
/*  --  Option Blocks  --  */
.optionContainer{
    float: left;
    width: 31.33%;
    max-width: 500px;
    height: auto;
    margin-bottom: 13px;
    margin: 1%;
}
.option{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
    transition-duration: 0.3s;
    border-radius: 3px;
    transform:scale(1);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
}
.option:hover, .option:focus-within{
    transform:scale(1.05);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);
}
.title{
    float: left;
    width: 100%;
    height: 150px;
    display: block;
    background-color: #cccccc;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
    background-origin:border-box;
    position: relative;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    overflow-x: hidden;
}
.title:hover{
    cursor: pointer;
}
.titlePrivacyLevelContainer{
    width: 50px;
    height: auto;
    min-height: 0;
    max-height: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    background-color: rgba(0,0,0,0.7);
    border-radius: 0;
    border-bottom-right-radius: 5px;
    margin-left: 0;
    margin-right: 0;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    transition-duration: 0.3s;
}
.titlePrivacyLevelContainer img{
    display: block;
    width: 30px;
    height: 30px;
    margin: 13px;
    transition-duration: 0.3s;
    /* white icon */
    -webkit-filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(49deg) brightness(102%) contrast(98%);
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(49deg) brightness(102%) contrast(98%);
}
.titlePurchasedContainer{
    width: calc(100% - 150px);
    text-align: center;
    padding: 13px;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    right: 0;
    border-bottom-left-radius: 5px;
}
.titlePurchasedContainer p{
    font-size: 1.6rem;
    color: #fdfdfd;
}
.optionContainer .optionContentDetailsContainer{
    float: left;
    width: 100%;
    height: 120px;
    padding-left: 15px;
    padding-right: 15px;
}
.optionDetailsContainer{
    float: left;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.optionDetailsContainer p{
    float: left;
    width: 50%;
    padding-left: 5px;
    color: #505050;
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.optionDetailsContainer p:nth-child(odd){
    text-align: left;
    padding-left: 0;
}
.optionDetailsContainer p:nth-child(even){
    text-align: right;
    padding-right: 0;
}
.optionNameContainer{
    float: left;
    width: 100%;
    height: 90px;
    padding-left: 0;
    padding-right: 0;
}
.optionNameContainer h2{
    font-size: 1.8rem;
}
.progressBarContainer{
    float: left;
    width: 100%;
    height: 80px;
    min-height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
}
.progressBarContainer img{
    display: block;
    width: 20px;
    height: 20px;
}
.progressBarContainer span{
    display: block;
    float: left;
    width: calc(100% - 70px);
    height: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
    background-color: #999999;
    border-radius: 5px;
}
.progressBarContainer span > span{
    content: "";
    width: 0%;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 1;
    overflow: hidden;
    transition-duration: 0.3s;
    border-radius: 5px;
}
.organizationProgressBar > span{
    box-shadow: inset 0px 0px 6px 5px rgba(0,0,0,0.1);
}
.progressBarContainer span > .completedProgressBar{
    background: #c3922e;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
    background-origin:border-box;
    width: 100%;     
}
.completedProgressBarGrade{
    color: #c3922e;
}
.gradeParagraph{
    float: left;
    width: 30px;
    height: auto;
}
.gradeParagraph p{
    font-weight: bold;
    text-align: center;
    font-size: 1.4rem;
}
.overallGradeContainer, .currentGradeContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.overallGradeContainer img, .currentGradeContainer img{
    display: block;
    width: 20px;
    height: 20px;
}
.overallGradeContainer p, .currentGradeContainer p{
    padding-right: 10px;
    padding-left: 10px;
    font-size: 1.4rem;
}
.descriptionContainer{
    display: block;
    float: left;
    width: 100%;
    height: 70px;
    overflow: auto;
    padding: 1%;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 2%;
}
.descriptionContainer p{
    font-size: 1.4rem;
}
.bottomSection{
    float: left;
    width: 100%;
    height: auto;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
}
.ratingContainer{
    float: left;
    width: 20%;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    display: none;
}
.ratingContainer h1, .ratingContainer h2{
    width: 50%;
    text-align: right;
    padding-right: 10%;
}
.ratingContainer img{
    display: block;
    width: 50%;
}
.commentContainer{
    float: left;
    width: 20%;
    display: none;
}
.contentOptionCardOptionalButtonContainer{
    float: left;
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bottomSection .textButton{
    width: 50%;
    background-color: #305a30;
    color: #fdfdfd;
    margin: 0;
    margin-left: 50%;
}
.optionContentPriceAndButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.optionContentPrice{
    float: left;
    width: auto;
    min-width: 30%;
    font-size: 2rem;
    text-align: right;
    padding-top: 6.5px;
    padding-bottom: 6.5px;
    padding-right: 6.5px;
    margin-right: 13px;
    border-bottom: 4px solid #fc3;
}
.bottomSection .primaryButton,
.bottomSection .ctaButton{
    width: auto;
    min-width: 48%;
    max-width: 100%;
    height: 45px;
    margin: 0;
    margin-top: 13px;
    margin-bottom: 13px;
}
.optionContentPriceAndButtonContainer .ctaButton{
    width: auto;
    min-width: 20%;
}
.optionContainer .borderOnHoverButtonRed,
.optionContainer .borderOnHoverButtonGreen,
.optionContainer .borderOnHoverButtonBlue{
    padding: 5px;
    width: 48%;
}
.notEnrolled{
    float: left;
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    padding-right: 10px;
}
.commentContainer img{
    display: block;
    width: 40px;
	height: 40px;
}
.ratingContainer, .commentContainer, .socialMediaLink{
    cursor: pointer;
}
.favoriteIcon.addingToFavorites{ /* Add this with onclick */
    display: block;
    scale: 0.5;
    opacity: 0;
	transition: .3s ease 0s;
    animation: displayAndGrow 0.3s 1;
    animation-fill-mode: forwards;
}
@keyframes displayAndGrow{
    0% {
        scale: 0.5;
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    90%{
        scale: 1.2;
    }
    100%{
        scale: 1;
        opacity: 1;
    }
}
.favoriteIcon.removingFromFavorites{ /* Add this with onclick */
    display: block;
    scale: 1;
    opacity: 1;
	transition: .3s ease 0s;
    animation: shrinkAndHide 0.3s 1;
    animation-fill-mode: forwards;
}
@keyframes shrinkAndHide{
    0% {
        scale: 1;
        opacity: 1;
    }
    10% {
        scale: 1.2;
    }
    90%{
    }
    100%{
        scale: 0.5;
        opacity: 0;
    }
}
/*  --  Option Blocks List View  --  */
.listOptionContainer{
    width: 98%;
    max-width: 1200px;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
.listOptionContainer:first-child{
    margin-top: 0;
}
.listOptionContainer .option:hover{
    transform:scale(1);
}
.listOptionContainer .title{
    width: 33.33%;
    height: 200px;
    border-radius: 0;
    border-top-left-radius: 3px;
}
.listOptionContainer .optionContentDetailsContainer{
    height: 90px;
}
.listOptionContainer .optionNameContainer{
    height: 60px;
    overflow: auto;
}
.listOptionContainer .optionContentDetailsContainer{
    width: 33.33%;
    height: 75px;
}
.listOptionContainer .optionDetailsContainer{
    justify-content: flex-start;
}
.listOptionContainer .optionDetailsContainer p{
    width: 50%;
}
.listOptionContainer .progressBarContainer{
    width: 33.33%;
    height: 75px;
    padding-top: 5px;
    padding-bottom: 0;
}
.listOptionContainer .descriptionContainer{
    width: 66.66%;
    height: 65px;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.listOptionContainer .bottomSection{
    width: 66.66%;
    height: 50px;
    margin-top: 5px;
    flex-wrap: nowrap;
}
.listOptionContainer .contentOptionCardOptionalButtonContainer{
    width: 50%;
    padding-right: 13px;
}
.listOptionContainer .optionContentPriceAndButtonContainer{
    width: 50%;
}
.listOptionContainer .optionContentPrice{
    width: auto;
    min-width: 30%;
}
.listOptionContainer .contentOptionCardOptionalButtonContainer .borderOnHoverButtonGreen,
.listOptionContainer .contentOptionCardOptionalButtonContainer .borderOnHoverButtonRed,
.listOptionContainer .contentOptionCardOptionalButtonContainer .borderOnHoverButtonBlue{
    height: 45px;
}
.listOptionContainer .bottomSection .primaryButton,
.listOptionContainer .bottomSection .ctaButton{
    width: auto;
    min-width: 20%;
}
/*  --  Option Blocks/Lists with prerequisites  --  */
.hasPrerequisite .title,
.hasPrerequisite .optionContentDetailsContainer,
.hasPrerequisite .progressBarContainer,
.hasPrerequisite .descriptionContainer{
    opacity: 0.5;
}
/*  --  Buttons  --  */
.pageLinkButtonContainer{
    justify-content: flex-start;
}
/*  --  Call to Action  --  */
.ctaButton{
    float: left;
    width: 33.33%;    height: 50px;
    background-color: #056c9b;
    border: 2px solid #056c9b;
    border-radius: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 13px;
    padding-right: 26px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    transition-duration: 0.2s;
}
.ctaButton:hover, .ctaButton:focus{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);
    border-color: #045174;
}
.ctaButton:active{
    box-shadow: none;
    border-color: #056c9b;
}
.ctaButton img{
    display: block;
    width: auto;
    height: 25px;
    transition-duration: 0.2s;
    /* White Icon */
    -webkit-filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(49deg) brightness(102%) contrast(98%);
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(49deg) brightness(102%) contrast(98%);
}
.ctaButton:hover img, .ctaButton:focus img{
    scale: 1.3;
}
.ctaButton:active img{
    scale: 1;
}
.ctaButton p{
    color: #fdfdfd;
    margin-left: 10px;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.ctaButton{
    text-decoration: none !important;
}
.redCTAButton{
    background-color: #bf161c;
    border-color: #bf161c;
}
.redCTAButton:hover,
.redCTAButton:focus{
    border-color: #a30c19;
}
/*  --  Primaray  --  */
.primaryButton{
    float: left;
    width: 33.33%;
    height: 50px;
    background-color: #305a30;
    border: 2px solid #305a30;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 13px;
    padding-right: 26px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    transition-duration: 0.2s;
}
.primaryButton:hover, .primaryButton:focus{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);
    border-color: #244424;
}
.primaryButton:active{
    box-shadow: none;
    border-color: #305a30;
}
.primaryButton img{
    display: block;
    width: auto;
    height: 25px;
    transition-duration: 0.2s;
    /* White Icon */
    -webkit-filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(49deg) brightness(102%) contrast(98%);
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(49deg) brightness(102%) contrast(98%);
}
.primaryButton:hover img, .primaryButton:focus img{
    scale: 1.3;
}
.primaryButton:active img{
    scale: 1;
}
.primaryButton p{
    color: #fdfdfd;
    margin-left: 10px;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.primaryButton{
    text-decoration: none !important;
}
/*  --  Secondary Green  --  */
.secondaryButtonGreen{
    float: left;
    width: 33.33%;
    height: 50px;
    background-color: #fdfdfd;
    border: 2px solid #999999;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 13px;
    padding-right: 26px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    transition-duration: 0.2s;
}
.secondaryButtonGreen:hover, .secondaryButtonGreen:focus{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
    border-color: #305a30;
}
.secondaryButtonGreen:active{
    box-shadow: none;
    border-color: #305a30;
}
.secondaryButtonGreen img{
    display: block;
    width: auto;
    height: 25px;
    transition-duration: 0.2s;
    /* 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%);
}
.secondaryButtonGreen:hover img, .secondaryButtonGreen:focus img{
    scale: 1.3;
}
.secondaryButtonGreen:active img{
    scale: 1;
}
.secondaryButtonGreen p{
    color: black;
    margin-left: 10px;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.secondaryButtonGreen{
    text-decoration: none !important;
}
/*  --  Secondary Red  --  */
.secondaryButtonRed{
    float: left;
    width: 33.33%;
    height: 50px;
    background-color: #fdfdfd;
    border: 2px solid #999999;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 13px;
    padding-right: 26px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    transition-duration: 0.2s;
}
.secondaryButtonRed:hover, .secondaryButtonRed:focus{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
    border-color: #bf161c;
}
.secondaryButtonRed:active{
    box-shadow: none;
    border-color: #bf161c;
}
.secondaryButtonRed img{
    display: block;
    width: auto;
    height: 25px;
    transition-duration: 0.2s;
    /* 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%);
}
.secondaryButtonRed:hover img, .secondaryButtonRed:focus img{
    scale: 1.3;
}
.secondaryButtonRed:active img{
    scale: 1;
}
.secondaryButtonRed p{
    color: black;
    margin-left: 10px;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.secondaryButtonRed{
    text-decoration: none !important;
}
/*  --  text only link buttons  --  */
.textOnlyALink{
    float: left;
    width: 33.33%;
    height: auto;
    font-family: 'Roboto', sans-serif;
	font-size: 1.6rem;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 15px;
}
.textOnlyButton{
    float: left;
    width: 33.33%;
    height: auto;
    font-family: 'Roboto', sans-serif;
	font-size: 1.6rem;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}
.textOnlyButton:hover{
    cursor: pointer;
}
/*  --  Border on Hover Button  --  */
.borderOnHoverButtonGreen{
    float: left;
    width: 32.33%;
    height: 40px;
    background-color: #fdfdfd;
    border: 2px solid transparent;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 13px;
    padding-right: 26px;
    box-shadow: none;
    transition-duration: 0.2s;
}
.borderOnHoverButtonGreen:hover, .borderOnHoverButtonGreen:focus{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-color: #305a30;
}
.borderOnHoverButtonGreen:active{
    box-shadow: none;
    border-color: #305a30;
}
.borderOnHoverButtonGreen img{
    display: block;
    width: auto;
    height: 25px;
    /* 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%);
}
.borderOnHoverButtonGreen p{
    margin-left: 10px;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*  --  Border on Hover Button  --  */
.borderOnHoverButtonBlue{
    float: left;
    width: 32.33%;
    height: 40px;
    background-color: #fdfdfd;
    border: 2px solid transparent;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 13px;
    padding-right: 26px;
    box-shadow: none;
    transition-duration: 0.2s;
}
.borderOnHoverButtonBlue:hover, .borderOnHoverButtonBlue:focus{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-color: #056c9b;
}
.borderOnHoverButtonBlue:active{
    box-shadow: none;
    border-color: #056c9b;
}
.borderOnHoverButtonBlue img{
    display: block;
    width: auto;
    height: 25px;
    /* 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%);
}
.borderOnHoverButtonBlue p{
    margin-left: 10px;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*  --  Red Content Card Button  --  */
.borderOnHoverButtonRed{
    float: left;
    width: 32.33%;
    height: 40px;
    background-color: #fdfdfd;
    border: 2px solid transparent;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 13px;
    padding-right: 26px;
    box-shadow: none;
    transition-duration: 0.2s;
}
.borderOnHoverButtonRed:hover, .borderOnHoverButtonRed:focus{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-color: #bf161c;
}
.borderOnHoverButtonRed:active{
    box-shadow: none;
    border-color: #bf161c;
}
.borderOnHoverButtonRed img{
    display: block;
    width: auto;
    height: 25px;
    /* 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%);
}
.borderOnHoverButtonRed p{
    margin-left: 10px;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*  --  Unavailable  --  */
.unavailable{
    border-color: #4f4c4d;
    background-color: #4f4c4d;
    box-shadow: none;
}
.unavailable 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%);
}
.unavailable:hover img, .unavailable:focus img, .unavailable:active img{
    scale: 1;
}
.unavailable p{
    color: #F0F0F0;
}
.unavailable:hover, .unavailable:focus{
    cursor: not-allowed;
    border-color: #999999;
    box-shadow: none;
}
.unavailable:hover p, .unavailable:focus p{
    animation: unavailableButtonShake 0.6s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
@keyframes unavailableButtonShake{
    0%{
        margin-left: 10px;
    }
    30%{
        margin-left: 15px;
    }
    50%{
        margin-left: 0;
    }
    70%{
        margin-left: 15px;
    }
    100%{
        margin-left: 10px;
    }
}
.unavailable:active{
    background-color: #333333;
}
a.unavailable{
    text-decoration: none !important;
}
/*  --  right click section  --  */
.rightClickContainer{
    display: block;
    position: fixed;
    z-index: 700;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
}
.rightClickDiv{
    position: relative;
    width: 200px;
    height: auto;
    top: 0;
    left: 0;
}
.rightClickOption{
    width: 100%;
    height: auto;
    padding: 1%;
    padding-left: 2.5%;
    border: 2px solid #999999;
    border-radius: 3px;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
}
.rightClickOption:hover{
    cursor: pointer;
    border-color: #305a30;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
}
/*  --  Blickel Link section  --  */
.blickelLink:link{
    width: auto;
    display: inline-flex;
    align-content: center;
    padding-right: 5px;
    text-decoration: none;
    color: #0000EE;
    background-color: #fdfdfd;
    border-bottom: 2px solid #0000EE;
}
.blickelLink:visited{
    border-color: #551A8B;
    color: #551A8B;
}
.blickelLink:hover{
    cursor: pointer;
    border-color: #551A8B;
    color: #551A8B;
}
.blickelLink:focus{
    border-color: #551A8B;
    color: #551A8B;
}
.blickelLink:visited:hover,
.blickelLink:visited:focus{
    color: #0000EE;
    border-color: #0000EE;
}
.blickelLink:visited:active{
    border-color: #EE0000;
    color: #EE0000;
}
.blickelLink:active{
    border-color: #EE0000;
    color: #EE0000;
}
.linkImage{
    width: auto;
    height: auto;
    min-width: 20px;
    display: inline-flex;/*inline-flex*/
    justify-content: center;
    align-items: flex-end;
    margin-left: 10px;
    margin-right: 2px;
    margin-bottom: 5px;
}
.linkImage img{
    display: block;
    width: 20px;
    height: 20px;
}
/*  --  Page Tools  --  */
.pageSettingsContainer{
    float: right;
    width: 100px;
    height: auto;
    position: -webkit-sticky;
    position: sticky;
    bottom: 100px;
    right: 0;
    z-index: 850;
}
.pageSettingsContainer:hover{
    cursor: pointer;
}
.pageSettingsButton{
    float: right;
    width: 50px;
    height: 50px;
    margin-right: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgba(242,242,242,0.8);
    padding: 5px;
    z-index: 600;
    position: inherit;
}
.pageSettingsButton img{
    width: 90%;
    height: 90%;
    border-radius: 50%;
    -webkit-filter: invert(68%) sepia(0%) saturate(499%) hue-rotate(142deg) brightness(89%) contrast(97%);
    filter: invert(68%) sepia(0%) saturate(499%) hue-rotate(142deg) brightness(89%) contrast(97%);
}
.pageSettingsContainer:hover .pageSettingsButton,
.pageSettingsContainer:focus-within .pageSettingsButton{
    background-color: #fdfdfd;
    border-radius: 0;
}
.pageSettingsContainer:hover .pageSettingsButton img,
.pageSettingsContainer:focus-within .pageSettingsButton img{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    -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%);
}
.pageToolsOptionsContainer{
    float: right;
    width: 50px;
    height: auto;
    display: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin-right: 25px;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 50px;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    position: absolute;
    right: 0;
    bottom: 0;
}
.pageToolsButton{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}
.pageToolsButton p{
    display: none;
    width: auto;
    height: auto;
    white-space: nowrap;
    padding: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    transition: .25s;
    animation: slideInFromRight 0.25s 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    background-color: #fdfdfd;
}
@keyframes slideInFromRight{
    0% {
        margin-right: -50px;
        opacity: 0;
    }
    80%{
        opacity: 1;
    }
    100%{
        margin-right: 5px;
        opacity: 1;
            
    }
}
.pageToolsButton img{
    display: block;
    width: 90%;
    height: auto;
    min-width: 40px;
    border-radius: 50%;
    -webkit-filter: invert(68%) sepia(0%) saturate(499%) hue-rotate(142deg) brightness(89%) contrast(97%);
    filter: invert(68%) sepia(0%) saturate(499%) hue-rotate(142deg) brightness(89%) contrast(97%);
}
.pageToolsButton:hover p,
.pageToolsButton:focus p{
    display: block;
    margin-right: 10px;
}
.finishLessonToolButton:hover img,
.finishLessonToolButton:focus-within img{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    -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%);
}
.backToTop img{
    transform: rotate(90deg);
}
.backToTop:hover img,
.backToTop:focus img,
.backToTop:active img{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    -webkit-filter: none;
    filter: none;
}
.pageSettings:hover img,
.pageSettings:focus-within img,
.pageSettings:active img{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    -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%);
}
.pageSettingsContainer:hover #pageToolsMenuContainer,
.pageSettingsContainer:focus-within #pageToolsMenuContainer{
    display: flex;
}
.oneButtonOnly img{
    transform: rotate(90deg);
}
.pageSettingsContainer:hover .oneButtonOnly,
.pageSettingsContainer:focus-within .oneButtonOnly{
    border-radius: 50%;
}
/*  --  Container Code  --  */
.containerWidth100{
    float: left;
    width: 100%;
    height: auto;
    padding: 13px;
}
.containerWidth80{
    float: left;
    width: 80%;
    height: auto;
    padding: 13px;
}
.containerWidth66{
    float: left;
    width: 66.66%;
    height: auto;
    padding: 13px;
}
.containerWidth50{
    float: left;
    width: 50%;
    height: auto;
    padding: 13px;
}
.containerWidth33{
    float: left;
    width: 33.33%;
    height: auto;
    padding: 13px;
}
.containerWidth25{
    float: left;
    width: 25%;
    height: auto;
    padding: 13px;
}
.containerWidth20{
    float: left;
    width: 20%;
    height: auto;
    padding: 13px;
}
.showPasswordContainer{
    width: 50%;
}
.flexContainerSpaceBetweenCenterNoWrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flexContainerSpaceBetweenFlexEndNoWrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.flexContainerSpaceBetweenFlexStartNoWrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.flexContainerSpaceAroundStretchNoWrap{
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}
.flexContainerSpaceAroundStretchWrap{
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
}
.flexContainerFlexStartStretchWrap{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}
.flexContainerFlexEndCenter{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.flexContainerSpaceBetweenWrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flexContainerSpaceBetweenFlexStartWrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.flexContainerSpaceBetweenCenterWrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.flexContainerCenterCenterWrap{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.flexContainerCenterCenterNoWrap{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flexContainerSpaceAroundCenterNoWrap{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.flexContainerFlexStartFlexStart{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.flexContainerFlexStartCenterNoWrap{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}
.flexContainerFlexStartCenterWrap{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.dashboardStyleButtonContainer{
    justify-content: flex-start;
}
.dashboardStyleButtonContainer .secondaryButtonGreen{ 
    width: 31.33%;
    margin: 1%;
}
.noPadding{
    padding: 0;
}
.noLeftRightPadding{
    padding-left: 0;
    padding-right: 0;
}
.noLeftPadding{
    padding-left: 0;
}
.noMargin{
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}
.marginRight13{
    margin-right: 13px;
}
/*  --  Ads  --  */
.topSpecialContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1%;
    margin-bottom: 3%;
}
.lessonHeaderSpecialContainer{
    position: relative;
    float: right;
    width: 100%;
    height: auto;
    display: block;
}
.lessonHeaderSpecialContainer img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 250px;
}
.whitelistBlickelContainer{
    float: left;
    width: 100%;
    height: auto;
    min-height: 250px;
    display: none;/*flex*/
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 1%;
    margin-bottom: 3%;
}
.whitelistImageContainer{
    float: right;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.whitelistImageContainer img{
    display: block;
    width: 100%;
    height: auto;
    max-width: 300px;
    max-height: 190px;
}
.whitelistButton{
    width: 100%;
    max-width: 400px;
    margin: 0;
}
/*  --  Unsaved Changes  --  */
.unsavedChangesContainer{
    display: none;
    float: left;
    width: 100%;
    height: auto;
    background-color: #9f0006;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 3px;
    padding: 13px;
    margin-bottom: 13px;
}
.unsavedChangesBox{
    float: left;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.unsavedChangesBox img{
    float: left;
    width: 10%;
    height: auto;
    max-height: 45px;
    margin-left: 2%;
}
.unsavedChangesBox p{
    width: 85%;
    height: auto;
    padding-left: 10px;
    margin-left: 3%;
    color: #fdfdfd;
    font-size: 1.6rem;
}
/*  --  Modals  --  */
.modal{
    display: block;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.6);
}
.modalContainer{
    display: block;  
    width: 90%;
    max-width: 1000px;
    height: auto;
    max-height: calc(100% - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 80px auto;
    border-radius: 3px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.modalButtonContainer{
    float: left;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    padding: 2%;
    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);
}
.modalButtonContainer button{
    width: 45%;
}
.miniModal{
    display: block;
    position: sticky;
    -webkit-position: sticky;
    z-index: 900;
    left: 60%;
    right: 0;
    bottom: 0;
    width: 40%; 
    height: auto;
    max-height: 100%; 
    overflow: auto;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.miniModalContainer{
    display: block; 
    z-index: 1; 
    left: 0;
    bottom: 0;
    width: 100%; 
    height: 100%; 
    overflow: hidden;
    background-color: #fdfdfd;
    border-top-left-radius: 3px;
}
.modalHeading{
    float: left;
    width: 100%;
    min-height: 50px;
    height: auto;
    display: flex;
    align-items: center;
    background-color: #305a30;
    position: sticky;
    top: 0;
    z-index: 600;
    padding-left: 13px;
    padding-right: 13px;
}
.modalHeading img{
    float: left;
    width: 35px;
    height: auto;
    -webkit-filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
}
.modalHeading h1, .modalHeading h2{
    float: left;
    display: block;
    width: calc(100% - 90px);
    font-size: 3rem;
    font-weight: normal;
    text-align: left;
    color: #fdfdfd;
    margin-left: 10px;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modalHeading p{
    float: left;
    display: block;
    width: 40px;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    color: #fdfdfd;
}
.modalHeading p:hover, .modalHeading p:focus{
    cursor: pointer;
    background-color: rgba(12,12,12,0.4);
    border-radius: 3px;
}
.modalContentContainer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 5%;
}
.modal .modalContentContainer{
    padding-left: 13px;
    padding-right: 13px;
}
.modalMessage{
    display: block;
    float: left;
    width: 100%;
    height: auto;
    padding: 13px;
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 13px;
}
.modalMiniButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 2.5%;
    margin-bottom: 2%;
    padding-left: 13px;
    padding-right: 13px;
}
.modalTopButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: 13px;
}
.modalTopButtonContainer button{
    width: 30%;
}
.modalLogoContainer{
    float: left;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
}
.modalLogoContainer img{
    display: block;
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 100px;
}
#emailVerifiedModal{
    display: none;
}
#changePasswordModal{
    display: none;
}
#passwordUpdatedModal{
    display: none;
}
#updateDocumentModal{
    display: none;
}
#gradeErrorModal{
    display: none;
}
#requireNamesModal{
    display: none;
}
#emailInvitationDetails{
    display: none;
}
#redirectModal{
    display: none;
}
#testStrictWarningModal, #openEndedWarningModal, #exitTestModal, 
#serverAlertModal, #testInstructionsModal, #largerTestImageModal,
#testCompleteModal, #testSubmitModal{
    display: none;
}
#duplicateTestConfirmationModal{
    display: none;
}
#lessonPartsReorderModal{
    display: none;
}
#pauseVideoModal{
    display: none;
}
#needToCompleteLessonPartModal{
    display: none;
}
/*  --  Modal: Manage Emails  --  */
.unverifiedEmailsContainer{
    margin-top: 13px;
    margin-bottom: 26px;
}
.verifiedEmailsContainer, .addEmailsContainer{
    margin-bottom: 26px;
}
.unverifiedEmails, .verifiedEmails, .addEmails{
    width: 80%;
}
.sendEmailButtonContainer, .removeEmailButtonContainer, .linkEmailButtonContainer{
    float: left;
    width: 80%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.newlyAddedUnverifiedEmail{
    color: #056c9b;
}
/*  --  Modal: Content Description  --  */
#contentDescriptionModal{
    display: none;
}
#contentDescriptionModal .modalMessage{
    padding-bottom: 26px;
    overflow: auto;
}
/*  --  Modal: Content Attchments  --  */
.downloadButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
}
#contentDocumentContainer #downloadAllDocumentsButton{
    padding-left: 0;
    padding-right: 0;
}
.downloadButtonContainer .ctaButton{
    width: 48%;
    margin-left: 51%;
}
.documentLinkContainer{
    padding: 0;
}
#contentDocumentContainer .documentListItem{
    float: left;
    width: 100%;
    min-height: 30px;
    height: auto;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-right: 5px;
    padding-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 2px solid #999999;
}
#contentDocumentContainer .documentListItem:hover{
    background-color: #cccccc;
}
#contentDocumentContainer .documentListItem:active{
    background-color: #cccccc;
}
#contentDocumentContainer .documentListItem:first-child{
    border-top: none;
}
#contentDocumentContainer .documentTypeContainer{
    float: left;
    width: 50%;
    min-height: 30px;
    display: block;
}
#contentDocumentContainer .documentTypeContainer img{
    display: block;
    float: left;
    width: 20%;
    height: auto;
    max-width: 25px;
    max-height: 25px;
    margin-left: 2.5%;
    padding-top: 2px;
    -moz-user-select: none; 
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none; 
}
#contentDocumentContainer .documentTypeContainer p{
    float: left;
    font-size: 1.4rem;
    width: 77.5%;
    padding-left: 2.5%;
    padding-top: 2px;
}
#contentDocumentContainer .documentName{
    float: left;
    font-size: 1.4rem;
    width: 100%;
    height: 30px;
    padding-top: 2px;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#contentDocumentContainer .documentListItem .secondaryButtonGreen{
    width: 48%;
    margin-left: 2%;
    margin-bottom: 2%;
}
/*  --  Modal: Purchase Content  --  */
#contentPurchasePaypalModal{
    display: none;
}
#contentPurchasePaypalModal .modalContentContainer{
    align-items: flex-start;
}
.leavePurchaseModalButton{
    margin-right: 66.66%;
    margin-bottom: 13px;
}
#contentPurchasePaypalModal .currentCommunityCard{
    width: calc(50% - 13px);
}
#contentPurchasePaypalParagraph{
    margin-top: 0;
    margin-bottom: 26px;
}
#contentPurchasePaypalContainerParent{
    display: none;
}
.attentionOutput{
    width: calc(50% - 13px);
}
.parentAndContentContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-content: flex-start;
}
.attentionOutput .outputContainerContent.flexContainerSpaceBetweenCenterNoWrap{
    flex-wrap: wrap;
}
#contentPurchasePaypalModal .optionContainer{
    display: block; 
    width: 100%;
    padding: 0;
}
#contentPurchaseContentBlockParent:hover{
    cursor: default;
}
#contentPurchasePaypalModal .descriptionContainer{
    display: block;
    height: auto;
}
.parentContentCard{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 13px;
}
.parentContentCard .contentOverviewSubcontentContainer{
    padding-left: 26px;
    padding-right: 26px;
}
.parentContentCard .contentOverviewSubcontent{
    width: 100%;
}
.parentContentCard .contentOverviewSubcontent img{
    -webkit-filter: none;
    filter: none;
}
.parentContentCard .contentOverviewSubcontent p{
    color:#000000;
    text-shadow: none;
}
.contentIncluded{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 13px;
}
#contentPurchasePaypalModal #paypalIFrame{
    float: left;
    width: 95%;
    height: auto;
    min-height: 225px;
    margin-left: 2.5%;
    margin-bottom: 13px;
    margin-top: 13px;
}
.contentPurchaseParentAndContentContainer{
    float: left;
    width: calc(50% - 13px);
    height: auto;
    margin-left: 26px;
}
.paypalCard{
    width:100%;
}
.paypalCard .cardDetailsContainer{
    justify-content: flex-start
}
#contentPurchasePaypalModal .contentPrice{
    float: left;
    width: auto;
    font-size: 3.5rem;
    text-align: right;
    padding-left: 26px;
    padding-right: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 4px solid #fc3;
}
#contentPurchasePaypalModal .paypalCard .contentPrice{
    margin-left: 2.5%;
}
#contentPurchasePaypalModal .contentCreatorMessage{
    display: none;
    width: 95%;
    margin-left: 2.5%;
    margin-top: 26px;
}
#contentPurchaseGoToParentButtonParent{
    width: auto;
    min-width: 50%;
    margin-left: 5%;
}
/*  --  Modal: Content Purchase Confirmation  --  */
#contentPurchaseConfirmationModal{
    display: none;
}
/*  --  Modal: Lesson / Test Settings  --  */
#lessonSettingsModal{
    display: none;
}
#lessonSettingsModal .modalContentContainer{
    padding-left: 13px;
    padding-right: 13px;
    align-items: flex-start;
}
.radioSwitchButtonContainer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    padding-top: 13px;
    padding-bottom: 13px;
}
.animations{
    width:40%;
    margin-right: 0;
    padding-right: 6.5px;
    margin-bottom: 0;
} 
.viewTypes{
    width:60%;
    margin-right: 0;
    padding-left: 6.5px;
    margin-bottom: 0;
}
#lessonSettingsModal .viewTypeContainer .imageCheckboxContainer{
    width: 40%;
}
.textSizeContainer{
    margin-bottom: 0;
}
.textSizes{
    padding: 13px;
}
.textNo{
    float: left;
    width: 20%;
    text-align: right;
    font-size: 1.6rem;
    transition-duration: 0.3s;
    color: #000000;
}
.turnedOff{
    float: left;
    width: 25%;
    text-align: right;
    font-size: 1.6rem;
    transition-duration: 0.3s;
}
.textYes{
    float: left;
    width: 20%;
    text-align: left;
    font-size: 1.6rem;
    transition-duration: 0.3s;
    color: #000000;
}
.turnedOn{
    float: left;
    width: 40%;
    text-align: left;
    font-size: 1.6rem;
    transition-duration: 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.imageCheckboxContainer{
    float: left;
    width: 50%;
    height: 100%;
    margin: 0 auto;
}
.switch {
    display: block;
    position: relative;
    width: 60px;
    height: 34px;
    margin: 0 auto;
}
.switch:hover,
.switch:focus-within{
    cursor: pointer;
}
.switch:hover .settingsSlider:before,
.switch:focus-within .settingsSlider:before{
    background-color: #77b97f;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.settingsSlider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}
.viewModeSwitch .settingsSlider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #305a30;
    transition: .4s;
}
.settingsSlider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}
input:checked + .settingsSlider {
    background-color: #305a30;
}
/* disabled */
input:disabled + .settingsSlider {
    background-color: #cccccc;
}
input:disabled + .settingsSlider:before{
    background-color: #cccccc;
}
.viewModeSwitch input:disabled + .settingsSlider{
    cursor: not-allowed;
}
.switch:hover input:disabled + .settingsSlider:before,
.switch:focus-within input:disabled + .settingsSlider:before{
    background-color: #cccccc;
}

input:focus + .settingsSlider {
    box-shadow: 0 0 1px #305a30;
}
input:checked + .settingsSlider:before {
    transform: translateX(26px);
}
/*  --  Rounded sliders  --  */
.settingsSlider.round {
    border-radius: 34px;
}
.settingsSlider.round:before {
    border-radius: 50%;
}
.textSizeBox{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 1%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.textSizeHeading{
    float: left;
    text-align: center;
    width: 33.33%;
    height: auto;
    font-size: 1.8rem;
}
.textSizeHeading span{
    font-weight: bold;
}
.smallerText{
    float: left;
    width: 33.33%;
    height: auto;
    display: flex;
    justify-content: center;
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: #f2f2f2;
    border: 2px solid #305a30;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.24),0 4px 5px 0 rgba(0,0,0,0.19);
}
.smallerText:hover{
    cursor: pointer;
    box-shadow: none;
}
.smallerText:active{
    box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.24),inset 0 1px 3px 0 rgba(0,0,0,0.19);
}
.smallerText p{
    text-align: center;
    font-size: 1.8rem;
    color: #305a30;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.largerText{
    float: right;
    width: 33.33%;
    height: auto;
    display: flex;
    justify-content: center;
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: #f2f2f2;
    border: 2px solid #305a30;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.24),0 4px 5px 0 rgba(0,0,0,0.19);
}
.largerText:hover{
    cursor: pointer;
    box-shadow: none;
}
.largerText:active{
    box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.24),inset 0 1px 3px 0 rgba(0,0,0,0.19);
}
.largerText p{
    text-align: center;
    font-size: 1.8rem;
    color: #305a30;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.fontDropdownContainer{
    float: left;
    width: 100%;
    height: auto;
}
/*  --  Modal: Lesson Complete  --  */
.lessonCompleteThree{
    display: none;
    position: fixed;
    z-index: 700;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    box-shadow: 0 -12px 16px 0 rgba(0,0,0,0.24),0 -17px 50px 0 rgba(0,0,0,0.19);
    transition: bottom .5s ease 0s;
    animation: comeUpAndStay 0.5s 1;
    animation-fill-mode: forwards;
}
@keyframes comeUpAndStay{
    0% {
        bottom: -100%;  
    }
    100%{
        bottom: 0;
            
    }
}
.lessonCompleteThreeContent{
    display: block;  
    width: 95%;
    max-width: 1300px;
    height: auto;
    margin: auto;
    align-content: center;
 }
.completeHeader{
    float: left;
    width: auto;
    min-width: 100%;
    height: 100px;
    overflow: hidden;
    margin-bottom: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.completeHeader h2{
    font-size: 6rem;
    color: #F2F2F2;
    text-align: center;
    transition: .5s ease 0s;
    animation: colorChange 0.5s 1;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    letter-spacing:20px;
    white-space: nowrap;
}
@keyframes colorChange{
    0% {
        letter-spacing:20px;
        opacity: 0;  
    }
    100%{
        letter-spacing:normal;
        opacity: 1;
            
    }
}
.lessonCompleteAnimationContainer{
    floaT: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.completeImageRow{
    float: left;
    width: 30%;
    height: auto;
    display: flex;
    justify-content: center;
}
.completeLessonPartContainer{
    display: none;
    float: left;
    width: 33.33%;
    height: auto;
}
.completeNumberCounterContainer{
    float: left;
    width: 100%;
    height: 50px;
    position: relative;
	display:flex;
	justify-content: center;
	align-items: center;
}
.completeNumberCounter{
    display: block;
    position: absolute;
    opacity: 0;
    left: 0;
	float: left;
	width: 100%;
	height: auto;
    transition: .5s ease 0s;
    color: #fdfdfd;
    font-size: 1.6rem;
    text-align: center;
    animation: countNumber 1s 1;
    animation-fill-mode: forwards;
    animation-delay: 0.25s;
}
@keyframes countNumber{
    60%{
        opacity: 0;
        font-size: 8rem;
    }
    100%{
        opacity: 1; 
        font-size: 4rem;  
    }
}
.completeImage{
    float: left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
}
.beforeIcon{
    position: absolute;
    top:0;
    width: 30px;
    height: 30px;
    transition: 1s ease 0s;
    animation: GrowIconOne 1.25s 1;
    animation-fill-mode: forwards;
    animation-delay: 0.1s;
    opacity: 0;
    -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
}
@keyframes GrowIconOne{
    0% {
        /*top: -10;*/
        opacity: 0;
    }
    20%{
        opacity: 1;
        top: 0px;
        width: 30px;
		height: 30px;
    }
    60%{
        opacity: 1;
        top:-10px;
        width: 80px;
        height: 80px;
        transform:rotateZ(0deg);
    }
    100%{
        opacity: 0;
        width: 50px;
        height: 50px;
        transform:rotateZ(180deg);
    }
}
@keyframes GrowIconOneSmall{
    0% {
        /*top: -10;*/
        opacity: 0;
    }
    20%{
        opacity: 1;
        top: 0px;
        width: 20px;
		height: 20px;
    }
    60%{
        opacity: 1;
        top:-10px;
        width: 50px;
        height: 50px;
        transform:rotateZ(0deg);
    }
    100%{
        opacity: 0;
        width: 30px;
        height: 30px;
        transform:rotateZ(180deg);
    }
}
.afterIcon{
    position: absolute;
    top:0;
    opacity: 0;
	width: 30px;
    height: 30px;
    transition: .5s ease 0s;
    animation: GrowIconTwo 1.25s 1;
    animation-fill-mode: forwards;
    animation-delay: 0.1s;
    -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
}
@keyframes GrowIconTwo{
    0% {
        opacity: 0;
        /*top: 0;*/
        width: 30px;
		height: 30px;
    }
    60%{
        opacity: 0;
        /*top:-10px;*/
        width: 80px;
        height: 80px;
        transform:rotateZ(180deg);
    }
    100%{
        opacity: 1;
        /*top: 0;*/
        width: 50px;
        height: 50px;
        transform:rotateZ(360deg);
    }
}
@keyframes GrowIconTwoSmall{
    0% {
        opacity: 0;
        /*top: 0;*/
        width: 20px;
		height: 20px;
    }
    60%{
        opacity: 0;
        /*top:-10px;*/
        width: 50px;
        height: 50px;
        transform:rotateZ(180deg);
    }
    100%{
        opacity: 1;
        /*top: 0;*/
        width: 30px;
        height: 30px;
        transform:rotateZ(360deg);
    }
}
.completeMessage{
    display: none;
    float: left;
    width: 70%;
    height: auto;
    max-height: 100px;
}
.completeMessage p{
    font-size: 2rem;
    color: #F2F2F2;
    opacity: 0;
    transition: .5s ease 0s;
    animation: message 1s 1;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes message{
    0% {
        opacity: 0;  
    }
    80%{
        opacity: 1;     
    }
    90%{
        opacity: 1;   
    }
    100%{
        opacity: 1;     
    }
}
.modalButtons{
    float: left; 
    width: 100%;
    height: auto;
    margin-bottom: 2%;
    display: flex;
    justify-content: space-around;
}
#lessonCompleteThreeContent .modalButtons .secondaryButtonGreen{
    margin: 1%;
    width: 31.33%;
}
.feedbackContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 2%;
    background-color: #f2f2f2;
    padding: 2%;
}
.feedbackContainer p{
    display: block;
    width: 100%;
    color: #305a30;
    font-size: 2rem;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 1%;
}
.lessonCompleteThree .whiteButton{
	width: 30%;
}
/*  --  Modal: Correct Answer  --  */
.correctAnswerModal{
    display: none;
    float: left;
    position: fixed;
    z-index: 700;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.correctAnswerContent{
    display: flex; 
    justify-content: center;
    align-items: center;
    float: left; 
    width: 100%;
    max-width: 1500px;
    height: 150px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
}
.imageContainer{
    float: left;
    width: 20%;
    height: 100px;
    position: relative;
    margin-left: 20%;
}
.correctStepOne{
    display: block;
    float: left;
    width: 100%;
    height: 100px; 
    position: absolute;
    top: 0;
    left: 0;
    animation: jumpUp 1s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
}
@keyframes jumpUp{
    0% {
        top: 150px;
        left: 0;
    }
    30%{ 
        top: 0; 
        left: 0;  
    }
    60%{ 
        top: 0;   
        left: 0;   
    }
    90%{ 
        top: 0;   
        left: 0;   
    }
    100%{ 
        top: 0;   
        left: 0;   
    }
}
.correctMessageContainer{
    float: left;
    width: 60%;
    height: auto;
    position: relative;
    overflow: hidden;
}
.correctStepTwo{
    display: block;
    float: left;
    width: 100%;
    height: auto; 
    font-size: 3rem;
    color: #f2f2f2;
    animation: SlideInLeft 1s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
@keyframes SlideInLeft{
    0% {
        margin-left: -80%;
        opacity: 0;
    }
    30%{ 
        margin-left: -80%; 
        opacity: 0;
    }
    60%{ 
        margin-left: 2%;
        opacity: 1;      
    }
    100%{ 
        margin-left: 2%; 
        opacity: 0.5;     
    }
}
/*  --  Modal: Wrong Answer  --  */
.wrongAnswerModal{
    display: none;
    position: fixed;
    z-index: 700;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.wrongAnswerContent{
    display: flex; 
    justify-content: center;
    align-items: center;
    float: left; 
    width: 100%;
    max-width: 1500px;
    height: 150px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
}
.imageContainer{
    float: left;
    width: 20%;
    height: 100px;
    position: relative;
    margin-left: 20%;
}
.wrongStepOne{
    display: block;
    float: left;
    width: 100%;
    height: 100px; 
    position: absolute;
    top: 0;
    left: 0;
    animation: jumpUp 1s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
}
@keyframes jumpUp{
    0% {
        top: 150px;
        left: 0;
    }
    30%{ 
        top: 0; 
        left: 0;  
    }
    60%{ 
        top: 0;   
        left: 0;   
    }
    90%{ 
        top: 0;   
        left: 0;   
    }
    100%{ 
        top: 0;   
        left: 0;   
    }
}
.wrongMessageContainer{
    float: left;
    width: 60%;
    height: auto;
    position: relative;
    overflow: hidden;
}
.wrongStepTwo{
    display: block;
    float: left;
    width: 100%;
    height: auto; 
    font-size: 3rem;
    color: #f2f2f2;
    animation: SlideInLeft 1s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
@keyframes SlideInLeft{
    0% {
        margin-left: -80%;
        opacity: 0;
    }
    30%{ 
        margin-left: -80%; 
        opacity: 0;
    }
    60%{ 
        margin-left: 2%;
        opacity: 1;      
    }
    100%{ 
        margin-left: 2%; 
        opacity: 0.5;     
    }
}
/*  --  Modal: Open Ended Submitted  --  */
.submittedAnswerModal{
    display: none;
    float: left;
    position: fixed;
    z-index: 700;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: fadeOutSubmit 1.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
@keyframes fadeOutSubmit{
    0% {
        opacity: 1;
    }
    90%{ 
        opacity: 1;     
    }
    100%{ 
        opacity: 0;     
    }
}
.submittedAnswerContent{
    display: flex; 
    justify-content: center;
    align-items: center;
    float: left; 
    width: 100%;
    max-width: 1500px;
    height: 150px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    background: rgb(51,51,51);
    background: linear-gradient(0deg, rgba(51,51,51,0.8) 90%, rgba(51,51,51,0) 100%);
}
.submittedImageContainer{
    float: left;
    width: 20%;
    height: 100px;
    position: relative;
    margin-left: 20%;
}
.submittedStepOne{
    display: block;
    float: left;
    width: 100%;
    height: 100px; 
    position: absolute;
    top: 0;
    left: 0;
    transition-duration: 0.3s;
    animation: jumpUpSubmit 1s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
}
@keyframes jumpUpSubmit{
    0% {
        top: 150px;
        left: 0;
    }
    30%{ 
        top: 0; 
        left: 0;  
    }
    60%{ 
        top: 0;   
        left: 0;   
    }
    90%{ 
        top: 0;   
        left: 0;   
    }
    100%{ 
        top: 0;   
        left: 0;   
    }
}
.submittedMessageContainer{
    float: left;
    width: 60%;
    height: auto;
    position: relative;
    overflow: hidden;
}
.submittedStepTwo{
    display: block;
    float: left;
    width: 100%;
    height: auto; 
    font-size: 3rem;
    color: #f2f2f2;
    text-shadow: 2px 2px 2px #333333;
    animation: SlideInLeftSubmit 1s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
@keyframes SlideInLeftSubmit{
    0% {
        margin-left: -80%;
    }
    30%{ 
        margin-left: -80%; 
    }
    60%{ 
        margin-left: 0;      
    }
    70%{ 
        margin-left: 0;      
    }
    99%{ 
        margin-left: 0;      
    }
}
/*  --  Modal: Page Settings  --  */
#pageSettingsModal{
    display: none;
    z-index: 1050;
}
#pageSettingsModal .modalContentContainer{
    padding: 13px;
}
.pageViewStyleContainer{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    padding: 13px;
    border-left: 2px solid #999999;
    border-right: 2px solid #999999;
    border-bottom: 2px solid #999999;
}
.pageViewStyleContainer .settingsSlider{
    background-color: #305a30;
    transition: .4s;
}

.pageViewStyleContainer .imageCheckboxContainer{
    margin: 0;
}
/*  --  Modal: Icon Key  --  */
#iconKeyModal{
    display: none;
}
.modalIconKeyContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
}
#iconKeyModal .key{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 2%;
    padding-bottom: 2%;
    border-bottom: 2px solid #999999;
}
#iconKeyModal .key img{
    float: left;
    width: 15%;
    height: auto;
    max-height: 30px;
}
#iconKeyModal .key h3{
    float: left;
    display: block;
    width: 85%;
    font-size: 2rem;
}
#iconKeyModal .key p{
    float: left;
    display: block;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.4rem;
    margin-top: 5px;
}
#iconKeyModal .key:last-child{
    border-bottom: none;
}
/*  --  remove if icon key is on in left container  --  */
.key{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 2%;
    padding-bottom: 2%;
    border-bottom: 2px solid #999999;
}
.key:last-child{
    border-bottom: none;
}
.key img{
    float: left;
    width: 25%;
    height: auto;
    max-height: 25px;
}
.key h3{
    float: left;
    display: block;
    width: 75%;
    font-size: 1.6rem;
}
.key p{
    float: left;
    display: block;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.4rem;
}
/*  ^^  remove if icon key is on in left container  ^^  */
/*  --  Modal: Larger Lesson Image  --  */
#largerLessonImageModal{
    display: none;
}
#largerLessonImageModal .largerCanvasContainer{
    float: left;
    width: 100%;
    height: auto;
    max-height: calc( 80vh - 50px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
    padding: 13px;
}
#largerLessonImageModal .lessonImageLarge{
    display: block;
    width: 100%;
    max-width: 1300px;
    height: auto;
    max-height: 100%;
    margin: 0 auto;
    padding: 2%;
}
/*  --  Modal: Error Modal  --  */
#blickelErrorModal{
    z-index: 1500;
}
#blickelErrorModal .modalButtonContainer .secondaryButtonGreen,
#blickelErrorModal .modalButtonContainer .secondaryButtonRed{
    width: 31.33%;
    margin-left: 1%;
    margin-right: 1%;
}
/*  --  Modal: Test Instructions Modal  --  */
.strictTestMessageContainer{
    display: none;
    float: left;
    width: 100%;
    height: auto;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}
.strictTestMessageContainer p{
    display: block;
    float: left;
    width: 100%;
    height: auto;
    clear: both;
    text-indent: 20px;
    padding-left: 26px;
    padding-right: 26px;
}
.modalTestTimerContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 2.5%;
}
#modalTestTimeSpan{
    font-size: 2.5rem;
}
#testInstructionsModal .instructionsContainer{
    float: left;
    padding-left: 26px;
    padding-right: 26px;
}
#testInstructionsModal .modalButtonContainer .primaryButton,
#testInstructionsModal .modalButtonContainer .secondaryButtonGreen,
#testInstructionsModal .modalButtonContainer .secondaryButtonRed{
    width: 31.33%;
    margin-left: 1%;
    margin-right: 1%;
}
#organizationTestStartButton{
    margin: 0;
    width: 32%;
}
/*  --  Modal: Progress Modal  --  */
#progressModal{
    display: none;
}
#progressModal .modalMiniButtonContainer .secondaryButtonRed,
#progressModal .modalMiniButtonContainer .primaryButton{
    width: 48%;
}
#progressLessonTitleHeader{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.progressDetailsContainer{
    float: left;
    width: 100%;
    min-height: 200px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding-left: 13px;
    padding-right: 13px;
}
.progressDetailsContainer h2{
    display: block;
    width: 100%;
    height: auto;
    padding-left: 10px;
    margin-bottom: 2%;
    border-bottom: medium solid #999999;
}
.progressDetailsContainer img{
    display: block;
    width: 20%;
    height: auto;
}
.progressDetailsContainer p{
    display: block;
    width: 90%;
    color: #0a090c;
    margin-bottom: 5%;
    margin-left: 5%;
}
/*  --  Modal: Report Issue / Comment Modal  --  */
.reportRadioContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 2%;
    padding: 1%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    justify-items: stretch;
}
.reportRadioOptionContainer,
.reportCommentRadioOptionContainer{
    float: left;
    width: 31.33%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1%;
    padding: 13px;
    border: 2px solid #999999;
    border-radius: 3px;
    background-color: #fdfdfd;
}
.reportRadioOptionContainer label,
.reportCommentRadioOptionContainer label{
    width: 100%;
    height: 100%;
}
.reportRadioOptionContainer:hover, .reportRadioOptionContainer label:hover, .reportRadioOptionContainer:focus-within,
.reportCommentRadioOptionContainer:hover, .reportCommentRadioOptionContainer label:hover, .reportCommentRadioOptionContainer:focus-within{
    border-color: #056c9b;
    cursor: pointer;
}
.reportRadio input[type=radio]{
    float: left;
    margin-right: 10px;
}
.reportProblemMessageContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 2%;
    padding-top: 0;
}
.reportProblemMessageContainer p{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 5px;
    margin-top: 2%;
    margin-bottom: 2%;
}
/*  --  Modal: Input Error Modal  --  */
.errorMessage{
    width: 100%;
    height: auto;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 13px;
    padding-bottom: 13px;
    margin-bottom:13px;
    border-bottom: 2px solid #999999;
}
/*  --  Modal: Upload Animation Modal  --  */
.uploadModal{
    display: none;
    position: sticky;
    -webkit-position: sticky;
    z-index: 1050;
    left: 100%;
    bottom: 0;
    width: 30%;
    height: 250px;
    max-width: 350px; 
    overflow: auto; 
    background-color: #999999;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    border-radius: 3px;
}
.uploadContent{
    display: block;  
    width: 100%;
    height: 250px;
    max-width: 350px;
    overflow: hidden;
    background-color: #305a30;
}
.uploadContent h2{
    font-size: 2.6rem;
    color: #fdfdfd;
    text-align: center;
}
.loadingBox{
    width: 110px;
    height: 110px;
    margin: auto auto;
    position: relative;
    margin-top: 65px;
}
.uploadImageBox{
    width: 110px;
    height: 110px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    background-color: #f2f2f2;
}
.uploadImageBox img{
    display: block;
    width: 75px;
    height: 75px;
    margin: 17.5px 17.5px;
}
.uploading{
    z-index: 9; 
    border: 17px solid #f3f3f3;
    border-radius: 50%;
    border-top: 17px solid #305a30;
    width: 110px;
    height: 110px;
    position: absolute;
    top: 0;
    animation: spin 2s linear infinite;
    margin: auto auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*  --  Modal: Edit Member Modal  --  */
#editUserModal{
    display: none;
}
#verifyMemberModal{
    display: none;
}
#editUserModal .organizationUserForm{
    float: left;
    width: 100%;
    padding: 13px;
    padding-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#editUserModal .organizationUserForm .inputContainer.containerWidth66{
    padding: 0;
    padding-top: 30px;
}
#editUserModal .userRoleContainer{
    float: left;
}
#editUserModal .imageRadioOption span{
    float: left;
    width: 100%;
    text-align: center;
    padding-top: 1%;
    padding-bottom: 1%;
    background-color: #fdfdfd;
}
.userVerifiedContainer{
    float: left;
    width: 100%;
    height: auto;
    min-height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 13px;
    margin-bottom: 26px;
}
.userVerifiedSection, .userNotVerifiedSection{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
}
.userVerifiedSection img,
.userNotVerifiedSection img{
    float: left;
    display: block;
    width: 30px;
    height: 30px;
}
.userVerifiedMessage{
    float: left;
    width: 70%;
    font-size: 2rem;
    padding-left: 13px;
    padding-right: 13px;
    font-size: 2rem;
    color: #020a00;
}
#userEmailVerifiedIconContainer .userVerifiedMessage{
    width: calc( 100% - 40px);
}
#userEmailVerifiedIconContainer{
    display: none;
}
#userEmailVerifiedIconContainer 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%);
}
#userEmailVerifiedButtonContainer .userVerifiedImage{
    -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%);
}
#verifyMemberModal .outputCardContainer{
    width:  49%;
    margin-top: 30px;
}
#verifyMemberModalParagraph .outputCardContainer:last-child{
    margin-left: 2%;
}
/*  --  Modal: Member Roles Explained Modal  --  */
#userRoleDetails{
    display: none;
}
#userRoleDetails .userRoleContainer{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 1%;
}
.role{
    float: left;
    width: 90%;
    height: auto;
    margin-left: 5%;
    margin-top: 2%;
}
/*  --  Modal: Tooltip Modal  --  */
#toolTipModalActive{
    z-index: 1150;
}
/*  --  Modal: Community Login Modal  --  */
.selectOrganizationContainer{
    float: left;
    width: 100%;
    height: auto;
    padding-bottom: 13px;
    margin-top: 13px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.selectOrganizationContainer .cardContainer{
    width: 31.33%;
    margin: 1%;
    border: 2px solid transparent;
}
.selectOrganizationContainer .cardContainer:hover, .selectOrganizationContainer .cardContainer:focus{
    cursor: pointer;
    border: 2px solid #056c9b;
}
.selectOrganizationContainer img{
    display: block;
    float: left;
    width: auto;
    height: auto;
    max-width: 125px;
    max-height: 125px;
    margin: auto auto;
}
/*  --  Modal: Reorder Lesson Parts Modal  --  */
#lessonPartsReorderModal .contentTypeHeading, #lessonPartsReorderModal .contentName{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#lessonPartsReorderModal .tableHeadingSection:last-child{
    width: 80%;
}
.contentName{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contentListItem{
    float: left;
    width: 100%;
    height: 30px;
    padding-left: 2%;
    padding-right: 2%;
    border-bottom: 2px solid #999999;
}
.contentListItem:hover{
    cursor:grab;
    background-color: #77b97f;
}
.contentListItem:active{
    cursor:grabbing;
}
.contentListItem:last-child{
    border-bottom: none;
}
.subcontentTypeContainer{
    float: left;
    width: 20%;
    height: 29px;
    display: block;
}
.subcontentTypeContainer img{
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    padding-top: 2px;
    -moz-user-select: none; 
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
}
.subcontentTypeContainer p{
    float: left;
    width: calc(100% - 25px);
    padding-left: 5%;
    padding-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.listItem{
    float: left;
    width: 70%;
    padding-top: 2px;
	padding-left: 1.5%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*  --  Modal: Cookie / login / Create / Guest Modal  --  */
#guestModalDiv.modal, #cookieMessageDiv.modal{
    float: none;
    position: fixed;
    top: auto;
    bottom: 0;
    right: 0;
    left: auto;
    width: 100%; 
    max-width: 1500px;
    height: auto;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1200;
}
#guestModalDiv .modalContainer, #cookieMessageDiv .modalContainer{
    width: 100%;
    max-width: 1500px;
    height: auto;
    margin: 0 auto;
}
#guestModalDiv .modalContentContainer, #cookieMessageDiv .modalContentContainer{
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}
#guestModalDiv .modalButtonContainer .primaryButton,
#guestModalDiv .modalButtonContainer .secondaryButtonGreen,
#guestModalDiv .modalButtonContainer .ctaButton{
    width: 31.33%;
}
#cookieMessageDiv #cookieAcceptanceModalButton{
    width: 50%;
}
/*  --  Modal: login  Modal  --  */
/*  --  Modal: Add Subcontent Modal  --  */
#addSubcontentModal{
    display: none;
}
.dropdownSelectionContainer{
    float: left;
    width: 100%;
    height: auto;
    min-height: 100px;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1%;
    margin-top: 1%;
}
#addSubcontentModal .dropdownSelectionContainer .inputContainer{
    width: 23%;
    margin-left: 1%;
    margin-right: 1%;
}
#addSubcontentModal .sortDropdown{
    float: right;
    width:49%;
    margin-left: 51%;
    margin-bottom: 0;
    margin-right: 0;
}
#addSubcontentModal .sortDropdown .inputContainerContent{
    padding: 13px;
}
#addContentProgramDropdownContainer,
#addContentCourseDropdownContainer,
#addContentUnitDropdownContainer,
#addContentLessonDropdownContainer,
#addContentTestDropdownContainer{
    display: none;
    width: 24%;
    margin-right: 0;
}
.addContentContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
}
.leftSide{
    float: left;
    width: 50%;
    height: auto;
    padding-right: 6.5px;
}
.rightSide{
    float: left;
    width: 50%;
    height: auto;
    min-height: 250px;
    padding-left: 6.5px;
}
.currentSelectedContentList{
    float: left;
    width: 100%;
    height: 340px;
}
.listContainer{
    float: left;
    width: 100%;
    height: 220px;
    min-height: 220px;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
}
.contentListHeading{
    float: left;
    width: 100%;
    height: 30px;
    background-color: #999999;
    color: #0a090c;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: sticky;
    top: 0;
}
.selectHeader{
    float: left;
    width: 15%;
    height: auto;
    text-align: center;
    font-size: 1.4rem;
    border-right: 2px solid #4c4c4c;
}
.contentTypeHeader{
    display: block;
    float: left;
    width: 20%;
    text-align: center;
    font-size: 1.4rem;
    border-right: 2px solid #4c4c4c;
}
.contentTitleHeader{
    float: left;
    width: 45%;
    height: auto;
    text-align: left;
    font-size: 1.4rem;
    padding-left: 10px;
    border-right: 2px solid #4c4c4c;
}
.subcontentHeader{
    float: left;
    width: 20%;
    height: auto;
    text-align: center;
    font-size: 1.4rem;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}
.listSection{
    float: left;
    width: 100%;
    min-height: 190px;
    padding-bottom: 2%;
    border: 2px solid #999999;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.listRow{
    float: left;
    width: 100%;
    height: 30px;
    border-bottom: 2px dashed #999999;
}
.listRow:hover,
.listRow:focus-within{
    cursor: pointer;
    background-color: #77b97f;
}
.selectRowContainer{
    float: left;
    width: 15%;
    height: 20px;
    margin-top: 5px;
}
.selectRowContainer:hover{
    cursor: pointer;
}
.contentRowContainer{
    float: left;
    width: 20%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contentRowContainer img{
    display: block;
    width: auto;
    height: auto;
    max-height: 20px;
}
.titleRowContainer{
    float: left;
    width: 45%;
    height: auto;
}
.titleRowContainer p{
    font-size: 1.6rem;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.subcontentRowContainer{
    float: left;
    width: 20%;
    height: auto;
}
.subcontentRowContainer button{
    float: right;
    width: 90%;
    height: 25px;
    justify-content: center;
    margin-top: 2px;
    font-size: 1.6rem;
    padding: 6.5px;
}
.currentSelectedContentSubcontentList{
    display: none;
    float: left;
    width: 100%;
    height: auto;
    min-height: 330px;
    margin-top: 1%;
}
.subcontentSelectHeader{
    float: left;
    width: 15%;
    height: auto;
    text-align: center;
    font-size: 1.4rem;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    border-right: 2px solid #4c4c4c;
}
.subcontentContentTypeHeader{
    display: block;
    float: left;
    width: 20%;
    text-align: center;
    font-size: 1.4rem;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    border-right: 2px solid #4c4c4c;
}
.subcontentContentTitleHeader{
    float: left;
    width: 65%;
    height: auto;
    text-align: left;
    font-size: 1.4rem;
    padding-left: 10px;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}
.subcontentSelectRowContainer{
    float: left;
    width: 15%;
    height: 20px;
    margin-top: 5px;
}
.subcontentSelectRowContainer:hover{
    cursor: pointer;
}
.subcontentContentRowContainer{
    float: left;
    width: 20%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.subcontentContentRowContainer img{
    display: block;
    width: auto;
    height: auto;
    max-height: 25px;
}
.subcontentTitleRowContainer{
    float: left;
    width: 65%;
    height: auto;
}
.subcontentTitleRowContainer p{
    font-size: 1.6rem;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contentSubcontentList{
    float: left;
    width: 100%;
    height: auto;
    min-height: 150px;
    max-height: 560px;
}
.finalContentListContainer{
    float: left;
    width: 100%;
    height: auto;
    max-height: 530px;
}
#addParentContentButtonDiv{
    float: left;
    width: 100%;
    height: 50px;
    margin: 0;
    margin-bottom: 1%;
}
#addParentContentButtonDiv .primaryButton{
    width: 33.33%;
    margin-left: 33.33%;
}
.finallistSection{
    float: left;
    width: 100%;
    height: auto;
    min-height: 190px;
    max-height: 530px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1%;
    border: 2px solid #999999;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.finalContentlistSection{
    float: left;
    width: 100%;
    height: auto;
}
.contentSubcontentContentRemoveHeader{
    display: block;
    float: left;
    width: 10%;
    text-align: center;
    font-size: 1.4rem;
    border-right: 2px solid #4c4c4c;
}
.contentSubcontentContentTypeHeader{
    display: block;
    float: left;
    width: 20%;
    text-align: center;
    font-size: 1.4rem;
    border-right: 2px solid #4c4c4c;
}
.contentSubcontentContentTitleHeader{
    float: left;
    width: 70%;
    height: auto;
    text-align: left;
    font-size: 1.4rem;
    padding-left: 10px;
}
.contentSubcontentSelectRowContainer:hover{
    cursor: pointer;
}
.contentSubcontentRemoveRowContainer{
    display: block;
    float: left;
    width: 10%;
    height: 30px;
}
.contentSubcontentRemoveRowContainer p{
    width: auto;
    height: 30px;
    text-align: center;
    font-weight: bold;
    color: #bf161c;
    margin: auto auto;
    padding-top: 5px;
}
.contentSubcontentRemoveRowContainer:hover p{
    color: #BF161C;
    background-color: #BF161C;
    border-radius: 3px;
    color: #fdfdfd;
}
.contentSubcontentContentRowContainer{
    display: block;
    float: left;
    width: 20%;
    height: 30px;
}
.contentSubcontentContentRowContainer img{
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 2.5%;
}
.contentSubcontentContentRowContainer p{
    font-size: 1.6rem;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contentSubcontentTitleRowContainer{
    float: left;
    width: 70%;
    height: auto;
}
.contentSubcontentTitleRowContainer p{
    font-size: 1.6rem;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 2px;
}
.programRow{
    background-color: #ababab;
}
.courseRow{
    background-color: #d0cfcf;
}
.unitRow{
    background-color: #b9baa3;
}
.lessonRow{
    background-color: #dcdec6;
}
.testQuizRow{
    background-color: #f2f2f2;
}
.addContentButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 1%;
}
.currentSelectedContentList .primaryButton,
.currentSelectedContentSubcontentList .primaryButton{
    float: right;
    width: 50%;
    margin: 0;
    margin-top: 13px;
}
/*  --  Modal: Upload Audio Modal  --  */
#audioUploaderModal #closeModalContainer .secondaryButtonRed,
#audioUploaderModal #closeModalContainer .secondaryButtonGreen,
#audioUploaderModal #closeModalContainer .primaryButton{
    width: 32.33%;
}
#audioContentContainer{
    float: left;
    width: 100%;
    height: auto;
}
.audioNameContainer, .audioDescriptionContainer{
    width: 49%;
}
.audioForm{
    float: left;
    width: 100%;
    height: auto;
    overflow: auto;
    padding: 13px;
}
#audioContentContainer input[type=file]{
    width: 33.33%;
    height: 50px;
    margin-top: 5px;
    padding: 13px;
}
#audioContentContainer input[type=file]:hover, #audioContentContainer input[type=file]:focus-within{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 5px;
}
#audioContentContainer input[type=checkbox]{
    margin-right: 2%;
}
#audioContentContainer .innerAutoplayLabel{
    border-bottom: none;
}
#audioContentContainer .innerAutoplayLabel:hover{
    cursor: pointer;
}
.startAtTimeLabel{
    float: left;
    width: 100%;
}
.audioStartAtContainer{
    float: left;
    width: 100%;/* 49% */
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 13px;
    padding-right: 13px;
    padding-bottom: 13px;
}
.audioStopAtContainer{
    float: left;
    width: 49%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-right: 0;
    margin-left: 1%;
}
.audioStartAtTime, .audioStopAtTime{
    float: left;
    width: 31.33%;
    min-width: 100px;
    height: auto;
    margin-top: 1%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    min-height: 80px;
    margin-bottom: 10px;
    position: relative;
}
.audioStartAtTime:focus-within .innerLabel, .audioStopAtTime:focus-within .innerLabel{
    top: 0;
    bottom: auto;
    color: #056c9b;
}
.audioStartAtTime:focus-within .innerTextInput, .audioStopAtTime:focus-within .innerTextInput{
    background-color: #fdfdfd;
}
.sampleAudioContainer{
    float: left;
    width: 66.66%;
    height: auto;
}
.sampleAudioContainer audio{
    width: 98%;
    margin-right: 2%;
}
#hiddenIframeAudio{
    visibility: hidden;
}
/*  --  Modal: Connect Video Modal  --  */
#videoUploaderModal #closeModalContainer .secondaryButtonRed,
#videoUploaderModal #closeModalContainer .secondaryButtonGreen,
#videoUploaderModal #closeModalContainer .primaryButton{
    width: 32.33%;
}
#videoContentContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 13px;
}
#youTubeContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 1%;
}
#vimeoContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 1%;
}
#vimeoIFrame{
    width: 70%;
    margin-left: 15%;
}
#videoContentContainer input[type=checkbox]{
    color: #f2f2f2;
    margin-right: 2%;
}
#videoContentContainer .innerAutoplayLabel{
    border-bottom: none;
}
#videoContentContainer .innerAutoplayLabel:hover{
    cursor: pointer;
}
.videoStartAtContainer{
    float: left;
    width: 49%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1%;
    margin-bottom: 1%;
}
.videoStopAtContainer{
    float: left;
    width: 49%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-right: 0;
    margin-left: 1%;
}
.videoStartAtTimeContainer, .videoStopAtTimeContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 13px;
    padding-top: 0;
}
.videoStartAtTime, .videoStopAtTime{
    float: left;
    width: 32.33%;
    min-width: 100px;
    height: auto;
    margin-top: 1%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    min-height: 80px;
    margin-bottom: 10px;
    position: relative;
}
.videoStartAtTime:focus-within .innerLabel, .videoStopAtTime:focus-within .innerLabel{
    top: 0;
    bottom: auto;
    color: #056c9b;
}
.videoStartAtTime:focus-within .innerTextInput, .videoStopAtTime:focus-within .innerTextInput{
    background-color: #fdfdfd;
}
#youTubeContainer .secondaryButtonGreen,
#vimeoContainer .secondaryButtonGreen{
    margin-left: 33.33%;
}
.sampleVideoContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 1%;
    margin-bottom: 1%;
}
.sampleVideo{
    display: block;
    width: 560px;
    height: 315px;
    margin: 0 auto;
}
.sampleVideoContainer p{
    display: block;
    font-size: 1.6rem;
    margin-top: 20px;
    margin-bottom: 20px;
}
.sampleVideoContainer a{
    color: #305a30;
    font-size: 1.4rem;
    text-decoration: none;
    border-bottom: thin solid #0a090c;
    padding-bottom: 3px;
}
.sampleVideoContainer a:hover{
    color: #9C9C9C;
    border-bottom: thin solid #9C9C9C;
}
/*  --  Modal: Upload Image Modal  --  */
#imageUploaderModal .modalTopButtonContainer .secondaryButtonRed,
#imageUploaderModal .modalTopButtonContainer .primaryButton{
    width: 31.33%;
}
.imageForm{
    float: left;
    width: 100%;
    height: auto;
    overflow: auto;
    padding: 13px;
}
#imageContentContainer{
    float: left;
    width: 100%;
    height: auto;
}
#imageContentContainer .inputContainer{
    width: 48%;
}
#imageContentContainer .cardDetailsContainer{
    justify-content: space-between;
    align-items: flex-start;
}
#lessonImageForm #lessonImageFileInput{
    float: left;
    width: 33.33%;
    height: auto;
    padding: 13px;
}
#lessonImageForm #lessonImageFileInput:hover, #lessonImageForm #lessonImageFileInput:focus-within{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border-radius: 5px;
}
.fileInputMessage{
    float: left;
    width: 66.66%;
    height: auto;
    padding-left: 13px;
}
#imageContentContainer .secondaryButtonGreen{
    width: 48%;
    margin-left: 51%;
}
.imageDetailsAndOptionsContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 13px;
}
.imageTextBoxDivsContainer{
    display: none;
    float: left;
    width: 100%;
    min-height: 100%;
}
#textBoxButtonContainer{
    padding: 0;
    padding-top: 13px;
    padding-bottom: 13px;
}
.textBoxButton{
    float: left;
    width: 33.33%;
    height: 50px;
    padding: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.textBoxButtonClose{
    float: left;
    width: 10%;
    height: auto;
    padding: 1%;
    color: #bf161c;
    text-align:center;
    font-weight: bold;
}
.textBoxButtonClose:hover{
    color: #fdfdfd;
    background-color: #bf161c;
    border-radius: 3px;
    cursor: pointer;
}
.unselectedTextBoxButton{
    float: left;
    width: 88%;
    height: auto;
    margin-left: 2%;
    padding: 5px;
    border-radius: 3px;
    border: 2px solid transparent;
    transition-duration: 0.2s;
}
.selectedTextBoxButton{
    float: left;
    width: 88%;
    height: auto;
    margin-left: 2%;
    padding: 5px;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border: 2px solid #999999;
}
.unselectedTextBoxButton:hover, .selectedTextBoxButton:hover, .unselectedTextBoxButton:focus, .selectedTextBoxButton:focus{
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
    border: 2px solid #999999;
}
.imageTextBoxContentContainer{
    float: left;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.imageTextBoxContentContainer .containerWidth50{
    padding: 0;
    padding-top: 30px;
    width: 49%;
    margin-left: 1%;
}
.imageTextBoxContentContainer .inputContainer{
    width: 32.33%;
    margin-left: 0;
    margin-right: 0;
}
.imageTextBoxContentContainer input[type="text"].textInputForSliderInput{
    width: 50px;
    padding: 5px;
}
.imageTextBoxContentContainer .sliderContainer{
    width: calc(100% - 50px);
}
.imageTextBoxContentContainer .radio{
    width: 100%;
}
.imageUploaderCanvas{
    float: left;
    width: 100%;
    height: auto;
    padding: 1%;
    text-align:center;
    background-color: #fdfdfd;
}
.imageUploaderCanvas canvas{
    width: 100%;
    height: auto;
    display: inline-block;
    background-color: #fdfdfd;
}
#hiddenIframe{
    visibility: hidden;
}
.lessonImagePY,
.lessonImageTextSize{
    margin-right: 0;
    margin-left: 1%;
}
/*  --  Modal: Exit Test Modal  --  */
#openTestWarningModal .containerWidth50{
    width: 48%;
}
#openTestWarningModal .cardDetailsContainer img{
    max-width: 80%;
    max-height: 75px;
}
.openTestCommunityName{
    float: left;
    width: 100%;
    margin-bottom: 13px;
}
/*  --  Modal: Exit Test Modal  --  */
#exitTestModal #continueTestModalButton{
    margin: 0;
    width: 32%;
}
/*  --  Modal: Test Complete Modal  --  */
#submitTestPartButtonContainer, #completeTestPartButtonContainer{
    padding: 0;
    justify-content: flex-start;
    flex-direction: row;
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
}
.submitTestTestPart{
    float: left;
    width: 10%;
    text-align: center;
    margin-left: 5px;
    margin-top: 5px;
	display: flex;
    flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.submitTestTestPart:hover{
    cursor: pointer;
}
.submitTestTestPart:hover .modalTestPartNumber{
    font-weight: 700;
    color: #305a30;
    border-color: #305a30;
}
.testSubmitImg{
    display: block;
	width: 30px;
	height: 30px;
}
.submitTestTestPart 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%);
}
.submitTestTestPart.testPartCorrect img{
    /* Green Icon */
    -webkit-filter: brightness(0) saturate(100%) invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
    filter: brightness(0) saturate(100%) invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
}
.submitTestTestPart.testPartIncorrect 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%);
}
.submitTestTestPart.testPartSubmitted 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%);
}
.submitTestPartNumber{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    font-weight: 500;
    padding-bottom: 2px;
    margin-bottom: 5px;
    border-bottom: 2px solid #9C9C9C;
}
.submitTestPartGrade{
	float: left;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 2rem;
    padding-top: 2px;
    margin-top: 5px;
}
#submitTestModalButtonContainer .secondaryButtonGreen,
#completeTestModalButtonContainer .secondaryButtonGreen{
    width: 31.33%;
}
#viewResultsButton{
    display: none;
}
#submitTestModalButton{
    display: none;
}
#coursePageButton{
    display: none;
}
#viewResultsButtonTimeout{
    display: none;
}
#submitTestFromTimeoutButton {
    display: none;
}
/*  --  Modal: Welcome Modal  --  */
#welcomeModal .modalContainer{
    margin-top: 15%;
}
/*  --  Bring back when on no modalStandard.html  --  */
#welcomeModal{
    animation: welcome 2s 1;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    opacity: 1;
}
@keyframes welcome{
    0% {
        opacity: 1;
    }

    100%{ 
        opacity: 0;   
    }
}
#welcomeModal .flexContainerSpaceBetweenCenterNoWrap{
    width: 80%;
    margin-left: 10%;
}
#welcomeModal .flexContainerSpaceBetweenCenterNoWrap img{
    display: block;
    width: auto;
    max-width: 25%;
    height: auto;
    max-height: 100px;
}
#welcomeModal .flexContainerSpaceBetweenCenterNoWrap h2{
    width: 50%;
    text-align: center;
    font-size: 3rem;
}
#welcomeModal .modalMessage{
    text-align: center;
}
/*  --  Modal: Delete Comment Modal  --  */
.exampleCommentSection{
    margin-top: 2%;
    margin-bottom: 2%;
}
.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;
}
.lessonCommentRightSide{
    float: left;
    width: calc(100% - 40px);
    height: auto;
}
.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;
}
.lessonCommentUsername{
    float: left;
    width: auto;
    height: auto;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
}
.lessonCommentDateTime{
    float: left;
    width: auto;
    height: auto;
    padding-left: 10px;
    padding-right: 3px;
}
.lessonCommentTextContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 10px;
    padding-left: 10px;
}
/*  --  Modal: Share Content Modal  --  */
.shareModalOptionContainer{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.shareModalOption{
    float: left;
    width: 20%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 1%;
    margin-left: 1%;
    margin-right: 1%;
    transform:scale(1);
    transition-duration: 0.3s;
}
.shareModalOption:hover,
.shareModalOption:focus{
    cursor: pointer;
    transform:scale(1.05);
    background-color: #cccccc;
    border-radius: 3px;
}
.shareModalOption img{
    float: left;
    display: block;
    width: 80%;
    max-width: 50px;
    height: auto;
}
.shareModalOption p{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 5%;
}
.selectedShareModalOption{
    transform:scale(1.05);
    background-color: #cccccc;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.24);
}
.selectedShareModalOption:hover,
.selectedShareModalOption:focus{
    box-shadow: none;
}
.shareModalOutputContainer{
    width: 80%;
    height: auto;
    margin-top: 2%;
}
.shareModalOutputContainer p span{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    overflow-x: auto;
    font-size: 1.4rem;
}
#shareContentModalParagraph{
    width: 100%;
    font-size: 1.4rem;
    padding-top: 13px;
    padding-bottom: 13px;
    overflow: hidden;
}
/*  --  Modal: Create Account Modal  --  */
#createAccountModal .modalContainer,
#createNewCommunityModal .modalContainer{
    margin-top: 80px;
    max-height: calc(100% - 80px);
    overflow: hidden;
}
#createAccountModal .modalHeading,
#createNewCommunityModal .modalHeading{
    z-index: 600;
}
.createAccountStepsContainer{
    float: left;
    width: 100%;
    height: 300px;
    margin-top: 2%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}
.createCommunityStepsContainer{
    float: left;
    width: 100%;
    height: 450px;
    margin-top: 2%;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(-190px + 100vh);
    margin-left: 0;
}
#createAccountStepOne .secondaryButtonGreen,
#createCommunityStepOne .secondaryButtonGreen{
    width: 33.33%;
    margin-left: 66.66%;
}
.createAccountStepOne, .createCommunityStepOne{
    float: left;
    width: 50%;
    margin-left: 25%;
    height: auto;
}
.createAccountStepTwo, .createCommunityStepTwo{
    display:none;
    float: left;
    width: 50%;
    margin-left: 25%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 26px;
}
.createCommunityStepThree{
    display:none;
    float: left;
    width: 50%;
    margin-left: 25%;
    height: auto;
    padding-top: 20px;
}
.fadeOut{
    display: block;
    opacity: 1;
    animation: fadeOut 0.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
@keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{ 
        opacity: 0;
    }
}
.fadeIn{
    display: block;
    opacity: 0;
    animation: fadeIn 0.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{ 
        opacity: 1;  
    }
}
.moveLeftToCuurentStep{
    left: 100%;
    animation: moveLeftToCuurentStep 0.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
.moveLeftToCuurentStepStepThree{
    left: 100%;
    animation: moveLeftToCuurentStepStepThree 0.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
.moveLeftFromCurrentStep{
    left: 25%;
    animation: moveLeftFromCurrentStep 0.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
.moveRightToCurrentStep{
    left: -100%;
    animation: moveRightToCurrentStep 0.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
.moveRightFromCurrentStep{
    left: 25%;
    animation: moveRightFromCurrentStep 0.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
@keyframes moveLeftToCuurentStep{
    0%{
        left: 100%;
    }
    100%{ 
        left: 25%; 

    }
}
@keyframes moveLeftToCuurentStepStepThree{
    0%{
        left: 100%;
    }
    100%{ 
        left: 25%; 

    }
}
@keyframes moveLeftFromCurrentStep{
    0%{
        left: 25%;
    }
    100%{ 
        left: -100%; 
    }
}
@keyframes moveRightToCurrentStep{
    from{
        left: -100%;
    }
    to{ 
        left: 25%; 
    }
}
@keyframes moveRightFromCurrentStep{
    from{
        left: 25%;
    }
    to{ 
        left: 100%; 
    }
}
#createAccountModal .captchaButton{
    width: 50%;
}
#createPasswordCharacterCount, #confirmPasswordCharacterCount{
    display: block;
    min-height: 22px;
}
#createAccountModal .showPasswordContainer{
    width: 100%;
}
#createAccountModal #password,
#createAccountModal #confirmPassword{
    width: calc(100% - 50px);
}
#createAccountModal .showHidePasswordContainer{
    float: right;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#createAccountModal .showHidePasswordContainer:hover,
#createAccountModal .showHidePasswordContainer:focus{
    background-color: #999999;
    cursor: pointer;
    border-top-left-radius: 3px;
}
#createAccountModal .checkboxLabel{
    display: block;
    float: right;
    width: auto;
    color: #0a090c;
    margin-top: 0;
    font-size: 1.4rem;
}
#createAccountModal .checkboxLabel:hover{
    cursor: pointer;
}
#createAccountModal .checkboxSpan{
    float: right;
    width: auto;
    height: auto;
    margin-left: 10px;
}
#createAccountModal .checkboxSpan label{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#createAccountModal .createAccountMessageText{
    font-size: 1.6rem;
    padding: 13px;
}
#createAccountModal .cookisTermsContainer,
#createAccountModal .createAccountModalButtonContainer,
#createNewCommunityModal .createAccountModalButtonContainer{
    position: initial;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px;
}
#createAccountModal .createAccountModalButtonContainer,
#createNewCommunityModal .createAccountModalButtonContainer{
    padding-left: 0;
    padding-right: 0;
    flex-wrap: wrap;
}
#createAccountModal .cookisTermsContainer .secondaryButtonGreen,
#createAccountModal .createAccountModalButtonContainer .secondaryButtonGreen,
#createNewCommunityModal .createAccountModalButtonContainer .secondaryButtonGreen{
    width: 48%;
}
#createAccountModal .createAccountModalButtonContainer .ctaButton,
#createNewCommunityModal .createAccountModalButtonContainer .ctaButton{
    width: 66.66%;
    margin-left: 16.66%;
    margin-right: 16.66%;
    margin-bottom: 26px;
}
#createAccountModal #blickelNextBackButton,
#createNewCommunityModal #blickelNextBackButton,
#upgradeCommunityStepTwo #blickelNextBackButton{
    width: 33.33%;
    margin-bottom: 13px;
}
#numberOfMembersDiv{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
#memberPriceParagraph{
    font-size: 3rem;
    text-align: center;
}
#createAccountModal .modalSectionFull{
    float: left;
    width: 100%;
    height: auto;
}
/*  --  Modal: Upgrade Community Modal  --  */
#upgradeCommunityModal{
    display: none;
}
.upgradeCommunityStepsContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 2%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}
#upgradeCommunityStepOne .secondaryButtonGreen{
    width: 33.33%;
    margin-left: 66.66%;
}
#upgradeCommunityModal .numberOfMembersContainer{
    width: 100%;
    padding: 13px;
}
#upgradeCommunityStepOne .ctaButton{
    width: 50%;
    margin-left: 50%;
}
#upgradeCommunityStepTwo{
    display: none;
}
#upgradeCommunityStepTwo #paypalIFrame{
    width: 100%;
    height: auto;
    min-height: 375px;
}
/*  --  Modal: Input Error Modal  --  */
#errorModal .modalContentContainer{
    padding-bottom: 13px;
}
#errorModal .modalTopButtonContainer .secondaryButtonRed,
#errorModal .modalTopButtonContainer .primaryButton{
    width: 48%;
}
#errorModal .modalMessage{
    margin-top: 0;
}
#errorModal .lessonPartErrorContainer{
    max-height: 25vh;
    overflow-x: hidden;
    overflow-y: auto;
}
#errorModal .lessonPartErrorContainer .outputCardContainer.errorOutput{
    width: 100%;
}
/*  --  Modal: Redirect Modal  --  */
/*  --  Modal: Lesson Part Preview Modal  --  */
.lessonPartPreviewContainer{
    display: none;
}
/*  --  Modal: Already Owns Personal Community Modal  --  */
#alreadyOwnsPersonalCommunityModal{
    display: none;
}
/*  --  Modal: Add Prerequisites Modal  --  */
#prerequisiteModal{
    display: none;
}
#prerequisiteModal .dropdownSelectionContainer .inputContainer{
    width: 23%;
    margin-left: 1%;
    margin-right: 1%;
}
#prerequisiteModal .sortDropdown{
    float: right;
    width:49%;
    margin-left: 51%;
    margin-bottom: 0;
    margin-right: 0;
}
#prerequisiteModal .sortDropdown .inputContainerContent{
    padding: 13px;
}
#prerequisiteModal .cardContainer.currentSelectedContentList{
    height: auto;
}
.prerequisiteSelectHeader{
    float: left;
    width: 10%;
    height: auto;
    text-align: center;
    font-size: 1.4rem;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    border-right: 2px solid #4c4c4c;
}
.prerequisiteContentTypeHeader{
    display: block;
    float: left;
    width: 15%;
    text-align: center;
    font-size: 1.4rem;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    border-right: 2px solid #4c4c4c;
}
.prerequisiteContentTitleHeader{
    float: left;
    width: 75%;
    height: auto;
    text-align: left;
    font-size: 1.4rem;
    padding-left: 10px;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}
#prerequisiteModal .selectRowContainer{
    width: 10%;
}
#prerequisiteModal .contentRowContainer{
    width: 15%;
}
#prerequisiteModal .titleRowContainer{
    width: 75%;
}
.addPrerequisiteButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 1%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.addPrerequisiteButtonContainerLeftSide{
    width: 50%;
}
.typeOfPrerequisite{
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.typeOfPrerequisite .inputContainerContent.radioInputContainer{
    padding-right: 13px;
}
.typeOfPrerequisite .radio{
    width: 100%;
}
.addPrerequisiteButtonContainerRightSide{
    width: 45%;
}
.addPrerequisiteButtonContainer .primaryButton{
    width: 50%;
}
#hasPrerequisiteRightColumn .listRow:hover{
    cursor: auto;
}
.prerequisiteRemoveRowContainer{
    float: left;
    width: 5%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5px;
}
.prerequisiteRemoveRowContainer p{
    text-align: center;
    font-weight: bold;
    color: #bf161c;
    margin: auto auto;
    width: 100%;
    border-radius: 3px;
}
.prerequisiteRemoveRowContainer:hover p,
.prerequisiteRemoveRowContainer p:focus{
    color: #fdfdfd;
    cursor: pointer;
    background-color: #34643a;
}
.prerequisiteContentRowContainer{
    display: flex;
    float: left;
    width: 5%;
    height: 30px;
    justify-content: center;
    align-items: center;
}
.prerequisiteContentRowContainer img{
    display: block;
    width: 20px;
    height: 20px;
}
.prerequisiteTitleRowContainer{
    float: left;
    width: 55%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.prerequisiteTitleRowContainer p{
    font-size: 1.6rem;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prerequisiteTypeRowContainer{
    float: left;
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.prerequisiteTypeRowContainer p{
    font-size: 1.6rem;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prerequisiteValueRowContainer{
    float: left;
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.prerequisiteValueRowContainer p{
    font-size: 1.6rem;
    padding-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.editPrerequisiteMessage{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 13px;
    padding-right: 13px;
    margin-bottom: 26px;
    margin-top: 13px;
}
/*  --  Modal: Content Has Prerequisites Modal  --  */
.prerequisitesItemContainer{
    margin-top: 13px;
    margin-bottom: 26px;
}
.remainingPrerequisitesItemProgress{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 13px;
    margin-top: 13px;
}
/*  --  Prerequisite Complete Message  --  */
.prerequisiteCompleteMessageContainer.sectionHeader{
    display: none;/*flex*/
    align-items: center;
    float: left;
    width: 50%;
    height: 30px;
    min-height: 30px;
    margin-top: 0;
    margin-bottom: 0;
}
.prerequisiteCompleteMessageContainer.sectionHeader img{
    max-height: 25px;
    max-width: 25px;
    margin-left: 0;
    -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%);
}
.prerequisiteCompleteMessageContainer.sectionHeader h2{
    width: calc(100% - 50px);
    max-height: 30px;
    border-color: #C3922E;
    font-size: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*  --  Progress bar starts  --  */
.prerequisiteProgressBarContainer{
    float: left;
    width: 25%;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border-left: none;
    border-right: none;
    position: relative;
    overflow: hidden;
}
.progressBar{ /* unfilled progress bar */
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    overflow: hidden;
    box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
    background-color: #fdfdfd;
    border-radius: 5px;
}
.requiredProgress { /* required progress */
    content: "";
    width: 0%;
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    overflow: hidden;
    border-radius: 5px;
    background-color: #e6e6e6; 
    box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
}
.actualProgress { /* actual progress */
    content: "";
    width: 0%;
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    overflow: hidden;
    border-radius: 5px;
    background-color: #305a30; 
}
.remainingPrerequisitesItemProgress p{
    width: 25%;
    font-size: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prerequisitesItemRightSide{
    float: left;
    width: 75%;
    height: auto; 
    padding-left: 13px;
}
.prerequisitesItemLeftSide{
    float: left;
    width: 25%;
    height: auto; 
}
.prerequisitesItemLeftSide .primaryButton{
    width: 100%;
}
/*  --  Animations  --  */
/*  --  Animation: Loading Animation  --  */
.loadingModal{
    display: block;
    float: left;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 1%;
    overflow: visible;
}
.loadingContentModal{
    display: block;
    float: left;
    width: 100%;
    height: auto;
    overflow: visible;
}
.loadingContent{
    float: left;
    display: block;  
    width: 100%;
    height: 100px;
    margin-top: 30%;
    align-content: center;
 }
 .loadingContentModal .loadingContent{
    margin-top: 0;
 }
.ballContainer{
    float: left;
    width: 100%;
    height: 20px;
    margin-top: 65px;
    display: flex;
    justify-content: center;
}
.ballOne{
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 10px;
    background-color: #305a30;
    transition: .5s ease 0s;
    animation: scaleBall 2s infinite;
    animation-delay: 0s;
    transform-style: preserve-3d;
}
.ballTwo{
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 10px;
    background-color: #305a30;
    transition: .5s ease 0s;
    animation: scaleBall 2s infinite;
    animation-delay: 0.5s;
    transform-style: preserve-3d;
}
.ballThree{
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 10px;
    background-color: #305a30;
    transition: .5s ease 0s;
    animation: scaleBall 2s infinite;
    animation-delay: 1s;
    transform-style: preserve-3d;
}
@keyframes scaleBall{
    0% {
          transform: scale(1);
    }
    50% {
        transform: scale(2);
        border-radius: 0px;
    }
    100%{
           transform: scale(1); 
    }
}
/*  --  Animation: Fly up from bottom Animation  --  */
.flyInBottomAnimationModal{
    display: none;
    position: fixed;
    z-index: 1200;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
}
.flyInBottomAnimationContent{
    display: block;  
    width: 100%;
    max-width: 1500px;
    height: 100%;
    margin: auto auto;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transition-duration: 0.3s;
    animation: contentCreated 2.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    background: rgb(51,51,51);
    background: linear-gradient(0deg, rgba(51,51,51,0.8) 90%, rgba(51,51,51,0) 100%);
}
.flyInBottomAnimationContent h1, .flyInBottomAnimationContent h2{
    display: block;
    float: left;
    width: 100%;
    height: 100px; 
    font-size: 3.2rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    color: #f2f2f2;
}
@keyframes contentCreated{
    0% {
        opacity: 0;
        top: 150px;
        left: 0;
    }
    15%{ 
        opacity: 1;
        top: 0; 
        left: 0;  
    }
    85%{ 
        top: 0;   
        left: 0;  
        opacity: 1; 
    }
    100%{ 
        opacity: 0;
        top: 150px;   
        left: 0;   
    }
}
/*  --  answer submitted animation  --  */
.answerSubmittedModal{
    display: none;
    width: 33.33%;
    margin-left: 33.33%;
    z-index: 2;
    position: relative;
    opacity: 0;
    animation-name: riseUp;
    animation-duration: 1.75s;
    animation-timing-function: ease-out;
}
@keyframes riseUp {
    0%   {top:0px; opacity: 0;}
    50%  {top:-100px; opacity: 1;}
    75%  {top:-100px; opacity: 1;}
    100% {top:-100px; opacity: 0;}
}
/*  --  responsive screen code  --  */
@media only screen and (min-width: 1500px) {/* Extra large devices (large laptops and desktops, 1500px and up) */
/*  --  Old Code Below Move down as it gets updated  --  */
    .cookieMessageContainer{
        left: 0;
        right: 0;
        margin-right: auto;
        margin-left: auto;
    }
    .displayedValueHeader img{
        width: 30px;
        height: 30px;
        margin-left: 12.5px;
        margin-right: 12.5px;
    }
    .displayedValueHeader p{
        width: calc(100% - 60px);
        font-size: 1.8rem;
    }
    .accordianCurrentGradeContainer h2{
        font-size: 2.2rem;
    }
/*  --  Old Code above Move down as it gets updated  --  */
/*  --  General  --  */  
    html{
        float: left;
        width: 100%;
        height: auto;
        min-height: 100%;
        display: flex;
        justify-content: center;
        background-image: url(/images/companyImages/htmlBackgroundWhite.png);
        background-size: auto;
        background-repeat: repeat;
        background-attachment: fixed;
    }
    body{
        float: left;
        width: 100%;
        max-width: 1500px;
        height: auto;
        margin: 0px auto;
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    }
/*  --  Headers  --  */ 
    .pageHeader h1, .pageHeader h2{
        font-size: 3.2rem;
    }
    .sectionHeader img{
        width: 35px;
        height: 35px;
        margin-left: 12.5px;
        margin-right: 12.5px;
    }
/*  --  Content Option Overview  --  */
/*  --  Content Option Blocks / Lists  --  */
    .optionContainer{
        width: 33.33%;
        padding-left: 1%;
        padding-right: 1%;
        margin-left: 0;
        margin-right: 0;
    }
    .listOptionContainer{
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }        
/*  --  Modal Code Below  --  */  
    #editUserModal .userRoleContainer,
    #editUserModal .shortUserDetails{
        width: 75%;
        margin-left: 12.5%;
    }
    .inheritColorContent{
        width: 60%;
        margin: 10% 20%;
    }
    #welcomeModal .modalContainer{
        margin-top: 10%;
    }
    .modalImageMessageContainer{
        justify-content: center;
    }
    #guestModalDiv.modal, #cookieMessageDiv.modal{
        left: 0;
        right: 0;
        margin-right: auto;
        margin-left: auto;
    }
/*  --  Test Complete  --  */
    #testCompleteModal .modalMessage{
        font-size: 2rem;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {/* Extra large devices (large laptops and desktops, 1200px and up) */
/*  --  Old Code Below Move down as it gets updated  --  */
    .inputLabel{
        font-size: 1.6rem;
        font-weight: normal;
    }
    .cookieMessageContainer{
        left: 0;
        right: 0;
        margin-right: auto;
        margin-left: auto;
    }
    .displayedValueHeader img{
        width: 30px;
        height: 30px;
        margin-left: 12.5px;
        margin-right: 12.5px;
    }
    .displayedValueHeader p{
        width: calc(100% - 60px);
        font-size: 1.8rem;
    }
    .accordianCurrentGradeContainer h2{
        font-size: 2rem;
    }
    .sectionBlockContainer{
        margin-top: 0;
    }
    .sectionBlock{
        width: 25%;
        height: auto;
    }
    .guestModalContent{
        width: 60%;
        margin: 10% 20%;
    }
    .organizationNameContainer p, .classroomNameContainer p{
        font-size: 2rem;
    }
    .badLinkMessage p{
        margin-top: 2.5%;
        margin-left: 10%;
    }
/*  --  Old Code above Move down as it gets updated  --  */
/*  --  General   --  */  
    html{
        float: left;
        width: 100%;
        height: auto;
        min-height: 100%;
        display: flex;
        justify-content: center;
        background-image: url(/images/companyImages/pw_maze_white.png);
        background-size: auto;
        background-repeat: repeat;
        background-attachment: fixed;
    }
    body{
        float: left;
        width: 100%;
        max-width: 1500px;
        height: auto;
        margin: 0px auto;
    }
    h1{
        font-size: 3.2rem;
    }
    h2{
        font-size: 2.6rem;
    }
    p{
        font-family: 'Roboto', sans-serif;
        font-size: 1.6rem;
        font-weight: normal;
    }
    .backToTopContainer{
        right: 25px;
    }
/*  --  Headers  --  */ 
    .pageHeader h1, .pageHeader h2{
        font-size: 3.2rem;
    } 
    .sectionHeader img{
        width: 35px;
        height: 35px;
        margin-left: 12.5px;
        margin-right: 12.5px;
    }
/*  --  Content Option Overview  --  */
/*  --  Content Option Blocks / Lists  --  */
    .optionContainer{
        width: 33.33%;
        padding-left: 1%;
        padding-right: 1%;
        margin-left: 0;
        margin-right: 0;
    }
    .listOptionContainer{
        width: 100%;
    }        
/*  --  Modal Code Below  --  */       
    #editUserModal .userRoleContainer,
    #editUserModal .shortUserDetails{
        width: 75%;
        margin-left: 12.5%;
    }
    .inheritColorContent{
        width: 60%;
        margin: 10% 20%;
    }    
    #welcomeModal .modalContainer{
        margin-top: 10%;
    }
    .modalImageMessageContainer{
        justify-content: center;
    }
/*  --  Test Complete  --  */
    #testCompleteModal .modalMessage{
        font-size: 2rem;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {/* Large devices (laptops/desktops, 992px and up) */
/*  --  Old Code Below Move down as it gets updated  --  */
    .inputLabel{
        font-size: 1.8rem;
        font-weight: normal;
    }
    .greenButton, .whiteButton, .grayButton, .noClickButton, .secondaryButton, .callToActionButton{ 
        font-size: 1.6rem;
    }
    .displayedValueHeader img{
        width: 30px;
        height: 30px;
        margin-left: 12.5px;
        margin-right: 12.5px;
    }
    .displayedValueHeader p{
        width: calc(100% - 60px);
        font-size: 1.8rem;
    }
    .accordianCurrentGradeContainer h2{
        font-size: 1.8rem;
    }
    .sectionBlockContainer{
        margin-top: 0;
    }
    .sectionBlock{
        width: 25%;
        height: auto;
    }
    .organizationOptionBox, .classroomOptionBox{
        float: left;
        width: 31%;
        height: 200px;
        margin: 1%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: #ffffff;
    }
    .currentClassLabel, .sectionLinkBlockHeaderContainerDarkGray p{
        font-size: 1.6rem;
    }
    .tableRow .overallGradeContainer p, .tableRow .currentGradeContainer p{
        font-size: 1.6rem;
    }
/*  --  Old Code above Move down as it gets updated  --  */
/*  --  General  --  */  
    h1{
        font-size: 3.2rem;
    }
    h2{
        font-size: 2.6rem;
    }
    p{
        font-size: 1.6rem;
    }
    .backToTopContainer{
        right: 25px;
    }
/*  --  Headers  --  */  
    .pageHeader h1, .pageHeader h2{
        font-size: 3.2rem;
    }
    .sectionHeader img{
        width: 35px;
        height: 35px;
        margin-left: 12.5px;
        margin-right: 12.5px;
    }
    .organizationHeaderLogoContainer{
        height: 50px;
    }
    .organizationHeaderLogoContainer img{
        max-height: 45px;
    }
/*  --  Arrow Nav  --  */  
    .arrowNavContainer{
        flex-wrap: wrap;
        min-height: 100px;
    }
    #pageDownDiv{
        order: 1;
        width: 33.33%;
        margin-right: 16.66%;
    }
    #pageUpDiv{
        order: 2;
        width: 33.33%;
        margin-left: 16.66%;
    }
    #navButtonsTopContainer{
        order: 3;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
/*  --  Content Option Overview  --  */
    .contentOverviewContainer .contentCardContainer{
        width: 40%;
    }
    .contentOverviewContainer .contentOverviewLeftContainer{
        width: 60%;
    }
    .contentOverviewContainer .contentOverviewDescription{
        font-size: 1.4rem;
    }
    .contentOverviewSubcontentContainer{
        flex-wrap: wrap;
    }
    .contentOverviewSubcontent{
        width: 33.33%;
    }
/*  --  Content Option Blocks / Lists  --  */
    .optionContainer{
        width: 50%;
        padding-left: 1%;
        padding-right: 1%;
        margin-left: 0;
        margin-right: 0;
    }
    .listOptionContainer{
        width: 100%;
    }
    .listOptionContainer .titlePurchasedContainer{
        width: calc(100% - 50px);
    }
    .listOptionContainer .optionContentDetailsContainer{
        height: 90px;
    }
    .listOptionContainer .optionNameContainer{
        height: 60px;
        overflow: auto;
    }
    .listOptionContainer .bottomSection{
        width: 100%;
        height: auto;
    }
    .listOptionContainer .optionContentPrice{
        min-width: 30%;
    }
/*  --  Modal Code Below  --  */
    .modalHeading h2{
        font-size: 2.4rem;
    }
    #welcomeModal .modalContainer{
        margin-top: 10%;
    }
/*  --  Upload Modal  --  */
    .uploadModal{
        width: 50%;
    }
/*  --  Edit User Modal  --  */
    #editUserModal .organizationUserForm{
        width: 100%;
        margin-left: 0;
    }    
    #editUserModal .userRoleContainer,
    #editUserModal .shortUserDetails{
        width: 80%;
        margin-left: 10%;
    } 
    #editUserModal .imageRadioOption{
        width: 31.33%;
    }
/*  --  Lesson Part Image Modal  --  */   
    #imageUploaderModal .modalContainer{
        width: 100%;
    }
/*  --  Prerequisite Modal Modal  --  */
    .addPrerequisiteButtonContainer .secondaryButtonGreen{
        width: 60%;
    }
} 
@media only screen and (min-width: 768px) and (max-width: 991px) {/* Medium devices (landscape tablets, 768px and up) */
/*  --  Old Code Below Move down as it gets updated  --  */
    .displayedValueHeader img{
        width: 30px;
        height: 30px;
        margin-left: 12.5px;
        margin-right: 12.5px;
    }
    .displayedValueHeader p{
        width: calc(100% - 60px);
        font-size: 1.8rem;
    }
    .accordianCurrentGradeContainer h2{
        font-size: 1.8rem;
    }
    .viewOptionHeaderIcon{
        width: 30px;
        height: 30px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .tableRow .overallGradeContainer p, .tableRow .currentGradeContainer p{
        font-size: 1.4rem;
    }
/*  --  Old Code above Move down as it gets updated  --  */
/*  --  General  --  */
    .dashboardStyleButtonContainer .secondaryButtonGreen{
        width: 48%;
    }
/*  --  Headers  --  */  
    .pageHeader img{
        width: 30px;
        height: 30px;
    }
    .pageHeader h1, .pageHeader h2{
        width: calc(100% - 50px);
        font-size: 2.4rem;
    }
    .sectionHeader img{
        width: 30px;
        height: 30px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .organizationHeaderLogoContainer{
        height: 50px;
    }
    .organizationHeaderLogoContainer img{
        max-height: 45px;
    }
/*  --  Arrow Nav  --  */  
    .arrowNavContainer{
        flex-wrap: wrap;
        min-height: 100px;
    }
    #pageDownDiv{
        order: 1;
        width: 33.33%;
        margin-right: 16.66%;
    }
    #pageUpDiv{
        order: 2;
        width: 33.33%;
        margin-left: 16.66%;
    }
    #navButtonsTopContainer{
        order: 3;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
/*  --  Content Option Overview  --  */
    .contentOverviewContainer .contentCardContainer{
        width: 40%;
    }
    .contentOverviewDetailsContainer{
        padding: 10px;
        padding-bottom: 0;
    }
    .contentOverviewContainer .contentOverviewLeftContainer{
        width: 60%;
    }
    .contentOverviewDescription{
        font-size: 1.4rem;
    }
    .readMore{
        width: calc(100% + 20px);
        margin-right: -10px;
    }
    .contentOverviewSubcontentContainer{
        flex-wrap: wrap;
    }
    .contentOverviewSubcontent{
        width: 50%;
        margin-bottom: 5px;
    }
/*  --  Content Option Blocks / Lists  --  */
    .contentViewOptionSection, .viewProgressButtonContainer{
        width: 50%;
    }
    .viewProgressButtonContainer .secondaryButtonGreen{
        width: 80%;
        margin-left: 20%;
    }
    .optionContainer{
        width: 50%;
        padding-left: 1%;
        padding-right: 1%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 13px;
    }
    .optionContentPriceAndButtonContainer{
        flex-wrap: wrap;
        height: auto;
    }
    .optionContainer .optionContentPriceAndButtonContainer .ctaButton{
        max-width: 60%;
    }
    .listOptionContainer{
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .listOptionContainer .title{
        height: 150px;
        border-bottom-left-radius: 0;
    }
    .listOptionContainer .titlePurchasedContainer{
        width: calc(100% - 50px);
    }
    .listOptionContainer .optionContentDetailsContainer,
    .listOptionContainer .progressBarContainer{
        width: 66.66%;
    }
    .listOptionContainer .overallGradeContainer, .listOptionContainer .currentGradeContainer{
        width: 50%;
    }
    .listOptionContainer .descriptionContainer{
        width: 100%;
    }  
    .listOptionContainer .optionNameContainer{
        height: 45px;
        overflow: auto;
    }
    .listOptionContainer .optionNameContainer h2{
        font-size: 1.6rem;
    }
    .listOptionContainer .bottomSection{
        width: 100%;
    }
    .listOptionContainer .optionContentPriceAndButtonContainer{
        flex-wrap: nowrap;
    }
    .listOptionContainer .optionContentPriceAndButtonContainer .optionContentPrice{
        width: auto;
        min-width: 25%;
    }
/*  --  Inputs  --  */
    .lessonInputButtonContainer{
        flex-wrap: wrap;
    }
    .lessonInputButtonContainer .inputContainer{
        width: 100%;
        margin-right: 0;
    }
    .lessonInputButtonContainer .ctaButton.unavailable,
    .lessonInputButtonContainer .ctaButton.redCTAButton,
    .lessonInputButtonContainer .ctaButton{
        width: 33.33%;
        margin-left: 66.66%;
        margin-top: 13px;
    }           
/*  --  Modal Code Below  --  */
    .miniModal{
        width: 60%;
        height: auto;
        max-height: calc(100vh - 40px);
    }
    .miniModal .modalHeading h2{
        font-size: 2.4rem;
    }
/*  --  Manage Emails  --  */
    .sendEmailButtonContainer .primaryButton,
    .removeEmailButtonContainer .primaryButton,
    .linkEmailButtonContainer .primaryButton{
        width: 50%;
    }
/*  --  Upload Modal  --  */
    .uploadModal{
        width: 50%;
    }
/*  --  Edit User Modal  --  */
    #editUserModal .organizationUserForm{
        width: 100%;
        margin-left: 0;
    }    
    #editUserModal .imageRadioOption{
        float: left;
        width: 31.33%;
    }    
    #editUserModal .shortUserDetails{
        width: 100%;
        margin-left: 0;
        margin-top: 2%;
    }
/*  --  Create Account Modal  --  */
    .createAccountStepOne,
    .createCommunityStepOne{
        width: 80%;
        margin-left: 10%;
    }
    .createAccountStepTwo,
    .createCommunityStepTwo,
    .createCommunityStepThree{
        width: 80%;
        margin-left: 10%;
    }    
    .moveRightStepOneAnimation{
        left: -100%;
    }
    .moveLeftStepTwoAnimation{
        left: 100%;
    }
    .moveRightStepTwoAnimation{
        left: 10%;
    }
/*  --  Subcontent Modal  --  */
    #addSubcontentModal .sortDropdown.newInputLabelContainer{
        width: 95%;
        margin-left:2%;
        margin-bottom:0;
    }
    .currentSelectedContentList .primaryButton,
    .currentSelectedContentSubcontentList .primaryButton{
        width: 70%;
        margin-top: 13px;
    }
/*  --  Lesson Settigns Modal  --  */
    #lessonSettingsModal{
        width: 50%;
    }
    .modalContentDescription{
        width: 80%;
        margin-left: 10%;
    }
/*  --  Lesson Part Image Modal  --  */   
    #imageUploaderModal .modalContainer{
        width: 100%;
    }
/*  --  Lesson Audio Upload  --  */
    .audioNameContainer, .audioDescriptionContainer{
        width: 100%;
    }
/*  --  Lesson Video Upload  --  */
    .videoStartAtTime, .videoStopAtTime{
        width: 100%;
    }
/*  --  Test Complete  --  */
    #testCompleteModal .modalMessage{
        font-size: 2rem;
    }
/*  --  Purchase Content Modal  --  */
    .purchaseParentPriceAndButtonContainer{
        flex-wrap: wrap;
    }
    #contentPurchaseGoToParentButtonParent{
        width: 100%;
        margin-left: 0;
        margin-top: 13px;
    }
/*  --  Prerequisite Modal Modal  --  */
    #prerequisiteModal .dropdownSelectionContainer{
        flex-wrap: wrap;
    }
    #prerequisiteModal .dropdownSelectionContainer .inputContainer{
        width: 31.33%;
    }
    .addPrerequisiteButtonContainer .primaryButton{
        width: 100%;
    }
/*  --  Content has Prerequisite Modal  --  */
    .prerequisitesItemRightSide{
        width: 70%;
    }
    .prerequisitesItemLeftSide{
        width: 30%;
    }
}   
@media only screen and (min-width: 601px) and (max-width: 767px) {/* Small devices (portrait tablets and large phones, 600px and up) */
/*  --  Old Code Below Move down as it gets updated  --  */
    .inputLabel{
        font-size: 1.6rem;
        font-weight: normal;
    }
    .newLabel{
        font-size: 1.4rem;
    }
    .makeFontRoboto{
        font-size: 1.2rem;
    }
    .greenButton, .whiteButton, .grayButton, .noClickButton, .secondaryButton, .callToActionButton{ 
        font-size: 1.6rem;
    }
    .organizationProgramContainer{
        padding-left: 0;
        padding-right: 0;
    }
    .organizationContainer{
        width: 49%;
        margin-top: 0;
        margin-bottom: 0;
    }
    .currentContent{
        height: calc(100% - 40px);
    }
    .currentCommmunityContainer, .currentContentDisplayContainer{
        width: 49%;
        margin-right: 0;
    }    
    .contentAttachmentsSection{
        width: 50%;
    }
    .displayedValueHeader img{
        width: 30px;
        height: 30px;
        margin-left: 12.5px;
        margin-right: 12.5px;
    }
    .displayedValueHeader p{
        width: calc(100% - 60px);
        font-size: 1.8rem;
    }
    .accordianCurrentGradeContainer h2{
        font-size: 1.8rem;
    }
    .pageLink{
        width: 48%;
    }
    .topLeftPageLink{
        width: 100%;
    }
    .classroomContainer{
        width: 100%;
        margin-top: 1%;
    }
    .sectionBlockContainer{
        width: 100%;
        margin-top: 0;
    }
    .sectionBlock, .sectionLinkBlock{
        width: 33.33%;
        height: auto;
    }
    .sectionHeaderContainer{
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-top: 0;
        padding-left: 0;
        padding-bottom: 0;
        background-color: #305a30;
    }
    .sectionHeaderContainer h1, .sectionHeaderContainer h2{
        width: 80%;
        text-align: center;
        padding-top: 15px;
        color: #F2F2F2;
    }
    .sectionLinkBlockHeaderContainerDarkGray p, .sectionLinkBlockHeaderContainerGreen p, .sectionLinkBlockHeaderContainerTan p{
        font-size: 1.6rem;
    }
    .inputErrorContent{
        width: 80%;
        left: 10%;
    }
    .contentViewOptionSection, .viewProgressButtonContainer{
        width: 50%;
    }
    .viewProgressButtonContainer .secondaryButtonGreen{
        width: 80%;
        margin-left: 20%;
    }
    .viewOptionHeaderIcon{
        width: 30px;
        height: 30px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .reportRadioOptionContainer{
        width: 48%;
    }
    @keyframes reportSent{
        0%{
            top: 150px;
            opacity: 0;
            font-size: 3rem;
        }
        40%{
            top: 30px;
            opacity: 1;
            font-size: 3.2rem;
        }
        60%{
            top: 30px;
            opacity: 1;
            font-size: 3.2rem;
        }
        100%{
            top: -100px;
            opacity: 0;
            font-size: 3rem;
        }
    }
    .organizationOptionBox, .classroomOptionBox{
        float: left;
        width: 48%;
        height: 200px;
        margin: 1%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: #ffffff;
    }
    .badLinkMessage{
        width: 100%;
        margin-left: 0;
    }
    .badLinkMessage p{
        width: 90%;	
        margin-left: 5%;
    }
    .badLinkMessage button{
        width: 90%;
        margin-left: 5%;
        margin-top: 5%;
    }
    .iconKey, .contentDocumentContainer{
        width: 49%;
        float: right;
    }
    .keyContainer, .documentSectionContainer{
        max-height: 125px;
        overflow: auto;
    }
    .documentSectionContainer{
        max-height: 125px;
    }
    .key{
        width: 100%;
    }
/*  --  Old Code above Move down as it gets updated  --  */
/*  --  General  --  */
    h1{
        font-size: 2rem;
    }
    h2{
        font-size: 1.8rem;
    }
    p{
        font-family: 'Roboto', sans-serif;
        font-size: 1.6rem;
        font-weight: normal;
    }  
    .dashboardStyleButtonContainer .secondaryButtonGreen{
        width: 48%;
    }
    .wrapper{
        width: 100%;
        padding-right: 13px;
        padding-left: 13px;
    }
    .pageTopContainer{
        width: 100%;
        position: initial;
        padding-right: 13px;
        padding-left: 13px;
        margin-top: 1%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .goBackContainer, .learnPageContainer{
        width: 49%;
    }
    .currentCommunityCard, .currentContentCard{
        width: 49%;
        margin-right: 0;
    }
/*  --  Ads  --  */
    .whitelistBlickelContainer{
        justify-content: center;
    }
    .lessonHeaderSpecialContainer{
        margin-bottom: 2%;
    }
/*  --  Headers  --  */  
    .pageHeader img{
        width: 30px;
        height: 30px;
    }
    .pageHeader h1, .pageHeader h2{
        width: calc(100% - 50px);
        font-size: 2.4rem;
    }
    .sectionHeader img{
        width: 30px;
        height: 30px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .organizationHeaderLogoContainer{
        width: 20%;
        height: 50px;
        margin-left: 0;
    }
    .organizationHeader h2{
        width: 80%;
        height: auto;
    }
    .organizationHeaderLogoContainer img{
        max-height: 45px;
    }
/*  --  Arrow Nav  --  */  
    .arrowNavContainer{
        flex-wrap: wrap;
        min-height: 100px;
    }
    #pageDownDiv{
        order: 1;
        width: 33.33%;
        margin-right: 16.66%;
    }
    #pageUpDiv{
        order: 2;
        width: 33.33%;
        margin-left: 16.66%;
    }
    #navButtonsTopContainer{
        order: 3;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
/*  --  Icon Key  --  */
    .iconKeyContainer .cardDetailsCotnainer{
        justify-content: flex-start;
        align-items: stretch;
    }
/*  --  Content Option Overview  --  */
    .contentOverviewContainer .contentCardContainer{
        width: 40%;
    }
    .contentOverviewDetailsContainer{
        padding: 10px;
        padding-bottom: 0;
    }
    .contentOverviewContainer .contentOverviewLeftContainer{
        width: 60%;
    }
    .contentOverviewDescription{
        font-size: 1.4rem;
    }
    .readMore{
        width: calc(100% + 20px);
        margin-right: -10px;
    }
    .contentOverviewSubcontentContainer{
        flex-wrap: wrap;
    }
    .contentOverviewSubcontent{
        width: 33.33%;
    }
/*  --  Content Option Blocks / Lists  --  */
    .stickyCardHeader{
        top: 40px;
    }
    .optionContainer{
        width: 50%;
        padding-left: 1%;
        padding-right: 1%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 26px;
    }
    .optionContentPriceAndButtonContainer{
        flex-wrap: wrap;
        height: auto;
    }
    .optionContainer .optionContentPriceAndButtonContainer .ctaButton{
        max-width: 60%;
    }
    .listOptionContainer{
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .option:hover, .option:focus-within{
        transform:scale(1);
    }
    .listOptionContainer .title{
        height: 150px;
        border-bottom-left-radius: 0;
    }
    .listOptionContainer .titlePurchasedContainer{
        width: calc(100% - 50px);
    }
    .listOptionContainer .optionContentDetailsContainer,
    .listOptionContainer .progressBarContainer{
        width: 66.66%;
    }
    .listOptionContainer .overallGradeContainer, .listOptionContainer .currentGradeContainer{
        width: 50%;
    }
    .listOptionContainer .descriptionContainer{
        width: 100%;
    }  
    .listOptionContainer .optionNameContainer{
        height: 45px;
        overflow: auto;
    }
    .listOptionContainer .optionNameContainer h2{
        font-size: 1.6rem;
    }
    .listOptionContainer .bottomSection{
        width: 100%;
        height: auto;
    }
    .listOptionContainer .optionContentPriceAndButtonContainer{
        flex-wrap: nowrap;
    }
    .listOptionContainer .optionContentPriceAndButtonContainer .optionContentPrice{
        width: auto;
        min-width: 25%;
    }
/*  --  Inputs  --  */
    .lessonInputButtonContainer{
        flex-wrap: wrap;
    }
    .lessonInputButtonContainer .inputContainer{
        width: 100%;
        margin-right: 0;
    }
    .lessonInputButtonContainer .ctaButton.unavailable,
    .lessonInputButtonContainer .ctaButton.redCTAButton,
    .lessonInputButtonContainer .ctaButton{
        width: 33.33%;
        margin-left: 66.66%;
        margin-top: 13px;
    }
/*  --  Modal Css Below  --  */
    .miniModal{
        width: 70%;
        height: auto;
        max-height: calc(100vh - 40px);
    }
    .modalHeading h2{
        font-size: 2rem;
    }
    .modalContainer{
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }
    .modalImageMessageContainer h2{
        font-size: 2.2rem;
    }
/* --  Manage Emails --  */
    .unverifiedEmails, .verifiedEmails, .addEmails,
    .sendEmailButtonContainer, .removeEmailButtonContainer, .linkEmailButtonContainer{
        width: 100%;
    }
    .sendEmailButtonContainer .primaryButton,
    .removeEmailButtonContainer .primaryButton,
    .linkEmailButtonContainer .primaryButton{
        width: 50%;
    }
/* --  Upload Modal --  */
    .uploadModal{
        width: 50%;
    }
/* --  Edit Member --  */
    #editUserModal .modalContainer{
        display: block;  
        float: left;
        width: 100%;
        max-height: calc(100% - 50px);
        box-shadow: none;
    }
    #editUserModal .modalContentContainer{
        padding-left: 0;
        padding-right: 0;
    }
    #editUserModal .organizationUserForm{
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }    
    #editUserModal .userRoleContainer{
        width: 100%;
        margin-bottom: 2%;
    }
    #editUserModal .userRoleCheckboxContainer{
        flex-wrap: wrap;
    }
    #editUserModal .imageRadioOption{
        float: left;
        width: 31.33%;
    }
    #editUserModal .shortUserDetails{
        width: 100%;
        margin-left: 0;
    }
    #verifyMemberModal .outputCardContainer{
        width:  100%;
        margin-top: 13px;
    }
    #verifyMemberModalParagraph .outputCardContainer:last-child{
        margin-left: 0;
    }
/*  --  Purchase Content Modal  --  */
    #contentPurchasePaypalModal .containerWidth100.noLeftRightPadding.flexContainerSpaceBetweenFlexStartNoWrap{
        flex-wrap: wrap;
    }
    #contentPurchasePaypalModal .currentCommunityCard{
        width: 50%;
        margin-right: 0;
    }
    .attentionOutput, .contentPurchaseParentAndContentContainer{
        width: 100%;
        margin: 0;
        margin-bottom: 13px;
    }
    .parentAndContentContainer{
        flex-wrap: wrap;
    }
    .attentionOutput .optionContainer{
        margin-left: auto;
        margin-right: auto;
    }
    .purchaseParentPriceAndButtonContainer{
        flex-wrap: wrap;
    }
    #contentPurchaseGoToParentButtonParent{
        margin-top: 13px;
    }
/*  --  Add Subcontent  --  */
    #addSubcontentModal .sortDropdown.newInputLabelContainer{
        width:95%;
        margin-left:2%;
        margin-bottom:0;
    }
    #addSubcontentModal .dropdownSelectionContainer{
        flex-wrap: wrap;
    }
    #addSubcontentModal .dropdownSelectionContainer .inputContainer{
        width: 31.33%;
    }
    #addSubcontentModal .addContentContainer{
        flex-wrap: wrap;
    }    
    #addSubcontentModal .currentSelectedContentList, #addSubcontentModal .currentSelectedContentSubcontentList, #addSubcontentModal .contentSubcontentList{
        width: 100%;
    }    
    #addSubcontentModal .contentListHeading p{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }   
    .currentSelectedContentList .primaryButton,
    .currentSelectedContentSubcontentList .primaryButton{
        width: 100%;
        margin-top: 13px;
    }
/*  --  Create Community / Account   --  */ 
    #createAccountModal #modalContainer,
    #createNewCommunityModal #modalContainer{
        margin-top: 0;
    }   
    #createAccountModal .modalSectionThreeQuater,
    #createNewCommunityModal .modalSectionThreeQuater{
        width: 90%;
        margin-left: 5%;
    }
    .createAccountStepOne,
    .createCommunityStepOne{
        width: 100%;
        margin-left: 0;
    }
    .createAccountStepTwo,
    .createCommunityStepTwo,
    .createCommunityStepThree{
        width: 100%;
        margin-left: 0;
    }  
    .moveRightStepOneAnimation{
        left: -100%;
    }
    .createAccountStepTwo{
        top: 0;
        left: 100%;
    }
    .moveLeftStepTwoAnimation{
        left: 100%;
    }
    .moveRightStepTwoAnimation{
        left: 0;
    }    
    #userRoleDetails .userRoleContainer{
        width: 100%;
    }
    #deleteConfirmationModal .pageLinkModalButtonContainer .clickButton,
    #deleteConfirmationModal .pageLinkModalButtonContainer .actionButton,
    #commentProblemModal .bottomButtonContainer .clickButton,
    #commentProblemModal .bottomButtonContainer .actionButton{
        width: 48%;
    }
    .toolTipExplained{
        width: 80%;
        margin-left: 10%;
    }
    #lessonSettingsModal{
        width: 60%;
    }    
    .modalContentDescription{
        width: 80%;
        margin-left: 10%;
    }
    #blickelErrorModal .pageLink.thirdWidthPageLink, 
    #blickelErrorModal .clickButton.thirdWidthClickButton{
        width: 30%;
    }
/*  --  Lesson Image Upload  --  */
    #imageUploaderModal .imageTextBoxDivsContainer .inputContainer{
        width: 48%;
    }
/*  --  Lesson Audio Upload  --  */
    .audioNameContainer, .audioDescriptionContainer{
        width: 100%;
    }
/*  --  Lesson Video Upload  --  */
    #videoUploaderModal #vimeoIFrame{
        width: 100%;
        margin-left: 0;
    }
/*  --  Lesson Complete  --  */
    #lessonCompleteThreeContent .completeHeader h2{
        font-size: 4rem;
    }
    #lessonCompleteThreeContent .completeImageRow{
        width: 40%;
    }
    #lessonCompleteThreeContent .completeMessage{
        width: 60%;
    }
/*  --  Prerequisite Modal Modal  --  */
    #prerequisiteModal .dropdownSelectionContainer{
        flex-wrap: wrap;
    }
    #prerequisiteModal .dropdownSelectionContainer .inputContainer{
        width: 48%;
    }
    #hasPrerequisiteRightColumn .listRow,
    #isPrerequisiteRightColumn .listRow{
        height: auto;
    }
    #hasPrerequisiteRightColumn .prerequisiteRemoveRowContainer, #hasPrerequisiteRightColumn .prerequisiteContentRowContainer,
    #isPrerequisiteRightColumn .prerequisiteRemoveRowContainer, #isPrerequisiteRightColumn .prerequisiteContentRowContainer{
        width: 10%;
        height: 30px;
    }
    #hasPrerequisiteRightColumn .prerequisiteContentRowContainer img,
    #isPrerequisiteRightColumn .prerequisiteContentRowContainer img{
        width: 20px;
        height: 20px;
    }
    #hasPrerequisiteRightColumn .prerequisiteTitleRowContainer,
    #isPrerequisiteRightColumn .prerequisiteTitleRowContainer{
        width: 80%;
        height: 30px;
    }
    #hasPrerequisiteRightColumn .prerequisiteTypeRowContainer, 
    #isPrerequisiteRightColumn .prerequisiteTypeRowContainer{
        width: 70%;
        margin-top: 5px;
    }
    #hasPrerequisiteRightColumn .prerequisiteValueRowContainer,
    #isPrerequisiteRightColumn .prerequisiteValueRowContainer{
        width: 30%;
        margin-top: 5px;
    }
    .addPrerequisiteButtonContainer .primaryButton{
        width: 100%;
    }
/*  --  Content has Prerequisite Modal  --  */
    .prerequisitesItemContainer .containerWidth100.flexContainerSpaceBetweenCenterNoWrap.noLeftPadding{
        flex-wrap: wrap;
    }
    .prerequisitesItemRightSide{
        width: 100%;
        margin-bottom: 13px;
    }
    .prerequisitesItemLeftSide{
        width: 100%;
    }
    .prerequisitesItemLeftSide .primaryButton{
        width: 50%;
        margin-left: 50%;
    }
}
 @media only screen and (max-width: 600px) {/* Extra small devices (phones, 600px and down) */
/*  --  Old Code Below Move down as it gets updated  --  */
    .cookieMessageContainer{
        height: auto;
        flex-wrap: wrap;
    }
    .cookieMessageContainer p{
        display: block;
        float: left;
        width: 100%;
        height: auto;
    }
    .cookieButtonContainer{
        float: left;
        width: 100%;
        height: auto;
        margin-top: 1%;
    }
    .cookieButtonContainer button{
        margin-left: 0;
    }
    .inputLabel{
        font-size: 1.4rem;
        font-weight: normal;
    }
    .greenButton, .whiteButton, .grayButton, .noClickButton, .secondaryButton, .callToActionButton{ 
        font-size: 1.4rem;
    }
    .tempMessageContainer{
        padding-top: 40px;
    }
    .organizationContainer{
        width: 49%;
        margin-top: 0;
        margin-bottom: 0;
    }
    .organizationProgramContainer{
        padding-left: 0;
        padding-right: 0;
    }
    .currentContent{
        height: calc(100% - 40px);
    }
    .contentAttachmentsSection{
        width: 100%;
    }
    .displayedValueHeader img{
        width: 30px;
        height: 30px;
        margin-left: 12.5px;
        margin-right: 12.5px;
    }
    .displayedValueHeader p{
        width: calc(100% - 60px);
        font-size: 1.8rem;
    }
    .pageLink{
        width: 100%;
    }
    .sectionLinkBlock{
        flex-wrap: wrap;
        width: 50%;
    }
    .sectionBlockContainer{
        margin-top: 0;
    }
    .sectionBlock{
        width: 50%;
        height: auto;
    }
    .sectionLinkBlockHeaderContainerDarkGray p, .sectionLinkBlockHeaderContainerGreen p, .sectionLinkBlockHeaderContainerTan p{
        font-size: 1.6rem;
    }
    .sectionHeaderContainer{
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-top: 0;
        padding-left: 0;
        padding-bottom: 0;
        background-color: #305a30;
    }
    .sectionHeaderContainer h1, .sectionHeaderContainer h2{
        width: 80%;
        text-align: center;
        font-size: 2rem;
        padding-top: 15px;
        color: #F2F2F2;
    }
    .inputErrorContent{
        width: 100%;
        left: 0;
    }
    .contentViewOptionSection{
        width: 100%;
        margin-bottom: 13px;
    }
    .viewProgressButtonContainer{
        width: 100%;
        margin-bottom: 26px;
        margin-top: 13px;
    }
    .viewProgressButtonContainer .secondaryButtonGreen{
        width: 50%;
        margin-left: 50%;
    }
    .viewOptionHeaderIcon{
        width: 30px;
        height: 30px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .reportRadioOptionContainer{
        width: 100%;
    }
    .reportProblemButtonContainer button{
        width: 40%;
    }
    @keyframes reportSent{
        0%{
            top: 150px;
            opacity: 0;
            font-size: 2rem;
        }
        40%{
            top: 30px;
            opacity: 1;
            font-size: 2.4rem;
        }
        60%{
            top: 30px;
            opacity: 1;
            font-size: 2.4rem;
        }
        100%{
            top: -100px;
            opacity: 0;
            font-size: 1.8rem;
        }
    }
    .guestModalContent, .reportProblemContent{
        width: 100%;
        margin-left: 0;
    }
    .guestModalButtonContainer{
        flex-wrap: wrap;
    }
    .guestModalButtonContainer button{
        width: 90%;
        margin-left: 5%;
        margin-bottom: 1%;
    }
    .selectOrganizationContent, .selectClassContent{
        width: 100%;
        height: auto;
        max-height: calc(100% - 20%);
        margin: 15% 0;
    }
    .organizationOptionBox, .classroomOptionBox{
        float: left;
        width: 48%;
        height: 200px;
        margin: 1%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: #ffffff;
    }
    .badLinkMessage .clickButton.halfWidthClickButton.oneButtonCentered{
        width: 80%;
        margin-left: 10%;
    }
    .contentDetailsContainer p, .contentCompletionContainer p{
        float: left;
        width: 95%;
        height: auto;
        margin-left: 2.5%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .iconKey, .contentDocumentContainer{
        width: 100%;
        float: right;
        margin-right: 1%;
    }
    .keyContainer, .documentSectionContainer{
        max-height: 125px;
        overflow: auto;
    }
    .documentSectionContainer{
        max-height: 125px;
    }
/*  --  Old Code Above Move down as it gets updated  --  */
                    
/*  --  General  --  */ 
    h1{
        font-size: 2rem;
    }
    h2{
        font-size: 1.8rem;
    }
    p{
        font-size: 1.6rem;
    }
    .wrapper{
        width: 100%;
        padding-right: 13px;
        padding-left: 13px;
    }
    .pageTopContainer{
        width: 100%;
        position: initial;
        padding-right: 13px;
        padding-left: 13px;
        margin-top: 1%;
        max-height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .goBackContainer, .learnPageContainer{
        width: 49%;
    }
    .dashboardStyleButtonContainer .secondaryButtonGreen{
        width: 48%;
    }
/*  --  Page Tools Code  --  */
    .pageSettingsContainer{
        bottom: 25px;
    }
/*  --  Headers  --  */
    .pageHeader img{
        width: 30px;
        height: 30px;
    }
    .pageHeader h1, .pageHeader h2{
        width: calc(100% - 50px);
        font-size: 2.4rem;
    }
    .sectionHeader img{
        width: 30px;
        height: 30px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .organizationHeaderLogoContainer{
        width: 20%;
        height: 50px;
        margin-left: 0;
    }
    .organizationHeader h2{
        width: 80%;
        height: auto;
    }
    .organizationHeaderLogoContainer img{
        max-height: 45px;
    }
    .organizationHeaderButtonContainer{
        padding-left: 6.5px;
        padding-right: 6.5px;
        justify-content: space-between;
    }
    .organizationHeaderButtonContainer .secondaryButtonRed,
    .organizationHeaderButtonContainer .secondaryButtonGreen,
    .organizationHeaderButtonContainer .ctaButton{
        margin-bottom: 6.5px;
        margin-left: 0;
        width: 48%;
        min-width: auto;
    }
/*  --  Ads  --  */
    .topSpecialContainer{
        height: auto;
        margin-top: 2%;
        margin-bottom: 2%;
    }
    .lessonHeaderSpecialContainer{
        margin-bottom: 2%;
    }
    .whitelistBlickelContainer{
        justify-content: center;
    }
/*  --  Containers  --  */
    .showPasswordContainer{
        width: 100%;
    }
/*  --  Arrow Nav  --  */
    .arrowNavContainer{
        flex-wrap: wrap;
        min-height: 100px;
    }
    #pageDownDiv{
        order: 1;
        width: 50%;
    }
    #pageUpDiv{
        order: 2;
        width: 50%;
    }
    #navButtonsTopContainer{
        order: 3;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
/*  --  Icon Key  --  */
    .iconKeyContainer .cardDetailsCotnainer{
        justify-content: flex-start;
        align-items: stretch;
    }
/*  --  Content Option Overview  --  */
    .contentOverviewContainer{
        padding-left: 0;
        padding-right: 0;
    }
    .contentCardContainer{
        display: none;
    }
    .contentOverviewDetailsContainer{
        padding: 10px;
        padding-bottom: 0;
        border-radius: 3px;
    }
    .contentOverviewContainer .contentOverviewLeftContainer{
        width: 100%;
    }
    .contentOverviewDescriptionContainer{
        min-height: 125px;
    }
    .contentOverviewDescription{
        font-size: 1.4rem;
        height: auto;
        max-height: 190px;
    }
    .readMore{
        width: calc(100% + 20px);
        margin-right: -10px;
    }
    .contentOverviewSubcontentContainer{
        flex-wrap: wrap;
    }
    .contentOverviewSubcontent{
        width: 50%;
        margin-bottom: 5px;
    }
    #contentCompletionContainerDiv{
        flex-wrap: wrap;
    }
    .accordianCurrentGradeContainer{
        width: 100%;
    }
    .accordianCurrentGradeContainer h2{
        font-size: 1.6rem;
    }
/*  --  Content Option Blocks / Lists  --  */
    .stickyCardHeader{
        top: 40px;
    }
    .optionContainer{
        width: 100%;
        height: auto;
        max-width: 600px;
        margin: 0;
        margin-bottom: 26px;
    }
    .option{
        width: 100%;
        margin-left: 0;
    }
    .option:hover, .option:focus-within{
        transform:scale(1);
    }
    .descriptionContainer p{
        font-size: 1.6rem;
    }
    .hoverContainer{
        display: block;
    } 
    .listOptionContainer .title{
        height: 150px;
        border-bottom-left-radius: 0;
    }
    .listOptionContainer .titlePurchasedContainer{
        width: calc(100% - 50px);
    }
    .listOptionContainer .optionContentDetailsContainer,
    .listOptionContainer .progressBarContainer{
        width: 66.66%;
    }
    .listOptionContainer .descriptionContainer{
        width: 100%;
    }  
    .listOptionContainer .optionNameContainer{
        height: 45px;
        overflow: auto;
    }
    .listOptionContainer .optionNameContainer h2{
        font-size: 1.6rem;
    }
    .listOptionContainer .bottomSection{
        width: 100%;
        height: auto;
        flex-wrap: wrap;
    }
    .listOptionContainer .contentOptionCardOptionalButtonContainer{
        width: 100%;
        margin-bottom: 13px;
    }
    .listOptionContainer .optionContentPriceAndButtonContainer{
        width: 100%;
    }
    .listOptionContainer .optionContentPrice,
    .optionContentPrice{
        width: 45%;
        min-width: 45%;
        padding-left: 13px;
    }
    .listOptionContainer .bottomSection .primaryButton, 
    .listOptionContainer .bottomSection .ctaButton{
        width: 50%;
        min-width: 50%;
    }
/*  --  Inputs  --  */
    .lessonInputButtonContainer{
        flex-wrap: wrap;
    }
    .lessonInputButtonContainer .inputContainer{
        width: 100%;
        margin-right: 0;
    }
    .lessonInputButtonContainer .ctaButton.unavailable,
    .lessonInputButtonContainer .ctaButton.redCTAButton,
    .lessonInputButtonContainer .ctaButton{
        width: 40%;
        margin-left: 60%;
        margin-top: 13px;
    }
    .openEndedInfomationContainer{
        flex-wrap: wrap;
    }
    .openEndedInfomationContainer p{
        width: 50%;
        padding-left: 5px;
        text-align: left;
    }
    .openEndedInfomationContainer span{
        width: auto;
        display: initial;
    }
/*  --  Feedback  --  */
    .userMessageContent{
        width: 100%;
        margin-left: 0;
    }
    .userMessageButtonContainer .secondaryButtonRed{
        width: 80%;
    }
/*  --  Modal Css Below  --  */
    .modalButtonContainer .secondaryButtonGreen,
    .modalButtonContainer .secondaryButtonRed,
    .modalButtonContainer .primaryButton,
    .modalButtonContainer .ctaButton,
    #exitTestModal #continueTestModalButton,
    #testInstructionsModal #organizationTestStartButton{
        width: 48%;
        margin: 1%;
    }
/*  --  Manage Emails  --  */
    .unverifiedEmails, .verifiedEmails, .addEmails,
    .sendEmailButtonContainer, .removeEmailButtonContainer, .linkEmailButtonContainer{
        width: 100%;
    }
    .sendEmailButtonContainer .primaryButton,
    .removeEmailButtonContainer .primaryButton,
    .linkEmailButtonContainer .primaryButton{
        width: 100%;
    }
/*  --  Upload Modal  --  */
    .uploadModal{
        width: 60%;
    }
/*  --  Test Modals  --  */
    #submitTestModalButtonContainer, #completeTestModalButtonContainer{
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    #submitTestModalButtonContainer .secondaryButtonGreen,
    #completeTestModalButtonContainer .secondaryButtonGreen{
        width: 48%;
    }
/*  --  Share Content  --  */
    .shareModalOption{
        width: 37%;
    }
    .shareModalOptionContainer{
        padding-left: 2%;
        padding-right: 2%;
        justify-content: space-around;
    }
    .shareModalOutputContainer{
        width: 90%;
        margin-top: 13px;
    }
    #shareContentModal .modalButtonContainer .clickButton.thirdWidthClickButton{
        width: 48%;
    }
    #userEnrollInOrganizationModal .modalSectionFull{
        width: 80%;
        margin-left: 10%;
    }
    .miniModal{
        width: 100%;
    }
/*  --  Purchase Content Modal  --  */
    #contentPurchasePaypalModal .containerWidth100.noLeftRightPadding.flexContainerSpaceBetweenFlexStartNoWrap{
        flex-wrap: wrap;
    }
    .leavePurchaseModalButton{
        width: 50%;
        margin-right: 50%;
    }
    #contentPurchasePaypalModal .currentCommunityCard{
        width: 100%;
        margin-right: 0;
    }
    .parentAndContentContainer{
        flex-wrap: wrap;
    }
    .attentionOutput, .contentPurchaseParentAndContentContainer{
        width: 100%;
        margin: 0;
        margin-bottom: 13px;
    }
    .purchaseParentPriceAndButtonContainer{
        flex-wrap: wrap;
    }
/*  --  Subcontent  --  */
    #addSubcontentModal .contentListHeading p{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #addSubcontentModal .sortDropdown.newInputLabelContainer{
        width:95%;
        margin-left:2.5%;
        margin-bottom:0;
    }
    #addSubcontentModal .dropdownSelectionContainer{
        flex-wrap: wrap;
    }
    #addSubcontentModal #addContentProgramDropdownContainer,
    #addSubcontentModal #addContentCourseDropdownContainer,
    #addSubcontentModal #addContentUnitDropdownContainer,
    #addSubcontentModal #addContentLessonDropdownContainer,
    #addSubcontentModal #addContentTestDropdownContainer{
        width: 48%;
    }
    #addSubcontentModal #addContentUnitDropdownContainer{
        padding-right: 0;
    }
    .currentSelectedContentList .primaryButton, 
    .currentSelectedContentSubcontentList .primaryButton{
        width: 100%;
        margin-top: 13px;
    }
    .modalHeading h2{
        font-size: 2rem;
    }
    .modalContainer{
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }    
/*  --  Login  --  */
    #loginModal .userLoginModalForm .modalSectionHalf.middleHalf,
    #loginModal .userLoginModalForm .actionButton.halfWidthActionButton.oneButtonCentered,
    #loginModal .userLoginModalForm .forgotButtonContainer{
        width: 95%;
        margin-left: 2.5%;
    }    
    .modalImageMessageContainer h2{
        font-size: 2.2rem;
    }
    .organizationOptionBox{
        width: 30%;
    }
    .emailInvitationMessage a{
        color: #305a30;
        font-weight: bold;
        text-decoration: none;
        border-bottom: thin solid #f2f2f2;
    }    
    .emailInvitationMessage a:hover{
        cursor: pointer;
        color: #f2f2f2;
        border-bottom: thin solid #305a30;
    }
    #editUserModal .modalContainer{
        display: block;  
        float: left;
        width: 100%;
        max-height: calc(100% - 50px);
        box-shadow: none;
    }
    #editUserModal .modalContentContainer{
        padding-left: 0;
        padding-right: 0;
    }
    #editUserModal .organizationUserForm{
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }    
    #editUserModal .userRoleContainer{
        width: 100%;
        margin-bottom: 2%;
    }
    #editUserModal .userRoleCheckboxContainer{
        flex-wrap: wrap;
    }    
    #editUserModal .imageRadioOption{
        float: left;
        width: 48%;
    }    
    #editUserModal .shortUserDetails{
        width: 100%;
        margin-left: 0;
    }
    #verifyMemberModal .outputCardContainer{
        width:  100%;
        margin-top: 13px;
    }
    #verifyMemberModalParagraph .outputCardContainer:last-child{
        margin-left: 0;
    }
    #progressModal .progressDetailsContainer{
        float: left;
        width: 100%;
        min-height: 180px;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }
    #lessonSettingsModal{
        width: 100%;
    }    
    .reportRadioOptionContainer,
    .reportCommentRadioOptionContainer{
        width: 48%;   
    }
    #reportProblemModal .thirdWidthClickButton,
    #reportProblemModal .thirdWidthActionButton,
    #duplicateTestConfirmationModal .thirdWidthClickButton,
    #duplicateTestConfirmationModal .thirdWidthActionButton{
        width: 49%;
    }        
    #createAccountModal #modalContainer,
    #createNewCommunityModal #modalContainer{
        margin-top: 0;
    }    
    #createAccountModal .modalSectionThreeQuater,
    #createNewCommunityModal .modalSectionThreeQuater{
        width: 95%;
        margin-left: 2.5%;
    }    
    #createAccountModal .modalSectionHalf,
    #createNewCommunityModal .modalSectionHalf{
        width: 100%;
    }
    .createAccountStepOne,
    .createCommunityStepOne{
        width: 100%;
        margin-left: 0;
    }    
    .createAccountStepTwo,
    .createCommunityStepTwo,
    .createCommunityStepThree{
        width: 100%;
        margin-left: 0;
    }
    #welcomeModal .modalBottomMessage p{
        font-size: 2rem;
    }
    #addParentContentButtonDiv .halfWidthClickButton,
    #addSubcontentModal .halfWidthActionButton{
        width: 100%;
        margin-left: 0;
    }
    #deleteConfirmationModal .pageLinkModalButtonContainer .clickButton,
    #deleteConfirmationModal .pageLinkModalButtonContainer .actionButton,
    #commentProblemModal .bottomButtonContainer .clickButton,
    #commentProblemModal .bottomButtonContainer .actionButton{
        width: 48%;
    }
    .toolTipExplained{
        width: 80%;
        margin-left: 10%;
    }
    #newCommunityModal .modalButtonContainer{
        flex-wrap: wrap;
    }
    #newCommunityModal .thirdWidthClickButton{
        width: 80%;
        margin-bottom: 10px;
    }
    .modalContentDescription{
        width: 90%;
        margin-left: 5%;
    }
    #blickelErrorModal .modalButtonContainer.pageLinkModalButtonContainer{
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    #blickelErrorModal .pageLink.thirdWidthPageLink, 
    #blickelErrorModal .clickButton.thirdWidthClickButton{
        width: 49%;
        margin-right: 1%;
        margin-bottom: 10px;
    }
/*  --  subcontent Modal  --  */
    #addParentContentButtonDiv .primaryButton{
        width: 50%;
        margin-left: 25%;
    }
/*  --  Lesson Image Upload  --  */
    #imageUploaderModal #lessonImageFileInput,
    #imageUploaderModal .fileInputMessage,
    #imageUploaderModal #imageContentContainer{
        width: 100%;
    }
    #imageUploaderModal .modalTopButtonContainer .secondaryButtonRed,
    #imageUploaderModal .modalTopButtonContainer .primaryButton{
        width: 45%;
     }
    #imageUploaderModal .imageTextBoxDivsContainer{
        width: 100%;
        margin-left: 0;
    }
    #imageUploaderModal .imageTextBoxDivsContainer .inputContainer{
        width: 48%;
    }
    #imageUploaderModal .radioOptionContainer33{
        width: 50%;
    }
    #imageUploaderModal #imageContentContainer .inputContainer{
        width: 100%;
    }
    #imageUploaderModal #imageContentContainer .secondaryButtonGreen{
        width: 70%;
        margin-left: 30%;
    }
    #imageUploaderModal #textBoxButtonContainer .textBoxButton{
        width: 50%;
    }
/*  --  Lesson Audio Upload  --  */
    #audioUploaderModal #closeModalContainer .secondaryButtonRed, 
    #audioUploaderModal #closeModalContainer .secondaryButtonGreen, 
    #audioUploaderModal #closeModalContainer .primaryButton{
        width: 45%;
    }
    #audioContentContainer input[type="file"]{
        width: 100%;
    }
    .audioNameContainer, .audioDescriptionContainer{
        width: 100%;
    }
    #audioUploaderModal .containerWidth100.flexContainerSpaceBetweenCenterNoWrap{
        flex-wrap: wrap;
    }
    #audioUploaderModal .sampleAudioContainer{
        width: 100%;
        margin-right: 0;
    }
    #audioUploaderModal .containerWidth100.flexContainerSpaceBetweenCenterNoWrap .secondaryButtonGreen{
        width: 70%;
        margin-left: 30%;
        margin-top: 13px;
    }
/*  --  Lesson Video Upload  --  */
    #videoUploaderModal #closeModalContainer .secondaryButtonRed, 
    #videoUploaderModal #closeModalContainer .secondaryButtonGreen, 
    #videoUploaderModal #closeModalContainer .primaryButton{
        width: 45%;
    }
    .videoStartAtContainer, .videoStopAtContainer{
        width: 100%;
    }
    #videoContentContainer .secondaryButtonGreen{
        width: 70%;
        margin-left: 30%;
        margin-bottom: 13px;
    }
    #videoUploaderModal .sampleVideo{
        width: 100%;
    }
    #videoUploaderModal #vimeoIFrame{
        width: 100%;
        margin-left: 0;
    }
/*  --  Lesson Complete  --  */
    #lessonCompleteThreeContent .modalButtons{
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    #lessonCompleteThreeContent .lessonCompleteAnimationContainer{
        flex-wrap: wrap;
    }
    #lessonCompleteThreeContent .completeHeader h2{
        font-size: 4rem;
    }
    #lessonCompleteThreeContent .completeImageRow,
    #lessonCompleteThreeContent .completeMessage{
        width: 100%;
    }
    .beforeIcon{
        animation: GrowIconOneSmall 1.25s 1;
        animation-fill-mode: forwards;
        animation-delay: 0.1s;
    }
    .afterIcon{
        animation: GrowIconTwoSmall 1.25s 1;
        animation-fill-mode: forwards;
        animation-delay: 0.1s;
    }
/*  --  Test Complete  --  */
    .submitTestTestPart{
        width: 15%;
    }
    .submitTestPartGrade{
        font-size: 1.4rem;
    }
/*  --  Lesson Complete Modal  --  */
    #lessonCompleteThreeContent .modalButtons .secondaryButtonGreen{
        margin: 1%;
        width: 48%;
    }
/*  --  Upgrade Community Modal  --  */
    #upgradeCommunityStepOne .ctaButton{
        width: 100%;
        margin-left: 0;
    }
/*  --  Add Subcontent Modal  --  */
    #addSubcontentModal .addContentContainer{
        flex-wrap: wrap;
    }
    #addSubcontentModal .leftSide, #addSubcontentModal #addContentRightColumnContainer{
        width: 100% !important;
    }
/*  --  Create Prerequisite Modal  --  */
    #prerequisiteModal .dropdownSelectionContainer{
        flex-wrap: wrap;
    }
    #prerequisiteModal .dropdownSelectionContainer .inputContainer{
        width: 48%;
    }
    .addPrerequisiteButtonContainer{
        flex-wrap: wrap;
    }
    .addPrerequisiteButtonContainerLeftSide,
    .addPrerequisiteButtonContainerRightSide{
        width: 100%;
    }
    #hasPrerequisiteRightColumn .listRow,
    #isPrerequisiteRightColumn .listRow{
        height: auto;
    }
    #hasPrerequisiteRightColumn .prerequisiteRemoveRowContainer, #hasPrerequisiteRightColumn .prerequisiteContentRowContainer,
    #isPrerequisiteRightColumn .prerequisiteRemoveRowContainer, #isPrerequisiteRightColumn .prerequisiteContentRowContainer{
        width: 10%;
        height: 30px;
    }
    #hasPrerequisiteRightColumn .prerequisiteContentRowContainer img,
    #isPrerequisiteRightColumn .prerequisiteContentRowContainer img{
        width: 20px;
        height: 20px;
    }
    #hasPrerequisiteRightColumn .prerequisiteTitleRowContainer,
    #isPrerequisiteRightColumn .prerequisiteTitleRowContainer{
        width: 80%;
        height: 30px;
    }
    #hasPrerequisiteRightColumn .prerequisiteTypeRowContainer, 
    #isPrerequisiteRightColumn .prerequisiteTypeRowContainer{
        width: 70%;
        margin-top: 5px;
    }
    #hasPrerequisiteRightColumn .prerequisiteValueRowContainer,
    #isPrerequisiteRightColumn .prerequisiteValueRowContainer{
        width: 30%;
        margin-top: 5px;
    }
    .addPrerequisiteButtonContainer .primaryButton{
        width: 100%;
    }
/*  --  Content has Prerequisite Modal  --  */
    .remainingPrerequisitesItemProgress p{
        width: 100%;
        text-align: center;
        margin-bottom: 13px;
    }
    .prerequisiteProgressBarContainer{
        width: 100%;
    }
    .prerequisitesItemContainer .containerWidth100.flexContainerSpaceBetweenCenterNoWrap.noLeftPadding{
        flex-wrap: wrap;
    }
    .prerequisitesItemRightSide{
        width: 100%;
        margin-bottom: 13px;
    }
    .prerequisitesItemLeftSide{
        width: 100%;
    }
    .prerequisitesItemLeftSide .primaryButton{
        width: 50%;
        margin-left: 50%;
    }
/*  --  Organization Login Modal  --  */
    .selectOrganizationContainer .cardContainer{
        width: 48%;
    }
    .selectOrganizationContainer .cardHeader{
        padding: 0;
    }
    .selectOrganizationContainer p{
        width: 100%;
    }
    .selectOrganizationContainer img{
        max-width: 100%;
        max-height: 100%;
    }
/*  --  Animations  --  */
    .flyInBottomAnimationContent h2{
        font-size: 2.4rem;
    }
    .loadingModal .loadingContent{
        margin-top: 40%;
        width: 50%;
        margin-left: 25%;
    }
}
@media only screen and (max-width: 400px) {/* Super Extra small devices (phones, 400px and down) */
/*  --  Page Tools Code  --  */
    .pageSettingsContainer{
        bottom: 25px;
    }
/*  --  Headers Code  --  */
    .organizationHeaderButtonContainer .secondaryButtonRed,
    .organizationHeaderButtonContainer .ctaButton{
        margin-bottom: 13px;
        margin-right: 0;
    }
/*  --  General  --  */ 
    .dashboardStyleButtonContainer .secondaryButtonGreen{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
/*  --  Inputs  --  */ 
    .gradedPoints span{
        padding-left: 5px;
        padding-right: 5px;
    }
/*  --  View progress  --  */ 
    .viewProgressButtonContainer .secondaryButtonGreen{
        width: 100%;
        margin-left: 0;
    }
/*  --  Option block / list  --  */
    .optionContainer .bottomSection{
        height: auto;
    }
    .optionContainer .optionContentPriceAndButtonContainer .optionContentPrice{
        width: 100%;
    }
    .optionContainer .optionContentPriceAndButtonContainer .ctaButton{
        margin-top: 13px;
        width: 100%;
        max-width: 100%;
    }
    .listOptionContainer .optionContentPriceAndButtonContainer .optionContentPrice{
        width: 45%;
    }
    .listOptionContainer .contentOptionCardOptionalButtonContainer{
        width: 100%;
    }
    .bottomSection .primaryButton{
        width: 80%;
    }
/*  --  Inputs  --  */
    .lessonInputButtonContainer .ctaButton.unavailable,
    .lessonInputButtonContainer .ctaButton.redCTAButton,
    .lessonInputButtonContainer .ctaButton{
        width: 60%;
        margin-left: 40%;
        margin-top: 13px;
    }
/*  --  Modal Css Below  --  */
/*  --  set modal buttons to full width  --  */
    .modalButtonContainer,
    .modalTopButtonContainer{
        flex-wrap: wrap;
    }
    .modalButtonContainer .secondaryButtonGreen, 
    .modalButtonContainer .secondaryButtonRed, 
    .modalButtonContainer .primaryButton, 
    .modalButtonContainer .ctaButton, 
    #exitTestModal #continueTestModalButton, 
    #testInstructionsModal #organizationTestStartButton,
    #blickelErrorModal .modalButtonContainer .secondaryButtonGreen, 
    #blickelErrorModal .modalButtonContainer .secondaryButtonRed,
    #imageUploaderModal .modalTopButtonContainer .secondaryButtonRed, 
    #imageUploaderModal .modalTopButtonContainer .primaryButton,
    #audioUploaderModal #closeModalContainer .secondaryButtonRed, 
    #audioUploaderModal #closeModalContainer .secondaryButtonGreen, 
    #audioUploaderModal #closeModalContainer .primaryButton,
    #videoUploaderModal #closeModalContainer .secondaryButtonRed, 
    #videoUploaderModal #closeModalContainer .secondaryButtonGreen, 
    #videoUploaderModal #closeModalContainer .primaryButton{
        width: 100%;
    }
/*  --  add whitespace for modal buttons that need it  --  */
    #imageUploaderModal .modalTopButtonContainer .secondaryButtonRed, 
    #imageUploaderModal .modalTopButtonContainer .primaryButton,
    #audioUploaderModal #closeModalContainer .secondaryButtonRed, 
    #audioUploaderModal #closeModalContainer .secondaryButtonGreen, 
    #audioUploaderModal #closeModalContainer .primaryButton,
    #videoUploaderModal #closeModalContainer .secondaryButtonRed, 
    #videoUploaderModal #closeModalContainer .secondaryButtonGreen, 
    #videoUploaderModal #closeModalContainer .primaryButton{
        margin: 1%;
    }
/*  --  Manage Emails  --  */
    .sendEmailButtonContainer .primaryButton,
    .removeEmailButtonContainer .primaryButton,
    .linkEmailButtonContainer .primaryButton{
        width: 100%;
    }
    #manageMemberEmailsModal .modalMessage{
        padding: 0;
    }
/*  --  Login  --  */
    #loginModal .textOnlyALink{
        margin-bottom: 13px;
    }
/*  --  Create Account  --  */
    #createAccountModal #blickelNextBackButton{
        width: 50%;
    }
    #createAccountStepOne .secondaryButtonGreen{
        margin-left: 50%;
    }
    #createAccountModal .cookisTermsContainer{
        flex-wrap: wrap;
    }
    #createAccountModal .cookisTermsContainer .secondaryButtonGreen{
        width: 100%;
    }
    #createAccountModal .cookisTermsContainer .secondaryButtonGreen:last-child{
        margin-top: 13px;
    }
/*  --  Create Community  --  */
    #createNewCommunityModal #blickelNextBackButton{
        width: 50%;
    }
    #createCommunityStepOne .secondaryButtonGreen{
        margin-left: 50%;
    }
/*  --  Upload Modal  --  */
    .uploadModal{
        width: 100%;
        max-width: 400px;
    }
    .uploadModal .uploadContent{
        max-width: 400px;
    }
/*  --  Lesson Settings Modal  --  */
    #lessonSettingsModal .animations, 
    #lessonSettingsModal .viewTypes{
        width:100%;
        padding-left: 0;
        padding-right: 0;
    }
    #lessonSettingsModal .textSizeBox{
        flex-wrap: wrap;
    }
    #lessonSettingsModal .textSizeBox .secondaryButtonGreen{
        width: 100%;
    }
    #lessonSettingsModal .textSizeBox p{
        margin-top: 6.5px;
        margin-bottom: 6.5px;
    }
/*  --  Purchase Content Modal  --  */
    #contentPurchasePaypalModal .containerWidth100.noLeftRightPadding.flexContainerSpaceBetweenFlexStartNoWrap{
        flex-wrap: wrap;
    }
    #contentPurchasePaypalModal .leavePurchaseModalButton{
        width: 100%;
        margin-right: 0;
    }
    #contentPurchasePaypalModal .currentCommunityCard{
        width: 100%;
        margin-right: 0;
    }
    .attentionOutput, .contentPurchaseParentAndContentContainer{
        width: 100%;
        margin: 0;
        margin-bottom: 13px;
    }
    .attentionOutput .bottomSection{
        height: auto;
    }
    .purchaseParentPriceAndButtonContainer, .optionContentPriceAndButtonContainer{
        flex-wrap: wrap;
        height: auto;
    }
    #contentPurchaseGoToParentButtonParent{
        width: 100%;
        margin-left: 0;
        margin-top: 13px;
        max-width: 100%;
    }
/*  --  Lesson Complete Modal  --  */
    #lessonCompleteThreeContent .modalButtons .secondaryButtonGreen{
        margin: 1%;
        width: 48%;
    }
/*  --  Lesson Image Upload  --  */
    #imageUploaderModal #textBoxDetailsContainer .inputContainer{
        width: 100%;
    }
    #imageUploaderModal #imageContentContainer .secondaryButtonGreen{
        width: 100%;
        margin-left: 0;
    }
/*  --  subcontent Modal  --  */
    #addParentContentButtonDiv .primaryButton{
        width: 100%;
        margin-left: 0;
    }
/*  --  Create Prerequisite Modal  --  */
    #prerequisiteModal .dropdownSelectionContainer{
        flex-wrap: wrap;
    }
    #prerequisiteModal .dropdownSelectionContainer .inputContainer{
        width: 48%;
    }
    .addPrerequisiteButtonContainer{
        flex-wrap: wrap;
    }
    .addPrerequisiteButtonContainerLeftSide,
    .addPrerequisiteButtonContainerRightSide{
        width: 100%;
    }
    #hasPrerequisiteRightColumn .listRow,
    #isPrerequisiteRightColumn .listRow{
        height: auto;
    }
    #hasPrerequisiteRightColumn .prerequisiteRemoveRowContainer, #hasPrerequisiteRightColumn .prerequisiteContentRowContainer,
    #isPrerequisiteRightColumn .prerequisiteRemoveRowContainer, #isPrerequisiteRightColumn .prerequisiteContentRowContainer{
        width: 10%;
        height: 30px;
    }
    #hasPrerequisiteRightColumn .prerequisiteContentRowContainer img,
    #isPrerequisiteRightColumn .prerequisiteContentRowContainer img{
        width: 20px;
        height: 20px;
    }
    #hasPrerequisiteRightColumn .prerequisiteTitleRowContainer,
    #isPrerequisiteRightColumn .prerequisiteTitleRowContainer{
        width: 80%;
        height: 30px;
    }
    #hasPrerequisiteRightColumn .prerequisiteTypeRowContainer, 
    #isPrerequisiteRightColumn .prerequisiteTypeRowContainer{
        width: 70%;
        margin-top: 5px;
    }
    #hasPrerequisiteRightColumn .prerequisiteValueRowContainer,
    #isPrerequisiteRightColumn .prerequisiteValueRowContainer{
        width: 30%;
        margin-top: 5px;
    }
/*  --  Content has Prerequisite Modal  --  */
    .prerequisitesItemLeftSide .primaryButton{
        width: 100%;
        margin-left: 0;
    }
/*  --  Animations  --  */
    .flyInBottomAnimationContent h2{
        font-size: 2.4rem;
    }
    .loadingModal .loadingContent{
        margin-top: 40%;
        width: 80%;
        margin-left: 10%;
    }
}
@media only screen and (max-height: 550px) {/* phone flipped sideways */
    .modalContainer{
        height: 100%;
        max-height: 100%;
        margin-top: 0;
    }
}
/*  --  Screen dependent animations  --  */
@keyframes moveLeftToCuurentStep600{
    0%{
        left: 100%;
    }
    100%{ 
        left: 0; 
    }
}
@keyframes moveLeftToCuurentStepStepThree600{
    0%{
        left: 100%;
    }
    100%{ 
        left: 0; 
    }
}
@keyframes moveLeftFromCurrentStep600{
    0%{
        left: 0;
    }
    100%{ 
        left: -100%; 
    }
}
@keyframes moveRightToCurrentStep600{
    from{
        left: -100%;
    }
    to{ 
        left: 0; 
    }
}
@keyframes moveRightFromCurrentStep600{
    from{
        left: 0;
    }
    to{ 
        left: 100%; 
    }
}