/*
 *
 *  OKHAND.CA GTA GARAGE CSS
 *  © 2023 OKHAND.CA 
 *  ALL RIGHTS RESERVED
 *  Date: February 2023
 *  Author: https://steamcommunity.com/id/nung221/
 *  Version: 1.0
 *
*/

@view-transition
{
	navigation: auto;
}

@font-face {
	font-family: 'PLATEFONT';
	src: url('../files/fonts/DealerplateCalifornia/font.woff') format('woff'),
	url('../files/fonts/DealerplateCalifornia/font.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.nolagglass
{
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
	background: rgba(61, 61, 61, 0.349);
	background:
    radial-gradient(40vmax 40vmax at -10% 35%, rgba(255,90,95,.22) 0 55%, transparent 75%),
    radial-gradient(45vmax 40vmax at 110% 15%, rgba(155,92,246,.20) 0 55%, transparent 75%),
    radial-gradient(50vmax 45vmax at 50% 112%, rgba(0,212,255,.25) 0 55%, transparent 75%),
    #0f0f12;
}

.aboutnoglass
{
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
	background: rgba(61, 61, 61, 0.349);
	background:
    /* Main feature blobs */
    radial-gradient(35vmax 35vmax at 15% 20%, rgba(255, 60, 120, 0.22) 0 48%, transparent 70%),
    radial-gradient(45vmax 40vmax at 85% 15%, rgba(140, 90, 255, 0.25) 0 50%, transparent 72%),
    radial-gradient(55vmax 50vmax at 50% 115%, rgba(0, 220, 255, 0.28) 0 55%, transparent 78%),

    /* Secondary depth blobs */
    radial-gradient(30vmax 30vmax at 75% 65%, rgba(255, 90, 200, 0.16) 0 45%, transparent 70%),
    radial-gradient(28vmax 28vmax at 25% 70%, rgba(90, 180, 255, 0.14) 0 45%, transparent 70%),

    /* Small accent glows */
    radial-gradient(18vmax 18vmax at 10% 85%, rgba(180, 120, 255, 0.12) 0 40%, transparent 70%),
    radial-gradient(16vmax 16vmax at 92% 80%, rgba(255, 120, 160, 0.12) 0 40%, transparent 70%),

    #0b0b10;
}

.glass
{
	background: rgba(255, 255, 255, 0.2) !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
	backdrop-filter: blur(5px) !important;
	-webkit-backdrop-filter: blur(5px) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.dChannel
{
	padding: 0.3em 0.5em;
	border-radius: 7px;
	background-color: #2C2C30;
	color: white;
	font-weight: 600;
	text-decoration: none;
}

.dChannel:hover
{
	background-color: #414148;
}

/* Base Styles */

:root
{
	--okhand: #FFDD67;
	--okhandHover: #d3b64e;
	--fileTypeIconPaddingLeft: 35px;
	--ugreen: #1effbc;
	--upurple: #6369d1;
	--ured: #F96E46;
	--uyellow: #F4D06F;
	--ublue: #2DC7FF; 
	--ublue2: #89cff0; 
	--ubluePast: #56cefa; 
	--ugreenPast: #6cfacf;
	--darkFont: rgb(20, 20, 20);
	--lightFont: rgb(247, 247, 247);
	--bootstrapGrey: #343a40;
	--bootstrapLightGrey: rgba(0, 0, 0, .125);
	--bootstrapBlue: #007bff;
	--bootstrapBorder: #dee2e6;
	--mainBodyBg: rgba(255, 255, 255, 0.95);
	--gtaplus: #FFAE01;
	--owned-card-bg: rgba(19, 26, 39, 0.3);
    --owned-card-bg-hover: rgba(24, 34, 52, .5);
}

body
{
	background-image: url(../img/bg.webp);
    background-repeat: repeat;
    background-size: 256px;
}

body[data-no-bg]
{
	background-image: none !important;
	background-color: var(--mainBodyBg);
}

a
{
	text-underline-offset: 2px;
}

.underlined
{
	text-decoration: underline;
	text-underline-offset: 2px;
}

.darkBody
{
	background-color: #0B0B0B;
	background: url("../img/bg.webp");
	background-repeat: repeat;
    background-size: 256px;
}

.bg-custom-dark
{
	background-color: #141618 !important;
}

#lightMain
{
	color: white;
}

nav
{
	z-index: 99;
	border-bottom: 2px solid var(--okhand);
}

.question-sign::after
{
	background-image: url("../img/theme/light/question.webp");
    background-size: 18px;
    display: inline-block;
    width: 18px;
	height: 18px;
    content:"";
	vertical-align: middle;
	margin-top: -5px;
	margin-left: 5px;
}

.initTool,
.initToolBottom,
.question-sign,
.helpCursor
{
	cursor: help !important;
}

.text-link
{
	color: rgb(45, 134, 250);
	font-weight: 600;
	cursor: url(../img/cursor.png) 8 0, auto !important;
}

.text-link:hover
{
	text-decoration: underline;
}

.btn
{
	cursor: url(../img/cursor.png) 8 0, auto !important;
}

.cCursor
{
	cursor: url(../img/cursor.png) 8 0, auto !important;
}

.btn-okhand
{
	background-color: var(--okhand);
	font-weight: bold;
}

.btn-okhand:hover
{
	background-color: var(--okhandHover);
}

.antiOverScroll
{
	overscroll-behavior: contain;
}

@media (max-width: 991.98px) {
    .antiOverScroll {
        overscroll-behavior: auto !important;
    }
}

#scroll-to-top {
	position: fixed;
	bottom: 20px;
	right: 80px;
	z-index: 999;
}
#scroll-to-bottom {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
}

.arrowTop,
.arrowBottom
{
	width: 30px;
}
.arrowBottom
{
	transform: rotate(180deg);
}

.btn-custom
{
	border-radius: 50%;
	border: 1px solid var(--darkFont);
	width: 50px;
	height: 50px;
	background-color: var(--okhand);
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn-custom:hover
{
	background-color: var(--okhandHover);
}

.clearCarFilter,
.resetCarFilter {
	cursor: pointer;
	color: var(--bootstrapBlue);
}

#addVehicleForm,
#addGarageForm
{
	transition: all .15s;
}

.abbr
{
	text-decoration: underline dotted;
}

.wrench {
	text-shadow:
    0 0 2px rgb(113, 96, 0),
    0 0 4px gold,
    0 0 6px goldenrod
}

.smolEmoji
{
	width: 1.5em !important;
	height: 1.5em !important;
	margin-top: -7px;
}

.fw6
{
	font-weight: 600 !important;
}

.bg-banned
{
	background-color: #ffa8a809;
	background: repeating-linear-gradient( -45deg, #f7454509, #f7454509 13px, #ffa8a809 13px, #ffa8a809 25px );
	background-size: 29px 100%;
}

.imgModalText a
{
	color: rgba(110,168,254,1) !important;
}

#dropdown-toggle-uc
{
	border: 1px solid #ced4da;
}

#editModal .modal-dialog { pointer-events: auto; }

/* 
	Dark Theme Edits
	> data-bs-theme="dark"
*/
body[data-bs-theme="dark"],
body[data-bs-theme="dark"] nav
{
	--bs-body-bg: #0E1116;

	/* Main BG */
	--mainBodyBg: #0E1116;
	--mainBodyBgHover: #252f3d;
	--bs-body-bg-rgb: 14, 17, 22;

	/* Footer BG */
	--bs-dark-rgb: 11, 13, 17;

	--bs-body-color: #E7ECF3;
	--bs-body-color-rgb: 231, 236, 243;

	--bs-secondary-color: #AAB4C6;
	--bs-secondary-color-rgb: 170, 180, 198;

	--bs-subtle-color: #474a51;
	--bs-subtle-color-rgb: 71, 74, 81;

	--bs-border-color: #263041;
	--bs-border-color-translucent: rgba(38, 48, 65, 0.5);

	/* Nav */
	--bs-tertiary-bg: #0E1116;
	--bs-tertiary-bg-rgb: 14, 17, 22;

	/* Core brand colors */
	--bs-primary: #3772ff;
	--bs-secondary: #9AA4B2;
	--bs-success: #417b5a;
	--bs-warning: #F4D06F;
	--bs-danger: #D64045;
	--bs-danger-subtle: #d6404517;
	--bs-info: #2DC7FF;

	/* Links */
	--bs-link-color: var(--bs-primary);
	--bs-link-hover-color: #7A80E8;

	/* Badges */
	--bs-primary-rgb: 55, 114, 255;
	--bs-success-rgb: 65, 123, 90;

	--bs-primary-bg-subtle: #2751b3;
	--bs-primary-text-emphasis: #dee7ff;
	--bs-success-bg-subtle: #2b523c;
	--bs-success-text-emphasis: #c0ffdb;
}

body[data-bs-theme="dark"] .toast
{
	border: 1px solid var(--bs-body-color) !important;
}

body[data-bs-theme="dark"] #share_url_pre
{
	background-color: var(--mainBodyBgHover);
}

body[data-bs-theme="dark"] .form-check-input:checked
{
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

body[data-bs-theme="dark"] #dropdown-toggle-uc
{
	border-color: var(--bs-border-color);
}

body[data-bs-theme="dark"] .editVehicleIconAdm
{
	background-color: var(--bs-danger);
}

body[data-bs-theme="dark"] .shareBtn,
body[data-bs-theme="dark"] .addCarBtn
{
	background-color: var(--bs-primary);
}

body[data-bs-theme="dark"] .features-list
{
	border-color: var(--bs-border-color);
}

body[data-bs-theme="dark"] .text-bg-light
{
	background-color: var(--bs-body-color) !important;
	color: var(--mainBodyBg) !important;
}

body[data-bs-theme="dark"] .btn-primary
{
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
}

body[data-bs-theme="dark"] .btn-outline-danger
{
	--bs-btn-hover-bg: var(--bs-danger);
	--bs-btn-hover-border-color: var(--bs-danger);
	--bs-btn-color: var(--bs-danger);
  	--bs-btn-border-color: var(--bs-danger);
}

/* Nav autocomplete */
body[data-bs-theme="dark"] .ui-autocomplete
{
	background-color: var(--mainBodyBg);
	color: var(--bs-body-color);
	overflow: hidden;
}

/* Popover */
[data-bs-theme="dark"] .popover
{
	--bs-popover-border-color: var(--bs-body-color);
}

[data-bs-theme="dark"] a.text-dark
{
	color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .question-sign::after
{
	background-image: url("../img/theme/dark/question.webp");
}

.popDisplay
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.popDisplay small
{
	font-weight: 100;
}

/* Random car highlight */
[data-bs-theme="dark"] .table-warning
{
	--bs-table-bg: var(--bs-secondary-color);
	color: var(--mainBodyBg) !important;
	--bs-table-border-color: var(--bs-border-color);
}

/* Random car highlight text */
[data-bs-theme="dark"] .table-warning a
{
	color: var(--mainBodyBg) !important;
}

/* Edit vehicle button */
[data-bs-theme="dark"] .editVehicleBtn,
[data-bs-theme="dark"] .editVehicleIcon
{
	border: none;
	background-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .editVehicleBtn .img
{
	background-image: url("../img/theme/dark/ls_customs.webp");
}

[data-bs-theme="dark"] .editVehicleBtn:hover
{
	background-color: var(--bs-secondary-color);
}

/* Garage Reorder button */
[data-bs-theme="dark"] .garageReorder
{
	background-color: var(--bs-body-color);
	border: none;
}

[data-bs-theme="dark"] .garageReorder .img
{
	background-image: url("../img/theme/dark/reorder_garage.webp");
}

[data-bs-theme="dark"] .garageReorder:hover
{
	background-color: var(--bs-secondary-color);
}

/* Table of contents and controls menu */
[data-bs-theme="dark"] .table-of-contents,
[data-bs-theme="dark"] .controls-menu
{
	background-color: var(--mainBodyBg);
	border: 1px solid var(--bs-body-color);
	border-left: none;
}

[data-bs-theme="dark"] .table-of-contents
{
	border: 1px solid var(--bs-body-color);
	border-left: none;
}

[data-bs-theme="dark"] .toc-header
{
	background-color: inherit;
}

[data-bs-theme="dark"] .controls-menu
{
	border: 1px solid var(--bs-body-color);
	border-right: none;
}

[data-bs-theme="dark"] .controls-menu .controls:hover
{
	background-color: var(--mainBodyBgHover);
}

/* Dark Theme Controls Menu icons */
[data-bs-theme="dark"] .randomCar .img
{
	background-image: url("../img/theme/dark/random.webp");
}

[data-bs-theme="dark"] #showLast10 .img
{
	background-image: url("../img/theme/dark/last10.webp");
}

[data-bs-theme="dark"] #showFav .img
{
	background-image: url("../img/theme/dark/favorite.webp");
}

[data-bs-theme="dark"] #centerOVT .img
{
	background-image: url("../img/theme/dark/recenter.webp");
}

[data-bs-theme="dark"] #topOVT .img
{
	background-image: url("../img/theme/dark/to_top.webp");
}

[data-bs-theme="dark"] .scrollToAdd .img
{
	background-image: url("../img/theme/dark/add_car.webp");
}

[data-bs-theme="dark"] #profShare .img
{
	background-image: url("../img/theme/dark/share_profile.webp");
}

/* Owned vehicles table garage divider */
body[data-bs-theme="dark"] .stickyDivider > td,
body[data-bs-theme="dark"] .floorDivider > td
{
	position: sticky;
    top: 0;
    z-index: 99;
	background-color: var(--mainBodyBgHover);
}

/* 
	Dark Theme Green Accent 
	> --ugreen
*/
/* [data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] */
[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] .table-of-contents,
[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] .controls-menu
{
	border: 1px solid var(--ugreen);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] .table-of-contents
{
	border: 1px solid var(--ugreen);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] #tocLabel
{
	color: var(--ugreen);
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] .controls-menu
{
	border: 1px solid var(--ugreen);
	border-right: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] .randomCar .img
{
	background-image: url("../img/theme/green/random.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] #showLast10 .img
{
	background-image: url("../img/theme/green/last10.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] #showFav .img
{
	background-image: url("../img/theme/green/favorite.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] #centerOVT .img
{
	background-image: url("../img/theme/green/recenter.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] #topOVT .img
{
	background-image: url("../img/theme/green/to_top.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] .scrollToAdd .img
{
	background-image: url("../img/theme/green/add_car.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] #profShare .img
{
	background-image: url("../img/theme/green/share_profile.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ugreen"] #shareSite .img
{
	background-image: url("../img/theme/green/link.webp");
}

/* 
	Dark Theme Purple Accent 
	> --upurple
*/
/* [data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] */
[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] .table-of-contents,
[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] .controls-menu
{
	border: 1px solid var(--upurple);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] .table-of-contents
{
	border: 1px solid var(--upurple);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] #tocLabel
{
	color: var(--upurple);
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] .controls-menu
{
	border: 1px solid var(--upurple);
	border-right: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] .randomCar .img
{
	background-image: url("../img/theme/purple/random.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] #showLast10 .img
{
	background-image: url("../img/theme/purple/last10.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] #showFav .img
{
	background-image: url("../img/theme/purple/favorite.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] #centerOVT .img
{
	background-image: url("../img/theme/purple/recenter.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] #topOVT .img
{
	background-image: url("../img/theme/purple/to_top.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] .scrollToAdd .img
{
	background-image: url("../img/theme/purple/add_car.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] #profShare .img
{
	background-image: url("../img/theme/purple/share_profile.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="upurple"] #shareSite .img
{
	background-image: url("../img/theme/purple/link.webp");
}

/* 
	Dark Theme Red Accent 
	> --ured
*/
/* [data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] */
[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] .table-of-contents,
[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] .controls-menu
{
	border: 1px solid var(--ured);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] .table-of-contents
{
	border: 1px solid var(--ured);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] #tocLabel
{
	color: var(--ured);
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] .controls-menu
{
	border: 1px solid var(--ured);
	border-right: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] .randomCar .img
{
	background-image: url("../img/theme/red/random.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] #showLast10 .img
{
	background-image: url("../img/theme/red/last10.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] #showFav .img
{
	background-image: url("../img/theme/red/favorite.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] #centerOVT .img
{
	background-image: url("../img/theme/red/recenter.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] #topOVT .img
{
	background-image: url("../img/theme/red/to_top.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] .scrollToAdd .img
{
	background-image: url("../img/theme/red/add_car.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] #profShare .img
{
	background-image: url("../img/theme/red/share_profile.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ured"] #shareSite .img
{
	background-image: url("../img/theme/red/link.webp");
}


/* 
	Dark Theme Yellow Accent 
	> --uyellow
*/
/* [data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] */
[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] .table-of-contents,
[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] .controls-menu
{
	border: 1px solid var(--uyellow);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] .table-of-contents
{
	border: 1px solid var(--uyellow);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] #tocLabel
{
	color: var(--uyellow);
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] .controls-menu
{
	border: 1px solid var(--uyellow);
	border-right: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] .randomCar .img
{
	background-image: url("../img/theme/yellow/random.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] #showLast10 .img
{
	background-image: url("../img/theme/yellow/last10.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] #showFav .img
{
	background-image: url("../img/theme/yellow/favorite.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] #centerOVT .img
{
	background-image: url("../img/theme/yellow/recenter.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] #topOVT .img
{
	background-image: url("../img/theme/yellow/to_top.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] .scrollToAdd .img
{
	background-image: url("../img/theme/yellow/add_car.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] #profShare .img
{
	background-image: url("../img/theme/yellow/share_profile.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="uyellow"] #shareSite .img
{
	background-image: url("../img/theme/yellow/link.webp");
}

/* 
	Dark Theme Blue Accent
	> --ublue
*/
[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] .table-of-contents,
[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] .controls-menu
{
	border: 1px solid var(--ublue);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] .table-of-contents
{
	border: 1px solid var(--ublue);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] #tocLabel
{
	color: var(--ublue);
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] .controls-menu
{
	border: 1px solid var(--ublue);
	border-right: none;
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] .randomCar .img
{
	background-image: url("../img/theme/blue/random.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] #showLast10 .img
{
	background-image: url("../img/theme/blue/last10.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] #showFav .img
{
	background-image: url("../img/theme/blue/favorite.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] #centerOVT .img
{
	background-image: url("../img/theme/blue/recenter.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] #topOVT .img
{
	background-image: url("../img/theme/blue/to_top.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] .scrollToAdd .img
{
	background-image: url("../img/theme/blue/add_car.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] #profShare .img
{
	background-image: url("../img/theme/blue/share_profile.webp");
}

[data-bs-theme="dark"][data-accent="on"][data-accent-color="ublue"] #shareSite .img
{
	background-image: url("../img/theme/blue/link.webp");
}


/* 
	Dark Theme Blue2 Accent
	> --ublue2
*/
.colormeublue2
{
	color: #bce6fd !important;
}

.nav-ep-logo
{
	height: 1.2em; 
	margin-top: -5px; 
	margin-right: .4em;
}

.ep-gold-border
{
	border: 1px solid rgba(231, 199, 109, 0.72);
}

/* Popover */
body[data-bs-theme="dark"][data-accent="egg"] .popover
{
	--bs-popover-border-color: rgba(231, 199, 109, 0.72);
}

/* Toast */
body[data-bs-theme="dark"][data-accent="egg"] .toast
{
	border: 1px solid rgba(231, 199, 109, 0.72) !important;
}

/* Edit vehicle button */
[data-bs-theme="dark"][data-accent="egg"] .editVehicleBtn,
[data-bs-theme="dark"][data-accent="egg"] .editVehicleIcon
{
	border: 1px solid rgba(231, 199, 109, 0.72);
	background-color: rgba(255, 247, 224, 0.72);
}

[data-bs-theme="dark"][data-accent="egg"] .editVehicleBtn:hover
{
	background-color: rgba(231, 199, 109, 0.72);
}

body[data-bs-theme="dark"][data-accent="egg"] .table-head-info
{
	color: rgba(255, 247, 224, 0.9);
}

body[data-bs-theme="dark"][data-accent="egg"] .table-head-info h2
{
	color: rgba(255, 244, 209, 0.9);
}

body[data-bs-theme="dark"][data-accent="egg"] #addVehicleCol h2,
body[data-bs-theme="dark"][data-accent="egg"] #addGarageCol h2
{
	color: rgba(255, 244, 209, 0.9);
}

body[data-bs-theme="dark"][data-accent="egg"] #navbarDropdown
{
	overflow: visible;
}

body[data-bs-theme="dark"][data-accent="egg"] .ep-gold-shimmer
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	overflow: visible;
	isolation: isolate;
}

body[data-bs-theme="dark"][data-accent="egg"] #dropdownProfile
{
	position: relative;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

body[data-bs-theme="dark"][data-accent="egg"] .ep-gold-shimmer::before
{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 45px;
	height: 45px;
	transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
	background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,221,145,0.96));
	clip-path: polygon(50% 0%, 54.27% 40.14%, 59.51% 0%, 58.73% 36.25%, 72.7% 0.34%, 67.66% 26.54%, 100% 0%, 58.52% 45.72%, 100% 11.5%, 72.88% 39.2%, 100% 38.25%, 65% 46.7%, 100% 50%, 62.62% 52.75%, 100% 55.75%, 75% 59.77%, 100% 87.75%, 63.52% 58%, 100% 100%, 58.52% 58.52%, 91.25% 100%, 61.44% 69.6%, 70.63% 100%, 56.21% 69.46%, 58.15% 98.77%, 52.73% 61.75%, 50% 100%, 45.75% 58.52%, 43.61% 99.08%, 39.54% 65.58%, 29.07% 99.38%, 35.31% 61.77%, 0% 100%, 29.07% 61.16%, 0% 71%, 33.63% 56.95%, 0% 57.5%, 38.19% 52.75%, 0% 50%, 35.51% 47.4%, 0% 23.54%, 40.07% 44.35%, 0% 13.56%, 31.31% 33.15%, 0% 0%, 35.5% 29.26%, 25.25% 0%, 45.75% 40.15%, 35.25% 0%, 50% 31.78%);

	filter:
		drop-shadow(0 0 5px rgba(255, 235, 170, 0.8))
		drop-shadow(0 0 12px rgba(231, 199, 109, 0.45))
		drop-shadow(0 0 22px rgba(231, 199, 109, 0.22));
	opacity: 0.65;
	z-index: 1;
	pointer-events: none;
	animation:
		steamSparkDrift 16s linear infinite,
		steamSparkPulse 4.2s ease-in-out infinite;
}

body[data-bs-theme="dark"][data-accent="egg"] .ep-gold-shimmer::after
{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	height: 60px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(231, 199, 109, 0.28), rgba(231, 199, 109, 0) 72%);
	filter: blur(6px);
	opacity: 0.9;
	z-index: 0;
	pointer-events: none;
	animation: steamSparkAura 4.2s ease-in-out infinite;
}

@keyframes steamSparkDrift
{
	0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.88); }
	25%  { transform: translate(-47%, -53%) rotate(90deg) scale(1.00); }
	50%  { transform: translate(-50%, -50%) rotate(180deg) scale(0.82); }
	75%  { transform: translate(-53%, -47%) rotate(270deg) scale(1.02); }
	100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.88); }
}

@keyframes steamSparkPulse
{
	0%, 100% { opacity: 0.68; }
	50%      { opacity: 1; }
}

@keyframes steamSparkAura
{
	0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.55; }
	50%      { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}

body[data-bs-theme="dark"][data-accent="egg"]
{
	background-image: url(../img/bg_egg.webp);
    background-repeat: repeat;
    background-size: 256px;
}

[data-bs-theme="dark"][data-accent="egg"] #mainBody
{
    border: 1px solid rgba(120, 175, 220, 0.18);
    box-shadow:
        0 0 0 1px rgba(231, 199, 109, 0.015) inset,
        0 0 30px rgba(231, 199, 109, 0.20),
        0 0 22px rgba(231, 199, 109, 0.015);
}

[data-bs-theme="dark"][data-accent="egg"] nav
{
	border-bottom: 2px solid rgba(231, 199, 109, 0.72);
}

[data-bs-theme="dark"][data-accent="egg"] nav::after
{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: linear-gradient(
		90deg,
		rgba(231, 199, 109, 0),
		rgba(231, 199, 109, 0.32) 12%,
		rgba(231, 199, 109, 0.50) 50%,
		rgba(231, 199, 109, 0.32) 88%,
		rgba(231, 199, 109, 0)
	);
	pointer-events: none;
	filter: blur(3px);
}

[data-bs-theme="dark"][data-accent="egg"] nav .nav-link:hover
{
	color: #edcf7d;
}

/* Random car highlight */
[data-bs-theme="dark"][data-accent="egg"] .table-warning
{
	--bs-table-bg: rgba(255, 247, 224, 0.72);
	color: white !important;
	outline: 2px solid rgba(231, 199, 109, 0.82);
}

[data-bs-theme="dark"][data-accent="egg"] .table-of-contents,
[data-bs-theme="dark"][data-accent="egg"] .controls-menu
{
	border: 1px solid var(--ublue2);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="egg"] .table-of-contents
{
	border: 1px solid var(--ublue2);
	border-left: none;
}

[data-bs-theme="dark"][data-accent="egg"] #tocLabel
{
	color: white;
}

[data-bs-theme="dark"][data-accent="egg"] .controls-menu
{
	border: 1px solid var(--ublue2);
	border-right: none;
}

[data-bs-theme="dark"][data-accent="egg"] .controls:hover
{
	background-color: rgba(231, 199, 109, 0.16);
}

[data-bs-theme="dark"][data-accent="egg"] .randomCar .img
{
	background-image: url("../img/theme/blue2/random.webp");
}

[data-bs-theme="dark"][data-accent="egg"] #showLast10 .img
{
	background-image: url("../img/theme/blue2/last10.webp");
}

[data-bs-theme="dark"][data-accent="egg"] #showFav .img
{
	background-image: url("../img/theme/blue2/favorite.webp");
}

[data-bs-theme="dark"][data-accent="egg"] #centerOVT .img
{
	background-image: url("../img/theme/blue2/recenter.webp");
}

[data-bs-theme="dark"][data-accent="egg"] #topOVT .img
{
	background-image: url("../img/theme/blue2/to_top.webp");
}

[data-bs-theme="dark"][data-accent="egg"] .scrollToAdd .img
{
	background-image: url("../img/theme/blue2/add_car.webp");
}

[data-bs-theme="dark"][data-accent="egg"] #profShare .img
{
	background-image: url("../img/theme/blue2/share_profile.webp");
}

[data-bs-theme="dark"][data-accent="egg"] #shareSite .img
{
	background-image: url("../img/theme/blue2/link.webp");
}

body[data-bs-theme="dark"][data-accent="egg"],
body[data-bs-theme="dark"][data-accent="egg"] nav
{
	--bs-body-bg: #09121d;

	/* Main BG */
	--mainBodyBg: #0c1828;
	--mainBodyBgHover: #15253b;
	--bs-body-bg-rgb: 9, 18, 29;

	/* Footer BG */
	--bs-dark-rgb: 8, 13, 22;

	/* Text */
	--bs-body-color: #edf5fb;
	--bs-body-color-rgb: 237, 245, 251;

	--bs-secondary-color: #b8c7d8;
	--bs-secondary-color-rgb: 184, 199, 216;

	--bs-subtle-color: #70839a;
	--bs-subtle-color-rgb: 112, 131, 154;

	/* Borders */
	--bs-border-color: #30435c;
	--bs-border-color-translucent: rgba(120, 160, 210, 0.18);

	/* Nav */
	--bs-tertiary-bg: #15253b;
	--bs-tertiary-bg-rgb: 11, 20, 32;

	/* Core brand colors */
	--bs-primary: #68cfff;
	--bs-secondary: #c1ae7a;
	--bs-success: #4f9c7c;
	--bs-warning: #e7c76d;
	--bs-danger: #d85d68;
	--bs-danger-subtle: #d85d6818;
	--bs-info: #96e8ff;

	/* Links */
	--bs-link-color: var(--bs-primary);
	--bs-link-hover-color: #e7c76d;

	/* Badges */
	--bs-primary-rgb: 104, 207, 255;
	--bs-success-rgb: 79, 156, 124;

	--bs-primary-bg-subtle: #1f4960;
	--bs-primary-text-emphasis: #e2f7ff;
	--bs-success-bg-subtle: #284b40;
	--bs-success-text-emphasis: #d8fff0;
}

body[data-bs-theme="dark"][data-accent="egg"] .btn-primary
{
	color: var(--bs-body-bg);
}

body[data-bs-theme="dark"][data-accent="egg"] .btn-primary:hover
{
	color: inherit;
}

.ep-logo
{
	height: 1em;
	margin-top: -5px;
	filter:
		drop-shadow(0 0 4px rgba(158, 223, 255, 0.35))
		drop-shadow(0 0 10px rgba(111, 210, 255, 0.22))
		drop-shadow(0 0 18px rgba(111, 210, 255, 0.10));
	transition: filter 0.1s ease-in-out;
	cursor: grab;
}

.ep-logo:hover
{
	filter:
		drop-shadow(0 0 4px rgba(158, 223, 255, 0.65))
		drop-shadow(0 0 10px rgba(111, 210, 255, 0.52))
		drop-shadow(0 0 18px rgba(111, 210, 255, 0.40));
}

.ep-logo:active
{
	cursor: grabbing;
}

/* Select2 BS5 Dark Theme */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
	color: #dee2e6 !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	color: #dee2e6 !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	border: 1px solid var(--bs-gray-600);
}

/* Select2 dropdown search */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
	color:#989898;
}

/* Dropdown Search input */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: transparent !important;
    color: #dee2e6 !important;
}

/* Search options */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    color: #dee2e6 !important;
    border: 1px solid #495057 !important;
	background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
	color: var(--bs-secondary-color)!important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
	background-color: var(--mainBodyBgHover);
	color: #dee2e6 !important;
}

/* User Colors */

.uGreen
{
	background-color: var(--ugreen);
	color: var(--darkFont);
}

.uGreenBorder
{
	border-color: var(--ugreen);
}

.uPurple
{
	background-color: var(--upurple);
	color: var(--darkFont);
}

.uPurpleBorder
{
	border-color: var(--upurple);
}

.uRed
{
	background-color: var(--ured);
	color: var(--darkFont);
}

.uRedBorder
{
	border-color: var(--ured);
}

.uYellow
{
	background-color: var(--uyellow);
	color: var(--darkFont);
}

.uYellowBorder
{
	border-color: var(--uyellow);
}

.uBlue
{
	background-color: var(--ublue);
	color: var(--darkFont);
}

.uBlue2
{
	background-color: #89cff0;
	color: var(--darkFont);
}

.uBlueBorder
{
	border-color: var(--ublue);
}

/* Nav */

#searchInput 
{
	min-width: 150px;
	max-width: 400px;
}

.navbar-nav 
{
	display: flex;
	align-items: center;
}

.navbar-collapse 
{
	justify-content: flex-end;
}

#dropdownProfile {
	font-weight: bolder; 
	border-radius: 50%; 
	width: 35px; 
	height: 35px;
}

.profileIcon {
	font-weight: bolder; 
	border-radius: 50%; 
	width: 65px; 
	height: 65px;
	font-size: 1.5rem;
}

#navbarDropdown::after {
	color: white;
}

@media only screen and (max-width: 992px) {
	#searchInput 
	{
		width: 100%;
	}
	#navbarSupportedContent.collapse.show {
		display: flex !important;
	}
	#navbarSupportedContent
	{
		flex-direction: column;
		justify-content: center !important;
		align-items: center !important;
		gap: 0 !important;
	}
	#navbarSupportedContent ul
	{
		margin-left: 0 !important;
		width: 100% !important;
		justify-content: space-between !important;
	}
	#navbarSupportedContent #dropsearch
	{
		width: 100% !important;
	}
	#navbarSupportedContent #dropsearch:not(input[id="searchInput"])
	{
		justify-content: center !important;
	}
}

/* Select2 Alterations */
/* Somehow this shit is working :D */

.select2-selection__choice
{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: .1em .25em !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	font-size: 0.9rem !important;
}

.select2-search__field::placeholder
{
	color: #989898;
}

.select2-container--bootstrap-5 .select2-selection
{
	display: inline-flex !important;
	flex-direction: row;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--bs-body-bg);
	background-clip: padding-box;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	margin: 0;
  	font-family: inherit;
}

.addtags .select2-container--bootstrap-5 .select2-selection
{
	padding: 0 !important;
	color: red !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

/* Tags + inline search should size to content, not full width */
.select2-container--bootstrap-5 .select2-selection__choice,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0;
}

/* Keep the search field small so it sits nicely after the last tag */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
    min-width: 40px !important;
}

.select2-selection__choice:last-child{
    margin-right: 4px !important;
}

.select2-selection__choice__remove
{
	width: .65rem !important;
  	height: .65rem !important;
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.65rem auto no-repeat !important;
}

.select2-container--default .select2-selection--multiple
{
	padding: .1rem .3rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice
{
	margin-top: 0 !important;
}

.select2-selection__arrow
{
	height: 100% !important;
}

/* Boostrap Alerations */

.badge
{
	font-size: 0.78em;
}

.badge .badge
{
	font-size: 0.9em;
}

.actuallySmall
{
	font-size: 0.7em !important;
	font-weight: 500 !important;
}

.biggerThanSmall
{
	font-size: 1.1em;
	font-weight: 700;
}

.form-control::placeholder
{
	color: #999;
}

.btn-discord
{
	background-color: rgb(88, 101, 242);
	color: white;
	font-weight: bold;	
	position: relative;
}

.btn-discord:hover
{
	background-color: rgb(73, 86, 221);
	color: white;
}

/* Glow effect container */
.btn-discord::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(88, 101, 242, 0.6) 0%, rgba(88, 101, 242, 1) 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: -1;
}

/* On hover: expand the glow */
.btn-discord:hover::before {
  width: 400px;
  height: 300px;
  opacity: 1;
}

.btn-discord img
{
	width: 30px;
	margin-right: 0.5em;
	margin-top: -5px;
}

.discordLogin
{
	background-color: #5865F2;
	border-radius: 5px; 
	padding: 1em;
}

.discordLogin img
{
	width: 50px;
}

#togglePasswordView
{
	width: 20px;
	cursor: pointer;
}

/* Badge themes */

.card-img-wrapper { 
	position: relative; 
	display: block; 
}

.siteImgContainer
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.siteImg
{
	width: 70%;
}

@media only screen and (max-width: 900px) 
{
	.siteImg
	{
		width: 50%;
	}
}

.siteLogoContainer
{
	background-color: rgba(0, 0, 0, 0.566);
	border-top-right-radius: 25px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 1);
	padding: 0.3em;
	backdrop-filter: blur(6px);
}

.siteLogo
{
	aspect-ratio: 1/1;
	width: 2em;
}

.sale-banner {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(128deg, #EF1418 0%, #EF1418 40%, #A00F0B 50%,#F6190B 60%, #F6190B 100%);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 1em;
  text-transform: uppercase;
  padding: 3px 5px;
  letter-spacing: .5px;
  z-index: 10;
  box-shadow: 0 -2px 12px rgba(0,0,0,.35) inset;
}

.vcc-sale-banner
{
	position: absolute;
	bottom: 18%;
	right: -25%;
	transform: rotate(-30deg);
	background-color: red;
	width: 100%;
	text-align: center;
}

.note-banner {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(128deg, #12a3d3 0%, #12a3d3 40%, #0f7ea3 50%,#12a3d3 60%, #12a3d3 100%);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 1em;
  text-transform: uppercase;
  padding: 3px 5px;
  letter-spacing: .5px;
  z-index: 10;
  box-shadow: 0 -2px 12px rgba(0,0,0,.35) inset;
}

.warstock, .wcc
{
	background-image: url(../img/warstock.webp);
	background-size: cover;
	color: rgb(240, 240, 240);
}

.warstock-alt, .wcc-alt
{
	background-color: #353430; 
}

.wcc-alt small
{
	color: white;
}

/* border grads: https://cssgradient.io/ */
.warstock-border, .wcc-border
{
	padding: 1px;
	background: rgb(78,78,76);
	background: linear-gradient(0deg, rgba(78,78,76,1) 0%, rgba(30,32,26,1) 100%);
}

.warstock-bg, .wcc-bg
{
	/* background-image: url(../img_Creation/warstock_test.png); */
	background-image: url(../img/wcc.webp);
}

.wcc-right-bg
{
	background-color: #090a07;
}

.legendary, .lm
{
	background: linear-gradient(0, #C30000, #7A1213);
	color: white;
}
.legendary-header, .lm-header
{
	background: rgb(239,238,236);
	background: linear-gradient(0deg, rgba(239,238,236,1) 0%, rgba(239,238,236,1) 49%, rgba(220,218,221,1) 51%, rgba(220,218,221,1) 100%);
	color: black;
}

.legendary-alt, .lm-alt
{
	background-color: #000000 !important; 
	color: white;
}

.legendary-border, .lm-border
{
	padding: 1px;
	background: rgb(255,255,255);
	background: linear-gradient(73deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 23%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(255,255,255,1) 100%);
}

.legendary-bg, .lm-bg
{
	background-image: url(../img/lm.webp);
}

.lm-right-bg
{
	background-color: #210200;
}

.southern,.ssasa
{
	background: linear-gradient(0, #dea700, #efb700);
	color: black;
}

.ssasa-header
{
	background: linear-gradient(180deg, rgba(239,238,236,1) 0%, rgba(239,238,236,1) 49%, rgb(234, 232, 235) 51%, rgb(234, 232, 235) 100%);
	color: black;
}

.southern-alt, .ssasa-alt
{
	background: linear-gradient(0deg, rgba(239,238,236,1) 0%, rgba(239,238,236,1) 49%, rgba(220,218,221,1) 51%, rgba(220,218,221,1) 100%);
	color: black;	
}

.price
{
	position: relative;
}

.ssasa-acc
{
	background-color: #E0A700;
	padding: 0.50rem 0.7rem;   
	position: absolute;
	right: 0;
}

.southern-border, .ssasa-border
{
	padding: 1px;
	background: #C6C6C4;
}

.ssasa-bg
{
	background-image: url(../img/ssasa.webp);
}

.ssasa-right-bg
{
	background: #37304d;
}

.benny, .bom
{
	outline: 2px solid #194674;
	color: #8C2226;
	background-color: white;
}

.bom-alt
{
	color:rgb(23, 23, 23)
}

.bom-border
{

}

.bom-bg
{
	background-image: url(../img/bom.webp);
}

.bom-right-bg
{
	/* background:rgb(17, 20, 35); */
	background-image: url(../img/bom_bg.webp);
	background-size: cover;
	background-position: 50%, 50%;
}

.boat, .dt
{
	background-color: #63a3e3;
}

.dt-header
{
	background-color: #67A2DF;
}

.dt-alt
{
	background-color: #0466CC;
}

.dt-border
{

}

.dt-bg
{
	background-image: url(../img/dt_3.webp);
}

.dt-right-bg
{
	background: #C6E0F9;
}

.plane, .et
{
	background: linear-gradient(0, #5a8bb5, #73b3de);
	color: white;
}

.et-header
{
	background: linear-gradient(0, #5a8bb5, #73b3de);
}

.et-alt
{
	background: #23435c;
}

.et-border
{

}

.et-bg
{
	background-image: url(../img/et.webp);
}

.et-right-bg
{
	background: #586177;
}

.bike, .pmc
{
	background-color: #070707;
	color: white;
}

.pmc-alt
{

}

.pmc-border
{

}

.pmc-bg
{
	background-image: url(../img/pmc.webp);
}

.pmc-right-bg
{

}

.nightclub
{
	background-image: url(../img/nightclub.webp);
	background-repeat: repeat;
	background-size: cover;
}

.nightclub-alt
{

}

.nightclub-border
{

}

.arena, .aw
{
	background-color: #d4060a;
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230a2450' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

.aw-alt
{

}

.aw-border
{

}

.aw-bg
{
	background-image: url(../img/aw.webp);
}

.aw-right-bg
{

}

.mazebank
{
	background-color: #EEC630;
	outline: 2px solid #116B37;
	color: #116B37;
}

.pegasus
{
	width: 12px;
	margin-right: 3px;
}

.pdm
{
	background: linear-gradient(0, #C30000, #7A1213);
	/* color: rgb(255, 255, 255); */
	color: black;
}

.pdm-header
{
	background: #f8f1e3;
	color: black;
}

.pdm-alt
{
	background: #f8f1e3;
	color: black;
}

.pdm-border
{
	padding: 2px;
	background:
        repeating-linear-gradient(
            140deg,
            #1a3e7a 0 20px,
            #ffffff 20px 40px,
            #b32020 40px 60px
        );
	box-shadow: 0 4px 0 rgba(0,0,0,0.35);
}

.pdm-bg
{
	background-image: url(../img/pdm.webp); 
}

.pdm-right-bg
{
	background-color:rgb(17, 31, 35);
}

.casino
{
	background: linear-gradient(0, #290034, #F06475);
	color: rgb(255, 255, 255);
}

.casino-header
{
	background: rgb(239,238,236);
	background: linear-gradient(0, #F06475, #290034);
	color: white;
}

.casino-alt
{
	color: rgb(255, 255, 255);
	background-color: #290042 !important; 
}

.casino-border
{
	padding: 1px;
	background: #72007d;
}

.casino-bg
{
	background-image: url(../img/casino_3.webp);
}

.casino-right-bg
{
	background-color:rgb(17, 31, 35);
}

.lscm
{
	background-image: url(../img/lscm.webp);
	background-repeat: repeat;
	background-size: cover;
}

.lcsm
{
	background: linear-gradient(0, #C30000, #7A1213);
	color: rgb(255, 255, 255);
}

.lscm-header
{
	background: linear-gradient(0, #101820, #1f3a45);
	color: white;
}

.lscm-alt
{
	background: linear-gradient(0, #0b0b0f, #2a0f45);
	color: white;
}

.lscm-border
{
	padding: .75px;
	background: rgba(58, 214, 255, 0.4);
	box-shadow: 0 2px 8px rgba(0,255,255,0.45);
}

.lscm-bg
{
	background-image: url(../img/lscm_6.webp);
}

.lscm-right-bg
{
	background-color:rgb(11, 18, 20);
}

.la
{
	background: linear-gradient(0, #C30000, #7A1213);
	color: rgb(255, 255, 255);
}

.la-header
{
	background: linear-gradient(135deg, #070707, #1a1a1a);
	color: white;
}

.la-alt
{
	background: #0c0c11;
	color: white;
}

.la-border
{
	padding: 1px;
	background: rgba(255,255,255,0.1);
	box-shadow: 0 0 20px rgba(0,0,0,0.25);
}

.la-bg
{
	background-image: url(../img/la_3.webp);
}

.la-right-bg
{
	background-color:rgb(17, 31, 35);
}

.sale
{
	background: linear-gradient(0, #C30000, #7A1213);
	color: rgb(255, 255, 255);
}

.sale-alt
{
	color: rgb(29, 29, 29);
}

.sale-border
{
	padding: 1px;
	background: rgb(255,255,255);
}

.sale-bg
{
	background-image: url(../img/sale.webp);
}

.sale-right-bg
{
	background-color:rgb(17, 31, 35);
}

/* Main Content */

#mainBody,
.mainBody
{
	background-color: var(--mainBodyBg);
	border-radius: 5px;
}

.controls-menu
{
	position: fixed;
	top: calc(50% - 400px / 2.5);
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #e9ecef;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	overflow: hidden;
	z-index: 999; 
}

.controls
{
	cursor: url(../img/cursor.png) 8 0, auto !important;
	padding-top: .2em;
	padding-bottom: .2em;
}

.controls:hover
{
	background-color: #ffffff;
}

.controls img,
.controls .img
{
	width: 45px;
	aspect-ratio: 1/1;
	box-sizing: border-box;
	padding: 0.5em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-origin: content-box; 
  	background-clip: content-box;	
}

.randomCar .img
{
	background-image: url("../img/theme/light/random.webp");
}

#showLast10 .img
{
	background-image: url("../img/theme/light/last10.webp");
}

#showFav .img
{
	background-image: url("../img/theme/light/favorite.webp");
}

#centerOVT .img
{
	background-image: url("../img/theme/light/recenter.webp");
}

#topOVT .img
{
	background-image: url("../img/theme/light/to_top.webp");
}

.scrollToAdd .img
{
	background-image: url("../img/theme/light/add_car.webp");
}

#profShare .img
{
	background-image: url("../img/theme/light/share_profile.webp");
}

#shareSite .img
{
	background-image: url("../img/theme/light/link.webp");
}

/* Sticky Dividers */

.stickyDivider {
    height: 2em;
}

/* Make the cell itself sticky */
.stickyDivider > td,
.floorDivider > td 
{
    position: sticky;
    top: 0;
    background-color: #dee2e6;
    z-index: 99;
}

.stickyDivider *
{
	padding: 0 !important;
	margin: 0 !important;
} 

/* Profile.php Owned Vehicles Table */

#resizeBar {
	height: 3em;
    cursor: ns-resize;
	position: relative;
}

#resizeBar hr
{
	margin-bottom: -5px;
}

#resizeBar::before {
    content: "⋮⋮⋮⋮⋮⋮⋮⋮⋮⋮⋮";
    font-size: 10px;
    color: #888;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
	margin-top: -10px;
}

.tableContainer
{
	height: 50em;
	max-height: 100em;
	overflow: auto;
}

.table td, .table th
{
	vertical-align: middle !important;
}

.enlarge-image
{
	cursor: zoom-in;
	border-radius: 5px;
	outline: 0.13em solid rgb(20, 20, 20);
}

.murica
{
	padding: 4px;
    border-radius: 8px;
    background:
        url('../img/flags/usa.webp') border-box,
        white padding-box;
    background-size: cover;
}

.slava
{
	padding: 4px;
    border-radius: 8px;
    background:
        linear-gradient(180deg,rgba(0, 87, 183, 1) 0%, rgba(0, 87, 183, 1) 50%, rgba(255, 215, 0, 1) 50%, rgba(255, 215, 0, 1) 100%);
    background-size: cover;
}

.chameleon
{
	padding: 4px;
    border-radius: 8px;
	background:
		radial-gradient(
			farthest-corner at 10% 20%,
			rgba(255,255,255,.35),
			transparent 40%
		),
		linear-gradient(to right,#131b0c 0%,#131c11 4%,#112317 6%,#11281c 6%,#102c1d 7%,#0f3518 10%,#183711 11%,#2a3610 11%,#37300f 12%,#3d2913 13%,#402416 14%,#3f2017 14%,#381d18 15%,#2c1f1d 18%,#1d1e24 20%,#171924 22%,#0e1016 25%,#0e1217 26%,#13151d 27%,#151926 28%,#1a202f 29%,#222744 31%,#262d57 32%,#262f5e 32%,#262e72 33%,#262e77 33%,#232a83 34%,#232a86 34%,#1f278e 34%,#1d229a 35%,#1a24a6 36%,#1c2aab 36%,#1d36ad 36%,#1d41ae 37%,#1a48b1 37%,#1c64b2 39%,#1e76ab 39%,#1f889b 40%,#218a9a 41%,#248c94 41%,#35918f 41%,#4a908e 42%,#558890 42%,#548495 43%,#518395 44%,#458696 44%,#379195 46%,#279793 47%,#1ba287 48%,#19b078 50%,#19b777 50%,#19b971 50%,#1dc369 50%,#25c85c 51%,#3aca4e 52%,#44c94c 52%,#48c947 52%,#67c440 53%,#6ec33f 53%,#8ebb3b 54%,#95b83a 54%,#a2b33a 54%,#a8af3a 54%,#b4ad3a 54%,#c79e39 55%,#d48d3e 56%,#dd7d42 56%,#df6f44 57%,#dd5d49 58%,#dc5b4b 58%,#d4514c 59%,#bd494c 61%,#9b454d 63%,#834550 65%,#544459 68%,#3d3c59 71%,#353554 73%,#2a2a47 75%,#262846 75%,#25253f 75%,#1d1c37 76%,#1a1930 77%,#18182b 77%,#141427 77%,#131323 78%,#090a12 80%,#020204 83%,#000000 85%,#000000 100%);
    background-size: 400% 400%;
    box-shadow:
        inset 0 0 25px rgba(255,255,255,.15),
        inset 0 0 60px rgba(0,0,0,.4);

	filter: saturate(140%) contrast(115%) brightness(105%);
	animation: chameleonShift 18s ease infinite;
}

@keyframes chameleonShift {
    0% { background-position: 0% 50%; }

    50% { background-position: 100% 50%; }

    100% { background-position: 0% 50%; }
}

.rainbow
{
	padding: 4px;
    border-radius: 8px;
    background:
        linear-gradient(
        115deg,
        #ff0080 0%,
        #7a00ff 20%,
        #00e5ff 40%,
        #00ff85 60%,
        #ffd000 80%,
        #ff0080 100%
    );
    background-size: cover;
}

.sprunk
{
	background: url('../img/kifflom/sprunk_bg.webp');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.ecola
{
	background: url('../img/kifflom/ecola_bg.webp');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.kifflom
{
	background: url('../img/kifflom/kifflom_bg.webp');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.anime
{
	background: url('../img/kifflom/anime_bg.webp');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.anime *:not(.badge):not(.badge *)
{
	text-shadow: 
    1px 1px 0 pink, 
    3px 3px 0 #000000, 
    3px 3px 3px #000000,
    3px 3px 5px #000000;
}

.anime span.badge
{
	text-shadow: none !important;
}

.anime > td:nth-child(2) > img 
{
	padding: 2px;
    border-radius: 8px;
    background:
        pink padding-box;
}

#profiledetails img
{
	width: 20px;
	margin-top: -2px;
}

#profiledetails div
{
	border: 1px solid var(--bs-border-color);
	padding: 0.3em 0.4em;
	border-radius: 10px;
	background-color: var(--mainBodyBg);
}

.hrTop
{
	border-top: 1px solid #dee2e6;
}

#ttlcar,
#ttlgarage,
#ttlmoney
{
	margin-left: 3px;
}

.form-group label
{
	margin-bottom: 1px;
}

.vehImg
{
	min-width: 180px;
}

.vehNote
{
	max-width: 300px;
}

.fixCheckLabel
{
	margin-top: -5px;
}

.featureList
{
	position: absolute;
	top: 8px;
    left: 170px;
	width: auto;
	max-height: 77px;
    margin-left: -17px;
    margin-top: -2px;
	display: inline-flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 1px;
}

.featureList img
{
	width: 25px;
	height: 25px;
	margin: 0;
	padding: 0;
}

.favCar {
    position: relative;
    overflow: hidden;
    z-index: 0; 
	background: linear-gradient(to right, rgba(255, 225, 150, 0.1), rgba(255, 225, 150, 0.07) 50%, rgba(255, 225, 150, 0.01) 100% );
}

.favCar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -40px;
    width: 120px;
    height: 120px;
    background-image: url('../img/favCar.webp');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(-27deg);
    opacity: 0.1;
    pointer-events: none;
    z-index: -2;
    animation: favRotate 30s linear infinite;
}

.favCar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(
        rgba(255, 202, 57, 0.35) 0%,
        rgba(255, 220, 120, 0) 70%
    );
    transform: translateY(-50%) scale(1);
    filter: blur(12px);
    z-index: -1;
    pointer-events: none;
    animation: favPulse 5s ease-in-out infinite;
}


@keyframes favRotate {
    0%   { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(-360deg); }
}


@keyframes favPulse {
    0%   { transform: translateY(-50%) scale(1); opacity: 0.55; }
    50%  { transform: translateY(-50%) scale(1.3); opacity: 0.75; }
    100% { transform: translateY(-50%) scale(1); opacity: 0.55; }
}

/* Vehicle Table Customization */

.full-spec
{
	position: relative;
	z-index: 98;
}

.full-spec > div
{
	width: 0px;
	height: 0px;
	background-color: var(--bs-body-color);
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all 0.1s ease-in-out;
	border-radius: 50%;
	z-index: -1;
}

.full-spec:hover > div
{
	width: 20px;
	height: 20px;
	top: calc(100% / 2 - 9px);
	left: calc(100% / 2 - 10px);
}

a.full-spec:hover
{
	color: var(--mainBodyBg) !important;
	font-weight: bolder !important;
}

body[data-bs-theme="dark"] a.full-spec:hover
{
	color: var(--darkFont) !important;
	font-weight: bolder !important;
}

td[data-type="name"] a:first-child,
.carname,
.garagename
{
	font-weight: 600;
}

td[data-type="name"] span.small,
td[data-column="garage"] small,
#carTable tr td:first-of-type span.small
{
	font-weight: 200;
}

html[data-si="0"] td[data-type="location"] span
{
	display: none;
}

/* Profile Owned Vehicles Table EDITOR MODE */

body.bulk-edit-mode .car-plate
{
	width: 80px;
}

body.bulk-edit-mode .car-plate p
{
	font-size: 1em;
}

.car-plate
{
	width: 90px;
	height: auto;
	position: relative;
	display: flex;
	justify-content: center;

	float: left;
	margin-right: 0.5em;
	margin-top: 5px;
}

.car-plate img
{
	width: 95%;
}

.car-plate-text
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.car-plate p
{
	text-align: center;
	font-family: 'PLATEFONT', sans-serif;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
	margin-top: 10px;
}

.plate-text
{
	font-family: 'PLATEFONT', sans-serif;
}

.editModeOnly {
    display: none !important;
}

body.bulk-edit-mode .editModeOnly {
    display: inline-block !important;
}

body.bulk-edit-mode .viewModeOnly {
    display: none !important;
}

tr:has(.bulkSelectVehicle:checked) {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

body[data-bs-theme="dark"] tr:has(.bulkSelectVehicle:checked) {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

article:has(.bulkSelectVehicle:checked){
	border: 2px solid rgba(128, 22, 22, 0.3);
	background-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow:
		0 16px 45px rgba(0, 0, 0, 0.28),
		0 0 0 1px rgba(255, 77, 77, 0.25),
		0 0 26px rgba(255, 77, 77, 0.16);
}

body.bulk-edit-mode .stickyDivider
{
	font-size: 0.8em;
}

body.bulk-edit-mode .stickyDivider td
{
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent) !important;
	background-size: 1rem 1rem !important;
	background: var(--bs-warning);
	color: var(--darkFont);
	font-weight: 600;
	border-radius: 8px;
}

body.bulk-edit-mode .featureList
{
	max-height: 52px !important; 
	left: 120px !important;
}

body.bulk-edit-mode .vehImg img.enlarge-image
{
	height: 45px !important;
	width: auto !important;
}

body.bulk-edit-mode #mainBody
{
	outline: 2px solid var(--bs-warning); 
	box-shadow: 0 0 0 15px #f4d16f38;
}

body.bulk-edit-mode .vehNote
{
	font-size: 0.9em;
}

td[data-type="edit"] {
    white-space: nowrap;
}

td[data-type="edit"] .bulkSelectVehicle {
    transform: scale(1.45);
    cursor: pointer;
}

article .bulkSelectVehicle {
    transform: scale(1.50);
    cursor: pointer;
	margin-left: 8px;
}

/* Vehicle Table Custom Scrollbar */

/* width */
.tableContainer::-webkit-scrollbar,
#ownedVehiclesTableTOC::-webkit-scrollbar
{
	width: 10px;
}
  
/* Track */
.tableContainer::-webkit-scrollbar-track,
#ownedVehiclesTableTOC::-webkit-scrollbar-track
{
	background: #f1f1f1;
}

/* Handle */
.tableContainer::-webkit-scrollbar-thumb,
#ownedVehiclesTableTOC::-webkit-scrollbar-thumb
{
	background: #888;
	border-radius: 10px;
}

/* Handle on hover */
.tableContainer::-webkit-scrollbar-thumb:hover,
#ownedVehiclesTableTOC::-webkit-scrollbar-thumb:hover
{
	background: var(--bootstrapGrey);
}

.table-of-contents {
    width: 250px;
    height: 400px;
    background-color: #e9ecef;
    overflow-y: hidden;
    position: fixed;
	top: calc(50% - 400px/2.5);
	left: -220px;
    transition: left 0.3s;
	padding-right: 20px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	z-index: 99;
}

.table-of-contents:hover {
    left: 0;
}

#tocLabel
{
	position: absolute;
    top: 0;
    right: 4px;
    height: 100%;
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

#tocLabel p
{
	transform: rotate(90deg);
	width: 300px;
	text-align: center;
	font-size: 1.05rem;
}

#tocLabel *
{
	padding: 0;
	margin: 0;
}

#tocSearch
{
	width: 220px;
	margin-bottom: 3px;
}

#tocSearch input
{
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

#tocSearch input:focus, #tocSearch input:active
{
	box-shadow: none;
}

.toc-header {
    background-color: #e9ecef;
    padding: 10px;
	padding-left: 20px;
    font-weight: bold;
}

#ownedVehiclesTableTOC
{
	overflow-y: auto;
	width: 220px;
	height: calc(355px - calc(1.5em + .5rem + 2px) - 3px);
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	position: absolute;
    left: 0;
}

.table-of-contents li
{
	font-size: 0.85rem;
}

.table-of-contents li a
{
	cursor: url(../img/cursor.png) 8 0, auto !important;
}

#imgUploadLoader
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%; 
	border-radius: 5px; 
	background-color:#1414144f; 
	backdrop-filter: blur(1px);
}

/* Loading Spinner from Loading.io/css */

.lds-dual-ring {
	color: var(--okhand);
}
.lds-dual-ring,
.lds-dual-ring:after {
	box-sizing: border-box;
}
.lds-dual-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
}
.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6.4px solid currentColor;
	border-color: currentColor transparent currentColor transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
	transform: rotate(0deg);
}
100% {
	transform: rotate(360deg);
}
}


/* Mobile TOC - displays from bottom up */
@media only screen and (max-width: 760px) 
{

	.table-of-contents {
		width: 100%;
		height: 400px;
		background-color: #e9ecef;
		overflow-y: hidden;
		position: fixed;
		top: auto;
		bottom: -370px;
		left: 0;
		transition: bottom 0.3s;
		padding-right: 0px;
		border: 1px solid var(--darkFont);
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 0px;
		z-index: 99;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.table-of-contents:hover, .table-of-contents:active, .table-of-contents:focus {
		left: 0;
		bottom: 0;
		z-index: 1000;
	}

	#tocLabel
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 30px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#tocLabel p
	{
		transform: rotate(0deg);
		width: 300px;
		text-align: center;
		font-size: 1.05rem;
		font-weight: 700;
	}

	#tocLabel *
	{
		padding: 0;
		margin: 0;
	}	

	#tocSearch
	{
		width: 95%;
		position: absolute;
		top: 30px;
		left: auto;
		margin-bottom: 3px;
	}

	.toc-header {
		background-color: #e9ecef;
		padding: 10px;
		padding-left: 20px;
		font-weight: bold;
		display: none;
	}

	#ownedVehiclesTableTOC
	{
		overflow-y: auto;
		margin-top: calc(30px + calc(1.5em + .5rem + 2px));
		width: 96%;
		height: calc(370px - calc(1.5em + .5rem + 2px) - 3px);
		border-top-left-radius: 5px !important;
		border-bottom-right-radius: 0 !important;
		position: static;
	}

	#ownedVehiclesTableTOC .list-group-item
	{
		padding: 0.55rem 1.25rem;
	}

}

.editVehicleBtn
{
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.editVehicleBtn:hover
{
	background-color: rgba(0, 0, 0, 0.3);
}

.editVehicleBtn .img
{
	width: 24px;
	height: 24px;
	aspect-ratio: 1/1;
	background-image: url("../img/theme/light/ls_customs.webp");
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-origin: content-box; 
	background-clip: content-box;
}

a.owned-vehicle-action-btn.editVehicleBtn
{
	background: rgba(6,12,22,.72);
}

a.owned-vehicle-action-btn.editVehicleBtn:hover
{
	background: rgba(77,163,255,.8);
}

body[data-bs-theme="dark"] a.owned-vehicle-action-btn.editVehicleBtn
{
	background-color: var(--mainBodyBg);
}

body[data-bs-theme="dark"] a.owned-vehicle-action-btn.editVehicleBtn:hover
{
	background: inhert;
}

.editVehicleIcon
{
	width: 20px; 
	aspect-ratio: 1 / 1;
	padding: 2px;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 50%;
}

.editVehicleIconAdm
{
	width: 25px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	background-color: rgba(141, 0, 0, 0.534);
}

.editVehicleIconAdm img
{
	width: 17px;
	aspect-ratio: 1/1;
}

.garageReorder .img
{
	width: 38px;
	aspect-ratio: 1/1;
	padding: 0.5em;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-origin: content-box; 
  	background-clip: content-box;	
	background-image: url("../img/theme/light/reorder_garage.webp");
}

.garageReorder
{
	border-radius: 50%;
	transition: all .15s ease-in-out;
	border: 1px solid rgba(0, 0, 0, 0.4);
}

.garageReorder:hover
{
	background-color: rgba(0, 0, 0, 0.3);
}

.garage-item .drag-handle {
	cursor: grab !important;
}

.garage-item .drag-handle:active {
	cursor: grabbing !important;
}

#garage-sort-list .drag-handle {
	font-size: 1.1rem;
	user-select: none;
}

/* Blue bar on the left edge */
.garage-sort-list .garage-item.drag-over::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #0d6efd;
    border-radius: 4px 0 0 4px;
}

/* "Drop here" badge on the right side */
.garage-sort-list .garage-item.drag-over::after {
    content: "Drop here";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #0d6efd;
    color: #fff;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.garage-number {
	width: 24px;
	text-align: center;
	display: inline-block;
	user-select: none;
	opacity: 0.75;
}

@media only screen and (max-width: 1200px) 
{
	.vehImg 
	{
		min-width: 190px !important;
	}
	.featureList
	{
		left: 160px;
	}
}

/* Profile.php Mobile (iPhone 15) */
@media only screen and (max-width: 450px) 
{
	body {
		padding-bottom: 2em;
	}

	#ownedVehiclesTable tbody tr td {
        border: 0 !important;
    }

    /* Heading sizing */
    #mainBody h3:first-of-type {
        font-size: 7vw;
        text-align: center;
    }

    #OVT-Top {
		display: none;
    }

    #ownedVehiclesTableContainer {
        margin-top: 0.5em;
    }

    /* Basic table border tweaks */
    #ownedVehiclesTable tr td {
        border-top: 0 !important;
    }

    #ownedVehiclesTable tr {
        border-top: 0 !important;
        border-bottom: 1px solid #dee2e6;
    }

    /* Hide header row on mobile */
    #ownedVehiclesTable thead {
        display: none;
    }

	#ownedVehiclesTable{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	#ownedVehiclesTable tbody tr.stickyDivider
	{
		display: grid;
        grid-template-columns: 100% 1fr;
	}

	#ownedVehiclesTable tbody tr.stickyDivider td
	{
		display: flex;
        justify-content: center;
		align-items: center;
	}

    /* Treat each row as a little "card" using CSS Grid */
    #ownedVehiclesTable tbody tr:not(.stickyDivider) {
        display: grid;
        grid-template-columns: 140px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "img title"
            "img location"
            "img features"
            "note edit";
        gap: 4px 8px;
        padding: 8px 8px 12px;
        border-top: 0 !important;
        border-bottom: 1px solid #dee2e6;
        position: static;
        height: auto;
    }

	html[data-si="0"] td[data-type="note"]
	{
		margin-top: 13px;
	}

    /* Make sure cells are back in normal flow */
    #ownedVehiclesTable tbody tr:not(.stickyDivider) td {
        /* position: static !important; */
        border-top: 0 !important;
        padding: 0;
    }

    /* -------- Column mapping (adjust nth-of-type if your column order differs) -------- */

    /* 1: Name / Make / Type */
    #ownedVehiclesTable tbody tr:not(.stickyDivider) td:nth-of-type(1) {
        grid-area: title;
        display: flex;
        align-items: center;
        font-size: 3.7vw;
    }

    /* Still hide extra bits in col 1 like you did before */
    #ownedVehiclesTable tbody tr:not(.stickyDivider) td:nth-of-type(1) *:not(span:first-child, span:first-child a, a.full-spec) {
        display: none;
    }

    /* 2: Image */
    #ownedVehiclesTable tbody tr:not(.stickyDivider) td:nth-of-type(2) {
        grid-area: img;
        align-self: start;
    }

    /* 3: Location */
    #ownedVehiclesTable tbody tr:not(.stickyDivider) td:nth-of-type(3) {
        grid-area: location;
        font-size: 3.7vw;
    }

    /* 4: Note */
    #ownedVehiclesTable tbody tr:not(.stickyDivider) td:nth-of-type(4) {
        grid-area: note;
        font-size: 3.8vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 5: Edit button */
    #ownedVehiclesTable tbody tr:not(.stickyDivider) td:nth-of-type(5) {
        grid-area: edit;
        justify-self: center;
		margin-left: 100px;
    }

    /* -------- Buttons & icons -------- */

    .editVehicleBtn {
        border: 1px solid rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .editVehicleBtn img {
        width: 19px;
        height: 19px;
        aspect-ratio: 1 / 1;
    }

    .editVehicleIcon {
        width: 20px;
        aspect-ratio: 1 / 1;
        padding: 2px;
        border: 1px solid rgba(0, 0, 0, 0.4);
        border-radius: 50%;
    }

    /* -------- Features list -------- */

    .featureList {
		position: relative;
        grid-area: features;
        width: auto;
        max-height: 77px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 5px;
        margin: 0;
		margin-bottom: -18px;
		margin-left: -21px;
    }

    .featureList img {
        width: 23px;
        height: 23px;
        margin: 0;
        padding: 0;
    }

	#resizeBar::before
	{
		content: '' !important;
	}

	/* Image picker in edit modal */
	#edit-imagepicker
	{
		width: 100% !important;
	}

}


/* Garage.php */

#garageTable thead th
{
	font-weight: 600;
}

#addGarageForm input
{
	min-width: 60%;
}

.garage-math
{
	border: 1px solid var(--bs-border-color);
	border-radius: 10px;
	background-color: var(--garage-bg);
	padding: .15em .55em;
}

.garage-math :not(span.biggerThanSmall code)
{
	color: var(--bs-secondary) !important;
}

.garage-math span.biggerThanSmall code
{	
	color: var(--bs-body-color) !important;
}

@media (max-width: 777px) {
	#garageTable thead th:nth-of-type(3),
	#garageTable tbody td:nth-of-type(3)
	{
		display: none;
	}

	.garagename
	{
		font-weight: bolder;
		font-size: 1.1em;
	}

}

/* Cars.php */

.shareBtnBox
{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: start;
	gap: .4em;
}

.shareBtn,
.addCarBtn
{
	background-color: var(--bs-primary);
	border-radius: 50%;
	width: 25px;
	height: 25px;
	cursor: url(../img/cursor.png) 8 0, auto !important;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.1s ease-in-out;
}

.shareBtn:hover,
.addCarBtn:hover
{
	background-color: var(--bs-primary-bg-subtle) !important;
}

.shareBtn img
{
	width: 13px;
}

.addCarBtn a
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.addCarBtn img
{
	width: 18px;
}

.features-list
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.1em;
	font-size: 0.8em;
	border-top: 1px solid var(--bootstrapBorder);
	padding-top: 0.5em;
	margin-top: 0.6em;
}

.features-list span:first-of-type
{
	margin-left: 0.2em;
	font-size: 0.9em;
}

.features-list span.badge
{
	transition: all 0.1s ease-in-out;
}

.features-list:hover span.badge
{
	box-shadow: 0 0 5px rgb(96, 96, 243);
}

.features-list span.badge:hover
{
	background-color: rgb(93, 98, 102) !important;
}

#add-new-garage-modal .modal-body table tbody td:first-child,
#add-new-vehicle-modal .modal-body table tbody td:first-child,
#edit-vehicle-modal .modal-body table tbody td:first-child
{
	padding-right: 1em;
}

#add-new-garage-modal .modal-body table,
#add-new-vehicle-modal .modal-body table,
#edit-vehicle-modal .modal-body table
{
	border-collapse: separate;
	border-spacing: 0 10px;
} 

.add-new-card
{
	border: 1px solid var(--bootstrapBorder);
	border-radius: 5px;
	padding: 0.5em;
	align-self: stretch;
	flex: 1 1 auto;
	min-width: 350px;
}

.add-new-card p:first-of-type
{
	border-bottom: 1px solid rgba(255, 255, 255, 0.205);
}

.unreleased::after {
    content: "Unreleased";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    background: #c0392b;
    color: #fff;
    font-weight: bold;
    padding: 8px 100px;
    font-size: 16px;
    opacity: 0.95;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    white-space: nowrap;
}

#carTable thead th
{
	font-weight: 600;
}

.vehicleIcon
{
	width: 24px;
	margin-top: -6px;
	margin-left: .4em;
}

@media (max-width: 777px) {
	.modal-footer
	{
		padding-top: 2em;
	}
	#modal-footer-note,
	#e_modal-footer-note,
	#reorder-footer-note
	{
		top: 6px !important;
		left: 0px !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100%;
		text-align: center;
	}

	#carTable thead th:nth-of-type(2),
	#carTable thead th:nth-of-type(3),
	#carTable thead th:nth-of-type(4)
	{
		display: none;
	}

	.carname
	{
		font-weight: bolder;
		font-size: 1.3em;
	}

	.features-list
	{
		border-top: none;
	}

	.share,
	.shareBtnBox
	{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.shareBtnBox
	{
		margin-left: 0 !important;
		gap: 2.5em;
	}

	.shareBtn 
	{
		margin-bottom: 0 !important;
	}

	.editVehicleIconAdmContainer
	{
		margin-top: 0 !important;
		margin-left: 2.5em;
	}

	.shareBtn,
	.addCarBtn,
	.editVehicleIconAdm
	{
		width: 35px;
		height: 35px;
	}

	.shareBtn img
	{
		width: 16px;
	}

	.addCarBtn img,
	.editVehicleIconAdm img
	{
		width: 21px;
	}

	#carTable tbody tr
	{
		display: flex;
		flex-direction: column;
	}

	#carTable tbody tr td
	{
		border-bottom: none;
	}

	#carTable tbody tr td:last-child
	{
		border-bottom: 1px solid var(--bootstrapBorder);
	}

}

/* Snackbar Notify */

.snackNotify
{
	position: fixed;
	bottom: -150px;
	left: 2em;
	border-radius: 8px;
	background-color:rgb(218, 218, 218);
	color: #474747;
	font-weight: 500;
	z-index: 100;
	display: none;
	justify-content: center;
	align-items: center;
}

.snackNotify p
{
	padding: 1em 1.5em;
}

#approved-users p
{
	margin-bottom: 0.5em;
}

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

	.responseMainBody
	{
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 0 !important;
	}

	.featured-container
	{
		margin-top: 1em !important;
		margin-bottom: 1em !important;
	}

}

@media (max-width: 992px) {
    .navbar-expand-lg .navbar-nav
	{
		flex-direction: row;
		justify-content: center;
	}

	.blog-post-page
	{
		padding-left: .7em;
		padding-right: .7em;
	}
}

/* FEATURED CARS */

.card-site
{
	max-width: 75rem;
	width: 85%;
	background-color: #0B0A08;
	overflow: hidden;
	border: 1px solid #ffffff75;
}

.car-seats-img
{
	width: 30px; 
	margin-right: 0.5rem; 
	aspect-ratio: 1/1;
}

.car-add-img
{
	width: 25px;
	aspect-ratio: 1/1;
}

.car-seats
{
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 0.8rem;
	font-weight: 600;
}

.car-card
{
	width: 15rem; 
	border: none;
}

.card-img-border
{
	border-radius: 0px !important;
}

.featured-card-header
{
	display: flex; 
	justify-content: space-between;
	align-items: center; 
	padding: .55rem .75rem;
	position: relative;
}

.featured-card-footer
{
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	padding: .45rem .55rem;
}

.featured-card-footer small:nth-child(2){
	padding-left: 0.1em;
}

.featured-card-footer small.text-truncate{
	cursor: help;
}

.card-web-bg
{
    background-position: center;
	background-size: cover;
	min-height: 15rem;
}

/* Vinewood Car Club */

.car-site-vcc
{
	max-width: 75rem;
	width: 85%;
	overflow: hidden;
	border: 1px solid #ffffffbb;

	display: flex;
	flex-direction: column;

	box-shadow:
        0 24px 50px rgba(0,0,0,.48),
        0 0 0 1px rgba(255,255,255,.02) inset,
        0 0 45px rgba(0,212,255,.08),
        0 0 75px rgba(160,82,255,.06);
}

.vcc-head
{
	display: flex;
	justify-content: center;
	align-items: center;

	position: relative;
}

.vcc-head::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/logos/vcc_bg.webp');
	background-size: cover;
	background-position: center;
	filter: blur(2px) brightness(80%);
}

.vcc-head img
{
	width: auto;
	height: 70%;
	margin-top: 2em;
	margin-bottom: 2em;
	z-index: 10;
}

.vcc-head-gta
{
	position: absolute;
	top: 30%;
	right: 12%;

	height: 20% !important;
}

.vcc-body
{
	background-color: #0E1116;
}

.vcc-body-top
{
	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: 2em;
}

.vcc-body-bottom
{
	display: flex;
	flex-direction: row;

	position: relative;
}

.vcc-body-bottom-col
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 50%;
	gap: 1.5em;
	margin-top: 2em;
	margin-bottom: 2em;
}

.vcc-hover-left,
.vcc-hover-right,
.vcc-hover-bottom
{
	transition: all .1s ease-in-out;
	transition-delay: .2s;
	z-index: 15 !important;
}

#vcc-hover-left,
#vcc-hover-right
{
	position: relative; 
	width: 100%; 
	height: 100%;
}

.vcc-hover-left
{
	height: 100%;
	width: 50%;
	position: absolute;
	top: 0;
	left: -50%;
	
	background-color: #0E1116;

	z-index: 10;
}

.vcc-hover-right
{
	height: 100%;
	width: 50%;
	position: absolute;
	top: 0;
	right: -50%;
	
	background-color: #0E1116;

	z-index: 10;
}

.vcc-hover-bottom
{
	height: 100%;
	width: 100%;
	position: absolute;
	top: 100%;
	left: 0;
	
	background-color: #0E1116;

	z-index: 10;

	margin-top: 1.5em;

	display: flex;
	justify-content: center;
	align-items: center;
}

@media (min-width: 1150px)
{
	.vcc-body:has(.vcc-right .vcc-main-card:hover) .vcc-hover-left,
	.vcc-hover-left:hover
	{
		left: 60px !important;
	}

	.vcc-body:has(.vcc-left .vcc-main-card:hover) .vcc-hover-right,
	.vcc-hover-right:hover
	{
		right: 60px !important;
	}

	.vcc-body:has(.vcc-body-top .vcc-main-hero-card:hover) .vcc-hover-bottom,
	.vcc-hover-bottom:hover
	{
		top: 0 !important;
	}
}

.vcc-body .car-card
{
	transition: box-shadow .1s ease-in-out;
	box-shadow: 0 0 0 0 rgba(128,128,128,0);
}

.vcc-body .car-card:hover
{
	cursor: pointer;
	box-shadow: 0 0 0 1.3em rgba(128,128,128,.3);
}

.vcc-free-container
{
	width: 100%;
	/* height: 100%; */
	position: relative;

	display: flex;
	justify-content: center;
	align-items: flex-start;

	overflow: visible !important;

	
}

.vcc-free-body
{
	/* width: 30%; */
	/* height: 20%; */

	position: sticky;
	top: 20px;

	/* border: 1px solid red; */

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.cars-quick-scroll-btn
{
	position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);

    transition:
        opacity .2s ease-in-out,
        transform .2s ease-in-out,
        visibility 0s linear .2s;

    background: rgb(11, 20, 22);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    cursor: pointer;

	aspect-ratio: 1/1;

	border: 1px solid var(--gtaplus);
	border-radius: 50%;;
	outline: 0;	
	padding: 0.5em;
}

.cars-quick-scroll-btn img
{
	width: 2.5em;
	transition: transform  0.2s ease-in-out;
	margin-right: -5px;
}

.cars-quick-scroll-btn:hover
{
	background-color: rgb(26, 26, 26);
	outline: 1px solid var(--gtaplus);
	box-shadow: 0 0 0 0.5em rgba(128,128,128,.3);
}

.cars-quick-scroll-btn:hover img
{
	transform: scale(1.1);
}

.cars-quick-scroll-btn.show
{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);

    transition:
        opacity .2s ease-in-out,
        transform .2s ease-in-out,
        visibility 0s linear 0s;
}

.vcc-hover-detail-card
{
    /* width: 320px; */
	width: 100%;
    height: 340px;

    position: absolute;
    top: 20px;
    z-index: 50;

    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20, 24, 33, 0.98) 0%, rgba(10, 13, 20, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;

    pointer-events: none;

    transition:
        top 0.2s ease-in-out,
        opacity 0.15s ease-in-out;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

	overflow: hidden;
}

.vcc-hover-details-taller
{
	width:95% !important;
	height: 500px !important;
}

.vcc-hover-detail-left
{
    left: 50%;
    transform: translateX(-50%);
}

.vcc-hover-detail-right
{
    left: 50%;
    transform: translateX(-50%);
}

.vcc-hover-detail-top
{
	width: 100%;
	height: 60%;

}

.vcc-hover-detail-bottom
{
	width: 100%;
	height: auto;
	display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 1.5rem;
	z-index: 20;
}

.vcc-hover-detail-bottom-column
{
	display: flex !important;
	flex-direction: column !important;
}

#vccHoverDetailLeft,
#vccHoverDetailRight,
#vccHoverDetailBottom
{
	background: url('../img/vehicles/placeholder.webp');
	background-size: 110%;
	background-position: 50% 60%;
	background-repeat: no-repeat;
}

#vccHoverDetailLeft::after,
#vccHoverDetailRight::after,
#vccHoverDetailBottom::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(5, 8, 15, 0.95) 0%,
        rgba(5, 8, 15, 0.72) 18%,
        rgba(5, 8, 15, 0.24) 38%,
        rgba(5, 8, 15, 0.00) 58%
    );
    pointer-events: none;
    z-index: 1;
	width: 105%;
}

.vcc-hero-info
{
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 24px;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
}

.vcc-hero-left
{
    min-width: 160px;
	margin-right: 15px;
}

.vcc-hero-brand
{
    font-size: .9rem;
    font-weight: 700;
    color: rgba(255,255,255,.82);
    margin-bottom: 2px;
}

.vcc-hero-name
{
    font-size: 3rem;
    font-weight: 800;
    line-height: .95;
    color: #fff;
    text-shadow: 0 3px 12px rgba(0,0,0,.45);
    margin-bottom: 10px;

	line-height: .92;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
}

.vcc-hero-badge
{
    display: inline-block;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    background: #d94343;
    color: #fff;
}

.vcc-hero-badge-price
{
    display: inline-block;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: line-through;
    color: #fff;
}

.vcc-hero-right {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px 18px;
    width: fit-content;
    max-width: 100%;
    justify-content: start;
}

.vcc-hero-right span
{
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.60);
    margin-bottom: 2px;
}

.vcc-hero-right strong
{
    display: block;
    font-size: 1rem;
    color: #fff;
    line-height: 1.2;
}


.vcc-slide-card-title
{
    margin: 0 0 6px 0;
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 700;
    text-shadow: 0 3px 12px rgba(0,0,0,.42);
}

.vcc-slide-card-sub
{
    font-size: .95rem;
    color: rgba(255,255,255,.82);
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}



.vcc-main-card-gta-plus
{
    width: 320px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;

    background: linear-gradient(180deg, #151a24 0%, #0a0f17 100%);
    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 20px 40px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.02) inset,
        0 0 40px rgba(0,212,255,.08),
        0 0 70px rgba(140,82,255,.06);

    color: #f5f8ff;
    font-family: Arial, sans-serif;
}

.vcc-main-card-gta-plus::before
{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 12%, rgba(0,212,255,.10), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(160,90,255,.10), transparent 30%);
    z-index: 0;
}

.vcc-main-card-gta-plus > *
{
    position: relative;
    z-index: 1;
}

.vcc-gp-header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.vcc-gp-header-left,
.vcc-gp-header-right
{
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.vcc-gp-header-left
{
    color: rgba(255,255,255,.72);
}

.vcc-gp-header-left img
{
	height: 1rem;
}

.vcc-gp-header-right
{
    color: #b9f4ff;
    text-shadow: 0 0 12px rgba(0,212,255,.25);
}

.vcc-gp-image-wrap
{
    position: relative;
    height: 180px;
    overflow: hidden;
}

.vcc-gp-image-wrap img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vcc-gp-image-overlay
{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(8,11,18,.72), rgba(8,11,18,.06)),
        linear-gradient(90deg, rgba(0,212,255,.06), rgba(160,90,255,.05));
	opacity: 0.3;
}

.vcc-gp-glow
{
    position: absolute;
    inset: auto -20% -35% -20%;
    height: 70%;
    background: radial-gradient(circle, rgba(0,212,255,.14) 0%, rgba(160,90,255,.10) 35%, transparent 70%);
    filter: blur(22px);
    pointer-events: none;
}

.vcc-gp-body
{
    padding: 16px;
}

.vcc-gp-kicker
{
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.58);
    margin-bottom: 4px;
}

.vcc-gp-title
{
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.14;
    margin-bottom: 5px;
    color: #ffffff;
}

.vcc-gp-subtitle
{
    font-size: .88rem;
    color: rgba(255,255,255,.68);
}

.vcc-gp-divider
{
    height: 1px;
    margin: 15px 0 14px;
    background: linear-gradient(90deg, rgba(0,212,255,.38), rgba(160,90,255,.22), rgba(255,255,255,0));
}

.vcc-gp-footer
{
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.vcc-gp-stat
{
    min-width: 0;
    flex: 1;
}

.vcc-gp-stat small img
{
	width: 1rem;
	margin-top: -3px;
}

.vcc-gp-stat small
{
    display: block;
    margin-bottom: 4px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.48);
}

.vcc-gp-stat strong
{
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: #f8fbff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vcc-gp-price-block
{
    text-align: right;
}

.vcc-gp-price
{
    color: #9eeeff !important;
    text-shadow: 0 0 10px rgba(0,212,255,.20);
}

.vcc-main-hero-card
{
	width: 60%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    background: linear-gradient(180deg, #151a24 0%, #0a0f17 100%);
    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 24px 50px rgba(0,0,0,.48),
        0 0 0 1px rgba(255,255,255,.02) inset,
        0 0 45px rgba(0,212,255,.08),
        0 0 75px rgba(160,82,255,.06);

    color: #f5f8ff;
    font-family: Arial, sans-serif;
}

.vcc-main-hero-card::before
{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 10%, rgba(0,212,255,.10), transparent 28%),
        radial-gradient(circle at 88% 16%, rgba(160,82,255,.10), transparent 30%);
    z-index: 0;
}

.vcc-main-hero-card > *
{
    position: relative;
    z-index: 1;
}

.vcc-main-hero-header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.vcc-main-hero-header-left,
.vcc-main-hero-header-right
{
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.vcc-main-hero-header-left
{
    color: rgba(255,255,255,.72);
}

.vcc-main-hero-header-left img
{
	height: 1rem;
}

.vcc-main-hero-header-right
{
    color: #b9f4ff;
    text-shadow: 0 0 12px rgba(0,212,255,.25);
}

.vcc-main-hero-content
{
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 250px;
}

@media (max-width: 650px)
{
	.vcc-hover-left,
    .vcc-hover-right,
    .vcc-hover-detail-card
    {
        display: none !important;
    }
}

@media (max-width: 1100px)
{
    .vcc-main-hero-card
    {
        width: 60%;
		min-width: 320px;
    }

	.vcc-main-hero-image-wrap img
	{
		max-width: none !important;
		max-height: none !important;
	}

    .vcc-main-hero-content
    {
        grid-template-columns: 1fr;
    }
}

.vcc-main-hero-image-wrap
{
    position: relative;
    overflow: hidden;
    min-height: 250px;
}

.vcc-main-hero-image-wrap img
{
    width: 100%;
    height: 100%;
	max-width:395px;
	max-height:250px;
    object-fit: cover;
    display: block;
}

.vcc-main-hero-image-overlay
{
    position: absolute;
    inset: 0;
	opacity: 0.3;
    background:
        linear-gradient(to top, rgba(8,11,18,.66), rgba(8,11,18,.08)),
        linear-gradient(90deg, rgba(0,212,255,.05), rgba(160,90,255,.05));
}

.vcc-main-hero-glow
{
    position: absolute;
    inset: auto -15% -30% -15%;
    height: 65%;
    background: radial-gradient(circle, rgba(0,212,255,.15) 0%, rgba(160,90,255,.11) 35%, transparent 72%);
    filter: blur(24px);
    pointer-events: none;
}

.vcc-main-hero-pill
{
    position: absolute;
    top: 14px;
    left: 14px;

    padding: 7px 12px;
    border-radius: 999px;

    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    color: #fff;
    background: linear-gradient(90deg, rgba(0,212,255,.24), rgba(160,90,255,.24));
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}

.vcc-full-link
{
	position: absolute;
	top: 1em;
	right: 1em;
	aspect-ratio: 1/1;
	width: 2rem;
	height: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	padding: 0.5em;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;

	transition: background-color 0.1s ease-in-out;
}

.vcc-full-link:hover
{
	background: linear-gradient(90deg, rgba(0,212,255,.24), rgba(160,90,255,.24));
}

.vcc-main-hero-body
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 18px 16px;
}

.vcc-main-hero-kicker
{
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.58);
}

.vcc-main-hero-title
{
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 6px;
}

.vcc-main-hero-subtitle
{
    font-size: .92rem;
    line-height: 1.42;
    color: rgba(255,255,255,.72);
}

.vcc-main-hero-divider
{
    height: 1px;
    margin: 16px 0 14px;
    background: linear-gradient(90deg, rgba(0,212,255,.38), rgba(160,90,255,.22), rgba(255,255,255,0));
}

.vcc-main-hero-details
{
    font-size: .86rem;
    line-height: 1.45;
    color: rgba(255,255,255,.78);
    margin-bottom: 16px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.vcc-main-hero-footer
{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: auto;
}

.vcc-car-add-link
{
	aspect-ratio: 1/1;
	width: 4.2rem;
	height: 2.4rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;

	transition: background-color 0.1s ease-in-out;

	text-decoration: none;
}

.vcc-car-add-link:hover
{
	background: linear-gradient(90deg, rgba(0,212,255,.24), rgba(160,90,255,.24));
}

.vcc-main-hero-stat
{
    min-width: 0;
    flex: 1;
}

.vcc-main-hero-stat small
{
    display: block;
    margin-bottom: 4px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.48);
}

.vcc-main-hero-stat strong
{
    display: block;
    font-size: .92rem;
    font-weight: 600;
    color: #f8fbff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vcc-main-hero-price-block
{
    text-align: right;
}

.vcc-main-hero-price
{
    color: #9eeeff !important;
    text-shadow: 0 0 10px rgba(0,212,255,.22);
}

@media (max-width: 991.98px)
{
	.vcc-head-gta
	{
		display: none;
	}

	#edit-imgplate-row
	{
		flex-wrap: wrap;
	}

	#edit-imagepicker,
	#edit-platepicker
	{
		width: 100% !important;
	}
}

@media (min-width: 980px) {
  .custom-stack-at .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .custom-stack-at .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

/* When screen is narrower than 980px */
@media (max-width: 979.98px) {
  .custom-stack-at .col-md-4,
  .custom-stack-at .col-md-8 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .custom-stack-at .card-web-bg
  {
	background-position: 100% 20%;
  }

  .vcc-body-bottom
  {
	flex-direction: column;
  }

  .vcc-body-bottom-col
  {
	width: 100%;
  }
}

/* FC */

.fc-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1rem 1rem;
    color: #f5f5f5;
}

.fc-head {
    text-align: center;
    margin-bottom: 1.75rem;
}

.fc-tabs {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .45rem;
}

.fc-tabs a,
.fc-tabs span {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255,255,255,.62);
    text-decoration: none;
}

.fc-tabs .is-active {
    color: #ffffff;
}

.fc-head p {
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: .98rem;
}

.fc-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 1.1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background:
        radial-gradient(60rem 25rem at 0% 0%, rgba(154, 62, 62, 0.12), transparent 45%),
        radial-gradient(40rem 20rem at 100% 0%, rgba(88, 61, 148, 0.13), transparent 45%),
        radial-gradient(35rem 20rem at 50% 100%, rgba(0, 170, 190, 0.10), transparent 40%),
        rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
    overflow: hidden;
}

.fc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.fc-hero-image {
    min-height: 320px;
    border-radius: 14px;
    overflow: hidden;
    background: #17191e;
    border: 1px solid rgba(255,255,255,.06);
}

.fc-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fc-hero-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .35rem .25rem .35rem .15rem;
}

.fc-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: .9rem;
}

.fc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .38rem .72rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1;
}

/* general / category pills */
.fc-pill-main {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
}

.fc-pill-red {
    background: rgba(153, 61, 61, 0.18);
    border-color: rgba(198, 83, 83, 0.28);
    color: #ffb1b1;
}

.fc-pill-purple {
    background: rgba(110, 72, 173, 0.18);
    border-color: rgba(144, 98, 214, 0.28);
    color: #d7c2ff;
}

.fc-pill-cyan {
    background: rgba(18, 126, 140, 0.18);
    border-color: rgba(36, 172, 190, 0.28);
    color: #aeeef8;
}

.fc-pill-rockstar {
    background: rgba(255, 140, 0, 0.16);
    border-color: rgba(255, 166, 0, 0.34);
    color: #ffd08a;
}

/* platform pills */
.fc-pill-youtube {
    background: rgba(255, 0, 0, 0.14);
    border-color: rgba(255, 0, 0, 0.35);
    color: #ffb3b3;
}

.fc-pill-instagram {
    background: rgba(193, 53, 132, 0.16);
    border-color: rgba(193, 53, 132, 0.34);
    color: #ffc2e4;
}

.fc-pill-twitter {
    background: rgba(29, 161, 242, 0.16);
    border-color: rgba(29, 161, 242, 0.34);
    color: #b9e7ff;
}

.fc-pill-twitch {
    background: rgba(145, 70, 255, 0.16);
    border-color: rgba(145, 70, 255, 0.34);
    color: #dec8ff;
}

.fc-pill-tiktok {
    background: #0f0f10;
    border-color: rgba(255,255,255,.10);
    color: #ffffff;
    text-shadow:
        -0.4px 0 rgba(37, 244, 238, 0.75),
         0.4px 0 rgba(254, 44, 85, 0.75);
    box-shadow:
        inset 1px 0 0 rgba(37, 244, 238, 0.65),
        inset -1px 0 0 rgba(254, 44, 85, 0.65);
}

.fc-hero-body h3 {
    margin: 0 0 .8rem;
    font-size: 1.9rem;
    line-height: 1.08;
    font-weight: 800;
}

.fc-hero-body p {
    margin: 0 0 .9rem;
    color: rgba(255,255,255,.82);
    line-height: 1.62;
    font-size: .96rem;
}

.fc-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .25rem;
}

.fc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .72rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    transition: .15s ease-in-out;
}

.fc-link-main {
    background: rgba(255,255,255,.08);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.10);
}

.fc-link-alt {
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.08);
}

.fc-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

.fc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.fc-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03)),
        rgba(13,15,19,.72);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    overflow: hidden;
    transition: .16s ease-in-out;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
}

.fc-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

.fc-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1b1e24;
    overflow: hidden;
}

.fc-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fc-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.fc-card-top {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .8rem;
}

.fc-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.10);
    background: #272b33;
}

.fc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fc-card-title h4 {
    margin: 0 0 .18rem;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.fc-card-title span {
    display: block;
    font-size: .82rem;
    color: rgba(255,255,255,.62);
}

.fc-card-body p {
    margin: 0 0 .9rem;
    color: rgba(255,255,255,.8);
    line-height: 1.55;
    font-size: .93rem;
}

.fc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: .75rem;
    margin-top: auto;
    padding-top: .35rem;
}

.fc-mini-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.fc-mini-link {
    color: #d8e9ff;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 700;
    align-self: flex-end;
}

.fc-mini-link:hover {
    text-decoration: underline;
}

span.fc-pill
{
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.fc-mini-link:hover span.fc-pill
{
	box-shadow: 0 0 5px white;
	transform: translateY(-1px);
}

@media (max-width: 960px) {
    .fc-hero {
        grid-template-columns: 1fr;
    }

    .fc-grid {
        grid-template-columns: 1fr;
    }

    .fc-hero-body {
        padding: .25rem 0 0;
    }
}

#linkImgurCover
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%; 
	border-radius: 5px; 
	background-color:#1414148a; 
	backdrop-filter: blur(1px);
}

#linkImgurCover p
{
	padding: 0 1em;
	text-align: center;
}

#linkImgurCover button img
{
	width: 25px;
	margin-right: 0.25em;
}

#linked-accounts td
{	
	width: 33.33%;
	padding-bottom: .5rem;
}

.linked-account-img
{
	width: 30px;
}

#update-form .card
{
	min-width: 350px;
}


/* New Owned Garage Table */

.over-max
{
	outline: 2px solid var(--bs-danger) !important;
	border-radius: 5px;
	box-shadow: inset 0px 0px 5px var(--bs-danger);
	position: relative;
	z-index: 1;
	overflow: hidden;
	container-type: inline-size;
}

.over-max::before
{
	content: 'OVER CAPACITY';
	color: var(--bs-danger-opacity);
	font-weight: 900;
	font-size: 10cqi; 
	letter-spacing: 0.05em;
    white-space: nowrap;
	opacity: .35;
	position: absolute;
	top: 0;
	left: 0;
	width: 95%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
	margin-top: -4px;
	z-index: -1;
}

.over-max .garage-body
{
	background-color: var(--bs-danger-opacity);
}

#ownedGaragesTable
{
	margin-bottom: 0;
}

#ownedGaragesTable td
{
	padding: 0.25em 0.25em;
}

:root
{
	--garage-border: var(--bs-border-color);

	--garage-badge: #bdbdbd;

	--garage-bg: rgba(49, 49, 49, 0.05);

	--garage-add-bg: rgba(255,255,255,0.08);
	--garage-add-border: var(--bs-border-color);
	--garage-add-border-hover: rgba(0, 0, 0, 0.4);

	--totals-grad-a: rgba(0, 0, 0, 0.03);
	--totals-grad-b: rgba(0, 0, 0, 0.055);

	--bs-danger-opacity: #f5131b23;
}

body[data-bs-theme="dark"]
{
	--garage-border: var(--bs-border-color);

	--garage-badge: var(--mainBodyBgHover);

	--garage-bg: transparent;

	--garage-add-bg: rgba(255,255,255,0.08);
	--garage-add-border: var(--bs-border-color);
	--garage-add-border-hover: rgba(255, 255, 255, 0.7);

	--totals-grad-a: rgba(255,255,255,0.02);
	--totals-grad-b: rgba(255,255,255,0.045);
}

.garage-container
{
	display: flex;
	justify-content: center;
	margin: auto;
	align-items: stretch;
	width: 95%;
}

.garage-body
{
	display: flex;
	flex-direction: row;
	width: 95%; 
	border: 1px solid var(--garage-border); 
	border-top-left-radius: 5px; 
	border-bottom-left-radius: 5px;
	border-right: none;
	padding: 0.15em;
	background-color: var(--garage-bg);
}

.garage-body-share
{
	border: 1px solid var(--garage-border) !important; 
	border-radius: 5px !important;
}

.garage-body-half
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	padding: 0.25em 0.45em;
}

.garage-body-half p
{
	padding: 0;
	margin: 0;
}

.garage-body-half p:first-of-type
{
	margin-top: -3px;
}

.garage-body-half:first-of-type
{
	align-items: start;
	width: 60%;
}

.garage-body-half:last-of-type
{
	align-items: end;
	width: 40%;
}

.garage-delete
{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5%;
	border: 1px solid var(--garage-border); 
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	transition: all 0.1s ease;
	background-color: var(--bs-danger-subtle);
}

.garage-delete p
{
	transform: rotate(90deg);
	padding:0; 
	margin: 0; 
	text-align: center; 
	color: var(--bs-secondary-color);
	font-size: 0.9em;
	transition: all 0.1s ease;
	margin-right: -4px;
	opacity: 0.45;
}

.garage-delete:hover
{
	border-color: var(--bs-danger);
}

.garage-delete:hover p
{
	color: var(--bs-danger);
	opacity: 1;
}

.text-bg-g-type
{
	background-color: var(--okhand) !important;
	color: var(--darkFont) !important;
}

.text-bg-g-other
{
	background-color: var(--garage-badge) !important;
	color: var(--bs-body-color) !important;
}

.text-extras
{
	background-image: linear-gradient(180deg, #f6e27a 20%, #cb9b51 80%);
	color: transparent;
	background-clip: text;
	text-shadow: 0 3px 5px #ecaf228f, 0 -4px 5px #2b2b2b21;
}

/* Mobile TOC - displays from bottom up */
@media only screen and (max-width: 760px) 
{
	.garage-container
	{
		width: 100%;
		position: relative;
	}

	.garage-body
	{
		flex-direction: column;
		width:100%;
		border-top-right-radius: 5px; 
		border-bottom-right-radius: 5px;
		border: 1px solid var(--mainBodyBgHover); 
	}

	.garage-delete
	{
		position: absolute;
		bottom: .8em;
		right: 2.3em;
		width: 60px;
		height: 30px;
		border-radius: 5px;
	}

	.garage-delete p
	{
		transform: rotate(0deg);
		font-size: .85em;
		margin-right: 0;
	}

	.garage-body-half
	{
		width: 100%;
		align-items: start !important;
	}
	
	#garageReorderBtn
	{
		right: 3.5em !important;
	}
}

.totals-divider
{
	width: 100%;
	height: 1px;
	background-color: var(--bs-border-color);
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.totals-container
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: auto;
	align-items: center;
	width: 100%;
	gap: .5em;
}

.totals-body
{
	display: flex;
	flex-direction: row;
	width: 93%; 
	border: 1px solid var(--garage-border); 
	border-radius: 5px;
	padding: 0.15em;
	background: linear-gradient(
		110deg,
		var(--totals-grad-a), 
		var(--totals-grad-b), 
		var(--totals-grad-a) 
	);
	background-size: 200% 200%;
	background-position: 0% 50%;
	transition: background-position 500ms ease;
}

.totals-body:nth-child(2)
{
	padding: 0.25em;
}

.totals-body:hover {
	background-position: 100% 50%;
}

.garage-icon
{
	width: 20px;
	height: 20px;
	background-size: 100%;
	background-image: url("../img/theme/light/garage.webp");
}

body[data-bs-theme="dark"] .garage-icon
{
	background-image: url("../img/theme/dark/garage.webp");
}

.add-garage
{
	width: 38px;
	height: 38px;
	aspect-ratio: 1/1;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--garage-add-border);
	border-radius: 50%;
	background: linear-gradient(
		110deg,
		var(--totals-grad-a), 
		var(--totals-grad-b), 
		var(--totals-grad-a) 
	);
	transition: all .15s ease-in-out;
	box-shadow: inset 1px 1px 1px var(--garage-add-border),
	2px 2px 5px var(--garage-add-border-hover);
}

body[data-bs-theme="dark"] .add-garage
{
	box-shadow: none;
}

.add-garage:hover {
	background: var(--garage-add-bg);
	border: 1px solid var(--garage-add-border-hover);
}

#add-garage-img
{
	width: 20px;
	height: 20px;
	background-image: url('../img/theme/light/add_garage.webp');
	background-size: cover;
}

body[data-bs-theme="dark"] #add-garage-img
{
	background-image: url('../img/theme/dark/add_garage.webp');
}

select#garage_id + span .select2-selection.select2-selection--single
{
		background-image:
		linear-gradient(
		110deg,
		var(--totals-grad-a), 
		var(--totals-grad-b), 
		var(--totals-grad-a) 
		),
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

	background-repeat: no-repeat, no-repeat;
	background-position: 0% 50%, right 0.75rem center;
	background-size: 200% 200%, 16px 12px;
	border: 1px solid var(--garage-border);
	border-radius: 30px;
}

span.add-garage-dropdown.select2-dropdown
{
	border-radius: 10px !important;
}

span.select2-dropdown.add-garage-dropdown.select2-dropdown--above
{
	transform: translatey(-0.5em);
}

span.select2-dropdown.add-garage-dropdown.select2-dropdown--below
{
	margin-top: .5em;
}

/* 
	Profile.php
	> New is_editing changes
*/

#ownedVehiclesTable thead th
{
	font-weight: 600;
}

.isediting
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 174, 0, 0.2);
	border: 2px solid rgb(255, 174, 0);
	border-radius: 10px;
	z-index: 100;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/* 
	Cars.php
	> New vehicle logos
*/

.carMake {
    position: relative;
    overflow: hidden;
    z-index: 0; 
}

body[data-bs-theme="dark"].carMake {
	background: linear-gradient(to right, rgba(255, 225, 150, 0.05), rgba(255, 225, 150, 0.02) 50%, rgba(255, 225, 150, 0.00) 100% );
}

.carMake::before {
    content: "";
    position: absolute;
    top: calc(100%/2 - 10px);
    left: -10px;
    width: 120px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-40%) rotate(-16deg);
    opacity: 0.1;
    pointer-events: none;
    z-index: -2;
	-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 55%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 55%, rgba(0,0,0,0) 100%);
	transition: all 0.1s ease-in-out;
}

@media (max-width: 777px) {
	#mainBody
	{
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.carMake::before {
		top: 50%;
	}
}

tr[data-shareid]:hover .carMake::before{
	opacity: calc(var(--logoOpacity, .08) + .03);
}

body[data-bs-theme="dark"] .vapid.carMake::before,
body[data-bs-theme="dark"] .pegassi.carMake::before,
body[data-bs-theme="dark"] .obey.carMake::before,
body[data-bs-theme="dark"] .annis.carMake::before,
body[data-bs-theme="dark"] .buckingham.carMake::before,
body[data-bs-theme="dark"] .dinka.carMake::before,
body[data-bs-theme="dark"] .declasse.carMake::before,
body[data-bs-theme="dark"] .truffade.carMake::before,
body[data-bs-theme="dark"] .ocelot.carMake::before,
body[data-bs-theme="dark"] .hvy.carMake::before,
body[data-bs-theme="dark"] .grotti.carMake::before,
body[data-bs-theme="dark"] .canis.carMake::before,
body[data-bs-theme="dark"] .enus.carMake::before,
body[data-bs-theme="dark"] .ubermacht.carMake::before,
body[data-bs-theme="dark"] .principe.carMake::before,
body[data-bs-theme="dark"] .progen.carMake::before,
body[data-bs-theme="dark"] .bollokan.carMake::before,
body[data-bs-theme="dark"] .willard.carMake::before,
body[data-bs-theme="dark"] .stanley.carMake::before,
body[data-bs-theme="dark"] .shitzu.carMake::before,
body[data-bs-theme="dark"] .rune.carMake::before,
body[data-bs-theme="dark"] .maibatsu.carMake::before,
body[data-bs-theme="dark"] .toundra.carMake::before,
body[data-bs-theme="dark"] .eberhard.carMake::before,
body[data-bs-theme="dark"] .hijak.carMake::before,
body[data-bs-theme="dark"] .kraken.carMake::before,
body[data-bs-theme="dark"] .benefactor.carMake::before
{
	filter: invert(1);
}

.albany.carMake::before
{
	background-image: url('../img/vehicles/makes/albany.webp');
}

.annis.carMake::before
{
	background-image: url('../img/vehicles/makes/annis.webp');
}

.benefactor.carMake::before
{
	background-image: url('../img/vehicles/makes/benefactor.webp');
}

.bf.carMake::before
{
	background-image: url('../img/vehicles/makes/bf.webp');
	opacity: 0.05;
}

.bollokan.carMake::before
{
	background-image: url('../img/vehicles/makes/bollokan.webp');
}

.bravado.carMake::before
{
	background-image: url('../img/vehicles/makes/bravado.webp');
	opacity: 0.05;
}

.brute.carMake::before
{
	background-image: url('../img/vehicles/makes/brute.webp');
	top: 60%;
	left: -1px;
}

.buckingham.carMake::before
{
	background-image: url('../img/vehicles/makes/buckingham.webp');
}

.canis.carMake::before
{
	background-image: url('../img/vehicles/makes/canis.webp');
}

.chariot.carMake::before
{
	background-image: url('../img/vehicles/makes/charriot.webp');
}

.cheval.carMake::before
{
	background-image: url('../img/vehicles/makes/cheval.webp');
}

.classique.carMake::before
{
	background-image: url('../img/vehicles/makes/classique.webp');
}

.coil.carMake::before
{
	background-image: url('../img/vehicles/makes/coil.webp');
}

.declasse.carMake::before
{
	background-image: url('../img/vehicles/makes/declasse.webp');
}

.dewbauchee.carMake::before
{
	background-image: url('../img/vehicles/makes/dewbauchee.webp');
	top: 60%;
}

.dinka.carMake::before
{
	background-image: url('../img/vehicles/makes/dinka.webp');
}

.dundreary.carMake::before
{
	background-image: url('../img/vehicles/makes/dundreary.webp');
}

.eberhard.carMake::before
{
	background-image: url('../img/vehicles/makes/eberhard.webp');
}

.emperor.carMake::before
{
	background-image: url('../img/vehicles/makes/emperor.webp');
}

.enus.carMake::before
{
	background-image: url('../img/vehicles/makes/enus.webp');
}

.fathom.carMake::before
{
	background-image: url('../img/vehicles/makes/fathom.webp');
}

.gallivanter.carMake::before
{
	background-image: url('../img/vehicles/makes/gallivanter.webp');
}

.grotti.carMake::before
{
	background-image: url('../img/vehicles/makes/grotti.webp');
}

.hijak.carMake::before
{
	background-image: url('../img/vehicles/makes/hijak.webp');
}

.hvy.carMake::before
{
	background-image: url('../img/vehicles/makes/hvy.webp');
}

.imponte.carMake::before
{
	background-image: url('../img/vehicles/makes/imponte.webp');
}

.invetero.carMake::before
{
	background-image: url('../img/vehicles/makes/invetero.webp');
}

.jacksheepe.carMake::before
{
	background-image: url('../img/vehicles/makes/jacksheepe.webp');
}

.jobuilt.carMake::before
{
	background-image: url('../img/vehicles/makes/jobuilt.webp');
}

.karin.carMake::before
{
	background-image: url('../img/vehicles/makes/karin.webp');
	opacity: 0.05;
}

.kraken.carMake::before
{
	background-image: url('../img/vehicles/makes/kraken.webp');
}

.lampadati.carMake::before
{
	background-image: url('../img/vehicles/makes/lampadati.webp');
}

.lcc.carMake::before
{
	background-image: url('../img/vehicles/makes/lcc.webp');
}

.maibatsu.carMake::before
{
	background-image: url('../img/vehicles/makes/maibatsu.webp');
}

.mammoth.carMake::before
{
	background-image: url('../img/vehicles/makes/mammoth.webp');
	left: -1px;
	top: 60%;
}

.maxwell.carMake::before
{
	background-image: url('../img/vehicles/makes/maxwell.webp');
	opacity: 0.05;
}

.mtl.carMake::before
{
	background-image: url('../img/vehicles/makes/mtl.webp');
	top: 60%;
	left: -1px;
}

.nagasaki.carMake::before
{
	background-image: url('../img/vehicles/makes/nagasaki.webp');
	opacity: 0.07;
}

.obey.carMake::before
{
	background-image: url('../img/vehicles/makes/obey.webp');
}

.ocelot.carMake::before
{
	background-image: url('../img/vehicles/makes/ocelot.webp');
}

.overflod.carMake::before
{
	background-image: url('../img/vehicles/makes/overflod.webp');
	opacity: 0.05;
}

.pegassi.carMake::before
{
	background-image: url('../img/vehicles/makes/pegassi.webp');
}

.pfister.carMake::before
{
	background-image: url('../img/vehicles/makes/pfister.webp');
}

.principe.carMake::before
{
	background-image: url('../img/vehicles/makes/principle.webp');
}

.progen.carMake::before
{
	background-image: url('../img/vehicles/makes/progen.webp');
}

.rune.carMake::before
{
	background-image: url('../img/vehicles/makes/rune.webp');
}

.schyster.carMake::before
{
	background-image: url('../img/vehicles/makes/schyster.webp');
}

.shitzu.carMake::before
{
	background-image: url('../img/vehicles/makes/shitzu.webp');
}

.speedophile.carMake::before
{
	background-image: url('../img/vehicles/makes/speedophile.webp');
	top: 60%;
}

.stanley.carMake::before
{
	background-image: url('../img/vehicles/makes/stanley.webp');
}

.toundra.carMake::before
{
	background-image: url('../img/vehicles/makes/toundra.webp');
}

.truffade.carMake::before
{
	background-image: url('../img/vehicles/makes/truffade.webp');
}

.ubermacht.carMake::before
{
	background-image: url('../img/vehicles/makes/ubermacht.webp');
}

.vapid.carMake::before
{
	background-image: url('../img/vehicles/makes/vapid.webp');
}

.vomfeuer.carMake::before
{
	background-image: url('../img/vehicles/makes/vomfeuer.webp');
}

.vulcar.carMake::before
{
	background-image: url('../img/vehicles/makes/vulcar.webp');
}

.vysser.carMake::before
{
	background-image: url('../img/vehicles/makes/vulcar.webp');
}

.weeny.carMake::before
{
	background-image: url('../img/vehicles/makes/weeny.webp');
}

.westerncompany.carMake::before
{
	background-image: url('../img/vehicles/makes/western.webp');
	top: 60%;
}

.westernmotorcyclecompany.carMake::before
{
	background-image: url('../img/vehicles/makes/wmc.webp');
}

.willard.carMake::before
{
	background-image: url('../img/vehicles/makes/willard.webp');
}

.zirconium.carMake::before
{
	background-image: url('../img/vehicles/makes/zirconium.webp');
}

/*
*	About page
*/

.about-tabs
{
	font-weight: 600;
	font-size: 1.4rem;
	transform: scale(1);
}

.about-tabs li
{
	display: flex;
	justify-content: end;
}

.about-tabs li button
{
	color: white !important;
	opacity: .6;
	transition: all .1s ease-in-out;
}

[data-bs-theme="dark"] .about-tabs li button
{
	color: var(--bs-body-color) !important;
	opacity: .6;
	transition: all .1s ease-in-out;
}

.about-tabs li button.active
{
	transform: scale(1.25);
	opacity: 1;
}

#featured-root div.tab-pane div.card-body
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#featured-root div.tab-pane div.card-body p ::not(.smallboi p, .wideboi p)
{
	padding: 0 5em;
}

@media (max-width: 777px) {

	#aboutTabs
	{
		gap: 0.25em;
		font-size: 1em;
	}

	#aboutTabsContent
	{
		width: 100% !important;
	}

	#featured-root div.tab-pane div.card-body p
	{
		padding: 0 0em;
	}

	#progresspics
	{
		width: 99% !important;
	}

	#progresspics .wideboi img
	{
		width: 100% !important;
	}

}

/* changelog */
.cl-item
{
	border: 1px solid var(--bs-border-color);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	width: 95%;
	padding: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.cl-item code::before
{
	content: '- ';
}

#pane-credits p,
#pane-about p
{
	max-width: 75%;
}

#pane-credits .credits-half
{
	min-width: 400px;
}

@media (max-width: 777px) {
	#pane-credits p,
	#pane-about p
	{
		max-width: none;
	}
	#pane-credits .credits-half
	{
		align-items: center !important;
		border: none;
		width: 100% !important;
		padding-left: 0;
	}
	#pane-credits .credits-half ul
	{
		width: 100%;
	}
}

/* Edit Vehicle Modal - Image */

.edit-modal-image-chooser
{	
	display: flex;
	justify-content: center;
	align-items: center;
}

.edit-modal-image-chooser input[type="radio"]
{
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.edit-modal-image-chooser input[type="radio"] + label
{
	border: 1px solid var(--bs-border-color);
	border-radius: 25px;
	padding: 0.2em 0.6em;
}

.edit-modal-image-chooser input[type="radio"] + label:hover
{
	background-color: var(--bs-border-color);
	cursor: pointer;
}

.edit-modal-image-chooser input[type="radio"]:checked + label
{
	background-color: var(--bs-border-color-translucent);
}

.custom-image-toggle
{
	border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: 5px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.custom-image-toggle-option
{
    flex: 1 1 0;
    width: 50%;
    margin: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
	padding: 0.4em 0.6em;
    border-radius: 25px;
    transition: background-color .18s ease, color .18s ease;
}

.custom-image-toggle-option.active
{
    background-color: var(--bs-border-color-translucent);
	border: 1px solid var(--bs-border-color);
}

.custom-image-toggle-option:focus,
.custom-image-toggle-option:focus-visible
{
    outline: none;
    box-shadow: none;
}

#custom-image-options
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	margin-top: 0.5em;
}

.save-halo
{
    position: relative;
    z-index: 1;
}

.save-halo::after
{
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 12px;
    border: 3px solid rgba(255, 193, 7, .85);
    box-shadow: 0 0 22px rgba(255, 193, 7, .55);
    pointer-events: none;
    animation: saveHaloPulse 5s ease-out forwards;
}

.save-halo-fast
{
    position: relative;
    z-index: 1;
}

.save-halo-fast::after
{
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 12px;
    border: 3px solid rgba(255, 193, 7, .85);
    box-shadow: 0 0 22px rgba(255, 193, 7, .55);
    pointer-events: none;
    animation: saveHaloPulse 3s ease-out forwards;
}

.halo-highlight
{
	outline: 6px solid rgba(255, 193, 7, .85);
}

@keyframes saveHaloPulse
{
    0%
    {
        transform: scale(1.35);
		background-color: rgba(255, 193, 7, .45);
        opacity: 0;
    }

    20%
    {
        transform: scale(1.15);
		background-color: rgba(255, 193, 7, .25);
        opacity: 1;
    }

    100%
    {
        transform: scale(1);
		background-color: rgba(255, 193, 7, 0);
        opacity: 0;
    }
}

/* Plate editor */

.plate-container
{
	max-width: 100%;
	max-height: 95%;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1em;
	padding: 0.25em;
}

.plate-option
{
	border: 1px solid var(--bs-border-color);
	border-radius: 15px;
	background-position: center center;
	background-size: cover;
	background-color: rgba(0, 0, 0, 0.05);

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	position: relative;

	width: 200px;
	height: 110px;
}

body[data-bs-theme="dark"] .plate-option
{
	background-color: none;
}

.plate-option:hover
{
	background-color: var(--bs-border-color);
}

.plate-option img
{
	width: 95%;
}

.plate-option:has(.plate-text-display-none)
{
	height: 60px;
}

.plate-text-display
{
	position: absolute;
	top: 36%;
	width: 100%;
	font-family: 'PLATEFONT', sans-serif;
	font-size: 2.5em;
	font-weight: 600;
	text-align: center;
	color: white;
}

.plate-text-display-none
{
	position: absolute;
	top: 0;
	width: 100%;
	font-family: 'PLATEFONT', sans-serif;
	font-size: 2.5em;
	font-weight: 600;
	text-align: center;
	color: var(--bs-body-color);
}

body[data-bs-theme="dark"] .plate-text-display-none
{
	color: white;
}

.plate-choice
{
	user-select: none;
}

.plate-choice input[type="radio"] {
    display: none;
}

.plate-choice input[type="radio"]:checked + .plate-option {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}

.plate-choice:hover .plate-option {
    transform: scale(1.02);
}

/* Profile.php Mobile (iPhone 15) */
@media only screen and (max-width: 450px) 
{
	.plate-option
	{
		width: 120px;
		height: 70px;
	}

	.plate-option img
	{
		width: 85%;
	}

	.plate-text-display
	{
		font-size: 1.3em;
		font-weight: 500;
	}

	.plate-text-display-none
	{
		font-size: 1.5em;
	}

	.plate-option:has(.plate-text-display-none)
	{
		height: 40px;
	}
}

.plate-higher
{
	top: 30% !important;
}

.tbl-plate 
{
	top: 2px;
}

.tbl-plate-higher
{
	top: -2px;
}

.plate-edit-btn
{
	top: 10px !important;
}

.plate-white
{
	color: white !important;
}

.plate-yellow
{
	color: #CF9B17 !important;
}

.plate-yellow2
{
	color: #F7DB2F !important;
}

.plate-orange
{
	color: #CB7501 !important;
}

.plate-orange2
{
	color: #EBAF2B !important;
}

.plate-blue
{
	color: #2C307E !important;
}

.plate-blue2
{
	color: #394A77 !important;
}

#showPlateImg
{
	width: auto;
	height: 70px;
}

#showPlate
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-family: 'PLATEFONT', sans-serif;
	font-size: 1.5em;
	font-weight: 600;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

#showPlate p
{
	margin: 0;
	padding: 0;
	margin-top: 15px;
}

/* 
	Desktop Vehicle Organizer
*/

#vehicleOrganizerWrap {
    display: block !important;

    column-count: 3;
    /* column-gap: 16px; */
    column-fill: balance;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    padding: 4px 2px 12px;
}

#vehicleOrganizerWrap *,
#organizerVehiclePicker *,
.organizer-drag-helper,
.organizer-image-hover-preview {
    box-sizing: border-box;
}

#vehicleOrganizerWrap > .organizer-garage-card {
    display: inline-block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    break-inside: avoid;
    page-break-inside: avoid;

    margin: 16px 0 16px 0 !important;
    padding: 14px;

    vertical-align: top;
    align-self: start;

    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(17, 17, 17, 0.3);
    border-radius: 16px;

    overflow: hidden;
}

body[data-bs-theme="dark"] #vehicleOrganizerWrap > .organizer-garage-card {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .06);
}

.organizer-garage-card-placeholder {
    display: inline-block !important;
    min-height: 130px;
    margin: 0 0 16px 0;
    border-radius: 16px;
    border: 1px dashed rgba(49, 132, 253, .45);
    background: rgba(13, 110, 253, .07);
    break-inside: avoid;
}

.organizer-garage-card.ui-sortable-helper {
    column-span: none;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
}

/* Garage header */

.organizer-garage-title-container,
.organizer-garage-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.organizer-garage-title-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.organizer-garage-title-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}

.organizer-garage-title,
.organizer-garage-header-main {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.organizer-garage-title {
    width: auto !important;
    margin: 0 !important;

    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.12;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.organizer-garage-meta {
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap;

    font-size: .82rem;
    opacity: .9;
    text-align: right;
}

.organizer-garage-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 24px;
    padding: 3px 8px;

    border-radius: 999px;
    background: rgba(255, 255, 255, .20);

    font-size: .78rem;
    font-weight: 700;
}

body[data-bs-theme="dark"] .organizer-garage-count {
    background: rgba(255, 255, 255, .06);
}

.organizer-garage-toggle,
.organizer-garage-drag-handle {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;

    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    line-height: 1;
    opacity: .88;
    user-select: none;
}

.organizer-garage-toggle {
    cursor: pointer;
}

.organizer-garage-drag-handle {
    cursor: grab;
    font-size: 1rem;
}

.organizer-garage-drag-handle:active {
    cursor: grabbing;
}

.organizer-garage-toggle:hover,
.organizer-garage-drag-handle:hover {
    background: rgba(0, 0, 0, .08);
    opacity: 1;
}

body[data-bs-theme="dark"] .organizer-garage-toggle {
    filter: invert(1);
}

body[data-bs-theme="dark"] .organizer-garage-toggle:hover,
body[data-bs-theme="dark"] .organizer-garage-drag-handle:hover {
    background: rgba(255, 255, 255, .08);
}

.organizer-garage-card.organizer-garage-collapsed {
    padding-bottom: 10px;
}

.organizer-garage-card.organizer-garage-collapsed .organizer-floor-block {
    display: none !important;
}

.organizer-garage-card.organizer-garage-collapsed .organizer-garage-title-container,
.organizer-garage-card.organizer-garage-collapsed .organizer-garage-header {
    margin-bottom: 0 !important;
}

/* Over-capacity state */

.organizer-garage-overcap {
    outline: 2px solid rgba(226, 83, 83, .59);
    box-shadow: 0 0 0 6px rgba(226, 83, 83, .26);
}

body[data-bs-theme="dark"] .organizer-garage-overcap {
    outline-color: rgba(255, 179, 189, .48);
    box-shadow: 0 0 0 6px rgba(255, 179, 189, .27);
}

.organizer-garage-overcap .organizer-garage-count {
    color: #d10000;
    background: rgba(220, 53, 69, .18);
    border: 1px solid rgba(220, 53, 69, .45);
}

body[data-bs-theme="dark"] .organizer-garage-overcap .organizer-garage-count {
    color: #ffb3bd;
}

.organizer-garage-overcap .organizer-garage-title {
    color: #d10000;
}

body[data-bs-theme="dark"] .organizer-garage-overcap .organizer-garage-title {
    color: #ffb3bd;
}

/* Floor blocks */

.organizer-floor-block + .organizer-floor-block {
    margin-top: 14px;
}

.organizer-floor-label {
    margin: 2px 0 8px;

    font-size: .86rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;

    color: rgba(255, 255, 255, .62);
}

body:not([data-bs-theme="dark"]) .organizer-floor-label {
    color: rgba(0, 0, 0, .58);
}

/* Large garages stay readable without making the full page enormous */
.organizer-garage-card[data-capacity="20"] .organizer-floor-block,
.organizer-garage-card[data-capacity="30"] .organizer-floor-block,
.organizer-garage-card[data-capacity="40"] .organizer-floor-block,
.organizer-garage-card[data-capacity="50"] .organizer-floor-block,
.organizer-garage-card[data-capacity="60"] .organizer-floor-block {
    max-height: 690px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

/* Slot layout */

.organizer-floor-grid,
.organizer-floor-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    align-content: flex-start !important;

    gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-top: 10px !important;
    padding: 0 !important;

    overflow: visible !important;
}

.organizer-floor-grid > .organizer-slot-tile,
.organizer-floor-list > .organizer-slot-tile {
    position: relative;

    flex: 0 0 112px !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;

    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;

    overflow: visible !important;
}

.organizer-slot-card,
.organizer-floor-grid .organizer-slot-tile.is-empty,
.organizer-floor-list .organizer-slot-tile.is-empty {
    position: relative;

    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;

    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;

    border-radius: 8px;
    overflow: hidden;
}

.organizer-slot-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;

    margin: 0 !important;

    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
}

body:not([data-bs-theme="dark"]) .organizer-slot-card {
    color: var(--bs-body-color);
    background: rgba(0, 0, 0, .035);
    border-color: rgba(0, 0, 0, .10);
}

.organizer-slot-tile.is-new .organizer-slot-card {
    border-color: rgba(49, 132, 253, .78) !important;
    background: rgba(13, 110, 253, .08) !important;
    box-shadow:
        inset 0 0 0 1px rgba(49, 132, 253, .16),
        0 0 18px rgba(13, 110, 253, .12);
}

.organizer-slot-tile.is-picking .organizer-slot-card {
    border-color: rgba(49, 132, 253, .9) !important;
    background: rgba(13, 110, 253, .10) !important;
}

.organizer-slot-number {
    position: absolute;
    top: 7px;
    left: 8px;
    z-index: 4;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    color: rgba(255, 255, 255, .82);
    letter-spacing: .02em;
}

body:not([data-bs-theme="dark"]) .organizer-slot-number {
    color: rgba(0, 0, 0, .58);
}

.organizer-slot-drag-handle,
.organizer-drag-handle {
    position: absolute;
    top: 27px;
    left: 7px;
    z-index: 4;

    width: 16px;
    min-width: 16px;

    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .45);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    line-height: .7;

    cursor: grab;
    user-select: none;
}

.organizer-slot-drag-handle:active,
.organizer-drag-handle:active {
    cursor: grabbing;
}

body:not([data-bs-theme="dark"]) .organizer-slot-drag-handle,
body:not([data-bs-theme="dark"]) .organizer-drag-handle {
    color: rgba(0, 0, 0, .42);
}

.organizer-clear-new-slot,
.organizer-clear-new-row,
.organizer-remove-row {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;

    width: 23px;
    height: 23px;

    border: 0;
    border-radius: 999px;
    padding: 0;

    background: rgba(0, 0, 0, .30);
    color: rgba(255, 255, 255, .82);

    display: grid;
    place-items: center;

    font-size: 18px;
    line-height: 1;

    cursor: pointer;
}

.organizer-clear-new-slot:hover,
.organizer-clear-new-row:hover,
.organizer-remove-row:hover {
    background: rgba(220, 53, 69, .78);
    color: #fff;
}

.organizer-slot-image-wrap {
    height: 58px !important;
    margin-top: 18px !important;
    margin-left: 18px !important;

    border-radius: 7px;
    overflow: hidden;

    background: rgba(255, 255, 255, .04);

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.organizer-slot-image-wrap-empty {
    margin-left: 0 !important;
    background: rgba(255, 255, 255, .025);
}

.organizer-slot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A legacy class used by older organizer card HTML */
.organizer-image-placeholder,
.organizer-slot-image-placeholder {
    opacity: .45;
    font-size: 1.45rem;
    font-weight: 700;
}

.organizer-slot-info,
.organizer-row-main {
    min-width: 0 !important;
    flex: 1 1 auto !important;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.organizer-slot-title,
.organizer-row-title {
    min-height: 28px;

    color: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;

    overflow: hidden;
    text-overflow: ellipsis;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    word-break: normal;
    overflow-wrap: anywhere;
}

.organizer-slot-title-muted {
    color: rgba(255, 255, 255, .58);
}

body:not([data-bs-theme="dark"]) .organizer-slot-title-muted {
    color: rgba(0, 0, 0, .52);
}

.organizer-row-sub {
    margin-top: 2px;

    font-size: .72rem;
    line-height: 1.15;

    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.organizer-slot-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;

    min-height: 18px;
    margin-top: 5px;
}

.organizer-slot-make,
.organizer-slot-class,
.organizer-tag-pill {
    display: inline-flex;
    align-items: center;

    max-width: 100%;
    min-height: 18px;

    padding: 1px 7px;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    color: rgba(255, 255, 255, .74);
    background: rgba(255, 255, 255, .085);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not([data-bs-theme="dark"]) .organizer-slot-make,
body:not([data-bs-theme="dark"]) .organizer-slot-class,
body:not([data-bs-theme="dark"]) .organizer-tag-pill {
    color: rgba(0, 0, 0, .62);
    background: rgba(0, 0, 0, .07);
}

.organizer-new-pill {
    display: none !important;
}

/* Empty slots */

.organizer-floor-grid > .organizer-slot-tile.is-empty,
.organizer-floor-list > .organizer-slot-tile.is-empty {
    border: 1px dashed rgba(49, 132, 253, .45) !important;
    background: rgba(13, 110, 253, .025) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer;
}

.organizer-floor-grid > .organizer-slot-tile.is-empty:hover,
.organizer-floor-list > .organizer-slot-tile.is-empty:hover {
    border-color: rgba(49, 132, 253, .90) !important;
    background: rgba(13, 110, 253, .065) !important;
    box-shadow:
        inset 0 0 0 1px rgba(49, 132, 253, .16),
        0 0 18px rgba(13, 110, 253, .12);
}

.organizer-empty-slot-content {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;
    text-align: center !important;
}

.organizer-empty-slot-plus {
    width: 30px;
    height: 30px;

    border-radius: 50%;
    border: 1px solid rgba(49, 132, 253, .85);

    color: #6ea8fe;

    /* display: grid;
    place-items: center; */

    font-size: 23px;
    line-height: 1;
    margin-bottom: 3px;
	margin-top: -5px;
}

.organizer-empty-slot-title {
    display: block;

    max-width: 92px;

    color: rgba(255, 255, 255, .84);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
}

body:not([data-bs-theme="dark"]) .organizer-empty-slot-title {
    color: rgba(0, 0, 0, .68);
}

.organizer-empty-slot-subtitle {
    display: block;

    color: rgba(255, 255, 255, .46);
    font-size: 11px;
    line-height: 1.15;
}

body:not([data-bs-theme="dark"]) .organizer-empty-slot-subtitle {
    color: rgba(0, 0, 0, .46);
}

/* Drag/drop states */

.organizer-slot-drop-hover {
    border-color: rgba(49, 132, 253, .95) !important;
    background: rgba(13, 110, 253, .075) !important;
    box-shadow:
        0 0 0 1px rgba(49, 132, 253, .35),
        0 0 18px rgba(13, 110, 253, .18) !important;
}

.organizer-drag-helper {
    pointer-events: none;
    opacity: .92;
    transform: rotate(1deg);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
}

.organizer-placeholder {
    flex: 0 0 112px !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;

    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;

    border-radius: 8px;
    border: 2px dashed rgba(49, 132, 253, .55);
    background: rgba(13, 110, 253, .10);
}

/* Loading/new slot state */

.organizer-slot-spinner {
    width: 30px;
    height: 30px;

    border-radius: 50%;
    border: 2px solid rgba(49, 132, 253, .22);
    border-top-color: rgba(49, 132, 253, .95);

    animation: organizerSlotSpin .8s linear infinite;
}

@keyframes organizerSlotSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Warnings / status */

.organizer-limit-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    max-width: 100%;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: .84rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.organizer-limit-status.is-info {
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .88);
}

body:not([data-bs-theme="dark"]) .organizer-limit-status.is-info {
    background: rgba(0, 0, 0, .05);
    color: rgba(0, 0, 0, .78);
}

.organizer-limit-status.is-warning,
.organizer-empty-text,
.organizer-overflow-warning,
.organizer-slot-overflow-warning {
    border: 1px solid rgba(255, 193, 7, .35);
    border-radius: 8px;
    background: rgba(255, 193, 7, .08);
    color: #ffd66e;

    padding: 8px 10px;
    font-size: 12px;
}

.organizer-limit-status.is-error {
    border: 1px solid rgba(220, 53, 69, .45);
    background: rgba(220, 53, 69, .16);
    color: #ffb3bd;
}

.organizer-empty-text,
.organizer-overflow-warning,
.organizer-slot-overflow-warning {
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
}

body:not([data-bs-theme="dark"]) .organizer-empty-text,
body:not([data-bs-theme="dark"]) .organizer-overflow-warning,
body:not([data-bs-theme="dark"]) .organizer-slot-overflow-warning {
    color: #8a6500;
}

/* Hide old bottom add-row style if it is still rendered anywhere */
.organizer-add-row-wrap {
    display: none !important;
}

/* Legacy Select2 add slot styling - kept harmless in case old new-row markup appears */
.organizer-new-select {
    width: 100%;
}

.organizer-slot-select-wrap {
    margin-top: auto !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
}

.organizer-slot-select-wrap .select2-container {
    width: 100% !important;
}

.organizer-slot-select-wrap .select2-container .select2-selection {
    min-height: 30px !important;
    background: rgba(13, 110, 253, .08) !important;
    border: 1px solid rgba(49, 132, 253, .45) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, .9) !important;
}

/* Image hover preview */

.organizer-image-hover-preview {
    position: fixed;
    z-index: 2000;
    pointer-events: none;

    border-radius: 10px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .4);
    background: #111;
}

.organizer-image-hover-preview img {
    display: block;
    width: 180px;
    height: auto;
}

/* Vehicle picker popover */

.organizer-vehicle-picker {
    position: fixed;
    z-index: 999999;

    width: 330px;
    max-height: 390px;

    padding: 10px;

    background: #111418;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
}

.organizer-vehicle-picker::before {
    content: "";
    position: absolute;
    top: -8px;
    left: var(--organizer-picker-arrow-left, 28px);

    width: 14px;
    height: 14px;

    background: #111418;
    border-left: 1px solid rgba(255, 255, 255, .14);
    border-top: 1px solid rgba(255, 255, 255, .14);

    transform: translateX(-50%) rotate(45deg);
}

.organizer-vehicle-picker.opens-above::before {
    top: auto;
    bottom: -8px;
    transform: translateX(-50%) rotate(225deg);
}

.organizer-picker-search-wrap {
    position: relative;
    margin-bottom: 10px;
}

.organizer-picker-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 255, 255, .42);
    font-size: 14px;

    pointer-events: none;
}

.organizer-picker-search {
    width: 100%;
    height: 38px;

    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 5px;
    background: rgba(0, 0, 0, .22);

    color: rgba(255, 255, 255, .9);

    padding: 0 11px 0 34px;
    outline: none;
}

.organizer-picker-search:focus {
    border-color: rgba(49, 132, 253, .75);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, .16);
}

.organizer-picker-list {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.organizer-picker-option {
    width: 100%;

    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 11px;

    border: 0;
    border-radius: 6px;

    background: transparent;
    color: rgba(255, 255, 255, .86);

    text-align: left;

    padding: 7px;

    cursor: pointer;
}

.organizer-picker-option:hover,
.organizer-picker-option:focus {
    background: rgba(13, 110, 253, .12);
}

.organizer-picker-thumb-wrap {
    width: 82px;
    height: 52px;

    border-radius: 5px;
    overflow: hidden;

    background: rgba(255, 255, 255, .06);
}

.organizer-picker-thumb {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
}

.organizer-picker-info {
    min-width: 0;
}

.organizer-picker-name {
    display: block;

    color: rgba(255, 255, 255, .94);

    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organizer-picker-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;

    margin-top: 5px;
}

.organizer-picker-pill {
    display: inline-flex;
    align-items: center;

    min-height: 17px;

    padding: 1px 6px;

    border-radius: 999px;

    color: rgba(255, 255, 255, .74);
    background: rgba(255, 255, 255, .085);

    font-size: 10px;
    font-weight: 700;
}

.organizer-picker-empty {
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
    padding: 14px;
    text-align: center;
}

.organizer-picker-drag {
    display: none !important;
}

/* Organizer scrollbars */

.organizer-floor-block::-webkit-scrollbar,
.organizer-picker-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.organizer-floor-block::-webkit-scrollbar-track,
.organizer-picker-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .035);
    border-radius: 999px;
}

.organizer-floor-block::-webkit-scrollbar-thumb,
.organizer-picker-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

.organizer-floor-block::-webkit-scrollbar-thumb:hover,
.organizer-picker-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .30);
}

/* Responsive organizer columns */

@media (max-width: 1700px) {
    #vehicleOrganizerWrap {
        column-count: 2;
    }
}

@media (max-width: 1050px) {
    #vehicleOrganizerWrap {
        column-count: 1;
    }
}

@media (max-width: 700px) {
    #vehicleOrganizerWrap {
        column-count: 1;
        padding-left: 0;
        padding-right: 0;
    }

    #vehicleOrganizerWrap > .organizer-garage-card {
        width: 100% !important;
        margin-bottom: 14px !important;
    }

    .organizer-floor-grid > .organizer-slot-tile,
    .organizer-floor-list > .organizer-slot-tile,
    .organizer-slot-card,
    .organizer-floor-grid .organizer-slot-tile.is-empty,
    .organizer-floor-list .organizer-slot-tile.is-empty {
        flex-basis: 112px !important;
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
    }

    .organizer-vehicle-picker {
        width: min(330px, calc(100vw - 24px)) !important;
    }
}


.edit-mode-container
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.edit-mode-btn
{
	--bs-btn-padding-y: .25rem; 
	--bs-btn-padding-x: .5rem; 
	--bs-btn-font-size: .75rem;
}

#mainBody
{
	position: relative;
	overflow: hidden;
}

.vehicles-edit-corner-btn {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-bottom: 1px solid rgba(33,37,41,0.4);
    border-right: 1px solid rgba(33,37,41,0.4);
	border-top: none;
	border-left: none;
    border-bottom-right-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: rgba(33,37,41,1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

body[data-bs-theme="dark"] .vehicles-edit-corner-btn
{
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(255,255,255,0.1);
	background: rgba(255,255,255,0.04);
}

.vehicles-edit-corner-btn:hover {
	background-color: var(--bs-secondary-color);
	color: white;
}

body[data-bs-theme="dark"] .vehicles-edit-corner-btn:hover {
	background: rgba(255,255,255,0.08);
}

body.bulk-edit-mode .vehicles-edit-corner-btn {
    background: var(--bs-warning);
    border-color: var(--bs-warning);
    color: #111;
}

.add-vehicle-mini-action-shell {
    position: relative;
}

.add-vehicle-mini-action {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 65px;
    padding: 14px 16px;
    border: 1px solid rgba(2, 2, 2, 0.12);
    border-radius: 12px;
    background: linear-gradient( 110deg, var(--totals-grad-a), var(--totals-grad-b), var(--totals-grad-a) );
    color: var(--bs-body-color);
    box-shadow: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

body[data-bs-theme="dark"] .add-vehicle-mini-action {
	color: #e9eef9;
	background: #0d16264f;
	border: 1px solid rgba(255,255,255,.12);
}

.add-vehicle-mini-action:hover,
.add-vehicle-mini-action:focus {
    background: #c3c6ca;
    border-color: rgba(255,255,255,.22);
    color: #ffffff;
    transform: translateY(-1px);
}

body[data-bs-theme="dark"] .add-vehicle-mini-action:hover,
body[data-bs-theme="dark"] .add-vehicle-mini-action:focus {
    background: #111d31af;
    border-color: rgba(255,255,255,.22);
    color: #ffffff;
    transform: translateY(-1px);
}

.add-vehicle-mini-action.is-complete {
    border-color: rgba(46, 204, 113, .85);
    background: rgba(46, 204, 113, .08);
}

body[data-bs-theme="dark"] .add-vehicle-mini-action.is-complete {
    border-color: rgba(46, 204, 113, .85);
    background: rgba(46, 204, 113, .08);
}

.add-vehicle-mini-action.is-complete:hover,
.add-vehicle-mini-action.is-complete:focus {
    border-color: rgba(46, 204, 113, 1);
    background: rgba(46, 204, 113, .12);
}

.mini-action-icon {
    width: 76px;
    height: 48px;
    flex: 0 0 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(2, 2, 2, 0.12);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
}

body[data-bs-theme="dark"] .mini-action-icon:not(.mini-action-icon-plate) {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
}

.mini-action-icon-plate {
    background: url('../img/plates/2.webp');
	background-size: 100%;
	background-position: 50%;
	background-repeat: no-repeat;
    border-color: rgba(0,0,0,.12);
}

.mini-plate-text {
    font-family: 'PLATEFONT', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
	margin-top: 10px;
    letter-spacing: .01em;
    color: #233a63;
}

.mini-action-icon-image {
    font-size: 1.45rem;
    line-height: 1;
}

.mini-action-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.mini-action-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

body[data-bs-theme="dark"] .mini-action-title {
    font-size: 1rem;
    font-weight: 600;
    color: #f4f7ff;
}

.mini-action-subtitle {
    margin-top: .2rem;
    font-size: .85rem;
    color: #36383b;
}

body[data-bs-theme="dark"] .mini-action-subtitle {
    color: #aeb8cc;
}

.add-vehicle-mini-action.is-complete .mini-action-subtitle {
    color: #27a052;
}

body[data-bs-theme="dark"] .add-vehicle-mini-action.is-complete .mini-action-subtitle {
    color: #7ee0a0;
}

.mini-action-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.15rem;
    line-height: 1;
    opacity: .9;
    min-width: 1.1rem;
    text-align: center;
}

.mini-action-clear {
    position: absolute;
    right: 37px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    width: 24px;
    height: 24px;
    border: 1px solid rgba(251, 191, 191, 0.83);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: .95rem;
    line-height: 1;
    color: #df3d3d;
    background: rgba(255, 210, 210, 0.83);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

body[data-bs-theme="dark"] .mini-action-clear{
	border: 1px solid rgba(255,255,255,.18);
	color: #cfd6e6;
	background: rgba(255,255,255,.08);
}

.mini-action-clear:hover {
    background: rgba(255, 80, 80, .16);
    border-color: rgba(255, 80, 80, .65);
    color: #ff7373;
}

.mini-action-icon-image {
    overflow: hidden;
    position: relative;
    font-size: 1.45rem;
    line-height: 1;
}

.mini-image-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mini-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.add-vehicle-cropper-wrap {
    border-bottom: 1px solid rgba(85, 85, 85, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(229, 229, 229, 0.47);
}

body[data-bs-theme="dark"] .add-vehicle-cropper-wrap
{
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.03);
}

.add-vehicle-cropper-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .8rem;
    color: var(--bs-body-color);
    border-bottom: 1px solid rgba(85, 85, 85, 0.08);
}

.add-vehicle-cropper-header small {
    color: #434750;
}

body[data-bs-theme="dark"] .add-vehicle-cropper-header
{
	color: #e9eef9;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

body[data-bs-theme="dark"] .add-vehicle-cropper-header small {
    color: #aeb8cc;
}

.add-vehicle-cropper-footer {
	display: flex;
    justify-content: center;
    gap: 1rem;
    padding: .45rem .5rem;
    color: var(--bs-body-color);
    border-bottom: 1px solid rgba(85, 85, 85, 0.08);
}

body[data-bs-theme="dark"] .add-vehicle-cropper-footer {
    color: #e9eef9;
    border-top: 1px solid rgba(255,255,255,.08);
}

.add-vehicle-cropper-area {
    height: 420px;
    background: #080d16;
    display: flex;
    align-items: center;
    justify-content: center;
}

#addVehicleCropperImage {
    display: none;
    max-width: 100%;
    max-height: 100%;
}

.adder-notice
{
	position: absolute;
	left: 0;
	top: 0;
	width: 30%;
	height:100%;

	display: flex;
	justify-content: center;
	align-items: center;
}

.adder-notice p
{
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.1em;
}

/* 

	Blog / News CSS
	> news.php, article.php

*/

/* News */

.news-loading,
.news-end {
    text-align: center;
    padding: 28px 0;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 700;
}

.blog-page-wrap {
	max-width: 1580px;
	margin: 0 auto;
	padding: 18px 18px 60px;
}

.blog-page-header {
	margin-bottom: 28px;
}

.blog-page-header h1 {
	font-size: clamp(2rem, 4vw, 4rem);
	font-weight: 800;
	margin: 0;
	letter-spacing: -0.04em;
}

.blog-page-header p {
	color: rgba(255, 255, 255, 0.72);
	font-size: 1.05rem;
	margin-top: 8px;
}

.blog-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.blog-card {
	background: #050505;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 5px;
	overflow: hidden;
	min-height: 100%;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.blog-card:hover {
	transform: translateY(-1px);
	border-color: rgba(255, 255, 255, 0.35);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.blog-card-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.blog-card-image-wrap {
	width: 100%;
	height: 400px;
	aspect-ratio: 16 / 9;
	background: #111;
	overflow: hidden;
}

.blog-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease, filter 0.25s ease;
}

.blog-card:hover .blog-card-image {
	/* transform: scale(1.035);
	filter: brightness(1.06); */
}

.blog-card-image-placeholder {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #111, #222);
	color: rgba(255, 255, 255, 0.55);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.blog-card-content {
	padding: 28px 30px 34px;
}

.blog-card-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 12px;
	font-size: 0.95rem;
	line-height: 1.2;
}

.blog-card-category {
	color: #fff;
	font-weight: 700;
}

.blog-card-date {
	color: rgba(255, 255, 255, 0.55);
	font-weight: 600;
}

.blog-card-title {
	color: #fff;
	font-size: clamp(1.25rem, 1.55vw, 1.75rem);
	line-height: 1.22;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.035em;
}

@media (max-width: 1200px) {
	.blog-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}
}

@media (max-width: 700px) {
	.blog-page-wrap {
		padding: 22px 12px 44px;
	}

	.blog-card-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.blog-card-content {
		padding: 20px 22px 24px;
	}

	.blog-card-title {
		font-size: 1.35rem;
	}
}

/* Article */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 18px;
}

.blog-card {
	background: rgba(20, 20, 20, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	overflow: hidden;
}

.blog-card-img-wrap {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
}

.blog-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-card-body {
	padding: 16px;
}

.blog-card-meta,
.blog-post-meta {
	font-size: 1rem;
	opacity: 0.75;
	margin-bottom: 8px;
}

.blog-card-title {
	font-size: 1.25rem;
	margin-bottom: 10px;
}

.blog-card-title a {
	color: inherit;
	text-decoration: none;
}

.blog-card-title a:hover {
	text-decoration: underline;
}

.blog-card-excerpt {
	opacity: 0.9;
}

.blog-post-page {
	max-width: 950px;
	margin: 0 auto;
}

.blog-post-header {
	margin-bottom: 20px;
}

.blog-post-header h1 {
	font-weight: 600;
}

.blog-back-link {
	display: inline-block;
	margin-bottom: 16px;
	text-decoration: none;
}

.blog-hero-img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 18px;
	margin-bottom: 24px;
}

.blog-post-content {
	font-size: 1.05rem;
	line-height: 1.7;
}

.blog-post-content img,
.blog-post-img {
	max-width: 100%;
	border-radius: 14px;
	margin: 16px 0;
}


.blog-card-image {
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.25s ease, filter 0.25s ease;
}

.blog-card-image.is-loaded {
    opacity: 1;
}

.blog-card-image.is-error {
    opacity: 0.65;
}

.blog-media-embed {
    width: 100%;
    margin: 1.5rem 0;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
}

.blog-media-embed iframe {
    display: block;
    width: 100%;
    border: 0;
}

.blog-media-youtube {
    aspect-ratio: 16 / 9;
}

.blog-media-youtube iframe {
    height: 100%;
}

.blog-media-twitter iframe {
    /* min-height: 520px; */
}

.blog-media-reddit iframe {
    min-height: 520px;
}

.blog-media-twitter {
    display: flex;
    justify-content: center;
    /* min-height: 180px; */
    padding: 12px;
}

.blog-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.blog-post-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(10, 10, 10, 0.65);
    min-width: 520px;
}

.blog-post-table td,
.blog-post-table th {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
}

.blog-post-table tr:last-child td {
    border-bottom: 0;
}

.blog-post-table td:last-child,
.blog-post-table th:last-child {
    border-right: 0;
}

.owned-vehicle-name .p_radar-icon
{
	margin-left: 0;
	margin-right: 0.3em;
	margin-top: 0;
}

.p_radar-icon
{
	width: 24px;
	height: 24px;
	margin-left: 0.3em;
	margin-right: -3px;
	margin-top: -6px;
}

.s_radar-icon
{
	width: 24px;
	height: 24px;
	margin-left: 0.3em;
	margin-right: -3px;
}

#resetProfile {
    opacity: 0.65;
    cursor: not-allowed;
    user-select: none;
    transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
}

#resetProfile.reset-ready {
    opacity: 1;
    cursor: pointer;
    filter: brightness(1.1);
}

/* Mobile Organizer */

.mobile-organizer-modal {
    background: var(--bs-modal-bg);
    color: var(--darkFont);
    border: 0;
}

body[data-bs-theme="dark"] .mobile-organizer-modal {
    background:
        radial-gradient(circle at top, rgba(44, 92, 220, 0.22), transparent 34%),
        linear-gradient(180deg, #050914 0%, #070b13 100%);
    color: #f4f7fb;
    border: 0;
}

.mobile-organizer-header {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bs-modal-bg);
    border-bottom: 1px solid rgba(75, 75, 75, 0.452);
}

body[data-bs-theme="dark"] .mobile-organizer-header {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(6, 10, 20, 0.92);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-organizer-title {
    flex: 1;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
}

.mobile-organizer-icon-btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--darkFont);
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-bs-theme="dark"] .mobile-organizer-icon-btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #d6deee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-organizer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.mobile-organizer-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(44, 44, 44, 0.315);
    border-top: 1px solid rgba(255,255,255,0.08);
}

body[data-bs-theme="dark"] .mobile-organizer-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(6, 10, 20, 0.96);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.mobile-organizer-counts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mobile-organizer-count {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.445);
    color: var(--darkFont);
    font-size: 0.82rem;
    font-weight: 700;
}

body[data-bs-theme="dark"] .mobile-organizer-count {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: #e7edf9;
    font-size: 0.82rem;
    font-weight: 700;
}

.mobile-organizer-count-add {
    box-shadow: inset 0 0 0 2px rgba(88, 177, 104, 0.781);
}

body[data-bs-theme="dark"] .mobile-organizer-count-add {
    box-shadow: inset 0 0 0 1px rgba(88, 177, 104, 0.45);
}

.mobile-organizer-actions {
    display: flex;
    gap: 8px;
}

.mobile-organizer-loading {
    padding: 20px;
    color: #b8c4da;
}

.mobile-organizer-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.mobile-organizer-tab {
    border: 1px solid rgb(139, 139, 139);
    border-radius: 13px;
    background: transparent;
    color: var(--darkFont);
    padding: 12px;
    font-weight: 700;
}

body[data-bs-theme="dark"] .mobile-organizer-tab {
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: #cbd5e8;
    padding: 12px;
    font-weight: 700;
}

.mobile-organizer-tab.active {
    color: #054774;
    background: linear-gradient(180deg, rgba(61, 111, 255, 0.28), rgba(61, 111, 255, 0.12));
    border-color: rgba(74, 124, 255, 0.75);
    box-shadow: 0 0 22px rgba(74, 124, 255, 0.18);
}

body[data-bs-theme="dark"] .mobile-organizer-tab.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(61, 111, 255, 0.28), rgba(61, 111, 255, 0.12));
    border-color: rgba(74, 124, 255, 0.75);
    box-shadow: 0 0 22px rgba(74, 124, 255, 0.18);
}

.mobile-organizer-section-title {
    margin: 16px 0 8px;
    color: #3679ff;
    text-transform: uppercase;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

body[data-bs-theme="dark"] .mobile-organizer-section-title {
    margin: 16px 0 8px;
    color: #7aa7ff;
    text-transform: uppercase;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.mobile-organizer-field,
.mobile-organizer-select {
    min-height: 50px;
    border-radius: 14px;
    background-color: rgba(182, 182, 182, 0.473);
    border-color: rgba(97, 97, 97, 0.849);
    color: var(--darkFont);
}

body[data-bs-theme="dark"] .mobile-organizer-field,
body[data-bs-theme="dark"] .mobile-organizer-select {
    min-height: 50px;
    border-radius: 14px;
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: #fff;
}

.mobile-organizer-select option {
    color: #111;
}

.mobile-organizer-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: rgba(49, 49, 49, 0.39);
    border: 1px solid rgba(50, 50, 50, 0.67);
    color: var(--darkFont);
    text-align: left;
}

body[data-bs-theme="dark"] .mobile-organizer-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.085);
    color: #fff;
    text-align: left;
}

.mobile-organizer-card.active {
    border-color: rgba(74, 124, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(74, 124, 255, 0.22) inset, 0 0 20px rgba(74, 124, 255, 0.14);
}

.mobile-organizer-card-title {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-organizer-card-subtitle {
    margin-top: 2px;
    color: #383a3f;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-bs-theme="dark"] .mobile-organizer-card-subtitle {
    margin-top: 2px;
    color: #c5d0e5;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-organizer-info {
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(4, 9, 20, 0.85);
    border: 1px solid rgba(74, 124, 255, 0.22);
    color: #c8d2e7;
}

.mobile-organizer-primary {
    width: 100%;
    min-height: 54px;
    margin-top: 14px;
    border-radius: 16px;
    font-weight: 800;
    background: linear-gradient(180deg, #4278ff 0%, #2f66f8 100%);
    border: 0;
    color: #fff;
    box-shadow: 0 3px 10px rgba(47, 102, 248, 0.3)
}

@media (max-width: 575.98px) {
    .mobile-organizer-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .mobile-organizer-actions {
        width: 100%;
    }

    .mobile-organizer-actions .btn {
        flex: 1;
    }
}

.mobile-organizer-card-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-organizer-card-text {
    min-width: 0;
}

.mobile-organizer-thumb {
    width: 58px;
    height: 42px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.mobile-organizer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-organizer-thumb-empty {
    color: #8fa1c2;
}

.mobile-organizer-search-results {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.mobile-organizer-handle {
    width: 18px;
    color: #8da0c0;
    display: flex;
    justify-content: center;
}

.mobile-organizer-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.28);
    position: relative;
}

.mobile-organizer-radio.active {
    border-color: #4a7cff;
}

.mobile-organizer-radio.active::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #4a7cff;
}

.mobile-organizer-card-end {
    color: #8fa1c2;
}

.mobile-organizer-slot-help {
    color: var(--darkFont);
    font-size: 0.92rem;
    margin-bottom: 12px;
}

body[data-bs-theme="dark"] .mobile-organizer-slot-help {
    color: #cbd5e8;
    font-size: 0.92rem;
    margin-bottom: 12px;
}

.mobile-organizer-slot-card {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.mobile-organizer-slot-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.mobile-organizer-slot-title {
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.2;
}

.mobile-organizer-slot-floor {
    color: var(--darkFont);
    margin-top: 3px;
}

body[data-bs-theme="dark"] .mobile-organizer-slot-floor {
    color: #cbd5e8;
    margin-top: 3px;
}

.mobile-organizer-slot-usage {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(110, 110, 110, 0.288);
    color: var(--darkFont);
    font-weight: 800;
    white-space: nowrap;
}

body[data-bs-theme="dark"] .mobile-organizer-slot-usage {
    color: #e8eef9;
	background: rgba(255,255,255,0.07);
}

.mobile-organizer-slot-list {
    display: grid;
    gap: 10px;
}

.mobile-organizer-insert-btn {
    width: 100%;
    border: 0;
    background: transparent;
    color: #6fa2ff;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0;
    margin: -2px 0;
}

.mobile-organizer-slot-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
}

.mobile-organizer-slot-number {
    color: #dce4f4;
    font-weight: 800;
    text-align: center;
}

.mobile-organizer-place-slot {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
}

.mobile-organizer-place-box {
    min-height: 74px;
    border-radius: 16px;
    border: 2px dashed rgba(77, 124, 255, 0.8);
    color: #6ea1ff;
    background: rgba(28, 51, 108, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
}

.mobile-organizer-back-btn {
    min-width: 74px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: var(--darkFont);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding: 0 10px;
}

body[data-bs-theme="dark"] .mobile-organizer-back-btn {
    min-width: 74px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: #d6deee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding: 0 10px;
}

.mobile-organizer-review-list {
    display: grid;
    gap: 10px;
}

.mobile-organizer-review-empty {
    padding: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    color: #c8d2e7;
}

.mobile-organizer-review-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.085);
}

.mobile-organizer-review-type {
    color: #7aa7ff;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.mobile-organizer-review-title {
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-organizer-review-subtitle {
    margin-top: 2px;
    color: #c5d0e5;
    font-size: 0.88rem;
}

.mobile-organizer-review-remove {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(220, 53, 69, 0.16);
    color: #ff8f9d;
    font-weight: 900;
}

.mobile-organizer-review-remove:hover {
    background: rgba(220, 53, 69, 0.28);
    color: #fff;
}

@media (max-width: 575.98px) {
    .mobile-organizer-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .mobile-organizer-actions .btn {
        width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }
}

.mobile-organizer-slot-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.mobile-organizer-slot-grid-btn {
	min-height: 54px;
    border-radius: 14px;
    padding: 7px 5px;
    text-align: center;
    overflow: hidden;

    background: #f6f7fb;
    border: 1px solid #d7dce8;
    color: #182033;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.mobile-organizer-slot-grid-btn.is-empty {
    background: #eef5ff;
    border: 1px dashed #8ab4ff;
}

.mobile-organizer-slot-grid-btn.is-occupied {
    background: #e9edf4;
    border: 1px solid #bfc7d6;
}

.mobile-organizer-slot-grid-number {
    color: #4d7cff;
}

.mobile-organizer-slot-grid-name {
    color: #1d2433;
}

.mobile-organizer-slot-grid-empty {
    color: #5d8eff;
}

.mobile-organizer-slot-grid-btn:hover,
.mobile-organizer-slot-grid-btn:active {
    border-color: #4d7cff;
    background: #e8f1ff;
    box-shadow: 0 0 0 2px rgba(77, 124, 255, 0.18);
}

body[data-bs-theme="dark"] .mobile-organizer-slot-grid-btn {
    min-height: 54px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.045);
    color: #f4f7fb;
    padding: 7px 5px;
    text-align: center;
    overflow: hidden;
}

body[data-bs-theme="dark"] .mobile-organizer-slot-grid-btn.is-empty {
    border-style: dashed;
    border-color: rgba(77, 124, 255, 0.55);
    background: rgba(28, 51, 108, 0.14);
}

body[data-bs-theme="dark"] .mobile-organizer-slot-grid-btn.is-occupied {
    border-color: rgba(46, 46, 46, 0.849);
    background: rgba(78, 78, 78, 0.29);
}

body[data-bs-theme="dark"] .mobile-organizer-slot-grid-btn.is-occupied {
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.065);
}

body[data-bs-theme="dark"] .mobile-organizer-slot-grid-btn:active,
body[data-bs-theme="dark"] .mobile-organizer-slot-grid-btn:hover {
    border-color: rgba(77, 124, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(77, 124, 255, 0.22) inset, 0 0 18px rgba(77, 124, 255, 0.15);
}

.mobile-organizer-slot-grid-number {
    font-size: 0.82rem;
    font-weight: 900;
    color: #8fb3ff;
    line-height: 1;
}

.mobile-organizer-slot-grid-name {
    margin-top: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgb(56, 56, 56);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-bs-theme="dark"] .mobile-organizer-slot-grid-name {
    color: #f4f7fb;
}

.mobile-organizer-slot-grid-empty {
    margin-top: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #7faaff;
}

.mobile-organizer-unlimited-slot-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.085);
}

.mobile-organizer-unlimited-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

/* Compact View */

.owned-vehicles-page {
	max-width: 1380px;
	margin: 0 auto;
}

.owned-vehicles-view-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 18px;
	margin-bottom: 24px;
}

.owned-vehicles-view-header h1 {
	margin: 0 0 8px;
	font-size: clamp(1.55rem, 2vw, 2.25rem);
	letter-spacing: -.03em;
}

.owned-vehicles-view-header p {
	margin: 0;
	color: var(--bs-secondary-color);
	max-width: 780px;
	line-height: 1.5;
}

.owned-vehicles-view-toggle {
	display: flex;
	background: rgba(255,255,255,.06);
	border: 1px solid var(--bs-border-color);
	border-radius: 999px;
	padding: 4px;
	white-space: nowrap;
}

.owned-vehicles-view-toggle span {
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--bs-secondary-color);
	font-size: .9rem;
}

.owned-vehicles-view-toggle .active {
	background: var(--bs-primary);
	color: #06101d;
	font-weight: 800;
	box-shadow: 0 0 18px rgba(77,163,255,.35);
}

/* Main compact view container */
#ownedVehicleCompactContainer {
	width: 100%;
}

.owned-vehicle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 15px;
}

.owned-vehicle-card {
	--owned-vehicle-color: #4da3ff;
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background: var(--owned-card-bg);
	border: 1px solid rgba(83, 83, 83, 0.3);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

[data-bs-theme="dark"] .owned-vehicle-card {
	box-shadow: 0 10px 26px rgba(0,0,0,.18);
	border: 1px solid var(--bs-border-color);
}

.owned-vehicle-card:hover {
	/* transform: translateY(-3px); */
	background: var(--owned-card-bg-hover);
	border-color: rgba(77,163,255,.42);
	box-shadow:
		0 16px 45px rgba(0,0,0,.28),
		0 0 0 1px rgba(77,163,255,.25),
		0 0 26px rgba(77,163,255,.16);
}

.owned-vehicle-card.is-favourite {
	border-color: rgba(255,200,87,.42);
}

.owned-vehicle-card.is-favourite:before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255,200,87,.18);
	z-index: 8;
}

.owned-vehicle-image-wrap {
	position: relative;
	aspect-ratio: 97 / 55;
	overflow: hidden;
	background: #0d1420;
}

.owned-vehicle-image {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(125deg, rgba(255,255,255,.08), transparent 38%),
		var(--owned-vehicle-image);
	background-size: cover;
	background-position: center;
	transform: scale(1.01);
	transition: transform .22s ease, filter .22s ease;
}

.owned-vehicle-card:hover .owned-vehicle-image {
	transform: scale(1.055);
	filter: saturate(1.1) contrast(1.05);
}

 This is the vehicle color indicator. No border/dot; only a lower-right image glow. */
.owned-vehicle-color-glow {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40%;
	height: 50%;
	background: radial-gradient(circle at 90% 90%, var(--owned-vehicle-color) 0%, color-mix(in srgb, var(--owned-vehicle-color) 45%, transparent) 22%, transparent 50%);
	opacity: .35;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 5;
}

.owned-vehicle-name-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	min-height: 42px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 30px 11px 9px;
	background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.42) 45%, transparent);
	font-weight: 850;
	letter-spacing: -.015em;
	line-height: 1.05;
	text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.owned-vehicle-make {
	display: block;
	color: rgba(255,255,255,.66);
	font-size: .68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 3px;
}

.owned-vehicle-name {
	display: block;
	color: #fff;
}

.owned-vehicle-hover-panel {
	position: absolute;
	left: 9px;
	right: 9px;
	top: 9px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 7px;
	transform: translateY(-135%);
	opacity: 0;
	transition: transform .18s ease, opacity .18s ease;
}

.owned-vehicle-card:hover .owned-vehicle-hover-panel {
	transform: translateY(0);
	opacity: 1;
}

.owned-vehicle-hover-left,
.owned-vehicle-hover-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.owned-vehicle-hover-pill,
.owned-vehicle-action-btn,
.owned-vehicle-favourite-marker {
	border: 1px solid rgba(255,255,255,.15);
	background: rgba(6,12,22,.72);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.owned-vehicle-hover-pill {
	min-height: 29px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 8px;
	border-radius: 999px;
	font-size: .72rem;
	color: rgba(255,255,255,.86);
	font-weight: 750;
}

.owned-vehicle-action-btn {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	color: #fff;
	display: inline-grid;
	place-items: center;
	text-decoration: none;
	font-weight: 900;
	line-height: 1;
	transition: transform .12s ease, background .12s ease;
}

.owned-vehicle-action-btn:hover {
	transform: translateY(-1px);
	background: rgba(77,163,255,.8);
}

.owned-vehicle-favourite-marker {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 4;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255,200,87,.94);
	color: #211600;
	border: 2px solid rgba(255,255,255,.5);
	font-weight: 950;
	font-size: .8rem;
	pointer-events: none;
	transition: opacity .14s ease;
}

.owned-vehicle-card:hover .owned-vehicle-favourite-marker {
	opacity: 0;
}

.owned-vehicle-info {
	padding: 9px 10px 10px;
}

.owned-vehicle-location-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	color: var(--darkFont);
	font-size: .76rem;
	font-weight: 700;
	line-height: 1.2;
}

[data-bs-theme="dark"] .owned-vehicle-location-line
{
	color: var(--bs-secondary-color);
	font-weight: inhert;
}

.owned-vehicle-location {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.owned-vehicle-slot {
	color: var(--bs-body-color);
	font-weight: 700;
	white-space: nowrap;
}

.owned-vehicle-detail-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 7px;
}

.owned-vehicle-plate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 70px;
	height: 35px;
	padding: 0 7px;
	padding-top: 0.6em;
	border-radius: 5px;
	/* background: #f1f1f1; */
	color: rgb(255, 255, 255);
	font-family: 'PLATEFONT', sans-serif;
	font-weight: 500;
	letter-spacing: .06em;
	font-size: 1em;
	border: 1px solid rgba(0,0,0,.45);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
	white-space: nowrap;
	background-image: url('../img/plates/1.webp');
	background-position: 50% 50%;
	background-size: cover;
}

.owned-vehicle-tags {
	display: flex;
	justify-content: flex-end;
	gap: 5px;
	flex-wrap: wrap;
	min-width: 0;
}

.owned-vehicle-tag {
	max-width: 92px;
	font-size: .68rem;
	padding: 4px 7px;
	border-radius: 999px;
	background: rgba(80, 80, 80, 0.5);
	border: 1px solid rgba(56, 56, 56, 0.356);
	color: rgba(255,255,255,.76);
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body[data-bs-theme="dark"] .owned-vehicle-tag {
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.08);
	color: rgba(255,255,255,.76);
}

.owned-vehicle-tag.tag-blue {
	color: #b9dbff;
	background: rgba(77,163,255,.12);
	border-color: rgba(77,163,255,.2);
}

.owned-vehicle-tag.tag-green {
	color: #bffad8;
	background: rgba(51,209,122,.12);
	border-color: rgba(51,209,122,.2);
}

.owned-vehicle-tag.tag-yellow {
	color: #ffe9a6;
	background: rgba(255,200,87,.12);
	border-color: rgba(255,200,87,.2);
}

.owned-vehicle-note-preview {
	margin-top: 8px;
	padding: 7px 8px;
	border-radius: 10px;
	color: rgba(255,255,255,.72);
	font-size: .72rem;
	line-height: 1.25;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.06);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--darkFont);
	background: linear-gradient(135deg, #f5f5f5, #dfdfdf);
}

body[data-bs-theme="dark"] .owned-vehicle-note-preview {
	color: rgba(255,255,255,.72);
	background: rgba(255,255,255,.05);
}

@media (max-width: 720px) {
	.owned-vehicles-view-header {
		display: block;
	}

	.owned-vehicles-view-toggle {
		margin-top: 16px;
		width: fit-content;
	}

	.owned-vehicle-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.owned-vehicle-name-overlay {
		font-size: .9rem;
	}

	.owned-vehicle-hover-panel {
		display: none;
	}

	.owned-vehicle-detail-row {
		display: block;
	}

	.owned-vehicle-plate {
		margin-bottom: 7px;
	}

	.owned-vehicle-tags {
		justify-content: flex-start;
	}
}

.owned-vehicle-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.owned-vehicle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.owned-vehicle-location-divider {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 3px 12px;
    margin-top: 6px;
    background-color: #dee2e6;
    color: var(--bs-body-color);
    text-align: center;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

body[data-bs-theme="dark"] .owned-vehicle-location-divider {
	background-color: var(--mainBodyBgHover);
}

body.bulk-edit-mode .owned-vehicle-location-divider
{
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent) !important;
	background-size: 1rem 1rem !important;
	background: var(--bs-warning);
	color: var(--darkFont);
	font-weight: 600;
	border-radius: 8px;
	padding: 1px 12px;
	font-size: .9em;
}

.owned-vehicle-random-highlight {
    box-shadow:
        0 0 0 2px rgba(255, 200, 87, .9),
        0 0 28px rgba(255, 200, 87, .45),
        0 16px 45px rgba(0, 0, 0, .28) !important;
    border-color: rgba(255, 200, 87, .85) !important;
}

.owned-vehicle-no-results {
    grid-column: 1 / -1;
    padding: 18px;
    border-radius: 14px;
    text-align: center;
    color: var(--bs-secondary-color);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

.owned-vehicles-header {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 24px;
    margin-bottom: 14px;
}

.owned-vehicles-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.owned-vehicles-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.owned-view-toggle {
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 10px;
	gap: 2px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
	border: 1px solid var(--bs-border-color);
	background-color: var(--mainBodyBg);
}

body[data-bs-theme="dark"] .owned-view-toggle {
	background: rgba(5, 10, 20, .55);
	border: 1px solid rgba(255,255,255,.14);
}

.owned-view-toggle-btn {
    width: 35px;
    height: 25px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.owned-view-toggle-btn:hover {
    color: var(--bs-body-color);
    background: rgba(48, 48, 48, 0.2);
}

body[data-bs-theme="dark"] .owned-view-toggle-btn:hover {
    color: var(--bs-body-color);
    background: rgba(255,255,255,.06);
}

.owned-view-toggle-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #636363, #393939);
    box-shadow:
        0 0 18px #6783aa31,
        inset 0 0 0 1px rgba(255,255,255,.12);
}

body[data-bs-theme="dark"] .owned-view-toggle-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #252f3d, #374558);
    box-shadow:
        0 0 18px #6783aa31,
        inset 0 0 0 1px rgba(255,255,255,.12);
}

.owned-controls-divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.16);
}

.owned-random-btn {
    height: 42px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(5, 10, 20, .45);
    color: var(--bs-body-color);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.owned-random-btn:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.28);
    box-shadow: 0 0 18px rgba(255,255,255,.06);
}

.owned-random-btn:active,
.owned-view-toggle-btn:active {
    transform: scale(.97);
}

.owned-vehicles-stats {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 800px) {
    .owned-vehicles-header {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .owned-vehicles-controls {
        justify-content: space-between;
    }

    .owned-vehicles-stats {
        justify-self: start;
        flex-wrap: wrap;
    }

    .owned-random-btn {
        margin-left: auto;
    }
}

.owned-view-toggle-btn svg,
.owned-random-btn svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    display: block;
}

.owned-random-btn svg {
    width: 20px;
    height: 20px;
}

.organizer-slot-card {
    position: relative !important;
}


.organizer-slot-number {
    position: absolute !important;
    top: 7px !important;
    left: 8px !important;
    right: auto !important;
    z-index: 6 !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: rgba(26, 26, 26, 0.9) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

body[data-bs-theme="dark"] .organizer-slot-number {
	color: rgba(255, 255, 255, .9) !important;
}


.organizer-slot-card > .organizer-drag-handle,
.organizer-slot-card > .organizer-slot-drag-handle {
    position: absolute !important;
    top: 7px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 9 !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: rgba(255, 255, 255, .55) !important;
    font-size: 12px !important;
    line-height: 1 !important;

    cursor: grab !important;
    user-select: none !important;
}

.organizer-slot-card > .organizer-drag-handle:hover,
.organizer-slot-card > .organizer-slot-drag-handle:hover {
    color: rgba(255, 255, 255, .95) !important;
}

.organizer-slot-card > .organizer-drag-handle:active,
.organizer-slot-card > .organizer-slot-drag-handle:active {
    cursor: grabbing !important;
}


.organizer-slot-card[data-item-type="new"][data-carid=""] > .organizer-drag-handle,
.organizer-slot-card[data-item-type="new"][data-carid=""] > .organizer-slot-drag-handle {
    display: none !important;
}


.organizer-clear-new-slot {
    position: absolute !important;
    top: 5px !important;
    right: 24px !important;
    z-index: 10 !important;
}

.organizer-slot-image-wrap {
    width: calc(100% - 20px) !important;
    height: 62px !important;

    margin: 22px auto 9px auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 6px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .045) !important;
}

.organizer-slot-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}


.organizer-slot-image-wrap-empty {
    width: 46px !important;
    height: 46px !important;
    margin: 34px auto 10px auto !important;
    background: rgba(13, 110, 253, .08) !important;
}

.organizer-slot-info {
    width: 100% !important;
    padding: 0 8px 8px 8px !important;
    box-sizing: border-box !important;
}

.organizer-slot-title {
    text-align: left !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    min-height: 28px !important;
    margin-bottom: 6px !important;
}

.organizer-slot-pill-row {
    display: flex !important;
    justify-content: flex-start !important;
}


.organizer-drag-helper {
    position: absolute !important;
    z-index: 999999 !important;

    display: block !important;
    box-sizing: border-box !important;

    width: 112px !important;
    height: 154px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    min-height: 154px !important;
    max-height: 154px !important;

    opacity: .92 !important;
    transform: rotate(1deg) scale(1.02);
    pointer-events: none !important;

    background: rgba(20, 24, 31, .98) !important;
    border: 1px solid rgba(49, 132, 253, .7) !important;
    border-radius: 8px !important;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, .45),
        0 0 0 1px rgba(49, 132, 253, .18),
        0 0 22px rgba(13, 110, 253, .18) !important;

    overflow: hidden !important;
}

.organizer-drag-helper .organizer-slot-image-wrap {
    width: calc(100% - 20px) !important;
    height: 62px !important;
    margin: 22px auto 9px auto !important;
}

.organizer-drag-helper .organizer-slot-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.organizer-drag-helper .organizer-slot-info {
    width: 100% !important;
    padding: 0 8px 8px 8px !important;
    box-sizing: border-box !important;
}

.organizer-drag-helper .organizer-slot-title {
    font-size: 12px !important;
    line-height: 1.15 !important;
    min-height: 28px !important;
    margin-bottom: 6px !important;
}

.organizer-drag-helper .organizer-slot-number {
    position: absolute !important;
    top: 7px !important;
    left: 8px !important;
}

.organizer-drag-helper .organizer-drag-handle,
.organizer-drag-helper .organizer-slot-drag-handle {
    position: absolute !important;
    top: 7px !important;
    right: 8px !important;
}

#vehicleOrganizerWrap {
    --organizer-layout-gap: 16px;
    --organizer-card-1col: calc((100% - (var(--organizer-layout-gap) * 2)) / 3);
    --organizer-card-2col: calc((var(--organizer-card-1col) * 2) + var(--organizer-layout-gap));

    --organizer-slot-width: 126px;
    --organizer-slot-height: 154px;
    --organizer-slot-gap: 8px;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;

    gap: var(--organizer-layout-gap) !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    padding: 4px 2px 12px !important;
    box-sizing: border-box !important;

    column-count: auto !important;
}

#vehicleOrganizerWrap > .organizer-garage-card {
    flex: 0 0 var(--organizer-card-1col) !important;

    width: var(--organizer-card-1col) !important;
    min-width: 0 !important;
    max-width: var(--organizer-card-1col) !important;

    margin: 0 !important;
    box-sizing: border-box !important;

    column-span: none !important;
    break-inside: auto !important;
    page-break-inside: auto !important;

    overflow: visible !important;
}

#vehicleOrganizerWrap > .organizer-garage-card[data-capacity="20"],
#vehicleOrganizerWrap > .organizer-garage-card[data-capacity="30"],
#vehicleOrganizerWrap > .organizer-garage-card[data-capacity="40"],
#vehicleOrganizerWrap > .organizer-garage-card[data-capacity="50"],
#vehicleOrganizerWrap > .organizer-garage-card[data-capacity="60"] {
    flex: 0 0 var(--organizer-card-2col) !important;

    width: var(--organizer-card-2col) !important;
    min-width: 0 !important;
    max-width: var(--organizer-card-2col) !important;
}

@media (max-width: 1400px) {
    #vehicleOrganizerWrap {
        --organizer-card-1col: calc((100% - var(--organizer-layout-gap)) / 2);
        --organizer-card-2col: 100%;
    }
}

@media (max-width: 900px) {
    #vehicleOrganizerWrap {
        --organizer-card-1col: 100%;
        --organizer-card-2col: 100%;
    }
}

.organizer-floor-grid {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: var(--organizer-slot-gap) !important;

    align-items: flex-start !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow: visible !important;
    box-sizing: border-box !important;

    grid-template-columns: none !important;
}

.organizer-floor-grid > .organizer-slot-tile {
    flex: 0 0 var(--organizer-slot-width) !important;

    width: var(--organizer-slot-width) !important;
    min-width: var(--organizer-slot-width) !important;
    max-width: var(--organizer-slot-width) !important;

    height: var(--organizer-slot-height) !important;
    min-height: var(--organizer-slot-height) !important;
    max-height: var(--organizer-slot-height) !important;

    box-sizing: border-box !important;
}

.organizer-floor-grid .organizer-slot-card,
.organizer-floor-grid .organizer-slot-tile.is-empty {
    width: var(--organizer-slot-width) !important;
    min-width: var(--organizer-slot-width) !important;
    max-width: var(--organizer-slot-width) !important;

    height: var(--organizer-slot-height) !important;
    min-height: var(--organizer-slot-height) !important;
    max-height: var(--organizer-slot-height) !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

.organizer-garage-card-placeholder {
    flex: 0 0 auto !important;

    width: auto;
    min-width: 0;
    max-width: none;

    margin: 0 !important;

    border: 1px dashed rgba(49, 132, 253, .65) !important;
    border-radius: 16px !important;
    background: rgba(13, 110, 253, .06) !important;
    box-shadow:
        inset 0 0 0 1px rgba(49, 132, 253, .16),
        0 0 18px rgba(13, 110, 253, .10) !important;

    box-sizing: border-box !important;
}

.organizer-garage-drag-helper {
    z-index: 999999 !important;
    opacity: .94 !important;
    pointer-events: none !important;

    background: rgba(17, 21, 29, .98) !important;
    border: 1px solid rgba(49, 132, 253, .55) !important;
    border-radius: 16px !important;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, .42),
        0 0 0 1px rgba(49, 132, 253, .16),
        0 0 26px rgba(13, 110, 253, .12) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

.organizer-garage-sort-source {
    opacity: .35 !important;
}

.organizer-unplaced-block {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 193, 7, .35);
    border-radius: 12px;
    background: rgba(255, 193, 7, .055);
}

.organizer-unplaced-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.organizer-unplaced-header span {
    color: #ffd66e;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.organizer-unplaced-header small {
    color: rgba(255, 255, 255, .58);
    font-size: 0.75rem;
}

.organizer-unplaced-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--organizer-slot-gap, 8px);
    align-items: flex-start;
}

.organizer-unplaced-tile .organizer-slot-card {
    border-color: rgba(255, 193, 7, .45) !important;
    background: rgba(255, 193, 7, .06) !important;
}

.organizer-unplaced-tile .organizer-slot-number::after {
    content: "!";
    margin-left: 4px;
    color: #ffd66e;
}

.owned-compact-search-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.owned-compact-duplicate-divider {
    grid-column: 1 / -1;
    padding: 3px 12px;
    margin-top: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
	gap: 0.5em;
}