img{ vertical-align:middle; border:0;}

.wrapper{
	/*max-width:1600px;*/
	width:96%;
	margin:auto;	
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;  
}

.logo{
	max-width:170px;
	position: absolute;
	left:47%;
	top:0px;
	text-align:center
}
.Loginlogo{
	max-width:250px;
	margin-top:20px;	
}
.img-responsive{width:100%;}

.clear{clear:both; }

.floatleft{float:left;}
.floatright{float:right;}

/* Padding */
.padding3 {padding:3px; box-sizing:border-box}
.padding5 {padding:5px;box-sizing:border-box}
.padding10 {padding:10px;box-sizing:border-box}
.padding15 {padding:15px;box-sizing:border-box}
.padding20 {padding:20px;box-sizing:border-box}

.paddingLR5 {padding-left:5px; padding-right:5px;box-sizing:border-box}
.paddingLR10 {padding-left:10px; padding-right:10px;box-sizing:border-box}
.paddingLR15 {padding-left:15px; padding-right:15px;box-sizing:border-box}

.paddingTB5 {padding-top:5px; padding-bottom:5px;box-sizing:border-box}
.paddingTB10 {padding-top:10px; padding-bottom:10px;box-sizing:border-box}
.paddingTB15 {padding-top:15px; padding-bottom:15px;box-sizing:border-box}
.paddingbottom{
	padding-bottom: 10px;
}
/* Margin */

.margin5 {margin:5px;}
.margin10 {margin:10px;}
.margin20 {margin:20px;}

.marginLR5 {margin-left:5px; margin-right:5px;}
.marginLR10 {margin-left:10px; margin-right:10px;}
.marginLR20 {margin-left:20px; margin-right:20px;}

.marginTB5 {margin-top:5px; margin-bottom:5px;}
.marginTB10 {margin-top:10px; margin-bottom:10px;}
.marginTB20 {margin-top:20px; margin-bottom:20px;}



/* Responsive Div withs for Desktop */
.col-lg-1 {width: 8.333%;}
.col-lg-1a {width: 12.333%;}
.col-lg-2 {width: 16.666%;}
.col-lg-2a {width: 20%;}
.col-lg-3  {width: 25%;}
.col-lg-4  {width: 33.333%;}
.col-lg-5  {width: 41.666%;}
.col-lg-6  {width: 50%;}
.col-lg-7  {width: 58.333%;}
.col-lg-8  {width: 66.666%;}
.col-lg-9  {width: 75%;}
.col-lg-10  {width: 83.333%;}
.col-lg-11  {width: 91.666%;}
.col-lg-12  {width: 100%;}
.col-lg-center { margin:auto;}
.col-lg-marginbottom { margin-bottom:10px;}
.marginbottom5 { margin-bottom:5px;}
/* All Alignments */	
.col-lg-textcenter { text-align:center;}
.col-lg-textleft { text-align:left;}
.col-lg-textright { text-align:right;}
.col-lg-textjustify { text-align:justify;}
.col-lg-displaynone  {display: none !important;}
.col-lg-displayblock {display: block ;}


@media screen and (max-width:1500px) {
.col-lm-1 {width: 8.333%;}
.col-lm-1a {width: 12.333%;}
.col-lm-2 {width: 16.666%;}
.col-lm-2a {width: 20%;}
.col-lm-3 {width: 25%;}
.col-lm-4 {width: 33.333%;}
.col-lm-5 {width: 41.666%;}
.col-lm-6 {width: 50%;}
.col-lm-7 {width: 58.333%;}
.col-lm-8 {width: 66.666%;}
.col-lm-9 {width: 75%;}
.col-lm-10 {width: 83.333%;}
.col-lm-11 {width: 91.666%;}
.col-lm-12 {width: 100%;}

.col-lm-marginbottom { margin-bottom:10px;}
.col-lm-center { margin:auto; float:none;}
.col-lm-displaynone  {display :none ;}
.col-lm-displayblock {display: block ;}
.col-lm-textcenter { text-align:center;}
.col-lm-textleft { text-align:left;}
.col-lm-textright { text-align:right;}
.col-lm-textjustify { text-align:justify;}

}

@media screen and (max-width:1023px) {
.col-md-1 {width: 8.333%;}
.col-md-2 {width: 16.666%;}
.col-md-2a {width: 20%;}
.col-md-3 {width: 25%;}
.col-md-4 {width: 33.333%;}
.col-md-5 {width: 41.666%;}
.col-md-6 {width: 50%;}
.col-md-7 {width: 58.333%;}
.col-md-8 {width: 66.666%;}
.col-md-9 {width: 75%;}
.col-md-10 {width: 83.333%;}
.col-md-11 {width: 91.666%;}
.col-md-12 {width: 100%;}
.col-md-marginbottom { margin-bottom:10px;}
.col-md-center { margin:auto; float:none;}
.col-md-displaynone  {display :none ;}
.col-md-displayblock {display: block ;}
.col-md-textcenter { text-align:center;}
.col-md-textleft { text-align:left;}
.col-md-textright { text-align:right;}
.col-md-textjustify { text-align:justify;}
.padding15 {padding:10px;}
.padding20 {padding:15px;}

.paddingLR15 {padding-left:10px; padding-right:10px;}
.paddingTB15 {padding-top:10px; padding-bottom:10px;}

/* Margin */
.margin15 {margin:10px;}
.margin20 {margin:15px;}
.marginLR15 {margin-left:10px; margin-right:10px;}
.marginTB15 {margin-top:10px; margin-bottom:10px;}

}

@media screen and (max-width:767px) {
.col-sm-1 {width: 8.333%;}
.col-sm-2 {width: 16.666%;}
.col-sm-3 {width: 25%;}
.col-sm-4 {width: 33.333%;}
.col-sm-5 {width: 41.666%;}
.col-sm-6 {width: 50%;}
.col-sm-7 {width: 58.333%;}
.col-sm-8 {width: 66.666%;}
.col-sm-9 {width: 75%;}
.col-sm-10 {width: 83.333%;}
.col-sm-11 {width: 91.666%;}
.col-sm-12 {width: 100%;}
.col-sm-marginbottom { margin-bottom:10px;}
.col-sm-center { margin:auto; float:none; clear:both;}
.col-sm-displaynone  {display :none ;}
.col-sm-displayblock {display: block ;}
.col-sm-textcenter { text-align:center;}
.col-sm-textleft { text-align:left;}
.col-sm-textright { text-align:right;}
.col-sm-textjustify { text-align:justify;}
.padding15 {padding:8px;}
.padding20 {padding:12px;}
.paddingTB10 {padding-top:8px;padding-bottom:8px;}
.paddingLR15 {padding-left:8px; padding-right:8px;}
.paddingTB15 {padding-top:8px; padding-bottom:8px;}

/* Margin */
.margin15 {margin:8px;}
.margin20 {margin:12px;}
.marginLR15 {margin-left:8px; margin-right:8px;}
.marginTB15 {margin-top:8px; margin-bottom:8px;}

}

@media screen and (max-width:639px) {
.col-xs-1 {width: 8.333%;}
.col-xs-2 {width: 16.666%;}
.col-xs-3 {width: 25%;}
.col-xs-4 {width: 33.333%;}
.col-xs-5 {width: 41.666%;}
.col-xs-6 {width: 50%;}
.col-xs-7 {width: 58.333%;}
.col-xs-8 {width: 66.666%;}
.col-xs-9 {width: 75%;}
.col-xs-10 {width: 83.333%;}
.col-xs-11 {width: 91.666%;}
.col-xs-12 {width: 100%;}
.col-xs-marginbottom { margin-bottom:10px;}
.col-xs-center { margin:auto; float:none;}
.col-xs-displaynone  {display :none ;}
.col-xs-displayblock {display: block  !important ;}
.col-xs-textcenter { text-align:center;}
.col-xs-textleft { text-align:left;}
.col-xs-textright { text-align:right;}
.col-xs-textjustify { text-align:justify;}
.padding20 {padding:10px;}
.padding10 {padding:6px;}
.paddingTB10 {padding-top:6px;padding-bottom:6px;}
.paddingLR10 {padding-left:6px; padding-right:6px;box-sizing:border-box}
/* Margin */
.margin20 {margin:10px;}
.margin10 {margin:6px;}

}

@media screen and (max-width:479px) {
.col-xxs-1 {width: 8.333%;}
.col-xxs-2 {width: 16.666%;}
.col-xxs-3 {width: 25%;}
.col-xxs-4 {width: 33.333%;}
.col-xxs-5 {width: 41.666%;}
.col-xxs-6 {width: 50%;}
.col-xxs-7 {width: 58.333%;}
.col-xxs-8 {width: 66.666%;}
.col-xxs-9 {width: 75%;}
.col-xxs-10 {width: 83.333%;}
.col-xxs-11 {width: 91.666%;}
.col-xxs-12 {width: 100%;}
.col-xxs-marginbottom { margin-bottom:10px;}
.col-xxs-center { margin:auto; float:none;}
.col-xxs-displaynone  {display :none ;}
.col-xxs-displayblock {display: block ;}
.col-xxs-textcenter { text-align:center;}
.col-xxs-textleft { text-align:left;}
.col-xxs-textright { text-align:right;}
.col-xxs-textjustify { text-align:justify;}
.padding10 {padding:4px;}
	/*updated ruby huzaif*/
	.logo {
		max-width: 100px;
		position: absolute;
		left: auto;
		right: 120px;
		top: 0px;
		text-align: center
	}
	/*end*/

}
@media screen and (max-width:359px) {
.col-xxxs-1 {width: 8.333%;}
.col-xxxs-2 {width: 16.666%;}
.col-xxxs-3 {width: 25%;}
.col-xxxs-4 {width: 33.333%;}
.col-xxxs-5 {width: 41.666%;}
.col-xxxs-6 {width: 50%;}
.col-xxxs-7 {width: 58.333%;}
.col-xxxs-8 {width: 66.666%;}
.col-xxxs-9 {width: 75%;}
.col-xxxs-10 {width: 83.333%;}
.col-xxxs-11 {width: 91.666%;}
.col-xxxs-12 {width: 100%;}
.col-xxxs-clearLeft{clear:left}
.col-xxxs-marginbottom { margin-bottom:10px;}
.col-xxxs-center { margin:auto; float:none;}
.col-xxxs-displaynone  {display :none ;}
.col-xxxs-displayblock {display: block ;}
.col-xxxs-textcenter { text-align:center;}
.col-xxxs-textleft { text-align:left;}
.col-xxxs-textright { text-align:right;}
.col-xxxs-textjustify { text-align:justify;}

}
/*added by huzaif*/
@media screen and (max-width:1350px) {
	canvas#canvas_Bar_MonthlyCitation {
		width: 260px !important;
	}

	strong#citynametotal {
		font-size: 16px !important;
	}

	strong#ContentPlaceHolder1_othervalue {
		font-size: 15px !important;
	}

	strong#ContentPlaceHolder1_cityvalue {
		font-size: 15px !important;
	}

	.circle1.BiggerText {
		width: 65px !important;
		height: 65px !important;
		line-height: 35px !important;
	}

	.circle2.BiggerText.Textcenter {
		width: 65px !important;
		height: 65px !important;
		line-height: 35px !important;
	}

	.col-lg-6.col-xxs-12.floatleft.padding5.col-lg-textcenter {
		padding: 5px !important;
	}

	td#cityname {
		padding: 0px !important;
		font-size: 12px !important;
	}

	div#panel {
		width: 305px !important;
	}
}

@media screen and (max-width:1000px) {
	td#cityname {
		font-size: 16px !important;
	}

	strong#mdTime {
		font-size: 12px;
	}

	.floatleft.paddingLR15.paddingTB5.mddate strong {
		font-size: 12px;
	}

	.lablmodule {
		font-size: 14px !important;
	}

	.floatright.MSlegendHeader {
		margin-top: 10px !important;
		font-size: 14px !important;
		width: 100% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.MSMapSec {
		display: flex !important;
		flex-direction: column !important;
	}

	.MSMapTitle {
		width: 100%;
		padding-bottom: 10px;
		text-align: center;
	}

	.labeldiv {
		display: flex;
		width: 33%;
		margin-right: 0px;
	}

	span#cssmenu img {
		height: 18px;
		width: 18px;
	}

	span#cssmenu {
		font-size: 13px !important;
		display: ruby;
	}

	.mapdropdown-content.paddingLR15.paddingTB10.BorderRounded5.offensestyle {
		width: 140px !important;
		left: -3px !important;
	}

	.mapdropdown-content.paddingLR15.paddingTB10.BorderRounded5.officerstyle {
		left: -5px !important;
		width: 150px !important;
	}

	.mapdropdown-content.paddingLR15.paddingTB10.BorderRounded5.stoptypeStyle {
		width: 140px !important;
		left: -5px;
	}

	.mapdropdown-content.paddingLR15.paddingTB10.BorderRounded5.GnderStyle {
		width: 140px !important;
		left: -5px !important;
	}

	.mapdropdown-content.paddingLR15.paddingTB10.BorderRounded5.stopresultStyle {
		left: -5px !important;
		width: 140px;
	}

	.mapdropdown-content.paddingLR15.paddingTB10.BorderRounded5.DivisionStyle {
		left: -5px !important;
		width: 150px;
	}

	.mapdropdown-content.paddingLR15.paddingTB10.BorderRounded5.enhancementstyle {
		left: -5px !important;
		width: 140px !important;
	}

	.mapdropdown-content.paddingLR15.paddingTB10.BorderRounded5.moduletypeStyle {
		width: 180px !important;
	}
}

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

	.MSFilterSec {
		display: flex !important;
		align-items: flex-start !important;
		flex-direction: row !important;
	}

	.MSMapFilterBtn {
		width: 78% !important;
		justify-content: right !important;
	}

	button#toggleMetadataButton {
		padding: 5px 9px !important;
		margin-top: 4px !important;
		font-size: 9px !important;
	}

	.MsMapMetaDataSec {
		left: 3px !important;
		top: 32px !important;
	}

	span#cssmenu {
		width: 100%;
		font-size: 17px;
	}

	div#panel {
		width: 62% !important;
	}

	.slide-out-div {
		width: 100%;
	}

	.Alert-pop-up {
		padding: 12px !important;
	}

	.scrollbar table tr td {
		max-width: 100% !important;
	}
}

@media screen and (max-width:639px) {
	canvas#canvas_Bar_MonthlyCitation {
		width: 400px !important;
	}

	canvas#canvas_tickets {
		max-width: 400px !important;
		width: 400px !important;
	}

	.lablmodule {
		font-size: 12px !important;
	}

	.MSMapFilterBtn {
		width: 100% !important;
		justify-content: end !important;
	}

	.MSFilterSec {
		flex-direction: column-reverse !important;
	}

	.MsMapMetaDataSec {
		top: 62px !important;
	}

	.floatleft.paddingLR15.paddingTB5.mddate strong {
		font-size: 11px !important;
	}

	strong#mdTime {
		font-size: 11px !important;
	}

	div#panel {
		top: 30px !important;
	}

	.dvsec {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: wrap;
	}

		.dvsec > div {
			flex: 0 0 50%;
			padding-right: 0px;
			padding-left: 3px;
		}

	button.mapdropbtn {
		margin: 0px !important;
		padding: 0px !important;
	}
}

@media screen and (max-width:520px) {
	.arrowIcon {
		margin-top: 10px;
	}

	#lblUserName {
		display: none;
	}

	.MSNewinBlue {
		display: flex;
	}

	.dropdown {
		top: 4px !important;
	}

	.MSNewinBlue img {
		width: 70% !important;
		margin-left:0px !important;
	}

	.dropdown-content a {
		padding: 5px 10px !important;
		font-size: 12px !important;
	}

	.dropdown-content {
		min-width: 120px !important;
	}

		.dropdown-content a:hover {
			cursor: pointer;
		}

	canvas #canvas_tickets {
		max-width: 400px !important;
		width: 300px !important;
	}

	.lablmodule {
		font-size: 9px !important;
	}

	.floatright.MSlegendHeader {
		font-size: 13px !important;
	}

	.MSExcelBtn input, .MSMapAgencyBtn input {
		font-size: 11px !important;
		padding: 8px 20px !important;
	}

	.MSMapFilter {
		font-size: 10px !important;
	}

	.MSMapMetaDatabtn button {
		font-size: 9px !important;
	}

	.MsMapMetaDataSec {
		left: 1px !important;
		width: 100% !important;
	}

	.SumoSelect > .optWrapper.isFloating {
		max-height: 50% !important;
		right: 12px !important;
		width: 75% !important;
	}

	.floatleft.paddingLR15.paddingTB5.mddate {
		font-size: 9px !important;
		padding-top: 8px !important;
	}

		.floatleft.paddingLR15.paddingTB5.mddate strong {
			font-size: 8px !important;
		}

	button.mapdropbtn {
		font-size: 10px !important;
	}

		button.mapdropbtn strong {
			font-size: 9px !important;
		}

	.floatleft.paddingLR15.paddingTB5.mdtime {
		font-size: 9px !important;
	}

		.floatleft.paddingLR15.paddingTB5.mdtime strong {
			font-size: 8px !important;
		}

	strong#mdTime {
		font-size: 9px !important;
	}

	.SumoSelect > .optWrapper.multiple.isFloating > .MultiControls {
		padding-bottom: 5px !important;
	}

	.SumoSelect > .optWrapper.multiple.isFloating {
		padding-bottom: 84px !important;
	}

	canvas#canvas_Bar_MonthlyCitation {
		width: 315px !important;
	}

	.metadataContainer {
		/*padding-left: 5px;
		padding-right: 5px;*/
		width: 100% !important;
	}

	.floatleft.paddingLR15.paddingTB5.mdoffenceEnhancement {
		padding: 5px !important;
	}
	/*.floatleft.paddingLR15.paddingTB5.mddivision{
		width:50%;
	}
	.floatleft.paddingLR15.paddingTB5.mdstopresult {
		width: 50%;
	}
	.floatleft.paddingLR15.paddingTB5.mdoffence {
		width: 50%;
	}*/
	.titilesec {
		padding: 15px 0px 5px 15px !important;
	}

	.mapdropdown-content.paddingLR15.paddingTB10.BorderRounded5.moduletypeStyle {
		width: 170px !important;
	}

	.mapdropdown-content.paddingLR15.paddingTB10.BorderRounded5.officerstyle {
		left: -5px !important;
		width: 150px !important;
	}

	.Alert-pop-up {
		padding: 2px !important;
	}

	div#panel {
		width: 75% !important;
	}

	canvas#canvas_tickets {
		width: 300px !important;
	}
}

@media screen and (max-width:400px) {
	.MSExcelBtn input, .MSMapAgencyBtn input {
		font-size: 10px !important;
		padding: 8px 15px !important;
	}

	.MSMapFilterBtn {
		justify-content: end !important;
		flex-wrap: wrap;
	}

	div#panel {
		width: 100% !important;
	}
}

@media screen and (max-width:378px) {
	.MSMapFilterBtn {
		justify-content: end !important;
	}

	canvas#canvas_Bar_MonthlyCitation {
		width: 255px !important;
	}

	canvas#canvas_tickets {
		max-width: 400px !important;
		width: 252px !important;
	}

	span#cssmenu {
		display: flex !important;
		flex-wrap: wrap !important;
	}

	.labeldiv {
		flex: 0 0 50%;
	}

	.floatright.MSlegendHeader {
		font-size: 11px !important;
	}

	.MSMapAgencyBtn input {
		font-size: 12px !important;
		padding: 8px 20px !important;
	}

	.MSExcelBtn input {
		font-size: 12px !important;
		padding: 8px 26px !important;
	}

	.MSMapFilter {
		font-size: 10px !important;
	}

	.floatleft.paddingLR15.paddingTB5.mddate {
		font-size: 7px !important;
	}

		.floatleft.paddingLR15.paddingTB5.mddate strong {
			font-size: 7px !important;
		}

	strong#mdTime {
		font-size: 7px !important;
	}

	.floatleft.paddingLR15.paddingTB5.mdtime {
		font-size: 8px !important;
	}

	button.mapdropbtn {
		font-size: 8px !important;
	}

	.scrollbar table tr td {
		max-width: 290px !important;
	}
}

@media screen and (max-width:336px) {
	.scrollbar table tr td {
		max-width: 240px !important;
	}

	.MSMapFilter, .MSMapAgencyBtn button, div#ExportExcelDiv button {
		font-size: 9px !important;
	}

	#panel, #flip {
		padding: 5px !important;
	}
}