:root {
    --bg_body_color: #FFFFFF;
    --body_color: #000000;
    --bg_image : url("../img/backGroundLight.png");
    
    --th_color :    #ededed;
    --th_bg_color : #398AF5;
    --th_border : 1px solid black;
    --border_color : black;
    
    --td_bg_color : #FFFFFF; 
    --td_color:     #000000;
    
    --td_dtl_color: #fff6ee;
    --td_dtf_color: #ededed;
    --td_twd_color: #ffebf2;
    --td_tws_color: #ebfff5;
    --td_twa_color: #ffffeb;
    --td_speed1_color: #d3d3ff;
    --td_speed2_color: #ececff; 
    --td_bvmg_color: #d3d3ff;
    --td_hdg_color:  #ecfcff; 
    --td_hdg_txt_color:  #000000; 
    --td_dtu_color: #fff6ee;                
    --td_startDate_color: #ededed;
    --td_eRT_color: #ededed; 
    --td_avg_color: #ededed;
    --td_brg_color: #fff6ee;
    
    --a_link : "blue";
    --a_link_hover : "blue";
    --popup_bg_img :linear-gradient(180deg, #fff, #ddd 40%, #ccc);

    --tabNotActive_color: #000000;
    --tabNotActive_background: #EEEEEE;
    --tabActive_color: #F5F5F5;
    --tabActive_background: #555555;

  }
  [data-theme="dark"] {
    --bg_body_color: #202124;
    
    --body_color: rgb(237, 239, 241);
    --bg_image : url("../img/backGroundDark.png");
    
    --th_color :    #a5a5a5;
    --th_bg_color : rgb(41,42,45);
    --th_border : 1px solid rgb(73, 76, 80);
    
    --border_color : rgb(73, 76, 80);
    --td_bg_color : #202124; 
    --td_color:     #a5a5a5;
    --td_dtl_color: #1d0e00;
    --td_dtf_color: #170000;
    --td_twd_color: #3a0014;
    --td_tws_color: #001d0e;
    --td_twa_color: #151500;
    --td_speed1_color: #00002d;
    --td_speed2_color: #000033; 
    --td_bvmg_color: #000017;
    --td_hdg_color:  #00282f; 
    --td_hdg_txt_color:  #a5a5a5; 
    --td_dtu_color: #2b2d33;                
    --td_startDate_color: #170000;
    --td_eRT_color: #170000; 
    --td_avg_color: #170000;
    --td_brg_color: #200f00;
    --th_border : 1px solid rgb(73, 76, 80);


    --a_link : "lightskyblue";
    --a_link_hover : "lightgreen";
    --popup_bg_img :linear-gradient(180deg, #0a0a0a, #252930 40%, #000000);
    
    --tabActive_color: #000000;
    --tabActive_background: #EEEEEE;
    --tabNotActive_color: #F5F5F5;
    --tabNotActive_background: #555555;

  }

html, body {
    font-family: monospace;
    word-wrap: break-word;
    height: 100%;
    margin: 0;
    background-color: var(--bg_body_color);
    color: var(--body_color);
    background-image: var(--bg_image);
	background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.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;
}


.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: var(--th_border);
    border-collapse: collapse;
    width: 100%;
}

.tableclst {
    border: var(--th_border);
    border-collapse: collapse;
    min-width: 25%;
    max-width: 32%;
}

.tableVSRXP {
    border: var(--th_border);
    border-collapse: collapse;
    width: auto;
    min-width: 45%;
    max-width: 100%;
    margin: 0px auto 0px auto;
}

.tableHOF {
    border: var(--th_border);
    border-collapse: collapse;
    width: auto;
    min-width: 35%;
    max-width: 100%;
    margin: 0px auto 0px auto;
}

.tableRaceRanking {
    border: var(--th_border);
    border-collapse: collapse;
    width: auto;
    min-width: 30%;
    max-width: 100%;
    margin: 0px auto 0px auto;
}

.tableTeams {
    border: var(--th_border);
    border-collapse: collapse;
    width: auto;
    max-width: 100%;
    margin: 0px auto 0px auto;
}

.tableTeamsMb {
    border: var(--th_border);
    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;
}

.routingDrawn {
    background: #a2a2a2 !important;
}
.routingHide {
    background: #eeeeee !important;
}

tr.hovred:hover {
    border: 0.16em solid red;    
}
.selectedLine {
    border: 0.16em solid rgb(245, 245, 93);
}

tr {
    height: 23px;
}

th {
    border: var(--th_border);
    padding: 2px;
    background-color: var(--th_bg_color);
    color: var(--th_color);
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    outline: 1px solid  var(--border_color);
    outline-offset: -1px; 
}

td {
    border: 1px solid grey;
    padding: 0px 5px;
    background-color: var(--td_bg_color);
    color: var(--td_color);
}

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_rank, #th_dtf, #th_dtu, #th_state, #th_hdg, #th_twa, #th_tws, #th_twd, #th_speed, #th_vmg, #th_sail, #th_options, #th_racetime, #th_stamina {
    cursor: pointer;
}

#th_teamname, #th_teamsize, #th_gender, #th_type , #th_total , #th_skipper , #th_raceRank , #th_xOptions , #th_gap , #th_id , #th_teamid , #th_uid{
    cursor: pointer;
}
#th_eRT, #th_avgS, #th_sd, #th_rankcategory, #th_flag, #lb_boatvip {
    cursor: pointer;
}

#th_remove {
    width: 25px;
    padding: 0px;
}

#th_rl_date {
    width: 120px;
}
#th_rl_rank {
    width: 70px;
}
#th_rl_deltaDistance, #th_rl_deltaTime {
    width: 80px;
}
#th_rl_sail, #th_rl_gybe, #th_rl_tack {
    width: 60px;
}
#th_rl_calcSpeed {
    width: 110px;
}
#th_rl_reportedSpeed {
    width: 80px;
}
#th_rl_dtf {
    width: 120px;
}
#th_rl_factor {
    width: 130px;
}
#th_rl_stamina {
    width: 100px;
}
#th_lu {
    width: 82px;
}

td.remove {
    padding: 0px;
    text-align: center;
}
td.remove span {    
    cursor: pointer;
}

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

td.dtl {    
    background-color: var(--td_dtl_color);
    text-align: right;
}

td.dtf {
    background-color: var(--td_dtf_color);
    text-align: right;
}

td.twd {
    background-color: var(--td_twd_color);
    text-align: right;
}
td.tws {
    background-color: var(--td_tws_color);
    text-align: right;
}

td.twa {
    background-color: var(--td_twa_color);
    text-align: right;
}


td.stamina {
    text-align: right;
}

td.speed1 {
    background-color: var(--td_speed1_color);
    text-align: right;
}

td.speed2 {
    background-color: var(--td_speed2_color);
    text-align: right;
}

td.bvmg  {
    background-color: var(--td_bvmg_color);
    text-align: center;
    white-space: nowrap;
}
td.bspeed,td.sail,td.gybe,td.tack {
    text-align: center;
}

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

td.hdg {
    background-color: var(--td_hdg_color);
    color: var(--td_hdg_txt_color);
    text-align: right;
}


td.dtu {
    background-color: var(--td_dtu_color); 
    text-align: right;
}

td.startDate {
    background-color: var(--td_startDate_color); 
    text-align: center;
}

td.eRT {
    background-color: var(--td_eRT_color); 
    text-align: center;
}

td.avg {
    background-color: var(--td_avg_color); 
    text-align: right;
}


td.brg {
    background-color: var(--td_brg_color); 
    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.options, td.state {
    cursor: help;
}

td.RaceTime {
    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;
}


td>p {
   margin:0px; 
}


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 3px 2px;
}

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


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


.tab2 .tab>label {
    display: block;
    padding: 1px 10px;
    font-size: 11px;
    cursor: pointer;
    position: relative;
    color: #000000;
    background: #EEEEEE;
    line-height: 1.6;
}
.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;
}
#sel_skippers {
    margin-left:5em;
    visibility: visible;
    margin-top: 0.1em;;
    float: left;
    padding-top: 0.2em;

}
#headSpacer {
    display: flex;
    padding-bottom: 0.7em;
}

#headSpacer>div>.tabs {
    margin-top: 1em;
}


#userConfig {
    padding: 0 1em;
}

#userConfig button {
    padding: 3px 12px;
}

.us_general {
    border-spacing: 0 25px;
    border-collapse: separate;
    border: none;
}
tr.us_line>td {
    border-top: none;
    border-left: none;
    border-right: none;
    padding-bottom: 2em;
    background: transparent;
    font-size: medium;
}
tr.us_line3>td {
    border: none;
    padding-bottom: 2em;
    background: transparent;
    font-size: medium;
}
tr.us_line3t>td {
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-bottom: 2em;
    background: transparent;
    font-size: medium;
}
tr.us_line3b>td {
    border-top: none;
    border-left: none;
    border-right: none;
    padding-bottom: 2em;
    background: transparent;
    font-size: medium;
}
tr.us_line2>td {
    border: none;
    padding-bottom: 1em;
    background: transparent;
    font-size: medium;
}

tr.us_line>td.us_title, tr.us_line2>td.us_title , tr.us_line3>td.us_title, tr.us_line3t>td.us_title, tr.us_line3b>td.us_title{
    font-size: 1.2em;
}
tr.us_line>td>label, tr.us_line2>td>label, tr.us_line3>td>label, tr.us_line3t>td>label, tr.us_line3b>td>label {
    font-size: 1em;
    cursor: pointer;
}


#sel_ranking {
    width: 50%;
    height: 5em;
}

div#selRankMaster {
    position: absolute;

} 
div#selRankSlave {
    position: absolute;
    top: 50%;
} 

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

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

.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: var(--tabNotActive_color);
    background: var(--tabNotActive_background);
}

.tabs>.tab>[id^="ts:"]:checked + label {
    top: 0;
    color: var(--tabActive_color);
    background: var(--tabActive_background);

}



.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 var(--border_color);
    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;
}



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

#colSpeedFx {
    text-align:right;
}


#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;
}


#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 Param�tres : display: none; => standard / display: block; => Pro */

#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 lat�ralement global dans body */
    font-size: 12px;
    font-weight: bold;
    width: 30em;
    height: 21em;
    border: 1px solid #333;
    border-radius:10px;
    box-shadow: 8px 8px 5px #444;
    padding: 8px 12px;
    background-image: var(--popup_bg_img);
}
.notifBorderBottom {
    border-bottom: var(--th_border);
    padding-bottom: 0.4em;
}

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

.notif {
    font-size: 12px;
}

.multiselect {
  width: 200px;
  z-index:1;
}

.sel_route {
  position: relative;
}

.sel_route select {
  width: 100%;
  font-weight: bold;
}


.fa-counter-spin {
    -webkit-animation: spin-counter 2s infinite linear;
    -moz-animation: spin-counter 2s infinite linear;
    -o-animation: spin-counter 2s infinite linear;
    animation: spin-counter 2s infinite linear;
  }
  @-moz-keyframes spin-counter {
    0% {
      -moz-transform: rotate(359deg);
    }
    100% {
      -moz-transform: rotate(0deg);
    }
  }
  @-webkit-keyframes spin-counter {
    0% {
      -webkit-transform: rotate(359deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
    }
  }
  @-o-keyframes spin-counter {
    0% {
      -o-transform: rotate(359deg);
    }
    100% {
      -o-transform: rotate(0deg);
    }
  }
  @-ms-keyframes spin-counter {
    0% {
      -ms-transform: rotate(359deg);
    }
    100% {
      -ms-transform: rotate(0deg);
    }
  }
  @keyframes spin-counter {
    0% {
      transform: rotate(359deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }


#mapfilterLmap{
    height: 100%;
    width: 16%;
    display: inline;
}

.select-editable {
    position:relative;
}
.select-editable select {
    position:absolute; 
    top: 19%; 
    left:2%; 
    border:none;
    width:96%;
    margin:0;
}
.select-editable input {
    position:absolute; 
    top:21%; 
    left:2%; 
    width:96%; 
    border:none;
}
.select-editable select:focus, .select-editable input:focus {
    outline:none;
}

.mapBtDiv{
    display : flex;
}

.mapBtDiv{
    padding-bottom: 4%;

}

.mapBtDiv>label  {
    display: block;
    padding: 1px 10px;
    font-size: 11px;
    cursor: pointer;
    position: relative;
    color: #000000;
    background: #EEEEEE;
    text-align: center;
    width: 40%;
    margin-left: 2%;
    margin-right: 2%;
}

#lbl_helpLmap {
    width: 100%
}

.rt_lst_name>label  {
    display: block;
    padding: 1px 10px;
    font-size: 11px;
    cursor: pointer;
    position: relative;
    color: #000000;
    background: #EEEEEE;
    text-align: center;
}




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

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

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

.rt_lst_name {
    height:25px;
    padding-top: 2%;
    padding-bottom: 2%;
    width: 80%;
}
.rt_lst_color {
    height:25px;
    width: 10%;

}
.rt_lst_color>input {
    max-width: 30px;
    border: none;
    background-color: transparent;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}
#existingRoute3Lmap>.rt_lst_color {

    height: 1.2em;
    width: 46%;
    padding-left: 2px;
}
#sel_borderColorLmap,#sel_projectionColorLmap {
 
    width: 50%;
    max-width: none;
    padding: 0;
    height: 1.4em;
}
#rt_popup, #rt_popupLmap{
    margin-top: 5%;
    margin-left: 30%;
    z-index: 999;
    font-size: 12px;
    font-weight: bold;
    width: 400px;
    height: 130px;
    border: 1px solid #333;
    border-radius:10px;
    box-shadow: 8px 8px 5px #444;
    padding: 8px 12px;
    background-image: var(--popup_bg_img);
    position: absolute;
}

.popupCloseBt{
    width : 3%;
    height: 3%;
    float : right;
    /*padding-left : 50%;*/
}

#rt_close_popup, #rt_close_popupLmap{
    width : 5%;
    height: 5%;
    padding-left: 70%;

}
#rt_popupHeader, #rt_popupHeaderLmap{
    display :flex;
}
.extraMapSep {
    border-bottom: var(--th_border);
    margin-bottom : 2%;
}

.mapPrevSep {
    padding-bottom : 3%;
}

.rt_left_col {

    width :22%;


}
.noBorderElt {
    border : none;
}

a:link {
    color: var(--a_link);
}
  
a:visited {
    color:  var(--a_link);
}
  
a:hover {
    color: var(--a_link_hover);
}
  
a:active {
    color: var(--a_link_hover);
}

#raceBook {
    margin :2em;
}

#raceidTable,#raceidTable2 {
    margin-bottom: 3em;
}
table#raceidTable2>tbody>tr>td {
    text-align: center;
}


.td-graph {
    width : 50%;
    
    color: var(--border_color);
    padding : 0;
}

.td-graph>div {
    height : 200px;/*300px;*/

}
#bt_cleanGraph {
    margin: 1em;


}
tr.us_line>td>label, tr.us_line2>td>label , tr.us_line>td>input[type="checkbox"], tr.us_line2>td>input[type="checkbox"] {

    background-color: var(--bg_body_color);
}

tr.us_line3>td>label, tr.us_line3t>td>label, tr.us_line3b>td>label {

    background-color: var(--bg_body_color);
}

tr.highlightMe {
    border: 0.16em solid #b86dff;    
}

.cursorHelp {
    cursor: help;
}

#sel_Seperator {
    font-size: 14px;
}

.tagGatePassed {
    width:66px;
    line-height:1.2;
    text-align:center;
    margin:0 0 4px 0;
    border-radius:6px;
    background-color:#228B22;
    color:#FFF;
}

.top label[for=auto_router],
.top label[for=nmea_output],
.top label[for=color_theme] {
    cursor: pointer;
}

input[type="checkbox"] {
    cursor: pointer;
}