body {
	font-family: "Raleway", sans-serif;
	font-size: 14px;
}

/* Global Css */

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
}

.font2 {
	font-family: "Mouse Memoirs", sans-serif;
}

.heading-color,
.heading-color:hover {
	color: #125c84;
}
.heading-color1,
.heading-color1:hover {
	color: #fff;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.dahboard-bg {
	background: url(../images/dashboard_bg.png) repeat center;
	background-size: cover;
	height: 100%;
}

.bg-gradient-white {
	background: linear-gradient(
		90deg,
		rgb(255 255 255 / 75%) 82%,
		rgba(255, 255, 255, 0.19) 100%
	);
}

/* Hover Shadow */

@keyframes hover {
	50% {
		transform: translateY(-3px);
	}

	100% {
		transform: translateY(-6px);
	}
}

@keyframes hover-shadow {
	0% {
		transform: translateY(6px);
		opacity: 0.4;
	}

	50% {
		transform: translateY(3px);
		opacity: 1;
	}

	100% {
		transform: translateY(6px);
		opacity: 0.4;
	}
}

.btn-blue {
	background: #125c84;
	color: #fff;
	border-radius: 12px;
	padding: 6px 12px;
	display: inline-block;
	position: relative;
	transition-duration: 0.3s;
	transition-property: transform;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	font-size: 14px;
}

.btn-blue:hover {
	box-shadow: rgb(18, 92, 132, 0.1) 0px 20px 25px -5px,
		rgb(18, 92, 132, 0.2) 0px 10px 10px -5px;
	background: rgb(18, 92, 132, 0.1);
	border: 1px solid #125c84;
	color: #125c84;
	font-weight: 600;
	transition: all 0.5s ease;
	transform: scale(1.05);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
}

.btn-red {
	background: #8e1b4c;
	color: #fff;
	border-radius: 12px;
	padding: 6px 12px;
	display: inline-block;
	position: relative;
	transition-duration: 0.3s;
	transition-property: transform;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	font-size: 14px;
}

.btn-red:hover {
	box-shadow: rgb(142, 27, 76, 0.1) 0px 20px 25px -5px,
		rgb(142, 27, 76, 0.2) 0px 10px 10px -5px;
	background: rgb(142, 27, 76, 0.1);
	border: 1px solid #8e1b4c;
	color: #8e1b4c;
	font-weight: 600;
	transition: all 0.5s ease;
	transform: scale(1.05);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
}

.btn-green {
	background: #198754;
	color: #fff;
	border-radius: 12px;
	padding: 6px 12px;
	display: inline-block;
	position: relative;
	transition-duration: 0.3s;
	transition-property: transform;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	font-size: 14px;
}

.btn-green:hover {
	box-shadow: rgb(25, 135, 84, 0.1) 0px 20px 25px -5px,
		rgb(25, 135, 84, 0.2) 0px 10px 10px -5px;
	background: rgb(25, 135, 84, 0.1);
	border: 1px solid #198754;
	color: #198754;
	font-weight: 600;
	transition: all 0.5s ease;
	transform: scale(1.05);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
}

.btn-tred {
	background: #dc3545;
	color: #fff;
	border-radius: 12px;
	padding: 6px 12px;
	display: inline-block;
	position: relative;
	transition-duration: 0.3s;
	transition-property: transform;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	font-size: 14px;
}

.btn-tred:hover {
	box-shadow: rgb(220, 53, 69, 0.1) 0px 20px 25px -5px,
		rgb(220, 53, 69, 0.2) 0px 10px 10px -5px;
	background: rgb(220, 53, 69, 0.1);
	border: 1px solid #dc3545;
	color: #dc3545;
	font-weight: 600;
	transition: all 0.5s ease;
	transform: scale(1.05);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
}

/* Global Css */

/* login form css */

#vertical-carousel .carousel-item-prev:not(.carousel-item-end),
#vertical-carousel .active.carousel-item-start {
	transform: translate3d(0, -100%, 0);
	-webkit-transform: translate3d(0, -100%, 0);
	-moz-transform: translate3d(0, -100%, 0);
	-ms-transform: translate3d(0, -100%, 0);
	-o-transform: translate3d(0, -100%, 0);
}

#vertical-carousel .carousel-item-next:not(.carousel-item-start),
#vertical-carousel .active.carousel-item-end {
	transform: translate3d(0, 100%, 0);
	-webkit-transform: translate3d(0, 100%, 0);
	-ms-transform: translate3d(0, 100%, 0);
	-moz-transform: translate3d(0, 100%, 0);
	-o-transform: translate3d(0, 100%, 0);
}

#vertical-carousel .carousel-indicators {
	top: 0;
	margin: auto;
	height: 100%;
	margin-left: 3%;
	left: auto;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	align-items: center;
	right: auto;
	bottom: auto;
}

#vertical-carousel .carousel-indicators::before {
	content: "";
	background: #fff;
	position: absolute;
	top: 0px;
	bottom: 0;
	left: 7px;
	width: 1px;
	height: 100vh;
}

#vertical-carousel .carousel-indicators [data-bs-target] {
	background: none;
	border: 1px solid white;
	border-radius: 12px;
	width: 14px;
	height: 14px;
	margin: 0 auto;
	background: #fff;
	opacity: 1;
}

#vertical-carousel .carousel-indicators li {
	position: relative;
}

#vertical-carousel .carousel-indicators li:after {
	content: "";
	background: #125c84;
	height: 10px;
	width: 10px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0 auto;
}

#vertical-carousel .carousel-indicators li.active {
	background: white;
}

#vertical-carousel .carousel-indicators li.active::after {
	background: #8e1b4c;
}

#vertical-carousel .carousel-item {
	height: 100vh;
}

#vertical-carousel .carousel-inner {
	box-shadow: 7px 0px 7px 0px rgba(0, 0, 0, 0.4);
}

#vertical-carousel .carousel-item::after {
	content: "";
	box-shadow: inset 40px 0px 40px 0px rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.slider-shadow {
	position: absolute;
	top: 20%;
	left: 70px;
	width: 40%;
}

.slider-shadow h2 {
	font-size: 50px;
	font-family: "Mouse Memoirs", sans-serif;
}

.slider-shadow h2,
.slider-shadow h4 {
	font-weight: normal;
}

.slider-shadow p {
	font-weight: 600;
}

/* .slider-shadow1::after {
    content: "01";
    font-weight: 700;
    font-size: 120px;
    opacity: 0.2;
    position: absolute;
    top: -70px;
    left: 0px;
    font-family: 'Raleway', sans-serif;
}

.slider-shadow2::after {
    content: "02";
    font-weight: 700;
    font-size: 120px;
    opacity: 0.2;
    position: absolute;
    top: -70px;
    left: 0px;
    font-family: 'Raleway', sans-serif;
}

.slider-shadow3::after {
    content: "03";
    font-weight: 700;
    font-size: 120px;
    opacity: 0.2;
    position: absolute;
    top: -70px;
    left: 0px;
    font-family: 'Raleway', sans-serif;
}

.slider-shadow4::after {
    content: "04";
    font-weight: 700;
    font-size: 120px;
    opacity: 0.2;
    position: absolute;
    top: -70px;
    left: 0px;
    font-family: 'Raleway', sans-serif;
} */

.login_form {
	background: url(../images/login/loginbg-left.png) repeat center;
	background-size: cover;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0 auto;
	padding: 20px 0;
	overflow-y: auto;
}

.login_form .form-floating i {
	position: absolute;
	right: 15px;
	top: 25px;
	color: rgba(177, 177, 177, 0.3);
}

.login_form .form-floating .up_down_arrows {
	color: #f7600e;
	font-size: 20px;
}

.login_form .text-bottom a {
	color: #125c84;
}

.login_form h1,
.login_form h2 {
	color: #125c84;
}

.login_form h1 {
	font-weight: 300;
	font-size: 50px;
	line-height: 35px;
}

.login_form h2 {
	font-weight: 600;
	font-size: 40px;
}

.equal {
	display: flex;
	flex-wrap: wrap;
}

.equal > [class*="col-"] {
	display: flex;
	flex-direction: row;
}

/* login form css */

/* Dashboard css */

/* Sidebar css */

.wrapper {
	width: 100%;
}

#sidebar {
	width: 285px;
	/* position: fixed; */
	top: 0;
	/* left: -250px; */
	/* height: 100vh; */
	z-index: 999;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	box-shadow: 4px 8px 8px rgb(0, 0, 0, 0.2);
	/* overflow-y: scroll; */
}

#sidebarCollapse {
	display: none;
}

#sidebar.active ul.components li a {
	display: flex;
	align-items: center;
	width: 100%;
}

#sidebar.active .logo {
	padding-top: 35px;
	height: 130px;
}

#sidebar .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 900;
	padding: 15px;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	height: 90px;
}

@media (prefers-reduced-motion: reduce) {
	#sidebar .logo {
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}
}

#sidebar ul.components {
	padding: 0;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	#sidebar ul.components {
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}
}

#sidebar ul li {
	font-size: 12px;
	font-weight: 500;
}

#sidebar ul li > ul {
	background: #d2d2d2;
	padding: 0;
}

#sidebar ul li > ul li {
	list-style: none;
}

#sidebar ul li > ul li i {
	margin-left: 10px;
}

#sidebar ul li a {
	padding: 15px;
	display: flex;
	align-items: center;
	color: #333333;
	border-bottom: 1px solid #999;
	text-decoration: none;
	position: relative;
	font-weight: 600;
}

#sidebar ul li a i {
	margin-right: 15px;
	font-size: 25px;
	color: #125c84;
}

#sidebar ul li.active > a {
	background: #8e1b4c;
	color: #fff;
}

#sidebar ul li.active > a i {
	color: #fff;
}

#sidebar ul li a:hover {
	background: #125c84;
	color: #fff;
}

#sidebar ul li a:hover i {
	color: #fff;
}

#sidebar .nav-item > .nav-link:after {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.255em;
	vertical-align: 0.255em;
	content: "";
	border-top: 0.5em solid;
	border-right: 0.5em solid transparent;
	border-bottom: 0;
	border-left: 0.5em solid transparent;
	display: block;
	position: absolute;
	right: 20px;
}

#sidebar.active {
	left: 0;
}

#dismiss {
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	background: #125c84;
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	color: #fff;
	display: none;
}

#dismiss:hover {
	background: #8e1b4c;
	color: #fff;
}

.overlay {
	display: none;
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	z-index: 998;
	opacity: 0;
	transition: all 0.5s ease-in-out;
	top: 0;
}

.overlay.active {
	display: block;
	opacity: 1;
}

@media (max-width: 768px) {
	#sidebar {
		left: -285px;
		position: fixed;
		height: 100vh;
		overflow-y: scroll;
		box-shadow: none;
	}

	#dismiss {
		display: block;
	}

	#sidebarCollapse {
		display: inline-block;
	}
}

.navbar-db {
	padding: 15px 12px;
	background: #125c84;
	border: none;
	border-radius: 0;
	-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
	height: 50px;
}

#content {
	width: 100%;
	padding: 0;
	min-height: 100vh;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.navbar-db .dropdown {
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
}

.navbar-db .dropdown-menu li a i {
	margin-right: 15px;
	font-size: 16px;
}

.button-main {
	appearance: button;
	background-color: #67951e;
	border: solid transparent;
	border-radius: 12px;
	border-width: 0 0 4px;
	box-sizing: border-box;
	color: #000;
	cursor: pointer;
	display: inline-block;
	font-weight: 600;
	margin: 0;
	outline: none;
	overflow: visible;
	padding: 8px 26px;
	text-align: center;
	touch-action: manipulation;
	transform: translateZ(0);
	transition: 0.3s ease-in-out;
	user-select: none;
	-webkit-user-select: none;
	vertical-align: middle;
	white-space: nowrap;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	-o-border-radius: 12px;
	position: relative;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-ms-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	text-transform: capitalize;
	font-size: 14px;
	height: fit-content;
}

.button-main:after {
	background-clip: padding-box;
	background-image: linear-gradient(
		to bottom,
		#acd91c 0%,
		#7ebb0b 40%,
		#7ebb0b 100%
	);
	border: solid transparent;
	border-radius: 12px;
	border-width: 0 0 4px;
	bottom: -4px;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	-o-border-radius: 12px;
}

.button-main::before {
	content: "";
	background: #fdffd8;
	width: 12px;
	height: 6px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	position: absolute;
	top: 6px;
	left: 4px;
	transform: rotate(-40deg);
}

.button-main:hover {
	color: #fff;
	box-shadow: rgb(126, 187, 11, 0.1) 0px 20px 25px -5px,
		rgb(126, 187, 11, 0.4) 0px 10px 10px -5px;
	transition: all 0.5s ease;
	transform: scale(1.05);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
}

.main-input {
	border-radius: 0;
	border: 0;
	box-shadow: 0px 0px 12px 0px rgb(0 0 0 / 20%);
	font-weight: 600;
}

.form-floating > label {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
}

.navbar-db .dropdown-menu li a {
	font-size: 14px;
	font-weight: 500;
	padding: 10px 15px;
	display: flex;
}

.navbar-db .dropdown-menu li:not(:last-child) a {
	border-bottom: 1px solid #ddd;
}

.navbar-db .dropdown-menu.show {
	box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
	border: 0;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	z-index: 99999;
}

.navbar-db .dropdown-item:focus,
.navbar-db .dropdown-item:hover {
	color: #fff;
	background-color: #125c84;
}

.cb1-pip .comment-box {
	margin-bottom: 0.5rem;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

/* Dashboard css */

.dashboard-bg {
	background: url(../images/dashboard_bg.png) repeat center;
	background-size: cover;
	background-attachment: fixed;
}
.dashboardBgAdditional {
	background: url(../images/dashboard_bg.png) repeat center;
	background-size: cover;
	background-color: #fff;
}
.dashboard-bg1 {
	background: url(../images/userflow/bgSpace.jpg) repeat center;
	background-size: cover;
	background-attachment: fixed;
}

.progress-card {
	box-shadow: 0px 0px 13px 0px rgb(0 0 0 / 0.12);
	padding: 20px;
	border-radius: 10px;
}

.progress-card .progress-bar {
	position: relative;
	height: 100px;
	overflow: visible;
	color: #000;
	flex-direction: unset;
	justify-content: flex-start;
}

.progress-card-mu {
	padding: 25px;
}

.progress-card.progress-card-mu .progress-bar {
	justify-content: center;
}

.progress-card .progress-bar div {
	position: absolute;
	height: 100px;
	width: 100px;
	border-radius: 50%;
}

.progress-card .progress-bar div span {
	position: absolute;
	font-size: 25px;
	line-height: 84px;
	height: 84px;
	width: 84px;
	left: 8px;
	top: 8px;
	text-align: center;
	border-radius: 50%;
	background-color: white;
	font-weight: 600;
}

.progress-card .progress-bar .background {
	background-color: #b3cef6;
}

.progress-card .progress-bar .rotate {
	clip: rect(0 50px 100px 0);
	background-color: #4b86db;
}

.progress-card .progress-bar .left {
	clip: rect(0 50px 100px 0);
	opacity: 1;
	background-color: #b3cef6;
}

.progress-card .progress-bar .right {
	clip: rect(0 50px 100px 0);
	transform: rotate(180deg);
	opacity: 0;
	background-color: #4b86db;
}

@keyframes toggle {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* ---------------------------------------------------
    Manage User Page
----------------------------------------------------- */

.fa-trash-can {
	color: #dc3545;
}

.modal-header-main {
	background: #125c84;
	color: #fff;
}

.breadcrumb li a {
	color: #125c84;
}

.data-tables thead {
	background: #125c84;
}

.data-tables ul li a {
	color: #8e1b4c;
}

.data-tables tbody tr {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
}

.icon-gradient {
	display: block;
	background: linear-gradient(
		to right top,
		#125c84,
		#395389,
		#5e4482,
		#7d316d,
		#8e1b4c
	);
	/* background: -webkit-linear-gradient(#9c47fc, #356ad2); */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------
    Manage E-learning
----------------------------------------------------- */

.elearning-col4 {
	background: url(../images/manage-data/elearing-sidebg.jpg) no-repeat left;
	background-size: cover;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.elearning-col4-grey {
	background: #f0f0f0;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.md-card {
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	cursor: pointer;
}

/* Setting page */

.s-icon-circle {
	width: 100px;
	height: 100px;
	background: #125c84;
}

/* Learning path */

.vm-col {
	border-radius: 10px;
}

.vm-title {
	width: 120px;
	margin: -20px auto 5px;
	color: #8e1b4c;
}

.vm-imgsec {
	background: #f0f0f0;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	width: 100%;
	position: relative;
	text-align: center;
}

.vm-col1 {
	position: relative;
}

.vm-col1::after {
	content: "\f178";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 20px;
	position: absolute;
	right: -23px;
}

.vm-col2::after {
	content: "\f178";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 20px;
	position: absolute;
	right: -22px;
}

.vm-row3 {
	width: 75%;
}

/* voice-practice css */

.volume-btn {
	background: #125c84;
	color: #fff;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

/* manage-license css */

.manage-license-modal .modal-content {
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border: 2px solid #125c84;
}

.header_image {
	height: 300px;
	width: 100%;
	object-fit: cover;
}

.testimonial_bg {
	background: #f46d55;
	height: 500px;
}

.testimonial_bg .user_image {
	height: 150px;
	width: 150px;
}

.color-orange {
	color: #f46d55;
}

.bg-orange {
	background-color: #f46d55;
}

.color-black {
	color: #242626;
}

.bg-yellow {
	background-color: #f9aa25;
}

.btn-green {
	background-color: #4e7524;
	box-shadow: none;
}

.color-green {
	color: #4e7524;
}

.bg-light-grey {
	background-color: #f0f0f0;
}

.border-end-black {
	border-right: 1px solid #242626 !important;
}

.fs-18 {
	font-size: 18px !important;
}

.fs-14 {
	font-size: 14px !important;
}

.fs-12 {
	font-size: 12px !important;
}

/* Abhishek Css */

.fs-16 {
	font-size: 16px;
}

.fs-36 {
	font-size: 36px;
}

.bg-blue {
	background: #125c84;
}

.color-blue {
	color: #125c84;
}

.zi-100 {
	z-index: 100;
}

.bg-grey {
	background: #e7e7e7;
}

.digit-group input {
	width: 70px;
	height: 70px;
	background-color: white;
	line-height: 60px;
	border: unset;
	box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
	text-align: center;
	font-size: 24px;
	font-weight: 200;
	color: rgb(153, 153, 153);
	font-weight: 600;
	margin: 0 2px;
}

.digit-group input:focus-visible {
	outline: none;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
}

.dialog-ui {
	border: 2px solid #125c84;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
}

.btn-apply,
.btn-apply:hover {
	background: #125c84;
	color: #fff;
}

.apply_button {
	top: 12px;
	position: absolute;
	right: 12px;
}

.radio_width {
	height: 20px;
	min-width: 20px;
}

.form-check-input:checked {
	background: #f7600e;
	border-color: #f7600e;
}

.box-shadow {
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
	border-radius: 21px;
}

.avatar {
	height: 30px;
	width: 30px;
}

/* learning-pathsec */

.learning-pathsec {
	background: url(../images/userflow/learing-path-bg.jpg) no-repeat center;
	background-size: cover;
	height: calc(100vh - 60px);
	width: calc(100vw - 235px);
}

.learning-pathsec .tag {
	padding: 3px 10px 3px 3px;
	background-color: #ffffff;
	border-radius: 25px;
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.48);
}

.learning-pathsec .tag i {
	border-radius: 50%;
	background-color: rgb(237, 28, 36);
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.learning-pathsec .tag i.bg-blue {
	background-color: #125c84;
}

.learning-pathsec .tag-1 {
	right: 80px;
	bottom: 155px;
}

/* .learning-pathsec .tag-1:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border: 0 solid transparent;
	border-left-width: 0px;
	border-right-width: 30px;
	border-top: 15px solid #fff;
	top: 0;
	right: -30px;
	} */

.learning-pathsec .tag-2 {
	left: 700px;
	top: 350px;
}

/* .learning-pathsec .tag-2:after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 46px;
	width: 0;
	height: 0;
	border: 0 solid transparent;
	border-right-width: 0px;
	border-left-width: 15px;
	border-bottom: 20px solid #fff;
	} */

.learning-pathsec .tag-3 {
	left: 490px;
	top: 240px;
}

/* .learning-pathsec .tag-3:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 15px;
    border-right: 15px solid #fff;
    right: 0;
    top: 45px;
}
*/

.learning-pathsec .tag-4 {
	left: 580px;
	top: 190px;
}

/* .learning-pathsec .tag-4:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 15px;
    border-right: 15px solid #fff;
    right: 0;
    top: 45px;
}
*/

.learning-pathsec .tag-5 {
	top: 138px;
	left: 550px;
}

/* .learning-pathsec .tag-5:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 15px;
    border-right: 15px solid #fff;
    right: 0;
    top: 45px;
}
*/

.learning-pathsec .tag-6 {
	top: 85px;
	left: 570px;
}

/* .learning-pathsec .tag-6:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 20px;
    border-top-width: 0px;
    border-left: 15px solid #fff;
    top: 45px;
    left: 0px;
}
*/

.learning-pathsec .tag-7 {
	right: 180px;
	top: 185px;
}

/* .learning-pathsec .tag-7:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 15px;
    border-right: 15px solid #fff;
    right: 0;
    top: 45px;
}
*/

.learning-pathsec .tag-8 {
	right: 180px;
	top: 130px;
}

/* .learning-pathsec .tag-8:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 15px;
    border-right: 15px solid #fff;
    right: 0;
    top: 45px;
}
*/

.learning-pathsec .tag-9 {
	top: 105px;
	right: 40px;
}

/* .learning-pathsec .tag-9:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 15px;
    border-right: 15px solid #fff;
    right: 0;
    top: 45px;
}
*/

/* learning-pathsec */

/* .slide 15 */

.blue_border {
	border: 2px solid #125c84;
	border-radius: 12px;
}

/* .blue_border::after {
    content: "";
    width: 65px;
    height: 65px;
    background: url(../images/slide-15d.png) no-repeat;
    position: absolute;
    right: -35px;
    top: 55px;
} */

.right-arrow {
	background: #8e1b4c;
	position: relative;
}

.right-arrow .br-12 {
	border-radius: 12px;
}

.right-arrow .btn-green {
	background: #80bc0c;
}

.triangle-right {
	width: 0;
	right: -50px;
	height: 0;
	border-top: 40px solid transparent;
	border-left: 50px solid #8e1b4c;
	border-bottom: 40px solid transparent;
}

/* .slide 15 */

/* slide 24 */

.brown-table thead {
	background: #e7b86e;
	color: black;
}

.brown-table tbody {
	background-color: #fff;
}

.form-control:focus {
	background: #fff;
	border-left: 5px solid #125c84;
	box-shadow: 0px 0px 25px 0px rgb(0, 0, 0, 0.2);
	border-color: #125c84;
}

.bg-light {
	background: #e8e8e8 !important;
}

/* slide 24 */

/* slide 18 */

.slide-18-set {
	top: 0;
	left: 100px;
}

/* slide 18 */

/* Abhishek Css */

@media only screen and (min-width: 768px) and (max-device-width: 1024px) {
	.vm-title1 {
		margin-left: -16px;
	}
}

/* landing page */

.landing-container {
	background: url(../images/userflow/landing-bg.jpg) no-repeat center;
	background-size: cover;
	height: 100%;
}

.landing-container .navbar li a {
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
}

.landing-container .navbar li a:hover,
.landing-container .navbar li a:focus {
	outline: none;
}

#vertical-carousel2 .carousel-item-prev:not(.carousel-item-end),
#vertical-carousel2 .active.carousel-item-start {
	transform: translate3d(0, -100%, 0);
	-webkit-transform: translate3d(0, -100%, 0);
	-moz-transform: translate3d(0, -100%, 0);
	-ms-transform: translate3d(0, -100%, 0);
	-o-transform: translate3d(0, -100%, 0);
}

#vertical-carousel2 .carousel-item-next:not(.carousel-item-start),
#vertical-carousel2 .active.carousel-item-end {
	transform: translate3d(0, 100%, 0);
	-webkit-transform: translate3d(0, 100%, 0);
	-ms-transform: translate3d(0, 100%, 0);
	-moz-transform: translate3d(0, 100%, 0);
	-o-transform: translate3d(0, 100%, 0);
}

#vertical-carousel2 .carousel-indicators {
	top: 0;
	margin: auto;
	height: 100%;
	margin-left: 1%;
	left: auto;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	align-items: center;
	right: auto;
	bottom: auto;
}

#vertical-carousel2 .carousel-indicators::before {
	content: "";
	background: #fff;
	position: absolute;
	top: 0px;
	bottom: 0;
	left: 7px;
	width: 1px;
}

#vertical-carousel2 .carousel-indicators [data-bs-target] {
	background: none;
	border: 1px solid white;
	border-radius: 12px;
	width: 14px;
	height: 14px;
	margin: 0px auto;
	background: #fff;
	opacity: 1;
}

#vertical-carousel2 .carousel-indicators li {
	position: relative;
}

#vertical-carousel2 .carousel-indicators li:after {
	content: "";
	background: #125c84;
	height: 10px;
	width: 10px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0 auto;
}

#vertical-carousel2 .carousel-indicators li.active {
	background: white;
}

#vertical-carousel2 .carousel-indicators li.active::after {
	background: #8e1b4c;
}

#vertical-carousel2 .carousel-item img,
#vertical-carousel2 .carousel-inner {
	border-radius: 15px;
}

#vertical-carousel2 .carousel-item img {
	width: 100%;
}

#vertical-carousel2 .carousel-inner {
	box-shadow: 7px 0px 7px 0px rgba(0, 0, 0, 0.4);
}

#vertical-carousel2 .carousel-item::after {
	content: "";
	box-shadow: inset 40px 0px 40px 0px rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

/* :vertical carousel 3 */

#vertical-carousel3 .carousel-item-prev:not(.carousel-item-end),
#vertical-carousel3 .active.carousel-item-start {
	transform: translate3d(0, -100%, 0);
	-webkit-transform: translate3d(0, -100%, 0);
	-moz-transform: translate3d(0, -100%, 0);
	-ms-transform: translate3d(0, -100%, 0);
	-o-transform: translate3d(0, -100%, 0);
}

#vertical-carousel3 .carousel-item-next:not(.carousel-item-start),
#vertical-carousel3 .active.carousel-item-end {
	transform: translate3d(0, 100%, 0);
	-webkit-transform: translate3d(0, 100%, 0);
	-ms-transform: translate3d(0, 100%, 0);
	-moz-transform: translate3d(0, 100%, 0);
	-o-transform: translate3d(0, 100%, 0);
}

#vertical-carousel3 .carousel-indicators {
	top: 0;
	margin: auto;
	height: 100%;
	margin-left: 1%;
	left: auto;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	align-items: center;
	right: auto;
	bottom: auto;
}

#vertical-carousel3 .carousel-indicators::before {
	content: "";
	background: #fff;
	position: absolute;
	top: 0px;
	bottom: 0;
	left: 7px;
	width: 1px;
}

#vertical-carousel3 .carousel-indicators [data-bs-target] {
	background: none;
	border: 1px solid white;
	border-radius: 12px;
	width: 14px;
	height: 14px;
	margin: 0px auto;
	background: #fff;
	opacity: 1;
}

#vertical-carousel3 .carousel-indicators li {
	position: relative;
}

#vertical-carousel3 .carousel-indicators li:after {
	content: "";
	background: #125c84;
	height: 10px;
	width: 10px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0 auto;
}

#vertical-carousel3 .carousel-indicators li.active {
	background: white;
}

#vertical-carousel3 .carousel-indicators li.active::after {
	background: #8e1b4c;
}

#vertical-carousel3 .carousel-item img,
#vertical-carousel3 .carousel-inner {
	border-radius: 15px;
}

#vertical-carousel3 .carousel-item img {
	width: 100%;
}

#vertical-carousel3 .carousel-inner {
	box-shadow: 7px 0px 7px 0px rgba(0, 0, 0, 0.4);
}

#vertical-carousel3 .carousel-item::after {
	content: "";
	box-shadow: inset 40px 0px 40px 0px rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.landing-row2 {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}

.landing-row2 h4 {
	letter-spacing: 1px;
	font-weight: 500;
}

#vertical-carousel2 .carousel-caption {
	position: absolute;
	top: 30px;
	text-align: left;
	left: 60px;
}

#vertical-carousel3 .carousel-caption {
	position: absolute;
	top: 30px;
	text-align: left;
	left: 60px;
}

.carousel-caption1,
.carousel-caption4,
.carousel-caption5 {
	color: #000;
}

.carousel-caption1 h1,
.carousel-caption4 h1,
.carousel-caption5 h1 {
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.carousel-caption2,
.carousel-caption3 {
	color: #fff;
}

.carousel-caption1,
.carousel-caption2,
.carousel-caption3,
.carousel-caption4,
.carousel-caption5 {
	width: 350px;
}

.carousel-caption2 h1,
.carousel-caption3 h1 {
	border-bottom: 1px solid #fff;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.landing-row2 > [class*="col-"] {
	position: relative;
}

.landing-row2 > [class*="col-"]:not(:last-child):after {
	content: "";
	background: url(../images/userflow/landing-icon5.png) no-repeat center;
	background-size: cover;
	width: 6px;
	height: 179px;
	position: absolute;
	right: 0;
	top: -27px;
}

.landing-btncol {
	margin-top: -25px;
}

.carousel-cb {
	width: 300px;
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.carousel-cb .comment-box {
	bottom: -25px;
	right: -35px;
}

.carousel-cb2 {
	width: 300px;
	position: absolute;
	top: -15px;
	right: 210px;
}

.carousel-cb2 .comment-box2 {
	bottom: -25px;
	right: -35px;
}

.carousel-cb img {
	width: auto !important;
}

#vertical-carousel2 .carousel-control-next,
#vertical-carousel2 .carousel-control-prev {
	position: relative;
	background: #fff;
	opacity: 1;
	width: 50px;
	height: 50px;
	color: #f7600e;
	font-size: 30px;
}

#vertical-carousel3 .carousel-control-next,
#vertical-carousel3 .carousel-control-prev {
	position: relative;
	background: #fff;
	opacity: 1;
	width: 50px;
	height: 50px;
	color: #f7600e;
	font-size: 30px;
}

.carousel-btns {
	position: absolute;
	right: 0;
	bottom: 0;
}

#vertical-carousel2 .carousel-control-next:hover,
#vertical-carousel2 .carousel-control-prev:hover {
	background: #f7600e;
	color: #fff;
}

#vertical-carousel2 .carousel-control-next {
	border-bottom-right-radius: 15px;
}

#vertical-carousel3 .carousel-control-next:hover,
#vertical-carousel3 .carousel-control-prev:hover {
	background: #f7600e;
	color: #fff;
}

#vertical-carousel3 .carousel-control-next {
	border-bottom-right-radius: 15px;
}

.navbar-toggler {
	padding: 0;
	color: #fff;
}

.navbar-toggler:focus {
	box-shadow: none;
}

/* Question Css */

.ques-list-col::after {
	content: "";
	width: 100%;
	border-top: 2px dashed #888;
	position: absolute;
	top: 15px;
	left: 0;
	z-index: 1;
}

.ques-list li {
	min-width: 30px;
	height: 30px;
	background: #fff;
	border: 1px solid #125c84;
	color: #125c84;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	font-weight: bold;
	text-align: center;
	line-height: 25px;
	cursor: pointer;
	z-index: 2;
	position: relative;
}

.ques-list li.active {
	background: #125c84;
	color: #fff;
}

.ques-list::after {
	content: "";
	height: 8px;
	width: 8px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	background-color: #888;
	position: absolute;
	top: 12px;
	left: 0;
}

.ques-list::before {
	content: "";
	height: 8px;
	width: 8px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	background-color: #888;
	position: absolute;
	top: 12px;
	right: 0;
}

.quesbox {
	border: 2px solid #888;
	padding: 5px;
	border-radius: 10px;
	position: relative;
}

/* .quesbox::before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid #888;
    border-top: 10px solid #888;
    border-bottom: 10px solid transparent;
    left: -21px;
    top: -2px;
}

.quesbox:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid #fff;
    border-top: 8px solid #fff;
    border-bottom: 8px solid transparent;
    left: -16px;
    top: 0px;
} */
.quesbox-inner3 {
	background: rgb(18, 92, 132, 0.9);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	position: relative;
	z-index: 9;
	margin-right: 15px;
	/* display: flex; */
	align-items: center;
	padding: 5px 45px 5px 15px;
}

.quesbox-inner {
	background: rgb(18, 92, 132, 0.9);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	position: relative;
	z-index: 9;
	margin-right: 15px;
	display: flex;
	align-items: center;
	padding: 5px 45px 5px 15px;
}

/* .quesbox-inner::after {
    content: "";
    position: absolute;
    top: 13px;
    left: -10px;
    top: 0;
    width: 0;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #296c90 transparent;
} */

.quesmark-circle-in {
	width: 45px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom-left-radius: 90px;
	border-top-left-radius: 90px;
	position: absolute;
	top: 0;
	right: 20px;
	background: #fff;
	z-index: 9;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

.quesmark-circle-in::after {
	content: "?";
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border: 2px solid #888;
	font-weight: 600;
	font-size: 40px;
	color: #888;
	background: #fff;
	position: absolute;
	left: 10px;
	z-index: 8;
	font-size: 35px;
}

.anychart-credits {
	display: none;
}

.tagcloud-sec {
	height: 400px;
}

.ques-btns li {
	margin-bottom: 1rem;
}

.tagcloud-table td {
	background: #fff;
}

.next-quesbtn span {
	background: #8e1b4c;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	margin-left: 1rem;
}

.afs-tabs {
	background: #f0f0f0;
	width: max-content;
	margin: 0 auto;
	padding: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.afs-tabs button {
	opacity: 0.7;
}

.afs-tabs button.active {
	opacity: 1;
}

.afs-tabs button:not(:last-child) {
	margin-right: 1rem;
}

.afs-tab-content {
	background: #f0f0f0;
}

.comment-box {
	background: #125c84;
	color: #fff;
	padding: 20px;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	position: relative;
	text-align: left;
}

.comment-box:after {
	content: "";
	background: url(../images/userflow/comment-arrow.png) no-repeat center;
	background-size: cover;
	width: 72px;
	height: 42px;
	position: absolute;
	bottom: -42px;
	right: 30px;
}

.comment-box2 {
	background: #fff;
	color: #000;
	padding: 20px;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	position: relative;
	text-align: left;
}

.comment-box2:after {
	content: "";
	background: url(../images/userflow/comment-arrow-white.png) no-repeat center;
	background-size: cover;
	width: 72px;
	height: 42px;
	position: absolute;
	bottom: -42px;
	left: 40px;
}

.quesbox2 {
	border: 2px solid #888;
	padding: 5px;
	border-radius: 0 10px 10px 10px;
	-webkit-border-radius: 0 10px 10px 10px;
	-moz-border-radius: 0 10px 10px 10px;
	-ms-border-radius: 0 10px 10px 10px;
	-o-border-radius: 0 10px 10px 10px;
	position: relative;
}

.quesbox2::before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 10px solid #888;
	border-right: 10px solid transparent;
	border-top: 10px solid transparent;
	border-bottom: 10px solid #888;
	left: -21px;
	top: -2px;
}

.quesbox2:after {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 8px solid #fff;
	border-right: 8px solid transparent;
	border-top: 8px solid transparent;
	border-bottom: 8px solid #fff;
	left: -16px;
	top: 0px;
}

.quesbox-inner2 {
	background: rgb(18, 92, 132, 0.9);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	position: relative;
	z-index: 9;
	margin-right: 15px;
	height: 90px;
	display: flex;
	align-items: center;
	padding: 0 45px 0 15px;
}

.quesbox-inner2::after {
	content: "";
	position: absolute;
	left: -10px;
	bottom: 0;
	width: 0;
	border-width: 0px 10px 10px;
	border-style: solid;
	border-color: #296c90 transparent;
}

/* Profile-Analysis Thankyou */

.title-img {
	margin-top: -1rem;
}

.arrow-bar {
	background-color: #8e1b4c;
	color: #fff;
}

.arrow-blue-bar {
	background-color: #125c84;
	color: #fff;
	border-radius: 8px;
}

.tip-img {
	margin-right: -40px;
}

/* thank you modal */

.thankyou-modal {
	background-color: #fff;
	border: 2px solid #125c84;
	border-radius: 20px;
	/* position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%); */
}

.thankyou-sec {
	content: "";
	background: rgba(0, 0, 0, 0.3);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

/* userflow db progressbar 2 css */

.progress-bar2 {
	position: relative;
	height: 100px;
	width: 100px;
	/* overflow: visible; */
	color: #000;
	margin: 0 auto 0;
	position: absolute;
	left: 0;
	right: 0;
	top: -40px;
}

.progress-bar2 div {
	position: absolute;
	height: 100px;
	width: 100px;
	border-radius: 50%;
}

.progress-bar2 div span {
	position: absolute;
	font-size: 25px;
	line-height: 84px;
	height: 84px;
	width: 84px;
	left: 6px;
	top: 6px;
	text-align: center;
	border-radius: 50%;
	background-color: white;
	font-weight: 600;
}
.progressBar2222 div span {
	height: 87px;
	width: 87px;
}

.progress-bar2 .background {
	background-color: #b3cef6;
}

.progress-bar2 .rotate {
	clip: rect(0 50px 100px 0);
	background-color: #4b86db;
}

.progress-bar2 .left {
	clip: rect(0 50px 100px 0);
	opacity: 1;
	background-color: #b3cef6;
}

.progress-bar2 .right {
	clip: rect(0 50px 100px 0);
	transform: rotate(180deg);
	opacity: 0;
	background-color: #4b86db;
}

@keyframes toggle {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.progress-bar-img {
	background: url(../images/userflow/ground.png) no-repeat center;
	background-size: cover;
	width: 225px;
	height: 99px;
}

.trophy-list {
	z-index: 9;
	font-size: 24px;
	color: #fcd208;
	position: absolute;
	left: 0;
	right: 0;
	top: -25px;
}

.trophy-list li:not(:last-child),
.starlist li:not(:last-child) {
	margin-right: 0px;
}

.starlist li.active {
	color: #e2aa00;
}

.starlist {
	margin-bottom: 0;
}

/* about page popup css */

.about-title {
	border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

.keyarea-row {
	z-index: 9;
}

.keyarea-row::after {
	content: "";
	height: 10px;
	background: #d9d9d9;
	width: 90%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	z-index: -1;
	left: -12px;
}

/* Abhishek Css */

.fs-60 {
	font-size: 60px !important;
}

.fs-48 {
	font-size: 48px !important;
}

.fw-med {
	font-family: 500;
}

.object-fit-cover {
	object-fit: cover;
}

.br-18 {
	border-radius: 18px !important;
}

/* Profile analysis */

.mt-n150 {
	margin-top: -150px;
}

.fs-18 {
	font-size: 18px;
}

.fs-20 {
	font-size: 20px;
}

.color-violet {
	color: #8e1b4c;
}

.color-black {
	color: rgb(0, 0, 0);
}

/* Profile analysis */

.slide-18-set {
	top: 0;
	left: 190px !important;
}

.pip-pro-comment {
	position: absolute;
}

.right-arrow {
	max-height: 50px;
}

@media (max-width: 767px) {
	.right-arrow {
		max-height: unset;
	}

	.right-arrow .br-12 {
		border-radius: unset;
	}

	.blue_border::after {
		display: none;
	}
}

.right-arrow img {
	top: -6px;
	position: relative;
	left: -10px;
}

.apply_button {
	top: 12px;
	position: absolute;
	right: 12px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.progress-card .progress-bar div span {
	color: #333333;
}

.progress-card .progress-bar .background {
	background-color: #e0e0e0 !important;
}

/* slide-thankyou */

.summary-iconlist li {
	cursor: pointer;
}

.summary-iconlist li:not(:last-child) {
	margin-right: 2rem;
}

.summary-icon {
	color: white;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	background: #460622;
	font-size: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 6px;
	position: relative;
	z-index: 9;
	margin: 0 auto;
}

.summary-icon:hover {
	color: #fff;
	box-shadow: rgb(142, 27, 76, 0.1) 0px 20px 25px -5px,
		rgb(142, 27, 76, 0.4) 0px 10px 10px -5px;
	transition: all 0.5s ease;
	transform: scale(1.05);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
}

.summary-icon::after {
	content: "";
	width: 47px;
	height: 47px;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	background-image: -moz-linear-gradient(
		18deg,
		rgb(142, 27, 76) 0%,
		rgb(126, 23, 67) 58%,
		rgb(110, 18, 57) 100%
	);
	background-image: -webkit-linear-gradient(
		18deg,
		rgb(142, 27, 76) 0%,
		rgb(126, 23, 67) 58%,
		rgb(110, 18, 57) 100%
	);
	background-image: -ms-linear-gradient(
		18deg,
		rgb(142, 27, 76) 0%,
		rgb(126, 23, 67) 58%,
		rgb(110, 18, 57) 100%
	);
	margin: 0 auto;
}

.thanku-imgtitle {
	position: absolute;
	top: 0;
	left: -35px;
}

.thanku-flag {
	position: absolute;
	top: 0;
	right: 0;
}

.sparkle-textrow::before {
	content: "";
	position: absolute;
	top: 250px;
	left: 70px;
	background: url(../images/userflow/summary-deco.png) no-repeat center;
	background-size: cover;
	width: 379px;
	height: 248px;
	z-index: 8;
}

.summary-modal {
	max-width: 60%;
}

/* slide-thankyou */

.theatre-sec {
	z-index: 8;
	background: rgba(255, 255, 255, 0.1);
	padding: 10px;
}

/* profile analysis introduction */

.modal-content {
	border-radius: 20px;
	border: 2px solid #125c84;
}

.box-1 {
	border-bottom: 2px dotted #d4d4d4;
	border-right: 2px dotted #d4d4d4;
}

.box-2 {
	border-bottom: 2px dotted #d4d4d4;
}

.box-3 {
	border-right: 2px dotted #d4d4d4;
}

.cstm-border-bottom2 {
	border-bottom: 2px solid #000000;
}

.cstm-border-left {
	border-left: 2px solid #000000;
}

.left-text {
	transform: rotate(-90deg);
	left: -17px;
	top: 40%;
	width: fit-content;
}

.bottom-text {
	bottom: 17px;
	left: 0;
	width: fit-content;
	right: 0;
	margin: 0 auto;
}

.carousel-inner {
	position: relative;
	/* width: 85%;
    margin-left: 5%; */
	overflow: hidden;
}

.carousel-inner ul li {
	line-height: 1.2 !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	background: none;
}

.fa-circle-chevron-left {
	font-size: 30px;
	color: #125c84;
}

.fa-circle-chevron-right {
	font-size: 30px;
	color: #8e1b4c;
}

.modal-img {
	position: absolute;
	width: 200px;
	bottom: -5px;
	right: -50px;
}

.fa-angle-up {
	font-size: 20px;
	top: -9px;
	left: -7px;
}

.fa-angle-right {
	font-size: 20px;
	right: -9px;
	bottom: -8px;
}

.angle-up-male {
	font-size: 20px;
	top: -12px;
	left: -7px;
}

/* .body-login {
    overflow: hidden;
} */

.close-btn-al {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #125c84;
	padding: 10px;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	border: 0;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 50%);
	color: #fff;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Media Queries */

@media (max-width: 768px) {
	.digit-group input {
		width: 15%;
	}

	.summary-iconlist li:not(:last-child) {
		margin-right: 1rem;
	}

	.header-txt-large {
		white-space: nowrap;
		width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Abhishek Css */

@media only screen and (min-width: 320px) and (max-width: 480px) {
	div.table-responsive
		> div.dataTables_wrapper
		> div.row
		> div[class^="col-"]:last-child {
		padding-right: 0;
		padding-left: 0;
	}

	div.dataTables_wrapper div.dataTables_filter {
		margin-top: 1rem;
	}

	.elearning-col4-grey {
		padding: 20px 0;
	}

	.vm-row3 {
		width: 100%;
	}

	.vm-col,
	.vm-row2 .vm-imgsec,
	.vm-row3 .vm-imgsec {
		margin-bottom: 2rem;
	}

	.vm-col1::after {
		content: "\f178";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 20px;
		position: absolute;
		right: 0;
		left: 0;
		text-align: center;
		bottom: -30px;
		transform: rotate(90deg);
	}

	.vm-col2::after {
		content: "\f178";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 20px;
		position: absolute;
		right: 0;
		left: 0;
		text-align: center;
		bottom: -30px;
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
	}

	.afs-tabs button:not(:last-child) {
		margin-right: 0rem;
		margin-bottom: 0.5rem;
	}

	.title-img {
		margin-top: 0;
	}

	#vertical-carousel2 .carousel-control-next,
	#vertical-carousel2 .carousel-control-prev {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	#vertical-carousel3 .carousel-control-next,
	#vertical-carousel3 .carousel-control-prev {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	.landing-row2 > [class*="col-"]:not(:last-child):after {
		display: none;
	}

	.landing-row2 > [class*="col-"] {
		margin-bottom: 1rem;
	}

	#vertical-carousel2 .carousel-item::after,
	#vertical-carousel2 .carousel-inner {
		box-shadow: none;
	}

	#vertical-carousel2 .carousel-caption {
		background: rgba(0, 0, 0, 0.7);
		padding: 15px;
		padding-bottom: 20px;
		color: #fff;
		left: 0;
		position: relative;
		width: 100%;
		padding-right: 30px;
		top: 0;
	}

	#vertical-carousel2 .carousel-item img,
	#vertical-carousel2 .carousel-inner {
		border-radius: 0;
	}

	#vertical-carousel2 .carousel-indicators {
		display: none;
	}

	#vertical-carousel2 .carousel-caption h1 {
		color: #fff;
	}

	#vertical-carousel3 .carousel-item::after,
	#vertical-carousel3 .carousel-inner {
		box-shadow: none;
	}

	#vertical-carousel3 .carousel-caption {
		background: rgba(0, 0, 0, 0.7);
		padding: 15px;
		padding-bottom: 20px;
		color: #fff;
		left: 0;
		position: relative;
		width: 100%;
		padding-right: 30px;
		top: 0;
	}

	#vertical-carousel3 .carousel-item img,
	#vertical-carousel3 .carousel-inner {
		border-radius: 0;
	}

	#vertical-carousel3 .carousel-indicators {
		display: none;
	}

	#vertical-carousel3 .carousel-caption h1 {
		color: #fff;
	}

	.carousel-cb,
	.carousel-cb2 {
		position: relative;
		font-size: 12px;
		bottom: auto;
	}

	.carousel-cb .comment-box {
		bottom: auto;
		right: 0;
		padding: 10px;
		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-ms-border-radius: 20px;
		-o-border-radius: 20px;
	}

	.carousel-cb2 .comment-box2 {
		bottom: auto;
		right: 0;
		padding: 10px;
		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-ms-border-radius: 20px;
		-o-border-radius: 20px;
	}

	.comment-box-intro,
	.comment-box-sentintro {
		width: 65%;
	}

	.cb1-pip img {
		width: 50% !important;
	}

	.thanku-imgtitle {
		position: relative;
		top: 0;
		left: 0;
		margin-top: 40px;
	}

	.sparkle-textrow::before {
		left: 0;
		width: 300px;
	}

	.summary-modal {
		max-width: 95%;
		margin: 20px auto;
	}

	.keyarea-row::after {
		display: none;
	}

	.quesbox-inner {
		height: auto;
		margin-right: 0;
		padding: 15px;
	}
}

@media only screen and (min-width: 1000px) and (max-device-width: 1200px) {
	#vertical-carousel .carousel-item img {
		height: 100vh;
		object-fit: cover;
	}
}

@media screen and (min-width: 600px) and (max-width: 1200px) {
	#vertical-carousel3 .carousel-caption {
		background: rgba(0, 0, 0, 0.7);
		padding: 15px;
		height: min-content;
		color: #fff;
		top: 15px;
		left: 40px;
	}

	#vertical-carousel3 .carousel-caption h1 {
		color: #fff;
		border-bottom: 1px solid #fff;
	}

	.carousel-cb {
		bottom: 0;
		left: auto;
		right: 55px;
		margin: 0 auto;
	}

	.carousel-cb img {
		width: 45% !important;
		margin-left: 35%;
	}

	.carousel-cb2 {
		bottom: 0;
		left: auto;
		right: 55px;
		margin: 0 auto;
	}

	/* .carousel-cb2 img {
        width: 45% !important;
        margin-left: 35%;
    } */
	.summary-modal {
		max-width: 90%;
	}
}

@media screen and (min-width: 576px) and (max-width: 768px) {
	#vertical-carousel2 .carousel-caption {
		background: rgba(0, 0, 0, 0.7);
		padding: 15px;
		height: min-content;
		color: #fff;
		top: 15px;
		left: 40px;
	}

	#vertical-carousel2 .carousel-caption h1 {
		color: #fff;
		border-bottom: 1px solid #fff;
	}
}

@media screen and (min-width: 1200px) {
	.comment-box-intro {
		width: 60%;
	}

	.comment-box-sentintro {
		width: 65%;
	}
}

@media screen and (max-width: 1200px) {
	/* .landing-container {
            height: 100vh;
        } */
}

.navbar > .container-fluid {
	align-items: center;
}

.navbar-nav .nav-link {
	padding: 0;
}

.no-cursor-pointer {
	cursor: auto !important;
}

/* new css */

.top-ribbon {
	background: #7a214c;
}

.homesec {
	background: url(../images/home1.jpg) center;
	background-size: cover;
	height: 529px;
	border-radius: 15px;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}

.login-carousel img {
	object-fit: cover;
}

.slider-shadow1 {
	left: 45%;
	top: 15%;
}

.about-iconrow > [class*="col-"]:not(:last-child),
.br-abt-icontops {
	border-right: 2px solid rgba(0, 0, 0, 0.15);
}

.about-hr {
	background: rgba(0, 0, 0, 0.15);
	height: 10px;
}

.dids-carousel .carousel-caption {
	width: 400px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.hotspots {
	width: 100%;
	margin: auto;
	position: relative;
}

.hotspots > div {
	position: absolute;
	top: var(--y);
	left: var(--x);
	z-index: 10;
	/* cursor: pointer; */
}

/* .hotspots>div:nth-child(2) {
    width: 130px;
    height: 130px;
} */
/* .Vmenuicon1{
    width: var(--Icon1Width);
    height: var(--Icon1Width);
} */

/* .hotspots>div:nth-child(3) {
    width: 160px;
    height: 105px;
}

.hotspots>div:nth-child(3) img {
    margin-left: 125px;
    margin-top: 10px;
} */

/* .hotspots>div:nth-child(4) {
    width: 180px;
    height: 120px;
}

.hotspots>div:nth-child(4) img {
    margin-left: 150px;
    margin-top: 80px;
} */

/* .hotspots>div:nth-child(5) {
    width: 175px;
    height: 130px;
}

.hotspots>div:nth-child(5) img {
    margin-left: 155px;
    margin-top: 95px;
} */

/* .hotspots>div:nth-child(6) {
    width: 200px;
    height: 110px;
}

.hotspots>div:nth-child(6) img {
    margin-left: -10px;
    margin-top: 77px;
} */

/* .hotspots>div:nth-child(7) {
    width: 180px;
    height: 115px;
}

.hotspots>div:nth-child(7) img {
    margin-left: 15px;
} */

.circle-click,
.pulse {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.circle-click {
	z-index: 2;
	/* border: 1px solid #fff; */
}

#accordionIman .accordion-button {
	font-size: 14px;
}

#accordionIman .row:not(:last-child) {
	margin-bottom: 0.5rem;
}

#accordionIman .accordion-button::after {
	display: none;
}

#accordionIman .accordion-body p {
	padding-left: 1rem;
}

#accordionIman .accordion-body p:first-child {
	border-left: 3px solid #125c84;
}

#accordionIman .accordion-body p:last-child {
	margin-bottom: 0;
}

#diaAccordion .row:not(:last-child) {
	margin-bottom: 0.5rem;
}

#diaAccordion .accordion-button:after {
	display: none;
}

/* .dia-timer {
	top: 75px;
	right: 20px;
} */

.modal-list {
	padding-left: 15px;
}

.ea-imbar {
	position: absolute;
	bottom: 60px;
	width: calc(100% - 24px);
	background: rgba(18, 92, 132, 0.54);
}

.ea-3col {
	margin-top: -3rem;
}

.ea-img {
	border-radius: 20px 20px 0 0;
}

.red-dot {
	width: 15px;
	height: 15px;
}

.red-dot-pulse {
	z-index: 1;
	background-color: red;
	animation: red-dot-pulse 2s ease-in-out infinite forwards;
}

@keyframes red-dot-pulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

.blue-plus {
	background-color: #125c84;
	color: #fff;
	width: 30px;
	height: 30px;
	font-size: 40px;
}

.white-plus {
	background-color: #fff !important;
	color: #125c84 !important;
	width: 30px;
	height: 30px;
	font-size: 40px;
}

.iman-modal1 {
	position: absolute;
	top: 110px;
	right: 95px;
}

.iman-modal2 {
	position: absolute;
	right: 20px;
	top: 157px;
}

.iman-modal3 {
	position: absolute;
	left: 55px;
	bottom: 115px;
}

.no-gutters {
	margin-right: 0;
	margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
}

.iman-turncam {
	border-radius: 16px;
	/* height: 400px; */
}

.turncam-details {
	background: #edf7f9;
	color: #000;
	border-radius: 0 14px 14px 0;
}

#image-canvas,
#environment_analysis,
#webcam {
	border-radius: 14px 0 0 14px;
}

.bg-dids {
	background: url(../images/userflow/bg-dids.jpg) repeat center;
	background-size: cover;
}

.bg-space {
	background: url(../images/userflow/bgSpace.jpg) repeat center;
	background-size: cover;
}

.circled-imag {
	width: 390px;
	height: 390px;
	border: 2px solid #125c84;
}

.circled-imag img {
	height: 386px;
	object-fit: cover;
	padding: 10px;
}

.circled-imag2 {
	background: hsla(257, 26%, 36%, 0.5);
	border-radius: 20px;
	padding: 10px;
	width: fit-content;
	margin: auto;
}
@media (max-width: 576px) {
	.circled-imag2 {
		padding: 10px;
	}
}

.circled-imag2 img {
	border-radius: 15px;
}

.circled-imag3 {
	width: 390px;
	height: 390px;
	border: 2px solid #125c84;
}

.circled-imag3 img:first-child {
	height: 386px;
	object-fit: cover;
	padding: 10px;
}

.enan-triangle {
	top: 65px;
	left: 75px;
}

.enan-modal1 {
	position: absolute;
	top: 75px;
	left: 155px;
}

.enan-modal2 {
	position: absolute;
	left: 125px;
	top: 125px;
}

.enan-modal3 {
	position: absolute;
	right: 95px;
	bottom: 155px;
}

.emdet-modal1 {
	position: absolute;
	top: 45px;
	left: 130px;
}

.emdet-modal2 {
	position: absolute;
	left: 220px;
	top: 105px;
}

.emdet-modal3 {
	position: absolute;
	left: 75px;
	top: 185px;
}

.text-yellow {
	color: #fff000;
}

/* added by yash */

.ea-img-rounded {
	border-radius: 20px;
}

.fixed-bottom {
	z-index: 99;
}

.ea-5col {
	margin-top: -5rem;
}

.mt-6 {
	margin-top: 4rem;
}

.imgEdit > img {
	width: 100%;
	height: auto;
}

/* visual menu */
.circle-click::before {
	content: url(../images/userflow/lock.png);
	background-size: contain;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}

.circle-click::after {
	left: 0;
	top: 0;
}

.circle-click {
	position: relative;
}

.w-fc {
	width: fit-content;
}

.circle_click_unlock_blink::after {
	content: "";
	position: absolute;
	/* left: 0;
    top: 0; */
	background-color: #fff;
	animation: pulse 2s ease-in-out infinite forwards;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	z-index: 1;
}

.circle_click_unlock::before {
	content: url(../images/userflow/unlock.png);
}
.circle_click_completed::before {
	content: url(../images/userflow/completed.png);
}
@media (max-width: 1200px) {
	.circle-click::before {
		content: url(../images/userflow/locklg.png);
	}
	.circle_click_unlock::before {
		content: url(../images/userflow/unlocklg.png);
	}
	.circle_click_unlock_blink::after {
		width: 34px;
		height: 34px;
	}
	.circle_click_completed::before {
		content: url(../images/userflow/completedlg.png);
	}
}
@media (max-width: 992px) {
	.circle-click::before {
		content: url(../images/userflow/lockmd.png);
	}
	.circle_click_unlock::before {
		content: url(../images/userflow/unlockmd.png);
	}

	.circle_click_unlock_blink::after {
		width: 30px;
		height: 30px;
	}
	.circle_click_completed::before {
		content: url(../images/userflow/completedmd.png);
	}
}
@media (max-width: 576px) {
	.circle-click::before {
		content: url(../images/userflow/locksm.png);
	}
	.circle_click_unlock::before {
		content: url(../images/userflow/unlockmdsm.png);
	}
	.circle_click_unlock_blink::after {
		width: 26px;
		height: 26px;
	}
	.circle_click_completed::before {
		content: url(../images/userflow/completedsm.png);
	}
}
@media (max-width: 480px) {
	.circle-click::before {
		content: url(../images/userflow/locksm1.png);
	}
	.circle_click_unlock::before {
		content: url(../images/userflow/unlockmdsm1.png);
	}
	.circle_click_unlock_blink::after {
		width: 24px;
		height: 24px;
	}
	.circle_click_completed::before {
		content: url(../images/userflow/completedsm1.png);
	}
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
	#vertical-carousel2 .carousel-control-next,
	#vertical-carousel2 .carousel-control-prev {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	#vertical-carousel3 .carousel-control-next,
	#vertical-carousel3 .carousel-control-prev {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	.landing-row2 > [class*="col-"]:not(:last-child):after {
		display: none;
	}

	.landing-row2 > [class*="col-"] {
		margin-bottom: 1rem;
	}

	#vertical-carousel2 .carousel-item::after,
	#vertical-carousel2 .carousel-inner {
		box-shadow: none;
	}

	#vertical-carousel2 .carousel-caption {
		background: rgba(0, 0, 0, 0.7);
		padding: 15px;
		padding-bottom: 20px;
		color: #fff;
		left: 0;
		position: relative;
		width: 100%;
		padding-right: 30px;
		top: 0;
	}

	#vertical-carousel2 .carousel-item img,
	#vertical-carousel2 .carousel-inner {
		border-radius: 0;
	}

	#vertical-carousel2 .carousel-indicators {
		display: none;
	}

	#vertical-carousel2 .carousel-caption h1 {
		color: #fff;
	}

	#vertical-carousel3 .carousel-item::after,
	#vertical-carousel3 .carousel-inner {
		box-shadow: none;
	}

	#vertical-carousel3 .carousel-caption {
		background: rgba(0, 0, 0, 0.7);
		padding: 15px;
		padding-bottom: 20px;
		color: #fff;
		left: 0;
		position: relative;
		width: 100%;
		padding-right: 30px;
		top: 0;
	}

	#vertical-carousel3 .carousel-item img,
	#vertical-carousel3 .carousel-inner {
		border-radius: 0;
	}

	#vertical-carousel3 .carousel-indicators {
		display: none;
	}

	#vertical-carousel3 .carousel-caption h1 {
		color: #fff;
	}

	.carousel-cb,
	.carousel-cb2 {
		position: relative;
		font-size: 12px;
		bottom: auto;
	}

	.carousel-cb .comment-box {
		bottom: auto;
		right: 0;
		padding: 10px;
		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-ms-border-radius: 20px;
		-o-border-radius: 20px;
	}

	.carousel-cb2 .comment-box2 {
		bottom: auto;
		right: 0;
		padding: 10px;
		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-ms-border-radius: 20px;
		-o-border-radius: 20px;
	}

	.comment-box-intro,
	.comment-box-sentintro {
		width: 65%;
	}

	.cb1-pip img {
		width: 50% !important;
	}

	#vertical-carousel3 .carousel-control-next {
		border-radius: 0;
	}
}

@media only screen and (max-width: 576px) {
	/* .circled-imag2 {
		width: 250px;
		height: 250px;
	}

	.circled-imag2 img {
		height: 246px;
	} */

	.circled-imag {
		width: 290px;
		height: 290px;
	}

	.circled-imag img {
		height: 286px;
	}

	.red-dot {
		width: 10px;
		height: 10px;
		margin-top: 5px;
	}

	.circled-imag3 {
		width: 290px;
		height: 290px;
	}

	.circled-imag3 img:first-child {
		height: 286px;
	}
}

@media only screen and (max-width: 576px) {
	.circled-imag3 {
		width: 240px;
		height: 240px;
	}

	.circled-imag3 img:first-child {
		height: 236px;
	}

	.enan-triangle {
		top: 60px;
		left: 40px;
		height: 50%;
		width: 60%;
	}

	.enan-modal1 {
		top: 70px;
		left: 80px;
	}

	.enan-modal2 {
		left: 55px;
		top: 110px;
	}

	.enan-modal3 {
		right: 70px;
		bottom: 60px;
	}
}

@media only screen and (max-width: 1200px) {
	.carousel-cb2 {
		right: 185px;
	}
}

@media only screen and (max-width: 992px) {
	.ea-5col {
		margin-top: -4rem;
	}

	.carousel-cb2 {
		width: 350px;
		right: 45px;
		top: 7px;
	}

	.carousel-cb2 .comment-box2 {
		bottom: 5px;
		right: -40px;
	}
}

@media only screen and (max-width: 768px) {
	#image-canvas,
	#environment_analysis,
	#webcam {
		border-radius: 14px 14px 0 0px;
	}

	.turncam-details {
		border-radius: 0 0px 14px 14px;
		padding: 10px 0;
	}

	.carousel-item img {
		border-radius: 10px 10px 0 0 !important;
	}

	.tabDIV {
		position: absolute;
	}

	.tabDIV .comment-box:after {
		transform: scalex(-1);
	}

	.carousel-cb2 {
		right: 290px;
	}

	#vertical-carousel2 .carousel-control-next {
		border-radius: 0;
	}

	.homesec {
		background: url(../images/home_Small.jpg);
		height: 100%;
	}

	.marginClass {
		margin-left: auto;
	}
}

@media only screen and (max-width: 576px) {
	.homesec {
		background: url(../images/home_Small_small.jpg);
	}
}

@media only screen and (max-width: 576px) {
	.comment-box:after {
		width: 61px;
		height: 36px;
		position: absolute;
		bottom: -17px;
	}

	.cb1-pip .comment-box {
		padding: 15px;
	}

	.tabDIV {
		width: 220px;
		right: 100px;
		font-size: 10px;
	}
}

@media only screen and (max-width: 360px) {
	.tabDIV {
		font-size: 8px;
		width: 200px;
		right: 80px;
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(2);
		opacity: 0;
	}
}

.buttonCommon {
	width: auto !important;
	align-items: end;
	height: fit-content;
	top: 53%;
}
@media (max-width: 992px) {
	.OutputContainer .carousel-control-prev {
		left: -9px;
	}
	.OutputContainer.carousel-control-next {
		right: -9px;
	}
}

.linkColor {
	color: #212529 !important;
}

@media only screen and (max-width: 768px) {
	.w-sm-50 {
		width: 50% !important;
	}
}

.share-list li {
	width: 30px;
}

.sparkle-textrow-contacts::before {
	content: "";
	position: absolute;
	top: -65px;
	left: 30px;
	background: url(../images/userflow/summary-deco.png) no-repeat center;
	background-size: cover;
	width: 379px;
	height: 248px;
	z-index: 8;
}

.row-lpink {
	background: #ffebd5;
}

.row-lpink p,
.row-dpink p {
	margin-bottom: 0;
}

.row-dpink {
	background: #ffd9b2;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.no-gutters {
	margin-right: 0;
	margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
}

.sparkle-textrow-survey::before {
	content: "";
	position: absolute;
	top: -65px;
	left: 0px;
	background: url(../images/userflow/summary-deco.png) no-repeat center;
	background-size: cover;
	width: 379px;
	height: 248px;
	z-index: 8;
}

.survey-rating {
	display: flex;
	position: relative;
	height: 50px;
	line-height: 50px;
	font-size: 50px;
	background: #f0f0f0;
	align-items: center;
	border-radius: 6px;
}

.survey-rating label {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	cursor: pointer;
}

.survey-rating label:last-child {
	position: static;
}

.survey-rating label:nth-child(1) {
	z-index: 5;
}

.survey-rating label:nth-child(2) {
	z-index: 4;
}

.survey-rating label:nth-child(3) {
	z-index: 3;
}

.survey-rating label:nth-child(4) {
	z-index: 2;
}

.survey-rating label:nth-child(5) {
	z-index: 1;
}

.survey-rating label input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.survey-rating label .icon {
	float: left;
	color: transparent;
	font-size: 32px;
}

.survey-rating label:last-child .icon {
	color: #000;
}

.survey-rating:not(:hover) label input:checked ~ .icon,
.survey-rating:hover label:hover input ~ .icon {
	color: #f9c935;
}

.survey-rating label input:focus:not(:checked) ~ .icon:last-child {
	color: #000;
	text-shadow: 0 0 5px #f9c935;
}

.progress-bar3 {
	left: 42%;
	bottom: 15%;
	margin: unset;
	top: unset;
}

.progress-bar3,
.progress-bar3 div {
	height: 55px;
	width: 55px;
}

.progress-bar3 div span {
	height: 42px;
	width: 42px;
	line-height: 42px;
}

@media only screen and (max-width: 1200px) {
	.progress-bar3 {
		bottom: 17% !important;
	}
}

@media only screen and (max-width: 992px) {
	.progress-bar3 div,
	.progress-bar3 {
		height: 53px;
		width: 52px;
		bottom: unset;
		left: unset;
	}

	.progress-bar3 div span {
		height: 40px;
		width: 40px;
		line-height: 40px;
	}
	.progress-bar2 {
		right: 42%;
	}
}

@media only screen and (max-width: 768px) {
	.rotate1 {
		transform: rotate(90deg);
		width: 50%;
	}

	.progress-bar3 div,
	.progress-bar3 {
		height: 55px;
		width: 55px;
		left: unset;
		bottom: unset;
		/* right: 50%; */
	}

	.progress-bar3 div span {
		height: 42px;
		width: 42px;
		line-height: 42px;
	}
}

/* @media only screen and (max-width: 576px) {
	.progress-bar3 div,
	.progress-bar3 {
		left: 31%;
	}
} */

.modalBGUpdate .modal-header {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 99;
}

.modalBGUpdate .modal-body {
	padding-right: 35px;
}

.modalBGUpdate .modal-content {
	border-radius: 20px;
	border: 2px solid #fff;
	background-color: #125c84;
	color: #fff !important;
}

/* Client Feedback */
nav {
	padding: 0 !important;
}

.navbar-brand {
	background: #fff;
	padding: 12px 15px 18px 15px;
	width: 180px;
}

.marginMinus {
	position: relative;
	top: -10px;
}

.f-16 {
	font-size: 16px;
}

.headDashboard {
	background: #cdcdcd;
	padding: 10px;
}

.headDashboard h6 {
	margin-bottom: 0 !important;
}

.mainBgNew {
	background-image: url(../images/backgroungMain.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

.BgopacNew::before {
	content: "";
	background: #a19fb1;
	opacity: 0.5;
	height: 70px;
	width: 70px;
	position: absolute;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
	.w-sm-75 {
		width: 75%;
	}
}

.carouselNewAdd {
	width: 365px;
	top: unset;
	bottom: 0;
	right: 100px;
}

.fontCustom {
	font-size: 3.5rem;
}

.fontCustom1 {
	font-size: 3rem;
}

.dids-carousel .carouselNewLeft {
	width: 500px;
}

.dids-carousel .carouselNewLeft1 {
	width: 600px;
}
.carouselNewLeft3 {
	width: 550px !important;
}
.commentBoxPopUp {
	background: url(../images/userflow/slide6Popup.png);
	width: 360px;
	height: 240px;
	background-repeat: no-repeat;
	padding: 0;
	position: relative;
	bottom: -50px !important;
	right: 120px !important;
}

.commentBoxPopUp::after {
	display: none;
}

.commentTextNew {
	position: absolute;
	top: 50px;
	width: 85%;
	left: 30px;
}

@media screen and (max-width: 1200px) {
	.fontCustom {
		font-size: 2.5rem;
	}

	.fs-md-14 {
		font-size: 14px;
	}

	.carouselNewAdd {
		width: 245px;
	}

	.commentBoxPopUp {
		background-size: contain;
		width: 320px;
		top: 75px !important;
	}

	.commentTextNew {
		top: 38px;
		left: 32px;
	}

	.dids-carousel .carouselNewLeft1 {
		width: 480px;
	}

	.fontCustom1 {
		font-size: 2.5rem;
	}
	.carouselNewLeft3 {
		width: 430px !important;
	}
}

@media screen and (max-width: 992px) {
	.carouselNewAdd {
		width: 145px;
		right: 70px;
	}

	.dids-carousel .carouselNewLeft {
		width: 400px;
	}

	.commentBoxPopUp {
		width: 300px;
		top: 85px !important;
	}

	/* .commentTextNew{
        font-size: 14px;
    } */
	.commentTextNew {
		top: 31px;
		left: 30px;
	}

	.fontCustom1 {
		font-size: 2rem;
	}

	.dids-carousel .carouselNewLeft1 {
		width: 380px;
	}

	.dids-carousel .carouselNewLeft2 {
		width: 320px;
	}

	.leftDashBoardImage {
		margin-left: unset !important;
	}
	.lineDashborad {
		height: 70px !important;
		width: 2px;
	}
	.rightArrowDashboard {
		transform: translate(-50%, -50%) rotate(90deg) !important;
	}
	.carouselNewLeft3 {
		width: 340px !important;
	}
}

@media screen and (max-width: 768px) {
	.comment-box:after {
		display: none;
	}
	.carousel-cb2 {
		bottom: 35%;
		top: unset;
		width: 160px;
		height: fit-content;
	}
	.cb1-pip img {
		width: 100% !important;
	}
	.colorBlack2 {
		color: #000;
	}
	.commentTextNew2 {
		top: 21px;
		left: 27px;
	}
	#vertical-carousel2 .carousel-caption {
		width: 100% !important;
	}
}

.borderGrey {
	border: 2px solid #d2d2d2;
}

.marginRightZero {
	margin-right: 0 !important;
	margin-left: 0;
}

.lineDashborad {
	height: 2px;
	background: #d2d2d2;
	position: relative;
}

.leftDashBoardImage {
	width: fit-content;
	margin-left: auto;
}

.rightArrowDashboard {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.cb1-pip .comment-boxNew1 {
	background: url(../images/userflow/slide6Popup1.png);
	width: 295px;
	height: 170px;
	background-repeat: no-repeat;
	padding: 0;
	position: relative;
	bottom: -80px !important;
	right: -110px !important;
	background-size: contain;
}
@media screen and (max-width: 576px) {
	.fontCustom {
		font-size: 1.8rem;
	}
	.fs-sm-12 {
		font-size: 12px;
	}
	.marginBottomS0 {
		margin-bottom: 0;
	}
	.carousel-cb2 {
		width: 100px;
		bottom: 40%;
		right: 210px;
	}
	.cb1-pip .comment-boxNew1 {
		background: url(../images/userflow/slide6Popup1.png);
		width: 205px;
		height: 140px;
		background-repeat: no-repeat;
		padding: 0;
		position: relative;
		bottom: -80px !important;
		right: -60px !important;
		background-size: contain;
	}
	.commentTextNew2 {
		top: 9px;
		left: 23px;
	}
	.fontCustom1 {
		font-size: 1.5rem;
	}
}

/* navigation */
.didsBreadcrumbHeader {
	background: #ececec;
	color: #125c84;
	padding-left: 15px;
}
.didsbreadcrumb {
	margin-bottom: 0 !important;
}

.didsbreadcrumb i,
.didsbreadcrumb svg {
	margin-right: 5px;
}

.didsBreadcrumbItem + .didsBreadcrumbItem::before {
	color: #125c84;
}

/* modal Css */
.DidsMoalBase {
	border: 2px solid #575565;
	border-radius: 15px;
	padding: 10px;
	background: hsla(245, 69%, 10%, 0.5);
}
.DidsModalBody {
	background: #fff;
	border-radius: 10px;
	position: relative;
}
.DidsModalCloseButton {
	border: none;
	border-radius: 50%;
	background: transparent;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
}
.DidsModalContent {
	text-align: center;
}
.DidsModalHeading {
	color: #8e1b4c;
	font-weight: bold;
	font-size: 1.5rem;
}
.DidsModalContent p {
	margin-bottom: 0.5rem;
}
.mb05 {
	margin-bottom: 0.5rem;
}
@media (min-width: 1200px) and (max-width: 1400px) {
	.DidsModalMain {
		margin-right: 7rem;
		max-width: 900px;
	}
	.DidsModalMain1 {
		margin-right: 9rem;
	}
	.DidsModalMain2 {
		max-width: 1000px;
		margin-right: 4rem;
	}
}

/* only in DIds if possible*/
.modal-open {
	overflow: hidden;
	overflow-y: scroll;
	padding-right: 0 !important;
}

/* ImageAnalysis */
.ImageAnalysisIcon {
	background: hsla(257, 26%, 36%, 0.5);
	padding: 10px;
	border-radius: 50%;
	height: 133px;
	width: 133px;
	cursor: pointer;
}
.csWidth {
	width: 50%;
}
.csWidth1 {
	width: 75%;
}
@media (max-width: 1200px) {
	.ImageAnalysisIcon {
		height: unset;
		width: unset;
	}
}
@media (max-width: 992px) {
	.ImageAnalysisIcon {
		height: unset;
		width: unset;
	}
	.csWidth {
		width: unset;
	}
	.csWidth1 {
		width: unset;
	}

	#image-canvas {
		border-radius: 20px 20px 0 0;
	}
	#environment_analysis {
		border-radius: 20px 20px 0 0;
	}
	.iman-turncam {
		border-radius: 20px 20px 20px 20px;
	}
}
@media (max-width: 767px) {
	.DidsModalContent {
		max-height: 440px;
		overflow-y: scroll;
	}
}
@media (max-width: 576px) {
	.saturationIMagesPopup {
		margin: auto;
	}
	.DidsModalContent {
		max-height: 400px;
		overflow-y: scroll;
	}
}
/* ImageAnalysis information page */
.timerBox {
	position: absolute;
	right: 0;
	border-radius: 5px;
	width: fit-content;
}

.timeGiven {
	background: #7b17b4;
	padding: 10px 20px;
	color: #fff;
	text-align: center;
	border-radius: 5px 5px 0 0;
}
.timeText {
	padding: 10px 20px;
	background: #f1f1f1;
	border-radius: 0 0 5px 5px;
}

@media (max-width: 992px) {
	.timeGiven {
		padding: 5px 10px;
	}
	.timeText {
		padding: 5px 10px;
	}
	.imageanalysismaincontainer .red-dot {
		width: 17px;
	}
}
@media (max-width: 576px) {
	.imageanalysismaincontainer .red-dot {
		width: 19px;
		height: 14px;
	}
	.enviromentMainContainerMainDiv .red-dot {
		width: 17px;
		height: 13px;
	}
}
.progressOuterDiv {
	border: 2px solid #c0c0c0;
	background: transparent;
	height: 12px;
	border-radius: 20px;
}
/* .progressInnerDiv1 {
	width: 49%;
	background: #dd1d21;
	height: 8px;
	border-radius: 20px;
	position: relative;
}
.progressInnerDiv1::after {
	content: "";
	height: 12px;
	width: 12px;
	border-radius: 50%;
	background: #125c84;
	position: absolute;
	left: 0;
	top: -3px;
} */
.progressInnerDiv {
	width: 49%;
	background: #dd1d21;
	height: 8px;
	border-radius: 20px;
	position: relative;
}
.progressInnerDiv::after {
	content: "";
	height: 12px;
	width: 12px;
	border-radius: 50%;
	background: #125c84;
	position: absolute;
	right: -6px;
	top: -3px;
}

.imageAnalysisWebImage img {
	border-radius: 20px 0 0 20px;
	height: 100%;
}

.imageAnlysisDetailsMainDiv {
	border-radius: 0 20px 20px 0;
	background: #fff;
	padding: 15px;
}
@media (max-width: 992px) {
	.imageAnalysisWebImage img {
		border-radius: 20px 20px 0 0;
	}
	.imageAnlysisDetailsMainDiv {
		border-radius: 0 0 20px 20px;
	}
}
.iconContent {
	margin-left: 10px;
}
.UnderexposedBG {
	width: 26%;
	background: #17c866;
}
.OverexposedBG {
	width: 39%;
	background: #ffc600;
}
.BrightnessBG {
	width: 20%;
	background: #f33551;
}
.averageColorBox {
	width: 25px;
	height: 20px;
	background: #757575;
	margin-left: 10px;
}
.left0::after {
	left: 0 !important;
}
.imageCircle {
	height: 350px !important;
	width: 350px !important;
}
.imageCircle2 {
	height: 300px !important;
	width: 300px !important;
}
.imageNeedle {
	width: 170px !important;
}
.imageNumber div {
	font-size: 15em !important;
}
@media (max-width: 576px) {
	.imageCircle {
		height: 200px !important;
		width: 200px !important;
	}
	.imageCircle2 {
		height: 160px !important;
		width: 160px !important;
	}
	.imageNeedle {
		width: 100 !important;
	}
	.imageNumber div {
		font-size: 7em !important;
	}
}
/* rnviroment analysis */
.enviromentAnlysisDetailsMainDiv {
	border-radius: 0 20px 20px 0;
	background: #fff;
	padding: 15px;
}
#evanMainDiv .evanRightDiv {
	min-height: 380px;
}
.envCircle2 {
	height: 350px !important;
	width: 350px !important;
}
.envCircle {
	height: 300px !important;
	width: 300px !important;
}
.envNeedle {
	width: 170px !important;
}
.envNumber div {
	font-size: 15em !important;
}
@media (max-width: 992px) {
	.enviromentAnlysisDetailsMainDiv {
		border-radius: 0 0px 20px 20px;
	}
}
/* emotion analysis */
.emotionAnalysisWebImage img {
	border-radius: 20px 0 0 20px;
}

.emotionAnlysisDetailsMainDiv {
	border-radius: 0 20px 20px 0;
	background: #fff;
	padding: 15px;
	height: 100%;
}
.emotionContentDiv {
	background: hsla(206, 75%, 25%, 0.747);
	color: #fff;
}
.emotionIndexBorder {
	border-left: 4px solid #9d50ff;
}
.emotionIndexBorder1 {
	border-left: 4px solid #ffc600;
}
.emotionIndexBorder2 {
	border-left: 4px solid #ff53a0;
}
.emotionRightDiv {
	min-height: 375px;
}
.emoCircle2 {
	height: 350px !important;
	width: 350px !important;
}
.emoCircle {
	height: 300px !important;
	width: 300px !important;
}
.emoNeedle {
	width: 170px !important;
}
.emoNumber div {
	font-size: 15em !important;
}
.emotionAnalysisMAinDiv .red-dot {
	width: 18px;
	height: 13px;
}
@media (min-width: 576px) {
	.emotionAnalysisMAinDiv .red-dot {
		margin-top: 5px !important;
	}
}
@media (max-width: 1200px) {
	.emotionAnalysisMAinDiv .red-dot {
		width: 24px;
		height: 12px;
	}
	/* .emotionAnlysisDetailsMainDiv {
		border-radius: 0 0 20px 20px;
	} */
}
@media (max-width: 992px) {
	#webcam {
		border-radius: 20px 20px 0 0;
	}
	.emotionAnlysisDetailsMainDiv12 {
		border-radius: 0 0 20px 20px;
	}
}
@media (max-width: 576px) {
	.emotionAnalysisWebImage img {
		border-radius: 20px 20px 0 0px;
	}
	.emotionAnlysisDetailsMainDiv {
		border-radius: 0 0 20px 20px;
	}
	.emotionAnlysisDetailsMainDiv img {
		width: 50%;
	}
	.emotionAnlysisDetailsMainDiv {
		height: 250px;
	}
	.emotionRightDiv {
		min-height: unset;
	}
	.emotionAnalysisWebImage {
		min-height: 210px;
	}
	.emotionAnalysisMAinDiv .red-dot {
		margin-top: 1.8rem !important;
	}
	.emoCircle {
		height: 200px !important;
		width: 200px !important;
	}
	.emoCircle2 {
		height: 150px !important;
		width: 150px !important;
	}
	.emoNeedle {
		width: 100px !important;
	}
	.emoNumber div {
		font-size: 7em !important;
	}
}
/* digital interview */
.iconWrapper {
	padding: 10px 10px;
	background: hsla(254, 30%, 45%, 0.5);
	border-radius: 50%;
	width: fit-content;
}
.digitalIcon {
	border-bottom: 4px solid #ff6abf;
	width: fit-content;
	padding-bottom: 10px;
}
.digitalPlaceHolder img {
	border-radius: 20px 20px 0 0;
}
.placeholderBottom {
	background: #fff;
	border-radius: 0 0 20px 20px;
}
.digitalButtonBox {
	padding: 4px 0;
	background: #c6d8e1;
	font-weight: 600;
	border-radius: 5px;
	border: 2px solid #a0bece;
	width: 110px;
	text-align: center;
}
.iconWrapper {
	cursor: pointer;
}
#sampleTestResult .DidsModalBody {
	background: hsla(263, 54%, 16%, 0.171);
	border: 2px solid #fff;
}
.digitagPopHead {
	background: #018280;
	border-radius: 20px;
	padding: 5px 15px;
	width: fit-content;
	margin: auto;
	font-weight: 600;
	font-size: 20px;
	color: #fff;
}
.popTable {
	margin-bottom: 0;
	/* color: #fff; */
	border-collapse: collapse;
	border-radius: 10px;
	border-style: hidden; /* hide standard table (collapsed) border */
	box-shadow: 0 0 0 1px #666; /* this draws the table border  */
	font-size: 12px;
}
td,
th {
	border: 1px solid #7c7c7c;
}
.tableHeadingColor1 {
	background: #125c84;
	color: #fff;
}
.tableHeadingColor2 {
	background: hsla(179, 98%, 26%, 0.363);
}
.tableHeadingColor3 {
	background: #5fd0ce;
}
.tableHeadingColor4 {
	background: #9ed3f0;
}
.popTable td {
	background: #d9f7f7;
}
.popTable td:nth-child(3),
.popTable td:nth-child(4),
.popTable td:nth-child(5) {
	background: #cee9f8;
}
.popTable .tableComment {
	text-align: left;
}
@media (max-width: 992px) {
	.digitalButtonBox {
		width: 96px;
	}
	.didsMAinModalCoursel .modal-dialog {
		max-width: 700px;
	}
}
@media (max-width: 768px) {
	.didsMAinModalCoursel .modal-dialog {
		max-width: 500px;
	}
	.didsMAinModalCoursel .testResultSamplePreview {
		max-height: 300px;
		overflow-y: scroll;
	}
}
@media (max-width: 576px) {
	.digitalButtonBox {
		width: 94px;
		font-size: 12px;
	}
	.digitalIcon .iconWrapper {
		width: 75%;
		margin: auto;
	}
	.didsMAinModalCoursel .testResultSamplePreview {
		max-height: 250px;
		overflow-y: scroll;
	}
	.digitagPopHead {
		font-size: 16px;
	}
}
.didsMAinModalCoursel .testResultSamplePreview {
	max-height: 350px;
	overflow-y: scroll;
}
@media (max-width: 576px) {
	.popTable {
		font-size: 6px;
	}
	.buttonCommon span img {
		width: 50%;
	}
	.buttonCommon {
		top: 60%;
	}
}
/* page2 */
.iconWithContentParent {
	color: #fff;
}
.digitalPlaceContent {
	border-left: 3px solid #ff6abf;
	padding-right: 20px;
}
.colorYellowborder {
	/* border-left: 3px solid #fab455; */
	border-color: #fab455;
}
.colorBlueborder {
	border-color: #7194f9;
	/* border-left: 3px solid #7194f9; */
}
.digitalPlaceContent1 {
	border-top: 3px solid #ff6abf;
	width: 110px;
	text-align: center;
}
.widthChangeForIcon {
	width: 140px;
}
.digitalPlaceIcon {
	/* width: fit-content; */
	width: 75%;
}
@media (max-width: 576px) {
	.digitalPlaceContent {
		padding-right: 5px;
	}
	.digitalMainDiv {
		min-height: 250px;
	}
}
/* page 3 */
.digitalMainDiv {
	min-height: 400px;
}

.digitalMainDiv video,
.digitalMainDiv {
	border-radius: 15px;
}
.digitalCircle {
	height: 380px !important;
	width: 380px !important;
}
.digitalCircle1 {
	height: 320px !important;
	width: 320px !important;
}
.digitalNeedle {
	width: 185px !important;
}
.digitalNumber div {
	font-size: 15em !important;
}
@media (max-width: 576px) {
	.digitalMainDiv {
		min-height: 250px;
	}
	.digitalCircle1 {
		height: 200px !important;
		width: 200px !important;
	}
	.digitalCircle {
		height: 150px !important;
		width: 150px !important;
	}
	.digitalNeedle {
		width: 100px !important;
	}
	.digitalNumber div {
		font-size: 7em !important;
	}
}
/* result pre page */
.resultOuterDiv {
	border: 2px solid #575565;
	border-radius: 15px;
	padding: 10px;
	/* background: hsla(245, 69%, 10%, 0.5); */
	background: transparent;
}
.resultInnerDiv {
	background: hsla(256, 46%, 11%, 0.829);
	border-radius: 10px;
}

.noteDiv {
	padding: 3px 15px;
	border-radius: 20px;
	background: #054f77;
	width: fit-content;
	border: 2px solid #317194;
}
.noteConetnt {
	background: hsla(207, 69%, 21%, 0.651);
}
/* output */
.text-cyan {
	color: #5fd0ce;
}
.OutPutTable .btlr10 {
	border-top-left-radius: 10px;
}
.OutPutTable .btrr10 {
	border-top-right-radius: 10px;
}
.OutPutTable .bblr10 {
	border-bottom-left-radius: 10px;
}
.OutPutTable .bbrr10 {
	border-bottom-right-radius: 10px;
}
.OutPutTable td,
.OutPutTable th {
	text-align: center;
}
.OutPutTable p {
	margin-bottom: 0;
}
.OutputContainer {
	/* min-height: 446px; */
}
.OutPutTable .wid100 {
	width: 100px;
}
/* about */
.aboutMainDiv {
	background: #fff;
	border-radius: 15px;
}
.rightDeco {
	top: 0;
	right: 0;
}
.leftDeco {
	top: 0;
	left: 0;
}
.cstmText {
	color: #5d5d5d;
}
.aboutContentDiv {
	background: url(../images/userflow/about/commentBox.png);
	width: 300px;
	height: 207px;
	position: absolute;
	top: -80px;
	right: -180px;
	background-size: contain;
	background-repeat: no-repeat;
}
.aboutInnerContentDiv {
	position: absolute;
	top: 38%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 250px;
	/* padding: 0 30px; */
	color: #fff;
}
@media (max-width: 1200px) {
	.aboutContentDiv {
		top: -100px;
		right: -160px;
	}
}
@media (max-width: 992px) {
	.cstmWidthChange .modal-dialog {
		max-width: 700px;
	}
}
@media (max-width: 576px) {
	.aboutContentDiv {
		right: -100px;
		width: 240px;
		height: 167px;
	}
	.aboutInnerContentDiv {
		left: 52%;
		width: 210px;
		font-size: 12px;
	}
}
.csPointer {
	cursor: pointer;
}
.popUpRightDeco {
	position: absolute;
	top: 0;
	right: 0;
}
.aboutSurveyForm {
	color: #8c8c8c;
}
.CreditPopUPHeading {
	padding: 5px 15px;
	border-radius: 20px;
	background: #125c84;
	color: #fff;
	width: fit-content;
	margin: auto;
	font-weight: 600;
	font-size: 18px;
}
.aboutBookNextButton {
	/* justify-content: end; */
	top: unset;
	bottom: 0;
	right: 50%;
	width: fit-content;
}
.aboutBookPrevButton {
	/* justify-content: start; */
	top: unset;
	bottom: 0;
	left: 38%;
	width: fit-content;
}
.creditSeperaterLine {
	height: 100%;
	background: #125c84;
	width: 3px;
	margin: auto;
}
.creditPopupContent p {
	margin-bottom: 0;
	color: #333333;
}
.CreditPopUPHeadingMain {
	color: #fff;
	font-weight: 600;
	background: #8e1b4c;
	border-radius: 5px;
	padding: 5px 10px;
	width: fit-content;
}
@media (max-width: 992px) {
	.aboutBookNextButton {
		right: 48%;
	}
	.aboutBookPrevButton {
		left: 36%;
	}
}
@media (max-width: 768px) {
	.csBookModalMainNew .DidsModalBody {
		max-height: 400px;
		overflow-y: scroll;
	}
}
@media (max-width: 576px) {
	.buyBookOne img {
		width: 50%;
	}
	.aboutBookPrevButton {
		left: 60%;
	}
	.aboutBookNextButton {
		right: 7%;
	}
}

.creditBottomMainDiv {
	background: #e5e5e5;
	border-radius: 5px;
	padding: 10px 15px;
}
.creditBottomMainDiv p {
	margin-bottom: 0;
}
.DidsModalBody11 {
	padding: 8px 10px;
}

.active-background {
	background-color: #5fcd7a !important;
}

.cs_pointer {
	cursor: pointer;
}
@media (max-width: 576px) {
	.cstmWidthChange .DidsModalBody {
		height: 450px;
		overflow-y: scroll;
	}
}
.stateBlueColorBox {
	height: 25px;
	width: 40px;
	border-radius: 3px;
	background-color: #a8d1de;
	border: 2px solid #85c8dcbd;
}
.paleGrayColorBox {
	height: 25px;
	width: 40px;
	border-radius: 3px;
	background-color: #d7d7d7;
	border: 2px solid #c4b9b9c9;
}
.tanColorBox {
	height: 25px;
	width: 40px;
	border-radius: 3px;
	background-color: #e3ceb7;
	border: 2px solid rgba(196, 185, 185, 0.76);
}

/* loader */
.didsLoaderGif {
	width: unset !important;
	height: unset !important;
}

.informationMainDivMAin .iconMainDiv {
	border: 2px solid #e5e5e5;
	padding: 5px;
	border-radius: 5px;
}
.informationMainDivMAin .imageAnlysisDetailsMainDiv {
	padding: 10px;
}
.rangeColorRedForImage {
	background: #dd1d21;
	width: 40%;
	height: 100%;
	display: inline-block;
}
.rangeColorYellowForImage {
	background: #ffc600;
	width: 40%;
	height: 100%;
	display: inline-block;
}
.rangeColorGreenForImage {
	background: #17c866;
	width: 20%;
	height: 100%;
	display: inline-block;
}
.progressBarMainInnerDiv {
	height: 10px;
	position: relative;
}
.progressBarMainInnerDiv::before {
	content: "";
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	height: 9px;
	width: 12px;
	background: #000;
	position: absolute;
	top: -100%;
	left: 0;
	transform: rotate(180deg);
}
.progressRangeMainDiv2 .progressBarMainInnerDiv::before {
	left: 50%;
}
.progressRangeMainDiv2 .rangeColorYellowForImage {
	width: 20%;
}
.progressRangeMainDiv2 .rangeColorRedForImage {
	width: 50%;
}
.progressRangeMainDiv2 .rangeColorGreenForImage {
	width: 40%;
}
.progressRangeMainDiv3 .rangeColorYellowForImage {
	width: 30%;
}
.progressRangeMainDiv3 .rangeColorRedForImage {
	width: 55%;
}
.progressRangeMainDiv3 .rangeColorGreenForImage {
	width: 15%;
}
.progressRangeMainDiv4 .rangeColorYellowForImage {
	width: 35%;
}
.progressRangeMainDiv4 .rangeColorRedForImage {
	width: 18%;
}
.progressRangeMainDiv4 .rangeColorRedForImage1 {
	width: 22%;
}
.progressRangeMainDiv4 .rangeColorGreenForImage {
	width: 25%;
}
.progressRangeMainDiv3 .progressBarMainInnerDiv::before {
	left: 30%;
}
.progressRangeMainDiv4 .progressBarMainInnerDiv::before {
	left: 10%;
}
.parentIcon {
	width: fit-content;
}
@media (min-width: 1400px) {
	.cstmAbove1400Mt1 {
		margin-top: 1.2rem;
	}
	.cst1400Width {
		width: fit-content;
	}
	.cst1400Width1 {
		width: fit-content;
	}
	.cst1400JustCent {
		justify-content: center !important;
	}
	.cstm1400hide {
		display: none;
	}
	.cstm1400show {
		display: block !important;
	}
	.cstmWidth1400New {
		max-width: 554px;
	}
	.cstm1400Width5 {
		max-width: 123px;
	}
	.imagePlaceHolderButtonParent1400 {
		max-width: 529px;
	}
	.cstImage1400 {
		display: block !important;
	}
	.cstImage1400Minus {
		display: none;
	}
}
/* @media (min-width: 1400px) and (max-width: 1535px) { */
@media (min-width: 1535px) {
	.cst1400Width_1 {
		width: fit-content;
	}
}
.mbCstm1 p {
	margin-bottom: 0;
}
@media (max-width: 992px) {
	.cstm1400Width5 {
		max-width: 123px;
	}
}
.didsLearningPathLogo {
	max-width: 25px;
	margin-right: 15px;
}
#sidebar ul li a:hover .didsLearningPathLogo {
	display: none;
}
#sidebar ul li a:hover .didsLearningPathLogohover {
	display: block !important;
}
#sidebar ul li.active > a .didsLearningPathLogo {
	display: none;
}
#sidebar ul li.active > a .didsLearningPathLogohover {
	display: block !important;
}
.logoWidthNew {
	width: 35%;
}
.leftImageLogin img {
	object-fit: cover;
}

/* conclude fireworks */
.fireworks {
	height: 230px;
	width: 230px;
	position: absolute;
}
.fireworks11 {
	height: 180px;
	width: 180px;
	position: absolute;
}
.fireworks1 {
	left: -140px;
	top: -100px;
}
.fireworks2 {
	right: -150px;
	top: 0px;
}
@media (max-width: 992px) {
	.fireworks2 {
		left: -150px;
		top: -100px;
	}
}
@media (max-width: 768px) {
	.fireworks2 {
		display: none;
	}
}
@media (max-width: 576px) {
	.fireworks1 {
		height: 180px;
		width: 180px;
		left: -140px;
		top: -30px;
	}
}
.minHight1 {
	min-height: 145px;
}