:root {
  /* Color */
  --text-color: #222222;
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;
}


* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    list-style: none;
}



@font-face {
  font-family: w95; /* set name */
  src: url(font/w95f.woff); /* url of the font */
}
body {
  margin: 0;
  padding: 0;
  background-color:#008083;
}
table, th, td {
  /*border: 1px solid black;*/
}

ui-widget-overlay {
  background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg") !important;
  background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg") !important;
  background-color: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg") !important;
  background-position: center;
  background-repeat:no-repeat;  
}

.ui-button .ui-icon {
	background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");

}

.ui-dialog-titlebar-close {
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-right-color: #424242;
border-bottom-color: #424242;
background: silver;
color: black;
padding: 0 0 4px;
border-radius: 1px;
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-color: #c0c0c0;
background-position: center;
background-repeat:no-repeat;
margin-left:2px;

}

.ui-icon-closethick {
  border-width: 2px;
  border-color: buttonface;
  border-right-color: #424242 ;
  border-bottom-color: #424242;
  background: silver;
  color: black ;
  border-radius: 1px;
  background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg")!important;
  background-position: center;
  background-repeat:no-repeat;
  margin-left:2px;
}

.ui-icon-closethick:hover {
  border-right-color: #424242 ;
  border-bottom-color: #424242;
  color: black !important;
  border-radius: 1px;
}

.ui-dialog {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background: var(--surface);
  padding: 3px;
  border-radius: 0px ;
}

.ui-dialog-title {
  color: white;
  font-family: w95;
  float: left;
  margin: .1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-dialog-titlebar {
  background: linear-gradient(
    90deg,
    var(--dialog-blue),
    var(--dialog-blue-light)
  );
  
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0px;
}



.ui-dialog-buttonset{
background: silver;
  border: none;
  border-radius: 0;
  box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;
  box-sizing: border-box;
  color: transparent;
  min-height: 23px;
  min-width: 75px;
  padding: 0 12px;
  text-shadow: 0 0 #222;
}

.ui-dialog .ui-dialog-buttonpane{
  background-color: silver;
  border: silver;
  padding:0%;
  margin: 0%;
  & button {
    background-color: silver ;
    border: silver;
    padding:0%;
  }

}



.unstyled-button {
  border: none;
  padding: 0;
  margin: 10%;
  background-color: transparent;
  font-family: w95;
  font-size: larger;

}

.unstyled-button:active {
  background-color: #008083;
  border-color:#bbbbbb
  box-shadow(5px 10px inset) ;
  transform: scale(0.97);
}

.start-button {
  text-align: center;
  position: relative;
  border: none;
  padding: 0;
  background-color: transparent;
  width:100%;
  height:100%; 
  padding-top: 5%; 
  padding-left: 5%;
}
.start-button:active {
  background-color: #c2c2c2;
  border-color:#c2c2c2
  box-shadow (5px 10px inset);
  transform: scale(0.97);
}

.bar-button {
  position: sticky;
  border-style: none;
  width: 100%;
  margin-right: 0.75vw;
  padding-top: 1vh;
  padding-left: 0.75vw;
}

.bar-button:active {
  background-color: #c2c2c2;
  border-color:#c2c2c2
  box-shadow (5px 10px inset);
  transform: scale(0.97);
}


h2, p {
  margin: 0.75vw;
}

ul {
  list-style-type: none;
  position:fixed;
    bottom:0;
    width: 100%;
  margin: 0;
  padding: 0;
  background-color: #c2c2c2;
  display: flex;
  justify-content: left;
  
}