html {
  font-size: 150%;
  height: 100%;
}

body {
  overflow:hidden;
  font-family: system-ui;
  height: 100%;
  margin: 0;
}

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box-container {
  display: contents;
}

div.top {
  flex: 0 1 auto;
  height: 100px;
}

div.top h1 {
  float: left;
  margin-top: 0;
  font-size: 3rem;
}

div.main {
  flex: 0 1 auto;
  margin: 5px 10px;
}

.main {
  overflow: hidden;
}

div.bottom {
  flex: 1 1 auto;
  padding: 0 5px 10px 5px;
  min-height: 0;
}

div.error {
  padding: 10px;
  border: 2px solid #f00;
  color: #f00;
  margin: 10px 52px 20px 40px;
  width: auto;
}

.hidden {
  display: none;
}

.removed {
    text-decoration: line-through;
    color: #CCC;
}


.view label {
    margin-right: 20px;
}

.modal {
    display: none;
  }
  
  .modal.is-open {
    display: block;
  }
          
table#knoppen {
    width: 100%;
    margin: 5px;
}

/* td {
  border: 1px solid gray;
} */

div.knop {
    padding-top: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

table.edit div.knop:not([data-slug]) {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cellipse stroke-width='0' ry='14.16665' rx='14.41666' id='svg_1' cy='15.83333' cx='16.08333' stroke='%23ffffff' fill='%23dddddd'/%3E%3Cline stroke-width='3' id='svg_2' y2='26.24998' x2='15.83333' y1='6' x1='16' stroke='%23ffffff' fill='none'/%3E%3Cline stroke-width='3' id='svg_3' y2='16' x2='26.16665' y1='16' x1='6.16668' stroke='%23ffffff' fill='none'/%3E%3Cline id='svg_4' y2='28.58331' x2='54.16659' y1='28.74997' x1='54.16659' stroke='%23ffffff' fill='none'/%3E%3C/g%3E%3C/svg%3E");
}

div.button {
  padding-top: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  width: 100%;

}

div.buttonwrapper{
  width: 80px;
  float: right;
  margin: 10px 10px 0 -10px;
}

div.terug {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' fill='%23aaa' width='48'%3E%3Cpath d='m313-435 232 233-64 63-342-342 341-341 65 64-232 232h509v91H313Z'/%3E%3C/svg%3E");
}

div.undo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  width='48' height='48' viewBox='-5 -5 34 34' fill='%23aaa' %3E%3Cpath d='M18.885 3.515c-4.617-4.618-12.056-4.676-16.756-.195l-2.129-2.258v7.938h7.484l-2.066-2.191c2.82-2.706 7.297-2.676 10.073.1 4.341 4.341 1.737 12.291-5.491 12.291v4.8c3.708 0 6.614-1.244 8.885-3.515 4.686-4.686 4.686-12.284 0-16.97z'/%3E%3C/svg%3E");
}

div.edit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48' fill='%23aaa' %3E%3Cpath d='M216-140q-32 0-54-22t-22-54q0-32 22-54t54-22q32 0 54 22t22 54q0 32-22 54t-54 22Zm0-264q-32 0-54-22t-22-54q0-32 22-54t54-22q32 0 54 22t22 54q0 32-22 54t-54 22Zm0-264q-32 0-54-22t-22-54q0-32 22-54t54-22q32 0 54 22t22 54q0 32-22 54t-54 22Zm264 264q-32 0-54-22t-22-54q0-32 22-54t54-22q32 0 54 22t22 54l-76 76Zm0-264q-32 0-54-22t-22-54q0-32 22-54t54-22q32 0 54 22t22 54q0 32-22 54t-54 22Zm-42 517v-78l238-239 79 79-238 238h-79Zm306-517q-32 0-54-22t-22-54q0-32 22-54t54-22q32 0 54 22t22 54q0 32-22 54t-54 22Zm39 251-78-79 28-28q9-9 24-10t26 9l30 30q10 11 9.5 25.5T812-446l-29 29Z'/%3E%3C/svg%3E");
}

div.help {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48' fill='%23aaa' %3E%3Cpath d='M483.93-236q18.07 0 30.57-12.43 12.5-12.429 12.5-30.5 0-18.07-12.43-30.57-12.429-12.5-30.5-12.5-18.07 0-30.57 12.43-12.5 12.429-12.5 30.5 0 18.07 12.43 30.57 12.429 12.5 30.5 12.5ZM443-389h71q0-28.324 6-51.162Q526-463 563-494q31-25 44.5-50.919 13.5-25.919 13.5-57.987 0-56.51-36.848-89.302Q547.304-725 486.469-725 432-725 392.5-698.5 353-672 336-625l63 24q9-27 30.5-44t53.5-17q32 0 53 17.5t21 45.5q0 22-13.714 41.5Q529.571-538 505-517q-33 28-47.5 54T443-389Zm36.542 325Q394.36-64 318.52-97.02q-75.84-33.02-132.16-89.34-56.32-56.32-89.34-132.291T64-480q0-86.272 33.079-162.149 33.079-75.878 89.686-132.47 56.606-56.592 132.216-88.986Q394.59-896 479.557-896q86.329 0 162.512 32.395 76.183 32.394 132.557 89Q831-718 863.5-641.958q32.5 76.041 32.5 162.5 0 85.458-32.395 160.797-32.394 75.338-88.986 131.921-56.592 56.582-132.616 89.661Q565.979-64 479.542-64Zm.458-73q142.513 0 242.756-100.744Q823-338.487 823-480q0-142.513-100.244-242.756Q622.513-823 480-823q-141.513 0-242.256 100.244Q137-622.513 137-480q0 141.513 100.744 242.256Q338.487-137 480-137Zm0-343Z'/%3E%3C/svg%3E");
}

div.edit.done {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48' fill='%23aaa' %3E%3Cpath d='M378-225 133-470l66-66 179 180 382-382 66 65-448 448Z'/%3E%3C/svg%3E");
}

div.reset {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48' fill='%23aaa' %3E%3Cpath d='m763-166-85 85-52-51 86-85-86-85 52-52 85 86 85-86 51 52-85 85 85 85-51 51-85-85ZM222-64q-48.833 0-83.417-34.583Q104-133.167 104-182.412V-330h122v-566h630v470q-17-7-35-11.5t-38-6.5v-379H299v493h265q-9 17-15.5 35T538-257H177v75q0 19 13 32t31 13h332q7 20 18.3 38.509Q582.6-79.983 596-64H222Zm137-586v-73h364v73H359Zm0 133v-73h364v73H359Zm194 380H177h361-4.1H553Z'/%3E%3C/svg%3E");
}

div.sound.on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48' fill='%23aaa' %3E%3Cpath d='M559.174-101.891v-74.332q104.891-28.19 170.859-112.799Q796-373.63 796-481.761q0-107.369-65.967-191.717-65.968-84.348-170.859-112.538v-74.332q135.468 28.658 222.049 134.796 86.581 106.139 86.581 243.791 0 139.174-86.081 245.813-86.081 106.638-222.549 134.057Zm-466.978-245v-266.457H260.63l218.544-218.826v704.348L260.63-346.891H92.196Zm446.978 41.369v-349.195q57.239 18.717 91.978 66.616t34.739 108.117q0 60.223-34.739 108.104-34.739 47.88-91.978 66.358ZM401.63-638.413 294.544-535.804H169.739v111.608h124.805L401.63-320.587v-317.826ZM312.065-480Z'/%3E%3C/svg%3E");
}
div.sound.off {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48' fill='%23aaa' %3E%3Cpath d='M820.761-37 693.652-163.348q-31.609 21.326-67.358 37.13-35.75 15.805-75.881 24.327v-74.283q24.131-6.522 47.359-15.207 23.228-8.684 43.837-24.489L470.413-388.304v260.478L252.348-346.891H83.674v-266.457h162.609L27.717-834.109l50.805-50.804 793.282 795.87L820.761-37Zm-16.152-246.283-52.566-53.043q18.479-33.239 26.957-69.521 8.478-36.282 8.478-75.914 0-109.692-65.587-195.878-65.587-86.187-171.478-108.426v-74.283q135.413 28.718 222.261 134.826 86.848 106.109 86.848 243.761 0 53.478-14.098 103.598t-40.815 94.88Zm-154.152-154.63L550.413-538.435v-109.282q49.239 23.478 78.218 68.597Q657.609-534 657.609-480q0 11.391-1.598 21.663t-5.554 20.424Zm-180.044-181-105.652-107.37 105.652-105.891v213.261ZM392.87-315.587v-149.978l-69.761-70.239H160.978v111.608h123.805L392.87-315.587Zm-34.761-184.978Z'/%3E%3C/svg%3E");
}

div.admin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'  fill='%23aaa' %3E%3Cpath d='M120-160v-80h480v80H120Zm520-280q-83 0-141.5-58.5T440-640q0-83 58.5-141.5T640-840q83 0 141.5 58.5T840-640q0 83-58.5 141.5T640-440Zm-520-40v-80h252q7 22 16 42t22 38H120Zm0 160v-80h376q23 14 49 23.5t55 13.5v43H120Zm500-200h40v-160h-40v160Zm20-200q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6Z'/%3E%3C/svg%3E");
}

div.download {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'  fill='%23aaa' %3E%3Cpath d='M480-310 267-523l52-52 124 124v-365h73v365l124-124 53 52-213 213ZM217-144q-28.725 0-50.863-22.137Q144-188.275 144-217v-143h73v143h526v-143h73v143q0 29-22.138 51-22.137 22-50.862 22H217Z'/%3E%3C/svg%3E");
}

.bottom div {
  float: left;
}

.bottom h3 {
  margin-left: 10px;
  font-size: 1rem;
}

.totals {
  width: 30%;
  background-color: #eee;
  margin: 0 5px;
  max-height: 100%;
  overflow-y: auto;
}

.order {
  width: 65%;
  background-color: #eee;
  margin: 0 5px;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.order ul {
  column-count: 3;
}

div#aantalmunten {
  float: none;
  color: darkgreen;
  margin-top: -1rem;
  margin-left: 10px;
}

div.button.verkoop {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48' fill='%230a0' %3E%3Cpath d='M378-225 133-470l66-66 179 180 382-382 66 65-448 448Z'/%3E%3C/svg%3E");
}
div.button.annuleerverkoop {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48' fill='%23a00' %3E%3Cpath d='m249-186-63-63 231-231-231-230 63-64 231 230 231-230 63 64-230 230 230 231-63 63-231-230-231 230Z'/%3E%3C/svg%3E");
}

.controls {
  /* width: 50px; */
  margin-left: 15px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.historie {
  scroll-behavior: auto;
  max-height: 100%;
  overflow-y: auto;
  width: auto;
  min-width: 150px;
  background-color: #eee;
  margin: 0 5px;
  position: relative;
}

.historie #loglist {
  padding-inline-start: 25px;
  padding-right: 25px;
}

.historie ul {
  list-style: none;
}


.flexwrapper {
  width: 120px;
  height: 120px;
  margin: 0 5px 5px 0;
  float: left;
}

.modal__footer {
  clear: left;
  padding-top: 20px;
}

div.attribution {
  clear: left;
  margin-top: 20px;
}

div.attribution a {
  color: #ddd;
  font-size: .8rem;
}

.dagtotaal {
  height: 45px;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  margin: 0 50px 25px 40px;
  background-color: #eee;
}

.dagtotaal.klapuit {
  height: 340px;
}

.dagtotaal .kop::before {
  content: ">";
  color: #d8d8d8;
  height: 45px;
  font-weight: bold;
  position: absolute;
  right:15px;
  transition: all 0.5s ease-in-out;
}

.dagtotaal.klapuit .kop::before {
  transform: rotateZ(90deg);
  transform-origin: center;
}

.dagtotaal .kop {
  height: 45px;
  font-size: 1.2rem;
  background-color:#2fa499;
  position: relative;
  padding: 3px 10px;
  color: #d8d8d8;
  cursor: pointer;
}

.dagtotaal .body {
  height: 305px;
  padding-top: 15px;
}

.dagtotaal .body ul {
  columns: 3;
}

.dagtotaal .kop input[type="checkbox"] {
  height: 21px;
  width: 21px;
  cursor:default;
}

/**************************\
  Basic Modal Styles
\**************************/

.modal {
    font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
  }
  
  .modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal__container {
    background-color: #fff;
    padding: 30px;
    max-width: 700px;
    max-height: 100vh;
    border-radius: 4px;
    overflow-y: auto;
    box-sizing: border-box;
  }
  
  .modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    color: #00449e;
    box-sizing: border-box;
  }
  
  .modal__close {
    background: transparent;
    border: 0;
  }
  
  .modal__header .modal__close:before { content: "\2715"; }
  
  .modal__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: rgba(0,0,0,.8);
  }
  
  .modal__btn {
    font-size: 1.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background-color: #e6e6e6;
    color: rgba(0,0,0,.8);
    border-radius: .25rem;
    border-style: none;
    border-width: 0;
    cursor: pointer;
    -webkit-appearance: button;
    text-transform: none;
    overflow: visible;
    line-height: 1.15;
    margin: 0;
    will-change: transform;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out,-webkit-transform .25s ease-out;
  }
  
  .modal__btn:focus, .modal__btn:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  
  .modal__btn-primary {
    background-color: #00449e;
    color: #fff;
  }
  

  /**************************\
    Demo Animation Style
  \**************************/
  @keyframes mmfadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  
  @keyframes mmfadeOut {
      from { opacity: 1; }
        to { opacity: 0; }
  }
  
  @keyframes mmslideIn {
    from { transform: translateY(15%); }
      to { transform: translateY(0); }
  }
  
  @keyframes mmslideOut {
      from { transform: translateY(0); }
      to { transform: translateY(-10%); }
  }
  
  .micromodal-slide {
    display: none;
  }
  
  .micromodal-slide.is-open {
    display: block;
  }
  
  .micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  
  .micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
  }
  
  .micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  
  .micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
  }
  
  .micromodal-slide .modal__container,
  .micromodal-slide .modal__overlay {
    will-change: transform;
  }

.versienummer {
  font-size: 0.35em;
  font-weight: normal;
  opacity: 0.5;
  vertical-align: middle;
}

.syncstatus {
  background-color: #eee;
  padding: 12px 20px;
  margin: 10px 50px 25px 40px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.syncstatus h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: #2fa499;
}

.syncstatus .sync-table {
  width: 100%;
  border-collapse: collapse;
}

.syncstatus .sync-table th {
  text-align: left;
  font-weight: normal;
  color: #888;
  border-bottom: 1px solid #ddd;
  padding: 4px 8px;
}

.syncstatus .sync-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f3f3f3;
}

.syncstatus .sync-table tr.eigen td {
  font-weight: bold;
}

.syncstatus .sync-table tr:last-child td {
  border-bottom: none;
}

.syncstatus em {
  color: #2fa499;
  font-style: normal;
  font-weight: normal;
  margin-left: 6px;
}

.status-bol {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #888;
}

.status-ok .status-bol { background-color: #4a4; }
.status-warn .status-bol { background-color: #fa3; }
.status-fout .status-bol { background-color: #c33; }

.syncstatus .acties {
  text-align: right;
  width: 30px;
}

.syncstatus .verwijder-client {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}

.syncstatus .verwijder-client:hover {
  color: #c33;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 40px auto;
  border: 4px solid #ddd;
  border-top-color: #2fa499;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}