@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*
Colors: 
#cebfb0 Linna
#ddd4c9 Mulperi
#efebe2 Damasti
*/

body,
input,
select,
textarea,
button {
	font-size: 16px;
	font-family: "Monserrat", sans-serif;
	font-weight: bold;
	background-color: #F8F8F9;
    /*color: #7F8186;*/
    /*color: color-mix(in srgb, currentColor 0%, background-color 100%);*/
    color: white;
}

h1, h2, h3, h4, h5, h6, *[class*="otsikko"], *[id*="otsikko"], #ctl00_ContentPlaceHolder1_lblAika, .labelOhje, .title {
    font-family: 'Libre Baskerville', serif !important;
}
div.vahvistusaika span#ctl00_ContentPlaceHolder1_lblAika {
	font-family: "Monserrat", sans-serif !important;
    font-style: unset !important;
    font-weight: normal !important;
    font-size: medium !important;
}
/* Utility class to automatically set text color based on background lightness */
.auto-text-color {
    /* Use CSS relative color syntax if supported */
    color: color-mix(in srgb, currentColor 0%, background-color 100%);
}

/* Alternatively, use mix-blend-mode for dynamic contrast (works in modern browsers) */
.auto-text-contrast {
    mix-blend-mode: difference;
    color: white;
}

/* Example: For specific backgrounds, set color manually for best compatibility */
.bg-dark, .bg-dark * {
    color: white !important;
}
.bg-light, .bg-light * {
    color: black !important;
}
.sivu {
    max-width: 1200px;
	position: relative;
    min-height: 100dvh;           /* try 100dvh on mobile to avoid URL bar issues */
    display: flex;
    flex-direction: column;
	margin: auto;
	overflow: hidden;
    /* For a gradient background, use the CSS 'background' or 'background-image' property, not 'background-color' */
    background: linear-gradient(to right, rgba(66, 31, 12, 1), rgba(66, 31, 12, 0.4));
    padding-top: 10px;
	margin-top: 0px;
	border: none;
}

.sivu::before,
.sivu .overlay {
  content: "";
  position: absolute;
  inset: 0;
  /*background-color: rgba(0,0,0,0.45);*/ /* uniform dark overlay */
  /*background: linear-gradient(to right, rgba(206, 191, 176, 0.6), rgba(206, 191, 176, 0.2));*/
}

.overlay {
	background-image: url('Kuvat/As/VaasaSmilesFront.png')!important;
    opacity: 0.5;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.sivu .kehys {
  position: relative;  /* ensures content is above the overlay */
  z-index: 1;
  padding-top: 2rem;
}

.img-fluid {
	max-height: 220px;
	background-color: transparent;
}

.sisaltokehys {
	margin-top: 5px;
	position: relative;
	padding: unset;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: transparent;
	/*background-color: rgba(255, 255, 255, 0.2);*/
	width: 100%;
    flex: 1 1 auto;          /* take the leftover space */
    min-height: 0;           /* IMPORTANT: allows flex child to shrink for overflow */
    overflow-y: auto;          /* only this area scrolls */
    overflow-x: hidden;
	border: none;
}

.kehys {
    width: 97%;
    min-width: 300px;
    position: center;
    margin: auto;
    padding: 0px;
    background-color: transparent;
    display: flex;
    flex-direction: column;    
	border: none;
    min-height: 97dvh;           /* try 100dvh on mobile to avoid URL bar issues */
}

.menurivi {
	margin-left: 15px;
    width: 95%;
    text-align: left;
}

#ylareuna,
.alareuna {
  flex: 0 0 auto;
}

#ctl00_ContentPlaceHolder1_lblAika {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.1;
    font-style: italic;
}

.otsikko, 
#ctl00_ContentPlaceHolder1_lblVarausotsikko, 
#ctl00_ContentPlaceHolder1_lblOhje,
div.PvmValinta > div.container > div.row > div.col > span#ctl00_ContentPlaceHolder1_lblAika{
    font-size: 1.5rem;
    font-weight: unset !important;
    font-weight: 400 !important;
    line-height: 1.1;
    font-style: italic;
}

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

.syotto {
	height: 30px;
	border: 1px solid #ddd4c9; /* #ddd4c9 Mulperi */
	color: Black;
	background-color: #efebe2c6;/* #efebe2 Damasti */
	margin-left: 10px;
	border-radius: 4px;
	padding: 4px;
	font-size: 14px;
    /*border-radius: 4px 4px;*/
}

.syotto:focus, .syotto:hover, .syotto:active {
    background-color: white;
    /*outline: none;*/
}

.keski {
    margin-left: 8px
}

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

.vahvistusaika {
    margin-top: 10px;
	font-size: 14px;
	font-weight: normal;
    border: 1px solid rgba(239, 239, 239, 0.1);
    border-radius: 31px;
	padding: 14px;
	background-color: rgba(239, 239, 239, 0.1);
}

.labelIlmoitus {
    max-width: 100%;
    min-width: 100px;
    font-weight: bolder;  
}

.ilmobox {
    background-color: rgba(239, 239, 239, 0.1);
    border-style: solid;
    border-width: 1px;
    border-color: rgba(239, 239, 239, 0.1);
    border-radius: 25px;
	padding: 6px;
    color: white !important;
}
.labelHuomautus {
    color: white;
    font-weight: normal;
    padding: 20px;
    margin-left: 48%;
    margin-right: 6rem;
}

#ctl00_ContentPlaceHolder1_lblOhje.labelHuomautus {
    margin-left: unset;
}

@media (max-width: 600px) {
    .labelHuomautus {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 10px;
    }
    div.valinnat {
        padding-top: 140px;
    }
}

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

.tpteksti {
    min-width: 300px;
    font-size: small;
    margin: 1px;
    background-color: transparent;
    color: transparent;
    border-style: none;
/*    border-color: #009FE3;*/
    align-self: center;
}

/* pbNappula-tyylit perityv�t t�st� luokasta */
/*[class*="pbNappula"] {
	font-size: 15px !important;
	margin: 10px;
	font-weight: 500;
    background-color: #0C71C3;
	color: white;
	border-radius: 4px;
	border: 2px solid white;
	padding: 8px;
}*/

/* vap.ajat taulukon nappula */
*[class^="pbNappula"]:not(td), *[class*="pbNappula"]:not(td) {
    align-items: center;
	border: 2px solid white;
    border-radius: 31px !important;
    box-shadow: 4px 0 30px -8px rgba(0, 0, 0, .75);
    color: #000 !important;
    /*display: flex;*/
    display: inline;
    font-size: 15px;
    font-weight: 700;
    justify-content: center;
    margin: 2px 5px;
    padding: 10px 30px;
    position: relative;
    transform: translateY(0); /* Default transform */
    will-change: transform; /* Optimize for transform changes */
    transition: transform .3s ease;
}

*[class*="pbNappula"]:hover:not(td) {
    position: relative;
    transform: translateY(-4px) scale(1.04);
    /*box-shadow: 0 8px 24px -6px rgba(0,0,0,0.18);*/
    outline-color: transparent !important;
    border-color: transparent !important;
    position: relative;
}

.pbNappula {
    min-width: 60px;
}

/*
.pbNappula:hover {
	background-color: white;
	color: #0C71C3;
}*/

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

#ctl00_ContentPlaceHolder1_pbVahvista,#ctl00_ContentPlaceHolder1_pbPeruuta{
    max-width: 350px !important;
    margin-left: 1.2em;
    margin-top: 1em;
}

/*
.pbNappulaIso:hover {
    border-color: #0C71C3;
	background-color: white;
	color: #0C71C3;
}*/

.pbNappulaMenu {
	width: 180px;
    align-self: flex-end !important;
}

/*
.pbNappulaMenu:hover {
    border-color: #0C71C3;
	background-color: white;
	color: #0C71C3;
}*/
   
.pbNappulaMenuLippu {
	width: 45px;
    height: 40px;
    /*aspect-ratio: auto 1 / 1;*/
	border-style: solid;
    border-width: 2px;
    border-color: rgba(239, 239, 239, 0.5);
    border-radius: 5px;
    float: inline-end;
}

.pbNappulaMenuLippu[src="Kuvat/fi.png"] {
    /*background-image: url("Kuvat/se.png");
    background-size: cover;
    background-repeat: no-repeat;*/
    background: url('Kuvat/fi-rnd.png') no-repeat center center;
    background-size: 60%;
}


.pbNappulaMenuLippu[src="Kuvat/se.png"] {
    /*background-image: url("Kuvat/se.png");
    background-size: cover;
    background-repeat: no-repeat;*/
    background: url('Kuvat/se-rnd.png') no-repeat center center;
    background-size: 60%;
}

.pbNappulaMenuLippu[src="Kuvat/en.png"] {
    /*background-image: url("Kuvat/se.png");
    background-size: cover;
    background-repeat: no-repeat;*/
    background: url('Kuvat/en-rnd.png') no-repeat center center;
    background-size: 60%;
}

/*.pbNappulaMenuLippu:hover {
    border-color: #0C71C3;
	background-color: transparent;
	color: #0C71C3;
}*/

*[class^="pbNappulaMiksi"]{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*min-width: 300px;*/
    width: 300px;
    margin: .2em;
    display: inline-block;
    padding: 5px 15px !important;
}

.pbNappulaMiksiValittu {
    border-color: #efebe2 !important;
	background-color: #cebfb0 !important;
    color:white !important;
}

/*
.pbNappulaMiksi:hover {
    border-color: #0C71C3;
	background-color: white;
	color: #0C71C3;
}
*/

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

*[class^="pbNappulaVid"] {
	min-width: 210px;
 
}
.pbNappulaVidValittu {
    border-color: #efebe2 !important;
	background-color: #cebfb0 !important;
}

/*
.pbNappulaVid:hover {
    border-color: #0C71C3;
	background-color: white;
	color: #0C71C3;
}
*/

.pbNappulaAnonyymi {
    /* suoraan vaipaiden aikojen katseluun */
	font-size: 16px;
    display: flex;
	vertical-align: middle;    
    font-weight: bold;
	min-width: 200px;
	max-width: 50%;
	margin: auto;
	background-color: white !important;
	padding: 8px;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-primary:visited {
    border-color: #cebfb0 !important;
}
/*.pbNappulaAnonyymi:hover {
    border-color: #0C71C3;
	background-color: white;
	color: #0C71C3;
}*/

/* 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: 'Comic Sans MS', 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: 0px;
	background-color: transparent;
	margin-bottom: 5px;
}

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

.av_otsikko {
    font-size: larger;
    color: gray;
}

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


.kalenteri a {
    text-decoration: none;
}

#ctl00_ContentPlaceHolder1_Kalenteri td>a[style*="color:#CCFF99"]{
    color:rgba(66, 31, 12, 0.893) !important;
    /*font-family: 'Libre Baskerville', serif !important;*/
    font-weight: 700 !important;
    width: 100% !important;
    height: 100% !important;
    border: 1px dotted rgba(66, 31, 12, 0.893) !important;
    border-radius: 3px;
}

#ctl00_ContentPlaceHolder1_Kalenteri td[style*="background-color:LightGreen;"]{
    background-color: #efebe2 !important;
}

#ctl00_ContentPlaceHolder1_Kalenteri td.kalenteriTanaan{
    background-color: #cebfb02c !important;
    border-radius: 3px;
    /*color: rgba(66, 31, 12, 0.893) !important;
    font-weight: 700 !important;
    border: 1px solid rgba(66, 31, 12, 0.893) !important;
    border-radius: 3px;*/
}

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

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


/* --- 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: #cebfb0;
    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;
}

table.mGrid td > a {
    color: rgba(66, 31, 12, 0.893) !important;
    font-style: italic;
}
.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 !important;
    font-size: inherit !important;
}

.vahvistusaikaArvo {
    font-weight: bold;
    font-size: 1.1rem !important;
    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;
}

#vapaa, #vapaa2 {
	font-size: 12px;
	font-Weight: normal;
	margin-bottom: 10px;
	background-color: rgba(255, 255, 255, 0.4);
	color: #7F8186;
}

#Pikahaku {
	margin-top: 20px;
}

@media (min-width: 600px) {
    div.valinnat > div:not([class])/*, 
    div.kalenterikehys,
    div#ctl00_ContentPlaceHolder1_UpdatePanel1 > div:has(table.mGrid)*/
    {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 0.5rem !important;
        margin-left: auto !important;  /* in LTR */
        padding-left: 42% !important;
    }

    div#ctl00_ContentPlaceHolder1_UpdatePanel1 > div:has(table.mGrid)
    {
        padding: 0px 15px !important;
    }

    /*
   div.PvmValinta > div.container > div.row {
        display: flex !important;
        flex-direction: row-reverse !important;
    }
    div.PvmValinta > div.container > div.row > div.col:nth-child(2) {
        flex: 1 !important;
    }
    div.PvmValinta > div.container > div.row > div.col:nth-child(1) {
        flex: 2 !important;
    }*/

    /* Search page sub titles */
    div.hakuarvot > div.valinnat > span#ctl00_ContentPlaceHolder1_lblMiksi,
    div.hakuarvot > div.valinnat > span#ctl00_ContentPlaceHolder1_lblVastaanottaja {
        margin-left: 45%;
        padding-bottom: 15px !important;
    }
}

article {
    flex: 1 1 auto;          /* take the leftover space */
    min-height: 0;           /* IMPORTANT: allows flex child to shrink for overflow */
    overflow-y: auto;          /* only this area scrolls */
    overflow-x: hidden; 
}

.divkeskita {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

div#infoAlert {
    z-index: 1000;
    position: absolute;
    border-color: rgb(206, 191, 176);
    border-radius: 25px;
    box-shadow: 4px 0 30px -8px rgba(0, 0, 0, .75);
    background-color: #efebe2; /* Damasti color */
    /*background-color: rgba(206, 191, 176, 0.95); /* Linna color with some transparency */
    color: black;
}