@import url(https://fonts.googleapis.com/css?family=Montserrat);
html {
    font-family: 'Montserrat', sans-serif; 
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color: #dedede;
    color: #919191;
}
body{height: 100vh; width: 100vw; margin: 0;}
.col-1,.bottom{width: 100%}
container{background: #d9d9d9;width: 100%;height: 100%;}
.col-1, .sidebar, container, .graph, .status, .status-left, .status-right, header, header img, header h1, .bottom, .colx1, .colx2, .colx3, div, .status-left img{float: left;}
container{display: block;}
/** SideBar**/
.sidebar{position: fixed;z-index: 2;width: 20%; background: #181e21; display: none; height: 100vh}
.menu{margin: 60px 0 0 10px}
.x{position: absolute; top:34px; right:2px; padding: 10px 15px 10px 15px}
.x:hover{background: rgb(41, 51, 56)}
/*** Header ***/
header,.status-left, .colx1, .colx2, .colx3 {height: 50px;width: 100%;background: #f7f7f7;}
header{position: fixed;z-index: 3}
header img{margin: 5px; height: 40px; transition: .5s ease-in-out;}
header img:hover{transform:rotate(90deg);cursor: pointer;}
header h1{margin: .3%; color: #e74d3c;}
h1>span{color: #51acb8}
.status{width: 20%; height: 60%; margin-top: 80px;}
.today{height: 5%;width: 100%; background: none; margin: 0 0 0% 2%; text-align: center}
.display{height: 28%;width: 100%; background: none; margin: 5% 0 0% 1%;}
.graph{width: 80%; height: 60%; margin-top: 80px;}
.graph .buttons{ position: absolute; margin-left: 20px;margin-top: 20px !important;}
.graph label{margin-left: 15px;}
.graph a{margin-left: 10px;padding: 3px 10px 3px 10px;}
.graph a.active{background: #ccc; border-radius: 5px;}
.graph a:hover{color: #626262; cursor: pointer;}
.status-left{height: 100%; width: 37%;margin: 0% 0 1% 2% ; border-radius: 10px 0 0 10px;border-color: none;  color:#f7f7f7}
.status-left img{height: 60%; margin-top: 5%; margin-left: 10%; margin-right: auto}
.status-left h1{margin-top: 20%; margin-left: 16%;}
.status-right{height: 100%; width: 59%;margin: 0% 1% 1% 0 ; background: #f7f7f7; border-radius: 0 10px 10px 0; }
.status-right h1{margin: 20%; font-size: 50px;}
.day{background: #51acb8; border-radius: 10px; z-index: 1; position: relative}
.day h4, .date h4{margin: 5px 0 0 10px;}
.date{color:#51acb8; margin-left: -2%;width: 61%}
.max{background: #E74C3C;}.min{background: #51acb8; } .aver{background: #2cb15f;}
.max-val{color:#E74C3C} .min-val{color: #51acb8} .aver-val{color:#2cb15f}
#graph{width: 98%; height: 98%; background: #f7f7f7; border-radius: 10px; margin-left: 1%}
/** bottom **/
.bottom{height: 28%;}
.colx1, .colx2, .colx3{height: 100%; margin: 1% 0 0 .7%; border-radius: 10px}
.colx1{width: 21%;}
.colx2{width: 30%;}
.colx3{width: 45%;}
.header{width: 100%; height: 35px; border-bottom: solid 1px #d9d9d9; }
.header>div{width: 50%; height: 100%}
.header p{margin: 10px;}
.col-2{width: 50%;}
.col-2{height: 20px}
label {float: left }
/** switch **/
.switch-bg{width: 60px; background: #d6d6d6; height: 10px; float: left; margin: 5px 5px 0 5px;border-radius: 30px; border: 2pt solid #b7b7b7}
.switch{margin: -9px 0 -5px 2px; background: #51acb8;position: absolute; height: 25px;width: 25px; border-radius: 50px; border: 2pt solid;transition: .1s ease-in-out;}
.switch:hover{background: #52c5d4; cursor: pointer;}
.switch-on{margin: -9px 0 -5px 28px;background: #E74C3C}
.switch-on:hover{background: #f72b16}
/** end switch **/
.details-data .col-1{margin-left: 10px; margin-top: 15px}
.colx1 .col-1 .col-1{margin-left: 10px}
.user{float: right; height: 100%;}
.user p, .user img{font-size: 20px; float: right; margin-right:15px;}
.user p {margin-top:15px;}
.user img{border-radius: 50px}
/*
.progress{margin-top: 15px; width: 90%; height: 25px; border: solid 1pt #ccc}
.progress .value{height: 100%;}
.progress .mid{width: 50%; background: #2cb15f}
.progress .max{width: 80%; background: #E74C3C}
.progress .min{width: 30%; background: #51acb8}*/
.div-activity{height: 80%; overflow-y: auto}
#activity{margin: 2% 0 0 2%; width: 96%;}
#activity p{margin-bottom: 4px; margin-top: 0px; border-bottom: solid 1px #d9d9d9}
table{width: 100%; text-align: center;}
tr, td,th{border-bottom: 1pt solid rgba(145, 145, 145, 0.5);}
input[type='button']{margin-top:10px;text-align: center;height: 30px; background: #cccccc; border: solid 1px #919191; color:#585858}
input[type='button']:hover{background: #afafaf}

@media (max-width: 1280px) and (orientation:landscape){
    .status, .graph{margin-top: 60px;}
    .today h4{font-size: 12px;}
    .day{border-radius: 7px;}
    .date{border-radius: 0px 7px 7px 0px}
    .display{height: 29%}
    #graph{height: 100%}
  }
@media (max-width: 1024px) and (orientation:landscape){
    .status-left img {margin-left: 5%}
    .status-left h1{font-size: 25px; margin-top: 35px}
    .display{height: 29.5%}
  }
@media (max-width: 960px) and (orientation:landscape){
    .today h4{margin-left: 2%; margin-top: 2px;}
    .div-activity{height: 75%;}
    .details-data, .activity-data}
    .display{height: 29%}
  }
@media (max-width: 736px) and (orientation:landscape){
    header{height: 40px}
    header img{height: 35px; margin-top: 2.5px}
    header h1{font-size: 33px; margin: 0px}
    .status, .graph{margin-top: 45px; height: 58%}
    .status-left img {margin-left: 10%}
    .status-left h1{font-size: 25px; margin-top: 35px}
    .display{height: 27%}
    .today {height: 8%}
    .today h4{font-size:10px; margin-left: 2%; margin-top: 5px;}
    .status-left h1{ font-size: 18px}
    .status-right h1{font-size: 25px}
    .div-activity{height: 60%;}
    .details-data, .activity-data{font-size: 10px}.
    #activity span{margin-left: 35px;}
}
@media (max-width: 690px) and (orientation:landscape){
    .today h4{margin-left: 2%; margin-top: 3px;}
    .display{height: 27.5%}
    .div-activity{height: 70%;}
    .bottom{margin-top: 1px}
    .colx3, .colx2, .colx1{margin-top: .7%;}
    #activity span{margin-left: 30px;}
  }
@media (max-width: 667px) and (orientation:landscape){
    .status, .graph{ height: 57%}
    .div-activity{height: 55%;}
  }
@media (max-width: 598px) and (orientation:landscape){
    header{height: 35px}
    header img{height: 30px; }
    header h1{font-size: 25px; margin-top: 2.5px}
    .today h4{font-size: 8px;}
    .status-left h1{ font-size: 15px}
    .status-left img {margin-left: 15%}
    .status-right h1{font-size: 22px}
    .status, .graph{margin-top: 40px;}
  }
@media (max-width: 480px) and (orientation:landscape){
    .today h4{font-size: 7px;}
    .status-left h1{ font-size: 13px}
  }
@media (orientation: portrait) {
    header{height: 45px; box-shadow: 5px 1px 10px rgba(24, 30, 33, 0.61)}
    header img{height: 40px; }
    header h1{font-size: 37px; margin-top: 2.5px}
    .status{width: 100%; height: 40%; margin-top: 55px;}
    .graph {width: 99%; height: 30%; margin-top: 15px;}
    .today{height: 50%; width: 48%;margin-bottom: 10px;}
    .display{height: 50%;width: 50%;margin: 0;margin-bottom: 10px;}
    .today .status-left, .today .status-right {height: 30%}
    .today h4{font-size: 12px; margin-top: 8px; margin-left: 8%}
    .status-right {}
    .bottom{height: 20%;}
    .status-left h1{font-size: 25px}
    .status-left img {margin-left: 5%}
    .colx3, .colx2, .colx1{width: 98%;}
    .div-activity{height: 75%}
    .sidebar{width: 100%;}
    .bottom{height: 35%}
  }
@media (max-width: 490px) and (orientation:portrait){
    .status-left h1{ font-size: 23px}
    .status-right h1{font-size: 43px}
}
@media (max-width: 320px) and (orientation:portrait){
}