﻿/* For anything below fold. Mobile First. 25/11/2020 */

/* rounded stuff */
.headbtn, #content .productlist .plitem, .plitem2, #content .subcats a, #content .subcats div, #content .homeboxes, #content .contentbox, #content .homeboxes a.col, .sf-menu a, #content .productinfo #productbuy, #mainimagebox, #cookiecrumb a, #cookiecrumb span, div.smallerimage, div.opt, .accountactions a, #accountcol, .addressbloc.backbutton, input[type=text], input[type=password], select, textarea, input[type=email], button, .formblock, .col, .discountbanner, #productinbasketcount a, .carttotals, .buttons, textarea, .radiogroup label, .navbar-toggle, #account-toggle, #cart-toggle, .waiting, .cartitemblock, #articlelist a, #articlemain, .categorydescription, .addressblock { border-radius: 5px; overflow: hidden; }

input[type=text].searchbox { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
button.searchbutton{border-top-left-radius:0px; border-bottom-left-radius:0px;}

/*#region Footer */

#FooterContainer { margin: 0px auto; }
#Footer { padding: 1em; clear: both; color: #000;  background-color: #6b778c; }
#Footer a, #Footer p { color: #ccc; }
#Footer .col p.foottitle { font-size: 1.3em; padding: 10px 0px 2px; color:#fff; }

#Footer #payment { visibility: hidden; display: none; }
#Footer .col ul { margin: 0px; padding: 0px; padding-bottom: 1em; }
#Footer .col ul li { list-style: none; padding: 0.3em 0.2em; color: #fff; }
#Footer .col ul li a { white-space: nowrap; text-decoration: none; }
#Footer p.footertitle { font-weight: normal; margin: 0px;font-size: 1.3em; color: #fff; }
#Footer p { margin: 0px; padding: 5px 0px 8px; line-height:150%; }
#Footer a:hover { text-decoration: none; color: #fff; }

#Footer svg{ fill:#ccc; padding-right:0.5em;}
#Footer a:hover svg{ fill: #fff;}

/*#endregion*/

/* Search Results */
#SearchResults { /* position:absolute;*/ display: none; background-color: #fff; /* padding:0em;  text-align:left; width:20em; z-index:999; box-shadow: 10px 10px 15px 10px rgba(0, 0, 0, 0.5);*/ }
.searchitem { text-align: left; line-height: 3.5em; overflow: hidden; display: block; text-decoration: none; background-color: #fff; white-space: nowrap; margin-bottom: 0.2em; font-size: 1.1em; }
.searchimage { height: 3.5em; width: 4.5em; border: solid 0.3em #fff; box-sizing: border-box; text-align: center; display: block; margin: 1px 10px 1px 1px; float: left; background-color: #fff; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.searchitem:hover { background-color: #47a3da; color: #fff; text-decoration: none; overflow: hidden; }


/* Not optimised */
#content p.warning{ color:#fff; background:#900; padding:1em;}
#content .confirmbox{ padding:1em; box-sizing:border-box;}
#content .confirmbox h2 { padding-top: 0; margin-top:0; }
#content .confirmbox p { padding-bottom: 0; margin-bottom:0; }

#passwordvalidation {padding:0 0 1em;}
#passwordvalidation svg { fill: #999; }
#passwordvalidation svg.success, .snsuccess svg.success { fill: #009900; }
.errorbox { color: #fff; background-color: #d14141; border: solid 1px #900; padding: 0.5em 0.7em; }
.successbox { color: #fff; background-color: #47a3da; padding: 0.7em; font-weight: normal; line-height: 1.2em; font-size: 1.8em; text-align: center; margin: 0.5em 0; }


/* Checkout*/
.cartquantity, input[type="text"].cartquantity{ height:1.1em; }
.checkoutaddress{ float:left; min-width:14em; width:50%; padding:3%; border:solid 1px #ccc; box-sizing:border-box; }
#content .checkoutaddress h2{ margin:0 0 0.7em; padding:0; color:#900; }

/*region Address list*/
#content .addressblocks { position: relative; display: grid; grid-template-columns: repeat(auto-fill,minmax(15em, 1fr)); grid-gap: 1em; margin-bottom: 2em; }
#content a.addressblock { padding: 1em 1em 1em; background: #fff; width: auto; min-width: 14em; max-width: 25em; position: relative; line-height: 150%; }
#content a.addressblock:hover {  text-decoration: none; background: #004987; color:#fff; }
#content a.addressblock svg.icon { position:absolute; bottom: 1em; right: 1em; fill: #47a3db; width: 1.5em; height: 1.5em; }
#content a.addressblock:hover svg.icon { fill: #fff; }

#content .addressblock .addressdelete { fill: #900; position: absolute; top: 1em; right: 1em; }
#content .addressblock .addressdelete svg.icon { fill: #c00; color: #c00; cursor: pointer; font-size: 1.2em;}

#content #addressselectbuttons a { text-align: center; max-width:20em; }


.discountcode input{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float:left;}
.discountcode{ margin-right:80px;}
/*#endregion*/


/*#region Tables */
.StandardTable { border: 0px; width: 100%; border-collapse: collapse; padding: 2px; margin: 0px 0px 10px 0px; }
.StandardTable TD { border-bottom: solid 0px #dddddd; border-top: solid 0px #dddddd; border-width: 0px; padding: 0.5em 0.7em 0.5em; background: #fff; }
.StandardTable TR.lines TD { border-top: solid 2px #ddd; }


.StandardTable TD { vertical-align: top; border-top: solid 1px #ddd; }
.StandardTable td.notop { border-top: solid 1px #ddd; }
.StandardTable TD TD { border: 0px #dddddd solid; padding: 0px; vertical-align: middle; }
.StandardTable .Titles { font-size: 1.1em; color: #900; }
.StandardTable .Titles TH { padding: 0.5em 0.5em 0.5em 0; font-size: 1.1em; }



.StandardTable td.money, .StandardTable th.money { text-align: right; }
.StandardTable td.quantitycol, .StandardTable th.quantitycol { text-align: center; }
.StandardTable th.leftalign { text-align: left; }

.StandardTable .Titles a { color: White; }
.StandardTable .Titles a:hover { color: Black; }

.StandardTable .larger { font-size: 1.2em; }

.startable { break-inside: avoid-column;  }
.startable tr th { background-color: #fff; padding-left: 1em; }
.startable tr.Titles th { text-align: center; width: 20%; background-color: transparent; }

.startable th { vertical-align: middle !important; }
.startable tr td { text-align: center; color: #900; font-size: 1.2em; }
.startable .Titles a { color: #900; }
.startable tr td, .startable tr th { border-bottom: solid 1px #ccc; font-weight: normal; }


.ListTable tr.clickable:hover { cursor: pointer; }
.ListTable { border-width: 0px; border-color: #bbbbbb; border-style: solid; border-collapse: collapse; padding: 2px; margin: 0px; width: 100%; }
.ListTable TD { border: 1px #eee solid; padding: 0.7em; border-style: solid; background-color: White; border-left: 0px; border-right: 0px; }
.ListTable TR.Titles a { color: #eee; text-decoration: underline; }
.ListTable TR.Titles a:hover { color: White; }
.ListTable TD TD { border: 0px #dddddd solid; padding: 1px; }
.ListTable TR.Titles { color: #FFFFFF; color: #6F4488; font-size: 1.1em; }
.ListTable TR.Titles th, .ListTable TR.Titles td { padding: 0.5em 0.7em 0.5em 0.5em; font-size: 1.2em; color: #900; font-weight: normal; background-color: white; border-bottom: 2px solid #eee; }
.ListTable TR.Titles th { text-align: inherit; }
.ListTable td.money, .ListTable TR.Titles th.money { text-align: right; }

.ListTable TR:hover td { background-color: #f0f0f0; }


.ListTable TR.PagerRow TD, .ListTable TR.PagerRow:hover TD { background-color: White; }

.ListTable TR.boldrow TD { font-weight: bold !important; }

.ListTable td.tdbtn { text-align: center; padding: 0; }
#content .ListTable td.tdbtn a { color: #900; font-size: 1.2em; display: block; padding: 0.7em; white-space: nowrap; }
#content .ListTable td.tdbtn a svg{ fill: #900;}
#content .ListTable tr:hover td.tdbtn a:hover { background-color: #900; color: #fff; text-decoration: none; }
#content .ListTable tr:hover td.tdbtn a:hover svg{ fill:#fff;}

td.text-right, th.text-right { text-align: right; }
td.text-centre, th.text-centre { text-align: center; }

tr.boldrow td{ font-weight:bold;}

.paging_full_numbers a.paginate_button:hover { color: #000; background-color: #ccc; }

.paging_full_numbers a.paginate_active { background-color: #6F4488; color: White; text-decoration: none; }


.paging_full_numbers a.paginate_button:hover { color: #000; background-color: #ccc; }
.paging_full_numbers a.paginate_active { background-color: #6F4488; color: White; text-decoration: none; }
.dataTables_filter { float: left !important; padding: 0.5em 0em !important; border-bottom: solid 0 #bbb; }
.dataTables_length { float: right; padding: 10px 0 10px 10px; height: 20px; }
.dataTable { clear: both; }
.dataTables_info { clear: both; padding: 10px 10px 10px 0; }
.dataTable thead th { cursor: pointer; }
.dataTables_filter input { margin-left: 1em; }

table.dataTable thead td, table.dataTable tfoot td, table.dataTable.no-footer { border: none; }


.locked { color: #cc0000; font-weight: bold; }
.unlockinfo { color: #999; }

.overflowx { overflow-x: auto; }

/*#endregion*/

/*#region Lists*/
/* Lists */
dl { }
dl dt { float: left; clear: left; width: 30%; padding-top: 0.5em; }
dl dd { float: left; width: 50%; padding-left: 5%; padding-top: 0.5em; }
/*#endregion*/

/*#region Forms */

#postcodefind { display: block; clear: both; padding: 1em 0 1em; }

input[type="text"].postcodelookupinput { float: left !important; max-width: 45%; margin-bottom: 1em; }
input[type="text"].postcodelookupinput::placeholder { text-transform: none; }
button.postcodelookupbtn { float: left; margin-left: 1em; background-color: #47a3da; border: 1px solid #47a3da; color: #FFFFFF; cursor: pointer; max-width: 50%; }
button.postcodelookupbtn:hover { background-color: #900; }

.buttonlink { background: none; border: none; color: #47a3da; cursor: pointer; display: inline; }


.formblock h2 { clear: both; font-size:1.4em; }
.formblock h3{ font-size:1.2em; color:#900;}
/*#content .formblock a { color: #0782C1; text-decoration:underline; }*/
.formblock ul, .formblock ol{ margin-left: 2em; margin-top:0.5em; }
.formblock li { margin-bottom: 0.5em; line-height: 150%;  }
.formblock ol ol { list-style-type : lower-alpha; margin-bottom:1em}
.formblock ol ol ol { list-style-type: lower-roman; }



.read-only-box { width: auto; border: solid 0px #ddd; font-family: Arial; font-size: 1.2em; margin: 0em; padding: 0.3em 0.7em; }

.text-box, input[type="text"],input[type="email"], input[type="password"], textarea, input[type="search"], select { width: auto; border: solid 1px #ccc; font-family: Arial; font-size: 1.2em; padding: 0.4em 0.7em; }
textarea { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.text-box.multi-line { height: 6.5em; }
.tri-state { width: 6em; }
/**/

#content input[type=submit].buttons, button[type=submit].buttons, a.buttons, p.buttons, span.buttons, button[type=button].buttons { font-size: 1.5em; color: #fff; cursor: pointer; text-decoration: none; display: block; border-collapse: collapse; margin: 0px; padding: 0.4em 0.4em; line-height: normal; line-height: 1.3em; overflow: visible; background-color: #47a3db; border: none; text-align: center; text-wrap: none; user-select: none; -webkit-user-select: none; }

#content .buybox input[type=submit].buttons { font-size: 1.5em; }
#content input[type=submit].bigbutton, button[type=submit].bigbutton { width: 100%; font-size: 150%; line-height: 150%; }
.widebutton { width: 100%; }
a.secondarybutton, button[type=submit].secondarybutton, input[type=submit].secondarybutton { border: none; }
#content .smallbutton, a.smallbutton, #content input[type=submit].smallbutton { font-size: 1.1em; }
.uppercase { text-transform: uppercase; }

.placeorder { font-size: 2em; }

button[type=submit].inlinebutton, input[type=submit].inlinebutton, a.inlinebutton { font-size: 1.2em; padding: 0.4em 0.7em; line-height: 1.1em; margin-top: 0px; }
.forwardbutton, #content .forwardbutton { float: right; margin-left: 0.5em; }
.backbutton, a.backbutton { float: left; margin-right: 0.5em; }

#content input[type=submit].buttons:hover, button[type=submit].buttons:hover, button[type=button].buttons:hover, a.buttons:hover, p.buttons:hover { background-color: #900; border: 0px solid #900; color: #FFFFFF; text-decoration: none; background-image: none; }
#content a.buttons, #content a.buttons:hover { text-decoration: none; }
#content .buttons:disabled, #content input[type=submit].buttons:disabled, button[type=submit].buttons:disabled { background-color: #999; }

.error { color: #cc0000; }
.success { color: #009900; }
.dateboxes { width: 70px; }
.searchbox { width: 250px; font-size: 1.1em; border: none; }
.messagebox { padding: 1em; background: #47a3da; border-radius: 2px; color: #fff; display: block; text-decoration: none; line-height: 120%; }
.messagebox a { color: #fff; }

.waiting { padding: 0.5em 1em; border: 0px solid #bbb; color: #fff; background: #999; clear: both; float: none; display: block; }
.waiting i { font-size: 1.3em; }

input:focus,
select:focus,
textarea:focus,
button:focus { outline: none; }

.impersonating { position: absolute; top: 0; right: 0.5em; text-align: center; background-color: #47a3da; height: 6em; }
.impersonating div { color: #fff; font-size: 1.2em; padding: 1em; }

.impersonating a { width: auto !important; display: inline; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ }

input[type=number] { appearance: textfield;  }

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error { clear: both; padding: 0em 0.5em 0.3em; display: block; color: #900; font-size: 0.8em !important; line-height: 1em; }
.field-validation-valid { display: none; }
.input-validation-error { border-color: #c00 !important; /* background-color: #FFEEFF;*/ }

.buybox .input-validation-error, .buyremove .input-validation-error { border: none !important; background-color: #FFEEFF !important; }
.productddls .field-validation-error { display: none; }

#content .buyremove .buybuttonprimary { font-size: 1.4em; }
#content .buyremove.buyremovedisabled { display: none; }

.validation-summary-errors { color: #ff0000; }
.validation-summary-valid { display: none; }
.text-success { font-size: 1.5em; background-color: #b5e0a0; padding: 0.5em; }



.display-label, .editor-label { margin: 0 0 0 0; clear: both; display: block; width: 148px; padding: 5px 0px; line-height: 1.1em; }
.display-field, .editor-field { margin: 0 0 0.4em 0; position: relative;  }

.form-group { position: relative; clear: both; margin-bottom: 0.8em; }
.form-group label {clear: both; margin-bottom: 1.3em; display: block; padding: 0.5em 2% 0.5em 0; font-size: 1.2em; text-align: right; color: #888; }


 .form-group div { margin-bottom: 0em; line-height: 150%; }
.form-group div span { display: block; font-size: 1.1em; padding: 0.3em 2% 0.5em 0; }
.form-group div div { float: none; width: auto; }


.form-group div input[type='text'], .form-group div input[type='password'], .form-group div select, .form-group textarea, .form-group div input[type='email'] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; }
.form-group div select.width100, .form-group div input[type='text'].width100 { width: 100px; }

.form-group-required label { color: #000; }
.form-group-required input, .form-group-required div input[type='text'], .form-group-required textarea { }
.form-group input:focus, .form-group div input[type='text']:focus, .form-group textarea:focus { border-color: #999; }
.form-group button { width: auto; }
.form-other { display: none; }

/* Radio */
#content .radiogroup input[type="radio"] { display: none; }
#content .form-group label.radio { width: 95%; background-color: #eee; text-align: left; padding: 0.3em 0.6em; display: block; border: none; cursor: pointer; margin-bottom: 0.7em; }
#content input[type="radio"]:checked + label.radio { background-color: #47a3db; color: white; }
#content .radiogroup i { font-size: 1.5em; }

input[type="radio"] + label.radio svg.radioselected { display: none; }
input[type="radio"]:checked + label.radio svg.radiounselected { display: none; }
input[type="radio"] + label.radio svg.radiounselected { display: inline; }
input[type="radio"]:checked + label.radio svg.radioselected { display: inline; }

svg.radiounselected{ fill:#999;}


.form-group .checkbox label, .form-group .checkbox input { float: none; width: auto; display: inline; }
.checkbox input[type="checkbox"] { opacity: 0; position: absolute; }

.checkbox label { position: relative; display: inline-block; /*16px width of fake checkbox + 6px distance between fake checkbox and text*/ padding-left: 22px !important; padding-top:3px !important; cursor: pointer;  }

.checkbox label::before,
.checkbox label::after { position: absolute; content: ""; /*Needed for the line-height to take effect*/ display: inline-block; }

/*Outer box of the fake checkbox*/
.checkbox label::before { height: 16px; width: 16px; border: 1px solid #ccc; background-color: #fff; left: 0px; /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
     *to vertically center it.
     */ top: 3px; }

/*Checkmark of the fake checkbox*/
.checkbox label::after { height: 5px; width: 9px; border-left: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg); left: 4px; top: 7px; }

/*Hide the checkmark by default*/
.checkbox input[type="checkbox"] ~ label::after { content: none; }

/*Unhide on the checked state*/
.checkbox input[type="checkbox"]:checked ~ label::after { content: ""; }

/*Adding focus styles on the outer-box of the fake checkbox*/
.checkbox input[type="checkbox"]:focus ~ label::before { }


/*#region Account pages*/
.address { width: 14em; padding: 1em; border: 1px solid #8AA8CB; border-radius: 2px; float: left; margin: 0 1em 1em 0; }
#orderdetails1 { width: 45%; padding-right: 5%; float: left; }
#orderdetails2 { float: right; width: 45%; padding: 0 2.5%; }


#content #actionlistcol { padding-top: 1em; }
#content #accountcol { background-color: #fff; padding: 1em; flex: 1; order: 2; }
#content #accountcol h1 { margin: 0 0 1em; }
#content #accountcol form { max-width: 50em; margin: 1em auto; }

#content ul.accountactions { margin: 0; padding: 0; }
#content ul.accountactions li { list-style: none; margin: 0 0 1em; padding: 0; }
#content ul.accountactions li:last-child { margin: 0; }
#content ul.accountactions li a i { width: 1em; }
#content ul.accountactions li a { display: block; width: auto; min-width: 12em; background-color: #47a3da; color: #fff !important; padding: 0.5em 1em; margin: 0; font-size: 1.2em; }
#content ul.accountactions li a:hover, #content ul.accountactions li a.actionpage { color: #000; text-decoration: none !important; background-color: #47a3da; }


/*#endregion*/



.categorydescription { max-width: 100%; }



.nomed { display: none; }
.nocopy { user-select: none; -webkit-user-select:none; }
td.filetypepdf {  background: url(https://cdn.hygienedepot.co.uk/hd/pdf.gif) no-repeat center center; padding: 1px 0px 10px 24px; margin: 0px 0px 10px 0px; }


#confirm2 .form-group div {  margin-bottom:1em;}
#confirm2 .form-group label {color:#333;}


.form-group { position: relative; width: 100%;  }
.form-group label { float: none; width: auto; clear: both; margin-top: 0.2em; margin-bottom: 0.3em; display: block; padding: 0em 1% 0em 0em; font-size: 1.1em; text-align: left; }
.form-group div { float: none; margin-top: 0em; width: auto; }
.form-group div.col-md-offset-2 { margin-left: 0%; }
.form-group div input[type='text'], .form-group div input[type='password'], .form-group div select, .form-group div input[type='email'] { width: 100%; }
.form-group div select.width100 { width: 100%; }

#addresses .nosmall { display: none; }


/*#region Cart Main */
.cartgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(14em, 1fr)); grid-gap: 1em; margin-bottom: 2em; }
.cartitemblock { padding: 1em; background-color: #fff; min-width: 10em; max-width: 25em; position: relative; padding-bottom: 7em; }
.cartitemimage { display: block; width: auto; height: auto; padding: 30%; background-position: center center; background-repeat: no-repeat; background-size: contain; border: 0px solid #ddd; background-color: #fff; }
.cartiteminfo { display: block; text-align: center; font-size: 1.1em; line-height: 150%; padding-top: 1em; }
.cartitemdelete { position: absolute; top: 1em; right: 1em;  }
.cartitemdelete svg { fill: #c00; color: #c00; cursor: pointer; font-size: 1.5em; }

#productbuy .cartitemquantity { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 3fr; grid-gap: 1em; }

.cartgrid .cartitemquantity, .productlist .cartitemquantity, .specialprices .cartitemquantity { position: absolute; bottom: 1em; left: 0; right: 0; display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 3fr; grid-gap: 0.5em; }

#content .plitem .cartitemquantity .qty { border: 1px solid #47a3db !important; text-align: center; font-size: 1.4em; width: 3em; height: 1.8em; padding: 0.5em; }

.cartitemquantity .DecreaseLink, .cartitemquantity .IncreaseLink { display: block; background: #47a3db; font-size: 1.2em; width: 1em; height: 1em; padding: 0.5em; border: 1px solid #47a3db; cursor: pointer;  border-radius:5px;}
.cartitemprice { text-align: center; font-size: 1.3em; font-weight: bold; position: absolute; bottom: 3.5em; width: auto; display: block; left: 0; right: 0; }

.carttotals { background-color: #fff; padding: 1em; margin-bottom: 1em; }
.carttotal { display: block; clear: both; height: 2em; }
.carttotallabel { float: left; font-size: 1.2em; line-height: 2em; color: #666; }
.carttotalvalue { float: right; font-size: 1.2em; line-height: 2em; }

.cartbold { font-weight: bold; }

#confirm2 .form-group div { margin-bottom: 1em; }
#confirm2 .form-group label { color: #333; }
#confirm2 { background-color: #fff; padding: 1em; margin-bottom: 0em; clear: both; }
#confirm1 { margin-bottom: 0em; }
/*#endregion*/



/*#region Articles*/
#articlelist { display: grid;  margin: 0 auto; grid-template-columns: repeat(auto-fill,minmax(18em, 1fr)); grid-gap: 1em; margin-bottom: 2em; }
#articlelist.articleshome { padding: 1em; }
#articlelist a { background-color:#fff;padding-bottom:2.5em; position:relative; }
#articlelist a span.articletitle { display: block; font-size: 1.2em; padding: 0.6em 0.6em 0.6em; line-height:150%; }
#articlelist a span.articledate{  display:block; color:#999; position:absolute; bottom:1em; left:1em;}

#articlemain ol{ margin: 0 0 1em 2em; }
#articlemain ol li{ padding:0 0 0.5em 0.5em;}

#articlemain img { width: 100% !important; max-width: 500px; }
#articlemain p.articledate{color:#999; padding:0.5em 0 1em;}

#articlemain { background-color: #fff; padding: 1em; margin-bottom: 2em; }
ol.noindent { margin: 0 0 1em; padding: 0; }
#articleothers {  }

/*#endregion*/

@media screen and (min-width:600px) {
    #Footer .col { float: left; min-width: 50%; margin: 0px 20px; }
}


@media screen and (min-width:1000px) {


    #articleflex { display: flex; }
    #articlemain { flex: 0 0 60%; }
    #articleothers { padding: 0 0 1em 2em; }


    .shoppingcart { width: 75%; float: left; padding-bottom: 40px; }
    .checkoutblock { float: right; width: 22%; padding-left: 0em; text-align: center; padding-top: 0em; }

    .categorydescription { max-width: 50%; }

    #card1 { width: 45%; padding: 0 2.5%; float: right; }
    #card2 { float: left; width: 45%; padding-right: 5%; }

    /*#region Orders*/
    #twothirds { width: 65%; padding-right: 5%; float: left; }
    #onethird { float: right; width: 25%; padding: 0 2.5%; }
    /*#endregion*/

    .address-form { width: 70%; margin: 0 auto; padding-bottom: 3em; }
    #addresses .nosmall { display: inline-block; }
    #addresses td.nosmall, #addresses th.nosmall { display: table-cell; }


    .form-group div { float: left; width: 65%; }
    .form-group label { float: left; width: 33%; }

    .form-group div.col-md-offset-2 { margin-left: 34%; }

    .display-label, .editor-label { float: left; }
    .display-field, .editor-field { float: left; }

    #Footer .col { float: left; min-width: 25%; margin: 0px 20px; }

    
}

@media screen and (min-width:800px){
    #content #actionlistcol { padding-top: 0em; }
}

/*
@media (prefers-color-scheme: dark) {

    #content .white70 { background-color: #36434f; }
    #content .white50 { background-color: #36434f; }
   

}*/