body,button,input,select,table,textarea, p, h1, h2, h3, h4, h5, h6 {font-family:arial, sans-serif;}


@keyframes swing {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(10deg);
    }
    30% {
        transform: rotate(0deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(5deg);
    }
    70% {
        transform: rotate(0deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes sonar {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
body {
    font-size: 0.9rem;
}
.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/*----------------page-wrapper----------------*/

.page-wrapper {
    height: 100vh;
}

.page-wrapper .theme {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 4px;
    margin: 2px;
}

.page-wrapper .theme.chiller-theme {
    background: #1e2229;
}

/*----------------toggeled sidebar----------------*/

.page-wrapper.toggled .sidebar-wrapper {
    left: 0px;
}

@media screen and (min-width: 768px) {
    .page-wrapper.toggled .page-content {
        padding-left:275px;
    }
}
/*----------------show sidebar button----------------*/
#show-sidebar {
    position: fixed;
    left: 0;
    top: 10px;
    border-radius: 0 4px 4px 0px;
    width: 35px;
    transition-delay: 0.3s;
    z-index: 9991;
}
.page-wrapper.toggled #show-sidebar {
    left: -40px;
}
/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
    width: 275px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 999;
}

.sidebar-wrapper ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar-wrapper a {
    text-decoration: none;
}

/*----------------sidebar-content----------------*/

.sidebar-content {
    max-height: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow-y: auto;
    position: relative;
}

.sidebar-content.desktop {
    overflow-y: hidden;
}

/*--------------------sidebar-brand----------------------*/

.sidebar-wrapper .sidebar-brand {
    padding: 10px 20px;
    align-items: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.sidebar-wrapper .sidebar-brand > a {
    text-transform: uppercase;
    font-weight: bold;
    flex-grow: 1;
}

.sidebar-wrapper .sidebar-brand #close-sidebar {
    cursor: pointer;
    font-size: 20px;
}
/*--------------------sidebar-header----------------------*/

.sidebar-wrapper .sidebar-header {
    padding: 20px;
    overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic {
    float: left;
    width: 60px;
    padding: 2px;
    border-radius: 12px;
    margin-right: 15px;
    overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.sidebar-wrapper .sidebar-header .user-info {
    float: left;
}

.sidebar-wrapper .sidebar-header .user-info > span {
    display: block;
}

.sidebar-wrapper .sidebar-header .user-info .user-role {
    font-size: 12px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status {
    font-size: 11px;
    margin-top: 4px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status i {
    font-size: 8px;
    margin-right: 4px;
    color: #F4AA6C;
}

/*-----------------------sidebar-search------------------------*/

.sidebar-wrapper .sidebar-search > div {
    padding: 10px 20px;
}

/*----------------------sidebar-menu-------------------------*/

.sidebar-wrapper .sidebar-menu {
    padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-menu .header-menu span {
    font-weight: bold;
    font-size: 14px;
    padding: 15px 20px 5px 20px;
    display: inline-block;
}

.sidebar-wrapper .sidebar-menu ul li a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    position: relative;
    padding: 8px 30px 8px 20px;
}

.sidebar-wrapper .sidebar-menu ul li a i {
    margin-right: 10px;
    font-size: 12px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
}

.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
    display: inline-block;
    animation: swing ease-in-out 0.5s 1 alternate;
}
.DashboardApiLogLanguageTranslation::before {
    content: none !important;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    font-style: normal;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: absolute;
    right: 15px;
    top: 14px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
    padding: 5px 0;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
    padding-left: 25px;
    font-size: 13px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
    content: "\f111";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    font-size: 8px;
}

.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
    float: right;
    margin-top: 8px;
    margin-left: 5px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
    float: right;
    margin-top: 0px;
}

.sidebar-wrapper .sidebar-menu .sidebar-submenu {
    display: none;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
    transform: rotate(90deg);
    right: 17px;
}

/*--------------------------side-footer------------------------------*/

.sidebar-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
}

.sidebar-footer > a {
    flex-grow: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;
    position: relative;
}

.sidebar-footer > a .notification {
    position: absolute;
    top: 0;
}

.badge-sonar {
    display: inline-block;
    background: #980303;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 0;
}

.badge-sonar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #980303;
    opacity: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: sonar 1.5s infinite;
}

/*--------------------------page-content-----------------------------*/

.page-wrapper .page-content {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
    padding-top: 20px;
}

.page-wrapper .page-content > div {
    padding: 20px 40px;
}


.page-wrapper .page-content {
    overflow-x: hidden;
}

/*------scroll bar---------------------*/

::-webkit-scrollbar {
    width: 5px;
    height: 7px;
}
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-thumb {
    background: #525965;
    border: 0px none #ffffff;
    border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
    background: #525965;
}
::-webkit-scrollbar-thumb:active {
    background: #525965;
}
::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
    background: transparent;
}
::-webkit-scrollbar-track:active {
    background: transparent;
}
::-webkit-scrollbar-corner {
    background: transparent;
}


/*-----------------------------chiller-theme-------------------------------------------------*/

.chiller-theme .sidebar-wrapper {
    background: #31353D;
}

.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
    border-top: 1px solid #0E3B5A;
}

.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
    border-color: transparent;
    box-shadow: none;
}

.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand>a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer>a {
    color: #818896;
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover>a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand>a:hover,
.chiller-theme .sidebar-footer>a:hover i {
    color: #b8bfce;
}

.page-wrapper.chiller-theme.toggled #close-sidebar {
    color: #bdbdbd;
}

.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
    color: #ffffff;
}

.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus+span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
    color: #16c7ff;
    text-shadow:0px 0px 10px rgba(22, 199, 255, 0.5);
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
    background: #0E3B5A;
}

.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
    color: #6c7b88;
}

.chiller-theme .sidebar-footer {
    background: #0E3B5A;
    box-shadow: 0px -1px 5px #282c33;
    border-top: 1px solid #464a52;
}

.chiller-theme .sidebar-footer>a:first-child {
    border-left: none;
}

.chiller-theme .sidebar-footer>a:last-child {
    border-right: none;
}

/***css added***/


/*slick slider css start*/
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}
.slick-track:after,.slick-track:before{display:table;content:''}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl]
                                                                .slick-slide{float:right}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}
.escalateEmail:disabled{background: #FFFFFF;}
.primaryEmail:disabled{background: #FFFFFF;}



/*theme css*/
.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat}
@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg')}
.slick-next,.slick-prev{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}
.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}
.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}
.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}
.slick-next:before,.slick-prev:before{font-family:slick;font-size:20px;line-height:1;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-prev{left:-25px}[dir=rtl]
                       .slick-prev{right:-25px;left:auto}
.slick-prev:before{content:'←'}[dir=rtl]
                               .slick-prev:before{content:'→'}
.slick-next{right:-25px}[dir=rtl]
                        .slick-next{right:auto;left:-25px}
.slick-next:before{content:'→'}
[dir=rtl] .slick-next:before{content:'←'}
.slick-dotted.slick-slider{margin-bottom:30px}
.slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}
.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}
.slick-dots li button:focus,.slick-dots li button:hover{outline:0}
.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}
.slick-dots li button:before{font-family:slick;font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-dots li.slick-active button:before{opacity:.75;color:#000}



button.slick-prev.slick-arrow {
    background: #000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    z-index: 10;
    left: -43px;

}

.slick-prev:before {
    content: '';
    border-width:9px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    width: 0px;
    height: 0px;
    position: absolute;
    left:2px;
    top:9px;
}

button.slick-next.slick-arrow{
    background: #000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    z-index: 10;
    right:20px;
    font-size: 0px; font-size:0px;
}

.slick-next:before {
    content: '';
    border-width:9px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    width: 0px;
    height: 0px;
    position: absolute;
    left:16px;
    top:9px;
}

/*slick slider css end*/


.chiller-theme .sidebar-wrapper .sidebar-menu ul li a{color:#fff;}
.chiller-theme .sidebar-wrapper .sidebar-header .user-info{color:#fff;}
.sidebar-wrapper .sidebar-header .user-pic{width:auto;}
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role{color:#fff;}
.chiller-theme .sidebar-wrapper {background:#0E3B5A;}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover{background:#337698;}
.chiller-theme .sidebar-wrapper hr{background:#fff; color:#fff;}
.sidebar-wrapper .sidebar-menu ul li{position:relative; float:left; width:100%;}
.sidebar-wrapper .sidebar-menu ul li a{padding-top:22px; padding-bottom:23px;}
.sidebar-content{overflow-y: visible;}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i{background: transparent;}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover a i{color:#fff;}
.sidebar-wrapper .sidebar-menu ul li:hover a span{color:#fff;}

.sidebar-wrapper .sidebar-menu ul li:hover:after{position: absolute;content: '';  right: -31px;top:0px;  border-color: transparent transparent transparent #337698; border-width: 35px 15px 35px 16px;  border-style: solid;}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li.active a i{color:#fff;}
.sidebar-wrapper .sidebar-menu ul li.active a span{color:#fff;}
.sidebar-wrapper .sidebar-menu ul li.active:after{position: absolute;content: '';  right: -31px;top:0px;  border-color: transparent transparent transparent #337698; border-width:35px 15px 35px 16px;  border-style: solid;}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li.active{background:#337698;}

.page-wrapper.chiller-theme.toggled #close-sidebar{color:#fff;}
.sidebar-wrapper .sidebar-header {padding:19px 20px;}
body{background:#f2f5fc;}

.dashbalarrow{width:100%; float:left; margin-top:10px;}
.dashbalarrow ul li{list-style:none; display: inline-block; margin-right:30px; color:#337698; font-size:18px; float: left; margin-top:3px;}
.dashbalarrow ul li a {color:#337698; text-decoration: none; font-size:28px; margin-left:7px; position: relative; padding-bottom:2px; border-bottom:5px solid transparent;}
.dashbalarrow ul li a:before{content:''; background:url("../images/fluent_icon_star-dash.svg") center center no-repeat; margin-right: 5px; width:30px;height: 30px; display: inline-block; vertical-align: sub; background-size: 30px; }
.dashbalarrow ul li a.active:before{background:url("../images/stargreen.svg") center center no-repeat;}
.dashbalarrow ul li a.active{text-decoration: none !important; border-bottom:5px solid #F4AA6C;}
.dashbalarrow ul li:first-child a:before{ display: none;}
.dashbalarrow span{font-weight:bold; color:#F4AA6C; float:left; text-decoration:underline; font-size:20px;}
.dashbalarrow ul{float:left; list-style: none;  margin-left:-5px; display:inline-block; padding:0px;}
.dashbalarrow ul li span {color: #337698; border: 1px solid #337698;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;
    width: 25px;  height: 25px; text-align: center; margin-right:8px; vertical-align:middle; line-height:21px;}
.dashbalarrow ul li span i{font-size:15px;}

#dashboardAddController:before {background:unset; content: unset;}

.mainRowbox{width:100%; float:left; margin-top:20px; padding-left:50px; margin-bottom: 20px;}
.titlerow{position: relative; width:100%; float:left;border-bottom:1px solid #AAAAAA; padding-bottom: 10px;}
.titlerow h5{margin-bottom: 0px;}

.titlerow .selectbox{position:absolute; right:0px; top:-10px; width: 40%; min-width:300px; text-align: right; background: #fff;}
.titlerow .selectbox:after {content:'';  width:12px;height: 12px; border-left:2px solid #000;  border-bottom: 2px solid #000; position:absolute; right:16px;top:10px;
    -webkit-transform: rotate(-42deg); -moz-transform: rotate(-42deg); -khtml-transform: rotate(-42deg);transform: rotate(-42deg);  z-index: 1;}
.titlerow .selectbox select {padding:8px; width:100%; -webkit-appearance: none;-moz-appearance: none;  appearance: none; background: transparent; position: relative; z-index: 2;}
.titlerow h5{color:#337698; font-size: 24px;}
.titlerow:before { content: '-'; font-size: 63px;  position: absolute;  left:-50px;  top: -6px;    border-radius: 50%; height: 40px;  width: 40px;
    line-height: 26px; color: #337698;  text-align: center;}

.contentRow{width:100%; float:left; margin-top: 15px;}
.contentRow .colrow{width:285px; float:left; margin-right: 10px;}
.boxnum{width:100%; float:left;box-shadow: 3px 4px 3px #d8cbcd; -webkit-border-radius:10px;moz-border-radius:10px;-ms-border-radius:10px;border-radius:10px;}
.boxHeader{background:#DE2934; color:#fff;-webkit-border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;-khtml-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px; padding:8px 10px;}
span.ctitle {border: 1px solid #fff;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%; width: 22px;height: 22px; display: inline-block;text-align: center;line-height: 19px;}
.boxFooter{font-size:13px; background:#F4AA6C; color:#fff; float: left; width: 100%;  text-align: center;-webkit-border-radius:0px 0px 10px 10px;-moz-border-radius:0px 0px 10px 10px;-khtml-border-radius:0px 0px 10px 10px;border-radius:0px 0px 10px 10px;padding:8px 10px;}
.boxFooterBgColrChange{background:#fff; color:#F4AA6C; text-decoration: underline; font-size: 18px;}
.dotCol{ font-size:24px; line-height: normal; cursor: pointer; }
.boxbodypart{padding:0px 10px; width:100%; float:left; background: #fff;}
.boxbodypart .courthousesystem{width:100%; float:left; margin: 3px 0px;border-bottom:1px solid #ccc; padding:3px 0px;}
.courthousesystem ul, .courthousesystem ul li{list-style:none; float: left; width: 100%; padding:0px; margin: 0px}
.courthousesystem ul li{width:50%; float: left; color:#0E3B5A; text-overflow: ellipsis;  white-space: nowrap; overflow: hidden; padding-right: 10px;}
.courthousesystem ul li .iconn{margin-right: 10px;}
.statealarmRow, .statebox, .alatebox{width:100%; float:left;}
.statealarmRow{padding:0px 25px;}
.statebox{border-bottom:1px solid #ccc;}
.stateRow{width:100%; float:left; color: #337698; font-size:12px; padding:7px 0px 3px 0px;}
.statestatusRow{width:100%; float:left; position:relative; display:-webkit-box;display:-moz-box; display:-ms-flexbox; display:-webkit-flex;display:flex;}
.status{width:60%; float: left; font-size:21px; color:#0E3B5A;}
.statussate{width:20%; float: left; font-size: 21px;color:#0E3B5A;}
.statusmin{width:20%; float: left; text-align: right;align-self: flex-end;color:#516d87;}
.alarmbox{width:100%; float:left; color: #DE2934; position: relative; line-height: 19px; margin: 7px 0px; font-size:15px;}
.alarmbox span.icon{ position: absolute; left:-26px; top:-1px;}
.alarmicon{display:block;}
.fullwidth{width:100%;float:left;}
.buttonbox span{background:#ef001d;color: #fff; text-transform: uppercase; padding: 3px 25px; border-radius: 6px; margin-top: 5px; display: inline-block;}
.alarminhight{min-height:80px; font-size:13px;}

.boxbodypart .systemcontroll{width:100%; float:left; margin: 3px 0px;border-bottom:1px solid #ccc; padding:3px 0px;}
.boxbodypart .systemcontroll ul, .boxbodypart .systemcontroll ul li{list-style:none; float: left; width: 100%; padding:0px; margin: 0px}
.boxbodypart .systemcontroll ul li{width:100%; float: left; color:#0E3B5A; font-size: 16px;}
.boxbodypart .systemcontroll ul li .iconn{margin-right: 10px;}
.buttonbox span.yelcolor{background:#ced600;}
.buttonbox span.yellowcolor{background:#f69c00;}
.headerbhchange{background:#FD6D76;}
.contentRow .slider .colrow{width: 100%; padding-right:10px;}
.contentRow .colrow{width: 33.33%; padding-right: 10px; margin-right:0px;}

.button.slick-prev.slick-arrow {background: #000; font-size: 34px;width: 40px; height: 40px; border-radius: 50%; z-index: 10; left:-43px;}



/**login and sign up page****/
.signupMain{width:100%; display:table; vertical-align:middle; height:100%;}
.createprocess .signupMain{background:#d5def5 !important; box-shadow:1px 8px 19px #949699}
.signupCenter{display:table-cell; vertical-align:middle;}
.formbox{max-width:950px;  margin:0px auto;}
.formrow{background: #fff; padding:5px; margin-bottom: 5px; width: 100%; float: left; position: relative; padding-left:200px; padding-right: 180px;}
.formrow label{position: absolute; left:10px; top:11px; font-weight: bold; color: #0E3B5A;}
.texinfo{position: absolute; right:10px; top:11px; font-size: 18px; color: #0E3B5A;}
.formrow .inputbox{width: 100%; border:0px; padding:3px 10px; color: #0E3B5A;}
.formbox span{display: block; margin-bottom:15px;}
.formrow.passin{background: transparent; padding-top:0px;padding-bottom:0px;}
.formrow.passin span{margin-bottom:0px; margin-left: 17px; font-size: 18px; color: #0E3B5A; }
.buttonsub{width: 100%; text-align: center; float: left; margin-top:10px;}
.buttonsub .buttonformbox{ margin-bottom:10px;display: inline-block; text-decoration: none; text-transform: uppercase; background:#F4AA6C; color: #fff; padding:12px 45px; -webkit-border-radius:40px; -moz-border-radius:40px; -khtml-border-radius:40px; border-radius:40px; border:0px; cursor: pointer; min-width: 350px;}
.buttonsub .buttonformboxnew{ text-transform: uppercase;background: transparent;color: #F4AA6C;padding:9px 45px;-webkit-border-radius:40px;-moz-border-radius:40px;-khtml-border-radius:40px;border-radius:40px;border: 2px solid #F4AA6C;cursor: pointer;min-width: 350px; margin-bottom:0px; font-size: 18px; height: 50px;}
.buttonsub .buttonformboxnew.removedisable {color:#F4AA6C; border:2px solid #F4AA6C;}


.formbox.login{max-width:450px;}
.formbox.login .formrow{padding-right:0px;}
.formin { border: 1px solid #ccc; padding: 30px 15px;float: left; display: inline-block; background: #c0c2c5;}


.formvalidation label.error, #signupForm label.error{ position: relative; color: red;}
.formvalidation#processForm .relinput label.error{position:absolute;left:0px;bottom: -29px;width: 300px; font-weight:bold;}

.page-content.customerMain.createprocess {background:#F2F6FC;}

.chiller-theme .skybg.sidebar-wrapper{background:#3282c5;}
.chiller-theme .skybg.sidebar-wrapper .sidebar-menu ul li.active {background:#25a4ea;}
.chiller-theme .skybg.sidebar-wrapper .sidebar-menu ul li:hover{background:#25a4ea;}
.skybg.sidebar-wrapper .sidebar-menu ul li.active:after{border-color: transparent transparent transparent #25a4ea}
.skybg.sidebar-wrapper .sidebar-menu ul li:hover:after{border-color: transparent transparent transparent #25a4ea}
.chiller-theme .skybg.sidebar-wrapper .sidebar-header, .chiller-theme .sidebar-wrapper .sidebar-search, .chiller-theme .sidebar-wrapper .sidebar-menu{border-top:1px solid #25a4ea;}


.chiller-theme .greenbg.sidebar-wrapper{background:#2b6205;}
.chiller-theme .green bg.sidebar-wrapper .sidebar-menu ul li.active {background:#F4AA6C;}
.chiller-theme .greenbg.sidebar-wrapper .sidebar-menu ul li:hover{background:#F4AA6C;}
.greenbg.sidebar-wrapper .sidebar-menu ul li.active:after{border-color: transparent transparent transparent #F4AA6C}
.greenbg.sidebar-wrapper .sidebar-menu ul li:hover:after{border-color: transparent transparent transparent #F4AA6C}
.chiller-theme .greenbg.sidebar-wrapper .sidebar-header, .chiller-theme .sidebar-wrapper .sidebar-search, .chiller-theme .sidebar-wrapper .sidebar-menu{border-top:1px solid #F4AA6C;}

/**customer page css**/
main.page-content.customerMain .formbox {margin: 80px 0px 0px 40px;}
main.page-content.customerMain .formbox h2.title {color:#337698;font-weight:bold;}
.inviteheading{width:100%; float:left; margin-top:10px; margin-bottom:10px; }
.inviteheading span{font-size: 24px;color:#337698;font-weight:bold; margin:0px; display: inline-block; float:left;}
.inviteheading .searchbox{color:#F4AA6C; font-size:20px; float: right; text-decoration: underline; float:right;}
.customerbox .buttonsub .buttonformbox{background:#F4AA6C; padding-left:60px; padding-right:60px;}
.buttonsub.cancel{color:#ef001d; text-transform: uppercase;}
.customerMain .buttonsub .buttonformbox{background:#F4AA6C; min-width: 350px;}

.invidationbox{max-width:90%; margin:30px auto; display: none; z-index: 20;}
.invitationheader{float: left;width: 100%; background: #F4AA6C;border-radius:10px 10px 0px 0px;-webkit-border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;-khtml-border-radius:10px 10px 0px 0px;}
.invitationheader h2{color: #fff; padding: 20px 25px; font-size: 24px; font-weight: 600; text-transform: capitalize;}
.invitationcontent{float: left; width: 100%; background:#d5def5;padding:40px 0px 20px 50px;}
.invitationcontent h5{font-weight:bold; color: #337698; font-size: 24px;}
.invitationcontent p {color:#0E3B5A; font-size: 18px;}
.buttonboxn{ width: 100%; float: left; margin-top: 50px;}
.customerbox.hide{display: none;}
.invidationbox.show{display: block;}

.setupaccount h2.title {color:#337698;font-weight:bold; font-size: 38px;}
.setupaccount select.inputbox {background: #fff; width: 100%;  margin: 10px 0px;padding: 9px; border:1px solid #ccc;}
.setupaccount .formbox span{font-size:18px; color: #0E3B5A;}
.whatbest{width:100%; float: left; margin-top: 15px;}
.whatbest h5 {font-weight:bold; color:#337698; margin-bottom: 2px; font-size: 24px;}
.whatbest p {color:#0E3B5A; font-size: 18px;}

.setupaccount .buttonsub .buttonformbox{background:#F4AA6C; min-width: 300px;}
#signupPart2 {display: none}
#signupPart2.show {display: block}
#signupPart1.hide {display: none}
.loginSignup { position: absolute;right: 15px;top: 15px;}


/*----tab css------*/
ul.tabs{margin:0;padding:0;float:left;list-style:none;height:32px;width:100%}
ul.tabs li{float:left;margin:0;cursor:pointer;padding:0 21px;height:31px;line-height:31px;color:#000000;overflow:hidden;position:relative; border:1px solid #000000; margin-right: 5px; border-bottom-width:2px !important; -webkit-border-radius:8px;-moz-border-radius:8px;-khtml-border-radius:8px;border-radius:8px;}
.tab_last{border-right:1px solid #333}ul.tabs li:hover{color:#178cf9;border-color: #178cf9;}
ul.tabs li.active{color:#178cf9;border:1px solid #178cf9;display:block}
.tab_container{float:left;width:100%;overflow:auto}
.tab_content{padding:20px;display:none; float: left; width: 100%; padding-left:0px;}
.tab_drawer_heading{display:none}
@media screen and (max-width:630px){
    .deityHeaderMessageBox {background: #de2934;color: #fff;position:fixed;left: 0px;top: 0px;width: 100%;text-align: center;z-index: 999;font-size: 11px;}
    .smallInputbox{width: 100% !important;}
    .smallInputbox input{width: 85% !important;}
    .selectExistingProcessTab{margin-left: 5px !important; padding: 3px 13px !important; text-align: center;}
    span.customeradd1{padding: 11px 15px 11px 50px !important; margin-left: 14px !important;}
    .Customer-Add-Button-icon{position: absolute !important; left: 285px !important;}
    .userDatabaseBodyContainter span.customeradd1{padding: 11px 15px 11px 50px !important; margin-left: 70px !important;}
    .userDatabaseBodyContainter .Customer-Add-Button-icon{position: absolute !important; left: 285px !important;}

}

@media screen and (max-width:527px){
    .deityHeaderMessageBox {background: #de2934;color: #fff;position:fixed;left: 0px;top: 0px;width: 100%;text-align: center;z-index: 999;font-size: 11px;}
    .controlTitlemain h2 span.addcontroller{float: left !important;}
    .mainIconTitlebox h2 span.iconbox{left: -41px !important; height: 51px; width: 37px !important;}
    .page-wrapper.toggled .page-content.customerDetail{padding-left: 32px !important;}
    .saveNclose span{min-width: 100% !important;}
    .channeAlarmSettingList .editprocessButton span{font-size: 16px !important; padding: 7px 15px !important;}
    .selectUnselectBox{margin-left: 35px !important; margin-top: 17px !important;}
    .positionAblIcon{left: 16px; top: 55px !important;}
}

@media screen and (max-width:499px){
    .deityHeaderMessageBox {background: #de2934;color: #fff;position:fixed;left: 0px;top: 0px;width: 100%;text-align: center;z-index: 999;font-size: 11px;}
    .tabs{display:none}.tab_drawer_heading{background-color:#ccc;color:#fff; font-size: 22px; border-top:1px solid #333;margin:0;padding:5px 20px;display:block;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
    .d_active{background-color:#666;color:#fff}
    .createprocess .buttonsub .buttonformbox, .createprocess .buttonsub .buttonformboxnew{min-width: 90% !important; white-space: inherit;}
    .buttonsub .buttonformbox{padding: 11px 20px;}
    .assignUnassingPopupTop.show{padding-left: 5px; padding-right: 5px;}
    .buttonsub .buttonformbox{min-width: 100%; white-space: inherit;}
    .assignUnassingPopupMain .buttonsub .buttonformbox{height: inherit; white-space: inherit;}
    .assignbutton{min-width: 100% !important;}
    .page-wrapper .page-content.createprocess .container-fluid{margin-left: 10px!important; margin-top: 40px !important;}
    span.customeradd1{padding: 11px 41px 11px 50px !important; margin-left: 20px !important;}
    .Customer-Add-Button-icon{position: absolute !important; left: 45px !important; top: 29px;}
    .controlTitlemain h2 span.iconbox{top: 1px !important;}
    .userDatabaseBodyContainter span.customeradd1{padding: 11px 25px 11px 50px !important; position: absolute; top: 30px; left: -7px; }
    .userDatabaseBodyContainter .Customer-Add-Button-icon{position: absolute !important; top: 30px; left: 53px !important;}
    #userDatabasebodyContainter{margin-top: 30px;}
    .signupCenter{padding: 0 10px;}
    .termAndConditionCheckboxIcon{float: left; display: flex;}
}
@media screen and (max-width: 499px) {
    #dashboardAlarmsId .mainRowbox {
        padding-left: 35px !important;
    }

    #dashboardAlarmsId .page-wrapper .page-content {
        padding-left: 35px !important;
    }
}

main.page-content.customerMain .customernewSelect .formbox{margin:0px; float: left;width: 100%; display: inline-block;height: 400px;overflow: auto; padding: 0px 10px;}
.customernewSelect .courthousesystem ul li{width:100%;}

.colheadbgBlue{background:#337698;}
.customernewSelect .alarminhight{min-height: 44px;}
.titleStarcolore{font-size: 15px;vertical-align:5px;margin-left:5px;}
.customernewSelect .mainRowbox{padding-left:0px; margin:0px;}
.customernewSelect .mainRowbox .iconremove:before{display:none;}
.customernewSelect .mainRowbox .titlerow.iconremove{border-bottom:0px;padding:0px;}
.noalarmColor .alarmbox, .alarmbox.alarminhight.noalarmColor{color:#b6b6b6;}
.customernewSelect .contentRow .colrow{margin-bottom:10px;}
.customernewSelect .contentRow .colrow:nth-child(4) {clear: both;}

.titleStartBgGreen{background:#F4AA6C;padding:5px;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;color:#fff;border:1px solid #fff; margin-top: -2px;}
.searchboxcustomer {background: #fff;min-width: 300px;max-width: 70%; position: relative; margin-bottom: 15px;}
.searchboxcustomer .searchbutton{background: transparent; float: left;}
.searchboxcustomer .searchbutton { background: transparent;float: left;border: 0px;  width: 30px;  display: block;height: 30px;line-height: 31px;  cursor: pointer; padding-right: 15px;}
.searchboxcustomer input.searchCustomer {height:60px; line-height: 60px; border: 0px;width: 100%; font-size: 19px; color: #0E3B5A;}
.searchboxcustomer .inputbox { width: 100%;margin-left: 50px;}
.searchboxcustomer .searchbutton {background: transparent;float: left;border:0px; left:8px; width:auto; display: block;height:auto;line-height:31px; cursor: pointer; position:absolute;}
.searchboxcustomer .searchbutton i.fa {font-size: 22px;line-height:53px;}
* { outline: none;}

/*process page*/
h3.processTitleform{font-weight: bold; font-size:24px; color:#337698; margin-top:30px;}
.formbox.process p span {display: inline-block; font-style: italic; color: #0E3B5A; font-weight: bold;margin: 0px;}
.formContent p {font-size:18px; color: #0E3B5A}
.setTimebox, .largeInputbox, .conBox, .formContent, .label {width: 100%;float: left;}
.inputbox.relinput{width:100%; float:left; position:relative; margin-bottom:25px; max-width:600px;}

.formvalidation#processForm .setTimebox .relinput label.error {bottom: -35px;width: 100%;font-weight:bold;line-height:13px; font-size:14px;}


.largeInputbox select.selectform {padding:0px 10px; width:100%; background: #fff; border:0px; height:40px; margin-bottom: 10px;}
.largeInputbox {padding-left:140px;}
.smallInputbox { position: absolute; left: 0px;top:0px; padding-right:10px;}
.smallInputbox input {max-width: 100%;  border: 0px; height:39px; padding: 0px 10px; font-style:20px;}
.label label {font-weight: bold;}
.largeInputbox select.selectform{font-size:20px;}
.notificationtet{width:100%;float: left; color: #ced70d; font-weight: bold; margin-bottom:5px; text-transform: uppercase; font-size:18px;}
.notificationtet.colororagne{color:#f69c00;}
.notificationtet.colorRed{color:#ef001d;}
#processForm .label label{font-size:20px; color: #0E3B5A;}
#processForm .titlemailcol{font-size:20px; color: #0E3B5A;}
#processForm .setTimebox{margin-bottom: 20px;}
.error{font-weight: bold;}
.error.colorRed{color:#ef001d;}
.titlemailcol {font-weight:bold;font-size:16px;float:left;width:100%;margin-top:15px;margin-bottom:6px;}
.addNewfield{color:#F4AA6C; font-size:20px; cursor: pointer;}
.addNewfield span {background:#F4AA6C;margin-right: 5px;display: inline-block; color: #FFF;width: 23px; height:23px;text-align: center;line-height: 21px;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;border:1px solid #fff; font-size:22px;}

.conBox .courthousesystem ul, .conBox, .colProcess .courthousesystem ul li{width:100%; color:#AAAAAA;}
.conBox .courthousesystem ul li.checked{color:#2e749b;}
.colProcess .alarmbox{color:#AAAAAA;}
.conBox .alarminhight{min-height:inherit;}
.colProcess .titleHead{color:#aaabab; font-size:22px; font-weight:bold; text-transform:uppercase; display: none; margin-bottom:7px;}
.colProcess .colrow:nth-child(1) .titleHead{display:block;}
/*.colProcess .colrow.checked .titleHead.checked{color:#2e749b; display: block; display: none;}*/
.colProcess .colrow:nth-child(1) .titleHead.checked{color:#337698;}
.createCustomTitle h2 {font-weight:bold;color: #337698;}
.addSign {background:#F4AA6C;width:100%;text-align:center;height:145px;-webkit-border-radius:11px;-moz-border-radius:11px;-khtml-border-radius:11px;border-radius:11px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.addSign span {font-size:35px;color:#fff;font-weight:bold;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;border:1px solid #fff; width:40px;height:40px;line-height:38px; display: inline-block;}
.colProcess .add-another {background:#F4AA6C;text-align: center;color: #fff; margin: 13px 0px 0px 0px;  padding: 4px 5px; width: 100%; display:block; float:left; -webkit-border-radius:18px;-moz-border-radius:18px;-khtml-border-radius:18px;border-radius:18px;
    text-transform: uppercase;font-size:12px;}
.createProcssmain .contentRow .colrow{max-width: 305px;}
#timeZoneId {width: 100%; border: 0px; margin: 5px 0px;height: 44px;}
.colrow:nth-child(2) .addSign, .colrow:nth-child(3) .addSign{background:#F4AA6C;}
.page-content.createprocess{height:100%;}
.topbox, .changePasswordPopup, .assignAllProcess, .graphPopoup, .addAssingControllerPopup, .auditLogProcessPopupMainBox, .resendUserInivtation, .rolechangeMessagePopup, .userPermissionFacilityPopup, .userInivtation, .deityUserInivtation, .userPermissionCustomer, .topController, .topControllerTwo, .topboxfive, .topControllerThree, .channelAlarmSetting, .topboxtwo, .controllerAssignProcessPopup, .deleteProcessPopupTop, .deleteFacilityPopupTop, .deleteCustomerPopupTop, .topboxthree, .detailAlarmPopupTop, .topboxfour{display:none; width: 100%; height:100%; align-items: center; justify-content: center;position: absolute;left:0px;top:0px; z-index: 50;}
.topbox.show, .changePasswordPopup.show, .assignAllProcess.show, .controllerAssignProcessPopup.show, .show.graphPopoup, .resendUserInivtation.show, .topController.show, .show.auditLogProcessPopupMainBox, .rolechangeMessagePopup.show, .userPermissionFacilityPopup.show, .userInivtation.show, .deityUserInivtation.show, .userPermissionCustomer.show, .addAssingControllerPopup.show, .topboxfive.show, .deleteProcessPopupTop.show, .deleteFacilityPopupTop.show, .deleteCustomerPopupTop.show, .topControllerTwo.show, .channelAlarmSetting.show, .topControllerThree.show, .topboxfour.show, .topboxthree.show, .detailAlarmPopupTop.show, .topboxtwo.show{display:flex; padding: 20px 0px 20px 260px !important;}
.divboxMain{width:100%; float: left; }
.signupMain.customernewSelect {background:#f2f5fc;padding:0px; -webkit-border-radius:10px;moz-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;}
.centerboxpop{max-width:85%; margin:200px auto 50px auto; width:100%;}
.contentPart {padding:50px;width: 100%; float: left; background:#f2f5fc;}
.channelAlarmSetting{align-items: flex-start;}
.colProcess .colrow .boxnum, .colProcess .colrow .addSign, .colProcess .colrow .add-another{display:none}
.colProcess .colrow .add-another.selectExistingCustomer{display:block;font-size:18px; padding:9px 5px;-webkit-border-radius:28px;-moz-border-radius:28px;-khtml-border-radius:28px;border-radius:28px; cursor: pointer;}
.colrow:first-child .addSign{display: flex;}
/*.colrow:nth-child(1).checked .boxnum{display:block}
.colrow:nth-child(1).checked .addSign{display:none;}
.colrow:nth-child(2).checked .addSign{display:flex;}
.colrow:nth-child(2).checked2 .addSign{display:none;}
.colrow:nth-child(2).checked2 .boxnum{display:block;}
.colrow:nth-child(3).checked2 .addSign{display:flex;}
.colrow:nth-child(2).checked2 .add-another:nth-of-type(4){display:block;}
.colrow:nth-child(3).checked3 .addSign{display:none;}
.colrow:nth-child(3).checked3 .boxnum{display:block;}
.colrow:nth-child(3).checked3 .add-another:nth-of-type(4), .colrow:nth-child(3).checked3 .add-another:nth-of-type(5){display:block;}
.colrow:nth-child(2).checked3 .add-another:nth-of-type(5){display:block;}*/
.popHeader h2 {color: #fff;padding: 20px 25px;font-size:24px; font-weight: 600; text-transform: capitalize;}
.customernewSelect .formbox, .createprocess .formbox, .controllDetail .formbox{max-width:100%;}
.popHeader {background:#F4AA6C;width:100%; float:left; -webkit-border-radius: 10px 10px 0px 0px;-moz-border-radius: 10px 10px 0px 0px;-khtml-border-radius: 10px 10px 0px 0px;border-radius: 10px 10px 0px 0px; position: relative;}
.popHeader .close{position:absolute;right:15px;top: 15px;  color: #fff;cursor:pointer;opacity:1; border: 3px solid #fff;
    -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%; width: 36px;height: 36px; text-align: center; line-height: 32px; font-size:18px;}
.closes{
    cursor: pointer;
    position: absolute;
    top: 1.5rem;
    right: -1rem;
    padding: 12px 29px;
    transform: translate(0%, -50%);
    font-size: 28px;
}
/*controller page css*/
.page-wrapper .page-content.controller{padding-top:0px;}
.page-wrapper .page-content .searchBoxController {background: #fff;min-width: 300px;max-width:830px; font-size:20px; position: relative; margin-bottom: 15px; padding:5px 10px}
.page-wrapper .page-content #controllerBoxMain, .page-wrapper .page-content #controllerDetailBoxMain{margin:0px; padding:0px;}
.searchBoxController .searchbutton{background: transparent; float: left;}
.searchBoxController .searchbutton { background: transparent;float: left;border: 0px;  width: 30px;  display: block;height: 30px;line-height: 31px;  cursor: pointer;}
.searchBoxController input.searchCustomer {height:50px; line-height:50px; border: 0px;width: 100%; z-index: 15; position: relative;}
.searchBoxController .inputbox { width: 100%;padding-left: 50px;}
.searchBoxController .searchbutton {background: transparent;float: left;border:0px; left:8px; width:auto; display: block;height:auto;line-height:26px; cursor: pointer; position:absolute;}
.searchBoxController .searchbutton i.fa {font-size: 22px;line-height:43px;}
.fullWidth{width:100%; float:left}
.controlTitlemain h2{font-weight:bold; color:#337698; font-weight:bold; position: relative; font-size: 38px;}
.contollerMain{padding-left:50px;}
.controlTitlemain h2 span.iconbox {position:absolute;left: -50px;  top: 0px;  -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;  width:40px;  height:40px;  text-align:center; line-height:26px;}
.controlTitlemain h2 span.iconbox .fa{font-size:23px;line-height: 17px !important;margin:-7px; color:#2e4f70;}
.controlTitlemain h2 span.addcontroller{background:#F4AA6C;color:#fff;-webkit-border-radius:40px;-moz-border-radius:40px;-khtml-border-radius:40px;border-radius:40px;border:0px;cursor: pointer;padding:7px 70px; text-transform: uppercase; border: 4px solid #ffffff; font-size:18px;font-weight: normal;display: inline; float:right;}
.addAssingControllerPopup .buttonsub .buttonformbox{padding-top:5px; padding-bottom:5px;}
.controller .controllerDatabase .mainRowbox.ctrlInvenMaxwidth{max-width:1240px;}
.controllerContent .tabs{width:100%;display:inline-block}
.controllerContent .tab-links:after{display:block;clear:both;content:''}
.controllerContent .tab-links li{margin:0 5px;float:left;list-style:none}
.controllerContent .tab-links a{padding:5px 20px;display:inline-block; text-transform: uppercase; -webkit-border-radius:4px; -moz-border-radius:4px;-khtml-border-radius:4px;border-radius:4px; background:#78c3fb;font-size:16px;font-weight:400;color:#fff;transition:all linear .15s}
.controllerContent .tab-links a:hover{background:#a7cce5;text-decoration:none}
.controllerContent .tab-links li.active a,.controllerContent .tab-links li.active a:hover{background:#178cf9;color:#fff}
.controllerContent .tab-content{padding:15px;padding-top:0px;}
.controllerContent .tab{display:none}
.controllerContent .mainRowbox{position: relative}
.controllerContent .tab.active{display:block}
.controllerContent ul.tab-links {padding-left:0px; gitmargin-bottom:25px;}
.controllerContent{margin-top:15px;}
.controller .mainRowbox{padding-left:0px;margin-top:0px; max-width:1300px;}
.controller .mainRowbox .titlerow:before{display: none;}
.controller .titlebox{display: inline-block; font-weight:bold;}
.controller .titlebox span.subtitle {display: block;  font-size: 10px;}
.controller span.ctitle{vertical-align:top; line-height: 20px;}
.controller .courthousesystem ul li{width:100%; padding-left:25px; color:#b7b7b7; border:0px;}
.controller .boxbodypart .courthousesystem{border:0px; padding-top:10px;}
.controller .buttonbox .transfer{text-transform: uppercase; font-size:16px; background:#F4AA6C; color: #fff; padding:5px 45px; -webkit-border-radius:40px; -moz-border-radius:40px; -khtml-border-radius:40px; border-radius:40px; border:0px; cursor: pointer;}
.controller .buttonbox {text-align: center; padding-bottom:8px; margin-top: 54px;}
.controller .buttonbox a  {text-decoration:none;}
.controller .titlerow h5{font-weight: bold; text-transform: uppercase; color: #0E3B5A; font-size:20px;}
.controller .titlerow{border-bottom:0px;padding-bottom:0px; margin-bottom:15px;}
.contentRow .colrow{margin-bottom:15px;}
.controller .contentRow .boxbodypart span.textContent {margin-left:23px;display:inline-block;  color:#0E3B5A; font-size: 16px;}
.controller .contentRow .boxbodypart span.textContent a {font-weight:bold;color: #0E3B5A;}
.controller .boxHeader {padding:8px 10px 4px 10px;}
.controller .boxHeader span.title {float:left;width:100%;line-height:12px;}
.controller .contentRow{margin-bottom:15px; margin-top:0px;}
.controllerIconBox {display:inline-block;background:#F4AA6C; color:#fff; text-transform:uppercase; padding: 7px 50px; -webkit-border-radius:28px;-moz-border-radius:28px;-khtml-border-radius:28px;border-radius:28px; position:absolute; font-size: 18px; right:0px; top:-105px;border:4px solid #fff;
    cursor: pointer;}
/*
.controllerIconBox:before {content: '+'; border:2px solid #fff; -webkit-border-radius: 50%;-moz-border-radius: 50%; -khtml-border-radius: 50%;border-radius: 50%;width:38px;display: inline-block;height:38px; text-align: center;  font-size:31px;font-weight: bold;  line-height:32px;  position: absolute;left:-14px;  background: #F4AA6C;top:-3px;}
*/
.subTiteNumber h5{color:#337698; font-weight: bold;}
.subTiteNumber p{color:#337698; font-size: 18px;}
.subTiteNumber span{ display:inline-block; margin-top: 15px; color:#337698;text-transform: uppercase; font-size:18px; background:#F4AA6C; color: #fff; padding:7px 45px; -webkit-border-radius:40px; -moz-border-radius:40px; -khtml-border-radius:40px; border-radius:40px; border:0px; cursor: pointer;}
.subTiteNumber {margin-top:-9px;}
.breadcrumb span{color:#F4AA6C; padding-left:25px; text-transform: uppercase; font-size: 20px; position: relative}
.breadcrumb span:before{content:'';width:0px;height:0px;  border-color: transparent #F4AA6C transparent transparent;
    border-width: 5px; border-style: solid; position: absolute;left:0px;top: 10px;}
.page-wrapper .page-content > div.breadcrumb{background: transparent; padding-bottom:0px;}

.controllDetail.signupMain {background: #d5def5 !important;box-shadow: 1px 8px 19px #949699; -webkit-border-radius:10px;-khtml-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.controllDetail .mainRowbox {padding-left:0px;margin:0px;height:370px;overflow:auto;}
.controllDetail .mainRowbox .titlerow{border:0px; padding-bottom:0px;}
.controllDetail .mainRowbox .titlerow:before{display: none;}
.controllDetail .titlebox{display:inline-block; font-weight:bold;}
.Selectcustomre {font-size:24px;text-transform: uppercase;margin-bottom:10px; color:#337698;font-weight: bold;}
.controllDetail .courthousesystem ul li {padding-left:26px; width: 100%;}
.controllDetail .courthousesystem ul li.addresctr{min-height:100px;}
.controllDetail .courthousesystem {border-bottom:0px;}
.popButtonCol span.button{text-transform: uppercase; font-size:18px; background:#F4AA6C; color: #fff; padding:11px 45px; -webkit-border-radius:40px; -moz-border-radius:40px; -khtml-border-radius:40px; border-radius:40px; border:0px; cursor: pointer;}
.popButtonCol {text-align:center; margin:20px 0px 10px 0px;}
.popButtonCol span.removedisable.button {background:#F4AA6C;opacity:0.5; pointer-events: none;}
.popconTitle h2 {font-weight:bold;color: #337698;font-weight: bold;position:relative;}
.popconTitle p, .emailLabel {font-size:18px; line-height:23px;}
.addressInfor span{display: block}
.addressInfor span.addTitle{font-weight: bold;}
.addressInfor ul{padding:0px; margin:0px; list-style: none;}
.addressInfor ul li{margin-bottom: 15px; list-style: none;}
.controllerMailInfo {margin:10px 0px;height: 142px;overflow: auto;padding: 0px 10px 0px 0px;}
.addNewfield.popupPlus {text-align: center; margin-bottom: 35px;}
.addNewfield.popupPlus span {height:45px; width:45px; font-size:45px; line-height:37px;}
.successbox h5{color: #337698; font-size: 24px; font-weight: bold;}
.successbox p{font-size: 18px; color: #0E3B5A;}
.successfulbox {min-width: 300px;display:inline-block;margin-top: 25px;}
.transferControll.hide{display: none;}
.PopBacktiel{padding:15px 30px; padding-bottom:0px; width:100%; float:left; padding-left:116px;}
.PopBacktiel .back{color:#F4AA6C;font-size:21px; text-transform:uppercase; cursor: pointer; margin:0px 10px 0px 20px; position: relative;}
.PopBacktiel .popTitle{color:#337698;font-size:24px; text-transform:uppercase; font-weight:bold;}
.PopBacktiel .back:before { position: absolute; left:-25px;  content:'';top:10px;  width: 0px;height: 0px;  border-width:6px; border-color: transparent #F4AA6C transparent transparent;  border-style: solid;}
.PopBacktiel span{float:left;}
.PopBacktiel span.icon i.fa.fa-long-arrow-right { border-bottom:0px solid #4885aa;padding: 0px 10px;  line-height: 18px;}
.PopBacktiel span.icon{position: relative;}
.PopBacktiel span.popTitle.icon:after {position:absolute;content:'I';left: 30px;font-weight: normal;}
.ctrDetailMain .colrow.activeopc{opacity: 0.6}
.ctrDetailMain .colrow.activeopc.active{opacity:1}
.ctrDetailMain .colrow.activeopc.active .boxnum {width: 100%;float: left;box-shadow: 3px 4px 3px #d8cbcd;-webkit-border-radius: 10px;moz-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px;}
.ctrDetailMain .colrow .boxnum{border:2px solid transparent;}


.Selectcustomre.cotloopTitle{ font-weight: bold; text-transform: none;}
.loadingImg{display:none; width:100%; text-align:center;}

.mainRowbox.asignContrlerMain{padding-left:0px;margin:0px;height:370px;overflow:auto;}
.usassingTitle{color:#12385c; font-weight:bold; text-transform: uppercase; font-size:20px; color: #337698;}
.addAssingControllerPopup .usassingTitle{width: 100%; float: left; margin-top:20px;}
.addAssingControllerPopup .searchboxcustomer .inputbox{ margin-left: 0px; background: #fff; padding-left: 20px; float: left; width: 100%;}

.asignContrlerMain .titlebox{display: inline-block; font-weight:bold;}
.asignContrlerMain .titlebox span.subtitle {display: block;  font-size: 10px;}
.asignContrlerMain span.ctitle{vertical-align:top; line-height: 20px;}
.asignContrlerMain .buttonbox{text-align:center;}
.asignContrlerMain .buttonbox .assingbox{ min-width:200px; display:inline-block; margin-top: 15px; text-transform: uppercase; font-size:15px; background:#F4AA6C; border:2px solid #F4AA6C; color: #fff; padding:1px 0px; -webkit-border-radius:40px; -moz-border-radius:40px; -khtml-border-radius:40px; border-radius:40px; cursor: pointer;}
.asignContrlerMain .courthousesystem ul li{color:#AAAAAA; font-size: 16px;}
.asignContrlerMain .boxbodypart .courthousesystem{border:0px;}
.asignContrlerMain .colrow.ctrColRow.active .buttonbox .assingbox{background: transparent; border:2px solid #F4AA6C; color:#F4AA6C;}
.responseMessage {width:100%;float: left;margin-top: 20px;font-size: 22px;}
.asignContrlerMain .colrow.activeopc{opacity: 0.6;pointer-events:none;}
.asignContrlerMain .colrow.activeopc.active{opacity:1}
.asignContrlerMain .colrow.activeopc.active .boxnum {box-shadow: 3px 3px 7px #F4AA6C; border:2px solid #F4AA6C;-webkit-border-radius:13px; -moz-border-radius:13px; -khtml-border-radius:13px; border-radius:13px;}
.customerMain .buttonsub .buttonformbox.custoembox{opacity:1;}
.removedisable{ background:#F4AA6C; opacity:0.5 !important;}
.topboxfive .contentPart{padding-top:10px; padding-left:116px;}

.assingHeaderCornerRound .boxHeader {-webkit-border-radius:10px; -moz-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;padding:5px 10px;}
.assingHeaderCornerRound .titlebox{display: inline-block; font-weight:bold;}
.assingHeaderCornerRound .titlebox span.subtitle {display: block;  font-size: 10px;}
.assingHeaderCornerRound span.ctitle{vertical-align:top; line-height: 20px; margin-right: 6px;}
.assingHeaderCornerRound .contentRow .colrow {max-width:348px; width:100%;}


.setSystemAlarm h3 {font-weight:bold; color:#337698; font-size:20px; margin-top: 20px; text-decoration: none;}
.setSystemAlarm h4{font-weight: bold; color:#0E3B5A; font-size:20px;}

.setSystemAlarm p strong{font-style: italic; font-size: 18px; color: #0E3B5A}
.setSystemAlarm p {font-size: 18px; color: #0E3B5A}
.setSystemAlarm ul, .setSystemAlarm ul li{list-style: none; margin: 0px; padding:0px; font-size: 18px; color: #0E3B5A;}
.setSystemAlarm ul li {margin-bottom: 10px;}
.setSystemAlarm ul li strong.level{font-style: italic;}

.assingPoppuSelectbox .formSelectInput {background: #fff; width: 100%;height:40px;margin: 30px 0px 80px 0px; padding: 5px;}
.divboxMain .contentPart, .divboxMain{background:#d5def5; border-radius: 10px;}
.channelAlarmSetting .divboxMain .contentPart, .channelAlarmSetting .divboxMain {background:#d6e2f4;-webkit-border-radius:15px;-moz-border-radius:15px;-khtml-border-radius:15px;border-radius:15px;}

div#stdDleyErr {margin-bottom:5px;color:red;font-weight: bold;}
.setTimebox .notificationtet input[type=checkbox] { position: relative; -webkit-appearance:none; -none-appearance: none;-moz-appearance: none;  background: #fff; width: 15px; height: 15px; border: 1px solid #404041;vertical-align:-2px;}
.setTimebox .notificationtet input[type=checkbox]:checked:before {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid #ced70d;
    position: absolute;
    left: 2px;
    top: 3px;
    border-bottom: 2px solid #ced70d;
    -webkit-transform: rotate(-46deg);
    -moz-transform: rotate(-46deg);
    -khtml-transform: rotate(-46deg);
    transform: rotate(-46deg);
}

.setTimebox .notificationtet.colororagne input[type=checkbox]:checked:before {border-left: 2px solid #f69c00;border-bottom: 2px solid #f69c00;}
.setTimebox .notificationtet.colorRed input[type=checkbox]:checked:before {border-left: 2px solid #ef001d; border-bottom: 2px solid #ef001d;}


body.createprocessBg .page-content.customerMain.createprocess{background:#f2f6fc;}
body.createprocessBg.bgChange .page-content.customerMain.createprocess{background:#c6d8e5;}


div#prEmailErr {
    color: red;
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}



.buttonsub.cancel .canceltag{color:#DE2934; font-size: 18px;}
#invErr_S0{color:#ef001d; font-weight: bold; display: block; margin-bottom: 10px;}


/****controler Assingment****/
.page-wrapper .controllerAssignment.page-content{padding-top:0px;}
.controllerAssignment .titlerow span.titleName{font-size:24px; color:#337698;  font-weight:bold; float: left;}
.controllerAssignment .mainRowbox.fullwidthMainrowbox .titlerow span.titleName{position: absolute; left: 0px; top:0px;}
.controllerAssignment .mainRowbox.fullwidthMainrowbox .titlerow h5{padding-left:325px; padding-right:360px; }
.controllerAssignment .mainRowbox{max-width:1060px;}
.controllerAssignment .titlerow{border-bottom:0px;}
.controllerAssignment .titlerow span.titleNumber {color:#337698;font-weight:bold;font-size:38px;margin-top:3px;display:inline-block;}
.page-wrapper .page-content > div.breadcrumb{margin-bottom:3px;}
.controllerAssignment .titlerow:before{top:2px; left:-45px; line-height:25px; height:40px; width:40px;}
.controllerDetail ul{list-style: none; margin:0px;padding:0px; max-width:850px;}
.controllerDetail ul li{display:inline-block; margin-right: 15px;}
.controllerDetail ul li span{display:inline-block; color:#337698; font-size:20px;}
.controllerDetail ul li span.key{min-width:150px;}
.controllerDetail ul li span.value{min-width:250px;}
.conrollerPurchased{margin-top: 10px; margin-bottom: 35px;}
.conrollerPurchased span{color:#337698; font-size:20px;}
.conrollerPurchased a {color:#F4AA6C; font-size:20px; font-style: italic; font-weight: bold; text-decoration: underline;}
.titlerow.subTitle:before {cursor: pointer; content: "";border:3px solid #337698;width:20px;height:20px;  -webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px;border-radius:0px;  border-left: 0px;  border-top: 0px; -webkit-transform: rotate(43deg); -moz-transform: rotate(43deg); -khtml-transform: rotate(43deg);transform: rotate(43deg);
    top: 7px; left:-29px;}
.assingCtrlTogg h5{cursor:pointer; display:inline-block;}
.titlerow.subTitle.show:before{top:11px;-webkit-transform: rotate(317deg); -moz-transform: rotate(317deg); -khtml-transform: rotate(317deg);transform: rotate(317deg);}
.titlerow.subTitle.assingCtrlToggbottom:before{display:none;}
.boxHeader a {color:#fff; text-decoration: none;}
.titlerow.subTitle.assingCtrlToggbottom h5 span.titleName:before {cursor: pointer; content: "";border:3px solid #337698;width:20px;height:20px;  -webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px;border-radius:0px;  border-left: 0px;  border-top: 0px; -webkit-transform: rotate(43deg); -moz-transform: rotate(43deg); -khtml-transform: rotate(43deg);transform: rotate(43deg);
    top: 7px; left:-29px; position: absolute;}
.titlerow.subTitle.assingCtrlToggbottom.show h5 span.titleName:before{top:11px;-webkit-transform: rotate(317deg); -moz-transform: rotate(317deg); -khtml-transform: rotate(317deg);transform: rotate(317deg);}
.ConrollerDetailpagetogglesection{font-size: 38px !important;}
.colheadbgOrange{background-color: #F4AA6CFF ;}

.edittitlrox {position: relative; z-index:500; width: auto;  float: right; width: 100%;}
.edittitlrox span.editControlBUtton{margin-botom:10px;text-transform: uppercase; background:#F4AA6C; color: #fff; padding:12px 45px; -webkit-border-radius:40px; -moz-border-radius:40px; -khtml-border-radius:40px; border-radius:40px; border:0px; cursor: pointer; position:absolute; right:0px;top:-2px;min-width:326px;padding:9px 39px;}
.icontitle ul {list-style: none; padding:0px; margin:0px;}
.icontitle ul li {margin-right:10px; font-size:38px; border: 2px solid #0E3B5A; color: #0E3B5A;-webkit-border-radius:50px; -moz-border-radius:50px;-khtml-border-radius:50px;border-radius:50px;padding:2px 20px 1px 47px;text-align: left; display: inline-block;  line-height: normal; position: relative;}
.icontitle ul li a {color: #0E3B5A; margin-left: 12px;}
.icontitle ul li a i {content:'\f0c9';-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;
    width: 42px; height:42px;display: inline-block; position:absolute;left: -2px;top:-2px; text-align:center; line-height:34px; font-size:19px;}
.controllerAssignment .titlebox{display:inline-block;}
.controllerAssignment .alarminhight{min-height: 40px; margin:0px;}
.controllerAssignment .courthousesystem ul li{width: 100%;}
.controllerAssignment .statealarmRow {padding:0px 0px 0px 25px;}
.controllerAssignment .boxbodypart .courthousesystem{border-bottom:0px;}
/*.controllerAssignment .boxHeader.colheadbgBlue{ background: #337698;}*/
.controllerAssignment .boxHeader i.fa.fa-star {color: #85afc6;font-size: 19px;vertical-align: 2px;}


.noAlarm .alarmbox{color:#aaaaaa;}
.assingIo, .assignmentContrllerBox{margin-bottom:20px; float:left; width:100%;}
.assingIo, .unAssingIo{max-width:1060px;}
.boxnumAssign{padding:0px 5px; background:#fff; width:100%; float:left;box-shadow: 3px 4px 3px #d8cbcd; -webkit-border-radius:10px;moz-border-radius:10px;-ms-border-radius:10px;border-radius:10px;}
.boxnumAssign .boxHeader{background:#fff; margin-bottom:0px; padding-bottom:0px;}
.controllerAssignment .boxnumAssign .titlebox{color:#337698; font-weight: bold; font-size:24px;}
.controllerAssignment .boxnumAssign .courthousesystem span {font-size:20px;display: inline-block;float:left; line-height: 20px; color: #337698;}
.controllerAssignment .boxnumAssign .courthousesystem span.label{min-width:85px; width: auto;}
.assingSelect{float:left; width:100%;}
.assingSelect span {color:#F4AA6C;font-size:16px; letter-spacing:1px; border: 2px solid #F4AA6C;width:100%; text-align:center;display:block; -webkit-border-radius:50px;-moz-border-radius:50px;-khtml-border-radius:50px;border-radius:50px;height:40px; line-height:37px; position: relative;}
.assingSelect span:after {content:''; height:13px;width:13px;border-left:3px solid #F4AA6C;border-bottom: 3px solid #F4AA6C;position:absolute;right:20px;top: 9px; transform: rotate(-43deg);}
.boxnumAssign .boxFooter a{color:#F4AA6C; font-size:14px; text-decoration: underline;}
.selectAssingController select {background:transparent;width:50%;  padding:9px;font-size:19px;margin-right:15px; float: left;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;
    border:1px solid #555;position:relative; z-index: 5;}
.bulkprocessSelecbox{width:100%; float: left; position: relative; }
.fullWidth.selectAssingController .bulkprocessSelecbox::after {
    content: '';
    width: 15px;
    height: 15px;
    border-left: 2px solid #404041;
    border-bottom: 2px solid #404041;
    position: absolute;
    -webkit-transform: rotate(-48deg);-moz-transform: rotate(-48deg);-khtml-transform: rotate(-48deg);transform: rotate(-48deg);
    right:14px;
    top: 10px;
}
.selectAssingController{background:#fff; }
.selectAssingController .assingbuttonbottom{font-size:18px;text-align: center; float:left; margin-botom:10px;text-transform: uppercase; background:#F4AA6C; color: #fff; padding:12px 45px; -webkit-border-radius:40px; -moz-border-radius:40px; -khtml-border-radius:40px; border-radius:40px; border:0px; cursor: pointer; min-width:350px; position: relative; right:0px; top:0px;}
.assignmentContrller .boxnum .timebox{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.controllerAssignment .contentRow .colrow{padding-right:15px;}
.unAssingIo{width:100%; float: left; padding-top:10px;}
.selectAssingController option.bgcolor#F4AA6C {background: #fff;}

.boxnumAssign .assingSelect span.bgcolor{background:#F4AA6C; color: #fff; font-size:16px;}
.assingSelect span.bgcolor:after{border-left-color: #fff; border-bottom-color:#fff;}
.boxnumAssign .boxFooter a.aTagClorChnage{color:#AAAAAA; text-decoration: none;}
.assingCtrlToggdetail{display:block;}
.assingCtrlToggdetail.show{display:none;}


.titlerow.thisbox .addboxnew {display: none;}
.titlerow.thisbox.show .addboxnew{display: inline-block;}
.titlerow.subTitle.assingCtrlToggbottom.show .bulkprocessSelecbox, .titlerow.subTitle.assingCtrlToggbottom.show #allprocessOpenPopup { display: none;}
.titlerow.subTitle.assingCtrlToggbottom .bulkprocessSelecbox, .titlerow.subTitle.assingCtrlToggbottom #allprocessOpenPopup { display: inline-block;}



/**create process topboxtwo**/
.page-wrapper .page-content.createprocess .container-fluid{margin-top:76px; margin-left:30px;}
.createCustomTitle h2{font-size:38px; color:#337698; line-height: 46px; margin-bottom:25px;}
.colProcess .colrow:nth-child(1) .titleHead.checked{font-size:24px; line-height: 29px;}
.tabNewDesign.topbox ul.tabs li, .tabNewDesign.topboxtwo ul.tabs li, .tabNewDesign.controllerAssignProcessPopup ul.tabs li{color:#F4AA6C; float: none; display:inline-block; font-weight:normal; border:1px solid #F4AA6C !important; text-transform:uppercase; font-size:18px; -webkit-border-radius:21px;-moz-border-radius:21px;-khtml-border-radius:21px;border-radius:21px;}
.tabNewDesign.topbox ul.tabs li.active, .tabNewDesign.topboxtwo ul.tabs li.active, .tabNewDesign.controllerAssignProcessPopup ul.tabs li.active{float:left; color:#337698;border-color: transparent !important; font-weight:bold; text-transform:none;font-size:24px;}
.tabNewDesign.topbox ul.tabs li:nth-child(1), .tabNewDesign.topboxtwo ul.tabs li:nth-child(1) , .tabNewDesign.controllerAssignProcessPopup ul.tabs li:nth-child(1){min-width: inherit;}
.extrapaddingPopup{padding-left:116px; padding-right:114px; padding-top:20px; padding-bottom: 15px;}

main.page-content.customerMain.createprocess .customernewSelect .formbox{height:auto;}
main.page-content.customerMain.createprocess .topboxthree .customernewSelect .formbox{height:auto;}
.tabNewDesigntopbox ul.tabs li, .tabNewDesign.topboxtwo ul.tabs li , .tabNewDesign.controllerAssignProcessPopup ul.tabs li{padding-left:10px; min-width: 400px; text-align: center; line-height: normal; height: auto; margin-top: 5px; padding-top:3px; padding-bottom: 3px;}
.tabNewDesign.topbox ul.tabs li.active, .tabNewDesign.topboxtwo ul.tabs li.active, .tabNewDesign.controllerAssignProcessPopup ul.tabs li.active{text-align: left; min-width:inherit; margin-top: 0px; margin-right: 20px;}
.popHeader h2{line-height:29px;}
.tabNewDesign.controllerAssignProcessPopup ul.tabs li:nth-child(2) {display: inline-block;min-width: 253px;}
.tab_container .mainRowbox {height: 400px;overflow: auto; margin-bottom: 0px; padding-bottom:0px;}
.formbox .formrow.marginbottom {margin-bottom:70px;}
.tab_container .mainRowbox .titlerow h5 {color:#337698;}
.createprocess .topbox .searchboxcustomer, .createprocess .topboxtwo .searchboxcustomer{max-width:61%;}
.buttonsub .buttonformbox{font-size:18px; height: 50px;}
.createprocess .topbox .boxnum .boxHeader .titlebox .title, .createprocess .topboxtwo .boxnum .boxHeader .titlebox .title {font-size: 16px; margin-left: 5px;}
.createprocess .topbox .boxnum .boxHeader .titlebox , .createprocess .topboxtwo .boxnum .boxHeader .titlebox{display: inline-block;font-weight: bold;}
.createprocess .boxbodypart .courthousesystem{border-bottom:0px;}
.createprocess .buttonsub .buttonformbox, .createprocess .buttonsub .buttonformboxnew{min-width: 400px;}
.formrow label {font-size:19px;}
.formrow .inputbox{font-size:19px;}
.topboxthree{align-items: inherit;}

.chiller-theme .skybg.sidebar-wrapper .sidebar-header{background:transparent;}
.controllerAssignment .mainRowbox .titlerow.iconimg:before {background:url(../images/fluent_card_controller.svg) center center no-repeat;content: ''; background-size: 40px; width: 41px; height: 43px;}
.controllerAssignment .mainRowbox .titlerow span.wiFicon {background: url(../images/fluent_live_connection_icon.svg) center center no-repeat;width: 31px; height:38px;display: inline-block;  margin-left: 44px; cursor: pointer; background-size: 38px;}


.boxnum .boxHeader .titlebox{display: inline-block;font-weight: bold;}
.controller .controllerDatabase .courthousesystem ul li{width:100%; color: #0E3B5A; padding-left:0px;}
.controller .controllerDatabase .assign .courthousesystem ul li{color:#AAAAAA;}
.controller .controllerDatabase .mainRowbox{padding-left:0px;margin-top:0px; max-width: 1300px;}
.controller .controllerDatabase .boxbodypart .courthousesystem{border:0px;}
.controller .controllerDatabase .alarminhight{min-height: 20px;}
.boxnum .boxHeader .titlebox span.subtitle {display: block;  font-size: 12px; margin-left: 5px; line-height: 5px; width: 100%;}
.boxnum .boxHeader span.ctitle{vertical-align:top; margin-top:5px; line-height:20px;}
main.page-content.controllerDatabase{padding:0px;}
.assignbutton {display:inline-block;background:#F4AA6C; color:#fff; text-decoration: none !important; text-transform:uppercase;padding: 6px 15px 6px 32px;-webkit-border-radius:28px;-moz-border-radius:28px;-khtml-border-radius:28px;border-radius:28px;  cursor: pointer; min-width:250px; text-align: center;}
.exportcontrollers {border: none; display:inline-block;background:#F4AA6C; color:#fff; text-decoration: none !important; text-transform:uppercase;padding: 6px 15px 6px 32px;-webkit-border-radius:28px;-moz-border-radius:28px;-khtml-border-radius:28px;border-radius:28px;  cursor: pointer; min-width:250px; text-align: center;}
.controllerDatabase .assign .alarminhight{text-align: center;}
.page-wrapper .page-content.controllerDatabase .searchBoxController{width:50%;}
.controllerDatabase .assign-usassign span{cursor:pointer; background:#178cf9; padding: 3px 0px; display:inline-block; color:#fff; min-width:200px; -webkit-border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; text-align:center; margin-right:5px;}
.assign-usassign {display:inline-block;position: absolute;right: -430px;bottom:4px;}
.controllerDatabase .contollerMain{padding-left:20px;}

.controllerDatabase .titlerow.iconremove.ctlinventroy{border-bottom:0px;}
.controllerDatabase .titlerow.iconremove.ctlinventroy h5{font-weight: bold; text-transform: uppercase; color:#1c3c5e;}
.controllerDatabase .titlerow.iconremove.ctlinventroy:before{display: none;}
.controllerDatabase .mainRowbox .contentRow{margin-bottom: 25px;}
.assingunassingbox select option{background-color: #337698;}
.assingunassingbox{width:230px; float:left; margin-bottom:30px; position: relative; background: #337698; -webkit-border-radius: 5px;
    -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
.assingunassingbox select { background: #337698; color: #fff; padding: 3px 3px 3px 8px; font-size: 19px; border: 0px; -webkit-border-radius: 5px;
    -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; width: 100%; -webkit-appearance: none; -moz-appearance: none;
    -ms-appearance: none; -o-appearance: none; appearance: none; }
.assingunassingbox:after{content: ""; width: 0; height: 0; position: absolute; right: 8px; top: 50%; margin-top: -5px;
    border-width: 9px 9px 0 9px; border-style: solid; border-color: #FFFFFF transparent;}
.smallInputbox .tooltiptext{visibility:hidden;width:196px;background-color:#555;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1;bottom:85%;left:42%;margin-left:-60px;opacity:0;transition:opacity .3s}
.smallInputbox .tooltiptext::after{content:"";position:absolute;top:100%;left:32%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#555 transparent transparent transparent}
.smallInputbox:hover .tooltiptext{visibility:visible;opacity:1;padding:5px;text-align:left}
.assbox{width:100%; float: left;}
.assbox .assingCtrlTogg{display:inline-block; width: auto;}
.icontitle ul li:nth-child(1) i{ content:''; background:url(../images/fluent_card_customer.svg) center center no-repeat;content: ''; background-size: 50px; width: 50px; height: 50px;}
.icontitle ul li:nth-child(1) i:before{content:''}
.icontitle ul.process li:nth-child(1) .processbg{ content:''; background:url(../images/fluent_card_process.svg) center center no-repeat;content: ''; background-size:50px; width: 50px; height: 50px;}

.icontitle ul li:nth-child(2) i{ content:''; background:url(../images/fluent_card_facility.svg) center center no-repeat;content: ''; background-size:50px; width: 50px; height: 50px;}
.icontitle ul li:nth-child(3) i{ content:''; background:url(../images/fluent_card_process.svg) center center no-repeat;content: ''; background-size:50px; width: 50px; height: 50px;}
.icontitle ul li:nth-child(2) i:before{content:'';}
.icontitle ul li:nth-child(3) i:before{content:'';}
#controllerHeaderContainter {padding:0px;}
#numericOnlyMessage {color:red;font-weight:bold;}
a.assignbutton:hover {color:#fff;}

.courthousesystem.controller-invertory-un-sp ul li:nth-child(1) i:before{width: 21px; background: url(../images/fluent_card_icon_customers.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
.courthousesystem.controller-invertory-un-sp ul li:nth-child(2) i:before{width: 21px; background: url(../images/fluent_card_icon_facilities.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
.courthousesystem.controller-invertory-un-sp ul li:nth-child(3) i:before{width: 21px; background: url(../images/fluent_icon_process.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
.courthousesystem.controller-invertory-sp ul li:nth-child(1) i:before{width: 21px; background: url(../images/fluent_card_icon_customers.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
.courthousesystem.controller-invertory-sp ul li:nth-child(2) i:before{width: 21px; background: url(../images/fluent_card_icon_facilities.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
.courthousesystem.controller-invertory-sp ul li:nth-child(3) i:before{width: 21px; background: url(../images/fluent_icon_process.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}



#pageContent .cardBodyIcon_organization i:before{width:21px; content: 'O'; background: none; font-size:20px; position:relative; top:-2px; font-family: Arial; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
#pageContent .cardBodyIcon_distributor i:before {width:21px;content:'D'; background:none;font-size:14px;position:relative;top:-4px;font-family:Arial;background-size:19px;height:19px; display: inline-block;
    border: 1px solid #333;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;margin-top:5px;float:left;text-align: center;
    padding-bottom:20px;font-weight:bold;}
#pageContent .cardBodyIcon_client i:before{width:21px;content:'C'; background:none;font-size:14px;position:relative;top:-4px;font-family:Arial;background-size:19px;height:19px; display: inline-block;
    border: 1px solid #333;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;margin-top:5px;float:left;text-align: center;
    padding-bottom:20px;font-weight:bold;}
#pageContent .cardBodyIcon_customer i:before{width: 21px; background: url(../images/fluent_card_icon_customers.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
#pageContent .cardBodyIcon_facility i:before{width: 21px; background: url(../images/fluent_card_icon_facilities.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
#pageContent .cardBodyIcon_process i:before{width: 21px; background: url(../images/fluent_icon_process.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}



/**controller-assignment**/
.courthousesystem.assignControl ul li:nth-child(1) i:before{width: 21px; background: url(../images/fluent_card_icon_customers.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
.courthousesystem.assignControl ul li:nth-child(2) i:before{width: 21px; background: url(../images/fluent_card_icon_facilities.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
.courthousesystem.assignControl ul li:nth-child(3) i:before{width: 21px; background: url(../images/fluent_card_icon_controller.svg) 1px 1px no-repeat; background-size: auto; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block; vertical-align: sub;}
.ctrlAssign-CardHederIcon span.ctitle i:before{width:18px; background: url(../images/cardheaderContrller-assignment.png) 3px center no-repeat;  content: ''; background-size:13px;height: 18px;display: inline-block;}

/**customer detail page*****/
.page-wrapper main.page-content.customerDetail {padding-top:0px;}
.mainIconTitlebox{margin-top:15px;}
.mainIconTitlebox h2 {font-weight:bold;color: #337698;font-weight: bold;position:relative; font-size: 38px;}
.mainIconTitlebox h2 span.iconbox {position:absolute;left: -50px;  top: 0px;  -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;  border:0px solid #2e4f70;  width:45px;  height:45px;  text-align:center; line-height:31px;}
.mainIconTitlebox h2 span.iconbox .fa{font-size:23px;line-height: 17px !important;margin:-7px; color:#2e4f70;}

.editdetail {cursor:pointer;  background: #F4AA6C;color: #fff; font-size:18px;-webkit-border-radius: 23px;-moz-border-radius: 23px;-khtml-border-radius: 23px;border-radius: 23px;
    min-width: 200px;display: inline-block; text-align: center; padding:7px 7px; margin-left:30px; vertical-align: middle;position: relative;text-transform: uppercase;}
.customerDetail .editdetail i.fa.fa-star.editicon { background: #F4AA6C;position: absolute; left:-29px;top: -4px;  font-size: 21px;padding:5px; -webkit-border-radius:50%; -moz-border-radius:50%; -khtml-border-radius: 50%;border-radius: 50%; }
.callMailTab{width:100%; float:left; margin:15px 0px;}
.callMailTab ul{margin:0px; padding:0px; list-style: none;}
.callMailTab ul li{display:inline-block; margin-top: 10px;}
.callMailTab ul li .tabcol{border:2px solid #F4AA6C;min-width: 169px; font-size: 18px; display: inline-block;  text-align: center; border-radius: 19px;  margin-right: 11px;  color: #F4AA6C;}
.courthousesystem ul li.bcolorText{color:#0E3B5A;}
.courthousesystem.fullWidthLiChild ul li{width:100%;}
.alarminhight38px {min-height:38px;}

.star-color-lightBlue{color:#85afc6;}
.customerDetailFacility .dotCol .fa-star{font-size: 19px;vertical-align: 3px;}
.customerDetailFacility .boxbodypart .courthousesystem{border:0px;}
.customerDetailFacility .alarmbox{margin:0px;}
.boxnum i.fa.fa-clock-o{font-size:17px;}

.courthousesystem.customerDetail ul li:nth-child(1) i:before{width: 21px; background: url(../images/fluent_card_icon_customers.svg) 1px 1px no-repeat; background-size: auto;
    content: ''; background-size: 19px; height: 19px; display: inline-block;}
.courthousesystem.customerDetail ul li:nth-child(2) i:before{width: 21px; background: url(../images/fluent_icon_process.svg) 1px 1px no-repeat;
    background-size: auto; content: ''; background-size: 17px; height: 18px; display: inline-block;}
.addboxnew {margin-top:-6px; background: #F4AA6C; font-size: 18px; display: inline-block;padding: 11px 0px;width: auto;color: #fff;text-transform: uppercase;min-width:200px;text-align: center;cursor: pointer;margin-left:35px;-webkit-border-radius:25px;-moz-border-radius:25px;-khtml-border-radius:25px;border-radius:25px;}
.customerDetail .titlerow h5{min-width:110px; color:#337698; cursor: pointer; display: inline-block;margin-top:3px;font-weight: bold;}
.customerDetailFacility .withoutalarm .dotCol .fa-star {font-size: 19px;  vertical-align: 3px;  background: #F4AA6C; -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;  padding: 3px;  border: 2px solid #fff;  margin-top: -2px;  display: inline-block;}


.customerDetail .titlerow:before{display:none}
.customerDetail .titlerow h5:before {content: ''; background: url('../images/Plusicon.svg') center center no-repeat; position: absolute;  left:-60px;  top: -10px; height: 51px;  width: 51px; background-size: 50px !important;}
.customerDetail .titlerow.show h5:before{content:'';background: url('../images/minusicon.svg') center center no-repeat;}

.nexboxToggle{display: none}
.nexboxToggle.show{display: block;}



.titlerow.thisbox{border-color:transparent;}
.titlerow.thisbox.show{border-color:#bbbcbe;}


.customerDetail .titlebox{display:inline-block;}
.customerDetail .alarminhight{min-height: 40px; margin:0px;}
.customerDetail .courthousesystem ul li{width: 100%;}
.customerDetail .statealarmRow {padding:0px 0px 0px 25px;}
.customerDetail .boxbodypart .courthousesystem{border-bottom:0px;}
.customerDetail .boxHeader.colheadbgBlue{ background: #337698;}
.customerDetail .boxHeader i.fa.fa-star {color: #85afc6;font-size: 16px;vertical-align: 2px;}
.oveflowscroll{height:634px;overflow:auto;}
.customerDetail .mainIconTitlebox .iconimg i:before {background: url(../images/briefcase.png) -1px center no-repeat;content: '';background-size: 38px; width: 35px; height:20px; display: inline-block;}

.customerDetail .topboxtwo #newFacilityProcess{display:none;}

/**controller database****/

.controllerDatabase .mainRowbox {margin-bottom:0px;}
.controllerDatabase .mainRowbox .contentRow:last-child {margin:0px;}
.controllerContent.controllerDatabase.fullWidth {margin-top: 0px;}
.controllerContent.controllerDatabase .tab-content {padding-bottom:0px;}
.controllerContent.controllerDatabase .contentRow .colrow {margin-top: 15px;}
.controllerContent.controllerDatabase .controller .titlerow {margin-bottom: 0px;}

/*.mainIconTitlebox h2 span.iconbox i:before {background:url(../images/briefcase.png) -1px center no-repeat;content: ''; background-size: 38px;}*/
.customerDetailFacility .colheadbgBlue span.ctitle i:before {
    width: 18px;
    background: url(../images/customer-detail-facility_Title.png) 3px 4px no-repeat;
    content: '';
    background-size: 13px;
    height: 18px;
    display: inline-block;
}


.assignController .assingControllerButton {background: #F4AA6C;color: #fff; padding: 10px 20px;display: inline-block;text-transform: uppercase;  border-radius: 33px;cursor: pointer;  font-size: 18px; margin-bottom: 15px;}

.contentboxassingment{display: none;}
.contentboxassingment.show{display: block;}

.paddingleft50{padding-left: 50px;}


.assignController .assingControllerButton {background: #F4AA6C;color: #fff; padding: 10px 20px;display: inline-block;text-transform: uppercase;  border-radius: 33px;cursor: pointer;  font-size: 18px; margin-bottom: 15px;}
.assingControllerButton.remove{display: none;}
.contentboxassingment{display: none;}
.contentboxassingment.show{display: block;}
.conrollerPurchased.fullWidth a {cursor: default;pointer-events: none;}
.minHeight35px{min-height:35px;}
/*customer database */
/*
.customerDatabasebox ul li:nth-child(1) i:before{width:18px; background: url(../images/building-assign.png) -1px center no-repeat;  content: ''; background-size: 18px;height: 18px;display: inline-block;}
.customerDatabasebox ul li:nth-child(2) i:before{width:18px; background: url(../images/process-assign.png) -1px 3px no-repeat;  content: ''; background-size: 18px;height: 18px;display: inline-block;}
*/



.controller  .noAlarm .alarmbox .alarmicon{color:#AAAAAA; text-align: left; font-weight: normal; font-weight: normal;}
.boxnum .boxHeader.singleLineBox .dotCol span.ctitle { vertical-align: -1px;}

i.fa.fa-star.starBggreen {color:#fff !important;background: #F4AA6C;padding: 4px; -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;border:1px solid #fff;}

span.customeradd {color:#fff; background: #F4AA6C;  display: inline-block;font-size: 17px; vertical-align: middle; cursor:pointer;  padding: 11px 50px; -webkit-border-radius:31px;-moz-border-radius:31px;-khtml-border-radius:31px;border-radius:31px;  position: relative; margin-left:40px;}

span.customeradd:before {position: absolute; content: '+'; color: #fff;  left: 0px;  border: 2px solid #fff;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;  width: 41px;  height: 42px;  background: #F4AA6C;
    text-align:center;top:0px;font-size:38px; font-weight:normal;line-height:35px;}


div#customerDatabaseHeaderContainter {padding:0px;}

h2.cusnameInFacility {font-weight: normal;  padding-left: 10px;  margin-left: -50px;  border: 2px solid #0E3B5A; margin-bottom:13px; display: inline-block; -webkit-border-radius:33px;-moz-border-radius:33px;-khtml-border-radius:33px;border-radius:33px; padding-left: 0px;padding-right:14px;}
.mainIconTitlebox h2.cusnameInFacility span.iconbox {position:static;display: inline-block;  margin-right:10px;margin-top:0px; margin-left:-2px; height: 54px; width: 54px}

/*h2.facilityNamebox span.iconbox i:before {background: url(../images/building-assign.png) -1px center no-repeat;width: 21px;height:22px;display:inline-block; content: '';background-size: 100%;}
.mainIconTitlebox h2.facilityNamebox span.iconbox .fa{margin-top:8px;}*/

h2.cusnameInFacility a {color:#0E3B5A;text-decoration: none;}

.customerDetail .buttonsub #newCutomerFacililty {display:none;}

.customerDatabaseNew .buttonsub #newCutomerFacililty {display: none;}
.customerDatabaseNew .tab_last {display: none !important;}

.customerDetail ul.tabs{display:none;}


.editdetailCustomer {cursor:pointer; background: #F4AA6C;color: #fff; font-size:18px;-webkit-border-radius: 23px;-moz-border-radius: 23px;-khtml-border-radius: 23px;border-radius: 23px;
    min-width: 200px;display: inline-block; text-align: center; padding:7px 7px; margin-left:30px; vertical-align: middle;position: relative;text-transform: uppercase;}
.customerDetail .editdetailCustomer i.fa.fa-star.editicon { background: #F4AA6C;position: absolute; left:-29px;top: -4px; font-size: 21px;padding:5px; -webkit-border-radius:50%; -moz-border-radius:50%; -khtml-border-radius: 50%;border-radius: 50%; }




/**facility database***/
/*
.facilityDatabasebox ul li:nth-child(2) i:before{width:21px; background: url(../images/fluent_icon_process.svg) 1px 1px no-repeat;  content: ''; background-size: 17px;height: 18px;display: inline-block;}
.facilityDatabasebox ul li:nth-child(1) i:before{width:21px; background: url(../images/fluent_card_icon_customers.svg) 1px 1px no-repeat;  content: ''; background-size: 19px;height: 19px;display: inline-block;}
*/



/*
.customerDatabaseNew .customerDatabasebox ul li:nth-child(1) i:before{width:21px; background: url(../images/fluent_card_icon_facilities.svg) 1px 1px no-repeat;  content: ''; background-size: 19px;height: 19px;display: inline-block;}
.customerDatabaseNew .customerDatabasebox ul li:nth-child(2) i:before{width:21px; background: url(../images/fluent_icon_process.svg) 1px 1px no-repeat;  content: ''; background-size: 17px;height: 18px;display: inline-block;}
*/
.boxnum .facilityDatabaseehader span.ctitle i:before{width:18px; background: url(../images/fluent_card_icon_customers.svg) 2px 3px no-repeat;  content: ''; background-size: 14px;height: 18px;display: inline-block;}
.boxnum .facilityDatabaseehaderred span.ctitle i:before{width:18px; background: url(../images/fluent_icon_process.svg) 2px 3px no-repeat;  content: ''; background-size: 14px;height: 18px;display: inline-block;}








.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}
.loader {
    color: #34779e;
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}
.loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.loader:after {
    left: 3.5em;
}
@-webkit-keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}
@keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}


/*select existing cutomer popup*/
.dotCol input[type=checkbox] {border-radius:2px;border-radius:2px;border-radius:2px;border-radius:2px; position: relative; -webkit-appearance:none; -none-appearance: none;-moz-appearance: none;  background: #fff; width: 15px; height: 15px; border: 1px solid #fff;vertical-align:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;}

.boxbodypart .courthousesystem.addessTwoLine ul li span {display:block;margin-bottom:0px;padding:0px;line-height:17px;}
.boxbodypart .courthousesystem.addessTwoLine ul li{ margin-top:9px;}
.colrow.active .boxHeader{ background:#F4AA6C;}
.colrow.active .boxHeader .dotCol input[type=checkbox]{background:transparent;}
.colrow.active .boxHeader .dotCol input[type=checkbox]:before {content: '';width: 8px; height: 5px;border-left: 2px solid #fff; position: absolute;left: 2px;top: 3px;border-bottom: 2px solid #fff;-webkit-transform: rotate(-46deg);-moz-transform: rotate(-46deg);-khtml-transform: rotate(-46deg);transform: rotate(-46deg);}
.customernewSelect  .contentPart{min-height:600px;}
.exisCustomer .colrow.activeopc {opacity: 0.6;pointer-events:none;}
.exisCustomer .colrow.active{opacity:1;pointer-events: inherit}


.loadSpin{width:100%;float:left;text-align:center}
#loadSpinChangeLog,#loadSpinErrorLog,#loadSpin{width:100%;float:left;text-align:center}
.lds-spinner{color:transparent;display:inline-block;position:relative;width:64px;height:64px}
.lds-spinner div{transform-origin:32px 32px;animation:lds-spinner 1.2s linear infinite}
.lds-spinner div:after{content:" ";display:block;position:absolute;top:3px;left:29px;width:5px;height:14px;border-radius:20%;background:#337698}
.lds-spinner div:nth-child(1){transform:rotate(0);animation-delay:-1.1s}
.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}
.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-.9s}
.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-.8s}
.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-.7s}
.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-.6s}
.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-.5s}
.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-.4s}
.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-.3s}
.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-.2s}
.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-.1s}
.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}
@keyframes lds-spinner {
    0% {opacity:1;}
    100% {opacity: 0;}
}
#assignIOScontroller .bgcolor#F4AA6C{background:#fff;}
.tabNewDesign ul.tabs li {cursor: pointer; pointer-events: inherit;}
.tabNewDesign ul.tabs li.active{cursor:default;pointer-events: none;}
.selectCustboxID{display:none}
.customerDatabaseNew .topbox ul.tabs{display:none;}
.bgcolor#F4AA6C{background:#F4AA6C;}
#unassignIOScontroller .unAssingIo .assingSelect {position: relative;background: #F4AA6C;-webkit-border-radius:44px;-moz-border-radius:44px;-khtml-border-radius:44px;border-radius:44px;}

#assignIOScontroller .assingIo .assingSelect{position: relative;}
#assignIOScontroller .assingIo .assingSelect:after {content:'';height:10px;width:10px;border-left:3px solid #F4AA6C;border-bottom:3px solid #F4AA6C;position: absolute;z-index: 22; display: block;right: 21px;
    bottom:17px;-webkit-transform: rotate(-45deg);-khtml-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);}
#assignIOScontroller .assingIo .assingSelect select{text-align:center; font-size: 18px; text-align-last:center; letter-spacing:1px;  background: transparent; -webkit-appearance:none;-moz-appearance:none;
    -ms-appearance:none;-o-appearance:none;appearance:none; border:3px solid #F4AA6C;width: 100%;height: 36px;-webkit-border-radius:45px;-moz-border-radius:45px;-khtml-border-radius: 45px;border-radius: 45px;
    padding: 0px 16px;margin:0px;display: inline-block;position: relative; color: #F4AA6C;}


#assignIOScontroller .assingIo .boxnumAssignSelected .assingSelect{position: relative;background: #F4AA6C;-webkit-border-radius:44px;-moz-border-radius:44px;-khtml-border-radius:44px;border-radius:44px;}
#assignIOScontroller .assingIo .boxnumAssignSelected .assingSelect:after {content: '';height: 10px;width: 10px;border-left:3px solid #fff;border-bottom: 3px solid #fff;position: absolute;z-index: 22; display: block;right: 21px; bottom:17px;-webkit-transform: rotate(-45deg);-khtml-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);}
#assignIOScontroller .assingIo .boxnumAssignSelected .assingSelect select{letter-spacing:1px; background: transparent; -webkit-appearance:none;-moz-appearance:none;
    -ms-appearance:none;-o-appearance:none;appearance:none; font-size: 18px; border:3px solid #F4AA6C; width: 100%;height: 36px;-webkit-border-radius:45px;-moz-border-radius:45px;-khtml-border-radius: 45px;border-radius: 45px;
    padding: 0px 16px;margin:0px 0px;display: inline-block;position: relative; color: #fff; text-align: center; text-align-last: center;}
.assignAlarmDisable.boxnumAssign .boxFooter a {color:#ccc; text-decoration: navajowhite; cursor:default; pointer-events:none;}

#assignIOScontroller .assingIo .assingSelect select .textCenter{text-align: center;}
.controllerAssignment .mainRowbox.fullwidthMainrowbox .titlerow.subTitle {max-width:1200px;}

/**assing/unassing channel alarm setting****/
.channelAlarmSettingHeader h2{font-weight:bold; color:#0E3B5A; font-size: 38px;}
.channelAlarmSettingHeader ul{list-style: none; margin:0px;padding:0px; max-width:850px;}
.channelAlarmSettingHeader ul li{display:inline-block; margin-right: 15px; width: 100%;}
.channelAlarmSettingHeader ul li span{display:inline-block; color:#337698; font-size:20px; margin-right: 10px;}
.channelAlarmSettingHeader ul li span.key {min-width:65px;}
.channelAlarmSettingHeader ul li span.value{min-width:250px;}
.channeAlarmSettingList .icontitle{margin-top:15px;}
.channeAlarmSettingList .icontitle h2{font-weight: bold; color:#337698; font-size:24px;}
.icontitle ul li a {text-decoration: none;}
.channelAlarmSetting .setSystemAlarm h2 {margin-top:45px;font-weight: bold;color: #337698; font-size:24px;}
.channelAlarmSetting .setSystemAlarm p {font-size:18px;}
.channelAlarmSetting .setSystemAlarm h4{font-size:21px;}
.channelAlarmSetting .setSystemAlarm ul li{font-size:18px;}
.channeAlarmSettingList .editprocessButton{width:100%; float:left; margin-top:15px; margin-bottom:50px;}
.channeAlarmSettingList .editprocessButton span{font-size:18px; text-transform: uppercase;background: transparent;color: #F4AA6C;padding:9px 45px;-webkit-border-radius:40px;-moz-border-radius:40px;-khtml-border-radius:40px;border-radius:40px;border: 2px solid #F4AA6C;cursor: pointer;min-width: 350px; margin-bottom:0px;}
.alarmselection h3 {color: #0E3B5A;}
#allprocessOpenPopup.disable{background:#F4AA6C;opacity:0.5; pointer-events: none;}
#confirmAssingApplicationPopup.disable{background:#F4AA6C;opacity:0.5; pointer-events: none;}
#confirmAllProcCancelBtnPopup.disable{opacity:0.5; pointer-events: none;}
#confirmAllProcCancelBtnPopupX.disable{background:#F4AA6C;opacity:0.5; pointer-events: none;}
.channelAlarmSetting .alarmselection ul li {background:#2B80AF;color: #fff; display: inline-block; margin: 0px 5px; -webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius: 5px;border-radius: 5px;padding: 1px 15px; font-size: 14px; text-transform: uppercase; cursor: pointer;}
.channelAlarmSetting .alarmselection ul li{opacity:0.5;}
.channelAlarmSetting .alarmselection ul li.activeopc{opacity:0.5; pointer-events: none;}
.channelAlarmSetting .alarmselection ul li.active{opacity:1;}
.saveNclose{width:100%; float:left; margin-top:50px; margin-bottom:50px; text-align: center;}
.saveNclose span{text-transform: uppercase;background:#F4AA6C ;color:#fff; padding:9px 45px;-webkit-border-radius:40px;-moz-border-radius:40px;-khtml-border-radius:40px;border-radius:40px;border: 2px solid #F4AA6C;cursor: pointer;min-width:350px; text-align: center; display: inline-block; font-size: 18px; margin-bottom:0px;}
.mainRowbox.fullwidthMainrowbox h5{display: block;}

.assignAllProcess h3 {color:#337698;font-weight:bold;font-size:24px;}
.assignAllProcess p{font-size:18px; color:#0E3B5A;}
.assignAllProcess p span {font-style:italic;}
.assignAllProcess .confirmApplicationButton{float:left; width:100%; text-align: center;}
.assignAllProcess .confirmApplicationButton span{display: inline-block; cursor:pointer;  background:#F4AA6C;text-align: center;color: #fff; margin:35px 0px 15px 0px;  padding:7px 59px; width:auto; -webkit-border-radius:18px;-moz-border-radius:18px;-khtml-border-radius:18px;border-radius:18px;
    text-transform: uppercase;font-size:18px;}
.assignAllProcess .cancel {text-align:center; width:100%; float:left;cursor:pointer;}
.cancel span{color:#de2934; text-transform: uppercase; text-decoration: underline; font-size: 18px;}


/***process detail page start*****/
.arlarmChannleBox{padding-left:50px; margin-top:0px;}
h2.processDetailTitle{margin-left:55px; margin-top: 10px;}
h2.processDetailTitle span.iconbox i:before {background: url(../images/process-channel-detail.png) 0px 15px no-repeat;width: 26px; height:41px;display:inline-block;content:'';background-size:100%;}
h2.processDetailTitle .editdetail{font-size:18px;}
.titlerow.thisboxprocessDetail{border-color:transparent;}
.titlerow.thisboxprocessDetail h5 {font-size: 24px; position: relative; display: inline-block; cursor: pointer;}
.titlerow.thisboxprocessDetail:before{display: none;}
.titlerow.thisboxprocessDetail h5:before { content: '-'; font-size: 63px;  position: absolute;  left:-50px;  top: -6px;  border: 2px solid #337698;  border-radius: 50%; height: 40px;  width: 40px;
    line-height: 26px; color: #337698;  text-align: center;}
.titlerow.thisboxprocessDetail.show h5:before { content: '+'; font-size: 33px; line-height:33px;}
#systemAlarmProcessDetPage .boxnum{min-height: 340px; background: white; margin-bottom: 10px;}



/*******User Detail page**************/
h2.userdetailTitle span.iconbox i:before {background: url(../../images/user-detail-title-icon.png) 2px 5px no-repeat !important; width: 26px; height:25px;display:inline-block;content:'';background-size:100%;}
.boxHeader span.ctitle.userdetailBoxHeader i:before{background: url(../../images/userdetailBoxiTitle.png) 1px 5px no-repeat !important; width:13px;height:19px;display:inline-block; content:'';background-size:100%;line-height:17px;margin-top:-2px;}
.controller .userDatabase .titlerow{margin-bottom:0px;}
.emailandPhone ul li, .OtherInfoPostNameLabel ul li{list-style: none; margin-left: 28px; color:#0E3B5A; font-size: 16px;}
.OtherInfoPostNameLabel ul li.greenColor{color:#F4AA6C; font-size: 16px;}
.emailandPhone ul, .OtherInfoPostNameLabel ul{margin:0px; padding:0px;}
.allboxUserdata{padding:10px 0px; float: left;}
.allboxUserdata .btnbox{padding-left:28px; float:left; width:100%; margin-top: 10px;}
.allboxUserdata .btnbox .viewOnly {background:#337698;color: #fff;border-radius: 5px;border-radius: 5px;border-radius: 5px;border-radius: 5px;text-align:left; min-width:165px; display:inline-block; padding: 4px 10px;}
.allboxUserdata .btnbox .customer {background:#F4AA6C;color: #fff;border-radius: 5px;border-radius: 5px;border-radius: 5px;border-radius: 5px;text-align:left; min-width:120px; display:inline-block; padding: 4px 10px;}
.userDetailPage .buttonsub .buttonformbox{height: auto;}
/*****add usre start****/
.adduserbox .formbox {float:left;max-width: 1200px;}
.userSelectText{margin-left: 20px; margin-top:10px;}
.userSelectText p {font-size:18px; color: #0E3B5A;}
.customizeCustomer span{color:#F4AA6C; font-size:20px; text-decoration:underline; margin-left:15px; cursor: pointer;}
span.creatNewcustomer {color: #F4AA6C; font-size:19px; font-weight:normal; position:absolute;right:0px; top: 0px;}
.selectCustomer h3{position: relative; margin-top:10px;}
.selectCustomer h3 span.creatNewcustomer { text-decoration: underline; color:#F4AA6C;font-size:19px;font-weight:normal; position:absolute;right:0px;top:12px;}
.adduserbox .language{max-width: 50%; float: left; width:100%;}
.sendUserButton{text-align: center; padding-bottom: 25px;}
.sendUserButton .btnbox{margin-botom:10px; font-size: 18px; text-transform: uppercase; background:#F4AA6C; color: #fff; padding:12px 45px; -webkit-border-radius:40px; -moz-border-radius:40px; -khtml-border-radius:40px; border-radius:40px; border:0px; cursor: pointer; min-width: 350px;}
.asperUserStatus .box{display:none;}
.adduserbox .selectboxcustom select{font-size:19px; cursor: pointer;}


.Switch{position:relative;display:inline-block;font-weight:700;color:#ccc;text-shadow: none;height:28px;padding:6px 6px 5px 6px;border:2px solid #fff;border-radius: 17px;background: #F4AA6C;box-shadow: none;cursor:pointer;font-size: 0px;width:57px;float: right;}
.Switch span{display:inline-block;width:35px}
.Switch span.On{color:#33d2da}
.Switch .Toggle{position:absolute;top:-2px; left:54%; width:28px;height: 28px;border: 2px solid #fff;-webkit-border-radius:50%;moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;background: #F4AA6C;}
.Switch.On .Toggle{left:-1%}
.Switch.Off .Toggle{left:0%}.Switch.Round{padding:0 20px;border-radius:40px}
.Switch.Round .Toggle{border-radius:40px;width:14px;height:14px}
.Switch.Round.Off .Toggle{left:3%;background:#33d2da}
.Switch.Round.On .Toggle{left:58%}.info{font-size:1.2em;margin-bottom:4px}h3{text-decoration:underline}pre{text-align:left;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;background:#f1f2f2;border:1px solid #636363;font-size:2em;margin-top:-10px;margin-bottom:6px}
.syntaxhighlighter .container,.syntaxhighlighter table{font-size:15px!important}
.Switch.Off {background:#ccc;}
.Switch.Off .Toggle{background:#ccc;}

.fSwitch{position:relative;display:inline-block;font-weight:700;color:#ccc;text-shadow: none;height:28px;padding:6px 6px 5px 6px;border:2px solid #fff;border-radius: 17px;background: #F4AA6C;box-shadow: none;cursor:pointer;font-size: 0px;width:57px;float: right;}
.fSwitch span{display:inline-block;width:35px}
.fSwitch span.On{color:#33d2da}
.fSwitch .Toggle{position:absolute;top:-2px; left:0px; width:28px;height: 28px;border: 2px solid #fff;-webkit-border-radius:50%;moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;background: #F4AA6C;}
.fSwitch.On .Toggle{left:-1%}
.fSwitch.Off .Toggle{left:54%}.Switch.Round{padding:0 20px;border-radius:40px}
.fSwitch.Round .Toggle{border-radius:40px;width:14px;height:14px}
.fSwitch.Round.Off .Toggle{left:3%;background:#33d2da}
.fSwitch.Round.On .Toggle{left:58%}.info{font-size:1.2em;margin-bottom:4px}h3{text-decoration:underline}pre{text-align:left;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;background:#f1f2f2;border:1px solid #636363;font-size:2em;margin-top:-10px;margin-bottom:6px}
.syntaxhighlighter .container,.syntaxhighlighter table{font-size:15px!important}
.fSwitch.Off {background:#ccc;}
.fSwitch.Off .Toggle{background:#ccc;}
.demo{padding-left:30px}
/*****add usre end****/

/*userpermissioncustomer start*/
.headerSerachPopup{width: 100%; float:left; padding:35px 20px 5px 20px; border-bottom:2px solid #81a9c3;}
.userPermissionCustomerWidth{max-width:50%; width:100%; float:left;}
.selectUnselectBox{display:inline-block; float: left; margin-left: 70px;}
.selectUnselectBox span{color:#F4AA6C; margin-right: 8px; text-decoration: underline; cursor: pointer;}
.selectUnselectBox {display:inline-block;float:left;margin-left: 70px;margin-top: 35px;font-size:20px;}
.extraPaddingPopupCuserPermissionCustomer{padding-top:20px; padding-left:75px; padding-right:75px;}
.addUserbox.courthousesystem ul li{padding-left:5px;}
/*
.addUserbox ul li i:before { vertical-align: middle; background: url(../images/building-assign.png) 0px center no-repeat;width:18px;height:17px;display:inline-block; content: '';background-size: 100%;}
*/
.addUserbox ul li .count{margin-right:2px;}
.addUserbox ul{max-width:160px;}
.addUserbox .manageVisibility{ font-size: 14px; float:right; text-transform: uppercase;background:#F4AA6C;color: #fff;padding: 3px 10px;-webkit-border-radius:40px;-moz-border-radius:40px;-khtml-border-radius:40px;border-radius:40px;border:0px;cursor: pointer;min-width: inherit;display: inline-block;}

/**channel detail start**/
.stateOpen ul{position:relative; padding-right:25px; height:22px;}
.stateOpen ul li {min-height:5px;width:45%;float: left; display: inline-block;margin-right:5%;}
.stateOpen ul li:nth-child(3){position:absolute;right:0px;bottom:0px;width:auto;font-size:11px!important;}
.boxbodypart .courthousesystem.stateOpen {width:90%;margin-left:9%;}
.alertStatus {float:left; padding-left:22px;width:100%;color: #ee9a00; position: relative; margin-bottom:25px;}
.alertStatus:before {content:''; width:7px;height:8px;display: inline-block; background: #ee9a00; -webkit-border-radius:50%; -moz-border-radius: 50%;-khtml-border-radius:50%; border-radius: 50%;margin-right:7px;}
.graphChartBox{padding-left:50px; margin-bottom:30px; float: left; width: auto;}
.graphChartBox img{max-width:100%;}
.dateTitle {color:#15405f;font-weight:bold;font-size:18px;margin-bottom:7px; margin-top: 8px;}
.samplerateSelect {background:#149ff5; display: inline-block; position: relative; margin-bottom:10px; -webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;}
.samplerateSelect:before {content: '';width:0px;height: 0px; position:absolute; display: inline-block;border-color:#fff transparent transparent transparent;
    border-style:solid; border-width:5px; right:10px; top:10px;}
.samplerateSelect select{ background: transparent;  color:#fff; text-align: center; -webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none; border: 0px;
    min-width:216px;padding:2px 5px;text-align:center; text-align-last:center;}
.selectcompareLayer ul{list-style: none; max-width: 500px; margin:0px; padding:0px;}
.selectcompareLayer ul li{background:#fff; list-style: none;color:#3b607a; font-size: 15px; font-weight: bold; background:#fff; margin-bottom:8px; padding:10px; -webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;}
.selectcompareLayer ul li input[type=checkbox] {  float:right; position: relative; -webkit-appearance:none; -none-appearance: none;-moz-appearance: none;  background: #fff; width:20px; height:20px; border:2px solid #AAAAAA;vertical-align:-2px;}
.selectcompareLayer ul li input[type=checkbox]:checked:before {content: '';width: 10px; height: 7px; border-left: 2px solid #222;position: absolute;
    left:3px; top: 2px;border-bottom: 2px solid #222; -webkit-transform: rotate(-46deg);-moz-transform: rotate(-46deg);    -khtml-transform: rotate(-46deg);
    transform: rotate(-46deg);}
.generate {cursor:pointer;  background: #F4AA6C;color: #fff; font-size:13px;-webkit-border-radius: 12px;-moz-border-radius: 12px;-khtml-border-radius: 12px;border-radius: 12px;
    min-width: 200px;display: inline-block; text-align: center; padding:3px 0px; margin-left:0px; margin-top:5px; vertical-align: middle;position: relative;text-transform: uppercase;}
.otherprocessTitleRow {padding-left:60px;margin-top:15px;}
.otherprocessTitleRow h5 {font-size:24px;position:relative;display:inline-block;cursor:pointer;color: #337698;}
.alertStatus.critibal{color:#de2934;}
.alertStatus.critibal:before{background:#de2934;}
.reunsubscribe{margin: 15px; display: inline;text-transform: uppercase; background: #F4AA6C; color: #fff; padding: 8px 45px; border-radius: 40px;border: 0px; cursor: pointer; font-size: 18px;}

.dateTimeBox {
    margin-bottom: 10px;
    max-width: 535px;
    padding: 10px;
    box-sizing: border-box;
    -webkit-border-radius: 7px;-moz-border-radius: 7px;-khtml-border-radius: 7px;border-radius: 7px;
    display: inline-block; float: left; width:100%;
}
.dateRangebox input {
    padding: 8px 5px;
    font-size: 17px;
    line-height: 17px;
    display: inline-block;
    min-width: inherit;
    width: auto;
    max-width: 150px;
    padding-right: 35px; background: url("../images/calendar.png") 94% center no-repeat #fff;
    border:0px; box-shadow:1px 1px 3px #ccc; border:0px;
}
.dateRangebox label{ margin: 0px 5px;}

.dateTimeBox input {width: 275px; border:0px; margin-left:10px; margin-top: 5px;}
.dateTimeBox label{display:block; margin-bottom: 10px; font-weight:bold;}
#chartjs-tooltip { position: absolute; }
.custom-tooltip {
    display:inline-block;
    align-content: center;
    justify-content: center;
    padding:5px 22px;width:210px;
    background: white;
    border:1px solid #337698;
    line-height: normal;}
.chartMain .positionchart{position: absolute;}
.custom-tooltip {-webkit-border-radius: 6px;-moz-border-radius: 6px;-khtml-border-radius: 6px;border-radius: 6px; font-family: Arial;}
.readingTitle{color:#333;font-size: 13px; text-transform: uppercase;  display: block; margin: 3px 0px; float: left; width:100%;font-family: Arial;}
.custom-tooltip_yAxisfooter{color:#333;font-size: 11px; text-transform: uppercase; font-size:14px;display: block; margin: 3px 0px; float: left; font-family: Arial;width:100%;}
.custom-tooltip_yAxisbody{font-size:18px;  color:#333;font-weight: bold;}
.custom-tooltip_yAxis_ph{font-size:11px;font-weight: bold;}

.hoursDropdown select{letter-spacing:1px; background: transparent; -webkit-appearance:none;-moz-appearance:none;
    -ms-appearance:none;-o-appearance:none;appearance:none; border:3px solid #178cf9; width: 100%;height: 36px;-webkit-border-radius:45px;-moz-border-radius:45px;-khtml-border-radius: 45px;border-radius: 45px;
    padding: 0px 16px;margin:0px 0px;display: inline-block;position: relative; color: #fff; text-align: center; text-align-last: center;}
.hoursDropdown{ float: left; cursor: pointer; max-width:220px; width:100%; position: relative;background: #178cf9;-webkit-border-radius:7px;-moz-border-radius:7px;-khtml-border-radius:7px;border-radius:7px;}
.hoursDropdown:after {content:'';height:10px;width:10px;border-left:2px solid #fff;border-bottom:2px solid #fff;position: absolute;z-index: 22; display: block;right: 21px; bottom:17px;-webkit-transform: rotate(-45deg);-khtml-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);}
.hoursDropdown select{ position: relative; cursor: pointer; z-index:10; font-size:16px; letter-spacing:1px; background: transparent; -webkit-appearance:none;-moz-appearance:none;
    -ms-appearance:none;-o-appearance:none;appearance:none; border:3px solid #178cf9;width: 100%;height: 36px;-webkit-border-radius:7px;-moz-border-radius:7px;-khtml-border-radius:7px;border-radius:7px;
    padding: 0px 16px;margin:0px 0px;display: inline-block;position: relative; color: #fff; text-align: center; text-align-last: center;}
.blueBgColor{background:#178cf9; color: #fff;}

.channeldetailpage #channelDetAlarms .boxnum{min-height: 340px; background: white; margin-bottom: 10px;}
/**channel detail end**/



#loadSpin.showHid{display: none;}
#loadSpin.showHid.dblock{display:block;}
.userPermissionCustomerpopupBodyHeight{height: 400px;  overflow: auto;  margin-bottom: 0px;  padding-bottom: 0px;}

/*****/

.errorbox{display: flex; align-items: center; height:80Vh; justify-content: center}
.errorbox span{font-size:26px;}
.errorPage .page-content, .errorPage div#pageContent{height:100%; padding-left:0px !important;}
/****/
.ControllerNoAlarm{color: #AAAAAA; text-align: left; font-weight: normal; line-height: 19px; margin: 7px -23px;}
.contInvSPBoxHeight .boxbodypart{height:128px;}

.chartMain{width: 100%; float: left; background:#fff; box-shadow: 1px 2px 2px #AAAAAA; -webkit-border-radius:7px; -moz-border-radius:7px; -khtml-border-radius:7px; border-radius:7px; padding:15px; margin-bottom: 15px;}
.headingInfo{width:100%; float:left;}
.heading{color:#337698; font-weight: bold; font-size:26px; padding-left:15px; float:left;}
.chartInfo{float:right;border:1px solid #337698; min-width:240px; -webkit-border-radius:10px;-moz-border-radius:10px;-khtml-border-radius:10px;border-radius:10px; float: right; margin-right:20px; padding:10px;}
.chartInfo ul li,.chartInfo ul{list-style: none; margin-left: 0px; padding-left:0px;}
.chartInfo ul{margin-bottom: 0px; display:inline-block; float: left;}
.chartInfo > ul li:nth-of-type(1){font-size:16px;}
.chartInfo > ul li:nth-of-type(2){font-size:24px; font-weight: bold;}
.chartInfo > ul li:nth-of-type(2) span{font-size:16px; font-weight: normal;}
.chartInfo > ul li:nth-of-type(3){font-size:16px;}
.minMaxAvg{display:inline-block; float:left;}
.chartInfo .minMaxAvg ul{max-width:200px; width: 100%;}
.chartInfo .minMaxAvg ul li {width:auto;float: left; margin-left:15px; font-size: 12px;}
.chartInfo .minMaxAvg ul li span{ display: block;}
.chartInfo .minMaxAvg ul li:nth-of-type(3) span{color: #16c7ff;}

.downloadIcon{float: right; margin-left: 15px; margin-top:40px; position: relative;}
.downloadIcon i.fa.fa-download, .downloadIcon i.fa.fa-print {
    color: #F4AA6C;
    font-size: 24px;
    margin-left: 10px; cursor: pointer;
}

.downloadIcon .fileDownloadOption {
    position: absolute;
    right: 0px;
    top: 32px;
    background: #fff;
    min-width: 144px;
    box-shadow: 4px 4px 4px #AAAAAA;
    display: inline-block;
    z-index: 4;
    border: 2px solid #F4AA6C; -webkit-border-radius:6px;-moz-border-radius:6px;-khtml-border-radius:6px;border-radius:6px; display: none;
}
.downloadIcon .fileDownloadOption.show{display: block;}
.downloadIcon .fileDownloadOption ul{margin:0px; padding:0px;}
.downloadIcon .fileDownloadOption li {
    list-style: none;
    margin: 0px;
    padding: 5px 10px;
    border-bottom: 1px solid #F4AA6C; cursor: pointer;
}
.downloadIcon .fileDownloadOption li:hover{
    background:#F4AA6C; color:#fff;
}
.downloadIcon .fileDownloadOption:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    border-color: transparent transparent #F4AA6C transparent;
    border-width: 8px;
    display: inline-block;
    border-style: solid;
    right: 5px;
    top: -18px;
    z-index: 65;
}
.userPermissionFacilityPopup .centerboxpop {max-width: 450px;}
.userPermissionFacilityPopup .popHeader{background:#fff;}
.userPermissionFacilityPopup .popHeader .close{color:#f44961; border-color:#fff;}
.userPermissionFacilityPopup .popHeader h2{padding:20px 25px 10px 25px;color:#337698; font-weight:bold; font-size:20px;}
.userPermissionFacilityPopup .divboxMain{background:#fff;}
.userPermissionFacilityPopup .userPermissoinContent{padding-left:25px; padding-right:25px; float:left; width:100%; position: relative;}
.userPermissionFacilityPopup .selectUnselect span{color:#F4AA6C; margin-right:10px; font-size: 16px;}
.userPermissionFacilityPopup .signupMain {box-shadow: 2px 2px 10px #555;}
.userPermissionFacilityPopup .boxnum span.ctitle i:before{width:18px; background: url(../images/facility-headerIconBlueBG.png) 2px 5px no-repeat;  content: ''; background-size: 14px;height: 18px;display: inline-block;}
.listBoxFacility{width:100%; float:left; padding:9px 0px; height: 380px; overflow: auto; margin-bottom: 0px; padding-bottom: 0px;}
.listBoxFacility .colrow {margin-bottom:10px;float:left;width:100%;}
.cancelBtn{color:#ef001d; text-transform: uppercase; border:0px; background:none; margin-bottom:10px; padding-top:0px; margin-top:0px; font-size:20px; display: inline-block}
.dateboxMain {display:inline-block;float: left;width:280px; margin-left:15px; margin-top:8px;}
.dateboxMain > div{display: inline-block; float: left; width: auto;  margin: 0px 5px; font-family: Arial; font-size:16px;}
.dateboxMain .prearrow span {width:15px;height:15px;border-left: 3px solid #13171c;border-bottom: 3px solid #13171c; display: inline-block; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);khtml-transform: rotate(45deg);transform: rotate(45deg);cursor: pointer; margin-top:3px;}
.dateboxMain .forwardarrow span {width:15px;height:15px;border-left: 3px solid #13171c;border-bottom: 3px solid #13171c; display: inline-block; -webkit-transform: rotate(-132deg);-moz-transform: rotate(-132deg);khtml-transform: rotate(-132deg);transform: rotate(-132deg);cursor: pointer; margin-top:3px;}
.dateboxMain span.disable{pointer-events:none; background:transparent; display: inline-block; opacity: 0.5;}
.dateboxMain span.disable:hover{border-left: 3px solid #c0c2c5;border-bottom: 3px solid #c0c2c5; opacity: 0.5;}
.dateboxMain .prearrow span:hover, .dateboxMain .forwardarrow span:hover{border-left: 3px solid #13171c;border-bottom: 3px solid #13171c;}
#userPermissionfacilityContainerPopup .selectUnselect {width:100%;float: left; cursor: pointer;}
.userPermissionFacilityPopup .popHeader h2{padding-left:0px;}
span#userPermissionFacilityPopupClose {position:absolute;right: 16px;top: 15px;color: #ef001d;z-index:10;}



.dotCol input[type=checkbox] { position: relative; -webkit-appearance:none; -none-appearance: none;-moz-appearance: none;  background: #fff; width: 15px; height: 15px; border: 1px solid #404041;vertical-align:-2px;}
.dotCol input[type=checkbox]:checked:before {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid #337698;
    position: absolute;
    left: 2px;
    top: 3px;
    border-bottom: 2px solid #337698;
    -webkit-transform: rotate(-46deg);
    -moz-transform: rotate(-46deg);
    -khtml-transform: rotate(-46deg);
    transform: rotate(-46deg);
}



#userDatabasebodyContainter .boxbodypart{min-height:117px;}
.changeRollMain{padding:50px; display: block;}
.changeRollMain span{font-size: 18px; color: #0E3B5A;}




/**css UI***/
nav#sidebar .user-info .user-name{font-size:16px; line-height:18px; font-weight: bold;}
nav#sidebar .user-info .user-role{font-size:16px; line-height:18px;}
.sidebar-wrapper .sidebar-header .user-pic{margin-left:5px;margin-top:4px;margin-right:22px;}
.sidebar-wrapper .sidebar-header {box-shadow:0px 6px 5px #0f3352;}
.chiller-theme .sidebar-wrapper .sidebar-header{background:#0E3B5A;}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a{font-size:16px;}
.chiller-theme .sidebar-wrapper .sidebar-menu{border-top:0px;}
.boxnum .boxHeader .customerNameDv{font-size:16px; margin-left: 5px;}
.boxnum .boxHeader .titlebox .title{font-size:16px; margin-left: 5px;}
.boxnum .courthousesystem ul li{font-size:16px;}
.alarminhight{font-size:16px;}
.ChannelDetailpageiconbox{position: absolute;left: -50px;top: 0px;}

#signupFormUser .formrow{padding-left: 240px;}

.boxnum .boxHeader.doubleLinebox{padding:/*12px 10px 9px 10px;*/7px 10px 3px 10px;}
.boxnum .boxHeader.doubleLinebox .subtitle{font-size:10px;}
.boxnum .boxHeader.doubleLinebox .dotCol{margin-top:0px;}
.boxnum .boxHeader.singleLineBox{padding:6px 10px 6px 10px;}

.boxnum .boxHeader.singleLineBox .dotCol{margin-top:-2px; min-width: 90px; margin-left: 8px;}
.controller-assignment-template .boxnum .boxHeader.singleLineBox .dotCol {
    margin-top:-2px; min-width: 65px; margin-left: 8px;}

#dashboardStarredProcessId .boxnum .boxHeader.singleLineBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

#dashboardStarredProcessId .boxnum .boxHeader .Customer-Star-icon {
    margin-left: auto; !important;
    padding-right: 4px;
}

#dashboardStarredProcessId .boxnum .boxHeader .Customer-Star-icon i {
    display: inline-block;
    padding: 2px;
    border-radius: 50%;
    background: #F4AA6C;
    color: white;
    cursor: pointer;
}
#dashboardStarredProcessId .boxHeader .dotCol {
    min-width: unset;
    margin-left: 0;
}

#dashboardStarredProcessId .alarmbox {
    border-top: none;
    padding-top: 5px;
}

#dashboardStarredProcessId .hasAlarm .alarmbox {
    border-top: 0px solid #ccc;
}

#dashboardStarredProcessId .boxnum {
    border-bottom: none !important;
    box-shadow: none !important;
}

#dashboardStarredProcessId .boxbodypart {
    border-bottom: none !important;
}

#dashboardStarredProcessId .boxFooter {
    border-top: none !important;
    height: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#dashboardStarredProcessId .boxbodypart .courthousesystem{
    width:100%; float:left;
    margin: 3px 0 !important;
    border-bottom:0 solid #FFFFFF !important; padding:0 0 !important;}







.boxnum .boxHeader.singleLineBox span.ctitle{margin-top:-1px;}
.page-wrapper .page-content .containerPadding-Left20{padding-left:20px;}
.boxnum .boxHeader .titlebox .title a { color: #fff;text-decoration:none;}
.icontitle.fullWidth a {text-decoration: none;}
.breadcrumb.fullWidth a {text-decoration: none;color: #F4AA6C;}
.titlerow.thisbox h5 {font-size: 24px;}
.smallIcon.boxHeader .dotCol i.fa{font-size:16px;}
.smallIcon.boxHeader .dotCol .ctitle i.fa{vertical-align: 2px;}
.boxHeader.smallIcon .dotCol i.fa.fa-star{color:#ffffff;}
.mainRowbox.fullwidthMainrowbox{max-width:100%;}
.marginTop20px{margin-top:20px;}
.page-wrapper .page-content div.paddingNone{padding:0px;}

.selectboxcustom select {background:transparent;width:100%; color: #0E3B5A; padding:9px;font-size:19px;margin-right:15px; float: left;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;border:1px solid #555;position:relative; z-index:5;}
.selectboxcustom{width:100%; float: left; position: relative; background: #fff;}
.selectboxcustom::after {content:'';width: 15px;    height: 15px;  z-index: 6;  border-left: 2px solid #404041;  border-bottom: 2px solid #404041; position: absolute; -webkit-transform: rotate(-48deg);-moz-transform: rotate(-48deg);-khtml-transform: rotate(-48deg);transform: rotate(-48deg); right:14px;top:10px;}
.doubleLinebox.boxHeader span.ctitle{ margin-top: -1px; !important; }
.doubleLinebox.boxHeader span.title {line-height:12px !important; float: left; margin-bottom: 3px;}
.doubleLinebox.boxHeader span.subtitle{line-height: 12px !important;}
.textbox strong{font-weight:bold; font-size:22px; font-weight:normal; line-height:17px; font-family:arial;}
.assingHeaderCornerRound .border-radiusNone{-webkit-border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;-khtm-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px;}
.maxWidth{max-width:1300px;}
.page-wrapper .page-content div.paddingNone{padding:0px;}
.boxHeader{color:#fff;}
.marginbox{margin-top:20px; float: left; width: 100%;}
div#error-message {float:left; width:100%;text-align: center;color: red; margin-top:50px;font-size: 21px;}
div#success-message {float:left;width:100%; text-align: center;color:#F4AA6C; margin-top:50px; font-size:21px;}
#close-sidebar{color:#fff;}
.boxnum .boxHeader.singleLineBox{display:table; width: 100%; height: 48px;}
.boxnum .boxHeader.singleLineBox > div, .boxnum .boxHeader.singleLineBox > span{display: table-cell; vertical-align: middle;}
.boxnum .boxHeader.singleLineBox > div{max-width: 100px;}
.boxnum .boxHeader.singleLineBox span.ctitle{min-width:24px;}
.boxnum .boxHeader.singleLineBox .dotCol span.ctitle{width: 24px;}
.boxnum .boxHeader .titlebox .title{font-size:16px; line-height: 14px;}
span.alarmText {margin-left:10px;}

.savencloeMarginbottom{margin-bottom:20px;}

.createAccountSetup .formrow{padding-left: 230px;}
#timeZoneId {width: 100%; border: 0px; margin: 5px 0px;height: 34px; background-color: #FFFFFF;}
.formbox.login {max-width: 450px;}
.formbox.login .formrow{padding-left: 150px;}

.chiller-theme .sidebar-wrapper .sidebar-menu.sp ul li:nth-child(1) a i {font-size:15px; border:2px solid #fff;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;background:#fff;color: #0E3B5A; line-height:19px;}
.chiller-theme .sidebar-wrapper .sidebar-menu.sp ul li a i{width:24px;height:24px;font-size:18px;}
.chiller-theme .sidebar-wrapper .sidebar-menu.sp ul li:nth-child(6) a i{font-size:15px; border:2px solid #fff;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;background:#fff;color: #0E3B5A; line-height:19px;}
.chiller-theme .sidebar-wrapper .sidebar-menu.distributor ul li a i{width:24px;height:24px;font-size:18px;}
.chiller-theme .sidebar-wrapper .sidebar-menu.distributor ul li:nth-child(1) a i {font-size:15px; border:2px solid #fff;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;background:#fff;color: #25a4ea; line-height:19px;}

.chiller-theme .sidebar-wrapper .sidebar-menu.deity ul li:nth-child(1) a i {font-size:15px; border:2px solid #fff;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;background:#fff;color: #0E3B5A; line-height:19px;}
.chiller-theme .sidebar-wrapper .sidebar-menu.deity ul li a i{width:24px;height:24px;font-size:18px;}

#assignIOScontroller .boxnumAssignSelected .bgcolor#F4AA6C {background: #F4AA6C !important;}
.manageVisibility.manageVisibilityDisable {opacity:0.5;pointer-events: none;}
.cancelBtn{cursor:pointer;}
.Switch.blueon.on {background: #9fbbe6;}
.Switch.blueon.on .Toggle{background:#9fbbe6;}

.plusMinuIconToggle .titlerow:before{display:none}
.plusMinuIconToggle .titlerow h5:before { content: ''; background: url('../images/Plusicon.svg') center center no-repeat; position: absolute; left:-60px; top: -10px; height: 51px; width: 51px; background-size: 50px !important;}
.plusMinuIconToggle .titlerow.show h5:before{content: ''; background: url('../images/minusicon.svg') center center no-repeat;}
.halfWidthCardAlarmDetail{width: 100%; border-bottom: 1px solid #AAAAAA; padding: 3px 0px !important;}
.halfWidthCardAlarmDetail li{ width: 50% !important; float: left; color: #0E3B5A; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 10px; }
.alarmCardFooter{display: flex; align-items: center; justify-content: center; background: #fff; color: #FD6D76;}
.alarmStatestatusRow{margin-bottom: 7px;}
.systemAlarmheight{min-height: 80px !important; margin: 7px 0 !important; }
.dashboardHeading span{font-weight: bold; color:#0E3B5A; font-size:20px; text-transform: uppercase;}
.alarmCardFooter p span:nth-child(1){font-size: 14px;}
.alarmCardFooter p span:nth-child(2){font-size: 14px;}
.alarmCardFooter p span{display: block; text-transform: uppercase; }
.dashboardMaxHeight .boxnum {min-height: 370px; background: white;}





@media(max-width:1440px) {
    .centerboxpop{max-width:1024px;}
    .formbox .formrow.marginbottom{margin-bottom:50px;}
    .extrapaddingPopup {padding-left:80px;padding-right: 80px;padding-top:60px;}
    .formrow{padding-top:3px; padding-bottom:3px}
    .formrow .inputbox{padding-top:0px; padding-bottom:0px;}
    .formrow label{font-size:18px;}
    .formrow label{top:6px;}
    .customernewSelect .tab_container .mainRowbox{height: 340px;}
    .customernewSelect  .contentPart{min-height:600px;}
    .customerDetail .topbox .customernewSelect .contentPart,
    .customerDetail .topboxtwo .customernewSelect .contentPart{min-height: 450px;}
    .customerDatabaseNew .topbox .customernewSelect .contentPart,
    .customerDatabaseNew .topboxtwo .customernewSelect .contentPart{min-height: 450px;}

}

@media(max-width:1280px) {
    .centerboxpop{max-width:955px;}
    .popHeader h2{padding-top:15px; padding-bottom:15px;}
    .extrapaddingPopup {padding-left:75px;padding-right:75px;padding-top:55px;}
    .tab_content{padding-top:10px;}
    .topbox.show, .assignAllProcess.show, .topController.show, .userInivtation.show, .deityUserInivtation.show, .userPermissionCustomer.show, .addAssingControllerPopup.show, .topboxfive.show, .topControllerTwo.show, .channelAlarmSetting.show, .topControllerThree.show, .topboxfour.show, .topboxthree.show, .topboxtwo.show{padding:10px 0px 10px 300px !important}
    .extrapaddingPopup{padding-top:25px;}
    .centerboxpop{max-width:800px;}
    #userPermissionCustomerDataLoadContainer .contentRow .colrow{width: 50%;}
    #selCustomerPopupContainter .colrow{width: 50%;}
}

@media(max-width:1240px) {
    .page-wrapper.toggled .sidebar-wrapper{left:-300px;}
    .page-wrapper.toggled #show-sidebar{left:0px; z-index:9991;}
    .page-wrapper .sidebar-wrapper{left:0px; }
    .page-wrapper #show-sidebar{left:-40px;top:0px; -webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px;border-radius:0px; width: 50px; height:60px; line-height: 50px;}
    .page-wrapper.toggled .page-content{padding-left:0px;}
}

@media(max-width:1024px) {
    /****for  all UI****/
    .topbox.show, .assignAllProcess.show, .topController.show, .userInivtation.show, .deityUserInivtation.show, .userPermissionCustomer.show, .addAssingControllerPopup.show, .topboxfive.show, .topControllerTwo.show, .channelAlarmSetting.show, .topControllerThree.show, .topboxfour.show, .topboxthree.show, .topboxtwo.show {padding-left:20px !important; align-items:flex-start;}
    .centerboxpop{max-width:87%;}
    .formrow{padding-right:15px;}
    .contentRow .colrow{width:50%;}
    .extrapaddingPopup{padding-left:25px; padding-right:25px;}
    .tab_content{padding-right:0px;}

    /******customer-database start****/
    .page-wrapper.toggled .sidebar-wrapper{left:-300px;}
    .page-wrapper.toggled #show-sidebar{left:0px; z-index:9991;}
    .page-wrapper .sidebar-wrapper{left:0px; }
    .page-wrapper #show-sidebar{left:-40px;top:0px; -webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px;border-radius:0px; width: 50px; height:60px; line-height: 50px;}
    .page-wrapper.toggled .page-content{padding-left:0px;}
    .page-wrapper .page-content .searchBoxController{max-width: 100%;padding:5px 80px 5px 50px;}
    .searchBoxController .searchbutton{left:55px;}
    .loginSignup{z-index:12;right:0px; top:0px;}
    .logunt {background: #0E3B5A;padding:20px;color: #fff;}
    .page-wrapper .btn-dark{background: #0E3B5A;}
    .logunt a {color:#fff;}
    .paddingleft50{padding-left:0px;}
    .controlTitlemain h2{padding-left:50px;}
    .controlTitlemain h2 span.iconbox{left:0px;}
    .controlTitlemain h2{fonnt-size:32px;}
    span.customeradd{font-size:15px; padding:7px 40px;}
    span.customeradd:before{width:32px; height:32px; font-size:31px; line-height:29px;}
    .tabNewDesigntopbox ul.tabs li, .tabNewDesign.topboxtwo ul.tabs li, .tabNewDesign.controllerAssignProcessPopup ul.tabs li{min-width: 40%;}
    .contentPart{padding: 10px;}
    .changePasswordPopup.show{padding: 20px 10% 20px 10% !important;}
    .signupCenter{padding: 0 10px;}


    /******customer-database end****/

}

@media(max-width:850px) {
    #userPermissionCustomerDataLoadContainer .contentRow .colrow{width: 100%;}
    #selCustomerPopupContainter .colrow{width: 100%;}
}


@media(max-width:767px) {

    /****for  all UI start****/
    .formrow{background:transparent; padding:0px;}
    .formrow label{position: static; font-size: 14px; margin-top: 10px;}
    .formrow .inputbox{padding:0px;}
    .formrow .inputbox .inputbox{padding:5px 10px;}
    .formrow .inputbox{font-size:14px;}
    .extrapaddingPopup{padding-top:10px;}
    .buttonsub .buttonformboxnew{min-width: 280px; padding-top:5px; padding-bottom:5px;}
    .formbox .formrow.marginbottom{margin-bottom:20px;}
    .popHeader h2 {padding-top:7px;padding-bottom:7px;margin-bottom:0px;font-size:20px; line-height: normal;}
    .popHeader .close{top:5px; right:10px; line-height:20px; width:26px; height:26px; font-size:15px;}
    .contentRow .colrow{width:100%;}
    .page-wrapper .page-content > div{padding:20px 10px;}
    .page-wrapper #show-sidebar{height:45px; line-height:34px;}
    .logunt{padding:13px 10px;}
    .searchBoxController .searchbutton i.fa{font-size:18px; line-height:35px;}
    .searchBoxController .inputbox{padding-left:35px;}
    .searchBoxController input.searchCustomer{height:38px; line-height: 38px;}
    .searchBoxController input.searchCustomer{font-size:15px;}
    span.customeradd{font-size:12px; padding:5px 30px; margin-left: -40px; margin-top: 15px;}
    span.customeradd:before{width:23px; height:23px; font-size:23px; line-height:19px;}
    .topbox.show, .assignAllProcess.show, .topController.show, .userInivtation.show, .deityUserInivtation.show, .userPermissionCustomer.show, .addAssingControllerPopup.show, .topboxfive.show, .topControllerTwo.show, .channelAlarmSetting.show, .topControllerThree.show, .topboxfour.show, .topboxthree.show, .topboxtwo.show{padding:5px !important;}
    .centerboxpop{max-width:100%;}
    .tabs{display:none}.tab_drawer_heading{background-color:#ccc;color:#fff;border-top:1px solid #333;margin:0;padding:5px 20px;display:block;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
    .extrapaddingPopup{padding-left:10px; padding-right:10px;}
    .tab_content{padding-top:0px;}
    .formrow label{margin-bottom: 1px;}
    .sidebar-wrapper .sidebar-menu ul li a{padding-top:10px; padding-bottom:10px;}
    .sidebar-wrapper .sidebar-menu ul li.active:after{border-width:26px 16px 26px 16px;}
    .sidebar-wrapper .sidebar-header{padding:10px 20px;}
    span.customeradd{margin-left:0px; margin-top:0px;}
    /****for  all UI end****/

    /******customer-database start****/
    .controlTitlemain h2{font-size:25px; padding-left: 40px;}
    .controlTitlemain h2 span.iconbox{width:30px; height: 30px; border-width:2px; top:6px;}
    .controlTitlemain h2 span.iconbox .fa{font-size:16px;}
    .controlTitlemain h2 span.iconbox{line-height:26px;}
    .controlTitlemain h2 span.iconbox .fa{margin:0px;}
    .customerDatabaseNew .tab_drawer_heading{display: none;}
    .controllerDatabase .controlTitlemain h2 span.iconbox{width:30px; height: 30px; border-width:2px; top:-1px;}
    /******customer-database end****/



    /******channel detail graph css *****/
    .chartContainerBox {width: 100%; float: left; overflow-x:scroll;}
    .chartContainerBox canvas{width:800px !important;}
    .icontitle ul li{font-size:28px; margin-bottom:10px;}
    .icontitle ul li a i{width:38px; height:38px;}
    .mainIconTitlebox h2.processDetailTitle{margin-left:0px;}
    .mainIconTitlebox h2.processDetailTitle span {float: left;display: inline-block;font-size: 18px;}
    .mainIconTitlebox h2.processDetailTitle span.namebox {width: 140px;margin-left: 10px;}
    .mainRowbox{padding-left: 0px;}
    .arlarmChannleBox{padding-left:0px;}
    .mainIconTitlebox h2.processDetailTitle .editdetail {font-size:15px;clear:both;float: left;display: block;}
    .dateboxMain{margin-left: 0px;}
    .otherprocessTitleRow{padding-left:0px;}
    .divboxMain{width: 100%;}
    .contentPart{padding: 5px;}
    .buttonsub .buttonformbox{height: inherit;}
    .PopBacktiel{padding: 15px 5px; padding-left: 5px;}
    .controllerDropDown{width: 100% !important;}
    .contollerMain{padding-left: 5px;}
    .topbox.show, .assignAllProcess.show, .controllerAssignProcessPopup.show, .show.graphPopoup, .topController.show, .show.auditLogProcessPopupMainBox, .rolechangeMessagePopup.show, .userPermissionFacilityPopup.show, .userInivtation.show, .deityUserInivtation.show, .userPermissionCustomer.show, .addAssingControllerPopup.show, .topboxfive.show, .topControllerTwo.show, .channelAlarmSetting.show, .topControllerThree.show, .topboxfour.show, .topboxthree.show, .topboxtwo.show {
        padding: 20px 0px 20px 5px !important; }
    .topboxfive .contentPart{padding-left: 5px; padding-right: 10px;}
    .customernewSelect .tab_container .mainRowbox{height: 250px;}
    .topboxthree .PopBacktiel{padding-left: 5px !important;}
    .formbox.login .formrow{padding-left: 10px;}
    .controlTitlemain h2 span.addcontroller{padding: 7px 20px;}
    .page-wrapper.toggled .page-content.customerDetail{padding-left: 45px; word-break: break-word;}
    .customerDetail .titlerow h5:before{left: -45px !important; height: 51px; width: 40px !important; background-size: 40px !important;}
    div#channelAlarmPopupMain .extrapaddingPopup{padding: 30px 10px !important;}
    .headerSerachPopup{padding: 26px 18px 5px 1px;}
    .listBoxFacility{height: 250px;}
    .userPermissionFacilityPopup .userPermissoinContent{padding-left: 10px; padding-right: 10px;}
    .searchboxcustomer{min-width: 100% !important;}
    .searchboxcustomer .inputbox{width: 90%;}
    .adduserbox .formbox{max-width: 98%; word-break: break-word;}
    .sendUserButton .btnbox{min-width: 0px; padding: 11px 25px;}
    .adduserbox .language{max-width: 70%;}
    .changePasswordPopup.show{padding: 20px 3px 20px 3px !important;}
    .createAccountSetup .formrow{padding-left: 0px;}
    #signupFormUser .formrow{padding-left: 0px;}
    #termsAndConditionsPopupPageHtml_en .signupMain.customernewSelect{background: none;}

    #detailAlarmPopupTop {padding: unset !important;}
    .detailAlarmTableFacilityTd {
        min-width: unset !important;
    }
    .detailAlarmTableProcessyTd {
        min-width: unset !important;
    }
    .detailAlarmTableCustomerTd {
        min-width: unset !important;
    }
    /******channel detail graph css *****/
}


.userDetailPage .controlTitlemain .userdetailTitle .UserEditIcon{font-size: 20px; margin-left: 20px; color: #F4AA6C; cursor: pointer;}
.userDetailPage .controlTitlemain .userdetailTitle .UserBackLink a{font-size: 20px; margin-left: 20px; color: #F4AA6C; text-decoration: underline; font-weight: normal;}
.userDetailPage .buttonsub{float: left; text-align: left; margin-top: 15px}
.userDetailPage .buttonsub .UserDetailEmailbutton{min-width: inherit; margin-right: 30px; text-transform: none; cursor: inherit;}
.userDetailPage .UserDetailRoleLabel{min-width: 200px; display: inline-block; background: #337698; margin-top: 25px; padding: 2px; padding-left: 2px;
    color: white;   font-size: 18px; font-weight: 500; border-radius: 5px; margin-bottom: 12px; padding-left: 10px;}
.userDetailPage .userdetailRoleSelectText{color: #0E3B5A; font-size: 18px; width: 660px; margin-bottom: 28px;}
.UserDetailCustVisible h5 span{font-size: 38px; color: #337698; margin-bottom: 20px; text-transform: capitalize; font-weight: bold;}

.userDetailPage .UserDetailCustVisible{float: none; font-size: 38px; color: #337698; margin-bottom: 25px; margin-top: 12px; cursor: pointer;}
.userDetailPage .userDetailRoleVisible{font-size: 20px; color: #0E3B5A; margin-top: 30px; margin-bottom: 20px; }
.userDetailPage .userDetailRoleVisible .namebox{font-weight: 700; margin-right: 30px;}
.userDetailPage .userDetailRoleVisible .UserEditIcon{color: #F4AA6C; cursor: pointer;}
.userDetailPage .titlerow.subTitle:before {cursor: pointer; content: "";border:3px solid #12385c;width:18px;height:18px;  -webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px;border-radius:0px;  border-left: 0px;  border-top: 0px; -webkit-transform: rotate(43deg); -moz-transform: rotate(43deg); -khtml-transform: rotate(43deg);transform: rotate(43deg);
    top: 9px; left:-29px;}
.userDetailPage .titlerow.subTitle.show:before{top:12px;-webkit-transform: rotate(317deg); -moz-transform: rotate(317deg); -khtml-transform: rotate(317deg);transform: rotate(317deg);}

.UserDetailPageSaveButton{
    margin-bottom: 10px;
    display: inline-block; text-transform: uppercase; background: #F4AA6C;
    color: #fff; padding: 8px 45px;
    -webkit-border-radius: 40px; -moz-border-radius: 40px;
    -khtml-border-radius: 40px; border-radius: 40px; border: 0px; cursor: pointer;
    margin-left: 35px; font-size: 18px; }

.userEmpDetailPageEditpage .adduserbox .formbox{float: left; max-width: 762px; margin-top: 15px; margin-bottom: 30px;}
.userEmpDetailPageEditpage h3.processTitleform{text-decoration: none; font-size: 24px; margin-top: 18px;}
.userEmpDetailPageEditpage #timeZoneId{height: 40px; font-size: 20px; cursor: pointer;}
.userEmpDetailPageEditpage .controlTitlemain .userdetailTitle .UserBackLink{font-size: 20px; cursor: pointer; margin-left: 35px; color: #F4AA6C; text-decoration: underline; font-weight: normal;}
.userEmpDetailPageEditpage .buttonsub{text-align: center;}


.actions-cell {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-start;
}

.small-action-button {
    flex-shrink: 0;
    min-width: 100px;
    text-align: center;
    background-color: #F4AA6CFF;
    border: none;
    color: white;
    padding: 5px 15px;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-right: 10px;
}

.small-action-button:hover {
    background-color: #F4AA6CFF;
}

/* Grayed out button for disabled state */
.disabled-button {
    background:#F4AA6C;opacity:0.5; pointer-events: none;
}
.UserDetailPageDeleteButton {
    background-color: #F4AA6C; /* Match the light orange color */
    color: white;
    border: none;
    opacity:0.5;
    padding: 5px 15px;  /* Smaller padding for smaller buttons */
    text-align: center;
    border-radius: 17px; /*Rounded corners */
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    pointer-events: none;
    margin-right: 10px;  /* Adds space between buttons */
}
.UserDetailPageDeleteButton:hover {
    background-color: #E2B3A3; /* Slightly darker on hover */
}

.UserDetailPageSaveButtonDisable{
    margin-bottom: 10px;
    display: inline-block; text-transform: uppercase; background: #F4AA6C;
    color: #fff; padding: 8px 45px;
    -webkit-border-radius: 40px; -moz-border-radius: 40px;
    -khtml-border-radius: 40px; border-radius: 40px; border: 0px;
    margin-left: 35px; font-size: 18px;
    pointer-events: none;
    opacity:0.5;
}






/****new card header css ******/
/*.customer-icon:before{width:22px; background: url(../images/fluent_nav_customers.svg) 4px 4px no-repeat; content: ''; background-size:17px;height: 21px;display: inline-block;}
.customer-icon { border: 2px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%;
width: 30px; height: 30px; display: inline-block;}


.facility-icon:before{width:22px; background: url(../images/fluent_nav_facilities.svg) 3px 4px no-repeat; content: ''; background-size:17px;height: 21px;display: inline-block;}
.facility-icon { border: 2px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%;
    width: 30px; height: 30px; display: inline-block; text-align: center; vertical-align: top; margin-top: 0px;}*/
.cardheader-titlebox{display: inline-block; font-weight: bold; width: 70%;  padding-right: 10px; padding-left: 5px;
    font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: 26px;}
.cardheader-titlebox-users{display: inline-block; font-weight: bold; width: 100%;  padding-right: 10px; padding-left: 5px;
    font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: 26px;}
.cardheader-titlebox .title{line-height: 30px; margin-left: 5px;}
.cardheader-titlebox a {text-decoration: none; line-height: 30px;}

/*.Controller-bar-rightside:before{width: 22px; background: url(../images/fluent_nav_controllers.svg) 4px 4px no-repeat; background-size: auto;  content: '';  background-size: 15px;  height: 21px;  display: inline-block;}
.Controller-bar-rightside { border: 2px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%;
    width: 28px; height: 28px; display: inline-block;}*/
.Customer-Add-Button-icon{width: 49px; position: relative; z-index: 20; left: 84px; border: 1px solid #FFF;  border-radius: 50%;}
span.customeradd1 {color:#fff; text-transform: uppercase; border: 3px solid #FFFFFF; background: #F4AA6C;  display: inline-block;font-size: 18px; vertical-align: middle; cursor:pointer;  padding: 11px 50px; -webkit-border-radius:31px;-moz-border-radius:31px;-khtml-border-radius:31px;border-radius:31px;  position: relative; margin-left:40px;}
.customer-nav-icon{width: 22px; margin-top: -5px; margin-right: 11px;}
.customer-controller-bar{vertical-align: middle;}
/*.Process-icon { border: 2px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%;
    width: 30px; height: 30px; display: inline-block; text-align: center; vertical-align: top; margin-top: 0px;}
.Process-icon:before{width:24px; background: url(../images/process-card-header.svg) 3px 4px no-repeat; content: ''; background-size:18px;height: 22px;display: inline-block;}*/
/*
.User-icon { -webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%;
    width: 30px; height: 30px; display: inline-block; text-align: center; vertical-align: top; margin-top: 0px;}
.User-icon:before{width:24px; background: url(../images/fluent_card_header_users .svg) 3px 4px no-repeat; content: ''; background-size:18px;height: 22px;display: inline-block;}
*/
.customer-header img{vertical-align: sub;}
.controller-more-icon{float: right;}
.addNewfield img{display: inline-block; width: 23px; margin-right: 10px; vertical-align: sub;}
.button-margin{margin-top: 60px;}
.Channeldetailcheckboxicon{padding-left: 22%;}
.colorChange{color: #0E3B5A; font-size: 16px;}


/******dashboard design new********/

.dashboardSp .dashboardMaxHeight {max-width:1170px; width:100%;float: left;}
.dashboardSp .titlerow h5{font-weight:bold;}
.dashboardSp .dashboardHeading span{font-weight: bold; color:#0E3B5A; font-size:20px; text-transform: uppercase;}
.dashboardSp .dashboardingContentbox .contentRow{margin-top:0px;}
.dashboardSp .dashboardingContentbox .dashboardHeading{ margin-bottom:2px; margin-top:15px;}
.dashboardSp .dashboardingContentbox  .statestatusRow{margin-bottom:7px}
.dashboardSp .controlTitlemain h2{font-weight: bold; color: #0E3B5A; font-weight: bold; position: relative; font-size: 38px;}
.dashboardSp .DashboardCustomerheading h5{font-size: 24px; font-weight: bold; color: #337698;}
#dashboardStarredCustomerId .mainRowbox{padding-left: 2px;}
#dashboardStarredFacilityId .mainRowbox{padding-left: 2px;}
.dashboardSp .buttonbox span{background: transparent; position:relative; color:#de2934; padding:5px 5px 5px 15px;}
.dashboardSp .buttonbox span:before {content:''; background:red;width: 7px; height: 7px;  display: inline-block; -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;
    left: 0px;  position: absolute; top: 10px;}

.dashboardSp .dashboardingContentbox .buttonbox span.yelcolor{color:#ee9a00;}
.dashboardSp .buttonbox span.yelcolor:before {content:''; background:#ee9a00;width: 7px; height: 7px;  display: inline-block; -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;
    left: 0px;  position: absolute; top: 10px;}

.dashboardSp .dashboardingContentbox .buttonbox span.yellowStandard{color:#ebd534;}
.dashboardSp .dashboardingContentbox .buttonbox span.yellowStandard:before{content:''; background:#ebd534;width: 7px; height: 7px;  display: inline-block; -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;
    left: 0px;  position: absolute; top: 10px;}

.dashboardSp .dashboardingContentbox .boxFooter {display:flex;align-items:center;justify-content: center; background:#F4AA6C;}
.dashboardSp .dashboardingContentbox .boxFooter.bgwhite{background:#fff; color:#FD6D76;}
.dashboardSp .dashboardingContentbox .boxFooter p {margin-bottom: 0px; padding-bottom:0px;}
.dashboardSp .dashboardingContentbox .boxFooter p span{display: block; text-transform: uppercase;}
.dashboardSp .dashboardingContentbox .boxFooter p span:nth-child(1){font-size:14px;}
.dashboardSp .dashboardingContentbox .boxFooter p span:nth-child(2){font-size:12px;}
.dashboardSp .dashboardingContentbox .alarmbox{color:#DE2934;}
.dashboardSp  .buttonbox.nalarmbox span:before{display:none;}
.dashboardSp .buttonbox span{color: #DE2934; text-transform: uppercase; padding:4px 25px 3px 14px; border-radius: 6px; margin-top: 5px; display: inline-block; background: transparent; position: relative}

.facility-icon i:before{width:21px; background: url(../images/fluent_nav_facilities.svg) 2px 3px no-repeat;  content: ''; background-size: 18px;height: 23px;display: inline-block;}
.facility-icon { border: 2px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%;
    width: 30px; height: 30px; display: inline-block; text-align: center; vertical-align: top; margin-top: 2px;}

.filterdashboard{width:50%; float: left;}
.filterdashboard:nth-child(1){padding-right:25px;}
.filterdashboard h3{color: #0E3B5A;font-weight:bold;text-decoration:none;font-size:20px;margin-top:5px;}
.filterdashboard .selectboxinner{width:100%; min-width:300px; text-align: right; background: #fff; position: relative;}
.filterdashboard .selectboxinner select {padding:11px 8px; border: 1px solid #0E3B5A; width:100%; -webkit-appearance: none;-moz-appearance: none;  appearance: none; background: transparent; position: relative; z-index: 2; cursor: pointer; font-size: 19px; color: #0E3B5A;}
.filterdashboard .selectboxinner:after {content:'';  width:15px;height: 15px; border-left:2px solid #0E3B5A;  border-bottom: 2px solid #0E3B5A; position:absolute; right:16px;top:15px;
    -webkit-transform: rotate(-46deg); -moz-transform: rotate(-46deg); -khtml-transform: rotate(-46deg);transform: rotate(-46deg);  z-index: 1;}
.filterinnerboxList ul{padding-left:0px; margin-left:0px; margin:0px;}
.filterinnerboxList ul li{list-style: none; display: inline-block; margin-bottom: 3px;}
.filterinnerboxList ul li .filterListbox {display:inline-block;padding:1px 20px;border: 1px solid #cbcdd0; color:#cbcdd0; cursor:pointer; border-radius:4px; text-transform: uppercase;}
.filterinnerboxList ul li .blueColor{ color:#52b3fb;border: 1px solid #52b3fb;}
.filterinnerboxList ul li .greenColor{ color:#cfd700;border: 1px solid #cfd700;}
.filterinnerboxList ul li .orangeColor{ color:#f69e00;border: 1px solid #f69e00;}
.filterinnerboxList ul li .redColor{ color:#f00017;border: 1px solid #f00017;}
.setDefaultFilter.fullWidth .setdefaultText {color:#F4AA6C;text-decoration:underline;font-size: 16px;display: inline-block;margin-bottom: 9px; cursor: pointer;}
.titlerow h5.displayInlinblock{display: inline-block;}
.filterButtonDashboard{margin-left:10px;display: inline-block; text-transform: uppercase; background:#F4AA6C; color: #fff; padding:2px 44px; -webkit-border-radius:40px; -moz-border-radius:40px; -khtml-border-radius:40px; border-radius:40px; border:0px; cursor: pointer; font-size:11px;}
.titleborderbox  {border-bottom: 1px solid #AAAAAA;float: left;width: 100%;}
.titleborderbox .titlerow{border-bottom:0px;}
.cardBodyIconbox i{width:16px;height:16px;background-size: 16px;margin-top:3px;float: left; margin-right: 5px; font-family: Arial; color:#0b355c;}
.cardBodyAlarmIconbox i { width: 20px; height: 20px; background-size: 20px; margin-top: -1px; float: left; margin-right: 5px; font-family: Arial; color: #0b355c;}
.customerCardBody{background:url(../images/fluent_card_icon_customers.svg) center center no-repeat;}
.facilityCardBody{background:url(../images/fluent_card_icon_facilities.svg) center center no-repeat;}
.processCardBody{background:url(../images/fluent_icon_process.svg) center center no-repeat;}
.SystemAlarmCardBody{background:url(../images/fluent_icon_system-alarm.svg) center center no-repeat;}
.controllCardBody{background:url(../images/fluent_card_icon_controller.svg) center center no-repeat;}
.channelAlarmCardBody{background:url(../images/fluent_card_channel_icon.svg) center center no-repeat;}
.AlarmBodyIcon{background:url(../images/Fluent_card_alert_icon.svg) center center no-repeat;}
.NoAlarmBodyIcon{background:url(../images/Fluent_card_no_alert_icon.svg) center center no-repeat;}
div#emp-User-success-message {float:left;width:100%; text-align: center;color:#F4AA6C;font-size:21px;}
div#emp-User-error-message {float:left; width:100%;text-align: center;color: red;font-size: 21px;}
.acknowledgeButton{letter-spacing:1px;border:3px solid #F4AA6C;background:#F4AA6C;  height: 36px;-webkit-border-radius:45px;-moz-border-radius:45px;-khtml-border-radius: 45px;border-radius: 45px;
    padding: 0px 46px; cursor:pointer; margin:0px 0px;display: inline-block;position: relative; color: #fff; line-height:30px; text-align: center; text-align-last: center;}

/****process alarm setting start****/
.buttonbox.arlamrBgTransparent span{background: transparent; position:relative; color:#de2934; padding:5px 5px 5px 15px;}
.buttonbox.arlamrBgTransparent span:before {content:''; background:red;width: 7px; height: 7px;  display: inline-block; -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;
    left: 0px;  position: absolute; top: 10px;}

.buttonbox.arlamrBgTransparent span.yelcolor{color:#ee9a00;}
.buttonbox.arlamrBgTransparent span.yelcolor:before {content:''; background:#ee9a00;width: 7px; height: 7px;  display: inline-block; -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;
    left: 0px;  position: absolute; top: 10px;}

.buttonbox.arlamrBgTransparent span.yellowStandard{color:#ebd534;}
.buttonbox.arlamrBgTransparent span.yellowStandard:before{content:''; background:#ebd534;width: 7px; height: 7px;  display: inline-block; -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;
    left: 0px;  position: absolute; top: 10px;}
.boxFooter.bgwhite.ackAlarm{background:#fff; color:#fd6d76; text-transform: uppercase}
.boxFooter p span.fullblock{display:block;}

.userdatbasebaricon{padding-left: 17%;}
.selectCustomercheckbox{padding-left: 19%}

#nographChdet{color:red; display:inline-block;  font-size:16px; display: none;}


div#channelAlarmPopupMain .extrapaddingPopup {padding: 30px 43px;}
div#channelAlarmPopupMain .centerboxpop{max-width: 1190px;}

/****process alarm Card footer start****/
.processDetial #systemAlarmProcessDetPage .boxFooter p span:nth-child(1){font-size: 14px;}
.processDetial #systemAlarmProcessDetPage .boxFooter p span:nth-child(2){font-size: 12px;}
.processDetial #systemAlarmProcessDetPage .boxFooter.bgwhite{background: #fff; color: #fd6d76;}


.processDetial #systemAlarmProcessDetPage .boxFooter{display: flex; align-items: center; justify-content: center;}

/****Channel alarm Card footer start****/
.processDetial #channelDetAlarms .boxFooter p span:nth-child(1){font-size: 14px;}
.processDetial #channelDetAlarms .boxFooter p span:nth-child(2){font-size: 12px;}
.processDetial #channelDetAlarms .boxFooter.bgwhite{background: #fff; color: #fd6d76;}

.processDetial #channelDetAlarms .boxFooter{display: flex; align-items: center; justify-content: center;}

#dashboardStarredFacilityId #facilityDatabaseBodyContainter .mainRowbox{padding-left:0px;}
#dashboardStarredCustomerId #customerDatabaseBodyContainter .mainRowbox{padding-left:0px;}
.Card-header .courthousesystem ul li{width:100%; color: #0E3B5A;padding-left: 0px;}
.Card-header .alarminhight {min-height: inherit;}
.Card-header .boxbodypart .courthousesystem{border: 0px;}
.Card-header .boxbodypart .courthousesystem{padding-top: 10px;}
.Card-header .noAlarm .alarmbox .alarmicon{color:#AAAAAA; text-align: left; font-weight: normal; font-weight: normal; font-size: 16px;}


.dashbalarrow ul li a{cursor: pointer;}
.dashbalarrow ul li a.active{font-weight:bold; color: #F4AA6C; vertical-align: middle; text-decoration:underline; font-size:28px;}
.dashbalarrow ul li a.active:hover{color: #F4AA6C;text-decoration:underline;}
#dashboardAlarmsId .boxnum{height: 340px; background: white}
/*

/****create process popup redesign*******/
.smallInputbox{width: 150px;}
.smallInputbox input {max-width:100%;border: 0px;height: 39px;padding: 0px 10px;width: 100px;float: left;}
.dhmText {float: left;background: #fff;display: inline-block;padding:6px 9px 7px 9px;}
.smallInputbox{position: relative; float: left; padding-right:0px; font-size: 19px; height: 40px;}
.dayHoursMinutes {float:left;width: 100%;background: #fff;border:2px solid #999;}
.colonBox{font-size: 22px; padding: 5px; float: left;}

.switchCP{position:relative;display:inline-block;font-weight:700;color:#ccc;text-shadow: none; margin-right: 15px;height:43px;padding:6px 6px 5px 6px;border:2px solid #fff;border-radius:50px;background: #F4AA6C;box-shadow: none;cursor:pointer;font-size: 0px;width:90px;float:left;}
.switchCP span{display:inline-block;width:35px}
.switchCP span.On{color:#33d2da}
.switchCP .Toggle{position:absolute;top:-2px; left:53%; width:42px;height:42px; border: 2px solid #fff;-webkit-border-radius:50%;moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;background: #F4AA6C;}
.switchCP.On .Toggle{left:-1%}
.switchCP.Off .Toggle{left:-2%}
.Switch.Round{padding:0 20px;border-radius:40px}
.switchCP.Round .Toggle{border-radius:40px;width:14px;height:14px}
.switchCP.Round.Off .Toggle{left:3%;background:#33d2da}
.switchCP.Round.On .Toggle{left:58%}.info{font-size:1.2em;margin-bottom:4px}h3{text-decoration:underline}pre{text-align:left;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;background:#f1f2f2;border:1px solid #636363;font-size:2em;margin-top:-10px;margin-bottom:6px}
.switchCP.Off {background:#aaaaaa;}
.switchCP.Off .Toggle{background:#aaaaaa;}

.notificationtet {position: relative;padding-left:25px;}

.notificationtet{color:#d6d04d;}
.notificationtet:after{ position: absolute; background:#d6d04d; left:0px; top:5px; content:''; width:10px; height:10px; -webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;}
.notificationtet.colororagne{color:#e7b049;}
.notificationtet.colororagne:after{ background:#e7b049;}
.notificationtet.colorRed{color:#ef001d;}
.notificationtet.colorRed:after{background:#ef001d;}
.topboxthree .contentPart{padding-top:10px;}
h3{text-decoration: none;}
h3.processTitleform{font-size:24px;}
.notificationtet{font-size:16px;}


.topboxthree .PopBacktiel{padding-left:50px;}

.topboxthree .signupMain.customernewSelect{margin-bottom:10px;}
.topboxthree .buttonsub .buttonformboxnew {background:#F4AA6C; color:#fff; font-size:16px;}
.selectdropDownCreatProcess{width: 100%; float:left; border-top:1px solid #ccc; margin-top: 15px; padding: 15px 0px; display: none; margin-bottom: 40px;}

/****select customer popup customer card AAAAAAAress display in the two line*******/
.boxbodypart .addessTwoLine{border-bottom: 0px; height: 64px;}
.boxbodypart .courthousesystem.addessTwoLine .address{display: -webkit-box; line-height: 1.4; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: initial; color: #0E3B5A;}
.boxbodypart .courthousesystem.addessTwoLine .empty-address{color: #AAAAAA;}

.border1px{border: 1px solid #555}
.Customer-Star-icon{padding-left: 9%;}

.height-Customer-starred-alram{min-height: 100px !important;}
.dashboard-line.titlerow.thisbox.show{border-color: #bbbcbe00;}
.borderBottomNone{border-bottom:0px;}
hr {float: left;width: 100%;}
.customerDetail .Customer-detail-address{font-size: 18px; margin-bottom: 13px; color: #337698;}
.customerDetail .customerdetail-primaryContact{font-size: 18px; color: #337698;}
.customerDetail .customerdetail-primaryContact .primary-contact{display: inline-block; width: 150px;}
.manageAlarmSettTextDisable{color: #AAAAAA;text-decoration: none; pointer-events: none;}
.positionRelative{position: relative;}
.positionAblIcon {position: absolute;right: -130px;top: 11px;}
.positionAblIcon a {cursor: pointer;}


.auditLogProcessPopup ul{margin-left: 0px; margin-top: 15px;}
.auditLogProcessPopup ul li {color:#0E3B5A; font-size:18px;}
.auditLogProcessPopup h3{color:#337698; font-weight: bold; font-size:24px; margin-bottom: 2px;}
.confirmApplicationButton {text-align: center;}
.confirmApplicationButton span {margin-top:-6px; background: #F4AA6C; font-size: 18px; display: inline-block;padding:7px 0px;width: auto;color: #fff;text-transform: uppercase;min-width:300px;text-align: center;cursor: pointer;margin-left:35px;-webkit-border-radius:25px;-moz-border-radius:25px;-khtml-border-radius:25px;border-radius:25px;}


select[disabled]{background: #f1f1f1;}
.overflowhidden{overflow:hidden;}
.selectBoxArrowClick select{ position:relative; z-index:50; background: transparent !important;}
.selectBoxArrowClick:after{z-index:40;}
.settingheader{top:50%; left: 46%; position: fixed; color: #337698; font-size: 38px; font-weight: 700;}

/*********print and download graph*************************************/

.downloadPrint{border:2px solid #F4AA6C; padding: 5px 26px; font-size: 18px; color: #F4AA6C;-webkit-border-radius:20px;-moz-border-radius:20px;-khtml-border-radius:20px;border-radius:20px; cursor: pointer;}
.graphPopoup {align-items: flex-start; background:#fff;}
.graphPopoup .divboxMain .contentPart, .graphPopoup .divboxMain {background: #fff;}
.graphPopoup .divboxMain .contentPart{box-shadow: 2px 9px 12px #CCC;}
.graphPopoup .chartMain #canvasChartBoxGraph img{width:100%;}
.graphPopoup #graphIdBox h2{font-weight:bold; margin-bottom:0px; font-size: 38px; color: #337698;}
.graphPopoup #graphIdBox h5{font-weight: bold; margin-top: 15px; font-size:38px; margin-bottom:45px; color: #337698;}
.graphPopoup #graphIdBox ul.graphul { list-style:none; margin:0px; padding:0px;}
.graphPopoup #graphIdBox ul.graphul li {font-size: 24px;margin: 0px; color: #0E3B5A;}
.graphPopoup #graphIdBox ul.graphul li span:nth-of-type(1) {min-width: 178px;display: inline-block;}
.dateInfo{font-size:24px; margin-bottom: 30px; color: #0E3B5A;}
.graphPopoup #graphIdBox ul.graphul li:last-child {margin-top: 20px;}
.graphPopoup .chartMain{box-shadow: none;}
.graphPopoup .extrapaddingPopup{padding:30px;}
#graphIdBox{position: relative;}
#graphIdBox .downloadIcon {float: right;margin-left: 15px;margin-top: 0px;position: relative;margin-right: 77px;}
.chartInfo{margin: 0 auto; padding-left: 10px; padding-right: 10px; overflow: hidden; border: 2px #F4AA6C solid; -webkit-border-radius:15px; -moz-border-radius:15px; -khtml-border-radius:15px; border-radius:15px;}
#graphIdBox .comarionpop{padding:10px; font-size:24px; color: #0E3B5A; font-weight: bold; text-transform: uppercase; padding-left: 0px; margin:15px 0px;}

/*div#processDetailContainter .colrow {min-height: 285px;}*/
.downloadPrint{background:#F4AA6C; color:#fff; margin-bottom:10px; display:inline-block;}



#processDetailContainter .stateOpen ul{height:auto;}
div#processDetailContainter .colrow:nth-child(3n+4){clear: both;}
#dashboardAlarmsId hr{border-top: 1px solid #AAAAAA;}



.lightBrown{background:#F4AA6C;}
.selected .lightBrown{background:#F4AA6C;}
div#customerSelect {margin-bottom: 20px;}
.tabNewDesign ul.tabs li.active {padding-left:0px;}
#customerNameOnFacilityPopupdata, #facilityNameCtrlAssProPopupText{text-transform: uppercase; width:100%; float:left; padding:10px 0px; font-weight:bold; font-size:18px;}



/**popUP assingUnassign start*****/
.assignUnassingPopupTop { width: 100%;height: 100%;float: left;position: fixed;left: 0px;top: 0px;z-index: 100;box-sizing: border-box;padding-left: 10%; padding-right: 10%; display: none;align-items: center;justify-content:center;}
.assignUnassingPopupTop.show{display:flex;}
.assignUnassingPopupMain {position: relative; background: #fff;max-width:405px; padding:20px;-webkit-border-radius:10px;moz-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;display: inline-block;}
.assignConfirmUnassingPopupMain {position: absolute; background: #fff;max-width:405px; padding:20px;-webkit-border-radius:10px;moz-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;display: inline-block;}
.assignUnassingPopupMainAlarm {position: relative; background: #fff;-webkit-border-radius:10px;moz-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;}
.assignUnassingPopupMain .buttonsub .buttonformbox{width:100%; height:45px;}
.assignUnassingPopupTop:before, .deleteCustomerPopupTop:before, .deleteFacilityPopupTop:before, .deleteProcessPopupTop:before, .userPermissionFacilityPopup:before, .topbox:before, .changePasswordPopup:before, .assignAllProcess:before, .controllerAssignProcessPopup:before, .resendUserInivtation:before, .topController:before, .rolechangeMessagePopup:before, .userInivtation:before, .deityUserInivtation:before, .userPermissionCustomer:before, .addAssingControllerPopup:before, .topboxfive:before, .topControllerTwo:before, .channelAlarmSetting:before, .topControllerThree:before, .topboxfour:before, .topboxthree:before, .topboxtwo:before, .auditLogProcessPopupMainBox:before, .detailAlarmPopupTop:before .graphPopoup:before  {content:'';left: 0px;top: 0px;z-index: -1;background: rgba(0,0,0,0.2);width: 100%;height: 100%;position: fixed;}
.assignUnassingPopupMain .closebtn {position: absolute;right:20px; top: 20px;font-size:21px; cursor:pointer; color:#ef001d;}
.assingPopupTitle {color:#337698; font-size:17px;}
.assingPopupsubTitleSerialNumber span {font-weight: bold;color:#337698;font-size: 20px;}

/**popUP assingUnassign start*****/

#controllerAssignmentProcessPopupPage .colrow.activeopc {opacity: 0.6;pointer-events:none;}
#controllerAssignmentProcessPopupPage .colrow.active{opacity:1;pointer-events: inherit}
.bgcolorgreen{color: #F4AA6C;}

.controllerDropDown{width: 50%; margin-bottom: 20px;}


.addessTwoLinebox{border-bottom:0px; height:45px;}
.addessTwoLinebox .addressbox{display: -webkit-box; line-height: 1.4; -webkit-line-clamp:2;-webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: initial;}
.veriFiedAcc {width:auto;background:#F4AA6C;float:left;color:#fff;padding:4px 15px;margin-left:35px; display: inline-block;border-radius:5px;font-size: 14px;margin-top:12px;}


.positionAblIcon {position: absolute;right:-130px;top:3px;}
.positionAblIcon a{margin-right:5px;}
.positionAblIcon span{cursor: pointer;}
#userProfileSaveButtonId, #userCustomerSaveButtonId{display: inline-block;}
.UserDetailCustVisible h5 #userCustomerSaveButtonId .UserCancelLink {font-size: 20px; margin-left: 35px; cursor: pointer; color: #F4AA6C; text-decoration: underline; font-weight: normal;}


.boxbodypart .padding-left35{padding-left:35px;}
.min-height105 {min-height:106px;}
.customeradd1 a {color:#fff; text-decoration: none;}
span.margnLeftBtn{margin-left:30%;}
a .tooltip-postion{display: none; }
a:hover .tooltip-postion{display: block; text-decoration: none;}
.tooltip-postion{position: absolute; top:40px; color: black; }

.resentInvite {margin-top:5px;display:inline-block;background:#F4AA6C; border: 0px; color:#fff; text-decoration: none !important; text-transform:uppercase;padding:4px 15px 4px 32px;-webkit-border-radius:28px;-moz-border-radius:28px;-khtml-border-radius:28px;border-radius:28px;  cursor: pointer; min-width:250px; text-align: center;}
.btnrow{margin-top: 5px; text-align: center;}



.customer-database-distributorPopUp {position: absolute;left: 0px;top: 0px;display: flex;align-items: center;width: 100%;}

.selectWithAddNewCustomer{display:inline-block; margin-right:30px;}
.ButtonTab{color:#F4AA6C; float: none; display:inline-block; padding: 5px 30px; margin-bottom:10px; font-weight:normal; border:1px solid #F4AA6C !important; text-transform:uppercase; font-size:18px; -webkit-border-radius:21px;-moz-border-radius:21px;-khtml-border-radius:21px;border-radius:21px;}
a.ButtonTab{color:#F4AA6C !important; text-decoration: none !important;}
.logoutButton{margin-bottom: 10px; display: inline-block; text-transform: uppercase; background: #F4AA6C; color: #fff; padding: 8px 45px;
    -webkit-border-radius: 40px; -moz-border-radius: 40px; -khtml-border-radius: 40px; border-radius: 40px; border: 0px; cursor: pointer;
    margin-left:0px; font-size: 18px; }
.logoutButton a {color:#fff;}

/***diety dashboard ***/
.starHide.dashbalarrow ul li a:before{display: none;}
.margin10px{margin-top:8px;}
.margin18px{margin-top:18px;}
.queryButton{display:inline-block; font-size: 18px; background:#F4AA6C; color:#fff; text-decoration: none !important; text-transform:uppercase;padding:8px 45px;-webkit-border-radius:28px;-moz-border-radius:28px;-khtml-border-radius:28px;border-radius:28px;  cursor: pointer; min-width:200px; text-align: center;}


div.queryBtnBox {display:inline-block;margin-left:10px;margin-top:30px;}
.dietyDashboardContent{margin-top:20px;}
.dietyDashboardContent table{width:100%;}
.dietyDashboardContent table tr, .dietyDashboardContent table td{color:#337698; font-size: 16px; vertical-align: top; text-align: left;}
.dashboardTableTitle {font-size:22px;font-weight: normal;color:#337698;}
.dietyDashboardContent table td{border-bottom:1px solid #ccc;}
.dietyDashboardContent table td ul {margin:0px; list-style: none; padding:0px;}
.arrowAfter{position: relative;}
.arrowAfter:after {content:'';width:13px;height:13px;border-bottom:3px solid #337698;border-left:3px solid #337698;background:transparent;display: inline-block;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-khtml-transform:rotate(-45deg);transform:rotate(-45deg); margin-left:12px;vertical-align: 2px;cursor: pointer;}
.dietyDashboardHeader th, .dietyDashboardBody td{width:20%; padding:10px;}
.dietyDashboardHeaderlog th, .dietyDashboardBodylog td{padding:9px;}
.dietyDashboardBody ul, .dietyDashboardBody div, .dietyDashboardBody td, .dietyDashboardHeader th{ /*word-break:break-all;*/}
.dietyDashboardContent table{max-width:100%;}
.dashboardDeity ul.tabs li{border:0px !important; padding-left:0px; color:#337698; font-size:28px;}
.dashboardDeity ul.tabs li.active {font-weight:bold;color:#F4AA6C;vertical-align:middle;font-size: 28px;border-bottom:5px solid #F4AA6C !important;padding: 0px 0px 34px 0px !important;display: inline-block;border-radius: 0px;margin-right:20px;line-height: normal;}
.inputboxinner{width: 100%; float:left; background:#fff; border:1px solid #ccc; width: 100%; position: relative; padding-left: 150px;}
.inputboxinner input{border:0px; height:auto; width:100%; font-size: 20px; padding:15px 30px; color: #0E3B5A; }
.inputboxinner label{color:#0E3B5A; font-weight: bold; font-size:20px; margin-right: 30px; position: absolute; left:10px; top:15px;}
.result h4{color:#337698; font-weight: bold; font-size:24px; margin:15px 0px; text-transform: capitalize;}
.dashboardDeity .blueColorFuillwith ul, .dashboardDeity .courthousesystem ul li{list-style:none; float: left; width: 100%; padding:0px; margin: 0px}
.blueColorFuillwith ul li{float: left; color:#0E3B5A; text-overflow: ellipsis;  white-space: nowrap; overflow: hidden; padding-right:10px; margin-bottom:3px;}
.blueColorFuillwith ul li .iconn{margin-right: 10px;}
.borderNone{border:0px !Important;}
#dietyDashboardControllAdminContainter .mainRowbox{margin:0px;}
.result h4{padding-bottom:0px; margin-bottom:0px;}


/**/
.dietyDashboardHeaderErrorLog, .dietyDashboardBodyErrorLog{width:16.5%;}
.border-buttonbox{border: 1px solid #F4AA6C;color: #F4AA6C; margin-top: 3px; border-radius:13px;text-align: center;min-width: 104px;line-height: 20px; font-size: 18px;}
.dietyDashboardHeaderErrorLog th , .dietyDashboardHeaderErrorLog td{padding:10px 15px 10px 0px;}
.dietyDashboardHeaderErrorLog .queryButton{line-height: 15px;}

.dietyDashboardHeaderemailLog th, .dietyDashboardHeaderemailLog td{width:auto; padding:0px 10px;}

.dashboardDeity .tab_container{overflow:visible;}
.dashboardDeity .dashboardTableTitle{font-size:24px; font-weight: bold; text-transform: capitalize;}
.dietyDashboardContent table.dietyDashboardHeaderemailLog td{font-size:14px;}
.dietyDashboardHeaderemailLog th, .dietyDashboardHeaderemailLog td{white-space: normal; word-break: break-all;}
.dashboardDeity .dietyDashboardHeaderemailLog .dashboardTableTitle {word-break: normal;}

/*
.contInvSPBoxHeight .boxbodypart.deityHeight{min-height:185px; height: auto;}
*/
.text-alignment{text-align: center;}
.iconremove:before{display: none;}
div#resultOnDeityDashboard {margin-bottom: 20px;}
.errorLogTitle{color: #337698; font-weight: bold; text-decoration: none; font-size: 24px;}
.serachButtonBox{margin-top: 6px; margin-left: 30px;}


.page-wrapper .page-content.overFlowVisible {overflow-x: visible;}
#noSerialNoMessage {color:red;font-weight:bold;}
.deityHeaderMessageBox {background: #de2934;color: #fff;position:fixed;left: 0px;top: 0px;width: 100%;padding:2px;text-align: center;z-index: 999;}
.bodyPaddingDietyOnly {padding-top:40px;}
.bodyPaddingDietyOnly .page-wrapper.toggled .sidebar-wrapper {  padding-top: 40px;}

.courthousesystem ul.emailPhone {margin-left: 30px; margin-top:8px;}

span.customer-header.orgBodyHeaderIcon {border: 1px solid #fff; border-radius: 50%; padding: 3px 7px; vertical-align: middle; margin-top: 1px; display: inline-block !important; font-weight: bold; }

.doubleLine_header_box{display: inline-block; line-height: 20px; font-weight: bold; font-size: 16px; width: 70%;padding-right: 10px;padding-left: 5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.doubleLine_header_box .subtitle{display: block; float: left; width: 100%; text-overflow: ellipsis; overflow: hidden; font-size: 12px !important;}
.Deity_controller_icon_header img{vertical-align: sub; margin-bottom: 4px;}
.userDatabaseMain{padding-left: 100px !important;}
.textContent ul li{font-size: 16px !important; color: #0E3B5A !important;}



.processDetailTime{margin-left:25px;}
span#processDetailTime {color: #337698;font-size: 21px;}
span#processDetailTimeText {color: #337698;font-size: 21px;}
.min-height65px{min-height:67px;}
#deityDistributorOrClientContainer span.customer-header.orgBodyHeaderIcon{margin-top:-16px;}
.invite_header_title{font-size: 38px; color: #0E3B5A;}
.invite_Paragh{font-size: 18px; color: #0E3B5A; display: inline !important;}
.accountAcitvationMargin{margin-bottom: 7px;}
.account_activation_header_title{font-size: 38px; color: #337698; font-weight: 600}
.account_activation_header_Paragraph{font-size: 18px; color: #0E3B5A;}
.dashboardDeity .controlTitlemain h2{    color: #0E3B5A; font-weight: bold; position: relative; font-size: 38px;}
.errorlogbodypart{font-size: 18px; color: #0E3B5A;}
.changelogbodypart{font-size: 18px; color: #0E3B5A;}
.logoutButton a{text-decoration: none;}

.addNewProcessTab{float: left; color: #337698; border-color:transparent !important; font-weight: bold; text-transform: none; font-size: 24px; margin-right: 30px; margin-top: 10px;}
.selectExistingProcessTab{color: #F4AA6C; float: none; cursor: pointer;  display: inline-block;  font-weight: normal;  border: 1px solid #F4AA6C !important; text-transform: uppercase; font-size: 18px;
    -webkit-border-radius: 21px;  -moz-border-radius: 21px; -khtml-border-radius: 21px; border-radius: 21px; padding: 3px 30px;  margin-left: 30px;}
.newUiFontsizseColor h2 {font-size: 38px;}
.newUiFontsizseColor .popconTitle p,.newUiFontsizseColor .emailLabel{font-size:24px; line-height: 30px !important; margin-bottom: 10px; color: #0E3B5A;}
.newUiFontsizseColor .addressInfor ul li span {font-size: 20px; color: #0E3B5A;}
.downloadButtonFontsize{font-size: 20px; padding-top: 4px;}
.positionAblIcon.fa a:nth-child(3) { margin-left: 7px;}
.downloadBtn{opacity:0.5;}
.controllerTimeoutSmallBox{width: 280px;}
.controllerTimeoutSmallBox input {max-width:100%;border: 0px;height: 39px;padding: 0px 10px;width: 100px;float: left;}
.hourTextMargin{ font-size: 17px; color: #0E3B5A; padding-left: 130px; font-weight: 600; padding-top: 46px}
.controllerCommumicationTimeoutContainerBox{ display: none; float: left;}
.controllerTimeoutEditbox{float: left; width: 100px; background: #fff; border: 2px solid #999; position: relative}
#controllerCommunicationTimeout-error{ position: absolute; color: red;  left: 0;  top: 38px;  width: 189px;}

#controllerDatabaseMainSpinner, #customerDatabaseMainSpinner, #mainSpinner {
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 9999;
    background: #fff;
    width:calc(100% - 275px);;
    height: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/**change password  popup**/
span.changePassword { cursor: pointer;
    color: #337698;
    font-weight: bold;
    font-size: 18px;
    text-decoration: underline;
    display: inline-block;
    margin-bottom: 15px;
}
span#closepopup {
    text-decoration: none;
}
.changePasswordMessage {
    text-align: center;
    font-size: 30px;
    color: #F4AA6C;
    text-transform: capitalize;
}

#changePasswordMessage{display: none;}
.signupMainForgetPassword{display: flex; align-items: center; justify-content: center}

/**forget password**/

.forgetPassword, .backToLogin {text-align: center;font-size: 19px;margin-top: 12px;float: left;width: 100%;cursor: pointer;}
#forgetPassword{display:none;}

.loginTitle h2, .forgetTitle h5 {margin-bottom: 18px; color: #0E3B5A;  font-size: 38px;  font-weight: 600;  text-transform: capitalize; }
#resetPasswordMessage .forgetmessage h5 {margin-bottom:18px; font-size: 30px;  color: #E57A21;}
#resetPasswordMessage{display:none;}
.formbox span.emailMessage{display: inline-block; margin-bottom:0px; color:#000;}
.backToLogin span, .forgetPassword span {text-decoration:underline; font-size: 20px; color: #337698;}
#forgetPassword .formbox.login{max-width: 680px;}
.forgetPassword span:hover{color: #0E3B5A;}
.backToLogin span:hover{color: #0E3B5A;}
#loginForm .formbox.login{max-width: 530px;}
#resetPasswordMessage .formbox.login{max-width: 680px;}




/****Term & Condition****/
.termConditionRow {font-family: arial, sans-serif; width:100%;float: left;margin-top:25px;font-size: 18px; color:#0E3B5A;}
.termConditionBox{height:450px; float: left; margin: 0px; padding: 20px; overflow: auto}
.termConditionBox p{font-family: arial, sans-serif; width:100%;float: left; margin-top:8px; margin-bottom: 6px; font-size: 18px; color:#0E3B5A;}
.termConditionBox ul{margin-bottom:20px; float: left; width:100%;}
.termConditionBox li{font-family: arial, sans-serif; width:100%;float: left; margin-top:8px; margin-bottom:2px; font-size: 18px; color:#0E3B5A;}
.termConditionBox h3 {font-weight:bold; font-size:24px;margin-bottom:0px;padding:0px; color: #337698; margin-top:12px; float:left; width:100%; margin-bottom: 8px; }
.text_underline{border-bottom: 2px solid #337698;}
.showAlarmSetting{cursor: pointer;}
#customerDatabasebodyContainterDistributor .boxbodypart{height: 155px;}
#termConditionText .contentMiddle{ text-align: center; font-size:38px;}
#termConditionText .copyright{color: #337698; font-size: 20px; font-weight: 500;}


.forpassBox{width: 100%; float: left; text-align: center;}
.forpassBox .forgetPassword, .forpassBox .backToLogin{width: auto; display: inline-block; float: none; margin: 0px auto;}
.customerDeletePopupText{font-size: 18px; margin-top: 15px; color: #0E3B5A;}
#deleteProcessPopupTop, #deleteCustomerPopupTop, #deleteFacilityPopupTop, #deleteUsersPopupTop, #resendUserInivtation, #deleteInvitedUsersPopupTop, #changeLogoPopupbox, #detailAlarmPopupTop, #resendInvitePopup { position: fixed;}
.processAddProcessButtons{background: #F4AA6C; width: 33%; text-align: center; height: 190px; -webkit-border-radius: 11px;-moz-border-radius: 11px; -khtml-border-radius: 11px;  border-radius: 11px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;}
.processAddProcessButtons span { font-size: 35px; color: #fff; font-weight: bold; -webkit-border-radius: 50%; -moz-border-radius: 50%;
    -khtml-border-radius: 50%; border-radius: 50%; border: 1px solid #fff; width: 40px; height: 40px; line-height: 38px; display: inline-block;}
#deleteError, #processDeleteError, #ctrlDeleteError{color:#ef001d; font-weight: bold; display: block; margin-bottom: 10px;}
#resendUserInivtation .buttonsub .buttonformbox{color: #fff;}
.changeLogQueryBtnBox{display: inline-block; margin-left: 20px;}
#customerEditIconID, #starsttsId, .channelCardCheckboxIcon{cursor: pointer;}
#selCustomerPopupContainter .colrow, #selFacilityPopupContainter .colrow{cursor: pointer;}
#customerDatabaseBox .resendUserInivtation{width: 70%; left: 10%;}
.emailTextLowercase{text-transform: lowercase;}
#change_log_error_message{float: left; text-align: left; margin-left: 20%; color: red; font-size: 21px;}
.dataRangelable{font-size: 20px; margin-right: 25px; color: #337698; text-transform: none;}
.selectDateRangeHint{color: #337698;}
.dataAuditLogDataRangeContainer{text-align: center; padding-bottom: 15px;}
.dataAuditLogExtraPaddingPopup{padding: 30px;  width: 100%;  float: left;}
.dataAuditLogCenterBoxPopUp{max-width: 70%;}
.dataLogDateRangeEditBox{width: 240px; font-size: 18px; color: #0E3B5A; text-align: center;}
.dateRangeCalender{width: 30px; margin-bottom: 6px;}
#wise{width: 100%;}
.WiseIdPopupClass{display: none;position: fixed;z-index: 400;padding-top: 300px;left: 500px;top: 0;width: 120%;height: 200%;overflow: auto;background-color: #a7cce5;background-color: rgba(0,0,0,0);}
.WiseIdPopupContent {background-color: #fefefe;margin: auto;padding: 20px;border: 1px solid #888;width: 50%;}
.closeWiseIdPopup {color: #F4AA65;font-size: 28px;font-weight: bold;float: left;}
.closeWiseIdPopup:hover, .closeWiseIdPopup:focus {color: #F4AA65;text-decoration: none;cursor: pointer;}
.WiseIdCancelButton{margin-bottom: 10px;display: inline-block;text-transform: uppercase;background: #F4AA6C;color: #fff;padding: 8px 45px;width: 100%;border: 0px;cursor: pointer;font-size: 16px;text-align-all: left;-webkit-border-radius:21px;-moz-border-radius:21px;-khtml-border-radius:21px;border-radius:21px;}
@media (min-width: 300px){
    .WiseIdPopupClass {width: 100%;left: 50px;}
}
@media (min-width: 992px) {

    .WiseIdPopupClass {width: 900px;left: 200px;}
}
.compareclass{color: #F4AA6C;padding-left: 0px; margin-left:1250px; margin-bottom: 10px; border: none; background-color: white; cursor: pointer; float:right;  -webkit-border-radius:10px;-moz-border-radius:10px;-khtml-border-radius:10px;border-radius:10px; float: right;}
#plot {display: inline-block;font-size: 16px;cursor: pointer;text-align: center;text-decoration: none;outline: none;color: #fff;background-color: #4CAF50;border: none;border-radius: 15px;}
option.green {background-color: #337698;}  option.red {background-color: red;}  option.mediumvioletred {background-color: mediumvioletred;}  option.black {background-color: black; }  option.yellow {background-color: yellow;}  option.orange {background-color: orange;}  option.cornflowerblue {background-color: cornflowerblue; }  option.blue {background-color: blue;}  option.lightgreen {background-color: lightgreen; }  option.lightcoral {background-color: lightcoral;}
.multiselect {width: 100%;}
.selectBox {margin-left: 10px;position: relative;}
.selectBox select {font-weight: bold;width:100%;}
#selectid{margin: 12px;color: #337698;border: none;}
#deleteall{margin: 12px;color: #337698;border: none;}
#cboxes{display: none;color: #337698;font-weight: bold;font-size: 16px;padding-left: 0px;float: left;margin-left:260px;margin-top: 8px;overflow-y: scroll;height: 100px;}
#toggleid, #toggleid1, #toggleid2, #toggleid3, #toggleid4, #toggleidleft, #toggleidleft1, #toggleidleft2, #toggleidleft3, #toggleidleft4 {background-color: #FFFFFF; color: black; text-align: center; display: inline; cursor: pointer;font-size: 14px;border-radius: 100%; justify-items: right;border: 2px solid #337698;}

.detailAlarmTableTh{
    border:1px solid black;
}
.detailAlarmTableFacilityTd {
    border:1px solid black;
    min-width: 15rem;
}
.detailAlarmTableProcessyTd {
    border:1px solid black;
    min-width: 18rem;
}
.detailAlarmTableCustomerTd {
    border:1px solid black;
    min-width: 12rem;
}

#star{color: #ffc107}

/* General styling for input and button alignment */
.token-expiration-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Styling for the input */
.token-expiration-input {
    width: 60%;
    flex: 1;
    min-width: 150px;
    border: 2px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
}

/* Styling for the button to match UserDetailPageSaveButton */
.token-expiration-button {
    margin-bottom: 10px;
    display: inline-block;
    text-transform: uppercase;
    background: #F4AA6C;
    color: #fff;
    padding: 8px 45px;
    border-radius: 40px;
    border: 0px;
    cursor: pointer;
    font-size: 18px;
    min-width: 150px; /* Ensures a minimum width for smaller screens */
}



/* Media query for smaller screens */
@media (max-width: 600px) {
    .token-expiration-input {
        width: 100%;
        margin-bottom: 10px;
    }

    .token-expiration-button {
        width: 100%;
        padding: 10px; /* Adjust padding for better look on mobile */
    }
}

/* Popup container */
.customPopupTop{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    width: 400px;
    text-align: center;
    font-family: Arial, sans-serif;
}

/* Header styling */
.popupHeader {
    font-size: 18px;
    font-weight: bold;
    color: #f52500; /* Orange header color */
    padding: 15px;
    border-bottom: 1px solid #eee;
}

/* Body styling */
.popupBody {
    padding: 20px;
    font-size: 14px;
    color: #555; /* Softer text color */
}

/* Footer with Close button */
.popupFooter {
    padding: 10px;
    border-top: 1px solid #eee;
}

.popupCloseButton {
    color: red;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
}

.popupCloseButton:hover {
    text-decoration: underline;
}

/* Close button styling (X icon) */
.popupCloseBtn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
}

.popupCloseBtn:hover {
    color: #F4AA6C;
}
.customCloseButton {
    background-color: #F4AA6C; /* Orange background */
    color: white;
    border: none;
    border-radius: 20px; /* Rounded edges */
    padding: 10px 20px; /* Button size */
    font-size: 14px; /* Font size */
    text-transform: uppercase;
    cursor: pointer;
    font-weight: bold;
    outline: none; /* Remove focus outline */
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

.customCloseButton:hover {
    background-color: #F4AA6C; /* Slightly darker orange on hover */
}

.customCloseButton:active {
    background-color: #ea9854; /* Even darker on click */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
}

.login-info p{color:#337698; font-size: 18px;}


.totp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(240, 244, 252, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.totp-box {
    background: #bfc2c6;
    padding: 30px;
    border-radius: 10px;
    width: 350px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.totp-box h2 {
    color: #003b63;
    margin-bottom: 10px;
}

.totp-box input {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    font-size: 16px;
}

.totp-box button {
    background-color: #f49c5c;
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

.totp-box a {
    display: block;
    margin-top: 10px;
    color: #003b63;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

#qr-code {
    margin: 15px 0;
    width: 150px;
    height: 150px;
}

.totp-hidden {
    display: none;
}

/*

.sliderTotp.roundTotp {
    position: absolute;
    cursor: pointer;
    top: -13px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 26px;
    transition: 0.4s;
}
*/
.big-checkbox {
    height: 20px;
    width: 20px;
    transform: scale(1.6); /* Makes the checkbox appear larger */
    margin-right: 8px; /* Optional spacing */
    cursor: pointer;
    margin-top: 10px;

}

.sliderTotp.roundTotp:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 36px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

.switchTotp input:checked + .sliderTotp.roundTotp {
    background-color: #ff9f4b;
}

.switchTotp input:checked + .sliderTotp.roundTotp:before {
    transform: translateX(24px);
}

/* Settings Page: Fix confirmation popup for mobile layout */
.settings-page .settings-popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    display: none; /* initially hidden */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.settings-page .settings-popup-wrapper.show {
    display: flex;
}

/* Popup Box */
.settings-page .assignUnassingPopupCenter {
    background-color: #fff;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
    word-break: break-word;
}

/*
.processnamelistbox {
    letter-spacing: 1px;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    font-size: 18px;
    border: 3px solid #F4AA6C;
    width: 100%;
    height: 36px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    -khtml-border-radius: 45px;
    border-radius: 45px;
    padding: 0px 16px;
    margin: 0px 0px;
    display: inline-block;
    position: relative;
    color: #fff;
    text-align: center;
    text-align-last: center;
}
*/

select.processnamelistbox option {
    background-color: white;
    color: #F4AA6C; /* Orange text for all dropdown items */
}

.select-assigned {
    background-color: #ffffff !important;
    color: #F4AA6C !important;
    /*border: 3px solid #F4AA6C !important;*/
}

.select-default {
    background-color: #F4AA6C !important;
    color: #ffffff !important;
    /*border: 3px solid #F4AA6C !important;*/
}

/* Remove this (it applies to all and breaks the color logic) */
.assingSelect::after {
    content: none;
}

/* For assigned process (white background, orange arrow) */
.assingSelect.select-assigned::after {
    content: '';
    position: absolute;
    right: 21px;
    bottom: 17px;
    width: 10px;
    height: 10px;
    border-left: 3px solid #F4AA6C;
    border-bottom: 3px solid #F4AA6C;
    transform: rotate(-45deg);
    display: block;
    z-index: 2;
    pointer-events: none;
}

/* For "Assign To Process" (orange background, white arrow) */
.assingSelect.select-default::after {
    content: '';
    position: absolute;
    right: 21px;
    bottom: 17px;
    width: 10px;
    height: 10px;
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform: rotate(-45deg);
    display: block;
    z-index: 22;
    pointer-events: none;
}



.assingSelect {
    position: relative;
}

@media screen and (max-width: 960px) {
    .dashbalarrow ul {
        display: block !important;
        padding: 0;
        margin: 0;
    }

    .dashbalarrow ul li {
        display: block;
        width: 100%;
    }

    .dashbalarrow ul li a {
        display: block;
        width: 100%;
        padding: 12px 16px;
        font-size: 18px;
        border-bottom: 1px solid #e0e0e0;
    }

    .dashbalarrow ul li a.active {
        background-color: #fff;
        border-left: 4px solid #F4AA6C;
        color: #F4AA6C;
    }
}

.hasAlarms {
    background: #DE2934 !important;
}

@media (max-width: 1024px) {
    .page-controller-assignments .page-wrapper.toggled .page-content {
        padding-left: 38px;
    }
}
@media (max-width: 1024px) {
    .page-user-database .page-wrapper .page-content > div {
        padding: 0px 10px !important;
    }
}

@media (max-width: 355px) {
    .page-user-database  .controllerContent .tab-links li.active a, .controllerContent .tab-links li.active a:hover {
        background: #178cf9;
        color: #fff;
        margin-bottom: 5px !important;
    }
}





@media (max-width: 1024px) {
    .page-process-detail {
        padding-left: 41px;
    }
}

@media (max-width: 1024px) {
    .page-user-database .fa-ellipsis-h:before {
        content: "\f141";
        padding-right: 20px !important;
    }
}
@media (max-width: 1024px) {
    .page-customer-detail .page-wrapper.toggled .page-content.customerDetail {
        padding-top: 14px !important;
    }
}
@media (max-width: 1024px) {
    .page-facility-detail .first-icon-img {
        width: 54px !important;
    }
}


@media (max-width: 1024px) {
    .icontitle ul li:nth-child(1) i {
        background: url(../images/fluent_card_customer.svg) center center no-repeat;
        background-size: 50px;
        width: 51px;
        height: 38px;
        display: inline-block;
        content: '';
    }

    .icontitle ul li:nth-child(2) i {
        background: url(../images/fluent_card_facility.svg) center center no-repeat;
        background-size: 50px;
        width: 51px;
        height: 38px;
        display: inline-block;
        content: '';
    }
}

@media (max-width: 768px) {
    .page-myaccount .page-wrapper.toggled .page-content{
        padding-top: 25px !important;
    }
}

@media (max-width: 768px) {
    .bodyPaddingDietyOnly .page-wrapper.toggled .page-content{
        padding-left: 45px !important;
    }
}

@media (max-width: 768px) {
    .process-detai .page-wrapper.toggled .page-content {
        padding-left: 45px !important;
    }
}

.controllerContent ul.tab-links {
    padding-left: 0px;
    padding-top: 34px;
    gitmargin-bottom: 25px;
}


@media (max-width: 768px) {
    .page-controller-assignments .assingCtrlToggdetail {
        padding: 0 10px;
    }

    .page-controller-assignments .selectAssingController {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .page-controller-assignments .bulkprocessWrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .page-controller-assignments .bulkprocessSelecbox {
        width: 100%;
        max-width: 100%;
        position: relative;
        overflow: hidden;
    }

    .page-controller-assignments .bulkprocessSelecbox select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: 36px;
        font-size: 16px;
        padding: 6px 40px 6px 10px; /* space for arrow */
        appearance: none;
    }

    .page-controller-assignments .bulkprocessSelecbox::after {
        content: '';
        width: 10px;
        height: 10px;
        border-left: 2px solid #404041;
        border-bottom: 2px solid #404041;
        position: absolute;
        transform: rotate(-45deg);
        right: 16px;
        top: 14px;
        pointer-events: none;
    }

    .page-controller-assignments #allprocessOpenPopup {
        width: 100%;
        text-align: center;
        padding: 6px;
        background-color: #F4AA6C;
        color: white;
        border-radius: 20px;
        font-weight: bold;
        display: block;
    }
    .page-controller-assignments #allprocessOpenPopup.disable {
        opacity: 0.6;
        pointer-events: none;
    }
}

.page-controller-assignments .selectAssingController{background:#ffffff00; }
.page-controller-assignments .selectAssingController select{background:#ffffff; }
.page-controller-assignments .unAssingIo {padding-top: 0px; }

.page-controller-assignments .fullWidth.selectAssingController .bulkprocessSelecbox::after {
    border-left: 2px solid rgba(64, 64, 65, 0);
    border-bottom: 2px solid rgba(64, 64, 65, 0);
}



@media screen and (max-width: 960px) {
    .dashboardDeity .dashbalarrow ul {
        display: block !important;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .dashboardDeity .dashbalarrow ul li {
        display: block;
        width: 100%;
        padding: 28px 16px;
        font-size: 18px;
        border-bottom: 1px solid #e0e0e0;
        text-align: left;
        background-color: #f9f9f9;
        cursor: pointer;
    }

    .dashboardDeity .dashbalarrow ul li:hover {
        background-color: #f1f1f1;
    }

    .dashboardDeity .dashbalarrow ul li.active {
        background-color: #fff;
        border-left: 4px solid #F4AA6C;
        color: #F4AA6C;
        font-weight: bold;
    }

    /* 👇 Stack search button and input vertically */
    .dashboardDeity .searchBoxController {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        margin-top: 16px;
    }

    .dashboardDeity .searchBoxController .searchbutton {
        order: 2;
        width: 100%;
        height: 40px;
        font-size: 18px;
    }

    .dashboardDeity .searchBoxController .inputbox {
        order: 1;
        width: 100%;
    }

    .dashboardDeity .searchBoxController input {
        width: 100%;
        height: 40px;
        padding: 8px;
        box-sizing: border-box;
        font-size: 16px;
    }
    .dashboardDeity .tab_container{
        margin-top: 110px;
    }
    .dashboardDeity .dashbalarrow {
        margin-bottom: 20px; /* Adds space after tabs */
    }
}

@media screen and (max-width: 768px) {

    .searchBoxController {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        margin-bottom: 15px;
    }

    .searchBoxController .searchbutton {
        width: 100%;
        height: 40px;
        font-size: 18px;
    }

    .searchBoxController .inputbox {
        width: 100%;
    }

    .searchBoxController input {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
    }

    .tabs ul.tab-links {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    .tabs ul.tab-links li {
        width: 100%;
        text-align: center;
        margin-bottom: -13px;
        margin-top: 16px;
    }

    .controllerIconBox {
        width: 100%;
        text-align: center;
        padding: 0px;
        margin-top: 10px;
    }

    .assignbutton.exportcontrollers {
        display: block;
        width: 100%;
        margin: 10px 0;
    }

    .controlTitlemain h2 {
        font-size: 20px;
        flex-wrap: wrap;
    }

    .container-fluid {
        padding: 10px;
    }
    .comparison-canvas {
        width: 100% !important;
        max-width: 1000px;
        height: 300px; /* or whatever looks good */
    }
}

canvas {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/*canvas#zoomChart {
    max-width: 1000px;
    max-height: 500px;
    width: 100%;
    height: 400px;
    display: block;
    margin: 30px auto;
}*/

canvas + .chartjs-legend li {
    cursor: pointer;
}


#chartContainer {
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
    position: relative;
}

#chartWrapper {
    height: 550px;
    width: 100%;
    position: relative;
}

/* Chart itself adapts to wrapper size */
#zoomChart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 300px;
}

#timeRangeBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f7f9fc;
    border-radius: 6px;
    margin-bottom: 10px;
    flex-wrap: nowrap; /* This forces everything on one line */
    gap: 20px; /* Optional: space between elements */
}

@media (max-width: 600px) {
    #timeRangeBar {
        flex-direction: column; /* 🔹 stack elements vertically */
        align-items: stretch;
    }

    .time-range-controls {
        justify-content: center;
        width: 100%;
    }

    .download-btn {
        align-self: center;
        width: 100%;
        margin-top: 6px;
    }

    .time-range-label {
        text-align: center;
        width: 100%;
    }
}


.time-range-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1; /* Allow it to take available space */
}


.time-range-label {
    font-weight: bold;
    white-space: nowrap;
}

.time-range-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    justify-content: center;
}

#timeRangeDropdown {
    padding: 6px 12px;
    font-weight: bold;
    color: white;
    background-color: #2196f3;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 140px;
}

#timeRangeDisplay {
    min-width: 200px;
    text-align: center;
    font-weight: 500;
}

.download-btn {
    background-color: #f4aa6c;
    color: white;
    padding: 8px 16px;
    font-weight: bold;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
}

#timeRangeBar,
#chartWrapper {
    display: none;
}

#otherChartsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.comparison-chart-wrapper {
    width: 100%;
    max-width: 1000px;
    height: 400px;
    margin: 0 auto;
    position: relative;
}

.comparison-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.userPermissionFacilityPopup {
    position: fixed !important;       /* stick to viewport */
    top: 50% !important;              /* center vertically */
    left: 50% !important;             /* center horizontally */
    transform: translate(-50%, -50%) !important; /* shift to perfect center */
    z-index: 10000 !important;        /* make sure it's above everything */
    margin: 0 !important;             /* remove any top margin pushing it */
}