body {
 margin: 0px auto;
 font-family: Helvetica, Verdana, Arial, sans-serif;
 color: #666666;
 background-color: #FFFFFF;
 border-top: 1px solid #A8A8A8;
 border-right: 1px solid #3C7FB5;
 border-left: 1px solid #B1B382;
 text-align: center;
}

h2, .saas-h2, .user-list-title .display-info-title {
color: #B1B382;
font-size: 1.5em;
font-weight: bold;
}

a:link              { color:#3C7FB5; text-decoration:none; }
a:visited           { color:#3C7FB5; text-decoration:none; }
a:hover             { color:#575D66; text-decoration:none; }
a:active            { color:#575D66; text-decoration:none; }

li a {
color: #3C7FB5;
font-size: 0.9em;
}


input.button {
color: #3C7FB5;
border: #B1B382 2px solid;
}

input.tinybutton {
color: #3C7FB5;
border: #B1B382 2px solid;
font-size:0.5em;
}


div.topbar{
    width: 95%;
    min-width: 950px;
    margin: 0px auto;
}

/* ================================================================================
 * The following block exists to set a minimum width on the header bar to prevent
 * reflow issues in 1024x768 windows, in IE (which doesn't support CSS min-width.
 *
 * The origin of this hack is http://www.webreference.com/programming/min-width/
 * ================================================================================ */
* html .minwidth-hack-border {
	border-left:950px solid #fff;
}

* html .minwidth-hack-content {
	margin-left:-950px;
        position:relative;
}

/*\*/
* html .minwidth-hack-border, * html .minwidth-hack-content {
	height: 1px;
}
/**/

/* ================================================================================
 * END CSS min-width hack.
 * ================================================================================ */


div.page {
    width: 95%;
    text-align: left;
    margin: 0px auto;
}

/* Changes Crystal Sept 7/10 */
.saas-btn {
    display:inline-block;
    background:none;
    margin:0;
    padding:3px 0;
    border-width:0;
    overflow:visible;
    font:100%/1.2 Arial,Sans-serif;
    text-decoration:none;
    color:#333;
    background:#ddd url(../../img/bg-button.gif) repeat-x 0 0;
    border-left:1px solid #bbb;
    border-right:1px solid #aaa;
}

a.saas-btn              { color:#333; text-decoration:none; }

#content{padding-top:10px;}

#content table.saas_table { margin: 10px 5px 10px 0px; padding: 5px 7px 5px 7px;}
#content table.saas_table th { text-align:left; border-bottom:1px solid #B1B382; }
#content table.saas_table td { padding: 5px 10px 5px 2px; font-size:.85em; font-weight:normal;}

.proxy_container {
    padding-top: 15px;
    padding-bottom: 15px;
}

td.label {
    text-align: right;
}

.display-info-title {
    margin-top: 4px;
    margin-bottom: 4px;
}

/*End Changes Crystal Sept 7/10 */
form.cmxform label { text-align:right; }
.right_align  {text-align:right;}
div.header{
 width: 100%;
 margin: 0px auto;
 text-align:left;
 font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
 display: flex;
 justify-content: space-between;
 padding:5px;
}

div.login{
 font-size:0.75em;
 text-align:left;
 display: flex;
 align-items: center;
}

div.footer{
 width: 100%;
 border-top: #031e4e solid 1px;
 heigth: 50px;
 /*  Changes Crystal Sept 7/10*/
 margin:10px 0px;
 padding-top: 5px;
 /* End Changes Crystal Sept 7/10*/
 font-size:.8em;
 text-align: right;
 font-weight: lighter;
 font-style: italic;
}

.navcontainer {
    width:100%;
    font-size:0.8em;
    font-weight:bold;
    position: relative;
    z-index: 1000;
}

P.survey {
 font-size:0.7em;
}

TABLE.saas-menu {
 spacing: 0px;
}

TABLE.saas-menu TD {
 color: #3C7FB5;
 border: #B1B382 solid 3px;
 padding: 5px;
 spacing: 0px;
}

.saas-breadcrumb {
 font-size: 10pt;
 font-weight: bold;
}

div.saas-breadcrumb {
    padding-bottom: 4px;
}

.saas-breadcrumb a:link              { color:#3C7FB5; text-decoration:none; }
.saas-breadcrumb a:visited           { color:#3C7FB5; text-decoration:none; }

.form-message-bar {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}

.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('../img/knobs/info.png');
}

.error, ul.errorlist {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('../img/knobs/error.png');
}

ul.errorlist {
    list-style: none;
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}

.xmlreport_table th {
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
}

th.xmlreport_col_groupbegin, td.xmlreport_col_groupbegin {
    border-left: 10pt solid white;
}

.xmlreport_row_thead th {
padding: 0.5em 0.75em;
white-space: nowrap;
}

.xmlreport_row_thead th {
white-space: normal;
}

tr.xmlreport_oddrow {
background: #EAEAEA;
}

.unavailable_menu_item {
    color: #D8000C;
    background-color: #FFBABA;
}

.ralign {
    text-align: right;
}

.saas_error_message {
    color: #D8000C;
    background-color: #FFBABA;
    padding: 15px 10px;
    border-radius: 4px;
    max-width: var(--content-width);
}

.saas_success_message {
    color: #155724;
    background-color: #d4edda;
    padding: 15px 10px;
    border-radius: 4px;
    max-width: var(--content-width);
}

.search_box {
    display: inline-block;
    margin-right: 10px;
}

.welcome_message {
    margin-right: 10px;
}

.language_switcher {
    display: inline-block;
    margin-right: 10px
}

/* ---- Custom login page (username, password, company) styles ---- */
:root {
    --bg-dark: hsl(201 100% 89%);
    --bg: hsl(201 100% 94%);
    --bg-light: hsl(201 100% 99%);
    --text: hsl(217 100% 7%);
    --text-muted: hsl(196 100% 16%);
    --highlight: hsl(200 100% 96%);
    --border: hsl(196 88% 39%);
    --border-muted: hsl(199 69% 55%);
    --primary: hsl(196 100% 16%);
    --secondary: hsl(29 100% 20%);
    --danger: hsl(7 47% 42%);
    --warning: hsl(53 100% 17%);
    --success: hsl(161 100% 19%);
    --info: hsl(217 50% 44%);
    --content-width: 250px;      /* Width for input fields and buttons */
}

.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 75vh;
    padding: 2rem;
}

.login-box {
    border: 1px solid var(--highlight);
    padding: 2rem;
    border-radius: 12px;
    background:var(--bg-light);
    box-shadow: 0 8px 100px rgba(0, 0, 0, 0.25);
}

.login-form table {
    border-collapse: separate;
    border-spacing: 0.5em 0em;
}

.login-form tr{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    margin-block-end:1.5rem;
    gap:.5rem;
}


.login-form td.label{
    text-align:left;
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form select,
#login-button {
    font: 500 1rem/1.4 sans-serif;
    font-size: 1rem;
    padding: 0.5em;
    width: var(--content-width);
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.login-form label {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}

.login-box .errorlist{
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: .75rem 0.75rem;;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    background-image: none;
}

.login-button-row {
    text-align: center;
    display: flex;
  margin-left: 0.5em;
}

#login-button {
    display: inline-block;
    width: var(--content-width);
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border-radius: 12px;
    color:var(--bg-light);
    background:var(--text);
    cursor:pointer;transition:background .15s, transform .15s;
}

#login-button:hover  {background:var(--text-muted);}

#login-spinner {
    display: none;
}