input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now your own custom styles */
   height: 14px;
   width: 14px;
   display: block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;

  /* icon size */
  background-size: 14px;

}

a:link    { color:black; }
a:visited { color:gray;  }
a:focus   { color:black; }
a:hover   { color:black; }
a:active  { color:black; }
input[type="number"] {
  width:50px;
}
.align_right { text-align: right; }

#myInput {
  /*background-image: url('../media/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;*/
  width: 75%;
  font-size: 16px;
  /*padding: 12px 20px 12px 40px;*/
  padding: 12px 20px 12px 20px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

h1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop( 50%, #FFF), color-stop(50%, #FFF), to(#FFF));*/
  background-color: #E5E5E8;
  color: #F1F2F6;
}

.button{
  -webkit-box-shadow: 0px -1px 1px #666, 0px 1px 1px #777;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0079FE), color-stop( 50%, #0079FE), color-stop(50%, #0079FE), to(#0079FE));
}

.button-bold{
  -webkit-box-shadow: 0px -1px 1px #666, 0px 1px 1px #777;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#AEAEB2), color-stop( 50%, #AEAEB2), color-stop(50%, #AEAEB2), to(#AEAEB2));
}

body {
  background: url(../media/bg-dark.png);
  background-color: #F1F2F6;
}

.protectedMessageDiv{
  background-color: #FFFFFF;
}

@media (prefers-color-scheme: dark) {

  :root {
    color-scheme: light dark; /* both supported */
  }

  a:link    { color:gray;     }
  a:visited { color:darkgray; }
  a:focus   { color:gray;     }
  a:hover   { color:gray;     }
  a:active  { color:gray;     }
  
  #myInput {
    background-color: #595959;
    color: white;
    /*background-image: url('../media/searchicon-transparent.png');*/
  }
  
  body {
    background: url(../media/bg-dark.png);
    background-color: #222;
  }

  h1 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666), color-stop( 50%, #888), color-stop(50%, #888), to(#999));
  }

  input{
    background-color: #595959;
    color: white;
  }
  
  li{
    background-color: #595959;
    color: white;
  }

  li.arrow{
    background-image: url(../media/arrow.png);
    background-position: right center;
    background-repeat: no-repeat;  
  }
  
  .protectedMessageDiv{
    background-color: #595959;
    color: white;
  }

  .button{
    -webkit-box-shadow: 0px -1px 1px #666, 0px 1px 1px #777;
    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#555), color-stop( 50%, #888), color-stop(50%, #888), to(#999));*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0079FE), color-stop( 50%, #0079FE), color-stop(50%, #0079FE), to(#0079FE));
  }

  .button-bold{
    -webkit-box-shadow: 0px -1px 1px #666, 0px 1px 1px #777;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#555), color-stop( 50%, #888), color-stop(50%, #888), to(#999));
  }
}