* {
 margin: 0;
 padding: 0;
}

.off_screen {
    position: absolute !important;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
}

.page-header {
    display: none;
}

@media print {
/*view order page*/
    .page-header {
        display: inline-block;
        margin: 10px auto;
    }
}

.grid {
    display: grid;
    grid-gap: 8px;
}
.grid-2-auto-columns {
    grid-template-columns: auto auto;
}
.grid-4-auto-columns {
    grid-template-columns: auto auto auto auto;
}
.grid-5-auto-columns {
    grid-template-columns: auto auto auto auto auto;
}
.grid-6-auto-columns {
    grid-template-columns: auto auto auto auto auto auto;
}
.grid-6-auto-columns.contact-form > div:nth-child(12n + 7),
.grid-6-auto-columns.contact-form > span:nth-child(12n + 8),
.grid-6-auto-columns.contact-form > span:nth-child(12n + 9),
.grid-6-auto-columns.contact-form > span:nth-child(12n + 10),
.grid-6-auto-columns.contact-form > span:nth-child(12n + 11),
.grid-6-auto-columns.contact-form > span:nth-child(12n + 12) {
    background-color: #cfff8617;
}

.grid-input-row {
    background-color: #f2f2f2;
    padding: 10px 10px 10px 0;
    align-items: center;
}
.grid-label-row {
    align-items: center;
}
.grid-label-row label {
    width: 180px;
    text-align: right;
}
.grid-label-for-input {
    height: fit-content;
    align-self: center;
}
.grid-label-for-input label {
    text-align: end;
    align-self: center;
}


.margin-20-0 {
    margin: 20px 0;
}

.grid-label-for-input input {
    height: 2.4em;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-indent: 10px;
    line-height: 2.4em;
}

fieldset .grid-input-row label {
    display: inline-block;
    width: 200px;
    text-align: right;
}
.grid .p2n-button {
    padding: 8px 10px;
}

.grid.contact-form {
    grid-gap: 0;
}
.grid.contact-form span {
    padding: 10px 4px;
}
/*
    messes up contact form messages, but needed elsewhere?
.grid > span:nth-child(0n + 1),
.grid > span:nth-child(0n + 2),
.grid > span:nth-child(0n + 3),
.grid > span:nth-child(0n + 4),
.grid > span:nth-child(0n + 5) {
    background-color: #efefef;
}
.grid > span:nth-child(8n + 1),
.grid > span:nth-child(8n + 2),
.grid > span:nth-child(8n + 3),
.grid > span:nth-child(8n + 4),
.grid > span:nth-child(8n + 5) {
    background-color: #efefef;
}
*/

p {
 margin: 2px 0;
}

h2 {
    margin: 0 0 8px 0;
    padding: 0 0 0 20px;
    text-align: left;
    text-transform: initial;
    background-color: #8d8d8d;
    font-size: 20px;
    color: #fff;
    max-width: 760px;
}

h3 {
    font-size: 14px;
    color: #fff;
    margin-top: 40px;
    padding: 6px 0 6px 6px;
    /*    max-width: 774px; removed 25-May-2022 */
}

.accordion h3 {
    padding: 0;
}

label {
    vertical-align: middle;
}

.impersonate-info {
 width: 20%;
 border: 1px solid green;
 position: absolute;
 top: 5px;
 left: 18%;
 padding: 4px;
 background: #f8f8f8;
 z-index: 1;
}

.demo-notice {
    border-radius: 6px;
    /*
 position: absolute;
 top: 2px;
 left: 1vw;
*/
    background: #800202;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 0 14px;
}

.demo-notice a {
 color: #ffffff;
}

fieldset {
    position: relative;
    /* max width which will fit container is 748px our containing div is 770px wide so we set
 margins here to centre fieldset. margin:0 auto; did not work. 
 width: 580px;
 width: initial; */
    width: 100%;
    max-width: 840px;
    margin: 0 10px 10px 0; /*15px*/
    border-style: none;
    background-color: #f7f7f7;
}

legend {
 display: none;
}

/*****************************/
/* Creates a scrolling panel */
/*****************************/
div.scrollpanel {
 width: 75%;
 height: 125px;
 margin: 5px 10px;
 padding: 2px;
 overflow:auto;
 border: 1px solid Silver;
}

/*scrolling panel for categories on product page*/
div.scrollpanel1 {
 width: 100%;
 height: 116px;
 margin: 5px 10px;
 overflow-y: scroll;
}

#LabelDisplay {
 display: inline-block;
 width: 114px;
 width: auto;
 text-align: right;
}

/* on product page we need to remove scrolling panel for featured on list */
.featured-home-only .scrollpanel {
 display: inline-block;
 width: 55%;
 height: auto;
 margin: 0 0 0 6px;
 padding: 0;
 vertical-align: middle;
 border-style: none;
}

/* labels alongside textboxes, comboboxes etc. */
label_bak {
 clear: both;
 float: left;
 width: 140px;
 margin: 2px 0 2px 0;
 padding: 5px 2px 0 0;
 text-align: right;
 color: Black;
}

/* asp:label rendered as a span, alongside fileupload control on add new category page ?? */
span.label_bak {
 clear: both;
 float: left;
 width: 140px;
 margin: 2px 0 2px 0;
 padding: 5px 2px 0 0;
 text-align: right;
 color: Black;
}

/* label alongside a radio button */
label.radiolabel {
 clear: none;
 float: none;
 margin: 0;
 padding: 0;
 text-align: left;
}

label#LabelLongCategoryDescription {
 display: block;
 text-align: left;
}

.product-info-columns { display:flex;padding: 0 0 10px 10px;border: 1px solid #ccc;background-color: #f1f1f1;}

.product-info-col {
 margin: 0 0 0 0;
}
.product-info-box {
 clear: both;
 margin: 6px 0 6px 0 !important;
}

.editor {
 padding-top: 10px;
}

span.subtext {
 font-size: 10px;
}

.overdue-invoice-message {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 580px;
    margin: 20px auto;
}
.overdue-invoice-message p {
    line-height: 1.8;
    font-size: 18px;
}
.overdue-invoice-message p:nth-child(4) {
    margin-top: 14px;
}
.overdue-invoice-message a {
    padding: 12px 178px 12px 0;
    color: navy;
}

#PanelVatInfo select {
    width: 92px;
    height: 2.4em;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-indent: 5px;
    line-height: 2.4em;
    font-size: 12pt;
}

/* dynamically created product options */
#TextBoxesGroup input, #TextBoxesGroup select {
    font-size: 16px;
    line-height: 2.4em;
    height: 2.4em;
    padding: 0 0 0 4px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#TextBoxesGroup .option_value input[type=text] {
    width: 120px;
}

/*drop down list on bulk price update*/
#ddlMethod {
    margin-top: 10px;
}

/* contains a help image when we want it placed underneath an existing label, on the left hand side */
span.subimage {
 clear:both;
 float:left;
 width:140px; /* must match width of labels */
 text-align: right;
}

.navigation-tabs {
    display: flex;
    justify-content: space-between;
    max-width: 850px;
    margin: 10px 0;
    padding: 0.25% 1% 0.25% 1%;
    border: 1px solid #DCDCDC;
}

.navigation-tabs a {
 padding: 6px;
 color: #020416;
 text-decoration: none;
}

.navigation-tabs a:hover {
 color: #fff;
 background-color: #4c4c4c;
}

.navigation-tabs a.active {
 color: #fff;
 background-color: #4a517b;
 border-radius: 4px;
}

#LabelFeaturedOn {
    display: inline-block;
    text-align: right;
    vertical-align: text-top;
    padding: 2px 0 0 10px;
}

#CheckBoxListFeaturedOn label {
    display: none;
}


/* on product page we need to remove scrolling panel for featured on list */
.featured-home-only span.subimage {
 display: none;
}



.input-tab {
    height: 135px;
    padding: 0px 6px 6px 6px;
    border: 1px solid #ccc;
    background-color: #ececec;
}



/***************
 Floating labels
****************/
.floating-placeholder input, .floating-placeholder textarea, .floating-placeholder {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18pt;
  font-size: 18px;
  line-height: 2.4em;
  height: 2.4em;
  margin: 0;
  padding: 0;
  width: 100%;
/*padding: 1.4em 1em 0.6em 1em;*/
}

.floating-placeholder input:focus + label, .floating-placeholder textarea:focus + label {
  color: #16abf0;
}

.floating-placeholder input[value] + label, .floating-placeholder textarea[value] + label {
  color: inherit;
}

.floating-placeholder {
  position: relative;
}

.floating-placeholder input, .floating-placeholder textarea {
    font-size: 18pt;
    font-size: 14pt;
    border: none;
    outline: none;
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
    background: transparent;
    background: #fff;
    z-index: 2;
    z-index: 1;
    border-bottom: 1px solid #ccc;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-indent: 20px;
}

.floating-placeholder textarea {
 padding-top: 20px;
 box-sizing:border-box;
}

.floating-placeholder:last-child input {
/*  border-bottom: none;*/
}

.floating-placeholder label {
    display: block;
    position: absolute;
    top: 0;
    top: 4px;
    left: 20px;
    font-size: 20pt;
    font-size: 12pt;
    z-index: 2;
    -moz-transform-origin: 0 0em;
    -ms-transform-origin: 0 0em;
    -webkit-transform-origin: 0 0em;
    transform-origin: 0 0em;
    -moz-transition: -moz-transform 160ms, color 200ms;
    -o-transition: -o-transform 160ms, color 200ms;
    -webkit-transition: -webkit-transform 160ms, color 200ms;
    transition: transform 160ms, color 200ms;
    -moz-transform: scale(1, 1) rotateY(0);
    -ms-transform: scale(1, 1) rotateY(0);
    -webkit-transform: scale(1, 1) rotateY(0);
    transform: scale(1, 1) rotateY(0);
    color: #999;
}

.floating-placeholder-float label {
  -moz-transform: scale(0.55, 0.55) rotateY(0);
  -ms-transform: scale(0.55, 0.55) rotateY(0);
  -webkit-transform: scale(0.55, 0.55) rotateY(0);
  transform: scale(0.65, 0.65) rotateY(0);
  top: -5px;
}

.floating-placeholder-float input {
  line-height: 3.4em;
}

.floating-placeholder-float textarea {
 padding-top: 20px;
 line-height: 1.2em;
 text-indent: 0;
 padding-left: 20px;
 padding-bottom: 0px;
}

/***************
 Floating labels
****************/








.incentive {
    display: flex;
    margin: 2px 0 20px 0;
    border: 1px solid silver;
    border-radius: 8px;
    padding: 10px;
}

.incentive .text-info {
    margin-left: 20px;
}
















#TabThree input[type=text], #TabThree textarea, #TabFour textarea {
    width: 100%;
}






/***********************/
/* Checkboxlist styles */
/***********************/

span.checkboxlist {
 clear: both;
 float: none;
}

span.checkboxlist input {
 float: none;
 display: inline-block;
 margin: -2px 2px 0 0;
 padding: 2px;
 vertical-align: middle;
}

span.checkboxlist label {
 float: none;
 margin: 0px 0 0 0;
 padding: 0px 0 0 0;
}

/***************************/
/* End Checkboxlist styles */
/***************************/

/********************/
/*  CheckBox styles */
/********************/

span.checkbox {
/* clear: both;
 float: left;
 margin: 0px;
 border: 1px solid red;*/
}

/* checkbox on add product page */
span.checkbox1 {
 display: inline-block;
 padding: 0;
 margin: 3px 0 5px 6px;
}

span.checkbox label {
/* width: auto;
 border: 1px solid green;*/
}

span.checkbox input {
/* margin: 10px 0 0 0;
 padding: 0 0 0 0;*/
}


table#CheckBoxListCategories label {
 float: none;
 display: inline-block;
 width: 86.5%;
 text-align: right;
}
table#CheckBoxListCategories input[type=checkbox] {
 margin: 0 0 0 6px;
}

/***********************/
/* End CheckBox styles */
/***********************/
#LabelBanner {
    display: inline-block;
    text-align: right;
    vertical-align: text-top;
    padding: 2px 0 0 10px;
    width: 120px;
}

#RadioListBanner {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

#RadioListBanner img {
    width: 64px;
}

#PanelAdvancedOptions {
 margin: 1% 0 1% 0;
 padding: 0.5%;
 border: 1px solid #DCDCDC;

}
.advanced_options {
 border: 1px solid Red;
}

.category_ddl_name {

    display: flex;
    justify-content: space-between;
}

#NewCategory img.help {
 display: none;
}

#NewCategory br {
/* display: none;*/
}

#NewCategory label {
 float: none;
 clear: both;
}

#NewCategory #ComboBoxCategoryList, #DropDownListCustomPriceOperand, #DropDownListCustomPriceOperand1, #ddlSuppliers {
 display: block;
 margin: 0 0 5px 0;
 padding: 4px;
 font-size: 0.9rem;
 border: 1px solid #ccc;
 border-radius: 5px;
}

#ImageCustomOptionPreview{
    border: 1px solid #999;
}
#FileUploadCustomOptionImage {
    display: none;
}
#DropDownListCustomPriceOperand, #DropDownListCustomPriceOperand1 {
 margin: 2px 0 0 16px;
 padding: 12px;
 color: #999;
}
.select-option-image {
	display: inline-block;
	margin: 4px 4px 0 0;
	padding: 2px 6px 0 6px;
	cursor: pointer;
	border-radius: 4px;
    border: 1px solid #ccc;
	background-color: #eee;
}

#NewCategory #TextBoxCategoryName {
/* margin-top: 8px;
 padding: 2px;
 font-size: 0.9rem;*/
}

#pnlNewProduct #ComboBoxCategoryList {
 margin: 0 0 5px 8px;
 padding: 4px;
 font-size: 0.9rem;
 border: 1px solid #ccc;
 border-radius: 5px;
}

#pnlNewProduct #TextBoxProductName_bak {
 margin-top: 6px;
 padding: 2px;
 font-size: 0.9rem;
}

/* 
#pnlNewProduct #fileupload {
    display: block;
    width: 100%;
    max-width: 300px;
    margin-top: 10px;
    padding: 50px;
    border: 6px dashed #a0a0a0;
}
*/

#pnlNewProduct #fileupload {
    width: 738px;
    margin-top: 10px;
    padding: 25px 12px;
    border: 4px dashed #a0a0a0;
}

#PanelCropitImage {
    position: relative;
    margin: 8px 0 0 40px;
}


/***************************************/
/* Filter options on Product List page */
/***************************************/
div.listoptions {
    /* display: flex;
 flex-direction: row;*/
    overflow: hidden;
    clear: both;
    max-width: 780px;
    background-color: rgba(0,0,0,.03);
    margin: 16px 0 0 0;
}

div.listoptions label {
 padding: 6px 10px 0 0;
 vertical-align: middle;
}

div.listoptions #chkHidden {
 vertical-align: middle;
 margin: 0 0 0 6px;
}

div.listoptions table.letters {
 width: 80%;
 margin: 18px 0 6px 12px;
 border-collapse: collapse;
}

div.listoptions table.letters label {
 float: none;
 padding: 0 0 0 0;
}

div.listoptions div.options {
/* float: left;
 width: 425px;*/
}

/* Checkbox label for date pick */
div.listoptions div.options span.picklabel label {
 min-width: 385px;
 text-align: right;
}

div.listoptions div.options span.picklabel input[type=checkbox] {
 display: inline-block;
 margin: 12px 0 0 6px;
}

/* contains labels and datepicker controls */
div.listoptions div.options div.pickers {
 overflow: hidden;
 width: 350px;
}

/* label for 'from' date datepicker control */
div.listoptions div.options div.pickers span.f {
 display: block;
 float: left;
 margin: 4px 4px 0 0;
 color: Navy;
}

/* label for 'to' date datepicker control */
div.listoptions div.options div.pickers span.t {
 display: block;
 float: left;
 margin: 4px 4px 0 4px;
 color: Navy;
}

/* datepicker controls rendered as tables */
div.listoptions div.options table.datepick {
 float: left;
 margin: 0px 0 0 0;
}

div.listoptions input[type=submit] {
    align-self: end;
    width: fit-content;
    margin: 10px 10px 0 0;
    background: #202685;
    background-image: linear-gradient(to bottom, #5d81c7, #2d4e83);
    border-radius: 8px;
    border-style: none;
    padding: 0.4% 2% 0.8% 2%;
    color: White;
    padding: 0.8% 3.8% 0.8% 3.8%;
    font-size: 1.2em;
}

div.listoptions input[type=submit]:hover {
    background-image: linear-gradient(to bottom, #5d81c7, #3363af);
}

.accordion-filter h3 {
    margin: 0;
}

.accordion-filter {
    width: auto;
    /*    border-radius: 5px;*/
    overflow: hidden;
    margin: auto;
}

.accordion-filter .flexbox-justify {
    display: flex;
    justify-content: space-between;
}

.accordion-filter span.f {
    padding: 2px 12px 0 0;
}
.accordion-filter span.t {
    padding: 2px 12px 0 12px;
}
.accordion-filter table.datepick td input {
    padding: 6px 4px;
}
.accordion-filter table.datepick img {
    padding: 2px;
    vertical-align: middle;
}

.accordion-filter .item .heading {
    /*    height: 50px;
    line-height: 50px;*/
    font-size: 17px;
    cursor: pointer;
    color: #fff;
    background-image: url('/imgs/arrow.png');
    background-repeat: no-repeat;
    background-position: right 20px top -10px;
    background-color: #FB27F7;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
}

.accordion-filter .item.open .heading,
.accordion-filter .item:last-child .heading {
    border: 0;
}

.accordion-filter .item.open .heading {
    background-position: right 20px top -103px;
}

.accordion-filter .item .content {
    display: block;
    position: relative;
    padding: 15px;
    font-size: 14px;
    background-color: #f1f1f1;
    border: 1px solid #f8f8f8;
}

.accordion-filter #DropdownLetters {
    width: 180px;
    padding: 6px 4px;
    font-family: inherit;
}

#btnFilter {
    /*    position: absolute;
    right: 20px;
    bottom: 25px;
    font-size: 16px;
    font-family: inherit;*/
}

/**********************************/
/* End Filter Product List styles */
/**********************************/


/**************************/
/* Radiobuttonlist styles */
/**************************/

span.radiobuttonlist {

}

span.radiobuttonlist input {
 margin: 10px 0 0 2px;
 padding: 4px 0 4px 0;
}

span.radiobuttonlist label {
 margin: 10px 0 0 0;
 padding: 4px 4px 2px 0;
}

/******************************/
/* End Radiobuttonlist styles */
/******************************/


ul.featured_categories_reorder {
 margin: 2em 0 1em 136px;
 list-style: none;
}

ul.featured_categories_reorder li:first-child {
 border-top: 1px solid rgba(0, 0, 0, 0.30);
}

ul.featured_categories_reorder li {
 border-bottom: 1px solid rgba(0, 0, 0, 0.30);
}

ul.featured_categories_reorder li span.cat_image {
 display: inline-block;
 width: 58px;
 vertical-align: middle;
}

ul.featured_categories_reorder li span.cat_image img {
 width: 100%;
 height: auto;
}

ul.featured_categories_reorder #ButtonUp, ul.featured_categories_reorder #ButtonDown {
 display: inline-block;
}


/**************************************
 These change the asp.net ajax Combobox
**************************************/

.combobox .ajax__combobox_inputcontainer {
 float: left;
}

.combobox .ajax__combobox_buttoncontainer {
 width: 70px;
}

.combobox .ajax__combobox_inputcontainer td {
 width: 20px;
 padding: 1px 0 0px 0;
 text-align: left;
 font-family: Arial;
}

.combobox .ajax__combobox_textboxcontainer input {
 width: 200px;
 margin: 0;
 padding: 0;
}

.combobox .ajax__combobox_itemlist {
 font-size: 12px;
 font-family: Arial;
 color: Navy;
}

/* end of combobox styles */

.textbox_bak {
 width: 200px;
 margin: 2px 0 0 0;
 padding: 0px 0 0 0;
}

/* help images which when clicked display help */
.help {
    display: inline-block;
    clear: both;
    margin: 0;
    padding: 4px 6px 0 8px;
    vertical-align: top;
    cursor: help;
}

.help-icon {
 margin-right: 0.3%;
 vertical-align: middle;
}

.parent {
/* slightly changed to get image to vertically align  */
 padding: 8px 0 0 8px;
}

/* end of help images */

/* preview images of product and category thumbnails */
.preview {
 float: left;
 margin: 0 0 0 0;
 border: 0px solid red;
}

.preview_scroll {
 width: 700px;
 width: 98%;
 max-width: 700px;
 height: 185px;
 margin: 2px auto;
 overflow: auto;
 white-space: nowrap;
}

.image_wrap {
 position: relative;
 white-space: nowrap;
 display: inline-block;
 border:1px solid silver;
}

.delete {
 position: absolute;
 top: 10px;
 left: 10px;
}

.rotate {
 position: absolute;
 top: 10px;
 left: 28px;
}

.image_wrap .left {
/* border-width: 0px;*/
 position: absolute;
 right: 22px;
 bottom: 10px;
}

.image_wrap .right {
/* border-width: 0px;*/
 position: absolute;
 right: 2px;
 bottom: 10px;
}

/* applied to anything that needs to be cleared */
.clear {
 clear: both;
}

/********************************************
 information panel (in slidemenu) to
 tell user the result of actions they take
 e.g. if a product was moved in treeview
 *******************************************/
div#infopanel {
 width: 196px;
 min-height: 65px;
 margin: 0;
 padding: 2px 1px 1px 2px;
 font-size: 12px;
 line-height: 140%;
 background-color: #F5F5DC;
 color: Green;
}

div#infopanel span.info {
 display: block;
 margin: 0;
 padding: 0px 1px 1px 2px;
 font-size: 10px;
}

div#infopanel span.tinybold {
 margin: 0 0 0 0;
 padding: 0 0 0 7px;
 font-size: 10px;
 font-weight: bold;
 color: #DEB887;
}

/****************************************
 help information panel (in slidemenu)
 to give user quick information about
 what they need to input
*****************************************/
h4.quickhelp, div#helppanel {
    display: block;
    
}

div#helppanel {
    width: auto;
    min-height: 85px;
    margin: 2px 0 6px 0;
    padding: 2px 1px 1px 2px;
    color: #000;
    background-color: #e8e8e8;
}

div#helppanel span.quickhelp {
 display: block;
 margin: 0;
 padding: 0px 1px 1px 2px;
 font-family: Verdana;
 line-height: 120%;
 font-size: 1.1em;
}

@media screen and (min-width: 1450px) {
    .accordion h4.quickhelp {
        /*position: fixed;
        top: 70px;
        right: 255px;
        background-color: transparent;
        border: none;
        z-index: 9;*/
    }

    h4.quickhelp img {
        /*display: none;*/
    }    

    h4.quickhelp a {
        background-color: transparent;
        color: black;
        font-weight: normal;
    }

    div#helppanel {
        /*  position: fixed;
        top: 90px;
        right: 10px;
        background-color: #f9f6f6;
        width: 300px;
        padding: 10px 10px;
        border: 1px #efefef solid;
        z-index: 9;*/
    }
}


/* EO Editor for short descriptions */
.short {
 margin: 6px 0 0 145px;
 padding: 0;
 display: block;
 border: 1px solid #DCDCDC;
}

/* EO Editor for long descriptions */
.long {
 clear: both;
 width: 100%;
 margin: 0px 0 0 0px;
 padding: 0;
 border: 1px solid #DCDCDC;
}

/*
 Labels on line 37 have settings:
 margin: 2px 0 2px 0;
 padding: 5px 2px 0 0;
*/

input.textbox_bak {
 font-size: 12px;
 color: Black;
 margin: 8px 0px 3px 0;
 padding: 2px 0 2px 0;
 background-color: #f0f0f0;
}

input.watermark, textarea.watermark {
 width: 18.1em;
 font-size: 14px;
 margin: 4px 0 4px 0;
 padding: 2px 0 3px 1px;
 color: Silver;
 background-color: #f0f0f0;
}

/* file upload boxes */
input.upload {
 width: 300px;
 margin: 4px 0 8px 0;
 padding: 2px 2px 2px 2px;
}

input.p2wbutton {
    padding: 0.8% 3.8% 0.8% 3.8%;
    background: #202685;
    background-image: linear-gradient(to bottom, #5d81c7, #2d4e83);
    border-radius: 8px;
    border-style: none;
    color: White;
    cursor: pointer;
}

.accordion-button {
    background: #8d8d8d;
    border-style: none;
    padding: 6px;
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background-image: url('/imgs/arrow.png');
    background-repeat: no-repeat;
    background-position: right 20px top -105px;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
}

input.changebutton {
 margin: 0px 0 0 10px;
 padding: 0;
 color: Black;
}

/* Disabled controls after adding a new category these display what was entered */
input.disabled {
 width: 200px;
 margin: 4px 0 2px 0px;
 padding: 1px 2px 0 0;
 border-width: 0px;
}

textarea.disabled {
 width: 500px;
 height: 100px;
 margin: 4px 0 2px 0px;
 padding: 1px 2px 0 0;
 border-width: 0px;
}

div#ReadOnlyShortDescription {
 width: 520px;
 height: 100px;
 margin-top: 7px;
}

div#ReadOnlyLongDescription {
 width: 520px;
 margin-top: 22px;
}

/* End of Disabled Controls */

.p2n-button.button-disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/****************
 Suppliers table
****************/

table#suppliers {
 text-align: left;
 border-collapse: collapse;
 border:1px solid silver;
}

table#suppliers th {
    padding: 2px;
    background-color: #e8e8e8;
}

table#suppliers tr {
 background-color: #f0f0f0;
}

table#suppliers tr.altrow {
 background-color: #fefefe;
}

table#suppliers tr:hover {
 background-color: #fcfcfc;
}

table#suppliers td {
 padding: 4px 0 2px 2px;
}

table#suppliers tr.altrow td {
 color: #00008B;
}

/***********************
 End of Suppliers table
***********************/

#product {
    width: 775px;
    padding: 0 10px 0 10px;
}

@media screen and ( min-width: 1220px ) {
    table.discount-table {
        position: relative;
        width: 1100px;
    }
    #dvwDiscount td.exclude-panel {
        position: absolute;
        top: 0;
        right: 12px;
    }
}

#dvwDiscount td {
    padding: 4px 0 4px;
    border-style: none;
}

#dvwDiscount label {
    display: inline-block;
    width: 180px;
    padding: 4px 0 4px 10px;
    text-align: right;
}

#dvwDiscount td input[type=text] {
    height: 2.2em;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-indent: 8px;
    line-height: 2.2em;
}

#dvwDiscount .check-box-list label {
    text-align: left;
}

/****************************************************************
 div surrounding all controls/fieldsets on tools & options pages
*****************************************************************/
    div #options, div.options {
    width: 775px;
    padding: 0 10px 0 10px;
    border-style: none;
    background-color: inherit;
}

div#options p.spacer, div.options p.spacer {
 margin: 12px;
 padding: 0;
 font-size: 1px;
}

div#options fieldset, div.options fieldset {
max-width: initial;
}

div#options1.tab-page, #PanelCustomOptions.tab-page {
    padding: 0;
    border: 1px solid #ccc;
}
/*************************************
 End of div around tools and options
*************************************/

/***********************************
 Mailing list manager pages and tabs
************************************/

fieldset.mailman label {
 clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;
}

/****************************
 End of Mailing list manager
*****************************/

/*********************
 Tab: Webpage Options
*********************/
fieldset#pageoptions {
}

fieldset#pageoptions label {
 clear: both;
 float: none;
 display: inline-block;
 width: 210px;
 vertical-align: middle;
}

fieldset#pageoptions input[type="checkbox"] {
 position: relative;
 display: inline-block;
 top: 4px;
 margin-right: 19px;
}

fieldset#pageoptions select {
 position: relative;
 display: inline-block;
 top: 2px;
}

fieldset#pageoptions input[type="text"] {
 position: relative;
 display: inline-block;
 top: 2px;
}

fieldset#pageoptions img {
 position: relative;
 top: 4px;
}
/***********************
 End of Webpage Options
************************/

/*
    08-Feb-2020
*/

fieldset .input-row label {
    display: inline-block;
    width: 200px;
    text-align: right;
}

.input-row label {
    display: inline-block;
    width: 140px;
    text-align: right;
}

.input-row input[type=datetime-local] {
    height: 2.4em;
    padding: 0 10px 0 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-indent: 10px;
    line-height: 2.4em;
}


/********************
 Company Information
*********************/

fieldset#company-info input[type=text] {
/* margin-top: 10px;*/
}

/***************************
 End of Company Information
****************************/


/**************************
 Tab: Uploading and Backup
**************************/
fieldset#upload {
}

textarea {
    padding: 0 0 0 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 2.4em;
    vertical-align: middle;
}

input[type="checkbox"] {
    position: relative;
    display: inline-block;
    top: 2px;
    margin: 4px 0 0 6px;
    scale: 1.25;
}

fieldset#upload select {
 position: relative;
 display: inline-block;
 top: 2px;
}

/* 08-Feb-2020 inserted these */
fieldset input[type="email"],
fieldset input[type="text"],
fieldset input[type="password"],
fieldset input[type="number"],
fieldset input[type="tel"],
fieldset#upload input[type="text"] {
    position: relative;
    display: inline-block;
    top: 2px;
    height: 2.4em;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-indent: 10px;
    line-height: 2.4em;
}

.input-row input[type="number"] {
    border: 1px solid #ccc;
    border-radius: 5px;
    text-indent: 10px;
    line-height: 2.4em;
}

.input-row input[type="url"] {
    position: relative;
    display: inline-block;
    top: 2px;
    width: 680px;
    height: 2.4em;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-indent: 10px;
    line-height: 2.4em;
}

.input-row select {
    width: 190px;
    height: 2.4em;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-indent: 5px;
    line-height: 2.4em;
}

fieldset#upload img {
    position: relative;
    top: 4px;
}
/****************************
 End of Uploading and Backup
*****************************/

/*******************
 Tab: Smarter Stats
********************/
fieldset#smarterstats {
}

fieldset#smarterstats label {
 clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;
}

fieldset#smarterstats select {
 position: relative;
 display: inline-block;
 top: 2px;
}

fieldset#smarterstats input[type="text"] {
 position: relative;
 display: inline-block;
 top: 2px;
}

fieldset#smarterstats img {
 position: relative;
 top: 4px;
}

/* aligns EO datepicker control to right of label */
fieldset#smarterstats span.picker {
 position: relative;
 display: inline-block;
 top: 8px;
}

/* table to display stats from web service */
fieldset#smarterstats table.stats {
 float: left;
 min-width: 170px;
 margin: 2px;
 padding: 1px;
 background-color: #EEE0E5;
 border: 2px solid #8B8386;
}

fieldset#smarterstats .spanlabel {
 clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;
 text-align: right;
 color: Navy;
}

fieldset#smarterstats .inputlabel {
 clear: both;
 float: none;
 display: inline-block;
 width: 480px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;
 text-align: left;
 color: Black;
}

/*********************
 End of Smarter Stats
**********************/

/***********************
 Uptime robot statistics
************************/

fieldset#uptime {
 border-color: #D8D8D8;
 border-width: 0.1em;
}

fieldset#uptime span {

}

/* current status text i.e. up or down */
fieldset#uptime div.current p {
 color: #151515;
}

 /* colour to represent Up */
fieldset#uptime .up {
 color: #57A957;
}

 /* colour to represent Down */
fieldset#uptime .down {
 color: #db6464;
}

/* current status icon */
fieldset#uptime span.current_icon {
 font-size: 4.0em;
}

/* current status text i.e. up or down */
fieldset#uptime span.current_text {
 font-size: 3.0em;
}

/* past status icon */
fieldset#uptime span.past_icon {
 margin-right: 0px;
 font-size: 3.0em;
 color: #57A957; /* colour to represent Up */
}

/* past status value (a percentage) */
fieldset#uptime span.past_value {
 margin-right: 6px;
 font-size: 2.0em;
 color: #57A957; /* colour to represent Up */
}

/* past status time e.g. 7 days */
fieldset#uptime span.past_text {
 padding-bottom: 4px;
 font-size: 2.0em;
 color: #57A957; /* colour to represent Up */
}

/*****************
 End Uptime Robot
******************/

/*********************
 Tab: Ecommerce Setup
**********************/
fieldset#ecommsetup label {
/* clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;*/
}

fieldset#ecommsetup input[type="checkbox"] {
 position: relative;
 display: inline-block;
 top: 4px;
 margin-right: 0px;
}

fieldset#ecommsetup select {
 position: relative;
 display: inline-block;
 top: 2px;
}

fieldset#ecommsetup input[type="text"] {
 position: relative;
 display: inline-block;
 top: 2px;
}

fieldset#ecommsetup img {
 position: relative;
 top: 4px;
}
/***********************
 End of Ecommerce Setup
************************/

/*************************
 Tab: Stock Control Setup
**************************/
fieldset#stock label {
/* clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;*/
}

fieldset#stock input[type="checkbox"] {
 position: relative;
 display: inline-block;
 top: 4px;
 margin-right: 0px;
}

fieldset#ecommsetup select {
 position: relative;
 display: inline-block;
 top: 2px;
}

fieldset#stock input[type="text"] {
 position: relative;
 display: inline-block;
 top: 2px;
}

fieldset#stock img {
 position: relative;
 top: 4px;
}
/***************************
 End of Stock Control Setup
****************************/

/**************************
 Tab: Order Number Options
***************************/
fieldset#ordernum label {
/* clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;*/
}

fieldset#ordernum input[type="checkbox"] {
 position: relative;
 display: inline-block;
 top: 4px;
 margin-right: 0px;
}

fieldset#ordernum select {
 position: relative;
 display: inline-block;
 top: 2px;
}

fieldset#ordernum input[type="text"] {
 position: relative;
 display: inline-block;
 top: 2px;
}

fieldset#ordernum img {
 position: relative;
 top: 4px;
}
/****************************
 End of Order Number Options
*****************************/

/*******************
 Tab: Postage Zones
********************/
fieldset#postzones label {
 clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
text-align: right;
 vertical-align: middle;
}

fieldset#postzones input[type="checkbox"] {
 position: relative;
 display: inline-block;
 top: 4px;
 margin-right: 0px;
}

fieldset#postzones img {
 position: relative;
 top: 4px;
}
/*********************
 End of Postage Zones
**********************/

/*************************
 Tab: Postage Calculation
**************************/
fieldset#postcalc label {
 clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 text-align: right;
 vertical-align: middle;
}

fieldset#postcalc input[type="radio"] {
 position: relative;
 display: inline-block;
 top: 2px;
}
/***************************
 End of Postage Calculation
****************************/

/**********************
 Tab: Payment Gateways
***********************/
fieldset#gateways label {
 clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 vertical-align: middle;
 text-align: left;
}

fieldset#gateways input[type="checkbox"] {
 position: relative;
 display: inline-block;
 top: 4px;
/* margin-right: 0px;*/
}
/************************
 End of Payment Gateways
*************************/

/*********************
 Tab: Payment Gateway
**********************/
fieldset.gateway label {
/* clear: both;
 float: none;
 display: inline-block;
 width: 140px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;*/
}

fieldset.gateway input[type="text"] {
 position: relative;
 display: inline-block;
 top: 2px;
}
/***********************
 End of Payment Gateway
************************/

/******************
 Tab: Ebay Options
*******************/
fieldset.ebayoptions label {
    /*
 clear: both;
 float: none;
 display: inline-block;
 width: 140px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;
*/
}

fieldset.gateway input[type="text"] {
 position: relative;
 display: inline-block;
 top: 2px;
}

.primary-ebay-category {
    vertical-align: top;
    margin-top: 5px;
}

/********************
 End of Ebay Options
*********************/
/*********************
 Search Results Table
**********************/
fieldset#search table {
    border-collapse: collapse;
    min-width: 300px;
}

fieldset#search th {
    padding: 2px 8px 2px 8px;
    text-align: left;
    background-color: #CDC8B1;
}

fieldset#search tr.odd {
 background-color: #FFEBCD;
}

fieldset#search tr.even {
 background-color: #FFFFE0;
}

fieldset#search td {
 padding: 2px 4px 2px 4px;
}
/**********************
 End of Search Results
***********************/

/*********************************
 Tab: Style Sheets List in Editor
**********************************/
fieldset#csslist label {
 clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;
}

fieldset#csslist input[type="radio"] {
 position: relative;
 display: inline-block;
 top: 4px;
 margin-right: 0px;
}

fieldset#csslist img {
 position: relative;
 top: 4px;
}
/*************************
 End of Style Sheets List
**************************/

/***********************************
 Tab: Template Files List in Editor
************************************/
fieldset#templatelist label {
 clear: both;
 float: none;
 display: inline-block;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 0;
 border: 1px solid #D3D3D3;
 background-color: #F8F8FF;
 vertical-align: middle;
}

fieldset#templatelist input[type="radio"] {
 position: relative;
 display: inline-block;
 top: 4px;
 margin-right: 0px;
}

fieldset#templatelist img {
 position: relative;
 top: 4px;
}
/***************************
 End of Template Files List
****************************/


/* Essential Objects Grid */

.eogrid {
 float: left;
 width: 100%;
 margin: 0 0 5px 2px;
 padding: 1px;
}


/*
 The two list boxes side-by-side with two buttons so product options can be moved from one list to the other on the product options page when editing a product.
*/

div#duallist {
 display: flex;
 width: 100%;
 margin-top: 2%;
}

div#duallist .left {
 position: relative;
 width: 40%;
}

div#duallist .centre {
 width: 20%;
 text-align: center;
 align-self: center;
}

div#duallist .right {
 width: 40%;
}
div#duallist label {
 display: block;
}
div#duallist select {
 width: 100%;
}
/*
 Dual list on edit product page
*/
#options #PanelAdvancedOptions fieldset {
 margin-left: 0px;
 padding-left: 0px;
}

#options #PanelAdvancedOptions h4 {
    margin: 20px 0 0 0;
}

/****************
    Reorder List
*****************/

.dragHandle {
	background-color: #ececec;
	cursor: move;
	border: outset thin white;
	font-size: 1.2rem;
}

.callbackStyle {
 border:thin blue inset;		
}

.callbackStyle table {
 background-color:#5377A9;	
 color:Black;
}

.reorderListDemo li {
 width: 60%;
 list-style:none;
 margin: 0px;
 padding: 4px 0 4px 0;
 color:#000;
}

.dragVisualContainer li  {
 list-style:none;
 color:#F00;
color: Green;
}

.reorderListDemo li a {

}
.reorderListDemo li a img {
    vertical-align: middle;
}

.reorderCue {
 border:dashed thin black;
 width:100%;
 height:25px;
}

.itemArea {
 display: flex;
 align-items: center;
 flex-direction: row;
 justify-content: space-evenly;
 margin-left: 5px;
 background-color: #fefefe;
 border: 1px solid #ccc;
 border-radius: 4px;
}

.itemArea span {

}

span.valuetext {
 float: left;   /* float required for width to work */
 width: 120px;
}

.valuetext {
/* float: left;   /* float required for width to work */
 width: 120px;
}

#ReOrderListCustomOptionValues input[type=text] {
font-size: 18px;
line-height: 2.4em;
height: 2.4em;
padding: 0 0 0 4px;
    border: 1px solid #ccc;
    border-radius: 5px;
}


/*
 datalist table to create options
*/
table.options {
 margin: 0;
 border-collapse: collapse;
}
table.options th {
 padding: 4px 0 4px 2px;
 text-align: center;
}
table.options th img {
 margin: 0;
 padding: 0;
}
table.options th span {
 margin: 2px 8px 0 0px;
 padding: 0;
}
table.options tr {
	background-color: #fefefe;
	border: 1px solid #ccc;
	border-radius: 4px;
}
table.options td {
    padding: 8px;
}
table.options td:nth-child(2) {
    width: 160px;
}

#DropDownListCustomOptionValues, #DropDownListOptionValues, #DropDownListControlType, #DropDownListPriceOperand {
    display: inline-block;
    min-width: 150px;
    margin: 0 0 5px 0;
    padding: 4px;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    vertical-align: middle;
}
#DropDownListPriceOperand {
    min-width: 55px;
}

#ReOrderListOptionValues {

}

#ReOrderListOptionValues input[type=text] {
	margin: 0 4px 5px 4px;
	padding: 4px;
	font-size: 0.9rem;
	border: 1px solid #ccc;
	border-radius: 5px;
}

#ReOrderListOptionValues .insert_option_value {
    display: flex;
    align-items: center;
    margin-left: 5px;
    padding: 8px;
    background-color: #fefefe;
}

.insert-new-option-multi-upload {
    display: flex;
}

.select-upload-image {
    cursor: pointer;
    margin-left: 10px;
}
.insert-new-option-multi-upload #dvPreviewPanel {
	position: relative;
	margin: 0 8px 0 8px;
	padding: 2px;
}
.hidden-upload-input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    opacity: 0;
}

/*
 table to enter the very first product option value
*/

table.firstoption {

    margin: 0 0 10px 20px;
    border-collapse: collapse;
    background-color: #fefefe;
    border: 1px solid #ccc;
}

table.firstoption tr {

}

table.firstoption th {
 padding: 4px 4px 0 20px;
 white-space: nowrap;
}

table.firstoption th img {
 margin: 0;
 padding: 0;
}

table.firstoption th span {
 margin: 2px 8px 0 0px;
 padding: 0;
}

table.firstoption td {
 padding: 4px 4px 0 20px;
 text-align: center;
}

/*
 table to enter new postage subzones
*/
table.addnewsubzone {
 margin: 0 0 10px 142px;
 border-collapse: collapse;
 background-color: #E4E4e4;
}

table.addnewsubzone select {
    display: inline-block;
    min-width: 150px;
    margin: 0 0 5px 0;
    padding: 4px;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    vertical-align: middle;
}

table.addnewsubzone td {
    padding: 10px;
}


/**********************************
 Change password / New user tables
**********************************/
table#changepwd, table#newuser {
 margin: 0px 0 10px 40px;
 border-collapse: collapse;
 border: 1px solid silver;
}

table#changepwd td, table#newuser td {
 border: 1px solid silver;
}

table#changepwd td label, table#newuser td label {
 width: 162px;
 margin: 0;
 padding: 4px 2px 4px 2px;
 color: Black;
 background-color: inherit;
 text-align:left;
}

table#changepwd input.btn {
 margin: 1px 0 4px 118px;
}
/*****************************
 End of change password table
*****************************/

/********************************
 Account information detailsview
********************************/
table.account {
 margin: 0 0 20px 40px;
 border-collapse: collapse;
 border: 1px solid silver;
}

table.account tr {

}

table.account td.label {
 width: 138px;
 margin: 0;
 padding: 4px 2px 4px 2px;
 color: Black;
 background-color: #F0FFFF;
}

table.account input.btn {
 margin: 12px 0 8px 144px;
}

/***************************
 End of Account information
***************************/

/**********************
 Standing Order Button
***********************/

input.soform {
 margin: 0 0 10px 200px;
}

/**********************
 End of Standing Order
***********************/

/**************************
 List of all user accounts
**************************/
table.userlist {
 width: 68%;
 margin: 0 0 10px 40px;
 border-collapse: collapse;
 background-color: #DCDCDC;
 border: 1px solid silver;
}

table.userlist th {
 padding: 4px;
 text-align: left;
 background-color: #B9C9FE;
 font-family: Lucida Sans;
 font-size: 12px;
}

table.userlist tr {

}

table.userlist tr.odd {
 background-color: #E8EDFF;
}

table.userlist tr:hover {
 background-color: #D0DAFD;
}

table.userlist td {
 padding: 2px 0 2px 4px;
 font-family: Lucida Sans;
 font-size: 11px;
 border-top: 1px solid Grey;
}

table.userlist td span.label {
 text-align: left;
}

table.userlist td a {
 color: Navy;
 font-size: 11px;
 text-decoration: none;
}

table.userlist td img.isonline {
 width: 16px;
 margin: 0 0 0 16px;
}

table.userlist td img.lockedout {
 width: 16px;
 margin: 0 0 0 14px;
}

/*********************************
 End of list of all user accounts
*********************************/

/*update all checkbox on company information*/
.update-all {
     display:inline-block;
}
.update-all-checkbox {
    display: inline-block;
    margin-left: 20px;
}
.update-all-checkbox label {
    margin-right: 6px;
    vertical-align: middle;
}


/*********************************
 Update different user password
*********************************/
fieldset#updateuser {
 margin: 10px 0 4px auto;
}

fieldset#updateuser label {
 width: 138px;
 margin: 0 0 0 40px;
 padding: 4px 2px 4px 2px;
 color: Black;
 background-color: #F0FFFF;
 text-align:left;
 border: 1px solid Silver;
}

fieldset#updateuser input[type="submit"] {
 margin: 4px 0 4px 190px;
}


/***********************************
 End Update different user password
***********************************/

/*
 View Order
*/
fieldset#vieworder {

}

fieldset#vieworder span.label {
 float: left;
 width: 180px;
 margin: 5px 2px 5px 0px;
 padding: 3px 8px 3px 0;
 vertical-align: middle;
 text-align: right;
}

fieldset#vieworder span.value {
 float: left;
 width: 280px;
 margin: 5px 2px 5px 0px;
 padding: 3px 2px 3px 3px;
 vertical-align: middle;
}

fieldset#vieworder table#lineitems {
 width: 72%;
 border-collapse: collapse;
 background-color: #FBFBFB;
}

fieldset#vieworder table#lineitems th {
 text-align: left;
}

fieldset#vieworder table#lineitems tr {
 border-bottom: 1px solid #ededed;
}

fieldset#vieworder div.address {
 display: inline-block;
 width: 300px;
}
/*
 End of View Order
*/

fieldset#vieworder table#status {
 width: 72%;
 border-collapse: collapse;
 background-color: #FBFBFB;
}
fieldset#vieworder table#status th {
 text-align: left;
}
fieldset#vieworder table#status tr {
 border-bottom: 1px solid #ededed;
}




table.paged-reviews {
    border-collapse: collapse;
    background-color: #fff;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
table.paged-reviews th {
    padding: 3px 8px 3px 8px;
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
}
table.paged-reviews tr:nth-child(2n) {
    background-color: rgba(0, 0, 0, 0.05);
}
table.paged-reviews tr:hover {
    background-color: rgba(251, 39, 247, 0.39);
    cursor: pointer;
}
table.paged-reviews td {
    padding: 3px 8px 3px 8px;
    border: 1px solid rgba(0,0,0,0.05);
}
/* rating and status columns */
    table .paged-reviews td:nth-child(5), table.paged-reviews td:nth-child(6) {
    text-align: center;
}
table.paged-reviews img {
    width: 26px;
    cursor: pointer;
}

.add-new-contact-popup {
    max-width: 450px;
    margin: 0 auto;
    padding: 40px 20px 10px 20px;
    background-color: #ffffff;
}

a.open-add-new-contact-popup {
    position: absolute;
    right: 20px;
    top: 8px;
    padding: 0.3% 0.6% 0.4% 0.6%;
    vertical-align: middle;
}

#pager {
    padding: 3px 8px 3px 8px;
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
}

fieldset#contact-form-settings input[type=text], fieldset#contact-form-settings input[type=password], fieldset#contact-form-settings textarea {
/* width: 34%;
 margin-top: 8px;
 margin-left: 4px;*/
}

fieldset#contact-form-settings input[type=checkbox] {
 margin-top: 14px;
 margin-left: 4px;
}


/* Domain name search page */
#TextBoxDomainName {
	line-height: 2.4em;
	width: 380px;
	height: 2.4em;
	margin: 0;
	font-size: 14pt;
	outline: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-indent: 20px;
}

.domain-register-customer-info {
    max-width: 380px;
}

#PanelUser input.textbox {
 margin-top: 8px;
}

#PanelBuyButton {
 max-width: 400px;
 padding-top: 1%;
 text-align: center;
}

@media screen and ( min-width: 800px ) {
}

#PlaceHolderPage h3 {
    background-color: #8d8d8d;
}

@media screen and ( max-width: 880px ) {
    #pnlNewProduct #CategoryListPanel {
        flex-direction: column;
    }

    .accordion-filter .flexbox-justify {
        flex-direction: column;
    }

    #pnlNewProduct #fileupload {
        max-width: 69vw;
    }

    .featured-home-only .scrollpanel {
        width: 5%;
    }
}
@media screen and ( max-height: 800px ) and (max-width: 800px) {
    h2 {
        position: fixed;
        top: 82px;
        left: 0;
        right: 0;
    }
}
@media screen and ( max-height: 800px ) {
    #PanelCropitImage {
        padding-left: 0;
    }
}

@media screen and ( max-width:500px ) {
    #pnlNewProduct #fileupload {
        max-width: 59vw;
    }
}