/* 2-SAPP.CSS ////////////////////////////////////////////////////////// */

/* ELEMENTS ------------------ */
body                            { background:#ccc; background:linear-gradient(#666,#ccc);  background-attachment:fixed; overflow-y:scroll; padding:30px; }
body                            { font-size:80%; } /* base-font:~13px of 16px */

th, td                          { padding:0; }

h1                              { font-size:2.5em; margin-top:20px; margin-bottom:20px; text-transform:uppercase; }
h2                              { font-size:2.0em; margin-top:20px; margin-bottom:10px; font-variant:small-caps; }
h3                              { font-size:1.6em; margin-top:20px; margin-bottom:10px; font-variant:small-caps; }
h4                              { font-size:1.4em; margin-top:15px; }
h5                              { font-size:1.2em; margin-top:10px; }
h6                              { font-size:1.0em; margin-top:05px; }

a:hover                         { text-decoration:underline; }

/* ELEMENTS FORM ------------- */
button, input, select, textarea { min-width:25px; min-height:21px; background:#eee; border:2px solid #999; padding:2px; font-size:82%; vertical-align:middle; color:#333; }
button[type=button]             { border-color:#999; background:#ccc; cursor:pointer; }
button[type=button]:hover       { border-color:#333; background:#999; }
button[type=submit]             { border-color:#999; background:#ccc; cursor:pointer; }
button[type=submit]:hover       { border-color:#333; background:#999; }
button[disabled]                { border-color:#ddd; background:#ddd; color:#ddd; cursor:default; }
button[disabled]:hover          { border-color:#ddd; background:#ddd; color:#ddd; cursor:default; }
input[type=submit]              { border-color:#999; background:#ccc; cursor:pointer;}
input[type=submit]:hover        { border-color:#333; background:#999; }
input[type=text]                { }
input[type=password]            { }
input[type=file]                { background:#eee; font-size:45%; }
input[disabled]                 { border-color:#ddd; background:#ddd; color:#ddd; cursor:default; }
input[disabled]:hover           { border-color:#ddd; background:#ddd; color:#ddd; cursor:default; }
select                          { padding:1px; }
textarea                        { width:100%; height:200px; resize:vertical; }

[data-tooltip]                  { position:relative; white-space:pre-line; }
[data-tooltip]:hover:after      { position:absolute; z-index:89; top:16px; left:0; overflow-x:hidden; width:80px; border:2px solid #333; background:#ddd; padding:2px; display:inline-block; white-space:pre-line; text-align:left; font-size:82%; content:attr(data-tooltip); }

.cssTooltip2                    { display:inline; position:relative; border-bottom:1px dotted #666; }
.cssTooltip2:hover:after        { z-index:88; background:#333; background:rgba(0,0,0,.8); border-radius:5px; bottom:26px; line-height:1.4; color:#fff; content:attr(data-tooltip2); left:20%; padding:5px 15px; position:absolute; width:180px; }
.cssTooltip2:hover:before       { z-index:89; border:solid; border-color:#333 transparent; border-width:6px 6px 0 6px; bottom:20px; content:""; left:50%; position:absolute; }

.cssWidgetFormAddon             { width:143px; text-align:left; white-space:nowrap; text-overflow:ellipsis; }
.cssWidgetFormAddon[data-tooltip]:hover:after { width:117px; left:-2px; }
.cssWidgetFormInfo              { width:18px; border-color:#999 !important; background-color:#999 !important; color:#fff; }
.cssWidgetFormMailto            { }

.cssWidgetFormButton            { display:inline; }
.cssWidgetFormButton input[type=submit] { min-width:60px; }
.cssWidgetFormButton button[type=submit] { min-width:60px; }
.cssWidgetFormInput             { display:inline; white-space:nowrap; }
.cssWidgetFormInput input[type=text]       { width:110px; border-right:0; }
.cssWidgetFormInput input[type=text]:focus { width:220px; }
.cssWidgetFormInput input[type=password]   { width:110px; border-right:0; }
.cssWidgetFormInput select                 { width:110px; border-right:0; }
.cssWidgetFormFileupload        { display:inline; white-space:nowrap; }
.cssWidgetFormFileupload input[type=file]  { width:118px; height:18px; border-right:none; }
.cssWidgetFormForm              { }
.cssWidgetFormPreview           { display:inline; width:60px; border: 2px solid #ccc; padding:2px 10px; background:#ddd; text-align:center; color:#666; font-size:82%; font-style:italic; }
.cssWidgetFormTextarea          { width:100%; }
.cssWidgetFormTextarea button[type=submit] {width:100%;}

/* BODY(type) & PARTS -------------- */
.cssBody                        { position:relative; margin:0 auto; border:2px solid #333; background:#fff; overflow:hidden; }

#idBodyDefault                  { width:960px; min-width:500px; max-width:960px; height:100%; min-height:100%; }
#idBodypartDefaultHeader        { }
#idBodypartDefaultNav           { }
#idBodypartDefaultMain          { }
#idBodypartDefaultFooter        { }

#idBodyMail                     { width:960px; min-width:500px; max-width:960px; } /* better than 700px */
#idBodypartMailHeader           { }
#idBodypartMailNav              { } /* not used */
#idBodypartMailMain             { }
#idBodypartMailFooter           { }

/* PARTS --------------------- */
.cssPart                        { position:relative; }

.cssPartHeader                  { background:#eee; color:#666; }
.cssPartNav                     { background:#eee; color:#666; }
.cssPartMain                    { height:100%; background:#fff; }
.cssPartFooter                  { background:#eee; color:#666; }
.cssPartMain a[target="_blank"]:after    { display:inline-block; width:0.9em; height:0.9em; margin-left:2px; background-repeat:no-repeat; font-size:82%; content: url('../../assets/fontawesome/svg/solid/external-link-alt.svg'); }
.cssPartMain a[href^="mailto:"]:after    { display:inline-block; width:0.9em; height:0.9em; margin-left:2px; background-repeat:no-repeat; font-size:82%; content: url('../../assets/fontawesome/svg/regular/envelope.svg'); }
.cssPartMain a[download]:after           { display:inline-block; width:0.9em; height:0.9em; margin-left:2px; background-repeat:no-repeat; font-size:82%; content: url('../../assets/fontawesome/svg/solid/download.svg'); }

/* SECTIONS ------------------ */
.cssSection                     { position: relative; }

/* Header */
#idSectionTop                   { height:50px; }
#idSectionTopLeft               { width:250px; height:50px; display:table-cell; vertical-align:middle; padding-left:25px; text-align:left; }
#idSectionTopCenter             { /* width */  height:50px; display:table-cell; vertical-align:middle; text-align:center; }
#idSectionTopRight              { width:250px; height:50px; display:table-cell; vertical-align:middle; padding-right:25px; text-align:right; }

/* Title */
#idSectionTitle                 { height:50px; }
#idSectionTitleLeft             { width:160px !important; height:50px; display:table-cell; vertical-align:middle; padding-left:20px; }
#idSectionTitleLeft>.divBox                          { width:100px !important; padding:5px; }
#idSectionTitleLeft>.divBox>.divBox2                 { background:transparent; border:none; box-shadow:none; }
#idSectionTitleLeft>.divBox>.divBox2>.divBoxTitle    { width:70px; background:#999; color:#fff; text-transform:uppercase; }
#idSectionTitleLeft>.divBox>.divBox2>.divBoxContent  { z-index:81; width:460px; padding:0; }
#idSectionTitleLeft .divBoxContent .divBoxTitle      { background:#ccc; text-transform:uppercase; color:inherit; }
#idSectionTitleLeft .divBoxContent .divBoxContent    { background:#ddd; padding:10px; text-transform:inherit; color:inherit }
#idSectionTitleCenter           { /* width */  height:50px; display:table-cell; vertical-align:middle; text-align:center; font-size:250%; text-transform:uppercase; font-weight:bold; }
#idSectionTitleRight            { width:160px !important; height:50px; display:table-cell; vertical-align:middle; padding-right:25px; }
#idSectionTitleRight>.divBox                         { width:100%; padding:5px; }
#idSectionTitleRight>.divBox>.divBox2                { float:right; width:70px; border:none; box-shadow:none; }
#idSectionTitleRight>.divBox>.divBox2>.divBoxTitle   { width:70px; }
#idSectionTitleRight .divBoxTitle                    { background:#666; color:#fff; }
#idSectionTitleRight .divBoxTitle                    { cursor:pointer; height:30px; padding-top:10px; text-align:center; font-size:82%; }

/* Menu */
#idSectionMenu                  { text-align:center; }
#idSectionMenusub               { text-align:center; }

/* Main */
#idSectionMessage               { text-align:center; font-weight:bold; }

#idSectionPageheader            { padding:10px 0; text-align:center; font-size:220%; font-weight:bold; }
#idSectionPageintro             { padding:10px 0; text-align:center; font-size:150%; }
#idSectionPagecontent           { height:100%; vertical-align:top; }
#idSectionPagecontentDefault    { padding:5px 20px; }
#idSectionPagecontentLeft       { z-index:89; position:fixed; left:0; top:40%; }
#idSectionPagecontentCenter     { z-index:89; position:fixed; bottom:0; left:0; width:100%; }
#idSectionPagecontentRight      { z-index:89; position:fixed; right:0; top:40%; }
#idSectionPagefooter            { padding:10px 0; text-align:center; font-size:220%; font-weight:bold; }

/* Footer */
#idSectionBottom                { min-height:50px; }
#idSectionBottomLeft            { width:33%; height:50px; display:table-cell; vertical-align:bottom; padding-bottom:10px; padding-left:20px; text-align:left; font-size:120%; }
#idSectionBottomCenter          { width:33%; height:50px; display:table-cell; vertical-align:bottom; padding-bottom:10px; text-align:center; font-size:120%; }
#idSectionBottomRight           { width:33%; height:50px; display:table-cell; vertical-align:bottom; padding-bottom:10px; padding-right:20px; text-align:right; font-size:120%; }

#idSectionBottom a              { padding:0 3px; color:inherit; text-decoration:none; }

#idSectionEnd                   { color:#666; }
#idSectionEnd a                 { color:#666; }
#idSectionEndLock               { }
.divSectionEndLockOff           { display:none; visibility:hidden; }
.divSectionEndLockOn            { position:fixed; z-index:99; top:0; left:0; width:100%; height:1000000%; display:block; visibility:visible; opacity:0.5; background-color:#ccc; text-align:center; padding-top:20%; }

/* JOB ----------------------- */
.divJobMessage                  { padding:10px; }
.cssJobMessageError             { background-color:#c44; color:#fff; text-align:center; }
.cssJobMessageWarning           { background-color:#c84; text-align:center; }
.cssJobMessageNotice            { background-color:#cc4; text-align:center; }
.cssJobMessageSuccess           { background-color:#8c4; text-align:center; }
.cssJobMessageComment           { background-color:#ccc; text-align:center; }
.cssJobMessageOutput            { background-color:#cc4; text-align:center; } /* old: #999 */
.cssJobMessageOutput .divBoxContent { overflow-x:auto; }
.divJobMessage>.divBox          { float:none; width:100%; background:inherit; padding:0; font-size:inherit; }
.divJobMessage>.divBox>.divBox2 { background:transparent; border:none; box-shadow:none; }
.divJobMessage .divBoxTitle     { background:inherit; font-size:inherit; }
.divJobMessage .divBoxContent   { background:#fff; text-align:left; font-weight:normal; }

.divJobDebug                    { margin:0 auto; width:960px; overflow:auto; border:2px solid #444; background:#ddd; padding:20px; }

/* PAGE & BOX ---------------- */
.divPageSite .divBoxTitle       { background:#666; text-transform:uppercase; color:#fff; }
.divPageSite .divBoxContent     { min-height:150px; }
.divPageSiteinstanceTextlong    { padding:10px 0; text-align:center; font-size:150%; font-weight:bold; }

/* BOX ----------------------- */
.divBox                         { float:left; width:455px; padding:10px; }
.divBox2                        { width:100%; overflow:hidden; }
.divBoxTitle                    { position:relative; width:100%; overflow:hidden; padding:5px; background:#ccc; color:#333; white-space:nowrap; vertical-align:bottom; text-align:center; font-size:150%; font-weight:bold; }
.divBoxTitle a                  { width:100%; display:block; color:inherit }
.divBoxTitle img                { width:20px; height:20px; vertical-align:middle; }
.divBoxContent                  { width:100%; overflow-x:hidden; overflow-y:visible; border:1px solid #ccc; border-top:none; background:#fff; padding:10px; }
.divBoxContentHeader            { margin:5px; margin-top:0; text-align:center; font-weight:bold; font-size:120%; }
.divBoxContentFooter            { clear:both; margin:0 5px; text-align:center; font-style:italic; font-size:120%; }
.hoverBoxTitle:hover            { opacity:0.7; background:#cfcfcf !important; }
[data-collapse='persist']       { position:relative; }
[data-collapse='persist'] [aria-expanded="false"]:after { position:absolute; top:5px; left:5px; color:#333; content:'\25BC'; }

.cssBoxWidth1                   { width:185px; }
.cssBoxWidth2                   { width:310px; }
.cssBoxWidth3                   { width:435px; } /* 455px ? */
.cssBoxWidth4                   { width:560px; }
.cssBoxWidth5                   { width:685px; }
.cssBoxWidth6                   { width:820px; }
.cssBoxWidth100                 { width:100%; }

.cssBoxHeight1                  { height:150px; overflow-y:auto; }
.cssBoxHeight2                  { height:275px; overflow-y:auto; }
.cssBoxHeight3                  { height:400px; overflow-y:auto; }
.cssBoxHeight4                  { height:525px; overflow-y:auto; }
.cssBoxHeight5                  { height:650px; overflow-y:auto; }
.cssBoxHeight6                  { height:775px; overflow-y:auto; }
.cssBoxHeight100                { height:100%; }

.cssBoxHeight1h                 { height:170px; overflow-y:auto; }
.cssBoxHeight2h                 { height:295px; overflow-y:auto; }
.cssBoxHeight3h                 { height:420px; overflow-y:auto; }
.cssBoxHeight4h                 { height:545px; overflow-y:auto; }
.cssBoxHeight5h                 { height:670px; overflow-y:auto; }
.cssBoxHeight6h                 { height:795px; overflow-y:auto; }

.cssBoxHeight1hf                { height:190px; overflow-y:auto; }
.cssBoxHeight2hf                { height:315px; overflow-y:auto; }
.cssBoxHeight3hf                { height:440px; overflow-y:auto; }
.cssBoxHeight4hf                { height:565px; overflow-y:auto; }
.cssBoxHeight5hf                { height:690px; overflow-y:auto; }
.cssBoxHeight6hf                { height:8155px; overflow-y:auto; }

.cssBoxShadow                   { } /* no shadow */

.cssBoxPopup                    { display:none; z-index:80; position:absolute; }
.cssBoxPopupContent             { border:2px solid #666; background:#eee; padding:0; }
.cssBoxPopupWidth1              { width:165px; }

/* WIDGET -------------------- */
.divWidgetDivBox                { overflow:auto; margin:0; border:1px solid #ccc; padding:10px; }

.divWidgetGoogleTranslate div   { border:none; background:transparent; }
.divWidgetGoogleTranslate a span{ border:none !important; font-size:82%; color:#666; }
.divWidgetGoogleTranslate img   { display:none; }

.divWidgetIcon                  { float:left; margin:5px; text-align:center; }
.divWidgetIcon img              { vertical-align:top; }
.divWidgetIconTable             { overflow:hidden; table-layout:fixed; }
.divWidgetIconTableTr           { }
.divWidgetIconTableTd           { position:relative; height:100%; vertical-align:middle; text-align:center; }

.divWidgetIconTile              { float:left; width:250px; height:125px; overflow:hidden; }
.divWidgetIconTileText          { width:124px; height:115px; overflow-y:auto; overflow-x:hidden; margin:5px 0; padding-top:5px; line-height:1.4; }
.divWidgetIconTileText          { border:1px solid #ddd; border-left: none; }
.cssWidgetIconText              { margin-left:5px; border:1px solid #999; padding:0 1px; color:#333; background:#ccc; font-size:82%; }
.hoverWidgetIcon                { cursor:pointer; }
.hoverWidgetIcon:hover          { opacity:0.7; }

.divWidgetIframe                { }
.divWidgetIframeTitle           { margin-top:5px; text-align:center; }
.divWidgetIframeContent         { width:100%; height:100%; min-height:600px; overflow:auto; border:2px solid #333; background:#fff; }
.divWidgetIframeSrcdoc          { width:100%; height:100%; min-height:600px; overflow:auto; padding:10px; border:2px solid #333; background:#fff; }

.cssWidgetImageZoom             { opacity:0.7; -moz-transition:all 0.5s linear; -webkit-transition:all 0.5s linear; -ms-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear; }
.cssWidgetImageZoom:hover       { z-index:50; position:fixed; top:50%; left:50%; border:2px solid #666 !important; background-color:#fff; opacity:1.0; -moz-transform:scale(8); -webkit-transform:scale(8); -o-transform:scale(8); -ms-transform:scale(8); transform:scale(8); }

.divWidgetLink                  { float:left; cursor:pointer; margin:5px; width:115px; height:40px; background:#ccc; overflow:hidden; text-overflow:ellipsis; border:1px solid #999; padding:5px; text-align:center; }
.divWidgetLink:hover            { opacity:0.7; }

.divWidgetSelect                { width:70px; overflow:hidden; }
.divWidgetSelect select         { width:70px; display:inline-block; }

.divWidgetTicket                { overflow:auto; border:2px solid #333; background:#ddd; padding:5px; }

.divWidgetWindowModal           { display:none; z-index:90; position:fixed; width:100%; height:100%; top:0; left:0; opacity:0.85; background:#000; }
.divWidgetWindowModal:target    { display:block; }
.divWidgetWindowModalTitle      { height:35px; text-align:center; color:#fff; font-size:150%; font-weight:bold; }
.divWidgetWindowModalBody       { }

/* CSS ----------------------- */
.cssBackgroundDF                { background:#ddd; }
.cssBackgroundToggle            { background:#eee; }
.cssBackground999               { background:#999; }
.cssBackground666               { background:#666; }
.cssBackground666Gradient       { background:#666; background:linear-gradient(#666,#ccc); }
.cssBackgroundRed               { background:#c00; }
.cssBackgroundOrange            { background:#c60; }
.cssBackgroundYellow            { background:#c90; }
.cssBackgroundGreen             { background:#090; }
.cssBorderRadius                { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }
.cssBorder666                   { border: 2px solid #666; }
.cssButtonYellow                { display:inline-block; width:200px; background:#cc4; padding:5px; text-decoration:none; color:#fff !important; }
.cssButtonYellow:after          { display:none; }
.cssButtonYellow:hover          { background:#999; color:#fff; }
.cssColorRed                    { color:#c00; }
.cssColorOrange                 { color:#c60; }
.cssColorYellow                 { color:#cc0; }
.cssColorGreen                  { color:#090; }
.cssColorWhite                  { color:#fff; }
.cssDisplayNone                 { display:none; }
.cssDisplayTable                { display:table; }
.cssFilterGrayscale             { filter:gray; -webkit-filter:grayscale(100%); }
.cssFloatRight                  { float:right; }
.cssFontBold                    { font-weight:bold; }
.cssFontSizeXXL                 { font-size:200%; } /* 26.0px */
.cssFontSizeXL                  { font-size:150%; } /* 19.5px */
.cssFontSizeL                   { font-size:120%; } /* 15.6px */
.cssFontSizeM                   { font-size:100%; } /* 13.0px */
.cssFontSizeS                   { font-size:82%; }  /* 10.6px */
.cssHeading00                   { text-align:center; font-size:250%; font-weight:bold; }
.cssHeading01                   { text-align:center; font-size:220%; font-weight:bold; }
.cssHeading02                   { text-align:center; font-size:180%; font-weight:bold; }
.cssHeading03                   { text-align:center; font-size:150%; font-weight:bold; }
.cssLineTop                     { border-top:2px solid #ccc; }
.cssLineBottom                  { border-bottom:2px solid #ccc; }
.cssListTitle                   { font-weight:bold; }
.cssNoafter:after               { display:none; }
.cssOverflowHidden              { overflow:hidden; }
.cssOverflowVisible             { overflow:visible; }
.cssPaddingLeft50               { padding-left:50px; }
.cssTableLayoutFixed            { table-layout:fixed; }
.cssTextCenter                  { text-align:center; }
.cssTextEllipsis                { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.cssTextUpper                   { text-transform: uppercase; }
.cssTextSmallcaps               { font-variant:small-caps; }
.cssTd                          { height:25px; vertical-align:middle; }
.cssTh                          { height:25px; vertical-align:middle; border-top:2px solid #ccc; border-bottom:2px solid #ccc; font-weight:bold; font-variant:small-caps; }

.cssWidthHeight100              { width:100%; height:100%; }

.cssWidth100                    { width:100%; }

.cssWidth300                    { width:300px; }
.cssWidth415                    { width:415px; }
.cssWidth575                    { width:575px; }

.cssHeight100                   { height:100%; }
.cssHeight600                   { height:600px; }

@media print {
    #idSectionPagecontentLeft   { display:none; }
    #idSectionPagecontentCenter { display:none; }
    #idSectionPagecontentRight  { display:none; }
}