: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;

  }
  
  
  body {
    font-family: monospace;
    word-wrap: break-word;
    background-color: var(--bg_body_color);
    color: var(--body_color);
    
   /* background-color: black;*/
    margin: 0px;
  }

  table {
    border-spacing: 0px;
    border: 0px;
    width: 100%;
  }

  th.value {
    color: darkgrey;
    text-align: center;
    font-weight:bold;
    font-size: 16px;
    width: 100%;
    color: azure;
  }

  td.value, td.value2, td.value3, td.sailvalue {
    color: darkgrey;
    text-align: center;
    font-weight:bold;
    font-size: 20px;
    width: 100%;
    color: azure;
  }
  td.value2 {
    font-weight:normal;
    font-size: 10px;
    width: 50%;
    line-height: 8px;
    padding: 0px;
  }
  td.value3 {
    font-weight:normal;
    font-size: 10px;
    width: 50%;
    line-height: 8px;
  }
  td.sailvalue {
    line-height: 14px;
  }
  td.sticker {
    color: darkgrey;
    text-align: center;
    font-weight:normal;
    font-size: 10px;
  }
  textarea.value2:focus {
    outline: none;
  }
  textarea.value2 {
    font-weight: normal;
    font-family: system-ui, sans-serif;
    font-size: 10px;
    width: 100%;
    height: 1em;
    line-height: 1em;
    
    background-color: var(--bg_body_color);
    border-color: black;
    color: azure;
    border-style: none;
    cursor: pointer;
    resize: none;
    text-align: center;
    vertical-align: bottom;
    margin: 0px;
    display: table-cell;
  }

  .compass {
    position: relative;
    width: 155px;
    height: 155px;
    margin: auto;
  }

  .compass > .arrow {
    position: absolute;
    top: 20px;
    left: 77.5px;
    height: 105px;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: red transparent transparent transparent;
    transform: translate(-10px, 0px) rotate(0deg);
    z-index: 1;
  }

  .compass > .compass-circle {
    position: absolute;
    width: 155px;
    height: 155px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out;
    background: url(./../img/compass.png)
      center no-repeat;
    background-size: contain;
  }

  .compass > .boat {
    opacity: 1;
    width: 60px;
    height: 60px;
    background: url(./../img/boat.svg)
      center no-repeat;
    border-radius: 0%;
    transition: opacity 0.5s ease-out;
    transform: translate(47.5px, 47.5px);
    background-size: contain;
    z-index: 2;
  }

  button {
    vertical-align: middle;
    font-size: 10px;
    margin: 0px;
  }