:root {
    
    qq--color-button-primary:   #f3f4fe;
    qq--lilac:   #f3f4fe;
    qq--primary-blue:   #8892BF;
    qq--deep-red: solid #cb213d;
    qq--dark-blue: #09213d;
}
h1, .heading--1 {
    font-family: "Lato", Geneva, Tahoma, sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 38px;
    letter-spacing: 1px;
    color: #2b3040;
}
body {
    background-color: #fff;
    background-color: #111111;
    background-color: #dedede;
    background:#cfd3e5;
    background-color: #fafafe;
    background:#e9ebf3;
    font-family: "Lato", Geneva, Tahoma, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: 0px;
    color: #2b3040;
    -webkit-text-size-adjust: 100%;
qzoom:2.5;
}
html {
    background: #eee;
    background: #ffffff;
    background-color: #fefefe;
    background-color: #dedede;
    background-color: #fafafe;
    background:#e9ebf3;
    qqqqbackground: hsl(323 21% 16%);
}
body {
    qfont: 11px Verdana, Arial, sans-serif;
    qfont: 11px calibri, Arial, sans-serif;
    color: #333;
    margin: 0px ; 
    qfont-family: "Liberation Mono",Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
    font-family:"Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
    font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    font-family: -apple-system, sytem-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-family: Calibri, "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial;
    font-family: -apple-system, sytem-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.5;
    qbackground-color: #fefefe;
    width:100%;
    qqqfont-size: 18px;
} 
#content {
    padding: 20px;
    umargin: 0px 30%; 
    display: grid;
    grid-template-columns: 100% ;
    grid-gap: 10px;
}
a, .new_leg_button {
    qmargin-top:20px;
    qwidth: 300px;
  color: #8892BF;
  padding: 5px 5px;
  ppadding: 10px;
  text-align: center;
  display: block;
  text-decoration: none;
    border: solid #efefef 1px;
    border-radius: 5px;
    border-radius: 10px;
    background: #ffffff ; 
}
.round_header a {
    pbackground: none ; 
    border: 0px;
    padding: 0px;
    pfont-size: 24px;
    color: #ffffff;
    background: #87971c;
    background: #b7c27d;
    font-weight: 500;
}
a.new_leg_button, .new_leg_button {
  color: #ffffff;
    background: #87971c ; 	
    font-weight: 400;
    
  color: #444444;
    background: #d7dfbd ; 
    box-shadow: 2px 4px 12px rgba(0,0,0,.08);
    
    background: #f9f5f1 ; 
    border: solid #cfd3e5 1px;	
    font-weight: 500;
}
a:hover, .new_leg_button:hover {
  background-color: #2980B9;
    background: #8892BF ; 
    color: #ffffff ; 
    cursor: pointer;
}
.button_row {
    display: grid;
    grid-template-columns: 20% 40% 40% ;
    qwidth: 300px;
    margin:0px;
    qgrid-gap: 10px;
}
.button_row:hover {
    background: #f3f2fd;
}
.button_row >* {
    min-width: 50px; 
    border-bottom: solid #efefef 1px;
    text-align: center;
    border-radius: 5px;
  padding: 5px 5px;
}
.new_leg_button {
    margin-top:20px;
}
.button_row >*:hover, .button_row a.selected:hover, select:hover, .buttons_cont a:hover, .buttons_cont_user a:hover {
    background-color: #8892BF;
    color: #fff ; 
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
    cursor: pointer;
}
.buttons_cont a, .buttons_cont_user a {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
}
.buttons_cont a, .buttons_cont_user a, .savedPlayerAdd .card_row {
    border-left: solid #8892BF 10px;
    border-left: solid #484742 10px;
    color: #8892BF;
    pbackground-color: #484742;
}
#newDraw {
    color: #8892BF;
}
 .multi_header a {
    background-color: #8892BF;
    color: #fff ; 
}
.multi_header a:hover { 
  color: #8892BF;
    border: solid #efefef 1px;
    background: #ffffff ; 
    cursor: pointer;
}
 .multi_header a {
    border: 1px solid #8892BF;
}
.current_game {
    margin:20px 20%;
    qwidth:400px;
}
.header_code {
    
    font-size: 10pt;
} 
qqqqqq.header_multi {
}
select {
    
    width:100%;
    font-size: 18pt;
    qqqbackground: #f3f4fe;
    border: solid 0px #8892BF ;
    qborder-bottom: solid 1px #8892BF ;
    border-radius: 5px;
    color: #8892BF;
    padding: 5px 10px ;
    font-family: -apple-system, sytem-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    qfont-size: 18pt;
}
.gametitle select.boardselect {
    background: #484742;
    color: #ffffff;
}
.gametitle select {
    font-size: 12pt;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
}
.new_leg_last_leg {
    display: grid;
    grid-template-columns: 50% 50% ;
    qgrid-gap: 10px;
}
.add_darts_last_leg {
    display: grid;
    grid-template-columns: 33% 33% 34% ;
    qgrid-gap: 10px;
}
.new_leg_last_leg >*, .add_darts_last_leg >*, .long_button >* {
    margin:10px;
}
.add_darts_last_leg >* {
    margin:5px;
} 
.add_darts_last_leg {
    margin:5px;
} 
.multi_header {
    background-color: #8892BF;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 70% 30% ;
    background-color: #8892BF;
    color: #fff ; 
}
.multi_header >* {
    
  padding: 5px 5px;
}
.margintop {
    margin-top:20px;
}
.marginbottom {
    margin-bottom:20px;
}
.last_element {
    margin-top:10px;
    qborder: solid 1px #8892BF ;
    qborder: solid 1px #efefef ;
    border: solid 1px #dedede ;
    border: solid 1px #eeeeee ;
    border-bottom: solid 0px #8892BF ;
    qbox-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
}
.leg_header {
    font-weight:400;
}
.curr_leg_header, .col7auto >* >*:first-child , .col6auto >* >*:first-child { 
    text-align: center ; 
    padding: 10px;
    background: #f3f4fe;
    color: #8892BF;
    font-weight:400;
}
.game_legs {
    display: none; 
}
.multi_game {
    margin-bottom:20px;
}
.greenVersion {
    background-color: #88BF92;
}
.last_row {
    pborder: solid 1px #dedede ;
    padding: 10px 0px;
}
.last_row select{
    padding: 10px 10px;
}
.last_row .button_row {
    border: solid 0px #dedede ;
    ppadding: 10px 0px;
}
.buttons_cont, .buttons_cont_user {
    
    qpadding: 20px;
    umargin: 0px 30%; 
    display: grid;
    grid-template-columns: 25% 25% 25% 25% ;
    qgrid-gap: 10px;
}
.buttons_cont_user {
    grid-template-columns: 50% 50% ;
}
.players_page_cont {
    display: grid;
    grid-template-columns: 50% 50% ;
}
.games_page_cont {
    display: grid;
    grid-template-columns: 100% ;
}
.games_cont {
    border: solid 1px #dedede ;
    display: grid;
    grid-template-columns: 100% ;
    margin: 10px 10px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
    background-color: #fff;
}
.games_butt_cont {
    display: grid;
    grid-template-columns: 16% 16% 16% 16% 16% 16% ;
}
.games_butt_cont a, .games_butt_cont .new_leg_button {
    margin-left: 20px ; 
    margin-top: 0px ; 
}
.game_header {
    display: grid;
    grid-template-columns: 50% 15% 35% ;
    font-weight: 400 ; 
}
.games_cont >* {
    border: solid 1px #dedede ;
    padding: 10px 10px;
}
.games_cont >*:nth-child(even), .winner_cont {
}
.games_cont >*:first-child, .winner_cont {
    border-right: solid 0px #dedede ;
    background-color: #8892BF;
    background-color: #484742;
    color: #fff ; 
    text-align: center;
}
.winner_cont {
    margin-top:10px;
}
.game_header >*:first-child, .drawTitle {
    font-weight: bold ; 
  text-align: left;
}
.games_cont >*:nth-child(even) >*:first-child, .winner_cont >*:first-child {
    pborder-bottom: solid 1px #dedede ;
    ptext-transform: uppercase; 
}
.games_cont >*:nth-child(even) {
    border-left: solid 0px #dedede ;
}
.games_cont a {
}
.players_in_draw {
    display: grid;
    grid-template-columns: 50% 50% ;
    grid-template-columns: 33% 33% 33% ;
    grid-template-columns: 25% 25% 25% 25% ;
    pborder: solid 1px #dedede ;
    padding: 10px 10px;
    background-color: #fff;
    qbackground:#88BF92;
    pcolor:#8892BF;
}
.players_in_draw >* {
    border-right: solid 1px #ecedf5 ;
    border-right: solid 1px #d4d5e7 ;
}
.players_in_draw .playerDiv {
    border-bottom: solid 1px #ecedf5 ;
    border-bottom: solid 1px #d4d5e7 ;
    padding: 0px 5px;
}
.players_in_draw .pairsDiv {
    display: grid;
    grid-template-columns: 45% 10% 45% ;
    grid-template-columns: 100% ;
}
.players_in_draw .pairs2Div, .players_in_draw .pairs4Div {
    display: grid; 
    qqgrid-template-columns: 50% auto ;
}
.players_in_draw .pairs3Div {
    display: grid; 
    qqgrid-template-columns: auto auto auto ;
    grid-template-columns: 100% ;
    qqfont-size: 75%; 
}
.players_in_draw .pairs4Div {
    font-size: 75%; 
}
.ppppplayers_in_draw .playerDiv .player {
    display: grid;
    grid-template-columns: 50% 50% ;
}
.players_in_draw .playerDiv .player >*:first-child {
    text-align: right;
    padding-right: 5px;
}
.players_in_draw .playerDiv .player >*:last-child {
    text-align: left;
    padding-left: 5px;
}
.pppppplayers_in_draw span {
    font-weight: bold ; 
    font-weight: 400 ; 
}
.newrowspan {
  white-space: pre;
}
.arrayContainer {
    qmargin:10px;
    float:left;
    clear:left;
    qborder:solid 1px red;
    padding: 0px 2px;
  margin-bottom: 10px;
}
.arrayHeader {
    qmargin:0px 10px;
    float:left;
    clear:left;
    qborder:solid 1px green;
    background-color:#f0f0ff;
    min-width: 100px;
}
.arrayBody {
    qmargin:0px 10px;
    float:left;
    qclear:left;
    qborder:solid 1px blue;
  display: grid;
  grid-template-columns: auto auto;
}
.arrayName {
    float:left;
    clear:left;
    width: 100%;
    background-color:#f0fff0;
}
.addPlayer:hover {
    background-color:#f0f0ff;
}
.savedPlayerList {
    
    display: grid;
    grid-template-columns: 50% 50% ;
    grid-template-columns: 100% ;
}
.savedPlayerAdd {
    display: grid;
    grid-template-columns: 50% 50% ;
    grid-template-columns: 33% 33% 33% ;
    padding: 10px 20px;
} 
.savedPlayerList input.radio {
    display: none ; 
}
.savedPlayerList input + label, .savedPlayerList div {
  margin: 0px 20px;
    border:solid 1px #f0f0ff;
    text-align: center ; 
    padding: 10px 20px;
  margin-left: 0px;
  z-index: 2;
}
.savedPlayerAdd div {
    border:solid 0px #f0f0ff;
}
.savedPlayerAdd div:first-child {
    padding: 0px;
}
.savedPlayerList input:checked + label, .savedPlayerList input:checked + label.used_player {
    background:#88BF92;
    color:#fff;
}
.savedPlayerList input:checked + label div:last-child, .savedPlayerList input:checked + label.used_player div:last-child {
    qqqbackground:#88BF92;
    color:#111111;
}
.savedPlayerList label:hover, 
.savedPlayerList label.used_player:hover, 
.savedPlayerList div.card_row:hover, 
.gamePlayerList div:hover, 
.pair_div .game_player:hover,
.pair_divk .used_player:hover,
.gameplayer_goto a:hover,
.col6auto >* >*:last-child >*:hover,
.col7auto >* >*:last-child >*:hover  {
    background:#8892BF;
    color:#fff;
    cursor: pointer;
}
.pair_div .game_player:hover span.score { 
    color:#8892BF;
}
.game_details .pair_div .game_player:hover  {
    background:#fff;
    color:#333333;
    cursor:default;
}
.game_details .pair_div .game_player {
    border-radius: 0px;
}
.game_details .pair_div .gametitle_div {
    background-color: #484742;
    color: #fff;
}
.gameplayer_goto .game_player:hover {
    background:#8892BF;
    color:#fff;
    cursor: pointer;
}
.gameplayer_div {
    display: grid;
    grid-template-columns: 70% 30% ;
}
.gameplayer_goto {
    display: grid;
    grid-template-columns: 100% ;
}
.gameplayer_goto a, .col6auto .won {
    background-color: #759ef9;
    background-color: #c1d3fc;
    background-color: #d7dfbd;	
    color: #fff;
    color:#333333;
    padding-top:25px;
    font-weight: 400;
}
.gameplayer_goto a span {
}
.gameplayer_goto .game_player {
    vertical-align: middle;
}
.savedPlayerAdd div:hover { 
}
.gamePlayerList div { 
    ycontent: "place here" ; 
    padding: 10px 20px;
}
.savedPlayerList #newPlayer, .savedPlayerList #newDraw, .savedPlayerList #editPlayer {
    border:solid 1px #f0f0f0;
    border:solid 1px #8892BF;
    background:#fff;
    padding: 10px 20px;
    width:90%;
    font-size: 24px;
} 
.savedPlayerList #editPlayer { 
    font-size: 18px;
    padding: 15px;
    font-weight: 300;
    font-weight: normal;
} 
.game_row {
    display: grid;
    grid-template-columns: 50% 50% ;
    border:solid 1px #e1e4ef;
    margin: 10px;
    border-radius: 10px ; 
    background:#fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
} 
.card_row, .savedPlayerList input + label, .playerNumbers >*, .pair_div .game_player, .marker  {
    border:solid 1px #e1e4ef;
    border-radius: 10px ; 
    margin: 10px 10px 0px;
    background:#fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
    pfont-size: 24px;
} 
.gamePlayerList div.card_player {
    display: grid;
    grid-template-columns: 20% 80% ;
    padding: 0px;
} 
.gamePlayerList div.card_player div:first-child {
    text-align: center ; 
    border-right:solid 1px #f0f0f0;
    border-right:solid 1px #e1e4ef;
    background:#e4e1ef;
    font-weight: bold ; 
    color:#8892BF;
} 
.gamePlayerList div.card_player:hover div:first-child {
    color:#8892BF;
}
.playerNumbers {
  margin: 10px 20%;
    display: grid;
    grid-template-columns: 33% 33% 34% ;
    grid-template-columns: 25% 25% 25% 25% ;
}
.playerNumbers >* {
  margin: 0px 20px;
    border:solid 1px #f0f0ff;
    text-align: center ; 
    padding: 10px 0px;
    margin: 10px 5px;
    qborder-left: solid #8892BF 10px;
}
.playerNumbers >*:hover, .pair_div .gamedelete:hover {
    background:#8892BF;
    color:#fff;
    cursor: pointer;
} 
.playerNumbers .playerSelected {
    background:#8892BF;
    color:#fff;
    qborder-left: solid #ffffff 10px;
}
.marker  { 
    box-shadow: none;
} 
.game_player {
    display: grid;
    grid-template-columns: 100% ;
}
.card_page_cont {
    display: grid;
    grid-template-columns: 100% ;
}
.card_page_cont .playing_now {
    display: grid;
    grid-template-columns: 45% 10% 45% ;
}
.card_page_cont .playing_now >* {
    margin:10px;
}
.card_page_cont .next_game {
    display: grid;
    grid-template-columns: 50% 50% ;
} 
.playing_now_card >* {
    margin:10px;
} 
.pair_cont {
    ppadding: 10px;
    margin: 0px;
    display: grid;
    grid-template-columns: 100% ;
    border-top: solid #dbdeec 1px;
    border-top: solid #c5c8df 1px;
} 
.pair_cont span.legs, .pair_cont span.legs_browser {
    position: absolute ; 
    top:-10px;
    top:-2px;
    right:10px;
} 
.pair_cont span.legs_browser {
    top:0px;
} 
.pair_div { 
    padding: 10px;
    margin:auto 0px;
    display: grid;
    grid-template-columns: 100% ;
    position: relative ; 
    line-height: 1;
}
.pair_div .game_player, .pair_verses, .marker {
    margin:0px;
    padding: 10px 10px;
    padding: 5px;
    text-align: center ; 
    vertical-align: middle;
  pwhite-space: nowrap;
  min-width: 80% ; 
  pwidth: fit-content;
    pblock-size: fit-content;
    pfont-weight: 500 ; 
    font-size: 20px;
    font-size: 14px;
    pborder-left:solid 10px #ffffff;
    position: relative ; 
}
.pair_div .game_player span.score {
    position: absolute ; 
    right: 0;
    padding: 5px ;
    padding: 4px 10px;
    font-weight: 500 ; 
    border:solid 1px #ffffff;
    border-top-right-radius: 10px ; 
    border-bottom-right-radius: 10px ; 
    background-color:#f0f0ff;
    min-width: 30px;
}
.pair_div .game_player span .last, .players_in_draw .last { 
    font-weight: 400 ; 
  display: inline; 
  width: auto;
}
.pair_div  .pair_verses, .playing_now  .pair_verses {
    padding: 0px;
}
.pair_verses_cont {
    display: grid;
    grid-template-columns: 100% ;
}
.pair_div .gamedelete {
    padding: 5px ;
    padding: 7px 5px;
    text-align: center ; 
    background-color:#f0f0ff;
    border:solid 1px #e1e4ef;
    border-radius: 10px ; 
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
}
.players_page_cont >* {
    padding: 10px 20px;
}
.pair_div .gamedelete {
}
.gametitle {
    font-size: 14px;
    padding: 5px ;
    padding-top: 0px ;
    font-weight: 400 ; 
    position: relative ; 
}
.gametitle_div {
    display: grid;
    grid-template-columns: 50% 50% ; 
}
.pair_cont .gametitle_div { 
    padding: 10px 0px ;
}
.pair_div .gametitle_div select {
    padding: 5px  ;
}
.game_player {
    font-size: 24px;
}
.savedPlayerList input + label.used_player, .gamePlayerList .used_player, .pair_div .used_player  {
    background-color:#fafafe;
    background-color:#f0f0ff;
    pcolor:#8892BF;
    ybox-shadow: none;
}
.pair_div .used_player {
    display: grid;
    grid-template-columns: auto 5% ;
}
.roundcont .used_player, .draw_header .used_player  {
    background-color:#b6c487;
    background-color:#d7dfbd;
    pcolor:#ffffff;
    pborder-left:solid 10px #87971c;
}
.roundcont .used_board, .draw_header .used_board  {
    background-color:#f0f0ff;
    background-color:#484742;
    color:#ffffff;
    line-height: 1;
    font-size: 13px;
}
.draw_header .used_player  {
    color:#333333;
    font-weight: 400 ; 
    border:0px;
}
.draw_header .used_player:hover  {
    color:#ffffff;
    background-color:#8892BF;
}
.savedPlayerList input + label.used_player, .savedPlayerList input + label  {
    display: grid;
    grid-template-columns: 15% 85% ;
    padding: 0px;
}
.savedPlayerList input + label div {
    border:0px;
}
.savedPlayerList input + label div:last-child {
    background-color:#ffffff;
    text-align: left ; 
}
.savedPlayerList input + label.used_player div:last-child, .savedPlayerList input + label div:last-child {
    pcolor:#8892BF;
}
.savedPlayerList input + label:hover div:last-child {
    color:#8892BF;
}
.removeplayerdiv {
    display: none;
}
.removeplayerdivshow {
    display:inline-block;
}
.savedPlayerList .used_player:hover, .gamePlayerList .used_player:hover, .savedPlayerList .used_player {
    color:#111111;
}
.marker_header {
    padding: 0px;
}
.marker_header .game_player {
    display: grid;
    grid-template-columns: 20% 80% ;
    padding: 0px;
}
.marker_header .game_player div {
    padding: 10px 20px;
}
.marker_header .game_player div:first-child {
    background-color:#f0f0ff;
}
.marker_header .game_player div:last-child {
    text-align: left ; 
}
.wins_cont {
    
    margin: 10px 30%;
    margin: 5px 5px;
    grid-template-columns: 20% 60% 20% ;
}
.wins_div >*:first-child, .win_cont >*:last-child {
    background:#8892BF;
    color:#fff;
    font-weight: 500 ; 
    text-transform: uppercase ; 
}
.win_cont {
    font-size: 24px;
    display: grid;
    grid-template-columns: 60% 10% 10% 20% ;
    opadding: 10px 20px;
    margin: 5px 5px;
    text-align: center ; 
    border:solid 1px #e1e4ef;
    border-radius: 10px ; 
    background:#fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
}
.win_cont >* {
    ppadding: 10px 20px;
}
.win_cont >*:first-child {
    border-bottom-left-radius: 10px ; 
    border-top-left-radius: 10px ; 
}
.win_cont >*:last-child {
    border-bottom-right-radius: 10px ; 
    border-top-right-radius: 10px ; 
}
.versesdivc {
    border: solid 1px #e1e4ef;
    border-radius: 10px;
    margin: 10px 10px 0px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%), 0 5px 26px 0 rgb(67 94 131 / 15%);
}
.gamePlayerList .versesdiv {
    qbackground: #fff;
    text-align: center ; 
    margin: -24px 79% -24px 10px;
    font-size: 24px;
    z-index: -1;
    z-index: 2 ; 
    position:relative;
    padding: 0px;
}
.gamePlayerList .versesdiv:hover {
    background: none;
    color: #333;
}
.card_row {
    z-index: 1 ; 
}
.rounddraw2 {
    display: grid;
    grid-template-columns: 100% ;
    min-width: 300px ; 
}
.rounddraw4 {
    display: grid;
    grid-template-columns: 50% 50% ;
    min-width: 600px ; 
}
.rounddraw8 {
    display: grid;
    grid-template-columns: 33% 33% 33% ;
    min-width: 900px ; 
}
.rounddraw16 {
    display: grid;
    grid-template-columns: 25% 25% 25% 25% ;
    grid-gap: 0px;
    min-width: 1200px ; 
}
.rounddraw32 {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20% ;
    min-width: 1500px ; 
}
.rounddraw64 {
    display: grid;
    grid-template-columns: 16% 16% 16% 16% 16% 16% ;
    min-width: 1800px ; 
}
.rounddraw128 {
    display: grid;
    grid-template-columns: 14.2% 14.2% 14.2% 14.2% 14.2% 14.2% 14.2%  ;
    min-width: 1800px ; 
}
.rounddraw128 {
    display: grid;
    grid-template-columns: 14.2% 14.2% 14.2% 14.2% 14.2% 14.2% 14.2%  ;
    min-width: 1800px ; 
}
.rounddraw256 {
    display: grid;
    grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%  ;
    min-width: 1800px ; 
}
.rounddraw512 {
    display: grid;
    grid-template-columns: 11% 11% 11% 11% 11% 11% 11% 11% 11%  ;
    min-width: 1800px ; 
}
.rounddraw1024 {
    display: grid;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%  ;
    min-width: 2400px ; 
}
.rounddraw2048 {
    display: grid;
    grid-template-columns: 9% 9% 9% 9% 9% 9% 9% 9% 9% 9% 9%  ;
    min-width: 3200px ; 
}
.rounddraw64 .roundcont, .rounddraw128 .roundcont, .rounddraw256 .roundcont {
    min-width: 200px ; 
}
.rounddraw512 .roundcont, .rounddraw256 .roundcont {
    min-width: 150px ; 
}
.rounddraw1024 .roundcont, .rounddraw2048 .roundcont {
    min-width: 120px ; 
}
.roundcont {
    border-right: solid #dbdeec 1px;
    border-right: solid #c5c8df 1px;
    margin: 5px 5px;
    margin: 0px;
    min-width: 300px ; 
    display: grid;
    grid-template-columns: 100% ;
}
.footer div {
    font-size: 14px;
    line-height: 1;
}
.arrayContainer {
    font-size: 14px;
    line-height: 1;
}
.winner_half_cont div {
    font-size: 28px;
}
.draw_header {
    display: grid;
    grid-template-columns: 30% 20% 50% ;
}
.draw_header a.selected {
    pbackground:#8892BF;
    pcolor:#fff;
    border-left:solid 10px #8892BF;
}
.pair_div .pair, .pair_div .triple {
    font-size: 14px;
    display: grid;
    grid-template-columns: 50% 50% ;
    grid-template-columns: 45% 10% 45% ;
    grid-template-columns: auto 10% auto 5% ;
}
.pair_div .triple { 
    grid-template-columns: 30% 5% 30% 5% 30% ;
    grid-template-columns: auto 5% auto 5% auto ;
    grid-template-columns: auto 5% auto 5% auto 5% ;
}
.pair_div .edit_pair {
    padding: 5px 20px;
}
.tofront {
    z-index: 2;
}
.twoCols {
    display: grid;
    grid-template-columns: 50% 50% ;
}
.twoCols6633 {
    display: grid;
    grid-template-columns: 66% 33% ;
}
.threeCols502525 {
    display: grid;
    grid-template-columns: 50% 25% 25% ;
}
.boardNumber {
    padding: 5px 20px;
}
  .quartersections0 {
    display: grid;
    grid-template-columns: 0% ;
  }
  .quartersections3 {
    display: grid;
    grid-template-columns: 33% 33% 33% ;
  }
  .quartersections7 {
    display: grid;
    grid-template-columns: 14% 14% 14% 14% 14% 14% 14% ;
  } 
  .columnHeightCss1 .pair_cont {
      height: 150px ; 
  }
  .columnHeightCss2 .pair_cont {
      height: 300px ; 
      border-bottom: 0px;
  }
  .columnHeightCss3 .pair_cont {
      height: 600px ; 
      border-bottom: 0px;
  }
  .columnHeightCss4 .pair_cont {
      height: 1200px ; 
      border-bottom: 0px;
  }
  .columnHeightCss5 .pair_cont {
      height: 2400px ; 
      border-bottom: 0px;
  }
  .columnHeightCss6 .pair_cont {
      height: 4800px ; 
      border-bottom: 0px;
  }
  .columnHeightCss7 .pair_cont {
      height: 9600px ; 
      border-bottom: 0px;
  }
  .columnHeightCss8 .pair_cont {
      height: 19200px ; 
  }
  .games_cont .card_row {
      
    color:#8892BF;
  }
  .games_cont .card_row:hover {
    background:#8892BF;
    color:#ffffff;
    cursor: pointer;
  } 
  .round_header {
    background: #d7dfbd;
    padding: 5px;
    font-weight: 400;
    display: grid;
    grid-template-columns: 50% 50% ;
    grid-template-columns: 100% ;
    text-align: center;
  } 
  .round_limit {
    background: none;
    padding: 0px 5px;
  }
  .round_limit a {
      
    border-radius: 20px;
    pborder-top-left-radius: 0px;
    pborder-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .zoom {
    transition: transform .2s; 
  }
  .zoom:hover {
    transform: scale(1.1) ; 
  }
  .hide {
    display: none ; 
    grid-template-columns: 100% ;
    background: #f3f4fe;
    margin: 10px ;
  }
  .hide div {
    margin: 10px 10px 0px ;
  }
  .hide div:last-child {
    margin-bottom: 10px ;
  } 
  .split_even {
    grid-template-columns: 50% 50% ;
  }
  .split_even div {
    margin-bottom: 10px ;
  }
  .margin10 {
    margin: 10px 10px ;
  } 
  .margin10 div {
    margin: 0px ;
  }
  .padding10 {
    padding: 10px;
  }
  .padding5 {
    padding: 5px;
  }
  .decide_cont {
      background: #ffffff ; 
    margin-top: 10px ;
    padding: 20px 10px;
  }
  .savedPlayerList .remove_insert, .savedPlayerList .edit_insert {
    margin: 0px ;
      border: 0px;
    display: grid;
    grid-template-columns: 50% 50% ;
  }
  .savedPlayerList .edit_insert { 
    grid-template-columns: 70% 30% ;
  }
  .remove_insert div, .edit_insert div {
    margin: 0px ;
    border: 0px;
  } 
  .side_details {
      position: relative;
    position:fixed;
      right:0px;
      top:0px;
      width:300px;
    z-index: 1;
  } 
  .side_details .pair_div .game_player {
    padding: 5px 5px;
  }
  .side_details .gameplayer_goto a {
    padding-top: 5px;
  }
  .playerDiv .player { 
    display: grid;
    grid-template-columns: 50% 50% ;
  }
  .players_in_draw .playerDiv .player span {
      width:50%;
      pborder: 1px solid red;
  }
  .playerDiv .player:first-child span { 
      text-align: right;
  }
  .col7auto, .col6auto {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto ;
    text-align: center;
  }
  .col6auto { 
    grid-template-columns: auto auto auto auto auto auto ; 
  }
  .col7auto >* >*:last-child >*, .col6auto >* >*:last-child >* {
    font-weight: 400;
    padding: 10px;
    margin: 5px 10px ;
  }
  .info-box .header {
    font-size: 11px;
    line-height: 11px;
    margin-bottom: 9px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 33px;
    text-transform: none;
    font-weight: 400;
    font-family: "Roboto Mono", monospace;   
  }
  .info-box .uhuhuhuhu { 
    border-radius: 8px;
    box-shadow: 2px 4px 12px rgba(0,0,0,.08);
    }
.game_list_cont {
    position: relative;
    transition: all .3s cubic-bezier(0,0,.5,1);
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px; 
    border-radius: 8px;
    box-shadow: 2px 4px 12px rgba(0,0,0,.08);
      background: #ffffff ; 
}
    .game_list_row {
        display: grid;
        grid-template-columns: auto 20% 20% 20% 20% ;
    text-align: center ; 
    }
    .game_list_row_header {
        font-size: 11px;
        line-height: 11px;
        font-weight: 400;
        font-family: "Roboto Mono", monospace;   
    }
    .game_list_row_title {
        display: grid;
        grid-template-columns: auto 20% 20% ;
    text-align: center ; 
    }
    .game_list_row_end {
    margin-bottom: 40px;
    margin-bottom: 20px;
    }
    .game_list_cont .game_list_cell { 
        padding: 5px 5px;
    }
    .game_list_cont .game_list_header { 
        font-weight: 400;
    }
    .game_list_row .new_leg_button { 
        margin: 0px ; 
    } 
  @media only screen
    and (min-device-width : 120px)
    and (max-device-width : 680px){ 
    body {
        zoom: 2;
    } 
    #content {
        margin: 0px;
        display: block;
    }
    #content:before {
        qcontent: "jjj" ; 
    }
    .current_game {
        width:auto;
        margin:20px 0px 100px;
    }
    .hide div {
      margin: 5px 5px 0px ;
    }
    .pair_div .game_player { 
        font-size: 20px;
    }
    .columnHeightCss1 .pair_cont {
        height: 200px ; 
    }
    .columnHeightCss2 .pair_cont {
        height: 400px ; 
        border-bottom: 0px;
    }
    .columnHeightCss3 .pair_cont {
        height: 800px ; 
        border-bottom: 0px;
    }
    .columnHeightCss4 .pair_cont {
        height: 1600px ; 
        border-bottom: 0px;
    }
    .columnHeightCss5 .pair_cont {
        height: 3200px ; 
        border-bottom: 0px;
    }
    .columnHeightCss6 .pair_cont {
        height: 6400px ; 
        border-bottom: 0px;
    }
    .columnHeightCss7 .pair_cont {
        height: 12800px ; 
        border-bottom: 0px;
    }
    .columnHeightCss8 .pair_cont {
        height: 25600px ; 
    }
    .players_in_draw {
        display: grid;
        grid-template-columns: 33% 33% 33% ;
        grid-template-columns: 50% 50% ;
    }
  }