@import url('https://fonts.googleapis.com/css?family=Lato');

* {
    margin: 0;
    padding: 0;
    /*outline: 1px solid red;*/
    font-family: 'Lato', sans-serif;
}

header {
    font-family: monospace;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

h1 {
    font-weight: lighter;
}

/*.top-bar {
    width: 100%;
    background-color: #c7e9fb;
    background-image: linear-gradient(315deg, #c7e9fb 0%, #e61d8c 74%);
    height: 10px;
}*/

.top-banner {
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.5),
     rgba(0, 0, 0, 0.1)), url("images/grad3.png");*/
    background-color: #f9c5d1;
    background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
    height: 30%;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-bottom: 50px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 1);
}

#weaInput {
    display: block;
}

#error {
    margin-top: 15px;
    display: none;
    color: red;
}

#localWeaInfo {
    display: none;
}

#localWeaForec {
    display: none;
}

#localW2 {
    display: none;
}

#shortSumLocal {
    font-size: 20px;
    width: max-content;
    position: absolute;
    display: inline-block;
    left: 230px;
    bottom: 49px;
}

#shortSumLocal2 {
    font-size: 20px;
    width: max-content;
    position: absolute;
    display: inline-block;
    left: 230px;
    bottom: 49px;
}

#tempLocal {
    font-size: 50px;
    width: max-content;
    position: absolute;
    display: inline-block;
    left: 148px;
    bottom: -14px;
}

#tempLocalForec {
    font-size: 50px;
    width: max-content;
    position: absolute;
    display: inline-block;
    left: 148px;
    bottom: -14px;
}

#maxLocalForec {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#minLocalForec {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#windLocalForec {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#humLocalForec {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#preciLocalForec {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#pressLocalForec {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#maxLocal {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#minLocal {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#humLocal {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#preciLocal {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#windLocal {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#pressLocal {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

.display-local {
    text-align: center;
    color: #555;
}

.display-api {
    box-sizing: border-box;
    text-align: left;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    color: #000;
    opacity: 60%;
    font-weight: bold;
}

#weatherF {
    margin-bottom: 10px;
    display: block;
}

.display-data {
    box-sizing: border-box;
    text-align: left;
    margin-left: 20px;
    color: #000;
    opacity: 60%;
    font-weight: bold;
}

.display-data-rpi {
    box-sizing: border-box;
    text-align: left;
    margin-left: 20px;
    color: #000;
    opacity: 60%;
    font-weight: bold;
}

.display-data-os {
    box-sizing: border-box;
    text-align: left;
    margin-left: 20px;
    color: #000;
    opacity: 60%;
    font-weight: bold;
    margin-bottom: 13px;
}

#cpuLoad, #cpuAvg, #cpuTemp {
    box-sizing: border-box;
    /*position: absolute;*/
    margin-left: 220px;
}

#usedRAM, #freeRAM, #totalRAM {
    box-sizing: border-box;
    /*position: absolute;*/
    margin-left: 250px;
}

.material-links > p {
    color: #000;
    opacity: 60%;
    font-weight: bold;
    margin-left: 20px;
    margin-right: 20px;
}

.notiDot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    display: none;
}

#noti > p {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
}

#noti p > img {
    vertical-align: middle;
    padding-right: 5px;
    width: 20px;
    height: 20px;
}

#noNoti {
    margin-bottom: 5px;
}

.notifications {
    color: #000;
    opacity: 60%;
    font-weight: bold;
    margin-top: 17px;
    margin-left: 20px;
    margin-right: 20px;
    height: 150px;
    position: relative;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth; 
}

.data-chart {
    box-sizing: border-box;
    display: block;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
    max-width: 100%;
    background-color: #ddd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.data-chart-rpi {
    box-sizing: border-box;
    display: block;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
    width: 90%;
    background-color: #ddd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

#temp2 {
    box-sizing: border-box;
    padding: 4px;
    margin: 0;
    width: 22%;
    background-color: lightgreen;
    display: block;
    border-radius: 10px;
}

#temp3 {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#hum2 {
    box-sizing: border-box;
    padding: 4px;
    margin: 0;
    width: 54%;
    background-color: lightblue;
    display: block;
    border-radius: 10px;
}

#hum3 {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#lights2 {
    box-sizing: border-box;
    padding: 4px;
    margin: 0;
    width: 65%;
    background-color: lightyellow;
    display: block;
    border-radius: 10px;
}

#lights3 {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

#cpu1 {
    box-sizing: border-box;
    padding: 4px;
    margin: 0;
    width: 65%;
    background-color: lightblue;
    display: block;
    border-radius: 10px;
}

#cpu2 {
    box-sizing: border-box;
    padding: 4px;
    margin: 0;
    width: 65%;
    background-color: lightgreen;
    display: block;
    border-radius: 10px;
}

#cpu3 {
    box-sizing: border-box;
    padding: 4px;
    margin: 0;
    width: 65%;
    background-color: lightcoral;
    display: block;
    border-radius: 10px;
}

#ram1 {
    box-sizing: border-box;
    display: block;
    padding: 4px;
    margin: 0;
    width: 65%;
    background-color: lightcoral;
    border-radius: 10px;
    max-width: 90%;
}

#ram2 {
    box-sizing: border-box;
    display: block;
    padding: 4px;
    margin: 0;
    width: 65%;
    background-color: lightgreen;
    border-radius: 10px;
    max-width: 90%;
}

#ram3 {
    box-sizing: border-box;
    display: block;
    padding: 4px;
    margin: 0;
    width: 65%;
    background-color: lightblue;
    border-radius: 10px;
    max-width: 100%;
}

/*Half Donut Chart*/

.donut-chart {
    box-sizing: border-box;
    display: block;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
    max-width: 100%;
    background-color: #ddd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/*END OF END OF END OF*/

.material-cards-rpi {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    position: relative;
    width: 1460px;
    height: 350px;
    float: left;
    margin: 10px;
    top: 0px;
    left: 25px;
    clear: both;
    margin-bottom: 30px;
    background-color: #fff;
    padding-bottom: 100px;
    border-radius: 5px;
}

.material-cards {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    position: relative;
    width: 350px;
    height: 350px;
    float: left;
    margin: 10px;
    top: 0px;
    left: 25px;
    margin-bottom: 30px;
    background-color: #fff;
    padding-bottom: 100px;
    border-radius: 5px;
}

.material-cards-horiz {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    position: relative;
    width: 720px;
    height: 350px;
    float: left;
    margin: 10px;
    top: 0px;
    left: 25px;
    margin-bottom: 10px;
    background-color: #fff;
    padding-bottom: 100px;
    border-radius: 5px;
    /*margin-bottom: 100px;*/
}

.material-card-settings {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    position: relative;
    width: 350px;
    height: 350px;
    float: left;
    margin: 10px;
    top: 0px;
    left: 25px;
    margin-bottom: 30px;
    background-color: #fff;
    padding-bottom: 100px;
    border-radius: 5px;
}

.rpi-img {
    vertical-align: middle;
    padding-right: 5px;
    width: 20px;
    height: 20px;
}

.sendTo {
    float: left;
    height: 100px;
    width: 300px;
    margin-left: 20px;
}

.receiveFrom {
    float: right;
    height: 100px;
    width: 300px;
    margin-right: 20px;
}

.cmd-img {
    vertical-align: middle;
}

.send {
    display: block;
    text-align: left;
    padding-bottom: 20px;
}

.receive {
    display: block;
    text-align: left;
    padding-bottom: 20px;
}

.cmd {
    text-align: left;
    margin-bottom: 10px;
}

.material-cards-overview {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    position: relative;
    width: 350px;
    height: 840px;
    float: right;
    margin: 10px;
    top: 0px;
    right: 20px;
    margin-bottom: 30px;
    background-color: #fff;
    padding-bottom: 100px;
    border-radius: 5px;
}

.material-tittle {
    color: #eee;
    position: absolute;
    margin-top: -40px;
    margin-left: 50px;
    font-weight: lighter;
}

.material-icon{
    color: #eee;
    position: absolute;
    margin-top: -43px;
    margin-left: 12px;
    width: 30px;
}

.icon-today {
    background-image: url("images/icons/sun.svg");
    color: #eee;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    margin-top: -43px;
    margin-left: 12px;
    width: 30px;
    height: 30px;
}

.icon-tomorrow {
    background-image: url("images/icons/sun.svg");
    color: #eee;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    margin-top: -43px;
    margin-left: 12px;
    width: 30px;
    height: 30px;
}

.material-links {
    margin-top: 30px;
    display: block;
    text-align: center;
}

.material-data {
    margin-top: 45px;
    display: inline-block;
    text-align: center;
    width: 400px;
    /*float: left;*/
}

.material-data-os {
    margin-top: 45px;
    display: inline-block;
    text-align: center;
    width: 310px;
    /*float: left;*/
}

.infoT {
    position: absolute;
    display: inline-block;
    margin-left: 20px;
    color: #000;
    opacity: 60%;
}

.material-links-over {
    display: block;
    text-align: center;
}

.material-card1 {
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
    background-color: #f9c5d1;
    background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.material-card-over {
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
    background-color: #f9c5d1;
    background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
    height: 175px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.material-card-weather {
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
    background-color: #f9c5d1;
    background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.material-card-weather-forec {
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
    background-color: #f9c5d1;
    background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.material-security {
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
    background-color: #f9c5d1;
    background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.material-exterior {
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
    background-color: #f9c5d1;
    background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.material-interior {
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
    background-color: #f9c5d1;
    background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.material-server-stats {
    background-color: #6a93cb;
    background-image: linear-gradient(315deg, #6a93cb 0%, #a4bfef 74%);
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.title {
    font-size: 7px;
}

.act-btns {
    border: none;
    outline: none;
    border-radius: 1px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    margin-left: 5px;
    background-color: #6b7bdb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    /*width: 50px;*/
    /*border-radius: 50%;*/
}

.act-btns2 {
    border: none;
    outline: none;
    border-radius: 1px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    margin-left: 5px;
    background-color: #6b7bdb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    /*width: 50px;*/
}

.act-btns:active {
    background-color: #9ea9eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
    transform: translateY(4px);
}

.act-btns:hover {
    background-color: #9ea9eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.act-btns2:active {
    background-color: #9ea9eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
    transform: translateY(4px);
}

.act-btns2:hover {
    background-color: #9ea9eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

#search {
    background-image: url("images/icons/search.svg");
    background-repeat: no-repeat;
    vertical-align: middle;
    background-position: 5.5px 5px;
    width: 37px;
    border-radius: 50%;
}

#notiClr {
    background-image: url("images/icons/x.svg");
    background-repeat: no-repeat;
    vertical-align: middle;
    background-position: 6px 6px;
    width: 37px;
    border-radius: 50%;
    display: none;
}

.clr-btn {
    border: none;
    outline: none;
    border-radius: 1px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    margin-top: 9px;
    background-color: #6b7bdb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    width: 50px;
}

.clr-btn:active {
    background-color: #9ea9eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
    transform: translateY(4px);
}

.clr-btn:hover {
    background-color: #9ea9eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.clr-btn2 {
    border: none;
    outline: none;
    border-radius: 1px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    margin-top: 6px;
    background-color: #6b7bdb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    width: 50px;
    display: none;
}

.clr-btn2:active {
    background-color: #9ea9eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
    transform: translateY(4px);
}

.clr-btn2:hover {
    background-color: #9ea9eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

#send1, #send2, #send3 {
    background-image: url("images/icons/send.svg");
    background-repeat: no-repeat;
    vertical-align: middle;
    background-position: 5px 7px;
    width: 37px;
    border-radius: 50%;
}

div > input {
    padding: 10px;
    margin: 10px;
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

#realTimeData {
    display: block;
    margin-right: auto;
    margin-left: 25%;
    color: red;
}

#sensorValues {
    /*margin-top: 40px;
    margin-right: auto;
    margin-left: auto;*/
    width: 350px;
}

table {
    /*box-shadow: 0 1px 4px rgba(0, 0, 0, .2);*/
}

table, th, td {
    border: none;
    border-collapse: collapse;
    margin: 0;
    padding: 17.5px;
    border-collapse: collapse;
    border-radius: 1px;
}

th {
    /*background-color: #443c77;*/
    background-color: #999;
    color: #fff;
    font-weight: normal;
    border-radius: 1px;
}

td {
    text-align: center;
    color: #666;
}

input[type=text] {
    border: none;
    outline: none;
    border-radius: 5px;
    background: #eee;
    color: #777;
    text-align: center;
    width: 250px;
}

.send-down {
    /*outline: 1px solid red;*/
    margin-top: 30px;
    text-align: left;
}

#response {
    margin-top: 5px;
    text-align: center;
    padding: 10px;
    font-weight: lighter;
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #999;
    background-color: #e5e5e5;
}

/*SCROLLBAR*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #e5e5e5; 
}

::-webkit-scrollbar-thumb {
    background: #888; 
}

::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.push {
    margin-top: 20px;
}

footer {
    text-align: center;
}

footer > p {
    display: inline-block;
    padding-top: 15px;
    font-size: 13px;
    margin-bottom: 30px;
}

/*######################## Mobile Version ##########################################*/

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

    * {
        margin: 0;
        padding: 0;
        /*outline: 1px solid red;*/
        font-family: 'Lato', sans-serif;
    }
    
    header {
        font-family: monospace;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
    }
    
    h1 {
        font-weight: lighter;
    }
    
    /*.top-bar {
        width: 100%;
        background-color: #c7e9fb;
        background-image: linear-gradient(315deg, #c7e9fb 0%, #e61d8c 74%);
        height: 10px;
    }*/
    
    .top-banner {
        /*background-image: linear-gradient(rgba(0, 0, 0, 0.5),
         rgba(0, 0, 0, 0.1)), url("images/grad3.png");*/
        background-color: #f9c5d1;
        background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
        height: 30%;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        margin-bottom: 50px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 1);
    }
    
    #weaInput {
        display: block;
    }
    
    #error {
        margin-top: 15px;
        display: none;
        color: red;
    }
    
    #localWeaInfo {
        display: none;
    }
    
    #localWeaForec {
        display: none;
    }
    
    #localW2 {
        display: none;
    }
    
    #shortSumLocal {
        font-size: 20px;
        width: max-content;
        position: absolute;
        display: inline-block;
        left: 180px;
        bottom: 49px;
    }
    
    #shortSumLocal2 {
        font-size: 20px;
        width: max-content;
        position: absolute;
        display: inline-block;
        left: 180px;
        bottom: 49px;
    }
    
    #tempLocal {
        font-size: 35px;
        width: max-content;
        position: absolute;
        display: inline-block;
        left: 148px;
        bottom: -6px;
    }
    
    #tempLocalForec {
        font-size: 35px;
        width: max-content;
        position: absolute;
        display: inline-block;
        left: 148px;
        bottom: -6px;
    }
    
    #maxLocalForec {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #minLocalForec {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #windLocalForec {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #humLocalForec {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #preciLocalForec {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #pressLocalForec {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #maxLocal {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #minLocal {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #humLocal {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #preciLocal {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #windLocal {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #pressLocal {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    .display-local {
        text-align: center;
        color: #555;
    }
    
    .display-api {
        box-sizing: border-box;
        text-align: left;
        margin-top: 20px;
        margin-left: 20px;
        margin-bottom: 20px;
        color: #000;
        opacity: 60%;
        font-weight: bold;
    }
    
    #weatherF {
        margin-bottom: 10px;
        display: block;
    }
    
    .display-data {
        box-sizing: border-box;
        text-align: left;
        margin-left: 20px;
        color: #000;
        opacity: 60%;
        font-weight: bold;
    }
    
    .display-data-rpi {
        box-sizing: border-box;
        text-align: left;
        margin-left: 20px;
        color: #000;
        opacity: 60%;
        font-weight: bold;
    }
    
    .display-data-os {
        box-sizing: border-box;
        text-align: left;
        margin-left: 20px;
        color: #000;
        opacity: 60%;
        font-weight: bold;
        margin-bottom: 13px;
    }
    
    #cpuLoad, #cpuAvg, #cpuTemp {
        box-sizing: border-box;
        /*position: absolute;*/
        margin-left: 220px;
    }
    
    #usedRAM, #freeRAM, #totalRAM {
        box-sizing: border-box;
        /*position: absolute;*/
        margin-left: 250px;
    }
    
    .material-links > p {
        color: #000;
        opacity: 60%;
        font-weight: bold;
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .notiDot {
        height: 25px;
        width: 25px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        position: absolute;
        display: none;
    }
    
    #noti > p {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
    }
    
    #noti p > img {
        vertical-align: middle;
        padding-right: 5px;
        width: 20px;
        height: 20px;
    }
    
    #noNoti {
        margin-bottom: 5px;
    }
    
    .notifications {
        color: #000;
        opacity: 60%;
        font-weight: bold;
        margin-top: 17px;
        margin-left: 20px;
        margin-right: 20px;
        height: 150px;
        position: relative;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-behavior: smooth; 
    }
    
    .data-chart {
        box-sizing: border-box;
        display: block;
        border-radius: 10px;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 10px;
        margin-bottom: 30px;
        max-width: 100%;
        background-color: #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    }
    
    .data-chart-rpi {
        box-sizing: border-box;
        display: block;
        border-radius: 10px;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 10px;
        margin-bottom: 30px;
        width: 90%;
        background-color: #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    }
    
    #temp2 {
        box-sizing: border-box;
        padding: 4px;
        margin: 0;
        width: 22%;
        background-color: lightgreen;
        display: block;
        border-radius: 10px;
    }
    
    #temp3 {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #hum2 {
        box-sizing: border-box;
        padding: 4px;
        margin: 0;
        width: 54%;
        background-color: lightblue;
        display: block;
        border-radius: 10px;
    }
    
    #hum3 {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #lights2 {
        box-sizing: border-box;
        padding: 4px;
        margin: 0;
        width: 65%;
        background-color: lightyellow;
        display: block;
        border-radius: 10px;
    }
    
    #lights3 {
        position: absolute;
        right: 0;
        margin-right: 20px;
    }
    
    #cpu1 {
        box-sizing: border-box;
        padding: 4px;
        margin: 0;
        width: 65%;
        background-color: lightblue;
        display: block;
        border-radius: 10px;
    }
    
    #cpu2 {
        box-sizing: border-box;
        padding: 4px;
        margin: 0;
        width: 65%;
        background-color: lightgreen;
        display: block;
        border-radius: 10px;
    }
    
    #cpu3 {
        box-sizing: border-box;
        padding: 4px;
        margin: 0;
        width: 65%;
        background-color: lightcoral;
        display: block;
        border-radius: 10px;
    }
    
    #ram1 {
        box-sizing: border-box;
        display: block;
        padding: 4px;
        margin: 0;
        width: 65%;
        background-color: lightcoral;
        border-radius: 10px;
        max-width: 90%;
    }
    
    #ram2 {
        box-sizing: border-box;
        display: block;
        padding: 4px;
        margin: 0;
        width: 65%;
        background-color: lightgreen;
        border-radius: 10px;
        max-width: 90%;
    }
    
    #ram3 {
        box-sizing: border-box;
        display: block;
        padding: 4px;
        margin: 0;
        width: 65%;
        background-color: lightblue;
        border-radius: 10px;
        max-width: 100%;
    }
    
    /*Half Donut Chart*/
    
    .donut-chart {
        box-sizing: border-box;
        display: block;
        border-radius: 10px;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 10px;
        margin-bottom: 30px;
        max-width: 100%;
        background-color: #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    }
    
    /*END OF END OF END OF*/
    
    .material-cards-rpi {
        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
        position: relative;
        width: 1460px;
        height: 350px;
        float: left;
        margin: 10px;
        top: 0px;
        left: 25px;
        clear: both;
        margin-bottom: 30px;
        background-color: #fff;
        padding-bottom: 100px;
        border-radius: 5px;
        display: none;
    }
    
    .material-cards {
        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
        position: relative;
        width: 310px;
        height: 310px;
        float: none;
        margin: 10px;
        top: 0px;
        left: 0px;
        margin-bottom: 30px;
        background-color: #fff;
        padding-bottom: 100px;
        border-radius: 5px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .material-cards-horiz {
        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
        position: relative;
        width: 720px;
        height: 350px;
        float: left;
        margin: 10px;
        top: 0px;
        left: 25px;
        margin-bottom: 10px;
        background-color: #fff;
        padding-bottom: 100px;
        border-radius: 5px;
        display: none;
        /*margin-bottom: 100px;*/
    }
    
    .material-card-settings {
        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
        position: relative;
        width: 310px;
        height: 350px;
        float: none;
        margin: 10px;
        top: 0px;
        left: 0px;
        margin-bottom: 30px;
        background-color: #fff;
        padding-bottom: 100px;
        border-radius: 5px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .rpi-img {
        vertical-align: middle;
        padding-right: 5px;
        width: 20px;
        height: 20px;
    }
    
    .sendTo {
        float: left;
        height: 100px;
        width: 300px;
        margin-left: 20px;
    }
    
    .receiveFrom {
        float: right;
        height: 100px;
        width: 300px;
        margin-right: 20px;
    }
    
    .cmd-img {
        vertical-align: middle;
    }
    
    .send {
        display: block;
        text-align: left;
        padding-bottom: 20px;
    }
    
    .receive {
        display: block;
        text-align: left;
        padding-bottom: 20px;
    }
    
    .cmd {
        text-align: left;
        margin-bottom: 10px;
    }
    
    .material-cards-overview {
        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
        position: relative;
        width: 310px;
        height: 840px;
        float: none;
        margin: 10px;
        top: 0px;
        left: 0px;
        margin-bottom: 30px;
        background-color: #fff;
        padding-bottom: 100px;
        border-radius: 5px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .material-tittle {
        color: #eee;
        position: absolute;
        margin-top: -40px;
        margin-left: 50px;
        font-weight: lighter;
    }
    
    .material-icon{
        color: #eee;
        position: absolute;
        margin-top: -43px;
        margin-left: 12px;
        width: 30px;
    }
    
    .icon-today {
        background-image: url("images/icons/sun.svg");
        color: #eee;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        margin-top: -43px;
        margin-left: 12px;
        width: 30px;
        height: 30px;
    }
    
    .icon-tomorrow {
        background-image: url("images/icons/sun.svg");
        color: #eee;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        margin-top: -43px;
        margin-left: 12px;
        width: 30px;
        height: 30px;
    }
    
    .material-links {
        margin-top: 30px;
        display: block;
        text-align: center;
    }
    
    .material-data {
        margin-top: 45px;
        display: inline-block;
        text-align: center;
        width: 400px;
        /*float: left;*/
    }
    
    .material-data-os {
        margin-top: 45px;
        display: inline-block;
        text-align: center;
        width: 310px;
        /*float: left;*/
    }
    
    .infoT {
        position: absolute;
        display: inline-block;
        margin-left: 20px;
        color: #000;
        opacity: 60%;
    }
    
    .material-links-over {
        display: block;
        text-align: center;
    }
    
    .material-card1 {
        /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
        background-color: #f9c5d1;
        background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .material-card-over {
        /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
        background-color: #f9c5d1;
        background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
        height: 175px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .material-card-weather {
        /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
        background-color: #f9c5d1;
        background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .material-card-weather-forec {
        /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
        background-color: #f9c5d1;
        background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .material-security {
        /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
        background-color: #f9c5d1;
        background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .material-exterior {
        /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
        background-color: #f9c5d1;
        background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .material-interior {
        /*background-image: linear-gradient(rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2)), url("images/grad3.png");*/
        background-color: #f9c5d1;
        background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .material-server-stats {
        background-color: #6a93cb;
        background-image: linear-gradient(315deg, #6a93cb 0%, #a4bfef 74%);
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .title {
        font-size: 7px;
    }
    
    .act-btns {
        border: none;
        outline: none;
        border-radius: 1px;
        cursor: pointer;
        color: #fff;
        font-weight: bold;
        margin-left: 5px;
        background-color: #6b7bdb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
        /*width: 50px;*/
        /*border-radius: 50%;*/
    }
    
    .act-btns2 {
        border: none;
        outline: none;
        border-radius: 1px;
        cursor: pointer;
        color: #fff;
        font-weight: bold;
        margin-left: 5px;
        background-color: #6b7bdb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
        /*width: 50px;*/
    }
    
    .act-btns:active {
        background-color: #9ea9eb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
        transform: translateY(4px);
    }
    
    .act-btns:hover {
        background-color: #9ea9eb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
    }
    
    .act-btns2:active {
        background-color: #9ea9eb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
        transform: translateY(4px);
    }
    
    .act-btns2:hover {
        background-color: #9ea9eb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
    }
    
    #search {
        background-image: url("images/icons/search.svg");
        background-repeat: no-repeat;
        vertical-align: middle;
        background-position: 5.5px 5px;
        width: 37px;
        border-radius: 50%;
    }
    
    #notiClr {
        background-image: url("images/icons/x.svg");
        background-repeat: no-repeat;
        vertical-align: middle;
        background-position: 6px 6px;
        width: 37px;
        border-radius: 50%;
        display: none;
        margin-top: -3px;
    }
    
    .clr-btn {
        border: none;
        outline: none;
        border-radius: 1px;
        cursor: pointer;
        color: #fff;
        font-weight: bold;
        margin-top: 9px;
        background-color: #6b7bdb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
        width: 50px;
    }
    
    .clr-btn:active {
        background-color: #9ea9eb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
        transform: translateY(4px);
    }
    
    .clr-btn:hover {
        background-color: #9ea9eb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
    }
    
    .clr-btn2 {
        border: none;
        outline: none;
        border-radius: 1px;
        cursor: pointer;
        color: #fff;
        font-weight: bold;
        margin-top: 6px;
        background-color: #6b7bdb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
        width: 50px;
        display: none;
    }
    
    .clr-btn2:active {
        background-color: #9ea9eb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
        transform: translateY(4px);
    }
    
    .clr-btn2:hover {
        background-color: #9ea9eb;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
    }
    
    #send1, #send2, #send3 {
        background-image: url("images/icons/send.svg");
        background-repeat: no-repeat;
        vertical-align: middle;
        background-position: 5px 7px;
        width: 37px;
        border-radius: 50%;
    }
    
    div > input {
        padding: 10px;
        margin: 10px;
        display: inline-block;
        margin-right: auto;
        margin-left: auto;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    }
    
    #realTimeData {
        display: block;
        margin-right: auto;
        margin-left: 25%;
        color: red;
    }
    
    #sensorValues {
        /*margin-top: 40px;
        margin-right: auto;
        margin-left: auto;*/
        width: 100%;
    }
    
    table {
        /*box-shadow: 0 1px 4px rgba(0, 0, 0, .2);*/
    }
    
    table, th, td {
        border: none;
        border-collapse: collapse;
        margin: 0;
        padding: 17.5px;
        border-collapse: collapse;
        border-radius: 1px;
    }
    
    th {
        /*background-color: #443c77;*/
        background-color: #999;
        color: #fff;
        font-weight: normal;
        border-radius: 1px;
    }
    
    td {
        text-align: center;
        color: #666;
    }
    
    input[type=text] {
        border: none;
        outline: none;
        border-radius: 5px;
        background: #eee;
        color: #777;
        text-align: center;
        width: 230px;
    }
    
    .send-down {
        /*outline: 1px solid red;*/
        margin-top: 30px;
        text-align: left;
    }
    
    #response {
        margin-top: 5px;
        text-align: center;
        padding: 10px;
        font-weight: lighter;
    }
    
    body {
        font-family: 'Lato', sans-serif;
        font-size: 14px;
        color: #999;
        background-color: #e5e5e5;
    }
    
    /*SCROLLBAR*/
    
    ::-webkit-scrollbar {
        width: 10px;
    }
    
    ::-webkit-scrollbar-track {
        background: #e5e5e5; 
    }
    
    ::-webkit-scrollbar-thumb {
        background: #888; 
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #555; 
    }
    
    .push {
        margin-top: 20px;
    }
    
    footer {
        text-align: center;
    }
    
    footer > p {
        display: block;
        padding-top: 15px;
        font-size: 13px;
        padding-bottom: 5px;
    }
}