/*SETS & TIMER*/


#toolbox_wrapper-full-8{display:block;height:60px !important;text-align:center;margin:0;padding:0;}
#toolbox_wrapper_full{display:block;min-height:80px !important;margin:0;padding:10px;}

#toolbox_wrapper{
    display:block; 
    min-height:30px; 
    line-height:30px; 
    padding:10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: auto; 


} 
#toolbox_wrapper_center{display:block;min-height:30px !important;width:100%; margin:0 auto;padding:10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  overflow: auto;}


#toolbox_wrapper {
  display: flex;
  justify-content: center;
  gap: 20px; /* Optional spacing between boxes */
}

/* When there's more than one child, don't center */
#toolbox_wrapper:has(#tools-box:nth-child(2)) {
  justify-content: flex-start;
}



#tools-box        {display:block; width:50%;   float:left; margin:0; text-align:center !important; color:#666; text-transform: capitalize; padding: 0 0 10px 0; }
#tools-box-center {display:block; width:280px; float:none; margin: 0 auto; text-align:center !important; color:#666; text-transform: capitalize; }

#toolbox-center1{display:block;text-align:center;margin:0 auto;width:220px;background:none; height:50px;}
#toolbox-center2{display:block;text-align:center;margin:0 auto;width:420px;background:none; height:50px;}

#tools-box, #tools-box-center, #toolbox-center1, #toolbox-center2 {font-family:'Roboto Slab', Arial, sans-serif!important; font-size:16px!important; text-align: center!important; }

 

@media (max-width:768px){
    
    #tools-box {display:block; width:100%; }
    
    #toolbox_wrapper {
  display: block;
  justify-content: center;
}
}

.dareStopwatch {display:block;float:none; width:480px;margin: 0 auto;height:55px!important; text-align:center; font-family:'Pathway Gothic One', Arial, sans-serif!important; }


.dareStopwatch-universal {display:block;width:260px;margin:0 auto;min-height:200px; text-align:center}

.show_timer, .show_sets, .show_dd  {color:#666666;font-weight:bold;font-size:12px;cursor:pointer;}
a.show_timer, a.show_sets {color:#141414!important; text-decoration: none!important }

.ddDiv span {font-size: 20px; color: #CC0000 }
.ddDiv button, .ddDiv input {width: 30px !important; padding:0;margin:0; border: none; text-align: center } .ddDiv button.ddsave {width: 63px !important; margin: 2px 0 0 34px }


.setsWrapper   {display:block;width:420px;margin:0 auto;min-height:55px; text-align:center}


.setsDiv {
  text-align: center;
}

.setsWrapper {
  display: inline-flex;
  justify-content: center;
  gap: 10px; /* optional spacing between <li> items */
  padding: 0;
  margin: 0;
  list-style: none;
}

.dareStopwatch {margin-top: 17px}


.stitle {display: flex;width: 100%;justify-content: center;align-items: center;text-align: center; color: #ccc;font-size:24px; line-height: 26px;  font-weight:bold; }
.stitle:before,.stitle:after {content: '';border-top: 2px solid #ccc; margin: 0 20px 0 0; flex: 1 0 20px;}
.stitle:after { margin: 0 0 0 20px;}

.setsWrapper ul {text-align:center;}
.dareset{display: inline-block;width:40px;height:40px;line-height:40px;margin:0 2px 2px 0;background-color:#999; ;color:#FFFFFF;font-size:12px;text-align:center;cursor:pointer;}
.dareset-done { background-color: red; }



@media (max-width:768px){
#timercounter h1, #timer{width:80px; padding: 0 0 0 10px;}
#tools-box, #tools-box-center {display: block; width:100%;padding-top:5px}
.darepage #toolbox_wrapper{height:200px;}
#toolbox_wrapper{margin-top:-6px;}
.setsWrapper, .tools-box{width:100%;}
}


@media (max-width:460px){
.dareStopwatch {width:320px;}
#quickbutton0, #quickbutton1, #quickbutton2, #quickbutton3, #quickbutton4, #quickbutton5, #quickbutton6, #quickbutton7, #quickbutton8, #breakBtn, #refresh, #pauseBtn, #resumeBtn, #switchTimerBtn {width:50px; margin:0 0 0 3px !important; font-size: 14px;}
#toolbox-timer {width: 350px }
}

@media (max-width:380px){ .dareStopwatch {width:290px;} #toolbox-timer {width: 200px } }


    .timerDiv {
      background: #fff;
      padding: 8px;
      max-width: 260px;
      margin: 12px auto;
      text-align: center;
    }
    #timeDisplay, #timer {
      font-size: 2em;
      margin-bottom: 6px;
      color: #333;
    }
    .quickTimerBtn {
      background: #eee;
      color: #000;
      font-size: 0.85em;
      padding: 5px 8px;
      margin: 0 2px;
      border: none;
      width: 70px;
    }
    .quickTimerBtn:hover {
      background: #ccc;
    }
    #controlButtons {
      margin-top: 6px;
    }
    #controlButtons button,
    #pauseBtn,
    #resumeBtn,
    #resetBtn {
      background: #eee;
      color: #000;
      font-size: 0.85em;
      padding: 5px 8px;
      margin: 0 2px;
      border: none;
      width: 70px;
    }
    #controlButtons button:hover,
    #pauseBtn:hover,
    #resumeBtn:hover,
    #resetBtn:hover {
      background: #ccc;
    }
    #message {
      font-size: 0.9em;
      color: #CC0000;
      margin-top: 4px;
    }


  #custom-minutes {
    font-size: 1.2em;
    width: 80px;
    padding: 5px;
    margin-bottom: 10px;
    text-align: center;
  }





    .timerContainer {
      display: none;
      width: 100%;
      max-width: 350px;
      text-align: center;
    }

    .caret {
      font-size: 1.1em;
    }

    #customTimerSection input {
      width: 60px;
      margin: 0 auto;
    }

    #timerDisplay {
      font-size: 2em;
      font-weight: bold;
      margin: 10px 0;
      display: inline-block;
    }

    .show_timer-wrapper {
      display: block;
      text-align: center;
      margin: 10px auto;
      height: 30px;
    }


.dareTIMER .btn {
    
      border: none;
      padding: 2px 8px;
      margin: 5px 5px 0 0;
      font-size: 1em;
      cursor: pointer;
    
}


    .btn#startTimer, .btn#customTimerToggle {
      background-color: #999!important;
    }



.btn-inactive {
  background-color: #f0f0f0 !important; /* Very light grey */
  color: #aaa !important;               /* Light text */
  cursor: not-allowed !important;
  pointer-events: none;
  opacity: 0.6;
}


.dareTIMER, #SETS {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
}