body, html {
    margin: 0;
    padding: 0;
    background-color: #e7e9ed;
    font-family: Calibri, Segoe, "Segoe UI", Candara, Optima, Arial, sans-serif;
}

/*:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}*/

.contentContainer-dark .red {
    background-color: rgb(127, 127, 127);
}

.red {
    background-color: #F2F2F2;
}

.otccWidget {
    position: absolute;
    margin-left: 5px;
    /*height: calc(100% + 0px);*/
}

.pieWidget {
    padding-top: 10px;
    padding-left: 10px;
}
.salesWidget {
    /*padding-top: 10px;
    padding-left: 10px;*/
}
.DashBoxPosition {
    margin: 0%;
    position: absolute;
}

.page-header {
    border-bottom: 3px solid #cfcfcf;
    height: 68px;
    left: 10px;
    top: 20px;
}

.AddWidgetIcon {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAwUExURXV1dX19fZmZmaGhoaqqqv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANuekHYAAAAGdFJOU///////ALO/pL8AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA4SURBVCjPYwhFAmBOCAODKZwTxMCgSgNOiJKSkiIDgxCQMmUIYIADVmI5QQgDVGnpUAwOBISGAgASCD5NCOThrAAAAABJRU5ErkJggg==") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.logo {
    position: absolute;
    top: 4px;
}

.shadow {
    -webkit-box-shadow: 0px 0px 2px 0px #cfcfcf;
    -moz-box-shadow: 0px 0px 3px 0px #cfcfcf;
    box-shadow: 0px 0px 3px 0px #cfcfcf;
}

.top-bar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 4px;
    background-color: #abc43a;
}

.show-header:before {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 24px;
    margin-left: -17px;
    height: 15px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    content: "";
    font-family: FontAwesome;
    text-align: center;
    vertical-align: top;
    color: white;
    background: #abc43a;
}

.hide-header:before {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 24px;
    margin-left: -17px;
    height: 15px;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    content: "";
    font-family: FontAwesome;
    text-align: center;
    vertical-align: top;
    color: white;
    background: #abc43a;
}

.container {
    overflow: hidden;
    position: absolute;
    width: calc(100% - 4px);
    left: 2px;
    bottom: 8px;
    top: 75px;
}

.contentContainer {
    align-items: center;
    height: calc(100% - 2px);
    justify-content: center;
    position: relative;
    background-color: #fff;
    width: calc(100% - 2px);
    border: 1px solid #cfcfcf;
    -webkit-box-shadow: 0px 0px 3px 0px #cfcfcf;
    -moz-box-shadow: 0px 0px 3px 0px #cfcfcf;
    box-shadow: 0px 0px 3px 0px #cfcfcf;
}

    .contentContainer a {
        color: #444;
    }

.content {
    width: 100%;
    position: absolute;
    height: calc(100% - 32px);
    overflow: hidden;
}

    .content .horizontal:first-child {
        float: left;
        width: calc(100% - 220px);
        height: 100%;
    }

    .content .horizontal:nth-child(2) {
        float: left;
        width: 220px;
        height: 100%;
    }

    .content > .vertical:first-child {
        width: 100%;
        height: calc(100% - 110px);
    }

    .content > .vertical:nth-child(2) {
        width: 220px;
        height: 110px;
        padding-left: calc((100% - 220px)/2);
    }

.gear {
    float: right;
    margin: 5px;
    cursor: pointer;
}

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

.content-drag-hover {
    border: 1px solid #cccccc;
}

.header {
    width: 100%;
    height: 32px;
    color: #666666;
    border-bottom: 1px solid #cfcfcf;
    background-color: rgb(252, 252, 252);
}

.header-drag-hover {
    /*background-color: rgb(240,240,240);*/
}

.header .shortTitle {
    color: #666666;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    height: 30px !important;
    overflow: hidden;
    right: 30px;
    white-space: nowrap;
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    left: 7px;
    top: 7px;
}

.header .title {
    color: #666666;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    height: 30px !important;
    overflow: hidden;
    right: 80px;
    white-space: nowrap;
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    left: 7px;
    top: 7px;
}

.grid {
    position: relative;
    top: calc((100% - 100px) / 2);
    left: 8%;
}

.contentContainer-dark .dx-datagrid-rowsview .dx-row:nth-child(odd) {
    background-color: #333333;
}

.dx-datagrid-rowsview .dx-row:nth-child(odd) {
    background-color: #f6f6f6;
}

/*.dx-datagrid-rowsview {
    border-top: 1px solid #ddd;
}*/

.dx-datagrid .dx-column-lines > td {
  /*border-left: 1px solid #d2d2d2;*/
  /*border-right: 1px solid #d2d2d2;*/
}


.gridSetting {
    float: right;
    margin: 5px;
    cursor: pointer;
}
/*.header :hover > .gridSetting {
    display: block;
}*/

/* 110 px = height of grid, left = (100% - width/2) text-overflow:ellipsis !important; */
.toolbar {
    position: absolute;
    top: 10px;
    left: calc(50% - 81px);
}

.toolbar-light {
    position: absolute;
    top: 10px;
    left: calc(50% - 81px);
    background: #fff;
}

.toolbar-dark {
    position: absolute;
    top: 10px;
    left: calc(50% - 81px);
    background: #333;
}

.refreshText {
    position: absolute;
    top: 26px;
    right: 0;
    font-size: 16px;
    /*color: #666666;*/
}

.log-in-text {
    position: absolute;
    top: 22px;
    right: 0px;
    /*color: #444;*/
    /*border-bottom: 1px solid #abc43a;*/
}
/* +32 px as no header */
.emptyWidget {
    height: calc(100% + 32px + 1px);
    width: 100%;
}

    .emptyWidget .content {
        color: #abc43a;
        font-size: 25px;
        position: absolute;
        top: calc((100%) / 2);
        text-align: center;
    }

/* drag drop*/
.drag-hover {
    background-color: gray;
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

.dialogContent {
    padding: 10px 20px 20px 20px;
    background: #fff;
    color: #444;
}

/* Custom sections - syntax = .sectionROWXCOL*/
.section1x1, .section1x2, .section1x3, .section1x4,
.section2x1, .section2x2, .section2x3, .section2x4,
.section3x1, .section3x2, .section3x3, .section3x4 {
    margin: 0%;
    position: absolute;
}

/* calc(% - universal width - left/top value) */
.section2x2 {
}

.section2x1 {
}

.section1x1 {
}

.section1x2 {
}

/* layout for custom */
/* 2x2, 2x1, 2x1*/
/* 1x1, 1x1, 1x2 */
/*.containerCustom > section:first-child {
    left: 8px;
    top: 4px;
    width: calc(50.00% - 8px - 8px);
    height: calc(66% - 8px - 4px);
}

.containerCustom > section:nth-child(2) {
    left: 50%;
    top: 4px;
    width: calc(25%);
    height: calc(66% - 8px - 4px);
}

.containerCustom > section:nth-child(3) {
    left: calc(75% + 8px);
    top: 4px;
    height: calc(66% - 8px - 4px);
    width: calc(25% - 8px - 8px);
}

.containerCustom > section:nth-child(4) {
    left: 8px;
    top: 66%;
    width: calc(25% - 8px - 8px);
    height: calc(34% - 0px);
}

.containerCustom > section:nth-child(6) {
    left: 25%;
    top: 66%;
    width: calc(25% - 8px);
    height: calc(34% - 0px);
}

.containerCustom > section:nth-child(5) {
    left: 50%;
    top: 66%;
    width: calc(50% - 8px);
    height: calc(34% - 0px);
}*/

/*.containerCustom > section:first-child {
    left: 8px;
    top: 0px;
    width: calc(50% - 16px);
    height: calc(66%);
}

.containerCustom > section:nth-child(2) {
    left: 50%;
    top: 0px;
    width: calc(25% - 8px);
    height: calc(66% );
}

.containerCustom > section:nth-child(3) {
    left: calc(75% );
    top: 0px;
    height: calc(66%);
    width: calc(25% - 8px);
}

.containerCustom > section:nth-child(4) {
    left: 8px;
    top: calc(66% + 8px);
    width: calc(25% - 16px );
    height: calc(34% - 8px);
}

.containerCustom > section:nth-child(5) {
    left: 25%;
    top: calc(66% + 8px);
    width: calc(25% - 8px);
    height: calc(34% - 8px);
}

.containerCustom > section:nth-child(6) {
    left: 50%;
    top: calc(66% + 8px);
    width: calc(50% - 8px);
    height: calc(34% - 8px);
}*/

/*ngdialog*/
.dark-datagrid .ngdialog-overlay {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.45);
}


/* Reports Layout */
/*.reportContainer > section:first-child {
    left: 8px;
    top: 0px;
    width: calc(75% - 16px);
    height: calc(100%);
}

.reportContainer > section:nth-child(2) {
    left: calc(75%);
    top: 0px;
    width: calc(25% - 8px);
    height: calc(33% );
}

.reportContainer > section:nth-child(3) {
    left: calc(75%);
    top: calc(33% + 8px);
    height: calc(33% - 8px);
    width: calc(25% - 8px);
}

.reportContainer > section:nth-child(4) {
    left: calc(75%);
    top: calc(66% + 8px);
    width: calc(25% - 8px);
    height: calc(34% - 8px);
}*/


/* Reports Layout with 1 Widget */
.reportContainer > section:first-child {
    left: 8px;
    top: 0px;
    width: calc(100% - 16px);
    height: calc(100%);
}


video, #console {
    border: none !important;
    border-radius: 0px !important;
}