* { margin: 0; padding: 0; }
/* html *, html *:before, html *:after { box-sizing: inherit; } */
body {    display: inline-block;width: 100%;height: 865px;box-sizing: border-box;font-size: 16px;font-family: 'Roboto', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-tap-highlight-color: rgba(0,0,0,0);overflow: hidden;color: #000;}
h2 {font-family: 'Roboto', sans-serif;font-size: .9em;font-weight: 300;line-height: 1.2;     margin-top: 4px;}

h3 {font-family: 'Merriweather', serif;font-size: 1.2em;font-weight: 700;line-height: 1.2;}

.title .mobile {display:none;}
.hidden { display: none !important; }

.box { display: inline-block; position:relative;box-sizing: border-box;width: 100%; max-width: 660px; height: 100vh;    overflow-y: hidden;    overflow-x: hidden; }
.container { position: relative; width: 100%;}
.title-container {padding: 7px 0;background: #ffffff;color: #000;}
.title-container .title {text-align: left;}
.title-container .title-button { position: absolute; top: 0; font-size: 2em; font-family: 'Roboto', sans-serif; font-weight: 700; text-align: center; line-height: 55px; color: #c5ddef; cursor: pointer; user-select: none; transition: color .5s ease; }



.title-container .title-button.prev-button { left: 5px; }
.title-container .title-button.next-button { right: 5px; }
.title-container .title-button:hover { color: #fff; }
.chart-container .chart {
	    display: inline-block;
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    position: relative;
    top: 15px;
    box-sizing: border-box;
}
.chart-container .chart .chart-row {width: 100%;height: 25px;padding-left: 7px;overflow: hidden;color: #000;position: relative;     border-bottom: 1px solid #fff;}

.chart-container .chart .chart-row:nth-child(5n){
	border-bottom: 1px solid #ccc;
}

.chart-container .chart .chart-row:after { content: ""; display: table; clear: both; }
.chart-container .chart .chart-row .chart-cell {display: inline-block;float: left;width: 100px;text-align: center;line-height: 25px;    transition: width .8s ease, opacity 1s ease;}
.chart-container .chart .chart-row .chart-cell.chart-cell-small { width: 10%; }
.chart-container .chart .chart-row .chart-cell.chart-cell-more {width: 270px;position: absolute;top: 0;right: 0;background: #fff;transform: translateX(270px);
/* border-left: 1px solid #ccc; */
transition: transform .3s ease;height: 29px;}

.chart-cell.chart-cell-tries,
.chart-cell.chart-cell-turn {
	color:#000 !important;
}

.chart-container .chart .chart-row .chart-cell.chart-cell-ko {     font-weight: 400; color:#000; }
.chart-container .chart .chart-row .chart-cell.chart-cell-pool {width: 120px;padding-left: 4px;}
.chart-container .chart .chart-row .chart-cell.chart-cell-home {padding-right: 4px;font-size: 1em;text-align: right;line-height: 25px; font-weight:400;}
.chart-container .chart .chart-row .chart-cell.chart-cell-away {padding-left: 4px;font-size: 1em;text-align: left;line-height: 25px; font-weight:400;}
.chart-container .chart .chart-row .chart-cell.chart-cell-score {min-width: 62px;font-weight: 500;}
.chart-container .chart .chart-row .chart-cell.chart-cell-tbc {font-style: italic;color: #757170;}
/* .chart-container .chart .chart-row .chart-cell.chart-cell-hk { font-weight: 600; } */
.chart-container .chart .chart-row .chart-cell .chart-cell-name-short { display: none; }
.chart-container .chart .chart-row.chart-header {font-size: .85em;height: 30.5px;background: #ececec;}
.chart-container .chart .chart-row.chart-header .chart-cell {font-size: 1em;font-weight: 400;line-height: 28px;color: #000;z-index: 1;    font-weight: 600;
    font-size: 16px; background: #ececec;opacity:1;transition:opacity 0.8s ease;}
.chart-container .chart .chart-row.chart-women {color: #df6700;}
.chart-container .chart .chart-row.chart-women .chart-cell.chart-cell-score { color: #000; }
.chart-container .chart .chart-row.chart-qualifier {color: #107fa8;}
.chart-container .chart .chart-row.chart-qualifier .chart-cell.chart-cell-score { color: #000; }

.chart-container .chart .chart-row.chart-qualifier .chart-cell.chart-cell-score .home,
.chart-container .chart .chart-row.chart-world_series .chart-cell.chart-cell-score .home,
.chart-container .chart .chart-row.chart-women .chart-cell.chart-cell-score .home {
	display:inline-block;
	text-align:right;
	width:18px;
}

.chart-container .chart .chart-row.chart-qualifier .chart-cell.chart-cell-score .away,
.chart-container .chart .chart-row.chart-world_series .chart-cell.chart-cell-score .away,
.chart-container .chart .chart-row.chart-women .chart-cell.chart-cell-score .away  {
	display:inline-block;
	text-align:left;	
	width:18px;
}

.chart-container .chart .chart-row.chart-qualifier .chart-cell.chart-cell-score .dash,
.chart-container .chart .chart-row.chart-world_series .chart-cell.chart-cell-score .dash,
.chart-container .chart .chart-row.chart-women .chart-cell.chart-cell-score .dash  {
	display:inline-block;
	text-align:center;	
	width:8px;
}

.chart-container .chart .chart-row .chart-cell.chart-cell-match { display: none; }

.chart-keys .remark { display: none }
.chart-keys .remark .remark-team1{color: #dfb102;}
.chart.active + .chart-keys .remark {display: inline-block;font-size: .9em;color: #000;font-family: 'Roboto';font-weight: 700;padding-right: 10px;}
.chart.active + .chart-keys .chart-key { display: none }
.chart-container .chart .chart-row.chart-header .chart-cell-poss .remark, .chart-container .chart .chart-row.chart-header .chart-cell-tries .remark { display: none; }
.chart-container .chart .chart-row.chart-header .chart-cell-turn .remark {position: absolute;letter-spacing: .2em;text-align: center;}

.chart-container .chart .chart-row.chart-header .chart-cell.chart-cell-more-btn {
	width: 68px;
	float: right;
	z-index: 5;
	background: #757170;
	cursor: pointer;
	position: absolute;
	right: 0;
	border:2px solid #757170;

	color:#fff;
	transition:color 0.6s ease, background 0.6s ease, border 0.6s ease;
}

.chart-container .chart .chart-row.chart-header .chart-cell.chart-cell-more-btn:hover,
.chart-container .chart .chart-row.chart-header .chart-cell.chart-cell-more-btn:focus {
	background:#757170;
	color:#fff;
		border:2px solid #757170;
}

.box.day-1 .chart-container .chart .chart-cell-more-btn.bottom{height: 675px;    font-size: 34px;}
.box.day-2 .chart-container .chart .chart-cell-more-btn.bottom{height: 650px;}
.box.day-3 .chart-container .chart .chart-cell-more-btn.bottom{height: 600px;}



.chart-container .chart .chart-cell-more-btn.bottom {position: absolute;top: 30px;right: 0;width: 60px;display: table;cursor: pointer;background: #eee;}

.chart-container .chart .chart-cell-more-btn.bottom:hover,
.chart-container .chart .chart-cell-more-btn.bottom:focus {
	background:#ddd;
}

.chart-container .chart .chart-cell-more-btn.bottom .ion { height: 30px; width: 100%; vertical-align: middle; display: table-cell; text-align: center; }
.chart-container .chart .chart-row.chart-header .chart-cell .chart-cell-more-text{padding-right: 3px;text-align: right;font-weight: 700;}
.chart-container .chart .chart-row.chart-header .chart-cell-tries {/* font-size: .9em; *//* line-height: 12px; *//* padding-top: 3px; */}
.chart-container .chart .chart-row.chart-header .chart-cell-turn {/* font-size: .9em; *//* line-height: 12px; *//* padding-top: 3px; */}
.chart-container .chart .chart-row.chart-header .chart-cell-poss {/* font-size: .9em; *//* line-height: 12px; *//* padding-top: 3px; */}
.chart-container .chart .chart-row .chart-cell-tries {width: 44% !important;/* letter-spacing: -0.05em; */}
.chart-container .chart .chart-row .chart-cell-turn {width: 44% !important;}
.chart-container .chart .chart-row .chart-cell-poss {width: 44% !important;  }
.chart-container .chart .chart-row .chart-percent { font-size: .8em }
.chart-container .chart .chart-row .bars-wrapper {/* border: 1px solid #ccc; */width: 80%;height: 10px;margin-top: 5px;display: inline-block;margin-left: 20%; position: relative;}
.chart-container .chart .chart-row .bars-wrapper:after {content:'';height: 12px;width: 1px;position: absolute;left: calc(50% - 0.5px);top: -2px;background:#ccc;}
.chart-container .chart .chart-row .bar {float: left;height: 8px;}

.chart-container .chart .chart-row .bar-home {background: #000;}
.chart-container .chart .chart-row .bar-away {background: #000;}

.chart-container .chart .chart-rows .chart-cell-tries .tries-home,
.chart-container .chart .chart-rows .chart-cell-turn .turn-home {color: #000;}

.chart-container .chart .chart-rows .chart-cell-tries .tries-away,
.chart-container .chart .chart-rows .chart-cell-turn .turn-away {color: #000;}

.chart-container .chart.active .chart-row .chart-cell {width: 78px;transition: width .5s ease;}
.chart-container .chart.active .chart-row .chart-cell.chart-cell-more {transition: transform .5s ease;transform: translateX(-30px);width: calc(100% - 268px); border-left:0px;}
.chart-container .chart.active .chart-row .chart-cell-name-long, 
.chart-container .chart.active .chart-row .chart-cell.chart-cell-ko,
.chart-container .chart.active .chart-row .chart-cell.chart-cell-pool {
	width:0;
	/* display: none; */
	transition:width 0.4s ease, opacity 0.4s ease;
	overflow:hidden;
	opacity:0;
	font-weight: 400;
	padding:0;
	margin:0;
}

.chart-container .chart.active .chart-row .chart-cell-name-long{
	display:none;
}
.chart-container .chart.active .chart-row .chart-cell-name-short { display: inline-block;font-weight: 400; }
.chart-container .chart.active .chart-row.chart-header .chart-cell-more-text {}
.chart-container .chart.active .chart-row.chart-header .chart-cell.chart-cell-more-btn { background:#757170;color:#fff;border:2px solid #757170;}

.chart-container .chart.active .chart-row.chart-header .chart-cell.chart-cell-more-btn .ion  { transform: rotate(-180deg);}

.chart-container .chart.active .chart-row.chart-header .chart-cell.chart-cell-more-btn:hover,
.chart-container .chart.active .chart-row.chart-header .chart-cell.chart-cell-more-btn:focus {
	background:#757170;color:#fff;border:2px solid #757170;
}

.chart-container .chart.active .chart-cell-more-btn.bottom .ion { transform: rotate(-180deg); }
.chart-container .chart.active .chart-row .chart-cell.chart-cell-away {padding-left: 0;}
.chart-container .chart.active .chart-row.chart-women .chart-cell-more{color: #999;}
.chart-container .chart.active .chart-row.chart-qualifier .chart-cell-more{color: #999;}
.chart-container .chart.active .chart-row.chart-world_series .chart-cell-more{color: #999;}



.chart-keys { text-align: left;position:relative; top:5px;font-weight: 600;font-size: 16px; }

.chart-keys .chart-key {margin-top: 3px;font-size: .9em;display: inline-block;margin-right: 10px;font-family: 'Roboto', sans-serif;}
.chart-keys .chart-key-world {color: #000;}
.chart-keys .chart-key-qualifier {color: #2792bb;}
.chart-keys .chart-key-woman {color: #df6700;}
.chart-keys .chart-lable {  }
.chart-cell-poss { display: none !important }

/* .controls{display:none;} */

.control {
	position:absolute;
	    display: inline-block;
	bottom:2px;
	width:48px;
	/* box-sizing:border-box; */
	font-size:1.4em;
	text-align:center;
	line-height:48px;
	background:rgba(255,255,255,0.2);
	cursor:pointer;
	border:1px solid #757170;
	z-index:2;
}
#control-next {
    right: 2px;
}

#control-prev {
    left: 2px;
}

.bullets{
	position: absolute;
    bottom: 26px;
    margin: 0 40%;
    display: inline-flex;
    width: 100%;
    left: 0;
}

.bullets span {
	width:15px;
	height:15px;
	border:1px solid #757170;
	border-radius:50%;
	margin:0 5px;
}

.bullets span.active {
	background:#000;
}

@media screen and (min-width: 500px) {
  .chart-container .chart .chart-row.chart-header .chart-cell-turn .remark {margin-left: 20px;}
  
  .bullets{margin:0 38%;}


}

@media screen and (max-width: 500px){
  .title .desktop {display:none;}
  .title .mobile {display:inline-block;}

  
  .chart-container .chart .chart-row {padding-left:4px;}
  
}

@media screen and (max-width: 460px) {
  .chart-container .chart.active .chart-row .chart-cell.chart-cell-more {/* width:100%; */width: calc(100% - 160px);}
  
  
    .chart-container .chart.active  .chart-header.chart-row .chart-cell.chart-cell-score ,
	
  .chart-container .chart.active  .chart-row .chart-cell.chart-cell-score .home,
.chart-container .chart.active  .chart-row .chart-cell.chart-cell-score .away  { display: none }
  
  
  
  .chart-container .chart.active .chart-row .chart-cell.chart-cell-score {
	  min-width:5px;
	  max-width:5px;    margin-left: -5px;
  }
  
  /* .chart-container .chart.active  .chart-row .chart-cell.chart-cell-home:after { content:" - ";  } */
  .chart-container .chart.active .chart-row .chart-cell.chart-cell-home, .chart-container .chart.active .chart-row .chart-cell.chart-cell-away { font-size: 0.95em }
  .chart-container .chart .chart-row.chart-header .chart-cell-turn .remark {/* margin-left: 20px; */}
  .chart-container .chart .chart-row .chart-cell .chart-cell-name-short {display: inline-block;}
  
   .chart-container .chart.active .chart-row .chart-cell .chart-cell-name-short {margin:0 5px;}
  
  
  .chart-container .chart .chart-row .chart-cell .chart-cell-name-long { display: none; }
    .chart-container .chart.active .chart-row .chart-cell.chart-cell-home {width: 58px;}
	
	.chart-container .chart .chart-row .chart-cell {width:60px;}
	
	
	.chart-container .chart .chart-row.chart-header .chart-cell.chart-cell-more-btn {
		width:52px;
		font-size:0.95em;
	}
	
}
@media screen and (max-width: 420px) {
  .chart-container .chart { font-size: .9em; }
  .chart-container .chart .chart-row .chart-cell.chart-cell-match { display: none; }
  .chart-container .chart .chart-row.chart-header .chart-cell .chart-cell-more-text {padding-top: 2px;}
  .chart-container .chart .chart-row .chart-cell {width:16%;}
  .chart-container .chart .chart-row .chart-cell.chart-cell-score {width:58px;}
  
}

@media screen and (max-width: 400px) {

	.chart-container .chart .chart-row .chart-cell{width:55px;}
	.chart-container .chart .chart-row .chart-cell.chart-cell-small.chart-cell-ko {width:38px;}	
	.chart-container .chart.active .chart-row .chart-cell.chart-cell-ko {width:0;}

	
	  .bullets{margin:0 36%;}
	
}

@media screen and (max-width: 380px) {
	
	.chart-cell.chart-cell-more-btn .chart-cell-more-text{display:none;}	
	.chart-container .chart .chart-row.chart-header .chart-cell.chart-cell-more-btn {
		width: 40px;
		font-size: 1.3em;
	}
	.title .mobile {font-size:0.96em;}
}



@media screen and (max-width: 370px) {
	.chart-container .chart .chart-row .chart-cell.chart-cell-home {
		/* font-size: .95em; */
		width: calc(100% - 305px);
	}

  .chart-container .chart .chart-row .chart-cell.chart-cell-away {
	  /* font-size: .95em; */
	  width: calc(100% - 305px);
	}
  
  .chart-container .chart .chart-row.chart-header .chart-cell-turn .remark {position: absolute;left: 10%;}
  .chart-container .chart .chart-row.chart-header .chart-cell.chart-cell-more-btn {width: 38px;}
  .chart-container .chart .chart-cell-more-btn.bottom {width:38px;}
  
  .chart-container .chart .chart-row .chart-cell.chart-cell-pool {
    width: 75px;
    margin-left: 32px;
}
 
}

@media screen and (max-width: 360px) {
	.chart-container .chart .chart-row .chart-cell.chart-cell-pool {
		margin-left: 42px;
		width: 38px;
	}
	
	.chart-container .chart .chart-row .chart-cell.chart-cell-home {
		width: calc(100% - 285px);
	}
}



@media screen and (max-width: 340px) {

	.chart-container .chart .chart-row .chart-cell.chart-cell-pool { 
		margin-left:34px;
	}

  .chart-container .chart .chart-row .chart-cell.chart-cell-home {
	  /* font-size: .95em; */
	  width: 60px;
	}
  .chart-container .chart .chart-row .chart-cell.chart-cell-away {
	  /* font-size: .95em; */
	  width: 60px;
	}
   	.title .mobile {font-size:0.95em;}
  .chart-container .chart .chart-row.chart-header .chart-cell-turn .remark { margin-left: 0px}
  
  
  .chart-container .chart .chart-row.chart-header .chart-cell {line-height:29px;}
  
  	
	.chart-container .chart.active .chart-row .chart-cell.chart-cell-more{
		font-size:1.1em;
	}
}


@media screen and (max-width: 320px) {
	
	.bullets{margin:0 32%;}
	
	.chart-cell.chart-cell-more-btn .chart-cell-more-text{display:none;}
	.chart-container .chart .chart-row .chart-cell.chart-cell-pool { 
		/* padding-left:20px; */
		/* width:60px;  */
	}
	
	.chart-container .chart .chart-row .chart-cell.chart-cell-home, 
	.chart-container .chart .chart-row .chart-cell.chart-cell-score {
		margin-right:2px;
	}
	
		.chart-container .chart .chart-row .chart-cell.chart-cell-small.chart-cell-ko,
	.chart-container .chart .chart-row .chart-cell.chart-cell-pool,
	.chart-container .chart .chart-row .chart-cell.chart-cell-tries,
	.chart-container .chart .chart-row .chart-cell.chart-cell-turn	{ 
		font-size: 0.95em; 
	}
	
	  .chart-container .chart .chart-row .chart-cell.chart-cell-home {font-size: 1em;width: 48px;}
    .chart-container .chart .chart-row .chart-cell.chart-cell-small.chart-cell-score {font-size: .9em;}
  .chart-container .chart .chart-row .chart-cell.chart-cell-away {font-size: 1em;width: 48px;}
	
	
	.chart-container .chart .chart-row .chart-cell.chart-cell-score {
		width:48px;
	}
	.chart-keys .chart-key {font-size: 12px;margin-right: 4px;}
	
}




@media screen and (max-width: 306px) {
	
	.chart-container .chart .chart-row .chart-cell.chart-cell-small.chart-cell-ko,
	.chart-container .chart .chart-row .chart-cell.chart-cell-pool,
	.chart-container .chart .chart-row .chart-cell.chart-cell-tries,
	.chart-container .chart .chart-row .chart-cell.chart-cell-turn	{ 
		font-size: 0.95em; 
	}
	
	.chart-container .chart .chart-row .chart-cell.chart-cell-pool {margin-left:15px;}
	
	.title .mobile {font-size:0.9em;}
	
  .chart-container .chart .chart-row .chart-cell.chart-cell-home {font-size: 1em;width: 48px;}
    .chart-container .chart .chart-row .chart-cell.chart-cell-small.chart-cell-score {font-size: .95em;}
  .chart-container .chart .chart-row .chart-cell.chart-cell-away {font-size: 1em;width: 48px;}
}


@media screen and (max-width: 290px) {
	
	.chart-container .chart .chart-row .chart-cell.chart-cell-home,
	.chart-container .chart .chart-row .chart-cell.chart-cell-away	{width:46px;}
	.chart-container .chart .chart-row .chart-cell.chart-cell-small.chart-cell-score { min-width:52px;}
	
	  .chart-container .chart.active .chart-row .chart-cell.chart-cell-score {
	  min-width:2px;
	  max-width:2px;    margin-left: -5px;
  }
}