/* css.css for brushoff.com */

body {
    /*background-color: white;*/
    /*color: black;*/
    margin: 0;
    /* NOTE:  Zero body margin fixed the Tiny Form Bug in Android 4.1. */
    /* Now images can be truly width 100%. */
    /* THANKS:  Extraneous padding (or margin), http://stackoverflow.com/a/18730028/673991 */
}

.type-not-handled {
    margin-top: 10px;
    text-decoration: underline;
    color: maroon;
    background-color: rgba(255,255,255, 0.5);
    /* THANKS:  Background color transparency, https://stackoverflow.com/a/10422974/673991 */
}

.type-background {
    width: 100%;
}

.background-canvas {
    position: relative;
    width: 100%;
}

table.unexpected td.key {
    background-color: #EEEEEE;
    text-align: right;
    font: small-caption;
    padding-left: 5px;
    padding-right: 5px;
}

table.unexpected td.value {
    background-color: #FFFFFF;
    border: 1px solid silver;
    font: 12px monospace;
    /* white-space: pre;   No, Because long content thwarts 100% width*/
    padding-left: 5px;
    padding-right: 5px;
}

button.active {
    background-color: white;
    border-style: inset;
}

table.meta {
    border-spacing: 0;
    border-collapse: collapse;
    padding: 2px;
    margin: 8px;
}



/* .meta .web-design  - B.O.W.D. table - WebDesign.csv contents, and Retailers, etc. */
/* .meta .meta-orders - B.O.W.O. table - database contents - Order | Leaf | Address | Sage */

.meta,
.meta-orders {
    font: small-caption;
}

table.meta th,
table.meta-orders th {
    background-color: darkgray;
    text-align: left;
    vertical-align: bottom;
    font-weight: normal;
}
table.meta-orders tr.lower-header th {
    vertical-align: top;
}
table.meta-orders th.table-name {
    letter-spacing: 0.5em;
    padding-top:    0.3em;
    padding-bottom: 0.3em;
    font-weight: bold;
    text-align: center;
}

table.meta td {
    border: 1px solid lightgray;
}

table.meta td.missing {
    background-color: gray;
}

table.meta td.none,     /* unused json fields are None */
table.meta td.empty {   /* unused csv fields are '' */
    background-color: lightgray;
}

table.meta span.control {
    color: red;
}

table.meta-orders th.table-Order    { background-color: #DDDDDD; }
table.meta-orders th.table-Leaf     { background-color: #CCDDCC; }
table.meta-orders th.table-Address  { background-color: #DDCCCC; }
table.meta-orders th.table-Sage     { background-color: #DDD8CC; }

.meta-orders .table-Order   { background-color: #FFFFFF; }
.meta-orders .table-Leaf    { background-color: #EEFFEE; }
.meta-orders .table-Address { background-color: #FFEEEE; }
.meta-orders .table-Sage    { background-color: #FFFAEE; }

table.meta-orders .empty-column,
table.meta-orders .hidden-column {
    display: none;
}
.filler-cell {
    background-color: lightgray;
    color: black;
    text-align: right;
}
table.meta-orders td.type-currency,
table.meta-orders td.type-integer,
table.meta-orders td.type-unknown {
    /* NOTE:  All the unknown columns are number-ish anyway
              (id, timestamp, leaf number, hash) */
    text-align: right;
    padding-right: 3px;
}
table.meta-orders td.type-checkbox {
    text-align: center;
}

table.meta-orders tr.order-row td {
    border-top-width: 5px;
}

table.meta-orders td.table-Address.column-Primary_Phone,
table.meta-orders td.table-Address.column-Fax,
table.meta-orders td.table-Address.column-Ext,
table.meta-orders td.table-Address.column-Primary_Email,
table.meta-orders td.table-Address.column-hash,
table.meta-orders td.table-Sage.column-reference,
table.meta-orders td.table-Sage.column-orderNumber,
table.meta-orders td.table-Leaf.column-Customer_UPS_Account,
table.meta-orders td.table-Leaf.column-Customer_UPS_Zip,
table.meta-orders td.table-Leaf.column-Customer_FedEx_Account,
table.meta-orders td.table-Leaf.column-Customer_FedEx_Zip,
table.meta-orders td.table-Leaf.column-Broker_Information,
table.meta-orders td.table-Leaf.column-Pickup_Information,
table.meta-orders td.table-Leaf.column-latitude,
table.meta-orders td.table-Leaf.column-longitude {
    word-break: break-all;
}

table.meta-orders td.table-Sage.column-transactionId {
    overflow-wrap: break-word;
    max-width: 18ch;   /* NOTE:  About enough width for 3 lines */
}

table.meta-orders td.ip-address-bob { background-color: green; color: white; }
table.meta-orders td.ip-address-bill { background-color: blue; color: white; }
table.meta-orders td.ip-address-other { background-color: white; color: maroon; }

table.meta-orders td.test-full { background-color: maroon; color: white; }
table.meta-orders td.test-empty { background-color: white; color: black }

table.meta-orders td.column-Payment                   { background-color: #DDBBFF; } /* catch-all pseudo-payments */
table.meta-orders td.column-Payment.value-error       { background-color: #FFDDDD; }
table.meta-orders td.column-Payment.value-quote       { background-color: #DDFFDD; }
table.meta-orders td.column-Payment.value-help        { background-color: #000000; color: #FFFF00; }
table.meta-orders td.column-Payment.value-invoice     { background-color: #FFFFAA; }
table.meta-orders td.column-Payment.value-sample      { background-color: #AAEEFF; }
table.meta-orders td.column-Payment.value-credit-card { background-color: #FFFFFF; }
table.meta-orders td.column-Payment.value-air7seas    { background-color: #BBDDFF; }

table.meta-orders /* th, td */.column-Summary_Total_Total    { font-weight: bold; }

table.meta-orders .flag {
    height: 1.2em;
    border: solid 0.1em silver;
}

.inputter {
    border-color: silver;
}

table.meta-orders .column-test .inputter {
    width: 3em;
}
table.meta-orders .column-date .inputter {
    width: 6em;
}
table.meta-orders .column-invoice .inputter {
    width: 4em;
}

table.web-design-csv td.id,
table.web-design-csv td.imap-id-documents-folder {
    word-break: break-all;
}

table.web-design-csv tr.dependency_disable td,
table.web-design-csv tr.dependency_database_ready td {
    opacity: 0.33;
}

table.web-design-csv td.ef-data-li-item-code {
    font-weight: bold;
}


table.globs th {
    background-color: #C0DDDD;
    text-align: right;
    padding-right: 5px;
}
table.globs td {
    background-color: #E0FFFF;
    padding-left: 5px;
}
table.globs td.doc {
    background-color: transparent;
    /* SEE:  table.meta td.doc */
}

table.retailers th {
    background-color: #DDDDC0;
}

/*table.retailers td {*/
    /*background-color: #FFFFE0;*/
/*}*/

table.retailers td.column-id,
table.retailers td.column-latitude,
table.retailers td.column-longitude,
table.retailers td[class*="column-url"] {
    word-break: break-all;
}

table.retailers tr.exclude-website td { background-color: #FFFFF0; }
table.retailers tr.include-website td { background-color: #FFFFE0; }

table.meta td.imap-code {
    white-space: pre;
    font-family: monospace;
}

table.meta td.doc {
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    padding-left: 0.5em;
}

table.tally tr:not(.head-row):hover td,
table.tally tr:not(.head-row):hover th {
    background-color: #EEEEEE;
}

/*@font-face {*/
/*    font-family: Nexa Trial;*/
/*    src: url('/static/font/myfonts/NexaRustScriptS-1/font.woff') format('woff'),*/
/*         url('/static/font/myfonts/NexaRustScriptS-1/font.woff2') format('woff2');*/
/*}*/

@font-face {
    font-family: Lithos Pro Regular;
    src: url('/static/font/LithosPro-Regular.eot'); /* IE9 Compatible Modes */
    src: url('/static/font/LithosPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/font/LithosPro-Regular.woff') format('woff'), /* Modern Browsers */
         url('/static/font/LithosPro-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/static/font/LithosPro-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: Lithos Pro Bold;
    src: url('/static/font/LithosPro-Bold.eot'); /* IE9 Compatible Modes */
    src: url('/static/font/LithosPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/font/LithosPro-Bold.woff') format('woff'), /* Modern Browsers */
         url('/static/font/LithosPro-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/static/font/LithosPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: Lithos Pro Heavy;
    src: url('/static/font/LithosPro-Black.eot'); /* IE9 Compatible Modes */
    src: url('/static/font/LithosPro-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/font/LithosPro-Black.woff') format('woff'), /* Modern Browsers */
         url('/static/font/LithosPro-Black.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/static/font/LithosPro-Black.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: Lithos Pro Light;
    src: url('/static/font/LithosPro-Light.eot'); /* IE9 Compatible Modes */
    src: url('/static/font/LithosPro-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/font/LithosPro-Light.woff') format('woff'), /* Modern Browsers */
         url('/static/font/LithosPro-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/static/font/LithosPro-Light.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: Lithos Pro Extra Light;
    src: url('/static/font/LithosPro-ExtraLight.eot'); /* IE9 Compatible Modes */
    src: url('/static/font/LithosPro-ExtraLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/font/LithosPro-ExtraLight.woff') format('woff'), /* Modern Browsers */
         url('/static/font/LithosPro-ExtraLight.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/static/font/LithosPro-ExtraLight.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* THANKS:  Web font otf, http://stackoverflow.com/a/3245319/673991 */
/* THANKS:  IE support, http://blog.fontspring.com/2011/04/best-practices-for-serving-webfonts-to-ie9/ */
/* THANKS:  IE support, http://stackoverflow.com/a/12361841/673991 */
/* KUDOS:  Jimmy Warting, https://onlinefontconverter.com/ */
/* Donated $5 on 16-Jul-16 for Online Font Converter. */

/* TODO:  Why didn't the following work??  Everything came up little squares. */
/*@font-face {*/
    /*font-family: FontAwesomePro;*/
    /*font-style: normal;*/
    /*font-weight: 400;*/
    /*src: url("/static/font/fa-regular-400.eot");*/
    /*src: url("/static/font/fa-regular-400.eot?#iefix") format("embedded-opentype"),*/
         /*url("/static/font/fa-regular-400.woff2") format("woff2"),*/
         /*url("/static/font/fa-regular-400.woff") format("woff"),*/
         /*url("/static/font/fa-regular-400.ttf") format("truetype"),*/
         /*url("/static/font/fa-regular-400.svg#fontawesome") format("svg");*/
/*}*/

.font-lithos-regular     { font-family: Lithos Pro Regular,     Verdana, sans-serif; }
.font-lithos-bold        { font-family: Lithos Pro Bold,        Verdana, sans-serif; }
.font-lithos-heavy       { font-family: Lithos Pro Heavy,       Verdana, sans-serif; }
.font-lithos-light       { font-family: Lithos Pro Light,       Verdana, sans-serif; }
.font-lithos-extra-light { font-family: Lithos Pro Extra Light, Verdana, sans-serif; }

.font-lithos-bold-selected {
    font-family: Lithos Pro Regular, Verdana, sans-serif;
}
.font-lithos-bold-selected:checked,
.font-lithos-bold-selected :checked,
.font-lithos-bold-selected :checked ~ span {
    font-family: Lithos Pro Bold, Verdana, sans-serif;
}

.font-lithos-black { color: black; }
.font-lithos-red   { color: #D00000; }
.font-lithos-blue  { color: #000080; }   /* i.e. navy */
.font-lithos-white { color: white; }
.font-lithos-green { color: #006000; }   /* i.e. dark green */
.font-lithos-gray  { color: gray; }
.font-lithos-grey  { color: gray; }
/* SEE:  grey v. gray, https://github.com/CSSLint/csslint/issues/217 */

.font-lithos-link-white a:link,
.font-lithos-link-white a:hover,
.font-lithos-link-white a:active,
.font-lithos-link-white a:visited { color: white; }

.font-lithos-link-blue a:link,
.font-lithos-link-blue a:hover,
.font-lithos-link-blue a:active,
.font-lithos-link-blue a:visited { color: blue; }

.font-lithos-link-dark-blue a:link,
.font-lithos-link-dark-blue a:hover,
.font-lithos-link-dark-blue a:active,
.font-lithos-link-dark-blue a:visited { color: #000080; }

.font-lithos-link-light-blue a:link,
.font-lithos-link-light-blue a:hover,
.font-lithos-link-light-blue a:active,
.font-lithos-link-light-blue a:visited { color: #99CCFF; }


h2 {
    font-family: Lithos, sans-serif;
    font-weight: bold;
}

/*.page-yes {*/
/*    visibility: visible;*/
/*    !*position: absolute;  <-- why did I do this again? *!*/
/*}*/

/*.page-no {*/
/*    visibility: hidden;*/
/*    !*position: absolute;*!*/
/*}*/

/*noinspection CssOverwrittenProperties*/
.product {
    /*font-family: Verdana, sans-serif;*/
    /*font-size: 13px;     !* Fallback for non-rem, non-vw browsers (IE8?) *!*/
    /*font-size: 0.7rem;   !* Fallback for UC Browser, Android 4.3-, Opera Mini (overly tweaked) *!*/
    /*font-size: 2vw;*/

    /* SEE:  Browser support for vw, http://caniuse.com/#feat=viewport-units */
    /* THANKS:  Fallback for vw, http://stackoverflow.com/a/23350603/673991 */
}

.product.line-item {
    position: relative;
    z-index: 0;
}

.product.line-item .template-box {
    position: absolute;
    /* SEE:  More style generated by BrushOffHTML.header() */
}

.product.li-image {

}

/*noinspection CssUnknownProperty*/
input, textarea {
    border: 1px solid #666666;
    /* TODO:  Let Bill configure these? */

    -webkit-border-radius: 0.3em;
       -moz-border-radius: 0.3em;
         -o-border-radius: 0.3em;
            border-radius: 0.3em;
    /* THANKS:  Rounded corner, http://stackoverflow.com/a/13657120/673991 */
}

.console {   /* Auxiliary JavaScript console, for Android. */
    position: fixed;
    bottom: 0;
    right: 0;
    width: 90%;
    height: 33%;
    z-index: 101;
}

span.skype_pnh_container {display: none !important;}
span.skype_pnh_print_container {display: inline !important;}
span.skype_pnh_print_container, span[class^="skype_pnh_print_container"] {display:inline !important;}
/* THANKS:  Disable Skype click-to-call, http://stackoverflow.com/a/3841610/673991 */

.field-wtf.field-undefined {
    border: 1px dotted #66CC66;
    color: #66CC66;
    font: menu;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

div[class^='field-entry-'].field-wtf,
div[class*=' field-entry-'].field-wtf {
    /* THANKS:  class prefix, http://stackoverflow.com/a/8588532/673991 */
    border: 1px dotted #9999FF;
    color: #9999FF;
    font: menu;
}

.field-wtf {
    border: 1px dotted #FF9999;
    color: #FF9999;
    font-family: sans-serif;
    font-size: 66%;
}

.resize-me {
    position: absolute;
    /*background: rgba(255,255,255,0.75);*/
    /* NOTE:  translucent backgrounds ran afoul of background coloration */
}
.resize-me.but-relative {
    position: relative;
}
.resize-me.but-in-rows {
    position: relative;
}
.resize-me.but-in-cells {
    position: relative;
    display: inline-block;
    vertical-align: top;
}
.row-background {
    white-space: nowrap;
}
.background-canvas.resize-me.but-relative.sticky-active {
    /* NOTE:  Uber specific rule, to override quiescent background rule(s). */

    position: sticky;
    top: 0;

    z-index: 1;
    /* NOTE:  So the header can appear ON TOP OF its dependents */
}

.row-background .fc-description {
    white-space: normal;
    /*line-height: 85%;*/
    /* NOTE: line-height controls space between multiple lines within a single freight detail description */
    margin-bottom: 0.25em;
    /* NOTE margin-bottom controls space between different freight detail descriptions */
}

.black-rectangle {
    background-color: black;
    position: absolute;
}
/* THANKS:  Rectangle, http://stackoverflow.com/a/20690459/673991 */
/* NOTE:  black-rectangle must come after resize-me, due to conflicting backgrounds */

.internal-error-message {
    color: red;
    z-index: 99;
    position: relative;
}

.warning-message {
    color: darkorange;
    z-index: 99;
    position: relative;
}

/*.widget-state-entry {*/
    /*display: none;*/
/*}*/

.widget-country-flag {
    border: 1px solid #E0E0E0;
}

.alignment-left   { text-align: left;   justify-content: flex-start; }
.alignment-center { text-align: center; justify-content: center; }
.alignment-right  { text-align: right;  justify-content: flex-end; }

.type-clickable {
    display: block;
    background: transparent;
}

.type-pdf-thumbnail {
    border-top:    1px solid #DDDDDD;
    border-right:  3px solid #BBBBBB;
    border-bottom: 3px solid #999999;
    border-left:   1px solid #BBBBBB;
    /* TODO:  Change from px to em (and divide by 15 -- see js.js IDEAL_PX_PER_EM) */
}

.video-img,
.video-object-img {
    border: none;
}

.vertical-center-2014 {
    display: block;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    /* THANKS:  Vertical centering circa 2014, http://stackoverflow.com/a/21334777/673991 */
    /* THANKS:  Also, http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
    /* NOTE:  This probably doesn't work on multiple lines. */
    /* NOTE:  Incompatible with other centering, e.g. text-align: right */
}

.vertical-center-2015 {
    display: flex;
    align-items: center;
    /* THANKS:  Vertical centering circa 2015, http://stackoverflow.com/a/34244613/673991 */
    /* NOTE:  This might work on multiple lines. */
    /* NOTE:  This flummoxes text-overflow: ellipses; -- or maybe misspelling ellipses does! (i vs e) */
}

.text-regular {
}
.text-underlined,
.text-italics-and-underlined {
    text-decoration: underline;
}
.text-italics,
.text-italics-and-underlined {
    font-style: italic;
}

.brushoff-form input[type=radio],
.brushoff-form input[type=checkbox] {
    width: 1em;
    height: 1em;
    opacity: 0.00;
}
/* NOTE:  .brushoff-form prevents these custom radio/checkbox icons from
          trying (and failing) to show up on the brushoff.com/test unit tests. */

.brushoff-form input[type=radio] + label:before,
.brushoff-form input[type=checkbox] + label:before,
.brushoff-form input[type=radio]:checked + label:before,
.brushoff-form input[type=checkbox]:checked + label:before {
    /*font-family: FontAwesome, sans-serif;*/
    margin-right: 0.33em;
    height: 0.88em;
    width: 0.88em;
    display: inline-block;
}

/*noinspection CssUnknownTarget*/
.brushoff-form input[type=radio] + label:before { content: url('/radio-inactive.svg'); }

/*noinspection CssUnknownTarget*/
.brushoff-form input[type=checkbox] + label:before { content: url('/checkbox-inactive.svg'); }

/*noinspection CssUnknownTarget*/
.brushoff-form input[type=radio]:checked + label:before { content: url('/radio-active.svg'); }

/*noinspection CssUnknownTarget*/
.brushoff-form input[type=checkbox]:checked + label:before { content: url('/checkbox-active.svg'); }

/*noinspection CssUnknownProperty*/
.brushoff-form input[type=checkbox] + label {
    /* THANKS:  double check box shouldn't select label text, https://stackoverflow.com/a/15850372/673991 */
    -webkit-user-select:none;
     -khtml-user-select:none;
       -moz-user-select:none;
         -o-user-select:none;
            user-select:none;
    vertical-align: middle;
}
/*.brushoff-form input[type=checkbox]         + label:before {  content: "\F096"; !* fa-square-o *!  }*/
/*.brushoff-form input[type=radio]:checked    + label:before {  content: "\F058"; !* fa-check-circle *!  }*/
/*.brushoff-form input[type=checkbox]:checked + label:before {  content: "\F14A"; !* fa-check-square *!  }*/
/* SEE:  Font Awesome codes, http://fontawesome.io/cheatsheet/ */

/*.brushoff-form input[type=radio]            + label:before {  content: "\F111"; !* fa-circle *!  }*/
/* NOTE:  fa-circle must be weight-normal to be an outline!  Bold is filled in!! */
/*        Or something, that doesn't work, maybe that's only for the free version!?! */

.brushoff-form input[type=radio] + label:focus,
.brushoff-form input[type=checkbox] + label:focus {
    outline: 0.2em solid black;
}

/*noinspection CssUnknownTarget*/
.brushoff-form input[type=checkbox].expander         + label:before {
    content: url('/expander-inactive.svg');
    height: 1.25em;
    width: 1.25em;
    vertical-align: middle;
    /*content: "\F0DA"; !* fa-caret-right *!*/
}
/*noinspection CssUnknownTarget*/
.brushoff-form input[type=checkbox].expander:checked + label:before {
    content: url('/expander-active.svg');
    height: 1.25em;
    width: 1.25em;
    vertical-align: middle;
    /*content: "\F0D7"; !* fa-caret-down *!*/
}

/*.brushoff-form input[type=checkbox].expander:checked + label {*/
/*    color: yellow!important;*/
/*    !* Must override the local element style attribute color from WebDesign Font Color. *!*/
/*}*/

.brushoff-form input[type=radio] {
    border-radius: 50%;
}


.template-box.resize-me {
    border: 0.15em solid transparent;
    padding-top: 0.25em;   /* Compensate for lopsided Lithos font. */
}

/*noinspection CssUnknownProperty*/
textarea.resize-me:not(.when-focus),
input.resize-me:not(.when-focus) {
    border: 0.15em inset silver;

    /*background-color: #F3F3F3;*/
    /*color: #000000;*/
    /* NOTE:  This should override font-lithos-white,
              when state name transitions from a display only field (US)
              to an entry field (international) */

    -webkit-border-radius: 0.3em;
       -moz-border-radius: 0.3em;
         -o-border-radius: 0.3em;
            border-radius: 0.3em;
    outline: none;
    /* THANKS:  No Chrome blue rectangle focus, http://stackoverflow.com/a/2943582/673991 */

    padding-top: 0.3em;
}
/* TODO:  Figure out how da eff textarea gets a LOCAL style 0.4em */

input.widget-state-entry {
    color: #000000 !important;
    /* NOTE:  This crudely overrides Bill's Font Color for the entry incarnation of the
              Computed State field.  This is only visible outside CA and US.
              0863 - sort order as of 2020.1109 */
}

input.resize-me.invalid-entry:not(.when-focus):not(:focus) {
    border-color: red;
    /*background-color: #FFDDDD;*/
}

textarea.resize-me:focus,
input.resize-me:focus {
    /*background-color: #FFFFFF;*/
    /*color: #000000;*/
    /* NOTE:  This should override font-lithos-white,
              when state name transitions from a display only field (US)
              to an entry field (international) */
    border-width: 0.25em;
    margin-top: -0.10em;
}

@keyframes todoAnimation {
    0% {
        -webkit-box-shadow: 0 0 1.0em 1.0em rgba(255,0,0,0.5);
           -moz-box-shadow: 0 0 1.0em 1.0em rgba(255,0,0,0.5);
                box-shadow: 0 0 1.0em 1.0em rgba(255,0,0,0.5);
    }
    100% {
        -webkit-box-shadow: 0 0 0.5em 0.5em rgba(255,0,0,0.0);
           -moz-box-shadow: 0 0 0.5em 0.5em rgba(255,0,0,0.0);
                box-shadow: 0 0 0.5em 0.5em rgba(255,0,0,0.0);
    }
}
.todo-highlight {
    animation-name: todoAnimation;
    animation-duration: 1.5s;   /* SEE:  Corresponding setTimeout(..., 1500) in violation_click() in js.js */
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 100;   /* So the halo (temporarily) appears above subsequent elements. */
}
/* THANKS:  Disappearing box shadow, https://stackoverflow.com/a/9197026/673991 */

[class^='todo_'],
[class*=' todo_'] {
    cursor: pointer;   /* pointing finger */
}
[class^='todo_anything'],
[class*=' todo_anything'] {
    cursor: default;   /* arrow */
}

input.input-looks-like-div,
input.input-looks-like-div.resize-me:not(.when-focus) {
    border: none;
    background: transparent;
}

textarea {
    resize: none;
    /* NOTE:  Allowing resize is bad because parent background does not resize with it. */
}

[class^='checkbox-hide-'],
[class*=' checkbox-hide-'],
[class^='radio-hide-'],
[class*=' radio-hide-'] {
    /* THANKS, class prefix wildcard, akin to .radio-hide-*,  http://stackoverflow.com/a/5110337/673991 */
    display: none;
}

.disable,
.DISABLE,
.url-hide,
.wait-hide,
.leaf-hide,
.link-hide,
.todo-hide,
.hover-hide,
.submit-hide,
.no-ups-hide,
.yes-ups-hide,
.ship-us-hide,
.ship-us48-ca-hide,
.gateway-hide,
.download-hide,
.map-mode-hide,
.no-fedex-hide,
.database_ready,
.yes-fedex-hide,
.qualified-hide,
.video-img-hide,
.quantities-hide,
.all-retail-hide,
.tiny-video-hide,
.submit-help-hide,
.bill-option-hide,
.video-popup-hide,
.bill-freight-hide,
.freight-error-hide,
.international-hide,
/*.hidden-video-object,*/
.retail-locations-hide,
.yes-either-shipper-hide,
.customs-indeterminate-hide,
.state-name-or-abbreviation-hide {
    display: none;
}
/* TODO:  Combine all the above rules into [class*='-hide'] or something */

.hidden-video-object {
    width: 1px;
    height: 1px;
}

body:not(.bob_test_enable) .bob_test {
    display: none;
}

.map-invisible {
    visibility: hidden;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
/* THANKS:  No spinners, https://css-tricks.com/snippets/css/turn-off-number-input-spinners/ */

.computed-field {
    z-index: 1;
    /*background: white;*/
}

.wait-freight {
    /* The freight-in-progress animation. */
    z-index: 2;
    /*background: white;*/
}

.computed-name {
    background: transparent;
}

.computed-rl-field {
    z-index: 1;
}
.computed-rl-button {
    z-index: 1;
    cursor: pointer;   /* pointing finger */
}

.grecaptcha-badge {
    z-index: 9;
}
.rl-location {
    display: flex;
    justify-content: space-between;
    /* THANKS:  Side-by-side within a div, https://stackoverflow.com/a/34352136/673991 */
    /* THANKS:  Side-by-side within a div, https://stackoverflow.com/a/40091606/673991 */
}
.rl-coindy {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /* THANKS:  Ellipsis requires hidden, nowrap, https://stackoverflow.com/a/17783233/673991 */
}
.rl-social {
    white-space:nowrap;
    text-align: right;
}
.rl-social-icon {
    font-size: 110%;
}
.rl-social-icon-2 {
    font-family: FontAwesome, sans-serif;
    text-decoration: none;
}
.rl-social-image-apple {
    width: 0.9em;
    height: 0.9em;
    vertical-align: baseline;
}
.rl-social-image-google {
    width: 0.88em;
    height: 1.0em;
    vertical-align: center;
}

.error-message {
    white-space: normal;
}
.error-message.vertical-center-2015 {
    display: block;
    /* NOTE:  Override vertical-center-2015 use of display: flex;  Because that flummoxes ellipsis. */
}
.qualified-dollars,
.qualified-singles,
.qualified-both {
    z-index: 2;
    background: transparent;
}

.qualified-yes {
    background-color: rgba(255,128,0,0.25);
}

.raw-request,
.raw-response,
.xav-request,
.xav-response,
.fae-request,
.fae-response,
.usps-request,
.usps-response {
    white-space: pre;
    font-family: Lucida Console, monospace;
    font-size: 0.9vw;
}
.analyzed-response,
.analyzed-xav-response,
.analyzed-fae-response,
.analyzed-usps-response {
    white-space: pre;
    font-family: Lucida Console, monospace;
    font-size: 1.25vw;
}

.clixpand-opened,
.clixpand-closed {
    cursor: pointer;   /* pointing finger */
}
.clixpand-opened::before {
    content: "\229F";   /* squared plus */
    /*content: "\23F5";   !* triangle down *!*/
}
.clixpand-closed::before {
    content: "\229E";   /* squared minus */
    /*content: "\23F5";   !* triangle right *!*/
}
.clixpand-closed~.clixpand-body {
    display: none;
}

.radio-invisible {
    display: none;
}



/*****************************************/
/**** Inside Report, freight analyses ****/
/*****************************************/

.inside-report {
    background-color: #FFEEDD;
}
.inside-report button {
    border-width: 0.10em;
}
.inside-report .case-recall-button {
    border-width: 0.10em;
}
.inside-report .case-recall-button .flag {
    height: 0.5em;
    border: inset 0.05em silver;
}

.inside-report .case-x-button {
    cursor: pointer;   /* pointing finger */
}

.inside-report .api-dollar {
    background-color: white;
    font-weight: bold;
}
.inside-report .ups-classification {
    background-color: white;
}

.inside-report .ups-disclaimer,
.inside-report .ups-alert,
.inside-report .ups-fault {
    background-color: white;
    display: inline-block;
    white-space: normal;
    width: 50%;
    vertical-align: top;
    padding: 0.5vw;
}
.inside-report .ups-disclaimer {
    border: solid 1px #CC8844;
}
.inside-report .ups-warning {
    border: solid 1px #FF8080;
}
.inside-report .ups-alert {
    border: solid 1px #FF8000;
}
.inside-report .ups-fault {
    border: solid 1px #FF80C0;
}

.inside-report .code-surcharge {
    background-color: yellow;
}

.inside-report .code-surcharge-subtype {
    background-color: #FFDD66;
}

.inside-report .description-surcharge,
.inside-report .type-surcharge {
    background-color: #FFFF80;
    color: black;
}

.inside-report .type-discount {
    background-color: #A0FFFF;
    color: black;
}

.inside-report .type-service {
    background-color: #FFA0FF;
    color: black;
}



/*****************/
/**** Patches ****/
/*****************/

.patch-report table {
    border-collapse: separate;
    border-spacing: 0;
}
.patch-report table th {
    text-decoration: underline;
}
.patch-report table th,
.patch-report table td,
.patch-report .key p {
    padding: 3px 8px;
    font-size: 1.2vw;
    font-family: Verdana, sans-serif;
    text-align: left;
}
.patch-report table,
.patch-report table th,
.patch-report table td {
    border: 1px solid silver;
}
/*noinspection CssOverwrittenProperties*/
.patch-report .new-value {
    font-weight: bold;
    white-space: pre;
    /* NOTE:  make NL behave like <br>, https://stackoverflow.com/a/39415284/673991 */
    /*white-space: pre-line;*/
}
/*noinspection CssOverwrittenProperties*/
.patch-report .old-value {
    white-space: pre;
    white-space: pre-line;
}
.patch-report .old-value-isnt {
    /* NOTE:  When there is no old value (i.e. an insertion) */
}
.patch-report .patch-todo,
.patch-report .patch-new {
    background-color: #FFFFD0;
}
.patch-report .patch-todo .column-type,
.patch-report .patch-new  .column-type {
    background-color: #FFFFA0;
}
.patch-report .patch-todo-global,
.patch-report .patch-new-global {
    background-color: #E0FFFF;
}
.patch-report .patch-todo-remove {
    background-color: white;
    font-family: "Times New Roman", serif;
    font-size: 130%;
    color: #666666;
    font-style: italic;
}
.patch-report .patch-done {
    background-color: lightgray;
}

.freight-error-message/*not used*/ {
    color: #CC0000;
}

.faux-placeholder,
.faux-placeholder.freight-error-message/*not used*/ {
    /* NOTE:  So a computed div behaves like an input. */
    color: #A9A9A9;
    /* NOTE:  Chrome placeholder is #A9A9A9 */
    /* NOTE:  Firefox placeholder is #767676 */
}

/*#retail-location-template,*/
/*#freight-charge-template,*/
/*#freight-option-template,*/
/*#sum-template,*/
/*#leaf-template*/
.invisible-template {
    display: none;
}

wbr:after { content: "\00200B"; }
/* THANKS:  <wbr> for IE11, http://stackoverflow.com/a/23759279/673991 */

.freight-option-container                        .radio-label-predendum { display: none; }
.freight-option-container.option_billing_invoice .radio-label-predendum { display: inline; }

.freight-option-container.option_billing_invoice .exclude-from-invoice { display: none; }
/* SEE:  EXCLUDE_FEDEX_SERVICES_PREPAY[] in js.js */

.freight-option-container                        .exclude-from-all-freight-methods { display: none; }
/* SEE:  EXCLUDE_FEDEX_SERVICES[] in js.js */

input[type=radio] {
    margin-top: 0;
    /* NOTE:  Helps radio label line up with text at same y coordinates. */
}

label [class^='radio-label'],
label [class*=' radio-label'] {
    /* NOTE:  Helps radio label line up with text at same y coordinates. */
    vertical-align: top;
}

.radio-label-pendendum {
    display: inline-block;   /* So we can set its width. */
}

/*.smarty-ui {*/
    /*display: none;*/
/*}*/

/*.smarty-ui .smarty-tag {*/
    /*display: none;*/
    /*!* NOTE:  Hide ALL smarty streets check marks *!*/
    /*!* TODO:  Figure a way to only hide check-marks for hidden address sections. *!*/
/*}*/

.smarty-suggestion {
    font-family: Lithos Pro Regular Lithos Pro Regular, Verdana, sans-serif;
    font-size: 80%;
}
.smarty-active-suggestion {
    background: #666666;
    color: white;
}
.smarty-no-suggestions {
    font-family: Lithos Pro Light, Verdana, sans-serif;
    font-style: normal;
    font-size: 80%;
}
.smarty-popup-header {
    font-family: Lithos Pro Regular, Verdana, sans-serif;
    font-style: normal;
    line-height: 150%;
}
.smarty-popup-typed-address {
    font-family: Lithos Pro Regular, Verdana, sans-serif;
    font-style: normal;
    /*font-size: 80%;*/
    line-height: 150%;
}
.smarty-choice-alt .smarty-choice-abort,
.smarty-choice-override {
    font-family: Lithos Pro Bold, Verdana, sans-serif;
    font-style: normal;
}
/*.smarty-tag-check -- appears to be a dumb vestigial line added 6/28/2017*/


.loading-animation {
    width: 100%;
    height: 100%;
}

.loading-animation-inner {
    position: relative;
    top: 30%;
    left: 0;
    width: 100%;
    height: 15vw;
    overflow: hidden;

    /* Why does this mf'er seem to be all padding? */
}

/*noinspection DuplicatedCode*/
.loading-static .message,
.loading-animation .message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 4vw;
    text-align: center;
    font-size: 7vw;
    font-family: Lithos Pro Regular, sans-serif;
}

.loading-animation .cover {
    position: absolute;
    top:0;
    left: -50%;
    width: 180%;
    height: 100%;
    background-color: white;

    animation-duration: 1s, 1s;
    animation-name: cover_first, cover_first;
    animation-iteration-count: 1, infinite;
    animation-direction: normal, alternate;
    animation-timing-function: ease, ease;
}

@keyframes cover_first {
    from { left: 80%; }
    to   { left: 30%; }
}

.loading-animation .brush {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;

    animation-duration: 1s, 1s;
    animation-name: brush_first, brush_first;
    animation-iteration-count: 1, infinite;
    animation-direction: normal, alternate;
    animation-timing-function: ease, ease;
}
@keyframes brush_first {
    from { left: 60%; }
    to   { left: 10%; }
}



.loading-static {
    width: 100%;
    height: 100%;
}

.loading-static-inner {
    position: relative;
    top: 30%;
    left: 0;
    width: 100%;
    height: 15vw;
    overflow: hidden;

    /* Why does this mf'er seem to be all padding? */
}

/*.loading-static .message {*/
/*    color: #999999;*/
/*}*/

.error-500 {
    background-color: #000033;
    color: white;
    margin: 0;
}

.error-500 .big-message-box {
    position: absolute;
    top: 12vw;
    left: 10vw;
    width: 80vw;
    padding: 2.5vw;
    background-color: #333366;
}

.error-500 .big-message-box p {
    text-align: center;
    font-size: 2.5vw;
    font-family: Lithos Pro Regular, sans-serif;
}

.error-500 .big-message-box .company-name {
    font-size: 1.5vw;
}

.digit-animation {
    font-family: Lithos Pro Regular, sans-serif;
}

.digit-animation .digit {
    -webkit-animation-duration: 0.5s;
       -moz-animation-duration: 0.5s;
         -o-animation-duration: 0.5s;
            animation-duration: 0.5s;

    -webkit-animation-name: glyph-light-gray-to-black;
       -moz-animation-name: glyph-light-gray-to-black;
         -o-animation-name: glyph-light-gray-to-black;
            animation-name: glyph-light-gray-to-black;

    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;
       -moz-animation-direction: alternate;
         -o-animation-direction: alternate;
            animation-direction: alternate;

    -webkit-animation-timing-function: steps(4);
       -moz-animation-timing-function: steps(4);
         -o-animation-timing-function: steps(4);
            animation-timing-function: steps(4);

    border: 1px solid rgb(224,224,224);
}

.digit-animation .digit:nth-child(5n+1) {
    -webkit-animation-delay: 0.0s;
       -moz-animation-delay: 0.0s;
         -o-animation-delay: 0.0s;
            animation-delay: 0.0s;
}
.digit-animation .digit:nth-child(5n+2) {
    -webkit-animation-delay: 0.1s;
       -moz-animation-delay: 0.1s;
         -o-animation-delay: 0.1s;
            animation-delay: 0.1s;
}
.digit-animation .digit:nth-child(5n+3) {
    -webkit-animation-delay: 0.2s;
       -moz-animation-delay: 0.2s;
         -o-animation-delay: 0.2s;
            animation-delay: 0.2s;
}
.digit-animation .digit:nth-child(5n+4) {
    -webkit-animation-delay: 0.3s;
       -moz-animation-delay: 0.3s;
         -o-animation-delay: 0.3s;
            animation-delay: 0.3s;
}
.digit-animation .digit:nth-child(5n+5) {
    -webkit-animation-delay: 0.4s;
       -moz-animation-delay: 0.4s;
         -o-animation-delay: 0.4s;
            animation-delay: 0.4s;
}

@keyframes glyph-light-gray-to-black {
    to   { color: #000000; background: #000000; }
    from { color: #CCCCCC; background: #CCCCCC; }
}

button {
    border: 0.3em outset #BBBBBB;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    /* NOTE:  Curvy radius made buttons look too much like entry fields. */
    /*-webkit-border-radius: 0.3em;*/
       /*-moz-border-radius: 0.3em;*/
         /*-o-border-radius: 0.3em;*/
            /*border-radius: 0.3em;*/

    outline: none;
    cursor: pointer;   /* pointing finger */
}
button:active {
    border-style: inset;
}

.black-fader {
    background-color: #000000;
}
.black-fader:hover {
    background-color: #444444;
}
.black-fader:active {
    background-color: #888888;
}

.dark-gray-fader {
    background-color: #888888;
}
.dark-gray-fader:hover {
    background-color: #444444;
}
.dark-gray-fader:active {
    background-color: #000000;
}

button.clear-address,
button.copy-address,
button.leaf-delete {
    border-width: 0.15em;
}

.wait-for-freight .leaf-new:hover,
.wait-for-freight .leaf-delete:hover,
.wait-for-freight .leaf-new:active,
.wait-for-freight .leaf-delete:active {
    border-style: outset;
}
/* THANKS:  Overlapping rules for negative nesting, https://stackoverflow.com/a/7084147/673991 */
/* That is, the hover and active effects go away during .wait-for-freight */
/* TODO:  Similarly for download PDF and Submit buttons?  Meh, not so bad that hover works "under the fading". */
.wait-for-freight .black-fader.leaf-new:hover,
.wait-for-freight .black-fader.leaf-delete:hover,
.wait-for-freight .black-fader.leaf-new:active,
.wait-for-freight .black-fader.leaf-delete:active {
    background-color: #000000;
}
.wait-for-freight .dark-gray-fader.leaf-new:hover,
.wait-for-freight .dark-gray-fader.leaf-delete:hover,
.wait-for-freight .dark-gray-fader.leaf-new:active,
.wait-for-freight .dark-gray-fader.leaf-delete:active {
    background-color: #888888;
}

.wait-for-freight .leaf-new,
.wait-for-freight .leaf-delete,
.wait-for-freight .submit-button,
.wait-for-todo-violations #eventually_submit,
button:disabled {
    filter: alpha(opacity=33);
    opacity: 0.33;
    cursor: default;  /* arrow */
}



.active-leaf-background {
    margin: 0;
    border: inset #999999;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    /* Does this make a difference?  If so, thanks http://stackoverflow.com/a/9601431/673991 */
}

.active-leaf-background { border-width: 0 0 0 0; }
.active-leaf-background.active-leaf-background-first { border-top-width: 0; }
.active-leaf-background.active-leaf-background-last { border-bottom-width: 0; }

.active-leaf-background.active-leaf-plural { border-width: 0 0.3em 0 0.3em;   /* left and right only */ }
.active-leaf-background.active-leaf-plural.active-leaf-background-first { border-top-width: 0.3em; }
.active-leaf-background.active-leaf-plural.active-leaf-background-last { border-bottom-width: 0.3em; }

.active-leaf-background.active-leaf-background-last {
    margin: 0 0 1px 0;   /* Put a white pixel between the active leaf and the button below it. */
}

/*.active-leaf-background          #ship-to-.resize-me,*/
/*.active-leaf-background    .row-background.resize-me,*/
/*.active-leaf-background   .cell-background.resize-me,*/
/*.active-leaf-background .background-canvas.resize-me {*/
/* Debatable whether the above is more complicated than the below. */
.active-leaf-background .resize-me:not(.black-fader
    ):not(.rectangle
    ):not(.black-rectangle
    ):not(input
    ):not(textarea
    ):not(.leaf-delete
    /*):not(.map-mask*/
    ):not(.digit-animation
) {
    background: transparent;
    /* So active leaf's inner resize-me's don't occlude right bevel. */
}

/* NOTE:  1.0em corresponds to 50px when global FONT_SIZE_PIXELS is 50 and screen width is 3000px
   (For some reason, this used to say FONT_SIZE_PIXELS 30.
   Don't understand how that could ever have been true.
   Experiment confirms, when zoomed to Resize 1.000, the screen is 3000px wide,
   then when FONT_SIZE_PIXELS is 50, $(document.body).css('font-size') === "50px",
   and therefore 1em is 50px.) */





/*.whole-leaf {*/
    /*margin: 0;*/
    /*border: 0.3em inset #999999;*/
    /*-webkit-box-sizing: border-box;*/
       /*-moz-box-sizing: border-box;*/
            /*box-sizing: border-box;*/
/*}*/

/*.whole-leaf:not(:first-of-type) {*/
/*    background-color: #FFFFFF;*/
/*}*/






.test-container {
    display: -webkit-flex;
    display:     -ms-flex;
    display:         flex;

    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;

    height: 100%;
    min-height: 100vh;
}
.test-controller {
    background-color: #DDEEEE;
}

/*noinspection CssUnknownProperty*/
.test-sandbox {
    -webkit-flex-grow: 1;
        -ms-flex-grow: 1;
            flex-grow: 1; /* IE11 won't respond to flex: 1; */
    width: 100%;  /* IE11 needs */
}
/* THANKS:  Expansive iframe, https://stackoverflow.com/a/27914781/673991 */
/* SEE ALSO:  https://stackoverflow.com/q/17054158/673991 */

.test-controller .qunit-source {
    white-space: pre;
}


#this-browser-doesnt-work {
    /* Fails JavaScript feature tests */
    font-family: Lithos Pro Regular, sans-serif;
    color: #990000;
    background-color: white;
    position: relative;
    left: 0;
    top: 0;
    z-index: 103;
}

.text-field {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /* THANKS:  Ellipsis baggage, https://stackoverflow.com/a/17783233/673991 */
    /*          In particular, ellipsis only works with overflow:hidden and white-space:nowrap */
}

input,
button,
select,
textarea {
    font-size: inherit;
    /* THANKS:  Elements inherit from body element, https://stackoverflow.com/a/6080482/673991 */
}

.map-loading p,
.map-error p {
    font-size: 2em;
    color: #888888;
    text-shadow: 0 0 0.25em white;
}

/*.map-fade .map-fade-image:nth-last-child(1) {*/
/*    -webkit-animation-duration: 1.0s;*/
/*       -moz-animation-duration: 1.0s;*/
/*         -o-animation-duration: 1.0s;*/
/*            animation-duration: 1.0s;*/

/*    -webkit-animation-name: image-fade-out;*/
/*       -moz-animation-name: image-fade-out;*/
/*         -o-animation-name: image-fade-out;*/
/*            animation-name: image-fade-out;*/

/*    -webkit-animation-iteration-count: infinite;*/
/*       -moz-animation-iteration-count: infinite;*/
/*         -o-animation-iteration-count: infinite;*/
/*            animation-iteration-count: infinite;*/

/*    -webkit-animation-direction: alternate;*/
/*       -moz-animation-direction: alternate;*/
/*         -o-animation-direction: alternate;*/
/*            animation-direction: alternate;*/
/*}*/

.map-loading,
.map-error {
    background: transparent;
}

/*.map-mask {*/
/*    background: white;*/
/*}*/

.map-address {
    border: 1px solid #808080;
}

/*@keyframes image-fade-out {*/
/*    to   { opacity: 0.00; }*/
/*    from { opacity: 1.00; }*/
/*}*/

@media print {
    .print_not {
        display: none;
    }
    .print_page_before {
        page-break-before: always;
    }
    .print_page_after {
        page-break-after: always;
    }
    /* NOTE:  IE requires an element be non-empty for page-break to work. */
    .print_anyway[class^='checkbox-hide-'],
    .print_anyway[class*=' checkbox-hide-'],
    .print_anyway[class^='radio-hide-'],
    .print_anyway[class*=' radio-hide-'] {
        display: block;
    }
    /* TODO: Override other -hide classes too? */
}

@media screen {
    .print_only {
        display: none;
    }
}

@media print and (orientation:portrait) {
    body {
        /*font-size: 0.167in;*/
        font-size: 8.5pt !important;
        /* 12.1pt == 12.1px, 12.1 == (1.666/100) * 3000 * .242 */
        /* where "Resize stuff by 0.242" is where Chrome prints right. */
    }
}
@media print and (orientation:landscape) {
    body {
        font-size: 12pt !important;
        /* 16 == 10/7.5 * 12, where 10/7.5 is like 11/8.5 but with margins. */
    }
}
@media print and (orientation:landscape) {
    body {
        font-size: 12pt !important;
        /* 16 == 10/7.5 * 12, where 10/7.5 is like 11/8.5 but with margins. */
    }
}

a:link,
a:visited,
a:active,
a:hover {
    color: inherit;
}
/* THANKS:  Avoids hyperlinks getting colored differently than surrounding text,
            https://stackoverflow.com/a/2204687/673991
*/

fieldset {
    border: 0;
}

.computed-amount-total-products-retail:not(.do_charge_retail) {
    display: none;
    /* NOTE:  This fixed the pesky tail end of the "ancient crossfire bug",
              the  complication about retail extension total disappearing
              when a retail-pricing leaf qualifies for wholesale. */
    /* NOTE:  display:none turns off the jQuery :visibility pseudo-selector, but
              visibility:hidden does not. */
}


.site-wide-error {
    width: 100%;
    height: 100%;
    position: relative;

    background-color: #333366;

    font-family: "Lithos Pro Bold", "Arial Black", sans-serif;
    font-size: 2vw;
    line-height: 2;
    text-align: center;
}
.site-wide-error img {
    width: 100%;
}
.site-wide-error,
.site-wide-error a:link,
.site-wide-error a:hover,
.site-wide-error a:active,
.site-wide-error a:visited {
    color: #FFFFFF;
}



/******** BORM - Review Management *********/

.borm {
    padding: .5vw;
}

.borm .controls {
}

/*.borm .all_reviews {*/
/*    column-count: 3;*/
/*    column-gap: 0;*/
/*    !* THANKS  column-major order, I think,*/
/*    https://css-tricks.com/arranging-elements-top-bottom-instead-left-right-float/#text-columns *!*/
/*}*/

.borm .all_reviews {
    white-space: nowrap;
}

.borm .all_reviews .review_column {
    white-space: normal;
    display: inline-block;
    vertical-align: top;
}

.borm .one_review {
    display: inline-block;
    width: 100%;
    margin: 0 0 0.5vw 0;
    font-size: 1.5vw;
    padding: 0;
}
.borm .render {
    padding: 2vw;
    margin: 0;
}

/*noinspection CssUnknownProperty*/
.borm .one_review .review_text {
    white-space: pre-wrap;
    /* THANKS:  hard newlines, https://stackoverflow.com/a/42203509/673991 */

    border: 0.2em solid #DDFFFF;
    -webkit-border-radius: 0.5em;
       -moz-border-radius: 0.5em;
         -o-border-radius: 0.5em;
            border-radius: 0.5em;
    padding: 0.5em;
}

.borm .is_approved_no.is_deleted_no .render {
    background-color: #999999;
}
.borm .is_approved_yes.is_deleted_no .render {
    background-color: #000033;
}
.borm .is_approved_yes.is_deleted_yes .render,
.borm .is_approved_no.is_deleted_yes  .render {
    background-color: #AA8888;
}

.borm .one_review.is_approved_no.is_deleted_no .review_text {
    background-color: #CCCCCC;
    border-color: #EEEEEE;
    color: #555555;
}
.borm .one_review.is_approved_yes.is_deleted_no .review_text {
    background-color: #90CCCC;
    border-color: #DDFFFF;
    color: #000000;
}
.borm .one_review.is_approved_yes.is_deleted_yes .review_text,
.borm .one_review.is_approved_no.is_deleted_yes .review_text {
    background-color: #DDBBBB;
    border-color: #FFDDDD;
    color: #773333;
}

.review_foot {
    color: white;
    padding: 0.5vw 0.5vw 0 0.5vw;
}
.is_approved_yes .review_approve,
.is_deleted_yes .review_delete {
    border-style: inset;
}

.one_review .email {
    color: white;
    margin-top: 0.6vw;
}
.review_approve,
.review_delete,
.review_burn {
    font-size: 0.85em;
    text-align: left;
    margin-right: 0.75vw;
    margin-top: 0.6vw;
}
.review_approve,
.review_delete {
    min-width: 10vw;
    /* NOTE:  Avoid jiggle when they change.
              Just enough to fit "unapprove" with its checkmark */
}

.review_burn {
    color: #CC0000;
    background-color: #FFFF99;
    border-color: #CC0000;
}

                .review_burn { display:none; }
.is_deleted_yes .review_burn { display:inline-block; }

                .review_approve { display:inline-block; }
.is_deleted_yes .review_approve { display:none; }

.is_approved_yes .review_approve::after        { content: " approved";  }
.is_approved_yes .review_approve:hover::after  { content: " unapprove"; }
.is_approved_no  .review_approve::after        { content: " approve";   }
.is_approved_no  .review_approve:hover::after  { content: " approve";   }

.is_approved_yes .review_approve        { color: #00A000; background-color: #E0FFE0; }
.is_approved_yes .review_approve:hover  { color: #000000; background-color: white; }
.is_approved_no  .review_approve        { color: #000000; }
.is_approved_no  .review_approve:hover  {/* color: #00A000; background-color: #E0FFE0; */}

.is_deleted_yes .review_delete::after        { content: " deleted";  }
.is_deleted_yes .review_delete:hover::after  { content: " undelete"; }
.is_deleted_no  .review_delete::after        { content: " delete";   }
.is_deleted_no  .review_delete:hover::after  { content: " delete";   }

.is_deleted_yes .review_delete        { color: #C00000; background-color: #FFE0E0; }
.is_deleted_yes .review_delete:hover  { color: #000000; background-color: white; }
.is_deleted_no  .review_delete        { color: #000000; }
.is_deleted_no  .review_delete:hover  {/* color: #C00000; background-color: #FFE0E0; */}

/* THANKS:  :hover::after not ::after:hover,
            https://stackoverflow.com/q/13233991/673991#comment20520036_13234028 */

.review_save,
.review_discard {
    padding: 0.2vw;
}
          .review_save { display: none; }
.is_dirty .review_save { display: inline; }
          .review_discard { display: none; }
.is_dirty .review_discard { display: inline; }

.borm.show_approved_no   .is_deleted_no.is_approved_yes { display:none; }
.borm.show_unapproved_no .is_deleted_no.is_approved_no  { display:none; }
.borm.show_deleted_no    .is_deleted_yes                { display:none; }

.one_review .invalid_email {
    color: #A00000;
}

.review-clone {
    position: relative;
    overflow: visible;
    /*display: inline-block; -- old free-flow columns */
}

.text-review {
    white-space: pre-wrap;
}

.review-field-key {
    font-family: monospace;
    background-color: #EEEEEE;
    font-size: 1.2vw;
    white-space: nowrap;
}
.review-field-value {
    padding-left: 0.5em;
    font-size: 1.2vw;
    word-break: break-all;
}
/* THANKS:  Force wrap, https://stackoverflow.com/a/18891915/673991 */

.post_error {
    outline: 0.15em solid red;
}

.borm button {
    padding: 0.1vw 0.3vw 0.1vw 0.3vw;
    /* NOTE:  This assists Review._raise_down_arrows() a bit.  Default button padding is 1px 6px. */
}

table.review-fields {
    border-spacing: 0.3vw;
    /* NOTE:  This also assists Review._raise_down_arrows() a bit.
              But doesn't entirely fix it.
              Perhaps there's some other px-sized thing on the page?
              Button border widths are 0.3em, but that adjusts linearly with width already.
              Only shows up on extreme (more than 2x) changes in window width.
    */
}
table.review-fields              tr.review-field-new td {
    visibility: hidden;
}
table.review-fields:hover        tr.review-field-new td {
    visibility: visible;
}
table.review-fields:focus-within tr.review-field-new td {
    visibility: visible;
}
/* THANKS:  Parent visible when child focused,
            https://css-tricks.com/keeping-parent-visible-child-focus/ */
/* TODO:  Find a way to stay visible if non-empty! */

.review-new-key {
    width: 10vw;
    font-family:inherit;
    border: none;
}
.review-new-value {
    width: 10vw;
    font-family:inherit;
    border: none;
}

button.review-new-save {
    border: none;
    background-color: transparent;
}
button.review-new-discard {
    border: none;
    background-color: transparent;
}

button.review-field-delete {
    border: none;
    background-color: transparent;
}

table.review-fields tr       button.review-field-delete { visibility: hidden; }
table.review-fields tr:hover button.review-field-delete { visibility: visible; }

.one_review .arrow button {
    border: none;
    background-color: transparent;
    color: white;
}

                    .one_review                   .arrow { visibility: hidden; }

                    .one_review:hover             .arrow { visibility: visible; }

.show_approved_no   .one_review:hover             .arrow { visibility: hidden; }
.show_unapproved_no .one_review:hover             .arrow { visibility: hidden; }
.show_deleted_no    .one_review:hover             .arrow { visibility: hidden; }

                    .one_review:hover:first-child .arrow_up   { visibility: hidden; }
                    .one_review:hover:last-child  .arrow_down { visibility: hidden; }

.one_review {
    position: relative;   /* Give positioning to grandfather element of arrow_up, etc. */
}
/*.arrow .arrow_up { float: left; }*/
/*.arrow .arrow_down { float: right; }*/
.arrow .arrow_up    { position: absolute; top: 0;    left:  42%; }   /* 42% is lame-ass centering */
.arrow .arrow_down  { position: absolute; bottom: 0; left:  42%; }

.arrow .arrow_left_top  { position: absolute; top:    2.0vw;  left:  0; }
.arrow .arrow_right_top { position: absolute; top:    2.0vw;  right: 0; text-align: right; }
.arrow .arrow_left_bot  { position: absolute; bottom: 2.0vw;  left: 0; }
.arrow .arrow_right_bot { position: absolute; bottom: 2.0vw;  right: 0; text-align: right; }
/* NOTE:  The top values here must agree with SIDEWAYS_MARGIN_VW.
          The bottom values are overridden by _raise_down_arrows() */



/******** BOFA - Fonts Available *********/

body.bofa {
    position: relative;
    top:0;
}
.bofa h2 {
    position: sticky;
    top: 0;
    margin-bottom: 0;
    padding-bottom: 0.5em;
    background-color: white;
}
/* SEE:  Sticky issues, if it ever stops working, https://stackoverflow.com/q/43707076/673991 */
.bofa .header_legend,
.bofa .controls {
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 16px;
    font-weight: normal;
    margin-left: 1em;
}
.bofa .category-sample {
    margin-left: 1.5em;
    display: inline-block;
    border: 1px solid lightgray;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}
.bofa .header_addendum {
    font-family: 'Times New Roman', serif;
    font-style: italic;
    color: #CC6666;
    margin-left: 1em;
}
.bofa .controls input {
    margin-left: 1em;
}

.bofa.control_italic    .pangram-display { font-style: italic; }
.bofa.control_underline .pangram-display { text-decoration: underline; }

table.meta.font-samples th {
    /*font: small-caption;*/
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 18px;
    padding-left: 0.5em;
    background-color: white;
    color: black;
}
/* FALSE WARNING:  Unknown CSS property '-khtml-user-select' */
/*noinspection CssUnknownProperty*/
.font-samples .bill-name {
    font-family: monospace;
    white-space: nowrap;
    padding-left: 0.5em;
    padding-right: 0.5em;

    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: all; /* Safari */
       -khtml-user-select: all; /* Konqueror HTML */
         -moz-user-select: all; /* Firefox */
          -ms-user-select: all; /* Internet Explorer/Edge */
              user-select: all; /* Chrome and Opera */
    /* THANKS:  Select-all on click, https://stackoverflow.com/a/43783066/673991 */
}

.font-samples .pangram-display {
    font-size: 2em;
    white-space: pre-wrap;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

.font-samples .sort-orders {
    padding-left: 0.3em;
    padding-right: 0.3em;
}

.category-standard { background-color: #FFFFFF; }
.category-common   { background-color: #DDDDDD; }
.category-myfonts  { background-color: #FFEEDD; }
.category-lithos   { background-color: #DDFFFF; }

.font-preload {
    filter: alpha(opacity=0);
    opacity: 0;
}



/******** product images *********/

.white_shadow_glow {
    /*-webkit-box-shadow: 0.0em  0.0em 0.25em 0.25em rgba(255, 255, 255, 0.250);*/
    /*   -moz-box-shadow: 0.0em  0.0em 0.25em 0.25em rgba(255, 255, 255, 0.250);*/
    /*        box-shadow: 0.0em  0.0em 0.25em 0.25em rgba(255, 255, 255, 0.250);*/
    /* NOTHANKS:  outline of image RECTANGLE, ignoring transparency edges,
                  https://stackoverflow.com/a/55108687/673991 */

    -webkit-filter: drop-shadow(0.0em 0.0em 0.25em rgba(255, 255, 255, 0.50));
            filter: drop-shadow(0.0em 0.0em 0.25em rgba(255, 255, 255, 0.50));
    /* THANKS:  drop shadows for OUTLINE of an image with transparent background,
                https://stackoverflow.com/a/45823124/673991 */
}

/*.popup-screen {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    left: 0;*/

/*    z-index: 1;*/

/*    background-color: rgba(0, 0, 0, 0.33);*/
/*}*/



/******** pop-up video *********/

/*noinspection CssUnknownProperty*/
#popped-up-media-box {
    -webkit-border-radius: 0.3em;
       -moz-border-radius: 0.3em;
         -o-border-radius: 0.3em;
            border-radius: 0.3em;
}