@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700');
		body{
					color: rgb(85, 85, 85)
;
					/*font-family: "Roboto";*/
					font-family: 'Lato', sans-serif;
					margin: auto;
					overflow: hidden;
					background-color: white;
					font-size: 11px;
					-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
				}
				
				label, th{
					font-family: 'Lato', sans-serif;
					    vertical-align: middle;
					font-weight: 400;
					text-align: center;
					margin-bottom: 0px;
				}
				th{
					position: relative;
				}
				.set-div{
					position: absolute;
					width: 100%;
					top: 50%;
					transform: translateY(-50%);
					-webkit-transform: translateY(-50%);
					-moz-transform: translateY(-50%);
					-o-transform: translateY(-50%);
					-ms-transform: translateY(-50%);
				}
				.stretch{
					 width: 100%;
        			display: inline-block;
        			font-size: 0;
        			line-height: 0
				}
				.col{
					display: inline-block;
					margin-left: 10px;
				}
				#th-summary label{
					display: inline-block;
					cursor: pointer;
					

				}
				.hover{
					    display: inline-block;
					    cursor: pointer;
					        margin-top: 10px;
					        transition-duration: .3s;
					-webkit-transition-duration: .3s;
					-ms-transition-duration: .3s;
					-o-transition-duration: .3s;
					-moz-transition-duration: .3s;

				}
				.hover:hover > label{
					color: rgb(80,80,80);
				}
				.hover:hover .arrow-icon-left, .hover:hover .arrow-icon-right{
					color: black;

				}
				.hover:hover #arrow-icon-summary{
					opacity: 1;
				}
				#th-indexes{
					cursor: initial;
				}
				#th-indexes label{
					cursor: pointer;
				}
				th label{
					
				}
				#th-summary{
					cursor: initial;
				}
				.arrow{
					
					font-size: 36px;
					font-weight: 400;
					color: #ccc;
					transition-duration: .3s;
					-webkit-transition-duration: .3s;
					-ms-transition-duration: .3s;
					-o-transition-duration: .3s;
					-moz-transition-duration: .3s;
					width: 3%;
					display: inline-block;
    				vertical-align: top;
    				cursor: pointer;
				}
				.arrow:hover{
					color: #555;
				}
				.arrow:first-of-type{
					
				}
				#right-arrow {
				
				}
				.overbought-td{
					padding-left: 4%;
					padding-right: 0px;
				}
				.overbought-td-div {
				    padding-top: 7px;
				}
				.cell-wrapper{
					overflow: hidden;
					position: relative;
					width: 94%;
					height: 50px;
					margin: auto;
					display: inline-block;
    				vertical-align: top;
				}
				.buy-chupchik {
				  width: 0; 
				  height: 0; 
				  border-left: 7px solid transparent;
				  border-right: 7px solid transparent;
				  border-bottom: 10px solid #bd5c5c  !important;
				}
				.sell-chupchik {
				  width: 0; 
				  height: 0; 
				  border-left: 7px solid transparent;
				  border-right: 7px solid transparent;
				  border-bottom: 10px solid #567542 !important;
				}
				.sell {
				  width: 0; 
				  height: 0; 
				  border-left: 7px solid transparent;
				  border-right: 7px solid transparent;
				  border-top: 10px solid #bd5c5c;
				}
				/*.buy:before{
					content: '';
				    width: 15px;
				    height: 15px;
				    position: absolute;
				    left: -7px;
				    top: -13px;
				    background-color: #bd5c5c;
				    z-index: 0;
				}*/
				.buy {
				  width: 0; 
				  height: 0; 
				  border-left: 7px solid transparent;
				  border-right: 7px solid transparent;
				  border-bottom: 10px solid #567542 !important;
				}
				#buy-arrow-icon {
				  width: 0; 
				  height: 0; 
				  border-left: 4px solid transparent;
				  border-right: 4px solid transparent;
				  border-top: 6px solid #bd5c5c;
				}
				#sell-arrow-icon {
				  width: 0; 
				  height: 0; 
				  border-left: 4px solid transparent;
				  border-right: 4px solid transparent;
				  border-bottom: 6px solid #567542 !important;
				}
				.neutral{
					width: 11px;
					height: 2px;
					vertical-align: middle;
					background-color: grey; 
					margin-left: 2px; 
				}
				.volatile{
				width: 0; 
				  height: 0; 
				  border-left: 7px solid transparent;
				  border-right: 7px solid transparent;
				  border-bottom: 10px solid #bd5c5c;
				}

				.volatile::after{
					content: '';
					width: 0; 
				  height: 0; 
				  border-left: 7px solid transparent;
				  border-right: 7px solid transparent;
				  border-top: 10px solid #567542;
				  display: block;
    			margin-left: 4px;
				}
				.icon{
					margin: auto;
					position: relative;
				}
				.bar{
					width: 100%;
					height: 2px;
					 background: #c2c2c2; /* For browsers that do not support gradients */
  					background: -webkit-linear-gradient(left, #bd5c5c, #567542  ); /* For Safari 5.1 to 6.0 */
  					background: -o-linear-gradient(right,#bd5c5c, #567542  ); /* For Opera 11.1 to 12.0 */
  					background: -moz-linear-gradient(right, #bd5c5c, #567542  ); /* For Firefox 3.6 to 15 */
  					background: linear-gradient(to right,#bd5c5c, #567542  ); /* Standard syntax */
					position: absolute;
    				top: 4px;
				}
				.bar-container{
					display: inline-block;
					position: relative;
    				height: 10px;
    				width: 80%;
    				margin: auto;
    				transform: translateY(150%);
					-webkit-transform: translateY(150%);
					-moz-transform: translateY(150%);
					-o-transform: translateY(150%);
					-ms-transform: translateY(150%);
				}
				.bar-container p{
					font-size: 11px;
					margin-top: -17px;
				}
				.tooltip-inner {
    white-space:pre-wrap;
   color: #f5f5f5;
   background-color: rgb(85, 85, 85) ;
   max-width: 250px;
   
    opacity: 1;
}				.tooltip.in {
  						filter: alpha(opacity=100);
  						opacity: 1;
				}
				.tooltip.left .tooltip-arrow {

  						border-left-color: rgb(85, 85, 85);
				}

				.tooltip{
					font-family: 'Lato', sans-serif;
   					font-weight: 400;
   					font-size: 11px;

				}
				.chupchik{
					width: 0; 
				  height: 0; 
				  position: absolute;
				  top: 4px;
				  width: 0; 
				  height: 0; 
				  border-left: 7px solid transparent;
				  border-right: 7px solid transparent;
				  border-bottom: 10px solid rgb(80,80,80);
				  transition: border 2s;
				  cursor: pointer;
				}
				.buy-label{
					float: right;
					color: #567542 ;
				}
				.sell-label{
					float: left;
					color: #bd5c5c  ;
				}
				.sort-arrow{
					display: inline-block;
					margin-left: 3px;
					color: #aaa;
					cursor: pointer;
				}
				.sort-arrow:hover{
					color: rgb(80,80,80);
				}
				#th-summary .sort-arrow:hover .arrow-icon-right{
					opacity: 1;
				}
				#th-indexes > .sort-arrow{
					margin-top: 8px;
				}
				.sort-arrow > div{
					display: inline-block;
					vertical-align: middle;
				}
				.arrow-icon-right{
					
					    margin-top: 8px;
    				margin-left: 1px;
				}

				.switch{
					margin-top: -23px;
				}
				.switch2{
					margin-top: -20px !important;
				}
				.arrow-icon-left{
					font-size: 21px;
					transition-duration: .3s;
					-webkit-transition-duration: .3s;
					-ms-transition-duration: .3s;
					-o-transition-duration: .3s;
					-moz-transition-duration: .3s;
				}
				.arrow-icon-right p, .arrow-icon-right div {
					display: block;
    				margin-bottom: 0px;
    				font-size: 8px;
    				transition-duration: .3s;
    				-webkit-transition-duration: .3s;
    				-moz-transition-duration: .3s;
    				-o-transition-duration: .3s;
    				-ms-transition-duration: .3s;
				}
				#th-summary .arrow-icon-right{
					margin-top: 9px;
					opacity: .6;
					    margin-top: 4px;
				}
				#th-summary .arrow-icon-left{
					margin-top: -6px;
				}
				.arrow-icon-right > div{
					margin-bottom: 4px;
				}
				.input__field--nariko{
					max-width: 100px;
				    background: transparent;
				    opacity: 1;
				    padding-top: 6px;
				    padding-bottom: 6px;
				    z-index: 100;
				    color: #333;
				    font-size: 20px;
				    height: 30px;
				    border-radius: 3px;
				    border: 1px solid #ccc;
				    border-bottom: 2px solid #aab038;
				       position: relative;
				    display: block;
				    padding: 0.8em;
				    font-weight: 400;
				    margin: auto;
				    -webkit-appearance: none;
				}

				.index-td {
				    text-align: left;
				    padding-left: 4% !important;
				    padding-top: 23px !important;
				    padding-bottom: 0px !important;
				}

				.ui-widget{
					position: relative;
				}
				input:focus{
					outline: none;
				}
			
				#key{
					display: inline-block;
					vertical-align: top;
					float: right;
				}
				#key div, #key p{
					display: inline-block;
					margin-right: 2px;
				}
				#key > div{
					padding-left: 12px;
  					padding-right: 12px;
				}
				.input__field--nariko:hover {
    				background-color: white;
				}
				#th-cell{
					overflow: hidden;
    				height: 64px;
    				position: relative;
    				border-right: 1px solid #e5e5e5;
    				border-left: 1px solid #e5e5e5;
				}
				}
				.date-td{
					text-align: center;
					font-size: 17px;
					/*color: #A9AF38;*/
					padding: 5px;
					/*background-color: #222222;*/
    				
				}
				#head-row-1{
					    background-color: #f5f5f5;
				}

			
				#time-frame-div .btn-group{
					padding-left: 0px;
    				padding-right: 0px;
    				 right: -150px;
    				 transition-duration: .3s;
    				-webkit-transition-duration: .3s;
    				-ms-transition-duration: .3s;
    				-moz-transition-duration: .3s;
    				-o-transition-duration: .3s;
    				border-bottom: solid 2px #aab038;
    			

				}

				.btn-group-open{
					right: 30px !important;
				}
				.dropdown-menu {
					width: 130px !important;
				}
				

				.caret{
					color: #aaa;
				}
				#i{
					font-size: 15px;
					color: #aaa;
    				z-index: 2;
    				background: #f5f5f5;
				}
				#search-icon{
					position: absolute;
					left: 32px;
    				top: 29px;
				}
				

				  .btn{
	          font-size: 11px;
	          transition: all 0.3s ease 0s;
	          border:none;
	          background: transparent;
	          /*border: 1px solid #c5c5c5;
	          background-color: #eee;*/
	          border-radius: 0px;
             /* border-bottom: solid 2px #aab038 ;*/
       			}
        		.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover, .bootstrap-select .dropdown-toggle:focus, .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle {
					border: none;
					box-shadow: none;
					outline: none !important;
					background-color: transparent;
				}
				.btn-default:hover{
					background-color: transparent;
				}

				.btn.blue-btn{
					border-bottom: solid 2px #06A2C6;
				}
				.bootstrap-select.btn-group .dropdown-toggle .filter-option{
					text-align: center;
				}
				.bootstrap-select.btn-group .dropdown-toggle .caret{
					right: 2px;
				}
				.bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*=col-]{
					float: right;
				}
				
				a:focus {
					outline: none;
				}

				.tr-selected{
					border-top: 1px solid #A9AF38;
					border-bottom: 1px solid #A9AF38;
				}

				.bold{
					font-weight: 500;
				}

				
				#table{
					position: relative;
					    background-color: #f5f5f5;
				}
				td{
					text-align: center;
					vertical-align: middle;

				}
		
				tr{
					visibility: visible;
  					opacity: 1;
					transition: 1s; 
					border-bottom: 1px solid #e5e5e5;
					padding: 0px !important;

				}
				
				
				
				h1{
					font-size: 24px;
    				display: inline-block;
   				 	vertical-align: top;
   				 	margin-top: 22px;
    				text-align: center;
    				line-height: 32px;
    				font-weight: 300;
				}
				thead>tr>th{
					border: 1px solid #555;
				}

			tbody {
	  			height: 1500px;
	  			overflow-y: auto;
	  			width: 100%;
	  			background: white;
	  		
			} 

			thead{
				 width: 100%;
				     padding-right: 17px;
			}
			thead, tbody {
  				display: block;
  				
			} 
	
				
				.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
					vertical-align: middle;
					float: left;
    				border: none;
				}
		

	
				
				 /* select with custom icons */
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
      padding: 0.5em 0 0.5em 3em;
    }
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
      height: 20px;
      width: 30px;
      top: 0.1em;
      
    }
  .ui-widget-content li.ui-menu-item:hover {
    background-color: orange;
}
 
		
				.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    				width: auto;
						}

				#plus{
					width: 14px;
   				 	cursor: pointer;
   				 	height: 14px;
				}

				#plus-path{
					fill: #aaa;
					transition-duration: .3s;
				}
				
				#plus-text{
					display: inline-block;
			    vertical-align: bottom;
			    margin-top: -16px;
			    font-size: 14px;
    color: #aaa;
				}

				#add-to-site-box:hover #plus-path{
					fill: black;
				}

				#add-to-site-box:hover #plus-text{
					color: black;
				}
				#add-to-site-box{
					display: inline-block;
					float: right;
					vertical-align: top;
					cursor: pointer;
				}



			
				.head-left{
					  position: relative;
    				vertical-align: top;
	    				margin-top: 0px;
	    				text-align: center;
	    				margin-left: 13px;
	
				}
				
				
				.table-responsive{
					margin-top: 180px;
    				height: 800px;
				}

				#table_1{
					transition: 0.3s ease 0s;
					top: 0px;
				}
				.slider{
					position: relative;
					height: 100%;
					transition-duration: .5s;
					-webkit-transition-duration: .5s;
					-ms-transition-duration: .5s;
					-o-transition-duration: .5s;
					-moz-transition-duration: .5s;
				}
				#header{
					
					    background-color: #f5f5f5;
    border-top: 20px solid #aab038;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
				}

				
				#gsi-logo{
					
    				max-width: 175px;
    				margin-top: 20px;
    				margin-right: 12px;
				}
				#plus{
          width: 14px;
            cursor: pointer;
            height: 14px;
            float: left;
        }

        #plus-path{
          fill: #aaa;
          transition-duration: .3s;
        }
      #plus-div{
            position: relative;
            overflow: hidden;
            width: 14px;
            height: 14px;
            display: inline-block;
                vertical-align: top;
            margin-top: 34px;
            margin-left: 15px;
            transition-duration: .3s;
            -webkit-transition-duration: .3s;
            -moz-transition-duration: .3s;
            -ms-transition-duration: .3s;
            -o-transition-duration: .3s;
      }
      #plus-a:after{
        content:'Add to your site';
            position: absolute;
            left: -79px;
             transition-duration: .3s;
            -webkit-transition-duration: .3s;
            -moz-transition-duration: .3s;
            -ms-transition-duration: .3s;
            -o-transition-duration: .3s;
            color: #aaa;
      }
      #plus-div:hover{
        width: 130px;
      }
      #plus-div:hover #plus-a:after{
          left: 19px;
          color: rgb(85, 85, 85);
      }
      #plus-div:hover #plus-path{
        fill: rgb(85, 85, 85);
      }
				
			
			
				.wrapper{
					    text-align: justify;
    display: block;
    margin: auto;
    margin-top: 8px;
				}

				.wrapper:after{ 
					content:' '; display:inline-block; width: 100%; height: 0 ;
				}

			
				.slide-td-selected{
					border-top: 1px solid #eee;
				}

				.dropdown-menu{
					width: 100%;
				}

				.dropdown-menu .inner{
					top: 0px;
					font-size: 11px;
					cursor: pointer;
				}

				.media-body, .media-left{
					vertical-align: middle;
				}
				.caret{
					float: right;
    				margin-top: 6px;
				}

				.form-control{
					border:none;
					width: auto;
					height: auto;
					padding: 0px;

				}

				.bootstrap-select .open{
					overflow: visible !important;
					max-height: none !important;
    				min-height: auto !important;
    				border: none;
				}

				#importance-box .dropdown-menu img{
					width: 55px;
				}
				.dropdown-menu img {
					width: 30px;
				}
				
				.underline{
				    position: absolute;
				    width: 72px;
				    left: 25px;
				    height: 2px;
				    background: #aab038;
				    bottom: -6px;
				    transition-duration: .2s;
					-webkit-transition-duration: .2s;
					-ms-transition-duration: .2s;
					-o-transition-duration: .2s;
					-moz-transition-duration: .2s;
				}
				#time-frame-div{
					position: relative;
					display: inline-block;
					vertical-align: top;
				}
				#time-frame-div div{
					display: inline-block;
					padding-right: 10px;
					padding-left: 10px;
					cursor: pointer;
					color: #aaa;
				}
				
				.timeframe-selected{
					color: rgb(80,80,80) !important;

				}


				@media (max-width: 660px ){
						
					h1{
	    				text-align: center;
	    				
					}
					
					.head-left{
		    				text-align: center;
		    				display: block;
		    				vertical-align: none;
		    				max-width: none;
		
					}
					
			
				}
	@media (max-width: 406px ){
		#gsi-logo{
			margin-bottom: -15px;
		}
		.input__field--nariko {
			display: none;
		}

	}
	@media (max-width: 500px ){
		.sort-arrow{
			display: block;
		}
	}
	@media (max-width: 840px ){
		#key{
			display: block;
			text-align: center;
			float: none;
			margin-top: 26px;
		}
		#time-frame-div{
			display: block;
			text-align: center;
		}
		#header{
			padding-bottom: 10px;

		}
	}