@font-face {

    font-family: GothamProMedium;
    src: url('../fonts/GothamProBold.ttf');
    src: url("../fonts/GothamProBold.eot?#iefix") format("embedded-opentype"),
         url("../fonts/GothamProBold.woff") format("woff"),
         url('../fonts/GothamProBold.ttf') format("truetype");

}

@font-face {

    font-family: OpenSansBold;
    src: url('../fonts/OpenSansBold.ttf');
    src: url("../fonts/OpenSansBold.eot?#iefix") format("embedded-opentype"),
         url("../fonts/OpenSansBold.woff") format("woff"),
         url('../fonts/OpenSansBold.ttf') format("truetype");

}

html, body {

	margin: 0;
    padding: 0;
}

.flex {

	display: flex;
    justify-content: center;
    text-align: center;
}

.flex-vcenter {

	align-items: center;
}

.inline-nowrap {

    font-size: 0;
    display: inline-flex;
}

.half-height {

    height : 50%;

}

.value-up {

    background-color: #02af79;
}

.value-down {

    background-color: #c93d3e;
}

.widget-container {

	width: 420px;
	min-width: 420px;
	max-width: 420px;
	height: 60px;
	min-height: 60px;
	max-width: 60px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.widget-container div, ul, li, a {

    margin: 0;
    padding: 0;
    font-family: OpenSansBold;
    font-style: normal;
    font-size: 9px;
    color: #cccbcf;
    text-decoration: none;
    list-style: none;
}

.widget-container h1, h3 {

    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    font-family: OpenSansBold;
    font-size: 13px;
    color: #cccbcf;
 }

 .widget-container .flex-vcenter {

    justify-content: space-between;
 }

 .widget-container > div {

    width: 85%;
 }

 .chart-container {

 /*   width: 153px;*/
    height: 56px;
 }

 .stock-name {

    opacity: 0.6;
 }

.chart-container h3 {

    padding-right: 5px;
 }

 .chart-container span{

    padding: 1px 1px 1px 1px;
 }

.chart {

    width: 152px;
    height: 35px;
 }