body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
	background-color: #ffffff;
	//font-family: Roboto;
	font-family: arial;
	//font-family: sans-serif;
	//font-family: monospace;
	//font-family: system-ui;
	width: 100%;

	
}

 .icon-to-medium {
				margin-left: -22px;
				margin-top: -24px;
				width:36px;
				height:36px;
			}

.afm-banner{

	position: fixed;
	right: 20px;
	bottom: 20px;

}

.background-color{
	background-image: url('../images/background-dark-gray.jpg');
    background-repeat:no-repeat;
    background-size: cover;

}

.background-gray{
	background-image: url('../images/background-dark-gray.jpg');
    background-repeat:no-repeat;
    background-size: cover;
    
}


.background{
	background-image: url('../images/background.jpg');
    background-repeat:no-repeat;
    background-size: cover;

}

.info-card-transparent {
		width: inherit;
		height: inherit;
		background-color: transparent;
			
		}

a {
text-decoration:none;
/*color: #29c3f7;*/
color: #006ba6;

}

.infoLink{
color: #006ba6;

cursor: pointer;

}

.footer-center{

	position: fixed;
	display: inline-block;
	left: 20%;
	bottom: 20px;
	background-color: #ffffff;
}
.footer{

	position: fixed;
	right: 20px;
	bottom: 20px;

}

.screener-footer{

	position: fixed;
	left: 20px;
	bottom: 20px;

}


.page-center{
	position: absolute;
	top: 60px;
}


.arrow-left{
	
	position: absolute;
	top: 50%;
	left: 30px;	
}
.arrow-right{
	
	position: absolute;
	top: 50%;
	right: 30px;	
}
.text-big	{
			font-weight: bold; 
			font-size: 20px;
			color: #000000;
			

			}

.text-big-blue	{
			font-weight: bold; 
			font-size: 20px;
			color: #006ba6;
			

			}

.text-medium	{
			text-align: justify;
			font-weight: normal; 
			font-size: 18px;
			color: #fffff;
			}
			
.text-small{
			font-weight: normal; 
			font-size: 16px;
			color: #fffff;
			}

			.text-extra-small{
			font-weight: normal; 
			font-size: 14px;
			color: #fffff;
			}




.align-bottom-right { position: absolute; bottom: 0px; right: 0px;}

	.center-wrapper {
		width: 820px;
		margin-bottom: 10px;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
 		}

 		.center-wrapper-screener {
		width: 840px;
		margin-bottom: 10px;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
 		}
 		
 		
 		.center-wrapper-text {
		width: 820px;
		margin-bottom: 10px;
		margin-top: 30px;
		margin-left: auto;
		margin-right: auto;
 		}
 		
	.center-wrapper-small {
		width: 430px;
		margin-bottom: 10px;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
 		}

	.info-container {
		width: 98%;
		left: 0px;
		top: -25px;
		margin-left: 30px;
		position: relative;
		}

	.info-card {
		width: inherit;
		height: inherit;
		padding: 4px 4px 4px 4px;
		background: #ffffff;
		display: block;
		border: 1px solid #eeeeee;
		border-radius: 4px;
		box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.2);
		transition: 0.5s ease-in-out;
		}
	
	#info-icon {
		width: 25px;
		height: 25px;
		}
		
	#info-hover {
		background: white;
		padding: 4px 4px 4px 4px;
		display: none;
		}	
		
	#info-border {
		width: inherit;
		height: inherit;
		border: 2px dashed #cccccc;
		border-radius: 4px;
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: -1;
		}
	
	
	#info-icon:hover ~ .info-container .info-card {
		 transform: translate(15px, 20px);
		 border: 2px solid #ef1616;
		}
		
	#info-icon:hover ~ .info-container #info-hover {
		 display: block;
		}
		
	#info-icon:hover ~ .info-container #info-display {
		 display: none;
		}
	
	
			

			.token {
			display: inline-block;
			transform: rotate(90deg);
}
	
			.logo {
			margin-top: 10px;
			margin-left: 10px;
			margin-right: auto;
			}
			
			.ticker{
			padding-top: 10px;
  			text-align: center;
			font-weight: bold; 
			font-size: 20px;
			color: #006ba6;
			}
			
			.ticker-small{
			text-align: center;
			font-size: 14px;
			color: #aaaaaa;
			}
			
			
			.ticker-extra-small{
			font-size: 12px;
			color: #aaaaaa;
			}

			.label-extra-small{
			font-size: 12px;
			color: #000000;
			}


			
			.heading{
			display: inline-block;
			padding: 1px 2px;
			position: relative;
			top: -15px;
			font-weight: bold; 
			font-size: 16px;
			background-color: #ef1616;
			color: #ffffff;
			}


			
			.heading2{
			text-align: center;
			font-weight: bold; 
			font-size: 14px;
			color: #aaaaaa;
			}
			
			
					
			.doughnut-chart {
			width : 300px;
			height : 300px;
			margin-right: 5px;	
			margin-left: 5px;
			vertical-align: top;	
			//float : left;
			}
			
			.line-chart {
			width : 770px;
			height : 250px;
			}

			.line-chart-medium {
			display: inline-block;
			width : 380px;
			height : 250px;
			}

			.line-chart-small {
			display: inline-block;
			margin: 10px 5px 0px 0px;	
			width : 260px;
			height : 160px;
			}

				
			.icon {
				margin-left: 0px;
				width:50px;
				height:50px;
			}

			.icon-large {
				margin-left: 0px;
				width:42px;
				height:42px;
			}

			.icon-medium {
				margin-left: 0px;
				width:32px;
				height:32px;
			}

			.icon-small {
				margin-left: 0px;
				width:18px;
				height:18px;
			}


			.icon-wc-right {
				margin-right: 0px;
				margin-bottom: 0px;
				width: 60px;
				height: 60px;
			}
			
			.icon-wc-left {
				margin-left: 0px;
				margin-bottom: 0px;
				width: 60px;
				height: 60px;
			}
	
		
			.icon-status {
				margin-left: 0px;
				width:25px;
				height:25px;
			}
		
		
			.icon-to {
				margin-left: 0px;
				width:51px;
				height:51px;
			}

			.icon-to-small {
				margin-left: -21px;
				margin-top: -17px;
				width:32px;
				height:32px;
			}
		
			.icon-legend {
				
				width:25px;
				height:25px;
			}
			
			.icon-legend-small {
				
				width:20px;
				height:20px;
				margin-bottom: -4px;
			}
			
					
			.header {
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			}		
				
			.footer {
			margin-top: 10px;	
			margin-left: auto;
			margin-right: auto;	
			
			}	
							
			.legend {
			width: 100%;
			font-size: 14px;	
			color: #000000;
			}	
				
						
			.center {
			margin-top: 100px;
			margin-left: auto;
			margin-right: auto;
			
			}
			
			
			
			.transaction_icon{
			width:25px;
			height:25px;
			}
			
			.transaction_to {
			margin-bottom: 2px;
			margin-left: auto;
			margin-right: auto;
			border: 1px solid #aaaaaa;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
			border-radius: 8px;
			padding: 0px 0px;
			} 
			
			.subscription_icon{
			width:45px;
			height:45px;
			}


			.subscription_icon_small{
			margin-left: -20px;
			margin-top: -18px;
			width:27px;
			height:27px;
			}
			
			.subscription_to {
			margin-bottom: 2px;
			margin-left: auto;
			margin-right: auto;
			border: 1px solid #666666;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
			border-radius: 8px;
			} 
			
				 
			.subscription_sector {
			width : 16px;
			//border: 0px solid #000000;
			-moz-border-radius: 6px 0px 0px 6px;
			-webkit-border-radius: 6px 0px 0px 6px;
			border-radius: 6px 0px 0px 6px;
          	 } 
			
			
			.overview {
			width : 760px;
			}
			
			.overview_sector {
			width : 25px;
			-moz-border-radius: 7px 0px 0px 7px;
			-webkit-border-radius: 7px 0px 0px 7px;
			border-radius: 7px 0px 0px 7px;
          	 } 
			
				
				
						
			.cash_to_overview {
			height : 310px;
			margin-top: 5px;
			margin-left: 5px;
			margin-right: 5px;
			
			border: 2px solid #aaaaaa;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			}
			
			
			.cash_to_portfolio {
			height : 100%;
			margin-bottom: 5px;
			margin-left: 10px;
			margin-right: 15px;
			
			border: 2px solid #aaaaaa;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			}
			
			
			.account_to {
			width: 170px;
			margin-bottom: 5px;
			margin-top: 0px;
			margin-left: 10px;
			
			border: 2px solid #aaaaaa;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			}

			.overview_to {
			width: 100%;
			margin-bottom: 5px;
			margin-left: auto;
			margin-right: auto;
			border: 2px solid #aaaaaa;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			}

			.small_to {
			width: 100%;
			margin-bottom: 5px;
			margin-left: auto;
			margin-right: auto;
			border: 2px solid #eeeeee;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			}

			
			
			.home_to {
			width: 100%;
			margin-bottom: 5px;
			margin-left: auto;
			margin-right: auto;
			border: 2px solid #aaaaaa;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			}
			


			
			.trading_to {
			width: 100%;
			margin-bottom: 5px;
			margin-left: auto;
			margin-right: auto;
			border: 2px solid #aaaaaa;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			}
			
			
			.cash_collum {
			height: 100%;
			margin-top: 5px;
			vertical-align: bottom;
			}
			
				
			.cash_sector{
			width: 35px;
			background-color: #4dd614; 
			text-align: center; 
			font-weight: bold; 
			color: #ffffff;
			-moz-border-radius: 0px 0px 7px 7px;
			-webkit-border-radius: 0px 0px 7px 7px;
			border-radius: 0px 0px 7px 7px;
          	 } 
			
			
			
			.trading_row {
			width: 675px;
			vertical-align: bottom;
			}
			
			.trading_sector_left {
			height: 30px;
			-moz-border-radius: 7px 0px 0px 7px;
			-webkit-border-radius: 7px 0px 0px 7px;
			border-radius: 7px 0px 0px 7px;
          	 } 
			
			
			.trading_sector_full {
			height: 30px;
			-moz-border-radius: 7px 7px 7px 7px;
			-webkit-border-radius: 7px 7px 7px 7px;
			border-radius: 7px 7px 7px 7px;
          	 } 
          	 
          	 
          	 .graph_row {
			width: 600px;
			
			}
				
			.account_row {
			width: 500px;
			}
			
			.account_row_small {
			width: 105px;
			}
			
			.account_sector_left {
			height: 30px;
			-moz-border-radius: 7px 0px 0px 7px;
			-webkit-border-radius: 7px 0px 0px 7px;
			border-radius: 7px 0px 0px 7px;
          	 } 
          	 
			.account_sector_right {
			height: 30px;
			-moz-border-radius: 0px 7px 7px 0px;
			-webkit-border-radius: 0px 7px 7px 0px;
			border-radius: 0px 7px 7px 0px;
          	 } 
			
			.account_sector_full {
			height: 30px;
			-moz-border-radius: 7px 7px 7px 7px;
			-webkit-border-radius: 7px 7px 7px 7px;
			border-radius: 7px 7px 7px 7px;
          	 } 
			
					
			.portfolio {
			width : 760px;
			}
			
		
			.portfolio_collum {
			width : 63px;
			vertical-align: bottom;
			}
			
			.portfolio_percentage {
			text-align: center;
			font-size: 14px;
			}
		
			.portfolio_sector {
			height : 25px;
			width : 50px;
			-moz-border-radius: 0px 0px 7px 7px;
			-webkit-border-radius: 0px 0px 7px 7px;
			border-radius: 0px 0px 7px 7px;
          	 } 
            
			.portfolio_to {
			margin-bottom: 2px;
			margin-left: auto;
			margin-right: auto;
			
			border: 2px solid #aaaaaa;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			} 
			
			.portfolio_icon {
				width: 50px;
				height: 50px;
			}
			
	        .sector {
			margin-left: auto;
			margin-right: auto;
		
			border: 1px solid #000000;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			padding: 2px 2px;
			
			font-size: 16px;
			} 
              
            .to {
			margin-bottom: 5px;
			margin-left: 5px;
			margin-top: 5px;
			margin-right: 5px;
			
			border: 2px solid #aaaaaa;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			//padding: 2px 2px;
			
			} 
        
         .to-empty{
			margin-bottom: 5px;
			margin-left: 5px;
			margin-top: 5px;
			margin-right: 5px;
			
			border: 2px solid #eeeeee;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			//padding: 1px;
			
			} 
        
        
			/*Text on hover*/
					
			.hovertext {
			position: relative;
			}

			.hovertext:before {
			content: attr(data-hover);
			visibility: hidden;
			opacity: 0;
			/*background-color: #ef1616;*/
			background-color: rgba(239,22,22,0.7);
			
			color: #ffffff;
			text-align: center;
			font-weight: bold;
		
			
			
			font-size: 14px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			padding: 5px 5px;
			transition: opacity 1s ease-in-out;
			position: absolute;
			z-index: 99;
			left: 80%;
			top: 80%;
			}

			.hovertext:hover:before {
			opacity: 1;
			visibility: visible;
			}


			/*Text on hover menu*/
					
			.hovertext-menu {
			position: relative;
			}

			.hovertext-menu:before {
			content: attr(data-hover);
			visibility: hidden;
			opacity: 0;
			background-color: transparent;
			color: #000000;
			text-align: center;
			font-weight: normal;
			font-size: 13px;
			position: absolute;
			width: 50px;
			top: 50px;
			}

			.hovertext-menu:hover:before {
			opacity: 1;
			visibility: visible;
			}
	




			/* Color logo on hover */
			.card {
			position: relative;
			display: inline-block;
			}
    
			.card .img-top {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width:inherit;
			height:inherit;	
			z-index: 98;
			}
			
	
			.card:hover .img-top {
			display: inline;
			}