@charset "UTF-8";

/*** GENERAL BODY STYLING  ***/
body{
text-align:Center;
margin:0px;
background:#FFF;
font-family: Segoe UI, Helvetica, sans-serif;
line-height: 20px;
color: #555;
}
::-moz-selection{
background:#ED1C24;color:#FFF;
}
::selection{
background:#ED1C24; color:#FFF;
}


/***END OF BODY GENERAL STYLING***/

/***STYLING GENERAL LOGIN PAGE*/
.header-white{
height:100px;
text-align:left;
font-size: 1em;
border-bottom: 1px solid #00923f;
background:#FFF;
}

.header-white img{
/*float:left;
margin-top:17px;*/
display: block;
height:95px;
margin-left: auto;
margin-right: auto;
/*margin-left:3%;*/
}


.account{
    /*background:#f8f9fa url('../images/background/bg_e.png');
    padding-bottom:50px;*/
    min-height: 100%; 
}
.form-back{
  margin:-5px;
  background:#f8f9fa url('../images/background/bg_e.png');
  min-height: 450px; 
  padding-top:50px; 
  background-size: 100% 100%;
}

.language{
  width:145px;
  height:22px;
  padding:3px;
  float: right;
}
.account form{
margin:0px auto;
width:35%;
background: #FFFFFF;
padding:40px; 
opacity: 0.9;
border:1px solid green;
}


#login_button{
width:102%;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 12px;
line-height: 28px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #FFF;
border:0px;
background-color: #00923f;
margin-top:10px;
}

#login_button:hover {
background-color:#00923f;
}

#loginform  input[type="text"], 
#loginform  input[type="password"]{
width:100%;
padding:4px 0 4px 2%;
}

.red{
font-weight:bolder;
color:#ED1C24;
}

.foot{
text-align:center;
}

.foot p{
font-size:.75em;
color:#9498a1;
}



.account label{
color:#000;
text-align:left;
float:left;
margin-bottom:10px;
margin-left:8px;
font-family:"Segoe UI";
}

.notification{
width:97%;
padding:10px 0px 10px 5%;
font-size:.8em;
}
.notification-info{
background:#d9edf7;
border:1px solid #bce8f1;
color: #31708f;
}.notification-warning{
background:#fcf8e3;
border:1px solid #faebcc;
color: #8a6d3b;
}.notification-error{
background:#f2dede;
border:1px solid #ebccd1;
color: #a94442;
}





/*styling the app_container*/
.app_container{
width:100%;
text-align:left;
background:#FFF;
}

/***END OF STYLING THE LOGIN PAGE***/


/***STYLING APP HEADER AND DARK BAR***/
.header{
height:100px;
text-align: justify;
    float: top;
border-bottom:5px solid #00923f;
}

.header img{
margin-left:0px;
margin-right:0px;
margin-top:10px;
margin-left:10px;
height:65px;
}

/*STYLING LOWER DARK BAR*/
.bar{
height:35px;
background:#232323;
}

.bar p, .bar a{
color:#CACACA;
margin: 0px;
font-size:.7em;
padding-top: 8px;
margin-left: 10px;
}

p.text-left{
float:left;
}

a.logout{
display:block;
float:right;
margin-right:15px;
background:url('../images/icons/off.png') no-repeat 0% 90%;
padding-left:23px;
text-decoration:none;
}

a.logout:hover{
color:#FFF;
background:url('../images/icons/off-white.png') no-repeat 0% 90%;
-moz-transition: all 0.24s ease 0s;
-webkit-transition: all 0.24s ease 0s;
-o-transition: all 0.24s ease 0s;
}

/***END OF STYLING LOWER DARK BAR***/

/***STYLING BREADCRUMB***/
ul#breadcrumb{
padding:0px;
margin:0px;
}

ul#breadcrumb li{
list-style:none;
}

ul#breadcrumb li a{
color:#666;
font-size:.9em;
text-decoration:none;
float:left;
margin-right:4px;
margin-top:10px;
padding-right:15px;
padding-left:8px;
background:url('../images/background/nav-item-split.png') no-repeat 100% 50%;
}
ul#breadcrumb li a:visited{
color:#666;
}
ul#breadcrumb li a:hover{
text-decoration:underline;
}
ul#breadcrumb li a.last,ul#breadcrumb li a.first{
background:none;
}
ul#breadcrumb li a.first{
padding-right:0px;
padding-top:2px;
}

/***STYLING LEFT SIDE MENU***/
.menu{
width:18%;
float:left;
}

ul#system_menu{
list-style:none;
margin:0px;
padding:0px;
border:none;
background:#3D3D3D;
min-height:400%;
}

ul#system_menu li{
margin:0px;
padding:0px;
}

ul#system_menu li a,a.dashboard_header{
display:block;
padding:10px 0px 10px 30px;
color: #D9D9D9;
background:#3D3D3D;
text-decoration:none;
font-size:.89em;
border-top: 1px solid #4D4D4D;
font-weight:lighter;
}

a.dashboard_header{
padding-top:10px;
padding-bottom:10px;
border-top:none;
}

ul#system_menu li a:hover{
background:#303030;
}



ul#system_menu li.selected{
background:#D64635 url('../images/background/sidebar-menu-arrow.png') 100% 60% no-repeat;
color:#FFF;
}

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

#system_menu ul li a{
padding-left:40px;
background:#3d3d3d;
color: #D9D9D9;
height:25px;
padding-top:6px;
padding-bottom:6px;
font-size:.8em;
border:none;
}

#system_menu ul li a:hover{
background: #575757;
}

#system_menu ul li a.selected{
background: #575757;
}
/***END OF STYLING LEFT SIDE MENU***/



/***STYLING CONTENT AREA***/
.content{
width:82%;
float:left;
margin-bottom:20px;
min-height:526px;
}

.wrapper{
width:98%;
margin:0px auto;
border:1px solid #00923f;
float:left;
margin-left:1%;
}

.wrapper-outer-left{
    width:50%;
    margin:0px auto;
    border:1px solid #00923f;
    float:left;
    margin-left:1%;
}
.wrapper-outer-right{
    width:46%;
    margin:0px auto;
    border:1px solid #00923f;
    float:left;
    margin-left:1%;
}
.wrapper-inner{
    width:100%;
    height: 32%;
    margin-bottom: 1%;
    border:1px solid #00923f;
    float:left;
    margin-left:1%;
}
.breadcrumb{
width:98%;
margin:10px auto;
height:42px;
background:#f7f7f7;
}

.wrapper h1.content_header{
color: #FFF;
font-weight:lighter;
border-left:0px;
border-right:0px;
margin:0px;
background: #00923f;
font-size:1em;
padding:2px;
}

.wrapper h1.content_header_cancel{
    color: #FFF;
    font-weight:lighter;
    border-left:0px;
    border-right:0px;
    margin:0px;
    background: #ff2638;
    font-size:1em;
    padding:2px;

}
/****STYLING TABLE DATA****/
.action_bar{
height:30px;
width:98%;
margin:12px auto;
}
.action_bar img{
height:20px;
position:relative;
top:6px;
margin-left:1%;
margin-right:.5%;
}

.btn{
border-width: 0;
padding: 7px 14px;
font-size: 14px;
outline: none !important;
background-image: none !important;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-shadow: none;
}
.add{
color:#FFFFFF;
background:#00923f;
}
.add:hover{
background:#00923f;
}

.action_bar a{
text-decoration:none;
font-size:.7em;
}

#data_table{
width:98%;
margin:auto;
font-size:.75em;
border:1px solid #DDD;
border-left:0px;
border-collapse:collapse;
cursor:default;
}

/*@media screen and (max-width:  1000px){*/

/*    #data_table {*/
/*        width: 100px;*/
/*    }*/
/*}*/

.dataTables_length{
width:16%;
float:right;
}

.dataTables_length label,#DataTables_Table_0_filter label,.dataTables_info,#data_table_filter label{
color: #5A5A5A;
font-size: .7em;
margin-left:10px;
}

.dataTables_filter input[type="search"]{
width:200px;
height:30px;
margin-top:10px;

}

.dataTables_length select{
width:70px;
margin-top:10px;
}

.dataTables_info{
margin-left:10px;
}

#data_table tr{
background:#F9F9F9;
}

#data_table tr.even{
background:#FFFFFF;
}

#data_table tr:hover{
background:#f8f8f8;
}

#data_table th{
background:#FFFFFF url('../images/background/sort_both.png') 98% 50% no-repeat;
color:#000000;
padding:8px 20px 8px 8px;
border:1px solid #DDDDDD;
font-size:1.1em;
}

#data_table th.number{
width:15px;
}

#data_table th.sorting_asc{
background-image:url('../images/background/sort_asc.png');
}

#data_table th.sorting_desc{
background-image:url('../images/background/sort_desc.png');
}

#data_table td{
padding:8px;
border:1px solid #DDDDDD;
}

#data_table td.number{
width:30px;
}

#data_table td.action{
text-align:center;
width:140px;
}

.action{
width:18px;
margin-right:8px;
}

/*Styling status*/
.label{
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 1px 1px 1px rgba(0,0,0,.1);
font-weight: 600;
padding: 3px 8px;
font-size: 11px;
color: white;
}

.Working{
background:#99CC00;
}
.Malfunction{
background:#FF4444;
}
.In-repair{
background:#FFBB33;
}
.Unkown{
background:#046BCA;
}
/*end of styling status label*/



/***END OF STYLING DATA TABLE***/


/***STYLING INFO AREA***/
.properties p{
margin:0px;
padding-top:14px;
padding-bottom:14px;
padding-left:30px;
font-size:.82em;
border-bottom:1px solid #DDD;
}
.properties .bold{
color:#555;
}

/***END OF STYLING INFO AREA***/



/***SYLING INPUT FORMS***/
#tabs{
margin:auto;
width:98%;
}
.check_boxes{
float:left;
}

 .check_label{
font-size:.8em;
margin-left:8px;
}


textarea, input[type="text"],
input[type="search"], 
input[type="password"],
select{
background:#FFF;
border:1px solid #E5E5E5;
width:400px;
display: inline-block;
height: 30px;
padding: 4px 6px;
margin-bottom: 10px;
font-size: 12px;
line-height: 20px;
color: #555;
}
textarea, input[type="text"]:focus,
input[type="search"]:focus, 
input[type="password"]:focus,
select:focus{
outline: none; 
    border-color: #999999;
}

#loader{
position:absolute;
top:50%;
left:50%;
}

.message{
height:80px;
width:98%;
margin:auto;
}

.message h1{
font-size:1.1em;
padding:3px 0 0 10px;
margin:0px;
font-weight:lighter;
}

.message p{
margin:0px;
padding:5px 0 0 10px;
font-size:.7em;
}

.alert{
border-left:5px solid #ddd;
height:80px;
background:#eee;
}

.failure{
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
}

.success{
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}

.warning{
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
}

.info{
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}

#input_form{
background:#FFFFFF;
font-size:1em;
font-weight:lighter;
}

#input_form p{
margin:10px;
}

#input_form  input[type="text"]{
height:30px;
width:350px;
}

#input_form input,
#input_form select,
#input_form textarea{
    background: #e3fff4;
font-size:.8em;
}

#input_form select#multiple_list{
height:80px;
}

#input_form  input[type="text"]:focus,
#input_form  textarea:focus,
#loginput_form   input[type="text"]:focus,
#loginput_form   input[type="password"]:focus,
#login_button:focus{ 
    outline: none; 
    border-color: #999999; 
}

#input_form textarea{
height:55px;
resize:none;
width:350px;
padding:2px;
border:1px solid #E5E5E5;
}

#input_form label{
text-align:right;
float:left;
width:155px;
margin-right:10px;
    margin-bottom:5px;
padding-top:1px;
font-size:.75em;
color:#555;
}

#input_form p{
padding:0px;
border-collapse:collapse;
}

#reportNavigation p {
text-align:center;
width:70%;
}

#input_form select{
width:350px;
height:37px;
border:1px solid #E5E5E5;
}

#input_form input.error{
 border-color:#FF0000;
 }

#input_form label.error{
float:right;
width:200px;
color:#ED1C24;
}

span.required{
color:#ED1C24;
}

#input_form .navigation_button{
width:100px;
padding:10px;
font-size:1em;
font-weight:lighter;
border:none;
}

#reportNavigation{
border:none;
background:#F5F5F5;
border-top:1px solid #E5E5E5;
}

#reportNavigation #next{
color:#FFFFFF;
background-color:#00923f;
}

#reportNavigation #back{
background:#E5E5E5;
color:#000000
}

#reportNavigation #next:hover{
background-color:#CA3A28;
}

#reportNavigation #back:hover{
background-color: #D6D6D6;
}

.navigation_button[disabled] {
color: #AAA;
}

/***END OF STYLING INPUT FORM***/

/****STYLING DASHBOARD****/

.summary{
height:100px;
background: #392f2f;
width:23.5%;
float:left;
margin-left:0.8%;
margin-bottom:1%;
text-align:left;
color:#FFF;
font-size: 9px;
    border-radius: 0px 0px 0px 0px;
}
.summaryRight{
    height:100px;
    background: #392f2f;
    width:23%;
    float:left;
    margin-left:1.5%;
    margin-bottom:1%;
    text-align:left;
    color:#FFF;
    font-size: 10px;
    border-radius: 5px 26px 10px 10px;
}
.summary h1{
font-weight:lighter;
font-size:1.5em;
margin:0px;
}
.summary p{
opacity:0.9;
margin:0px;
margin-bottom: 2px;
border-bottom: white dashed 1px;
}
.summary a{
    display:block;
    padding:3px 0px 3px 3px;
    text-decoration:none;
    color:#FFF;
    font-size:1.0em;
}
.summary_wrapper{
    width:90%;
    margin:auto;
    margin-top:0px;
    text-align:right;
}


.total{
background:#4c87b9;
border:solid #046BCA 0px;
}
.totalCard{
    background: #4eb986;
    border:solid #38b2ca 0px;
}
.total a{
background-color:#4c87b9;
}
.totalCard a{
    background-color:#4c87b9;
}
.active{
background:#e35b5a;
}
.active a{
background-color:#e14e4e;
}
.resolved{
background:#44b6ae;
}
.resolved a{
background-color:#3faba4;
}
.pending{
background:#8775a7;
}
.pending a{
background-color:#7f6ca1;
}
.count{
    background:#8775a7;
    }
.count a{
    background-color:#7f6ca1;
    }
.no-border{
border:0px;
text-align:center;
}




.footer{
height:50px;
background:#3D3D3D;
clear:both;
color:#CACACA;
}

.footer p{
padding-left:10px;
padding-top:20px;
font-size:.7em;
}


.parameters{
height:40px;
border-bottom:1px solid #EEE;
}

#input_form  p.checkbox,#input_form  p.parameter{
float:left;
border:none;
font-size:.8em;
}

#input_form p.parameter{
color:#DDD;
}

img.clear{
cursor:pointer;
}





/*styling error messages*/

.error-page{
margin:20px auto;
}
.error-description h1{
font-weight:lighter;
}



/* Styled Headers */

.wrapper h1.my-caption{
    color: #FFF;
    font-weight: lighter;
    border-left: 0px;
    border-right: 0px;
    margin: 0px;
    background: #00923f;
    font-size: 1em;
    padding: 10px;
}

.user-form select ,.context-form select{
height:36px;
width:100%;
}

/* Styling input elements */
.user-form textarea, 
.user-form input[type="text"],
.user-form input[type="search"], 
.user-form input[type="password"],
.context-form select,
.user-form select{
background:#FFF;
border:1px solid #E5E5E5;
width:95%;
display: inline-block;
height: 25px;
margin-bottom: 10px;
font-size: 12px;
line-height: 20px;
color: #555;
padding:4px 2% 4px 2%;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.user-form select{
height:36px;
width:100%;
}

div.action_bar .spacer{
height:40px;
}
.action_bar .btn {
    margin-bottom: 10px;
}

.add {
    color: #FFF;
    background-color: #00923f;
    border-color: #00923f;
	
}

/* user form label */
.user-form label{
display:block;
height:25px;
text-align:left;
}
div.search-form .user-form{
width:100%;
height:35px;
}

div.search-form .btn{
float:right;
width:15.33%;
}

.wrapper #simple_table_wrapper, .wrapper #server_table_wrapper{
overflow:auto;
width:98%;
margin:10px auto;
font-size:.9em;
}

/*Chart CSS*/

/******************************/
.route_summary{
    width:100%;
    border:0px solid #d64635;
    float: left;
    height: auto;
    margin:0.5% 0% 0% 2.1%;
}
.app, .book, .online{
height:33px;
background:#44b6ae;
width:97%;
float:left;
margin:0.5% 0% 0% 2.1%;
text-align:left;
padding:5px 0px 0px 5px;
font-weight:bold;
font-size: 14px;
}
.app{
background:#f7f7f7;
border: solid 1px #578ebe;
color:#578ebe;
}
.book{
background:#f7f7f7;
border: solid 1px #e35b5a;
color:#e35b5a;
}
.online{
background:#f7f7f7;
border: solid 1px #44b6ae;
color:#44b6ae;
}
/*Route Summary*/
.route-name{
height:33px;
background:#44b6ae;
width:97%;
float:left;
margin:0.5% 0% 0% 2.1%;
text-align:left;
padding:5px 0px 0px 5px;

}
.route-name .bus-list {
display:none;
}
.col-btn{
	cursor: pointer;
}
.deper, .bus-number,.stop,.contact{
 float: left;
 width: 22%;
}
.at-time{
width: 12%;
float: left;
}
.multiselect {
  padding: 1px;
  border-collapse: collapse;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  width: 415px;
  height:100px;
  padding-left: 10px;
  padding-top: 0px;
  margin-left: 120px;
  margin-top: -12px;
  border-collapse: collapse;
  border:1px #E5E5E5 solid;
  overflow:scroll;
}

#checkboxes input[type="text"] {
  height: 25px;
  width: 413px;
}
#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

#chart-container {
  width: 48%;
  height: auto;
  border:1px #E5E5E5 solid;
  float: left;
  margin-left: 10px;
}

#chart-1,#chart-2,#chart-3,#chart-4{
  width: 70%; 
  height: auto;

}
form .disabled{
  background: #e3fff4;
  border:1px solid #E5E5E5;
  width:350px;
  display: inline-block;
  height: 30px;
  padding: 2px 3px;
  margin-bottom: 5px;
  font-size: 14px;
  line-height: 20px;
  color: rgb(0, 0, 0);
}
form .disabledLabel{
    background: #e3fff4;
    border:1px solid #E5E5E5;
    width:52%;
    display: inline-block;
    height: 30px;
    padding: 2px 3px;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 20px;
    color: rgb(0, 0, 0);
    text-align: left;
}
form .img-customer {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2px;
  width: 130px;
  height:130px;
}
img-customer:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

form .img-id {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2px;
  width: 315px;
  height:200px;
}
img-id:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.8);
}
.primary-color, ul.stepper li.active a .circle, ul.stepper li.completed a .circle {
    background-color: #4285f4 !important;
}
ul.stepper {
    counter-reset: section;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 1em -1.5rem;
    padding: 0 1.5rem;
    padding: 1.5rem;
}

ul.stepper li a .circle {
    display: inline-block;
    color: #fff;
    border-radius: 50%;
    background: rgba(0,0,0,.38);
    width: 1.75rem;
    height: 1.75rem;
    text-align: center;
    line-height: 1.7rem;
    margin-right: 0.5rem;
}
.stepper-vertical {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stepper-vertical li a .circle {
    order: 1;
}
.stepper-vertical li {
    display: flex;
    align-items: flex-start;
    flex: 1;
    flex-direction: column;
    position: relative;
}

.modal-header {
    cursor: move;
}
#cargoModal-header {
    cursor: move;
}
#cargoCancelModal-header {
    cursor: move;
}