@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* Affichage de la page */
tablecontainer {
    float: left;
    width: 80vw;
    height: 90vh;
    background-color: green;
}

.t6color {
    height: 96px;
}

.t6tbmd1 {
    float: left;
    width: 25vw;
    height: 50vh;
    background-color: green;
    margin: 0px;
}

.t6tbmd2 {
    float: left;
    width: 25vw;
    height: 50vh;
    background-color: green;
    margin: 0px;
}

.t6tbmd3 {
    float: left;
    width: 25vw;
    height: 50vh;
    background-color: green;
    margin: 0px;
}

.t6tbmd3a {
    position: relative;
    text-align: center;
    top: 1vh;
    background-color: green;
}

.t6tbmd4 {
    float: left;
    width: 75vw;
    height: 40vh;
    background-color: green;
    margin: 0px;
}

textarea {
    width: 60vw;
    height: 20vh;
    padding: 2px 2px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 12px;
    resize: none;
}
/*width: calc(100vw-250px);*/

/* Affichage de la séquence */

.vuln {
    color: red;
    width: 70px;
}

.nvuln {
    color: green;
    width: 70px;
}

.tablebids {
    margin: auto;
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

.bidcells {
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

/* Affichage de la Bidding BOX */

.tablebbox {
    margin-left: 10px;
    border: solid;
}


.CadreAucunBlanc {
    border: none;
    background-color: white;
    TEXT-DECORATION: none;
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    width: 45px;
    height: 45px;
}

    .CadreAucunBlanc:hover {
        cursor: cell;
        background-color: lightblue;
    }

/* -----------------------------------   Page de saisie */
.screen {
    width: 73vw;
    height: 90vh;
    background-color: green;
}

.wrapper {
    display: inline-grid;
    grid-template-columns: 3vw 25vw 25vw 20vw;
    grid-template-rows: 15vh 45vh 30vh;
    grid-gap: 0px;
}

.hand {
    resize: none;
    overflow:hidden;
    font-size: 18px;
    font-family: monospace;
    width: 120px;
    height: 120px;
}

.auction {
    font-size: 18px;
    font-family: monospace;
    width: 140px;
    height: 120px;
}

.comment {
    font-size: 12px;
    width: 23vw;
    height: 20vh;
}

.errormessage {
    font-size: 12px;
    width: 23vw;
    height: 20vh;
}

textarea:read-only {
    background-color: lightgray;
}



.label {
    font-size: 18px;
    font-family: monospace;
}

.one {
    grid-column: 2;
    grid-row: 1;
    background-color: green;
}

.two {
    grid-column: 3;
    grid-row: 1;
    background-color: green;
}

.three {
    grid-column: 4;
    grid-row: 1;
    background-color: green;
}

.four {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row: 2;
}

.five {
    grid-column: 4;
    grid-row: 2;
    background-color: green;
}

.six {
    grid-column: 2;
    grid-row: 3;
    background-color: green;
}

.seven {
    grid-column: 3;
    grid-row: 3;
    background-color: green;
}

.eight {
    grid-column: 4;
    grid-row: 3;
    background-color: green;
}

.gridhands {
    display: inline-grid;
    grid-template-columns: 16vw 16vw 16vw;
    grid-template-rows: 13vh 13vh 13vh;
    grid-gap: 0px;
}

.gridh1 { /* Ouest */
    grid-column: 1;
    grid-row: 1;
}

.gridh3 { /* Est */
    grid-column: 3;
    grid-row: 1;
}

.gridh2 { /* nord */
    position: absolute;
    top: 16vh;
    left:300px;
    /*
    grid-column: 2;
    grid-row: 1;

          */
}
.gridh4 { /* Ouest */
    position: absolute;
    top: 30vh;
    left: 230px;
    /*
    grid-column: 1;
    grid-row: 2;

          */
}
.gridh6 { /* Est */
    position: absolute;
    top: 30vh;
    left: 500px;
    /*
    grid-column: 3;
    grid-row: 2;
        */
}
.gridh8 { /* Sud */
    position: absolute;
    top: 44vh;
    left: 150px;
    /*
    grid-column: 2;
    grid-row: 3;
        */
}


/* -----------------------------------   Affichage main */
.grid2 {
    display: inline-grid;
    grid-template-columns: repeat(14, 1fr);
    grid-gap: -10px;
    grid-auto-rows: minmax(100px, auto);
}

.grid21 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1;
}

.grid22 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row: 1;
}

.grid23 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row: 1;
}

.grid24 {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row: 1;
}

.grid25 {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row: 1;
}

.grid26 {
    grid-column-start: 6;
    grid-column-end: 8;
    grid-row: 1;
}

.grid27 {
    grid-column-start: 7;
    grid-column-end: 9;
    grid-row: 1;
}

.grid28 {
    grid-column-start: 8;
    grid-column-end: 10;
    grid-row: 1;
}

.grid29 {
    grid-column-start: 9;
    grid-column-end: 11;
    grid-row: 1;
}

.grid210 {
    grid-column-start: 10;
    grid-column-end: 12;
    grid-row: 1;
}

.grid211 {
    grid-column-start: 11;
    grid-column-end: 13;
    grid-row: 1;
}

.grid212 {
    grid-column-start: 12;
    grid-column-end: 14;
    grid-row: 1;
}

.grid213 {
    grid-column-start: 13;
    grid-row: 1;
}
    

/* LABELS */
.errorlabel {
    color:red;
    font-size:16px;
}
.label20 {
    font-size: 20px;
}