.review-modal-background,
.request-modal-background,
.modal-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0, 0.6);
    z-index: 1000;
    
    pointer-events: none;
    user-select: none;
    opacity: 0;

    transition: all 0.3s ease;

}
.review-modal-background.active,
.request-modal-background.active,
.modal-background.active {
    opacity: 1;
    pointer-events: all;
    user-select: auto;

    z-index: 1050;
}
.review-modal-inner,
.modal-background-inner {
    position: relative;
    width: 100%;
    height: 100%;
}
.insurance-notice {
    font-size: 12px;
    color: #757575;
}
.review-modal,
.detailed-calc-modal,
.request-modal,
.inspection-modal,
.insurance-modal {
    position: fixed;
    background-color: white;
    border-radius: 24px;
    padding: 24px;
    width: 100%;
    min-height: 200px;
    max-width: 1024px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #333333;

    opacity: 0;
    user-select: none;
    pointer-events: none;

    transition: all 0.3s ease;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    will-change: auto !important;
    isolation: isolate;
}
.insurance-modal {
    overflow: visible !important;
    height: fit-content !important;
    max-height: fit-content !important;
    margin-top: 10vh !important;
    position: absolute !important;
}
.inspection-modal {
    height: fit-content !important;
    overflow: visible !important;
    max-height: fit-content !important;
    position: relative;
    margin-top: 10vh;
}
.modal-background {
    overflow: auto;
}
.modal-background-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.detailed-calc-modal,
.insurance-modal,
.inspection-modal {
    max-height: 90vh;
    overflow: auto;
    height: fit-content;
    scrollbar-width: thin;
}

.review-modal-background.active .review-modal.active,
.request-success-modal.active,
.modal-background.active .detailed-calc-modal.active,
.request-modal-background.active .request-modal.active,
.modal-background.active  .inspection-modal.active,
.modal-background.active  .insurance-modal.active {
    opacity: 1;
    user-select: auto;
    pointer-events: all;
    z-index: 1000;
}
.modal-background.active .detailed-calc-modal.active {
    overflow: hidden;
}




.close-review-modal,
.close-request-success-modal {
    position: absolute;
    right: 28px;
    top: 28px;
    width: 13px;
    height: 13px;
    cursor: pointer;
    user-select: none;
}
.request-success-modal-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}
.request-success-modal-info p {
    font-size: 16px;
    color: #1F1F1F;
    line-height: 140%;
    font-weight: bold;
}
.success-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-icon {
    width: 60px;
    height: 60px;
}
.request-success-modal-info small {
    font-size: 14px;
    line-height: 24px;
    color: #333333;
}
.inner-inspection, 
.outer-inspection {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.insurance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.insurance-header img {
    padding: 6px;
}
.insurance-header p {
    font-size: 20px;
    color: #1F1F1F;
    font-weight: 700;
}
.insurance-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cost-info {
    display: flex;
    gap: 6px;
}
.repair-cost {
    display: flex;
    gap: 6px;
    align-items: end;
}
.repair-cost span {
    font-size: 18px;
    color: #333333;
    font-weight: 600;
}
.accident-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
}
.insurance-totals {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 12px;
}
.accidents {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.accidents-header {
    font-size: 24px;
    color: #1F1F1F;
    font-weight: 700;
}
.accidents-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.accident-date {
    display: flex;
    gap: 6px;
    align-items: center;
}
.cost-info small,
.accident-date small {
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
}
.cost-info p,
.accident-date p {
    color: #333333;
    font-weight: 400;
}
.accident-date small {
    font-size: 16px;
    color: rgba(51, 51, 51, 1)
}
.accident-date p {
    color: rgba(31, 31, 31, 1);
    font-weight: 600;
}
.accident-row {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid #0000000f;
    border: 1px solid #282828
}
.accidents-list > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.insurance-benefit {
    display: flex;
    gap: 6px;
}
.accident-row-outer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.insurance-benefit {
    align-items: center;
}
.insurance-benefit small {
    font-size: 16px;
    color: #333333;
}
.insurance-benefit p {
    font-size: 18px;
    color: rgba(31, 31, 31, 1);
    font-weight: 600;
}
.accident-row-upper {
    background-color: #F8F8F8;
    display: flex;
    padding: 16px 20px;
    justify-content: space-between;
    align-items: center;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
.accident-row-lower {
    display: flex;
    align-items: center;
    padding: 16px;
    justify-content: space-between;
}

.notations-panel {
    padding: 16px;
    border-radius: 8px;
    background-color: #282828;
    display: flex;
    gap: 12px;
}
.notation-mark-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}
.notation-mark {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 100px;
    font-size: 12px;
}
.notation-mark.pos {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
}
/* Техосмотр */
.notation-mark.bonnet {
    left: 50%;
    top: 17%;
}
.notation-mark.front-wing.left {
    top: 19%;
    left: 18%;
}
.notation-mark.front-wing.right {
    top: 19%;
    left: 82%
}
.notation-mark.radiator-bracket {
    left: 50%;
    top: 5%;
}
.notation-mark.inner-panel.left {
    left: 38%;
    top: 20%;
}
.notation-mark.inner-panel.right {
    left: calc(100% - 38%);
    top: 20%;
}
.notation-mark.left.back-door {
    left: 18%;
    top: 62%;
}
.notation-mark.right.back-door {
    left: calc(100% - 18%);
    top: 62%;
}
.notation-mark.left.front-door {
    left: 18%;
    top: 42%;
}
.notation-mark.right.front-door {
    left: 82%;
    top: 42%;
}
.notation-mark.trunk-lid {
    left: 50%;
    top: 92%;
}
.notation-mark.back-panel {
    left: 50%;
    top: 92%;
}
.notation-mark.back-wing.left {
    left: 20%;
    top: 82%;
}
.notation-mark.back-wing.right {
    left: 80%;
    top: 82%;
}
.notation-mark.doorstep.left {
    left: 7%;
    top: 50%;
}
.notation-mark.doorstep.right {
    left: 93%;
    top: 50%;
}
.notation-mark.trunk-floor {
    top: 84%;
    left: 50%;
}
.notation-mark.rack-panel.left {
    left: 26%;
    top: 55%;
}
.notation-mark.rack-panel.right {
    left: 74%;
    top: 55%;
}
.notation-mark.front-arch.left {
    left: 15%;
    top: 21%;
}
.notation-mark.front-arch.right {
    left: 85%;
    top: 21%;
}
.notation-mark.front-side-spar.left {
    left: 38%;
    top: 20%;
}
.notation-mark.front-side-spar.right {
    left: 62%;
    top: 20%;
}
.notation-mark.back-side-spar.left {
    left: 42.48%;
    top: 84.5%
}
.notation-mark.back-side-spar.left {
    left: calc(100% - 42.48%);
    top: 84.5%
}

.x-mark {
    background-color: rgb(220, 38, 38);;
}
.w-mark {
    background-color: rgb(37, 99, 235);
}

.modal-background p {
    margin-bottom: 0px !important;
}


.insurance-info-columns,
.calculator-results-lower {
    display: flex;
    gap: 40px;
}
.insurance-info-columns > div,
.calculator-results-lower > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.calculator-results-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.calculator-results-row p {
    font-size: 18px;
    font-weight: 600;
    color: #1F1F1F;
}
.insurance-info .calculator-results-row p {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
}
.insurance-info .calculator-results-row small {
    font-weight: 400;
    text-align: right;
    font-size: 16px;
    /* color: rgb(34, 197, 94); */
    font-weight: 400;
}
.calculator-results-row small {
    font-size: 18px;
    color: #1F1F1F;
}
.calculator-results-row-divider {
    background-color: #D8D8D8;
    height: 1px;
    width: 100%;
}
.calculator-results-row-multiple {
    display: flex;
    flex-direction: column;
    gap: 9.5px;
}
.calculator-results-row-multiple .calculator-results-row p {
    font-weight: 400;
}
#inspection-html, 
#insurance-html {
    background-color: #1B1B1B;
}
#inspection-html *, 
#insurance-html * {
    color: #F9F9F9
}
.inspection-modal .insurance-info .calculator-results-row small {
    color: rgb(34, 197, 94) !important;
}
.inner-inspection > p {
    font-size: 20px;
    color: #F5F0F0;
}
.inner-inspection {
    padding: 20px;
    background-color: #282828;
    border-radius: 20px;
}
.insurance-info-columns {
    border: none !important;
}
.inspection-images-left-img, .inspection-images-right-img {
    max-width: 400px;
}
.inspection-images-left, .inspection-images-right {
    display: flex;
    align-items: center;
    width: fit-content;
    justify-content: center;
    position: relative;
}
.inspection-images {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    padding: 20px;
}
.inspection-images {
    background-color: #F9F9F9;
    border-radius: 20px;
}
.insurance-header > p {
    font-size: 32px;
    font-weight:700;
}
.outer-inspection > p {
    font-size: 24px;
    font-weight: 500;
}
.insurance-info-columns {
    background-color: #282828;
    padding: 20px;
    border-radius: 20px;
}
.insurance-info .calculator-results-row p {
    color: #9F9F9F !important
}
.insurance-notice {
    color: #808080 !important
}
.accident-row-upper {
    background-color: #282828;

}
.cost-info small,
.repair-cost small,
.insurance-benefit small,
.accident-date small {
    color: #9F9F9F !important;
}
@media (max-width: 990px) {
    .inspection-images {
        flex-direction: column;
        align-items: center;
    }
    .insurance-info-columns {
        flex-direction: column;
        gap: 16px;
    }
    .accident-row-lower {
        flex-direction: column;
        align-items: start;
    }
    .accident-row-header {
        flex-direction: column;
        align-items: start;
    }
}