.background-warning {
    background: yellow; /* Atau kode warna lain untuk kuning */
}
.active-button-red{
    background : yellow;
    color : white !important;
}
.active-button-peringatan{
    background : red;
    color : white !important;
}
.active-button-blue{
    background : blue;
    color : white !important;
}
.item-a {
    grid-area: imageA;
}

.item-b {
    grid-area: imageB;
}

.item-c {
    grid-area: header;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.item-d {
    grid-area: teamOneName;
}

.item-e {
    grid-area: round;
    text-align: right;
}

.item-f {
    grid-area: teamTwo;
}

.con {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
    grid-template-areas: 
    "imageA header header header header header imageB"
    "imageA teamOneName round . teamTwo teamTwo imageB"
    "bottom bottom bottom bottom bottom bottom bottom";
}

.item-bawah {
    grid-area: bottom;
}

.row {
    width: 100%;
}

#fotoB {
    float: right;
}

.round {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.5fr 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas: 
    "boxA skorA skorA mid skorB skorB boxB"
    "boxC skorA skorA mid skorB skorB boxD"
    "boxE skorA skorA mid skorB skorB boxF"
    "boxG boxH boxI boxJ boxK boxL boxM"
    "boxN boxO boxP boxQ boxR boxS boxT"
    ;
}

.boxa {
    grid-area: boxA;
}

.boxb {
    grid-area: boxB;
}

.boxc {
    grid-area: boxC;
}

.boxd {
    grid-area: boxD;
}

.boxe {
    grid-area: boxE;
}

.boxf {
    grid-area: boxF;
}

.boxg {
    grid-area: boxG;
}

.boxh {
    grid-area: boxH;
}

.boxi {
    grid-area: boxI;
}

.boxj {
    grid-area: boxJ;
}

.boxk {
    grid-area: boxK;
}

.boxl {
    grid-area: boxL;
}

.boxm {
    grid-area: boxM;
}

.boxn {
    grid-area: boxN;
}

.boxo {
    grid-area: boxO;
}

.boxp {
    grid-area: boxP;
}

.boxq {
    grid-area: boxQ;
}

.boxr {
    grid-area: boxR;
}

.boxs {
    grid-area: boxS;
}

.boxt {
    grid-area: boxT;
}

.mid {
    grid-area: mid;
}

.skorA {
    grid-area: skorA;
}

.skorB {
    grid-area: skorB;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.2); 
    height: 80px;
}

.boxperingatan,.boxteguran,.boxbinaan {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.2); 
    height: 80px;
    width: 130px;
}

.flex{
    display: flex;
}

.border-custom {
    border: 1px solid rgba(0,0,0,0.2);
}

.box-2 {
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-wrap: wrap;
}
#startCountdown {
    background-color: #4CAF50; 
    border: none;
    color: white; 
    padding: 15px 32px; 
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}


#startCountdown:hover {
    background-color: #45a049;
}
#refreshMonitor,#refreshJuri {
    background-color: #5b63d5; 
    border: none;
    color: white; 
    padding: 15px 32px; 
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}


#refreshMonitor,#refreshJuri:hover {
    background-color: #6d67c6;
}
#pauseCountdown {
    display: none;
    background-color: red; 
    border: none;
    color: white; 
    padding: 15px 32px; 
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}


#pauseCountdown:hover {
    background-color: rgb(177, 16, 16);
}
.nm_biru,.nm_merah{
    font-size: 28px;
}