html, body {
    font-family: monospace;
    word-wrap: break-word;
    height: 100%;
    margin: 0;
    background-color: #17263c; /* #0b2d39;  */
    color: #a5a5a5;
    background-image: url("img/logotorconb.png");
	background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


 





a:link {
    color: #a5a5a5;
  }
  
  /* visited link */
  a:visited {
    color: #a5a5a5;
  }
  
  /* mouse over link */
  a:hover {
    color: rgb(0, 247, 255);
  }
  
  /* selected link */
  a:active {
    color: rgb(0, 247, 255);
  }
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flexrow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 1;
    margin: 4px 4px 4px 4px;
}

.flexcolumn {
    display:inline-flex;
    flex-direction: column;
    flex-grow: 1;
    margin: 0px 2px 0px 2px;
}

.top {}

.content {
    flex: 1;
    overflow: auto;
}

.hidden {
    display: none;
}

label, input {
    vertical-align: middle;
    font-size: 10.5px;
}

select, button {
    vertical-align: middle;
    font-size: 12px;
}

.version {
    font-size: 10px;
}

table {
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
}

.tableclst {
    border: 1px solid black;
    border-collapse: collapse;
    min-width: 25%;
    max-width: 32%;
}

.tableVSRXP {
    border: 1px solid black;
    border-collapse: collapse;
    width: auto;
    min-width: 45%;
    max-width: 100%;
    margin: 0px auto 0px auto;
}

.tableHOF {
    border: 1px solid black;
    border-collapse: collapse;
    width: auto;
    min-width: 35%;
    max-width: 100%;
    margin: 0px auto 0px auto;
}

.tableRaceRanking {
    border: 1px solid black;
    border-collapse: collapse;
    width: auto;
    min-width: 30%;
    max-width: 100%;
    margin: 0px auto 0px auto;
}

.tableTeams {
    border: 1px solid black;
    border-collapse: collapse;
    width: auto;
    max-width: 100%;
    margin: 0px auto 0px auto;
}

.tableTeamsMb {
    border: 1px solid black;
    border-collapse: collapse;
    width: auto;
    min-width: 50%;
    max-width: 100%;
    margin: 0px auto 0px auto;
}

tr.sel {
    background: #EEEEEE;
}

tr.sel:hover {
    background: #DDDDDD;
}

tr.hov:hover {
    background: #DDDDDD;
}

tr.hovred:hover {
    border: 0.16em solid red;    
}

tr {
    height: 23px;
}

th {
    border: 1px solid black;
    padding: 2px;
    background-color: #2596be;
    color: white;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    outline: 1px solid black;
    outline-offset: -1px; 
}

td {
    border: 1px solid grey;
    padding: 0px 5px;
    background-color: #92cbdf ;
    color:#000000;
}

span {
    white-space:nowrap;
}

td.tdc {
    cursor: pointer;
    font-weight: bold;
    font-size: 125%;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0px;
}

#th_rt, #th_name, #th_team, #th_rank, #th_dtf, #th_dtu, #th_state, #th_hdg, #th_twa, #th_tws, #th_twd, #th_speed, #th_vmg, #th_sail, #th_options {
    cursor: pointer;
}

#th_name2, #th_teamname, #th_teamsize, #th_flag, #th_flag2, #th_gender, #th_gender2, #th_role, #th_vsr, #th_xp, #th_level, #th_xplevel, #th_last, #th_type {
    cursor: pointer;
}

td.xfactor, td.rank, td.foils, td.deltaD, td.deltaT, td.sail, td.gybe, td.tack {
    text-align: right;
}

td.dtl {
    background-color: #92cbdf;/* splice*/
    text-align: right;
}
td.dtf {
    background-color: #66b6d2;  /* splice */
    text-align: right;
}

td.twd {
    background-color: #7cd8cb;  /* splice */
    text-align: right;
}

td.stamina {
    background-color: #7cd8cb;  /* splice */
    text-align: right;
}


td.tws {
    background-color: #25bea9;  /* Michel - Vert pale */
    text-align: right;
}
td.twa {
    background-color: #f2f2cb;
    /* Michel - Jaune pale */
    text-align: right;
}
td.speed1 {
    background-color: #cebeec;  /* splice */
    text-align: right;
}

td.speed2 {
    background-color: #bea8e5;  /* splice */
    text-align: right;
}

td.bvmg {
    background-color: #ae92df;  /* splice */
    text-align: center;
    white-space: nowrap;
}

td.sail {
    text-align: left;
    white-space: nowrap;
}

td.hdg {
    color: #071e26;
    text-align: right;
}



td.dtu {
    background-color: #92cbdf;  /* splice */
    text-align: right;
}

td.startDate {
    background-color: #92cbdf;  /* Michel - gris clair */
    text-align: center;
}

td.eRT {
    background-color: #92cbdf;  /* Michel - gris clair */
    text-align: center;
}

td.avg {
    background-color: #92cbdf;  /* Michel - gris clair */
    text-align: right;
}



td.brg {
    /* background-color: #fff6ee;  /* Michel - Orange tr�s pale */
    text-align: right;
}

td.state {
    font-size:13px;
    text-align: center;
}

td.bull {
    font-size:15px;
}

td.time, td.foil, td.position, td.type, td.name, td.agrd, td.man, td.options, td.asail {
    text-align: center;
    white-space: nowrap;
    
}

td.gender, td.flag, td.userid, td.level, td.role, td.type, td.members {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

td.username, td.city, td.desc {
    text-align: left;
    padding-left: 10px;
}

td.rank, td.points, td.last, td.time {
    text-align: right;
    padding-right: 10px;
}

tr.genderM {
    text-align: center;
    color: #0051cd; /* bleu */
}

tr.genderM:hover {
    background: #DDDDDD;
	font-weight: bold;   /* Michel */
}

tr.genderF {
    text-align: center;
    color: #bf00ff; /* mauve */
}

tr.genderF:hover {
    background: #DDDDDD;
	font-weight: bold;   /* Michel */
}

fieldset {
    display: inline-flex;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-top: 0px;
    margin-bottom: 3px;
    padding-block-start: 0;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: .25em;
    min-inline-size: min-content;
    border: 1px solid grey;
    visibility: hidden;
}

.tab2 {
    display: block;
    position: relative;
    margin: 0 0;
    padding: 0 0;
}

.tab2 .tab {
    float: left;
    display: block;
    margin: 0 2px;
    padding: 0 2px;
}

.tab2 .tab>input[type="checkbox"] {
    position: absolute;
    display: none;
}

/* Ranking Michel */
.tab2 .tab>span {
    display: block;
    padding: 1px 10px;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    color: #FF0000;
    background: #FFFFFF;
}
/* Fin Rankng Michel */

.tab2 .tab>label {
    display: block;
    padding: 1px 10px;
    font-size: 11px;
    cursor: pointer;
    position: relative;
    color: #000000;
    background: #EEEEEE;
}
.tab2 .tab>label:hover {
    display: block;
    padding: 1px 10px;
    font-size: 11px;
    cursor: pointer;
    position: relative;
    color: #000000;
    background: #d1d1d1;
}

.tab2 .tab>label:active {
    display: block;
    padding: 1px 10px;
    font-size: 11px;
    cursor: pointer;
    position: relative;
    color: #FFFFFF;
    background: #555555;
}

.tab2>.tab>[id^="sel_"]:checked + label {
    top: 0;
    background: #555555;
    color: #F5F5F5;
}

.tabs {
    display: block;
    position: relative;
    padding: 0px;
}

.tabs .tab {
    float: left;
    display: block;
    margin: auto 3px auto
}

.tabs .tab>input[type="radio"] {
    position: absolute;
    display: none;
}

.tabs .tab>label {
    display: block;
    padding: 6px 19px;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    color: #000000;
    background: #EEEEEE;
}

.tabs>.tab>[id^="ts:"]:checked + label {
    top: 0;
    background: #555555;
    color: #F5F5F5;
}

.icon {
    display: inline-flex;
    align-self: center;
    position: relative;
    height: 1em;
    width: 1em;
    bottom: -0.125em;
}

thead.sticky th {
    position: sticky;
    top: 0;
    outline: 1px solid black;
    outline-offset: -1px; 
}

#small {
    font-size: 85%;
}


#DTU0 {
  color: #0066ff; /* bleu */
}
#DTU1 {
  color: #704aff;
}
#DTU2 {
  color: #cc33ff; /* mauve */
}
#DTU3 {
  color: #ed7559;
}
#DTU4 {
  color: #ff9900; /* orange */
}
#colTime {
	text-align:left;
 }

#colSpeedR {
/*	background-color: #e0e0ff;  /* Michel - Mauve pale1 */
    text-align:right;
}

#colSpeedRx {
    text-align:right;
}
#colSpeedC {
/*	background-color: #ccccff;  /* Michel - Mauve pale2 */
    text-align:right;
}
		
#colSpeedCx {
    text-align:right;
}

#colSpeedT {
/*	background-color: #e0e0ff;  /* Michel - Mauve pale1 */
    text-align:right;
}

#colSpeedTx {
    text-align:right;
}

#colFoils {
    text-align:right;
}

#colDistance {
    text-align:right;
}

#colDeltaT {
    text-align:right;
}

#colSail {
    text-align:left;
}

#colGybe {}

#colTack {}


#colSpeedF {
/*	background-color: #ccccff;  /* Michel - Mauve pale2 */
	background-color: #e0e0ff;  /* Michel - Mauve pale1 */
    text-align:right;
}

#colSpeedFx {
    text-align:right;
}
#colRank {}

#colDTL {}

#colDTF {
    background-color: #FFE7C6;
    text-align:right;
}		

#colDTFx {
    text-align:right;
}		

#colDTU {
    text-align:right;
}		

#colBFU {
    text-align:right;
}		

#colBtEx {
    text-align:right;
}

#colBtE {
    text-align:right;
}

#colPos {}

#colCde {
    text-align:left;
}

#colDataCde {
    text-align:left;
}		

#colHDG {
    background-color: #E7FFFF;
    text-align:right;	
}

#colHDGx {
    text-align:right;	
}

#colTWA {
    background-color: #FFFFE7;
    text-align:right;	
}			

#colTWAx {
    text-align:right;	
}			

#colTWS {
    background-color: #E7FFE7;
    text-align:right;	
}			

#colTWSx {
    text-align:right;	
}			

#colTWD {
    background-color: #FFD7EC;
    text-align:right;	
}		

#colName {
    text-align:left;
}

/*  Pro Parametres : display: none; => standard / display: block; => Pro */
.pro_digits {
/*        display: none;  */
}
.pro_colors {
/*        display: none;  */
}
#pro_rank {
        display: block;  
/*        display: none;  */
}

.blink {
    font-weight: bold;
    color: #cc33ff;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    color: #FFFF00;
    opacity: 50;
  }
}

.shadowbox {
    margin:auto; /* Pour centrer lateralement global dans body */
    font-size: 12px;
    font-weight: bold;
    width: 390px;
    height: 270px;
    border: 1px solid #333;
    border-radius:10px;
    box-shadow: 8px 8px 5px #444;
    padding: 8px 12px;
    background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

.box2 {
    margin:auto; /* Pour centrer lateralement global dans body */
    font-size: 15px;
    width: 580px;
    height: auto;
    border: 1px solid #333;
    padding: 8px 12px;
}

.notif {
    font-size: 12px;
}