@font-face {
    font-family: 'bebas neue';
    src: url('Assets/Font/BebasNeue-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  /* Menggunakan font di seluruh halaman */
  body {
    font-family: 'bebas neue', sans-serif;
    background-color: #00ff62;
  }


/*Display*/

.ban {
    display: flex;
    margin-top:20px
}

.teamnameblue{
    width: 350px;
    height: 80px;
    text-align: center;
    line-height: 49px;
    background-color: #006bd6;
    margin: 1px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.teamnamered{
    width: 350px;
    height: 80px;
    text-align: center;
    line-height: 49px;
    background-color: #fc0341;
    margin: 1px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.ban1 {
    width: 82px;
    height: 80px;
    background-color: aqua;
    margin: 1px;
    overflow: hidden;
    background-image: url("Assets/Other/ban.png");
    background-position: center;
    background-size: 100%;
    filter: grayscale(100%);
   
}

.tournamentname {
    width: 350px;   
    height: 80px;
    background-color:#9900ff;
    background-image:url("Assets/Other/Tournamentnamebg.jpg");
    background-size: 105%;
    background-position: center;
    margin-top: 1.3px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    

}

.tournamentnamemid{
    font-size: 40px;
    font-weight: normal ;
    text-align: center;
    align-items: center;
    color: #000000;
    display: flex;
    justify-content: center;
    margin-top: 5%;
    
}

.tournamentnamebox{
    width: 200px;
    height: 30px;
    margin-top: 13px;
    margin-right: 10px;
    margin-left: 10px;
}

.tournamentinfo{
    width: 350px;
    height: 250px;
    background-color: #9900ff;
    background-image: url("Assets/Other/Tounamentinfobg.jpg");
    background-size: 110%;
    background-position: center;    
    margin-left: 5px;
    margin-right: 5px;
}

.tournamentlogo{
    width: 150px;
    height: 75px;
    margin: auto;
    display: flex;
    margin-top: 20px;
    overflow: hidden;
    object-fit: contain;
    
    
}

.logoprop{
   
    justify-content: space-around;
    width: 150px; /* Lebar gambar */
    height: 75px; /* Tinggi gambar */
    object-fit: contain;
    margin-left: 2px;
}

.bluevsred{
    width: 310px;
    height: 80px;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 10px;
    display: flex;
}

.bluelogo{
    width: 100px;
    height: 100px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.vslogo{
    width: 120px;
    height: auto;
    object-fit: contain;

}

.phase {    
    margin-top: 0px;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: #ffffff;

}
.direction img {
    width: 100px;
    height: auto;
    display: flex;
    margin: auto;
    margin-top: -5px;

}
.timer {
    font-size: 50px;
    color: rgb(255, 5, 5);
    display: flex;
    justify-content: center; 
    align-items: center;
   
}
button {
    font-size: 18px;
    padding: 10px 20px;
    cursor: pointer;
    margin: 10px;
}

.vsprop{
    width: 83.33333333333333px;
    height: 80px;
    object-fit: contain;
}

.redlogo{
    width: 100px;
    height: 100px;
   
    overflow: hidden;
}

.winlose{
    width: 294px;
    height: 10px;
    margin: auto;
    display: flex;
}

.w{
    width: 27px;
    height: 10px;
    display: flex;
    margin-right: 1px;
    margin-left: 1px;
}
.win1{
    width: 83.33333px;
    height: 10px;
    align-items: center;
    justify-content: center;
    display: flex;
    
}

.midwin{
    width: 130px;
    height: 10px;

}


.nickname{
    display: flex   ;
}

.pick{
    display: flex;
}

.pick1{
    width: 152.4px;
    height: 220px;
    background-color: blueviolet;
    margin: 1px;
    overflow: hidden;
    background-image: url("Assets/Other/Pickbg.jpg");
    background-position: center;
    background-size: 110%;
    overflow: hidden;
}

.bottom{
    display: flex;
}

.infobottom{
    width: 350px;
    height: 0px;
    margin-left: 5px;
    margin-right: 5px;
}


.nameholder{

    width: 152.4px ;
    height: 30px ;
    justify-content: center; 
    display: flex;
    align-items: center;
    background-color: #272727;
    font-size: 16px;
    color: #ffffff;
    margin-right: 1px;
    margin-left: 1px;
    margin-top: -30px;
}

/*Control*/

.control {
    margin-top: 20px;
    display: flex;
    margin-right: 10px;
    
}

.controlbutton{
    margin-top: 15px;
    margin-right: 10px;
    margin-left: 10px;
    height: 30px;
}

.allcontrol{
    display: flex;

}

.bluesidecontrol{
    margin-right: 10px;

}
.bluesidepick{
    margin-right: 10px;
}
.bluesideban{
    margin-right: 100px; 
}

.bluelast{
    margin-left: 100px;
}

.redsidecontrol{
    margin-right: 10px;
}

.redsidepick{
    margin-right: 10px;
}

.bluesideban{
    margin-right: 100px; 
}

.redlast{
    margin-left: 100px;
}
/* Dropdown */

.dropdown-container {
    position: relative;
    width: 100px;
    margin-bottom: 10px;
}

.dropdown {
    width: 100%;
    padding: 8px;
}

.dropdown-items {
    position: absolute;
    width: 100%;
    max-height: 100px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 1;
}

.dropdown-item {
    padding: 8px;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f0f0f0;
}

/* Animasi Fly-In dan Fly-Out */
.fly-in {
    animation: flyIn 1.5s ease-in-out;
}

.fly-out {
    animation: flyOut 1.2s ease-in-out;
}

/* Keyframes untuk animasi */
@keyframes flyIn {
    0% {
        opacity: 1;
        transform: translateY(250px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes flyOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 1;
        transform: translateY(650px);
    }
}

/* Style untuk gambar */
.image-display img {
    max-width: 100%;
    height: auto;
    
    
}

/*aaa*/
.container {
    
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
}
.input-container, .image-container, .button-container, .checkbox-container {
    
    margin: auto;
    
    
}
.image-container img {
    justify-content: space-around;
    width: 83.3px; /* Lebar gambar */
    height: 80px; /* Tinggi gambar */
    margin: 7px;
    object-fit: contain;
}

.wimg{
    width: 27px;
    height: 10px;
    margin-top: -1px;
    background-color: grey;
    overflow: hidden;
}


.image-container img:hover {
    transform: scale(1.05);
}
.team-name-display {
    font-size: 50px;
    font-weight: normal ;
    text-align: center;
    margin-top: 13px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    
}
.input-container input, .button-container button, .checkbox-container label {
    padding: 8px;
    font-size: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
}