table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

td.clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(102, 102, 102, 0.45);
}

/*
.hidden { display: none; }

.light { font-weight: lighter; }

td.right, span.right { text-align: right; }

table.DetailTable {
    margin: 0 auto;
    -webkit-user-select: none;
}

table.DetailTable th {
    text-align: right;
    padding-right: 10px;
    font-size: 0.8em;
}

table.DetailTable td {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 0.9em;
}

table.DetailTable td.SmallText { font-size: 0.8em; }

table.DetailTable tr.SaveRow { text-align: right; }

h2.center { text-align: center; }
*/

table.ListTable {
    padding: 10px, 0px, 10px, 0px;
    margin: 0px;
    width: 100%;
    background-color: transparent;
}

/*mp035 this part of the css controls the old style 
input-within-table controls which is not used now

table.ListTable tr input { color: #444444 }

table.ListTable tr:hover input { color: #000000 }

table.ListTable input { width: 100%; }

table.ListTable select { width: 150px; }

table.ListTable tbody td:first-child { border-left: 3px solid transparent; }
*/

table.ListTable {
    background-color: transparent;
    width: 100%;
    /*margin: 20px; --mp035 this messes with bootstrap */
    border-collapse: collapse;
    text-align: left;
    -webkit-user-select: none;
}

table.ListTable th {
    font-size: 11pt;
    font-weight: bold;
    background-color: transparent;
    color: #918353;
    text-shadow: 0.0px 1px 1px #FFF;
    padding: 10px 8px;
    border-bottom: 2px solid #918353;
}

table.ListTable td {
    font-size: 0.85em;
    border-bottom: 1px solid #ccc;
    padding: 6px 8px;
}

/* mp035 experiment with removal of unused css
div.accordion h2.head {
    cursor: pointer;
    color: #FFFFFF;
    background-color: #918353;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9D8E5A), to(#877A4D));
    background-image: -webkit-linear-gradient(top, #9D8E5A, #877A4D);
    background-image: -moz-linear-gradient(top, #9D8E5A, #877A4D);
    background-image: -ms-linear-gradient(top, #9D8E5A, #877A4D);
    background-image: -o-linear-gradient(top, #9D8E5A, #877A4D);
    text-shadow: 0.0em -1px 1px #665C3A;
    border-radius: 10px;
    padding-left: 10px;
    padding-top: 5px;
    vertical-align: middle;
    font-size: 1.30em;
    -webkit-user-select: none;
}

div.accordion h2.head:hover {
    background-color: #736842;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#86794D), to(#736842));
    background-image: -webkit-linear-gradient(top, #86794D, #736842);
    background-image: -moz-linear-gradient(top, #86794D, #736842);
    background-image: -ms-linear-gradient(top, #86794D, #736842);
    background-image: -o-linear-gradient(top, #86794D, #736842);
}

img.hideimage { display: none; }

img.displayimage { display: inline; }


div.accordion h2.head img {
    position: relative;
    top: 3px;
    width: 18px;
    height: 18px;
}

div.accordion h2.head span { -webkit-user-select: none; }

div.accordion div.content {
    padding-left: 10px;
    padding-right: 10px;
}

div.accordion div.minimized { display: none; }

.ui-button { margin-top: 10px; }

div.ui-selectmenu-menu a { font-size: 0.7em; }

a.ui-selectmenu {
    text-decoration: none;
    padding-left: 0px;
}

*/

/* Sortable Tables */

/*mp035 sortable tables are not used.
    
table.ListTable tr th.header, table.ListTable tr th.header label { cursor: pointer; }

table.ListTable tr th.headerSortUp {
    cursor: pointer;
    background-image: url(/img/desc.gif);
    background-repeat: no-repeat;
    background-position: center right;
}

table.ListTable tr th.headerSortDown {
    cursor: pointer;
    background-image: url(/img/asc.gif);
    background-repeat: no-repeat;
    background-position: center right;
}

*/

/*
table.PriceMatrix { padding-top: 10px; }

table.PriceMatrix thead tr th {
    padding-top: 5px;
    padding-bottom: 5px;
}

table.PriceMatrix tr th { font-size: 0.8em; }
*/
/* background-color: #C5BB98;} */
/*
table.PriceMatrix tr td input[type="text"] {
    background-color: transparent;
    display: inline;
    width: 40px;
    margin: 3px;
    padding: 1px;
}

table.PriceMatrix tr td {
    font-size: 0.8em;
    text-align: center;
    padding-left: 5px;
}

table.PriceMatrix tr td.Narrow input[type="text"] {
    width: 33px;
    margin: 1px;
}

table.PriceMatrix tr td.Narrow {
    font-size: 0.6em;
    text-align: center;
    padding-left: 1px;
}

table.PriceMatrix tr td.Wide input[type="text"] { width: 50px; }

table.PriceMatrix tbody tr th {
    padding-right: 5px;
    padding-left: 5px;
}
*/

/* rounded Corners */

/* mp035 pricematrix styling no longer required.

table.PriceMatrix thead tr:first-child th:first-child { border-top-left-radius: 5px; }

table.PriceMatrix thead tr:first-child th:last-child { border-top-right-radius: 5px; }

table.PriceMatrix tbody tr:last-child th { border-bottom-left-radius: 5px; }

table.PriceMatrix tbody tr:last-child td:last-child { border-bottom-right-radius: 5px; }


table.PriceMatrix tbody tr th:first-child, table.PriceMatrix thead tr th:first-child { border-right: 2px solid #C5BB98; }

table.PriceMatrix thead tr:last-child th { border-bottom: 2px solid #C5BB98; }

.PriceMatrixHover { background-color: #E2DDCB; }

input[type="text"].PriceMatrixEdited { border-color: #918353; }

#dialog { display: none; }

div.center,
table.center {
    margin-left: auto;
    margin-right: auto;
}

div.right { float: right; }

div.left { float: left; }

div.SaveChangesBox { display: none; }

ul.menu { list-style-type: none; }

div.IconContainer { text-align: center; }

ul.IconList {
    list-style-type: none;
    width: 100%;
    margin: 0 auto;
    padding-left: 0px;
}

ul.IconList li { display: inline; }

*/

.IconButton {
    cursor: pointer;
    padding-top: 50px;
    padding-left: 10px;
    padding-right: 10px;
    width: 192px;
    height: 190px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom:-40px;
}

.tile_button { background-image: url(/img/blank_tile.png); position:relative;}
.tile_button:hover { background-image: url(/img/blank_tile_pressed.png); }

.NewTraditionalQuoteButton { background-image: url(/img/New_Traditional_Quote.png); }

.NewTraditionalQuoteButton:hover { background-image: url(/img/New_Traditional_Quote_Pressed.png); }


.NewHamptonQuoteButton { background-image: url(/img/New_Hampton_Quote.png); }

.NewHamptonQuoteButton:hover { background-image: url(/img/New_Hampton_Quote_Pressed.png); }

.NewOakQuoteButton { background-image: url(/img/New_Oak_Quote.png); }

.NewOakQuoteButton:hover { background-image: url(/img/New_Oak_Quote_Pressed.png); }

.QuotesButton { background-image: url(/img/Quotes.png); }

.QuotesButton:hover { background-image: url(/img/Quotes_Pressed.png); }

.NewQuoteButton { background-image: url(/img/New_Quote.png); }

.NewQuoteButton:hover { background-image: url(/img/New_Quote_Pressed.png); }

.NewQuoteBanneredButton { background-image: url(/img/New_Quote_Bannered.png); }

.NewQuoteBanneredButton:hover { background-image: url(/img/New_Quote_Bannered_Pressed.png); }

.OrdersButton { background-image: url(/img/Orders.png); }

.OrdersButton:hover { background-image: url(/img/Orders_Pressed.png); }

.DispatchedButton { background-image: url(/img/Completed.png); }

.DispatchedButton:hover { background-image: url(/img/Completed_Pressed.png); }

.SearchButton { background-image: url(/img/Search.png); }

.SearchButton:hover { background-image: url(/img/Search_Pressed.png); }

.DistributorsButton { background-image: url(/img/CabinetMakers.png); }

.DistributorsButton:hover { background-image: url(/img/CabinetMakers_Pressed.png); }

.CabinetMakersButton { background-image: url(/img/Distributors.png); }

.CabinetMakersButton:hover { background-image: url(/img/Distributors_Pressed.png); }

.NewCabinetMakerButton { background-image: url(/img/New_CabinetMaker.png); }

.NewCabinetMakerButton:hover { background-image: url(/img/New_CabinetMaker_Pressed.png); }

.PricingButton { background-image: url(/img/Pricing.png); }

.PricingButton:hover { background-image: url(/img/Pricing_Pressed.png); }

.ArchiveButton { background-image: url(/img/Archived.png); }

.ArchiveButton:hover { background-image: url(/img/Archived_Pressed.png); }

.CompanyDetailsButton { background-image: url(/img/Company_Details.png); }

.CompanyDetailsButton:hover { background-image: url(/img/Company_Details_Pressed.png); }

.StaffButton { background-image: url(/img/Staff.png); }

.StaffButton:hover { background-image: url(/img/Staff_Pressed.png); }

div.hafele-logo {
    margin: 0px auto 0px auto;
    width: 220px;
    height: 60px;
    background-image: url(/img/Logos/Hafele@2x.png);
    background-repeat: no-repeat;
    background-size: 220px 60px;
    position: relative;
    top: -20px;
}

div.lincolnsentry-logo {
    margin: 0px auto 0px auto;
    width: 220px;
    height: 60px;
    background-image: url(/img/Logos/LincolnSentry@2x.png);
    background-repeat: no-repeat;
    background-size: 220px 60px;
    position: relative;
    top: -20px;
}

div.nover-logo {
    margin: 0px auto 0px auto;
    width: 220px;
    height: 60px;
    background-image: url(/img/Logos/Nover@2x.png);
    background-repeat: no-repeat;
    background-size: 220px 60px;
    position: relative;
    top: -20px;
}

span.ButtonText {
    display: inline-block;
    /*position: relative;*/
    width: 100%;
    /*top: 126px;*/
    text-align: center;
    color: #FFF;
    font-size: 1.15em;
    font-weight: bold;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 40px;
}


span.tile_text {
    display: inline-block;
    position: relative;
    width: 100%;
    /*top: 126px;*/
    text-align: center;
    color: #FFF;
    font-size: 1.15em;
    font-weight: bold;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 40px;
}

/*.tile_button > span.glyphicon {*/
span.tile_icon {
    display: block;
    position: absolute;
    left:0;
    top:55px;
    width: 100%;
    text-align: center;
    color:#745f38;
    font-size: 3em;
    font-weight: bold;
    /*text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);*/
    text-shadow: 0 1px 1px #fff; 
    pointer-events:none;
}

.IconButton:hover .ButtonText { color: #EEE; }

/*
.ContentLoading { padding-top: 10px; }

.ContentLoading {
    text-align: center;
    vertical-align: middle;
}

.ContentLoading a { display: none; }

*/

footer { color: #91835F; }

div.LoginBox {
    position: relative;
    top: -95px;
    right: 5px;
    float: right;
}

div.BackButton {
    position: relative;
    top: -95px;
    left: 5px;
    float: left;
}

div.BackButton a { margin-top: 0px; }

/* mp035 remove javascript row highlighting in 
favour of highlighting the entire row for readability */
.ListTable tbody tr:hover{
    background-color: #C5BB9840;
}


/*mp035 pagination to use farmers colors*/
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    color: #fff;
    background-color: #918353;
    border-color: #918353;
}

.pagination > li > a,
.pagination > li > span {
    color: #918353;
    background-color: #fff;
}

.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
    color: #918353;
    background-color: #eeeeee;
    border-color: #ddd;
}


/*mp035: remove horizontal lines from modal boxes*/
.modal-header{
    border-bottom:1px solid transparent;
}

.modal-footer{
    border-top:1px solid transparent;
}

/* mp035: give modal box larger borders */
.modal-body{
    padding-left:20px;
    padding-right:20px;
}

/*mp035 create a class to vertically align bootstrap cols within rows
 apply it to the row */
 .vertical-align {
    display: flex;
    align-items: center;
}

/* and another class to cause the elements to stick to the edges (if there are only two) */ 
.space-between {
    display: flex;
    justify-content: space-between;
}



/* ############################################ */
/* mp035 styling for the OLD product selection page */
/* ############################################ */

.menu-cart {
    background:#fff; 
    width: 100%;
    /*height: 150px;*/
    margin: 10px;
    border-radius: 3px;
    box-shadow:0 0 8px rgba(0, 0, 0, 0.06);
    padding-bottom:5px;
    
    border: 1.5px solid #918353;
}

#idQuoteSummary {
    height: 250px;
}

.header-item {
    letter-spacing: 2px;
    /*text-transform: uppercase;*/
    /*color: #3C3D41  ;*/
    font-size: 14px;
    padding: 15px 15px;
    border-bottom: 1.5px solid #EAEAEA;
}

.content-item  {
    margin: 15px;
    padding:0;
    max-width: 220px;
}

/*ITEMS!!!*/

.item-img-holder{
    height:130px;
    padding:0;
    margin:0;
    margin-top: 15px;
    text-align: center;
}
 .item-img-holder::before
 {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
 }

.img-item {
    max-width: 130px; 
    max-height: 130px;
    display: inline-block;
    vertical-align: middle;
}

 .item {
    position:relative;
    vertical-align: top;
    width: 190px; 
    height: 220px; 
    margin: 8px;
    background:#fff; 
    /*background:transparent;*/ 
    display: inline-block;
    border-radius: 3px;
    box-shadow:0 0 8px rgba(0, 0, 0, 0.06);

    border: 1.5px solid #918353;
 }

 .item-avatar {
    vertical-align: top;
    margin: 8px;
    background:#fff; 
    width: 190px; 
    float:left;
    border-radius: 3px;
    box-shadow:0 0 8px rgba(0, 0, 0, 0.06);
    border: 1.5px solid #918353;
 }

.item h3, .item-avatar h3 {
    text-align: center;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top:10px;
    font-size: 1em;
    height:50px;
}

.item h5, .item-avatar h5 {
    position: relative;
    bottom: 10px;
    text-align: center;
    margin-top: 20px;
}

.item div, .item-avatar div {
    text-align:center;
    padding:5px
}

.item-large-view{
    position: absolute;
    top:10px;
    right:10px;
}

a.item-card-link:hover,
a.item-card-link:focus{
    text-decoration: none;
    background-color:black;
}

/* ##############################################
    mp035 styling to dynamically center door style
    selection tiles
   ############################################## */
   .door-style-centered {
    text-align: center;
    font-size: 0;
 }
 .door-style-centered > div {
    /*float: none; mp035 removed this because it causes the content to align at the bottom of the tile*/
    display: inline-block;
    font-size: 13px;
 }

 .door-style-link {
    width: 320px;
    height: 375px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 5px;
    margin-bottom: 10px;
    position:relative;
    left: -15px;
    top: 10px;
 }

 .door-style-caption {
     text-align: center;
     margin-bottom:15px;
     margin-top:0px;
 }

 .door-style-container {
    border-radius: 3px;
    box-shadow:0 0 8px rgba(0, 0, 0, 0.06);
    padding:10px;
    border: 1.5px solid #918353;
    margin-bottom:10px;
    margin-top:10px;
    min-height: 565px;
  }

 /* ##################################################
    mp035 styling to create painted edge control
    ################################################## */

  /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    2024-11-14
    mp035 the edge control styling is not used anymore
    it has been moved to the Vue component.  remove this
    section once the old order form is decomissioned.
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.edge-control-holder{
    width:50px;
    height:80px;
    position: relative;
    top:0;
    left:0;
    border-radius: 5px;
    overflow: hidden;

    margin: 0 auto 10px auto;

}

.edge-control-img{
    z-index: 2;
}

.edge-top{
    position: absolute; 
    top:0; 
    left:0; 
    width:80px; 
    height:15px;
    z-index: 4;
}

.edge-right{
    position: absolute; 
    top:0; 
    right:0; 
    width:15px; 
    height:80px;
    z-index: 3;
}

.edge-bottom{
    position: absolute; 
    bottom:0; 
    left:0; 
    width:80px; 
    height:15px;
    z-index: 4;
}

.edge-left{
    position: absolute; 
    top:0; 
    left:0; 
    width:15px; 
    height:80px;
    z-index: 3;
}

.edge-top:hover, 
.edge-right:hover,
.edge-bottom:hover,
.edge-left:hover
{
    background: rgba(0, 0, 0, 0.25);
}

.edge-top.selected, 
.edge-right.selected,
.edge-bottom.selected,
.edge-left.selected
{
    background: rgba(0, 0, 0, 0.5);
}

/* **********************************************
mp035 styling for the order page mk2 
********************************************** */

.clickable{
    cursor: pointer;   
}

.panel-heading span {
    margin-top: -20px;
    font-size: 15px;
}

.order-panel {
    background: none;
}

.error-display {
    padding-bottom:10px;
    font-weight:bold;
}

/* a transparent overlay to block out background content*/
.overlay {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 10; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

/*mp035 a status bar for displaying order totals and buttons etc. */
.status-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #808080;
    color:white;
    padding:15px;
    z-index:1001; /* this makes the status bar sit over the bootstrap-select controls which are at z-index 1000 */
    /*border:1px solid black;*/
}

.status-bar .figures{
    font-size: large;
}

.status-bar td{
    padding-left:20px;
}

/* mp035 a copy of the old CSS for displaying the current order status at the top of the page */
.OrderStatusPanel {
    color: #8B8B8B;
    background-color: #DDDDDD;
    border: 1px solid #D6D6D6;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E8E8E8), to(#DDDDDD));
    background-image: -webkit-linear-gradient(top, #E8E8E8, #DDDDDD);
    background-image: -moz-linear-gradient(top, #E8E8E8, #DDDDDD);
    background-image: -ms-linear-gradient(top, #E8E8E8, #DDDDDD);
    background-image: -o-linear-gradient(top, #E8E8E8, #DDDDDD);
    text-shadow: 0.0em 0.1em 0.1em #FFF;
    border-radius: 10px;
    padding-bottom: 15px;
    margin-bottom: 35px;
    vertical-align: middle;
    padding-top: 10px;
    /*font-size: 1.25em;*/
    font-size: 1.1em;
    -webkit-user-select: none;
    /*max-width: 1150px*/;
    margin-left: auto;
    margin-right: auto;
    overflow-x:auto;
    white-space: nowrap;
}

.OrderStatusPanel ul {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0 auto;
}

.OrderStatusPanel ul li {
    display: inline-block;
    list-style-type: none;
    padding-left: 15px;
    padding-right: 15px;
    height: 100%;
    vertical-align: top;
}

.OrderStatusPanel ul li.CurrentStatus { color: #333333; }

.OrderStatusPanel ul li div.Time {
    /*font-size: 0.6em;*/ 
    font-size: 0.7em; 
}

/* mp035: some utility classes for laying out the error page */
.full-height {
    height: 100vh;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}

/* table spacing for file list table on multi file upload */
table.multifile_list td {
    padding-right:10px;
    border: none;
}

table.multifile_list {
    margin-top:10px;
}

/* The links which show the datasheets for each category */
.category-link{
    padding-right:25px;
}

/*mp035 the lead time display box*/
.leadTime{
    display: block;
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    /*background-color: #fff;*/
    background-image: none;
    border: 1px solid #ccd0d2;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow 
}

/*mp035 the lead time color loabels*/
.LeadTimeColorLabel{
    padding: 2px 6px;
    color: #555555;
    /*background-color: #fff;*/
    background-image: none;
    border: 1px solid #ccd0d2;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow 
} 

.bg-white{
    background-color: white;
}


/*mp035 the drawer bank control */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
  2024-11-14 
  mp035 this is not used anymore 
  it has been moved to the Vue component.  remove this
  section once the old order form is decomissioned.
  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.drawer-bank-control{
    display:inline-block;
    /*border: 1px solid #918353;*/
    padding: 5px;
}