* {
    box-sizing: border-box;
}

#chart-box {
    border: 1px solid #d6d6d6;
    margin-top: 5px;
}

#chart-box > .title {
	background-color:#efefef;
	border-bottom: 1px solid #d6d6d6;
	text-align:center;
	padding:10px;
}

.btn_combo {
    width: 25%;
    display: inline-block;
    background-color: #efefef;
    border-right: 1px solid #d6d6d6;
    border-top: 1px solid #d6d6d6;
    text-align: center;
    padding: 10px;
    font-size:14px;
    cursor: pointer;
}

.btn_combo.active {
    background: #5B61B2;
    color: #FFFFFF;
    font-weight: bold;
}

/* ---------------- PIE GRAPH ------------------------ */
.pie_box { width: 49%; float: right; padding: 15px; }
.pie_graph { position: relative; float: left; padding: 15px; }
.pie_graph .info { float: left; margin-top: 10px; }
.pie_graph .info li {
	display:block;
    margin-bottom: 16px;
	height: 15px;
	font-size:14px;
    line-height: 15px;
}

.pie_graph .info .ic {
    float: left;
    margin: 1px 10px 0 0;
    width: 11px;
    height: 11px;
    border-radius: 6px;
}

.pie_graph .info .left4odd .ic { background-color: #3498db; }
.pie_graph .info .right3odd .ic { background-color: #2980b9; }
.pie_graph .info .left3even .ic { background-color: #e74c3c; }
.pie_graph .info .right4even .ic { background-color: #c0392b; }

.pie_graph .info .left4odd.on { color: #3498db; }
.pie_graph .info .right3odd.on { color: #2980b9; }
.pie_graph .info .left3even.on { color: #e74c3c; }
.pie_graph .info .right4even.on { color: #c0392b; }

.pie_graph .info .size_dae .ic { background-color: #c0392b; }
.pie_graph .info .size_joong .ic { background-color: #2980b9; }
.pie_graph .info .size_so .ic { background-color: #28af61; }

.pie_graph .info .size_dae.on { color: #c0392b; }
.pie_graph .info .size_joong.on { color: #2980b9; }
.pie_graph .info .size_so.on { color: #28af61; }




.pie_graph .info .on { font-weight: 700; }

.pie_graph .pie_content {
    height: 120px;
    width: 120px;
	float: left;
    margin-right: 20px;
}

.pie_graph .item {
    position: absolute;
    width: 120px;
    height: 120px;
    clip: rect(0px,120px,120px,60px);
}

.pie_graph .item span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    clip: rect(0px,120px,120px,60px);
}

/* ---------------- BAR GRAPH ------------------------ */

.bar_graph {
	width: 50%;
	float: left;
    padding: 41px 71px 0;
    border-right: 1px solid #d6d6d6;
}

.bar_graph .bar {
    margin-bottom: 30px;
    width: 100%;
    height: 21px;
    border-radius: 11px;
    background-color: #ededed;
}

.bar_graph p {
    position: relative;
    height: 21px;
    border-radius: 11px;
    color: #979797;
}

.bar_graph .left { float: left; }
.bar_graph .right { float: right; }

.bar_graph .tx {
    position: absolute;
    top: -5px;
    width: 29px;
    height: 29px;
    line-height: 29px;
    text-align: center;
    border: 1px solid #d8d8d8;
    border-radius: 16px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
}

.bar_graph .per {
    position: absolute;
    top: 0;
    line-height: 21px;
    white-space: nowrap;
    font-family: Tahoma;
    font-size: 9px;
}

.bar_graph .left.on, .bar_graph .left.on .tx {
	background-image: linear-gradient( 160deg, rgba(119, 182, 239, 0.67) 11.3%, rgb(8, 106, 177) 91.1% );
    background-color: #1d7cce;
    color: #fff;
}
.bar_graph .right.on, .bar_graph .right.on .tx {
	background-image: linear-gradient( 160deg, rgba(255, 133, 62, 0.64) 11.3%, rgb(210, 14, 14) 91.1% );
	background-color: #fd4949;
    color: #fff;
}


.bar_graph .left .tx { left: -41px; }
.bar_graph .right .tx { right: -41px; }
.bar_graph .left .per { left: 9px; }
.bar_graph .right .per { right: 9px;}

.bar_graph .left.on .tx { border: 1px solid #3498db; }

.bindo {
	position: relative;
	text-align: center;
	padding:10px;
	width:100%;
	border-right: 1px solid #d6d6d6;
	border-left: 1px solid #d6d6d6;
}

/* ---------------- Max Bindo  ------------------------ */
.bindo .tx {
	display:inline-block;
    top: -5px;
    min-width: 29px;
    height: 29px;
    line-height: 29px;
    text-align: center;
    /*border: 1px solid #d8d8d8;*/
    border-radius: 16px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
}

.bindo .tx.blue {
    background-image: url(balls.png);
	background-position-x: 2px;
	background-position-y: -1px;
    width: 33px;
    height: 33px;
    color: #fff;
}

.bindo .tx.red {
    background-image: url(balls.png);
	background-position-x: -33px;
	background-position-y: -1px;
    width: 33px;
    height: 33px;
    color: #fff;
}

.bindo .tx.gray {
    background-image: url(balls.png);
    background-position-x: -251px;
	background-position-y: 0px;
    width: 33px;
    height: 33px;
    color: #fff;
}


.bindo .tx.yellow {
    background-image: url(balls.png);
    background-position-x: -214px;
	background-position-y: 0px;
    width: 33px;
    height: 33px;
    color: #fff;
}


/* ---------------- History  ------------------------ */
#history table {
    width: 100%;
	border: 1px solid #d6d6d6;
	border-collapse: collapse;
}

#history th { background-color:#f2f2f9; }
#history th, td {
	text-align: center;
    border: 1px solid #e2e0e0;
}

#history tr { height:40px; }
#history td > span { font-size:0.9em; }
#history td b { font-size:1.1em; }
#history td .btn {
    background-color: #101010;
    color: white;
    padding: 2px 4px;
    border-radius: 5px;
    margin-left:6px;
    font-size:0.85em;
}


#history.sadari th:nth-child(1) { width: 25%; }
#history.sadari th:nth-child(2) { width: 10%; }
#history.sadari th:nth-child(3) { width: 29%; }
#history.sadari th:nth-child(4) { width: 12%; }
#history.sadari th:nth-child(5) { width: 12%; }
#history.sadari th:nth-child(6) { width: 12%; }


#history tbody tr:nth-child(even) {
	background: #f7f7f7;
}

.ball_v1 {
    background-image: url(balls.png);
    background-position-y: -1px;
    background-position-x: 2px;
    line-height: 30px;
    width: 33px;
    height: 30px;
    color:white;
    margin: 0 auto;
}
.ball_v1.red { background-position-x: -33px; }


.ball_v2 {
	display:inline-block;
    width: 31px;
	height: 32px;
	background-image:url('balls.png');
	color: white;
    text-shadow: 0px 1px 2px black;
	line-height: 29px;
	padding-right:2px;
	margin:2px;
    top: 17px;
    font-size: 13px;
}


.ball_v2.red { background-position-x: -142px; }
.ball_v2.blue { background-position-x: -105px; }
.ball_v2.green { background-position-x: -179px; }
.ball_v2.yellow { background-position-x: -216px; }
.ball_v2.black { background-position-x: -253px; }


.combo {
	position:relative;
	display:inline-block;
	text-align: center;;
	font-weight: bold;
	vertical-align: top;
	height: 100%;
	border-right: 1px solid #d4e0e6;
    border-top: 2px solid #77a5d4;
}

.combo li {
	width:33px;
	height:20px;
	list-style: none;
	font-family: auto;
}

.combo li:first-child {
	font-size:12px;
    height: 22px;
    line-height: 22px;
	border-bottom: 1px solid #d2d2d2;
	background-color:#fcfcfc;
}

.combo li:nth-child(2) {
	margin-top:3px;
}


.combo li:last-child {
	font-size:12px;
	position:absolute;
	bottom:0px;
	border-top: 1px solid #d2d2d2;
    line-height: 25px;
	height: 25px;
	background-color:#f0f0f0;
}

.combo li:not(:first-child):not(:last-child) {
	color: white;
    line-height: 28px;
    font-size: 10px;
}

.combo.blue li:first-child { color:#278dcb; }
.combo.blue li:not(:first-child):not(:last-child) {
	background-image: url(balls.png);
	background-position-x: 2px;
	background-position-y: -1px;
    width: 33px;
    height: 33px;
}

.combo.red li:first-child { color:#fd4949; }
.combo.red li:not(:first-child):not(:last-child) {
	background-image: url(balls.png);
	background-position-x: -33px;
	background-position-y: -1px;
    width: 33px;
    height: 33px;
}

.combo.gray li:first-child { color:#404040; }
.combo.gray li:not(:first-child):not(:last-child) {
	background-image: url(balls.png);
	background-position-x: -251px;
	background-position-y: 0px;
    width: 33px;
    height: 33px;
}

.combo.yellow li:first-child { color:#ffb300; }
.combo.yellow li:not(:first-child):not(:last-child) {
	background-image: url(balls.png);
	background-position-x: -214px;
	background-position-y: 0px;
    width: 33px;
    height: 33px;
}



/*
.combo.gray li {
	background-color: gray;
}
.combo.red li:not(:first-child) {

    color: #fff;
	background-image: linear-gradient( 160deg, rgba(255, 133, 62, 0.64) 11.3%, rgb(210, 14, 14) 91.1% );
    background-color: #fd4949;
    top: -5px;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 16px;
    font-size: 14px;
}

.combo.blue li {
	background-color: blue;
}

.combo.yellow li {
	background-color: yellow;
}
*/



table {
	border:1px solid #d6d6d6;
	border-collapse: collapse;
}

th { background-color:#f2f2f9; }
th, td { text-align: center; border: 1px solid #e2e0e0; }

#more {
	width: 100%;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    background-color: #f2f2f9;
    padding: 5px;
    box-sizing: border-box;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #6277c3;
	font-size: 14px;
}