.section {
      flex-flow: row nowrap;
      position: relative;
      top: 0px;
      overflow-x: clip; /* needed, otherwise sectionbuttons may scroll off the page */
    }
    .sectioncontent {
      /*
      border: 3px solid grey;
      border-radius: 5mm;
      padding: 5mm; 
      */
    }
    .page {
      position: relative;
    }
    /* The first tmp row serves as a target for drag-and-drop, but shouldn't take up any space */
    .row.tmp:first-child {
      display: none;
      height: 5mm;
    }
    @media only screen {
      .row.tmp:first-child {
        display: block;
        height: 5mm;
      }
      .page_container.duplicate {
        display: none;
      }
    }
    .row {
      display: flex;
      gap: 5mm;
      flex-wrap: nowrap;
      align-items: stretch;
    }
    .nosectionmargin .row {
      gap: 0mm;
    }
    .nosectionmargin .row.tmp:first-child {
      height: 5mm;
    }
    .section {
      flex: 1 1 15%; 
      border: 1px dashed #ffffff00;
    }
    .sortable-group--empty {
      pointer-events: none;
    }
    .sortable-group .section {
      cursor: move;
    }
    
    .ui-sortable-placeholder {
      outline: 2px dashed red;
      visibility: visible !important;
      max-height: 100px; /* less height makes it easier to target the 'gaps' between the lines */
    }    
    
    .row.tmp {
      height: 5mm;
    }
    .nosectionmargin .row.tmp {
      height: 0mm;
    }
    
    @media only screen {
      .section.receiving, .section.receiving.hover {
        border: 1px dashed #999;
      }
      .section.hover {
        border: 1px dashed red;
      }
    }
    
    .page_container:hover .newsection, .page_container:hover .deletepage  {
      visibility: visible;
    }
    .newsection, .deletepage {
      visibility: hidden;
    }
    .newsection.receiving, .deletepage.receiving,  .page_container:hover .newsection.receiving,  .page_container:hover .deletepage.receiving {
      visibility: hidden
    }
    .newsection, .deletepage {
      position: relative;
      top: 5mm;
      margin-right: 5mm;
    }
    button.large-icon {
      height: 35px;
      vertical-align: middle;
      font-size: 16px;
    }
    .sectionbuttons {
      position: absolute;
      top: 0mm;
      right: 0mm;
      display: none;
      flex-direction: row-reverse;
      gap: 1mm;
      flex-wrap: wrap;
      z-index: 10; /* in front of startpunten-overlay */

    }
    .sectionbuttons button {
    }
    .icon-red, .icon-red:hover, .icon-red:focus {
      color: #cc0000;
    }
    .ui-icon {
      margin-top: .1em;
    }
  
    @media only screen {
      .section.hover .sectionbuttons {
        display: flex;
      }
    }
    
    html .large-icon.ui-button .ui-icon {
      margin: 0 0 0 0;
      font-size: 16pt;
    }
    
    .editpreview_container {
      height: 240px; 
      overflow-x: hidden;
      overflow-y: hidden; /* vertical scrollbar messes up the horizontal sizing */
      border: 1px solid black;
      padding: 3mm;     
      margin: 0mm;
      box-shadow: 3px 3px 3px 0px rgb(74, 74, 74) inset;
    }
    .editpreview {
      overflow-x: hidden;
      overflow-y: hidden; 
      padding-bottom: 7px; /* otherwise the descender line doesn't fit */
    }
    textarea[name=content] {
      width: 100%;
    }
    textarea.onewordperline[name=content] {
      width: 6em;
    }
    
    .slider_container {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .slider_container .slider {
      flex-grow: 1;
    }
    
    .table_style th {
    }
    .table_style th, .table_style td {
      padding-right: 10px;
      font-size: 10pt;
    }
    .table_repeat > tr > th, .table_repeat > tbody > tr > th,
    .table_repeat .subtable > tr > th, .table_repeat .subtable > tbody > tr > th {
      font-weight: bold;
      padding: 0px 5px 0px 5px;
    }
    .table_repeat > tr > th, .table_repeat > tr > td, .table_repeat > tbody > tr > th, .table_repeat > tbody > tr > td,
    .table_repeat .subtable > tr > th, .table_repeat .subtable > tr > td, .table_repeat .subtable > tbody > tr > th, .table_repeat .subtable > tbody > tr > td {
      font-size: 10pt;
      border: 1px solid #666;
    }
    .table_repeat .subtable > tr > th, .table_repeat .subtable > tr > td, .table_repeat .subtable > tbody > tr > th, .table_repeat .subtable > tbody > tr > td {
      border: 0px;
      padding: 0px 5px 0px 5px;
    }
    
    .table_repeat {
      border-collapse: collapse;
    }
    .table_repeat.pad td, .table_repeat.pad th {
      padding: 0px 5px 0px 5px;
    }
    

    .settings_container {
      display: flex;
      wrap: wrap;
      gap: 0px;
    }
    .settings_container .setting-option {
      padding: 5px 10px 5px 10px;
      border: 1px solid #555;
      border-right: 0px;
    }
    .settings_container .setting-option.setting-option-sep {
      padding: 5px 10px 5px 10px;
      border: 1px solid #555;
      border-right: 1px solid #555;
    }
    .settings_container .setting-option.selected {
      background-color: rgba(0, 253, 55, 0.22);
    }
    .settings_container .setting-option:last-child {
      border-right: 1px solid #555;
    }
    
    .my-ui-dialog-titlebar {
      display: flex;
      padding-left: 0px;
      padding-right: 0px;
      text-align: center;
    }
    .my-ui-dialog-titlebar .ui-dialog-title {
      flex-grow: 1;
      flex-shrink: 1;
      width: 60%; /* leave room for buttons */
    }
    .contents label {
      font-weight: bold;
    }
    .contents .help {
      font-style: italic;
      padding-left: 10px;
      font-size: 10pt;
    }
    .contents select {
      max-width: 12em;
    }
    .field_horizontal {
      font-size: 10pt;
    }
    .field_horizontal label {
      font-size: 12pt;
    }
    .field_repeat .lines {
      margin-top: -10px;
    }
    
    /*
    .field.highlight {
      background-color: rgba(0, 253, 55, 0.08);
      border: 1px solid #999;
    }
    .field.highlight textarea {
      margin: 0px auto 0px 10px;
      width: 90%;
    }
    */
    
    .sectiontile {
      border: 1px solid #ccc;
      float: left;
      margin: 5px;
      box-shadow: 0 0 9px 0 rgb(92, 92, 92, 31);
      width: 260px;
      overflow: hidden;
      box-sizing: border-box;
    }
    .sectiontile:hover {
      border: 1px solid #666;
      background: rgba(0, 253, 55, 0.22);
      cursor: grab;
    }
    .sectiontile h3 {
      font-weight: bold;
      font-size: 100%;
      color: #000;
      margin: 5px 5px 0px 5px;
    }
    .sectiontile-values {
      display: none;
    }
    #choosesection {
      margin: 0;
      padding: 5px 0 5px 0;
    }
    
    /* global settings */
    .setting {
      float: left;
      margin: 0 10px 0 10px;
    }
    .setting h3 {
      margin: .5em 0 0 0;
    }
    table.settings-table {
      border-spacing: 0;
      border-collapse: collapse;
    }
    table.settings-table > tbody > tr > td {
      border: 1px solid #999;
      margin: 0px;
      padding: 2px 10px 2px 10px;
      box-sizing: border-box;
    }
    table.settings-table > tbody > tr > td:hover, .button:hover {
      background-color: rgba(0,0,0,.08);
      border: 1px solid #555;
    } 
    table.settings-table > tbody > tr > td.selected, button.selected {
      background-color: rgba(0, 253, 55, 0.22);
      border: 1px solid #555;
    } 

    /* Accordion */
    ul.accordion {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    ul.accordion .inner {
      padding-left: 1em;
      display: none;
    }
    ul.accordion h3 {
      margin: 0;
      font-weight: normal;
    }

    ul.accordion li {
      margin: 0 0;
      clear: both;
    }

    ul.accordion li > a.toggle {
      width: 100%;
      display: block;
      color: #9d36bf;
      padding: 0.1em;
      border-radius: 0.15em;
      transition: background 0.3s ease;
      font-weight: bold;
    }
    ul.accordion li > a::before {
      content: "▼ ";
    }
    ul.accordion li > a::after {
      font-weight: normal;
      font-style: italic;
      color: #999;
      content: " (click to expand)";
    }
    ul.accordion li.show > a::before {
      content: "▶ ";
    }
    ul.accordion li.show > a::after {
      content: "";
    }    
    
    select.selected {
      background-color: rgba(0, 253, 55, 0.22);      
    }