Form Container

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<div class="container rate">
<form name="getRateQuote" id="msform" class="form-column">
<h2>Demo form</h2>

</form>
</div>

Form Container with Slider

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="container rate">
<!-- multistep form -->
<form name="getRateQuote" id="msform" class="form-slider">
<h2>LTL Rate Quote</h2>

</form>
</div>

TEXT FIELD FULL COLUMN

<fieldset>
<div class="container-md">
<h3 class="fs-title">Text field full column</h3>
<input type="text" name="account" placeholder="Enter text" />

<h4 class="fs-subtitle">Detail Text</h4>
</div>
</fieldset>

TEXT FIELD FULL COLUMN 2

<fieldset>
<div class="container-lg">
<div class="left-column seperator">
<h3 class="fs-title">Text field column 1</h3>
<label>Enter text</label><br>
<input class="column-left" type="text" name="zip" placeholder="Enter text" /><br>
<label>Select Option</label><br>
<div id="custom-select">
<select id="city" name="city">
<option>lorem</option>
<option>lorem</option>
<option>lorem</option>
<option>lorem</option>
<option>lorem</option>
</select>
</div>
</div>
<div class="right-column">
<h3 class="fs-title">Text field column 2</h3>
<label>Enter text</label><br>
<input class="column-right" type="text" name="zip" placeholder="Enter text" /><br>
<label>Select Option</label><br>
<div id="custom-select">
<select id="city" name="city">
<option>lorem</option>
<option>lorem</option>
<option>lorem</option>
<option>lorem</option>
<option>lorem</option>
</select>
</div>
</div>
</div>

</fieldset>

TEXT FIELDS IN TABLE

<fieldset>
<div class="container-md">
<h3 class="fs-title">Text fields in table</h3>
<div class="details_panel">
<div class="detail-row-labels">
<label>Column 1</label>
<label>Column 2</label>
<label>Column 3</label>
<label>Column 4</label>
</div>
<div class="detail-row row-1">
<div class='fields-column'>
<input name="class" placeholder="Class(required)" type="text" required />
<input name="weight" placeholder="Weight(required)" type="text" required />
<input name="nmfc" placeholder="nmfc" type="text" />
<input name="sub" placeholder="sub" type="text" />
</div>
<div class="remove-row"><i class="fas fa-ban fa-flip-horizontal"></i></div>
</div>
<div class="detail-row row-2">
<div class='fields-column'>
<input name="class" placeholder="Class(required)" type="text" required />
<input name="weight" placeholder="Weight(required)" type="text" required />
<input name="nmfc" placeholder="nmfc" type="text" />
<input name="sub" placeholder="sub" type="text" />
</div>
<div class='remove-row'><i class="fas fa-ban fa-flip-horizontal"></i></div>
</div>
</div>
<div class="add-row">Add Row</div>
</div>

</fieldset>

Js for table

RADIO BUTTONS

<fieldset>
<div class="container-md">
<h3 class="fs-title">Radio Buttons</h3>
<span class="radio__input">
<input type="radio" id="overlength" name="overlength" value="option1"checked><span class="radio__control"></span><label>Option 1 long text OK to put in</label><br>
</span>
<span class="radio__input">
<input type="radio" id="overlength" name="overlength" value="option2"><span class="radio__control"></span><label>Option 2 long text OK to put in</label><br>
</span>
<span class="radio__input">
<input type="radio" id="overlength" name="overlength" value="option3"><span class="radio__control"></span><label>Option 3 long text OK to put in</label><br>
</span>
<span class="radio__input">
<input type="radio" id="overlength" name="overlength" value="option4"><span class="radio__control"></span><label>Option 4 long text OK to put in</label><br>
</span>
<span class="radio__input">
<input type="radio" id="overlength" name="overlength" value="option5"><span class="radio__control"></span><label>Option 5 long text OK to put in</label><br>
</span>
<span class="radio__input">
<input type="radio" id="overlength" name="overlength" value="option6"><span class="radio__control"></span><label>Option 6 long text OK to put in</label><br>
</span>
</div>

</fieldset>

RADIO BUTTON COLUMN 2

<fieldset>
<div class="container-lg">
<div class="left-column seperator">
<h3 class="fs-title">Radio button column 1</h3>
<span class="radio__input">
<input type="radio" id="accessorials" name="accessorials" value="option1"checked><span class="radio__control"></span><label>Option 1</label><br>
</span>
<span class="radio__input">
<input type="radio" id="accessorials" name="accessorials" value="option2"><span class="radio__control"></span><label>Option 2</label><br>
</span>
</div>
<div class="right-column">
<h3 class="fs-title">Radio button column 2</h3>
<span class="radio__input">
<input type="radio" id="accessorials" name="accessorials" value="option1"><span class="radio__control"></span><label>Option 1</label><br>
</span>
<span class="radio__input">
<input type="radio" id="accessorials" name="accessorials" value="option2"><span class="radio__control"></span><label>Option 2</label><br>
</span>
</div>
</div>
</fieldset>

Previous/Next/Submit

<fieldset>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>

CSS

Css File for form

Css Site Css that may be needed like typography