/*
    DO NOT ADD WIDGET OR THEME SPECIFIC STYLES TO THIS FILE.  THIS FILE IS
    INTENDED ONLY TO DEFINE THE BASE LAYOUT AND RULES FOR THE WIDGET OBJECTS.

    THERE SHOULD BE NO REASON TO EVER EDIT THIS FILE UNLESS WE ADD ANOTHER
    TYPE OF OBJECT TO THE SITE.  If any of these style rules clash with your
    theme, override them in your theme skeleton, NOT HERE.

    Just as a note for developers editing the CSS later:
    any property with a `*` in front of it will only be applied
    to IE6 & IE7, while any property with a `_` in front of it
    will only be applied to IE6.

    This keeps us from having to use separate stylesheets for
    IE6 and IE7 or conditional comments in the page.
*/

/* Global Styles */
html, body {
    min-width: 100%;
    font: normal 12px/20px Arial, Helvetica, sans-serif;
    background-color: white;
    color: black;
}

a:focus, input:focus, button:focus {
    outline-style: solid;
    outline: -webkit-focus-ring-color auto 1px;
    outline-offset: 3px;
}

h3, strong {
    font-weight: bold;
}
/* End Global Styles */

/* Page Layout */
#header-background,
#main-background,
#footer-background {
    min-width: 100%;
    /*
        display: inline-block must be set on the background containers in order
        for the background image to extend beyond the visible width of the browser
        window (otherwise it will cut off the image when scrolling to the right).
    */
    display: inline-block;
    /*
        IE 6 & 7 don't support the inline-block property, but will support it
        if display:inline is set on block elements. See list of block elements
        here: http://en.wikipedia.org/wiki/HTML_element#Block_elements.

        zoom: 1 triggers hasLayout in IE.
    */
    *zoom: 1;
    *display: inline;
}

/*
    More sticky footer business
*/
#main-background {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    text-align: center;
}

/*
    The footer clear, and the negative margin-bottom on the #main-background div
    exist to make the footer of the page sticky to the bottom of the html body (or
    the bottom of the window if the body doesn't extend that far).
*/
#footer-clear {
    visibility: hidden;
    display: block;
    clear: both;
}

#content, #footer-content {
    /*
        This ensures the entire page is centered, and that the header, main,
        and footer all stack on top of each other to create the site.
    */
    margin: auto;
    clear: both;
}
/* Default setting, used when there is a main column but no side columns */
#header, #footer {
    min-width: 762px;
}

/* Single side column + main column + outside edge */
#content.has-left-column,
#footer-content.has-left-column,
#content.has-right-column,
#footer-content.has-right-column {
    min-width: 985px;
    width: 985px;
}

#header, #footer {
    width: auto;
}
/*
   Two side columns + main column (probably wont happen for a while, but hopefully
   should make life easier if we ever do get there).
*/
#content.has-left-column.has-right-column,
#footer-content.has-left-column.has-right-column {
    min-width: 1174px;
    width: 1174px;
}
#main {
    display: inline-block;
    clear: both;
}

#content {
    padding-left: 0;
    padding-right: 0;
    /* 
        Not setting a width here would cause margin: auto;
        to shift everything to the left side.  This is cleaned up by a
        javascript function built into static/js/library.js
    */
    min-width: 750px;
    text-align: left;
    display: inline-block;

    *zoom: 1;
    width: 750px;
    *display: inline;
}

/*
    The left and right sidebars are floated with a negative margin
    to fill the space left by #main's left and right padding, this
    allows the center column to expand properly with the content, and
    keeping them from affecting the main content.

    Any adjustments to the sidebar width must also modify the left
    and right padding here (The actual margin-left and margin-right
    numbers should be larger than the padding, so that the sidebar
    itself has spacing between it an the main content).
*/
#main.has-left-column {
    padding-left: 221px;
    padding-right: 12px;
}

#main.has-right-column {
    padding-right: 221px;
    padding-left: 12px;
}

#main.has-right-column.has-left-column {
    padding-right: 212px !important;
    padding-left: 221px;
}

#main > div.widget-container {
    margin-left: 0;
    margin-right: 0;
}

#main.has-left-column > div.widget-container {
    margin-left: 12px;
}

#main.has-right-column > div.widget-container {
    margin-right: 12px;
}
#main.has-left-column.has-right-column > div.widget-container {
    margin-right: 0 !important;
}

aside.sidebar {
    /*
        width for each sidebar
    */
    width: 209px;
}

aside.sidebar > div.widget-container {
    margin-left: 0;
    margin-right: 0;
}

aside.left-sidebar {
    margin-left: -209px;
    clear: left;
    float: left;
}

aside.right-sidebar {
    margin-right: -209px;
    clear: right;
    float: right;
}
#main.has-left-column.has-right-column > aside.right-sidebar {
    margin-right: -200px;
    clear: right;
    float: right;
}
aside.sidebar div.widget-container {
    /*
        Widgets in the sidebar should not be floating, the way that
        widgets in the #main column should, instead, they should be
        stacked on top of one another.
    */
    float: none;
    clear: both;
    display: block;
}

.left {
    float: left;
}

.right {
    float: right;
}

.hidden {
    display: none !important;
}

.fullwidth {
    min-width: 738px;
}

/* End Page Layout */

/* Base Widget Definition */
div.widget-container {
    margin-bottom: 14px;
    float: left;
    clear: none;
    display: inline-block;
    /* IE hasLayout & inline-block trigger */
    *zoom: 1;
    *display: inline;
}

div.widget {
    clear: both;
}

div.widget div.widget-container {
    /*
        Yo dawg, we heard you like widgets, so we put a widget inside
        your widget so you can widget while you widget (don't float
        widgets inside widgets, and don't give them a left and right
        margin by default, because they should already have the margin
        from their parent).
    */
    margin: 0 0 0 0;
    float: none;
    clear: both;
    display: block;
}

div.widget > div.widget-header > div.center,
div.widget > div.widget-main > div.center,
div.widget > div.widget-footer > div.center {
    /*
        Change these margins to the width of your edge pieces
    */
    margin-left: 0;
    margin-right: 0;
    position: relative;
    clear: none;
}

div.widget > div.widget-header > div.center {
    top: 0;
    bottom: 0;
}
/*
    Edge Pieces

    You should set a negative margin-left/margin-right matching the minimum
    width of these pieces, as well as setting the padding-left/padding-right
    to the minimum width (this ensures that the corner piece image is shown at all
    times, and that any additional content in the corner pieces, such as the
    previous and next buttons on the message widget does not obstruct the image).

    Note that content that extends beyond the left/right margin of div.center will
    cover the center containing div, and that the height of the corners is not taken
    into account when calculating the height of the title bar.

    This was the only way to ensure that the corner pieces would change height with
    the rest of the title bar if there was text wrapping that occurred due to a longer
    translation (without a javascript solution being used).
*/
div.widget > div.widget-header > div.center > div.left,
div.widget > div.widget-header > div.center > div.right,
div.widget > div.widget-main > div.center > div.left,
div.widget > div.widget-main > div.center > div.right,
div.widget > div.widget-footer > div.center > div.left,
div.widget > div.widget-footer > div.center > div.right {
    float: none;
    clear: none;
    position: absolute;
    top: 0;
    bottom: 0;
}

div.widget > div.widget-header > div.center > div.left,
div.widget > div.widget-main > div.center > div.left,
div.widget > div.widget-footer > div.center > div.left {
    left: 0;
    margin-left: 0;
    padding-left: 0;
}

div.widget > div.widget-header > div.center > div.right,
div.widget > div.widget-main > div.center > div.right,
div.widget > div.widget-footer > div.center > div.right {
    right: 0;
    margin-right: 0;
    padding-right: 0;
}
/* End Edge Pieces */

div.widget > div.widget-header > div.center > h3.widget-title {
    /*
        trigger hasLayout on the h3 element so that the title is the
        correct size in IE 6 & 7
    */
    *zoom: 1;
}

.justified {
  text-align: justify;
}

div.widget > div.widget-header div.widget-header-link {
    float: right;
}

div.dataTables_wrapper {
    min-height: 0 !important;
}
/* end base widget definition */

.ui-tabs {
  border: none !important;
}
.ui-tabs .ui-tabs-nav {
  padding: 0.2em 0.2em 0.0em 0.5em !important;
}

.ui-tabs .ui-tabs-nav li {
  margin-bottom: 0px !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
  padding-bottom: 0px !important;
  border: 1px solid #000 !important;
}

div.ui-widget-content {
  border: none;
}

ul.ui-widget-header {
  border: none;
  background: none;
}

.product-attributes {
  padding: 0px !important;
}

div.ItemDetail .widget-header {
  margin-bottom: 0px !important;
}

.qtip {
    font: normal 12px/20px Arial, Helvetica, sans-serif !important;
}

.banner img {
  padding: 5px 0 5px 0
}

div.banner {
  text-align: center
}

#skiptomain a {
  padding: 6px;
  color: white;
  background: #c02020;
  border: 1px solid white; 
  position: absolute;
  top: -40px;
  left: 0px;
  transition: top 1s ease-out;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#skiptomain a:focus {
  top: 0px;
  transition: top 1s ease-in;
}

#header-nav-profile > span {
    position: relative;
}

#header-nav-profile .nav-profile-submenu {
    position: absolute;
    display: none;
    z-index: 99999;
}

#header-nav-profile span:hover .nav-profile-submenu {
    display: block;
    border-radius: 0 0 3px 3px ;
    overflow: hidden;
}

#header-nav-profile span:hover .nav-profile-submenu li {
    width: 200px;
}

#header-nav-profile span:hover .nav-profile-submenu a {
    padding: 5px 10px;
    text-decoration: none;
    color: white;
    background: #786721;
    display: block;
}

#header-nav-profile span:hover .nav-profile-submenu a:hover {
    background: white;
    color: #786721;
}

div.DisplayCombo div.center {
    border: none !important;
    font: normal 11px/20px Verdana, sans-serif !important;
}

div.DisplayCombo div.center select {
    border-radius: 2px;
    padding-left: 4px;
    font: normal 11px/20px Verdana, sans-serif !important;
    overflow-y: hidden !important;
    border: 1px solid #aaa;
}

div.DisplayCombo div.center span, div.DisplayCombo div.center select {
    height: 43px !important;
}

div.DisplayCombo .widget {
    border: 0px;
    box-shadow: none;
    background-color: white;
}

div.DisplayCombo span.display-text {
    font-weight: bold;
}

.displayItemsCombo span.select2-search input,.displayItemsCombo span.select2-results ul li {
    height: 40px !important;   
}

.displayItemsCombo span.select2-results ul li span, span.select2-selection__rendered span {
    display: flex;
    align-items: center;
}

.displayItemsCombo span.select2-results ul li span div, span.select2-selection__rendered span div {
    padding-left: 10px !important;
    content-visibility: auto;
    width: 350px;
}

div.DisplayCombo span.select2-search input{
    height: 30px;
    width: 300px !important;
    padding-left: 10px !important;
    font-size: 13px !important;
}

.marker {
  background-color: yellow;
}

#select2-header-search-string-results {
    width: 50%;
}

#selectItemsOptions {
    display: none;
    width: 50%;
}

#select2-form-field-shipping-results {
    width: 100%;
}

.select2-results div {
    display: flex;
    flex-direction: row;
}


.select2-results .itemOptions {
    color: black !important;
    text-decoration: None;
}

.select2-results .itemOptionsDiv:hover {
    padding: 5px;
    background:#5897fb;
}


.select2-results .itemOptions .image {
    width: 50px;
}

.select2-results .itemOptions .information {
    margin-left: 10px;
}

.select2-results .itemOptions .title {
    font-weight: bold;
    font-size: 8pt;
}

.select2-results .itemOptions .description {
    font-size: 7pt;
    line-height: 8pt;
    overflow: hidden;
    margin-left: 5px;
}

.select2-results .itemOptions .price {
    font-weight: bold;
    font-size: 8pt;
}

.select2-selection__placeholder {
    color: #757575 !important;
    font-weight: bold !important;
}