body {
    background: #F3F3F3;
    font-family:'Roboto'!important;
}
.nomarg {
    margin:0;
}
.shadowc {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom:30px;
    background: #FFF;
    padding-top: 12px;
    padding-bottom: 16px;
}
.imgg {
    width:58px;
}
.align {
    display:flex;
    align-items: center;
}
.fullwidth {
    width:100%;
}
.fullwidth2 {
    width:100%;
    padding-right: 20px;
}
.fullwidth3 {
    width:130%;
}
.padback .fullwidth .col-4.padding-right {
    padding-left: 5px;
}
.name {
    color: #707070;
    font-weight: normal;
    font-size: 15px;
    margin-bottom:0px;
}
.grey {
    color: rgb(102, 102, 102);
}
.grey2 {
    color: rgb(51, 51, 51);
    width: 100%;
}
.padding-both {
    padding-left: 0px;
    padding-right: 7px;
}
.full-width {
        width: 130%;
}
form select {
    width: 100%;
    height: 38px;
    border: 1.5px solid #DFDFDF;
}
select::-ms-expand {    display: none; }
select{
    -webkit-appearance: none;
    appearance: none;
    background: url('../uploads/07/arrow.png') no-repeat 95% 50%;
    background-size: 25px;
    color: #000000;
    font-weight: normal;
    font-size: 15px;
    padding-left: 10px;
}
select option{
 padding-left:20px;
}
.date {
    color: #000;
    font-weight: 600;
    font-size: 20px;
    margin: 0;
}
.padding-right {
    padding-right: 0px;
}
.member {
    margin-bottom: 0;
}
.page-header {
    color:#000;
    margin:0;
    font-weight: 600;
}
.color-blue {
    width: 10px;
    height: 8px;
    background:#BBD2E3 ;
    display: inline-block;
    margin-right:5px;
}
.color-green {
    width: 10px;
    height: 8px;
    background:#2BA562 ;
    display: inline-block;
    margin-right:5px;
}
.color-orange {
    width: 10px;
    height: 8px;
    background:#FFA500 ;
    display: inline-block;
    margin-right:5px;
}
.color-red {
    width: 10px;
    height: 8px;
    background:#c61e21 ;
    display: inline-block;
    margin-right:5px;
}
.first-value , .second-value{
    font-size: 12px;
    display: inline-block;
    color: #000000;
}
.block {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 255px;
    width: 100%;
    max-height: 140px;
    height: 100%;
    border-radius: 8px;
    border: 1px solid #DADCE0;
    background: #FFF;
}
.middletext {
    margin:0;
    color: #000000;
    font-size: 29px;
    display: inline-block;
    font-weight: 600;
}
.padding-left {
    padding-left:25px;
}
.middletext2 {
    margin:0;
    color: #000000;
    font-size: 36px;
    display: inline-block;
    font-weight: 600;
}
.center {
    text-align: center;
}
.check {
    display: inline-block;
    margin-bottom: 12px;
    width: 22px;
    margin-left: 5px;
}
.error {
    display: inline-block;
    margin-bottom: 12px;
    width: 6px;
    margin-left: 5px;
}
.goal {
    position: absolute;
    bottom:10px;
    left:15px;
}
.goal .good {
    color:green;
}
.goal .bad {
    color:red;
}
.bottomtext {
    font-weight: 600;
    color: #000000;
    font-size: 12px;
    margin:0;
}
.bottomtext2 {
    font-weight: 500;
    color: #000000;
    font-size: 15px;
    margin:0;
}
.toptext {
    position: absolute;
    color: #000000;
    font-size: 15px;
    left:15px;
    font-weight: 600;
}
.ratings {
    position: absolute;
    top: 38px;
    left: 15px;
}
.nopad {
    padding:0;
}
.pad-right{
    padding-right:10px;
    padding-bottom:20px;
}
.padding-leftt {
    padding-left: 5px;
}
.pad-left{
    padding-left:10px;
    padding-bottom:20px;
}
.chart-timeline_heartrate .c3-legend-item,
.chart-scatter_exercise .c3-legend-item { display: none; }
.display-sm {
    display: none;
}
.line-chart {
    animation: fadeIn 600ms cubic-bezier(.57,.25,.65,1) 1 forwards;
    opacity: 0;
    max-width: 270px;
    width: 100%;
    max-height: 140px;
    height: 100%;
    border-radius: 8px;
    border: 1px solid #DADCE0;
    background: #FFF;
    overflow: hidden;
    position: relative;
}
.line-chart .contents {
	padding: 20px 0px 10px 0px;
    height: 100%;
    position: absolute;
    width: 100%;

}
.line-chart2{
    animation: fadeIn 600ms cubic-bezier(.57,.25,.65,1) 1 forwards;
    opacity: 0;
    max-width:280px;
    width: 100%;
    max-height: 215px;
    height: 215px;
    border-radius: 8px;
    border: 1px solid #DADCE0;
    background: #FFF;
    padding: 13px 5px 16px 10px;
    overflow: hidden;
    position: relative;
}
#chart , #chart2 , #chart3 , #chart4 , #chart5 {
    height:126px!important;
    width: 278px!important;
}
#chart6 , #chart7 , #chart8 , #chart9 , #chart10 {
    width: 290px!important;
    overflow: visible;
}
.aspect-ratio {
    margin-left: -10px;
    height: 0;
    padding-bottom: 50%;
}
.aspect-ratio2 {
    margin-left: -6px;
    height: 100%;
    padding-bottom: 0%;
}
.margin-bottom2 {
    margin-bottom:10px;
    display: flex;
    justify-content: flex-end;
}
.traffic_light_container ul {
	list-style: none;
	padding-left: 0px;
}
.traffic_light_container .pull-right {
	float:right;
}
.traffic_light_container  ul li {
	border-bottom: 1px solid #eee;
	font-size: 12px;
	padding: 2.5px 0px;

}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
@media (max-width:1200px) {
    .name {
        font-size: 12px;
    }
    .date {
        font-size: 17px;
    }
    .border-left {
        padding-left:15px;
    }
    /*.padback .fullwidth .col-4.padding-right {*/
        /*padding-left:0;*/
    /*}*/
    #chart6 , #chart7 , #chart8 , #chart9 , #chart10 {
        width: 225px!important;

    }
    .line-chart2 {
        animation: fadeIn 600ms cubic-bezier(.57, .25, .65, 1) 1 forwards;
        opacity: 0;
        max-width: 225px;
        width: 100%;
        max-height: 100%;
        height: 100%;
    }
}
@media (max-width:1024px) {
   
    .fullwidth2 {
        padding-right: 0px;
    }
    .margin-bottom2 {
        margin-bottom:15px;
    }
    .padback .fullwidth .col-4.padding-right {
        padding-left:6px;
    }
}
@media (max-width:991px) { 
    .padback .fullwidth .col-4.padding-right {
        padding-left:15px;
    }
    .date {
        font-size: 20px;
    }
        .name {
        font-size: 15px;
    }
    .margin-bottom {
        margin-bottom:10px;
    }
    .padback {
        padding-right: 15px;
        padding-left: 15px;
    }
    .margin-bottom {
        justify-content: center;
    }
    .shadowc {
        padding-bottom:0;
    }
    .full-width {
        width:88%;
    }
    .block {
        max-width: 100%;
    }
    .line-chart , .line-chart2{
        max-width: 100%;
    }
    .line-chart2{
        max-height: 255px;
        height: 255px;
    }
    #chart , #chart2 , #chart3 , #chart4 , #chart5 {
        height:125px!important;
        width: 100%!important;
    }
    #chart6 , #chart7 , #chart8 , #chart9 , #chart10 {
        width: 370px!important;

    }
    .pad-right2{
        padding-right: 25px;
    }
    .pad-left2{
        padding-left: 25px;
    }
    .padding-right {
        padding-right:0;
        padding-left: 12px;
    }
}
@media (max-width:767px) {
    .shadowc .margin-bottom {
        padding-right:15px;
    }
    #chart6, #chart7, #chart8, #chart9, #chart10 {
        width: 275px!important;
    }
        .margin-bottom {
            display: flex;
            justify-content: flex-start;
            padding-right:0;
        }
        .full-width {
        width:106%
        }
        .fullwidth {
            width: 110%;
        }
        .padding-right {
            padding-right:0;
            padding-left: 15px;
        }
    .padding-both {
        padding-left: 15px;
    }
    .display-sm {
        display:block;
        margin-bottom: 10px;
    }
    .display-md {
        display:none;
    }
}
@media (max-width:576px) {
    .pad-left2 {
        padding-left: 15px;
    }
    .margin-bottom {
        margin-bottom:10px;
    }
    .margin {
        margin:0;
    }
    #chart, #chart2, #chart3, #chart4, #chart5 {
             height: 100% !important;
             width: 100% !important;
         }
    .aspect-ratio {
        height: 108%;
        padding-bottom:0
    }
    .line-chart {
        padding: 20px 0px 0px 0px;
    }
	.line-chart .contents {
		padding: 10px 0px 10px 0px;
	}
	.ratings {
		top: 25px;
	}
	.goal {
		bottom: 25px;
	}
    .line-chart2 {
        max-height: 100%;
        height: 100%;
    }
    #chart6, #chart7, #chart8, #chart9, #chart10 {
        width: 104%!important;
    }
}
@media (max-width:500px) {
    #chart, #chart2, #chart3, #chart4, #chart5 {
        height: 101% !important;
    }
}
@media (max-width:480px) {
    .name {
        font-size: 12px;
    }
    .date {
        font-size: 16px;
    }
 .full-width ,  .fullwidth{
          width:130%
      }
    .padding-both {
        padding-right:0;
    }
}
@media (max-width:425px) {
    #chart, #chart2, #chart3, #chart4, #chart5 {
        height: 102% !important;
    }
}

@media (max-width:380px) {
    #chart, #chart2, #chart3, #chart4, #chart5 {
        height: 104% !important;
    }
    .line-chart {
        padding: 10px 0px 0px 0px;
    }
    .middletext {
        font-size: 20px;
    }
    .ratings {
        top: 27px;
    }
    .bottomtext {
        font-size: 11px;
    }
    .pad-right {
        padding-right: 0px;
    }
    .check {
        margin-bottom: 7px;
        width: 18px;
    }
    .error {
        margin-bottom: 6px;
        width: 4px;
    }
}
@media (max-width:330px) {
    .bottomtext {
        font-size: 10px;
    }
}
@media (max-width:320px) {
    #chart, #chart2, #chart3, #chart4, #chart5 {
        height: 106% !important;
    }

}