/*
  Dette stylesheet benyttes *kun* til de helt grundlæggende, responsive elementer i sidestruktur.  
  Alle ændringer og tilføjelser til dette stylesheet skal godkendes af KS.
*/
.rightPad,
.pad-right-sm {
  padding-right: 0.5em;
}
.pad-left-sm {
  padding-left: 0.5em;
}
.pad-top-sm {
  padding-top: 0.5em;
}
.pad-bottom-sm {
  padding-bottom: 0.5em;
}
.pad-all-sm {
  padding: 0.5em;
}
.pad-right-md {
  padding-right: 1em;
}
.pad-left-md {
  padding-left: 1em;
}
.pad-top-md {
  padding-top: 1em;
}
.pad-bottom-md {
  padding-bottom: 1em;
}
.pad-all-md {
  padding: 1em;
}
.pad-right-lg {
  padding-right: 1.5em;
}
.pad-left-lg {
  padding-left: 1.5em;
}
.pad-top-lg {
  padding-top: 1.5em;
}
.pad-bottom-lg {
  padding-bottom: 1.5em;
}
.pad-all-lg {
  padding: 1.5em;
}
.margin-right-sm {
  margin-right: 0.5em;
}
.margin-left-sm {
  margin-left: 0.5em;
}
.margin-top-sm {
  margin-top: 0.5em;
}
.margin-bottom-sm {
  margin-bottom: 0.5em;
}
.margin-all-sm {
  margin: 0.5em;
}
.margin-right-md {
  margin-right: 1em;
}
.margin-left-md {
  margin-left: 1em;
}
.margin-top-md {
  margin-top: 1em;
}
.margin-bottom-md {
  margin-bottom: 1em;
}
.margin-all-md {
  margin: 1em;
}
.margin-right-lg {
  margin-right: 1.5em;
}
.margin-left-lg {
  margin-left: 1.5em;
}
.margin-top-lg {
  margin-top: 1.5em;
}
.margin-bottom-lg {
  margin-bottom: 1.5em;
}
.margin-all-lg {
  margin: 1.5em;
}
.inputs-width-lg input.input-text,
input.input-text.input-width-lg,
select.input-width-lg,
textarea.input-width-lg {
  width: 25em;
}
/* formGrid */
div.formGrid {
  display: table;
}
div.formRow {
  display: table-row;
}
div.formRow > .formLabel,
div.formRow > div.formInputs,
div.formRow > div.formLiteral {
  display: table-cell;
  vertical-align: top;
}
div.formRow > .formLabel {
  padding-bottom: 0.5em;
  padding-right: 1.5em;
}
div.formRow.topPad > .formLabel,
div.formRow.topPad > .formInputs {
  padding-top: 1.5em;
}
div.formInputs label {
  display: inline-block;
  vertical-align: middle;
}
div.formInputs input[type=radio] {
  vertical-align: baseline;
}
div.formLiteral {
  padding-top: 3px;
}
.formDivider > div {
  border-top: 1px solid #dddddd;
  padding-top: 0.5em;
}
.formDivider > div.formLiteral {
  padding-top: calc(0.5em + 3px);
}
.formGrid.bottomDivider,
.bottomBorder {
  border-bottom: 1px solid #dddddd;
}
/* formInputGroup */
.formInputBundle,
.formInputGroup {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
}
.formInputs label {
  padding-right: 0.5em;
  padding-left: 0.5em;
}
.formInputGroup label {
  padding-right: 0.5em;
}
.formInputs .formInputGroup label {
  padding-left: 0;
}
.formInputGroup.vertical > label {
  display: block;
}
.formInputGroup:not([class*="pad-right-"]) {
  padding-right: 1.5em;
}
.formInputGroup.last-group {
  padding-right: 0;
}
.formInputBundle > .formInputGroup:not(:last-child) {
  padding-right: 0.5em;
}
.formInputs > .grid {
  margin-bottom: 8px;
}
/* flexboxes */
section.form-flex {
  display: flex;
  flex-wrap: wrap;
}
section.form-flex > h4 {
  flex-basis: 100%;
}
section.form-flex > .formGrid,
section.form-flex > .flex-item > .formGrid {
  margin-right: 1.5em;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-container > .flex-item {
  margin-right: 3em;
}
.flex-container > .flex-item:last-child {
  margin-right: 0;
}
@media (max-width: 768px) {
  div.formGrid,
  div.formRow,
  div.formRow > .formLabel,
  div.formRow > div.formInputs,
  div.formRow > div.formLiteral,
  .formInputBundle {
    display: block;
  }
  div.formRow > .formLabel,
  div.formRow > div.formInputs,
  div.formRow > div.formLiteral {
    vertical-align: baseline;
  }
  .formInputs {
    padding-left: 1em;
    padding-bottom: 0.5em;
  }
  div.formGrid.noLeftPad .formInputs {
    padding-left: 0;
  }
  div.formRowNoBreak > .formLabel,
  div.formRowNoBreak > div.formInputs {
    display: inline-block;
    padding-left: 0;
  }
  div.formRowNoBreak > .formLabel label:after {
    content: ":";
  }
  .formDivider > div.formInputs {
    border-top: none;
    padding-top: 0;
  }
  .formDivider > div.formLabel {
    padding-top: 0.5em;
  }
  .formInputGroup:not(.break-manual):not(.horizontal-sm) label {
    display: block !important;
    padding-left: 0;
  }
  .formInputsPadIfCompact,
  .leftPadIfCompact {
    padding-left: 1em;
  }
  select.form-control {
    max-width: 100%;
  }
  .inputs-width-lg input.input-text,
  .inputs-width-lg .arthurAC,
  input.input-text.input-width-lg,
  select.input-width-lg,
  textarea.input-width-lg {
    max-width: 100%;
  }
}
/* columnContainer */
.columnContainer,
.colcon {
  display: table;
  padding: 0px;
  margin: 0px;
}
.columnGroup,
.colgr {
  display: table-row;
}
.columnGroup > .column,
.colgr > .col {
  display: table-cell;
  vertical-align: top;
  padding-left: 1.5em;
}
.columnGroup > .column:first-child,
.colgr > .col:first-child {
  padding-left: 0;
}
.fullWidth {
  width: 100%;
}
.rightAlign,
.rightAlign-lg {
  text-align: right;
}
@media (max-width: 480px) {
  .inputs-width-lg input.input-text,
  .inputs-width-lg .arthurAC,
  input.input-text.input-width-lg,
  select.input-width-lg,
  textarea.input-width-lg {
    width: 100%;
  }
}
.columnwidth1of2,
.colw1of2 {
  width: 50%;
}
.columnwidth1of3,
.colw1of3 {
  width: 33.33333333%;
}
.columnwidth2of3,
.colw2of3 {
  width: 66.66666667%;
}
.columnwidth1of4,
.colw1of4 {
  width: 25%;
}
.columnwidth2of4,
.colw2of4 {
  width: 50%;
}
.columnwidth3of4,
.colw3of4 {
  width: 75%;
}
.columnwidth1of5,
.colw1of5 {
  width: 20%;
}
.columnwidth2of5,
.colw2of5 {
  width: 40%;
}
.columnwidth3of5,
.colw3of5 {
  width: 60%;
}
.columnwidth4of5,
.colw4of5 {
  width: 80%;
}
.columnwidth1of6,
.colw1of6 {
  width: 16.66666667%;
}
.columnwidth2of6,
.colw2of6 {
  width: 33.33333333%;
}
.columnwidth3of6,
.colw3of6 {
  width: 50%;
}
.columnwidth4of6,
.colw4of6 {
  width: 66.66666667%;
}
.columnwidth5of6,
.colw5of6 {
  width: 83.33333333%;
}
@media only screen and (max-width: 768px) {
  .columnContainer,
  .colcon,
  .columnGroup,
  .colgr,
  .columnGroup .column,
  .colgr .col {
    display: block;
  }
  .columnContainer .column,
  .colcon .col {
    padding-left: 0;
  }
  .column[class*=columnwidth],
  .col[class*=colw] {
    width: 100%;
  }
  .column.rightAlign,
  .col.rightAlign,
  .rightAlign-lg {
    text-align: left;
  }
}
@media only screen and (max-width: 1600px) {
  .columnContainer.break-xl,
  .colcon.break-xl,
  .columnContainer.break-xl > .columnGroup,
  .colcon.break-xl > .colgr,
  .columnContainer.break-xl > .columnGroup > .column,
  .colcon.break-xl > .colgr > .col {
    display: block;
  }
  .columnContainer.break-xl > .columnGroup > .column,
  .colcon.break-xl > .colgr > .col {
    padding-left: 0;
  }
  .columnContainer.break-xl > .columnGroup > .column[class*=columnwidth],
  .colcon.break-xl > .colgr > .col[class*=colw] {
    width: 100%;
  }
  .columnContainer.break-xl > .columnGroup > .column.rightAlign,
  .colcon.break-xl > .colgr > .col.rightAlign {
    text-align: left;
  }
}
@media only screen and (max-width: 1200px) {
  .columnContainer.break-lg,
  .colcon.break-lg,
  .columnContainer.break-lg > .columnGroup,
  .colcon.break-lg > .colgr,
  .columnContainer.break-lg > .columnGroup > .column,
  .colcon.break-lg > .colgr > .col {
    display: block;
  }
  .columnContainer.break-lg > .columnGroup > .column,
  .colcon.break-lg > .colgr > .col {
    padding-left: 0;
  }
  .columnContainer.break-lg > .columnGroup > .column[class*=columnwidth],
  .colcon.break-lg > .colgr > .col[class*=colw] {
    width: 100%;
  }
  .columnContainer.break-lg > .columnGroup > .column.rightAlign,
  .colcon.break-lg > .colgr > .col.rightAlign {
    text-align: left;
  }
}
@media only screen and (max-width: 992px) {
  .columnContainer.break-md,
  .colcon.break-md,
  .columnContainer.break-md > .columnGroup,
  .colcon.break-md > .colgr,
  .columnContainer.break-md > .columnGroup > .column,
  .colcon.break-md > .colgr > .col {
    display: block;
  }
  .columnContainer.break-md > .columnGroup > .column,
  .colcon.break-md > .colgr > .col {
    padding-left: 0;
  }
  .columnContainer.break-md > .columnGroup > .column[class*=columnwidth],
  .colcon.break-md > .colgr > .col[class*=colw] {
    width: 100%;
  }
  .columnContainer.break-lg > .columnGroup > .column.rightAlign,
  .colcon.break-lg > .colgr > .col.rightAlign {
    text-align: left;
  }
}