.pf-group-column-setup {
    overflow-x:scroll;
}
.pf-group-column-setup table {
    border-collapse:collapse;
}
.pf-group-column-setup table input[type=text] {
    width:80px !important;
}
.pf-group-column-setup table input[type=text].col-format {
    width:70px !important;
}
.pf-group-column-setup table select {
    width:100px;
}
.pf-group-column-setup table select.col-dir {
    width:75px;
}
.pf-group-column-setup table select.col-visibility {
    width:60px !important;
}
.pf-group-column-setup table input[type=number] {
    width:50px;
}
.pf-group-column-setup .button_small {
    margin-top:10px;
}
.pf-group-column-setup th {
    text-align:left;
}


.pf-group-highlight-setup table {
    border-collapse:collapse;
}
.pf-group-highlight-setup table input[type=number] {
    width:50px;
}
.pf-group-highlight-setup .hl-style option[value=style1] {
    background-color:var(--group-hl-color1);
}
.pf-group-highlight-setup .hl-style option[value=style2] {
    background-color:var(--group-hl-color2);
}
.pf-group-highlight-setup .hl-style option[value=style3] {
    background-color:var(--group-hl-color3);
}
.pf-group-highlight-setup .hl-style option[value=style4] {
    background-color:var(--group-hl-color4);
}
.pf-group-highlight-setup .hl-style option[value=style5] {
    background-color:var(--group-hl-color5);
}
.pf-group-highlight-setup th {
    text-align:left;
}
.pf-group-highlight-setup .button_small {
    margin-top:10px;
}
.pf-group-highlight-setup select {
    width:90px !important;
}



.pf-group-stage-head {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    margin-bottom:6px;
    margin-right:2px;
    font-size:14px;
    font-weight:bold;
    margin-left:2px;
    font-family: "Roboto",Arial,Sans-Serif;
}
.pf-group-stage-head > div:not(:first-child) {
    margin-left:10px;
}
.pf-group-stage-head a:not(:first-child) {
    margin-left:10px;
}
.pf-group-stage-title {
}
.pf-group-name {
    font-weight:bold;
    font-size:13px;
}
.pf-group-edit-options {
    margin-bottom:20px;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:flex-start;
}
.pf-group-edit-options .option {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:flex-start;
    margin-right:20px;
}
.pf-group-edit-options .add_count {
    width:92px;
    margin-right:4px;
}

.pf-group-stage-cont {
    margin-left:2px;
    font-family: "Roboto",Arial,Sans-Serif;
}
.pf-group-stage {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
}
.pf-group-outer-cont {
    margin-right:20px;
    margin-bottom:20px;
    max-width: 100%;
}
.pf-group-cont {
    overflow-x: scroll;
    overflow-y: hidden;
    border-radius:3px;
    font-size: 13px;
}
.pf-group {
    min-width:280px;
    border-collapse: collapse;
}
.pf-group-head {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    margin-bottom:4px;
}
.pf-group-head input {
    width:120px;
    margin-right:4px;
}
.pf-group-head select {
    width:120px;
}
.pf-group-head .rm-btn {
    margin-left:6px;
}

.pf-group .rm-btn {
    margin-left:10px;
}
.pf-group-entries {

}
.pf-group-entry {
    position:relative;
    height:35px;
    --group-hl-color: var(--group-hl-color0);
    --group-hl-bg-color: var(--group-hl-bg-color0);
}
.pf-group-entry.pf-group-style1 {
    --group-hl-color: var(--group-hl-color1);
    --group-hl-bg-color: var(--group-hl-bg-color1);
}
.pf-group-entry.pf-group-style2 {
    --group-hl-color: var(--group-hl-color2);
    --group-hl-bg-color: var(--group-hl-bg-color2);
}
.pf-group-entry.pf-group-style3 {
    --group-hl-color: var(--group-hl-color3);
    --group-hl-bg-color: var(--group-hl-bg-color3);
}
.pf-group-entry.pf-group-style4 {
    --group-hl-color: var(--group-hl-color4);
    --group-hl-bg-color: var(--group-hl-bg-color4);
}
.pf-group-entry.pf-group-style5 {
    --group-hl-color: var(--group-hl-color5);
    --group-hl-bg-color: var(--group-hl-bg-color5);
}
.pf-group-entry:after {
    content: "";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background-color:var(--group-hl-color);
}
.pf-group-pos {
    display: inline-block;
    font-weight: bold;
    font-size: 11px;
    line-height: 11px;
    padding: 4px 0;
    border-radius:3px;
    width:18px;
    text-align:center;
}
.pf-group.finished .pf-group-pos {
    background-color:var(--group-hl-color);
}
.pf-group.finished td.pf-group-col-pos,
.pf-group.finished td.pf-group-col-name {
    background-color:var(--group-hl-bg-color);
}
.pf-group-entry-edit:hover {
    cursor:pointer;
}
.pf-group-entry-name {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
}
.pf-group-entry-name .s_flag {
    margin-right:4px;
}
.pf-group-entry.dropout .pf-group-entry-name .name {
    text-decoration: line-through;
}
.pf-group-col-head {
    font-weight: 700;
    font-size: 11px;
    height:20px;
}
.pf-group-col-head th {
    padding:0 6px;
    white-space:nowrap;
}
.pf-group-entry td {
    padding:0 10px;
    white-space:nowrap;
}
.pf-group-entry td:first-child,
.pf-group-col-head th:first-child {
    padding-left:10px;
}
.pf-group-entry td:last-child,
.pf-group-col-head th:last-child {
    padding-right:10px;
}
.pf-group-col-pos {
    text-align:center;
}
.pf-group-col-name {
    text-align: left;
}
.pf-group-col-name .name {
    max-width:120px;
    text-overflow:ellipsis;
    overflow:hidden;
}
.pf-group-col-custom {
    text-align:center;
}
.pf-group-outer-cont .add_row {
    margin-top:4px;
}
.pf-group-outer-cont .add_row .button_small {
    min-width:20px;
}



.pf-group-entry-edit-modal {
    white-space:nowrap;
}
.pf-group-entry-edit-modal label {
    margin-right:10px;
    min-width:80px;
}
.pf-group-entry-edit-modal .row {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    margin-bottom:4px;
}
.pf-group-entry-edit-modal input[type=number] {
    width:100px;
}
.pf-group-entry-edit-modal input[type=text] {
    width:100px;
}



.pf-group-match-list-cont {
    margin-top:6px;
}
.pf-group-match-list-header {
    font-size:13px;
    font-weight:bold;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    margin-bottom:4px;
}
.pf-group-matches-toggle {
    margin-left:10px;
    font-size:9px;
    line-height:18px;
    border:1px solid #555;
    border-radius:6px;
    padding:0px 4px;
    display:inline-block;
}
.pf-group-matches-toggle i {
    margin-right:2px;
}
.pf-group-match-list-round {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:flex-start;
    overflow-x:scroll;
}
.pf-group-match-list-round .button_plain {
    min-width:20px;
    margin-left:6px;
}
.pf-group-match-list-round > .pf-group-match-list:not(:first-child) {
    margin-left:10px;
}
.pf-group-match-list {
    font-size:13px;
}
.pf-group-matchlist-edit-head {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
}
.pf-group-matchlist-edit-head input {
    min-width:200px;
    width:100%;
    height:20px;
    font-size:11px;
}
.pf-group-match-list .pf-group-head-row { 
    font-weight: 700;
    font-size: 11px;
    height: 16px;
    line-height: 16px;
}
.pf-group-match-list .pf-group-head-row .pf-group-cell:first-child { 
    min-width:200px;
    text-align:center;
}
.pf-group-match {
    height:24px;
    position:relative;
}
.pf-group-match .ent {
    position:relative;
}
.pf-group-match .ent.entity_hl:before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}
.pf-group-match .ent.winner {
    font-weight:bold;
    background-color:rgba(0, 255, 0, 0.1);
}
.pf-group-match .ent_1 {
    text-align:right;
}
.pf-group-match .score {
    position:relative;
    min-width:30px;
    text-align:center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pf-group-match .score.winner {
    font-weight:bold;
}
.pf-group-match .score1 {
    border-right:1px solid rgba(130,130,130,0.1);
}
.pf-group-match .score2 { 
    border-left:1px solid rgba(130,130,130,0.1);
}
.pf-group-match-linked {
    position: absolute;
    right: -6.5px;
    top: 6px;
    height: 8px;
    width: 8px;
    font-size: 6px;
    display: flex;
    justify-content: center;
    align-items:center;
    background-color: #1c1c1c;
    color:#fff;
    border-radius: 50%;
    padding: 2px;
    opacity: 0.5;
}
.pf-group-match-linked.edit {
    color: #bd8f21;
    top: 6px;
    right:-7px;
    height: 8px;
    width: 10px;
    font-size: 8px;
    border-radius: 4px;
}
.pf-group-match-name {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items: center;
    padding:0 10px;
    height:24px;
    position:relative;
}
.pf-group-match .ent_1 .pf-group-match-name {
    justify-content:flex-end;
}
.pf-group-match .ent_1 .pf-group-match-name .s_flag {
    margin-left:4px;
}
.pf-group-match .ent_2 .pf-group-match-name .s_flag {
    margin-right:4px;
}
.pf-group-match-name .name {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    width:80px;
}
.pf-group-match-name .name.tbd {
    width:100px;
}
.pf-group-match-edit:hover {
    cursor:pointer;
}
.pf-group-table {
    display: grid;
    grid-template-columns: [opponent] 4fr [score] minmax(30px,1fr) [score] minmax(30px,1fr) [opponent] 4fr;
    width:300px;
}
.pf-group-table.edit {
    grid-template-columns: [opponent] 4fr [score] minmax(30px,1fr) [score] minmax(30px,1fr) [opponent] 4fr [edit] 24px;
    width:324px;
}
.pf-group-table.edit .pf-group-head-row {
    margin-bottom:10px;
}
.pf-group-head-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
}
.pf-group-cell.colspan-4 {
    grid-column: span 4;
}
.pf-group-row {
    display:grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
}
.pf-group-stage .button_small {
    height:24px;
    line-height:24px;
}
.pf-group-match-list .add_row {
    margin-bottom:10px;
}


.pf-group-match-edit-modal {
    white-space:nowrap;
}
.pf-group-match-edit-modal label {
    margin-right:10px;
}
.pf-group-match-edit-modal > div {
    margin-bottom:10px;
}
.pf-group-match-edit-modal .row {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
}
.pf-group-match-edit-modal .score {
    width:100px;
    margin-left:10px;
}
.pf-group-match-edit-modal .suggestions {
    margin-left:30px;
    margin-top:6px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    max-width:400px;
}
.pf-group-match-edit-modal .suggestions.suggested_match {
    flex-direction:column;
    flex-wrap:nowrap;
}
.pf-group-match-edit-modal .suggestion {
    display:inline-flex;
    justify-content:flex-start;
    align-items:center;
    margin-right:16px;
}
.pf-group-match-edit-modal .suggestion.group-match {
    width:100%;
}
.pf-group-match-edit-modal .suggestion:hover {
    cursor:pointer;
}
.pf-group-match-edit-modal .suggestion span {
    margin-right:4px;
}
.pf-group-match-edit-modal .suggestion .i {
    
}
.pf-group-match-edit-modal .link_match_option span {
}


@media screen and (max-width: 470px) {
    .pf-group-entry-edit-modal .row,
    .pf-group-match-edit-modal .row {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .pf-group-entry-edit-modal .row >*,
    .pf-group-match-edit-modal .row >* {
        margin-bottom:4px;
    }
    .pf-group-match-edit-modal .score {
        margin-left:0;
    }
    .pf-group-match-edit-modal .suggestions {
        margin-left:0;
        margin-top:2px;
    }
    .pf-group-entry-edit-modal .button_small,
    .pf-group-match-edit-modal .button_small {
        margin-left:0 !important;
    }
}