@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
}
/* Global scrollbar default: the standard thin grey bar, everywhere.
   (This used to be width:0 — hiding EVERY scrollbar app-wide unless a
   specific rule punched through it, which is why views kept shipping with
   invisible scrollbars.) Styling ::-webkit-scrollbar forces classic
   always-painted scrollbars — no overlay fade-out. Elements with their own
   scrollbar rules (ag-grid, .right-bar, send-groups, …) still win on
   specificity. */
::-webkit-scrollbar{
    width:8px;
    height:8px;
}
::-webkit-scrollbar-track{
    background:#f1f1f1;
    border-radius:4px;
}
::-webkit-scrollbar-thumb{
    background-color:#c1c1c1;
    border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{
    background-color:#a1a1a1;
}
::-webkit-scrollbar-corner {
    background: transparent !important;
}
/* Firefox-only fallback. In Chrome/Edge/Safari, setting scrollbar-width or
   scrollbar-color on an element DISABLES its ::-webkit-scrollbar styling and
   falls back to platform overlay scrollbars (which fade out) — so these two
   properties must never reach WebKit browsers. Firefox doesn't support the
   ::-webkit-scrollbar selector, so the guard applies them there only. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 #f1f1f1;
    }
    /* AG Grid scrolls its body/header viewports but paints its own dedicated
       scrollbar elements (.ag-body-vertical-scroll / -horizontal-scroll), so
       the viewports' native scrollbars must stay hidden or every grid shows
       doubled bars. The bundled ag-grid.min.js was hand-patched from
       scrollbar-width:none to the invalid `15px` (dropped by the parser),
       which un-hid them in Firefox — restore the stock behavior here. */
    .ag-body-viewport,
    .ag-center-cols-viewport,
    .ag-header-viewport,
    .ag-floating-top-viewport,
    .ag-floating-bottom-viewport,
    .ag-sticky-top-viewport,
    .ag-sticky-bottom-viewport {
        scrollbar-width: none;
    }
    /* Firefox twin of the .groupLocationWrapper::-webkit-scrollbar hide (see
       the grid-cell bubble wrapper rules): scrollable, but no visible bar. */
    .groupLocationWrapper{
        scrollbar-width: none;
    }
}
#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: auto;
    overflow-x: hidden;
    /* Reserve an equal scrollbar gutter on both edges so the 18px vertical
       scrollbar (shown when the list overflows) 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;
}


.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: auto;
    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: auto
}
.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: auto;
    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: auto;
    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: auto
}
.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: auto;
    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: auto
}
.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
}
/* 263px = the box's 300px core min-height minus the 37px button pane, so the
   editor surface fills the .trumbowyg-box instead of stopping short of it.
   height (not max-height) + resize:vertical lets the user drag the surface
   taller; Trumbowyg's own fullscreen height:calc(100% - 37px)!important still
   out-ranks the dragged inline height, so fullscreen stays intact. */
.trumbowyg-editor{
    min-height:263px !important;
    height:263px;
    resize:vertical;
    overflow-y: auto;
    overflow-x:hidden;
    word-wrap:break-word;
    overflow-wrap:break-word;
    word-break:break-word;
    max-width:100%;
}
.trumbowyg-editor::-webkit-scrollbar{
    width:8px;
}
.trumbowyg-editor::-webkit-scrollbar-track{
    background:#f1f1f1;
    border-radius:4px;
}
.trumbowyg-editor::-webkit-scrollbar-thumb{
    background:#c1c1c1;
    border-radius:4px;
}
.trumbowyg-editor::-webkit-scrollbar-thumb:hover{
    background:#a1a1a1;
}
.trumbowyg-fullscreen .trumbowyg-editor,
.trumbowyg-fullscreen .trumbowyg-textarea{
    resize:none;
}
/* The </> (View HTML) mode reuses the compose form's original textarea, which
   measured 0px tall at init (its form-group starts hidden) and keeps that as
   an inline height, while .form-group textarea{min-height:36px} out-specifies
   Trumbowyg's own 300px minimum — collapsing the source view to one line.
   Mirror the visual editor's clamp above; fullscreen keeps its own
   height:calc(100% - 37px) sizing. */
.trumbowyg-box.trumbowyg-editor-hidden:not(.trumbowyg-fullscreen) .trumbowyg-textarea{
    min-height:263px !important;
    height:263px;
    resize:vertical;
}
/* 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.rss-title.form-group, 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: auto;
    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
}
/* Vertically resizable like #alert-notes. min-height instead of a fixed
   height, and flex:none so the flex-column .form-group doesn't snap the box
   back after the user drags the resize handle. Selectors carry .form-group so
   they out-rank .form-group textarea{min-height:36px} in the theme sheet. */
.form-group.alert-audio textarea,.form-group.alert-phone textarea,
.form-group textarea.eas-desc,.form-group textarea.ipaws-instructions,.form-group textarea.short-desc,
.alert-audio textarea,.alert-phone textarea,textarea.eas-desc,textarea.ipaws-instructions,textarea.short-desc{
    min-height:100px;
    height:auto;
    resize:vertical;
    overflow-y: auto;
    flex:none;
    box-sizing:border-box;
}
.alert-audio textarea::-webkit-scrollbar,.alert-phone textarea::-webkit-scrollbar,
textarea.eas-desc::-webkit-scrollbar,textarea.ipaws-instructions::-webkit-scrollbar,textarea.short-desc::-webkit-scrollbar{
    width:8px;
}
.alert-audio textarea::-webkit-scrollbar-track,.alert-phone textarea::-webkit-scrollbar-track,
textarea.eas-desc::-webkit-scrollbar-track,textarea.ipaws-instructions::-webkit-scrollbar-track,textarea.short-desc::-webkit-scrollbar-track{
    background:#f1f1f1;
    border-radius:4px;
}
.alert-audio textarea::-webkit-scrollbar-thumb,.alert-phone textarea::-webkit-scrollbar-thumb,
textarea.eas-desc::-webkit-scrollbar-thumb,textarea.ipaws-instructions::-webkit-scrollbar-thumb,textarea.short-desc::-webkit-scrollbar-thumb{
    background:#c1c1c1;
    border-radius:4px;
}
/* Event-code select2 panel: COG-excluded codes are option[disabled] (see
   hideOption/hideAllEventCodes) — hide them from the results list entirely. */
.ipaws-event-code-dropdown .select2-results__option[aria-disabled=true]{
    display:none;
}
.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
}
/* Collapsible month sections in the Logs date sidebar. */
.log-month-group{
    margin: 4px;
}
.log-month-header{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    background: #eef1f3;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-weight: 600;
    user-select: none;
}
.log-month-header:hover{
    background: var(--accent-hover);
}
.log-month-header .fa{
    font-size: 12px;
    transition: transform .15s ease;
}
.log-month-group.open .log-month-header .fa{
    transform: rotate(90deg);
}
.log-month-count{
    margin-left: auto;
    background: #e7eff6;
    color: #3d3e3e;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 700;
}
.log-month-body{
    display: none;
}
.log-month-group.open .log-month-body{
    display: block;
}
.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;
}
#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
}
/* Grid-cell bubble wrapper. Single-line flex instead of the bubbles' legacy
   float/margin flow, so the cell never grows (or scrolls vertically) with the
   number of recipients: rows keep the grid's own height, extra bubbles stay on
   the same line and pan horizontally on wheel/touch (the bar itself is hidden
   below); the eye action shows the full list. */
.groupLocationWrapper{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:0 3px;
    height:100%;
    max-height:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 10px;
}
/* Beat span.*-bubble in sisa-theme-transitional.css (loads after this file):
   flex gap above replaces the bubbles' own margins; float is ignored on
   flex items. */
.groupLocationWrapper span.admin-bubble,
.groupLocationWrapper span.channels-bubble,
.groupLocationWrapper span.group-bubble,
.groupLocationWrapper span.ipaws-bubble,
.groupLocationWrapper span.location-bubble{
    margin:0;
}
/* A classic scrollbar inside a grid cell reads as clutter — hide it here
   only. Overflowing bubbles still pan on wheel/touch, and the eye action
   shows the full list. Firefox twin lives in the @supports guard near the top
   of this file. */
.groupLocationWrapper::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
}
.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
}
/* Styled scrollbar so it actually paints when the nav overflows — unstyled
   overlay scrollbars (macOS/trackpads) stay invisible. auto (not scroll) so
   the collapsed icon rail doesn't carry a permanent empty track. Also covers
   the Logs date list, which scrolls inside the body. */
.sidebar-body{
    height:calc(100% - 155px);
    overflow-x:hidden;
    overflow-y:auto;
    box-sizing:border-box;
    margin-top: 5px;
}
.sidebar-body::-webkit-scrollbar,.log-date-sidebar::-webkit-scrollbar{
    width:8px;
}
.sidebar-body::-webkit-scrollbar-track,.log-date-sidebar::-webkit-scrollbar-track{
    background:#f1f1f1;
    border-radius:4px;
}
.sidebar-body::-webkit-scrollbar-thumb,.log-date-sidebar::-webkit-scrollbar-thumb{
    background:#c1c1c1;
    border-radius:4px;
}
.sidebar-body::-webkit-scrollbar-thumb:hover,.log-date-sidebar::-webkit-scrollbar-thumb:hover{
    background:#a1a1a1;
}
.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;
}

/* AG Grid paints its own scrollbar element (.ag-body-vertical-scroll) and
   widens the body viewport by the scrollbar width so the viewport's NATIVE
   scrollbar is pushed out of view. Keep that native bar hidden everywhere —
   un-hiding it (as an old #roster/#message-center width:15px rule here did)
   renders a second scrollbar beside the real one. */
.ag-body-viewport::-webkit-scrollbar,
.ag-center-cols-viewport::-webkit-scrollbar,
.ag-floating-top-viewport::-webkit-scrollbar,
.ag-floating-bottom-viewport::-webkit-scrollbar,
.ag-sticky-top-viewport::-webkit-scrollbar,
.ag-sticky-bottom-viewport::-webkit-scrollbar {
    display: none !important;
}
.ag-body {
    overflow: hidden;   /* clips the widened viewport's scrollbar strip */
}

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: auto;
    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,
.alert-rss-end-time-container {
    display: flex;
    flex-direction: column;
}

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

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

.alert-end-time-container-row,
.alert-rss-end-time-container-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.alert-end-time-container-row .alert-end-time-container-input,
.alert-rss-end-time-container-row .alert-rss-end-time-container-input {
    flex: 1 1 220px;
}

.alert-end-time-container-duration,
.alert-rss-end-time-container-duration {
    display: flex;
    flex-direction: column;
    flex: 0 1 150px;
}

.alert-end-time-container-or,
.alert-rss-end-time-container-or {
    padding-bottom: 8px;
    font-family: 'Calibri', sans-serif;
    color: grey;
}

.alert-duration-input,
.alert-rss-duration-input {
    max-width: 150px;
}

.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 8px (it assumes a
   vertical scrollbar is always present — see .ag-pinned-right-header in
   sisa-theme-transitional.css). Reserve the scrollbar gutter on every
   message-center grid body so that offset always lines up, even when a page
   is too short to scroll (short template folders, filtered lists, ...). */
#message-center .admin-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; }
.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: 0;
    box-sizing: border-box;
}
/* The overlay is measurement-only (invisible), so keep the real field painted
   above it — otherwise the textarea's resize grip gets covered. Markers are
   appended to the wrapper separately and stay on top of the field. */
.dvar-overlay-wrap > textarea,
.dvar-overlay-wrap > input {
    position: relative;
    z-index: 1;
}
.dvar-overlay-wrap > .dvar-marker {
    z-index: 2;
}
.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;
}
.logs-view-usage::-webkit-scrollbar {
	width: 8px;
}
.logs-view-usage::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}
.logs-view-usage::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}
.logs-view-usage::-webkit-scrollbar-thumb:hover {
	background: #a1a1a1;
}

.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; }