/* view list */

		.bracket-cell {
			min-width:200px;
			position:relative;
		}
		.bracket-info {
			position: absolute;
			background: #eee;
			width: calc( 100% - 40px );
			padding: 10px;
			border: 1px solid #ccc;
			z-index: 1;
			display:none;/**/
		}
		.bracket-cell a.pull-right { opacity:0; transition: opacity .3s; }
		.bracket-cell:hover a.pull-right,
		.bracket-cell a.pull-right:focus { opacity:1; }


/* view bracket */

	#direction { display:none; }

	aside { background-color:whitesmoke; }
	aside.sticky-side.pull-right {
		position: sticky;
		right: 0;
		border-left: 1px solid lightgray;
		bottom: 0;
		overflow-y: auto;
		display:none;
	}


	.stages {
			position:sticky;
			height:2.5rem;
			top:-1.1rem;
			background:white;
			z-index:20;
			/*border:1px dotted blue;*/
		}
		.stage {
			border:1px solid #ccc;
			position:absolute;
			line-height:1.5rem;
			height:1.5rem;
			width:170px;
			top:5px;
			background:antiquewhite;
			text-align:center;
		}


	.draw{ position:absolute; color:blue; border:1px dotted blue; z-index:1; }
	.draw0{ border-color:transparent; }
	.draw1{ border-color:transparent; border-top:1px solid #aaa; }
	.draw2{ border-color:transparent; border-top:1px solid #aaa; border-bottom:1px solid #aaa; }
	.draw3{ border-color:transparent; border-right:1px solid #aaa; }
		.draw21,.draw22{ border-color:transparent; border-right:1px solid #aaa; }
	.draw4{ margin-left:200px; border-color:transparent; border-left:1px solid #aaa; }
		.draw23,.draw24{ margin-left:200px; border-color:transparent; border-left:1px solid #aaa; }
	.draw5{ border:1px solid #aaa; }

	.match { position:absolute; height:5.5rem; width:170px;  z-index:5; /*border:1px dotted red;*/ }
		.match i {display:block; font-size:80%; line-height:1rem; }
		.match mark {display:inline-block; font-size:80%; padding:0 5px; line-height:1rem; background:transparent; }
		.match mark.mark-G {color:#fff; background:forestgreen; }
		.match mark.mark-B {color:#fff; background:darkblue; }
		.match mark.mark-R {color:#fff; background:darkred; }
		.match mark.mark-D {color:#fff; background:#444; }
		/*.*/
		.match table{ background-color:#fff; }
		.match[state=none]  table{ background-color:#f0f0f0; }
		.match[state=wait]  table{ background-color:khaki; }
		.match[state=ready] table{ background-color:lightgreen; }
		.match[state=run]   table{ background-color:lightpink; }
		.match[state=done]  table{ background-color:#fff; background-color:var(--bg-main); }

		.match[state=none]  table .comeIn:empty,
		.match[state=wait]  table .comeIn:empty { background-color:lightpink; }

@media print {
	.match table{ background-color:transparent !important; }
	.match table td{ background-color:transparent !important; }
}

		.match.focused  { border:2px solid red; margin:-3px 0 0 -3px; } 

		.match .pa, .match .pb,
		.match .sa, .match .sb {
			border:1px solid #aaa;
			padding:0 3px;
			overflow:hidden;
			text-overflow:ellipsis;
			position:relative; 
		}
		.match .pa, .match .pb { 
			width:135px;
			max-width:135px;
			height:1.5rem;
		}

		.match .sa, .match .sb {
			max-width:30px;
			width:30px !important;
			text-align:center;
		}
			.match td input{
				position:absolute;
				z-index:51;
				left:0; top:0; bottom:0;
				max-width:100%;
				border:none;
				background:transparent;
				font-size:inherit;
				/*padding:0;*/
			}
			.match .pa input:focus,
			.match .pb input:focus{
				text-align:left;
				/*background:lightgreen;*/
				border:1px solid lightgreen;
			}
			.match .sa input:focus,
			.match .sb input:focus{
				text-align:center;
				/*background:skyblue;*/
				border:1px solid blue;
			}

			.match .pa div, 
			.match .pb div { display:flex; flex-wrap:nowrap; justify-content: space-between; }
				.match .pa div .name, 
				.match .pb div .name { overflow: hidden; text-overflow: ellipsis; }
				.match .pa div .country, 
				.match .pb div .country { float:right; margin-left:5px; }


		.match ins{ 
			position:absolute; 
			width:25px; 
			height:1.5rem; 
			line-height:1.5rem; 
			left:-30px; 
			text-align:right; 
			font-size:75%; 
			font-style:italic; 
		 }
		 .match ins.waf{ top:1.3rem; }
		 .match ins.wbf{ top:2.85rem; }

		.match table:before,
		.match table:after{
			content:'';
			border-bottom:1px solid #aaa;
			top:2.5rem;
			margin-top:3px;
			position:absolute;
		}
		.match table:before{
			width:20px;
			left:-20px;
		}
		.match table:after{
			width:10px;
			right:-10px;
		}
		.match.x1 table:before,
		.match.stageF table:after{
			display:none;
		}