/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the 
 * later versions of this theme. 
 * 
 * We advise that you use use this CSS to override 
 * SmartAdmin styles. 
 * 
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */
/* Logo on top of the page */

html, body, .root-container {
    margin: 0;
    height: 100%;
}

#extr-page #main {
    height: 100%;
}

body.socket-disconnected > .root-container, body.socket-disconnected > .modal {
  filter: blur(2px);
}

body.socket-disconnected .disconnect-alert {
  position: fixed;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  z-index: 100000;
  color: red;
}

/* Zero width for logo container so that header controls always have room in
 * the header and they can overlap the logo if necessary in small screens */
#header #logo-group {
    width: 0;
}

#logo-group #logo {
    height: 30px;
    width: 300px;
}

#logo-group .beta {
    color: red;
    font-size: 18px;
    vertical-align: middle;
    padding-left: 5px;
}

#logo img {
    width: auto;
    height: auto;
    max-height: 100%;
    padding-left: 3px;
}

global-search {
    float: right;
    margin-right: 20px;
}

global-search li a {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

#search-tab {
    display: none !important;
}

#search-tab.active {
    display: block !important;
}
.search-result .tab-info {
    display: none;
}

.search-result:hover .tab-info {
    display: block;
}

/* Fix wrong logo background color in skin 1 */
.smart-style-1 #logo-group {
    background: inherit !important;
}

/* Hide all modal dialogs in login screen */
.hide-dialogs .modal-backdrop, .hide-dialogs .modal, .hide-dialogs .divMessageBox {
    display: none !important;
}

/* ... except the modal dialogs which needs to be shown in the login screen :) */
.do-not-hide-dialogs.hide-dialogs .modal-backdrop, .do-not-hide-dialogs.hide-dialogs .modal {
	display: block !important;
}

/* SmartAdmin sets overflow to "hidden !important", we need higher specificity */
body.hide-dialogs.modal-open {
    overflow: auto !important;
}

.login-selector {
    text-align: center;
    margin-top: 30vh;
}

socket-status {
    margin-top: 16px;
    margin-right: 12px;
    float: right;
}

socket-status .success {
    color: #00ff00;
}

socket-status .error {
    color: red;
    font-weight: bold;
}

/* Action button container */

.wui-action-button {
    display: inline;
    float: left;
    margin: 6px;
    text-align: center;
    width: 80px;
}

/* highlight that the user has chosen the button before or it is otherwise activated */
.wui-action-button .selected-button {
    border: 1px solid green;
}

.wui-action-button .unselected-button {
}

.wui-action-button-list .wui-action-button {
    display: inline-block;
    float: none;
    margin: 0;
    padding: 0;
    width: 100px;
}

.wui-action-button-list {
    padding: 0;
    margin: 5px;
}

ul[dnd-list], ul[dnd-list] > li {
    position: relative; /* draggable ul and li elements must use relative positioning */
}

ul.draggable-buttons {
    padding: 0;
    margin: 5px;
    min-height: 100px;
}

ul.draggable-buttons .dndDraggingSource {
    display: none;
}

.drag-trash-bin .dndPlaceholder {
    display: none;
}

.drag-trash-bin.dndDragover {
    color: red;
}

quick-launcher-widget .drag-trash-bin {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

quick-launcher-widget .editbox {
    display: block;
    padding-bottom: 0;
}

quick-launcher-widget .editbox .help-block {
    margin-top: 0;
    max-width: 400px;
}

/* Display SmartAdmin sparkline container items in two columns (used in Manage -> Overview widget) */

.wui-sparks #sparks {
    background: none !important;
    width:100%;
}

.wui-sparks #sparks li {
    display: inline;
    border: none;
    padding: 8px;
    float: left;
    width:40%;
}

/* Original margin is -3px, which makes the letter Ä to look like A */
#sparks li h5 {
    margin: -1px 0 0 0;
}

/* Disable gray background for mobile */


/* Show transition animation when changing background color (e.g. highlighting an element)*/

.wui-background-transition {
    transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -webkit-transition: background-color 0.2s linear;
    -ms-transition: background-color 0.2s linear;
}

/* Highlight e.g. verified devices */

.wui-sparks .highlighted {
    background: #E8F8FF;
    border-radius: 4px;
}
/* ng-animate when e.g. device state is updated in tasklog*/

.change {
    opacity: 0.5;
}
.change-add, .change-remove {
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.change-remove-active {
    opacity: 1;
}

/* Do not capitalize username (e.g. admin@largecompany.com) */
.login-info a span {
    text-transform: none;
}

/* Show long titles correctly */
.page-title span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 180px;
    vertical-align: middle;
    line-height: 24px;
    padding-right: 5px;
}

.wui-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis; 
}

.wui-center {
    vertical-align: 0;
    display: inline;
}

.wui-details {
    clear: both;
}

.wui-details ul {
    list-style: none;
    padding-left: 5px;
}

.device-details .wui-multicolumn li.wui-multicolumn-item {
    margin-bottom: 10px;
}

.wui-details h5 {
    margin-top: 0px;
    margin-bottom: 4px;
    margin-left: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wui-details h5 .status {
    font-weight: 400;
}

.wui-details .title {
    text-transform: uppercase;
    font-size: 11px;
}

.wui-details .help-block {
    white-space: normal;
    font-size: 13px;
}

.wui-details li.text-muted .wui-detail-icon {
    display: none;
}

.wui-device-tag {
    margin: 3px;
    line-height: 2.5;
}

.wui-device-tags li {
    display: inline-block;
}

.wui-table td {
    white-space: pre-line !important;
    max-width:50px;
    overflow:hidden;
    text-overflow: ellipsis;
}

.wui-capitalize {
    text-transform: capitalize;
}

.wui-multicolumn {
    width: 100%;
    overflow:hidden;
}

.wui-multicolumn li.wui-multicolumn-item {
  float:left;
  display:inline;
}

.repeat-animate
{ 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
} 
 
.repeat-animate.ng-leave.ng-leave-active,
.repeat-animate.ng-enter {
    opacity: 0;
}

.repeat-animate.ng-enter.ng-enter-active, 
.repeat-animate.ng-leave {
    opacity: 1;
}

.wui-user-details {
    clear:both;
    margin: -13px;
}

@media(max-width:767px){
    .wui-multicolumn li.wui-multicolumn-item {
      width:100%;
    }
}
@media(min-width:768px){
    .wui-multicolumn li.wui-multicolumn-item {
      width:100%;
    }
}
@media(min-width:992px){
    .wui-multicolumn li.wui-multicolumn-item {
      width:50%;
    }
}
@media(min-width:1200px){
    .wui-multicolumn li.wui-multicolumn-item {
      width:33%;
    }
}

.wui-error-msg {
    visibility: hidden;
}

.ng-invalid + .wui-error-msg {
    visibility: visible;
}

/* Gray modal backdrop is not showing for some reason */
.modal-backdrop {
    height: 100%;
    position: fixed;
}

.wui-button {
    /*float:right;*/
}

.wui-tasklog-td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wui-tasklog-td-date {
    max-width: none;
    white-space: nowrap;
}

.wui-tasklog-td-date .label-area {
    float: right;
}

.wui-tasklog-taskname a {
    color: inherit;
}

.wui-tasklog-new-row td:not(.wui-tasklog-td-actions) {
    opacity: 0.5;
}

a.wui-login-info {
    font-size: 14px;
    margin-top: 6px;
    text-decoration: none!important;
    color: #c0bbb7;
    display: inline-block;
}

a.wui-login-info:hover {
    color: #c0bbb7;
}

.page-title {
    margin-bottom: 14px;
}

#content {
    padding-left: 7px;
    padding-right: 7px;
}

resource-tree {
    display: block;
    max-height: 500px;
    overflow-y: auto;
}

@media(min-height: 800px) {
    resource-tree {
        max-height: calc(100vh - 300px);
    }
}

resource-tree + resource-search {
    margin-top: 20px;
}

resource-search {
    display: block;
}

resource-search .search-form {
    margin-bottom: 1em;
}

resource-search .search-result-area {
    margin-top: -0.5em;
}

resource-search .no-search-results {
    margin-bottom: 0.5em;
}

resource-search .dd-handle {
    padding: 4px 8px;
}

resource-search .fa {
    padding-right: 0.5em;
}

resource-tree {
    padding-bottom: 20px;
    display: block;
}

.dt-toolbar, .dt-toolbar-footer {
    background: inherit;
}

.dt-toolbar .table-info {
    padding-left: 1em;
    line-height: 32px;
    float: left;
}

.dt-toolbar .table-info .help-icon {
    font-size: inherit;
    vertical-align: inherit;
}

.dt-info {
    margin: 15px;
}

.dataTables_filter {
    margin-right: 10px;
    width: auto;
}

.clickable {
    cursor: pointer;
}

td.clickable {
    color: #3276b1;
    cursor: pointer;
}

.collapsable header {
    cursor: pointer;
}

.customize-dialog legend {
    margin-bottom: 10px;
}

.column-chooser {
    overflow-y: auto;
    max-height: 600px;
}

tr.child-row td:first-child {
    padding-left: 25px;
}

tr.child-row td:first-child:before {
    font-family: 'FontAwesome';
    content: '\f0da';
    padding-right: 5px;
}

tr.expanded, tr.child-row {
    background-color: #ffffe3 !important;
}

tr.expanded td, tr.child-row + tr:not(.child-row) td {
    border-top: solid #bbb 1px !important;
}

tr.expandable .expand-control {
    cursor: pointer;
}

tbody tr.expandable .expand-control:before {
    font-family: 'FontAwesome';
    content: "\f055";
    color: #739e73;
    padding-right: 5px;
    vertical-align: middle;
}

tbody tr.expandable.expanded .expand-control:before {
    content: "\f056";
    /*color: #a90329; red? */
    color: black;
}

/* Fix profile dropdown menu */
.login-info {
    position: relative;
    cursor: pointer;
}

.login-info .profile-menu {
    margin-left: 10px;
}

.profile-menu a {
    color: black !important;
    font-weight: bold !important;
}

.login-info .profile-menu i {
    display: inline-block !important; /* SmartAdmin hides <i> if .minified is on */
}

/* Make sure the pie legend does not grow in height if the contained ul wraps */
.pie-legend {
    min-height: 23px;
}

.empty-pie-legend {
    height: 23px;
    margin-top: 5px;
    margin-bottom: 9px;
}

.search-footer {
    padding-left: 4px;
    padding-bottom: 8px;
}

.search-footer:empty {
    display:none;
}

#error-page .fa {
    font-size: 100px;
}

#error-page {
    margin-right: auto;
    margin-left: auto;
    margin-top: 10%;
    max-width: 500px;
    text-align: center;
}

#error-page .error-title {
    font-size: 30px;
    padding-bottom: 30px;
}

#error-page .instructions {
    margin-top: 50px;
}

/* 
 * Add padding so that the fixed header does not overlap main content
 */
body.fixed-header {
    padding-top: 0 !important;
}
.fixed-header .root-container {
    padding-top: 0.1px; /* prevent margin collapse with body */
}

@media (min-width: 980px) {
    .fixed-header.menu-on-top #main {
        margin-top: 118px !important;
    }
}
@media (max-width: 979px) {
    /* without navigation bar */
    .fixed-header #main {
        margin-top: 49px !important;
    }
}

/* Hiding the breadcrumb area, and raising the main content area back up */
#main #ribbon {
    display: none;
}
#main #content {
    padding-top: 6px;
}

/* This can be used to hide the 'demo settings' cog */
#main .demo {
    /* display: none; */
}

/* The footer has been removed */
#main {
    padding-bottom: 0;
}

#about .container {
    width: inherit;
}

#about .company {
    width: 144px;
    height: 160px;
    margin: auto;
    position: relative;
}

#about .company img {
    max-width: 100%;
    max-height: 100%;
}

#about .version-title img {
    max-height: 2.5em;
    display: block;
    margin: 0 auto;
}

#about .copyright {
    position: absolute;
    font-weight: bold; 
    width: 100%;
    text-align: center;
    bottom: 15px;
}

#about .info-fields table {
    width: 100%;
    margin-top: 20px;
}

#about .info-fields td {
    padding: 0 5px;
}

#about .info-fields td:first-of-type {
    text-align: right;
}

#about .modal-footer {
    clear: both;
}

#fullscreen {
  display: none;
}

.editbox {
    border-bottom: 1px solid #B1B1B1;
    padding: 5px 10px 20px 10px;
}

.editbox.angular-animate.ng-enter {
    -webkit-animation: fadeInDown 0.3s;
    animation: fadeInDown 0.3s;
}

.editbox.angular-animate.ng-leave {
    -webkit-animation: fadeOutUp 0.1s;
    animation: fadeOutUp 0.1s;
}

resource-tree .loading {
    font-size: 16px;
    padding-left: 40px;
    padding-top: 2px;
}

.setup-content {
    padding-left: 15px;
}

.tab-content h1:first-of-type {
    /* default margin is 10px but it creates gaps in the border */
    margin-top: 0;
    padding-top: 10px;
}

h1 + .panel {
    margin-top: 20px;
}

.form-panel {
    max-width: 700px;
}

.form-panel .panel-content {
    padding: 20px 30px;
}

.embedded-form-panel .panel-content {
    padding: 12px 12px;
}

.fuelux .steps li.optional .badge {
    color: black;
    background-color: white;
    border: 1px solid gray;
}

.fuelux .step-content {
    position: relative;
    min-height: 200px;
    padding-left: 20px;
}

.fuelux .step-content blockquote {
    width: 50%;
    max-width: 500px;
    margin: 20px;
    position: absolute;
    top: 0;
    right: 0;
}

.fuelux .step-pane .button-footer {
    padding-top: 20px;
    padding-bottom: 10px;
}

.control-row {
    transition: 0.2s linear all;
    opacity: 1;
    min-height: 32px;
    position: relative;
}

.control-row.ng-hide {
    display: block !important;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

/* Get the task log dropdown menu with actions visible */
.wui-tasklog-td-actions > .btn-group {
    position: absolute;
}

/* Icon and text spacing on task log dropdown menu */
.task-action a > i {
    padding-right: 2px;
}

/* Get the task log action button positioned vertically */
.wui-tasklog-tr {
    height: 32px !important;
}

.strike-trough {
	/* Marked as important so it will work with the selected tab titles */
	text-decoration: line-through !important;
}

.apple-logo {
    color: #aaaaaa;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.wizard-dialog blockquote {
    display: none;
}

.wizard-dialog .fuelux .step-pane {
    width: auto;
    max-width: 650px;
}

.fuelux wizard-step:not([data-step]) {
    display: none;
}

.fuelux .actions button + button {
    margin-left: 3px;
}

@media (max-width: 767px) {
    .fuelux .steps {
        visibility: hidden;
    }
    .fuelux .actions {
        width: 100%;
    }

    .fuelux .actions button {
        width: 49%;
        max-width: 49%;
        overflow: hidden;
        text-overflow: clip;
    }

    .fuelux .actions button + button {
        margin-left: 2%;
    }
}

wizard .summary-table tr {
    cursor: pointer;
}

.btn-highlightable {
    transition: all 0.2s linear;
}

.btn-highlightable.highlight {
    color: white;
    background-color: #c26565;
    transform: scale(1.2, 1.2);
}

.btn-transparent {
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    box-shadow: none;
}

table.aligned-table td {
    padding: 0 5px;
}

.modal-header .close {
    font-size: 2em;
}

.customize-tab-link {
    position: absolute;
    right: 1em;
    bottom: 0.2em;
}

@media (min-width: 992px) {
    .customize-tab-link {
        position: fixed;
        right: 3em;
        bottom: 1em;
    }
}

.custom-btn-1:active,
.custom-btn-1.active,
.custom-btn-1:focus,
.custom-btn-1.focus,
.custom-btn-1:hover
{
    color: #FFF;
    background-color: #3276B1;
}

/* These are used in the Quick Launch wizard to show a fa-icon in the icon input field */
.wui-icon-input {
	padding-left: 28px;
}
.wui-icon-input-overlay {
	position: relative;
	margin-left: 10px;
	margin-top: -22px;
	z-index: 2;
	float: left;
}

.list-group-item.clickable {
    cursor: pointer;
}

.wui-checkbox-list .list-group-item {
    position: relative;
    min-height: 40px;
    padding: 0;
}

.wui-checkbox-list .checkbox-area {
    float: left;
    margin-left: 13px;
    padding-top: 9px;
}

.wui-checkbox-list .main-area {
    display: block;
    min-height: 40px;
    line-height: 40px;
    border-left: solid 1px #ddd;
    margin-left: 40px;
    padding: 0 15px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
}

.wui-checkbox-list .main-area:hover, .list-group-item.clickable:hover {
    background-color: #f5f5f5;
}

.wui-checkbox-list .main-area-content {
    width: 100%;
    text-align: right;
}

.wui-checkbox-list li.active .secondary-row-info {
  color: #dddddd;
}

.wui-checkbox-list li.active .main-area {
  color: white;
}

.wui-checkbox-list li.active .main-area:hover {
    background-color: inherit;
}

.wui-checkbox-list.hide-checkboxes .checkbox-area {
  display: none;
}

.wui-checkbox-list.hide-checkboxes .main-area {
  border-left: none;
  margin-left: 0;
}

.wui-checkbox-list .row-label {
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    max-width: 100%;
    margin-right: 1em;
}

.wui-checkbox-list .secondary-row-info {
    text-align: right;
}

.wui-checkbox-list .content-type-icon {
    margin-right: 8px;
}

.wui-checkbox-list .secondary-row-info.platform-icons {
    font-size: 16px;
    float: right;
}

.wui-checkbox-list .platform-icons .fa {
    margin-left: 5px;
}

.wui-checkbox-list ul {
    list-style-type: none;
}

.wui-checkbox-list .nesting {
    margin-right: 5px;
    color: #ddd;
}

.wui-checkbox-list .disabled-rule .row-label {
    text-decoration: line-through;
    color: gray;
}

/* Sets the element's aspect ratio to 1-to-1 */
.one-to-one {
    position: relative;
    width: 100%;
}

.one-to-one:before {
    display: block;
    content: "";
    padding-top: 100%;
}
.one-to-one > .content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

#policy-coverage {
    margin-top: 20px;
    /* the chart looks silly if it is too big */
    max-width: 250px;
}

#policy-coverage .chart-container {
    width: 100%;
    height: 100%;
}

/* SmartAdmin sets height and margin on all .charts */
#policy-coverage .chart {
    width: auto;
    height: auto;
    margin: 0;
}

#policy-coverage .chart-label {
    margin-top: 7px;
}

#policy-tab .widget-body {
    position: relative;
}

.todo ul {
    font-size: 15px;
}

.platform-selector {
    position: relative;
    margin-left: 20px;
    font-size: 16px;
    width: 90%;
}

.platform-selector .edit-link {
    position: absolute;
    top: 0;
    right: 20px;
}

#user-guide {
}

.user-guide {
	padding: 12px;
}

.password-form footer .btn {
    float: none !important;
}

.checkbox-table-container {
    max-height: 700px;
    overflow-y: auto;
}

.checkbox-table-container table {

}

.checkbox-column {
    vertical-align: middle;
    text-align: center;
    width: 36px;
    max-width: 36px;
}

.dataTable .checkbox-column {
    padding: 8px 10px !important;
    box-sizing: border-box !important;
}

/*
 * Make the header cell look clickable
 */
th.icon-button {
    background-color: #fafafa;
    box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

th.icon-button:hover {
    background-color: #eee;
}

th.icon-button:active {
    position: relative;
    top: 1px;
    left: 1px;
}

dynamic-variable-table table {
    margin-top: 10px;
}

.scrollable-list {
    max-height: 500px;
    overflow-y: auto;
}

.navigation-tabs li a.valid-drop {
    color: #00ff00;
}

.navigation-tabs li a * {
    pointer-events: none;
}

.device-report-content {
    background-color: white;
    max-height: 600px;
}

.link-disabled {
    cursor: not-allowed;
    pointer-events: none;
    color: grey;
}

platform-selector .dndPlaceholder {
    display: block;
    background-color: #ddd;
    min-height: 42px;
}

platform-selector .dndDraggingSource {
    display: none;
}

platform-selector ul[dnd-list] {
    min-height: 42px;
}

/**
 * Rectangular buttons that represent DashboardEntry categories.
 */
.category-button {
    margin: 6px;
    display: inline-block;
}

.category-button button {
    width: 70px;
    height: 70px;
    position: relative;
}

.category-button button.active {
    border: 1px solid #888;
}

.category-button .fa {
    font-size: 3.5em;
}

.category-button .fa.fa-mobile {
    font-size: 4.2em;
}

.category-button .badge {
    position: absolute;
    right: 3px;
    top: 3px;
}

bulletin-list {
    display: block;
}

bulletin-list .scrollable-list {
    overflow-x: hidden;
}

bulletin-list .alert {
    overflow-wrap: break-word;
}

bulletin-list .alert.ng-leave {
    -webkit-animation: flipOutX 0.3s;
    animation: flipOutX 0.3s;
}

bulletin-list .clickable {
    cursor: pointer;
}

bulletin-list .clickable:hover {
    text-decoration: underline;
}

bulletin-categories .alert:last-of-type {
    margin-bottom: 0;
}

bulletin-categories bulletin-list {
    margin-top: 8px;
}

bulletin-categories .button-text {
    font-size: 25px;
    font-weight: bold;
}

.checkbox-list .list-group {
    margin-bottom: 10px;
}

.checkbox-list.empty {
    margin-top: 7px;
}

violation-recipient-list .input-group-btn button {
    width: 90px;
}

.picture-column {
    text-align: center;
}

.picture-column h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

h3.column-title {
    margin-top: 0;
    margin-bottom: 10px;
}

.picture-column .download-link {
    margin-top: 10px;
}

.task-information .communication-message-list button {
    display: inline-block;
    width: 200px;
    text-align: left;
}

.task-information communication-message .code {
    max-height: 800px;
}

.task-information #incorrect-message-order .help-content {
    margin-bottom: 1em;
}

.task-information #view-all-messages {
    margin-top: 10px;
}

#custom-chart-widget {
    position: relative;
}

#custom-chart-widget .configure-chart-link {
    position: absolute;
    z-index: 10;
}

td.icon-column {
    text-align: center;
}

step-summary-table .icon-column {
    width: 40px;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

step-summary-table .icon-column a {
    font-size: 16px;
    color: inherit;
}

.unfocused-section {
    opacity: 0.3;
}

.apns-section {
    position: relative;
}

.apns-section .section-number {
    position: absolute;
    top: 5px;
    left: 5px;
}

.diagnose-policy-status .row {
    position: relative;
}

.diagnose-policy-status h3 {
    margin-top: 5px;
}

.diagnose-policy-status .action-link {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}

.diagnose-policy-status .dt-toolbar {
    padding: 0;
}

.diagnose-policy-status .status-cell {
    font-weight: bold;
}

.syncml-page {
    background-color: white;
    min-height: 100%;
}

.syncml-container {
    margin: 0 50px;
}

.property-table {
    table-layout: fixed;
}

.property-table caption {
    text-align: center;
}

.extra-row-spacing td {
    padding-top: 8px !important;
}

/*
 * Dashboard entry list should take up as much vertical space as possible
 * without increasing the widget height. The media rule disables this for
 * smaller than md screens so that Bootstrap responsiveness works right.
 */
@media (min-width: 992px) {

    device-overview-widget .main-row {
        display: table;
        width: 100%;
    }

    device-overview-widget .fullscreen-widget .main-row {
        height: 100%;
    }

    device-overview-widget .main-col {
        float: none;
        vertical-align: top;
        display: table-cell;
    }

    device-overview-widget .bulletin-column {
        position: relative;
    }

    device-overview-widget .bulletin-column h3 {
        text-align: center;
        margin-top: 0;
        margin-bottom: 10px;
    }

    device-overview-widget .bulletin-column .bulletin-list-container {
        position: absolute;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        top: 0;
        right: 0;
        padding: 0 5px 0 10px;
    }

    device-overview-widget .scrollable-list {
        max-height: 100%;
    }
}

code-editor {
    display: block;
    position: relative;
}

code-editor .CodeMirror {
    border: 1px solid rgb(204,204,204);
    height: 300px;
}

code-editor.unlimited-height .CodeMirror {
    height: auto;
}

code-editor.unlimited-height .CodeMirror-scroll {
    min-height: 300px;
}

code-editor .CodeMirror-focused {
    border: 1px solid #66afe9;
}

.heading-table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 10px;

    border-spacing: 20px;
    border-collapse: separate;
}

.heading-table .heading-cell {
    font-size: 15px;
}

#show-all-device-identifiers {
    margin-bottom: -10px;
    margin-top: -8px;
}

table-pagination li {
    user-select: none;
}

/**
 * An element that has two sections, one growing as much and one taking only what it needs.
 */
.two-section-flex {
    display: flex;
}

.two-section-flex .grow-section {
    flex: auto;
}

.two-section-flex .fixed-section {
    flex: initial;
}

.sparks-info.invisible, .resource-overview.invisible {
    opacity: 0;
}

.sparks-info, .resource-overview {
    transition-property: opacity;
    transition-duration: 0.5s;
}

big-button {
    display: inline-block;
    vertical-align: top;
}

big-button.dummy-button {
    visibility: hidden;
    width: 1px;
}
big-button.dummy-button .wui-action-button {
    width: 0px;
}

device-map {
    display: block;
    height: 100%;
}

device-map .map-container {
    height: 100%;
}

.jarviswidget device-map .map-container {
    min-height: 500px; /* allow full-screen mode to be taller */
}

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}

/* flip the pane when hovered */
.flip-container.flipped .flipper {
  transform: rotateY(180deg);
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.flip-container .front, .flip-container .back {
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

.flip-container .front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

.flip-container .back {
  transform: rotateY(180deg);
}

install-link .flip-container, install-link .front, install-link .back {
  display: block;
  width: 250px;
  height: 230px;
}

device-overview-widget .client-installer {
  float: right;
}

.qrcode-container {
  position: relative;
  width: 250px;
}

qrcode {
  display: block;
  margin-left: 25px;
  margin-right: 25px;
}

.qr-container .fa {
  position: absolute;
  top: 80px;
  font-size: 40px;
  cursor: pointer;
}

.qr-container .fa.left {
  left: 0;
}

.qr-container .fa.right {
  right: 0;
}

text-report-widget {
  display: block;
}

text-report-widget widget {
  display: inline-block;
  min-width: 100%;
}

text-report-widget .jarviswidget .dataTables_wrapper {
  display: inline-block;
  min-width: 100%;
}

settings-panel {
    display: block;
}

.content-section-title {
    color: #666;
    font-size: 110%;
    margin-bottom: 5px;
}

.group-app-catalog-widget .wui-checkbox-list .main-area:hover {
    background-color: unset;
    cursor: unset;
}

resource-tree .role-viewer {
    color: orange;
}

resource-tree .role-admin {
    color: green;
}

.widget-tabs ul.nav-tabs li:not(.active) {
    border-right: 1px solid rgba(0, 0, 0, 0.09);
}

.about-img {
    vertical-align: middle;
    width: 100%;
    height: auto;
}

.main-menu-button{
    padding: 5px 5px 5px 5px;
}

.main-menu-button:hover{
    padding: 5px 5px 5px 5px;
    background: rgb(64, 64, 64);
}

.main-menu-button:active{
    padding: 6px 4px 4px 6px;
    background: rgb(64, 64, 64);
}

numeric-report chart {
    display: block;
    width: 70%;
    margin: 0 auto;
}

numeric-report chart[chart-type=bar] {
    width: 100%;
}