section.activity_calendar div.timeline {
	height:475px;
}

div.timeline {
	overflow-y: scroll;
	padding:5px 10px 0px 10px;
}

.totalcalendar {
	float:right;font-size:20px;padding-top:5px
}

.activity_calendar {
	display:block
}

#style-2::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
    width: 8px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #999;
}

.cbp_tmtimeline {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.cbp_tmtimeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #eee;
    left: 23%;
    margin-left: -6px
}

.cbp_tmtimeline span {
    font-size:18px!important;
	line-height:18px!important;
	color:#000!important;
	white-space:nowrap;
}

.cbp_tmtimeline>li {
    position: relative
}


.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
    background: #f0f1f3
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: #f0f1f3
}

.cbp_tmtimeline>li .empty span {
    color: #777
}

.cbp_tmtimeline>li .cbp_tmtime {
    display: block;
    width: 18%;
    padding:0px;
    position: absolute;
}

.cbp_tmtimeline>li .cbp_tmtime span {
    display: block;
    text-align: left;
	font-family:thaisansbold;
	font-size:18px;
	line-height:18px
}

.cbp_tmtimeline>li .cbp_tmlabel {
    margin: 0 0 15px 32%;
    background: #f0f1f3;
    padding: 0.5em 0.8em;
    position: relative;
    border-radius: 5px
}

.cbp_tmtimeline>li .cbp_tmlabel:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #f0f1f3;
    border-width: 10px;
    top: 10px
}

.cbp_tmtimeline>li .cbp_tmlabel blockquote {
    font-size: 16px
}

.cbp_tmtimeline>li .cbp_tmlabel .map-checkin {
    border: 5px solid rgba(235, 235, 235, 0.2);
    -moz-box-shadow: 0px 0px 0px 1px #ebebeb;
    -webkit-box-shadow: 0px 0px 0px 1px #ebebeb;
    box-shadow: 0px 0px 0px 1px #ebebeb;
    background: #fff !important
}

.cbp_tmtimeline>li .cbp_tmlabel h2 {
    margin: 0px;
    padding: 0 0 5px 0;
    line-height: 16px;
    font-size: 16px;
    font-weight: normal
}

.cbp_tmtimeline>li .cbp_tmlabel h2 a {
    font-size: 18px
}

.cbp_tmtimeline>li .cbp_tmlabel h2 a:hover {
    text-decoration: none
}

.cbp_tmtimeline>li .cbp_tmlabel h2 span {
    font-size: 15px
}

.cbp_tmtimeline>li div.cbp_tmlabel {
	vertical-align:top!important;
}

.cbp_tmtimeline>li .cbp_tmlabel p {
    color: #444;
	font-family:thaisansbold;
	font-size:22px;
	line-height:24px;
	margin-top:0px;
	paddding-top:0px;
}

.cbp_tmtimeline>li .cbp_tmicon {
    width: 30px;
    height: 30px;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 1.3em;
    line-height: 25px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    color: #fff;
	font-family:thaisansbold;
    background: #46a4da;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #f5f5f6;
    text-align: center;
    left: 25%;
	top:8px!important;
    margin: 0 0 0 -25px
}

@media only screen and (max-width: 1920px)  and (min-width: 1920px){ /* macbook */

	section.activity_calendar div.timeline {
		height:400px;
	}
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
		font-size:20px!important
	}
	
}

@media screen and (min-width: 375px) and (max-width: 375px) {

	.totalcalendar {
		float:right;font-size:14px;padding-top:0px;
		line-height:20px!important
	}
	
	.totalcalendar i {
		font-size:16px
	}

	section.activity_calendar div.timeline {
		height:400px;
	}
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 14px;
		font-size: 14px;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 14px
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 15px 33%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 27%!important;
		line-height: 22px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 24%;
		margin-left: -5px!important;
	}
	
}



@media screen and (min-width: 667px) and (max-width: 667px) {

	.totalcalendar {
		float:right;font-size:18px;padding-top:5px;
		line-height:20px!important
	}
	
	.totalcalendar i {
		font-size:16px
	}

	section.activity_calendar div.timeline {
		height:420px;
	}
	
	.cbp_tmtimeline span {
		font-size:20px!important;
		line-height:10px;
		padding-top:4px
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 18px!important;
		font-size: 18px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 18px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 25px 0%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 0%!important;
		line-height: 20px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 20%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:20px!important;
		line-height:20px!important;
	}
		
}

/* --------------------------------------------- ipad Landscape --------------------------------------*/
@media screen and (min-width: 1024px) and (max-width: 1024px) {

	.activity_calendar {
		margin-top:0px!important;
	}

	.totalcalendar {
		float:right;font-size:22px;padding-top:5px
	}

	section.activity_calendar div.timeline {
		height:370px;
	}
	
	.cbp_tmtimeline span {
		font-size:14px!important
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 18px!important;
		font-size: 18px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 18px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 15px 35%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 22px!important;
		height: 22px!important;
		font-size: 16px!important;
		left: 29%!important;
		line-height: 20px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 24%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:18px!important;
		line-height:20px!important;
	}
	
}

/* --------------------------------------------- ipad Portrait --------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 768px){

	.activity_calendar {
		margin-top:0px!important;
	}

	.totalcalendar {
		float:right;font-size:16px;padding-top:5px
	}

	section.activity_calendar div.timeline {
		height:370px;
	}
	
	.cbp_tmtimeline span {
		font-size:20px!important
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 18px!important;
		font-size: 18px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 18px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 15px 35%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 25%!important;
		line-height: 22px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 24%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:18px!important;
		line-height:20px!important;
	}
	

}


@media screen and (max-width: 992px) and (min-width: 768px) {
    .cbp_tmtimeline>li .cbp_tmtime {
        padding-right: 60px
    }
}

@media screen and (max-width: 360px) and (min-width: 360px) {

	.activity_calendar {
		margin-top:0px!important;
	}

	.totalcalendar {
		float:right;font-size:20px;padding-top:5px
	}

	section.activity_calendar div.timeline {
		height:370px;
	}
	
	.cbp_tmtimeline span {
		font-size:20px!important;
		line-height:10px;
		padding-top:4px
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 18px!important;
		font-size: 18px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 18px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 25px 0%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 0%!important;
		line-height: 20px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 20%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:18px!important;
		line-height:20px!important;
	}
	
}

@media screen and (max-width: 375px) and (min-width: 375px) {

	.activity_calendar {
		margin-top:0px!important;
	}

	.totalcalendar {
		float:right;font-size:24px!important;padding-top:5px
	}

	section.activity_calendar div.timeline {
		height:370px;
	}
	
	.cbp_tmtimeline span {
		font-size:20px!important;
		line-height:10px;
		padding-top:4px
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 20px!important;
		font-size: 20px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 20px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 25px 0%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 0%!important;
		line-height: 20px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 20%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:20px!important;
		line-height:20px!important;
	}
}

@media screen and (max-width: 640px) and (min-width: 640px) {

	.totalcalendar {
		float:right;font-size:18px;padding-top:5px;
		line-height:20px!important
	}
	
	.totalcalendar i {
		font-size:16px
	}

	section.activity_calendar div.timeline {
		height:420px;
	}
	
	.cbp_tmtimeline span {
		font-size:20px!important;
		line-height:10px;
		padding-top:4px
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 18px!important;
		font-size: 18px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 18px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 25px 0%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 0%!important;
		line-height: 20px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 20%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:20px!important;
		line-height:20px!important;
	}
		
		
}

@media screen and (max-width: 568px) and (min-width: 568px) {

	.totalcalendar {
		float:right;font-size:18px;padding-top:5px;
		line-height:20px!important
	}
	
	.totalcalendar i {
		font-size:16px
	}

	section.activity_calendar div.timeline {
		height:370px;
	}
	
	.cbp_tmtimeline span {
		font-size:20px!important;
		line-height:10px;
		padding-top:4px
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 20px!important;
		font-size: 20px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 20px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 25px 0%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 0%!important;
		line-height: 20px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 20%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:20px!important;
		line-height:20px!important;
	}
		
}


@media screen and (max-width: 736px) and (min-width: 736px) {

	.activity_calendar {
		margin-top:0px!important;
	}

	.totalcalendar {
		float:right;font-size:24px!important;padding-top:5px
	}

	section.activity_calendar div.timeline {
		height:400px;
	}
	
	.cbp_tmtimeline span {
		font-size:20px!important;
		line-height:10px;
		padding-top:4px
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 20px!important;
		font-size: 20px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 20px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 25px 0%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 0%!important;
		line-height: 20px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 20%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:20px!important;
		line-height:20px!important;
	}
		
}

@media screen and (max-width: 812px) and (min-width: 812px) {

	.activity_calendar {
		margin-top:0px!important;
	}

	.totalcalendar {
		float:right;font-size:24px!important;padding-top:5px
	}

	section.activity_calendar div.timeline {
		height:370px;
	}
	
	.cbp_tmtimeline span {
		font-size:18px!important
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 18px!important;
		font-size: 18px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 18px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 15px 37%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 27%!important;
		line-height: 22px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 24%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:18px!important;
		line-height:20px!important;
	}
		
}


@media screen and (max-width: 414px) and (min-width: 414px) {
	.activity_calendar {
		margin-top:0px!important;
	}

	.totalcalendar {
		float:right;font-size:24px!important;padding-top:5px
	}

	section.activity_calendar div.timeline {
		height:370px;
	}
	
	.cbp_tmtimeline span {
		font-size:20px!important;
		line-height:10px;
		padding-top:4px
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 20px!important;
		font-size: 20px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 20px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 25px 0%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 0%!important;
		line-height: 20px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 20%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:20px!important;
		line-height:20px!important;
	}

}

@media screen and (min-width: 320px) and (max-width: 320px) {

	.totalcalendar {
		float:right;font-size:18px;padding-top:5px;
		line-height:20px!important
	}
	
	.totalcalendar i {
		font-size:16px
	}

	section.activity_calendar div.timeline {
		height:370px;
	}
	
	.cbp_tmtimeline span {
		font-size:20px!important;
		line-height:10px;
		padding-top:4px
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		left: 24%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 20px!important;
		font-size: 20px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 a {
		font-size: 20px!important;
	}
	
	
	.cbp_tmtimeline>li .cbp_tmlabel {
    	margin: 0 0 25px 0%!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		width: 25px!important;
		height: 25px!important;
		font-size: 18px!important;
		left: 0%!important;
		line-height: 20px!important;
	}
	
	.cbp_tmtimeline:before {
		left: 20%;
		margin-left: -5px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel p {
		font-size:20px!important;
		line-height:20px!important;
	}
	
}



@media screen and (max-width: 65.375em) {
    .cbp_tmtimeline>li .cbp_tmtime span:last-child {
        font-size: 12px
    }
}

@media screen and (max-width: 47.2em) {
    .cbp_tmtimeline:before {
        display: none
    }
    .cbp_tmtimeline>li .cbp_tmtime {
        width: 100%;
        position: relative;
        padding: 0 0 20px 0
    }
    .cbp_tmtimeline>li .cbp_tmtime span {
        text-align: left
    }
    .cbp_tmtimeline>li .cbp_tmlabel {
        margin: 0 0 30px 0;
        padding: 1em;
        font-weight: 400;
        font-size: 95%
    }
    .cbp_tmtimeline>li .cbp_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #f5f5f6;
        top: -20px
    }
    .cbp_tmtimeline>li .cbp_tmicon {
        position: relative;
        float: right;
        left: auto;
        margin: -64px 5px 0 0px
    }
    .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
        border-right-color: transparent;
        border-bottom-color: #f5f5f6
    }
}

.bg-Sun {
	background-color: #FF0000 !important;
	color: #fff;
}

.bg-Mon {
	background-color: #ffc323 !important;
	color: #fff;
}

.bg-Tue {
    background-color: #ff758e !important;
    color: #fff;
}

.bg-Wed {
    background-color: #50d38a !important;
    color: #fff;
}


.bg-Thu {
	background-color: #FD6B5B !important;
	color: #fff;
}

.bg-Fri {
    background-color: #2CA8FF !important;
}

.bg-Sat {
	background-color: #D294E2 !important;
}