body {
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
        background-image:url('https://peidarts.org/themes/contrib/tara_peidarts/css/images/body-bg.png');
      }

       header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        background-color: #008000; /* Dartboard Green */
        color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      table{box-shadow: 2px 2px 2px #888;width:100%;}
      tr.top8{background-color:#c6e0b4;}
      tr.top9{background-color:#70ad47;}
      tr.top16{background-color:#ffe699;}
      tr.top24{background-color:#b4c6e7;}
      tr.top32{background-color:#d9e1f2;}
      tr.top40{background-color:#d9d9d9;}

      th.tabledefault,th.besttwoandattendance,th.position,th.name{background-color:#e8e8e8;}
      .peirankings tr:nth-child(even) {
          background-color: #f3f3f1;
        }

      /**/peirankings td, .peirankings th{background-color:#f3f3f1}
      td{padding:3px 5px;vertical-align: middle;}
      th.Place1, th.Points1, th.SectionPoints1, th.FullRankPoint1, th.Rank1, td.Place1, td.Points1, td.SectionPoints1, td.FullRankPoint1, td.Rank1,th.qualifier1,th.date1,
      th.highestpts, td.highestpts, th.highestq3, td.highestq3,th.highestq2, td.highestq2,th.highestq1, td.highestq1,th.highestyear{background-color:#f8cbad;}
      th.Place2, th.Points2, th.SectionPoints2, th.FullRankPoint2, th.Rank2, td.Place2, td.Points2, td.SectionPoints2, td.FullRankPoint2, td.Rank2,th.qualifier2,th.date2, 
      th.secondhighestpts, td.secondhighestpts, th.secondhighestq3, td.secondhighestq3,th.secondhighestq2, td.secondhighestq2,th.secondhighestq1, td.secondhighestq1,th.secondhighestyear{background-color:#b4c6e7;}
      th.Place3, th.Points3, th.SectionPoints3, th.FullRankPoint3, th.Rank3, td.Place3, td.Points3, td.SectionPoints3, td.FullRankPoint3, td.Rank3,th.qualifier3,th.date3, 
      th.priorpts, td.priorpts, th.prior5, td.prior5,th.prior4, td.prior4,th.prior3, td.prior3, th.prior2,td.prior2, th.prior1,td.prior1,th.prioryears{background-color:#c6e0b4;}
      th.Attendance,td.Attendance,td.RankScore,th.totalpoints{background-color:#ffe699;}
      td.stat{text-align:center;width:50px;}
      td.RankScore{font-weight:bold;font-family:'Georgia';font-size:1.1em}
      td.currentrank, td.prevrank,td.Events{text-align:center}
      td.move{text-align:right;}
      .rankingplayers td.Score,.rankingplayers th.Score, td.RankScore,td.Rank{text-align:center;}
      .rankingplayers td.Score,.rankingplayers th.Score

      .center{text-align:center;}
      td.highestpts,td.secondhighestpts,td.priorpts{font-weight:600;/*font-style: italic;*/}
      .bold{font-weight:bold;}


      .tabheader{
    font-family: Georgia;
    font-weight: bold;
    margin: 12px;
    }
    .tabs {
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #ddd;
        background-color: #f9f9f9;
        padding: 10px 0;
    }

    /* Individual tab item styling */
    .tabs .tab-item {
        margin: 0 6px;
    }

    /* Link styling */
    .tabs .tab-item a {
        display: block;
        padding: 10px 20px;
        border-radius: 5px;
        background-color: #ffffff;
        color: #333;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
        transition: background 0.3s ease, color 0.3s ease, box-shadow 0.2s ease;
    }

    /* Hover effect for links */
    .tabs .tab-item a:hover {
        background-color: #e0f2ff;
        color: #007acc;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
    }

    /* Active tab styling */
    .tabs .tab-item a.active {
        background-color: #007acc;
        color: #ffffff;
        border-bottom: 2px solid #005fa3;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
    }

    .tabs.level2{font-size:0.8em;}
    /* Responsive adjustments */
    @media (max-width: 600px) {
        .tabs .tab-item a {
            margin: 0 4px;
            padding: 8px 12px;
        }
    }

      .logo {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      

      .title {
        font-size: 1.5rem;
        font-weight: bold;
      }
      .page{max-width:1440px;margin:0px auto;background-color:#fff;padding:20px;overflow:hidden;}
      .addremovebutton{display:block;font-size:1.3em;border:1px solid #ccc;text-align:center;margin:0px;text-decoration:none;}
      .aavailable{color:#fff;background-color:red;}

      .triangle-up {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid green; /* Triangle color */
    position: relative;
    float:left;
    margin-left:1px;
}

.triangle-up::after {
    content: "";
    position: absolute;
    left: -9px;
    top: -3px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 18px solid black; /* Border color */
    z-index: -1;

}

.triangle-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 16px solid #e3292e; /* Triangle color */
    position: relative;
    float:left;
    margin-left:1px;
}

.triangle-down::after {
    content: "";
    position: absolute;
    left: -9px;
    top: -4px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 18px solid black; /* Border color */
    z-index: -1;
}
.rectangle {
    width: 16px;
    height: 4px;
    background-color: #f9dfbc;
    border: 1px solid #ccc;
    display: inline-block;
    float: left;
    margin-top: 6px;
}




.qualifierdivisions {
    flex: 1;
    background: #f9f9f9;
    
    width:58%;
    float:left;
}
.qualifierdivisionswrapper{padding:20px;border-radius: 8px;
    border: 1px solid #ddd;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.qualifierdivisions h2 {
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    margin-bottom: 15px;
    margin-top:0px;
    padding-top:0px;
}

.division {
    background: #fff;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 4px solid #555;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.rankingplayers {
    flex: 2;
    float:right;
    width:40%;
   

}
.rankingplayerswrapper{padding:20px;background: #ffffff;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    /*height:470px;
    overflow-y:scroll;*/
}
.rankingplayers h2 {
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    margin-bottom: 15px;

}

.rankingplayers table {
    width: 100%;
    border-collapse: collapse;
}

.rankingplayers th, .rankings td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.rankingplayers th {
    background: #333;
    color: white;
}

.rankingplayers tr:nth-child(even),.qualifiertesttable tr:nth-child(even) {
    background: #f2f2f2;
}



    /* Hide the default radio button */
        .qualifierdivisionsform input[type="radio"] {
            display: none;
        }

        /* Style the label as a button */
        .qualifierdivisionsform .radio-btn {
            display: inline-block;
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            border: 2px solid #333;
            background-color: #f0f0f0;
            border-radius: 5px;
            transition: all 0.2s ease;
        }

        /* Change appearance when selected */
        .qualifierdivisionsform input[type="radio"]:checked + .radio-btn {
            background-color: #007bff;
            color: white;
            border-color: #0056b3;
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        /* Add hover effect */
        .qualifierdivisionsform .radio-btn:hover {
            background-color: #ddd;
        }
        .qualifierdivisionsform{text-align:center;}
        .qualifierdivisionsform label{width:100px;}

        .importqualifier{width:40%;margin:0px auto;}
        .importqualifier textarea{width:100%;}
        .adminpage h2{text-align:center;}

        .adminpage td.Place{text-align:center}
        .adminpage td.SectionPoints{text-align:center}
        .adminpage td.Points{text-align:center}
        .adminpage td.Total{text-align:center}
        .adminpage td.Rank{text-align:center}
        .adminpage .qualifiertesttable{width:50%;margin:0px auto;}

        td.highlighttop{border:2px solid #dc3434;}