*{font-family: 'Montserrat', sans-serif;}
body {
    margin: 0;
    padding: 0;
    /* background-color: #f2f2f2; */
    background-color: #fff;
}
p{
    margin: 0;
}
span{
    font-weight: 500;
}
.bold{
    font-weight: 600;
}
.flex{
    display: flex;
}
.flex_col{
    display: flex;
    flex-direction: column;
}
.space-between{
    justify-content: space-between;
}
.none{
    display: none !important;
}
.m_0{
    margin: 0px;
}
.mb_20{
    margin-bottom: 20px !important;
}
span.line{
    background-color:#E8E8E8;
    height: 1px;
    display: block;
}
span.spacer{
    display: block;
}
span.space-20{
    height: 20px;
}
span.space-25{
    height: 25px;
}
.container {
    display: flex;
    max-width: 2000px;
    margin: auto;
}
.sidebar {
    width: 200px;
    background-color: #4CAF50;
    color: white;
    z-index: 2;
}
.sidebar-heading{
    padding: 15px 20px;
    background-color: #3e8e41;
}
.sidebar h2 {
    text-align: center;
    margin: 0;
}
.sidebar img {
    width: 30px;
}
.border-none{ /* 6/27/2024 */
    border: none !important;
}
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0px;
}
.sidebar a.active, .sidebar a:hover {
    background-color: #3e8e41;
    position: relative;
}
.sidebar a.active::after {
    content: '';
    position: absolute;
    right: 0; /* Position the triangle at the right edge */
    top: 50%; /* Place it in the middle vertically */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-right: 15px solid white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.sidebar a {
    display: block;
    padding: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.main {
    flex: 1;
    padding: 20px;
    background-color: white;
}
.main-data.col1{
    padding-left: 0;
}
.main-data.col2{ /* 6/27/2024 */
    padding-right: 0;
}
.content h1 {
    margin: 0;
    color: #3e8e41;
}
.content .heading-container{
    margin-bottom: 20px;
    align-items: baseline;
}

.content table{
    border: solid 1px #E8E8E8;
}
.content tr td, .content tr th {
    border-right: solid 1px #E8E8E8;
}
.content td a{
    color: #4CAF50;
    display: block;
    text-align: center;
}

.content .table-container {
    border: solid 1px #E8E8E8;
    padding: 30px 10px 10px 10px;
}
.content .table-tab{
    border-width: 1px 1px 0 1px;  /* top right bottom left */
    border-style: solid;
    border-color: #E8E8E8;
    display: flex;
}
.content .table-tab .decodes{
    display: none !important;
}
.pointer{
    cursor: pointer;
}
.pointer-none{
    pointer-events: none;
}
.content .table-tab span{
    padding: 15px;
    display: flex;
    align-items: center;
    font-size: 20px;
    border-right: solid 1px #E8E8E8;
    cursor: pointer;
    text-align: center;
}
.content .table-tab span.active{
    background-color: #3e8e41;
    color: white;
}

.content .table-container table {
    width: 100%;
    border-collapse: collapse;
}

.content .table-container th, .content .table-container td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #E8E8E8;
}
.content .buttons{
    display: flex;
}

.content tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

.content .button {
    padding: 8px 16px;
    text-decoration: none;
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
    margin-right: 5px;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat';
    font-weight: 600;
}
.content .button.hide{
    visibility: hidden;
}
.content .button.download{
    background-color: #3e8e41;
}
.content .button.vir, .content .regn-sticker{
    background-color: #F8AD25;
}
.content .button.theft{
    background-color: #f44336;
}
.content .button:hover {
    background-color: #3e8e41;
}

.content .paginationTable{
    height: fit-content;
}

.content .pagination-search{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.content .search-container {
    position: relative;
}
.content .search-container img {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
}
.content .search-container input {
    padding: 8px;
    padding-left: 35px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.content .pagination-bottom{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

.content .pagination {
    margin-top: 40px;
    text-align: center;
}

.content .page-indicator{
    margin-top: 20px;
}

.content .pagination a {
    padding: 5px 10px;
    text-decoration: none;
    color: black;
    margin-right: 5px;
}

.content .pagination a:hover {
    background-color: #ccc;
}

.content .pagination .active {
    background-color: #4CAF50;
    color: white;
}
.overlay{
    background: #0000001f;
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    z-index: 1;
}
.hamburger{
    display: none;
}
.close{
    display: none;
}
.vehicle-logo{
    border: solid  1px black;
    border-radius: 10px;
    width: 55px;
    height: 55px;
    display: none;
}
.vin-name p{
    font-weight: 600;
    margin: 0;
    margin-bottom: 10px;
    display: none;
}
.divider{
    width: 100%;
    border-bottom: 1px solid #E8E8E8;
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
}
/* insurance page */
.insurance-data-container{
    display: flex;
    border-bottom: 1px solid #E8E8E8;
}
.insurance-data, .insurance-claims, .stolen-data{
    width: 50%;
    padding: 20px;
}
.report-stolen-container .stolen-data{
    padding-bottom: 0px;
}
.insurance-data.col2{
    border-left: 1px solid #E8E8E8;
}
.accident_history{
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 40px;
}
.damage-data{
    display: flex;
}
.disabled{
    color: #E8E8E8 !important;
}
.disabled .input{
    color: #E8E8E8 !important;
}
.damage-data .column{
    width: 50%;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
}
.damage-data .column.col1{
    padding-left: 0px;
    padding-right: 20px;
}
.damage-data .column.col2{
    padding-left: 20px;
    padding-right: 0px;
}
.damage-data .col1{
    border-right: 1px solid #E8E8E8;
}
.damage_assessment{
    padding-top: 40px;
}
.damage-data label, .input-field{
    display: block;
}
.damage-data label{
    font-weight: 500;
    margin-bottom: 10px;
}
.input-field{
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
    border: 1px solid #CACCCF;
    padding: 10px 8px;
    width: -webkit-fill-available;
    border-radius: 5px;
}
.insurance-status-heading{
    padding-bottom: 20px;
}
textarea{
    width: -webkit-fill-available;
    padding: 10px 5px;
    border-radius: 5px;
    height: 150px;
    border: 1px solid #CACCCF;
    font-size: 14px;
    resize: none;
}
.textarea-container {
    position: relative;
    display: inline-block;
    width: 100%; /* or a specific width if needed */
}
.textarea-indicator {
    position: absolute;
    bottom: 10px; /* Positioning from the bottom */
    right: 10px; /* Positioning from the right */
    font-size: 15px;
    color: #666;
}
.status-section{
    padding-bottom: 40px;
    border-bottom: 1px solid #CACCCF;
}
.report-stolen-container .status-section{
    border-bottom: none;
    padding-top: 40px;
    padding-bottom: 0px;
}
.odometer-reading{
    padding: 40px 0px;
    border-bottom: 1px solid #CACCCF;
}
.vehicle-title-status{
    padding: 40px 0px 20px 0px;
}
.toogleContainer{
    display: flex;
    gap: 10px;
}
.indicator{
    font-weight: 600;
}
.toogleSwitch{
    display: inline-block;
    font-size: 20px;
    height: 1em;
    width: 2em;
    min-width: 40px;
    background: #030303;
    border-radius: 1em;
}
.toogleSwitch input{
    position: absolute;
    opacity: 0;
}
.toogleSwitch div{
    height: 1em;
    width: 1em;
    border-radius: 1em;
    background: #FFF;
    box-shadow: 0 .1em .3em rgba(0, 0, 0, .3);
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
}
.toogleSwitch input:checked+div{
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.insurance-claims-container{
    padding-top: 20px;
    display: flex;
}
.insurance-claims.col1{
    padding-left: 0px;
}
.insurance-claim-heading{
    padding-bottom: 20px;
}
/* Theft Check */
.vin-input-container span{
    margin-bottom: 20px;
}
.theft-data{ /* 6/27/2024 */
    width: 50%;
    padding: 0px 20px;
}
.theft-data-container .theft-data.col2{ /* 6/27/2024 */
    border-left: 1px solid #CACCCF;
}
.no_data{
    gap: 10px;
}
.theft-data-container.section1{ /* 6/27/2024 */
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 40px;
    padding-top: 20px;
}
.theft-data-container.section2{ /* 6/27/2024 */
    padding-top: 40px;
}
.vehicle-logo-container {  /* 6/27/2024 */
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
}
.vehicle-logo-container .vehicle-logo{
    display: block;
}
.spesifications-container{
    display: flex;
    gap: 10px;
}
.spesifications-container .data-container{
    margin-bottom: 18px;
}
.spesifications-container span {
    font-weight: 500;
}
.spesifications-container .col {
    width: 50%;
}
.spesifications-container .data {
    display: block;
}
.spesifications-container .data.header {
    color: #ABABAB;
    margin-bottom: 8px;
}
.customCol{
    width: 100% !important;
    max-width: 820px;
}
.stolen_date .form{
    gap: 10px;
    display: flex;
    align-items: center;
}
.stolen_date .input-field{
    width: 100%;
    max-width: 100px;
    text-align: center;
    margin: 0;
}
.police-report{
    padding: 40px 0px;
}
.attatch-police-report.disabled{
    display: none;
}
.big-btn{
    background: #3e8e41;
    color: white;
    border: none;
    outline: none;
    padding: 15px 10px;
    border-radius: 5px;
    width: 100%;
    max-width: 300px;
    cursor: pointer;
    transition: all 300ms;
}
.big-btn:hover{
    background: #327e35;
}
.big-btn.center{
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.vin-input-container .big-btn{
    margin-top: 20px;
    margin-bottom: 20px;
}
.vin-input-container .no_data{
    min-height: 40px;
    align-items: center;
    border: solid 1px #008751;
    padding: 15px 20px;
    justify-content: center;
    text-align: center;
}
.stolen_status{
    border-bottom: 1px solid #E8E8E8;
    padding-top: 40px;
    padding-bottom: 40px;
}
.stolen_status{
    border-bottom: 1px solid #E8E8E8;
    padding-top: 40px;
    padding-bottom: 40px;
}
.report-stolen-container .col1{
    border-right: 1px solid #E8E8E8;
}
.image-status{
    padding-top: 40px;
    padding-bottom: 20px;
}
.attatch-image img{
    width: 100%;
    max-width: 550px;
    margin-top: 10px;
    margin-bottom: 15px;
    display: block;
}
/* dropdown */
.custom-dropdown img.arrow{
    height: auto;
    width: 11px;;
}
.custom-dropdown {
    position: relative;
    display: inline-block;
    width: -webkit-fill-available;
}

.dropdown-selected {
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.logo-text {
    display: flex;
    gap: 10px;
}

.dropdown-options {
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 1;
    width: -webkit-fill-available;
    border-radius: 5px;
}
.dropdown-options.show {
    display: block;
}

.dropdown-options div {
    padding: 10px;
    cursor: pointer;
}

.dropdown-options div:hover {
    background-color: #f1f1f1;
}

.dropdown-options img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 10px;
}
.custom-dropdown .dropdown-selected{
    width: -webkit-fill-available;
}
.custom-dropdown img {
    height: 16px;
    width: auto;
}
@media only screen and (max-width: 767px) {
    .container{
        flex-direction: column;
    }
    .sidebar{
        display: none;
        position: fixed;
        width: 75%;
        height: 100vh;
    }
    .sidebar.active, .overlay.active, .sidebar.active .close{
        display: flex;
        flex-direction: column;
    }
    .sidebar-heading{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .hamburger{
        display: block;
    }
    .sidebar li img{
        display: none;
    }
    .heading-container{
        display: flex;
        gap: 10px;
    }
    .sidebar h2{
        text-align: left;
        background-color: inherit;
    }
    .sidebar a{
        align-items: flex-start;
    }
    .sidebar li{
        border-top: 2px solid #3e8e41;
    }
    .content .paginationTable{
        display: none;
    }
    .content .search-container, .content .search-container input {
        width: -webkit-fill-available;
    }
    .content thead,
    .content tr td:first-child,
    .content tr td:last-child{
        display: none !important;
    }
    .content tbody{
        display: flex;
        flex-direction: column-reverse;
        gap: 15px;
    }
    .content tr{
        display: flex;
        flex-direction: column-reverse;
    }
    .content table {
        border: none;
    }
    .content tr td{
        border: none !important;
        flex-wrap: wrap;
        column-gap: 10px;
        row-gap: 10px;
        justify-content: center;
    }
    .content table .content .button{
        width: calc(50% - 10px);
        padding: 15px 5px;
    }
    .content tbody tr {
        background-color: #ffff !important;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.19);
        border-radius: 4px;
        padding: 10px 0px;
    }
    .content .button{
        padding: 10px 5px;
        width: calc(50% - 10px);
        margin: 0;
        min-height: 52px;
    }
    .content .button.hide{
        display: none;
    }
    .content .pagination-bottom{
        flex-direction: column;
    }
    .vehicle-logo, .vin-name p{
        display: block;
    }
    .vin-name-container{
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .content .table-tab span{
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }
    .content .table-tab .decodes{
        display: flex !important;
    }

    /* Insurenec */
    .insurance-data {
        padding-left: 0;
        padding-right: 0;
    }
    .insurance-data, .insurance-claims, .theft-data{ /* 6/27/2024 */
        width: -webkit-fill-available;
    }
    .insurance-data-container, .theft-data-container, .report-stolen-container{
        flex-direction: column;
    }
    .damage_assessment{
        padding-bottom: 30px;
        border-bottom: 1px solid #E8E8E8;
    }
    .damage-data{
        gap: 10px;
    }
    .insurance-data.col2, .damage-data .col1{
        border: none;
    }
    .damage-data .column{
        width: -webkit-fill-available;
        padding: 10px 0px !important;
    }
    .insurance-claims-container{
        flex-direction:column ;
    }
    .insurance-claims{
        padding-left: 0px;
        padding-right: 0px;
    }
    .insurance-claims.attatch-image.col2{
        padding-top: 0;
    }
    /* Report Stolen */
    .police-report, .check-theft{ /* 7/2/2024 */
        text-align: center;
    }
    .stolen_date .form{
        gap: 5px;
    }
    .stolen-data {
        padding-left: 0;
        padding-right: 0;
    }
    .stolen-data{
        width: -webkit-fill-available;
    }
    .stolen-data.col1{
        border: none;
    }
    .border-none-mobile{ /* 6/27/2024 */
        border: none !important;
    }
    .padding-none-mobile{ /* 6/27/2024 */
        padding: 0 !important;
    }
    .attatch-image{ /* 7/2/2024 */
        text-align: center;
    }
    .attatch-image img{
        margin-left: auto;
        margin-right: auto;
    }
    .theft-data-container.section2 .theft-data.main-data.col2{ /* 6/27/2024 */
        padding-left: 0px;
        padding-top: 20px;
    }
}
@media only screen and (max-width: 380px) {
    .damage-data{
        flex-direction: column;
    }
    .heading-toogle{
        flex-direction: column;
        gap: 20px;
    }
    .vin-name a{
        font-size: 14px;
    }
}