/* Base class for material items*/
.material {

}

.material .icon {
    display: inline-block;
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    width: 24px;
    height: 24px;
}

/* Selection-related styling (e.g. checkboxes) */
.material.selection {
    display: inline-block;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.material.selection.disabled {
    cursor: default;
}

.material.selection .icon {
    margin: 12px;
}

.material.selection.focused,
.material.selection.pressed,
.material.selection.toggled.focused,
.material.selection.toggled.pressed {
    background: #d1d1d1;
    border-radius: 50%;
}

.material.selection.toggled,
.material.selection.read-only.toggled.focused,
.material.selection.read-only.toggled.pressed {
    background: rgba(209, 209, 209, 0.5);
    border-radius: 50%;
}

/* Mini Selection button overrides */
.material.selection.mini {
    width: 44px;
    height: 44px;
    margin: 2px 0 0 2px;
}

.material.selection.mini .icon {
    margin: 8px;
}

/* Action button-related styling */
.material.actionButton {
    display: inline-block;
    width: 56px;
    height: 56px;
    cursor: pointer;
}

.material.actionButton.disabled {
    cursor: default;
}

.material.actionButton .icon {
    margin: 16px;
}

.material.actionButton.focused,
.material.actionButton.pressed {
    background: #d1d1d1;
    border-radius: 50%;
}

/* Mini Action button overrides */
.material.actionButton.mini {
    width: 40px;
    height: 40px;
    margin: 4px;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.material.actionButton.mini.flat {
    box-shadow: none;
}

.material.actionButton.mini .icon {
    margin: 8px;
}

/* Dropdown button-related styling */
.material.dropButton {
    display: inline-block;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.material.dropButton.disabled {
    cursor: default;
}

.material.dropButton .icon {
    margin: 12px;
}

.material.dropButton.focused,
.material.dropButton.pressed {
    background: #d1d1d1;
    border-radius: 50%;
}

.material.dropButton.read-only.focused,
.material.dropButton.read-only.pressed {
    background: none;
}

/* Floating Action button overrides */
.material.actionButton.floating {
    position: absolute;
    bottom: 16px;
    right: 16px;
    border-radius: 50%;
    background-color: #007AC3;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.material.actionButton.floating.pressed {
    background: #005d94;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.material.actionButton.floating.active {
    background: #007AC3;
}


/* Mini Selection button overrides */
.material.dropButton.mini {
    width: 40px;
    height: 40px;
    margin: 4px;
}

.material.dropButton.mini .icon {
    margin: 8px;
}

.material .icon.pause {
    background-position: 0 0;
}

.material.hover .icon.pause {
    background-position: -24px 0;
}

.material.focused .icon.pause {
    background-position: -48px 0;
}

.material.pressed .icon.pause {
    background-position: -72px 0;
}

.material.disabled .icon.pause {
    background-position: -96px 0;
}

.material.active .icon.pause {
    background-position: -120px 0;
}

.material .icon.play {
    background-position: 0 -24px;
}

.material.hover .icon.play {
    background-position: -24px -24px;
}

.material.focused .icon.play {
    background-position: -48px -24px;
}

.material.pressed .icon.play {
    background-position: -72px -24px;
}

.material.disabled .icon.play {
    background-position: -96px -24px;
}

.material.active .icon.play {
    background-position: -120px -24px;
}

.material .icon.cancel {
    background-position: 0 -48px;
}

.material.hover .icon.cancel {
    background-position: -24px -48px;
}

.material.focused .icon.cancel {
    background-position: -48px -48px;
}

.material.pressed .icon.cancel {
    background-position: -72px -48px;
}

.material.disabled .icon.cancel {
    background-position: -96px -48px;
}

.material.active .icon.cancel {
    background-position: -120px -48px;
}

.material .icon.arrow-l {
    background-position: 0 -72px;
}

.material.hover .icon.arrow-l {
    background-position: -24px -72px;
}

.material.focused .icon.arrow-l {
    background-position: -48px -72px;
}

.material.pressed .icon.arrow-l {
    background-position: -72px -72px;
}

.material.disabled .icon.arrow-l {
    background-position: -96px -72px;
}

.material.active .icon.arrow-l {
    background-position: -120px -72px;
}

.material .icon.arrow-d {
    background-position: 0 -96px;
}

.material.hover .icon.arrow-d {
    background-position: -24px -96px;
}

.material.focused .icon.arrow-d {
    background-position: -48px -96px;
}

.material.pressed .icon.arrow-d {
    background-position: -72px -96px;
}

.material.disabled .icon.arrow-d {
    background-position: -96px -96px;
}

.material.active .icon.arrow-d {
    background-position: -120px -96px;
}

.material .icon.arrow-r {
    background-position: 0 -120px;
}

.material.hover .icon.arrow-r {
    background-position: -24px -120px;
}

.material.focused .icon.arrow-r {
    background-position: -48px -120px;
}

.material.pressed .icon.arrow-r {
    background-position: -72px -120px;
}

.material.disabled .icon.arrow-r {
    background-position: -96px -120px;
}

.material.active .icon.arrow-r {
    background-position: -120px -120px;
}

.material .icon.arrow-u {
    background-position: 0 -144px;
}

.material.hover .icon.arrow-u {
    background-position: -24px -144px;
}

.material.focused .icon.arrow-u {
    background-position: -48px -144px;
}

.material.pressed .icon.arrow-u {
    background-position: -72px -144px;
}

.material.disabled .icon.arrow-u {
    background-position: -96px -144px;
}

.material.active .icon.arrow-u {
    background-position: -120px -144px;
}

.material .icon.check-on {
    background-position: 0 -168px;
}

.material.hover .icon.check-on {
    background-position: -24px -168px;
}

.material.focused .icon.check-on {
    background-position: -48px -168px;
}

.material.pressed .icon.check-on {
    background-position: -72px -168px;
}

.material.disabled .icon.check-on {
    background-position: -96px -168px;
}

.material.active .icon.check-on {
    background-position: -120px -168px;
}

.material .icon.check-off {
    background-position: 0 -192px;
}

.material.hover .icon.check-off {
    background-position: -24px -192px;
}

.material.focused .icon.check-off {
    background-position: -48px -192px;
}

.material.pressed .icon.check-off {
    background-position: -72px -192px;
}

.material.disabled .icon.check-off {
    background-position: -96px -192px;
}

.material.active .icon.check-off {
    background-position: -120px -192px;
}
.material .icon.action {
    background-position: 0 -216px;
}

.material.hover .icon.action {
    background-position: -24px -216px;
}

.material.focused .icon.action {
    background-position: -48px -216px;
}

.material.pressed .icon.action {
    background-position: -72px -216px;
}

.material.disabled .icon.action {
    background-position: -96px -216px;
}

.material.active .icon.action {
    background-position: -120px -216px;
}

.material .icon.speaker {
    background-position: 0 -240px;
}

.material.hover .icon.speaker {
    background-position: -24px -240px;
}

.material.focused .icon.speaker {
    background-position: -48px -240px;
}

.material.pressed .icon.speaker {
    background-position: -72px -240px;
}

.material.disabled .icon.speaker {
    background-position: -96px -240px;
}

.material.active .icon.speaker {
    background-position: -120px -240px;
}

.material .icon.speaker.off {
    background-position: -72px -240px;
}

.material .icon.speaker.on {
    background-position: -144px -240px;
}

.material .icon.microphone {
    background-position: 0 -264px;
}

.material.hover .icon.microphone {
    background-position: -24px -264px;
}

.material.focused .icon.microphone {
    background-position: -48px -264px;
}

.material.pressed .icon.microphone {
    background-position: -72px -264px;
}

.material.disabled .icon.microphone {
    background-position: -96px -264px;
}

.material.active .icon.microphone {
    background-position: -120px -264px;
}

.material .icon.soft-trigger {
    background-position: 0 -288px;
}

.material .icon.soft-trigger.on {
    background-position: -24px -288px;
}

.material .icon.ellipsis.on {
    background-position: 0 -312px;
}

.material .icon.ellipsis.alert {
    background-position: -24px -312px;
}

.material .icon.ellipsis.alarm {
    background-position: -48px -312px;
}

.material .icon.access-control-relay {
    background-position: 0 -336px;
}

.material .icon.access-control-relay.alert {
    background-position: -24px -336px;
}

.material .icon.access-control-relay.alarm {
    background-position: -48px -336px;
}

.material .icon.access-control-input {
    background-position: 0 -360px;
}

.material .icon.access-control-input.alert {
    background-position: -24px -360px;
}

.material .icon.access-control-input.alarm {
    background-position: -48px -360px;
}

.material .icon.access-control-lock {
    background-position: 0 -384px;
}

.material .icon.access-control-lock.alert {
    background-position: -24px -384px;
}

.material .icon.access-control-lock.alarm {
    background-position: -48px -384px;
}

.material .icon.access-control-rex {
    background-position: 0 -408px;
}

.material .icon.access-control-rex.alert {
    background-position: -24px -408px;
}

.material .icon.access-control-rex.alarm {
    background-position: -48px -408px;
}

.material .icon.access-control-reader {
    background-position: 0 -432px;
}

.material .icon.access-control-reader.alert {
    background-position: -24px -432px;
}

.material .icon.access-control-reader.alarm {
    background-position: -48px -432px;
}

.material .icon.access-control-door {
    background-position: 0 -456px;
}

.material .icon.access-control-door.alert {
    background-position: -24px -456px;
}

.material .icon.access-control-door.alarm {
    background-position: -48px -456px;
}

.material .icon.access-control-partition {
    background-position: 0 -480px;
}

.material .icon.access-control-partition.alert {
    background-position: -24px -480px;
}

.material .icon.access-control-partition.alarm {
    background-position: -48px -480px;
}

.material .icon.access-control-zone {
    background-position: 0 -504px;
}

.material .icon.access-control-zone.alert {
    background-position: -24px -504px;
}

.material .icon.access-control-zone.alarm {
    background-position: -48px -504px;
}

.material .icon.checkmark {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: 0 -1200px;
}

.material.hover .icon.checkmark {
    background-position: -24px -1200px;
}

.material.focused .icon.checkmark {
    background-position: -48px -1200px;
}

.material.pressed .icon.checkmark {
    background-position: -72px -1200px;
}

.material.disabled .icon.checkmark {
    background-position: -96px -1200px;
}

.material.active .icon.checkmark {
    background-position: -120px -1200px;
}

.material .icon.plus {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: 0 -1296px;
}

.material.hover .icon.plus {
    background-position: -24px -1296px;
}

.material.focused .icon.plus {
    background-position: -48px -1296px;
}

.material.pressed .icon.plus {
    background-position: -72px -1296px;
}

.material.disabled .icon.plus {
    background-position: -96px -1296px;
}

.material.active .icon.plus {
    background-position: -120px -1296px;
}

.header-bar-item  .button.material .icon,
.app-header-toolbar-item  .button.material .icon {
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
    width: 24px;
    height: 24px;
    margin: 10px;
}

.header-bar-item .button.material.hover,
.app-header-toolbar-item .button.material.hover,
.filterBoxContainer .button.material.hover {
    background: none;
}

.header-bar-item .button.material.pressed,
.header-bar-item .button.material.focused,
.app-header-toolbar-item .button.material.pressed,
.app-header-toolbar-item .button.material.focused,
.filterBoxContainer .button.material.pressed,
.filterBoxContainer .button.material.focused {
    background: #d1d1d1;
    border-radius: 50%;
}

.button.material .icon.live {
    background-position: 0 0;
}
.button.material.active .icon.live {
    background-position: -24px 0;
}
.button.material .icon.liveTour {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -528px;
}
.button.material .icon.search {
    background-position: 0 -24px;
}
.button.material.active .icon.search {
    background-position: -24px -24px;
}
.button.material.disabled .icon.search {
    background-position: -24px -24px;
}
.button.material .icon.layouts {
    background-position: 0 -72px;
}
.button.material .icon.contextMenu {
    background-position: 0 -96px;
}
.button.material .icon.back {
    background-position: 0 -120px;
}
.button.material .icon.sort {
    background-position: 0 -144px;
}
.button.material.alpha .icon.sort,
.button.material .icon.sort.alpha {
    background-position: 0 -168px;
}
.button.material.reverseAlpha .icon.sort,
.button.material .icon.sort.reverseAlpha {
    background-position: 0 -192px;
}
.button.material .icon.newSearch {
    background-position: 0 -216px;
}
.button.material .icon.ptz {
    background-position: 0px -240px;
}
.button.material.active .icon.ptz {
    background-position: -24px -240px;
}
.button.material .icon.digitalPtzDewarp {
    background-position: 0 -264px;
}
.button.material.active .icon.digitalPtzDewarp {
    background-position: -24px -264px;
}
.button.material .icon.digitalPtzDualView {
    background-position: 0 -288px;
}
.button.material.active .icon.digitalPtzDualView {
    background-position: -24px -288px;
}
.button.material .icon.digitalPtzNormal {
    background-position: 0 -312px;
}
.button.material.active .icon.digitalPtzNormal {
    background-position: -24px -312px;
}
.button.material .icon.digitalPtzPanorama {
    background-position: 0 -336px;
}
.button.material.active .icon.digitalPtzPanorama {
    background-position: -24px -336px;
}
.button.material .icon.ptzPresets {
    background-position: 0 -360px;
}
.button.material.disabled .icon.ptzPresets {
    background-position: -48px -360px;
}
.button.material .icon.liveTour.tour1 {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -912px;
}
.button.material .icon.liveTour.tour2 {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -936px;
}
.button.material .icon.liveTour.tour3 {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -960px;
}
.button.material .icon.liveTour.tour4 {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -984px;
}
.button.material .icon.dismiss {
    background-position: 0 -480px;
}
.button.material.active .icon.dismiss {
    background-position: -24px -480px;
}
.button.material .icon.videoPush {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1056px;
}
.button.material.active .icon.videoPush {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1056px;
}
.button.material .icon.videoPushTour {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1056px;
}
.button.material .icon.videoPushTour.videoPushTour1 {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1080px;
}
.button.material .icon.videoPushTour.videoPushTour2 {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1104px;
}
.button.material .icon.videoPushTour.videoPushTour3 {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1128px;
}
.button.material .icon.videoPushTour.videoPushTour4 {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1152px;
}

.button.material .icon.cameraSettings {
    background-position: 0 -624px;
}
.button.material.active .icon.cameraSettings {
    background-position: -24px -624px;
}
.button.material.disabled .icon.cameraSettings {
    background-position: -48px -624px;
}
.button.material .icon.traverseCameras {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1200px;
}
.button.material.active .icon.traverseCameras {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -110px -1200px;
}
.button.material.disabled .icon.traverseCameras {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -96px -1200px;
}
.button.material .icon.checkmark {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1224px;
}
.button.material.disabled .icon.checkmark {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -96px -1224px;
}

.button.material .icon.cancel {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -48px;
}

.button.material .icon.timelineSearch {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1248px;
}
.button.material .icon.listSearch {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1272px;
}
.button.material.alpha .icon.binaryModeSort {
    background-position: 0 -168px;
}
.button.material.reverseAlpha .icon.binaryModeSort {
    background-position: 0 -192px;
}
.button.material .icon.searchFilter {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -24px -552px;
}

.button.material .icon.clearFilter {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -24px -48px;
}

.filterBoxDiv .clearFilter.button {
    margin-top: 0;
}

.filterBoxDiv .button.material .icon.clearFilter {
    margin-top: 10px;
    margin-left: 10px;
}

.material .icon.viewItem {
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
    height: 16px;
    width: 16px;
    background-position: -672px -48px;
}

.material .icon.viewNew {
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
    height: 16px;
    width: 16px;
    background-position: -672px -64px;
}

.material .icon.viewFolder {
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
    height: 16px;
    width: 16px;
    background-position: -672px -80px;
}

.material .icon.viewStar {
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
    height: 16px;
    width: 16px;
    background-position: -672px -96px;
}

.material .icon.viewService {
    background: url(../images/buttonSprite.png) 0 0 no-repeat;
    height: 16px;
    width: 16px;
    background-position: -672px -128px;
}

.material.selection.mini.listItem {
    margin: 2px;
}

.material.selection.mini.listItem .icon {
    position: relative;
    top: 2px;
    left: 2px;
}

.material.selection.micro.listItem {
    margin: 2px;
}

.material.selection.micro.listItem .icon {
    position: relative;
    top: 5px;
    left: 5px;
}

.material .icon.more-icon {
    display: inline-block;
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: 0 -220px;
}

.app-header-toolbar-menu .material .icon.more-icon {
    background-position: -120px -220px;
}

.button.material .icon.audio {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -240px;
}

.button.material .icon.disconnect-audio {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1344px;
}

.button.material .icon.audio-muted {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -120px -1368px;
}

.material .icon.audio {
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    background-position: -72px -240px;
}