@font-face {
    font-family: 'kenteken';
    src: url(../fonts/Kenteken.ttf);
}
#licenseplate-block{
    max-width:640px;
    width:100%;
    position:relative;

}
#autotelexform .r-2x{
    border-radius:5px;
    overflow:hidden
}
.btn-lpn{
    background: #FBBC01;
    color: black;

    box-shadow: none;
    height: 56px;
    line-height: 54px;
    position: relative;
    padding-left: 45px;
    overflow:hidden;
}
.btn-lpn:after{
    border: 2px solid #2b4c9c;
    border-radius:6px;
    content:' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.btn-lpn .pre{
    background:#2b4c9c;
    background-image: url('/modules/autotelex/assets/images/kenteken.svg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:80%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 30px;
    content: ' ';
    height: 100%;

    /*
      font-family: kenteken, serif;
      font-size: 42px;
      color: #2b4c9c;
      line-height: 51px;
      display: unset;
      position: absolute;
      z-index: 1;
      left: -4px;
      top: 1px;
      font-weight:normal;
     */
}
.autotelex-result{
    width: 640px;
    max-width: 90%;
    max-height: 90%;
    margin: 0;
    padding: 20px;
}
.autotelex-result .input-danger,
.form-lpn .input-danger{
    border:1px solid red!important;
}

/* OVERLAY */
.lpn-overlay{
    background-repeat:no-repeat;
    background-position: center center;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:10;
    z-index:9999999;
    background-color: rgba( 30,30,30, 0.9);
}
.lpn-overlay-lt{
    background-repeat:no-repeat;
    background-position: center center;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:10;
    z-index:9999999;
    background-color: rgba( 255,255,255, 0.6);
}
.lpn-overlay .lpn-loading,
.lpn-overlay-lt .lpn-loading{
    color:#498CDC;
    position:absolute;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    top:50%;
    left:50%;
    margin-left:-25px;
    margin-top:-25px;
    z-index:9999999999999999999
}
.autotelex-estimation .form-group label {
    display: block;
}

.autotelex-estimation .form-group input[type=text],
.autotelex-estimation .form-group input[type=number],
.autotelex-estimation .form-group input[type=email],
.autotelex-estimation .form-group input[type=date],
.autotelex-estimation .form-group select {
    min-width: 50px;
    margin: 0;
    height: 48px;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    padding: 0 10px;
    color: #626363;
    border: 1px solid #e0e2e6;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-family: 'Roboto', sans-serif;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    background:#fff
}
.autotelex-estimation .lpn-estimation .lpn-input{
    position:relative;
    overflow:hidden;
    height:60px;
    border-radius: 4px;

}

.autotelex-estimation .lpn-estimation .lpn-input input {
    overflow:hidden;
    background-color: #FBBC01;
    border-radius: 4px;
    height: 60px;
    font-size: 35px;
    text-align: center;
    width: 100%;
    font-family: kenteken, serif;
    text-transform: uppercase;
    position: relative;
    left: 0;
    color: black;
    border: 2px solid #2b4c9c;
}

.autotelex-estimation .lpn-estimation .lpn-input .pre {
    background:#2b4c9c;
    background-image: url('/modules/autotelex/assets/images/kenteken.svg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:80%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 30px;
    content: ' ';
    height: 100%;
}

.autotelex-estimation .lpn-estimation .lpn-submit-btn {
    width: 100%;
    margin-top: 10px;
    background: #ec772d;
}

.autotelex-estimation .lpn-overview {

}

.autotelex-estimation .lpn-overview table tr {
    border-bottom: 1px solid black;
}

.autotelex-estimation .lpn-overview table tr td {
    padding: 15px;
}

.autotelex-message{
    border:2px solid #ec772d;
    border-radius:3px;
    padding:15px 15px 15px 45px;
    color:#ec772d;
    position:relative;
}
.autotelex-message:before{
    font-family: 'FontAwesome';
    content:'\f071';
    position:absolute;
    left:15px;
    top:15px
}

.autotelex-estimation {
    height: auto !important;
}
.alert {
    margin-top          : 1rem;
    position            : relative;
    border              : 1px solid transparent;
    border-top-color    : transparent;
    border-right-color  : transparent;
    border-bottom-color : transparent;
    border-left-color   : transparent;
    border-radius       : .25rem;
}

.alert-danger {
    color            : #721C24;
    background-color : #F8D7DA;
    border-color     : #F5C6CB;
}

.webshopRepairSteps .p-n {
    width: 25%;
}

.webshopRepairStep {
    position : relative;
    height: 48px;
    width: 100%;
}

.webshopRepairStep .title {
    color : #000000;
}

.webshopRepairStep .title h2 {
    font-weight  : 700;
    padding-left : 60px;
    position: absolute;
    top: 26px;
    transform: translate(0, -50%);
}

.webshopRepairStep .num {
    width                 : 48px;
    height                : 48px;
    text-align            : center;
    line-height           : 48px;
    color                 : #FFF;
    border-radius         : 100%;
    -moz-border-radius    : 100%;
    -webkit-border-radius : 100%;
    background            : #5b6974;
    position              : absolute;
    left                  : 0;
    top                   : 0px;
    font-weight           : bold;
}

.webshopRepairStep.active .num {
    background : #ED772D;
}

.webshopRepairStep .b-t {
    border-top : 1px solid #ED772D;
    top        : 25px;
    right      : 10%;
    position   : absolute;
    width      : 25%;
}

.webshopRepairStep h2 {
    font-size : 16px;
}

@media screen and (max-width: 1000px) {
    .webshopRepairSteps .title h2 {
        display: none;
    }
    .webshopRepairStep .num {
        left: 50%;
        transform: translate(-50%, 0);
    }
    .p-n.step{
        position : relative;
    }
    .webshopRepairStep:before,
    .webshopRepairStep:after {
        content: "";
        width: calc(100% - 60px);
        height: 1px;
        background-color: #8b9093;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        margin: 0 30px;
    }
    .webshopRepairStep:after{
        width: 0;
        transition: 0.7s ease;
    }
    .webshopRepairStep.active:after{
        width: calc(100% - 60px);
        background-color: #ED772D;
    }
    .p-n.step:last-child .webshopRepairStep:before{
        display: none;
    }
}


.specs-list {
    padding-left:0;
    padding-right:0
}

.specs-item {
    display        : flex;
    align-items    : center;
    flex-wrap      : wrap;
    border-bottom  : 1px solid #D5D8D9;
    padding-bottom : 1rem;
    margin-top     : 1rem;
}

.specs-list .row {
    display        : flex;
    align-items    : center;
    flex-wrap      : wrap;
    margin-left: 0;
}

.specs-item:last-child {

}

.specs-title {
    flex-basis  : 9rem;
    font-weight : bold;
    margin      : unset;
}

.specs-edit,
.specs-restart{
    margin-left : auto;
    background  : none;
    border      : none;
    padding     : 0;
    cursor      : pointer;
}

.performance input[type="radio"] {
    width  : 24px;
    height : 24px;
}

.performance input[type="radio"]:checked:before {
    line-height : 21px;
    font-size   : 18px;
}

.package-box {
    position         : relative;
    background-color : #FFFFFF;
    max-width        : 100%;
    border           : 1px solid #D5D8D9;
    padding          : 15px;
    border-radius    : 4px;
}

.extra-options {
    font-size    : 12px;
    line-height  : 1.25;
    padding-left : 4.25%;
    margin       : 0;
}

.options-table {
    display    : flex;
    flex-wrap  : wrap;
    list-style : none;
}

.option-item {
    flex : 1 0 50%;
}

.option-table {
    position : relative;
    width    : 100%;
    padding  : 5px;
}

.option-label {

}

.btn-back {
    color          : #FFF;
    display        : inline-block;
    position       : relative;
    height         : 40px;
    line-height    : 39px;
    border         : 1px solid #FFF;
    text-transform : uppercase;
    border-radius  : 6px;
    font-weight    : 400;
    font-size      : 14px;
    text-align     : right;
    z-index        : 1;
    padding-right  : 20px;
    margin         : 0 auto;
    padding-left   : 60px;
}

.btn-back:before {
    font-family           : FontAwesome;
    position              : absolute;
    width                 : 41px;
    padding               : 0;
    left                  : 0;
    z-index               : 999999;
    background            : rgba(255, 255, 255, 0.3);
    content               : "\f104";
    border-radius         : 6px 0px 0px 6px;
    -moz-border-radius    : 6px 0px 0px 6px;
    -webkit-border-radius : 6px 0px 0px 6px;
    text-align            : center;
    font-size             : 15px;
}

.textarea {
    width       : 100%;
    background  : #FFFFFF;
    border      : 1px solid #D3D3D3;
    padding     : 5px;
    font-family : 'Roboto', sans-serif;
}

.car-blueprint {
    position        : relative;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    width           : 100%;
    max-width       : 376px;

}

.c-exchange-damage__full-image {
    border   : 0 solid red;
    width    : 320px;
    height   : 435px;
    margin   : 3rem 0 0;
    padding  : 0;
    top      : 0;
    left     : 0;
    z-index  : 10;
    position : relative;
}

.c-exchange-damage__full-image div {
    position : absolute;
}

.pnlSchadeImage img:not(.damaged) {
    filter : brightness(100%) drop-shadow(0px 0px 0px #9999);
}

.pnlSchadeImage img:not(.damaged):hover {

    filter : brightness(90%) drop-shadow(2px 4px 6px #9999);

}

/*Inruilmodule stappen */

form.loading .wrap {
    opacity  : 0.6;
    filter   : grayscale(1);
    position : relative;
}
form.loading{
    position:relative;
}
form.loading:after {
    content          : '';
    position         : absolute;
    left             : 50%;
    top              : 50%;
    transform        : translate(-50%, -50%);
    width            : 50px;
    height           : 50px;
    border-left      : 5px solid #ED772D;
    border-right     : 5px solid #ED772D;
    border-top       : 5px solid #ED772D;
    border-bottom    : 5px solid #E3DFD8;
    border-radius    : 100%;
    transform-origin : 0% 0%;
    animation        : loading 0.5s linear infinite;
}

@keyframes loading {
    from {
        transform : rotateZ(0deg) translate(-50%, -50%);
    }
    to {
        transform : rotateZ(360deg) translate(-50%, -50%);
    }
}

#damage-block {
    width  : 500px !important;
    height : auto !important;
}

.webshopRepairStep.navigate-step:hover {
    cursor : pointer;
}

.webshopRepairStep.navigate-step.disabled {
    opacity : 0.5;
}

.webshopRepairStep.navigate-step.disabled:hover {
    cursor : default;
}

.invalid {
    border: 1px solid #f05075 !important;
}
.m-t {
    margin-top: 15px!important;
}

.checklist-aside {
    list-style : none;
    padding:0;
    margin:10px 0
}
.checklist-aside li{
    padding: 15px 0 5px 25px;
    position:
            relative;
}
.checklist-aside li:after{
    position:
            absolute;
    content:
            ' ';
    border-left:2px solid #a8abad;
    top: 35px;
    left: 9px;
    bottom: -17px;
}
.checklist-aside li:before{
    display:
            inline-block;
    font-family : 'FontAwesome';
    border-radius:100%;
    width: 20px;
    text-align: center;
    height: 20px;
    background:#a8abad;
    line-height: 20px;
    color: #fff;
    font-size: 10px;
    position: absolute;
    left: 0;
}
.checklist-aside li.text-green:before {
    content: '\f00c';
    background: #35C53F;
}
.checklist-aside li.text-green:after{
    border-color:#35C53F
}
.checklist-aside li:before {
    content     : '\f00d';
}
.checklist-aside li:last-child:after{
    display:none
}
/*Inruilmodule stappen eind*/
.performance input[type="radio"]:checked:before {
    line-height: 24px;
    font-size   : 18px;
    padding: 0;
    margin: 2px;
}

.p-b-sm performance input[type="radio"]:checked:before {
    content          : '';
    background-color : #ED772D;
    width            : 16px;
    height           : 16px;
    border-radius    : 100%;
    display          : block;
    margin           : -1px -1px;
}

/*Inruilmodule laatste pagina*/

table.summary {
    margin : 20px 0;
    width:100%
}

table.summary tr {
    border-bottom : 1px solid #CCD3E2;
}

table.summary td {
    padding : 25px 0 10px 0;
}

table.summary td:first-child {
    font-weight : bold;
}

table.summary tr:last-child {
    border-bottom : 0;
}

/*Inruilmodule laatste pagina eind*/

.vehicle-images-column {
    position : relative;
}


.vehicle-images-column p {
    font-weight: 500;
    white-space: nowrap;
    position: absolute;
    top: 5px;
    left: 15px;
    z-index: 1;
    background: #fb7720;
    color: white;
    font-size: 15px;
    padding: 0.5rem;
    margin: 0;
    line-height: 15px;
    border-radius: 0.25rem;
}

.vehicle-images-column small {
    font-size: 10px;
    margin: 0;
}

.img-container {
    position : relative;
    margin   : auto;
    width    : 100%;
    border-radius: 4px;
    overflow: hidden;
}


.img-container:after {
    content        : "";
    display        : block;
    padding-bottom : 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

.img-container img {
    position        : absolute; /* Take your picture out of the flow */
    top             : 0;
    bottom          : 0;
    left            : 0;
    right           : 0; /* Make the picture taking the size of it's parent */
    width           : 100%; /* This if for the object-fit */
    height          : 100%; /* This if for the object-fit */
    object-fit      : cover; /* Equivalent of the background-size: cover; of a background-image */
    object-position : center;
    transition      : 0.3s ease;
}

.img-container img:hover {
    cursor : pointer;
    filter : brightness(0.7);
}

.file-loading {
    display : none;
}

.pos-relative {
    position : relative;
}



.copy-photo-first,
.copy-photo {
    display : none;
}

.important-pictures .remove-photo {
    top: 0;
    padding: 10px 0;
    display: block;
    cursor: pointer;
}

.important-pictures > div {
    margin-bottom: 1.25rem;
}

.remove-photo {
    position  : absolute;
    top       : 25px;
    right     : 25px;
    z-index   : 2;
    font-size : 30px;
    color     : #DADADA;
}

.remove-photo i {
    pointer-events: none;
}

.base-images:not(.active) .remove-photo {
    display: none;
}

.damage-table {
    margin-top : 25px;
}

.damage-table th {
    text-align : left;
}

.damage-table th:nth-child(1) { width: 20%; }
.damage-table th:nth-child(2) { width: 20%; }
.damage-table th:nth-child(3) { width: 60%; }

.damage-table tr {
    border-bottom : 1px solid #EAEFF2;
}

.damage-table td {
    padding : 20px 0;
    position : relative;
}

.damage-table .vehicle-images-column {
    padding : 0;
}

.damage-table td .input-file-group {
    position : absolute;
    top      : 8px;
    width    : 80%;
}

.damage-table .input-file + label span, .damage-table .input-file + label strong {
    width: 50%;
}

.copy-row {
    display: none;
}

.remove-row {
    color: #ee782b;
    font-size: 22px;
}

#damage-block:hover,
#damage-block,
#damage-block *:hover,
#damage-block *{
    cursor : default !important;
}

#damage-block button:hover,
#damage-block .option-item:hover,
#damage-block .option-item label:hover {
    cursor : pointer !important;
}

.remove-row:hover {
    cursor : pointer;
}

.ucwords {
    text-transform: capitalize;
}

.flex-row {
    display: flex;
    justify-content: space-between;
}

.disabled {
    opacity : 0.5;
    cursor : default !important;
    pointer-events: none;
    filter: grayscale(1);
}

aside img {
    object-fit: cover;
    width : 100%;
    object-position: center;
    /*max-height: 250px;*/
}

.remove-height {
    margin-top: -24px;
}

.required {
    padding-left: 5px;
    color: #d20000;
    font-weight: bold;
}

.damage-error {
    color: #d20000;
    margin: -10px 0;
}

.type-detail {
    padding: 0 0 0 26px;
    margin-left: 11px;
    border-left: 1px solid #eaeff2;
}
.message{
    padding: 20px;
    border-radius: 3px;
    margin: 0 0 20px 0;
}
.message-error{
    color: white;
    background: #d20000;
}
#error-message{
    background: #d20000;
    display:none;
    color: white;
    padding: 20px;
    border-radius: 3px;
    margin: 0 0 20px 0;
}
.text-success {
    color: #28bb59;
}
.form-label h3{
    display:inline-block;
}
.row-navigate{
    border-top: 1px solid #e2e5e7;
}

/* MESSAGES */
.flash{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius:6px
}
.flash-success {
    color: #fff;
    background-color: #28bb59;
}


.flash-error{
    color:#fff;
    background-color:#ee2b51;

}

.step-page{

    position:relative;
}
.step-page .lpn-loader{
    position:absolute;
    top:50%;
    width:100px;
    height:100px;
    margin: -50px 0 0 -50px;
}

.images-buttons {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

@media (max-width: 1200px) {
    .images-buttons {
        flex-direction: column;
    }
}

.info-container a {
    color: white;
    display: flex;
    gap: 1rem;
    font-size: large;
}

.info-container .orange-circle {
    color: #1572e3;
}

.images-buttons:after,
.images-buttons:before {
    display: none;
}

.images-buttons a {
    display: block;
}

@media (max-width: 670px) {
    .step-page .p-r-none{
        padding-right:20px!important;
    }
    .step-page .p-l-none{
        padding-left:20px!important;
    }
}
button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vehicle-images-column.error .img-input {
    border: 2px solid #ec2b50;
}

.bottom-flex {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
}

.bottom-flex p {
    margin: 0;

}