/* The Modal (background) */

	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 12; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(255, 255, 255); /* Fallback color */
		background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}
	table, th, td {
		border: 1px solid black;
		border-collapse: collapse;
	}
	/* Modal Content */
	.modal-content {
		background-color: white;
		margin: auto;
		padding: 15px;
		border: 0 !important;
		width: 80%;
		border-radius: 15px;
	}

	/* The Close Button */
	modal-content.close {
		color: #fff;
		float: right;
		font-size: 28px;
		font-weight: bold;
		opacity: 1 !important;
	}

	.close:hover,
	.close:focus {
		color: #000;
		text-decoration: none;
		cursor: pointer;
	}
	span {cursor:pointer; }
		.minus, .plus{
		width: 30px;
		height: 34px;
		background: #f2f2f2;
		border-radius: 4px;
		padding: 4px 5px 8px 5px;
		border: 1px solid #ddd;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
	}
	input{
		height:34px;
		width: 50px;
		text-align: left;
		font-size: 16px;
		border:1px solid #ddd;
		border-radius:4px;
		display: inline-block;
		vertical-align: middle;
	}
	.qty{
		float: left;
		margin: auto;
		padding-bottom: 10px;
	}
	.i-font{
		font-size: 25px;
	}
	/*.main{
	  display:block;
	}*/
	.desc{
		display: none;
		padding-left: 1.25rem;
		color: var(--content-color);
	}

	/* *****************tree view************** */
	ul, #myUL {
	  list-style-type: none;
	}

	#myUL {
	  margin: 0;
	  padding: 0;
	}

	.caret {
	  cursor: pointer;
	  -webkit-user-select: none; /* Safari 3.1+ */
	  -moz-user-select: none; /* Firefox 2+ */
	  -ms-user-select: none; /* IE 10+ */
	  user-select: none;
	}

	.caret::before {
	  content: "\25B6";
	  color: var(--active-color);
	  display: inline-block;
	  margin-right: 6px;
	  transform: rotate(0deg);
	}
	.caret_main {
	  cursor: pointer;
	  -webkit-user-select: none; /* Safari 3.1+ */
	  -moz-user-select: none; /* Firefox 2+ */
	  -ms-user-select: none; /* IE 10+ */
	  user-select: none;
	}

	.caret_main::before {
	  content: "\25B6";
	  color: var(--active-color);
	  display: inline-block;
	  margin-right: 6px;
	  transform: rotate(0deg);
	}

	.caret-down::before {
	  -ms-transform: rotate(0deg); /* IE 9 */
	  -webkit-transform: rotate(0deg); /* Safari */
	  transform: rotate(90deg) !important;  
	}

	.nested {
	  display: none;
	}

	.active {
	  display: block;
	}
	.fa-2x {
		font-size: 1.5em;
	}
@media (min-width: 1200px) {
		.modal-content {
		width: 40% !important;
	}
}
@media (max-width: 576px) {
	.modal-content {
		width: 90%;
	}
}
@media (min-width: 768px) {
	.modal-content {
		width: 80%;
	}
}

@media (min-width: 992px) {
	.modal-content {
		width: 80%;
	}
}