/*** common ***/
* { box-sizing: border-box; }

html { min-height: 100%; }

body { background-position: top; background-size: contain; background-image: linear-gradient( 180deg, hsl(0deg 0% 10%) 0%, hsl(0deg 0% 12%) 26%, hsl(0deg 0% 15%) 39%, hsl(0deg 0% 17%) 50%, hsl(36deg 18% 30%) 61%, hsl(36deg 36% 44%) 74%, hsl(36deg 55% 57%) 100% ); background-image: linear-gradient( in oklab, lch(7% 0 10) 50%, lch(68% 46 74) 100% ); background-repeat: no-repeat; }

body.portal { padding-top: 60px; }

body.portal::before { content: ''; display: block; height: 220px; background: url("../../resources/images/logo_polarstern.png"); background-repeat: no-repeat; background-position: 30px 20px; background-size: 220px; position: absolute; left: 0; top: 0; width: 100%; z-index: -1; }

input, select, textarea { font-size: 1.1em; border: 1px solid #777777; border-radius: 4px; padding: 4px 6px; }

input[type="text"], input[type="password"] { height: 28px; }

select { margin: 0px; height: 28px; padding: 4px 6px 4px 2px; }

p { padding-bottom: 8px; }

#MainTabs { padding: 10px 10px; margin: 0 auto !important; text-align: center; background-color: white; max-width: min(95vw, 1480px); box-sizing: border-box; }

.header { margin-top: 40px !important; padding: 20px; background-color: white; max-width: min(95vw, 1480px); box-sizing: border-box; }

.footer { color: white; margin-top: -8px; border: none; }

.header .info { }

.body-content { padding: 10px 20px 20px; background-color: #313131; background-size: 100%; max-width: min(95vw, 1480px); box-sizing: border-box; }

img.logo { float: left; text-align: left; }

img.background { height: auto; left: 0; min-height: 100%; min-width: 1024px; position: fixed; top: 0; width: 100%; z-index: -1; }

div.header-info { float: left; font-weight: bold; font-size: 1.2em; text-align: left; }

div.title { color: #2b4664; }

div.welcome { color: #ffaa00; }

a.logout { float: right; color: #2b4664; font-weight: bold; }

a.logout:hover { color: #ffaa00; }

.fieldset-std { margin: 10px 0 0; text-align: left; background-color: #f4f4f4; padding-bottom: 10px; }

.fieldset-std > .label { padding: 10px; background-color: #f4f4f4; border-bottom: 2px solid white; font-weight: bold; color: #313131; font-size: 1.1em; }

.fieldset-std .tabs { padding-bottom: 15px; border-bottom: 2px solid white; color: #2b4664; font-size: 1.1em; }

.fieldset-std .content { padding: 20px 40px 10px 40px; }

.fieldset-std label { width: 200px; text-align: left; display: inline-block; }

.fieldset-std p { display: flex; align-items: center; gap: 8px; }

.sidepanel { position: fixed; width: 170px; float: right; right: 10px; }

.sidepanel ul, ul.sidepanel { list-style-type: none; padding: 10px; }

.sidepanel li { padding: 5px 0; }

.sidepanel label.left { float: left; width: 50px; }

.sidepanel input[type="text"] { width: 80px; font-size: 1.1em; }

label.error { background-image: url("icons/exclamation.png"); background-position: 0 center; background-repeat: no-repeat; min-height: 16px; padding-left: 20px; color: #cd0a0a; width: auto; }

/*** jQuery UI tweaks ***/
.ui-tabs-fix { font-family: Arial,Sans-Serif; font-size: 1.025em; padding-left: 4px !important; padding-right: 4px !important; }

.ui-icon-left { float: left; }

/*** login ***/
#loginform-dialog { position: relative; max-width: 450px; min-width: min(450px, 100%); color: hsl(36 10% 90% / 1); background-color: hsl(0deg 2% 75% / 30%); backdrop-filter: sepia(0.5) blur(100px); display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-self: center; border-radius: 50px; background-clip: border-box; }

.loginform-header { width: 100%; display: flex; flex-direction: column; align-content: center; flex-wrap: wrap; background: url("../../resources/images/logo_polarstern.png"); background-repeat: no-repeat; background-position: 30px 20px; background-size: 150px; }

.loginform-title { width: 100%; display: flex; flex-direction: column; justify-content: center; align-content: center; flex-wrap: wrap; box-sizing: border-box; font-family: serif; font-size: large; padding: 60px 0; }

.loginform-title h1 { padding: 0; letter-spacing: 0.05em !important; font-size: 2em; font-weight: normal; padding-left: 80px; }

.loginform-title h3 { padding: 0; letter-spacing: 0.05em !important; font-size: 1em; font-weight: normal; padding-left: 80px; }

.loginform-title h4 { padding: 0; letter-spacing: 0.05em !important; font-size: 1em; font-weight: normal; align-self: center; padding-top: 20px; }

.loginform-footer { padding: 10px 10px 10px 15px; text-align: left; border-top: 1px solid #c4c4c4; }

.loginform-row { display: flex; flex-direction: column; flex-wrap: wrap; width: 250px; row-gap: 5px; }

.loginform-row .text-input { max-width: 100%; text-align: center; }

.loginform-row label.error { max-width: 100%; display: block; color: #fbbbb6; }

.loginform-footer a.renew-pwd { color: white; }

.loginform-footer a.renew-pwd:hover { color: #ffaa00; background: #777777; }

/*** MessageBox ***/
.message-box { padding: 10px; margin: 10px 0 20px; text-align: left; }
.message-box > p { padding: 0; }
.message-box span.ui-icon { float: left; margin-right: 10px; }

/* Table simple */

/*** GridView ***/
.TabGridView { text-align: left; width: 100%; border: 1px solid #bbbbbb; background-color: white; color: #535353; border-collapse: collapse; }

.TabGridView th { text-align: left; }

.TabGridView td.spacer { background-color: White; padding-left: 50px; }

.TabGridView tr.alternate, .TabGridView td.alternate { background-color: #f7f7f7; }

.TabGridView tr.selected, .TabGridView td.selected { color: #ffffff; background-color: #313131; }

.TabGridView td.header { font-weight: bold; }

.TabGridView td { padding: 5px; }

.TabGridView tr.link { cursor: pointer; }

.TabGridView tr.link:hover { text-decoration: underline; }

/*** Tab MyGoldDepot ***/
#GoldSubTabFrame { margin: 0 10px 0 10px; padding: 5px 10px 5px 10px; }

/*** Tab MyCustomers ***/
#productsGrid { width: 98%; font-family: Arial,Sans-Serif; }

/*** Tab Provisions ***/
@media screen {
	#jqChart { width: 500px; height: 250px; margin-left: 50px; }
}

@media print {
	#jqChart { width: 100%; height: 400px; }
}

/*** Tab ChangePassword ***/
.pwdchange-row { margin: 10px 0 5px 0; display: flex; gap: 8px; align-items: center; }

/*** Tab Address  ***/
div.btnSend { padding: 10px 10px; }

/* SubTabs */
#SubTabs { padding-top: 10px; display: flex; background-color: white; }

#SubTabs li { list-style: none; display: inline-block; background-color: white; padding: 10px; border-top: 4px solid white; cursor: pointer; border-collapse: collapse; border-spacing: 0; }

#SubTabs li:hover { color: #ffaa00; }

#SubTabs li.active { background-color: #f4f4f4; font-weight: bold; border-top: 4px solid #689fb6; cursor: default; color: #2b4664; border-right: 1px solid #d4d4d4; border-left: 1px solid #d4d4d4; }

/* jQuery UI */

.ui-tabs { position: relative; padding: .2em; zoom: 1; }
/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: 0 5px; }

.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 4px 2px 0 0; border-bottom: 0; padding: 0; white-space: nowrap; }

.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }

.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; }

.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; }

.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; }
/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; }

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }

/* jQuery UI  tweaks */

.ui-widget-header, .ui-state-default, .ui-widget-header .ui-state-default,
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-color: #313131; background-image: none; border: 0; }

.ui-tabs .ui-tabs-nav li { background-color: #313131; }
/*.ui-tabs .ui-tabs-nav li a { color: white; }*/
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { background-color: #313131; }

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a { color: #fa0; font-weight: bold; cursor: default; }

.ui-state-highlight { background-image: none; }

.login-form { padding: 0 0 60px 0; margin: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-content: center; flex-wrap: wrap; }

.input-container { display: flex; flex-direction: column; justify-content: center; align-content: center; flex-wrap: wrap; row-gap: 20px; }

#LoginButton { cursor: pointer; text-align: center; text-decoration: none; }

.login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.login-container .message-box { margin-left: 20px; margin-right: 20px; }
.login-container form { display: flex; justify-content: center; }