.alarmListContainer                                  
{   
    width   : 30px;
    height  : 50px;
    position: relative;
    cursor  : pointer;
    position: relative;
    background: transparent url(alarm_button.svg) center no-repeat padding-box;
    float: right;
    margin-left: 10px;
}

.alarmListContainer[isActive="true" ] {
    background: transparent url(alarm_button_2.svg) center no-repeat padding-box;
}
.alarmListContainer[isNew] {
    background: transparent url(alarm_button_reddot.svg) no-repeat padding-box;
    background-position: -1px center;
}

.alarmListPopupContainer
{
    float       : left;
    width       : 100%;
    height      : 100%;
}

.alarmListPopupContainer .emergencyListButton                   
{
    float               : left; 
    width               : 100%; 
    height              : 50px;
    margin-bottom       : 20px;
}

.alarmListPopupContainer .gridContainer                   
{
    float               : left; 
    width               : 100%; 
    height              : calc(100% - 70px); height: -moz-calc(100% - 70px); height: -webkit-calc(100% - 70px); 
}




.alarmListPopupContainer .dx-datagrid-search-panel        
{   
    float               : left; 
    margin-left         : 0; 
    margin-top          : -2px;
    width               : calc(100% - 5px) !important;
}

.alarmListPopupContainer .dx-toolbar                      
{
    float               : left; 
    width               : calc(100% - 190px); width: -moz-calc(100% - 190px); width: -webkit-calc(100% - 190px); 
    display             : inline-block; 
    margin-left         : 4px;
}
.alarmListPopupContainer .dx-toolbar-after {
    display: inline !important;
}

.alarmListPopupContainer .dx-toolbar-center {
    display: inline !important;
}

.alarmListPopupContainer.dx-toolbar-before {
    display: inline !important;
}

.alarmListPopupContainer .dx-toolbar-after {
    display: inline !important;
}

.alarmListPopupContainer .dx-toolbar .dx-toolbar-after {
    padding-left: 1px;
}

.alarmListPopupContainer .dx-toolbar-after {
    left: 0px !important
}

.alarmListPopupContainer .dx-toolbar-item {
    display: inline !important;
}

.alarmListPopupContainer .dx-toolbar-after                
{   
    padding             : 0; 
    width               : 100%;
}

.alarmListPopupContainer .AlarmListContainer_SwitchButton 
{
    float               : left;
    width               : 36px; 
}

.alarmListPopupContainer .AlarmListContainer_TextBox
{
    float               : right;
    width               : auto;
    margin-left         : -25px;
    color               : #d33434;
    font-size           : 16px;
    font-weight         : bold;
    line-height         : 36px;
    text-align          : left;
    white-space         : nowrap;
}
.alarmListPopupContainer .AlarmListContainer_TextBoxLabel 
{ 
    text-align      : left;
    font            : normal normal normal 14px/19px Segoe UI;
    letter-spacing  : 0px;
    color           : #333333;
    max-width       : 125px;
    overflow        : hidden;
    text-overflow   : ellipsis;
    float           : left;
    margin-top      : 8px;
    margin-right    : 2px;
}
.alarmListPopupContainer .AlarmListContainer_TextBoxLabelCount
{
    float           : right;
}

.AlarmListRow 
{
    /*min-height          : unset !important;*/
    /*height              : auto !important;*/
    width               : 100%;
    background-color    : #f9f9f9;
    display             : flex;
    min-width           : 490px;
}

.AlarmListRow[isSelected]
{
    background-color    : #ddd;
}

.AlarmListRow[shade]
{
    background-color    : #EFF1F2;
}

.AlarmListRow[shade][isSelected]
{
    background-color    : #ddd;
}

.AlarmListRow > tr,
.AlarmListRow > tr > td
{
    width               : 100%;
    min-height              : 88px;
}

.AlarmListRowWest
{
    float               : left;
    width               : 50px;
    height              : 100%;
}

.AlarmListRowWest .AlarmListRowWestIcon
{
    float               : left;
    width               : 30px;
    height              : 30px;
    background-position : center center;
    background-repeat   : no-repeat;
    /*position            : relative;
    top                 : 50%;
    transform           : translateY(-50%);*/
    margin-left         : 10px;
    background-size     : 30px;
    margin-top:10px;
}

.AlarmListRowEast
{
    top                 : -40px;
    float               : left;
    min-width           : 426px;
    width				: calc(100% - 50px); width: -moz-calc(100% - 50px); width: -webkit-calc(100% - 50px); 
    height              : 100%;
    padding-right       : 10px;

}

.AlarmListRowEastCell
{
    float               : left;
    width               : 426px;
    height              : 100%;
    line-height         : 16px;
}

.AlarmListRowEastCell:nth-child(1)
{
    font-weight         : bold;
    height              : 26px;
    padding-top         : 10px;
}

.AlarmListRowEastCell:nth-child(2)
{
    height              : 36px;
    padding-top         : 10px;
    padding-bottom      : 10px;
}

.AlarmListRowEastCell:nth-child(3), 
.AlarmListRowEastCell:nth-child(4)
{
    height               : 26px;
    padding-bottom       : 10px;
    overflow             : hidden !important;
    text-overflow        : ellipsis;
    white-space          : nowrap;
}

.AlarmListRowEastCell:nth-child(1)[alarm]
{
    color                : #FF0000;
}

.AlarmListRowEastCellWest 
{
    overflow             : hidden !important ;
    text-overflow        : ellipsis;
    white-space          : nowrap;
    font-weight          : bold;
    float                : left;
    width				 : calc(100% - 60px); width: -moz-calc(100% - 60px); width: -webkit-calc(100% - 60px); 
    height               : 100%;
}

.AlarmListRowEastCellEast
{
    float               : right;
    width               : 60px;
    height              : 100%;
}

.AlarmListRow .dx-freespace-row 
{
    background-color    : white;

}

.speedAlarmIcon 
{
    width               : 30px;
    height              : 20px;
    background-position : center center;
    background-repeat   : no-repeat;
    border              : 0;
    position            : relative;
    background-size     : 20px;
}

.AlarmListContextMenuItem 
{  float:left;
   margin:5px;
   width: 100%;
}

.AlarmListContextMenuItem .dx-icon-check
{
    float: left;
    line-height: 19px;
}

.AlarmListContextMenuItem .ContextMenuItemContent
{
    float: left;
    margin-left: 21px;
}

.AlarmListContextMenuItem .ContextMenuItemContent[selected]
{
    margin-left: 5px;
}
.AlarmListContextMenuItem .ContextMenuItemContent[main]
{
    margin-left: 0px;
}

.externalMapContent { height: 100%; }
.externalMapContent .ol-popup 
{
    position                : absolute;
    background-color        : white;
    -webkit-box-shadow      : 3px 3px 6px rgba(0, 0, 0, 0.25); -moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
    padding                 : 15px;
    -webkit-border-radius   : 3px; -moz-border-radius: 3px; border-radius: 3px;
    border                  : 1px solid #cccccc;
    bottom                  : 20px; 
    left                    : -55px;
    min-width               : 280px;
    z-index                 : 5000;
    opacity                 : 0.8;
    font                    : 12px 'Segoe UI', 'Helvetica Neue', Helvetica, Verdana, sans-serif;
    color                   : #475867;
}
.externalMapContent .ol-popup:after, .ol-popup:before 
{
    top                     : 100%;
    border                  : solid transparent;
    content                 : " ";
    height                  : 0;
    width                   : 0;
    position                : absolute;
    pointer-events          : none;
}
.externalMapContent .ol-popup:after 
{
    border-top-color        : white;
    border-width            : 10px;
    left                    : 48px;
    margin-left             : -10px;
}
.externalMapContent .ol-popup:before 
{
    border-top-color        : #cccccc;
    border-width            : 11px;
    left                    : 48px;
    margin-left             : -11px;
}
.alarmListMapContainer .dx-popover-arrow:after { display: none; } 

/*X4 VIDEO*/

.AlarmListX4VideoIcon {
    float: left;
    width: 24px;
    height: 24px;
    background-color: #FF9900;
    border-radius: 50%;
    display: inline-block;
    text-align:center;
    line-height:24px;
}

.custom-icon{
    color:white;
}
.AlarmListX4VideoLink {
    float: left;
    height: 20px;
    /*text-align: left;*/
    text-decoration: underline;
    font: normal normal normal 13px/17px Segoe UI !important;
    /*letter-spacing: -0.26px;*/
    color: #338CDB;
    /*opacity: 1;*/
    padding-left: 5px;
    line-height:24px;
}

.X4-slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

.X4-prev, .X4-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    color: black;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.X4-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.X4-prev:hover, .X4-next:hover {
    background-color: rgba(0,0,0,0.8);
}

.X4-text {
    color: black;
    font-size: 15px;
    padding: 8px 12px;
    /*position: absolute;*/
    bottom: 8px;
    width: 100%;
    text-align: center;
    float: left;
}

/* Number text (1/3 etc) */
.X4-numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.X4-dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .X4-active, .X4-dot:hover {
        background-color: #717171;
    }

/* Fading animation */
.X4-fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .X4-prev, .X4-next, .X4-text {
        font-size: 11px
    }
}

.X4-Slides {
    display: none
}

.X4-prevDiv {
    float: left;
    min-height: 200px;
    width: 2%;
}

.X4-nextDiv {
    min-height: 200px;
    width: 2%;
}

.X4-VideoFirst {
    float: left;
    width: 23%;
}

.X4-Video {
    float: left;
    width: 23%;
    margin-left: 10px;
}

.X4-VideoCapture {
    /*width: 188px;*/
    height: 180px;
    background-repeat: round;
}

.X4-VideoFirstPopup {
    float: left;
    width: 44%;
}

.X4-VideoPopup {
    float: left;
    width: 44%;
    margin-left: 10px;
}

.X4-prevPopup, .X4-nextPopup {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    color: black;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.X4-nextPopup {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    .X4-prevPopup:hover, .X4-nextPopup:hover {
        background-color: rgba(0,0,0,0.8);
    }

.X4-prevDivPopup {
    float: left;
    min-height: 200px;
    width: 5%;
}

.X4-nextDivPopup {
    min-height: 200px;
    width: 5%;
}
.emergencyPopup {
    float: left;
   
}

.emergencyPopup .dx-overlay-content{
    
    margin-left : 22px !important;
}
.EmergencyAlarmListDetailedSDate, .EmergencyAlarmListDetailedEDate {
    float: left;
    margin-left: 10px;
}

.EmergencyAlarmListDetailedDateText {
    float: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 36px;
    text-align: left;
    white-space: nowrap;
}
.emergencyGrid {
    float: left;
    height :100%;
    width : 100%;
}

.alarmListPackage {
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-color:#EFF1F2;
    text-indent: 30px;
    width: 32px;
    height: 32px;
    float:left;
    margin:0px 10px 10px 0px;
}

.RotPlus {
    background-image: url(Images/ROTPLUS.svg);
}

.RotMinus {
    background-image: url(images/ROTMINUS.svg);
}

.DeviceAttached {
    background-image: url(images/C551.svg);
}

.DeviceDeAttached {
    background-image: url(images/C552.svg);
}

.Pause {
    background-image: url(images/SPDMINUS.svg);
}

.BatteryChargeLevel {
    background-image: url(images/C554.svg);
}

.GprsConnected {
    background-image: url(images/NTID.svg);
}

.alarmListPopupContainer .AlarmListContainer_SettingsButton {
    width: 36px;
}

.AlarmFilterPopupBox {
    height: 450px;
}

.AlarmFilterBottom {
    border-top: 1px solid #ddd;
    color: #333;
    height: 75px;
    padding-top: 20px;
}

.AlarmFilterBottomCancelButton {
    margin-left: 40px;
    margin-right: 15px;
    width: 122px;
    height: 37px;
}

.AlarmFilterBottomSaveButton {
    width: 122px;
    height: 37px;
}

.AlarmFilterBottomConfirmBox {
    height: 80px;
    width: 266px;
    margin-left: 36px;
    text-align: center;
}

.AlarmFilterBottomConfirmCancelButton {
    margin-left: 35px !important;
    margin-right: 15px !important;
    width: 122px;
    height: 37px
}

.AlarmFilterBottomConfirmSaveButton {
    width: 122px;
    height: 37px
}