:root {

    --interface-back: 		#212429;
    --interface-for: 		#51535e;
    --interface-light-3: 	#747a89;
    --interface-light-2: 	#828896;
    --interface-dark-1: 	#5a5c67;
    --interface-dark-2: 	#4d4f59;
    --interface-dark-3: 	#313239;
    --interface-dark-4: 	#25262c;

    --interface-action:				#FCC43B;
    --interface-action-dark-1:		#fcb714;
    --interface-action-light-1:		#fdca53;
    --interface-action-light-2:		#fee19e;
    --interface-action-light-tr:    rgba(0,0,0,0.85);


    --interface-link:			#4081ec;
    --interface-link-dark1:		#2b73ea;
    --interface-link-light-1:	#6a9cf0;

    --interface-text-light:			#e8f2f9;


    --interface-info-green:			#a1e63f;
    --interface-info-red:			#e63e3e;



    /*--main-color: #262840;
    --main-color-light-1: #3d4067;
    --main-color-light-2: #494d7a;
    --main-color-dark-1: #141521;
    --main-color-2: #6495ed;
    --clickable: #4081ec;
    --clickable-hover: #97baf4;
    --white: #ffffff;
    --color-blue: #4081ec;
    
    --color-highlight: #4081ec;*/
}

@font-face {
    font-family: OpensansLight;
    src: url("fonts/Open_sans/OpenSans-Light.ttf");
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url(https://example.com/material-symbols.woff) format('woff');
}

html, body {
    height: 100%;
    background-color: var(--interface-back);
    margin: 0 0;
    font-family: OpensansLight;
    font-weight: 100;
    letter-spacing: 0.05rem;
    color: var(--interface-text-light);
}




#stocksView_cont_main{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    background-color: var(--interface-back);
    justify-content: center;
    position: relative;
}


#stocksView_cont_header,#stocksView_cont_footer{
    background-color:var(--interface-back);
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

#stocksView_cont_center{
    margin: 0 auto;
    justify-content:center;
    background-color: var(--interface-for);
    width: 1024px;
}

#stocksView_cont_center_mask{
    position: absolute;
    z-index: 55;
    background-color: var(--interface-action-light-tr);
    display: flex;
    align-items: center;
}

.stocksView_topnav{
    background-color: var(--interface-dark-2);
    border-bottom: 1px solid var(--interface-dark-3);
}

.stocksView_divmod{
    background-color: var(--interface-for);
}


.empty-color{
    background-color: var(--interface-action);
}



.stocksView_resizer_highlight{
    background-color: var(--interface-action) !important;
}

.stocksView_resizer_highlight:hover{
    background-color: var(--interface-action-light-1) !important;
}

.stocksView_topnav_div_b1_lr{
    border-left: 1px solid var(--interface-dark-3);
    border-right: 1px solid var(--interface-dark-3);
    padding: 0 3px;
}


.valid_green{
    background-color: var(--interface-info-green)
}
.valid_red{
    background-color: var(--interface-info-red)
}
.valid_grey{
    background-color: var(--interface-light-2)
}


input {
    background-color: var(--main-color-dark-1);
    color: white;
    width: 100%;
    border: 1px solid var(--main-color);
    outline: none;
    box-sizing: border-box;
}


.stocksView_resizer_highlight{
    width : 100%;
    height : 100%;
    position : absolute;
    z-index : 25;
    display : flex;
    align-items : center;
    overflow : hidden;
}

.div-clickable:hover {
    cursor: pointer;
}
.div-clickable:hover .svg-clickable {
    stroke: var(--interface-action-light-2)
}
.svg-clickable {
    stroke:  var(--interface-action)
}
.div-clickable-layout{
    margin: 0 auto;
    border-radius: 5px;
    width : 100%;
    height : 100%;
    max-width: 60px;
    max-height: 60px
}

.clickable {
    color: var(--interface-action-light-2);
}
.clickable:hover {
    color:var(--interface-action-light-2);
}
.clickable-nocolor {
    cursor: pointer;
}
.clickable-nocolor:hover {
    color: var(--interface-action-light-2)
}


.menu-button{display: flex;flex-direction: row;align-items: center; position: relative;height: 100%}

.button {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--interface-action);
  cursor: pointer;
  border: 2px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}



.scrollbar-width-thin {
    scrollbar-width: thin;
}


.box-shadow-l1-b{
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.71);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.71);
    border: 1px solid #181a29;
}

#stocksView_cont_header{
    border-bottom: 3px solid var(--interface-back);
    height: 50px;
    width: 1024px;
}

#stocksView_cont_footer{
    border-top: 3px solid var(--interface-back);
    height: 50px;
}

.section_title{
    font-size: 26px;
}











th, td {
    padding-left: 5px;
}


.stocks-table{
    padding: 0;
    margin: 0;
    width:100%;
    font-size: 11px;
    background-color: var(--interface-for);
}



.stocks-table-z0 thead th {
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    background-color: var(--interface-dark-3);

}

.stocks-table-z0 tbody td {
    height:12px;
    overflow:hidden;
    word-wrap:break-word;

}

.stocks-table-z0 tbody th {
    height:12px;
    overflow:hidden;
    word-wrap:break-word;


}



.stocks-table tbody tr:hover {
    background-color: var(--interface-dark-3);
}



.stocks-table tr:nth-child(even) {
    background-color: var(--interface-for);
}
.stocks-table tr:nth-child(odd) {
    background-color: var(--interface-dark-1);
}


.stocks-table td:nth-child(3) {
    text-align: center;
}



.no_select{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.stocksView_resizer{
    background-color: var(--interface-dark-3);
}

.stocksView_resizer:hover{
    background-color: var(--interface-dark-3);
}

.stocksView_resizer_v_mask[data-direction='vertical'] {
    cursor: ew-resize;
}

.stocksView_resizer_h_mask[data-direction='horizontal'] {
    cursor: ns-resize;
}



.stocksView_split_hover {
    background-color: var(--interface-action);
}



.stocksView-modSelection{
    width : 500px;
    height : 500px;
    background-color : var(--interface-for);
    margin : 0 auto;
    border-radius:5px;
}






/*********************** mod ********************/
.stocks_ex_closed{
    width:10px;
    height:10px;
    background-color: var(--interface-info-red);
    border-radius:10px;
    margin: auto;
}


a#tv-attr-logo {

    display: none;
}