.font-black {
    color: #000 !important;
}

.text-week {
	text-align: center;
	margin-bottom: 0px;
	position: absolute;
	top: 261px;
	left: 57px;
}

.text-days-of-week {
    text-align: center;
    margin-bottom: 0px;
    position: absolute;
    top: 281px;
    left: 49px;
    font-size: 11px;
}
.borderLeft {
	text-align: center;
	border-left: 1px solid;
	border-left-style: dashed;
}

.backgroundU {
	background-image: url('/Content/img/route/a_.png');
	background-repeat: no-repeat;
	height: 304px !important;
	border-right: 1px solid;
	border-right-style: dashed;
}

.background {
	background-image: url('/Content/img/route/b_.png');
	background-repeat: no-repeat;
	height: 304px !important;
	border-right: 1px solid;
	border-right-style: dashed;
}

.progress-route {
    position: absolute;
    clip: rect(0px, 0px, 260px, 0px);
}

.point1U {
	position: relative;
	top: 141px;
	left: 7px;
	cursor: pointer;
	height: 11px;
}

.point2U {
	position: absolute;
	top: 166px;
	left: 33px;
	cursor: pointer;
	height: 11px;
}

.point3U {
	position: absolute;
	top: 177px;
	left: 61px;
	cursor: pointer;
	height: 11px;
}

.point4U {
	position: absolute;
	top: 181px;
	left: 92px;
	cursor: pointer;
	height: 11px;
}

.point5U {
	position: absolute;
	top: 177px;
	left: 124px;
	cursor: pointer;
	height: 11px;
}

.point6U {
	position: absolute;
	top: 167px;
	left: 152px;
	cursor: pointer;
	height: 11px;
}

.point7U {
	position: absolute;
	top: 149px;
	left: 179px;
	cursor: pointer;
	height: 11px;
}

.point1 {
	position: relative;
	top: 117px;
	left: 6px;
	cursor: pointer;
	height: 11px;
}

.point2 {
	position: absolute;
	top: 107px;
	left: 33px;
	cursor: pointer;
	height: 11px;
}

.point3 {
    position: absolute;
    top: 97px;
    left: 61px;
    cursor: pointer;
    height: 11px;
}

.point4 {
	position: absolute;
	top: 93px;
	left: 93px;
	cursor: pointer;
	height: 11px;
}

.point5 {
	position: absolute;
	top: 97px;
	left: 124px;
	cursor: pointer;
	height: 11px;
}

.point6 {
	position: absolute;
	top: 108px;
	left: 152px;
	cursor: pointer;
	height: 11px;
}

.point7 {
    position: absolute;
    top: 125px;
    left: 178px;
    cursor: pointer;
    height: 11px;
}

.pin1U {
	position: absolute;
	top: 71px;
	left: -10px;
	height: 64px;
	z-index: 2;
	cursor: default;
}

.pin2U {
	position: absolute;
	top: 88px;
	left: 16px;
	height: 64px;
	z-index: 2;
	cursor: default;
}

.pin3U {
	position: absolute;
	top: 99px;
	left: 44px;
	height: 64px;
	z-index: 2;
	cursor: default;
}

.pin4U {
    position: absolute;
    top: 104px;
    left: 75px;
    height: 64px;
    z-index: 2;
    cursor: default;
}

.pin5U {
	position: absolute;
	top: 99px;
	left: 107px;
	height: 64px;
	z-index: 2;
	cursor: default;
}

.pin6U {
	position: absolute;
	top: 89px;
	left: 135px;
	height: 64px;
	z-index: 2;
	cursor: default;
}

.pin7U {
	position: absolute;
	top: 71px;
	left: 162px;
	height: 64px;
	z-index: 2;
	cursor: default;
}

.pin1 {
	position: absolute;
	top: 43px;
	left: -11px;
	height: 64px;
	z-index: 2;
	cursor: default;
}

.pin2 {
	position: absolute;
	top: 32px;
	left: 16px;
	height: 64px;
	z-index: 2;
	cursor: default;
}

.pin3 {
	position: absolute;
	top: 21px;
	left: 44px;
	height: 64px;
	z-index: 2;
	cursor: default;
}

.pin4 {
    position: absolute;
    top: 19px;
    left: 76px;
    height: 64px;
    z-index: 2;
    cursor: default;
}

.pin5 {
    position: absolute;
    top: 22px;
    left: 107px;
    height: 64px;
    z-index: 2;
    cursor: default;
}

.pin6 {
	position: absolute;
	top: 32px;
	left: 135px;
	height: 64px;
	z-index: 2;
	cursor: default;
}

.pin7 {
    position: absolute;
    top: 47px;
    left: 162px;
    height: 64px;
    z-index: 2;
    cursor: default;
}

.cursor-default {
	cursor: default;
}

.profile-image1U {
    width: 33px !important;
    position: absolute;
    top: 77px;
    left: -4px;
    z-index: 3;
}

.profile-image2U {
    width: 33px !important;
    position: absolute;
    top: 94px;
    left: 23px;
    z-index: 3;
}

.profile-image3U {
    width: 33px !important;
    position: absolute;
    top: 105px;
    left: 50px;
    z-index: 3;
}

.profile-image4U {
	width: 33px !important;
	position: absolute;
	top: 110px;
	left: 81px;
	z-index: 3;
}

.profile-image5U {
	width: 33px !important;
	position: absolute;
	top: 105px;
	left: 113px;
	z-index: 3;
}

.profile-image6U {
	width: 33px !important;
	position: absolute;
	top: 95px;
	left: 141px;
	z-index: 3;
}

.profile-image7U {
    width: 33px !important;
    position: absolute;
    top: 77px;
    left: 168px;
    z-index: 3;
}

.profile-image1 {
    width: 33px !important;
    position: absolute;
    top: 49px;
    left: -5px;
    z-index: 3;
}

.profile-image2 {
	width: 33px !important;
	position: absolute;
	top: 38px;
	left: 22px;
	z-index: 3;
}

.profile-image3 {
	width: 33px !important;
	position: absolute;
	top: 27px;
	left: 50px;
	z-index: 3;
}

.profile-image4 {
    width: 33px !important;
    position: absolute;
    top: 25px;
    left: 82px;
    z-index: 3;
}

.profile-image5 {
    width: 33px !important;
    position: absolute;
    top: 28px;
    left: 113px;
    z-index: 3;
}

.profile-image6 {
    width: 33px !important;
    position: absolute;
    top: 38px;
    left: 141px;
    z-index: 3;
}

.profile-image7 {
    width: 33px !important;
    position: absolute;
    top: 53px;
    left: 168px;
    z-index: 3;
}


.icon1U {
    position: absolute;
    top: 95px;
    left: -8px;
    z-index: 1;
    cursor: default;
}

.icon2U {
    position: absolute;
    top: 115px;
    left: 20px;
    z-index: 1;
    cursor: default;
}

.icon3U {
    position: absolute;
    top: 130px;
    left: 47px;
    z-index: 1;
    cursor: default;
}

.icon4U {
    position: absolute;
    top: 135px;
    left: 77px;
    z-index: 1;
    cursor: default;
}

.icon5U {
    position: absolute;
    top: 132px;
    left: 108px;
    z-index: 1;
    cursor: default;
}

.icon6U {
    position: absolute;
    top: 120px;
    left: 136px;
    z-index: 1;
    cursor: default;
}

.icon7U {
    position: absolute;
    top: 98px;
    left: 163px;
    z-index: 1;
    cursor: default;
}

.icon1 {
	position: absolute;
	top: 79px;
	left: -11px;
	z-index: 1;
	cursor: default;
}

.icon2 {
    position: absolute;
    top: 58px;
    left: 17px;
    z-index: 1;
    cursor: default;
}

.icon3 {
    position: absolute;
    top: 50px;
    left: 46px;
    z-index: 1;
    cursor: default;
}

.icon4 {
    position: absolute;
    top: 47px;
    left: 77px;
    z-index: 1;
    cursor: default;
}

.icon5 {
    position: absolute;
    top: 49px;
    left: 109px;
    z-index: 1;
    cursor: default;
}

.icon6 {
    position: absolute;
    top: 59px;
    left: 138px;
    z-index: 1;
    cursor: default;
}

.icon7 {
    position: absolute;
    top: 75px;
    left: 164px;
    z-index: 1;
    cursor: default;
}

.alerticon1U {
    position: absolute;
    top: 170px;
    left: -5px;
    z-index: 1;
    cursor: default;
}

.alerticon2U {
    position: absolute;
    top: 187px;
    left: 21px;
    z-index: 1;
    cursor: default;
}

.alerticon3U {
    position: absolute;
    top: 195px;
    left: 49px;
    z-index: 1;
    cursor: default;
}

.alerticon4U {
    position: absolute;
    top: 200px;
    left: 80px;
    z-index: 1;
    cursor: default;
}

.alerticon5U {
    position: absolute;
    top: 193px;
    left: 114px;
    z-index: 1;
    cursor: default;
}

.alerticon6U {
    position: absolute;
    top: 185px;
    left: 141px;
    z-index: 1;
    cursor: default;
}

.alerticon7U {
    position: absolute;
    top: 170px;
    left: 167px;
    z-index: 1;
    cursor: default;
}

.alerticon1 {
    position: absolute;
    top: 144px;
    left: -5px;
    z-index: 1;
    cursor: default;
}

.alerticon2 {
    position: absolute;
    top: 124px;
    left: 22px;
    z-index: 1;
    cursor: default;
}

.alerticon3 {
    position: absolute;
    top: 113px;
    left: 50px;
    z-index: 1;
    cursor: default;
}

.alerticon4 {
    position: absolute;
    top: 111px;
    left: 81px;
    z-index: 1;
    cursor: default;
}

.alerticon5 {
    position: absolute;
    top: 115px;
    left: 112px;
    z-index: 1;
    cursor: default;
}

.alerticon6 {
    position: absolute;
    top: 124px;
    left: 138px;
    z-index: 1;
    cursor: default;
}

.alerticon7 {
    position: absolute;
    top: 143px;
    left: 166px;
    z-index: 1;
    cursor: default;
}

.simulationicon1U {
    position: absolute;
    top: 170px;
    left: -5px;
    z-index: 1;
    cursor: default;
}

.simulationicon2U {
    position: absolute;
    top: 187px;
    left: 21px;
    z-index: 1;
    cursor: default;
}

.simulationicon3U {
    position: absolute;
    top: 195px;
    left: 49px;
    z-index: 1;
    cursor: default;
}

.simulationicon4U {
    position: absolute;
    top: 200px;
    left: 80px;
    z-index: 1;
    cursor: default;
}

.simulationicon5U {
    position: absolute;
    top: 193px;
    left: 114px;
    z-index: 1;
    cursor: default;
}

.simulationicon6U {
    position: absolute;
    top: 185px;
    left: 141px;
    z-index: 1;
    cursor: default;
}

.simulationicon7U {
    position: absolute;
    top: 170px;
    left: 167px;
    z-index: 1;
    cursor: default;
}

.simulationicon1 {
    position: absolute;
    top: 144px;
    left: -5px;
    z-index: 1;
    cursor: default;
}

.simulationicon2 {
    position: absolute;
    top: 124px;
    left: 22px;
    z-index: 1;
    cursor: default;
}

.simulationicon3 {
    position: absolute;
    top: 113px;
    left: 50px;
    z-index: 1;
    cursor: default;
}

.simulationicon4 {
    position: absolute;
    top: 111px;
    left: 81px;
    z-index: 1;
    cursor: default;
}

.simulationicon5 {
    position: absolute;
    top: 115px;
    left: 112px;
    z-index: 1;
    cursor: default;
}

.simulationicon6 {
    position: absolute;
    top: 124px;
    left: 138px;
    z-index: 1;
    cursor: default;
}

.simulationicon7 {
    position: absolute;
    top: 143px;
    left: 166px;
    z-index: 1;
    cursor: default;
}

.rewardicon1U {
    position: absolute;
    top: 172px;
    left: -1px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon2U {
    position: absolute;
    top: 189px;
    left: 25px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon3U {
    position: absolute;
    top: 197px;
    left: 53px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon4U {
    position: absolute;
    top: 202px;
    left: 86px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon5U {
    position: absolute;
    top: 195px;
    left: 118px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon6U {
    position: absolute;
    top: 187px;
    left: 147px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon7U {
    position: absolute;
    top: 172px;
    left: 173px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon1 {
    position: absolute;
    top: 146px;
    left: -1px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon2 {
    position: absolute;
    top: 128px;
    left: 26px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon3 {
    position: absolute;
    top: 117px;
    left: 54px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon4 {
    position: absolute;
    top: 114px;
    left: 85px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon5 {
    position: absolute;
    top: 118px;
    left: 116px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon6 {
    position: absolute;
    top: 129px;
    left: 144px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.rewardicon7 {
    position: absolute;
    top: 147px;
    left: 169px;
    z-index: 1;
    cursor: default;
    width: 26px;
}

.step-topractice {
	background-color: #3b5998 !important;
}

	.step-topractice i {
		color: #fff !important;
		font-weight: normal !important;
	}
    .step-topractice i.font-black {
        color: #000 !important;
        font-weight: normal !important;
    }

.step-toreview {
	background-color: #4CAF50 !important;
}

	.step-toreview i {
		color: #fff !important;
		font-weight: normal !important;
	}

.step-toknow {
	background-color: #f57c00 !important;
}

	.step-toknow i {
		color: #fff !important;
		font-weight: normal !important;
	}


.icon-rounded {
    background-color: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 100%;
    padding: 5px;
    width: 50px;
    height: 50px;
    text-align: center;
}
.unread-msg {
    background-color: #fff6f2 !important;
}
    .unread-msg:hover {
        background: #fde1d2 !important;
    }
.unread-msg-alert {
    background-color: #fcffe8 !important;
}
    .unread-msg-alert:hover {
        background-color: #fffbf1 !important;
    }

    .unread-msg-alert h6, .unread-msg-alert span, .unread-msg-alert p {
        color: #000;
        font-weight: 600;
    }
.unread-msg-blue {
    background-color: #e8fbff;
}
    .unread-msg-blue:hover {
        background-color: #cbf8ff;
    }

    .unread-msg-blue h6, .unread-msg-blue span, .unread-msg-blue p {
        color: #000;
        font-weight: 600;
    }

.unread-msg-purple {
    background-color: #f3dcff;
}

    .unread-msg-purple:hover {
        background-color: #e9c2fd;
    }

    .unread-msg-purple h6, .unread-msg-purple span, .unread-msg-purple p {
        color: #000;
        font-weight: 600;
    }
.unread-msg-green {
    background-color: #d8fde4;
}

    .unread-msg-green:hover {
        background-color: #93daaa;
    }

    .unread-msg-green h6, .unread-msg-green span, .unread-msg-green p {
        color: #000;
        font-weight: 600;
    }
.unread-msg-orange {
    background-color: #ffedd1;
}

    .unread-msg-orange:hover {
        background-color: #ffe6be;
    }

    .unread-msg-orange h6, .unread-msg-orange span, .unread-msg-orange p {
        color: #000;
        font-weight: 600;
    }
.unread-msg-pink {
    background-color: #ffdee6;
}

    .unread-msg-pink:hover {
        background-color: #ffccd9;
    }

    .unread-msg-pink h6, .unread-msg-pink span, .unread-msg-pink p {
        color: #000;
        font-weight: 600;
    }

.unread-msg-red {
    background-color: #ffcaca;
}

    .unread-msg-red:hover {
        background-color: #ffa9a9;
    }

    .unread-msg-red h6, .unread-msg-red span, .unread-msg-red p {
        color: #000;
        font-weight: 600;
    }