.card.left-right .card-body {
	padding: 16px 30px;
}

.progress-dashboard .progress {
	background-color: #24242400;

	position: relative;
	margin: 35px 0;
	height: 65px;
	width: 100%;
	border: 2px solid #FF6500;
	border-radius: 18px;
	padding: 5px;
}

.progress-dashboard  .progress-done {
	background: linear-gradient(to left, #FF6500, #FF6500);
	
	display: flex; 
	justify-content: center; 
	transition: 1s ease 0.3s;
	border-radius: 14px;
}
.cur-package{

/*    margin-top: 1.5rem;*/
text-align: center;
color: #fff;
font-weight: 1000;
font-size: 40px;
}
.next-package{
	background-color: #FF6500;
	padding: 4px;
	font-weight: 1000;
	font-size: 40px;
	color: #e9e8e8;
	text-align: center;
	margin-top: 5.0rem !important;
	border-radius: 18px;
}
.tree-right-pack{ 
/*    background-color: #ff641cbd;*/
border-radius: 6px;
font-size: 31px;
font-weight: 1000;
min-width: 140px;
text-align: center;
/*    color: #212529;*/
/*    box-shadow: 0 1rem 3rem rgb(20 13 13 / 85%) !important;*/
}


.toggle {
	position: relative;
	display: inline-block;
}

.toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: relative;
	display: block;
	cursor: pointer;
	background-color: #333;
	transition: 0.4s;
	width: 60px;
	height: 30px;
	border-radius: 30px;
}

.slider:before {
	content: "";
	position: absolute;
	height: 24px;
	width: 24px;
	left: 3px;
	top: 3px;
	background-color: #fff;
	transition: 0.4s;
	border-radius: 50%;
	z-index: 2;
}

.slider:after {
	content: "OFF";
	color: white;
	font-size: 12px;
	position: absolute;
	top: 7px;
	left: 30px;
	transition: 0.4s;
	z-index: 1;
}

input:checked + .slider {
	background-color: #fd5d00;
	box-shadow: 0 0 6px #fd5d00;
}

input:checked + .slider:before {
	transform: translateX(30px);
}

input:checked + .slider:after {
	content: "ON";
	left: 10px;
}

.gradient-bg-link {
	background-color: #ff9933;
	background-image: linear-gradient(to right, #ffa700, #ff6500);
	display: inline-block;
	padding: 10px 20px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	border-radius: 10px;
	box-shadow: 0 10px 20px rgba(79, 0, 0, 0.4);
	transition: all 0.3s ease; /* Add a smooth transition for the hover effect */

}
.gradient-bg-link:hover {
	/* Change the gradient direction or colors on hover */
	background-image: linear-gradient(to right, #ff6500, #ffa700);
	color: #fff;
}
 
.tree {
  margin: auto;
  width: 100%;  

}
.tree ul {
      padding-top: 20px; position: relative;
      margin-left: 20px;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
}

.tree li {
      float: left; text-align: center;
      list-style-type: none;
      position: relative;
      padding: 20px 5px 0 5px;
      
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
      content: '';
      position: absolute; top: 0; right: -540%; 
      border-top: 1px solid #ccc;
      width: 720%; height: 20px;
}
.tree li::after{
      right: auto; left: -690%;
      border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
      display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
      border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
      border-right: 1px solid #ccc;
      border-radius: 0 5px 0 0;
      -webkit-border-radius: 0 5px 0 0;
      -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
      border-radius: 5px 0 0 0;
      -webkit-border-radius: 5px 0 0 0;
      -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
      content: '';
      position: absolute; top: 0; left: 0%;
      border-left: 1px solid #ccc;
      width: 0; height: 20px;
}

.tree li a{
      border: 1px solid #ccc;
      padding: 5px 10px;
      text-decoration: none;
      color: #666;
      font-family: arial, verdana, tahoma;
      font-size: 11px;
      display: inline-block;
      
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
      background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
      border-color:  #94a0b4;
}
.treediv{
      margin-top: -22px !important; 
      align-items: center;
}
.fiximg{
      width: 100px;
}
.treeul{
      margin-left: 50px !important;
}
.leftimg{
      width: 100px;
      margin-left: -140px !important;
}
.rightimg{
      width: 100px; 
      right: -250px !important; 
      margin-right: -120px !important;
}
.cardstyle{
      background-color:#000;
}
.canvasjs-chart-credit{
      display: none !important;
}