/* body */
body {font-family: 'Nunito', sans-serif; margin:0;font-size:16px;line-height: 1.8;color: #252627;background: #ffffff;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;}


/* temporary styles */
a {color: #252627;}
a:hover {text-decoration: none;}
/* suggest test */
#whisper-results a:focus {background-color: #f7f7f7;}
input:focus,textarea:focus,button:focus {outline: none;}


/* width container */
.inner {width:1240px;margin:0 auto;}


/* cookie notice */

#opt-notice {width:100%;height:auto;font-size:11px;background:#696969;}
#opt-notice .inner {display:table;}
#opt-notice #notice-frame {display: table-row;margin-left: auto;margin-right: 0px;}
#opt-notice #message {display: table-cell;padding:4px 0px;vertical-align: middle;text-align:right;color:#f2f2f2;}
#opt-notice #button {width:140px;display: table-cell;padding:4px 0px;vertical-align: middle;}
#opt-notice #opt-link {width:100px;height:20px;display:inline-block;float:right;text-align:center;font-size:11px;line-height:20px;text-decoration:none;color:#363636;background-color:#d6d6d6;border:0;}
#opt-notice #opt-link:hover {cursor:pointer;background-color:#cccccc;}


/* header */

#header {width:100%;box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.048);} /* 5px 12px 0 rgba(0, 0, 0, 0.05); */
#header .inner {height:72px;display:flex;flex-wrap:nowrap;justify-content:space-between;vertical-align: middle;align-items: center;}
#search-container {display:flex;flex-wrap:nowrap;justify-content:space-between;flex-grow: 1;vertical-align: middle;align-items: center;}
#logo {width:auto;height:100%;}
#logo-image {width:115px; height:26px; background-image:url('../images/website/logo_tolls_eu.png'); background-size:115px; background-repeat:no-repeat; display:block; cursor:pointer;outline: none;}


/* top menu */

#topmenu ul {padding-left: 0;line-height:32px;font-size: 12px;}
#topmenu ul li {display:inline-block;margin: 0 2px;user-select:none;}
#topmenu ul li a {display:inline-block;padding:2px 14px;text-transform: uppercase;text-decoration: none;font-weight: 600;color:#01579bd4;}
#topmenu ul li a:hover, #topmenu ul .active, #topmenu ul .dropdown:hover, #topmenu .dropdown .active a {-webkit-text-stroke-width: 0.20px; -webkit-text-stroke-color: #01579b;}
#topmenu ul .dropdown a:hover, #topmenu .dropdown .active a {background: white;}
#topmenu > ul > li:first-of-type {margin: 0 2px 0 0;}
#topmenu > ul > li:last-of-type {margin: 0 0 0 2px;}
#topmenu > ul > li:first-of-type > a {padding: 0 14px 0 0;}
#topmenu > ul > li:last-of-type > a {padding: 0 0 0 14px;}
#topmenu .dropdown {position:relative;}
#topmenu .dropdown:hover {box-shadow: 0 6px 6px 0 rgba(255, 255, 255, 1), -2px 0 4px -2px rgba(0, 0, 0, 0.2), 2px 0 4px -2px rgba(0, 0, 0, 0.2);}
#topmenu .dropdown:hover > a {position:relative;z-index: 2100;background: #ffffff;}
#topmenu ul li .submenu {visibility: hidden; opacity: 0;display: none;position:absolute;z-index: 2000;left: -195px;padding: 15px 5px 20px 35px;column-count: 3;background:#ffffff;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);}
#topmenu ul .dropdown:hover .submenu, #topmenu ul li .submenu:hover {visibility: visible; opacity: 1; display: block;}
#topmenu .dropdown li {display: block;width:100%;margin:0;white-space: nowrap;}
#topmenu .dropdown li a {-webkit-text-stroke-width: 0;padding:0 10px 0 0;}


/* search input */

#search-form {height: 100%;width:360px;position:relative;margin: 0 42px;display:flex;align-items: center;}
#search-form form {height:28px;width:100%;display:flex;flex-wrap:nowrap;justify-content:space-between;background-color:#fcfcfc;border: 1px solid #ececec;border-radius:28px;}
#search-form form input[type=text] {width:100%;height:28px;padding:0;padding-left:30px;border:0;line-height:30px;font-size:12px;color:#252627;border-radius:28px;background-color:#fcfcfc;transition: 0.1s ease;}
#search-form form input[type=text]::placeholder {font-size:11px;color:#a5a5a5;}
#search-form form input[type=text]:focus {background:#ffffff;}
#search-form form button {width:60px;height:30px;position:relative;top:-1px;left:1px;font-size:14px;color:#a5a5a5;padding:0;background-color:#fcfcfc;border: 1px solid #ececec;border-left:#fcfcfc;border-radius:0 28px 28px 0;cursor:pointer;transition: 0.3s ease;}
#search-form form button .search-icon {width:11px;height:11px;display:block;margin-left:17px;mask-repeat: no-repeat;mask-position: center;mask-size: contain;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: contain;mask-image: url('../images/icons/website/search.svg');-webkit-mask-image: url('../images/icons/website/search.svg');background-color: #a2a2a2;}
#search-form form input[type=text]:focus + button,#search-form form button:hover {border: 1px solid #ececec;border-left:0;background:#ececec;color:#ffffff;}


/* search suggest */

#suggest-results {position: absolute; width:298px; z-index: 1001;top: 30px; left: 15px;background:#ffffff;border-radius:4px;box-shadow: 0 6px 18px rgba(0, 0, 0, .20);}
#whisper-results {padding:15px 0;font-size:13px;overflow: hidden;}
.suggest-row {padding:10px 15px 10px 28px;display:flex;flex-wrap:nowrap;justify-content: flex-start;height:28px;line-height: 28px;text-decoration: none;}
.suggest-icon {width:46px; height:100%; display: flex; align-items: center;}
.suggest-icon img {max-width: 24px; max-height: 24px;}
.suggest-name {width:160px;font-size:14px;font-weight: 600;white-space: nowrap;}
.suggest-category {font-size:12px;}
.suggest-row:hover .suggest-name {text-decoration: underline;}
.suggest-row.no-results {margin: 10px 0;}


/* search results */

#search h1 {margin-bottom: 30px;font-size: 16px; font-weight: 600;}
.result-row {margin-bottom: 60px;display:block;text-decoration:none;}
.result-row:hover .result-name h2 {text-decoration:underline;}
.result-heading {display:flex;flex-wrap: nowrap;justify-content: flex-start;}
.result-img {width:32px;height:32px;}
.result-img img {width:32px;height:32px;}
.result-name h2 {margin:2px 0 5px 20px;}
.result-row p {margin-top:5px;}


/* main container */

.main {width:100%;}
.main.traffic-info {padding: 0;}
.main.traffic-info #content {padding: 65px 0 60px 0;}
.main.country .inner, .main.content .inner, .main.traffic-info .inner, .main.search .inner, #content-gray .inner, #fuel-prices-container {display:flex;flex-wrap:nowrap;justify-content:space-between;}
#country, #traffic-info, #search {width: 855px; margin:40px 0 50px 0;padding: 0 35px 30px 0;}
#country, #traffic-info, #search {border-right: 1px solid #f2f2f2;}
#content {width: 100%; margin: 40px 0 80px 0;}
.semi-bold {font-weight: 600;}
.grey {color: grey;}


/* headings */

h1 {margin: 0 0 15px 0;font-size: 22px;font-weight: 700;color:#2d2d2d;}
h1 span {font-weight: 400;}
h2 {margin-top: 100px;font-size: 18px;color:#2d2d2d;}
h2 span {font-weight: 400;}
h2.heading-low {margin-top: 60px;}
h3 {margin-top: 50px;font-size: 18px;color:#2d2d2d;}
h3 span {font-weight: 400;}
h4 {color:#2d2d2d;}
.main.traffic-info .sidebar.right h2 {margin-top: 11px;font-size: 16px;}


/* homepage */

#hp-top-container {height: 520px; width: 100%; overflow: hidden;}
#hp-top-container .inner {height: 100%;  display: flex; justify-content: space-between;}
#hp-top-content-right {width: 100%; height: 100%; text-align: right; position: relative;}
#svg-map {max-height: 100%; max-width: 100%; margin-top:20px;}
#svg-country {height: 16px; width: auto; font-size: 12px; font-weight: 600; position: absolute; top: 0; right: 0;}
#svg-tooltip {display:none; height: 16px;position: absolute; background-color: #ffffff; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); padding: 2px 16px; border-radius: 16px; border: 1px solid #cccccc; min-width:30px; max-width: 300px; text-align:center; font-size:10px; line-height: 17px; font-weight: 600; }
#svg-tooltip:before, #svg-tooltip:after {top: 100%;border: solid transparent;content: '';height: 0;width: 0;position: absolute;pointer-events: none;}
#svg-tooltip:before {border-top-color: #cccccc;border-width: 10px;left: 50%;margin-left: -10px;}
#svg-tooltip:after {border-top-color: white;border-width: 9px;left: 50%;margin-left: -9px;}

#hp-top-content-left {width: 100%; margin-top: 140px;}
#hp-top-content-left h1 {font-size: 26px;}
#hp-top-content-left p {font-size: 16px;}

#hp-top-background {width: 100%; height: 100%; display: flex; justify-content: space-between; position: relative; top: -520px; z-index: -10;}
#hp-top-bckg-left {width: 50%;}
#hp-top-bckg-right {width: 50%;background: #f6f7f8;border-top-left-radius: 2000px;}
#hp-top-bckg-circle {height: 1000px; width: 200%; background: #f6f7f8; border-top-left-radius: 900px; position:relative; top:-200px; left:-225px;}

.hp-top-banner {width: 100%; height: auto; background: #fcfcfc;border-top: 1px solid #ececef;}
.hp-banner-wide {padding: 80px 0; text-align: center;}

.hp-content {padding: 100px 0;border-top: 1px solid #ececef;}
.hp-content.inline .inner {display: flex; justify-content: space-between;}
.hp-text-column {width: 50%;}
.hp-text-column h2 {margin-top: 0;font-size: 18px;}
#toll-stats {font-weight: 600; font-style: italic;}
#hp-fuel-updated {float: right; font-size: 10px; line-height: 2;}
.hp-info-column {width: calc(50% - 60px); display: flex; align-items: center;}
.hp-info-column #toll-methods ul {padding-left: 40px;}
#hp-toll-container {width: 100%; padding-bottom: 8px; -webkit-box-shadow: 2px 0 12px rgba(0,0,0,0.04); border: 1px solid #e6e6e6;}
#hp-toll-container:hover {-webkit-box-shadow: 2px 0 12px rgba(0,0,0,0.08);}
.hp-info-column #toll-methods {display: block; font-size: 15px; font-style: italic; text-decoration: none;}
.hp-info-column #toll-methods .toll-type-icon {width: 22px; height: 22px;}
.hp-info-column #hp-fuel-container {width: 100%;}
.hp-info-column #fuel-table {text-decoration: none; -webkit-box-shadow: 2px 0 12px rgba(0,0,0,0.04);}
.hp-info-column #fuel-table .tr.heading .th {height: 20px;}
.hp-info-column #fuel-table .th.country img {float: right; height: 100%; width: 18px; padding-right: 16px; vertical-align: middle;}
.hp-info-column #fuel-table:hover {-webkit-box-shadow: 2px 0 12px rgba(0,0,0,0.08);}
#hp-traffic-container {height: fit-content; width: 100%; display: block;padding: 10px 10px 10px 20px; border: 1px solid #e6e6e6; -webkit-box-shadow: 2px 0 12px rgba(0,0,0,0.04);}
#hp-traffic-container:hover {-webkit-box-shadow: 2px 0 12px rgba(0,0,0,0.08);}
#hp-traffic-container img {width: 100%;}




/* lower first h2 under a banner */
.main.country .inner #country h2:first-of-type {margin-top: 70px;}
.main.country .inner #country h3 {font-size: 15px;}

/* highlight box country page */
.highlight-box {margin: 100px 0 110px 0; padding: 30px 32px 30px 32px;}
.highlight-box.italic-gray {font-style: italic; background: #f6f7f8;}
.main.country .inner #country .highlight-box h2:first-of-type {margin-top: 0;}
.highlight-box h3 {margin-bottom: 6px;}
.highlight-box ul {margin-top: 0; margin-bottom: 10px; padding-left: 0; line-height: 2; list-style-type: none;}


/* country nav */

#content-links {width: 170px;height:auto;float:right;margin: 7px 0 20px 25px;padding:0 4px 0 24px;border:1px solid #ededed;background:#fdfdfd;}
#content-links a {color:#252627;text-decoration: none;}
#content-links a:hover {text-decoration: underline;}
#content-links p {margin: 12px 0 4px 0;font-size:14px;font-weight: 700;}
#content-links ul {padding-left:15px;margin:0 0 20px 0;font-size: 13px;line-height: 1.9;list-style-type: square;}


/* country pricelist */

.pricetable {width:100%;display:table;text-align:center;border-collapse: collapse;border: 1px solid #e6e6e6;}
.pricetable .tr {display:table-row;}
.pricetable .tr .th {display:table-cell;font-size:14px;border:1px solid #e6e6e6;}
.pricetable .tr .th.width-15 {width:15%;}
.pricetable .tr .th.width-20 {width:20%;}
.pricetable .tr .th.width-25 {width:25%;}
.pricetable .tr .th.width-30 {width:30%;}
.pricetable .tr .th.width-35 {width:35%;}
.pricetable .tr:first-child .th {height:auto;padding:8px 0;font-size:12px;line-height: 1.6;font-weight: 500;font-style: italic;}
.pricetable .tr > div {display:table-cell;height:54px;vertical-align: middle;font-size:16px;border:1px solid #e6e6e6;}
.pricetable .tr .td {font-weight: 600;}
.pricetable .tr .td.two-lines, .pricetable .tr .th.two-lines {height:62px;padding:6px 0 0 0;line-height: 1;}
.pricetable .tr .td.two-lines span {font-size:12px;font-weight: 400;}
.pricetable .tr .td.two-lines div {margin-top:10px;font-size:10px;font-weight: 400;color:#a5a5a5;}
.pricetable .tr .th.two-lines div {margin-top:10px;font-size:11px;font-weight: 400;color:#a5a5a5;}
.pricetable .tr .td.info-column {display:table-cell;padding: 0 8px;font-size:13px;font-weight: 400;font-style: italic;border:0;border-right:1px solid #e0e0e0;}
.pricetable .tr .td.length, .pricetable .tr .td.light-font {font-weight: 400;}

.pricetable.roads .tr div {height:42px;font-size:14px;}
.pricetable.roads .tr:not(:first-child) .th, .pricetable.bridges .tr:not(:first-child) .th, .pricetable.tunnels .tr:not(:first-child) .th, .pricetable.bridges-tunnels .tr:not(:first-child) .th {padding-left: 20px;text-align: left;}
.pricetable.bridges .tr:not(:first-child) .th span, .pricetable.tunnels .tr:not(:first-child) .th span, .pricetable.bridges-tunnels .tr:not(:first-child) .th span {font-size: 10px;}
.pricetable.bridges .tr div, .pricetable.tunnels .tr div, .pricetable.bridges-tunnels .tr div {height:34px;font-size: 13px;}
.pricetable.toll-places {margin-top: 40px;}
.pricetable.toll-places .tr div {height:32px; line-height: 32px; font-size: 12px; font-weight: 400;}
.pricetable.toll-places .tr .th:first-of-type {padding-left: 30px; text-align: left;}
.pricetable.toll-places .tr:not(:first-child) .th, .pricetable.bridges-tunnels .tr:not(:first-child), .pricetable.bridges .tr:not(:first-child), .pricetable.tunnels .tr:not(:first-child) .th .th {font-weight: 600;}
.pricetable.additional-places {margin-top: 40px;}
.pricetable.additional-places .tr div {height:22px; line-height: 22px; font-size: 11px; font-weight: 400;}
.pricetable.additional-places .tr:not(:first-child) .th {font-weight: 600;}
.pricetable.bridges .tr .td:last-child {padding: 0 8px;font-weight: 400;font-style: italic;}
.pricetable .tr .td.light-italic {padding: 0 8px;font-weight: 400;font-style: italic;}
.pricetable .tr .td.light-italic a {text-decoration: none;}
.pricetable .tr .td.light-italic a:hover {text-decoration: underline;}
.pricetable .tr .td.font-12 {font-size: 12px;}

#country .table-info.small-font p {font-size: 12px;}
.pricetable-icon {width:8px;height:8px;display:inline-block; margin-left: 3px; vertical-align: middle;background-color:#464646;mask-repeat: no-repeat;mask-position: center;mask-size: contain;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: contain;}
.pricetable-icon.table-info-icon {width: 11px; height: 11px; margin-left: 0;}
.pricetable-icon.panoramic {mask-image: url('../images/icons/website/panoramic.svg');-webkit-mask-image: url('../images/icons/website/panoramic.svg');}

.table-info, .map-info {margin-top:12px;font-size:14px;}
#country .table-info p, #country .map-info p {margin:0;font-size:14px;}


/* country map */

#country-map {width:100%;height:480px;position:relative;}


/* map poi checkbox */

#map-poi-buttons {position:absolute;top:-22px;right:0;font-size:11px;user-select:none;color:#636363;font-style: italic;}
#map-poi-buttons a {color:#636363;}
#map-poi-buttons input[type=checkbox] {position: absolute;opacity: 0;height: 0;width: 0;cursor: pointer;}
#map-poi-buttons .checkmark {position: absolute;top: 3px;left: 0;height: 12px;width: 12px;border:1px solid #b0b0b0;border-radius:3px;-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.08);}
#map-poi-buttons .checkmark:after {content: '';position: absolute; display: none;}
#map-poi-buttons input:checked ~ .checkmark:after {display: block;}
#map-poi-buttons .checkmark:after {left: 4px;top: 1px; width: 3px; height: 6px;border: solid #2196F3;border-width: 0 2px 2px 0;transform: rotate(45deg);}
#map-poi-buttons label:hover .checkmark {background-color: #fafafa;}
#map-poi-buttons label span:nth-of-type(2) { margin-left: 20px;}
#map-poi-buttons label {cursor: pointer;}


/* sidebar links */

#sidebar-country-links ul {list-style-type: none;padding-left: 0;}
#sidebar-country-links ul a {font-weight: 500;color: #252627;}
#sidebar-country-links ul a:hover {text-decoration: none;}


/* sidebar menu */

.sidebar {width: 320px;height:auto;flex-shrink: 0;font-size: 14px;}
.main.country .sidebar.right, .main.search .sidebar.right, .main.traffic-info .sidebar  {padding-top: 35px;padding-bottom: 60px;}
.sidebar.right {padding-left:30px;}
.sidebar.left {padding-right:30px;}
.sidebar h3 {margin-top:10px;font-size: 16px;font-weight: 700;}
.main.country .sidebar h3 {padding-bottom: 8px;border-bottom:1px solid #f2f2f2;}
#country-name {margin-top:10px;}
#sidebar-map {width:100%;height:200px;}
.sidebar-box {margin-top:70px;}
#country-info-links, #country-useful-links, #country-sidebar-menu {margin-top:60px;}
#current-traffic-info ul {padding-left: 0;font-size: 13px;list-style-type: none;}
#current-traffic-info ul li {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sidebar .traffic-icon {margin:0 5px 0 0;width:14px;height:14px;position:relative;top:3px;display:inline-block;background-size: 14px;background-repeat: no-repeat;}
.sidebar .traffic-icon.stuck {background-image: url('../images/icons/website/warning.svg');}
.sidebar .traffic-icon.work {background-image: url('../images/icons/website/work.svg');}
.sidebar .traffic-information {margin-top:14px;}
.sidebar .traffic-information span {font-weight: 600;}
.sidebar .traffic-information p {margin:0;font-size:12px;line-height: 1.6;}


/* sidebar fuel prices */

#fuel-prices-box {display:table;}
#fuel-prices-box div {display:table-row;}
#fuel-prices-box div div {display:table-cell;font-weight: 600;}
#fuel-prices-box .arrow {margin:0 10px 0 20px;width:8px;height:8px;display:inline-block;mask-repeat: no-repeat;mask-position: center;mask-size: contain;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: contain;mask-image: url('../images/icons/website/arrow.svg');-webkit-mask-image: url('../images/icons/website/arrow.svg');}
#fuel-prices-box .arrow.ascending {background-color:red;transform: rotate(-45deg);}
#fuel-prices-box .arrow.descending {background-color:green;transform: rotate(45deg);}
#fuel-prices-box .arrow.without-change {background-color:gray;}
#fuel-prices-box .fuel-price-small {font-size: 11px;}
#fuel-prices-box span {font-weight: 400;}
#country-fuel-info {margin-top:14px;}
#country-fuel-info span {font-weight: 600;}
#country-fuel-info p {margin:0;font-size:13px;line-height: 1.6;}


/* sidebar weather forecast */

#weather {display:flex;flex-wrap:nowrap;justify-content:space-between;}
.forecast {width:25%;text-align: center;font-size:12px;}
.forecast-img {height:44px;}
.forecast-img img {max-width:32px;max-height:32px;margin-top:4px;}
.forecast-temp {font-size:11px;}
.forecast-temp span {font-size:12px;font-weight: 600;}
#sun-info {margin-top:16px;}
#sun-info p {margin:0;font-size:13px;line-height: 1.6;}
#sun-info span {font-weight: 600;}


/* sidebar countries menu */

#countries-menu-ul {margin-top: 5px;padding-left: 0;columns: 2;list-style-type: none;}
#countries-menu-ul li a {height:30px;width:170px;display: inline-block;padding-left: 0px;text-decoration: none;color:#252627;}
#countries-menu-ul li:hover a {text-decoration: underline;}


/* country faq */

#content-gray #faq {width:855px;counter-reset: heading;}
#content-gray {padding:100px 0 80px 0;background:#fdfdfd;box-shadow: inset 0 14px 24px 0 rgba(0, 0, 0, 0.025);border-top:1px solid #f7f7f7;}

#faq h2 {margin: 0 0 30px 0;font-size: 20px;font-weight: 700;}
#faq h3 {margin-top: 80px;}
#faq h3:before {counter-increment: heading; content: counters(heading, " ")") ";}
#faq p {line-height: 26px;}

.info-note {margin:40px 0 0 0;font-size:13px;text-align:right;font-style: italic;}
.info-note a:hover {text-decoration: none;}


/* countries overview */

.main.overview h1 {margin-bottom: 0;}
#regions {display:flex;flex-wrap: wrap;justify-content: space-between; margin-top: 10px;}
.main.overview #content .asia-continent {justify-content: flex-start;}
.main.overview #content .asia-continent > div {margin-right: 80px;}
#continents {font-size: 11px; font-style: italic;}
#continents .active {font-weight: 600;}
#sort-container {display: flex; justify-content: space-between;}
#sort-button {text-align: center;line-height: 1.2;user-select: none;cursor: pointer;}
#sort-button .button-label {font-size:10px;}
#sort-button .action-label {font-size:12px;font-weight: 600;}
#regions div h2 {margin-top: 40px;}
#regions div ul {padding-left: 0;list-style-type: none;font-size:14px;line-height:2;}
#regions .toll-type-icon {width:16px;height:16px;position:relative;top:2px;margin-left: 15px;}
#country-overview-legend {margin-top: 25px; display: flex; flex-wrap: nowrap; justify-content: space-between;}
#toll-methods {width: 100%;font-size: 14px;}
#toll-methods h3 {font-size: 14px;font-weight: 400;}
#toll-methods ul {padding-left: 0;list-style-type: none;}
#toll-methods .toll-type-icon {position:relative;top:6px;margin: 0 15px 2px 0;}
.toll-type-icon {width:18px;height:18px;display:inline-block;background-color:#252627;mask-repeat: no-repeat;mask-position: center;mask-size: contain;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: contain;}
.toll-type-icon.free {mask-image: url('../images/icons/toll-type/free.svg');-webkit-mask-image: url('../images/icons/toll-type/free.svg');}
.toll-type-icon.toll {mask-image: url('../images/icons/toll-type/toll.svg');-webkit-mask-image: url('../images/icons/toll-type/toll.svg');}
.toll-type-icon.vignette {mask-image: url('../images/icons/toll-type/vignette.svg');-webkit-mask-image: url('../images/icons/toll-type/vignette.svg');}
.toll-type-icon.bridges {mask-image: url('../images/icons/toll-type/bridges.svg');-webkit-mask-image: url('../images/icons/toll-type/bridges.svg');}
.toll-type-icon.tunnels {mask-image: url('../images/icons/toll-type/tunnels.svg');-webkit-mask-image: url('../images/icons/toll-type/tunnels.svg');}
#no-toll-countries {margin-bottom: 40px;}
#no-toll-countries h2 {margin-top:0;font-size: 18px;font-weight: 600;}
#no-toll-countries h3 {margin-top: 100px;font-size: 17px;}
#no-toll-countries p {margin:0;}


/* fuel prices chart */

.main.fuel-prices h1 {margin-bottom: 0;}
#fuel-chart {height: 340px;width:100%;margin-bottom: 60px;}
#fuel-chart-menu {height:35px;width:auto;float:right;position:relative;top:0;z-index:1;list-style-type: none;margin:0;padding-left: 0;display:block;}
#fuel-chart-menu li {width:100px;height:26px;position:relative;display: inline-block;line-height: 26px;font-size: 12px;cursor:pointer;user-select: none;text-align: center;background-color:#fbfbfb;border:1px solid #ececec;}
#fuel-chart-menu li.active, #fuel-chart-menu li:hover {background-color: #ffffff;border:1px solid #e2e2e2;font-weight: 600;}
#fuel-chart-menu li.active::before, #fuel-chart-menu li:hover::before {content:'';position: absolute;left: calc(50% - 9px);bottom: -7px;width: 0;height: 0;   border-style: solid;border-width: 6px 9px 0 9px;border-color: #dcdcdc transparent transparent transparent;}
#fuel-chart-menu li.active::after, #fuel-chart-menu li:hover::after {content:'';position: absolute;right: calc(50% - 9px);bottom: -6px;width: 0;height: 0;border-style: solid;border-width: 6px 9px 0 9px;border-color: #ffffff transparent transparent transparent;}


/* fuel prices table */

#fuel-prices-table {width:100%;}
#fuel-prices-table .info-note {margin-top:20px;}
#fuel-prices-container .sidebar.right {width:320px;padding-left: 40px;}
#fuel-table {width:100%;display:table;font-size:14px;text-align:center;border-collapse: collapse;border: 1px solid #e6e6e6;}
#fuel-table .tr {display:table-row;}
#fuel-table .tr:not(:first-of-type):hover {background: #f7f7f7;}
#fuel-table .tr.old-price {color: #a9a9a9;}
#fuel-table .tr .th {display:table-cell; border:1px solid #e6e6e6;}
#fuel-table .tr:first-child .th {height:auto;padding:5px 0;font-size:11px;line-height: inherit; font-style: italic;}
#fuel-table .tr div {display:table-cell;width:25%;height:44px;position:relative;vertical-align: middle;line-height: 1.6;border:1px solid #e6e6e6;}
#fuel-table .fuel-price-small {display: inline-block;position:absolute;top: 4px; right:12px;font-size: 10px;color:#a2a2a2;}


/* info map */

#europe-map {width:100%;}
.main.info-map #map {width: 100%; height:800px;}



/* traffic info */

.main.traffic-info h1 {margin-bottom: 5px;}
#traffic-maps-menu {width:100%;height:44px;display:flex;justify-content: flex-end;}
#traffic-maps-menu ul {height:100%;list-style-type: none;margin:0;padding-left: 0;display:block;}
#traffic-maps-menu li {display: inline-block;height:30px;width:110px;position:relative;cursor:pointer;background-repeat:no-repeat;background-position: center; background-size:65px;user-select: none;background-color:#fbfbfb;border:1px solid #ececec;}
#traffic-maps-menu li.active, #traffic-maps-menu li:hover {background-color: #ffffff;border:1px solid #dcdcdc;}
#traffic-maps-menu #tomtom {background-image: url('../images/logos/tomtom.png');}
#traffic-maps-menu #google {background-image: url('../images/logos/gmaps.png');}
#traffic-maps-menu #bing {background-image: url('../images/logos/bingmaps.png');}
#traffic-maps-menu li.active::before, #traffic-maps-menu li:hover::before {content:'';position: absolute; left: calc(50% - 9px);bottom: -7px;width: 0;height: 0;   border-style: solid;border-width: 6px 9px 0 9px;border-color: #dcdcdc transparent transparent transparent;}
#traffic-maps-menu li.active::after, #traffic-maps-menu li:hover::after {content:'';position: absolute;right: calc(50% - 9px);bottom: -6px;width: 0;height: 0;border-style: solid;border-width: 6px 9px 0 9px;border-color: #ffffff transparent transparent transparent;}
#traffic-info #map {width:100%; height:760px;}
#traffic-info #map #MicrosoftNav {z-index: 1999;}
#traffic-info #map #show-incidents {width:32px;height:32px;position:absolute;top: 176px;right: 20px;z-index:1999;line-height:32px;font-size:16px;text-align:center;border-radius:4px;background-color:#ffffff;box-shadow: 0 2px 4px 1px rgba(0,0,0,.14);}
#traffic-info #map #show-incidents:hover {background-color:#f5f5f5;cursor:pointer;}
#traffic-info #map #show-incidents #incident-icon {width:16px;height:16px;margin:8px;display:inline-block;background-color:#767676;mask-repeat: no-repeat;mask-position: center;mask-size: contain;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: contain;mask-image: url('../images/icons/website/incidents.svg');-webkit-mask-image: url('../images/icons/website/incidents.svg');}
.main.traffic-info .sidebar.right h3 {margin-top: 30px; margin-bottom: 5px;}
.main.traffic-info .sidebar.right ul {margin-top: 0px;padding-left: 15px;list-style-type: square;}


/* bottom category boxes */

#bottom-boxes {padding:100px 0;border-top:1px solid #ededed;background:#fafafa;}
#bottom-boxes .inner {display:flex;flex-wrap:nowrap;justify-content:space-around;}
.infobox {width:235px;height:130px;border:1px solid #e2e2e2;background:#f6f6f6;text-align:center;}
a.infobox {text-decoration: none;color:#444444;}
.infobox h3 {margin-top: 15px;font-size:13px;}
.infobox .box-circle {width:46px;height:46px;margin:0 auto;margin-top:22px;border-radius: 50%;border: 1px solid #aaaaaa;background:#f9f9f9;}
.infobox .box-image {width:100%;height:22px;margin-top:12px;display:inline-block;background-color:#9a9a9a;mask-repeat: no-repeat;mask-position: center;mask-size: contain;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: contain;}
.infobox.overview .box-image {mask-image: url('../images/icons/boxes/overview.svg');-webkit-mask-image: url('../images/icons/boxes/overview.svg');}
.infobox.info-map .box-image {mask-image: url('../images/icons/boxes/info-map.svg');-webkit-mask-image: url('../images/icons/boxes/info-map.svg');}
.infobox.fuel-prices .box-image {mask-image: url('../images/icons/boxes/fuel-prices.svg');-webkit-mask-image: url('../images/icons/boxes/fuel-prices.svg');}
.infobox.traffic-info .box-image {mask-image: url('../images/icons/boxes/traffic-info.svg');-webkit-mask-image: url('../images/icons/boxes/traffic-info.svg');}
.infobox:hover {cursor: pointer;border:1px solid #d8d8d8;}
.infobox:hover .box-circle {border:1px solid #01579b;}
.infobox:hover .box-image {background-color: #01579b;}
a.infobox:hover {color:#252627;}


/* OpenLayers map */

.openlayers-map .ol-zoom button:hover {cursor:pointer;}
.openlayers-map .ol-attribution:not(.ol-collapsed) {background: rgba(255,255,255,.75);}
.openlayers-map .ol-attribution ul {padding:0 8px 0 10px;}
#sidebar-map .ol-attribution ul {padding:0 8px 0 8px;}
.openlayers-map .ol-attribution.ol-uncollapsible {height:26px;line-height:24px;bottom:6px;right:6px;border-radius:6px;}
#sidebar-map .ol-attribution.ol-uncollapsible {height:16px;line-height:14px;bottom:6px;right:6px;border-radius:6px;}
.openlayers-map .ol-attribution.ol-uncollapsible ul li {font-size:11px;}
#sidebar-map .ol-attribution.ol-uncollapsible ul li {font-size:9px;}
.openlayers-map .ol-attribution .spacer {margin:0 3px;font-size:12px;color:#8c8c8c;}
.openlayers-map .ol-attribution img {width:16px;height:16px;}
#sidebar-map .ol-attribution img {width:11px;height:11px;}
.openlayers-map .ol-attribution .olLink {cursor:pointer;}
.openlayers-map .ol-attribution .olLink img {width:14px;height:14px;}
#sidebar-map .ol-attribution .olLink img {width:9px;height:9px;}
.openlayers-map .ol-attribution .osmapLink {margin:0 2px 0 4px;cursor:pointer;}
.openlayers-map .ol-attribution .copyrightLink  {color: #0078A8;text-decoration:none;}
.openlayers-map .ol-attribution .copyrightLink:hover {color: #0078A8;text-decoration:underline;cursor:pointer;}
.openlayers-map .ol-attribution .gmapsLink:hover {cursor:pointer;}
.ol-overlay-container {width:100%;}
.ol-popup-closer {position: absolute;top: 2px; right: 8px;font-size:12px;line-height: initial;color: #c3c3c3;text-decoration: none;}
.ol-popup-closer:hover {color:#999999;}
.ol-popup-closer:after {content: '✖';}
.ol-popup {position: absolute; background-color: white; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));padding: 10px 15px 12px 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 25px;left: -50px;min-width:80px;max-width: 280px;text-align:center;font-size:13px;}
.ol-popup:before, .ol-popup:after {top: 100%;border: solid transparent;content: '';height: 0;width: 0;position: absolute;pointer-events: none;}
.ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 49px;margin-left: -11px;}
.ol-popup:after {border-top-color: white;border-width: 10px;left: 49px;margin-left: -10px;}
.tooltip-triangle:after {left:calc(50%);}
.tooltip-triangle:before {left:50%;}
#hover-tooltip.ol-popup {padding:5px 20px;font-size:11px;white-space: nowrap;}
#onclick-tooltip {font-size:13px;text-align: left;}
#onclick-tooltip h4 {margin:0;font-size:15px;}
.tooltip-info {font-size:11px;line-height:1.4;text-align: right;}
.tooltip-info.website {margin-top:2px;}
.tooltip-info.updated {margin-top:20px;}
.tooltip-info.updated, .tooltip-info.author {font-size:10px;}
.tooltip-info a {text-decoration: none;font-weight:600;}
.tooltip-info a:hover {text-decoration: underline;}
#tooltip-content .pricetable {margin-top:5px;}
#tooltip-content .pricetable .tr div {height:24px;font-size:12px;line-height:1.4;}
#tooltip-content .pricetable .tr:first-child .th {padding: 4px 0;}
#tooltip-content h2 {margin: 0;font-size: 16px;}
#tooltip-content h3 {margin: 30px 0 0 0; font-size: 14px;}
#tooltip-content p {margin-top: 0;}
.tooltip-info.page {padding: 0 0 4px 0;font-size:12px;}


/* banner ads */

.banner {text-align:center;}
.banner.content-wide {margin-top: 100px;text-align: center;}
.banner.content-wide.country-top {margin-top: 70px;}
.banner.content-wide.info-map {margin: 25px 0;}
.banner.content-wide.bottom {margin-top: 60px;}
.banner.sidebar-ads {margin-top: 60px;}
#content-gray .banner.sidebar-ads {margin-top: 105px;}
.banner.overview-legend {width: 100%;margin:0;}
.main.traffic-info .banner {margin-top: 120px;}
.main.homepage .banner.sidebar-ads {margin-top: 130px;}
.main.overview #content-gray .banner.sidebar-ads {margin-top: 180px;}


/* contact */

.main.contact .inner #content {display:flex;flex-wrap:nowrap;justify-content:flex-start;}
.main.contact .inner .sidebar {width:285px;margin-right: 20px;font-size:14px;}
.main.contact .inner .sidebar ul {padding-left: 0;list-style-type: none;}
.main.contact .inner .sidebar ul li span {font-size: 600;}


/* contact form */

#contact-form {width:800px;}
#contact-form h3 {font-size:16px;margin-bottom:5px;}
#contact-form p {margin-top:4px;}
#form-notice {height:12px;margin:0 0 5px 0;font-size:12px;line-height:12px;}
#contact-form #form-notice p {margin:0;font-size:12px;line-height: 12px;color:#ff0000;}
#mail-form {width:100%;max-width:500px;display:inline-block;}
#mail-form label {font-size:12px;}
#mail-form input[type=text] {width:50%;height:28px;margin-bottom:8px;padding:0 6px;border:1px solid #dcdcdc;}
#mail-form textarea {width:100%;height:160px;padding:6px 6px;border:1px solid #dcdcdc;box-sizing: border-box;}
#mail-form .g-recaptcha {height:78px;float:right;margin:10px 0 10px 0;}
#mail-form input[type=submit] {width:100px;height:34px; display:block;float:right;clear:both;border:1px solid #33689e;margin:0 auto;margin-top:2px;line-height:30px;background-color:#0d6cb7;border-radius: 6px;color:#ffffff;font-size:13px;text-decoration:none;cursor:pointer;}
#mail-form input[type=submit]:hover {background-color:#01579b;border:1px solid #5693d2;}


/* user data opt */

.userdata-opt {height:20px;display:flex;flex-wrap: nowrap;justify-content: flex-start;margin-top:60px;}
#content .userdata-opt h3 {margin-top:0;}
.opt-status {width:100px;margin-left:12px;font-size:14px;line-height: 29px;font-style: italic;color:#666666;}
.opt-status.link {width:auto;}
.switch {width: 44px; height: 18px;position: relative;margin-top:6px;display: inline-block;}
.switch input {opacity: 0; width: 0; height: 0;}
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color:#cccccc; -webkit-transition: .4s; transition: .4s;}
.slider:before {position: absolute; content: ''; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s;}
input:checked + .slider {background-color:#3e96dc;}
input:checked + .slider:before {-webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}
.slider.round {border-radius: 18px;}
.slider.round:before {border-radius: 50%;}
.userdata-opt-notice {margin-left:20px;font-size:11px;margin-top:5px;color:#cc0000;}


/* footer */

#footer {height:auto;width:100%;color:#999999;box-shadow: 0 -5px 12px 0 rgba(0, 0, 0, 0.10);font-size: 14px;background:#2d2d2d;}
#footer-content {padding: 50px 0 30px 0;display:flex;flex-wrap:nowrap;justify-content:space-between;}
/* #footer-content div {flex:1;} */
#footer-content h4 {margin-bottom: 0px;font-size: 16px;font-weight: 600;color:#f6f6f6;}


/* footer menu */

.footer-menu ul {padding-left: 0;list-style-type: none;}
.footer-menu ul li a {text-decoration: none;color:#999999;}
.footer-menu ul li a:hover {text-decoration: underline;}
#footer-text {text-align: center;}
#footer-text a {text-decoration: underline;color:#999999;}
#footer-text a:hover {text-decoration: none;}


/* footer bottom */

#footer-bottom {margin-top: 20px;display:flex;justify-content: space-between;height:50px;font-size: 13px;align-items: center;border-top:1px solid #999999;}
#footer-bottom div {flex:1;}
#footer-bottom #ft-center {height:16px;display:flex;flex:0;justify-content: center;text-align: center;}
#footer-bottom #ft-center a {display:inline-block;margin:0 4px;}
#footer-bottom #ft-center img {width: 16px;height:16px;}
#footer-bottom #ft-right {text-align: right;}