body {
	min-height: 100vh;
	
	background-image: linear-gradient(to bottom, #0001ff, #b4cef4);
}

/** footer **/
body > footer {
	background-color: #565656;
	color: #fff;
}
body > footer > p {
	padding: 10px;
	text-align: center;
}
body > footer > a {
    color: #30e7ed !important;
}
body > footer > a:hover {
	color: orange;
}

/** header **/
.white {
    background-color: white !important;
}
body > nav.navbar > .navbar-brand {
	color: #1800ff;
}
body > nav.navbar > .navbar-collapse > .navbar-nav > .nav-item > .nav-link {
	color: #0001ff;
}

/** page **/
body > main {
	/* to get footer at bottom of page always */
	flex:1 1 auto;
	color: #fff;
}
body > main > h1 {
	font-size: 100px;
	text-align: center;
	margin: 1rem auto 1rem auto;
}

body > main > h2 {
	text-align: center;
	margin: 1rem auto 1rem auto;
}

body > main  form {
	margin: 2rem auto 2rem auto;
}

body > main  form  .btn {
	width: 100%;
}

/** component **/
.component_input_option_wrapper {
	position: relative;
}
.component_input_option_wrapper > .component_input_option {
	display: none;
	
	position: absolute;
	top:  30px;
	left: 0px;
	
	width: 100%;
	
	margin: 0px;
	padding: 0px;
	
	list-style-type: none;
	
	background-color: #fff;
	border: 5px solid #fff;
	border-radius: 5px;
	
	z-index: 10000;
	
}

.component_input_option_wrapper > .component_input_option > li {
	cursor: pointer;
	
	padding: 3px;
	
	color: #000;
}
/** extra css for tradies **/

/*  index.phtml  */

.headline {
	text-align: center;
	font-size: 70px;
}