@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

.profile-dropdown {
    cursor: pointer;
}

body, input, textarea, select,
.theme-form .form-control, .theme-form select {
    font-family: "Outfit", "Cairo", sans-serif;
}

.opacity50 {
    opacity: .5;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px !important;
}

.select2-container--default .select2-selection--single {
    border: 0 solid #000 !important;
    background-color: #f4f5f8 !important;
}

.expert-list-table .green {
    background-color: rgba(23, 166, 0, 0.3) !important
}

.expert-list-table .red {
    background-color: rgba(255, 0, 0, 0.3) !important;
}

.expert-list-table .orange {
    background-color: rgba(240, 173, 78, 0.3) !important
}

[data-action="updateAccidentStatus"] {
    min-width: 200px;
}

.btn {
    transition: .8s all ease;
    position: relative;
}
.toast-header {
    direction:ltr!important;;
}

.nav-tabs, .car_damage_nav {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}


.car_damage_nav .nav-link,
.nav-tabs .nav-link {
    border-top: 1px solid var(--solid-border);
}
.car_damage_nav .nav-link.active,
.nav-tabs .nav-link.active {
    border-top: 1px solid var(--solid-border);
}

.car_damage_nav .nav-link {
    background: #17a6008c;
    color: #fff;
}
 .car_damage_nav .nav-link.active{
    background: #17a600;
    color: #fff;
}
.car_damage_nav .nav-item:nth-child(1) .nav-link{
    background:rgb(181 0 0 / 33%)
}.car_damage_nav .nav-item:nth-child(2) .nav-link{
    background:rgb(0 155 181 / 50%)
}
.car_damage_nav .nav-item:nth-child(1) .nav-link.active{
    background:rgb(181 0 0 / 100%);
    text-decoration:underline;
}.car_damage_nav .nav-item:nth-child(2) .nav-link.active{
    background:rgb(0 155 181);
     text-decoration:underline;
}
.red-highlight {
    border: 2px solid rgb(204, 0, 0);
}

.car_diagrams {
    padding-top: 30px;
}

.car_diagram {
    position: relative;
    text-align: center;
    width: 435px;
}

.car_diagram span {
    cursor: pointer;
    background: rgb(181 0 0 / 38%);
    color: #fff;
    padding: 10px 4px;
    transition: .5s ease;
    font-size: 11px;
}

.car_diagram.car_diagram_glass span {
    background: rgb(0 155 181 / 38%);
}

.car_diagram span.selected {
    background: rgb(181 0 0 / 100%);
    opacity: 1 !important;
}

.car_diagram.car_diagram_glass span.selected {
    background: rgb(0 155 181 / 100%);
    opacity: 1 !important;
}

.car_diagram .damages-container {
    max-width: 345px;
    position: relative;
}

.car_diagram img {
    width: 280px;
}

.car_diagram [data-area]{
    position: absolute;
}
.car_diagram [data-area="fls"],
.car_diagram [data-area="frs"] {
    position: absolute;
    /* width: 20px; */
    /* height: 50px; */
    top: 44px;
}

.car_diagram [data-area="fls"] {
    left: 57px;
}

.car_diagram [data-area="frs"] {
    right: 57px;
}

.car_diagram [data-area="rls"],
.car_diagram [data-area="rrs"] {
    position: absolute;
    /* width: 20px; */
    /* height: 50px; */
    top: 216px;
}




/*left.right headlight*/
.car_diagram [data-area="gfr"] ,
.car_diagram [data-area="gfl"]
{
    top:1px;
    left: 225px;
}
.car_diagram [data-area="gfl"]
{
    left: 80px;
}


/*front left.right signal*/
.car_diagram [data-area="gfls"] ,
.car_diagram [data-area="gfrs"]
{
    top:44px;
    left: 240px;
}
.car_diagram [data-area="gfls"]
{
    left: 80px;
}

/*left right signal*/
.car_diagram [data-area="gls"] ,
.car_diagram [data-area="grs"]
{
    top:300px;
    left: 57px;
}
.car_diagram [data-area="gls"]{
    left:120px;
}

/*right left headlight*/
.car_diagram [data-area="grh"] ,
.car_diagram [data-area="glh"]
{
    top:44px;
    left: 57px;
}
/*rear left stop*/
.car_diagram [data-area="grls"] ,
.car_diagram [data-area="grrs"]
{
    left: 80px;
    top:280px
}
.car_diagram [data-area="grrs"] {
    left:230px;
}






.car_diagram [data-area="rls"] {
    left: 57px;
}

.car_diagram [data-area="rrs"] {
    right: 48px;
}

.car_diagram [data-area="ml"],
.car_diagram [data-area="mr"] {
    position: absolute;
    top: 90px;
}

.car_diagram [data-area="ml"] {
    left: 35px;
}

.car_diagram [data-area="mr"] {
    right: 30px;
}

.rtl .car_diagram [data-area="ml"] {
    left: 47px;
}

.rtl .car_diagram [data-area="mr"] {
    right: 43px;
}

.car_diagram [data-area="fl"] {
    position: absolute;
    left: 40px;
    top: -4px;
}

.car_diagram [data-area="gf"],
.car_diagram [data-area="fc"] {
    position: absolute;
    left: 142px;
    top: -20px;
}
.car_diagram [data-area="fhood"] {
    position: absolute;
    left: 140px;
    top: 30px;
}

.car_diagram [data-area="fr"] {
    position: absolute;
    left: 220px;
    top: -5px;
}

.car_diagram [data-area="glf"],
.car_diagram [data-area="lf"] {
    top: 128px;
    position: absolute;
    left: 50px;
}


.car_diagram [data-area="glb"],
.car_diagram [data-area="lb"] {
    top: 172px;
    position: absolute;
    left: 50px;
}

.car_diagram [data-area="lf"] ,
.car_diagram [data-area="lb"] {
    left:23px;
}
.car_diagram [data-area="grf"],
.car_diagram [data-area="rf"] {
    top: 130px;
    position: absolute;
    left: 259px;
}


.car_diagram [data-area="grb"],
.car_diagram [data-area="rb"] {
    top: 174px;
    position: absolute;
    left: 260px;
}

.car_diagram [data-area="gt"],
.car_diagram [data-area="t"] {
    position: absolute;
    left: 142px;
    top: 103px;
}

.car_diagram [data-area="bl"] {
    position: absolute;
    top: 271px;
    left: 3px;
}


.car_diagram [data-area="bc"] {
    position: absolute;
    top: 290px;
    left: 149px;
}
.car_diagram [data-area="btrunk"] {
    position: absolute;
    top: 240px;
    left: 140px;
}
.car_diagram [data-area="gb"]{
    position: absolute;
    top: 220px;
    left: 149px;
}

.car_diagram [data-area="br"] {
    position: absolute;
    top: 271px;
    left: 257px;
}


.theme-form input[type=text], .theme-form input[type=email], .theme-form input[type=search],
.theme-form input[type=password], .theme-form input[type=number], .theme-form input[type=tel],
.theme-form input[type=date], .theme-form input[type=datetime-local], .theme-form input[type=time],
.theme-form input[type=datetime-local], .theme-form input[type=month], .theme-form input[type=week],
.theme-form input[type=url], .theme-form input[type=file], .theme-form textarea, .theme-form select{
    color:#000;
}

.fullReportAccordion h3, .fullReportAccordion .h3 {
    color: #43b9b2;
}

html[lang="en"] {

    .car_diagram [data-area="fl"] {
        position: absolute;
        left: 59px;
        top: -4px;
    }

    .car_diagram [data-area="gf"],
    .car_diagram [data-area="fc"] {
        position: absolute;
        left: 137px;
        top: -20px;
    }

    .car_diagram [data-area="fr"] {
        position: absolute;
        left: 225px;
        top: -5px;
    }

    .car_diagram [data-area="glf"],
    .car_diagram [data-area="lf"] {
        top: 130px;
        position: absolute;
        left: 33px;
    }


    .car_diagram [data-area="glb"],
    .car_diagram [data-area="lb"] {
        top: 172px;
        position: absolute;
        left: 36px;
    }

    .car_diagram [data-area="grf"],
    .car_diagram [data-area="rf"] {
        top: 130px;
        position: absolute;
        left: 259px;
    }


    .car_diagram [data-area="grb"],
    .car_diagram [data-area="rb"] {
        top: 174px;
        position: absolute;
        left: 260px;
    }

    .car_diagram [data-area="bl"] {
        position: absolute;
        top: 271px;
        left: 39px;
    }

    .car_diagram [data-area="gb"],
    .car_diagram [data-area="bc"] {
        position: absolute;
        top: 327px;
        left: 142px;
    }

    .car_diagram [data-area="br"] {
        position: absolute;
        top: 271px;
        left: 257px;
    }


}

.uppy-Dashboard-AddFiles-title button{
    background-color:#2E8DD3;
    border-radius: 5px;
    padding:6px 20px;
    color:#fff;
    text-decoration: none!important;
}
.uppy-Dashboard-Item-preview{
    width:100px!important;
    height:100px!important;
}
#car_body span {
    /*display: none;*/
    opacity: .5;
}

#car_glass span {
    /*display: none;*/
    opacity: .5;
}


#step3 label {
    font-weight: bold;
    font-size: 16px;
}


#step3 label {
    font-size:20px;
}
.expert-link-form textarea{
    font-size:18px!important;
}
.view-accident label {
    font-weight: bold;
    font-size: 16px;
    display: block;
}

.team-table {
    max-height: 450px;
    height: 445px;
    overflow: auto;
}

.kanban-board {
    margin-left: 0;
    margin-right: 0;
}

[data-action="log-expert-response"] {
    cursor: pointer;
}

#editor_container {
    padding: 20px;
}

#editor_assets {
    white-space: nowrap;
}

#editor_assets .tab-pane {
    overflow: auto;
    min-height: 65px;
}

#editor_assets img {
    display: inline-block;
    max-width: 40px;
    max-height: 60px;
}


.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #2cb05a;
}

.accordion i {
    margin: 0 10px;
}

#editor {
    height: 400px;
    width: 100%;
}

[x-cloak] {
    display: none !important;
}

#insurance_company_form .fa-trash {
    color: #fff;
}

#insurance_company_form #company_1 button[data-action="delete-company"] {
    display: none !important;
}

#vehicle_form #vehicle_1 button[data-action="delete-vehicle"] {
    display: none !important;
}

#people_form #person_1 button[data-action="delete-person"] {
    display: none !important;
}

button[data-action="delete-company"],
button[data-action="delete-person"],
button[data-action="delete-vehicle"] {
    padding: 5px;
}

.vehicle-form .card-header h3 {
    font-weight: bold;
}

.vehicle-form .form-label {
    margin-bottom: 0;
}

.vehicle-form .card-header {
    padding-bottom: 0;
    padding-top: 15px;
}

.fullReportAccordion .card-body {
    padding-top: 5px;
}

.fullReportAccordion input,
.fullReportAccordion select {
    padding: 8px 10px !important;
}


.krajee-default .file-upload-indicator .bi-plus-lg {
    display: none;
}

a:not(.sidebar-link) {
    /*    text-decoration: underline;*/
}

#step1 {
    width: 100% !important;
}

.switch-state {
    background-color: #000;
}
.switch-state:before {
    background-color: #4CAF50;
}

.krajee-default .file-footer-buttons {
    /*display: none;*/
}
.kv-fileinput-caption {
    display:none;
}

.sticky-header {
    position: sticky;
    top: 55px;
    z-index: 10;
    background: white;
    padding: 10px 5px;
    border-bottom: 0;
    color:#2cb05a;
    font-weight: bold;
}
.hidden-selected-value {
    height: 0;
    overflow: hidden;
    font-size: 0;
    color: transparent;
}

@media (max-width: 767px) {

    .file-caption.icon-visible .file-caption-name {
        flex: 1 1 100%;
    }

    .file-caption-icon {
        display: none !important;
    }

    .car_diagram {
        width: initial;
    }

    .file-preview-thumbnails {
        flex-direction: row !important;
        flex-wrap: wrap;
    }

    .krajee-default.file-preview-frame {
        max-width: 40%;
    }

    .krajee-default.file-preview-frame .kv-file-content {
        width: auto !important;
    }


    .krajee-default .file-caption-info {
        white-space: pre-wrap !important;
        max-width: 100% !important;
    }
}

.dropzone .dz-preview {
    margin: 28px 6px !important;
}


.voicenotes .main-controls {
    padding: 0.5rem 0;
}

.voicenotes canvas {
    border-radius: 10px;
    display: block;
    margin-bottom: 0.5rem;
}

.voicenotes #buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.voicenotes #buttons .record {
    background: #1a831a !important;
}

.voicenotes #buttons .stop {
    background: #a71f1f !important;
}

.voicenotes #buttons button {
    font-size: 1rem;
    padding: 1rem;
    width: 100px
}


.voicenotes button {
    font-size: 1rem;
    background: #0088cc;
    text-align: center;
    color: white;
    border: none;
    transition: all 0.2s;
    padding: 0.5rem;
    margin: 0 10px;
}

.voicenotes button:hover,
.voicenotes button:focus {
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 1);
    background: #0ae;
}

.voicenotes button:active {
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5);
    transform: translateY(2px);
}

/* Make the clips use as much space as possible, and
 * also show a scrollbar when there are too many clips to show
 * in the available space */
.voicenotes .sound-clips {
    flex: 1;
    overflow: auto;
}

.voicenotes .clip {
    padding-bottom: 1rem;
}

.voicenotes audio {
    width: 100%;
    display: block;
    margin: 1rem auto 0.5rem;
}

.voicenotes .clip p {
    display: inline-block;
    font-size: 1rem;
}

.voicenotes .clip button {
    font-size: 1rem;
    float: right;
}

.voicenotes button.delete {
    background: #f00;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}


/* Checkbox hack to control information box display */


.voicenotes input[type="checkbox"] {
    position: absolute;
    top: -100px;
}

.voicenotes aside {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: 0.3s all ease-out;
    background-color: #efefef;
    padding: 1rem;
}

.voicenotes aside p {
    font-size: 1.2rem;
    margin: 0.5rem 0;
}

.voicenotes aside a {
    color: #666;
}

/* Toggled State of information box */
.voicenotes input[type="checkbox"]:checked ~ aside {
    transform: translateX(0);
}

/* Cursor when clip name is clicked over */

.voicenotes .clip p {
    cursor: pointer;
}

.landing-menu  {

}
.landing-menu  a {
    position: relative;
    display:flex;
    background-color: #52beb8;
    color: #fff;
    width:150px;
    height: 150px;
    margin: 20px;
    border-radius: 50%;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.landing-menu  a small{
    background: #fff;
    color:#000;
    padding:0 5px;
    display:inline-block;
    border-radius: 50%;
}
.landing-menu  a i {
    display: block;
    font-size: 72px;
}
.pac-container, .pac-container *{
    direction: ltr;
}
#detailed_report_edit_buttons{
    position: fixed;
    bottom:0;
    z-index:9;
}
.modal-footer {
    padding-left:5px;
    padding-right:5px;
}
.modal-footer .btn {
    font-size:11px;
}

html[dir=rtl]  #detailed_report_edit_buttons{
    width: 100%;
    right: 0;
}
html[dir=rtl] input{
    text-align: right;
}

.tooltip.show{
    direction:ltr;
}
.tooltip-inner {
    text-align: left !important;
    white-space: pre-line; /* keeps \n or nl2br() breaks */
}

.rtl .accordion-header i{
    order:-1;
}
 textarea {
    border: 1px solid #ccc!important;
}

 .redborder{
     border:1px solid red!important;
 }

.loader-02 {
    border: .2em solid transparent;
    border-left-color: #666666;
    border-right-color: #666;
    border-radius: 50%;
    animation: 1s loader-02 linear infinite;
}
.image-box {
    display: inline-block;
    position: relative;
}
.rotate-image-btn ,
.delete-image-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    background: rgba(0,0,0,0.2);
    border: none;
    color: red;
    font-size: 20px;
    cursor: pointer;
}
.rotate-image-btn {
    color:#00d9ff;
    right:30px;
}

table .btn {
    margin-bottom:2px;
}
table i {
    padding:5px;
}
.rtl table .btn-danger{
    float:left;
}
 table .btn-danger{
    float:right;
}
input[name="vehicles[private_insurance][policy_no][]"],
input[name="vehicles[mandatory_insurance][policy_no][]"] {
    direction: ltr;
    text-align: right; /* Optional: ensures text aligns on the left */
}
.forceltr {
    direction:ltr!important;
}
.page-break-after {
    page-break-after: always;
}
@media screen {
    .print-only {
        display: none !important;
    }
}

@media print {
    .print-only {
        display: block !important;
    }
    table td {
        padding:15px;
    }
}

@keyframes loader-02 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media print {
    #printPreviewModal,
    #printPreviewModal * {
        display: none !important;
    }
}
@media (min-width: 768px) {
    #new-accident-save-footer {
        position:fixed;

        bottom: 0;
        left: 0;
        padding-bottom: 15px;
    }
    html[lang="en"] #new-accident-save-footer {
        left: initial;
        right: 0;
    }
}

@media screen AND (max-width: 768px) {
    .fullReportAccordion .accordion-body {
        padding: 7px;
    }

    .fullReportAccordion .card {
        padding: 6px;
        margin-bottom: 5px !important;
    }

    .fullReportAccordion .card-header,
    .fullReportAccordion .card-body {
        padding: 4px;
    }
    #detailed_report_edit_buttons .btn{ font-size:13px;}

    #uppy {
        width: 250px !important;
        max-width: 70%;
        height: auto;
    }
    .landing-menu a small,
    .landing-menu  a span{
        font-weight:bold;
    }
    .landing-menu  a {
        width:120px;
        height: 120px;
    }
    .landing-menu a i {
        font-size:60px;
    }

    .rtl .page-header .logo-wrapper .close-btn .toggle-sidebar.close{
        /*transform:rotate(-90deg)*/
    }


}