@font-face{
    font-family:Calibri;
    src:url(../fonts/Calibri.eot);
    src:url(../fonts/Calibri.eot?#iefix) format("embedded-opentype"),url(../fonts/Calibri.woff) format("woff"),url(../fonts/Calibri.ttf) format("truetype"),url(../fonts/Calibri.svg#svgFontName) format("svg")
}
body,html{
    margin:0;
    background:#21242d;
    overflow:auto;
    -moz-user-select:text;
    -webkit-user-select:text;
    -ms-user-select:text;
    -o-user-select:text;
    font-family:Calibri,Fallback,open-sans
}
button#safe_network_verify_btn, button#safe_network_save_btn {
    height: 35px;
    max-width: 350px;
    border-radius: 5px;
}
div.safe-network-group-status {
    background: #e2e2f2 !important;
    border: 0px !important;
    margin-bottom: 30px !important;
}
.unit-info{
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -o-user-select:none;
    cursor:default
}
.leaflet-bottom.leaflet-right{
    display:none
}
::-webkit-scrollbar{
    width:0;
}
::-webkit-scrollbar-track{
    border-radius:0;
}
::-webkit-scrollbar-thumb{
    background-color:#393937;
    border:0 solid hsla(0,0%,83.9%,.7);
    border-radius:0
}
::-webkit-scrollbar-corner {
    background: transparent !important;
}
#map input{
    width:auto
}
a.leaflet-draw-draw-circlemarker{
    display:none;
}
a.leaflet-draw-show-linklines{
    background-position-x:2px;
    background-position-y:2px
}
a.leaflet-draw-show-linklines.show{
    background-color:#597ba2;
    border:1px solid #fff;
    box-sizing:border-box;
    color:#fff;
    background-position:1px 1px
}
div#sensorRTUAlert{
    display:none;
    position:absolute;
    top:30%;
    left:33%;
    height:10%;
    width:33%;
    z-index:9999999;
    background:#fff;
    border-radius:6px;
    border:2px solid red;
    box-shadow:2px 1px 9px #443e3e;
    padding:8px 8px 45px;
    min-height:160px;
    max-height:200px
}
#sensorRTUAlert .message{
    text-align:center;
    margin-top:10px;
    margin-bottom:20px;
    font-size:15px
}
#sensorRTUAlert .button{
    width:100px;
    float:right;
    margin-top:0;
    margin-right:5px;
    background:#921515;
    border-radius:3px;
    height:22px;
    font-weight:700;
    cursor:pointer
}

#toast{
    display:none;
    position:fixed;
    bottom:45px;
    z-index:99999999;
    padding:10px 25px;
    border-radius:22px;
    font-size:small;
    margin:0 auto;
    background: black;
    color: white;
}
#toast.showing{
    display:block;
}
#toast.message{
    background:#000;
    color:#fff
}
#toast.alert{
    background:red;
    color:#000
}
p.clear{
    clear:both
}
.tooltip_templates{
    display:none
}
div#log-file-tree{
    width:60%;
    float:left;
    height:100%
}
div#log-file-tree ul{
    overflow-y:auto;
    height:100%
}
@keyframes blinkerCircle{
    50%{
        opacity:.4
    }
}
@keyframes blinkerIcon{
    50%{
        opacity:.6
    }
}
@keyframes blinker{
    50%{
        opacity:0
    }
}
.sir-logo{
    width:95%;
    height:50px;
    margin:8px auto 0 3px
}
img.sir-logo-onair2{
    position:relative;
    top:-62px;
    margin-bottom:-56px;
    animation:blinker 1.25s linear infinite
}
img.sir-logo-onair1,img.sir-logo-onair2{
    width:95%;
    margin:12px auto 0;
    height:50px;
    display:none
}
.onair img.sir-logo{
    display:none
}
.onair img.sir-logo-onair1,.onair img.sir-logo-onair2{
    display:block
}
button#audioFile{
    border-radius:10px;
    background:rgba(89,123,162,.95);
    font-size:13px;
    padding:5px 13px;
    font-family:calibri;
    color:#fff;
    border:0;
    cursor:pointer
}
div#msg-compose-area {
    padding: 25px 12px;
    box-sizing: border-box;
    width: 99%;
    margin-top: 35px;
    border-top: 1px solid var(--border-medium-grey);
    padding-top: 35px;
}

#message-center .form-group {
    margin-bottom: 15px;
}

#message-center .form-group.short-message,
#message-center .form-group.short-desc,
#message-center .form-group.eas-desc,
#message-center .form-group.ipaws-instructions,
#message-center .form-group.sms-message,
#message-center .form-group.alert-phone,
.form-group.push-msg {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Right-aligned control row beneath a textbox — holds remaining counter
   and inline action icons (TTS, copy-to-empty, etc.) */
#message-center .message-field-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    min-height: 18px;
}
#message-center .message-field-controls > p.remaining {
    margin: 0;
    padding: 0;
    font-size: 11px;
    line-height: 1;
    color: #6c757d;
    text-align: right;
    flex: 0 0 auto;
}
#message-center .message-field-controls:empty {
    display: none;
}

.form-group.push-title {
    padding-bottom: 0px;
    margin-bottom: 5px;
}
.form-group.alert-title-area {
    padding-right: 20px;
}
a,div,p,span{
    font-family:Calibri
}
a{
    cursor:pointer;
}
.console #map{
    visibility:hidden;
}
body.console.splitscreen #login .wrapper{
    min-height:210px;
    height:210px;
    margin:15% auto 0;
}
.console #coordinates,.console .third-party-logo,.console nav#filters{
    display:none
}
.console .stop-active-script-big.all{
    top:73px;
}
.console .map-bottom-bar{
    left:auto;
    right:335px;
    bottom:14px
}
.console.splitscreen .confirm-alarm-dialog,.console.splitscreen .confirm-beacon-dialog,.console.splitscreen .confirm-script-dialog{
    left:40%
}
.scriptLineBreakdown{
    background:#f5f5f5;
    margin-top:-7px;
    margin-bottom:10px;
    border:1px solid #ddd;
    box-sizing:content-box;
    padding:10px 10px 35px
}
#map{
    height:100%;
    margin-left:0;
    margin-top:0;
    background:rgba(21,36,53,.95);
    z-index:0;
}

.ui-select{
    background:#fff;
    position:absolute;
    top:10px;
    right:10px;
    z-index:100;
    padding:10px;
    border-radius:3px
}
label{
    text-shadow:none;
    font-family:Calibri;
    font-size:15px
}
.hidden{
    display:none !important
}
.selected-recipients,.selected-units{
    font-family:Calibri;
    font-size:12px;
    text-align:left;
    overflow-x:hidden;
    overflow-y:auto;
    margin-top:10px;
    padding:0 10px 15px;
    box-sizing:border-box;
    max-height:415px
}
.console .selected-units,.selected-recipients,body.splitscreen .selected-units{
    height:calc(100% - 133px);
    padding-bottom:6px;
    max-height:unset;
    border:1px solid #9c9999;
    width:92%;
    padding-top:10px;
    margin:10px auto;
    border-radius:3px;
    font-size:15px;
    line-height:21px
}
.selected-recipients div,.selected-units div{
    border:1px solid #777474;
    margin-bottom:5px;
    border-radius:4px;
    background:#2f2f2f;
    box-sizing:border-box;
    max-width:252px;
    height:27px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:13px;
    line-height:19px;
    padding:4px 8px 8px
}

.map-circle-bounce.leaflet-interactive,path.map-circle-bounce.leaflet-interactive{
    animation:blinkerCircle 1.25s linear infinite
}
.selected-recipients div.activated,.selected-units div.activated{
    background: #1da06d !important;
    color: white;
}
#remove-link{
    background:#a21d1d;
    padding:0 0 3px;
    width:10px;
    height:10px;
    overflow:hidden;
    top:-2px;
    margin-right:6px;
    border-radius:10px;
    text-align:center;
    cursor:pointer
}
#remove-link,a.remove-link{
    font-weight:900;
    position:relative
}
a.remove-link{
    color:#fff;
    text-decoration:none;
    top:-.5px;
    left:-.5px
}
#remove-link:hover{
    color:#fff;
    background:#000
}
#remove-link:hover a{
    color:#fff
}
.mobile .right-bar{
    top:35px
}
.right-bar{
    position:absolute;
    top:15px;
    width:300px;
    padding:25px 0;
    max-height: calc(100% - 130px);
    right:9px;
    background:#000;
    border-radius:20px;
    overflow-y: scroll;
    overflow-x: hidden;
    /* Reserve an equal scrollbar gutter on both edges so the always-on 18px
       vertical scrollbar can't push the button column off-center. */
    scrollbar-gutter: stable both-edges;
}
.right-bar::-webkit-scrollbar{
    display:block;
    width: 18px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.right-bar::-webkit-scrollbar-track{
    background: #000000;
    width: 38px !important;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.right-bar::-webkit-scrollbar-thumb{
    background:#af0d10;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 3px solid #000000;
    width: 20px !important;
}

/* top horizontal scrollbar in ag grid */
.ag-header-viewport::-webkit-scrollbar{
    display:block;
    height: 8px;
}

.ag-header-viewport::-webkit-scrollbar-thumb{
    background:#3e3e3e;
}

/* hides the bottom horizontal scrollbar in ag grid*/
.ag-center-cols-viewport::-webkit-scrollbar{
    height: 0px;
}

.hot-select-bar{
    position:absolute;
    top:15px;
    background:rgba(64,86,111,.95);
    text-align:center;
    color:#fff;
    padding:10px;
    height:calc(100% - 53px);
    overflow-y:hidden;
    overflow-x:hidden
}
.quick-select{
    width:95%;
    background:#2f363e;
    padding:10px 6px;
    border:1px solid #989898;
    box-sizing:border-box;
    margin:0 auto 5px
}
.quick-select a{
    font-family:Calibri;
    font-size:14px;
    text-decoration:none;
    color:#fff;
    font-weight:700
}

.quick-select:hover a,.quick-select a:hover{
    color:#fff
}
.buttons .script-button.fa,.buttons .script-button.fab,.buttons .script-button.far,.buttons .script-button.fas{
    display:grid;
}
.buttons .script-button{
    font-weight:400;
    font-family:calibri;
}
.fab:before{
    font-family:Font Awesome\ 5 Brands
}
.jstree .fa:before{
    color:#444141;
    font-weight:100
}
.buttons .script-button.fa:before,.buttons .script-button.fab:before,.buttons .script-button.far:before,.buttons .script-button.fas:before{
    font-size:20px;
    margin-top:10px;
    font-weight:900
}
#threats{
    display:none
}
.dashboard-active-alert-box{
    position:absolute;
    top:15px;
    right:318px;
    background:rgb(234 234 234);
    min-width:301px;
    max-width:400px;
    text-align:center;
    min-height:70px;
    color:#111;
    padding:15px;
    display:none;
    border:2px solid #111;
    box-shadow:0 4px 8px rgba(0,0,0,.2);
    z-index:999
}
.dashboard-active-alert-box .active-alert-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
    text-align:center;
    color:#fff
}
.dashboard-active-alert-box .alert-item{
    font-size:14px;
    margin-bottom:10px;
    padding:10px;
    background:rgb(255 255 255);
    text-align:left
}
.dashboard-active-alert-box .alert-item b{
    color:#af0e0e;
    display:inline;
    margin:2px 0
}
.dashboard-active-alert-box .acknowledge-btn,.dashboard-active-alert-box .view-sent-btn{
    background-color:#af0e0e;
    color:#fff;
    border:none;
    padding:10px 20px;
    cursor:pointer;
    font-size:14px;
    margin-top:10px
}
.dashboard-active-alert-box .acknowledge-btn:hover{
    background-color:#e6b800
}
.selection-box {
    position: absolute;
    top: 0;
    left: 119px;
    min-width:250px;
    text-align:center;
    margin-top:37px;
    min-height:70px;
    color:#fff;
    padding:10px;
    display:none;
    box-shadow: 0 0 0 2px rgba(0,0,0,.1);
    z-index:999;
    border-radius: 18px;
    background: #ffffff;
}

.selection-box .title, .title {
    border-radius: 14px !important;
    background: #FFF !important;
    margin-bottom: 6px !important;
    color: #000 !important;
}
.selection-box .clear-all, .selection-box .clear-all-recipients {
    border-radius: 11px !important;
}

.splitscreen .selection-box.none{
    display:block;
}

.splitscreen .selection-box{
    position:absolute;
    top:15px;
    left:auto;
    background:rgba(64,86,111,.95);
    text-align:center;
    color:#fff;
    padding:10px;
    height:calc(100% - 45px);
    overflow-y:hidden;
    overflow-x:hidden;
    border:0;
    left:unset;
    min-width:unset;
    max-height:unset
}

.hot-select-bar .title,.splitscreen .selection-box .title{
    margin-top:-5px;
    margin-left:-5px;
    margin-bottom:20px;
    border:0;
    width:calc(100% + 10px)
}

.splitscreen .hot-select-bar .title,.splitscreen .selection-box .title{
    height:58px;
    padding-top:17px;
    box-sizing:border-box;
    background:#3d4b5b;
    overflow:hidden;
    font-size:1.1vw;
    line-height:1.5vw
}

.clear-all-recipients.none,.clear-all.none{
    background:#2f363e;
    border:1px solid #615e5e;
    color:#ddd
}
.clear-all-recipients.none a,.clear-all.none a{
    color:#ddd;
    font-style:italic
}
.clear-all-recipients.none:hover,.clear-all.none:hover{
    background:#2f363e;
    border:1px solid #615e5e;
    color:#ddd;
    cursor:auto;
}
.clear-all-recipients.none:hover a,.clear-all.none:hover a{
    color:#ddd;
    cursor:auto;
}
.clear-all-recipients.none a:hover,.clear-all.none a:hover{
    color:#ddd;
    cursor:default;
}
.clear-all,.clear-all-recipients{
    width:92%;
    background:#a21e1e;
    padding:10px 6px;
    position:relative;
    bottom:0;
    border:1px solid #989898;
    box-sizing:border-box;
    margin:0 auto
}
.clear-all-recipients a,.clear-all a{
    font-family:Calibri;
    font-size:14px;
    text-decoration:none;
    color:#f5f5f5;
    font-weight:700
}
.clear-all-recipients:hover,.clear-all:hover{
    background:#fff;
    cursor:pointer
}
.clear-all-recipients:hover a,.clear-all-recipients a:hover,.clear-all:hover a,.clear-all a:hover{
    color:red
}
.leaflet-overlay-pane path{
    cursor:inherit;
}
ul.leaflet-draw-actions{
    left:36px
}
.leaflet-draw-actions a{
    height:36px;
    line-height:36px;
}
.ui-dialog-titlebar-close{
    visibility:hidden
}
input#map-search,input#unit-search{
    display:block;
    padding:4px;
    border-radius:4px;
    border:1px solid silver;
    width:50%;
    height:28px;
    margin:0 auto 13px 6px;
    background:#fff
}
div#jstree_map{
    overflow-y:scroll;
    background:#f1f0f0;
    margin:20px;
    width:88%;
    border:1px solid #ddd;
    padding:.5em .1em;
    overflow-x:hidden
}
ul.jstree-children{
    font-size:13px
}
i.jstree-icon.jstree-themeicon.jstree-themeicon-custom{
    background-size:70%;
}
i.jstree-icon.jstree-themeicon.green{
    background-color:#0f0;
    border-radius:20px
}
i.jstree-icon.jstree-themeicon.red{
    background-color:#ff0005;
    border-radius:20px
}
i.jstree-icon.jstree-themeicon.orange{
    background-color:#ffe200;
    border-radius:20px
}
.toolbar{
    height:60px;
    background:transparent
}
.middle-bar .toolbar{
    background:transparent
}
.toolbar a{
    float:left;
    text-align:center;
    color:#fff;
    padding-top:10px;
    padding-bottom:5px;
    text-decoration:none;
    font-family:Calibri;
    font-size:13px;
    height:45px;
    background:rgba(51,66,83,.84)
}
.toolbar a i{
    font-size:20px;
    padding-bottom:5px
}
.middle-bar .toolbar .selected{
    background:rgba(64,86,111,.95)
}
.toolbar a.selected{
    background:rgba(72,93,117,0)
}
.middle-bar .toolbar.selection a:hover{
    cursor:pointer;
}
.middle-bar .toolbar.selection a.selected:hover{
    background:rgba(64,86,111,.95);
    cursor:default;
}
.right-bar a:hover{
    background:rgba(89,123,162,.95)
}
.right-bar a.selected:hover{
    cursor:default;
    background:rgba(72,93,117,0)
}
.hot-select-bar,.middle-bar{
    display:none;
}
.hot-select-bar .zone-list{
    padding:1px 1px 25px;
    box-sizing:border-box;
    overflow-y:auto;
    overflow-x:hidden;
    height:calc(100% - 83px)
}
.splitscreen .hot-select-bar,.splitscreen .middle-bar,.splitscreen .selection-box{
    display:block;
}
.hot-select-bar hr{
    width:55%;
    margin:15px auto
}
.middle-bar .action-sections ul{
    list-style:none
}
.middle-bar .action-sections.new ul li{
    float:left;
    width:97%;
    background:rgba(47,54,62,.74);
    border:1px solid #d2d0d0;
    border-radius:1px;
    margin-right:.5%;
    margin-bottom:10px;
    text-align:center;
    cursor:pointer;
    box-shadow:1px 1px 1px #000;
    height:140px;
    overflow:hidden;
    vertical-align:middle;
    padding:10px 21px 21px;
    font-size:14px;
    font-weight:700;
    box-sizing:border-box;
    color:#fff
}
.middle-bar .action-sections.new li div.unit-title{
    float:left;
    height:23px;
    text-align:left;
    position:relative;
    top:-10px;
    left:-21px;
    background:#807979;
    width:178px;
    padding:3px 10px;
    border-bottom-right-radius:10px;
    overflow:hidden;
    font-size:.7vw
}
.middle-bar .action-sections.new ul li.selected div.unit-title,.middle-bar .action-sections.new ul li:hover div.unit-title{
    background:#807979;
}
.action-sections.new li.status-0 .unit-title{
    background:#ce8808;
}
.action-sections.new li.status-1 .unit-title{
    background:#bd0a0a;
}
.action-sections.new li.status-2 .unit-title{
    background:#169316;
}
.middle-bar .action-sections.new li div{
    width:100%;
    height:100%;
    box-sizing:border-box;
    display:unset;
    padding:unset;
    overflow-x:unset;
    overflow-y:unset;
    margin:unset;
}
.middle-bar .action-sections.new table{
    width:100%
}
.middle-bar .action-sections.new li td{
    width:12.5%;
    padding:1px 10px
}
.middle-bar .action-sections.new li .health-info td.fault{
    color:red;
}
.middle-bar .action-sections.new li td.unit-title{
    text-align:left;
    background:unset;
    padding:0 4px 7px
}
.middle-bar .action-sections.new li img{
    width:35px;
    margin:0 auto;
    text-align:center
}
.middle-bar .action-sections ul li{
    float:left;
    width:16%;
    background:#f5f5f5;
    border:1px solid #d2d0d0;
    border-radius:1px;
    margin-right:.5%;
    margin-bottom:5px;
    text-align:center;
    cursor:pointer;
    box-shadow:1px 1px 1px #000;
    height:71px;
    box-sizing:border-box;
    overflow:hidden;
    vertical-align:middle;
    padding:10px;
    font-size:14px;
    font-weight:700
}
.middle-bar #unitid{
    float:left;
    position:relative;
    top:-21px;
    margin-bottom:-25px;
    padding-top:0;
    margin-top:0;
    font-size:11px;
    display:none
}
.middle-bar .action-sections ul li:hover,.middle-bar .action-sections ul li:hover div,.middle-bar .action-sections ul li:hover td{
    background:rgba(89,123,162,.95);
    color:#fff;
    cursor:pointer;
}
.middle-bar .action-sections ul li.selected,.middle-bar .action-sections ul li.selected:hover,.middle-bar .action-sections ul li.selected:hover div,.middle-bar .action-sections ul li.selected:hover td,.middle-bar .action-sections ul li.selected div,.middle-bar .action-sections ul li.selected div:hover,.middle-bar .action-sections ul li.selected td,.middle-bar .action-sections ul li.selected td:hover{
    background:#0083d2;
    color:#fff;
    cursor:pointer;
}
.action-sections li span.status{
    width:14px;
    height:14px;
    background:#06c546;
    float:right;
    position:relative;
    top:-15px;
    border-radius:20px;
    margin-top:8px;
    margin-bottom:-25px;
    right:-6px
}
.splitscreen .clear-all-selected-recipients,.splitscreen .clear-all-selected-units,.splitscreen .select-units{
    display:none;
}
.middle-bar{
    display:none;
    position:absolute;
    top:15px;
    height:100%;
    overflow:hidden
}
.console .middle-bar{
    right:325px;
    width:calc(70% - 325px)
}
.console .hot-select-bar{
    right:calc(70% + 12px);
    width:calc(15% - 40px)
}
.action-sections ul{
    padding-left:3%
}
.action-sections{
    width:100%;
    height:calc(100% - 175px);
    background:rgba(64,86,111,.95)
}
#admin-section,#home-section,#status-section{
    padding:0 5%
}
#admin-section,#status-section{
    display:none
}
#admin-section.selected,#home-section.selected,#status-section.selected{
    display:block
}
.middle-bar .action-sections{
    overflow-y:auto;
    height:calc(100% - 85px)
}
.middle-bar .action-sections div{
    display:none;
    width:99%;
    height:calc(100% - 58px);
    overflow-x:hidden;
    overflow-y:auto;
    box-sizing:border-box;
    margin-top:15px;
    padding:0 0 2%
}
.middle-bar .action-sections div.selected{
    display:block;
}
.middle-bar .toolbar.selection a{
    width:20%;
    border-right:1px solid rgba(25,40,56,.67)
}
.middle-bar .toolbar.selection a:hover{
    background:rgba(63,85,108,.76)
}
.logo{
    display:none;
    background:#6485a9;
    margin-top:-30px;
    max-width:235px;
    padding:10px;
    overflow:hidden
}
.logo img{
    width:100%
}
.status-loggedin{
    position:fixed;
    background:#3f536a;
    width:300px;
    text-align:center;
    color:#fff;
    margin-top:5px
}
.active-scripts{
    margin:10px auto;
    height:12%;
    min-height:100px;
    background:#fff;
    border:1px solid #5a5757;
    overflow-x:hidden;
    overflow-y:scroll
}
.active-scripts ul{
    padding:0 10px;
    list-style:none;
    margin:7px 0 0
}
.active-scripts ul li{
    font-family:Calibri;
    font-size:14px;
    border-bottom:1px solid #b9b3b3;
    padding:11px 3px;
    color:#483f3f
}

.active-scripts ul li:first-child{
    background:red;
    padding:11px 5px;
    color:#fff;
    margin-bottom:5px;
    border-radius:5px
}

.active-scripts ul li.no-active-scripts{
    background:#afabab;
}

.active-scripts ul li span.stop-active-script{
    float:right;
    background:#fff;
    padding:4px 5px;
    border-radius:13px;
    color:red;
    font-family:Calibri;
    font-size:10px;
    margin-top:-2px
}
.active-scripts ul li span.stop-active-script:hover{
    background:#000;
    cursor:pointer;
    color:#fff
}
span.stop-active-script.cancel{
    background:red;
    color:#fff;
}
span.stop-active-script.cancel:hover{
    background:#000;
    color:#fff;
}
.stop-active-script-big{
    display:none;
    position:absolute;
    top:15px;
    right:325px;
    z-index:99999999;
    background:red;
    padding:19px;
    height:60px;
    overflow:hidden;
    color:#fff;
    border:2px solid #1c1616;
    cursor:pointer;
    box-sizing:border-box;
    width:336px;
    text-align:center
}
.stop-active-script-big:hover{
    background:#c70d0d
}
.stop-active-script-big.all{
    padding:5px;
    height:35px;
    background:#7b2626
}
.active-scripts span.stop-active-script.cancel{
    display:inline;
}
.custom-actions{
    overflow:hidden;
    overflow-y:auto;
    margin-top:5px;
    height:80%
}
.select-units:hover{
    color:#fff;
    text-decoration:none;
    background:rgba(89,123,162,.95)
}
.clear-all-selected-recipients,.clear-all-selected-units{
    text-align:center;
    font-family:Calibri;
    font-size:10px;
    padding:9px 0;
    margin-bottom:-17px;
    color:red;
    cursor:pointer;
    font-weight:bolder;
    visibility:hidden;
    display:none
}
.clear-all-selected-recipients:hover,.clear-all-selected-units:hover{
    color:#fff
}
.buttons{
    display:table;
    padding:0 0 30px
}
.activate-alarm,.activate-stored-message,.beacon-alert{
    width:93%;
}
.script{
    display:none;
}
.script-button.disabled{
    background:#6f6e6e;
    color:#484747;
    font-style:italic;
    cursor:default;
}
.script-button{
    vertical-align:middle;
    width:47%;
    float:left;
    background:rgba(33,33,33,.9);
    text-align:center;
    height:39px;
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    box-pack:center;
    box-align:center;
    font-family:Calibri;
    font-size:16px;
    border:0 solid rgba(236,189,189,.8);
    border-radius:0;
    color:#585656;
    cursor:default;
    font-style:italic;
    box-shadow:2px 2px 2px #3d1010;
    box-sizing:border-box
}
.script-button.tooltip.hot.always:hover{
    background:maroon
}
.script-button.enabled,.script-button.hot{
    cursor:pointer;
    color:#fff;
    font-style:normal;
    background:#2f363e
}
.main-actions .script-button.hot{
    background:#5d0303
}
.main-actions .script-button.hot:hover{
    background:maroon
}
.script-button.enabled:hover,.script-button.hot:hover{
    color:#fff;
    background:rgba(89,123,162,.95);
    font-style:normal
}
.ui-widget-overlay{
    background:#000;
    opacity:.5;
    filter:Alpha(Opacity=50);
}
#status-section .wrapper{
    height:95%;
    overflow:hidden;
    width:100%
}
.system-log{
    height:calc(100% - 39px);
    background:#fff;
    border:1px solid #5a5757;
    overflow-x:hidden;
    overflow-y:scroll;
    width:98%;
    margin-bottom:10px
}
.system-log ul{
    padding:0 10px;
    list-style:none;
    margin:7px 0 0
}
.system-log ul li{
    font-family:Calibri;
    font-size:12px;
    border-bottom:1px solid #b9b3b3;
    padding:15px 5px;
    color:#483f3f
}
.system-log ul li span.date-time{
    float:right;
    border-radius:12px;
    color:#a09f9f;
    font-family:Calibri;
    font-size:9px;
    position:relative;
    top:0;
    right:-4px
}
.system-log .message{
    text-align:left;
    padding-top:5px;
    margin-bottom:5px;
    word-break:break-word
}
ul.system-log-list li:hover,ul.system-log-list li div:hover,ul.system-log-list li span:hover{
    background:#f5f5f5;
    cursor:pointer
}
li.selected{
    color:#fff;
    background:#597ba2
}
.leaflet-popup-tip{
    border-top-color:#fff;
    background:#fff;
}
.leaflet-popup-content,.leaflet-popup-content-wrapper,.unit-info-box{
    background:rgb(255 255 255);
    border-color:#fff;
}
.leaflet-popup-content{
    margin-right:10px;
    margin-left:13px;
    margin-bottom:20px;
}
.unit-info-box{
    width:260px;
    color:#fff;
    font-family:Calibri;
    height:283px
}
.unit-info-box.small{
    height:213px;
    float:left
}
.unit-info-box.wide{
    width:480px;
}
.unit-info-box.TRX{
    height:367px
}
.unit-info-box.TRX-SPT{
    height:456px
}
.zones{
    width:205px;
    padding-top: 55px;
    box-sizing:border-box;
    padding-left:15px;
    border-left: 1px solid #DDD;
    background: #344555;
    color: white;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px !important;
}
.zone-title{
    font-size:18px;
    font-weight:bolder;
    margin-top:-36px;
    margin-bottom:8px
}
.zone-selector{
    margin-bottom: 4px;
    height:38px;
    box-sizing:border-box;
    padding:7px;
    font-size: 14px;
    background:#585858;
    font-style:italic;
    color:grey;
    cursor:default;
    border-radius: 8px;
    padding-top: 1px;
}
.zone-selector.enabled{
    cursor:pointer;
    color:#fff;
    font-style:normal;
    background:#16576b
}
.zone-selector.selected{
    background:#761818
}
.zone-selector input{
    margin-right: 3px;
    position:relative;
    top: 3px;
    width: 29px !important;
    height: 18px;
    margin-left: -3px;
}
.zone-selector.disabled{
    font-size:13px;
    padding-top:10px
}
.edit-unit,.move-unit,.select-unit{
    float:left;
    background:#2f363e;
    color:#fff;
    cursor:pointer;
    font-size:14px;
    width:32%;
    margin:20px 1px 1px;
    text-align:center;
    padding:5px;
    border:1px solid #615e5e
}
.edit-unit:hover,.move-unit:hover,.select-unit:hover{
    color:#fff;
    background:#597ba2
}
.unit-type{
    position:relative;
    top:-7px
}
.unit-type span{
    font-weight:700;
    font-size:20px
}
.unit-ac,.unit-amps,.unit-battery,.unit-bwdrssi,.unit-comm,.unit-crc,.unit-door,.unit-drivers,.unit-id,.unit-miscor,.unit-quality,.unit-rs232,.unit-rssi,.unit-solar,.unit-source,.unit-status{
    float:left;
    width:31%;
    background:#354454;
    color:#fff;
    text-align:center;
    padding-top:5px;
    margin:1%;
    height:75px;
    position:relative;
    top:10px;
    line-height:14px
}
.unit-info-box div.no-fault{
    background:#1d6f1b
}
.unit-info-box div.fault{
    background:red;
}
.unit-info-box.status-0 .fault,.unit-info-box.status-0 .no-fault{
    background:#72720d;
}
.unit-info-box.status-0 .unit-status{
    background:#72720d
}
.unit-info-box.status-1 .unit-status{
    background:#1d6f1b
}
.unit-info-box.status-2 .unit-status{
    background:red
}
.unit-info-box .label{
    font-size:15px;
    font-weight:bolder
}
.unit-info-box img{
    width:33px
}
.select-units-box{
    display:none;
    position:absolute;
    top:20%;
    left:35%;
    width:30%;
    height:60%;
    background:#f5f5f5;
    overflow:hidden;
    z-index:1001
}
.select-units-list{
    height:91%;
    overflow-y:scroll;
    overflow-x:hidden
}
.title{
    text-align:center;
    font-family:Calibri;
    font-weight:bolder;
    font-size:21px;
    color:#fff;
    width:100%;
    background:#0d4b53;
    height:9%;
    min-height:42px;
    margin:0 auto;
    padding-top:7px;
    height:40px;
    box-sizing:border-box
}
.modal{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:#000;
    opacity:.85;
    z-index:1000
}
.select-units-list ul li span{
    font-family:Calibri;
    font-size:15px
}
.select-units-list ul li{
    padding:10px 5px;
    border:1px solid #ddd;
    margin-bottom:10px;
    border-radius:10px;
    cursor:pointer
}
.select-units-list ul{
    list-style:none;
    margin:0;
    padding:11px
}
.select-units-list ul li span.unitID{
    float:right;
    margin-right:10px;
    background:#bfbebe;
    width:60px;
    text-align:center;
    padding:4px;
    font-size:12px;
    border-radius:6px
}
.select-units-list ul li span.name{
    padding-left:10px
}
.select-units-list ul li.selected,.select-units-list ul li:hover{
    background:#8ea7c3;
    color:#fff
}
.unitTypeSmall span{
    float:left;
    height:15px;
    width:100%;
    margin-top:-10px;
    font-size:11px;
}
.edit-unit{
    display:none;
    float:right;
    margin-top:-16px;
    background:transparent;
    color:#000;
    border:0;
    text-transform:uppercase;
    font-weight:700;
    width:42px;
    margin-right:10px;
    padding:0;
    position:relative;
    z-index:99999999
}
.edit-unit:hover{
    background-color:#c9ced4;
    color:#000
}
.move-unit,.select-unit{
    display:none;
}

.map-bottom-bar{
    position:absolute;
    bottom:10px;
    left:10px;
    display:flex;
    align-items:flex-end;
    gap:6px;
    z-index:100
}
.map-bottom-stack{
    display:flex;
    flex-direction:column;
    align-items:stretch
}
div#legend{
    background:#212121;
    height:7px;
    padding: 9.4px;
    padding-right:0;
    font-size:11px;
    font-family:Calibri;
    text-transform:uppercase;
    display: flex;
    overflow:hidden;
    border-radius: 8px;
    color:#fff;
    line-height: 8px;
    white-space:nowrap
}

div#legend div{
    display: flex;
}

div#legend div span{
    height:12px;
    width:12px;
    margin-right:5px;
    border-radius:10px;
    margin-top: -2px;
    margin-left: 9px;
}

.legend-green, .legend-red, .legend-orange  {
    margin-right: 4px;
}
.legend-green span{
    background:green;
    margin-left: 0px !important;
}
.legend-orange span{
    background:#b7b433
}
.legend-red span{
    background:red
}

.count-degraded,.count-operational,.count-unknown{
    width:auto;
    padding-right:5px
}
.third-party-logo img{
    width:100%
}
.third-party-logo{
    padding:10px;
    width:142px;
    box-sizing:border-box;
    border-bottom:0;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    z-index:1000;
    box-shadow: 0 0 0 2px rgba(0,0,0,.1);
}
.third-party-logo,div#coordinates{
    background:#212121
}

/* Hide the third-party logo on touch / small-screen devices — at tablet sizes
   (especially landscape) it overlaps the legend/filter UI and obscures the map. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .map-bottom-bar .third-party-logo {
        display: none;
    }
}
div#coordinates{
    height:7px;
    padding:10px 5px;
    font-size:10px;
    font-family:Calibri;
    text-transform:uppercase;
    font-weight:700;
    width:130px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    overflow:hidden;
    text-align:center;
    color:#fff;
}

.filter-ui{
    background:#212121;
    z-index:100;
    width:140px;
    font-family:Calibri;
    text-transform:capitalize;
    padding-bottom:10px;
    border-radius: 8px;
    overflow:hidden;
    height:16px;
    color:#fff
}
.filter-ui label{
    font-size:11px;
    padding-left:5px;
    cursor:pointer;
    color:#fff
}
.filter-ui div{
    padding:0 10px
}
#filters div.filter-title{
    background:#212121;
    font-family:Calibri;
    font-size: 13px;
    color:#fff;
    padding:5px 13px;
    border-radius: 8px;
    text-align:center;
    margin:0
}
.leaflet-top{
    top:26px;
}
nav#filters div{
    padding:2px 10px;
    background:#505050;
    border:1px solid #585656;
    margin:5px 5% 0;
    color:#f30000;
    cursor:pointer
}
.leaflet-label{
    z-index:99999999;
    position:relative;
    right:-15px;
}
.leaflet-draw-toolbar.leaflet-bar,a.leaflet-draw-draw-marker,a.leaflet-draw-draw-polyline,a.leaflet-draw-edit-edit,a.leaflet-draw-edit-remove{
    display:none;
}
.leaflet-draw-toolbar.leaflet-bar.leaflet-draw-toolbar-top{
    display:block;
}
.leaflet-touch .leaflet-bar,.leaflet-touch .leaflet-control-layers{
    border-width:1px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-circle{
    background-position:-87px 1px;
    display:none
}
.leaflet-bar a,.leaflet-control-layers-toggle,.map-tooltip.closable .close,.mapbox-button-icon:before,.mapbox-icon{
    width:35px;
    height:35px;
    background-repeat:no-repeat
}
a.leaflet-control-zoom-in{
    background-size:35px 336px;
}
a.leaflet-control-zoom-out{
    background-size:35px 281px;
}
a.leaflet-control-layers-toggle{
    background-size:22px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-polygon{
    background-position:-27px 2px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-rectangle{
    background-position:-57px 2px;
}
a.leaflet-control-layers-toggle:hover{
    border-width:2px;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}
div.zoom-out-popup-location-edit a,div.zoom-out-popup-location a,div.zoom-out-popup a,div.zoom-out a{
    background-image:url(images/earth-icon.png)
}
div.zoom-out,div.zoom-out-popup,div.zoom-out-popup-location,div.zoom-out-popup-location-edit{
    margin-top:-4px;
    border-top:1px solid #f3f3f3;
    border-top-left-radius:0;
    border-top-right-radius:0;
}
.leaflet-retina div.zoom-out-popup-location-edit a,.leaflet-retina div.zoom-out-popup-location a,.leaflet-retina div.zoom-out-popup a,.leaflet-retina div.zoom-out a{
    background-image:url(images/earth-icon-2x.png)
}
.btnSignOut{
    width:97%;
    text-align:center;
    background:#f5f5f5;
    padding-top:5px;
    height:23px;
    border:1px solid #615e5e;
    cursor:pointer;
    font-size:14px;
    font-family:Calibri;
    color:#a21e1e;
    margin-bottom:3px;
    margin:0 auto;
    font-weight:700
}
.btnSignOut:hover{
    color:red;
    text-decoration:none;
    background:#fff
}
#admin-section .wrapper{
    height:94%;
    margin-top:15px;
    overflow-y:scroll
}
.manage-app,.manage-map,.manage-units,.manage-users{
    border:1px solid #8e8e8e;
    padding:25px;
    font-size:15px;
    font-family:Calibri;
    margin-bottom:20px;
    background:#fff;
    color:#344355;
    width:75%;
    margin-top:1px
}
.manage-app .admin-title,.manage-map .admin-title,.manage-units .admin-title,.manage-users .admin-title{
    margin-top:-24px;
    margin-left:-24px;
    background:#8b96a5;
    padding:8px;
    width:116.5%;
    font-size:13px;
    margin-bottom:15px;
    color:#fff;
    font-weight:bolder;
    cursor:pointer
}
.admin-title img{
    width:20px;
    float:right;
    margin-top:-3px
}
div#admin-section div.closed{
    height:0;
    overflow:hidden;
    padding-bottom:8px
}
.button{
    width:100%;
    text-align:center;
    background:#2f363e;
    font-family:Calibri;
    cursor:pointer;
    color:#fff
}
.button:hover{
    color:#fff;
    text-decoration:none;
    background:rgba(89,123,162,.95)
}
.manage-app div,.manage-map div,.manage-units div{
    margin-bottom:10px
}
.manage-app label,.manage-map label,.manage-units label,.manage-users label{
    font-weight:700;
    line-height:22px
}
.loading #login .wrapper{
    margin-top:5%;
    margin-left:10%;
    min-height:300px
}
#login{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10001
}
body.splitscreen #login .wrapper{
    margin-left:9%;
    height:31%;
    margin-top:9%;
}
#login .wrapper{
    width:20%;
    margin:auto;
    min-height:25%;
    background:#f5f5f5;
    padding:70px;
    min-width:300px;
    box-shadow:0 0 16px 6px #3c3b3b;
    min-height:200px;
}
.login-welcome{
    margin-bottom:22px;
    font-family:Calibri;
    font-size:28px;
    color:#404040;
    margin-top:-35px
}
#login label{
    width:100%;
    float:left
}
#login input.password, #login input.username{
    width:96.1%;
    margin-bottom:15px;
    margin-top:2px;
    height:30px;
    padding-left:10px;
    font-size:15px;
    font-family:Calibri;
    border-radius: 5px;
    padding: 8px 6px;
    border:thin solid #888;
    box-shadow:1px 1px 1px grey;
}
a.btnSignIn{
    float:right;
    background:#fff;
    padding:10px 25px;
    color:#000;
    cursor:pointer;
    border-radius:5px;
    border:thin solid #888;
    box-shadow:1px 1px 1px grey;
    transition:background-color .3s;
    text-align:center;
    display:inline-block;
    font-size:14px;
    font-weight:700;
    font-family:Roboto,sans-serif
}
a.btnSignIn:hover{
    background:#f1f1f1
}
a.btnSignIn.loading{
    background-color:#f1f1f1
}
a.btnSignIn.loading,a.btnSignIn.loading:hover{
    background-image:url(images/loading.gif);
    background-size:15%;
    background-repeat:no-repeat;
    background-position:93% 50%;
    cursor:default;
}
a.btnSignIn.loading:hover{
    background-color:#f1f1f1;
}
div.checkbox-wrapper{
    float:left;
    width:165px;
    background:#ddd;
    padding:5px 0 5px 15px;
    border-radius:2px
}
div.checkbox-wrapper .label{
    cursor:pointer
}
input#opensplitscreen{
    width:30px;
    padding:11px;
    height:13px;
    margin-right:10px;
    margin-left:0
}
.error-msg{
    margin-top:-10px;
    margin-bottom:10px;
    color:red;
    text-align:center;
    font-size:13px;
    font-weight:700;
    display:none
}
body.admin .hidden-admin,body.operator .hidden-operator{
    display:none;
}
body.operator a.home,body.operator a.status{
    width:50%;
}
.confirm-alarm-dialog .ui-dialog-buttonset button:last-Child,.confirm-beacon-dialog .ui-dialog-buttonset button:last-Child,.confirm-script-dialog .ui-dialog-buttonset button:last-Child{
    background:red;
    border-radius: 8px;
    padding: 8px 16px;
    color:#fff;
}
/* User Profile Dialog - 4 button layout */
.user-profile-dialog .ui-dialog-buttonpane {
    padding: 10px 15px !important;
}
.user-profile-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
}
.user-profile-dialog .ui-dialog-buttonset button {
    flex: 0 1 auto;
    margin: 0 !important;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    min-width: 100px;
}
/* Cancel button - default grey */
.user-profile-dialog .ui-dialog-buttonset button:first-child {
    background: #e0e0e0;
    color: #333;
}
/* Link SSO and Change Password - grey */
.user-profile-dialog .ui-dialog-buttonset button:nth-child(2),
.user-profile-dialog .ui-dialog-buttonset button:nth-child(3) {
    background: #6c757d;
    color: #fff;
}
/* Sign Out button - red */
.user-profile-dialog .ui-dialog-buttonset button:last-child {
    background: #c62828;
    color: #fff;
}
.ui-dialog{
    z-index:10005 !important;
}
#alert-dialog-popup span.date-time{
    float:right;
    font-size:10px;
    margin-top:18px;
    margin-right:8px
}
.confirm-select-dialog .ui-dialog-buttonset button:last-Child{
    background:#54595e;
    color:#fff;
}
.splitscreen .confirm-alarm-dialog,.splitscreen .confirm-beacon-dialog,.splitscreen .confirm-script-dialog{
    position:fixed;
    left:75%
}
div#log-box{
    display:none;
    overflow:hidden
}
div#file-tree{
    float:left;
    width:60%;
    height:100%;
    overflow-x:auto;
    overflow-y:auto
}
div#file-data{
    float:right;
    margin-left:1%;
    width:37%;
    background:#f2f2f2;
    height:99%;
    border:1px solid #ddd;
    padding-left:10px;
    overflow:hidden
}
div#file-data p,div#file-data td{
    font-size:12px;
    font-family:Calibri
}
.selected-item-data{
    display:none
}
p.selected-item-title{
    font-weight:bolder;
    font-size:14px;
    margin-bottom:-8px
}
.selected-item-actions{
    margin-top:15px
}
.selected-item-actions a{
    background:#00f;
    color:#fff;
    padding:5px 10px;
    text-transform:none;
    font-size:15px;
    font-family:Calibri;
    text-decoration:none;
    margin-top:10px;
}
a.selected-item-delete-btn{
    padding:6px 25px;
    background:red;
    margin-left:0
}
div#stream-audio-dialog{
    overflow-y:hidden
}
div.stream-audio-dialog{
    overflow:hidden
}
div#audio-file-upload-box{
    box-sizing:border-box;
    background:#f2f2f2;
    height:19%;
    margin-top:1%;
    padding:10px;
    border:1px solid #ddd;
    min-height:101px
}
.audio-file-box{
    height:78%
}
.audio-file-upload-title{
    font-family:Calibri;
    font-weight:bolder;
    color:#7d0303
}
div#progress-div{
    height:20px;
    background:#ddd;
    border-radius:9px;
    overflow:hidden;
    text-align:center;
    color:#fff;
    font-size:14px
}
div#progress-bar{
    background:green;
    height:100%;
    padding-top:1px;
    width:0
}
input#audioFile{
    font-family:Calibri;
    font-size:14px
}
div#audio-file-tree{
    float:left;
    width:60%;
    height:100%;
    overflow-x:auto;
    overflow-y:auto
}
div#audio-file-data{
    float:right;
    margin-left:1%;
    width:36%;
    background:#f2f2f2;
    height:99%;
    border:1px solid #ddd;
    padding-left:10px;
    overflow:hidden
}

div#audio-file-data p,div#audio-file-data td{
    font-size:12px;
    font-family:Calibri
}

div#audio-file-data .selected-audio-item-actions a{
    background:#000000;
    color:#fff;
    padding:4px 10px;
    text-transform:none;
    font-size:15px;
    font-family:Calibri;
    text-decoration:none
}

.selected-audio-item-actions {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}
a.selected-audio-item-broadcast-btn {
    background: red !important;
    padding: 10px !important;
}

a.selected-audio-item-delete-btn {
    background: red !important;
}

body.map .leaflet-draw-section{
    display:none
}
body.map div#userLoginBox{
    position:fixed;
    top:5%;
    right:2%;
    z-index:10000001;
    background:#fff;
    width:200px;
    min-height:90px;
    box-sizing:border-box;
    border:2px solid #ddd
}
body.map div#userLoginBox .title{
    font-size:18px;
    height:28px;
    min-height:28px;
    padding-top:0
}
.right-bar.wide.assets{
    width:35%;
    height:97%;
    background:#fff;
    padding:10px;
    box-sizing:border-box;
    overflow:hidden;
    min-width:675px;
    border:2px solid #2a2a2a
}
.right-bar.wide.assets.manage{
    display:none
}
.wide.assets .action-sections{
    height:100%;
    background:rgba(64,86,111,.98)
}
p.ipaws-uri_en,p.ipaws-uri_es{
    text-align:left;
}
p.assets-title{
    font-size:22px;
    margin-bottom:6px;
    margin-top:0;
    color:#696969;
    text-align:center;
    background:#ececec;
    padding:10px
}
select#filter-bldg,select#filter-dept,select#filter-type{
    width:32.35%;
    margin-right:.07%;
    background:#fff;
    margin-top:-7px
}
#signInButtons{
    display:flex;
    gap:6px;
    margin-top:50px
}
#google-btn,#microsoft-btn,#sso-btn{
    display:flex;
    align-items:center;
    background:#fff;
    color:#444;
    width:40%;
    max-width:240px;
    border-radius:5px;
    border:thin solid #888;
    box-shadow:1px 1px 1px grey;
    white-space:nowrap;
    padding:10px;
    text-align:center;
    transition:background-color .3s
}
#google-btn:hover,#microsoft-btn:hover{
    cursor:pointer;
    background-color:#f1f1f1
}
#sso-btn{
    background:#e0e0e0;
    color:#888;
    cursor:not-allowed
}
.google-label,.microsoft-label,.sso-label{
    font-family:serif;
    font-weight:400;
    display:block;
    margin-bottom:10px
}
.google-icon,.microsoft-icon,.sso-icon{
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    margin-right:10px
}
.google-buttonText,.microsoft-buttonText,.sso-buttonText{
    display:inline-block;
    vertical-align:middle;
    font-size:14px;
    font-weight:700;
    font-family:Roboto,sans-serif
}
#jstree_map_modal .hot-select-bar::-webkit-scrollbar{
    width:15px;
    display:block;
    border-top-right-radius:10px
}
#jstree_map_modal .hot-select-bar::-webkit-scrollbar-track{
    width:15px;
    display:block;
    border-radius:27px
}
#jstree_map_modal .hot-select-bar::-webkit-scrollbar-thumb{
    width:15px;
    display:block;
    border-radius:10px
}
#jstree_map_modal .hot-select-bar{
    overflow-y:scroll;
    height:calc(100% - 120px);
    padding-bottom:82px
}
input.dynamic_var.dvar-unfilled{
    background:#fff9c4;
    border-color:#f0c239
}
.dvar-row{
    display:flex;
    align-items:stretch;
    gap:6px
}
.dvar-row-content{
    flex:1;
    min-width:0
}
.dvar-drag-handle{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:24px;
    color:#b5b5b5;
    cursor:grab;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none
}
.dvar-drag-handle .fa{
    font-size:12px
}
.dvar-drag-handle .fa+.fa{
    margin-left:1px
}
.dvar-drag-handle:hover{
    color:#777
}
.dvar-row.ui-sortable-helper .dvar-drag-handle{
    cursor:grabbing
}
.dvar-row-placeholder{
    border:1px dashed #ccc;
    border-radius:6px;
    background:#fafafa;
    margin-bottom:4px
}
.dvar-warning{
    color:#b8860b;
    font-size:12px;
    margin-top:2px;
    margin-bottom:8px;
    display:none
}
.dvar-warning.dvar-warning-visible{
    display:block
}
.survey-response-table{
    width:100%;
    border-radius:10px;
    background:#fff;
    border:1px solid #ddd;
    padding:20px;
    box-sizing:border-box
}
#map-popup{
    display:none;
    width:700px;
    height:700px;
    margin-left:0;
    margin-top:0;
    background:#fff;
    z-index:0;
}
#map-popup input.leaflet-control-layers-selector{
    width:25px
}
#map-popup a.leaflet-draw-draw-circle{
    display:block
}
#map-popup .leaflet-draw-toolbar.leaflet-bar,#map-popup a.leaflet-draw-draw-marker,#map-popup a.leaflet-draw-draw-polyline,#map-popup a.leaflet-draw-edit-edit,#map-popup a.leaflet-draw-edit-remove{
    display:block;
}
#map-popup .selected-areas{
    background:#fff;
    position:relative;
    z-index:9999;
    float:right;
    padding:16px 35px;
    border:1px solid grey
}

div#selected-recipients-popup{
    z-index:99999;
    position:absolute;
    top:20px;
    right:20px;
    background:#fff;
    border:2px solid #ddd;
    padding-right:27px
}
#map-popup-location{
    left:334px;
    width:calc(100% - 343px)
}
#map-popup-location,#map-popup-location-custom{
    position:absolute;
    height:100%;
    float:left
}
#map-popup-location-custom{
    left:0;
    width:100%
}
#map-popup-location-box-custom .box-left,#map-popup-location-box-edit .box-left,#map-popup-location-box .box-left{
    width:268px;
    float:left;
    overflow:hidden;
    min-width:20%
}
#map-popup-location-edit{
    position:absolute;
    left:334px;
    width:calc(100% - 343px);
    height:100%;
    float:left
}
#map-popup-location-box-custom .box-left,#map-popup-location-box-edit .box-left{
    width:295px;
    float:left;
    overflow:hidden;
    min-width:20%;
    position:relative;
    left:-290px;
    border-bottom:2px dashed #ddd
}
.leaflet-control-layers-base input{
    text-align:left;
    width:20px
}
.leaflet-control-layers-base{
    width:150px;
    float:left;
    border-bottom:2px solid #f5f5f5;
    margin-bottom:6px
}
#map-popup-location-custom input.leaflet-control-layers-selector,#map-popup-location-edit input.leaflet-control-layers-selector,#map-popup-location input.leaflet-control-layers-selector{
    width:25px
}
#map-popup-location-custom a.leaflet-draw-draw-circle,#map-popup-location-edit a.leaflet-draw-draw-circle,#map-popup-location a.leaflet-draw-draw-circle{
    display:block
}
#map-popup-location-custom .leaflet-draw-toolbar.leaflet-bar,#map-popup-location-custom a.leaflet-draw-draw-marker,#map-popup-location-custom a.leaflet-draw-draw-polyline,#map-popup-location-custom a.leaflet-draw-edit-edit,#map-popup-location-custom a.leaflet-draw-edit-remove,#map-popup-location-edit .leaflet-draw-toolbar.leaflet-bar,#map-popup-location-edit a.leaflet-draw-draw-marker,#map-popup-location-edit a.leaflet-draw-draw-polyline,#map-popup-location-edit a.leaflet-draw-edit-edit,#map-popup-location-edit a.leaflet-draw-edit-remove,#map-popup-location .leaflet-draw-toolbar.leaflet-bar,#map-popup-location a.leaflet-draw-draw-marker,#map-popup-location a.leaflet-draw-draw-polyline,#map-popup-location a.leaflet-draw-edit-edit,#map-popup-location a.leaflet-draw-edit-remove{
    display:block;
}
#map-popup-location-custom .selected-areas,#map-popup-location-edit .selected-areas,#map-popup-location .selected-areas{
    background:#fff;
    position:relative;
    z-index:9999;
    float:right;
    padding:16px 35px;
    border:1px solid grey;
    margin-right:10px
}
/* .alert-audio div:last-Child{
    padding-bottom:15px
} */
.search-control.leaflet-control{
    overflow:hidden;
    padding:5px;
    border:1px solid #b5b3b3;
    border-radius:4px;
    margin-bottom:0;
    background-position:0 0;
    box-sizing:border-box;
    background:#fff;
    font-size:20px;
    width:37px;
    height:36px
}
.search-control.leaflet-control i{
    color:red;
    font-weight:100;
    position:relative;
    top:-5px;
    right:-1px
}
.search-control.leaflet-control span{
    position:relative;
    top:-25px;
    font-size:9px;
    left:-1px;
    font-weight:600;
    color:#210d5d;
    font-family:sans-serif
}
.search-control.leaflet-control:hover{
    cursor:pointer
}
.search-control.leaflet-control i{
    font-size:22px;
    margin-top:5px;
    color:#464646;
}
div#county-warning{
    background:red;
    color:#fff;
    padding:10px;
    font-size:14px;
    margin-bottom:11px
}
button.ui-button.ui-corner-all.ui-widget:first-child{
    margin-left:10px;
}
.leaflet-popup.IPAWS_BOX.leaflet-zoom-animated .leaflet-popup-tip-container .leaflet-popup-tip{
    border-color:#fff;
    background:#fff;
    box-shadow:none;
}
p.ipaws-event b,p.ipaws-sender b{
    display:none
}
.ipaws_info p b{
    font-weight:800;
    font-family:system-ui;
    color:#3e3c3c;
    font-size:11px
}
p.ipaws-event,p.ipaws-sender{
    margin-top:-23px;
    margin-bottom:-8px;
}
p.ipaws-expires,p.ipaws-sent{
    padding-bottom:10px;
    margin-bottom:10px;
    border-bottom:1px solid #ddd
}
.leaflet-popup.IPAWS_BOX.leaflet-zoom-animated div.leaflet-popup-content{
    background:#fff;
    max-height:500px;
    overflow-y:scroll
}
.leaflet-pane.leaflet-marker-pane img.unit.ipaws{
    width:22px;
}
.ipaws_info{
    background:#fff;
    font-size:14px;
    padding:10px;
}
.ipaws_info p{
    margin:0 0 5px;
    text-align:justify
}
p.ipaws-headline_es{
    margin-top:20px
}
p.ipaws-wea_long_text_en,p.ipaws-wea_long_text_es,p.ipaws-wea_short_text_en,p.ipaws-wea_short_text_es{
    background:#f5f5f5;
    padding:5px 8px
}
p.ipaws-wea_long_text_en{
    margin-top:-7px;
    border-bottom:1px solid #ddd
}
p.ipaws-wea_long_text_es{
    margin-top:-7px
}
p.ipaws-title b{
    display:none
}
p.ipaws-title{
    font-weight:700;
    font-size:23px
}
p.ipaws-sent{
    float:left;
    width:50%
}
p.ipaws-expires{
    float:right;
    width:50%
}
fieldset{
    border:0;
    padding:10px 0;
    font-size:14px
}
fieldset input{
    width:23px;
    margin:0;
    position:relative;
    top:2px
}
span.array-item{
    padding:2px 9px;
    background:#2d4471;
    color:#fff;
    margin-right:4px;
    margin-top:2px;
    top:2px;
    margin-bottom:19px;
    font-size:13px;
    min-width:100px;
    box-sizing:border-box
}
span.array-item.ipaws-alert-live{
    background:red
}
span.array-item.ipaws-alert-test{
    background:green
}
p.additional-ipaws-text-test{
    background:green
}
p.additional-ipaws-text-live,p.additional-ipaws-text-test{
    color:#fff;
    padding:3px 12px;
    font-weight:100;
    width:calc(100% - 45px)
}
p.additional-ipaws-text-live{
    background:red
}
.scriptLineBreakdown ul.recipient-count li:first-child{
    font-weight:700;
    margin-bottom:5px;
    margin-left:-17px;
    margin-top:10px;
    font-size:15px
}
.scriptLineBreakdown ul li{
    margin-bottom:5px;
    font-weight:700
}
.scriptLineBreakdown ul.recipient-count li{
    margin-bottom:0;
    font-weight:400;
    font-size:smaller
}
ul.jstree-container-ul.jstree-children{
    padding-bottom:74px
}
.trumbowyg-editor{
    min-height:150px !important;
    max-height:300px;
    overflow-y:auto;
    overflow-x:hidden;
    word-wrap:break-word;
    overflow-wrap:break-word;
    word-break:break-word;
    max-width:100%;
}
/* The email editor's writing surface reads as #f9fafb because it sits inside
   the .email-message box, whose background bleeds through the transparent
   Trumbowyg editor. The RSS Description field is unboxed, so its editor shows
   the plain white panel instead. Give the RSS Trumbowyg surface the same
   background so the two editors match. */
#message-center .form-group.rss-description .trumbowyg-box,
#message-center .form-group.rss-description .trumbowyg-editor,
#message-center .form-group.rss-description .trumbowyg-textarea{
    background:#f9fafb;
}
.trumbowyg-body-fullscreen #tabs #current a{
    z-index:2;
}
.trumbowyg-fullscreen{
    z-index:4;
    top:48px;
    height:calc(100% - 48px)
}
.trumbowyg-box.has-extraneous-html{
    outline:2px solid #f1c40f;
    outline-offset:-2px;
    box-shadow:0 0 0 1px #f1c40f inset;
}
.email-html-warning{
    margin-top:6px;
    padding:6px 10px;
    background:#fff8d6;
    border:1px solid #f1c40f;
    border-left-width:4px;
    color:#7a5d00;
    font-size:12px;
    line-height:1.4;
    border-radius:3px;
}
.email-html-warning::before{
    content:"\26A0\FE0F";
    margin-right:6px;
}
.pass-picker input{
    width:86%;
}

select#new-fips-code{
    height:55px;
    width:98%
}
img.super-admin{
    width:12px;
    margin-left:2px;
    margin-right:2px
}
/* "Dynamic Group" and "Show/Hide Map" header actions — real, responsive
   buttons. inline-flex + white-space:nowrap keeps the label on one line so the
   button wraps to its own line as a unit instead of being sliced in half. The
   same rule is used in both the full-page and split-map views (the split-only
   blue/width overrides in map/style.css were removed) for a consistent look. */
span.custom-group,
span.custom-location{
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    vertical-align:middle;
    background:red;
    color:#fff;
    padding:5px 14px;
    font-size:12px;
    line-height:1.3;
    border-radius:6px;
    cursor:pointer;
    position:relative;
    top:0px;
    transition:background .15s ease;
}

span.custom-group:hover,
span.custom-location:hover{
    background:#a90a0a;
}

span.custom-group:active,
span.custom-location:active{
    background:#8a0808;
}
a.jstree-anchor:hover span{
    display:inline;
}
#msg-compose-area{
    display:none
}
.ipaws-target-channel{
    float:left;
    background:#a7b5b5;
    color:#4a4d50;
    font-size:13px;
    font-weight:700;
    padding: 7px 14px;
    margin: 2px;
    border-radius: 8px;
}

p.ipaws_keystore_live_url,p.ipaws_keystore_test_url{
    margin-top:-10px;
    margin-left:22px
}


.generateTTS:not(.sisa-audio-source__btn) {
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--accent-primary, #af0e0f);
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 150ms ease, background 150ms ease;
}
.generateTTS:not(.sisa-audio-source__btn):hover {
    color: #850b0c;
    background: rgba(175, 14, 15, 0.08);
}
.ipaws-content.disabled .ipaws{
    opacity:.4;
    cursor:default;
}
p.ipaws-web_url_en br,p.ipaws-web_url_es br{
    display:none
}
.delete-attachment{
    display:none;
    float:left;
    margin-top:0;
    margin-right:6px;
    color:red;
    margin-left:2px;
    cursor:pointer
}
.delete-attachment:hover{
    color:#5a0b0b
}
p.ipaws-web_url_en b,p.ipaws-web_url_es b{
    margin-right:8px
}
.ipaws-status-live.ipaws-status-test{
    margin-bottom:15px;
    height:30px;
    line-height:31px;
    border-radius:2px;
    margin-top:-30px;
}
span.charlen{
    font-size:10px;
    position:relative;
    top:-1px;
    color:grey
}
.ipaws-identifier{
    display:none;
}
.ipaws-headline,.ipaws-instructions,.mobile-app,.or-signin,.short-message{
    display:none
}
.ipaws-wea-handling-box{
    margin-top:15px
}
.ipaws-wea-handling-box select{
    width:97%;
}
.abcRioButton.abcRioButtonLightBlue{
    width:232px;
    text-align:left;
    box-shadow:1px 1px 2px #dcdcdc;
    border:1px solid #ddd;
    border-radius:2px
}
label.alert-headline{
    display:block
}

.ipaws-live{
    background:#888888;
    text-align:center;
    color:#f5f5f5;
    font-size:16px;
    padding:10px;
    box-sizing:content-box;
    cursor:pointer;
    font-style:italic
}

.ipaws-live.active{
    background:red;
    font-style:normal;
    font-weight:700;
    color:#fff;
    cursor:default
}

.ipaws-test{
    background:#888888;
    text-align:center;
    color:#b7b7b7;
    font-size:16px;
    padding:10px;
    box-sizing:content-box;
    cursor:pointer;
    font-style:italic
}

.ipaws-test.active{
    background: green;
    font-style:normal;
    font-weight:700;
    color:#fff;
    cursor:default
}

.ipaws-status-live{
    background:red
}
.ipaws-status-live,.ipaws-status-test{
    color:#fff;
    padding:7px;
    text-align:center;
    font-size:15px;
    font-weight:700;
    line-height:15px;
    margin-bottom:15px;
    margin-left:-24px;
    width:calc(100% + 35px);
    margin-top:-20px
}
.ipaws-status-test{
    background:green
}

p.remaining {
    margin: 0;
    font-size: 11px;
    color: #6c757d;
    text-align: right;
    line-height: 1.2;
}
p.remaining.desc,
p.remaining.eas-desc,
p.remaining.instructions {
    margin: 0;
}
.ipaws-content.live{
    border:3px solid red
}
.ipaws-content.test{
    border:3px solid green
}

/* IPAWS area text warning styling that syncs with test/live selection */
.ipaws-area-text-warning {
    background:red;
    color:#fff;
    padding:8px 12px;
    border-radius:4px;
    font-weight:bold;
    margin:10px 0;
    display:block;
}

.ipaws-content.test .ipaws-area-text-warning {
    background: green;
    color:#fff;
}

.ipaws-content.live .ipaws-area-text-warning {
    background:red;
    color:#fff;
}

.ipaws-content.test .ipaws-generate-xml {
    background: green;
}

.ipaws-content.live .ipaws-generate-xml {
    background:red;
}

.ipaws-generate-xml:hover {
    cursor: pointer;
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

.abcRioButton.abcRioButtonLightBlue span{
    font-size:15px;
}
.alert-headline{
    display:none
}
.email-message{
    padding:20px 25px 36px 22px;
    border:1px solid #ddd;
    background:#f9fafb;
    border-radius:4px;
    box-shadow:2px 2px 2px #ddd;
    margin-bottom:25px;
    box-sizing:border-box
}
.narrow .sisa-form-field{
    width:100%
}
div#disconnect-facebook,div#disconnect-instagram,div#disconnect-twitter,div#login-facebook,div#login-instagram,div#login-twitter{
    background:#f5f5f5;
    padding:10px
}
.spacer{
    margin:0 5px
}
.short-message-content, div.cap-message, div.desktop-message, div.fb-message, div.feed-title, div.phone-message, div.sms-message, div.twitter-message, div.whatsapp-message, div.safe-network-message{
    padding:20px 25px 18px 22px;
    border:1px solid #ddd;
    background:#f9fafb;
    box-sizing:border-box;
    border-radius: 8px;
}
.short-message-content.no-ipaws{
    padding:20px 25px 18px 22px;
    border:1px solid #ddd;
    background:#f9fafb;
    border-radius:4px;
    box-shadow:2px 2px 2px #ddd;
    margin-bottom:15px;
}
.recipient-count{
    margin-top:5px;
    width:90%
}
table.recipient-count td{
    border-bottom:1px solid #ddd;
    border-right:1px solid #ddd
}
.no-ipaws.live .ipaws-status-live,.no-ipaws.test .ipaws-status-live{
    margin-left:-23px;
    background:#24667b
}
.short-message-content.live{
    border:3px solid #ff0102;
    background:rgb(249 250 251);
    margin-bottom: 15px;
}
.short-message-content.test{
    border:3px solid #048004;
    background:rgba(0,128,18,.06);
    margin-bottom: 15px;
}
.abcRioButton.abcRioButtonLightBlue span:first-child:after{
    content:" with Google Apps"
}
.button.assets{
    display:none;
}
/* Top toolbar styles (.tool-bar, .tool-bar-buttons, .tool-bar .button,
   .user-signed-in + the responsive breakpoints) moved to assets/css/toolbar.css
   — consolidated structure + responsive + the hamburger menu. Theme colors for
   the toolbar remain in sisa-theme-transitional.css. */

span.user_info_name,span.user_info_phone{
    position:relative;
    top:-25px;
    left:15px
}

div#logs div#file-data{
    float:left;
    margin-left:0;
    width:100%;
    background:#f2f2f2;
    height:157px;
    padding-left:10px;
    overflow:hidden;
    border:0;
    border-bottom:2px solid #ddd
}
div#logs a.selected-item-delete-btn.hidden-operator{
    display:none
}
div#log-file-tree-list{
    overflow-y:scroll;
    height:calc(100% - 200px);
    float:left;
    width:100%;
    border-top:8px solid #edefef
}
div#logs div#log-box{
    display:flex;
    height:90%;
    overflow:hidden;
    max-height:86%;
    width:94%;
    border: 0px solid #ddd;
    border-radius:10px;
}

.collapsed .log-date-sidebar{
    display:none
}
.collapsed #log-box {
    border: none !important;
}

.sent span.timestamp{
    float:right;
    position:absolute;
    bottom:-16px;
    font-size:9px;
    min-width: 400px;
    right:2px;
    text-align:right;
    font-size: 9px !important;
}
.received span.timestamp{
    float:left;
    position:absolute;
    bottom:-16px;
    font-size: 9px !important;
    left:0
}
li.alert-header span.timestamp{
    display:block;
    font-size:9px;
    color:#fff;
    margin-top:5px;
    text-align:right
}
li.alert-header{
    list-style:none;
    background-color:#0e7a90;
    color:#000;
    font-weight:700;
    text-align:center;
    width:100%;
    clear:both;
    border-radius:4px;
    margin-top:15px;
    margin-bottom:25px;
    color:#fff;
    margin-left:-8px;
    padding:27px 10px 10px;
    border-top-right-radius:20px;
    border-bottom-left-radius:20px
}
li.received{
    float:left;
    border:1px solid #ddd;
    border-radius:10px;
    background:rgba(68,158,204,.35);
    min-width:85px;
    text-align:left;
    padding:5px 25px 9px 17px;
    left:35px;
    margin-bottom:33px;
    border-bottom-left-radius:0;
    border-top-left-radius:20px;
    border-bottom-right-radius:20px;
    border-top-right-radius:0;
    max-width:70%
}
li.received,li.sent{
    list-style:none;
    position:relative
}
li.sent{
    float:right;
    border:1px solid #ddd;
    padding:10px 25px;
    border-radius:10px;
    background:#f5f5f5;
    min-width:82px;
    text-align:right;
    margin-top:10px;
    border-top-left-radius:0;
    border-bottom-left-radius:20px;
    border-top-right-radius:20px;
    border-bottom-right-radius:0;
    max-width:60%
}

.right-bar .toolbar a{
    background:rgba(51,50,50,.9);
}
.right-bar .toolbar a:hover{
    background:rgba(144,50,48,.94);
}
.action-sections,.right-bar a.selected,.right-bar a.selected:hover,.status-loggedin{
    background:rgba(33,33,33,.9)
}
.script-button.hot.always.stop-all{
    float:none;
    width:100%;
    margin-left:0;
    background-color:#af0e0e;
    margin-top:-1px;
    margin-bottom:10px;
    border:none
}
.main-actions .script-button.hot{
    background:#af0e0f
}
.script-button.hot.always.activate-pa,.script-button.hot.always.select-units{
    width: 100%;
}
.active-scripts {
    margin:0
}
.main-actions{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.right-bar hr{
    width:96%;
    margin-left:3px;
    margin-top:10px
}
.right-bar .custom-actions .buttons{
    display:table;
    padding:0 0 30px
}
.custom-actions .buttons div.script-button{
    height:50px
}
#assets,#devices,#logs,#main-box,#message-center,#regions,#reports,#roster,#roster-admin,#settings,#settings-master,#threats,#command-post{
    position:absolute;
    width:100%;
    height:calc(100% - 46px);
    top:46px;
    overflow:hidden
}

#message-center .content-window .content .alert-templates-table,
#message-center .content-window .content .alert-sent-table,
#message-center .content-window .content .alert-survey-table,
#message-center .content-window .content .alert-draft-table,
#message-center .content-window .content .alert-trash-table,
#message-center .content-window .content .alert-scheduled-table,
#message-center .content-window .content .alert-pending-table,
#message-center .content-window .content .alert-capexch-table,
#message-center .content-window .content .alert-newsletter-table {
    width: 100%;
    height: calc(100% - 110px) !important;
}

/* AG Grid containers need explicit height */
#message-center .admin-grid {
    min-height: 400px;
}

/* Portrait phones: let ag-Grid's paging footer wrap to multiple lines instead
   of overflowing its locked single-row height. Scoped to message-center, logs
   and staff grids; outranks ag-Grid's own .ag-paging-panel. */
@media (orientation: portrait) and (max-width: 768px) {
    #message-center .admin-grid .ag-paging-panel,
    #logs .logs-ag-grid .ag-paging-panel,
    #roster-admin .admin-grid .ag-paging-panel {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        min-height: 0;
        row-gap: 4px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

#assets,#devices,#logs,#message-center,#regions,#reports,#roster,#roster-admin,#settings,#settings-master,#threats,#command-post,.right-bar.wide.assets,img.leaflet-marker-icon.unit.asset{
    display:none
}

/* Default Login Page - Show correct container based on body class on initial load (before JS takes over) */
/* These use body.startup to only apply during initial page load */
body.startup.message-center #message-center,
body.startup.mobile #message-center { display: block; }
body.startup.message-center #main-box,
body.startup.mobile #main-box { display: none; }

body.startup.threats #threats { display: block; }
body.startup.threats #main-box { display: none; }

body.startup.roster-admin #roster-admin { display: block; }
body.startup.administrators #roster-admin { display: block; }
body.startup.roster-admin #main-box,
body.startup.administrators #main-box { display: none; }

body.startup.roster #roster { display: block; }
body.startup.roster #main-box { display: none; }

body.startup.rallypoint #main-box { display: block; }

div#devices,div#logs,div#message-center,div#regions,div#reports,div#roster,div#roster-admin,div#settings,div#settings-master,div#threats,div#command-post{
    background:#f9f9f9
}
body,html,html a{
    -webkit-font-smoothing:antialiased
}

.sidebar,.sidebar-header{
    box-sizing:border-box;
    background:#f9fbfb
}

.box-title{
    font-weight:700;
    color:grey;
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
    font-size:16px;
    text-align:center
}

/* Group/region headers contain an inline button ("Dynamic Group" / "Show Map").
   Lay the header out as a centered, wrapping flex row so the button keeps its
   spacing and drops cleanly to its own line on narrow widths instead of being
   cut in half. */
.box-title.groups,
.box-title.locations{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
}

div#new-message-area, div#new-template-message-area{
    border:1px solid #ddd;
    border-radius:12px;
    padding: 22px;
    background:rgba(36,102,123,.03);
}

a.delete-group,a.delete-location,a.edit-group,a.edit-location{
    font-size:21px
}
.manage-devices,.manage-logs{
    width:13%;
    margin-left:2%;
    float:left;
    background:#2a2a28;
    color:#fff;
    vertical-align:middle;
    padding:12px;
    box-sizing:border-box;
    border-radius:4px;
    height:40px;
    cursor:pointer
}

.manage-regions, .manage-groups, .manage-locations {
    display: flex;
    justify-content: center;
    color: #000000;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #d8d9d9;
    align-items: center;
    background: white;
    cursor: pointer;
    user-select: none;
}

.add-new-location, .add-new-region, .add-new-group, .add-new-device {
    display: flex;
    color: black;
    padding: 10px;
    border-radius: 4px;
    background: #ffffff;
    align-items: center;
    border: 1px solid #dcdddd;
    cursor: pointer;
    user-select: none;
}

.add-new-location:hover , .add-new-region:hover , .add-new-group:hover , .manage-regions:hover , .manage-groups:hover , .manage-locations:hover, .add-new-administrator:hover {
    background: #e6e8e7;
}

.grid-header-item {
    display: flex;
    gap: 4px;
    cursor: pointer;
    justify-content: center;
    font-size: 14px;
}

.add-new-administrator, .add-new-recipient, .export-recipients, .import-devices, .import-recipients, .import-regions, .sync-devices, .sync-roster, .add-new-device, .export-devices, .import-devices, .manage-push-devices{
    float:right;
    background:#fff;
    padding: 10px;
    border:1px solid #ddd;
    border-radius:5px;
    cursor:pointer;
    font-size:14px;
    user-select:none;
}

.add-new-administrator, .sync-administrators, .add-new-recipient, .import-recipients, .ai-import-recipients, .export-recipients, .manage-push-devices {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    background: white;
    border: 1px solid #d8d9d9;
    border-radius: 6px;
    padding: 10px;
    user-select: none;
}
.sync-administrators, .export-devices, .import-devices{
    background: #e0e0e0 !important;
    color: #888 !important;
    cursor:not-allowed
}
.sync-administrators:hover{
    background:#e0e0e0;
    color:#888;
    cursor:not-allowed;
}

#message-center .translate-alert-actions .translation-provider-select {
    width: auto;
    margin: 0;
    padding: 7px 14px;
    font-size: 12px;
    line-height: normal;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    color: #333;
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: middle;
}

#message-center .translate-alert-actions .translation-provider-select:focus {
    outline: none;
    border-color: #4a90d9;
}

.add-lang:hover,.add-new-recipient:hover,.clear-text:hover,.export-recipients:hover,.import-devices:hover,.import-recipients:hover,.ai-import-recipients:hover,.sync-devices:hover,.translate-alert:hover {
    background:#15517d;
    color:#fff;
}
.translate-alert.disabled {
    pointer-events:none;
    opacity:0.6
}

/* === Page Loader === */
#loader-wrapper{
    position:fixed;
    inset:0;
    z-index:10000000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(18,20,26,.85);
    transition:opacity .4s ease,visibility 0s linear 0s
}
#loader-wrapper .loader-spinner{
    width:40px;
    height:40px;
    border:3px solid rgba(175,14,15,.2);
    border-top-color:#af0e0f;
    border-radius:50%;
    animation:loader-spin .8s linear infinite
}
.loaded #loader-wrapper{
    opacity:0;
    visibility:hidden;
    transition:opacity .4s ease,visibility 0s linear .4s
}
@keyframes loader-spin{
    to{transform:rotate(360deg)}
}
input.disabled,select.disabled,textarea.disabled{
    background:#f5f5f5;
    color:#888585;
    font-style:italic;
    cursor:not-allowed
}
progress,progress.alert,progress.template{
    display:none;
    float:right
}
p.alert-attachment-url,p.template-attachment-url{
    font-size:12px;
    margin-top:-10px;
    margin-bottom:25px;
    margin-left:20px
}
p.alert-attachment-url a,p.template-attachment-url a{
    text-decoration:none
}
p.alert-attachment-url a:hover,p.template-attachment-url a:hover{
    color:#00008b
}
div#login label{
    display:none
}
#login input#password{
    margin-bottom:25px
}
#login input#username{
    margin-top:15px;
}
#login .wrapper{
    margin-top:12%;
    padding-bottom:80px;
    min-width:400px;
}
.form-group.ipaws-area{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-content:start;
}
.form-group.ipaws-area label{
    width:100%;
    padding:4px
}
.ipaws-content{
    background:#dbe1e2;
    border-radius:7px;
    height:100%;
    box-shadow:2px 2px 2px #d2d2d2;
    max-width:1200px
}
input#ipaws-msg-identifier,input#ipaws-msg-reference{
    width:96%;
    background:#f5f5f5
}
.ipaws-reference,.ipaws-restricted-scope{
    display:none
}
.ipaws-test .sisa-form-field{
    width:33%;
    margin:0
}
button.btn.disabled{
    font-style:italic;
    background:#a7a3a3;
    border:1px solid #867f7f;
    color:#6f6969;
    cursor:default
}
.ipaws-area-box{
    margin-top:15px
}

.ipaws-header {
    display:flex;
    justify-content: space-between;
    font-weight: bold;
}
.ipaws-connected{
    display:none;
    font-size:13px;
    color:green;
}
.ipaws-connected i{
    margin-right:4px
}
.reload-cogs i{
    font-size:15px;
    margin-right:5px
}

.ipaws-area-actions {
    display: flex;
    width: 100%;
    gap: 10px;
}
.ipaws-area-actions div i{
    margin-right:10px;
    margin-left:-15px
}
.ipaws-cogs{
    display:none
}
.alert-audio textarea,.alert-phone textarea,textarea.eas-desc,textarea.ipaws-instructions,textarea.short-desc{
    height:100px
}
.ipaws-area-selection,.ipaws-cogs-selection{
    background:#f5f5f5;
    margin-top:5px;
    margin-bottom:8px;
    height:115px;
    padding:16px;
    box-sizing:border-box;
    border-radius:8px;
    overflow:auto;
    border:1px solid #ddd
}
.ipaws-area-item{
    float:left;
    background:#fff;
    padding:6px 25px;
    border-radius:15px;
    font-size:13px;
    border:1px solid #ddd;
    margin-bottom:4px;
    margin-right:3px
}
.ipaws-area-item i{
    font-size:17px;
    margin-left:-18px;
    margin-right:10px;
    position:relative;
    top:1px;
    cursor:pointer
}
.ipaws-area-item i:hover{
    color:red
}

.ipaws-generate-xml {
    padding:10px 20px;
    color:#fff;
    text-decoration:none;
    border-radius:5px;
    margin-top: 10px;
    text-align: center;
}

.ipaws-msg-identifier,.ipaws-msg-restriction{
    width:96%;
    background:#f5f5f5;
}

#main-box .right-bar .custom-actions .buttons{
    display:block
}
#filters input{
    width:20px;
    top:4px;
    position:relative;
    margin-bottom:0;
    margin-top:0
}
[contenteditable]{
    -webkit-user-select:text;
    user-select:text
}

.config-labels-container {
    width: 100%;
}
.config-labels-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.config-labels-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.config-table-container {
    width: 100%;
}
.config-table-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.config-table-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.save-result,.save-result-options{
    display:none;
    float:right;
    margin-top:35px;
    margin-right:41px;
    padding:11px 25px;
    background:green;
    color:#fff;
    border:1px solid #ddd
}
.save-buttons{
    position:fixed;
    bottom:223px;
    height:55px;
    width:62.4%;
    background:#ddd;
    padding:0;
    border:1px solid #bfb1b1;
    margin-left:-1px;
    overflow:hidden
}
.show-hide-advanced-settings-button{
    float:left;
    cursor:pointer;
    margin-left:10px;
    background:green;
    padding:8px 27px;
    margin-right:6px;
    border:1px solid #ddd;
    color:#fff;
    border-radius:6px;
    margin-top:10px
}
.show-hide-advanced-settings-button.enabled{
    background:#9a0333;
    padding:8px 29.7px
}
.show-hide-advanced-settings-button:hover{
    background:#3ba712
}
.show-hide-advanced-settings-button.enabled:hover{
    background:#ef2c6a
}

form.app-info{
    padding:28px;
    border:1px solid #ddd;
    box-sizing:border-box;
    margin-top:-1px
}
.description{
    text-align:justify;
    font-size:15px;
    font-family:calibri;
    color:#404040;
    background:rgba(36,102,123,.03);
    margin-top:-5px;
    border:1px solid #ddd;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    padding:18px 15px 15px 26px
}
.description,.save-settings{
    width:100%;
    box-sizing:border-box
}
.save-settings{
    text-align:right;
    background:#f5f5f5;
    padding:10px 80px;
    border:1px solid #ddd;
    margin-top:-1px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px
}
.sms-from,.sms-msg{
    text-align:left;
    padding-left:25px
}
.sms-msg{
    font-weight:700
}

.settings-box-master {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.leaflet-control-scale.leaflet-control{
    bottom:38px;
    left:151px
}
.leaflet-control-layers-separator{
    display:none;
}
.copy-to-empty.call,
.copy-to-empty.sms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    color: var(--text-dark, #0b0d0d);
    background: transparent;
    transition: background 150ms ease, color 150ms ease;
}
.copy-to-empty.call:hover,
.copy-to-empty.sms:hover {
    color: var(--accent-primary, #af0e0f);
    background: rgba(0, 0, 0, 0.06);
}
input#admin-approval-required-other{
    width:82%
}
span.device-bubble{
    font-size:13px;
    padding: 3px 8px;
    border-radius:11px
}
input#alert-pre-message-ar,input#alert-sms-message-ar,input#alert-subject-ar, textarea#alert-phone-msg-ar,textarea#alert-tts-ar{
    direction:rtl
}

.vertical-bar-seperator{
    position:center;
    height: 1px;
    width: 100%;
    background-color:#ccc;
    margin:0 10px;
}

#logs .sidebar-header h2{
    font-size:18px;
    margin-top:10px;
    margin-bottom: 22px;
}

#logs .sidebar-header {
    box-sizing: border-box;
    padding-bottom: 0;
    margin-bottom: -25px;
    padding-top: 15px;
}
#logs .sidebar-body {
    padding-left: 10px
}

.log-date-sidebar {
    width: 100%;
    overflow-y: auto;
    border: none;
    background:transparent;
    padding: 5px;
    box-sizing: border-box;
}
.log-date-item {
    padding: 10px;
    margin: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: 43px
}
.btn-delete-template{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px
}
.awxgl-control-legend{
    display:none;
    left:261px;
    right:auto;
    bottom:72px;
    width:416px;
    background:#dde8e9;
    color:#1d1616
}

div#msg-type-area{
    width:100%;
    margin-bottom:28px;
}
div#msg-type-area label{
    margin-left:7px;
    font-weight:800
}

.msg-type-area-container {
    display: flex;
    flex-wrap: wrap;
}

.channel.alert,.channel.emergency,.channel.newsletter,.channel.survey,.channel.ticket{
    max-width: 180px;
}

div#ui-datepicker-div{
    z-index: 999 !important;
    box-sizing: border-box;
}

.xweather-settings{
    display:flex;
    flex-direction:column;
    gap:1rem
}
.xweather-settings > div{
    width:100%
}

.alert-socials, .pa-message {
    border: 5px solid #3e2944;
    background: #dbe1e2;
    border-radius: 4px;
    margin-bottom: 15px;
    box-sizing: border-box;
    padding: 15px;
}
.action-type-select {
    background: #fff;
    margin-top: 15px;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 5px
}
#new-message-area{
    position:relative
}
.message-area-loading{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:hsla(0,0%,100%,.8);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:100;
    border-radius:12px
}
.loading-spinner{
    width:50px;
    height:50px;
    border:5px solid #f3f3f3;
    border-top-color:#24667b;
    border-radius:50%;
    animation:spin 1s linear infinite
}
.badge-marker{
    text-align:center
}
.badge-icon{
    background:#3498db;
    border-radius:10px;
    padding:5px;
    color:#fff;
    display:flex;
    align-content:center;
    justify-content:center
}
.badge-sos{
    background:red;
    box-shadow:0 0 10px red;
    animation:pulse 1.5s infinite;
    transform-origin:center;
    border:2px solid #fff
}
.badge-battery{
    position:absolute;
    bottom:-12px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.7);
    padding:2px 4px;
    border-radius:3px;
    font-size:10px
}
.badge-popup{
    padding:5px;
    background:#fff;
    border-radius:3px
}
.badge-popup h4{
    margin:0 0 5px;
    color:#3498db
}
.badge-popup p{
    margin:2px 0
}
.popup-sos{
    background:#fff0f0;
    border:2px solid red;
    box-shadow:0 0 5px rgba(255,0,0,.3)
}
.popup-sos h4{
    color:red;
    font-weight:700
}
.popup-sos p{
    color:#d63031
}
.unit-data-box{
    display:none;
    scrollbar-width:thin
}
#loader2{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:hsla(0,0%,100%,.8);
    z-index:10000000;
    display:flex;
    justify-content:center;
    align-items:center
}
#loader2 .spinner{
    display:block;
    position:relative;
    width:150px;
    height:150px;
    border-radius:50%;
    border:3px solid transparent;
    border-top-color:#3498db;
    -webkit-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite
}
#loader2 .spinner:before{
    content:"";
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:5px;
    border-radius:50%;
    border:3px solid transparent;
    border-top-color:#e74c3c;
    -webkit-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite
}
#loader2 .spinner:after{
    content:"";
    position:absolute;
    top:15px;
    left:15px;
    right:15px;
    bottom:15px;
    border-radius:50%;
    border:3px solid transparent;
    border-top-color:#f9c922;
    -webkit-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite
}
.groupLocationWrapper{
    max-height:62px;
    overflow-y:scroll;
    padding:10px;
    margin-top: -13px;
}
.channelWrapper{
    min-width:216px
}
i.fa.fa-plus-circle{
    margin-right:10px
}
b.ipaws_type{
    font-size:18px
}
b.ipaws_type.test{
    background:green
}
b.ipaws_type.live,b.ipaws_type.test{
    color:#fff;
    padding:10px;
    margin-bottom:-15px
}
b.ipaws_type.live{
    background:red
}
.right-bar-content::-webkit-scrollbar{
    display:block;
    width:15px;
}
.right-bar-content::-webkit-scrollbar-track{
    background:#3e3e3e;
    width:38px;
    border:.5px solid #646161;
    border-radius:5px;
}
.right-bar-content::-webkit-scrollbar-corner{
    background:green
}
.right-bar-content::-webkit-scrollbar-thumb{
    background:#af0d10;
    border-radius:4px;
    border:2px solid #cc7c7c;
    width:24px;
}
.sidebar-header .clear{
    height:5px
}
.right-bar-queue hr{
    width:98%
}
.custom-scripts .buttons{
    padding:0;
    display:flex;
    flex-direction:column
}
.emns-system-templates{
    padding-bottom:10px;
    display:flex;
    flex-direction:column;
    padding-left:2px;
    padding-top:5px
}

.right-bar span.select2.select2-container.select2-container--default{
    width: 100% !important;
}

span.select2-selection.select2-selection--single{
    border-radius:0
}
.emns-system-templates .select2-container .selection{
    border-radius:11px;
}
.emns-system-templates .select2-container .select2-selection{
    border-radius:28px;
    font-weight:700
}
.custom-scripts .script-button.divider-emns,.script-button.divider-pa-system{
    font-size:15px;
}
div#DataTables_Table_4_processing{
    background:rgba(91,11,11,.52);
    height:100%;
    top:119px;
    margin:0;
    left:0;
    color:#fff
}
.sidebar-body{
    height:calc(100% - 155px);
    overflow-x:hidden;
    overflow-y:scroll;
    box-sizing:border-box;
    min-height:500px;
    margin-top: 5px;
}
.sidebar-footer{
    position:absolute;
    bottom: 45px;
    background:#3e2944;
    width:100%;
    text-align:left;
    left:0;
    color:#fff;
    padding:13px;
    text-align:center;
    cursor:pointer;
    font-size:26px;
    box-sizing:border-box
}
.demo-mode .sidebar-footer{
    bottom:70px;
}
.sidebar-footer:hover{
    background:#000
}
.collapse-sidebar i{
    margin-right:10px
}
 #sisa table.dataTable {
    height:calc(100% - 100px);
    max-height:100%;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    word-wrap: break-word;
    border-top: 1px solid #DDD;
    padding-top: 6px;
}
#sisa table.dataTable tbody{
    overflow-y: auto;
    width:100%;
    height:calc(100% - 50px);
    flex-direction:column
}
#sisa table.dataTable tbody tr{
    width:100%;
    display:flex;
    flex-direction: row;
    box-sizing:border-box;
    min-height:55px;
    margin-bottom:0;
    gap:0;
    margin-top:0;
    max-height:300px;
    overflow:hidden
}
#sisa table.dataTable thead tr{
    display:flex
}
table.dataTable.nowrap td.child{
    width:100%;
    display:block;
    padding:25px;
    box-sizing:border-box;
    min-width:100%;
    max-width:100%;
    border:0;
}
table.dataTable>tbody>tr.child ul.dtr-details{
    display:flex;
    flex-direction:column;
    width:100%;
    min-width:100%;
    max-width:100%;
    margin-top: 0px;
    padding-top: 0px;
    background: #DDD;
}
table.dataTable>tbody>tr.child ul.dtr-details li{
    display:flex;
    height:100%;
    min-height:50px;
    width:100%;
    flex-direction:row;
    padding-top: 10px;
    padding-bottom: 25px;
}
.roster-admin table.dataTable.nowrap tbody tr td:nth-Child(3),.roster-admin table.dataTable.nowrap thead tr th:nth-Child(3){
    min-width:350px !important;
    width:100%;
}
.roster-admin table.dataTable.nowrap tbody tr td:nth-Child(4),.roster-admin table.dataTable.nowrap tbody tr td:nth-Child(5),.roster-admin table.dataTable.nowrap thead tr th:nth-Child(4),.roster-admin table.dataTable.nowrap thead tr th:nth-Child(5){
    min-width:100px;
    width:100px;
}
.roster-admin table.dataTable.nowrap tbody tr td:nth-Child(6),.roster-admin table.dataTable.nowrap tbody tr td:nth-Child(7),.roster-admin table.dataTable.nowrap thead tr th:nth-Child(6),.roster-admin table.dataTable.nowrap thead tr th:nth-Child(7){
    min-width:100px;
    width:100%;
}
.roster-admin table.dataTable.nowrap tbody tr td:nth-Child(8),.roster-admin table.dataTable.nowrap thead tr th:nth-Child(8){
    min-width:140px;
    width:140px;
    display: flex;
    justify-content: center;
}
.alert-sent-table table.dataTable.nowrap tbody tr td:nth-Child(6),.alert-sent-table table.dataTable.nowrap thead tr th:nth-Child(6){
    min-width:140px;
    width:140px;
    display: flex;
    justify-content: center;
}
.threats table.dataTable.nowrap tbody tr td:first-child,.threats table.dataTable.nowrap tbody tr td:nth-Child(2),.threats table.dataTable.nowrap thead tr th:first-child,.threats table.dataTable.nowrap thead tr th:nth-Child(2){
    min-width:150px;
}
.threats table.dataTable.nowrap tbody tr td:nth-Child(3), .threats table.dataTable.nowrap thead tr th:nth-Child(3){
    min-width: 150px;
}
.logs table.dataTable.nowrap thead tr th,.logs table.dataTable tbody tr td{
    min-width:75px;
    width:100%;
}
.logs table.dataTable tbody tr td:nth-Child(4),.logs table.dataTable thead tr th:nth-Child(4){
    min-width:900px;
    width:100%;
}
.devices table.dataTable.nowrap tbody tr td{
    min-width: 75px;
    width: 75px;
    padding-top:20px;
    box-sizing:border-box
}
.devices table.dataTable.nowrap tbody tr td:nth-Child(5),.devices table.dataTable.nowrap tbody tr td:nth-Child(6),.devices table.dataTable.nowrap tbody tr td:nth-Child(7),.devices table.dataTable.nowrap tbody tr td:nth-Child(8),.devices table.dataTable.nowrap thead tr th:nth-Child(5),.devices table.dataTable.nowrap thead tr th:nth-Child(6),.devices table.dataTable.nowrap thead tr th:nth-Child(7),.devices table.dataTable.nowrap thead tr th:nth-Child(8){
    min-width:200px;
    width:100%;
}
#sisa table.dataTable>tbody>tr.child{
    height:auto;
}
tr.child td.child ul li span.dtr-title{
    padding-top:11px;
}
span.dtr-data{
    padding-top:13px
}
.roster-admin .sidebar-header{
    margin-bottom:0;
    padding:13px;
    margin-top:40px;
}
.custom-group-box table td,.custom-group-box table th,.custom-group-box table tr{
    width: 100% !important;
    min-width:25px;
    padding:0;
    max-height:50px;
    box-sizing:border-box
}
.custom-group-box table td:first-child,.custom-group-box table th:first-child{
    width:50px !important;
    min-width:50px;
}
#sisa .custom-group-box table tbody{
    height:calc(100% - 85px);
    border-bottom:2px solid #ddd
}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.ui-draggable.ui-resizable.custom-group-box-dialog{
    height:100%;
    top:0;
    width: 80% !important;
}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.ui-draggable.ui-resizable.custom-group-box-dialog .custom-group-box.ui-dialog-content.ui-widget-content{
    height:calc(100% - 140px);
    max-height:unset;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0px;
}
#sisa .ui-dialog.custom-group-box-dialog div.dataTables_wrapper{
    height:calc(100% - 10px);
    max-height:100%;
    overflow:hidden;
    box-sizing:border-box
}
.ui-dialog.custom-group-box-dialog tbody tr td:first-child:before{
    margin-top:4px
}
.ui-dialog.custom-group-box-dialog tbody tr td:first-child:after{
    margin-top:-11px
}
table.recipient-count tbody td:first-child{
    text-align:left
}
.ag-wrapper.ag-input-wrapper.ag-text-field-input-wrapper input{
    background:#fff;
    padding-left:25px;
}
.ag-wrapper.ag-input-wrapper.ag-text-field-input-wrapper:before{
    top:50%;
    transform:translateY(-50%);
}
.ag-header-cell.ag-floating-filter{
    padding-top:10px
}
.ag-header-cell.ag-floating-filter input{
    height:34px
}
body.split section.alert-end-info-section{
    margin-left:0;
    margin-right:0;
}
span.select2.select2-container.select2-container--default{
    margin-right: 0px;
    /* float: none; */
}

.view-recipient-list{
    display: flex;
}

.view-recipient-list-button{
    background: #af0e0f !important;
    color: #fff !important;
}

.view-recipient-list-button:hover{
    background: #ab7c7c;
}

.map-center-controls{
    border:1px solid #ddd;
    background-color:#f5f5f5
}
#layer-preview-map{
    display:none
}
a.toggle-group-visibility.eye-slash:hover,a.toggle-group-visibility.eye:hover{
    background:#095b55;
    color:#fff;
    border-radius:4px
}
.group-actions a{
    font-size:12px;
    padding:6px 8px;
    margin-top:4px;
    text-decoration:none
}
a.toggle-group-default:hover{
    background:green;
    color:#fff;
    border-radius:5px
}
a.toggle-group-default .fa-check{
    font-size:22px
}
.group-actions a i{
    font-size:23px;
    position:relative
}

.group-actions a{
    display:flex;
    flex-direction:column;
    text-align:center;
    gap:0;
    flex:1 1 0;
    min-width:0;
    box-sizing:border-box
}
a.toggle-group-notification:hover{
    background:red;
    color:#fff;
    border-radius:5px
}
a.toggle-group-visibility.eye-slash{
    color:red
}
a.toggle-group-visibility.eye{
    color:green
}
a.toggle-group-default.auto-disabled{
    color:red
}
a.toggle-group-default.auto-enabled{
    color:green
}
a.toggle-group-notification.ignore-region-disabled{
    color:red
}
a.toggle-group-notification.ignore-region-enabled,a.toggle-group-read-only.read-only-enabled{
    color:green
}
a.toggle-group-read-only.read-only-disabled{
    color:red
}
a.qr-code-viewer{
    border-left:1px solid #ddd;
    border-radius:0
}
a.toggle-group-default.auto-disabled:hover,a.toggle-group-default.auto-enabled:hover,a.toggle-group-notification.ignore-region-disabled:hover,a.toggle-group-notification.ignore-region-enabled:hover{
    color:#fff
}
a.toggle-group-admin-notify.admin-notify-disabled{
    color:red
}
a.toggle-group-admin-notify.admin-notify-enabled{
    color:green
}
a.toggle-group-admin-notify.admin-notify-disabled:hover,a.toggle-group-admin-notify.admin-notify-enabled:hover{
    color:#fff
}
a.toggle-group-read-only.read-only-disabled:hover,a.toggle-group-read-only.read-only-enabled:hover{
    color:#fff;
    background:grey;
    border-radius:5px
}
.group-edit-box-header-legend{
    display:flex;
    flex-direction:row;
    gap:10px
}
.group-edit-box-header-legend div{
    gap:10px
}
.group-edit-box-header-legend-items{
    display:flex;
    gap:5px;
    width:97%;
    background:#f5f5f5;
    padding:10px;
    box-sizing:border-box;
    border-radius:5px;
    border:1px solid #ddd;
    margin-top:10px;
    text-align:center;
    flex-wrap:wrap
}
.group-edit-box-header-legend-items p{
    display:flex;
    flex-direction:column;
    font-size:12px;
    gap:7px;
    flex-wrap:wrap;
    flex:1;
    min-width:23%;
    background:#fff;
    padding:10px;
    box-sizing:border-box;
    margin:0
}
.group-edit-box-header-legend-items p i{
    font-size:22px
}
.group-edit-box-header-legend-items p.green{
    color:green
}
.group-edit-box-header-legend-items p.red{
    color:red
}
.msg-type-area-container .channel {
    min-width: 220px;
}
.evacuation-zone-input-group {
    margin-top: 15px;
}
.content div#options .settings {
    margin-top: 20px;
}

#sisa #roster .ag-body-viewport::-webkit-scrollbar, #roster-admin .ag-body-viewport::-webkit-scrollbar, #message-center .ag-body-viewport::-webkit-scrollbar {
    width: 15px !important;
}

div#recipient-grid {
    height: calc(100% - 140px) !important;
}

div#administrator-grid {
    height: calc(100% - 110px) !important;
}

/* Staff grid: flex-fill remaining height instead of the brittle calc above,
   which collapsed the grid to 0 data rows on short (landscape) viewports. */
#roster-admin .content {
    display: flex;
    flex-direction: column;
}
#roster-admin .grid-header {
    flex: 0 0 auto;
}
#roster-admin div#administrator-grid {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
}

/* Landscape phones: trim the 55/45px .content padding that (with ag-Grid's
   header+footer chrome) left the grid body 0px tall, hiding all staff rows. */
@media (max-height: 600px) {
    #roster-admin .content {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.ag-body-viewport,.ag-center-cols-viewport,.ag-header-viewport, .ag-root-wrapper-body.ag-layout-auto-height.ag-focus-managed {
    -ms-overflow-style: unset;
}

.grid-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
}

.grid-header-title {
    font-size: 1.5em;
    font-weight: 600;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: 0px;
    flex: 2;
    text-align: left;
    padding-left: 0px;
}

.nogv div#legend {
    display: none;
}

.export-devices i.fa {
    padding-right: 10px;
}

#threats .content {
    overflow-y: scroll;
    overflow-x: hidden;
}

.send-groups.disabled .select-group, .send-locations.disabled .select-location, .send-groups-container.disabled .select-group, .send-locations-container.disabled .select-location {
    background: #a5a5a5;
    font-style: italic;
    color: #676363;
    cursor: default;
}

.send-groups.disabled #group-search-box, .send-locations.disabled #location-search-box, .send-groups-container.disabled #group-search-box, .send-locations-container.disabled #location-search-box {
    background: #a5a5a5;
    cursor: default;
}

.send-groups.disabled, .send-locations.disabled, .send-groups-container.disabled, .send-locations-container.disabled {
    background: #DDD;
    opacity: .4;
    overflow: auto;
    padding: 13px 0px;
    border-radius: 14px;
    margin-top: 15px;
    cursor: not-allowed !important;
}

.send-groups.disabled .clear-search, .send-locations.disabled .clear-search, .send-groups-container.disabled .clear-search, .send-locations-container.disabled .clear-search {
    display: none;
}

.box-header.disabled {
    opacity: .2;
    cursor: default !important;
}

.box-header.disabled span {
    background: #686868 !important;
    font-style: italic !important;
    cursor: default !important;
}

.box-header.disabled span:hover {
    background: #686868 !important;
    font-style: italic !important;
    cursor: default !important;
}
.ipaws-area-item i.fa-map-o:hover {
    color: black !important;
    cursor: default;
}

.unit-info-box.small.wide {
    width: 290px;
}

.maplibregl-popup-content:has(> .unit-info-box), .maplibregl-popup-content:has(> .zones) {
    background: #fff !important;
    border-radius: 15px;
}

.maplibregl-popup-content .zones {
    display: flex;
    flex-direction: column;
    margin-left: -5px;
    padding-right: 20px;
}

.maplibregl-popup-content .zones .zone-title {
    margin-bottom: 25px;
}

.unitTypeSmall .label {
    font-size: 12px !important;
    font-weight: 300 !important;
    margin-bottom: 5px;
    margin-top: -15px;
}

.zone-selector:hover {
    background: #635762;
}

.threats table.dataTable.nowrap tbody tr td.child {
    margin-top: 0px !important;
    padding-top: 0px;
    border-left: 3px solid #007bff !important;
    padding-left: 12px;
    padding-bottom: 0px !important;
    border-top: 1px solid #dde2eb;
}

.context-menu {
    position: absolute;
    z-index: 999;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    display: none; /* hidden by default */
    min-width: 180px;
    font-family: Arial, sans-serif;
    font-size: 14px;
  }

  /* Remove default list styling */
  .context-menu ul {
    list-style: none;
    margin: 0;
    padding: 4px 0;
  }
  .context-menu li {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .context-menu li i {
    margin-right: 8px;
    width: 18px;        /* fix width so text always lines up */
    text-align: center; /* center the icon in that fixed width */
    color: #555;        /* icon color */
    font-size: 16px;
  }
  .context-menu li span {
    flex: 1;
  }
  .context-menu li:hover {
    background-color: #f0f0f0;
  }
  /* Optionally change icon color on hover */
  .context-menu li:hover i {
    color: #000;
  }

  .recipient-list-selection-container {
    padding: 6px 8px;
    background: #fbfbfb;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 4px 4px 0px 0px;
    border: 1px solid #e0e1e1;
    justify-content: space-between;
}

.recipient-list-section-start {
    display: flex;
    gap: 10px;
}

.recipient-list-selector-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.recipient-list-selection-container select {
    width: unset !important;
    height: unset !important;
    padding: 8px 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background: white !important;
    margin-top: 0px !important;
}
.recipient-afn-toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.recipient-afn-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.recipient-afn-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.recipient-afn-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.recipient-afn-toggle-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: #cfcfcf;
    border-radius: 24px;
    transition: background-color 0.25s ease;
}

.recipient-afn-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.recipient-afn-toggle-switch input:checked + .recipient-afn-toggle-slider {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #c41415 100%);
}

.recipient-afn-toggle-switch input:checked + .recipient-afn-toggle-slider::before {
    transform: translateX(20px);
}

.recipient-afn-toggle-switch input:focus-visible + .recipient-afn-toggle-slider {
    box-shadow: 0 0 0 3px rgba(175, 14, 15, 0.25);
}

.recipient-list-actions {
    margin-left: auto;
}

.recipient-list-actions button {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}

#recipient-grid .ag-root-wrapper {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: none;
}

.channel-options { grid-area: channels; }
.group-options { grid-area: groups; }
.location-options {grid-area: locations;}

#msg-options-area {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns by default */
    grid-template-areas: "channels groups locations";
    gap: 16px; /* adjust as needed */
    padding: 0;
    margin: 0;
}

/* Medium screens: 2 rows, first row 1 column, second row 2 columns */
@media (max-width: 1100px) {
    #msg-options-area {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "channels channels"
            "groups locations";
    }
}

/* Small screens: 1 column */
@media (max-width: 800px) {
    #msg-options-area {
        grid-template-columns: 1fr;
        grid-template-areas:
            "channels"
            "groups"
            "locations";
    }

    .recipient-list-selector-group {
        gap: 0px;
        flex-direction: column;
    }

    div#new-message-area, div#new-template-message-area {
        padding: 10px;
    }

    .recipient-list-section-start {
        flex-direction: column;
    }
}

/* Handling split mode */
body.split #msg-options-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "channels channels"
        "groups locations";
    gap: 40px;
}

@media (max-width: 1250px) {
    body.split #msg-options-area {
        grid-template-columns: 1fr;
        grid-template-areas:
            "channels"
            "groups"
            "locations";
    }
}

input#group-search-box, input#location-search-box {margin-left: 0; width: auto;}

.hide-technician.activate-alarm-parent, .hide-technician.activate-stream-parent {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4px;
}
.send-groups.disabled, .send-locations.disabled {
    overflow: hidden;
    padding-left: 12px;
}

.disabled .select-group.all_groups, .disabled .select-location.all_locations {
    margin-left: 18px;
}
.send-groups-container .select-group.all_groups, .send-locations-container .select-location.all_locations {
    display: block !important;
}
p.remaining.over {
    color: red;
    font-weight: bolder;
}

input.over {
    border: 2px solid red;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.confirm-alarm-dialog.ui-dialog-buttons.ui-draggable {
    max-width: 1200px;
    border-radius: 8px;
    min-width: 680px;
}

.alert-end-time-container {
    display: flex;
    flex-direction: column;
}

.alert-end-time-container-title {
    font-size: 15px;
    margin-right: 10px;
    font-family: 'Calibri', sans-serif;
    color: grey;
}

.alert-end-time-container-title.text-danger {
    font-weight: 600;
    background: red;
    color: white;
    padding: 2px;
}

.ipaws-status-container {
    display: grid;
    grid-template-columns: 2fr 2fr;
}

.app-info.ipaws {
    padding: 20px;
}

section.alert-message-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

section.alert-message-section.has-ipaws {
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);
}

/* Mobile: single column when screen is too narrow */
@media (max-width: 768px) {
    section.alert-message-section.has-ipaws {
        grid-template-columns: 1fr;
    }
    
    /* Ensure content areas properly constrain to mobile width */
    section.alert-message-section .form-group {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    section.alert-message-section .form-group.ipaws-area {
        max-width: 100%;
        overflow-x: auto;
    }
    
    section.alert-message-section .alert-message-tabs {
        max-width: 100%;
        overflow-x: auto;
    }
}

body.split section.alert-message-section.has-ipaws {
    grid-template-columns: 1fr;
}

.popup-alert-targets {
    padding: 15px 0px;
}

.alert-target-warning {
    background: red;
    color: white;
    padding: 6px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.popup-alert-targets .scriptLineBreakdown {
    padding: 0px;
    border: 0px !important;
}

.edit-alert-link {
    cursor: pointer;
    color: white;
    padding: 4px;
    border: 1px solid #fff;
}

.edit-alert-link:hover {
    background: #000;
    color: white;
}

div.msg-options-area-wrapper.group-options.all-locations {
    width: 200%;
}

.sidebar .item.selected:hover {
    color: white;
    background: black;
}


.manage-push-device-groups-inline {
    height: 48px;
    padding-top: 16px !important;
    box-sizing: border-box;
}

span.select2-selection__clear {
    margin-top: 8px !important;
    font-size: 20px !important;
}

span.select2-selection__choice__remove {
    margin-top: -15px !important;
    margin-left: 0px !important;
    margin-right: 8px !important;
    position: relative;
    top: 1px;
    font-size: 21px !important;
}



/* Pending Approvals Table */
.alert-pending-table {
    display: none;
}

/* Import Private Recipients Dialog (jQuery UI) */
.import-recipients-dialog .ui-dialog-buttonset button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.import-recipients-dialog .import-option-radio:hover {
    border-color: #3d3e3e;
    background: #f5f5f5;
}

/* Live radius tooltip during circle drawing */
.live-radius-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    z-index: 1001;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.live-radius-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent rgba(0, 0, 0, 0.85) transparent transparent;
}

.live-radius-value {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Floating radius input that appears after placing circle center */
.floating-radius-input {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 7px 10px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    z-index: 1001;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    pointer-events: none;
}

.floating-radius-input::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent rgba(0, 0, 0, 0.85) transparent transparent;
}

.floating-radius-input label {
    margin: 0;
    font-size: 13px;
    color: #ccc;
}

.floating-radius-input input[type="number"] {
    flex: 1;
    width: 48px;
    min-width: 48px;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    outline: none;
    pointer-events: auto;
    -moz-appearance: textfield;
}

.floating-radius-input input[type="number"]::-webkit-outer-spin-button,
.floating-radius-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.floating-radius-unit-label {
    font-size: 11px;
    color: #9ab;
}

.floating-radius-row {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 4px;
}

/* Pills stack vertically, one unit per line, all equal width */
.floating-radius-fields {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

/* Each unit is a compact pill: number left, unit suffix right */
.floating-radius-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 3px 6px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #222;
    pointer-events: auto;
    cursor: text;
}

.floating-radius-field:focus-within {
    border-color: #4a90d9;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.3);
}

.floating-radius-hint {
    align-self: center;
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    color: #aaa;
    white-space: pre-line;
}

.radius-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    width: 100%;
}

.radius-input:focus {
    outline: none;
    border-color: #4a90d9;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
}

/* Circle-from-Coordinates Modal */
.circle-coords-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-coords-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.circle-coords-dialog {
    position: relative;
    width: 280px;
    max-width: 90%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
}

.circle-coords-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #4a90d9;
    color: #fff;
}

.circle-coords-title {
    font-weight: 600;
    font-size: 14px;
}

.circle-coords-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.circle-coords-close:hover {
    opacity: 0.8;
}

.circle-coords-body {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.circle-coords-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.circle-coords-field label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.circle-coords-radius-row {
    display: flex;
    gap: 6px;
}

.circle-coords-radius-row .radius-input:first-child {
    flex: 1;
}

.circle-coords-radius-row select.radius-input {
    flex: 0 0 60px;
    padding: 6px 4px;
}

.circle-coords-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* Location unblock dialog content (inside jQuery UI dialog) */
.geolocation-unblock-steps {
    margin-top: 8px;
}

.geolocation-unblock-browser {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.geolocation-unblock-browser:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.geolocation-unblock-browser strong {
    display: block;
    margin-bottom: 4px;
}

.geolocation-unblock-browser ol {
    margin: 4px 0 0 0;
    padding-left: 20px;
}

.geolocation-unblock-browser li {
    margin-bottom: 2px;
}

/* ZIP Code Targeting Section */
.zip-code-options {
    margin-top: 10px;
}

.zip-code-options .box-header {
    background: #2d3e50;
    padding: 10px 15px;
    border-radius: 4px 4px 0 0;
}

.zip-code-options .box-title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.zip-code-options .box-title i {
    margin-right: 8px;
}

.zip-codes-container {
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.zip-code-help {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

/* Grid Header Controls - Export buttons and search bar */
.grid-header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    justify-content: flex-end;
}

.export-buttons {
    display: flex;
    gap: 8px;
}

.btn-export {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-export:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
}

.btn-export:active {
    background: #dee2e6;
}

.btn-export i {
    font-size: 14px;
}

/* Create Folder button — blue, sits inline with the export buttons.
   Use .btn.btn-create-folder so it beats the later-loaded .btn rule in
   sisa-theme-transitional.css (which sets background-color: transparent). */
.btn.btn-create-folder {
    background: #2d6cdf;
    border: 1px solid #2d6cdf;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.btn.btn-create-folder:hover {
    background: #2257bd;
    border-color: #2257bd;
    color: #fff;
}
.btn.btn-create-folder:active { background: #1d4ea3; }
.btn.btn-create-folder i { font-size: 14px; }

/* Move to Folder bulk action — outlined, sits next to Create Folder, disabled
   until one or more templates are selected. */
.btn.btn-move-to-folder {
    background: #fff;
    border: 1px solid #2d6cdf;
    color: #2d6cdf;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.btn.btn-move-to-folder:hover { background: #eef4ff; color: #2257bd; }
.btn.btn-move-to-folder i { font-size: 14px; }
.btn.btn-move-to-folder:disabled,
.btn.btn-move-to-folder[disabled] {
    background: #f1f3f5;
    border-color: #d7dee6;
    color: #aab4be;
    cursor: not-allowed;
}

/* Folder rows inside the Templates grid — text matches normal rows, only the icon stands out */
.template-folder-cell {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.template-folder-cell i.fa-folder-o { color: #5a7184; }
.template-folder-count { color: #98a6b3; }

/* The pinned-right Actions header is offset by a fixed 15px (it assumes a
   vertical scrollbar is always present — see .ag-pinned-right-header). Now that
   templates can be filed into folders, the list is often short and has no
   scrollbar, leaving the header misaligned with the buttons column. Reserve the
   scrollbar gutter on the templates grid body so the offset always lines up. */
#message-center #template-grid .ag-body-viewport {
    overflow-y: scroll !important;
}

/* "Remove from folder" (pop-out) action button — matches the circular action buttons */
a.popout-row {
    background: #1f9d8f;
    color: #fff;
    padding: 10px;
    display: flex;
    border-radius: 100%;
    cursor: pointer;
}
a.popout-row:hover { background: #17786e; }

/* Drag a template name into a folder */
.tfb-drag-template { cursor: grab; }
.tfb-drag-template:active { cursor: grabbing; }
.tfb-drag-template.tfb-dragging { opacity: 0.45; }
/* The whole template row is draggable into a folder — hint with a grab cursor.
   Folder rows have no draggable name span, so they keep the default cursor. */
.ag-row:has(.tfb-drag-template) { cursor: grab; }
.ag-row:has(.tfb-drag-template) a { cursor: pointer; }

/* Folder row highlighted as a drop target */
.ag-row.tfb-folder-drop-hover,
.tfb-folder-drop-hover {
    background: #ecfbef !important;
    box-shadow: inset 0 0 0 2px #34c759;
}

/* Drag image shown when dragging several templates at once */
.tfb-drag-ghost {
    position: absolute;
    top: -1000px;
    left: -1000px;
    background: #2d6cdf;
    color: #fff;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Folder breadcrumb above the grid */
.template-folder-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 0.9rem;
    background: #f4f7fb;
    border: 1px solid #e3e9f1;
    border-radius: 6px;
}
.template-folder-breadcrumb .tfb-crumb-root {
    color: #2d6cdf;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}
.template-folder-breadcrumb .tfb-crumb-root:hover { text-decoration: underline; }
.template-folder-breadcrumb .tfb-crumb-sep { color: #b7c0c9; }
.template-folder-breadcrumb .tfb-crumb-current { color: #2c3e50; font-weight: 600; }

/* ===== Folder-aware template picker (send-alert flow) ===== */
.template-picker {
    position: relative;
    /* Match the original Select2 control sizing (it was the flex child here). */
    flex: 1 1 240px;
    max-width: 100%;
    min-width: 0;
}
/* Higher specificity than ".choose-template .select2-container { width:auto !important }"
   (which loads later) so the box fills the wrapper — same footprint it had as the
   original direct flex child. */
.choose-template .template-picker .select2-container {
    width: 100% !important;
    flex: none;
    max-width: 100%;
}
/* Rally Point / map right-bar EMNS picker AND ThreatSense NWS action-config picker.
   Both .emns-system-templates and .threat-action-specific-config.template-config are
   COLUMN flexboxes, so the base ".template-picker { flex: 1 1 240px }" rule would
   reserve 240px of vertical height and blow the box up (and push the dropdown panel
   off-screen). Reset it to size-to-content. Width follows the container. */
.emns-system-templates .template-picker,
.threat-action-specific-config.template-config .template-picker {
    display: block;
    flex: 0 0 auto;
}
.template-picker-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #d7dee6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 45, 61, 0.16);
    overflow: hidden;
    max-height: 360px;
    display: flex;
    flex-direction: column;
}
.template-picker-searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #eef1f4;
    color: #8896a3;
}
.template-picker-searchbar input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.9rem;
    background: transparent;
}
.template-picker-breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 0.72rem;
    color: #9aa6b2;
    border-bottom: 1px solid #f0f2f5;
    background: #fbfcfd;
}
.template-picker-breadcrumb .tpk-crumb-root { cursor: pointer; color: #2d6cdf; display: inline-flex; align-items: center; gap: 4px; }
.template-picker-breadcrumb .tpk-crumb-root.tpk-crumb-current { color: #5a6b7a; cursor: default; }
.template-picker-breadcrumb .tpk-crumb-sep { color: #c7cdd4; }
.template-picker-breadcrumb .tpk-crumb-current { font-weight: 600; color: #5a6b7a; }

/* flex:1/min-height:0 lets the list shrink inside the panel's max-height so
   overflow-y:auto actually engages and shows a scrollbar (without min-height:0
   a flex child won't shrink below content height, so the scrollbar never appears
   and rows are clipped by the panel's overflow:hidden instead). */
.template-picker-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; scrollbar-width: auto; scrollbar-color: #8896a3 #eef1f4; }
.template-picker-list::-webkit-scrollbar { width: 20px; }
.template-picker-list::-webkit-scrollbar-track { background: #eef1f4; border-radius: 7px; }
.template-picker-list::-webkit-scrollbar-thumb { background: #8896a3; border-radius: 7px; border: 3px solid #eef1f4; }
.template-picker-list::-webkit-scrollbar-thumb:hover { background: #6b7785; }
.tpk-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #e6eaef;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.tpk-row:last-child { margin-bottom: 0; }
.tpk-row:hover { border-color: #bcd0f0; background: #f7faff; box-shadow: 0 1px 4px rgba(45, 108, 223, 0.10); }
.tpk-row .tpk-icon { flex: 0 0 auto; font-size: 1.05rem; margin-top: 1px; }
.tpk-folder .tpk-icon { color: #5a7184; }
.tpk-template .tpk-icon { color: #5a7184; }
/* Wrap the full title onto multiple lines so the entire template/folder name is
   visible (was truncated with an ellipsis on a single line). overflow-wrap breaks
   absurdly long unbroken strings so they can't overflow the row. */
.tpk-name { white-space: normal; overflow-wrap: anywhere; word-break: break-word; color: #243240; }
/* Folder name sizes to its content so the count badge sits right beside it
   (instead of being pushed to the far right by a growing name). */
.tpk-row > .tpk-name { flex: 0 1 auto; }
.tpk-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tpk-details { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.74rem; color: #8896a3; }
/* Pink channel pill — matches the existing .template-channels badge */
.tpk-channels {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #dc3545;
    background: #f8e8e8;
    border: 1px solid #f5c6cb;
    border-radius: 3px;
    padding: 2px 7px;
}
.tpk-channels i { color: #dc3545; }
.tpk-row .tpk-count {
    flex: 0 0 auto;
    background: #eef1f4;
    color: #6b7785;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.74rem;
}
.tpk-row .tpk-chevron { flex: 0 0 auto; margin-left: auto; color: #b7c0c9; font-size: 0.8rem; }
.tpk-row .tpk-sub { flex: 0 0 auto; color: #8896a3; font-size: 0.76rem; display: inline-flex; align-items: center; gap: 4px; }
.tpk-empty { padding: 20px 12px; text-align: center; color: #98a6b3; font-size: 0.88rem; }

/* "Save Template To…" destination chooser (shown when saving a new template) */
.tfb-dest-list { display: flex; flex-direction: column; gap: 2px; }
.tfb-dest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid #e6e9ed;
    border-radius: 6px;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}
.tfb-dest-item:hover { border-color: #bcd0f0; background: #f7faff; }
.tfb-dest-item input[type="radio"] { flex: 0 0 auto; margin: 0; }
.tfb-dest-item i { flex: 0 0 auto; color: #5a7184; }
.tfb-dest-item .tfb-dest-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #243240; }
.tfb-dest-item .tfb-dest-hint { flex: 0 0 auto; color: #98a6b3; font-size: 0.78rem; }
.tfb-dest-item .tfb-dest-count {
    flex: 0 0 auto; background: #eef1f4; color: #6b7785;
    border-radius: 10px; padding: 1px 8px; font-size: 0.74rem;
}

/* Delete-folder choice dialog */
.tfb-delete-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.tfb-delete-choice {
    border: 1px solid #e0e5ea;
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tfb-delete-choice:hover { border-color: #2d6cdf; background: #f6f9ff; }
.tfb-delete-choice.tfb-danger:hover { border-color: #e74c3c; background: #fdf4f3; }
.tfb-delete-choice strong { font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }
.tfb-delete-choice span { font-size: 0.78rem; color: #7d8b98; }

/* DataTables custom search styling - hide default search when using custom */
.alert-sent-table .dataTables_filter,
.alert-survey-table .dataTables_filter,
.alert-draft-table .dataTables_filter {
    display: none;
}

/* Grid header title icon spacing */
.grid-header-title i {
    margin-right: 10px;
}

/* Responsive adjustments for grid header */
@media (max-width: 768px) {
    .grid-header-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .export-buttons {
        justify-content: flex-start;
    }

    .quick-filter-group {
        width: 100%;
    }
}

/* AFN Modal - Scoped overrides for inputs/selects inside flex layouts */
#afn-modal input[type="text"],
#afn-modal input[type="number"],
#afn-modal input[type="date"],
#afn-modal input[type="email"],
#afn-modal select {
    box-sizing: border-box;
    height: 36px;
    min-height: 30px;
    max-height: 40px;
    padding: 6px 10px !important;
    font-size: 14px;
    font-weight: normal;
    margin-top: 2px;
}
#afn-modal label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
    display: block;
}
#afn-modal fieldset div[style*="flex"] > div {
    min-width: 0;
}

/* ── Dynamic Variable Decoration ────────────────────────────────── */
.dvar-overlay-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}
.dvar-overlay {
    position: absolute;
    pointer-events: none;
    overflow: hidden;
    color: transparent;
    z-index: 1;
    box-sizing: border-box;
}
.dvar-decorated {
    border-bottom: 2px solid #f0c239;
    position: relative;
}
.dvar-decorated::before {
    content: attr(data-dvar-name);
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #f0c239;
    color: #333;
    font-size: 9px;
    line-height: 1.2;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    margin-bottom: 2px;
    z-index: 2;
}
.dvar-decorated::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 4px;
    transform: none;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid #f0c239;
    pointer-events: none;
    z-index: 2;
}
.dvar-marker {
    pointer-events: none;
    z-index: 2;
}
.dvar-marker-cont::before,
.dvar-marker-cont::after {
    display: none;
}
.dvar-label-toggle {
    margin: 6px 0 8px;
}
.dvar-label-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 11px;
    font-weight: normal;
    color: #777;
    user-select: none;
}
.dvar-label-toggle label:hover {
    color: #444;
}
.dvar-label-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.dvar-toggle-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.dvar-toggle-check .fa {
    font-size: 9px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s;
}
.dvar-label-toggle input[type="checkbox"]:checked + .dvar-toggle-check {
    background: #f0c239;
    border-color: #d4a82e;
}
.dvar-label-toggle input[type="checkbox"]:checked + .dvar-toggle-check .fa {
    opacity: 1;
}
.dvar-label-toggle label:hover .dvar-toggle-check {
    border-color: #aaa;
}
.dvar-hide-labels .dvar-decorated::before,
.dvar-hide-labels .dvar-decorated::after,
.dvar-hide-labels .dvar-marker::before,
.dvar-hide-labels .dvar-marker::after {
    display: none;
}
/* Logs AG-Grid */
.logs-ag-grid {
    height: calc(100% - 80px);
    width: 100%;
    min-height: 400px;
}
.logs-toolbar {
    padding: 8px 0;
    display: flex;
    gap: 6px;
}
.logs-toolbar button {
    padding: 4px 12px;
    cursor: pointer;
}
.logs-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.logs-view {
	flex: 1 1 auto;
	min-height: 0;
}
.logs-view-system {
	overflow: hidden;
}
.logs-subtabs {
	flex: 0 0 auto;
	display: flex;
	gap: 4px;
	padding: 30px 16px 0 16px;
	align-items: center;
}
.logs-subtab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #d0d5dd;
	background: #f5f6f8;
	color: #475467;
	padding: 8px 16px;
	border-radius: 6px 6px 0 0;
	border-bottom: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}
.logs-subtab:hover {
	background: #eceef2;
}
.logs-subtab.selected {
	background: #ffffff;
	color: #1d2939;
	border-color: #c0c6d0;
}
.logs-view-usage {
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	padding: 16px;
}

.form-group.recipient-area {
    width: 100%;
}

/* Manage Alert Languages Dialog */
.confirm-lang-dialog .ui-dialog-content {
    padding: 12px 16px;
}
.language-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #3a3d4a;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    background: #2a2d37;
    color: #ccc;
    transition: background 0.15s, border-color 0.15s;
}
.language-option:hover {
    background: #323542;
    border-color: #5a5d6a;
}
.language-option.selected,
.language-option:has(input:checked) {
    background: #1a3a5c;
    border-color: #3a8fd4;
    color: #fff;
}
.language-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3a8fd4;
    cursor: pointer;
    flex-shrink: 0;
}
.language-option .fa {
    font-size: 14px;
    opacity: 0.6;
}
.confirm-lang-dialog .ui-dialog-buttonpane {
    border-top: 1px solid #3a3d4a;
    padding: 10px 16px;
}
.confirm-lang-dialog .ui-dialog-buttonpane button {
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
}

/* Export Recipients modal — uses the same `.import-section-container/title/body`
   visual language as the Import Recipients modal so the two feel like siblings. */

#export-recipients-modal {
    padding: 8px 4px;
}

#export-recipients-modal .import-modal-content {
    display: block;
}

/* 2x2 grid layout: Groups | Regions on top, Filter | Estimate on bottom */
#export-recipients-modal .export-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
    align-items: start;
}

@media (max-width: 720px) {
    #export-recipients-modal .export-modal-grid {
        grid-template-columns: 1fr;
    }
}

#export-recipients-modal .export-grid-cell {
    margin-bottom: 0;
    min-width: 0; /* allow grid cells to shrink */
}

/* When the AFN filter cell is removed (AFN disabled in portal settings) the
   grid contains exactly 3 cells: Groups, Regions, Estimate. Stretch the
   Estimate (the last/3rd cell) across both columns so the grid still feels
   balanced instead of leaving an awkward empty cell. */
#export-recipients-modal .export-modal-grid > .export-grid-cell:last-child:nth-child(3) {
    grid-column: 1 / -1;
}

/* "Hand-pick" inline link in the section title — overrides any stray
   .custom-group / .custom-location styling that might collide. Implemented
   as a real <button> so click handling and accessibility are clear. */
#export-recipients-modal button.export-dynamic-group-link {
    all: unset;
    margin-left: auto;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 3px;
    transition: background 0.2s ease, color 0.2s ease;
    background: rgba(175, 14, 15, 0.08);
}
#export-recipients-modal button.export-dynamic-group-link:hover {
    background: rgba(175, 14, 15, 0.18);
}
#export-recipients-modal button.export-dynamic-group-link i {
    color: var(--accent-primary);
    font-size: 12px;
}

/* Groups/locations lists — match import .import-input borders + spacing */
#export-recipients-modal .send-groups-container,
#export-recipients-modal .send-locations-container {
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#export-recipients-modal .send-groups-container:focus-within,
#export-recipients-modal .send-locations-container:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(175, 14, 15, 0.1);
}

/* Search boxes inside the lists — match .import-input */
#export-recipients-modal .group-search-box,
#export-recipients-modal .location-search-box {
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    font-family: Calibri, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 8px;
}
#export-recipients-modal .group-search-box:focus,
#export-recipients-modal .location-search-box:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(175, 14, 15, 0.1);
}

#export-recipients-modal .clear-search {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 4px 6px;
    margin-left: -36px;
    margin-top: -2px;
    display: none;
}
#export-recipients-modal .clear-search.visible {
    display: inline-block;
}
#export-recipients-modal .clear-search:hover {
    color: var(--accent-primary);
}

/* Override sisa-theme-transitional.css:1973 which forces `.send-locations-container
   .select-location { display: block !important }`. We use flex on BOTH groups and
   regions so the row layout (checkbox + label) is consistent. */
#export-recipients-modal .send-groups-container .select-group,
#export-recipients-modal .send-locations-container .select-location {
    display: flex !important;
    padding: 12px 14px;
    margin-bottom: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    align-items: center;
    gap: 0;
    font-size: 14px;
    line-height: 1.3;
    color: #333;
    user-select: none;
}
#export-recipients-modal .select-group:hover,
#export-recipients-modal .select-location:hover {
    background: #f4f6f8;
}
#export-recipients-modal .select-group:has(input:checked),
#export-recipients-modal .select-location:has(input:checked) {
    background: rgba(175, 14, 15, 0.06);
    box-shadow: inset 2px 0 0 var(--accent-primary);
}
#export-recipients-modal .select-group.all_groups,
#export-recipients-modal .select-location.all_locations {
    font-weight: 600;
    border-bottom: 1px dashed #e0e0e0;
    margin-bottom: 4px;
    padding-bottom: 10px;
}
#export-recipients-modal .select-group input[type="checkbox"],
#export-recipients-modal .select-location input[type="checkbox"] {
    accent-color: var(--accent-primary);
    width: 17px;
    height: 17px;
    cursor: pointer;
    flex-shrink: 0;
    /* Override sisa-theme-transitional.css:1782 — legacy rule positions these
       checkboxes with top:2px / margin-top:6px / margin-right:10px, breaking
       the flex centering inside our 44px-tall tiles. Margin-right gives the
       label a guaranteed gap (flex `gap` doesn't always apply between an
       element and a sibling text node across browsers). */
    margin: 0 14px 0 0;
    padding: 0;
    top: 0;
    position: static;
    vertical-align: middle;
}

/* AFN-only toggle — large, distinctive switch */
#export-recipients-modal .export-afn-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 4px;
    cursor: pointer;
    user-select: none;
}
#export-recipients-modal .export-afn-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.3px;
}
#export-recipients-modal .export-toggle-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 30px;
    flex-shrink: 0;
}
#export-recipients-modal .export-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
#export-recipients-modal .export-toggle-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: #cfcfcf;
    border-radius: 30px;
    transition: background-color 0.25s ease;
}
#export-recipients-modal .export-toggle-slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}
#export-recipients-modal .export-toggle-switch input:checked + .export-toggle-slider {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #c41415 100%);
}
#export-recipients-modal .export-toggle-switch input:checked + .export-toggle-slider::before {
    transform: translateX(26px);
}
#export-recipients-modal .export-toggle-switch input:focus-visible + .export-toggle-slider {
    box-shadow: 0 0 0 3px rgba(175, 14, 15, 0.25);
}

/* Live estimate row */
#export-recipients-modal .export-estimate-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}
#export-recipients-modal .export-estimate-icon {
    color: var(--accent-primary);
    font-size: 16px;
    width: 20px;
    text-align: center;
}
#export-recipients-modal .export-estimate-text {
    flex: 1;
    font-size: 13px;
    color: #444;
    font-weight: 500;
}
#export-recipients-modal .export-estimate-text.export-estimate-error {
    color: #b81d1d;
    font-weight: 500;
}
#export-recipients-modal .export-estimate-spinner {
    color: #999;
    font-size: 14px;
}

/* Progress UI */
#export-recipients-modal .export-modal-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 4px 4px;
    border-top: 1px solid #eee;
    margin-top: 4px;
}
#export-recipients-modal .export-progress-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
#export-recipients-modal .export-progress-bar-wrap {
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}
#export-recipients-modal .export-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), #c41415);
    transition: width 200ms ease;
}
#export-recipients-modal .export-progress-counts {
    font-size: 12px;
    color: #666;
}

/* jQuery UI buttonset — pick out CSV/PDF action buttons */
.export-recipients-dialog .ui-dialog-buttonpane {
    background: #fafafa;
    border-top: 1px solid #e5e5e5;
}
.export-recipients-dialog .ui-dialog-buttonset button {
    margin-left: 8px;
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.export-recipients-dialog .ui-dialog-buttonset button#export-as-csv,
.export-recipients-dialog .ui-dialog-buttonset button#export-as-pdf {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #c41415 100%);
    color: #fff;
    border-color: var(--accent-primary);
}
.export-recipients-dialog .ui-dialog-buttonset button#export-as-csv:hover:not(.ui-state-disabled),
.export-recipients-dialog .ui-dialog-buttonset button#export-as-pdf:hover:not(.ui-state-disabled) {
    filter: brightness(1.08);
    box-shadow: 0 2px 6px rgba(175, 14, 15, 0.3);
}
.export-recipients-dialog .ui-dialog-buttonset button.ui-state-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.export-recipients-dialog .ui-dialog-buttonset button#export-cancel {
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
}
.export-recipients-dialog .ui-dialog-buttonset button#export-cancel:hover {
    background: #f5f5f5;
    color: #333;
}

/* IPAWS validation dialog (sectioned errors + warnings) */
.ipaws-validation-dialog .ipaws-validation-section {
    margin-bottom: 12px;
}

.ipaws-validation-dialog .ipaws-validation-errors {
    border-left: 4px solid #c0392b;
    background: #fdecea;
    padding: 8px 12px;
}

.ipaws-validation-dialog .ipaws-validation-warnings {
    border-left: 4px solid #f39c12;
    background: #fef5e7;
    padding: 8px 12px;
}

.ipaws-validation-dialog .ipaws-validation-section-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.ipaws-validation-dialog ul {
    margin: 0;
    padding-left: 20px;
}

.ipaws-validation-dialog li {
    margin-bottom: 4px;
}

/* IPAWS +ZONES dialog: horizontal click-accordion (Map · FIPS · Region).
   Palette/type lifted from the app: Calibri, surfaces #fff/#f5f5f5,
   borders #e0e0e0, ink #2f363e, muted #888, accent #c41415 (app red). */
.ipaws-zone-accordion {
    display: flex;
    gap: 6px;
    height: 488px;
    align-items: stretch;
    font-family: Calibri, sans-serif;
    color: #2f363e;
}
.ipaws-zone-panel {
    /* panel is itself a flex column (tab + body) so the body fills by flexbox,
       not by a fragile percentage height that won't resolve inside the accordion */
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 58px;
    min-width: 58px;
    overflow: hidden;
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background: #fff;
    transition: flex-grow .25s ease;
}
/* exactly one panel is open at a time (default: FIPS); click a tab to switch */
.ipaws-zone-panel.is-open { flex-grow: 1; }
/* collapsed strips read as quiet app-grey chips */
.ipaws-zone-panel:not(.is-open) { background: #f5f5f5; }
.ipaws-zone-panel:not(.is-open):hover { background: #fdeeee; border-color: #f0c4c4; }

.ipaws-zone-tab {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6b7280;
    text-align: center;
    white-space: normal;
    cursor: pointer;
    user-select: none;
}
.ipaws-zone-tab i { font-size: 17px; color: #8a93a0; }
/* a collapsed panel's tab fills the strip so the whole panel is clickable */
.ipaws-zone-panel:not(.is-open) .ipaws-zone-tab { flex: 1 1 auto; justify-content: center; }
.ipaws-zone-panel:not(.is-open):hover .ipaws-zone-tab,
.ipaws-zone-panel:not(.is-open):hover .ipaws-zone-tab i { color: #c41415; }
/* the open panel's tab becomes a header row with the accent underline (the one signature) */
.ipaws-zone-panel.is-open > .ipaws-zone-tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12px;
    color: #2f363e;
    border-bottom: 2px solid #c41415;
    background: #fffafa;
}
.ipaws-zone-panel.is-open > .ipaws-zone-tab i { color: #c41415; }

/* body: hidden while collapsed; shown when this panel is open */
.ipaws-zone-body {
    display: none;
    flex: 1 1 auto;
    min-height: 0;            /* allow the body to shrink so its overflow scrolls */
    padding: 10px 12px;
    overflow-y: auto;
    box-sizing: border-box;
    font-size: 13px;
}
.ipaws-zone-panel.is-open > .ipaws-zone-body { display: block; }
/* the region panel's body is a flex column so its county list can fill + scroll */
.ipaws-zone-panel[data-panel="region"].is-open > .ipaws-zone-body { display: flex; flex-direction: column; overflow: hidden; }

/* unify the form controls across both panels on the app palette */
.ipaws-zone-body select,
.ipaws-zone-body input[type="text"] {
    font-family: inherit;
    font-size: 13px;
    padding: 5px 7px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    color: #2f363e;
    box-sizing: border-box;
    max-width: 100%;
}
.ipaws-zone-body select:focus,
.ipaws-zone-body input[type="text"]:focus {
    outline: none;
    border-color: #c41415;
    box-shadow: 0 0 0 2px rgba(196, 20, 21, .15);
}
.ipaws-zone-body button {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 13px;
    border: none;
    border-radius: 4px;
    background: #c41415;
    color: #fff;
    cursor: pointer;
}
.ipaws-zone-body button:hover { background: #a31012; }
/* FIPS panel supporting copy */
.ipaws-zone-body .fips-desc { color: #615e5e; font-size: 12px; margin: 4px 0; }
.ipaws-zone-body .fips-close { color: #888; font-size: 11px; margin-top: 8px; }
.ipaws-zone-body hr { border: none; border-top: 1px solid #eee; margin: 8px 0; }

/* the map panel body stacks: map (fixed, shorter) · notice · selected-zones list (scrolls) */
.ipaws-zone-panel[data-panel="map"].is-open > .ipaws-zone-body { display: flex; flex-direction: column; overflow: hidden; }
.ipaws-county-map {
    width: 100%;
    height: 230px;
    flex: 0 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
.ipaws-county-map-notice {
    flex: 0 0 auto;
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 12px;
    color: #8a6d3b;
    background: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 4px;
}
.ipaws-selected-zones-label {
    flex: 0 0 auto;
    margin: 10px 0 4px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    color: #6b7280;
}
.ipaws-selected-zones {
    flex: 1 1 auto;
    min-height: 48px;
    overflow-y: auto;
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px;
    padding: 6px;
    border: 1px solid #e0e0e0; border-radius: 4px; background: #fafafa;
}
.ipaws-selected-empty { color: #9aa0a6; font-size: 12px; font-style: italic; }
.ipaws-zone-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: fit-content;
    padding: 2px 4px 2px 8px;
    background: #fdeeee; border: 1px solid #f0c4c4; border-radius: 12px;
    font-size: 12px; color: #2f363e; line-height: 1.6;
}
.ipaws-zone-chip-name { font-weight: 600; }
.ipaws-zone-chip-code { color: #888; font-size: 11px; }
/* scoped to beat the generic .ipaws-zone-body button rule */
.ipaws-selected-zones .ipaws-zone-chip-x {
    border: none; background: transparent; color: #c41415; cursor: pointer;
    font-size: 15px; line-height: 1; padding: 0 3px; border-radius: 50%;
}
.ipaws-selected-zones .ipaws-zone-chip-x:hover { background: #c41415; color: #fff; }

/* IPAWS +ZONES "Add by Region" picker — fills its panel; county list scrolls */
.ipaws-region-picker { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.ipaws-region-picker .aasd-region-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.ipaws-region-picker .aasd-region-controls label { display: flex; flex-direction: column; font-size: 11px; font-weight: 600; color: #6b7280; gap: 3px; }
.ipaws-region-picker .aasd-region-tools { display: flex; gap: 10px; align-items: center; }
.ipaws-region-picker .aasd-select-all-wrap { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #615e5e; white-space: nowrap; }
.ipaws-region-picker .aasd-county-search { flex: 1 1 auto; }
.ipaws-region-picker .aasd-county-list {
    display: flex; flex-direction: column; gap: 1px;
    flex: 1 1 auto; min-height: 90px; overflow-y: auto;
    border: 1px solid #e0e0e0; border-radius: 4px; padding: 4px; background: #fff;
}
.ipaws-region-picker .aasd-county-row { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 6px; border-radius: 3px; cursor: pointer; text-align: left; }
.ipaws-region-picker .aasd-county-row .aasd-county-cb { margin: 0; flex: 0 0 auto; }
.ipaws-region-picker .aasd-county-name { flex: 1 1 auto; }
.ipaws-region-picker .aasd-county-row:hover { background: #f5f5f5; }
.ipaws-region-picker .aasd-county-row.greyed { color: #999; }
.ipaws-region-picker .aasd-county-same { color: #888; font-size: 11px; flex: 0 0 auto; }
.ipaws-region-picker .aasd-add-selected { align-self: flex-start; }
.ipaws-region-picker .aasd-region-notice { color: #c41415; font-size: 12px; }