.bracket-container{
          width: 100%;
          max-width: 100%;
          margin:  5px 0;
        }
.liner{
  display: flex;
}


         .match-hazfi{
            width: 20%;
            border: none;
            border-radius: 12px;
            padding: 4px 6px;
            text-align: center;
            background: #eaeaea;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            overflow: hidden;
            text-decoration: none;
        }
        
        .match-hazfi:hover, .match-hazfi:hover{
          background: #bfa5a5;
        }

        .teams {
            display: flex;
            justify-content: space-evenly;
            width: 100%;
        }

        .team-a, .team-b {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            gap: 0px;
        }

        .team-a .flag, .team-b .flag {
            font-size: 20px;
            line-height: 1.2;
        }

        .team-a .name, .team-b .name {
            width: 98%;
            /* border: 0.4px solid red; */
            font-size: 10px;
            font-weight: 500;
            color: #2c2c2c;
            white-space: nowrap;
            overflow: hidden;
            max-width: 100%;
            display: block;
            text-align: center;

        }

        .team-a .name{
            margin-left: 2%;
        } 
        .team-b .name {
            margin-right: 2%;
        }

        .match-date {
            font-size: 9px;
            color: #888;
            margin-top: 2px;
            width: 100%;
            display: flex;
            justify-content: space-evenly;
        }
        .color-black{
            color: #0f0808;

        }
        .match-date span{
            color: #0f0808;
            font-size: 9px;
        }

        #ft-1, #fb-1 {
            margin-right: 5%;
            margin-left: 1%;
        }

        #ft-2, #fb-2 {
            margin-left: 4%;
        }

        #ft-3, #fb-3 {
            margin-right: 4%;
        }

        #ft-4,#fb-4 {
            margin-left: 5%;
            margin-right: 1%;
        }

        /* ع©ظ„ط§ط³ ظ„ط§غŒظ†ط± ط¯ظˆظ… - ط¨ط¯ظˆظ† ط¨ع©â€Œع¯ط±ط§ظ†ط¯ */
        .line-10 {
            display: flex;
        }

        .line-10 > div:nth-child(1) {
            width: 15%;
            padding: 4px 6px;
            height: 20px;
        }

        .line-10 > div:nth-child(2) {
            width: 21%;
            border-left: 2px solid #5d4037;
            border-right: 2px solid #5d4037;
            border-bottom: 2px solid #5d4037;
            border-top: none;
            border-radius: 0 0 12px 12px;
            padding: 4px 6px;
            height: 20px;
        }

        .line-10 > div:nth-child(3) {
            width: 28%;
            padding: 4px 6px;
            height: 20px;
        }

        .line-10 > div:nth-child(4) {
            width: 21%;
            border-left: 2px solid #5d4037;
            border-right: 2px solid #5d4037;
            border-bottom: 2px solid #5d4037;
            border-top: none;
            border-radius: 0 0 12px 12px;
            padding: 4px 6px;
            height: 20px;
        }

        .line-10 > div:nth-child(5) {
            width: 15%;
            padding: 4px 6px;
            height: 20px;
        }



        .line-1 {
            display: flex;
        }

        .line-1 > div:nth-child(1) {
            width: 15%;
            padding: 4px 6px;
            height: 20px;
        }

        .line-1 > div:nth-child(2) {
            width: 21%;
            border-left: 2px solid #5d4037;
            border-right: 2px solid #5d4037;
            border-top: 2px solid #5d4037;
            border-bottom: none;
            border-radius: 12px 12px 0 0;
            padding: 4px 6px;
            height: 20px;
        }

        .line-1 > div:nth-child(3) {
            width: 28%;
            padding: 4px 6px;
            height: 20px;
        }

        .line-1 > div:nth-child(4) {
            width: 21%;
            border-left: 2px solid #5d4037;
            border-right: 2px solid #5d4037;
            border-top: 2px solid #5d4037;
            border-bottom: none;
            border-radius: 12px 12px 0 0;
            padding: 4px 6px;
            height: 20px;
        }

        .line-1 > div:nth-child(5) {
            width: 15%;
            padding: 4px 6px;
            height: 20px;
        }



        /* ظ„ط§غŒظ†ط± ط¬ط¯غŒط¯ - ط¨ط¯ظˆظ† ظ…ط§ط±ط¬غŒظ† ط¨ط§ظ„ط§ ظˆ ط¨ط¯ظˆظ† ط¨ع©â€Œع¯ط±ط§ظ†ط¯ */
        .line-2 {
            display: flex;
        }

        .line-2 > div:first-child {
            width: 25.5%;
            height: 20px;
            border-left: 2px solid #5d4037;
            padding: 4px 6px;
            margin-left: auto;
        }

        .line-2 > div:last-child {
            width: 25.5%;
            height: 20px;
            border-right: 2px solid #5d4037;
            padding: 4px 6px;
            margin-right: auto;
        }

        /* ظ„ط§غŒظ†ط± ط¬ط¯غŒط¯ ط¨ط§ ط¯ظˆ طھط§ match - ط¨ط§ ع©ظ„ط§ط³ match */
        .match-liner {
            display: flex;
        }

        .match-liner > .match-hazfi:first-child {
            margin-right: 15.5%;
            margin-left: auto;
        }

        .match-liner > .match-hazfi:last-child {
            margin-left: 15.5%;
            margin-right: auto;
        }


        .t-b-t {
            display: flex;
        }

        .t-b-t > .match-hazfi:first-child {
            margin-right: 15.5%;
            margin-left: auto;
        }

        .t-b-t > .match-hazfi:last-child {
            margin-left: 15.5%;
            margin-right: auto;
        }

     


        /* ظ„ط§غŒظ†ط± ط¬ط¯غŒط¯ ط¨ط§ غŒع© ط¯ط§غŒظˆ 49% - ظ‡ط§غŒ 20px */
        .line-8 {
            display: flex;
        }

        .line-8 > div {
            width: 49%;
            height: 20px;
            border-left: 2px solid #5d4037;
            border-right: 2px solid #5d4037;
            border-bottom: 2px solid #5d4037;
            border-top: none;
            border-radius: 0 0 12px 12px;
            padding: 4px 6px;
            margin-left: auto;
            margin-right: auto;
        }

        .line-3 > div {
            width: 49%;
            height: 20px;
            border-left: 2px solid #5d4037;
            border-right: 2px solid #5d4037;
            border-top: 2px solid #5d4037;
            border-bottom: none;
            border-radius: 12px 12px 0 0;
            padding: 4px 6px;
            margin-left: auto;
            margin-right: auto;
        }


        /* ظ„ط§غŒظ†ط± ط¬ط¯غŒط¯ ط¨ط§ غŒع© ط¯ط§غŒظˆ 2px ظˆ ط§ط±طھظپط§ط¹ 20px */
        .line-single {
            display: flex;
        }

        .line-single > div {
            width: 2px;
            height: 20px;
            border-radius: 12px;
            background: #5d4037;
            margin-left: auto;
            margin-right: auto;
        }

        /* ظ„ط§غŒظ†ط± ط¬ط¯غŒط¯ ط¨ط§ غŒع© match ظˆ ظ…ط§ط±ط¬غŒظ† auto ط§ط² ط¯ظˆ ط·ط±ظپ */
        .t-b-o {
            display: flex;
            position: relative;
        }

        .t-b-o > .match-hazfi {
            margin-left: auto;
            margin-right: auto;
        }

        /* ظ„ط§غŒظ†ط± ط¬ط¯غŒط¯ ط¨ط§ غŒع© ط¯ط§غŒظˆ 2px ظˆ ط§ط±طھظپط§ط¹ 20px - ط¯ظˆط¨ط§ط±ظ‡ */
        .single-line {
            display: flex;
        }

        .single-line > div {
            width: 2px;
            height: 20px;
            border-radius: 12px;
            background: #5d4037;
            margin-left: auto;
            margin-right: auto;
        }


        /* ع©ظ„ط§ط³ ط¬ط¯غŒط¯ breaket */
        .breaket {
            display: flex;
        }

        .breaket > div {
            width: 2px;
            height: 20px;
            border-radius: 12px;
            background: #5d4037;
            margin-left: auto;
            margin-right: auto;
        }


        .tmp-linear{
          position: absolute;
          left: 20px;
        }
        
         .tpm-linear{
           width: 25%;
           display: flex;
           flex-direction: column;
           border: 1px solid red;
          text-align: center;
        } 
        .tpm-linear p{
        }
        
        
        #tmp{
          margin-top: 10px;
          width: 20%;
          position: absolute;
          left: 10px;
        }
        
        #tmp::before {
    content: "ط±ط¯ظ‡ ط¨ظ†ط¯غŒ";
    position: absolute;
    top: -30px;
    font-weight: bold;
    color: #2c3e50;
    font-size: 12px;
    font-family: Arial, sans-serif;
   width: 20vw;
   text-align: center;
          
        }
        
        .cup-img{
          align-items: center;
          width: 30%;
          position: absolute;
          flex-direction: column;
        }
        
        .cup-img p{
          width: 100%;
          text-align: center;
          color: #a69a9a;
        }
        
        .cup-pos-top{
          display: flex;
            left: 35%;
            top: -120px;
        }
        .cup-pos-right{
          display: flex; 
           top: 0;
            left: 60%;
        }
        
        .team-low{
          text-decoration: line-through;
            text-decoration-color: red;
            text-decoration-thickness: 1px;
     
        }


        
       
       /* 
       .f-t, .line-10, .line-9, .t-t, .line-8, .line-7, .o-t, .line-6 , .o-b, .line-10, .line-9, .f-b, .line-1, .line-2{
          display: none;
        
        }*/