.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2rem;
}

.col-xs-12 {
  grid-column: span 12 / span 12;
}

@media( min-width: 640px, max-width: 767px ) {
  .col-sm-4 {
    grid-column: span 4 / span 4;
  }
}

@media( min-width: 768px, max-width: 1023px ) {
  .col-md-4 {
    grid-column: span 4 / span 4;
  }
}
@media( min-width: 1024px ) {
  .col-lg-12 {
    grid-column: span 12 / span 12;
  }
}

@media( min-width: 640px ) {
  .col-sm-6 {
    grid-column: span 6 / span 6;
  }
}
 
@media( min-width: 768px ) {
  .col-md-6 {
    grid-column: span 6 / span 6;
  }
}

@media( min-width: 1024px ) {
  .col-lg-6 {
    grid-column: span 6 / span 6;
  }
}

@media( max-width: 639px ) {
  .col-xs-4 {
    grid-column: span 4 / span 4;
  }
}

@media( min-width: 1024px ) {
  .col-lg-4 {
    grid-column: span 4 / span 4;
  }
}

.form-group {
  margin: 0.5rem 0;
}

.form-group .control-label {
  display: none;
}

textarea,
.input input {
  box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);
  --tw-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
  border: 1px solid #ddd;

  padding: 0.5rem;
  width: 100%;
}

textarea {
  height: 11rem;
}

button {
  box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);
  --tw-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
  border: 1px solid #ddd;

  padding: 0.5rem;
  background-color: rgba(20,100,171,0.5);
  color: white;
  font-weight: bold;
}

.actions {
  text-align: right;
}