:root {
	--bg: #ffffff;
	--bgDev: #ffffff;
	--red: #DC2626;
	--sectionbg: #ffffff;
	--bgAccent: #d9d9d9;

	--ticketWidth: 104mm;
	/*--ticketWidth: 78mm;*/

	--headBarHeight: 95px;

	--defaultNavLeftWidthClosed: 0px;
    --navLeftWidth: 0px;
	--ultraLight: #eeeeee;
}
.popUpBox{margin-top: 120px;}
.enforcementHeader{width: 100%;}
.enforcementHeader > div{display: inline-flex; width: fit-content; gap: 15px; align-items: center;}
.enforcementHeader > div i{font-size: 28px}

html:not(:has(.headerBar)) {scroll-behavior: smooth;}

h3{margin: 15px 0 0 0; font-size: 1.3em;  font-style: italic;}
p{margin: 0 0 5px 0;}


.main{height: initial;}
.main.filled section.pageHeaderV2{justify-content: center;}
.main.filled section.pageHeaderV2 .headerActions{align-items: center;}
.main.filled section.pageHeaderV2 .hx{flex-direction: column;  align-items: center;}
.main.filled section.pageHeaderV2 h1,
.main.filled section.pageHeader h1
{font-family: 'Spline Sans', sans-serif; font-style: normal;font-weight: 600;font-size: 30px;line-height: 36px;text-transform: uppercase; padding: 0; color: #555;}
/*.main.filled section.pageHeader:not(.center){align-content: flex-start; padding: 60px 0 20px;}*/
/*.main .sectionBox h2{text-align: left;}*/


body{margin: 0; background-color: var(--bg);}
section{background-color: var(--sectionbg);}

.headerBar {height: var(--headBarHeight); overflow: visible}
.headerBar .btn{ display: inline-flex; align-items: center; justify-content: center; padding: 0;}
.headerBar .btn .primary{padding: 0 5px;}
.headerBar .btn.withChild{padding: 0; position: relative;}

.headerBar .btn.withChild .childBtn{padding: 0; top: var(--headBarHeight); left: 0; display: none; position: absolute; width: 240px; background-color: #ffffff;}
.headerBar .btn.withChild .childBtn.active{display: block; box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;}
.headerBar .btn.withChild .childBtn a{display: block; width: 100%; text-align: left; padding: 10px 15px; font-size: 1em; text-decoration: none; color: #333333;}
.headerBar .btn.withChild .childBtn a:hover{color: #ffffff;}
.headerBar .btn a{height: unset;}
#footerBaseFinal{bottom: 0; left:0; position: fixed; z-index: 100; height: 20px; width: 100vw; background: repeating-linear-gradient( 135deg, #FF3131 0px, #FF3131 30px, #000000 30px, #000000 60px );}

/*img scroll style*/
.imageScroll.hidden{display: none;}
.imageScroll .navBtn{font-size: 1.2em; width: 10%; display: inline-flex;align-items: center; justify-content: center;}
.imageScroll .navBtn i{padding: 20px;}
.imageScroll .imgContainer{font-size: 1.2em; width: 50%; box-sizing: border-box;}
#lifeCycleWrapper .imageScroll .imgContainer{width: 80%; padding: 0;}
.imageScroll .imgContainer img{width: 100%; aspect-ratio: 1.33; display: none; object-fit: cover; object-position: center center;}
.imageScroll .imgContainer img.active{display: inline-block;}
.imageScroll .imgContainer img.border{border: #ccc 2px dashed;}

.selectNotice .navBtn{font-size: 1.2em; width: 25%; display: inline-flex;align-items: center; justify-content: center;}
.selectNotice .navBtn.inactive{display: none;}
.selectNotice .navBtn i{padding: 20px;}
.selectNotice .noticeList{font-size: 1.2em; width: 50%; box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: center;}
.selectNotice .noticeList h2{display: none; font-size: 1.2em;}
.selectNotice .noticeList h2.active{display: inline-block;}

.main .sectionBox.selectNotice{margin: 0; padding: 5px 30px; background-color: var(--bgAccent); display: inline-flex; justify-content: center;}

.main .sectionBox.ticketCostContainer h1{margin: 0;}
.main .sectionBox .subTicketCost{font-size: 1.5em; font-weight: 600;}
.main .sectionBox .ticketCost{font-size: 2em; font-weight: 600;}

.main .sectionBox.reason {margin: 0; background-color: var(--bg); box-sizing: border-box; padding: 10px 20px; }
.main .sectionBox.reason ul{text-align: left;}

.main .sectionBox.payNow {margin: 20px 0 0 0; padding: 20px 30px; background-color: var(--bgAccent)}

.main .sectionBox.mailingAddress {margin: 0; padding: 40px 0; background-color: #000000; color: #ffffff;}
.main .sectionBox.mailingAddress h1{font-size: 18px}

.main .sectionBox.noticePaid{margin: 0; padding: 30px 50px 60px; background-color: #ffffff; color: #1fad1f; font-size: 24px; font-weight: 600;}
.main .sectionBox.noticePaid i{font-size: 2em; display: block;}
.main .sectionBox.noticePaid .mainText{font-size: 2em; display: block;}

.main .sectionBox.noticeVoid{margin: 0; padding: 30px 50px 60px; background-color: #ffffff; color: var(--red); font-size: 24px; font-weight: 600;}
.main .sectionBox.noticeVoid .mainText{font-size: 2em; display: block;}

.main .sectionBox.disclaimer{margin: 0; padding: 30px 50px; background-color: var(--red); color: #ffffff; font-size: 18px;}

.main .sectionBox.dispute{margin: 0 auto; background-color: var(--bg);}

.main.scan{width: 100vw; padding: 0; margin: 70px 0 0 0; background-color: var(--bg); }

.main.login{width: 100%; margin-left: 0; background-color: var(--bg);}
.main.login section,
.main.login form,
.main.login form input[type='text'],
.main.login form input[type='password'],
.main.login div
{background-color: var(--bg);}


section.block.long.xLargeCenter .longBlock.formInput{height: initial;}
section.block.long.xLargeCenter .longBlock.formInput input[type='text']{font-size: 38px; line-height: 45px; text-align: center;}
section.block.long.textBoxBorder .longBlock.formInput input[type='text']{border: none; background-color: #c3c3c3; padding: 10px 20px; width: 60%;}
section.block.long.xLargeCenter .longBlock.formInput .subject{align-items: center; margin-bottom: 20px;}
section.block.long.xLargeCenter .longBlock.formInput .subject.flexStart{align-items: flex-start; margin-bottom: 20px;}
section.block.long.xLargeCenter .longBlock.formInput .subject label{font-size: 1.2em}

.ticketPrintTitle{height: 4.5mm; margin: 16mm 0 0 0; width: var(--ticketWidth); text-align: center; font-size: 18pt; font-weight: 600; }
.ticketPrintHead{height: 17mm; margin: 4mm 0 0 0; width: var(--ticketWidth); text-align: center; font-size: 12pt; box-sizing: border-box;}
.ticketPrintNoticeLabel{width: var(--ticketWidth); padding: 0 20mm; box-sizing: border-box; margin: 0;font-size: 9pt; text-align: center;}
.ticketPrintQR{width: var(--ticketWidth); padding: 0 20mm; box-sizing: border-box; margin: 0; font-weight: 600;}
.ticketPrintQR img{width: 100%; aspect-ratio: 1; height: auto;}
.ticketPrintCode{width: var(--ticketWidth); text-align: center; font-size: 8mm;  z-index: 10;}
section.block .kpiBox .kpi.hidden{display: none;}

.ticketObject.customV1{position: relative; width: var(--ticketWidth); height: 150mm;}
.customV1 .ticketBackground{width: var(--ticketWidth); position: absolute; z-index: 1;}
.customV1 .ticketBackground img{width: var(--ticketWidth); border-radius: 4mm;}
.customV1 .ticketPrintQR{width: calc(var(--ticketWidth) - 48mm); height: calc(var(--ticketWidth) - 48mm); padding: 0; left: 24mm; top: 43mm; box-sizing: border-box; margin: 0; font-weight: 600; position: absolute;  z-index: 10; overflow: hidden;}
.customV1 .ticketPrintQR img{width: 110%; top: -5%	; left: -5%; aspect-ratio: 1; height: auto; position: absolute; }
.customV1 .ticketPrintCode{width: var(--ticketWidth); text-align: center; font-size: 8mm;  z-index: 10; position: absolute; top: 108mm}

/*.ticketObject.s1200{*/
/*    --ticketWidth: 78mm;*/
/*    --ticketHeight: 127mm;*/
/*    position: relative; width: var(--ticketWidth); height: var(--ticketHeight);*/

/*    .ticketPrintTitle{height: 4.5mm; margin: 16mm 0 0 0; width: var(--ticketWidth); text-align: center; font-size: 18pt; font-weight: 600; }*/
/*    .ticketPrintHead{height: 17mm; margin: 4mm 0 0 0; width: var(--ticketWidth); text-align: center; font-size: 12pt; box-sizing: border-box;}*/
/*    .ticketPrintNoticeLabel{width: var(--ticketWidth); padding: 0 20mm; box-sizing: border-box; margin: 0;font-size: 9pt; text-align: center;}*/
/*    .ticketPrintQR{width: var(--ticketWidth); padding: 0 20mm; box-sizing: border-box; margin: 0; font-weight: 600;}*/
/*    .ticketPrintQR img{width: 100%; aspect-ratio: 1; height: auto;}*/
/*    .ticketPrintCode{width: var(--ticketWidth); text-align: center; font-size: 8mm;  z-index: 10;}*/
/*}*/

.ticketObject.s1200{
    --ticketWidth: 78mm;
    /*--ticketHeight: 6in;*/
    position: relative; width: var(--ticketWidth);

    .ticketPrintTitle{height: 4.5mm;margin: 15mm 0 0 0;width: var(--ticketWidth);text-align: center;font-size: 15pt;font-weight: 600;}
    .ticketPrintHead{height: 15mm;margin: 3mm 0 0 0;width: var(--ticketWidth);text-align: center;font-size: 12pt;box-sizing: border-box;}
    .ticketPrintNoticeLabel{width: var(--ticketWidth); padding: 0 20mm; box-sizing: border-box; margin: 4mm 0 0 0; font-size: 9pt; text-align: center;}
    .ticketPrintQR{width: var(--ticketWidth); padding: 0 20mm; box-sizing: border-box; margin: 0; font-weight: 600;}
    .ticketPrintQR img{width: 100%; aspect-ratio: 1; height: auto;}
    .ticketPrintCode{width: var(--ticketWidth);text-align: center;font-size: 7mm;z-index: 10;}
    .ticketPrintFooter{height: 25mm;margin: 2mm 0 0 0;box-sizing: border-box;padding: 0 20px;text-align: center;width: var(--ticketWidth);font-size: 8.5pt;display: block; align-items: center;justify-content: center;}
}



.ticketPrintFooter{height: 25mm; margin: 0; box-sizing: border-box; padding: 0 40px; text-align: center; width: var(--ticketWidth); font-size: 9.5pt; display: flex; align-items: center; justify-content: center;}

.scanTicketOperatorImage img{width: 60vw; object-fit: cover; max-width: 200px;}

.formBtn.large{border-radius: 15px; padding: 15px 25px;}

section.block.short > div.kpiBox{width: 100%; max-width: calc(25% - 30px); min-width: 100px; border: #ccc solid 1px; box-sizing: border-box; box-shadow: 3px 3px 10px 0 #ddd; margin: 0 40px 40px 0; border-radius: 10px;}
section.block.short > div.kpiBox:nth-child(4n){margin-right: 0;}
section.block.short .kpiBox h1{ color: #333333; font-size: clamp(0.5em, 2vw, 0.7em); font-weight: 600; font-family: 'Spline Sans', sans-serif;}
section.block.short .kpiBox h4{ color: #666666; font-size: 0.4em; font-family: 'Spline Sans', sans-serif;}
section.block.short .kpiBox span{ margin-bottom: 10px; font-size: clamp(0.7em, 3.5vw, 1.1em);}
/* section.block.short.kpiBlock{justify-content: flex-start; flex-wrap: wrap; padding: 0; overflow: hidden; margin-top: 0;} */
/* section.block.short.kpiBlock.center{justify-content: center;} */

section.block.long.narrow.form{padding: 0;}
section.block.long.narrow.form > .longBlock.formInput{padding: 0;}

.main .sectionBox.noAdditionalSpace{padding: 10px 0;}

.formRow > div:first-child,
.formRow > div,
.formRow,
.formRow.head{border: 0;}

.formRow:last-child:not(.head){border-bottom: 1px solid #c3c3c3;}

.sectionBox.out{display: flex; align-items: flex-start;}

section.block.long .longBlock.formInput input[type='text'],
section.block.long .longBlock.formInput input[type='number'],
section.block.long .longBlock.formInput input[type='password'],
section.block.long .longBlock.formInput input[type='date'],
section.block.long .longBlock.formInput input[type='time'],
section.block.long .longBlock.formInput input[type='datetime-local'],
section.block.long .longBlock.formInput textarea,
.formRow .popUpBox textarea,
.formRow .popUpBox input, .formRow .popUpBox select,
section.block.long .longBlock.formInput select
{border-width: 1px;}
section.block.long .longBlock.formInput textarea,
.formRow .popUpBox textarea
{border-width: 1px;}

section.block.long .longBlock.formInput input[type='number']:read-only,
section.block.long .longBlock.formInput input[type='text']:read-only,
section.block.long .longBlock.formInput textarea:read-only
{background-color: #e7e7e7; font-style: italic;}

section.block.long .longBlock.formInput input[type='text']:read-only:focus,
section.block.long .longBlock.formInput textarea:read-only:focus
{border-color: #bbbbbb;}

section.block.long.xLargeCenter .longBlock.formInput .kpiBox{margin-bottom: 43px; margin-left: 10px; flex-direction: column-reverse; align-items: center;}
section.block.long.xLargeCenter .longBlock.formInput .kpiBox .textControlIcons{padding: 0;}

.main .loginBox{width: 420px; height: 600px; border: #666666 solid 1px; padding: 0 30px; position: relative; box-sizing: border-box; display: inline-flex; align-content: center;}

.formBtn.gray.large{border: 2px solid #333333; border-radius: 10px; font-weight: 700; font-size: 16px; color: #333333; background-color: #D9D9D9;}
.formBtn.red.large{border: 2px solid #333333; border-radius: 10px; font-weight: 700; font-size: 16px; color: #ffffff; background-color: #c90101;}

.loading{width: calc(100%); height: calc(100vh - 45px); margin-top: 45px; margin-left: 0;}

.formRow > div.headerFilterFlexBox{justify-content: flex-start; gap: 10px;}


#rmsg{bottom: 20px;top: initial;max-width: initial; width: 100%; box-sizing: border-box; padding: 10px 0; margin: 0;font-size: 1em;}
#rmsg::after{border: none;}
#rmsg.active{opacity: 1;}

.formBtn.secondaryBtn{background-color: #eeeeee; border: 2px solid #3ebf46; color: #000;}
.formBtn.secondaryBtn:hover{background-color: #82c786; color: #fff;}

.colorSampleCircle{width: 20px !important; height: 20px; border-radius: 50%; display: inline-block; margin-right: 10px;}
.headerBar .btn .expand i{padding: 0 5px;}

.tab-container{max-width: unset;}
.tab-pane > div{display: flex; width: 100%;}

/* License Plate Tracking System Styles */
.plate-whitelisted {
	/*background-color: #f9f9f9 !important;*/
	/*border: 2px solid #e5e5e5 !important;*/
}

.badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.badge.orange {
	background-color: #f97316;
	color: white;
}

.badge.red {
	background-color: #dc2626;
	color: white;
}

.badge.green {
	background-color: #16a34a;
	color: white;
}

.badge.white {
	background-color: #f3f4f6;
	border: 1px solid #d1d5db;
	color: #374151;
}