.emrc {
    z-index: 1;
}

.emrc-app {
    font-family: Helvetica,Arial,sans-serif;
}

.panel-overlay-parent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.panel-overlay-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.association-overlay {
    position: absolute;
	overflow: hidden;
}

.association-overlay.top {
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
}

.association-overlay.bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
}

.association-overlay.left {
    top: 0;
    left: 0;
    width: 48px;
    height: 100%;
}

.association-overlay.right {
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
}

.floating-sheet {
    position: absolute;
    bottom: 88px;
    right: 16px;
    height: auto;
    border-radius: 2px;
    max-width: 608px;
}

.floating-sheet ul {
    list-style-type: none;
}

.floating-sheet li {
    cursor: pointer;
}

.floating-sheet li.disabled {
    cursor: default;
}

.scroll-container {
    position: absolute;
    overflow: hidden;
    height: auto;
    width: auto;
}

.association-item {
    min-height: 48px;
    position: relative;
    padding-left: 54px;
}

.association-item-action {
    min-height: 48px;
    position: relative;
}

li .association-item-image {
    display: inline-block;
    position: absolute;
    left: 0;
}

.association-item-action-label {
    display: block;
    line-height: 48px;
    height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.association-item-label {
    display: block;
    line-height: 20px;
    height: 20px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding-top: 4px;
}

.association-item-status {
    display: block;
    line-height: 20px;
    height: 20px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding-bottom: 4px;
}

.association-item.expandable {
    padding-right: 54px;
}

.association-item-list {
    position: relative;
    min-width: 100px;
    min-height: 48px;
    color: #212121;
    background-color: white;
}

.association-action-list-item .expandable {
    position: absolute;
    right: 0;
}

.fifty-percent-opacity {
    opacity: 0.5;
}

.panel-osd-container {
    position: absolute;
}

.panel-osd-container .panel-osd-content {
    position: absolute;
    display: inline-block;
    font-family: Helvetica,Arial,sans-serif;
    white-space: nowrap;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    overflow: hidden;
    z-index: 1;
}

.divider-line {
    background-color: #dddddd;
    height: 1px;
    position: absolute;
    left: 0;
    width: 100%;
}

.divider-line.focused {
    background-color: #0078c6;
}

.material-button {
    display: inline-block;
    cursor: pointer;
    min-width: 40px;
    font-size: 16px;
    padding: 10px 8px 10px 8px;
    margin: 4px;
    color: #0078c6;
    text-transform: uppercase;
    text-align: center;
}

.material-button.pressed {
    background-color: #BDBDBD;
}

.material-button.disabled, .material-button.hover.disabled, .material-button.pressed.disabled {
    cursor: default;
    color: #808080;
}

.material-button.persistent-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.secondary-text {
    color: #606060;
    vertical-align: middle;
}

.disabled-text {
    color: #808080;
}

.material-checkbox {
    position: relative;
    color: #212121;
    cursor: pointer;
    padding-left: 54px;
    width: 100%;
}

.material-checkbox-image {
    position: absolute;
    left: 0;
}

.material-checkbox-label {
    display: inline-block;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.material-input-container {
    height: 72px;
}

.material-input {
    display: block;
    border: 0;
    width: 100%;
    outline-width: 0;
    font-size: 16px;
    padding-bottom: 8px;
    color: #666666;
}

.material-input-label {
    font-size: 12px;
    line-height: 16px;
}

.security-integrations-device-list {
    background: white;
    color: #212121;
    list-style-type: none;
}

.material-label {
    color: #666666;
    font-size: 12px;
    line-height: 16px;
    cursor: default;
    display: block;
    padding: 16px 0 8px;
}

.material-label.touch-target-height {
    line-height: 44px
}

.after-colon {
    padding-left: 4px;
}

/*
 Header Bar
 */
.app-header {
    position: fixed;
    width: 100%;
    background-color: #007ac3;
    padding: 0;
    height: 48px;
    margin-bottom: 1px;
    z-index: 1;
    top: 0;
    left: 0;
}

/*
 Toolbar
*/
.app-header-toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.app-header-toolbar-title {
    font-weight: normal;
    line-height: 48px;
    min-height: 48px;
    text-align: center;
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: white;
    text-shadow: 0 0px 0 #ffffff;
    width: 1%;

    -webkit-box-flex: 1; /* Android < 4.4 */
    -webkit-flex: 1; /* iOS < 9.3 */
    -ms-flex: 1; /* IE 10 */
    flex: 1;
}

.app-header-toolbar-items.left {
    width: 46px;
}

.app-header-toolbar-items.right {
    min-width: 46px;
    text-align: right;
}

.app-header-toolbar-item {
    display: inline-block;
}

.app-header-toolbar-item.list-item {
    display: block;
}

.app-header-toolbar-item.disabled .app-header-toolbar-item-title {
    color: #606060;
}

.app-header-toolbar-item .mini-badge {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 12px;
    left: 30px;
    background-color: red;
    border-radius: 50%;
}

.app-header-toolbar-menu .app-header-toolbar-item-title {
    line-height: 46px;
    vertical-align: middle;
}

/**
 Drag Drop Toolbar
 */
.app-header-drag-drop-toolbar .app-header-toolbar-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.app-header-drag-drop-toolbar .app-header-toolbar-item {
    display: block;
    text-align: center;

    -webkit-box-flex: 1; /* Android < 4.4 */
    -webkit-flex: 1; /* iOS < 9.3 */
    -ms-flex: 1; /* IE 10 */
    flex: 1;
}

.app-header-drag-drop-toolbar .app-header-toolbar-item.active {
    -webkit-box-shadow: inset 0px 0px 5px 5px rgba(255, 255, 255, 0.75);
    -moz-box-shadow:    inset 0px 0px 5px 5px rgba(255, 255, 255, 0.75);
    box-shadow:         inset 0px 0px 5px 5px rgba(255, 255, 255, 0.75);
}

.app-header-drag-drop-toolbar .app-header-toolbar-item.icon-dismiss {
    -webkit-box-flex: 2; /* Android < 4.4 */
    -webkit-flex: 2; /* iOS < 9.3 */
    -ms-flex: 2; /* IE 10 */
    flex: 2;

    background-color: #f89b42;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f89b42), to(#f89b42)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(#f89b42, #f89b42); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(#f89b42, #f89b42); /* FF3.6 */
	background-image:     -ms-linear-gradient(#f89b42, #f89b42); /* IE10 */
	background-image:      -o-linear-gradient(#f89b42, #f89b42); /* Opera 11.10+ */
    background-image:         linear-gradient(#f89b42 , #f89b42);
}

.navigation-drawer-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.25);
    z-index: 1000;
}

.navigation-drawer-container .navigation-drawer {
    background-color: #FFFFFF;
}

.navigation-drawer-container .navigation-drawer-item-container .navigation-drawer-item,
.navigation-drawer-container .navigation-drawer-title {
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    overflow: hidden;
    padding-left: 16px;
    vertical-align: middle;
    line-height: 40px;
    white-space: nowrap;
}

.navigation-drawer-container .navigation-drawer-title {
    line-height: 48px;
    font-weight: bold;
    cursor: default;
    height: 48px;
}

.navigation-drawer-title-image {
    padding-right: 6px;
    vertical-align: middle;
}

.navigation-drawer-title-text {
    vertical-align: middle;
}

.navigation-drawer-container .navigation-drawer-item-container.hover {
    background-color: #f0f0f0;
}

.navigation-drawer-container .navigation-drawer-item #expandListIcon {
    position: absolute;
    right: 5px;
    margin-top: 10px;
}

.navigation-drawer-container .navigation-drawer-item span {
    color: #000000;
}

.navigation-drawer-container .navigation-drawer-item span .red-badge {
    position: relative;
    top: 8px;
    float: right;
    padding: 2px 6px;
    margin-right: 8px;
    line-height: 16px;
    background-color: red;
    color: white;
    border-radius: 50%;
}

.navigation-drawer-hover-target {
    position: absolute;
    height: 100%;
    width: 10px;
    z-index: 151;
}

/*
    Search selection overlay
*/
.panel-overlay-container .search-selection-overlay {
    height: 100%;
    width: 100%;
}
.panel-overlay-container .search-selection-overlay.shaded {
    background-color: rgba(0,122,195, 0.4);
    height: 100%;
    width: 100%;
    position: absolute;
}
.panel-overlay-container .search-selection-overlay .checkmark {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    position: absolute;
    height: 24px;
    width: 24px;
    top: 10px;
    left: 10px;
}
.panel-overlay-container .search-selection-overlay .checked {
    background-position: -120px -168px;
}
.panel-overlay-container .search-selection-overlay .unchecked {
    background-position: -120px -192px;
}
.panel-overlay-container .search-selection-overlay .serverNameOsd {
    color: white;
    top: 10px;
    right: 10px;
    position: absolute;
    left: 40px;
    text-align: right;
}

/*
    SearchDetails Dialog
*/
.search-details-dialog .cameras-list, .search-details-dialog .use-server-time {
    height: 48px;
    font-size: 12px;
}
.search-details-dialog .cameras-list .cameras-list-title {
    padding-top: 16px;
    position: absolute;
    color: #666666;
}
.search-details-dialog .use-server-time-label {
    padding-top: 16px;
    position: absolute;
    color: #666666;
}
.search-details-dialog .server-time-toggle {
    float: right;
}
.search-details-dialog .server-time-toggle .on {
    background-position: -24px -288px;
}

.search-details-dialog .server-time-toggle .off {
    background-position: 0px -288px;
}

/*
    Search Duration Menu
*/
.search-duration-menu {
    width: 160px;
    right: 0;
    top: 44px;
}

/* Manually override react toolbox overlays */

div[data-react-toolbox='overlay'] > :first-child {
    z-index: 10000 !important;
    width: 100%;
    height: 100%;
}

div[data-react-toolbox='dialog'] {
    z-index: 11000;
    font-family: Roboto, sans-serif;
    border: 1px solid #666666;
    margin: 0 auto;
    position: relative;
}
div[data-react-toolbox='dialog']  *,
div[data-react-toolbox='dialog']  *:before,
div[data-react-toolbox='dialog']  *:after {
    box-sizing: border-box;
}
div[data-react-toolbox='dialog'] header h3 {
    font-size: 34px;
    line-height: 40px;
}
div[data-react-toolbox='dialog'] button[data-react-toolbox='button'] {
    font-size: 0.8rem;
}
div[data-react-toolbox='calendar'] span.material-icons {
    line-height: 20px;
}
div[data-react-toolbox='calendar'] button[data-react-toolbox='button'] .material-icons {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    height: 20px;
    width: 20px;
}
div[data-react-toolbox='calendar'] button[data-react-toolbox='button'][class*="prev"] .material-icons {
    background-position: -2px -74px;
}
div[data-react-toolbox='calendar'] button[data-react-toolbox='button'][class*="next"] .material-icons {
    background-position: -2px -122px;
}
div[data-react-toolbox='calendar'] button[data-react-toolbox='button'] .material-icons span {
    display: none;
}
div[data-react-toolbox='clock'] [class*="face"] {
    -ms-transform: translateX(-50%) translateY(-50%);
}
div[data-react-toolbox='clock'] [class*="hand"] {
    -ms-transform-origin: 50% 100%;
}
div[data-react-toolbox='calendar'] div[data-react-toolbox='day'] {
     padding: 0;
}

/**
 * Correct iOS8 calendar layout.
 */
div[data-react-toolbox='calendar'] [class*="week"],
div[data-react-toolbox='calendar'] [class*="days"] {
    display: -webkit-flex;
}

div[data-react-toolbox='calendar'] [class*="days"] {
    -webkit-flex-wrap: wrap;
}

div[data-react-toolbox='calendar'] [class*="week"] span,
div[data-react-toolbox='calendar'] [class*="day"] {
    -webkit-flex: 0 0 14.28571%;
}

/**
 * Support for devices that do not have flexbox.
 */
.no-flex div[data-react-toolbox='calendar'] [class*="week"] span {
    padding: 0 18px 0 18px;
}
.no-flex div[data-react-toolbox='calendar'] [class*="days"] {
    display: inline-block;
}
.no-flex div[data-react-toolbox='calendar'] [class*="days"]:first-child {
    margin-left: 14.28571%;
}
.no-flex div[data-react-toolbox='calendar'] div[data-react-toolbox='day'] {
    float: left;
    width: 14.28571%;
}

/**
 * Material Lists
 */
.material-list-item {
    padding: 8px 16px;
    font-size: 15px;
    min-height: 48px;

    /**
     * Note: This transparent background is set on this element due to an issue seen on IE touch devices.  It was observed
     * That adding the 'pressed' class to an element with this 'material-list-item' class would cause scrolling to
     * break when the user is trying to scroll up the page (but not down the page), all the 'pressed' class does
     * is set the background.  By using this transparent background IE is able to scoll in both directions again.
     **/
    background: rgba(0,0,0,0);
}

.material-list-item.no-padding {
    padding: 0;
}

.material-list-item.no-horizontal-padding {
    padding-left: 0;
    padding-right: 0;
}

.material-list-item-left {
    display: inline-block;
    float: left;
}

.material-list-item-right {
    float: right;
}

.material-list-item-left label,
.material-list-item-right label {
    display: inline-block;
}

.material-list-item-content {
    cursor: pointer;
}

.material-list-item-content.error {
    cursor: default;
}
.material-list-item-content.error .line-one:before {
    content: '*';
}

.material-list-item-content .line-one,
.material-list-item-content .line-two,
.material-list-item-content .line-three {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.material-list-item-content .line-one {
    color: #000000;
}

.material-list-item-content.disabled .line-one {
    color: #606060;
}

.material-list-item-content.error .line-one {
    color: #F44336;
}

.material-list-item-content .line-two,
.material-list-item-content .line-three {
    color: #606060;
}

.material-list-item .text-content {
    display: inline-block;
}

.material-list-item.pressed:not(.disabled) {
    background: #d1d1d1;
}

/**
 * Styles for single-line material-list-item elements
 **/
.material-list-item.single-line {
    height: 48px;
    line-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
}

.material-list-item.single-line .material-list-item-content {
    line-height: 48px;
    vertical-align: top;
    width: 100%;
}

.material-list-item.single-line.icon .material-list-item-content {
    line-height: 48px;
    vertical-align: top;
    width: 75%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.material-list-item.single-line .material-list-item-left,
.material-list-item.single-line .material-list-item-right{
    height: 48px;
}

.material-list-item.single-line .material-list-item-left .material-icon,
.material-list-item.single-line .material-list-item-right .material-icon {
    margin: 2px;
}

.material-list-item.single-line .material-list-item-left .material-icon .icon,
.material-list-item.single-line .material-list-item-right .material-icon .icon {
    margin: 10px;
}

.material-list-item.single-line .material-list-item-left .material-list-collapse-toggle,
.material-list-item.single-line .material-list-item-right .material-list-collapse-toggle {
    margin-bottom: 2px;
}

/**
 * Styles for two-line material-list-item elements
 **/
.material-list-item.two-line {
    height: 72px;
    line-height: 72px;
    padding-top: 0;
    padding-bottom: 0;
}

.material-list-item.two-line .material-list-item-content {
    vertical-align: top;
    padding-top: 16px;
    width: 100%;
}

.material-list-item.two-line.icon .material-list-item-content {
    width: 75%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.material-list-item.two-line .material-list-item-content > span{
    line-height: 20px;
    vertical-align: top;
}

.material-list-item.two-line .material-list-item-left,
.material-list-item.two-line .material-list-item-right {
    height: 72px;
    line-height: 72px;
    vertical-align: middle;
}

.material-list-item.two-line .material-list-item-left .material-icon,
.material-list-item.two-line .material-list-item-right .material-icon {
    padding: 0;
    margin: 2px;
    vertical-align: middle;
}

.material-list-item.two-line .material-list-item-left .material-icon .icon,
.material-list-item.two-line .material-list-item-right .material-icon .icon {
    margin: 10px;
}

.material-list-item.material-list-header {
    background-color: #7f7f7f;
    vertical-align: middle;
    cursor: pointer;
    padding-left: 48px;
}

.material-list-header .material-list-item-content .line-one,
.material-list-header .material-list-item-content .line-two,
.material-list-header .material-list-item-content .line-three {
    color: white;
    vertical-align: middle;
    font-size: 16px;
}

.material-list-item.material-list-header.pressed {
    background: #B8B8B8;
}

.material-list-header.collapsible {
    padding-left: 0;
}

/**
 * Material Dialog styles
 */
/* The container is the fullscreen transparent overlay that appears 'under' the dialog */
.material-dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.25);
}

.material-dialog {
    background-color: #FFFFFF;
    max-width: 300px;
    min-width: 280px;
    position: relative;
    margin: 24px auto;
    border-radius: 2px;
    overflow: hidden;
    padding-top: 24px;
}

.material-dialog .title {
    cursor: default;
    font-size: 20px;
    padding: 0 24px; /* title has 24 pixels of left and right padding */
    margin-bottom: 8px;
}

.material-dialog .dialog-content {
    /* It is important to have the border present, even if not displayed
     as the scrollbar container will calculate the max size that should not
     change on the addition of the border.
     */
    border-width: 1px 0;
    border-style: solid;
    border-color: transparent;
}

.material-dialog .dialog-content.scrollbarPresent {
    border-color: #dddddd;
}

.material-dialog .content .inner {
    padding: 0 24px 24px; /* inner content has 24px left and right padding as this is inside the scroll area */
}

.material-dialog .button-bar {
    clear: both;
    height: 52px;
    width: 100%;
}

.material-dialog .button-bar .buttons {
    float: right;
    margin: 8px 0; /* 8 pixels of top and bottom margin around the button area */
    height: 36px;
}

.material-dialog .button-bar .buttons .material-button {
    margin: 0 8px 0 0; /* 8 pixels of right margin outside of the button */
    padding: 0 8px; /* 8 pixels of left and right padding around the button text */
    height: 36px;
    line-height: 36px;
    font-size: 13px;
}

.material-dialog.no-support-dialog .content span {
    color: #000000;
}

/**
 * Material Simple Menu
 */
.material-simple-menu {
    background-color: #FFFFFF;
    border-radius: 2px;
    position: absolute;
    overflow: hidden;
    margin: 2px;
}

.material-simple-menu .iScrollWrapper {
    position: relative; /* needed for IScroll */
    overflow: hidden;
    padding: 8px 0;
}

.material-simple-menu-item {
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    padding: 0 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/**
 * React Page
 * FUTURE - Remove this class, refactor usage to emrc-page before the 12/15/2016 release.
 */
.react-page {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
    overflow: hidden;
}

/**
 * List Container
 */
.react-page .listContainer {
    position: absolute;
    width: 100%;
    bottom: 20px;
    overflow: hidden;
}
.react-page .listContainer .iScrollWrapper {
    height: 100%;
}
.react-page .listContainer ul {
    background: white;
    position: absolute;
    width: 100%;
    margin-top: 7px;
}
.react-page .listContainer li {
    border-bottom: 1px solid #dddddd;
    cursor: pointer;
    padding: 10px 0;
}

/**
 * List Search Page
 */
.list-search-filter-dialog .content .inner {
    padding-bottom: 34px;
}

.list-search-filter-dialog .sortOptionInput {
    border: none;
    cursor: pointer;
    color: #000000;
    text-shadow: 0 0px 0 #000000;
    font-size: 14px;
}

.list-search-filter-dialog .sortOptionsExpandIcon {
    position: absolute;
    top: -12px;
}

.list-search-filter-dialog ul.sortOptionsDropdown {
    position: relative;
    list-style-type: none;
    font-size: 13px;
}

.list-search-filter-dialog ul.sortOptionsDropdown li {
    padding: 10px 0 10px 16px;
    cursor: pointer;
    color: #000000;
    text-shadow: 0 0px 0 #000000;
}

.list-search-filter-dialog ul.sortOptionsDropdown li.selected {
    color: #0078c6;
}

.list-search-filter-dialog ul.sortOptionsDropdown li.pressed {
    color: #d1d1d1;
}
.react-page.listSearch .resultCount {
    position: absolute;
    top: 94px;
    padding: 10px 0 0 16px;
    font-size: 12px;
    margin-top: 4px;
}

.react-page.listSearch .currentSort {
    position: absolute;
    top: 94px;
    font-size: 13px;
    right: 0;
}

.listSearch .listContainer {
    top: 124px;
}

.listSearch .listContainer .line:nth-child(2) .lineTitle {
    font-size: 0;
}

.listSearch .listContainer .line {
    padding-left: 110px;
    padding-top: 3px;
}

.listSearch .listContainer .line:nth-child(1) {
    position: absolute;
}

.listSearch .listContainer .line:nth-child(2) {
    font-weight: bold;
}

.listSearch .listContainer span {
    font-size: 13px;
    white-space: nowrap;
}

.react-page.listSearch .thumbnailImgDiv {
    position: absolute;
    padding: 3px 0 0 16px;
}

.react-page.listSearch .thumbnailImgDiv.noCamera {
    height: 80px;
    width: 80px;
    display: inline-block;
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
    background-position: -352px 0;
    margin-left: 16px;
}

.react-page.listSearch .thumbnailImgDiv.noCamera img {
    display: none;
}

.react-page.listSearch .filterBoxContainer {
    position: relative;
    top: 50px;
}

.react-page.listSearch .filterBoxContainer .filterBoxDiv {
    margin-right: 48px;
}

.react-page.listSearch .filterBoxContainer .expandIcon {
    position: absolute;
    cursor: pointer;
    right: 2px;
    top: 2px;
    margin-top: 0;
}

/**
 * Search Filter
 */
div.filterBoxContainer {
    height: 44px;
    width: 100%;
    line-height: 44px;
}

.filterBoxDiv {
    margin: 5px;
    height: 100%;
    border: 1px solid #A0A0A0;
    background-color: white;
}

.filterBoxDiv .material.clearFilter {
    position: absolute;
    right: 7px;
}

.filterBoxDiv.hasExpandIcon .material.clearFilter {
    right: 49px;
}

.filterBoxDiv input {
    outline: none;
    width: 75%;
    background: transparent;
    border: none;
    font-size: 17px;
    box-sizing: border-box;
    text-shadow: 0 0px 0 #000000;
}

.filterBoxDiv.shadow-inset {
    -moz-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
}

.filterBoxDiv .filterBox {
    float: left;
}

/**
 * Material Card styles.
 */
.material-card {
    background-color: white;
    margin: 8px;
    border-radius: 2px;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.26);
}

.material-card.hover {
    box-shadow: 0 6px 20px 0 rgba(0,0,0,.19), 0 8px 17px 0 rgba(0,0,0,.2);
}

.material-card .card-content {
    padding: 24px 16px 16px;
}

.material-card.no-button-bar .card-content {
    padding: 24px 16px;
}

.material-card .card-title {
    color: #212121;
    font-size: 24px;
}

.material-card .card-subtitle {
    color: #606060;
    font-size: 14px;
    padding-top: 12px;
}

.material-card .card-body {
    color: #515151;
    font-size: 14px;
    padding-top: 16px;
}

.material-card .card-button-bar {
    padding: 8px 4px;
}

.material-card .material-button {
    margin: 0 4px;
}

/**
 * Slide left on destroy animation for react css transition.
 */
.slide-left-on-destroy-enter {
    /*
    initially hidden, this way when dismissing the last alert or dismissing all alerts the
    there are no alerts card is displayed after the dismiss is done
    */
    display: none;
}

.slide-left-on-destroy-leave.slide-left-on-destroy-leave-active {
    display: block;
}

.slide-left-on-destroy-leave {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.slide-left-on-destroy-leave.slide-left-on-destroy-leave-active {
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    transform: translate(-100%, 0);

    -webkit-transition: -webkit-transform 250ms ease-out;
    -ms-transition: transform 250ms ease-out;
    transition: transform 250ms ease-out;
}

/**
 * System Alerts Page Specific styles.
 */
.system-alerts-filter-count {
    font-size: 12px;
    padding: 5px 6px;
    color: #212121;
}

.system-alerts-page-content {
    padding-bottom: 8px;
}

/**
 * EMRC Page
 */
.emrc-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.emrc-page .page-content-wrapper {
    position: absolute;
    top: 48px; /* header bar is 48 pixels tall */
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.emrc-page.is-fullscreen .page-content-wrapper,
.emrc-page.splashscreen-page .page-content-wrapper{
    top: 0;
}

.emrc-page.has-footer .page-content-wrapper {
    bottom: 38px; /* material buttons are 38 pixels tall without top or bottom margins */
}

.emrc-page .page-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    background-color: white;
}

.emrc-page .page-footer {
    position: fixed;
    bottom: 0;
}

/*
 React custom scrollbars add -webkit-overflow-scrolling touch to the view container which causes flicker,
 so we have a div that wraps the content to be displayed in a react custom scrollbar to set -webkit-backface-visibility
 to hidden and transform to translateZ(0) to suppress the flicker.  The backface visibility rule prevents issues in
 webkit based mobile browsers where content does not get drawn to screen even though it is in the DOM and the transform
 rule prevents a crash on iOS7 devices.
*/
.rcsContentWrapper {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.empty-start-page .page-content,
.emrc-page.splashscreen-page .page-content {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,2989d8+50,207cca+56,207cca+70,1e5799+100 */
    background: rgb(125,185,232); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(125,185,232,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 56%, rgba(32,124,202,1) 70%, rgba(30,87,153,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 56%,rgba(32,124,202,1) 70%,rgba(30,87,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(125,185,232,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 56%,rgba(32,124,202,1) 70%,rgba(30,87,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: white;
}

.emrc-page.splashscreen-page .logo {
    background: url(../images/applicationIcon180x180.png) 0 0 no-repeat;
    height: 180px;
    width: 180px;
    margin: 28px auto;
}

.splashscreen-page-content {
    padding: 16px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.emrc-page.splashscreen-page .status {
    padding-top: 16px;
}

.progressbar span:first-child {
    background-color: #FFFFFF;
}

.progressbar span:last-child {
    background-color: #72bcd4;
}

.emrc-page.splashscreen-page .cancelButton {
    margin-left: auto;
    margin-right: auto;
    width: 90px;
}

.emrc-page.splashscreen-page .cancelButton span {
    color: white;
}

.soft-triggers-page-content {
    padding-bottom: 8px;
}

.soft-triggers-filter-count {
    color: #212121;
}

.soft-triggers-list-item {
    height: 58px;
    border-top: 1px solid #666666;
    overflow: hidden;
    cursor: pointer;
}

.soft-triggers-list-item.error {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    color: #212121;
    padding-left: 8px;
}

.soft-triggers-list-item .soft-trigger-state {
    line-height: 58px;
    vertical-align: middle;
    padding-right: 12px; /* Allow whitespace for the react custom scrollbar*/
}

.soft-triggers-list-item .soft-trigger-state.user {
    float: left;
    padding: 6px 4px 0 0;
}

.soft-triggers-list-item .textContent .name {
    font-size: 16px;
    color: #212121;
    padding-top: 4px;
}

.soft-triggers-list-item .textContent .service {
    font-size: 14px;
    color: #606060;
}

.soft-triggers-list-item .textContent .server {
    font-size: 14px;
    color: #606060;
    padding-bottom: 4px;
}

.soft-triggers-page-content .soft-triggers-list-item:last-of-type {
    border-bottom: 1px solid #666666;
}

.emrc-page.views-page {
    background: white;
}

.views-page-content {
    padding-bottom: 8px;
}

.views-filter-count {
    font-size: 12px;
    padding: 5px 6px;
    color: #212121;
}

.views-list-item {
    height: 48px;
    line-height: 48px;
    border-top: 1px solid #666666;
    overflow: hidden;
    cursor: pointer;
    font-size: 16px;
    color: #212121;
}

.views-page-content .views-list-item:last-of-type {
    border-bottom: 1px solid #666666;
}

.views-list-item.header {
    background-color: #7f7f7f;
    color: #ffffff;
}

.views-list-item.error {
    padding-left: 8px;
}

.views-list-item .count {
    border: 1px solid #999999;
    font-size: 11px;
    height: 14px;
    line-height: 14px;
    padding: 4px;
    margin: 12px 0;
    width: 14px;
    text-align: center;
    float: left;
}

.emrc-page.webservices-page {
    background-color: white;
}
.emrc-page.webservices-page .filterCount {
    top: 94px;
    padding: 10px 0 0 16px;
}

.emrc-page.webservices-page .webservices-list {
    /* use 88px padding on the bottom to allow for scrolling above the floating action button */
    padding: 8px 0 88px;
}

.emrc-page.webservices-page.is-browser .webservices-list {
    /* browsers don't have a floating action button, so use only 8px padding on bottom */
    padding-bottom: 8px;
}


.emrc-page.webservices-page .webservices-list .servers-expand-item {
    padding-left: 16px;
}

.emrc-page.webservices-page .webservices-list .actionButtons {
    padding: 6px 0 0 4px;
}

.emrc-page.webservices-page .actionButton.floating {
    position: fixed;
    bottom: 30px;
}

.emrc-page.webservices-page .webservices-list .material-two-line-list-item {
    padding-left: 8px;
}

.web-service-list-item {
    clear: both;
    border-color: #dddddd;
    border-width: 1px 0px;
    border-style: solid;
}

.web-service-list-item .material-list-item-right label {
    margin-top: 10px;
    vertical-align: top;
}

.web-service-list-item .material.selection.mini .icon.more-icon {
    margin-left: 10px;
    margin-top: 12px;
}

.web-service-list-item .servers-list {
    margin-left: 16px;
}

.web-service-list-item .servers-list .header {
    font-size: 15px;
    color: gray;
}

.web-service-list-item .status.connected {
    color: green;
}

.web-service-list-item .status.warning {
    color: #CCCC00;
}

.web-service-list-item .status.error {
    color: red;
}

.web-service-list-item .server-info {
    padding-left: 10px;
    color: #007ac3;
    text-decoration: underline;
    cursor: pointer;
}

.web-service-list-item .servers-count {
    font-size: 13px;
    padding-left: 10px;
}

.web-service-list-item .line-one{
    font-weight: 600;
}

.materialDropdownSelect ul.material-dropdown {
    position: relative;
    list-style-type: none;
    font-size: 13px;
}

.materialDropdownSelect ul.material-dropdown li {
    padding: 10px 0 10px 16px;
    cursor: pointer;
    color: #000000;
    text-shadow: 0 0px 0 #000000;
}

.materialDropdownSelect ul.material-dropdown li.selected {
    color: #0078c6;
}

.materialDropdownSelect ul.material-dropdown li.pressed {
    color: #d1d1d1;
}

.material-button.useDemoButton {
    margin: 10px 0 0 0;
    padding: 0;
    font-size: 13px;
}

.material-dialog.edit-webservice .service-auth .header {
    color: #666666;
    font-size: 13px;
    cursor: default;
    padding: 16px 0 8px;
}
.material-dialog.edit-webservice .service-auth .auth-fields {
    margin-left: 25px;
}

.edit-server-dialog .clear,
.edit-webservice .clear {
    font-size: 10px;
    color: #007ac3;
    cursor: pointer;
}

.material-icon-menu {
    display: inline-block;
    position: relative;
}

.material-icon-menu.placeholder {
    width: 48px;
    min-height: 1px;
}

.material-simple-menu.top-right {
    top: 0;
    right: 0;
}

.material-simple-menu.top-left {
    top: 0;
    left: 0;
}

.material-simple-menu.bottom-right {
    bottom: 0;
    right: 0;
}

.material-simple-menu.bottom-left {
    bottom: 0;
    left: 0;
}

.material-simple-menu-item .content {
    width: 100%;
    text-align: left;
    text-transform: none;
    color: #000000;
}
.material-simple-menu-item.hover {
    background-color: rgba(102,102,102,0.3);
    cursor: pointer;
}

.filterCount {
    padding: 5px;
    font-size: 12px;
    margin-top: 3px;
}
/** Doors List Page **/

.doors-page-list {
    margin-top: 8px;
    position: relative;
}

.doors-page-list .button-menu.list-selection {
    top: -13px;
}

.doors-list {
    background-color: white;
    border-top: #dddddd 1px solid;
}

.doors-list .door-list-item {
    clear: both;
    border-bottom: #dddddd 1px solid;
}

.doors-list .door-list-item .status {
    color: green;
}

/* Note: alarm must be *after* alert to properly override */
.doors-list .door-list-item .status.alert {
    color: #CCCC00;
}

.doors-list .door-list-item .status.alarm {
    color: red;
}

/** Door Page **/
.door-summary {
    text-align: center;
    margin: 4px 0;
    font-size: 16px;
}

.door-summary .door-title {
    font-weight: bold;
}

.door-summary .door-status .status {
    color: green;
}

/* Note: alarm must be *after* alert to properly override */
.door-summary .door-status .status.alert {
    color: #CCCC00;
}

.door-summary .door-status .status.alarm  {
    color: red;
}

.door-sensors-list {
    background-color: white;
    border-top: #dddddd 1px solid;
}

.door-sensors-list .door-sensors-list-item {
    clear: both;
    border-bottom: #dddddd 1px solid;
}

.door-sensors-list .door-sensors-list-item .material-button {
    padding: 0;
    margin: 0;
}

.door-sensors-list .door-sensors-list-item .material-list-item {
    padding-left: 0;
}

.door-sensors-list .door-sensors-list-item .status {
    color: green;
}

/* Note: alarm must be *after* alert to properly override */
.door-sensors-list .door-sensors-list-item .status.alert {
    color: #CCCC00;
}

.door-sensors-list .door-sensors-list-item .status.alarm {
    color: red;
}

.door-sensors-list .door-sensors-list-item .sensor-action {
    position: relative;
}

.door-video-container {
    margin: 5px 0 10px 0;
}

.door-video-buttons-container {
    text-align: right;
    margin: 0 auto;
}

.door-video-buttons-container .custom-search-range-dialog {
    /* Override the text-align right added to the container */
    text-align: left;
}


.door-video-buttons {
    /* Override the margin/padding set on the rightmost button to vertically align
    with the video panels */
    margin-right: -12px;
}


.panel-layout {
    position: relative;
    margin: 0 auto;
}

.panel-layout .panel {
    position: absolute;
    border: 1px solid white;
    margin: -1px 0 0 -1px;  /* Negative margin to collapse borders */
}

.panel .panel-content {
    width: 100%;
    height: 100%;
}

.panel .camera-panel-content canvas, .panel .camera-panel-content .camera-panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.panel .camera-panel-content .camera-panel-overlay .osd-content {
    position: absolute;
    font-family: Helvetica,Arial,sans-serif;
    white-space: nowrap;
    width: 100%;
    padding-bottom: 5px;
    color: white;
    overflow: hidden;
    left: 0;
}

.panel-group-search-button {
    display: inline-block;
    position: relative;
}

.button-menu.list-selection {
    position: absolute;
    font-size: 13px;
    right: 0;
}

/* Audio page */
.audio-devices-page-list {
    position: relative;
    margin-top: 8px;
}

.audio-devices-page-list .button-menu.list-selection {
    top: -13px;
}

.audio-devices-list {
    background-color: white;
    border-top: #dddddd 1px solid;
}

.audio-devices-list .audio-device-list-item {
    clear: both;
    border-bottom: #dddddd 1px solid;
}

.audio-devices-list .audio-device-list-item .status {
    color: green;
}

/** External content module **/
iframe.external-content {
    border: none;
    width: 100%;
    display: block;
}