body{font-family:'Open Sans',sans-serif;margin:0;padding:0;background-color:#f0f0f0}
.header {
    background-color: #162238;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    height: 25px;
    align-items: center
}
.header-title{font-size:1.2em;font-weight:600}
.header-links a{color:#fff;text-decoration:none;margin-left:20px;font-size:1em;transition:color .3s}
.header-links a:hover{color:#ddd}
.section-header {
    margin: 0 .6em .5em;
    border-bottom: 2px solid #162238;
    font-weight: 600;
    font-size: .9em;
    box-sizing: border-box;
    padding: .5em 0;
    color: #162238;
}
.button{margin-left:.5em;margin-bottom:10px;padding:10px 15px;background-color:#b84646;color:#fff;border:none;outline:none;cursor:pointer;border-radius:5px;font-size:smaller;display:inline-block;text-decoration:none}
.section-header .button-link,.button-link{margin-left:0!important;margin-bottom:0!important;padding:0 5px;color:#d90c0c;border:none;outline:none;cursor:pointer;border-radius:5px;font-size:smaller;display:inline-block;text-decoration:none;font-size:small}
.accordions-wrapper{display:flex;flex-direction:column;align-items:center;gap:.5em;width:100%;box-sizing:border-box}
.accordion-container{border-radius:5px;width:100%;max-width:600px;box-sizing:border-box;padding-bottom:3px}
#accordion-container{min-height:400px!important}
.accordion-item{background-color:#fff;border-radius:5px;margin:1px 5px;border:solid 1px #b9c9dcab}
    .accordion-item.active {
        border: solid 1px #5694dce8;
    }

.accordion-header{padding:9px;color:#333;cursor:pointer;border-radius:5px;justify-content:space-between;align-items:center;font-weight:600;font-size:small;position:relative;padding-left:35px;padding-right:22px}
.accordion-header:hover{background-color:#d0d0d030;color:#222}
.accordion-header.active{border-radius:4px 4px 0 0;border-bottom:none;background-color:#d0d0d030}
    .accordion-header img {
        float: left;
        /* padding-top: 0px; */
        padding-right: 3px;
        opacity: 0.5;
    }
.accordion-header::after {
    content: '❯'; /* Heavy right-pointing angle quotation mark ornament */
    position: absolute;
    right: 8px; /* Positioned to the left of teamrank */
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease-in-out;
    font-size: 1.1em; /* Arrow size */
    color: #938f8f; /* Arrow color */
}
.accordion-header.active::after {
    transform: translateY(-50%) rotate(90deg); /* Rotates to point downwards when active */
}
    .accordion-header img {
        float: left;
        /* padding-top: 0px; */
        padding-right: 3px;
        opacity: 0.5;
    }

 .accordion-header .team-points-count,
.accordion-header .today-score,
.accordion-header .teamrank,
.accordion-header .today-rank {
    pointer-events: none; /* Allows clicks to pass through to the header */
}

.accordion-content pre {
    width: 100%;
    white-space: pre-wrap;
}
.accordion-content {
    padding: 10px 5px;
    display: none;
    transition: max-height .8s ease,padding .3s ease;
    overflow: hidden;
    max-height: 0;
}
    .accordion-content.active {
        max-height: 850px;
        padding: 10px 5px;
        border-radius: 0 0 5px 5px;
        overflow: visible;
        display: inline;
    }
.accordion-content .canvas{margin-top:20px}
.teamrank{position: absolute;
    left: 15px;
    /* font-family: sans-serif; */
    font-size: smaller;
    line-height: 18px;
    color: #746e6e;
    font-weight: 600;
    width: 15px;
    text-align: right;}
.today-rank{position:absolute;left:5px;font-size:11px;line-height:18px;font-weight:800}
.today-rank.positive{color:green}
.today-rank.nagetive{color:red!important}
#accordion-title-input{margin-right:10px;padding:8px 10px;border:1px solid #ccc;border-radius:5px;outline:none;font-size:1em}
#accordion-title-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff40}
.close-accordion-button,.save-to-server-button{cursor:pointer;transition:color .2s;border:solid 1px #3084ce;padding:6px;border-radius:15px;background:#f1d9d9;font-size:smaller;margin-top:20px;color:#3084ce}
.close-accordion-button:hover{color:#333}
.add-accordion-button:hover{background-color:#218838}
.player-score-table{width:100%}
    .player-score-table th, .player-score-table td {
        white-space: nowrap;
        padding: 3px 2px;
        border-bottom: 1px solid #d3d3d3 !important;
        font-size: 12px;
        text-align: left
    }
.player-score-table th,.player-score-table td:empty{width:0;padding:0}
.number-cell{text-align:right!important}
.captain-cell{font-weight:700}
.player-points-count, .team-points-count {
    display: inline-block;
    float: right;
    font-family: 'Open Sans';
    color: #1d5d97;
   
}
.player-points-count {
    width: 30px;
    text-align: right;
    margin-left: 10px;
}
    .player-teamcode {
        float: right;
    }
.today-score {
    font-family: 'Open Sans';
    display: inline-block;
    float: right;
    font-size: 11px;
    color: #097609;
    font-weight: 700;
    line-height: 17px;
    margin-right: 3px;
}
tr.scorecard.live{background-color:#fffeed}
tr.scorecard.removed-player{background:#fff!important}
tr.scorecard.live td a{position:relative}
tr.scorecard.live td a::after{content:'';position:absolute;top:50%;right:-10px;transform:translateY(-50%);width:6px;height:6px;background-color:green;border-radius:50%;animation:blink 2.5s infinite}
tr.scorecard.removed-player td a::after{display:none!important}
tr.scorecard.removed-player td{border-bottom:none!important;opacity:.65;background:#fff!important}

.live-indicator-span {
    content: '';
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: #00800091; /**#959695*/
    border-radius: 50%;
    /*animation: blink 1.5s infinite;*/
    margin-left: 3px;
    display: inline-block;
}

.tabs-header {
    display: flex;
    border-bottom: 2px solid #ccc;
}

.tab-button {
    background: none;
    border: none;
    padding: 0px;
    padding-right: 15px;
    width: 140px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    padding-left: 0px;
    text-align: left;
    cursor: pointer;
    font-weight: normal;
}

    .tab-button.active {
        font-weight: bold;
    }

.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
    }

@keyframes blink {
0%,100%{opacity:1}
50%{opacity:0}
}
.scorecard a,.scorecard a:visited,.scorecard a:active{text-decoration:none!important;color:#0e71c8;text-decoration:none!important;color:#0e71c8}
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#00000080}
.modal-content {
    background-color: #fefefe;
    margin: .5EM auto;
    /* padding: 0; */
    border: 1px solid #888;
    /* width: 96%; */
     max-width: 500px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 4px 8px 0 #0003 6px 20px 0 #00000030;
    height: 95%;
}
.modal-content2{background-color:#fff;margin:0;padding:0;border-radius:10px;box-shadow:0 2px 10px #0000001a;width:100%;height:90%;overflow:scroll;position:relative}
.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;padding-bottom:0}
.modal-header h2{margin:0;font-size:1.5em;color:#333}
.close-modal-button{position:absolute;top:10px;right:10px;cursor:pointer;font-size:1.5em;color:#888;transition:color .2s;border:none;background:none;padding:0;line-height:1}
.close-modal-button:hover{color:#333}
#player-select-container{margin-top:10px;padding:5px;border:1px solid #ddd;border-radius:5px;background-color:#f8f9fa}
#player-select-container label{display:block;margin-bottom:5px;font-weight:600;color:#555;font-size:smaller}
.player-checkbox-group{display:flex;flex-wrap:wrap;gap:5px}
.player-checkbox-group .player-checkbox-item{display:inline-flex;align-items:center;margin-right:0;margin-bottom:0;width:auto}
.player-checkbox-group .player-checkbox-item input[type="checkbox"]{margin-right:4px}
.player-checkbox-group .player-checkbox-item label{margin-right:0;font-weight:400;color:#343a40;margin-bottom:0}
.captain-vice-captain-container{margin-top:10px}
.captain-vice-captain-container select{width:100%;padding:8px;border:1px solid #ccc;border-radius:5px;margin-bottom:10px}
.create-team-button{padding:10px 15px;background-color:#28a745;color:#fff;border:none;outline:none;cursor:pointer;border-radius:5px;transition:background-color .3s;font-weight:600}
.create-team-button:hover{background-color:#218838}
.error-message{color:red;margin-top:10px}
.forecast-container{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;display:flex;gap:.5em;padding:0 .5em;box-sizing:border-box;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none;margin-bottom:1.5em}
.forecast-container::-webkit-scrollbar{display:none}
.day-panel{margin:auto; border:1px solid #ddd;border-radius:5px;background-color:#fff;box-shadow:0 2px 4px #0000001a;display:inline-block;vertical-align:top;margin-bottom:0}
.panel-content{padding:0}
.match-container{line-height:1.4;display:flex;flex-direction:column;flex-shrink:0;width:auto;min-width:320px;padding:5px 10px 10px;border:1px solid #eee;border-radius:5px;background-color:#f9f9f9;box-shadow:0 1px 2px #0000001a;text-decoration:none;color:inherit;text-align:center}
.date{font-size:10pt;color:#7a0000;margin-bottom:.3em}
.team-name{word-wrap:break-word;font-weight:600;max-width:100%;text-align:left;font-size:smaller}
#upcoming-matches{font-size:small;padding:10px}
#live-matches{padding:.5em;margin-bottom:0px!important;padding-bottom:0px!important}
    #live-matches .day-panel { border:solid 1px red !important; }
    #live-matches:empty {
        display: none
    }
    #live-matches .match-container{ padding-bottom: 1px !important;}
    .matchstatus {
        color: rgb(101, 100, 100);
        font-size: 12px;
        font-style: italic;
        float: right;
        line-height: 18px;
        display: inline-block;
        white-space: pre-line;
    }
#history-legends a{font-size:smaller;display:inline-block;padding:3px 15px;margin:3px;border-radius:5px;text-decoration:none;color:#000}
#leading-batsman,#leading-bowlers{padding:5px}
#leading-bowlers .accordion-container,#leading-batsman .accordion-container{background-color:inherit!important}
#leading-batsman table td,#leading-bowlers table td{padding:4px;font-size:12px;border:1px solid #f0f0f0}
.loading-indicator{background-color:transparent;color:#000;padding:0;border-radius:0;z-index:1000;display:none;align-items:center}
.loading-indicator.show{display:flex}
.spinner{border:4px solid #0000004d;border-top:4px solid #000;border-radius:50%;width:10px;height:10px;animation:spin 1.2s linear infinite;margin-bottom:0;margin-right:5px}
@keyframes spin {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.csk{background:linear-gradient(to right,#0069ff,#FFD700,#b0ae2c);-webkit-background-clip:text;color:transparent;text-decoration:none}
.mi{background-image:linear-gradient(to right,#005DAA,#00C0F5);-webkit-background-clip:text;color:transparent;text-decoration:none}
.rr{background-image:linear-gradient(to right,#EC4899,#FF66C4);-webkit-background-clip:text;color:transparent;text-decoration:none}
.rcb{background-image:linear-gradient(to bottom,#0e0d0de8,#e20c0c);-webkit-background-clip:text;color:transparent;text-decoration:none}
.kkr{background-image:linear-gradient(to right,#3A045C,#FFD700,#FFD700);-webkit-background-clip:text;color:transparent;text-decoration:none}
.srh{background-image:linear-gradient(to bottom,#f95302,#f95302,#302c2c);-webkit-background-clip:text;color:transparent}
.gt {
    background-image: linear-gradient(to right, #2b2d31, #494b54, #a9a9a7);-webkit-background-clip:text;
    color: transparent
}
.dc{background-image:linear-gradient(to right,#3065cd,#102754,#3065cd);-webkit-background-clip:text;color:transparent;text-decoration:none}
.pbks{background-image:linear-gradient(to right,#ca0000,#a08d2a);-webkit-background-clip:text;color:transparent;text-decoration:none}
.lsg{background:linear-gradient(to right,#fa8f70,#8be24c,#00A650);-webkit-background-clip:text;color:transparent;text-decoration:none}

.csk-border {
    border: 1px solid transparent; /* Adjust width as needed */
    border-image-source: linear-gradient(to right, #0069ff, #FFD700, #b0ae2c);
    border-image-slice: 1;
    /* Add other styles like padding, background etc. */
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
  }
  
  .mi-border {
    border: 1px solid transparent;
    border-image-source: linear-gradient(to right, #005DAA, #00C0F5);
    border-image-slice: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
  }
  
  .rr-border {
    border: 1px solid transparent;
    border-image-source: linear-gradient(to right, #EC4899, #FF66C4);
    border-image-slice: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
  }

  .rcb-border {
    border: 1px solid transparent;
    border-image-source: linear-gradient(to bottom,#0e0d0de8,#e20c0c);
    border-image-slice: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
  }

  .kkr-border {
    border: 1px solid transparent;
    border-image-source: linear-gradient(to right,#3A045C,#FFD700,#FFD700);
    border-image-slice: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
  }

  .srh-border {
    border: 1px solid transparent;
    border-image-source: linear-gradient(to bottom,#f95302,#f95302,#302c2c);
    border-image-slice: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
  }

  .gt-border {
    border: 1px solid transparent;
    /* Using the gradient from fantacy.css */
    border-image-source: linear-gradient(to right,#464749,#494b54,#a9a9a7);
    border-image-slice: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px !important;
  }
  
  .dc-border {
    border: 1px solid transparent;
    border-image-source: linear-gradient(to right,#3065cd,#102754,#3065cd);
    border-image-slice: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px !important;
  }

  .pbks-border {
    border: 1px solid transparent;
    border-image-source: linear-gradient(to right,#ca0000,#a08d2a);
    border-image-slice: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px !important;
  }

  .lsg-border {
    border: 1px solid transparent;
    border-image-source: linear-gradient(to right,#fa8f70,#8be24c,#00A650);
    border-image-slice: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
  }

@media (min-width:768px) {
.accordions-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:.5em;align-items:start;padding:.5em}
.accordion-container{max-width:none}
}
@media (min-width:1200px) {
.accordions-wrapper{grid-template-columns:repeat(3,1fr);gap:25px;padding:20px}
}
.header-links span{margin:0;font-size:smaller;line-height:1.5}
.header-links a{color:#dbde46;text-decoration:underline;font-size:smaller}
.header-links a:hover{color:#ddd}
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0009}
.modal-header{padding:10px 15px;background-color:#314466;color:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;border-top-left-radius:5px;border-top-right-radius:5px}
.modal-header h4{margin:0;font-size:1.1em}
.close-modal-button{color:#fff;font-size:28px;font-weight:700;background:none;border:none;cursor:pointer;padding:0 5px;line-height:1}
.close-modal-button:hover,.close-modal-button:focus{color:#ccc;text-decoration:none}
.header-link-button{background:none;border:none;color:#fff;text-decoration:underline;cursor:pointer;font-size:1em;padding:0;margin:0}
.header-link-button:hover{color:#ddd}


/*#series-points .accordion-item {
    background-color: #e6c2a526 !important;
}
*/
    #series-points .accordion-item.eliminated {
        opacity: .5;
        background-color:transparent;
    }

    #series-points .accordion-header {
        font-size: 13px;
        padding: 8px 22px 8px 20px;
    }

#series-points .teamrank {
    left: 0px !important;
    width: 15px;
    text-align: right;
    line-height: 17px;
}

#series-points .MatchesPlayed,
#series-points .MatchesLost,
#series-points .MatchesWon,
#series-points .NRR {
    font-weight: normal;
    font-size: 10px;
    line-height: 19px;
    width: 29px!important;
}

#series-points .NRR {
    width: 40px!important;
}
    #series-points .MatchesPlayed {
        color: #333 !important
    }

#series-points .MatchesLost{
    color: red !important;
}

#series-points .accordion-header .team-points-count {
    display: inline-block;
    width: 35px;
    text-align: right;
}