/*#layout-sidenav.bg-sidenav-theme{
	background-color: #0071BC !important;
}*/
/*
 SYSTEM STYLE
 */
.hidden {
	display: none !important;
}
button:hover, button:focus, .button:hover, .button:focus{
	background-color: none;
}
div.bg-primary,a.bg-primary,span.bg-primary{
	background-color: #0071BC !important;
}
.btn-success,.btn-success:hover,.btn-success:focus{
	background-color: #008425 !important;
}
.btn-primary,.btn-primary:hover,.btn-primary:focus{
	background-color: #0071BC !important;
}

#layout-sidenav.bg-sidenav-theme{
	background-color: #003451 !important;
}
.bg-sidenav-theme .sidenav-item.active>.sidenav-link:not(.sidenav-toggle){
	background-color: #003451 !important;
}
.sidenav-item.active i{
	color: #fff;
}
.sidenav-vertical .sidenav-icon, .icon-image-nav{
	color: #54ade8;
}
.sidenav-icon{
	font-size: 2.2rem !important;
	display: flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 8px !important;
}
.icon-image{
	margin-right: 10px;
	width: 23px;
}
.icon-image-nav{
	width: 12px;
}
.sidenav-item.active .icon-image{
	filter: grayscale(1) brightness(5);
}
.sidenav-item .fa-money-check-alt:before {
  font-size: 25px;
  color: #54ade8;
}
.sidenav-item.active .fa-money-check-alt:before {
  color: #fff !important;
}
/*
	NAV BAR - NOTIFICATIONS
 */
.notifications-coming-soon{
	text-align: center;
    font-size: 25px;
    font-weight: 400;
    padding: 100px 50px;
}

/*
 	SIDEBAR - REPORTSV2
*/
.sidenav-menu .sidenav-link div{
	display: flex;
    align-items: center;
    justify-content: center;
}
.sidenav-menu .sidenav-link .hyphen{
    display: inline-block;
    height: 3px;
    width: 10px;
    background-color: #54ade8;
    border-radius: 10px;
    margin-right: 8px;
}
.sidenav-item.open:not(.sidenav-item-closing)>.sidenav-toggle::after{
	display: none;
}
/*
	SIDEBAR LOGOS
 */
html.layout-collapsed:not(.layout-sidenav-hover) #layout-sidenav .app-brand .logo{
	display: none;
}
html.layout-collapsed.layout-sidenav-hover #layout-sidenav .app-brand .logo_collapse{
	display: none;
}
html:not(.layout-collapsed) #layout-sidenav .app-brand .logo{
	display: block;
}
html:not(.layout-collapsed) #layout-sidenav .app-brand .logo_collapse{
	display: none;
}
html.layout-collapsed:not(.layout-sidenav-hover) .sidenav-inner .sidenav-item .sidenav-link{
	padding-left: 1.2rem !important;
}
html.layout-collapsed:not(.layout-sidenav-hover) .sidenav-inner .sidenav-item .sidenav-link > div{
	visibility: hidden;
}
html.layout-collapsed:not(.layout-sidenav-hover) .sidenav-inner .sidenav-item ul.sidenav-menu{
	margin-left: .350rem !important;
}
html.layout-collapsed:not(.layout-sidenav-hover) .sidenav-inner li.sidenav-item i{
	margin-right: 10px;
    left: 45px;
    position: relative;
    font-size: 2.2rem !important;
}
/*
	Disable theme settings
 */
#theme-settings{
	display: none !important;
}
/*
	FOOTER
 */
nav.footer-white,nav.footer-white .footer-text{
	background-color: #fff !important;
	color: #4E5155 !important;
}

/* Modal  */
.reveal-modal .row .row, .reveal-modal label {
	width: 100%;
}
.reveal-modal .row .row select {
	margin-bottom: 10px;
}

/* Bootstrap modals converted from Foundation reveal. The bodies still use the Foundation
   grid (.row / .columns), so they need the same content rules .reveal-modal used to give
   them. Drop this class from a modal once its body stops using that markup. */
.legacy-modal-content .row .row,
.legacy-modal-content label {
	width: 100%;
}
.legacy-modal-content .row .row select {
	margin-bottom: 10px;
}
.legacy-modal-content .columns button {
	margin: 1rem 0 0;
}
.legacy-modal-content .modal-footer .columns button {
	margin: 0;
}
/* These bodies keep the .row they carried as a Foundation panel, so the flex context the
   content was laid out in is unchanged. Bootstrap's .row also brings -15px side margins,
   which used to sit on a padding:0 panel and would now bleed past .modal-body's padding. */
.legacy-modal-content > .modal-dialog > .modal-content > .modal-body.row {
	margin-right: 0;
	margin-left: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PL-MODAL — the modal design system

   Same visual language as the Location Settings refactor (see
   ai-notes/LOCATION_SETTINGS_REFACTOR.md §6) and its two reference components,
   shared/DialogModal.vue and shared/ConfirmActionModal.vue: rounded shell with
   a high shadow, a titled header, a padded body, and a grey footer whose
   buttons sit on the right.

   It is opt-in: a modal only gets it by carrying the `pl-modal` class, so a
   page that has not been reviewed yet is untouched. The tokens are repeated on
   the class itself because Bootstrap modals are not descendants of any page
   root, and custom properties only inherit.

   Specificity note: bootstrap.css is loaded AFTER custom.css (partial/shared/
   head.blade.php lines 22 vs 82), so every rule here is written with the
   namespace in front — `.pl-modal .modal-header` (0,2,0) beats `.modal-header`
   (0,1,0) regardless of order. The same trick clears Foundation's element
   selectors in app.min.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.pl-modal {
	/* Montserrat is the only display face this app actually loads
	   (partial/shared/head.blade.php). Location Settings declares Inter through
	   `@section('styles-override')`, but layout.dashboard never yields that
	   section, so Inter is not available here — Montserrat carries both roles,
	   which is also where the Location Settings tokens ended up. */
	--pl-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

	--pl-text: 1rem;
	--pl-text-sm: 0.875rem;

	/* One accent, split by role: --pl-accent is a fill and always has white on
	   top of it; text, icons and links take --pl-accent-strong, which clears
	   7:1 instead of scraping past 5:1 at this size. */
	--pl-accent: #0071bc;
	--pl-accent-strong: #005a96;

	--pl-border: #d8dee8;
	--pl-heading: #3b3b3b;
	--pl-body: #464646;
	--pl-muted: #767676;

	font-family: var(--pl-font);
	color: var(--pl-body);
	/* body{} in appwork.css forces grayscale smoothing, which thins every glyph */
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}
.pl-modal * {
	box-sizing: border-box;
}

/* ── shell ── */
.pl-modal .modal-content {
	border: none;
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}
.pl-modal .modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #eeeeee;
	background: #fff;
}
.pl-modal .modal-header .modal-title,
.pl-modal .modal-header h3,
.pl-modal .modal-header h4,
.pl-modal .modal-header h5 {
	font-family: var(--pl-font);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.18px;
	color: var(--pl-heading);
	text-transform: none;
	margin: 0;
	padding: 0;
	line-height: 1.3;
}
.pl-modal .modal-header .close {
	flex: 0 0 auto;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: #a5a5a5;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	opacity: 1;
	text-shadow: none;
	cursor: pointer;
}
.pl-modal .modal-header .close:hover,
.pl-modal .modal-header .close:focus {
	color: var(--pl-heading);
	opacity: 1;
}

.pl-modal .modal-body {
	padding: 24px;
	font-size: var(--pl-text);
	line-height: 1.55;
}
.pl-modal .modal-body > p:last-child,
.pl-modal .modal-body > .pl-modal-note:last-child {
	margin-bottom: 0;
}
/* a secondary line under the question — the "this cannot be reversed" kind */
.pl-modal .pl-modal-note {
	font-size: var(--pl-text-sm);
	color: var(--pl-muted);
	margin: -8px 0 20px;
}
/* "there is nothing here" — a state, so it reads quieter than the content it
   stands in for, and never as an error */
.pl-modal .pl-modal-empty {
	color: var(--pl-muted);
	margin: 0;
	padding: 8px 0;
}

/* ── footer ──
   Bootstrap spaces footer children with a -.25rem/+.25rem margin pair; the gap
   replaces it, so both are zeroed rather than fighting them. */
.pl-modal .modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding: 16px 24px;
	margin: 0;
	border-top: 1px solid #e5e5e5;
	background: #fafafa;
}
.pl-modal .modal-footer > * {
	margin: 0;
}
/* a footer action that belongs on the opposite side (e.g. Delete next to Close) */
.pl-modal .modal-footer .pl-footer-start {
	margin-right: auto;
}
/* the forms these modals post through are one-button wrappers, not layout */
.pl-modal .modal-footer form {
	margin: 0;
	display: inline-flex;
}

/* ── form fields ── */
.pl-modal .modal-body label {
	display: block;
	font-family: var(--pl-font);
	font-size: var(--pl-text);
	font-weight: 600;
	color: var(--pl-heading);
	text-transform: none;
	line-height: 1.4;
	margin-bottom: 6px;
}
.pl-modal .modal-body .custom-control-label,
.pl-modal .modal-body .form-check-label {
	display: inline-block;
	font-weight: 500;
	margin-bottom: 0;
}
.pl-modal .modal-body label small,
.pl-modal .modal-body .text-muted {
	font-weight: 400;
	color: #a5a5a5;
}
.pl-modal .modal-body input[type='text'],
.pl-modal .modal-body input[type='email'],
.pl-modal .modal-body input[type='tel'],
.pl-modal .modal-body input[type='number'],
.pl-modal .modal-body input[type='password'],
.pl-modal .modal-body input[type='url'],
.pl-modal .modal-body input[type='date'],
.pl-modal .modal-body select,
.pl-modal .modal-body textarea,
.pl-modal .modal-body .form-control {
	display: block;
	width: 100%;
	height: 40px;
	padding: 8px 12px;
	margin: 0 0 18px;
	border: 1px solid var(--pl-border);
	border-radius: 6px;
	background-color: #fff;
	background-image: none;
	box-shadow: none;
	font-family: var(--pl-font);
	font-size: var(--pl-text);
	color: #2f3640;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.pl-modal .modal-body textarea,
.pl-modal .modal-body textarea.form-control {
	height: auto;
	min-height: 96px;
	line-height: 1.5;
	resize: vertical;
}
.pl-modal .modal-body input:focus,
.pl-modal .modal-body select:focus,
.pl-modal .modal-body textarea:focus,
.pl-modal .modal-body .form-control:focus {
	outline: none;
	border-color: var(--pl-accent);
	box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.15);
}
.pl-modal .modal-body input[readonly],
.pl-modal .modal-body input[disabled],
.pl-modal .modal-body select[disabled],
.pl-modal .modal-body .form-control[readonly] {
	background-color: #f6f8fb;
	color: var(--pl-muted);
	cursor: default;
}
/* a field is label + control; the margin lives on the control, so the wrapper
   only needs to close the gap when the control is the last thing in it */
.pl-modal .modal-body .form-group {
	margin-bottom: 0;
}
.pl-modal .modal-body .form-group > label {
	margin-bottom: 6px;
}
/* a stack of fields, for bodies that lay out one control per line rather than
   reaching for a grid */
.pl-modal .modal-body .pl-field + .pl-field {
	margin-top: 4px;
}
/* inside a Bootstrap grid the row already sets the vertical rhythm, so the
   field's own bottom margin would double it */
.pl-modal .modal-body .row > [class*='col'] > :last-child {
	margin-bottom: 0;
}

/* select2 defaults to a 28px box, which reads as a different control next to a
   40px input. These modals anchor the dropdown inside themselves
   (dropdownParent), so the dropdown is in scope here too. */
.pl-modal .select2-container--default .select2-selection--single {
	height: 40px;
	border: 1px solid var(--pl-border);
	border-radius: 6px;
}
.pl-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 38px;
	padding-left: 12px;
	color: #2f3640;
}
.pl-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
}
.pl-modal .select2-container--default .select2-search--dropdown .select2-search__field {
	height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--pl-border);
	border-radius: 6px;
}
.pl-modal .select2-dropdown {
	border-color: var(--pl-border);
	border-radius: 6px;
	overflow: hidden;
}

/* ── buttons: colour by ROLE, never by section ──
   The legacy markup names the role with a Foundation colour class, so the roles
   are keyed off those rather than added to every template:
     .success / .btn-primary   → the one main action, filled blue
     .primary / .secondary     → neutral utility, outline
     .warning                  → consequential but not destructive, amber
     .alert / .btn-danger      → destructive, red
   Green is status, not action. */
.pl-modal .button,
.pl-modal .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 8px 18px;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: #fff;
	font-family: var(--pl-font);
	font-size: var(--pl-text);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pl-modal .button.success,
.pl-modal .btn-primary {
	background: var(--pl-accent);
	border-color: var(--pl-accent-strong);
	color: #fff;
}
.pl-modal .button.success:hover,
.pl-modal .button.success:focus,
.pl-modal .btn-primary:hover,
.pl-modal .btn-primary:focus {
	background: var(--pl-accent-strong);
	border-color: var(--pl-accent-strong);
	color: #fff;
}
.pl-modal .button.primary,
.pl-modal .button.secondary,
.pl-modal .btn-secondary {
	background: #fff;
	border-color: #d7dde5;
	color: #44506a;
}
.pl-modal .button.primary:hover,
.pl-modal .button.secondary:hover,
.pl-modal .btn-secondary:hover,
.pl-modal .btn-secondary:focus {
	background: #f6f8fb;
	border-color: #b9c3d0;
	color: #1f2937;
}
.pl-modal .button.warning,
.pl-modal .btn-warning {
	background: #fff;
	border-color: #e6cfa8;
	color: #92400e;
}
.pl-modal .button.warning:hover,
.pl-modal .btn-warning:hover {
	background: #fdf6e9;
	border-color: #d8b982;
	color: #7a3505;
}
.pl-modal .button.alert,
.pl-modal .btn-danger {
	background: #fff;
	border-color: #e8c9c5;
	color: #b3261e;
}
.pl-modal .button.alert:hover,
.pl-modal .btn-danger:hover {
	background: #fdecea;
	border-color: #dfb2ad;
	color: #8f1d17;
}
.pl-modal .button[disabled],
.pl-modal .btn[disabled],
.pl-modal .button:disabled,
.pl-modal .btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* Cancel is a way out, not a choice — it never reads as a second button */
.pl-modal .btn-cancel {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	height: auto;
	font-family: var(--pl-font);
	font-size: var(--pl-text);
	font-weight: 600;
	color: var(--pl-muted);
	text-transform: none;
	cursor: pointer;
}
.pl-modal .btn-cancel:hover,
.pl-modal .btn-cancel:focus {
	background: none;
	color: var(--pl-heading);
	text-decoration: none;
}
/* the legacy icon spans are decorative; the label already says what it does */
.pl-modal .button .icon-checkmark,
.pl-modal .btn .icon-checkmark {
	font-size: 0.85em;
}

/* ── alerts inside a modal ── */
.pl-modal .modal-body .alert {
	border-radius: 8px;
	padding: 12px 14px;
	font-size: var(--pl-text-sm);
	line-height: 1.5;
	margin-bottom: 18px;
}
.pl-modal .modal-body .alert:last-child {
	margin-bottom: 0;
}

/* ── tables inside a modal ──
   No height cap here on purpose: the modal body already scrolls. */
.pl-modal .modal-body table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}
.pl-modal .modal-body table th,
.pl-modal .modal-body table td {
	padding: 12px 10px;
	font-size: var(--pl-text-sm);
	border-bottom: 1px solid #eef1f6;
	vertical-align: middle;
}
.pl-modal .modal-body table tr:last-child td {
	border-bottom: none;
}

/* ── payment modal: the tab strip's labels are the tab, not form labels ── */
.pl-modal .paytab-item-method label {
	display: inline-block;
	margin: 0;
	font-size: var(--pl-text-sm);
	cursor: pointer;
}

/* ── sections inside one modal ──
   The payment modal holds three independent things (saved methods, add a
   method, payment settings) that post to three different places. They are
   labelled and ruled off so that reads as three things rather than one long
   form. */
.pl-modal .pl-pay-section {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid #eef1f6;
}
.pl-modal .pl-pay-section--last,
.pl-modal .pl-pay-section:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}
.pl-modal .pl-pay-section-title {
	font-family: var(--pl-font);
	font-size: var(--pl-text-sm);
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--pl-muted);
	margin: 0 0 14px;
}
/* each section carries its own action row on the right, the same shape the
   modal footer uses */
.pl-modal .pl-pay-section .payment-buttons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 20px;
}
.pl-modal .pl-pay-section .payment-buttons > * {
	margin: 0;
}
.pl-modal .pl-pay-section-hint {
	float: right;
	font-size: var(--pl-text-xs, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #a5a5a5;
}
.pl-modal .pl-pay-paypal-hint {
	font-size: var(--pl-text-sm);
	color: var(--pl-muted);
	margin: 0 0 14px;
}

/* ── billing mode ──
   The segmented control and the sentence that says what it does sit on one
   line: the toggle alone never explained what changes. */
.pl-modal .pl-pay-billing {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.pl-modal .pl-pay-toggle {
	display: flex;
	flex: 0 0 auto;
}
.pl-modal .pl-pay-billing-desc {
	flex: 1 1 220px;
	margin: 0;
	font-size: var(--pl-text-sm);
	color: var(--pl-muted);
	line-height: 1.5;
}

/* ── saved methods ──
   A saved method has an identity, a state and one action, so it is a row with
   a brand mark and a title — not two table cells. The radio is the account's
   default-method field; it posts the same name the detached <select> did. */
.pl-modal .pl-pay-list {
	border: 1px solid var(--pl-border);
	border-radius: 10px;
	overflow: hidden;
}
.pl-modal .pl-pay-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #fff;
	transition: background 0.15s;
}
.pl-modal .pl-pay-item + .pl-pay-item {
	border-top: 1px solid #eef1f6;
}
.pl-modal .pl-pay-item--current {
	background: #f4f9fd;
}
.pl-modal .pl-pay-radio {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
}
.pl-modal .pl-pay-radio input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--pl-accent);
	cursor: pointer;
}
.pl-modal .pl-pay-brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 30px;
	border: 1px solid var(--pl-border);
	border-radius: 6px;
	background: #fff;
	color: #44506a;
	font-size: 20px;
	line-height: 1;
}
.pl-modal .pl-pay-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pl-modal .pl-pay-name {
	font-size: var(--pl-text);
	font-weight: 600;
	color: #2f3640;
}
.pl-modal .pl-pay-meta {
	font-size: var(--pl-text-sm);
	color: var(--pl-muted);
}
.pl-modal .pl-pay-item-actions {
	flex: 0 0 auto;
}
.pl-modal .pl-pay-item-actions .payment-profile-delete {
	background: none;
	border: none;
	padding: 6px;
	color: #a5a5a5;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s;
}
.pl-modal .pl-pay-item-actions .payment-profile-delete:hover {
	color: #b3261e;
}
/* manual billing does not charge anything, so the choice is still there and
   still posts — it simply stops being what the modal is about */
.pl-modal .pl-pay-list--muted .pl-pay-radio,
.pl-modal .pl-pay-list--muted .pl-pay-brand,
.pl-modal .pl-pay-list--muted .pl-pay-info {
	opacity: 0.55;
}
.pl-modal .pl-pay-list--muted .pl-pay-item--current {
	background: #fff;
}

/* ── empty state ── */
.pl-modal .pl-pay-empty {
	border: 1px dashed var(--pl-border);
	border-radius: 10px;
	padding: 28px 20px;
	text-align: center;
}
.pl-modal .pl-pay-empty i {
	font-size: 26px;
	color: #c4ccd8;
}
.pl-modal .pl-pay-empty-title {
	margin: 12px 0 4px;
	font-size: var(--pl-text);
	font-weight: 600;
	color: #2f3640;
}
.pl-modal .pl-pay-empty-text {
	margin: 0;
	font-size: var(--pl-text-sm);
	color: var(--pl-muted);
}

/* ── add a method ──
   Collapsed by default. The strip was 62px of uppercase blue for what is the
   secondary task; these are three ordinary choices that open a panel. */
.pl-modal .pl-pay-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: auto;
	height: auto;
	background: none;
	box-shadow: none;
}
.pl-modal .pl-pay-choice {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	max-width: none;
	height: 38px;
	padding: 8px 16px;
	border: 1px solid #d7dde5;
	border-radius: 6px;
	background: #fff;
	color: #44506a;
	font-family: var(--pl-font);
	font-size: var(--pl-text-sm);
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pl-modal .pl-pay-choice:hover {
	background: #f6f8fb;
	border-color: #b9c3d0;
	color: #1f2937;
}
.pl-modal .pl-pay-choice.active {
	background: var(--pl-accent-soft, #d2e6f6);
	border-color: var(--pl-accent);
	color: var(--pl-accent-strong);
}
.pl-modal .pl-pay-choice i {
	font-size: 11px;
}
.pl-modal .pl-pay-form {
	background: none;
	margin: 0;
}
.pl-modal .pl-pay-form--open {
	margin-top: 18px;
	padding: 20px;
	border: 1px solid var(--pl-border);
	border-radius: 10px;
	background: #fbfcfe;
}
/* the panes are opened by the handler, so nothing here may show one */
.pl-modal .paytab-content--container {
	display: none;
}
/* the entry partials open with their own <h3>; inside the panel it is a field
   group label, not a page heading */
.pl-modal .pl-pay-form .payment-option > h3 {
	font-size: var(--pl-text-sm);
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--pl-muted);
	margin: 0 0 14px;
	padding: 0;
	border: none;
}
.pl-modal .pl-pay-form .payment-buttons {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #e9edf3;
}

/* ── button loading state ── */
.pl-modal .pl-btn-loading {
	opacity: 0.75;
	pointer-events: none;
}

@media (max-width: 767px) {
	.pl-modal .modal-body {
		padding: 20px 16px;
	}
	.pl-modal .modal-header,
	.pl-modal .modal-footer {
		padding-left: 16px;
		padding-right: 16px;
	}
	/* stacked, the footer reads top-to-bottom, so the main action goes first */
	.pl-modal .modal-footer {
		flex-wrap: wrap;
		gap: 12px;
	}
}

/* Payment Settings */
.autopay-picker label {
	display: block;
}

/* Notification Settings */
#notification-settings .notification {
	width: 100%;
}

/* Pagination (original */
.page-item+.page-item .page-link, .pagination li+li>a:not(.page-link) {
	margin-left: initial !important;
	min-width: auto;
}
.dashboard .pagination>li>a:not(.page-link) {
	line-height: inherit !important;
	border: none;
}
.dashboard  ul.pagination li a, .dashboard  ul.pagination li button {
    display: block;
    padding: 0.0666666667rem 0.6666666667rem 0.0666666667rem !important;
    color: #999999;
    background: none;
    border-radius: 3px !important;
    font-weight: normal;
    font-size: 1em;
    line-height: inherit;
    transition: background-color 300ms ease-out;
}

/* Braintree styles */
#card-image {
    position: absolute;
    top: 2.5em;
    right: 1em;
    width: 50px;
    height: 28px;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/346994/card_sprite.png);
    background-size: 86px 458px;
    border-radius: 4px;
    background-position: -100px 0;
    background-repeat: no-repeat;
    margin-bottom: 1em;
}

#card-image.visa {
    background-position: 0 -400px;
}

#card-image.master-card {
    background-position: 0 -283px;
}

#card-image.american-express {
    background-position: 0 -373px;
}

#card-image.discover {
    background-position: 0 -166px;
}

#card-image.maestro {
    background-position: 0 -254px;
}

#card-image.jcb {
    background-position: 0 -224px;
}

#card-image.diners-club {
    background-position: 0 -136px;
}

.input-wrapper {
    border-radius: 2px;
    height: 2.75em;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 5px 10px;
    margin-bottom: 1em;
    background: #fff;
}

.invalid-feedback {
    margin-top: -0.75rem !important;
    margin-bottom: 1rem !important;
}

.braintree-hosted-fields-invalid {
    border-color: #E53A40;
    animation: shake 500ms cubic-bezier(0.2, 1.3, 0.7, 1) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes  cardIntro {
    0% {
        transform: scale(0.8) translate(0, 0);
        opacity: 0;
    }

    100% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
}

@keyframes  shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(1px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-3px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(3px, 0, 0);
    }
}
/*
    SELECT2 - MULTISELECT TAG
 */
ul li.select2-selection__choice{    
    background-color: #26B4FF !important;
    color: #fff !important;
    border-color: #26B4FF !important;
}
ul li.select2-selection__choice .select2-selection__choice__remove{
    color: #fff !important;
}
.select2-selection.select2-selection--multiple{
    color: var(--pl_textColorFields) !important;
    border: 1px solid var(--pl_inputFieldsBorder) !important;
    background: var(--pl_background) !important;
    box-shadow: none !important;
}
/* /Braintree styles */



/** Custom CSS New Design */

/* Collapses */
.row .row.collapse {
    display: inline;
}
.sidenav-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    display: block;
    width: .42em;
    height: .42em;
    border: 1px solid;
    border-top: 0;
    border-right: 0;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}
.sidenav-item.open:not(.sidenav-item-closing)>.sidenav-toggle::after {
	content: "";
    position: absolute;
    top: 50%;
    display: block;
    width: .42em;
    height: .42em;
    border: 1px solid;
    border-top: 0;
    border-right: 0;
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
}

/* ---------- Navbar --------- */
/*.layout-container .layout-navbar {
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-shadow: none;
}*/

.navbar-nav-title h4 {
    padding-bottom: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #0C344E;
    margin-bottom: 5px;
    font-size: 28px;
  }
  
  .navbar-nav-title p {
    margin-bottom: 0;
    font-family: 'Roboto', sans-serif;
    color: #0C344E;
    font-weight: 300;
    font-size: 13px;
  }
  
  .navbar-nav-title p span {
    color: #006DC2;
  }
  
  .bg-navbar-theme .navbar-nav .nav-link .profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center right;
    margin-right: 1rem;
  }
  
  .bg-navbar-theme .navbar-nav .nav-link span {
    color: #0C344E;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 13px;
  }
  
  /* .bg-navbar-theme .navbar-nav .dropdown-toggle::after {
    width: 0.5em;
    height: 0.5em;
    color: #0071BC;
    border: 2px solid;
  } */
  
  .navbar-filters {
    /*background-color: #fff !important;*/
    padding-bottom: 4rem;
    justify-content: space-between;
  }
  
  .navbar-filters input {
    height: 60px;
    border-color: #DEE9F8;
    -webkit-box-shadow: 0px 10px 20px -18px rgba(213, 224, 232, 1);
    -moz-box-shadow: 0px 10px 20px -18px rgba(213, 224, 232, 1);
    box-shadow: 0px 10px 20px -18px rgba(213, 224, 232, 1);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
  }
  
  .navbar-filters input::placeholder {
    color: #99A5AD;
  }
  
  .navbar-filters .navbar-filters-input {
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  
  .navbar-filters .navbar-filters-input button {
    left: inherit;
    right: 1rem;
  }
  
  .navbar-filters .navbar-filters-search .button {
    display: flex;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 0;
    border-radius: 0 4px 4px 0;
    background-color: #0071BC;
    height: 60px;
  }
  
  .navbar-filters .navbar-filters-add {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 1rem;
  }
  
  .navbar-filters .navbar-filters-add span {
    width: 100%;
    height: 100%;
  }
  
  .navbar-filters .navbar-filters-add .button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    padding: 0;
    width: 100%;
    height: 60px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #008425;
    padding: 1rem;
  }
  
  .demo-navbar-notifications .fa-bell {
    color: #006DC2;
    font-size: 30px;
  }
  
  ion-icon {
    --ionicon-stroke-width: 16px;
  }
  
  /* ---------- Main Schedule ---------- */
  .main-schedule {
    background-color: #fafafa;
    -webkit-box-shadow: 0px -16px 20px -18px rgba(213, 224, 232, 1);
    -moz-box-shadow: 0px -16px 20px -18px rgba(213, 224, 232, 1);
    box-shadow: 0px -16px 20px -18px rgba(213, 224, 232, 1);
  }
  
  /* --- Pagination limit --- */
  .pagination-limit-wrapper {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: var(--pl_primary);
    font-size: 15px;
  }
  
  .pagination-limit.pagination-limit-wrapper select {
    width: 91px;
    height: 48px;
    border: 1px solid #D1D5DA;
    margin: 0 8px;
    color: #6B7A84;
    padding-left: 1rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 15px;
    background-color: #FFFFFF;
  }
  
  /* --- Table ---  */
  .schedule-table {
    border-collapse: separate;
    border-spacing: 0 7px;
    background-color: #fafafa;
  }
  
  .schedule-table th,
  .schedule-table td {
    padding-left: 2%;
    padding-right: 2%;
  }
  
  .schedule-table td {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .schedule-table .schedule-table-title {
    background-color: #fafafa;
    border-bottom: 1px solid #e4e7f2;
  }
  
  .schedule-table .schedule-table-title tr {}
  
  .schedule-table .schedule-table-title tr::after {}
  
  .schedule-table .schedule-table-title th {
    font-family: 'Roboto', sans-serif;
    color: #09334F;
    font-weight: 400;
    font-size: 13px;
    padding-bottom: 2rem;
    position: relative;
  }
  
  .schedule-table .schedule-table-title th::after {
    content: '';
    display: block;
    height: 1px;
    background: #D1D5DA;
    bottom: 13px;
    width: 100%;
    position: absolute;
    left: 0;
  }
  
  .schedule-table .schedule-table-title th:nth-child(1) {
    width: 25% padding-left: 1rem;
  }
  
  .schedule-table .schedule-table-title th:nth-child(2) {
    width: 23%;
  }
  
  .schedule-table .schedule-table-title th:nth-child(3) {
    width: 23%;
  }
  
  .schedule-table .schedule-table-title th:nth-child(4) {
    width: 11%;
  }
  
  .schedule-table .schedule-table-title th:nth-child(5) {
    width: 11%;
  }
  
  .schedule-table .schedule-table-title th:nth-child(6) {
    width: 4%;
  }
  
  .schedule-table .schedule-table-main tr td {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #404B53;
    font-size: 14px;
    border-bottom: 1px solid #e4e7f2;
    border-top: 1px solid #e4e7f2;
  }
  
  .schedule-table .schedule-table-main tr:nth-child(odd) {
    background-color: #ffffff;
  }
  
  .schedule-table .schedule-table-main tr:nth-child(even) {
    background-color: #f0f2f7;
  }
  
  .schedule-table .schedule-table-main tr td:first-child {
    border-left: 1px solid #e4e7f2;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  .schedule-table .schedule-table-main tr td:last-child {
    border-right: 1px solid #e4e7f2;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  .schedule-table .schedule-table-main .button {
    background-color: inherit;
    padding-right: 5px;
      padding-left: 5px;
  }
  
  .schedule-table-main .ion-md-trash {
    color: #b45a21;
    font-size: 18px !important;
  }
  
  .schedule-table-main .ion-md-create {
    color: #2f73c8;
    font-size: 18px !important;
  }
  
  /* ----- Pagination ----- */
  .pagination-wrapper {
    margin-top: 2rem;
  }
  
  .pagination-wrapper .pagination-left {
    justify-content: flex-start !important;
  }
  
  .pagination-wrapper .pagination-left label {
    color: #0C344E;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 15px;
  }
  
  .pagination-wrapper .pagination-right {
    align-items: center;
  }
  
  .pagination-wrapper .pagination-right .pageCurrent.current {
    background-color: #0578C7 !important;
    border: 1px solid #006DC2 !important;
    display: flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    height: 2rem;
    color: #FFFFFF !important;
    font-size: 15px;
  }
  
  .pagination-wrapper .pagination-right .pageCurrent {
    color: #0C344E;
  }
  
  .pagination-wrapper .pagination-right .pageMove {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #0C344E;
    font-size: 15px;
    border: none;
  }
  
  .pagination-wrapper .pagination-right .pageMove .pageMove-next::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
  }
  /* ------ Modal ----- */
  .reveal-modal-bg{
    display: block;
  }
  /* ----- Footer ----- */
  .layout-footer {
    display: none !important;
  }

  /* alert modal */
  .alert--modal {
    padding: 20px !important;
    text-align: center;
    background-color: #f44336;
    color: white !important;
    position: fixed !important; 
    width: 100% !important; 
    z-index: 9999 !important;
  }
  .alert--modal .close {
    text-decoration: underline;
    cursor: pointer;
  }

  /* datepicker range */
  .datepicker span.month.disabled {
    color: #eee; 
  }
  .change-rate-modal input[name="start_date"] {
    cursor: pointer;
    background: #fff;
  }

  /* payment forms */
  #invoice-payment .row, #add-payment-profile-modal .row {
    display: block;
  }

  /* modal buttons */
  .reveal-modal .columns button {
    margin: 1rem 0 0;
  }

  #note-modal .columns button {
    margin: 0;
  }

  /** Custom CSS New Design */

/* --- REPORT TABLE ---  */
  .reports-table-vue {
    border-collapse: separate;
    border-spacing: 0 7px;
    background-color: transparent;
  }
  
  .reports-table-vue th,
  .reports-table-vue td {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  
  .reports-table-vue td {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .reports-table-vue .schedule-table-title {
    background-color: transparent;
    border-bottom: 1px solid #e4e7f2;
  }
  
  .reports-table-vue .schedule-table-title tr {}
  
  .reports-table-vue .schedule-table-title tr::after {}
  
  .reports-table-vue .schedule-table-title th {
    font-family: 'Roboto', sans-serif;
    color: #09334F;
    background-color: #f5f5f5;
    font-weight: 400;
    font-size: 13px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /*position: relative;*/
  }
  
  .reports-table-vue .schedule-table-title th::after {
    content: '';
    display: block;
    height: 1px;
    background: #D1D5DA;
    bottom: 0px;
    width: 100%;
    position: absolute;
    left: 0;
  }
  
  .reports-table-vue .schedule-table-title th:nth-child(1) {
    width: 25% padding-left: 1rem;
  }
  
  .reports-table-vue .schedule-table-title th:nth-child(2) {
    width: 23%;
  }
  
  .reports-table-vue .schedule-table-title th:nth-child(3) {
    width: 23%;
  }
  
  .reports-table-vue .schedule-table-title th:nth-child(4) {
    width: 11%;
  }
  
  .reports-table-vue .schedule-table-title th:nth-child(5) {
    width: 11%;
  }
  
  .reports-table-vue .schedule-table-title th:nth-child(6) {
    width: 4%;
  }
  
  .reports-table-vue .schedule-table-main tr td {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #404B53;
    font-size: 14px;
    border-bottom: 1px solid #e4e7f2;
    border-top: 1px solid #e4e7f2;
  }
  
  .reports-table-vue .schedule-table-main tr:nth-child(odd) {
    background-color: #ffffff;
  }
  
  .reports-table-vue .schedule-table-main tr:nth-child(even) {
    background-color: #f0f2f7;
  }
  
  .reports-table-vue .schedule-table-main tr td:first-child {
    border-left: 1px solid #e4e7f2;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  .reports-table-vue .schedule-table-main tr td:last-child {
    border-right: 1px solid #e4e7f2;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  .reports-table-vue .schedule-table-main .button {
    background-color: inherit;
    padding-right: 5px;
      padding-left: 5px;
  }
  
  .reports-table-vue-main .ion-md-trash {
    color: #b45a21;
    font-size: 18px !important;
  }
  
  .reports-table-vue-main .ion-md-create {
    color: #2f73c8;
    font-size: 18px !important;
  }

  .advanced_date .pl_date_input_form{
    display: flex;
    align-items: center;
  }
  .advanced_date .pl_date_input_form .advanced_search_label{
    flex:0.15;
  }
  .advanced_date .pl_date_input.pl_date_start{
    flex: 0.85;
    margin-bottom: 0px;
  }
  .select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

.imm-loader {
  position: relative;
  z-index: 1;
  width: 100%;
  width: 100px;
  display: block;
  height: 140px;
  text-align: center;
}

.imm-loader:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  padding-top: 80px;
  font-size: .875rem;
  line-height: 25px;
  text-transform: uppercase;
  font-family: @font-serif;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-40px);
  text-indent: .5rem;
}

.imm-loader:after {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background: url('/assets/images/icons/ring-alt.svg');
  background-size: cover;
  position: absolute;
  top: 50%;
  margin: 0 auto;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 10;
}

.imm-loader--centered {
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 1;
    margin-top: -75px;
    width: 120px;
    height: 120px; 
}

.imm-loader--centered:before {
  content: "Loading...";
}

.imm-loader span {
  position: relative;
  top: 75%;
  font-size: .875rem;
  line-height: 25px;
  text-transform: uppercase;
  color: @color-gray;
  font-family: @font-serif;
}
  
.cl-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: .7145rem !important;
  line-height: 1.5;
  width: 15px;
  height: 15px;
  text-align: center;
  background: #006fbf;
  color: #fff;
}

#layout-sidenav .sidenav-inner .sidenav-icon.fas.ion.ion-md-mail.d-block{
  font-size: 25px !important;
}

.fa-fix-icon{
  font-size: 1.7rem !important;
}

@media only screen and (max-width: 990px) {
  .demo-navbar-user {
    display: none;
  }
  .imm-loader--centered {
    left: 35%;
  }
}

@media only screen and (min-width: 990px) {
  .mobile-nav {
    display: none;
  }
}

/** PL-227 */
.ach_row {
  width:100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.ach_row .business {s
  display:none;
}

#parking-account-vehicles-section .vehicle-account-settings {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid #DEE9F8;
}

#parking-account-vehicles-section .vehicle-limit-override-link {
  display: inline-flex;
  align-items: center;
  margin: 22px 0 0 auto;
  padding: 0;
  color: #0071BC;
  font-size: 13px;
  font-weight: 600;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

#parking-account-vehicles-section .vehicle-limit-override-link:hover,
#parking-account-vehicles-section .vehicle-limit-override-link:focus {
  color: #005A96;
  border-bottom-color: #005A96;
}

#parking-account-vehicles-section .vehicle-limit-override-link.hidden {
  display: none !important;
}

#parking-account-vehicles-section .vehicle-setting-card {
  flex: 1 1 260px;
  min-width: 240px;
  background: transparent;
  border: 0;
  padding: 0 28px 0 0;
  margin: 0;
}

#parking-account-vehicles-section .vehicle-setting-card + .vehicle-setting-card {
  padding-left: 28px;
  border-left: 1px solid #DEE9F8;
}

#parking-account-vehicles-section .vehicle-setting-label {
  color: #0071BC;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-family: Roboto, sans-serif;
}

#parking-account-vehicles-section .vehicle-setting-segmented,
#parking-account-vehicles-section .vehicle-limit-override-controls,
#vehicle-limit-modal .vehicle-limit-override-controls {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#parking-account-vehicles-section .vehicle-setting-option {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 7px 14px !important;
  border: 1.5px solid #DEE9F8;
  border-radius: 6px;
  background: #fff;
  color: #0C344E;
  font-size: 13px;
  font-weight: 600;
  font-family: Roboto, sans-serif;
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
}

#parking-account-vehicles-section .vehicle-setting-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none;
}

#parking-account-vehicles-section .vehicle-setting-option.is-active {
  border-color: #0071BC;
  background: #F3F8FC;
  color: #0071BC;
}

#parking-account-vehicles-section .vehicle-setting-option.is-disabled {
  cursor: default;
  opacity: 0.7;
}

#parking-account-vehicles-section .vehicle-setting-option:focus-within {
  outline: 2px solid #0071BC;
  outline-offset: 2px;
}

#parking-account-vehicles-section .vehicle-limit-override-input,
#vehicle-limit-modal .vehicle-limit-override-input {
  width: 64px !important;
  max-width: 64px !important;
  display: inline-block !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid #DEE9F8 !important;
  border-radius: 6px;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
  color: #0C344E;
  background: #fff;
}

#parking-account-vehicles-section .vehicle-setting-chip,
#vehicle-limit-modal .vehicle-setting-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: #F4F6F8;
  color: #0C344E;
  font-family: Roboto, sans-serif;
}

#parking-account-vehicles-section .vehicle-setting-chip.is-override,
#vehicle-limit-modal .vehicle-setting-chip.is-override {
  background: #F3F8FC;
  color: #0071BC;
}

#parking-account-vehicles-section .vehicle-setting-hint,
#vehicle-limit-modal .vehicle-setting-hint {
  display: block;
  margin-top: 8px;
  color: #6B7C8A;
  font-size: 12px;
  line-height: 1.4;
  font-family: Roboto, sans-serif;
}

#parking-account-vehicles-section .vehicle-setting-save,
#vehicle-limit-modal .vehicle-setting-save {
  margin: 0 !important;
  background-color: #006FBF !important;
  color: #fff !important;
  border-color: #006FBF !important;
}

#parking-account-vehicles-section .vehicle-setting-card .msg,
#vehicle-limit-modal .msg {
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 12px;
}

@media (max-width: 768px) {
  #parking-account-vehicles-section .vehicle-setting-card,
  #parking-account-vehicles-section .vehicle-setting-card + .vehicle-setting-card {
    flex-basis: 100%;
    border-left: 0;
    padding: 0 0 16px;
  }

  #parking-account-vehicles-section .vehicle-setting-card + .vehicle-setting-card {
    border-top: 1px solid #DEE9F8;
    padding-top: 16px;
  }

  #parking-account-vehicles-section .vehicle-limit-override-link {
    margin: 8px 0 0;
    width: 100%;
  }
}