html {
    /*background: url(/images/vanderhall_background.png) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    font-family: 'Abel',Helvetica,Arial,Lucida,sans-serif;
    margin:0px;
    height:100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
    text-align: center;
}

input[type="button"],input[type="submit"],input[type="number"] {
		-webkit-appearance: none;
		padding:5px 10px;
		font-size:14px;
}

button {
	border:#ccc 1px solid;
	-webkit-appearance: none;
	padding:5px;
	font-size:14px;
	
}

input[type="text"],input[type="password"],input[type="number"] {
	border:#ccc 1px solid;
	padding:10px;
	margin:5px;
}

input:-moz-read-only { /* For Firefox */
  background-color: #eee;
}

input:read-only {
  background-color: #eee;
}

textarea {
	border:#ccc 1px solid;
	padding:5px;
	margin:5px;
}

select {
	-webkit-appearance:none;
	border:#ccc 1px solid;
	margin:5px;
	padding:5px 35px 5px 5px;
	border-radius: 0px;
	background: #fff url('/images/selectbox_arrow.png') no-repeat right center;
	background-size: contain;
}

form {
	margin:0px;
	border:0px;
}

#header_div {
	background-color:#000;
	padding:25px;
}

#header_container {
	width:95vw;
	max-width: 1100px;
	margin:0px auto;
}

#header_logo {
	width:338px;
	height: auto;
	max-width: 50vw;
}

#menu_container {
	float:right;
}

#menu {
	list-style: none;
	padding:0px;
	margin:0px;
}

#menu .submenu{
	list-style: none;
	display:none;
}

#menu li {
    float: left;
    position: relative;
    padding:10px;
    cursor:hand;
}

#menu a {
    display: block;
    padding: 5px;
    color: #ccc;
    text-transform: capitalize;
    
    text-decoration: none;
}
#menu a:hover {
    color: #fff;
}

#menu ul {
	margin:0px;
	padding:0px;
	top:50px;
    left: 0; /* Bring back on-screen when needed */
    background-color: #000;
    list-style: none;
    position: absolute;
    z-index: 999999;
}
#menu ul li {
    cursor:hand;
    margin:1px;
    padding:10px;
    float: none;
}
#menu ul a {
    white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
   	text-transform: capitalize;
    text-decoration: none;
}
#menu li:hover ul { /* Display the dropdown on hover */
	margin:0px;
	padding:0px;
	top:50px;
    left: 0; /* Bring back on-screen when needed */
    background-color: #000;
    display:inline;
}
#menu li .subheader{ 
    color: #fff;
    text-decoration: underline;
}


#menu li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    color: #fff;
}
#menu li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
   	text-transform: capitalize;
    text-decoration: none;
}

#menu li:hover ul .link:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background-color: #999;
}

#mobile_menu_container {
	display:none;
}

#breadcrumb_trail {
    text-align:center;
    font-size:18px;
    padding:10px;
    color:#999;
}

#breadcrumb_trail a{
    color:darkorange;
    text-decoration: none;
}

#breadcrumb_trail a:hover{
    font-weight:bold;
}

#save_div {
	display:inline;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:10px;
	background-color:#090;
	color:#fff;
	font-weight: bold;
	z-index:10000001;
	text-align: center;
	border-bottom: #999 2px solid;
	margin: 0px;
}

#error_div {
	display:inline;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:10px;
	background-color:#A00;
	color:#fff;
	font-weight: bold;
	z-index:19999999;
	text-align: center;
	border-bottom: #999 2px solid;
	margin: 0px;
}

#error_div ul{
	font-size:12px;
	width:400px;
	margin:5px auto;
	text-align: left;
}


#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
	background-color:#000;
	color:#fff;
	font-size:18px;
	text-align: center;
	padding: 10px;	
}

#footer_white {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color:#fff;
	color:#000;
	font-size:18px;
	text-align: left;
	padding: 10px;	
}

#content_div {
	width:95vw;
	max-width: 1200px;
	margin:0px auto 80px auto;
    background-color:rgba(255, 255, 255, 0.90);
	padding: 0px 25px 100px 25px;
	
    -webkit-box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.75);
	
	z-index:999;
	min-height: -moz-calc(100% - 80px);
    min-height: -webkit-calc(100% - 80px);
    min-height: calc(100% - 80px);
}

#content_div::before {
	  content: "";
	  position: fixed;
	  inset: 0;
	  background-image: url("/images/vanderhall_login_background_splash.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	  opacity: 0.4;           /* transparency level */
	  z-index: -1;        
}


.results_table_wrapper {
	width:100%;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}

.results_table {
	margin:0px auto;
	border:#ccc 1px solid;
	min-width: 800px;
	width: 95%;
	padding:5px;
	background-color:#fff;
}

.results_table td {
	padding:3px;
}

.results_table input[type="button"],.results_table  input[type="submit"] {
	background-color:#fff;
	border:#ccc 1px solid;
}

.results_table .row_1{
	background-color:#eee;
}

.results_table .row_2{
	background-color:#f7f7f7;
}

.results_table .record:hover{
	background-color:#CAEDAA !important;
}

.results_table .record{
	cursor:pointer;
}

.results_table .header {
	background-color:#222222;
	color:#fff;
	font-weight:bold;
	font-size:24px;
	text-align: center;
	padding:5px;
	border-bottom:#62696c 3px solid;
}


.results_table .subheader {
	background-color:#62696c;
	color:#fff;
	font-weight:bold;
	font-size:16px;
	text-align: center;
	padding:5px 25px;
}

.results_table .uheader {
	color:#333;
	font-weight:bold;
	font-size:16px;
	text-align: center;
	text-decoration: underline;
	padding:5px 25px;
}


.results_table .search_box {
	border:#62696c 3px solid;
}

.results_table .footer {
	background-color:#62696c;
	color:#fff;
	font-weight:bold;
	font-size:16px;
	padding:5px;
	text-align: center;
}

.results_table th {
	padding:5px;
	font-size:16px;
	text-align: center;
	background-color:#62696c;
	color:#fff;
}

.details_table_wrapper {
	width:100%;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}

.details_table {
	margin:20px auto;
	border:#ccc 1px solid;
	min-width: 500px;
	max-width: 800px;
	padding:5px;
	background-color:#fff;
}

.details_table td {
	padding:5px;
	background-color:#eee;
}

.details_table th {
	padding:5px;
	text-align: right;
	background-color:#222222;
	color:#fff;
	font-weight:bold;
	padding:5px;
}

.details_table .header {
	background-color:#222222;
	color:#fff;
	font-weight:bold;
	font-size:24px;
	text-align: center;
	padding:5px 25px;
	border-bottom:#62696c 3px solid;
}

.details_table .subheader {
	background-color:#62696c;
	color:#fff;
	font-weight:bold;
	font-size:16px;
	text-align: center;
	padding:5px 25px;
}

.details_table .footer {
	background-color:#62696c;
	color:#fff;
	font-weight:bold;
	font-size:18px;
	text-align: center;
}

.details_table .footer input[type="button"],.details_table .footer input[type="submit"] {
	background-color:#fff;
	border:#ccc 1px solid;
}

.details_table .subheader input[type="button"],.details_table .subheader input[type="submit"] {
	background-color:#fff;
	border:#ccc 1px solid;
}

#dealer_profile {
    margin:20px auto;
    padding:10px;
    width:80%;
}

#stage_2_div {
    border:#ccc 1px solid;
    background-color:#eee;
    margin:20px auto;
    padding:10px;
    width:80%;
}

.requirement_item {
    border:#ccc 1px solid;
    background-color:#eee;
    margin:20px auto;
    padding:10px;
    display:flex;
    border-radius: 45px;
    width:80%;
    flex-wrap: wrap;
    justify-content: space-between
}

.requirement_item .status {
    border:#ccc 3px solid;
    width:256px;
    display:flex;
    background-color:#fff;
    border-radius: 100px 0px 0px 100px;
    height:64px;
}

.requirement_item .status .circle{
    font-size:36px;
    line-height: 48px;
    width:48px;
    height:48px;
    text-align:center;
    vertical-align: middle;
    border-radius: 32px;
    padding:8px;
    background-repeat: no-repeat;
    background-position: center;
}

.requirement_item .status .label{
    text-align: center;
    vertical-align: middle;
    font-size:24px;
    line-height: 48px;
    flex-grow:1;
    padding:8px;
}

.requirement_item .waiting {
    background-color:#999;
    background-image:url('/images/checkbox_open.png');
}

.requirement_item .review {
    background-color:orange;
    background-image:url('/images/checkbox_dash.png');
}

.requirement_item .rejected {
    background-color:#900;
    background-image:url('/images/checkbox_cross.png');
}

.requirement_item .approved,.complete {
    background-color:#090;
    background-image:url('/images/checkbox_check.png');
}

.requirement_details {
    flex-grow:1;
    max-width:450px;
}

.requirement_details .title{
    font-size:24px;
    font-weight: bold;
 }

.requirement_details .desc{
    font-size:14px;
    font-weight: normal;
}

.upload_button {
    text-align: center;
    vertical-align: middle;
    font-size:24px;
    line-height: 48px;
    padding:8px;
    border:#ccc 3px solid;
    width:48px;
    background-color:#fff;
    border-radius: 100px;
    cursor:pointer;
    height:48px;
    background-image:url('/images/camera_icon.png');
    background-size: contain;

}

.file_details {
    min-width:128px;
    text-align: center;
    vertical-align: middle;
    font-size:16px;
    line-height: 24px;
    padding:8px;
}

.upload_div {
    width:100%;
    border:#ccc 1px solid;;
    padding:10px;
    margin:16px;
    display:none;
    background-color:#fff;

}

.documents_div {
    width:100%;
    margin:16px;
}

.profile_edit_row {
    display:none;
}

.profile_display_row th {
    font-weight: normal;
}

.checkbox_div {
    padding:8px;
    width:160px;
    height:48px;
}


@media only screen and (max-width: 1200px) /* Tablet / Small Laptop */ {
	#content_div {
		width:98vw;
		padding:0px 10px 100px 10px;
	}

	.results_table {
		min-width:0;
		width:100%;
	}

	.results_table .header {
		font-size:20px;
	}

	.results_table .search_box table {
		width:100%;
	}

	.results_table .search_box td {
		display:block;
		width:100%;
		box-sizing:border-box;
	}

	.results_table .search_box select,
	.results_table .search_box input[type="text"] {
		width:100%;
		box-sizing:border-box;
	}

	.details_table {
		min-width:0;
		max-width:100%;
		width:100%;
	}

	.details_table th {
		white-space:nowrap;
	}

	#dealer_profile,
	#stage_2_div,
	.requirement_item {
		width:95%;
	}
}

@media only screen and (max-width: 840px) /* Mobile Phone */ {
	body {
		width:100%;
		overflow-x:hidden;
	}
	
	#header_container {
		width:100%;
		margin:0px auto;
	}
	#menu_container {
		display:none;
	}
	#mobile_menu_container {
		display:inline;
		text-align: right;
		float:right;
		margin-right:-25px;

	}
	
	#mobile_menu_button {
	    display: block;
	    padding: 5px;
	    color: #ccc;
	    text-transform: uppercase;
	    text-decoration: none;
		padding:10px;
	}
	
	#mobile_menu {
		display: none;
		list-style: none;
		padding:0px;
		margin:0px;
		right:0px;
		float:left;
		position:absolute;
		z-index: 999999;

	}
	
	#mobile_menu .submenu{
		list-style: none;
		display:none;
	}
	
	#mobile_menu li {
		text-align: left;
	    position: relative;
	    padding:10px;
	    cursor:hand;
	    background-color:#000;
	}
	
	#mobile_menu a {
	    display: block;
	    padding: 5px;
	    color: #ccc;
	    text-transform: uppercase;
	    text-decoration: none;
	}
	
	#content_div {
	    width:100vw;
	    margin:0px;
	    padding:5px 0px 80px 0px;
    }
    
    .results_table {
    	margin:0px auto;
    	border:#ccc 1px solid;
    	min-width:0;
    	width:100%;
    	padding:5px;
    	background-color:#fff;
    }

    .details_table {
    	min-width:0;
    	max-width:100%;
    	width:100%;
    }

    .details_table th,
    .details_table td {
    	display:block;
    	width:100%;
    	box-sizing:border-box;
    	text-align:left;
    }
    .requirement_item {
        border:#ccc 1px solid;
        background-color:#eee;
        margin:20px auto;
        padding:10px;
        display:flex;
        border-radius: 45px;
        width:80%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .requirement_details {
        flex-grow:1;
        width:100%;
        margin:5px;
    }

    .requirement_item .status {
        border:#ccc 3px solid;
        width:100%;
        display:flex;
        background-color:#fff;
        border-radius: 100px 100px 100px 100px;
        height:64px;
    }

    .profile_title_row {
        display:none;
    }
    
    .profile_edit_row {
        display:none;
    }
    
    .profile_display_row {
        display:none;
    }

}