/* @group @variables */

[class*="o-root-header"] {
--root-hero-grid-template-columns: 1fr;
--root-hero-grid-template-rows: 22rem 3rem 1rem 1.5rem auto 2rem auto auto 3.25rem;
--root-hero-grid-column: 1;
--root-hero-grid-row: 1 / span 2;
--root-sub-menu-grid-column: 1;
--root-sub-menu-grid-row: 4 / span 2;
--root-mobile-road-grid-column: 1;
--root-mobile-road-grid-row: 5 / span 4;
--root-search-grid-column: 1;
--root-search-grid-row: 8;
}

@media all and (min-width: 48em) {

[class*="o-root-header"] {
--root-hero-grid-template-columns: var(--x-padding-left) auto auto var(--x-padding-right);
--root-hero-grid-template-rows: 26rem 3rem 3rem 5.25rem auto 3rem;
--root-hero-grid-column: 1 / span 4;
--root-hero-grid-row: 1 / span 3;
--root-desktop-road-grid-column: 3 / span 2;
--root-desktop-road-grid-row: 3 / span 2;
--root-desktop-traffic-grid-column: 2 / span 2;
--root-desktop-traffic-grid-row: 2 / span 2;
--root-desktop-car-grid-column: 3 / span 2;
--root-desktop-car-grid-row: 2 / span 2;
--root-search-grid-column: 1 / span 4;
--root-search-grid-row: 4 / span 2;
--root-desktop-traffic-grid-column: 1 / span 4;
--root-desktop-traffic-grid-row: 2;
}

}

@media all and (min-width: 62em) {

[class*="o-root-header"] {
}

}

/* @end @variables */

/* @group @o-root-header */

[class*="o-root-header"] {
position: relative;
overflow: clip;
display: grid;
grid-template-columns: var(--root-hero-grid-template-columns);
grid-template-rows: var(--root-hero-grid-template-rows);
background-color: hsl(65deg 83% 50%);
}

[class*="m-root-hero"] {
grid-column: var(--root-hero-grid-column);
grid-row: var(--root-hero-grid-row);
}

[class*="m-root-sub-menu"] {
grid-column: var(--root-sub-menu-grid-column);
grid-row: var(--root-sub-menu-grid-row);
}

[class*="m-root-search"] {
grid-column: var(--root-search-grid-column);
grid-row: var(--root-search-grid-row);
}

[class*="a-root-hero-desktop-traffic"] {
grid-column: var(--root-desktop-traffic-grid-column);
grid-row: var(--root-desktop-traffic-grid-row);
}

[class*="a-root-hero-desktop-car"] {
grid-column: var(--root-desktop-car-grid-column);
grid-row: var(--root-desktop-car-grid-row);
}

@media all and (max-width:47.9375em) {

[class*="a-root-mobile-road"] {
grid-column: var(--root-mobile-road-grid-column);
grid-row: var(--root-mobile-road-grid-row);
}

}

@media all and (min-width: 48em) {

[class*="a-root-desktop-road"] {
grid-column: var(--root-desktop-road-grid-column);
grid-row: var(--root-desktop-road-grid-row);
}

}

/* @group @o-root-header */

/* @end @o-root-header */

[class*="m-root-sub-menu"] {
position: relative;
z-index: 2;
}

[class*="m-root-search"] {
position: relative;
z-index: 7;
height: auto;
}

@media all and (max-width:47.9375em) {

[class*="a-root-mobile-road"] {
position: relative;
z-index: 1;
}

[class*="a-root-mobile-road"] svg {
width: 100vw;
}

}

@media all and (min-width: 48em) {

[class*="a-root-hero-desktop-traffic"] {
position: relative;
z-index: 4;
display: grid;
padding-left: 1.814516vw;
}

[class*="a-root-desktop-road"] {
position: relative;
z-index: 4;
display: grid;
justify-content: end;
height: auto;
}

[class*="a-root-desktop-road"] svg {
width: 100%;
height: auto;
}

[class*="a-root-hero-desktop-car"] {
position: relative;
z-index: 3;
display: grid;
justify-content: end;
align-items: end;
padding-right: 4.5vw;
}

}

/* @end @o-root-header */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-root-hero"] {
--root-hero-grid-template-columns: 1fr;
--root-hero-grid-template-rows: 13.5rem auto 8.75rem;
--a-root-header-catch-grid-column: 1;
--a-root-header-catch-grid-row: 2 / span 2;
--a-root-hero-bg-mobile-grid-column: 1;
--a-root-hero-bg-mobile-grid-row: 3;
--a-root-hero-media-grid-column: 1;
--a-root-hero-media-grid-row: 1 / span 3;
}

@media all and (max-width:47.9375em) {

[class*="m-root-hero"] {
}

}

@media all and (min-width: 48em) {

[class*="m-root-hero"] {
--root-hero-grid-template-columns: 1fr;
--root-hero-grid-template-rows: 9rem 1fr 3rem 6rem;
--a-root-header-catch-grid-column: 1;
--a-root-header-catch-grid-row: 2;
--a-root-hero-bg-desktop-grid-column: 1;
--a-root-hero-bg-desktop-grid-row: 4;
--a-root-hero-media-grid-column: 1;
--a-root-hero-media-grid-row: 1 / span 4;
}

}

@media all and (max-width:61.9375em) {

[class*="m-root-hero"] {
}

}

@media all and (min-width: 62em) {

[class*="m-root-hero"] {
}

}

@media all and (min-width: 90em) {

[class*="m-root-hero"] {
--root-hero-grid-template-columns: 1fr;
--root-hero-grid-template-rows: 7.5rem auto 3rem 3rem 4.5rem 3.75rem;
--a-root-header-catch-grid-column: 1;
--a-root-header-catch-grid-row: 2;
--a-root-hero-bg-desktop-grid-column: 1;
--a-root-hero-bg-desktop-grid-row: 4;
--a-root-hero-media-grid-column: 1;
--a-root-hero-media-grid-row: 1 / span 5;
--root-hero-height: 32.75rem;
}

}

/* @end @variables */

/* @group @m-root-hero */

[class*="m-root-hero"] {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: var(--root-hero-grid-template-columns);
grid-template-rows: var(--root-hero-grid-template-rows);
height: var(--root-hero-height);
}

[class*="a-root-header-catch"] {
grid-column: var(--a-root-header-catch-grid-column);
grid-row: var(--a-root-header-catch-grid-row);
}

[class*="a-root-hero-bg-mobile"] {
grid-column: var(--a-root-hero-bg-mobile-grid-column);
grid-row: var(--a-root-hero-bg-mobile-grid-row);
}

[class*="a-root-hero-bg-mobile"] {
grid-column: var(--a-root-hero-bg-mobile-grid-column);
grid-row: var(--a-root-hero-bg-mobile-grid-row);
}

[class*="a-root-hero-bg-desktop"] {
grid-column: var(--a-root-hero-bg-desktop-grid-column);
grid-row: var(--a-root-hero-bg-desktop-grid-row);
}

[class*="a-root-hero-media"] {
grid-column: var(--a-root-hero-media-grid-column);
grid-row: var(--a-root-hero-media-grid-row);
}

[class*="a-root-header-catch"] {
position: relative;
z-index: 3;
display: grid;
justify-content: end;
text-align: right;
}

[class*="a-root-header-catch"] img {
width: auto;
height: 10rem;
}

[class*="a-root-hero-media"] {
position: relative;
height: 28rem;
background-color: hsl(197deg 55% 98%);
}

[class*="a-root-hero-media"] img {
position: absolute;
width: 100%;
max-width: 60rem;
height: inherit;
object-fit: cover;
object-position: -15vw 0;
aspect-ratio: 342 / 182;
}

@media all and (max-width:47.9375em) {

[class*="a-root-hero-bg-mobile"] {
position: relative;
z-index: 2;
display: grid;
align-items: end;
width: 100vw;
height: 8.75rem;
}

[class*="a-root-hero-bg-mobile"] svg {
width: 100%;
height: auto;
}

}

@media all and (min-width: 48em) {

[class*="a-root-header-catch"] img {
width: 50vw;
height: auto;
}

[class*="a-root-hero-media"] {
 
}

[class*="a-root-hero-media"] img {
left: 0;
object-fit: contian;
object-position: 0 0;
}

[class*="a-root-hero-bg-desktop"] {
position: relative;
z-index: 2;
display: grid;
align-items: end;
width: 100vw;
height: 8.8125rem;
}

[class*="a-root-hero-bg-desktop"] svg {
width: 100%;
height: auto;
}

[class*="a-root-hero-media"] {
position: relative;
width: auto;
height: 100%;
object-fit: contain;
}

}

@media all and (min-width: 62em) {

[class*="a-root-header-catch"] img {
width: 50%;
height: auto;
}

}

/* @end @m-root-hero */

/* -------------------------------------------------------- */

/* @group @m-root-sub-menu */
@media all and (max-width:47.9375em) {

[class*="a-root-hero-sub-menu"] {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 5.875rem 8.75rem 6.5rem;
gap: 0;
margin-right: auto;
margin-left: auto;
padding-left: 0;
}

[class*="a-root-hero-sub-menu"] li {
list-style: none;
}

[class*="a-root-hero-sub-menu"] li:nth-of-type(2) {
padding-top: 1.5rem;
}

[class*="m-root-sub-menu"] a {
/*filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 0% / 30%));*/
filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 0% / 20%));
transition: var(--filter-transition);
}

[class*="m-root-sub-menu"] a:hover,
[class*="m-root-sub-menu"] a:focus {
/*filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 0% / 60%));*/
filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 0% / 30%));
}

}

/* @end @m-root-sub-menu */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-root-search"] {
--root-search-form-padding-right: var(--x-padding-right);
--root-search-form-padding-left: var(--x-padding-left);
--root-search-view-color: currentColor;
}

@media all and (min-width: 62em) {

[class*="m-root-search"] {
--root-search-view-color: hsl(0deg 0% 100%);
}

}

/* @end @variables */

/* @group @m-root-search */

[class*="m-root-search"] {
padding-right: var(--root-search-form-padding-right);
padding-left: var(--root-search-form-padding-left);
}

/* @end @m-root-search */

/* @group @variables */

[class*="m-root-form"] {
--root-form-grid-template-columns: .5rem 1fr .5rem;
--root-form-grid-template-rows: auto 1.5rem auto .75rem auto .75rem auto 1.5rem;
--a-root-search-after-grid-column: 1 / span 3;
--a-root-search-after-grid-row: 1;
--a-root-search-label-grid-column: 2;
--a-root-search-label-grid-row: 1;
--a-root-search-detail-grid-column: 2;
--a-root-search-detail-grid-row: 3;
--a-root-search-view-grid-column: 2;
--a-root-search-view-grid-row: 5;
--a-root-search-footer-grid-column: 2;
--a-root-search-footer-grid-row: 7;
--application-link-font-size: 1.125rem;
--application-link-line-height: 1.33333333;
}

@media all and (min-width: 48em) {

[class*="m-root-form"] {
--root-form-grid-template-columns: 1.25rem 1fr 1.25rem;
}

}

@media all and (min-width: 62em) {

[class*="m-root-form"] {
--root-form-grid-template-columns: 1.25rem auto .75rem 1fr .75rem auto 1.25rem 9rem 1.25rem;
--root-form-grid-template-rows: 3rem 1.25rem auto 1.25rem;
--a-root-search-after-grid-column: 1 / span 9;
--a-root-search-after-grid-row: 1;
--a-root-search-label-grid-column: 2;
--a-root-search-label-grid-row: 1;
--a-root-search-detail-grid-column: 2 / span 5;
--a-root-search-detail-grid-row: 3;
--a-root-search-view-grid-column: 6 / span 3;
--a-root-search-view-grid-row: 1;
--a-root-search-footer-grid-column: 8;
--a-root-search-footer-grid-row: 3;
--application-link-width: 6rem;
}

}

/* @end @variables */

/* @group @m-root-form */

[class*="m-root-form"] {
display: grid;
grid-template-columns: var(--root-form-grid-template-columns);
grid-template-rows: var(--root-form-grid-template-rows);
overflow: hidden;
background-color: hsl(0deg 0% 100%);
border-radius: .75rem;
}

[class*="m-root-form"]:after {
content: '';
position: relative;
z-index: 1;
grid-column: var(--a-root-search-after-grid-column);
grid-row: var(--a-root-search-after-grid-row);
background-color: hsl(347deg 85% 64%);
}

[class*="a-root-search-label"] {
position: relative;
z-index: 2;
grid-column: var(--a-root-search-label-grid-column);
grid-row: var(--a-root-search-label-grid-row);
}

[class*="a-root-search-detail"] {
grid-column: var(--a-root-search-detail-grid-column);
grid-row: var(--a-root-search-detail-grid-row);
}

[class*="a-root-search-view"] {
position: relative;
z-index: 3;
grid-column: var(--a-root-search-view-grid-column);
grid-row: var(--a-root-search-view-grid-row);
}

[class*="a-root-search-footer"] {
align-self: center;
grid-column: var(--a-root-search-footer-grid-column);
grid-row: var(--a-root-search-footer-grid-row);
}

/* @end @m-root-form */

/* @group @a-root-search-label */

[class*="a-root-search-label"] {
display: grid;
justify-content: center;
align-items: center;
grid-auto-flow: column;
gap: 1rem;
height: 3rem;
font-size: 1.125rem;
line-height: 1.33333333;
color: hsl(0deg 0% 100%);
}

[class*="a-root-search-label"] svg {
width: 1.5rem;
height: 1.5rem;
fill: currentColor;
}

/* @end @a-root-search-label */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-root-search-detail"] {
--root-search-detail-gap: .75rem;
--root-search-font-size: 16px;
}

@media all and (min-width: 48em) {

[class*="a-root-search-detail"] {
--root-search-font-size: .875rem;
--root-search-detail-gap: 1rem;
}

}

@media all and (max-width:61.9375em) {

[class*="a-root-search-detail"] {
--search-detail-grid-template-rows: repeat(4, 1fr);
}

}

@media all and (min-width: 62em) {

[class*="a-root-search-detail"] {
--search-detail-grid-template-columns: repeat(4, 1fr);
}

}

[class*="a-root-search-detail"] li select,
[class*="a-root-search-detail"] li [class="flatpickr-input"],
[class*="a-root-search-detail"] li input[type="date"],
[class*="a-root-search-detail"] li input[type="text"] {
--icon-dropdown: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="hsl(220, 20%, 60%)" fill-rule="evenodd" d="M23.936 2.255A.5.5 0 0 0 23.5 2H.5a.5.5 0 0 0-.427.759l11.5 19a.5.5 0 0 0 .855 0l11.5-19a.5.5 0 0 0 .008-.504z"/></svg>');
--background-image: linear-gradient(-180deg, hsl(0, 0%, 100%) 0%, hsl(0, 0%, 100%) 100%);
--background-color: hsl(0deg 0% 100%);
--border-color: hsl(0deg 0% 77%);
--box-shadow: inset 0 0 0 1px transparent, 0 1px .375rem hsl(0deg 0% 77%);
}

[class*="a-root-search-detail"] li select:not(:disabled):hover,
[class*="a-root-search-detail"] li [class="flatpickr-input"]:hover,
[class*="a-root-search-detail"] [type="date"]:hover,
[class*="a-root-search-detail"] [type="text"]:hover,
[class*="a-root-search-detail"] .point-error [type="date"]:hover,
[class*="a-root-search-detail"] .point-error [type="text"]:hover {
--border-color: hsl(204deg, 54%, 54%);
}

[class*="a-root-search-detail"] li select:not(:disabled):focus,
[class*="a-root-search-detail"] li [class="flatpickr-input"]::not(:disabled):focus,
[class*="a-root-search-detail"] li input[type="date"]:not(:disabled):focus ,
[class*="a-root-search-detail"] li input[type="text"]:not(:disabled):focus {
--border-color: hsl(198deg 75% 47%);
--box-shadow: inset 0 0 0 2px hsl(198deg 75% 47%), 0 1px .375rem hsl(0deg 0% 77%);
}

/*[class*="a-root-search-detail"] li select:disabled {
--background-color: var(--color-input-disabled);
--color: var(--color-text-disabled);
}*/

/* @end @variables */

/* @group @a-root-search-detail */

[class*="a-root-search-detail"] {
display: grid;
grid-template-columns: var(--search-detail-grid-template-columns);
grid-template-rows: var(--search-detail-grid-template-rows);
gap: var(--root-search-detail-gap);
font-size: var(--root-search-font-size);
}

[class*="a-root-search-detail"] label {
position: relative;
z-index: 2;
pointer-events: none;
}

[class*="a-root-search-detail"] li {
display: grid;
grid-template-columns: .75rem auto .75rem;
grid-template-rows: .75rem 1rem .5rem auto .2rem;
}

[class*="a-root-search-detail"] li label {
align-self: center;
grid-column: 2;
grid-row: 2;
font-size: .75rem;
}

[class*="a-root-search-detail"] li select,
[class*="a-root-search-detail"] li [class="flatpickr-input"],
[class*="a-root-search-detail"] li [type="date"],
[class*="a-root-search-detail"] li [type="text"] {
box-sizing: border-box;
grid-column: 1 / span 3;
grid-row: 1 / span 5;
}

[class*="a-root-search-detail"] li select {
box-sizing: border-box;
display: grid;
justify-content: start;
align-items: center;
width:100%;
max-width: 100%;
min-height: 3.75rem;
padding-top: 1.25rem;
padding-right: calc(2.25rem - 1px);
padding-left: calc(.75rem - 1px);
background-color: var(--background-color);
background-image: var(--icon-dropdown), var(--background-image);
background-position: calc(100% - .75rem) center, 0 0;
background-repeat: no-repeat;
background-size: calc(.1875rem * 3) auto, 100% 100%;
border: 1px solid var(--border-color);
border-radius: .375rem;
box-shadow: var(--box-shadow);
color: hsl(0deg 0% 20%);
caret-color: hsl(0deg 0% 20%);
transition: var(--form-primary-transition);
white-space: nowrap;
}

[class*="a-root-search-detail"] li select:focus {
border: 1px solid hsl(204deg, 54%, 54%);
box-shadow: inset 0 0 0 2px hsl(204deg, 54%, 54%);
}

/* @end @a-root-search-detail */

/* @group @form
--------------------------------------------------------*/
[class*="a-root-search-detail"] li [class="flatpickr-input"],
[class*="a-root-search-detail"] [type="date"],
[class*="a-root-search-detail"] [type="text"] {
-webkit-appearance: none;
box-sizing:border-box;
display: grid;
justify-content: start;
align-items: center;
width: 100%;
max-width:100%;
min-height: 3.75rem;
padding-top: 1.25rem;
padding-right: calc(2.25rem - 1px);
padding-left: calc(.75rem - 1px);
background-color: hsl(0deg 0% 100%);
background-image: var(--icon-dropdown), var(--background-image);
background-position: calc(100% - .75rem) center, 0 0;
background-repeat: no-repeat;
background-size: calc(.1875rem * 3) auto, 100% 100%;
border: 1px solid var(--border-color);
border-radius: .375rem;
box-shadow: var(--box-shadow);
color: hsl(0deg 0% 20%);
caret-color: hsl(0deg 0% 20%);
pointer-events:auto;
transition: var(--form-primary-transition);
}

[class*="a-root-search-detail"] li [class="flatpickr-input"]:focus,
[class*="a-root-search-detail"] [type="date"]:focus,
[class*="a-root-search-detail"] [type="text"]:focus,
[class*="a-root-search-detail"] .point-error [type="date"]:focus,
[class*="a-root-search-detail"] .point-error [type="text"]:focus {
box-shadow: inset 0 0 0 2px hsl(204deg, 54%, 54%);
}

[class*="a-root-search-detail"] .point-error [class="flatpickr-input"]:focus,
[class*="a-root-search-detail"] .point-error [type="date"]:focus,
[class*="a-root-search-detail"] .point-error [type="text"]:focus {
background-color: hsl(202deg, 54%, 98%);
box-shadow: inset 0 0 0 2px hsl(204deg, 54%, 54%);
}

/*[class*="a-root-search-detail"] .point-error [type="date"],
[class*="a-root-search-detail"] .point-error [type="text"] {
box-shadow:inset 1px 1px 0 hsl(360, 73%, 61%),inset -1px -1px 0 hsl(360, 73%, 61%);
}*/

/* @end @form */

/* @group @a-root-search-view */

[class*="a-root-search-view"] {
align-self: center;
display: grid;
justify-content: center;
align-items: center;
grid-auto-flow: column;
gap: .5rem;
color: var(--root-search-view-color);
font-weight: 600;
font-variation-settings-strong: "wght" 600;
}

[class*="a-root-search-view"] dt {
display: grid;
justify-content: center;
align-items: center;
grid-auto-flow: column;
gap: .25rem;
}

[class*="a-root-search-view"] dd {
display: grid;
justify-content: center;
align-items: center;
grid-auto-flow: column;
gap: .5rem;
}

[class*="a-root-search-view"] svg {
width: auto;
height: 1.25rem;
fill: currentColor;
}

[class*="a-root-search-counter"] {
display: grid;
justify-content: center;
grid-auto-flow: column;
gap: 2px;
}

[class*="a-root-search-counter"] span {
box-sizing: border-box;
display: grid;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.75rem;
background-color: hsl(0deg 0% 100%);
border: 1px solid hsl(0deg 0% 20%);
color: hsl(0deg 0% 20%);
border-radius: 2px;
}

/* @end @a-root-search-view */

/* @group @a-root-search-footer */

[class*="a-root-search-footer"] {
display: grid;
}

/* @end @a-root-search-footer */

/* -------------------------------------------------------- */
