:root {
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
    
}

html, body {
    padding: 0;
    margin: 0;
    font-weight: var(--body-font-weight) !important;
}

*:not(.fa):not(.glyphicon) {
    font-family: var(--font-family) !important;
}

h1, h2, h3, h4, h5, h6 , .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: var(--heading-font-weight) !important;
}

.syn-throbber {
    background-color: var(--black);
    opacity: 0.6;
    background-image: url('../images/throbber.gif');
    background-repeat: no-repeat;
    background-position: center;
}

/*
#syn-header {
    background-color: var(--gray-100);
    position: relative;
    height: 45px;
    position: fixed;
    top: 0;
    width: 100%;
}
*/
#syn-header-title {
    font-weight: bold;
}

#syn-header table {
    width: 100%;
}

#syn-header-left,
#syn-header-title,
#syn-header-right {
    width: 33%;
}

#syn-header-title {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding: 11px 0px 0px 0px;
}

#syn-main {
    overflow: auto;
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
    margin-top: 45px;
    /*background: var(--gray-300);*/
}

.syn-mob-image-container {
    text-align: center;
    padding: 8px 0 8px 0;
}

.syn-mob-image-container img {
    border: 1px solid var(--gray-600);
    padding: 0;
    margin: 0;
}

.syn-mob-video-container {
    text-align: center;
    padding: 8px 0 8px 0;
}

.syn-mob-video-container span {
    display: block;
    width: 300px;
    height: 100px;
    border: 1px solid red;
    text-align: center;
    margin: 0 auto;
}

.sym-mob-busy {
    padding: 8px;
}

.sym-mob-busy span {
    display: block;
    border: 1px solid var(--gray-600);
    font-weight: bold;
    text-align: center;
}

.syn-licenseplate {
    display: inline-block;
    border: 1px solid var(--black);
    background-color: var(--licence-plate-yellow);
    font-weight: bold;
    border-radius: 2px;
    padding: 0;
    margin: 0;
    line-height: 20px;
}

.syn-licenseplate b {
    /*display: inline-block;*/
    color: var(--white);
    padding: 2px 4px 2px 4px;
    background-color: var(--secondary-blue);
    font-size: 14px;
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;

}

.syn-licenseplate span {
    /*display: inline-block;*/
    padding: 2px 8px 2px 8px;
    font-size: 14px;
}

.syn-licenseplate-input input {
    background-color: var(--licence-plate-yellow);
    text-transform: uppercase;
    font-weight: bold;
}

.syn-licenseplate-input .country {
    background-color: var(--secondary-blue);
    color: var(--white);
    font-weight: bold;
}

.syn-licenseplate-input .remove {
    background-color: var(--licence-plate-yellow);
    color: var(--black);
    font-weight: bold;
}

a:focus, a:hover {
    color: var(--text-link);
    text-decoration: none;
}

/*
#syn-footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:48px;
    width:100%;
    background:var(--primary-blue);
    color: var(--white);
}
*/
#syn-footer table {
    width: 100%;
}

#syn-footer table td {
    /*width: 33%;*/
    border-right: 1px solid var(--white);
    text-align: center;
}

#syn-footer table td:last-child {
    border-right: 1px none var(--white);

}

#syn-footer a {
    width: 100%;
    border: 1px solid var(--primary-blue);
    background-color: var(--primary-blue);
    padding: 8px 0px;
    text-decoration: none;
    color: var(--white);
    display: block;

}

#syn-footer a span {
    font-size: 28px;
}

#syn-footer a.active span {
    color: var(--gray-950);
    /*text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);*/
}


.navbar-toggle {
    z-index: 3;
}

.syn-item-divider {
    background-color: var(--gray-500);
    padding: 4px 16px 4px 16px;
    color: var(--gray-800);
}

.syn-list-header {
    background-color: var(--gray-500);
    padding: 4px;
}

.syn-title-header {
    background-color: var(--gray-500);
    padding: 4px 8px 4px 8px;
}

.list-group-item.syn-title {
    background-color: var(--gray-500);
}

.syn-order-list-item.disapproved{
    background: var(--status-disapproved);
}

.syn-order-list-item a {
    color: var(--black);
    display: block;
}

.syn-marker-info h1,
.syn-order-list-item h1 {
    font-size: 17px;
    font-weight: bold;
    margin: 0;
    padding: 0 0 4px 0;
}

.syn-order-list-item h1 i {
    display: none;
}

.syn-order-list-item h2 {
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    padding: 4px 0 4px 0;
    color: var(--text-primary);
    /*line-height: 20px;*/
}

.syn-marker-info {
    padding: 6px 0 4px 0;
    border-bottom: 1px solid var(--gray-600);
}

.syn-marker-info small,
.syn-order-list-item small {
    display: block;
    font-size: 15px;
    color: var(--text-secondary);
}

.syn-marker-info small span,
.syn-order-list-item small span {
    font-weight: bold;

}

.syn-order-list-item a {
    padding: 3px;
}

.syn-order-list-item a b {
    margin-right: 6px;
}

.syn-order-list-item a > .badge {
    float: right;
    background: var(--primary-orange);
    font-size: 14px;
}

.syn-item-detail {
    padding: 16px;
}

.syn-item-detail h1 {
    font-size: 17px;
    font-weight: bold;
    margin: 0;
    padding: 0 0 4px 0;
}

.syn-item-detail h2 {
    font-size: 15px;
    font-weight: normal;
    margin: 0;
    padding: 0 0 4px 0;
    color: var(--text-primary);
}

.syn-item-detail small {
    display: block;
    font-size: 15px;
    color: var(--text-secondary);
}

.syn-item-detail small span {
    font-weight: bold;
}

.syn-item-detail small span.black {
    color: var(--black);
}

.syn-btn-padding {
    padding: 8px 0;
}

.syn-truck-loaded {
    color: var(--primary-blue);
}

.navbar-default {
    background-color: var(--navbar-bg);
    border-color: var(--navbar-border-color);
}

.navbar-default .navbar-brand {
    color: var(--white);
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: var(--white);;
}

.navbar-default .navbar-nav > li > a {
    color: var(--navbar-item-color);
    font-weight: var(--navbar-item-font-weight);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--navbar-item-color-hover);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--text-secondary);
    background-color: var(--primary-blue);
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: var(--navbar-item-color-hover);
    background-color: var(--white);
}

/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--gray-700);
    border-bottom-color: var(--gray-700);
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--gray-950);
    border-bottom-color: var(--gray-950);
}

.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--text-secondary);
    border-bottom-color: var(--text-secondary);
}

/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: var(--primary-blue);

}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: var(--primary-blue);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--gray-600);
}

#syn-map-container {
    /*margin-top: 51px;*/
    overflow: hidden;
}

/*
.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    text-overflow: ellipsis;
}
*/

/*@media (max-width: 767px) {*/
@media (max-width: 767px) {
    .navbar-brand {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        text-align: center;
        margin: auto;
        text-overflow: ellipsis;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: var(--gray-700);
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--gray-950);
    }
}

/* @media (min-width: 768px) { */
@media (min-width: 768px) {


    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse {
        /* padding-right: 0; */
        padding-right: 15px;
        padding-left: 0;
    }
}


.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}

.form-signin-heading {
    text-align: center;
}

.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
}

.form-signin .checkbox {
    font-weight: normal;
}

.form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
}

.form-signin .form-control:focus {
    z-index: 2;
}

.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

small.syn-red {
    color: var(--status-red);
    font-weight: bold;
}

small.syn-blue {
    color: var(--status-green);
    font-weight: bold;
}

small.syn-gray {
    /*color: var(--text-secondary);*/
    color: var(--text-muted);

}

/*
small b.fa {
    color: red;
}
*/
.syn-btn {
    position: relative;
}

.syn-badge {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--white);
    z-index: 10001;
    background-color: red;
}

.input-group-addon {
    background: var(--white);
}

.input-group-addon.search {
    background: var(--white);
    border: 0px;
    font-size: 16px;
}

.form-control.search {
    border: 0px;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.syn-item-detail .checkbox-inline {
    margin-top: 0;
    margin-left: 0;
    margin-right: 10px;
    padding: 6px 0 6px 20px;
}

.syn-note {
    border-bottom: 1px solid var(--gray-600);
    padding: 8px;
}

.syn-note small {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
}

.syn-table-padding td,
.syn-table-padding th {
    padding: 2px 8px 2px 0px;
}

.syn-table-padding td.syn-label {
    color: var(--text-primary);
    font-weight: bold;
    text-align: right;

}

.has-error .form-control {
    border-color: var(--status-error-light);
    background-color: var(--status-error-bg)
}


.list-group-collapse,
.list-group-collapse ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    background-color: var(--bg-white);
}

.list-group-collapse > li > a {
    font-weight: bold;
}

.list-group-collapse > li > ul {
    background-color: var(--gray-200);
}

.list-group-collapse > li > ul > li > ul {
    background-color: var(--bg-white);
}

.list-group-collapse a {
    display: block;
    padding: 12px;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-600);
}

.list-group-collapse a small.chassisnr {
    font-size: 18px;
    font-weight: normal;
    color: var(--text-chassis);
    /*color: var(--primary-orange);*/
}

.list-group-collapse a.active {
    background-color: var(--primary-orange);
    color: var(--white);
}

.list-group-collapse a.active small {
    color: var(--white);
}

.list-group-collapse .fa-check-circle-o {
    display: none;
}

.list-group-collapse a.active .fa-circle-thin {
    display: none;
}

.list-group-collapse a.active .fa-check-circle-o {
    display: inline-block;
}

.badge-pill {
    float: right;
    background: var(--primary-orange);
    font-size: 14px;
}

/* BRAND ICON */
.icon-brand {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
}

.icon-brand.v {
    background: transparent url('../images/v.png') no-repeat center center;
    background-size: 16px;
}

.icon-brand.a {
    background: transparent url('../images/a.png') no-repeat center center;
    background-size: 24px;
    width: 24px;
}

.icon-brand.s {
    background: transparent url('../images/s.png') no-repeat center center;
    background-size: 24px;
    width: 24px;
}

.icon-brand.c {
    background: transparent url('../images/c.png') no-repeat center center;
    background-size: 16px;
}

.icon-brand.n {
    background: transparent url('../images/n.png') no-repeat center center;
    background-size: 16px;
}

#notification {
    position: fixed;
    top: -120px;
    left: 0px;
    padding-top: 8px;
    padding-left: 5px;
    z-index: 999999;
    font-family: var(--font-family);
}

#notification .background-container {
    background: var(--bg-white);
    border-radius: 10px;
    font-size: 25px;
    margin: 0 auto;
    width: calc(100vw - 20px);
    height: 75px;
    opacity: 0.9;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    margin: 10px;
    -webkit-box-shadow: 0px 11px 33px -13px var(--shadow-gray);
    -moz-box-shadow: 0px 11px 33px -13px var(--shadow-gray);
    box-shadow: 0px 11px 33px -13px var(--shadow-gray);
}

#notification .background-title {
    background: var(--white);
    height: 35px;
    width: calc(100vw - 20px);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    opacity: 0.9;
    margin: 10px;
}

#notification .title-bar {
    background: url('../images/mini-app.png') no-repeat 10px 7px;
    width: calc(100vw - 20px);
    height: 40px;
    padding: 12px 0px 0px 40px;
    text-transform: uppercase;
    position: relative;
    z-index: 20;
    color: var(--text-notification);
    font-size: 11px;
}

#notification .text {
    color: var(--text-primary);
    padding: 0px 0px 0px 20px;
    font-size: 13px;
    position: relative;
    z-index: 20;
}

.modal.full-width {
    padding-top: 5%;
    padding-bottom: 5%;
}

.modal.full-width .modal-dialog {
    width: 80%;
    margin: auto;

}

.modal-content {
    border: var(--border-width) solid var(--border-color);
}

.modal.full-width .modal-dialog .modal-content {
    /*height:100%;*/
}

.navbar.navbar-fixed-bottom .btn {
    height: 60px;
    padding: 20px;
}

.syn-licenseplate-input {
    background-color: var(--licence-plate-yellow) !important;
    font-weight: bold;
    width: 89px;
    padding: 2px;
    text-align: center;
    text-transform: uppercase;
    border-left: 16px solid var(--licence-plate-blue);
}

.syn-licenseplate-input .country {
    background-color: var(--secondary-blue);
    color: var(--white);
    font-weight: bold;
    width: 14px;
    float: left;
    position: absolute;
    left: 0;
    top: 16px;
    font-size: 10px;
    padding: 3px;
    height: 20px;
}

.input-group .syn-licenseplate-input {
    border-left: 0;
}

input:disabled {
    background: var(--gray-400) !important;
}

.disabled {
    background: var(--gray-400) !important;
}


.fin-container {
    /* font-family: Arial; */
    font-family: var(--font-family);
    max-width: 600px;
    border: 1px solid var(--black);
    margin: 20px auto;
    padding: 15px 20px;
    background: var(--white);
}

.lenenkostgeld {
    font-size: 20px;
    padding: 5px;
    border: 3px solid var(--black);
    font-weight: bold;
    text-align: center;
}

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 18px;
    border-radius: 5px;
    background: var(--ui-slider-gray);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-top: 8px;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--secondary-slider-blue);
    cursor: pointer;
    border: 2px solid var(--white);
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--secondary-slider-blue);
    cursor: pointer;
}

.fin-container .row {
    margin-top: 10px;
}

.fin-container label {
    font-weight: normal;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mandatory.input-invalid {
    background: var(--status-error-input) !important;
    border: 1px solid red !important;
}

.tile {
    padding-left: 20px;
    float: left;
    width: 33%;
    margin-bottom: 10px;
    display: table-cell;
}

.tile-item {
    background: var(--white);
    border: 1px solid var(--gray-600);
    border-radius: 5px 20px 5px 5px;
}

.tile-item img {
    border-top-right-radius: var(--radius-lg);
    width: 100%;
}

.tile-item h2 {
    font-size: 18px;

    padding: 0 10px 0 10px;
    font-weight: bold;
}

.tile-item p.description {
    font-size: 16px;
    padding: 0 10px 0 10px;
    width: 100%;
    word-break: break-all;
}

.tile-item .price {
    padding: 20px 10px 10px 00px;
    background: var(--secondary-light-blue);
    color: var(--white);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.tile-item .price .marge-btw {
    font-size: 12px;
    font-weight: 100;
}

.option-container {
    clear: both;
}

.option-container ul {
    float: left;
    display: inline-block;
}

.stroke {
    height: 160px;
    width: 100%;
    border-radius: var(--radius-lg) 5px var(--radius-lg) 5px;
    border: var(--product-card-border-width) solid var(--product-card-border-color);
    background: var(--white);
    margin-bottom: 25px;
    display: block;
    overflow: hidden;
}

a.stroke {
    color: var(--black);
}

.stroke a {
    color: var(--black);
}

.stroke a:hover,
.stroke:hover * {
    text-decoration: none;
    color: var(--text-color);
}

:root {
    --product-card-image-width: 25%;
    --product-card-text-width: 55%;
    --product-card-price-width: 20%;
}

.stroke img {
    border-top-left-radius: var(--radius-lg);
    display: inline-block;
    float: left;
    width: var(--product-card-image-width);
    max-width: 180px;
    object-fit: contain;
    object-position: center;
    background-color: white;
}

.stroke .text {
    padding-left: 20px;
    float: left;
    width: var(--product-card-text-width);
}

.stroke .text h2 {
    font-weight: bold;
    font-size: 18px;
}

.stroke .text p {
    max-width: 100%;
}

.stroke .price {
    background: var(--secondary-light-blue);
    width: var(--product-card-price-width);
    height: 100%;
    float: right;
    padding-top: 40px;
    text-align: center;
    color: var(--white);
    font-size: 24px;
    font-weight: 300;
    max-width: 160px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding-inline: 8px;
    * {
        color: var(--white);
    }
}

.stroke .price .lease {
    font-size: 12px;
    font-weight: 300;

}

.stroke .price .marge-btw {
    position: relative;
    bottom: 1px;
    left: 0;
    font-size: 12px;
}

.car-list-item {
    /*margin-top: 20px;*/
}

.car-list-item a {
    color: var(--black);
}

.s-alert-box {
    z-index: 9999999;
}

.car-list-item:first-child {
    margin-top: 0px;
}


@keyframes placeHolderShimmer {
    0% {
        background-position: -300px 0
    }
    100% {
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    position: relative;
}

.thumbnail-container {
    white-space: nowrap; /* important */
    overflow: auto;
    max-height: 140px;
    img {
        object-fit: cover;
        object-position: center;
        background-color: var(--gray-200);
    }
}

.thumbnail-container figure {
    margin: 0;
    height: 110px;
    width: 150px;
    display: inline-block;
}

.thumbnail-container figure a img {
    display: block;
    padding: 4px;
    line-height: 1.42857143;
    background-color: var(--white);
    border: 1px solid var(--ui-border-gray);
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
    height: 100%;
}

.dont-break-out {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-background {
    width: 100vw;
    height: 100vh;
    background: var(--black);
    opacity: 0.75;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    -webkit-transform: translate3d(0, 0, 0)
}

.shadow {
    -webkit-box-shadow: 10px 10px 39px 23px var(--shadow-dark);
    -moz-box-shadow: 10px 10px 39px 23px var(--shadow-dark);
    box-shadow: 10px 10px 39px 23px var(--shadow-dark);
}

/*.syn-licenseplate {*/
/*display: inline-block;*/
/*border: 1px solid var(--black);*/
/*background-color: var(--licence-plate-yellow);*/
/*font-weight: bold;*/
/*border-radius: 2px;*/
/*padding: 0;*/
/*margin: 0;*/
/*line-height: 20px;*/

/*}*/
/*.syn-licenseplate b {*/
/*!*display: inline-block;*!*/
/*color: var(--white);*/
/*padding: 2px 4px 2px 4px;*/
/*background-color: var(--secondary-blue);*/
/*font-size: 14px;*/
/*border-top-left-radius: 1px;*/
/*border-bottom-left-radius: 1px;*/

/*}*/
/*.syn-licenseplate-input span {*/
/*!*display: inline-block;*!*/
/*padding: 2px 8px 2px 8px;*/
/*font-size: 14px;*/
/*}*/
/*.syn-licenseplate-input input{*/
/*background-color: var(--licence-plate-yellow);*/
/*text-transform: uppercase;*/
/*font-weight: bold;*/
/*}*/
/*.syn-licenseplate-input .country {*/
/*background-color: var(--secondary-blue);*/
/*color: var(--white);*/
/*font-weight: bold;*/
/*}*/

@media (min-width: 768px) {
    .navbar-right {
        margin-right: 0px;
    }
}


input.uppercase {
    text-transform: uppercase;
}

::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}

::placeholder { /* Recent browsers */
    text-transform: none;
}

#editor {
    padding: 20px;
}


.note-editable > * {
    color: rgb(34, 34, 34);
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: var(--font-family);
    font-size: small;
    background-color: rgb(255, 255, 255);
}

@media (max-width: 575.98px) {
    .car-list-item {
        margin: 0;
        border-bottom: 1px solid var(--gray-600);
    }

    .syn-licenseplate-input {
        font-size: 12px;
        border-radius: 2px;
        border: 1px solid var(--black);
    }

    h4.media-heading {
        font-size: 14px;
    }
}

.mobile-filter {
    display: inline-block;
    float: left;
    height: 50px;
    width: 10%;
    background: var(--secondary-light-blue);
    color: var(--white);
    text-align: center;
    padding-top: 13px;
    cursor: pointer;
}

.mobile-filter:active {
    background: color-mix(in oklab, var(--secondary-light-blue) 44%, black);
}

.hide-mobile-filters {
    width: 100vw;
    height: 80px;
    background: var(--secondary-light-blue);
    position: absolute;
    bottom: 0;
    text-align: center;
    padding-top: 15px;
    color: var(--white);
}

.hide-mobile-filters:active {
    background: #5aa1bf;
}

.syn-switch{
    display: inline-block;
    border:2px solid var(--gray-600);
    border-radius:20px;
    padding:5px;
    background: var(--ui-switch-gray);
    cursor: pointer;
    position:relative;
}

.syn-switch[data-state=on] {
    background:var(--switch-on);
    border: var(--switch-on-border) 2px solid;
}

.syn-switch .syn-label{
    display: inline;
    font-size:12px;
    font-weight:bold;
}

.syn-switch[data-state=on] .syn-label.off, .syn-switch[data-state=off] .syn-label.on{
    display: none;
}

.syn-switch[data-state=off] .syn-label{
    padding-left:30px;
    padding-right:10px;
    color: var(--ui-switch-off);
}

.syn-switch[data-state=on] .syn-label{
    color: var(--white);
    padding-right:30px;
    padding-left:10px;
}

.syn-switch .switcher{
    width:22px;
    height:22px;
    border-radius: 22px;
    background:var(--white);
    position:absolute;
    z-index:1040;
}

.syn-switch .switcher.on{
    right: 4px;
    top: 2px;
}

.syn-switch .switcher.off{
    left: 4px;
    top: 2px;
}

.syn-switch input{
    display: none;
}

/* --- Trade car list --- */

.tradecars {
    /*max-height: 386px;*/
    /*overflow-y: auto;*/
}

.tradecars .tradecar {
    display: flex;
    background-color: var(--ui-light-gray);
}

.tradecars .tradecar + .tradecar {
    margin-top: 19px;
}

.tradecars .tradecar .header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.tradecars .tradecar .header .syn-licenseplate-input {
    margin-right: 8px;
    min-width: 89px;
}

.tradecars .tradecar .data {
    flex: 1;
    padding: 20px;
    min-width: 0;
    border: 1px solid var(--ui-border-gray);
    cursor: pointer;
}

.tradecars .tradecar .data:active {
    background: var(--ui-hover-gray);
}

.tradecars .tradecar .data label {
    display: block;
}

.tradecars .tradecar .data .form-group {
    margin-bottom: 0;
}

.tradecars .tradecar .data .title {
    margin: 0;
    min-height: 0;
    line-height: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
}


.tradecars .tradecar .data .title span{
    text-transform: capitalize !important;
}

.tradecars .tradecar .actions {
    display: flex;
}

.tradecars .tradecar .actions .btn {
    display: flex;
    align-items: center;
}

.pdf-download{
    position:absolute;
    bottom:20px;
    width:400px;
    padding:20px;
    border-radius: 10px;
    left:calc(calc(100vw / 2) - 240px);
    background: var(--bg-pdf);
    z-index: 9998;
    color:var(--white);
    text-align: center;
    cursor: pointer;
    opacity: 0.5;
}

.pdf-download:hover{
    background: var(--bg-pdf-hover);
}

.pdf-download:active{
    background: var(--bg-pdf-active);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
    appearance: textfield; /* Modern browsers */
}

input.error {
    border: 1px solid red;
    background-color: #fbc2c2;
}

.list-group-item.syn-title, .list-group-item.syn-title:active {
    font-weight: bold;
    font-size:16px;
    background-color: var(--gray-300);
    border: 0px;
    color:var(--black);
    margin-top:20px;
}

.list-group-item.syn-title, .list-group-item.syn-title:hover {
    font-weight: bold;
    font-size: 16px;
    background-color: var(--gray-300);
    border: 0px;
    color: var(--black);
    margin-top: 20px;
}


.elsa-form-table td {
    padding: 4px;
}

.elsa-clear {
    clear:both;
}

.else-header {
    background-color: var(--table-header);
    padding: 10px;
    font-weight: bold;
    font-size: 22px;
    color: var(--white);
    border-bottom: 1px solid var(--white);
}
.else-menu {
    background-color: var(--ui-lighter-gray);
    padding: 4px 0px 4px 10px;
    border-bottom: 1px solid var(--table-border);
}
.else-menu ul li {
    float: left;
    padding: 6px 8px 6px 8px;
    border-right: 1px solid var(--gray-600);
}
.else-menu ul li a {
    color: var(--text-primary);
    text-decoration:none;
}
.elsa-container {
    padding: 10px;
}
.elsa-subtable {
    width: 100%;
}
fieldset {
    border: 1px solid var(--black);
    padding: 8px;
}
legend {
    font-weight:bold;
}
label {
    padding: 8px;
}
.pad {
    padding: 8px;
}
.field {
    border: 1px solid var(--black);
}
.elsa-hide {
    display: none;
}


.elsa-table {
    width: 700px;
    margin: 0px auto;
}
.elsa-table th {
    border: 1px solid var(--gray-600);
    background-color: var(--ui-lighter-gray);
    color: var(--text-primary);
    font-weight: bold;
    padding: 4px;
    text-align: left;
}

.elsa-table th.elsa-table-header {
    border: 1px solid var(--gray-600);
    background-color: var(--table-header);
    color: var(--white);
    font-weight: bold;
    font-size: 14px;
    padding: 4px;
    text-align: left;
}
.elsa-table td {
    border: 1px solid var(--gray-600);
    background-color: var(--white);
    color: var(--text-primary);
    padding: 4px;
}
.elsa-table td a {
    text-decoration:none;
    color: blue;
}


.elsa-table td.elsa-table-label {
    background-color: var(--ui-lighter-gray);
    width: 125px;
}
@media print
{
    .no-print, .no-print *
    {
        display: none !important;
    }
}

.syn-panel-title {
    font-size: 18px;
    color: var(--panel-title);
    font-weight: bold;
    padding: 8px 8px 8px 8px;
}
.syn-panel-title i {
    color: var(--panel-icon);
}

div.input-group-addon-samesize .input-group-addon {
    min-width: 160px;
    text-align: left;
}

.btn-row {
    width: 80%;
}

/*.btn-selector-radio {
    accent-color: var(--switch-selector);
}*/

.btn-selector {
    border: 1px solid var(--gray-600);
    border-radius: 5px 5px 5px 5px;

    width: 130px;
    height: 45px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-selected {
    background-color: var(--switch-selector);
}

.btn-selector:hover {
    background-color: var(--switch-selector-hover);
    border: 1px solid var(--white);
}

/* ========================= Components ========================= */

/* Search Result */

.searchResult {
    .title {
        font-size: 15px;
    }
    .small {
        font-size: 12px;
    }
}

/* Buttons */

.btn {
    border-radius: var(--radius);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    &.btn-sm {
        font-size: var(--btn-font-size-sm);
    }
}

/* Alerts */

.alert {
    border: none;
    border-radius: var(--radius);
    color: var(--alert-color);

    &.alert-warning {
        background-color: var(--alert-warning-bg);
    }
    &.alert-danger {
        background-color: var(--alert-danger-bg);
    }
    &.alert-success {
        background-color: var(--alert-success-bg);
    }
    &.alert-info {
        background-color: var(--alert-info-bg);
    }
}

.berekening td:first-child {
    font-size: var(--calculation-table-label-font-size);
}

/* ========================= Authentication ========================= */

:root {

    --screen-xxxl: 1600px;
    --screen-xxl: 1440px;
    --screen-xl: 1240px;
    --screen-lg: 1024px;
    --screen-md: 768px;
    --screen-sm: 480px;
    --screen-xs: 414px;
    --screen-xxs: 375px;
    --screen-xxxs: 320px;

    --app-logo-sign: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66.34 66.42"><path fill="white " d="M65.24,41.8a33.69,33.69,0,0,0,1.1-7C62,27.32,54.62,20.63,47.43,16.65A21.84,21.84,0,0,1,44.32,52C29.84,60.59,10.46,49.52.74,40.34a33.2,33.2,0,0,0,64.5,1.46Z"/><path fill="white " d="M1.1,24.62a33,33,0,0,0-1.1,7A51.62,51.62,0,0,0,18.91,49.77,21.84,21.84,0,0,1,22,14.42C36.5,5.83,55.88,16.9,65.6,26.08A33.2,33.2,0,0,0,1.1,24.62Z"/><circle fill="white  " cx="33.17" cy="33.21" r="16.92"/></svg>');
    --app-syntec-it-logo: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 67.63"><path fill="white" d="M117.61,33.77a16.32,16.32,0,0,0-4.32-3c-1.73-.84-3.76-1.7-6.1-2.56q-1.69-.59-3.09-1.14a15.8,15.8,0,0,1-2.47-1.23A6,6,0,0,1,100,24.31a3.57,3.57,0,0,1-.59-2.08,3.38,3.38,0,0,1,1.6-3.08,10.12,10.12,0,0,1,5.22-1,18,18,0,0,1,5.56.75A26.24,26.24,0,0,1,116,20.62l2.93-8A27.67,27.67,0,0,0,105.56,9.5a23.51,23.51,0,0,0-6.88.94,15.11,15.11,0,0,0-5.2,2.7,12.06,12.06,0,0,0-3.31,4.25A13.09,13.09,0,0,0,89,23a11.52,11.52,0,0,0,1.14,5.29A12,12,0,0,0,93,32a16,16,0,0,0,3.91,2.53c1.47.66,2.94,1.26,4.41,1.78a29.82,29.82,0,0,1,7.15,3.15,4.39,4.39,0,0,1,2.07,3.67,5.33,5.33,0,0,1-.32,1.89,3.34,3.34,0,0,1-1.17,1.46,6.64,6.64,0,0,1-2.24,1,15,15,0,0,1-3.54.36A24,24,0,0,1,91.06,45L88.2,53c.73.43,1.49.83,2.27,1.19a23.42,23.42,0,0,0,3.18,1.1,36.42,36.42,0,0,0,4.25.88,37.45,37.45,0,0,0,5.39.36q8.89,0,13.31-3.48T121,43.29a15.89,15.89,0,0,0-.84-5.52A10.66,10.66,0,0,0,117.61,33.77Z"/><path fill="white" d="M145.82,26.9c-.54,2-1.11,4-1.69,6s-1.18,4-1.79,5.88-1.2,3.63-1.77,5.19c-.6-1.56-1.24-3.31-1.92-5.19s-1.35-3.88-2-5.88-1.27-4-1.86-6-1.1-3.79-1.53-5.48H123a181.91,181.91,0,0,0,6.18,18.19q3.31,8.09,6.63,14.58a11.41,11.41,0,0,1-2.37,3.86,5.44,5.44,0,0,1-4,1.4,15.72,15.72,0,0,1-2.47-.2,19,19,0,0,1-2.66-.71l-1.69,7.73A20.08,20.08,0,0,0,130,67.63a16.39,16.39,0,0,0,4.78-.62,10.68,10.68,0,0,0,3.64-2,15.82,15.82,0,0,0,3-3.38,37.29,37.29,0,0,0,2.73-5q3.82-8.11,7-16.75t6.12-18.51h-10C146.82,23.11,146.36,24.9,145.82,26.9Z"/><path fill="white" d="M187.44,25a10.93,10.93,0,0,0-4.58-3.24,20,20,0,0,0-7.24-1.13,52.24,52.24,0,0,0-8.19.61,55.28,55.28,0,0,0-6.36,1.34v33h9.67V29.21c.61-.09,1.3-.14,2.08-.23a18.9,18.9,0,0,1,2.21-.09c2.25,0,3.79.64,4.61,1.94s1.24,3.51,1.24,6.63V55.58h9.67V36.31a26.71,26.71,0,0,0-.71-6.37A12.67,12.67,0,0,0,187.44,25Z"/><path fill="white" d="M216,47.87a18.27,18.27,0,0,1-3.22.29c-2.16,0-3.6-.6-4.32-1.82a9.57,9.57,0,0,1-1.07-4.87v-12H219v-8H207.37V11.35l-9.67,1.56,0,28.71a27.53,27.53,0,0,0,.61,6,11.07,11.07,0,0,0,2.18,4.65,10.25,10.25,0,0,0,4.15,3,17.26,17.26,0,0,0,6.56,1.08,23.24,23.24,0,0,0,5.26-.52,28.06,28.06,0,0,0,3.9-1.24L219,47.06A16.42,16.42,0,0,1,216,47.87Z"/><path fill="white" d="M240.3,20.51a16.24,16.24,0,0,0-6.08,1.17A15.07,15.07,0,0,0,229,25.12a16.76,16.76,0,0,0-3.67,5.64,21,21,0,0,0-1.4,8,22.25,22.25,0,0,0,1.07,7,15.05,15.05,0,0,0,3.34,5.59A15.75,15.75,0,0,0,234,55.09a21.63,21.63,0,0,0,8,1.37,34,34,0,0,0,3.63-.2c1.21-.13,2.35-.29,3.41-.49a25.81,25.81,0,0,0,2.89-.68,13,13,0,0,0,2.08-.78l-1.3-7.86a20.3,20.3,0,0,1-4.19,1.21,28.67,28.67,0,0,1-5.23.48,11.21,11.21,0,0,1-6.62-1.75,6.39,6.39,0,0,1-2.79-4.74h21.94c0-.52.07-1.12.13-1.79S256,38.58,256,38q0-8.61-4.21-13T240.3,20.51ZM233.87,35a13.51,13.51,0,0,1,.61-2.43,6.63,6.63,0,0,1,1.21-2.11A5.59,5.59,0,0,1,237.63,29a6.43,6.43,0,0,1,2.8-.55,6,6,0,0,1,2.82.58,5.91,5.91,0,0,1,1.88,1.49,6.06,6.06,0,0,1,1.11,2.08,9.74,9.74,0,0,1,.42,2.4Z"/><path fill="white" d="M284.42,47.81a23.66,23.66,0,0,1-3.76.32q-4.92,0-6.92-2.53a11.34,11.34,0,0,1-2-7.14,11,11,0,0,1,2.11-7c1.41-1.78,3.54-2.66,6.4-2.66a15.29,15.29,0,0,1,3.63.39,24.11,24.11,0,0,1,3,.91l2-7.73a25.13,25.13,0,0,0-4.41-1.4,24,24,0,0,0-5-.48,18.12,18.12,0,0,0-7.41,1.43,16.26,16.26,0,0,0-9,9.58,20.09,20.09,0,0,0-1.2,7,24.09,24.09,0,0,0,1.05,7.15,15,15,0,0,0,3.19,5.68,15.29,15.29,0,0,0,5.55,3.8,21,21,0,0,0,8,1.4,28.3,28.3,0,0,0,5.59-.52,23.14,23.14,0,0,0,4.25-1.28l-1.37-7.92A16.33,16.33,0,0,1,284.42,47.81Z"/><rect fill="white" x="318.31" y="10.57" width="4.41" height="45"/><polygon fill="white" points="329.74 10.57 329.74 14.4 344.15 14.4 344.15 55.58 348.57 55.58 348.57 14.4 363 14.4 363 10.57 329.74 10.57"/><path fill="white" d="M47.43,16.66A21.84,21.84,0,0,1,44.32,52C29.84,60.6,10.46,49.53.74,40.35a33.2,33.2,0,0,0,64.5,1.46,33.91,33.91,0,0,0,1.1-7A51.74,51.74,0,0,0,47.43,16.66Z"/><path fill="white" d="M18.91,49.78A21.84,21.84,0,0,1,22,14.43c14.5-8.59,33.88,2.48,43.6,11.66A33.2,33.2,0,0,0,1.1,24.63a32.42,32.42,0,0,0-1.1,7A51.68,51.68,0,0,0,18.91,49.78Z"/><circle fill="white" cx="33.17" cy="33.22" r="16.92"/><rect fill="white" x="296.06" y="36.2" width="12.82" height="4.41"/></svg>');
  
    --auth-logo-height: 25px;
    --auth-logo-ratio: 8;
    --auth-logo-sign-color: black;
    --auth-logo-sign-opacity: .05;
    --auth-logo-sign-size: 50%;
  
    --auth-app-name: 'Occasions';
    --auth-app-name-color: color-mix(in oklab, var(--text-color) 66%, transparent);
    --auth-app-name-size: 1.6rem;
    --auth-app-name-margin: 0 0 0 0;
    --auth-header-width: 35%;
    --auth-body-bg: var(--secondary);
    --auth-side-bg: white;
  
    --auth-input-height: 48px;
    --auth-title-size: 2.8rem;
    --auth-title-weight: 600;
    
    --auth-submit-btn-bg: var(--accent);
    --auth-submit-btn-color: white;

    --auth-alt-btn-border-color: white;
    --auth-alt-btn-color: white;
  }
  
  core-forgot-password, core-reset-password {
    flex: 1;
  }
  
  @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
  }
  
  .authentication {
    display: flex;
    width: 100%;
    height: 100svh;
    background-color: var(--auth-side-bg);
    color: white;
    
    .wrapper {
      display: flex;
      width: 100%;
      
      > * {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--space-md) calc(var(--space-lg) * 1.75);
        /* z-index: 2; */
        
        .logo {
          display: flex;
          justify-content: flex-end;
          width: 100%;
        }
        
        .text {
          color: var(--auth-app-name-color);
          font-size: var(--auth-app-name-size);
          text-align: right;
          margin: var(--auth-app-name-margin);
        }
      }
      
      .side {
        align-items: flex-end;
        width: var(--auth-header-width);
        background-color: white;
        z-index: 1;
      }
      
      .body {
        flex: 1;
        align-items: flex-start;
        background: var(--auth-body-bg);
        
        .container {
          z-index: 2;
          position: relative;
          width: 100%;
          max-width: var(--screen-xxs);
          margin: 0;
          padding: 0;
        }
      }
    }
    
    .background {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      
      &:before {
        --background-graphic-size: 300vw;
        content: '';
        background-image: var(--app-logo-sign);
        background-repeat: no-repeat;
        position: fixed;
        inset: 0;
        height: var(--background-graphic-size);
        width: var(--background-graphic-size);
        top: calc(var(--background-graphic-size) * -0.5);
        left: calc(var(--background-graphic-size) * -0.5);
        animation-name: spin;
        animation-duration: 640s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        opacity: var(--auth-logo-sign-opacity);
      }
    }
    
    .app-logo {
      background-image: var(--brand-logo);
      background-repeat: no-repeat;
      background-position: right;
      height: var(--auth-logo-height);
      width: calc(var(--auth-logo-height) * var(--auth-logo-ratio));
    }
    
    .title {
      color: white;
      font-size: var(--auth-title-size);
      font-weight: var(--auth-title-weight) !important;
      margin-bottom: var(--space-md);
    }
    
    .form-group {
      margin-bottom: var(--space-md);
      
      &.top {
        margin-bottom: 0;
        border-bottom: var(--border-color);
        
        .form-control {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          border-top-left-radius: var(--radius);
          border-top-right-radius: var(--radius);
        }
      }
      
      &.bottom .form-control {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
      }
    }
    
    .form-control {
      position: relative;
      min-height: var(--auth-input-height);
      padding-top: calc(var(--space-sm) * 1.75);
      padding-bottom: calc(var(--space-sm) * 1.75);
      border: none;
      background-color: white !important;
      box-shadow: 0 1px 4px transparentize(black, .85);
      letter-spacing: calc(var(--letters-spacing) * 2);
      
      &:focus {
        box-shadow: inset 0 1px 4px transparentize(black, .7);
      }
    }
    
    .btn {
      &.submit {
        line-height: var(--auth-input-height);
        min-height: var(--auth-input-height);
        padding-top: 0;
        padding-bottom: 0;
        font-size: calc(var(--auth-input-height) * .4);
        border-width: 0;
        background-color: var(--auth-submit-btn-bg);
        color: var(--auth-submit-btn-color);
        
        &:hover:not([disabled]) {
          opacity: .9;
        }
        
        &:active:not([disabled]) {
          opacity: 1;
        }
      }
      
      &.alt {
        border-width: 0;
        background-color: var(--auth-alt-btn-bg);
        color: var(--auth-alt-btn-color);
        
        &:hover:not([disabled]) {
          opacity: .8;
        }
      }
    }
    
    .link {
      color: white;
      font-size: 1.125rem;
    }
    
    .form-text {
      color: white;
      padding: var(--space-xs) var(--space-sm);
      background-color: var(--c-body);
      border-radius: var(--radius);
      
      &.-danger {
        background-color: var(--danger);
      }
    }
    
    .powered-by {
      display: block;
      color: white;
      z-index: 2;
      
      .logo {
        background-image: var(--app-syntec-it-logo);
        background-repeat: no-repeat;
        background-position: right;
        height: 26px !important;
        width: 140px !important;
      }
    }

    .additional-actions {
        margin-top: var(--space-lg);
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: var(--space-sm);
        .btn {
            border: 1px solid var(--auth-alt-btn-border-color);
            color: var(--auth-alt-btn-color);
            background-color: transparent;
        }
    }
    
    @media screen and (max-width: 1024px) {
      .wrapper {
        flex-direction: column;
        
        > * {
          padding: var(--space-md) calc(var(--space-lg) * 1.125);
          
          .logo {
            justify-content: center;
          }
          
          .text {
            text-align: center;
            margin-left: 0;
            margin-right: 0;
          }
        }
        
        .side {
          align-items: center;
          width: 100%;
        }
        
        .body {
          align-items: center;
          padding-top: var(--space-lg);
          padding-bottom: var(--space-lg);
          text-align: center;
        }
      }
      
      .app-logo {
        background-position: center;
        height: calc(var(--auth-logo-height) * .75);
      }
      
      .link {
        width: 100%;
        text-align: center;
      }
      
      .powered-by {
        margin: var(--space-md) 0;
        text-align: center;
        
        .logo {
          background-position: center;
        }
      }
    }
    
    @media screen and (min-width: 1024px) {
      .wrapper .side {
        padding-left: 0;
      }
      
      .powered-by {
        position: absolute;
        bottom: var(--space-md);
        right: var(--space-md);
        text-align: right;
      }
      
      .switch-environment {
        position: absolute;
        width: 100%;
      }
    }
    
  }

  body:has(.authentication) #syn-main {
    overflow: hidden !important;
}

/* --- Helpers --- */

.w-100 {
    width: 100%;
}
.privatelease-in-test-msg { margin-top: 10px; height: 100px; font-size: 20px; padding: 5px; border: 10px solid red; font-weight: bold; text-align: center; background-color: yellow; }
.privatelease-background { background:black; opacity: 0.5; z-index:1030; top:0; left:0; position:fixed; height:100%; width:100%; }
.privatelease-modal { z-index:1030; top:40px; left:calc(50% - 300px); position:fixed; width: 100%; max-width: 800px; max-height:90%; overflow-y: scroll; }
.pl_result_box { border: 1px solid #CCC; border-radius: 5px 5px 5px 5px; overflow: auto; background-color: #e3e3e3; padding: 7px; }
.pl_result_box .pl_result_amount_lbl { float: left; width: 90%; font-weight: bold; }
.pl_result_box .pl_result_amount_val { float: right; width: 10%; font-weight: bold; }
.pl_comment { float: left; font-size: 12px; padding-top: 10px; }
.pl_disclaimer { font-size: 10px; margin-top: 10px; }
.syn-loading {
    position: fixed;
    width: 100px;
    height: 100px;
    border: 4px solid #f3f3f3;
    bottom: 25px;
    right: 25px;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes highlight {
    0% {
        background: #ffff99;
    }
    100% {
        background: #e3e3e3;
    }
}
.highlight {
    animation: highlight 2s;
}