.dark-theme {
    background-color: #000; /* Cor de fundo para o tema escuro */
    color: #ffffff; /* Cor de texto para o tema escuro */
	display: flex;
    flex-direction: column; /* Define a direção do fluxo para coluna */
    align-items: stretch; 
    font-family: Roboto, "HelveticaNowDisplay", sans-serif;
    font-style: normal;
	margin:0px;

}

.dark-theme .bloco{
	
	
    padding: 10px;
    background-color: #000;
	
}

.dark-theme #session-container {

	
    padding: 15px;
    background-color: #000;



}



.dark-theme h1{
font-size: 40px;
font-weight: bold;
color:#d20014;
}


.dark-theme h2{
margin-left:20px;
font-size: 25px;
}



.dark-theme h3{
margin-top: 1px;
margin-left:15px;
color: #bebcc4;
font-size:16px;
}


.dark-theme h4{
	color:#e8e6e6;
	font-size: 20px;
}


.dark-theme .h1b{
	text-align:center;
	color:#262525;

}



.dark-theme .lado{
	display: flex;
}


.dark-theme .mini{
	
color: #9fa2a5;
    margin-top: 10px;
    margin-bottom:10px ;
    margin-left: 21px ;
    font-size: 16px;

}

.dark-theme .semana{
margin-top: 1px;
margin-bottom:0px;	
color:#bdbdbd;
margin-left:20px;
font-size: 30px;
font-weight: bold;

}

.dark-theme .texto{

color:#2878bb;
margin-left:25px;
margin-top: 4px;
margin-bottom:1px;
font-size: 18px;
font-weight: bold;

}



/* Estilo para a classe minha-classe-css */
.dark-theme .hrclass{
  border: 1px solid #00c8ed;
 
}








.dark-theme .ico{
	
	width: 68px;
	height: 68px;
	margin-left: 5px;
}





.dark-theme .txt1{
	
     text-align: center;	
	 margin:0px;
     font-size: 20px;
	 background-color: #000;
   

}


.dark-theme .total{
	
	
	display: inline-flex;
    justify-content: center;
    align-items: center;
	font-size: 35px;
    font-weight: ;
    color: #fff;
	padding: 10px;

	
}





.dark-theme .session-0 {
      color: #378b9a;
	  padding: 10px;
	  margin-top:10px;
}

.dark-theme .session-1 {
     color:  #efa000;
	 padding: 10px;
	 margin-top:10px;
}

.dark-theme .session-2 {
     color:  #dd2400;
	 padding: 10px;
	 margin-top:10px;
}



.dark-theme .session-0 h2 .session-1 h2, .session-2 h2 {

   
    font-weight: bold;
  
}

.dark-theme .session-0 h3, .session-1 h3, .session-2 h3 {
    
    font-weight: normal;
    color: #2a6b77;
	margin-left:40px;
}








.dark-theme .resumo {
	
    justify-content: center;
    align-items: center;
	padding: 15px;
	margin:10px;
	margin-left:20px;
	margin-bottom:20px;			
    font-size: 18px;
	color: #5f5e65;

}



.dark-theme .timer:disabled {
    background-color: #ccc;
}

/* Estilos para os cronômetros */
.dark-theme .timer {
	display: flex;
	
    justify-content: center;
    align-items: center;
	padding: 10px;
	margin-top:10px;
	margin-right:15px;
	margin-left:15px;
	margin-bottom:20px;			
    font-size: 30px;
    font-weight: bold;
	color: #00c8ed;
    border-radius: 10px;
    box-shadow:0px 0px 5px 1px rgb(0 207 234 / 97%)
}

.dark-theme .timer.overdue {
    color: red;
}


.dark-theme h5{
	
	font-size: 22px;
	color: #8507c0;


}


* Estilos para os botões */
.dark-theme .button {
    padding: 5px 10px;
    margin-right: 5px;
    cursor: pointer;
    border: none;
    color: white;
    background-color: #007BFF;
    border-radius: 3px;
    font-size: 14px;
}

.dark-theme .button:disabled {
    background-color: #ccc;
}

/* Estilos para o botão parar com uma cor diferente para destaque */
.dark-theme .button.stop {
    background-color: #dc3545;
}


.dark-theme .iniciarbt{
	 
	width:90%;
	border-radius: 50%;
    padding: 20px;
    margin: 25px;
    cursor: pointer;
    border: none;
    color: white;
    background-color: #827c85;
    font-size: 14px;
	box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3); /* sombra */

	
}

.dark-theme .iniciarbt:disabled {
    background-color: #ccc;
}

/* Estilos para o botão parar com uma cor diferente para destaque */
.dark-theme .iniciarbt.stop {
    background-color: #dc3545;
}




.dark-theme .acionar
 {
 
  padding:40px;
  justify-content: center;
  appearance: none;
  background-color: #1b1819;
  border-radius: 4px;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  list-style: none;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
  margin-top: 5px;
  margin-bottom:5px;
}


.dark-theme .acionar:disabled {
    background-color: #fcfcfc;
	color:#ccc;
	box-shadow: rgb(255 255 255 / 40%) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset
}






.dark-theme .play-button{
	
	width: 60px; height:60px;
	color: #297d8c;
	background-color:#1d1d1d;
	border-radius: 30%;

	border: none;
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3); /* sombra */
	margin-bottom: 20px;

	padding: 5px;
}


.dark-theme .play-button:hover{
	
	
}


.dark-theme .play-button:active{
	
	background-color: #ada4a4;
}

.dark-theme .play-button:disabled {
    background-color: #0b0b0c;
    color: #2d2b2b;
}


.dark-theme .pause-button{
	width: 60px; height:60px;
	color: #9b6d17;
	background-color:#1d1d1d; 
	border-radius: 30%;
	margin-left:30px;
	border: none;
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3); /* sombra */
	margin-bottom: 20px;

	padding: 5px;
}


.dark-theme .pause-button:hover{
	

}



.dark-theme .pause-button:active{
	
	background-color: #ada4a4;
}

.dark-theme .pause-button:disabled {
     background-color: #0b0b0c;
    color: #2d2b2b;
}


.dark-theme .stop-button{
	width: 60px; height: 60px;
	color: #942926;
	background-color:#1d1d1d;  
	border-radius: 30%;
	margin-left:30px;
	border: none;
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3); /* sombra */
	margin-bottom: 20px;

	padding: 5px;
}


.dark-theme .stop-button:hover{
	
	
}


.dark-theme .stop-button:active{
	
	background-color: #ada4a4;
}


.dark-theme .stop-button:disabled {
    background-color: #0b0b0c;
    color: #2d2b2b;
}






.dark-theme .timers:disabled {
    background-color: #ccc;
}

/* Estilos para os cronômetros */
.dark-theme .timers {
	
	display: flex;
	width:99%;
    justify-content: center;
    align-items: center;
    text-align:center;
	padding: 25;
	margin-top:10px;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:20px;		
    font-size: 40px;
    font-weight: bold;
	color: #2878bb;
    border-radius: 20px;
    box-shadow: 0px 0px 5px 1px rgb(220 216 221 / 60%)/* sombra */
}

.dark-theme .timers.overdue {
    color: red;
}




.dark-theme .copiar{
	
	width: 60px; height: 60px;
	color: #fff;
	background-color: #9a0994;
	border-radius: 50%;
	margin:30px;
	border: none;
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3); /* sombra */
	padding: 5px;
	
}


.dark-theme .copiar:active{
	
	background-color: #ada4a4;
}

.copiar:disabled {
    background-color: #ccc;
}


.dark-theme .imagem{ 
width:100%;
display: flex;
justify-content: center;
align-items: center;

}

.dark-theme .end{
	width:99%;
    justify-content: center;
	align-items: center;
	margin:1px;
}



.dark-theme .dats{
	
color: #2878bb;
    margin-left: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 18px;
	
	
}




.dark-theme .botao-flutuante {
	
  position: fixed;
  width: 75px; height:75px;

  bottom: 80px; /* Distância do fundo da página */
  right: 20px; /* Distância da borda direita da página */
  background-color: #33cccc;
  color: #fff;
  border: none;
  border-radius: 50%; /* Tornar o botão redondo */
  
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 9px 9px rgba(0, 0, 0, 0.3); /* Sombra suave */
  transition: background-color 0.3s;
}

.dark-theme .botao-flutuante:hover {
  background-color: #9a0994;
}



.dark-theme .mais {
	
  position: fixed;
  width: 70px; height:70px;
  bottom: 50px; /* Distância do fundo da página */
  right: 20px; /* Distância da borda direita da página */
  background-color: #f4f4f4;
  color: #fff;
  border: none;
  border-radius: 50%; /* Tornar o botão redondo */
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 9px 9px rgba(0, 0, 0, 0.3); /* Sombra suave */
  transition: background-color 0.3s;
}

.dark-theme .mais:hover {
  background-color: #fff;
}


.dark-theme .mais img {
  width: 50px; /* ajuste o tamanho da imagem conforme necessário */
  height: 50px;
                /* filter: invert(100%);  inverte as cores da imagem */
}


.dark-theme .image-h2-container {
    display: flex;
    align-items: center; /* Alinha os itens verticalmente ao centro */
}

/* Estilo para a imagem */
.dark-theme .image-style {
    margin-top: 0px;
    /* Adicione estilos conforme necessário */
    width: 50px; /* Defina a largura da imagem */
    height: auto; /* Mantenha a proporção da imagem */
    margin-right: 1px; /* Adicione margem à direita para separar a imagem do <h2> */
	border-radius: 4px;
}























.popup {
  display: none; /* Inicia oculto */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  padding: 20px;
  border: 1px solid #ccc;
  z-index: 1000;
}

.popup-content {
  position: relative;
}

.close {
  position: absolute;
  bottom: 35px;
  left: auto;
  margin: auto;
  cursor: pointer;
}




.button-85 {
  width:90%;
  padding: 20px;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-85:before {
  content: "";
  background: linear-gradient(
    45deg,
    #2a6b77,
    #9b6d17,
    #942926,
    #b10021,
    #2a6b77,
    #333,
    #666,
    #000,
	#000
 
 );
 
 
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;



}



.popupContainer {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  width: 80%;
  max-width: 600px;
}

.popupContent {
  position: relative;
  background-color: #fff;
  padding: 20px;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

iframe {
  width: 100%;
  height: 300px;
}