.fs-80{
    font-size: 0.8em;
}

div.no-control > .control-group{
    margin: 0 !important;
}

form div.invalid-feedback{
    display: block;
    margin: -0.5em 0 0;
}

/* Style the control group container */
.control-group {
    margin-bottom: 20px;
    position: relative;
  }
  
  /* Style the label to appear inside the input box */
  .control-label {
    position: absolute;
    top: 0;
    left: 10px;
    font-size: 16px;
    color: #888; /* Muted color */
    pointer-events: none; /* Prevent label from being clicked */
    transition: opacity 0.2s ease-in-out, transform .1s ease-in-out;
    transform: scale(.85) translateY(-.1rem) translate(-.7rem);
    text-align: start;
    z-index: 2;
  }
  
  /* Style the input to provide enough padding for the label to be inside */
  div.check-list .controls input[type=checkbox]{
    height: 0;
    min-height: 0;
  }

    /* Style the input to provide enough padding for the label to be inside */
    div.controls div.form-check input[type=radio]{
      padding: 0;
      height: 1em;
      width: 1em;
      min-height: 0;
    }

  div.check-list .control-group{
    margin: 0;
  }

  .controls input, .controls select {
    width: 100%;
    padding: 20px 10px 5px; /* Adjust padding to create space for the label */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: calc(3.5rem + calc(var(--border-width)* 2));
    min-height: calc(3.5rem + calc(var(--border-width)* 2));
  }

  div.no-label .control-label{
    display: none;
  }

  div.top-label .control-label{
    top: -22px;
  }

  div.slim-control .controls select {
    padding: 1px 10px 5px;
    height: calc(2.8rem + calc(var(--border-width) * 2));
    min-height: calc(2.8rem + calc(var(--border-width) * 2));
  }
  
  /* When input is focused, move the label up */
  .controls input:focus + .control-label,
  .controls input:not(:placeholder-shown) + .control-label {
    font-size: 12px;
    color: #333; /* Darker color for focused label */
    top: -20px; /* Move label above input */
  }
  
  /* Placeholder style to avoid overlapping with label */
  .controls input::placeholder {
    color: transparent; /* Hide placeholder text */
  }
  
  /* Style for the required asterisk */
  .star {
    color: red;
    font-weight: bold;
  }

  .minicolors-theme-bootstrap .minicolors-swatch {
    margin-top: 16px;
}

form div.margin-less .control-group {
  margin-top: 0;
}

.form-switch .controls .form-check-input{
    width: 3em;
    padding: 0px;
    margin: 0px;
    height: 15px;
    max-height: 0.5em;
    min-height: calc(1.5rem + calc(var(--border-width)* 2));
}

form.switch-pad-low .form-switch{
  padding-left: 0.5em;
}

.form-colour .minicolors-theme-bootstrap .minicolors-input {
    width: 100%;
}

form div.checkbox-list input{
  max-width: 1em;
  max-height: 30px;
  min-height: 2em;
  margin-right: 1em;
}

.responsive-table > div{
  box-shadow: inset 0 0 0 9999px var(--gray-100);
}

.responsive-table .table-header{
  box-shadow: unset;
}

.responsive-table .div-table-border{
  padding: .5rem .5rem;
  border: solid 1px var(--gray-800);
  border-bottom-width: 1px;
  border-radius: 2px;
}

.responsive-table .div-table {
  border-style: solid;
  border-width: 0;
  border-color: var(--gray-400);
  border-bottom-width: 1px;
  padding: .7rem .5rem;
}

.responsive-table div.even-row{
  box-shadow: inset 0 0 0 9999px var(--gray-200);
}

.form-margin-minimised fieldset{
  margin-bottom: 0;
}

.form-margin-minimised .control-group{
  margin: 0.5em 0;
}

.list-checkboxes input[type=checkbox]{
  height: calc(1.5rem + calc(var(--border-width) * 2));
  min-height: calc(1.5rem + calc(var(--border-width) * 2));
}

.list-control-group .control-group{
  margin: 0.3em 0;
}

.selectAllCheck .control-label{
  left: 50px;
  transform: scale(1) translateY(-.1rem) translate(-.7rem);
  top: 7px;
}

.choices{
  z-index: 4;
}

.card.narrow-margin > .card-body{
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}