/* CSS Document */
html, body{margin:0;padding:0;font-family:Verdana, Geneva, sans-serif; font-size:12px;text-align:left;position:relative}
body{background: url("/images/bg-main.png") repeat-x #aeaeae; }
img{border:0}
a:link {color: #636363; text-decoration:none;}
a:visited {color: #636363; text-decoration:none;}
a:hover {color:#000000;text-decoration: underline;}
a:active, a.active {color:#000000;text-decoration: underline;}
input,select,textarea {border:1px solid #999999;font-size:11px;}
input[type="text"],input[type="password"] {width:150px;padding:3px;}
input[type="checkbox"] {/*width: 16px;height: 16px;padding: 2px;*/ margin: 3px 0 0 0;}
input[type="submit"] {font-size:14px;}
input[type="submit"]:focus {background-color: #337ab7;}
input:focus, select:focus, textarea:focus {
	background-color: #ffdfdf;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}

div.table { display:table;border-collapse:collapse;width:100%; }
div.table2 { display:table;border-collapse:collapse;width:100%; }
div.tr { display:table-row; }
div.table2 div.tr div.td {padding:2px;}
div.table2 div.tr div.td div.td {padding:0;}
div.decorate {border: 1px solid #999999;border-width:1px 0 1px 0;background-color:#aabbbb;}
div.decorate_a {background-color:#eeeeee;}
div.decorate_b {border: 1px solid #999999;border-width:0 0 1px 0;}
div.td { display:table-cell; }
div.td25p { display:table-cell;width:25%; }
div.td50p { display:table-cell;width:50%; }
.bold {font-weight:bold;}
.left {text-align:left;}
.center {text-align:center;}
.right {text-align:right;}
.top {vertical-align: top;}
.middle {vertical-align: middle;}
.fleft {float:left;}
.fright{float:right;}
.half {width:50% !important;}
.nowrap {white-space: nowrap;}
/*.fa-menu {width: 18px;}*/

.fa { 
    /*font: normal normal normal 14px/1 FontAwesome, Verdana, Geneva, sans-serif !important;*/
}

.skip-link {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
#access {
/*    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;*/
    overflow:visible;
    z-index:100;
}
/* get rid of padding and margin off all ul's (not sure about using * here, could be better) */
.sf-menu {
    background-color: #000000;
}
.sf-menu, .sf-menu * {
    margin:0;
    padding:0;
    list-style:none;
    /*background-color: #000000;*/
}
/* position all dropdowns off screen */
.sf-menu ul {
    position:absolute;
    top:-999em;
}
/* style the main nav list items */
.sf-menu li {
    background: #000;
    clear: left;
    float:left;
    position:relative;
    width: auto;
    height: 50px;
    padding: 0 6px;
}

.sf-menu li.active {
    color: #fff;
    text-decoration: underline;
    background-color: #444444;
}

/* change the main nav list items on hover */ 
.sf-menu li:hover {
    visibility:inherit; /* fixes IE7 'sticky bug' */
    background-color: #444444;
}
/* style all the links */
.sf-menu a {
    font-size: .8em;
    color: #fff;
    display:block;
    padding: 7px 0;
    text-decoration: none;
 /*   text-indent: 12px;*/
    text-align: center;
}

.sf-menu a.active {
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
}

.sf-menu li.home { width: 80px;}
.sf-menu li.logout { float: right; }
/* style the first drop */
.sf-menu li li{
/*    background: none;*/
/*    background-image: none;*/
    width: 160px;
    height: 40px;
}
.sf-menu li li:hover{
}
/* add a larger text indent for the first drop links */
.sf-menu li li a{
/*    text-indent: 24px;*/
    text-align: left;
}
/* add a larger text indent for the second drop links */
.sf-menu li li li a{
/*    text-indent: 36px;*/
}
/* add a larger text indent for the third drop links */
.sf-menu li li li li a{
/*    text-indent: 48px;*/
}
/* position first drop */
.sf-menu li:hover ul {
    top:auto; /* match top ul list item height */
    position:relative;
}
/* make sure second drop is still off screen */
ul.sf-menu li:hover li ul {
    position: absolute;
    top:-999em;
}
/* position second drop */
ul.sf-menu li li:hover ul {
    top:auto;
    position:relative;
}
/* make sure third drop is still off screen */
ul.sf-menu li li:hover li ul {
    position: absolute;
    top:-999em;
}
/* position third drop */
ul.sf-menu li li li:hover ul {
    top:auto;
    position:relative;
}

ul.sf-menu ul {
    margin: 0 0 0 -7px;
}

#mobnav-btn {
    display: none;
    font-size: 20px;
    font-weight: bold;
    background-color: blue;
    color: white;
    padding: 10px;
    cursor: pointer;
}
.mobnav-subarrow {
    display: none;
}
@media only screen and (max-width: 480px) {
    #mobnav-btn {
      display: block;
    }
    .mobnav-subarrow {
      display: block;
      background-color: #0f3975;
      opacity: .3;
      border-bottom: 1px solid white;
      border-top: 1px solid black;
      height: 20px;
      width: 30px;
      background-position: top left!important;
      position: absolute;
      top: 8px;
      right: 10px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      cursor: pointer;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      cursor: pointer;
      -webkit-transition: all .1s ease-in-out;
      -moz-transition: all .1s ease-in-out;
      -ms-transition: all .1s ease-in-out;
      -o-transition: all .1s ease-in-out;
      transition: all .1s ease-in-out;
    }
    .sf-menu {
      width: 100%!important;
      display: none;
    }
    .sf-menu.xactive {
      display: block!important;
    }
    .sf-menu li {
      float: none!important;
      display: block!important;
      width: 100%!important;
      padding: 0;
    }
    .sf-menu li a {
      float: none!important;
      text-align: left!important;
      padding: 20px 0 0 12px;
    }
    .sf-menu ul {
      position: static!important;
      display: none!important;
    }
    .xpopdrop ul {
      display: block!important;
    }
}

@media only screen and (min-width: 600px) {
    /* set height so content isn't pushed down */
    #access{
        float: left;
        height: 50px;
        width: 100%;
        font-size: 15px;
        line-height: 1.2em;
    }
    /* set height so content isn't pushed down add z-index to keep drops above content */
    .sf-menu{
        height: 50px;
        z-index: 100;
    }
    /* restyle so main links are horizontally aligned */
    .sf-menu li {
        clear: none;
    }
    /* new style for drop list items */
    .sf-menu li li{
        background: #000;
        clear: left;
/*        width: 100%;*/
    }
    /* reset text indent on all drop a tags and set the width to 100% */
    .sf-menu li li a, .sf-menu li li li a, .sf-menu li li li li a{
/*        text-indent: 12px;*/
        width: 100%;
    }
    /* reposision and style the first drop */
    .sf-menu li:hover ul{
        background: #000;
        left: auto;
        position: absolute;
        /*top: -1px;*/
        top: 50px;
        width: 100%;
        z-index: 100;
    }
    /* reposision and style the second drop */
    ul.sf-menu li li:hover ul{
        background: #000;
        position: absolute;
        top: -1px;
        left:100%;
    }
    /* reposision and style the third drop */
    ul.sf-menu li li li:hover ul{
        background: #000;
        position: absolute;
        top: -1px;
        left:100%;
    }
}


.my_employees_upload_btn {
	width: 0.1px;
	height: 0.1px;
}
.my_employees_upload_btn + label {
}

a:link.btn, a:visited.btn {color: #fff;}
a:hover.btn, a:active.btn {color:#000000;text-decoration: underline;}

.btn {box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;background-color: #337ab7;border-color: #2e6da4;color: #fff;}
.btn {
	-moz-user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	display: inline-block;
	font-size: 11px;
	font-weight: normal;
	line-height: 1.42857;
	margin-bottom: 0;
	padding: 2px 5px;
	text-align: center;
	touch-action: manipulation;
	vertical-align: middle;
	white-space: nowrap;
	min-width: 13px;
}
.btn-big {
	font-size: 16px !important;
	font: normal normal normal 16px/1 FontAwesome, Verdana, Geneva, sans-serif !important;
	padding: 5px 10px;
}
.btn-red {background-color: #d9534f;border-color: #d43f3a;color: #fff;}
.btn-green {background-color: #219922;border-color: #3ad499;color: #fff;}
.btn-move {cursor:move;}
.btn-active {font-weight: bold !important;font-size: 1.3em !important;}

#wrapper {margin-bottom:0;margin-left:auto;margin-right:auto;margin-top:0;width:1200px;}
#header {width:1200px;float: left;height: 200px;}
.logo {margin: 0 0 0 3px;float:left;}
.title{float:left;margin:71px 0 0 10px;}
.main_title {float:left;font-size:20px;font-weight:bold;margin:28px 0 0 12px;min-width: 500px; }
.action {width: 50px;}
#navi {width:1182px;float: left;height: 50px;padding:0 0 0 9px;}
#content {width:1200px;float: left;padding:0 8px 0 15px;background: url("/images/bg-content-1200.png") no-repeat;height: 100%;}
#content2 {width:1172px;margin-left: -9px;padding:0 0 0 8px;background: url("/images/bg-content2-1180.png") no-repeat;height: 100%;}
#footer {width:1183px;float: left; border: 1px solid #000000; border-width: 1px 0 0 0; margin: 0 9px 0 9px;padding: 6px 0 0 0;height:25px;}
#main {width: 1162px;float: left;padding:3px 5px 5px 5px;}

@media only screen and (max-width: 480px) {
    #wrapper, #header {width: 100%;}
    #navi {width: 97%;}
}


@media (pointer:none), (pointer:coarse) {
	#wrapper {width:980px;/*width:780px;*/}
	#header {width:980px;/*width:780px;*/}
	#navi {width:980px;/*width:762px;*/}
	#content {width:966px;/*width:780px;*/}
	#footer {width:980px;/*width:763px;*/}
	#main {width:966px;/*width: 742px;*/}

	.sf-menu li {padding: 0 5px;}
	.sf-menu li.home { width: 60px;}
}

.maintitle { float: left; font-size: 18px;font-weight:bold; height: 19px; }
.mainsearch { float: right; height: 19px; }
.maincontent { float: left; margin: 20px 0 20px 0; width: 100%; }
.pagenavi { }
#loginform, #loginform_e, #id_forgotten_form, #pw_forgotten_form, #un_forgotten_form {width: 500px;}
#pw_forgotten_form {width: 800px;}
.countdown{float:right;width:145px;margin:37px 8px 0 0;}
#clock {}
#clock div {float: left;height:13px;}
#ui-datepicker-div{z-index:2;}
.log_date_start, .log_date_end, .reports_working_date_start, .reports_working_date_end {
	font-size: 12px;
	width: 120px !important;
}
.reports_working_input_machine {
	font-size: 12px;
}

.image_user, .image_employee {
	width: 200px;
	border: 1px solid #aaa;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}
.image_employee_company {
	/*width: 200px;*/
	width: 120px;
	border: 1px solid #aaa;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}
.image_my_employee {
	width: 120px;
	border: 1px solid #aaa;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}
.image_my_trainer {
	width: 120px;
	border: 1px solid #aaa;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}
.image_machine {
	width: 180px;
	border: 1px solid #aaa;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}
.image_device {
	width: 200px;
	border: 1px solid #aaa;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}
.image_sparepart {
	width: 200px;
	border: 1px solid #aaa;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}

.cert_device {
	width: 100px;
	border: 1px solid #aaa;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}

#employee_info, #user_info {display: block;}
#employee_edit, #employee_save, #user_edit, #user_save, #employees_edit, #employees_save, #employees_delete, #employees_search, #employee_download_permit, #employee_download_certificate, 
#evaluations_download, #evaluations_upload, #evaluations_edit, 
#machine_edit, #machines_set_ebl, #machine_track_download, #machine_operationlogbook_download, #machine_drivinglogbook_download, #report_working_download,
#drivers_search, #drivers_set_ebl, 
#missions_search, #missions_upload, #missions_edit, #missions_upload_result {display: none;}

#user_save, #employees_save, #employees_delete, #spareparts_search, #drivers_set_ebl_result, #machines_set_ebl_result {
	background-color: #dfffdf;
	padding: 20px;
	/*width: 60%;*/
	border: solid 1px #00ff00;
}
#user_save {width: 410px;}
.user_save_error, .employees_save_error, .employees_delete_error, .spareparts_search_error, .drivers_set_ebl_result_error, .machines_set_ebl_result_error {
	background-color: #ffdfdf !important;
	border: solid 1px #ff0000 !important;
}

#machine_map, #machine_track, #machine_versions, #machine_documents, #machine_operationlogbook, #machine_drivinglogbook {display:none;position:fixed;z-index:1;top:30px;left:150px;margin:0 auto;width:900px;height:600px;overflow:hidden;background:#ffffff;border:solid 3px #666666;}


#machine_map_iframe, #machine_track_iframe, #machine_versions_iframe, #machine_documents_iframe, #machine_operationlogbook_iframe, #machine_drivinglogbook_iframe {
    width: 99%;
    height: 95%;
    padding: 2px;
}
#machine_map_title, #machine_track_title, #machine_versions_title, #machine_documents_title, #machine_operationlogbook_title, #machine_drivinglogbook_title {background:#000000;text-align: right;color:#ffffff;font-weight:bold;}

#device_map, #device_documents {display:none;position:fixed;z-index:1;top:30px;left:150px;margin:0 auto;width:900px;height:600px;overflow:hidden;background:#ffffff;border:solid 3px #666666;}
#device_map_iframe, #device_documents_iframe{width: 99%;height: 95%;padding: 2px;}
#device_map_title, #device_documents_title {background:#000000;text-align: right;color:#ffffff;font-weight:bold;}

#mission_documents {display:none;position:fixed;z-index:1;top:30px;left:150px;margin:0 auto;width:900px;height:600px;overflow:hidden;background:#ffffff;border:solid 3px #666666;}
#mission_documents_iframe{width: 99%;height: 95%;padding: 2px;}
#mission_documents_title {background:#000000;text-align: right;color:#ffffff;font-weight:bold;}

input[class*="_issue_date"], input[class*="_valid_date"], input[class*="_tdl_valid"], input[class*="_input_valid"], input[class*="_input_dob"] { width:70px; }

.permit_valid {text-align:center;width:94%;background-color: #dfffdf;padding: 20px;border: solid 1px #00ff00;font-weight:bold;font-size:24px;}
.permit_invalid {text-align:center;width:94%;background-color: #ffdfdf !important;padding: 20px;border: solid 1px #ff0000 !important;font-weight:bold;font-size:24px;}

.permit_valid_details {width:500px!important;}