/* Shared presentation for the retained page groups. Board dimensions remain explicit. */
.cp-page table {
    font-size: 10px;
    text-align: left;
}
.cp-page img {
    vertical-align: middle;
}
.cp-center {
    text-align: center;
}
.cp-table-center,
.cp-center > table,
.cp-page .cp-text-align-center > table,
.cp-center > form > table,
.cp-page .cp-text-align-center > form > table {
    margin-inline: auto;
}
.cp-page .cp-text-align-right > table {
    margin-left: auto;
}
.cp-page td:has(> img:only-child) {
    line-height: 0;
}
.cp-page td > img:only-child {
    vertical-align: bottom;
}
.cp-nowrap {
    white-space: nowrap;
}
.cp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.cp-page :focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}
.cp-page .cp-background-color-000000,
body.cp-page.cp-background-color-000000 {
    background-color: #000000;
}
.cp-page .cp-background-color-0000c0,
body.cp-page.cp-background-color-0000c0 {
    background-color: #0000c0;
}
.cp-page .cp-background-color-333333,
body.cp-page.cp-background-color-333333 {
    background-color: #333333;
}
.cp-page .cp-background-color-555555,
body.cp-page.cp-background-color-555555 {
    background-color: #555555;
}
.cp-page .cp-background-color-8fd98f,
body.cp-page.cp-background-color-8fd98f {
    background-color: #8fd98f;
}
.cp-page .cp-background-color-cccccc,
body.cp-page.cp-background-color-cccccc {
    background-color: #cccccc;
}
.cp-page .cp-background-color-d0d0ff,
body.cp-page.cp-background-color-d0d0ff {
    background-color: #d0d0ff;
}
.cp-page .cp-background-color-d94f4f,
body.cp-page.cp-background-color-d94f4f {
    background-color: #d94f4f;
}
.cp-page .cp-background-color-dddddd,
body.cp-page.cp-background-color-dddddd {
    background-color: #dddddd;
}
.cp-page .cp-background-color-ddddff,
body.cp-page.cp-background-color-ddddff {
    background-color: #ddddff;
}
.cp-page .cp-background-color-ded652,
body.cp-page.cp-background-color-ded652 {
    background-color: #ded652;
}
.cp-page .cp-background-color-dfdff9,
body.cp-page.cp-background-color-dfdff9 {
    background-color: #dfdff9;
}
.cp-page .cp-background-color-eeeeee,
body.cp-page.cp-background-color-eeeeee {
    background-color: #eeeeee;
}
.cp-page .cp-background-color-f8f8f8,
body.cp-page.cp-background-color-f8f8f8 {
    background-color: #f8f8f8;
}
.cp-page .cp-background-color-ff0000,
body.cp-page.cp-background-color-ff0000 {
    background-color: #ff0000;
}
.cp-page .cp-background-color-ffff00,
body.cp-page.cp-background-color-ffff00 {
    background-color: #ffff00;
}
.cp-page .cp-background-color-ffffff,
body.cp-page.cp-background-color-ffffff {
    background-color: #ffffff;
}
.cp-page .cp-border-0,
body.cp-page.cp-border-0 {
    border: 0;
}
.cp-page .cp-border-spacing-0px,
body.cp-page.cp-border-spacing-0px {
    border-spacing: 0px;
}
.cp-page .cp-border-spacing-1px,
body.cp-page.cp-border-spacing-1px {
    border-spacing: 1px;
}
.cp-page .cp-border-spacing-2px,
body.cp-page.cp-border-spacing-2px {
    border-spacing: 2px;
}
.cp-page .cp-border-spacing-4px,
body.cp-page.cp-border-spacing-4px {
    border-spacing: 4px;
}
.cp-page .cp-cell-padding-0 > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    padding: 0px;
}
.cp-page .cp-cell-padding-10 > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    padding: 10px;
}
.cp-page .cp-cell-padding-2 > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    padding: 2px;
}
.cp-page .cp-cell-padding-3 > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    padding: 3px;
}
.cp-page .cp-cell-padding-4 > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    padding: 4px;
}
.cp-page .cp-cell-padding-6 > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    padding: 6px;
}
.cp-page .cp-cell-padding-8 > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    padding: 8px;
}
.cp-page .cp-color-000000,
body.cp-page.cp-color-000000 {
    color: #000000;
}
.cp-page .cp-color-0000c0,
body.cp-page.cp-color-0000c0 {
    color: #0000c0;
}
.cp-page .cp-color-0000ff,
body.cp-page.cp-color-0000ff {
    color: #0000ff;
}
.cp-page .cp-color-006600,
body.cp-page.cp-color-006600 {
    color: #006600;
}
.cp-page .cp-color-008000,
body.cp-page.cp-color-008000 {
    color: #008000;
}
.cp-page .cp-color-606000,
body.cp-page.cp-color-606000 {
    color: #606000;
}
.cp-page .cp-color-666666,
body.cp-page.cp-color-666666 {
    color: #666666;
}
.cp-page .cp-color-900000,
body.cp-page.cp-color-900000 {
    color: #900000;
}
.cp-page .cp-color-988e1a,
body.cp-page.cp-color-988e1a {
    color: #988e1a;
}
.cp-page .cp-color-990099,
body.cp-page.cp-color-990099 {
    color: #990099;
}
.cp-page .cp-color-a0a0ff,
body.cp-page.cp-color-a0a0ff {
    color: #a0a0ff;
}
.cp-page .cp-color-c1ec3e,
body.cp-page.cp-color-c1ec3e {
    color: #c1ec3e;
}
.cp-page .cp-color-eeeeee,
body.cp-page.cp-color-eeeeee {
    color: #eeeeee;
}
.cp-page .cp-color-ff0000,
body.cp-page.cp-color-ff0000 {
    color: #ff0000;
}
.cp-page .cp-color-ffff00,
body.cp-page.cp-color-ffff00 {
    color: #ffff00;
}
.cp-page .cp-color-ffffff,
body.cp-page.cp-color-ffffff {
    color: #ffffff;
}
.cp-page .cp-color-red,
body.cp-page.cp-color-red {
    color: red;
}
.cp-page .cp-font-family-courier-new-courier-mono,
body.cp-page.cp-font-family-courier-new-courier-mono {
    font-family:
        Courier New,
        Courier,
        mono;
}
.cp-page .cp-font-family-verdana-arial-helvetica-sans-serif,
body.cp-page.cp-font-family-verdana-arial-helvetica-sans-serif {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.cp-page .cp-font-size-10px,
body.cp-page.cp-font-size-10px {
    font-size: 10px;
}
.cp-page .cp-font-size-13px,
body.cp-page.cp-font-size-13px {
    font-size: 13px;
}
.cp-page .cp-font-size-16px,
body.cp-page.cp-font-size-16px {
    font-size: 16px;
}
.cp-page .cp-font-size-18px,
body.cp-page.cp-font-size-18px {
    font-size: 18px;
}
.cp-page .cp-height-100,
body.cp-page.cp-height-100 {
    height: 100%;
}
.cp-page .cp-height-10px,
body.cp-page.cp-height-10px {
    height: 10px;
}
.cp-page .cp-height-12px,
body.cp-page.cp-height-12px {
    height: 12px;
}
.cp-page .cp-height-14px,
body.cp-page.cp-height-14px {
    height: 14px;
}
.cp-page .cp-height-16px,
body.cp-page.cp-height-16px {
    height: 16px;
}
.cp-page .cp-height-18px,
body.cp-page.cp-height-18px {
    height: 18px;
}
.cp-page .cp-height-191px,
body.cp-page.cp-height-191px {
    height: 191px;
}
.cp-page .cp-height-1px,
body.cp-page.cp-height-1px {
    height: 1px;
}
.cp-page .cp-height-20px,
body.cp-page.cp-height-20px {
    height: 20px;
}
.cp-page .cp-height-24px,
body.cp-page.cp-height-24px {
    height: 24px;
}
.cp-page .cp-height-26px,
body.cp-page.cp-height-26px {
    height: 26px;
}
.cp-page .cp-height-2px,
body.cp-page.cp-height-2px {
    height: 2px;
}
.cp-page .cp-height-30px,
body.cp-page.cp-height-30px {
    height: 30px;
}
.cp-page .cp-height-40px,
body.cp-page.cp-height-40px {
    height: 40px;
}
.cp-page .cp-height-46px,
body.cp-page.cp-height-46px {
    height: 46px;
}
.cp-page .cp-height-4px,
body.cp-page.cp-height-4px {
    height: 4px;
}
.cp-page .cp-height-5px,
body.cp-page.cp-height-5px {
    height: 5px;
}
.cp-page .cp-height-600px,
body.cp-page.cp-height-600px {
    height: 600px;
}
.cp-page .cp-height-6px,
body.cp-page.cp-height-6px {
    height: 6px;
}
.cp-page .cp-height-8px,
body.cp-page.cp-height-8px {
    height: 8px;
}
.cp-page .cp-height-auto,
body.cp-page.cp-height-auto {
    height: auto;
}
.cp-page .cp-text-align-center,
body.cp-page.cp-text-align-center {
    text-align: center;
}
.cp-page .cp-text-align-left,
body.cp-page.cp-text-align-left {
    text-align: left;
}
.cp-page .cp-text-align-right,
body.cp-page.cp-text-align-right {
    text-align: right;
}
.cp-page .cp-vertical-align-middle,
body.cp-page.cp-vertical-align-middle {
    vertical-align: middle;
}
.cp-page .cp-vertical-align-top,
body.cp-page.cp-vertical-align-top {
    vertical-align: top;
}
.cp-page .cp-width-100,
body.cp-page.cp-width-100 {
    width: 100%;
}
.cp-page .cp-width-100px,
body.cp-page.cp-width-100px {
    width: 100px;
}
.cp-page .cp-width-10px,
body.cp-page.cp-width-10px {
    width: 10px;
}
.cp-page .cp-width-15,
body.cp-page.cp-width-15 {
    width: 15%;
}
.cp-page .cp-width-150px,
body.cp-page.cp-width-150px {
    width: 150px;
}
.cp-page .cp-width-160px,
body.cp-page.cp-width-160px {
    width: 160px;
}
.cp-page .cp-width-180px,
body.cp-page.cp-width-180px {
    width: 180px;
}
.cp-page .cp-width-18px,
body.cp-page.cp-width-18px {
    width: 18px;
}
.cp-page .cp-width-1px,
body.cp-page.cp-width-1px {
    width: 1px;
}
.cp-page .cp-width-20,
body.cp-page.cp-width-20 {
    width: 20%;
}
.cp-page .cp-width-200px,
body.cp-page.cp-width-200px {
    width: 200px;
}
.cp-page .cp-width-20px,
body.cp-page.cp-width-20px {
    width: 20px;
}
.cp-page .cp-width-238px,
body.cp-page.cp-width-238px {
    width: 238px;
}
.cp-page .cp-width-240px,
body.cp-page.cp-width-240px {
    width: 240px;
}
.cp-page .cp-width-24px,
body.cp-page.cp-width-24px {
    width: 24px;
}
.cp-page .cp-width-25px,
body.cp-page.cp-width-25px {
    width: 25px;
}
.cp-page .cp-width-30,
body.cp-page.cp-width-30 {
    width: 30%;
}
.cp-page .cp-width-320px,
body.cp-page.cp-width-320px {
    width: 320px;
}
.cp-page .cp-width-34,
body.cp-page.cp-width-34 {
    width: 34%;
}
.cp-page .cp-width-360px,
body.cp-page.cp-width-360px {
    width: 360px;
}
.cp-page .cp-width-40,
body.cp-page.cp-width-40 {
    width: 40%;
}
.cp-page .cp-width-400px,
body.cp-page.cp-width-400px {
    width: 400px;
}
.cp-page .cp-width-40px,
body.cp-page.cp-width-40px {
    width: 40px;
}
.cp-page .cp-width-420px,
body.cp-page.cp-width-420px {
    width: 420px;
}
.cp-page .cp-width-440px,
body.cp-page.cp-width-440px {
    width: 440px;
}
.cp-page .cp-width-45,
body.cp-page.cp-width-45 {
    width: 45%;
}
.cp-page .cp-width-460px,
body.cp-page.cp-width-460px {
    width: 460px;
}
.cp-page .cp-width-46px,
body.cp-page.cp-width-46px {
    width: 46px;
}
.cp-page .cp-width-50,
body.cp-page.cp-width-50 {
    width: 50%;
}
.cp-page .cp-width-500px,
body.cp-page.cp-width-500px {
    width: 500px;
}
.cp-page .cp-width-55,
body.cp-page.cp-width-55 {
    width: 55%;
}
.cp-page .cp-width-60,
body.cp-page.cp-width-60 {
    width: 60%;
}
.cp-page .cp-width-600px,
body.cp-page.cp-width-600px {
    width: 600px;
}
.cp-page .cp-width-64,
body.cp-page.cp-width-64 {
    width: 64%;
}
.cp-page .cp-width-65,
body.cp-page.cp-width-65 {
    width: 65%;
}
.cp-page .cp-width-70,
body.cp-page.cp-width-70 {
    width: 70%;
}
.cp-page .cp-width-70px,
body.cp-page.cp-width-70px {
    width: 70px;
}
.cp-page .cp-width-80px,
body.cp-page.cp-width-80px {
    width: 80px;
}
.cp-page .cp-width-90,
body.cp-page.cp-width-90 {
    width: 90%;
}
.cp-page .cp-width-auto,
body.cp-page.cp-width-auto {
    width: auto;
}
.cp-page .cp-font-size-1,
body.cp-page.cp-font-size-1 {
    font-size: 10px;
}
.cp-page .cp-font-size-2,
body.cp-page.cp-font-size-2 {
    font-size: 13px;
}
.cp-page .cp-font-size-3,
body.cp-page.cp-font-size-3 {
    font-size: 16px;
}
.cp-page .cp-font-size-4,
body.cp-page.cp-font-size-4 {
    font-size: 18px;
}
.cp-page .cp-font-size-5,
body.cp-page.cp-font-size-5 {
    font-size: 24px;
}
.cp-page .cp-font-size-6,
body.cp-page.cp-font-size-6 {
    font-size: 32px;
}
.cp-page .cp-font-size-7,
body.cp-page.cp-font-size-7 {
    font-size: 48px;
}

.cp-page .site-shell {
    width: 99%;
    margin: 12px auto 0;
    font-size: 16px;
}
.cp-page .site-shell > main {
    min-height: 600px;
}
.cp-page .site-columns {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 180px;
    gap: 8px;
    margin-block: 10px;
    align-items: start;
}
.cp-page .site-columns > aside > table {
    margin-bottom: 10px;
}
.cp-page .site-columns > section {
    min-width: 0;
    overflow-x: auto;
    position: relative;
}
.cp-page .help-menu {
    font:
        10px Verdana,
        sans-serif;
    padding: 2px;
}
.cp-page .help-menu-row {
    display: flex;
    min-height: 18px;
    align-items: center;
    white-space: nowrap;
}
.cp-page .help-menu-row button {
    border: 0;
    padding: 0;
    background: transparent;
    display: inline-flex;
    cursor: pointer;
}
.cp-page .help-menu-row img {
    width: 18px;
    height: 18px;
}
.cp-page .help-menu-row a {
    padding-inline: 3px;
    color: #000000;
}
.cp-page .help-menu-row a[aria-current='page'] {
    background: #316ac5;
    color: #ffffff;
}
.cp-page .help-shell {
    height: 100vh;
    display: grid;
    grid-template: 26px minmax(0, 1fr) / 178px minmax(0, 1fr);
}
body.cp-page:has(> .help-shell) {
    margin: 0;
}
.cp-page .help-shell > header {
    grid-column: 1 / -1;
    background: #0000c0;
    color: #ffffff;
    font:
        bold 16px Verdana,
        sans-serif;
}
.cp-page .help-shell iframe {
    border: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
}
@media (max-width: 1023px) {
    .cp-page .site-columns {
        grid-template-columns: 180px minmax(0, 1fr);
    }
    .cp-page .site-columns > aside:last-child {
        grid-column: 1 / -1;
    }
}

.cp-page .site-game-columns {
    grid-template-columns: 180px minmax(0, 1fr);
}
.cp-page .game-players {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
    border: 1px solid #000000;
}
.cp-page .game-player {
    min-width: 0;
}
.cp-page .game-player-white {
    background: #f8f8f8;
    color: #000000;
}
.cp-page .game-player-black {
    background: #333333;
    color: #ffffff;
}
.cp-page .game-player-heading {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border-bottom: 2px solid currentColor;
    font-size: 18px;
    white-space: nowrap;
}
.cp-page .game-player-heading > table {
    width: auto;
    flex: 0 0 auto;
}
.cp-page .game-player-name {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
.cp-page .game-player-white .game-player-name {
    margin-left: auto;
}
.cp-page .game-player-black .game-player-timer {
    margin-left: auto;
}
.cp-page .game-player-black a {
    color: #ffffff;
}
.cp-page .message-sender {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.cp-page .message-sender > table {
    margin: 0;
}
.cp-page .message-list .message-text {
    padding: 6px;
}
.cp-page .message-text,
.cp-page .cp-break-long-text {
    overflow-wrap: anywhere;
}
.cp-page .player-message-panel {
    border: 1px solid #000000;
    padding-block: 6px;
}

.cp-page .profile-personal {
    padding: 4px;
    border-bottom: 1px solid #000000;
}
.cp-page .profile-fields {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 4px;
    max-width: 600px;
    margin-block: 4px;
    align-items: start;
    overflow-wrap: anywhere;
}
.cp-page .profile-fields > span {
    font-size: 12px;
}
.cp-page .profile-fields textarea {
    box-sizing: border-box;
    width: 360px;
    max-width: 100%;
}
.cp-page .profile-country {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cp-page .profile-country select {
    width: 300px;
    min-width: 0;
}
.cp-page .profile-country img {
    border: 1px solid #000000;
}

@media (max-width: 1023px) {
    .cp-page .site-member-header > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .cp-page .site-member-header > tbody > tr > td {
        display: block;
        width: auto;
        height: auto;
    }
    .cp-page .site-member-header > tbody > tr > .site-header-logo {
        flex: 1 0 100%;
    }
    .cp-page .site-member-header > tbody > tr > .site-header-spacer {
        display: none;
    }
}

@media (max-width: 740px) {
    .cp-page .site-columns,
    .cp-page .site-game-columns {
        grid-template-columns: minmax(0, 1fr);
    }
    .cp-page .site-columns > section {
        grid-row: 1;
    }
    .cp-page .site-columns > aside {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }
    .cp-page .site-columns > aside > table {
        margin-bottom: 0;
    }
    .cp-page .profile-fields {
        grid-template-columns: minmax(0, 1fr);
    }
    .cp-page .game-player-heading {
        flex-wrap: wrap;
    }
    .cp-page .game-player-name {
        min-width: min(20ch, 100%);
    }
    .cp-page .game-player-white .game-player-name,
    .cp-page .game-player-black .game-player-timer {
        margin-left: 0;
    }
}

.cp-page .site-footer {
    margin-top: 10px;
    color: #0000ff;
}
.cp-page .site-footer hr {
    width: 60%;
    border: 0;
    border-top: 1px solid #cccccc;
}

.cp-page .cp-cell-padding-variable > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    padding: var(--cp-cell-padding);
}

.cp-page th {
    font-weight: inherit;
    text-align: inherit;
}

.cp-page .cp-width-80 {
    width: 80%;
}