/* styles btn show data */

.contain-print-data{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #fffb;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: transform 1s ease;
    overflow: scroll;
}
.contain-print-data.active{
    transform: scale(1);
    transition: transform 1s ease;
}

.row-btn-data{
    max-width:900px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    grid-gap: 20px;
    justify-content: center;
    align-items: center;
    overflow: scroll;

}

.btn-data{
    background: #fff;
    height: 150px;

}

.btn-data button {
    height: 150px;
    width: 150px;
    cursor: pointer;
    border: solid 1px rgba(193, 237, 245, 0.774);
    color: #fff;
    background: #7192bd;
    transition: all ease .5s;
}

.btn-data button:hover {
    background: #99bbe8 ;
    transition: all ease .5s;
}

/* ==================================interface gestion du personnel================== */
.contain-manager-personnel{
    width: 100%;
    height: 100%;
    background: #fffb;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: transform 1s ease;

}
.contain-manager-personnel.active{
    transform: scale(1);
    transition: transform 1s ease;
}
.contain-btn-data{
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
}

/* ==============================style show data============================================ */

.contain-sale-log{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #fffb;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: transform 1s ease;
    overflow: scroll;
}
.contain-sale-log.active{
    transform: scale(1);
    transition: transform 1s ease;
}

.display-data{
    background: #99bbe8;
    padding: 10px;
    /* height: 550px; */
    width: 900px;
}

.display-data table{
    width: 100%;
}


.display-data thead tr th{
   width: 105px;
   color: #fff;
   font-weight: bold;
   padding: 7px 0;
}
.display-data thead tr th:nth-child(1){
   width: 30px;
}
.display-data thead tr th:nth-child(2){
   width: 90px;
}
.display-data thead tr th:nth-child(3){
   width: 150px;
}
.display-data thead tr th:nth-child(4){
   width: 210px;
}
.display-data thead tr th:nth-child(6){
    width: 90px;
   text-align: center;
}
.display-data thead tr th:nth-child(7){
   text-align: center;
}
.display-data thead tr th:nth-child(8){
   text-align: center;
}
.display-data thead tr th:nth-child(9){
    width: 60px;
   text-align: center;
}
.display-data tbody tr td{
   width: 105px;
   border-right: 0.03px solid rgba(193, 237, 245, 0.774);
   padding: 7px 0;

}
.display-data tbody tr td:nth-child(1){
   width: 30px;
}
.display-data tbody tr td:nth-child(2){
   width: 90px;
   text-align: center;
}
.display-data tbody tr td:nth-child(3){
   width: 150px;
}
.display-data tbody tr td:nth-child(4){
   width: 210px;
}
.display-data tbody tr td:nth-child(5){
   text-align: center;
}
.display-data tbody tr td:nth-child(6){
   text-align: center;
}
.display-data tbody tr td:nth-child(7){
   text-align: center;
}
.display-data tbody tr td:nth-child(8){
   text-align: center;
}
.display-data tbody tr td:nth-child(9){
   text-align: center;
}

.display-data tbody tr{
   display: flex;
   justify-content: space-between;
   width: 100%;
   flex-wrap: nowrap;
   border-bottom: 0.03px solid rgba(193, 237, 245, 0.774);

}

.display-data thead tr{
   display: flex;
   justify-content: space-between;
   width: 100%;
   flex-wrap: nowrap;
   text-align: left;
   padding-right: 20px;
}

.display-data tbody tr:nth-child(even){
    background: #ddd;
}

.row-sale-log{
    background: #f1f1f1;
}

.display-data .contain-row-sale-slog {
    background: #fff;
    height: 300px;

}
.contain-display-sale{
    overflow-x: scroll;
    overflow-y: scroll;
    scrollbar-width: thin;
}

.groupe-select-sale{
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
}

.display-data input[type='date']{
    outline: none;
    background: transparent;
    border: none;
    padding: 7px;
}

.display-data select{
    outline: none;
    border: none;  
    background: transparent;
    padding: 7px;
}

.display-data  label{
    color: #fff;
    display: inline-block;
    font-weight: bold;
    background: #99bbe8;
    width: 90px;
    align-items: center;
    padding: 7px;
}
.display-data  label.label{
    width: 50px;
}

.groupe-select-sale-row{
    background: #fff;
    border: solid 0.8px rgba(193, 237, 245, 0.774);
    display: flex;
    align-items: center;
    justify-content: center;
}

.display-data .groupe-btn-sale button[type='submit']{
    padding: 8px;
    border: solid 0.8px rgba(193, 237, 245, 0.774);
    color: rgb(23, 127, 76);
    border-radius: 5px;
    font-weight: 900;
    cursor: pointer;
}

.display-data .groupe-btn-sale a.print{
    padding: 8px;
    border: solid 0.8px rgba(193, 237, 245, 0.774);
    color: rgb(23, 127, 76);
    border-radius: 5px;
    font-weight: 900;
    cursor: pointer;
    display: inline-block;
    background-color: rgb(240, 240, 240);
}

.display-data .groupe-btn-sale{
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.display-data fieldset{
    border: solid .8px rgba(193, 237, 245, 0.774);
    padding: 10px;
}

.display-data legend{
    color: #fff;
    padding: 0 5px;
    font-weight: bold;
}


label.label-amount{
    width: 60px !important;
    display: inline-block'
}

input.input-amount-sale-slog{
    outline: none;
    border: none;
    background: transparent;
    text-align: center;
    color: rgb(23, 127, 76);
    font-weight: 900;
}

.sum-amount{
    background: #fff;
    border:solid 0.8px rgb(157, 240, 212);
    float: right;
}

.sum-amount label{
    width: 150px !important;
}

/* ==========================journal des achat ========================= */

.contain-buy-log{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #fffb;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: transform 1s ease;
    overflow: scroll;
}
.contain-buy-log.active{
    transform: scale(1);
    transition: transform 1s ease;
}

.row-buy-log{
    background: #f1f1f1;
}

input.input-buy-sale-slog{
    outline: none;
    border: none !important;
    background: transparent;
    text-align: center;
    color: rgb(23, 127, 76);
    font-weight: 900;
}
/* print excel */
.btn-print-excel-casher{
    padding: 8px;
    border: solid 0.8px rgba(193, 237, 245, 0.774);
    color: rgb(23, 127, 76);
    border-radius: 5px;
    font-weight: 900;
    cursor: pointer;
    display: inline-block;
    background: rgb(240, 240, 240);
}

.form-print-excel{
    width: 400px;
    height: 200px;
    background: #99bbe8;
    border: #fff solid 1px;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    box-shadow: 10px 5x;
    padding: 10px;
    position: relative;
}


.form-print{
    width: 100%;
    height: 100vh;
    background: #99bbe800;
    display: none;
    position: fixed;
    top: 0;
}

.form-print.active{
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-yes-no{
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 200px;
    padding: 10px;
}

.btn-yes{
    display: inline-block;
    color: #fff;
    background: #15ca73;
    width: 70px;
    text-align: center;
    padding: 5px;
    border-color: #fff;
    font-weight: bolder;

}
.btn-no-casher{
    display: inline-block;
    color: #fff;
    background:red;
    width: 70px;
    text-align: center;
    padding: 10px;
    padding-block: 1px;
    padding-inline: 2px;
    border-width: 2px;
    padding: 3px;
    border-style: outset;
    border-color: #fff;
    border-image: initial;
    font-weight: bolder;
}

.slect-print{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;

}

.slect-print .fa-file-excel{
    font-size: 17px;
    color: rgb(23, 127, 76);
}
.slect-print .fa-file{
    font-size: 17px;
    color: rgb(235, 16, 0);
}
.slect-print i{
    display: inline-block;
    width: 100px;
}

.slect-print label{
    width: 100%;
}

.display-data{
    transform: scale(.7);
}

/* media queries */
@media screen and (max-width:500px){

    .contain-sale-log{
        width: 800px;
        height: 1000px;
        display: flex;
        background: #fffb;
        position: absolute;
        top: 0;
        transform: scale(0);
        transition: transform 1s ease;
    }       
    .contain-buy-log{
        width: 800px;
        height: 1000px;
        display: flex;
        background: #fffb;
        position: absolute;
        top: 0;
        transform: scale(0);
        transition: transform 1s ease;
    }       
    .contain-invoice-log{
        width: 800px;
        height: 1000px;
        display: flex;
        background: #fffb;
        position: absolute;
        top: 0;
        transform: scale(0);
        transition: transform 1s ease;
    }       
}


/* journal des opérations diverses */

.contain-od-slog{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #fffb;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: transform 1s ease;
    overflow: scroll;
}
.contain-od-slog.active{
    transform: scale(1);
    transition: transform 1s ease;
}