body,
input,
select,
textarea,
button {
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	background-color: #efefef;
	color: #2196CA;
	font-weight: 100;
	font-size: 15px;
}

.sivu {
    max-width: 1200px;
	position: relative;
	margin: auto;
    border: 0px solid #D4D4D6;
}

.kehys .sisaltokehys { /* sivun muuttuva alue */
        border: 0px solid #D4D4D6;
		padding: 3px;
		background: white;
}

.ulkokehys {
	border: 0px solid red;
	position: relative;
    margin: auto;
    margin-top: 0px;
	padding: 0px;
	max-width: 100%;
	min-width: 120px;
	background-color: #00A6E9;
}

.keskikehys {
    border: 0px solid blue;
	border-radius: 0px 0px 31px 31px;
	box-shadow: 0px 0px 13px rgba(0,78,122,0.5), 0px 0px 13px rgba(0,78,122,0.5);
    max-width: 100%;
	min-width: 120px;
    position: relative;
    margin-left: 2px; 
    padding: 5px;
    background-color: white;
}

.alareuna {
	border: 0px solid;
	margin-top: 5px;
	vertical-align: middle;
	text-align: center;
	font-size: smaller;
	max-width: 100%;
	color: #505050;
	background-color: white;
}

.menurivi {
    max-width: 800px;
    text-align: right;
	margin-left: 12px;
}
.otsikko {
	font-weight: bold;
    font-size: large;
    font-weight: bold;
    background-color: white;
    color: black;
	
}
.otsikkovahva {
    font-weight: bold;
    font-size: larger;
    background-color: white;
    color: black;
	margin: 3px;
}

.syotto {
	color: Black;
	background-color: white;
	margin-left: 10px;
	border-radius: 4px 4px;
}

.keski
{
    margin-left: 0px;
}

.pudotusvalikko {    
	width: 200px;
	font-weight: normal;
	background-color: white;
	color: black;
	margin-left: 10px;
	font-size: 1.2em;
}	
.labelIlmoitus {
	color: #505050;
	max-width: 90%;
	min-width: 100px;
	font-weight: bolder;
	text-align: center;
	font-size: smaller;
	margin-top: 10px;
	margin-bottom: 10px;
}
.ilmobox {
	background-color: white;
	border-style: solid;
	border-width: thick;
	border-color: #1e448d;
	padding: 5px;
}

.labelHuomautus {
	color: #505050;
	font-weight: normal;
	padding: 20px;
}

.labelHuomautusKesk {
	color: #505050;
	font-weight: normal;
	font-size: 1.2em;
	text-align: center;
	min-width: inherit;
	padding: 4px;
}

/* pbNappula-tyylit perityvät tästä luokasta */
[class*="pbNappula"] {
    margin: 3px;
    min-width: 120px;
    max-width: 350px;
    background-color: #33A3DC;
    color: #FFFFFF;
    border-style: solid;
    border-color: #017AFE;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 2px;
    padding-bottom: 2px;
    align-self: flex-end;
}

[class*="pbNappula"][value^="Black Friday"] {
	color: coral;
	border-color: coral;
	background-color: black;
}

[class*="pbNappula"][value^="Black Friday"]:hover {
	color: black;
	border-color: black;
	background-color: coral;
}

[class*="pbNappula"][value$="€"] {
	font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Adding shadow to the text */
	border-width:3px;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
}

[class*="pbNappula"][value$="€"]:hover {
	border-color: #017AFE;
}

.pbNappulaMiksiValittu:hover {
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
}

.pbNappula {
	font-weight: bold;
	font-size: large;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.pbNappula:hover,
.pbNappulaMiksi:hover {
	background-color: #8ECAEC;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
}

.pbNappulaIso {
	font-size: x-large;
	margin: 2px;
}

.pbEiValittu {
	margin: 5px;
	min-width: 120px;
	background-color: #FFFFFF;
	color: #009ee3;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
	border: 0px thin #D4D4D6;
	padding: 3px;
}

.pValittu {
	margin: 5px;
	min-width: 120px;
	background-color: #009ee3;
	color: #FFFFFF;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
	border: 0px thin #D4D4D6;
	padding: 3px;
}

.pbNappulaMenu {
	margin: 3px;
	background-color: #33A3DC;
	color: #FFFFFF;
	border-style: solid;
	border-color: inherit;
	border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
	align-self: flex-end;
}

.pbNappulaMenu:hover {
	background-color: #8ECAEC;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
}
.pbNappulaMiksi {
 
}
.pbNappulaMiksiValittu {
    background-color: #2b77bd;
 
}

.pbNappulaMiksiKamp {
     color: gold;
    font-style: italic;
    font-weight: bold;
    border-style: solid;
 }

.pbNappulaVid {
	margin: 3px;
	min-width: 180px;
	
}
.pbNappulaVid:hover {
	background-color: #8ECAEC;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
}
.pbNappulaVidValittu {
	background-color: #2b77bd;
	min-width: 180px;
}

.pbNappulaAnonyymi { /* suoraan vaipaiden aikojen katseluun */
	vertical-align: middle;
	font-weight: bold;
	min-width: 100px;
	max-width: 75%;
	margin: auto;
	background-color: #33A3DC;
	color: white;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
	border: 0px solid white;
	padding: 6px;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
}

.pbNappulaAnonyymi:hover {
	background-color: #8ECAEC;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
}

.tpteksti {
	min-width: 300px;
	font-size: small;
	margin: 1px;
	background-color: white;
	color: white;
	border-style: none;
	border-color: #009FE3;
	align-self: center;
}
.txtotsikko {
	font-weight: bold;
	font-size: x-large;
	text-transform: uppercase;
	color: buttontext;
	background-color: #505050;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: none;
}

.varaaja
{
	font-size:x-small;
	font-Weight: bold;
	text-align: right;
	
}


.labelError
{
	color: white;
	background-color: red;
}


.nappularivi
{
	vertical-align: middle ;
	position: absolute;
	right: 5px;
}

.av_otsikko
{
	font-size: larger;
	color: gray;
	font-family: Verdana, Sans-Serif;
}
.pbInfo
{
	font-size: small
}


.roundedPanel
{	
	width:300px;
	background-color:red; 
	color:white;
	font-weight:bold;
}
.lisatietoikkuna
{
	background-color:White;
	color:Black;
}

/*  kalenterin tyylit */
.kalenteri {  
	background-color: white;  
	width: 200px;  
	color: black;
}  

.kalenteri a {
	text-decoration: none;  
}

.kalenteri .kalenteriTitle {  
	font-weight: bold;  
	background-color: #cec9c9;
}

.kalenteri .kalenteriNextPrev {  
	text-align: center;  
}

.kalenteri td.kalenteriSelector {  
	background-color: #dddddd;  
}

.kalenteri .kalenteriDay a,   
.kalenteri .kalenteriSelector a,  
.kalenteri .kalenteriNextPrev a {  
	display: block;  
	line-height: 18px;  
}  


/* --- gridin tyyli */

.mGrid { 
	max-width: 1000px;
	background-color: #fff; 
	border: solid 1px #525252; 
}

	.mGrid td {
		padding: 5px;
		border: solid 1px #c1c1c1;
		color: #2196CA;
		
	}


/* otsikko */

.mGrid th { 
	padding: 4px 2px; 
	color: #fff; 
	background: #008ED0; 
	border-left: solid 1px #525252; 
	
}
.mGrid .alt { background: #efebeb; }
.mGrid .pgr { background: #dddddd; }
.mGrid .pgr table { margin: 5px 0; }
.mGrid .pgr td { 
	border-width: 0; 
	padding: 0 6px; 
	border-left: solid 1px #666; 
	font-weight: bold; 
	color: #fff; 
	line-height: 12px; 
 }   
.mGrid .pgr a { color: #666; text-decoration: none; }
.mGrid .pgr a:hover { color:aqua; text-decoration: none; }

.Pikahaku {
	border-width: initial;
	border: solid;
	font-weight: normal;
	color: cornflowerblue;
	display: flex;
	align-items: center;
	justify-content: center;
}


#Pikahaku {
	visibility: hidden;
}


.piilo {
	width: 1px;
	font-size: xx-small;
	padding: 0px;
	border: none;
	color: white;
}

/* varauksen tiedot taulukko*/
.varaustxt {
	font-weight: normal;
	font-size: inherit;
	font-family: Monospace, 'Courier New';
}
.vahvistusaikaArvo {
	font-weight: bold;
	font-size: larger;
	padding: 10px;
}
.card-footer {
	background-color: inherit;
	border: none;
}

input[type='submit'][id$='pbVahvista']{
	margin-left: 5%;
}