/*toggle css*/
    
.switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch:before{
  position:absolute;
  content:"Invoice";
  font-size:14px;
  top: 5px;
  z-index: 2;
  left: 17px;
  color:white;
  display: none;

}

.switch:after{
  position:absolute;
  content:"Quote";
  font-size:14px;
  top: 5px;
  left: 38px;
  color:white;

}

.switch:has(input:checked):after{
  display: none;
}

.switch:has(input:checked):before{
  display: block;
}


.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #005cb2;
    transition: .3s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #0d2c49;
}

input:checked + .slider:before {
    transform: translateX(65px);
}
    
h2{
    line-height: 1.2;
    font-size:40px;
    padding-bottom: 40px;
    text-align: center;
}
	
	.qt{
		display:block;
	}
    

.toggle-btn{
    text-align: right;
    max-width:1024px;
    margin: 0 auto;
 }

/* Container for the form */

* {
  box-sizing: border-box;
}

body {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #0d2c49;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

.padding_wrapper_vl {
	padding: 15px 30px;
}

.padding_all30_vl {
	padding: 30px;
}

.padding_bottom_5_vl {
    padding-bottom: 5px;
}

.padding_bottom_15_vl {
    padding-bottom: 15px;
}

.padding_top_15_vl {
    padding-top: 15px;
}

.padding_top_20_vl {
    padding-top: 20px;
}

.padding_right_20_vl {
    padding-right: 20px;
}

.padding_left_20_vl {
    padding-left: 20px;
}
	
.background_color1_vl {
	background-color: #f4f4f4;
}

.background_color2_vl {
	background-color: #ffffff;
}

.border_wrapper_vl {
  border-top: 1px solid #e1e1e1;
  border-left: 1px solid #e1e1e1;
  border-right: 1px solid #e1e1e1;
  border-bottom: 5px solid #38d430;
}

.border_bottom1_vl {
    border-bottom: 1px solid #0d2c49
}

.border_bottom2_vl {
    border-bottom: 1px solid #e1e1e1;
}

.border_top5_vl {
    border-top: 5px solid #e1e1e1;
}

.border_left1_vl {
    border-left: 2px solid #e1e1e1;
}

.display_flex_vl {
	display: flex;
}

.flex_direction_row_vl {
	flex-direction: row;
}

.flex_direction_column_vl {
	flex-direction: column;
}

.align_items_flex_end_vl {
	align-items: flex-end;
}

.align_items_center_vl {
	align-items: center;
}

.justify_content_space_between_vl {
	justify-content: space-between;
}

.justify_content_center_vl {
	justify-content: center;
}

.justify_content_end_vl {
	justify-content: end;
}

.text_align_right_vl {
    text-align: right;
}

.gap_10_vl {
	gap: 10px;
}

.gap_15_vl {
	gap: 15px;
}

.gap_20_vl {
	gap: 20px;
}

.gap_25_vl {
	gap: 25px;
}

.margin_bottom_0_vl {
	margin-bottom: 0px;
}

.margin_bottom_10_vl {
	margin-bottom: 10px;
}

.margin_bottom_15_vl {
	margin-bottom: 15px;
}

.margin_bottom_20_vl {
	margin-bottom: 20px;
}

.margin_bottom_50_vl {
	margin-bottom: 50px;
}

.font_size12_vl {
	font-size: 12px;
}

.font_size11_vl {
	font-size: 12px;
}

.font_weight300_vl {
	font-weight: 300;
}

.font_weight400_vl {
	font-weight: 400;
}

.font_weight700_vl {
	font-weight: 700;
}

.font_weight800_vl {
	font-weight: 800;
}

.height100_vl {
	height: 100%;
}

.max_width40_vl {
    max-width: 40%;
}

.width100_vl {
    width: 100%;
}


/*Upload field*/
.upload_field_vl {
	width: 250px;
	height: 100px;
	background-color: #ffffff;
	border: 1px solid #e1e1e1
}

.icon_vl {
	width: 17px;
	border-radius: 0;
	margin-right: 4px;
}


input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select {
    height: 56px;
}

textarea {
    height: 95px;
    margin: 0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus, 
textarea:focus {
  border: 1px solid #6cbf01;
  outline: 0;
  color: #012939;
}

.deletor {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: end;
}

output {
    font-weight: 800;
    font-size: 20px;
}

.delete-line {
  color: inherit;
  font-weight: 900;
  background-color: transparent !important;
  font-size: 22px;
  padding: 0;
  border: 0;
}

.add_new_line_vl {
    height: 42px;
    padding: 8px 16px;
    border: 2px solid #013b52;
    background-color: transparent;
    font-size: 16px;
    font-weight: 600;
    color: #013b52;
}

.add_new_line_vl:hover {
    background-color: #0d2c49;
    color: #ffffff;
}

.add_discount_vl {
    font-size: 14px;
    text-decoration: underline;
    border: 0;
    padding: 0;
    background: transparent;
    font-weight: 700;
}

.generator_btn_vl {
    background:rgba(0,92,185,1.0);
    color: white;
    border: 0;
    height: 56px;
    padding: 10px 25px;
    font-size: 18px;
    font-weight: 700;
}

.generator_btn_vl:hover {
    background: #0d2c49;
}

h3 {
    font-size: 34px;
}

h4 {
    font-size: 27px;
    margin-bottom: 15px;
}

h5 {
    font-size: 18px;
}

#invoice_number{
  margin-top:5px!important;
}

.invoice_details_vl {
    display: inline;
    font-size: 14px;
    max-width: 120px;
}

.grid_container_vl {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 15px;
    row-gap: 10px;
}

.grid_column_2_vl {
    grid-column: span 2;
}

.grid_column_3_vl {
    grid-column: span 3;
}

.grid_column_5_vl {
    grid-column: span 5;
}

.form-container {
  flex-direction: column;
  max-width: 1024px; /* Adjust width as needed */
  margin: 0 auto; /* Center the form */
	border-top: 5px solid #38d430;
}

/* Style for each input and label */
.form-container label,
.form-container input,
.form-container textarea,
.form-container select {
  width: 100%;
  font-family: "Inter", sans-serif;
  /*margin-bottom: 15px;*/ /* Space between fields */
}

/* Adjust label style */
.form-container label {
  /*margin-bottom: 5px;*/
  /*font-weight: bold;*/
}

/* Style for input fields */
.form-container input,
.form-container textarea,
.form-container select {
  padding: 10px;
  /*border: 1px solid #ccc;*/
  /*border-radius: 5px;*/
  box-sizing: border-box;
}

/* Submit button styling */
.form-container input[type="submit"] {
  background-color: #7eaf0d;
  color: white;
  cursor: pointer;
  border: none;
  padding: 10px;
  /*border-radius: 5px;*/
}

.form-container input[type="submit"]:hover {
  background-color: #005cb2;
}


/*
form {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
*/

/*
div{
 //   margin-bottom: 5px;
}
*/

/*label {
    display: block;
    /*font-weight: bold;*/
    /*margin-bottom: 5px;*/
}*/

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 10px;
    /*margin-top: 5px;*/
    border: 1px solid #e1e1e1;
    /*border-radius: 5px;*/
    font-size: 15px;
	color: #787878;
    background-color: #ffffff;
}

input[type="file"] {
    display: none!important;
}

input {
 // color: lightgray; /* Initial color for the predefined text */
}

input:focus {
  color: black; /* Change color when the input is focused */
}
	
#file_upload label {
    cursor: pointer;
    /*background-color: #7eaf0d;*/
    /*color: white;*/
    /*padding: 10px;*/
    /*border-radius: 5px;*/
    /*display: inline-block;*/
   
}

#file_upload img {
    max-width: 100%;
    height: auto;
    /*border-radius: 5px;*/
    /*margin-top: 10px;*/
}


button {
    /*background-color: #7eaf0d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;*/
    cursor: pointer;
    font-family: "Inter", sans-serif;
}

/*
button:hover {
    background-color: #7ebf0d;
}
*/

/*
h4, h5 {
    margin-top: 20px;
    font-size: 1.2em;
}
*/



.required_field{
    display:none;
}
	
.adjacent-left, .adjacent-right {
    display: inline-block;
    width: 44%; /* Adjust width as needed */
 //   padding: 5px;
 //   border: 1px solid #ddd;
    vertical-align: top; /* Aligns divs to the top */
  }

.adjacent-left {
	margin-right: 5%;
}
	
.adjacent-right {
	float: right;
}

/*
.grid-container {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-gap: 10px;
background-color: rgb(240,240,240);
  padding: 10px;
}
*/

/*
.items_first_column {
  grid-column: 1 / span 2;
}
*/

.hidden {
	display: none !important;
}
	
label:not(#file_upload label):not(.switch):not(.invoice_details_vl) {
  display: none!important;
}

select {
  color: gray;
}

select option {
  color: black;
}

select option:first-child {
  color: gray;
}
	
#uploadedImage{
	margin-bottom: 10px;
	max-height: 200px;
	max-width: 200px;
}

/*
.deletor{
    display: flex;
	column-gap: .9rem;
	 align-items: center;
//	justify-content: flex-end;
}
*/

/*
.delete-line{
	height: 40px;
}
*/

.separator {
  grid-column: 1 / -1; /* Span all columns to start a new row */
  margin: 20px 0; /* Adjust margin as needed */
  border: 1px solid lightgrey; /* Style the <hr> as needed */
  margin-right:35px;
}
	
	
hr#subtotal {
  border: none;
  height: 5px;
  color: #d3d3d3; 
  background-color: #d3d3d3; 
}

/*
#generator{
	border: 5px solid red;
    margin-top: 20px;		
}
*/
	
	
@media only screen and (max-width: 600px) {
	.adjacent-left, .adjacent-right {
		display: block;
		width: 100%;
		margin-right: 0;
	  }

	.grid-container {
	  display: block;
	}	
	
	#line_item_header{
		display: none;
	}
}