@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);body{
    background-color:#fff;
    text-align:center;
    padding:55px;
}

.stars-outer {
    position:relative;
    display:inline-block;
}

.stars-inner{
    position:absolute;
    top:0;
    left:0;
    white-space:nowrap;
    overflow:hidden;
    width:0;
}

.stars-outer:before {
    color:#ccc;
}

.stars-inner:before,.stars-outer:before {
    content: "\f005 \f005 \f005 \f005 \f005";
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    font-size:xx-large;
}

.stars-inner:before {
    color:#880015;
}

.center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.table-pointer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

table{
    width:100%;
    border-right:1px solid #999;
    table-layout:fixed;
}

th {
    overflow-y: visible !important;
    position: relative;
    height:30px;
    background-color:#880015;
    color:#fff;
    text-shadow:#012b4d 2px 2px 2px;
    text-align:center;
}

td {
    text-indent:5px;
    color:#444;
    border-bottom:1px solid #bbb;
    border-left:1px solid #bbb;
}

td.left {
    border-left:1px solid #2e638e;
}

td.right {
    border-right: 1px solid #2e638e;
}

td.bottom {
    border-bottom:1px solid #2e638e;
}

.grip {
    width:20px;
    height:15px;
    margin-top:-3px;
    margin-left:-9px;
    background-image:url(../assets/img/grip.993bdf7a.png);
    position:relative;
    z-index:88;
    cursor:e-resize;
}

.grip:hover {
    background-position-x:-20px;
}

.JCLRLastGrip .grip {
    background-position-y:-18px;
    left:-2px
}

.dragging .grip {
    background-position-x:-40px;
}

.sampleText{
    position:relative;
    width:100%;
}

.dotted {
    background-repeat:repeat-y;
}

#sample2Txt {
    float:right;
}

label {
    color:#0361ae;
}

.auto-style1 {
    font-size:xx-large;
}

.dragContainer {
    position: absolute;
    top: -70px;
    left: -31px;
    height: 70px;
    animation: move 2s ease-in-out 4s;
}

@keyframes move {
    0% {
        transform: translateX(0);
    }

    40% {
        transform: translateX(75%);
    }

    70% {
        transform: translateX(75%);
    }

    100% {
        transform: translateX(0);
    }
}

.dragIt {
    width: 100%;
    height: 100%;
}

.appraisal-grade {
    display: inline-block;
    max-width: 25px;
    border-radius: 5px;
    text-align: right;
}

.appraisal-grade:focus {
    outline: none;
}

.charitySelect {
    font-size: 1.5rem;
    width: min(90vw, 800px);
    box-sizing: border-box;
    padding: 0.15em 2em 0.15em 1.8em;
    text-align: center;
    text-align-last: center;
}

.charitySelect option {
    text-align: center;
}

.charity-search {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.charity-search-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0.65em;
    transform: translateY(-50%);
    font-size: 1.35rem;
    line-height: 1;
    pointer-events: none;
}

.calculator-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    width: 100%;
    margin: 1rem 0 0.5rem;
}

.calculator-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    z-index: 1;
}

.calculator-actions button,
.calculator-refresh {
    position: relative;
    z-index: 1;
    background-color: #fff;
}

@media (max-width: 540px) {
    .calculator-toolbar {
        flex-wrap: wrap;
    }
}

.stars-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

.stars-row .explain-wrapper:first-child {
    justify-self: start;
}

.stars-row .stars-outer {
    justify-self: center;
}

.stars-row .explain-wrapper--right {
    justify-self: end;
}

.explain-wrapper {
    display: inline-block;
}

.explain-btn {
    font-size: 0.95rem;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #880015;
    background-color: #fff;
    color: #880015;
    font-weight: bold;
}

.explain-btn:hover,
.explain-btn:focus {
    background-color: #880015;
    color: #fff;
}

.explain-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    width: auto;
    max-width: none;
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    background-color: #fff8f0;
    border: 1px solid #880015;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #333;
    box-sizing: border-box;
}

.explain-wrapper:hover .explain-box,
.explain-wrapper:focus-within .explain-box {
    display: block;
}

@media (max-width: 540px) {
    .stars-row {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .stars-row .explain-wrapper:first-child,
    .stars-row .stars-outer,
    .stars-row .explain-wrapper--right {
        justify-self: center;
    }
}

/* Force landscape (horizontal) presentation on phones.
   True orientation-locking is not available to a plain webpage
   (the Screen Orientation API's lock() only works inside an
   installed/fullscreen app and isn't supported on iOS Safari at
   all), so this rotates the page itself 90deg to fill the screen
   whenever a small/touch device is held in portrait.
   Rotating <body> (not <html>) is deliberate: Firefox largely
   ignores position/transform applied directly to the root <html>
   element, so anchoring the transform there fails silently in
   Firefox even though it works in Chrome/Safari. */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html {
        overflow-x: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    body {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
    }
}