.preview-breadcrumb { padding:10px; background: #fff; border-bottom: 1px solid #ececec;}
.preview { padding:15px; background: #fff; margin-bottom: 15px; }
.preview-head { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items:center; align-items: center; }
.preview-head__center { text-align: center; }
.preview-head__team { text-align: center; font-size: 16px; font-weight: bold; }
.preview-head__team__logo { height: 100px; padding-bottom: 10px; }
.preview-head__team__wdl { font-size: 14px; color: grey; font-weight: 600; }

.preview__title { font-size: 16px; font-weight: bold; padding-bottom: 15px; justify-content: start; }
.preview__content { overflow: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
.preview__content::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }
.preview__content__title { text-align: center; font-size: 14px; font-weight: bold; }
.preview__content__vs-title { font-size: 14px; font-weight: bold; display: grid; grid-template-columns: 1fr 50px 1fr; grid-auto-flow: column; justify-items: center;}

.preview__filter-btns { display:flex; justify-content: center; padding: 10px 0px; margin-bottom: 15px; }
.preview__filter-btn { padding:10px; border:none; background: #dcdcdc; border-radius: 5px; font-size: 13px; color: #3c3c3c; cursor: pointer; margin-right: 10px; }
.preview__filter-btn:hover { background: #0aa6ec; color: #fafafa; font-weight: bold; }
.preview__filter-btn.active { background: #0aa6ec; color: #fafafa; font-weight: bold; }

.preview__no-content { padding: 30px 15px; text-align: center; color: grey; }

.preview__head-box { display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; white-space: nowrap; }

.preview-row { display: grid; grid-auto-flow: column;  grid-column-gap: 20px; grid-template-columns: 1fr 1fr;}
.preview__select { margin-bottom: 10px; border:0px; width: auto; justify-self:end; font-size: 15px; font-weight: bold; }

.stat__row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr 40px 80px 40px 1fr; justify-content: center; background: #ececec; text-align: center; margin: 10px; }
.stat__col-center { min-width: 80px; text-align: center; background: white; font-size: 13px; color: #3c3c3c;}
.stat__col-white { background: white; }
.stat__col-left { justify-self:right; }
.stat__col-right { justify-self:left; }
.stat__col-num { background: white; }
.win-color { background: crimson; }
.grey-color { background: grey; }
.grey-font-color { color: grey; }
.black-color { background: #3e3e3e; }
.team__logo-small { width: 25px; margin: 0px 10px; }
.padding__bottom_15 { padding-bottom: 15px; }
.data__explain { text-align: center; color: grey; padding: 10px; }

table { table-layout: auto; width: 100%; margin-bottom: 0!important; border-collapse: collapse; white-space: nowrap; line-height: 15px; font-size: 13px; }
table th,td { padding: 8px 2px; text-align: center; white-space: nowrap; min-width: 30px; height: 40px; border: none; }
td { border-bottom: 1px solid #ececec; }
.table__row { align-items: center; border-bottom: 1px solid #ececec; height: 38px; }
.table__head { background: #ececec; }
.table__col { text-overflow: ellipsis; max-width: 80px; white-space: nowrap; overflow: hidden; padding: 10px 0px; }
.table__league_col { width: 100px; }

.no-wrap { white-space: nowrap; }
.small_font { font-size: 11px; 
	text-overflow: ellipsis;
    max-width: 80px;
    overflow: hidden;}
.min_width_80 { min-width: 80px }
.min_width_50 { min-width: 50px }
.min_width_60 { min-width: 60px }
.min_width_180 { min-width: 60px }
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }
.result-W { background: crimson; padding: 3px 5px; border-radius: 10px; color: white; }
.result-D { background: grey; padding: 3px 5px; border-radius: 10px; color: white; }
.result-L { background: #3e3e3e; padding: 3px 5px; border-radius: 10px; color: white; }

.record .table__row { grid-template-columns: 80px 80px 1fr 50px 50px; }
.versus-record .table__row { grid-template-columns: 80px 80px 1fr 50px 1fr; }
.versus-record .team-name { color: gray;}
.versus-record .win-team { font-weight: bold; color:black; }


.table__row--selected { background: #212020; color: white; }

.h2h-graph { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 120px 35px; padding: 15px; justify-items: center; align-items: end;}
.h2h-graph__bar { min-height: 20px; min-width: 100px; background: #0aa6ec; text-align: center; padding: 5px; color: white; }
.h2h-graph__bar-draw { min-height: 20px; min-width: 100px; background: grey; text-align: center; padding: 5px; color: white; }

.lineup__area { display: grid; grid-auto-flow: dense; color: white; background: #333; padding: 45px 15px; grid-gap: 25px; margin-bottom: 15px;}
.lineup__col { display: grid; grid-auto-flow: column; grid-template-columns: auto; justify-content: space-around;grid-gap: 5px;}
.lineup__row { display: grid; justify-items:center; grid-gap: 5px; }
.lineup__row__number { height: 30px; width: 30px; background: #5f5f5f; border-radius: 50%; line-height: 30px; text-align: center; }
.lineup__row__name { max-width: 120px; text-align: center; }
.lineup__formation { text-align: center; font-size: 14px; font-weight: bold; padding-bottom: 15px; }

@media (max-width: 1200px) {
	.preview-row { display: block }
}
@media (max-width: 768px) {
	.mobile-display-none { display: none }
}