body {
  font-weight:100;
  font-size: 1em;
  font-family: "Trebuchet MS", Helvetica, sans-serif
}

.flash {
  background-color:lemonchiffon;
  color: crimson;
  text-align:center;
  font-size:1.5em;
  width:80%;
  border:2px solid firebrick;
  margin:auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding:10px;
  width:100%;
}

code {

}

b {
  font-weight: bold;
}
code.spaced {
  background-color: #FFFFFF;
  padding:10px;
  margin:15px;
}

code.inline {
  margin:5px;
  padding:5px;
}

code.bad {
  background-color: #F5D3D7;
}


a:link, a:visited, a:active {
    color: blue;
}
a:hover {
    color: red;
}

/* The navigation bar */
.navbar_container {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}


.navbar {
  overflow: hidden;
  background-color: #222;
  position: relative; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 900px; /* Full width */
  margin:auto;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  opacity: 1.0;
  background: #ddd;
  color: black;
  text-decoration: underline;
}

.navbar a.start{
  background: dodgerblue;
  color: white;
  opacity: 0.5;
}

.navbar a.users{
  background: crimson;
  color: white;
  opacity: 0.5;
}
.navbar a.tickets{
  background: darkviolet;
  color: white;
  opacity: 0.5;
}
.navbar a.orders{
  background: darkorange;
  color: white;
  opacity: 0.5;
}
.navbar a.leadgen{
  background: slateblue;
  color: white;
  opacity: 0.5;
}
.navbar a.feedback{
  background: darkgreen;
  color: white;
  opacity: 0.5;
}
.navbar a.break{
  background: goldenrod;
  color: white;
  opacity: 0.5;
}
.navbar a:hover {
  opacity: 1.0;
  text-decoration: underline;
  color: white;
}
.navbar a.alert{
  opacity: 0.9;
  border: 1px solid yellow;
  color: yellow;
}

#body_main{
  padding:30px;
}
/* Main content */
.main {
  margin-top: 50px; /* Add a top margin to avoid content overlay */
}
.small {
  font-size:0.75em;
}

div.editorial_page {
  background: white;
  padding:20px;
  padding:20px;
  border: 1px solid black;}
}

/* ticket view overrides p unless we add this */
div.editorial_page p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

div.editorial_page h1, 
div.editorial_page h2, 
div.editorial_page h3, 
div.editorial_page h4, 
div.editorial_page h5, 
div.editorial_page h6 {
  color: #125B8C;
  margin-top: 2em;
}
div.editorial_page strong {
  font-weight: bold;
}

div.editorial_page blockquote {
  padding: 1 2em;
  margin-left: 0;
  color: #0459B8;
  border-left: 0.5em solid #054280;
  background-color: #D8E4F0;
}



div.ticket_view  {
  font-weight: normal;
}

div.ticket_view blockquote {
  padding: 1 2em;
  margin-left: 0;
  color: darkslategray;
  border-left: 0.5em solid darkcyan;
  /* background-color: lightyellow; */
  overflow:hidden; /* hanlde floating content establish height */
}

.center{
  text-align:center;
}
.right{
  text-align:right;
}

/*.black {
  color: #000000;
}
.red {
  color: #C7121E;
}
.gray {
  color: #AAA;
}
.green {
  color: #227506;
}
.gold {
  color: gold;
}
.lite_purple {
  color: #6A5ACD;
}
.purple {
  color: #483D8B;
}
.orange {
  color: orange;
}
*/

.larger{
  font-size: 1.25em;
}

a.popup{
  color: #1C8000;
  font-size: 0.8em;
}
a.popup::after { 
    content: '\2026';
}

li {
  padding-bottom: 0.8em;
}

div.simple_flyer_view
{
  width:100%;
  margin:10px;
  background-color:white;
  padding:10px;
  border: 1px solid #666;

}

div.simple_flyer_view table {
  width: 100%;
}
/* make minimum width possible*/
div.simple_flyer_view table td.first {
  white-space:nowrap; 
  width:1px; 
}

div.simple_flyer_view table td p {
  padding:15px;
}

div.simple_view_container
{
  display: flex;
  width: 100%;

}

input.simple_edit_field
{
  color: blue;
  font-size: 1em;
  width: 100%;
}

textarea.simple_edit_field
{
  color: blue;
  font-size:1.5em;
  width:100%;
}
textarea.simple_edit_field_medium
{
  color: blue;
  font-size:1.2em;
  width:100%;
}
textarea.simple_edit_review_note
{
  color: green;
  font-size:1.5em;
  width:100%;
}

p.force_wrap300{
  word-wrap: break-word;
  max-width:300px;
}


.vet_do_fix
{
  color: #D47E0F;
}

.vet_do_redo{
  color: #C7121E;
}

.vet_do_note{
  color: #5C04BA;
}

label.action_checkbox{
  font-size: 1.25em;
}
input.action_checkbox{
  transform:scale(1.75, 1.75);
  margin-left: 15px;
  margin-right: 15px;
}
input.UNUSEDlarger{
  transform:scale(1.5, 1.5);
  margin-left: 15px;
  margin-right: 15px;
}

label.larger_radio{
  margin-left: 1em;
}
input.larger_radio[type='radio']:after {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        top: -4px;
        left: -2px;
        position: relative;
        background-color: white;
        content: ' ';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
input.larger_radio.plain[type='radio']:checked:after {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        top: -4px;
        left: -2px;
        position: relative;
        background-color: blue;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
input.larger_radio.radio_fail[type='radio']:checked:after {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        top: -4px;
        left: -2px;
        position: relative;
        background-color: crimson;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
input.larger_radio.radio_pass[type='radio']:checked:after {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        top: -4px;
        left: -2px;
        position: relative;
        background-color: forestgreen;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
input.larger_radio.radio_na[type='radio']:checked:after {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        top: -4px;
        left: -2px;
        position: relative;
        background-color: gold;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

del.differ{
  background-color: pink;
}

ins.differ{
  background-color: palegreen;
}

.flickr_pagination {
  text-align: center;
  padding: 0.3em;
  cursor: default; }
  .flickr_pagination a, .flickr_pagination span, .flickr_pagination em {
    padding: 0.2em 0.5em; }
  .flickr_pagination .disabled {
    color: #aaaaaa; }
  .flickr_pagination .current {
    font-style: normal;
    font-weight: bold;
    color: #ff0084; }
  .flickr_pagination a {
    border: 1px solid #dddddd;
    color: #0063dc;
    text-decoration: none; }
    .flickr_pagination a:hover, .flickr_pagination a:focus {
      border-color: #003366;
      background: #0063dc;
      color: white; }
  .flickr_pagination .page_info {
    color: #aaaaaa;
    padding-top: 0.8em; }
  .flickr_pagination .previous_page, .flickr_pagination .next_page {
    border-width: 2px; }
  .flickr_pagination .previous_page {
    margin-right: 1em; }
  .flickr_pagination .next_page {
    margin-left: 1em; }

div.flickr_pagination {
  margin-top:10px;
  margin-bottom:10px;
}

table.striped, table.nice {
  background-color:white;
  border-collapse: collapse;
  border: 2px solid black;
  margin-top: 20px;
  margin-bottom: 20px;
}
table.striped tr, table.nice tr{
  border-bottom: 1px solid #CCCCCC;
}

table.striped td, table.nice td{
  padding:5px;
  border: 1px solid #CCCCCC;
  vertical-align: top;
}
table.striped th, table.nice th{
  padding:5px;
  background-color: #666666;
  color: white;
  text-align: left;
  border: 1px solid white;
  vertical-align: top;
}

table.striped.alt th, table.nice.alt th{
  padding:5px;
  background-color: green;
  color: white;
  text-align: left;
  border: 1px solid white;
  vertical-align: top;
}

table.striped tr:nth-child(odd) td{
  background-color: white;

}
table.striped tr:nth-child(even) td{
  background-color: #EEEEEE;
}

table.striped.alt tr:nth-child(odd) td{
  background-color: mintcream;

}
table.striped.alt tr:nth-child(even) td{
  background-color: honeydew;
}


/*put AFTER non-hover stuff*/
table.striped tr:hover td{
  background-color: #E3F6FA;
}

.form_label {
  color: slategray;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 600px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  top: 100%;
  left: 0%;
  margin-left: 0px; /* Use half of the width (120/2 = 60), to center the tooltip */

  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}


 /**
   * Reset button styles
   * It takes some work to achieve a “blank slate” look.
   * view-source:https://fvsch.com/styling-buttons/step4-final.html  *
   */
  button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    /* show a hand cursor on hover; some argue that we
    should keep the default arrow cursor for buttons */
    cursor: pointer;
    font-size: 1.1em;

  }

  /**
   * Button component
   */
  .btn {
    /* default for <button>, but needed for <a> */
    display: inline-block;
    text-align: center;
    text-decoration: none;

    /* create a small space when buttons wrap on 2 lines */
    margin: 2px 0;

    /* invisible border (will be colored on hover/focus) */
    border: solid 1px transparent;
    border-radius: 4px;

    /* button size comes from text + padding, avoid height */
    padding: 0.5em 1em;

    /* make sure colors have enough contrast! */
    color: #FFFFFF;
    background-color: cornflowerblue;
  }

  .btn.small {
    font-size: 0.8em;
  }
  .btn.tiny {
    font-size: 0.6em;
  }

  /* old-school "down" effect on clic + color tweak */
  .btn:active {
    transform: translateY(1px);
    filter: saturate(150%);
  }

  /* inverse colors on hover */
  .btn:hover {
    color: cornflowerblue;
    border-color: cornflowerblue;
    background-color: white;
  }

  /* Firefox: remove the inner border shown on focus */
  .btn::-moz-focus-inner {
    border: none;
  }

  /* make sure we have a visible focus ring */
  .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5),
      0 0 0 1.5px rgba(255, 105, 180, 0.5);
  }

  /* hide focus style if not from keyboard navigation */
  .js-focus-visible .btn:focus:not(.focus-visible) {
    box-shadow: none;
  }

  .btn.crimson {
    color: white;
    background-color: crimson;
  }
  .btn.crimson:hover {
    color: crimson;
    border-color: crimson;
    background-color: white;
  }
  .btn.darkred {
    color: white;
    background-color: darkred;
  }
  .btn.darkred:hover {
    color: darkred;
    border-color: darkred;
    background-color: white;
  }
  .btn.deeppink {
    color: white;
    background-color: deeppink;
  }
  .btn.deeppink:hover {
    color: deeppink;
    border-color: deeppink;
    background-color: white;
  }
  .btn.red {
    color: white;
    background-color: red;
  }
  .btn.red:hover {
    color: red;
    border-color: red;
    background-color: white;
  }
  .btn.royalblue {
    color: white;
    background-color: royalblue;
  }
  .btn.royalblue:hover {
    color: royalblue;
    border-color: royalblue;
    background-color: white;
  }
  .btn.limegreen {
    color: white;
    background-color: limegreen;
  }
  .btn.limegreen:hover {
    color: limegreen;
    border-color: limegreen;
    background-color: white;
  }


  .btn.mediumblue {
    color: white;
    background-color: mediumblue;
  }
  .btn.mediumblue:hover {
    color: mediumblue;
    border-color: mediumblue;
    background-color: white;
  }

  .btn.darkgreen {
    color: white;
    background-color: darkgreen;
  }
  .btn.darkgreen:hover {
    color: darkgreen;
    border-color: darkgreen;
    background-color: white;
  }
  .btn.green {
    color: white;
    background-color: green;
  }
  .btn.green:hover {
    color: green;
    border-color: green;
    background-color: white;
  }
  .btn.lightgreen {
    color: black;
    background-color: lightgreen;
  }
  .btn.lightgreen:hover {
    color: lightgreen;
    border-color: lightgreen;
    background-color: white;
  }

  .btn.darkorange {
    color: white;
    border-color: darkorange;
    background-color: darkorange;
  }
  .btn.darkorange:hover {
    color: darkorange;
    border-color: darkorange;
    background-color: white;
  }

  .btn.dodgerblue {
    color: white;
    border-color: dodgerblue;
    background-color: dodgerblue;
  }
  .btn.dodgerblue:hover {
    color: dodgerblue;
    border-color: dodgerblue;
    background-color: white;
  }

  .btn.dimgray {
    color: white;
    background-color: dimgray;
  }
  .btn.dimgray:hover {
    color: dimgray;
    border-color: dimgray;
    background-color: white;
  }
  .btn.silver {
    color: black;
    background-color: silver;
  }
  .btn.silver:hover {
    color: dimgray;
    border-color: silver;
    background-color: white;
  }

  .btn.black {
    color: white;
    background-color: black;
  }
  .btn.black:hover {
    color: black;
    border-color: black;
    background-color: white;
  }
  .btn.mediumpurple {
    color: white;
    background-color: mediumpurple;
  }
  .btn.mediumpurple:hover {
    color: mediumpurple;
    border-color: mediumpurple;
    background-color: white;
  }
  .btn.purple {
    color: white;
    background-color: purple;
  }
  .btn.purple:hover {
    color: purple;
    border-color: purple;
    background-color: white;
  }
  .btn.fuchsia {
    color: white;
    background-color: fuchsia;
  }
  .btn.fuchsia:hover {
    color: fuchsia;
    border-color: fuchsia;
    background-color: white;
  }

  .btn.slateblue {
    color: white;
    background-color: slateblue;
  }
  .btn.slateblue:hover {
    color: slateblue;
    border-color: slateblue;
    background-color: white;
  }
  .btn.mediumslateblue {
    color: white;
    background-color: mediumslateblue;
  }
  .btn.mediumslateblue:hover {
    color: mediumslateblue;
    border-color: mediumslateblue;
    background-color: white;
  }
  .btn.midnightblue {
    color: white;
    background-color: midnightblue;
  }
  .btn.midnightblue:hover {
    color: midnightblue;
    border-color: midnightblue;
    background-color: white;
  }
  .btn.white {
    color: rebeccapurple;
    background-color: white;
    border-color: rebeccapurple;
  }
  .btn.white:hover {
    color: white;
    border-color: rebeccapurple;
    background-color: rebeccapurple;
  }
  .btn.indigo {
    color: white;
    background-color: indigo;
  }
  .btn.indigo:hover {
    color: indigo;
    border-color: indigo;
    background-color: white;
  }
  .btn.rebeccapurple {
    color: white;
    background-color: rebeccapurple;
  }
  .btn.rebeccapurple:hover {
    color: rebeccapurple;
    border-color: rebeccapurple;
    background-color: white;
  }

  /*for stars*/
  .btn.forestgreen {
    color: white;
    background-color: forestgreen;
  }
  .btn.forestgreen:hover {
    color: forestgreen;
    border-color: forestgreen;
    background-color: white;
  }
  .btn.tomato {
    color: white;
    background-color: tomato;
  }
  .btn.tomato:hover {
    color: tomato;
    border-color: tomato;
    background-color: white;
  }
  .btn.orange {
    color: white;
    background-color: orange;
  }
  .btn.orange:hover {
    color: orange;
    border-color: orange;
    background-color: white;
  }
  .btn.orangered {
    color: white;
    background-color: orangered;
  }
  .btn.orangered:hover {
    color: orangered;
    border-color: orangered;
    background-color: white;
  }
  .btn.indigo {
    color: white;
    background-color: indigo;
  }
  .btn.indigo:hover {
    color: indigo;
    border-color: indigo;
    background-color: white;
  }
  .btn.gold {
    color: black;
    background-color: gold;
  }
  .btn.gold:hover {
    color: gold;
    border-color: gold;
    background-color: white;
  }
  .btn.firebrick {
    color: white;
    background-color: firebrick;
  }
  .btn.firebrick:hover {
    color: firebrick;
    border-color: firebrick;
    background-color: white;
  }

  .btn.yellow {
    color: black;
    background-color: yellow;
    border-color: gray;
  }
  .btn.yellow:hover {
    color: yellow;
    border-color: gray;
    background-color: gray;
  }

.admin-well {margin:20px;padding:20px;border:2px solid orange;background-color: lightyellow;}