@charset "utf-8";

/* --- CHANGELOG: -----------------------------------------------------------------------------------------------------
2025-06-10: Integrated custom fonts into local files
2025-04-19: General tweaks
2025-04-05: Started styles changelog, imported styles from old project
-------------------------------------------------------------------------------------------------------------------- */


/* --- FONTS ------------------------------------------------------------------------------------------------------- */

@font-face {
   font-family: 'Black Ops One';
   src: url('fonts/blackopsone.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: block;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Noto Sans';
   src: url('fonts/notosans.woff2') format('woff2');
   font-weight: 400;
   font-stretch: 100%;
   font-style: normal;
   font-display: block;
   font-variation-settings: "wdth" 100;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Goldman';
   src: url('fonts/goldman.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: block;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* OLD FONT CODE
.black-ops-one-regular {
   font-family: "Black Ops One", system-ui;
   font-weight: 400;
   font-style: normal;
}
.noto-sans-regular {
   font-family: "Noto Sans", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   font-variation-settings: "wdth" 100;
}
.goldman-regular {
  font-family: "Goldman", sans-serif;
  font-weight: 400;
  font-style: normal;
}
*/



/* --- GENERAL STYLING --------------------------------------------------------------------------------------------- */

body {
   background-color: rgba(0, 0, 0, 1);
}

.container {
   font-family: "Noto Sans", sans-serif;   /* FONT CHOICES: Arial, Helvetica, Verdana */
   font-size: 18px;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   color: rgba(200, 200, 200, 1);
   height: auto;
   width: auto;   /* 1000px to 1200px is good for most aspect ratio displays, or use auto, was 1050px */
   margin-right: auto;
   margin-left: auto;

   background-color: rgba(0, 0, 0, 1);
   background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url("images/darkwoodnew_small.png");
   /* background-image: url("images/darkwoodnew_small.png"); */
   background-size: fill;
   background-repeat: repeat;

   padding: 25px;
   border: medium solid #FF0000;
   border-radius: 6px;
}

.container-inner {
   overflow-x: visible;
}

.center {
   text-align: center;
   vertical-align: middle;
}

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

.right {
   text-align: right;
   vertical-align: middle;
}

.justify {
   text-align: justify;   /* ONLY WORKS IN IE? */
   vertical-align: middle;
}

h1 {
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   font-style: italic;
   font-weight: normal;
   font-variant: normal;
   margin: 0;
   padding: 0;
}

h2 {
   font-family: "Goldman", sans-serif;
   font-size: 20px;
   font-style: normal;
   font-weight: bold;
   margin: 0;
   padding: 0;
}

h3 {
   font-family: "Black Ops One", system-ui;
   font-size: 60px;
   font-weight: normal;
   color: rgba(255, 0, 0, 1);
   margin: 0;
   padding: 0;
}

h4 {
   font-family: "Goldman", sans-serif;
   font-size: 30px;
   font-weight: bolder;
   margin: 0;
   padding: 0;
}

h5 {
   font-family: "Noto Sans", sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: bold;
   margin: 0;
   padding: 0;
}

vr {
   border-color: Red;
   width: 1px;
   height: 20px;
   display: inline;
}


/* --- SELECTION STYLING ------------------------------------------------------------------------------------------- */

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 1) inset;
}

input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
   -webkit-box-shadow: 0 0 0px 1000px rgba(255, 240, 223, 1) inset;
}


/* Disabled until select highlight can be styled
::selection {
   background-color: #352e7e;
   color: #fff;
}
::moz-selection {
   background-color: #352e7e;
   color: #fff;
}
::-o-selection {
   background-color: #352e7e;
   color: #fff;
}
::-ms-selection {
   background-color: #352e7e;
   color: #fff;
}
::-webkit-selection {
   background-color: #352e7e;
   color: #fff;
}
*/


/* --- TABLE STYLING ----------------------------------------------------------------------------------------------- */

.table_index {
   font-family: Helvetica, sans-serif;
   font-size: 18px;
   font-weight: normal;
   width: 100%;
   height: 50px;
   vertical-align: center;
   border-collapse: collapse;
}

.table_generic {
   font-family: 'Goldman', sans-serif;
   font-size: 16px;
   font-weight: normal;
   width: 100%;
   height: 50px;
   vertical-align: center;
   border-collapse: collapse;
}

.table_header {
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   text-align: center;
   background-color: Black;
   color: White;
}

.table_header2 {
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   text-align: left;
   padding: 4px;
   background-color: rgba(210, 210, 210, 1);
   color: Black;
}

.trheader {
   background-color: rgba(220, 220, 220, 1);
   text-align: center;
}

.infotitle {
   font-family: Helvetica, sans-serif;
   font-size: 15px;
   font-weight: bold;
   text-align: right;
   padding-right: 4px;
}

.infoinput {
   padding-left: 4px;
}


/* --- INPUT TYPES, SELECT AND TEXTAREA STYLING -------------------------------------------------------------------- */

input[type="text"] {
   font-family: monospace;
   font-size: 18px;
   background-color: #FFFFFF;
   border: 1px solid #000000;
   border-radius: 2px;
   padding: 3px 3px;
   margin: 2px 0px 2px 0px; /* top, right, bottom, left */
   box-sizing: border-box;
   outline: none;
   transition: all 0.1s ease-out;
}

input[type="text"]:hover {
   outline: none;
   border-color: #FF0000;
}

input[type="text"]:focus {
   outline: none;
   border-color: #FF0000;
   box-shadow: 0 0 6px #FF0000;
}

input[type="date"] {
   font-size: 18px;
   background-color: #FFFFFF;
   border: 1px solid #000000;
   border-radius: 2px;
   padding: 2px 3px;
   margin: 2px 0px 2px 0px; /* top, right, bottom, left */
   box-sizing: border-box;
   outline: none;
   transition: all 0.1s ease-out;
}

input[type="date"]:hover {
   outline: none;
   border-color: #FF0000;
}

input[type="date"]:focus {
   outline: none;
   border-color: #FF0000;
   box-shadow: 0 0 6px #FF0000;
}

textarea {
   font-size: 16px;
   width: 100%;
   height: auto;
   padding: 4px 4px;
   margin: 3px 0px 3px 0px; /* top, right, bottom, left */
   box-sizing: border-box;
   border: 1px solid #000000;
   border-radius: 2px;
   background-color: White;
   resize: none;
   outline: none;
   transition: all 0.1s ease-out;
}

textarea:hover {
   outline: none;
   border-color: #FF0000;
}

textarea:focus {
   outline: none;
   border-color: #FF0000;
   box-shadow: 0 0 6px #FF0000;
}

select {
   font-family: monospace;
   font-size: 18px;
   background-color: #FFFFFF;
   border: 1px solid #000000;
   border-radius: 2px;
   padding: 3px 3px;
   margin: 2px 0px 2px 0px; /* top, right, bottom, left */
   box-sizing: border-box;
   outline: none;
   transition: all 0.1s ease-out;
}

select:hover {
   outline: none;
   border-color: #FF0000;
}

select:focus {
   outline: none;
   border-color: #FF0000;
   box-shadow: 0 0 6px #FF0000;
}

select option {
   background-color: #FFFFFF;
   color: Black;
   border: none;
   font-size: 16px;
}














/* working LOL

input[type="text"]:hover {
   outline: none;
   border-color: #000000;
   box-shadow: 0 0 8px #000000;
   transition: 0.2s;
}

input[type="text"]:focus {
   outline: none;
   border-color: #FF0000;
   box-shadow: 0 0 8px #FF0000;
   transition: 0.2s;
}


*/

/* BELOW ARE STYLES FOR INPUT WHICH HAVE NOT YET BEEN EDITED FROM THERADOCS... */


input[type="text"]:disabled {
   font-family: monospace;
   font-size: 16px;
   background-color: White;
   border: 1px solid #000000;
   padding: 3px 4px;
   margin: 2px 0;
   box-sizing: border-box;
   outline: none;
}

input[type="text"]:read-only {
   font-family: monospace;
   font-size: 16px;
   background-color: White;
   border: 1px solid #000000;
   padding: 3px 4px;
   margin: 2px 0;
   box-sizing: border-box;
   outline: none;
}

input[type="time"] {
   font-size: 16px;
   background-color: White;
   border: 1px solid #0000FF;
   padding: 1px 6px;
   margin: 2px 0;
   box-sizing: border-box;
   outline: none;
}

input[type="time"]:hover,
input[type="time"]:focus {
   border: 1px solid #FF8C00;
   background-color: rgba(255, 240, 223, 1);
   outline: none;
}

input[type="number"] {
   font-family: monospace;
   font-size: 16px;
   background-color: White;
   border: 1px solid #0000FF;
   padding: 3px 4px;
   margin: 2px 0;
   outline: none;
}

input[type="number"]:hover,
input[type="number"]:focus {
   border: 1px solid #FF8C00;
   background-color: rgba(255, 240, 223, 1);
   outline: none;
}

input[type="file"] {
   font-family: monospace;
   font-size: 14px;
   padding: 3px 6px;
   margin: 2px 0;
   box-sizing: border-box;
}

input[type="password"] {
   font-family: monospace;
   font-size: 16px;
   background-color: White;
   border: 1px solid #0000FF;
   padding: 3px 4px;
   margin: 2px 0;
   box-sizing: border-box;
   outline: none;
}

input[type="password"]:hover,
input[type="password"]:focus {
   border: 1px solid #FF8C00;
   background-color: rgba(255, 240, 223, 1);
   outline: none;
}

select:disabled,
select:disabled:hover,
select:disabled:focus {
   background-color: rgba(230, 230, 230, 1);
   border: 1px solid rgba(100, 100, 100, 1);
   color: rgba(100, 100, 100, 1);
}

.select_title {
   font-family: Helvetica, sans-serif;
   font-size: 18px;
   font-weight: bold;
   background-color: White;
   border: 1px solid #0000FF;
   margin: 0px 0;
   padding: 0px 0px;
   outline: none;
}

.select_title:hover,
.select_title:focus {
   border: 1px solid #FF8C00;
   background-color: rgba(255, 240, 223, 1);
   outline: none;
}






::placeholder, input[type=date]:invalid::-webkit-datetime-edit {
   color: rgba(0, 0, 0, 0.6);
   opacity: 0.6;
}


/* PER FORM STYLING?
input[type="range"] {
   -webkit-appearance: none;
   appearance: none;
   display: inline;
   outline: none;
   height: 24px;
   padding-left: 3px;
   padding-right: 3px;
   border: 1px solid #0000FF;
   background-color: #FFFFFF;
}

input[type="range"]:hover,
input[type="range"]:focus {
   border: 1px solid #FF8C00;
   background-color: rgba(255, 240, 223, 1);
   outline: none;
}

input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 8px;
   height: 20px;
   border: none;
   background-color: rgba(0, 0, 0, 1);
}
*/


/* --- BUTTONS ----------------------------------------------------------------------------------------------------- */

input[type="button"] {
   font-family: "Goldman", sans-serif;
   font-size: 18px;
}

input[type="submit"] {
   font-family: "Goldman", sans-serif;
   font-size: 18px;
}

input[type="reset"] {
   font-family: "Goldman", sans-serif;
   font-size: 18px;
}

input.toggle-button[type="button"] {
   font-family: "Goldman", sans-serif;
   font-weight: normal;
   font-size: 14px;
}

button {
   font-family: "Goldman", sans-serif;
   font-size: 18px;
}

.text_button {
   font-family: "Goldman", sans-serif;
   font-size: 18px;
   border: 1px solid rgba(166, 166, 166, 1);
   border-radius: 1.5px;
   background: linear-gradient(rgba(247, 247, 247, 1), rgba(222, 222, 222, 1));
   color: Black;
   display: inline;
   padding: 2px 7px 2px 7px; /* top, right, bottom, left */
   text-decoration: none;
   outline: none;
   cursor: default;
}

.text_button:hover {
   border: 1px solid rgba(118, 118, 118, 1);
}

.text_button:active {
   background: linear-gradient(rgba(222, 222, 222, 1), rgba(247, 247, 247, 1));
}


/* --- HYPERLINK STYLING ------------------------------------------------------------------------------------------- */

/* --- Correct ordering for styles ---------
a:link = standard, unvisited
a:visited = has been to
a:visited:hover = has been to and hover over
a:visited:active = has been to and currently clicking
a:hover = hover over
a:active = currently clicking
----------------------------------------- */

a:link {
   color: rgba(0,0,255,1); /* #0000FF */
   text-decoration: none;
}

a:visited {
   color: rgba(0,0,255,1); /* #00FF00 */
   text-decoration: none;
}

a:visited:hover {
   color: #FF8C00; /* #FF0000 */
   text-decoration: none;
}

a:visited:active {
   color: rgba(255,0,0,1); /* #FF8C00 */
   text-decoration: solid;
}

a:hover {
   color: #FF8C00; /* #FF0000 */
   text-decoration: none;
}

a:active {
   color: rgba(255,0,0,1); /* #FF8C00 */
   text-decoration: solid;
}





.a_text_button:link {
   color: Black;
   text-decoration: none;
}

.a_text_button:visited {
   color: Black;
   text-decoration: none;
}

.a_text_button:hover {
   color: Black;
   text-decoration: none;
}

.a_text_button:active {
   color: Black;
   text-decoration: none;
}

.mailto_link,
.mailto_link:link,
.mailto_link:active,
.mailto_link:visited {
   color: rgba(200, 200, 200, 1);
   text-decoration: none;
}

.mailto_link:hover {
   color: rgba(255, 255, 255, 1);
   text-decoration: none;
}


/* --- CUSTOM RADIO BUTTONS ---------------------------------------------------------------------------------------- */



/* NEW WAY THAT WORKS WITH REQUIRED ATTRIBUTE, NOT YET IMPLEMENTED

input[type="radio"] {
   visibility: visible;
   outline: none;
   z-index: -1;
}

input[type="radio"]:after {
   display: inline-block;
   visibility: visible;
   content: '';
   position: relative;
   top: -2px;
   left: -2px;
   width: 14px;
   height: 14px;
   border-radius: 100%;
   border: 1px solid #0000FF;
   background-color: #FFFFFF;
   outline: none;
}

input[type="radio"]:hover:after {
   border: 1px solid #FF8C00;
   background-color: rgba(255, 240, 223, 1);
}

input[type="radio"].custom-radio-green:checked:after {
   background-color: Green;
   border: 1px solid Black;
   outline: none;
}

input[type="radio"].custom-radio-blue:checked:after {
   background-color: rgba(0, 0, 200, 1);
   border: 1px solid Black;
   outline: none;
}

input[type="radio"].custom-radio-cyan:checked:after {
   background-color: rgba(0, 255, 255, 1);
   border: 1px solid Black;
   outline: none;
}

input[type="radio"].custom-radio-yellow:checked:after {
   background-color: Yellow;
   border: 1px solid Black;
   outline: none;
}

input[type="radio"].custom-radio-orange:checked:after {
   background-color: Orange;
   border: 1px solid Black;
   outline: none;
}

input[type="radio"].custom-radio-red:checked:after {
   background-color: Red;
   border: 1px solid Black;
   outline: none;
}

input[type="radio"].custom-radio-magenta:checked:after {
   background-color: rgba(255, 0, 255, 1);
   border: 1px solid Black;
   outline: none;
}

input[type="radio"].custom-radio-purple:checked:after {
   background-color: rgba(128, 0, 255, 1);
   border: 1px solid Black;
   outline: none;
}

input[type="radio"].custom-radio-gray:checked:after,
input[type="radio"].custom-radio-grey:checked:after {
   background-color: rgba(88, 88, 88, 1);
   border: 1px solid Black;
   outline: none;
}

*/






/* CURRENT WAY, BUT DOESNT WORK WITH REQUIRED ATTRIBUTE */

input[type="radio"] {
   display: none;
   outline: none;
   z-index: -1;
}

.graphical-radio1,
.graphical-radio2,
.graphical-radio3,
.graphical-radio4,
.graphical-radio5,
.graphical-radio6,
.graphical-radio7,
.graphical-radio8,
.graphical-radio9 {
   display: inline-block;
   position: relative;
   top: 2px;
   width: 14px;
   height: 14px;
   background-color: #FFFFFF;   /* was rgba(0, 0, 0, 0.0) */
   border: 1px solid #0000FF;   /* was Black */
   border-radius: 100%;
}

input[type="radio"]:checked + .graphical-radio1 {
   background-color: Green;
   border: 1px solid Black;
   outline: none;
}

input[type="radio"]:checked + .graphical-radio2 {
   background-color: rgba(0, 0, 200, 1);
   border: 1px solid Black;
   outline: none;
}

input[type="radio"]:checked + .graphical-radio3 {
   background-color: Yellow;
   border: 1px solid Black;
   outline: none;
}

input[type="radio"]:checked + .graphical-radio4 {
   background-color: Orange;
   border: 1px solid Black;
   outline: none;
}

input[type="radio"]:checked + .graphical-radio5 {
   background-color: Red;
   border: 1px solid Black;
   outline: none;
}

input[type="radio"]:checked + .graphical-radio6 {
   background-color: rgba(88, 88, 88, 1);
   border: 1px solid Black;
   outline: none;
}

input[type="radio"]:checked + .graphical-radio7 {
   background-color: rgba(0, 255, 255, 1);
   border: 1px solid Black;
   outline: none;
}

input[type="radio"]:checked + .graphical-radio8 {
   background-color: rgba(255, 0, 255, 1);
   border: 1px solid Black;
   outline: none;
}

input[type="radio"]:checked + .graphical-radio9 {
   background-color: rgba(128, 0, 255, 1);
   border: 1px solid Black;
   outline: none;
}

label:hover > .graphical-radio1,
label:hover > .graphical-radio2,
label:hover > .graphical-radio3,
label:hover > .graphical-radio4,
label:hover > .graphical-radio5,
label:hover > .graphical-radio6,
label:hover > .graphical-radio7,
label:hover > .graphical-radio8,
label:hover > .graphical-radio9 {
   border: 1px solid #FF8C00;   /* this style wasnt here */
   background-color: rgba(255, 240, 223, 1);   /* was rgba(200, 200, 200, 1) */
}


/* --- CUSTOM CHECKBOX --------------------------------------------------------------------------------------------- */

input[type="checkbox"] {
   display: none;
   outline: none;
   z-index: -1;
}

.graphical-checkbox1 {
   display: inline-block;
   position: relative;
   top: 2px;
   width: 14px;
   height: 14px;
   background-color: #FFFFFF;
   border: 1px solid #0000FF;
}

.graphical-checkbox1:hover,
label:hover > .graphical-checkbox1 {
   background-image: url("images/check_hover.png");
   background-repeat: no-repeat;
   background-position: center center;
   background-color: rgba(255, 240, 223, 1);
   border: 1px solid #FF8C00;
   outline: none;
}

input[type="checkbox"]:checked + .graphical-checkbox1 {
   background-image: url("images/check.png");
   background-repeat: no-repeat;
   background-position: center center;
   border: 1px solid #FF8C00;
   outline: none;
}

.disabled-checkbox {
   display: inline-block;
   position: relative;
   top: 2px;
   width: 14px;
   height: 14px;
   background-color: rgba(230, 230, 230, 1);
   border: 1px solid rgba(100, 100, 100, 1);
}


/* --- CUSTOM PROGRESS BAR STYLES FOR LONG FORMS ------------------------------------------------------------------- */

.progress-bar-table {
   width: 100%;
   height: auto;
   border-collapse: collapse;
   table-layout: fixed;
   margin-top: 8px;
   margin-bottom: 8px;
   border: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
}

.progress-bar-row {
   font-family: Arial, sans-serif;
   font-weight: bold;
   font-size: 14px;
   text-align: center;
   vertical-align: middle;
   border: 1px solid Black;
}

.progress-bar-start {
   background: linear-gradient(to right, rgba(180, 180, 180, 1), rgba(200, 200, 200, 1));
}

.progress-bar-filling {
   background: linear-gradient(to right, rgba(0, 160, 0, 1), rgba(200, 200, 200, 1));
}

.progress-bar-filled {
   background: linear-gradient(to right, rgba(0, 60, 0, 1), rgba(0, 160, 0, 1));
}

.progress-bar-unfilled {
   background: linear-gradient(to right, rgba(200, 200, 200, 1), rgba(180, 180, 180, 1));
}

.progress-bar-complete {
   background: linear-gradient(to right, rgba(0, 160, 0, 1), rgba(0, 200, 0, 1));
}

#progress-bar-span td {
   padding: 2px;
   border: none;
}


/* --- OTHER STYLING ----------------------------------------------------------------------------------------------- */

fieldset {
   border: 0;
   display: inline;
}

.pagebreak {
   page-break-before: always;
   page-break-after: always;
}

.header_image {
   position: absolute;
   width: 95px;
   height: auto;
   margin-top: -10px;
}

.header_image_forms {
   position: absolute;
   width: 55px;
   height: auto;
   margin-top: -10px;
}

.copy_type {
   position: absolute;
   margin-top: -5px;
   margin-left: 860px;
}

.index_version {
   font-family: monospace;
   font-size: 14px;
   float: right;
   color: rgba(255, 255, 255, 0.20);
}

.category_header {
   padding-top: 35px;
   font-size: 18px;
   color: rgba(0, 0, 200, 1);
   background-color: rgba(255, 255, 255, 1);
}

.clickspan {
   color: #0000FF;
}

.clickspan:hover {
   color: #FF8C00 !important;
}

.reqmark {
   font-family: Verdana, sans-serif;
   font-size: 14px;
   vertical-align: middle;
   color: #FF0000;
   margin-left: 0px;
}

.fce_pagetitle {
   font-weight: bold;
   display: inline-block;
   margin-top: 8px;
   color: #171592;
}

.fce_questions {
   font-weight: bold;
   color: #171592;
}

.loading {
   color: blue;
   font-size: 20px;
   font-weight: bold;
   position: absolute;
   margin-top: 0px;
   margin-left: 80px;
}

.no-autofill {
   opacity: 0.0;
   width: 1px;
   height: 1px;
   position: absolute;
   left: -999px;
}

.cell_label {
   display: inline-block;
   width: 100%;
   height: 100%;
   vertical-align: middle;
}

.index_form_usable,
.index_form_complete {
   display: inline-block;
   background-image: url("images/check2_yes.png");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   vertical-align: middle;
   width: 16px;
   height: 16px;
}

.index_form_incomplete {
   display: inline-block;
   background-image: url("images/check2_no.png");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   vertical-align: middle;
   width: 16px;
   height: 16px;
}

.color_box {
   display: inline-block;
   border: 1px solid Black;
   vertical-align: middle;
   width: 16px;
   height: 16px;;
}

.pgnum_selection {
   font-family: Helvetica, sans-serif;
   font-size: 16px;
   font-weight: bold;
}

.charcountspan {
   font-family: monospace;
   font-size: 12px;
}

.bullet_image {
   width: 25px;
   height: auto;
}

.papericon {
   width: 18px;
   height: auto;
}



/* --- PRINT CONTROLS (DEPRECATED) --------------------------------------------------------------------------------- */

/* --- HOW TO USE: ---------------------------------------------------------------------------------------------------
Open an HTML form and right-click and print the page. These styles are applied to the HTML form during printing. This
method is not useful anymore unless a blank PDF form isn't completed and the form is needed urgently. These styles
will stay for this purpose only but should not be used in normal production.
-------------------------------------------------------------------------------------------------------------------- */

@media print {
   .toggle-button, .no-print, .no-print * {
      display: none !important;
   }
   ::-webkit-input-placeholder {   /* WebKit browsers */
      color: transparent;
   }
   :-moz-placeholder {   /* Mozilla Firefox 4 to 18 */
      color: transparent;
   }
   ::-moz-placeholder {   /* Mozilla Firefox 19+ */
      color: transparent;
   }
   :-ms-input-placeholder {   /* Internet Explorer 10+ */
      color: transparent;
   }
   .container {
      background-color: rgba(255, 255, 255, 1);
      //background-image: url("images/sampletext.png");   /* Uncomment for SAMPLE background */
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
   }
   input[type="text"] {
      border: none;
      background-color: transparent;
   }
   input[type="text"]:hover {
      background-color: transparent;
      border: none;
   }
   input[type="date"] {
      border: none;
      background-color: transparent;
      /* UNCOMMENT BELOW IF PRINTING BLANK FORM: */
      //color: transparent;
   }
   input[type="date"]:hover {
      background-color: transparent;
      border: none;
   }
   input[type="time"] {
      border: none;
      /* UNCOMMENT BELOW IF PRINTING BLANK FORM: */
      //color: transparent;
   }
   input[type="time"]:hover {
      background-color: transparent;
      border: none;
   }
   textarea {
      border: none;
      background-color: transparent;
   }
   select {
      border: none;
   }
   number {
      border: none;
   }
   canvas {
      border: none;
   }
   .graphical-checkbox1 {
      /* CHANGE TO THIS FOR PRINTING BLANK FORM: 1px solid Black */
      border: 1px solid Black;
   }
   input[type="checkbox"]:checked + .graphical-checkbox1 {
      /* CHANGE TO THIS FOR PRINTING BLANK FORM: 1px solid Black */
      border: 1px solid Black;
   }
   select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: none;
   }
   select::-ms-expand {   /* for IE 11 */
      display: none;
   }
}


/* --- DISABLED OR NON-FUNCTIONAL STYLES --------------------------------------------------------------------------- */
/*

DEFAULT HR IS FINE
hr {
   width: auto;
   height: 1px;
   color: #FF8C00;
   background: #FF8C00;
   font-size: 0;
   border: none;
   margin: 5px;
}

ON A PER USE BASIS, GLOBAL STYLE BREAKS THINGS
canvas {
   border: 1px solid #0000FF;
   background-color: White;
}

Some date stuff that doesn't work...
::-webkit-datetime-edit-text:not([aria-valuenow]),
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
color: transparent;
}
input::-webkit-datetime-edit {
color: transparent;
}
input:checked::-webkit-datetime-edit {
color: Black;
}

TRANSITION CODE NO LONGER IN USE
-webkit-transition: 0.2s;
transition: 0.2s;

*/