body {
    font-family: -apple-system, system-ui, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 17px;
    font-weight: 400;
    color: rgb(22, 22, 22);
    background-color: #efefef;
}

#content-container {
    width: 1200px;
    margin: 0 auto;
}


#content {
    padding: 30px;
    padding-bottom: 10px;
    background-color: #ffffff;
}

.gray {
    color: #757575;
}

/*p {*/
    /*max-width: 45em;*/
/*}*/

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
}

h1 {
    font-weight: 700;
    font-size: 42px;
    margin-bottom: 20px;
    line-height: 1.2em;
    text-transform: none;
}

h2 {
    font-size: 35px;
    margin-bottom: 20px;
    line-height: 1.2em;
    font-weight: 400;
    text-transform: none;
}

h3 {
    font-size: 25px;
    margin-bottom: 20px;
    line-height: 1.2em;
    font-weight: 400;
    text-transform: none;
}

.border-top {
    border-top: 4px solid black;
}

.plainlink {
    text-decoration: none;
    color: black;
}

.plainlink:visited {
    color: inherit;
}

table {
    line-height: 23px;
    width: 100%;
}

thead tr {
    line-height: 20px;
}

input[type=text] {
    max-width: 7em;
    text-align: right;
    border-radius: 0px;
}

table {
    border-collapse: collapse;
    border-style: hidden;
    font-size: 15px;
}

.text-left {
    text-align: left;
}

.btopleftright {
    box-shadow: inset -3px 0px 0px 0px black, inset 3px 0px 0px 0px black, inset 0px 3px 0px 0px black;
}

.bleftright {
    box-shadow: inset -3px 0px 0px 0px black, inset 3px 0px 0px 0px black;
}

.bbottomleftright {
    box-shadow: inset -3px 0px 0px 0px black, inset 3px 0px 0px 0px black, inset 0px -3px 0px 0px black;
}

.bleft {
    box-shadow:  inset 3px 0px 0px 0px black;
}

.tight {
    line-height: 20px;
}

table, th, td {
    /*border: 1px solid;*/
    vertical-align: top;
}

th {
    text-align: left;
}

tr.hoverable th:hover,
tr.hoverable td:hover {
    background-color: #f9f199;
}

tr.hoverable:hover,
tr.hoverable.hovered {
    background-color: #f9f199;
}


input {
    font-family: -apple-system, system-ui, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 15px;
    font-weight: 400;
    line-height: 19px;
    color: rgb(58, 58, 58);
}
thead tr {
    vertical-align: top;
}

thead tr th {
    padding-top: 3px;
    padding-bottom: 3px;
}

tr th,
tr td {
    padding: 0 5px;
}

table input {
    margin: 5px 0;
}

table tr.hoverable td > input:focus {
    outline: 5px solid #cc9900;
}

form p {
    max-width: inherit;
}

tr.noborder,
tr.noborder th,
tr.noborder td
{
    border: none;
    border-style: hidden;
    border-top: 1px solid black;
}

tr.noborder:hover,
tr.noborder:hover td{
    background-color: transparent;
}

tr.noborder.hovered {
    background-color: transparent;
}

tr.noborder td {
    background-color: transparent;
}

tr.tall td {
    padding: 10px 5px 0px 5px;
}

ol li {
    margin: 5px 0;
}


table tr .text-right {
    text-align: left;
}

span.lefty {
    margin-left: 190px;
}

span.lefty, span.biglefty {
    text-align: left;
    min-width: 140px;
    display: inline-block;
/*{#            border: 3px solid red;#}*/
    overflow: hidden;
    vertical-align: middle;
}

span.biglefty {
    min-width: 300px;
    font-style: italic;
    color: #5b5b5b;
    vertical-align: middle;
}

.centerspan {
    width: 100%;
    text-align: center;
    display: inline-block;
    font-size: 120%;
    margin: 4px 0;
}

td table tr:hover,
td table td:hover,
td table th:hover,
td tr.noborder.hovered,
td tr.hovered
{
    background-color: transparent;
}

td.nohover:hover,
td tr.noborder.hovered{
    background-color: transparent;
}

td td.hovered {
    background-color: pink;
}

td tr:hover,
td tr.hovered {
    background-color: green;
}

tr.hoverable.hovered {
    background-color: pink;
}

td table:hover {
    background-color: transparent;
}

table.hearts-diamonds {
    width: 100%;
}

.outofrange {
    color: red;
    background-color: #f6acb4;
    font-weight: bold;
    border-color: black;
}

.inrange {
    background-color: #c8e6c9;
}

.headertr td,
.headertr th{
    padding: 3px 5px;
    vertical-align: middle;
    background-color: #d4d4d4;
}

table.tinytable {
    width: 100%;
}

table.tinytable th {
    background-color: #d4d4d4;
}

.tinytable thead tr
{
    line-height: 12px;
}

.tinytable tbody tr {

    line-height: 20px;
}

.tinytable th,
.tinytable td {
    vertical-align: middle;
    text-align: left;
}

table p {
    min-width: 100%;
}

table.inner td {
    border-bottom: hidden;
    height: 32px;
    vertical-align: middle;
}

table.inner {
    border: hidden;
}

table.inner {
    border-top: 2px solid black;
}

.copyright {
    color: rgb(102, 102, 102);
    font-size: 13px;
    margin-top: 50px;
}

.notice {
    color: #cb0000;
    font-weight: bold;
}

@media (max-width : 500px) {
    h1 {
        font-size: 25px;
    }

    h3 {
        font-size: 20px;
    }

    h2 {
        font-size: 22px;
    }

    #content-container {
        width: auto;
    }

    .centerspan {
        text-align: left;
        font-size: 100%;
    }

    .scrollable-table-container > table {
        width: 1000px;
    }

    #graph-body-container {
        display: none;
    }

    #header {
        display: none;
    }
}

.scrollable-table-container {
    overflow-x: auto;
}

.input-container {
    /*border: 1px solid red;*/
    float: left;
    padding-right: 15px;
    padding-left: 15px;
}

.input-container span,
.input-container label,
    #faeu
{
    font-weight: 700;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding-bottom: 10px;

}

.input-container select,
.input-container input[type="text"]
{
    padding: 5px;
    border: 1px solid lightgray;
    border-radius: 5px;
    text-align: left;
    margin-top: 5px;
}

.input-container input[type="text"] {
    max-width: 3em;
}


table.price-table {
    max-width: 40%;
    line-height: inherit;
    font-size: 14px;
    float: left;
}

table.price-table tr th,
table.price-table tr td,
table.price-table
{
    border: 1px solid black;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

table.price-table:nth-child(2) {
    margin-left: 1em;
}

.divider {
    margin-bottom: 1em;
}

table.price-table tr td {
    padding: 3px 5px;
}

table.price-table tr:hover {
  background-color: lightgray;
}

/*table.price-table td:hover {*/
    /*background-color: gray;*/
/*}*/

table.job-board-table {
    max-width: 80%;
    font-size: 90%;
}

div.job-board-job {
    color: rgb(45,45,45);
    max-width: 50%;
    border-radius: 3px;
    border: 3px solid gray;
    padding: 0px 10px;
    margin-bottom: 15px;
}

div.job-board-job:hover {
    border: 3px solid darkblue;
}

#header {
    margin: -2px 0 0 0;
    padding: 7px 0;
    background-color: #fdd;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: .875rem;
    text-align: center;
}

#other-diamonds-notice {
    background-color:#b3e5fc;
    font-weight: bold;
}

.image-cropper {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 5%;
}

#price-report-form span {
    display: inline;
    padding-right: 10px;
}

#price-form-container {
    margin: 10px 0;
    background-color: rgba(241,255,58,0.43);
    border: 1px solid black;
    border-radius: 10px;
    padding-left: 10px;
}

.grid-price {
    text-decoration: none;
    color: black;
}

.grid-price:hover {
    text-decoration: underline;
}

.price-report-link {
    font-size: 80%;
}

/* Modal */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 10% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal label {
    /*color: green;*/
    font-weight: bold;
    display: inline-block;
    min-width: 10em;
    vertical-align: top;
}

.modal input[type=text] {
    text-align: left;
    max-width: 10em;
}