body {
    max-width:        800px;
    margin-left:      auto;
    margin-right:     auto;
    padding-left:     10px;
    padding-right:    10px;
      font-family:      Verdana, Arial, sans-serif;
      font-size:        13px;
    background-color: #f0f0f0;
  }
  
  h1 {
    font-size:     24px;
    font-weight:   normal;
    margin-top:    0;
    margin-bottom: 5px;
    color:#747474
  }
  
  input, select, textarea {
    box-sizing: border-box;
  }
  
  #topbar {
    height:              70px;
    width:               100%;
    overflow:            hidden;
    margin-bottom:       10px;
    text-align:          center;
    background-repeat:   no-repeat;
    box-shadow:          1px 1px 5px #aaa;
  }
  
  #left-content {
    float:         left;
    padding-top:   4px;
    padding-right: 10px;
  }
  
  #left-content li {
    background-color: #cde2e9;
    font-size:        13px;
    border:           solid 1px #000000;
    margin-bottom:    1px;
    transition:       background-color 200ms;
  }
  
  #left-content li:hover {
    background-color: #7993a2;
    cursor:           pointer;
  }
  
  #left-content li.selectedItem {
    background-color: #7993a2;
  }
  
  #left-content a {
    display:         block;
    width:           calc(100% - 8px);
    padding:         4px;
    color:           #000000;
    text-decoration: none;
  }
  
  
  #unitSelector {
    display:      none;
    width:        100%;
    margin-right: 10px;
  }
  
  @media (min-width: 551px) {
    #topbar {
      background-size:     200px, cover;
      background-position: right;
    }
    #left-content {
      display: block;
    }
  
    #unitSelector {
      display: none;
    }
  }
  
  #yellowBar {
    width:            100%;
    height:           4px;
    background-color: #cde2e9;
    border:           solid 1px #000000;
    margin-bottom:    10px;
  }
  
  #title {
    width:            100%;
    position:         relative;
    padding:          3px 0 3px 0;
    background-color: #7993a2;
    text-align:       center;
    font-size:        21px;
    letter-spacing:   0.3em;
    border-left:      1px solid #000000;
    border-right:     1px solid #000000;
  }
  
  @media (max-width: 550px) {
    h1 {
      font-size:     18px;
      margin-top:    0px;
      margin-bottom: 5px;
    }
  
    #topbar {
      height:              50px;
      background-size:     cover, cover;
      background-position: center;
    }
  
    #title {
      font-size: 18px;
      padding:   1px 0 1px 0;
    }
  
    #yellowBar {
      margin-bottom: 5px;
    }
  
    #left-content {
      display: none;
    }
    #unitSelector {
      display: block;
    }
  }
  
  #insyght4Life_logo {
    height:  85%;
    margin:  5px;
    opacity: 0.8;
    border:  none;
  }
  
  #orangeBar {
    width:            100%;
    height:           4px;
    background-color: #4e606c;
    border:           solid 1px #000000;
  }
  
  #main-content {
    overflow: auto;
  }
  
  #selectQuantity {
    width: 100%;
  }
  
  #unitCaption {
    font-weight: bold;
  }
  
  #calculator {
    width:     100%;
    float:     right;
  }
  
  #conversionInfo {
    display:         none;
    align-items:     center;
    justify-content: space-between;
    font-size:       8px;
  }
  
  .selectOption {
    height:    25px;
    font-size: 15px;
  }
  
  .inputNumber {
    width:        100%;
    height:       25px;
    font-size:    15px;
    margin-right: 10px;
  }
  
  .inputOption {
    width: 100%;
  }
  
  .unitLeft {
    height:   100%;
    width:    38%;
    float:    left;
    padding:  0 5px 0 0;
  }
  
  .unitRight {
    overflow: auto;
    height:   100%;
  }
  
  .unitCaption {
    background-color: #7993a2;
    position:         relative;
    border-left:      1px solid #000000;
    border-top:       1px solid #000000;
    border-right:     1px solid #000000;
    padding:          5px;
    margin-top:       10px;
    font-size:        15px;
  }
  
  .unitArea {
    background-color: #cde2e9;
    border:           1px solid #000000;
    padding:          5px;
  }
  
  .rightButton {
    position:   absolute;
    right:      5px;
    display:    inline-block;
    width:      18px;
    text-align: center;
    cursor:     pointer;
    z-index: 10; /* Ensure it's above other elements */
    border-radius: 50%;
  }
  
  .rightButton img {
    opacity: 0.9;
    height:  20px;
  }
  
  .rightButton:hover img {
    opacity: 1;
  }
  
  #listQuantities {
    padding:     0;
    margin:      0;
    list-style:  none;
    user-select: none;
  }
  
  .infoVenster {
    display:          none;
    position:         relative;
    border:           solid 1px #CCCCCC;
    background-color: #f0f0f0;
    margin-top:       30px;
    padding:          3px;
    max-height:       450px;
    font-size:        11px;
    overflow:         auto;
    transition:       max-height 0.5s;
  }

  .infoVenster ul {
    margin-top:   5px;
    padding-left: 15px;
  }
  
  .popupCloseCross {
    position:         absolute;
    right:            5px;
    top:              5px;
    height:           13px;
    width:            13px;
    background-image: url("images/close.png");
    overflow:         hidden;
    text-indent:      -100px;
    opacity:          0.7;
  }
  
  .popupCloseCross:hover {
    opacity: 1;
  }
  
  .infoTitle {
    font-size:     15px;
    margin-bottom: 5px;
    color:         #272727;
    text-transform: uppercase;
  }
  
  .infoSubTitle {
    font-family: Roboto, Arial, sans-serif;;
    font-weight: bold;
    font-size:   11px;
    margin-top:  10px;
  }
  
  .footer {
    margin-top:      20px;
       text-decoration: none;
    text-align:      center;
    font-size:       10px;
  }
  
  .footer a {
    color:           #747474;
    text-decoration: none;
  }
  
  .footer a:hover {
    text-decoration: underline;
  }
  
  .image-right {
      clear:  right;
      float:  right;
      margin: 0 0 5px 5px;
  }
  
  #settings {
    display:          none;
    z-index:          2147483647;
    position:         absolute;
    top:              25px;
    right:            -10px;
    width:            170px;
    padding:          0;
    margin:           0;
    background-color: #f0f0f0;
    border:           1px solid #000000;
    letter-spacing:   0;
    text-align:       left;
  }
  
  #settingsTitle {
    padding:          5px;
    font-size:        15px;
    background-color: #7993a2;
    border-bottom:    1px solid #000000;
  }
  
  #settingsMain {
    font-size:        13px;
    padding:          5px;
    background-color: #cde2e9;
  }
  
  #settings input {
    width:     100px;
    height:    25px;
    font-size: 15px;
  }
  
  #imageRefresh {
    cursor: pointer;
    height: 20px;
  }
  
  #imageRefreshProgress {
    display:     none;
    position:    relative;
    top:         3px;
    margin-left: 5px;
    opacity:     0.7;
    cursor:      pointer;
  }
  
  .animateRotate {
    animation: rotate 1s linear infinite;
  }
  
  #imageRefresh:hover, #imageRefreshProgress:hover {
    opacity:  1;
  }
  
  @keyframes rotate {
    100% {transform:rotate(360deg);}
  }

  #language-switcher-container {
  position: absolute;
  top: 5px;
  right: 60px;
  z-index: 100;
}

#language-switcher {
  padding: 5px;
  border-radius: 4px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  font-size: 12px;
}