@import url('https://fonts.prod.extra-cdn.com/css?family=Droid+Sans:400,400italic,700,700italic|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Signika:300,400,500,600,700&subset=latin,latin-ext,cyrillic-ext,greek,greek-ext,cyrillic&display=swap');

body,
input,
select,
textarea {
	font-size: 16px;
	font-family: 'Roboto', Open Sans, sans-serif;
	font-weight: normal;
	background-color: white;
    color: rgb(34, 34, 34);
	line-height: 1.5;
}

body {
  /*background-image: url('Kuvat/As/HammaslkriasemaAdent-Isolinnankatu-001.jpg');
  transition: "background-image 3s";*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

h1, h2, h3, h4, h5, .otsikko{
    font-family: 'Droid Sans';
}

h3 {
	font-Weight: bold;	
}

.sivu {
    max-width: 980px;
	position: relative;
	margin: auto;
	overflow: hidden;
	padding: 0px;
	border: 0px solid #cccccc;
}

.img-fluid {
	max-height: 100px;
	background-color: white;
	margin: 8px;
}

input[type="image"][name$="imgLogo"]{
    max-height: 75px;
}

.sisaltokehys {
    flex: 1;
	margin-top: 0px;
	position: relative;
	padding: 20px;
	background-color: rgba(255,255,255,0.7);
	width: 100%;
}

.sisaltokehys:after {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: calc(100% - 10px);
    border-top: 2px solid rgb(89, 89, 89);
}

.kehys {
    max-width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    min-height: 95vh;
    position: center;
    margin-left: 0px;
    padding: 0px;
}

.menurivi {
	margin-left: 5px;
	margin-right: 5px;
    width: 100%;
    text-align: right;
}

.otsikko {
    font-weight: inherit;
}

.otsikkovahva {
    font-weight: normal;
    font-size: larger;
    border-style: none;
}

.syotto {
	color: Black;
	background-color: white;
	margin-left: 10px;
	border-radius: 5px;
	font-size: 1.0em;
    /*border-radius: 4px 4px;*/
}

.keski {
    margin-left: 8px
}

.pudotusvalikko {
    width: 200px;
    font-weight: normal;
    background-color: white;
    color: black;
    margin-left: 10px;
}

.vahvistusaika {
	font-size: 14px;
	font-weight: normal;
    background-color: rgba(241, 241, 241, 1);
	padding: 10px;
    opacity: 100;
    color: #484848;	
}

.labelIlmoitus {
    color: #003f8f;
    max-width: 100%;
    min-width: 100px;
    font-weight: bold;  
    font-size: normal;
}
.ilmobox {
    border-style: solid;
    border-width: thin;
    border-radius: 3px;
    border-color: #484848;
	padding: 6px;
}
.labelHuomautus {
    color: #484848;
    font-weight: normal;
    padding: 20px;
    
}

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

.tpteksti {
    min-width: 300px;
    font-size: large;
    margin: 1px;
    background-color: transparent;
    color: black;
    border-style: none;
    border-color: rgb(89, 89, 89);
    align-self: center;
}

/* pbNappula-tyylit perityv�t t�st� luokasta */
[class*="pbNappula"] {	
	margin: 10px;
	font-weight: 500;
    background-color: rgb(147, 147, 147);
	color: white;
	border: 2px solid rgb(147, 147, 147);
	padding: 10px;	
}

[class*="pbNappula"]:hover {	
    background-color: rgb(89, 89, 89);
}

/* vap.ajat taulukon nappula */
.pbNappula {
    min-width: 60px;
}

.pbNappula:hover {
	background-color: rgb(89, 89, 89);
	border-color: rgb(147, 147, 147);
    color: white;
    text-decoration: none;
}

.pbNappulaIso {
    font-size: x-large;
	max-width: 460px;
}

.pbNappulaIso:hover {
	background-color: rgb(89, 89, 89);
	border-color: rgb(147, 147, 147);

}

.pbNappulaMenu {
	width: 120px;
    float: right;
    color: rgb(89, 89, 89);
	border-color: rgb(147, 147, 147);
    border-width: 1px;
	background-color: transparent;
    font-size: smaller;
    padding: 2px;
}


.pbNappulaMenu:hover {
	border-color: rgb(89, 89, 89);
	background-color: transparent;
}
   
.pbNappulaMenuLippu {
    margin: 0;
	width: 50px;
    height: 45px;
	border-style: none;
	background-color: white;
    float: right !important;
}

span[id$='lblKuka']{
    float: left;
}

.pbNappulaMenuLippu:hover {
	background-color: white;
}

.pbNappulaMiksi, .pbInfoDummy {
	min-width: 230px !important;
}

.pbInfoDummy {
    display: inline-block;
    text-align: center;
}

.pbNappulaMiksi, .pbNappulaMiksiValittu {
    display: none;
}

.pbNappulaMiksiValittu {
    background-color: rgb(89, 89, 89);
	min-width: 230px;
}

.pbNappulaMiksi:hover {
	background-color: rgb(89, 89, 89);
	border-color: rgb(89, 89, 89);

}

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

.pbNappulaVid {
	min-width: 230px;
 
}
.pbNappulaVidValittu {
    background-color: rgb(89, 89, 89);
	min-width: 230px;
}

.pbNappulaVid:hover {
	background-color: rgb(89, 89, 89);
	border-color: rgb(89, 89, 89);
}

.pbNappulaAnonyymi {
    /* suoraan vaipaiden aikojen katseluun */
	vertical-align: middle;
    font-weight: bold;
	min-width: 200px;
	max-width: 50%;
	margin: auto;
	background-color: rgb(147, 147, 147) !important;
	color: white;
	border-radius: 0px;
	border: 2px solid rgb(147, 147, 147) !important;
	padding: 10px;
	font-Weight: 500;
}

.pbNappulaAnonyymi:hover {
	background-color:  rgb(89, 89, 89) !important;
}

/* toimipistevalintanappulat */
.pbEiValittu {
    margin: 5px;
    min-width: 120px;
    background-color: #FFFFFF;
    color: #009ee3;
    border-radius: 0px;
    border: 1px thin #D4D4D6;
    padding: 3px;
}
.pbValittuX {
    margin: 5px;
    min-width: 120px;
    background-color: #009ee3;
    color: #FFFFFF;
    border-radius: 0px;
    border: 1px thin #D4D4D6;
    padding: 3px;
}

.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;
}

.yritys {
    font-weight: bold;
    font-size: 20px;
    font-family: 'Droid Sans', Sans-Serif;
}

.varaaja {
    font-size: x-small;
    font-Weight: bold;
    text-align: right;
    /*width: 590px;*/
}

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

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

#ylareuna {
	padding-top: 8px;
	padding-left: 20px;
	background-color: white;
}

/*
#ylareuna::after {
    z-index: 1;
    content: 'This is a test and demo site.\AYou can\'t make true reservations from here!';
    position: absolute;
    top: 5%;
    left: 55%;
    transform: translate(-50%, -50%);
    color: rgb(231, 37, 37);
    font-size: 30px;
    font-weight: bold;
}*/

.alareuna {
    margin-top: 0px;
    vertical-align: middle;
    text-align: center;
    font-size: smaller;
    margin-left: 0px;
    width: 100%;
    color: #484848;
    background-color: transparent;
}

.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: lightgray;
    width: 250px;
    color: black;
}

.kalenteri a {
    text-decoration: gray;
}

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

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

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

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

.kalenteri .kalenteriTodayDayStyle a
        {
			background: red;
            color: yellow; 
            font-weight: bold;
        }

.kalenteriTanaan, .kalenteriTanaan a {
    background-color: rgb(147, 147, 147) !important;
    color: white !important;
}
/* A day with times to reserve. */
td[style*="background-color:LightGreen"]{
    background-color: rgba(197, 238, 197, 0.904) !important;
}			

/*Selcted Day*/
a[style="color:#CCFF99"]{
    color: #00517d !important;
}			
/* --- gridin tyyli */

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

.mGrid td {
    padding: 2px;
    border: solid 1px #c1c1c1;
    color: Black;
}


/* otsikko */

.mGrid th {
    padding: 4px 2px;
    color: #fff;
    background: rgb(89, 89, 89);
    border-left: solid 1px #525252;
}

.mGrid a {
    color: rgb(89, 89, 89);
}

.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;
 }

.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-text {
	margin-left: 12px;
	margin-top: 6px;
}

.card-footer {
    background-color: inherit;
    border: none;
}

.card-image-right {
	margin-top: 5px;
	border: 1px solid #EDEDED;
}

div[id^='vapaa'] {
	font-size: 14px;
	font-Weight: normal;
	margin-bottom: 10px;
	background-image: url('Kuvat/As/GreyBkg.png' );
	color: rgb(89, 89, 89);
}

div[id^='vapaa'] span[id$='_AikaLabel']{
    white-space: nowrap;
}

#Pikahaku {
	margin-top: 20px;
}

div.alareuna a {
    color: black;
}

span.labelHuomautus > h5{
    margin-top: 0;
    padding-top: 0;
    font-weight: bold;
}

span.labelHuomautus > div{
    margin-bottom: 2px;
}

span.labelHuomautus > h5, span.labelHuomautus > div {
    font-size: smaller;
}

div.serviceHeader {
    background-color: rgb(89, 89, 89);
    border-color: rgb(89, 89, 89);
    border-width: 2px;
    color: white;
    padding-top: 5px;
    padding-left: 7px;
    margin-bottom: 5px;
    margin-top: 5px;
}

div.serviceHeader:hover, div.serviceHeader:focus {
    background-color: rgba(89, 89, 89, 0.732);
    border-color: rgb(89, 89, 89) !important;
    box-shadow: 3px 3px 2px rgb(118, 114, 114) !important;
}

/* Hide date selection and time viewing by default*/
div.PvmValinta {
    display: none;
}

div#infoAlert {
    border-color: #505050 !important;
    border-width: 1px;
    background-color: #D4D4D6;
    color: #505050;
    box-shadow: 3px 3px 2px #c1c1c175 !important;
}