body {
	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;
	background-color: #fff;
	margin:0px;

}

.bloco{
	margin:0px;
	padding-top:10px;
    padding-left:20px;
	padding-right:20px;
    background-color: #fff;
	
}

#session-container {

	margin:0px;
    padding: 15px;
    background-color: #fff;



}



h1{
font-size: 30px;
font-weight: bold;
color:#1c6572;
}



h5{
	
	font-size: 18px;
	color: #8507c0;


}


.lado{
	display: flex;
}


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

}

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

}

.semana{
margin-top: 1px;
margin-bottom:0px;	
color:#626262;
margin-left:20px;
font-size: 18px;
font-weight: bold;

}

.texto{

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

}



/* Estilo para a classe minha-classe-css */
.hrclass{
  border: 1px solid #2a6b77;
 
}



h4{
	
	color:#262525;
	font-size: 13px;
}




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




h2{
margin-left:20px;
font-size: 18px;
}

h3{
margin-top: 1px;
margin-left:15px;
color: #939298;
font-size:14px;
}


.session-0 {
      color: #2a6b77;
	  padding: 5px;
	  margin-top:1px;
	  
}

.session-1 {
     color:  #d68f00;
	 padding: 5px;
	 margin-top:1px;
	
}

.session-2 {
     color:  #bf2f13;
	 padding: 5px;
	 margin-top:1px;
	
}




 .image-h2-container .session-0{
     border-bottom: 2px solid #2a6b77;
}

 .image-h2-container .session-1{
      border-bottom: 2px solid #d68f00;
}

 .image-h2-container .session-2 {
       border-bottom: 2px solid #bf2f13;
}










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

   
    font-weight: bold;
  
}

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






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

}



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

/* Estilos para os cronômetros */
.timer {
	display: flex;
    justify-content: center;
    align-items: center;
	padding: 4px;
	margin-top:10px;
	margin-right:40px;
	margin-left:40px;
	margin-bottom:10px;			
    font-size: 28px;
    font-weight:;
	color: #535050;
    border-radius: 3px;
    box-shadow: 0px 0px 5px 1px #d0d0d0 /* sombra */
}

.timer.overdue {
    color: red;
}



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

.button:disabled {
    background-color: #eeeded;
}

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


.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 */

	
}

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

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





.button-container{
    margin-bottom: 10px;
    text-align: center;
}





.play-button{
	
	width: 50px; height:50px;
	color: #2a6b77;
	background-color: #f1ecec ;
	border-radius: 30%;

	border: none;
	margin-bottom: 5px;
	padding: 5px;
}


.play-button:hover{
	
	
}


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

.play-button:disabled {
    background-color: #fafafa;
    color: #eae6e6;
}


.pause-button{
	width: 50px; height:50px;
	color: #9b6d17;
	background-color:#f1ecec ;
	border-radius: 30%;
	margin-left:30px;
	border: none;

	margin-bottom: 5px;

	padding: 5px;
}


.pause-button:hover{
	
	
}



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

.pause-button:disabled {
   background-color: #fafafa;
    color: #eae6e6;
}


.stop-button{
	width: 50px; height: 50px;
	color:  #942926;
	background-color:#f1ecec;
	border-radius: 30%;
	margin-left:30px;
	border: none;
	
	margin-bottom:5px;

	padding: 5px;
}


.stop-button:hover{
	
	
}


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


.stop-button:disabled {
   background-color: #fafafa;
    color: #eae6e6;
}






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

/* Estilos para os cronômetros */
.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: #0faf9a;
    border-radius: 20px;
    box-shadow: 0px 0px 5px 1px rgb(220 216 221 / 60%)/* sombra */
}

.timers.overdue {
    color: red;
}




.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;
	
}


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

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


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

}

.end{

    justify-content: center;
	align-items: center;
	
}



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
































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

  bottom: 60px; /* 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;
}

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



.mais {
	
  position: fixed;
  width: 70px; height:70px;
  bottom: 99px; /* 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;
}

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


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


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

/* Estilo para a imagem */
.image-style {
    margin-top: 0px;
    /* Adicione estilos conforme necessário */
    width: 40px; /* 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;
}









span{
	
    color:#2878bb;
}


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



.total{
	
	
	display: inline-flex;
    justify-content: center;
	text-align: center;	
    align-items: center;
	font-size: 40px;
    font-weight: ;
    color: #000;
	padding: 20px;

	margin-bottom:5px;
	border-radius: 0px;
	
    letter-spacing: 0.09em;
  
    
   
		
		
    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
	
}




.topo{
	
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center; /* Alinha os itens verticalmente ao centro */
	color:#fff;
	padding:25px;
	background-color:#fff;
	height:auto;
	margin:0px;
}



.topo2{
	
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center; /* Alinha os itens verticalmente ao centro */
	color:#ccc;
	padding-left:5px;

	
	margin:0px;
}



.tp-tx1{
   margin-top: 15px;
	font-size: 18px;
    color:#333;
	font-weight: bold;
	
}


.tp-tx2{
	
 letter-spacing: 0.3em;
color:#333; 
font-weight: bold;
}

.tp-tx3{

color:#6a6a6a;

}



.acionar
 {
  width: 100%;
  padding:40px;
  justify-content: center;
  background-color: #fcfcfc;
  border: none;
  color: #797f85;
  transition: box-shadow .15s,transform .15s;
  font-size: 18px;
  margin-top: 5px;
  margin-bottom:5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

}


.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
}






.timer-container {
    position: relative;
    width: 200px; /* largura da barra de progresso */
    height: 20px; /* altura da barra de progresso */
    background-color: #f0f0f0; /* cor de fundo da barra de progresso */
}

.timer-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: green; /* cor inicial da barra de progresso */
    transition: width 1s linear; /* animação de transição da largura */
}



#progress-bar-container {
 
  position: fixed;
  top:0px;
  //bottom: 0px; /* Distância do topo da janela */
  width: 100%;
  height: 16px;
  background-color: #0b0b0c;
  border-radius: 0px;

}

#progress-bar {
  height: 100%;
  background-color: #33cccc;
  border-radius: 0px;
  width: 0%;
}















.button-30 {
  width: 250px;
  height: 250px;
  padding:60px;
  align-items: center;
  appearance: none;
  background-color: #FCFCFD;
  border-radius: 50%;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, 0.9) 0 2px 4px,rgba(45, 35, 66, 0.9) 0 7px 13px -3px,#D6D6E7 0 -9px 0 inset;
  box-sizing: border-box;
  color: #36395A;
  cursor: pointer;
  display: inline-flex;
  font-family: "Roboto",monospace;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;

  position: relative;
  text-align: left;
  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;
}

.button-30:focus {
  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.9) 0 2px 4px, rgba(45, 35, 66, 0.9) 0 7px 13px -3px, #D6D6E7 0 -9px 0 inset;
}

.button-30:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-30:active {
  box-shadow: #D6D6E7 0 3px 7px inset;
  transform: translateY(2px);
}



.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;
}