:root {
  --mainclair: rgb(102,151,201);
  --main: rgba(51,91,131,1);
}
* {
	font-family:sans-serif;
}
*:required {
    background-color: lightred;
	border-color:red;
}
body {
  font-family:Arial, Helvetica, sans-serif;
  margin:00px;
  margin-top:80px;
  background-color:white; /* lightgrey */
  font-size:12pt;
}
.headtools {
  position:fixed;
  top:40px;
  width:100%;
  z-index:100;
}

.header {
  font-size:30px;
  background:white;
  color:var(--main);
  margin:0px;
  position:fixed;
  top:0;
  width:100%;
  height: 40px;
  z-index:100;
  border-bottom:1px solid var(--main);
  font-weight:bolder;
  overflow:hidden;
}
.header a {
    text-decoration:none;
    font-weight: bolder;
    color:var(--main);
}
.menu {
  width:50px;
  height:50px;
  background-color:var(--main);
  color:white;
  padding:5px;
  padding-left:10px;
  margin-right:5px;
}
.subtitle {
  font-weight: 100;

  font-size:medium;
  border-left:1px dotted var(--main);
  padding-left:10px;
  padding-right:10px;
}
.subtitle a {
  color:var(--main);
  text-decoration: none;
}

#topnav {
  display: none;
  background: var(--mainclair);
  color:var(--main);
  border-bottom:1px solid var(--main);
  font-weight: 100;
  margin-top:0px;
}

#topnav a {
  color:white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

#topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

#topnav a:hover {
  background-color: var(--main);
}

.colheaders {
	background-color:var(--mainclair);
    color:white;
}
.colheaders * {
	/*font-weight:bold;*/
}
.itm {
	float: left;
	width:100%;
	border-bottom:1px solid lightgrey;
}
.col0 {
	float:left;
	width:30px;
}
.col1, .col2 {
	float:left;
	width:45%;
}
.to {
	margin-left:20px;
}
.dir {
	background-color:lightyellow;
    cursor:pointer;
}

.changed {
	background-color:lightgreen;
}

.same {
	display:none;
}
.toolactive {
	background-color:var(--mainclair);
	color:white !important;
	font-weight:bold;
	text-decoration: underline dotted;
}
#tabs {
	clear:left;
	margin:5px;
	margin-top:90px !important;
}
.ui-tabs-panel {
	padding:5px !important;
}
.ui-tabs-anchor {
	padding:5px !important;
}
.footer, .footer a {
	padding-top:10px;
	font-size:x-small;
	text-align:center;
	color:lightgrey;
}
.incdec {
	width: 30px;
}
.toolbar {
    padding:5px;
    clear:right;
    display:block;
    background-color:white;
    border-bottom:1px solid lightgrey;
}
.tool {
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
    background-color:#f9f9f9;
    border-radius:4px;
    border:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:#666666;
    font-family:Arial;
    /*padding:6px 6px;*/
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
    margin:2px 1px 2px 0px;
    padding:3px;
    text-align: center;
}
.tool img {
    width:20px;
}
    .tool:hover {
    background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
    background-color:#e9e9e9;
}
.red {
    background-color:red;
}
.parammenu {
    margin:0px;
    padding:0px;
    list-style:none;
}
.parammenu li {
    margin:0px;
    padding:10px;
    border-bottom:1px solid #c0c0c0;
    background: rgb(224,224,224);
    /*background: linear-gradient(0deg, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 100%);*/
}
.parammenu a {
    text-decoration: none;
    color:black;
}
/* ----------------- Mobile -------------- */
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .col0 {
	float:left;
    width: 30px;
  }
  .col1 {
	padding-top:5px;
	float:left;
	width:calc(100% - 30px);
	inline-size: calc(100% - 30px);
    overflow-wrap: break-word;
    hyphens: manual;
	}
  .col2 {
	padding-left:30px;
	clear:left;
	width:auto;
}
  .chkitem {
	float:left;
	display:block;
	width:20px;
	height:20px;
  }
}