#messages {position: fixed; right: 15px; top:70px; z-index: 10000; padding: 0px;}
#messages .message {width:320px; color:black; margin:0px 0px 5px 0px; padding:5px 4px 4px 40px; //max-height:120px; min-height:32px; box-sizing:border-box; background: #42bcf4 url('/graphics/ui/message-info.png') top left no-repeat; font-size:10.5pt;line-height:22px;cursor: default;}
#messages .message.hidden {overflow:hidden; min-height:0px; max-height:0px; padding-top:0px; padding-bottom:0px; opacity:0; margin-bottom:0px; transition: all 1s ease-in}
#messages .message.good {background: #9be244 url('/graphics/ui/message-good.png') top left no-repeat}
#messages .message.bad {background: #e26944 url('/graphics/ui/message-error.png') top left no-repeat;}
#messages .message.loading {background: #f2da91 url('/graphics/ui/message-loading.gif') top left no-repeat;}


div.tip {background-color: #444; position: absolute; color: #eee; padding: 15px; border-radius: 4px; margin: 25px; min-height: 20px; max-height: 500px; max-width:260px; overflow-y: scroll;}
.tip::before {content: ""; width: 0px; height: 0px; border: 10px solid transparent; position: absolute;}
.tip.right::before {left: -20px; top: 50%; border-right: 10px solid #444; margin-top: -10px;}
.tip.below::before {left: 50%; top: -20px; border-bottom: 10px solid #444; margin-left: -10px;}
div.tip input {max-width: 235px;}
div.tip a {color: white}


/*CSS for sliders (no js, just use a check box thus:)
<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>
*/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.switch .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px;}

.switch .slider:before {position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s;  border-radius: 50%;}

input:checked + .slider {background-color: #f90;}
input:focus + .slider {box-shadow: 0 0 1px #f90;}
input:checked + .slider:before {transform: translateX(26px);}