/* Generic grids, follows the same baseline, only columns change*/
.grid						{ display: grid; grid-template-rows: auto; grid-auto-flow: row; max-width: 1000px; width: 100%; }
#colgrid 					{ display: grid; grid-template-columns: auto; grid-auto-flow: column; }

.egrid.usrpg				{ grid-template-columns: auto 300px; grid-gap: 10px; margin-top: 20px }
.egrid.wp2					{ grid-template-columns: minmax(min-content, max-content) auto; grid-column-gap: 10px }
.egrid.w2					{ grid-template-columns: 1fr 1fr; align-items: start; grid-gap: 5px }
.egrid.w8					{ grid-template-columns: auto repeat(7, minmax(min-content, max-content)); }
.egrid.wpmain				{ grid-template-columns: auto repeat(7, minmax(min-content, max-content)); }
.egrid.wpuser				{ grid-template-columns: auto repeat(13, minmax(min-content, max-content)); }
.egrid.optew				{ grid-template-columns: auto repeat(14, minmax(min-content, max-content)); }
.egrid.wpmap				{ grid-template-columns: auto repeat(10, minmax(min-content, max-content)); }
.egrid.mcsgo				{ grid-template-columns: minmax(min-content, max-content) auto repeat(9, minmax(min-content, max-content)); }
.egrid.mspl					{ grid-template-columns: 220px auto; grid-column-gap: 10px; grid-row-gap: 15px }
.egrid.mtopg				{ grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(min-content, max-content)); }
.egrid.mgrid				{ grid-template-columns: auto repeat(9, minmax(min-content, max-content)); }
.egrid.wplead				{ grid-template-columns: minmax(min-content, max-content) auto minmax(min-content, 100px); }
.egrid.pubgmhead			{ grid-template-columns: 120px auto; align-items: start; grid-gap: 2px }
.egrid.optr					{ grid-template-columns: auto minmax(min-content, 130px); }
.egrid.opt					{ grid-template-columns: minmax(min-content, 130px) auto;  }
.egrid.opts					{ grid-template-columns: minmax(min-content, 130px) auto minmax(min-content, max-content); }
.egrid.optmsch				{ grid-template-columns: repeat(3, minmax(min-content, max-content)) auto repeat(2, minmax(min-content, max-content));  }
.egrid.evlmatch				{ grid-template-columns: repeat(3, minmax(min-content, max-content)) auto minmax(min-content, max-content) auto minmax(min-content, max-content); }
.egrid.create				{ grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 80px); max-width: 1000px; grid-gap: 10px }
.egrid.tls					{ grid-template-columns: minmax(min-content, max-content) auto; grid-gap: 1px; margin-top: 10px }
.egrid.gmsel				{ grid-template-columns: minmax(min-content, max-content) auto; grid-gap: 2px 4px; }
.egrid.srs					{ grid-template-columns: 1fr 1fr; grid-column-gap: 10px; }
.egrid.srstour				{ grid-template-columns: auto repeat(2, minmax(min-content, max-content)); }
.egrid.gmsett				{ grid-template-rows: repeat(2, minmax(min-content, max-content)); grid-template-columns: 1fr; } 
.egrid.optul				{ grid-template-columns: repeat(2, minmax(min-content, max-content)) auto minmax(min-content, max-content) auto minmax(min-content, max-content); }
.egrid.optvumod				{ grid-template-columns: minmax(min-content, max-content) auto repeat(2, minmax(min-content, max-content)); }
.egrid.optslb				{ grid-template-columns: repeat(2, minmax(min-content, auto)); }
.egrid.optpndg				{ grid-template-columns: repeat(2, minmax(min-content, max-content)) auto}
.egrid.optmgrp				{ grid-template-columns: repeat(4, minmax(min-content, max-content)) auto}
.egrid.optmgrpmp			{ grid-template-columns: minmax(min-content, max-content) auto }
.egrid.optmtchmgmt			{ grid-template-columns: repeat(2, minmax(min-content, max-content)) auto repeat(3, minmax(min-content, max-content)) }
.egrid.optmtchss			{ grid-template-columns: minmax(min-content, max-content) auto }
.egrid.optlog				{ grid-template-columns: 1fr; grid-row-gap: 6px }
.egrid.opttsignup			{ grid-template-columns: repeat(3, 1fr); grid-gap: 10px }
.egrid.opttsgselc			{ grid-template-columns: 35px repeat(3, auto) 100px; }
.egrid.teenmod				{ grid-template-columns: 40px auto repeat(2, minmax(min-content, max-content)); }
.egrid.avp					{ grid-template-columns: repeat(4, 1fr); grid-gap: 6px }
.egrid.veto					{ grid-template-columns: repeat(7, minmax(min-content, 1fr)); }

/* split grid in three, center as auto */
.gridcap					{ grid-gap: 2px }
.gridcap5					{ grid-gap: 5px }
.gridcap10					{ grid-gap: 10px }
.cap15						{ grid-column-gap: 15px }
.gridcap15					{ grid-gap: 15px }
.grid3_c					{ grid-template-columns: 120px minmax(200px, auto) minmax(120px, 220px); }
.grid2_c					{ grid-template-columns: repeat(2, minmax(45%, 50%)); grid-gap: 0; }
.gridmscore					{ grid-template-columns: 100px minmax(100px, auto) 180px; }
.gridbg						{ padding: 5px; }
.grid.split					{ grid-template-columns: minmax(min-content, max-content) auto; grid-row-gap: 5px; align-items: start }

.grid2						{ grid-template-columns: repeat(2, minmax(45%, 50%)); }
.grid3						{ grid-template-columns: repeat(3, minmax(1px, 1fr)); }
.grid4						{ grid-template-columns: repeat(4, 25%); }
.grouplist					{ grid-template-columns: auto repeat(7, max-content); }
.grid6						{ grid-template-columns: repeat(6, minmax(min-content, 1fr)); }
.grid10						{ grid-template-columns: repeat(10, minmax(50px, auto)); }
.optgsg						{ grid-template-columns: minmax(200px, max-content) repeat(2, minmax(100px, max-content)) repeat(5, minmax(min-content, max-content));  }
.optgsg10					{ grid-template-columns: minmax(min-content, max-content) minmax(200px, max-content) repeat(2, minmax(100px, max-content)) repeat(6, minmax(min-content, max-content));  }
.grid7						{ grid-template-columns: repeat(7, minmax(20px, 1fr)); }
.grid9						{ grid-template-columns: 50px 120px minmax(150px, 1fr) 70px repeat(3, minmax(20px, 80px)) 100px 100px; }
.grid11						{ grid-template-columns: 50px 70px minmax(150px, 1fr) 50px repeat(3, minmax(20px, 80px)) repeat(4, minmax(20px, 1fr)); }

.maincol9					{ grid-column: auto / span 9 }
.maincol2					{ grid-column: auto / span 2;}
.maincol3					{ grid-column: auto / span 3; }
.maincol4					{ grid-column: auto / span 4; }
.maincol5					{ grid-column: auto / span 5; max-width: 100%; }
.maincol6					{ grid-column: auto / span 6; max-width: 100%; }
.maincol7					{ grid-column: auto / span 7; }
.maincol11					{ grid-column: auto / span 11; }
.maincol10					{ grid-column: auto / span 10; }
.maincol8					{ grid-column: auto / span 8; padding: 0 15px 0 15px; max-width: 100%; }

.mainrow2					{ grid-row: auto / span 2; }
.mainrow3					{ grid-row: auto / span 3; }

/* Main body template */
.usett						{ display: inline-block; margin: 5px 10px 0 10px; width: 100px; }
.usplit						{ min-height: 100%; width: 100%; display: grid; grid-gap: 0px; grid-template-rows: auto; grid-auto-flow: row; grid-template-columns: minmax(100px, auto) 0; }
.ucontent					{ grid-column: 1 / 2; } 
.ucpanel					{ grid-column: 2 / 2; z-index: 2; overflow-x: hidden !important; overflow-y: auto; }

/* Few internal datastyles for stuff that are constantly used*/
.pad						{ padding: 0 5px 0 0; }
.grow						{ padding: 3px; }
.uppad						{ padding-top: 15px; }
.upmargin					{ margin-top: 15px; }
.botmargin					{ margin-bottom: 15px; }
.rowpad						{ margin: 3px; padding: 5px; }
.downpad					{ padding-bottom: 15px; }
.rowline					{ margin: 5px 0 5px 0; padding: 5px 5px 5px 0; overflow: auto; height: 100%;}
.rowspace					{ padding: 15px 10px 10px 10px; width: 100%; }

.wd100						{ width: 100%; grid-column: auto / span 2 }
.wd100n						{ width: 100%; }

/* chatgrids */
.chat_rlist					{ grid-template-columns: 50px 120px auto minmax(min-content, max-content); overflow: hidden }
.crcombtn input				{ width: 100%; }
.chat2						{ grid-template-columns: auto minmax(min-content, max-content); }
.csendmobile				{ opacity: 0; display: none }
.critem						{ grid-column: auto / span 1; }
.crcombined					{ display: none; grid-column: auto / span 3; }

.fullsplit					{ display: grid; grid-template-rows: auto; grid-auto-flow: row; grid-template-columns: 1fr 1fr; padding: 0; width: 100%;  }
.selftop					{ align-self: start; }
.boxgrid					{ grid-template-columns: 300px auto; grid-gap: 10px }
.grid.tournament			{ grid-template-columns: 1fr }
.optmgmt					{ grid-template-columns: 135px auto }
.gridlogon					{ grid-template-columns: repeat(2, minmax(auto, 1fr)); grid-gap: 0 }
.gridlogon .rmid			{ padding: 0; height: 100px; width: 100px }
.gridlog					{ grid-template-columns: 1fr 1fr; grid-gap: 10px !important }
.stgrid						{ grid-template-columns: repeat(4, 25%); }
.egrid.stmaps				{ grid-template-columns: repeat(6, minmax(min-content, 1fr)); grid-gap: 0 }
.fpad						{ grid-template-columns: repeat(5, 85px) auto;grid-column-gap: 3px }

.stcol4						{ grid-column: auto / span 4; }
.stcol6						{ grid-column: auto / span 6; }
.preg						{ grid-template-columns: minmax(min-content, 120px) auto; align-items: stretch; width: 100%; grid-gap: 3px }
.grid.preg .mwc.fmids		{ align-items: stretch }
.egrid.ostat				{ grid-template-columns: 1fr 1fr; width: 100%; grid-column-gap: 10px }
.sloga						{ font-size: 13px; width: 100%; padding: 10px; grid-template-columns: repeat(5, minmax(min-content, 1fr)); grid-gap: 10px; align-items: center; justify-content: start; }
.adm_groupstage				{ grid-template-columns: repeat(2, minmax(max-content, 1fr)); grid-gap: 15px }