:root {
  --rslogo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="5" y="19" style="font: bold 16px Arial;">R$</text></svg>');
}

body.dark-mode {
  --rslogo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text fill="white" x="5" y="17.6" style="font: 14px Arial;">R$</text></svg>');
}

h1 {
  text-align: left;
  margin: 20px;
}

#num1 {
  color: aliceblue;
  margin: 5px;
  border: 3px, solid, aliceblue;
}

#sidebar {
  background-color: var(--universalbackd);
  border-radius: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  width: auto;
}

@media (min-width: 767.98px){
  #sidebar{
    position: sticky;
    top: 0;
    float: right;
    width: 30%;
    margin-left: 10px;
    margin-bottom: 0px;
  }
}

#sidebar-start {
  border: 4px solid var(--universalborder);
  display: block;
  font-size: 1.4em;
  background-color: rgb(51, 148, 157);
  border-radius: 10px 10px 0px 0px;
  padding: 8px;
  text-align: center;
}

#sidebar-random {
  border-width: 0px 5px 0px 5px;
  border-color: var(--universalborder);
  border-style: solid;
  font-size: 1em;
  padding: 10px;
}

#sidebar-end {
  border: 5px solid var(--universalborder);
  display: block;
  border-radius: 0px 0px 10px 10px;
  padding: 5px;
}

#cats {
  display: grid;
  padding: 10PX;
  background-color: var(--universalbackgrounda);
  border: 2px solid rgb(61, 61, 61);
  border-radius: 20px;
  margin-right: 8px;
}

#cats>* {
  background-color: var(--universalbackd);
  border-radius: 10px;
  padding: 0px;
  width: auto;
  display: flexbox;
  flex: 1;
  margin-bottom: 10px;
}

.cat-start {
  padding: 8px;
  vertical-align: middle;
  border: 4px solid var(--universalborder);
  border-radius: 10px 10px 0px 0px;
}

.cat img {
  vertical-align: middle;
}

.cat input {
  background: var(--rslogo) no-repeat;
  border: 2px solid var(--universalborder);
  border-radius: 4px;
  color: var(--universalfont);
  background-color: var(--universalbackd2);
  resize: none;
  width: 25%;
  font-size: .8em;
  height: 30px;
  padding-left: 28px;
  padding-bottom: 2px;
}

.fillertext {
  position: absolute;
}

.cat-input {
  padding: 8px;
  display: block;
  padding: 5px;
  border: 5px solid var(--universalborder);
  border-width: 0px 5px 0px 5px;
}

.cat-end {
  padding: 5px;
  border: 4px solid var(--universalborder);
  border-radius: 0px 0px 10px 10px;
  margin-bottom: 0px;
}

.sidebarcat {
  vertical-align: middle;
  background-color: var(--universalbackd);
  margin-bottom: 5px;
}

.sidecatstart {
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  border: 2px solid var(--universalborder);
  border-radius: 20px 20px 0px 0px;
}

.sidecatcontent{
  padding: 4px;
  border: 2px solid var(--universalborder);
  border-top: 0px;  
  border-radius: 0px 0px 20px 20px;
  text-align: center;
  font-weight: var(--doireallyhavetobebold);
  font-size: .65em;
}

meter{
  width: 85%;
  height: 10px;
  border-radius: 10px;
  --optimum: rgb(0, 163, 27);
  --sub-optimum: rgb(220, 143, 0);
  --sub-sub-optimum: rgb(193, 0, 0);
}

meter::-webkit-meter-bar {
  background: var(--background);
}

meter:-moz-meter-optimum::-moz-meter-bar {
  background: var(--optimum);
}

meter::-webkit-meter-optimum-value {
  background: var(--optimum);
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--sub-optimum);
}

meter::-webkit-meter-suboptimum-value {
  background: var(--sub-optimum);
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--sub-sub-optimum);
}

meter::-webkit-meter-even-less-good-value {
  background: var(--sub-sub-optimum);
}