body {
  font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
  font-size: 20px;
  color: #000000;
  background-color: #AFEEEE;
}


.otsikko {  
  text-decoration: none;         
  font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
  font-size: 25px;  
  color: #000000;  
}


/* file upload button */
input[type="file"]::file-selector-button {
  border-radius: 4px;
  padding: 0 16px;
  height: 25px;
  cursor: pointer;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  transition: background-color 200ms;
}

/* file upload button hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #f3f4f6;
}

/* file upload button active state */
input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb;
}



input:invalid + span::after {
  color: #FF0000;
  font-weight: bold;
  content: " X";
}

input:valid + span::after {
  color: #007342;
  font-weight: bold;
  content: " !";
}




/* A link underline */
a.one:link {color:#191970;text-decoration:none;}
a.one:visited {color:#191970;text-decoration:none;}
a.one:hover {text-decoration:underline;}
}


/* A link underline */
a.two:link {color:#000000;text-decoration:none;}
a.two:visited {color:#000000;text-decoration:none;}
a.two:hover {text-decoration:underline;}
}


div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
 } 

div.c {
  text-align: right;
} 

div.d {
  text-align: justify;
} 



/* Thick black border */
hr.line1 {
  border: 3px solid #000000;
}

/* Thick black border */
hr.line2 {
  border: 2px solid #000000;
}

/* Thick black border */
hr.line3 {
  border: 1px solid #000000;
}


.keskita {
  margin-left: auto;
  margin-right: auto;
}


/* centering middle of the screen */
.centered {
 border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
  }



.blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%{     color: blue;    }
    49%{    color: blue; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: blue;    }
}



#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 99;
  font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #F58232;
  color: white;
  cursor: pointer;
  padding: 12px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}



.toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 62px;
  height: 32px;
  display: inline-block;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  outline: none;
  border: none;
  cursor: pointer;
  background-color: #707070;
  transition: background-color ease 0.3s;
}

.toggle:before {
  content: "on off";
  display: block;
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  background: #fff;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  font: 10px/28px Helvetica;
  text-transform: uppercase;
  font-weight: bold;
  text-indent: -22px;
  word-spacing: 37px;
  color: #fff;
  text-shadow: -1px -1px rgba(0,0,0,0.15);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

.toggle:checked {
  background-color: #4CD964;
}

.toggle:checked:before {
  left: 32px;
}



/* kopioi nappi */
.button-71 {
  appearance: none;
  background-color: #FFFFFF;
  border-radius: 40em;
  border-style: none;
  box-shadow: #ADCFFF 0 -12px 6px inset;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.24px;
  margin: 0;
  outline: none;
  padding: 10px 15px;
  quotes: auto;
  text-align: center;
  text-decoration: none;
  transition: all .15s;
  user-select: none;
  -webkit-user-select: auto;
  touch-action: manipulation;
}

.button-71:hover {
  background-color: #F58232;
  box-shadow: #FF6314 0 -6px 8px inset;
  transform: scale(1.125);
}

.button-71:active {
  transform: scale(1.025);
}

@media (min-width: 768px) {
  .button-71 {
    font-size: 20px;
    padding: .1200px 32px;
  }
}



/* paluu -nappi */
.button-72 {
  appearance: none;
  background-color: #FFFFFF;
  border-radius: 40em;
  border-style: none;
  box-shadow: #ADCFFF 0 -12px 6px inset;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.24px;
  margin: 0;
  outline: none;
  padding: 16px 21px;
  quotes: auto;
  text-align: center;
  float: right;
  text-decoration: none;
  transition: all .15s;
  user-select: none;
  -webkit-user-select: auto;
  touch-action: manipulation;
}

.button-72:hover {
  background-color: #FFC229;
  box-shadow: #FF6314 0 -6px 8px inset;
  transform: scale(1.125);
}

.button-72:active {
  transform: scale(1.025);
}

@media (min-width: 768px) {
  .button-72 {
    font-size: 24px;
    padding: .1200px 32px;
  }
}



/* laheta -nappi */
.button-73 {
  appearance: none;
  background-color: #FFFFFF;
  border-radius: 40em;
  border-style: none;
  box-shadow: #ADCFFF 0 -12px 6px inset;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.24px;
  margin: 0;
  outline: none;
  padding: 14px 20px;
  quotes: auto;
  text-align: center;
  float: center;
  text-decoration: none;
  transition: all .15s;
  user-select: none;
  -webkit-user-select: auto;
  touch-action: manipulation;
}

.button-73:hover {
  background-color: #F58232;
  box-shadow: #FF6314 0 -6px 8px inset;
  transform: scale(1.125);
}

.button-73:active {
  transform: scale(1.025);
}

@media (min-width: 768px) {
  .button-73 {
    font-size: 24px;
    padding: .1200px 32px;
  }
}




/* index languages nappi */
.button-74 {
  appearance: none;
  background-color: #FFFFFF;
  border-radius: 40em;
  border-style: none;
  box-shadow: #ADCFFF 0 -12px 6px inset;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.24px;
  margin: 0;
  outline: none;
  padding: 10px 15px;
  quotes: auto;
  text-align: center;
  text-decoration: none;
  transition: all .15s;
  user-select: none;
  -webkit-user-select: auto;
  touch-action: manipulation;
}

.button-74:hover {
  background-color: #F58232;
  box-shadow: #FF6314 0 -6px 8px inset;
  transform: scale(1.125);
}

.button-74:active {
  transform: scale(1.025);
}

@media (min-width: 768px) {
  .button-74 {
    font-size: 20px;
    padding: .1200px 15px;
  }
}



.form {
    font-size: 15px;
    font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
    background-color: #FFFFFF; border: 1px solid #006733; color: #000000;
    border: 1px solid #007342;
}

.form2 {
    font-size: 14px;
    font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
    background-color: #FFFFFF; border: 0px solid #006733; color: #000000;
    border: 0px solid #007342;
}

.input {
    font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
    border: 1px solid #006;
    background: #ffc;
}

.input:hover {
    font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
    border: 1px solid #f00;
    background: #ff6;
}

.input2 {
    float:center;
    font-size: 15px;
    font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
    border: 1px solid #006;
    background: #fc2c8d;
    text-decoration: none;
}

.input2:hover {
    float:center;
    font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
    font-size: 15px;
    border: 1px solid #f00;
    background: #ff6;
    text-decoration: none;
}

.buttonKirjaudu {
    border: none;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
    background-color: #E0E0E0; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 5px 10px;
}

.buttonKirjaudu:hover {
    border: none;
    background-color: #ffa20c; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 5px 10px;
}

.buttonLaheta {
    border: none;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
    background-color: #E0E0E0; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 5px 10px;
}

.buttonLaheta:hover {
    border: none;
    background-color: #BFFF00; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 5px 10px;
}

.buttonTakaisin {
    float: right;
    border: none;
    font-size: 16px;
    font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
    background-color: #E0E0E0; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 1px 7px;
}

.buttonTakaisin:hover {
    float: right;
    border: none;
    background-color: #ffa20c; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 2px 8px;
}

.button {
    border: none;
    font-size: 16;
    background-color: #E0E0E0; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 1px 7px;
}

.button:hover {
   border: none;
    background-color: #ffff80; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 2px 8px;
}

.button2 {
    float: right;
    font-size: 16;
    border: none;
    text-decoration: none;
    background-color: #E0E0E0; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 1px 7px;
}

.button2:hover {
    float: right;
    font-size: 16;
    border: none;
    text-decoration: none;
    background-color: #ffff80; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 2px 8px;
}

.button3 {
    float: center;
    font-size: 15;
    border: none;
    text-decoration: none;
    background-color: #E0E0E0; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 1px 7px;
}

.button3:hover {
   float: center;
   font-size: 15;
   border: none;
   text-decoration: none;
   background-color: #E0E0E0; border: 1px solid #006733; color: #000000; no-repeat top left;
   padding: 2px 8px;
}

.button4 {
    border: none;
    background-color: #E0E0E0; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 1px 7px;
}

.button4:hover {
   border: none;
    background-color: #ffff80; border: 1px solid #006733; color: #000000; no-repeat top left;
    padding: 2px 8px;
}

.button5 {
    float: right;
    border: none;
    background-color: #E0E0E0; border: 1px solid #006733; color: #000000; no-repeat top right;
    padding: 1px 7px;
}

.button5:hover {
    float: right;
   border: none;
    background-color: #ffff80; border: 1px solid #006733; color: #000000; no-repeat top right;
    padding: 2px 8px;
}

.button6 {
    float: right;
    border: none;
    background-color: #E0E0E0; border: 1px solid #006733; color: #000000; no-repeat top right;
    width: 10em;
    height: 2em;
    font-weight: bold;
    padding: 1px 7px;
}

.button6:hover {
    float: right;
    border: none;
    background-color: #ffff80; border: 1px solid #006733; color: #000000; no-repeat top right;
    width: 10em;
    height: 2em;
    font-weight: bold;
    padding: 2px 8px;
}

.valmisPUN:hover {
    float: center;
    font-size: 22;
    border: none;
    text-decoration: none;
    background:url('./kuvat/napit/nappipohjaPUN.jpg'); no-repeat top left;
    width:170px;
    height:40px;
}



.checkbox-input1 {
    width: 1.0em;
    height: 1.0em;
}


.checkbox-input2{
    width: 1.3em;
    height: 1.3em;
}


.checkbox-input3 {
width: 1.6em;
height: 1.6em;
}


.checkbox-input4 {
width: 1.9em;
height: 1.9em;
}


.checkbox-input5 {
width: 2.2em;
height: 2.2em;
}


.text-input1 {
font-size: 18;
font-weight: bold;
font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
background-color: transparent; border: 0px;
}



fieldset {
border: 3px solid #000000;
font-size: 16px;
font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
width: 18em
}

legend {
color: #fff;
font-size: 16px;
font-family: Gadugi, Verdana, Arial, Elephant, Tahoma, sans-serif;
background: #ffa20c;
border: 3px solid #FF0000;
padding: 3px 6px
}




/*---------------------------
 Kalenteri
---------------------------*/

#calframe {
 margin: 0px 0px 0px 0px;
}
.caltxt {
 display: block;
 width: 20px;
 height: 14px;
 padding: 3px 0px 3px 0px;
 color: #000;
 text-decoration: none;
 font-size: 11px;
}
.caltxt:hover {
 color: #000;
 text-decoration: none;
}
.caltxt_w {
 display: block;
 width: 20px;
 height: 14px;
 padding: 3px 0px 3px 0px;
 color: #FFF;
 text-decoration: none;
}
.caltxt_w:hover {
 color: #FFF;
 text-decoration: none;
}
.calarr {
 color: #000;
 text-decoration: none;
}
.calarr:hover {
 color: #888;
 text-decoration: none;
}

#new_varaukset_if {
 margin: 0px 0px 8px 0px;
 box-shadow: 0 8px 8px -8px #CCC;
}
.bshadow {
 margin: 0px 0px 8px 0px;
 box-shadow: 0 8px 8px -8px #CCC;
}

#kalenteri {
 font-size: 11px;
 font-family: Arial, sans-serif;
 width: 176px;
 margin: 0px 0px 0px 0px;
 padding: 18px 5px 20px 5px;
 border: 1px solid #BBB;
 background: #FFF;
 /*
 -moz-border-radius: 6px;
 border-radius: 6px;
 */
}
a.nro {
 color: #FFF;
}
a.nro:hover {
 color: #EEE;
}
td.kalenterihead {
 font-weight: bold;
 font-size: 16px;
 text-align: center;
 padding: 3px 0px 3px 0px;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px solid #999;
}
td.kalenteriheadkk {
 font-weight: bold;
 text-align: center;
 padding: 3px 0px 3px 0px;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px solid #999;
}
td.kalenteripv {
 width: 24px;
 font-weight: normal;
 text-align: center;
 font-size: 11px;
 padding: 3px 0px 3px 0px;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px solid #999;
 background: #FFF;
 color: #777;
}

td.kalenterinro_nohover {
 width: 24px;
 font-weight: normal;
 text-align: center;
 padding: 0px 0px 0px 0px;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px solid #999;
 background: #E3DFDC;
 cursor: default;
}
td.kalenterinro {
 width: 24px;
 font-weight: normal;
 text-align: center;
 padding: 0px 0px 0px 0px;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px solid #999;
 background: #E3DFDC;
}
td.kalenterinro:hover {
 background: #30A2DB;
}

td.kalenterinroa {
 color: #FFF;
 width: 24px;
 font-weight: normal;
 text-align: center;
 padding: 0px 0px 0px 0px;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px solid #999;
 background: #E50004;
}
td.kalenterinrona {
 color: #BBBFC0;
 width: 24px;
 font-weight: normal;
 text-align: center;
 padding: 0px 0px 0px 0px;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px solid #999;
 background: #F0F0EE;
}
/*eri väriset aktiiviset*/
td.kalenterinroanyk {
 color: #000;
 width: 24px;
 font-weight: normal;
 text-align: center;
 padding: 0px 0px 0px 0px;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px solid #999;
 background: #AAA;
}
td.kalenterinroasin {
 color: #FFF;
 width: 24px;
 font-weight: normal;
 text-align: center;
 padding: 0px 0px 0px 0px;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px solid #999;
 background: #24323B;
}