* {

     font-family: Helvetica, sans-serif;
     margin: 0;
     box-sizing: unset;
 }

 /* hide elements with the "no-print" class when printing */
 @media print {

     #qtc-app-view {
         display: none !important;
     }

     /* show only the print container */
     #qtc-print-view {
         display: block !important;
     }

     /* Optional: reset positioning and layout */
     #_qtc-print-view {
         position: static !important;
         width: 100% !important;
     }

     /* show a few other selected divs in the print view */
     #received-sent-info {
         display: block !important;
     }

     /* control table page breaks */
     table {
         page-break-inside: auto;
     }

     tr {
         break-inside: avoid;
         page-break-inside: avoid;
     }

     td {
         break-inside: avoid;
     }

     /* Repeat headers */
     thead {
         display: table-header-group;
     }
 }

 @page {
     margin-top: 0.5in;
     margin-bottom: 0.5in;
     margin-left: 0.5in;
     margin-right: 0.5in;
 }

 @media screen {
     /* screen-specific styles can go here */

     #qtc-app-view {
         display: block;
     }

     #qtc-print-view {
         display: none;
     }
 }

 .checkbox-row {
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }

 .print-radiogram-monospace {
     margin-top: 1em;
     margin-bottom: 2em;
     font-family: monospace;
     font-size: 10pt;
 }

 .print-radiogram-heading {
     text-indent: 0pt;
     text-align: center;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 18pt;
     font-weight: bold;
 }

 body {
     /*
            width: 6.25in;
            height: 4.25in;
            margin: 0;
            padding: 0;
            */
     _font-size: 11pt;
 }


 .sheet {

     width: 5.875in;
     height: 3.875in;
     _left: 0.1875in;
     _top: 0.1875in;
     overflow: hidden;
     line-height: normal;
     /* clip anything that overflows */
     padding: 1em;
     margin: 10px;
     _width: fit-content;
     position: relative;
     background-color: lightgoldenrodyellow;
     border: 1px solid #999;
 }


 .radiogram-title {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-style: normal;
     font-weight: bold;
     text-decoration: none;
     font-size: 25pt;
     _margin-top: 0;
     margin: 0;
     margin-top: 0.2em;
 }

 h2 {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-weight: bold;
     text-decoration: none;
     font-size: 18pt;
     vertical-align: -1pt;
 }

 .h1 {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-style: normal;
     font-weight: bold;
     text-decoration: none;
     font-size: 25pt;
     _margin-top: 0;
 }

 .h2 {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-weight: bold;
     text-decoration: none;
     font-size: 13pt;
     vertical-align: -1pt;
     margin: 0;
 }

 .h3 {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-style: italic;
     font-weight: bold;
     text-decoration: none;
     font-size: 13pt;
     vertical-align: -1pt;
     margin: 0;
 }

 .h4 {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-style: italic;
     font-weight: bold;
     text-decoration: none;
     font-size: 11pt;
 }

 .s1 {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-style: italic;
     font-weight: bold;
     text-decoration: none;
     font-size: 12pt;
 }

 .s2 {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-style: italic;
     font-weight: bold;
     text-decoration: none;
     font-size: 6.5pt;
     vertical-align: 4pt;
 }

 .s3 {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-style: normal;
     font-weight: normal;
     text-decoration: none;
     font-size: 7pt;
     margin: 0;
 }

 .footer-text {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-style: normal;
     font-weight: normal;
     text-decoration: none;
     font-size: 6pt;
 }

 .s4 {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-style: normal;
     font-weight: normal;
     text-decoration: none;
     font-size: 7pt;
     margin: 0;
 }

 .s9 {
     color: #231F20;
     font-family: Helvetica, sans-serif;
     font-style: normal;
     font-weight: bold;
     text-decoration: none;
     font-size: 8pt;
     margin: 0;
 }

 table,
 tbody {
     vertical-align: top;
     overflow: visible;
     margin: 0
 }

 .card {

     border: 1px solid #999;
     border-radius: 8px;
     padding: 12px;
 }

 .divider {
     border: 0;
     border-top: 1px solid #ccc;
     margin: 16px 0;
 }

 .preamble-row {
     border-collapse: collapse;
 }

 .preamble-cell {
     border: 1px solid #666;
     padding: 6px 6px;
     padding-top: 0px;
     padding-bottom: 2px;
     min-width: 1em;
     text-align: center;
 }

 .print-preamble-cell {
     border: 1px solid #666;
     padding: 6px 6px;
     padding-top: 0px;
     padding-bottom: 2px;
     min-width: 1em;
     text-align: center;
     line-height: 0.7em;
 }

 .preamble-label {
     white-space: nowrap;
     top: 2px;
     left: 50%;
     font-size: 8pt;
     padding: 0 4px;
 }

 .print-preamble-row {
     border-collapse: collapse;
     border-width: 2px;
     border-color: black;
     border-style: solid;
 }

 .print-preamble-label {
     white-space: nowrap;
     top: 2px;
     left: 50%;
     font-size: 7pt;
     padding: 0 4px;
 }

 .preamble-content {
     white-space: nowrap;
     padding-top: 3pt;
     font-size: 9pt;
 }

 .address {
     margin: 1em;
     line-height: 1.3em;
     min-height: 7em;
     font-size: 10pt;
 }

 .text {
     margin: 1em;
     line-height: 1.3em;
     font-size: 10pt;
 }

 .signature {
     margin: 1em;
     font-size: 10pt;
 }

 input[type=text]::placeholder,
 textarea::placeholder {
     color: #aaa;
     opacity: 1;
     /* ensures full color in some browsers */
 }

 input[type=text],
 textarea {
     padding: 0 3px 0 3px;
     margin: 0px;
     margin-top: 2px;
     font-size: 10pt;
     line-height: 1.3em;
     color: black;

 }

 /* show a grayed out look if readonly attribute is set */
 input[type=text][readonly],
 textarea[readonly] {
     background-color: #f0f0f0;
     color: black;
 }

 textarea {
     text-transform: uppercase;
     font-size: 10pt;
     line-height: 1.3em;
 }

 .uppercase {
     text-transform: uppercase;
 }


 .deliverer {
     border: 1px solid #999;
     margin: 1em;
     width: fit-content;
     padding: 1em;
     background-color: lightgoldenrodyellow;
 }

 .action-button {
     background: #2563eb;
     color: white;
     font-size: 16px;
     padding: 10px;
     margin: 8px;
     border-radius: 6px;
     border: none;
     cursor: pointer;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 .action-button-small {
     background: #2563eb;
     color: white;
     font-size: 11px;
     padding: 6px 10px;
     margin: 4px;
     border-radius: 6px;
     border: none;
     cursor: pointer;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 button:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }

 .button-selected {
     font-weight: bold;
     background-color: lightblue;
 }

 .button-deselected {
     font-weight: normal;
     background-color: #f0f0f0;
 }

 .box-shadowed {
     border: 1px solid;
     box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
     /* border-width: 1 1 4 4; */
 }

 .errorMessage {
     padding: 5px;
     width: fit-content;
     background-color: #df0f0f96;
     font-weight: bold;
     display: none;
 }

 .infoMessage {
     color: darkgray;
     font-style: italic;
     display: none;
     width: fit-content;
 }

 select {
     font-size: 11pt;
 }

 /* Container gives perspective */
 .rotatable-card {
     width: 6.25in;
     height: 4.25in;
     perspective: 1000px;
 }

 /* The rotating element */
 .card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
     transition: transform 600ms ease;
 }


 .rotatable-card.is-flipped .card-inner {
     transform: rotateY(180deg);
 }

 .card-back {
     transform: rotateY(180deg);
 }

 /* Both faces */
 .card-face {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     backface-visibility: hidden;
     border-radius: 10px;
     font-size: 18px;
 }

 /* Upload Page */

 .upload-instructions {
     padding-top: 8pt;
     padding-bottom: 8pt;
     font-size: 12pt;
     line-height: 1.3em;
 }

 /* Tabs */

 .qtc-tabs {
     font-family: sans-serif;
 }

 /* tab bar */
 .qtc-tab-buttons {
     display: flex;
     gap: 4px;
     /* border-bottom: 1px solid #888; */
 }

 /* individual tab */
 .qtc-tab-button {
     padding: 6px 16px;
     border: 1px solid #888;
     border-bottom: none;
     background: #ddd;
     cursor: pointer;

     border-top-left-radius: 8px;
     border-top-right-radius: 8px;

     position: relative;
     top: 1px;
 }

 /* inactive tab hover */
 .qtc-tab-button:hover {
     background: #eee;
 }

 /* active tab */
 .qtc-tab-button.active {
     background: white;
     font-weight: 600;
     z-index: 2;
 }

 /* panel area */
 .qtc-tab-panels {
     border: 1px solid #888;
     padding: 8px;
     background: white;
     width: fit-content;
 }

 /* hide inactive panels */
 .qtc-tab-panel {
     display: none;
 }

 .qtc-tab-panel.active {
     display: block;
 }

 /* editable drop-down boxes */
 .select2-container--default .select2-selection--single {
     height: 21px;
     color: black;
 }

 .select2-container--default .select2-selection--single .select2-selection__rendered {
     line-height: 1.4em;
     font-size: 10pt;
     color: black;
 }

 .select2-results__option {
     font-size: 10pt;
     color: black;
 }

 .via-select {
     font-size: 10pt;
 }

 /* tables */

 .widefat {
     border-spacing: 0;
     width: 100%;
     clear: both;
     margin: 0
 }

 table.browse,
 th.browse,
 td.browse,
 table.stdtext,
 th.stdtext,
 td.stdtext {
     border: 1px solid black;
     /* This adds a 1px solid black border to all table parts */
 }

 table.browse,
 table.stdtext {
     border-collapse: collapse;
     /* This merges the borders into single lines */
     /* width: 100%; /* Optional: make the table span the width of its container */
 }

 table.fixed {
     table-layout: fixed
 }

 th.browse,
 td.browse,
 th.stdtext,
 td.stdtext {
     padding: 8px;
     /* Optional: adds space between content and border */
     text-align: left;
     /* Optional: aligns text to the left */
     font-size: 10pt;
 }


 /* For certain tables such as Browse, wrap text only in the Print view. */
 @media screen {

     th.nowrap,
     td.nowrap {
         text-wrap-mode: nowrap;
     }
 }

 @media print {

     .hide-from-print {
         display: none !important;
     }
 }

 .table-controls {
     width: 100%;
     height: 45px;
     /* display:inline; */
     padding-bottom: 0px;
 }

 .table-controls select {
     display: inline;
 }

 .table-controls input {
     margin-left: 5em;
 }

 .alternate,
 .striped>tbody>:nth-child(odd),
 ul.striped>:nth-child(odd) {
     background-color: #e2ecec;
 }

 .hidden {
     display: none;
 }

 .sorting-indicators {
     display: grid
 }

 .sorting-indicator {
     display: block;
     width: 10px;
     height: 4px;
     margin-top: 4px;
     margin-left: 7px
 }

 .sorting-indicator:before {
     font: normal 20px/1 dashicons;
     display: inline-block;
     padding: 0;
     top: -4px;
     left: -8px;
     line-height: .5;
     position: relative;
     vertical-align: top;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-decoration: none !important;
     color: #a7aaad
 }

 .sorting-indicator.asc:before {
     content: "\f142";
     content: "\f142" /''
 }

 .sorting-indicator.desc:before {
     content: "\f140";
     content: "\f140" /''
 }

 th.sorted.desc .sorting-indicator.desc:before {
     color: #1d2327
 }

 th.sorted.asc .sorting-indicator.asc:before {
     color: #1d2327
 }

 th.sorted.asc a:focus .sorting-indicator.asc:before,
 th.sorted.asc:hover .sorting-indicator.asc:before,
 th.sorted.desc a:focus .sorting-indicator.desc:before,
 th.sorted.desc:hover .sorting-indicator.desc:before {
     color: #a7aaad
 }

 th.sorted.asc a:focus .sorting-indicator.desc:before,
 th.sorted.asc:hover .sorting-indicator.desc:before,
 th.sorted.desc a:focus .sorting-indicator.asc:before,
 th.sorted.desc:hover .sorting-indicator.asc:before {
     color: #1d2327
 }

 tr.item-row:hover {
     background: lightgreen;
     cursor: pointer;
 }

 #hoverLightbox {
     position: absolute;
     display: none;
     z-index: 9999;
     max-width: 320px;
     padding: 12px 14px;
     border: 1px solid #888;
     border-radius: 8px;
     background: #fffefc;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
     font-size: 14px;
     line-height: 1.4;
     pointer-events: none;
     /* prevents flicker */
 }

 #hoverLightbox .title {
     font-weight: bold;
     margin-bottom: 6px;
 }

 #hoverLightbox .desc {
     color: #333;
 }

 /* config */

 .config-table th {
     background-color: #f0f0f0;
     font-weight: bold;
 }

 .config-table td,
 .config-table th {
     border: 1px solid #999;
     padding: 6px 12px;
     text-align: left;
     text-wrap: nowrap;
 }


 /* reporting */

 .stats-table th {
     background-color: #f0f0f0;
     font-weight: bold;
 }

 .stats-table td,
 .stats-table th {
     border: 1px solid #999;
     padding: 6px 12px;
     text-align: right;
     text-wrap: nowrap;
 }


 /* icon buttons */

 .config-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border: 1px solid #999;
     border-radius: 4px;
     background: #f5f5f5;
     padding: 0;
 }

 .config-btn svg {
     width: 24px;
     height: 24px;
     display: block;
 }

 .icon-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     min-width: 36px;
     flex-shrink: 0;
     padding: 0;
     border: 1px solid #999;
     border-radius: 4px;
     background: #f5f5f5;
     cursor: pointer;
 }

 .icon-btn:hover {
     background: #e8e8e8;
 }

 .icon-img {
     width: 24px;
     height: 24px;
     display: block;
 }

 .ui-datepicker-calendar {
     border: solid;
     background: lightblue;
     font-size: 10pt;
 }

 .ui-datepicker-header {
     border: solid;
     background: lightgray;
 }

 .ui-datepicker-prev {
     padding-right: 1em;
 }

 .datetime-hint {
     font-size: small;
 }

 .datetime-hint-future {
     color: red;
 }

 /* Custom confirm dialog styles */

 /* Main dialog shell */
 .qtc-dialog.ui-dialog {
     border: 1px solid #aeb8c2;
     border-radius: 10px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
     padding: 0;
     overflow: hidden;
     font-family: Arial, Helvetica, sans-serif;
 }

 /* Title bar */
 .qtc-dialog .ui-dialog-titlebar {
     background: #5f7488;
     color: #ffffff;
     border: none;
     border-radius: 0;
     padding: 10px 14px;
     font-size: 15px;
     font-weight: 600;
 }

 /* Close button */
 .qtc-dialog .ui-dialog-titlebar-close {
     border: none;
     background: transparent;
     color: #ffffff;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
 }

 /* Content area */
 .qtc-dialog .ui-dialog-content {
     background: #f5f7fa;
     color: #22313f;
     padding: 18px 16px 10px 16px;
     font-size: 14px;
     line-height: 1.45;
 }

 /* Button pane */
 .qtc-dialog .ui-dialog-buttonpane {
     margin: 0;
     padding: 10px 14px 14px 14px;
     border: none;
     background: #f5f7fa;
 }

 /* Buttons */
 .qtc-dialog .ui-dialog-buttonpane button {
     background: #d7dee6;
     color: #22313f;
     border: 1px solid #9aa8b5;
     border-radius: 6px;
     padding: 6px 14px;
     font-size: 13px;
     font-weight: 600;
     margin-left: 8px;
     cursor: pointer;
 }

 .qtc-dialog .ui-dialog-buttonpane button:hover {
     background: #c9d3dc;
 }

 .qtc-dialog .ui-dialog-buttonpane button:focus {
     outline: 2px solid #6f8aa3;
     outline-offset: 1px;
 }

 /* Primary action button */
 .qtc-dialog .qtc-primary-btn {
     background: #6b879f !important;
     color: #ffffff !important;
     border-color: #587187 !important;
 }

 .qtc-dialog .qtc-primary-btn:hover {
     background: #5d788f !important;
 }

 /* Optional icon/message layout */
 .qtc-dialog-message {
     display: flex;
     align-items: flex-start;
     gap: 12px;
 }

 .qtc-dialog-icon {
     width: 24px;
     height: 24px;
     flex: 0 0 24px;
     margin-top: 2px;
     opacity: 0.85;
 }

 .qtc-dialog-text {
     flex: 1 1 auto;
 }

 /* Suppress the standard "Close" button added by jQuery UI */
 .qtc-dialog .ui-dialog-titlebar-close {
     display: none;
 }

 /* application level styles */

 .qtc-app-div>div {
     margin-bottom: 12px;
 }