/*======= User =======*/
.w-80{
width: 80px;
height: 80px;
object-fit: cover;
}
.user-dashboard-area {
.card{
.card-header{
background: $primary-color;
color: #fff;
font-weight: 600;
}
}
.user-info{
text-align: center;
margin-bottom: 22px;
img{
width: 130px;
height: 130px;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
display: inline-block;
}
h4{
font-size: 21px;
line-height: 31px;
font-weight: 600;
}
}
.user-menu {
border: 2px solid #ededed;
padding: 30px 30px;
ul {
li {
border-top: 0px;
position: relative;
a{
font-size: 16px;
line-height: 38px;
font-weight: 600;
display: block;
color: $secondary-color;
&:hover,
&.active {
color: $primary-color;
}
}
}
li {
&:first-child {
.list-group-item {
border-top: 1px solid rgba(0, 0, 0, .125);
}
}
}
}
}
.upload-img {
.img {
margin-bottom: 20px;
img {
width: 120px;
height: 120px;
border: 5px solid #fff;
box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
}
}
}
.mb-30 {
margin-bottom: 30px;
}
.dashboard-inner{
border: 2px solid #ededed;
padding: 30px 30px;
height: 100%;
.card{
margin-bottom: 30px;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
@include transition(0.3s);
border: 0px;
padding: 20px 10px 10px;
background: $primary-color;
position: relative;
overflow: hidden;
&::before{
position: absolute;
content: "";
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.13);
border-radius: 50%;
bottom: -80px;
right: -80px;
}
&::after{
position: absolute;
content: "";
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.13);
border-radius: 50%;
top: -80px;
right: -80px;
}
.card-body{
padding-right: 70px;
i{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
color: #fff;
right: 30px;
}
p{
font-size: 16px;
line-height: 26px;
font-weight: 500;
color: #fff;
margin-bottom: 15px;
}
h5{
font-size: 28px;
line-height: 38px;
font-weight: 600;
color: #fff;
}
}
&:hover{
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
}
}
.progress-area-step {
margin-bottom: 60px;
display: block;
overflow: hidden;
}
.progress-steps li {
width: 25%;
float: left;
text-align: center;
position: relative;
}
.progress-steps li .icon {
text-align: center;
margin: auto;
line-height: 30px;
font-size: 34px;
font-weight: 700;
color: rgb(199, 199, 199);
position: relative;
z-index: 9;
}
.progress-steps li.active .icon {
color: blue;
}
.progress-steps li:first-child:after {
display: none;
}
.progress-steps li:after {
position: absolute;
content: "";
height: 3px;
width: calc(100% - 30px);
background: #efefef;
top: 14px;
z-index: 0;
right: calc(50% + 15px);
}
.progress-steps li .progress-title {
padding-top: 10px;
}