/*= GENERAL STYLING
--------------------------------------------------------*/
/* GLOBALS */
	html{height:100%;}
	body{margin:0; padding:0; width:100%; height:100%; font-family:"Roboto",sans-serif; font-size:1.0em; font-weight:300; color:#444444; background-color:#222222;}
	* {-webkit-box-sizing:border-box;box-sizing:border-box;}
	img {height:auto; max-width:100%; vertical-align:top;}
	code {border-radius:8px; color:#000000; display:block; padding:30px; margin:0px; width:100%; word-wrap: break-word; background-image: url("/assets/icons/code-16.png"); background-color:#DDDDDD; background-position:8px 8px; background-repeat: no-repeat;}
	h1,h2,h3,h4 {padding:0; margin:0;}
	a {text-decoration:none;}
	p {margin-top:0;}
	
/* MAIN BLOCKS (Percentages) */
	.f_full {width:100%; display:block; float:left;}
	.f_100{width:100%; display:block; float:left;}
	.f_50{width:50%; display:block; float:left;}
	.f_25{width:25%; display:block; float:left;}

/* MAIN BLOCKS (Fixed) */
	.b_boxed {width:1024px; margin:0 auto; display:block; float:none;}
	.b_nav_boxed {width:1024px; margin:0 auto; display:block; float:none;}
	.b_nav_100{width:1024px; display:block; float:left;}
	.b_100{width:1024px; display:block; float:left;}
	.b_50{width:512px; display:block; float:left;}
	.b_50r{width:512px; display:block; float:right;}
	.b_50_1{width:512px; display:block; float:left;}
	.b_33 {width:341px; display:block; float:left;}
	.b_33_1 {width:342px; display:block; float:left;}
	.b_25{width:256px; display:block; float:left;}
	.b_25_1{width:256px; display:block; float:left;}
	.b_20{width:204px; display:block; float:left;}
	
/*= USER DEFINED AREAS
--------------------------------------------------------*/
	#logo{padding:0; background-color:#FFFFFF; border-top:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD; font-weight:300;}
		.logo{padding:10px; margin:15px;}
		.logout{padding:10px; margin:15px; text-align:right;}

	#footer{padding:0; border-top:1px solid #DDDDDD; font-weight:300;}
		.footer_left{padding:10px; margin:15px; font-size:0.7em; color:#999999;}
		.footer_right{padding:10px; margin:15px; font-size:0.7em; color:#999999; text-align:right;}
	
	#contacts{background-color: #ffffff; padding:0; border-top:1px solid #DDDDDD; font-weight:300;}
		.contacts {color: #000000; font-size: 1em; margin: 15px; padding: 10px; text-align: center;}
		.contacts  span{color:#CC0000; font-weight:bold;}
		
	#login{padding:0; background-color:#F2F2F2;}
		.login_box {background-color: #ffffff; border: 1px solid #dddddd; margin: 50px auto; padding: 50px; width: 400px;}
		.login_box a {color:#000000; font-size:0.9em;}

	#driver{padding:0; background-color:#F2F2F2;}
		.driver_box {background-color: #ffffff; border: 1px solid #dddddd; margin: 50px auto; padding: 50px; width: 400px;}
	
	#content{padding:0; background-color:#F2F2F2;}	
		.content_form{margin:20px 0; padding:10px; border:1px solid #DDDDDD; background-color:#FFFFFF;overflow:hidden;}

	#maintable {border-bottom: 1px solid #ddd; width: 100%; margin:0; padding:10px; border-collapse: collapse; border-spacing: 0;}
	#maintable tr {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 5px;}
	#maintable tr:hover {background-color:#EEEEEE;}
	#maintable th, #maintable td {text-align:left; padding:5px;}
	#maintable th {text-transform: uppercase; letter-spacing: 1px; background-color: #f2f2f2; padding:10px 5px;}
	#maintable td {vertical-align: top;}

	/* Main Table */
	.main_table {width: 100%; border-collapse: collapse;}
	.main_table tr:nth-of-type(odd) {background: #eee;}
	.main_table th {background: #cccccc; color: white;}
	.main_table td, .main_table th {padding: 10px; border: 1px solid #ccc; text-align: left; word-wrap: break-word;}
	.main_table_sml{max-width:100px;}
	.main_table_lrg{max-width:350px;}
	/* Main Table (Responsive)*/
	.main_table_small {width: 100%;}
	.main_table_small, .main_table_small thead, .main_table_small tbody, .main_table_small th, .main_table_small td, .main_table_small tr { display: block; }
	.main_table_small thead tr {position: absolute; top: -9999px; left: -9999px;}
	.main_table_small tr {border: 1px solid #ccc;}
	.main_table_small td {border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; }
	.main_table_small td:before {position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; content: attr(data-column); color: #000; font-weight: bold;}
		
	.mobile_box  {background-color: #ffffff; margin:20px; padding:0; text-align: center; border:1px solid #DDDDDD;}
	.mobile_box  a {display:block; height:100px; padding: 20px; color:#000000; }

	.txt_red{color:#CC0000;}
	.txt_center {text-align:center;}

	.bg_green {background-color:#00CC00!important; color:#000000; padding: 20px;}
	img[usemap] {
		border: none;
		height: auto;
		max-width: 100%;
		width: auto;
	}
	
	.upload-images {padding: 10px !important; float: left; width:200px !important; text-align: center;}
	#photoWrap {display: flex; justify-content: space-evenly;}
	.photoBox {height: 200px; width: 200px !important; border: 1px solid #255488;}
	
	
	#contacts a {color:#000000; text-decoration:none;}
	
	#working_popup {display: none; position: fixed; top: 50%; left: 50%; width: 200px; background-color: green; color: white; padding: 20px; text-align: center; border-radius: 10px; font-size: 1.6rem;}
/* FORMS
============== */	
	.main-form {padding:0; margin:0; width:100%;}
	.main-form legend {display:none;}
	.main-form fieldset {margin:0; padding:0; border:0;}
	.main-form  div{width:100%; padding:0; overflow:hidden; margin:0; display:block;}
	.main-form label {float:left; width:120px; padding: 5px 10px 0 0; margin:0;}
	.main-form span {display:block; min-width:100px; overflow:hidden; padding:0 5px 0 0;}
	.main-form input{border:1px solid #DDDDDD; background-color:#FAFAFA; color:#888; margin:0; outline:0 none; padding:5px;}
	.main-form input:focus {background-color: #ffffff; border: 1px solid #255488; color: #255488; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;}
	.main-form select{width:100%; border:1px solid #DDDDDD; background-color:#FAFAFA; color:#888; margin:0; outline:0 none; padding:5px;}
	.main-form textarea{width:100%; height:100px; border:1px solid #DDDDDD; background-color:#FAFAFA; color:#888; margin:0 0 20px; outline:0 none; padding:5px; resize:vertical; -webkit-appearance: none;}
	.main-form textarea:focus {background-color: #ffffff; border: 1px solid #255488; color: #255488; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -webkit-appearance: none;}
	.main-form input[type="submit"]{width:100%; border: 1px solid #FFFFFF; background-color:#255488; color:#FFFFFF; margin:5px 0; outline:0 none; padding:10px; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -webkit-appearance: none;}
	.main-form input[type="submit"]:hover {background-color: #ffffff; border: 1px solid #255488; color: #255488; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -webkit-appearance: none;}
	.main-form button{width:100%; border: 1px solid #FFFFFF; background-color:#255488; color:#FFFFFF; margin:5px 0; outline:0 none; padding:10px; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -webkit-appearance: none;}
	.main-form button:hover {background-color: #ffffff; border: 1px solid #255488; color: #255488; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;}
	.main-form .formerror{border:1px solid #CC0000;}
	.main-form .spacer{padding:0 0 10px 0;}
	
	.short_th th {max-width: 300px;}
	.short_th input {width:100%;}

/* UPLOADER STYLE
============== */	
	.pagebutton{background-color: #cccccc; border: 1px solid #cccccc; border-radius: 5px; color: #222222; cursor: pointer; margin: 3px; padding: 5px; display:inline-block;}
	
	.pagebutton{background-color:#5ba1b2;border-color:#5ba1b2;color:#fff;padding:5px 10px;-webkit-transition: all ease 0.6s;-o-transition: all ease 0.6s;transition: all ease 0.6s;}
	@media only screen and (min-width:1000px){
		.pagebutton:hover {background-color: #fff; color: #5ba1b2;-webkit-transition: all ease 0.6s;-o-transition: all ease 0.6s;transition: all ease 0.6s;}
	}
	.hiddenitem {display:none; }
	.myfile{padding:10px!important; margin:0!important; border-bottom:1px solid #FF0000; overflow: hidden;}
	.percentage{display:inline-block!important; float: right;}
	.removethisfile{float: right;}

.fnol_upload {
	float: left;
	height: 300px;
	width: 300px !important;
	border: 1px solid black;
	padding: 10px !important;
	margin: 10px !important;
}




/*= RESPONSIVE
--------------------------------------------------------*/

/* (960PX) */
	@media (min-width:960px) and (max-width:1023px){
		/* MAIN BLOCKS (Percentages) */
		.f_full {}
		.f_100{}
		.f_50{}
		.f_25{}

		/* MAIN BLOCKS (Fixed) */
		.b_boxed {width:960px;}
		.b_nav_boxed {width:100%;}
		.b_nav_100{width:960px;}
		.b_boxed {width:960px;}	
		.b_100{width:960px;}
		.b_75{width:720px;}
		.b_66{width:640px;}
		.b_50{width:480px;}
		.b_50r{width:480px;}
		.b_50_1{width:480px;}
		.b_33{width:320px;}
		.b_33_1{width:320px;}
		.b_25{width:240px;}
		.b_25_1{width:240px;}
		.b_20{width:192px;}
		.b_33_nav{width:320px;}
		.b_66_nav{width:640px;}
		.mobile_box  a {height:60px;}

	
	}

/* (760PX) */
	@media (min-width:760px) and (max-width:959px){
	/* MAIN BLOCKS (Percentages) */
		.f_full {}
		.f_100{}
		.f_50{width:100%;}
		.f_25{}

	/* MAIN BLOCKS (Fixed) */
		.b_boxed {width:760px;}
		.b_nav_boxed {width:100%;}
		.b_nav_100{width:100%;}
		.b_boxed {width:760px;}	
		.b_100{width:760px;}
		.b_75{width:380px;}
		.b_66{width:506px;}
		.b_50{width:380px;}
		.b_50r{width:380px;}
		.b_50_1{width:760px;}
		.b_33{width:253px;}
		.b_33_1{width:254px;}
		.b_25{width:380px;}
		.b_20{width:760px;}
		.b_25_1{width:380px;}
		.b_33_nav{width:229px;}
		.b_66_nav{width:100%; float:none;}
		.login_box {margin: 10px auto; padding: 10px;}
		.driver_box {margin: 10px auto; padding: 10px;}
		.mobile_box  a {height:60px;}
				
		.main_table_sml{max-width:100px;}
		.main_table_lrg{max-width:275px;}
	}

/* (600PX) */
	@media (min-width:600px) and (max-width:759px){
	/* MAIN BLOCKS (Percentages) */
		.f_full {}
		.f_100{}
		.f_50{width:100%;}
		.f_25{}

	/* MAIN BLOCKS (Fixed) */
		.b_boxed {width:600px;}
		.b_nav_boxed {width:100%;}
		.b_nav_100{width:100%;}
		.b_boxed {width:600px;}	
		.b_100{width:600px;}
		.b_75{width:300px;}
		.b_66{width:600px;}
		.b_50{width:600px;}
		.b_50r{width:600px; float:left;}
		.b_50_1{width:600px;}
		.b_33{width:300px;}
		.b_33_1{width:600px;}
		.b_25{width:300px;}
		.b_25_1{width:600px;}
		.b_20{width:600px;}
		.b_33_nav{width:229px;}
		.b_66_nav{width:100%; float:none;}
		.login_box {margin: 10px auto; padding: 10px;}
		.driver_box {margin: 10px auto; padding: 10px;}
		.mobile_box  a {height:60px;}
		.footer_left{text-align:center;}
		.footer_right{text-align:center;}
		.main_table_sml{max-width:100px;}
		.main_table_lrg{max-width:180px;}
		
	}

/* (480PX) */
	@media (min-width:480px) and (max-width:599px){
	/* MAIN BLOCKS (Percentages) */
		.f_full {}
		.f_100{}
		.f_50{width:100%;}
		.f_25{}

	/* MAIN BLOCKS (Fixed) */
		.b_boxed {width:480px;}
		.b_nav_boxed {width:100%;}
		.b_nav_100{width:100%;}
		.b_boxed {width:480px;}	
		.b_100{width:480px;}
		.b_75{width:480px;}
		.b_66{width:480px;}
		.b_50{width:480px;}
		.b_50r{width:480px; float:left;}
		.b_50_1{width:480px;}
		.b_33{width:480px;}
		.b_33_1{width:480px;}
		.b_25{width:480px;}
		.b_25_1{width:480px;}
		.b_20{width:480px;}
		.b_33_nav{width:229px;}
		.b_66_nav{width:100%; float:none;}
		.login_box {margin: 10px auto; padding: 10px;}
		.driver_box {margin: 10px auto; padding: 10px;}
		.mobile_box  a {height:60px;}
		.footer_left{text-align:center;}
		.footer_right{text-align:center;}
		
	}

/* (320PX) */
	@media (max-width:479px){
	/* MAIN BLOCKS (Percentages) */
		.f_full {}
		.f_100{}
		.f_50{width:100%;}
		.f_25{}

	/* MAIN BLOCKS (Fixed) */
		.b_boxed {width:320px;}
		.b_nav_boxed {width:100%;}
		.b_nav_100{width:100%;}
		.b_boxed {width:320px;}	
		.b_100{width:320px;}
		.b_75{width:320px;}
		.b_66{width:320px;}
		.b_50{width:320px;}
		.b_50r{width:320px; float:left;}
		.b_50_1{width:320px;}
		.b_33{width:320px;}
		.b_33_1{width:320px;}
		.b_25{width:320px;}
		.b_20{width:320px;}
		.b_25_1{width:320px;}
		.b_33_nav{width:229px;}
		.b_66_nav{width:100%; float:none;}
		
		.mobile_box  a {height:60px;}
		
		.login_box {background-color: #ffffff; border: 1px solid #dddddd; margin: 10px auto; padding: 10px; width: 320px;}
		.driver_box {background-color: #ffffff; border: 1px solid #dddddd; margin: 10px auto; padding: 10px; width: 320px;}
		.footer_left{text-align:center;}
		.footer_right{text-align:center;}
		
	}