<style>

* {
    cursor: default;
}

#mc-foundation{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  background-color: white;
  border: 1px solid black;
  border-radius: 8px;
  display: grid;
  box-sizing: border-box;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.1s ease;
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea, {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* Purges all native operating system widgets */
    
    box-sizing: border-box; /* Ensures padding and borders never blow out cell sizes */
    
    border: 0;
    border-radius: 0; /* Drops native rounding parameters completely */
    outline: none; /* Strips default active focus rings */
    background: transparent; /* Lets the parent container control background color rendering */
    
    margin: 0;
    padding: 0;
    /*cursor: auto;*/
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit; /* Inherits typography scales directly from the parent face */
}

/* ============================================================================
   GLOBAL RESET FOR CLEAN, FLAT INTERACTION INPUTS
   ============================================================================ */

input, textarea {
    cursor: text;
}

/* Ensure choices remain highly legible inside open browser menus */
.mc-select select.mc-glove option {
    color: #000000 !important;
    background-color: #FFFFFF;
}

/* Ensure the legacy IE expand caret is cleanly dropped */
.mc-select select.mc-glove::-ms-expand {
    display: none;
}   
   
.mc-dropdown,
select.mc-dropdown,
.mc-dropdown select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* Purges all native OS/browser widgets & carets */
    
    box-sizing: border-box; /* Prevents cell blowout from padding or borders */
    
    border: 0 !important; /* Overrides browser default borders completely */
    border-radius: 0;
    outline: none;
    background: transparent;
    background-image: none !important; /* Eradicates default arrow graphics */
    
    margin: 0;
    padding: 0;
    
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    
    width: 100%;
    height: 100%;
    display: block;
    /*cursor: auto;*/
}

/* Eradicate the legacy IE/Edge down caret overlay layer */
select.mc-dropdown::-ms-expand,
.mc-dropdown select::-ms-expand {
    display: none;
}

/* Reset for internal WebKit autofill coloring traps */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
    appearance: none;
}


/* Checkbox is invisible but captures clicks */
.mc-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    cursor: pointer;
}

/* No visuals — visuals belong to inner-wrapper */
.mc-checkbox::after {
    content: none;
}


/*=================*/
.mc-radio {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    border-radius: 50%; /* Radios remain round */
}

.mc-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background-color: var(--rad-fore, #000000);
}

/* Placed once inside Wshow.css */
.mc-checkbox:checked {
    background-color: var(--chk-fore) !important;
}
.mc-checkbox:checked::after {
    content: '';
    width: 80%;
    height: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--chk-icon, none);
}

#tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 3px;
  pointer-events: none;
  display: none;
  z-index: -1;
}


/* ---------------------------------------------------------
   SELECTOR / SELECTED SYSTEM — GLOBAL CSS
   Applies to both mc-selector and mc-selected wedgets
--------------------------------------------------------- */

/* Outer wrapper */
.mc-selector-wrapper,
.mc-selected-wrapper {
    display: block;
    width: 100%;
    height: 100%;
}

/* Inner flex container */
.mc-selector-inner,
.mc-selected-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 0; /* REQUIRED for scrollboxes inside flex */
    width: 100%;
    height: 100%;
}

/* Scrollbox container */
.mc-selector-scrollbox,
.mc-selected-scrollbox {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 2px 4px 4px 2px;
}

/* Base row style */
.mc-selector-row,
.mc-selected-row {
    display: block;
    width: 100%;
    padding: 2px 2px;
    line-height: 1.2;
    /*cursor: pointer;*/
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.12s ease, color 0.12s ease;
}

/* Hover feedback */
.mc-selector-row:hover,
.mc-selected-row:hover {
    background-color: #e6f2ff;
    color: #000;
}

/* Active (click) feedback */
.mc-selector-row:active,
.mc-selected-row:active {
    background-color: #cce4ff;
}

/* Disabled rows (selector only) */
.mc-selector-row.disabled {
    color: #999;
    background-color: #f0f0f0;
    cursor: not-allowed !important;
}

.ri-arrow-left-right-line {
    transform: scaleX(-1);
    display: inline-block;
}



.mc-textarea-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
}

.mc-textarea-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mc-textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    font: inherit;
}


.mc-frame-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
}

.mc-frame-iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
}

.mc-frame-scroll-auto   { overflow: auto; }
.mc-frame-scroll-hidden { overflow: hidden; }
.mc-frame-scroll-scroll { overflow: scroll; }

/* Affects the X */
.mc-tooltip-close {
    float: right;
    /*cursor: pointer;*/
    font-weight: bold;
}

.ms-panel {
    display: none;
}

.ms-panel.open {
    display: block !important;
}

.ms-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.ms-display {
    width: 100%;
    height: 100%;
    padding: 4px;
    box-sizing: border-box;
}

.ms-actions {
    padding: 4px;
    border-bottom: 1px solid #ccc;
    background: #f5f5f5;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}

textarea{
    resize:none;
}

/* Positioning utility: place item at specific grid row and column */
.grid-pos {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fade-in {
  opacity: 0;
  animation: fadeInBody .5s ease-in forwards;
}

@keyframes fadeInBody {
  to {
    opacity: 1;
  }
}

.bd1 {border:1 solid #00000;}
.bd2 {border:2 solid #00000;}
.bd3 {border:3 solid #00000;}
.bd4 {border:4 solid #00000;}
.bd5 {border:5 solid #00000;}
.bd6 {border:6 solid #00000;}
.bd7 {border:7 solid #00000;}
.bd8 {border:8 solid #00000;}

.pl0 { padding-left: 0px; }
.pl1 { padding-left: 1px; }
.pl2 { padding-left: 2px; }
.pl3 { padding-left: 3px; }
.pl4 { padding-left: 4px; }
.pl5 { padding-left: 5px; }
.pl6 { padding-left: 6px; }
.pl7 { padding-left: 7px; }
.pl8 { padding-left: 8px; }
.pb0 { padding-bottom: 0px; }
.pb1 { padding-bottom: 1px; }
.pb2 { padding-bottom: 2px; }
.pb3 { padding-bottom: 3px; }
.pb4 { padding-bottom: 4px; }
.pb5 { padding-bottom: 5px; }
.pb6 { padding-bottom: 6px; }
.pb7 { padding-bottom: 7px; }
.pb8 { padding-bottom: 8px; }
.pt0 { padding-top: 0px; }
.pt1 { padding-top: 1px; }
.pt2 { padding-top: 2px; }
.pt3 { padding-top: 3px; }
.pt4 { padding-top: 4px; }
.pt5 { padding-top: 5px; }
.pt6 { padding-top: 6px; }
.pt7 { padding-top: 7px; }
.pt8 { padding-top: 8px; }
.pr0 { padding-right: 0px; }
.pr1 { padding-right: 1px; }
.pr2 { padding-right: 2px; }
.pr3 { padding-right: 3px; }
.pr4 { padding-right: 4px; }
.pr5 { padding-right: 5px; }
.pr6 { padding-right: 6px; }
.pr7 { padding-right: 7px; }
.pr8 { padding-right: 8px; }

.fs6  { font-size: 6px; }
.fs7  { font-size: 7px; }
.fs8  { font-size: 8px; }
.fs9  { font-size: 9px; }
.fs10 { font-size: 10px; }
.fs11 { font-size: 11px; }
.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }
.fs18 { font-size: 18px; }
.fs20 { font-size: 20px; }
.fs24 { font-size: 24px; }
.fs28 { font-size: 28px; }
.fs32 { font-size: 32px; }
.fs36 { font-size: 36px; }
.fs40 { font-size: 40px; }
.fs48 { font-size: 48px; }
.fs56 { font-size: 56px; }
.fs64 { font-size: 64px; }
.fs72 { font-size: 72px; }
.fs96 { font-size: 96px; }

.ls8  { line-height: 0.8; }
.ls10 { line-height: 1.0; }
.ls12 { line-height: 1.2; }
.ls14 { line-height: 1.4; }
.ls16 { line-height: 1.6; }
.ls18 { line-height: 1.8; }
.ls20 { line-height: 2.0; }

/* ============================================================================
   TYPOGRAPHY WEIGHT TRACKS (Numeric Scale Mapping)
   ============================================================================ */
.fw1 { font-weight: 100; } /* Thin */
.fw2 { font-weight: 200; } /* Extra Light */
.fw3 { font-weight: 300; } /* Light */
.fw4 { font-weight: 400; } /* Normal */
.fw5 { font-weight: 500; } /* Medium */
.fw6 { font-weight: 600; } /* Demi-Bold */
.fw7 { font-weight: 700; } /* Bold */
.fw8 { font-weight: 800; } /* Extra Bold */
.fw9 { font-weight: 900; } /* Black */

.ff-c,                        { text-transform: uppercase; }
.ff-i                         {font-style: italics}
.ff-u                         {text-transform: capitalize;}

/* ============================================================================
   TYPOGRAPHY FAMILY TRACKS (Web-Safe Sovereign Fallbacks)
   ============================================================================ */
.fn-def   { font-family: Verdana, Geneva, sans-serif; }
.fn-ari   { font-family: Arial, sans-serif; }
.fn-hel   { font-family: Helvetica, Arial, sans-serif; }
.fn-tim   { font-family: "Times New Roman", Times, serif; }
.fn-geo   { font-family: Georgia, serif; }
.fn-cou   { font-family: "Courier New", Courier, monospace; }
.fn-ver   { font-family: Verdana, Geneva, sans-serif; }
.fn-tah   { font-family: Tahoma, Geneva, sans-serif; }
.fn-mon   { font-family: monospace; }


#thumbprint img {
  margin-top: 20px;
  border: 1px solid #aaa;
}
    
.mc-overflow-auto {
  overflow: auto;
  line-height:1.2;
}

.mc-checkbox {
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    user-select:none;
    position:relative;
}

/* Checked visual shell; colors/icons come from inline styles or CSS vars */
.mc-checkbox::after {
    content:'';
    /*position:absolute;*/
    width:80%;
    height:80%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

.scroll-wrapper {
  overflow: hidden;
}

.scroll-content {
  height: 100%;
  overflow: auto;
}

.w3-content {
    padding: 0.01em 16px;
}

body {
    background-color:black;
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin:0;
}

/* For icons that are text or FA */
.mc-icon-text {
    display: inline-block;
    line-height: 1;
}

/* Vertical + horizontal alignment utilities */
.mc-align-tl { justify-content: flex-start; align-items: flex-start; }
.mc-align-tc { justify-content: flex-start; align-items: center; }
.mc-align-tr { justify-content: flex-start; align-items: flex-end; }
.mc-align-ml { justify-content: center; align-items: flex-start; }
.mc-align-mc { justify-content: center; align-items: center; }
.mc-align-mr { justify-content: center; align-items: flex-end; }
.mc-align-bl { justify-content: flex-end; align-items: flex-start; }
.mc-align-bc { justify-content: flex-end; align-items: center; }
.mc-align-br { justify-content: flex-end; align-items: flex-end; }

.mc-input{
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
}

/* Only affects the mc-glove layer when it sits inside an mc-input widget container */
.mc-input .mc-glove {
    box-sizing: border-box;
}

/*.mc-select select,
.mc-multi select,
.mc-tree select {
    width: 100%;
    height: 100%;
    border: inherit;
    background: inherit;
    color: inherit;
    font: inherit;
    padding: inherit;
    line-height: inherit;
}
*/

.mc-button-wrapper {
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* Hover state — brighten slightly */
.mc-button-wrapper:hover {
    filter: brightness(1.12);
    /*cursor: pointer;*/
}

/* Active (pressed) state — darken slightly */
.mc-button-wrapper:active {
    filter: brightness(0.88);
}

.mc-msgblock-wrapper {
    overflow-y: auto;
    box-sizing: border-box;
}

.mc-msgblock-item {
    margin-bottom: 6px;
}

.mc-msgblock-key {
    font-weight: bold;
    margin-right: 4px;
}

.mc-msgblock-value {
    /* inherits font + color from container */
}

.mc-msgblock-separator {
    border: none;
    border-top: 1px solid #ddd;
    margin: 8px 0;
}

.mc-combo-wrapper,.mc-combo-input {
    position: relative;
    height: 100%;
    width: 100%;
}

.mc-combo-list {
    position: absolute;
    display: none;
    left: 0;
    right: 0;
    top: 100%; /* appears directly under the input */
}

/* -----------------------------------------------------------
   PARAGRAPH ALIGNMENT FLEX BASED
   ----------------------------------------------------------- */
/* Core Typographic Engine for Paragraph Wedgets */
/* ==========================================================================
   Paragraph Wedget Typographic Engine
   ========================================================================== */

/**
 * 1. Isolate structural constraints strictly to mc-paragraph containers.
 *    This prevents breaking label/inline layouts elsewhere in the system.
 */
.mc-paragraph .mc-words {
    display: block !important;
    box-sizing: border-box !important;
    
    /* Force normal wrapping, overriding any inherited UI label layout rules */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    
    /* Strict boundaries to honor user-selected dynamic dimensions */
    overflow: hidden; 
}

/**
 * 2. Scoped Text Realignment & Justification
 *    Ensures that justification utilities only invoke typographic rendering
 *    when inside a paragraph, leaving standard utilities unbothered.
 */
.mc-paragraph .align-left    { text-align: left; }
.mc-paragraph .align-center  { text-align: center;}
.mc-paragraph .align-right   { text-align: right; }

/* Standard Justification Rules */
.mc-paragraph .justify-left   { text-align: justify; text-align-last: left; }
.mc-paragraph .justify-right  { text-align: justify; text-align-last: right; }
.mc-paragraph .justify-center { text-align: justify; text-align-last: center;}

/* Advanced Typographic Justification Engines */
.mc-paragraph .justify-stretch { 
    text-align: justify; 
    text-align-last: justify; 
    text-justify: inter-character; 
}
.mc-paragraph .justify-fill { 
    text-align: justify; 
    text-align-last: justify; 
    text-justify: inter-word; 
}
.mc-paragraph .justify-distribute { 
    text-align: justify; 
    text-align-last: justify; 
    text-justify: distribute; 
}



.mc-dim { opacity: 0.4; }
.mc-fade { opacity: 0.2; }
.mc-emphasize { transform: scale(1.03); }
.mc-pulse { animation: pulse 1s infinite; }
.mc-glow { box-shadow: 0 0 12px var(--accent, rgba(0,0,0,0.3)); }
.mc-flash { animation: flash 0.5s infinite; }
.mc-shake { animation: shake 0.4s; }
.mc-blink { animation: blink 1s infinite; }
.mc-shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.mc-raise { box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.mc-highlight { transform: scale(1.03); }

[class*="L"] {visibility: hidden;}

/* Default face shadow */
.mc-button3d .mc-face {
  box-shadow: 0 3px 0 #2980b9;
  transition: box-shadow 0.1s ease;
}

/* Pressed face shadow */
.mc-button3d:active .mc-face {
  box-shadow:
    0 1px 0 #2980b9,   /* reduced bottom shadow */
    0 -1px 0 #000;     /* new top shadow */
}

/* Button movement */
.mc-button3d {
  transition: transform 0.1s ease;
}

.mc-button3d:active {
  transform: translateY(2px);
}


.mc {
    position: relative !important;
    background: transparent;
    z-index: var(--z-base); /* Core positional alignment context rule */
    color: #000000;
}

/* Immutable internal element stacking matrices */
.mc .mc-face  { z-index: calc(var(--z-base) + 1); }
.mc .mc-img   { z-index: calc(var(--z-base) + 2); }
.mc .mc-text  { z-index: calc(var(--z-base) + 3); }
.mc .mc-words { z-index: calc(var(--z-base) + 4); }
.mc .mc-glove { z-index: calc(var(--z-base) + 5) !important; }
.mc .mc-mark  { z-index: calc(var(--z-base) + 6); }

.mc-face {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    inset: 0 !important;
}

.mc-img {
    position: absolute !important;
    top: 0; left: 0;
    box-sizing: border-box !important;
    pointer-events: none !important;
    overflow: hidden; /* Hard clip edge protection */
}

.mc-words {
    position: absolute !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    user-select: none;
}

.mc-words span {
    display: inline-block !important;
    line-height: 1 !important;
    user-select: none;
}

.mc-glove {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    inset: 0 !important;
    pointer-events: auto !important;
    cursor:pointer;
}

/* Clean Reset for Sovereign Vector Glyphs */
.mc-glyph, .dom-icon {
    display: inline-block !important;
    vertical-align: top !important; /* Bypasses baseline alignment entirely */
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Clean Reset for Sovereign Raster/Images */
.mc-raster {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Guarantees the image fills the map bounds perfectly */
    box-sizing: border-box !important;
}

/* =========================================================================
   THE BROWSER NEUTRALIZATION LOCKDOWN
   ========================================================================= */
input, select, textarea, .mc-glove, .mc, .mc-mark, .mc-img, .mc-words {
    border: none !important;
}

/* =========================================================================
   THE IMG OPERATIONAL LAYER (Absolute Bounding Box)
   ========================================================================= */
.mc-mark {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto !important;
    cursor: help !important;
}

.mc-mark {
    /* Enforce the geometric box calculated by PHP */
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensures content doesn't bleed out of your calculated geo */
}

.mc-mark svg, 
.mc-mark span {
    /* Force content to fill the contract, regardless of its internal metadata */
    display: block;
    width: 100%;
    height: 100%;
}

/* All media formats adapt fully to the container; object-fit handles the paint constraints */
.mc-img img,
.mc-img svg {
    display: block;
    width: 100%; height: 100%;
    box-sizing: border-box;
}

/* Font icon scaling rule inside fixed grid bounding box */
.mc-img i {
    display: block;
    width: 100%; height: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Tile layout modification */
.mc-img-tile {
    background-repeat: repeat;
    box-sizing: border-box;
}

.ps1    { top: 0;   left: 0;    transform: translate(0, 0); }
.ps2    { top: 0;   left: 50%;  transform: translateX(-50%); }
.ps3    { top: 0;   left: 100%; transform: translateX(-100%); }
.ps4    { top: 50%; left: 0;    transform: translateY(-50%); }
.ps5    { top: 50%; left: 50%; transform:translate(-50%, -50%);}
.ps6    { top: 50%; left: 100%; transform: translate(-100%, -50%); }
.ps7    { top: 100%; left: 0;    transform: translateY(-100%); }
.ps8    { top: 100%; left: 50%;  transform: translate(-50%, -100%); }
.ps9    { top: 100%; left: 100%; transform: translate(-100%, -100%); }

/*Used by selector sets*/
.mc-on  { display: block;}
.mc-off { display: none;}

.V, .mc-vv   { visibility:visible;}
.H, .mc-vh   { visibility:hidden;}

.mc-text input {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.mc-row{
    margin-top:3px;
    margin-left:3px;
    pointer-events:none;
}

/* Hard collapse for filtered elements regardless of their backend state */
.mc-row.mc-filtered-out {
    display: none !important;
}

/* Wedget in Quiet mode */
.mc[data-quiet] {
    display: none;
    pointer-events: none;
}

/* Wedget in Dormant mode */
.mc[data-dormant] {
    pointer-events: none;
}

/* Wedget in Disabled mode */
.mc[data-disable] {
    pointer-events: none;
    /* Add your custom visual tells here, e.g., grayscale */
    filter: grayscale(1);
    opacity: 0.6;
}

</style>
