html { font-family: Trebuchet MS, Arial, Helvetica, sans-serif; line-height: 1.5; }
html { box-sizing: border-box; }
body { background-color: #fff; color: #000; padding: 0; margin: 0; padding-top: 150px; padding-left: 280px; }

.warning-auth { color: red; width: auto; padding-bottom: 10px; }

.test-form { padding: 20px; width: 100vw; display: flex; gap: 30px; }

.test-button { margin-left: 50px; width: auto; text-align: right; background-color: #ddd; -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); font-size: 16px; padding: auto; }

#settings-button { width: auto; background-color: transparent; margin-left: 500px; margin-top: -10px; }

#settings-button:hover { background-color: #ddd; -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); }

#info-auth { margin-left: 30px; color: #7a0; margin-top: -3px; }

.mail-box { display: flex; align-items: start; width: 100vw; }

#validation-feedback { display: flex; flex-direction: column; gap: 5px; width: 200px; }
.valid { background-color: #690; color: #fff; padding: 3px; font-size: 12px; }
.invalid { background-color: #c00; color: #fff; padding: 3px; font-size: 12px; }
.pw-conf { display: flex; gap: 30px; }

.invisible { display: none; }

.banner { width: auto; background-color: yellow; color: black; text-align: center; padding: 10px; z-index: 99999999; }

a, a:link, a:visited, a:active { color: #333; text-decoration: none; }
a:hover { color: #000;}
a img { border: none; }
input, select, textarea { font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 100%; margin-bottom: 10px;}
input, select, textarea { min-width: 200px; }
input[type="submit"] { min-width: 20px; }
input[type="checkbox"] { min-width: 20px; }
input[type="radio"] { min-width: 20px; }
input[size] { min-width: auto; }
textarea { white-space: pre; }
table { border-spacing: 0px; border-collapse: collapse; }
tr { vertical-align: top; }
th { vertical-align: top; text-align: left; font-weight: normal; background-color: #eee; }
td { vertical-align: top; text-align: left; font-weight: normal; }
dl { padding: 0px; margin: 0px; }

table input, table select, table textarea { min-width: 30px; width: 100%; margin-bottom: 0px; }
table input[type="submit"] { min-width: 20px; width: auto; }
table input[type="checkbox"] { min-width: 20px; width: auto; }
table input[type="radio"] { min-width: 20px; width: auto; }
table th { padding: 5px; min-width: 50px; }
table td { padding: 5px; }

form { padding: 0px; margin: 0px; }
fieldset { border: none; border-top: 2px solid #999; margin-bottom: 30px; padding-top: 12px; }
legend { color: #999; padding: 0 0.2em; }

pre { line-height: 1em; padding: 8px; background-color: #eee; }

.error { padding: 20px; padding-left: 64px; background-color: #b00; color: #fff; font-weight: bold; background-image: url(/_images/dialogs/dialogError.png); background-position: 16px 16px; background-repeat: no-repeat; background-size: 32px; }
.success { padding: 20px; padding-left: 64px; background-color: #7a0; color: #fff; font-weight: bold; background-image: url(/_images/dialogs/dialogInformation.png); background-position: 16px 16px; background-repeat: no-repeat; background-size: 32px; }
.success a { color: #fff; }

.no { text-decoration: line-through; color: #999; }
.red { color: #c00; }
.orange { color: #f90; }
.green { color: #690; }
.blue { color: #009; }
.grey,
.gray { color: #999; }

.red a, .orange a, .green a, .blue a, .grey a, .gray a { color: #fff; }

tr.red, tr.red:hover { background-color: #c00; color: #fff; }
tr.orange, tr.orange:hover { background-color: #f90; color: #fff; }
tr.green, tr.green:hover { background-color: #690; color: #fff; }
tr.grey, tr.gray, tr.grey:hover, tr.gray:hover { background-color: #999; color: #fff; }

.preview.red { color: #c00; background-color: #c00; }
.preview.orange { color: #f90; background-color: #f90; }
.preview.green { color: #690; background-color: #690; }
.preview.grey, .preview.gray { color: #999; background-color: #999; }

/* menu */

#menu { position: fixed; left: 0px; top: 0px; bottom: 0px; width: 280px; padding-bottom: 80px; z-index: 10099; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; background-color: #222; color: #fff; -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.5); }
#menu a { display: block; color: #fff; height: 50px; line-height: 50px; padding-left: 50px; border-left: 5px solid #222; background-position: 13px center; background-repeat: no-repeat; background-size: 24px; transition: all 0.5s; }
#menu a:hover { border-left: 5px solid #444; background-color: #333; transition: all 0.5s; }
#menu a.selected { border-left: 5px solid #9c0; transition: all 0.5s; }

#menuLogo { position: fixed; left: 0px; bottom: 0px; width: 250px; height: 80px; background-color: #222; background-image: url(/_images/logo.png); background-position: bottom center; background-repeat: no-repeat; background-size: 200px; }

.menuText { line-height: 50px; }

.iconOverview { background-image: url(/_images/menu/overview.png); }
.iconOpen { background-image: url(/_images/menu/open.png); }
.iconClose { background-image: url(/_images/menu/close.png); }
.iconSettings { background-image: url(/_images/menu/settings.png); }
.iconCities { background-image: url(/_images/menu/cities.png); }
.iconStations { background-image: url(/_images/menu/stations.png);}
.iconStops { background-image: url(/_images/menu/stops.png); }
.iconTimeTables { background-image: url(/_images/menu/timeTables.png); }
.iconDeviceTypes { background-image: url(/_images/menu/deviceTypes.png); }
.iconDevices { background-image: url(/_images/menu/devices.png); }
.iconTtsLibrary { background-image: url(/_images/menu/ttsLibrary.png); }
.iconDataProviders { background-image: url(/_images/menu/dataProviders.png); }
.iconApps { background-image: url(/_images/menu/apps.png); }
.iconReports { background-image: url(/_images/menu/reports.png); }
.iconTrends { background-image: url(/_images/menu/trends.png); }
.iconObjectGroups { background-image: url(/_images/menu/objectGroups.png); }
.iconObjects { background-image: url(/_images/menu/objects.png); }
.iconSchedule { background-image: url(/_images/menu/schedule.png); }
.iconRemote { background-image: url(/_images/menu/remote.png); }
.iconBatch { background-image: url(/_images/menu/batch.png); }
.iconUserGroups { background-image: url(/_images/menu/userGroups.png); }
.iconUsers { background-image: url(/_images/menu/users.png); }
.iconSystems { background-image: url(/_images/menu/systems.png); }
.iconSql { background-image: url(/_images/menu/sql.png); }
.iconLanguages { background-image: url(/_images/menu/languages.png); }
.iconLogs { background-image: url(/_images/menu/logs.png); }
.iconSelf { background-image: url(/_images/menu/profile.png); }
.iconLogout { background-image: url(/_images/menu/logout.png); }

#menu hr { border: none; border-top: 1px solid #444; margin: 0; padding: 0; margin-top: 5px; margin-bottom: 5px; color: #fff; }

#menuStaticData {}
#staticData { padding-bottom: 40px; }
#menuStaticData:hover,
#staticData a:hover { }
#staticData a { background-position: 47px center; padding-left: 84px; }
#staticData a.selected {}


#menuSystemData {}
#systemData { padding-bottom: 40px; }
#menuSystemData:hover,
#systemData a:hover {}
#systemData a { background-position: 47px center; padding-left: 84px; }
#systemData a.selected {}

/* login dialog (before language switch) */

.noLine { border: none; }

.labelUsername { display: inline-block; position:relative; top:6px; height: 24px; line-height:24px; width: 40px; background-image: url(/_images/login/username.png); background-position: left center; background-repeat: no-repeat; background-size: 24px; }
.labelPassword { display: inline-block; position:relative; top:6px; height: 24px; line-height:24px; width: 40px; background-image: url(/_images/login/password.png); background-position: left center; background-repeat: no-repeat; background-size: 24px; }
.labelQR { display: inline-block; position:relative; top:6px; height: 24px; line-height:24px; width: 40px; }
.labelToken { display: inline-block; position:relative; top:6px; height: 24px; line-height:24px; width: 40px; background-image: url(/_images/login/token.png); background-position: left center; background-repeat: no-repeat; background-size: 24px; }

.iframe-container { background-image: url(/_images/wait.gif); background-repeat: no-repeat; background-position: 6px 6px; background-size: 297px 6px; }

/* systemMenu layer */

#systemMenu { display: none; position: fixed; right: 0px; top: 0px; bottom: 0px; width: 250px; z-index: 10097; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-top: 60px; background-color: #ddd; color: #000; -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.5); }
#systemMenu a { display: block; color: #000; height: 50px; line-height: 50px; padding: 0px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#systemMenu a:hover { background-color: #eee; }

#systemMenuOpen { position: fixed; right: 0px; top: 0px; width: 120px; height: 50px; z-index: 98; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; }
#systemMenuOpen .menuText { font-weight: normal; color: #cf0; }
#systemMenuClose { position: fixed; right: 0px; top: 0px; width: 10px; height: 50px; z-index: 98; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; padding: 0; }

#systemMenuAdd { position: fixed; right: 200px; bottom: 0px; width: 10px; height: 50px; z-index: 98; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; padding: 0; }
#systemMenuEdit { position: fixed; right: 0px; bottom: 0px; width: 10px; height: 50px; z-index: 98; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; padding: 0; }

.iconSystemMenuOpen { background-image: url(/_images/menu/moreOpen.png); }
.iconSystemMenuClose { background-image: url(/_images/menu/moreClose.png); }

.iconSystemMenuAdd { background-image: url(/_images/new.png); }
.iconSystemMenuEdit { background-image: url(/_images/edit.png); }

/* contextMenu layer */

#contextMenu { display: none; position: fixed; right: 0px; top: 50px; bottom: 0px; width: 250px; z-index: 10097; padding-top: 50px; background-color: #ddd; color: #000; -webkit-box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); }
#contextMenu a { display: block; color: #000; height: 50px; line-height: 50px; padding: 0px 20px; }
#contextMenu a:hover { background-color: #eee; }

#contextMenuOpen { position: fixed; right: 0px; top: 50px; width: 120px; height: 50px; z-index: 10098; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; }
#contextMenuOpen .menuText { font-weight: normal; color: #cf0; }
#contextMenuClose { position: fixed; right: 0px; top: 50px; width: 10px; height: 50px; z-index: 10098; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; padding: 0; }

.iconContextMenuOpen { background-image: url(/_images/menu/moreOpen.png); }
.iconContextMenuClose { background-image: url(/_images/menu/moreClose.png); }

/* content */

#system { position: fixed; left: 280px; top: 0px; right: 0px; height: 50px; line-height: 50px; z-index: 10094; background-color: #7a0; color: #fff; padding: 0px 20px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#title { position: fixed; left: 280px; top: 50px; right: 0px; height: 50px; line-height: 50px; z-index: 10093; background-color: #8b0; background-image: linear-gradient(90deg, #7a0 0%, #7a0 40%, #8b0 100%); color: #fff; padding: 0px 20px; font-weight: bold; -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#buttons { position: fixed; left: 280px; top: 100px; right: 0px; height: 50px; z-index: 10092; text-align: right; background-color: #ddd; -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); }
button, #buttons a { display: inline-block; background-position: 14px 14px; background-repeat: no-repeat; background-size: 24px; line-height: 50px; height: 50px; width: 50px; text-align: left; border: none; background-color: #ddd; }
button:hover, #buttons a:hover { background-color: #ccc; cursor: pointer; }
button:disabled, #buttons a:disabled { background-color: #eee; cursor: pointer; }
button.down, #buttons a.down { background-color: #aaa; cursor: pointer; }

.buttonCancel { background-image: url(/_images/actions/cancel.png); float: left; }
.buttonOK { background-image: url(/_images/actions/ok.png); float: right; margin-left: 30px; }
.buttonNew { background-image: url(/_images/actions/new.png); }
.buttonDelete { background-image: url(/_images/actions/delete.png); margin-left: 30px; }
.buttonCopy { background-image: url(/_images/actions/copy.png); }
.buttonEdit { background-image: url(/_images/actions/edit.png); }
.buttonBack { background-image: url(/_images/actions/back.png); float: left; }
.buttonRefresh { background-image: url(/_images/actions/refresh.png); }

.buttonLast { background-image: url(/_images/actions/last.png); }
.buttonNext { background-image: url(/_images/actions/next.png); }

button .buttonInline, .buttonInline { display: inline-block; background-color: #ccc; color: #333; border: none; width: auto; height: auto; line-height: auto; padding: 0px 20px; }

content { padding: 0px; margin: 0px; z-index: 96; }

.systemHeader h1, h2 { margin: 0px; margin-bottom: 10px; cursor: pointer; }
.systemHeaderDetails { display: none; margin-bottom: 20px; }
.systemHeaderDashboard { width: 99%; }
.systemHeaderDashboard svg { max-width: 96%; }

/* lists */

.valueList { width: 100%; }
.valueList tr:hover { background-color: #eee; }
.valueList th { background-color: #ddd; padding: 4px 10px; font-weight: bold; }
.valueList td { border-bottom: 1px solid #ddd; padding: 4px 10px; vertical-align: top; }

.inlineButtonRemove { height: 24px; line-height: 24px; min-width: 40px; width: 40px; text-align: center; }
.inlineButtonAdd { height: 24px; line-height: 24px; min-width: 40px; width: 40px; text-align: center; }
.inlineButtonUpload { height: 24px; line-height: 24px; min-width: 40px; width: auto; text-align: center; }

.previewList { padding: 0px; padding-bottom: 30px; display: flex; flex-flow: row wrap; align-items: flex-start; }
.previewList .previewListSeparator { display: block; width: 100%; font-weight: bold; color: #9c0; padding: 6px 20px; padding-top: 30px; border-bottom: 1px solid #ccc; }
.preview { display: inline-block; width: 250px; background-color: #fff; border: 1px solid #ccc; margin-left: 20px; margin-top: 20px; padding: 6px; align-self: flex-start; transition: all 0.5s; }
.preview div { display: block; background-color: #666; color: #fff; line-height: 1em; padding: 6px; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview img,
.preview svg,
.preview embed,
.preview object { max-width: 100%; height: auto; margin-top: 6px; }
.preview.zoom:hover { transform: scale(1.25); transition: all 0.5s; z-index: 12000; -webkit-box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); }
.preview a { display: inline-block; padding: 0px 4px; }
.preview a:hover { background-color: #eee; }

.preview object,
.preview embed { pointer-events: none; display: block; z-index: 1; z-index: -1; }

.valueList td .field { width: 100%; min-width: 120px; border-bottom: none; }
.valueList tr:hover .field { background-color: #fff; }

.flexList { display: flex; flex-flow: row wrap; align-items: flex-start; }
.flex { display: inline-block; width: auto; align-self: flex-start; }
.comment { padding: 10px; margin: 20px; background-color: #f7f7f7; }

.list { width: 100%; }

.iconCol { width: 24px; }

.listSeparator { }
.listSeparator .keyCol { font-weight: bold; color: #9c0; padding: 6px 20px; padding-top: 30px; }
.listSeparator .listCol { color: #9c0; padding: 6px 20px; padding-top: 30px; }

.listHeader { color: #aaa; }
.listHeader .keyCol { font-weight: bold; border-bottom: 1px solid #ccc; padding: 6px 20px; padding-top: 30px; }
.listHeader .listCol { border-bottom: 1px solid #ccc; padding: 6px 20px; padding-top: 30px; }

.listItem { z-index: 33; cursor: pointer; }
.listItem .keyCol { font-weight: bold; padding: 0px 20px; border-bottom: 1px solid #ccc; line-height: 2.5em; }
.listItem .listCol { padding: 0px 20px; border-bottom: 1px solid #ccc; line-height: 2.5em; }
.listItem .linkCol { width: 40px; }
.listItem:hover { background-color: #eee; }
.listItem a { z-index: 44; display: inline-block; padding: 0px 10px; line-height: 2.5em; }
.listItem a:hover { background-color: #ddd; }

.colorService { background-color: #06c; color: #fff; padding: 4px 14px; }
.colorInactive { background-color: #aaa; color: #fff; padding: 4px 14px; }
.colorSleep { background-color: #555; color: #fff; padding: 4px 14px; }
.colorWarning { background-color: #f90; color: #fff; padding: 4px 14px; }
.colorError { background-color: #b00; color: #fff; padding: 4px 14px; }
.colorOk { background-color: #690; color: #fff; padding: 4px 14px; }

.iconSleep { background-image: url(/_images/status/sleep.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; }
.iconOnline { background-image: url(/_images/status/online.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; }
.iconOffline { background-image: url(/_images/status/offline.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; }
.iconNoPower { background-image: url(/_images/status/noPower.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; }
.iconNoData { background-image: url(/_images/status/noData.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; }
.iconPowerFail { background-image: url(/_images/status/powerFail.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; }

.previewTitle.colorService { background-color: #06c; color: #fff; padding: 6px 8px; }
.previewTitle.colorInactive { background-color: #aaa; color: #fff; padding: 6px 8px; }
.previewTitle.colorSleep { background-color: #555; color: #fff; padding: 6px 8px; }
.previewTitle.colorWarning { background-color: #f90; color: #fff; padding: 6px 8px; }
.previewTitle.colorError { background-color: #b00; color: #fff; padding: 6px 8px; }
.previewTitle.colorOk { background-color: #690; color: #fff; padding: 6px 8px; }

.previewTitle.iconSleep { background-image: url(/_images/status/sleep.png); background-position: right 4px center; background-repeat: no-repeat; background-size: 24px; padding-right: 38px; }
.previewTitle.iconOnline { background-image: url(/_images/status/online.png); background-position: right 4px center; background-repeat: no-repeat; background-size: 24px; padding-right: 38px; }
.previewTitle.iconOffline { background-image: url(/_images/status/offline.png); background-position: right 4px center; background-repeat: no-repeat; background-size: 24px; padding-right: 38px; }
.previewTitle.iconNoPower { background-image: url(/_images/status/noPower.png); background-position: right 4px center; background-repeat: no-repeat; background-size: 24px; padding-right: 38px; }
.previewTitle.iconNoData { background-image: url(/_images/status/noData.png); background-position: right 4px center; background-repeat: no-repeat; background-size: 24px; padding-right: 38px; }
.previewTitle.iconPowerFail { background-image: url(/_images/status/powerFail.png); background-position: right 4px center; background-repeat: no-repeat; background-size: 24px; padding-right: 38px; }

.sleepAssigned { background-image: url(/_images/status/sleepAssigned.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; padding: 4px 14px; }

.connectivityGood { background-image: url(/_images/status/connectivityGood.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; padding: 4px 14px; }
.connectivityMedium { background-image: url(/_images/status/connectivityMedium.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; padding: 4px 14px; }
.connectivityPoor { background-image: url(/_images/status/connectivityPoor.png); background-position: center center; background-repeat: no-repeat; background-size: 24px; padding: 4px 14px; }

.objectAssigned { width: 40px; background-image: url(/_images/status/overviewObjectsEdit.png); background-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: 24px; }

.trendAssigned { width: 40px; background-image: url(/_images/status/overviewTrendEdit.png); background-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: 24px; }

.deleted .keyCol,
.deleted .listCol { text-decoration: line-through; color: #999; }
.inactive .keyCol,
.inactive .listCol { color: #999; }

.hilite { background-color: #efb; }
.blulite { background-color: #def; }

.filterBox { background-color: #eee; border-bottom: 1px solid #ddd; }

.editList { width: 100%; }
.editList tr:hover { background-color:#eee; }

.editListSeparator { }
.editListSeparator .keyCol { color: #9c0; padding: 6px 20px; padding-top: 30px; }
.editListSeparator .listCol { color: #9c0; padding: 6px 20px; padding-top: 30px; }

.editListHeader { background-color: #bbb; }
.editListHeader .keyCol { border-bottom: 1px solid #ccc; padding: 0px 20px; }
.editListHeader .listCol { border-bottom: 1px solid #ccc; padding: 0px 20px; }

.editListItem { z-index: 33; }
.editListItem .keyCol { padding: 0px 20px; border-bottom: 1px solid #ccc; }
.editListItem .listCol { padding: 0px 20px; border-bottom: 1px solid #ccc; }
.editListItem .linkCol { width: 40px; }

.grid table { margin: 20px; }
.grid th { background-color: #ccc; padding: 0px 20px; text-align: center; }
.grid td { border-bottom: 1px solid #ccc; padding: 0px 20px; text-align: center; }
.grid tr:hover { background-color: #eee; color: #000; }

.systemHeader { clear: both; clear: all; background-color: #eee; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; padding: 20px; }

.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; }
.td.label { width: 280px; }

.radio { display: inline-block; width: auto; }
.radio label { width: auto; border: 1px solid #ddd; width: 24px; height: 24px; }
.radio input[type="radio"] { display: none; }
.radio input[type="radio"]:checked + label { background-color: #ddd; }

.alignLeft { text-align: left; }
.alignCenter { text-align: center; }
.alignRight { text-align: right; }

#map { border: 1px solid #ccc; height: 300px; width: 100%; padding: 0; margin: 0; z-index: 12; }
.map a { display: inline-block; padding: 0px 4px; }
.map a:hover { background-color: #eee; }

.image-link img { width: 32px; }

.overviewPlanningPreview { display: inline-block; float: right; margin: 5px; width: 24px; height: 24px; line-height: 24px; text-align: center; border: 1px solid #666; }

.checkListSeparator { font-weight: bold; color: #9c0; border-bottom: 1px solid #ccc; margin-top: 30px; }

/* Style the tab */
.Tabs { overflow: hidden; border-bottom: 1px solid #666; padding-left: 20px; }
.Tabs a { background-color: #ddd; cursor: pointer; padding: 20px 20px; line-height: 48px; height: 50px; transition: 0.5s; }
.Tabs a:hover { background-color: #ccc; }
.Tabs a.active { background-color: #666; color: #fff; }
.TabContainer { display: none; }
.TabContainer.active { display: block; }

.matrix table { }
.matrix tr:hover { background-color:#ddd; }
.matrix th { background-color: #ddd; border-bottom: 2px solid #fff; padding: 0px; padding-left: 12px; min-width: 50px; vertical-align: middle; }
.matrix td { background-color: #eee; border-bottom: 2px solid #fff; padding: 0px; padding-left: 12px; vertical-align: middle; }
.matrix input,
.matrix select,
.matrix textarea { min-width: 30px; width: 100%; margin-bottom: 0px; }
.matrix input[type="submit"] { min-width: auto; width: auto; }
.matrix button { border-left: 2px solid #fff; width: 52px; }
.matrix th button { background-color: #ccc; }
.matrix th button:hover { background-color: #bbb; }
caption { caption-side: top; color: #999; margin-top: 20px; text-align: left; margin-bottom: 6px; }

.filterYear { min-width: auto; }
.filterMonth { min-width: auto; }
.filterDay { min-width: auto; }
.dropdown { min-width: auto; }

#alertPowerSupply { display: none; position: fixed; z-index: 12000; left: 50%; margin-left: -150px; top: 50%; margin-top: -100px; width: 300px; height: 200px; background-color: #b00; color: #fff; padding: 20px; padding-left: 60px; border-radius: 8px; background-image: url(/_images/dialogs/dialogError.png); background-position: 16px 16px; background-repeat: no-repeat; background-size: 32px; -webkit-box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); }

#version { position: fixed; right: 0px; bottom: 0px; padding: 4px 10px; font-size: 0.6em; background-color: #fff; color: #000; border: 1px solid #999; opacity: 0.5; }

#layer { position: fixed; top:0px; left:0px; bottom:0px; right:0px; z-index:20000; background-color:rgba(0, 0, 0, 0.5); cursor: wait !important; }

/* The Modal (background) */

.modal { display: none; position: fixed; z-index: 1000; padding-top: 250px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); }



.modal-content { margin: auto; display: block; margin-top: -80px; width: auto; height: auto; max-width: 90vw; max-height: 75vh; min-height: 50vh; }

.close { position: absolute; top: 180px; right: 30px; background-color: transparent; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; }

.x { color: #fff; padding-left: 7px; }

.close:hover, .close:focus { color: #3a3b3c; text-decoration: none; cursor: pointer; }

/* Animations */
.modal-content { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; }

@-webkit-keyframes zoom { from { transform: scale(0) } to { transform: scale(1)} }

@keyframes zoom { from { transform: scale(0.1) } to { transform: scale(1) } }

/* --- MEDIA: Desktop ----------------------------------------------------------------- */
@media (min-width: 700px)
{
  html { font-size: 1em; }

  input, select, textarea { min-width: 300px; }

  label { display: inline-block; width: 300px; }

  fieldset { margin: 20px; }
  .content { margin: 20px; }

  .listIcon { background-position: 14px center; background-repeat: no-repeat; background-size: 32px; padding-left: 60px; }

  .preview { width: 250px; }
}

/* --- MEDIA: Smartphones ----------------------------------------------------------------- */
@media (max-width: 700px) 
{
  html { font-size: 1em; }
  body { padding-left: 60px; padding-top: 150px; font-size: 0.8em; }

  label { display: block; }

  fieldset { margin: 20px; }
  .content { margin: 20px; }

  #menu { width: 60px; }
  #menu a { height: 50px; line-height: 50px; width: 50px; padding: 0px; background-position: 13px center; background-repeat: no-repeat; background-size: 24px; }

  #menuLogo { width: 60px; height: 50px; background-color: #222; background-image: url(/_images/favicon.png); background-position: bottom center; background-repeat: no-repeat; background-size: 40px; }

  .menuText { display: none; }

  #systemMenu a { height: 50px; line-height: 50px; }

  #systemMenuOpen { width: 50px; height: 50px; background-position: right center; background-size: 50px; }
  #systemMenuOpen .menuText { display: none; }
  #systemMenuClose { width: 50px; height: 50px; width: 10px; background-position: right center; background-size: 50px; }

  #systemMenuAdd { width: 10px; height: 50px; background-position: 13px center; background-size: 24px; }
  #systemMenuEdit { width: 10px; height: 50px; background-position: 13px center; background-size: 24px; }

  #contextMenu { top: 50px; }
  #contextMenuOpen .menuText { display: none; }
  #contextMenu a { top: 50px; height: 50px; line-height: 50px; }

  #contextMenuOpen { top: 50px; width: 50px; height: 50px; background-position: right center; background-size: 50px; }
  #contextMenuClose { top: 50px; width: 50px; height: 50px; width: 10px; background-position: right center; background-size: 50px; }

  #system { left: 60px; top: 0px; height: 50px; line-height: 50px; }
  #title { left: 60px; top: 50px; height: 50px; line-height: 50px; }
  #buttons { left: 60px; top: 100px; height: 50px; line-height: 50px; }
  button,
  #buttons a { background-position: 13px 13px; background-size: 24px; line-height: 50px; height: 50px; width: 50px; }

  .iframe-container { background-size: 199px 3px; }

  #content { }

  .listCol { display: none; width: 0; height: 0; }
  .listSeparator .listCol { display: none; width: 0; height: 0; }
  .listHeader .listCol { display: none; width: 0; height: 0; }
  .listItem .linkCol { width: 20px; }

  .objectAssigned { width: 20px; }

  .listIcon { background-position: left center; background-repeat: no-repeat; background-size: 32px; padding-left: 48px; }

  .preview { width: 250px; }

  .table { display: block; }
  .tr { display: block; }
  .td { display: block; }

  .image-link img { width: 32px; }
}