.color-box {
  margin-top: 10px;
  padding: 15px;
  color: white;
  font-weight: bold;
  border-radius: 5px;
}

.record_triggered_flows { background-color: transparent; }
.screen_flows { background-color: transparent; }
.autolaunched_flows { background-color: transparent; }
.schedule_triggered_flows { background-color: transparent; }

.hidden { display: none; }


#colorSelect{          
  background-color: white;    
  color: #333;               
  font-family: 'Segoe UI', sans-serif; 
  font-size: 14px;            
  padding: 8px 8px;
  border: none;                
  border-radius: 8px;          
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  width: 100%;                
  max-width: 200px;  
  box-shadow: 0px 0px 3px #444;   
}

#colorSelect:focus {
  outline: none;
}


.flows-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 7px;
    margin-top: 10px;
    padding: 15px;
}










#contenidoFlujo label,
.record_triggered_flows label {
  display: block;
  margin-top: 12px;
  font-weight: bold;
  font-family: 'Segoe UI', sans-serif;
}

#contenidoFlujo input,
#contenidoFlujo select,
.record_triggered_flows input,
.record_triggered_flows select {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  font-size: 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.separador-horizontal{
  height: 2px;
  min-width: 100%;
  background-color: #919191;
  margin: 20px 0px;
}

.contenedor_opt_trigg{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.opt_rtf,
.trgg_rtf{
    display: flex;
    flex-direction: column;
    min-width: 50%;
}


.opt_rtf,
.trgg_rtf{
  appearance: none;           
  background-color: transparent;     
  color: #333;                 
  font-family: 'Segoe UI', sans-serif; 
  font-size: 14px;             
  border: none;              
  border-radius: 8px;         
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  width: 100%;                
  max-width: 200px;           
}

.opt_rtf:focus,
.trgg_rtf:focus {
  outline: none;
  box-shadow: 0 0 0 2px #E2E7EA; 
}

#tipoEjecucion{
  border: 1px solid gray;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;

  & legend{
    padding: 10px;
  }

  .fieldset-labels{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  label{
    margin: 0;
  }
}

.cont-resultado-rtf{

    & > div{
        display: flex;
    }

    #copyBtnOutputLabelRTF,
    #copyBtnOutputApiRTF{
        max-height: 35px;
        margin-top: 4px;
    }

    input{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
        
}

#copyBtnOutputLabelSCF,
#copyBtnOutputApiSCF,
#copyBtnOutputApiALF,
#copyBtnOutputLabelALF,
#copyBtnOutputApiSTF,
#copyBtnOutputLabelSTF{
    max-height: 35px;
    margin-top: 10px;
}

#invocadores_alf {
  border: 1px solid gray;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}

#invocadores_alf .fieldset-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

#invocadores_alf label {
  margin: 0;
}

.cont-frecuencia_y_horario{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.cont-frecuencia_y_horario .cont-campo{
    font-size: 15px;
    margin-bottom: 20px;

    & select{           
         background-color: white;    
         color: #333;               
         font-family: 'Segoe UI', sans-serif; 
         font-size: 14px;            
         padding: 8px 8px;
         border: none;                
         border-radius: 8px;          
         cursor: pointer;
         transition: box-shadow 0.3s ease;
         border: 1px solid #ccc ;
         min-width: 100% ;
    }
    label{
        margin-bottom: 10px;
    }
}