.dashboard-wrapper{
    padding: 3rem;
    width: 80%;
    font-family: "Archivo";
    background: #f1f1f1;
	flex: 1;
}
.dashboard-wrapper-inner{
    padding: 2rem;
    background: white;
    border-radius: 12px;
}
.dashboard-banner{
	display: flex;
    flex-wrap: wrap;
    position: relative;
    height: auto;
	background: #00aec7;
	padding: 2rem;

}
.dashboard-banner-top{
	width: 1140px;
    max-width: 100%;
    margin: auto;
}
.dashboard-banner-top .elementor-icon-box-wrapper{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.dashboard-banner-top .elementor-icon-box-wrapper .elementor-icon-box-icon svg{
	font-size: 1rem;
    color: white;
}
.dashboard-banner-top .elementor-icon-box-wrapper .elementor-icon-box-icon svg path{
	fill: white;
}
.dashboard-banner-top .elementor-icon-box-title{
    font-size: 1rem;
    margin-top: -4px;
    margin-bottom: 0;
    margin-left: 0.6rem;
}
.dashboard-banner-top .elementor-icon-box-title a {
	color: white;
    font-family: 'Archivo';
}
.dashboard-banner img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dashboard-banner-left{
	position: relative;
}
.dashboard-banner-left{
	width: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dashboard-banner-left h1{
	margin: 0;
    color: white;
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 1em;
	text-align: center;
	text-transform: uppercase;
}
.dashboard-banner-right{
    width: 40%;
    position: relative;
    z-index: 2;
}
.dashboard-course-progress {
    border: solid 1px #e6e6e6;
    padding: 2.5rem 1.5rem;
}
.dashboard-course-progress-top img{
    width: 2.3rem;
    margin-right: 1rem;
}
.dashboard-track.desktop-active{
	opacity: 1;
}
.dashboard-course-progress-top{
    display: flex;
    flex-wrap: wrap;
}
.dashboard-course-progress-top-text h1{
    margin: 0;
    font-weight: 400;
    font-size: 1rem;
    color: #000000;
}
.dashboard-course-progress-top-text{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.dashbord-content-card.disabled{
    pointer-events: none;
    opacity: 0.5;
}
.dashboard-course-progress-top-text h2{
    margin: 0;
    font-weight: 400;
    font-size: 1rem;
    color: #00aec7;
}
.dashboard-course-progress-top-text.profile-edit h2{
    color: #000000;
    opacity: 0.5;
}
.dashboard-course-progress-top p{
    color: #000000;
    margin-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.5em;
}
.dashboard-course-progress-top p a{
    color: #00aec7;
}
.dashboard-course-progess-track{
    background: #e6e6e6;
    margin-top: 2rem;
    display: flex;
    border-radius: 100px;
    position: relative;
}
.dashboard-course-progess-track-paint{
    position: absolute;
    height: 100%;   
    width: 0%;
    background: #00aec7;
    border-radius: 10rem;
}
.dashboard-course-progess-track-paint.step-one{
    width: 33%;
}
.dashboard-course-progess-track-paint.step-two{
    width: 66.5%;
}
.dashboard-course-progess-track-paint.step-three{
    width: 100%;
}
.dashboard-track {
    width: calc(100% / 3);
    border-radius: 100px;
    position: relative;
    z-index: 2;
    opacity: 0.5;
}
.dashboard-track-inner {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem ;
}
.dashboard-track-inner-text {
    color: #000000;
    font-size: 0.8rem;
    text-align: right;
    margin-right: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dashboard-track-inner-text p:nth-child(1){
    font-weight: 500;
}
.dashboard-track-inner-text p:nth-child(2){
    font-weight: 700;
}
.dashboard-track-inner img{
    height: 1.5rem;
}

.dashboard-track-inner-icon{
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    width: 3rem;
    height: 3rem;
}
.dashboard-content{
    display: flex;
    margin-top: 2rem;
    justify-content: space-between;
}
.dashbord-content-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #3990a1;
    padding: 3rem 2rem;
    width: calc(100% / 3.2);
}
.dashbord-content-card img {
    height: 3rem;
}
.dashbord-content-card h4{
    font-size: 1rem;
    color: white;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.dashbord-content-card h5{
    font-size: 0.8rem;
    color: white;
    text-align: center;
    margin: 0;
    min-height: 60px;
}
.dashboard-course-progress-top-left{
    width: 70%;
}
.dashboard-course-progress-top-right{
    width: 30%;
}
.dashboard-course-progress-top.classes a{
    background-color: #00aec7;
    color: white;
    font-weight: 400!important;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 1rem 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #00aec7;
	border-radius: 0px;
}
.dashboard-course-progress-top.classes a:hover{
    background-color: transparent;
    color: #00aec7;
    border: solid 1px #00aec7;
}
.dashbord-content-card a{
    margin-top: 1.5rem;
    background-color: #00aec7;
    color: white;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 1rem 0rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #00aec7;
	border-radius: 5px;
}
.dashbord-content-card a:hover{
    background-color: #00688f;
    color: #ffffff;
    border: solid 1px #00688f;
}
.your-classes{
    margin-top: 2rem;
}
.dashboard-class-row{
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}
.dashboard-class-row.row-titles{
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 2rem;
}
.dashboard-class-row div{
    width: calc(100% / 6);
	padding-right: 10px;
    
}
.dashboard-class-row .name{
    width: 25%;
}
.dashboard-class-row .date{
    width: 20%;
}
.dashboard-class-row .status{
    display: none;
}
.your-classes{
    border: solid 1px #e6e6e6;
    padding: 2.5rem 1.5rem;
}
.dashboard-class-row.class-item{
    border: solid 1px #d3d3d354;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
	margin: 0.5rem 0;
}
.dashboard-course-progress-top-left{
    display: flex;
}
.dashboard-course-progress-top .tip{
    width: 100%;
}
.dashboard-course-progress-top .tip h3{
    font-size: 0.6rem;
    color: #6b6b6b;
    display: inline-block;
    border: solid 1px #00aec7;
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 0;
}
.dashboard-wrapper-floor-two{
    display: flex;
    margin-bottom: 1rem;
	margin-top: 1rem;
    justify-content: space-between;
}
.dashboard-wrapper-floor-two > div {
    width: 49%;
    border: solid 1px #e6e6e6;
    padding: 2.5rem 1.5rem;
}
.dashboard-wrapper-floor-two .dashboard-course-progress-top-text h1, .dashboard-wrapper-floor-two .dashboard-course-progress-top-text h2{
    font-size: 1rem;
    
}
.dashboard-wrapper-floor-two img{
    width: 2rem;
}
.circular-track-course-data-progress-dots{
    display: flex;
    margin-top: 2rem;
}
.circular-track-course-data-progress .dot{
    width: 8px;
    height: 8px;
    border: solid 1px #00aec7;
    border-radius: 100px;
    margin-right: 2px;
}
.circular-track-course-data-progress .dot.full{
    background: #00aec7;
}
.circular-track-course-data-progress{
    display: flex;
    flex-direction: column;
}
.circular-track-course-data > p{
    color: #000000;
    font-size: 0.8rem;
}
.circular-track-course-data-progress p{
    margin-top: 0.3rem;
    font-size: 0.8rem;
}
.circular-track{
    display: flex;
    width: 100%;
    margin-top: 2rem;
}
.circular-track > div:nth-child(1){
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circular-track > div:nth-child(2){
    width: 60%;
    padding-left: 1rem;
}
.circle-container {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-circle {
    transform: rotate(-90deg); /* Rotate to start from the top */
}

circle {
    fill: none;
    stroke: #ddd; /* Background circle color */
}

circle:nth-child(2) {
    stroke: #00aec7; /* Progress circle color */
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.percentage {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 400;
    color: #00aec7;
}
.track-start-date{
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    font-weight: 400;
    opacity: 0.5;
    font-size: 0.8rem;
}
.track-start-date img{
    width: 1rem;
    margin-right: 0.5rem;
}
@media(max-width: 1024px){
	.dashboard-banner-top{
		display: none;
	}
    .dashboard-wrapper {
        padding: 2rem;
		width: 80%;
    }
	.dashboard-wrapper-inner{
		padding: 2rem 2rem 5rem 2rem;
	}
    .dashboard-class-row {
        font-size: 0.6rem;
    }
    .dashboard-course-progress-top.classes a{
        padding: 0.8rem 1.5rem;
        
    }
    .dashboard-course-progress-top-text h1, .dashboard-course-progress-top-text h2 {
        font-size: 1rem;
    }
}
@media(max-width: 600px){
	.dashboard-wrapper{
		width: 100%;
	}
	.dashboard-banner-left{
		justify-content: center;
	}
	.dashboard-banner{
		height: 200px;
	}
	.dashboard-banner-left {
    	width: 100%;
	}
	.dashboard-banner-right {
        width: 100%;
        display: none;
	}
	.dashboard-banner-left h1 {
		font-size: 1.875rem;
		text-align: center;
	}
	.dashboard-track.active{
		opacity: 1;
	}
    .dashboard-track.active{
        background: #00aec7;
    }
    .dashboard-course-progress-top.classes a{
        font-size: 1rem;
    }
    .dashboard-course-progress-top .tip h3 {
        font-size: 0.8rem;
    }
    .dashboard-course-progress-top.classes a {
        padding: 1rem 1.5rem;
    }
    .dashbord-content-card a{
        font-size: 1rem;
    }
    .dashbord-content-card h5 {
        max-width: 260px;
        font-size: 1rem;
    }
    .dashboard-class-row .location, .dashboard-class-row .type, .dashboard-class-row .date{
        display: none;
    }
    .dashboard-class-row div {
        width: calc(100% / 3);
    }
    .dashboard-class-row .name {
        width: 50%;
    }
    .dashboard-class-row {
        font-size: 0.7rem;
    }
    .dashboard-class-row .time {
        width: 25%;
    }
    .dashboard-course-progress-top-right {
        width: 100%;
        margin-top: 1.5rem;
    }
    .dashboard-course-progress-top-left {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
	.dashboard-class-row.class-item{
		padding: 0.5rem;
	}
	.dashboard-class-row div{
		padding-right: 0px;
	}
    .dashboard-class-row .duration {
        width: 25%;
    }
    .your-classes{
        padding: 2.5rem 1.5rem;
    }
    .dashboard-course-progess-track{
        flex-direction: column;
        background: white;
    }
    .dashboard-track{
        width: 100%;
    }
    .dashboard-course-progess-track-paint{
        display: none;
    }
    .dashboard-track{
        background: #e6e6e6;
    }
    .dashboard-track.active{
        background: #00aec7;
    }
    .dashboard-track:nth-child(n+2){
        margin-top: 1rem;
    }
    .dashboard-course-progress-top {
        flex-direction: column;
    }
    .dashboard-course-progress-top-text h1{
        margin-top: 1rem;
    }
    .dashboard-course-progess-track{
        margin-top: 1rem;
    }
    .dashboard-course-progress {
        padding: 2.5rem 1.5rem;
    }
    .dashbord-content-card{
        width: 100%
    }
    .dashboard-content{
        flex-direction: column;
    }
    .dashboard-content .dashbord-content-card:nth-child(n+2){
        margin-top: 1rem;
    }
}