html {
	height:100%;
  }


body{
	background: #fff;
	color: #000;
	line-height: 1.4em;
	width: 100%;
	overflow-y:auto;
}
		

.Vapaa, .Varattu,  .Vapautumassa {
	border-radius: 25px;
    padding: 0px 2px;
    font-size: 10pt;
    width: 100%;
    text-align: center;
	display: inline-block;
	
}

.Vapaa, select option[value="Vapaa"]{
	background: green;
	color: #fff;
}

.Varattu, select option[value="Varattu"]{
	color: #fff;
	background: #c00606;
}

.Vapautumassa, select option[value="Vapautumassa"]{
	color: #000;
	background: #ffbb00;
}
	
.olabel{
		width:140px;
		display:block;
		float:left;
}
.row{

	}
	
#login{
     position: absolute;
    top: 38%;
    left: 50%;
	width: 96%;
	 transform: translate(-50%, -50%);
    max-width: 295px;
    padding: 10px;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 10px 5px rgba(150,150,150,1);
    -moz-box-shadow: 0px 0px 10px 5px rgba(150,150,150,1);
    box-shadow: 0px 0px 10px 5px rgba(150,150,150,1);
    background-color: #fff;
	text-align: center;
}

#info{
 position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 900px;
  width: 94%;
  box-shadow: 0px 0px 10px 5px rgba(150,150,150,1);
  padding: 8px;
  border-radius: 5px;
  height: auto;
  
}	

.container{
  position: absolute;
  top: 35%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  max-width: 520px;
  width: 94%;
  box-shadow: 0px 0px 10px 5px rgba(150,150,150,1);
  padding: 4px 10px;
  border-radius: 5px;
}	

.container h2 span{
	display: block;
	font-size: 11pt;
	border-bottom: 1px solid #000;
}


table{
	width:100%!important;
	text-align:left;
	font-size: 11pt;
	}

#info table tr:hover td{	
	background: #72b2d3;
}

#info table tr td:last-child {
    text-align:right
}	

#info tr:nth-child(even) {
      background-color: #e9e9e9;
}	

#info td, #info th{
	padding: 4px 6px;
	}

#info td{
    color: #171717;
	}
	
#info tr th{
	color: #ffffff!important;
    background: black;
	border: none;
	}	
	
#info .halli-title{
	display: inline-flex;
	color: #fff!important;
	background: #000;
	padding: 2px 8px;
	border-top-right-radius: 5px;
	font-size: 12pt;
}		
	
a{
	font-size: 10pt;
	color: #F00;
	margin-left:10px;
	}
a.edit
{
	color:#09F
	}	
	
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .1rem .4rem;
    font-size: 0.9rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}	

.btn-primary {
    color: #fff;
    background-color: #575757;
    border-color: #a9a9a9;
    text-decoration: none;
}
	
#form1{
	display: block;
	border-radius: 5px;
	border: 1px solid #666;
	height: auto;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(150,150,150,1);
	-moz-box-shadow: 0px 0px 10px 5px rgba(150,150,150,1);
	box-shadow: 0px 0px 10px 5px rgba(150,150,150,1);
	color: #000
	}
	
input{
	width: 95%;
    border: 1px solid #b6b6b6;
    padding: 6px 6px;
    border-radius: 4px;
	margin-bottom:5px;
}

select{
    border: 1px solid #b6b6b6;
    padding: 6px 6px;
    border-radius: 4px;
	margin-bottom:5px;
	color: #fff;
}


#lisa  td:first-child{
	padding: 4px;
	}


.buttons{
	margin-top:14px;
	display:inline-block;
	}	
	
.float-right{
	float:right
}	
.float-left{
	float:left
}	

.mb-1{
	margin-bottom: 10px;
}
.mt-1{
	margin-top: 10px;
}

input[type="submit"], input[type="reset"]{
	padding: 5px 2px;
	margin-left:10px;
	border: 1px solid #fff;
	cursor:pointer;
	width: 120px;
	}	
input[type="submit"]{
	background: green;
	color: white;
	margin-right:2px;
	
	}	
input[type="submit"]:hover{
	background: #0C0;
	}	
input[type="reset"]{
	background: gray;
	color: white;
	}		
input[type="reset"]:hover{
	background: #C00
	}
h2{
	margin-bottom: 11px;
    margin-top: 2px;
	font-size: 16pt;
	}
	
a {
	color: #006fb6;
	}	
	
@media (max-width: 586px) {
	#login, #login input[type="submit"]{
		font-size:105%;
	}

	.m-none{
		display:none;
	}
	
	.container {
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -12%);
		max-width: 510px;
		width: 94%;
		box-shadow: 0px 0px 10px 5px rgba(150,150,150,1);
		padding: 4px 10px;
		border-radius: 5px;
	}
	
	#info {
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -12%);
		max-width: 900px;
		width: 94%;
		box-shadow: 0px 0px 10px 5px rgba(150,150,150,1);
		padding: 8px;
		border-radius: 5px;
		height: auto;
	}
			
}