html {
    font-size: 14px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    margin: 0;
    background-image: url("/img/asphalt3.png");
    background-color: #cccccc;
    font-family: Arial, Arial, Helvetica, sans-serif;
}

.fixTableHead {
    overflow-y: auto;
    height: 180px;
}

    .fixTableHead thead th {
        position: sticky;
        top: 0;
    }

    .fixTableHead table {
        border-collapse: collapse;
        width: 100%;
    }

    .fixTableHead th, .fixTableHead td {
        padding: 8px 15px;
        border: 1px solid #529432;
    }

    .fixTableHead th {
        background: #ABDD93;
    }

.btn-toggle {
    padding: .25rem .5rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    background-color: transparent;
}

    .btn-toggle:hover,
    .btn-toggle:focus {
        color: rgba(var(--bs-emphasis-color-rgb), .85);
        background-color: var(--bs-tertiary-bg);
    }

    .btn-toggle::before {
        width: 1.25em;
        line-height: 0;
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
        transition: transform .35s ease;
        transform-origin: .5em 50%;
    }

[data-bs-theme="dark"] .btn-toggle::before {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

.btn-toggle[aria-expanded="true"] {
    color: rgba(var(--bs-emphasis-color-rgb), .85);
}

    .btn-toggle[aria-expanded="true"]::before {
        transform: rotate(90deg);
    }

.btn-toggle-nav a {
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
}

    .btn-toggle-nav a:hover,
    .btn-toggle-nav a:focus {
        background-color: var(--bs-tertiary-bg);
    }

.navbar-brand.active, .nav-link.active, .link-body-emphasis.active {
    background-color: bisque;
    border-radius: 8px;
}

.navbar {
    background-color: #EFF8FF !important;
}

.navbar-brand:hover, .nav-link:hover,
.navbar-brand:focus, .nav-link:focus {
    color: rgba(var(--bs-emphasis-color-rgb), .65);
    background-color: rgb(255, 255, 220);
    border-radius: 8px;
}

.btn-bd-primary {
    --bs-btn-font-weight: 600;
    --bs-btn-color: white;
    --bs-btn-bg: #7412ea;
    --bs-btn-border-color: #7412ea;
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: #8d5dc6;
    --bs-btn-hover-border-color: #8d5dc6;
    --bs-btn-focus-shadow-rgb: #7412ea;
    --bs-btn-active-color: #422169);
    --bs-btn-active-bg: #422169;
    --bs-btn-active-border-color: #422169;
}

.btn-bd-success {
    --bs-btn-font-weight: 600;
    --bs-btn-color: white;
    --bs-btn-bg: #4a9083;
    --bs-btn-border-color: #4a9083;
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: #1ca76a;
    --bs-btn-hover-border-color: #1ca76a;
    --bs-btn-focus-shadow-rgb: #4a9083;
    --bs-btn-active-color: #117448);
    --bs-btn-active-bg: #117448;
    --bs-btn-active-border-color: #117448;
}

.btn-bd-danger {
    --bs-btn-font-weight: 600;
    --bs-btn-color: white;
    --bs-btn-bg: #9c0404;
    --bs-btn-border-color: #730404;
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: #a93737;
    --bs-btn-hover-border-color: #a93737;
    --bs-btn-focus-shadow-rgb: #730404;
    --bs-btn-active-color: #da1a1a);
    --bs-btn-active-bg: #da1a1a;
    --bs-btn-active-border-color: #da1a1a;
}

.table-dark {
    --bs-table-bg: #117448 !important;
}

.main-content-nohdr {
    border-radius: 8px;
    background-color: beige;
    min-height: calc(100vh - 40px);
    margin-top: 4px;
    padding: 6px;
}

.main-content {
    border-radius: 8px;
    background-color: beige;
    min-height: calc(100vh - 96px);
    margin-top: 60px;
    padding: 6px;
}

#divHDGrid {
    min-height: calc(100vh - 380px);
}

#divHDGridII {
    min-height: calc(100vh - 248px);
}

div.form {
    display: block;
    text-align: center;
    margin-top: 3rem;
}

.pb-gap {
    padding-top: 1em;
}

.pb-after {
    page-break-after: always;
}

.pb-before {
    page-break-before: always;
}

@media print {
    * {
        margin: 0 !important;
        padding: 0 !important;
    }

    @page {
        size: letter landscape;
        max-height: 100%;
        max-width: 100%
    }
}

.start-form {
    border: 3px solid #f1f1f1;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    min-width: 50%;
    max-width: 520px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 10px 5px 5px silver;
}

.login-form {
    background-color: antiquewhite;
}

.forgot-form {
    background-color: aliceblue;
}

.reset-form {
    background-color: azure;
}

.narrow-form {
    border: 3px solid #f1f1f1;
    background-color: antiquewhite;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 90%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 10px 5px 5px silver;
}

.wide-form {
    border: 3px solid #f1f1f1;
    background-color: antiquewhite;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 90%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 10px 5px 5px silver;
}

input[readonly] {
    border-color: darkgrey;
    border-style: solid;
    border-width: 1px;
    background-color: rgb(235, 235, 228);
    color: rgb(84, 84, 84);
    padding: 2px 0px;
}

input.myBox {
    border: 0px solid #000000;
    border-bottom-width: 1px;
    background-color: transparent;
    color: #09073d !important;
    font-weight: bold;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

.imgfixheight {
    width: auto;
    height: 300px;
}

.FixedHeightContainer {
    float: right;
    height: 250px;
    width: 100%;
    padding: 2px;
    background: #800;
    color: white;
}

.FixedHeightList {
    height: 186px;
    width: 100%;
    padding: 2px;
    background-color: aliceblue;
    color: black;
    overflow: auto;
}

.Content {
    height: 210px;
    overflow: auto;
    background: #fff;
}

.required::after {
    content: "*";
    font-weight: bold;
    color: red;
}

.psw {
    float: right;
    padding-top: 6px;
}

@media screen and (max-width: 300px) {
    .psw {
        display: block;
        float: none;
    }
}

.center {
    margin: auto;
    width: 40%;
    padding: 10px;
}

.welcome h1 {
    text-align: center;
    font-size: 50px;
    text-transform: uppercase;
    color: #222;
    letter-spacing: 1px;
    font-family: "Playfair Display", serif;
    font-weight: 400;
}

    .welcome h1 span {
        margin-top: 5px;
        font-size: 15px;
        color: #444;
        word-spacing: 1px;
        font-weight: normal;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-family: "Raleway", sans-serif;
        font-weight: 500;
        display: grid;
        grid-template-columns: 1fr max-content 1fr;
        grid-template-rows: 7px 0;
        grid-gap: 20px;
        align-items: center;
    }

        .welcome h1 span:after, .welcome h1 span:before {
            content: " ";
            display: block;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            height: 5px;
            background-color: #f8f8f8;
        }

.plant-hdr {
    font-weight: bold;
    color: #180501 !important;
    border-bottom: 1px solid #ccc;
}

.header h1 {
    font-size: 30px;
    font-weight: 600;
    color: #fdfdfe;
    text-shadow: 0px 0px 5px #b393d3, 0px 0px 10px #b393d3, 0px 0px 10px #b393d3, 0px 0px 20px #b393d3;
}

.header2 h1 {
    font-family: 'Oswald', sans-serif;
    color: darkgreen;
    font-size: 1vw;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header3 {
    background-color: black;
}

    .header3 h1 {
        text-align: center;
        font-size: 36px;
        text-transform: uppercase;
        color: yellow;
        letter-spacing: 1px;
        font-family: "Playfair Display", serif;
        font-weight: 400;
    }

.header4 h1 {
    font-size: 30px;
    text-transform: uppercase;
    color: #bf0000;
    letter-spacing: 1px;
    font-family: "Playfair Display", serif;
    font-weight: 400;
}

.main h1 {
    margin-bottom: 1rem;
    padding: 4px;
    color: #343434;
    font-weight: bold;
    font-family: 'Ultra', sans-serif;
    font-size: 36px;
    line-height: 42px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px white, 0 3px #777;
    background-color: #a6cbff;
    border-left: 4px solid #0044a3;
}

h2.policy-header {
    font-size: 24px;
    font-weight: bold;
    color: #012604;
}

h3.policy-subheader {
    font-size: 20px;
    font-weight: bold;
    color: #39483a;
}

.headline h3 {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 12px 0;
    grid-gap: 22px;
}

    .headline h3:after, .headline h3:before {
        content: " ";
        display: block;
        border-bottom: 2px solid #ccc;
    }

hr.fancy-line {
    border: 0;
    height: 2px;
    position: relative;
    margin: 0.5em 0;
    opacity: 0.95;
}

    hr.fancy-line:before {
        top: -0.5em;
        height: 1em;
    }

    hr.fancy-line:after {
        content: '';
        height: 0.5em;
        top: 1px;
    }

    hr.fancy-line:before, hr.fancy-line:after {
        content: '';
        position: absolute;
        width: 100%;
    }

    hr.fancy-line, hr.fancy-line:before {
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%);
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
    }

#scrollToTopBtn {
    display: inline-block;
    background-color: blue;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 24px;
    line-height: 30px;
    width: 34px;
}

.div-middle {
    display: grid;
    place-items: center;
}

.img-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.logo-image {
    width: 100%;
    height: 152px;
    margin-bottom: 6px;
    background-color: #f0faf8;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-imageII {
    width: 100%;
    height: 152px;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-imageIII {
    width: 100%;
    max-width: inherit;
    margin: 2px 0;
    display: flex;
    justify-content: left;
    align-items: flex-start;
}

.logo-picture {
    display: block;
    margin: 0 auto;
    max-height: 152px;
    width: auto;
}

#calendar-picker {
    display: block;
}

.calendar-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.dx-calendar-cell:not(.dx-calendar-other-month) .weekend,
.dx-calendar-cell:not(.dx-calendar-other-month) .worked {
    text-shadow: none;
    font-weight: bold;
}

.dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
    color: #3030ff;
}

.dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
    color: #8080ff;
}

.dx-calendar-cell:not(.dx-calendar-other-month) .worked {
    color: #ff3030;
}

.dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .worked {
    color: #ff8080;
}

.dx-calendar-week-number-cell .week-number {
    font-style: italic;
}

.cal-caption {
    font-weight: 500;
    font-size: 18px;
}

.cal-options {
    padding: 10px;
    background-color: rgba(191, 191, 191, 0.15);
}

.cal-option {
    margin-top: 10px;
}

.highlighted-date {
    background-color: #efffd8;
    color: #09073d;
    font-weight: bold;
}

.divChart {
    height: 200px;
}

.divChart2 {
    height: 400px;
    max-width: 770px;
    margin: auto;
}

.divChart3 {
    height: 300px;
    width: 100%;
}

.divChart4 {
    height: 600px;
    width: 100%;
    display: inline-block;
}

#divHDCharts div {
    margin: 0 1px 1px 1px;
    height: 400px;
    width: 49.6%;
    display: inline-block;
}

.boxChart {
    margin: 0 1px 4px 1px;
    height: 400px;
    border: 2px solid #e7e7e7;
}

.annotation {
    font-size: 12px;
}

.chart-border {
    width: 60px;
    height: 40px;
    stroke: rgba(191, 191, 191, 0.25);
    stroke-width: 1px;
    fill: transparent;
}

.pies-container {
    margin: auto;
    width: 90%;
}

.doughnut {
    height: 300px;
    margin: 4px;
}

#divGauge {
    width: 98%;
    margin: 0 auto;
}

    #divGauge .gauge-element {
        height: 400px;
        width: 33%;
        float: left;
    }

.gauge-half-circle {
    display: inline-block;
    width: 50%;
}

.dx-selectbox {
    margin: 10px auto 0;
    width: 200px;
}

#gauge-demo::after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.long-title h3 {
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    margin-bottom: 20px;
    color: #212f3c;
}

.dx-datagrid-headers {
    background-color: black !important;
    color: white;
    font-weight: bold;
}

.label-small {
    font-weight: 700;
    font-size: 11px;
    color: #6f6f6f;
    margin-bottom: 0 !important;
}

.smallgray {
    font-size: 11px;
    color: darkgray;
}

.adpfont {
    font-size: 12px;
}

.dytphhdr {
    line-height: 2em;
}

.fdrno {
    font-weight: bold;
    line-height: 5em;
}

.fdrnodry {
    font-weight: bold;
    margin: .5rem 0 0 -3.5rem;
    color: black;
}

.fdrnolq {
    margin-top: 1rem;
    font-weight: bold;
    color: black;
}

.drytph {
    font-size: 2em;
    font-weight: bold;
    line-height: 1em;
}

.adpdevhdr {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.adpvfdroff {
    background-image: url('/img/ADP/vir_feeder_off.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
    border-bottom: 2px solid gray;
}

.adpvfdron {
    background-image: url('/img/ADP/vir_feeder_on.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
    border-bottom: 2px solid gray;
}

.adprfdroff {
    background-image: url('/img/ADP/rap_feeder_off.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
    border-bottom: 2px solid gray;
}

.adprfdron {
    background-image: url('/img/ADP/rap_feeder_on.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
    border-bottom: 2px solid gray;
}

.adpscale {
    background-image: url('/img/ADP/feeder_scale.png');
    background-size: 90% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
}

.adppoi {
    background-image: url('/img/ADP/POI.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
    border: 1px solid white;
}

.adpbhtoff {
    background-image: url('/img/ADP/dust_silo_off.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
}

.adpbhton {
    background-image: url('/img/ADP/dust_silo_on.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
}

.adpbhboff {
    background-image: url('/img/ADP/depletion_dust_silo_off.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
    border-bottom: 2px solid gray;
}

.adpbhbon {
    background-image: url('/img/ADP/depletion_dust_silo_on.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
    border-bottom: 2px solid gray;
}

.adpmpoff {
    height: 135px;
    border-bottom: 2px solid gray;
}

.adpmpon {
    background-image: url('/img/ADP/level_pod_on.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
    border-bottom: 2px solid gray;
}

.adptank {
    background-image: url('/img/ADP/ac_tank.png');
    background-size: 70% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 135px;
    padding-top: 1rem;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid gray;
}

.adptanksel {
    background-image: url('/img/ADP/ac_tank_select.png');
    background-size: 70% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 135px;
    padding-top: 1rem;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid gray;
}

.adptnkhdr {
    height: 135px;
    padding-top: 1rem;
    text-align: end;
    color: #6c757d;
}

.adptankinv {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 2em;
}

.adppumpoff {
    background-image: url('/img/ADP/pump_off.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
    border-top: 2px solid gray;
}

.adppumpon {
    background-image: url('/img/ADP/pump_on.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 135px;
    border-top: 2px solid gray;
}

.adpliquidoff {
    background-image: url('/img/ADP/liquid_feeder_off.png');
    background-size: 90% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 135px;
    border-top: 2px solid gray;
    border-left: 2px solid gray;
}

.adpliquidon {
    background-image: url('/img/ADP/liquid_feeder_on.png');
    background-size: 90% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 135px;
    border-top: 2px solid gray;
    border-left: 2px solid gray;
}

#divDataLog {
    background-color: whitesmoke;
    width: 363px;
    max-width: 100%;
    height: 95px;
    overflow: auto;
    white-space: pre;
    line-height: 2;
}

.progress-bar {
    display: inline-block;
    padding: 0;
    text-align: right;
}

    .progress-bar span {
        background-color: yellow;
        display: inline-block;
        width: 0%;
        height: 86%;
        margin-top: 1px;
    }

.bg-silver {
    background-color: #95a5a6 !important;
}

.bg-bloodred {
    background-color: #70050b !important;
}

.bg-pink {
    background-color: #fff8fe !important;
}

.dark-red {
    color: #641e16 !important;
}

.dark-blue {
    color: #000080 !important;
}

.dark-gray {
    color: #212f3c !important;
}

.light-bloodred {
    color: #f54927;
}

.light-peach {
    color: #fcc6bb;
}

.content-center {
    text-align: center !important;
}

.hidden {
    display: none;
}

.frame {
    --corner: 1em;
    --bg: pink;
    background-image: radial-gradient(calc(2 * var(--corner)) at 0 0, transparent 50%, var(--bg) 50%, var(--bg) 99.99%, transparent 99.99%), /* Safari will break if we put 100% */
    radial-gradient(calc(2 * var(--corner)) at 0 100%, transparent 50%, var(--bg) 50%, var(--bg) 99.99%, transparent 99.99%), radial-gradient(calc(2 * var(--corner)) at 100% 100%, transparent 50%, var(--bg) 50%, var(--bg) 99.99%, transparent 99.99%), radial-gradient(calc(2 * var(--corner)) at 100% 0, transparent 50%, var(--bg) 50%, var(--bg) 99.99%, transparent 99.99%), linear-gradient(to right, transparent var(--corner), var(--bg) var(--corner), var(--bg) calc(100% - var(--corner)), transparent calc(100% - var(--corner))), linear-gradient(to bottom, transparent var(--corner), var(--bg) var(--corner), var(--bg) calc(100% - var(--corner)), transparent calc(100% - var(--corner)));
    margin: 0 auto;
    padding: 1rem;
}

.log-list {
    color: #555;
    font-size: 16px;
    padding: 0 !important;
    width: 100%;
    font-family: 'Courier New', monospace;
    border: 1px solid #dedede;
}

    .log-list li {
        list-style: none;
        border-bottom: 1px dotted #ccc;
        height: auto;
        padding: 10px;
        font-weight: 800;
    }

        .log-list li:nth-child(even) {
            background-color: #ede1e1;
        }

        .log-list li:nth-child(odd) {
            background-color: #ffffff;
        }

        .log-list li:hover {
            background-color: #f0f0f0;
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            -ms-transition: all 0.2s;
            -o-transition: all 0.2s;
        }

.scrollable-div {
    width: 100%;
    height: calc(100vh - 20rem);
    overflow-x: hidden;
    overflow-y: auto;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    background-color: cornsilk;
}

/* Big Screens */
@media only screen and (min-width:993px) {
    html {
        font-size: 16px;
    }

    h2.policy-header {
        font-size: 30px
    }

    h3.policy-subheader {
        font-size: 26px
    }

    .main-sidebar {
        height: calc(100vh - 165px);
        overflow-y: auto;
    }

    .md-width-30 {
        width: 30%;
    }

    .md-width-40 {
        width: 40%;
    }

    .md-width-50 {
        width: 50%;
    }

    .md-width-60 {
        width: 60%;
    }
}

/* Small Screens */
@media only screen and (max-width: 992px) {
    label {
        display: block;
    }

    .welcome h1 {
        font-size: 24px;
    }

        .welcome h1 span {
            font-size: 10px;
            display: inherit;
        }

    .headline h3 {
        display: inherit;
    }

    #divHDGrid {
        height: calc(100vh - 100px);
    }

    /* Force table to not be like tables anymore */
    #no-more-tables table,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        #no-more-tables thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    #no-more-tables tr {
        border: 1px solid #ccc;
    }

    #no-more-tables td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

        #no-more-tables td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }

        /*
	Label the data
	*/
        #no-more-tables td:before {
            content: attr(data-title);
        }

    .dont-break-out {
        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;
        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;
        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .dont-break-out-2 {
        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;
        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;
    }

    .content-center {
        text-align: left !important;
    }
}