*{
    margin: 0;
    padding: 0;
}

.container{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.export-controls {
    width: 65%;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.export-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
}

.export-btn:hover {
    background: #0056b3;
}

.export-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.facture-section{
    width: 65%;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #ffffffe1;
    border: 1px solid #eee;
    padding-right: 5%;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .2);
}

i{
    color: rgb(242, 164,9 );
    cursor: pointer;
    font-size: large;
    background: rgb(103, 90, 90);
    border-radius: 50%;
}
i:hover{
    font-size: larger;
}
/* ------------------------------------------------title & logo */
.title-logo{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.img {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 4%;
    margin-left: 20px;
  }
  .img img {
    max-width: 10vw;
    max-height: 10vh;
  }

 .upload label {
    color: #32c518;
    padding: 8px 10px;
    border: 1px dashed #b0adad;  }

  .upload input {
    display: none;
  }

.facture-section #title {
    max-height: 30px;
     margin-top: 15px;
    margin-right: 15px;
    font-size: 1.1rem;
    display: inline-block;
    padding: 3px 2px;
    outline: none;
    cursor: text;
    background-color: rgba(102, 172, 236, 0.102) ;
}

/* -------------------------------------------------company-info */
.company-information {
     margin-top: 8%;
     padding-left: 20px;
     padding-right: 10px;
     line-height: 1.5;
}
.company-information input{
    outline: none;
    max-width: 150px;
    width: auto;
    border: none;
    background:rgba(102, 172, 236, 0.102) ;
}

.company-information input:hover{
    background-color: rgba(22, 130, 230, 0.204);
}
.company-information span{
    display: flex;
    align-items: center;
}
#addSpan{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
input[type="text"]{
    width:100%;
    padding :5px;
    margin : 5px;
    box-sizing: border-box;
}

/* --------------------------------------client-info */
.client-information{
    padding-left: 10px;
    padding-right: 15px;
    line-height: 1.5;
    margin-bottom: 35px;
    height: 200px auto;
}

.box-client-info {
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
     margin: 8px;
}   

.box-client-info input{
    outline: none;
    max-width: 150px;
    width: auto;
    border: none;
    background:rgba(102, 172, 236, 0.102) ;
}

.box-client-info input:hover{
   background-color: rgba(22, 130, 230, 0.204);
}
.box-client-info span{
   display: flex;
   align-items: center;
}
#addSpanClient{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 5px;
}

.box-client-info .plus-client{
    display: flex;
    justify-content: right;
}

/*--------------------------------------- the dates  */
.box-date{
 width:100%;
}
@media (max-width:346px){
    .box-date{
        overflow: scroll;
       }
}

  table {
        border-collapse: collapse;
        width: calc(50% - 1px);
        margin: 35px 10px 35px 25px;
        position:relative
}

.date-table th {
    border: 1px solid #b0adad;
    height: 55px;
}

.date-table .first-child {
    background-color: #E7E6E6;
}
.date-table .first-child span{
    color: #000000;
    font-family: serif;
    font-weight: 700;
    font-size:medium;
}

.date-table .second-child{
    display: flex;
    align-items: center;
    justify-content: center;
}
.date-table .second-child input{
    max-width: 100px;
    width:auto;
    border: none;
    text-align: center;
    outline: none;
    margin-left: 10px;
    margin-right: 10px;
    background:rgba(102, 172, 236, 0.102) ;
    color: #000000;
    font-family: serif;
    font-weight: 600;
    font-size:medium;
}
.date-table .second-child i{
    position: absolute;
    right:-6px;
}

#iAddTrDate{
    position: absolute;
    margin-top: -45px;
    margin-left: 17%;
}
/*********START*******new boxes  */
.date-table .newThLeft{
    background-color: #E7E6E6;
}
.date-table .newThLeft input{
    background-color: #E7E6E6;
    text-align: center;
    border: none;
    outline: none;
    color: #000000;
    font-family: serif;
    font-weight: 700;
    font-size:medium;
}
.date-table .newThRight input{
    max-width: 600px;
    width:auto;
    background:rgba(102, 172, 236, 0.102) ;
    text-align: center;
    border: none;
    outline: none;
    color: #000000;
    font-family: serif;
    font-weight: 600;
    font-size:medium;     
}
.date-table .newThRight i{
    position: absolute;
    right:-6px;
}

/*---------------------------------------- counting table   */
.box-counting-table {
    width: 100%;
    justify-content: center;
    align-items: center;
}
@media(max-width:480px){
    .box-counting-table{
         overflow: scroll;
    }
}

.counting-table {
    text-align: center;
    width: 90%;
    margin-top: 35px;
    margin-left: 5%;
    border-collapse: collapse;
}
#topTr{
    background-color: #E7E6E6;
}

.counting-table th {
    border: 1px solid #b0adad;
    padding: 10px;
}

#leftTh {
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
#leftTh input{
    font-size: 18px;
    width: 90%;
 }

.counting-table input {
    width: auto;
    border: none;
    outline: none;
    background: rgba(102, 172, 236, 0.102);
    color: #000000;
    font-family: serif;
    font-weight: 600;
    font-size: medium;
    text-align: center;
}
.counting-table #thPrixTotal small{
    background: rgba(102, 172, 236, 0.102);
    color: #000000;
    font-family: serif;
    font-weight: 700;
    font-size: medium;
    text-align: center;
}

#thPrixUnitaire, #thPrixTotal {
    position: relative;
    align-items: center;
    justify-content: center;
}

#thPrixTotal i {
    cursor: pointer;
    position: absolute;
    right:-6px;
     top: 45%;
}

input[type="text"] {
    width: 65%;
    box-sizing: border-box;
}
input[type="number"] {
    width: 65%;
    box-sizing: border-box;
}
/*********START*******new boxes  */
#leftThNew{
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
#leftThNew input{
    font-size: 18px;
    width: 90%;
 }
#iAddTrCount{
    position: absolute;
    margin-top: -45px;
    margin-left: 40%;
}

/*---------------------------------------- devis-table    */
 .devis-section{
    width:100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
 }

 .input-devis{
    width: 35.66667%;
    height: 50px;
    border: none;
    outline: none;
    background: rgba(102, 172, 236, 0.102);
    color: #000000;
    font-family: serif;
    font-weight: 400;
    font-size: medium;
    text-align: center;}

 .devis-section .input-devis{
    height: 50px;
    width: 35%;
    margin-left: 5%;
    display: inline-block;
    border: none;
    outline: none;
    cursor: text;
    padding: 10px;
    display: flex;
    text-align: center;
    font-weight: 500;
    font-size: larger;
    background-color: rgba(102, 172, 236, .102);
 }

.devis-table{
    width: 50%;
    margin-right: 45px;
}

.devis-table th{
    border: 1px solid #b0adad;
    line-height:2.5;
    font-size: larger;
}
.devis-table  .first-child{
    background-color: #E7E6E6;
    width:50%;
}
.devis-table span{
    font-family:  serif;
    font-weight: 500;
}
.devis-table th input{
   width: 50%;
    border: none;
    outline: none;
    background: rgba(102, 172, 236, 0.102);
    color: #000000;
    font-family: serif;
    font-weight: 600;
    font-size: medium;
    text-align: center;
}
#trTtc th span{
    font-weight: 800;
    font-size: large;
}
#trTtc th small{
    font-weight: 700;
    font-size: large;
}

/* PDF Export specific styles */
@media print {
    .export-controls {
        display: none !important;
    }
    .facture-section {
        box-shadow: none;
        border: none;
    }
    i {
        display: none !important;
    }
}

.pdf-mode i {
    display: none !important;
}
.pdf-mode .upload {
    display: none !important;
}