@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=sway");
@import url("https://fonts.googleapis.com/css2?family=Courgette&family=Merienda:wght@700&display=swap");
/*
Checkboxes: checkboxlabel
dropdown: dropdown
dropdown for tables: dropdowntb
radio buttons: radiofix // wrap the text in a <h3 class="radiofix">
textInputcl 
clfull
table_heading

*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #e4ebe5;
  font-family: "Roboto", sans-serif;
}

.heading, .subtitle_text, .subheading, .sub_heading, .form_heading, .form-header, .form_title, .form-heading, .form-title, .subheading-left, .sub_heading_left, .subheading_left {
  box-shadow: 13px 2px 23px -12px rgba(0, 0, 0, 0.75);
}

.spacer {
  color: transparent;
}

.spacer::before {
  content: 'xxx';
  color: transparent;
}

.dropdown {
  position: relative;
  display: flex;
  width: 99%;
  height: 2em;
  line-height: 1.05;
  margin-top: 15px;
  align-items: flex-start;
  background: transparent;
  border-radius: .25em;
  flex: .90;
  padding: .05em;
  color: #0e0d0d;
  cursor: pointer;
}

.dropdown:focus-within {
  background: aquamarine;
  border: 2px solid green;
}

.dropdown select {
  margin-left: 8px;
  flex: 1;
  padding: -1 .5em;
  color: #080808;
  cursor: pointer;
  font-size: 1.25rem;
  outline: none;
  min-width: 100px;
}

.dropdown::after {
  content: '\25BC';
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 4px .05em;
  background: #cecbcb;
  cursor: pointer;
  pointer-events: none;
  transition: .25s all ease;
}

.dropdown:hover::after {
  color: #f39c12;
}

.dropdowntb {
  position: relative;
  display: flex;
  width: 99%;
  height: 2em;
  line-height: 2;
  align-items: flex-start;
  background: transparent;
  overflow: hidden;
  border-radius: .25em;
  flex: .90;
  padding: 0.05em;
  color: #0e0d0d;
  cursor: pointer;
}

.dropdowntb:focus-within {
  background: aquamarine;
  border: 2px solid green;
}

.dropdowntb select {
  flex: 1;
  padding: 0.5em;
  color: #080808;
  cursor: pointer;
  font-size: 1rem;
  outline: none;
}

.dropdowntb::after {
  content: '\25BC';
  position: absolute;
  top: 0px;
  right: 0;
  padding: 0 .05em;
  background: #cecbcb;
  cursor: pointer;
  pointer-events: none;
  transition: .25s all ease;
}

.dropdowntb:hover::after {
  color: #f39c12;
}

/*
.radioLabel label {
  display: inline-block;
  text-align: center;
  padding: 10px;
  background-color: #e5ffe6;
  border: 1px solid grey;
  border-radius: 10px; 
}
*/
.checkboxlabel input[type=checkbox], .checkbox_label input[type=checkbox], .checkboxLabel input[type=checkbox], .checkbox-label input[type=checkbox], .radioLabel input[type=checkbox] {
  width: 25px;
  height: 15px;
  color: black;
  position: relative;
}

.checkboxlabel label, .checkbox_label label, .checkboxLabel label, .checkbox-label label, .radioLabel label {
  display: inline-block;
  text-align: center;
  padding: 10px;
  background-color: #e5ffe6;
  border: 1px solid grey;
  border-radius: 5px;
  margin: 2px;
}

.radioLabelBlock label {
  display: block;
  text-align: left;
  padding: 2px;
  background-color: #a5d6a7;
  border: 1px solid grey;
}

/* ***********============ Radio Button ========================*********** */
/*
     <div>{{#mradio "wooddeliveryType"}} Commercial *Residential (Home Delivery) {{/mradio}} </div>
    */
/* The container */
.radio_inline {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio_inline input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #d5f075;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio_inline:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio_inline input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_inline input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio_inline .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.radio-fix-text, .fix-text, .fix_text, .fix-radio, .fix_radio, .fixradio, .radio_fix, .radiofix {
  margin-left: 50px;
  padding-bottom: 8px;
}

/* *********==================== End Radio Button ================================********** */
.clfull {
  width: 100%;
  padding: 5px;
  margin: 2px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid darkgreen;
}

.clfull:focus {
  background-color: lightblue;
}

.al_center, .al-center, .align-center, .text-center, .center-text {
  text-align: center;
}

.center-div, .centerdiv, .center_div {
  display: flex;
  justify-content: center;
}

.submit {
  padding: 50px;
}

.submit select {
  width: 400px;
}

.submit button {
  width: 100%;
  padding: 15px;
  font-weight: bold;
  font-size: 1.2em;
  background-color: darkgreen;
  color: white;
  margin-top: 10px;
}

.submit button:hover {
  background-color: green;
  color: black;
}

textarea {
  width: 100%;
}

.container {
  width: 90%;
  margin: 0 auto;
  background-color: #fafafa;
}

form {
  display: grid;
  grid-gap: 0.2em;
  grid-template-columns: repeat(12, 1fr);
}

.heading, .subtitle_text, .subheading, .sub_heading, .form_heading, .form-header, .form_title, .form-heading, .form-title {
  text-align: center;
  border-bottom: 2px solid #6b6b6b;
  margin-bottom: 10px;
  padding: .5em;
}

.subheading-left, .sub_heading_left, .subheading_left {
  text-align: left;
  border-bottom: 2px solid #6b6b6b;
  margin-bottom: 10px;
  padding: .5em;
}

.form_heading, .form-header, .form_title, .form-heading, .form-title {
  padding: 1.3em;
  background-image: linear-gradient(#cffce9, #f5fefb);
  letter-spacing: .45rem;
  font-family: 'Merienda', cursive;
}

.bold_right_text, .bold-right-text {
  text-align: right;
  margin-top: 15px;
  margin-right: 20px;
}

.bold_left_text, .bold-left-text, .boldtextleft, .boldtext_left {
  text-align: left;
  font-weight: bold;
  margin-top: 10px;
}

.bold-text, .boldtext, .bold_text {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
  background-color: #f1faf1;
  padding: 5px;
}

.boldtexttbl, .bold_texttbl, .bold-texttbl, .boldtexttb {
  text-align: center;
  font-weight: bold;
}

/*
<div class="table-wrapper">
 <div class="table-grid6 table-top">
      <p># of Cartons</p>
      <p>Qty</p>
 </div>
  <div class="table-grid6">
      <p>{{textInputNoLabel "text" "air_num_cartons1" "" ""  "" "clfull"}}</p>
      <p>{{textInputNoLabel "text" "air_qty1" "" "" "" "clfull"}}</p>
  </div>
</div>

*/
.table-grid2, .table-grid3, .table-grid4, .table-grid5, .table-grid6, .table-grid7, .table-grid8, .table-grid9, .table-grid10, .table-grid11 {
  display: grid;
  column-gap: 5px;
  row-gap: 15px;
  border-bottom: 1px solid black;
  padding: .4em;
}

.table-grid2 input, .table-grid3 input, .table-grid4 input, .table-grid5 input, .table-grid6 input, .table-grid7 input, .table-grid8 input, .table-grid9 input, .table-grid10 input, .table-grid11 input {
  width: 98%;
}

.table-wrapper {
  grid-column: 1/-1;
}

.table-wrapper .table-heading, .table-wrapper .table_heading, .table-wrapper .tableheading {
  font-weight: bold;
  align-items: flex-end;
  text-align: center;
}

.table-wrapper .table-headingleft, .table-wrapper .table_heading_left, .table-wrapper .tableheading_left {
  font-weight: bold;
  align-items: flex-end;
}

.table-grid2 {
  grid-template-columns: repeat(2, 1fr);
}

.table-grid3 {
  grid-template-columns: repeat(3, 1fr);
}

.table-grid4 {
  grid-template-columns: repeat(4, 1fr);
}

.table-grid5 {
  grid-template-columns: repeat(5, 1fr);
}

.table-grid6 {
  grid-template-columns: repeat(6, 1fr);
}

.table-grid7 {
  grid-template-columns: repeat(7, 1fr);
}

.table-grid8 {
  grid-template-columns: repeat(8, 1fr);
}

.table-grid9 {
  grid-template-columns: repeat(9, 1fr);
}

.table-grid10 {
  grid-template-columns: repeat(10, 1fr);
}

.table-grid11 {
  grid-template-columns: repeat(11, 1fr);
}

.span2 {
  grid-column: 1 / 3;
}

.span_all {
  grid-column: 1 / -1;
}

.bg_color1 {
  background-color: #ecf6fe;
}

.bg_color2 {
  background-color: #fff5f6;
}

.bg_color3 {
  background-color: #f8f0f9;
}

.bg_color4 {
  background-color: #edfafc;
}

.bg_color5 {
  background-color: #f1f9f1;
}

.bg_color6 {
  background-color: #fffaeb;
}

.bg_color7 {
  background-color: #fcf8f7;
}

.bg_color8 {
  background-color: #f6f4f3;
}

.bg_yellow, .hilight, .highlight, .yellow, .bg-yellow, .color-highlight {
  background: yellow;
}

/*  ============== margin and padding ====================== */
.padding10 {
  padding: 1em;
}

.padding20 {
  padding: 1.2em;
}

.padding30 {
  padding: 1.3em;
}

.padding40 {
  padding: 1.4em;
}

.padding-bottom10, .padding_bottom10, .paddingbottom10, .paddingBottom10 {
  padding-bottom: 10px;
}

.padding-top10, .padding_top10, .paddingtop10, .paddingtop10 {
  padding-top: 10px;
}

.padding-left10, .padding_left10, .paddingleft10, .paddingleft10 {
  padding-left: 10px;
}

.padding-right10, .padding_right10, .paddingright10, .paddingright10 {
  padding-right: 10px;
}

.margin-left10, .margin_left10, .marginleft10 {
  margin-left: 10px;
}

.margin-left20, .margin_left20, .marginleft20 {
  margin-left: 20px;
}

.margin-left30, .margin_left30, .marginleft30 {
  margin-left: 30px;
}

.margin-left40, .margin_left40, .marginleft40 {
  margin-left: 40px;
}

.margin-top10, .margin_top10, .margintop10 {
  margin-top: 10px;
}

.margin-top20, .margin_top20, .margintop20 {
  margin-top: 20px;
}

.margin-top30, .margin_top30, .margintop30 {
  margin-top: 30px;
}

.margin-top40, .margin_top40, .margintop40 {
  margin-top: 40px;
}

.margin-right10, .margin_right10, .marginright10 {
  margin-right: 10px;
}

.margin-right20, .margin_right20, .marginright20 {
  margin-right: 20px;
}

.margin-right30, .margin_right30, .marginright30 {
  margin-right: 30px;
}

.margin-right40, .margin_right40, .marginright40 {
  margin-right: 40px;
}

.margin-bottom10, .margin_bottom10, .marginbottom10 {
  margin-bottom: 10px;
}

.margin-bottom20, .margin_bottom20, .marginbottom20 {
  margin-bottom: 20px;
}

.margin-bottom30, .margin_bottom30, .marginbottom30 {
  margin-bottom: 30px;
}

.margin-bottom40, .margin_bottom40, .marginbottom40 {
  margin-bottom: 40px;
}

footer {
  padding: 50px;
  color: #fff;
  background: #333;
  margin-top: 30px;
}

.error {
  border: 2px solid red;
}
/*# sourceMappingURL=april2021.css.map */