html,body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size:1.0em;
}
body {
    font-family: 'Quicksand', sans-serif;

}
.emoji { 
    font-family: Segoe UI Emoji;
    font-size: 1em;
}
table.data {
    width:100%;
    border-collapse: collapse;
    box-sizing: border-box;
} 
table.data thead {
    background:#fff;
} 
table.data tr.challenge:hover {
    background:#7f7;
} 
table.data tr.special {
    /*display:none;*/
} 

table.data tr.usualPath {
    background:#ff9;
}
table.data tr.usualPath:hover {
    background:#ff1;
}

table.data tr.upcoming,
table.data tr.upcoming a {
    color:#999;
}

table.data tr td, table.data tr th {
    padding:3px 5px;
    border:1px solid #ccc;
}

table.data tr td.rotated,
table.data tr th.rotated{
    cursor:pointer;
    user-select: none; 
    /*
    transform: rotate(90deg);
    */
    overflow:hidden;
    height:100px;
    text-align:left;
    background:#f0f0f0;
    vertical-align: bottom;

}
table.data tr td.rotated span,
table.data tr th.rotated span {

    writing-mode: vertical-lr;
    display: inline-block;
    white-space: nowrap;

}
table.data tr th.birthday { background:pink !important;}
table.data tr td.choix {
    cursor:pointer;
    user-select: none; 
    text-align:center;
    user-select: none;
    width:30px;
}
table.data tr td.choix:nth-child(even) {background: rgba(239,239,239,.5);}
table.data tr td.choix:nth-child(odd) {background: rgba(255,255,255,.5); }

table.data tr td.choix.out {
    background: repeating-linear-gradient(
        45deg,
        #eee,
        #eee 6px,
        #fff 6px,
        #fff 12px
    );
}


table.data tr td.maybe {

    background:#ddd;
}
table.data tr td.yes {

    background:#7f8;
}
table.data tr.not_allowed td {
    text-decoration:line-through;
    opacity:.5;
}
table.data tr td.no {

    background:#f77;
}
table.data tr td.sum {

    width:30px;
    text-align:center;
}
table.data tr td.ok {

    width:30px;
    text-align:center;
}

table.data tr th.rotated.myself,
table.data tr td.choix.myself {
    cursor:pointer;
    background:yellow; /* ff0 */
}
table.data tr th.rotated.realmyself:not(.myself),
table.data tr td.choix.realmyself:not(.myself) {
    cursor:pointer;
    background:#ADFF2F;
}

table.data tr.challenge.filtered {
    display:none;
}

/* FOR COL HIGHLIGHT */
table.data {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

tr.challenge td.choix /*, 
th,
.row,
.col*/
{
    cursor: pointer;
    padding: 10px;
    position: relative;
}

tr.challenge td.choix:hover::before/*,
.row:hover::before*/ { 
    background-color: #7f7;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;        
}

tr.challenge td.choix:hover::after /*,
.col:hover::after*/ { 
    background-color: #7f7;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}


tr.challenge.notMyChallenge  { 
    display:none;
}


tr.zchallenge:not(.yes) .challengeName,
tr.zchallenge:not(.yes) td:nth-of-type(1),
tr.zchallenge:not(.yes) td:nth-of-type(2),
tr.zchallenge:not(.yes) td:nth-of-type(3),
tr.zchallenge:not(.yes) td:nth-of-type(4),
tr.zchallenge:not(.yes) td:nth-of-type(5),
tr.zchallenge:not(.yes) td:nth-of-type(6),
tr.zchallenge:not(.yes) td:nth-of-type(7)
{ 
    /*background-image: repeating-linear-gradient( 135deg, transparent, transparent 15px, rgba(255,0,0,.5) 16px, rgba(255,0,0,.5) 16px);
    repeating-linear-gradient( -45deg, transparent, transparent 25px, rgba(255,0,0,.5) 26px);*/

    /*
    background-image: repeating-linear-gradient(-45deg, rgba(255,0,0,.5), transparent 0.5px, transparent 25px, rgba(255,0,0,.5) 25.5px);
    */

    background-color: rgba(255,0,0,.1);
}



tr.challenge.yes .challengeName,
tr.challenge.yes td:nth-of-type(1),
tr.challenge.yes td:nth-of-type(2),
tr.challenge.yes td:nth-of-type(3),
tr.challenge.yes td:nth-of-type(4),
tr.challenge.yes td:nth-of-type(5),
tr.challenge.yes td:nth-of-type(6),
tr.challenge.yes td:nth-of-type(7)
{ 
    /*background-image: repeating-linear-gradient( 135deg, transparent, transparent 15px, rgba(255,0,0,.5) 16px, rgba(255,0,0,.5) 16px);
    repeating-linear-gradient( -45deg, transparent, transparent 25px, rgba(255,0,0,.5) 26px);*/

    /*
    background-image: repeating-linear-gradient(-45deg, rgba(255,0,0,.5), transparent 0.5px, transparent 25px, rgba(255,0,0,.5) 25.5px);
    */

    background-color: rgba(0,128,0,.1);
}

/* -- */




.header {
    position:relative;
    margin:0 0 10px 0;
    padding:20px 20px 20px 50px; 
    font-size:24px;
    font-weight:900;
    color:#fff;
    background-color:#000;

}
a { 
    color:#000;
    text-decoration:none;
    font-weight:900;
}
a:hover { 
    color:blue;
    text-decoration:underline;
}

#page {
    padding:10px 50px;
}
#divtimezone {
    padding:6px 50px;
    height:auto;
    overflow:auto;

}
.loginform {
    margin-top:20px;
}
button {
    cursor:pointer; 
}
label {
    user-select: none;
}

#clocks {
    position:absolute;
    top:0;
    height:auto;
    width:auto;
    font-size:12px;
    color:#ddd;
}


.localClock {
    float:right;
    margin-left:15px;
    /*font-size:14px;*/
}
a.logoff {
    color:#fff;
    font-size:.5em;
    margin-left:15px;
}
.filtersmob { 
    display:none;
}


/*
phones
*/

@media only screen and (max-width: 768px) {
    #page {
        padding:1px 1px;
    }
    .header {
        margin:0 0 2px 0;
        padding:3px 3px 3px 3px; 
        font-size:24px;
        font-weight:900;
        color:#fff;
        background-color:#000;
    }
    .localClock {
        display:none;
    }
    .filters { 
        display:none;
    }

    a.logoff {

        margin-left:0px;
        clear:left;
    }


    td.choix:not(.myself):not(.realmyself),
    th.rotated:not(.myself):not(.realmyself) {
        display:none;
    }

    td.choix.myself,
    th.rotated.myself,
    td.choix.realmyself,
    th.rotated.realmyself {
        display:table-cell;
    }
    .filtersmob { 
        display:inline-block;
    }
    #divtimezone {
        padding:1px 1px;
        height:auto;
    }
    #divtimezone > * ,
    #divtimezone > label > * {
        float:left;
        clear:both;
    } 


    input[type=text], input[type=url],
    input[type=email], 
    input[type=password], input[type=tel],


    input[type=text], select, textarea{
        width: 100%;
        padding: 12px;
        font-size:16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        resize: vertical;
    }

    /* Style the label to display next to the inputs */
    label {
        width: 100%;
        padding: 12px 12px 12px 0;
        display: inline-block;
    }

    /* Style the submit button */
    input[type=submit] {
        background-color: #4CAF50;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        float: right;
    }

}

.contextmenu {
    border:1px solid black;
    padding:5px;


}

.digits {
    font-family: 'Cutive Mono', monospace;
   font-family: 'Noto Sans Mono', monospace;
    /*font-variant-numeric: tabular-nums lining-nums;*/
    text-align:right;
    /*<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap" rel="stylesheet">
    CSS rules to specify families

    font-family: 'Cutive Mono', monospace;
    */
}

.link { color:blue; cursor:pointer; }
.link:hover { text-decoration:underline; }