@keyframes showerror {
    0% {
        opacity: 0;
        top: 15px;
    } 50% {
        top: -5px;
    } 100% {
        opacity: 1;
        top: 5px;
    }
}

.show-error.error-container {
    display: inline-block;
    animation: showerror 0.4s forwards;
}

.error-container {
    display: none;
    position: absolute;
    top: 25px;
    background-color: #faffe4;
    padding: 10px 20px;
    border-radius: 6px;
    border: solid 1px #eaeaea;
    animation: showerror 0.4s forwards;
    color: #7A9900;
    z-index: 20;
}

.error-container::before {
    content: "\f12a";
    background-color: #7A9900;
    padding: 5px;
    border-radius: 50px;
    color: #FFF;
    margin-right: 10px;
    display: inline-flex;
    width: 12px;
    max-height: 12px;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}

.match,
.wmatch,
.practice {
    background-color: #FFF;
    border: solid 1px #eaeaea;
    border-radius: 8px;
    padding: 20px;
    
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: max-content;
}

.match:not(.live-match) .player-score,
.wmatch:not(.live-match) .player-score {
    padding: 5px 0;
}

.match .player,
.wmatch .player,
.practice .player {
    display: flex;
    align-items: center;
    width: 100%;
}

.match .player:nth-of-type(1),
.wmatch .player:nth-of-type(1) {
    border-bottom: solid 1px #eaeaea;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.match .player:nth-of-type(2),
.wmatch .player:nth-of-type(2) {

    padding-top: 10px;
}

.match .player-images .portrait,
.wmatch .player-images .portrait,
.practice .player-images .portrait {
    border: solid 1px #f7f7f7;
    border-radius: 50px;
    width: 60px;
    height: 60px;
    object-fit: cover;
    max-width: max-content;
    background-color: #D8D8D8;
}

.match .player-details,
.wmatch .player-details,
.practice .player-details {
    margin: 0 10px;
    width: 100%;
}

.match .player-name,
.wmatch .player-name,
.practice .player-name {
    font-family: "Itau Display - Bold", "Inter", sans-serif;
    /* font-weight: 600; */
    font-size: 16px;
    white-space: break-spaces;
    line-height: 130%;
    display: flex;
    align-items: center;
}

.doubles-match .player-images,
.doubles-draws .match .player-images {
    position: relative;
    display: flex; 
}

.doubles-match .player-images {
    max-width: 100px;
}

.doubles-match .player-images .portrait:nth-of-type(2),
.doubles-draws .match .player-images .portrait:nth-of-type(2) {
    position: relative;
    left: -20px;
}

.match .player-name i,
.wmatch .player-name i {
    color: #48A84E;
    margin: 0 5px;
}

.match .player-score,
.wmatch .player-score,
.practice .player-time {
    display: flex;
    align-items: center;
    font-family: "Itau Display", "Inter", sans-serif;
    /* font-weight: 600; */
    font-size: 15px;
    width: 100%;
    margin: 5px 0;
}

.match .player-score span,
.wmatch .player-score span,
.practice .player-time span {
    margin-right: 12px;
}

.match .winner .player-score.walkover,
.wmatch .winner .player-score.walkover {
    width: max-content;
    background-color: #FFDAC2;
    padding: 2px 6px;
    border-radius: 4px;
}

.match .match-status,
.match-wrapper .match-status,
.practice .match-status {
    position: absolute;
    top: -25px;
    left: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: "Inter";
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 500;
    color: #7C7C7C;
    width: 100%;
}

.match .match-status::after,
.match-wrapper .match-status::after ,
.practice .match-status::after {
    content: attr(data-after);
    margin-left: 5px;
    font-weight: 300;
    color: #A4A4A4;
}

.finished-match .match-status {
    color: #C15715;
}

.suspended-match .match-status {
    color: #9a0000;
}

.live-match .match-status,
.live-practice .match-status {
    top: -63px;
    color: #7A9900;
}

.focused-match .match-status {
    animation: focus-color 3s;

}

.live-match .serving {
    position: relative;    
}

.live-match .serving::after {
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    filter: hue-rotate(50deg) brightness(175%);
    background-repeat: no-repeat;
    background-size: 12px;
    background-image: url(https://s42493.pcdn.co/wp-content/uploads/2024/02/tennis-ball-icon.png);
    position: relative;
    right: 0;
    margin: 0 10px;
}

/* .live-match .serving::before {
    content: "";
    filter: hue-rotate(25deg) brightness(110%);
    background-image: url("https://s32151.p1238.sites.pressdns.com/wp-content/uploads/2023/09/loading.gif");
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: center;
    width: 20px;
    height: 50px;
    position: absolute;
    display: block;
    top: 0%;
    left: 90%;
    background-color: red;
} */

.live-match .match-status::before,
.live-practice .match-status::before {
    content: "";
    filter: hue-rotate(25deg) brightness(110%);
    background-image: url("https://s32151.p1238.sites.pressdns.com/wp-content/uploads/2023/09/loading.gif");
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: center;
    margin-right: 5px;
    display: inline-block;
    width: 15px;
    height: 50px;
    position: relative;
    top: 15px;
}

/* MATCH CONTAINER COLORS */
@keyframes focus-bg {
    0% {
        background-color: #FFF;

    } 5% {
        background-color: #F8FEFF;

    } 80% {
        background-color: #F8FEFF;

    } 100% {
        background-color: #FFF;
    
    }

}

@keyframes focus-live-bg {
    0% {
        background-color: #FDFFF4;

    } 5% {
        background-color: #F8FEFF;

    } 80% {
        background-color: #F8FEFF;

    } 100% {
        background-color: #FDFFF4;
    
    }

}


@keyframes focus-color {
    0% {
        color: #7C7C7C;

    } 5% {
        color: #0DB1D8;

    } 80% {
        color: #0DB1D8;

    } 100% {
        color: #7C7C7C;
    
    }
}

@keyframes focus-border {
    0% {
        border-color: #eaeaea;

    } 5% {
        border-color: #0DB1D8;

    } 80% {
        border-color: #0DB1D8;

    } 100% {
        border-color: #eaeaea;
    
    }
}

@keyframes focus-live-border {
    0% {
        border-color: #C3D774;

    } 5% {
        border-color: #0DB1D8;

    } 80% {
        border-color: #0DB1D8;

    } 100% {
        border-color: #C3D774;
    
    }
}

.live-match:not(.match-wrapper),
.match-wrapper.live-match .match,
.live-practice:not(.match-wrapper) {
    /* background-color: #FFF9EA;
    border-color: #DEBC5E; */
    background-color: #FDFFF4;
    border-color: #C3D774;
}

.live-match .player:first-of-type {
    /* border-color: #F4E3B6; */
    border-color: #E6F3AE;
}

.live-match .match-points {
    /* background-color: rgba(255, 187, 0, 0.15);
    color: #AD7F00; */
    background-color: rgba(187, 234, 0, 0.15);
    color: #647d00;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 6px;
    padding: 5px;
    margin-right: 10px;
}

.focused-match {
    animation: focus-bg 3s, focus-border 3s;
}

.live-match.focused-match {
    animation: focus-live-bg 3s, focus-live-border 3s;
}

.focused-match .player:first-of-type {
    animation: focus-border 3s;
}

.live-match.focused-match .player:first-of-type {
    animation: focus-border 3s;
}


/* MATCH TEXT COLORS */
.match .winner .player-name,
.wmatch .winner .player-name,
.match .player-name {
    color: #555;
}

.match .winner .player-score,
.wmatch .winner .player-score {
        color: #C15715;
}

.match .player-score,
.wmatch .player-score {
        color: #878787;
}

.finished-match .player-name:not(.winner .player-name) {
    color: #a5a5a5;
}

.finished-match .player-score:not(.winner .player-score) {
    color: #dbdbdb;
}

@media only screen and (max-width: 640px) {
    .match,
    .wmatch,
    .match-wrapper .match {
        padding: 12px;
        min-height: 150px;
    }

    .match-anchor .wmatch {
        min-height: 100%;
    }

    .match:not(.live-match) .player-score,
    .wmatch:note(.live-match) .player-score {
        padding: 0;
        margin: 2px 0 0 0;
    }
    
    .match .player:last-of-type,
    .wmatch .player:last-of-type {
            padding-top: 4px
    }
    
    .match .player-name,
    .match .player-score,
    .wmatch .player-name,
    .wmatch .player-score {
        font-size: 0.8em;
    }

    .doubles-match .player-images {
        max-width: 60px;
    }
    
    
    .match .player-images .portrait,
    .wmatch .player-images .portrait {
        width: 40px;
        height: 40px;
    }

    .live-match .match-points {
        margin-right: 8px;
        width: 20px;
        height: 20px;
    }

    .match .player-score span,
    .wmatch .player-score span {
            margin-right: 12px;
    }

    .match .match-status, 
    .match-wrapper .match-status {
        font-size: 10px;
    }
}