*
{
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}
body {font-family: Arial;
      overflow-y: auto; /* Enables vertical scrolling */
     }
h2{
    text-align:center;
    color: #336699;
}
p{
    text-align: center;
}
.container
{
    position: relative; /*to set up bars aligned to bottom of parent*/
    height: auto;
    width:600px;
    margin:auto ;/*to center div*/
    border: 2px solid #ccc;
    background-color: rgba(255, 255, 255, 0.853);
}
.blueColor
{
    color:#336699;
}
input
{
padding: 0.4rem;
margin-right: 0.2rem;
}

input::placeholder {
    text-align: right; /*places placeholder value to right*/
  }

.tab {
    overflow: hidden;/*
Buttons spill out of the container, possibly overlapping other areas.
*/
    border: 1px solid #ccc;
  }
.tablinks.active
{
    background-color: #336699;
    color: aliceblue;
    font-weight: bold;
}
.tabContent
{
    margin-left: 0.7rem;
    display: none;
}
.tab button { 
  float: left; /*places to left of container*/
  border: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.853);
  color: gray;
}

.endbtn{
    padding: 10px 12px;
    border: none;
    font-size: 14px;
    background-color: #336699;
    color: aliceblue;
}
.end
{
    display: flex;
    justify-content: center;
    gap:18px;
}
.tab button:hover {
    border: 1px solid #336699;
}
.endbtn:hover
{   color:black;
    border: 1px solid #336699;
    background-color: rgba(255, 255, 255, 0.853);
}
#bars
{  
    display: flex;
    justify-content: center;
}
#texts
{
    display: flex;
    justify-content: space-evenly;
    
}
.endtexts h6,h5
{   text-align: center;

}
h6 
{    margin-top:-0.8rem;
    font-weight: normal;
}
.red-bar,.green-bar,.yellow-bar,.blue-bar {
    width: 20%;         /* Full width of the container */
    height: 2px;         /* Thin height */
        /* Optional spacing above and below */
  }


@media (max-width:850px) 
{
.container
{
   height:auto;
   width:350px;
}
input
{ display: flex;
  flex-direction: column;
   margin: 0.5rem 0;
   width: 90%;
   font-size:16px;

}
}

