/*jwala*/
/* main */

.main{
	position: relative;
	position: absolute;
	width: calc(100% - 300px);
	top:0;
	left: 250px;
	background: var(--white);
	transition: 0.5s;
}

.topbar{
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-betweeen;
	align-items: center;
	padding: 0 10px;
}

.elex-vendor-bulk-order{
	position: relative;
}

.search{
	position:relative;
	left: 20px;  
	bottom: 0px;
	width: 180px;
	height: 38px;
	margin: 0 5px;
}

.search label{
	position: relative;
	width: 100%;
}

.search label input{
	font-size: 14px;
	width: 100%;
	height: 38px;
	border-radius: 2px;
}
.search label span{
	position: absolute;
	top: 1px;
	right: 2px;
	height:35px;
	width:36px;
	margin:0;
	padding: 2px;
	background: rgb(226, 223, 223);
	border-radius: 2px;
	text-align: center;
	padding: 5px;

}
.search label ion-icon{
	font-size: 16px;
}

.button-toggle{

	position: relative;
	left: 20px;
	width: 180px;
	height: 38px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding:1px;
	border: 2px solid #3F5980;
	border-width: 1.8px;
	border-radius: 2px;
	font-size: 16px;
}

.button-toggle .toggle-pro{
	text-align: center;
	height: 28px;
	width:85px;
	margin: 0;
	border-radius: 2px;
	background: white;
}

#btn-toggle-1{
	background-color: #3F5980;
	color: white;
}
/* 
.button-toggle .toggle-pro:active{
	background: #3F5980;
} */

.button-new{
	position: relative;
	left: 50%;	
}
.new-product{
	position: relative;
	width:150px;
	font-size: 16px;
	height: 38px;
	border-radius: 5px;
	color: white;
	background: #3F5980;
	text-align: center;
}
.new-product span{
	position:relative;
	bottom: 6px;
}

.new-product ion-icon{
	position: relative;
	top:1px;
	margin: 2px;
	font-size: 24px;
}

.mid-bar{
	position: relative;
	left:30px;
	display: flex;
	justify-content:space-between;
	align-items:center;
}
.mid-bar-btn{
	font-size: 12px;
	border: 2px solid grey;
	border-width: thin;
	border-radius: 3px;
	min-width:30px;
	padding:5px 10px;
	text-align: center;
}
.mid-bar-left-btn{
	background: #F5F9FF;
	font-size: 12px;
	border: 2px solid grey;
	border-width: thin;
	border-radius: 3px;
	min-width:30px;
	padding:5px 10px;
	text-align: center;
}


.table-format{
	position: relative;
	top:10px;
	left: 30px;
}
td, tr, th{
	border:none;
}
.table-format table tr th{
	font-size: medium;
	text-align: center;
	color:black;
	padding:4px;
	background-color: #d1d5db;
}

.table-format table tr td{
padding:5px;
}

.table-format table tr .detail-td{
	position: relative;
}

.table-format .table-img{
	background-color: red;
	width: 60px;
	height: 60px;
}

.table-format .title-h6{
	font-size: 12px;
	position: absolute;
	left: 35%;
	bottom: 65%;
	margin:0;
	font-weight: 500;
}
.table-format .date-p{
	font-size: xx-small;
	position: absolute;
	left: 35%;
	bottom: 55%;
	margin: 0;
	height: 5px;
}
.table-format .status-p{
	font-size: xx-small;
	position: absolute;
	left: 35%;
	bottom: 12%;
	margin: 0;
	background-color: bisque;
	padding:  2px;
	width:80px;
	text-align: center;
}
.table-format td{
	text-align: center;
	color: #000;
	font-size: small;
}

/**modal**/
.elex-multi-modal{
	display: none;
	position: absolute;
	z-index:1;
	left:0;
	top:0;
	height:auto;
	width:100%;
	overflow: auto;

}
.elex-multi-modal-header{
	padding: 0px;
	margin:0px;
}
.head-h5{
	padding: 10px;
	margin: 0;
}
.elex-multi-modal-header h5{
	font-weight: 500;
	text-align: center;
}
.elex-multi-modal-content{
	background-color:white;
	margin-left: 45%;
	padding: 0;
	height: 100%;
	box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.2);
}
.elex-multi-modal-body{
	padding: 20px;

}

.elex-multi-closeBtn{
	position: relative;
	right:40px;
	color: black;
	float: right;
	font-size: 30px;
	margin: 0px;
}
.elex-multi-closeBtn:hover, .elex-multi-closeBtn:focus{
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
#elex-multi-top-back-button{
	position: relative;
	padding: 3px;
	bottom: 30px;
	left:40px;
	border: 1px solid #3F5980;
	border-radius: 10px;
	font-size: small;
	display: none;
	text-align: center;
}


[data-tab-content]{
	display: none;
}

.active[data-tab-content]{
	display: block;
}
.elex-multi-modal-tabs{
	width: 100%;
	background-color: #f5f9ff;

}

.tabs{
	display: flex;
	justify-content: space-around;
	list-style: none;
	margin:0;
	padding:0;
	
}
.tab{
	cursor: pointer;
	padding: 5px;
	font-size: medium;
}
/* .tab.active{
	background-color: #CCC;
}
.tab:hover{
	background-color: #AAA;
} */

.elex-multi-pro-img{
	width: 100px;
	height: 100px;
	box-shadow: 0px 0px 20px 5px rgba(100,100,100,0.1);	
}
.elex-multi-pro-img input{

	display: none;
}

.elex-multi-pro-img img{
	width :120%;
	height: 100%;
	object-fit: cover;
}

.elex-multi-pro-img div{
	position: relative;
	left: 120px;
	margin-top: -70px;
	text-align: center;
	font-size: 15px;
	color: blue;
}

#elex-multi-table-category-div{
	margin-left: 10%;
}

.elex-multi-footer-btn-div{
	margin-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.elex-multi-footer-btn{
	margin: 10px;
	width: 48%;
	height: 50px;
	text-align: center;
	border: 1px solid #3F5980;
	border-radius: 10px;
}
#elex-multi-footer-btn-next{
	background-color: #3F5980;
	color: #F5F9FF;
}
#elex-multi-footer-btn-submit{
	background-color: #3F5980;
	color: #F5F9FF;
}

 .form-check .form-check-input{
	float:none;
}




/**
For Toggle Button
**/
.switch {
	position: relative;
	display: inline-block;
	width: 70px;
	height: 26px;
  }
  
  .switch input {display:none;}
  
  .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transition: .4s;
	transition: .4s;
	border: 2px solid #707070;
  }
  
  .slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 2px;
	bottom: 1px;
	background-color: #707070;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
   input:checked + .slider {
	border: 2px solid #3f5980;
  }
  
  /* input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
  }  */
  
  input:checked + .slider:before {
	-webkit-transform: translateX(43px);
	-ms-transform: translateX(43px);
	transform: translateX(43px);
	background-color: #3f5980;

  }
  
  /*------ ADDED CSS ---------*/
  .on
  {
	display: none;

  }
  
  .on, .off
  {
	position: absolute;
	transform: translate(-25%,-50%);
	top: 50%;
	left: 50%;
	font-size: 9px;
	font-family: Verdana, sans-serif;
  }
  
  input:checked+ .slider .on
  {display: block;
	transform: translate(-75%,-50%);
}
  
  input:checked + .slider .off
  {display: none;}
  
  /*--------- END --------*/
  
  /* Rounded sliders */
  .slider.round {
	border-radius: 34px;
  }
  
  .slider.round:before {
	border-radius: 50%;}

/** elex-multi-tab-content content label and input **/


.elex-multi-tab-content label{
	font-size:14px;
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 0;

}
.elex-multi-label-button{
	font-size: 12px !important;
	font-weight: 600 !important;

}

.elex-multi-tab-content input{
	border: 1px solid black;
	margin-top: 0;
}
#file-1-preview{
	margin: 0;
}

.modal-label-toggle{
	left: 3%;
	top: 6px !important;
}

.progress-bar {
	background-color: #3F5980;
  }





