body {
    color: black;
    background-color: #C0C0C0;
}
.ctl { background: white; float: left; width: auto; margin:5px; border:2px; padding:5px}
.clear { clear: both}
.others { font-size: 60%; font-family: sans-serif}
.memories { font-size: 80%; font-family: sans-serif}
.scale{position:relative;}
.scaleabs{position:absolute;}
#edgelower:hover {background:url('edgelowerbb.png');}
#edgeupper:hover {background:url('edgeupperbb.png');}
#yellowbarr {background-color:yellow; top:2px; height:1px}
#yellowbara:hover #yellowbarr {top:2px; height:2px}
.hideblind { display:inline; }
.showblind { display:none; }
.statinfo0 { float:left; white-space:nowrap; position:relative; border-width:1px;border-style:solid;border-color:#ffc080; background-color:#cc8040;color:black;font-size:12px; }
.statinfo1 { float:left; position:relative; border-left-width:0px;border-right-width:2px;border-top-width:0px;border-bottom-width:2px;border-style:solid;border-color:black; }
.statinfo1:hover { z-index:98; }
.statinfo2 { overflow:hidden; border-width:0px; border-left-width:2px; border-style:solid; border-color:black;position:absolute; }
.statinfo2:hover { overflow:visible; }
.statinfol { background-color:#ffc080; }
.statinfo0l { float:left; white-space:nowrap; position:relative; border-width:1px;border-style:solid;border-color:#80ffc0; background-color:#40cc80;color:black;font-size:12px; }
.statinfo1l { float:left; position:relative; border-left-width:0px;border-right-width:2px;border-top-width:0px;border-bottom-width:2px;border-style:solid;border-color:black; }
.statinfo1l:hover { z-index:98; }
.statinfo2l { overflow:hidden; border-width:0px; border-left-width:2px; border-style:solid; border-color:black;position:absolute; }
.statinfo2l:hover { overflow:visible; }
.statinfoll { background-color:#80ffc0; }
input:not(:checked) + .keylist { display: none; }
input:checked + .keylist { display: block; }
.warning { color:red; font-weight:bold; border:2px; border-style:solid; border-color:black; background-color:white; margin:8px; padding:4px; display:none;  }

.nappimode {
    background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,245,140,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,245,140,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,245,140,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,245,140,1.00) 100%);
    font-family: quantico;
    font-style: normal;
    font-weight: 400;
    padding-left: 1px;
    padding-right: 1px;
}
.nappimode:hover {
    font-family: quantico;
    font-style: normal;
    font-weight: 400;
    padding-left: 1px;
    padding-right: 1px;
    background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 100%);
}

.nappi31 {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2ef556), color-stop(1, #fae60a));
	background:-moz-linear-gradient(top, #2ef556 5%, #fae60a 100%);
	background:-webkit-linear-gradient(top, #2ef556 5%, #fae60a 100%);
	background:-o-linear-gradient(top, #2ef556 5%, #fae60a 100%);
	background:-ms-linear-gradient(top, #2ef556 5%, #fae60a 100%);
	background:linear-gradient(to bottom, #2ef556 5%, #fae60a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ef556', endColorstr='#fae60a',GradientType=0);
	background-color:#2ef556;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	display:inline-block;
	cursor:pointer;
	color:#f50a15;
	font-family:Trebuchet MS;
	font-size:12px;
	padding:0px 0px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
.nappi31:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fae60a), color-stop(1, #2ef556));
	background:-moz-linear-gradient(top, #fae60a 5%, #2ef556 100%);
	background:-webkit-linear-gradient(top, #fae60a 5%, #2ef556 100%);
	background:-o-linear-gradient(top, #fae60a 5%, #2ef556 100%);
	background:-ms-linear-gradient(top, #fae60a 5%, #2ef556 100%);
	background:linear-gradient(to bottom, #fae60a 5%, #2ef556 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae60a', endColorstr='#2ef556',GradientType=0);
	background-color:#fae60a;
}
.nappi31:active {
	position:relative;
	top:1px;
}




.nappi10 {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
	background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
	background-color:#2dabf9;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	display:inline-block;
	cursor:pointer;
	color:yellow;
	font-family:Trebuchet MS;
	font-size:12px;
	padding:0px 0px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
	font-weight:bold;
}
.nappi10:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
	background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
	background-color:#0688fa;
}
.nappi10:active {
	position:relative;
	top:1px;
}

        





.nappich {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
	background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
	background-color:#2dabf9;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Trebuchet MS;
	font-size:12px;
	padding:0px 0px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
.nappich:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
	background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
	background-color:#0688fa;
}
.nappich:active {
	position:relative;
	top:1px;
}


/* Fullscreen overlay for modal background */
#active-popup {
  background-color: rgba(52,73,94, 0.7);
  position: absolute;
  width: 100%;
  heighT: 100% !important;
  top: 0;
  left: 0;
  z-index: 999;
}
/* Modal container */
#popup-container {
  width: 45%;
  height: 100%;
  margin: 0 auto;
  margin-top: 5%;
  position: fixed;
  left: 28%;
  z-index: 999;
  top: 0;
  display: none;
  background: #E74C3C;
}
.modal-content {
  position: relative;
  text-align: center;
}
#popup-window { position: relative; }
.modal-content h1, .modal-content p { color: #fff; } .modal-content p { padding: 20% 5% 0 5%; } /* Close button */
#popup-container a.close {
  position: relative;
  float: right;
  top: -15px;
  right: -7px;
  z-index: 99;
  font-weight: bold;
  font-size: 16px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  padding: 2px 5px 2px 6px;
  line-height: 1em;
  text-align: center;
  background: #E74C3C;
  border: 4px solid #fff;
  cursor: pointer;
  color:#fff;
}
#popup-container a.valinta {
text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  padding: 2px 5px 2px 6px;
  line-height: 1em;
  text-align: center;
  background: #E74C3C;
  border: 4px solid #fff;
  cursor: pointer;
  color:#fff;
}


.taajuusinput {
    border: 1px solid #000000;
    font-size: 30px;
    font-family: quantico;
    font-style: normal;
    font-weight: 400;
    background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,245,140,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,245,140,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,245,140,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,245,140,1.00) 100%);
    letter-spacing: 4px;
    width: 98%;
}




/* Updated Notice Styles */
.notice {
    margin: 20px 0; /* Adds vertical spacing; removes horizontal auto-centering */
    padding: 15px;
    max-width: 989px; /* Sets maximum width */
    background-color: #add8e6;
    border: 2px solid #b3b3b3; /* Softer border color */
    border-radius: 8px;
    font-size: 1.1em;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.notice:hover {
    background-color: #d5d5d5; /* Slightly darker gray on hover */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

.notice a {
    color: #0056b3; /* Softer blue for links */
    text-decoration: none;
    font-weight: bold;
}

.notice a:hover {
    text-decoration: underline;
    color: #003974; /* Darker blue on hover */
}