/* INFOSIVUN MUUTA HAKUA & VARAUS -MODUULI */

/* General message popup (may be used several different ways) */
.mp-general-message mp-general-message{
    display: block;
    position: relative;
    padding: 40px;
    background: white;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    text-align: center; 
    font-size: 15px;
    
}
.mp-general-message .mfp-close{
    right: 0px;
    top: 0px;
    left: initial;
    bottom: initial;
}

/* MUUTA HAKUA */
.infosivu-muuta-hakua.content-row {
    padding-top: 48px;
    padding-bottom: 5px;
}  
.muuta-hakua {
    position: relative;
    width: 270px;
    padding-top: 5px;
}
.muuta-hakua-nappi {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent url('../img/muuta-hakua-nappi.png') no-repeat right top;
    height: 71px;
    width: 69px;
}
.muuta-hakua-text {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;  
    box-sizing: border-box;
    width: 230px;
    background-color: #3ebfed;
    padding: 20px 22px 0px;
    height: 55px;
}
.muuta-hakua-text h2 {
    font-size: 26px;
    color: #fff;
    margin-bottom: 0;
}

/* VARAAMOPALKKI */
.varaamo-valinnat-palkki {
    border-bottom: 3px solid #3ebfed;
    background-color: #022860;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;  
    flex-wrap: wrap; 
    width: 100%;
    margin: -3px 0 20px;
    max-height: 91px;
    overflow: visible; /* for calendar and busmap to show */  
}
.varaamo-valinnat-palkki .nimike {
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    padding-top: 5px;
    display: inline-block;
    margin-right: 30px;
}

/* Lähtöpäivä */
.varaamo-valinnat-lahtopaiva, .varaamo-valinnat-lahtopaikka, 
.varaamo-valinnat-aikuiset, .varaamo-valinnat-lapset {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 28px 30px;
    width: auto;
}
.infosivu-muuta-hakua lahtopaiva, .infosivu-muuta-hakua lahtopaikka, 
.infosivu-muuta-hakua .select2 {
    display: inline-block;
    height: 30px;
}
.infosivu-muuta-hakua lahtopaiva, .infosivu-muuta-hakua lahtopaikka, 
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    font-size: 13px;
    color: #4b5256;
}
varaamo-valinnat-palkki .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
}
.varaamo-valinnat-lahtopaiva, .varaamo-valinnat-lahtopaikka {
    border-right: 1px solid rgba(42,79,122,1);
}
.infosivu-muuta-hakua lahtopaiva,
.infosivu-muuta-hakua lahtopaikka {
    position: relative;
    background: white;
    padding-left: 8px;
    padding-right: 28px;
    background-image: url('/templates/matkapojat2018/img/hakanen_bluebg_alas.png');
    background-repeat: no-repeat;
    background-position: top right;
    cursor: pointer;
}
.infosivu-muuta-hakua lahtopaiva {
    width: 125px;
}

/* Lähtöpaikka */
.infosivu-muuta-hakua lahtopaikka {
    width: 142px !important;
}
.varaamo-valinnat-lahtopaikka, .varaamo-valinnat-aikuiset {
    border-left: 2px solid rgba(18,35,58,1);
}

/* Aikuiset & Lapset */
.infosivu-muuta-hakua varaamo-matkakohde-item{
    display: flex;
    flex-direction: row; 
    width: 100%;
}
.varaamo-valinnat-aikuiset .nimike,
.varaamo-valinnat-lapset .nimike {
    margin-right: 12px;
}
.infosivu-muuta-hakua .select2-container {
    vertical-align: top;
    width: 66px !important;
}
.varaamo-valinnat-lapset {
    padding-left: 0;
}

/* VARAAMO VALINTA TAULUKKO */
.varaamo-valinnat-tiedot {
    border: 1px solid #e8e8e8;
    -webkit-box-shadow: 0 1px 3px 0 #e8e8e8;
    box-shadow: 0 1px 3px 0 #d5d5d5;
    padding: 4px 22px;
    font-size: 16px;
    line-height: 100%;
    color: #022860;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;  
    flex-wrap: wrap; 
}
.varaamo-pva, .varaamo-lahto, .varaamo-paluu, 
.varaamo-matkakohde, .varaamo-matkavaline, 
.varaamo-hinta, .varaamo-varaa {
    padding: 18px 0;
}

/* Nimike rivi */
.varaamo-valinnat-tiedot .header {
    border-top: none;
    font-weight: bold;
}

/* Sarake leveydet */
.varaamo-pva { width: 4%; }
.varaamo-paivamaara { width: 20%; }
.varaamo-lahto, .varaamo-paluu { 
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;  
    box-sizing: border-box;
    width: 49%; 
}
.varaamo-matkakohde { width: 37%; }
.varaamo-matkavaline { width: 17%; }
.varaamo-hinta { width: 13%; }
.varaamo-varaa { width: 9%; }

.infosivu-muuta-hakua varaamo-matkakohde-items-container{
    display: block;
    width: 100%;
}
.varaamo-pva, .varaamo-paivamaara, .varaamo-matkakohde, .varaamo-matkavaline, .varaamo-hinta, .varaamo-varaa {
    border-top: 1px solid #3ebfed;
}

/* KALENTERI */
.infosivu-muuta-hakua calendar-container{
    display: none;
    position: absolute;
    z-index: 100; /* not necessarily right? */ 
}
.infosivu-muuta-hakua calendar-container.calendar-state-open{
    display: block;
    width: 400px;
    height: 250px;
    background: white; 
}

/* KARTTA */
.template-infosivu .busmap-popup .satamalahto {
    display: block;
    background: white;
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%, 0px);
    font-size: 12px;
    color: rgb(2, 40, 96);
    font-weight: bold;
    border: 2px solid rgb(62, 191, 237);
    border-radius: 4px;
    line-height: 22px;
    padding: 0px 5px;
    cursor: pointer;
}

/* MATKA EI MYYNNISSÄ */
.infosivu-muuta-hakua-disabled.content-row {
    padding-bottom: 0px;
}
.infosivu-muuta-hakua-disabled .content-full {
    -webkit-box-shadow: 0 1px 3px 0 #e8e8e8;
    box-shadow: 0 1px 3px 0 #d5d5d5;
    border: 1px solid #e8e8e8; 
    border-bottom: 3px solid #022860; 
}
.infosivu-muuta-hakua-disabled .text-area {
    margin: 44px 22px 18px;
}
.template-infosivu .infosivu-muuta-hakua-disabled h2 {
    border-bottom: none;
    margin-bottom: -8px;
}
.infosivu-muuta-hakua-disabled h4 {
    margin: 20px 0 22px;
}
.infosivu-muuta-hakua-notifymail-form {
    padding: 12px 22px 20px;
}
.infosivu-muuta-hakua-notifymail-email {
    color: #022860;
    font-size: 16px;
    padding-right: 26px;
}
.infosivu-muuta-hakua-notifymail-form-input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;  
    box-sizing: border-box;
    margin-right: 25px;
    border: none;
    margin-bottom: 25px;
    padding: 3px 10px;
    line-height: 100%;
    -webkit-box-shadow: 1px 1px 3px 0 #d1cfcf;
    box-shadow: 1px 1px 3px 0 #d1cfcf;
    height: 38px;
    width: 55%;
}
send-button:hover, send-button:active {
   -webkit-box-shadow: inset 3px 3px 5px -2px rgba(0,0,0,0.60);
    opacity: 0.7;
    color: #ffffff !important;
}
send-button {
    background: #3ebfed;
    padding: 7px 18px 7px 18px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff !important;
    cursor: pointer;
}

/* TABLETTIKOOT */
@media all and (max-width: 1200px) {

    /* MUUTA HAKUA */
    .infosivu-muuta-hakua.content-row {
        padding-top: 40px;
    }

    /* VARAAMOPALKKI */
    .varaamo-valinnat-palkki .nimike {
    	margin-right: 12px;
    }

    /* Lähtöpäivä */
    .varaamo-valinnat-lahtopaikka, 
    .varaamo-valinnat-aikuiset, 
    .varaamo-valinnat-lapset {
	padding-left: 15px;
    }

    /* Aikuiset & Lapset */
    .varaamo-valinnat-aikuiset {
    	padding-right: 0px;
    }
    .varaamo-valinnat-lapset {
    	padding-left: 15px;
    }

    /* VARAAMO VALINTA TAULUKKO */

    /* Sarake leveydet */
    .varaamo-lahto, .varaamo-paluu { 
        width: 48%; 
    }

}
    @media all and (max-width: 1100px) {

	/* VARAAMOPALKKI */
	.varaamo-valinnat-palkki {
	    max-height: 115px;
	}
        .varaamo-valinnat-palkki .nimike {
  	    display: block;
	    width: 100%;
	    margin-bottom: 5px;
    	}
        .infosivu-muuta-hakua lahtopaiva, .infosivu-muuta-hakua lahtopaikka,
	.infosivu-muuta-hakua aikuiset, .infosivu-muuta-hakua lapset,
	.infosivu-muuta-hakua .select2-container {
	    position: relative;
    	}
        .varaamo-valinnat-lahtopaiva, .varaamo-valinnat-lahtopaikka, 
	.varaamo-valinnat-aikuiset, .varaamo-valinnat-lapset {
	    padding: 20px 30px;
	}
	.varaamo-valinnat-aikuiset {
	    padding-right: 0px;
  	}

    	/* VARAAMO VALINTA TAULUKKO */

   	/* Sarake leveydet */
        .varaamo-matkakohde { width: 36%; }
        .varaamo-varaa { width: 10%; }

    }

    @media all and (max-width: 1000px) {


    	/* VARAAMO VALINTA TAULUKKO */

   	/* Sarake leveydet */
    	.varaamo-matkakohde { width: 35%; }
    	.varaamo-varaa { width: 11%; }
    }

    @media all and (max-width: 900px) {

    	/* VARAAMO VALINTA TAULUKKO */

   	/* Sarake leveydet */
    	.varaamo-matkakohde { width: 34%; }
    	.varaamo-varaa { width: 12%; }
    }

/* VAIN MOBIILI */
@media all and (max-width: 799px) {

	/* General message popup (may be used several different ways) */
	.mp-general-message mp-general-message{
		font-size: 13px;
		padding: 15px;
		max-width: 85%; 
	}
	.mp-general-message .mfp-close{
		right: -10px;
		top: -10px;
		left: initial;
		bottom: initial;
		background: transparent url('../img/varaamo/varaamo-login-sulje.png') no-repeat right top;
		width: 24px;
		height: 24px;
		background-size: 24px 24px;
		color: transparent;
		opacity: 1; 
	}

    /* MUUTA HAKUA */
    .infosivu-muuta-hakua.content-row {
    	padding-top: 10px;
    }
    .muuta-hakua {
    	width: 167px;
    }
    .muuta-hakua-nappi {
	background-size: cover;
    	height: 38px;
    	width: 38px;
	margin-top: 3px;
    }
    .muuta-hakua-text {
    	padding: 3px 10px 0px;
	width: 140px;
	height: 28px;
    }
    .muuta-hakua-text h2 {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
    	border: none;
        line-height: 33px;
 	padding-top: 2px;
    }

     /* VARAAMOPALKKI */
    .varaamo-valinnat-palkki {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    	padding: 12px 10px 20px;
   	border-top-right-radius: 8px 8px;
   	max-height: 170px;
    }
    .varaamo-valinnat-palkki .nimike {
	font-weight: normal;
	font-size: 12px;
	margin-bottom: 6px;
    }
    .varaamo-valinnat-lahtopaiva, .varaamo-valinnat-lahtopaikka, 
    .varaamo-valinnat-aikuiset, .varaamo-valinnat-lapset {
    	padding: 4px 12px;
    	width: 50%;
	webkit-box-shadow: none;
	box-shadow: none;
	border-right: none;
	border-left: none;
    }
    .infosivu-muuta-hakua lahtopaiva, .infosivu-muuta-hakua lahtopaikka, 
    .infosivu-muuta-hakua aikuiset, .infosivu-muuta-hakua lapset,
    .infosivu-muuta-hakua .select2-container {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    	width: 100% !important;
    }
    .infosivu-muuta-hakua lahtopaiva, 
    .infosivu-muuta-hakua lahtopaikka, 
    .infosivu-muuta-hakua .select2-container .select2-selection--single, 
    .select2-container--default .select2-selection--single .select2-selection__arrow, 
    .select2-container .select2-selection--single .select2-selection__rendered, 
    .infosivu-muuta-hakua .select2 {
     	height: 25px !important;
	background-position: center right;
	line-height: 24px;
	overflow: visible;
    }
    varaamo #huoneitacontainer .select2-container {
    	width: 80px !important;
    }
    varaamo-valinnat-palkki .select2-container .select2-selection--single .select2-selection__rendered {
    	line-height: 20px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
    	background-image: url('/templates/matkapojat2018/img/hakanen_bluebg_alas.png');
    	background-position: center right;
    }

    /* VARAAMO VALINTA TAULUKKO */
    .varaamo-valinnat-tiedot {
    	border: none;
    	-webkit-box-shadow: none;
        box-shadow: none;
        line-height: 100%;
	padding: 0;
	font-size: 12px;
    }
    .infosivu-muuta-hakua varaamo-matkakohde-items-container {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #ffffff;
  	border: 2px solid #e8e8e8;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
    }
    .infosivu-muuta-hakua varaamo-matkakohde-item {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    	display: block;
	min-height: 140px;
    }
    .varaamo-pva, .varaamo-paivamaara, 
    .varaamo-matkakohde, .varaamo-matkavaline, 
    .varaamo-hinta, .varaamo-varaa {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    	border:none;
   	overflow: hidden;
    }
    .varaamo-valinnat-tiedot .header, 
    .varaamo-valinnat-tiedot .varaamo-pva {
	display: none;
    }
    .varaamo-paivamaara {
	width: 100%;
	background-color: #022860;
        color: #ffffff;
  	padding: 0 20px;
	font-weight: bold;
    }
    .varaamo-lahto, .varaamo-paluu { 
  	padding: 8px 0;
        width: auto; 
    }
    .varaamo-lahto span, .varaamo-paluu span {
    	display: inline-block;
    	margin-right: 5px;
    }
    .varaamo-lahto::after {
    	content: " -";
    }
    .varaamo-matkakohde, .varaamo-matkavaline {
	width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;  
        box-sizing: border-box;
        padding: 0;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 180%;
    }
    .varaamo-matkakohde {
        padding-top: 15px;
 	height: 37px;
    }
    .varaamo-matkavaline {
 	height: 22px;
    }
    .varaamo-hinta {
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
	float: left;
	color: #022860;
	font-weight: bold;
	font-size: 18px;
	width: 50%;
	height: 50px;
    }
    .varaamo-hinta::before {
    	content: "Hinta alk. ";
	font-size: 13px;
    }
    .varaamo-hinta::after {
    	content: " /hlö";
	font-size: 13px;
    }
    .varaamo-valinnat-tiedot .varaamo-varaa {
	position:relative;
	margin-right: 20px;
	float: right;
	margin-top: -8px;
	width: 93px;
    }

    /* MATKA EI MYYNNISSÄ */
    .infosivu-muuta-hakua-disabled.content-row {
    	padding-bottom: 20px;
    }
    .infosivu-muuta-hakua-notifymail-form {
    	padding: 12px 22px 30px;
    }
    .infosivu-muuta-hakua-notifymail-email, .infosivu-muuta-hakua-notifymail-form-input {
    	display: block;
    } 
    .infosivu-muuta-hakua-notifymail-email {
    	font-size: 14px;
 	padding-bottom: 10px;
    }
    .infosivu-muuta-hakua-notifymail-form-input {
    	width: 100%;
    } 

}
    @media all and (max-width: 400px) {

    	/* VARAAMO VALINTA TAULUKKO */
        .varaamo-hinta {
	    width: 100%;
	}
        .varaamo-valinnat-tiedot .varaamo-varaa {
	    margin-bottom: 8px;
    	}
    }