/********************** COMMON CSS STARTS **********************/

	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
	*{
		font-family: 'Poppins', sans-serif;
	}
	body{
		overflow-y: auto;
		position: relative;
	}
	.alert_custom{
		display: none;
	}
	
	header{
		background: #fff;
		padding: 10px 0px;
		-webkit-box-shadow: 0px 3px 5px 2px rgb(0 0 0 / 24%);
		-moz-box-shadow: 0px 3px 5px 2px rgb(0 0 0 / 24%);
		box-shadow: 0px 3px 5px 2px rgb(0 0 0 / 24%);
	}
	label{
		font-weight: 600;
	}
	.bg-teal {
	    background-color: #4399c2!important;
	}
	.header-logo{
		max-width: 80px;
	}
	.file-drop-zone-title {
	    font-size: 1.25rem;
	    font-weight: 300;
	    padding: 2rem;
	    opacity: .5;
	}
	.main-btn{
		background: #ec9143;
		color: #fff;
		border: 1px solid #ec9143;
	}
	a.btn.small-button.text-right {
	    background: #ec9143;
	    padding: 3px 10px;
	    color: #fff;
	    font-size: 12px;
	    margin-left: 10px;
	}
	.name-profile{
		font-size: 40px;
	}
	.main-btn:hover{
		background: transparent;
		color: #ec9143;
	}
	.bg-img{
		background-size: cover;
		background-repeat: no-repeat;
	}
	.bg-light{
		background: #fafafa;
	}
	.navbar-dark .navbar-nav-link {
	    color: rgb(0 0 0 / 90%);
	}
	.navbar-dark {
	    color: rgba(255,255,255,.9);
	    background-color: #ffffff;
	    border-bottom-color: rgba(255,255,255,.1);
	    -webkit-box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 33%);
	    -moz-box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 33%);
	    box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 33%);
	}
	.navbar-dark .navbar-nav-link:focus, .navbar-dark .navbar-nav-link:hover {
	    color: #000;
	    background-color: rgba(255,255,255,.1);
	}
	.navbar-brand img {
	    height: 3.125rem;
	}
	.page-header-light{
		background: unset;
		border-bottom: none;
	}
	.page-title{
		align-items: center;
		padding-bottom: 0;
	}
	.page-title h4{
		font-size: 40px;
	}
	.mt-5{
		margin-top: 5px !important;
	}
	.mt-10{
		margin-top: 10px !important;
	}
	.mt-15{
		margin-top: 15px !important;
	}
	.mt-20{
		margin-top: 20px !important;
	}
	.mt-25{
		margin-top: 25px !important;
	}
	.mt-30{
		margin-top: 30px !important;
	}
	.mt-35{
		margin-top: 35px !important;
	}
	.mt-40{
		margin-top: 40px !important;
	}
	.mt-45{
		margin-top: 45px !important;
	}
	.mt-50{
		margin-top: 50px !important;
	}
	.mt-55{
		margin-top: 55px !important;
	}
	.mx-60{
		max-width: 60% !important;
	}
	.w-100{
		width: 100%;
	}
	.ml-15{
		margin-left: 15px;
	}
	.card{
		padding: 30px;
	}
	.card-group-control .card{
		padding: 0;
	}
	table thead{
		background: #000;
		/*color: #f9f9f92b;*/
	}
	table tbody tr:nth-child(even){
		background: #f5f5f5;
	}
	.bg-white{
		background-color: #fff;
	}
	.color-danger, .error{
		color: red;
	}
	.captcha-img{
		max-width: 100%;
	}
	.progress-circle{
		margin-right: 25px;
	}
	.parent-profile-table th{
		min-width: 150px !important;
	}
	.w-160{
		width: 160px !important;
	}
	.main-heading h3, .main-heading{
		font-weight: 600;
		text-align: center;
		color: #000;
	}
	.card{
		position: relative;
	}
	.active-dot, .inactive-dot{
		background: green;
		height: 8px;
		width: 8px;
		border-radius: 50%;
		position: absolute;
		top: 20px;
		right: 20px;
	}
	.inactive-dot{
		background: red;
	}
	.addbutton{
		border: 3px dashed #ec9143;
		height: 150px;
		border-radius: 50%;
		width: 150px;
		margin: 0 auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.addbutton .plus{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.addbutton .plus:before{
		position: absolute;
		content: '';
		border-left: 3px dashed #ec9143;
		height: 100px;
		width: 1px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.addbutton .plus:after{
		position: absolute;
		content: '';
		border-top: 3px dashed #ec9143;
		height: 1px;
		width: 60%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.panel-notification{
	    height: 300px;
	    overflow-y: scroll;
	}
	.contract-box{
	    background-color: #f4fafe;
	    padding: 20px;
	}
	.profile-btn{
	    background-color: #42a5f5;
	    color: #fff !important;
	    border: 1px solid #42a5f5;
	    padding: 2px 10px;
	    border-radius: 3px;
	    font-size: 11px;
	}
	.contract-box h4, .contract-box h5{
		color: #000;
	}
	.contract-box img{  
	    height: 70px;
	    width: 70px;
	    display: block;
	    margin: 0 auto;
	}
	.contract-box h4{
	    font-size: 20px;
	}
	.contract-box .desig span{
	    font-size: 13px;
	}
	.contract-box .desig h5{
	    margin-bottom: 0;
	    font-weight: 600;
	    color: green;
	}
	.content.content-profile{
	    padding-bottom: 0px;
	    max-width: 1200px;
	    margin: 0 auto;
	    padding: 0 0px 60px 0px;
	}
	.contract-pnl fieldset .box-row{
	    align-items: start;
	    display: flex;
	    overflow-y: hidden;
	    overflow-x: auto;
	    -webkit-overflow-scrolling: touch;
	    padding: 0 8px;
	    margin: 0;
	}
	.contract-pnl fieldset .box-row .box{
	    width: 50%;
	    padding: 7px 4px;
	    margin: 0;
	    text-align: center;
	    flex-shrink: 0;
	}
	.tex-tag{
		background: #f58646c7;
		color: #000;
		padding: 5px;
		border-radius: 5px;
		border: 1px solid #f58646;
		text-align: center;
	}
	.tex-tag.rhymes{
		background: #9ad4a1;
		color: #000;
	    padding: 5px;
	    border-radius: 5px;
	    border: 1px solid #04c61c;
	}
	.tex-tag.stories{
		background: #ecb6b6;
		color: #000;
	    padding: 5px;
	    border-radius: 5px;
	    border: 1px solid #e26c6c;
	}
	.exercises.content .tex-tag{
	    width: 100%;
    	margin: 10px;
    	height: unset;
    	display: flex;
	    align-items: center;
	    text-align: center;
	    justify-content: center;
	}
	.btn-blank{
		background: transparent;
		border: transparent;
	}
	.child-card h4{
		font-size: 30px;
	}
	.child-card .main-btn{
		width: 100%;
		margin: 0px 10px 0px 0px;
	}

	.child-card .btn-secondary{
		width: 100%;
		margin: 0px 0px 0px 10px;
	}
	.day-card{
		height: 100px;
		overflow: hidden;
	}

/*********************** COMMON CSS ENDS ***********************/




/*********************** PAGES CSS STARTS **********************/

	.login-page .form-section{
		display: flex;
		background: #fff;
		border-radius: 15px;
		padding: 20px;
		vertical-align: middle;
    	align-items: center;
	}
	.login-page .form-section .login-logo{
		max-width: 80px;
		display: block;
		margin: 0 auto;
	}
	.login-page .form-section .inner-text{
		padding: 20px;
	}
	.login-page .side-img{
		top: 25%;
		left: 12%;
		position: fixed;
	}
	.login-page .side-img-login{
		top: 13%;
		left: 16%;
		position: fixed;
	}
	.login-page .col-lg-4 {
		min-height: 721px;
	}
	.week-box .inner-box.bg-light .progress{
		background: #fff;
	}
	.week-box .inner-box.bg-light{
		background: #f5f5f5;
		padding: 20px;
	}
	.activity-completed{
		background: #1e905b;
		height: 30px;
		width: 30px;
		border-radius: 50px;
		border: 1px solid #1e905b;
		position: relative;
	}
	.activity-progress{
		background: #f58646;
		height: 30px;
		width: 30px;
		border-radius: 50px;
		border: 1px solid #f58646;
		position: relative;
	}
	.activity-pending{
		background: #ef5350;
		height: 30px;
		width: 30px;
		border-radius: 50px;
		border: 1px solid #ef5350;
		position: relative;
	}
	.activity-completed .checkicon, .activity-progress .checkicon, .activity-pending .checkicon{
		color: #fff;
		position: absolute;
		top: 54%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.profile-view-box{
	    margin-top: 40px;
	}
	.profile-view-box img{
	    height: 100px;
	    width: 100px;
	    object-fit: cover;
	    object-position: top;
	    border-radius: 50%;
	    display: block;
	    margin: 0 auto;
	}
	.profile-view-box p{
	    margin-top: 0px;
	    margin-bottom: 10px;
	}
	.link-text, .link-text:hover{
	    font-size: 25px;
	    color: #5aabf5;
	}
	.profile-btn{
	    background-color: #42a5f5;
	    color: #fff !important;
	    border: 1px solid #42a5f5;
	    padding: 2px 10px;
	    border-radius: 3px;
	    font-size: 11px;
	}
	.stats{
	    font-weight: 600;
	    font-size: 22px;
	}
	.pane-media{
	    padding: 15px;
	    background-color: #f5f6fa;
	}
	.heading-media-panel{
	    margin: 0px;
	    font-size: 15px;
	    color: #000;
	}
	.m-button-active-contracts{
	    background: #e7e2f0;
	    border:1px solid #e7e2f0;
	    border-radius: 50%;
	    color: #9681be !important;
	}
	.m-button-active-contractors{
	    background: #ffefe7;
	    border:1px solid #ffefe7;
	    border-radius: 50%;
	    color: #ffbc9d !important;
	}
	.m-button-contracts-month-wise{
	    background: #e7f8e5;
	    border:1px solid #e7f8e5;
	    border-radius: 50%;
	    color: #a4e59b !important;
	}
	.m-button-total-users{
	    background: #cfeffe;
	    border:1px solid #cfeffe;
	    border-radius: 50%;
	    color: #4ebaee !important;
	}
	.media-body p{
	    color: #989696;
	}
	.media-left, .media-right, .media-body{
	    vertical-align: middle;
	}
	.o-hidden{
	    overflow: hidden;
	}
	.media-body a{
		color: #000;
	}
	.panel-audit{
	    height: 355px;
	    overflow-y: scroll;
	    overflow-x: hidden;
	}
	.timeline {
	  position: relative;
	}
	.content:first-child {
	     padding-top: 10px; 
	}

	/* The actual timeline (the vertical ruler) */
	.timeline::after {
	    content: "";
	    position: absolute;
	    top: 10px;
	    left: 17px;
	    margin-left: -2px;
	    background-color: #e3e3e3;
	    height: 100%;
	    width: 1px;
	    border-radius: unset;
	    z-index: 1;
	}

	/* Container around content */
	.timeline .container {
	    padding: 10px 40px;
	    position: relative;
	    background-color: inherit;
	    width: 92%;
	}

	/* The circles on the timeline */
	.timeline .container::after {
	    font-weight: 400;
	    content: "";
	    background-image: url('../images/tick-grey.svg');
	    background-repeat: no-repeat;
	    background-size: 25px;
	    background-position: center center;
	    position: absolute;
	    width: 40px;
	    height: 40px;
	    right: -9px;
	    background-color: #fff;
	    top: 15px;
	    border-radius: 50%;
	    z-index: 11;
	    text-align: center;
	    padding-top: 10px;
	    color: #000;
	    border: 1px solid #e2e2e2;
	    box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
		-webkit-box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
		-moz-box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
	}
	.timeline .container.completed::after {
	    font-weight: 400;
	    background-image: url('../images/tick.svg');
	    background-repeat: no-repeat;
	    background-size: 25px;
	    background-position: center center;
	    position: absolute;
	    width: 40px;
	    height: 40px;
	    right: -9px;
	    background-color: #24b624;
	    top: 15px;
	    border-radius: 50%;
	    z-index: 11;
	    text-align: center;
	    padding-top: 10px;
	    color: #fff;
	    border: 1px solid green;
	    box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
		-webkit-box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
		-moz-box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
	}
	.timeline .container.in-progres::after {
	    font-weight: 400;
	    background-image: url('../images/progress.svg');
	    background-repeat: no-repeat;
	    background-size: 25px;
	    background-position: center center;
	    position: absolute;
	    width: 40px;
	    height: 40px;
	    right: -9px;
        background-color: #ecb043;
	    top: 15px;
	    border-radius: 50%;
	    z-index: 11;
	    text-align: center;
	    padding-top: 10px;
	    color: #fff;
	    border: 1px solid #ecb043;
	    box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
		-webkit-box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
		-moz-box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
	}

	/* Place the container to the left */
	.left {
	  	left: 0;
	}

	/* Place the container to the right */
	.right {
	  	left: 0;
	}

	/* Add arrows to the left container (pointing right) */
	/* Add arrows to the right container (pointing left) */
	.right::before {
	    content: " ";
	    height: 0;
	    position: absolute;
	    top: 35px;
	    width: 15px;
	    z-index: 1;
	    left: 28px;
	    border: 0.5px solid #e2e2e2;
	}

	/* Fix the circle for containers on the right side */
	.right::after {
	  left: -16px;
	}

	/* The actual content */
	.content-timeline {
	    padding: 10px;
	    background-color: transparent;
	    position: relative;
	}
	.content-timeline h2{
	    margin-top: 0px;
	    margin-bottom: 5px;
	    font-size: 17px;
	}
	.content-timeline p{
	    margin-bottom: 0px;
	    font-size: 12px;
	}
	.time-line-card{
		height: 474px;
	    overflow: hidden;
	    overflow-y: auto;
	}
	.txt-excercies{
		padding: 10px;
		margin-bottom: 0px;
		background: #fafafa;
		color: #000;
	}
	.completed-card{
		position: relative;
		height: 100px;
	    height: 100px;
    	overflow: hidden;
	}
	.later-days:after{
		position: absolute;
		content: '';
		background: #f5f5f5;
		opacity: 0.5;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
	}
	span.badge.badge-primary{
		position: relative;
		z-index: 999;
		cursor: pointer;
	}
	.intruction-feedback{
		display: none;
	}
	#header .main-heading h3, .main-heading{
		position: relative;
		top: -15px;
	}
	.add-button-card{
		height: 255px;
		position: relative;
		margin-bottom: 0px;
	}
	legend {
	    display: flex;
	    width: 100%;
	    padding-top: 10px !important;
	    color: #42a5f5;
	    font-weight: 600;
	}
	h5.panel-title, .h5.panel-title {
	    width: 90%;
	    color: #42a5f5;
	    font-size: 20px;
	}
	.view-all a, .view-all {
	    color: #ec9143;
	    border-bottom: 1px dotted #ec9143;
	}
	.activity-thumb{
		background: #fafafa;
		position: relative;
	}
	.completed-card .activity-thumb:before{
		position: absolute;
/*		content: '';*/
		background: #000;
		opacity: 0.6;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
	}
	.activity-thumb img{
	    height: 200px;
    	width: 100%;
    	object-fit: cover;
	}
	.badge-primary{
		border: none;
	}
	.badge-box{
		padding: 20px;
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    width: 40%;
	    transform: translate(-50%, -50%);
	}
	.badge-box img{
		max-width: 30%;
	}

/*********************** PAGES CSS ENDS ************************/







/********************** MEDIA QUERY STARTS ***********************/

	@media(max-width: 991px){
		.login-page .form-section{
			display: block;
			background: #fff;
			border-radius: 15px;
			padding: 20px;
			height: unset;
			overflow: hidden;
			margin-top: 30px;
		}
		.signup-form-img{
			display: none;
		}
		.login-page .side-img {
		    max-width: 40%;
		    margin-top: 50px;
		}
		.login-page .form-section .inner-text{
			border-right: none;
		}
		.main-btn{
			width: 100%;
		}
		.sidebar.sidebar-dark.sidebar-main.sidebar-expand-lg.sidebar-main-resized{
			left: -100% !important;
		}
		.sidebar.sidebar-dark.sidebar-main.sidebar-expand-lg{
			left: 0%;
		}
		.sidebar-control.sidebar-main-resize{
			color: #000 !important;
		}
		.page-title h4{
			width: 100%;
		}
		.btn{
			width: 100%;
		}
	}

	@media(max-width: 767px){
		.mt-sm-10{
			margin-top: 10px;
		}
	}
.social_button{
    width: 199px;
    top: 10px;
}
/*********************** MEDIA QUERY ENDS ************************/