@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
html, body {
      font-family: "Lexend", sans-serif;
      font-optical-sizing: auto;
      font-weight: 300;
      font-style: normal;
      padding: 0;
      margin: 0;
      background-color: #ffffff;
      overflow: hidden;
  }
  ul li{list-style: none;}
  ul li a {color: #333;text-decoration: none;}
  .container {max-width: 90%;}
.canvas {position: relative; padding: 0 30px; padding-right: 0;}  
.navbar {padding: 0 30px; padding-bottom: 10px; padding-top: 5px;}
 .link {cursor: pointer;}
 .breadcrumbs  {position: absolute;}
 .breadcrumbs .link {position: relative; margin-left: 25px!important;}
 .breadcrumbs .link::after{content: ""; width: 20px; height: 1px; background-color: #ccc; position: absolute; right: -25px; top: 10px;}
 .breadcrumbs .link.active {color: #c53a3a; pointer-events: none;}
 .breadcrumbs .link.active::after{display: none;}
 .bg-light-green {background-color: #e2ffde;}
 .bg-light-blue {background-color: #c4d9fb;}
 .bg-light-orange {background-color: #fbe7c4;}
 .bg-light-orange-1 {background-color: #e9ddc8;}
 .main-data {height: 92vh; display: none; overflow: hidden; overflow-y: auto; padding-left: 50px; }
 .main-data.active { display: flex;}
 .main-data  .left-content { padding-top: 70px ;}
 .main-data .card img {max-width: 100px; margin: 0 auto;}
 .main-data .card.active {display: flex; }
 .multiple-cards .card h2{font-size: 20px; margin-top: 10px;}
 .multiple-cards .card h5{font-size: 15px; font-weight: 400;}
 .multiple-cards .card {margin: 0 0px; margin-bottom: 0;}
 .multiple-cards .card .cont {width: 100%; margin-bottom: 10px;}
 .sidebar {border-left: solid 1px #ccc; height: 92vh;  transition: all ease 0.5s; width: 35px; padding-top: 70px; position: absolute; z-index: 0; }
 .sidebar ul {margin-left: 0px; padding: 0;  position: absolute;z-index: 10; width: 300px; }
 .sidebar ul li {list-style: none; padding: 0 0 40px; padding-left: 50px; position: relative; }
 .sidebar ul li::after{content: ""; width: 20px; height: 20px; z-index: 10;   position: absolute; left: -10px; top: 2px; background-size: 20px; border: solid 1px #999; border-radius: 100%; background-color: #fff;}
 .sidebar ul li.visited::after{content: ""; width: 20px; height: 20px; z-index: 10; background: url("../images/menu-star.svg") 0 0 no-repeat;  position: absolute; left: -10px; top: 2px; background-size: 20px;border:0}
 .sidebar ul li.visited:before{content: ""; width: 1px; height: 100%; z-index: 10;   position: absolute; left: 0px; top: 20px; background-size: 20px;border:0; background-color: #e33a3a;}
 .sidebar ul li.active::after { background: url("../images/menu-icon.png") 0 0 no-repeat; width: 25px;height: 25px; background-size: 25px; border:0; left: -13px;}
 .sidebar ul li.active a{pointer-events: none;}
 .sidebar:hover {width:300px;background-color: #fff; border-right: solid 1px #ccc;z-index: 9999;}
 .sidebar ul li a {color: #000; text-decoration: none; font-size: 18px; opacity: 0; transition: all ease 0.5s;}
 .sidebar ul li a:hover {color: #c82020;}
 .sidebar:hover ul li a{opacity: 1;}
 .text-red {color: #931717;}
 .main-heading {font-size: 36px; color: #931717;font-weight: 400;}
 .sub-heading {font-size: 20px; color: #931717;font-weight: 400;}
.right-sidebar { border-left: solid 1px #ccc;border-right: solid 1px #ccc; height: 92vh;}
.right-sidebar .head {background-color: #eee; padding: 40px 50px; position: relative;}
.right-sidebar .head .arrow {position: absolute; left: -20px; top: 40px;}
.right-sidebar .head .arrow img {max-width: 40px;}
.heading-with-image {position: relative; margin-top: 50px;}
.heading-with-image img {max-width: 100%; width: 100%;}
.heading-with-image .heading {position: absolute; background-color: #FFE8A3; padding: 10px;color: #333; font-size: 24px; left: 0; top: -25px;z-index: 99;}
.heading-with-image .cont {background-color: #eee; padding: 20px;}
.sidemenu li a {display: block; padding: 10px 0;}
.toggle-sidebar {position: absolute; right: 0; width: 35%; padding:50px 25px; top: 0; height: 100%;z-index: 999; background-color: #f9f9f9; overflow-y: auto; transition: all ease-in-out .5s; right: -100%;}
.toggle-sidebar.open{right: 0;}
.toggle-sidebar img {width: 100%;max-width: 100%;}
.toggle-sidebar .close {position: absolute; right: 10px; top: 10px;}
img {max-width: 100%;}
.toggle-sidebar ul {margin-top: 30px;}
.toggle-sidebar ul li{list-style: disc; padding: 10px 0;}
/* .tree-content {position: relative;} */
/* .tree-content::before {content: ""; width: 107%; position: absolute; left: -50px; z-index: 99; top: 30px; height: 1px; background-color: #ccc;} */
.line-sep {  width: 107%; position: absolute; left: -50px; z-index: 0; top: 40px; height: 1px; background-color: #ccc;}
.fixed-btn {position: fixed; width: 9.6%; bottom: 0; right: 0; background-color: rgb(245, 228, 232); text-decoration: none; display: flex; flex-direction: column; align-items: center; text-align: center; color: #333; height: 150px; justify-content: center; padding: 10px; transition: all ease .3s;}
.fixed-btn img {margin-top: 10px; animation: arrow 1.5s infinite; position: absolute; bottom: 15px;}
.fixed-btn:hover {background-color:rgb(232, 200, 208) ; color: #333;}
 
.multiple-cards .heading-with-image {display: flex;  justify-content: flex-start; align-items: flex-start; text-align: left;}
.multiple-cards .heading-with-image .cont {min-height: 210px;}
.multiple-cards.h-auto .heading-with-image .cont {min-height: 150px; padding-top: 30px;}
.multiple-cards .heading-with-image .heading{background-color: #F5AD20; left: 22px;}
.mt--10 {margin-top: -150px;}
.multiple-cards.card-with-image  .cont {background-color: #E8F0F1; padding-top: 50px!important; width: 100%; min-height: 225px;  padding: 0!important;  }
.multiple-cards.card-with-image  .cont p {margin-left: 15px; margin-right: 15px;}
.multiple-cards.card-with-image   .heading{ max-width: 100%; top: 0!important;   left: 0;background-color: #A0DFC1; display: flex; width: auto; font-size: 18px; position: relative;}
.multiple-cards.card-with-image   .heading img {width: 30px; margin-right: 10px  }
 
.multiple-cards.card-brown  .cont{ background-color: #F1EEE8; min-height: 260px!important;}
.multiple-cards.card-brown .heading {background-color: #DFBEA0; font-size: 22px; min-height: 70px;}

@keyframes arrow {
  0% {bottom: 15px;}
  50% {bottom: 25px;}
  100% {bottom: 15px;}
}

.scrollbar::-webkit-scrollbar {
  width: 5px;
  margin-right: -10px;
}
.scrollbar::-webkit-scrollbar-track {
  background: #eee;
}
.scrollbar::-webkit-scrollbar-thumb {
  background: #ccc;
}