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

#header{
    min-height: 80px;
}
header{
    float: left;
    width: 100%;
    height: auto;
    z-index: 900;
    position: sticky;
    top: 0;
    transition: top 0.3s; 
    transform-style: preserve-3d;
}
.desktopHeaderContainer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
}
.header{
    float: left;
    width: 100%;
    height: 40px;
}
header a{
    text-decoration: none;
}
.headerImageContainer{
    float: left;
    width: 16.66%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
	background-color: #fdfdfd;
}
.headerImageContainer:hover{
    cursor: pointer;
}
.headerImageContainer img{
    display: block;
    float: left;
    width: 90%;
    height: auto;
    max-height: 30px;
}
.headerMenuLinksContainer{
    float: right;
    width: 83.34%;
    height: 40px;
    background-color: #305a30;
}
.headerMenuLink{
    float: left;
    width: 20%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
	border-bottom: 3px solid transparent;
}
.headerMenuLink:hover,
.headerMenuLink:focus{
    cursor: pointer;
	border-bottom: 3px solid #305a30;
	background-color: #fdfdfd;
}
.headerMenuLink img{
    display: block;
    width: 25px;
    height: 25px;
    margin-left: 10px;
    -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%);
}
.headerMenuLink:hover img,
.headerMenuLink:focus img{
    -webkit-filter: invert(29%) sepia(40%) saturate(573%) hue-rotate(71deg) brightness(90%) contrast(90%);
    filter: invert(29%) sepia(40%) saturate(573%) hue-rotate(71deg) brightness(90%) contrast(90%);
}
.headerMenuLink p{
    float: left;
    width: calc(100% - 35px);
    height: auto;
    color: #fdfdfd;
    padding-left: 10px;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.headerMenuLink:hover p,
.headerMenuLink:focus p{
	color: #020a00;
}
/* -- Icon Only -- */
.iconOnly{
    width: 100%;
    justify-content: center;
}
.iconOnly img{
    width: 90%;
    margin-left: 5%;
}
/* -- Create Account -- */
#headerLinkCreateAccountDiv{
    background-color: #056c9b;
}
#headerLinkCreateAccountDiv:hover,
#headerLinkCreateAccountDiv:focus{
    background-color: #fdfdfd;
}
/* -- Recent Content -- */
.recentContentContainer{
    float: left;
    width: 20%;
    height: 40px;
    position: relative;
}
.recentContentLink{
    width: 100%;
}
.recentContentLink span{
    width: 13px;
    height: auto;
    margin-right: 13px;
	display:inline-block;
	transform: rotate(90deg);
	transition:transform 0.2s;
    color: #fdfdfd;
}
.recentContentContainer:hover,
.recentContentContainer:focus{
    background-color: #fdfdfd;
}
.recentContentContainer:hover img,
.recentContentContainer:focus img{
    filter: none;
    -webkit-filter: none;
}
.recentContentContainer:hover p,
.recentContentContainer:focus p{
    color: #020a00;
}
.recentContentContainer:hover span,
.recentContentContainer:focus span{
    background-color: #fdfdfd;
    color: #020a00;
	-webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.recentContentContainer:focus-within .headerMenuLinkOptionsContainer.recentContentOptions{
    display: block;
}
/* -- 3 Dots Menu -- */
.threeDotsContainer{
    float: left;
    width: 20%;
    height: 40px;
    position: relative;
    z-index: 500;
}
.threeDotsContainerGuest{
    float: left;
    width: 20%;
    height: 40px;
    position: relative;
    z-index: 500;
    margin-left: 20%;
}
.headerMenuLinkOptionsContainer{
    position: absolute;
    z-index: 500;
    display: block;
    float: left;
    width: 100%;
    height: auto;
    top: 40px;
    right: 0;
}
.headerMenuLinkOption{
    float: left;
    width: 100%;
    height: auto;
    min-height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #9C9C9C;
	border-bottom: 3px solid #333333;
}
.headerMenuLinkOption img{
    display: block;
    width: 25px;
    height: 25px;
    margin-left: 10px;
    -webkit-filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(247%) hue-rotate(333deg) brightness(91%) contrast(106%);
    filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(247%) hue-rotate(333deg) brightness(91%) contrast(106%);
}
.headerMenuLinkOption p{
    width: 80%;
    padding-left: 10px;
    padding-right: 5px;
    font-size: 1.4rem;
}
.headerMenuLinkOption:hover,
.headerMenuLinkOption:focus{
    cursor: pointer;
	background-color: #fdfdfd;
}
.recentContentOptions,
.threeDotsOptions{
    display: none;
}
.recentContentContainer:hover .headerMenuLinkOptionsContainer, .recentContentContainer:focus-within .headerMenuLinkOptionsContainer,
.threeDotsContainer:hover .headerMenuLinkOptionsContainer, .threeDotsContainer:focus-within .headerMenuLinkOptionsContainer,
.threeDotsContainerGuest:hover .headerMenuLinkOptionsContainer, .threeDotsContainerGuest:focus-within .headerMenuLinkOptionsContainer{
    display: block;
}
.programLink,
.courseLink,
.unitLink,
.lessonLink{
    background-color: #999999;
    color: #020a00;
}

.menuLinkOptionsContainer img{
    -webkit-filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(247%) hue-rotate(333deg) brightness(91%) contrast(106%);
    filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(247%) hue-rotate(333deg) brightness(91%) contrast(106%);
}

#menuDropdownSection .unitLink:hover p,
#menuDropdownSection .unitLink:focus p{
    color: #020a00;
}

.threeDotsOptions{
    width: 100%;
    right: 0;
}

.threeDotsOptions .headerMenuLinkOption{
    border-bottom: none;
}

.threeDotsContainer:hover #threeDotsMenuDiv{
    display: block;
}
/* -- Account Type Headers -- */
.accountHeader{
    display: block;
    float: left;
    width: 83.34%;
    height: 40px;
    position: sticky;
    top: 40px;
    transition: top 0.3s; 
    transform-style: preserve-3d;
}
.executiveMenu, .contentAdministratorMenu, .contentCreatorMenu,
.administratorMenu, .educatorMenu, .tutorMenu{
    background-color: #333333;
}
.accountTypeHeaderSection{
    float: left;
    width: 20%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.accountTypeHeaderSection img{
    display: block;
    float: left;
    width: 25px;
    height: 25px;
    -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%);
}
.accountTypeHeaderSection p{
    float: left;
    width: auto;
    height: auto;
    padding-left: 10px;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.accountMenuLinksContainer{
    float: left;
    width: 80%;
    height: 40px;
}
.menuLinkContainer{
    float: left;
    width: 25%;
    height: 40px;
}
.menuLink{
    float: left;
    width: 100%;
    height: 40px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 3px solid transparent;
}
.menuLink:hover, .menuLink:focus{
    cursor: pointer;
}
.menuLink img{
    display: block;
    width: 25px;
    height: 25px;
    margin-left: 10px;
    -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%);
}
.menuLink p{
    width: calc(100% - 35px);
    font-size: 1.4rem;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menuLink span{
    width: 13px;
    height: auto;
    margin-right: 13px;
	display:inline-block;
	transform: rotate(90deg);
	transition:transform 0.2s;
    color: #fdfdfd;
}
.menuLinkContainer:hover span,
.menuLinkContainer:focus span{
	-webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.organizationMenu, .analyticsMenu, .createMenu, .editMenu{
    position: relative;   
}
.menuLinkOptionsContainer{
    position: absolute;
    z-index: 10;
    float: left;
    width: 100%;
    height: auto;
    top: 40px;
    left: 0;
}
#accountTypeOrganizationMenuDiv:hover #organizationMenuLinkDivContainer, #accountTypeOrganizationMenuDiv:focus-within #organizationMenuLinkDivContainer,
#accountTypeAnalyticsMenuDiv:hover #analyticsMenuLinkDivContainer, #accountTypeAnalyticsMenuDiv:focus-within #analyticsMenuLinkDivContainer,
#accountTypeCreateContentMenuDiv:hover #createContentMenuLinkDivContainer, #accountTypeCreateContentMenuDiv:focus-within #createContentMenuLinkDivContainer,
#accountTypeEditContentMenuDiv:hover #editContentMenuLinkDivContainer, #accountTypeEditContentMenuDiv:focus-within #editContentMenuLinkDivContainer{
	display: block !important;
}
#organizationMenuLinkDivContainer:hover, #analyticsMenuLinkDivContainer:hover, #organizationMenuLinkDivContainer:focus, #analyticsMenuLinkDivContainer:focus,
#createContentMenuLinkDivContainer:hover, #editContentMenuLinkDivContainer:hover, #createContentMenuLinkDivContainer:focus, #editContentMenuLinkDivContainer:focus{
    cursor: pointer;
}
.menuLinkOption{
    float: left;
    width: 100%;
    height: auto;
    min-height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #9C9C9C;
    border-bottom: 3px solid #333333;
}
.menuLinkOption:hover,
.menuLinkOption:focus{
    cursor: pointer;
	background-color: #fdfdfd;
}
.menuLinkOption img{
    display: block;
    width: 25px;
    height: 25px;
    margin-left: 10px;
}
.menuLinkOption:hover img,
.menuLinkOption:focus img{
    -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%);
}
.menuLinkOption p{
    width: 80%;
    padding-left: 10px;
    padding-right: 5px;
    font-size: 1.4rem;
}
.executiveMenu .accountTypeHeaderSection, 
.executiveMenu .menuLink p,
.contentAdministratorMenu .accountTypeHeaderSection, 
.contentAdministratorMenu .menuLink p,
.contentCreatorMenu .accountTypeHeaderSection, 
.contentCreatorMenu .menuLink p,
.administratorMenu .accountTypeHeaderSection, 
.administratorMenu .menuLink p,
.educatorMenu .accountTypeHeaderSection, 
.educatorMenu .menuLink p,
.tutorMenu .accountTypeHeaderSection, 
.tutorMenu .menuLink p{
    color: #fdfdfd;
}
#organizationMenuLinkDivContainer .menuLinkOption,
#analyticsMenuLinkDivContainer .menuLinkOption,
#createContentMenuLinkDivContainer .menuLinkOption, 
#editContentMenuLinkDivContainer .menuLinkOption{
	background-color: #999999;
	color: #030f00;
}
#organizationMenuLinkDivContainer .menuLinkOption:hover,
#organizationMenuLinkDivContainer .menuLinkOption:focus{
	cursor: pointer;
	background-color: #4f4c4d;
	color: #fdfdfd;
}
#analyticsMenuLinkDivContainer .menuLinkOption:hover,
#analyticsMenuLinkDivContainer .menuLinkOption:focus{
	cursor: pointer;
	background-color: #b9baa3;
}
#analyticsMenuLinkDivContainer .menuLinkOption:hover img,
#analyticsMenuLinkDivContainer .menuLinkOption:focus img{
    -webkit-filter: brightness(0) saturate(100%);
    filter: brightness(0) saturate(100%);
}
#createContentMenuLinkDivContainer .menuLinkOption:hover, #editContentMenuLinkDivContainer .menuLinkOption:hover,
#createContentMenuLinkDivContainer .menuLinkOption:focus, #editContentMenuLinkDivContainer .menuLinkOption:focus{
	cursor: pointer;
	background-color: #305a30;
	color: #fdfdfd;
}
/* -- Hot to use Blickel -- */
.howToUseBlickelHeaderSection{
    float: right;
    width: 16.66%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #056c9b;
}
.howToUseBlickelHeaderSection:hover, .howToUseBlickelHeaderSection:focus{
    cursor: pointer;
    background-color: #045174;
}
.howToUseBlickelHeaderSection img{
    display: block;
    float: left;
    width: 25px;
    height: 25px;
    -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%);
}
.howToUseBlickelHeaderSection:hover img,
.howToUseBlickelHeaderSection:focus img{
    -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%);
}
.howToUseBlickelHeaderSection p{
    float: left;
    width: auto;
    height: auto;
    padding-left: 10px;
    padding-right: 5px;
    font-size: 1.4rem;
    color: #fdfdfd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* mobile */

.mobileHeaderContainer{
    float: left;
    width: 100%;
    height: 40px;
}
    
.mobileHeaderImage{
    float: left;
    width: 50%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
	background-color: #fdfdfd;
}

.mobileHeaderImage img{
    display: block;
    float: left;
    width: 90%;
    height: auto;
    max-height: 30px;
}

.mobileMenuContainer{
    float: left;
    width: 70%;
    height: 40px;
}

#mobileHeaderLinkThreeDotsDiv:hover{
    cursor: pointer;
}
    
.mobileMenu{
    float: left;
    width: 50%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #305a30;
}
    
.mobileMenu img{
    display: block;
    width: 20%;
    height: auto;
    max-width: 30px;
    max-height: 30px;
    margin-left: 10px;
}
    
.mobileMenuDropdownContainer{/* main dropdown menu */
    float: left;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 40px);
    overflow: auto;
    display: block;
}
    
.mobileMenuItem{
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #999999;
}
    
.mobileMenuItem:hover{
    cursor: pointer;
    background-color: #fdfdfd;
}
    
.mobileMenuItem img{
    display: block;
    width: 20%;
    height: auto;
    max-width: 30px;
    max-height: 30px;
    margin-left: 10px;
    -webkit-filter: brightness(0) saturate(100%);
    filter: brightness(0) saturate(100%);
}

.mobileMenuItem p{
    float: left;
    width: auto;
    height: auto;
    padding-left: 10px;
    color: #020a00;
}
    
.mobileMenuItemDropdown{
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    padding-right: 10px;
    justify-content: flex-start;
    align-items: center;
    background-color: #999999;
}

.mobileMenuItemDropdown img{
    display: block;
    width: 20%;
    height: auto;
    max-width: 30px;
    max-height: 30px;
    margin-left: 10px;
    -webkit-filter: brightness(0) saturate(100%);
    filter: brightness(0) saturate(100%);
}

.mobileMenuItemDropdown p{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 10px;
}

.mobileMenuItemDropdown p span{
    float: right;
}

#mobileThreeDotsMenuDiv .headerMenuLinkOption.notificationListItem{
    border-bottom: 3px solid #f2f2f2;
}
#mobileThreeDotsMenuDiv .headerMenuLinkOption.notificationListItem:focus, #mobileThreeDotsMenuDiv .headerMenuLinkOption.notificationListItem:active{
    background-color: #fdfdfd;
    border-bottom: 3px solid #ffcc33;
}

.closedArrow{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition:transform 0.2s;
}

.openArrow{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition:transform 0.2s;
}

.mobileMenuItemDropdown:hover{
    cursor: pointer;
}

.mobileMenu.iconOnly img{
    -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%);
} 

.mobileExecutiveMenu .mobileMenuItemDropdown,
.mobileContentAdministratorMenu .mobileMenuItemDropdown,
.mobileAdministratorMenu .mobileMenuItemDropdown,
.mobileContentCreatorMenu .mobileMenuItemDropdown,
.mobileEducatorMenu .mobileMenuItemDropdown,
.mobileTutorMenu .mobileMenuItemDropdown{
    background-color: #333333;
}
.mobileExecutiveMenu img,
.mobileContentAdministratorMenu img,
.mobileAdministratorMenu img,
.mobileContentCreatorMenu img,
.mobileEducatorMenu img,
.mobileTutorMenu img{
    -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%);
}
.mobileExecutiveMenu .mobileMenuDropdownItem img,
.mobileContentAdministratorMenu .mobileMenuDropdownItem img,
.mobileAdministratorMenu .mobileMenuDropdownItem img,
.mobileContentCreatorMenu .mobileMenuDropdownItem img,
.mobileEducatorMenu .mobileMenuDropdownItem img,
.mobileTutorMenu .mobileMenuDropdownItem img{
    -webkit-filter: brightness(0) saturate(100%);
    filter: brightness(0) saturate(100%);
}
    
.mobileExecutiveMenu .mobileMenuItemDropdown p,
.mobileExecutiveMenu .mobileMenuItemDropdown span,
.mobileContentAdministratorMenu .mobileMenuItemDropdown p,
.mobileContentAdministratorMenu .mobileMenuItemDropdown span,
.mobileContentCreatorMenu .mobileMenuItemDropdown p,
.mobileContentCreatorMenu .mobileMenuItemDropdown span,
.mobileEducatorMenu .mobileMenuItemDropdown p,
.mobileEducatorMenu .mobileMenuItemDropdown span,
.mobileTutorMenu .mobileMenuItemDropdown p,
.mobileTutorMenu .mobileMenuItemDropdown span{
    color: #fdfdfd;
}

.mobileOrganizationMenu, .mobileAnalyticsMenu, .mobileCreateContentMenu, .mobileEditContentMenu{
	float: left;
	width: 100%;
	height: auto;
}
    
.mobileMenuItemDropdownContainer{/* holds submenu dropdowns */
    float: left;
    width: 100%;
    height: auto;
    background-color: #999999;
}

#mobileRecentContentMenuDiv{
    background-color: #999999;
}
    
.mobileMenuDropdownItem{
    float: left;
    width: 90%;
    height: auto;
    min-height: 40px;
    margin-left: 10%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #999999;
    color: #020a00;
    margin-top: 6.5px;
    margin-bottom: 6.5px;
}
    
.mobileMenuDropdownItem:hover{
    cursor: pointer;
}

.mobileMenuDropdownItem.programLink{
    border-left: 3px solid #999999;
    background-color: #999999;
}
.mobileMenuDropdownItem.courseLink{
    border-left: 3px solid #999999;
    background-color: #999999;
}
.mobileMenuDropdownItem.unitLink{
    border-left: 3px solid #999999;
    background-color: #999999;
}
.mobileMenuDropdownItem.lessonLink{
    border-left: 3px solid #999999;
    background-color: #999999;
}

    
.mobileMenuDropdownItem img{
    display: block;
    width: 20%;
    height: auto;
    max-width: 30px;
    max-height: 30px;
    margin-left: 10px;
    -webkit-filter: brightness(0) saturate(100%);
    filter: brightness(0) saturate(100%);
}

.mobileMenuDropdownItem p{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
}
    
.mobileExecutiveMenu{
    float: left;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 40px);
    overflow: auto;
}

.reportItem{
    background-color: #bf161c;
}
.reportItem img{
    -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%);
}
.reportItem:hover img,
.reportItem:focus img{
    -webkit-filter: brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(3948%) hue-rotate(350deg) brightness(93%) contrast(95%);
    filter: brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(3948%) hue-rotate(350deg) brightness(93%) contrast(95%);
}

.nightModeOffItem{
    background-color: #333333;
}
.nightModeOffItem img{
    -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%);
}
.nightModeOffItem:hover img,
.nightModeOffItem:focus img{
    -webkit-filter: none;
    filter: none;
}

.nightModeOnItem{
    background-color: #999999;
}
    
.messagesItem{
    background-color: #b9baa3;
}
    
.notificationItem{
    background-color: #ffcc33;
}
    
.logoutItem, .logInItem{
    background-color: #305a30;
}

.logoutItem img, .logInItem img, .howToItem img, .createCommunityItem img{
    -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%);
}

.logoutItem:hover img, .logInItem:hover img,
.logoutItem:focus img, .logInItem:focus img{
    -webkit-filter: brightness(0) saturate(100%) invert(29%) sepia(40%) saturate(573%) hue-rotate(71deg) brightness(90%) contrast(90%);
    filter: brightness(0) saturate(100%) invert(29%) sepia(40%) saturate(573%) hue-rotate(71deg) brightness(90%) contrast(90%);
}

.howToItem, .howToItem:hover{
    background-color: #056c9b;
}

.createCommunityItem{
    background-color: #056c9b;
}
.createCommunityItem p{
    color: #fdfdfd;
}
.createCommunityItem:hover img{
    -webkit-filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
}
.createCommunityItem:hover p{
    color: #056c9b;
}
 
.reportItem p, .nightModeOffItem p, .logoutItem p, .logInItem p, .howToItem p{
    Color: #fdfdfd;
}

.logInItem:hover p,
.logInItem:focus p,
.logoutItem:hover p,
.logoutItem:focus p{
    color:#305a30;
}

.reportItem:hover p,
.reportItem:focus p{
    color: #bf161c;
}

#threeDotsUserAccountDiv p, .nightModeOnItem p{
    color: #333333;
}

.notificationItem{
    background-color: #ffcc33;
}
.notificationItem p{
    color: #020A00;
}
.notificationItem:hover p, .notificationItem:focus p{
    color: #020A00;
}

.notificationListItem{
    padding-left: 10px;
    background-color: #f2f2f2;
}
.threeDotsOptions .headerMenuLinkOption.notificationListItem{
    border-bottom: 3px solid #f2f2f2;
}
.threeDotsOptions .headerMenuLinkOption.notificationListItem:hover, .threeDotsOptions .headerMenuLinkOption.notificationListItem:focus{
    background-color: #fdfdfd;
    border-bottom: 3px solid #ffcc33;
}
.headerMenuLinkOption.notificationListItem img{
    max-width: 20px;
    max-height: 20px;
}
.notificationListItem p{
    color: #020A00;
}
.notificationListItem:hover p, .notificationListItem:focus p{
    color: #020A00;
}
#headerNotificationsNumberParagraph{
    display: none;
    position: fixed;
    font-size: 1.2rem;
    width: auto;
    margin-left: 100px;
    border-radius: 5px;
    padding: 5px;
    background-color: #fc3;
    color: #020A00;
}

#threeDotsCreateCommunityDiv{
    background-color: #056c9b;
}
#threeDotsCreateCommunityDiv img{
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(92deg) brightness(103%) contrast(98%);
}
#threeDotsCreateCommunityDiv p{
    color: #fdfdfd;
}


.nightModeOffItem:hover p{
    color: #333333;
}

.nightModeOnItem:hover, .nightModeOnItem:focus, .nightModeOffItem:hover, .nightModeOffItem:focus,
#threeDotsCreateCommunityDiv:hover, #threeDotsCreateCommunityDiv:focus, #threeDotsNotificationDiv:hover, #threeDotsNotificationDiv:focus{
    background-color: #fdfdfd;
}

.nightModeOnItem:hover p, .nightModeOnItem:focus p, .nightModeOffItem:hover p, .nightModeOffItem:focus p{
    color: #020A00;
}
#threeDotsCreateCommunityDiv:hover p, #threeDotsCreateCommunityDiv:focus p{
    color: #056c9b;
}
#threeDotsCreateCommunityDiv:hover img, #threeDotsCreateCommunityDiv:focus img{
    -webkit-filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
}

.nightModeDivOff p{
    color: #fdfdfd;
}

.logoutItem:hover p{
    color: #305a30;
}


/* Login Modal stuff */


.loginContainer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #305a30;
}

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

.loginbox{
    padding: 2%;
    margin: 2%;
}

.loginlbl{
    color: #fdfdfd;
    font-weight: normal;
}

.loginip{
    width: 100%;
    height: 30px;
    padding-top: 5px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background-color: #fdfdfd;
    color: #1A1A1A;
}

.loginBtn{
    margin-bottom: 2%;
    min-width: 100%;
    margin-left: 0;
}

.forgotLogin{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 5%;   
}

.forgotLogin a{
    display: block;
    text-decoration: none;
}

.forgotPassword, .forgotUsername{
    float: left;
    width: 44%;
    margin-left: 4%;
}

.forgotPasswordBtn, .forgotUsernameBtn{
    width: 40%;
    font-size: 1.2rem;
    margin-top: 0;
}

footer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
}

.footerLogo{
    display: block;
    width: 20%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 2%;
}

.footerLogo img{
    display: block;
    width: 100%;
    height: auto;
}

.footer{
    float: left;
    clear: both;
    background-color: #d0cfcf;
    height: auto;
    min-height: 300px;
    width: 100%;
    text-align: center;
    border-top: medium solid #305a30;
}

footer ul{
    list-style-type: none;
    margin-bottom: 5%;
}

footer li{
    width: 95%;
    text-align: left;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 2.5%;
    color: #0a090c;
}

footer a{
    display: block;
    width: 100%;
    text-decoration: none;
    color: #0a090c;
    font-family: 'Roboto', sans-serif;
	font-size: 1.8rem;
	font-weight: normal;
	border-left: 3px solid transparent;
	padding-left: 5px;
}

footer a:hover, footer a:focus{
    cursor: pointer;
    color: #305a30;
    border-left: 3px solid #305a30;
}

.footerHeading{
    font-size: 2rem;
    font-family: 'Vollkorn', serif;
    color: #305a30;
    padding-bottom: 1%;
    border-bottom: 2px solid #305a30;
}

.leftFooter{
    float: left;
    width: 33.33%;
    height: auto;
    padding: 2%;
}

.centerFooter{
    float: left;
    width: 33.33%;
    height: auto;
    padding: 2%;
}

.rightFooter{
    float: left;
    width: 33.33%;
    height: auto;
    padding: 2%;
}

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

.awardsHeader{
    display: block;
    width: 100%;
    font-size: 2rem;
    font-family: 'Vollkorn', serif;
    font-weight: normal;
    text-align: center;
    color: #020A00;
    padding-bottom: 1%;
    padding-top: 1%;
    border-bottom: 2px solid #305a30;
}

.footerAwards{
    float: left;
    width: 100%;
    height: auto;
    padding-top: 5%;
    padding-bottom: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.awardSection{
    float: left;
    width: 33.33%;
    height: auto;
    padding: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}

.awardImage{
    display: block;
    float: left;
    width: auto;
    height: auto;
    max-height: 125px;
    align-self: center;
    margin: auto auto;
}

.awardText{
    display: block;
    width: 100%;
    height: auto;
    clear: both;
    margin-top: 10px;
    font-size: 1.6rem;
    font-family: 'Vollkorn', serif;
    font-weight: normal;
    color: #020A00;
}

.footerBottomBar{
    float: left;
    width: 100%;
    height: 50px;
    background-color: #305a30;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.footerBottomBar p{
    color: #fdfdfd;
    text-align: right;
    padding-right: 2%;
}

/* Dropdown Loading Animation Starts Here //////////////////////////////////////////////////////////////////////*/

.loadingDropdown{
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.2);
}

.dropdownContent{
    float: left;
    display: block;  
    width: 100%;
    height: auto;
    align-content: center;
    background-color: #f2f2f2;
 }

.dropdownBallContainer{
    float: left;
    width: 50%;
    height: auto;
    margin-left: 25%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    overflow: hidden;
}

.dropdownBallOne{
    float: left;
    width: 10px;
    height: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #305a30;
    transition: .5s ease 0s;
    animation: dropdownScaleBall 2s infinite;
    animation-delay: 0s;
    transform-style: preserve-3d;
}

.dropdownBallTwo{
    float: left;
    width: 10px;
    height: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #305a30;
    transition: .5s ease 0s;
    animation: dropdownScaleBall 2s infinite;
    animation-delay: 0.5s;
    transform-style: preserve-3d;
}

.dropdownBallThree{
    float: left;
    width: 10px;
    height: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #305a30;
    transition: .5s ease 0s;
    animation: dropdownScaleBall 2s infinite;
    animation-delay: 1s;
    transform-style: preserve-3d;
}

@keyframes dropdownScaleBall{
    0% {
          transform: scale(1);
    }
    50% {
        transform: scale(2);
        border-radius: 0px;
    }
    100%{
           transform: scale(1); 
    }
}

/* responsive screen code */
@media only screen and (min-width: 1500px) {
/* Extra large devices (large laptops and desktops, 1500px and up) */
    .desktopHeaderContainer{
        display: block;
    }
    .mobileHeaderContainer{
        display: none;
    }
    .footer{
        background-image: url(/images/companyImages/headerImage1500.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
/* Extra large devices (large laptops and desktops, 1200px and up) */
    .desktopHeaderContainer{
        display: block;
    }
    .mobileHeaderContainer{
        display: none;
    }
    .footer{
        background-image: url(/images/companyImages/headerImage1500.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }
    .footer a{
        font-family: 'Roboto', sans-serif;
        font-size: 1.8rem;
        font-weight: normal;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
/* Large devices (laptops/desktops, 992px and up) */
    .desktopHeaderContainer{
        display: block;
    }
    .mobileHeaderContainer{
        display: none;
    }
    #headerNotificationsNumberParagraph{
        margin-left: 90px;
    }
    .footer{
        background-image: url(/images/companyImages/headerImage1200.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }
    .footer a{
        font-family: 'Roboto', sans-serif;
        font-size: 1.4rem;
        font-weight: normal;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
/* Medium devices (landscape tablets, 768px and up) */
    .desktopHeaderContainer{
        display: block;
    }
    .mobileHeaderContainer{
        display: none;
    }
    .headerMenuLink  img, .headerMenuLinkOption img, .menuLink img, .howToUseBlickelHeaderSection img{
        max-width: 25px;
        max-height: 25px;
        margin-left: 5px;
    }
    .accountTypeHeaderSection p, .headerMenuLink p, .headerMenuLinkOption p, .menuLink p, .howToUseBlickelHeaderSection p{
        font-size: 1.2rem;
        padding-left: 5px;
    }
    #headerNotificationsNumberParagraph{
        margin-left: 75px;
    }
    .footer{
        background-image: url(/images/companyImages/headerImage991.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }    
}
@media only screen and (min-width: 601px) and (max-width: 767px) {
/* Small devices (portrait tablets and large phones, 600px and up) */
    #header{
        min-height: 40px;
    }
    .desktopHeaderContainer{
        display: none;
    }
    .mobileHeaderContainer{
        display: block;
    }
    .mobileMenuDropdownContainer{
        float: left;
        width: 70%;
        height: auto;
        max-height: calc(100vh - 40px);
        overflow: auto;
        margin-left: 30%;
    }
    .footer{
        background-image: url(/images/companyImages/headerImage767.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }    
    .footerLogo{
        width: 50%;
        margin-left: 25%;
    }
    .leftFooter, .centerFooter, .rightFooter{
        width: 100%;
    }
    .footer li{
        height: auto;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .footer a{
        font-family: 'Roboto', sans-serif;
        font-size: 1.6rem;
        font-weight: normal;
    }
    .content{
        width: 100%;
        margin-left: 0;
    }
    .awardSection{
        width: 100%;
    }
}    
@media only screen and (max-width: 600px) {
/* Extra small devices (phones, 600px and down) */
    #header{
        min-height: 40px;
    }
    .desktopHeaderContainer{
        display: none;
    }

    .mobileHeaderContainer{
        display: block;
    }
    #headerNotificationsNumberParagraph{
        margin-left: 75px;
    }
    .footer{
        background-image: url(/images/companyImages/headerImage767.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }
    .footerLogo{
        width: 50%;
        margin-left: 25%;
    }
    .leftFooter, .centerFooter, .rightFooter{
        width: 100%;
    }
    .footer li{
        height: auto;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .footer a{
        font-family: 'Roboto', sans-serif;
        font-size: 1.6rem;
        font-weight: normal;
    }
    .content{
        width: 100%;
        margin-left: 0;
    }
    .awardSection{
        width: 100%;
    }
}
@media only screen and (max-width: 400px) {
/* Super Extra small devices (phones, 400px and down) */
}