:root{--background: #151f32; --forground:#f93; --border-radius:5px}
body{background: #e6e6e6 !important;}
*::-webkit-scrollbar{background-color:#D8D8D8;height:10px;width:8px}
*::-webkit-scrollbar-thumb{background-color:var(--background); border-radius: var(--border-radius);}
*::-webkit-scrollbar-button:vertical:increment{display:none}
*::-webkit-scrollbar-button:vertical:decrement{display:none}

header{z-index: 2; background:var(--forground); height: 60px; width: 100%; position: fixed; top:0; left:0; padding: 0px 10px; box-sizing: border-box;}
.bar_open,.bar_close{width:40px; height: 40px; line-height: 40px; text-align: center; color:#fff; top: 10px; cursor: pointer; position: absolute; border-radius: 30px;}
.bar_open{background: var(--background); left:10px}
.bar_close{background: #f93; left:200px; color:#000}
#sidebar{z-index: 3; padding: 10px; box-sizing: border-box; position: fixed; transition: margin 0.3s; width:250px; height:100vh; top:0px; margin-left:-300px; background: #151f32}
.separator{margin:7px 0 !important;}
summary{list-style: none;}
#wrapper{width:100%; height: auto;}
.content_body{transition: padding 0.3s; z-index: 1; width:100%; height: 100%; padding: 40px 10px 10px 10px; box-sizing: border-box;}
#crumb{background:var(--background); font-size: 12px; text-transform: uppercase; font-weight: 550; height:35px; width:100%; border-radius: var(--border-radius); padding: 0px 15px; box-sizing: border-box;}
#crumb a{text-decoration: none; color:#fff; line-height: 35px;}
#crumb span{color:#fff; margin: 0px 10px; font-size: 10px;}
#filter_search{background:#fff; border-radius: var(--border-radius); margin:5px 0px; padding: 5px; box-sizing: border-box;}
#filter_search form, #filter_search details{display: inline-block;}
.filter_input{min-width:150px; font-size: 12px; height:30px; border-radius: var(--border-radius); border:1px solid #000; padding: 0px 5px; box-sizing: border-box;}
.import_export{height:31px; font-weight: 550; text-transform: uppercase; font-size: 12px; min-width: 100px; background:var(--background); color:#fff; border-radius: var(--border-radius); border:1px solid var(--background); box-sizing: border-box;}
.filter_summary{min-width: 120px; text-align: center; list-style: none; line-height: 30px; font-size: 12px; text-transform: uppercase; font-weight: 550; background:var(--background); height:30px;color:#fff; border-radius: var(--border-radius);}

.table_container{width:100%; height: auto; max-height: 80vh; overflow-x: auto; background:#fff; border-radius: var(--border-radius);}
.c_table{width:100%; height: auto;}
.c_table thead tr th{position: sticky; top:0px; background: var(--background); color:#fff; height:40px; padding: 0px 10px;}
.c_table thead tr th, .c_table tbody tr td{font-size: 12px; font-weight: 550; min-width:100px; max-width: 250px;}
.c_table tbody tr td{padding: 10px;}
.c_table tbody tr:nth-child(2n+1){background:#f5f5f5}
.c_table tfoot tr td{position: sticky; bottom: 0; text-align:right; font-size: 12px; padding: 10px; background:#97D8BA; font-weight: 650; text-transform: uppercase;}

.c_table_inv{width:100%; height: auto; margin-top: 10px;}
.c_table_inv thead tr th{position:relative; background: var(--background); color:#fff; height:40px; padding: 0px 10px;}
.c_table_inv thead tr th, .c_table_inv tbody tr td{font-size: 12px; font-weight: 550; min-width:100px; max-width: 250px;}
.c_table_inv tbody tr:first-child{margin-top: 90px;}
.c_table_inv tbody tr td{padding: 10px;}
.c_table_inv tbody tr:nth-child(2n+1){background:#f5f5f5}
.c_table_inv tfoot tr td{position: sticky; bottom: 0; text-align:right; font-size: 12px; padding: 10px; background:#97D8BA; font-weight: 650; text-transform: uppercase;}
.add_from_file{float: left; margin-top: 7px;}

.table_summary{text-align: center; list-style: none; line-height: 30px; min-width:40px; font-size: 12px; text-transform: uppercase; font-weight: 550; background:var(--background); height:30px;color:#fff; border-radius: var(--border-radius);}
#invaddffile{list-style: none;}
.pop_up{background:rgb(0,0,0,0.7); width:100%; height: 100vh; position: absolute; left:0px; top:0px; z-index: 5;}
.pop_up_edit{background:rgb(0,0,0,0.7); width:100%; height: 100vh; position: absolute; left:0px; top:0px;}
.small_width_form{width:500px;}
.small_width_form h2{width:500px}
.pop_up_box{width:500px; min-height: 100px; max-height:auto; background: #fff; position: absolute; top:0; left:50%; transform: translateX(-50%);}
.pop_up_box h2{width:500px; z-index: 3; background:var(--background); position: fixed; top:0px; height:50px; line-height: 50px; left: 0; padding: 0px 10px; color:#fff; font-size: 16px; text-transform: uppercase; text-align: center; font-weight: 600;}
/* .pop_up_edit_file .pop_up_header{width:500px; z-index: 3; background:var(--background); position: fixed; top:0px; height:50px; line-height: 50px; left: 0; padding: 0px 10px; color:#fff; font-size: 16px; text-transform: uppercase; text-align: center; font-weight: 600;} */
.pop_up_box_inv{width:100%; min-height: 100px; max-height:auto; background: #fff; position: absolute; top:0px; left:50%; transform: translateX(-50%);}
.pop_up_box_inv h2{width:100%; z-index: 3; background:var(--background); position: fixed; top:0px; height:85px; line-height: 40px; left: 0; box-sizing: border-box; padding: 0px 10px; color:#fff; font-size: 16px; text-transform: uppercase; text-align: center; font-weight: 600;}
.close_btn,.edit_close,.close_it,.close_it2,.close_view{position: absolute; right:15px; cursor: pointer; top: 15px;}
.pop_up_data{padding: 60px 20px 20px 20px; box-sizing: border-box; width:100%; overflow-y: scroll; height: 90vh;}
.pop_up_data p{font-size: 13px; margin-bottom:0px;}
.file_title{border:2px solid #97D8BA;padding: 5px; border-radius: 7px;}

.small_width_input{width:31% !important; margin-right: 2%; float: left; height: 70px; position: relative; border-radius: var(--border-radius); box-sizing: border-box;}
.small_width_input input, .small_width_input select{font-size: 12px; border:none; height: 100%;  position: absolute; padding-left:50px; width:99.5%; z-index: 1;}

.small_width_input1{width:23% !important; margin-right: 2%; float: left; height: 70px; position: relative; border-radius: var(--border-radius); box-sizing: border-box;}
.small_width_input1 input, .small_width_input1 select{font-size: 12px; border:none; height: 100%;  position: absolute; padding-left:50px; width:99.5%; z-index: 1;}

.small_width_input2{width:73% !important; margin-right: 2%; float: left; height: 70px; position: relative; border-radius: var(--border-radius); box-sizing: border-box;}
.small_width_input2 input, .small_width_input2 select{font-size: 12px; border:none; height: 100%;  position: absolute; padding-left:50px; width:99.5%; z-index: 1;}

.chr_conteiner{margin-top: 20px;}
.chr_conteiner div input,.charge_list,.code_list{height: 35px; margin-right: 10px; margin-bottom: 10px; border:1px solid var(--background); border-radius: var(--border-radius);}
.chr_conteiner div i{font-size: 12px; margin-top: -10px; width: 0px;}

.input{width:100%; height: 35px; border:1px solid var(--background); margin-bottom: 15px; position: relative; border-radius: var(--border-radius); box-sizing: border-box;}
.input_charges{width:44%; height: 35px; border:1px solid var(--background); margin-bottom: 15px; position: relative; border-radius: var(--border-radius); box-sizing: border-box;}
.input_charges input{font-size: 12px; border:none; height: 100%;  position: absolute; padding-left:50px; width:99.5%; top:0px; z-index: 1;}
.input_charges i{width:40px; z-index: 2; height: 100%; text-align: center; background: var(--background); position: absolute; left: 0; color:#fff; line-height: 35px;}
.input input, .input select{font-size: 12px; border:none; height: 100%;  position: absolute; padding-left:50px; width:99.5%; top:0px; z-index: 1;}
.input i{width:40px; margin-left: -2px; z-index: 2; height: 100%; text-align: center; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); background: var(--background); position: absolute; left: 0; color:#fff; line-height: 35px;}
.input_textarea{width:100%; height: 55px; border:1px solid var(--background); margin-bottom: 15px; position: relative; border-radius: var(--border-radius); box-sizing: border-box;}
.input_textarea textarea{font-size: 12px; border:none; max-height: 100%; min-height: 100%;  position: absolute; padding-left:50px; width:99.5%; top:0px; z-index: 1;}
.input_textarea i{width:40px; z-index: 2; height: 100%; text-align: center; background: var(--background); position: absolute; left: 0; color:#fff; line-height: 35px;}

.submit_btn{background: var(--background); color:#fff; font-size: 12px; height:35px; border-radius: var(--border-radius); min-width:120px; text-transform: uppercase; font-weight: 600;}
.submit_btn:focus-visible {
    outline: 2px solid #f93;}

#sidebar ul{list-style-type: none; padding: 65px 0px; font-size: 15px;}
.active{background: #f93;}
#sidebar ul li{height: 40px;}
#sidebar ul li a,#sidebar ul li form button{text-decoration: none; color: #fff; padding-left: 10px; box-sizing: border-box; line-height: 40px; display:block; text-transform: uppercase;}
#sidebar ul li form button{background: #e92c2f;}
#sidebar ul li:hover{background: #f93;}
#sidebar ul li:hover a{color: var(--background);}
#sidebar details summary{list-style: none; color:#fff; position: absolute; top:60px; font-size: 14px;} 
.open_menu{position: relative; top:75px; width: 90%; box-sizing: border-box;}
.open_menu a{text-decoration: none; color: #fff; padding-left: 12px; font-size: 13px;}

.reset_btn{font-size: 12px; text-transform: uppercase; border: none; font-weight: 550; background:var(--background); height:30px;color:#fff; border-radius: var(--border-radius);}
.dt-button{
    border: none;
    font-size: 12px; text-transform: uppercase; font-weight: 550; background:var(--background); height:30px;color:#fff; border-radius: var(--border-radius);
}

.c_table tbody tr{height:25px !important;}
/* .c_table tbody tr td:last-child{padding: 0 !important;} */
.inv_list_table tr td:last-child{display: -webkit-inline-box; padding: 3px !important;}
.loged_user{
    background: var(--background);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff !important;
    cursor: pointer;
    float: right;
    border-radius: 100%;
    margin-top: -44px;
}

.pop_up_box_invoice {
    width: 100%;
    min-height: 100px;
    max-height: auto;
    background: #fff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.pop_up_box_invoice h2{width:100%; z-index: 3; background:var(--background); position: fixed; top:0px; height:50px; line-height: 50px; left: 0; padding: 0px 10px; color:#fff; font-size: 16px; text-transform: uppercase; text-align: center; font-weight: 600;}

.add_chr, .add_charge_from_file{
    background: var(--background);
    color: #fff;
    font-size: 12px;
    height: 35px;
    border: none;
    
    border-radius: var(--border-radius);
    text-transform: uppercase;
    font-weight: 600;
}

.btn-color{
background-color: #0e1c36 !important;
color: #fff !important;
}

.profile-image-pic{
height: 200px;
width: 200px;
object-fit: cover;
}



.cardbody-color{
background-color: #ebf2fa;
}

a{
text-decoration: none;
}

.shipper {
    position: absolute;
    top: 195px;
    z-index: 12;
    background: #fff;
}
.consignee {
    position: absolute;
    top: 265px;
    z-index: 12;
    background: #fff;
}
.add_state_from_con,.add_state_from_file,.add_city_from_file,.add_city_from_con,.add_allow_from_charge,.add_shipper_from_file,.add_cons_from_file{
    min-width: 120px;
    text-align: center;
    list-style: none;
    margin-top: 23px;
    margin-left: -20px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 550;
    background: var(--background);
    height: 30px;
    color: #fff;
    border-radius: var(--border-radius);
}

.btn-sm{
    color:#fff;
    margin: 5px;
}

.btn-sm:hover{
    color:#fff;
}

.view_table{
    position: absolute;
    top: 50px;
    width: 70%;
    left: 15%;
    font-size: 14px;
    z-index: 10;
    background: #fff;
}

.inv_no,.w_chr,.refs{
    padding: 10px 5px;
    width: 32%;
    border: 1px solid #ccc;
    margin: 10px 5px;
    float: left;
}

.shipper_view_data,.consing_data{
    padding: 10px 5px;
    width: 48.5%;
    border: 1px solid #ccc;
    margin: 10px 5px;
    margin-top: 27px;
    float: left;
}

.charges,.remarks{
    padding: 10px 5px;
    width: 98%;
    border: 1px solid #ccc;
    margin: 10px 5px;
    float: left;
}

.carrrier{
    padding: 10px 5px;
    width: 65%;
    border: 1px solid #ccc;
    margin: 10px 5px;
    float: left;
    position: absolute;
    top: 96px;
}

.mt5 {
    margin-top: 90px !important;
}

.pagination{float:right; margin-right: 26px;}
.pagination li {
    display:inline-block;
    padding:5px;
  }
  
.pagination li.active{border:1px solid #000; background: #fff;}
.badge{font-size: 13px !important;padding: 8px 5px !important;}
.filter_file_client{position: absolute; top: 25%; right: 4%; background: none; font-size: 15px; border: none; outline: none;}
.client_title{position: absolute; top: 30%; right: 23%; background: none; font-size: 15px; border: none; outline: none;}
.view_cards .card-content{list-style-type: none; width: 99%; padding: 10px; position: relative; left: 45%; transform: translateX(-44%);}
.view_cards .card-content .custom-card{width: 15%; background: #fff; position: relative; cursor:pointer; padding: 10px; margin: 9px; float: left; height: 100px; border-radius: 7px;}
.view_cards .card-content .custom-card i{font-size: 35px; position: absolute; top: 5px; right: 5px;}
.view_cards .card-content .custom-card .count{font-size: 28px; margin-left: 15px; font-weight: 700;}
.view_cards .card-content .custom-card .desc{font-size: 15px; font-weight: 700; position: absolute; top: 48px; left: 50%; transform: translateX(-50%);}
#inv_chart,#user_chart{width: 46.5%; height: 100%; background: #fff; float:left;}
#file_table{width: 93%; height: auto; background: #fff; float: left; position: absolute; left: 50%; transform: translateX(-50%);}
#inv_chart{margin-left: 3%;}
#user_chart{margin-left: 1%;}
.form-switch .form-check-input{height: 2em; width: 3.5em !important; outline: none !important;}

.draggable {display:none; width: 250px; height: 250px; background-color: #5fc5ff; color: #fff; text-align: center; cursor: move; position: absolute; top: 50px; right: 50px; border-radius: 5px;}
.d_head{height: 40px; width: 100%; background: rgba(255,255,255,0.7); border-top-left-radius: 5px; border-top-right-radius: 5px;}
.d_head i{position: absolute; top: 7px; right: 10px; background:#fff; height:25px; line-height:25px; width:25px; border-radius: 100%; font-size:20px; cursor:pointer; color:#000;}
.view_note{position: absolute; cursor: pointer; top: 30%; right: 40px;}
.b_body{padding: 7px; overflow: auto;}

.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color:#151f32 #0000 #ff9933 #0000;
    border-radius: 50%;
    box-sizing: border-box;
    animation: 1s rotate linear infinite;
 }
 .loader:before , .loader:after{
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    border: 10px solid transparent;
    border-bottom-color: #ff9933;
    transform: translate(-10px, 19px) rotate(-35deg);
  }
 .loader:after {
    border-color: #151f32 #0000 #0000 #0000 ;
    transform: translate(32px, 3px) rotate(-35deg);
  }
   @keyframes rotate {
    100%{    transform: rotate(360deg)}
  }
  .bg-theme-color {
    --bs-bg-opacity: 1;
    background-color: rgba(255, 153, 51, var(--bs-bg-opacity)) !important;
    color: #000 !important;
}