@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --arc3-navy:        #132E73;
    --arc3-navy-dark:   #0d2460;
    --arc3-navy-light:  #1a3d8a;
    --arc3-orange:      #E05A1A;
    --arc3-white:       #ffffff;
    --arc3-light-bg:    #f0f4f8;
    --arc3-border:      #d0dae8;
    --arc3-text:        #2c3e50;
    --arc3-text-light:  #5a6a7e;
    --arc3-error-bg:    #fff5f5;
    --arc3-error-bd:    #fca5a5;
    --arc3-error-txt:   #dc2626;
    --arc3-focus-ring:  rgba(21, 49, 112, 0.15);
    --arc3-shadow:      0 6px 32px rgba(21, 49, 112, 0.20);
    --radius:           8px;
}

* {
    box-sizing: border-box;
}

body {
    background: #f2f4f7;
    font-family: 'Inter', 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* ---- Top accent bar (replaces top.png image) ---- */
#top {
    display: block;
    height: 5px;
    background: var(--arc3-orange);
    width: 100%;
}

/* ---- Form card ---- */
#form_container {
    background: var(--arc3-white);
    margin: 0;
    text-align: left;
    width: 100%;
    overflow: hidden;
}

/* ---- Bottom bar (replaces bottom.png image) ---- */
#bottom {
    display: block;
    height: 4px;
    background: var(--arc3-orange);
    margin: 0;
    width: 100%;
    height: 5px;
}

/* ---- Footer ---- */
#footer {
    width: 100%;
    clear: both;
    color: rgba(255,255,255,0.55);
    text-align: center;
    padding: 14px 0;
    font-size: 12px;
    margin: 0 auto;
}

#footer a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255,255,255,0.35);
}

/* ---- Form header: logo + title ---- */
.form-header {
    background: #132E73;
    padding: 0;
}

.brand-row {
    display: block;
    padding: 12px 0;
    line-height: 0;
    background: #132E73;
    text-align: center;
}

/* Arc3 logo — centered in blue header */
.brand-logo {
    height: 90px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* ---- Form title (h1 sits below brand row) ---- */
h1 {
    margin: 0;
    padding: 10px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1px;
    text-align: left;
    color: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
}

h1::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 18px;
    background: var(--arc3-orange);
    border-radius: 2px;
    flex-shrink: 0;
    opacity: 0.85;
}

h1 a {
    display: block;
    color: var(--arc3-white);
    text-decoration: none;
    height: 100%;
    min-height: 40px;
    overflow: hidden;
}

img {
    border: none;
}

/* ---- Form wrapper ---- */
form.appnitro {
    margin: 20px 28px 0;
    padding: 0 0 28px;
    font-family: 'Inter', 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif;
    font-size: 14px;
}

.appnitro {
    font-family: 'Inter', 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif;
    font-size: 14px;
}

.appnitro li {
    width: 61%;
}

/* ---- List resets ---- */
form ul {
    font-size: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

form li {
    display: block;
    margin: 0 0 4px;
    padding: 5px 8px 6px;
    position: relative;
}

* html form li          { height: 1%; }
* html .buttons         { height: 1%; }
* html form li div      { display: inline-block; }

/* ---- Form description block ---- */
.form_description {
    background: var(--arc3-light-bg);
    border-left: 4px solid var(--arc3-navy);
    border-radius: 0 6px 6px 0;
    clear: both;
    display: block;
    margin: 0 0 18px;
    padding: 12px 16px;
}

.form_description h2 {
    clear: left;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--arc3-navy);
}

.form_description p {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    color: var(--arc3-text-light);
}

/* ---- Section breaks ---- */
form hr { display: none; }

form li.section_break {
    border-top: 2px solid var(--arc3-navy);
    margin-top: 18px;
    padding-bottom: 2px;
    padding-left: 0;
    padding-top: 14px;
    width: 97% !important;
    background: none;
}

form ul li.first {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

form .section_break h3 {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 2px;
    color: var(--arc3-navy);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

form .section_break p {
    font-size: 12px;
    margin: 0 0 10px;
    color: var(--arc3-text-light);
}

/* ---- Labels ---- */
label.description {
    border: none;
    color: var(--arc3-text);
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 0 5px;
}

form li div {
    color: var(--arc3-text);
    margin: 0 4px 0 0;
    padding: 0 0 4px;
}

form li span {
    color: var(--arc3-text);
    float: left;
    margin: 0 4px 0 0;
    padding: 0 0 4px;
}

form li div.left  { display: inline; float: left;  width: 48%; }
form li div.right { display: inline; float: right; width: 48%; }
form li div.left  .medium { width: 100%; }
form li div.right .medium { width: 100%; }

.clear { clear: both; }

form li div label {
    clear: both;
    color: var(--arc3-text-light);
    display: block;
    font-size: 10px;
    line-height: 10px;
    margin: 0;
    padding-top: 2px;
}

form li span label {
    clear: both;
    color: var(--arc3-text-light);
    display: block;
    font-size: 10px;
    line-height: 10px;
    margin: 0;
    padding-top: 2px;
}

form li .datepicker {
    cursor: pointer !important;
    float: left;
    height: 16px;
    margin: .1em 5px 0 0;
    padding: 0;
    width: 16px;
}

/* ---- Required / helper indicators ---- */
form .required {
    color: var(--arc3-orange);
    float: none;
    font-weight: 700;
}

.required-note {
    display: block;
    font-size: 11px;
    color: var(--arc3-text-light);
    font-weight: 400;
    font-style: italic;
    margin-top: 2px;
    margin-left: 4px;
}

span.symbol {
    font-size: 115%;
    line-height: 130%;
}

/* ---- Text inputs ---- */
input.text {
    background: var(--arc3-white);
    border: 1.5px solid var(--arc3-border);
    border-radius: 6px;
    color: var(--arc3-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 9px 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}

input.text:focus {
    border-color: var(--arc3-navy);
    box-shadow: 0 0 0 3px var(--arc3-focus-ring);
}

input.text:hover:not(:focus) {
    border-color: #a0b0c8;
}

input.file {
    color: var(--arc3-text);
    font-size: 14px;
    margin: 0;
    padding: 2px 0;
}

/* ---- Textarea ---- */
textarea.textarea,
textarea.text {
    background: var(--arc3-white);
    border: 1.5px solid var(--arc3-border);
    border-radius: 6px;
    color: var(--arc3-text);
    font-family: 'Inter', 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 9px 12px;
    width: 99%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
    resize: vertical;
}

textarea.textarea:focus,
textarea.text:focus {
    border-color: var(--arc3-navy);
    box-shadow: 0 0 0 3px var(--arc3-focus-ring);
}

/* ---- Select ---- */
select.select {
    color: var(--arc3-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 9px 36px 9px 12px;
    background-color: var(--arc3-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23153170' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1.5px solid var(--arc3-border);
    border-radius: 6px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

select.select:focus {
    border-color: var(--arc3-navy);
    box-shadow: 0 0 0 3px var(--arc3-focus-ring);
}

select.select:hover:not(:focus) {
    border-color: #a0b0c8;
}

select.select[class] {
    margin: 0;
    padding: 9px 36px 9px 12px;
}

select option { margin: 2px 0; }

*:first-child+html select.select[class] { margin: 1px 0; }

.safari select.select {
    font-size: 12px;
    margin-bottom: 1px;
}

/* ---- Checkboxes & Radios ---- */
input.checkbox {
    display: block;
    height: 13px;
    line-height: 1.4em;
    margin: 6px 0 0 3px;
    width: 13px;
}

input.radio {
    display: block;
    height: 13px;
    line-height: 1.4em;
    margin: 6px 0 0 3px;
    width: 13px;
}

label.choice {
    color: var(--arc3-text);
    display: block;
    font-size: 13px;
    line-height: 1.4em;
    margin: -1.55em 0 0 25px;
    padding: 4px 0 5px;
    width: 90%;
}

/* ---- Size helpers ---- */
input.currency { text-align: right; }
input.small    { width: 25%; }
select.small   { width: 25%; }
input.medium   { width: 55%; font-size: 14px; }
select.medium  { font-size: 14px; width: auto; min-width: 55%; }
input.large    { width: 99%; }
select.large   { width: 100%; }
textarea.small  { height: 4em; }
textarea.medium { height: 10em; }
textarea.large  { height: 20em; }

/* ---- Submit button ---- */
.buttons:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.buttons {
    clear: both;
    display: block;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--arc3-border);
}

* html .buttons { height: 1%; }

.buttons input {
    background: linear-gradient(135deg, var(--arc3-navy) 0%, var(--arc3-navy-light) 100%);
    border: none;
    border-radius: var(--radius);
    color: var(--arc3-white);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 11px 32px;
    margin-right: 8px;
    transition: all 0.18s ease;
    box-shadow: 0 2px 10px rgba(21, 49, 112, 0.30);
    overflow: visible;
}

.buttons input:hover {
    background: linear-gradient(135deg, var(--arc3-navy-dark) 0%, var(--arc3-navy) 100%);
    box-shadow: 0 4px 16px rgba(21, 49, 112, 0.40);
    transform: translateY(-1px);
}

.buttons input:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(21, 49, 112, 0.25);
}

input.button_text {
    overflow: visible;
    padding: 11px 32px;
    width: auto;
}

/* ---- Error states ---- */
#error_message {
    background: var(--arc3-error-bg);
    border: 1.5px solid var(--arc3-error-bd);
    border-radius: 6px;
    margin-bottom: 14px;
    padding: 12px;
    text-align: center;
    width: 99%;
}

#error_message_title {
    color: var(--arc3-error-txt);
    font-size: 14px;
    font-weight: 700;
    margin: 4px 0 6px;
    padding: 0;
}

#error_message_desc {
    color: var(--arc3-text);
    font-size: 13px;
    margin: 0 0 8px;
}

#error_message_desc strong {
    background-color: #fee2e2;
    color: var(--arc3-error-txt);
    padding: 2px 4px;
    border-radius: 3px;
}

form li.error {
    background-color: var(--arc3-error-bg) !important;
    border: 1px solid var(--arc3-error-bd);
    border-radius: 6px;
    margin: 3px 0;
}

form li.error label {
    color: var(--arc3-error-txt) !important;
}

form p.error {
    clear: both;
    color: var(--arc3-error-txt);
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 5px;
}

/* ---- Highlight (active barcode row) ---- */
form li.highlighted {
    background-color: #eef3ff;
    border-radius: 6px;
}

/* ---- Guidelines tooltip ---- */
form .guidelines {
    background: #f8fafc;
    border: 1px solid var(--arc3-border);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.09);
    color: var(--arc3-text);
    font-size: 11px;
    left: 100%;
    line-height: 1.5;
    margin: 0 0 0 10px;
    padding: 10px 12px;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 42%;
    z-index: 1000;
}

form .guidelines small { font-size: 105%; }
form li.highlighted .guidelines { visibility: visible; }
form li:hover .guidelines { visibility: visible; }
.no_guidelines .guidelines { display: none !important; }
.no_guidelines form li { width: 97%; }
.no_guidelines li.section { padding-left: 9px; }

/* ---- Success message ---- */
.form_success {
    clear: both;
    margin: 0;
    padding: 80px 0 90px;
    text-align: center;
}

.form_success h2 {
    clear: left;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--arc3-navy);
}

/* ---- Password page ---- */
ul.password {
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center;
}

.password h2 {
    color: var(--arc3-orange);
    font-weight: bold;
    margin: 0 auto 10px;
}

.password input.text {
    font-size: 170% !important;
    width: 380px;
    text-align: center;
}

.password label {
    display: block;
    font-size: 120% !important;
    padding-top: 10px;
    font-weight: bold;
}

/* ---- CAPTCHA ---- */
#li_captcha       { padding-left: 5px; }
#li_captcha span  { float: none; }

/* ---- Embedded form ---- */
.embed #form_container              { border: none; }
.embed #top, .embed #bottom,
.embed h1                           { display: none; }
.embed #form_container              { width: 100%; }
.embed #footer                      { text-align: left; padding-left: 10px; width: 99%; }
.embed #footer.success              { text-align: center; }
.embed form.appnitro                { margin: 0; }

/* ---- Calendar widget (unchanged logic, updated colors) ---- */
div.calendar { position: relative; }

.calendar table {
    cursor: pointer;
    border: 1px solid var(--arc3-border);
    border-radius: 4px;
    font-size: 11px;
    color: #000;
    background: #fff;
    font-family: 'Inter', "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

.calendar .button        { text-align: center; padding: 2px; }
.calendar .nav           { background: #f5f5f5; }

.calendar thead .title {
    font-weight: bold;
    text-align: center;
    background: var(--arc3-navy);
    color: #fff;
    padding: 4px 0;
}

.calendar thead .headrow    { background: #f5f5f5; color: #444; font-weight: bold; }
.calendar thead .daynames   { background: #fff; color: #333; font-weight: bold; }
.calendar thead .name       { border-bottom: 1px dotted var(--arc3-border); padding: 2px; text-align: center; color: #000; }
.calendar thead .weekend    { color: #666; }
.calendar thead .hilite     { background-color: var(--arc3-navy); color: #fff; padding: 1px; }
.calendar thead .active     { background-color: var(--arc3-orange); color: #fff; padding: 2px 0 0 2px; }

.calendar tbody .day                        { width: 1.8em; color: #222; text-align: right; padding: 2px; }
.calendar tbody .day.othermonth             { font-size: 80%; color: #bbb; }
.calendar tbody .day.othermonth.oweekend    { color: #fbb; }
.calendar table .wn                         { padding: 2px; border-right: 1px solid #000; background: #666; }
.calendar tbody .rowhilite td               { background: #FFF1AF; }
.calendar tbody .rowhilite td.wn            { background: #FFF1AF; }
.calendar tbody td.hilite                   { padding: 1px; background: var(--arc3-navy) !important; color: #fff !important; }
.calendar tbody td.active                   { color: #fff; background: #529214 !important; padding: 2px 2px 0 2px; }
.calendar tbody td.selected                 { font-weight: bold; border: 1px solid #888; padding: 1px; background: #f5f5f5 !important; color: #222 !important; }
.calendar tbody td.weekend                  { color: #666; }
.calendar tbody td.today                    { font-weight: bold; color: var(--arc3-navy); background: #dbeafe; }
.calendar tbody .disabled                   { color: #999; }
.calendar tbody .emptycell                  { visibility: hidden; }
.calendar tbody .emptyrow                   { display: none; }
.calendar tfoot .footrow                    { text-align: center; background: #556; color: #fff; }
.calendar tfoot .ttip                       { background: #222; color: #fff; font-size: 10px; border-top: 1px solid #dedede; padding: 3px; }
.calendar tfoot .hilite                     { background: #aaf; border: 1px solid #04f; color: #000; padding: 1px; }
.calendar tfoot .active                     { background: #77c; padding: 2px 0 0 2px; }

.calendar .combo {
    position: absolute; display: none; top: 0; left: 0;
    width: 4em; border: 1px solid #ccc; background: #f5f5f5;
    color: #222; font-size: 90%; z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix   { text-align: center; padding: 1px; }
.calendar .combo .label-IEfix   { width: 4em; }
.calendar .combo .hilite        { background: var(--arc3-navy); color: #fff; }
.calendar .combo .active        { border-top: 1px solid #999; border-bottom: 1px solid #999; background: #dedede; font-weight: bold; }

/* ===== Confirmation Page =====
.confirmation-icon {
    width: 72px;
    height: 72px;
    background: #22c55e;
    color: #fff;
    font-size: 38px;
    line-height: 72px;
    border-radius: 50%;
    margin: 0 auto 20px;
    font-weight: 700;
}
.confirmation-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--arc3-navy);
    margin: 0 0 10px;
}
.confirmation-msg {
    color: var(--arc3-text-light);
    font-size: 0.97rem;
    margin: 0 0 28px;
    line-height: 1.6;
}
.summary-box {
    background: #fff;
    border: 1px solid var(--arc3-border);
    border-radius: var(--radius);
    padding: 24px 28px;
    text-align: left;
    box-shadow: var(--arc3-shadow);
    margin-bottom: 28px;
}
.summary-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--arc3-navy);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--arc3-border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}
.summary-table tr {
    border-bottom: 1px solid var(--arc3-border);
}
.summary-table tr:last-child {
    border-bottom: none;
}
.summary-table th {
    width: 38%;
    padding: 10px 12px;
    color: var(--arc3-text-light);
    font-weight: 600;
    text-align: left;
    vertical-align: top;
}
.summary-table td {
    padding: 10px 12px;
    color: var(--arc3-text);
    vertical-align: top;
}
.confirmation-wrap {
    max-width: 100%;
    margin: 24px auto 32px;
    padding: 0 20px;
    text-align: center;
}
.confirmation-actions {
    margin-top: 8px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-new-request, .btn-close-window {
    display: inline-block;
    padding: 10px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: opacity 0.2s;
}
.btn-new-request {
    background: linear-gradient(135deg, var(--arc3-navy) 0%, var(--arc3-navy-light) 100%);
    color: #fff;
}
.btn-close-window {
    background: #e5e7eb;
    color: var(--arc3-text);
}
.btn-new-request:hover, .btn-close-window:hover {
    opacity: 0.82;
}

*/