/* PlatesMania overrides on top of Tabler. Keep this file small. */

/* System font stack: the site shows Latin, Cyrillic and CJK plates/comments, no external font needed */
:root {
	--tblr-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans CJK SC", sans-serif;
}
body {
	font-family: var(--tblr-font-sans-serif);
}

/* dark / light toggle: show only the icon of the mode you can switch to */
[data-bs-theme="dark"] .pm-icon-moon { display: none; }
[data-bs-theme="light"] .pm-icon-sun { display: none; }

.pm-logo { max-width: 100%; height: auto; }

/* owl carousel strip under the header: keep the 110x85 thumbnails from stretching */
#owl-demo .item img { max-width: 100%; height: auto; }

/*
 * Dark theme, only if the plate images or the logo look wrong on a dark background.
 * Uncomment and adjust after looking at real pages.
 */
/*
[data-bs-theme="dark"] .pm-logo { background: #fff; border-radius: .25rem; padding: .25rem; }
[data-bs-theme="dark"] .pm-plate img { background: #fff; border-radius: .25rem; }
*/

/* carousel strip: flag sits in the top-left corner of the thumbnail and takes no height */
#owl-demo .item { position: relative; }
#owl-demo .item .country-box { top: 0; left: 0; z-index: 2; }
#owl-demo .item .country-box img,
#owl-demo .item .country-box .sprite { box-shadow: 0 0 2px rgba(0,0,0,.5); }

/* vote heart: pointer + red on hover (before the vote); voted hearts get .color-red from the server */
.rating.fa-heart-o:hover { color: #e74c3c; }

/* ---- photo card ---- */
.pm-card { border-radius: 1rem; overflow: hidden; transition: box-shadow .15s; }
.pm-card:hover { box-shadow: 0 .75rem 1.75rem rgba(0,0,0,.18); }

/* country pill + moderator controls over the top of the photo */
.pm-photo-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: flex-start; gap: .5rem; padding: .65rem; pointer-events: none; }
.pm-photo-top > * { pointer-events: auto; }
.pm-country-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem .25rem .45rem; border-radius: 999px; background: rgba(15,23,42,.72); color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.4; backdrop-filter: blur(4px); text-decoration: none; }
.pm-country-pill:hover { color: #fff; background: rgba(15,23,42,.88); }
.pm-country-pill .sprite { flex: none; }

/* the plate image sits in the bottom-left corner of the photo */
.pm-plate-over { position: absolute; left: 50%; transform: translateX(-50%); bottom: .65rem; z-index: 2; line-height: 0; }
.pm-plate-over img { display: block; max-width: 160px; max-height: 55px; width: auto; height: auto; border-radius: .3rem; box-shadow: 0 2px 8px rgba(0,0,0,.45); }

.pm-car-title { font-size: 1.1rem; font-weight: 700; }
.pm-card .card-body { text-align: center; padding-top: .6rem; }
/* make/model and generation use the same link color as every other link */
.pm-card .card-body a { color: var(--tblr-link-color); }
.pm-card .card-body a:hover { color: var(--tblr-link-hover-color); }

/* bottom row: author + time on the left, votes / comments on the right */
.pm-card-bottom { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; background: var(--tblr-bg-surface-tertiary, rgba(128,128,128,.08)); border-top: 1px solid var(--tblr-border-color); }
.pm-card-author { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .875rem; }
.pm-card-author a:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* no line between the info block and the author row of a photo card is drawn by the body; the author row has its own tinted background and top border */

/* header: theme toggle, contacts, login, register (or the user's buttons) always on one line */
.pm-header-actions { flex-wrap: nowrap; white-space: nowrap; }
.pm-header-actions .btn { display: inline-flex; align-items: center; }
.pm-header-actions .badge { margin-left: .35rem; }
.navbar > .container-xl { flex-wrap: nowrap; }

/* main menu: larger, pill-style items with an icon */
.pm-nav-link {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: 1.05rem; font-weight: 600;
	padding: .65rem 1.15rem !important;
	border-radius: .6rem;
	margin-right: .5rem;
	background: var(--tblr-bg-surface-secondary);
	transition: background-color .15s, color .15s;
}
.pm-nav-link .fa { font-size: 1.25rem; color: var(--tblr-primary); }
.pm-nav-link:hover, .pm-nav-link.show { background: var(--tblr-primary-lt); color: var(--tblr-primary); }

/* dropdowns: roomier items, rounded, soft shadow, flag/icon aligned with the text */
.pm-dropdown {
	min-width: 17rem; padding: .5rem;
	border: 0; border-radius: .75rem;
	box-shadow: 0 .75rem 2rem rgba(0,0,0,.15);
}
.pm-dropdown .dropdown-item {
	display: flex; align-items: center; gap: .65rem;
	padding: .6rem .85rem; font-size: 1rem; border-radius: .5rem;
}
.pm-dropdown .dropdown-item:hover { background: var(--tblr-primary-lt); color: var(--tblr-primary); }
.pm-dropdown .dropdown-item .fa { width: 1.4rem; text-align: center; color: var(--tblr-secondary); }
.pm-dropdown .dropdown-item:hover .fa { color: var(--tblr-primary); }
.pm-dropdown .dropdown-item .sprite { flex: none; }

/* author row under the photo: icon, nick (profile) and arrow (all photos of the user) in one color and size, no gap between nick and arrow */
.pm-card-author { gap: .4rem; }
.pm-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pm-card-author .pm-user-name, .pm-card-author .pm-user-arrow { color: var(--tblr-link-color); }
.pm-card-author .pm-user-name { margin-right: -.3rem; }
.pm-card-author .pm-user-arrow .fa { font-size: inherit; line-height: inherit; vertical-align: baseline; }
.pm-card-author .pm-user-name:hover, .pm-card-author .pm-user-arrow:hover { color: var(--tblr-link-hover-color); }

/* pagination: rounded buttons, bigger targets, filled active page */
.pagination { gap: .4rem; flex-wrap: wrap; justify-content: center; }
.pagination .page-link {
	min-width: 2.6rem; height: 2.6rem; padding: 0 .75rem;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 1rem;
	border: 1px solid var(--tblr-border-color); border-radius: .7rem;
	background: var(--tblr-bg-surface); color: var(--tblr-body-color);
	transition: transform .12s, box-shadow .12s, background-color .12s, color .12s;
}
.pagination .page-link:hover { transform: translateY(-1px); background: var(--tblr-primary-lt); color: var(--tblr-primary); border-color: var(--tblr-primary); }
.pagination .page-item.active .page-link { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; box-shadow: 0 .35rem .9rem rgba(var(--tblr-primary-rgb), .45); }
.pagination .page-item.disabled .page-link { opacity: .45; background: transparent; box-shadow: none; transform: none; }
.pagination .page-link .fa { font-size: 1.35rem; line-height: 1; }

/* "what we are searching for" block: the criteria as chips */
.pm-search-info { border-left: 4px solid var(--tblr-primary); }
.pm-search-info ul { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.pm-search-info ul li { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .75rem; border-radius: 999px; background: var(--tblr-primary-lt); font-size: .8rem; }
.pm-search-info ul li .fa-check { color: var(--tblr-primary); }

/* right column: compact comments / popular blocks */
.pm-side .card-header { min-height: 0; padding: .55rem .9rem; }
.pm-side .card-title { font-size: 1rem; }
.pm-side .list-group-item { padding: .45rem .9rem; line-height: 1.3; font-size: .9rem; }
.pm-side .list-group-item .small { font-size: .78rem; }

/* last comments: highlight the row under the cursor */
.pm-side .list-group-item { position: relative; transition: background-color .12s, padding-left .12s; }
.pm-side .list-group-item:hover { background: var(--tblr-primary-lt); padding-left: 1.15rem; }
.pm-side .list-group-item:hover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tblr-primary); }

/* pagination: every button, including the first and the last, has the same corner radius */
.pagination .page-item .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link { border-radius: .7rem; margin: 0; }

/* link color of the original site (theme-colors/dark-blue.css: #4765a0), lighter in the dark theme for contrast */
:root, [data-bs-theme="light"] {
	--tblr-link-color: #4765a0;
	--tblr-link-color-rgb: 71, 101, 160;
	--tblr-link-hover-color: #34508a;
	--tblr-link-hover-color-rgb: 52, 80, 138;
}
[data-bs-theme="dark"] {
	--tblr-link-color: #8aa4d6;
	--tblr-link-color-rgb: 138, 164, 214;
	--tblr-link-hover-color: #b3c5e8;
	--tblr-link-hover-color-rgb: 179, 197, 232;
}

/* date: its own row at the bottom of the info block, pressed to the right, light grey with a clock icon */
.pm-card-date { margin-top: .9rem; text-align: right; font-size: .78rem; color: var(--tblr-gray-400, #b3b9c4); }
.pm-card-date .fa { margin-right: .25rem; }

/* brand blue borders: photo cards only */
:root, [data-bs-theme="light"] { --pm-brand-border: #4765a0; }
[data-bs-theme="dark"] { --pm-brand-border: #4d6cae; }
.pm-card { border: 1px solid var(--pm-brand-border); }
.pm-card-bottom { border-color: var(--tblr-border-color); }

/* header logo: vertically centred with the buttons (the inline image left a baseline gap that pushed it up), smaller on phones */
.navbar > .container-xl { align-items: center; }
.navbar-brand { display: flex; align-items: center; margin: 0; padding-top: 0; padding-bottom: 0; }
.pm-logo { display: block; width: auto; height: 46px; max-width: 100%; }
@media/* strip of latest photos: native horizontal scroller (replaces owl-carousel + jQuery) */
.pm-strip { position: relative; min-height: 92px; clear: both; }
#owl-demo { display: flex; gap: .6rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; padding: 0 .3rem .25rem; }
#owl-demo::-webkit-scrollbar { display: none; }
#owl-demo.is-dragging { cursor: grabbing; scroll-snap-type: none; }
#owl-demo.is-dragging a { pointer-events: none; }
#owl-demo .item { flex: 0 0 auto; width: 110px; scroll-snap-align: start; }
#owl-demo .item img { display: block; width: 110px; height: 85px; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.pm-strip-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: rgba(15,23,42,.65); color: #fff; font-size: 1.5rem; line-height: 1; display: none; align-items: center; justify-content: center; }
.pm-strip-btn:hover { background: rgba(15,23,42,.85); }
.pm-strip-prev { left: .5rem; } .pm-strip-next { right: .5rem; }
@media (hover: hover) and (pointer: fine) { .pm-strip-btn { display: inline-flex; } }

/* country root page */
.pm-country-flag { width: 40%; max-width: 200px; height: auto; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.pm-types .card-table a { color: var(--tblr-link-color); }
.pm-types .card-table a:hover { color: var(--tblr-link-hover-color); }
a.pm-card, a.pm-card:hover { color: var(--tblr-link-color); }

/* horizontal card carousel (country page: latest photos); the arrows reuse .pm-strip-btn */
.pm-strip-cards { min-height: 0; }
.pm-scroller { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; padding: .25rem .25rem .9rem; }
.pm-scroller::-webkit-scrollbar { display: none; }
.pm-scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.pm-scroller.is-dragging a { pointer-events: none; }
.pm-scroller img { user-select: none; -webkit-user-drag: none; }
.pm-slide { flex: 0 0 min(340px, 82%); scroll-snap-align: start; }
.pm-slide > .card { height: 100%; }

/* popular blocks: tight gaps between thumbnails */
.pm-side .card-body { padding: .5rem; }
.pm-side .card-body > .row { --tblr-gutter-x: .4rem; --tblr-gutter-y: .4rem; }

/* real flag of the selected country in the main menu */
.pm-nav-link .pm-nav-flag { width: 28px; height: 19px; object-fit: contain; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.45); }

/* regions of a country: table with flags */
.pm-flag-cell { width: 4.5rem; }
.pm-flag-cell img { display: block; width: 44px; height: 30px; object-fit: contain; border-radius: 3px; box-shadow: 0 0 3px rgba(0,0,0,.4); }
.pm-regions .card-table a { color: var(--tblr-link-color); }
.pm-regions .card-table a:hover { color: var(--tblr-link-hover-color); }

/* type page: the type_<code>.inc blocks are shared with the old page and still use its panel markup - show them as cards */
.panel > .table { margin: 0; }
.pm-legacy-blocks .table a { color: var(--tblr-link-color); }
.pm-legacy-blocks .table a:hover { color: var(--tblr-link-hover-color); }
.pm-users .card-table a:not(.btn) { color: var(--tblr-link-color); }
.pm-scroller-flush { padding: 0 0 .5rem; }

/* type page: the info card */
.pm-type-title { margin: 0 0 1rem; padding: .85rem 1rem; text-align: center; font-size: 1.15rem; font-weight: 700; border-radius: .6rem; background: var(--tblr-primary-lt); color: var(--tblr-primary); }
.pm-type-links { display: flex; flex-direction: column; gap: .5rem; }
.pm-type-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; border: 1px solid var(--tblr-border-color); border-radius: .6rem; color: var(--tblr-link-color); font-weight: 600; text-decoration: none; transition: background-color .12s, border-color .12s; }
.pm-type-row:hover { background: var(--tblr-primary-lt); border-color: var(--tblr-primary); color: var(--tblr-link-hover-color); }
.pm-type-row .fa:first-child { width: 1.25rem; text-align: center; color: var(--tblr-secondary); }
.pm-type-row-mine { background: var(--tblr-green-lt); border-color: var(--tblr-green); }
.pm-type-row-mine .fa:first-child { color: var(--tblr-green); }
.pm-type-row-mine:hover { background: var(--tblr-green-lt); border-color: var(--tblr-green); }

/* section titles of the type page: a banner with a gradient */
.pm-section-title { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; padding: .65rem 1.1rem; border-radius: .7rem; color: #fff; font-size: 1.2rem; font-weight: 700; }
.pm-section-title .fa { font-size: 1.35rem; }
.pm-section-best { background: linear-gradient(90deg, #4765a0, #6f94d6); }
.pm-section-comm { background: linear-gradient(90deg, #2f8f64, #5fc48f); }

/* region page: the info card uses the rows (.pm-type-row) of the type page */
.pm-info > .pm-type-row { margin-bottom: .5rem; }
.pm-section-series { background: linear-gradient(90deg, #b8651f, #e9a95c); }
.pm-tabs .row img { max-width: 100%; height: auto; }
.pm-legacy-blocks .panel.row { display: block; margin-left: 0; margin-right: 0; }
.pm-legacy-blocks .region-flag-column img { width: 44px !important; height: 30px !important; border-radius: 3px; }

/* gallery cards: a blank line between the generation and the additional info; a bigger gap between rows of cards on desktop only */
.pm-dop { margin-top: 1rem; color: var(--tblr-body-color); }
@media (min-width: 768px) { .row-cards { --tblr-gutter-y: 2rem; } }

/* photos are never stretched beyond their real size (the width/height attributes would force 460x350): the frame shrinks to the photo and is centred */
.pm-photo { width: fit-content; max-width: 100%; margin-inline: auto; }
.pm-photo > a > img { width: auto; max-width: 100%; height: auto; }

/* informer page */
.pm-informer-result .card-body { background: var(--tblr-bg-surface-secondary); }
.pm-informer-help img { cursor: pointer; }
.pm-informer-form .card-body { padding: 1.25rem; background: var(--tblr-bg-surface-secondary); }
.pm-informer-form .form-control { background-color: var(--tblr-bg-surface); border-color: var(--tblr-gray-400, #adb5bd); }
.pm-informer-form .btn-u { min-width: 8rem; font-weight: 600; }
.pm-informer-help .card-body { padding: 1rem 1.25rem; }
.pm-informer-help .row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .25rem; }
.pm-informer-help .row > * { flex: 0 0 auto; width: auto; max-width: 100%; padding: 0; margin: 0; }
.pm-informer-help .row { align-items: flex-start; }
.pm-informer-help img { display: block; width: 130px; height: 90px; max-width: 100%; object-fit: contain; border-radius: .3rem; transition: transform .12s, box-shadow .12s; }
.pm-informer-help img:hover { transform: translateY(-2px); box-shadow: 0 .4rem .9rem rgba(0,0,0,.2); }
/* the plate pictures the state scripts build (<td><radio><label><img></label></td>): compact cells */
.pm-informer-form #myTable { margin-top: .5rem; }
.pm-informer-form #myTable td { padding: .15rem .35rem; }

/* informer / add forms: controls with a short value (one or two characters) stay narrow; controls and the button have the same height */
.form-inline input.form-control[maxlength="1"], .form-inline input.form-control[maxlength="2"] { min-width: 3.5rem; }
.form-inline .form-control:not(textarea):not(.input-lg), .form-inline .btn { height: 2.5rem; }

/* ---- review of the finished pages (15.10) ---- */

/* header: the buttons (theme, contacts, login, user, messages, logout) about half the size */
.pm-header-actions { gap: .3rem !important; }
.pm-header-actions .btn { height: 1.7rem; min-height: 0; padding: 0 .55rem; font-size: .75rem; line-height: 1; }
.pm-header-actions .btn.btn-icon { width: 1.7rem; padding: 0; }
.pm-header-actions .btn .fa, .pm-header-actions .btn .fa-lg { font-size: .95rem; }
.pm-header-actions .badge { margin-left: .25rem; padding: .15rem .35rem; font-size: .62rem; }

/* phones: the logo is a row of its own, full width, and the buttons are in the row below */
@media (max-width: 767.98px) {
	.navbar > .container-xl { flex-wrap: wrap; row-gap: .5rem; }
	.navbar-brand { order: -1; flex: 0 0 100%; width: 100%; justify-content: center; margin: 0; }
	.pm-logo { height: 46px; width: auto; max-width: 100%; }
	.pm-header-actions { margin-left: auto; }
}

/* phones: the title of a page and its buttons (gallery / search / add) are separate rows */
@media (max-width: 767.98px) {
	.page-header .row > .col, .page-header .row > .col-auto { flex: 0 0 100%; width: 100%; max-width: 100%; margin-left: 0 !important; }
	.page-header .btn-list { flex-wrap: nowrap; }
}

/* comments in the sidebar: more air above and below the text */
.pm-side .list-group-item { padding-top: .85rem; padding-bottom: .85rem; line-height: 1.4; }

/* tabs card (format / background): space under the tabs, no doubled line at the bottom */
.pm-tabs .tab-content > .tab-pane { padding-top: .5rem; }
.pm-tabs .card-table tbody tr:last-child > td { border-bottom: 0; }
.pm-tabs .card-body { padding-top: 1rem; }

/* phones: the page buttons are pressed to the right edge */
@media (max-width: 767.98px) { .page-header .btn-list { justify-content: flex-end; } }

/* tabs card (US / CA / AU ...): the tab strip spans the card like the table below it, so their left edges match */
.pm-tabs > .card-header { padding: .5rem 0 0; }
.pm-tabs > .card-header .card-header-tabs { margin: 0; padding: 0 .75rem; }

/* background tab of the region card: 3 columns on phones, 6 on desktop (the markup of the country files says col-sm-4 col-md-3) */
.pm-tabs .tab-pane .row > * { flex: 0 0 auto; width: 33.3333%; }
@media (min-width: 768px) { .pm-tabs .tab-pane .row > * { width: 16.6667%; } }

/* carousel arrows: always positioned inside their own strip, centred on the photo part of the cards */
.pm-strip, .pm-strip-cards { position: relative !important; }
.pm-strip-cards > .pm-strip-btn { top: 40%; }

/* gallery: the card is as wide as its photo (460 px) so the photo touches both edges; narrower screens shrink both */
.row-cards > * > .pm-card { max-width: 460px; margin-inline: auto; }
.row-cards .pm-photo { width: 100%; }
.row-cards .pm-photo > a > img { width: 100%; }

/* search page: the tags picker (pm-search-tags.js), colours follow the theme */
	.pm-search-tags-native.is-enhanced { display:none !important; }
	.pm-search-tags-column > label > i { display:none; }
	.pm-search-tags-enhanced-label { display:block; }
	.pm-search-tags-title { display:block; margin-bottom:5px; font-weight:600; }
	.pm-search-tags-filter-wrap { position:relative; margin-bottom:5px; }
	.pm-search-tags-filter-wrap i { position:absolute; top:10px; left:10px; color:var(--tblr-secondary); }
	.pm-search-tags-filter { width:100%; height:34px; padding:6px 10px 6px 30px; border:1px solid var(--tblr-border-color); background:var(--tblr-bg-surface); }
	.pm-search-tags-selected, .pm-search-tags-available { border:1px solid var(--tblr-border-color); background:var(--tblr-bg-surface); }
	.pm-search-tags-selected { display:none; margin-bottom:5px; }
	.pm-search-tags-selected.is-visible { display:block; }
	.pm-search-tags-selected.is-scrollable { max-height:90px; overflow-y:auto; }
	.pm-search-tags-available { height:190px; overflow-y:scroll!important; }
	.pm-search-tag-option { display:flex; align-items:center; justify-content:flex-start; gap:5px; width:100%; border:0; text-align:left; }
	.pm-search-tag-category { height:22px; padding:2px 4px; overflow:hidden; border-bottom:1px solid var(--tblr-border-color); background:var(--tblr-bg-surface); color:var(--tblr-secondary); font-size:12px; font-weight:700; line-height:18px; text-align:center; }
	.pm-search-tag-option { height:22px; padding:2px 4px; overflow:hidden; border-bottom:1px solid var(--tblr-border-color); background:var(--tblr-bg-surface); font-size:12px; line-height:18px; transition:opacity .14s ease, transform .14s ease; }
	.pm-search-tag-option.is-active { background:var(--tblr-bg-surface-secondary); }
	.pm-search-tag-option:not(.is-selected):hover, .pm-search-tag-option:not(.is-selected):focus { background:var(--tblr-green-lt); }
	.pm-search-tag-option.is-selected:hover, .pm-search-tag-option.is-selected:focus { background:var(--tblr-bg-surface-secondary); }
	.pm-search-tag-option.is-selected.is-active:hover, .pm-search-tag-option.is-selected.is-active:focus { background:var(--tblr-red-lt); }
	.pm-search-tag-option.is-selected { -webkit-user-select:none; user-select:none; }
	.pm-search-tag-option.is-selected-copy { color:var(--tblr-secondary); }
	.pm-search-tag-option.is-selected-copy:hover, .pm-search-tag-option.is-selected-copy:focus { background:var(--tblr-red-lt); }
	.pm-search-tag-option span { flex:1 1 auto; overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
	.pm-search-tag-action { display:inline-flex; flex:0 0 18px; align-items:center; justify-content:center; width:18px; height:18px; padding:0; overflow:hidden; border-radius:2px; background:#5cb85c; color:var(--tblr-bg-surface); font-size:14px; font-style:normal; font-weight:700; line-height:18px; transition:width .15s ease, flex-basis .15s ease, margin .15s ease, opacity .15s ease; }
	.pm-search-tag-option.is-selected .pm-search-tag-action { flex-basis:0; width:0; margin-right:-5px; opacity:0; background:#d9534f; }
	.pm-search-tag-option.is-selected.is-active .pm-search-tag-action { flex-basis:18px; width:18px; margin-right:0; opacity:1; }
	.pm-search-tag-option.is-selected-copy .pm-search-tag-action { flex-basis:18px; width:18px; margin-right:0; opacity:1; }
	.pm-search-tag-option.is-disappearing { opacity:0; transform:translateX(8px); pointer-events:none; }
	.pm-search-tag-option.is-appearing { opacity:0; transform:translateY(-5px); }
	.pm-search-tag-picker.is-negative .pm-search-tag-option span { text-decoration:line-through; }

/* ---- Sky Forms (Unify) markup of the search forms: inc_boot/search_<code>.inc, carslist_search.inc and the page itself ---- */
.pm-sky .sky-form { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.pm-sky .sky-form > header { display: block; margin: 0 0 1rem; padding: 0; border: 0; background: none; font-size: 1.05rem; font-weight: 600; }
.pm-sky .sky-form > header .note { display: block; margin-top: .25rem; font-size: .8rem; font-weight: 400; color: var(--tblr-secondary); }
.pm-sky .sky-form > fieldset { margin: 0; padding: 0; border: 0; background: none; }
.pm-sky .sky-form > footer { margin-top: 1rem; padding: 0; border: 0; background: none; }
.pm-sky .sky-form section { margin-bottom: .6rem; }
.pm-sky .sky-form .row { --tblr-gutter-x: 1rem; --tblr-gutter-y: 0; }
.pm-sky .sky-form label.input, .pm-sky .sky-form label.select { position: relative; display: block; margin: 0; font-weight: 400; }
.pm-sky .sky-form label.label { display: block; margin-bottom: .35rem; font-weight: 600; }
.pm-sky .sky-form label.select > i { display: none; }
.pm-sky .sky-form .icon-append { position: absolute; top: .7rem; right: .8rem; z-index: 2; color: var(--tblr-secondary); pointer-events: none; }
.pm-sky .sky-form label.input > input { padding-right: 2.2rem; }
.pm-sky .sky-form b.tooltip { position: static; display: block; opacity: 1; margin-top: .2rem; padding: 0; background: none; font-size: .75rem; font-weight: 400; color: var(--tblr-secondary); transform: none; }
.pm-sky .sky-form label.radio, .pm-sky .sky-form label.checkbox { display: inline-flex; align-items: center; gap: .4rem; margin: 0 1rem .25rem 0; font-weight: 400; }
.pm-sky .sky-form label.radio > i, .pm-sky .sky-form label.checkbox > i { display: none; }
.pm-sky .sky-form .inline-group { display: flex; flex-wrap: wrap; }
.pm-sky .sky-form select[multiple] { min-height: 7rem; }

/* search form: the quick make / model field with its reset "X" on one line, standard gap below it */
.pm-sky .ui-widget { display: flex; align-items: center; gap: .5rem; }
.pm-sky .ui-widget > input { flex: 1 1 auto; width: auto; min-width: 0; }
.pm-sky .ui-widget > span { flex: 0 0 auto; padding: .4rem .75rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface); line-height: 1.4; }
.pm-sky .ui-widget > span:hover { background: var(--tblr-bg-surface-secondary); }
.pm-sky .sky-form footer .btn, .pm-sky .sky-form section .btn-u { min-width: 6.5rem; }
/* the old include keeps a 47px spacer under the make / model selects for the catalog link; here the link just takes its own line */
.pm-sky .sky-form div[style*="height: 47px"] { height: auto !important; flex: 0 0 100%; padding: 0 1rem; }
.pm-sky .sky-form #formodel { position: static !important; font-size: .8rem; }
/* search form: the same 1rem gutter in the outer rows, a gap under the link button, a gap between stacked fields */
.pm-sky .row { --tblr-gutter-x: 1rem; --tblr-gutter-y: 0; }
.pm-sky .btn-block { margin-bottom: .75rem; }
.pm-sky .sky-form label.input + label.input { margin-top: .6rem; }

/* add form: the file field with the editor button on one line under its label, Upload and Rules in one row */
.pm-sky section:has(> #filename) { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pm-sky section:has(> #filename) > label { flex: 0 0 100%; margin: 0; }
.pm-sky section:has(> #filename) > br { display: none; }
.pm-sky section:has(> #filename) > #filename { flex: 1 1 14rem; width: auto; min-width: 0; }
.pm-sky .pm-photo-editor-open-wrap { margin: 0 !important; display: flex; gap: .5rem; flex: 0 0 auto; }
.pm-sky .row > section.col-xs-6 { flex: 1 1 0; width: auto; }
.pm-sky section > .pull-right { margin-left: auto; float: none; }
.pm-sky a.btn[href="/rules"] { background: #b86a6a; border-color: #b86a6a; color: #fff; }
.pm-sky a.btn[href="/rules"]:hover { background: #a85a5a; border-color: #a85a5a; color: #fff; }
[data-bs-theme="dark"] .pm-sky a.btn[href="/rules"] { background: #9c5555; border-color: #9c5555; }
.pm-sky section > label[for="markamodtype"] { display: block; margin-bottom: .35rem; font-weight: 600; }
/* add form: make, model and generation share a row (three columns), the quick field has a small gap above it */
.pm-sky .pm-vehicle-fields-row > .pm-vehicle-column { flex: 1 1 0; width: auto; min-width: 0; }
.pm-sky .pm-vehicle-fields-row select { width: 100%; }
.pm-sky section:has(> .ui-widget) { margin-top: .5rem; }
@media (max-width: 767.98px) { .pm-sky .pm-vehicle-fields-row > .pm-vehicle-column { flex: 1 1 100%; } }
/* add form: the make / model / generation row lines up with the fields above and below (no gutter inset), 0.75rem between the selects */
.pm-sky .pm-vehicle-fields-row { margin-left: 0; margin-right: 0; gap: .75rem; }
.pm-sky .pm-vehicle-fields-row > .pm-vehicle-column { padding-left: 0; padding-right: 0; }
/* add form: the "extra information" field takes the full width under its label and keeps its distance from the tags below */
.pm-sky .form-inline section:has(> textarea) { display: block; margin-bottom: 1rem; }
.pm-sky .form-inline section:has(> textarea) > label { display: block; font-weight: 600; margin-bottom: .35rem; }
.pm-sky .form-inline section:has(> textarea) > br { display: none; }
.pm-sky .form-inline section > textarea.form-control { display: block; width: 100%; min-height: 5.5rem; resize: vertical; }
/* add form: a gap between the checkboxes and the Upload / Rules row */
.pm-sky .row:has(> section > button[type="submit"]) { margin-top: 1.25rem; }
/* add page: the photo preview and the plate preview take the width of the right column */
#zoomimg { width: 100%; height: auto; }
#informer-preview-result img { max-width: 100%; height: auto; }
/* statistics page: the stat_<code>.inc blocks keep the old blue panels - show them as cards, the header is the same as the one of the types card (inc_tabler/listtypes.inc); sortable table headers */
.pm-stat-table .panel-blue > .panel-heading { background: var(--tblr-primary-lt); color: var(--tblr-body-color); padding: .55rem .9rem; border-bottom: var(--tblr-border-width) solid var(--tblr-border-color); }
.pm-stat-table .panel-blue > .panel-heading a { color: inherit; }
.pm-stat-table .panel-blue > .panel-heading .panel-title { font-size: 1rem; font-weight: 600; }
.pm-stat-table .panel-blue > .panel-heading .panel-title .fa { color: var(--tblr-blue); margin-right: .5rem; }
.pm-stat-table .panel-body { display: flex; flex-wrap: wrap; align-items: center; }
.pm-stat-table .panel-body > .row { width: 100%; margin: 0; }
.pm-stat-table .panel-body h3, .pm-stat-table .panel-body h4 { margin: .4rem 0; font-size: 1rem; font-weight: 600; }
.pm-stat-table .panel > .table, .pm-stat-table .panel > .table-responsive { margin: 0; }
th.pm-sortable { cursor: pointer; user-select: none; }
th.pm-sortable:hover { color: var(--tblr-primary); }
th.pm-sort-asc::after { content: " \25B2"; font-size: .7em; }
th.pm-sort-desc::after { content: " \25BC"; font-size: .7em; }

/* best photos page: the car make / model is the headline of a card */
.pm-bestfoto-car { margin: 0 0 .6rem; font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.pm-bestfoto-car-main { font-size: 1.7rem; }
.pm-bestfoto-car { margin-bottom: 1.1rem; }
/* the line with the author and the votes: more room above, bigger heart and number */
.pm-bestfoto-meta { margin-top: 1rem; }
.pm-bestfoto-meta .fa-heart { font-size: 1.35em; vertical-align: -.1em; }
.pm-bestfoto-meta .ms-auto { font-size: 1.15rem; font-weight: 600; }

/* add page: the country form files wrap themselves in a Bootstrap 3 panel - inside the card of the page it must not be a second card */
.pm-sky > .card-body > .panel { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.pm-sky > .card-body > .panel > .panel-body { padding: 0; }

/* the list of the countries (4_countries.php): the links of a letter as a wrapping row with a flag */
.pm-country-list { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-content: flex-start; }
.pm-country-link { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .65rem; border-radius: .5rem; font-size: 1rem; color: var(--tblr-link-color); text-decoration: none; background: var(--tblr-bg-surface-secondary); transition: background-color .12s, color .12s; }
.pm-country-link:hover { background: var(--tblr-primary-lt); color: var(--tblr-link-hover-color); }
.pm-country-link img { width: 24px; height: 16px; object-fit: contain; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.35); }

/* changelog (4_changelog.php): a vertical timeline, every entry is a card with a dot on the line */
.pm-timeline { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--tblr-border-color); }
.pm-timeline > li { position: relative; margin-bottom: 1rem; }
.pm-timeline > li::before { content: ""; position: absolute; left: calc(-1.5rem - 7px); top: 1.15rem; width: 12px; height: 12px; border-radius: 50%; background: var(--tblr-primary); box-shadow: 0 0 0 4px var(--tblr-bg-surface); }
.pm-timeline-head { margin-bottom: .5rem; }
.pm-timeline-text a { color: var(--tblr-link-color); }
.pm-timeline-text img { max-width: 100%; height: auto; }
.pm-timeline-empty { color: var(--tblr-secondary); }
.pm-timeline-empty::before { display: none; }
.pm-timeline-flag { width: 24px; height: 16px; margin-right: .15rem; object-fit: contain; vertical-align: -3px; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.35); }
/* changelog: the news about the opening of a section of a country is marked with a green dot and a light green card */
.pm-timeline-new::before { background: var(--tblr-green) !important; }
.pm-timeline-new .card { border-color: var(--tblr-green); background: var(--tblr-green-lt); }

/* XX regions picker (inc_boot/xx_region_picker.inc) on the Tabler pages: a dropdown with flags */
.pm-xx-picker { display: inline-block; min-width: 260px; max-width: 100%; }
.pm-xx-picker > .form-select { width: 100%; }
.pm-xx-menu { max-height: 320px; overflow-y: auto; min-width: 100%; }
.pm-xx-menu .dropdown-item { display: flex; align-items: center; white-space: normal; }
.pm-xx-menu .xx-region-flag, .pm-xx-picker .xx-region-flag { width: 20px; height: 14px; object-fit: contain; margin-right: .5rem; flex: 0 0 auto; }
.pm-xx-picker > .form-select .xx-region-flag { vertical-align: -2px; }

/* add page, phones: the (still hidden) generation select does not keep an empty gap between the model and the quick make / model field */
@media (max-width: 767.98px) {
	.pm-sky .pm-vehicle-column:has(> #modgen[style*="hidden"]) { display: none; }
	.pm-sky .pm-vehicle-fields-row { row-gap: .5rem; margin-bottom: .5rem !important; }
}

/* text pages (4_about.php): the text comes from the language files as HTML - readable lines, blue links, lists */
.pm-prose { font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.pm-prose p { margin-bottom: .7rem; }
.pm-prose a { color: var(--tblr-link-color); }
.pm-prose ul, .pm-prose ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.pm-prose img { max-width: 100%; height: auto; }

/* special days: the switch of the reminders is big and easy to see */
.pm-reminder { border-left: 4px solid var(--tblr-primary); }
.pm-reminder .form-check.form-switch { display: flex; align-items: center; gap: .9rem; padding-left: 0; margin: 0; }
.pm-reminder .form-check-input { float: none; margin: 0; width: 3.4rem; height: 1.8rem; cursor: pointer; flex: 0 0 auto; }
.pm-reminder .form-check-label { font-size: 1.15rem; font-weight: 600; cursor: pointer; }

/* the comments page (4_comment.php): the flag in the header of a card and the bubble with the text of the comment */
.pm-comment-flag { width: 28px; height: 19px; margin-left: auto; object-fit: contain; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.4); }
.pm-comment-bubble { position: relative; padding: .75rem 1rem; border-radius: .75rem; background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); text-align: left; }
.pm-comment-bubble p { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.pm-comment-author { font-size: .85rem; text-align: right; color: var(--tblr-secondary); }
.pm-comment-author a { color: var(--tblr-link-color); font-weight: 600; }
.pm-card .card-footer .list-inline li { margin: 0; }
/* the comments page: a compact header of the card, the make / model is the big title of the card */
.pm-comment-card .card-header { min-height: 0; padding: .55rem .9rem; }
.pm-comment-card .card-title { font-size: 1rem; }
.pm-comment-card .card-title a { color: var(--tblr-link-color); }
.pm-comment-car { font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.pm-comment-car a { color: var(--tblr-link-color); }
/* the comment bubble is green */
.pm-comment-bubble { background: var(--tblr-green-lt); border-color: var(--tblr-green); border-left-width: 4px; }
.pm-comment-author a { color: var(--tblr-green); }

/* the statistics of the uploads (4_uploadstat.php): the lists of the countries with the number added */
.pm-upload-flag { display: inline-block; width: 24px; height: 16px; flex: 0 0 auto; object-fit: contain; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.35); }
.pm-upload-list .list-group-item { padding: .4rem .9rem; }
/* more than 1000 added: a bright badge and a light orange row */
.pm-upload-hot { background: linear-gradient(135deg, #f76707, #e8590c); color: #fff; font-weight: 700; box-shadow: 0 0 0 3px rgba(247, 103, 7, .25); }
.pm-upload-hot-row { background: rgba(247, 103, 7, .08); border-left: 3px solid #f76707; }
/* the calendar day page: a bigger make / model, the "several such cars" icon is quiet grey */
.pm-cal-car { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.pm-cal-car a { color: var(--tblr-link-color); }
.pm-cal-double, .pm-cal-double .fa { color: var(--tblr-gray-400, #adb5bd); opacity: .8; }
.pm-cal-count a { color: var(--tblr-link-color); }
.pm-cal-count a:hover { color: var(--tblr-link-hover-color); }

/* the tags page (4_tags.php): plain text links, the number of the photos of a tag is shown by the size of the text (levels 1-7, relative: the top tags
   are level 7); the number itself is the tooltip */
.pm-tags-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem; line-height: 1.2; }
.pm-tag { text-decoration: none; color: var(--tblr-link-color); transition: color .1s; }
.pm-tag:hover { text-decoration: underline; color: var(--tblr-link-hover-color); }
.pm-tag-0 { font-size: .85rem; }
.pm-tag-1 { font-size: .95rem; }
.pm-tag-2 { font-size: 1.1rem; }
.pm-tag-3 { font-size: 1.3rem; }
.pm-tag-4 { font-size: 1.55rem; font-weight: 600; }
.pm-tag-5 { font-size: 1.85rem; font-weight: 600; }
.pm-tag-6 { font-size: 2.2rem; font-weight: 700; }
.pm-tag-7 { font-size: 2.7rem; font-weight: 700; }

/* the catalog of the car makes (4_avto2.php): a collapsible card per letter, the makes as a wrapping list of links, the ones with more than 2000 photos are bold */
.pm-avto-toggle { text-decoration: none; cursor: pointer; padding: .55rem .9rem; min-height: 0; }
.pm-avto-toggle .card-title { color: var(--tblr-body-color); font-size: 1.1rem; }
.pm-avto-toggle:hover { background: var(--tblr-primary-lt); }
.pm-avto-toggle.collapsed .pm-avto-caret { transform: rotate(-90deg); }
.pm-avto-caret { transition: transform .15s; }
.pm-avto-makes { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.pm-avto-makes a { color: var(--tblr-link-color); text-decoration: none; }
.pm-avto-makes a:hover { text-decoration: underline; }
.pm-avto-makes a.pm-avto-big { font-weight: 700; }

/* the page of a car make (4_avto3.php): the models as chips, a card per model with its best photos */
.pm-avto-models { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.pm-model-chip { padding: .15rem .7rem; border: 1px solid var(--tblr-border-color); border-radius: 2rem; font-size: .9rem; background: var(--tblr-bg-surface-secondary); color: var(--tblr-link-color); text-decoration: none; }
.pm-model-chip:hover { background: var(--tblr-primary-lt); text-decoration: none; }
.pm-avto-model .card-header { min-height: 0; padding: .55rem .9rem; }
.pm-avto-model .card-title { font-size: 1.1rem; }
.pm-avto-model .card-title a { color: var(--tblr-link-color); }
.pm-avto-thumbs { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem .9rem; }
.pm-avto-thumbs:empty { display: none; }
.pm-avto-thumbs img { display: block; }

/* all the tables of the users: compact rows and small buttons */
.pm-users .card-table > tbody > tr > td, .pm-users .card-table > thead > tr > th { padding-top: .35rem; padding-bottom: .35rem; }
.pm-users .card-table .btn-sm { padding: .1rem .55rem; font-size: .8rem; line-height: 1.4; }

/* the pages of the catalog: the header of a card is compact; the pencil of an editor is a quiet grey square (not a bright button) */
.pm-compact .card-header { min-height: 0; padding: .55rem .9rem; }
.pm-compact .card-title { font-size: 1rem; }
.page-title a { color: var(--tblr-link-color); }
a.catalog-admin-edit { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 22px; height: 22px; padding: 0; line-height: 1; vertical-align: middle; border: 1px solid var(--tblr-border-color); border-radius: .3rem; background: transparent; color: var(--tblr-secondary); font-size: .75rem; text-decoration: none; }
a.catalog-admin-edit:hover { background: var(--tblr-primary-lt); border-color: var(--tblr-primary); color: var(--tblr-primary); }
a.catalog-admin-edit i { margin: 0; color: inherit; }

/* a link in a heading is a link of the colour of the links on every Tabler page (Tabler makes it inherit the colour of the heading) */
.page-body :is(h1, h2, h3, h4, h5, h6) > a:not(.btn):not(.pm-tag) { color: var(--tblr-link-color); }
.page-body :is(h1, h2, h3, h4, h5, h6) > a:not(.btn):not(.pm-tag):hover { color: var(--tblr-link-hover-color); }

/* the separator between the groups of the generations on the model page */
.pm-avto-sep { height: 0; width: 80%; margin: 2.5rem auto; border: 0; border-top: 3px solid var(--tblr-primary); opacity: .6; }

/* the header of the block with the latest photos of the model */
.pm-avto-latest > .card-header { background: var(--tblr-primary-lt); border-bottom: 2px solid var(--tblr-primary); }
.pm-avto-latest .card-title { font-weight: 600; }

/* the company page (4_company.php): the headers of the cards are tinted and underlined, as the latest photos block of the model page */
.pm-company .card > .card-header { background: var(--tblr-primary-lt); border-bottom: 2px solid var(--tblr-primary); }
.pm-company .card-title { font-weight: 600; }

.pm-foto-page h1 a, .pm-foto-page h1 a small { color: var(--tblr-link-color); }
.pm-foto-page .pm-logo { margin: 0 auto; }

/* the rules page (4_rules.php): a card per section, a row per point with its number, the sub-points (x.y.z) are indented */
.pm-rule { display: flex; gap: .75rem; padding: .4rem 0; }
.pm-rule + .pm-rule { border-top: 1px solid var(--tblr-border-color-translucent, var(--tblr-border-color)); }
.pm-rule-n { flex: 0 0 3.5rem; color: var(--tblr-secondary); font-weight: 600; text-align: right; white-space: nowrap; }
.pm-rule-t { flex: 1 1 auto; min-width: 0; }
.pm-rule-sub { padding-left: 2.5rem; }
.pm-rule-sub .pm-rule-n { flex-basis: 4rem; font-weight: 400; }
.pm-rules .card-title { font-size: 1.1rem; font-weight: 600; }
@media (max-width: 575.98px) { .pm-rule-sub { padding-left: 1rem; } .pm-rule-n { flex-basis: 2.8rem; } }

/* a small flag in the footers of the cards (4_userbestphoto.php) */
.pm-flag-sm { width: 24px; height: 16px; object-fit: contain; margin-right: .4rem; vertical-align: -.2em; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.45); }

/* the awards of a user (4_userawards.php): the cups and the cars in the colours of the places, the big ones (1st place) are not larger than 2x */
.pm-aw-yellow { color: #f1c40f; }
.pm-aw-orange { color: #e67e22; }
.pm-aw-red { color: #e74c3c; }
.pm-awards .fa-3x, .pm-awards .fa-4x { font-size: 2em; }
.pm-awards td:first-child { width: 3.5rem; font-weight: 600; }
.pm-awards td:nth-child(2) { width: 4rem; text-align: center; }
.pm-awards > .card-header { background: var(--tblr-primary-lt); border-bottom: 2px solid var(--tblr-primary); }
.pm-awards .card-title { font-weight: 600; }

/* the page of a user in a country (4_usercountry.php): the likes / comments as big numbers */
.pm-uc-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pm-uc-stat { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.35rem; font-weight: 600; color: var(--tblr-body-color); text-decoration: none; }
a.pm-uc-stat { color: var(--tblr-link-color); }
.pm-uc-stat .fa { font-size: 1.15em; }
/* the block with the totals is set off from the table of the types; the names of the types are not wrapped */
.pm-uc-top { background: var(--tblr-primary-lt); border-top: 1px solid var(--tblr-border-color); border-bottom: 2px solid var(--tblr-primary); padding-top: 1rem; padding-bottom: 1rem; }
.pm-uc-types td:first-child { white-space: nowrap; width: 45%; }
.pm-uc-types td:nth-child(2) { width: 18%; white-space: nowrap; }
.pm-uc-types td:nth-child(3) { width: 18%; white-space: nowrap; }
.pm-uc-types td:nth-child(4) { white-space: nowrap; }
@media (max-width: 575.98px) { .pm-uc-types td:first-child { white-space: normal; width: auto; } }
/* the footer of the photo cards in the strips of the page of a user in a country: bigger icons and numbers */
.pm-foot-big { font-size: 1.15rem; font-weight: 600; }
.pm-foot-big .fa { font-size: 1.3em; vertical-align: -.1em; }
/* the header of the card of the types is tinted as the header of the regions panel */
.pm-stat-table .pm-types > .card-header { background: var(--tblr-primary-lt); }

/* uploadstat: the selects (the country has a long name) never go out of the screen; on a phone every select takes the full width */
.pm-uploadstat-form .form-select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
	.pm-uploadstat-form .form-select { width: 100% !important; flex: 1 1 100%; }
	.pm-uploadstat-form .btn { flex: 1 1 100%; }
}
/* the full-size photo page (4_foto.php): the photo takes the whole width of the page; a click shows it in the real size inside a scrolling box */
.pm-foto-wrap { position: relative; }
.pm-foto-view { overflow: auto; line-height: 0; }
.pm-foto-view img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.pm-foto-view.pm-zoomed { height: 100vh; cursor: grab; }
.pm-foto-view.pm-zoomed img { width: auto; max-width: none; cursor: zoom-out; }
.pm-foto-hint { position: absolute; top: .75rem; right: 1.25rem; z-index: 2; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 1.1rem; pointer-events: none; }