﻿

.editor-tab-waiting-spinner 
{
    display: inline-block;
    margin: 30px 10px 0px 30px;
}
.editor-tab-waiting-text
{
    display: inline-block;
    top: -10px;
    position: relative;
}
.editor-from-item /* TODO MOVE? */
{
    background:#d9ecf9;
    border:solid 1px #999;
    padding:6px;
    margin:10px 0px;
    font-size:12px;
    line-height:22px;
}
/* */

[studioview='Editor'] .studio-canvas-main
{
    margin-bottom: initial;
    min-height: initial;
    padding: initial;
    border-radius: initial;
    box-shadow: initial;
    background: initial;
    width: initial;
    float: initial;
} 
[studioview='Editor'] .studio-canvas 
{
    margin:initial;
    width:initial;
    left:initial;
    position:relative;
}

.tab-content
{
    padding-top:20px;
}

/* ------------------ */
.header-name
{
    padding-right:20px;
    /*border-left:solid 1px #ccc;*/
    padding-left:20px;
    display:inline-block;
    max-width:100px;
    overflow:hidden;text-overflow: ellipsis;white-space: nowrap;
}
.header-left
{
    left:177px;
}
.header-right
{
    right:202px;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
span:focus {
    outline: none;
    border: 0;
 }
div:focus {
    outline: none;
    border: 0;
 }

.studio-blue
{
    background:#09f;
    color:#fff;
}
.studio-help-btn
{
    background: #3a8a46;
    color: #fff;
}


.ScreenTypePicker { margin:10px 0px 20px 0px; }

.ScreenSection { 
    clear:both; 
    /*border-top: dotted 1px #888;*/
    padding-top: 5px;
    margin-top: 2px;
}
.ScreenSection[setting_count='0'] {
    display:none;
}
.ScreenSection[is_selected='true'] .ScreenRoleSettingsHead
{
    background:#cfc;
}
/*.ScreenRole .RoleLabel{ 
    display:none;
}*/
.SectionText {
    float:left;
    font-weight:bold;
    margin-left:8px;
}
.ScreenSection .SectionLabel[role_label]:not([role_label=""]) {
    display:inline-block;
    font-size: 18px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
    text-align: center;
    padding: 0px;
    font-style: normal;
    float:left;
    margin: 3px;
    position: relative;
    top: -4px;
    left: -4px;
    color: #000;
    background: #FFEC48;
    box-shadow: rgba(0,0,0,1) 0px 0px 4px;
    border: solid 1px #000;
}
.SectionIcon
{
    float:right;
    color:#999;
    margin-right:8px;
}
#MqSelectedSection { margin-bottom: 30px; }

.ScreenSectionSettings {     
    margin-top: 11px;
    padding-top: 10px;
    border-top: solid 1px #aaa; 
}
.ScreenRoleSettingsHead
{
    background:#eee;
    height:22px;
}
[selected_section='All'] [screen_section='All'] { display:none; }

.tab-loading
{
    padding:50px;
    font-size:18px;
}
.tab-header
{
    font-size:22px;margin-bottom:15px;margin-top:10px;
    line-height:36px;
}
.tab-header .studio-help-btn
{
    float:right;
}
.btn.manage-set-button
{
        color: #000;
    background-color: #ffc630;
    border-color: #bdbdbd;
}

#MqLevelCheckboxes{
    display:block;
    margin-bottom:10px;
}
#MqLevelCheckboxes label {
    font-weight:normal;
    font-size:11px;
}
.edit-site-frame
{
     float:left;
     width:840px;
}
#MqFrame
{
    margin:5px;float:left;border:none;
}
.MqNotLoggedIn
{
    clear:both;
    margin:10px 0px 20px 0px;
    padding:4px;
    background:#ffc;
    font-size:12px;
}
[screens_loaded='false'] .edit-site-header {
    height:0px;
}
.edit-site-header
{
    float: left;
    height: 37px;
    width: 775px;
    margin-top: 5px;
    transition:height 1s;
}
[screens_loaded='false'] .edit-site-settings {
    /*margin-top:50px;*/
}
.edit-site-settings {
    float: left;
    width: 512px;
    /*height: 653px;*/
    margin-top: 5px;
    border-radius: 20px;
    padding: 0px 5px 0px 5px;
    transition: height 1s, margin-top 1s;
    /*background-image:url('/images/bgtest3.jpg');*/
    background: #3693cc;
}
.edit-site-settings-header {
    height: 36px;
    color: #fff;
    font-size: 22px;
    padding: 0px 12px;
    margin-top: 10px;
    line-height: 38px;
    transition: all 300ms ease-in-out;
}
.edit-help-footer {
    height: 30px;
    line-height: 30px;
    color: #fff;
    margin-left: 10px;
}
.edit-help-footer a
{
    color:#fff;
}
.edit-site-functions
{
    float: right;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    margin: -5px -2px;
}

.site-title
{
    font-size: 18px;
    width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    margin-left: 7px;
    margin-top: 2px;
}
[login_ok='false'] .site-title
{
    width:250px;
}

.site-title-building
{
    position:absolute;
    top: -3px;
    left: 11px;
    font-size:11px;
}
.site-header-url
{
    float:left;
    margin:10px;
}
.site-header-screens
{
    float:left;
    margin-left:20px;
}
.header-screen-buttonsx
{
    margin:8px 0px 0px 10px;
}

.header-screen-button{
    width: 144px;
    float: left;
    margin-right: 5px;
    padding: 3px;
    font-size: 13px;
    line-height: 30px;
    background:#fff;
    border: solid 1px #ccc;
    height: 38px;
    border-radius: 18px;
    position:relative;
}
.screntype-text{
    position:absolute;
    left:38px;
    top:4px;
    width:100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-screen-button:focus {
    outline: none;
 }
.header-screen-button[is_selected='true']
{
    border: solid 1px #696969;
    background: #ffd;
}
.header-screen-button .screen-selected-arrow
{
    display:none;
}
.header-screen-button[is_selected='true'] .screen-selected-arrow
{
display: block;
    position: absolute;
    left: 64px;
    top: 27px;
    width: 21px;
    height: 21px;
    background: #fff;
    border-radius: 10px;
    border:solid 1px #000;
}
.header-screen-button .screen-selected-arrow i
{
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 18px;
}
.edit-site .screentype-icon
{
    background:#090;
    width:30px;
    height:30px;
    border-radius:15px;
    display:inline-block;
    margin-right:3px;
}
.edit-site .screentype-icon img
{
    width: 24px;
    height: 24px;
    margin-left: 2px;

}
.site-locked
{
    color:#fff;
    font-size:18px;
    padding-left:20px;
}
/* ------------------ CONTENT ----------------- */

.content-display
{
    background: #09F;
    padding: 3px 6px;
    color: #fff;
    font-size: 20px;
    min-height:44px;
    min-height: 44px;
    line-height: 36px;
    border: solid 2px #000;
}
.content-limit
{
    margin:0px 0px;
    font-size:12px;
    line-height:15px;
    clear:both;
    border-top:solid 1px #ccc;
    padding: 1px 0px;
}
.limit-toolong
{

}
.limit-message
{

}
.limit-head
{
    margin-top:10px;
    font-weight:bold;
}
.limit-bar-area
{
    margin-bottom:10px;
    position:relative;
    height:26px;
   
    /*background: #c3e7ff;*/
}
.limit-ratio
{
    font-size:11px;
    text-align:left;
    position:absolute;
    left:6px;
    top:0px;
    line-height:21px;
    /*background:#eee;*/
    height:21px;
    color:#000;
    padding-right:10px;
}
.limit-bar-outline
{
    position:absolute;
    left:20px;
    top:2px;
    width:236px;
    height:22px;
    border:solid 1px #999;
    background:#fff;
    border-radius:8px;
}
.limit-bar
{
    width:10px;
    height:18px;
    position:absolute;
    top:1px;
    left:1px;
    background-color:#b2e0ff;
    transition:width ease-out 1s;
    border-radius:6px;
}
.limit-bar-overflow{
    position:absolute;
    top:4px;
    left:234px;
    color:#fff;
}
.limit-bar-icon
{
    position:absolute;
    top:6px;
    left:0px;
    width:17px;
    text-align:right;
}
[limit_status='ok'][limit_type='data'] .limit-bar
{
    background-color:#b2e0ff;
}
[limit_status='ok'][limit_type='space'] .limit-bar
{
    background-color:#b2e0ff;
}

[limit_status='warning'][limit_type='data'] .limit-bar
{
    background-color:#db840b;
}
[limit_status='over'][limit_type='data'] .limit-bar
{
    background-color:#900;
}
[limit_status='warning'][limit_type='space'] .limit-bar
{
    background-color:#a7a563;
}
[limit_status='over'][limit_type='space'] .limit-bar
{
    background-color:#b06060;
}
[limit_status='over'] .limit-ratio { color:#fff; }
[limit_status='warning'] .limit-ratio { color:#fff; }
[limit_status='warning'][limit_type='richtext'] .limit-ratio { color:#000; }
[limit_status='over'][limit_type='richtext'] .limit-ratio { color:#000; }

.content-textarea
{
    height:180px;
    transition:height 1s;
    background: #E4FBFF;
    border: solid 2px #09F;
}
[box_size='small'] .content-textarea
{
    height:30px;
}
[box_size='medium'] .content-textarea
{
    height:90px;
}
[box_size='large'] .content-textarea
{
    height:180px;
}

.content-help
{
    margin-top:50px;
    font-size:12px;
}
.content-save
{
    float:right;
}
.content-title
{
    float:left;
    padding-top:3px;
    width: 390px;
}
.content-save .fa-check
{
    color:#595;
}
.content-saved 
{
    float:right;
    color:#fff;
    font-size:15px;
}


/* ------------- TEXT ANGULAR ------------- */

.rich-text { font-size:16px; margin-bottom:5px; }

.rich-text .btn-group {
background: rgba(0,0,0,0.2);
    margin-left: 6px;
    width: 448px;
}

.rich-text .btn { display:none; }



/*.rich-text [name='italics'].btn { display:inline-block; }*/

[limit_type='space'] .rich-text [name='bold'].btn { display:inline-block; }
[limit_type='space'] .rich-text [name='italics'].btn { display:inline-block; } 
[limit_type='space'] .rich-text [name='clear'].btn { display:inline-block; } 

[limit_type='data'] { }

/*  ['p', 'bold', 'italics', 'ul', 'ol', 'redo', 'undo', 'clear'],*/

[limit_type='richtext'] .rich-text .btn { display:inline-block; }

[limit_type] .ta-scroll-window > .ta-bind, [limit_type] .ta-scroll-window.form-control
{
    min-height:150px;
}

[limit_type='data'] .ta-scroll-window > .ta-bind, [limit_type='data'] .ta-scroll-window.form-control
{
    min-height:50px;
    height:50px;
    max-height:50px;
}


.content-savebar
{
    height:40px;
}

/* ------------ CROPPER -------------- */

.slim-btn-upload { display:none; }
.slim-btn-download { display:none; }

#cropper-preview, #cropper-transform-preview { max-width:100%;max-height:105px; }
#cropper-canvas { display:none; }

.cropper-question
{
    font-size:18px;
    margin:10px 0px;
    padding-top:10px;
    border-top:solid 1px #ccc;
    position:relative;
    text-align:center;
}
.cropper-question-option
{
    margin:3px 0px;
    font-size:14px;
}

/* hide icon buttons */
.cropper-edit-area .slim-btn {
    width:auto;
    font-size:1em;
    padding: 0 1em;
    border-radius: 1em;
    background-image: none;
}
.cropper-new-area .slim-btn {
    width:auto;
    font-size:1em;
    padding: 0 1em;
    border-radius: 1em;
    background-image: none;
}
.slim-btn-remove
{
    display:none;
}
.cropper-header
{
    margin:10px 0px;
    padding-top:10px;
    border-top:solid 1px #ccc;
    line-height:36px;
    font-size:18px;
}
.cropper-header .btn
{
    float:right;
}
.image-edit-header
{
    font-size:18px;
}
.image-edit-header .image-edit-filename
{
    float:right;
    background:#999;
    color:#fff;
    padding:1px 5px;
    font-size:11px;
}
.image-new-filename
{
    margin:20px 0px;
    text-align:center;
}
.image-new-filename input
{
    width:100px;
}
.image-size-warning
{
    color:#f66;
}
/*.edit-image-preview
{
    float:left;
    width:175px;

}
.edit-image-specs
{
    float:right;
    width:255px;

}*/
.image-preview-area
{
    height:160px;
    width:100%;
}
.cropper-new-container, .cropper-edit-container
{
    /*margin-bottom:60px;*/
}
[upload_ready='false'] .slim
{
    border:solid 5px #09f;
}
.image-specs-description {
    font-weight:bold;
}
.image-specs-dimensions
{
    font-size:12px;
    margin-top:10px;
}
.edit-image-row
{
    clear:both;
    border-top:solid 1px #ccc;
    margin-top:5px;
    padding-top:5px;
    min-height:65px;
}
.edit-image-col
{
    display:inline-block;
    width:145px;
    float:left;
    padding-bottom:10px;
    margin-right:5px;
}
.edit-image-left
{
    width:175px;
    float:left;
        text-align:right;
}
.edit-image-right
{
    width:245px;
    float:right;
    margin-left:10px;
}
/*.cropper-option-hider
{
    position:absolute;
    width:100%;
    height:50px;
    background:#fff;
    display:block;
}
[cropper_mode='unknown'] .cropper-option-hider
{
    display:none;
}*/

/*.cropper-question-option{
    visibility:hidden;
}
[cropper_mode='unknown'] .cropper-question-option{
    visibility:visible;
}*/

[screens_loaded='true'] md-content
{
    min-height:580px;
}
.edit-site md-content
{
    height:488px;
}
md-content .md-tab
{
    padding: 12px 9px;
}
md-content md-tabs .md-tab.md-active {
    color: #fff;
    background: #3693cc;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
md-content md-tabs md-ink-bar
{
    background:#000;
}
.edit-site-header-icon
{
    float: left;
    font-size: 16px;
    color: #fff;
    margin-left: 14px;
}
.edit-site-header-icon:hover
{
    color:#fff;
}
.edit-site-exit-message {
    position: absolute;
    left: 33%;
    top: 200px;
    color: #000;
    text-align: center;
    font-size: 12px;
    line-height: 128px;
    background: #e6e6e6;
    padding: 10px;
    width: 275px;
    height: 160px;
    border: solid 2px #3693cc;
    border-radius: 12px;
    box-shadow: 0px 4px 10px 3px #333;
    z-index: 3;
}
.edit-site-exit-message-header {
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    top: 0;
    background: #3693cc;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
}
.edit-site-exit-message .btn-success {
    position: absolute;
    bottom: 12px;
    right: 20px;
    width: 80px;
}
.edit-site-exit-message .btn-danger {
    position: absolute;
    bottom: 12px;
    left: 20px;
    width: 80px;
}
/* ------- Custom Tabs ------- */
.edit-tabs-wrap {
    /*width: 502px;*/
    background: rgb(250,250,250);
    padding: 16px 16px 0px 16px;
    position: relative;
    /*height: 580px;*/
}
.edit-tabs {
    height: 48px;
    width: 502px;
    margin: -16px;
    /*border-top: 1px solid #BBB;*/
}
.edit-tabs-body {
    width: 486px;
    height: 530px;
    overflow: auto;
    padding: 0px 10px 0px 0px;
    transition: all ease-in-out 600ms;
}
.edit-tabs-body--loading {
    height: 444px;
}
.edit-tab {
    position: relative;
    width: 20%;
    height: 48px;
    float: left;
    background: none;
    color: #888;
    padding: 5px 8px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0px 1px 2px 0px #ddd;
    transition: all ease-in-out 300ms;
}
.edit-tab:first-child{
    border-bottom-left-radius: 0;
}
.edit-tab:last-child {
    border-bottom-right-radius: 0;
}
.edit-tab:hover{
    background: #bbb;
    /*border-bottom: 2px solid #666;*/
    color: white;
    box-shadow: 0px 1px 1px 0px #bbb;
}
.edit-tab-icon {
    float: left;
    line-height: 36px;
    margin-left: 3px;
}
.edit-tab-label {
    float: left;
    text-align: left;
    padding: 2px 0px 0px 10px;
    line-height: 16px;
    font-size: 12px;
}
.edit-tab-label--single-line {
    line-height: 32px;
}
[tab-selected='true'].edit-tab {
    background: #3693cc;
    color: #fff;
    /*border-bottom: 2px solid #222;*/
    box-shadow: none;
}

/* ---------------------- */

.autosave-message{

}
.autosave-message.ng-hide {
  transition:0.25s linear all;
  opacity:0;
}

.set-manager
{
    position: absolute;
    z-index:2;
    top: 240px;
    left: 240px;
    width: 801px;
    height: 586px;
    background: #eee;
    padding: 5px;
    border: solid 1px #000;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
/*.set-manager[current_set='indicators']
{
    width:560px;
}
.set-manager[set_layout='slides']
{
    width:560px;
}
.set-manager[set_layout='slides'] .item-list
{
    width:183px;
}
.set-manager[set_layout='slides'] .item-configure
{
    width:344px;
}*/
.set-table, .set-table thead, .set-table tbody
{
    width: 750px;
    margin-left: 10px;
}
.set-header
{
    background: #000;
    color: #fff;
    font-size: 18px;
    height: 36px;
    line-height: 36px;
    padding-left: 10px;
    cursor: move;
    border-bottom: solid 1px #cacaca;
}
.set-header .btn
{
    float:right;
    margin:3px 3px 0px 0px;
}
.set-body
{

}
.set-rows
{
    width:100%;
    height:400px;
    overflow-y:auto;
    display:block;
}
.set-rows tr
{
    clear:both;
}
.set-row { clear:both; }
.set-row.row-h-50 .set-col { height:50px; }
.set-row.row-h-75 .set-col { height:75px; }
.set-row.row-h-100 .set-col { height:100px; }
.set-row.row-h-125 .set-col { height:125px; }
.set-row.row-h-200 .set-col { height:200px; }
.set-col
{
    width:70px;
    display:inline-block;
    border-bottom:solid #ccc 1px;
    margin-right:2px;
    height:30px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.set-col.col-w-25 { width:25px; }
.set-col.col-w-100 { width:100px; }
.set-col.col-w-125 { width:125px; }
.set-col.col-w-200 { width:200px; }
.set-col.col-a-centre { text-align:center; }
.set-col.col-a-right { text-align:right; }
.set-close
{
    position:absolute;
    right:8px;
    top:8px;
}

.set-col .text-edit-link
{
    width:100%;    
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-settings {
    margin-bottom:30px;
}
.item-settings-header, .item-list-header
{
    margin-bottom: 8px;
    border-bottom: solid 1px #999;
    font-weight: bold;
    clear: both;
    padding-top: 0px;
    padding: 3px 9px;
    background: #add9f5;
}
.item-list {
    float:left;
    margin:10px;
    width:230px;
    padding-top:40px;    
    max-height: 527px;
    overflow-y: auto;
}

.list-item {
    width:100%;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height:28px;
}
[compact_margin='true'] .list-item
{
    line-height:21px;
    font-size:12px;
}
.list-item i { color:#eee; }
[list_item_selected='true'].list-item { font-weight:bold; }
[list_item_selected='true'].list-item i { color:#09f; }

.item-configure, .set-help
{
    float: left;
    width: 538px;
    height: 538px;
    overflow-y: auto;
    padding: 10px;
    background:#fff;
    box-shadow: -10px 2px 15px rgba(0,0,0,0.2);
}
.set-help
{
    padding:20px;
}
.item-configure-unselected
{
    background: #e3f2fb;
    margin-top: 225px;
    text-align: center;
    padding: 17px;
    font-style: italic;
}
.item-configure-intro
{
    position:relative;
}
.item-configure-intro > div
{
    position:absolute;
    background: #ffeab1;
    font-style: italic;
    padding:20px;
}
.configure-intro-guide
{
    top: 4px;
    left: 322px;
    width: 187px;
    height: 100px;
}
.configure-intro-settings
{
    top: 57px;
    left: 10px;
    width: 200px;
    height: 100px;
}
.configure-intro-item
{
    top:250px;
    left:10px;
    width:200px;
    height:100px;
}
.item-configure-header
{
    font-size: 24px;
    background: #828282;
    color: #fff;
    padding: 3px 10px;
    margin-bottom: 10px;
    border-bottom: solid 1px #ccc;
    text-shadow: 0px 0px 3px #000;
}
.parameters-header {
    clear: both;
    border-bottom: solid 1px #ddd;
    margin: 10px 0px;
    padding: 10px 0px;
    font-weight: bold;
}
.item-parameter
{
    clear:both;
    border-bottom:1px solid #ddd;
    margin-bottom:5px;
    padding-bottom:5px;
    min-height:32px;
    line-height:24px;
    float:left;
    position:relative;
}
.item-parameter[parameter_type='divider']{
    float:none;
    border-bottom:1px solid #000;
    padding-bottom:0px;
    text-align:center;
}
.item-setting
{
    margin-bottom:10px;
}
.item-setting-header
{
    width:150px;
    text-align:right;
    margin-right:10px;
    line-height: 30px;
    float:left;
}
.item-setting-ui
{
    float: left;
    display: block;
    width: 337px;
}
.item-setting-ui > div
{
    display:inline-block;
}
[parameter_type='textbutton'] .item-setting-ui .btn 
{
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 28px;
    position: relative;
    max-width: 249px;
    overflow: hidden;
    /*top: -5px;*/
}
.itemvalue-charlimit
{
    font-size:11px;
}
.itemvalue-charlimit[over_limit='true'] {
    /*background:#900;
    color:#fff;*/
    } 
.itemvalue-warning
{
    font-size:11px;
    color:#900;
}
[parameter_type='text'] .item-setting-ui input {
    width:250px;
}
[parameter_type='number'] .item-setting-ui{ line-height:initial; }
/*[parameter_type='text'] .item-setting-ui{ line-height:initial; }*/
[parameter_type='list'] .item-setting-ui input { 
    margin-bottom:0px;
    width:233px;
}



.items-tab-subhead
{
    margin:4px 0px;
}
.item-setting-divider
{
    font-weight:bold;
}
.item-list-item input
{
    padding: 0px;
    line-height: 20px;
    font-size: 12px;
}
[list_item_active='false']{
    color: #b9b9b9;
    text-decoration: line-through;
    display:none;
}
.set-param {
    clear:both;
    height:25px;
    position:relative;
}
.set-param-display{
    float:left;
}
.set-param-ui
{
    /*margin-left:20px;*/
    float:right;
}
.set-param-tip
{
    float:right;
    width:20px;
    text-align:center;
}
.set-param-tip-icon
{
    color:#337ab7;
}
[has_tip='false'] .set-param-tip-icon
{
    display:none;
}
.set-param-tip-text
{
    position:absolute;
    background:#e3f2fb;
    font-size:12px;
    padding:2px 4px;
    outline:solid 1px #666;
    white-space: nowrap;
    cursor:pointer;
    right: 20px;
    left: auto;
    top: -1px;
}
.set-param .param-save-status
{
    float:right;
    width:20px;
    height:10px;
    text-align:center;
}

.param-tip
{
    float:right;
    width:20px;
    text-align:center;
}
.param-tip-icon
{
    color:#09f;
    font-size:18px;
    margin-top:2px;
}
[has_long_tip='true'] .param-tip-icon
{
    color:#337ab7;
}
.item-parameter .param-tip-icon
{
    margin-top:7px;
}
[has_tip='false'] .param-tip-icon
{
    display:none;
}
.param-tip-text
{
    position: absolute;
    right: 44px;
    left: auto;
    top: 4px;
    background: #e3f2fb;
    font-size: 12px;
    padding: 2px 4px;
    outline: solid 1px #666;
    white-space: nowrap;
    z-index: 2;
    cursor:pointer;
}
.item-parameter .param-tip-text
{
    right:24px;
    top:1px;
}
.param-doc
{
    float:right;
    width:20px;
    text-align:center;
}
.param-doc-icon
{
    color:#337ab7;
    font-size:18px;
}
[has_doc='false'] .param-doc-icon
{
    display:none;
}

/* ------------------ SITE TAB ------------------- */
.screen-list
{
    margin:15px 0px;
}
.screen-list-labels-wrap {
    height: 24px;
    color: rgba(0,0,0,0.54);
}
.screen-list-label{
    float: left;
    margin: 2px 10px;
}
.screen-list-input-color-label {
    position: absolute;
    width: 131px;
    height: 22px;
    line-height: 22px;
    color: #fff;
    font-size: 9px;
    top: 8px;
    left: 66px;
    background: rgba(255, 50, 50,0.9);
    pointer-events: none;
    text-align: center;
    border-radius: 4px 0px 0px 4px;
    border: 2px solid red;
    z-index: 2;
}
.screen-list-input-color-icon {
    position: absolute;
    width: 132px;
    height: 22px;
    line-height: 22px;
    color: #fff;
    font-size: 9px;
    top: 8px;
    left: 66px;
    background: none;
    pointer-events: none;
    text-align: center;
    border-radius: 6px;
    z-index: 2;
}
.screen-list-input-color-label--hex {
    left: 133px;
    z-index: 2;
}
.screen-list-label--screens {
    width: 60px;
}
.screen-list-label--num {
    display:inline-block;
    width: 120px;
}
.screen-list-label--bg {
    display:inline-block;
    width: 110px;
    /*margin-left: 120px;*/
}
.screen-list-label--title {
    display:inline-block;
    width: 167px;
    /*margin-left: 140px;*/
}
.screen-list-label--length {
    display:inline-block;
    width: 50px;
    /*margin-left: 100px;*/
}
.screen-list-setbg-btn {
    position: absolute;
    width: 142px;
    height: 28px;
    font-size: 12px;
    z-index: 3;
}
.screen-list-item {
    margin-top: 2px;
    color: #fff;
    padding: 4px 10px;
    background: #cecece;
    border-radius: 6px;
    height: 36px;
    position: relative;
}
.screen-list-item-label {
    position: absolute;
    top: 6px;
    color: #f8f8ff;
}
.screen-list-number {
    display: inline-block;
    width: 12px;
    font-size: 15px;
}
.screen-list-icon
{
    height:30px;
}
.screen-list-item input
{
    color:#000;
}
/* Colorpicker overrides */
.screen-list .sp-replacer {
    border-radius: 4px;
    border: 1px solid #FFF;
    padding: 0px;
    margin: 0px 6px;
}
.screen-list-item .sp-preview {
    width: 130px;
    border: none;
    margin: 0px;
}
.sp-container {
    border: solid 1px #fff;
    border-radius: 4px;
    box-shadow: 0px 5px 10px 0px;
}
.sp-container .sp-cancel {
    display: inline-block;
    border: 2px solid white;
    border-radius: 4px;
    height: 20px;
    width: 51px;
    text-align: center;
    text-decoration: none;
    line-height: 20px;
    margin-right: 55px;
    background: #d8210f;
    color: #FFF !important;
}
.sp-container .sp-cancel:hover{
    background: #ec200c;
}
.sp-container button {
    background: #080;
    border: 2px solid #fff;
    border-radius: 4px;
    width: 58px;
    height: 28px;
    font-size: 11px;
    color: whitesmoke;
    font-weight: 100;
    text-align: center;
    text-shadow: none;
}
.sp-container button:hover{
    background: #090;
    border: 2px solid #fff;
    text-shadow: none;
}
.screen-list-item .sp-dd {
    padding: 3px;
}
.sp-container .sp-input{
    background: #fff;
    padding: 2px 4px;
}
.screen-list-input-color {
    display: none;
    width: 80px;
    padding: 6px;
    margin-right: 10px;
    border-radius: 4px;
    height: 24px;
    border: 2px solid #f2f2f2;
}
.screen-list-input-color-hex {
    position: absolute;
    background: rgba(225,225,225,0.8);
    left: 135px;
    top: 6px;
    width: 70px;
    font-size: 10px;
    height: 24px;
    text-align: center;
    border: 2px solid #f2f2f2;
    border-radius: 4px;
}
.screen-list-input-color:hover,
.screen-list-input-color-hex:hover,
.screen-list-input-color-hex:focus
{
    background: rgba(0,0,0,0.2) !important;
    color: white;
}
.screen-list-input-title {
    width: 167px;
    padding: 0px 10px;
    border-radius: 4px;
    BORDER: 1px solid #FFF;
    height: 21px;
    margin: 0px 6px;
}
.screen-list-title-len {
    display: inline-block;
    width: 40px;
    text-align: center;
}
.screen-list-warning {
    float: right;
    position: absolute;
    top: 10px;
    right: 6px;
    color: #ea0000;
}

.param-save-status
{
    display:inline-block;
}
.status-saved.ng-hide {
  transition:1s linear all;
  opacity:0;
}

.setting-reload-message
{
    background: #ff9;
    color: #900;
    padding: 3px 0px;
    margin-bottom: 9px;
    border: solid 1px #000;
    text-align: center;
}
.setting-reload-message .btn
{
    color:#000;
}

[setting_visible='false'] { display:none; }


.docdb-status
{
    margin:5px;
    font-size:11px;
}
.eventing-status
{
    position:fixed;
    bottom:0px;
    right:0px;
    background:#666;
    color:#fff;
    width:500px;
    height:40px;
    overflow-y:scroll;
    font-size:11px;
    padding:4px;
}
.eventing-item
{
    width:100%;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------- TIP BOX ----------------- */

.edit-tip-box
{
    position: absolute;
    z-index: 4;
    width: 450px;
    height: 450px;
    background: #fff;
    padding: 10px;
    color: #000;
    border: solid 1px #999;
    box-shadow: 0px 0px 8px #000;
    left: 483px;
    top: 149px;

}
.edit-tip__close
{
    position:absolute;
    right:5px;
    top:5px;
}
.edit-tip__head
{
    font-size:18px;

}
.edit-tip__body
{
    padding:20px;
    max-height:380px;
    overflow-y:auto;
    border:solid 1px #999;
}

/* ---------------- TRACKING --------------- */

.data-track
{
    width:1230px;
    margin:0px auto;
    border:solid 1px #ccc;
    max-height:180px;
    overflow-y:auto;
}
.data-track--head { border:solid 1px #fff; }
.data-track-item
{
    border-bottom:solid 1px #ccc;
    clear:both;
    height:20px;
    width:1200px;
    margin:0px 5px;
}
.data-track--head .data-track-item { border:none; }
.data-track-item > div
{
    float:left;
    width:100px;
    display:inline-block;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.data-track-item .data-track-name
{
    float:right; width:250px;
}

.data-track-item .data-track-index { width: 40px;text-align:right;padding:0px 5px; }
.data-track-item .data-track-screen { width: 200px;float:right; }
/*.data-track-item .data-track-groupid { width: 80px;float:right; }*/
.data-track-item .data-track-nameui { width: 320px;text-align:right;padding-right:8px; }
.data-track-item .data-track-valueui { width: 330px; }
.data-track-item .data-track-type { width: 50px;text-align:center; }

.data-track-item[track_status='waiting'] { background:#aaa; }
.data-track-item[track_status='success'] { background:#fff;color:#060; }
.data-track-item[track_status='error'] { background:#f99; }



