/*
 * DASHBOARD ui style.
 * Shared with dashboard and portal.
 */


/********************
 * DASHBOARD : FONT 
 *******************/

@font-face {
  font-family: 'dashboard-regular';
  src: url("/resources/fonts/ralewayregular/raleway-regular-webfont.eot");
  src: url("/resources/fonts/ralewayregular/raleway-regular-webfont.eot?#iefix") format("embedded-opentype"), 
       url("/resources/fonts/ralewayregular/raleway-regular-webfont.woff") format("woff"), 
       url("/resources/fonts/ralewayregular/raleway-regular-webfont.woff2") format("woff2"), 
       url("/resources/fonts/ralewayregular/raleway-regular-webfont.ttf") format("truetype"), 
       url("/resources/fonts/ralewayregular/raleway-regular-webfont.svg#RexLight") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'dashboard-bold';
  src: url("/resources/fonts/ralewaysemibold/raleway-semibold-webfont.eot");
  src: url("/resources/fonts/ralewaysemibold/raleway-semibold-webfont.eot?#iefix") format("embedded-opentype"), 
       url("/resources/fonts/ralewaysemibold/raleway-semibold-webfont.woff") format("woff"), 
       url("/resources/fonts/ralewaysemibold/raleway-semibold-webfont.woff2") format("woff2"), 
       url("/resources/fonts/ralewaysemibold/raleway-semibold-webfont.ttf") format("truetype"), 
       url("/resources/fonts/ralewaysemibold/raleway-semibold-webfont.svg#RexLight") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'dashboard-header';
  src: url("/resources/fonts/unitedsanscond/UnitedSansSmCdMd.eot");
  src: url("/resources/fonts/unitedsanscond/UnitedSansSmCdMd.eot?#iefix") format("embedded-opentype"), 
       url("/resources/fonts/unitedsanscond/UnitedSansSmCdMd.woff") format("woff"), 
       url("/resources/fonts/unitedsanscond/UnitedSansSmCdMd.ttf") format("truetype"), 
       url("/resources/fonts/unitedsanscond/UnitedSansSmCdMd.svg#RexLight") format("svg");
  font-weight: normal;
  font-style: normal;
}



/********************
 * DASHBOARD : DASH-BAR 
 *******************/

/* bar */
.dash-bar { position: fixed; top: 0; display: flex; flex-direction: row; max-width: 100%; height: 34px; font-size: 12px; background-color: #2c2c2c; color: #fff; z-index: 1001; -webkit-transition: bottom 150ms ease-in-out; -moz-transition: bottom 150ms ease-in-out; -o-transition: bottom 150ms ease-in-out; transition: bottom 150ms ease-in-out; }
.dash-bar.full-width { width: 100%;}
.dash-bar.shadow { -webkit-box-shadow: 0px 1px 3px 0px rgba(90,90,90,0.75); -moz-box-shadow: 0px 1px 3px 0px rgba(90,90,90,0.75); box-shadow: 0px 1px 3px 0px rgba(90,90,90,0.75); }

.dash-bar.dashboard { font-family: 'dashboard-regular'; }

/* section */
.dash-bar > [class^="section-"] { display:flex; flex-direction:row; height:inherit; justify-content: center; }
.dash-bar > .section-main { padding: 0 8px 0 0 ; }
.dash-bar > .section-features { overflow-x: auto; }
.dash-bar > .section-center { flex-grow: 1; }
.dash-bar > .section-page { }
.dash-bar > .section-user { }
.dash-bar > .section-features.float { display:inline-block; }
.dash-bar > .section-features.float .bar-unit { float:left; display:block; }

.dash-bar > .divider,
.dash-bar > [class^="section-"] > .divider { box-sizing:border-box; margin: 7px 5px 7px 5px; height: 20px; width: 1px; background-color:#f3f3f3; }

/* unit */
.dash-bar .bar-unit { height: inherit; display:inline-block; /*display: flex; flex-direction: row; align-items: center;*/ }
.dash-bar .bar-unit > .block { position:relative; height: inherit; box-sizing:border-box; padding:5px 8px 5px 8px; display: flex; flex-direction: row; align-items: center; white-space:nowrap }
.dash-bar .bar-unit .image { }
.dash-bar .bar-unit i { font-size: 1.2em; }
.dash-bar .bar-unit i.left { margin: 0 0.9em 0 0; }
.dash-bar .bar-unit i.right { margin: 0 0 0 0.9em; }
.dash-bar .bar-unit .label { /*white-space: nowrap;*/ }
.dash-bar .bar-action { cursor:pointer; }
.dash-bar .bar-action:hover { background-color: #5b6770; }

.dash-bar .bar-unit.unit-toggle.active .fa-chevron-left { display:none; }
.dash-bar .bar-unit.unit-toggle.active .fa-chevron-right { display:block; }
.dash-bar .bar-unit.unit-toggle:not(.active) .fa-chevron-right { display:none; }
.dash-bar .bar-unit.unit-toggle:not(.active) .fa-chevron-left { display:block; }

.dash-bar .bar-unit .bar-unit-options { display:none; }
.dash-bar .bar-unit:hover > .bar-unit-options { display:block; }
.dash-bar .bar-unit .bar-unit-options { background-color:#fff; color:#000; border:1px solid #ccc; position:absolute; }
.dash-bar .bar-unit .bar-unit-options.right { right: 0;}
.dash-bar .bar-unit .bar-unit-options .bar-unit-option { padding:7px 10px 7px 10px; }
.dash-bar .bar-unit .bar-unit-options .bar-unit-option i { display:inline-block; width:10px; margin-right:2px; }
.dash-bar .bar-unit .bar-unit-options .bar-unit-option .label { display:inline-block; padding-left:5px; }
.dash-bar .bar-unit .bar-unit-options .bar-unit-option:hover, .dash-bar .bar-unit .bar-unit-options .bar-unit-option.focus  { background-color:#f3f3f3; }


/* unit: portal overview */
.dash-bar .unit-portalo i { margin: 0 0.2em 0 0.2em; }

/* unit: portal */
.dash-bar .unit-portal .label { font-family:'dashboard-bold'; }
.dash-bar .unit-portal .image { margin: 0 auto 0 auto;width: 22px; }

/* more */
.dash-bar .unit-more { text-align: center; }
.dash-bar .unit-more a { text-decoration: none;color:#fff; }

/* features */
.dash-bar .feature.current { color: #5092ef; }
.dash-bar .feature.focus { background-color: #5092ef; }
.dash-bar .feature .image { margin: 0 5px 0 0; width: 22px; }
.dash-bar .feature.pin i { font-size: 1.1em; -ms-transform: rotate(35deg); /* IE 9 */ -webkit-transform: rotate(35deg); /* Chrome, Safari, Opera */ -moz-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); }

/* unit: page */
.dash-bar .unit-page .image { margin: 0 auto 0 auto;width: 22px; }
.dash-bar .unit-page .name { margin: 10px 0 0 0; }
.dash-bar .bar-unit.focus { background-color: #5092ef; }
.dash-bar .bar-unit-option.focus { font-weight: bold; }

/* unit: helpdesk */
.dash-bar .bar-unit .label .helpdesk-link .helpdesk-label { color: #fff;}
.dash-bar .bar-unit .bar-unit-option .label .helpdesk-link .helpdesk-label { color: #000;}

/* unit: user */
.dash-bar .unit-user .image {
    padding: 0 10px;
}
.dash-bar .unit-user img { max-width: 100%; }
.dash-bar .unit-user i { margin: 0 12px 0 0; }

/* content margin (fixed header) */
.dash-bar-content-margin.active{ padding-top: 0px;}
.dash-bar-content-margin { padding-top: 34px; }

@media screen and (max-width: 550px){
    .dash-bar > .section-features.responsive { display:none; }
    .dash-bar .section-page .bar-unit .block .label { display: none; }
    .dash-bar .section-helpdesk .bar-unit .block .label { display: none;}
    .dash-bar .bar-unit i.left { margin: 0px; }
}




/********************
 * DASHBOARD : UI 
 *******************/

.dashboard ul.list { padding: 0; }
.dashboard .hoverlist { background-color: #f2f2f2; }
.dashboard .clicklist { background-color: #39bced; color: #ffffff; }
.dashboard .listitem { padding: 5px; cursor: pointer; list-style: none; }
.dashboard .tablename, 
.dashboard .itemname { font-weight: bold; }
.dashboard .tabs-tables { display: block; border-left: solid 1px #cccccc; border-bottom: solid 1px #cccccc; border-right: solid 1px #cccccc; }
.dashboard .tabs-settings, 
.dashboard .tabs-right { border-left: solid 1px #cccccc; border-bottom: solid 1px #cccccc; border-right: solid 1px #cccccc; }
.dashboard .tab-container { color: #5a5a5a; }
.dashboard .tablelist, 
.dashboard .itemlist { padding: 10px; }
.dashboard .tablelist ul, 
.dashboard .itemlist ul { list-style: none; padding-left: 0; }
.dashboard .filtername { font-weight: bold; }
.dashboard .filter_block { display: block; border-top: solid 1px #cccccc; border-left: solid 1px #cccccc; border-bottom: solid 1px #cccccc; border-right: solid 1px #cccccc; margin-bottom: 15px; }
.dashboard .filter { padding: 10px; }
.dashboard .activefilter h2 { color: #39bced !important; font-weight: bold !important; }
.dashboard .multicolumnlist { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
.dashboard .simplelist { list-style: none; }
.dashboard .simplelist li { cursor: default; }
.dashboard .simplelist input, 
.dashboard .simplelist label { cursor: pointer; }
.dashboard #overview_label { text-align: left; float: left; }
.dashboard #overview_switcher { text-align: right; }
.dashboard #overview_switcher input, 
.dashboard #overview_switcher label { cursor: pointer; }


/********************
 * DASHBOARD : UI : DIALOG SYSTEM
 *******************/

#ds-main #ds-body .buttonRow { width: 100%; padding: 1% 2%; box-sizing: border-box; background-color: #fff; min-height: 60px; border-top: 1px solid #ededed; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
#ds-main #ds-body #ds-title, #ds-main #ds-body .action a { color: #fff; transition:.2s ease all;  }

#ds-main #ds-body #ds-header {
    background-color: #2c2c2c;
    box-shadow: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/*
#ds-main.dashboard { }
#ds-main #ds-body.dashboard { width: 92%; }
#ds-main #ds-body.dashboard #ds-header { border-bottom: solid 1px #f2f2f2; }
#ds-main #ds-body.dashboard #ds-header h4 {  color: #5a5a5a; font-size: 1.3em; }
#ds-main #ds-body.dashboard #ds-navigation { border-bottom: solid 1px #f2f2f2; }
#ds-main #ds-body.dashboard #ds-buttons {  }
#ds-main #ds-body.dashboard .buttonRow { width: 100%; padding: 5px 0; height: 30px; min-height: 30px; }
#ds-main #ds-body.dashboard .buttonHolder { float: right; }

/* thumb *
#ds-main #ds-body.dashboard .thumbarea { background-color: #f0f0f0; }
#ds-main #ds-body.dashboard .thumbarea img { margin: 0 auto; display: block; max-height: 150px; max-width: 150px; }
#ds-main #ds-body.dashboard .thumbarea .button { max-width: none; width: 100% !important; }

/* tagarea *
#ds-main #ds-body.dashboard .tagarea { margin-top: 15px; }

/* buttons (force dashboard style) *
body.dashboard .ds-dialog .ds-buttons { border-top: solid 1px #f2f2f2; width: 100%; padding: 5px 0; height: 30px; min-height: 30px; }
*/
/********************
 * DASHBOARD : UI : EasyTabs
 *******************/
.dashboard ul.etabs {
    list-style: none;
    margin: 0 0;
    padding: 0 30px 0 0;
    border-bottom: solid 1px #cccccc;
    zoom: 1;
}
.dashboard ul.etabs:before,
.dashboard ul.etabs:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.dashboard ul.etabs:after { clear: both; }
.dashboard ul.etabs .tab { background-color: transparent; border: none; border-radius: 0; padding: 0 0.5em 0 0; margin-left: 1em; cursor:pointer; }
.dashboard ul.etabs .tab a { padding: 4px 24px; display: block; float: left; text-decoration: none; color: #5a5a5a; font-size: 14px; font-weight: bold; line-height: 2em; outline: none; }
.dashboard ul.etabs .tab a:hover { text-decoration: underline; color: inherit; }
.dashboard ul.etabs .tab.active { background: #fff; position: relative; top: 1px; border-color: #666; }
.dashboard ul.etabs .tab.active a { border: solid 1px #c0c0c0; border-bottom: solid 1px #ffffff; color: #39bced; }
.dashboard ul.etabs .tab.active span { background-color: #39bced; }
.dashboard ul.etabs .tab.done span { background-color: #9fed39; }
.dashboard ul.etabs .tab span { display: inline-block; background-color: #a8a8a8; padding: 0 5px; margin-right: 12px; color: #ffffff; height: 20px; line-height: 20px; }
.dashboard ul.etabs.bar { border: none; margin-top: 0; padding-left: 0; }
.dashboard ul.etabs.bar li.active a { border: none; background-color: #39bced; color: #ffffff; position: relative; left: -1px; }
.dashboard ul.etabs.bar a { border-right: dotted 1px #a8a8a8; padding: 0.5em 1.5em; }




/********************
 * DASHBOARD : UI : APP
 *******************/

/* title */
.dashboard .tool-app .title { font-weight: bold; font-size: 1.2em; }

/* header */
.dashboard .tool-app > .header { background-color: #5b6770; height: 36px; }
.dashboard .tool-app > .header .title { color: #fff; line-height: 36px; }

/* layout */
.dashboard .tool-app > .body { width: 100%; }

/* edit-layout */
.dashboard .tool-app > .body.edit > * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.dashboard .tool-app > .body.edit { display:flex; width: 100%; }
.dashboard .tool-app > .body.edit .area-steps { }
.dashboard .tool-app > .body.edit .area-form { width: 100%;  }
.dashboard .tool-app > .body.edit .area-preview { }

/* edit-layout: steps + form */
.dashboard .tool-app > .body.edit.multiple-steps .area-steps { width: 30%; }
.dashboard .tool-app > .body.edit.multiple-steps .area-form { width: 70%; }

/* edit-layout: form + preview */
.dashboard .tool-app > .body.edit.has-preview .area-form { width: 70%; }
.dashboard .tool-app > .body.edit.has-preview .area-preview { width: 30%; }

/* edit-layout: steps + form + preview */
.dashboard .tool-app > .body.edit.multiple-steps.has-preview .area-steps { width: 30%; }
.dashboard .tool-app > .body.edit.multiple-steps.has-preview .area-form { width: 40%; }
.dashboard .tool-app > .body.edit.multiple-steps.has-preview .area-preview { width: 30%; }

/* edit-steps */
.dashboard .tool-app .body.edit .area-steps { padding-right: 20px; }
.dashboard .tool-app .body.edit .area-steps ul.root { list-style: none; }
.dashboard .tool-app .body.edit .area-steps ul.sub { list-style: none; }

.dashboard .tool-app .body.edit .area-steps .step > .step-body { background-color: #5a5a5a; width: 100%; padding: 10px; margin: 0 0 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard .tool-app .body.edit .area-steps .step.group > .step-body { font-weight: bold; }
.dashboard .tool-app .body.edit .area-steps .step.no-group > .step-body { font-weight: bold; cursor: pointer; }
.dashboard .tool-app .body.edit .area-steps .step.sub > .step-body { background-color: #EDEDED; cursor: pointer;}
.dashboard .tool-app .body.edit .area-steps .step.sub > .step-body .label { color: #5a5a5a; }

.dashboard .tool-app .body.edit .area-steps .step.no-group.active > .step-body { background-color: #7d7d7d; }
.dashboard .tool-app .body.edit .area-steps .step.sub.active > .step-body { background-color: #ccc; }

.dashboard .tool-app .body.edit .area-steps .step-body .label { float: left; }

.dashboard .tool-app .body.edit .area-steps .step-body .completion { float: right; }
.dashboard .tool-app .body.edit .area-steps .step-body .completion .fa-check-square { display: none; color: #19C56F; font-size: 16px; }
.dashboard .tool-app .body.edit .area-steps .step-body .completion .fa-square { color: white; font-size: 16px; }
.dashboard .tool-app .body.edit .area-steps .step-body .completion.complete .fa-square { display: none; }
.dashboard .tool-app .body.edit .area-steps .step-body .completion.complete .fa-check-square { display: inline-block; }

.dashboard .tool-app .body.edit .area-steps .step-body .toggle { float: right; cursor: pointer; }
.dashboard .tool-app .body.edit .area-steps .step-body .toggle.fa-chevron-down { color: white; font-size: 16px; }
.dashboard .tool-app .body.edit .area-steps .step-body .toggle.fa-chevron-up { color: white; font-size: 16px; }
.dashboard .tool-app .body.edit .area-steps .step-body .toggle.expanded .fa-chevron-down { display: none; }
.dashboard .tool-app .body.edit .area-steps .step-body .toggle.collapsed .fa-chevron-up { display: none; }

/* edit-form */
.dashboard .tool-app .body.edit .area-form .message-no-form { padding: 10px; }
.dashboard .tool-app .body.edit .area-form .step-header { padding-bottom: 20px; }
.dashboard .tool-app .body.edit .area-form .step-title { font-size: 25px; padding-top: 1em; padding-left: 0.8em; padding-right: 1.5em; }
.dashboard .tool-app .body.edit .area-form .step-header .step-sub-title { padding-top: 1em; padding-left: 1.5em; padding-right: 1.5em; }

/* edit-preview */
.dashboard .tool-app .body.edit .area-preview { }
.dashboard .tool-app .body.edit .area-preview .image { width: 100%; }
.dashboard .tool-app .body.edit .area-preview .image img { max-width: 100%; }

/* view-layout: tabs */
.dashboard .tool-app .body.view .area-tabs { width: 100%; margin-bottom: 10px; }
.dashboard .tool-app .body.view .area-tabs .tabs { list-style: none; }
.dashboard .tool-app .body.view .area-tabs .tab { padding: 4px 8px 4px 8px; float: left; cursor: pointer; }
.dashboard .tool-app .body.view .area-tabs .tab.active { background-color: #248b24; color: #fff; }
.dashboard .tool-app .body.view .area-tabs .tab:hover { background-color: #19C56F; color: #fff; }

/* view-layout: step */
.dashboard .tool-app .body.view .area-step-view .step { }
.dashboard .tool-app .body.view .area-step-view .step .head { border-bottom: 1px dashed #ccc; color: #44535d; }
.dashboard .tool-app .body.view .area-step-view .step .head .label { float: left; font-size: 16px; font-weight: bold; }
.dashboard .tool-app .body.view .area-step-view .action-form { font-size: 14px; float: right; cursor: pointer; }
.dashboard .tool-app .body.view .area-step-view .action-form:hover { color: #ec632e; }

/* view-layout: field */
.dashboard .tool-app .body.view .area-step-view .step .body .field { zoom: 1; width: 100%; }
.dashboard .tool-app .body.view .area-step-view .step .body .field:before,
.dashboard .tool-app .body.view .area-step-view .step .body .field:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.dashboard .tool-app .body.view .area-step-view .step .body .field:after { clear: both; }
.dashboard .tool-app .body.view .area-step-view .step .body .field > * { float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.dashboard .tool-app .body.view .area-step-view .step .body .field .label { width: 50%; font-weight: bold; }
.dashboard .tool-app .body.view .area-step-view .step .body .field .value { width: 50%;}

/* view-layout: step-list-field */
.dashboard .tool-app .body.view .area-step-view .step.list-field .body .item { zoom: 1; width: 100%; }
.dashboard .tool-app .body.view .area-step-view .step.list-field .body .item:before,
.dashboard .tool-app .body.view .area-step-view .step.list-field .body .item:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.dashboard .tool-app .body.view .area-step-view .step.list-field .body .item:after { clear: both; }
.dashboard .tool-app .body.view .area-step-view .step.list-field .body .item > * { float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.dashboard .tool-app .body.view .area-step-view .step.list-field .body .item .label { width: 50%; font-weight: bold; }
.dashboard .tool-app .body.view .area-step-view .step.list-field .body .item .value { width: 50%;}

/* manage-list-field-items */
.dashboard .tool-app .sort-icon:before { content: "[M]"; }
.dashboard .tool-app .manage-list-field-items .form-header { background-color: #27abc2; border-bottom: 1px solid #b5f6ff; border-top: 1px solid #b5f6ff; padding: 0 30px 0 10px; font-weight: bold; color: #fff; height: 36px; }
.dashboard .tool-app .manage-list-field-items .form-header .title { margin: 10px; }
.dashboard .tool-app .manage-list-field-items .sort-icon:before { content: "[M]"; }

/* template-selector */
.dashboard .tool-app .item-picker.template-selector { width: 200px; height: 300px; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -100px; z-index:1; }
.dashboard .tool-app .item-picker { display:none; z-index:1; }
.dashboard .tool-app .item-picker ul { list-style-type: none; }
.dashboard .tool-app .item-picker > .content { width: 100%; margin: 0 auto; padding: 0; background-color: #fff; color: #5a5a5a; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #5a5a5a; -webkit-box-shadow: 0 0 2px #5a5a5a; -moz-box-shadow: 0 0 2px #5a5a5a; box-shadow: 0 0 2px #5a5a5a; }
.dashboard .tool-app .item-picker > .content > .head { padding: 8px 12px 8px 12px; }
.dashboard .tool-app .item-picker > .content > .head .title { font-size: 1.2em; font-weight: bold; padding-bottom: 8px; border-bottom: 1px solid #dddddd; }
.dashboard .tool-app .item-picker > .content > .body ul { }
.dashboard .tool-app .item-picker > .content > .body li { cursor: pointer; padding: 8px 20px 8px 20px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.dashboard .tool-app .item-picker > .content > .body li:hover { background-color: #39bced; color: #fff; }
.dashboard .tool-app .item-picker > .content > .body li .label { font-size: 1.2em; }
.dashboard .tool-app .item-picker > .content > .bottom { margin: 8px 0 8px 0; padding: 8px 12px 8px 12px; }
.dashboard .tool-app .item-picker > .content > .bottom .button { margin: 0 auto; }


/********************
 * DASHBOARD : UI : GUIDE INTRO
 *******************/
.dashboard .tool-guide-intro {text-align:center; display:table;  vertical-align: middle;height: inherit; width: 100%;}
.dashboard .tool-guide-intro .inner { display: table-cell; vertical-align: middle; }
.dashboard .tool-guide-intro i { font-size: 14em; color: #39bced; }
.dashboard .tool-guide-intro .purpose { font-weight: bold; font-size: 1.2em;  }
.dashboard .tool-guide-intro .explanation { font-style: italic; margin-top: 8px; }
.dashboard .tool-guide-intro .select-list { margin-top: 16px; }
.dashboard .tool-guide-intro .button { display: inline-block; margin-top: 16px; }
.dashboard .tool-guide-intro .button.green { background-color: #19c56f; border: solid 1px #19c56f; }

/*****************
 *  DASHBOARD : UI: ITEM PICKER
 *****************/
.dashboard .item-picker { display: none; z-index: 1; }
.dashboard .item-picker > .content { width: 100%; margin: 0 auto; padding: 0; background-color: #fff; color: #5a5a5a; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #5a5a5a; -webkit-box-shadow: 0 0 2px #5a5a5a; -moz-box-shadow: 0 0 2px #5a5a5a; box-shadow: 0 0 2px #5a5a5a; }
.dashboard .item-picker > .content > .head { padding: 8px 12px 8px 12px; }
.dashboard .item-picker > .content > .head .title { font-size: 1.2em; font-weight: bold; padding-bottom: 8px; border-bottom: 1px solid #dddddd; }
.dashboard .item-picker .body { max-height: 300px; overflow: auto; }
.dashboard .item-picker .body ul { list-style: none; }
.dashboard .item-picker .body .category > .label { font-weight: bold; padding: 6px 10px 6px 10px; }
.dashboard .item-picker .body .category > .options > li { padding-left: 30px; }
.dashboard .item-picker .body .option { padding: 0.50em 1em; cursor: pointer; min-width: 8em; }
.dashboard .item-picker .body .option:hover { background-color: #39bced; color: #fff; }
.dashboard .item-picker > .content > .bottom { margin: 8px 0 8px 0; padding: 8px 12px 8px 12px; text-align: center; }
.dashboard .item-picker > .content > .bottom .button { margin: 0 auto; }

/*****************
 *  DASHBOARD : UI: TABS
 *****************/
.dashboard .tool-tabs.default { width: 100%; background-color: #808080; padding: 0; color: #fff; }
.dashboard .tool-tabs.default > .tabs { list-style: none; }
.dashboard .tool-tabs.default > .tabs > .tab { padding: 5px 10px; float:left; font-size:18px; cursor: pointer; height: 26px; max-height: 26px; }
.dashboard .tool-tabs.default > .tabs > .tab.between,
.dashboard .tool-tabs.default > .tabs > .tab.last { }
.dashboard .tool-tabs.default > .tabs > .tab.active { background-color: #565656; opacity:0.8; }
.dashboard .tool-tabs.default > .tabs > .tab:hover { opacity:0.5; }

/*****************
 *  DASHBOARD : UI: MANAGE
 *****************/
/* dialog: card */
.dashboard .dialog.manage .card { background-color: #f3f3f3; border-radius: 8px; padding: 20px 25px; }
.dashboard .dialog.manage .card .left { float: left; width: 200px; position: relative; }
.dashboard .dialog.manage .card .right { float: left; width: calc(100% - 220px); margin-left: 20px; }
.dashboard .dialog.manage .card .rating { }
.dashboard .dialog.manage .card .left .image { width: 200px; height: 200px; text-align: center; cursor: pointer; background-size: cover; background-position: center center; }
.dashboard .dialog.manage .card .info { }
.dashboard .dialog.manage .card .info .name { font-size: 1.2em; color: #5b5b5b; }
.dashboard .dialog.manage .card .info .target {  }
.dashboard .dialog.manage .card .info .target .company { color: #a9a9a9; }
.dashboard .dialog.manage .card .info .status { color: #5b5b5b; font-family:'bold'; }
.dashboard .dialog.manage .card .info .description { color: #5b5b5b; }
.dashboard .dialog.manage .card .info .indicators { margin-top: 10px; margin-bottom: 7px;  }
.dashboard .dialog.manage .card .info .indicators i.selected { color: #ea4a44; }
.dashboard .dialog.manage .card .tags { list-style: none; margin-top: 8px; }
.dashboard .dialog.manage .card .tags > .tag { display: inline-block; border: 1px solid #fff; border-radius: 5px; margin: 2px 2px 0 0; padding: 1px 7px; cursor: pointer; background-color: #ea4a44; color: #fff; }
.dashboard .dialog.manage .card .tags > .tag > i { opacity: 0.7; font-size: 0.9em; }
.dashboard .dialog.manage .card .tags > .tag:hover > i { opacity: 1; } 
.dashboard .dialog.manage .card .tags > .tag.add { background-color: #c0c0c0; padding: 1px 7px; }
.dashboard .dialog.manage .card .tags > .tag.add:hover { background-color: #248b24; }
.dashboard .dialog.manage .card .tags > .tag.icon { border: none; margin: 0; padding: 0; font-size: 16px; vertical-align: middle; background-color: transparent; color: #c0c0c0; }
.dashboard .dialog.manage .card .tags > .tag.icon i { opacity: 1 !important; }
.dashboard .dialog.manage .card .divider { width: 75%; height: 1px; background-color: #f3f3f3; margin: 7px 0; }
.dashboard .dialog.manage .card .word-wrap-break-word { word-wrap: break-word; }
.dashboard .dialog.manage .card .bottom { margin-top: 15px; }
.dashboard .dialog.manage .card .bottom .edit-image-button { float: left; width: 200px; }
.dashboard .dialog.manage .card .bottom .extra { }
.dashboard .dialog.manage .card .bottom .extra .owner { float: left; width: 50%; }
.dashboard .dialog.manage .card .bottom .extra .owner .image { float: left; width: 50px; height: 50px; border-radius: 25px; overflow: hidden; text-align: center; margin-right: 10px; }
.dashboard .dialog.manage .card .bottom .extra .owner .image > img { max-width: 50px; max-height: 50px; }
.dashboard .dialog.manage .card .bottom .extra .owner .name { color: #5b5b5b; font-weight: bold; }
.dashboard .dialog.manage .card .bottom .extra .action { float: left; width: 40%; }

/* responsive */
@media screen and (max-width: 900px) {
    .dashboard .dialog.manage .card .left { float: left; width: 150px; position: relative; }
    .dashboard .dialog.manage .card .left .image { width: 100px; height: 100px; text-align: center; cursor: pointer; background-size: cover; background-position: center center; }
}
@media screen and (min-width: 901px) and (max-width: 1275px) {
    .dashboard .dialog.manage .card .left { float: left; width: 150px; position: relative; }
    .dashboard .dialog.manage .card .left .image { width: 150px; height: 150px; text-align: center; cursor: pointer; background-size: cover; background-position: center center; }
}
@media screen and (min-width: 1276px) and (max-width: 1475px) {    
    .dashboard .dialog.manage .card .left { float: left; width: 175px; position: relative; }
    .dashboard .dialog.manage .card .left .image { width: 150px; height: 150px; text-align: center; cursor: pointer; background-size: cover; background-position: center center; }
}
@media screen and (min-width: 1476px)  {
    .dashboard .dialog.manage .card .left { float: left; width: 200px; position: relative; }
    .dashboard .dialog.manage .card .left .image { width: 175px; height: 175px; text-align: center; cursor: pointer; background-size: cover; background-position: center center; }
}

/* dialog: details */
.dashboard .dialog.manage .details { margin: 0 0 20px 0; }
.dashboard .dialog.manage .details > .body { background-color: #f3f3f3; border-radius: 3px; padding: 5px 25px; }
.dashboard .dialog.manage .details > .body > .edit-button { position: absolute; top: 25px; right: 25px; }
.dashboard .dialog.manage .details > .body > .property { width: 100%; clear: both; margin: 5px 0; }
.dashboard .dialog.manage .details > .body > .property label { width: 15%; display: inline-block; color: #5b5b5b; }
.dashboard .dialog.manage .details > .body > .property > span { margin-left: 2%; }
.dashboard .dialog.manage .details > .body > .property span { width: 82%; display: inline-block; color: #5b5b5b; }
.dashboard .dialog.manage .details > .body > .divider { width: 100%; height: 1px; border-bottom: 1px solid #f3f3f3; margin: 10px 0; }
.dashboard .dialog.manage .details > .body > .header { margin: 10px 0 0 0; font-family:'bold'; }
.dashboard .dialog.manage .details > .body > .property.vertical { }
.dashboard .dialog.manage .details > .body > .property.vertical label { width: 100%; }
.dashboard .dialog.manage .details > .body > .property.vertical span { width: 100%; margin-left: 0; }
.dashboard .dialog.manage .details > .body > .property.vertical.help { background-color: #f3f3f3; border-radius: 3px; text-align: center; padding: 10px 0; }
.dashboard .dialog.manage .details > .body > .property.vertical.help a, 
.dashboard .dialog.manage .details > .body > .property.vertical.help a:visited, 
.dashboard .dialog.manage .details > .body > .property.vertical.help a:active, 
.dashboard .dialog.manage .details > .body > .property.vertical.help a:hover { font-style: italic; color: #3d94b7; text-decoration: none; }


/********************
 * DASHBOARD : WIDGET : CMS VIEWER
 *******************/

/* TMP, Form style should be updated! */
.dashboard #cmsviewer_edit_tab_data input.button { background-color: #19c56f; border-color: #19c56f; }
.dashboard #cmsviewer_edit_tab_data input.button.cancel { background-color: #fbfbfb; border-color: #fbfbfb; }

/*****************
* API Connections
*****************/

.dashboard .api-connections .cols .col1 { width: 310px; padding: 20px; }
.dashboard .api-connections .cols .col2 { width: calc(100% - 310px); padding: 20px; }

/* App builder wizard styling */
.wizard-display .wizard-display-content .tabs-content .tab-content .tool-appbuilder .ab-steps { height:85%; overflow-y:auto; }
.wizard-display .tool-appbuilder .area-app-overview { width: 20%; background-color: #f3f3f3; }
.wizard-display .tool-appbuilder .area-app-overview .buttons { width: 100%; text-align: center; }
.wizard-display .tool-appbuilder .area-app-field { overflow-y: auto; padding: 20px; box-sizing: border-box; width: 100%; height: 95%; }
.spacer .spacer-line .spacer-line-inner { border-bottom:1px solid #ccc; width:100%; margin-top:5px; margin-bottom:25px; }
.wizard-display .tool-appbuilder .area-app-overview .buttons .button { /*padding: 5px 20px;*/ text-decoration: none; border: 0; float: none; }

.wizard-display .area-app-field .tool-tabs.default { width: 100%; padding: 0; color: #fff; background-color: #fff; }
.wizard-display .area-app-field .tool-tabs.default > .tabs { list-style: none; }
.wizard-display .area-app-field .tool-tabs.default > .tabs > .tab { background-color: #a8a8a8; padding: 5px 10px; float:left; font-size:18px; cursor: pointer; height: 26px; max-height: 26px; }
.wizard-display .area-app-field .tool-tabs.default > .tabs > .tab:hover { background-color: #a8a8a8; color: #5a5a5a; }
.wizard-display .area-app-field .tool-tabs.default > .tabs > .tab.active { opacity: 0.8; color: #000; }