/* Overwrites */

.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
  background-color: #5E87B0;
}

.ui-header .ui-title, .ui-footer .ui-title {
  color: white;
  text-shadow: none;
}

.CMColorSettingsDiv {
  border: 1px solid gray;
  float: left;
  margin: 3px;
}

.CMButtonOverlay {
  text-align:center;
  position:absolute;
  z-index:500;
  opacity:0;
  background:none;
}

/* Header */

.CMHeaderButton {
  margin-top:1px!important;
}

.CMHeaderTitle {
  padding-top:6px!important;
}

.CMHeaderSubtitle {
  margin-bottom:2px;
  margin-top: -14px;
  font-size: 10px;
}

/* Editor */
/*td.formtable_label {
  vertical-align:top;
  border-bottom:1px solid #EEEEEE;
  padding-top:10px;
}

td.formtable_content {
  vertical-align:top;
  border-bottom:1px solid #EEEEEE;
}*/

@media (min-width:900px){
  .formtable_label {
    width:250px;
    min-height:30px;
    float:left;
    white-space:normal;
  }
 
  .formtable_content {
    overflow:hidden;
    min-height:30px;
    max-width:900px;
  }
}
 
@media (max-width:899px){
  .formtable_label {
    white-space:normal;
  }
 
  .formtable_content {
  }
}

.cm_collapsible_view_editor > h1 > a {
  padding: 2px;
  padding-left: 40px;
}

/* View Title */
.vTitleItem {
  border:1px solid gray;
  margin:2px;
  margin-top:10px;
  background-color:#FFFFFF;
  border-radius:3px;
  color: white;
  text-shadow: none;
  padding: 5px;
  text-align: center;
}

.cmWebCam
{
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

/*******************************************************
                    System Messages
*******************************************************/

.statusPanelHeader {
  padding:8px;
  background-color:#EDEDED;
  border-bottom:1px solid #CCCCCC;
}

.statusPanelItem {
  padding-top:1px;
  padding-bottom:1px;
  border-bottom:1px solid #CCCCCC;
}

.statusPanelItemTable {
  margin-left:2px;
  margin-right:2px;
}

.statusPanelItemImage {
  vertical-align:middle;
  width:32px;
  padding-right:2px;
}

/*******************************************************
                          Fonts

 Außer für Kacheln, dort werden kleinere Fonts eingesetzt
 welche mit der Kachel besser skalieren.
*******************************************************/

.displayInline { display:inline-block; } /* Class to display text together instead of wrapping. */

.fontInfo { color:#2C567F; font-style: italic; }
.fontOK { color:#008000; font-style: italic; }
.fontWarning { color:#BB6600; font-style: italic; }
.fontError { color:#CC0000; font-style: italic; font-weight:bold; }
.fontGrey { color:#BBBBBB; font-style: italic; }

@media (min-width:1801px){
  .fontExtraLarge {
    font-size: 26px;
  }
  .fontLarge {
    font-size: 20px;
  }
  .fontMedium {
    font-size: 16px;
  }
  .fontSmall {
    font-size: 12px;
  }
}

@media (max-width:1800px){
  .fontExtraLarge {
    font-size: 26px;
  }
  .fontLarge {
    font-size: 20px;
  }
  .fontMedium {
    font-size: 16px;
  }
  .fontSmall {
    font-size: 12px;
  }
}

@media (max-width:1350px){
  .fontExtraLarge {
    font-size: 24px;
  }
  .fontLarge {
    font-size: 18px;
  }
  .fontMedium {
    font-size: 15px;
  }
  .fontSmall {
    font-size: 11px;
  }
}

@media (max-width:639px){
  .fontExtraLarge {
    font-size: 22px;
  }
  .fontLarge {
    font-size: 17px;
  }
  .fontMedium {
    font-size: 13px;
  }
  .fontSmall {
    font-size: 10px;
  }
}

/*******************************************************
                    View List Item
*******************************************************/

.vItemListContainer {
  width: 100%;
}

/*******************************************************
                    View Tile Item
*******************************************************/

@media (min-width:1801px){
  .vItemTileStackImgContainerSize {
    width: 160px;
    height: 160px;
  }

  .vItemTileStackImgSize {
    max-width: 160px;
    max-height: 160px;
  }

  .vItemTile {
    width:160px;
    margin:2px;
    padding:5px;
  }

  .vItemTileTitle {
    height:47px;
  }

  .fontTileUltraLarge {
    font-size: 30px;
  }
  .fontTileExtraLarge {
    font-size: 25px;
  }
  .fontTileLarge {
    font-size: 22px;
  }
  .fontTileMedium {
    font-size: 19px;
  }
  .fontTileSmall {
    font-size: 17px;
  }
}

@media (max-width:1800px){
  .vItemTileStackImgContainerSize {
    width: 140px;
    height: 140px;
  }

  .vItemTileStackImgSize {
    max-width: 140px;
    max-height: 140px;
  }

  .vItemTile {
    width:140px;
    margin:2px;
    padding:4px;
  }

  .vItemTileTitle {
    height:42px;
  }

  .fontTileUltraLarge {
    font-size: 28px;
  }
  .fontTileExtraLarge {
    font-size: 23px;
  }
  .fontTileLarge {
    font-size: 20px;
  }
  .fontTileMedium {
    font-size: 17px;
  }
  .fontTileSmall {
    font-size: 15px;
  }
}

@media (max-width:850px){
  .vItemTileStackImgContainerSize {
    width: 120px;
    height: 120px;
  }

  .vItemTileStackImgSize {
    max-width: 120px;
    max-height: 120px;
  }

  .vItemTile {
    width:120px;
    margin:2px;
    padding:3px;
  }

  .vItemTileTitle {
    height:38px;
  }

  .fontTileUltraLarge {
    font-size: 26px;
  }
  .fontTileExtraLarge {
    font-size: 21px;
  }
  .fontTileLarge {
    font-size: 18px;
  }
  .fontTileMedium {
    font-size: 15px;
  }
  .fontTileSmall {
    font-size: 13px;
  }
}

@media (max-width:450px){
  .vItemTileStackImgContainerSize {
    width: 87px;
    height: 87px;
  }

  .vItemTileStackImgSize {
    max-width: 87px;
    max-height: 87px;
  }

  .vItemTile {
    width:87px;
    margin:2px;
    padding:2px;
  }

  .vItemTileTitle {
    height:27px;
  }

  .fontTileUltraLarge {
    font-size: 21px;
  }
  .fontTileExtraLarge {
    font-size: 16px;
  }
  .fontTileLarge {
    font-size: 13px;
  }
  .fontTileMedium {
    font-size: 10px;
  }
  .fontTileSmall {
    font-size: 8px;
  }
}

.vItemTileWorkingIcon {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 37%;
  opacity:0;
}

.vItemTileLink, .vItemLargeLink {
  text-decoration:none!important;
  color:black!important;
  font-weight:normal!important;
}

.vItemTile {
  border:1px solid gray;
  border-radius:3px;
  background-color:#FFFFFF;
}

.vItemTileStackImgContainer {
  position:relative;
  /*float: left;*/
}

.vItemTileStackImg {
  position: absolute;
}

/*.vItemTileStackImgBackground {
  position: absolute;
  border-radius:3px;
}*/

.vItemTileStackImgText {
  position: absolute;
  color: #FFFFFF;
  display:table;
  overflow:hidden;
}

.vItemTileTitle {
  padding-top:5px;
  text-align:center;
  overflow:hidden;
/*  white-space:nowrap;
  text-overflow: ellipsis;*/
}

/*******************************************************
                    View Large Item
*******************************************************/

@media (min-width:1801px){
  .vItemLargeContainer {
    width: 25%;
  }

  .vItemLargeLeftWidth {
    width: 90px;
  }

  .vItemLarge {
    min-height: 90px;
  }

  .vItemLargeStackImgSize {
    width: 80px;
    height: 80px;
  }
}

@media (max-width:1800px){
  .vItemLargeContainer {
    width: 33.33%;
  }

  .vItemLargeLeftWidth {
    width: 90px;
  }

  .vItemLarge {
    min-height: 90px;
  }

  .vItemLargeStackImgSize {
    width: 80px;
    height: 80px;
  }
}

@media (max-width:1350px){
  .vItemLargeContainer {
    width: 50%;
  }

  .vItemLargeLeftWidth {
    width: 80px;
  }

  .vItemLarge {
    min-height: 80px;
  }

  .vItemLargeStackImgSize {
    width: 70px;
    height: 70px;
  }
}

@media (max-width:749px){
  .vItemLargeContainer {
    width: 100%;
  }

  .vItemLargeLeftWidth {
    width: 70px;
  }

  .vItemLarge {
    min-height: 70px;
  }

  .vItemLargeStackImgSize {
    width: 60px;
    height: 60px;
  }
}

/* Min-height muss so groß wie das Bild sein: */
.vItemLarge {
  border:1px solid gray;
  margin:2px;
  background-color:#FFFFFF;
  border-radius:3px;
}

.vItemLargeLeft {
  position:relative;
  float: left;
  min-height: 10px;
}

.vItemLargeStackImg {
  position: absolute;
  left: 5px;
  top: 5px;
}

/*.vItemLargeStackImgBackground {
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius:3px;
}*/

.vItemLargeStackImgText {
  position: absolute;
  left: 5px;
  top: 5px;
  color: #FFFFFF;
  display:table;
  overflow:hidden;
}

.vItemLargeRight {
  overflow: hidden;
  min-height: 10px;
  padding-left: 5px;
  padding-right: 5px;
}

.vItemLargeTitle {
  padding-top:5px;
  padding-bottom:5px;
  margin:0px;
}

.vItemLargeSubTitle {
  padding-top:2px;
  padding-bottom:2px;
  margin:0px;
  margin-bottom:8px;
}

/*******************************************************
                 View Large Wide Item
*******************************************************/

@media (min-width:1801px){
  .vItemLargeWideContainer {
    width: 25%;
  }

  .vItemLargeWideLeftWidth {
    width: 75px;
  }

  .vItemLargeWide {
    min-height: 75px;
  }

  .vItemLargeWideStackImgSize {
    width: 65px;
    height: 65px;
  }
}

@media (max-width:1800px){
  .vItemLargeWideContainer {
    width: 33.33%;
  }

  .vItemLargeWideLeftWidth {
    width: 75px;
  }

  .vItemLargeWide {
    min-height: 75px;
  }

  .vItemLargeWideStackImgSize {
    width: 65px;
    height: 65px;
  }
}

@media (max-width:1350px){
  .vItemLargeWideContainer {
    width: 50%;
  }

  .vItemLargeWideLeftWidth {
    width: 70px;
  }

  .vItemLargeWide {
    min-height: 70px;
  }

  .vItemLargeWideStackImgSize {
    width: 60px;
    height: 60px;
  }
}

@media (max-width:639px){
  .vItemLargeWideContainer {
    width: 100%;
  }

  .vItemLargeWideLeftWidth {
    width: 65px;
  }

  .vItemLargeWide {
    min-height: 65px;
  }

  .vItemLargeWideStackImgSize {
    width: 55px;
    height: 55px;
  }
}

/* Min-height muss so groß wie das Bild sein: */
.vItemLargeWide {
  border-bottom:1px solid gray;
  margin:2px;
  background-color:#FFFFFF;
  border-radius:none;
}

.vItemLargeWideLeft {
  position:relative;
  float: left;
  min-height: 10px;
}

.vItemLargeWideStackImg {
  position: absolute;
  left: 5px;
  top: 5px;
}

/*.vItemLargeWideStackImgBackground {
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius:3px;
}*/

.vItemLargeWideStackImgText {
  position: absolute;
  left: 5px;
  top: 5px;
  color: #FFFFFF;
  display:table;
  overflow:hidden;
}

.vItemLargeWideRight {
  overflow: hidden;
  min-height: 10px;
  padding-left: 5px;
  padding-right: 5px;
}

.vItemLargeWideTitle {
  padding-top:5px;
  padding-bottom:5px;
  margin:0px;
}

.vItemLargeWideSubTitle {
  padding-top:2px;
  padding-bottom:2px;
  margin:0px;
  margin-bottom:8px;
}

/*******************************************************
                       Floor View
*******************************************************/

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

/*******************************************************
                      View Popup
*******************************************************/

/*#DevicePopup-popup {
  width: 600px;
}*/


/*******************************************************
                      Settings Grid
*******************************************************/

/* Settings Grid */
@media (max-width: 639px){
  .settingsGrid[data-columns]::before {
    content: '1 .settingsColumn.settingsSize-1of1';
  }
  /*.settingsItemInner { border-color:red!important; }*/
}
@media (min-width: 640px) and (max-width: 1350px) {
  .settingsGrid[data-columns]::before {
    content: '2 .settingsColumn.settingsSize-1of2';
  }
  /*.settingsItemInner { border-color:green!important; }*/
}
@media (min-width: 1351px) {
  .settingsGrid[data-columns]::before {
    content: '3 .settingsColumn.settingsSize-1of3';
  }
  /*.settingsItemInner { border-color:blue!important; }*/
}

/* Again, you’re free to use and define the classes: */
.settingsColumn { float: left; }
.settingsSize-1of1 { width: 100%; }
.settingsSize-1of2 { width: 50%; }
.settingsSize-1of3 { width: 33.333%; }

.settingsItemInner {
    position: relative;
    padding: 3px;
    border: 1px solid #888888;
    border-radius: 3px;
    margin: 5px;
}

/*******************************************************
  Breiten für verschiedene List Items im View Editor 
*******************************************************/

@media (min-width: 1801px)
{ /* breite Browserfenster */
  .deviceListItem {
    width:20%;
    float:left;
  }
  .allowedViewListItem {
    width:20%;
    float:left;
  }
  .viewEditListItem {
    width:20%;
    float:left;
  }
  .viewEditorGraphicListItem {
    width:20%;
    float:left;
  }
  .thumbPreview
  {
    max-height: 70px;
    max-width: 70px;
  }
}
@media (max-width: 1800px)
{ /* Darstellung auf Netbooks */
  .deviceListItem {
    width:25%;
    float:left;
  }
  .allowedViewListItem {
    width:25%;
    float:left;
  }
  .viewEditListItem {
    width:25%;
    float:left;
  }
  .viewEditorGraphicListItem {
    width:25%;
    float:left;
  }
  .thumbPreview
  {
    max-height: 60px;
    max-width: 60px;
  }
} 
@media (max-width: 1300px)
{ /* mobile Geräte */
  /* Device List Item */
  .deviceListItem {
    width:33.33%;
    float:left;
  }
  /* Allowed View List Item (User) */
  .allowedViewListItem {
    width:33.33%;
    float:left;
  }
  /* View Editor Item */
  .viewEditListItem {
    width:33.33%;
    float:left;
  }
  /* Grafik im View Editor und Grafik Uploader */
  .viewEditorGraphicListItem {
    width:33.33%;
    float:left;
  }
  .thumbPreview
  {
    max-height: 50px;
    max-width: 50px;
  }
}
@media (max-width: 1000px)
{ /* mobile Geräte */
  /* Device List Item */
  .deviceListItem {
    width:50%;
    float:left;
  }
  /* Allowed View List Item (User) */
  .allowedViewListItem {
    width:50%;
    float:left;
  }
  /* View Editor Item */
  .viewEditListItem {
    width:50%;
    float:left;
  }
  /* Grafik im View Editor und Grafik Uploader */
  .viewEditorGraphicListItem {
    width:50%;
    float:left;
  }
  .thumbPreview
  {
    max-height: 40px;
    max-width: 40px;
  }
}
@media (max-width: 639px)
{
  /* Device List Item */
  .deviceListItem {
    width:100%;
    float:left;
  }
  /* Allowed View List Item (User) */
  .allowedViewListItem {
    width:100%;
    float:left;
  }
  /* View Editor Item */
  .viewEditListItem {
    width:100%;
    float:left;
  }
  /* Grafik im View Editor und Grafik Uploader */
  .viewEditorGraphicListItem {
    width:100%;
    float:left;
  }
  .thumbPreview
  {
    max-height: 30px;
    max-width: 30px;
  }
}

/*******************************************************
                Easy Display Tabelle
*******************************************************/

.easyDisplayTable
{
  display:table;
}

.easyDisplayTableGfxCell
{
  display:table-cell;
  padding: 2px;
  vertical-align: middle;
}

.easyDisplayTableTextCell
{
  display:table-cell;
  padding: 2px;
  vertical-align: middle;
}

.easyDisplayIconSelection
{
  width: 40px;
  border: 1px solid gray;    
}

/*******************************************************
                      Save Icon
*******************************************************/

.ui-icon-cmsave:after
{
  background-image: url("/images/save.png");
  background-size: 16px 16px;
}

/*******************************************************
              Was kann man hier löschen?             
*******************************************************/

/*@media (min-width: 1015px)
{
  .ui-li-thumb
  {
    left: 5px;
    top: 5px;
    max-height: 80px;
    max-width: 80px;
    position: absolute;
  }

  .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit,.ui-li-static.ui-li-has-thumb
  {
    padding-left: 95px;
    min-height: 68px;
  }
}
@media (min-width: 410px) and (max-width: 1015px)
{
  .ui-li-thumb
  {
    left: 5px;
    top: 5px;
    max-height: 60px;
    max-width: 60px;
    position: absolute;
  }

  .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit,.ui-li-static.ui-li-has-thumb
  {
    padding-left: 75px;
    min-height: 48px;
  }
} 
@media (max-width: 410px)
{
  .ui-li-thumb
  {
    left: 5px;
    top: 5px;
    max-height: 40px;
    max-width: 40px;
    position: absolute;
  }

  .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit,.ui-li-static.ui-li-has-thumb
  {
    padding-left: 55px;
    min-height: 28px;
  }
}

.ui-li-heading
{
  margin: 0px;
  margin-bottom: 5px;
}

.longerFlip .ui-slider-switch { width: 50em; }
*/