/* colors:
sensile: #F39814

green: #89A70B
gray: #8C9197
blue: #5C9EC8
orange: #E15F14
*/


/******************************************
    base
******************************************/
* { margin: 0; padding: 0; }
body { background-color: #545454; background-image: url(images/pattern.jpg); width: 100%;
       margin: 0 auto; padding: 0; font-family: Arial; font-size: 11pt;
       overflow-x: hidden; overflow-y: scroll; }
html, body { height: 100%; }

input, select, textarea, button { margin: 0; padding: 2px; font-family: Arial; border: 1px solid #ABADB3!important; }
input[type=text], input[type=button], button { padding: 3px; }
input[type=text], select, textarea { box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1); }
select { cursor: pointer; }
input[readonly="readonly"] { background-color: #f3f3f3; }
input[type=radio] { border: none!important; padding: 0; }

span.warning { color: #ee5f00; }

.asterisk { color: #ee5f00; font-style: italic; }

/* validation */
.validate-invalid { background-color: #fc3600; }
.validate-int { }

/******************************************
    jquery-overrides
******************************************/
.ui-tooltip { padding: 2px!important; background-image:none!important; background-color: #444!important; border-color: #444!important; max-width: 600px!important; word-break: break-word; }
.ui-tooltip-content { color: #FFF!important; }
.ui-tooltip-content pre { font-family: Consolas, "Lucida Console", "Courier New", Courier, monospace; }
.button-small {height:22px; width: 22px;}
.button-small>span.ui-button-text {padding: 0!important; }
.button-flat {height:22px;}
.button-flat>span.ui-button-text { padding: 0 4px!important; }

div.ui-dialog.full-button-buttonset div.ui-dialog-buttonset { width: 100%; }
div.ui-dialog.full-button-buttonset div.ui-dialog-buttonset > button { float: right; margin-left: 0.5em; }
div.ui-dialog.full-button-buttonset div.ui-dialog-buttonset > button.float-left { float: left; }

a.introjs-donebutton { color: #000!important; font-weight: bold!important; }

/* misc */
button.flat .ui-button-text { font-size: 12px; line-height: normal; padding: 1px; }
button.flat > span.ui-button-icon-primary { left: 2px; }
button.flat > span.ui-button-icon-secondary { right: 2px; }
button.flat.ui-button-text-icon-primary .ui-button-text { margin: 0 4px 0 17px; }
button.flat.ui-button-text-icon-secondary .ui-button-text { margin: 0 17px 0 4px; }

button.inline-button { font-size: 1em; padding: 0 4px; min-width: 90px; }
button.inline-button .ui-button-text { line-height: normal; padding: 3px; }
button.inline-button.ui-button-text-only .ui-button-text { display: inline; }
button.inline-button.ui-button-icon-only .ui-button-text { display: inline-block; }
button.inline-button.ui-button-text-icon-primary .ui-button-text { margin-left: 16px; }
button.inline-button.ui-button-text-icon-secondary .ui-button-text { margin-right: 16px; }
textarea.default-notes-size { width: 400px; height: 150px; }

.field-small { width: 24px; }
.field-medium { width: 68px; }
.field-medium-large { width: 128px; }
.field-large { width: 240px; }
div.field-row { line-height: 28px; }


/******************************************
    Basic Helpers
******************************************/
.r {text-align: right;}
.c {text-align: center;}
.l {text-align: left;}
.hidden {display:none;}
.error {color: #C00; font-weight:bold;}
.custom-ui-state-success { border: 1px solid #5bd009; background-color: #bffe93; color: #006B02; }
.clear { clear: both; }
.quick-jump, .pointer { cursor: pointer; }
.nowrap { white-space: nowrap; }

ul { list-style: none; padding: 0; margin: 0; }
ul.link-list { list-style: none; }
ul.todo-list { list-style: circle; padding: 6px; }
ul.todo-list > li { margin-left: 20px; color: #3AA5C7 }
ul.todo-list > li:first-child { list-style: none; font-weight: bold; border-bottom: solid 1px #3AA5C7; margin: 0; }
ul.scrollable { overflow-x: hidden; overflow-y: auto; }
ul.scrollable > li { white-space: nowrap; }
ul.clickable > li { cursor: pointer; }
ul.clickable > li:hover { color: #ef8700; }
ul.button-list > li { padding: 1px; }

span.bold { font-weight: bold; }

div.spacer { height: 10px; clear: both; }

/******************************************
    sortable tables
******************************************/
table.sortable > thead > tr > th.sortable { cursor: pointer; }
table.sortable > thead > tr > th > i.fa-sort-alpha-asc,
table.sortable > thead > tr > th > i.fa-sort-alpha-desc { color: #ef8700; }
table.sortable > thead > tr > th > i.fa-filter { color: #ef8700; }


/******************************************
    Form controls
******************************************/
input[type=text].date { width: 70px; }
input[type=text].format-date  { width: 70px; text-align: right; }
input[type=text].format-number { width: 68px; text-align: right; }
input[type=text].format-time { width: 52px; }
input[type=text].format-time-hm { width: 34px; }


/******************************************
    Help Dialog
******************************************/
.dialog { display: none; }
.help-dlg li { cursor: pointer; list-style: none; font-size: 1.2em; }
.help-dlg .ib { display:inline-block!important; }
.help-dlg .name { min-width: 150px; display: inline-block; }
.help-dlg .desc { white-space: nowrap; }

/******************************************
    User Settings Dialog
******************************************/
#UserSettingsDlg table  {border-collapse:collapse;}
#UserSettingsDlg tr     {border-bottom: 1px solid #DDD;}
#UserSettingsDlg td     {white-space: nowrap; padding:4px;}
#UserSettingsDlg_EMail,
#UserSettingsDlg_Language {width: 200px;}

/******************************************
    Login
******************************************/
.login-area { background-color: #F3F3F3; margin: 150px auto auto; max-width: 400px; padding: 3px; border: 1px solid #AAA; }
@media (max-height: 480px) { .login-area { margin-top: 64px; } }
@media (max-height: 320px) { .login-area { margin-top: 8px; } }
.login-area-header { font-size: 1.5em; padding: 5px 0 3px 8px!important; margin-bottom: 5px; }
.login-area-info { padding: 5px; margin: 10px; }
.login-area-pwdlink { padding: 5px; text-align: right; }
.login-area-pwdlink a { color: #3AA5C7; text-decoration: none; }
.login-area-buttons { padding: 5px; text-align:center; }
.login-area-inputs>div { padding: 4px 8px; }
.login-area-inputs label { width: 120px; display: inline-block; }
.login-area select { padding: 5px; border:1px solid #AAA; }
.login-area input { padding: 5px; border:1px solid #AAA; }
#login-version-selector { width: 96px; }
#login-input-user, #login-input-pwd { width: 228px; }
.browser-warning { width: 400px; margin: 50px auto; padding: 5px; font-size: 1.3em; display: none; }

/* password resset */
#login-pwd-dlg td { padding: 3px; }
#login-pwd-dlg input { padding: 5px; border:1px solid #AAA; width: 200px; }


/******************************************
    Header
******************************************/
#PreHeader { height: 3px; width: 100%; }
#Header { background-color: #fff; height: 64px; width: 100%; }
#CompanyLogo { float: left; border: 0; margin-left: 16px; display: none; }
#SystemLogo { float: right; border: 0; margin-right: 16px; display: none; }

/******************************************
    Link Menu
******************************************/
.menu { z-index: 2; display: none; background-color: #fff; margin: 0; padding: 6px 0; position: absolute; border: 1px solid #aaa; list-style: none; font-size: 12px; white-space: nowrap; box-shadow: #aaa 2px 4px 8px; border-radius: 4px; }
.menu li { padding: 4px 10px; }
.menu > li:hover { cursor: pointer; background-color: #ffa835; background: linear-gradient(to bottom, #ffa835 35%,#ff8600 100%); }
.menu > li.divider { height: 1px; margin: 2px 0; padding: 0; background-color: #ccc; cursor: default!important; }
.menu > li.divider:hover { background-color: #ccc !important; background: none; }

/******************************************
    Top Bar
******************************************/
#TopBar { width: 100%; padding: 5px 10px 3px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#Search                 { height: 34px; float: left; display: inline-block; position: relative; margin: 0 10px 0 0; padding: 2px 0 0 0; width: 240px; }
#SearchText             {height:17px;width:213px;border-radius:5px;border:1px solid rgb(217,217,217);background:url(images/topbar_bgsearch.jpg) no-repeat white;margin:0; padding:4px 0 4px 25px;}
#SearchReset            {border:0;cursor:pointer;height:13px;width:13px;margin:0;padding:0;position:absolute;left:218px;top:9px;background:url(images/topbar_reset.png);border-radius:20px;}

#ControlButtons             { height: 34px; float: right; position: relative; }
#ControlButtons a           { display: inline-block; padding: 0; width: 30px; height: 31px; border: none; border-radius: 5px; cursor: pointer; }
.control-btn                { display: inline-block; padding: 0; width: 30px; height: 31px; border: none; border-radius: 5px; cursor: pointer; }
.control-btn.menu-btn       { display: inline-block; padding: 0; width: 40px; height: 31px; border: none; border-radius: 5px; cursor: pointer; }
.control-btn:hover          { background-position-y: -31px!important; }
.control-btn.pending        { background-position-y: -31px!important; }
.control-btn:active         { background-position-y: -62px!important; }
#BtnRefresh                 { background: url(images/btn_icone.png) no-repeat; background-position-x:  -60px; }
#BtnMap                     { background: url(images/btn_icone.png) no-repeat; background-position-x:  -90px; }
#BtnCockpitCharts           { background: url(images/btn_icone.png) no-repeat; background-position-x: -390px; }
#BtnOrder                   { background: url(images/btn_icone.png) no-repeat; background-position-x: -450px; }
#BtnMaintenance             { background: url(images/btn_icone.png) no-repeat; background-position-x: -480px; }
#BtnExport                  { background: url(images/btn_icone.png) no-repeat; background-position-x: -520px; }
#BtnLinkMenu                { background: url(images/btn_icone.png) no-repeat; background-position-x: -560px; }
#BtnSettings                { background: url(images/btn_icone.png) no-repeat; background-position-x: -300px; }
#BtnHelp                    { background: url(images/btn_icone.png) no-repeat; background-position-x: -360px; }
#BtnDisconnect              { background: url(images/btn_icone.png) no-repeat; background-position-x: -270px; }
#BtnStatistics              { background: url(images/btn_icone.png) no-repeat; background-position-x: -600px; }
#BtnMaintenanceTaskDirect   { background: url(images/btn_icone.png) no-repeat; background-position-x: -480px; }

#TablePagingContainer { height: 34px; margin-left: 240px; margin-right: 280px; }
#TablePaging { width: 250px; margin: 0 auto; }
#TablePaging a          {display:inline-block;padding:0;width:30px;height:31px;border:none; border-radius:5px; cursor: pointer;}
#PagingInfo { display: inline-block; width: 110px; text-align: center; white-space: nowrap; color: #FFF; vertical-align: top; line-height: 32px; }
#DirectRequestTitle     {cursor: pointer; white-space:nowrap; color: #FFF; font-weight:bold; vertical-align: top; line-height: 31px;}
#DirectRequestImage     {display:none; vertical-align: top; line-height: 31px; height: 32px; width: 32px; margin-right: 20px;}
#DirectRequestState     {display:none;}
#PagingFirst            {background:url(images/btn_icone.png) no-repeat -150px 0;}
#PagingFirst:hover      {background-position:-150px -31px;}
#PagingFirst:active     {background-position:-150px bottom;}
#PagingPrevious         {background:url(images/btn_icone.png) no-repeat -180px 0;}
#PagingPrevious:hover   {background-position:-180px -31px;}
#PagingPrevious:active  {background-position:-180px bottom;}
#PagingNext             {background:url(images/btn_icone.png) no-repeat -210px 0;}
#PagingNext:hover       {background-position:-210px -31px;}
#PagingNext:active      {background-position:-210px bottom;}
#PagingLast             {background:url(images/btn_icone.png) no-repeat -240px 0;}
#PagingLast:hover       {background-position:-240px -31px;}
#PagingLast:active      {background-position:-240px bottom;}

#quick-export { margin: 30px; }


/******************************************
    Content
******************************************/
#Content { margin-left: 259px; background-color: #ffffff; margin-right: 10px; border-radius: 5px; }
#ContentSpacer { height: 10px; width: 100%; }
/******************************************
    Filters
******************************************/
.FilterItem                    {margin:0 9px 10px 9px;padding:0;border-radius:5px;background-color:rgb(242,242,242);position:relative;}
.FilterItem .FilterItemValue   {color:orange;font-size:12px;font-weight:bold;padding:11px 0 9px 15px}
.FilterItem .FilterItemDelete  {border:0;cursor:pointer;height:13px;width:13px;margin:0;padding:0;position:absolute;left:218px;top:10px;background:url(images/topbar_reset.png);border-radius:20px;}


/******************************************
    SideBar
******************************************/
#SideBar { width: 259px; float: left; }
#ListViews { font-size: 12px; font-weight: bold; margin: 0 10px 0 10px; }

.DataListGroup { margin: 0 0 4px 0; padding: 10px 10px 0 10px; background-color: rgb(242,242,242); border-radius: 5px; background-image: url(images/sidebar_bgtitle.jpg); background-repeat: repeat-x; }
.DataListGroupTitle { margin: 0; padding: 0; cursor: pointer; }
.GroupIcon { margin: -5px 0 0 -5px; padding: 0; border: 0; width: 28px; height: 28px; }
.GroupTitle { margin: 2px 0 0 5px; position: absolute; text-shadow: 0 1px 0 #fff; }
.GroupExpander { cursor: pointer; float: right; }
.GroupAdder { cursor: pointer; float: right; }
.Disabled { opacity: 0.2; }
.ExpanderContent { margin-top: 4px; }
.ExpanderContent ul { list-style: none; padding: 0; margin: 0; }
.ExpanderContent ul li { line-height: 1.7em; overflow: hidden; }
.ExpanderContent ul li input[type="radio"] { float: left; margin: 3px 3px 0 0; }
div.ExpanderContent > ul > li > span.trash { width: 12px; margin: 0; float: right; cursor: pointer; height: 22px; }
div.ExpanderContent > ul > li > span.trash > img { border: 0; padding: 3px 0 0 0; }
div.ExpanderContent > ul > li > span.count { float: right; margin-right: 4px; font-weight: normal; }



/******************************************
    MiniSideBar
******************************************/
#MiniSideBar { position: absolute; left: 0; width: 59px; float: left; background-image: url(images/pattern.jpg); display: none; padding: 0 }
#MiniSideBar .MiniButton { display: inline-block; width: 38px; height: 35px; margin: 0 11px 9px 10px; }
#MiniFilter { display: inline-block; width: 38px; height: 35px; margin: 0 11px 9px 10px; background: url(images/minisidebar.png) 0 0; }
#MiniListViews { background: url(images/minisidebar.png) 0 -72px; cursor: pointer; }
#MiniDiagrams { background: url(images/minisidebar.png) 0 -108px; }


/******************************************
    View
******************************************/
#View { display: block; background: white; border-radius: 5px; }

#ToggleSideBarDiv { display: block; height: 17px; border-radius: 5px; margin-bottom: 10px; }
#ToggleSideBarBtn   {cursor:pointer;margin:0;padding:0;}

#Map { }
#MapContent { }

/*
#MapTitle           {border:1px solid rgb(216,216,216);width:100%;height:29px;background-image:url(images/list_bghead.png);-moz-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-top-right-radius:5px;border-top-right-radius:5px;}
#MapTitle span      {float: left; margin: 8px 0 0 8px; font-weight: bold; font-size: 14px}
*/
/*
#MapHideBtn,#MapMaximizeBtn {margin: 8px 8px 0 0; float: right; cursor:pointer; display:inline-block; width:13px; height:13px; border-radius:20px; border:0px;}
#MapHideBtn         {background:url(images/topbar_reset.png) no-repeat;}
#MapMaximizeBtn     {background:url(images/maximize.png) no-repeat;}
*/

.view { padding: 0 10px; display: none; border-radius: 5px; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.view.active { margin-bottom: 10px; }
.view.active.maximized { margin-bottom: 0!important; }
.view-title { border: 1px solid #d8d8d8; height: 29px; background-image: url(images/list_bghead.png);  border-top-left-radius: 5px; border-top-right-radius: 5px; }
.view-title span.view-title-caption { min-width: 80px; float: left; margin: 8px 20px 0 8px; font-weight: bold; font-size: 14px; color: #444; text-shadow: 0 1px 0 #fff; }
.view-title-btn { margin: 8px 8px 0 0; float: right; cursor:pointer; display:inline-block; width:13px; height:13px; border-radius:20px; border:0;}
.view-title-tab { font-size: 12px; text-shadow: 0 1px 0 #fff; padding: 6px 16px 2px 16px; text-align:center; cursor: pointer; color:#444; background: #e6e6e6 url(custom-theme/images/ui-bg_highlight-hard_75_e6e6e6_1x100.png) 50% 50% repeat-x; float:left; height: 18px; margin: 2px 2px 0 2px; border-top-right-radius:4px; border-top-left-radius:4px;border-left: 1px solid #aaa;border-top: 1px solid #aaa;border-right: 1px solid #aaa;}
.view-title-tab.active { font-size: 12px; text-shadow: 0 1px 0 #fff; background: linear-gradient(to bottom, #ddd 0, #f6f6f6 100%); border-bottom: 1px solid #f6f6f6; }
.view-title-tab.disabled { color: #999; cursor: default; }
.view-title-tab i { color: #EF8700 }

.view-content { background-color:#f6f6f6; border-color: #d8d8d8; border-style: solid; border-width: 0 1px 1px 1px; height: 400px; overflow-y: auto; overflow-x: hidden; }

.icon-hide {background:url(images/topbar_reset.png) no-repeat;}
.icon-max {background:url(images/maximize.png) no-repeat;}


/* cockpit charts */

.progress-bar { height: 20px; width: 240px; vertical-align: bottom; display:inline-block; position: relative; }
.progress-bar-title { position: absolute; left: 35%; top: 2px; text-shadow: 1px 1px 0 #fff; color: #444; }

.cc-tab-content { display: none; }
.cc-tab-active { display: block; }
.cc-tab-content-controls { padding: 3px; }
.cc-tab-chart { height: 370px; }

/******************************************
    Details
******************************************/
#Details        {font-family: Calibri, Arial; padding-top: 4px;}
#Details table  {width: 100%;}
#Details td     {vertical-align: top; border: 0 !important; padding: 0 4px; }
#Details td div {margin-top: 5px;}
#Details .c1    {width: 1%; font-size: 1.6em; color: #EF8700; }
#Details .c1 a  {color: #EF8700;}
#Details .c2    {width: 49%; }
#Details .c2 a  {color: #EF8700;}
#Details hr     {height: 1px; border: 0; background-color: Gray; margin-bottom: 5px;}
#Details .Title {font-size: 1.6em; color: #444; text-transform:uppercase;}
#Details span   {color: #EF8700; font-size: 1.2em;}
#Details .Label {color: #444; font-size: 1.3em; line-height: 1.5em;}
#GeoLoc         {font-size: 12px;}

#DetailsRow>td      {padding:0!important;}
#DetailsHeaderDiv { border-bottom: 1px solid #ccc; height: 29px; position: relative; display: block; background: #ccc url(custom-theme/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; background: linear-gradient(to bottom, #eee 0,#ddd 100%); }
#DetailsHeaderDiv>div.tab    { text-shadow:0 1px 0 #fff; padding: 6px 16px 2px 16px; text-align:center; cursor: pointer; color:#212121; background: #e6e6e6 url(custom-theme/images/ui-bg_highlight-hard_75_e6e6e6_1x100.png) 50% 50% repeat-x; float:left; height: 18px; margin: 2px 2px 0 2px; border-top-right-radius:4px; border-top-left-radius:4px;border-left: 1px solid #aaa;border-top: 1px solid #aaa;border-right: 1px solid #aaa;}
#DetailsHeaderDiv>div.active { background: #e6e6e6 url(custom-theme/images/ui-bg_inset-hard_65_e6e6e6_1x100.png) 50% 50% repeat-x;border-bottom: 1px solid #F1F1F1;}
#DetailsHideBtn     {float: right; margin: 8px; cursor:pointer; display:inline-block; width:13px; height:13px; border-radius:20px; border:0;background:url(images/topbar_reset.png) no-repeat;}
#DetailsHeaderDiv > div.debug { margin-left: 8px; line-height: 29px; float:left; }
#DetailsHeaderDiv > div.debug > span.debug-copy {  color: #444; text-shadow: 1px 1px 1px #fff; cursor: pointer; }
#DetailsHeaderDiv > div.debug > a.debug-link { color: #3AA5C7; text-shadow: 1px 1px 1px #fff; cursor: pointer; text-decoration: none; }
#DetailsHeaderDiv > div.debug > a.debug-link-justcopy { color: #3AA5C7; text-shadow: 1px 1px 1px #fff; cursor: pointer; text-decoration: none; }


#Chart              {min-height: 590px; background-color: #FFF;}
#DetailContainer    {min-height: 200px;}

#thumbnail-container { position: relative; width: 150px; height: 150px; background-color: #FFF; border: 1px solid rgb(216,216,216); border-radius: 5px; box-shadow: 0 0 10px #ccc; }
#thumbnail-img { padding: 5px 0 0 5px; max-width: 140px; max-height: 140px; cursor: pointer; }
#thumbnail-label { text-align: center; color: #f2f2f2!important; background-color: #474747; border-radius: 8px; height: 28px; width: 28px; position: absolute; bottom: 8px; right: 8px; }

#image-gallery { position: absolute; top: 24px; left: 24px; right:24px; z-index: 1002; background-color: #eee; border: 4px solid #333; border-radius: 8px; color: #444; text-align: center; font-family: Calibri, Arial; font-weight: bold }
#image-gallery div.thumbnails { overflow: auto; white-space: nowrap; padding: 4px; border-radius: 8px; }
#image-gallery div.actions { margin-bottom: 8px; background-color: #333; }
#image-gallery div.actions .btn { cursor: pointer; background-color: #333;  display: inline-block; color: #f4f4f4; font-size: 28px; text-align: center; padding: 8px; margin-right: 8px; text-decoration: none; }
#image-gallery div.actions .btn:hover { color: #ef8700; }
#image-gallery div.actions .btn.fr { float: right; }
#image-gallery div.thumbnails img { cursor: pointer; display: inline-block; background-color: #333; border-radius: 4px; padding: 4px; margin-right: 4px; }
#image-gallery div.thumbnails img:first-child { background-color: #15ff00!important; } 
#image-gallery div.thumbnails img.active { background-color: #ef8700; }
#image-gallery div.thumbnails img:hover { background-color: #3AA5C7; }
#image-gallery-overlay { width: 100%; height: 100%; z-index: 1001; }
#image-gallery input[type=file] { color: #f4f4f4; vertical-align: text-bottom; }
#image-gallery div.upload-image-file-size-warning { display: inline-block; }
#image-gallery-trackup-link { margin-bottom: 8px; font-size: 1.3em; }
#image-gallery-trackup-link a { color: #3AA5C7; text-shadow: 1px 1px 1px #fff; cursor: pointer; text-decoration: none; }


a.edit-details { margin-top: -10px; height: 25px; width: 25px; display: inline-block; background: url(images/DetailButtons.png) no-repeat -100px 0; }
a.edit-details:hover      {background-position: -100px -25px;}
a.edit-details:active     {background-position: -100px -50px;}

#FindOnMap              {height:25px; width:25px; display:inline-block;background:url(images/DetailButtons.png) no-repeat 0 0;}
#FindOnMap:hover        {background-position: 0 -25px;}
#FindOnMap:active       {background-position: 0 -50px;}
#ExportPDF              {height:25px; width:25px; display:inline-block;background:url(images/DetailButtons.png) no-repeat -25px 0;}
#ExportPDF:hover        {background-position: -25px -25px;}
#ExportPDF:active       {background-position: -25px -50px;}
#ExportData             {height:25px; width:25px; display:inline-block;background:url(images/DetailButtons.png) no-repeat -50px 0;}
#ExportData:hover       {background-position: -50px -25px;}
#ExportData:active      {background-position: -50px -50px;}
#ChangeImage          {height:25px; width:25px; display:inline-block;background:url(images/DetailButtons.png) no-repeat -75px 0; float:right;}
#ChangeImage:hover    {background-position: -75px -25px;}
#ChangeImage:active   {background-position: -75px -50px;}

#Details span.ContactLink       {text-decoration: underline; font-size: 14px; cursor: pointer;}
#Details a.ContactMail          {vertical-align: text-top;margin-top: -5px; height:25px; width:25px; display:inline-block;background:url(images/DetailButtons.png) no-repeat -125px 0;}
#Details a.ContactMail:hover    {background-position: -125px -25px;}
#Details a.ContactMail:active   {background-position: -125px -50px;}


/* TankGroup version */
#InstallationInfo > div { margin: 4px 8px 12px; }
#InstallationInfo > div > span::after { text-align: right; }

table.TankGroupList { font-family: Calibri, Arial; color: #444; font-size: 1.2em; white-space:nowrap; }
table.TankGroupList > thead > tr { background: none!important; border: none!important;}
table.TankGroupList > thead > tr > td { border: none!important; color: #222; font-weight: bold; }
table.TankGroupList > tbody > tr > td { border: none!important; }
table.TankGroupList > tbody > tr > td:first-child { white-space: normal; }
table.TankGroupList > tbody > tr > td.p-bar { padding:0 }
table.TankGroupList > tbody > tr > td.p-bar span { height: 12px; display: inline-block; background-image: url(images/p-bar-bg.png);}
table.TankGroupList > tbody > tr.sub-total { font-weight: bold; border-top: 1px solid #888; color: #EF8700; }

.warning-text { display: inline-block; margin: 16px; padding: 8px; border-radius: 4px; font-size: 16px; color: #cd0a0a; background-color: #fef1ec; border: 1px solid #cd0a0a; box-shadow: #444 2px 2px 6px; }

/******************************************
    Admin details (tank)
******************************************/
div.details { min-height: 200px; font-family: Calibri, Arial; color: #444; font-size: 14px; }

div.details > div.info-group { float: left; padding: 8px; white-space: normal; }
div.details > div.info-group > div.title { border-bottom: solid 1px #888; font-weight: bold; cursor: text; }
div.details > div.info-group > div { cursor: pointer; white-space: nowrap; }
div.details > div.info-group > div:hover { color: #EF8700; }
div.details > div.info-group > div.title:hover { color: inherit; }
div.details > div.info-group > div > span:nth-child(1) { display:inline-block; min-width: 80px; }
div.details > div.info-group > div > a { text-decoration: none; color:inherit; }
div.details > div.info-group > div > a > span:nth-child(1) { display:inline-block; min-width: 80px; }

div.details > div.collapsible-group { margin-bottom: 8px; }
div.details > div.collapsible-group > div.title { cursor: pointer; padding: 2px 4px; font-weight: bold; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,0.8); border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #E8E8E8; background: linear-gradient(to bottom, #f6f6f6 0, #e0e0e0 100%); }
div.details > div.collapsible-group.collapsed > div.title { background: linear-gradient(to bottom, #ffffff 0, #f0f0f0 100%); }
div.details > div.collapsible-group.collapsed > div.content { display: none; }
div.details > div.collapsible-group > div.title > span.ui-icon { display: inline-block; vertical-align: bottom; margin-right: 8px; }
div.details > div.collapsible-group > div.content.padded { padding: 8px; }

div.details div.unit-diag-chart { width: 600px; cursor: default!important; }

div.details td.alarm-recipient { white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: 220px; overflow: hidden; }
div.details td.fm-estimation { white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: 120px; overflow: hidden; }

#edit-tank-notes-update { max-width: 600px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
/******************************************
    Tank Location Tab
******************************************/
#location-tab > div { min-height: 300px; float: left; padding:8px; margin:0; }
#location-map { width: 500px; height: 300px; }
#location-data > tbody > tr.active { background-color: rgb(169, 234, 255); }
#location-data > tbody > tr.loc:hover { cursor: pointer; }
#location-data > tbody td { white-space: nowrap; }
#location-data > thead th { white-space: nowrap; }

/******************************************
    Maintenance tab
******************************************/
div.tank-maintenance > form > div.col { float: left; margin: 8px; min-height: 200px;}
div.tank-maintenance > form > div.col:first-child { width: 250px; }
div.tank-maintenance > form > div.col label,
div.tank-maintenance > form > div.col button { display: block; margin: 4px 0; }
div.tank-maintenance > form > div.col input { width: 246px; }
div.tank-maintenance > form > div.col select { width: 254px; }
div.tank-maintenance > form > div.col > div.send-btn { margin-top: 16px; }
div.tank-maintenance textarea#mnt-req-notes { width: 400px; height: 150px; }
div.tank-maintenance a#mnt-req-email-addself { line-height: 20px; text-decoration: none; color: #3AA5C7; text-shadow: 1px 1px 1px #fff; cursor: pointer; }
div.tank-maintenance div.mnt-req-option { margin-top: 8px; }
div.tank-maintenance div.mnt-req-option > div { margin-left: 4px; }
div.tank-maintenance table#maint-history td > a { white-space: nowrap; display: block; }
div.tank-maintenance table#maint-history > tbody > tr > td.mra > div { white-space: nowrap; }
div.tank-maintenance table#maint-history > tbody > tr > td.mra > div > a { float: right; text-decoration: none; color: #3AA5C7; }

/******************************************
    Table
******************************************/
#ListContainer { width: 100%; overflow-x: auto; padding-bottom: 10px; }
#List { margin: 0 10px; padding: 0; background: #ffffff; display: block; }
#ListTable { border-spacing: 0; background-color: #F6F6F6; width: 100%; text-align: left; font-size: 12px; border-radius: 5px; border: 1px solid rgb(216,216,216); }
#ListTable > thead > tr,
#ListTable > thead > tr { background-image: url(images/list_bghead.png); }
#ListTable > thead > tr > th { margin: 0; padding-right: 8px; white-space: nowrap; cursor: pointer; position: relative; border-left: 1px solid rgb(216,216,216); border-bottom: 1px solid rgb(216,216,216); color: #444; text-shadow: 0 1px 0 #fff; }
#ListTable > thead > tr > th > div.dragtable-drag-handle { margin-left: 1px; width: 10px; height: 28px; display: inline-block; float: left; background-image: url(images/list_grip.png); }
#ListTable > thead > tr > th > div.filter-active { margin: 7px 2px 0 0; opacity: 0.6; width: 12px; height: 14px; display: inline-block; float: left; background: url(images/Filter.png) no-repeat 0 0; }
#ListTable > thead > tr > th > div.group-active { margin: 7px 2px 0 0; opacity: 0.6; width: 14px; height: 14px; display: inline-block; float: left; background: url(images/Group.png) no-repeat 0 0; }
#ListTable > thead > tr > th > div.sort-asc { margin: 6px 2px 0 0; opacity: 0.8; width: 13px; height: 18px; display: inline-block; float: left; background: url(images/SortAsc.png) no-repeat 0 0; }
#ListTable > thead > tr > th > div.sort-desc { margin: 6px 2px 0 0; opacity: 0.8; width: 13px; height: 18px; display: inline-block; float: left; background: url(images/SortDesc.png) no-repeat 0 0; }
#ListTable > thead > tr > th > div.sort-asc-sec { margin: 6px 2px 0 0; opacity: 0.3; width: 13px; height: 18px; display: inline-block; float: left; background: url(images/SortAsc.png) no-repeat 0 0; }
#ListTable > thead > tr > th > div.sort-desc-sec { margin: 6px 2px 0 0; opacity: 0.3; width: 13px; height: 18px; display: inline-block; float: left; background: url(images/SortDesc.png) no-repeat 0 0; }
#ListTable > thead > tr > th > div.caption { margin: 7px 5px 0 11px; text-align: left; }
#ListTable > thead > tr > th > div.caption.st { margin-top: 0!important; }
#ListTable > thead > tr > th > div.caption.f { margin-left: 25px; }
#ListTable > thead > tr > th > div.caption.g { margin-left: 27px; }
#ListTable > thead > tr > th > div.caption.s { margin-left: 26px; }
#ListTable > thead > tr > th > div.caption.fg { margin-left: 41px; }
#ListTable > thead > tr > th > div.caption.fs { margin-left: 40px; }
#ListTable > thead > tr > th > div.caption.gs { margin-left: 42px; }
#ListTable > thead > tr > th > div.caption.fgs { margin-left: 67px; }
#ListTable > thead > tr > th.Selection > div { margin-left: 5px; background: url(images/plus.png) no-repeat 4px 4px; width: 16px; height: 16px; }
#ListTable > thead > tr > th:first-child { border-top-left-radius: 5px; border-left: 0; }
#ListTable > thead > tr > th:last-child { border-top-right-radius: 5px; }
#ListTable > tbody > tr { margin: 0; padding: 0; border-bottom: 1px solid #D8D8D8; }
#ListTable > tbody > tr.Row { height: 30px; cursor: pointer; }
#ListTable > tbody > tr.Row:hover { background-color: #EEE; }
#ListTable > tbody > tr.active { font-weight: bold; }
#ListTable > tbody > tr > td { margin: 0; padding: 0 5px 0 5px; border-bottom: 1px solid rgb(216,216,216); }
#ListTable > tbody > tr:last-child > td { border-bottom-style: none!important; }
#ListTable > tbody > tr > td.Selection { white-space: nowrap; }
#ListTable > tbody > tr > td.Selection > a.fav { display: inline-block; background: url(images/etoile.png); width: 14px; height: 14px; background-position: -14px -14px; margin-bottom: -2px; }
#ListTable > tbody > tr > td.Selection > a.fav.fav_on { background-position: -14px 0; }
#ListTable > tbody > tr > td.Selection > a.fav:hover:not(.fav_on) { background-position: -14px -28px; }
#ListTable > tbody > tr > td.Selection > a.sel { display: inline-block; background: url(images/etoile.png); width: 14px; height: 14px; background-position: 0 -14px; margin-bottom: -2px; }
#ListTable > tbody > tr > td.Selection > a.sel.sel_on { background-position: 0 0; }
#ListTable > tbody > tr > td.Selection > a.sel:hover:not(.sel_on) { background-position: 0 -28px; }
#ListTable > tbody > tr.GroupRow { font-weight: bold; background-color: #F0F0F0; height: 30px; }
#ListTable > tbody > tr.GroupRow > td.Toggler { padding-left: 13px; padding-top: 5px; }
#ListTable > tbody > tr.GroupRow > td.Toggler > a { display: inline-block; width: 14px; height: 9px; text-decoration: none; }
#ListTable > tbody > tr.GroupRow > td.Toggler > a.SlideUp { background: url(images/slideUp.png) no-repeat 0 -9px; }
#ListTable > tbody > tr.GroupRow > td.Toggler > a.SlideUp:hover { background-position: 0 0; }
#ListTable > tbody > tr.GroupRow > td.Toggler > a.SlideDown { background: url(images/slideDown.png) no-repeat 0 -9px; }
#ListTable > tbody > tr.GroupRow > td.Toggler > a.SlideDown:hover { background-position: 0 0; }
#ListTable > tbody > tr.Row > td.Key { display: none; }
#ListTable > tbody > tr.Row > td.Type { display: none; }
#ListTable > tbody > tr.Row > td.WUnit { display: none; }
#ListTable > tbody > tr.Row > td.Number,
#ListTable > tbody > tr.Row > td.Unit,
#ListTable > tbody > tr.Row > td.OrderdQuantity,
#ListTable > tbody > tr.Row > td.Autonomy,
#ListTable > tbody > tr.Row > td.Percentage,
#ListTable > tbody > tr.Row > td.ProductTemperature,
#ListTable > tbody > tr.Row > td.PrecomputedUnit { white-space: nowrap; text-align: right; }
#ListTable > tbody > tr.Row > td.OrderdQuantity > span {text-align:left; float:left;}
#ListTable > tbody > tr.Row.ItemInAlarm { color: #C00; }
#ListTable > tbody > tr.Row.ItemInactive { color: #999 !Important; }
#ListTable > tbody > tr.Row > td.Autonomy > img,
#ListTable > tbody > tr.Row > td.Percentage > img { float: left; }
#ListTable > tbody > tr.Row > td.Autonomy > div { margin-left: 26px; width: 32px!important; }
#ListTable > tbody > tr.Row > td.Percentage > div { margin-left: 24px; width: 32px!important; }
/* compact table */
#ListTable > tbody.compact > tr.Row { height: 18px!important; }
#ListTable > tbody.compact > tr.Row > td { white-space: nowrap; padding-top:1px; }

#MenuHint { position: absolute; right: 3px; top: 12px; display: none; }

#Loading { text-align: center; }
#Loading img { width: 128px; height: 128px; margin: 32px; }
img.LoadingImage { width: 128px; height: 128px; margin: 4px; }

/******************************************
    ListTableHeaderMenu
******************************************/
#ListTableHeaderMenu,
#ListTableAddMenu { margin: 0; padding: 6px 0; width: 150px; position: absolute; border: 1px solid #aaa; box-shadow: #aaa 2px 4px 8px; border-radius: 0 0 4px 4px; background-color: white; display: none; list-style: none; font-size: 12px; z-index: 1000; }
#ListTableHeaderMenu li, #ListTableAddMenu li { position: relative; height: 27px; line-height: 24px; cursor: pointer; white-space:nowrap; }
#ListTableHeaderMenu > li:hover, #ListTableAddMenu > li:hover { color: #000; background-color: #ffa835; background: linear-gradient(to bottom, #ffa835 35%,#ff8600 100%); }
#ListTableHeaderMenu li a, #ListTableAddMenu li a { color: #000; text-decoration: none; }
#ListTableHeaderMenu li .ico, #ListTableAddMenu li .ico { background-image: url('images/TableColumns.png'); display: inline-block; height: 24px; width: 24px; overflow: hidden; margin: 1px 4px; opacity: 0.75; }
#ListTableHeaderMenu .lbl, #ListTableAddMenu .lbl { display: inline-block; height: 24px; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 112px; }
#ListTableHeaderMenu li.divider, #ListTableAddMenu li.divider { height: 1px!important; margin: 6px 0; background-color: #ccc; cursor: default!important; }
#ListTableHeaderMenu li.divider:hover, #ListTableAddMenu li.divider:hover { background-color: #ccc!important; background: none; }


#ListTableHeaderMenuSortAsc .ico { background-position: 0 0; }
#ListTableHeaderMenuSortDesc .ico { background-position: -24px 0; }
#ListTableHeaderMenuGroup .ico {background-position: -48px 0}
#ListTableHeaderMenuUngroup .ico {background-position: -120px 0}
#ListTableHeaderMenuFilter .ico {background-position: -72px 0}
#ListTableHeaderMenuFilter > input { position: relative; top: -8px; width: 80px; border: 1px solid #DDD; border-radius: 1px; }
#ListTableHeaderMenuRename .ico {background-position: -216px 0}
#ListTableHeaderMenuHide .ico {background-position: -144px 0}

#ListTableAddMenuColumns .ico {background-position: -96px 0}
#ListTableAddMenuColumns>img  {position:relative;float:right;top:6px;right:6px;}
#ListTableAddMenuColumns ul {border:1px solid #aaa; box-shadow: #aaa 2px 4px 8px; border-radius: 0 4px 4px 4px; margin:0;padding: 4px 0;width:200px;background-color:white;left:180px;list-style:none;top:0;color: #000; position: absolute; display:none;}
#ListTableAddMenuColumns ul li {padding-left: 4px;cursor: pointer;white-space:nowrap; }
#ListTableAddMenuColumns ul li:hover {color:#000; background-color: #ffa835; background: linear-gradient(to bottom,  #ffa835 35%,#ff8600 100%);}

#ListTableAddMenuPageSize .ico { background-position: -192px 0; }
#ListTableAddMenuPageSize > input { position: relative; top: -8px; width: 80px; border: 1px solid #DDD; border-radius: 1px; }
#ListTableAddMenuCompact .ico, #ListTableAddMenuNormal .ico  {background-position: -168px 0}
#ListTableAddMenuCompact>input, #ListTableAddMenuNormal>input {position: relative; top: -5px;}
#ListTableAddMenuCompact label, #ListTableAddMenuNormal label {position: relative; top: -7px; cursor:pointer;}
#ListTableAddMenuSaveList .ico {background-position: -240px 0}
#ListTableAddMenuSelectAll .ico { background-position: -264px 0; }
#ListTableAddMenuSelectNone .ico { background-position: -288px 0; }


#ListTableAddMenuPageSizeText {width: 24px;}

/******************************************
    Dialogs
******************************************/
#AddListDlg    {white-space: nowrap}
#RenameColumnDlg label {margin-right: 6px;}
#RenameColumnDlg_Orig {cursor: pointer;}

/******************************************
    Serach
******************************************/
#SearchResult           {margin:0;padding:0;position:absolute;border:1px solid grey;background-color:white;
                         display:none;list-style:none;font-size:12px;z-index: 10;min-width: 238px;}
#SearchResult li { padding: 3px 5px; cursor: pointer; position: relative; background-color: white; }
#SearchResult li.act { background-color: #ffa835; }
#SearchResult li span { font-weight: bold; }

/******************************************
    Maps
******************************************/
#InfoWnd { font-size: 12px; display: block; padding-right: 24px; font-family: Arial; }
#InfoWnd .Title { font-size: 16px; font-weight: bold; white-space: nowrap; font-family: Arial; }
#InfoWnd .SubTitle { font-size: 14px; margin-bottom: 6px; white-space: nowrap; font-family: Arial; }
#InfoWnd > table { border-spacing: 0; background-color: #F6F6F6; text-align: left; border: 1px solid rgb(216,216,216); border-radius: 5px; white-space: nowrap; }
#InfoWnd > table > thead > tr { background-image: url(images/list_bghead.png); font-weight: bold; line-height: 20px; color:#222; text-shadow: 0 1px 0 #fff; }
#InfoWnd > table > thead > tr > td:first-child { border-top-left-radius: 5px; border-left: 0; }
#InfoWnd > table > thead > tr > td:last-child { border-top-right-radius: 5px; }
#InfoWnd > table > thead > tr > td { margin: 0; padding: 2px 2px 0 4px; border-bottom: 1px solid rgb(216,216,216); }
#InfoWnd > table > tbody > tr { cursor: pointer; }
#InfoWnd > table > tbody > tr:hover { background-color: #F39814; }
#InfoWnd > table > tbody > tr > td { margin: 0; padding: 2px 2px 0 4px; border-bottom: 1px solid rgb(216,216,216); }
#InfoWnd > table > tbody > tr:last-child > td { border-bottom: none!important; }

/******************************************
    Export Dialog
******************************************/

#ExportListDlg #ddlFormat           {width: 136px}
#ExportListDlg #cbxIncHidCol        {}

/******************************************
    Direct Request Dialog
******************************************/
#DirectRequestDlg { text-align: center; }
#DirectRequestDlg table { margin: 0; padding: 0; background-color: #F6F6F6; border: 1px solid #D8D8D8; border-collapse: collapse; font-family: Calibri, Arial; font-size: 16px; }
#DirectRequestDlg table th { white-space: nowrap; border-left: 1px solid #D8D8D8; padding: 2px; border-bottom: solid 1px black; color: #444444; background-image: url(images/list_bghead.png); }
#DirectRequestDlg table td { color: #444; padding: 0 5px 0 5px; }
#DirectRequestDlg table tr { border-bottom: 1px solid #D8D8D8; }
#DirectRequestDlg table tr td:first-child { color: #EF8700; }

/******************************************
   Statistics
******************************************/
#StatsDlg table     {width:100%;text-align:right;font-family: Arial;border-spacing:0;background-color:#F6F6F6; border-collapse: collapse;}
#StatsDlg tr.Header {font-weight: bold;}
#StatsDlg td.Name   {text-align: left;}
#StatsDlg td        {padding: 4px; border: 1px solid #D8D8D8;}


/******************************************
    Contacts Dialog
******************************************/
#ContactsDlg table      {font-family: Calibri, Arial; }
#ContactsDlg td.Label   {padding-left: 8px; color: #444;}
#ContactsDlg td.Data    {padding-left: 4px; color: #EF8700; text-align: right;}

/******************************************
    Export Data Dialog
******************************************/
#ExportDataDlg select { width: 136px; }
#ExportDataDlg label { padding: 2px; margin-right: 4px; }
#ExportDataDlg tr { height: 26px; }
#ExportDataDlg td { text-align: left; }
#ExportDataDlg td.top { vertical-align: top; }
table.form-layout { line-height: 24px; }
tr.cons-hist-inputs label { padding-left: 16px; }

/******************************************
    Export Data Dialog
******************************************/
#ExportPDFDlg select { width: 150px; }
#ExportPDFDlg label { padding: 2px; margin-right: 4px; }
#ExportPDFDlg tr { height: 26px; }
#ExportPDFDlg td { text-align: left; }

/******************************************
    Info Dialog Table
******************************************/
#info-dlg-table { width: 100%; text-align: right; font-family: Arial; border-spacing: 0; background-color: #F6F6F6; border-collapse: collapse; }
#info-dlg-table td { padding: 4px; border: 1px solid #D8D8D8; }
#info-dlg-table > thead > tr > td { text-align: left; }
#info-dlg-table > thead > tr { font-weight:bold; }
#info-dlg-table > tbody > tr > td.text { text-align: left; }
#info-dlg-table > thead > tr > td.deliv-est-header { white-space: nowrap; }
#info-dlg-table > thead > tr > td.deliv-est-header input { width: 50px; }
#info-dlg-table > tbody > tr.total { border-top: solid 2px #444; font-weight: bold; }



/******************************************
    Edit forms (Installation, Client, ...)
******************************************/
div.details > div.edit-form { background-color: #f0f0f0; border-right: 1px solid #ddd; float: left; }
div.edit-form               { padding: 4px; }
div.edit-form > * { font-size: 12px; font-family: Arial; }
div.edit-form input,
div.edit-form select { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: top; }
div.edit-form > div         { min-height: 26px }
div.edit-form > div.footer  { text-align: center; padding-top: 4px; margin-top: 2px; border-top: 1px solid #aaa; }
div.edit-form > div > label { display: inline-block; width: 120px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; vertical-align: top; }
div.edit-form.wide-labels > div > label { width: 200px; }
div.edit-form > div > input { font-size: inherit; vertical-align: top; }
div.edit-form > div > *.small { width: 60px; }
div.edit-form > div > *.medium-small { width: 120px; }
div.edit-form > div > *.medium { width: 160px; }
div.edit-form > div > *.big { width: 240px; }
div.edit-form > div > button { font-size: 12px; padding: 3px 6px; }
div.edit-form > div > button .ui-button-text { line-height: normal; padding: 3px; }
div.edit-form > div > button.ui-button-text-only .ui-button-text { display: inline; }
div.edit-form > div > button.ui-button-icon-only .ui-button-text { display: inline-block; }
div.edit-form > div > button.ui-button-text-icon-primary .ui-button-text { margin-left: 16px; }
div.edit-form > div > button.ui-button-text-icon-secondary .ui-button-text { margin-right: 16px; }
div.edit-form > div > button > span.ui-icon-plus { background-position: -16px -129px; }
div.edit-form.wide-lables > div > label { width: 180px; }

div.group-title { min-height: 0; height: auto; margin: 18px 0 2px; border-bottom: 1px solid #aaa; }
div.group-title > label { width: auto; }
#trackUP-timeZone { width: 108px; }

div.checkbox-list-item { min-height: 0; padding: 2px 0; margin-left: 20px; }
div.checkbox-list-item > label { width: auto; }


/******************************************
    selection lists
******************************************/
ol.selection-list { clear:both; margin: 0; padding: 0; border-radius: 4px; overflow: auto; }
ol.selection-list li { display: block; position: relative; padding: 4px; border-color: #ccc; border-style: solid; border-width: 0 1px 1px 1px; background: linear-gradient(to bottom, #ffffff 0, #f1f1f1 100%); }
ol.selection-list li:hover { cursor: pointer; background: linear-gradient(to bottom, #f6f6f6 0, #e0e0e0 100%); }
ol.selection-list li:active { cursor: pointer; background: linear-gradient(to bottom, #d0d0d0 0, #dfdfdf 100%); }
ol.selection-list li:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-width: 1px; }
ol.selection-list li:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
ol.selection-list li > div { margin-right: 20px; }
ol.selection-list li > div > span { margin-right: 8px; }
ol.selection-list li > span { float: right; position: absolute; top: 50%; right: 0; margin: -8px 4px 0 16px; }
ol.selection-list li > span.sn { margin-right: 150px; }
ol.selection-list li span.bold { font-weight:bold; }
ol.selection-list li span.italic { font-style: italic; }
ol.selection-list li span.right { float: right; }
ol.selection-list li span.small { font-size: 12px; }
ol.selection-list li span.pre-num { display: inline-block; width: 16px; }

/******************************************
    search dialogs
******************************************/
div.search-dlg > div.search-bar { margin: 4px auto 12px; min-height: 30px; }
div.search-dlg > div.warning-box { margin-bottom: 8px; border-radius: 4px; }
div.search-dlg > div.warning-box > span { display: inline-block; margin: 4px; vertical-align: top; }

/******************************************
    general dialogs
******************************************/
div.message-box > div.message { margin-bottom: 8px; border-radius: 4px; min-width: 200px; }
div.message-box > div.message span { display: inline-block; margin: 4px; vertical-align: top; }

/******************************************
    data tables
******************************************/
table.data-table { background-color: #fcfcfc; font-size: 12px; border-spacing: 0; border: 1px solid #bbb; border-radius: 3px; border-collapse: separate; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; }
table.data-table.small { font-size: 10px; }
table.data-table.clickable > tbody > tr { cursor: pointer; }
table.data-table > thead > tr > th { color: #444; text-shadow: 0 1px 0 rgba(255,255,255,0.8); padding: 4px 8px; border-bottom: 1px solid #bbb; background-color: #E8E8E8; background: linear-gradient(to bottom, #f6f6f6 0, #e0e0e0 100%); }
table.data-table > thead > tr > th:first-child { border-top-left-radius: 3px; }
table.data-table > thead > tr > th:not(:first-child) { border-left: 1px solid #bbb; }
table.data-table > thead > tr > th:last-child { border-top-right-radius: 3px; }
table.data-table > tbody > tr:hover { background-color: #eee; }
table.data-table > tbody > tr:not(:first-child) > td { border-top: 1px solid #bbb; }
table.data-table > tbody > tr > td { padding: 2px 4px; }
table.data-table.right-align > tbody > tr > td { text-align: right; }
table.data-table > tbody > tr > td:not(:first-child) { border-left: 1px solid #bbb; }
table.data-table > tbody > tr.red { color: #e00; }
table.data-table > tbody > tr.clickable { cursor: pointer; }
table.data-table > tbody > tr.modified { background-color: #F3FCE5; }
table.data-table > tbody > tr.warning { background-color: #ffd600; /*color: #ee5f00;*/ }
table.data-table > tbody > tr > td.modified { background-color: #F3FCE5; }
table.data-table > tbody > tr > td.warning { color: #ee5f00; }
table.data-table > tbody > tr > td.highlight { color: #4175c8; }
table.data-table > tbody > tr > td.link { color: #3AA5C7; cursor: pointer; }
table.data-table > tbody > tr.progress-busy { background-color: #4175c8; }
table.data-table > tbody > tr.progress-success { background-color: #75E200; }
table.data-table > tbody > tr.progress-failure { background-color: #ee5f00; }
table.data-table > tfoot > tr > td { color: #444; text-shadow: 0 1px 0 rgba(255,255,255,0.8); padding: 2px 4px; border-top: 1px solid #bbb; background-color: #E8E8E8; background: linear-gradient(to bottom, #f6f6f6 0, #e0e0e0 100%); }
table.data-table > tfoot > tr > td:first-child { border-bottom-left-radius: 3px; }
table.data-table > tfoot > tr > td:not(:first-child) { border-left: 1px solid #bbb; }
table.data-table > tfoot > tr > td:last-child { border-bottom-right-radius: 3px; }
table.data-table > tfoot > tr > td > div.paging { white-space: nowrap; }
table.data-table > tfoot > tr > td > div.paging > span { float: right; margin-right: 4px; }
table.data-table > tfoot > tr > td > div.paging > span.link-btn { cursor: pointer; color: #4175c8; }
table.data-table > tfoot > tr > td > div.paging > span.link-btn:hover { color: #ffa835; }
table.data-table > tfoot > tr > td > div.paging > span.link-btn.disabled { cursor: default; color: #8b8b8b; }
table.data-table > tfoot > tr > td > div.paging > span.filter { float: left; font-size: 11px; color: #707070; }
table.data-table > tfoot > tr > td.center { text-align: center; }
table.data-table > tbody > tr > td > a {color:#3AA5C7; text-decoration: none; }
div.info-group > table.data-table { margin-top: 4px; }
table.data-table > tbody > tr.separator > td { padding: 0; background-color: #bbb; height: 2px; }
table.data-table > tbody > tr > td.limited200 { white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis;}
table.data-table > tbody > tr > td.sel { min-width: 12px; }


/* custom data tables */
table.data-table.messages > tbody > tr.in { background-color: #ffffff; }
table.data-table.messages > tbody > tr.in.reset { background-color: #FBFF98; }
table.data-table.messages > tbody > tr.in.diag { background-color: #ffe8fd; }
table.data-table.messages > tbody > tr.in.config-ack { background-color: #D3FF83; }
table.data-table.messages > tbody > tr.in.config-nack { background-color: #fe8b8b; }
table.data-table.messages > tbody > tr.in.config-uidlist { background-color: #ffb500; }

table.data-table.messages > tbody > tr.in > td > span.highlight { color: #00A51A; text-shadow:rgba(9, 58, 0, 0.2)  1px 1px 1px; }
table.data-table.messages > tbody > tr.out { background-color: #DAECFF; }
table.data-table.messages > tbody > tr > td.msg-content,
table.data-table.messages > tbody > tr > td.msg-in-status { cursor: pointer; }
table.data-table.messages > tbody > tr.active { font-weight: bold; }

table.data-table.messages > thead > tr > th > div.header-legend > span { display: inline-block; padding: 1px; font-weight:normal; text-shadow: none;  }
table.data-table.messages > thead > tr > th > div > span.out { background-color: #DAECFF; }
table.data-table.messages > thead > tr > th > div > span.in { background-color: #ffffff; }
table.data-table.messages > thead > tr > th > div > span.in-reset { background-color: #FBFF98; }
table.data-table.messages > thead > tr > th > div > span.in-cfg-ack { background-color: #D3FF83; }
table.data-table.messages > thead > tr > th > div > span.in-cfg-nack { background-color: #fe8b8b; }
table.data-table.messages > thead > tr > th > div > span.in-cfg-uid { background-color: #ffb500; }
table.data-table.messages > thead > tr > th > div > span.in-cfg-diag { background-color: #ffe8fd; }
table.data-table.messages > thead > tr > th > div > span.in-highlight { color: #00A51A; }

table.data-table.alarms > tbody > tr.active { background-color: #ffd600; }
table.data-table.tank-alarms { float: left; }
table.data-table.tank-alarms > tbody > tr.active { color: #cf0000; }

div.tank-alarm-emails-table { float: left; width: 600px; margin-left: 16px; }
table.data-table.tank-alarm-emails { width: 1000px; }

div.button-list > button.flat { margin: 2px; float: left; }

/* Accounting */
table.data-table.sub-table tr.terminated { text-decoration: line-through; color: #666; }
table.data-table.sub-table > tbody > tr > td > a { color: #444; }
table.data-table.sub-table > tbody > tr > td.sel { font-size: 1.3em; }
table.data-table.sub-table > tbody > tr > td.sel > i { width: 15px; }
a.sub-file-link.deleted { text-decoration: line-through !important; }
div.accounting-files div.file-entry { padding: 6px; background-color: #fff; margin: 2px; border: 1px solid #bbb; font-size: 14px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; }
div.accounting-files a { text-decoration: none; color: #222; }
div.accounting-files a:hover { color: #ef8700; }
div.accounting-files a.acc-file-del { float: right; }

/* Admin light */
#admin-light-dlg div.recipient-line { margin-bottom: 4px; }
#admin-light-dlg div.recipient-line > select.culture-list { width: 180px; }
#admin-light-dlg div.recipient-line > input.recipient { width: 312px; }
#admin-light-dlg div.recipient-line > input,
#admin-light-dlg div.recipient-line > select { margin-right: 4px; }

#admin-light-dlg > div.left { float: left; width: 408px; }
#admin-light-dlg > div.left.wide { width: 608px; }
#admin-light-dlg > div.left > div.generic-alarm { background-color: #eee; border-radius: 2px; margin-bottom: 4px; padding: 4px; }
#admin-light-dlg > div.left > div.generic-alarm > div.title { font-weight: bold; margin-bottom: 4px; }
#admin-light-dlg > div.left > div.generic-alarm > div.recipient { margin-bottom: 4px; }
#admin-light-dlg > div.left > div.generic-alarm > div.recipient > input[type=text] { width: 496px; }
#admin-light-dlg > div.left > div.theft-alarm { background-color: #eee; border-radius: 2px; margin-bottom: 4px; padding: 4px; }
#admin-light-dlg > div.left > div.theft-alarm > div.title { font-weight: bold; margin-bottom: 4px; }
#admin-light-dlg > div.left > div.theft-alarm div.recipient-line > input.recipient { width: 214px; }
#admin-light-dlg > div.left > div.trackup-alarm { background-color: #eee; border-radius: 2px; margin-bottom: 4px; padding: 4px; }
#admin-light-dlg > div.left > div.trackup-alarm > div.title { font-weight: bold; margin-bottom: 4px; }
#admin-light-dlg > div.left > div.trackup-alarm div.recipient-line > input.recipient { width: 312px; }



#admin-light-dlg > div.left > div.tank { background-color: #eee; border-radius: 2px; margin-bottom: 4px; padding: 4px; }
#admin-light-dlg > div.left > div.tank > div { margin-bottom: 4px; }
#admin-light-dlg > div.left > div.tank > div.title { font-weight: bold; }
#admin-light-dlg > div.left > div.tank > div > label:first-child { width: 120px; white-space: nowrap; display: inline-block; }
#admin-light-dlg > div.left > div.tank > div > span { margin-right: 12px; display: inline-block; }

#admin-light-dlg > div.right { float: left; width: 328px; }
#admin-light-dlg > div.right > div.links { padding: 4px; text-align: center; }
#admin-light-dlg > div.right > div.links > div { padding: 4px; }
#admin-light-dlg > div.right > div.location { width: 320px; padding: 4px; }
#admin-light-dlg > div.right > div.location > div.location-geoloc { background-color: #eee; border-radius: 2px; margin-bottom: 4px; padding: 4px; }
#admin-light-dlg > div.right > div.location > div.location-geoloc > div { line-height: 28px; }
#admin-light-dlg > div.right > div.location > div.location-geoloc > div > label { width: 120px; white-space: nowrap; display: inline-block; }
#admin-light-dlg > div.right > div.location > div.location-geoloc > div > input.latLng { width: 120px; text-align: right; }
#admin-light-dlg > div.right > div.location > div.location-geoloc > div > input.alt { width: 70px; text-align: right; }
#admin-light-dlg > div.right > div.location > #location-map { width: 320px; height: 320px; }

/* find user dialog */
#find-user-dlg > div.header { margin-bottom: 4px; width: 600px; }
#find-user-dlg > div.results { min-height: 600px; overflow-y: auto; }
#find-user-dlg > div.results > table.data-table > thead > tr > th:first-child { width: 200px; }
#find-user-dlg > div.results > table.data-table > thead > tr > th:last-child { width: 400px; }

div.edit-user-dlg > div > div.show-for-de > table > tbody > tr > td { height: 32px; }


/* login history */
#login-history > table.data-table > tbody > tr > td { white-space: nowrap; }
#login-history > table.data-table > tbody > tr > td:last-child { max-width: 300px; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
#login-history > table.data-table > tbody > tr > td > div { border: none; background: none; }

tr.edit-user { cursor: pointer; }


/* company details */
div.details img.company-logo { padding: 8px; background-color: #fff; }
div#trans-fail-recipients div.recipient-line { margin-bottom: 4px; }
div#trans-fail-recipients div.recipient-line > select.culture-list { width: 180px; margin-right: 4px; }
div#trans-fail-recipients div.recipient-line > input.recipient { width: 296px; margin-right: 4px; }

/* replace-email-dlg */
div#replace-email-dlg > div > input[type=text] { width: 200px; }
div#replace-email-dlg > div > label  {display: inline-block; width: 120px; height: 28px; }
div#replace-email-dlg > table.data-table div.line-item { white-space: nowrap; }
div#replace-email-dlg > table.data-table div.context { white-space: nowrap; }


/* maintenance: request new site dialog */
div#mrd div.edit-form { padding: 8px!important; }
div#mrd span.mrd-search-result { display: none; margin-top: -2px; }
div#mrd span.mrd-search-found { color: #ef8700; cursor: pointer; }
div#mrd span.mrd-search-not-found { color: #006B02; }
div#mrd span.warning {margin: 0; padding: 4px; position:relative; bottom: -5px; border-radius: 2px; color: #cd0a0a; background-color: #fef1ec; border: 1px solid #cd0a0a; box-shadow: #444 2px 2px 6px; }
div#mrd div.tank-name { border-top: 1px solid #AFAFAF; margin-top: 4px; padding-top: 8px; }
div#mrd div select.fill-factor { margin-left: 4px; }
div#mrd #mrd-alarm-recipients-lang { width: 240px; }
div#mrd #mrd-alarm-recipients { width: 240px; }
#mrd-tab7 table tbody tr td { font-size: 16px; }
#mrd-tab7 div.sub-title { border-bottom: solid 1px #333333; margin-top: 16px; }
#mrd-tab7 #mrd-map { width: 400px; height: 300px; float: left; }
#mrd-tab7 div.bold { font-weight: bold; }
#mrd-tab7 #swisscom-lora,
#mrd-tab7 table td.map-legend { vertical-align: top; padding-left: 16px; }
#mrd-tab7 #cell-margins img { width: 24px; height: 24px; }

/******************************************
    text edit dialog
******************************************/
#text-edit-field { width: 95%; height: 95%; }


/* notifications */
#notifications { position: fixed; z-index: 1002; top: 8px; right: 8px; width: 340px; font-family: Calibri, Arial; font-size: 16px; }
#notifications > div { position: relative; padding:8px 32px 8px 8px; margin:8px; border-radius: 4px; background-color: #1C9CFF; display: none; box-shadow: #444 2px 2px 6px; color: whitesmoke; }
#notifications > div > i { position: absolute; top: 10px; right: 6px; cursor: pointer; }
#notifications > div.success-true { background-color: #00a015; }
#notifications > div.success-false { background-color: #cc0000; }


/* Config History Dialog */
#config-history-dlg > table {border-spacing: 0;  border: 1px solid #bbb; border-radius: 3px; border-collapse: separate; background-color: #eee; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif }
#config-history-dlg > table td:not(:first-child) { border-left: 1px solid #bbb; }
#config-history-dlg > table thead td { font-weight: bold; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,0.8); padding: 4px 8px; border-bottom: 1px solid #bbb; background: linear-gradient(to bottom, #f6f6f6 0, #e0e0e0 100%); }
#config-history-dlg > table thead td:first-child { border-top-left-radius: 3px; }
#config-history-dlg > table thead td:last-child { border-top-right-radius: 3px; }
#config-history-dlg > table tbody tr:hover { background-color: #e0e0e0; cursor: pointer; }
#config-history-dlg > table tbody tr:not(:first-child) td { border-top: 1px solid #bbb; }
#config-history-dlg > table tbody td { padding: 2px 4px; }
#config-history-dlg > table tbody tr.detail td { background-color: #fcfcfc; }
#config-history-dlg > table tbody tr pre { white-space: pre-wrap }

/* ordering / shopping */
table.ordering input.ord-rem { width: 200px; }
table.ordering > thead > tr > th { text-align: left;}
table.ordering > tbody > tr { background-color: #eee; }
table.ordering > tbody > tr.inst > td { font-size: 12px; font-weight: bold; line-height: 30px; }
table.ordering > tbody > tr.alt { background-color: #fff; }
table.ordering > tbody > tr:hover { background-color: #9FC8F7; }
table.ordering > tbody > tr > td {border-left-width: 0px!important;}

div.order-warning { text-align: center; width: 400px; background-color: #fa5e5e; margin: auto; padding: 4px; border-radius: 5px; }
div.order-info { text-align: center; background-color:#f7ff64; margin: auto; padding: 4px; border-radius: 5px; }

#Tab-DiagTankTab-Content table.data-table td.status-13 { cursor: pointer; color: #3AA5C7; }

/* GDPR Disclaimer */
span.disclaimer { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; }
span.disclaimer p { margin-bottom: 10px; }
span.disclaimer p.title { margin-top: 16px; margin-bottom: 10px; font-weight: bold; }
span.disclaimer p.li { font-weight: bold; }

/* sortable lists */
ul.sortable { list-style-type: none; margin: 0; padding: 0; border: 1px solid #eee; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; }
ul.sortable li { cursor:pointer; margin: 0 5px 5px 5px; padding: 5px; border: 1px solid #aaa; background: linear-gradient(to bottom, #f6f6f6 0, #e0e0e0 100%); }


/******************************************
    Tank Analytics
******************************************/
div.analytics button.action { font-size: 32px; width: 48px; margin: 0 0 0 8px; }
div.analytics button.action span.ui-button-text { padding: 0; }
div.analytics input[type=text] { vertical-align: top; margin-top: 12px; }
div.analytics .good { color: #0a2; }
div.analytics .bad { color: #f70; }
div.analytics .warn { color: #fa1; }
div.analytics #cmp-chart { height: 600px; }
div.analytics div.status-icon { padding: 8px; font-size: 32px; background-color: #ddd; border-radius: 4px; }

/* overrides for printing */
@media print { .no-print, .no-print * { display: none !important; }
    #Content { margin-left: 0; }
    #ListTable { font-size: 10px; }
    #ListTable > thead > tr > th.Selection { display: none; }
    #ListTable > thead > tr > th { white-space: normal; padding: 2px 4px; margin: 0; }
    #ListTable > thead > tr > th > div.sort-asc { display: none; }
    #ListTable > thead > tr > th > div.caption.s { margin: 0; }
    #ListTable > thead > tr > th > div.dragtable-drag-handle { display:none; }
    #ListTable > thead > tr > th > div.caption { text-align: left; margin: 0;}
    #ListTable > tbody > tr.Row { height: inherit; }
    #ListTable > tbody > tr.Row > td.Selection { display: none; }
    #ListTable > tbody > tr.Row > td img { display: none; }
    #ListTable > tbody > tr.Row > td.Autonomy > div { margin-left: 0; }
}



/******************************
    Dynamic Objects Dashboard
******************************/
div.do-details {
    display: flex;
    flex-wrap: wrap;
}
div.do-details > div {
    padding: 8px;
}
div.do-details > div.do-properties {
    float: left;
    min-width: 200px;
}
div.do-details > div.do-chart {
    height: 400px;
    width: 600px;
}

/******************************
    Dynamic Objects Config
******************************/
div.do-config {
    padding: 8px;
    float:left;
}
div.do-config div.title {
    font-weight: bold;
}
div.do-generic {
    float: left;
}
div.do-charts {
    float: left;
}

div.do-config div > label {
    display: inline-block;
    min-width: 120px;
}
div.do-config > div.do-charts > div.chart-config {
    max-width: 400px;
    margin-bottom: 8px;
}

/******************************
    Mass Update Dialogs
******************************/
#mass-update-alarms-dlg tr.mua-tank > td.diff { background-color: #ff6f00; }
#mass-update-products-dlg tr.mua-tank.missing { background-color: #c100ff; }
#mass-update-products-dlg tr.mua-tank > td.diff { background-color: #ff6f00!important; }

/******************************
    Tank Group Alarms
******************************/
div.tga-def > div.title { font-family: Calibri, Arial; color: #444; font-size: 14px; padding: 4px; border-bottom: solid 1px #888; font-weight: bold; }
div.tga-def > div.recipient-line { padding: 4px; white-space: nowrap; }
div.tga-def > div.recipient-line > select.culture { width: 180px; }
div.tga-def > div.recipient-line > input.recipient { width: 300px; }

/******************************
    ObjectKVS
******************************/
span#kvs-hint { background-color: #fbfaf3; margin: 8px; display: inline-block; padding: 4px; border: 1px solid #aaa; border-radius: 4px; text-shadow: 1px 1px 1px #fff; color: #212121; }

/******************************
    Anomaly detection
******************************/
div.ano-chart { width: 400px; height: 300px; float: left; margin-left: 8px; }
div.details.anomaly > div.settings { min-height: 100px; padding: 8px; }