/* 
========================================================================
HEADINGS AND BASIC FONT STYLES
========================================================================
*/
p,
td,
th,
select,
body                                    { font-family: "Poppins", Segoe UI, Arial, Helvetica, Sans-Serif, system-ui; font-weight: 300;font-style: normal; font-weight: 400; line-height: 1.3; font-size: 14px; color: #4d4d4d; padding: 0; margin: 0; }
p                                       { margin: 5px 0 10px 0; }
h1                                      { font-family: "Poppins", Segoe UI, Arial, Helvetica, Sans-Serif, system-ui; font-style: normal; font-weight: 700; letter-spacing: 1px; font-size: 150%; letter-spacing: 0; color: #000; margin: 0; padding: 25px 0 30px 0; display: block; line-height: 33px; }
h2                                      { font-family: "Poppins", Segoe UI, Arial, Helvetica, Sans-Serif, system-ui; font-style: normal;  font-weight: 700; letter-spacing: 0; line-height: 1; font-size: 120%; color: #000; margin: 5px 0 16px 0; padding: 0;  }
.h2_light_extra                         { color: #aaa; font-weight: bold; }
h3                                      { font-weight: 400; font-size: 100%; margin: 0 0 5px 0; padding: 0; }
h4,
h2.blockheader                          { font-family: "Poppins", Segoe UI, Arial, Helvetica, Sans-Serif, system-ui; font-weight: 300; font-style: normal; font-weight: 700; letter-spacing: 0; font-size: 109%; color: #000; overflow: hidden; text-align: center; padding: 0 0 0 0; }
h4:before,
h2.blockheader:before,
h4:after,
h2.blockheader:after                    { background-color: #ccc; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; }
h4:before,
h2.blockheader:before                   { right: 0.5em; margin-left: -50%; }
h4:after,
h2.blockheader:after                    { left: 0.5em; margin-right: -50%; }


h5                                      { font-family: "Poppins", Segoe UI, Arial, Helvetica, Sans-Serif, system-ui; font-weight: 700; margin: 0px 0px 5px 0px; color: #000; text-transform: uppercase; padding: 2px 2px 2px 0px; text-align: left; }
pre                                     { color: #008800 }
iframe                                  { border: none; overflow: hidden; display: inline;}
iframe body                             { padding: 5px 0 0 0;  overflow: hidden; }
.strong                                 { font-weight: bold }
.floatright                             { float: right }
ul, ol, dl                              { font-size: inherit; }

/* 
========================================================================
HYPERLINKS
========================================================================
*/
a:link,
a:visited                               { text-decoration: none; color: #333; outline: 0; }
a:hover                                 { text-decoration: none; color: #888; }
a.link2,
span.link2 a                            { padding: 2px 0; text-transform: none; font-size: 90%; font-weight: normal; letter-spacing: 1px; border-bottom: dashed 1px #000; text-decoration: none; color: #000; margin-right: 10px; border-radius: 0; }
a.link2:hover,
span.link2:hover a                      { color: #777; border-bottom: dashed 1px #777; }
/* 
========================================================================
GENERAL
========================================================================
*/
.pad_shortformat                        { padding: 20px }
div.spacer                              { clear: both }
/* Invisible elements - when we need a control to render, but not show */
.invisible                              { visibility: hidden; display: block; width: 10px; height: 8px; }
/* By default disable all borders on images */
img                                     { border: none }
/* 
========================================================================
TABLES
========================================================================
*/
table                                   { border: none; background-color: transparent; border-collapse: separate; width: 100%; max-width: 100%; }
table tr td                             { background-color: #fff; border-bottom: solid 1px #ddd; vertical-align: top; padding: 5px 10px 5px 5px; }
table tr.even,
table tr.alt,
table tr:nth-of-type(2n)                { background-color: transparent; }
table thead,
table tfoot,
table tr.headrow,
table thead tr                          { background-color: transparent; }
table tr.headrow th,
table thead tr th                       { background-color: transparent; border-bottom: solid 1px #ccc; padding: 5px 10px 4px 5px; font-weight: normal; color: #555; text-align: left; text-transform: none; font-size: 81%; letter-spacing: 1px; }
table td,
table th                                { padding: 3px }
table td strong                         { color: #000 }
table td.itemname                       { font-weight: bold }
table td.select,
table th.select                         { text-align: right }
table.filled                            { border-collapse: collapse; margin-bottom: 10px; }
table.filled td                         { color: #000; vertical-align: top; }
table tr.totalsrow td                   { background-color: transparent }
table tr.totalsrow td.total             { background-color: transparent; color: #f00; font-weight: bold; }
.nowrap                                 { white-space: nowrap }
/* 
========================================================================
DETAILS VIEW / SECTIONS
========================================================================
*/
.Kartris-DetailsView                    { width: 100% }
.Kartris-DetailsView-Data               { margin-bottom: 10px }
.Kartris-DetailsView-Data ul            { list-style-type: none; padding: 0; margin-left: 0;  }
.Kartris-DetailsView-Data ul li         { padding-top: 5px }
.Kartris-DetailsView-Name               { font-size: 90%; display: inline-block; color: #333; margin-bottom: 3px; min-width: 150px; font-weight: normal; vertical-align: top; padding-right: 10px; }
.Kartris-DetailsView-Value              { font-size: 90%; display: inline-block; width: 350px; max-width: 100%; vertical-align: top; color: #000; overflow: visible; }
.Kartris-DetailsView-Value label        { white-space: nowrap; max-width: 100%; }
/* 
========================================================================
FORM ELEMENTS
========================================================================
*/
form                                    { margin: 0; display: inline; padding: 0; }
textarea                                { min-height: 80px; max-width: 100%; }
select,
input                                   { width: 250px; max-width: 100%; }
input.longtext                          { width: 400px }
select.shorttext,
input.shorttext                         { width: 60px }
select.fullwidth,
input.fullwidth                         { width: 100% }
select:focus,
input:focus,
textarea:focus                          { color: #000; background-color: #fff; border: solid 1px #444; }
.button                                 { font-family: "Poppins", Segoe UI, Arial, Helvetica, Sans-Serif, system-ui;
    font-weight: 300;
    font-size: 85%;
    letter-spacing: 0.5px;
    width: auto;
    display: inline-block;
    font-weight: 400;
    font-size: 16px;
    background-color: #ffffff;
    background: #0081c9;
    padding: 10px 22px;
    color: #ffffff;
    border: 1px solid #0081c9;
    border-radius: 30px; }
.button:focus,
.button:hover                           { background-color: #444; color: #fff; border: solid 1px #444;  }
input.cancelbutton                      { background-color: #ddd; border-color: #bbb; color: #666; }
input.highpriority                      { }
.inputform p                            { margin: 5px 0 15px 0 }
.inputform div                          { margin-bottom: 5px; }
.inputform .submitbuttons div           { float: none }
.inputform br                           { display: block; clear: both; }
.checkbox label                         { text-transform: none; font-size: 13px; }
.checkbox input,
.radio input                            { border-style: none; background-color: transparent; display: inline-block; width: 20px; float: left; margin-right: 1px; }
label                                   { font-size: 99%; display: inline-block; letter-spacing: 0; color: #333; margin-bottom: 3px; font-weight: normal; vertical-align: top; }
.inputform .column2                     { padding: 0px; margin-left: 130px; }
.inputform .column2 label               { width: auto }
div.formdivider                         { display: block; border-top: dotted 1px #bbb; width: 100%; }
div.section                             { margin: 10px 0 10px 0 }
.submitbuttons                          { margin: 5px 0 20px 0; z-index: 2; width: 100%; }
/* We use this to override Foundation defaults */
select,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea                                { border: solid 1px #ccc; background-color: #fff; border-radius: 16px; height: auto; min-height: 20px; padding: 10px 18px!important; color: #333; box-shadow: none !important; }
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
textarea:focus                          { background-color: #fff; color: #000; border: solid 1px #333; }

/* 
========================================================================
ERRORS & VALIDATION
========================================================================
*/
span.error,
div.errortext                           { font-style: normal;
    font-size: 13px;
    display: inline-block;
    color: red;
    font-weight: 500;
    padding: 1px 5px 1px 3px;
    background-color: transparent;
    margin-left: 0px;
    border-radius: 3px;
    top: -10px !important;
    position: relative; }
.requiredfield                          { font-weight: bold }
.valsummary                             { display: block; color: red; font-weight: 500; padding: 1px 5px 1px 3px; margin-bottom: 10px;}
.valsummary ul                          { display: none; visibility: hidden; }

/* 
========================================================================
IMAGES
========================================================================
*/
.item .imageholder img					{ border-radius: 16px;}
.imageholder                            { display: block; text-align: center; max-width: 90vw; max-height: 90vw; }
.imageholder img                        { margin: 0; padding: 0; max-width: 100%; max-height: 100%; }
.imageviewer                            { text-align: center; }
.imageviewer .gallery                   { padding: 0; width: 100%; text-align: left; }
.imageviewer .gallery .scrollarea       { display: inline-block }
#frmLargeImage div                      { }
#frmLargeImage .imageviewer .gallery    { padding: 0 0 0 0; text-align: center; overflow-x: auto; overflow-y: hidden; white-space: nowrap; position: fixed; bottom: 0; width: 99%; }
.imageviewer .gallery .imageholder      { background-color: #fff; display: inline-block; float: left; margin: 1px 20px 20px 0; border: solid 1px #ccc; box-shadow: 1px 1px 6px rgba(0,0,0,0.1); margin: 0 1px 2px 1px; vertical-align: middle; height: 80px; width: 80px; overflow: visible; }
html>body .imageviewer .gallery .imageholder
										{ float: none; float: *right; /*IE7 hack */ }
.imageviewer .gallery .imageholder:hover
										{ border: solid 1px #000 }
.imageviewer .gallery .imageholder img  { vertical-align: middle; margin: 5px; }
.singleimage                            { margin: auto }
.product .promotions .singleimage       { float: left }
.largeview                              { margin: 0 0 5px 0; float: left; }
.largeview span                         { color: #000; cursor: pointer; font-weight: bold; padding: 0 0 0 0; }
.hand                                   { cursor: pointer; }

/* 
========================================================================
LIGHTBOX (FOUNDATION 'CLEARING')
v2.9 This replaces the popup we used to use
========================================================================
*/
.clearing-assembled .clearing-container                     { background: #fff; }
.clearing-assembled .clearing-container .visible-img        { background: #fff; }
.main_product_image .clearing-assembled .carousel           { }
.clearing-assembled .clearing-container .carousel           { margin-top: 10px; background: #fff; }
.clearing-assembled .clearing-container .carousel > ul      { width: auto !important; } /* centre the thumbs */
.carousel > ul li                                           { background-color: #fff; list-style: none; height: 110px; width: 110px; margin: 0 4px 20px 0; overflow: hidden; border: solid 1px #ccc; }
.clearing-assembled .clearing-container .carousel > ul li   { list-style: none; border: solid 1px #444; display: block; height: 110px; width: 110px; margin-right: 4px; overflow: hidden; }
.clearing-assembled .clearing-container .carousel > ul li:hover { border: solid 1px #000; }
.clearing-assembled .clearing-container .carousel > ul li.fix-height img
															{ height: auto; }
.versions .carousel > ul li                                 { height: 120px; width: 120px; } /* height of version images, without affecting product thumbs */
a.clearing-close                                            { font-size: 27pt; font-weight: bold; color: #000; }
.clearing-main-prev > span                                  { border-right-color: #444; }
.clearing-main-next > span                                  { border-left-color: #444; }

/* 
========================================================================
TABS AJAX CONTROL
========================================================================
*/
.ajax__tab_default .ajax__tab_header    { border-bottom: solid 1px #ccc; margin: 8px 0 0 0; font-weight: normal; height: 26px; }
.ajax__tab_default .ajax__tab_header .total
										{ font-weight: normal }
.ajax__tab_default .ajax__tab_active .ajax__tab_outer,
.ajax__tab_default .ajax__tab_header .ajax__tab_outer,
.ajax__tab_default .ajax__tab_hover .ajax__tab_outer
										{ margin-right: 3px; padding: 0 0 2px 0; }
.ajax__tab_default .ajax__tab_active .ajax__tab_inner,
.ajax__tab_default .ajax__tab_header .ajax__tab_inner,
.ajax__tab_default .ajax__tab_hover .ajax__tab_inner
										{ padding: 0; margin-left: 3px; /* offset the width of the left image */ }
.ajax__tab_tab                          { margin: 2px 3px 1px 2px; padding: 1px 3px 0 3px; font-weight: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.ajax__tab_default .ajax__tab_header .ajax__tab_inner a
										{ color: #000 }
.ajax__tab_default .ajax__tab_hover .ajax__tab_inner a
										{ color: #fff }
.ajax__tab_default .ajax__tab_active .ajax__tab_inner a
										{ color: #000 }
.ajax__tab_default .ajax__tab_hover .ajax__tab_tab strong,
.ajax__tab_default .ajax__tab_active .ajax__tab_tab strong
										{ font-weight: bold }
.ajax__tab_default .ajax__tab_body      { background-color: #fff; padding: 20px; border: solid 1px #ccc; border-top: solid 1px #fff;  }
.ajax__tab_header                       { }
.ajax__tab_outer                        { height: 24px; background-color: #ccc; border-bottom: none; color: #333; margin-top: -3px; }
.ajax__tab_hover .ajax__tab_outer       { height: 24px; background-color: #555; }
.ajax__tab_active .ajax__tab_outer      { margin-top: 0; height: 26px; border: solid 1px #ccc; background-color: #fff; border-bottom: solid 1px #fff; border-left: solid 1px #ccc; color: #000; font-weight: bold; }
#cntMain_UC_ProductView_tbcProduct_tabSample_tab .ajax__tab_outer
										{ background-color: #83a60a; border-bottom: none; color: #fff; }
#cntMain_UC_ProductView_tbcProduct_tabSample_tab.ajax__tab_active .ajax__tab_outer
										{ background-color: #fff; border-bottom: none; color: #000; }
/* 
========================================================================
ACCORDION AJAX CONTROL
========================================================================
*/
.accordionHeader,
.accordionHeaderSelected                { border-top: solid 1px #ccc; cursor: pointer; }
.accordionHeader h2,
.accordionHeaderSelected h2             { cursor: pointer; margin-bottom: 10px; padding: 3px 0 0 0; }
.accordionHeader h2:before              { content: "[+]"; color: #666; font-size: 70%; width: 25px; display: inline-block; }
.accordionHeaderSelected h2:before      { content: "-"; color: #666; font-size: 70%; width: 25px; display: inline-block; }
/* 
========================================================================
UPDATE MESSAGE ('the record was updated')
========================================================================
*/
div.updatemessage                       { position: fixed; z-index: 9999; left: calc(50% - 100px); width: 200px; border: none; background-color: #080; color: #fff; padding: 3px 10px 3px 10px; margin: 15px 0 10px 0; font-weight: bold; text-align: center; border-radius: 5px; }
/* 
========================================================================
PAGE LINKS
========================================================================
*/
.itempager                              { font-size: 120%; display: block; font-weight: normal; text-decoration: none; padding: 10px 5px 12px 0px; }
.itempager a                            { display: inline-block; padding: 2px 7px 2px 7px; font-weight: normal; margin: 0 3px 5px 0; color: #333; }
.itempager a:hover                      { color: #000; text-decoration: none; }
.itempager a.arrow                      { text-align: center }
.itempager a.currentpage                { background-color: #fff; background-image: none; color: #000; font-weight: bold; border: solid 1px #ccc; }
.itempager .previous                    { padding: 2px 7px 2px 7px }
.itempager .next                        { padding: 2px 7px 2px 7px }
.itempager a.disabled,
.itempager a.disabled:hover             { color: #999; padding: 2px 7px 2px 7px; }
/* 
========================================================================
POPUP MESSAGE
========================================================================
*/
#largeimagepopup                        { overflow-y: hidden; overflow: hidden; background-image: none; }
.popup_background                       { background-color: #fff; filter: alpha(opacity=80); opacity: 0.8; }
.popup                                  { box-shadow: rgba(0,0,0,0.3) 1px 1px 8px; background-color: #fff ; border: solid 1px #222; padding: 45px 10px 13px 10px; width: 650px; max-width: 100%; max-height: 100%; min-height: 150px; text-align: left; top: 0px; left: 0px; overflow-x: hidden; }
.popup h2                               { position: absolute; left: 10px; top: 0; padding: 10px 0 10px 0; margin: 10px 0 0 0 !important; font-size: 125%; }
.popup p                                { padding: 10px 0 0 0; margin: 0; }
.popup strong                           { color: #000 }
.popup .closebutton                     { position: absolute; right: 5px; top: 4px; text-align: center; padding: 1px 6px 1px 6px; font-size: 17pt; font-weight: bold; color: #000; }
.popup .closebutton:hover               { color: #ccc; }
.imagecolumn .popup                     { overflow-y: hidden; } /* needed in chrome to turn right hand scroll bar off */
/* 
========================================================================
AUTOCOMPLETE FLY-OUT
========================================================================
*/
.autocomplete_completionListElement     { visibility : hidden; margin : 0px!important; background-color : inherit; color : windowtext; border : buttonshadow; border-width : 1px; border-style : solid; cursor : 'default'; overflow : auto; height : 200px; text-align : left; list-style-type : none; }
.autocomplete_highlightedListItem       { background-color: #3333CC; color: #FFFFFF; padding: 1px; font-weight: bold; }
.autocomplete_listItem                  { background-color : window; color : windowtext; padding : 1px; }
/* 
========================================================================
RADIO BUTTON LIST ADAPTOR
========================================================================
*/
.Kartris-RadioButtonList ul             { margin: 0 0 0 0; padding: 0; border: 0; overflow: hidden; }
.Kartris-RadioButtonList ul li          { white-space: nowrap; list-style: none; float: none; clear: both; margin: 0; height: 20px; border: 0; }
.Kartris-RadioButtonList ul li input    { width: 25px; float: left; border: none; background: none; }
/* 
========================================================================
UPDATE PROGRESS LIGHTBOX EFFECT
========================================================================
*/
.updateprogress                         { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; position: fixed; background-color: #000; z-index: 9; filter: alpha(opacity=30); opacity: 0.3; }
.loadingimage                           { position: fixed; background-position: center; background-image: url(Images/updateprogress.gif); background-repeat: no-repeat; top: 0px; left: 0px; width: 100%; height: 100%; padding: 5px; z-index: 10; }
.smallupdateprogress                    { display: block; height: 16px; width: 16px; background-image: url(Images/updateprogress_small.gif); background-repeat: no-repeat; float: left; margin: 0 3px 0 3px; }
/* 
========================================================================
CALLOUT VALIDATOR EXTENDER POPUP EXTENDER
========================================================================
*/
.vcHighlight                            { border: solid 1px #000; background-color: #FFFACD; width: auto; }
/* 
========================================================================
PRINT BUTTON
========================================================================
*/
.squarebuttons a:visited,
.squarebuttons a:link                   { cursor: pointer; font-weight: normal; display: inline-block; height: 28px; overflow: hidden; padding: 5px 10px 15px 31px; margin: 0 1px 0 0; color: #000; background-color: #ddd; background-position: left -1px; background-repeat: no-repeat;  }
.squarebuttons a.printbutton:visited,
.squarebuttons a.printbutton:link       { background-image: url(Images/button_print.png); }
.squarebuttons input:hover,
.squarebuttons a:hover                  { background-color: #fc5; cursor: pointer; }