* {
    padding: 0;
    margin: 0;
    font-family: inter, sans-serif;
}
/* body{
    background-color: #001619;
} */

.container-fluid {
    /* max-width: 1440px !important; */
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: hidden;
    /* background-color: rgb(201, 222, 241); */
}
header{
    background-color: #FF8A00;
    padding: 5px 0;
}
.header-inner{
    display: flex;
    justify-content: center;
    .logo-wrapper{
     
        width: 250px;
        height: 45px;
        & img{
          width: 100%;
          height: 100%;
        }
    }
}

main {
    /* max-width: 1440px !important; */
    margin: 0 auto;
     /* background-color: #001619; */
    /* height: 100vh; */

    .tabs-holder {
        /* background-color: aliceblue; */
    /* height: calc(100vh - 126px)  !important; */
    flex-direction: row !important;
    background: #c5641e;
    /* gap: 10px; */
    & button{
        /* background-color: red; */
        background: #c5641e;
        padding: 10px 15px !important;
        color: #fff !important;
        &:hover{
            background: #de813e;
        }
    }
    & button.active{
        background: #de813e !important;
    }

    }

    .nav-link-btn {
        /* border-bottom: 3px solid black !important; */
        padding: 5px 0 !important;
    }

    .header-line {

background-color: #9e4a0c;
    }

    .grand-demages {
        background-color: #c5641e;
        padding: 6px 10px;
        border-radius: 6px;
        & span{
            font-size: 14px;
            & input{
                max-width: 120px;
                width: 100%;
            }
        }

    }

    .total-cost {
        background-color: #c5641e;
        padding: 6px 10px;
        border-radius: 6px;
        & span{
            font-size: 14px;
            & input{
                max-width: 120px;
                width: 100%;
            }
        }

    }

    .tab-name-wrapper {
        & strong {
            font-size: 22px;
        }
    }

    .table-data {

        table,
        th,
        td {
            /* border: 1px solid black; */
            border-collapse: collapse;
        }

        /* th,
        td {
            padding: 10px;
            text-align: left;
        } */

    }

    .damage-heading {
        text-align: center !important;
    }

    .tabs-content-holder {

        padding: 20px !important;
    }

   
    .data-table {
        background-color: white;

        & input {
            /* border: none; */
            border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        }

        &:focus-visible {
            outline: none;
        }
        
        /* Set specific widths for "Cost", "Qty", and "Total Cost" */
        td input[name^="cost"],
        td input[name^="totalCost"],
        td input[name^="qty"] {
            width: 100%;
            text-align: center;
            background: #0000;
            border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
            /* Align text to the right for better readability */
        }

        /* Reduce width of columns */
        th:nth-child(2),
        td:nth-child(2)
         {
            width: 75px ;
        }
        td:nth-child(4),
        td:nth-child(4)
         {
            width: 75px !important;
        }
        th:nth-child(3),
        td:nth-child(3){
width: 75px !important;
        }
    }

    .tabs-content-holder {
        height: calc(100vh - 127px);
        overflow-y: scroll;
    }

.dmg-name{
    padding: 0 5px;
}
tr{
 & th{
    padding: 0  5px;

 }
   }
}


.nav-pills .nav-link{
    border-radius: 0 !important;
    font-size: 14px !important;

}

/* .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: #1e3d40 !important;
} */
main {
    .table-data {
        border-radius: 16px;
        padding: 8px;

        &:hover{
            box-shadow: 0 0 30px 10px rgba(222,129,62,0.3);
            /* background-color: rgb(222, 129, 62); */
        }
        table, th, td {
         
            font-size: 12px !important;
        }
    }
}
/* COL EQUAL HEIGHT */
.equal-height-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 15px; /* space between columns */
    row-gap: 15px !important;
}

.table-data {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure the table takes up the full column height */
}

.table-data table {
    flex-grow: 1; /* Make sure table expands */
}
& tr{
height: 10px !important;
}
.equal-height-grid {
    row-gap: 0;
}
& input{
   &:focus-visible{
    outline: none;
   }
}
.active-tab-over-view {
    .data-table {
       
        /* Reduce width of columns */
        th:nth-child(2),
        td:nth-child(2)
         {
            width: 80px;
        }
      
    }
}
/* 

    width: 100%;
    display: flex; */


    .table-striped>tbody>tr:nth-of-type(odd)>* {
        --bs-table-color-type: var(--bs-table-striped-color);
        --bs-table-bg-type: rgba(222, 129, 62, 0.05) !important;
    }

    ::-webkit-scrollbar {
        width: 6px;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
        border-radius: 10px;
      }
       
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: #9e4a0c; 
        border-radius: 10px;
      }
      
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: #9e4a0cc9; 
      }

      #v-pills-15 .active-tab-over-view{
        display: none !important;
      }

      .w-40{
        width: 40% !important;
      }