body{font-family: 'Poppins' !important; overflow-x: hidden; font-size: small !important;  background-image: url("../images/1.png") !important;background-repeat: no-repeat;       background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;}

.logo_login{     width: 70%;
    margin: 0 auto;
    margin-top: 8%;}
.logo_header{ 
        margin-top: 8.2%;
    margin-left: 3%;width:250px;}
.img_packing_logo{
    width: 80% !important;margin-top: -16% !important;margin-bottom: 3% !important;
    }
.ts{padding-top: 3%; padding-bottom: 1%;}
.navbar_header{background: transparent !important;
    box-shadow: none !important;}
.na{margin-top: -7%; }
.user_img{height: 40px !important;}
button:focus{outline: none !important;}
.user_img_name{    background: transparent;
    border: none;}
.form-body{padding: 2% !important;}
.navbar{   border-top-left-radius: 6em !important;
    border-bottom-left-radius: 6em !important;background: linear-gradient(to bottom, #F2C84E, #B7872D);box-shadow: 7px 7px 20px #aaaaaa;}
.nav-link{color: #000 !important;
    font-size: 12px;
    /* font-weight: bold; */
}
.nav-link:hover{color: #f8f9fa !important;
    
    /* font-weight: bold; */
}

    .nav_div{margin-top: -4%;}

.cr_balance_text{font-size:10px !important;    padding: 3% !important;}
.dr_balance_text{font-size:10px !important;    padding: 3% !important;}
.btn_heading{
    margin-left: -6%;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    /* font-weight: bolder; */
    border-radius: 20px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    width: 250px;
    height: 40px;
    /* color: white; */
    background-image: linear-gradient(to bottom, #F2C84E, #B7872D);
    border: none;}

        .tab_link{
            font-size: 10px !important;
            color: darkgoldenrod !important;
            background-color: white !important;
            border: 2px solid black !important;
            border-color: goldenrod !important;
            font-family: 'Poppins', sans-serif !important;
            /* font-weight: 600 !important; */
            /* width: 230px !important; */
            height: 30px !important;
            border-top-left-radius: 5px !important;
            border-top-right-radius: 5px !important;
            margin-top: 20px !important;
            padding-top: 6px !important;
        }
        .nav_div_admin{margin-top: -8% !important;}
        .active{
            color: #000 !important;
    background-image: linear-gradient(rgb(244, 197, 80), darkgoldenrod) !important;
    border: none;
        }
        .tab_link:hover{
            background-color: darkgoldenrod !important;
            color: #000 !important;
        }
        .tab-content{
            margin-bottom: 30px;
  border: none;
  border-radius: 10px;
  margin-top: 20px !important;
 padding: 2% !important;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.2);
  /* width: 1000px; */
  background-color: white;
        }
        .cmn_btn{
            border:none !important;
        }
        #tbl_list_filter{
            margin-top: -4% !important;
        }
      
.dataTables_filter{margin-top: -4% !important;}
.select2-container--bootstrap-5 .select2-selection{
    font-size:12px !important;
    border-radius: 10px !important;
    color :#555555 !important;
    height: 34px !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option{
    font-size: 12px !important;
}
label{
    text-transform: uppercase !important;
    margin-bottom: 3px !important;
    font-size: 12px !important;
}
.link_modal{
    color: rgb(0, 223, 68) !important;
    font-size: 10px !important;
    margin-left: 10px !important;
    text-decoration: none !important;
}
textarea{height: 100px !important;}
.btn_fetch{
    background: #1b61d1 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    margin-top: 1% !important;
}
.imagePreview{
    width: 100%;
    height: 100px;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: repeat;
    background-size: auto;
    background-color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
@font-face{
    font-family : 'lemonmedium';
    src : url('lemon_milk/LEMONMILK-Medium.otf') format('opentype'),
          url('lemon_milk/LEMONMILK-Medium.ttf') format('truetype');
         
  }
  @font-face{
    font-family : 'lemonlight';
    src : url('lemon_milk/LEMONMILK-Light.otf') format('opentype');
          
         
  }
  @font-face{
    font-family : 'lemonregular';
    src : url('lemon_milk/LEMONMILK-Regular.otf') format('opentype'),
          url('lemon_milk/LEMONMILK-Regular.ttf') format('truetype');
         
  }

  .modal-content{
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    pointer-events: auto !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0,0,0,.2) !important;
    border-radius: 0.3rem !important;
    outline: 0 !important;
    padding: 5px !important;
    border-radius: 5px !important;
    box-shadow: 0px 0px 20px #000 !important;
  }
.balance{
    color : red !important;
    font-size: 12px !important;
    font-style: italic !important;
}

  /* @font-face {
    font-family: 'lemonlight';
    src: url('lemon_milk/LEMONMILK-Light.otf') format('opentype'),
         url('lemon_milk/LEMONMILK-Medium.ttf') format('truetype'),
         url('lemon_milk/LEMONMILK-RegularItalic.ttf') format('truetype');
} */


.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
  }
  
  .active, .collapsible:hover {
    background-color: #555;
  }
  
  .collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  /* .active:after {
    content: "\2212";
  } */
  
  .content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
  }

  .svg_notification{margin-top: 9% !important; 
  }

  /***************  sales invoice *************/

  .invoice {
    padding: 30px;
}

.invoice h2 {
	margin-top: 0px;
	line-height: 0.8em;
}

.invoice .small {
	font-weight: 300;
}

.invoice hr {
	margin-top: 10px;
	border-color: #ddd;
}

.invoice .table tr.line {
	border-bottom: 1px solid #ccc;
}

.invoice .table td {
	border: none;
}

.invoice .identity {
	margin-top: 10px;
	font-size: 1.1em;
	font-weight: 300;
}

.invoice .identity strong {
	font-weight: 600;
}


.grid {
    position: relative;
	width: 100%;
	background: #fff;
	color: #666666;
	border-radius: 2px;
	margin-bottom: 25px;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}

.readonly-select {
    pointer-events: none;
}
.btnRemove{
    font-size: 12px !important;
    padding: 1px !important;
}
@media only screen and (max-width: 450px) {
    .logo_header {
      width:100px !important;
    }
    .header_not{position: absolute; margin-top: 9% !important;}
    .nav_div_admin{margin-top: -12% !important;}
    .navbar-toggler{margin-left: 86% !important;background-color: #b7872d !important;}
    .navbar{background: linear-gradient(to bottom, #ffffff, #ffffff) !important; box-shadow:none !important;}
    .btn_heading{margin-left: 0% !important;}
  }

.customer .text-primary {
    color: #875801 !important
}
.customer .table-striped>tbody>tr:nth-of-type(odd){
background: #f5f5f5 !important;
    --bs-table-accent-bg: #f5f5f5 !important;
}
.customer table.dataTable td,.customer  table.dataTable th{
    text-align: left
}
.customer .toggle-columns {
    display: flex;
    margin: 5px 0;
    border: 1px solid #e5e5e5;
    color: #e1e1e1;
    padding: 1px 5px;
    border-radius: 5px;
    background: #5c5c5c;
    line-height: 1.5;
    font-size: 12px;
}
.customer .cart-btn {
    color: #005003;
    padding: 5px 10px;
    background: none;
    border: none;
    font-size: 24px;    
}
.customer .spin-btn{
    color: #4c4700;
    padding: 5px 10px;
    background: none;
    border: none;
    font-size: 24px;
}
.customer .spin-btn i {
    display: inline-block;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.customer .remove-btn{
    color: #9d240e;
    padding: 5px 10px;
    background: none;
    border: none;
    font-size: 24px;
}
.customer .btn-success {
    width: 130px;
}