@media only screen and (max-width: 1700px) {
	.citizen .right-side {
		display: none;
	}
	.citizen .left-side {
		width: 88% !important;
		margin-left: 8% !important;
	}
}

@media only screen and (max-width: 1200px) {
	.citizen .left-side {
		width: 100% !important;
	}
	.citizen .form-wrapper {
		width: 90% !important;
	}
	.citizen .ticker {
	    width: 47% !important;
	}
	.citizen .terms-conditions {
	    width: 85%;
	}
	.citizen button.btn.btn-success.btn-subscribe {
	    margin-right: -28px !important;
	}
	.citizen .big {
	    padding-left: 30px;
	    padding-right: 30px;
	}
	

}

@media only screen and (max-width: 768px) {
	
	.mobile-app {
		display: block;
	}
	.citizen form#subscriber-form .save-settings.text-right.mrg-top-30 {
	    margin-top: 10px !important;
	    margin-right: 10px;
	}
	.citizen .form-wrapper {
	    width: 100% !important;
	    left: 0% !important;
	    top: 0% !important;
	    height: 100% !important;
	}
	
	p.additional-info {
	    font-size: 16px !important;
	    text-align: justify;
	}

	div#mobile-new-alert {
	    display: none;
	}

	::-webkit-scrollbar {
		width: 0px !important;
		display: none;
	}
	
	.app-header {
	    text-align: center;
	    height: 32px;
	    padding-top: 11px;
	    color: white;
	}
	.app-header img {
		height: 71%;
	}
	
	.app-body {
	    height: calc(100% - 100px);
	    width: 100%;
	    overflow-x: hidden;
	    overflow-y: hidden;
	    box-sizing: content-box;
	    background: url(/public-assets/images/background2.jpg);
	    background-position: 0 0;
	    background-size: cover;
	}
	
	.app-toolbar {
	    height: 100px;
	    background: white;
	    width: 100%;
	    box-sizing: border-box;
	    overflow: hidden;
	    position: absolute;
	    bottom: 0px;
	    border-top: 2px solid #dcd7d7;
	    box-shadow: 2px 2px 2px #e8e8e8;
	}
	
	.mobile-app {
	    width: 100%;
	    height: 100%;
	    z-index: 999;
	    position: relative;
	}
	
	.menu-btn {
	    width: 20%;
	    float: left;
	    height: 100%;
	    box-sizing: border-box;
	    text-align: center;
	    padding-top: 25px;
	}
	.menu-btn i {
	    font-size: 29px;
	    margin-bottom: 9px;
	}
	.menu-btn.selected {
	    color: #9e1616;
	}
	
	.template-list, .units-list, .locations-list, .notifications-list, .recipients-list, .profile-list, .pa-list {
	    /* margin: 10px; */
	    padding: 10px 0px;
	    overflow: hidden;
	    margin-bottom: 175px;
	    box-sizing: border-box;
	}
	
	.template-item, .notification-item, .recipient-item, .profile-item {
	    border: 1px solid #afa594c7;
	    margin: 5px 0px;
	    padding: 20px 25px;
	    border-radius: 10px;
	    margin-bottom: 8px;
	    font-size: 18px;
	    background: white;
	    box-shadow: 1px 1px 1px #DDD;
	}
	
	.template-item i {
	        padding: 10px;
	    border: 1px solid #000;
	    border-radius: 50%;
	    margin-right: 25px;
	    background: white;
	    box-shadow: 2px 3px 6px #2b2828;
	}
	
	::-webkit-scrollbar-track {
        /* background-color: transparent !important; */
        /* border: 0px !important; */
    }
	
	.app-body img.logo {
		display: block;
		background: transparent;
		text-align: center;
		margin: 10px auto;
		max-width: 80%;
		width: 80%;
		height: auto !important;
	}
	.template-featured {
	    width: 49%;
	    float: left;
	    height: 100px;
	    box-sizing: border-box;
	    margin-right: 1%;
	    margin-bottom: 3px;
	    text-align: center;
	    vertical-align: middle;
	    border-radius: 6px;
	    padding-top: 27px;
	    font-size: 22px;
	    font-weight: bold;
	    color: white;
	    line-height: 25px;
	    overflow: hidden;
	}
	
	.template-list hr {
	    width: 95%;
		margin-bottom: 16px;
	}
	div#btn-alert-1, #btn-pa-alert-1 {
	    background: #b9823a;
	}
	
	div#btn-alert-2, #btn-pa-alert-2 {
	    background: #0041a9;
	}
	div#btn-alert-3, #btn-pa-alert-3 {
	    background: #800909;
	}
	div#btn-alert-4, #btn-pa-alert-4 {
	    background: #096909;
	}
	div#btn-alert-2, div#btn-alert-4, #btn-pa-alert-2, #btn-pa-alert-4 {
	    margin-right: 0%;
	    margin-left: 1%;
	}
		
	.template-featured i {
		float: left;
		position: relative;
		bottom: -11px;
		left: 4px;
		font-size: 79px;
		margin-right: -100px;
		color: #ffffff24;
	}
	
	div#btn-alert-4 i, #btn-pa-alert-4 i {
		left: -2px;
		font-size: 74px;
		bottom: -9px;
	}

	div#btn-alert-3 i, #btn-pa-alert-3 i {
		left: -3px;
		bottom: -12px;
	}
	.screen {
		overflow-y: scroll;
		height: 100%;
	}

	.tool-bar img, .tool-bar .user-signed-in {
		display: none;
	}
	
	.tool-bar {
		/* display: none !important; */
	}
	#map-timeline {
		display: none !important;
	}
	
	#main-box {
		/* display: none !important; */
		top: 0;
	}
	div#home-section {
		padding: 0% !important;
		width: 100%;
		height: 100%;
	}
	img.sir-logo, .sir-logo-onair1, .sir-logo-onair2 {
		height: 79px !important;
	}
	img.sir-logo-onair2 {
		    margin-top: -17px;
	}
	.toolbar.action.one-third {
		display: none;
	}
	.ui-dialog {
	    max-width: 100%;
	}
	div#legend {
	    display: none;
	}#login .wrapper {
	    width: 100%;
	    padding-left: 45px;
	    padding-bottom: 120px;
	    box-sizing: border-box;
	    height: 100%;
	    margin-top: 0%;
	    background: url(/public-assets/images/background2.jpg);
	    background-position: 0 0;
	    background-size: cover;
	    padding-top: 30%;
	}a.btnSignIn {
	    width: 91%;
	    text-align: center;
	    float: left;
	    margin-top: 0px;
	    height: 34px;
	    padding-top: 20px;
	    border-radius: 5px;
	}nav#filters {
	    display: none;
	}.third-party-logo {
	    display: none;
	}div#coordinates {
	    display: none;
	}
	.status-loggedin {
	    width: 350px;
	}
	.right-bar {
		right: 0px;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 10000;
		border-radius: 0px !important;
		height: 100% !important;
		max-height: 100% !important;
	}
	.right-bar-header img {
		max-width: 300px !important;
		margin: 0 auto !important;
		height: auto !important;
	}
	.right-bar-content {
		height: calc(100% - 5px) !important;
		overflow-y: auto !important;
		padding-top: 2px;
	}
	.right-bar-header {
		margin: 0 auto !important;
		height: 85px;
		border-bottom: 1px solid #DDD;
		margin-bottom: 16px !important;
	}
	.modal {
		opacity: .95;
		height: 120%;
	}
	.beacon-alert, .stream-audio, .activate-alarm, .activate-stored-message {
		width: 49% !important;
		box-sizing: border-box;
		height: 46px;
	}
	.right-bar hr {
		width: 100%;
	}
	.custom-actions {
		width: 109% !important;
	}
	.stop-active-script-big {
		display: none !important;
	}
	.selection-box {
	    display: none !important;
	}
	.main-actions div {
		height: 55px !important;
	}
	#login label {
		display: none;
	}
	.screen-locations, .screen-units {
		display: none;
		position: absolute;
		top: 0;
		background: #000000f0;
		padding-top: 18%;
		z-index: 9999;
		width: 100%;
	}
	.screen-locations .locations-list .select-location, .screen-units .units-list .select-unit {
	    display: block !important;
	    width: 46.5% !important;
	}
	.screen-locations .locations-list, .screen-units .units-list {
	    background: white;
	    width: 85%;
	    margin: 0 auto;
	    border-radius: 10px;
	    padding: 25px;
	    box-sizing: border-box;
	    max-height: 50%;
	    overflow-y: scroll;
	    border-bottom-left-radius: 0px;
	    border-bottom-right-radius: 0px;
	}
	.screen-locations .title, .screen-units .title {
	    background: transparent;
	    border: 0px;
	}
	.screen-locations .title.alert-name, .screen-units .title.alert-name {
	    font-size: 35px;
	}
	.screen-locations .btn-send-alert-mobile, .screen-units .btn-send-alert-mobile {
	    width: 42.5%;
	    text-align: center;
	    background: #690606;
	    color: white;
	    border-bottom-right-radius: 8px;
	    height: 65px;
	    padding-top: 21px;
	    box-sizing: border-box;
	    font-size: 20px;
	    margin-right: 7.5%;
	    float: right;
	    margin-top: -1px;
	}
	.screen-locations .btn-cancel-alert-mobile, .screen-units .btn-cancel-alert-mobile {
	   width: 42.5%;
	   text-align: center;
	   background: #DDD;
	   color: #000;
	   border-bottom-left-radius: 8px;
	   height: 63px;
	   padding-top: 21px;
	   box-sizing: border-box;
	   font-size: 20px;
	   margin-left: 7.5%;
	   float: left;
	   margin-top: -1px;
	}

    .notification-item {
		margin-bottom: 15px;
	}
	.no-notifications, .list-container {
			width: 95% !important;
			margin: 0 auto !important;
	}
	.notification-item .datetime {
		font-size: small;
		margin-top: -31px;
		background: white;
		float: right;
		padding: 2px 10px;
		border: 1px solid #895d0dc7;
		border-radius: 5px;
	}
	.notification-item .title {
		text-align: left;
		background: none;
		color: black;
		border: 0px;
		margin-left: -1px;
		margin-top: -5px;
		font-size: 23px;
		margin-bottom: 3px;
	}
	.notification-item .sender {
		margin-top: -9px;
		font-size: small;
	}
	.notification-item .message {
	    margin-bottom: 15px;
	    margin-top: 10px;
	}
	.notification-item span.location-bubble {
		width: 42%;
	}
	
	
	.recipient-item {
		margin-bottom: 11px;
	}
	.recipient-item .title {
		text-align: left;
		background: none;
		color: black;
		border: 0px;
		margin-left: -1px;
		margin-top: -5px;
		font-size: 23px;
		margin-bottom: 3px;
	}
	.recipient-item .email {
	    margin-top: -10px;
	    margin-bottom: 2px;
	}
	.recipient-item .phone {
		margin-top: 2px;
	    margin-bottom: 15px;
	}
	.recipient-item span.location-bubble {
		width: 42%;
	}
	
	
	.profile-item {
		margin-bottom: 11px;
	}
	
	.profile-item .width-100 {
	    width: 93%;
	}
	
	.btn-sign-out {
	    width: 100%;
	    text-align: center;
	    background: #690606;
	    color: white;
	    margin-top: 25px;
	    border-radius: 8px;
	    height: 55px;
	    padding-top: 18px;
	    box-sizing: border-box;
	    font-size: 20px;
	}
	
	.g-signin2 {
	    width: 106% !important;
	}
	
	.abcRioButton.abcRioButtonLightBlue {
	    width: 100% !important;
	    height: 62px !important;
		padding-top: 16px;
	    padding-left: 14px;
	    border-radius: 2px !important;
	}
	
	.abcRioButtonIcon {
	    margin-right: -40px !important;
	}
	
	.g-signin2 span:first-child:after {content: ' with Google Apps' !important;}
	.g-signin2 .abcRioButton.abcRioButtonLightBlue, .g-signin2 .abcRioButton.abcRioButtonLightBlue span, .g-signin2 .abcRioButton.abcRioButtonLightBlue span.abcRioButtonContents {font-size: 18px !important;text-align: center !important;}

	.or-signin {
		display: block;
	    height: 43px;
	    margin: 0 auto;
	    width: 105%;
	    text-align: center;
	    margin-top: 91px;
	}
	
	.or-signin div {
	    float: left;
	    width: 50px;
	}
	
	.bar-left {
	    height: 1px;
	    background: black;
	    margin-top: 10px;
	}
	
	.bar-right {
	    height: 1px;
	    background: black;
	    margin-top: 10px;
	}
	
	.bar-left {margin-left: 29%;}
	
	ul.pa-list li {
	    border: 1px solid #DDD;
	    float: left;
	    width: 100%;
	    margin-bottom: 10px;
	    border-radius: 10px;
	    list-style: none;
	    background: white;
	    padding: 10px 20px;
	    box-sizing: border-box;
	}
	
	ul.pa-list li input {float: left;width: 35px;}
	
	.mobile-on-air {
		display: none;
		width: 100%;
		height: 100%;
	    background: #000;
	    position: relative;
	    z-index: 99999;
	    padding: 100px 50px;
	    box-sizing: border-box;
	
	}
	
	body.onair .mobile-on-air {
		display: block;
	}
	
	.mobile-on-air img {
	    width: 315px;
	}
	
	img.music-animation {
	    width: 100% !important;
	    margin-top: 50px;
	    opacity: .4;
	}
	
	.stop-all-mobile {
	    width: 60%;
	    background: red;
	    padding: 50px;
	    margin: 0 auto;
	    text-align: center;
	    color: white;
	    font-size: 28px;
	    border-radius: 10px;
	    overflow: hidden;
	}
	
	
	
	
	
	
	
	
	.ui-dialog {
	    border-radius: 10px !important;
	}
	.ui-dialog .ui-dialog-content {
		font-size: 20px;
	}
	
	.screen.screen-units {
	    padding-top: 45%;
	}
	.units-list {
	    min-height: 250px;
	}
	
	.ui-dialog select {
	    padding: 22px !important;
	    height: 67px !important;
	    font-size: 19px !important;
	    width: 98% !important;
	}
	.ui-dialog .ui-dialog-buttonpane {
	    border: 0px !important;
	}
		
	.loaded .ui-dialog-buttonset {
	    width: calc(100% + 31px);
	    text-align: center;
	    margin-bottom: -12px;
	    margin-right: -21px;
	    padding: 0px !important;
	}

	.loaded .ui-dialog-buttonset button:hover {
	    border-radius: 0px !important;
	    border-bottom-right-radius: 4px !important;
	    border: 0px !important;
	}

	.ui-dialog-buttonset button {
	    width: 50%;
	    margin: 0px !important;
	    padding: 19px;
	    border: 0px;
	    margin-bottom: -2px !important;
	}
	.ui-widget-overlay.ui-front {
	    background: #000;
	    opacity: .95 !important;
	}
	
	.ui-dialog-titlebar {
	    background: transparent;
	    border: 0px !important;
	}
	
	.ui-dialog .ui-dialog-title {
		width: 100%;
	    text-align: center;
	    background: transparent !important;
	    border: 0px !important;
	    margin-top: -75px;
	    font-size: 28px;
	    color: white;
	    margin-bottom: 21px;
	}
	
	div#live-pa-dialog {
	    font-size: 18px !important;
	    margin-top: -20px !important;
	    margin-bottom: 20px;
	}
	
	#toast {
		bottom: 120px !important;
	}
	
	
	div#audio-file-upload-box {
	    display: none;
	}
	
	.audio-file-box {
	    height: 100%;
	}
	

	.ui-stream-audio .ui-dialog-buttonpane button:first-Child {
	    background: black !important;
	    border-radius: 6px !important;
	    margin-bottom: 10px !important;
	}
	
	div#stream-audio-dialog {
	    padding: 0px;
	    margin-top: -5px;
	}
}
	
	

@media only screen and (max-width: 768px) {
	
    .choose-template.width-50 {
        min-width: unset;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .choose-template .or {
        display: none;
    }
    
    .choose-template .compose {
        width: 100% !important;
        max-width: 1000px !important;
        box-sizing: border-box;
        margin-left: 0px !important;
        border: 1px solid #625a5a;
        height: 45px;
        padding-top: 10px;
    }
    
    div#msg-type-area {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        overflow: hidden;
        min-width: unset !important;
    }
    
	.choose-template span.select2.select2-container.select2-container--default {
        width: 100% !important;
        margin-bottom: 10px;
    }
	
    div#msg-compose-area {
    display: flex !important;
    flex-direction: column;
	}


	.form-group.width-50 {
		float: unset !important;
		width: 100% !important;
		margin: 0px !important;
		padding: 0px !important;
		margin-bottom: 15px !important;
	}
	
	.portal-app-body::-webkit-scrollbar {
	    width: 15px;
	    display: block;
	}
}


/* Responsive table styles */
.custom-recipient-mobile-table {
    display: block;
    width: 100%;
}

.custom-recipient-mobile-table thead {
    display: none;
}

.custom-recipient-mobile-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    padding: 0.5rem;
}

.custom-recipient-mobile-table td {
    display: block;
    text-align: right;
    padding: 0.5rem;
    position: relative;
    padding-left: 50%;
}

.custom-recipient-mobile-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 0.5rem;
    width: 45%;
    padding-right: 0.5rem;
    text-align: left;
    font-weight: bold;
}

/* Dialog responsive styles */
.custom-group-box-dialog {
    max-width: 100vw !important;
    margin: 1rem !important;
}

@media screen and (max-width: 768px) {
    .custom-group-box-dialog {
        width: 95vw !important;
        margin: 0.5rem !important;
    }
    
    .custom-group-box-dialog .ui-dialog-buttonpane {
        display: flex;
        flex-direction: column;
    }
    
    .custom-group-box-dialog .ui-dialog-buttonpane button {
        margin: 0.25rem 0 !important;
        width: 100%;
    }

	.dashboard-active-alert-box {
		right: 0px;
		top: 0px;
		border-radius: 0px;
		z-index: 10000;
		padding: 30px;
	}

	.dashboard-active-alert-box.move-right {
		right: 0px;
	}

	.nogv div#home-section {
		padding: 0% !important;
		height: unset !important;
		width: 100%;
	}

	.nogv .right-bar {
		height: unset !important;
	}

	.maplibregl-ctrl-top-right {
		width: unset !important;
		left: 60px !important;
	}

	.geoman-controls {
		display: block;
		position: static;
	}

	button#id_draw_rectangle {
		display: none;
	}
	
	button#id_draw_circle {
		display: none;
	}
	
	button#id_edit_change {
		display: none;
	}
	
	button#id_edit_rotate {
		display: none;
	}
	
	button#id_edit_cut {
		display: none;
	}

	button#id_edit_drag {
		display: none;
	}
	
	.maplibregl-ctrl.maplibregl-ctrl-group.group-helper.svelte-16ufo3a {
		display: none;
	}
}