@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){
	outline: 2px solid var(--primary-color,#029ce2) !important;
}

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

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

input#startDate {
	width: 100px !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: 100px !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:100%;
}

#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: 10px;
}

#topBarTextContainer {
	padding: 9.1px 0;
}

#topBarText {
	border-bottom: grey solid 1px;
	padding-right: 5px;
	padding-bottom: 2px;
	width: 100%;
	height: 25px;
}

#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: bold !important;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 1;
	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: 2.4em;
	margin-left: 0.5em !important;
}

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

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

.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;
}

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

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


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


    
.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;
}
	
.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: white;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.25);
	max-height: 770px;
	width: 320px;
	overflow-y: auto;
	overflow-x: hidden;
}

.menuHolder {
	position: relative;
	width: 45px;
	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: 4.5em;
}

.menu {
	padding: 0em;
	background-color: white;
	z-index: 998;
	animation: rotateMenu 300ms ease-in-out forwards;
    transform-origin: top center;
}
@keyframes rotateMenu {
    0% {
        transform: scaleY(0)
    }
    100% {
        transform: scaleY(1)
    }
}

#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: -20px;
	right: 17px;
	border-color: transparent transparent white transparent;
	border-width: 10px;
}

.menu:before {
	top: -22px;
	right: 16px;
	border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent;
	border-width: 11px;
}

.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;
}

/* Navigation Menu Appearance */
.yujaMenu.yujaMenuGrid {
	width: 270px;
	font-size: 14px;
	overflow-y: hidden; /* Without this, chrome will put a scrollbar */
}

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

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

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

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

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

.yujaMenuGrid>a>span {
	padding-top : 9px;
	padding-left : 9px;
	font-weight : bold;
	color: var(--primary-color-light-text, #666666);
}

.yujaMenuGrid>a {
	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;
}

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

.yujaMenuGrid>a:hover, .yujaMenuGrid>a:focus {
	border-color: #428bca;
}

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

.main-menu-icons{
	width:auto;
	height:auto;
	margin: 0px 5px 5px 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;
}

.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: 1.75em;
	height:1.75em;
	vertical-align: center;
	color: #a2a2a2;
	padding: 4px 7px;
	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: 4px 5px;
    overflow: visible;
}

#newTab {
	width: 45px;
    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:1.85em;
	height:1.85em;
	vertical-align:middle;
	border-radius:0.3em !important;
}
.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;
}
#add-media-search-bar{
	width:100%;
	border-radius: 5px !important;
	margin-right: -5px;
}
#add-media-search-bar > .form-control{
	border-radius: 5px;
	background-color: rgba(235,239,240,1);
	padding-right: 30px;
	height: 27px;
}
#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: 25px;
	bottom: 0px;
	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;
}
.add-media-modal-dialog .add-media-list-item{
	border-radius: 10px !important;
	position: relative;
	margin-top: 20px !important;
	background-color: transparent;
}
.add-media-modal-dialog .add-media-list-item:hover{
	background-color: #e6e6e6 !important;
	border: 1px solid transparent;
	cursor: pointer;
}

.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: 1em;
}

.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: 11px;
	font-weight: 700;
	color: #888888;
}
/*********************************
* 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{
	margin-bottom: 3px;
	color: black;
	font-size: 17px !important;
	font-weight: 500;
	white-space: normal;
	min-height: 45px;
	height: 45px;
}

.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("../../style/svgicons/add-media-left-arrow.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("../../style/svgicons/add-media-right-arrow.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px;
	width:20px;
	height:20px;
	cursor:pointer;
	float:right;
}
.add-media-modal-dialog .prevPage > span,
.add-media-modal-dialog .prevPage > div{
	display:none;
}
.add-media-modal-dialog .nextPage > span,
.add-media-modal-dialog .nextPage > div{
	display:none;
}
.add-media-modal-dialog li.disabled{
	display:none !important;
}
.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%;
}
.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 */
}