/* Cards site CSS */
@font-face {
	font-family: 'IBM140310PitchRegular';
	src: url('Fonts/ibm140310pitch-regular-webfont.eot?') format('embedded-opentype'),
	     url('Fonts/ibm140310pitch-regular-webfont.ttf') format('truetype'); 
	font-weight: normal;
	font-style: normal;
}

body {
    font-size: .80em;
    font-family: Verdana, Sans-Serif;
    margin: 0px;
    padding: 0px;
}

table { border-collapse: collapse; width:100%; vertical-align:middle; }
td > span { display:inline-block; vertical-align:middle; }
th { text-align:right; vertical-align:middle; width:1px; color:#FD0000; 
     padding-left: 13%;
}

.Num { text-align:right; vertical-align:middle; }
.ItemTitle { font-size:1.0em; width:500px; vertical-align:middle; }
.ItemTitleS { width:500px; vertical-align:middle; }
.ItemList {
    text-align:left;
    width:99%;
    font-family: 'IBM140310PitchRegular', Verdana, Sans-Serif;
    background-color:#CFC;
}
tr.ItemList { background-color:#CFC; }
tr.ItemListAlt { background-color:#EFE; }
.ItemListShow { width:25px; }
.ItemListHolder { width:25px; }
.ItemListMfgr { width: 40ch; }
.ItemListMfgrNum { width:8%; }
.ItemListCompany { width:27%; }
.ItemListCoNum { width:9%; }
.ItemListTitle { width:35%; }

.Short {
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
}
.YN {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    border-radius: 4px;
}
.EO {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    border-radius: 4px;
}
.Char2 { display: inline; vertical-align: middle; width: 15px; }
.Char2w { display: inline-block; vertical-align: middle; width: 20px; }
.Char3 {
    display: inline;
    vertical-align: middle;
    width: 22px;
    border-radius: 4px;
}
.Char4 { display: inline; vertical-align:middle; width:30px; }
.Char5 {
    display: inline;
    vertical-align: middle;
    width: 45px;
    border-radius: 4px;
}
.Char6 {
    display: inline;
    vertical-align: middle;
    width: 55px;
    border-radius: 4px;
}
.Color { display:inline-block; vertical-align:middle; width:70px; }
.Med {
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
}
.Med2 { width:200px; display:inline-block; vertical-align:middle; }
.Long {
    width: 300px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
}
.Huge { width:99%; display:inline-block; vertical-align:middle; }
.Debug { width:99%; font-size:x-small; }
.Lbl { border-style:none; }
.LblLeft { display:inline-block; text-align:left; }
.LblBig { font-weight:bold; font-size:1.1em; }
.LblSml { }

.dShort {
    border: none;
    display: inline-block;
    vertical-align: middle;
}

.dYN {
    border: none;
    display: inline-block;
    vertical-align: middle;
    
}

.dEO {
    border: none;
    display: inline-block;
    vertical-align: middle;
    
}

.dChar2 {
    border: none;
    display: inline;
    vertical-align: middle;
   
}

.dChar2w {
    border: none;
    display: inline-block;
    vertical-align: middle;
    
}

.dChar3 {
    border: none;
    display: inline;
    vertical-align: middle;
   
}

.dChar4 {
    border: none;
    display: inline;
    vertical-align: middle;
    
}

.dChar5 {
    border: none;
    display: inline;
    vertical-align: middle;
}

.dChar6 {
    border: none;
    display: inline;
    vertical-align: middle;
   
}

.dColor {
    border: none;
    display: inline-block;
    vertical-align: middle;
    
}

.dMed {
    border: none;
    display: inline-block;
    vertical-align: middle;
}

.dMed2 {
    border: none;
    display: inline-block;
    vertical-align: middle;
}

.dLong {
    border: none;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.dHuge {
    border: none;
    display: inline-block;
    vertical-align: middle;
}

.dDebug {
    border: none;
    font-size: x-small;
}

.dLbl {
    border: none;
    border-style: none;
}

.dLblLeft {
    border: none;
    display: inline-block;
    text-align: left;
}

.dLblBig {
    border: none;
    font-weight: bold;
    font-size: 1.1em;
}

.dLblSml {
    border: none;
}

.ddisplayNote {
    border: none;
    height: auto;
    overflow-wrap: break-word;
    overflow: scroll;
    display: inline-block;
}
a:link, a:visited { color: #034af3; }

a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}
h1 {
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-family: Verdana, Sans-Serif;
}
h2 { font-size: 1.5em; font-weight: 600; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5, h6 {
    font-size: 1.6em;
    color: white;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 { margin-top: 0px; }


h7 {
    font-size: 1.0em !important;
    color: #666666 !important;
    text-transform: none !important;
    font-weight: 200 !important;
    margin-bottom: 0px !important;
    font-family: IBM140310PitchRegular !important;
}

.page {
    background-color: #fff;
    margin: 0px auto 0px auto;
    border: 1px solid #496077;
    text-align: left;
    height: 100%;
}

.header {
    margin: 0px;
    padding: 0px;
    background-color: #006699;
    width: 100%;
}
.header a { color:White; vertical-align:middle; }
    .header h1 {
        font-family: Verdana, Sans-Serif;
        margin: 0px;
        padding: 0px 0px 0px 20px;
        color: White;
        border: none;
        line-height: 2em;
        font-size: 2em;
    }
.main { padding: 0px 12px; 
        margin: 12px 8px 8px 8px; 
        min-height: 420px; 
    }

.leftCol {
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}
.footer {
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

div.Err { background-color:#FE6100; font-size:large; }
div.hideSkiplink { background-color:#3a4f63; width:100%; }
div.menu { padding: 4px 0px 4px 8px; }
div.menu ul { list-style: none; margin: 0px; padding: 0px; width: auto; }

div.menu ul li a, div.menu ul li a:visited {
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

fieldset {
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p  { margin: 2px 12px 10px 10px; }
fieldset.login label, fieldset.register label, fieldset.changePassword label { display: block; }
fieldset label.inline  { display: inline; }
legend  {
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}
input.textEntry { width: 320px; border: 1px solid #ccc; }
input.passwordEntry  { width: 320px; border: 1px solid #ccc; }
div.accountInfo { width: 42%; }

.clear { clear: both; }
.title {
    display: block;
    float: left;
    text-align: left;
    width: auto;
    vertical-align: middle;
}

.loginDisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
    font-family: 'NixinRegular', Verdana, Sans-Serif;
}

.loginDisplay a:link { color: white; }
.failureNotification { font-size: 1.2em; color: Red; }
.bold { font-weight: bold; }
.submitButton { text-align: right; padding-right: 10px; }

.searchDisplay{
    text-align: left;
}

.searchNote {
    width: 50vw;
    height: auto;
    border-radius: 4px;
}

.displayNote {
    width: 50vw;
    height: auto;
    overflow-wrap: break-word;
    overflow: scroll;
    display: inline-block;
}
.highlight {
    color: #FE6100;
    font-weight: bold
}


.modified {
    font-size: xx-small;
    text-align: left;
    color: #fe6100;
    font-family: Verdana, Sans-Serif;
}

.contact_us_start{
    visibility:hidden;
}

.contact_us_post_captcha{
    visibility:visible;

}

.captcha{
    height: 250px;
    width: 80%;
    border-style:hidden;
    border-color:#006699;
    border-width: 5px;
    position:center;
    /*position:absolute;*/
    top: 60px;
}

.captcha_title {
    font-size: 25px;
    color: #006699;
    text-align: left;
    /*position: relative,center;*/
    position: center;
}

.captcha_dlQuestions{
    width: 75%;
    height: 200px;
    background-color: white;
}

.captcha_image{
    height:75px;
    width:75px;
}

.ImagePopupLarge {
/*    height: 75%;
    width: 75%;
    max-width: 75%;*/
}

/* GROK code */
.form-container {
    max-width: 800px;
    margin: 0; /* Left-justified */
    padding: 2px; /* Compact padding */
    outline: none !important;
    border: none !important;
}

.section {
    margin-bottom: 1px; /* Compact section spacing */
}

.fields-container {
    width: 100%; /* Ensure full width for rows */
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns per row */
    gap: 10px; /* Space between columns */
    margin-bottom: 1px; /* Compact spacing between rows */
}

.field-row3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns per row */
    gap: 10px; /* Space between columns */
    margin-bottom: 1px; /* Compact spacing between rows */
}

.field-row span {
    white-space: nowrap;
    display: flex; /* Use flexbox for better alignment control */
    align-items: center; /* Vertically center the label and textbox */
    gap: 5px; /* Space between label and textbox */
    flex: 0 0 auto;
}

.field-row3 span {
    white-space: nowrap;
    display: flex; /* Use flexbox for better alignment control */
    align-items: center; /* Vertically center the label and textbox */
    gap: 5px; /* Space between label and textbox */
    flex: 0 0 auto;
}

.span-full {
    grid-column: span 2; /* Span both columns for single fields like Title */
    width: 100%;
}

.highlight {
    font-weight: bold;
    display: block;
    margin-bottom: 1px; /* Compact header spacing */
}

hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 2px 0; /* Compact separator spacing */
}

/* Prevent inputs from overflowing */
input[type="text"] {
    max-width: 100%; /* Fit within grid cell */
    box-sizing: border-box; /* Include padding/borders in width */
}

/* Responsive design */
/*@media (max-width: 600px) {
    .field-row {
        grid-template-columns: 1fr;*/ /* Stack fields on small screens */
    /*}

    .span-full {
        grid-column: span 1;*/ /* Reset for single column */
    /*}*/
/*}*/

.album-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.album-image {
    width: 450px;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
}

#album-scroll-area {
    padding: 10px;
    overflow-y: auto;
    height: 100%;
}
.scroll-wrapper {
    height: 600px; /* or adjust as needed */
    overflow-y: auto;
    overflow-x: auto; /* allow horizontal scroll if needed */
    border: 0px solid #ccc;
    margin: 0;
    padding: 0;
}
.table-container {
    width: 100%;
    border: 0px solid #ccc;
    margin: 0;
    padding: 0;
}

.table-container table.ItemList {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    }

.table-container thead th {
    background-color: #f1f1f1;
    color: black !important;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0px;
    text-align: left;
    }

.ItemList td,
.ItemListAlt td {
    padding: 0px;
/*    border-top: 1px solid #ddd;*/    
    line-height: 1.3; /* tighter line spacing */
    font-size: 13px; /* optional: shrink font slightly */
    vertical-align: middle; /* align text vertically */
    height: 18px; /* optional: force consistent row height */
}
.holderLink {
    margin-right: 1.0em;
}

.side-button {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: fixed;
    top: 40%;
    height: 150px;
    width: 20px;
    z-index: 999;
    cursor: pointer;
    font-weight: bold;
    color: #fe6100; 
}

.left-button {
    left: 0;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

.right-button {
    right: 0;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}
.side-nav-buttons {
    position: relative;
    z-index: 1000;
}