/*
 * Specific styles of signin component
 */
/*
 * General styles
 
 */
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
body, html {
height:100%;
background-color:#fff;
font-family: 'Open Sans', sans-serif;

}

.nopadd{padding-left:0px;}

a{color:#ff9800 !important}
body.login{ background: #26559b url("../images/bg.jpg") no-repeat scroll 0 0 / 100% auto;}

header{ background-color:#225093; float:left; width:100%; padding:15px 15px 15px 15px;  font-size:25px;  font-weight:600; color:#fff; margin-bottom:25px;}
header i{padding-right:20px;}

footer{background-color: #6f6f6f; float:left; width:100%; min-height:50px; text-align:center; line-height:49px; font-size:18px; font-weight:600; color:#fff; }

/*login page css start*/

.login-head{font-size:28px; font-weight:600; color:#fff; text-align:center;}

.card-container.card {
    padding: 40px 20px;
	height: 100%;
	max-width:350px;

}

.btn {
    font-weight: 700;
    height: 36px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

/*
 * Card component
 */
.card {
/*    background-color: #F7F7F7;*/
    /* just in case there no content*/
    padding: 20px 25px 30px;
    margin: 0 auto 25px;
    margin-top: 50px;
    /* shadows and rounded borders */
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
/*    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/
}

.profile-img-card {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

/*
 * Form styles
 */
.profile-name-card {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
    min-height: 1em;
}

.reauth-email {
    display: block;
    color: #fff;
    line-height: 2;
    margin-bottom: 10px;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.form-signin #inputEmail,
.form-signin #inputPassword {
    direction: ltr;
    height: 40px;
    font-size: 14px;
}

.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.form-control{border-radius:0px}

.form-signin .form-control:focus {
    border-color: rgb(104, 145, 162);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
}

.btn.btn-signin {
    /*background-color: #4d90fe; */
    /*background-color: rgb(104, 145, 162);*/
    /* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
    padding: 0px;
    font-weight: 700;
    font-size: 14px;
    height: 36px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: none;
    -o-transition: all 0.218s;
    -moz-transition: all 0.218s;
    -webkit-transition: all 0.218s;
    transition: all 0.218s;
	cursor:pointer;
}

.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
    background-color: rgb(12, 97, 33);
}

.forgot-password, .checkbox {
    color: #fff;
}
.panel-body.inner {
    padding: 0 15px;
}

.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus{
    color: rgb(12, 97, 33);
}
.highlight{font-weight:700}

/*.listing{background-color:#fff}*/

/* The CSS */
.input_box3 select {
    padding:5px 10px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    /*-webkit-box-shadow: 0 1px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 1px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 1px 0 #ccc, 0 -1px #fff inset;*/
    background: #FFF;
    color:#000;
    border:1px solid #cecece;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
	font-family:'Open Sans', Arial, sans-serif, Helvetica; font-size:14px; font-weight:400; width:222px;   
	
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.input_box3 select {padding-right:18px; }
}

.input_box3 label {position:relative}
.input_box3 label.full, .input_box3 select.full {width:100%;}

.input_box3 label:after {
    content:'>';/*content:'<>';*/
    font:18px "Consolas", monospace;
    color:#000;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:5px;
    padding:0 4px 4px;
    border-bottom:1px solid #aeaeae;
    position:absolute;
    pointer-events:none;
}
.input_box3 label:before {
    content:'';
    right:6px; top:8px;
    width:20px; height:20px;
    background:#FFF;
    position:absolute;
    pointer-events:none;
    display:block;
}

.control-label{margin-top:6px; font-weight:600; }
.form-group{float:left; width:100%}
.btn-info{
backface-visibility: hidden;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
display: inline-block;
position: relative;
transform: translateZ(0px);
transition-duration: 0.3s;
transition-property: color;
vertical-align: middle;
background: #404040; /* Old browsers */
background: -moz-linear-gradient(top,  #404040 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #404040 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #404040 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #404040 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #404040 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
box-shadow:1px 1px 3px rgba(0,0,0,0.5);
border:1px solid #404040;
border-radius:0px !important;
width:125px;
height:41px;
margin:35px 15px 35px 0;
}


.btn-info::before {
    background: #404040 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0 50% 0;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
	border-radius:3px !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
    color: white;
	border:0px;
}
.btn-info:hover::before, .btn-info:focus::before, .btn-info:active::before {
    transform: scaleX(1);
}
.panel-default > .panel-heading {
    background-color:transparent;
    border-color: #ddd;
	border:0px solid;

}
.panel-title{	color: #404040;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase; padding:10px;}
.grid {
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.3);*/
    padding-bottom: 24px;
    padding-top: 24px;
}
.panel{background-color:#f3f3f3; border-radius:0px; border:0px solid; box-shadow:0px; color:#616161}
ul{padding:0px; margin:0px;}

.button-sec{float:right}
.navbar-nav > li > a{color:#fff !important; font-size:12px; }
.navbar-toggle .icon-bar{background-color:#fff}
.pagination > li > a, .pagination > li > span{ color:#404040 !important;}

.cng-car-models_table {
    height: auto;
    margin-bottom: 20px;
    margin-top: 10px;
    width: 100%;
}
.cng-car-models_table ul {
    display: block;
    height: auto;
    width: 100%;
}
.cng-car-models_table ul li {
    border-bottom: 1px solid #bfbfbf;
    border-left: 1px solid #bfbfbf;
    border-right: 1px solid #bfbfbf;
    box-sizing: border-box;
    display: table;
    width: 100%;
}
.cng-car-models_table ul li:first-child {
    background: #f3f3f3 none repeat scroll 0 0;
    border-top: 1px solid #bfbfbf;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}
.cng-car-models_table ul li:first-child span {
    padding-left: 0;
}
.cng-car-models_table ul li span.date {
    border-right: 1px solid #bfbfbf;
    box-sizing: border-box;
    color: #616161;
    display: table-cell;
    font-size: 14px;
    line-height: 18px;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    width: 20%;
}
.cng-car-models_table ul li span.name {
    border-right: 1px solid #bfbfbf;
    box-sizing: border-box;
    color: #616161;
    display: table-cell;
    font-size: 14px;
    line-height: 18px;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    width: 40%;
}
.cng-car-models_table ul li span.amn {
    border-right: 1px solid #bfbfbf;
    box-sizing: border-box;
    color: #616161;
    display: table-cell;
    font-size: 14px;
    line-height: 18px;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    width: 10%;
}
.cng-car-models_table ul li span.hour {
    box-sizing: border-box;
    color: #616161;
    display: table-cell;
    font-size: 14px;
    line-height: 18px;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    width: 10%;
	border-right: 1px solid #bfbfbf;
}

.cng-car-models_table ul li span.action {
    box-sizing: border-box;
    color: #616161;
    display: table-cell;
    font-size: 14px;
    line-height: 18px;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    width: 20%;
}
@media (max-width:1024px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}
@media (max-width:1024px) {
.input_box3 select{width:176px;}
.navbar-toggle{margin-right:0px;}
.navbar-collapse{box-shadow:none;}
}
@media (max-width:830px) {
.cng-car-models-box{display:none !important}
.cng-car-models_table ul{border-top:1px solid #bfbfbf}
.cng-car-models_table ul li span.date, .cng-car-models_table ul li span.name, .cng-car-models_table ul li span.amn, .cng-car-models_table ul li span.hour, .cng-car-models_table ul li span.action{width:100%; display:inherit; float:left;  border-right: 0px solid #bfbfbf; padding:15px 10px 5px 10px; box-sizing:border-box;text-align:left;}
.date:before{content: "Date :"; float:left; font-size:15px; color:#404040; font-weight:600; font-style:normal; padding-right:5px;}
.name:before{content: "Name :"; float:left; font-size:15px; color:#404040; font-weight:600; font-style:normal; padding-right:5px;}
.amn:before{content: "Amount :"; float:left; font-size:15px; color:#404040; font-weight:600; font-style:normal; padding-right:5px;}
.hour:before{content: "Hour :"; float:left; font-size:15px; color:#404040; font-weight:600; font-style:normal; padding-right:5px;}
.action:before{content: "Action :"; float:left; font-size:15px; color:#404040; font-weight:600; font-style:normal; padding-right:5px;}
}



@media (max-width: 640px) {
.nopadd{padding-left:0px; padding-right:0px;}
.grid{padding-left:0px; padding-right:0px;  padding-top:0px;  }
.panel-heading{padding-bottom:0px;}
.top-row{padding-left:15px; padding-right:15px;}
.button-sec{float:left}
.btn-info{width:105px; margin:5px 0 0 15px}
}