/*

#A59FEA = medium purple
#7670B3 = strong purple
#9F9DC6 = greyish purple            

#FACB00 = the yellow/orange of http://www.goldlabeluk.com/ buttons which have a 1px #987D00 underline
*/
body, html {
    margin-left: 0px;
}

body, html, input, select {
    font-family: 'Open Sans', 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;
    font-weight: 400;
    font-size: 14px;
}

#Company_Name {
    font-family: 'Open Sans', 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;
    font-weight: 300;
    color: white;
    font-size: 28px;
    margin-left: 100px;
    position: relative;
    top: -5px;
}
.order_header_details {
    position: absolute;
    top: 130px;
    border: 1px solid silver;
}
#customer_order_no_input, #sc_order_ref_input, #direct_ref_input, #order_date_input {
    font-weight: bold;
}
h1, h2, h3, h4 {
    font-weight: 300;
    color: #255282;
    font-size: 28px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
    font-weight: normal;
}

h4, .msg {
    font-size: 18px;
    font-weight: normal;
}

h4.header_block {
    color: white;
    background-color: #4F96E2;
    width: 700px;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 3px;
}

.msg {
    padding-left: 5px;
}

#colour_medium_logo {
    display: inline;    
}

#clear_medium_logo {
    display: none;    
}


#print_our_details {
    position: absolute;
    top: 10px;
    left: 70px;
    display: none;
}
#print_our_details #our_name {
    font-size: 24px;
    font-weight: bold;
    display: block;
}
#print_our_details #our_address {
    display: block;
}
#print_our_details #our_fax {
    padding-left: 20px;
    padding-right: 20px;
}
#logo {
    position: absolute;
    top: 50px;
    left: 600px;
    text-align: right;
}
#logo_top_line {
    position: absolute;
    top: 10px;
    left: 600px;
    text-align: right;
}
#logo_bottom_line {
    padding-right: 10px;
    display: inline-block;
    position: relative;
    top: -5px;
}
tr.even {
    background-color: #EFEFEF;
}

img {
    border: none;
}

a {
    text-decoration: none;
}

a.fixed_width {
    display: block;
    width: 150px;
}

.table {
    float: left;
    clear: none;

}

.tr {
    float: left;
    clear: both;

}

#user_data_entry_table td.label {
    text-align: right;
    width: 150px;
    padding-right: 3px;
    white-space: nowrap;
    padding-top: 14px;
}

#user_data_entry_table td.data {
    text-align: left;
    margin-bottom: 4px;
}

.right {
    text-align: right;
}

.center, .centre {
    text-align: center;
}

.div {
    background-color : transparent;
}

.header {
    padding-top: 20px;
    padding-left: 20px;
    white-space: nowrap;
}

.print_inline {
    display: none !important;
}

.content {
    display: inline-block;
    padding-left: 50px;
    padding-top: 6px;
    margin-left: 50px;
}

.silver {
    color: silver;
}

.highlight {
    background-color: aliceblue;
}
.home_menu {
    padding-top: 20px;
}

#top_menu {
    background-color: #2D5384; /* was #6895c9 */
    border: 1px solid gray; /* was #6895c9 */
    padding-top: 5px;
    padding-left: 0px;
    padding-right: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100%;
}

#top_menu_home {
    margin-left: 32px; 
}

.top_menu_item {
    padding-left: 8px;
}

.bleed_edges {
    color: black;
    background-color: white; /* was #3E7BC1 */
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 100px;
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    border-top: 1px solid #255282;
    border-bottom: 1px solid #255282;
}

.block {
    padding: 20px;
    width: 600px;
}

.float_left {
    float: left;
    clear: none;
}

.indent {
    margin-left: 40px;
}
.disabled {
    background-color: silver;
    border: 1px solid gray;
}


/* #FACB00 = the yellow/orange of buttons which have a 1px #987D00 underline */
.button, .button_black, .button_black_wide {
    border-bottom: 1px solid #987D00;
    background-color: #FACB00;
    color: black;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 3px;
    padding-bottom: 6px;
    height: 16px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

.button_black_wide {
    width: 120px;
}

.warning {
    color: yellow;
}

.error, .red {
    color: red;
}

.unsaved {
    border: 2px solid red;
}
.white {
    color: white;
}

.desktop_right_mobile_left {
    text-align: right;
}

.autocomplete {
    border: 1px solid silver;
}
.search_results, .customer_tasks_menu {
    border: 1px solid silver;
    position: absolute;
    left: 300px;
    background-color: white;
    z-index: 9;
    width: 400px;
    height: 400px;
}
.search_results_item {
    cursor: pointer;
    background-color: #FACB00;
    border-bottom: 1px solid silver;
    padding: 5px;
    margin-top: 8px;
    padding-left: 5px;
    margin: 5px;
}

.search_results {
    z-index: 9;
    display: none;
}

.customer_tasks_menu {
    z-index: 8;
}

.small {
    font-size: smaller;
}

.order_info {
    position: absolute;
    top: 196px;
    left: 20px;
    border: none;
    padding: 2px;
    width: 850px;
    height: 142px;
    float: left;
    clear: none;
    display: inline-block;
}

#special_instructions {
    position: absolute;
    top: 120px;
    left: 880px;
    border: 1px solid silver;
    padding: 2px;
    width: 330px;
    float: left;
    clear: none;
}
#special_instructions_input {
    width: 300px;
    height: 100px;
    text-align: left;
    border: none;
    resize: none;
    overflow: hidden;
}

.order_name_and_address {

}

.recent_orders_list_container {
    position: absolute;
    top: 200px;
    left: 500px;
}

.recent_orders_list TABLE, #repeating_order_calendar  {
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid silver;
}

.recent_orders_list TD {
    padding: 3px;
    border-bottom: 1px solid silver;
    white-space: nowrap;
}

.org_in_recent_orders_list {
    cursor: pointer;
    width: 200px;
    display: block;
    overflow: hidden;
    text-overflow:ellipsis;
}

.width75 {
    position: relative;
    width: 75px;
    height: 16px;
    display: block;
    float: left;
    clear: none;
    margin-right: 4px;
}

.width90 {
    position: relative;
    width: 90px;
    display: block;
    float: left;
    clear: none;
    margin-right: 4px;
}

.product_input {
    padding-left: 4px;
}

.quantity_input {
    padding-left: 4px;
}

.money_input {
    text-align: right;
    width: 80px;
    padding-right: 4px;
}

.vat_rate_input {
    text-align: right;
    width: 40px;
    padding-right: 4px;
}

.vat_rate_title {
    width: 40px;
    white-space: nowrap;
}

.finished {
    background-color: #FFD800;
    border: none;
    padding-left: 3px;
}

.adding {
    background-color: #B6FF00;
    border: none;
    padding-left: 3px;
}
.move_adding_up {
    position: relative;
    top: -4px; /* because the delete icon shoves it down, and the delete icon is only visible when "Adding" */
}
.sent_to_sage {
    background-color: mediumorchid;
    color: white;
    border: none;
    padding-left: 3px;
}

.row_title {
    font-weight: bold;
}

.special_prices_table TD {
    border-right: 1px solid silver;
    border-bottom: 1px solid silver;
    padding-right: 8px;
    padding-left: 4px;
    white-space: nowrap;
}

.readonly {
    border: 1px solid white;
}

#jquery_warning {
    color: red;
}

#order_footer {
    display: none;
}


#order_lines {
    margin-left: 8px;
}

.order_lines_table {
    margin-top: 16px;
}

.size_input {
    padding-left: 4px;
}
.code_input {
    width: 84px;
    padding-left: 4px;
}

.qty_in_pack_input {
    width: 44px;
    text-align: center;
}

#vat_breakdown {
    position: absolute;
    left: 700px;
    top: 150px;
}
#total_goods_total, #nett_goods_total, #vat_total, #invoice_total, #discount_total, #carriage_total, #vat_on_carriage {
    width: 80px;
}

#address_book_discount_percent {
    text-align: center;
}

#discount_total {
    border: 1px solid white;
}

.nowrap {
    white-space: nowrap;
}

#repeat_div {
    position:absolute;
    left: 1250px;
    top:120px;
}

#repeating_orders_calendar_container {
    position: absolute;
    top: 0px;
    left: 700px;
    width: 400px;
    white-space:nowrap;
}
#repeating_order_calendar {
    width: 380px;
}
.recent_orders_list TD, #repeating_order_calendar td {
    padding: 4px;
    white-space: nowrap;
}
.gray, .grey {
    color: silver;
}

#order_display {
    margin-left: 250px;
    margin-bottom: 4px;
}

.crate_count_span {
    position: absolute;
    left: 270px;
}


#show_all_routes {
    margin-left: 40px;
    width: 150px;
    display: inline-block;
}

#prior_date, #next_date {
    cursor: pointer;
}
.grey_background {
    background-color: #EAEAEA;
}

#percent_markup_input, #order_discount_input {
    width: 75px;
}
.routes_info_table td {
    white-space: nowrap;
}
.crates_in_input {
    width: 55px;
    text-align: right;
}

.hidden, .hide {
    display: none;
}
.mail_address, .delivery_address {
    display: inline-block;
    float: left;
    clear: none;
    width: 255px;
    height: 120px;
    padding: 4px;
    margin-right: 4px;
}
#mail_address, #delivery_address {
    display: inline-block;
    float: left;
    clear: none;
    width: 255px;
    height: 120px;
    border: 1px solid silver;
    padding: 4px;
    margin-right: 4px;
}
.order_inv_no {
    margin-left: 32px;
}
.weight_input {
    width: 60px;
    text-align: right;
    padding-right: 4px;
}
#Filemaker {
    background-color: yellow;
    padding-left: 4px;
    padding-right: 4px;
    position: absolute;
    top: 80px;
    left: 300px;
}
.bold {
    font-weight: bold;
}
.order_lines_titles td {
    font-weight: bold;
}
.tickbox_for_delivery, .tickbox_for_packers {
    text-align: center;
    height: 20px;
    border: 1px solid grey;
    margin-left: 8px;
    padding-left: 20px;
    display: none;
}
.weight_title {
    white-space: nowrap;
}
#document_caption {
    position: absolute;
    top: 230px;
    left: 600px;
    font-weight: bold;
    font-size: 20px;
    width: 300px;
}
#is_export {
    position: absolute;
    top: 280px;
    left: 700px;
    z-index: 9;
}
#label_list {
    border-spacing: 0;
    border-collapse: collapse;
}

#label_list td, #label_list th {
    border-bottom: 1px solid silver;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
}

#production_sheet td, #production_sheet th {
    font-size: 12px;
    border-bottom: 1px solid silver;
}

.production_sheet_product {
    width: 250px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    top: 2px;
}
#wait_message2 {
    position: absolute;
    left: 30px;
    top: 30px;
}
#delivery_signature_footer {
    border-radius: 15px;
    width: 600px;
    margin-left: 150px;
    border: 1px solid gray;
    padding-left: 20px;
    display: none;
}
#wait_message1 {
    position: absolute;
    top: 2px;
    left: 20px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: yellow;
}
#user_data_entry_table {
    position: absolute;
    left: 300px;
    top: 200px;
}
#top_menu_logout {

}
#report_table {
	border-top: 1px solid silver;
	border-left: 1px solid silver;
	border-right: 1px solid silver; 
}
#report_table td {
	border-bottom: 1px solid silver; 
}
#report_table tr.top {
	font-weight: bold;
	background-color: #9FC6F9; /* obtained from https://color.adobe.com/create/color-wheel using "Color Wheel > Monochromatic" then using #2D5384 as the "basic" colour */ 
	color: black; 
}

#add_new_customer_title {
    padding-left: 30px;
}


/* I prefer the placeholder text to be paler than grey as grey is too near to black. See https://www.w3schools.com/howto/howto_css_placeholder.asp */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: silver;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: silver;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: silver;
}

/* Suitable CSS for mobile-friendly inputs etc see https://www.webdesignerdepot.com/2013/03/how-to-make-your-contact-forms-mobile-friendly/ */
label {
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
    height: 22px;
    margin: 0;
    padding-top: 8px;
}

input:read-only {
    border: 1px solid white !important;
    font-size: 15px !important;
}

input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=time] {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    height: 24px;
    font-size: 17px;
    border: 1px solid #bbb;
    max-width: 600px;
    padding-left: 3px;
}

input[type=date], input[type=time] {
    height: 24px;
    width: 180px;
}

select.vlc_input {
    display: inline-block;
    height: 32px;
    line-height: 30px;
    font-size: 17px;
    border: 1px solid #bbb;
    max-width: 600px;
    padding-left: 3px;
}

input[type=checkbox] {
    width: 18px;
    height: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    border: 1px solid #bbb;
    position: relative;
}

input[type=range] {
    width: 100%;
    max-width: 600px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 44px;
    height: 44px;
    background: #fdfdfd;
    background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe));
    background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
    border: 1px solid #bbb;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
}

/* Remove arrow spinners from number inputs */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove arrow spinners from number inputs */
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

div[contenteditable="true"] {
    padding: 0 3px 0 3px;
    overflow: auto;
    max-width: 600px;
    width: 80%;
    height: 100px;
    border: 1px solid silver;
    position: relative;
    top: 10px;
}

td.vcl_label {
    white-space: nowrap;
    vertical-align: top;
}

td.vcl_input {
    vertical-align: top;
}

.vcl_input {
    background-color: white;
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.25); /* Black background with opacity */
    display: none;
    z-index: 9999;
}
#overlay h1 {
    position: absolute;
    top: 70px; /* this is enough to get it below the page title */
    left: 50%;
    font-size: 50px;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

.input_div {
    margin-bottom: 15px;
}
.sigWrapper {
    margin-top: -40px;
    width: 400PX;
}
#entire_signature_area {
    width: 410px;
}
.sheet_caption {
    font-size: 18px;
    font-weight: bold;
}
#duplicate_this_job {
    position: absolute; 
    top: 12px;
    left: 750px;
}
#msg {
    display: block;
    font-weight: bold;
    color: brown;
    width: 100%;
    text-align: center;
}
#sheet_title_for_print { display: none; }
#save_message { width: 100px; border: none; display: inline-block; color: yellow; margin-left: 30px; }
.vcl_byn { width: 30px; text-align: center; border: none; height: 18px !important; }
input#Job_No {
    width: 60px;
}
input#iCool_Job_No {
    width: 80px;
}
input #Job_No, input#iCool_Job_No {
    font-weight: bold;
}