body {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: #000000;
    margin: 0px;
    background: #eee;
    padding: 0px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

img {
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    text-align: left;
    /*object-fit: contain;*/
}

#container {
    position: absolute;
    border-width: 1px;
    border-radius: 10px;
    border-style: solid;
    border-color: #e7d6fb;
    background-color: #e7d6fb;
    text-align: center;
    z-index: -3
}

.legend {
    position: absolute;
    border-width: 1px;
    border-radius: 10px;
    border-style: solid;
    border-color: #e7d6fb;
    background-color: #e7d6fb;
    padding: 5px 5px 5px 5px;
    text-align: left;
    z-index: -3;
    font-family: Arial;
}

#zone {
    position: absolute;
    background-color: #aaa;
    line-height: 20px;
    padding: 0px;
    z-index: -2;
}

.square {
    position: absolute;
    color: #000;
    background: linear-gradient(to bottom, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
    /* background-color: orange; */
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    border-color: #200;
    text-align: center;
}

.squareE {
    position: absolute;
    background-color: #aaa;
    text-align: center;
    z-index: -1;
}

#topper {
    margin-bottom: 0;
    padding: 0 0 0 0;
}

#options {
    margin-top: 0;
    margin-left: 0;
    text-align: left;
    display: inline-block;


}

td, th {
    padding-left: 10px;
    text-align: center;
}

#subtitle {
    text-align: center;
    padding: 0 0 0 0;
    position: absolute;

}

#move_ctr {

    text-align: right;
    display: inline-block;
}

#numbers {
    text-align: left;
    display: inline-block;
    font-size: 100%;
}


:root {
    --brython-dialog-font-family: Arial;
    --brython-dialog-font-size: 100%;
    --brython-dialog-bgcolor: #e7d6fb;
    --brython-dialog-border-color: #000;
    --brython-dialog-title-bgcolor: #e7d6fb;
    --brython-dialog-title-color: #000;
    --brython-dialog-close-bgcolor: #e7d6fb;
    --brython-dialog-close-color: #000;
}

a {
    color: blue;
}

.brython-dialog-main {
    font-family: var(--brython-dialog-font-family);
    font-size: var(--brython-dialog-font-size);
    font-weight: normal;
    color: #000;
    background-color: var(--brython-dialog-bgcolor);
    left: 10px;
    top: 10px;
    border-style: solid;
    border-color: var(--brython-dialog-border-color);
    border-width: 1px;
    z-index: 10;
}

.brython-dialog-title {
    background-color: var(--brython-dialog-title-bgcolor);
    color: var(--brython-dialog-title-color);
    border-style: solid;
    border-color: var(--brython-dialog-border-color);
    border-width: 0px 0px 1px 0px;
    padding: 0.4em;
    text-align: center;
    font-weight: bold;
    cursor: default;
}

.brython-dialog-close {
    float: right;
    background-color: var(--brython-dialog-close-bgcolor);
    color: var(--brython-dialog-close-color);
    cursor: default;
    padding: 0.1em;
}

.brython-dialog-panel {
    padding: 0.6em;
}

.brython-dialog-message {
    padding-right: 0.6em;
}

.brython-dialog-button {
    margin: 0.5em;
}

/* Classes for brython.widgets.menu */

:root {
    --brython-menu-font-family: Arial;
    --brython-menu-font-size: 200%;
    --brython-menu-navbar-bgcolor: #e7d6fb;
    --brython-menu-navbar-bgcolor-selected: #e7d6fb;
    --brython-menu-navbar-color: #000;
    --brython-menu-color: #000;
    --brython-menu-submenu-bgcolor: #999;
    --brython-menu-submenu-bgcolor-selected: #777;
}

/* Items in the main horizontal navigation bar */
.brython-menu-navbar-item {
    font-family: var(--brython-menu-font-family);
    font-size: 150%;
    background-color: var(--brython-menu-navbar-bgcolor);
    color: var(--brython-menu-navbar-color);
    /*padding: 0.5em 1em 0.5em 1em;*/
    padding: 0 0 0 0;
    cursor: default;
    text-align: left;


}

.brython-menu-navbar-item:hover {
    background-color: var(--brython-menu-navbar-bgcolor-selected);
}

.brython-menu-navbar-item-selected {
    background-color: var(--brython-menu-navbar-bgcolor-selected);
}

/* submenu, opened by a click on an item */
.brython-menu-submenu {
    font-family: var(--brython-menu-font-family);
    font-size: var(--brython-menu-font-size);
    background-color: var(--brython-menu-submenu-bgcolor);
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: var(--brython-menu-color);
    border-spacing: 0;
    text-align: left;
    z-index: 11;
}

/* submenu row */
.brython-menu-submenu-row:hover {
    color: var(--brython-menu-color);
    background-color: var(--brython-menu-submenu-bgcolor-selected);
}

.brython-menu-submenu-row-selected {
    color: var(--brython-menu-color);
    background-color: var(--brython-menu-submenu-bgcolor-selected);
}

/*
   cell in a submenu row. Each row has two cells, one for the item label, the
   other one filled with a > if the item has a submenu
*/
.brython-menu-submenu-item {
    font-family: var(--brython-menu-font-family);
    padding: 0.3em 0.3em 0.3em 1em;
    cursor: default;
    text-align: left;
}

/* end of browser.widgets.menu classes */