*{
margin: 0;
padding:0;
}
html{
height: 100%;
}
body{
transition: background-color 0.5s;
color: black;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
margin: 0;
height: 100vh;
vertical-align: middle;
font-weight: 700;
background-color: #8f8f8f;
}
textarea{
font-family: 'Roboto Condensed', sans-serif;
}
.container{
width: 100%;
margin: 0;
padding-bottom: 20px;
padding-top: 100px;
}
.Content{
padding: 20px;
width: 90%;
background-color: azure;
margin: auto;
margin-bottom: 10px;
float:none;
border-radius: 20px;
filter: drop-shadow(1.5px 1.5px 0.25rem rgb(37, 0, 8));
}
#topBar{
width: 100%;
height: 75px;
background-color: #FFFFFF;
position: fixed;
z-index: 1;
}
#log{
text-align: center;
vertical-align: middle;
position: absolute;
right: 5%;
padding: 19px;
top: -12%;
}
#page{
text-align: center;
vertical-align: middle;
padding: 19;
color: #d60b51;
font-size: 23px;
}
#acc{
text-align: center;
vertical-align: middle;
color: #d60b51;
position: inherit;
right: 15%;
padding: 19px;
}
#page p1{
color: #d60b51;
font-size: 25px;
}
#acc p1{
color: #d60b51;
}
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
left:-280px;
top:0;
background: #FFFFFF;
z-index: 2;
transition: 0.5s;
border-left: 1px solid black;
filter: drop-shadow(1.5px 1.5px 3px rgb(37, 0, 8));
overflow:auto;
}
nav{
margin-top: 25px;
}
nav p{
text-align: center;
color: #d60b51;
margin-top: 5px;
}
nav ul li{
list-style: none;
width: 250px;
}
nav li{
height: 50px;
}
nav a{
border-top: .5px solid white;
border-bottom: .5px solid white;
text-decoration: none;
color: #d60b51;
z-index: 1;
transition: color 0.5s;
position: absolute;
font-size: 20px;
width: 250px;
height: 30px;
left: 0;
padding-top: 10px;
padding-bottom: 10px;
}
nav li span{
width: 0;
height: 51px;
position: absolute;
left: 0;
background: #d60b51;
z-index: -1;
transition: 0.5s;
}
li.active span{
width: 100%;
}
li.active a{
color: #000000;
}
nav li:hover span{
width: 100%;
}
nav li:hover a{
color: #000000;
}
nav a:hover{
color: black;
}
#menuBtn{
width: 35px;
height: 35px;
background-color: #d60b51;
position: fixed;
left: 30px;
top: 20px;
border-radius: 3px;
z-index: 3;
cursor: pointer;
}
#menuBtn img{
width: 25px;
height: 25px;
margin-top: 5px;
}
#icon img{
width: 156.5px;
height:78.5px;
padding-top: 20;
}
.submit {
background-color: #d60b51;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'Roboto Condensed', sans-serif;
cursor: pointer;
border-radius: 8px;
}
.submit:hover{
background-color: #575756;
}
h1{
font-family: 'Roboto Condensed', sans-serif;
color: #d60b51;
}
p1{
color: black;
font-weight: 700;
font-size: 18px;
}
p3{
color: black;
font-weight: 500;
font-size: 16px;
}
p{
display: inline-block;
font-weight: 100;
}
p2{
font-weight: 700;
color: #d60b51;
font-size: 27px;
}
.ContentLog{
padding: 25px;
width: 30%;
background-color: azure;
margin: auto;
margin-bottom: 20px;
float:none;
border-radius: 25px;
filter: drop-shadow(1.5px 1.5px 0.25rem rgb(37, 0, 8));
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
}
th{
background-color: #d12300;
color: white;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
}
td{
background-color: #ffc4c4;
color: black;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
}
.expand:hover{
cursor:pointer;
}
table, tr, td, th
{
border: 1px solid black;
border-collapse:collapse;
}
table{
border: 2px solid black;
}
tr.header
{
cursor:pointer;
}
.header .sign:after{
content:"+";
display:inline-block;
}
.header.expand .sign:after{
content:"-";
}
.tableButton{
background-color: #d60b51;
}
.tableButton:hover{
background-color: #575756;
cursor: pointer;
}
.header th{
background-color: #c74e4e;
border-bottom: 2px solid black;
text-align: center;
}
.header th:hover{
background-color: #a33129;
}
.IngTh{
background-color: #da6262;
}
.clear{
width: 100%;
clear: both;
height: 0px;
line-height: 0px;
}
.homelink{
color: #d60b51;
text-decoration: underline;
}
.checkContainer{
position: relative;
padding-left: 35px;
padding-top: 3px;
margin-bottom: 13px;
cursor: pointer;
font-size: 16px;
font-weight: 100;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
vertical-align: middle;
}
.checkContainer input{
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark{
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border: rgb(255, 94, 94) solid 1px;
border-radius: 5px;
}
.checkContainer:hover input ~ .checkmark{
background-color: rgb(255, 197, 197);
}
.checkContainer input:checked ~ .checkmark{
background-color: #fc0000;
}
.checkContainer input:disabled ~ .checkmark{
background-color: #f86c6c;
}
.checkmark:after{
content: "";
position: absolute;
display: none;
}
.checkContainer input:checked ~ .checkmark:after{
display: block;
}
.checkContainer .checkmark:after{
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.smallSubmit {
border-radius: 4px;
background: rgb(170,16,16);
color: white;
padding: 3px 3px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
cursor: pointer;
border: none;
font-family: 'Roboto Condensed', sans-serif;
}
.smallSubmit:hover{
background: rgb(136,7,7);
background: linear-gradient(0deg, rgba(136,7,7,1) 53%, rgba(199,16,11,1) 100%, rgba(247,96,92,1) 100%);
}
input{
border-radius: 6px;
padding: 3px 3px;
border: 1px solid black;
font-size: 13px;
text-align:center;
}
input:focus{
background-color: rgb(255, 202, 202);
}
select{
border-radius: 6px;
padding: 2px 2px;
border: 1px solid black;
}
.submitMessage{
border-radius: 2%;
padding: 20px;
background-color: #d60b51;
color: rgb(255, 255, 255);
position: absolute;
right:5;
top:5;
animation-duration: 2s;
animation-name: slidein;
position: fixed;
z-index: 999;
}
.submitMessage p{
font-weight: 800;
}
.submitMessage button{
border: none;
background-color: #d60b51;
color: rgb(255, 255, 255);
position: relative;
right: -10;
top: -10;
}
.submitMessage button:hover{
background-color: #9b093c;
color: rgb(179, 165, 140);
cursor: pointer;
}
@keyframes slidein {
from {
opacity: 0;
top: 100;
}
to {
opacity: 1;
top: 5;
}
}
.dashBox{
display: inline-block;
margin-right: 10px;
margin-left: 10px;
color: white;
text-align: left;
height: 100px;
width: 200px;
position: relative;
padding-top: 10px;
background-color: #d60b51;
}
.dashFooter{
width: 194px;
background-color: #a3073d;
position: absolute;
bottom: 0;
padding: 3px;
text-align: center;
}
.dashFooter p{
margin: 0;
}
.dashBox p2{
font-size: 30px;
color: #ffffff;
margin-right: 25px;
margin-left: 25px;
}
.dashBox p1{
font-size: 15px;
color: #ffffff;
margin-left: 25px;
}
.line{
border-top: 2px grey solid;
width: 85%;
}
.dashLogBox
{
border: none;
width: 100%;
text-align: left;
}
.dashLogBox td
{
text-align: left;
color: rgb(104 104 104);
border: none;
background-color: white;
}
.dashLogBox header,.dashLogBox th
{
background-color: white;
color: black;
border: none;
}
.dashLogBox th
{
border-bottom: 1px rgb(194, 194, 194) solid;
}
.dashLogBox tr{
border:none;
}
.das{
text-decoration: none;
color: white;
}
.popUpBackground{
width: 100%;
height: 100%;
position: fixed;
background: rgba(27, 27, 27, 0.5);
z-index: 1;
top: 0px;
overflow: hidden;
padding:0;
margin:0;
}
.popUpWindow{
padding: 25px;
width: 30%;
background-color: azure;
margin: auto;
margin-bottom: 20px;
float:none;
z-index:2;
border-radius: 25px;
/*filter: drop-shadow(1.5px 1.5px 0.25rem rgb(37, 0, 8));*/
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-height: 65%;
overflow: auto;
}
.progressBorder{
height: 12px;
width: 250px;
border: 1px solid black;
text-align: left;
margin: auto;
}
.progressBar{
height: 12px;
background-color: #c00202;
}
.collapsible{
background-color: rgb(255, 0, 0);
color: rgb(255, 255, 255);
cursor: pointer;
padding: 18px;
width: 50%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible:after{
content: "\2716";
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
border:none;
}
.act:after{
content: '\2713';
}
.act {
background-color: rgb(85, 231, 0)
}
.colContent{
/*padding: 0 18px;*/
overflow: hidden;
max-height:0;
width: 50%;
margin:auto;
background-color: #dddbdb;
transition: max-height 0.2s ease-out;
}
.ingPopWindow{
padding: 25px;
width: 50%;
background-color: azure;
margin: auto;
margin-bottom: 20px;
float:none;
border-radius: 25px;
/*filter: drop-shadow(1.5px 1.5px 0.25rem rgb(37, 0, 8));*/
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-height: 65%;
overflow: auto;
}
.addButton{
content: "\002B";
color: white;
background-color: rgb(0, 255, 0);
border-radius: 50%;
font-size:30px;
padding-right: 10px;
padding-left: 10px;
border: none;
margin-top: 2px;
margin-bottom: 2px;
cursor: pointer;
}
.addButton:hover{
background-color: rgb(1, 190, 1);
}
.tableInput{
border-radius: 0px;
border: none;
border-bottom: 1px solid rgb(136, 136, 136);
font-size: 13px;
text-align: center;
}
.tableInput:focus{
background-color: rgb(238, 238, 238);
border:none;
border-bottom: 1px solid rgb(92, 92, 92);
outline: none;
}
#weightDiv{
background-color: white;
width: 45%;
text-align: left;
display: inline-block;
}
#weightDiv p1{
font-weight:100;
}
#synced{
transform: rotate(0);
color: rgb(5, 255, 5);
}
#syncing{
color: red;
animation: loading 2s linear infinite;
}
@keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-360deg);
}
}
.tablink{
background-color: rgb(226, 226, 226);
color: black;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 5px 7px;
font-size: 17px;
width: 10%;
/*margin-left: 2px;*/
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top: #575756 1px solid;
border-bottom: #575756 1px solid;
border-left: #575756 1px solid;
border-right: #575756 1px solid;
}
.tablink:hover{
background-color: #d60b51;
color: white;
}
.tabcontent{
color: rgb(3, 3, 3);
background-color: rgb(255, 255, 255);
padding: 100px 20px;
display: none;
text-align: left;
}
.searchBar{
padding: 6px;
border: 1px solid rgb(158, 158, 158);
font-size: 17px;
border-radius: 0;
text-align: left;
}
.searchBar:focus{
background-color: white;
border: 1px solid rgb(136, 136, 136);
}
.newTable
{
border: none;
width: 100%;
text-align: left;
}
.newTable td
{
text-align: left;
color: rgb(104 104 104);
border: none;
background-color: transparent;
padding:6px 2px;
}
.newTable header,.newTable th
{
background-color: white;
color: black;
border: none;
}
.newTable th
{
border-bottom: 1px rgb(194, 194, 194) solid;
}
.newTable tr{
border:none;
border-bottom: 1px grey solid;
border-left: 1px grey solid;
border-right: 1px grey solid;
background-color: white;
}
.buttonNew{
padding:6px;
background-color: #575756;
font-size: 17px;
color: white;
border:none;
border-radius:none;
cursor: pointer;
}
.buttonNew:hover{
background-color: #d60b51;
}
.newTable tr:nth-child(even) {background-color: #f1f1f1;}
.logout{
border:none;
background-color: #FFFFFF;
cursor: pointer;
background: url("Assets/logout-01.svg") no-repeat;
width: 60px;
height: 60px;
}
.logout:hover{
background: url("Assets/logout-02.svg") no-repeat;
}
.newIngTable td, tr{
border:none;
background-color: white;
}
.users{
border: 1px rgb(196, 196, 196) solid;
text-align: right;
}
#users{
text-align: center;
vertical-align: middle;
color: #d60b51;
position: inherit;
right: 30%;
padding: 19px;
cursor:default;
}
#users:hover .online{
display:block;
z-index: 2;
width: 225px;
left: -75px;
}
.online{
margin-top:20px;
background-color: rgb(194, 194, 194);
display: none;
position:absolute;
border-radius: 25px;
padding: 5px;
}
#settings{
font-size:50px;
position:absolute;
color:#d60b51;
right: 15px;
}
#settings:hover{
cursor: pointer;
}
#settingsDiv{
border-radius: 0%;
border: 1px solid black;
background: white;
float:right;
position: absolute;
padding: 15px;
top: 76px;
right: 1px;
font-size:13px;
width: 300%;
text-align: left;
line-height: 20px;
}
.darkMode{
background-color: #141414;
}
.darkMode #settingsDiv{
background: #979797;
}
.darkMode .homelink{
color: #ff0058;
}
.darkMode p2{
color: #ff0058;
}
.darkMode .dashBox p2{
color: #ffffff;
}
.darkMode #page p1{
color: #ff0058;
}
.darkMode #acc p1{
color: #ff0058;
}
.darkMode #menuBtn{
background-color: #ff0058;
}
.darkMode .Content{
background-color: #383838;
}
.darkMode p, .darkMode p1{
color: white;
}
.darkMode #topBar{
background-color: #383838;
}
.darkMode #sideNav{
background-color: #383838;
}
.darkMode .newTable tr:nth-child(even) {background-color: #606060;}
.darkMode .newTable tr {background-color: #262626;}
.darkMode .newTable td{
color: white;
}
.darkMode .newIngTable{
background-color: #b7b7b7;
}
.darkMode .newIngTable td{
background-color: #383838;
color: white;
}
.darkMode #weightDiv{
background-color: #b7b7b7;
}
.darkMode #weightDiv p1{
color: #000000;
}
.darkMode #ingTable p1{
color: #ff0058;
}
.darkMode .dashLogBox .homelink p1{
color: #ff0058;
}
.darkMode .dashLogBox th{
background-color: #b7b7b7;
}
.darkMode .dashLogBox td{
background-color: #b7b7b7;
color: rgb(74 74 74);
}
.darkMode #head{
background-color: #383838;
}
#head{
background-color: white;
}
.darkMode .tabContent{
background-color: #383838;
}
.darkMode nav a{
color :white;
border-bottom: 0.5px #383838 solid;
border-top: 0.5px #383838 solid;
}
.darkMode li.active a{
color: #000000;
}
.darkMode nav li:hover a{
color: #000000;
}
.darkMode nav a:hover{
color: black;
}
.darkMode nav li span{
background-color: #ff0058;
}
.darkMode .popUpWindow{
background-color: #383838;
}
.bigSearchBar{
width: 20%;
font-size: 20px;
border-radius: 20px;
padding: 5px 5px;
border: 1px solid grey;
text-align: left;
background-color: #f0f0f0;
position: absolute;
float: left;
left: 150;
top: 20;
}
.bigSearchBar:focus{
background-color: #cccccc;
}
.results{
position:absolute;
background-color: rgb(245, 245, 245);
border: 1px solid black;
width: 25%;
left: 130;
top: 60;
max-height: 250px;
overflow-y: auto;
}
.results p{
width: 100%;
background-color: rgb(214, 214, 214);
}