html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: #333333;
  color: #ffffff !important;
}

/*.navbar {
    background-color: #333333;
    color: #ffffff !important;
}*/


.bot {
    display: inline-block;
    width: 400px;
    height: 400px;
    border: 13px solid #777777;
    border-radius: 50%;
    margin: 10px;
    padding: 10px;
    padding-top:40px;
    background-color: #444444;
    color: #ffffff !important;
}

.botheader {
    font-size:48px;
    font-weight:bold;
}

.botdescription {
    font-size: 16px;
    padding-top:10px;
    padding-left:20px;
    padding-right:20px;
}

.botpnl {
    font-size: 30px;
    color: #008800 !important;
}

.color1 {
    border: 13px solid #ffff00;
    background-color: #808020;
}
.color2 {
    border: 13px solid #b6ff00;
    background-color: #759329;
}
.color3 {
    border: 13px solid #28a192;
    background-color: #197065;
}
.color4 {
    border: 13px solid #5a277e;
    background-color: #9342cc;
}
.color5 {
    border: 13px solid #008800;
    background-color: #22b422;
}

.color6 {
    color: #5a277e !important;
    color: #906faa !important;
}


.color1pnlbg {
    background-color: #ffff00;
    border-radius: 20px;
    padding: 2px;
}
.color2pnlbg {
    background-color: #b6ff00;
    border-radius: 20px;
    padding: 2px;
}
.color3pnlbg {
    background-color: #28a192;
    border-radius: 20px;
    padding: 2px;
}
.color4pnlbg {
    background-color: #5a277e;
    border-radius: 20px;
    padding: 2px;
}
.color5pnlbg {
    color:#ff0000;
    background-color: #008800;
    border-radius: 20px;
    padding: 2px;
}