@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Outfit:wght@100..900&family=Pacifico&display=swap');


*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.dark-blue {
   background-color: rgb(7, 7, 53);

}

nav {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   height: 50px;
   background: #000;
   display: flex;
   color: #fff;
   flex-direction: column;
   justify-content: center;

   background: linear-gradient(to right,#0e0d0d , rgb(58, 57, 57), #000);
}

.border-bb {
   border-bottom: 1px solid #0e0d0d;
}

.icon-manu {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100px;
   position: relative;
   padding: 5px;
   height: 40px;
   border-radius: 50%;
   gap: 2px;
   background: rgb(248, 248, 248);
   /* background: rgb(108, 144, 211); */
   color: #f97316;
   /* color: rgb(255, 68, 0); */
   border: 2px solid cornflowerblue;
   font-size: 13px;
}

.container {
   width: 70%;
   margin: auto;
   /* border: 1px solid #dedede; */
}

.auth-input {
   padding: 3px;
   height: 35px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 14px;
   border: 1px solid rgb(179, 179, 185);
   width: 100%;
   border-radius: 5px;
   outline: none;
}
.auth-cont {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-image: url('../images/wallpaperflare.com_wallpaper\ \(78\).jpg'); /* Adjust the path as needed */
   background-size: cover;
   background-position: center;
   position: relative; /* Ensure the pseudo-element is positioned relative to this container */
}

.auth-cont::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8); /* Adjust the opacity as needed */
   z-index: 1; /* Ensure the overlay is above the background image */
}

.auth-cont-body {
   position: relative; /* Ensure the content is positioned above the overlay */
   text-align: left;
   border: 1px solid #dedede;
   padding: 20px;
   width: 300px;
   z-index: 2; /* Ensure the content is above the overlay */
   background-color: white; /* Optional: add a background color to the body */
}

.auth-form-btn {
   width: 100%;
   border-radius: 5px;
   height: 35px;
   padding: 5px;
}

.auth-input:focus {
   border: 1px solid rgba(91, 176, 245, 0.8);
}

.link-btn {
   padding: 5px;
   border-radius: 3px;
}

.dark-btn {
   padding: 5px;
   border: none;
   color: white;
   border-radius: 3px;
   font-size: 14px;

}

.loadingSpinnerContainerFull {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(53, 75, 100, 0.5);
   z-index: 5000;
   display: none;
   justify-content: center;
   align-items: center;
}

.loadingSpinnerFull {
   width: 50px;
   height: 50px;
   border: 5px solid;
   border-color: #211a5f transparent #0c0a85 transparent;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

.showSuccessOverlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(124, 124, 124, 0.5);
   z-index: 5050;
   display: none;
   justify-content: center;
   align-items: center;
}

.showSuccessBody {
   width: 180px;
   height: 180px;
   background-color:#fff;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   /* border-color: #db810b transparent #a06a07 transparent; */
   border-radius: 10px;
}

.showErrorOverlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(124, 124, 124, 0.5);
   z-index: 5050;
   display: none;
   justify-content: center;
   align-items: center;
}

.showErrorBody {
   width: 180px;
   height: 180px;
   background-color:#fff;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   /* border-color: #db810b transparent #a06a07 transparent; */
   border-radius: 10px;
}

.product-pop-overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(133, 133, 138, 0.5);
   z-index: 5000;
   display: none;
   justify-content: center;
   align-items: center;
}

.product-pop-body {
   width: 320px;
   /* height: 250px; */
   padding: 5px;
   background-color:#fff;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   /* border-color: #db810b transparent #a06a07 transparent; */
   border-radius: 10px;
}

.form-input {
   padding: 5px;
   border: 1px solid #dedede;
   font-size: 14px;
   background: #fefece;
   outline: none;
   width: 100px;

}

.form-input:focus {
   border: 2px solid rgba(156, 83, 56,0.8);
}

/* History */
/* History */
/* History */
.history-overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(133, 133, 138, 0.5);
   z-index: 4000;
   display: none;
   justify-content: center;
   align-items: center;  
}

.history-body {
   width: 500px;
   height: 100%;
   padding: 5px;
   background-color:#fff;
   /* display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column; */
   /* border-color: #db810b transparent #a06a07 transparent; */
   /* border-radius: 10px; */
}

.history-list {
   height: 90%;
   overflow-y: scroll;
   margin-bottom: 10px;
}

.single-invoice-overlay{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(133, 133, 138, 0.5);
   z-index: 5050;
   display: none;
   justify-content: center;
   align-items: center;  
}

.single-invoice-body {
   width: 500px;
   height: 100%;
   padding: 5px;
   background-color:#fff;
   display: flex;
   flex-direction: column;
   align-items: center;
}


.history-list::-webkit-scrollbar {
   width: 5px;
}

.history-list::-webkit-scrollbar-track {
   background: #f1f1f1;
}

.history-list::-webkit-scrollbar-thumb {
   background-color: #2c2c2c;
   border-radius: 10px;
   border: 3px solid #f1f1f1;
}

.history-list::-webkit-scrollbar-thumb:hover {
   background-color: #555;
}

.invoice-body {
   width: 220px;
   /* height: 300px; */
   /* border: 1px solid; */
   /* display: flex; */
}

.invoice-table {
   border-collapse: collapse;
   width: 100%;
   /* border: 1px solid black; */
}

.invoice-body tr,td,th {
   padding: 2px;
   border: none;
   text-align: center;
}

.tiny-font {
   font-size: 8px;
}

.hidebox {
   display: none;
}


.single-invoice-overlay2{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(133, 133, 138, 0.5);
   z-index: 4999;
   display: none;
   justify-content: center;
   align-items: center;  
}

.single-invoice-body2 {
   width: 500px;
   height: 100%;
   padding: 5px;
   background-color:#dedede;
   display: flex;
   flex-direction: column;
   align-items: center;
}

/* ********************** */
/* ********************** */


.single-invoice-overlay3{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(133, 133, 138, 0.5);
   z-index: 4999;
   display: none;
   justify-content: center;
   align-items: center;  
}

.single-invoice-body3 {
   width: 500px;
   height: 100%;
   padding: 5px;
   background-color:#dedede;
   display: flex;
   flex-direction: column;
   align-items: center;
}


@media(max-width:750px) {
   .container {
      width: 80%;
   }

   .new-form-body, .edit-form-body, .view-form-body, .new-profile-overlay-body, .customer-details-overlay-body, .create-credit-body {
      width: 100%;
      height:100%;
   }

   .history-body {
      width: 100%;
   }

   .single-invoice-body2 {
      width: 100%;
   }
   

   
}