.comp-tradeTiles .comp-item-tradeTile
{
	flex:1 0 300px;
}

.comp-item-tradeTile .c2-returnPercent-value
{
	font-size: 27px;
    font-weight: 300;
    color: #79BB00;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.2;
    height: 2.1em;
}

.newbieWarningArea
{
	margin-top:10em;
}
.chartsyslink
{
	color: #f3f3f3;
    font-weight: 600;
    border-bottom: 1px dashed #6a6a6a;
}

#content2colbig
{
	padding-top:3px !important;
}

h1,h2
{
	color: #689a18 !important;
    font-family: roboto, sans-serif !important;

}
h2
{
	margin-top: 30px !important;
    margin-bottom: 20px !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
}

/*topstack wrap/nowrap */
.topStack {
	display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
}


/*
	
	This was fernanda's original:
	
	Matthew commented it out in order to make his other changes sort of work.

	
@media screen and (min-width: 1100px) {
	.sideNavHidden .topStack {
		flex-wrap: nowrap;
	}
}

@media screen and (min-width: 1265px) {
	.sideNavShowing .topStack {
		flex-wrap: nowrap;
	}
}
*/


 
 


@media screen and (min-width: 1265px) {
	.sideNavShowing .notesPlusProfile {
		margin-left: 15px;
	}
}

.notesPlusProfile_inner
{
	display: flex;
	flex-wrap: nowrap;
	justify-content:center;
	height: 100%;
}
.bottomStack
{
	display: flex;
    flex-wrap: wrap;
} 

.portfolioChartsBlock {
	width: 100%;
}

@media screen and (min-width: 768px) {
	.portfolioChartsBlock {
		flex: 1 0 600px;
		width: auto;
	}	
}

.notesWrittenBlock
{
	flex: .5 0 220px;
	border: 1px solid #ddd;
	padding: 20px 40px 20px 20px;
	overflow: hidden;
}
.notesWrittenInner
{
	height:450px;
    overflow-x:hidden;
    overflow-y:scroll;
    width: 100%;
    width: calc(100% + 40px); /* this, combined with the width calc for .notesUnit (below), hides the ugly vertical scroll bars */
}

.c2g .notesWrittenInner h3 {
	margin-bottom: 0;
}
.notesUnit
{
    position: relative;
    cursor:pointer;
    width: calc(100% - 20px); /* this, combined with the width calc for .notesWrittenInner (above), hides the ugly vertical scroll bars */
}
.notesUnit .externalLink
{
	display:none;
}

h1.lm
{
	 text-align: center !important;
	 margin-top: 35px !important;
	 margin-bottom:5px !important;
}
.stackUnit
{
	justify-content: center;
    align-items:center;
}


.stackUnit.mixedPorfolioHolder {
	height: 465px;
	width: 100%;
	flex: 0 0 100%;
	margin-bottom: 15px;
}

p.careful
{
	margin: 7px 20px 0 20px;
    font-size: 12px;
    line-height: 1.5;
}
    
@media screen and (min-width: 1100px) {
	.sideNavHidden .stackUnit.mixedPorfolioHolder {
		flex: 1 0 400px; /* was 600 */
		height: 490px;
		margin-bottom: 0;
	}
}

@media screen and (min-width: 1265px) {
	.sideNavShowing .stackUnit.mixedPorfolioHolder {
		flex: 1 0 400px; /* was 600 */
		height: 490px;
		margin-bottom: 0;
	}

}
	

.hasOtherBrokers .stackUnit.mixedPorfolioHolder
{
	height: 445px;
}
.notesPlusProfile {
	margin: 0;
	flex: 1 0 600px;
}

.noPortfolioNotes .notesPlusProfile
{
	flex: 1 0 300px;
}

.stackUnit.mainProfile
{
	flex: 1 0 300px;
	margin-left: 15px;
}

.portfoliosTrackingEncloser .stackUnit.mainProfile
{
	flex: 1 0 500px;
}

@media screen and (min-width: 945px) {

	.stackUnit.mainProfile.viewerIsTaggingAlong,
	.stackUnit.mainProfile.viewerIsPeekingHimself {
		flex: 1 0 565px;
	}

}


/* fernanda's original */

.stackUnit.mixedPorfolioHolder.viewerIsTaggingAlong,
.stackUnit.mixedPorfolioHolder.viewerIsPeekingHimself
{
	flex: 1 0 500px;
}



/* matthew's override change */
/* fernanda - I think this might be the right approach? When viewer is tagging along to a person with notes, or when he is peeking himself,
	this makes the chart full width. We would still need to clean up the margins and make the chart height smaller, but maybe this is a start?*/
.stackUnit.mixedPorfolioHolder.viewerIsTaggingAlong, 
.stackUnit.mixedPorfolioHolder.viewerIsPeekingHimself {
	flex: 1 0 100%;
	margin-bottom: 15px;
		height: 340px;
}

/* end matthew change */

.topStack.hasPortfolioNotes.viewerIsTaggingAlong .notesPlusProfile_inner {
	flex-wrap: wrap;
}
@media screen and (min-width: 951px) {
	.sideNavHidden .topStack.hasPortfolioNotes.viewerIsTaggingAlong .notesPlusProfile_inner,
	.sideNavHidden .topStack.hasPortfolioNotes.viewerIsPeekingHimself .notesPlusProfile_inner {
		flex-wrap: nowrap;
	}	
}
@media screen and (min-width: 1116px) {
	.sideNavShowing .topStack.hasPortfolioNotes.viewerIsTaggingAlong .notesPlusProfile_inner,
	.sideNavShowing .topStack.hasPortfolioNotes.viewerIsPeekingHimself .notesPlusProfile_inner {
		flex-wrap: nowrap;
	}	
}


.tagAlongUnit {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	border: 1px solid #1f3a4c;
	background-color: #1f3a4c;
	color: #efefef;
	height: auto;
}

@media screen and (min-width: 1100px) {
	.sideNavHidden .tagAlongUnit {
		height: 100%;
	}
}

@media screen and (min-width: 1265px) {
	.sideNavShowing .tagAlongUnit {
		height: 100%;
	}
}



.notesWrittenBlock + .mainProfile .tagAlongUnit {
	margin-top: 15px;
}

@media screen and (min-width: 769px) {
  .notesWrittenBlock + .mainProfile .tagAlongUnit {
    height: 100%;
  }

  .notesWrittenBlock + .mainProfile .tagAlongUnit.viewerIsTaggingAlong,
  .notesWrittenBlock + .mainProfile .tagAlongUnit.viewerIsPeekingHimself {
  	margin-left: 0;
  }
}

.tagAlongUnit.subMode
{
	height:auto;
}
.tagAlongUnit.viewerIsTaggingAlong
{
	background-color: #F4FFF8;
    color: #101010;
    border-color: #b6b6b6;
}



.portfoliosTrackingEncloser .tagAlongUnit
{
	height:inherit;
}


.tagAlongUnit .showOnStopTagalongConfirm
{
    font-size: 13px;
    line-height: 1.7;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 20px;
}  

.tagAlongUnit p
{
	font-size: 13px;
    line-height: 1.7;
    margin-left: 30px;
    margin-right: 30px;
    
}
    
.tagAlongUnit .showOnStopTagalongConfirm,
.tagAlongUnit.initiateStopTagalong .doStopTagAlongUI
{
	display:none;
}
.tagAlongUnit.initiateStopTagalong .showOnStopTagalongConfirm
{
	display:block;
}
.mixedPortfolioChart
{
	margin-bottom:25px;
	height: 300px;
}
.btnRow .btn
{
	margin-left:8px;
}

.tagAlongUnitPadder
{
	padding: 15px 20px;
}

.mainProfile
{
	text-align:center;
}
.tagAlongUnit .btn
{
	margin-bottom:5px;
	margin-top: 20px;
}
.peekContainer {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}

.recentViews {
	display: flex;
	width: 100%;
	overflow: auto;
  padding: 25px 0 5px 5px;
  
}

@media screen and (min-width: 769px) {
  .recentViewsEnc {
    justify-content: center;
  }
}

@media screen and (min-width: 1235px) {
	.peekContainer {
		margin-left: -15px;
	}
}

.showtiptext
{
	border-bottom:1px dashed #e0e0e0;
}

.peekUnit {
  flex: 0 0 500px;
  margin-bottom:15px;
  position: relative;
}

@media screen and (min-width: 1235px) {
	.peekUnit {
		margin-left: 15px;
	}
}

.stratTile
{
	z-index: 1;
	height:410px;
}

.peekUnit .otherFollowers
{
	position:absolute;
	width: calc(100% - 20px);
	bottom:10px;
	z-index: 2;
	padding: 0 10px 10px 10px;
}

.peekUnit.hasAndOthers .otherFollowers
{
	bottom: 0px;
    width: 100%;
}


.otherFollowerAvatars
{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: calc(100% - 20px);
}
.tradedBy, .andOthers
{
	color:#dfdfdf;
	font-size:13px;
	text-align: center;
	line-height: 1 !important;
}
.tradedBy
{
	margin-bottom:5px;
}
.andOthers
{
	font-size:12px;
	color:#d1d1d1;
	margin-top:8px;
}
.alsoFollow 
{
	cursor: pointer;
	flex: 0 0 44px;
	margin-right: 6px;
	margin-top: 6px;
}
.alsoFollow:last-child-of-type
{
	margin-right:0;
}

img.alsoFollow
{
	width: 32px;
    margin-right: 5px;
    margin-top: 6px;
}
.otherFollowerAvatars img.alsoFollow
{
	cursor:pointer;
}
.tagAlongUnit .targetAvatar
{
	text-align: center;
    margin-bottom: 10px;
    margin-top: 13px;
}

.tagAlongUnit .targetAvatar img
{
	width:65px;
}

.hints
{
	text-align: center;
 
	font-size:13px;
	color:#444;
	 
	line-height:1.5;
	margin-bottom:25px;
}

.rvUnit {
	flex: 0 0 40px;
	cursor: pointer;
	display:inline-block;
}

.rvUnit + .rvUnit {
	margin-left: 10px;
}

.rvUnit.myself > p {
	display: none;
}

.recentViewsEnc p
{
	text-align: center;
}
.rvUnit img {
    width: 44px;
    height: 44px;
    border: 1px solid #c3c3c3;
    margin-right: 0;
    margin-top: 0;
}
.rvUnit.selected
{
	cursor:default;
}
.rvUnit.selected img
{
	cursor:inherit;
	box-shadow: 0 0 0 3px #689a18;
}

.mixedPorfolioHolder .highcharts-container {
	width: 100% !important;
	background: linear-gradient(135deg, #2a2a2b,#3e3e40);
	height: 100% !important;
}

.mixedPorfolioHolder .highcharts-container svg,
.mixedPorfolioHolder .highcharts-container svg .highcharts-background {
	width: 100%;
	height: 460px;
}

.targetAvatar img
{
	border:2px solid #9ca0a2;
	
}
.tagAlongUnit.viewerIsTaggingAlong  .targetAvatar img
{
	border:2px solid #404040;
}



.otherBrokerUnit
{
	cursor:pointer;
}

.otherBrokersWrapper
{
	display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items:baseline;
}

.otherBrokerUnit
{
	font-size:12px;
	color:white;
	margin-right:8px;
    flex-basis: 100px;
}
.otherBrokerUnit .imghold
{
    padding-bottom: 3px;
}
.otherBrokerUnit.isSelected .imghold
{
	border-bottom:2px solid #f84f15;
}
.otherBrokersUnit
{
	margin-top: 10px;
    font-size: 12px;
    padding-top: 11px;
    border-top: 1px dashed #4f5972;
}
.otherBrokersWrapper img.brokerImage
{
	width:52px;
	border:2px solid #efefef;
}

.imghold
{
	text-align:center;
	margin-bottom:5px;
}

.otherBrokersWrapper
{
	margin-top:10px;
}


.otherBrokerUnit .numstrats,
.otherBrokerUnit .monthfee
{
	display:block;
	line-height: 1.4;
	text-align: center;
	color: #9fb5b5;
}

.taIntro
{
	font-size: 17px;
    color: white;
    font-weight: 600;
    font-family: roboto !important;
    line-height: 1.4;
}

.tagAlongUnit.viewerIsTaggingAlong .taIntro
{
	color:#101010;
}


.otherBrokersUnit p
{
	font-size:13px;
}

.tagAlongUnit.noOtherBrokers .targetAvatar
{
	margin-bottom: 15px;
    margin-top: 25px;
}

.tagAlongUnit.noOtherBrokers .targetAvatar img
{
	width:inherit;
}


.tagAlongUnit.viewerIsTaggingAlong .targetAvatar img
{
	width:50px;
}

.tagAlongUnit.noOtherBrokers .btn
{
	margin-top:30px;
}
.statContent
{
	max-width: 640px;
}

.statContent p
{
	line-height: 1.8 !important;
	color:#111 !important;
	font-size:16px;
}
.icons-ul
{
	margin-top:20px;
}
.icons-ul li
{
	color:#111 !important;
	font-size:16px;
}
.learnMore a
{
	font-size: 12px;
    color: #b4b1b1;
    margin-bottom: 10px;
}

.tagAlongUnit.noOtherBrokers .learnMore a
{
	border-bottom: 1px dashed #606060;
}

.paymentInfoForm .error
{
	display:none;
}
.tagalongDialog p
{
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
    color: #222 !important;
    font-size: 16px !important;
}
.dialogContent .showOnAnnual,
.dialogContent .showOnMonthly
{
	display:none;
}
.dialogContent.annualplan .showOnAnnual
{
	display:block;
}

.dialogContent.monthlyplan .showOnMonthly
{
	display:block;
}

.todaysPurchase .describeDiscount
{
color: green;
    font-size: 15px;
    margin-top: 4px;
}

.todaysPurchase td
{
	vertical-align: middle;
}
.todaysPurchase td.price
{
	text-align: center;
	font-size:40px;
	color:#444;
	padding-left:13px;
	padding-right: 13px;
}

.tagalongDialog.followOnlyIsChecked  td.price
{
	text-decoration: line-through;
    color: #a4a4a4;
    font-weight: normal;
}
    
.tagalongDialog.followOnlyIsChecked .hide-follow-only
{
	display:none;
}   

.tagalongDialog.followOnlyIsChecked tr.followOnly .description
{
	color:green;
}

.todaysPurchase td.description
{
	color:#1d1d1d;
	font-size:17px;
	padding-left:13px;
}
.todaysPurchase .inviteToggle
{
	font-size:14px;
	color:#666;
}
.todaysPurchase .secondaryInfo
{
    line-height: 1.8;
    font-size: 14px;
    color: #555;
    margin-top: 20px;
}

.followDesc
{
	font-size:17px;
	color:#1d1d1d;
}
.innerTable .followAvatar
{
	width:60px;
}
.innerTable > td
{
	padding:0;
	border:none;
}

.innerTable td.c2img
{
	width:83px;
	border:none;
	padding:none;
}
.innerTable td.withAvImg
{
	width:83px;
	border:none;
	padding:none;
	text-align: center;
}
.innerTable td.avatar
{
	padding-left: 15px;
	padding-top: 15px;
}

td.description.port
{
    padding-left: 15px;
    padding-top: 3px;
}

td.withAvImg
{
	vertical-align: top;
    padding-top: 42px;
}

.tableEncloser
{
	display:inline-block;
}

.discountStateInfo .currentState
{
	color:green;
	font-weight:bold;
	border-bottom: 2px solid green;
}
.discountStateInfo .nonCurrent
{
	color:#555;

}
.discountStateInfo
{
	text-align:right;
}
.discountStateInfo .currentState,
.discountStateInfo .nonCurrent
{
	display:inline-block;
	margin-left:5px;
}
.discountStateInfo
{
	margin-bottom:8px;
	font-size:12px;
}
.inviteToggle
{
	font-size: 14px;
    color: #666;
    padding-left: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.inviteToggle b
{
	color:green;
	font-weight:normal;
}
tr.summaryRow .description
{
    padding-left: 19px;
    font-size: 26;
    font-weight: 600;
}

.todaysPurchase tr.atrow td.description
{
    padding-left: 12px;
    padding-top: 25px;
}
.summaryRow .innerprice
{
	margin-top: 10px;
    padding-top: 1px;
    margin-bottom: 10px;
    padding-bottom: 1px;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}
td.c2img
{
	padding: 4px 15px 0 0;
    vertical-align: top;
}
td.describeat
{
	padding-left:18px;
}
td.c2img img
{
	width:62px;
}

.tagalongDialog .checkIconHold
{
	cursor:pointer;
	text-align: center;
}
.iOneOnOne
{
	font-size:21px;
}
.tagalongDialog .checkIconHold .iOneOnOne
{
	display:none;
}
.tagalongDialog.noOneOnOne .checkIconHold .showNoOneOnOne
{
	display:inline;
	color:#444;
}
.tagalongDialog.yesOneOnOne .checkIconHold .showYesOneOnOne
{
	display:inline;
	color:green;
}

h2.todaysPurchase
{
	display: inline-block;
    margin-bottom: 0 !important;
    position: relative;
    top: 23px;
}			
				
.buttonsurrounder .c2g-btn
{
	float:right;
}			

.c2g-form-horizontal .control-group .controls input[type="text"]
{
	width:calc(100% - 20px) !important;
}			

input#pricecode
{
	width: calc(99% - 143px) !important;
    float: left;
    margin-right: 13px;
}

.brokerFilterUnit
{
	font-size:15px;
	color:#444;
	margin-left:10px;
	line-height: 1.8;
}
.explainBrokerNonDisplay p
{
	color:#111 !important;
	font-size:15px !important;
	line-height: 1.8 !important;
}
table.selectAligner
{
	margin-bottom:20px;
}

table.selectAligner td
{
	padding:10px;
}

table.selectAligner td.holdTip
{
	font-size:12px;
	min-width: 174px;
}		
select#whichBroker,
select#enterBrokerCredentials
{
	width:40em !important;
}
.rightTipInvite
{
	text-align: right;
    font-size: 12px;
    margin-left: 10px;
    display: block;
}

.icomplete
{
	color:green;
}
.iincomplete
{
	color:red;
}

.tagalongDialog .hideUntilBrokerChosen
{
	display:none;
}			

.tagalongDialog.brokerChosen .hideUntilBrokerChosen
{
	display:block;
}
.orOpenNewAccount
{
	text-align: right;
    font-size: 13px !important;
    margin-top: 5px;
}
.inlineSurround
{
	display:inline-block;
}


.tagalongDialog .showOnIndivStrats
{
	display:none;
}
.tagalongDialog.showIndivStrats .showOnIndivStrats
{
	display:block;
}
.tagalongDialog.showIndivStrats .showOnIndivStrats.showtextlink
{
	display:inline-block;
}
.tagalongDialog.showIndivStrats .hideOnIndivStrats
{
	display:none;
}


.table-indivStrats
{
	margin-top:15px;
}
.table-indivStrats td,
.table-indivStrats th
{
	color:#111;
}
.table-indivStrats th,
.table-indivStrats td.ctr
{
	text-align: center;
}
										
.table-indivStrats td.regular
{
	text-decoration: line-through;
}	

.table-indivStrats td.isSysName
{
	border-left:none;
}
.table-indivStrats td.discounted
{
	font-weight: bold;
}										
.table-indivStrats .checkbox
{
    position: relative;
    top: -4px;
}

.table-targetStatus
{
	margin-top:25px;
}
.table-targetStatus .leftCol
{
	border-left:1px solid #999;
}
.table-targetStatus .rightCol
{
	border-right:1px solid #999;
}
.table-targetStatus td,
.table-targetStatus th
{
	text-align:center;
	padding:3px 5px;
	font-size:13px;
}	

.table-targetStatus th
{
	border-top:none;
}						
.table-targetStatus th.groupLabel
{
	text-align: center;
    color: #595959;
    font-weight: normal;
    padding-bottom: 9px;
    line-height: 0;
}

.table-targetStatus td.sysname,
.table-targetStatus th.sysname
{
	text-align:left;
	min-width:10em;
}

.table-targetStatus .iOn
{
	color: green;
}

.table-targetStatus .iOff
{
	color: #bbb;
}
.table-targetStatus a.showtextlink
{
	border-bottom:1px dashed #ababab;
}			
.smallLink
{
	font-size:12px;
	color:#777;
	border-bottom:1px dashed #ababab;
	
}



.tagalongDialog.hasAutoTrade .discountStateInfo,
.tagalongDialog.hasAutoTrade .summaryRow
{
	display:none;	
}

.tagalongDialog.noCommerce .paymentInfoEnc,
.tagalongDialog.followOnlyIsChecked .paymentInfoEnc
{
	display:none;
}
.tagalongDialog .show-follow-only
{
	display:none;
}
.tagalongDialog.followOnlyIsChecked .show-follow-only
{
	display:inline-block;
}
.tagalongDialog .iCheckNo,
.tagalongDialog.followOnlyIsUnchecked .iCheckYes
{
	display:none;
}

.tagalongDialog.followOnlyIsUnchecked .iCheckNo,
.tagalongDialog .iCheckYes
{
	display:inline;
}


.btn-follow-only
{
	float:right;
}		 		

.tagalongDialog .btn:hover,
.tagalongDialog .btn:focus
{
	background-position-inherit;
}	

.iToggleEncloser .iOn.iToggleOnOff
{
	display:none;
}
.iToggleEncloser.isOn .iOn.iToggleOnOff
{
	display:inline-block;
}
.iToggleEncloser.isOn .iOff.iToggleOnOff
{
	display:none;
}
.iToggleOnOff
{
	cursor:pointer;
}	


.pFee, .transit
{
	display:inline-block;
	text-align:center;
}
.pFee
{
	width:calc(48% - 16px);
}
.transist
{
	width:32px;
}
.showOnSubModeCell, 
.showOnSubMode
{
	display:none;
}

.tagAlongUnit.subMode .showOnSubModeCell
{
	display:table-cell;
}



.tagAlongUnit.subMode .showOnSubMode
{
	display:block;
}
.tagAlongUnit.subMode .hideOnSubMode
{
	display:none;
}					
td.subInfo,
th.subinfo
{
	min-width: 11em;
}
.striked
{
	text-decoration: line-through;
	color: #b8b8b8;
}

.aboutToSubDetails
{
	text-align: left;
	padding:20px;
	margin-top:20px;
	border-top:1px dashed #d0d0d0;
}

.aboutToSubDetails h3
{
	margin-bottom:20px;
	line-height: 1;

}								
.aboutToSubDetails .paymentInfoEnc
{
	border:none;
}
.tagAlongUnit .aboutToSubDetails p
{
	margin-left:0;
	margin-right:0;
}
.table-targetStatus
{
	border-bottom: 1px solid #e0e0e0;
}
.expMonth, .expYear
{
	width: 120px !important;
}


.levelUnitData, .levelUnit
{
	display:none;
}
.tagalongDialog.currentLevel1 .showLevel1,
.tagalongDialog.currentLevel2 .showLevel2,
.tagalongDialog.currentLevel3 .showLevel3,
.tagalongDialog.currentLevel4 .showLevel4,
.tagalongDialog.currentLevel5 .showLevel5
{
	display:block;
}
			


.followerAvatar img,
.authorAvatar img
{
	width:40px;
	border:2px solid #9ca0a2;
	border-radius: 100%;    
}

.table-followers td
{
	vertical-align: middle;
}
td.authorAvatar
{
	width:50px;
	text-align: center;
}
.viewerIsPeekingHimself .tagAlongUnit
{
	padding: 20px;
    background-color: #f1f1f1;
    color: #222;
    
    border: 1px solid #555;
    flex-direction: column;
	justify-content: center;
	min-height: 450px;
}	
.viewerIsPeekingHimself .tagAlongUnit h3
{
	color:green;
}			
.viewerIsPeekingHimself .tagAlongUnit .table-followers,
.viewerIsPeekingHimself .tagAlongUnit .table-followers td,
.viewerIsPeekingHimself .tagAlongUnit .table-followers th
{
	border-color: #b3b3b3;
    font-size: 13px;
}				
.viewerIsPeekingHimself .tagAlongUnit .table-followers td,
.viewerIsPeekingHimself .tagAlongUnit .table-followers th
{
	background-color:#fefefe;
}	

.btn-right
{
	float:right;
}

.c2g-modal__container--v2 .c2g-modal__content
{
	padding:20px !important;
}
	

.portfolioNotesList h1
{
    margin-bottom: 20px;
    display: inline-block;
    float: left;
}

.portfolioNotesList  .btn-startNote 
{
 	margin-bottom: 20px;
    display: inline-block;
    float: right;
}
	
.notesAndCharts 
{
	display:flex;
	flex-wrap: nowrap;
}
.portfolioNotesEncloser
{
	padding: 10px;
    flex: 350px 1 1;
    border: 1px solid #e0e0e0;
    margin-right: 10px;
    margin-bottom: 10px;
    max-width:99%;
	max-width:1205px;
}
.portfolioNotesEncloser h1
{
	position: relative;
	top:10px;
	font-size: 20px;
}
.iNewNote
{
	color: #c3c3c3;
}
.chartsArea
{
	border: 1px solid #e0e0e0;
    padding: 10px;
    flex: 350px 0 0;
}

.btn:hover
{
	background-position:0 0px;
} 

.otherView
{
	font-size:13px;
	margin-top:20px;
	text-align: center;
}

img.avnotes
{
	width: 30px;
    margin-right: 6px;
}	

.peekHimselfExplainer
{
    margin-top: 20px;
    padding: 20px 0 10px 0;
    border-top: 1px dashed #f0f0f0;
    color: #fff;
}

.brokerChoiceArea
{
	display:inline-block;
	padding:10px;
	max-width:300px;
}

.noFollowersYetInfo .followerAvatar img
{
	width: 40px;
    border: 1px solid #b2b2b2;
    border-radius: 100%;
    opacity: .7;
} 

.noFollowersYetInfo .followerAvatar
{
	display:inline-block;
	margin-right:5px;
	margin-bottom:5px;
}


.noFollowersYetInfo .iplus
{
	font-size: 30px;
    color: #eaeaea;
    line-height: 1;
    position: relative;
    top: 9px;
}

.myFollowersEncloser.noFollowersYet
{
	display: inline-block;
    margin-left: 20px;
}

.recentViewsEnc
{
	display:flex;
	max-width: 100%;
}
.youNav {
	border-right: 1px dotted #ddd;
	margin-right: 15px;
	padding: 5px 15px 5px 0;
	flex: 0 0 44px;
	margin-top: 20px;
}

.youNav.onlyYou 
{
	border-right: none;
}

.recentViewsEncInner,
.recentViewsEnc {
	position: relative;
	
}
.recentViewsEncInner > p,
.recentViewsEnc > p {
	position: absolute;
	white-space: nowrap;
	top: 0;
	left: 0;
	font-size: 11px;
	text-transform: uppercase;
}



/*
	get rid of the fieldset styling and keep
	this all on a single line
*/
.radio-switch {
	border: none;
	margin-bottom: 2em; /* demo value */
	padding: 0;
	white-space: nowrap;
}

/**
 * Inner wrapper to set a position relative for the inputs
 * that need to be position absolute.
 * display inline-block kees the wrapper only as wide
 * as the radio switch within.
 */
.radio-switch__inner {
	display: inline-block;
	position: relative;
}

/*
	radio button groups often benefit from a legend to
	provide context as to what the different
	options pertain to. Ideally this would be visible to all
	users, but you know...
*/
.radio-switch--hide-legend legend {
	font-size: 2px;
	opacity: 0;
	position: absolute;
}

/*
	relative labels to help position the pseudo elements
	the z-index will be handy later, when the labels that
	overlap the visual switch UI need to be adjusted
	to allow for a user to toggle the switch without
	having to move their mouse/finger to the different
	sides of the UI
*/
.radio-switch label {
	display: inline-block;
	line-height: 2;
	position: relative;
	z-index: 2;
}

/*
	inputs set to opcacity 0 are still accessible.
	Apparently there can be issues targetting inputs with
	Dragon speech recognition software if you use the typical
	'visually-hidden' class...so might as well just avoid that issue...
*/
.radio-switch input {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	height: 100%;
	opacity: .00001;
	position: absolute;
	top: 0;
	width: 30%;
	z-index: 3;
}

.radio-switch input:first-of-type {
	left: 0;
}

.radio-switch input:last-of-type {
	right: 0;
}

.radio-switch input:not(:checked):hover + label {
	text-decoration: underline;
}

/*
	a 2 option toggle can only have 2 options...so instead of
	adding more classes, i'm just going to use some
	structural pseudo-classes to target them...
	cause why let all that good work go to waste?!

  the large padding is used to position the labels
  on top of the visual UI, so the switch UI itself
  can be mouse clicked or finger tapped to toggle
  the current option
*/
.radio-switch label:first-of-type {
	padding-right: 5em;
}

.radio-switch label:last-child {
	margin-left: -4.25em;
	padding-left: 5em;
}

/*
	oh focus within, I can't wait for you to have even more support.
	But you'll never be in IE11, so we're going to need a
	polyfill for you for a bit...
 */
/*
.radio-switch:focus-within label:first-of-type:after {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00ff16;
}

 
.radio-switch.focus-within label:first-of-type:after {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00ff16;
}
*/

/* making the switch UI.  */
.radio-switch label:first-of-type:before,
.radio-switch label:first-of-type:after {
	border: 1px solid #aaa;
	content: "";
	height: 2em;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	vertical-align: middle;
}

.radio-switch label:first-of-type:before {
	background: #fff;
	border: 1px solid #aaa;
	border-radius: 100%;
	position: absolute;
	right: -2px; /* was 0 */
	transition: right .2s ease-in-out;
	width: 2em;
	z-index: 2;
}

/* IE11 has some weirdness in how it's calculating the right positioning
   of the switch knob.  this hacky workaround is fitting for the hacky browser :) */
_:-ms-fullscreen, :root .radio-switch label:first-of-type:before {
	right: -.2em;
}

.radio-switch label:first-of-type:after {
	background: #aaa;
	border-radius: 1em;
	margin: 0 1em;
	transition: background .2s ease-in-out;
	width: 4em;
}

/*
	Visually change the switch UI to match the
	checked state of the first radio button
*/
.radio-switch input:first-of-type:checked ~ label:first-of-type:after {
	background: #099c00;
}

.radio-switch input:first-of-type:checked ~ label:first-of-type:before {
	right: 2em;
}

/* IE11 hack for correct positioning */
_:-ms-fullscreen, :root .radio-switch input:first-of-type:checked ~ label:first-of-type:before {
	right: 1.8em;
}

/* Move the 2nd label to have a lower z-index, so when that
   option is toggled, the first label will overlay on top of the
   Switch ui, and the switch can be pressed again to toggle back
   to the prevoius state. */
.radio-switch input:last-of-type:checked ~ label:last-of-type {
	z-index: 1;
}


/* 'color in' the switch knob in high contrast mode by giving it
   a large border */
@media screen and (-ms-high-contrast: active) {
	.radio-switch label:first-of-type:before {
		background-color: windowText;
		border: 1em solid transparent;
		/* firefox doesn't respect the bg color,
		   so the border fills the knob */
	}

	.radio-switch:focus-within label:first-of-type:after {
		outline: 2px solid;
		outline-offset: 3px;
	}

	/* polyfill class*/
	.radio-switch.focus-within label:first-of-type:after {
		outline: 2px solid;
		outline-offset: 3px;
	}
}

.noFollowersYet p,
.noFollowersYet p a.showtextlink
{
	color: #a0a0a0;
    font-size: 13.5px;
}
.followersUnitOuter.noFollowersYet .emptyAvatars
{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 12px;
}
.followersUnitOuter h1
{
	
}
.followersUnitOuter.noFollowersYet
{
    margin-bottom: 25px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #e0e0e0;
}
.tinyNavLink
{
	font-size: 13px;
    display: inline-block;
    margin-bottom: 15px;
    position: relative;
    top: -10px;
    left: -3px;
}
.tinyNavLink .iLeft
{
    color: #bbb;
    margin-right: 3px;
}
.tinyNavLink a
{
	border-bottom:1px dashed #e0e0e0;
	color:#777 !important;
}
.portfolioVisibility
{
	border:1px solid #e0e0e0;
	padding:15px;
	text-align:center;
	display: inline-block;
    width: 260px;
    float:right;
    position: relative;
    top:-15px;
    background-color: #f9f9f9;
}

.portfolioVisibility p
{
    color: #686868 !important;
    line-height: 1.7 !important;
    font-size: 13px !important;
    text-align: left;
}
.portfolioVisibility .radio-switch
{
	margin-bottom:0;
	margin-top:10px;
}



.modalDialogContent .btnRow
{
	margin-top:20px;
}




.followerListUnit .followerAvatar
{
	display:inline-block;
	margin-right:8px;
	margin-bottom:8px;
	cursor:pointer;
}
.followerListUnit .followerAvatar:hover img
{
	border-color:green;
}


.followerListUnit
{
    display: inline-block;
    padding-left: 20px;
    min-height: 110px;
}



.subtleTextLink
{
	cursor:pointer;
	border-bottom:1px dashed #e0e0e0;
}


.media-caption
{
	line-height: 1.8 !important;
	color:#666 !important;
	margin:10px 5% 30px 5% !important;
	font-size:13px !important;
	text-align: center;
}
.c2media
{
	margin-top: 30px;
    display: block;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}
.c2media img
{
	width:95%;
	border:1px solid #e0e0e0;
}






.notesListFlexEncloser
{
	display:flex;
	align-items: top;
	flex-wrap:nowrap;
	 
	padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid #ddd;

}

.notesListFlexEncloser.selected
{
	background-color:#f5f5e1;
}
.notesLineUnit
{
	display:inline-block;	
	/*border:1px solid red;*/
	
}
.notesLineInfo
{
	flex: 160px 0 0;
	padding-top:20px;
	
}
.notesLineJournalContent
{
	padding-top:20px;
	flex:450px 1 1;
	padding-left: 10px;
	padding-right: 10px;
	max-width: 99%;
}
.notesLineUnit.cmds
{
	width:100% !important;
	margin-top:20px;
	text-align: center;
}
.notesLineUnit.publicPrivate
{
	margin-left:5px;
	margin-bottom:10px;
}



.followersUnitOuter 
{
	max-width:1610px;
}


.spinnerDiv
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 98%;
    border: 1px solid #e0e0e0;
    background-color: #f2f2f2;
}
.biggySpinner
{
	color: #bbb;
    font-size: 50px
}

h1.memberPortfolios
{
	padding-left:30px;
}

.followersUnitOuter h1
{
	display:inline-block;
}
		
.portfoliosGrid
{
	padding:0 30px;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: flex-start;
}

.portfolioUnit
{
    flex: 0 1 300px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #737373;
    margin-right: 30px;
    margin-bottom: 30px;
    text-align: center;
    color: #000000;
    cursor:pointer;
    position: relative;
}

.innerPortfolioChart
{
	height: 180px;
    overflow: hidden;
    margin-top: 10px;
}

.portfolioUnit .brokerImage
{
	position: absolute;
    width: 36px;
    right: 10px;
    top: 10px;
}

.portfolioUnit .brokerImage img
{
	width:99%;
	border-radius:100%;
	border:1px solid #555;
	

  
}

.portfolioUnit .targetAvatar img {
    border: 2px solid #bcbcbc;
	-webkit-transition: width .3s; /* Safari */
	transition: width .3s;
	width:80px;
}

.portfolioUnit:hover
{
	background-color: #292c37; /*#9e9e9e;*/
}

.portfolioUnit:hover .targetAvatar img 
{
    border: 2px solid #ffffff;
    width:100px;
}


.portfolioUnit:hover .brokerImage img
{
	border-color:#d0d0d0;
}

.portfolioUnit .pAlias
{
	font-size: 23px;
    margin-top: 10px;
    margin-bottom: 15px;
}  
.portfolioUnit:hover .pAlias  
{
	color:#fff;
}
.unpeekable
{
	cursor:default;
}
	
.numSubs .numSubNum
{
	font-size:120%;
	font-weight:600;
	color:#010101;
	-webkit-transition: width .3s; /* Safari */
	transition: width .3s;
}

.portfolioUnit:hover .numSubs
{
	color:#e0e0e0;
}
.portfolioUnit:hover .numSubs .numSubNum
{
	font-size:200%;
	font-weight:bold;
	color:#ffffff;
}

.portfolioUnit .otherFollowers
{
	min-height: 65px;
    margin-top: 15px;
}

/* Bounce In */
.hvr-bounce-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

@media screen and (min-width: 1200px) {
	.tagAlongUnit.viewerIsTaggingAlong .table-targetStatus
	{
		width:800px;
		margin-left:auto;
		margin-right:auto;
	}		
	
	.tagAlongUnit.viewerIsTaggingAlong .table-targetStatus td, 
	.tagAlongUnit.viewerIsTaggingAlong .table-targetStatus th
	{
		font-size:15px !important;
	}
	
	.tagAlongUnit.viewerIsTaggingAlong .aboutToSubDetails
	{
		width: 680px;
	    margin-left: auto;
	    margin-right: auto;
    }
    
}
				
				
@media screen and (min-width: 641px) {
	padding-left:10%;
	padding-right:10%;
}

@media screen and (max-width: 1400px) {
	select#whichBroker,
	select#enterBrokerCredentials
	{
		width:inherit !important;
	}

	.explainBrokerNonDisplay
	{
		max-width: 500px;
	}
}
/*1375 - diff 160*/
@media screen and (max-width: 1540px) {
	
	.sideNavShowing .notesListFlexEncloser
	{
		 flex-wrap:wrap;
	}
	
}
/*1540*/
@media screen and (max-width: 1375px) {
	
	.sideNavHidden .notesListFlexEncloser
	{
		 flex-wrap:wrap;
	}
	.sideNavShowing .notesPlusProfile,
	.sideNavShowing .mixedPorfolioHolder
	{
		margin-top: 0;
	}


}

@media screen and (max-width: 1129px) {
	
	.sideNavShowing .btn-startNote span
	{
		display:none;
	} 
}





 
 
@media screen and (min-width: 1139px) and (max-width: 1270px) {
	
	.sideNavShowing .portfolioNotesEncloser
	{
		max-width: calc(100% - 415px);
	}
	
}

@media screen and (min-width: 979px) and (max-width: 1110px) {
	
	.sideNavHidden .portfolioNotesEncloser
	{
			max-width: calc(100% - 415px);
	}
	
}
 

















    

@media screen and (max-width: 969px) {
	
	.portfolioVisibility
	{
	    display: block;
	    float: none;
	    width: auto;
	    margin-bottom: 20px;
	}
	.portfolioVisibility p
	{
		text-align:center;
	}
	.followersUnitOuter.noFollowersYet
	{
	 	padding-bottom:3px;
	} 
	
	.sideNavHidden .btn-startNote span
	{
		display:none;
	}  
}
    
    
@media screen and (max-width: 830px) {
	
	.hideOnSmall
	{
		display:none;
	}
	.todaysPurchase td.price
	{
		font-size:21px;
	}
	.todaysPurchase td.description
	{
		font-size:15px;
	}
	
	

}

@media screen and (max-width: 1270px) {

	.sideNavShowing .notesAndCharts
	{
		flex-wrap: wrap;
	}

}
@media screen and (max-width: 1110px) {

	.sideNavHidden .notesAndCharts {
		flex-wrap: wrap;
	}

}


@media screen and (max-width: 768px) {
	.notesPlusProfile_inner 
	{
	    flex-wrap: wrap;
	    width: 100%;
	}
	.stackUnit.mixedPorfolioHolder
	{
		height: 480px; 
	}
	.notesPlusProfile {
		flex-wrap: wrap;
		flex: 0 0 100%
	}
	.notesWrittenBlock {
		flex: auto;
		height: auto;
		max-width: 100%;

	}
	.notesWrittenInner {
		height: auto;
	}
	.tagAlongUnit {
		min-height: 0;
		padding: 15px 0;
  }
  
	.hintSpacer
	{
		display:none;
	}
	.peekUnit {
		flex: auto;
		width: 100%;
	}

	.peekUnit .highcharts-container {
		width: 100% !important;
		background: linear-gradient(135deg, #2a2a2b,#3e3e40);
	}

	.peekUnit .highcharts-container .highcharts-root {
		width: 100%;
	}

	.peekUnit .highcharts-container .highcharts-title {
		left: 15px !important;
	}

	
	.portfolioVisibility
	{
		float: none;
		margin-bottom:20px;
		margin-top:20px;
		top:0;
	}
	
}


@media screen and (max-width: 569px) {
	.table-targetStatus td, .table-targetStatus th 
	{
	    padding: 4px 3px !important;
	    font-size: 11px !important;
	}
}

@media screen and (max-width: 375px) {
	body.c2g-body #content2colbig.c2g-content2colbig
	{
		padding:10px !important;
	}
	.chartsArea
	{
		flex: 320px 0 0;
	}

}


.topStack.hasPortfolioNotes.viewerIsTaggingAlong .notesPlusProfile,
.topStack.hasPortfolioNotes.viewerIsPeekingHimself .notesPlusProfile {
	margin-left: 0;
	flex: 0 0 100%;
}

.topStack.hasPortfolioNotes.viewerIsTaggingAlong .notesWrittenBlock,
.topStack.hasPortfolioNotes.viewerIsPeekingHimself .notesWrittenBlock {
	flex: auto;
}

.notesWrittenBlock + .mainProfile .tagAlongUnit.viewerIsTaggingAlong,
.notesWrittenBlock + .mainProfile .tagAlongUnit.viewerIsPeekingHimself {
	margin-top: 0;
}

.stackUnit.mixedPorfolioHolder.viewerIsTaggingAlong .stackUnit.mainProfile,
.stackUnit.mixedPorfolioHolder.viewerIsPeekingHimself .stackUnit.mainProfile,
.stackUnit.mixedPorfolioHolder.viewerIsTaggingAlong + .stackUnit.mainProfile,
.stackUnit.mixedPorfolioHolder.viewerIsPeekingHimself + .stackUnit.mainProfile {
  margin-left: 0;
}

.stackUnit.mixedPorfolioHolder.viewerIsTaggingAlong .notesWrittenBlock + .stackUnit.mainProfile,
.stackUnit.mixedPorfolioHolder.viewerIsPeekingHimself .notesWrittenBlock + .stackUnit.mainProfile {
  margin-left: 15px;
}

@media screen and (max-width: 962px) {
	.sideNavHidden .stackUnit.mixedPorfolioHolder.viewerIsTaggingAlong + .notesWrittenBlock .notesWrittenInner,
	.sideNavHidden .stackUnit.mixedPorfolioHolder.viewerIsPeekingHimself + .notesWrittenBlock .notesWrittenInner {
		height: auto;
	}

	.sideNavHidden .stackUnit.mainProfile.viewerIsTaggingAlong,
	.sideNavHidden .stackUnit.mainProfile.viewerIsPeekingHimself {
		margin-left: 0;
	}
					
	.sideNavHidden .notesWrittenBlock + .mainProfile .tagAlongUnit.viewerIsTaggingAlong,
	.sideNavHidden .notesWrittenBlock + .mainProfile .tagAlongUnit.viewerIsPeekingHimself {
		margin-left: 0;
		margin-top: 15px;
	}
	.sideNavHidden .stackUnit.mixedPorfolioHolder.viewerIsTaggingAlong + .notesWrittenBlock,
	.sideNavHidden .stackUnit.mixedPorfolioHolder.viewerIsPeekingHimself + .notesWrittenBlock {
		flex: auto;
	}
}

@media screen and (max-width: 1126px) {
	.sideNavShowing .stackUnit.mixedPorfolioHolder.viewerIsTaggingAlong + .notesWrittenBlock .notesWrittenInner,
	.sideNavShowing .stackUnit.mixedPorfolioHolder.viewerIsPeekingHimself + .notesWrittenBlock .notesWrittenInner {
		height: auto;
	}

	.sideNavShowing .stackUnit.mainProfile.viewerIsTaggingAlong,
	.sideNavShowing .stackUnit.mainProfile.viewerIsPeekingHimself {
		margin-left: 0;
	}			
	.sideNavShowing .notesWrittenBlock + .mainProfile .tagAlongUnit.viewerIsTaggingAlong,
	.sideNavShowing .notesWrittenBlock + .mainProfile .tagAlongUnit.viewerIsPeekingHimself {
		margin-left: 0;
		margin-top: 15px;
	}
	.sideNavShowing .stackUnit.mixedPorfolioHolder.viewerIsTaggingAlong + .notesWrittenBlock,
	.sideNavShowing .stackUnit.mixedPorfolioHolder.viewerIsPeekingHimself + .notesWrittenBlock {
		flex: auto;
	}
}