.page-client form,
.page-login form,
.page-appsettings form {
  max-width: 30em;
  margin: 0 auto;
}

.page-appsettings form {
  margin-top: 1.8em;
}

.all {
  /*max-width: 1920px;*/
  background: inherit;
  margin: 0 auto;
}

.pages {
  flex: 1 1 100%;
  background: inherit;
  position: relative;
}

.page {
  pointer-events: none;
  background: inherit;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  left: 0;
  right: 0;
  width: 100%;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  transform: translateX(20px);
  -webkit-transform: translateX(0);
  /* ! */
  opacity: 0;
}

.page.active {
  pointer-events: all;
  -webkit-transform: translateX(0);
  transform: translateX(0px);
  z-index: 2;
  opacity: 1;
}

.block {
  margin-bottom: 1em;
}

.actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.actions-center {
  justify-content: center;
}

.actions-justified {
  justify-content: space-between;
}

.actions > * {
  flex: 0 1 auto;
  margin-bottom: 0.9em;
}

@media (max-width: 50em) {
  .no-s {
    display: none !important;
  }
  .actions {
    max-width: calc(100vw - 20px);
  }
  .actions button {
    flex-grow: 1;
    margin-bottom: 0.5em;
  }
}

.button-main {
  flex-grow: 1;
}

.actions-single > * {
  margin-bottom: 0;
}


.head {
  overflow: hidden;
}

.head > * {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

.main {
  z-index: 1;
  position: relative;
}

.column-padded {
  padding: 1em 1em 0;
}


.tablebox {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 720px) {
  .cols {
    display: flex;
    justify-content: space-between;
  }
  .cols-centered {
    align-items: center;
  }

  .cols-1-1g > * {
    flex: 0 0 49%;
  }
  .cols-2-1 > * {
    flex: 0 0 65%;
  }
  .cols-2-1 > * + * {
    flex: 0 0 35%;
  }

  .cols-1-1-1g > * {
    flex: 0 1 50%;
  }
  .cols-1-1-1g .copy-buttons {
    flex-grow: 1;
    flex-basis: 5%; 
    align-self: center;
    text-align: center;
  }

  .columns {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .columns + .columns {
    margin-top: 1.8em;
  }
  .columns + .columns-nomargin {
    margin-top: 0;
  }

  .columns > * {
    display: table-cell;
    vertical-align: top;
  }
  .columns-text > *:first-child {
    padding-right: 15px;
  }
  .colums-1-1 > * {
    width: 50%;
  }
  .colums-1-2 > *:first-child {
    width: 25%;
  }

  .columns-2-1 > *:first-child,
  .tabset-2-1 > .tabs {
    width: 65%;
    width: calc(65% - 4px);
  }
  .tabset-2-1 > .tabs {
    width: calc(65% - 4px);
  }

  .column-middle {
    vertical-align: middle;
  }

  .columns-main > *:first-child {
    position: relative;
  }
}

@media (max-width: 1199px) {
  .columns-main,
  .columns-main > * {
    display: block;
    margin-bottom: 1em;
  }
}


@media (min-width: 1200px) {
  .main {
    padding-left: 12px;
    padding-right: 14px;
  }

  .mainpanel {
    padding: 0 0 10px;
    max-height: calc(100vh - 0.6em - 1.8em);
    overflow: auto;
  }

  .maintabpanel {
    padding: 0 2px 20px;
  }

  .columns-main > *:first-child {
    width: 75%;
    z-index: 10;
  }

  .column-fixed {
    z-index: 20;
    position: relative;
    /* top: 0;
    bottom: 0;
    right: 0; */
    width: 25%;
    padding-left: 10px;
  }

  .minimap,
  .minimap-closer {
    margin-top: 14px;
  }

  .settingstabs {
    height: 100%;
    overflow: auto;
    margin-right: -14px;
  }

  .settings-sidefixed {
    position: fixed;
    right: 14px;
    width: 32.5%;
    max-height: 85%;
    overflow: auto;
  }


  /* REMOVE ON TABLEFIXED */
  .column-fixed > div {
    overflow: auto;
    max-height: calc(100% - 14px - 300px);
    padding: 0 2px;
  }
  .column-fixed > .side-content {
    max-height: 100%;
  }
  .column-fixed > .side-content-map {
    max-height: calc(100% - 14px - 300px);
  }
}


/* flex */

.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.flex-container > * {
  flex: 1 auto;
}

.notifications {
  z-index: 100;
  position: fixed;
  top: 0;
  left: auto;
  right: 0;
  width: 100%;
  max-width: 600px;
}

.notifications > div {
  padding: .8em 15px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #fff;
}
.notifications > .notification-ok {
  background: rgb(49, 173, 0);
}

.notifications h2,
.notifications p {
  font-size: 1em;
  margin: 0;
}