:root {
  --primary-color: #00529E;
  --prime-light: #0178c7;
  --second-color: #121212;
  --third-color: orange;
  --fourth-color: rgb(255, 115, 0);
  --body-color: #f8f8f8;
  --glass: rgba(0, 0, 0, 0.16);
  --white-co: #fff;
  --glass-dark: rgba(0, 0, 0, 0.404);
  --bor: rgb(204, 204, 204) !important;
  --mainColor: #00529E;

  --background-gradient: linear-gradient(30deg, #f39c12 30%, #f1c40f);
  --gray: #34495e;
  --darkgray: #2c3e50;
  --text-color: #131313;
}

body {
  color: var(--text-color) !important;
}

.co-head-sec {
  padding: 13px 20px;
  margin-bottom: 30px;
  box-shadow: 1px 1px 8px #dbdbdb;
  height: 68px;
}


.co-head-sec h6 {
  font-size: 20px;
  margin-top: 15px;
}

.bell-count {
  position: relative;
  top: -41px;
  left: 11px;
  background: var(--primary-color);
  color: var(--white-co);
  float: left;
  font-size: 12px;
  border-radius: 100px;
  height: 21px;
  width: 19px;
  padding: 1px;
  text-align: center;
}

.co-count {
  background: var(--primary-color);
  border: solid 0px var(--third-color);
  color: var(--white-co);
  padding: 9px;
  border-radius: 100px;
  text-align: center;
  font-size: 14px;
  width: 35px;
  height: 35px;
  color: var(--);
  font-weight: 500;
  margin-top: 4px;
}

.co-head-sec button {
  font-size: 12px;
  padding: 5px 15px;
  margin-top: 5px;
}

.mnhe {
  min-height: 540px;
  padding: 27px 50px;
}

.menu-sec h6 span {
  float: right;
}

.menu-sim h4 {
  margin-top: 5px;
  font-size: 16px;
}

.menu-sim h3 {
  color: var(--fourth-color);
}

.nav-menubar {
  position: fixed;
  padding: 0px;
  padding-right: 5px;
  color: var(--white-co);

  z-index: 10000;
  margin-top: 10%;
  cursor: pointer;
  left: -40px;
}

.nav-menubar ul {
  list-style: none;
}

.nav-menubar ul li {
  background: var(--primary-color);
  color: var(--white-co);
  margin-bottom: 10px;
  padding: 5px 15px;
  text-align: right;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  position: relative;
  left: -120px;
  transition: 1s;
}

.nav-menubar ul li:hover {
  left: 0px;
  transition: 1s;
}

.nav-menubar ul li i {
  padding-left: 15px;
}

.menu-fix {
  width: 210px;
  position: fixed;
  z-index: 10000;
  left: 50px;
  top: 130px;
}

.menu-sim-2 h4 {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 16px;
}








.progress-circle {
  position: relative;
  display: inline-block;
  margin: 1rem;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #ebebeb;
}

.progress-circle:after {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: colorload 2s;
  animation: colorload 2s;
}

.progress-circle span {
  font-size: 1rem;
  color: #8b8b8b;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 90px;
  height: 90px;
  line-height: 60px;
  margin-left: -45px;
  margin-top: -45px;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
}

.progress-circle span {
  padding-top: 15px;
  font-weight: 600;
  font-size: 18px;
}

.progress-circle span:after {
  content: "%";
  font-weight: 600;
  color: #8b8b8b;
}

.progress-circle.progress-0:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(90deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-1:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(93.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-2:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(97.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-3:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(100.8deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-4:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(104.4deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-5:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(108deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-6:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(111.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-7:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(115.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-8:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(118.8deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-9:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(122.4deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-10:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(126deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-11:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(129.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-12:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(133.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-13:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(136.8deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-14:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(140.4deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-15:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(129.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-16:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(133.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-17:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(136.8deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-18:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(140.4deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-19:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(144deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-20:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(151.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-21:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(158.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-22:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(161.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-23:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(165.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-24:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(169.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-25:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(180deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-26:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(183.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-27:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(187.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-28:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(190.8deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-29:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(194.4deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-30:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(198deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-31:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(201.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-32:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(205.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-33:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(208.8deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-34:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(212.4deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-35:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(216deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-40:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(234deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-36:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(219.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-37:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(223.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-38:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(226.8deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-39:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(230.4deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-41:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(237.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-42:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(241.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-43:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(244.8deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-44:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(248.4deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-45:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(252deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-46:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(255.6deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-47:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(259.2deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-48:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(262.8deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-49:after {
  background-image: linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(266.4deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-50:after {
  background-image: linear-gradient(-90deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-51:after {
  background-image: linear-gradient(-86.4deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-52:after {
  background-image: linear-gradient(-82.6deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-53:after {
  background-image: linear-gradient(-79.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-54:after {
  background-image: linear-gradient(-75.6deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-55:after {
  background-image: linear-gradient(-72deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-56:after {
  background-image: linear-gradient(-68.4deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-57:after {
  background-image: linear-gradient(-64.8deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-58:after {
  background-image: linear-gradient(-61.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-59:after {
  background-image: linear-gradient(-57.6deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-60:after {
  background-image: linear-gradient(-54deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-61:after {
  background-image: linear-gradient(-50.4deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-62:after {
  background-image: linear-gradient(-46.8deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-63:after {
  background-image: linear-gradient(-43.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-64:after {
  background-image: linear-gradient(-39.6deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-65:after {
  background-image: linear-gradient(-36deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-66:after {
  background-image: linear-gradient(-32.4deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-67:after {
  background-image: linear-gradient(-28.8deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-68:after {
  background-image: linear-gradient(-25.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-69:after {
  background-image: linear-gradient(-21.6deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-70:after {
  background-image: linear-gradient(-18deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-71:after {
  background-image: linear-gradient(-14.4deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-72:after {
  background-image: linear-gradient(-10.8deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-73:after {
  background-image: linear-gradient(-7.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-74:after {
  background-image: linear-gradient(-3.6deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-75:after {
  background-image: linear-gradient(0deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-76:after {
  background-image: linear-gradient(3.6deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-77:after {
  background-image: linear-gradient(7.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-78:after {
  background-image: linear-gradient(10.8deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-79:after {
  background-image: linear-gradient(14.4deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-80:after {
  background-image: linear-gradient(18deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-81:after {
  background-image: linear-gradient(21.6deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-82:after {
  background-image: linear-gradient(25.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-83:after {
  background-image: linear-gradient(28.8deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-84:after {
  background-image: linear-gradient(32.4deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-85:after {
  background-image: linear-gradient(36deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-86:after {
  background-image: linear-gradient(39.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-87:after {
  background-image: linear-gradient(43.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-88:after {
  background-image: linear-gradient(46.8deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-89:after {
  background-image: linear-gradient(50.4deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-90:after {
  background-image: linear-gradient(54deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-91:after {
  background-image: linear-gradient(57.6deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-92:after {
  background-image: linear-gradient(61.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-93:after {
  background-image: linear-gradient(64.8deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-94:after {
  background-image: linear-gradient(68.4deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-95:after {
  background-image: linear-gradient(72deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-96:after {
  background-image: linear-gradient(75.6deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-97:after {
  background-image: linear-gradient(79.2deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-98:after {
  background-image: linear-gradient(82.8deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-99:after {
  background-image: linear-gradient(86.4deg, var(--fourth-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--fourth-color) 50%, #ebebeb 50%, #ebebeb);
}

.progress-circle.progress-100:after {
  background-image: linear-gradient(90deg, rgb(0, 197, 138) 50%, transparent 50%, transparent), linear-gradient(270deg, rgb(0, 197, 138) 50%, #ebebeb 50%, #ebebeb);
}

@-webkit-keyframes colorload {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}

.desc-grp h6 {
  text-align: center;
}

.minpd {
  padding: 12px 20px;
}

.date-co {
  background: var(--primary-color);
  padding: 20px;
}

.date-co h6 {
  font-size: 14px;
}

.date-co h4 {
  font-size: 20px;
  color: var(--white-co);
  margin-bottom: 0px;
  padding-bottom: 10px;
  padding-top: 0px;
  margin-top: 0px;
}

.cal-in {
  background: var(--white-co);
  padding: 20px;
  text-align: center;
}

.cal-in h6 {
  text-transform: uppercase;
  color: var(--darkgray);
}

.cal-in h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 24px;
}

.cal-in h5 {
  text-transform: uppercase;
  color: var(--darkgray);
  padding-top: 0px;
  font-size: 16px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.pull-left {
  float: left;
}

.date-co h4 {
  font-size: 16px;
  color: var(--white-co);
  margin-bottom: 0px;
  padding-bottom: 10px;
  padding-top: 0px;
  margin-top: -10px;
}

.date-co h4 i {
  position: relative;
  top: -18px;
  font-size: 22px;
  color: var(--fourth-color);
}

.mikj {
  min-height: 263px;
}

.mikj h3 {
  font-size: 50px;
  color: var(--primary-color);
}

.mikj ul li {
  font-size: 16px;
}

.participation-time {
  background: var(--body-color);
  padding: 15px;
}

.participation-time h5 {
  color: var(--primary-color);
  font-size: 14px;
}

.participation-time h6 {
  color: var(--second-color);
  font-size: 12px;
}

.cal-bg {
  color: var(--primary-color);
  /* padding: 5px 10px; */
  margin-top: 60px;
  font-size: 22px;
  cursor: pointer;
}

.cal-ri {
  /* background: var(--body-color);
    padding: 10px; */
}

.lefic {
  position: relative;
  left: 25px;
}

.rigic {
  position: relative;
  right: 25px;
}

.profile-participant {
  background: var(--body-color);
  padding: 20px;
}

.pro-pic-minhe-le {
  height: 135px;
  overflow: hidden;
  border: solid 3px var(--primary-color);
}

.pro-pic-minhe-le img {
  position: relative;
  top: -20px;
}

.profile-participant h4 {
  font-size: 14px;
  color: var(--second-color);
  font-weight: 600;
  margin-top: 20px;
  color: var(--fourth-color);
}

.profile-participant h3 {
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 600;
}

.profile-participant h5 {
  font-size: 12px;
  color: var(--second-color);
  font-weight: 500;
}

.profile-participant h6 {
  font-size: 12px;
  color: var(--second-color);
  font-weight: 500;
}

.menu-in {
  padding: 10px;
  color: var(--white-co);
  margin-bottom: 5px;
  margin-top: 5px;
  cursor: pointer;
}

.menu-in h6 {
  color: var(--white-co);
  margin-bottom: 0px;
  font-size: 13px;
}

.task-left {
  padding: 5px;
  text-align: center;
  font-size: 20px;
  color: var(--white-co);
}

.task-l {
  background: var(--white-co);
}

.task-l h6 {
  padding-top: 10px;
  font-size: 14px;
  font-weight: 600;
}

.schedule-li {
  background: var(--white-co);
  padding: 11px;
  margin-top: 12px;
  margin-bottom: 10px;
}

.schedule-li h4 {
  margin-top: 5px;
}

.task-l h6 {
  padding-top: 12px;
  font-size: 14px;
  font-weight: 500;
}

.modal-header h4 {
  margin-top: 0px;
}

.decdur {
  border: solid 0px var(--primary-color);
  padding: 25px;
  background: #00529E26;
}

.cusch {
  background: var(--body-color);
  padding: 7px 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.decdur label {
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
}

.decdur .form-control {
  border: 0px;
  border-radius: 0px;
}

.mt-20 {
  margin-top: 20px;
}

.cusch label {
  margin-top: 0px;
  font-size: 14px;
  cursor: pointer;
}

.sche-sec h5 {
  font-size: 16px;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0px;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
  background-color: var(--primary-color);
}

.multi-sel {
  border: solid 1px var(--primary-color);
  padding: 20px;
}

.bg-added {
  background: #00529E26;
  padding: 10px;
}

.bg-added h6 {
  margin-bottom: 0px;
  font-size: 14px;
}

.bg-added h6 i {
  float: right;
  padding-right: 15px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.pdr {
  padding-right: 10px;
}

table i {
  cursor: pointer;
}

.mt-122 {
  margin-top: 122px;
}

.bor-form {
  border: solid 1px var(--primary-color);
  padding: 20px;
}

.italic {
  font-style: italic;
}

.padle {
  padding-left: 30px;
}

.comp-sec {
  background: var(--body-color);
  padding: 30px 15px;
}

.comp-sec h4 {
  background-color: var(--primary-color);
  padding: 10px;
  color: var(--white-co);
  text-transform: uppercase;
  font-size: 16px;
}

.comp-sec ul {
  list-style: none;
  margin-left: -40px;
}

.comp-sec ul li {
  border-bottom: solid 1px #cfcfcf;
  padding: 8px;
  cursor: pointer;
}

.comp-sec ul li label {
  cursor: pointer;
}

.active-mn {
  background: #cfcfcf;
}




.multiselect-co label:has(.pens) {
  position: relative;
  top: -30px;
}

.pens {
  position: relative;
  left: 15px;
}

.active-tab {
  background: var(--body-color);
  color: var(--primary-color);
}

.mt-0 {
  margin-top: 0px;
  padding-top: 0px;
}


.panel {
  border: solid 1px var(--darkgray);
}

.panel-headding {
  background: var(--primary-color);
  padding: 10px;
}

.panel-headding h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  color: var(--white-co);
  text-transform: uppercase;
  text-align: center;
  font-size: 14px;
}

.panel-headding h6 i {
  cursor: pointer;
}

.panel-body {
  padding: 20px;
}

.card-in {
  box-shadow: 1px 1px 8px #dbdbdb;
  padding: 30px 20px;
  text-align: center;
  margin-bottom: 20px;
  min-height: 160px;
}

.card-in h4 {
  padding-top: 10px;
  font-size: 14px;
  color: var(--primary-color);
}

.card-in h4 i {
  float: right;
  cursor: pointer;
}

.card-in h5 {
  font-size: 13px;
}

.card-in h6 {
  font-size: 11px;
}

.card-in button {
  padding: 5px 15px;
  font-size: 14px;
  margin-top: 10px;
}

.cls {
  position: relative;
  top: 0px;
  right: -10px;

}

.pdr {
  padding-right: 15px;
}

.cardgrp h5 i {
  float: right;
}

.pdr {
  padding-right: 15px;
}

.mn {
  padding-left: 100px;
}

.menu-left {
  display: none;
}

.mt-50 {
  margin-top: 50px;
}

.main-menu-le {
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  position: fixed;
  width: 250px;
  z-index: 10000;
  padding: 30px;
  margin-top: 54px;
  /* /* filter: blur(4px); */
}

.main-menu-le ul li {
  font-size: 14px;
  font-weight: 500;
}

.main-menu-le {
  list-style: none;
}

.main-menu-le li {
  padding: 5px;
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 500;
}

.sub-menu-le {
  margin-left: -0px;
  list-style: none;
  margin-top: 10px;
  padding: 15px;
  border: solid 1px var(--white-co);
  background: var(--body-color);
}

.sub-menu-le li {
  font-size: 14px;
  padding: 3px;
  margin-left: 0px;
  color: var(--second-color);
}

.exam-head {
  margin-top: 80px;
  /* background-image: linear-gradient(to bottom right, #f7007fa1, #0178c7c7); */
  /* background: url('../images/pencil.jpg'); */
  background-size: 100% auto;
  /* padding: 0px 15px; */
}

.exam-head-in {
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  /* filter: blur(4px); */
  margin-bottom: 10px;
  position: relative;
  top: 15px;
  padding: 15px;
}

.exam-head-in h2 {
  font-size: 18px;
  margin-bottom: 0px;
}

.exam-head2 {
  margin-top: 40px;
}

.exam-head2 h5 {
  font-size: 16px;
}

.progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1.5rem !important;
  overflow: hidden;
  font-size: .75rem;
  background-color: #e9ecef;
  border-radius: 0px !important;
}

.progress-bar {
  border-radius: 0px !important;
}

.progress-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  height: 50px;
  text-align: center;
  background-color: #007bff;
  background: linear-gradient(to left, #00d7f9, #9cc7013d);
  transition: width 0.6s ease;
  padding: 10px;
}

.pos-fix {
  position: fixed;
  opacity: 1;
}

.pos-fix .shape1 {
  opacity: .1;
}

.question-window {
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 40px;
  min-height: 300px;
  margin-top: 20px;
}

.question-window h4 {
  font-size: 16px;
  font-weight: 500;
}

.question-window h4 i {
  font-size: 16px;
  font-weight: 500;
}

.options-in {
  border: solid 1px rgb(231, 231, 231);
  margin-top: 20px;
  padding: 10px;
}

.options-in h5 {
  margin-bottom: 0px;
  font-size: 16px;
}

.exam-action {
  margin-top: 20px;
}

.btn-next-prev {
  background: var(--body-color);
  color: var(--primary-color);
  border: 0px;
  padding: 5px 15px;
}

.shape7 {
  background: url('../images/Ellipse16.png');
  background-size: 100% auto;
  width: 200px;
  height: 200px;
  z-index: 10;
  background-repeat: no-repeat;
  position: fixed;
  right: -100px;
  top: 100px;
  opacity: .5;
}

.shape8 {
  background: url('../images/Ellipse29.png');
  background-size: 100% auto;
  width: 200px;
  height: 200px;
  z-index: 10;
  background-repeat: no-repeat;
  position: fixed;
  left: -120px;
  top: 450px;
  opacity: .5;
}

.question-no-window {
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 20px 30px;
  min-height: 300px;
  margin-top: 20px;
}

.qno {
  border: solid 1px #dee2e6;
  padding: 5px;
  text-align: center;
  widows: 50px;
  margin-top: 4px;
  margin-bottom: 4px
}

.question-no-window .col-2 {
  padding-left: 2px;
  padding-right: 2px;
}

.qattended {
  background: rgb(0, 197, 187);
}

.qskipped {
  background: rgb(195, 216, 216);
}

.ques-wins {
  border-bottom: solid 1px rgb(195, 216, 216);
  margin-left: -12px;
  margin-right: -12px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.att-labs h6 {
  font-weight: 500;
  font-size: 12px;
}


.bghemin {
  min-height: 350px;
}

.welcome-msg h5 {
  margin-top: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
}




.tabs-sec {
  margin-top: 40px;
}

.tab-btn {
  border: 0px;
  background: var(--white-co);
  padding: 10px 20px;
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  border-bottom: solid 3px var(--white-co);
  border-bottom: solid 0px var(--primary-color);
  background: #d0d0d0;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
  font-size: 14px;
  margin-bottom: 20px;
  cursor: pointer;
}

.active-tabs {
  border-bottom: solid 3px var(--primary-color);
}

.tabs-sec {}

.progress-sec {
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 20px 20px;
  margin-top: 20px;
  padding-bottom: 0px;
}

.course-card {
  background: rgba(255, 255, 255, 0.54);
  border-radius: 5px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 20px 20px;
  margin-top: 5px;
  margin-bottom: 20px;
}

.course-card h2 {
  font-size: 16px;
  margin-top: 10px;
  font-weight: 600;
}

.course-card p {
  font-size: 14px;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tabs-sec {
  padding: 0px 0px;
  padding-bottom: 0px;
  margin-bottom: 30px;
}


.progress-out {
  background-color: var(--body-color);
  margin-bottom: 20px;
  margin-left: -20px;
}

.progress-in1 {
  background: linear-gradient(30deg, #e1a7ff 30%, rgb(0 123 255 / 33%));
  padding: 16px;
  transition: 1s;
}

.progress-sec h2 {
  font-size: 24px;
  padding-top: 4px;
  font-weight: 600;
}

.progress-sec h6 {
  font-size: 14px;
}

.active-tabs {
  border-bottom: solid 0px var(--primary-color);
  background: linear-gradient(30deg, #ee9add 30%, #d0e2ff);
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
}

.mt-20 {
  margin-top: 20px;
}

.cour-img {
  height: 140px;
  overflow: hidden;
  border-radius: 5px;
}
.userHeadlineContent .path-url{
  padding-top: 10px;
  padding-bottom: 0px;
}
.userHeadlineContent .path-url ul{
  margin-left: -30px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.course-card button {
  border: 0px;
  /* background: linear-gradient(30deg, #66d4cc 30%, rgb(0 123 255 / 33%)); */
  background-color: var(--primary-color);
  padding: 5px 15px;
  font-size: 15px;
  text-transform: uppercase;
  margin-top: -4px;
  /* box-shadow: 0px 10px 20px -10px #1376c5; */
  box-shadow: 0px 10px 20px -10px var(--primary-color);
  float: right;
  font-size: 14px;
  font-weight: 500;
}

.flag-mand {
  background: #00a6ff;
  background: linear-gradient(30deg, #9ad8ee 30%, #00a6ff);
  padding: 0px 15px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  position: absolute;
  right: 20px;
  top: 20px;
  float: right;
  color: white;
  font-size: 34px;
}

.bghemin .welcome-msg h5 {
  margin-top: -80px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.course-card canvas {
  width: 70%;
}

.course-card h2 {
  text-align: left;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.bar-leg {
  width: 100%;
  height: 20px;
}

.leg1 {
  background-color: #66d4cc;
}

.leg2 {
  background-color: rgba(54, 162, 235, 1);
}

.leg3 {
  background-color: #ec9ae0;
}

.course-card h6 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .8px;
  color: var(--text-color);
  margin-left: -15px;
  margin-top: 1px;
  /* text-transform: uppercase; */
}

.course-card h6 span {
  float: right;
}

.chart-legends .row {
  margin-top: 15px;
}

.dashb {
  padding: 0px;
  padding-top: 40px;
  padding-bottom: 10px;
}

.dashb h2 {
  border-bottom: solid 0px #b8b8b8;
  text-align: center;
  padding-bottom: 25px;
  padding-top: 20px;
  box-shadow: 0px 10px 20px -10px #bfdcff;
  margin-bottom: 0px;
}

.dash-foot {
  box-shadow: 1px -11px 12px -9px #bfdcff;
  margin-top: 5px;
  padding: 15px;
}

.chart-legends {
  padding: 20px 30px;
}

.dash-foot button {
  float: none;
  margin-top: 10px;
}

.path-url ul {
  list-style: none;
  margin-left: -38px;
  margin-top: 40px;
}

.path-url ul li {
  display: inline;
  font-size: 14px;
  color: var(--mainColor);
  letter-spacing: 1px;
  font-weight: 500;
}

.home-bg {
  background: #00529e;
  padding: 5px 15px;
  padding-right: 0px;
  margin-right: 10px;
  background: linear-gradient(to right bottom, #6272b1, #6272b1);
}

.home-bg a {
  color: var(--body-color);
}

.home-bg a:hover {
  color: var(--body-color);
  text-decoration: none !important;
}


.dashb button {
  border: 0px;
  background: linear-gradient(30deg, #68b8ee 30%, #17a2b8);
  padding: 6px 25px;
  font-size: 15px;
  color: white;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 8px;
  box-shadow: 0px 10px 20px -10px #80bdff;
  float: none;
}

a:hover {
  text-decoration: none !important;
}


.course-head-single {
  margin-top: 100px;
}

.video-frame {}

.video-frame video {
  width: 100%;
  height: 420px;
  margin-top: 0px;
}

.video-det {
  margin-top: 0px;
}

.thumbs {
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.thumbs i {
  font-size: 18px;
  color: var(--primary-color);
  position: relative;
  top: 2px;
}

.video-det p {
  margin-top: 20px;
  font-size: 14px;
}

.rating-si {
  margin-top: 5px;
  float: right;
  font-size: 18px;
}

.video-bot {
  background: var(--body-color);
  padding: 15px;
  padding-top: 10px;
  background: rgba(255, 255, 255, 0.54);
  border-radius: 5px;
  box-shadow: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
}

.video-bot button {
  border: 0px;
  padding: 5px 15px;
}

.video-bot button i {
  color: #007cc1;
}

.video-bot h5 {
  margin-bottom: 10px;
  margin-top: 0px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
}

.viewsvidbdg {
  position: absolute;
  background: rgba(255, 255, 255, 0.755);
  padding: 5px 15px;
  top: 0px;
  /* color: var(--white-co); */
}



.recent-head h3 {
  font-size: 20px;
  /* letter-spacing: .8px; */
}

.recent-sec {
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 10px;
}

.course-li {
  border-bottom: solid 1px var(--body-color);
  padding: 10px;
}

.course-li h4 {
  font-size: 16px;
}

.course-li h6 {
  color: var(--text-color);
  font-size: 12px;
  letter-spacing: 1px;
}

.course-li img {
  height: 60px;
}

.book-frame embed {
  width: 100%;
  height: 700px;
}

.train-desc {
  color: var(--second-color);
}

.pdd {
  padding: 30px;
}

.pdd h6 span {
  float: right;
}

.menu-sec {
  padding: 0px;
}

.form-sec {
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 30px 50px;
  margin: 0px;
}

.head-top {
  padding: 10px;
  background: var(--white-co);
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 10px;
  margin: 0px;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: auto;
  border: solid 1px var(--bor) !important;
  padding-right: 10px !important;
}

.form-control {
  border: solid 1px var(--bor) !important;
  padding-left: 10px !important;
}

.form-sec select:focus {
  border-radius: 0px;
  border: 0px;
  border-bottom: solid 2px;
  padding-left: 0px;
}

.btn-danger {
  background: rgb(207 0 197);
  background: linear-gradient(to right bottom, #ff8282, #ff8282);
  border: 0px;
  border-radius: 0px;
  padding: 8px;
}

.btn-primary {
  background: rgb(0, 100, 176);
  background: #17a2b8;
  border: 0px;
  border-radius: 0px;
  padding: 8px;
  box-shadow: none;
}

.form-sec label {
  font-size: 14px;
  margin-top: 20px;
  font-weight: 500;
}

.mt-20 {
  margin-top: 20px;
}

.menu-sec-top {
  background: var(--body-color);
  margin-top: 0px;
}

.menu-sec-top button {
  border-radius: 5px;
  border: solid 0px var(--primary-color);
  padding: 8px 30px;
  background: var(--gray);
  background: linear-gradient(30deg, #68b8ee 30%, #17a2b8);
  transition: .5s;
  color: var(--white-co);
  width: 100%;
}

.menu-sec-top button:hover {
  background: linear-gradient(30deg, #42acf3 30%, #0d7484);
}

.ang {
  font-size: 22px;
  color: var(--body-color);
}

.angle {
  padding: 3px 5px;
  background: linear-gradient(30deg, #d797f2 30%, #ea93d3) !important;
  border-bottom-left-radius: 100px;
  border-top-left-radius: 100px;
}

.angri {
  padding: 3px 5px;
  background: linear-gradient(30deg, #d797f2 30%, #ea93d3) !important;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
}

.menu-sec-top {
  background: var(--white-co);
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 20px;
}

.activemnbtn {
  /* background: linear-gradient(30deg, #68b8ee 30%, #17a2b8) !important; */
  background: linear-gradient(to right bottom, #ff8282, #ec9ae0) !important;
  color: var(--white-co);
}

.menu-grid {
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 20px;
  text-align: center;
  margin-top: 20px;
}

.menu-grid h2 {
  font-size: 50px;
  color: #68a9f6;
}

.menu-grid h6 {
  font-size: 14px;
  color: var(--second-color);
  font-weight: 500;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

button:focus {
  outline: 0px dotted;
  outline: 0px auto -webkit-focus-ring-color;
}

.propic img {
  border-radius: 100px;
}

.home-bg a {
  color: var(--white-co) !important;
}

.table img {
  width: 50px;
}

table tr td {
  vertical-align: middle !important;
}

.post-slide .read-more {
  padding: 7px 20px;
  float: right;
  font-size: 12px;
  background: #2196F3;
  color: #ffffff !important;
  box-shadow: 0px 10px 20px -10px #1376c5;
  border-radius: 25px;
  text-transform: uppercase;
}

.list-containe label {
  margin-top: 0px !important;
}

.mt-10 {
  margin-top: 10px;
}

.text-center {
  text-align: center;
}

#imageattachs h6 {
  text-align: center !important;
}

.card-book .train-desc h4 {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
  padding-bottom: 0px;
}

.card-book .train-desc p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
  padding-bottom: 0px;
}

.card-book .ler-card-img {
  height: 230px;
}

.card-book .train-desc {
  border-top: solid 1px #e6e6e6;
}

table button {
  padding: 5px 15px !important;
}

.mtmin {
  margin-top: 15px;
}



/* sud  */

.courdtl {}

.courdtl h4 {
  font-size: 16px;
  margin-top: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #00529e;
  margin-bottom: 10px;
}

.recent-se .course-li {
  background: var(--white-co);
  margin-bottom: 10px;
  padding: 15px;
}

.recent-se .course-li h4 {
  margin-top: 0px;
  font-size: 18px;
}

.video-bot {
  background: var(--body-color);
  padding: 25px;
  padding-top: 15px;
  padding-top: 20px;
  background: rgba(255, 255, 255, 0.54);
  border-radius: 5px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
}

.course-li button {
  border: 0px;
  padding: 5px 15px;
}

.labs h6 span {
  float: right;
}

.frame-full iframe {
  width: 100%;
  height: 625px;
}


.box-se {
  border: solid 1px #9c9c9c;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.box-se i {
  float: right;
  padding-right: 10px;
}



.cour-img {
  height: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, rgb(42, 123, 155) 0%, rgb(87, 199, 133) 50%, rgb(83, 136, 237) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.adcrd button {
  float: none;
}
.det-se h4{
  font-size: 14px;
}

.adcrd h3 {
  font-size: 16px;
  margin-top: 10px;
  font-weight: 600;
  text-transform: uppercase;
}


.co-head {
  padding: 20px 30px;
  background: var(--white-co);
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
}

.co-head h5 {
  padding-top: 5px;
  font-size: 18px;
}

.co-head h6 {
  padding-top: 12px;
}

.form-control {
  background: transparent;
}


.inpsm {
  padding: 6px 10px;
  border-radius: 0px;
}

button {
  border-radius: 0px !important;
}

.btn-sm {
  padding: 8px 10px;
  font-size: 13px;
}

/* .login-form input{
border-radius: 0px;
}
.login-form input:focus{
border-radius: 0px;
background: transparent;
} */

.form-control {
  /* box-shadow: inset 4px 3px 4px #e3e3e3, inset 0px -1px 10px #b1b1b1; */
  /* border: 1px !important; */
  padding: 5px 10px !important;
}

.form-control {
  /* box-shadow: inset 4px 3px 4px #e3e3e3, inset 0px -1px 10px #b1b1b1; */
  /* border: 1px !important; */
  /* box-shadow: 0px 9px 8px -10px #6392b8; */
}

.form-control:focus {
  /* box-shadow: 0px 9px 8px -10px #6392b8; */
  /* border: 1px !important; */
  background: transparent;
}

input::placeholder {
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
}

.table-container {
  border: solid 1px var(--body-color);
}

.form-sec label {
  margin-top: 15px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.mtlab {
  margin-top: 36px;
}

.co-head h5 {
  padding-top: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary-color);
}

.btn {
  padding: 7px 15px;
  font-size: 14px;

}



table thead tr {
  box-shadow: 0px 9px 8px -10px #6392b8;
}

table tbody tr td {
  font-weight: 500;
}

.multiselect-co {
  border: solid 1px var(--bor);
  padding: 20px;
  background: var(--white-co);
  /* box-shadow: 0px 9px 8px -10px #6392b8; */
}

.login-form input {
  border-radius: 0px;
  padding: 12px 25px !important;
  border: solid 1px #F7AB3C !important;
  background: transparent;
  font-size: 18px;
}

.login-form select {
  border-radius: 0px;
  padding: 7px 25px !important;
  border: solid 1px #F7AB3C !important;
  background: transparent;
  font-size: 18px;
  min-height: 55px;
}


.login-form input:focus {
  border-radius: 0px;
  padding: 12px 25px !important;
  border: solid 1px #F7AB3C !important;
  background: transparent;
  font-size: 18px;
}

.bor4 {
  border-bottom: solid 2px red !important;
}


.a4-sheet {
  background: var(--white-co);
  padding: 50px;
  box-shadow: 2px 2px 8px rgb(199, 199, 199);
  min-height: 950px;
}

.a4-sheet h2 {
  font-size: 24px;
  padding-bottom: 0px;
}

.a4-sheet h3 {
  font-size: 18px;
  margin-top: 40px;
}

.a4-sheet p {
  font-size: 14px;
}

.fil-head h3 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.filter-ins label {
  font-size: 13px;
  font-weight: 500;
}

.post-slide .post-title a {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-transform: none;
}

.post-slide .post-content {
  background: #fff;
  padding: 2px 20px 40px;
  border-radius: 15px;
  min-height: 180px;
}

.head-pdf {
  border-top: solid 3px var(--primary-color);
  text-align: right;
  padding-top: 20px;
  margin-bottom: 30px;
}



/*Jithin start here*/
.numericc {
  background-color: white;
  background: white !important;
}

.numericc:active {
  background-color: white;
}

.valborder {

  border: 1px solid red !important;
}

.question {
  width: 75%;
}

.options {
  position: relative;
  padding-left: 40px;
  width: 100%;
}

#options label {
  display: block;
  margin-bottom: 15px;
  font-size: 14px;
  cursor: pointer;
}

.options input {
  opacity: 0;
}

.checkmark {
  position: absolute;
  top: -1px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #555;
  border: 1px solid #ddd;
  border-radius: 50%;
}

.options input:checked~.checkmark:after {
  display: block;
}

.options .checkmark:after {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 300ms ease-in-out 0s;
}

.options input[type="radio"]:checked~.checkmark {
  background: #21bf73;
  transition: 300ms ease-in-out 0s;
}

.options input[type="radio"]:checked~.checkmark:after {
  transform: translate(-50%, -50%) scale(1);
}

.containerEx {
  background-color: #555;
  color: #ddd;
  border-radius: 10px;
  padding: 20px;
  font-family: 'Montserrat', sans-serif;
  max-width: 700px;
}

.containerEx>p {
  font-size: 32px;
}

.question>div>b {
  font-size: 1rem;
}

.questiontrash {
  font-size: 30px;
  cursor: pointer;
}

@media(max-width:576px) {
  .question {
    width: 100%;
    word-spacing: 2px;
  }
}

.qno {
  cursor: pointer;
}

.cpointer {
  cursor: pointer;
}

.options-in:hover {
  background-color: #edeef3;
}

.cpointer>.active {
  background-color: #00c5bb;
  color: white;
}

.activeqsno {
  background-color: #00c5bb;
  color: white;
}

.skippedqsno {
  background-color: #c3d8d8;
  color: black;
}

.exambtnsubmit {
  background: linear-gradient(to right bottom, #ff8282, #ec9ae0);
}

.exampt-30 {
  padding-top: 30px
}

.crtlab label {
  padding-top: 0px;
  margin-top: 0px;
}

.pdm {
  padding: 5px 10px;
}

.labs h6 {
  font-size: 14px;
}


.enq-box {
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 30px 50px;
  margin: 0px;
  margin-top: 20px;
}

.enq-box h3 {
  font-size: 20px;
}

.enq-box h5 {
  font-size: 16px;
}

.enq-box h6 {
  font-size: 12px;
  line-height: 22px;
}

.profile-sec h5 {
  font-size: 16px !important;
  color: var(--text-color);
  text-transform: capitalize;
}

.modal-content2 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 0rem;
  outline: 0;
  min-height: 300px;
}

.cobl {
  color: var(--primary-color);
}

.border-sec {
  /* border: double 1px var(--primary-color); */
  margin: 0px 30px;
}

.welcome-ms h5 {
  text-transform: uppercase;
  letter-spacing: 2px;
}

#phone>label>span>i {
  cursor: pointer;
}

.modalp60 {
  margin-top: 60px;
  width: 100%;
}

.modalpheader {
  /* background: var(--darkgray) ; */
}

.modaldailougewidth {

  max-width: 90% !important;
}

.qbold {
  font-weight: bold;
}


.menu-sec-top {
  background: var(--white-co);
  background: rgba(255, 255, 255, 0.54);
  border-radius: 0px;
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgb(255 255 255 / 52%);
  backdrop-filter: blur(15px);
  padding: 20px;
  margin-top: 10px;
}

.navbar-brand {
  width: 80px !important;
}


#logo_custom {
  margin-top: 0px;
  width: 100px;
}

.form-sec h3 {
  text-transform: uppercase;
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 600;
}

.team-content {
  margin-bottom: 30px;
}

.our-team {
  border: 0px solid !important;
  background: var(--white-co) !important;
  box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.11);
  padding: 30px 0 0px !important;
  margin-top: 20px;
}

.settings-section {
  width: 100%;
}

.our-team .social {
  position: relative !important;
  background: var(--gray) !important;
}

.our-team .social li i {
  color: var(--white-co) !important;
  cursor: pointer;
  font-size: 18px !important;
}

.our-team .social li i:hover {
  color: #979899;
  background-color: transparent !important;
}

.form-sec h3 {
  font-weight: 500;
  text-transform: none;
}

.our-team .title {
  font-weight: 500;
}

.table i {
  font-size: 18px;
}

.containercard {
  width: 250px;
  height: auto;
  background-color: #f1f1f1;
  padding: 5px;
  padding-top: 20px;
  padding-bottom: 20px !important;
  border: 1px solid #ddd;
  text-align: center;
  box-shadow: 5px 5px 10px #ddd, -5px -5px 10px #ddd !important;
}

.containercard1 {
  height: auto;
  background-color: #f1f1f1;
  padding: 5px;
  padding-top: 20px;
  padding-bottom: 20px !important;
  border: 1px solid #ddd;
  text-align: center;
}

/* 
.firstcard,
h5 {
  background-color: #EF90CA;
  position: relative;
  left: -20px;
  color: #fff;
  font-weight: bold;
}

.firstcard {
  width: 200px;
  padding: 10px 0;
  font-size: 20px;
}

.firstcard::after {
  content: "";
  height: 100%;
  width: 10px;
  position: absolute;
  right: -6px;
  top: 0;
  background-color: #79295a;
  transform: skew(10deg);
} */

/* .firstcard::before,
h5::after,
h5::before {
  content: "";
  border: 10px solid;
  border-color: #79295a #79295a transparent transparent;
  position: absolute;
  left: 0;
  bottom: -20px;
}
.firstcard, h5 {
  background-color: #EF90CA;
  position: relative;
  left: -20px;
  color: #fff;
  font-weight: 600;
  padding: 11px;
} */





.secondcard {
  line-height: 1.6;
  font-size: 18px;
  font-style: italic;
  color: #444;
}

.containercard {
  width: 250px;
  height: auto;
  background-color: var(--white-co);
  padding: 5px;
  padding-top: 5px;
  padding-top: 20px;
  border: 1px solid var(--white-co);
  text-align: center;
  box-shadow: 5px 5px 10px #ddd inset, -5px -5px 10px #ddd inset;
  margin-top: 50px;
}

.firstcard {
  width: 100%;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0px;
  color: var(--primary-color);
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-60 {
  margin-top: 60px;
}

.custom-control-label::before {
  position: absolute;
  top: .25rem;
  left: 0;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #dee2e600 !important;
}

.containercard h5 {
  font-size: 14px;
  margin-bottom: 15px;
  font-weight: 600;
}

.cour-img img {
  width: 100%;
  height: 144px;
}

.resetting-shadw {
  background: whitesmoke;
}

.resetting-shadow {
  padding-top: 30%;
  text-align: center;
}

.team-content .name {
  font-size: 20px;
  height: 55px;
}

.our-team button {
  border-radius: 0px !important;
  background: linear-gradient(30deg, #68b8ee 30%, #17a2b8);
  border: 0px;
  color: white;
  margin-bottom: 20px;
  padding: 5px 10px;
}




.tab-det {
  border: solid 20px var(--body-color);
  background: var(--white-co);
  padding: 20px;
  margin-top: 20px;
}

.tab-det label {
  font-size: 14px;
  font-weight: 500;
}

.chat-window {
  background: var(--white-co);
  padding: 10px;
  margin-top: 30px;
}

.chat-window button {
  background: var(--body-color) !important;
  color: var(--primary-color);
}

.chat-window-header {
  border-bottom: solid 1px var(--darkgray);
}

.char-scroll {
  height: 400px;
  overflow-y: scroll;
  padding: 50px;
  scrollbar-width: thin;
}

.chat-le {
  margin-left: 10px;
  font-size: 14px;
}

.chat-le h6 {
  font-size: 12px;
  padding-top: 10px;
}

.chat-le-con {
  box-shadow: -4px -4px 4px #fff, 4px 4px 4px rgb(0 0 0 / 15%);
  padding: 10px 20px;
  float: left;
  background: #ffb6b640;
  border-radius: 10px;
}

.chat-ri {
  margin-left: 10px;
  font-size: 14px;
}

.chat-ri h6 {
  font-size: 12px;
  padding-top: 10px;
  float: right;
}

.chat-ri-con {
  box-shadow: -4px -4px 4px #fff, 4px 4px 4px rgb(0 0 0 / 15%);
  padding: 10px 20px;
  float: right;
  background: #00529E21;
  border-radius: 10px;
}

.search-sugg {
  box-shadow: -4px -4px 4px #fff, 4px 4px 4px rgb(0 0 0 / 15%);
  position: absolute;
  width: 92%;
  background-color: var(--third-color);
  z-index: 1000;
}

.search-li {
  border-bottom: solid 1px var(--fourth-color);
  padding: 10px;
  cursor: pointer;
}

.search-li h5 {
  font-size: 14px;
  margin-bottom: 0px;
  margin-top: 3px;
  margin-left: -15px;
}

.search-li h6 {
  font-size: 12px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -15px;
}

.search-li img {
  width: 35px;
}

.search-li .icname {
  padding: 6px;
}

.chat-co input:focus {
  box-shadow: inset -4px -4px 4px #fff, inset 4px 4px 4px rgb(0 0 0 / 15%) !important;
  border: 0px;
}

.chat-co-le {
  background: var(--white-co);
  margin-top: 10px;
}

.chat-li {
  padding: 10px;
  border-bottom: solid 1px var(--body-color);
  cursor: pointer;
}

.chat-li h5 {
  font-size: 14px;
}

.chat-li h6 {
  font-size: 12px;
}

.chat-window-head {
  border-bottom: solid 1px var(--body-color);
}

.chat-window-head h4 {
  font-size: 14px;
  margin-bottom: 5px;
  text-transform: uppercase;
  padding-top: 10px;
  font-weight: 600;
}

.chat-window-head h6 {
  font-size: 12px;
  margin-top: 0px;
  color: var(--gray);
}

.chat-window-head button {
  margin-top: 10px;
}

.char-scroll {
  border: solid 1px var(--body-color);
  margin-bottom: 20px;
}


.chat-empty {
  width: 100%;
  margin-top: 28px;
  background: var(--white-co);
  min-height: 500px;
}

.chat-empty img {
  width: 30%;
}

.chat-empty h2 {
  color: var(--primary-color) !important;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  margin-top: -50px;
}

.chat-empty h5 {
  text-align: center;
  font-size: 14px;
  margin-top: 0px;
}

.chat-li img {
  width: 80%;
}

.pull-right {
  float: right;
}

p {
  color: black !important;
}

.active-menu-left {
  color: var(--primary-color);
}

.filters-out label {
  cursor: pointer;
}

.course-card button {
  background: linear-gradient(to right bottom, #ff8282, #ec9ae0);
}

.tabs {
  border-bottom: solid 2px var(--primary-color);
}

.tab-bar {
  background: transparent;
  width: 100%;
  text-transform: uppercase;
}

.tab-active {
  border-bottom: solid 3px var(--primary-color) !important;
}

.modal-header .close {
  color: var(--darkgray);
}

.modal-header .close:focus {
  color: var(--darkgray);
}

.modal-header .close:hover {
  color: var(--darkgray);
}

.uploadFuncbtn {
  cursor: pointer;
}

.uploadFuncbtn i {
  font-size: 50px;
  color: orange;
}

table.dataTable>thead>tr>th,
table.dataTable>thead>tr>td {
  border-bottom: 0px solid rgba(0, 0, 0, 0.3);
  background: wheat !important;
  color: black;
  font-size: 14px;
}

.sub-module-item input {
  float: right;
  position: relative;
  top: 15px;
}

.bg-tble-head {
  background: #5ca6a6;
  color: #fff;
}

.modal-header .close {
  color: var(--darkgray);
  position: relative;
  right: 10px;
  top: 14px;
}

.pro-cards h3 {
  margin-bottom: 0px;
  color: var(--mainColor);
  margin-bottom: 10px;
}

.pro-cards h5 {
  font-weight: 600;
  font-size: 23px;
  letter-spacing: 2px;
  color: #555;
}

.line {
  border-bottom: solid 1px #e5e5e5;
}

.questionsview-main {
  background: #fff;
  padding: 30px;
  margin-bottom: 0px;
  border-radius: 5px;
}

.questions input {
  cursor: pointer;
}

.questions label {
  margin-left: 20px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .6px;
}

.questions p span {
  font-size: 20px !important;
  color: #00529e;
  font-weight: 600;
}

.pro-cards.container {
  position: -webkit-sticky;
  /* For Safari */
  position: sticky;
  top: 0;
  padding: 15px 30px;
  padding-bottom: 0px;
  z-index: 1000;
  /* Adjust as needed to stay on top of other elements */
  background-color: white;
  /* Keep it visible over content */
  border-bottom: 0px solid #ddd;
  /* Optional, to separate it visually */
}

.card {
  background-color: #f9f9f9;
  /* Light background for the card */
  padding: 20px;
  border-radius: 8px;
}

.item-title {
  display: inline-block;
  color: rgb(88, 88, 88) !important;
  padding: 6px 30px;
  border-radius: 50px;
  font-size: 16px;
  margin-bottom: 10px;
  border: none;
  background: #f0f0f0;
}

.item-opt {
  display: inline-block;
  padding: 10px;
  border-left: 5px solid #a3baca;
  /* Initial transparent left border */
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  background-color: #fff;
  /* Default background color */
  border-radius: 4px;
  /* Rounded corners for the label */
}

.cardinn {
  margin-bottom: 10px;
}

.cardinn input[type="radio"] {
  display: none;
  /* Hide the default radio button */
}

.cardinn input[type="radio"]:checked+label {
  border-left-color: #00529e;
  /* Left border color when selected */
  background-color: rgb(225, 239, 255);
  ;
  /* Light green background for selected */
}

.progress-bars {
  width: 100%;
  background: #f0f0f0 !important;
  border-radius: 5px;
  margin-top: 0px;
  margin-left: 0px;
}

.pro-cards {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.pro-cards h6 {
  margin-top: 20px !important;
}

.pro-cards h3 {
  margin-bottom: 0px !important;
}

.progresss {
  height: 30px;
  width: 0;
  background-color: #44cea7;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.questions p {
  font-size: 16px !important;
}

.contact-cards {
  justify-content: center !important;
  display: flex !important;
}

.ques {
  border: solid 0px black;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #c5c9d4;
}

.ques h2 {
  text-align: center;
  padding-top: 35px;
}

.cardinn {
  width: 87% !important;
}

.cardinn h3 {
  color: var(--primary-color);
  margin-top: 15px;
  background: white;
  width: 40px;
  padding: 3px 10px;
  padding-left: 10px;
  border-radius: 100px;
}

#tab-nav {
  background-color: rgba(255, 255, 255, 0) !important;
  border-bottom: 1px solid #2E263D40;
  padding: 3px 0px !important;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e600;
}

button {
  border-radius: 5px !important;
}

.nav-tabs button .active {
  border-radius: 15px !important;
}

.nav-tabs .nav-link.active {
  color: white !important;
  background-color: #0F5FFF;
  padding: 5px 25px !important;
  border-color: rgba(255, 255, 255, 0);
}

.card-bg {
  width: 100%;
  height: 100%;
  background-color: white;
  box-shadow: 0px 4px 10px 0px #2E263D33;
  border-radius: 6px;
  padding: 30px 10px;
  min-height: 200px;
}

.card-bg h5 {
  color: #466f85;
  font-size: 16px;
}

.card-bg h2 {
  color: #466f85;
  font-size: 30px;
}

.card-bg h4 {
  text-align: center;
  color: #466f85;
  font-size: 20px;
  font-weight: 600;
}

.filter-bg {
  width: 100%;
  height: 100%;
  background-color: white;
  box-shadow: 0px 4px 10px 0px #2E263D33;
  border-radius: 6px;
  padding: 12px 20px;
  cursor: pointer;
}

.filter-bg h4 {
  font-weight: bold;
  font-size: 20px;
}

.pending-color {
  width: 10px !important;
  height: 10px !important;
  background-color: rgb(235, 217, 54);
  border-radius: 20px;
}

.completed-color {
  width: 10px;
  height: 10px;
  background-color: rgb(92, 255, 86);
  border-radius: 20px;
}

.notStarted-color {
  width: 10px;
  height: 10px;
  background-color: #db3700;
  border-radius: 20px;
}



table thead tr {
  box-shadow: none;
}

.table-container thead {
  background-color: #F6F7FB;

}

.table-container thead tr th {
  padding: 10px 20px;
  padding-bottom: 0px;

}

.table-container tbody tr {

  border-bottom: 1px solid rgba(46, 38, 61, 0.12);
  padding: 10px 20px;
  width: 100% !important;

}

.table-container tbody tr td {
  padding: 10px 20px;



}

.progress-bar {
  background: rgba(15, 95, 255, 0.16);
  padding: 0px !important;
  height: 10px;
  border-radius: 20px !important;
  width: 100px;
  min-width: 100px;
}

.title_img {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  margin-right: 10px;
}


.table-container {
  width: 100%;
  border-collapse: collapse;
}

.table-wrapper {
  max-height: 315px;
  overflow-y: auto;
  display: block;
}

.table-container tbody {
  width: 100%;
}

.table-container td,
.table-container th {
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
  padding: 10px 20px;
}

.table-container td:first-child {
  max-width: 200px;
  /* Adjust as needed */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-container {
  display: flex;
  align-items: center;
}

.title_img {
  flex-shrink: 0;
  margin-right: 10px;
}

.header-banner {
  background: white;
  padding: 50px;
  border-radius: 10px;
  position: relative;
  top: -100px;
  box-shadow: 8px 0px 42px 0px #00000030;
}

.header-banner h3 {
  font-weight: 600;
  color: #466f85;
}

.tab-active {
  background: #466f85;
  color: white;
}

.tab-btn span {
  background: var(--mainColor);
  color: white;
  border-radius: 100%;
  padding: 5px 7px;
}

.progress {
  background: #dedede;
}

.progress-section {
  background: var(--white-co);
  padding: 30px;
  margin-bottom: 20px;
  padding-bottom: 40px;
}

.progress-bar-out {
  background: var(--body-color);
  border-radius: 100px !important;
  overflow: hidden;
}

.progress-in{
  transition: 3s;
  width: 0%;
}
.progress-in-0 {
  background: linear-gradient(90deg, rgba(4, 43, 184, 1) 0%, rgba(87, 160, 199, 1) 50%, rgba(83, 232, 237, 1) 100%);
  padding: 10px;
  height: 30px;
}

.progress-in-1 {
  background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
  padding: 10px;
  height: 7px;
  border: ;
}

.progress-in-2 {
  background: linear-gradient(90deg, rgba(155, 42, 153, 1) 0%, rgba(165, 87, 199, 1) 50%, rgba(237, 83, 152, 1) 100%);
  padding: 10px;
  height: 30px;
}

.pro-in h6 {
  margin-bottom: 5px;
  font-weight: 500;
}

.pro-in h2 {
  margin-top: -4px;
  padding-top: 0px;
  font-size: 20px;
  float: right;
}

.pro-in h2 span {
  font-size: 15px;
}

.videoContainer {
  border-radius: 0px;
}
.userFeedbackContent  h4{
  font-weight: 500;
  font-weight: 600;
  font-size: 20px;
  color: var(--mainColor);
}
.userFeedbackContent .form-control {
  height: auto;
  border: 0px !important;
  padding-left: 10px !important;
  box-shadow: 1px 1px 8px #00000021;
}
.userFeedbackContent textarea{
  min-height: 150px;
}
.userHeadlineContent h2{
  font-size: 20px;
}
.prog h3{
  font-size: 18px;
  padding-top: 15px;
  font-weight: 600;
}
.prog h3 span{
  background: var(--darkgray);
  font-size: 18px;
  padding: 2px 10px;
  color: white;
  border-radius: 100px;
}
.prog h5{
  padding-top: 10px;
  text-align: right;
}
#mandstatus i{
  color: green;
}
#mandstatus span{
  font-size: 16px;
  color: var(--darkgray);
}
#pendStatus i{
  color: green;
}
#pendStatus span{
  font-size: 16px;
  color: var(--darkgray);
}
.journey-headding{
  padding: 15px;
  background: #00509d;
  color: var(--white-co);
}
.journey-headding h5{
  color: var(--white-co);
}
.journey-scroll{
  padding: 20px;
}
.rigic {
  background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
  float: right;
  right: 0px;
  padding: 3px 5px;
  border-radius: 6px;
}

.pointerCursor{
  cursor: pointer !important;
}

.pointerCursorNone{
  cursor: default !important;
}