/* Fri, 19 Dec 2025 20:56:29 +0100 */


/***** styles.css *****/

/* $Id: styles.css,v 1.35 2015/05/27 12:21:32 udo Exp $ */

/*******************************************************************************
 Generelle Styles
*******************************************************************************/

.rounded5 {
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}

.rounded10 {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}

.grayscale {
  -webkit-filter: grayscale(100%) brightness(100%) contrast(50%);
  filter: grayscale(100%) brightness(100%) contrast(50%);
}

.classicRoundedBox {
  border: 1px solid gray;
  background: #e0e0e0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: relative;
  margin: 12px 0px;
  padding: 5px;
}

/* nur bei HOVER sichtbar - siehe makeHoverDIV()  */
.onhover {
  visibility:hidden;
}
.hover .onhover {
  visibility:visible;
}


.biglistitem {
  border-bottom: 1px solid #888; 
  border-top: 1px solid #ddd; 
  background-color: #fff; 
}
 
.biglistitem.clickable {  
  cursor:pointer;
}

.structureman_title_inner {
  display: inline-block;
  background-color: #aaa;
  border-radius: 10px;
  color: #fff;
  font-family: Verdana, Arial;
  font-size: 16px;
  padding: 4px 10px;
}

/*******************************************************************************
 Map
*******************************************************************************/


/* UFrontend.MapBaseLayerSelectorControl */

.mplscControl {
  position : absolute;
  left : 50px;
  bottom : 5px;
  opacity : 0.66;
  padding: 5px;
}

.mplscControl:hover {
  opacity : 1;
}

.mplscBox {
  cursor: pointer;
  display : inline-block;
  width : 40px;
  height : 40px;
  border : 2px solid white;
  margin-right: 3px;  
}

.mplscBox.activeLayer {
  border : 2px solid gray;
  box-shadow: 0 0 7px 2px rgba(255, 255, 255, 0.75); 
}


/*******************************************************************************
 MediaGallery
*******************************************************************************/

              
.mediagallery_jumper {
  background-color: #cccccc;
}

.mediagallery_jumper img,
.mediagallery_sectionbox img {
  margin: 5px 6px;
}

.mediagallery_sectionbox {
  background-color: #cccccc;
  background-color: rgba(204,204,204,0.9);
  font-family: Verdana;
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  
  white-space:nowrap;

  box-shadow:         3px 3px 3px rgba(0,0,0,0.5);
  -moz-box-shadow:    3px 3px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

.mediagallery_sectionbox .item {
  padding-right: 5px;
}

.mediagallery_sectionbox a,
.mediagallery_sectionbox a:hover {
  display: block;
  text-decoration: none;
  color: black;
}

.mediagallery_sectionbox a:hover {
  background-color: white;
}

.mediagallery_sectionbox a img {
  border: 0;  
}

.mediagallery_tooltip {
  font-family: verdana;
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
  padding: 4px;
  background-color: white;
  border: 1px solid #888;

  border-radius:         5px;
  -moz-border-radius:    5px;
  -webkit-border-radius: 5px;

  box-shadow:         5px 5px 5px #888;
  -moz-box-shadow:    5px 5px 5px #888;
  -webkit-box-shadow: 5px 5px 5px #888;
}

.mediagallery_index .empty_hint {
  opacity: 0.3;
}
                                      
.mediagallery_index h1 {
  font-family: Arial;
  font-size: 12px;
  padding: 3px;
  margin: 0;
  color: white;
  background-color: #888888;
  border-bottom:2px solid black;
  border-top:1px solid white;

}

.mediagallery_index h1 img {
  position: relative;
  top: -3px;
}

.mediagallery_index h1 img {
  position: relative;
  top: -3px;
}

.mediagallery_index .thumb {
  display: inline-block; 
  width: 160px; 
  height: 160px; 
  position: relative;
  
  border: 1px solid #dddddd;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}

.mediagallery_index .thumb .title {
  position: absolute; 
  bottom: 5px;
  left: 5px;
  right: 5px;
  text-align: center;
  
  font-family: Verdana;
  font-size: 10px;
  color: #888;
}

.mediagallery_index .thumb .title span {
  background-color: rgba(242,242,247,0.8);
  border-radius: 3px;
  padding: 0 2px;
}


/*******************************************************************************
 MINI-Mediengallerie
*******************************************************************************/

.mini_media_gallery {
  position: relative;
  height: 70px;
  border: 1px solid gray;
  overflow: hidden;
  white-space: nowrap;
}

.mini_media_gallery img {
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.66);
  -moz-box-shadow:    1px 1px 4px 0px rgba(0, 0, 0, 0.66);
  box-shadow:         1px 1px 4px 0px rgba(0, 0, 0, 0.66);
}

.mini_media_gallery img:hover {
  -webkit-box-shadow: 0px 0px 8px 3px #0078a5, 0px 0px 8px 0px #0078a5 inset;
  -moz-box-shadow:    0px 0px 8px 3px #0078a5, 0px 0px 8px 0px #0078a5 inset;
  box-shadow:         0px 0px 8px 3px #0078a5, 0px 0px 8px 0px #0078a5 inset;
}

.mini_media_gallery .empty_hint {
  padding-left: 10px;
  opacity: 0.5;
}

.mini_media_gallery .commands {
  position: absolute;
  top: 20px;
  right: 5px;
  visibility: hidden;  
}

.mini_media_gallery .commands input {
  height: 30px;
  
  border-radius: 0.5em;
  color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');

  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.66);
  -moz-box-shadow:    1px 1px 4px 0px rgba(0, 0, 0, 0.66);
  box-shadow:         1px 1px 4px 0px rgba(0, 0, 0, 0.66);
  
  margin-right: 10px;   
}

.mini_media_gallery:hover .commands {
  visibility: visible;
}

/*******************************************************************************
 Login-Seite
*******************************************************************************/

body.loginpage #stage {
  /* http://www.colorzilla.com/gradient-editor/ */

  background: -moz-linear-gradient(top, rgba(79,142,215,0.91) 0%, rgba(94,153,219,0.57) 16%, rgba(172,209,238,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,142,215,0.91)), color-stop(16%,rgba(94,153,219,0.57)), color-stop(100%,rgba(172,209,238,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(79,142,215,0.91) 0%,rgba(94,153,219,0.57) 16%,rgba(172,209,238,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(79,142,215,0.91) 0%,rgba(94,153,219,0.57) 16%,rgba(172,209,238,0) 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(79,142,215,0.91) 0%,rgba(94,153,219,0.57) 16%,rgba(172,209,238,0) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e84f8ed7', endColorstr='#00acd1ee',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(79,142,215,0.91) 0%,rgba(94,153,219,0.57) 16%,rgba(172,209,238,0) 100%); /* W3C */
}

/*******************************************************************************
 Style für UFrontend.VisibilitySelectorPanel
*******************************************************************************/

/* Freiraum zu den Buttons */
.vselpanel {
  padding: 10px 4px;
  text-align: center;
}

/* punktierten Fokus-Rahmen deaktivieren (wird vom IE8 leider ignoriert,
  obwohl seit IE7 unterstützt) */
.vselpanel a,
.vselpanel a:active,
.vselpanel a:visited,
.vselpanel a:focus
{
  outline-style: none;
  margin-bottom: 10px;
}


/* Platzhalter, damit das Bild beim HOVER nicht verrückt wird */
.vselpanel a img {
  margin: 1px;
}

/* 3D Rahmen beim HOVER und wenn der Modus aktiv ist (.active class) */
.vselpanel a:hover img,
.vselpanel a.active img,
.vselpanel a.lock img  {
  margin: 0px;

  background-color:rgba(255,255,255, 0.2);


  border-width:1px;
  border-style:solid;
  border-bottom-color:#aaa;
  border-right-color:#aaa;
  border-top-color:#ddd;
  border-left-color:#ddd;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;

}

.vselpanel a.lock img {
  border-right-width:3px;
  border-right-color:#f00;
}


/* Standard-Toolbar */
.toolbar {
  font-family: verdana;
  font-size: 12px;
  color: black;
}


/* Style des Tooltip-DIVs beim HOVER */
.vsptooltip {
  font-family: verdana;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  padding: 8px;
  background-color: white;
  border: 1px solid #888;

  border-radius:         5px;
  -moz-border-radius:    5px;
  -webkit-border-radius: 5px;

  box-shadow:         5px 5px 5px #888;
  -moz-box-shadow:    5px 5px 5px #888;
  -webkit-box-shadow: 5px 5px 5px #888;
}


/* Logtexte für Alert-Events der Datenpunkte */
.dplog_alert_active {
  color: red;
}

.dplog_alert_inactive {
  color: green;
}


/*******************************************************************************
 Device Tracking
*******************************************************************************/

p.mdtr_sp_item {
  padding: 0 10px;
  margin: 0;
}

/*******************************************************************************
 Datapoint Viewer (v2)
*******************************************************************************/

.dp_graphviewer_item {  
  font-family: verdana;
  font-size: 12px;
  color: #333;
  
  position: relative;
  
  padding: 3px;
  
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.dp_graphviewer_item:hover {
  background-color: #ddd;
  color: blue;
}

.dp_graphviewer_item .color_box {
  width: 8px;
  height: 9px;
  float: left;
  margin-left: 2px;
  margin-right: 4px;
  margin-top: 4px;
  background-color: blue;
}

.dp_graphviewer_item .object_name {
  color: #777;
  font-size: 10px;
}

.dp_graphviewer_item .remove_box {
  width: 16px;
  height: 16px;
  float: right;
  background-image: url("../../static/cross_gray_8x8.png");
  background-repeat: no-repeat;
  background-position: center center;
}

.dp_graphviewer_item .remove_box:hover {
  background-image: url("../../static/cross_red_8x8.png");
}

.dp_graphviewer_item .pin_box {
  width: 16px;
  height: 16px;
  float: right;
  background-image: url("static/pins.png");
  background-position: 16px 0;
}

.dp_graphviewer_item .value_box {
  position: absolute;
  top: 2px;
  right: 36px;
  background-color: #ccf;
  padding: 1px 3px;
  border-radius: 3px;
}

.dp_graphviewer_item .pin_box.pinned {
  background-position: 0 0;
}

.dp_graphviewer_chart {
  background-image: url("../../static/bg-gradient.png")
}
                                      

table.padding_10px td, table.padding_10px th {
  padding: 10px !important;  
  /* !important, weil window.js eine spezifischere Rule enthält, die aber 
  eigentlich auf die <table> des Fensters abziehlen will und nicht auf darin
  enthaltene Content-Tabellen. */  
}     


table.intertable td[align="right"] .edit-sign {
  display: inline-block;
  width: 15px;
  height: 13px;
  margin-left: 5px;
}
table.intertable td[align="left"] .edit-sign {
  float: right;
  width: 15px;
  height: 13px;
  margin-left: 5px;
}

table.intertable td:hover .edit-sign,
table.intertable td.changed .edit-sign {
  background-image: url(/frontend/universal/static/pencil.gif);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.focusAnim {
  -webkit-animation: focusAnim_kf 3s 1 ease;
  -moz-animation: focusAnim_kf 3s 1 ease;
  -o-animation: focusAnim_kf 3s 1 ease;
}



@-webkit-keyframes focusAnim_kf {
  from { background-color: #FFFF80; }
  to { background-color: none; }
}
@-moz-keyframes focusAnim_kf {
  from { background-color: #FFFF80; }
  to { background-color: none; }
}
@-o-keyframes focusAnim_kf {
  from { background-color: #FFFF80; }
  to { background-color: none; }
}


.DPSetpointEditor .pushbutton-border {
  display: inline-block;
  border: 3px solid gray;
  border: 3px solid rgba(0,0,0,0);
  border-radius: 5px;
}

.DPSetpointEditor .pushbutton-border.active {
  border-color: rgba(0, 0, 255, 0.3)
}

.DPSetpointEditor .pushbutton {
  min-width: 100px;
  height: 30px;
}

/*******************************************************************************
 Arbeitsjournal
*******************************************************************************/

.workjournal .richcontent {
  position: relative;
  min-height: 40px;
}

.workjournal .infocell {
  white-space: nowrap;
}

.workjournal .richcontent.editing {
  background-color: white;
  padding: 5px;
}

tr.workjournal-row {
  empty-cells: show;
}

.workjournal-row > td {
  padding-left: 10px;
}

.workjournal-row > td > p {
  margin: 1em 0;
}

.workjournal-row > td.commandcell {
  border-top: none;
  opacity: 0;
}

.workjournal-row:hover > td.commandcell {
  opacity: 1;
}

.workjournal-row > td.commandcell img {
  border: 0;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0);
}

.workjournal-row > td.commandcell img:hover {
  border-top-color: white;
  border-left-color: white;
  border-right-color: gray;
  border-bottom-color: gray;
}


.workjournal-row > td {
  border-top: 1px dotted gray;
}
.workjournal-row:first-child > td {
  border-top: none;
}

.workjournal_cont {
  padding: 20px;
  text-align: center;
  font-family: Verdana, Arial;
  font-size: 12px;
  background-color: #ddd;
}