* {

    margin: 0;

    padding: 0;

}



html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

samp,

strong,

sub,

sup,

tt,

var,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td {

    border: 0;

    outline: 0;

    vertical-align: baseline;

    background: transparent;

}



h1,

h2,

h3,

h4,

h5,

h6,

address,

blockquote,

dl,

fieldset,

ol,

p,

table,

ul {

    margin: 10px 0;

}



#content h1 {

    font-size: 180%;

}



#content h2 {

    font-size: 160%;

}



#content h3 {

    font-size: 140%;

}



#content h4 {

    font-size: 120%;

}



#content h5,

h6 {

    font-size: 100%;

}



#content table,

#InfoTable table {

    margin: 0;

    border-collapse: collapse;

}



#content table.width100 {

    width: 100%;

}



#content table th,

#content table td,

#InfoTable table td,

#InfoTable table th {

    padding: 5px 5px;

}



#InfoTable table td {

    vertical-align: middle;

}



#content table th,

#InfoTable table th {

    text-align: left;

    vertical-align: middle;

    font-weight: bold;

}



#content ul {

    margin: 15px 0;

    list-style: none;

}



#content ul li {

    padding-left: 15px;

    background: url("../images/ul.gif") 0 4px no-repeat;

}



#content ul ul {

    margin: 0 0 0 10px;

}



#content ul ul li {

    padding-left: 15px;

    background: url("../images/ul-ul.gif") 0 4px no-repeat;

}



#content ol {

    margin: 15px 0 15px 30px;

    list-style-type: decimal;

}



#content ol ol {

    margin: 0 0 0 20px;

}



#content ol ol li {

    list-style-type: lower-alpha;

}



#content dl {

    clear: both;

}



#content dl dt {

    font-weight: bold;

}



#content dl dd {

    margin: 0 0 5px 0;

}



#content fieldset {

    position: relative;

    margin-top: 0px;

    margin-bottom: 0px;

    padding: 0px 5px 5px;

}



#content legend {

    font-size: 120%;

    font-weight: bold;

}



#content code {

    font-family: "", monospace;

}



#content .help {

    cursor: help;

}



/* =============================================================================

HTML - without styles

============================================================================= */



table.nostyle,

table.nostyle th,

table.nostyle td {

    border: 0 !important;

}



table.nostyle th {

    background: none !important;

    text-align: left !important;

}



table.nostyle th,

table.nostyle td {

    padding: 3px 5px !important;

}



ul.nostyle {

    margin: 15px 0 15px 20px !important;

    list-style-type: square !important;

}



ul.nostyle ul {

    margin: 0 0 0 25px !important;

    list-style-type: square !important;

}



ul.nostyle li {

    padding: 0 !important;

    background: none !important;

}



dl.nostyle dt {

    font-weight: bold !important;

}



dl.nostyle dd {

    margin: 0 !important;

}



/* =============================================================================

LAYOUT

============================================================================= */



#main {

    width: 1920px;

    width: expression(document.body.clientWidth < 4032? "4032px" : "auto");

    margin: auto;

    height: auto !important;

    min-height: auto !important;

}



#tray {

    padding: 12px 15px;

    background: url("../images/tray.gif") 0 0 repeat-x;

    font: 85%/1.2 "tahoma", sans-serif;

}



#tray p {

    margin: 0;

}



#tray p.f-left {

    width: 50%;

}



#tray #logout {

    padding-left: 18px;

    background: url("../images/tray-logout.gif") 0 50% no-repeat;

    text-transform: uppercase;

}



#tray #switcher {

    margin-right: 15px;

}



#tray #switcher img {

    display: block;

    float: left;

    width: 16px;

    height: 16px;

    border: 0;

}



#menu {

    padding: 15px 15px 13px 15px;

    background: url("../images/menu.gif") 0 0 repeat-x;

}



#menu ul {

    margin: 0;

    padding: 0;

    list-style-type: none;

}



#menu ul li {

    display: inline;

    margin: 0;

    padding: 0;

}



#menu ul li a {

    float: left;

    margin-right: 5px;

    padding-left: 5px;

    background: url("../images/menu-left.gif") 0 0 no-repeat;

    text-decoration: none;

    cursor: pointer;

}



#menu ul li a span {

    float: left;

    display: block;

    padding: 7px 15px 9px 8px;

    background: url("../images/menu-right.gif") 100% 0 no-repeat;

}



#menu ul li a:hover,

#menu ul li#menu-active a {

    background: url("../images/menu-left.gif") 0 -35px no-repeat;

}



#menu ul li a:hover span,

#menu ul li#menu-active a span {

    background: url("../images/menu-right.gif") 100% -35px no-repeat;

}



#menu ul li#menu-active a {

    font-weight: bold;

}



#content {

    padding: 0px 10px;

    overflow: hidden;

}



#footer {

    clear: both;

    padding: 15px;

    background: url("../images/separator.gif") 0 0 repeat-x;

    font: 85%/1.2 "tahoma", sans-serif;

}



#footer p {

    margin: 0;

}



/* =============================================================================

/* =============================================================================

OTHERS

============================================================================= */



#aside .padding {

    padding-left: 15px;

}



#aside #logo {

    margin: 0 0 15px 0;

}



#aside #logo img {

    display: block;

    width: 210px;

}



#aside #search fieldset {

    padding: 7px 10px;

}



#aside #search fieldset p {

    margin: 0;

}



#aside #search fieldset legend {

    font-weight: bold;

}



#aside #search fieldset .input-text {

    width: 130px;

}



#aside #search fieldset #search-options {

    margin-top: 10px;

}



#aside #btn-create {

    margin: 0 0 15px 0;

}



#aside #btn-create a {

    float: left;

    padding-left: 27px;

    height: 37px;

    overflow: hidden;

    background: url("../images/btn-create-left.gif") 0 0 no-repeat;

    text-decoration: none;

    font-weight: bold;

    cursor: pointer;

}



#aside #btn-create a span {

    float: left;

    display: block;

    width: 163px;

    padding: 8px 0 10px 10px;

    background: url("../images/btn-create-right.gif") -2px 0 no-repeat;

}



#aside #btn-create a:hover {

    background-position: 0 -37px;

}



#aside ul {

    width: 215px;

    margin: 0 0 15px 0;

    list-style: none;

}



#aside ul li {

    display: inline;

}



#aside ul li a {

    display: block;

    width: 185px;

    padding: 4px 15px;

    text-decoration: none;

}



#aside ul li#submenu-active a {

    width: 198px;

    border: 0;

    background: url("../images/submenu-active.gif") 100% 50% no-repeat;

    font-weight: bold;

    z-index: 999;

}



#aside ul ul {

    margin: 0;

    position: static;

}



#aside ul ul li a,

#aside ul li#submenu-active ul li a {

    width: 170px;

    padding: 5px 15px 5px 30px;

    background: url("../images/submenu-sub.gif") 15px 7px no-repeat;

    font: 85%/1.2 "tahoma", sans-serif;

    font-weight: normal;

}



#content h1 {

    margin: 0;

    padding: 10px 15px;

    background: url("../images/content-h1.gif") 0 0 repeat-x;

    letter-spacing: -1px;

}



#content .col50 {

    float: left;

    width: 49%;

}



#content .col33 {

    float: left;

    width: 32%;

}



#content .col33.center {

    padding: 0 2%;

}



#content .tabs {

    margin: 15px 0;

}



#content .tabs ul {

    margin: 0;

    padding: 0;

    list-style-type: none;

}



#content .tabs ul li {

    display: inline;

    margin: 0;

    padding: 0;

}



#content .tabs a {

    float: left;

    margin-right: 3px;

    padding-left: 4px;

    background: url("../images/tabs-l.gif") 0 -100px no-repeat;

    text-decoration: none;

}



#content .tabs a span {

    float: left;

    display: block;

    padding: 8px 15px 6px 11px;

    background: url("../images/tabs-r.gif") 100% -100px no-repeat;

}



#content .tabs a:hover,

.tabs a:hover span {

    text-decoration: underline;

}



#content .tabs .ui-tabs-selected a {

    background: url("../images/tabs-l.gif") 0 0 no-repeat;

    font-weight: bold;

}



#content .tabs .ui-tabs-selected a span {

    background: url("../images/tabs-r.gif") 100% 0 no-repeat;

}



#content .tabs .ui-tabs-selected a:hover,

#content .tabs .ui-tabs-selected a:hover span {

    text-decoration: none;

}



#content .ui-tabs-hide {

    display: none !important;

}



.input-text {

    padding: 3px;

    font: 100%/1.5 "arial", sans-serif;

    width: 200px;

    border: 1px solid #ccc;

}



.input-text-02 {

    padding: 5px;

    font: 140%/1.5 "arial", sans-serif;

}



.small {

    width: 50px;

}



/*.input-submit {padding:5px; font-size:120%;}*/

.input-submit-02 {

    padding: 1px;

    font-size: 100%;

}



.input-submit {

    -webkit-box-shadow: rgba(0, 0, 0, 0.98) 0 1px 0 0;

    -moz-box-shadow: rgba(0, 0, 0, 0.98) 0 1px 0 0;

    box-shadow: rgba(0, 0, 0, 0.98) 0 1px 0 0;

    background-color: #EEE;

    border-radius: 0;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    border: 1px solid #999;

    color: #666;

    font-family: 'Lucida Grande', Tahoma, Verdana, Arial, Sans-serif;

    font-size: 11px;

    font-weight: 700;

    padding: 2px 6px;

    height: 28px;

    cursor: pointer;

}



.input-submit:hover {

    text-decoration: none;

}



.input-submit:active {

    position: relative;

    top: 1px;

}







.msg {

    padding: 10px;

    padding-left: 35px;

}



.msg.warning {

    background: url("../images/ico-warning.gif") 10px 50% no-repeat;

}



.msg.info {

    background: url("../images/ico-info.gif") 10px 50% no-repeat;

}



.msg.done {

    background: url("../images/ico-done.gif") 10px 50% no-repeat;

}



.msg.error {

    background: url("../images/ico-delete.gif") 10px 50% no-repeat;

}



/* =============================================================================

FONT STYLES

============================================================================= */



.bigger {

    font-size: 120%;

}



.smaller {

    font: 85%/1.2 "tahoma", sans-serif;

}



/* This line can be deleted */

.tit {

    padding: 0 11px;

    background: #f5f5f5;

}



.tag {

    background: #ffa;

}



#cols {

    margin: 15px 0;

    padding: 5px 15px 5px 15px;

    background: url("../images/content.gif") 230px 0 repeat-y;

    overflow: hidden;

}



#aside {

    float: left;

    width: 215px;

    margin-right: 0;

}



@media screen and (max-width: 768px) {

    #aside {

        float: none;

        width: 100%;

        margin-bottom: 20px;

    }



    #aside ul {

        width: 100%;

    }



    #aside ul li a {

        width: auto;

    }



    #aside ul ul li a,

    #aside ul li#submenu-active ul li a {

        width: auto;

    }

}



.hidden {

    position: absolute;

    left: -1000em;

    top: -1000em;

    width: 1px;

    height: 1px;

    overflow: hidden;

}



.noscreen {

    display: none;

}



.box {

    min-height: 1px;

}



.box:after {

    display: block;

    visibility: hidden;

    clear: both;

    line-height: 0;

    font-size: 0;

    content: ".";

}



.fix {

    float: none;

    clear: both;

    width: 0;

    height: 0;

    margin: 0;

    padding: 0;

    border: 0;

    line-height: 0;

    font-size: 0;

}



.f-left {

    float: left !important;

}



.f-right {

    float: right !important;

}



.t-left {

    text-align: left !important;

}



.t-center {

    text-align: center !important;

}



.t-right {

    text-align: right !important;

}



.t-justify {

    text-align: justify !important;

}



.va-top {

    vertical-align: top !important;

}



.va-middle {

    vertical-align: middle !important;

}



.va-bottom {

    vertical-align: bottom !important;

}



.nom {

    margin: 0 !important;

}



.nomt {

    margin-top: 0 !important;

}



.nomb {

    margin-bottom: 0 !important;

}



#content {

    margin-left: 232px;

    overflow: visible;

}



#tray .ico-col2 {

    display: none;

}



html>body #aside {

    margin-right: 20px;

}



html>body #content {

    margin-left: 0;

    overflow: hidden;

}





body {

    font: 0.8em/1.5 "arial", sans-serif;

    background-color: #eaeaea;

    color: #303030;

}



a {

    color: #0085cc;

}



a:hover,

a:active,

a:focus {

    color: #df0000;

}



#content h2 {

    color: #0085cc;

}



#content table,

#InfoTable table {

    border: 2px solid #cfcfcf;

}



#content table th,

#InfoTable table th {

    border-right: 1px solid #0074B3;

    background-color: #0085cc;

    color: #fff;

}



#content table td,

#InfoTable table td {

    border: 1px solid #cfcfcf;

}



#content table tr.bg td,

#InfoTable table tr.bg td {

    background-color: #e8f6ff;

}



#content dl dt {

    color: #df0000;

}



#content fieldset {

    border: 1px solid #ccc;

}



#content legend {

    background: #FFF;

    color: #0085cc;

}



#content acronym,

#content abbr,

#content .help {

    border-bottom: 1px dotted #cfcfcf;

}



table.nostyle th,

dl.nostyle dt {

    color: #303030 !important;

}



#tray {

    background-color: #303030;

    color: #cfcfcf;

}



#tray a,

#tray strong {

    color: #fff;

}



#tray a:hover,

#tray a:active,

#tray a:focus {

    color: #b4e3ff;

}



#menu {

    background-color: #0085cc;

}



#menu ul li a {

    background-color: #fff;

    color: #303030;

}



#menu ul li a span {

    background-color: #FFF;

}



#menu ul li a:hover,

#menu ul li a:active,

#menu ul li a:focus,

#menu ul li#menu-active a {

    background-color: #FFF;

    color: #df0000;

}



#menu ul li a:hover span,

#menu ul li#menu-active a span {

    background-color: #FFF;

}



#menu ul li#menu-active a {

    color: #0085cc;

}



#menu ul.f-right a {

    color: #df0000;

}



#content {

    border: 1px solid #afafaf;

    background: #fff;

}



#footer {

    color: #707070;

}



#footer a {

    color: #707070;

}



#footer a:hover,

#footer a:active,

#footer a:focus {

    color: #303030;

}



.HeaderText {

    color: #df0000;

    background: #FFB;

}



/*#aside #logo img {border:1px solid #bfbfbf;}*/

#aside #search fieldset a {

    color: #303030;

}



#aside #search fieldset {

    border: 1px solid #bfbfbf;

}



#aside #search fieldset a:hover,

#aside #search fieldset a:active,

#aside #search fieldset a:focus {

    color: #df0000;

}



#aside #btn-create a {

    background-color: #fff;

    color: #303030;

}



#aside #btn-create a span {

    background-color: #fff;

}



#aside ul li a {

    border-bottom: 1px solid #cfcfcf;

    color: #303030;

}



#aside ul li#submenu-active a {

    background-color: #df0000;

    color: #fff;

}



#aside ul li a:hover,

#aside ul li a:active,

#aside ul li a:focus {

    color: #df0000;

}



#aside ul ul li a,

#aside ul li#submenu-active ul li a {

    border-bottom: 1px solid #cfcfcf;

    background-color: #f5f5f5;

    color: #303030;

}



#aside ul li ul li a {

    background-color: #e3e3e3;

}



#aside ul ul li a:hover,

#aside ul ul li a:active,

#aside ul ul li a:focus,

#aside ul li#submenu-active ul li a:hover,

#aside ul li#submenu-active ul li a:active,

#aside ul li#submenu-active ul li a:focus {

    color: #df0000;

}



#content h1 {

    background-color: #303030;

    color: #fff;

}



#content .tabs {

    border-bottom: 1px solid #cfcfcf;

}



#content .tabs a {

    color: #303030;

}



#content .tabs a span {

    color: #303030;

}



#content .tabs .ui-tabs-selected a {

    color: #fff;

}



#content .tabs .ui-tabs-selected a span {

    color: #fff;

}



.high {

    color: #df0000;

}



.high-bg {

    background: #FFB;

}



.low {

    color: #707070;

}





.msg.warning {

    border: 2px solid #F2DD8C;

    background-color: #FFF5CC;

}



.msg.warning a {

    color: #df0000;

}



.msg.warning a:hover,

.msg.warning a:active,

.msg.warning a:focus {

    color: #303030;

}



.msg.info {

    border: 2px solid #B8E2FB;

    background-color: #E8F6FF;

}



.msg.done {

    border: 2px solid #BBDF8D;

    background-color: #EAF7D9;

}



.msg.error {

    border: 2px solid #FFAEAE;

    background-color: #FEEBEB;

}



.strip_bg {

    background: url("../images/strip_bg.png");

    background-repeat: no-repeat;

    width: 500px;

    height: 27px;

    background-position: bottom;

}



#eventListing {

    float: left;

    padding: 0px 0px 0px 25px;

}



.eventImg {

    float: left;

    min-width: 150px;

}



.eventContent {

    float: left;

    padding-left: 10px;

}



.eventContent h3 {

    margin: 0px;

    padding: 0px;

}



.actions {

    width: 150px;

}



.actions a {

    text-decoration: none;

}



.actions .left {

    float: left;

}



.actions .right {

    float: right;

}



.e-left {

    float: left;

}



.margin100 {

    margin-top: 85px;

}



.margin100left {

    margin-top: 85px;

    margin-left: 100px;

}



#pager {

    margin: 10px 5px 5px 0px;

    height: 25px;

}



ul.paging {

    margin: 0px;

    padding: 0px;

    list-style: none;

}



ul.paging li {

    margin: 0px;

    padding: 0px !important;

    float: left;

    background: none !important;

}



ul.paging li a {

    float: left;

    padding: 5px;

    margin-right: 3px;

    border: solid 1px #D9E6F0;

    text-decoration: none;

    background: #FFFFFF;

    color: #000099;

}



ul.paging li.paging-active a,

ul.paging li a:hover {

    background: #000099;

    color: #FFFFFF;

}



ul.paging li.paging-disabled a,

ul.paging li.paging-disabled a:hover {

    cursor: default;

    background: #FFFFFF;

    border: solid 1px #D9E6F0;

    color: #BBBBBB;

}



ul.paging li.paging-current {

    padding: 5px !important;

    margin-right: 5px !important;

    background: #FFFFFF;

    color: #000099;

}



.ac_results {

    padding: 0px;

    border: 1px solid WindowFrame;

    background-color: Window;

    overflow: hidden;

}



.ac_results ul {

    width: 100%;

    list-style-position: outside;

    list-style: none;

    padding: 0;

    margin: 0;

}



.ac_results iframe {

    display: none;

    /*sorry for IE5*/

    display

    /**/

    : block;

    /*sorry for IE5*/

    position: absolute;

    top: 0;

    left: 0;

    z-index: -1;

    filter: mask();

    width: 3000px;

    height: 3000px;

}



.ac_results li {

    margin: 0px;

    padding: 2px 5px;

    cursor: pointer;

    display: block;

    width: 100%;

    font: menu;

    font-size: 12px;

    overflow: hidden;

}



.ac_loading {

    background: Window url('../images/ajax-loading.gif') right center no-repeat;

}



.ac_over {

    background-color: Highlight;

    color: HighlightText;

}



/* Header container to align logo and navigation on same line */

.header-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 5px 15px;

    flex-wrap: wrap;

}



#banner {

    /* Remove old positioning and sizing */

    /* padding: 5px 15px 0px 15px;

    height: 55px;

    width: 50%;

    margin-top: -10px; */

    flex-shrink: 0;

}



#banner img {

    height: 55px;

    width: auto;

}



/* Responsive behavior for header container */

@media screen and (max-width: 1024px) {

    .header-container {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

    

    #banner {

        align-self: center;

    }

    

    .f500-navigation {

        width: 100%;

        justify-content: center;

    }

}



@media screen and (max-width: 768px) {

    .header-container {

        padding: 10px;

    }

    

    #banner img {

        height: 45px;

    }

    

    .f500-navigation {

        padding: 8px 12px;

        gap: 10px;

    }

}



.loupe {

    background-color: #555;

    background: rgba(0, 0, 0, 0.25);

    border: 5px solid rgba(0, 0, 0, 0);

    cursor: url(../images/blank.png), url(../images/blank.cur), none;

}



.label {

    font-weight: bold;

    min-width: 95px;

    display: block;

}



.left-contents {

    float: left;

    width: 862px;

}



.right-contents {

    float: right;

    width: 862px;

    text-align: left;

}



/* Gallery thumbnails */

#thumblist {

    width: 481px;

    clear: both;

}



#thumblist li {

    display: inline;

    list-style: none;

    margin: 0 5px;

}



#thumblist li a {}



/* Responsive Design */

@media screen and (max-width: 1024px) {

    #content {

        margin-left: 0;

        width: 100%;

    }



    #cols {

        background: none;

        display: flex;

        flex-direction: column;

    }



    #aside {

        float: none;

        width: 100%;

        margin-bottom: 20px;

        order: 1;

    }



    #aside ul {

        width: 100%;

    }



    #aside ul li a {

        width: auto;

        box-sizing: border-box;

        padding: 8px 15px;

    }



    #aside ul ul li a,

    #aside ul li#submenu-active ul li a {

        width: auto;

        box-sizing: border-box;

    }



    .left-contents,

    .right-contents {

        float: none;

        width: 100%;

        max-width: 100%;

        margin-bottom: 20px;

    }



    img {

        max-width: 100%;

        height: auto;

    }



    .input-text {

        width: 100%;

        box-sizing: border-box;

    }



    table.nostyle {

        width: 100%;

    }



    #content table,

    #InfoTable table {

        width: 100%;

        overflow-x: auto;

        display: block;

    }



    #banner {

        width: 100%;

        height: auto;

    }



    /* Fix for thumblist */

    #thumblist {

        width: 100%;

    }

}



@media screen and (max-width: 640px) {

    #menu ul li a {

        float: none;

        display: block;

        margin-bottom: 5px;

    }



    #menu ul li a span {

        float: none;

        display: block;

    }



    .input-submit {

        width: 100%;

        margin-top: 10px;

    }



    fieldset {

        padding: 10px 5px;

    }

}



/* Mobile-First Design Enhancements - Fortune 500 Standards */



/* Base mobile-first button styles */

.button, .btn, input[type="submit"], input[type="button"], button {

    background: #007AFF;

    color: white;

    border: none;

    border-radius: 8px;

    font-weight: 600;

    text-decoration: none;

    text-align: center;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: background-color 0.2s ease;

    cursor: pointer;

    box-sizing: border-box;

}



.button:hover, .btn:hover, input[type="submit"]:hover, 

input[type="button"]:hover, button:hover {

    background: #0056b3;

    text-decoration: none;

    color: white;

}



.button:active, .btn:active, input[type="submit"]:active,

input[type="button"]:active, button:active {

    background: #004494;

    transform: translateY(1px);

}



/* Mobile-optimized form styling */

form {

    max-width: 100%;

    box-sizing: border-box;

}



.form-row {

    margin: 16px 0;

    box-sizing: border-box;

}



.form-row label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color: #333;

    font-size: 14px;

}



/* Improved accessibility and visual hierarchy */

h1, h2, h3, h4, h5, h6 {

    line-height: 1.2;

    margin-bottom: 0.5em;

    color: #1d1d1f;

}



p, li {

    line-height: 1.5;

    margin-bottom: 1em;

}



/* Better link styling for touch devices */

a {

    color: #007AFF;

    text-decoration: underline;

    transition: color 0.2s ease;

}



a:hover, a:focus {

    color: #0056b3;

}



/* Mobile-first table improvements */

table {

    width: 100%;

    border-collapse: collapse;

    margin: 20px 0;

    font-size: 14px;

}



th, td {

    padding: 12px 8px;

    text-align: left;

    border-bottom: 1px solid #ddd;

}



th {

    background-color: #f8f9fa;

    font-weight: 600;

    color: #333;

}



/* Performance and Accessibility Optimizations */

* {

    box-sizing: border-box;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



/* Smooth Scrolling */

html {

    scroll-behavior: smooth;

}



@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }

}



/* Selection Styling */

::selection {

    background: rgba(0, 122, 255, 0.2);

    color: var(--gray-900);

}



/* Skip to Content Link */

.skip-to-content {

    position: absolute;

    top: -40px;

    left: 6px;

    background: var(--gray-900);

    color: white;

    padding: 8px;

    text-decoration: none;

    border-radius: 4px;

    z-index: 1000;

    font-weight: var(--font-semibold);

}



.skip-to-content:focus {

    top: 6px;

}



/* Print Styles */

@media print {

    * {

        background: transparent !important;

        color: black !important;

        box-shadow: none !important;

        text-shadow: none !important;

    }

    

    h1, h2, h3, h4, h5, h6 {

        page-break-after: avoid;

    }

    

    .card, .content-block {

        page-break-inside: avoid;

    }

    

    .no-print {

        display: none !important;

    }

}



/* ============================================================================

FORTUNE 500 VISUAL HIERARCHY - Tesla/Apple Style

============================================================================= */



/* Tesla/Apple-style generous white space system */

:root {

    /* Spacing Scale (Tesla/Apple Pattern) */

    --space-xs: 4px;

    --space-sm: 8px;

    --space-md: 16px;

    --space-lg: 24px;

    --space-xl: 32px;

    --space-2xl: 48px;

    --space-3xl: 64px;

    --space-4xl: 96px;

    

    /* Typography Scale (Apple Pattern) */

    --text-xs: 12px;

    --text-sm: 14px;

    --text-base: 16px;

    --text-lg: 18px;

    --text-xl: 20px;

    --text-2xl: 24px;

    --text-3xl: 30px;

    --text-4xl: 36px;

    --text-5xl: 48px;

    

    /* Line Height Scale */

    --leading-tight: 1.25;

    --leading-snug: 1.375;

    --leading-normal: 1.5;

    --leading-relaxed: 1.625;

    --leading-loose: 2;

    

    /* Font Weights (Apple System) */

    --font-light: 300;

    --font-normal: 400;

    --font-medium: 500;

    --font-semibold: 600;

    --font-bold: 700;

    

    /* Colors (Tesla/Apple Neutral Scale) */

    --gray-50: #f9fafb;

    --gray-100: #f3f4f6;

    --gray-200: #e5e7eb;

    --gray-300: #d1d5db;

    --gray-400: #9ca3af;

    --gray-500: #6b7280;

    --gray-600: #4b5563;

    --gray-700: #374151;

    --gray-800: #1f2937;

    --gray-900: #111827;

}



/* Reset and Base Typography */

html {

    font-size: 16px;

    line-height: var(--leading-normal);

}



body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    font-size: var(--text-base);

    line-height: var(--leading-normal);

    color: var(--gray-800);

    background-color: var(--gray-50);

    letter-spacing: -0.01em;

}



/* Typography Hierarchy (Apple Pattern) */

h1, h2, h3, h4, h5, h6 {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    font-weight: var(--font-semibold);

    line-height: var(--leading-tight);

    letter-spacing: -0.025em;

    color: var(--gray-900);

    margin: 0;

}



/* Tesla/Apple Heading Scale */

h1 {

    font-size: var(--text-5xl);

    font-weight: var(--font-light);

    margin-bottom: var(--space-2xl);

    line-height: 1.1;

}



h2 {

    font-size: var(--text-4xl);

    font-weight: var(--font-light);

    margin-bottom: var(--space-xl);

    margin-top: var(--space-3xl);

    line-height: 1.15;

}



h3 {

    font-size: var(--text-3xl);

    font-weight: var(--font-normal);

    margin-bottom: var(--space-lg);

    margin-top: var(--space-2xl);

}



h4 {

    font-size: var(--text-2xl);

    font-weight: var(--font-medium);

    margin-bottom: var(--space-md);

    margin-top: var(--space-xl);

}



h5 {

    font-size: var(--text-xl);

    font-weight: var(--font-medium);

    margin-bottom: var(--space-sm);

    margin-top: var(--space-lg);

}



h6 {

    font-size: var(--text-lg);

    font-weight: var(--font-semibold);

    margin-bottom: var(--space-sm);

    margin-top: var(--space-md);

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--gray-600);

}



/* Generous Paragraph Spacing (Tesla Pattern) */

p {

    font-size: var(--text-base);

    line-height: var(--leading-relaxed);

    color: var(--gray-700);

    margin: 0 0 var(--space-lg) 0;

    max-width: 65ch;

}



p.lead {

    font-size: var(--text-lg);

    line-height: var(--leading-relaxed);

    color: var(--gray-600);

    margin-bottom: var(--space-xl);

    font-weight: var(--font-light);

    max-width: 60ch;

}



/* List Spacing (Apple Pattern) */

ul, ol {

    margin: var(--space-lg) 0;

    padding-left: var(--space-xl);

}



li {

    margin-bottom: var(--space-sm);

    line-height: var(--leading-relaxed);

}



li:last-child {

    margin-bottom: 0;

}



/* Generous Container Spacing */

.container, .content-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: var(--space-2xl) var(--space-lg);

}



/* Section Spacing (Tesla Pattern) */

section {

    margin: var(--space-4xl) 0;

}



section:first-child {

    margin-top: 0;

}



section:last-child {

    margin-bottom: 0;

}



/* Card/Content Block Spacing */

.card, .content-block {

    padding: var(--space-2xl);

    margin-bottom: var(--space-xl);

    background: white;

    border-radius: 12px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    border: 1px solid var(--gray-200);

}



/* Form Spacing (Apple Pattern) */

.form-group {

    margin-bottom: var(--space-xl);

}



label {

    display: block;

    font-weight: var(--font-medium);

    color: var(--gray-700);

    margin-bottom: var(--space-sm);

    font-size: var(--text-sm);

    letter-spacing: 0.025em;

}



input, textarea, select {

    width: 100%;

    padding: var(--space-md);

    border: 1px solid var(--gray-300);

    border-radius: 8px;

    font-size: var(--text-base);

    line-height: var(--leading-normal);

    transition: border-color 0.2s, box-shadow 0.2s;

    box-sizing: border-box;

}



input:focus, textarea:focus, select:focus {

    outline: none;

    border-color: #007AFF;

    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);

}



/* Table Spacing (Clean Apple Style) */

table {

    width: 100%;

    border-collapse: collapse;

    margin: var(--space-xl) 0;

    background: white;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



th {

    background: var(--gray-50);

    font-weight: var(--font-semibold);

    color: var(--gray-800);

    padding: var(--space-lg) var(--space-md);

    text-align: left;

    border-bottom: 1px solid var(--gray-200);

    font-size: var(--text-sm);

    letter-spacing: 0.025em;

}



td {

    padding: var(--space-lg) var(--space-md);

    border-bottom: 1px solid var(--gray-100);

    color: var(--gray-700);

    vertical-align: top;

}



tr:last-child td {

    border-bottom: none;

}



/* Button Spacing and Typography */

.button, .btn, button, input[type="submit"], input[type="button"] {

    font-family: inherit;

    font-weight: var(--font-medium);

    font-size: var(--text-base);

    line-height: 1;

    padding: var(--space-md) var(--space-xl);

    margin: var(--space-sm) var(--space-sm) var(--space-sm) 0;

    border-radius: 8px;

    border: none;

    cursor: pointer;

    transition: all 0.2s ease;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-sm);

    text-decoration: none;

    letter-spacing: -0.01em;

}



.btn-large {

    font-size: var(--text-lg);

    padding: var(--space-lg) var(--space-2xl);

}



.btn-small {

    font-size: var(--text-sm);

    padding: var(--space-sm) var(--space-lg);

}



/* Navigation Spacing */

.nav, .navigation {

    padding: var(--space-lg) 0;

}



.nav-item {

    margin-right: var(--space-lg);

}



.nav-link {

    padding: var(--space-sm) var(--space-md);

    font-weight: var(--font-medium);

    text-decoration: none;

    border-radius: 6px;

    transition: background-color 0.2s;

}



/* Content Hierarchy Spacing */

.hero-section {

    padding: var(--space-4xl) 0;

    text-align: center;

}



.content-section {

    padding: var(--space-3xl) 0;

}



.section-header {

    margin-bottom: var(--space-2xl);

    text-align: center;

}



/* Grid and Layout Spacing */

.grid {

    display: grid;

    gap: var(--space-xl);

}



.grid-2 {

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}



.grid-3 {

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}



.grid-4 {

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}



/* Mobile Responsive Spacing */

@media screen and (max-width: 768px) {

    :root {

        --space-4xl: 48px;

        --space-3xl: 32px;

        --space-2xl: 24px;

        --text-5xl: 32px;

        --text-4xl: 28px;

        --text-3xl: 24px;

    }

    

    .container, .content-container {

        padding: var(--space-xl) var(--space-md);

    }

    

    .card, .content-block {

        padding: var(--space-xl);

    }

    

    h1 {

        margin-bottom: var(--space-xl);

    }

    

    h2 {

        margin-top: var(--space-2xl);

        margin-bottom: var(--space-lg);

    }

    

    .hero-section {

        padding: var(--space-2xl) 0;

    }

    

    .content-section {

        padding: var(--space-xl) 0;

    }

}



/* Small Mobile Adjustments */

@media screen and (max-width: 480px) {

    :root {

        --space-4xl: 32px;

        --space-3xl: 24px;

        --text-5xl: 28px;

        --text-4xl: 24px;

    }

    

    .container, .content-container {

        padding: var(--space-lg) var(--space-sm);

    }

    

    .card, .content-block {

        padding: var(--space-lg);

    }

}



/* Content Scanability Improvements (Tesla/Apple Pattern) */

.scannable-content {

    line-height: var(--leading-loose);

}



.scannable-content h2,

.scannable-content h3 {

    margin-top: var(--space-4xl);

    padding-top: var(--space-lg);

    border-top: 1px solid var(--gray-200);

}



.scannable-content h2:first-child,

.scannable-content h3:first-child {

    border-top: none;

    padding-top: 0;

    margin-top: 0;

}



/* Visual Content Grouping */

.content-group {

    background: white;

    border-radius: 16px;

    padding: var(--space-2xl);

    margin: var(--space-xl) 0;

    box-shadow: 0 4px 12px rgba(0,0,0,0.05);

    border: 1px solid var(--gray-200);

}



.content-group + .content-group {

    margin-top: var(--space-3xl);

}



/* Reading Flow Improvements */

.reading-content {

    max-width: 65ch;

    margin: 0 auto;

}



.reading-content h2 {

    margin-top: var(--space-4xl);

    margin-bottom: var(--space-xl);

}



.reading-content h3 {

    margin-top: var(--space-3xl);

    margin-bottom: var(--space-lg);

}



.reading-content p {

    margin-bottom: var(--space-lg);

}



.reading-content p + h2,

.reading-content p + h3 {

    margin-top: var(--space-4xl);

}



/* Visual Breaks for Scanability */

.section-divider {

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent 0%, var(--gray-300) 50%, transparent 100%);

    margin: var(--space-4xl) 0;

    border: none;

}



.visual-break {

    height: var(--space-2xl);

    background: transparent;

}



/* Content Emphasis Patterns */

.callout {

    background: var(--gray-50);

    border-left: 4px solid #007AFF;

    padding: var(--space-xl);

    margin: var(--space-xl) 0;

    border-radius: 0 8px 8px 0;

}



.callout h4 {

    color: #007AFF;

    margin-top: 0;

    margin-bottom: var(--space-md);

}



.highlight-box {

    background: linear-gradient(135deg, #fff3cd 0%, #fef9e7 100%);

    border: 1px solid #ffeaa7;

    padding: var(--space-xl);

    border-radius: 12px;

    margin: var(--space-xl) 0;

}



.info-box {

    background: linear-gradient(135deg, #e9f4ff 0%, #f0f8ff 100%);

    border: 1px solid #b3d9ff;

    padding: var(--space-xl);

    border-radius: 12px;

    margin: var(--space-xl) 0;

}



.success-box {

    background: linear-gradient(135deg, #d4edda 0%, #e8f5e8 100%);

    border: 1px solid #c3e6cb;

    padding: var(--space-xl);

    border-radius: 12px;

    margin: var(--space-xl) 0;

}



/* Tesla-style Minimal Cards */

.minimal-card {

    background: white;

    border: 1px solid var(--gray-200);

    border-radius: 12px;

    padding: var(--space-xl);

    transition: all 0.2s ease;

    box-shadow: 0 2px 8px rgba(0,0,0,0.04);

}



.minimal-card:hover {

    box-shadow: 0 8px 32px rgba(0,0,0,0.08);

    transform: translateY(-2px);

}



.minimal-card h3 {

    margin-top: 0;

    margin-bottom: var(--space-md);

}



.minimal-card p {

    margin-bottom: 0;

}



/* Apple-style Status Indicators */

.status-indicator {

    display: inline-flex;

    align-items: center;

    gap: var(--space-xs);

    padding: var(--space-xs) var(--space-sm);

    border-radius: 6px;

    font-size: var(--text-xs);

    font-weight: var(--font-semibold);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.status-success {

    background: #d4edda;

    color: #155724;

}



.status-warning {

    background: #fff3cd;

    color: #856404;

}



.status-info {

    background: #d1ecf1;

    color: #0c5460;

}



.status-error {

    background: #f8d7da;

    color: #721c24;

}



/* Enhanced Focus States */

*:focus {

    outline: 3px solid rgba(0, 122, 255, 0.5);

    outline-offset: 2px;

}



/* Improved Accessible Typography */

.large-text {

    font-size: var(--text-lg);

    line-height: var(--leading-relaxed);

}



.small-text {

    font-size: var(--text-sm);

    line-height: var(--leading-normal);

}



.mono-text {

    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

    font-size: var(--text-sm);

    background: var(--gray-100);

    padding: var(--space-xs) var(--space-sm);

    border-radius: 4px;

}



/* Responsive Typography Scaling */

@media screen and (max-width: 1024px) {

    :root {

        --text-5xl: 40px;

        --text-4xl: 32px;

        --text-3xl: 28px;

        --text-2xl: 22px;

    }

}



@media screen and (max-width: 640px) {

    :root {

        --space-4xl: 64px;

        --space-3xl: 48px;

        --text-5xl: 32px;

        --text-4xl: 28px;

        --text-3xl: 24px;

        --text-2xl: 20px;

    }

    

    .content-group {

        padding: var(--space-lg);

        margin: var(--space-lg) 0;

    }

    

    .callout, .highlight-box, .info-box, .success-box {

        padding: var(--space-lg);

        margin: var(--space-lg) 0;

    }

}



/* Enhanced Visual Contrast (WCAG AA+ Compliant) */

.high-contrast {

    background: white;

    border: 1px solid var(--gray-300);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    color: var(--gray-900);

}



.subtle-background {

    background: var(--gray-50);

    color: var(--gray-800);

}



.emphasis-text {

    color: var(--gray-900);

    font-weight: var(--font-semibold);

}



.muted-text {

    color: var(--gray-600);

    font-size: var(--text-sm);

}



.strong-contrast {

    background: var(--gray-900);

    color: white;

    padding: var(--space-md) var(--space-lg);

    border-radius: 8px;

}



/* Enhanced Link Contrast */

a {

    color: #0066cc;

    text-decoration: underline;

    text-decoration-color: rgba(0, 102, 204, 0.3);

    text-underline-offset: 2px;

    transition: all 0.2s ease;

}



a:hover, a:focus {

    color: #004499;

    text-decoration-color: #004499;

}



a:visited {

    color: #663399;

}



/* High Contrast Mode Support */

@media (prefers-contrast: high) {

    :root {

        --gray-50: #ffffff;

        --gray-100: #f0f0f0;

        --gray-200: #e0e0e0;

        --gray-300: #c0c0c0;

        --gray-400: #808080;

        --gray-500: #606060;

        --gray-600: #404040;

        --gray-700: #303030;

        --gray-800: #202020;

        --gray-900: #000000;

    }

    

    .card, .content-block {

        border: 2px solid var(--gray-800);

    }

    

    .button, .btn {

        border: 2px solid currentColor;

    }

}



/* Reduced Motion Support */

@media (prefers-reduced-motion: reduce) {

    * {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}



/* Mobile-specific utility classes */

.mobile-only {

    display: none;

}



.desktop-only {

    display: block;

}



@media screen and (max-width: 768px) {

    .mobile-only {

        display: block;

    }

    

    .desktop-only {

        display: none;

    }

    

    /* Larger tap targets for mobile */

    .mobile-tap-target {

        min-height: 48px;

        min-width: 48px;

        padding: 12px;

    }

}