body {
	font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;	
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: black;
    background-color: lavender;
    border-bottom: 1px solid black;
}

li {
    float: left;
    border-right: 1px solid black;
}
li .active{
    background-color: blue;
    color: white;   
}
li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: aqua;
    color: black;
}
li .menu_link {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    cursor: pointer;
}
li .menu_link:hover {
    background-color: aqua;
    color: black;
}
table {
    border-collapse: collapse;
    font-size: x-small;
}
table, th, td {
    border: none;
    padding: 0px;
    text-align: center;
    vertical-align: center;
    border-bottom: 1px solid #ddd;
}

tr {
    /*height: 50px;
    line-height: 50px;*/
    height: 30px;
    line-height: 30px;
}
@media only screen and (max-width: 1400px) {
    table {
        font-size: x-small;
    }
    tr {
        height: 30px;
        line-height: 30px;
    }
}
input {
    width:200px;
}
select {
    width:200px;
        /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;

}
/*for IE10*/
select::-ms-expand {
    display: none;
}
label {
    width: 200px;
    text-align: right;
    display:inline-block;
}
form, select, input {
    font-size:15px;
}
@media only screen and (max-width: 1400px) {
    form, select, input {
        font-size:12px;
    }
}
.loader-container {

    position: absolute;
    height: 100%;
    width: 100%;
    top:0px;
    left:0px;
    z-index:1001;
    background-color: rgba(0, 0, 0, 0.5);;
}
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-bottom: 16px solid blue;
    width: 120px;
    height: 120px;
    position: relative;
    top:50%;
    margin-right: auto;
    margin-left: auto;
    padding: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.table-head-row {
    height: 50px;
    background-color:#C1C1C1;
}
@media only screen and (max-width: 1400px) {
    .table-head-row {
        height: 30px;
        line-height: 30px;
    }
}
.item-date {
    width: 100px;
}
.item-money {
    width: 150px;
    text-align: right;
    padding-right: 10px;
}
.item-money-input {
    width: 130px;
    min-width: 130px;
    padding-left: 10px;
    text-align: right;
}
.saleview-item-supplier {
    width:70px;
    max-width:70px;
}
.saleview-item-quantity {
    width: 50px;
    text-align: right;
    
}
.saleview-item-quantity-input {
    width: 40px;
    min-width: 40px;
    padding-left: 10px;
    text-align: right;
}
.saleview-item-money {
    width: 90px;
    text-align: right;
    padding-right: 10px;
}
.saleview-item-money-input {
    width: 80px;
    min-width: 80px;
    text-align: right;
    padding-left: 10px;
}
.item-short {
    width: 100px;
}
.item-middle {
    width: 150px;
}
.item-long {
    width: 300px;
    min-width: 300px;
}
.item-long-input {
    width: 280px;
    min-width: 280px;
    padding-left: 10px;
    /*border: none;*/
    /*text-align: right;*/
}
.saleview-item-long-long {
    width: 400px;
}
.saleview-item-long-long-input {
    width: 380px;
    min-width: 380px;
    padding-left: 10px;
    /*border: none;*/
    /*text-align: right;*/
}
.item-long-long {
    width: 600px;
}
.item-text-right {
    text-align: right;
}

.item-info {
    min-width: 100px;
    text-align: left;
    width: 50%;
}
.item-long-long-input {
    width: 580px;
    min-width: 580px;
    padding-left: 10px;
    /*border: none;*/
    /*text-align: right;*/
}
.input-no-border {
    border: none;
}
.item-edit-header {
    width: 50px;
    min-width: 50px;
}
.item-edit {
    width: 50px;
    background-image: url('img/ic_edit.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor:pointer;
    transition: background-size .1s ease-in-out;
}
.item-edit:hover{
    background-size: 30px 30px;
}
.item-check-box {
    width: 50px;
    background-image: url('img/ic_unchecked.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor:pointer;
    transition: background-size .1s ease-in-out;
}
.item-checked {
    background-image: url('img/ic_checked.png');
}
.item-draggable {
    width: 50px;
    background-image: url('img/ic_draggable.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor:pointer;
    transition: background-size .1s ease-in-out;
}
.item-vat {
    width: 30px;
    min-width: 30px;
    background-image: url('img/ic_delete.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    cursor:pointer;
    transition: background-size .1s ease-in-out;
}
.item-vat:hover {
    background-size: 30px 30px;
}
.item-vat-applied {
    background-image: url('img/ic_tick.png');
}
div.function_button{
    cursor:pointer;
    min-width: 120px; /* width of image */
    width: 120px; /* width of image */
    height: 40px; /* height of image */
    line-height: 40px;
    border: 0;
    font-size:13px;
    text-align:center;
    background:#247324;
    color: white;
    transition: font-size .1s ease-in-out;
}
div.function_button:hover {
    font-size: 17px;
}

.input-ok-button {
    width: 150px; /* width of image */
    height: 40px; /* height of image */
    line-height: 40px;
    border: 0;
    font-size:13px;
    text-align:center;
    background-color: green;
    color: white;
    float: right;
    vertical-align: middle;
    cursor: pointer;
    transition: font-size .1s ease-in-out;
}
.input-small-button {
    width: 50px;
}
.input-ok-button:hover {
    font-size: 20px;
}

.input-mid-button {
    width: 150px; /* width of image */
    height: 40px; /* height of image */
    line-height: 40px;
    border: 0;
    font-size:13px;
    text-align:center;
    background-color: green;
    color: white;
    float: left;
    vertical-align: middle;
    transition: font-size .1s ease-in-out;
}

.input-mid-button:hover {
    font-size: 20px;
}

.input-cancel-button {
    width: 150px; /* width of image */
    height: 40px; /* height of image */
    line-height: 40px;
    border: 0;
    font-size:13px;
    text-align:center;
    background-color:gray;
    color: white;
    float: left;
    vertical-align: middle;
    transition: font-size .1s ease-in-out;
}
.input-cancel-button:hover {
    font-size: 20px;
}
.button-middle {
    width: 150px; /* width of image */
    height: 40px; /* height of image */
    line-height: 40px;
    border: 0;
    font-size:13px;
    text-align:center;
    background-color:green;
    color: white;
    vertical-align: middle;
    transition: font-size .1s ease-in-out;  
}
.mid-button-table-3 {
    width: 33%;
    line-height: 50px;
    min-height: 50px;
    text-align: center;
}
.newform-container {

    position: fixed;
    height: 100%;
    width: 100%;
    top:0px;
    left:0px;
    z-index:1000;
    background-color: rgba(0, 0, 0, 0.5);;
    display: none;
}
.newform-inside {
    width: 500px;
    position: relative;
    top:50%;
    margin-right: auto;
    margin-left: auto;
    padding: 20px;
    background-color: white;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.sale-view-background {
    position: fixed;
    height: 100%;
    width: 100%;
    top:0px;
    left:0px;
    z-index:999;
    background-color: black;
    display: none;
}
.sale-view {
    position: fixed;
    height: 100%;
    width: 100%;
    top:0px;
    left:0px;
    z-index:1000;
    background-color: black;
    display: none;
}
.sale-view table, tr, td {
    border-bottom:none;
}
.sale-view-container {
    max-width: 1300px;
    margin: auto;
    margin-top: 20px;
    max-height: 95%;
    overflow-y:auto;
    padding: 10px;
    background-color: white;
}
.form-row {
    height: 40px;
    vertical-align: middle;
}
.customer_card {
    width: 200px;
    padding:10px;
    background-color: white;
    box-shadow: 1px 2px 4px rgba(0,0,0,.5);
    line-height: normal;
}

.customer_vehicle_card {
    float:left;
    min-width: 180px;
    padding:10px;
    background-color: white;
    box-shadow: 1px 2px 4px rgba(0,0,0,.5);
    color: black;
    line-height: normal;
    cursor: pointer;
    position: relative;
}
.customer_vehicle_card:hover {
    background-color: aqua;
    color: black;
}
.selected{
    background-color: #79A5AB;
    color: white;   
}
.search-result-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 5px;
    cursor:default;
    color:black;
    background-color: white;
}
.search-result-item:hover {
    color:white;
    background-color: blue;
}
.mot-result-item {
    text-align: center;
    margin: 5px;
    cursor:default;
    color:black;
    background-color: white;
    font-size: small;
    line-height: 20px;
    box-shadow: 0px 0px 0px rgba(0,0,0,.5);
    transition: box-shadow 0.1s ease-in;
    -moz-transition: box-shadow 0.1s ease-in;
    -ms-transition: box-shadow 0.1s ease-in;
    -o-transition: box-shadow 0.1s ease-in;
    -webkit-transition: box-shadow 0.1s ease-in;
}
@media only screen and (max-width: 1400px) {
    .mot-result-item {
        font-size: x-small;
        line-height: 15px;
    }
}
.mot-result-item:hover {
    box-shadow: 5px 5px 5px rgba(0,0,0,.5);
}
.input_entry {
    line-height: 30px;
}
.vertical_menu {
    margin: 10px;
}
.title_container {
    background-color: gray;
    color:white;
}
.customer-detail-view {
    display: none;
}
.vechile-sales-container {
    display: none;
}
.item_active {
    display:block;
}
.item_show_on_mouse_over {
    display:block;
}
.selected_item {
    color:white;
    background-color: red;
}
.customer_vehicle_container {
    height:180px;
    min-width: 700px;
    max-width: 700px;
    overflow-x:scroll;
    overflow-y:hidden;
    display: flex;
}
.vehicle_selector_header {
    width: 150px;
    max-width: 150px;
}
.vehicle_selector {
    width: 100px;
    max-width: 100px;
    max-height: 500px;
    min-height: 500px;
    overflow-y:auto;
    overflow-x:hidden;
    display: inline-block;
}
.vehicle_selector_item {
    height: 50px;
    line-height: 50px;
    min-width: 100px;
    max-width: 100px;
    color:black;
    background-color: white;
    cursor: pointer;
}
.search_item_selector {
    height: 50px;
    line-height: 50px;
    width: 100%;
    color:black;
    text-align: center;
    background-color: white;
    cursor: pointer;   
}
.search_item_selector:hover {
    background-color: blue;
    color:white;
}
@media only screen and (max-width: 1400px) {
    .vehicle_selector_item {
        height: 30px;
        line-height: 30px;
    }
}
.vehicle_form_detail {
    min-width: 550px;
    max-width: 550px;   
}
.vehicle_selector_active {
    color:white;
    background-color: green;
}
.vehicle-form-inside {
    width: 550px;
    max-width: 950px;
    position: relative;
    top:50%;
    margin-right: auto;
    margin-left: auto;
    padding: 20px;
    background-color: white;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.sales_item_container {
    min-height: 450px;
    max-height: 450px;
    overflow-y:auto;
    background-color: #b5b5b5;
    vertical-align: top;
}
.search-result-container {
    min-height:844px;
    max-height:844px;
    overflow-y:auto;
    background-color: #bbcaff;
}
.sales-item-view {
    background-color: white;
    cursor: pointer;
}
.sales-item-view:hover {
    background-color: aqua;
}
.customer-info-table {
    font-size: 15px;
}
.customer-info-table tr {
    height: 25px;
    line-height: 25px;
    width: 100%;
}
@media only screen and (max-width: 1400px) {
    .customer-info-table {
        font-size: 12px;
    }
    .customer-info-table tr {
        height: 20px;
        line-height: 20px;
        width: 100%;
    }
}
.payment-container tr {
    height: 25px;
    line-height: 25px;
}
.sale_info_entry td {
    border:none;
    text-align: left;
}
.sale_info_entry tr {
    height: 30px;
    line-height: 30px;

}
@media only screen and (max-width: 1400px) {
    .sale_info_entry tr {
        height: 20px;
        line-height: 20px;

    }
}
.no_border td {
    border:none;
}
.setting-title {
    min-width: 150px;
    text-align: right;
    padding-right: 10px;
}
.setting-textarea {
    width: 100%;
    font-size: medium;
}
.vehicle-form-input-title {
    width:200px;
    text-align: right;
    padding-right:10px;
}
.vehicle-form-input-entry {
    width:200px;
    text-align: left;

}
.vehicle_form_detail table, tr, td{
    border: none;
}
.card-item-edit {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-image: url('img/ic_edit.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor:pointer;
    background-color: white;
    transition: background-size 0.1s ease-in;
    -moz-transition: background-size 0.1s ease-in;
    -ms-transition: background-size 0.1s ease-in;
    -o-transition: background-size 0.1s ease-in;
    -webkit-transition: background-size 0.1s ease-in;
}
.card-item-edit:hover{
    background-size: 30px 30px;
}
.card-inside {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 20px;
    font-size: small;
}
.icon_btn_container {
    height: 100px;
    width: 100px;
}
.icon_btn_img {
    min-width: 130px;
    min-height: 200px;
    background-image: url('img/ic_car.png');
    background-size: 100px 100px;
    background-repeat: no-repeat;
    background-position: center;
    cursor:pointer;
    background-color: white;
    transition: background-size 0.1s ease-in;
    -moz-transition: background-size 0.1s ease-in;
    -ms-transition: background-size 0.1s ease-in;
    -o-transition: background-size 0.1s ease-in;
    -webkit-transition: background-size 0.1s ease-in;
}
.icon_btn_img:hover {
    background-size: 120px 120px;
}
.icon_btn_title {
    width: 100%;
    line-height: 30px;
    text-align: center;
    font-size:15px;
    cursor:pointer;
}
.payment_button {
    padding-left: 10px;
    /*padding-right: 10px;*/
    float:right;
    font-size:17px;
    text-align:center;
    cursor: pointer;
    transition: font-size .1s ease-in-out;
}

.payment_button:hover {
    font-size: 25px;
}
@media only screen and (max-width: 1400px) {
    .payment_button {
        font-size:12px;
    }
    .payment_button:hover {
        font-size: 17px;
    }
}
.sale-view-child-item {
    line-height: 30px;
    height: 30px;
}
.sale-view-ref-item {
    line-height: 30px;
    height: 30px;   
}
.setting_type {
    max-width: 300px;
}
.setting_list_container {
    max-height: 700px;
    overflow-y:auto;
    vertical-align: top;
}

.divider {
    min-width: 3px;
    max-width: 3px;
    background-color: black;
}
.setting_page input, select {
    padding:2px;
}

.customer-info-table input {
    width: 150px;
}
.invoice_logo_image {
    height: 100px;
    background-image: url('img/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-print-color-adjust: exact;
}
.day_div_title {
    width:13%;
    min-width: 50px;
    text-align: center;
    border: 1px solid black;
}
.day_div {
    width:13%;
    min-width: 50px;
    max-width: 13%;
    height:100px;
    position: relative;
    border: 1px solid black;
}
.day_name {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: font-size .1s ease-in-out;
}
.day_name:hover {
    font-size: 20px;
}
.schedule_div {
/*    width: fit-content;*/
    width: auto;
    max-width: 80%;
    line-height: 20px;
    float: right;
    text-align: right;
    font-size: small;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: red;
    vertical-align: top;
    margin: 2px;
    padding-left: 1px;
    padding-right: 1px;
    cursor: pointer;
}
@media only screen and (max-width: 1400px) {
    .schedule_div {
        font-size: x-small;
        line-height: 15px;
    }
}
.sales_schedule {
    background-color: blue;
    color: white;
}
.schedule_estimate {
    background-color: black;
}
.schedule_service {
    background-color: red;
}
.schedule_mot {
    background-color: green;
}
.schedule_repair {
    background-color: purple;
}
.schedule_engine_oil {
    background-color: black;
}
.schedule_booking {
    background-color: gray;
}
.schedule_other {
    background-color: orange;
}
.schedule_task {
    background-color: yellow;
    color: black;
}
.item-deleted {
    background-color: gray;
}
.item-description {
    background-color: #D2D2D2;
}
.memo-item {
    width:100%;
    line-height: 20px;
    border: none;
    padding: 5px;
}
.search_list_container {
    min-height:500px;
    max-height:500px;
    max-width: 150px;
    min-width: 150px;
    overflow-y:auto;
    vertical-align:top;
}
.invoice_number {
    height:40px;
    line-height: 40px;
    font-size: 20px;
    font-style: bold;
    margin-left: 10px;
}
.sales-detail-text {
    width: 100%;
}
.booking-item-view  {
    display: inline-block;
    width: 100px;
    text-align: center;
    float:left;
    margin: 5px;
    cursor:default;
    color:black;
    background-color: #D4D4D4;
    font-size: small;
    line-height: 20px;
    box-shadow: 0px 0px 0px rgba(0,0,0,.5);
    transition: box-shadow 0.1s ease-in;
    -moz-transition: box-shadow 0.1s ease-in;
    -ms-transition: box-shadow 0.1s ease-in;
    -o-transition: box-shadow 0.1s ease-in;
    -webkit-transition: box-shadow 0.1s ease-in;
}
@media only screen and (max-width: 1400px) {
    .booking-item-view {
        font-size: x-small;
        line-height: 15px;
    }
}
.booking-item-view:hover {
    box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    -webkit-transform: translate(-3%, -3%);
    transform: translate(-3%, -3%);
}
.sale-view-toggle {
}
.searched-item-card {
    display: inline-block;
    width: 150px;
    text-align: center;
    float:left;
    margin: 5px;
    cursor:default;
    color:black;
    background-color: #D4D4D4;
    font-size: small;
    line-height: 20px;
    box-shadow: 0px 0px 0px rgba(0,0,0,.5);
    transition: box-shadow 0.1s ease-in;
    -moz-transition: box-shadow 0.1s ease-in;
    -ms-transition: box-shadow 0.1s ease-in;
    -o-transition: box-shadow 0.1s ease-in;
    -webkit-transition: box-shadow 0.1s ease-in; 
}
.searched-item-card:hover {
    box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    -webkit-transform: translate(-3%, -3%);
    transform: translate(-3%, -3%);
}

.summary-container {
    position: fixed;
    bottom: 0;
    background-color: white;
    border: 1px solid;
    box-shadow: 5px 10px 18px #888888;
}

.summary-parts-container {
    position: fixed;
    bottom: 0;
    right:0;
    background-color: white;
    border: 1px solid;
    box-shadow: 5px 10px 18px #888888;
}
.summary-inner-container {
    padding-left: 5px;
    padding-right: 5px;
}
.summary-title {
    background-color: blue;
    color: white;
    line-height: 2em;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
}
.sum-item {
    border-bottom: 1px solid black;
}
.under-paid {
    background-color: #FEB3B3;
}
.matrial-item {
    background-color:#AD79FC;
}
.sum-view {
    display: none;
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
}
.sum-header {
    background-color: red;
    color:white;
}
.sum-sum-item {
    width: 80px;
    max-width: 80px;
}
.item-clickable {
    cursor: pointer;
}
.customer-called {
    background: blue;
    color: white;
}