@CHARSET "UTF-8";

/*
 *	Core Dashboard Layout
 *
 *	This formatting is based on the css holy grail described here: http://alistapart.com/article/holygrail
 *
 *	However, it uses fixed positioning on the left column, header, and footer, so some adjustment was required.
 *
 *	Legend:
 *		FW: full-width, meaning the width of the column + its horizontal padding
 *		H: height
 *		PH: padding (horizontal)
 */

/* Global Theme Colors Declarations:
 *   
 * The following declarations is for global use of colors throughout the website where
 * the dashboard presents. It provides the basic color for elements which doesn't have
 * any color specified in their elements or in their parents. If specific color is 
 * required for a section or element on the page, it should be overriden in the style
 * attribute of the element.
 *
 * The color:inherit declaration is for overriding the bootstrap css style rules. if
 * this declaration is removed, the general elements like <a> would follow the color
 * described in bootstrap css. If there are other elements that need to follow the
 * global theme color, add in this section  
 */
body, html {
	color: var(--new-primary-color,#42296E);
	min-height: 100vh;
	height: 100%;
	background-color: #f4f4f4; /*grey background added here */

}

:root {
	--roster-mini-icon-color: #12657E;
}

*:focus-visible:not(.Select-input, .select2-input, .btn.warncolor, .btn.dismisscolor, 
					.btn.savecolor, .btn.accentcolor, .institution-page-top-image-container,
					.timestampField, .select-quiz-date input, .common-dropdown ){
	outline: 1px solid var(--primary-color,#0B6F85) !important;
}

.container-horizontal-margin {
	margin-left: 1em;
	margin-right: 1em;
}

div.input-group a.datepicker-button {
	display:inline;
}

input#startDate {
	width: 110px !important;
	padding: 6px;
	text-align: left;
}

.startMeet, .endMeet{
	margin-right: 6px;
}

.datepicker-overlay{
	z-index: 999 !important;
}
.datepicker-calendar[aria-hidden=false]{
	z-index: 1010 !important;
}

input#endDate {
	padding: 6px;
	width: 110px !important;
	text-align: left;
}

input#endRepeatDate {
	padding: 6px;
	width: 100px !important;
	text-align: left;
}

input.date-picker {
	padding: 6px;
	width:80px !important;
}

a.datepicker-button {
	padding: 6px;
	padding-right: 9px;
	padding-top: 10px;
	margin-left: 2px;
	color: #666666 !important;
}

button.close:focus {
	outline: 2px solid var(--primary-color,#029ce2) !important
}

.transparentButtonAccessible.meetingListIcon {
	padding-right:6px;
	padding-bottom:5px;
}

.blue {
	color: var(--primary-color,#029ce2);
}

a {
	color:inherit
}
.btn-link {
	color:inherit
}

.navbar-inverse .navbar-brand {
	color:inherit

}

div#schedulePresenterForm input#colourSelect {
	width: 145px;
}

h2.modal-title-text {
	margin: 0px;
}

#navbar-homebutton-container {
	display: flex;
	align-items: center;
	height: 100%;
}

#navbar-header {
	height:46px;
	border-bottom: 1px solid #ECECEC;
	box-shadow: 0px 4px 8px 2px #00000008;
	
}

#topBarTabName3,
#topBarTabName2 {
	font-weight: 400 !important;
	font-size: 15px;
	line-height: 22px;
}

#top_bartab3,
#top_bartab2
{
	display: flex;
    align-items: center;
}
#skip-links {
	background-color: white;
	border: 3px solid #7BD5FF;
	border-radius: 15px !important;
	font-size: smaller;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.57);
	color: black;
	padding: 0%;
    overflow: hidden;
    position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	width: 130px;
	height: 30px;
    top: -100px;
	z-index: 1;
}

.navbar-inverse .navbar-brand :hover {
	color:inherit
}

.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus {
	color:inherit
}
/*
 * End of Global Theme Color Declarations
 */

html {
    overflow-y: auto !important;
}

#topBarTextContainerWrapper {
	height: 100%;
	display:flex;
	align-items: center;
	justify-content: center;
	padding-left: 7px;
}

#topBarTextContainer {
	padding: 9.1px 0;
}

#topBarText {
	border-bottom: none !important;
	padding-right: 5px;
	padding-bottom: 2px;
	width: 100%;
	height: 100%;
}

#topBarTextWidth {
	max-width: 350px;/*Changes using media queries */
	line-height: 22px;
	display: block;
	padding-top: 0px;
	margin-top: 2px;
}
	
.transparentButtonAccessible {
	background-color: transparent;
	padding: 1px;
	border-width: 0px;
}

.transparentButtonAccessibleBlock {
	background-color: transparent;
	padding: 11px;
	border-radius: 5px !important;
	border-width: 0px;
	display: block;
}

.transparentButtonAccessibleBlock:focus-visible {
	background-color: lightgrey !important;
	outline: none !important;
}

.transparentButtonAccessibleBlock:hover {
	background-color: lightgrey !important;
	outline: none !important;
}

.transparentButtonAccessibleLeft {
	background-color: transparent;
	padding: 1px;
	border-width: 0px;
	text-align: left
}

#topBarText span {
	overflow: hidden;
	white-space: nowrap;
	font-weight: bold;
}

#topBarText span:first-of-type  {
	font-size: 21px;
}

#topBarText span:nth-of-type(2)  {
	line-height: 22px;
	font-size: 17px;
}

#topBarText span:last-of-type  {
	text-overflow: ellipsis;
}

#topBarText i {
	line-height: 20px;
	padding-left: 5px;
	padding-right: 5px;
}

.topBarContent {
	float: left;
    display: flex;
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 22px;
}

.topBarContent h1 {
	float: left;
    display: block;
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 22px;
	font-weight: 500 !important;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 27px;
	font-size: 18px;
	min-height: 25px;
	padding-right: 1px;
}




@media only screen and (min-width: 768px) and (max-width:992px)
{
	#topBarTextWidth{
		max-width: 185px;
	}

	#topBarText span:first-of-type  {
		font-size: 19px;
	}
	
	#topBarText span:nth-of-type(2)  {
		line-height: 22px;
		font-size: 16px;
	}
}

@media only screen and (min-width: 425px) and (max-width:768px)
{
	#topBarTextWidth{
		max-width: 150px;
		
	}

	#topBarText span:first-of-type  {
		font-size: 19px;
	}
	
	#topBarText span:nth-of-type(2)  {
		line-height: 22px;
		font-size: 16px;
	}
	
}
@media only screen and (max-width: 425px) 
{
	#topBarTextWidth{
		max-width: 120px;
		
	}
	#topBarText span:first-of-type  {
		font-size: 19px;
	}
	
	#topBarText span:nth-of-type(2)  {
		line-height: 22px;
		font-size: 16px;
	}
	
}

@media only screen and (min-width: 992px) and (max-width:1350px)
{
	#topBarTextWidth{
		max-width: 230px;
	}

}

#topBarShareFile {
	margin-left: 2.5em;
	padding: 0.4em 0em;
	font-weight: bold;
	font-size: 18px;
height: 2em;
}
#topBarText1 {
	margin-left: 2.5em;
	padding: 0.4em 0em;
	font-weight: bold;
	font-size: 18px;
	color: #636363;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#topBarTextLine {
height: 2em;
}

/*** The Essential Code ***/
body {
	/*min-width: 65em;*/
	/* Should be at least 2 x (FW.menu + PH#dashboardCenter) + FW#dashboardRight */
	height: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background-color: white !important;
	font-family: 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica,
		Arial, sans-serif;
}


@media only screen and (min-width:600px)
{
	#render-show-hide{
		display:inline-block;
		bottom:0px;
		width:100%;
	}
}

@media (max-width:350px)
{
	#render-show-hide{
	display:none !important;
	}
}
#dashboardHeader,#dashboardFooter{
	z-index: 999;
	/* Keeps the header, footer and right bar above everything except the left bar and modal dialogs */
}

#dashboardRight {
	z-index: 997;
	/* Keeps the right bar above everything except the left bar, header, footer, and modal dialogs */
}

#overview-content-wrapper{
	overflow: hidden;
	height: fit-content;
	margin-bottom: 30px;
}

@media (max-width:750px)
{
	#overview-content-wrapper{
		overflow: scroll hidden;
	}
}

#dashboardHeader {
	position: fixed;
	left: 0;
	top: 0;
	right: 0em; /*make 0 if we return to default scrollbars*/
	height: 3.5em;
	width: auto;
	min-width: 100%; /* min-width of body less FW#dashboardRight */
	padding: 0;
	/* box-shadow:0px 0px 0px 2px rgba(0,0,0,0.20); */
}

#dashboardContainer {
	position: relative;
	min-height: 100%;
	padding-bottom: 5em; /* H#dashboardFooter */
	background-color:#f4f4f4;
}

#dashboardCenter {
	position: relative;
	float: left;
}

#dashboardCenter {
	width: 100%;
	top: 4em; /* 0.5em + #dashboardHeader's height should equal to this. */
}

#dashboardRight {
	position: fixed;
	top: -1em; /* H#header */ /* Move toolbar into header */
	right: 0em; /*make 0 if we return to default scrollbars*/
	width: 18em;
	padding: 0;
}

#dashboardFooter {
	position: fixed;
	overflow: visible;
	bottom: 0;
	left: 10em; /* FW.menu */
	right: 0em;
	height: 2em;
	padding: 0em;
	clear: both;
	pointer-events: none; /* Makes the footer click-through */
	background: none !important;
	/* Required for click-through on IE10 and lower as they don't work with pointer-events */
}

#dashboardFooter>* {
	pointer-events: auto;
}

/*** IE6 Fix ***/
* html .menu {
	left: 21.3em; /* FW#dashboardRight*/
}

/*** Equal-height Columns ***/
#dashboardContainer {
	overflow: hidden;
}

#dashboardCenter {
	margin-bottom: -1000em; /* -X */
	padding-bottom: 1001em; /* X + padding-bottom */
}

#dashboardRight {
	margin-bottom: -1000em; /* -X */
}

#androidContent, #iOSContent{
	padding: 0 1em;
}

#androidContent .optionPanel, #iOSContent .optionPanel {
	padding: 0.5em;
	margin: 1em 0;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
}

/*
 * Content area formatting
 */
#dashboardContent {
	position: relative;
	max-width: 110em; /* also change CourseBoardManager.NARROW_SCREEN_WIDTH_EM if you change this value*/
	margin: 0em auto;
	padding: 0 3em; /* Ensures the main content area doesn't get squished right up against the edges of the screen on smaller monitors
						 NOTE: originally this setting also contributed to not overlapping the fixed-width left and right bars
						 	   The left bar no longer exists.  The right bar exists, but isn't used.
						 	   The current padding would no longer be sufficient if we wanted to start using the right bar again
						 	   This comment could be removed if we actually went and removed all the right bar stuff.  Until then, keeping it
						 	   to avoid confusion if trying to use the right bar.
					  */
	-webkit-animation-duration: 250ms;
	-moz-animation-duration: 250ms;
	-o-animation-duration: 250ms;
	animation-duration: 250ms;
}

#dashboardContent > img.masthead {
	max-height: 300px;
	max-width: 100%;
}

#dashboardContent > img.banner {
	width: 150px;
	height: 45px;
}

#mediaChannelSearchBox{
	width : 601px;
}

#mediaChannelSearchBox .Select
{
  border-radius: 5px !important;
}

#mediaChannelSearchBox .Select-control
{
  border-radius: 5px !important;
}

@media only screen and (max-width: 1400px) {
	#mediaChannelSearchBox {
		width: 494px;
	}
}


/*
 *	Topbar Content Formatting
 */
.header .navbar-brand {
	width: auto;
	padding: 0.4em 0em;
	margin: 0em;
	font-size: inherit;
}

.header .navbar-brand img {
	height: 42px;
	margin-left: 0.5em !important;
}

.topBarBtn {
	padding: 0.68em 0.46em !important;
}

.topBarBtn img {
	/*width: 2em;*/
	width: 20px;
	height: 20px;
}

.header .yujanavbar.navbar-nav {
	margin-right: 0;
}

.yujaHomeBrand {
	display: block;
}

#settingsBar {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display:flex;
	justify-self: center;
    justify-content: center;
}

@media (max-width: 1280px) {
    #settingsBar.video-editor, #settingsBar.ad-editor {
        justify-content: right;
    }
}

#TopBarButtonContainer {
	width: 200px;
    height: 100%;
    float: right;
    position: relative;
    justify-content: flex-end;
    margin-right: 1.5em;
    display: flex;
    margin-left: auto;
    gap: 10px;
}

#userInfoButtonContainer {
	height:100%; 
	display:flex;
	align-items:center;
	width:auto;
	justify-content: center;
}


#topBarEssentialTab {
    font-size:16px;
    height:100%;
    display: flex; 
    justify-content: center;
    align-items: center;
    gap: 10px;
}


    
.top_bartab {
    border-width: 0;
    background-color: transparent;
    text-decoration:none;
    text-align:center;
    color:var(--primary-color,#029ce2);
	white-space: nowrap;
	padding: 0;
    display: flex;
    align-items: center;
	justify-content: center;
	padding-left: 5px;
	padding-right: 5px;
	height:100%;
}

.active-nav-item{
	background-color: rgba(196, 196, 196, 0.4);
}
    
/* .top_bartab:hover, .top_bartab:focus {
	background-color: rgba(57, 106, 183, 0.5);
} */

.top_bartab:active {
	background-color: transparent;
}

.topBarTabNameContainer:hover
{
	border-radius: 4px !important;	
}

.topBarTabNameContainer
{
	padding: 4px 6px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.nameColor {
	font-weight:bold;
	color:var(--primary-color,#029ce2);
}
    
.topBarLines{
 border-left: 1px solid;
 height: 100%;
}
    
@media screen and (max-width: 480px){
    #bi_userInfoDropdown span {
        font-size: 0;
        line-height: 0;
    }
}

#videoConferenceModal .modal-dialog{
    width: 630px;
}

/*
 * Right Bar Content Formatting
 */
.rightbar-entry {
		margin-top: 0.5em;
	text-align: center;
}

.rightbar-entry select {
	width: 100%;
}

.rightbar-entry .btn {
	font-size: 0.75em;
}

.rightbar-entry .btn i {
	float: left;
	padding-right: 0.5em;
}

/* Menu Appearance */

.yujaMenu {
	background-color: rgba(255, 255, 255, 1);
	/* box-shadow:0px 0px 1px 2px rgba(0,0,0,0.25); */
	max-height: 770px;
	width: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 7px !important;
	padding: 8px 0px;
	border: 1px solid #E0E0E0; 
}

.menuHolder {
	position: relative;
	width: auto;
	height:100%;
	overflow: visible;
	display: flex;
    align-items: center;
	z-index: 1000;
}

.menuTab {
	position: fixed !important;
	display: inline-block;
	border-collapse: separate;
	white-space: nowrap;
	z-index: 999;
	cursor: pointer;
}

.menuHolder .menu {
	position: fixed;
	top: 3.5em;
}

.menu {
	padding: 0em;
	background-color: white;
	z-index: 998;
	/* animation: rotateMenu 300ms ease-in-out forwards; */
    border-radius: 7px !important;
    transform-origin: top center;
     animation: smartAnimate 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.menu.hideNavmenu {
	transform-origin: center top;
    animation: smartAnimateOut 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


@keyframes smartAnimate {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    100% {
        transform: translateY(5px);
        opacity: 1;
    }
}

@keyframes smartAnimateOut {
    0% {
        transform: translateY(5px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

@keyframes fadeOutMenu {
    0% {
        opacity: 1;
        max-height: 500px;
    }
    100% {
        opacity: 0;
        max-height: 0;
    }
}
@keyframes rotateMenu {
    0% {
        transform: scaleY(0)
    }
    100% {
        transform: scaleY(1)
    }
}
@keyframes rotateMenuOut {
    0% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}


#supportEmailModalDialog .glyphicon:empty {
  margin: auto 1em;
  vertical-align: middle;
}

#supportEmailModalDialog p {
  margin: auto;
}

.menu:after, .menu:before {
	content: '';
	display: block;
	position: absolute;
	right: 100%;
	width: 0;
	height: 0;
	border-style: solid;
	z-index: 1000;
}

.menu:after {
	top: -13px;
    right: 17px;
    border-color: transparent transparent white transparent;
    border-width: 7px;
}

.menu:before {
	top: -15px;
    right: 16px;
    border-color: transparent transparent #E0E0E056 transparent;
    border-width: 8px;
}

.menuHolder:hover .menu, .menuHolder:active .menu {
	margin-left: 0;
}

.genericMenuHolder {
	position: absolute;
	width: 0px;
	overflow: visible;
	top: 0.2em;
	bottom: 0;
	/* Combined with top, restricts the height of the left bar to the height of the viewport less the header */
	display: block;
	z-index: 1;
}

.genericMenuTab {
	position: absolute !important;
	display: inline-block;
	border-collapse: separate;
	white-space: nowrap;
	z-index: 999;
	cursor: pointer;
}

.genericMenuHolder .menu {
	position: absolute;
	top: 4.5em;
}

.genericMenuHolder:hover .menu, .genericMenuHolder:active .menu {
	margin-left: 0;
}

.colorPurple {
	color: purple;
}
.notification-badge-container{
	width: 12px;
	height: 12px;
	background-color: #0B6F85;
	border-radius: 50% !important;
	top: 0px;
	right: 1px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}
.notification-count-badge{
	font-size: 9px;
	font-weight: 500;
	line-height: 6px;
	color: white;
	position: absolute;
	top: 3px;
	right: auto;
	}
/* Navigation Menu Appearance */
.yujaMenu.yujaMenuGrid {
	width: 350px;
	font-size: 14px;
	overflow-y: hidden; /* Without this, chrome will put a scrollbar */
}

.yujaMenuGrid>div.yujaMenuGrid-heading {
	height: 100px;
	/*width: 500px;*/
	/* border-bottom: 2px solid ghostwhite; */
	text-transform: uppercase;
	text-align: center;
	display:grid;
	justify-content: center;
	align-items: center;
}

.yujaMenuGrid>div.yujaMenuGrid-heading>span {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	/* padding: 0 10px 0 2px; */
	color: rgba(89, 89, 89, 1);
}

.yujaMenuGrid>div.yujaMenuGrid-heading>span {
	font-size: 14px;
	font-weight: 500;
	line-height: 15.73px;
}

.yujaMenuGrid>div.yujaMenuGrid-heading>span.yujaMenuGrid-branding {
	text-align: left;
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.yujaMenuGrid>div.yujaMenuGrid-heading>span>img {
	height: 3em;
}

.sidebarDividerLine{
	background-color: #E0E0E0;
    height: 1px;
    width: 300px;
}

.yujaMenuGrid>a>span {
	/* padding-top : 9px; */
	padding-left : 9px;
	font-weight : 500;
	font-size: 16px;
	line-height: 18.15px;
	color: rgba(0, 0, 0, 1);
}

.yujaMenuGrid>a {
	display: flex;
	height: auto;
	min-height: 51px;
	width: auto;
	padding: 10px;
	border-top-color: transparent;
	border-left-color: transparent;
	vertical-align: top;
	text-align: center;
	color: #666;
	transition: border 0.5s ease-in-out 0s;
	margin: auto 5px;
}

.yujaMenuGrid>a:hover, .yujaMenuGrid>a:focus, .yujaMenuGrid>a:visited {
	text-decoration: none;
}

.yujaMenuGrid>a:hover, .yujaMenuGrid>a:focus {
	background-color: rgba(231, 241, 243, 1) !important;
	border-radius: 3px !important;
}

.yujaMenuGrid>a>i::before {
	display: block;
	font-size: 30px;
}

.main-menu-icons{
	width: 24px;
	height:24px;
	margin: 5px;
}

/*The add upload menu*/
/* Navigation Menu Appearance */
.yujaMenu.linksMenuGrid {
	width: 150px;
	font-size: 14px;
	overflow-y: hidden; /* Without this, chrome will put a scrollbar */
}

.linksMenuGrid>div.linksMenuGrid-heading {
	height: 50px;
	/*width: 500px;*/
	border-bottom: 2px solid ghostwhite;
	text-transform: uppercase;
	text-align: center;
	display:table;
}

.linksMenuGrid>div.linksMenuGrid-heading>span {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
	padding: 0 10px 0 2px;
	color: #666666;
}

.linksMenuGrid>div.linksMenuGrid-heading>span {
	font-size: 12px;
	font-weight: 600;
}

.linksMenuGrid>div.linksMenuGrid-heading>span.linksMenuGrid-branding {
	text-align: left;
	font-size: 14px;
}

.linksMenuGrid>div.linksMenuGrid-heading>span>img {
	height: 3em;
}

.linksMenuGrid>div>span {
	padding-top : 9px;
	padding-left : 9px;
	font-weight : bold;
}

.linksMenuGrid>div {
	display: flex;
	height: 51px;
	width: 100%;
	padding: 5px;
	border: 2px solid ghostwhite;
	border-top-color: transparent;
	border-left-color: transparent;
	vertical-align: top;
	text-align: center;
	color: #666;
	transition: border 0.5s ease-in-out 0s;
	cursor: pointer;
}

.linksMenuGrid>div:hover, .linksMenuGrid>div:focus, .linksMenuGrid>div:visited {
	text-decoration: none;
}

.linksMenuGrid>div:hover, .linksMenuGrid>div:focus {
	border-color: #428bca;
}

.linksMenuGrid>div>i::before {
	display: block;
	font-size: 30px;
}


/* For the navigation icons */

[class^="flaticon-"]::before, [class*=" flaticon-"]::before, [class^="flaticon-"]::after,
	[class*=" flaticon-"]::after {
	margin-left: 0;
}

i.flaticon-media-channels {
	color: #cfd139;
}

i.flaticon-video-classroom {
	color: #f15d14;
}

i.flaticon-video-captures {
	color: #e01b0b;
}

i.flaticon-media-library {
	color: #c482e3;
}

i.flaticon-social-learning {
	color: #39799e;
}

i.flaticon-shared-files {
	color: #6eb7e1;
}

i.flaticon-course-syllabus {
	color: #2ec4ca;
}

i.flaticon-polls-quizzes {
	color: #7bb77b;
}

i.flaticon-courses-groups {
	color: #9b9b9b;
}

i.flaticon-team-chat {
	color: #FF6347;
}

i.flaticon-institution-management {
	color: #504bb7;
}

i.flaticon-usage-analytics {
	color: #ffae00;
}

/* Fix for wonky vertical alignment in portlet title */
.portlet>.portlet-title>.caption>i {
	margin-top: 0;
}

.portlet>.portlet-title>.caption {
	margin-top: 0.15em;
}

.my-account-display {
	max-width: 85%;
}

.post .content .message img:not(.playbuttonimage),.LoadingBackgroundImage {
	background-image: url(/Dashboard/icons/img_transparent_bg.png);
	background-repeat: repeat;
	background-clip:content-box;
}

#dashboardExpander
{
	/*needs to be here to make scrollbar always on, remove if we move to default scrollbar*/
	height:105%;
}

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

.left-menu {
	position: relative;
	overflow: auto;
	width: 100%;
	float: left;
}

#courses-and-groups {
	font-size: 115%;
}

.groups-list {
	position: relative;
	margin-bottom: 5px;
	overflow: auto;
}

.searchbar {
	z-index:0 !important;
	padding-bottom:7px;
	padding-top:5px;
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.right-content {
	position: relative;
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom:5px;
	overflow: auto;
	width:100%;
	height:475px;
	float: right;
}

.group-info {
	position:relative;
	float:left;
}

.group-menu {
	position:relative;
	float:right;
}

.clear {
	clear: both;
}

/* Replaces the portlet box in bootstrap with a custom colour scheme */
.portlet.box.green > .portlet-title {
  background-color: #DFF0D8;
}

.portlet.box.green {
   border: 1px solid #DFF0D8;
   border-top: 0;
}

.portlet > .portlet-body.green, .portlet.green {
  background-color: #DFF0D8 !important;
}

.portlet.box > .portlet-title {
   padding: 0.7em 10px 0.6em 10px;
   border-bottom: 1px solid #eee;
   color: #fff !important;
}

.portlet.blue > .portlet-title > .caption,
.portlet.green > .portlet-title > .caption,
.portlet.yellow > .portlet-title > .caption,
.portlet.red > .portlet-title > .caption,
.portlet.purple > .portlet-title > .caption,
.portlet.grey > .portlet-title > .caption {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #3C763D;
}

.portlet.box.blue > .portlet-title > .caption > i,
.portlet.box.green > .portlet-title > .caption > i,
.portlet.box.grey > .portlet-title > .caption > i,
.portlet.box.yellow > .portlet-title > .caption > i,
.portlet.box.red > .portlet-title > .caption > i,
.portlet.box.purple > .portlet-title > .caption > i,
.portlet.box.light-grey > .portlet-title > .caption > i{
  color: #3C763D;
}

.rosterBtns:hover i {
	opacity: 0.65;
}

.rosterBtns:hover {
	text-decoration: none;
	color:black !important;
}

.resetPassBtn {
	text-align: center;
	position: relative;
}

.resetPassBtn i {
	cursor: pointer;
	color: var(--roster-mini-icon-color, #12657E);
	font-size: 18px;
	width: 16px;
}

.resetPassBtnDisabled i {
	cursor: default !important;
	opacity: 0.50;
}

.addToGroupsBtn {
	text-align: center;
	position: relative;
}

.addToGroupsBtn i {
	cursor: pointer;
	color: var(--roster-mini-icon-color, #12657E);
	font-size: 18px;
	width: 16px;
}

.addToGroupsBtnDisabled i {
	cursor: default !important;
	opacity: 0.50;
}

.editUserBtn {
	text-align: center;
	position: relative;
}

.editUserBtn i {
	cursor: pointer;
	color: var(--new-primary-color, #42296E);
	font-size: 18px;
	width: 16px;
}

.editUserBtnDisabled i {
	cursor: default !important;
	opacity: 0.50;
}

.deleteUserBtn {
	text-align: center;
	position: relative;
}

.deleteUserBtn i {
	cursor: pointer;
	color: var(--roster-mini-icon-color, #12657E);
	font-size: 18px;
	width: 16px;
}

.deleteUserBtnDisabled i {
	cursor: default !important;
	opacity: 0.50;
}

.showMediaBtn {
	text-align: center;
	position: relative;
}

.showMediaBtn i {
	cursor: pointer;
	color: var(--roster-mini-icon-color, #12657E);
	font-size: 18px;
	width: 16px;
}

.showMediaBtnDisabled i {	
	cursor: default !important;
	opacity: 0.50;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
}

.notificationButton {
	font-size: 21px !important;
	width: 24px;
	height: 24px;
	vertical-align: center;
	color: #a2a2a2;
	padding: 0px;
	display: flex;
	align-items: center;
}
.turnRed{
	color: #C71585 !important;
	/*background: #d93434 !important;*/
}
.turnPink{
	color: #C71585 !important;
}

.btnOpacity:hover, .btnOpacity:focus{
  opacity:0.7;
}

#bi_userInfoDropdown {
    border-width: 0;
    background-color: transparent;
    padding: 0px;
    overflow: visible;
}

#newTab {
	width: auto;
    height: 100%;
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#supportBar {
	position: fixed;
	top: 0.2em;
	right:14.3em;
	z-index: 1000;
}
#supportBar2 {
	position: fixed;
	top: 0.2em;
	right:18em;
	z-index: 1000;
	font-weight: bold;
}


.AvatarPictTopBar{
	width:28px;
	height:28px;
	vertical-align:middle;
	border-radius:0.3em !important;
}

.AvatarPictMyAccount{
	width:45px;
	height:45px;
	vertical-align:middle;
	border-radius:0.3em !important;
	vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
    border: 2px solid transparent;
}
.uploadMenuHolder {
	position: absolute;
    top: 8em;
    right: 50%;
    left: 55%;
    padding-right: 5em;
    margin-left: 4em;
}

.uploadMenuHolderMediaChooser {
	position: absolute;
    top: 15%;
    right: 25%;
    margin-left: 55px;
    z-index: 10000;
}

.uploadVrMenuHolder {
	position: absolute;
    top: 8em;
    right: 40%;
    left: 75%;
    padding-right: 5em;
    margin-left: 4em;
}

.uploadVrMenuHolderMediaChooser {
	position: absolute;
    top: 15%;
    right: 10%;
    margin-left: 55px;
    z-index: 10000;
}

#triangle-down {
	width: 0;
	height: 0;
	border-left: 0.4em solid transparent;
	border-right: 0.4em solid transparent;
	border-top: 0.4em solid #a2a2a2;
	position: absolute;
	right: 9.6px ;
	top: 28px;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.notificationEntry {
	min-height: 118px;
	border-bottom-style: solid;
	border-bottom-color: #DDDDDD;
	border-bottom-width: 1px;
	padding: 5px;
}

.notificationEntry:hover {
	cursor: pointer;
}

#markAsReadBtn:hover {
	background-color: #F5F5F5;
	cursor: pointer;
}

.dropDownMenuBtn:hover, .dropDownMenuBtn2:hover {
	background-color: #F5F5F5;
	cursor: pointer;
}

/* glowing animation from http://basicuse.net/articles/pl/textile/html_css/how_to_create_flashing_glowing_button_using_animation_in_css3 */

@-webkit-keyframes glowing {
  0% { background-color: #4E4E4E; -webkit-box-shadow: 0 0 3px #4E4E4E; }
  50% { background-color: #FFCC11; -webkit-box-shadow: 0 0 10px #FFCC11; }
  100% { background-color: #4E4E4E; -webkit-box-shadow: 0 0 3px #4E4E4E; }
}

@-moz-keyframes glowing {
  0% { background-color: #4E4E4E; -moz-box-shadow: 0 0 3px #4E4E4E; }
  50% { background-color: #FFCC11; -moz-box-shadow: 0 0 10px #FFCC11; }
  100% { background-color: #4E4E4E; -moz-box-shadow: 0 0 3px #4E4E4E; }
}

@-o-keyframes glowing {
  0% { background-color: #4E4E4E; box-shadow: 0 0 3px #4E4E4E; }
  50% { background-color: #FFCC11; box-shadow: 0 0 10px #FFCC11; }
  100% { background-color: #4E4E4E; box-shadow: 0 0 3px #4E4E4E; }
}

@keyframes glowing {
  0% { background-color: #4E4E4E; box-shadow: 0 0 3px #4E4E4E; }
  50% { background-color: #FFCC11; box-shadow: 0 0 10px #FFCC11; }
  100% { background-color: #4E4E4E; box-shadow: 0 0 3px #4E4E4E; }
}

.globe {
  -webkit-animation: glowing 2000ms infinite;
  -moz-animation: glowing 2000ms infinite;
  -o-animation: glowing 2000ms infinite;
  animation: glowing 2000ms infinite;
}

.nav-tabs>li {
	text-align: center;
}

.extraTabs {
	width: 40px !important;
	height: 44px;
}

.extraTabs:hover {
	background-color: #D6E9C6;
}

.scrollableMenu {
	max-height: 315px;
	overflow-x: hidden;
}

.anchorBtn:hover {
	cursor: pointer;
}

/* for the menumagement  */
.icon-row i {

	width: 20px;
	height: 20px;
	margin: 0 0.5em 0 0;
	font-size: 14px;
}
.icon-row{
	padding-bottom: 7px;
	color: #666666;
}

.searchImage{
	height: 1.6vw;
	margin-top: -4px;
	color: lightgrey;
}
#add-media-search-bar{
	background: white;
	height: 37px;
}
#searchTitleOrDescriptionInput {
	border: none !important;
	outline: none !important;
}
#add-media-search-bar > .form-control{
	border-radius: 22.72px;
	height: 32px;
}
#add-media-search-bar > .form-control:focus{
	box-shadow: none !important;
	border-color: #aaa;
}
.add-media-search-button{
	background-color:transparent;
/* 	background: url("../../style/svgicons/add-media-search-icon.svg") no-repeat center center;
	background-size: 14px; */
}
.add-media-modal-dialog .add-media-search-button{
	color: #888888;
	position: absolute;
	right: 85px;
	bottom: 2px;
	padding: 7px 5px;
}
.add-media-modal-dialog .add-media-guide-button{
	color: #888888;
	position: absolute;
	right: 4px;
	bottom: 0px;
	padding: 7px 5px;
	background-color: transparent !important;
}
.add-media-modal-dialog .form-inline.hcenter{
	position: relative;
	width: 95%;
}
.add-media-modal-dialog .add-media-list-item{
	border-radius: 10px !important;
	position: relative;
	margin-top: 10px !important;
	background-color: transparent;
}
.add-media-list-item-select{
	background-color: #F5F3FA !important;
}

.add-media-modal-dialog .list-item .list-item-left {
	padding-right: 0;
	margin-right: 10px;
}

.add-media-modal-dialog .list-item-left-translucent{
	display:none;
	position:absolute;
	width: 178px;
	height:100px;
	z-index:3;
	background : rgba(2, 156, 226, 0.8) url("../../style/svgicons/add-media-plus-icon.svg") no-repeat center center;
	background-size:25px;
}
.add-media-modal-dialog .list-folder-item-left-translucent{
	display:none;
	position:absolute;
	width: 178px;
	height:100px;
	z-index:3;
	background : rgba(2, 156, 226, 0.8) url("../../style/svgicons/add-media-right-arrow-white.svg") no-repeat center center;
	background-size:25px;
}

.add-media-modal-dialog .duration-outer-container {
	position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.5em;
    color: white;
    opacity: 1;
}
.add-media-modal-dialog .duration-inner-container {
	display: flex;
	justify-content: flex-end;
}

.document-thumbnail{
	background : url("../../icons/document/GenericDocument.jpg") no-repeat center center;
	background-size: 100%;
}
.image-thumbnail{
	background : url("../../icons/document/ImageDocument.jpg") no-repeat center center;
	background-size: 100%;
}
.pdf-thumbnail{
	background : url("../../icons/document/PdfDocument.jpg") no-repeat center center;
	background-size: 100%;
}
.word-thumbnail{
	background : url("../../icons/document/WordDocument.jpg") no-repeat center center;
	background-size: 100%;
}
.excel-thumbnail{
	background : url("../../icons/document/ExcelDocument.jpg") no-repeat center center;
	background-size: 100%;
}
.powerpoint-thumbnail{
	background : url("../../icons/document/PowerpointDocument.jpg") no-repeat center center;
	background-size: 100%;
}
.link-thumbnail{
	background : url("../../icons/document/WebsiteLink.jpg") no-repeat center center;
	background-size: 100%;
}
.add-media-modal-dialog .add-media-list-item:hover .list-item-left-translucent{
	display:block !important;
}
.add-media-modal-dialog .add-media-list-item:hover .list-folder-item-left-translucent{
	display:block !important;
}
.add-media-modal-dialog .add-media-list-item .views{
	margin-right: 5px;
}

.add-media-modal-dialog .add-media-list-item .duration{
	background-color: #333;
    padding: 0 0.5em;
    border-radius: 5px !important;
    color: white;
}
.add-media-modal-dialog .add-media-list-item .description{
	font-size: 12px;
	font-weight: 400;
	color: #000000;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/*********************************
* Making the date posted go below the title/description
*
*/
/* .add-media-modal-dialog .add-media-list-item .item-description-container{
	display: table;
}
.add-media-modal-dialog .add-media-list-item .date-posted{
	display: table-footer-group;
} */
.add-media-modal-dialog .date-posted {
	display: flex;
}
.add-media-modal-dialog .add-media-list-item .title{
	color: #2A1F3E;
	font-size: 17px !important;
	font-weight: 700;
	white-space: normal;
	max-height: 66px;
	height: 33px;
	padding: 8px 0px 0px 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.add-media-modal-dialog .add-media-list-item .col-md-12{
	position:inherit;
}
.add-media-modal-dialog .prevPage{
	border: 0px !important;
	background-color: transparent !important;
	background-image: url("Dashboard/icons/newPrevPageButton.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px;
	width:20px;
	height:20px;
	cursor:pointer;
	float:left;
}
.add-media-modal-dialog .nextPage{
	border: 0px !important;
	background-color: transparent !important;
	background-image: url("/Dashboard/icons/newNextPageButton.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px;
	width:20px;
	height:20px;
	cursor:pointer;
	float:right;
}
.add-media-modal-dialog .nextPage:hover{
	opacity: 0.6;
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
}
.add-media-modal-dialog .prevPage:hover{
	opacity: 0.6;
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
}
.add-media-modal-dialog .custom-style-pagination{
	width:100%;
	display: flex;
	justify-content: center;
}
.add-media-pages-button{
	display: inline;
	position: relative !important;
}
.generic-add-media-container{
	background-color: #f4f4f4;
}
.media-channel-buttons-container{
	position:relative;
}
.media-channel-upload-button{
    display: inline-block;

}
.media-channel-upload-button i{
	font-size:18px;
	color:#636363;
}

.overflowOption > div > i {
	color: var(--new-primary-color,#42296E);
}

.publicSiteMenuTab {
	display: inline-block;
	border-collapse: separate;
	white-space: nowrap;
	z-index: 999;
	cursor: pointer;
}

.publicSiteMenuHolder{
    position: fixed;
    width: 0px;
    overflow: visible;
    top: 7.9em;
    bottom: 0;
    display: block;
    z-index: 2000;
}

.publicSiteMenuHolder .menu {
    top: 4.5em;
}

.bell-position{
	    left: 9.6em;
}

@media only screen and (max-width: 768px) {
   .bell-position{
   		left: 3.6em;
   }
}

.yujaPublicSiteMenu {
	position: fixed;
    background-color: white;
    box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.25);
    max-height: 770px;
    width: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    left: 146px
}
/*
.btn-default-public-site {
    border-width: 1px;
     padding: 6px 13px;
}
*/
.my-account-page-header {
    font-size: 1.8em;
    color: #636363;
}

.FileParentLocationListContainer {
	display: table;
	width:100%;
	cursor: pointer;
}

.publishNow-btn-wrapper {
	display: table-cell;
    vertical-align: middle;
    padding-left: 3px;
}

.publishNow-btn-center {
	vertical-align: middle;
    display: block;
    margin: 0 auto;
}
.highlighted {
	color: var(--primary-color,#029ce2);
	font-weight: bolder;
}

.tabOrders-input {
	/* padding-left: 0px; */
	padding-right: 0px;
}

.order-icons-container {
	padding-left: 0px;
}

.change-order {
	width: 24px;
	height: 24px;
}

.enterprise-tabs-row {
	display: inline-flex;
}

.enterprise-tabs-enable {
	margin-right: 2px;
}

@media only screen and (min-width: 991px) and (max-width: 1130px)
{
	.change-order {
		width: 19px;
		height: 19px;
	}
}

.stationCircleGreen {
	fill: none;
	stroke: rgba(38, 135, 38, 1);
	shape-rendering: auto;
	stroke-width: 8px;
}

.stationCircleProgressGreen {
	fill: none;
	stroke: rgba(38, 135, 38, 1);
	stroke-width: 8px;
	shape-rendering: auto;
	transition: stroke-dasharray 0.3s linear;
}

.stationCircleProgressRed {
	fill: none;
	stroke: rgba(218, 44, 55, 1);
	stroke-width: 8px;
	shape-rendering: auto;
	transition: stroke-dasharray 0.3s linear;
}

.rotateBy-90Deg {
  transform: rotate(-90deg); /* rotate container */
}

.nextPageButton:hover {
	content: url(/Dashboard/icons/nextButtonHover.svg)
}

.prevPageButton:hover {
	content: url(/Dashboard/icons/prevButtonHover.svg)
}
.search-bar-box {
	display: flex;
    justify-content: center;
    height: 60px;
    border: 1px solid #E4E4E4;
    width: 96%;
    margin-left: 10px;
    border-radius: 1px;
    box-shadow: 0px 0px 4.5px 0px #0000001A;
}

#noHistoryAvailable{
	min-height: 550px;
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.no-history-found{
	margin-bottom: 20px;
}

.myAccount-title{
	color: #000000;
	font-size: 13px;
	font-weight: 400;	
}

.userDetails{
	margin: 20px 10px 10px;
	display: flex;
    flex-direction: column;
    align-items: center;
}
	
.userDetailsContainer{
	display: flex;
	justify-content: center;
	align-items: center;
}

.userfullname{
	padding-top: 5px;
	font-weight: 700;
	font-size: 14px;	
	color: #000000;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20ch;
}

.role{
	color: #2B2B2B;
	font-size: 13px;
	font-weight: 400;
}

.email{
	color: #000000;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20ch;
}


.email:hover + .email-tooltip {
	opacity: 1;
    visibility: visible;
}

.userfullname:hover + .userfullname-tooltip{
 	opacity: 1;
    visibility: visible;
}


.email-tooltip {
    height: auto;
    color: #fff;
    position: absolute;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25);
    border-radius: 3px !important;
    margin: 116px 0px 63px 0px;
    background-color: #4C4C4C;
    border: 1px solid #4C4C4C;
    width: auto;
    z-index: 1000;
    text-align: center;
    opacity: 0;
  	visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.email-tooltip:before {
	content: '';
	display: block;
	position: absolute;
	right: 100%;
	width: 0;
	height: 0;
	border-style: solid;
	z-index: 1000;
}

.email-tooltip:before {
	top: -21px;
	left: 50%;
	border-color: transparent transparent #4C4C4C transparent;
	border-width: 11px;
}

.userfullname-tooltip{
    height: auto;
    color: #fff;
    position: absolute;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25);
    border-radius: 3px !important;
    margin: 80px 0px 63px 0px;
    background-color: #4C4C4C;
    border: 1px solid #4C4C4C;
    width: auto;
    z-index: 1000;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.userfullname-tooltip:before {
	content: '';
	display: block;
	position: absolute;
	right: 100%;
	width: 0;
	height: 0;
	border-style: solid;
	z-index: 1000;
}

.userfullname-tooltip:before {
	top: -21px;
	left: 50%;
	border-color: transparent transparent #4C4C4C transparent;
	border-width: 11px;
}

.editMessage {
    color: white;
    padding: 12px;
    font-size: 13px;
    line-height:32px;
}

.navbar-user-icon{
	width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
    border: 2px solid transparent;
}

.moreActionMenu{
	margin-left: -5em;
	border-radius: 6px !important;
	border:1px solid #E0E0E0 !important
}

.moreActionMenuWrapper {
    position: relative;
}

.moreActionsArrow {
    content: '';
    display: block;
    position: absolute;
    top: -4px;
    left: 102px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 14px 14px 14px;
    border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent;
    z-index: 1000;
}

.moreActionsSecondArrow{
	content: '';
    display: block;
    position: absolute;
    top: -2px;
    left: 102px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 14px 14px 14px;
    border-color: transparent transparent white transparent;
    z-index: 1000;
}

.selectedItemsGroupSection {
	border-bottom: 1px solid #bbbbbb;
    font-weight: 700 !important;
    font-size: 15px;
    color: black;
    cursor: none;
    padding-bottom:6px;
    padding-top: 6px;
    padding-left: 3px;
}

@media only screen and (max-width:914px){
	.moreActionMenu {
    margin-left: -11em;
    border-radius: 6px !important;
	}
	.moreActionsArrow {
    content: '';
    display: block;
    position: absolute;
    top: -4px;
    left: 17px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 14px 14px 14px;
    border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent;
    z-index: 1000;
}

@media only screen and (max-width: 700px) {
  .moreActionMenu .btn {
	  max-width: none !important;
	  overflow: hidden;
	  text-overflow: ellipsis;
	 }
}
.moreActionsSecondArrow{
	content: '';
    display: block;
    position: absolute;
    top: -2px;
    left: 17px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 14px 14px 14px;
    border-color: transparent transparent white transparent;
    z-index: 1000;
}
	
}

.moreActionIconStyles{
	margin-right: 8px;
	width: 25px;
    height: 25px;
}

.moreActionTitleStyles{
	color: #000000;
    font-size: 15px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 320px){
	.input-group.input-daterange input#startDate{
    	width: 50px !important;
    }
    .input-group.input-daterange #startDateLabel{
    	top: 10% !important;
    }
    .input-group.input-daterange input#endDate{
    	width: 50px !important;
    }
    .input-group.input-daterange #endDateLabel{
    	top: 60% !important;
    }
	#addItemModalDialog .yujaMenu.linksMenuGrid{
    	width: 100px;	
    	position: relative;
        right: 25px;
        top: -18px;
        font-size: 10px;
    }
    #addItemModalDialog .uploadVrMenuHolder .yujaMenu.linksMenuGrid{
    	position: relative;
    	right: 100px;
    }
    .menu:before{
    	right: -1px;
    	top: -40px;
    }
    .menu:after{
    	right: 0;
    	top: -38px;
    }
}

#dashboardContainer:has(#ingested-live-streams) {
    padding-bottom: 0;
}
@media screen and (max-height: 450px){
	#dashboardContainer:has(#ingested-live-streams) {
    min-height: 450px;
}
}