html, body {
     margin:0;
     padding:0;
     font-display: auto;
     font-family: 'Roboto';
     width:100%;
     height: 100%;
     overflow: hidden;
}
 textarea {
     width:auto;
}
 .top {
     width: 100%;
     display: block;
     position: fixed;
     padding:0;
     background: #fff;
     top: 0;
     z-index: 10;
     border-bottom: 1px solid #3e1e1e1;
}
 #brand {
     width:10%;
     margin:.5em .5em .5em 1em;
     float: left;
}
 #pick {
     width:65%;
     float:right;
     margin: 0 1em 0 0;
}
 #pick h2 {
     display: block;
     width: auto;
     float: left;
     font-size: 1.2em;
     padding: 8px 0 0 0;
}
 #period {
     text-transform: uppercase;
     width: 40%;
     display: block;
     float: right;
     margin: 1.5rem 0 0 0;
}
 #period span {
     width: auto;
     float: left;
     margin:0 1em 0 0;
     padding: 2px 0 0 0;
}
 #period label {
     width: 3%;
     padding: 2px 0 0 0;
     text-transform: capitalize;
}
 textarea.date {
     height: 2em;
     width: 45%;
     text-align: center;
}
 .dbody {
     width:100%;
     float:left;
     background:#fff;
     height: 100%;
}
 .menu {
     width: 30%;
     height: 100%;
     float: left;
     padding: 0;
     background: url(../images/shade.png) top repeat-x #e8f6f3;
     margin-top: 75px;
}
 .dashboard {
     width: 70%;
     height: 100%;
     display: block;
     background: url(../images/shade.png) top repeat-x #fff;
     top: 75px;
     position: absolute;
     right: 0;
}
 .piecont {
     width: 90%;
     display: block;
     margin: 0 auto;
     padding: 2em 0 0 0;
}
 .p-cols {
     margin: 0px;
     display: inline-grid;
     padding: 8px;
     vertical-align: middle;
}
 .p-cols img {
     width: 100%;
     height: auto;
}
 .p-cols a {
     width:80%;
     margin: 4px auto;
     text-align: center;
     display: block;
     padding:1em;
     color:#2874a6;
     text-decoration: none;
     border-radius: 8px;
     border: 2px solid #fff;
     transition: 0.3s;
     transition: all .2s ease-in-out;
}
 .p-cols a:hover {
     transform: scale(1.05);
}
 .p-cols a:nth-child(1) {
     background: url(../images/download.png) center left no-repeat;
     background-position-x: left;
     background-size: auto;
     background-size: 7%;
     background-position-x: 5%;
}
 .p-cols a:nth-child(2) {
     background: url(../images/share.png) center left no-repeat;
     background-position-x: left;
     background-size: auto;
     background-size: 7%;
     background-position-x: 5%;
}
 .p-cols:nth-child(1) {
     width: 55%;
}
 .p-cols:nth-child(2) {
     width: 23vw;
     padding: 1em 0;
     background: #e8f6f3;
     margin-left: 4%;
}
 .bcont {
     width:100%;
     float: left;
     margin: .25em auto;
     text-align: center;
}
 .bcont a {
     width: 90%;
     margin: 0 auto;
     padding: .8em;
     background: #2874a6 ;
     color: #fff;
     border-radius: 8px;
     text-decoration: none;
     text-transform: uppercase;
     display: block;
     opacity: 0.6;
     transition: 0.3s;
}
 .bcont a:hover {
     opacity: 1;
}
 #chartContainer {
     width:90%;
     height: 400px;
     margin:3rem auto 0 auto;
}
 .canvasjs-chart-credit {
     display: none;
}
/*Tabset start*/
/* CSS for the main interaction */
 .tabset {
     width: 85%;
     margin: 1.5vh auto 0 auto;
}
 .tabset > input[type="radio"] {
     position: absolute;
     left: -200vw;
}
 .tabset .tab-panel {
     display: none;
}
 .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child, .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2), .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3), .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4), .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5), .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
     display: block;
     padding:0;
     background: #fff;
     margin-bottom: .5em;
}
 .tabset > label {
     position: relative;
     display: inline-block;
     padding: 15px 15px 25px;
     border: 1px solid transparent;
     border-bottom: 0;
     cursor: pointer;
     font-weight: 600;
}
 .tabset > label::after {
     content: "";
     position: absolute;
     left: 15px;
     bottom: 10px;
     width: 22px;
     height: 4px;
     background: #8d8d8d;
}
 .tabset > label:hover, .tabset > input:focus + label {
     color: #2874a6;
}
 .tabset > label:hover::after, .tabset > input:focus + label::after, .tabset > input:checked + label::after {
     background: #06c;
}
 .tabset > input:checked + label {
     border-color: #e1e1e1;
     border-bottom: 1px solid #fff;
     margin-bottom: -1px;
     background: #fff;
}
 .tab-panel {
     padding: 1em 0;
     border-top: 1px solid #e1e1e1;
}
 .tab-panel ul {
     width: 8vw;
     display: inline-block;
     margin: 1.5em 0 0 0;
     list-style-type: none;
     text-transform: uppercase;
     font-size: 1.12vw;
}
 .tab-panel ul:nth-child(1) {
     color:#666;
}
 .tab-panel ul:nth-child(2) {
     font-weight: 600;
}
 .tab-panel li {
     width: 100%;
     float: left;
     margin-bottom:.4rem;
}
 #devs {
     width: 90%;
     margin: 0 auto;
     text-transform: uppercase;
     text-align: center;
}
 #devs h3 {
     background: url(../images/separator.png) bottom center no-repeat;
     padding: 0 0 1em 0;
}
 #profile {
     width: 100%;
     display: block;
}
 #profile img {
     width:100%;
     height: auto;
     border-radius: 50%;
     transition: all .2s ease-in-out;
}
 #profile img:hover {
     transform: scale(1.1);
}
 #profile ul {
     list-style-type: none;
     list-style-position: inside;
     width: 100%;
     margin:0 0 1em 0;
     padding: 0;
}
 #profile li {
     width:calc(100% / 4 - 8px);
     display: inline-block;
     margin:4px;
}
 #profile li:hover {
     cursor: pointer;
}
/*Tabset end*/
/*Modalbox*/
 .modalDialog {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: rgba(0,0,0,0.8);
     z-index: 99999;
     opacity:0;
     -webkit-transition: opacity 200ms ease-in;
     -moz-transition: opacity 200ms ease-in;
     transition: opacity 200ms ease-in;
     pointer-events: none;
     text-transform: uppercase;
}
 .modalDialog img {
     width: 80%;
     height: auto;
     border-radius: 50%;
     margin: 0 auto;
}
 .modalDialog h3 {
     width: 100%;
     text-align: center;
     margin: 1em auto 0 auto;
     border-bottom: 1px solid #ccc;
     padding: 0 0 .5em 0;
}
 .modalDialog:target {
     opacity:1;
     pointer-events: auto;
}
 .modalDialog > div {
     width: 50%;
     position: relative;
     margin: 10% auto;
     padding: 5px 20px 13px 20px;
     border-radius: 4px;
     background: #fff;
    /*background: -moz-linear-gradient(#fff, #999);
     background: -webkit-linear-gradient(#fff, #999);
     background: -o-linear-gradient(#fff, #999);
     */
}
 .close {
     background: #606061;
     color: #FFFFFF;
     line-height: 25px;
     position: absolute;
     right: -12px;
     text-align: center;
     top: -10px;
     width: 24px;
     text-decoration: none;
     font-weight: bold;
     -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
     border-radius: 12px;
     -moz-box-shadow: 1px 1px 3px #000;
     -webkit-box-shadow: 1px 1px 3px #000;
     box-shadow: 1px 1px 3px #000;
}
 .close:hover {
     background: #00d9ff;
}
/*mb content*/
 .col-container {
     display: table;
    /* Make the container element behave like a table */
     width: 100%;
    /* Set full-width to expand the whole page */
     font-size: 1em;
     padding: 1em;
}
 .col {
     display: table-cell;
     width: 25%;
     vertical-align: top;
}
 .col p {
     width: 90%;
     padding: 4px 0 4px 9%;
     margin: 8px 0;
}
 div#rt {
     width:15%;
     color: #666;
}
 div#rt p:nth-child(odd), div#lt p:nth-child(odd) {
     background: #e0e0e0;
}
 div#prod {
     text-align: center;
}
 div#prod h3 {
     margin: 0 auto 2em auto;
     padding: 0;
     border: none;
}
 span#per {
     width: 2em;
     height: 2em;
     border: 10px solid #28b463;
     padding: 10% 6%;
     border-radius: 50%;
     font-size: 2em;
     font-weight: bolder;
}
 #download_report img {
     width:3s0%;
}
 #message {
     display:none;
}
/*Modalbox*/
/*Tablet*/
 @media only screen and (max-width: 1023px) {
     .top, .dbody {
         display:none;
    }
     #message {
         display: block;
         width: 50%;
         position: absolute;
         top: 10%;
         left: 25%;
    }
     #message h5 {
         width:100%;
         text-align: center;
         background: #ffcc00;
         color:#000;
         padding: 2em 0;
    }
}