* {
    margin: 0px;
    padding: 0px;
}
h1 {
    font: bold 20px verdana, sans-serif;
}
h2 {
    font: bold 18px verdana, sans-serif;
}
h3 {
    font: bold 16px verdana, sans-serif;
}
h4 {
    font: bold 14px verdana, sans-serif;
}
h5 {
    font: bold 12px verdana, sans-serif;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup {
    display: block;
}
body {
    width: 100%;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-pack: center;
    -webkit-box-pack: center;
}
#wrapper {
    max-width: 1600px;
    margin: 15px 0px;

    display: -moz-box;
    display: -webkit-box;

    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;

    -moz-box-flex: 1;
    -webkit-box-flex: 1;
}
#main_header {
    background: #38a8e9;
    height: 42px;
    border: 1px solid #999999;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#viaduct_title {
    font: bold 28px Georgia, serif;
}

#container {
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
}

#main_menu {
    background: #888888;
    height: 42px;
    padding: 5px 15px;
    font: bold 20px verdana, sans-serif;
}
.menu_button {
    height: 40px;
    top: 1px;
    font: bold 20px verdana, sans-serif;
}
#lobby {
    width: 100px;
}
#login {
    width: 100px;
}

.play-mode-banner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11000;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    background: #8b1515;
    color: #fff;
    font: bold 18px/1.3 Arial, sans-serif;
    text-align: center;
}

body.manual-test-mode,
body.secondary-play-tab {
    box-sizing: border-box;
    padding-top: 44px;
}

.secondary-tab-banner {
    background: #654b00;
}

.play-mode-banner[hidden] {
    display: none;
}

.secondary-play-tab #main_menu,
.secondary-play-tab #container {
    pointer-events: none;
    opacity: 0.65;
}

.account-dialog {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.62);
    display: grid;
    place-items: center;
    padding: 20px;
}

.account-dialog[hidden],
.account-panel[hidden],
.account-tabs[hidden] {
    display: none;
}

.account-card {
    position: relative;
    width: min(520px, 100%);
    max-height: 90vh;
    overflow: auto;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 12px;
    background: #fff;
    color: #17211b;
    font: 18px/1.45 Arial, sans-serif;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.account-card h2 {
    margin-top: 0;
    padding-right: 30px;
    font-size: 1.55em;
}

.account-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 28px;
    cursor: pointer;
}

.account-tabs {
    display: flex;
    gap: 6px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.account-tab,
.account-panel button {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #285b40;
    border-radius: 5px;
    background: #285b40;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.account-tab[aria-selected="true"] {
    background: #173925;
}

.account-panel {
    display: grid;
    gap: 10px;
}

.account-panel input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px;
    border: 1px solid #8b9990;
    border-radius: 4px;
    font-size: 18px;
}

.password-input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.password-input-row .password-visibility {
    min-width: 76px;
}

.account-field-status {
    min-height: 20px;
    color: #9b1c1c;
}

.account-field-status.success {
    color: #176b35;
}

.account-panel .secondary-button {
    background: #fff;
    color: #285b40;
}

.account-summary {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(90px, auto);
    gap: 8px 18px;
    margin: 8px 0 16px;
}

.account-summary dt {
    font-weight: bold;
}

.account-summary dd {
    margin: 0;
    text-align: right;
}

.account-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.account-checkbox input {
    width: auto;
    margin-top: 3px;
}

.account-status {
    min-height: 20px;
    color: #9b1c1c;
}

.account-status.success {
    color: #176b35;
}

.guest-limitations {
    margin: 12px 0 18px;
    padding-left: 24px;
}

.guest-limitations li {
    margin: 7px 0;
}

.welcome-actions {
    display: grid;
    gap: 8px;
}

.welcome-actions button {
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #285b40;
    border-radius: 5px;
    background: #285b40;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.welcome-actions p {
    margin: 0 0 10px;
}

@media (max-width: 560px) {
    .account-dialog {
        padding: 10px;
    }

    .account-card {
        padding: 24px 18px;
        font-size: 17px;
    }
}
#host_table {
    width: 180px;
}
#close_table {
    width: 180px;
}
#leave_table {
    width: 180px;
}
#getDeck {
    width: 160px;
    display: none;
}
#getBoard {
    width: 160px;
}
#getNextBoard {
    width: 200px;
}

#main_section {
    width: 1200px;
    height: 800px;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -moz-box-flex: 4;
    -webkit-box-flex: 4;
    background: #e4b663;
}

#left_section {
    width: 400px;
    height: 800px;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}
#top_left_corner {
    position: relative;
    width: 400px;
    height: 300px;
    background: #DDDDDD;
}
#table_list_box {
    position: absolute;
    width: 400px;
    height: 300px;
}
#table_list_form {
    position: relative;
    top: 20px;
    left: 20px;
}
#host_input {
    width: 240px;
    height: 20px;
}
#users_in_table {
    background: #FFFFFF;
    position: relative;
    top: -10px;
    left: 80px;
    width: 240px;
    height: 160px;
}
.users_in_table_ul {
    list-style-position: inside;
    list-style-type: none;
    margin: 20px;
    padding: 0px;
}
#join_table {
    position: relative;
    top: -0px;
    left: 80px;
    width: 100px;
    height: 25px;
    font: bold 18px verdana, sans-serif;
}
#score_box {
    position: absolute;
    width: 400px;
    height: 300px;
    background: #DDDDDD;
    display: none;
}
#score_header {
    width: 400px;
    height: 40px;
    background: #EEEEEE;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#contract_str {
    font-size: large;
}
#score_board {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 260px;
    background: #38a8e9;
    font-size: large;
    color: snow;
}
#pair_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 400px;
    height: 40px;
    font-weight: bold;
}
#pair_pair {
    display: flex;
    justify-content: flex-end;
    width: 100px;
}
#pair_NS {
    display: flex;
    justify-content: center;
    width: 150px;
}
#pair_EW {
    display: flex;
    justify-content: center;
    width: 150px;
}
#pair_tricks {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 400px;
    height: 30px;
}
#tricks_label {
    display: flex;
    justify-content: flex-end;
    width: 100px;
    font-weight: bold;
}
#tricks_NS {
    display: flex;
    justify-content: center;
    width: 150px;
}
#tricks_EW {
    display: flex;
    justify-content: center;
    width: 150px;
}
#pair_score {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 400px;
    height: 30px;
}
#score_label {
    display: flex;
    justify-content: flex-end;
    width: 100px;
    font-weight: bold;
}
#score_NS {
    display: flex;
    justify-content: center;
    width: 150px;
}
#score_EW {
    display: flex;
    justify-content: center;
    width: 150px;
}
#pair_total_score {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 400px;
    height: 30px;
}
#score_plus_total {
    display: flex;
    justify-content: flex-end;
    width: 100px;
    font-weight: bold;
}
#score_plus_total_NS {
    display: flex;
    justify-content: center;
    width: 150px;
}
#score_plus_total_EW {
    display: flex;
    justify-content: center;
    width: 150px;
}
#user_net_score {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 400px;
    height: 30px;
}
#your_net_score_label {
    display: flex;
    justify-content: flex-end;
    width: 200px;
}
#your_net_score {
    display: flex;
    justify-content: center;
    width: 200px;
}
#user_plus_score {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 400px;
    height: 30px;
}
#your_plus_score_label {
    display: flex;
    justify-content: flex-end;
    width: 200px;
}
#your_plus_score {
    display: flex;
    justify-content: center;
    width: 200px;
}
#user_rank_percent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 400px;
    height: 30px;
}
#your_rank_percent_label {
    display: flex;
    justify-content: flex-end;
    width: 200px;
}
#your_rank_percent {
    display: flex;
    justify-content: center;
    width: 200px;
}

#lho {
    position: relative;
    width: 400px;
    height: 200px;
    background: #5f9d6a;
}
.lho_card {
    position: absolute;
    width: 100px;
    height: 150px;
    bottom: 10px;
}
#lho_ci_1 {
    left: 20px;
}
#lho_ci_2 {
    left: 42px;
}
#lho_ci_3 {
    left: 64px;
}
#lho_ci_4 {
    left: 86px;
}
#lho_ci_5 {
    left: 108px;
}
#lho_ci_6 {
    left: 130px;
}
#lho_ci_7 {
    left: 152px;
}
#lho_ci_8 {
    left: 174px;
}
#lho_ci_9 {
    left: 196px;
}
#lho_ci_10 {
    left: 218px;
}
#lho_ci_11 {
    left: 240px;
}
#lho_ci_12 {
    left: 262px;
}
#lho_ci_13 {
    left: 284px;
}

#dir_SS_lho {
    position: absolute;
    width: 400px;
    height: 40px;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#dir_lho {
}
#showing_suit_symbol_lho {
}

#table_chat {
    width: 400px;
    height: 300px;
    background: #DDDDDD;
}
#chat_message_title {
    position: relative;
    height: 30px;
    left: 20px;
    top: 10px;
}
#chat_input {
    position: relative;
    width: 360px;
    height: 60px;
    left: 20px;
    top: 10px;
}
#ChatMessage {
    position: relative;
    width: 345px;
    height: 160px;
    left: 20px;
    top: 10px;
    border: 1px solid #333333;
    padding: 8px;
    background: #EFEFEF;
    overflow: scroll;
}

#center_section {
    width: 400px;
    height: 800px;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}
#partner {
    position: relative;
    width: 400px;
    height: 200px;
    background: #5f9d6a;
}
.partner_card {
    position: absolute;
    width: 100px;
    height: 150px;
    top: 10px;
}
#partner_ci_1 {
    left: 20px;
}
#partner_ci_2 {
    left: 42px;
}
#partner_ci_3 {
    left: 64px;
}
#partner_ci_4 {
    left: 86px;
}
#partner_ci_5 {
    left: 108px;
}
#partner_ci_6 {
    left: 130px;
}
#partner_ci_7 {
    left: 152px;
}
#partner_ci_8 {
    left: 174px;
}
#partner_ci_9 {
    left: 196px;
}
#partner_ci_10 {
    left: 218px;
}
#partner_ci_11 {
    left: 240px;
}
#partner_ci_12 {
    left: 262px;
}
#partner_ci_13 {
    left: 284px;
}
#dir_SS_partner {
    position: absolute;
    width: 400px;
    height: 40px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#dir_partner {

}
#showing_suit_symbol_partner {
}

#table {
    position: relative;
    width: 400px;
    height: 400px;
}

#table_for_bidding {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0px;
    left: 0px;
    display: flex;
    font-size: x-large;
    display: none;
}
.bid-card {

}
#partnerBidRow {
    position: absolute;
    width: 400px;
    height: 65px;
    top: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#opponentsBidDiv {
    position: absolute;
    width: 400px;
    height: 250px;
    top: 75px;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
}
#lhoBidCol {
    position: absolute;
    width: 65px;
    height: 250px;
    left: 10px;
    display: flex;
    flex-direction: column;   
    align-items: flex-start;
    justify-content: center;
}
#freeSquare {
    width: 250px;
    height: 250px;
}
#rhoBidCol {
    position: absolute;
    width: 65px;
    height: 250px;
    right: 10px;
    display: flex;
    flex-direction: column;  
    align-items: flex-end;
    justify-content: center;
}
#playerBidRow {
    position: absolute;
    width: 400px;
    height: 65px;
    bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#table_for_card_play {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0px;
    left: 0px;
    display: none;
}
.position_card {
    position: absolute;
    width: 100px;
    height: 150px;
}
#forPartner {
    position: absolute;
    width: 400px;
    height: 133px;
}
#cardPositionForPartner {
    left: 150px;
    top: 10px;
}
#forOppenents {
    position: absolute;
    width: 400px;
    height: 134px;
    top: 133px;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
}
#cardPositionForLho {
    left: 10px;
}
#cardPositionForRho {
    right: 10px;
}
#forPlayer {
    position: absolute;
    width: 400px;
    height: 133px;
    bottom: 0px;
}
#cardPositionForPlayer {
    left: 150px;
    bottom: 10px;
}
#player {
    position: relative;
    width: 400px;
    height: 200px;
    background: #5f9d6a;
}
.player_card {
    position: absolute;
    width: 100px;
    height: 150px;
    top: 40px;
}
#player #player_ci_1 {
    left: 20px;
}
#player #player_ci_2 {
    left: 42px;
}
#player #player_ci_3 {
    left: 64px;
}
#player #player_ci_4 {
    left: 86px;
}
#player #player_ci_5 {
    left: 108px;
}
#player #player_ci_6 {
    left: 130px;
}
#player #player_ci_7 {
    left: 152px;
}
#player #player_ci_8 {
    left: 174px;
}
#player #player_ci_9 {
    left: 196px;
}
#player #player_ci_10 {
    left: 218px;
}
#player #player_ci_11 {
    left: 240px;
}
#player #player_ci_12 {
    left: 262px;
}
#player #player_ci_13 {
    left: 284px;
}

#dir_SS_player {
    position: absolute;
    width: 400px;
    height: 40px;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#dir_player {
}
#showing_suit_symbol_player {

}

#bid_C {
    color: black;
    font-size: 22px;
}
#bid_D {
    color: red;
    font-size: 22px;
}
#bid_S {
    color: black;
    font-size: 22px;
}
#bid_H {
    color: red;
    font-size: 22px;
}
#bid_NT {
    font-size: 22px;
}

#right_section {
    width: 400px;
    height: 800px;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}
#sys_message_area {
    width: 400px;
    height: 300px;
    background: #DDDDDD;
}
#status_title {
    position: relative;
    height: 30px;
    left: 20px;
    top: 10px;
}
#SystemMessage {
    position: relative;
    width: 360px;
    height: 230px;
    left: 10px;
    top: 10px;
    border: 1px solid #333333;
    padding: 8px;
    overflow: scroll;
    background: #EFEFEF;
}

#rho {
    position: relative;
    width: 400px;
    height: 200px;
    background: #5f9d6a;
}
.rho_card {
    position: absolute;
    width: 100px;
    height: 150px;
    bottom: 10px;
}
#rho_ci_1 {
    left: 20px;
}
#rho_ci_2 {
    left: 42px;
}
#rho_ci_3 {
    left: 64px;
}
#rho_ci_4 {
    left: 86px;
}
#rho_ci_5 {
    left: 108px;
}
#rho_ci_6 {
    left: 130px;
}
#rho_ci_7 {
    left: 152px;
}
#rho_ci_8 {
    left: 174px;
}
#rho_ci_9 {
    left: 196px;
}
#rho_ci_10 {
    left: 218px;
}
#rho_ci_11 {
    left: 240px;
}
#rho_ci_12 {
    left: 262px;
}
#rho_ci_13 {
    left: 284px;
}

#dir_SS_rho {
    position: absolute;
    width: 400px;
    height: 40px;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#dir_rho {
}
#showing_suit_symbol_rho {
}

#bid_area {
    width: 400px;
    height: 300px;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    background: #DDDDDD;
}
#bid_box {
    position: relative;
    top: 20px;
    left: 20px;
    width: 360px;
    height: 260px;
    background: #00AA22;
}
#your_bit_title {
    position: relative;
    height: 30px;
    left: 40px;
    top: 20px;
}
.bid_level {
    position: relative;
    width: 40px;
    height: 40px;
    left: 40px;
    top: 20px;
    font-size: 20px;
    background: #EEEEEE;
}
.bid_suit {
    position: relative;
    width: 50px;
    height: 40px;
    left: 40px;
    top: 20px;
    background: #EEEEEE;
}
#bid_NT {
    width: 80px;
}
.bid_other {
    position: relative;
    height: 40px;
    left: 40px;
    top: 20px;
    font-size: 20px;
    background: #EEEEEE;
}
#bid_double {
    width: 95px;
}
#bid_appeal {
    width: 95px;
}
#bid_pass {
    width: 90px;
}
#bid_cancel {
    width: 100px;
    height: 40px;
    top: 40px;
    left: 60px;
    background: #EEEEEE;
}
#bid_confirm {
    width: 100px;
    height: 40px;
    top: 40px;
    left: 100px;
    background: #EEEEEE;
}

#bid_history {
    position: relative;
    width: 400px;
    height: 150px;
}
.bid_history_line {
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
}

#main_aside {
    width: 400px;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    padding: 20px;
    background: #CCCCCC;
}
#help_and_learn_area {
    width: 400px;
}
#label_learn {

}
#topic_input {
    width: 395px;
    height: 20px;
}
#topic_content {
    position: relative;
    width: 380px;
    height: 690px;
    top: 10px;
    border: 1px solid #333333;
    padding: 8px;
    overflow: scroll;
    background: #FEFEFE;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
}

#main_footer {
    text-align: center;
    padding: 20px;
    border-top: 2px solid #999999;
}
article {
    background: #FFFBCC;
    border: 1px solid #999999;
    padding: 20px;
    margin-bottom: 15px;
}
time {
    color: #999999;
}
article footer {
    text-align: right;
}
figcaption {
    font: italic 14px verdana, sans-serif;
}