/*------------------------------------*/
.card{
    box-shadow: 5px 5px 4px #e3e5e9;
    margin-top: 2%;
    
}
body{
    padding:0;
    background-color: #f4f6f8;
}
#table_wrapper{
    margin-top:1%;
}
.dataTables_filter{
    width: fit-content;
    height: fit-content;
    position: relative;
    margin-top: 6px;
    float: left;
}

.dataTables_filter input{
    height: 35px;
    box-shadow: 3px 3px 10px #dfd9d9;
    width: 40px;
    border: none;
    padding: 10px;
    font-size: 18px;
    letter-spacing: 2px;
    outline: none;
    border-radius: 25px;
    transition: all .5s ease-in-out;
    padding-right: 40px;
    color:#fff;
}
.dataTables_filter input::placeholder{
    color:rgba(255,255,255,.5);
    font-size: 18px;
    letter-spacing: 6px;
    font-weight: 100;
}
.btn-search{
    width: 50px;
    height: 35px;
    border-style: none;
    font-size: 20px;
    font-weight: bold;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    /* color:#f9b71f; */
    background-color:transparent;
    pointer-events: painted;
}
.btn-search:focus ~ .dataTables_filter input{
    width: 300px;
    border-radius: 0px;
    background-color: transparent;
    border-bottom:1px solid rgba(255,255,255,.5);
    transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}
.dataTables_filter input:focus{
    width: 300px;
    border-radius: 0px;
    background-color: transparent;
    border-bottom:1px solid rgba(255,255,255,.5);
    transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}
div.dataTables_wrapper div.dataTables_info{
    padding-top: 0 !important;
}
.dataTables_length{
    width: fit-content;
    height: fit-content;
    position: relative;
    z-index: 3;
    
    float: right;
    margin-left: 1%;
}
.dataTables_length{
    position: relative;
    font-family: Arial;

}
.dataTables_length select {
    height: 50px;
    border: none;
    width: 60%;
    border-radius: 29%;
    background-color: #F0F2F5;
}
.select-selected:after {
    display: none;
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}
.dt-buttons{
    margin-right: 1.5%;
}
.dt-buttons button:nth-child(3){
    background-color: #217144;
}
.dt-buttons button:nth-child(4){
    background-color: #ad1d1c;
}
.codbtn{
    /* border:1px solid #f9b71f;
    color: #f9b71f; */
    background-color: #F0F2F5;
}
.nav-in{
    background-color: #F0F2F5;
    /* border:1px solid #f9b71f; */
}
.navbar{
    
    box-shadow: 6px 6px 10px #cbc8c8;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    /* background-color: #f9b71f;
    border-color: #f9b71f; */
}
.page-link:hover {
    color: #333230;
    text-decoration: none;
    /* background-color: rgb(236, 218, 185); */
    border-color: #dee2e6;
}
.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-right: -1px;
    line-height: 1.25;
    /* color: #f9b71f; */
    background-color: #fff;
    border: 1px solid #dee2e6;
}
div.dataTables_wrapper div.dataTables_paginate {
    margin-right: 0px;
    white-space: nowrap;
    text-align: right;
    width: fit-content;
    height: fit-content;
    position: relative;
    float: left;
    margin-left:38% !important;
}

.table thead th {
    text-align: center !important;
    /* background-color: rgb(238, 210, 159); */
}
table.dataTable td, table.dataTable th{
    text-align: center !important;

}
table.dataTable td{
    padding: 2px;
}
table2.dataTable tbody tr.selected td.focus {
    /* outline-color: rgb(236, 218, 185); */
}
table2.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05);
    background-color: #F0F2F5;
}
table2.dataTable.table-striped>tbody>tr.odd.selected>* {
    box-shadow: inset 0 0 0 9999px rgb(236, 218, 185) !important;
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95);
}
table2.dataTable tbody tr.selected td.focus {
    /* outline-color: #f9b71f !important; */
}
table2.dataTable>tbody>tr.selected>* {
    box-shadow: inset 0 0 0 9999px rgb(236, 218, 185)!important;
    box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
    color: rgb(255, 255, 255);
    color: rgb(var(--dt-row-selected-text));
}
div.dataTables_processing{
    /* color: #ff7d0e; */
}
.dat_tab_butt{
    border-radius: 50%;
    outline: none;
    color: #3b6cbf;
}
/*------------------------------------------------------------*/
.tim{
    font-size: 8px;
    color:#cccccc;
    margin-right: -10px;
}
.main{
    padding: 21px 42px 21px 28px;
    width:595px;
    height:420px;
}   
.tb_div{
    display: flex;
    padding: 0;
    width: 20%;
}
.tb_time{
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 5px;
    border: 1px solid #e5e4e4;
    text-align: center;
    font-size: 12px;
}
.tb_time td{
    padding:1px 5px;
}
.tb_time td:not(:first-child){
    border-right: 1px solid #e5e4e4; 
    width: 10px !important; 
}

.tb_time td input{
    width: 143px; 
}
.tb_time tbody>tr:not(:last-child)>td{
    border-bottom: 1px solid #e5e4e4;  
}
.inp_date{
    border: none;
    text-align: center;
}
.logo{
    float: left;
    width: 152px;
    height: 59px;
}
.devider{
    width: 100%;
    height: 23px;
    background-color: #3b6cbf;
    margin-top: 8px;
}
.in_devider{
    position: relative;
    height: 100%;
    width: 230px;
    padding: 0;
    transform: skewx(-35deg);
    margin-right: 40px;
    background-color: white;
    text-align: center;
    font-weight: 450;
    font-size: 20px;
    height: 30px;
    margin-top: -3px;
}
.in_devider div{
    transform: skewx(35deg);
}
.no{
    position: relative;
    width:60px;
    float: left;
    color:white;
    font-size: 10px;
    margin-left: -176px;
    margin-top: -24px;  
}
/* --------------------------------- */
.tb_data{
    padding: 26px 72px 24px 30px;
    height: 198px;
}
.tb_data table{
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 5px;
    border: 1px solid #e5e4e4;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 14px;
    color: #3b6cbf;
}
.tb_data td:not(:first-child){
    border-right: 1px solid #e5e4e4; 
    width: 10px !important; 
}
.tb_data tbody>tr:not(:last-child)>td{
    border-bottom: 1px solid #e5e4e4;  
}
.tb_data td:first-child{
    width:75px;
}
.sign{
    padding-right: 72px;
    color: #3b6cbf;
    font-size: 14px;
}
.done{
    margin-right: 119px;
}
.foot{
    font-size: 9px;
    color: #3b6cbf;
    margin-right: 57px;
    margin-top: 25px;
}
.code{
    border-top-left-radius: 5px;
    padding: 0;
    color: white;
    font-size: 9px;
    margin-top: 0px;
    background-color: #3b6cbf;
    height:40px;
}
#cus_code{
    width: 40px;
    color: white;
    background-color: #3b6cbf;
    border-top: 1px solid white;
    text-align: center;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
}
.code_inp_dev{
    margin-top:-30px;
}
/*----------------------------------------*/
.mainn{
    padding: 21px 42px 21px 28px;
    width:595px;
    height:842px;
} 
.cont{
    margin-right: -14px;
    width: 512px;
    padding: 0;
}
.cont_top_right{
    display: inline-block;
    width: 45%;
    margin-top: 20px;
}
.cont_top_left{
    display: inline-block;
    width: 45%;
    text-align: left;
    margin-right: 44px;
    margin-top: 20px;
}

.cont_mid{
    margin-right: -2px;
    width: 512px;
    padding: 0;
    margin-top: 20px;
}
.cont_mid table{
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 5px;
    border: 1px solid #e5e4e4;
    text-align: center;
    font-size: 16px;
    z-index: 1px;
}
.cont_mid table td:not(:first-child){
    border-right: 1px solid #e5e4e4;  
}
.cont_mid table th:not(:first-child){
    border-right: 1px solid white;  
}
.cont_mid table th{
    background-color: #3b6cbf; 
    color: white;
}
.cont_mid table tbody>tr:not(:last-child)>td{
    border-bottom: 1px solid #e5e4e4;
}
.cont_mid table tbody td{
    height: 42px;
}

.cont_bot{
    color: #3b6cbf;
    font-size: 16px;
    width: 512px;
    margin-top: 40px;
}
.cont_bot_right{
    display: inline-block;
    width: 45%;
}
.cont_bot_left{
    display: inline-block;
    width: 45%;
    text-align: left;
    margin-right:39px;
}
.ft{
    margin-right: 44px;
    margin-top: 70px;
}
.bac{
    background-color: black;
    position: relative;
    width: 20px;
    height: 20px;
}
.table_bill{
    background-image: url("/public/img/table_mark.jpeg");
}

.total_div{
    text-align: left;
    padding: 0;
}
.total_div input{
    width: 143px;
    border-bottom-left-radius: 5px;
    background-color: rgb(204, 204, 230);
    border: 1px solid #e5e4e4;
    height: 35px;
}
.total_div div{
    background-color: #3b6cbf;
    width: 100px;
    display: inline-block;
    text-align: center;
    left:178px;
    color: white;
    height: 28px;
    border-bottom-right-radius: 5px;
    position: absolute;
    height: 35px;
    padding: 5px;
}
/*---------------------------bill----------------------------*/
.fform-groupp{
    position: relative;
}
.fform-groupp input{
    border: 2px solid rgb(216, 213, 213);
    border-radius: 6px;
    padding: 0.5rem 0.5rem;
    background: transparent;
    outline: none;
}
.fform-groupp label{
    position: absolute;
    font-size: 16px;
    top: 50%;
    right: 2rem;
    color: rgb(177, 174, 174);
    padding: 0 4px;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
    font-family: cairo;
}
.fform-groupp input:is(:focus, :valid) {
    border-radius: 0;
    box-shadow: 2px 2px 10px rgb(221, 220, 220);
    border: 2px solid #3b6cbf; /*rgb(216, 213, 213);*/
}
.fform-groupp input:is(:focus, :valid) + label {
    top: 0;
    font-size: 20px;
    font-weight: 500;
    padding: 0 4px;
    color: #3b6cbf ;/*rgb(161, 161, 161);*/
    background: white;
}
.bt_pls{
    border: none;
    background: transparent;
}
#total_values{
    border-radius: 0;
    box-shadow: 2px 2px 10px rgb(221, 220, 220);
    border: 2px solid #3b6cbf; /*rgb(216, 213, 213);*/
}
/*---------------------------------------------------*/
.suc_save{
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 25%;
    height: 30%;
    z-index: 2;
    right: 37.5%;
    top:35%;
    transition: .64s ease-in-out;
    background-color: white;
    opacity: 90%;
    border-radius: 3px;
    box-shadow: 5px 5px 4px #e3e5e9;
}
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid #3b6cbf;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
/*---------------------------cutation page 1 footer---------------------------*/ 
.dot {
    height: 100%;
    width: 9%;
    padding: 2px;
    background: #e4e4e4;
    border-radius: 50%;
}
.in_dot{
    height: 100%;
    width: 100%;
    border-radius: 50%;
}