.route-features-list-wrapper {
    list-style-type: none;
    padding: 0;
}
.c4g-routing-layer-values > button{
    min-width: 30%;
    width: auto !important;
}
.c4g-routing-layers-select{
    background-color: rgba(24, 61, 93,.8);
    background-color: var(--main-color);
    color: rgba(255,255,255,.9);
    color: var(--font-color);
    width:100%
}

.route-features-list-element:nth-child(1) {
    border-top: 1px solid;
}

.route-features-list-element {
    border-bottom: 1px solid;
}

.c4g-routing-toggle{
    display: block;
    width: 100%;
    height: 14px;
    margin: 0;
    -webkit-appearance: none;
    outline: none;
}
.c4g-routing-toggle::-webkit-slider-runnable-track{
    position: relative;
    height: 12px;
    border-radius: 0%;
    border-radius: var(--button-radius-percent);
    background-color: rgba(255,255,255,.9);
    background-color:var(--font-color);
}
.c4g-routing-toggle::-moz-range-track{
    position: relative;
    height: 12px;
    border-radius: 0%;
    border-radius: var(--button-radius-percent);
    background-color: rgba(255,255,255,.9);
    background-color:var(--font-color);
}
.c4g-routing-toggle::-ms-track{
    position: relative;
    height: 12px;
    border-radius: 0%;
    border-radius: var(--button-radius-percent);
    background-color: rgba(255,255,255,.9);
    background-color:var(--font-color);
}
.c4g-routing-toggle::-webkit-slider-thumb{
    position: relative;
    top: -5px;
    width: 50px;
    height: 24px;
    border: 1px solid rgba(0,155,222,.5);
    border: 1px solid var(--shadow-color);
    -webkit-appearance: none;
    background-color: rgba(255,255,255,.9);
    background-color: var(--font-color);
    box-shadow: inset 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
    border-radius: 0%;
    border-radius:var(--button-radius-percent);
    cursor: pointer;
}
.c4g-routing-toggle::-moz-range-thumb{
    position: relative;
    top: -5px;
    width: 50px;
    height: 24px;
    border: 1px solid rgba(0,155,222,.5);
    border: 1px solid var(--shadow-color);
    -webkit-appearance: none;
    background-color: rgba(255,255,255,.9);
    background-color: var(--font-color);
    box-shadow: inset 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
    border-radius: 0%;
    border-radius: var(--button-radius-percent);
    cursor: pointer;
}
.c4g-routing-toggle::-ms-thumb{
    position: relative;
    top: -5px;
    width: 50px;
    height: 24px;
    border: 1px solid rgba(0,155,222,.5);
    border: 1px solid var(--shadow-color);
    -webkit-appearance: none;
    background-color: rgba(255,255,255,.9);
    background-color: var(--font-color);
    box-shadow: inset 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
    border-radius: 0%;
    border-radius: var(--button-radius-percent);
    cursor: pointer;
}
.c4g-router-instructions-wrapper{
    display: none;
}
.c4g-routing-output{
    position: relative;
    pointer-events: none;
    top: -16.75px;
    display: inline-block;
    transform: translateX(-50%);
    width: auto;
    color: rgba(24, 61, 93,.8);
    color: var(--main-color);
    background-color: rgba(0,0,0,0);
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
}

.c4g-routing-toggle:active + output {
    display: block;
    transform: translateX(-50%);
}
.c4g-routing-layer-values{
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
}
.c4g-routing-error{
    position: absolute;
    display: inline-block;
    white-space: nowrap;
    padding: 20px 10px 20px;
    z-index:100;
    left:100%;
    background-color: rgba(24, 61, 93,.8) !important;
    background-color: var(--main-color) !important;
    border-radius: 0%;
    border-radius: var(--button-radius-percent);
}
.c4g-routing-error label{
    display: inline-block;
    white-space: nowrap;
    float: left;

    overflow: visible;
    top: 20px;
    margin: 1px;
}
.c4g-routing-error button{
    display: inline-block;
    white-space: nowrap;
    margin: 5px;
    float: left;
}

button.c4g-area-search:before {
    content: "\f5a0";
}

button.c4g-router-search:before {
    content: "\f4d7";
}

.route-features-list-element.c4g-active {
    background-color: rgba(0,155,222,.5);
    background-color: var(--shadow-color);
}

.route-features-list-element.c4g-inactive {
    background-color: rgba(24, 61, 93,.8);
    background-color: var(--main-color);
}
.router-content-switcher button{
    width: 48% !important;
    margin-bottom: 20px !important;
}
.router-content-switcher{
    display: none;
}

button.c4g-router-position:before {
    content: "\f05b"
}

.c4g-routing-layer-values > .c4g-active {
    color: rgba(24, 61, 93,.8) !important;
    color: var(--main-color) !important;
    background-color: rgba(255,255,255,.9) !important;
    background-color: var(--font-color) !important;
}

.c4g-area-search-start {
    width: auto !important;
}

.c4g-route-search-start {
    width: auto !important;
}

.c4g-router-instruction-table td {
    min-width: 20px;
}
.c4g-router.c4g-portside-control button:before {
    content: "R";
}
.c4g-popup-route-wrapper {
    white-space: nowrap;
    margin-top: 8px;
}
.c4g-router-input-wrapper {
    display: flex;
    justify-content: flex-start;
}
.c4g-router-input-wrapper > input {
    box-sizing: border-box;
    padding: 5px;
    margin: 2px;
    min-width: 141px;
}
.c4g-router-input-wrapper > label {
    margin-right: 5px;
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
    min-width: 40px;
}
.c4g-router-buttonbar {
    text-align: left;
}
.c4g-router-buttonbar button {
    border-radius: 0%;
    border-radius: var(--button-radius-percent);
}
.c4g-router-instructions-header {
    margin-left: 5px;
    margin-right: 5px;
}
.c4g-router-instructions-header > em {
    float: right;
    font-weight: normal;
}
.c4g-router-instruction-table td {
    padding: 5px;
}
.c4g-router-attribution-wrapper {
    font-size: 9px;
    line-height: 18px;
    text-align: center;
}
button.c4g-popup-route-from,
button.c4g-popup-route-to,
.c4g_brick_popup_button a {
    border: 1px solid;
    padding: 6px 10px;
    cursor: pointer;
    outline: none;
}

button.c4g-popup-route-from {
    border-right: 0;
    border-radius: 3px 0 0 3px;
}
button.c4g-popup-route-to {
    border-radius: 0 3px 3px 0;
}
.c4g-router-profile-wrapper .c4g-active ul {
    /*border-radius: var(--button-radius-pixel);*/
    border: 2px solid;
}
.c4g-content-select input ,.c4g-portside-top-toolbar select, .c4g-portside-top-toolbar input, .c4g-portside-top-toolbar button, .c4g-router-input-wrapper button, .c4g-router-input-wrapper input {
    color: rgba(24, 61, 93,.8);
    color: var(--main-color);
    border-color: rgba(0,155,222,.5);
    border-color: var(--shadow-color);
    background-color: rgba(255,255,255,.9);
    background-color: var(--font-color);
}
.c4g-router-profile-wrapper button {
    color: rgba(255,255,255,.9);
    color: var(--font-color);
    border-color: rgba(0,155,222,.5);
    border-color: var(--shadow-color);
    background-color: rgba(24, 61, 93,.8);
    background-color: var(--main-color);
}
.c4g-router-profile-wrapper .c4g-active ul {
    color: rgba(24, 61, 93,.8);
    color: var(--main-color);
}

.c4g-router-profile-wrapper .c4g-active button,
.c4g-router-profile-wrapper button.c4g-active {
    color: rgba(0,155,222,.5);
    color: var(--shadow-color);
}

.c4g-router-profile-wrapper span.c4g-active ul {
    border-color: rgba(0,155,222,.5);
    border-color: var(--shadow-color);
    background-color: rgba(255,255,255,.9);
    background-color: var(--font-color);
    padding: 2px;
}

.c4g-router-profile-wrapper span.c4g-active ul li {
    color: rgba(24, 61, 93,.8);
    color: var(--main-color);
    background-color: rgba(255,255,255,.9);
    background-color: var(--font-color);
    padding: 2px;
}

.c4g-router-profile-wrapper span.c4g-active ul li::before {
    padding: 2px;
}

.c4g-router-profile-wrapper span.c4g-active ul li.c4g-active {
    color: rgba(0,155,222,.5);
    color: var(--shadow-color);
    background-color: rgba(255,255,255,.9);
    background-color: var(--font-color);
}
.c4g-router-input-wrapper {
    color: rgba(255,255,255,.9);
    color: var(--font-color);
}
.c4g-router-instruction-table {
    color: rgba(255,255,255,.9);
    color: var(--font-color);
}
.c4g-router-instruction-table img {
    background-color: rgba(255,255,255,.9);
    background-color: var(--font-color);
}
.c4g-router-instruction-table td {
    border-color: rgba(24, 61, 93,.8);
    border-color: var(--main-color);
}
.c4g-router-attribution-wrapper {
    color: rgba(255,255,255,.9);
    color: var(--font-color);
}
.c4g-router-attribution-wrapper a {
    color: rgba(255,255,255,.9);
    color: var(--font-color);
}
.c4g-router.c4g-open > button:before {
    content: "\f4d7";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-router-print:before {
    content: "\f02f";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-router-profile-car:before {
    content: "\f1b9";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-router-profile-hgv:before {
    content: "\f0d1";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-router-profile-bike:before {
    content: "\f206";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-router-profile-foot:before {
    content: "\f554";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-router-profile-wheelchair:before {
    content: "\f193";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-router-profile-scooter:before {
    content: "\f21c";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
span.c4g-active ul,
span ul{
    display: none;
    position: absolute;
    z-index: 1;
}
span.c4g-active:hover ul {
    display: inline;
}
button.c4g-popup-route-from,
button.c4g-popup-route-to,
.c4g_brick_popup_button a {
    color: rgba(24, 61, 93,.8);
    color: var(--main-color);
    background-color: rgba(255,255,255,.9);
    background-color: var(--font-color);
    border-color: rgba(255,255,255,.9);
    border-color: var(--font-color);
}
button.c4g-popup-route-from:hover,
button.c4g-popup-route-to:hover,
.c4g_brick_popup_button a:hover {
    background-color: rgba(255,255,255,.9);
    background-color: var(--font-color);
}
.c4g-popup-route-from,.c4g-popup-route-to, .c4g_brick_popup_button a {
    color: rgba(24, 61, 93,.8);
    color: var(--main-color);
}
button.c4g-router-switch:before {
    content: "\f0dc";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-router-over:before {
    content: "\f067";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-router-input-clear:before {
    content: "\f1f8";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
.c4g-router.c4g-close > button:before {
    content: "\f4d7";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-popup-route-from:before {
    content: "\f024";
    margin: 0 5px 0 -3px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
button.c4g-popup-route-to:before {
    content: "\f11e";
    margin: 0 5px 0 -3px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: inherit;
}
.route-features-list-element > div {
    padding: 10px 0px 15px;
}
.c4g-router-input-wrapper > label {
    width: 30%;
}