:root {
    --tri_lgray: #C0C0C0; /*(192,192,192)*/
    --tri_gray: #808080; /*(128,128,128)*/
    --tri_dgray: #404040; /*(64,64,64)*/
    --tri_orange: #ff4b00;
    --tri_black: #000000;
}

* {
    box-sizing: border-box;
    color: rgb(204, 204, 220);
    background-color: rgb(17, 18, 23);
}

body {
    font-family: Arial, Helvetica, sans-serif;
}
p {
  text-indent: 10px;
}

video {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.logo {
    float: left;
    padding: 10px;
    height: 50px; /* Should be removed. Only for demonstration */
}

.logo.product {
    float: left;
}

.logo.company {
    float: right;
}

.box {
    border: 3px solid gray;
    border-radius: 10px;

}

/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
    height: 300px;
}

.data {
    float: left;
    padding: 10px;
}
.data.graph {
    height: 300px;
}
/* Left and right column */
.column.side {
    width: 25%;
}

/* Middle column */
.column.middle {
    width: 50%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Style the footer */
.footer {
    padding: 10px;
    text-align: center;
}



/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;

    padding: 0px;
    font-size: 35px;
    height: 50px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    /*background-color: inherit;*/
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #393939;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #292929;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}