/* CUSTOMISED CSS */

/* ---------------------- */
/* START Define Variables */
/* ---------------------- */
/* NOTE: THESE VARIABLE ARE ALSO USED IN JAVASCRIPTS TO CHANGE COLOR ON ACTION */

:root {
	font-size: 16px;
	

	--blcLogoLightBlue:#00CCFF;  /* Logo light blue */
  	--blcLightBlue:#70DDFF;
  	--blcMidBlue:#00A0D0;
  	--blcLogoDarkBlue:#0070B0;  /* Logo darker blue */
  	--blcDarkBlue:#004080;
  	--blcOrange:#FFCC00;  /* Presentation second color */
  	--blcDeepRed:#FF0020;
  	--blcDarkRed:#870000;
	--blcDarkRedOther:#8F0F2F;
  	--blcBrightGreen:#00FF00;
  	--blclightGreen:#7CFC00;
  	--blcMidGreen:#00A080;
  	--blcDarkGreen:#005050;
  	--blcRichYellow:#FFEE00;  /* not used in any text on light background */
  	--blcGoldenYellow:#ffe600;
  	--blcCreme:#FFD088;
  	--blcGray:#4F809F;
  	--blcPurple:#AFAAFF;
  	--blcGold:#BB7F22;
  	--blcSilver:#DFDFDF;
  	--blcUltraDark:#001E36;
	--blcIconColor:#707070;
	--blcLightBlueIconColor:#95CBFA;
	--blcLightGreen1:#BDFF3B;
	--blcLightGreen2:#A1DB2E;
	--blcDarkGreen1:#68C401;
	--blcDarkGreen2:#00680D;
	--blcLightBlue1:#00C9E2;
	--blcLightBlue2:#0B9CC0;
	--blcDarkBlue1:#006C88;
	--blcDarkBlue2:#004668;
	--blcDarkBlue3:#002C50;
	--blcTextColorDarkGreen:#046700;
	--blcTextColorLightGreen:#55FE3F;
	--blcTextColorBrown:#693700;
	
  	
	--episodeFieldBg:#f8f9fa; /*This Color Need to be confirmed*/
	--white:#ffffff;
	
  	--slimbarHeight: 0.25rem;
  	--progressbarHeight: 0.5rem;
	
	/*
	--stdText: 1rem;
	--stdTextXS: 0.6rem;
	--stdTextS: 0.8rem;
	--stdTextM: 1.1rem;
	--stdTextL: 1.3rem;
	--stdTextXL: 1.4rem;
	--reportData: 1.75rem;      // 42pxused for showing large number on dashboard & BLC Home  
	*/
	
	--stdText: 1rem;
	
	--stdTextS: 0.75rem;
	
	--stdTextL: 1.25rem;
	--stdTextXL: 1.5rem;
	--reportData: 1.75rem;      /* 42pxused for showing large number on dashboard & BLC Home */ 
	--reportDataL: 2.5rem; 
	
	
	
	--iconSizeM: 0.6rem;		/* used for showing navigation icons on top navigation bar */
  	--iconSizeS: 0.3rem;         /* used for showing small up/down icon on dashboard */  
	--iconSize: 0.9rem;         /* used for showing normal icon in application */ 
	--iconSizeL: 1.3rem;        /* used for showing larger icon e.g. canvas element full view,  member tie icon on myTeam etc. */ 
	--iconSizeXL: 2rem;
	--actionIconSize: 1.1rem;
  	
  	/*--fontFamily:"Open Sans"; */
	--fontFamily: 'Open Sans', sans-serif;
	
  	/*--fontFamilyLogo:"Mekanik LET"; */
	
}
/* -------------------- */
/* END Define Variables */
/* -------------------- */


body{
	font-family: var(--fontFamily);
	color:#505050;
	font-weight:300;
}

a {text-decoration: none;}
a:link {color: var(--blcLogoLightBlue);}  
a:visited {color: var(--blcLogoLightBlue);}  
a:hover {color: var(--blcLogoDarkBlue);}  
a:active {color: var(--blcLogoDarkBlue);}  


.blcPageHeader{
	padding-top:10px;
	padding-bottom:10px;
}


/* Section */
.disabledSection{
	pointer-events: none;
	opacity: 1;
}

/* date picker */
.ui-datepicker-trigger{
	border-style: solid;
	border-width: 1px;
}

/* Radio type input align with multiline text */
.blcRadioAlignment{
	margin-top:0.5rem; /*10px*/
}

/* ----------------- */
/* START Logo Classes*/
/* ----------------- */

/* Logo used in BLC pages */
.logoSize{
	height: 2rem;
}

/* Class used in Invitation emails send to users  */
.logoSizeL{
	height: 4rem;
}
/* --------------- */
/* END Logo Classes*/
/* --------------- */


/* -------------------- */
/* START Content Classes*/
/* -------------------- */
.pageHeadline{
	font-size: var(--stdTextXL);
}
.pageSubtitle{
	font-size: var(--stdTextL);
}
.topicHeadline{
	font-size: var(--stdTextL);
}
.topicImportant{
	font-size: var(--stdTextL);
}
.stdText{
	font-size: var(--stdText);
}

.stdTextS{
	font-size: var(--stdTextS);
}

.stdTextL{
	font-size: var(--stdTextL);
}
.stdTextXL{
	font-size: var(--stdTextXL);
}


.canvasFieldHeader{
	font-size: var(--stdText);
}
.canvasContentText{
	font-size: var(--stdTextS);
}

.epContentText{
	font-size: var(--stdTextS);
}

.bodySectionHeadline{
	font-size: var(--stdTextXL);
	text-align: center;
}

.blcTextOnIcon{
	position:relative;
	top:0;
	left:-15px;
}

/* used for showing no record msg */
.noRecordMsg{
	font-size: 1.5rem;
}

/* used for showing large number on dashboard */ 
.reportData{
	font-size: var(--reportData);
}
.reportDataL{
	font-size: var(--reportDataL);
}

/* Class to display validation messages*/
.validationMsg{
	color: var(--blcDeepRed);
	font-size: var(--stdText);
}
.blcDefaultLink{
	color: #007bff;
}

.textRed{
	color: var(--blcDeepRed);
}

.textGreen{
	color: var(--blcBrightGreen);
}

.textLogoLightBlue{
	color: var(--blcLogoLightBlue);
}

.textOrange{
	color: var(--blcOrange);
}

.textDarkGreen{
	color: var(--blcTextColorDarkGreen);
}

.textLightGreen{
	color: var(--blcTextColorLightGreen);
}

.textBrown{
	color: var(--blcTextColorBrown);
}

.contentInsufficient{
	color:var(--blcDarkRed);
}
.contentComplete{
	color:var(--blcMidGreen);
}
.contentGrey{
	color:var(--blcIconColor);
}
.contentLock{
	color:var(--blcGray);
}

.text2ColumnView{
	columns: 2;
}

.blcCollapseHeader{
	padding: 0.75rem 1.25rem;
	margin-bottom: 0;
	background-color: rgba(0,0,0,.03);
	border-bottom: 1px solid rgba(0,0,0,.125);
}

.blcModalHeader{
	font-size: var(--stdText);
	font-weight:bold;
}

.blcModalContent{
	overflow-y: auto;
	min-height:auto;
	max-height: 300px;
}

.blcModalContentS{
	overflow-y: auto;
	min-height:auto;
	max-height: 11rem;
}

.blcRotText	{
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	display:inline-block;
	font-size: 0.5rem;
	line-height: 0.75rem;
}
.blcDiogonalStrips{
	height: 0.25rem;
	background: repeating-linear-gradient(
	    135deg,
	    var(--blcUltraDark),
	    var(--blcUltraDark) 1.5rem,
	    var(--blcOrange) 1.5rem,
	    var(--blcOrange) 3rem
	);
}

/* -------------------- */
/* END Content Classes*/
/* -------------------- */

/* ------------------------- */
/* START SUCCESS / ERROR MSG */
/* ------------------------- */

.blcAlertFixed {
    position:fixed; 
    top: 20%;
    /*width:325px;*/
    /*left: 33%;*/
    z-index:9999;
    border-radius:0px
}

/* ----------------------- */
/* END SUCCESS / ERROR MSG */
/* ----------------------- */

/* ---------------- */
/* START Background */
/* ---------------- */
.blcSilverBackground{
	background-color:var(--blcSilver);
}

.blcBgUltraDark{
	background-color: var(--blcUltraDark);
}
.blcBgHeaderDarkTheme{
	background-color: var(--blcDarkBlue3);
}


.blcGray{
	background-color: var(--blcGray);
}

.blcBgRed{
	background-color: var(--blcDeepRed);
}

.blcBgYellow{
	background-color: var(--blcRichYellow);
}
.blcBgLightGreen{
	background-color: var(--blclightGreen);
}
.blcBgMidGreen{
	background-color: var(--blcMidGreen);
}
.blcBgBrightGreen{
	background-color: var(--blcBrightGreen);
}
.blcBgDarkGreen{
	background-color: var(--blcDarkGreen);
}
.blcBgOrange{
	background-color: var(--blcOrange);
}
.blcBgLightBlue{
	background-color: var(--blcLightBlue);
}
.blcBgLogoLightBlue{
	background-color: var(--blcLogoLightBlue);
}
.blcBgMidBlue{
	background-color: var(--blcMidBlue);
}
.blcBgLogoDarkBlue{
	background-color: var(--blcLogoDarkBlue);
}
.blcBgDarkBlue{
	background-color: var(--blcDarkBlue);
}

.blcBgLightBlue0{
	background-color: #eef9ff;
}

.blcBgLightGreen1{
	background-color: var(--blcLightGreen1);
}

.blcBgLightGreen2{
	background-color: var(--blcLightGreen2);
}

.blcBgDarkGreen1{
	background-color: var(--blcDarkGreen1);
}

.blcBgDarkGreen2{
	background-color: var(--blcDarkGreen2);
}

.blcBgLightBlue1{
	background-color: var(--blcLightBlue1);
}

.blcBgLightBlue2{
	background-color: var(--blcLightBlue2);
}

.blcBgDarkBlue1{
	background-color: var(--blcDarkBlue1);
}

.blcBgDarkBlue2{
	background-color: var(--blcDarkBlue2);
}

.blcBgInspired{
	background-color: var(--blcLightGreen1);
}
.blcBgInspiring{
	background-color: var(--blcLogoLightBlue);
}


/* Start - Classes for Status */
.blcBgComplete{
	background-color: var(--blcMidGreen);
}

.blcBgInProgress{
	background-color: var(--blcLogoLightBlue);
}
/* END - Classes for Status */

/* Start - Classes for Cognitive Ability */
.blcBgCAbility1{
	background-color: var(--blcLogoLightBlue);
}
.blcBgCAbility2{
	background-color: var(--blcLightBlue2);
}
.blcBgCAbility3{
	background-color: var(--blcMidBlue);
}
.blcBgCAbility4{
	background-color: var(--blcLogoDarkBlue);
}
.blcBgCAbility5{
	background-color: var(--blcDarkGreen2);
}
.blcBgCAbility6{
	background-color: var(--blcDarkGreen1);
}
.blcBgCAbility7{
	background-color: var(--blcLightGreen2);
}
.blcBgCAbility8{
	background-color: var(--blcLightGreen1);
}
.blcBgCAbility0{
	background-color: var(--blcSilver);
}


/* END - Classes for Status */

/* -------------- */
/* END Background */
/* -------------- */

/* Border class used on dashboard */
.blcBorder{
	border-color: var(--blcSilver);
}
.blcBorderLightBlue{
	border: 0.15rem solid var(--blcLightBlue);
}
.blcBorderDarkBlue{
	border: 0.15rem solid var(--blcDarkBlue);
}

/* ---------- */
/* START BARS */
/* ---------- */
.topSlimBar1{
	height: var(--slimbarHeight);
	background-color: var(--blcLogoLightBlue); 
}
.topSlimBar2{
	height: var(--slimbarHeight);
	background-color: var(--blcLightBlue); 
}
.topSlimBar3{
	height: var(--slimbarHeight);
	background-color: var(--blcMidBlue);
}
.topSlimBar4{
	height: var(--slimbarHeight);
	background-color: var(--blcLogoDarkBlue);
}
.topSlimBar5{
	height: var(--slimbarHeight);
	background-color: var(--blcDarkBlue); 
}
.topSlimBar6{
	height: var(--slimbarHeight);
	background-color: var(--blcLogoLightBlue); 
}
.bottomSlimBar1{
	height: var(--slimbarHeight);
	background-color: var(--blcBrightGreen);
}
.bottomSlimBar2{
	height: var(--slimbarHeight);
	background-color: var(--blcMidGreen);
}
.bottomSlimBar3{
	height: var(--slimbarHeight);
	background-color: var(--blcDarkGreen);
}
.bottomSlimBar4{
	height: var(--slimbarHeight);
	background-color: var(--blcCreme);
}
.bottomSlimBar5{
	height: var(--slimbarHeight);
	background-color: var(--blcPurple);
}

/*START New slim bars*/

.slimBarLightGreen{
	height: var(--slimbarHeight);
	background-color: var(--blclightGreen);
}


.slimBarOrange{
	height: var(--slimbarHeight);
	background-color: var(--blcOrange);
}

.slimBarLogoLightBlue{
	height: var(--slimbarHeight);
	background-color: var(--blcLogoLightBlue);
}

.slimBarDarkGreen{
	height: var(--slimbarHeight);
	background-color: var(--blcDarkGreen);
}

/* 
.slimBarRed{
	height: var(--slimbarHeight);
	background-color: var(--blcDeepRed);
}
*/

.slimBarDeepRed{
	height: var(--slimbarHeight);
	background-color: var(--blcDeepRed);
}

.slimBarDeepRedOther{
	height: var(--slimbarHeight);
	background-color: var(--blcDarkRedOther);
}

.slimBarLogoDarkBlue{
	height: var(--slimbarHeight);
	background-color: var(--blcLogoDarkBlue);
}

/* 
.slimBarBLCRed{
	height: var(--slimbarHeight);
	background-color: var(--blcDeepRed);
}
*/

.slimBarGold{
	height: var(--slimbarHeight);
	background-color: var(--blcGold);
}

.slimBarMidGreen{
	height: var(--slimbarHeight);
	background-color: var(--blcMidGreen);
}

.slimBarSilver{
	height: var(--slimbarHeight);
	background-color: var(--blcSilver);
}

.slimBarRichYellow{
	height: var(--slimbarHeight);
	background-color: var(--blcRichYellow);
}

.slimBarUltraDark{
	height: var(--slimbarHeight);
	background-color: var(--blcUltraDark);
}

.slimBarPurple{
	height: var(--slimbarHeight);
	background-color: var(--blcPurple);
} 
/*END New slim bars*/

.horizontalDivider{
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
	height: 0.05rem;
	background-color:var(--blcDeepRed);
}

.horizontalDividerUltraDark{
	height: 0.05rem;
	background-color:var(--blcUltraDark);
}

/* PROGRESS BAR */
.episodeProgressBar{
	background-color:var(--blcLogoDarkBlue);
}
.progressbarHeight{
	height:var(--progressbarHeight);
}
/* -------- */
/* END BARS */
/* -------- */


/* ----------- */
/* START ICONS */
/* ----------- */
/*
.blcIconXXS{
	font-size:var(--iconSizeXXS);
	color:var(--blcIconColor);
}
*/
.blcIconS{
	font-size:var(--iconSizeS);
}
.blcNavNotification{
	position:absolute;
	/*top:4px;
	left:40px;*/
	width: 1rem;
  	height: 1rem;
  	border-radius: 50%;
  	font-size: 0.6rem;
  	background-color: var(--blcDeepRed);
  	color: white;
  	line-height: 1rem;
  	text-align: center;
  	z-index:1;
	
	/*font-size:9px;
	color:var(--blcDeepRed);
	position:relative;
	top:-9px;
	left:-10px;
	z-index:1;*/
}

.blcIcon{
	font-size:var(--iconSize);
	color:var(--blcIconColor);
}
.blcIconM{
	font-size:var(--iconSizeM);
	color:var(--blcIconColor);
}
.blcIconL{
	font-size:var(--iconSizeL);
	color:var(--blcIconColor);
}
.blcIconXL{
	font-size:var(--iconSizeXL);
	color:var(--blcIconColor);
}

.iconHelp{
	font-size:var(--iconSize);
	color:var(--blcOrange);
}

.iconInsufficient{
	font-size:var(--iconSize);
	color:var(--blcDarkRed);
}

.iconUnlock{
	font-size:var(--iconSize);
	color:var(--blcSilver);
}

.iconLocked{
	font-size:var(--iconSize);
	color:var(--blcIconColor);
}

.iconComplete{
	font-size: var(--iconSize);
	color:var(--blcMidGreen);
}

.iconDependency{
	font-size: var(--actionIconSize);
	color:var(--blcRichYellow);
}

.iconRed{
	font-size: var(--iconSize);
	color:var(--blcDeepRed);
}

.iconLightBlue1{
	color:var(--blcLightBlueIconColor);
}

.iconRedM{
	font-size: var(--iconSizeM);
	color:var(--blcDeepRed);
}

.rateStar{
	font-size: var(--iconSize);
	color:var(--blcOrange);
}

.iconMidGreen{
	color:var(--blcMidGreen);
}

.iconOrange{
	color:var(--blcOrange);
}
.iconDeepRed{
	color:var(--blcDeepRed);
}
.iconLogoDarkBlue{
	color:var(--blcLogoDarkBlue);
}
.iconLogoLightBlue{
	color:var(--blcLogoLightBlue);
}
.iconRichYellow{
	color:var(--blcRichYellow);
}
.iconDarkRed{
	color:var(--blcDarkRed);
}
.iconLightBlue{
	color:var(--blcLightBlue);
}

.iconBrightGreen{
	color:var(--blcBrightGreen);
}

.iconTrophyBrightGreen{
	font-size: var(--iconSize);
	color:var(--blcBrightGreen);
}

.iconTrophyGold{
	font-size: var(--iconSize);
	color:var(--blcGold);
}

.iconPurple{
	color:var(--blcPurple);
}



.blcSvgIcon{
	display: inline-block;
	width: 1.25rem; /* 1.2rem */
	height: 1.25rem; /* 1.2rem */
	color:var(--blcIconColor);
}

.blcSvgIconL{
	display: inline-block;
	width: 1.5rem; 
	height: 1.5rem;
	color:var(--blcIconColor);
}

.blcSvgIconXL{
	display: inline-block;
	width: 2rem; 
	height: 2rem;
	color:var(--blcIconColor);
}
	
.blcSvgIcon svg, .blcSvgIconL svg, blcSvgIconXL svg {
	width: 100%;
	height: 100%;
}

.blcImageHoverIcon{
	display:none;
	position: absolute;
  	top: 0;
  	left: 15px;
  	background-color: var(--blcUltraDark);
  	font-size: var(--stdText);
  	color:white;
  	padding: 0;
  	cursor: pointer;
}
.blcImageHoverIcon:hover{
	display:block;
}

.blcOnHoverImage:hover + .blcImageHoverIcon{
	display:block;
}

.blcCircle {
  	width: 1.5rem;
  	height: 1.5rem;
  	border-radius: 50%;
  	font-size: var(--stdTextS);
  	/*color: #fff;*/
  	line-height: 1.5rem;
  	text-align: center;
}

/*used for showing required fields on form*/
.fa-asterisk{
	color:var(--blcDeepRed);
	font-size: 0.4rem;
}

/* facbook icon*/
.fa-facebook-square, .fi-snsuxl-facebook{
	font-size: var(--iconSize);
	color: #3b5998;
}
/* LinkedIn icon*/
.fa-linkedin, .fi-snsuxl-linkedin{
	font-size: var(--iconSize);
	color:#007bb5;
}

/* Zoom icon*/
.fa-zoom, .fi-snsuxl-zoom{
	font-size: var(--iconSize);
	color: #3b5998;
}

/* Twitter icon*/
.fi-stluxl-twitter{
	font-size: var(--iconSize);
	color:#1DA1F2;
}
/* --------------- */
/* END START ICONS */
/* --------------- */


/* ------------ */
/* START Cursor */
/* ------------ */
.helpCursor{
	cursor: help;
}
.moveCursor{
	cursor: move;
}
.pointerCursor{
	cursor: pointer;
}
/* ---------- */
/* END Cursor */
/* ---------- */


/* ------------ */
/* START Images */
/* ------------ */

/* Profile Pic */
.photoStd{
	height: 3.6rem;
	width: 3.6rem; 
}

.photoLarge{
	height: 4.8rem;
	width: 4.8rem; 
}

.photoMessenger{
	height: 4rem;
	width: 4rem; 
}
.blcLogoS{
	width: 1.5rem;
}

.photoCanvas{
	height: 2.4rem;
	width: 2.4rem;
}
.photoTooltip{
	height: 1.9rem;
	width: 1.9rem;
}

.photoBlcIcon{
	height: 1.4rem;
	width: 1.4rem;
}

.photoBlcSnippet{
	height: 0.9rem;
	width: 0.9rem;
}

.photoFluid{
	max-width: 100%;
	height: auto;
}

.mostActiveUser{
	font-size:var(--iconSize);
	color:var(--blcLogoLightBlue);
	position:relative;
	top:15px;
	left:1px;
	z-index:1;
}

/* PROJECT IMAGE */
.blcImage{
	height: 3.6rem;
	width: 3.6rem; 
}
.blcImageM{
	height: 2.4rem;
	width: 2.4rem; 
}

/* Achievement Value */
.blcAchievement{
	height: 0.5rem;
	width: 1rem;
	margin-left:1px; 
	background-color:var(--blcSilver);
	cursor:pointer;
}
/* Block Rating */
.blcBlockRating {
	height: 0.5rem;
	width: 1.2rem;
	margin-left:2px;
	margin-top:5px;
	margin-bottom:5px; 
	background-color:var(--blcSilver);
	cursor:pointer;
}

.blcProgressDisplay{
	height: 0.6rem;
	width: 3rem;
	margin-left:2px; 
	background-color:var(--blcSilver);
}
.blcAbilityRating{
	height: 1.2rem;
	width: 1rem;
	margin-right:8px; 
	/*background-color:var(--blcSilver);*/
	cursor:pointer;
}

/* For ViewPort Full Height */
.blcVh100{
	min-height:calc(100vh - 340px);
}

/*
.profilePicS{
	height:30px;
	width:30px; 
}

.profilePic{
	height:50px;
	width:50px; 
}

.profilePicL{
	height:100px;
	width:100px; 
}*/
/* ------------ */
/* END Images */
/* ------------ */


/* ------------ */
/* START Button */
/* ------------ */
.bclBorderlessBtn{
	border:none; 
	background: none; 
	padding: 0;
}

.bclBorderlessBtn:focus{
	border:none; 
	background: none; 
	padding: 0;
	outline:none;
}

.submitButton, .submitButton:focus{
	background-color:var(--blcLogoDarkBlue);
	color:white;
	outline:none;
	border:none;
	border-radius: 5px;
}
.submitButton:hover{
	color:white;
	outline:none;
	border:none;
	border-radius: 5px;
}
.submitButton:active{
	transform: scale(0.98);
}
.greenButton, .greenButton:focus{
	background-color:var(--blcMidGreen);
	color:white;
	outline:none;
	border:none;
	border-radius: 5px;
}
.greenButton:hover{
	color:white;
	outline:none;
	border:none;
	border-radius: 5px;
}
.greenButton:active{
	transform: scale(0.98);
}

.cancelButton, .cancelButton:focus{
	background-color:var(--blcLogoLightBlue);
	color:white;
	outline:none;
	border:none;
	border-radius: 5px;
}
.cancelButton:hover{
	color:white;
	outline:none;
	border:none;
	border-radius: 5px;
}
.cancelButton:active{
	transform: scale(0.98);
}

.deleteButton, .deleteButton:focus{
	background-color:var(--blcDeepRed);
	color:white;
	outline:none;
	border:none;
	border-radius: 5px;
}
.deleteButton:hover{
	color:white;
	outline:none;
	border:none;
	border-radius: 5px;
}
.deleteButton:active{
	transform: scale(0.98);
}

.silverButton, .silverButton:focus{
	background-color:var(--blcSilver);
	color:#404040;
	outline:none;
	border:none;
	border-radius: 5px;
}
.silverButton:hover{
	color:#404040;
	outline:none;
	border:none;
	border-radius: 5px;
}
.silverButton:active{
	transform: scale(0.98);
}

.helpButton{
	background-color:var(--blcLightBlue);
}
/* ---------- */
/* END Button */
/* ---------- */

/* --------------- */
/* START ScrollBar */
/* --------------- */
.blcAutoExpandS {
	max-height: 15em;
	overflow-y:auto !important;
}
.blcAutoExpandM {
	max-height: 23em;
}
.blcAutoExpandL {
	max-height: 38em;
}
.scrollbarSlim1::-webkit-scrollbar-track, .scrollbarSlim2::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	/*background-color: var(--blcSilver);*/
	border-radius: 10px;
}
.scrollbarSlim1::-webkit-scrollbar-thumb, .scrollbarSlim2::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-image: -webkit-linear-gradient(330deg, var(--blcSilver) 0%, var(--blcSilver) 100%);
	background-image: linear-gradient(120deg, var(--blcSilver) 0%, var(--blcSilver) 100%);
	/*background-image: -webkit-linear-gradient(330deg, #e0c3fc 0%, #8ec5fc 100%);*//* 330deg, #f6d365 0%, #fda085 100% */
	/*background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);*//* 120deg, #f6d365 0%, #fda085 100% */
}
.scrollbarSlim1, .scrollbarSlim2 {
	/*scrollbar-color: var(--blcLogoLightBlue) var(--blcSilver);*/ /* #8ec5fc #F5F5F5 */
	/*overflow-y:scroll !important;*/
}
.scrollbarSlim1::-webkit-scrollbar {
	width: 10px;
	/*background-color: var(--blcSilver);*/
}
.scrollbarSlim2::-webkit-scrollbar {
	width: 7px;
	/*background-color: var(--blcSilver);*/
	
}
/* ------------- */
/* END ScrollBar */
/* ------------- */

/* --------------------------------------------------------------------------------------- */
/* START - FOR MATERIAL DESIGN REMOVE UPPERCASE STYLE OF BUTTON, .btn IS CLASS OF BOOTSTRAP*/
/* --------------------------------------------------------------------------------------- */
.btn{
	text-transform: capitalize;
}

.md-form .form-control{
	border: 0 !important;
	background: white no-repeat;
	background-image: linear-gradient(to bottom, #3f51b5, #3f51b5), linear-gradient(to bottom, #DFDFDF, #DFDFDF);
	background-size: 0 1px, 100% 1px !important;
	background-position: 50% 100%, 50% 100% !important;
	transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1) !important;
}
.md-form .form-control:focus{
  	background-size: 100% 1px, 100% 1px !important;
	outline: none !important;
}


.md-form label {
    font-size: var(--stdText) !important;
}

.md-form label.active {
    font-size: var(--stdText) !important;
    background-color:white;
    color:#3f51b5 !important;
}
/* ------------------------------------------------------------------------------------- */
/* END - FOR MATERIAL DESIGN REMOVE UPPERCASE STYLE OF BUTTON, .btn IS CLASS OF BOOTSTRAP*/
/* ------------------------------------------------------------------------------------- */


/* ---------------------- */
/* START TABLE RESPONSIVE */
/* ---------------------- */
.tableResponsive {
	border:none;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
}
	
.tableResponsive .trResponsive {
	border:none;
	padding: .35em;
}
	
.tableResponsive .thResponsive,
.tableResponsive td {
  	padding: .325em;
  	text-align: left;
  	vertical-align: top;
  	word-break: break-all;
}
	
.tableResponsive .thResponsive {
	/*font-size: var(--stdText);*/
	/*letter-spacing: .1em;*/
	text-transform: capitalize;
}
	
@media screen and (max-width: 1000px) {
	.tableResponsive {
		border:none;
	}
	  
	.tableResponsive .theadResponsive {
    	border: none;
    	clip: rect(0 0 0 0);
    	height: 1px;
    	margin: -1px;
    	overflow: hidden;
    	padding: 0;
    	position: absolute;
    	width: 1px;
	}
	  
	.tableResponsive .trResponsive {
	    border-bottom: 5px solid var(--blcLogoLightBlue);
	    display: block;
	    margin-bottom: .625em;
	}
	
	.tableResponsive .blcRedDivider {
    	border-bottom: 1px solid var(--blcDeepRed);
    }
	  
	.tableResponsive .tdResponsive {
	    border:none;
	    display: block;
	    font-size:var(--stdText);
	    text-align: right;
	}
	  
	.tableResponsive .tdResponsive::before {
	    content: attr(data-label);
	    float: left;
	    font-weight: bold;
	    text-transform: capitalize;
	}
	  
	.tableResponsive .tdResponsive:last-child {
    	border:none;
	 }
}/* end media screen */

.blcStickyHeader{
	position: sticky;
	top: 47px;
}

@media (min-width: 992px) {
	.blcFreezePageHeader{
		position: sticky;
		top: 5.0625rem;/*--SAME AS BODY PADDING TOP-- 5.3125rem */
		z-index: 99;
		background-color: white;
	}
	.blcFreezePageHeaderPub{
		position: sticky;
		top: 4.2rem;
		z-index: 99;
		background-color: white;
	}
}

@media (min-width: 992px) {
	.blcFreezeTop{
		position: sticky;
		z-index: 75;
		background-color: white;
	}
	.blcFreezeTopImage{
		/*position: fixed;*/
		/*height: 100%;*/
	}
}

/* ------------------- */
/*END TABLE RESPONSIVE */
/* ------------------- */

/* --------------------------------------------------------------- */
/*Start Radio Button for Project Status (stuck,delayed,in-progress)*/
/* --------------------------------------------------------------- */
.switch-field {
	display: flex;
	margin-bottom: 5px;
	overflow: hidden;
}
.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}
.switch-field label {
	background-color: var(--blcSilver);
	color: rgba(0, 0, 0, 0.6);
	font-size: var(--stdText);
	line-height: 1;
	text-align: center;
	padding: 8px 16px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
	cursor: pointer;
}
.switch-field input:checked + label {
	color: white;
	box-shadow: none;
}
.switch-field label:first-of-type {
	border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
	border-radius: 0 4px 4px 0;
}
/* ------------------------------------------------------------- */
/*End Radio Button for Project Status (stuck,delayed,in-progress)*/
/* ------------------------------------------------------------- */

/* ----------- */
/* GAUGE CHART */
/* ----------- */
div[id^=power-gauge] g.pointer, div[id^=power-activity] g.pointer{
	fill: var(--blcOrange);
	stroke: var(--blcOrange);
}

div[id^=power-gauge] g.label text, div[id^=power-activity] g.label text{
	text-anchor: middle;
	font-size: var(--stdTextS);
	font-weight: bold;
	fill: var(--blcUltraDark);
}

/* -------------- */
/*END GAUGE CHART */
/* -------------- */

/* -------------- */
/*   START MODAL  */
/* -------------- */

.close:focus {outline:none;}

/* -------------- */
/*   END MODAL    */
/* -------------- */

/* ==============================
            Grow Elements
=================================*/
.blcGrow {
	-webkit-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
.blcGrow:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.blcGrowS {
	-webkit-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
.blcGrowS:hover {
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
}
/* ==============================
            End Grow Elements
=================================*/

/* ==============================
            Slider Button
=================================*/

.blcSwitch {
  position: relative;
  display: inline-block;
  top:0;
  width: 44px;
  height: 20px;
}

.blcSwitch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.blcSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--blcSilver);
  -webkit-transition: .4s;
  transition: .4s;
}

.blcSlider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.blcSwitch input:checked + .blcSlider {
  background-color: var(--blcMidGreen);
}

.blcSwitch input:focus + .blcSlider {
  box-shadow: 0 0 1px var(--blcMidGreen);
}

.blcSwitch input:checked + .blcSlider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.blcSlider.blcSliderRound {
  border-radius: 34px;
}

.blcSlider.blcSliderRound:before {
  border-radius: 50%;
}

/* ==============================
          End Slider Button
=================================*/

/* -------------- */
/*   START COIN   */
/* -------------- */
#blcCallomCoin {
    /*position: absolute;*/
    position: fixed;
    top: 50%;
    right:5%;
    /* font-size: var(--stdTextXL);*/ /* topicImportant */
    /*color: white;*/
     width: 1px;
	 height: 1px;
	 /* line-height: 1px;*/
	 text-align: center;
	 z-index: 1001;
    /*padding: 10px 30px;*/
    /*border: 1px solid var(--blcOrange);
    box-shadow: 0px 0px 9px 3px rgba(196,188,196,1);*/
    border-radius: 50%;
    /*background-color: var(--blcOrange);*/
	/*background-color: transparent; */
	cursor: pointer;
    transition: transform 0.5s;
}

#blcCallomCoin.animated {
    box-shadow: none;
    animation: vaporize 3.5s;
    /*animation: vaporize 1.5s;*/
    animation-fill-mode: forwards
}

#blcCallomCoin.animated + .value {
   top: 180px;
   right:85px;
   animation: rise-up-in-smoke 2s;
   
}


#blcCallomCoinMiddle {
    /*position: absolute;*/
    position: fixed;
    top: 50%;
    right:2%;
    /* font-size: var(--stdTextXL);*/ /* topicImportant */
    /*color: white;*/
     width: 1px;
	 height: 1px;
	 /* line-height: 1px;*/
	 text-align: center;
	 z-index: 1001;
    /*padding: 10px 30px;*/
    /*border: 1px solid var(--blcOrange);
    box-shadow: 0px 0px 9px 3px rgba(196,188,196,1);*/
    border-radius: 50%;
    /*background-color: var(--blcOrange);*/
	/*background-color: transparent; */
	cursor: pointer;
    transition: transform 0.5s;
}

#blcCallomCoinMiddle.animated {
    box-shadow: none;
    animation: vaporize 4.5s;
    /*animation: vaporize 1.5s;*/
    animation-fill-mode: forwards
}

#blcCallomCoinMiddle.animated + .value {
   top: 180px;
   right:85px;
   animation: rise-up-in-smoke 4s;
   
}

#blcCallomCoinLast {
    /*position: absolute;*/
    position: fixed;
    top: 50%;
    right:5%;
    /* font-size: var(--stdTextXL);*/ /* topicImportant */
    /*color: white;*/
     width: 1px;
	 height: 1px;
	 /* line-height: 1px;*/
	 text-align: center;
	 z-index: 1001;
    /*padding: 10px 30px;*/
    /*border: 1px solid var(--blcOrange);
    box-shadow: 0px 0px 9px 3px rgba(196,188,196,1);*/
    border-radius: 50%;
    /*background-color: var(--blcOrange);*/
	/*background-color: transparent; */
	cursor: pointer;
    transition: transform 0.5s;
}

#blcCallomCoinLast.animated {
    box-shadow: none;
    animation: vaporize 5.5s;
    /*animation: vaporize 1.5s;*/
    animation-fill-mode: forwards
}

#blcCallomCoinLast.animated + .value {
   top: 180px;
   right:85px;
   animation: rise-up-in-smoke 6s;
   
}


.blcCallomCoinValue{
	display:inline-block;
 	transform: scaleX(-1);  /* Or also:   rotateY(180deg) */

	-ms-filter: blcCallomCoinValue;
	filter: blcCallomCoinValue;
}


@keyframes rise-up-in-smoke {
  	from {
  		font-size: var(--stdTextXL);
	    top: 120px;
  		/*opacity: 1;*/
    	/*opacity: 0;*/
  	}
  	30% {
	    /*opacity: 1;*/
	    font-size: var(--stdTextXL);/* 33px */
	    top: 120px;
  	}
  	45% {
	    /*opacity: 1;*/
	    font-size: var(--stdTextXL);/* 33px */
	    top: 120px;
  	}
  	to {
	    /*opacity: 0;*/
	    /*top: 20px;*/
	    /*opacity: 1;*/
	    top: -200px;
	    font-size: var(--stdTextL);/* 25px */
  	}
}


@-webkit-keyframes rise-up-in-smoke {
  	from {
  		font-size: var(--stdTextXL);
	    top: 120px;
  		/*opacity: 1;*/
    	/*opacity: 0;*/
  	}
  	30% {
	    /*opacity: 1;*/
	    font-size: var(--stdTextXL);/* 33px */
	    top: 120px;
  	}
  	45% {
	    /*opacity: 1;*/
	    font-size: var(--stdTextXL);/* 33px */
	    top: 120px;
  	}
  	to {
	    /*opacity: 0;*/
	    /*top: 20px;*/
	    /*opacity: 1;*/
	    top: -200px;
	    font-size: var(--stdTextL);/* 25px */
  	}
}

@keyframes vaporize {
	from {
	    /*top: 100px;*/
	    top: 45%;
	    /*opacity: 1;*/
	    transform: scale(1);
  	}
  	10% {
    	transform: rotate3d(0, 1, 0, 180deg);
  	}
	30% {
	    transform: rotate3d(0, 1, 0, 180deg);
	}
  	to {
	    /*top: -200px;*/
	    top: -10%;
	    transform: scale(0);
	    /*opacity: 1;*/
	    /*opacity: 0;*/
  	}
}

@-webkit-keyframes vaporize {
	from {
	    /*top: 100px;*/
	    top: 45%;
	    /*opacity: 1;*/
	    transform: scale(1);
  	}
  	10% {
    	transform: rotate3d(0, 1, 0, 180deg);
  	}
	30% {
	    transform: rotate3d(0, 1, 0, 180deg);
	}
  	to {
	    /*top: -200px;*/
	    top: -10%;
	    transform: scale(0);
	    /*opacity: 1;*/
	    /*opacity: 0;*/
  	}
}

/* -------------- */
/*   END COIN     */
/* -------------- */

/* --------------------- */
/*   START COIN DEDUCT   */
/* --------------------- */
#blcCallomCoinDeduct {
	position: fixed;
    bottom: 100%;
    right:5%;
    /*font-size: var(--stdTextXL);
    color: white;*/
    width: 1px;
	height: 1px;
	/*line-height: 80px;*/
	text-align: center;
	z-index: 1001;
    border-radius: 50%;
    /*background-color: var(--blcOrange);*/
    cursor: pointer;
    transition: transform 0.5s;
}

#blcCallomCoinDeduct.animated {
    box-shadow: none;
    animation: deductVaporize 3.5s;
    animation-fill-mode: forwards
}

#blcCallomCoinDeduct.animated + .value {
   bottom: 280px;
   right:85px;
   animation: go-down-in-smoke 2s;
   
}

#blcCallomCoinDeductMiddle {
	position: fixed;
    bottom: 100%;
    right:2%;
    /*font-size: var(--stdTextXL);
    color: white;*/
    width: 1px;
	height: 1px;
	/*line-height: 80px;*/
	text-align: center;
	z-index: 1001;
    border-radius: 50%;
    /*background-color: var(--blcOrange);*/
    cursor: pointer;
    transition: transform 0.5s;
}

#blcCallomCoinDeductMiddle.animated {
    box-shadow: none;
    animation: deductVaporize 4.5s;
    animation-fill-mode: forwards
}

#blcCallomCoinDeductMiddle.animated + .value {
   bottom: 280px;
   right:85px;
   animation: go-down-in-smoke 4s;
   
}

#blcCallomCoinDeductLast {
	position: fixed;
    bottom: 100%;
    right:5%;
    /*font-size: var(--stdTextXL);
    color: white;*/
    width: 1px;
	height: 1px;
	/*line-height: 80px;*/
	text-align: center;
	z-index: 1001;
    border-radius: 50%;
    /*background-color: var(--blcOrange);*/
    cursor: pointer;
    transition: transform 0.5s;
}

#blcCallomCoinDeductLast.animated {
    box-shadow: none;
    animation: deductVaporize 5.5s;
    animation-fill-mode: forwards
}

#blcCallomCoinDeductLast.animated + .value {
   bottom: 280px;
   right:85px;
   animation: go-down-in-smoke 6s;
   
}

.blcCallomCoinDeductValue{
	display:inline-block;
 	transform: scaleX(-1);
	-ms-filter: blcCallomCoinDeductValue;
	filter: blcCallomCoinDeductValue;
}

@keyframes go-down-in-smoke {
  	from {
  		font-size: var(--stdTextXL);
	    bottom: 220px;
  	}
  	30% {
	    font-size: var(--stdTextXL);
	    bottom: 220px;
  	}
  	45% {
	    font-size: var(--stdTextXL);
	    bottom: 220px;
  	}
  	to {
	    bottom: -200px;
	    font-size: var(--stdTextL);
  	}
}


@-webkit-keyframes go-down-in-smoke {
  	from {
  		font-size: var(--stdTextXL);
	    bottom: 220px;
  	}
  	30% {
	    font-size: var(--stdTextXL);
	    bottom: 220px;
  	}
  	45% {
	    font-size: var(--stdTextXL);
	    bottom: 220px;
  	}
  	to {
	    bottom: -200px;
	    font-size: var(--stdTextL);
  	}
}

@keyframes deductVaporize {
	from {
	    bottom: 100%;
	    transform: scale(1);
  	}
  	10% {
    	transform: rotate3d(0, 1, 0, 180deg);
  	}
	30% {
	    transform: rotate3d(0, 1, 0, 180deg);
	}
  	to {
	    bottom: 50%;
	    transform: scale(0);
  	}
}

@-webkit-keyframes deductVaporize {
	from {
	    bottom: 85%;
	    transform: scale(1);
  	}
  	10% {
    	transform: rotate3d(0, 1, 0, 180deg);
  	}
	30% {
	    transform: rotate3d(0, 1, 0, 180deg);
	}
  	to {
	    bottom: 50%;
	    transform: scale(0);
  	}
}

/* ------------------- */
/*   END COIN DEDUCT   */
/* ------------------- */

/* ---------------------------------------------------------------------------------------------- */
/* -------------------------------- START STYLE FOR SUMMERNOTE EDITOR---------------------------- */
/* ---------------------------------------------------------------------------------------------- */

/*.note-btn.dropdown-toggle:after {
   content: none;
}
.note-editable {
	font-family: var(--fontFamily);
	color: inherit;
	font-weight: inherit;
	font-size: var(--stdText)!important;
}
.link-dialog {
	font-family: var(--fontFamily);
	color: inherit;
	font-weight: inherit;
	z-index: 999999;
}
.note-modal-footer{
	margin-bottom: 1rem;
}
.note-form-label{
	font-family: var(--fontFamily);
	color: inherit;
	font-weight: inherit;
}*/


.modal {
    overflow-y:auto;
}

.sn-checkbox-use-protocol {
	display:none;
}

.note-editing-area .note-editable p {
	 margin-bottom: 0 !important;
}

.blcSummernoteDisplayArea p {
	margin-bottom: 0 !important;
}

/*.note-image-btn, .note-link-btn {
	background-color:var(--blcUltraDark) !important;
	color:white !important;
	font-size: var(--stdText) !important;
}*/

/* ---------------------------------------------------------------------------------------------- */
/* -------------------------------- END STYLE FOR SUMMERNOTE EDITOR------------------------------ */
/* ---------------------------------------------------------------------------------------------- */



/* ==============================
            Pagination
=================================*/
.page-item.active .page-link {
  	z-index: 1;
  	color: #fff;
  	font-size: 20px!important;
  	background-color: var(--blcLogoDarkBlue) !important;
  	border-color: var(--blcLogoDarkBlue)
}
.page-item{
	border: 1px solid var(--blcSilver);
	border-collapse: collapse;
}
.page-item a{
	font-size: 20px !important;
	margin: 0;
}

/* ==============================
           End Pagination
=================================*/




/* ---------------------------------------------------------------------------------------------- */
/* -------------------------------- START STYLE FOR MY TEAM ------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
.blcMyteamSection{
	overflow-y: auto;
	height: calc(100vh - 278px);/* 400px 55vh calc(100vh - 53px);*/
}
/* ---------------------------------------------------------------------------------------------- */
/* -------------------------------- END STYLE FOR MY TEAM --------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------------------- */
/* -------------------------------- START STYLE FOR HOME PAGE A --------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
.blcHomePgASection{
	overflow-y: scroll;
	height: 295px;
}
.blcHomePgASectionLarge{
	overflow-y: scroll;
	height: 605px;
}
/* ---------------------------------------------------------------------------------------------- */
/* -------------------------------- END STYLE FOR HOME PAGE A------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------- */
/* -------------------------------- START STYLE FOR BLUECALLUM HOME ----------------------------- */
/* ---------------------------------------------------------------------------------------------- */

.blcHomeTeamList{
	height:calc(100vh - 348px);/*370px*/
	overflow-y:auto;
}

/* ---------------------------------------------------------------------------------------------- */
/* -------------------------------- END STYLE FOR BLUECALLUM HOME ------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


.blcOpeningTeamList{
	height:calc(100vh + 100px);
	overflow-y:auto;
}

/* Issue In Safari Browser */
@media (min-width: 992px) {
	.cardVHHeight{
		height: 40vh;
		/*-webkit-height: 100%;
		-moz-height: 100%;
		-webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;*/
	}
	
	.cardVHHeightS{
		height: 30vh;
	}
	.cardVHHeightM{
		height: 70vh;
	}
	.cardVHHeightL{
		height: 120vh;
	}
}




/* Styles for headline tags */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  h5 {
    font-size: 1.125rem;
  }
  h6 {
    font-size: 1rem;
  }




.markdownTableBLC {
	border-collapse: collapse;
	width: 100%;
}

.markdownTableBLC th {
	background-color: var(--blcSilver);
	font-weight: bold;
}

.markdownTableBLC th, .markdownTableBLC td {
	border: 1px solid var(--blcGray);
	padding: 8px;
	text-align: left;
}

/* FOR SUMMERNOTE */