body{
  font-family: "Rowdies", sans-serif;
}

.group1 {
    position: absolute;
    top: 5%;
    left:5%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    background-color:white;
    z-index:-1;
}

.group2 {
    position: absolute;
    top: 13%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    background-color:white;
    z-index:-1;
}

.group3 {
    position: absolute;
    top:20%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    background-color:white;
    z-index:-1;
}

.group4 {
    position: absolute;
    top: 27.5%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    background-color:white;
    z-index:-1;
}

.group5 {
    position: absolute;
    top: 34.5%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    background-color:white;
    z-index:-1;
}

.group6 {
    position: absolute;
    top: 42.5%;
    left:5%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    background-color:white;
    z-index:-1;
}

.groupw1 {
    position: absolute;
    top: 16.5%;
    left:20%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    background-color:white;
    z-index:-1;
}

.groupw2 {
    position: absolute;
    top: 31%;
    left:20%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    background-color:white;
    z-index:-1;
}

.groupw3 {
    position: absolute;
    top: 10.75%;
    left:38%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    background-color:white;
    z-index:-1;
}

.groupw4 {
    position: absolute;
    top: 36.75%;
    left:38%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    background-color:white;
    z-index:-1;
}

.connectorsr1 .top-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 60%;
    top: 68%;
    z-index:-2;
}

.connectorsr2 .top-line {
    width: 29%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top: 9%;
    z-index:-2;
}

.connectorsr3 .top-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top: 17.5%;
    z-index:-2;
}

.connectorsr4 .top-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top:24%;
    z-index:-2;
}

.connectorsr5 .top-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top: 32%;
    z-index:-2;
}

.connectorsr6 .top-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top: 38.5%;
    z-index:-2;
}

.connectorsr3 .vert-line {
    height:6.5%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 21%;
    top: 17.5%;
    z-index:-2;
}

.connectorsr5 .vert-line {
    height:6.5%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 21%;
    top: 32%;
    z-index:-2;
}

.connectorsr6 .vert-line {
    height:6.5%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 21%;
    top: 80.5%;
    z-index:-2;
}

.connectorsr1 .vert-line {
    height:12%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 39%;
    top: 9%;
    z-index:-2;
}

.connectorsr6 .bottom-line {
    width:14%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 25%;
    top: 21%;
    z-index:-2;
}

.connectorsr2 .bottom-line {
    width:14%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 25%;
    top: 35%;
    z-index:-2;
}

.connectorsr2 .next-line {
    width: 29%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top: 47%;
    z-index:-2;
}

.connectorsr6 .next-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 45%;
    top: 15%;
    z-index:-2;
}

.connectorsr2 .vert-line {
    height:12%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 39%;
    top: 35%;
    z-index:-2;
}

.groupl2 {
    position: absolute;
    top: 62%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.groupl3 {
    position: absolute;
    top: 69%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.groupl1 {
    position: absolute;
    top: 76%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.groupl4 {
    position: absolute;
    top: 83%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.connectorsrl2 .top-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 45%;
    top: 41%;
    z-index:-2;
}

.connectorsrl3 .top-line {
    width: 46%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top: 60%;
    z-index:-2;
}

.connectorsrl1 .top-line {
    width:14%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 25%;
    top: 70%;
    z-index:-2;
}

.connectorsrl4 .top-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top:66.5%;
    z-index:-2;
}

.connectorsrl2 .vert-line {
    height:26%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 56%;
    top: 15%;
    z-index:-2;
    
}

.connectorsrl1 .vert-line {
    height:6.5%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 21%;
    top: 66.5%;
    z-index:-2;
    
}

.grouplw1 {
    position: absolute;
    top: 65.5%;
    left:20%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.grouplw2 {
    position: absolute;
    top: 79.5%;
    left:20%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.groupl7 {
    position: absolute;
    top: 55%;
    left:5%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.connectorsrl1 .bottom-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top:73%;
    z-index:-2;
}

.connectorsrl2 .bottom-line {
    width:14%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 25%;
    top: 83.5%;
    z-index:-2;
}

.connectorsrl3 .vert-line {
    height:17%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 56%;
    top: 60%;
    z-index:-2;
}

.connectorsrl4 .bottom-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 45%;
    top: 77%;
    z-index:-2;
}

.connectorsrl4 .vert-line {
    height:13.5%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 39%;
    top: 70%;
    z-index:-2;
}

.connectorsrl3 .bottom-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 60%;
    top: 28%;
    z-index:-2;
}

.grouplw3 {
    position: absolute;
    top: 72.5%;
    left:38%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.locked {
    background-color: #bb1143;
    border-color: #bb1143;
    color: white;
}

.playing {
    background-color: white;
    color: lightgreen;
}

.winner {
    background-color: lightgreen;
    border-color: lightgreen;
    color:white;
}

.loser {
    background-color: lightcoral;
    border-color: lightcoral;
    color:white;
}

.groupww {
    position: absolute;
    top: 23.75%;
    left:55%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.groupwl {
    position: absolute;
    top: 63.75%;
    left:55%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.connectorsrf .top-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top:87%;
    z-index:-2;
}

.connectorsrf .bottom-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 10%;
    top:80.5%;
    z-index:-2;
}

.connectorsrf .vert-line {
    height:40%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 71%;
    top: 28%;
    z-index:-2;
}

.groupwww1 {
    position: absolute;
    top: 43.75%;
    left:70%;
    margin: 10px;
    width: 9%;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.groupl10 {
    position: absolute;
    top: 93.75%;
    left:-200%;
    margin: 10px;
    width: 70px;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.connectorsrff .top-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 60%;
    top: 70%;
    z-index:-2;
}

.connectorsrff .bottom-line {
    width: 11%;
    border: #bb1143 1px solid;
    position: absolute;
    left: 60%;
    top: 70%;
    z-index:-2;
}

.connectorsrff .vert-line {
    height: 316px;
    width: 0px;
    border: #bb1143 1px solid;
    position: absolute;
    left: 674px;
    top: 1px;
    z-index:-2;
}

.groupwinner {
    position: absolute;
    top: 53.75%;
    left:80%;
    margin: 10px;
    width: 70px;
    border: #bb1143 2px solid;
    border-radius:25px;
    padding: 5px;
    z-index:-1;
    background-color:white;
}

.r11 {
    display:none;
    position:absolute;
    left:80%;
    top:30%;
    z-index:-1;
}




/*only change these*/
/*dont change font size on bracket only .winnerscreen*/
.miniexp::-webkit-scrollbar {
    display: none;
  }

.bracket {
    /*Adjust the scale value as needed using transform: scale */
    /*I will have to change the location of stuff if you do scale down*/
    /*Otherwise delete it*/
    /*transform: scale(.8); */
    
    transform-origin: top left; /* Set the transformation origin */
    position:absolute;
    width:80%;
    height:80%;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y:auto;
    border: #bb1143 2px solid;     border-radius:25px;
    top: 50%;
          left: 50%;
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}


.winnerscreen {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 500px;
    transform: translate(-50%, -50%);
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
    display: none;
    color:#bb1143;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    
}