form.semanticForms,
form.semanticForms.light,
table.semanticForms {
  --semanticFormsFontFamily: sans-serif;
  --semanticFormsFontSize: 16px;
  --semanticFormsFormBgColor: #fff;
  --semanticFormsFormSubBgColor: #f5f5f5;
  --semanticFormsTextColor: #000;
  --semanticFormsBorderColor: #c0c0c0;
  --semanticFormsFocusColor: #c0c0c0;
  --semanticFormsSubBorderColor: #c0c0c0;
  --semanticFormsPlaceholderColor: rgba(0, 0, 0, 0.75);
  --semanticFormsScrollbarColor: #c0c0c0;
  --semanticFormsClearButtonColor: #000;
  --semanticFormsButtonGradientLight: #fff;
  --semanticFormsButtonGradientDark: #c0c0c0;
  --semanticFormsInvalid: #f00;
  --semanticFormsInvalidBorder: 1px solid var(--semanticFormsInvalid);
  --semanticFormsWarn: #ffdd00;
  --semanticFormsWarnBorder: 1px solid var(--semanticFormsWarn);
  --semanticFormsInputHeight: 38px;
  --semanticFormsInputFontSize: 16px;
  --semanticFormsInputTopMargin: 15px;
  --semanticFormsInputMinWidth: 250px;
  --semanticFormsInputMaxWidth: 365px;
  --semanticFormsBorderRadius: 10px;
  --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.3 c h / 0.05);
  --semanticFormsNestedFieldsetBorder: 1px rgba(0, 0, 0, .2) solid;
  --semanticFormsNestedInputBgColor: #fff;
  --semanticFormsBorder: 1px var(--semanticFormsBorderColor) solid;
  --semanticFormsTableTitleColor: #fcfcfc;
  --semanticFormsTableHeaderColor: #eeeeee;
  --semanticFormsTableOddColor: #dddddd;
  --semanticFormsTableEvenColor: #cccccc;
  --semanticFormsTableBorder: 1px #c0c0c0 solid;
  --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'%3E%3Cpolygon points='0,0 100,0 50,50'/%3E%3C/svg%3E");
  --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23aaa;stroke:%23aaa;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");
  --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  font-family: var(--semanticFormsFontFamily);
  font-size: var(--semanticFormsFontSize);
  width: 100%;
  overflow-x: hidden;
}
form.semanticForms:not(table),
form.semanticForms.light:not(table),
table.semanticForms:not(table) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@supports (interpolate-size: allow-keywords) {
  form.semanticForms,
  form.semanticForms.light,
  table.semanticForms {
    interpolate-size: allow-keywords;
  }
}
form.semanticForms [hidden],
form.semanticForms.light [hidden],
table.semanticForms [hidden] {
  display: none !important;
}
form.semanticForms div:has(dd[hidden]),
form.semanticForms.light div:has(dd[hidden]),
table.semanticForms div:has(dd[hidden]) {
  display: none !important;
}
form.semanticForms fieldset,
form.semanticForms label,
form.semanticForms input,
form.semanticForms select,
form.semanticForms textarea,
form.semanticForms button,
form.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
form.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea),
form.semanticForms dt:has(> input, > select, > textarea),
form.semanticForms dd:has(> input, > select, > textarea, > ul, > menu),
form.semanticForms div:has(dt, dd),
form.semanticForms dd > p,
form.semanticForms.light fieldset,
form.semanticForms.light label,
form.semanticForms.light input,
form.semanticForms.light select,
form.semanticForms.light textarea,
form.semanticForms.light button,
form.semanticForms.light menu:has(li > input, li > label, li > button, li > select, li > textarea),
form.semanticForms.light dl:has(dt > label, dd > input, dd > select, dd > textarea),
form.semanticForms.light dt:has(> input, > select, > textarea),
form.semanticForms.light dd:has(> input, > select, > textarea, > ul, > menu),
form.semanticForms.light div:has(dt, dd),
form.semanticForms.light dd > p,
table.semanticForms fieldset,
table.semanticForms label,
table.semanticForms input,
table.semanticForms select,
table.semanticForms textarea,
table.semanticForms button,
table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
table.semanticForms dl:has(dt > label, dd > input, dd > select, dd > textarea),
table.semanticForms dt:has(> input, > select, > textarea),
table.semanticForms dd:has(> input, > select, > textarea, > ul, > menu),
table.semanticForms div:has(dt, dd),
table.semanticForms dd > p {
  color: var(--semanticFormsTextColor);
  font-family: var(--semanticFormsFontFamily);
  box-sizing: border-box;
}
form.semanticForms menu, form.semanticForms dl, form.semanticForms dt, form.semanticForms dd, form.semanticForms div, form.semanticForms dd > p,
form.semanticForms.light menu,
form.semanticForms.light dl,
form.semanticForms.light dt,
form.semanticForms.light dd,
form.semanticForms.light div,
form.semanticForms.light dd > p,
table.semanticForms menu,
table.semanticForms dl,
table.semanticForms dt,
table.semanticForms dd,
table.semanticForms div,
table.semanticForms dd > p {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) body:not(.light) form.semanticForms:not(.light), html:not(.light) body:not(.light) table.semanticForms:not(.light) {
    --semanticFormsFormBgColor: #555;
    --inputBackgroudColor: rgba(85,85,85,0.1);
    --semanticFormsFormSubBgColor: #2f2f2f;
    --semanticFormsTextColor: #fff;
    --semanticFormsBorderColor: #656565;
    --semanticFormsFocusColor: #656565;
    --semanticFormsSubBorderColor: #3f3f3f;
    --semanticFormsPlaceholderColor: rgba(255, 255, 255, 0.85);
    --semanticFormsScrollbarColor: #373737;
    --semanticFormsClearButtonColor: #fff;
    --semanticFormsButtonGradientLight: #6f6f6f;
    --semanticFormsButtonGradientDark: #373737;
    --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.9 c h / 0.05);
    --semanticFormsNestedFieldsetBorder: 1px rgba(255, 255, 255, .1) solid;
    --semanticFormsNestedInputBgColor: rgba(255, 255, 255, .15);
    --semanticFormsBorder: none;
    --semanticFormsTableTitleColor: #3f3f3f;
    --semanticFormsTableHeaderColor: #4f4f4f;
    --semanticFormsTableOddColor: #3f3f3f;
    --semanticFormsTableEvenColor: #4f4f4f;
    --semanticFormsTableBorder: 1px #656565 solid;
    --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23fff'%3E%3Cpolygon stroke='%23fff' points='0,0 100,0 50,50'/%3E%3C/svg%3E");
    --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");
    --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  }
  html:not(.light) body:not(.light) form.semanticForms:not(.light) input::-webkit-calendar-picker-indicator, html:not(.light) body:not(.light) table.semanticForms:not(.light) input::-webkit-calendar-picker-indicator {
    filter: invert(100%);
  }
}
html:not(.light) body:not(.light) form.semanticForms.dark, html:not(.light) body:not(.light) table.semanticForms.dark {
  --semanticFormsFormBgColor: #555;
  --inputBackgroudColor: rgba(85,85,85,0.1);
  --semanticFormsFormSubBgColor: #2f2f2f;
  --semanticFormsTextColor: #fff;
  --semanticFormsBorderColor: #656565;
  --semanticFormsFocusColor: #656565;
  --semanticFormsSubBorderColor: #3f3f3f;
  --semanticFormsPlaceholderColor: rgba(255, 255, 255, 0.85);
  --semanticFormsScrollbarColor: #373737;
  --semanticFormsClearButtonColor: #fff;
  --semanticFormsButtonGradientLight: #6f6f6f;
  --semanticFormsButtonGradientDark: #373737;
  --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.9 c h / 0.05);
  --semanticFormsNestedFieldsetBorder: 1px rgba(255, 255, 255, .1) solid;
  --semanticFormsNestedInputBgColor: rgba(255, 255, 255, .15);
  --semanticFormsBorder: none;
  --semanticFormsTableTitleColor: #3f3f3f;
  --semanticFormsTableHeaderColor: #4f4f4f;
  --semanticFormsTableOddColor: #3f3f3f;
  --semanticFormsTableEvenColor: #4f4f4f;
  --semanticFormsTableBorder: 1px #656565 solid;
  --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23fff'%3E%3Cpolygon stroke='%23fff' points='0,0 100,0 50,50'/%3E%3C/svg%3E");
  --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");
  --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
html:not(.light) body:not(.light) form.semanticForms.dark input::-webkit-calendar-picker-indicator, html:not(.light) body:not(.light) table.semanticForms.dark input::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

form.semanticForms.dark,
table.semanticForms.dark {
  --semanticFormsFormBgColor: #555;
  --inputBackgroudColor: rgba(85,85,85,0.1);
  --semanticFormsFormSubBgColor: #2f2f2f;
  --semanticFormsTextColor: #fff;
  --semanticFormsBorderColor: #656565;
  --semanticFormsFocusColor: #656565;
  --semanticFormsSubBorderColor: #3f3f3f;
  --semanticFormsPlaceholderColor: rgba(255, 255, 255, 0.85);
  --semanticFormsScrollbarColor: #373737;
  --semanticFormsClearButtonColor: #fff;
  --semanticFormsButtonGradientLight: #6f6f6f;
  --semanticFormsButtonGradientDark: #373737;
  --semanticFormsNestedFieldsetBgColor: oklch(from var(--semanticFormsFormSubBgColor) 0.9 c h / 0.05);
  --semanticFormsNestedFieldsetBorder: 1px rgba(255, 255, 255, .1) solid;
  --semanticFormsNestedInputBgColor: rgba(255, 255, 255, .15);
  --semanticFormsBorder: none;
  --semanticFormsTableTitleColor: #3f3f3f;
  --semanticFormsTableHeaderColor: #4f4f4f;
  --semanticFormsTableOddColor: #3f3f3f;
  --semanticFormsTableEvenColor: #4f4f4f;
  --semanticFormsTableBorder: 1px #656565 solid;
  --semanticFormsSelectIcon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23fff'%3E%3Cpolygon stroke='%23fff' points='0,0 100,0 50,50'/%3E%3C/svg%3E");
  --semanticFormsCustomResizer: url("data:image/svg+xml;utf8,%3Csvg width='20' height='20' viewBox='0 0 5.2916665 5.2916666' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1'%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 2.8245112,5.0994569 C 4.9396993,2.9842685 4.9396993,2.9842685 4.9396993,2.9842685' id='path1034' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1' d='M 1.515747,5.0406977 C 4.8873304,1.6691138 4.8873304,1.6691138 4.8873304,1.6691138' id='path1034-1' /%3E%3Cpath style='fill:%23c9c9c9;stroke:%23c9c9c9;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1' d='M 0.20657789,5.0909782 C 4.9312207,0.3663348 4.9312207,0.3663348 4.9312207,0.3663348' id='path1034-9' /%3E%3C/g%3E%3C/svg%3E");
  --semanticFormsSearchIcon: url("data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.7955%2015.8111L21%2021M18%2010.5C18%2014.6421%2014.6421%2018%2010.5%2018C6.35786%2018%203%2014.6421%203%2010.5C3%206.35786%206.35786%203%2010.5%203C14.6421%203%2018%206.35786%2018%2010.5Z%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
form.semanticForms.dark input::-webkit-calendar-picker-indicator,
table.semanticForms.dark input::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
.semanticForms select {
  height: var(--semanticFormsInputHeight);
}
.semanticForms input[type=checkbox],
.semanticForms input[type=radio] {
  width: 18px;
  height: 18px;
  margin: 3px 0;
  cursor: pointer;
}
.semanticForms input[type=checkbox] ~ label:first-of-type,
.semanticForms input[type=radio] ~ label:first-of-type {
  color: var(--semanticFormsTextColor);
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
.semanticForms select,
.semanticForms textarea {
  font-size: var(--semanticFormsInputFontSize);
  background: var(--semanticFormsFormBgColor);
  border: var(--semanticFormsBorder);
  border-radius: var(--semanticFormsBorderRadius);
  width: 100%;
  touch-action: manipulation;
  outline: none;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]):focus,
.semanticForms select:focus,
.semanticForms textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--semanticFormsFocusColor);
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]):not([type=range]),
.semanticForms select:not([type=range]),
.semanticForms textarea:not([type=range]) {
  padding: 6px 30px 6px 20px;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=password], .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=text]:has(~ button.show),
.semanticForms select[type=password],
.semanticForms select[type=text]:has(~ button.show),
.semanticForms textarea[type=password],
.semanticForms textarea[type=text]:has(~ button.show) {
  padding: 6px 55px 6px 20px;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=search],
.semanticForms select[type=search],
.semanticForms textarea[type=search] {
  padding: 6px 20px 6px 32px;
  background: var(--semanticFormsSearchIcon) no-repeat 10px;
  background-color: var(--semanticFormsFormBgColor);
  background-size: 18px;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=search]:focus + label.floatLabelFormAnimatedLabel, .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
.semanticForms select[type=search]:focus + label.floatLabelFormAnimatedLabel,
.semanticForms select[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel,
.semanticForms textarea[type=search]:focus + label.floatLabelFormAnimatedLabel,
.semanticForms textarea[type=search]:not(:placeholder-shown) + label.floatLabelFormAnimatedLabel {
  left: 20px;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=search]::-webkit-search-cancel-button,
.semanticForms select[type=search]::-webkit-search-cancel-button,
.semanticForms textarea[type=search]::-webkit-search-cancel-button {
  display: none;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=range], .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=color],
.semanticForms select[type=range],
.semanticForms select[type=color],
.semanticForms textarea[type=range],
.semanticForms textarea[type=color] {
  cursor: pointer;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=color],
.semanticForms select[type=color],
.semanticForms textarea[type=color] {
  height: var(--semanticFormsInputHeight);
  min-width: 100%;
  padding: 4px 30px 4px 10px;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[type=file],
.semanticForms select[type=file],
.semanticForms textarea[type=file] {
  cursor: pointer;
  font-size: var(--semanticFormsInputFontSize);
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[disabled],
.semanticForms select[disabled],
.semanticForms textarea[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[disabled] ~ label:first-of-type,
.semanticForms select[disabled] ~ label:first-of-type,
.semanticForms textarea[disabled] ~ label:first-of-type {
  opacity: 0.5;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio])[disabled] ~ label + button,
.semanticForms select[disabled] ~ label + button,
.semanticForms textarea[disabled] ~ label + button {
  display: none;
}
.semanticForms select {
  cursor: pointer;
}
.semanticForms select:not([multiple]) {
  background-image: var(--semanticFormsSelectIcon);
  background-size: 14px;
  background-position: calc(100% - 8px) 16px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.semanticForms select[multiple] {
  min-height: 38px;
  height: 100px;
  padding: 0;
}
.semanticForms select[multiple] option {
  padding: 6px 20px;
}
.semanticForms select[multiple] option:first-of-type {
  border-top-left-radius: var(--semanticFormsBorderRadius);
}
.semanticForms select[multiple] option:last-of-type {
  border-bottom-left-radius: var(--semanticFormsBorderRadius);
}
.semanticForms textarea {
  resize: vertical;
  line-height: 1.5;
  width: 100%;
  min-height: 38px;
}
.semanticForms textarea[data-auto-grow] {
  field-sizing: content;
}
.semanticForms button.clear, .semanticForms button.show {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  height: min-content;
  top: calc(var(--semanticFormsInputTopMargin) + 6px);
  right: 0;
  width: 25px;
  height: 25px;
  margin: auto 6px;
  padding: 5px;
  background: none;
  border: none;
  color: var(--semanticFormsClearButtonColor);
  display: flex;
  align-items: center;
  justify-content: center;
}
.semanticForms button.show {
  right: 25px;
}
.semanticForms button.show svg {
  height: 100%;
}
.semanticForms textarea ~ .clear {
  bottom: auto;
}
.semanticForms input:placeholder-shown ~ .clear,
.semanticForms input:placeholder-shown ~ .show,
.semanticForms textarea:placeholder-shown ~ .clear,
.semanticForms input[type=file] ~ .clear {
  display: none;
}
.semanticForms input[type=submit],
.semanticForms input[type=reset],
.semanticForms input[type=button],
.semanticForms button:not(.clear, .show),
.semanticForms .button-link {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  max-width: max-content;
  background-image: linear-gradient(to bottom, var(--semanticFormsButtonGradientLight) 0%, var(--semanticFormsButtonGradientDark) 100%);
  background-origin: border-box;
  border: 1px var(--semanticFormsButtonGradientDark) solid;
  corner-shape: squircle;
  border-radius: 20px;
  padding: 5px 25px;
  font-size: 100%;
  line-height: 1;
  user-select: none;
  transform: scale(1);
  transition: transform 180ms;
  text-decoration: none;
  color: var(--semanticFormsTextColor);
}
.semanticForms input[type=submit]:active,
.semanticForms input[type=reset]:active,
.semanticForms input[type=button]:active,
.semanticForms button:not(.clear, .show):active,
.semanticForms .button-link:active {
  transform: scale(0.97);
}
.semanticForms input[type=submit],
.semanticForms input[type=reset],
.semanticForms input[type=button],
.semanticForms input[type=image],
.semanticForms button:not(.clear):not(.show),
.semanticForms .button-link {
  transition: filter 0.1s;
}
.semanticForms input[type=submit]:hover,
.semanticForms input[type=reset]:hover,
.semanticForms input[type=button]:hover,
.semanticForms input[type=image]:hover,
.semanticForms button:not(.clear):not(.show):hover,
.semanticForms .button-link:hover {
  filter: brightness(1.05);
}
.semanticForms .button-link {
  display: block;
}
.semanticForms .button-link:visited, .semanticForms .button-link:link {
  color: var(--semanticFormsTextColor);
}
.semanticForms [data-invalid-text] {
  display: none;
  color: var(--semanticFormsInvalid);
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).invalid, .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]):user-invalid,
.semanticForms select.invalid,
.semanticForms select:user-invalid,
.semanticForms textarea.invalid,
.semanticForms textarea:user-invalid {
  border: var(--semanticFormsInvalidBorder);
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).invalid ~ label:nth-of-type(2), .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]):user-invalid ~ label:nth-of-type(2),
.semanticForms select.invalid ~ label:nth-of-type(2),
.semanticForms select:user-invalid ~ label:nth-of-type(2),
.semanticForms textarea.invalid ~ label:nth-of-type(2),
.semanticForms textarea:user-invalid ~ label:nth-of-type(2) {
  color: var(--semanticFormsInvalid);
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).invalid ~ [data-invalid-text], .semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]):user-invalid ~ [data-invalid-text],
.semanticForms select.invalid ~ [data-invalid-text],
.semanticForms select:user-invalid ~ [data-invalid-text],
.semanticForms textarea.invalid ~ [data-invalid-text],
.semanticForms textarea:user-invalid ~ [data-invalid-text] {
  font-size: small;
  display: flex;
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).warn,
.semanticForms select.warn,
.semanticForms textarea.warn {
  border: var(--semanticFormsWarnBorder);
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).warn ~ label:nth-of-type(2),
.semanticForms select.warn ~ label:nth-of-type(2),
.semanticForms textarea.warn ~ label:nth-of-type(2) {
  color: var(--semanticFormsWarn);
}
.semanticForms input:not([type=submit], [type=reset], [type=button], [type=image]).warn ~ [data-invalid-text],
.semanticForms select.warn ~ [data-invalid-text],
.semanticForms textarea.warn ~ [data-invalid-text] {
  font-size: small;
  display: flex;
}
.semanticForms input:-webkit-autofill,
.semanticForms input:-webkit-autofill:hover,
.semanticForms input:-webkit-autofill:focus,
.semanticForms input:-webkit-autofill:active,
.semanticForms textarea:-webkit-autofill,
.semanticForms textarea:-webkit-autofill:hover,
.semanticForms textarea:-webkit-autofill:focus,
.semanticForms textarea:-webkit-autofill:active,
.semanticForms select:-webkit-autofill,
.semanticForms select:-webkit-autofill:hover,
.semanticForms select:-webkit-autofill:focus,
.semanticForms select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--semanticFormsFormBgColor) inset;
  transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
  transition-delay: 5000s;
  transition-property: background-color, color;
}
@supports (scrollbar-color: auto) {
  .semanticForms textarea {
    scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
  }
  .semanticForms textarea::-webkit-resizer {
    border: none;
    background-image: var(--semanticFormsCustomResizer);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: 100%;
    margin: 0 2px 2px 0;
  }
  .semanticForms select[multiple] {
    scrollbar-color: var(--semanticFormsScrollbarColor) transparent;
  }
}

.semanticForms input[type=checkbox] + label:first-of-type,
.semanticForms input[type=radio] + label:first-of-type {
  padding-top: 2px;
  font-size: var(--semanticFormsInputFontSize);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.semanticForms input[type=checkbox] + label:first-of-type span.required,
.semanticForms input[type=radio] + label:first-of-type span.required {
  cursor: help;
  pointer-events: auto;
  color: red;
}
.semanticForms input[type=checkbox] + label:first-of-type span.help,
.semanticForms input[type=radio] + label:first-of-type span.help {
  display: grid;
  place-items: center;
  cursor: help;
  pointer-events: auto;
}
.semanticForms input[type=checkbox] + label:first-of-type span.help svg,
.semanticForms input[type=radio] + label:first-of-type span.help svg {
  width: 80%;
}
.semanticForms .floatLabelForm div dt {
  position: relative;
}
.semanticForms .floatLabelForm div dt label {
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  user-select: auto;
  color: var(--semanticFormsTextColor);
  font-size: var(--semanticFormsInputFontSize);
  position: absolute;
  transform-origin: left center;
  transform: translateY(-100%) scale(0.7);
  top: var(--semanticFormsInputTopMargin);
  left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: 100%;
}
.semanticForms .floatLabelForm div dt label span.help {
  display: grid;
  place-items: center;
  cursor: help;
  pointer-events: auto;
}
.semanticForms .floatLabelForm div:has(dd input:required) dt label {
  width: 100%;
  padding-right: 10px;
}
.semanticForms .floatLabelForm div:has(dd input:required) dt label > span {
  margin-left: 5px;
  cursor: help;
  pointer-events: auto;
  color: red;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=button], [type=image]):focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type, .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=button], [type=image]):not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type {
  color: var(--semanticFormsTextColor);
  transform: translateY(-150%) scale(0.7);
  width: 100%;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=button], [type=image]):focus.no-float-label ~ label:first-of-type, .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:not([type=submit], [type=reset], [type=button], [type=image]):not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:focus.no-float-label ~ label:first-of-type,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus.no-float-label ~ label:first-of-type,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:not(:placeholder-shown).no-float-label:not([type=checkbox]):not([type=radio]) ~ label:first-of-type {
  display: none;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select ~ label:first-of-type {
  color: var(--semanticFormsTextColor);
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) button:not(.clear, .show),
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input[type=submit]:not(.clear, .show) {
  margin-top: var(--semanticFormsInputTopMargin);
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type {
  position: absolute;
  top: calc(var(--semanticFormsInputTopMargin) + 10px);
  left: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.2;
  font-size: var(--semanticFormsInputFontSize);
  transform-origin: left center;
  pointer-events: none;
  transition: transform 250ms;
  cursor: text;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: calc(100% - 35px);
  user-select: none;
  color: var(--semanticFormsPlaceholderColor);
  touch-action: manipulation;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.required {
  cursor: help;
  pointer-events: auto;
  color: red;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help {
  display: grid;
  place-items: center;
  cursor: help;
  pointer-events: auto;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:first-of-type span.help svg {
  width: 80%;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) label:first-of-type {
  width: calc(100% - 95px);
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) span.focus-key {
  display: block;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key) span.focus-key kbd {
  font-family: sans-serif;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key):has(input:focus, select:focus, textarea:focus) span.focus-key, .semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(span.focus-key):not(:has(input:placeholder-shown, textarea:placeholder-shown)) span.focus-key {
  display: none;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) label:nth-of-type(2) {
  margin-top: -5px;
  padding: 0 10px;
  font-size: small;
  color: var(--semanticFormsTextColor);
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) select {
  margin-top: var(--semanticFormsInputTopMargin);
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea {
  transition: opacity 250ms;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::placeholder,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::placeholder {
  opacity: 0;
  transition: opacity 250ms;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-moz-placeholder,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-moz-placeholder {
  opacity: 0;
  transition: opacity 250ms;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input::-webkit-input-placeholder,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea::-webkit-input-placeholder {
  opacity: 0;
  transition: opacity 250ms;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:-ms-input-placeholder,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:-ms-input-placeholder {
  opacity: 0;
  transition: opacity 250ms;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::placeholder,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::placeholder {
  opacity: 1;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-moz-placeholder,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-moz-placeholder {
  opacity: 1;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus::-webkit-input-placeholder,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus::-webkit-input-placeholder {
  opacity: 1;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) input:focus:-ms-input-placeholder,
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) textarea:focus:-ms-input-placeholder {
  opacity: 1;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key {
  color: var(--semanticFormsPlaceholderColor);
  position: absolute;
  top: calc(var(--semanticFormsInputTopMargin) + 11px);
  right: 20px;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios) span.focus-key kbd {
  line-height: 1;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=number]) .focus-key {
  right: 45px;
}
.semanticForms .floatLabelForm div dd:not(.singleCheckbox, .singleRadio, .checkboxes, .radios):has(input[type=search]) label:first-of-type {
  left: 32px;
}
.semanticForms .floatLabelForm div:has([data-max-content]) {
  max-width: max-content;
  min-width: 150px;
}
.semanticForms .floatLabelForm div:has([data-max-content]) dd {
  width: max-content;
}
.semanticForms .floatLabelForm div:has([data-max-content]) dd input, .semanticForms .floatLabelForm div:has([data-max-content]) dd select {
  field-sizing: content;
  min-width: 150px;
  max-width: max-content;
}
.semanticForms .floatLabelForm input::placeholder, .semanticForms .floatLabelForm textarea::placeholder {
  color: var(--semanticFormsPlaceholderColor);
  opacity: 1;
}

.semanticForms div[class^=colspan-] {
  max-width: 100% !important;
}
.semanticForms div.colspan-full {
  grid-column: 1/-1;
}
.semanticForms div.colspan-5 {
  grid-column: span 5;
}
.semanticForms div.colspan-4 {
  grid-column: span 4;
}
.semanticForms div.colspan-3 {
  grid-column: span 3;
}
.semanticForms div.colspan-2 {
  grid-column: span 2;
}
.semanticForms div.colspan-1 {
  grid-column: span 1;
}
.semanticForms fieldset[class^=colspan-] dl div,
.semanticForms dl[class^=colspan-] div {
  max-width: 100% !important;
}
.semanticForms fieldset.colspan-full dl,
.semanticForms dl.colspan-full {
  grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
}
.semanticForms fieldset.colspan-5 dl,
.semanticForms dl.colspan-5 {
  grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
}
.semanticForms fieldset.colspan-4 dl,
.semanticForms dl.colspan-4 {
  grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr));
}
.semanticForms fieldset.colspan-3 dl,
.semanticForms dl.colspan-3 {
  grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr));
}
.semanticForms fieldset.colspan-2 dl,
.semanticForms dl.colspan-2 {
  grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr));
}
.semanticForms fieldset.colspan-1 dl,
.semanticForms dl.colspan-1 {
  grid-template-columns: repeat(1, minmax(var(--semanticFormsInputMinWidth), 1fr));
}
.semanticForms fieldset.colspan-1 dl dt:nth-of-type(n + 1),
.semanticForms fieldset.colspan-1 dl dd:nth-of-type(n + 1),
.semanticForms dl.colspan-1 dt:nth-of-type(n + 1),
.semanticForms dl.colspan-1 dd:nth-of-type(n + 1) {
  grid-column: 1;
}
.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 1),
.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 1),
.semanticForms dl.colspan-2 dt:nth-of-type(2n + 1),
.semanticForms dl.colspan-2 dd:nth-of-type(2n + 1) {
  grid-column: 1;
}
.semanticForms fieldset.colspan-2 dl dt:nth-of-type(2n + 2),
.semanticForms fieldset.colspan-2 dl dd:nth-of-type(2n + 2),
.semanticForms dl.colspan-2 dt:nth-of-type(2n + 2),
.semanticForms dl.colspan-2 dd:nth-of-type(2n + 2) {
  grid-column: 2;
}
.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 1),
.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 1),
.semanticForms dl.colspan-3 dt:nth-of-type(3n + 1),
.semanticForms dl.colspan-3 dd:nth-of-type(3n + 1) {
  grid-column: 1;
}
.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 2),
.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 2),
.semanticForms dl.colspan-3 dt:nth-of-type(3n + 2),
.semanticForms dl.colspan-3 dd:nth-of-type(3n + 2) {
  grid-column: 2;
}
.semanticForms fieldset.colspan-3 dl dt:nth-of-type(3n + 3),
.semanticForms fieldset.colspan-3 dl dd:nth-of-type(3n + 3),
.semanticForms dl.colspan-3 dt:nth-of-type(3n + 3),
.semanticForms dl.colspan-3 dd:nth-of-type(3n + 3) {
  grid-column: 3;
}
.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 1),
.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 1),
.semanticForms dl.colspan-4 dt:nth-of-type(4n + 1),
.semanticForms dl.colspan-4 dd:nth-of-type(4n + 1) {
  grid-column: 1;
}
.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 2),
.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 2),
.semanticForms dl.colspan-4 dt:nth-of-type(4n + 2),
.semanticForms dl.colspan-4 dd:nth-of-type(4n + 2) {
  grid-column: 2;
}
.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 3),
.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 3),
.semanticForms dl.colspan-4 dt:nth-of-type(4n + 3),
.semanticForms dl.colspan-4 dd:nth-of-type(4n + 3) {
  grid-column: 3;
}
.semanticForms fieldset.colspan-4 dl dt:nth-of-type(4n + 4),
.semanticForms fieldset.colspan-4 dl dd:nth-of-type(4n + 4),
.semanticForms dl.colspan-4 dt:nth-of-type(4n + 4),
.semanticForms dl.colspan-4 dd:nth-of-type(4n + 4) {
  grid-column: 4;
}
.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 1),
.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 1),
.semanticForms dl.colspan-5 dt:nth-of-type(5n + 1),
.semanticForms dl.colspan-5 dd:nth-of-type(5n + 1) {
  grid-column: 1;
}
.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 2),
.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 2),
.semanticForms dl.colspan-5 dt:nth-of-type(5n + 2),
.semanticForms dl.colspan-5 dd:nth-of-type(5n + 2) {
  grid-column: 2;
}
.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 3),
.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 3),
.semanticForms dl.colspan-5 dt:nth-of-type(5n + 3),
.semanticForms dl.colspan-5 dd:nth-of-type(5n + 3) {
  grid-column: 3;
}
.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 4),
.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 4),
.semanticForms dl.colspan-5 dt:nth-of-type(5n + 4),
.semanticForms dl.colspan-5 dd:nth-of-type(5n + 4) {
  grid-column: 4;
}
.semanticForms fieldset.colspan-5 dl dt:nth-of-type(5n + 5),
.semanticForms fieldset.colspan-5 dl dd:nth-of-type(5n + 5),
.semanticForms dl.colspan-5 dt:nth-of-type(5n + 5),
.semanticForms dl.colspan-5 dd:nth-of-type(5n + 5) {
  grid-column: 5;
}

form.semanticForms,
fieldset {
  container: semanticForm/inline-size;
}
@container semanticForm (width >= 1810px) {
  form.semanticForms fieldset dl, form.semanticForms dl,
  fieldset fieldset dl,
  fieldset dl {
    grid-template-columns: repeat(7, minmax(var(--semanticFormsInputMinWidth), 1fr));
  }
}
@container semanticForm (width >= 1550px) and (width < 1810px) {
  form.semanticForms fieldset dl, form.semanticForms dl,
  fieldset fieldset dl,
  fieldset dl {
    grid-template-columns: repeat(6, minmax(var(--semanticFormsInputMinWidth), 1fr));
  }
}
@container semanticForm (width >= 1290px) and (width < 1550px) {
  form.semanticForms fieldset dl, form.semanticForms dl,
  fieldset fieldset dl,
  fieldset dl {
    grid-template-columns: repeat(5, minmax(var(--semanticFormsInputMinWidth), 1fr));
  }
}
@container semanticForm (width >= 1030px) and (width < 1290px) {
  form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-5,
  fieldset fieldset dl,
  fieldset fieldset.colspan-5 dl,
  fieldset dl,
  fieldset dl.colspan-5 {
    grid-template-columns: repeat(4, minmax(var(--semanticFormsInputMinWidth), 1fr));
  }
  form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-5,
  fieldset fieldset dl div.colspan-5,
  fieldset fieldset.colspan-5 dl div.colspan-5,
  fieldset dl div.colspan-5,
  fieldset dl.colspan-5 div.colspan-5 {
    grid-column: span 4;
  }
}
@container semanticForm (width >= 850px) and (width < 1030px) {
  form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5,
  fieldset fieldset dl,
  fieldset fieldset.colspan-4 dl,
  fieldset fieldset.colspan-5 dl,
  fieldset dl,
  fieldset dl.colspan-4,
  fieldset dl.colspan-5 {
    grid-template-columns: repeat(3, minmax(var(--semanticFormsInputMinWidth), 1fr));
  }
  form.semanticForms fieldset dl div.colspan-4,
  form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-4 dl div.colspan-4,
  form.semanticForms fieldset.colspan-4 dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-4,
  form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-4,
  form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-4 div.colspan-4,
  form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-4,
  form.semanticForms dl.colspan-5 div.colspan-5,
  fieldset fieldset dl div.colspan-4,
  fieldset fieldset dl div.colspan-5,
  fieldset fieldset.colspan-4 dl div.colspan-4,
  fieldset fieldset.colspan-4 dl div.colspan-5,
  fieldset fieldset.colspan-5 dl div.colspan-4,
  fieldset fieldset.colspan-5 dl div.colspan-5,
  fieldset dl div.colspan-4,
  fieldset dl div.colspan-5,
  fieldset dl.colspan-4 div.colspan-4,
  fieldset dl.colspan-4 div.colspan-5,
  fieldset dl.colspan-5 div.colspan-4,
  fieldset dl.colspan-5 div.colspan-5 {
    grid-column: span 3;
  }
}
@container semanticForm (width >= 510px) and (width < 850px) {
  form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-3 dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-3, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5,
  fieldset fieldset dl,
  fieldset fieldset.colspan-3 dl,
  fieldset fieldset.colspan-4 dl,
  fieldset fieldset.colspan-5 dl,
  fieldset dl,
  fieldset dl.colspan-3,
  fieldset dl.colspan-4,
  fieldset dl.colspan-5 {
    grid-template-columns: repeat(2, minmax(var(--semanticFormsInputMinWidth), 1fr));
  }
  form.semanticForms fieldset dl div.colspan-3,
  form.semanticForms fieldset dl div.colspan-4,
  form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-3 dl div.colspan-3,
  form.semanticForms fieldset.colspan-3 dl div.colspan-4,
  form.semanticForms fieldset.colspan-3 dl div.colspan-5, form.semanticForms fieldset.colspan-4 dl div.colspan-3,
  form.semanticForms fieldset.colspan-4 dl div.colspan-4,
  form.semanticForms fieldset.colspan-4 dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-3,
  form.semanticForms fieldset.colspan-5 dl div.colspan-4,
  form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-3,
  form.semanticForms dl div.colspan-4,
  form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-3 div.colspan-3,
  form.semanticForms dl.colspan-3 div.colspan-4,
  form.semanticForms dl.colspan-3 div.colspan-5, form.semanticForms dl.colspan-4 div.colspan-3,
  form.semanticForms dl.colspan-4 div.colspan-4,
  form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-3,
  form.semanticForms dl.colspan-5 div.colspan-4,
  form.semanticForms dl.colspan-5 div.colspan-5,
  fieldset fieldset dl div.colspan-3,
  fieldset fieldset dl div.colspan-4,
  fieldset fieldset dl div.colspan-5,
  fieldset fieldset.colspan-3 dl div.colspan-3,
  fieldset fieldset.colspan-3 dl div.colspan-4,
  fieldset fieldset.colspan-3 dl div.colspan-5,
  fieldset fieldset.colspan-4 dl div.colspan-3,
  fieldset fieldset.colspan-4 dl div.colspan-4,
  fieldset fieldset.colspan-4 dl div.colspan-5,
  fieldset fieldset.colspan-5 dl div.colspan-3,
  fieldset fieldset.colspan-5 dl div.colspan-4,
  fieldset fieldset.colspan-5 dl div.colspan-5,
  fieldset dl div.colspan-3,
  fieldset dl div.colspan-4,
  fieldset dl div.colspan-5,
  fieldset dl.colspan-3 div.colspan-3,
  fieldset dl.colspan-3 div.colspan-4,
  fieldset dl.colspan-3 div.colspan-5,
  fieldset dl.colspan-4 div.colspan-3,
  fieldset dl.colspan-4 div.colspan-4,
  fieldset dl.colspan-4 div.colspan-5,
  fieldset dl.colspan-5 div.colspan-3,
  fieldset dl.colspan-5 div.colspan-4,
  fieldset dl.colspan-5 div.colspan-5 {
    grid-column: span 2;
  }
}
@container semanticForm (width < 510px) {
  form.semanticForms fieldset dl, form.semanticForms fieldset.colspan-2 dl, form.semanticForms fieldset.colspan-3 dl, form.semanticForms fieldset.colspan-4 dl, form.semanticForms fieldset.colspan-5 dl, form.semanticForms dl, form.semanticForms dl.colspan-2, form.semanticForms dl.colspan-3, form.semanticForms dl.colspan-4, form.semanticForms dl.colspan-5,
  fieldset fieldset dl,
  fieldset fieldset.colspan-2 dl,
  fieldset fieldset.colspan-3 dl,
  fieldset fieldset.colspan-4 dl,
  fieldset fieldset.colspan-5 dl,
  fieldset dl,
  fieldset dl.colspan-2,
  fieldset dl.colspan-3,
  fieldset dl.colspan-4,
  fieldset dl.colspan-5 {
    grid-template-columns: 1fr;
  }
  form.semanticForms fieldset dl div.colspan-2,
  form.semanticForms fieldset dl div.colspan-3,
  form.semanticForms fieldset dl div.colspan-4,
  form.semanticForms fieldset dl div.colspan-5, form.semanticForms fieldset.colspan-2 dl div.colspan-2,
  form.semanticForms fieldset.colspan-2 dl div.colspan-3,
  form.semanticForms fieldset.colspan-2 dl div.colspan-4,
  form.semanticForms fieldset.colspan-2 dl div.colspan-5, form.semanticForms fieldset.colspan-3 dl div.colspan-2,
  form.semanticForms fieldset.colspan-3 dl div.colspan-3,
  form.semanticForms fieldset.colspan-3 dl div.colspan-4,
  form.semanticForms fieldset.colspan-3 dl div.colspan-5, form.semanticForms fieldset.colspan-4 dl div.colspan-2,
  form.semanticForms fieldset.colspan-4 dl div.colspan-3,
  form.semanticForms fieldset.colspan-4 dl div.colspan-4,
  form.semanticForms fieldset.colspan-4 dl div.colspan-5, form.semanticForms fieldset.colspan-5 dl div.colspan-2,
  form.semanticForms fieldset.colspan-5 dl div.colspan-3,
  form.semanticForms fieldset.colspan-5 dl div.colspan-4,
  form.semanticForms fieldset.colspan-5 dl div.colspan-5, form.semanticForms dl div.colspan-2,
  form.semanticForms dl div.colspan-3,
  form.semanticForms dl div.colspan-4,
  form.semanticForms dl div.colspan-5, form.semanticForms dl.colspan-2 div.colspan-2,
  form.semanticForms dl.colspan-2 div.colspan-3,
  form.semanticForms dl.colspan-2 div.colspan-4,
  form.semanticForms dl.colspan-2 div.colspan-5, form.semanticForms dl.colspan-3 div.colspan-2,
  form.semanticForms dl.colspan-3 div.colspan-3,
  form.semanticForms dl.colspan-3 div.colspan-4,
  form.semanticForms dl.colspan-3 div.colspan-5, form.semanticForms dl.colspan-4 div.colspan-2,
  form.semanticForms dl.colspan-4 div.colspan-3,
  form.semanticForms dl.colspan-4 div.colspan-4,
  form.semanticForms dl.colspan-4 div.colspan-5, form.semanticForms dl.colspan-5 div.colspan-2,
  form.semanticForms dl.colspan-5 div.colspan-3,
  form.semanticForms dl.colspan-5 div.colspan-4,
  form.semanticForms dl.colspan-5 div.colspan-5,
  fieldset fieldset dl div.colspan-2,
  fieldset fieldset dl div.colspan-3,
  fieldset fieldset dl div.colspan-4,
  fieldset fieldset dl div.colspan-5,
  fieldset fieldset.colspan-2 dl div.colspan-2,
  fieldset fieldset.colspan-2 dl div.colspan-3,
  fieldset fieldset.colspan-2 dl div.colspan-4,
  fieldset fieldset.colspan-2 dl div.colspan-5,
  fieldset fieldset.colspan-3 dl div.colspan-2,
  fieldset fieldset.colspan-3 dl div.colspan-3,
  fieldset fieldset.colspan-3 dl div.colspan-4,
  fieldset fieldset.colspan-3 dl div.colspan-5,
  fieldset fieldset.colspan-4 dl div.colspan-2,
  fieldset fieldset.colspan-4 dl div.colspan-3,
  fieldset fieldset.colspan-4 dl div.colspan-4,
  fieldset fieldset.colspan-4 dl div.colspan-5,
  fieldset fieldset.colspan-5 dl div.colspan-2,
  fieldset fieldset.colspan-5 dl div.colspan-3,
  fieldset fieldset.colspan-5 dl div.colspan-4,
  fieldset fieldset.colspan-5 dl div.colspan-5,
  fieldset dl div.colspan-2,
  fieldset dl div.colspan-3,
  fieldset dl div.colspan-4,
  fieldset dl div.colspan-5,
  fieldset dl.colspan-2 div.colspan-2,
  fieldset dl.colspan-2 div.colspan-3,
  fieldset dl.colspan-2 div.colspan-4,
  fieldset dl.colspan-2 div.colspan-5,
  fieldset dl.colspan-3 div.colspan-2,
  fieldset dl.colspan-3 div.colspan-3,
  fieldset dl.colspan-3 div.colspan-4,
  fieldset dl.colspan-3 div.colspan-5,
  fieldset dl.colspan-4 div.colspan-2,
  fieldset dl.colspan-4 div.colspan-3,
  fieldset dl.colspan-4 div.colspan-4,
  fieldset dl.colspan-4 div.colspan-5,
  fieldset dl.colspan-5 div.colspan-2,
  fieldset dl.colspan-5 div.colspan-3,
  fieldset dl.colspan-5 div.colspan-4,
  fieldset dl.colspan-5 div.colspan-5 {
    grid-column: span 1;
  }
}

form.semanticForms.lowFlow,
form.semanticForms:not(.semanticFormsActive) {
  gap: 10px;
}
form.semanticForms.lowFlow dl,
form.semanticForms:not(.semanticFormsActive) dl {
  gap: 10px;
  margin-bottom: 0px;
}
form.semanticForms.lowFlow div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]),
form.semanticForms:not(.semanticFormsActive) div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) {
  padding-left: 11px;
}
form.semanticForms.lowFlow div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]):has(dd > input[type=radio]),
form.semanticForms:not(.semanticFormsActive) div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]):has(dd > input[type=radio]) {
  margin-top: -2px;
}
form.semanticForms.lowFlow div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dt label,
form.semanticForms:not(.semanticFormsActive) div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dt label {
  transform: scale(1);
  margin-top: 4px;
  margin-left: -4px;
}
form.semanticForms.lowFlow div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dd,
form.semanticForms:not(.semanticFormsActive) div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dd {
  margin-top: 0;
}
form.semanticForms.lowFlow div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dd label,
form.semanticForms:not(.semanticFormsActive) div:not(:has(dd > ul)):has(dd > input[type=checkbox], dd > input[type=radio]) dd label {
  font-size: small;
  margin-top: -2px;
  padding-left: 10px;
}
form.semanticForms.lowFlow div:has(.align-start),
form.semanticForms:not(.semanticFormsActive) div:has(.align-start) {
  flex-direction: column;
  align-items: start;
}
form.semanticForms.lowFlow div:has(.align-start) dd,
form.semanticForms:not(.semanticFormsActive) div:has(.align-start) dd {
  display: flex;
  align-items: start;
}
form.semanticForms.lowFlow div:has(.align-center),
form.semanticForms:not(.semanticFormsActive) div:has(.align-center) {
  display: flex;
  flex-direction: column;
  align-items: center;
}
form.semanticForms.lowFlow div:has(.align-center) dd,
form.semanticForms:not(.semanticFormsActive) div:has(.align-center) dd {
  display: flex;
  align-items: center;
}
form.semanticForms.lowFlow div:has(.align-end),
form.semanticForms:not(.semanticFormsActive) div:has(.align-end) {
  flex-direction: column;
  align-items: end;
}
form.semanticForms.lowFlow div:has(.align-end) dd,
form.semanticForms:not(.semanticFormsActive) div:has(.align-end) dd {
  display: flex;
  align-items: end;
}
form.semanticForms.lowFlow dt,
form.semanticForms:not(.semanticFormsActive) dt {
  min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */
}
form.semanticForms.lowFlow dt label,
form.semanticForms:not(.semanticFormsActive) dt label {
  position: absolute;
  display: block;
  height: 11px;
  transform: scale(0.7);
  transform-origin: left center;
  padding-left: 29px;
  margin-top: -2px;
}
form.semanticForms.lowFlow dt:has(+ dd input:required) label::after,
form.semanticForms:not(.semanticFormsActive) dt:has(+ dd input:required) label::after {
  content: " *";
  color: red;
}
form.semanticForms.lowFlow dt:has(+ dd.checkboxes) label, form.semanticForms.lowFlow dt:has(+ dd.radios) label,
form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.checkboxes) label,
form.semanticForms:not(.semanticFormsActive) dt:has(+ dd.radios) label {
  padding-left: 15px;
}
form.semanticForms.lowFlow dd,
form.semanticForms:not(.semanticFormsActive) dd {
  margin-top: var(--semanticFormsInputTopMargin);
  min-width: var(--semanticFormsInputMinWidth); /* this matches the max-width of js-enabled inputs */
}
form.semanticForms.lowFlow dd.checkboxes, form.semanticForms.lowFlow dd.radios,
form.semanticForms:not(.semanticFormsActive) dd.checkboxes,
form.semanticForms:not(.semanticFormsActive) dd.radios {
  margin-top: 0;
}
form.semanticForms.lowFlow dd.checkboxes ul input[type=radio], form.semanticForms.lowFlow dd.radios ul input[type=radio],
form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul input[type=radio],
form.semanticForms:not(.semanticFormsActive) dd.radios ul input[type=radio] {
  margin-top: 3px;
}
form.semanticForms.lowFlow dd.checkboxes ul label, form.semanticForms.lowFlow dd.radios ul label,
form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul label,
form.semanticForms:not(.semanticFormsActive) dd.radios ul label {
  padding-top: 7px;
  padding-left: 0;
  font-size: var(--semanticFormsFontSize);
}
form.semanticForms.lowFlow dd.checkboxes ul + label, form.semanticForms.lowFlow dd.radios ul + label,
form.semanticForms:not(.semanticFormsActive) dd.checkboxes ul + label,
form.semanticForms:not(.semanticFormsActive) dd.radios ul + label {
  margin-top: 0;
  font-size: small;
}
form.semanticForms.lowFlow dd input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio], [type=range]),
form.semanticForms.lowFlow dd select,
form.semanticForms.lowFlow dd textarea,
form.semanticForms:not(.semanticFormsActive) dd input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio], [type=range]),
form.semanticForms:not(.semanticFormsActive) dd select,
form.semanticForms:not(.semanticFormsActive) dd textarea {
  padding-right: 6px;
}
form.semanticForms.lowFlow dd label,
form.semanticForms:not(.semanticFormsActive) dd label {
  padding-left: 10px;
  margin-top: -5px;
  font-size: small;
  color: var(--semanticFormsPlaceholderColor);
}
form.semanticForms.lowFlow dd button:not(.clear, .show),
form.semanticForms.lowFlow dd input[type=submit]:not(.clear, .show),
form.semanticForms.lowFlow dd input[type=button]:not(.clear, .show),
form.semanticForms:not(.semanticFormsActive) dd button:not(.clear, .show),
form.semanticForms:not(.semanticFormsActive) dd input[type=submit]:not(.clear, .show),
form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .show) {
  margin-top: 0;
}

.checkboxes ul,
.radios ul {
  margin-top: var(--semanticFormsInputTopMargin);
}

.semanticForms fieldset {
  border-radius: var(--semanticFormsBorderRadius);
  background: var(--semanticFormsFormSubBgColor);
  border: 1px var(--semanticFormsSubBorderColor) solid;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 20px 10px;
  margin-bottom: 15px;
}
.semanticForms fieldset fieldset, .semanticForms fieldset details {
  background-color: var(--semanticFormsNestedFieldsetBgColor);
  border: var(--semanticFormsNestedFieldsetBorder);
  margin: 0;
}
.semanticForms fieldset fieldset input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
.semanticForms fieldset fieldset select,
.semanticForms fieldset fieldset textarea, .semanticForms fieldset details input:not([type=submit], [type=reset], [type=button], [type=image], [type=checkbox], [type=radio]),
.semanticForms fieldset details select,
.semanticForms fieldset details textarea {
  background-color: var(--semanticFormsNestedInputBgColor);
}
.semanticForms details {
  box-sizing: border-box;
  position: relative;
  background-color: var(--semanticFormsFormSubBgColor);
  border: 1px var(--semanticFormsSubBorderColor) solid;
  border-radius: var(--semanticFormsBorderRadius);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  margin: 0;
  min-height: calc(var(--semanticFormsFontSize) + 20px);
}
.semanticForms details::details-content {
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
}
@supports (interpolate-size: allow-keywords) {
  .semanticForms details {
    transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms, height 250ms;
  }
  .semanticForms details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 250ms, content-visibility 250ms;
    transition-behavior: allow-discrete;
  }
}
.semanticForms details summary {
  cursor: pointer;
  margin: 0;
  margin-bottom: 10px;
  line-height: 1;
  position: absolute;
  top: 10px;
  left: 22px;
  transition: top 250ms;
}
.semanticForms details summary::-webkit-details-marker, .semanticForms details summary::marker {
  content: "";
}
.semanticForms details summary::before {
  content: "";
  border-width: 0.4rem;
  border-style: solid;
  border-color: transparent transparent transparent var(--semanticFormsTextColor);
  position: absolute;
  top: 0;
  left: -10px;
  transform: rotate(0);
  transform-origin: 0.2rem 50%;
  transition: 250ms transform ease;
}
.semanticForms details[open] {
  padding-top: 30px;
}
.semanticForms details[open]::details-content {
  visibility: visible;
  opacity: 1;
  transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
}
@supports (interpolate-size: allow-keywords) {
  .semanticForms details[open]::details-content {
    height: auto;
  }
}
.semanticForms details[open] summary::before {
  transform: rotate(90deg);
}
.semanticForms details[open] > dl:first-of-type {
  margin-top: 15px;
  margin-bottom: 15px;
}
.semanticForms details details,
.semanticForms details fieldset {
  margin-top: 10px;
  background-color: var(--semanticFormsNestedFieldsetBgColor);
  border: var(--semanticFormsNestedFieldsetBorder);
}
.semanticForms details details[open] summary::before {
  transform: rotate(90deg);
}
.semanticForms details details:not([open]) summary::before {
  transform: rotate(0deg);
}
.semanticForms dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--semanticFormsInputMinWidth), 1fr));
  gap: 10px;
  margin: 0;
}
.semanticForms dl div {
  position: relative;
  width: 100%;
  max-width: var(--semanticFormsInputMaxWidth);
}
.semanticForms dl div:has([data-max-content]) {
  min-width: 150px;
  max-width: max-content;
}
.semanticForms dl div:has([data-max-content]) dd {
  width: max-content;
}
.semanticForms dl div:has([data-max-content]) dd input, .semanticForms dl div:has([data-max-content]) dd select {
  field-sizing: content;
  min-width: 150px;
  max-width: max-content;
}
.semanticForms dl div:has(dd > button:only-child, dd > input[type=button]:only-child, dd > input[type=submit]:only-child, dd > input[type=reset]:only-child) dt label {
  display: none;
}
.semanticForms dl div dd {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}
.semanticForms dl div dd.singleCheckbox, .semanticForms dl div dd.singleRadio {
  display: grid;
  grid-template-columns: 15px 1fr;
  align-items: center;
  padding-left: 11px;
  gap: 5px 10px;
}
.semanticForms dl div dd.singleCheckbox > :not(input[type=checkbox], input[type=radio], label), .semanticForms dl div dd.singleRadio > :not(input[type=checkbox], input[type=radio], label) {
  grid-column: 1/-1;
}
.semanticForms dl div dd.singleCheckbox label:nth-of-type(2), .semanticForms dl div dd.singleRadio label:nth-of-type(2) {
  grid-column: 1/-1;
  padding: 0 10px;
  font-size: small;
  color: var(--semanticFormsTextColor);
}
.semanticForms dl div dd.singleRadio > input {
  margin: 0;
}
.semanticForms dl div dd.checkboxes ul, .semanticForms dl div dd.radios ul {
  display: flex;
  flex-direction: column;
  margin-top: var(--semanticFormsInputTopMargin);
  padding-left: 10px;
  gap: 5px;
}
.semanticForms dl div dd.checkboxes ul li, .semanticForms dl div dd.radios ul li {
  display: flex;
  align-items: center;
  gap: 5px;
}
.semanticForms dl div dd.checkboxes > label, .semanticForms dl div dd.radios > label {
  padding-left: 20px;
  font-size: small;
  color: var(--semanticFormsTextColor);
}
.semanticForms dl div dd:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) {
  margin-left: 0;
}
.semanticForms dl div dd:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) button, .semanticForms dl div dd:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) input[type=button], .semanticForms dl div dd:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) input[type=submit], .semanticForms dl div dd:has(button:only-child, input[type=button]:only-child, input[type=submit]:only-child, input[type=reset]:only-child) input[type=reset] {
  height: var(--semanticFormsInputHeight);
}
.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) button.clear, .semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) button.show {
  right: 36%;
}
.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) input:not([type=submit]), .semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) select, .semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) textarea {
  grid-row: 1/2;
  grid-column: 1/2;
}
.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) button:not(.clear, .show),
.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) input[type=submit]:not(.clear, .show),
.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) input[type=button]:not(.clear, .show) {
  grid-row: 1/2;
  grid-column: 2/3;
  width: 100%;
  max-width: 100%;
  padding: 10px;
  height: var(--semanticFormsInputHeight);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}
.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) label:nth-of-type(2),
.semanticForms dl div dd:has(input ~ button:not(.clear, .show), input ~ input[type=submit], input ~ input[type=reset], input ~ input[type=button], select ~ button:not(.clear, .show), select ~ input[type=submit], select ~ input[type=reset], select ~ input[type=button]) label:not(.floatLabelFormAnimatedLabel) {
  grid-row: 2/3;
  grid-column: 1/-1;
}
.semanticForms p:has(input:not([type=checkbox], [type=radio]), textarea, label) {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.semanticForms p:has(input[type=checkbox], input[type=radio]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea),
.semanticForms ul:has(li > input, li > label, li > button, li > select, li > textarea) {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  list-style-type: none;
}
.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea) li,
.semanticForms ul:has(li > input, li > label, li > button, li > select, li > textarea) li {
  display: flex;
  align-items: center;
}
.semanticForms div:has(.align-start) {
  display: flex;
  justify-content: start;
}
.semanticForms div:has(.align-center) {
  display: flex;
  justify-content: center;
}
.semanticForms div:has(.align-end) {
  display: flex;
  justify-content: end;
}

.semanticForms table,
table.semanticForms {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
  border: var(--semanticFormsBorder);
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
}
.semanticForms table tr.title th,
table.semanticForms tr.title th {
  background-color: var(--semanticFormsTableTitleColor);
}
.semanticForms table th,
table.semanticForms th {
  background-color: var(--semanticFormsTableHeaderColor);
  font-weight: bold;
}
.semanticForms table tr:nth-child(odd) td,
table.semanticForms tr:nth-child(odd) td {
  background-color: var(--semanticFormsTableOddColor);
}
.semanticForms table tr:nth-child(even) td,
table.semanticForms tr:nth-child(even) td {
  background-color: var(--semanticFormsTableEvenColor);
}
.semanticForms table td, .semanticForms table th,
table.semanticForms td,
table.semanticForms th {
  border-right: var(--semanticFormsTableBorder);
  border-bottom: var(--semanticFormsTableBorder);
  padding: 7px 10px;
}
.semanticForms table th:last-of-type, .semanticForms table td:last-of-type,
table.semanticForms th:last-of-type,
table.semanticForms td:last-of-type {
  border-right: none;
}
.semanticForms table tbody tr:last-of-type th, .semanticForms table tbody tr:last-of-type td,
table.semanticForms tbody tr:last-of-type th,
table.semanticForms tbody tr:last-of-type td {
  border-bottom: none;
}
.semanticForms table menu:has(li > input, li > label, li > button, li > select, li > textarea, li > a),
table.semanticForms menu:has(li > input, li > label, li > button, li > select, li > textarea, li > a) {
  width: max-content;
}

/*# sourceMappingURL=semantic-forms.css.map */