/* ---------------------------------------------------------------- */
/*
/* ---------------------------------------------------------------- */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
html, body {
	margin:0;
	padding:0;
	background-color:#eee;
    font-family: 'Nunito', sans-serif;
}
h1, h2, h3 {
	margin:10px 0 0 0;
	padding:0;
}

/* ---------------------------------------------------------------- */
/*
/* ---------------------------------------------------------------- */
#logo {
	text-align:center;
}
#logo img {
	height:40px;
	width:auto;
	margin:10px 0 0 0;
}


/* ---------------------------------------------------------------- */
/*
/* ---------------------------------------------------------------- */
#options-container {
	margin:10px 0;
	padding:0;
	display:flex;
	flex-direction: row;
	flex-wrap : wrap;
	justify-content:center;
}
#options-container > * {
	flex-grow:1;
	font-family: 'Nunito', sans-serif;
	font-size:20px;
	line-height: 60px;
	height:60px;
	align-items: center;
	flex-basis: 10%;
	max-width:100px;
	padding:0;
	margin:0 5px;
}
#options-container #total-combinations,
#options-container #processed {
	border: 1px solid #666;
	text-align:center;
	justify-content: center;
}

/* ---------------------------------------------------------------- */
/*
/* ---------------------------------------------------------------- */
#messages-container {
	margin:20px 30px 10px 30px;
	display:flex;
	flex-direction: row;
	flex-wrap : wrap;
	min-height:40px;
}
#messages-container .error {
	border:1px solid #aaa;
	font-size:15px;
	line-height:15px;
	padding:10px;
	background-color: #ffe2e2;
	display:flex;
	flex-grow:1;
	justify-content:center;
}
#messages-container .info {
	border:1px solid #aaa;
	font-size:15px;
	line-height:15px;
	padding:10px;
	display:flex;
	flex-grow:1;
	justify-content:center;
	background-color:#e2e2e2;
}

/* ---------------------------------------------------------------- */
/*
/* ---------------------------------------------------------------- */
#fields-container {
	margin:0 10px;
	padding:0;
	display:flex;
	flex-direction: row;
	flex-wrap : wrap;
}
.field, textarea {
	margin: 10px;
	display:flex;
	flex-grow:1;
	flex-direction: column;
	align-items:stretch;
}
.field h2 {
	flex-grow:2;
	text-align:center;
	margin: 0;
	padding:5px 0 0 0;
	font-size:20px;
}
textarea {
	border:1px solid #ddd;
    font-family: 'Nunito', sans-serif;
	font-size:15px;
	padding:5px;
	color:#666;
}

/* ---------------------------------------------------------------- */
/*
/* ---------------------------------------------------------------- */
#combinations-container {
	margin:0 auto;
	padding:0;
	display:flex;
	flex-direction: column;
	justify-content:center;
	max-width:50%;
}
#combinations-container > * {
	display:flex;
	flex-grow:0.5;
	justify-content:center;	
}

/* ---------------------------------------------------------------- */
/*
/* ---------------------------------------------------------------- */
#output-container {
	margin:0 auto;
	padding:0;
	display:flex;
	flex-direction: column;
	justify-content:center;
	max-width:50%;
}
#output-container > * {
	display:flex;
	flex-grow:0.5;
	justify-content:center;	
}