/*@charset "utf-8";
 CSS Document */

/*******************KOKO SIVUSTOA KOSKEVAT*********************/

html {
  font-family: Sans-serif;
  background-color: #fff;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin:0;
  min-width: 1500px;
  height:100%;
  -webkit-appearance: none;
}

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
  }

body {
  position: absolute;
  width:90%;
  right:0;
  left: 50%; transform:translate(-50%);
  min-height: 1000px;
  height:100%;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: 35px;

}

hr {
  position:absolute;
  top: 60px;
  right: 0;
  left:0;
  min-width: 1400px;
  width:100%;
}

select {
	cursor:pointer;
}


.minSelected, .hrSelected{
  background: #b0df66 !important;
}



h2{
	padding-left: 4px;
	font: ;
  ;
	color: #004799;
}



.harmaateksti {
  color: rgba(100,100,100,1);
}

#vaihtuvaOsa {
  min-height:100%;
  height:100%;
}

#footer {
  position:absolute;
  bottom:-10px;
  right:20px;
  height: 40px;
  font-size:12px;
  color:#000;
  z-index: -1;
  cursor:pointer;
}

p {
  font: ;
  /*color: #004799;*/
  color: grey;
}


.minSelected, .hrSelected{
  background: #b0df66 !important;
}


input[type=text], select {
    padding: 12px 18px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-appearance: none;
    font-family: Sans-serif;
}

input[type=password], select {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-appearance: none;
}

input[type=submit] {
    position:relative!important;
    opacity: 1!important;
    width: 183px;
    background: #004799;
    color: #fff;
    padding: 14px 20px;box-shadow: inset 0px 1px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 3px 2px grey;    margin: 8px 0;
    border-radius: 4px;
    cursor: pointer;
    border: 0px;
    -webkit-appearance: none;
    font-family: Sans-serif;
    ;
}

input[type=submit]:hover {
    position:relative;
    top:3px;box-shadow: inset 0px 1px 0px#00408a, 0px 1px 0px 0px #00408a, 0px 2px 1px grey;}

button {
	color: #fff;;
	border: 0px;
	background: transparent;
	font-size: 20px;
	font-weight: bold;
	-webkit-appearance: none;
}

button:hover{
	/*color: #aaaaaa;*/
	cursor: pointer;
}

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */
   background-image: url("media/nuoli.png");   /* add custom arrow */
   background-repeat: no-repeat;
   background:white;
   background-position: right center;
   border: 1px solid #fff;
   padding-left: 2px;
   margin:auto;
   -webkit-appearance: none;
}

select::-ms-expand {
    display: none; /* hide the default arrow in ie10 and ie11 */
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #b5b5b5;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


/********Sivut piiloon aluksi**********/

#autoluokkaSivu, #lisatarvikeSivu, #yhteystiedotSivu, #maksaminenSivu {
  display: none;
}


/*******************YLÄPALKKI=AUTOHAKU*********************/

#flagDiv {
  z-index:200;
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 4px;
  background-color:#fff;
}

.flagInput {
  height:25px;
  margin-top:10px;
  margin-right:5px;
  margin-left:20px;
  z-index:20;
  float:left;
}

#arrowFlag {
  margin-left: -6px;
}


header {
	position: fixed;
	height: 220px;
	min-width: 1500px;
	width: 100%;
	margin-right: 50px;
  background: #004799;
  border: 1.5px solid #002857;
	top:50px;
	z-index: 4;
}

#FRpakutDiv{
  position:absolute;
  width:100%;
  height:35px;
  border-bottom:2px solid #0383d3;
}

#FRpakutOts{
  position:absolute;
  width:85%;
  text-align:center;
  font-weight:bold;
  color:#000;
  top:-18px;
  font-size:20px;
  text-transform:uppercase;
}

#FRpakutLink {
  float:right;
  font-size:18px;
  margin-right:10px;
  margin-top:3px;
  cursor:pointer;
}

#varaushakuvalinnat {
	position:absolute;
	margin-left: 190px;
	top:50px;
  width: 580px;
}


#alkaatxt {
  padding-left:20px;
  max-width:175px;
  margin-top: 70px;
  ;
  color: #fff;
}

#paattyytxt {
  padding-left:20px;
  max-width:168px;
  margin-top: 44px;
  ;
  color: #fff;
}

.kestotxt {
  margin-top: 35px!important;
}

#tunti {
  position:relative;
  width: 90px;
  top:10px;
  margin-left: 20px;
  margin-right: 30px;
  padding:10px;
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
  font-weight: normal;
  font-size: 16px;
  box-shadow: inset 0px 1px 0px #00408a, 0px 5px 0px 0px #00408a, 0px 6px 5px #00408a;
}
#kaksituntia {
  position:relative;
  width: 90px;
  top:10px;
  margin-left: 20px;
  margin-right: 30px;
  padding:10px;
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
  font-weight: normal;
  font-size: 16px;
  box-shadow: inset 0px 1px 0px #00408a, 0px 5px 0px 0px #00408a, 0px 6px 5px #00408a;
}
#kolmetuntia {
  position:relative;
  width: 90px;
  top:10px;
  margin-left: 20px;
  margin-right: 30px;
  padding:10px;
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
  font-weight: normal;
  font-size: 16px;
  box-shadow: inset 0px 1px 0px #00408a, 0px 5px 0px 0px #00408a, 0px 6px 5px #00408a;
}

#tunti:hover {
  background: #f1f1f1;
  top:12px;
  box-shadow: inset 0px 0.5px 0px #00408a, 0px 2px 0px 0px #00408a, 0px 2px 1px #00408a;
}

#kaksituntia:hover {
  background: #f1f1f1;
  top:12px;
  box-shadow: inset 0px 0.5px 0px #00408a, 0px 2px 0px 0px #00408a, 0px 2px 1px #00408a;
}

#kolmetuntia:hover {
  background: #f1f1f1;
  top:12px;
  box-shadow: inset 0px 0.5px 0px #00408a, 0px 2px 0px 0px #00408a, 0px 2px 1px #00408a;
}

.lanaSelected {
  background: #bfbfbf;
  top:12px!important;
  box-shadow: inset 0px 0.5px 0px #00408a, 0px 2px 0px 0px #00408a, 0px 2px 1px #00408a !important;
}


/*
.sijaintiAlkaa, .sijaintiLoppuu {
  width:260px;
  font-size:15px;
  padding-left: 10px;
  padding-bottom:11px;
  border: 1.4px solid  #002857 !important;
}

.sijaintiAlkaa option:nth-child(4n-2) {
  background:#f2f2f2;
}

.sijaintiAlkaa option:nth-child(4n-1) {
  background:#f2f2f2;
}

.sijaintiLoppuu option:nth-child(4n-2) {
  background:#f2f2f2;
}

.sijaintiLoppuu option:nth-child(4n-1) {
  background:#f2f2f2;
}
*/

/*************select option div**************/


/*the container must be positioned relative:*/
.sijAlkDiv {
  position: relative;
  font-family: Sans-serif;
}

.sijAlkDiv select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background: #fff;
  width:  200px;
  height:28px;
  border: 1.4px solid  #002857 !important;
  border-radius:4px;
  float:left;
  margin-top:8px;
  margin-left:20px;
  ;
  text-overflow: ellipsis;
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
  line-height:28px;
  padding-top: 8px!important;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: relative;
  content: "";
  color:#000;
  top: 10px;
  float:right;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #707070 transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #707070 transparent;
  top: 2px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #000;
  padding: 11px 16px 4px 16px;;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
  white-space: pre-line;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background: #fff;
  top: 145%;
  left: -231px!important;
  right: 0;
  width: 370px;
  height: auto;
  max-height: 700px;
  overflow:auto;
  z-index: 99;
  border: 1px solid grey;
  white-space: pre;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
   -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
   display:none;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover {
  background: rgba(0, 0, 0, 0.1);
}

/*.same-as-selected {
  background: #ccc!important;
}*/

.tphakuInput {
  height:42px;
  width: 220px!important;
  background-color: #fff;
  border: 1.4px solid #002857 !important;
  border-radius: 4px;
  float: left;
  margin-top: 8px;
  margin-left: 20px;
  text-align:left!important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 8px;
  font-size:  16px;
  background-color: #fff
}

.optionText {
  padding:0px;
  max-width:250px;
  border: none!important;
  padding:0px!important;
  margin-top: 0px;
  line-height:25px;
}

.typeIconDiv {
  position:absolute;
  border:none!important;
  right: 20px;
  top:22px;
  padding:0px!important;
}

.typeIconDiv:hover, .optionText:hover {
  background: rgba(0, 0, 0, 0.0)!important;
}

.select-divOption {
  position:relative;
  min-height:58px;
  z-index:20;
}

.select-divOption:nth-child(even) {
  background: #fafafa;
}

/*.typeIcon {
  position:relative;
  float:right;
}*/

#cityIcon {
  width: 25px;
  top:-18px;
}

#rwsIcon {
  width: 25px;
  top:-15px;
}

#airportIcon {
  width: 38px;
  top:-10px;
}

.ryhmatjatoimipiste {
  margin-left:120px!important;
  width: 630px!important;;
}

#autoryhmaNoutotxt, #autoryhmaPalautustxt {
  color:white;
  display:inline-block;
  text-align:right;
  margin-right:5px;
  width:90px!important;
  max-width:90px!important;
}

.ryhmatjatoimipiste .autoryhmaItems {
  position: absolute;
  background-color: #fff;
  left: 21px;
  right: 0;
  top: 53px;
  width: 350px;
  z-index: 99;
  border: 1px solid grey;
  white-space: pre;
  height: auto;
  max-height: 350px;
  overflow: auto;
  display: none;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
   -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}

.ryhmatjatoimipiste .autoryhmaItems div,.select-selected {
  color: #000;
  padding: 10px 16px 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
  white-space: pre-line;
}
/*hide the items when the select box is closed:*/
.ryhmatjatoimipiste .select-hide {
  display: none;
}
.ryhmatjatoimipiste .autoryhmaItems div:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.ryhmatjatoimipiste .autoryhmaItems div:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.ryhmatjatoimipiste .autoryhma .autoryhmaItems {
  top: 73px;
  left: 68px;
  z-index:50!important;
}

.ryhmatjatoimipiste .autoryhma select {
  display: none; /*hide original SELECT element:*/
}

.ryhmatjatoimipiste .select-divOption {
  min-height: 30px;
}


/***************************/





.kampanjaALdiv{
  width:60px;
  height:60px;
  position:relative;
	float:right;
	margin-right: 20px;
  max-width:320px;
  top:-60px;
}

.kampanjaALdiv img{
  border:0;

}

.kampanjaAL{
  position:absolute;
  right:-22px;
  top:-90px;
  width:120px;
  height:140px;
}

.kampanjaAL img {
  border:0;
}

#kamppisDiv {
  font-family: Sans-serif;
  margin-left: 21px;
  height:1px;
}

#kamppisteksti {
  margin-top:7px;
  color: #fff;
  text-decoration:underline;
  cursor:pointer;
  ;
}

#kampanjakoodi {
  height:20px;
  width:230px;
  margin-top:6px;
  font-family: Sans-serif;
  ;
}

#kampStatus {
  position:relative;
  left:245px;;
  top:-32px;;
  display:none;
}

#kampKayta {
  position:relative;
  left:280px;
  top:-42px;
  width: 150px;
  font-size: 18px;
  padding: 2px;
  display:none;
}

#kampKayta:hover {
  top:-40px;
}

#haeNappi {
	position: absolute;
	top:57px;
	left: 785px;
	padding: 48px;
	line-height:10px;
  background: #0051ad;
  border-radius: 4px;
  box-shadow: inset 0px 1px 0px #00408a, 0px 5px 0px 0px #00408a, 0px 6px 5px #00408a;  ;
}

  #haeNappi:hover {
    top:59px;box-shadow: inset 0px 0.5px 0px #00408a, 0px 2px 0px 0px #00408a, 0px 2px 1px #00408a;

  }



#huomDiv {
  display:none;
  position:relative;
  width:400px;
  top:20px;
  left: 500px;
  background:white;
  border: 3px solid #b0df66;
  padding-left:30px;
  padding-right:30px;
  padding-top:20px;
  padding-bottom:20px;
  font-size:20px;
  font-weight:bold;
  text-align:center;
}

#vihreanuoli {
  position:absolute;
  left:290px;
  top:-32px;
}

#logonpaikka {
  position:absolute;
  right: 4%;
  top:57px;
  width: 300px;
  height: 110px;
  /*border: 1px solid grey;*/
}

#logo {
  position:relative;
  max-width: 300px;
  max-height: 110px;
  top:50%;left:50%; transform: translate(-50%,-50%);
}

#loginDiv {
  position:relative;
  float:right;
  margin-right: -2px;
  top:0px;
}

#loginButton {
  position:relative;
  top:18px;
  font-size: 15px;
  text-decoration:none;
  background-color: #002857;
  border:1px solid #002857;
  padding: 6px;
  border-radius: 8px 8px 0px 0px;
  color: #fff;
}
#loginButton:hover {
  background-color:#004799;
  border-bottom: 2px solid #004799;
}

#kirjautunut {
  float:left;
  margin-right: 15px;
  position: relative;
  top:20px;
}

#logoutButton {
  position:relative;
  top:18px;
  font-size: 15px;
  text-decoration:none;
  background-color:#002857;
  border:1px solid #002857;
  padding: 6px;
  border-radius: 8px 8px 0px 0px;
  color: #fff;
  margin-left:10px;
  border-left: 1px solid #004799;
}
#logoutButton:hover {
  background-color:#004799;
  border-bottom: 2px solid #004799;
}

#varauksetButton {
  position:relative;
  top:18px;
  float:left;
  font-size: 15px;
  text-decoration:none;
  background-color:#002857;
  border:1px solid #002857;
  border-right: 1px solid #004799;
  padding: 6px;
  border-radius: 8px 8px 0px 0px;
  color: #fff;
  margin-left:10px;
  display:none;
}
#varauksetButton:hover {
  background-color:#004799;
  border-bottom: 2px solid #004799;
}

#loginForm {
  position:absolute;
  right: 50px;
  top:50px;
  padding: 10px;
  border:1px solid grey;
  border-radius: 12px;
  background: #f2f2f2;
  z-index: 5;
  box-shadow: 0px 0px 5px 1px grey;
  display:none;
}

#loginReunus {
  padding: 5px 20px 20px 20px;
  background-color: #fff;
}

#kayttajanimi, #salasana {
  border: 1px solid grey;
  width:180px;
  height: 40px;
}

#kirjauduNappi {
  width:180px;
  height:39px;
  line-height:12px;
  background: #004799;
  color: #fff;;
  font-size: 15px;
  font-weight: bold;
  box-shadow: inset 0px 1px 0px #002857, 0px 1px 0px 0px #002857, 0px 4px 3px grey;
}

#kirjauduNappi:hover {
  top:2px;
  box-shadow: inset 0px 1px 0px #002857, 0px 1px 0px 0px #002857, 0px 2px 1px grey;
}

#loginForm p {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}

#loginForm h2 {
  color: #002857;
}

#rekisteroidyNappi {
  width:180px;
  height:39px;
  line-height:12px;
  font-size: 15px;
  background: #004799;
}

#rekisteroidyNappi:hover {
  top:2px;
  box-shadow: inset 0px 1px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 2px 1px grey;
}

#suljeLogin, #suljeRek {
   position:absolute;
   top: 10px;
   right: 10px;
   color: grey;
}

#suljeAika {
   position:absolute;
   top: 10px;
   right: 10px;
   color: grey;
}


#rekReunus {
  padding: 5px 20px 32px 20px;
  background-color: #fff;
}

#rekLomake {
  position:absolute;
  right: 50px;
  top:50px;
  padding: 10px;
  border:1px solid grey;
  border-radius: 12px;
  background: #f2f2f2;
  z-index: 5;
  box-shadow: 0px 0px 5px 1px grey;
  display:none;
}

#rekLomake .lomakeInput {
  width:220px;
  padding: 10px;
  border: 1px solid black;
  font-size:16px;
}

#rekLomake #lisatietoInput {
  width:451px;
}

#rekTallenna {
  position:relative;
  top: 10px;
  padding: 10px 25px;
  background: #004799;
  border-radius: 4px;
  box-shadow: inset 0px 1px 0px #002857, 0px 1px 0px 0px #002857, 0px 4px 3px grey;
}

#rekTallenna:hover {
  top:12px;
  box-shadow: inset 0px 1px 0px #002857, 0px 1px 0px 0px #002857, 0px 2px 1px grey;
}

/***************** MAINOKSET ***************/

#mainoksetDiv {
  text-align:center;
}

#mainoksetDiv table {
  position: relative;
  top:300px;
  display:inline-block;
  border-collapse: separate;
  border-spacing: 50px;
}

#mainoksetDiv img {
  max-width: 400px;
  max-height:400px;
}

.mainosDivit {
  width: 400px;
  height: 400px;
}

#varauksetDiv {
  position: relative;
  top:300px;
  display:none;

}

#varauksetDiv th {
  width:25%;
}

#varauksetDiv td {
  text-align:left;
  padding-right:20px;
  width:25%;

}

#varauksetTable {
  display:inline-block;
  border-collapse: separate;
  border-spacing: 0px;
}

.varausDivit {
  float:left;
  display: inline-block;
  min-width: 600px;
  width: 70% !important;
  max-width:700px !important;
  min-height:780px;
  margin: 15px;
  background-color: #fff;
  padding: 10px;
}

.varTied table {
  min-width: 620px;
  width: 100% !important;
  max-width:720px !important;
}

.voimassa {
  -webkit-box-shadow: 0px 0px 13px 6px #004799;
  -moz-box-shadow: 0px 0px 13px 6px #004799;
  box-shadow: 0px 0px 13px 6px #004799;
}

.eivoimassa {
  -webkit-box-shadow: 0px 0px 5px 3px grey;
  -moz-box-shadow: 0px 0px 5px 3px grey;
  box-shadow: 0px 0px 5px 3px grey;
}

#peruutaVaraus {
  font-size: 15px;
  text-decoration:none;
  background-color:#004799;
  border:1px solid #002857;
  padding: 6px 15px;
  border-radius: 8px;
  color: #fff;
  float:right;
  position:relative;
  top:-45px;
  margin-right:20px;
}
#peruutaVaraus:hover {
  background-color:#002857;
}

#kuittiNappi {
  font-size: 15px;
  text-decoration:none;
  background-color:#004799;
  border:1px solid #002857;
  padding: 6px 15px;
  border-radius: 8px;
  color: #fff;
  float:right;
  position:relative;
  top:-45px;
}
#kuittiNappi:hover {
  background-color:#002857;
}

.alleviivaus {
  text-decoration: underline;
}

/***************OTSIKOT*******************/


.vaihenro {
  height:28px;
}

.vaihenropieni {
  height:18px;
}

#autoluokkaSivu h2 {
  position:absolute;
  ;
}

.otsikotDiv {
  /*background-color: #fff;*/
  background-color: #fff;
  height: 60px;
  padding-top: 0px;
  margin-bottom: -68px;
  border-radius: 4px;
  padding-bottom: 8px;
  padding-left: 5px;
}

#vaihe1_2 {
  position: absolute;
  top:10px;
  left: 450px;
}

#vaihe1_3 {
  position: absolute;
  top:10px;
  left: 870px;
}

#vaihe1_4 {
  position: absolute;
  top:10px;
  left: 1200px;
}

#vaihe2_1 {
  position:absolute;
  top:10px;
  left:5px;
}

#vaihe3_2 {
  position:absolute;
  top:10px;
  left: 330px;
}

#vaihe4_3 {
  position:absolute;
  top:10px;
  left: 680px;
}

#lisatarvikeSivu h2 {
  position: absolute;
  left:350px;
  ;
}

#yhteystiedotSivu h2 {
  position:absolute;
  top:0px;
  left:750px;
  ;
}

#maksaminenSivu h2 {
  position:absolute;
  top:0px;  left:1045px;
  ;
  ;

}


/***************AUTOLUOKAN VALINTA -SIVU*******************/

#autoluokkaSivu {
  position: absolute;
  top: 300px;
  min-width: 1500px;
  width: 100%;
}

#suodatusDiv {
  position:relative;
  top:80px;
  width:99%;
  height: 60px;
  max-height:60px;
  font-family: Sans-serif;
  margin-left:10px;
  margin-right:5px;
  }


#suodatusDiv .lisatarviketxt {
  margin-left: 0px!important;
  position:relative;
  top: 4px;
}

#suodatusDiv select {
  -webkit-appearance: none!important;
  -moz-appearance: none!important;
  appearance: none!important;       /* remove default arrow */
  background-image: url("media/nuoliHarmaa.png")!important;   /* add custom arrow */
  background-repeat: no-repeat!important;
  background-position: right center!important;
  padding-left: 2px!important;
  margin:auto!important;
  -webkit-appearance: none!important;
}

#jarjestaP {
  position:absolute;
  top:0px;
  left:12px;;
}

#jarjestys {
  position:absolute;
  top:6px;
  left:95px;
  width:160px;
  font-family: Sans-serif;
  padding: 12px 15px 12px 8px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  -webkit-appearance: none;

  text-overflow: ellipsis;
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

#suodataP {
  position:absolute;
  top:0px;
  left:280px;}

.suodatus {
  position:absolute;
  top:6px;
  left:520px;
  width:110px;  font-family: Sans-serif;
  padding: 12px 20px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  -webkit-appearance: none;

  text-overflow: ellipsis;
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

#suodatusDiv .checkmark {
  left: -30px;
  border: 1px inset #ccc;

}

.cb {
  border:none !important;
  padding-left:60px;
  padding-right:90px;
}

#automalli {
 left:350px !important;
}

#suo1 {
 left: 690px !important;
}

#suo2 {
 left: 860px !important;
}

#suo3 {
 left: 1030px !important;
}

#fil1, #suodataP, #jarjestys, #jarjestaP, #suodatusDiv {
  }

#tuloksetDiv {
  display:none;
  position:relative;
  width: 30%;
  top: 120px;
  left: 50px;
  background:white;
  border: 3px solid #b0df66;
  padding-left:30px;
  padding-right:30px;
  padding-top:20px;
  padding-bottom:20px;
  font-size:20px;
  font-weight:bold;
  text-align:center;
}

#maksuEionnistu {
  display:none;
  position:absolute;
  width: 50%;
  top: 350px;
  left: 50px;
  background:white;
  border: 3px solid #b0df66;
  padding-top:20px;
  padding-bottom:20px;
  font-size:20px;
  font-weight:bold;
  text-align:center;
}

#autotaulukko {
  position: relative;
  top:84px;
  width: 100%;
  display:block;
}

#autoluokkaSivu th {
  min-width: 400px;
  width: 400px !important;
  max-width:400px !important;
  /*min-height: 400px;*/
  height:450px;
  border: 1px solid #d3d3d3;
}

.box {
  float:left;
 display: inline-block;
  min-width: 400px;
  width: 400px !important;
  max-width:400px !important;
  /*min-height: 400px;*/
  height:450px;
  border: 1px solid #d3d3d3;
  margin: 5px;
  background-color: #fff;
}

/*.autoluokkaDiv {
  min-width: 400px;
  width: 400px !important;
  max-width:400px !important;
  /*min-height: 400px;*/
  height:450px;
  border: 1px solid #d3d3d3;
}*/

.varattuAl {
  position:absolute;
  min-width: 350px;
  width: 400px !important;
  max-width:400px !important;
  min-height: 408px;
  height:auto !important;
  height:400px;
  background:grey;
  opacity:0.8;
  z-index:20;
}

.box:hover {
  border: 1px solid #888888;
  box-shadow: 5px 10px 8px #888888;
}

.autokuvadiv {
  position:relative;
  bottom:10px;
  width:auto;
  height:150px;
}

.autotPaku {
  position:absolute;
  top:95px;
  left:82px;
  width:auto;
  max-width:350px;
  height:140px;
}

.autot {
  position:absolute;
  top:105px;
  left:80px;
  width:auto;
  max-width:350px;
  height:140px;
}

.ikoni {
  vertical-align:middle;
  width:20px;
  float:right;
}

#pakuIkoni {
  width: 25px!important;
  position:relative;
  left:4px;
}

.ikonidiv{
  position:relative;
  width:90%;
  top:30px;
  bottom:25px;
  left: 20px;
}

.TDbold {
  font-weight: bold;
}

.autotiedot {
  position:absolute;
  width:90%;
  left: 20px;
  top:90px;

}

.eAuto {
  width:25px;
  box-shadow: -88px 1px 107px -58px rgba(121,230,55,0.5) inset;
  -webkit-box-shadow: -88px 1px 107px -58px rgba(121,230,55,0.5) inset;
  -moz-box-shadow: -88px 1px 107px -58px rgba(121,230,55,0.5) inset;
  border-radius: 36px;
  padding: 7px;
  float:none;
}

.ilmoitetutTiedot{
  float:left;
  margin-left:10px;
}

.alNimiDiv{
  position:relative;
  text-align:left;
  padding-left:15px;
  line-height: 20px;
}

.autoluokanNimi {
  position:absolute;
  top: 10px;
  text-align:left;
  padding-left:15px;
  line-height: 20px;
  max-width:350px;
  z-index:2;
}

#alnEsim {
  }

.autoluokkaMuutOtsikot, .lisatarvikeMuutOtsikot, .yhteystiedotMuutOtsikot, .maksaminenMuutOtsikot{
  }

.pakuInfoDiv {
  position:relative;
	float:right;
	margin-right: 20px;
  max-width:320px;
  top:-60px;
}

.lisatietoDiv {
  position:absolute;
  width: 230px;
  height:26px;
  z-index: 2;
  top:290px;
  left:-290px;
  background:#f2f2f2;
  border: 1px solid #f9f9f9;
  border-radius: 2px;
  text-align:center;
  -webkit-box-shadow: 2px 2px 4px -1px rgba(204,204,204,1);
  -moz-box-shadow: 2px 2px 4px -1px rgba(204,204,204,1);
  box-shadow: 2px 2px 4px -1px rgba(204,204,204,1);
  cursor:pointer;
}

.lisatietojaTxt {
  position:relative;
  bottom:2px;
  left: 5px;
  font-size:13px;
}

.pakuInfoKuvat{
  position:relative!important;
  top:3px;
  opacity:1!important;
}

.pakuInfoDiv .infotxt {
  visibility: hidden;
  width: 350px;
  max-width:350px;
  background: white;
  color: #000;
  text-align: center;
	font-size: 15px;
  padding: 10px;
  border:0px solid grey;
  border-radius: 6px;
  margin-bottom: 50px;
  position: absolute;
  right: 100%;
  z-index: 10;
  -webkit-box-shadow: 0px 2px 143px 37px rgba(85,85,85,0.61);
  -moz-box-shadow: 0px 2px 143px 37px rgba(85,85,85,0.61);
  box-shadow: 0px 2px 143px 37px rgba(85,85,85,0.61);
}

.pakuInfoDiv th:hover {
  box-shadow: 0px 0px 0px #fff !important;
}

.infotxt table {
  background: #f5f5f5;
  -webkit-box-shadow: 0px 0px 7px 0px rgba(204,204,204,1);
  -moz-box-shadow: 0px 0px 7px 0px rgba(204,204,204,1);
  box-shadow: 0px 0px 7px 0px rgba(204,204,204,1);
  margin: 15px;
}

#pakuMitatTable {
    max-width:330px;
}

#pakuMitatTable td {
  padding:7px 5px 7px 5px;
  text-align:left;
}


/* Show the tooltip text when you mouse over the tooltip container */
.pakuInfoDiv:hover .infotxt {
    visibility: visible;
}

.alkHinta {
  position:relative;
  top:-10px;
  text-align:right;
  padding-right:12px;
  color: #004799;
  display:none;
}

.maksutJaValitse {
  position:relative;
  width:380px;
  left:20px;
  top:104px;
  padding-top:30px;
  padding-bottom:70px;
  text-align:left;
  font-size: 15px;
}

.pitkatNapit {
  position:relative;
  top:-5px;
}

/*toimipistelaatikko*/
.saatavillaToimipaikasta {
  margin-top:2px;
  text-align:left;
  width:92%;
  display:inline-block;
  border:1px dotted #003399;
  padding-top:5px;
  padding-bottom:5px;
  font-size:16px;
  max-height:74px;
  overflow-y: auto;
  padding-left: 10px;
}

#eiVapaaAjanjakso {
  vertical-align: text-top;
  min-width:240px!important;
  width:240px!important;
  max-width:240px!important;
  color:#000;
  padding-top: 10px;
  text-align: center;
}

#maksanoutoTD {
  vertical-align: text-top;
  min-width:270px!important;
           width:270px!important;
           max-width:270px!important;   color:#000;
   padding-top: 10px;
   text-align: center;
}

.leftM20px {
  position:relative;
  left:-20px;
}

#maksahetiLabel, #maksanoutoLabel  {
  cursor: pointer;
}

#maksaheti, #maksanouto {
  opacity: 1;
  position: relative;
}

.autoluokkaValitse {
  position:relative;
  width: 100px !important;  height: 70px !important;
  bottom: 5px;
  left: -30px !important;  font-size: 20px;
  font-family: Sans-serif;
  }

.autoluokkaValitse:hover {
  top:-3px!important;box-shadow: inset 0px 1px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 1px 1px grey!important;}


#pitkatnapitTeksti:hover ~ #pitkatnapitHinta, #autoluokkaId:hover ~ #pitkatnapitHinta, #autoluokkaId:hover ~ #pitkatnapitTeksti{
  margin-top: 2px;
}

.autoluokkaVarattu {
  position:relative;
  white-space:normal;
  width: 100px !important;
  height: 70px !important;
  bottom: 5px;
  left: -30px;  font-size: 18px;
  font-family: Sans-serif;
  padding:5px !important;
  box-shadow: inset 0px 0px 0px #bdbdbd, 0px 2px 0px 0px #bdbdbd, 0px 2px 3px grey !important;}

.autoluokkaVarattu:hover {
  cursor: pointer;
  top:-3px!important;inset 0px 0px 0px #bdbdbd, 0px 1px 0px 0px #bdbdbd, 0px 1px 0px grey !important}

/******TUNTIKALENTERI******/

#tuntikalenteriDiv {
  position:absolute;
  width: 930px !important;
  height: auto;
  max-height: 750px !important;
  text-align:center;
  background: #fff;
  -webkit-box-shadow: 0px 11px 185px 93px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 11px 185px 93px rgba(0,0,0,0.75);
  box-shadow: 0px 11px 185px 93px rgba(0,0,0,0.75);
  border-radius: 8px;
  z-index: 5;
  display:none;
  margin-bottom:140px;
  padding-bottom: 50px;
  overflow:auto;
}

#tkTableDiv {
  width:98%;
  max-width:920px;
  margin-top:150px;
}

#tuntikalenteri {
  border-collapse: initial !important;
  border-spacing: 0px !important;
  border:none;
  position:absolute;
  top:0px;
  right:0px;
  width: 48% !important;
  height: 86% !important;
}

#tuntikalAl {
  position:absolute;
  text-align:left;
  left:25px;
  top:30px;
  width: 400px;
  max-width: 400px;
}

#tuntikalH3 {
  width: 400px;
  max-width: 400px;
  text-align:left;
  margin-top:140px;
  margin-left:30px;
  margin-bottom: -10px;
}

#suljeTk {
  position:absolute;
  top: 14px;
  right: 20px;
  color: #595959;
  border: 1px solid grey;
  border-radius: 4px;
  height:38px !important;
  padding-left:10px;
  padding-right:10px;
  font-size: 16px;
  font-family: Sans-serif;
  font-weight:normal;
  box-shadow: inset 0px 0px 0px #bdbdbd, 0px 3px 0px 0px #bdbdbd, 0px 3px 2px grey;
}

#suljeTk:hover {
  top:16px;
  box-shadow: inset 0px 0px 0px #bdbdbd, 0px 1px 0px 0px #bdbdbd, 0px 1px 1px grey;
}

#tkTanaanNappi {
  position:absolute;
  background: #004799;
  color: #fff;
  top: 16px;
  right: 325px;
  border: 2px solid #004799;
  border-radius: 4px;
  height:34px !important;
  width: 78px;
  /*padding-top:5px;
  padding-bottom:4px;*/
  /*padding-left:10px;
  padding-right:10px;*/
  font-size: 16px;
  font-weight:normal;
  font-family: Sans-serif;
  box-shadow: inset 0px 0px 0px #00408a, 0px 3px 0px 0px #00408a, 0px 3px 2px #00408a !important;
}

#tkTanaanNappi:hover {
  top:18px;
  box-shadow: inset 0px 0px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 1px 1px #00408a !important;
}

#tkOikeaNuoli {
  position:absolute;
  top: 16px;
  right: 260px;
  cursor:pointer;
  background: #004799;
  border: 2px solid #004799;
  border-radius: 4px;
  height:34px !important;
  padding-right: 11px;
  /*padding-top:4px;
  padding-bottom:8px;*/
  padding-left:14px;
  box-shadow: inset 0px 0px 0px #00408a, 0px 3px 0px 0px #00408a, 0px 3px 2px #00408a !important;
}

#tkOikeaNuoli:hover {
  top:18px;
  box-shadow: inset 0px 0px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 1px 1px #00408a !important;
}

#tkVasenNuoli {
  position:absolute;
  top: 16px;
  right: 410px;
  cursor:pointer;
  background: #004799;
  border: 2px solid #004799;
  border-radius: 4px;
  height:34px !important;
  padding-right: 17px;
  /*padding-top:4px;
  padding-bottom:8px;*/
  padding-left:8px;
  box-shadow: inset 0px 0px 0px #00408a, 0px 3px 0px 0px #00408a, 0px 3px 2px #00408a !important;
}

#tkVasenNuoli:hover {
  top:18px;
  box-shadow: inset 0px 0px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 1px 1px #00408a !important;
}

.tuntikalTR {

}

.tuntikalTH {
  background:#f5f5f5;
  padding-left: 6px;
  padding-right: 6px;
  height: 20px !important;
  font-size: 16px;
}

.tuntikalTDvar {
  background: #fff;
  border:1px solid #f2f2f2;
  height: 20px !important;
}

.tuntikalTDvap {
  border:1px solid #f2f2f2;
  background:white;
  height: 20px !important;
  cursor:pointer;
}

.tuntikalTDvap:not(.tuntikalTDmennyt):hover {
  background: #b0df66;
}

.tuntikalTDpaivystys {
  border:1px solid #f2f2f2;
  background: linear-gradient(145deg, #f4a676, #fff, #fff, #fff, #fff);
  height: 20px !important;
  cursor:pointer;
}

.tuntikalTDpaivystys:hover {
  background: #b0df66;
}

.tuntikalTDpaivystys .palkki.calSel {
  position:absolute;
  width:30px;
  height: 27px !important;
  background:#b0df66;
  margin-top:-13px;
  margin-left: 11px;
}

.tuntikalTDvapKiinni {
  border:1px solid #f2f2f2;
  background: #dbdbdb;
  height: 20px !important;
}

.tuntikalTDvapKiinni:not(.tuntikalTDmennyt):hover {
  background: #b0df66;
}

.tuntikalTDvar .palkki {
  position:absolute;
  width:30px;
  height: 27px !important;
  background:#f77d7d;
  margin-top:-13px;
  margin-left: 11px;
}

.tuntikalTDvap .palkki.calSel {
  position:absolute;
  width:30px;
  height: 27px !important;

  background:#aad369;
  margin-top:-13px;
  margin-left: 11px;
}

.tuntikalTDvapKiinni .palkki.calSel {
  position:absolute;
  width:30px;
  height: 27px !important;

  background:#aad369;
  margin-top:-13px;
  margin-left: 11px;
}

.tuntikalTDmennyt {
  border:none;
  background: repeating-linear-gradient(
  45deg,
  transparent,
  transparent 3px,
  #dbdbdb 3px,
  #fff 6px
);
  z-index:6;
}

.tuntikalTDmennyt .palkki {
  display:none;
}

#tkValitse, #tkValitseNoudettaessa {
  position:absolute;
  bottom: 40px;
  right: 500px;
  padding-top:8px;
  padding-bottom:8px;
  padding-left:18px;
  padding-right:18px;
  border: 1px solid #00408a;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: normal;
  font-family: Sans-serif;
  background: #004799;
  -webkit-appearance: none;
  box-shadow: inset 0px 1px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 4px 3px  #00408a;
}

#tkValitse:hover, #tkValitseNoudettaessa:hover {
  position: absolute;
  bottom:38px;
  box-shadow: inset 0px 1px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 2px 1px  #00408a;
}


#tkValitseKm, #tkValitseHetimaksu {
  position:absolute;
  bottom: 95px;
  right: 500px;
  padding-top:8px;
  padding-bottom:8px;
  padding-left:18px;
  padding-right:18px;
  border: 1px solid #00408a;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: normal;
  font-family: Sans-serif;
  background: #004799;
  -webkit-appearance: none;
  box-shadow: inset 0px 1px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 4px 3px  #00408a;
}

#tkValitseKm:hover, #tkValitseHetimaksu:hover {
  position: absolute;
  bottom:93px;
  box-shadow: inset 0px 1px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 2px 1px  #00408a;
}

/***************LISÄTARVIKKEEN VALINTA -SIVU*******************/

#overlay1 {
  position: fixed;
  display: block;
  width: 280px;
  top: 370px;
  bottom:0px;

  /* color with alpha transparency */
  background: rgba(192,192,192, 0.3);

}

#hintaYhteensaDiv{
  border: 1.5px solid#002857 ;
  background: #004799;
  position: absolute;
  left: 7px;
  top:750px;
  width: 260px;
  height: 54px;
  font-size: 18px;
  font-weight:bold;
  text-align: center;
  padding-top:12px;
  z-index: 4;
  color:#fff;
  display:none;
  }

.hintaYhteensa{
  position:relative;
  top:-16px;
  font-size:22px;
  color:#fff;
}

#lisatarvikeVaihtoehdot #jatka2 {
  position:relative;
  float:right;
  width: 150px;
  height:50px;
  font-size:22px;
  line-height:2px;
  margin-top: 30px;
  margin-bottom: 30px;
  box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 3px 3px grey;  font-family: Sans-serif;
  }

#takaisin2 {
  position:relative;
  width: 150px;
  height:50px;
  font-size:22px;
  line-height:2px;
  margin-top: 30px;
  margin-bottom: 30px;
  background: #AAAAAA;
  color:black;
  border:0;
  box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 4px 3px grey;  font-family: Sans-serif;
  }

#jatka2:hover {
  top:2px;box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 1px 1px grey!important;}

#takaisin2:hover {
  top:2px;box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 2px 1px grey;}

#lisatarvikeSivu {
  position: absolute;
  top: 300px;
  min-width: 1500px;
  width: 100%;
}

.valittuAuto {
  width: 200px;
  height: auto;
  padding-bottom: 15px;
  z-index:1;
}

.valittuAutoluokka {
  position:absolute;
  text-align:left;
  top:100px;
  left: 20px;
  width: 210px;
  height: auto;
  z-index: -1;
}

#valittuAutoluokkaDiv {
  position:relative;
}

#ValAutontiedotDiv {
  line-height:20px;}

#lisatarvikeVaihtoehdot {
  position:absolute;
  top: 100px;
  left: 350px;
}

#lisatarvikeVaihtoehdot table{
  width: 700px;
  height: auto;
}

#lisatarvikeVaihtoehdot td{
  border-bottom: 1px solid grey;
  height: 68px;
  max-height: 68px;
}

#lisatarvikeVaihtoehdot .lisatarvikeinfo {
  position:relative;
  top:-12px;
  font-size: 17px;
  color: #EF403F !important;
  margin-left: 0px;

}

.lisatarvikeHinnat, .lisatarvikeHinnatNro {
  font-size: 20px;
  position:relative;
  text-align:right;
  vertical-align: middle;
  width: 100px;
}

#lisatarvikeSivu label {
  display: block;
  text-align: left;
  font-size: 20px;
}


#lisatarvikeSivu .checkmark {
  margin-top:10px;
}

/*#lisatarvikeA, #lisatarvikeB, #lisatarvikeC {
  margin-left: 150px;
  max-height: 63px;
}*/

.lisatarviketxt {
  margin-left: 150px;
  position:relative;
  top:10px;
}

#omavastuu1, #omavastuu2, #omavastuu3, #kilometrit1, #kilometrit2, #kilometrit3 {
  margin-left: 50px;
  max-height: 70px;
  padding-top:6px;
  }

#omavastuu table {
  position:relative;
  top:-15px;
}

/*#omavastuu .lisatarviketxt {
	padding-left: 65px;
}*/

.container .lisatarvikeinfo {
  margin-left: 150px!important;
}

#omavastuu .checkmark3 {
	margin-top: 20px;
}


#km1, #km2, #km3 {
  margin-top: 20px !important;
}

#omavastuu .lisatarviketxt {
  margin-left: 70px;
}

#omavastuu .lisatarvikeinfo {
  margin-left: 70px;
  color: #EF403F !important;
}

#kilometrit .lisatarviketxt, #kilometrivalinta .lisatarviketxt {
  margin-left: 70px;
}

#kilometrit .lisatarvikeinfo, #kilometrivalinta .lisatarvikeinfo {
  margin-left: 70px;
  top: 0px!important;
  color: #EF403F !important;
}


.lisatarvikeLabel {
  position: relative;
  left: 130px;
  /*bottom: -10px;*/
  margin-left: 20px;
  min-width: 400px;
  max-width: 400px;
  max-height: 63px;
  overflow:auto;

}

.maaravalinta {
  float: left;
  width: 63px;
  height:35px;
  padding: 3px 0 0 0;
  text-align: center;
  position:absolute;
  left:34px;
  border: 1px solid grey !important;
  font-size: 20px;
}

.mNapit {
  background: url("media/miinusVari.png") no-repeat;
  background-size: 25px 25px;
  background-position: center;
  text-indent: -9999px;
  cursor: pointer;
  width:30px;
  height:30px;
  float: left;
  position: absolute;
  z-index:2;
}

.pNapit {
  background: url("media/plusVari.png") no-repeat;
  background-size: 25px 25px;
  background-position: center;
  text-indent: -9999px;
  cursor: pointer;
  width:30px;
  height:30px;
  float: left;
  position: absolute;
  left:100px;
  z-index:2;
}

/*.miinus1 {
  top: 22px;
}

.plus1 {
  top: 22px;
}*/

.miinus2 {
  top: 95px;
}

.plus2 {
  top: 95px;
}

.miinus3 {
  top: 168px;
}

.plus3 {
  top: 168px;
}

.miinus4 {
  top: 241px;
}

.plus4 {
  top: 241px;
}




/***************YHTEYSTIEDOT -SIVU*******************/


#overlay2 {
  position: fixed;
  display: block;
  width: 680px;
  top: 370px;
  bottom:0px;

  /* color with alpha transparency */
  background: rgba(192,192,192, 0.3);

}

#jatka3 {
  position:relative;
  float:right;
  width: 150px;
  height:50px;
  font-size:22px;
  line-height:2px;
  margin-top: 20px;
  margin-bottom: 30px;
  box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 3px 3px grey;  font-family: Sans-serif;
  }

#takaisin3 {
  position:relative;
  width: 150px;
  height:50px;
  font-size:22px;
  line-height:2px;
  margin-top: 20px;
  margin-bottom: 30px;
  background: #AAAAAA;
  color:black;
  border:0;
  box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 4px 3px grey;  font-family: Sans-serif;
  }

#jatka3:hover {
  top:2px;box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 1px 1px grey!important;}

#takaisin3:hover {
  top:2px;box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 2px 1px grey;}

#yhteystiedotSivu {
  position: absolute;
  top: 300px;
  min-width: 1500px;
  width: 100%;
}

.valitutLisatarvikkeet {
  position:absolute;
  top:100px;
  left: 320px;
  width: 300px;
  height: auto;
  overflow-x:auto;
  color: rgba(130,130,130, 1);
  line-height:20px;}


.valitutLisatarvikkeet .valLT{
  min-width: 100px;
}

.valitutLisatarvikkeet td {
  padding-right: 5px;
}

td .valittuMaara {
  width:30px;
}

#pikkuListaTable {
  border-bottom: 1px solid grey;
  padding-bottom: 10px;
  width:100%;
}

.yritysChecked {
  display:none;
}

.kuljettajaChecked {
  display:none;
}

.yritysCheck {
  padding-left: 35px;
  position:relative;top:7px;}

.kuljettajaCheck {
  position:relative;top:7px;}

#yritysLabel .checkmark {
  position: absolute;
  left: 0;
  height: 25px;
  width: 25px;
  margin-left:0px;
  margin-bottom:0px;
}

#kuljettajaLabel {
  position:absolute;
  left: 200px;
  max-width:250px!important;
}

#kuljettajaLabel .checkmark {
  position: absolute;
  left: -85px;
  height: 25px;
  width: 25px;
  /*margin-left:230px;*/
  margin-bottom:0px;
}

#yhteystietolomake {
  position:absolute;
  left:750px;
  max-width: 500px;
  top:100px;
  line-height:18px;}

#yhteystietolomake .lomakeInput {
  width:220px;
  padding: 10px;
  border: 1px solid black;
  font-size:16px;
}

#yhteystietolomake #viite {
  width:451px;
}

#yhteystietolomake #osoiteInput {
  width:451px;
}

#yhteystietolomake #kosoiteInput {
  width:451px;
}

#yhteystietolomake #lisatietoInput {
  width:451px;
}

#yhteystietolomake #klisatietoInput {
  width:451px;
}

/***************MAKSUTIEDOT-SIVU*******************/


#takaisin4 {
  position:relative;
  width: 150px;
  height:50px;
  font-size:22px;
  line-height:2px;
  margin-bottom: 30px;
  top: 10px !important;
  background: #AAAAAA;
  color:black;
  border:0;
  box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 4px 3px grey;  font-family: Sans-serif;
  }

#takaisin4:hover {
  top:12px;box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 2px 1px grey;}

#maksaminenSivu {
  position: absolute;
  top: 300px;
  min-width: 1500px;
  width: 100%;
}

#overlay3 {
 	position: fixed;
	display: block;
	width: 1030px;
	top: 370px;
	bottom:0px;

    /* color with alpha transparency */
    background: rgba(192,192,192, 0.3);

}


#taytetytTiedot {
  position:absolute;
  top: 100px;
  left:680px;
  display:block;
  width: 336px;
  max-height: 600px;
  overflow:auto;
  color: rgba(130,130,130, 1);
  line-height:20px;}

#taytetytTiedot td {
  padding-right: 20px;
}

#taytetytTiedot table {
  display:block;
  width:336px;
  z-index:5;
  /*overflow-x:auto;*/
}


#maksutapa {
  position:absolute;
  top:100px;
  left: 1050px;
  width: 460px;
  padding-bottom: 100px;
  line-height:18px;}

#maksutapa .container2 {
  font-size:18px;
}

#noutohinta, #hetihinta {
  color: #004799;
}

#valittuNPdiv{
  position:relative;
  left:0px;
  top:0px;
  width:230px;
  max-width:230px;
  overflow:auto;
}

#valittuNoutoPalautus th {
  text-align:left;
  padding-right:10px;
}

#maksuerittelydiv{
  position:absolute;
  top:0px;
  right:0px;
  width: 210px;
  max-width:210px;
  height: 170px;
  border-left:1px solid grey;
  padding-left:20px;
}

#maksuerittelydiv th{
  text-align:left;
}


#maksuerittely {
  width: 210px;
  margin-bottom: 50px;
}

.maksuerittelyHinta {
    width:80px;}

tr#maksuerittelyYht td {
  border-top: 1px solid grey !important;
}

#maksutapadiv{
  position:relative;
  top: 30px;  left:10px;  padding-bottom:35px;  width: 90%;
  padding-right: 5px;
}

#maksutapadiv h4 {
  }

#maksahetiDiv, #noutomaksuDiv {
    padding-top: 15px;
  padding-left: 10px;
  padding-bottom:10px;
  padding-right:8px;
  box-shadow:none;
}

#maksahetiDiv {
  border-radius: 8px 8px 0px 0px;  margin-bottom: 0px;
}
#noutomaksuDiv {
  border-radius: 8px 8px 8px 8px;  margin-bottom: 10px;
}

#maksunoudettaessa {
  }

#noutoPeruutusehdot .checkmark {
  position: absolute;
  left: 0;
  height: 25px;
  width: 25px;
  margin-left:43px;
}

.noutoPeruutusTxt, .maksuPeruutusTxt {
  position:relative;
  left: 80px;
  bottom: 3px;
  max-width: 90%;
  display: block;
}

#maksuPeruutusehdot .checkmark {
  position: absolute;
  left: 0;
  height: 25px;
  width: 25px;
  margin-left:43px;
}

#maksuPeruutusehdot {
  width:350px;
  max-width:350px;
  display: none;  margin-top:15px;
  border-top: 1px solid #ccc;
  padding-top: 15px;
}

#verkkomaksuLabel {
  width:350px;
  max-width:350px;
  display:none;
  font-size: 16px;
  margin-left:50px;
  padding-bottom: 30px;
}

#verkkomaksu {
  margin-bottom: 30px;
}

#korttimaksuLabel {
  width:350px;
  max-width:350px;
  display:none;
  font-size: 16px;
  margin-left:50px;
  margin-bottom:10px;
}

#card-container {
  display:none;
  margin-left: 70px;
}

#verkkomaksuInfo {
  display:none;
  margin-top: 15px;  width:80%;
  margin-left: 33px;
  margin-bottom: 15px;
  width: 80%;
}

 #korttimaksuInfo{
   display:none;
   margin-left: 70px;
   margin-top: 20px;
   margin-bottom: 30px;
 }

#noutoPeruutusehdot {
  width:350px;
  max-width:350px;
  display:block;
  padding-top: 15px;
}

#noutoPeruutusehdot .vakioteksti {
  border-top: 1px solid #ccc;
  padding-bottom:0px;
}

#verkkopankki {
  display:none;
  position:relative;
  left:50px;
}

#maksaminenSivu h4 {
  padding-left: 0px;
  width:200px;
}

#ehdot{
  position:relative;
  left:10px;
  padding-top:25px;
  /*border-top: 1px solid grey;*/
    
}

.ehdottxt {
	position: relative;
	left: 90px;  display: table-cell;
  width:350px;
  }

#sop.checkmark {
  margin-left:43px!important;}

#marktxt {
	top:10px;
}

#sopimusehdot{
  position:relative;
  top:0px;
}

#tietosuojalauseke {
  margin-left: 55px;
  top: 0px;
  position: relative;
}

#palveluntarjoaja {
  margin-bottom: 0px;
  margin-left: 33px;
  position:relative;
  bottom:20px;
  color: grey;
}

#maksuehdot{
  position:relative;
  margin-left: 33px;
  margin-bottom: 10px;
  display:none;
}

#yhdensuuntainen{
  display:block;
  position:relative;
  top:30px;
  margin-left: 30px;
  width:300px;
}

#markkinointi {
  position:relative;
  top:20px;
  left: -8px;
}

#markkinointi #mark {
  position:absolute;
  top:10px;
}

#seurantatietoinfo{
  padding: 10px;
  display:inline-block;
  width:100%;
}

#noutoTarkistus, #hetiTarkistus, #sopimusTarkistus {
  display:none;
}

#vahvistusNappi {
  position:relative;
  left: 120px;
  width: 170px;
  height:50px;
  font-size: 18px;
  top:10px !important;
  box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 3px 4px grey;    line-height: 10px;
}

#vahvistusNappi:hover {
  top:12px !important;
  box-shadow: inset 0px 1px 0px #b9b9b9, 0px 1px 0px 0px #9c9c9c, 0px 1px 1px grey!important;}

#pyyntoNappi {
  position:relative;
  left: 120px;
  width: 218px;
  height:50px;
  font-size: 18px;
  top:10px !important;
  line-height: 10px;
}

#pyyntoNappi:hover {
  top:12px !important;
}

.maksuerittelyHinta, .valLThinta {
  text-align:right;
}

.notifyjs-container {
  width:350px;
}


/*************PIENEMPI NÄYTTÖ************/

@media screen
  and (min-width: 1201px)
  and (max-width: 1370px) {

  html {
    min-width: 1215px;
    max-width: 1350px;
  }

  body {
    width:100%;
  }

  .flagInput {
    height:20px;
    margin-top:3px;
    margin-left:10px;
    margin-right:10px;
  }

  #flagDiv {
    height: 26px;
  }

  #loginButton, #logoutButton, #varauksetButton {
    top:0px;
    font-size: 14px;
  }
  #loginButton, #logoutButton {
    margin-right:10px;
  }

  #kirjautunut {
    margin-right: 10px;
    top:2px;
  }

  header {
    max-width: 1350px;
    min-width: 1215px;
    top:30px;
  }

  hr {
    max-width: 1350px;
    min-width: 1215px;
    top: 10px;
    right:auto;
  }

  #varaushakuvalinnat {
	margin-left: 150px;
	top:50px;
  }

  #alkaatxt {
    padding-left:10px;
    max-width:146px;
    margin-top: 65px;
    ;
    color: #fff;
  }

  #paattyytxt {
    padding-left:10px;
    max-width:146px;
    margin-top: 44px;
    ;
    color: #fff;
  }


  
    #haeNappi {
    	left: 710px;
      top: 57px;
      width: 150px;      height: 105px;
      line-height:30px;
      padding-top:20px;
      padding-bottom:20px;
      padding-left: 10px;      padding-right: 10px;    }

  


  #logonpaikka {
    max-width: 200px;
    right: 30px;
  }

  #logo {
      max-width: 200px;

  }

/**OMAT VARAUKSET**/

.varausDivit {
  min-width: 530px;
  width: 530px!important;
  max-width:530px !important;
  min-height:780px;
  margin: 15px;
  background-color: #fff;
  padding: 10px;
}

.varTied table {
  min-width: 530px;
  width: 530 !important;
  max-width:530px !important;
}

/**OTSIKOT**/


  #vaihe1_2 {
    top:-40px;
    left: 360px;
  }

  #vaihe1_3 {
    top:-40px;
    left: 670px;
  }

  #vaihe1_4 {
    top:-40px;
    left: 930px;
    ;
  }

  #vaihe2_1 {
    top:-40px;
    left:0px;
  }

  #vaihe3_2 {
    top:-40px;
    left: 240px;
  }

  #vaihe4_3 {
    top:-40px;
    left: 500px;
  }

  #autoluokkaSivu h2 {
    top:-50px;
  }

  #lisatarvikeSivu h2 {
    top:-50px;
    left:280px;
  }

  #yhteystiedotSivu h2 {
    top:-50px;
    left:540px;
  }

  #maksaminenSivu h2 {
    top:-50px;    ;
    left:800px;
    font-size:22px;
  }

/***************AUTOLUOKAN VALINTA -SIVU*******************/

  #autoluokkaSivu {
    min-width: 1215px;
    max-width: 1350px;
  }

  #suodatusDiv {
    top:30px;
  }

  #jarjestaP {
    position:absolute;
    top:0px;
    left:0px;
  }

  #jarjestys {
    top:6px;
  }

  #automalli {
    top:6px!important;
  }

  #vaihteistoS {
    top:6px;
  }

  #autotaulukko {
    min-width: 1215px;
    /*max-width: 1215px!important;*/
    top:30px;
  }

  #maksanoutoTD{
    vertical-align: text-top;
    min-width:270px;
    width:270px;
    max-width:270px;
  }

/***************LISÄTARVIKKEEN VALINTA -SIVU*******************/

  #overlay1 {
    width: 250px;
    top: 320px;
  }

  #lisatarvikeSivu {
    min-width: 1215px;
    max-width: 1350px;
  }

  .valittuAutoluokka {
    top:50px;
  }


  #hintaYhteensaDiv{
    top:720px;
    width: 230px;
    height: 60px;
  }

  .hintaYhteensa {
    top:-16px;
  }

  #lisatarvikeVaihtoehdot {
    top: 40px;
    left: 300px;
  }

  .lisatarvikeHinnat, .lisatarvikeHinnatNro {
    font-size: 20px;
  }

  #lisatarvikeSivu label {
    font-size: 20px;
  }



/***************YHTEYSTIEDOT -SIVU*******************/


  #overlay2 {
    top: 320px;
    width: 510px;
  }

  #yhteystiedotSivu {
    min-width: 1215px;
    max-width: 1350px;
  }

  .valitutLisatarvikkeet {
    top:50px;
    left: 240px;
    width: 250px;
    max-width:250px;
    padding-left: 5px;
    border-left: 1px solid grey;
	overflow:auto;
  }
  .valitutLisatarvikkeet .valLT{
	  min-width: 100px;
  }

  #yhteystietolomake {
    top:50px;
    left:560px;
  }

/***************MAKSUTIEDOT-SIVU*******************/


  #maksaminenSivu {
    min-width: 1215px;
    max-width: 1350px;
  }

  #overlay3 {
	width: 810px;
	top: 320px;
  }


  #taytetytTiedot {
    top: 50px;
    left: 500px;
    width: 300px;
    border-left: 1px solid grey;
  }

  .asiakastiedot {
    padding-left: 15px;
  }

  #taytetytTiedot table {
    width:300px;
    padding-bottom:20px;
  }

  #maksutapa {
    top:40px;
    left: 830px;
    width: 250px;
    padding-left: 10px;
  }

  #maksuerittelydiv{
    position:relative;
    top:0px;
    left:0px;
    border-left:0px solid grey;
    margin-top:20px;
    padding-left:0px;
  }

  #maksutapadiv{
    top:-60px;    left: 10px;;
    padding-bottom:15px;
    width:350px;
  }

  #maksahetiDiv, #noutomaksuDiv {
    width: 320px;
  }

  .maksuPeruutusTxt, .noutoPeruutusTxt {
    max-width:83%;
  }

  #maksutapa .container2 {
    font-size:16px;
      }

  #noutoPeruutusehdot, #maksuPeruutusehdot {
    width: 300px;
    max-width:300px;
  }

  #ehdot {
    margin-top:-90px;  }

  #maksutapavalinta {
    width:310px!important;
  }

  #seurantatietoinfo{
    width:115%;
  }

  #vahvistusNappi {
    position:relative;
    left: 120px;
    width: 170px;
    height:50px;
    font-size: 18px;
    top:10px !important;
  }

  #vahvistusNappi {
    left: 220px;
    top: -78px !important
  }

  #vahvistusNappi:hover {
    top: -76px !important;
  }

}

/********macbook air 13 tuumaa********/

@media screen
  and (min-device-width: 1440px)
  and (max-device-width: 1440px)
  and (orientation:landscape)
  {

     html {
        min-width: 1440px;
        max-width: 1440px;
      }

      body {
        width: 100%;
      }

      header, hr {
        max-width: 1420px;
        min-width: 1420px;
      }

      header {
    	  height: 180px;
       	top:45px;
    	  left:0px;
      }

      hr {
        top:-10px;
      }

      #varaushakuvalinnat {
      width:550px!important;    	margin-left: 180px;
    	top:20px;
      }

      #alkaatxt {
        margin-top: 32px;      }

      #paattyytxt {
    	margin-top: 32px;      }

      .sijaintiAlkaa, .sijaintiLoppuu {
        font-size:13px;
      }

      .tphakuInput {
        padding: 0;
        padding-left: 10px;
        height:42px!important;
      }

      /*style items (options):*/
      .select-items {
        position: absolute;
        background: #fff;
        top: 40px;
        left: -232px!important;
        right: 0;
        width: 370px;
        height: auto;
        max-height: 700px;
        overflow:auto;
        z-index: 99;
        border: 1px solid grey;
        white-space: pre;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
         -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
         box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
         padding:0;
         display:none;
      }

      #kamppisteksti {
        margin-top: 3px;      }

      #kampanjakoodi {
        margin-top: 3px;        width: 220px;
      }

      #haeNappi {
      	left: 740px;        top:26px;        width: 150px;        ;
        line-height:30px;
        height:106px;
        padding-top:20px;
        padding-bottom:20px;
        padding-left: 10px;        padding-right: 10px;      }

      #haeNappi:hover {
        top: 28px;      }

      #logonpaikka {
        max-width: 140px;
        right: 20px;
        top:25px;
      }

      #logo {
          max-width: 140px;
      }


    /**OTSIKOT**/

      #vaihe1_2 {
        top:-60px;
        left: 350px;
      }

      #vaihe1_3 {
        top:-60px;
        left: 660px;
      }

      #vaihe1_4 {
        top:-60px;
        left: 910px;
      }

      #vaihe2_1 {
        top:-60px;
        left:0px;
      }

      #vaihe3_2 {
        top:-60px;
        left: 240px;
      }

      #vaihe4_3 {
        top:-60px;
        left: 490px;
      }

      #autoluokkaSivu h2 {
        top:-70px;
      }

      #lisatarvikeSivu h2 {
        top:-70px;
        left:280px;
      }

      #yhteystiedotSivu h2 {
        top:-70px;
        left:540px;
      }

      #maksaminenSivu h2 {
        top:-70px;
        left:800px;
        line-height:30px;
      }



    /***************AUTOLUOKAN VALINTA -SIVU*******************/



      #autoluokkaSivu {
        min-width: 1420px;
        max-width: 1420px;
      }

      #suodatusDiv {
        display:block;
        position: relative;
        top: 2px;
        width: 99%;
        height: 60px;
        max-height: 60px;
        font-family: 'Titillium Web', 'Fjalla One';
        margin-left: 10px;
        margin-right: 5px;
      }

      #vaihteistoS, #automalli {
        //width: 150px;
        //margin-left:10px;
        //margin-bottom:8px;
        top:5px;
      }

      #autotaulukko {
        min-width: 1010px;
        /*max-width: 1000px;*/
        top: 0px;
      }

      #maksanoutoTD {
        vertical-align: text-top;
        min-width: 280px !important;
        width: 280px !important;
        max-width: 280px !important;
        color: #000;
        padding-top: 0px;
      }

      #tuntikalenteriDiv {
        position:absolute;
        width: 930px !important;
        /*height: 780px !important;*/
        max-height: 780px !important;
        text-align:center;
        background: #fff;
        -webkit-box-shadow: 0px 11px 185px 93px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 11px 185px 93px rgba(0,0,0,0.75);
        box-shadow: 0px 11px 185px 93px rgba(0,0,0,0.75);
        border-radius: 8px;
        z-index: 5;
        display:none;
        margin-bottom:140px;
      }


    /***************LISÄTARVIKKEEN VALINTA -SIVU*******************/



      #overlay1 {
        top: 300px;
        width: 240px;
    	bottom:0px;
      }

      #takaisin2 {
        margin-top:0px;
      }

      #jatka2 {
        margin-top:0px !important;
      }

      #lisatarvikeSivu {
        min-width: 1400px;
        max-width: 1400px;
      }

      .valittuAutoluokka {
        top:30px;
      }

      #hintaYhteensaDiv {
        font-size: 18px;
        width:220px;
        
        top: 660px;
        height: 60px;
        padding-top:8px;
              }

      .hintaYhteensa{
        top:-16px;

      }

      #lisatarvikeVaihtoehdot {
        top: 20px;
        left: 300px;
        font-size: 20px;
      }

      #omavastuu1, #omavastuu2, #omavastuu3, #kilometrit1, #kilometrit2, #kilometrit3 {
        min-width: 130px;
        max-width: 50%;
        max-height: 75px;
        left:0px;
        padding-top: 5px;
      }

      #omavastuu table {
        top:-25px;
      }


    /***************YHTEYSTIEDOT -SIVU*******************/
      #overlay2 {
      top: 300px;
    	width: 500px;
    	bottom:0px;
      }

      #yhteystiedotSivu {
        min-width: 1400px;
        max-width: 1400px;
      }


      #yhteystietolomake {
        top:50px;
        left:560px;
      }

      .valitutLisatarvikkeet {
        top:30px;
    	left: 252px;
    	border-left: 1px solid grey;
    	padding-left: 10px;
    	max-width: 220px;
      }

      #yhteystietolomake {
        top:30px;
        left:550px;
      }

      .valitutLisatarvikkeet {
        width: 225px;
        max-width:225px;
      }

      .valLT, valittuMaara, .valLThinta {
        padding-right:5px !important;
      }

    /***************MAKSUTIEDOT-SIVU*******************/

      #overlay3 {
        top: 300px;
    	  width: 800px;
    	  bottom:0px;
      }

      #maksaminenSivu {
        min-width: 1400px;
        max-width: 1400px;
      }

      #takaisin4 {
        left: -10px;
      }

      #hintaYhteensaDiv {
        display:none;
      }

      #taytetytTiedot {
        top: 30px!important;
      	left: 500px!important;
      	border-left: 1px solid grey;
      	padding-left: 10px!important;
        width: 286px!important;
      }

       #taytetytTiedot table {
         width: 280px;
         overflow-x:auto;
     }

     #valittuNPdiv{
       margin-top:10px;
       width:100%;
       max-width:270px;
       overflow:auto;
     }



    #maksuerittely {
      margin-top:10px;
      margin-bottom:0px;
    }

    #maksutapa {
      top:40px;
      left: 830px;
      width: 550px;
      padding-left: 10px;
    }

    #maksuerittelydiv{
      position:relative;
      border-left:1px solid grey;
      top:-130px;
      padding-left:20px;
      width:100%;
      max-width:270px;
      float:right;
    }

    #maksutapadiv{
      top: 0px;
      left:10px;
      padding-bottom:15px;
    }

    #maksutapa .container2 {
      font-size:16px;
    }

    #noutoPeruutusehdot, #maksuPeruutusehdot {
      width: 300px;
    }

    #ehdot {
      margin-top:0px;
    }

    #vahvistusNappi {
      position:relative;
      left: 120px;
      width: 184px;
      height:50px;
      font-size: 22px;
      top:10px !important;
    }

    #vahvistusNappi:hover {
      top: 12px !important;
    }

  }


/****************/


/**********TABLETIT (iPad)***********/

@media screen
  and (min-device-width: 768px)
  and (max-device-width: 1200px)
  and (orientation:landscape)
  {



 html {
    min-width: 1190px;
    max-width: 1190px;
  }

  body {
    width: 100%;
  }

  header, hr {
    max-width: 1170px;
    min-width: 1170px;
  }

  header {
	  height: 180px;
   	top:45px;
	  left:0px;
  }

  hr {
    top:-10px;
  }

  #varaushakuvalinnat {
  width:550px!important;	margin-left: 180px;
	top:20px;
  }

  #FRpakutDiv{
    width:100%;
    height:29px;
    border-bottom:0px solid #0383d3;
  }

  #FRpakutOts{
    position:absolute;
    width:100%;
    text-align:center;
    font-weight:bold;
    color:#000;
    top:-13px;
    font-size:16px;
    text-transform:uppercase;
  }

  #alkaatxt {
    margin-top: 32px;  }

  #paattyytxt {
	margin-top: 32px;  }

  .sijaintiAlkaa, .sijaintiLoppuu {
    font-size:13px;
  }

  .tphakuInput {
    padding: 0;
    padding-left: 10px;
    height:42px!important;
      }

  /*style items (options):*/
  .select-items {
    position: absolute;
    background: #fff;
    top: 50px;
    left: -110px!important;
    right: 0;
    width: 370px;
    height: auto;
    max-height: 700px;
    overflow:auto;
    z-index: 99;
    border: 1px solid grey;
    white-space: pre;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
     -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
     padding:0;
     display:none;
  }


  #kamppisteksti {
    margin-top: 3px;  }

  #kampanjakoodi {
    margin-top: 3px;    width: 220px;
  }

  #haeNappi {
  	left: 740px;    top:26px;
    width: 150px;    ;
    line-height:30px;
    height:106px;
    padding-top:20px;
    padding-bottom:20px;
    padding-left: 10px;    padding-right: 10px;  }

  #haeNappi:hover {
    top: 28px;
  }

  #logonpaikka {
    max-width: 140px;
    right: 20px;
    top:25px;
  }

  #logo {
      max-width: 140px;
  }


/**OTSIKOT**/

  #vaihe1_2 {
    top:-60px;
    left: 350px;
  }

  #vaihe1_3 {
    top:-60px;
    left: 660px;
  }

  #vaihe1_4 {
    top:-70px;
    left: 910px;
  }

  #vaihe2_1 {
    top:-60px;
    left:0px;
  }

  #vaihe3_2 {
    top:-60px;
    left: 240px;
  }

  #vaihe4_3 {
    top:-60px;
    left: 490px;
  }

  #autoluokkaSivu h2 {
    top:-70px;
  }

  #lisatarvikeSivu h2 {
    top:-70px;
    left:280px;
  }

  #yhteystiedotSivu h2 {
    top:-70px;
    left:540px;
  }

  #maksaminenSivu h2 {
    top:-90px;
    left:800px;
    line-height:30px;
  }



/***************AUTOLUOKAN VALINTA -SIVU*******************/



  #autoluokkaSivu {
    min-width: 1150px;
    max-width: 1150px;
  }

  #jarjestys {
    position:absolute;
    top:6px;
    left:95px;
    width:160px;
    font-family: Sans-serif;
    padding: 8px 20px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-appearance: none;

    text-overflow: ellipsis;
    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
  }

  #suodatusDiv {
    /*display:none;*/
  }

  #suodatusDiv {
    position:relative;
    top:5px;
    width:99%;
    height: 60px;
    max-height:60px;
    font-family: Sans-serif;
    margin-left:10px;
    margin-right:5px;
      }

  #suodatusDiv .lisatarviketxt {
    margin-left: 0px!important;
    position:relative;
    top:0px;
  }


  #suodataP {
    position:absolute;
    top:0px;
    left:280px;
  }

  .suodatus {
    width:120px;
    padding: 8px 20px;
  }

  #suodatusDiv .checkmark {
    left: -30px;
    border: 1px inset #ccc;

  }

  .cb {
    border:none !important;
    padding-left:60px;
  }

  #vaihteistoS, #automalli {
    //width: 150px;
    //margin-left:10px;
    //margin-bottom:8px;
    top:5px;
  }


  #fil1 {
    left:350px!important;  }

  #fil2 {
    left: 485px!important;
  }

  #fil3 {
    left: 620px!important;
  }

  #fil4 {
    left: 755px!important;
  }

  #fil5 {
    left: 880px!important;
    width: 150px!important;
    top:4px!important;
  }

  #fil6 {
    left: 1000px!important;
    width: 150px!important;
    top:4px!important;
  }

  #autotaulukko {
    min-width: 1010px;
    /*max-width: 1000px;*/
    top: 0px;
  }

  #tuntikalenteriDiv {
    position:absolute;
    width: 930px !important;
    /*height: 780px !important;*/
    max-height: 780px !important;
    text-align:center;
    background: #fff;
    -webkit-box-shadow: 0px 11px 185px 93px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 11px 185px 93px rgba(0,0,0,0.75);
    box-shadow: 0px 11px 185px 93px rgba(0,0,0,0.75);
    border-radius: 8px;
    z-index: 5;
    display:none;
    margin-bottom:140px;
  }


/***************LISÄTARVIKKEEN VALINTA -SIVU*******************/



  #overlay1 {
    top: 300px;
    width: 240px;
	bottom:0px;
  }

  #takaisin2 {
    margin-top:0px;
  }

  #jatka2 {
    margin-top:0px !important;
  }

  #lisatarvikeSivu {
    min-width: 1050px;
    max-width: 1050px;
  }

  .valittuAutoluokka {
    top:30px;
  }

  #hintaYhteensaDiv {
    font-size: 18px;
    width:220px;
    
    top: 660px;
    height: 60px;
    padding-top:5px;
      }

  .hintaYhteensa{
    top:-16px;

  }

  #lisatarvikeVaihtoehdot {
    top: 20px;
    left: 300px;
    font-size: 20px;
  }

  #omavastuu1, #omavastuu2, #omavastuu3, #kilometrit1, #kilometrit2, #kilometrit3 {
    min-width: 130px;
    max-width: 50%;
    max-height: 75px;
    left:0px;
    padding-top: 5px;
  }

  #omavastuu table {
    top:-25px;
  }


/***************YHTEYSTIEDOT -SIVU*******************/
  #overlay2 {
  top: 300px;
	width: 500px;
	bottom:0px;
  }

  #yhteystiedotSivu {
    min-width: 1150px;
    max-width: 1150px;
  }


  #yhteystietolomake {
    top:50px;
    left:560px;
  }

  .valitutLisatarvikkeet {
    top:30px;
	left: 252px;
	border-left: 1px solid grey;
	padding-left: 10px;
	max-width: 220px;
  }

  #yhteystietolomake {
    top:30px;
    left:550px;
  }

  .valitutLisatarvikkeet {
    width: 225px;
    max-width:225px;
  }

  .valLT, valittuMaara, .valLThinta {
    padding-right:5px !important;
  }

/***************MAKSUTIEDOT-SIVU*******************/

  #overlay3 {
    top: 300px;
	width: 770px;
	bottom:0px;
  }

  #maksaminenSivu {
    min-width: 1150px;
    max-width: 1150px;
  }

  #takaisin4 {
    left: -10px;
    top:-50px!important;
  }
  #takaisin4:hover {
    top:-48px!important;
  }

  #vahvistusNappi {
    top: -40px!important;
    left: 40px;
  }
  #vahvistusNappi:hover {
    top: -38px!important;
  }

  #taytetytTiedot {
    top: 30px;
  	left: 500px;
  	border-left: 1px solid grey;
  	padding-left: 10px;
    width: 258px;
  }

   #taytetytTiedot table {
     width: 250px;
     overflow-x:auto;
 }

 #valittuNPdiv{
   margin-top:10px;
   width:100%;
   max-width:270px;
   overflow:auto;
 }

 #maksuerittelydiv{
   position:relative;
   border-left:0px solid grey;
   margin-top:20px;
   padding-left:0px;
   width:100%;
   max-width:270px;
 }

#maksuerittely {
  margin-top:10px;
  margin-bottom:0px;
}

  #maksutapa {
    top:5px;
    left: 800px;
    width: 270px;
  }

  #maksutapa .container2 {
    margin-bottom:0px;
  }

  #maksutapadiv {
    top:-15px;
    width: 250px;
  }

  #maksahetiDiv, #noutomaksuDiv {
    width: 275px;  }

  #noutoPeruutusehdot, #maksuPeruutusehdot {
    width: 220px;
    margin-bottom: 20px;
  }

  #noutoPeruutusehdot .checkmark {
    margin-left:10px;
  }

  #maksuPeruutusehdot .checkmark {
    margin-left:10px;
  }

  .maksuPeruutusTxt, .noutoPeruutusTxt {
    left:50px;
    max-width:83%;
  }

  #ehdot {
	position: relative;
	left: -25px;
  top:-65px;
	margin-bottom: 0px;
	margin-top:0px;
  width:250px;
  }

  #palveluntarjoaja {
    bottom:0px;
  }


}

   //-webkit-overflow-scrolling: touch;

}











/**************CHECKBOX**************/

 /* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  width: 100px;
  font-size: 22px;
  line-height: 0px;
  height: 30px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  left: 0;
  height: 25px;
  width: 25px;
  background: #eee;
  border: 1.5px solid #ccc;
  margin-left:51px;
  margin-bottom:5px;
}


/* On mouse-ove.checkmark {
  position: absolute;
  left: 0;
  height: 25px;
  width: 25px;
  background: #eee;
  margin-left:51px;
  margin-top:5px;
}r, add a grey background color */
.container:hover input ~ .checkmark {
  background: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background: #fff;
  /*background: #004799;*/
  /*background: #3b7494;*/
  border: 1.5px solid#004799;}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid#004799;  border-width: 0 3px 3px 0!important;
  -webkit-transform: rotate(45deg)!important;
  -ms-transform: rotate(45deg)!important;
  transform: rotate(45deg)!important;
}


/**************RADIO BUTTON**************/



 /* Customize the label (the container) */
.container2 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  line-height: 30px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* omavastuu */
.container3 {
  display: block;
  position: relative;
  padding-left: 35px;
  padding-bottom: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 26px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* maksutapa bestrent */
.container10 {
  display: block;
  position: relative;
  padding-left: 72px;
  padding-bottom: 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 26px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#ElectronKateinenInfo {
  font-size: 14px;
}

.container4 {
  display: block;
  position: relative;
  padding-left: 35px;
  padding-bottom: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 26px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container5 {
  display: block;
  position: relative;
  padding-left: 35px;
  padding-bottom: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 26px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container2 input {
  position: absolute;
  opacity: 0;
}
.container3 input {
  position: absolute;
  opacity: 0;
}
.container10 input {
  position: absolute;
  opacity: 0;
}
.container4 input {
  position: absolute;
  opacity: 0;
}
.container5 input {
  position: absolute;
  opacity: 0;
}

/* Create a custom radio button */
.checkmark2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #eee;
  border: 1.5px solid #ccc;
  border-radius: 50%;
}
.checkmark3 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #eee;
  border: 1.5px solid #ccc;
  border-radius: 50%;
}
.checkmark10 {
  position: absolute;
  top: 0;
  left: 24px;
  height: 20px;
  width: 20px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 50%;
}
.checkmark4 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #eee;
  border: 1.5px solid #ccc;
  border-radius: 50%;
}
.checkmark5 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #eee;
  border: 1.5px solid #ccc;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container2:hover input ~ .checkmark2 {
  background: #ccc;
  border:none;
}

.container3:hover input ~ .checkmark3 {
  background: #ccc;
  border:none;
}
.container10:hover input ~ .checkmark10 {
  background: #ccc;
  border:none;
}

.container4:hover input ~ .checkmark4 {
  background: #ccc;
  border:none;
}
.container5:hover input ~ .checkmark5 {
  background: #ccc;
  border:none;
}


/* When the radio button is checked, add a blue background */
.container2 input:checked ~ .checkmark2 {
  background: #004799;
  border: 1.5px solid #004799}

.container3 input:checked ~ .checkmark3 {
  background: #004799;
  border: 1.5px solid #004799}
.container10 input:checked ~ .checkmark10 {
  background: #004799;
  border: 1.5px solid #004799}

.container4 input:checked ~ .checkmark4 {
  background: #004799;
  border: 1.5px solid #004799}
.container5 input:checked ~ .checkmark5 {
  background: #004799;
  border: 1.5px solid #004799}


/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark2:after {
  content: "";
  position: absolute;
  display: none;
}

.checkmark3:after {
  content: "";
  position: absolute;
  display: none;
}
.checkmark10:after {
  content: "";
  position: absolute;
  display: none;
}
.checkmark4:after {
  content: "";
  position: absolute;
  display: none;
}
.checkmark5:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container2 input:checked ~ .checkmark2:after {
  display: block;
}
.container3 input:checked ~ .checkmark3:after {
  display: block;
}
.container10 input:checked ~ .checkmark10:after {
  display: block;
}
.container4 input:checked ~ .checkmark4:after {
  display: block;
}
.container5 input:checked ~ .checkmark5:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container2 .checkmark2:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.container3 .checkmark3:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.container10 .checkmark10:after {
  top: 6.5px;
  left: 6.5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.container4 .checkmark4:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.container5 .checkmark5:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/*************AIKA-INPUT**************/

.form-control {
   	width: 130px;
	  height: 45px;
	  padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1.4px solid  #002857 !important;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    font-size:16px;
    font-family: Sans-serif;
}


/*************DATEPICKER**************/

.kalenteri {
	/*width: 110px;*/
	width: 130px;
	height: 45px;
	text-align:center;
	font-size:16px;
  border: 1.4px solid  #002857 !important;
  font-family: Sans-serif;
}


.kalenteri-viikko {
    position: absolute;
    left: 200px;
    width: 10px;
    z-index: 0;
    opacity: 0;
  }

#ui-datepicker-div {
	width: 360px;
  position: relative;
  left: 50%;
  margin-left: -5px;
  margin-top: -3px;
	z-index: 24;
}

.ui-datepicker {
  background: white;
  margin: auto;
  z-index: 25;

 }

.ui-datepicker table {
	min-width: 360px;
	max-width: 360px;
	z-index: 23;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}

.ui-datepicker table {
	min-width: 360px;
	max-width: 360px;
	  	z-index: 23;

}



.ui-datepicker-prev, .ui-datepicker-next {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  cursor: pointer;
  background-repeat: no-repeat;
  line-height: 600%;
  overflow: hidden;
}

.ui-datepicker-prev {
  float: left;
  background-image: url('media/nuolivasen.png');
}
.ui-datepicker-next {
  float: right;
  background-image: url('media/nuolioikea.png');
}

.ui-datepicker thead {
  background: #f7f7f7;
  background-image: -moz-linear-gradient(top,  #f7f7f7 0%, #f1f1f1 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#f1f1f1));
  background-image: -webkit-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
  background-image: -o-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
  background-image: -ms-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
  background-image: linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1',GradientType=0 );
  border-bottom: 1px solid #bbb;
}

.ui-datepicker th {
  background: #bdbdbd;
  text-align:center;
  text-transform: uppercase;
  font-size: 14px;
  padding: 5px 0;
  color: black;
  /*text-shadow: 1px 0px 0px #fff;*/
  filter: dropshadow(color=#fff, offx=1, offy=0);
}

.ui-datepicker-header {
  background: black;
  color: #e0e0e0;
  font-weight: bold;
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
  -moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
  box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
  text-shadow: 1px -1px 0px #000;
  filter: dropshadow(color=#000, offx=1, offy=-1);
  line-height: 30px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #111;
}

.ui-datepicker-title {
  text-align: center;

}



.ui-datepicker td span, .ui-datepicker td a {
  display: inline-block;
  font-weight: bold;
  text-align: center;
  width: 47px;
  height: 30px;
  line-height: 30px;
  color: #666666;
  /*text-shadow: 1px 1px 0px #fff;
  filter: dropshadow(color=#fff, offx=1, offy=1);*/
}

.ui-datepicker td span, .ui-datepicker td a:hover {
  background: #b0df66;
}

/*.ui-datepicker-calendar .ui-state-default {
  background: #ededed;
  background: -moz-linear-gradient(top,  #ededed 0%, #dedede 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dedede));
  background: -webkit-linear-gradient(top,  #ededed 0%,#dedede 100%);
  background: -o-linear-gradient(top,  #ededed 0%,#dedede 100%);
  background: -ms-linear-gradient(top,  #ededed 0%,#dedede 100%);
  background: linear-gradient(top,  #ededed 0%,#dedede 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 );
  -webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
  -moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
  box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}*/

.ui-datepicker-unselectable .ui-state-default {
  background: #f4f4f4;
  color: #b4b3b3;
}

.ui-datepicker-calendar .ui-state-hover {
  background: white;
}

.ui-datepicker-calendar .ui-state-hover-week {
  background: green;
}

.ui-datepicker-calendar .ui-datepicker-current-day {
  //background: green;
  color: white;
}


.ui-datepicker-calendar .ui-state-active {
  background: #b0df66;
  -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  color: white;
  text-shadow: none;
  filter: dropshadow(color=grey, offx=0, offy=1);
  border: none;
  position: relative;
  margin: -1px;
}

.ui-datepicker a {
  text-decoration: none;
}


/*************DATEPICKER LOPPUU**************/


#loader {
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 50;
  width: 50px;
  height: 50px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}





/*AIKAVALINTA*/


/**
 * FILE: jquery.ptTileSelect.css
 * 	Default style for the timeselect container.
 *
 *  LAST UPDATED:
 *
 * 		- $Date: 2009/04/12 20:23:02 $
 * 		- $Author: paulinho4u $
 * 		- $Revision: 1.1 $
 */
#ptTimeSelectCntr {
	width: 250px;
	font-size: .9em;
	position: absolute;
	z-index: 25;
	display: none;
}
/*#ptTimeSelectCntr .ui-widget{
	padding: 0.5em;
  width: 350px;
  margin-left: -150px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
   -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}*/
#ptTimeSelectCntr .ui-widget{
	padding: 0.5em;
  width: 160px;
  margin-left: -70px;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
   -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}

#aikaDropDown {
  float: left;
  width: 100%;
  margin-top: -10px;
  max-height: 500px;
  overflow:auto;
}

#aikaDropDown::webkit-scrollbar {
  width:6px;
  background: #f5f5f5;
}

#aikaDropDown::webkit-scrollbar-thumb {
  background: #fff;
}

#aikaDropDown::webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background: #f5f5f5;
}

.paivystyslisainfo {
    position:absolute;
    top: -66px!important;
    left: 82px;
    width:200px;
    max-width: 200px;
    background: #fff;
    border: 3px solid #002857!important;
    border-radius: 4px;
    padding:10px 15px;
    font-size: 16px;
    font-weight: bold;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}

#ptTimeSelectCntr .ui-widget-header {
	padding: .2em;
	background: black;
	color:#c8c8c8;
  font-weight: bold;
  text-align:center;
  display:none;
}
#ptTimeSelectCntr #ptTimeSelectUserTime {
	font-size: larger;
	padding: .2em;
	padding-left: 1em;
	text-align: center;
}
#ptTimeSelectCntr #ptTimeSelectCloseCntr {
	display: block;
	padding: .2em;
}
#ptTimeSelectCntr #ptTimeSelectCloseCntr a {
	display: block;
	padding: .2em;
    color:#c8c8c8;
}

#ptTimeSelectCntr #ptTimeSelectCloseCntr a:hover{
    color: #004799;
}

#ptTimeSelectCntr .ui-widget-content {
	 margin-top: .2em !important;
	 margin-bottom: .1em;
	 padding: 0px 5px 8px 5px;
   background: white;
}

#ptTimeSelectCntr .ui-widget.ui-widget-content {
	margin-top: -7px!important;
}

#ptTimeSelectCntr .ptTimeSelectLeftPane.ui-widget-content {
	border-top:none;
	border-bottom:none;
	border-left:none;
	/*border-right-width: 2px;*/
}
#ptTimeSelectCntr .ptTimeSelectRightPane.ui-widget-content {
	border: none;
}

.ptTimeSelectLeftPane, .ptTimeSelectRightPane {
  padding-top: 5px;
  margin-bottom: -5px;
}

#ptTimeSelectCntr .ptTimeSelectHrCntr a,
#ptTimeSelectCntr .ptTimeSelectMinCntr a {
	display: block;
  float:left;
  padding: 4px;
	width: 95%;
	margin: 1px;
	text-align: center;
	text-decoration: none;
	color: black;
	background: #f7f7f7;
  font-size: 1.2em;
    /*border: 1px solid grey;*/
}

#ptTimeSelectCntr .ptTimeSelectHrCntr a:hover,
#ptTimeSelectCntr .ptTimeSelectMinCntr a:hover{
    background: #b0df66;
}

#ptTimeSelectCntr .ptTimeSelectHrAmPmCntr a {
	text-align: center;
	margin: 1px;
}
#ptTimeSelectCntr .ptTimeSelectTimeLabelsCntr {
	font-weight: bold;
	font-size: .9em;
  text-align:center;
  margin-right:15px;
}
#ptTimeSelectCntr #ptTimeSelectSetButton {
	padding-top: .2em;
	padding-bottom: .2em;
	color: black;
  display:none !important;
}
#ptTimeSelectCntr #ptTimeSelectSetButton a {
 	display: block;
	padding: .2em;
	width: 30%;
	text-align: center;
	float: right;
	color: #382654;
  text-decoration:none;
	background: #004799;
  border-radius: 4px;
  border: 0px;
  box-shadow: inset 0px 1px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 4px 3px grey;
  display:none !important;
}

#ptTimeSelectCntr #ptTimeSelectSetButton a:hover {
  position:relative;
  top:1px;
  box-shadow: inset 0px 1px 0px #00408a, 0px 1px 0px 0px #00408a, 0px 2px 1px grey;
  display:none;
}



/*****************KIITOS VARAUKSESTASI******************/

#yhteenvetoKeskitys{
  position: absolute;
  top:80px;
  left:50%; transform:translate(-50%);
}

#varauksentiedot {
  font-family: Sans-serif;
	width: 850px;
  height: 1200px;
	margin-top: 10px;
  padding: 30px;
  padding-bottom:60px;
  border:2px solid #cccccc;
  margin-bottom:100px;
  border-radius: 8px;
  -webkit-box-shadow: inset 0px 0px 10px 0px rgba(204,204,204,1);
  -moz-box-shadow: inset 0px 0px 10px 0px rgba(204,204,204,1);
  box-shadow: inset 0px 0px 10px 0px rgba(204,204,204,1);
}

#varauksentiedot div {
  padding-left:15px;
  padding-bottom:5px;
  background: #f5f5f5;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
  box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
}

#vtOtsikko {
  width: 60%;
  margin-left: -10px;
  padding-left: 10px!important;
  background: #f5f5f5!important;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1)!important;
  -moz-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1)!important;
  box-shadow: 0px 0px 10px 0px rgba(204,204,204,1)!important;
}

#varauksentiedot h2 {
	color:black;
	text-decoration: underline #004799;
}

#varausvahvistusInfo {
  margin-left: 8px;
  color:black;
}

#varauksentiedot th {
  text-align:left;
	width: 400px;
	vertical-align: text-top;
  /*border:1px solid grey;*/

}

#varauksentiedot td{
  text-align:left;
	vertical-align: text-top;
	width: 400px;
}

#varauksentiedot h3 {
	margin-top: 18px;
  padding-top: 10px;
	text-decoration: underline #004799;
}

#varauksentiedot li {
	list-style-type: none;
}

#vuokraamontiedot td {
	width:60%;
}

#varausnumero td {
	width:60%;
}

#asiakkaantiedot td {
	width:60%;
}

#kuljettajatiedot td {
  width:60%;
}

#noutotiedot td {
	width:60%;
}

#palautustiedot td {
	width:60%;
}

#autontiedot td {
	width:60%;
}

#kampYhtveto{
    padding-left:15px;
}

#lisatarviketiedot td {
	width:60%;
}

#ylinDiv {
  width:96%;
  background:white!important;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(204,204,204,1)!important;
  -moz-box-shadow: 0px 0px 0px 0px rgba(204,204,204,1)!important;
  box-shadow: 0px 0px 0px 0px rgba(204,204,204,1)!important;
}

.valittuAuto {
  padding-bottom:0px!important;
}

#yvLogoDiv {
  position:absolute;
  top:190px;  right:6%;
  width:280px;
  height:100px;
  background: #fff !important;
  box-shadow:none !important;
}

#yvKuva {
	position:relative;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;
  height:auto;
  max-height:100px;
  max-width:250px;
}

#vuokraamoonNappi {
  position:absolute;
  margin:20px;
  width: auto!important;
  }

#tulostusNappi {
	position:absolute;
	top:70px;
	left:765px;
	width: 120px;
	height:30px;
	line-height: 0px;
  }

#tulostusNappi:hover {
  top:72px;
}





/*--------------------------------------------------------------------------------------*/




/************MOBIILIT*************/





	@media only screen
		and (min-device-height: 100px)
		and (min-device-width: 250px)
		and (max-device-width: 780px)
		and (max-aspect-ratio: 13/9)


	{

  html {
    min-width: 350px;
    width:auto;
    max-width: 820px;
    height: 98%;
  }

  body {
    min-width: 350px;
    width:95%;
    max-width: 820px;
    min-height: 530px;
    margin-left:0;
    margin-right:0px;

  }

  .ui-datepicker td span, .ui-datepicker td a {
    width: 37px;
  }

  hr {
    display:none;
  }

  #jatka2, #jatka3, #takaisin2, #takaisin3, #takaisin4 {
    width: 130px!important;
    height: 40px!important;
  }

  #vahvistusNappi {
   height: 40px!important;
    }

/*******************YLÄPALKKI=AUTOHAKU*********************/

  header {
  	height: 486px;
  	max-height: 486px;
  	min-width: 350px;
    width:99%;
  	display:block;
  	top: 45px;
    margin-right:0px;
  }

  #FRpakutDiv{
    width:100%;
    height:29px;
    border-bottom:2px solid #0383d3;
  }

  #FRpakutOts{
    position:absolute;
    width:100%;
    text-align:center;
    font-weight:bold;
    color:#000;
    top:-13px;
    font-size:16px;
    text-transform:uppercase;
  }

  #FRpakutLink {
    position:absolute;
    left:10px;
    top:450px;
    font-size:15px;
    cursor:pointer;
  }

  #varaushakuvalinnat {
    margin-left: 0px;
    top: 20px;
    width: 260px!important;
    left: 50%;
    transform: translate(-50%);
  }

  #alkaatxt {
    position:absolute;
    max-width: 250px;
    top: -30px;
    left: 12%;
  }

  #paattyytxt {
    position:absolute;
    max-width: 250px;
    top: 160px;
    left:12%;
  }

  .sijaintiAlkaa {
    position: absolute;
    top: 44px;
    left:0px;
    width: 85%;
  }

  .sijAlkDiv .select-selected {
    position: absolute;
    top:40px!important;
    left: -20px;
    width:225px;
  }

  #tunti{
    margin-left: 0px;
    margin-right: 0px;
    top: 200px!important;
    left:-2px;
    /*left: 51%;
    transform: translate(-50%);*/
    width:75px;
    line-height: 25px;
    padding:13px;
  }

  #kaksituntia{
    top: 200px!important;
    margin-left: 0px;
    margin-right: 0px;
    /*left: 16.5%;
    transform: translate(-50%);*/
    width:75px;
    line-height: 25px;
    padding:13px;
    left: 20px;
  }

  #kolmetuntia{
    top: 200px!important;
    margin-left: 0px;
    margin-right: 0px;
    left: 40px;
    /*left: 51%;
    transform: translate(-50%);*/
    width:75px;
    line-height: 25px;
    padding:13px;
  }

  #tunti:hover{
    top: 202px!important;
  }

  #kaksituntia:hover{
    top: 202px!important;
  }

  #kolmetuntia:hover{
    top: 202px!important;
  }

  .lanaSelected #tunti {
    top:202px!important;
  }

  .lanaSelected #kaksituntia {
    top:202px!important;
  }

  .lanaSelected #kolmetuntia {
    top:202px!important;
  }

  .sijLopDiv .select-selected {
    position:absolute;
    top:180px!important;
    left:-20px;
    width:225px;
  }

  .tphakuInput {
    height:44px;
    width: 253px!important;
    background-color: #fff;
    border: 1.4px solid #002857 !important;
    border-radius: 4px;
    float: left;
    margin-top: 8px;
    margin-left: 1px;
    text-align:left!important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding:0;
    padding-left:4px;
    font-size:  16px;  background-color: #fff
  }


  /*style items (options):*/
  .select-items {
    position: absolute;
    background: #fff;
    top: 145%;
    left: 1px!important;
    right: 0;
    width: 300px;
    z-index: 99;
    border: 1px solid grey;
    white-space: pre;
    height: auto;
    max-height: 250px;
    overflow: auto;
      }

  .select-items div {
      }

  .select-items div, .select-selected {
    padding: 13px 16px 3px 16px;
  }

  .sijAlkDiv .select-items {
    top: 96px;
    z-index:50!important;
  }

  .sijLopDiv .select-items {
    top: 231px;
    z-index:50!important;
  }

  .optionText {
    margin-top: 0px;
    line-height:26px;    max-width: 220px;
    line-height: 25px;
  }

  .kalenteri {
    position:relative;
    width:125px;
  }

  .form-control {
    position:relative;
    width: 125px;
  }

  #alkaaKalenteri {
    position:absolute;
    top: 100px;
    left:0px;
  }

  #alkaaAika {
    position:absolute;
    top: 100px;
    left: 135px;
  }

  .paivystyslisainfo {
    position:absolute;
    top: -84px!important;
    left: -142px;
    width:200px;
    max-width: 200px;
    background: #fff;
    border: 3px solid #002857!important;
    border-radius: 4px;
    padding:10px 15px;
    font-size: 16px;
    font-weight: bold;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    z-index: 20;
  }

  .sijaintiLoppuu {
    position:absolute;
    top: 180px;
    left:0px;
    width: 85%;
  }

  #loppuuKalenteri {
    position:absolute;
    top: 260px;
    left:0px;
  }

  #loppuuAika {
    position:absolute;
    top: 260px;
    left:135px;
  }

  .ryhmatjatoimipiste .autoryhmaDiv select {
    display: none; /*hide original SELECT element:*/
  }


  .kampanjaALdiv{
    width:60px;
    height:60px;
    position:relative;
  	float:right;
  	margin-right: 20px;
    max-width:320px;
    top:-60px;
  }

  .kampanjaALdiv img{
    border:0;

  }

  .kampanjaAL{
    position:absolute;
    right:-21px;
    top:-90px;
    width:120px;
    height:140px;
  }

  .kampanjaAL img {
    border:0;
  }

  #kamppisteksti {
    color:#fff;;
    text-decoration:underline;
    margin-top:289px;;
    margin-left: -10px;
  }

  #kampanjakoodi {
    height:20px;
    width:256px;
    margin-top:287px;;
    margin-left: -20px;
  }

  #kampStatus {
    left: 90px;;
    top: -32px;;
    width:148px!important;
      }

  #kampKayta {
    left:-20px;
    top:0px;
  }

  #kampKayta:hover {
    top:2px;
  }

  #huomDiv {
    width:90%;
    left:0px;
    top: 480px;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    font-size:16px;
    z-index: 20;
  }

  #vihreanuoli {
    display:none;
  }

      #haeNappi {
      top: 392px!important;      left:0px;
      width: 260px;
      z-index: -1;
      padding-top: 20px!important;
      padding-bottom: 20px!important;
      left: 50%;
      transform: translate(-50%);
                }

    #haeNappi:hover {
      top:394px;    }
  
  #logonpaikka {
    top: 5px;
    right:25px;
    width: auto;
    height: 50px;
  }

  #logo {
    max-width: 100px;
    max-height: 50px;
  }


  /***************** MAINOKSET ***************/

  #mainoksetDiv {
    text-align:center;
  }

  #mainoksetDiv table {
    position: relative;
    top:580px;
    border-collapse: separate;
    border-spacing: 0px;
  }

  #mainoksetDiv img {
    max-width: 300px;
    max-height:300px;
  }

  .mainosDivit {
    width: 300px;
    height: 300px;
    display:flex;
    margin-bottom:20px;
  }

  #mainos1 {

  }

  #mainos2 {

  }

  #mainos3 {
    border: 2px solid grey;
  }

  #mainos4 {
    border: 2px solid grey;
  }


  #maksuEionnistu {
    width: 70%;
    top: 580px;
    left:40px;
    text-align: left;
    padding-left: 20px;
  }

/***************OTSIKOT*******************/




#vaihe1_2 {
  left: 12px;
  display:none;
}

#vaihe1_3 {
  left: 12px;
  display:none;

}

#vaihe1_4 {
  left: 12px;
  display:none;
}

#vaihe2_1 {
  left:0px;
  display:none;
}

#vaihe3_2 {
  left: 0px;
  display:none;
}

#vaihe4_3 {
  left: 0px;
  display:none;
}

#autoluokkaSivu h2 {
  position:absolute;
  top: 0px;
  left: 10px;
}

#lisatarvikeSivu h2 {
  position: absolute;
  top: 440px;
  left:10px;
}

#yhteystiedotSivu h2 {
  position:absolute;
  top:630px;
  left:10px;
}

#maksaminenSivu h2 {
  position:absolute;
  top:920px;
  left:10px;
  width:300px;
}



/***************AUTOLUOKAN VALINTA -SIVU*******************/

@media screen and (-webkit-min-device-pixel-ratio: 0) {
input, textarea, select {
        font-size: 16px;
    }
}

#vaihteistoS, #automalli {
  width: 150px;
  margin-left:10px;
  margin-bottom:8px;
}


#suodatusDiv {
  top:65px;
}

#suodataP {
  position:absolute;
  top:40px;
  left:0px;
}

#jarjestaP {
  position:absolute;
  top:-20px;
  left:-1px;
}

#jarjestys {
  position: absolute;
  top: 21px;
  left: -3px;
  width: 98%;
  padding: 3px 15px 4px 8px;
}

#filtterit {
  /*display:none;*/
}

#fil1 {
  position: absolute;
  top: 80px;
  left: -3px!important;
  width: 45%;
  padding: 3px 15px 4px 8px;
}

#fil2 {
  position: absolute;
  top: 80px;
  left: 50%!important;
  width: 45%;
  padding: 3px 15px 4px 8px;
}

#fil3 {
  position: absolute;
  top: 120px;
  left: -3px!important;
  width: 45%;
  padding: 3px 15px 4px 8px;
}

#fil4 {
  position: absolute;
  top: 120px;
  left: 50%!important;
  width: 45%;
  padding: 3px 15px 4px 8px;
}

#fil5 {
  top: 163px;
  left:0!important;
  width:140px!important;
}
#fil6 {
  top: 163px;
  left:170px!important;
  width:140px!important;
}

#suodatusDiv .checkmark {
  left: -42px!important;
}

#suodatusDiv .lisatarviketxt {
  left: 45px!important;
}

#suodatusDiv .cb {
  padding-left: 0px!important;
}

#tuloksetDiv {
  display: none;
  position: relative;
  width: 70%;
  top: 250px;
  left: 30px;
  background: white;
  border: 3px solid #b0df66;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

#autoluokkaSivu {
  position: absolute;
  top: 530px;
  min-width: 360px;
  display:none;
  max-width: 1000px;
  /*max-width:360px;*/
}

#autotaulukko {
  top: 240px;  /*width:100%;
  max-width:400px;*/
  display:inline-block;
}

#autoluokkaSivu th {
  /*min-width: 320px!important;*/
  width: 350px!important;
  max-width:350px !important;
  min-height: 350px;
  position:relative;
  left:-10px;
  /*transform:scale(0.95,0.95);*/
}

.box {
  float:left;
  display: inline-block;
  min-width: 350px;
  width: 350px !important;
  max-width: 350px !important;
  min-height:350px;
  margin:6px;
  border: 1px solid #888888;
  box-shadow: 5px 10px 8px #888888;
}

.autot {
  left:45px;
}

.autotPaku {
  left:45px;
}

.alNimiDiv {
  padding-left:5px;
}

.maksutJaValitse {
  width:300px!important;
  top:80px;
  left:10px;
}

#maksanoutoTD {
  min-width:230px!important;
  width:230px!important;
  max-width:230px!important;
  padding-right: 20px!important;
  padding-top:25px!important;

}

#maksahetiTD{
  min-width:230px!important;
  width:230px!important;
  max-width:230px!important;
  padding-right: 20px!important;
  padding-top:10px;}

.pakuInfoDiv {
  position:relative;
	float:right;
	margin-right: 10px;
  max-width:330px;
}

.pakuInfoDiv .infotxt {
  visibility: hidden;
  width: 350px;
  max-width:350px;
  background: white;
  color: #000;
  text-align: center;
  font-weight:normal;
	font-size: 16px;
  padding: 10px;
  border:1px solid grey;
  border-radius: 6px;
  margin-right: -20px;
  position: absolute;
  /*right: 90%;*/
  z-index: 10;
}

#pakuMitatTable {
    max-width:350px;
}

#pakuMitatTable td {
  padding:5px 3px 5px 3px;
  text-align:left;
}

.autoluokkaValitse {
  /*position:relative;
  width: 100px !important;
  height: 70px !important;*/
  bottom: -15px;
  /*left: -10px;
  font-size: 18px;
  font-family: Sans-serif;*/
  transform:scale(0.9,0.9);
  padding-left: 20px;
  left:-50px;}

.autoluokkaValitse:hover {
  top:16px!important;
}

.autoluokkaVarattu {
  /*position:relative;
  white-space:normal;
  width: 100px !important;
  height: 70px !important;
  /*right:14px;*/
  bottom:-15px;
  /*left:-10px;
  font-size: 16px;
  font-family: Sans-serif;
  padding:5px !important;
  box-shadow: inset 0px 3px 0px #bdbdbd, 0px 3px 0px 0px #bdbdbd, 0px 6px 3px grey !important*/
  transform:scale(0.9,0.9);
  right:10px;
  left:-50px;}

.autoluokkaVarattu:hover {
  top:16px!important;
}


.pitkatNapit {
  left: 20px;
}

.saatavillaToimipaikasta {
    margin-top:25px;
    width:310px;
}

/******TUNTIKALENTERI******/

#tuntikalenteriDiv {
  position:absolute;
  left: 0!important;
  right: 0!important;
  width: 500px!important;
  /*height: 1200px !important;*/
  max-height: 1200px !important;
  margin-bottom:0px !important;
  /*transform: scale(0.8);*/
}

#tkTableDiv {
  width:98%;
  max-width:499px !important;
}

#tuntikalenteri {
  position:relative;
  margin-top:30px;
  margin-left: 0px;
  top:auto;
  right:auto;
}

#tuntikalAl {
  position:relative;
  left:25px;
  top:40px;
  width: 400px;
  max-width: 400px;
}

#tuntikalH3 {
  width: 400px;
  margin-top:30px;
  margin-left:30px;
  margin-bottom: -5px;
}

#suljeTk {
  position:absolute;
  top: 10px;
  right: 10px;
}

#suljeTk:hover {
  top:12px;
}

#tkTanaanNappi {
  position:relative;
  top:auto;
  right:auto;
  padding-top:7px;
  padding-bottom:7px;
  padding-left:10px;
  padding-right:10px;
}

#tkTanaanNappi:hover {
  top:auto;
}

#tkOikeaNuoli {
  position:relative;
  top:auto;
  right:auto;
  margin-top: 0px;
  margin-right: 28px;
  float:right;
  padding-right: 11px;
  padding-top:4px;
  padding-bottom:8px;
  padding-left:14px;
}

#tkOikeaNuoli:hover {
  top:auto;
}

#tkVasenNuoli {
  position:relative;
  top:auto;
  right:auto;
  margin-top: 0px;
  margin-left: 25px;
  float:left;
  padding-right: 17px;
  padding-top:4px;
  padding-bottom:8px;
  padding-left:8px;
}

#tkVasenNuoli:hover {
  top:auto;
}

.tuntikalTR {

}

.tuntikalTH {
  background:#f5f5f5;
  padding-left: 6px;
  padding-right: 6px;
}

.tuntikalTDvar {
  background: #fff;
  border:1px solid #f2f2f2;
}

.tuntikalTDvap {
  border:1px solid #f2f2f2;
  background:white;
  width:10px;
}

.tuntikalTDvap:hover {
  background: #b0df66;
}

.tuntikalTDpaivystys {
  border:1px solid #f2f2f2;
  background: linear-gradient(145deg, #f4a676, #fff, #fff, #fff, #fff);
  height: 20px !important;
}

.tuntikalTDpaivystys:hover {
  background: #b0df66;
}

.tuntikalTDpaivystys .palkki.calSel {
  position:absolute;
  width:30px;
  height: 27px !important;
  background:#b0df66;
  margin-top:-13px;
  margin-left: 11px;
}

.tuntikalTDvapKiinni {
  border:1px solid #f2f2f2;
  background: #dbdbdb;
  width:10px;
}

.tuntikalTDvapKiinni:hover {
  background: #b0df66;
}

.tuntikalTDvar .palkki {
  position:absolute;
  width:30px;
  height:27px;
  background:#f77d7d;
  margin-top:-13px;
  margin-left: 11px;
}

.tuntikalTDvap .palkki.calSel {
  position:absolute;
  width:30px;
  height:27px;
  background:#aad369;
  margin-top:-13px;
  margin-left: 11px;
}

.tuntikalTDvapKiinni .palkki.calSel {
  position:absolute;
  width:30px;
  height:26px;
  background:#aad369;
  margin-top:-13px;
  margin-left: 11px;
}

#tkValitse, #tkValitseNoudettaessa {
  position:relative;
  bottom:auto;
  top:15px;
  left:20px;
  padding-top:8px;
  padding-bottom:8px;
  padding-left:18px;
  padding-right:18px;
  width:150px!important;
  max-width:150px!important;
}

#tkValitse:hover, #tkValitseNoudettaessa:hover {
  position: relative;
  top: 17px;
}

#tkValitseKm, #tkValitseHetimaksu {
  position:relative;
  bottom:auto;
  top:15px;
  left:0px;
  padding-top:8px;
  padding-bottom:8px;
  padding-left:18px;
  padding-right:18px;
  width:150px!important;
  max-width:150px!important;
}

#tkValitseKm:hover, #tkValitseHetimaksu:hover {
  position: relative;
  top: 17px;
}




/***************LISÄTARVIKKEEN VALINTA -SIVU*******************/

#overlay1 {
  position: fixed;
  display: block;
  width: 99%;
  top: 535px;
  height: 200px;
  bottom:auto;
}

#lisatarvikeSivu {
  position: absolute;
  top: 300px;
  min-width: 320px;
  width: 100%;
}

.valittuAuto {
  position:relative;
  left:12px;
  width: 33%;
  height: auto;
  padding-bottom: 15px;
  z-index:1;
}

.valittuAutoluokka {
  position:absolute;
  text-align:left;
  top:250px;
  left: 10px;
  width: 98%;
  height: auto;
  z-index: -1;
}

#valittuAutoluokkaDiv {
  position:relative;
}


#ValAutokuvaDiv{
  position:absolute;
  left:-15px;
  top:34px;}

#uusiutuvadieselSpan {
  position: absolute!important;
  top: 109px!important;
  line-height: 15px!important;
  max-width: 135px;
  left: -145px;
}

#ValAutontiedotDiv {
  position:absolute;
  right:4%;
  top:0px;
  z-index:2;
}

#hintaYhteensaDiv {
  display: none!important;
  /*min-width:100px;*/
  position:sticky;
  width:104%;
  height:20px;
  font-size:14px;
  top:0px;
  left:auto;
  margin-left:-10px;
  padding-top:10px;
  padding-bottom:10px;
  border: 1px solid #002857;
  background: <?$perusvari_hex?>;
  color:#fff;
  text-align:left;
}

#hintayhtTxt {
  font-size:14px;
  color:#fff;
  position:relative;
  bottom:14px!important;
  margin-left: 100px;
}

.hintaYhteensa{
  position:absolute;
  top:-4px;
  right:100px;
  font-size:14px;
  color:#fff;
}

#lisatarvikeVaihtoehdot {
  position:absolute;
  top: 530px;
  left: 0px;
  border-top: 1px solid grey;
  width: 98%;
  max-width: 600px;
}

#lisatarvikeVaihtoehdot table{
  min-width: 150px;
  width: 100%;
  height: auto;
}

.maaravalinta {
  width: 55px;
  left:22px;
}

.pNapit {
  left: 77px;
}

.mNapit {
  left: -10px;
}

.container .lisatarvikeinfo {
  margin-left: 0px!important;
}

#lisatarvikeVaihtoehdot .lisatarvikeinfo {
  font-size:12px;
  color: #EF403F !important;
}

#lisatarvikeSivu .checkmark {
  margin-top:10px;
  left: -16px;
}

.lisatarvikeHinnat, .lisatarvikeHinnatNro {
  font-size: 16px;
  width:70px;
  max-width:70px;
}

.lisatarvikeLabel {
  position: relative;
  left: 90px;
  /*bottom: -10px;*/
  margin-left: 2px;
  min-width: 130px;
  width: 45%;
  max-width:160px;
  max-height: 63px;
  overflow-y:auto;
  overflow-x:hidden;
  left:110px;
  word-wrap: break-word;
}

.lisatarviketxt {
  position: relative;
  left: 90px;
  top: 7px;
  min-width: 130px;
  width: 65%;
  display: inline-block;
  overflow: auto;
  margin-left:0px!important;
}

#lisatarvikeVaihtoehdot .container {
  max-height:200px!important;
}

#lisatarvikeSivu label {
  text-align: left;
  font-size: 16px;
  max-height: 63px;
}

#omavastuu .lisatarvikeinfo, #kilometrivalinta .lisatarviketxt {
  margin-left: 0px!important;
}

#omavastuu table {
  border-top: 1px solid grey;
}

#kilometrit table, #kilometrivalinta table {
  border-top: 1px solid grey;
}

#omavastuu1, #omavastuu2, #omavastuu3, #kilometrit1, #kilometrit2, #kilometrit3 {
  min-width: 200px;
  max-width: 200px;
  max-height: 50px;
  left:0px;
  padding-top: 18px;
}

#omavastuu .lisatarviketxt {
  padding-left:20px;
  min-width: 200px;
  max-width: 200px;
  left:0px;
}

#kilometrit .lisatarviketxt, #kilometrivalinta .lisatarviketxt {
  padding-left:20px;
  min-width: 200px;
  max-width: 200px;
  left:0px;
}

#kilometrit .lisatarvikeinfo, #kilometrivalinta .lisatarvikeinfo {
  margin-left: 22px;
  margin-top: 0px;
  color: #EF403F !important;
  min-width: 200px;
  max-width: 200px;
  max-height: 50px;
  line-height:15px!important;
}

/******************* YHTEYSTIEDOT**********************/

#overlay2 {
  position: fixed;
  display: block;
  width: 99%;
  top: 530px;
  height: 385px;
  bottom:auto;
}

#yhteystiedotSivu {
  position: absolute;
  top: 300px;
  min-width: 320px;
  width: 100%;
}

.valitutLisatarvikkeet {
  top:450px;
  left: 10px;
  width: 90%;
  max-width: 560px;
  border-top: 1px solid grey;
  padding-top: 10px;
  max-height: 140px;
  overflow:auto;
}

.valitutLisatarvikkeet table {
  width: 98%;
  max-height: 266px;
  overflow:auto;
}

.valitutLisatarvikkeet td {
  padding-right: 5px;
}

.valLT {
	min-width: 100px;
}

td .valittuMaara {
  width:30px;
}

#kuljettajaLabel {
  position:absolute;
  left: 200px;
  }

#yhteystietolomake {
  position:absolute;
  top:710px;
  left:10px;
  max-width: 600px;
}

#yhteystietolomake .lomakeInput {
  margin-left: auto;
  margin-right: auto;
  max-width:600px;
  width:97%;
  padding: 10px;
  border: 1px solid black;
  font-size:16px;
}

#yhteystietolomake #osoiteInput {
  width: 97%;
}

#yhteystietolomake #lisatietoInput {
  width: 97%;
}

#yhteystietolomake #yritysnimi {
  width: 97%;
}
#yhteystietolomake #ytunnus {
  width: 97%;
}
#yhteystietolomake #viite {
  width: 97%;
}
#yhteystietolomake #kosoiteInput {
  width: 97%;}

#yhteystietolomake #lisatietoInput {
  width: 97%;}

#yhteystietolomake #klisatietoInput {
  width: 97%;
}

/***************MAKSUTIEDOT-SIVU*******************/

#maksaminenSivu {
  top: 300px;
  min-width: 320px;
}

#overlay3 {
  position: fixed;
  display: block;
  width: 100%;
  top: 530px;
  height: 690px;
  bottom:auto;
}

#taytetytTiedot {
  top: 610px;
  left:10px;
  width: 90%;
  max-width: 560px;
  border-top: 1px solid grey;
  padding-top:10px;
  max-height: 300px;
  overflow:auto;
}

#taytetytTiedot td {
  padding-right: 20px;
}

#taytetytTiedot table {
  display:block;
  width:100%;
  z-index:5;
  max-height: 300px;
  overflow:auto;
}

#maksutapa {
  top:1010px;
  left: 10px;
  width: 100%;
  border-top: 1px solid grey;
  padding-bottom: 100px;
}


#verkkomaksuLabel, #korttimaksuLabel {
  display: none;
  left:-20px;
  width:300px;
}

#maksunoudettaessa {
  width:250px;}

#card-container {
  max-width: 350px;
  left:-50px;
}

#ajatJaHinta {
  padding-top:15px;
}

#valittuNPdiv{
  position:relative;
  float:left;
  margin-top:20px;
  margin-right:20px;
  /*width:100%;*/
  max-width:560px;
  overflow:auto;
}

#maksuerittelydiv{
  position:relative;
  float:left;
  border-left:0px solid grey;
  margin-top:20px;
  padding-left:0px;
  /*width:100%;*/
  max-width:560px;
}

#maksutapadiv{
  top: 10px;
  margin-bottom:10px;
  max-width:500px;
  left: -30px!important;
  width:90%;
  float: right;
}

#maksaminenSivu h3 {
  padding-left: 0px;
  width:200px;
}

#ehdot {
	position: relative;
	left: -71px;  margin-top:20px;margin-bottom: 20px;	padding-top:10px;
  border:none;
  width:90%;
  float:right;
}

#palveluntarjoaja {
  bottom:20px;
}

.ehdottxt {
	left: 90px;
  display: table-cell;
	width:300px;
  padding-bottom:25px;
}

#marktxt {
  top:10px;
}

#noutoPeruutusehdot, #maksuPeruutusehdot {
  min-width: 280px;
  width:85%;
}

#noutoPeruutusehdot .checkmark {
  margin-left:10px;
}

#maksuPeruutusehdot .checkmark {
  margin-left:10px;
}

.noutoPeruutusTxt, .maksuPeruutusTxt {
  left:50px;
}

#maksuPeruutusehdot {
  padding-bottom: 15px;
}

#sopimusehdot {
  position:absolute;
  top: 0px;
}

#markkinointi {
  position: absolute;
  top:50px;
}

#takaisin4 {
  float:left;
  top: 67px;
  margin-top:40px;
}

.notifyjs-container {
  width:200px;
}

#vahvistusNappi {
  position:relative;
  float:left;
  width: 160px;
  left:auto;
  right:-7%;
  margin-top: 40px;
  margin-bottom: 30px;
  height:50px;
  line-height: 12px;
}

#pyyntoNappi {
  position:relative;
  left: 0px;
  width: 218px;
  height:50px;
  font-size: 18px;
  top:115px !important;
  line-height: 10px;
}

#pyyntoNappi:hover {
  top:117px !important;
}

/*KALENTERI*/

#ui-datepicker-div {
	width: 300px;
  position: relative;
  left: 5% !important;
	z-index: 24;
  font: ''
}



/*AIKAVALINTA*/

#aikaDropDown {
  max-height: 340px;
}

#ptTimeSelectCntr {
  height:10%;
}

#ptTimeSelectCntr .ui-widget{
	position:relative;
    width: 160px;
    height: 400px;
    left: -40px;
    top: -10px;
}

.ui-datepicker table {
	min-width: 300px;
	max-width: 300px;
}

#ptTimeSelectCntr .ptTimeSelectHrCntr a,
#ptTimeSelectCntr .ptTimeSelectMinCntr a {
    margin:1px;
    padding:6px;
    width: 90%;
}

#ptTimeSelectCntr .ptTimeSelectLeftPane.ui-widget-content {
  max-height: 327px;
  /*overflow: scroll;*/
}

/*#ptTimeSelectCntr .ptTimeSelectRightPane.ui-widget-content {
  max-height: 450px;
  overflow: scroll;
}*/

#ptTimeSelectCntr .ui-widget.ui-widget-content {
	margin-top: 0px!important;
}


/*****************KIITOS VARAUKSESTASI******************/

#yhteenvetoKeskitys{
  width:100%;
}

#varauksentiedot {
	width: 800px;
  height: 1300px;
	margin-top: 10px;
  padding: 30px;
  padding-bottom:60px;
  border:1px solid grey;
  margin-bottom:10px;
}

#varauksentiedot h2 {
	color:black;
	text-decoration: underline #004799;
}

#varausvahvistusInfo {
  margin-left: 8px;
}

#varauksentiedot th {
  text-align:left;
	width: 400px;
	vertical-align: text-top;
}

#varauksentiedot td{
  text-align:left;
	vertical-align: text-top;
	width: 400px;
}

#varauksentiedot h3 {
	padding-top: 30px;
	text-decoration: underline #004799;
}

#varauksentiedot li {
	list-style-type: none;
}

#vuokraamontiedot td {
	width:60%;
}

#varausnumero td {
	width:60%;
}

#asiakkaantiedot td {
	width:60%;
}

#noutotiedot td {
	width:60%;
}

#palautustiedot td {
	width:60%;
}

#autontiedot td {
	width:60%;
}

#kampYhtveto{
    padding-left:15px;
}

#lisatarviketiedot td {
	width:60%;
}

#yvLogoDiv {
  position:absolute;
  right:30px;
  top:130px;  width:220px;
  height:80px;
  background: #fff !important;
  box-shadow:none !important;
}

#yvKuva {
	position:absolute;
	top:100px;
	left:135px;
}

#tulostusNappi {
left:715px;
}



}

#valikoimaH2 {
  text-decoration:underline;
  margin-top:50px;
}

.autovalikoimaTable {
  width:100%;
  max-width: 1600px;
  text-align:left;
  word-wrap: break-word;
  margin-bottom:100px;
}

.autovalikoimaTable th {
  background-color: #cbcbcb ;
  color: #fff;
  text-transform:uppercase;
  padding:3px 8px;
  min-width: 100px;
}

.autovalikoimaTable tr:nth-child(odd) {
  background: #f5f5f5;
}

.autovalikoimaTable td {
  color: #000;
  padding:3px 8px;
}

.autovalikoimaTable .autoluokkaNimi {
  font-size: 18px;
  font-weight:bold;
  background-color: #fff!important;
  padding-top: 35px;
  padding-bottom: 10px;
}

.autovalikoimaTable .automalliInfo {
  background-color: #fff!important;
}


/*****************SPINNERI****************/


#loader {
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 50;
  width: 50px;
  height: 50px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #004799;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}