/*
My god am i doing this too late
*/

.bg-bg, .bg-img, .bg-fg {
  height:100%;
  background-size:110% auto;
  background-position: 50% 50%;
  position: relative;
  transition: background-position 0.15s;
}

.bg-fg::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.3));
  backdrop-filter: blur(5px);
  pointer-events: none;
}

.bg-img .content{
    position:relative;
}

.bg-img form {
  min-width:320px;
  width:25%;
  background-color:#1e2833;
  padding:40px;
  border-radius:4px;
  transform:translate(-50%, -50%);
  position:absolute;
  top:50%;
  left:50%;
  color:#fff;
  box-shadow:3px 3px 4px rgba(0,0,0,0.2);
}

#lb {
    min-width: 320px;
    width: 40%;
    background-color: #1e2833;
    padding: 40px;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
    height: 70%;
    overflow-y: scroll;
}

.wide{
    width:50%;
}

.bg-img .illustration {
  text-align:center;
  padding:15px 0 20px;
  font-size:100px;
  color:#2980ef;
}

::-webkit-scrollbar{
    display:none;
}

.bg-img form .form-control {
  background:none;
  border:none;
  border-bottom:1px solid #434a52;
  border-radius:0;
  box-shadow:none;
  outline:none;
  color:inherit;
}

.bg-img form .btn-primary {
  background:#99E6FC;
  color:#1e2833;
  border:none;
  border-radius:4px;
  padding:11px;
  box-shadow:none;
  margin-top:26px;
  text-shadow:none;
  outline:none;
}

.bg-img form .btn-primary:hover, .bg-img form .btn-primary:active {
  background:#bff;
  outline:none;
}

.bg-img form .forgot {
  display:block;
  text-align:center;
  font-size:12px;
  color:#6f7a85;
  opacity:0.9;
  text-decoration:none;
}

.bg-img form .forgot:hover, .bg-img form .forgot:active {
  opacity:1;
  text-decoration:none;
}

.bg-img form .btn-primary:active {
  transform:translateY(1px);
}

option{
    background-color: #1e2833 !important;
}

body{
    overflow-y:hidden;
}

#back{
    color:white;
    background-color:#1e2833;
    width:50px;
    height:50px;
    position:absolute;
    top:25px;
    left:50px;
    padding: 0;
    border-radius:15px;
    font-weight:bolder;
    text-decoration:none;
}

#back img{
    margin: 10px 10px 10px 10px;
    width:30px;
    height:auto;
    filter:  brightness(1.4) saturate(0.7) hue-rotate(-10deg);
}


td{
    color:#fff;
}

#mb ,#sb{
    width:45%;
    position:absolute;
    top:20%

}

#mb{
    left:3%;
}

#sb{
    right:3%;
}




.tab{
    background-image: linear-gradient(to top, #081010, #1e2833);
    position: absolute;
    bottom: 84.9%;
    height: 50px;
    width: 80px;
    border-radius: 5px 5px 0 0;
}

.tab img{
    width: 40px;
    height: auto;
    text-align: center;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#t1{
    background-color:#1e2833;
    background-image:none;
    left: 31%;
}
#t2{
    left: calc(32% + 80px);
}
#t3{
    left: calc(33% + 160px);
}

#wt1{
    background-color:#1e2833;
    background-image:none;
    left: 26%;
}
#wt2{
    left: calc(27% + 80px);
}
#wt3{
    left: calc(28% + 160px);
}

.roundtab{
    background-color:#78c;
}

#ct1{
    background-color:#1e2833;
    background-image:none;
    left: 26%;
}
#ct2{
    left: calc(27% + 80px);
}
#ct3{
    left: calc(28% + 160px);
}

#match-table, #sim-table{
    left:15%;
    width:70%;
    position:absolute;
    overflow-y:scroll;
    border:1px white solid;
    border-radius:3px;
}

#match-table tr, #sim-table tr{
    border-bottom: 1px #555 solid;
}

#match-table table, #sim-table table{
    width:100%;
}

#match-table p, #sim-table p{
    margin:auto;
}

#match-table td{
    padding:4px;
}
#sim-table td{
    padding:8px;
}

#sim-table{
    height:70%;
}

#match-table{
    height:30%;
}

#sim-table tr:hover{
        background-color:#345;
        transition:background-color 0.2s;
}

#crd-prvw{
    position:absolute;
    left:5%;
    width:15%;
    height:auto;
    top:50%;
    transform:translate(0,-50%);
    display:none;
    border-radius:10px;
}

#clr-img{
    position:absolute;
    bottom:calc(15% + 10px);
    width:8%;
    right:calc(30% + 10px);
}

#cc{
    width:40px;
    height:auto;
    position:absolute;
    top:20px;
    right:20px;
}
table{
    text-align:left;
    font-size:15px;
    width:80%;
    position:absolute;
}

.lbimg{
    width:30px;
}
#r1, #r2, #r3, #sbr1, #sbr2, #sbr3{
    color:black;
}

.n{
    width:30px;
    height:30px;
    background-color:#113;
    border-radius:8px;
    align-content: center;
    text-align: center;
    font-weight:bold;
}
.ra{
    text-align:right;
}

.ca{
    text-align:center;
}

.c1{
    background-color:#FFE177;
    border: 2px solid black;
    font-weight:bolder;
}

.c2{
    background-color:#DEECF1;
    border: 2px solid black;
    font-weight:bold;
}

.c3{
    background-color:#FE646F;
    border: 2px solid black;
    font-weight:bold;
}

 tr:hover{
    background-color:#345;
    transition:background-color 0.2s;
}
tr{
    border-radius:5px;
}

tr td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

tr td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.pButton{
    background-color:#1e2833;
    width:50px;
    height:50px;
    position:absolute;
    left:50px;
    padding: 0;
    border-radius:15px;
    font-weight:bolder;
    text-decoration:none;
    border: 1px solid white;
    transition: width 0.5s;
}

.pButton:hover{
    text-decoration: none;
}

.pButton img{
    margin:10px;
    width:30px;
    height:auto;
}



.pButton span {
    opacity: 0;
    color:white;
    visibility:hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes appear{
    0% {
        opacity:0;
        visibility:hidden;
    }
    69%{
        opacity:0;
        visibility:hidden;
    }
    70% {
        opacity:0;
        visibility:visible;
    }
    100% {
        opacity:1;
        visibility:visible;
    }
}


.pButton:hover span {
    animation: appear 0.4s forwards;
}

#p1{
    top:25px;
}

#p1 img{
    margin:10px 12px 10px 8px;
    filter:  brightness(1.4) saturate(0.7) hue-rotate(-10deg);
}

#p1:hover{
    width:250px;
}

#p2{
    top:100px;
}

#p2:hover{
    width:200px;
}

#p3{
    top:175px;
}

#p3:hover{
    width:175px;
}

.trl{
    border-radius:5px 0 0 5px;
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-bottom: 3px solid white;
}
.trm{
    border-top: 3px solid white;
    border-bottom: 3px solid white;
}
.trr{
    border-radius:0 5px 5px 0;
    border-top: 3px solid white;
    border-right: 3px solid white;
    border-bottom: 3px solid white;
}

.winner{
    background-color:#363
}

.loser{
    background-color:#633
}