.datetimechooser {
	display: flex;
	flex-direction:column;
	justify-content:flex-start;
	height:70px; 
}
.datetimechooser>*{
	overflow:hidden;
	/*transition:flex 0.3s ease-out;
	width:auto;
	flex:1;*/
}
.datetimechooser .controls{
	display: inline-flex;
	/* flex-direction:row; */
	/* justify-content: left; */
	align-items: center;
}
.datetimechooser .controls>*{
	overflow:hidden;
	/*transition:flex 0.3s ease-out; 
	width:auto;
	flex:1;*/
	
}

.datetimechooser .intro {
	display: flex;
	align-items: flex-end;
	width:50px;
}


.datetimechooser .type{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	/*flex:1;*/
}



.datetimechooser .type>div {
	cursor: pointer;
	font-size:0.7em;
	max-height:20px;
}
.datetimechooser .type>div:hover {
	border-bottom:1px solid #000000;
}



.datetimechooser select,.datetimechooser input  {
	padding: 3px;
}
.datetimechooser .time {
	/* flex: 2; */
	overflow: hidden;
	white-space: nowrap;
}
.datetimechooser .time input[type="number"] {
	width:40px;
	
}

.datetimechooser .time select{
	
}

.datetimechooser  input, .datetimechooser select {

	margin: 1px 1px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	box-sizing: border-box;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	outline: none;
}
.datetimechooser  input:focus, .datetimechooser select:focus {
	border: 1px solid #555;
}
.datetimechooser .hidden {
	flex: 0;
}