/* Pieces of the old Unify theme (bootstrap/assets/css/custom.css + app.css) that the Tabler pages still need:
 * flag sprites, the carousel country flag, the vote heart. Nothing else from the old theme is loaded. */

.country-box {width:22px;height:15px;position:absolute;}
.country-box img {display:block;width:22px;height:15px;border:1px solid #000;}

 .rating{
     cursor:pointer;  
 }

.rating:hover .fa-heart:before{    
     color:red;  
 }

.color-red { color: #e74c3c; }

.sprite {
    background-image: url(/pic/spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-ae {
    width: 22px;
    height: 15px;
    background-position: -1px -1px;
}

.sprite-am {
    width: 22px;
    height: 15px;
    background-position: -25px -1px;
}

.sprite-at {
    width: 22px;
    height: 15px;
    background-position: -49px -1px;
}

.sprite-az {
    width: 22px;
    height: 15px;
    background-position: -73px -1px;
}

.sprite-be {
    width: 22px;
    height: 15px;
    background-position: -97px -1px;
}

.sprite-bg {
    width: 22px;
    height: 15px;
    background-position: -1px -18px;
}

.sprite-by {
    width: 22px;
    height: 15px;
    background-position: -25px -18px;
}

.sprite-ch {
    width: 15px;
    height: 15px;
    background-position: -121px -1px;
}

.sprite-cn {
    width: 22px;
    height: 15px;
    background-position: -49px -18px;
}

.sprite-cz {
    width: 22px;
    height: 15px;
    background-position: -73px -18px;
}

.sprite-de {
    width: 22px;
    height: 15px;
    background-position: -97px -18px;
}

.sprite-dk {
    width: 22px;
    height: 15px;
    background-position: -1px -35px;
}

.sprite-ee {
    width: 22px;
    height: 15px;
    background-position: -25px -35px;
}

.sprite-es {
    width: 22px;
    height: 15px;
    background-position: -49px -35px;
}

.sprite-fi {
    width: 22px;
    height: 15px;
    background-position: -73px -35px;
}

.sprite-fr {
    width: 22px;
    height: 15px;
    background-position: -97px -35px;
}

.sprite-ge {
    width: 22px;
    height: 15px;
    background-position: -1px -52px;
}

.sprite-gr {
    width: 22px;
    height: 15px;
    background-position: -25px -52px;
}

.sprite-hr {
    width: 22px;
    height: 15px;
    background-position: -49px -52px;
}

.sprite-hu {
    width: 22px;
    height: 15px;
    background-position: -73px -52px;
}

.sprite-il {
    width: 22px;
    height: 15px;
    background-position: -97px -52px;
}

.sprite-it {
    width: 22px;
    height: 15px;
    background-position: -1px -69px;
}

.sprite-kg {
    width: 22px;
    height: 15px;
    background-position: -25px -69px;
}

.sprite-kz {
    width: 22px;
    height: 15px;
    background-position: -49px -69px;
}

.sprite-lt {
    width: 22px;
    height: 15px;
    background-position: -73px -69px;
}

.sprite-lu {
    width: 22px;
    height: 15px;
    background-position: -97px -69px;
}

.sprite-lv {
    width: 22px;
    height: 15px;
    background-position: -1px -86px;
}

.sprite-mc {
    width: 22px;
    height: 15px;
    background-position: -25px -86px;
}

.sprite-md {
    width: 22px;
    height: 15px;
    background-position: -49px -86px;
}

.sprite-me {
    width: 22px;
    height: 15px;
    background-position: -73px -86px;
}

.sprite-nl {
    width: 22px;
    height: 15px;
    background-position: -97px -86px;
}

.sprite-no {
    width: 23px;
    height: 15px;
    background-position: -1px -103px;
}

.sprite-pl {
    width: 22px;
    height: 15px;
    background-position: -26px -103px;
}

.sprite-pt {
    width: 22px;
    height: 15px;
    background-position: -50px -103px;
}

.sprite-ro {
    width: 22px;
    height: 15px;
    background-position: -74px -103px;
}

.sprite-rs {
    width: 22px;
    height: 15px;
    background-position: -98px -103px;
}

.sprite-ru {
    width: 22px;
    height: 15px;
    background-position: -1px -120px;
}

.sprite-se {
    width: 22px;
    height: 15px;
    background-position: -25px -120px;
}

.sprite-si {
    width: 22px;
    height: 15px;
    background-position: -49px -120px;
}

.sprite-sk {
    width: 22px;
    height: 15px;
    background-position: -73px -120px;
}

.sprite-su {
    width: 22px;
    height: 15px;
    background-position: -97px -120px;
}

.sprite-th {
    width: 22px;
    height: 15px;
    background-position: -138px -1px;
}

.sprite-tr {
    width: 22px;
    height: 15px;
    background-position: -121px -18px;
}

.sprite-ua {
    width: 22px;
    height: 15px;
    background-position: -121px -35px;
}

.sprite-uk {
    width: 22px;
    height: 15px;
    background-position: -121px -52px;
}

.sprite-us {
    width: 22px;
    height: 15px;
    background-position: -121px -69px;
}

.sprite-uz {
    width: 22px;
    height: 15px;
    background-position: -121px -86px;
}

.sprite-xx {
    width: 22px;
    height: 15px;
    background-position: -122px -103px;
}

.sprite-ca {
    width: 22px;
    height: 15px;
    background-position: -122px -120px;
}

.sprite-vn {
    width: 22px;
    height: 15px;
    background-position: -145px -18px;
}

.sprite-mn {
    width: 22px;
    height: 15px;
    background-position: -145px -35px;
}

.sprite-cy {
    width: 22px;
    height: 15px;
    background-position: -145px -52px;
}

.sprite-jp {
    width: 22px;
    height: 15px;
    background-position: -145px -69px;
}

.sprite-eg {
    width: 22px;
    height: 15px;
    background-position: -145px -86px;
}

.sprite-hk {
    width: 22px;
    height: 15px;
    background-position: -145px -103px;
}

.sprite-ba {
    width: 22px;
    height: 15px;
    background-position: -145px -120px;
}

.sprite-ie {
    width: 22px;
    height: 15px;
    background-position: -169px -18px;
}

.sprite-al {
    width: 21px;
    height: 15px;
    background-position: -169px -1px;
}

.sprite-mk {
    width: 22px;
    height: 15px;
    background-position: -169px -35px;
}

.sprite-kr {
    width: 22px;
    height: 15px;
    background-position: -169px -52px;
}

.sprite-ma {
    width: 22px;
    height: 15px;
    background-position: -169px -69px;
}

.sprite-mx {
    width: 22px;
    height: 15px;
    background-position: -169px -86px;
}

.sprite-tj {
    width: 22px;
    height: 15px;
    background-position: -169px -103px;
}

.sprite-nz {
    width: 22px;
    height: 15px;
    background-position: -169px -120px;
}

.sprite-ps {
    width: 22px;
    height: 15px;
    background-position: -193px -1px;
}

.sprite-li {
    width: 22px;
    height: 15px;
    background-position: -193px -18px;
}

.sprite-ad {
    width: 22px;
    height: 15px;
    background-position: -193px -35px;
}

.sprite-sg {
    width: 22px;
    height: 15px;
    background-position: -193px -52px;
}

.sprite-br {
    width: 22px;
    height: 15px;
    background-position: -193px -69px;
}

.sprite-sm {
    width: 22px;
    height: 15px;
    background-position: -193px -86px;
}

.sprite-id {
    width: 22px;
    height: 15px;
    background-position: -193px -103px;
}

.sprite-mt {
    width: 22px;
    height: 15px;
    background-position: -193px -120px;
}

.sprite-my {
    width: 22px;
    height: 15px;
    background-position: -217px -1px;
}

.sprite-sa {
    width: 22px;
    height: 15px;
    background-position: -217px -18px;
}

.sprite-iq {
    width: 22px;
    height: 15px;
    background-position: -217px -35px;
}

.sprite-kh {
    width: 22px;
    height: 15px;
    background-position: -217px -52px;
}

.sprite-gg {
    width: 22px;
    height: 15px;
    background-position: -217px -69px;
}

.sprite-qa {
    width: 38px;
    height: 15px;
    background-position: -217px -86px;
}

.sprite-is {
    width: 22px;
    height: 15px;
    background-position: -217px -103px;
}

.sprite-ke {
    width: 22px;
    height: 15px;
    background-position: -217px -120px;
}

.sprite-au {
    width: 22px;
    height: 15px;
    background-position: -241px -1px;
}

.sprite-bh {
    width: 22px;
    height: 15px;
    background-position: -241px -18px;
}

.sprite-gi {
    width: 22px;
    height: 15px;
    background-position: -241px -35px;
}

.sprite-ax {
    width: 22px;
    height: 15px;
    background-position: -241px -52px;
}

.sprite-ir {
    width: 22px;
    height: 15px;
    background-position: -241px -69px;
}

.sprite-je {
    width: 22px;
    height: 15px;
    background-position: -241px -103px;
}

.sprite-ar {
    width: 22px;
    height: 15px;
    background-position: -241px -120px;
}

.sprite-la {
    width: 22px;
    height: 15px;
    background-position: -265px -1px;
}

.sprite-sc {
    width: 22px;
    height: 15px;
    background-position: -265px -18px;
}

.sprite-gu {
    width: 22px;
    height: 15px;
    background-position: -265px -35px;
}

.sprite-kw {
    width: 22px;
    height: 15px;
    background-position: -265px -52px;
}

.sprite-xk {
    width: 22px;
    height: 15px;
    background-position: -265px -69px;
}

.sprite-mp {
    width: 22px;
    height: 15px;
    background-position: -265px -86px;
}

.sprite-va {
    width: 22px;
    height: 15px;
    background-position: -265px -103px;
}

.sprite-pr {
    width: 22px;
    height: 15px;
    background-position: -265px -120px;
}

.sprite-dz {
    width: 22px;
    height: 15px;
    background-position: -289px -1px;
}

.sprite-bs {
    width: 22px;
    height: 11px;
    background-position: -289px -20px;
}

.sprite-cl {
    width: 22px;
    height: 15px;
    background-position: -289px -35px;
}

/* classes of the old theme that the shared country files (region_<code>.inc, type_<code>.inc ...) still print */
.badge-blue { background: var(--tblr-primary-lt); color: var(--tblr-primary); }
.pull-right { float: right; }
.pull-left { float: left; }
.margin-bottom-10 { margin-bottom: .75rem; }
.margin-bottom-20 { margin-bottom: 1.25rem; }
.tags-v1 { padding: 0; margin: 0 0 1.25rem; list-style: none; }
.tags-v1 > li { display: inline-block; margin: 0 .35rem .35rem 0; }
/* the letter codes / sub-regions of a region (\$tipcode in region_<code>.inc) as chips */
.tags-v1 > li > a { display: inline-block; padding: .2rem .65rem; border: 1px solid var(--tblr-border-color); border-radius: 999px; background: var(--tblr-primary-lt); color: var(--tblr-link-color); font-weight: 600; text-decoration: none; }
.tags-v1 > li > a:hover { border-color: var(--tblr-primary); color: var(--tblr-link-hover-color); }

/* ---- the informer / add forms of the countries (inc_boot/inf_form_<code>.inc, add_forma_new_help_<code>.inc) still print Bootstrap 3 classes ---- */
/* Bootstrap 3 grid classes of the old files. col-xs-N means "at every width" there, so it is defined for all widths first; the sm / md / lg classes
 * are then declared again (same values as Tabler's) so that they come after it and win on wider screens, like in Bootstrap 3 */
.col-xs-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25.00000000%; }
.col-xs-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6 { flex: 0 0 auto; width: 50.00000000%; }
.col-xs-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9 { flex: 0 0 auto; width: 75.00000000%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100.00000000%; }
@media (min-width: 576px) {
	.col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-sm-3 { flex: 0 0 auto; width: 25.00000000%; }
	.col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-sm-6 { flex: 0 0 auto; width: 50.00000000%; }
	.col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-sm-9 { flex: 0 0 auto; width: 75.00000000%; }
	.col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-sm-12 { flex: 0 0 auto; width: 100.00000000%; }
}
@media (min-width: 768px) {
	.col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-md-3 { flex: 0 0 auto; width: 25.00000000%; }
	.col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-md-6 { flex: 0 0 auto; width: 50.00000000%; }
	.col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-md-9 { flex: 0 0 auto; width: 75.00000000%; }
	.col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-md-12 { flex: 0 0 auto; width: 100.00000000%; }
}
@media (min-width: 992px) {
	.col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-lg-3 { flex: 0 0 auto; width: 25.00000000%; }
	.col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-lg-6 { flex: 0 0 auto; width: 50.00000000%; }
	.col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-lg-9 { flex: 0 0 auto; width: 75.00000000%; }
	.col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-lg-12 { flex: 0 0 auto; width: 100.00000000%; }
}
/* Tabler has its own .img-responsive (padding-top: 75% and a background) - the old pages mean the Bootstrap 3 one */
.img-responsive { display: block; max-width: 100%; height: auto; padding: 0; background: none; }
.form-inline { display: block; }
.form-inline section { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; }
/* BS5 .row makes every direct child full width - the controls of these forms must stay side by side */
.form-inline .row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; width: 100%; margin: 0; --tblr-gutter-x: 0; --tblr-gutter-y: 0; }
.form-inline .row > * { flex: 0 0 auto; width: auto; max-width: 100%; margin: 0; }
.form-inline .row > section { width: 100%; }
.form-inline .form-control, .form-inline .btn { display: inline-block; width: auto; max-width: 100%; margin: 0; }
.input-lg { padding: .6rem 1rem; font-size: 1.15rem; }
.btn-u { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .4375rem 1rem; font-size: .875rem; line-height: 1.4285; border: 1px solid var(--tblr-primary); border-radius: var(--tblr-border-radius); background: var(--tblr-primary); color: #fff; cursor: pointer; text-decoration: none; }
.btn-u-sm { padding: .25rem .6rem; font-size: .8rem; }
.btn-u-default { background: var(--tblr-bg-surface); border-color: var(--tblr-border-color); color: var(--tblr-body-color); }
.btn-u:hover { background: var(--tblr-primary); filter: brightness(1.1); color: #fff; }
.checkbox-inline, .radio-inline { display: inline-block; margin-right: 1rem; font-weight: 400; }
.checkbox-inline input, .radio-inline input { margin-right: .35rem; }

/* coloured <option>s of the plate type selects (from the old custom.css) */
.black-white-select {
    background: #000000;
    color: white;
}
.yellow-black-select {
    background: yellow;
    color: black;
}
.blue-white-select {
    background: blue;
    color: white;
}
.kz-tractor-blue-select {
    background: #3399ff;
    color: #ff9900;
}
.kz-tractor-yellow-select {
    background: #ff9900;
    color: rgb(0, 0, 0);
}
.kz-type-select {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gray-black-select {
    background: #97999c;
    color: black;
}
.red-white-select {
    background: red;
    color: white;
}
.white-red-select {
    background: white;
    color: red;
}
.white-degreen-select {
    background: white;
    color: #1d4c18;
}
.blue-black-select {
    background: #019df2;
    color: black;
}
.green-black-select {
    background: #009999;
    color: black;
}
.blue-yellow-select {
    background: #1f578f;
    color: yellow;
}
.brown-black-select {
    background: #a26a40;
    color: black;
}

/* Unify link buttons of the search forms (e.g. "Vanity Plates" in /ca/search) */
.btn-block { display: block; width: 100%; }
.btn-u-light-green { background: var(--tblr-green); border-color: var(--tblr-green); }
.btn-u-light-green:hover { background: var(--tblr-green); }

/* ---- Bootstrap 3 helpers used by the add forms (add_forma_new1.inc and the country files) ---- */
.hidden { display: none !important; }
.visible-xs-block, .visible-sm-block, .visible-md-block, .visible-lg-block { display: none !important; }
@media (max-width: 575.98px) { .hidden-xs { display: none !important; } .visible-xs-block { display: block !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .hidden-md { display: none !important; } .visible-md-block { display: block !important; } }
@media (min-width: 992px) { .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } }
.margin-bottom-15 { margin-bottom: 1rem; }

/* Bootstrap 3 panels / accordion (panel-group acc-v1): shown as cards */
.panel { background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); overflow: hidden; margin-bottom: .75rem; }
.panel-heading { padding: .6rem .9rem; background: var(--tblr-bg-surface-secondary); }
.panel-heading + .panel-collapse > .panel-body, .panel-heading + .panel-body { border-top: 1px solid var(--tblr-border-color); }
.panel-title { margin: 0; font-size: 1rem; font-weight: 600; }
.panel-title a { color: inherit; text-decoration: none; display: block; margin: -.6rem -.9rem; padding: .6rem .9rem; }
.panel-body { padding: .9rem; }