@charset "UTF-8";
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden; }

body {
  color: #333;
  margin: 0;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 16px;
  overflow-x: hidden; }

a {
  color: #0064c8;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

a:visited {
  color: #0050a0; }

p {
  margin: 0;
  padding: 0; }

.lt {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  height: 100%; }

.lt-0, .lt-200, .lt-250 {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "c1 c2";
  height: 100%;
  overflow: hidden; }

.lt-250 {
  grid-template-columns: 250px 1fr; }

.lt-1 {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 54px 1fr;
  gap: 0px 0px;
  grid-template-areas: "a1 a2" "b1 b2";
  height: 100%;
  overflow: hidden; }

.pt-0 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 54px 1fr;
  gap: 0px 0px;
  grid-template-areas: "r1" "r2";
  width: 100%;
  height: 100%; }

.c1 {
  grid-area: c1;
  overflow: auto; }

.c2 {
  grid-area: c2;
  overflow: auto; }

.r1 {
  grid-area: r1;
  overflow: auto; }

.r2 {
  grid-area: r2;
  overflow: auto; }

.ll-loader {
  height: 100%; }

.hgrau {
  background-color: #EFEFEF; }

.bg-1 {
  background-color: #CCCCCC; }

.bg-2 {
  background-color: #DDDDDD; }

.bg-3 {
  background-color: #F9F9F9; }

.bg-4 {
  background-color: #FFFFFF; }

.bg-clr-0 {
  background-color: #BA181B; }

.bg-clr-1 {
  background-color: #E5383B; }

.bg-clr-2 {
  background-color: #B1A7A6; }

.bg-clr-3 {
  background-color: #D3D3D3; }

.bg-clr-4 {
  background-color: #F5F3F4; }

.bg-clr-5 {
  background-color: #FFFFFF; }

.div50 {
  float: left;
  width: 50%; }

.border-bottom {
  border-bottom: 1px solid #EFEFEF; }

.margin-l10 {
  margin-left: 10px; }

.margin-l20 {
  margin-left: 20px; }

.margin-l30 {
  margin-left: 30px; }

.lt {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  height: 100%; }

.lt-0, .lt-200, .lt-250 {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "c1 c2";
  height: 100%;
  overflow: hidden; }

.lt-250 {
  grid-template-columns: 250px 1fr; }

.lt-1 {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 54px 1fr;
  gap: 0px 0px;
  grid-template-areas: "a1 a2" "b1 b2";
  height: 100%;
  overflow: hidden; }

.pt-0 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 54px 1fr;
  gap: 0px 0px;
  grid-template-areas: "r1" "r2";
  width: 100%;
  height: 100%; }

.c1 {
  grid-area: c1;
  overflow: auto; }

.c2 {
  grid-area: c2;
  overflow: auto; }

.r1 {
  grid-area: r1;
  overflow: auto; }

.r2 {
  grid-area: r2;
  overflow: auto; }

.ll-loader {
  height: 100%; }

.hgrau {
  background-color: #EFEFEF; }

.bg-1 {
  background-color: #CCCCCC; }

.bg-2 {
  background-color: #DDDDDD; }

.bg-3 {
  background-color: #F9F9F9; }

.bg-4 {
  background-color: #FFFFFF; }

.bg-clr-0 {
  background-color: #BA181B; }

.bg-clr-1 {
  background-color: #E5383B; }

.bg-clr-2 {
  background-color: #B1A7A6; }

.bg-clr-3 {
  background-color: #D3D3D3; }

.bg-clr-4 {
  background-color: #F5F3F4; }

.bg-clr-5 {
  background-color: #FFFFFF; }

.div50 {
  float: left;
  width: 50%; }

.border-bottom {
  border-bottom: 1px solid #EFEFEF; }

.margin-l10 {
  margin-left: 10px; }

.margin-l20 {
  margin-left: 20px; }

.margin-l30 {
  margin-left: 30px; }

.inner-1, .inner-2 {
  height: calc(100% - 12px);
  border: 1px solid white;
  margin: 5px; }

.hgrau {
  background-color: #EFEFEF; }

.bg-1 {
  background-color: #CCCCCC; }

.bg-2 {
  background-color: #DDDDDD; }

.bg-3 {
  background-color: #F9F9F9; }

.bg-4 {
  background-color: #FFFFFF; }

.bg-clr-0 {
  background-color: #BA181B; }

.bg-clr-1 {
  background-color: #E5383B; }

.bg-clr-2 {
  background-color: #B1A7A6; }

.bg-clr-3 {
  background-color: #D3D3D3; }

.bg-clr-4 {
  background-color: #F5F3F4; }

.bg-clr-5 {
  background-color: #FFFFFF; }

/* File: clours.sass
 * Project: Pona 21
 * File Created: Tuesday, 31st August 2021 2:53:38 pm
 * Author: Heinz Zürcher (hzuercher@huenet.ch)
 * -----
 * Last Modified: Tuesday, 31st August 2021 2:53:38 pm
 * Modified By: Heinz Zürcher (hzuercher@huenet.ch>)
 * -----
 * Copyright 2019 - 2021 Heinz Zürcher, Huenet AG
 */
.themeone {
  --p-1: white;
  --p-1-color: black;
  --p-2: black;
  --p-2-color: white; }

.themetwo {
  --p-1: #DEDEDE;
  --p-1-color: black;
  --p-2: #555555;
  --p-2-color: white; }

.themeone, .themetwo {
  width: 100px;
  height: 40px;
  float: left;
  diplay: block;
  border: 1px solid black;
  margin: 5px;
  margin-top: 10px; }

.themeone.colorone, .themeone > .colorone {
  color: var(--p-1-color);
  background-color: var(--p-1); }

.themeone.colortwo, .themeone > .colortwo {
  color: var(--p-2-color);
  background-color: var(--p-2); }

.themetwo.colorone, .themetwo > .colorone {
  color: var(--p-1-color);
  background-color: var(--p-1); }

.themetwo.colortwo, .themetwo > .colortwo {
  color: var(--p-2-color);
  background-color: var(--p-2); }

.login-container {
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center; }

.login-row {
  width: auto; }

.login-button {
  color: white;
  background-color: #EE0000;
  border: none;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  outline: none;
  border-radius: 4px;
  display: block;
  margin-top: 12px;
  line-height: 1.8;
  font-size: 12px;
  padding: 10px 18px;
  min-width: 120px;
  transition: all 150ms ease;
  cursor: pointer; }
  .login-button:hover {
    background-color: #DD0000; }

.person-container {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 16px;
  padding-top: 15px;
  padding-left: 0px;
  width: 100%;
  background-color: none;
  position: relative; }
  .person-container .element {
    float: left;
    margin-right: 10px;
    margin-left: 10px; }
    .person-container .element .item {
      line-height: 14px;
      vertical-align: bottom;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 18px;
      display: inline;
      float: left;
      margin-top: 4px;
      width: calc(100% - 40px); }
  .person-container .active {
    font-weight: 700; }

.small-icon {
  height: 24px;
  display: inline;
  padding-right: 10px; }

.nav-container {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 16px;
  margin-top: 10px;
  width: 100%;
  background-color: none;
  position: relative;
  padding-bottom: 20px; }

.nav-item-break {
  margin-top: 5px; }

.nav-item {
  cursor: pointer;
  padding-top: 10px;
  padding-left: 10px;
  clear: both; }
  .nav-item::after {
    clear: both;
    content: "";
    display: table; }
  .nav-item .item {
    line-height: 14px;
    vertical-align: bottom;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 18px;
    display: inline;
    float: left;
    margin-top: 4px;
    width: calc(100% - 40px); }
  .nav-item .active {
    font-weight: 700;
    color: black;
    background-color: transparent; }
    .nav-item .active:hover {
      color: black;
      background-color: transparent; }

.iconcolor, .iconcolorwhite, .iconcolorgrau {
  color: OrangeRed;
  margin-right: 5px;
  display: inline-block;
  float: left;
  width: 20px; }

.iconcolorwhite {
  color: #FFFFFF; }

.iconcolorgrau {
  color: #A2A2A2; }

.iconcolorred {
  color: OrangeRed; }

.head-small {
  overflow: hidden;
  background-color: none; }

.head48 {
  height: 48px; }
  .head48::after {
    clear: both;
    content: "";
    display: table; }
  .head48 .inner-left {
    padding: 8px;
    padding-top: 24px;
    padding-left: 20px; }
    .head48 .inner-left::after {
      clear: both;
      content: "";
      display: table; }
  .head48 .inner-right {
    padding: 8px;
    padding-top: 12px;
    padding-right: 20px; }
    .head48 .inner-right::after {
      clear: both;
      content: "";
      display: table; }

.head-icon {
  float: right;
  cursor: pointer; }

.listblock, .listblock-top {
  position: relative;
  background-color: white;
  border-radius: 4px;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 210px;
  border-bottom: 1px solid #EFEFEF;
  min-height: 70px;
  margin-bottom: 10px;
  color: black;
  cursor: pointer; }
  .listblock:hover, .listblock-top:hover {
    background-color: #F7F7F7;
    border-bottom: none; }
  .listblock .inner, .listblock-top .inner {
    margin-left: 10px;
    font-size: 16px; }
  .listblock .footer, .listblock-top .footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 0px;
    color: #A2A2A2; }

.active {
  background-color: #FFFFFF;
  border-bottom: none;
  color: white; }
  .active .footer {
    color: #FFFFFF; }
  .active:hover {
    background-color: #FF0000;
    border-bottom: none;
    color: #FFFFFF; }

.listblock-top {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-bottom: 0px;
  background-color: #222222;
  color: white; }
  .listblock-top:hover {
    background-color: #555555;
    border-bottom: none; }

.list .listblock {
  width: 84%; }

.edit-settings {
  min-height: 100%;
  padding: 20px;
  width: calc(100% - 40px);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; }

.view-content {
  width: calc(100% - 40px);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; }

.editlistblock, .editlistblock-top {
  position: relative;
  background-color: white;
  border-radius: 4px;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 210px;
  border-bottom: 1px solid #EFEFEF;
  min-height: 70px;
  margin-bottom: 10px;
  color: black;
  cursor: pointer; }
  .editlistblock:hover, .editlistblock-top:hover {
    background-color: #F7F7F7;
    border-bottom: none; }
  .editlistblock .inner, .editlistblock-top .inner {
    margin-left: 10px;
    font-size: 16px; }
  .editlistblock .footer, .editlistblock-top .footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 0px; }

.active {
  background-color: #FF0000;
  border-bottom: none;
  color: #FFFFFF; }
  .active .footer {
    color: #FFFFFF; }
  .active:hover {
    border-bottom: none;
    color: #FFFFFF; }

.editlistblock-top {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-bottom: 0px;
  color: white;
  background-color: red; }
  .editlistblock-top:hover {
    background-color: red;
    border-bottom: none; }

.editlistblock-content {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-bottom: 10px;
  color: #777777;
  background-color: #F2F2F2;
  width: 210px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  overflow: auto; }
  .editlistblock-content:hover {
    background-color: #EFEFEF;
    border-bottom: none; }
  .editlistblock-content .active {
    color: black;
    background-color: #EFEFEF; }
  .editlistblock-content .inner {
    padding: 0px;
    padding-bottom: 10px;
    cursor: pointer;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 24px;
    border-bottom: 1px solid #FAFAFA; }
    .editlistblock-content .inner .item {
      line-height: 18px;
      vertical-align: bottom;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline;
      float: left;
      margin-top: 4px;
      width: calc(100% - 40px); }
    .editlistblock-content .inner .item-icon {
      float: left;
      margin-top: 4px;
      width: 40px;
      text-align: right; }

.listpadding {
  padding-left: 20px;
  padding-right: 20px; }

.imgcol {
  width: calc(12.5% - 10px);
  float: left;
  margin: 5px;
  opacity: 1; }
  .imgcol .container {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden; }
    .imgcol .container .cont {
      position: absolute;
      display: table-cell;
      top: 1px;
      left: 1px;
      right: 1px;
      bottom: 1px;
      vertical-align: middle;
      text-align: center; }
      .imgcol .container .cont img {
        max-height: 100%;
        max-width: 100%; }

.imgcolintro {
  width: calc(33% - 10px);
  float: left;
  margin: 5px;
  opacity: 1; }
  .imgcolintro .container {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden; }
    .imgcolintro .container .cont {
      position: absolute;
      display: table-cell;
      top: 1px;
      left: 1px;
      right: 1px;
      bottom: 1px;
      vertical-align: middle;
      text-align: center; }
      .imgcolintro .container .cont img {
        max-height: 100%;
        max-width: 100%; }

.md-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s;
  background: #dedede;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: none; }

.md-container {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 475px;
  width: 300px;
  background-color: none;
  z-Index: 201;
  opacity: 1;
  /* transition: opacity 350ms */
  /* transition: width 0ms, height 0ms, opacity 350ms, left 0ms, top 0ms, transform 250ms */
  transition: opacity 250ms, transform 250ms;
  display: none; }

.md-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  opacity: 1; }

.md-link {
  display: inline-block;
  top: 20px;
  left: 20px;
  height: 20px;
  border: 1px solid black;
  color: black;
  margin: 10px;
  padding: 20px;
  width: 30%;
  background-color: white; }

.md-shrinktwo {
  animation: shrinktwo 100ms forwards; }

.md-shrink {
  animation: shrink 150ms forwards cubic-bezier(0.92, 0.09, 0.18, 2.05); }

.md-grow {
  animation: grow 150ms forwards cubic-bezier(0.92, 0.09, 0.18, 1.05); }

@keyframes grow {
  0% {
    transform: scale(0.9, 0.1);
    opacity: 0; }
  100% {
    opacity: 1;
    transform: scale(1); } }
@keyframes shrink {
  0% {
    transform: scale(1);
    opacity: 1; }
  100% {
    opacity: 0;
    transform: scale(0.9, 0.1); } }
@keyframes shrinktwo {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: scale(0); } }
.md-listimg {
  padding: 5px;
  padding-bottom: 3px;
  background-color: white;
  border-radius: 7px;
  width: 160px;
  float: left;
  margin-right: 5px;
  margin-left: 5px; }
  .md-listimg::after {
    clear: both;
    content: "";
    display: table; }
  .md-listimg img {
    width: 100%; }

.md-100 {
  width: 100%;
  height: 100%;
  overflow: hidden; }

.md-imglist {
  position: relative;
  padding: 0px;
  padding-top: 10px;
  padding-bottom: 20px;
  background-color: white;
  border-radius: 7px;
  width: calc(100% - 10px);
  height: calc(100% - 30px);
  float: left;
  margin-right: 5px;
  margin-left: 5px;
  overflow-y: auto; }
  .md-imglist::after {
    clear: both;
    content: "";
    display: table; }
  .md-imglist .inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 10px; }
    .md-imglist .inner::after {
      clear: both;
      content: "";
      display: table; }

.md-actionlist {
  padding: 0px;
  padding-top: 10px;
  padding-bottom: 20px;
  background-color: white;
  border-radius: 7px;
  width: 200px;
  float: left;
  margin-right: 5px;
  margin-left: 5px;
  box-shadow: 0px 0px 3px 0px rgba(200, 200, 200, 0.5); }
  .md-actionlist::after {
    clear: both;
    content: "";
    display: table; }
  .md-actionlist .inner {
    padding: 10px;
    border-bottom: 1px solid #F9F9F9; }
    .md-actionlist .inner:hover {
      background-color: #FAFAFA; }

.md-action {
  cursor: pointer;
  padding: 0px;
  clear: both; }
  .md-action::after {
    clear: both;
    content: "";
    display: table; }
  .md-action .item {
    line-height: 14px;
    vertical-align: bottom;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 18px;
    display: inline;
    float: left;
    margin-top: 4px;
    width: calc(100% - 40px); }
  .md-action .item-icon {
    float: left;
    margin-top: 4px;
    width: 40px;
    text-align: right; }

.switch {
  --switchcolor: red;
  position: relative;
  display: inline-block;
  width: 80px;
  height: 16px; }

.switch input {
  opacity: 0;
  width: 0;
  height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 16px; }

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  top: 2px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%; }

input:checked + .slider {
  background-color: var(--switchcolor); }

input:checked + .slider {
  /* box-shadow: 0 0 1px #2196f3 */
  box-shadow: 0 0 1px var(--switchcolor); }

input:checked + .slider:before {
  -webkit-transform: translateX(64px);
  -ms-transform: translateX(64px);
  transform: translateX(64px); }

.switchlabel, .switchlabeltwo {
  float: right;
  padding-right: 10px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  width: calc(100% - 100px);
  color: #000000; }

.switchlabeltwo {
  color: #777777; }

.switcher {
  clear: left;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  display: block;
  position: relative; }

.switcherbutton {
  position: absolute;
  background-color: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.theswitch {
  float: right;
  margin-top: 5px;
  margin-bottom: 5px; }

.switchbottom {
  clear: both; }

/* File: form.sass
 * Project: Pona 21
 * File Created: Monday, 30th August 2021 9:37:01 am
 * Author: Heinz Zürcher (hzuercher@huenet.ch)
 * -----
 * Last Modified: Monday, 30th August 2021 9:37:01 am
 * Modified By: Heinz Zürcher (hzuercher@huenet.ch>)
 * -----
 * Copyright 2019 - 2021 Heinz Zürcher, Huenet AG
 */
input {
  box-sizing: border-box;
  border: 1px solid #FF0000;
  outline: none;
  overflow-y: auto;
  margin: 0;
  margin-top: 1px;
  padding: 0;
  padding-left: 15px;
  width: 100%;
  text-align: left;
  font-size: 14px;
  line-height: 16px; }

.sitebackground {
  background: #EBE9E7;
  color: #333333;
  margin: 10px;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 20px;
  border-radius: 8px; }

.sitestyle .sf-layout {
  background: #EBE9E7;
  color: #333333; }
  .sitestyle .sf-layout .sf-content {
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    width: calc(100% - 0px);
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto; }

.sf-layout {
  background: #EBE9E7;
  color: #333333; }
  .sf-layout .sf-content {
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    width: calc(100% - 0px);
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto; }

/*# sourceMappingURL=style.css.map */