:root {
  --depth: 1.6px;
  --baseColor: #d4d0c8;

  --w95-hilite:    #ffffff; /* ButtonHighlight */
  --w95-light:     #dfdfdf; /* 3D Light */
  --w95-shadow:    #808080; /* ButtonShadow */
  --w95-dark:      #000000; /* ButtonDkShadow */
  --w95-text:      #000000; /* ButtonText */

}

.contentArea {  
	position: relative;
	border-style: solid;
	border-width: var(--depth);

	border-color: var(--w95-shadow) var(--w95-hilite) var(--w95-hilite) var(--w95-shadow);

	/*box-shadow:
		1.5px 0 0 #dddddd,
		0 1.5px 0 #dddddd,
		0 -1.5px 0 #666666,
		0 -3px 0 #999999,
		-1.5px 0 0 #666666,
		-3px 0 0 #999999;
	*/
}

.contentArea::before {
	position: absolute;
	content: " ";
	pointer-events: none;
	inset: 0px;

	border-style: inset;
	border-width: var(--depth);

	border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark) ;
}


.contentArea::after {
	position: absolute;
	content: " ";
	pointer-events: none;
	inset: 1px;

	border-style: solid;
	border-width: var(--depth);

	border-color: #000000 #ffffff #ffffff #000000 ;
}



body {
	background-color: #006588;
	font-family: monospace;
	font-size: 13px;
	font-weight: 600;

}

 {
	margin: 20px;
}

button {

	box-shadow:
		1.5px 0 0 #000000,
		0 1.5px 0 #000000;
	
	
	border-width: var(--depth);
	outline: none; /* disable default outline */

	background-color: var(--baseColor);
	border-style: outset;
	/*border-color: #eeeeee #ababab #ababab #eeeeee;*/
	border-color: var(--w95-hilite) var(--w95-dark) var(--w95-dark) var(--w95-hilite);

	position: relative;
	font-size: 12px;
	font-family: monospace;
	font-weight: 600;

	height: 28px;
	width: 120px;
}

button::before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0px;
    border-style: solid;
    border-width: var(--depth);
    border-color: var(--w95-light) var(--w95-shadow) var(--w95-shadow) var(--w95-light);
}
    


button:active, button.activeClicked {
	border-style: inset;

	background-color: #c2c0b8;

	border-width: var(--depth);

	border-color: var(--w95-dark) var(--w95-hilite) var(--w95-hilite) var(--w95-dark) !important; 
	padding-top: 3px;
	padding-left: 7px;

	box-shadow: none;

}

button:active::before, button.activeClicked::before {

	border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);

}

button:hover {
	outline-width: 1px;
	outline-style: dotted;
	outline-color: black;
}



button:disabled {
	background-color: #c3c3c3;
	padding: 0px;
	border-style: solid;
	border-color: #fdffff #818181 #818181 #fdffff;
}





button:focus::after {
	content: "";
    position: absolute;
    pointer-events: none;
    /* 3px inset: inside the bevel & padding, like Win95 */
    inset: 3px;
    border: 1.2px dotted var(--w95-dark);
}

button:focus:active::after {
	transform: translate(1px, 1px);
}



input {
	border-style: solid;
	border-width: var(--depth + 1);

	border-color: #444444 #eeeeee #eeeeee #444444;

	box-shadow:
		1.5px 0 0 #dddddd,
		0 1.5px 0 #dddddd,
		0 -1.5px 0 #666666,
		-1.5px 0 0 #666666,
		-1.5px 0 0 #999999;

}

input:focus {
	outline-style: none;
}

.window {
	position: absolute;
	opacity: 0;
	margin: auto;
	background-color: var(--baseColor);

	/*Windows 95 Style*/
	border-style: outset;
	border-width: calc(var(--depth));
	border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);


 	box-shadow:
		1px 0 0 #000000,
		0 1px 0 #000000

}

.window::before {
	content: "";
    position: absolute;
    pointer-events: none;
    inset: 0px;
    border-style: solid;
    border-width: var(--depth);
    border-color: var(--w95-hilite) var(--w95-shadow) var(--w95-shadow) var(--w95-hilite);

}

.window::after {
	content: "";
    position: absolute;
    pointer-events: none;
    inset: 1px;
    border-style: solid;
    border-width: var(--depth);
    border-color: var(--w95-light) var(--w95-shadow) var(--w95-shadow) var(--w95-light);	
}

.titleBar {
	margin: 1px;
	background-color: #000066;
	height: 28px;
}


.titleBarText {
	position: absolute;
	margin: 5px;
	font-weight: 800;
	color: white;
}

.xButton{
	font-weight: 1000;
	font-size: 12px;
	margin: 3px;
	height: 22px;
	width: 22px;
	float: right;

	position: relative;

	font-size: 14px;
	font-family: monospace;
	font-weight: 800;


}

.basicBlackText {
	margin: 4px;
	color: black;
}

.windowContent {
	margin: 6px;
	height: calc(100% - 38px);
}

.windowFooter {

}

/* ERROR*/

.errorText {

	margin: 2px;
	overflow-wrap: break-word;

	float:right;
	width: 73%;
	height: 100%;
}

.errorSymbol {
	float: left;
	height: 70px;
	width: 70px;

}

.okButton {
	position: relative;
	font-size: 10px;
	font-family: monospace;
	font-weight: 800;

	height: 24px;
	width: 90px;


	left: 38%;


}

.errorWindowError {

	height: 75%;
}