/*------------------------------------------------*/
/*	 VELHOUSE Backend     					 	            */
/*------------------------------------------------*/
.util-container {
  color: var(--hexlb-text-p, #f0f8ff);
}

/*------------------------------------------------*/
/*	 Consoles    						   	                  */
/*------------------------------------------------*/
.util-console {
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
	margin:1rem 0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.util-console-list {
  max-height: 313px; overflow-y: auto;
  line-height:0.75rem;
  background-color:#333;
  border: 1px solid #334155;
  border-radius: 4px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.util-console p {
  color:var(--hexlb-text-p);
}

.util-console-list span {
  font-family:jost,murecho,pm2,sans-serif;
}

/*------------------------------------------------*/
/*	 OBK Select Box					   	                  */
/*------------------------------------------------*/
select.obk-select {
font-family:jost,pm2,sans-serif;
height:272px;
padding:6px;
background-color:#333;
/* Standardizing appearance */
appearance: none;
-webkit-appearance: none;
}

/*------------------------------------------------*/
/*	 Extra Console					   	                  */
/*------------------------------------------------*/
.util-more-tool {
  background-color: #2d312a;
  border: 1px solid #7d6e27;
  border-radius: 16px;
  padding: 24px;
  font-family: "googleSF","murecho","pm2",sans-serif;
}

/*------------------------------------------------*/
/*	 Step Colors   					   	                  */
/*------------------------------------------------*/
.color-step1, .color-step2, .color-step3,
.color-more-tool {
  font-weight: 700;
  font-size:0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  display: inline-block;
}

.color-step1 { color:var(--hexlb-brand-accent); }
.color-step2 { color:var(--hexlb-5th-badge); }
.color-step3 { color:var(--hexlb-4th-badge); }
.color-more-tool { color: #f1b500; }

/*------------------------------------------------*/
/*	   Buttons                                    */
/*------------------------------------------------*/
.btn-console, .btn-more-tool {
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}

.btn-console {
  background-color:#749efc;
  border-color:var(--hexlb-brand-primary);
  color:var(--hexlb-brand-primary); 
}

.btn-console:hover,
.btn-console:active,
.btn-console:focus,
.btn-console:disabled {
  background-color:transparent;
  border: 1px solid #749efc;
  color: var(--hexlb-brand-primary);
}

.btn-more-tool {
  background-color: #f9a01b;
  border-color:var(--hexlb-text-p);
  color:var(--hexlb-text-p);
}

.btn-more-tool:hover,
.btn-more-tool:active,
.btn-more-tool:focus,
.btn-more-tool:disabled {
  color: #f9a01b;
  border-color: #e89210;
}

.btn-badge {
  font-family: monospace;
  width: 35px;
  height: 35px;
  padding: 2px ;
  font-weight:700;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.btn-badge:hover {
  filter: brightness(1.3);  
}
/* -------------------------------------------- */
/* Section: Button Hover Animation              */
/* -------------------------------------------- */
.btn-merl {
  /* Ensure the element can be transformed */
  display: inline-block; 
  /* Add smoothness, otherwise it just "snaps" without moving */
  transition: transform 0.2s ease-in-out; 
  vertical-align: middle;
}

.btn-merl:hover {
  /* Lifting effect */
  transform: translateY(-2px) !important;
}

.lbl-console {
  color:var(--hexlb-brand-primary);
}

.lbl-number {
  color:#ff66aa;
  font-weight:700;
}

/*------------------------------------------------*/
/*	 Controls      					   	                  */
/*------------------------------------------------*/
.textarea-step1 {
  height: 150px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background-color:#333;
  font-family: "inter","murecho","pm2",sans-serif;
}

.util-console-input {
  font-family: "googleSF","pm2",sans-serif;
  background-color: #333;
  color: #ced4da;
  border: 1px solid #555;
  border-radius: 8px;
}

/*------------------------------------------------*/
/* Input Date/Time: Invert Calendar Icon Color    */
/*------------------------------------------------*/
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}