body {
	font: 12px/15px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-weight: normal;
	color: #666;
	letter-spacing: 1px;
}

.row {
	margin: 0px;
}

label {
	font-weight: inherit;
}

.form-control {
	font-size: inherit;
	vertical-align: middle;
	height: auto;
	color: #666;
	float: left;
	border: 1px solid #cccccc;
	background: #ffffff;
	padding: 5px;
	margin: 0 0 15px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
}

.btn {
	white-space: normal !important;
	cursor: pointer;
	letter-spacing: 0px;	
	border-radius: 5px;
}

.btn:hover, .btn:focus, .btn.focus {
	color: initial;
}

.btn:active, .btnactive {
	-webkit-box-shadow: none;
    box-shadow: none;
}  

.green-button {
	background: #82CB1A;
	background: linear-gradient(#B3F23F, #70B313);
	color: white;
}

.blue-button {
	background: #41B9F0;
	background: linear-gradient(#65D0FD, #21A4E5);
	color: white;
}

.grey-button {
	background: #E0DFDF;
	background: linear-gradient(#F5F5F5, #D9D7D7);
	color: #666666;
}  




/* 
 * FIXME: täytyy jatkossa miettiä millä tasolla css-määritykset yleistetään. 
 * Tällä hetkellä alla olevat määritykset ovat siis yleisiä sääntöjä. 
 */
.container {
	padding: 5px 0px;
	width: auto;
	max-width: 400px;
}

.row {
	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex; 
	-webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.row.icons.header {
	margin-bottom: 5px;
}

.col {
	padding: 0px 3px;
}

.panel {
	margin-bottom: 10px;
}

.underline {
	text-decoration: underline;
}

.panel.primary {
	background: #F6F6F6;
}

.panel.primary .panel-body {
	padding: 10px;
}

.panel.secondary {
	padding: 0px;
}

.panel.secondary .panel-body {
	padding: 5px;
	/ * word-break: break-all; */
	word-break: normal;
}

.panel.primary .list {
	list-style-type: none;
 	color: #E8A500;
 	padding-left: 0px;
}

.panel.primary .list.info {
	color: #E8A500;	
	float: left;
	width: 100%;
	margin: 0px;
}

.panel.primary .list.info #customInfo {
	display: none;
} 

.panel.collapse-panel {	
	margin: 0px;
	margin-top: 10px;	
}

.panel.collapse-panel .panel-heading {
	display: flex;
	text-align: center;
	cursor: pointer;
	white-space: normal;
	letter-spacing: 0px;
}

.panel.collapse-panel .panel-heading .indicator {
	margin: auto;
}

.panel.collapse-panel .panel-heading .panel-title {
	width: 100%;
	padding-left: 12px;
}

.panel.collapse-panel .panel-body {
	padding: 10px !important;
}

.panel.collapse-panel .panel-body * {
	margin: 5px 0 0 0;
}

.panel.collapse-panel .panel-body *:nth-child(1) {
	margin: 0;
}

.btn-block + .btn-block, .btn-block + .collapse-panel, .collapse-panel + .btn-block, .collapse-panel + .collapse-panel {
	margin-top: 5px;
}

.col.main {
	-webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
}


/* Tabletkoosta ylöspäin pätevät säännöt */
@media screen and (min-width: 768px) {
	body {
		align-items: center;
	}
	
	.container.no-verticalAlign {
		margin-top: 10%;
		margin-top: 10vh;
	}
	
	.col {
		padding: 0px 5px;
	}
}

/* Mobiilikoosta ylöspäin pätevät säännöt. */
/* @media screen and (min-width: 768px) { */
@media screen and (min-width: 600px) {
	body {					
		display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
		min-height: 100%;
		min-height: 100vh;
		vertical-align: middle;
	}
	
	.container {
		padding: 5px 0px;
		width: 100%;
		text-align: center;
	}

	.container.maxWidth-1 {
		max-width: 400px;
	}
	.container.maxWidth-2 {
		max-width: 630px;
	}
	.container.maxWidth-3 {
		max-width: 850px;
	}
	
	
	.innerContainer {
		text-align: left;
		width: auto;
		max-width: 100%;
	}
	
	.panel.primary .panel-body {
		padding: 20px;
	}

	.row {		
		-webkit-box-orient: horizontal;
  		-webkit-box-direction: normal;
  		-webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
		width: 100%;
	}

	.col.main {
		/* min-width: 360px; */
		min-width: 276px;		
		width: 100%;
		-webkit-box-ordinal-group: 1;
    	-webkit-order: 0;
        -ms-flex-order: 0;
         order: 0;
	}			
	
	.col.side {
		/* min-width: 204px; */
		min-width: 152px;
		width: 60%;
		display: inline;		
	}  
	
	.no-flexbox .col.main {
		width: 46%;
	}
	
	.no-flexbox .col.side {		
		width: 27%;
	}
}