:root {
  --page-background: #c9c9c9;
  --RGB-page-background: 201, 201, 201;
  --login-background: #262626;
  --RGB-login-background: 38, 38, 38;
  --login-text: #fff;
  --RGB-login-text: 255, 255, 255;
  --login-link: #9d9d9d;
  --RGB-login-link: 157, 157, 157;
  --login-panel: black;
  --RGB-login-panel: 0, 0, 0;
  --login-button-background: rgba(0, 0, 0, 0.6117647059);
  --RGB-login-button-background: 0, 0, 0;
  --login-input-background: #2B2B2B;
  --RGB-login-input-background: 43, 43, 43;
  --login-input-fill: #202020;
  --RGB-login-input-fill: 32, 32, 32;
  --login-input-label: #ccc;
  --RGB-login-input-label: 204, 204, 204;
  --login-input-color: #fff;
  --RGB-login-input-color: 255, 255, 255;
  --nav-background: #313335;
  --RGB-nav-background: 49, 51, 53;
  --nav-titlebar-background: rgba(0, 0, 0, 0.3);
  --RGB-nav-titlebar-background: 0, 0, 0;
  --nav-titlebar-text: #a4a4a4;
  --RGB-nav-titlebar-text: 164, 164, 164;
  --nav-item-text: #a4a4a4;
  --RGB-nav-item-text: 164, 164, 164;
  --nav-item-open-text: #d5d5d5;
  --RGB-nav-item-open-text: 213, 213, 213;
  --nav-item-open: rgba(0, 0, 0, 0.2);
  --RGB-nav-item-open: 0, 0, 0;
  --nav-item-hover: rgba(0, 0, 0, 0.2);
  --RGB-nav-item-hover: 0, 0, 0;
  --nav-item-border: #000000;
  --RGB-nav-item-border: 0, 0, 0;
  --nav-item-badge: rgba(0, 0, 0, 0.63);
  --RGB-nav-item-badge: 0, 0, 0;
  --nav-item-badge-text: #d2d2d2;
  --RGB-nav-item-badge-text: 210, 210, 210;
  --nav-submenu-background: #3B3B3B;
  --RGB-nav-submenu-background: 59, 59, 59;
  --titlebar-background: #969696;
  --RGB-titlebar-background: 150, 150, 150;
  --titlebar-border: #737373;
  --RGB-titlebar-border: 115, 115, 115;
  --titlebar-text: #000000;
  --RGB-titlebar-text: 0, 0, 0;
  --usermenu-background: #878787;
  --RGB-usermenu-background: 135, 135, 135;
  --usermenu-border: #656565;
  --RGB-usermenu-border: 101, 101, 101;
  --usersubmenu-background: #cccccc;
  --RGB-usersubmenu-background: 204, 204, 204;
  --usersubmenu-border: #8a8a8a;
  --RGB-usersubmenu-border: 138, 138, 138;
  --usersubmenu-item-border: #8a8a8a;
  --RGB-usersubmenu-item-border: 138, 138, 138;
  --list-header-background: #b4b4b4;
  --RGB-list-header-background: 180, 180, 180;
  --list-header-background-hover: #cbcbcb;
  --RGB-list-header-background-hover: 203, 203, 203;
  --list-row-even-background: #e0e0e0;
  --RGB-list-row-even-background: 224, 224, 224;
  --list-row-hover: #d7c38e;
  --RGB-list-row-hover: 215, 195, 142;
  --list-row-even-hover: #e3d09f;
  --RGB-list-row-even-hover: 227, 208, 159;
  --list-row-selected: #b3d0da;
  --RGB-list-row-selected: 179, 208, 218;
  --list-row-even-selected: #c4dee7;
  --RGB-list-row-even-selected: 196, 222, 231;
  --list-search-background: #e0e0e0;
  --RGB-list-search-background: 224, 224, 224;
  --form-background: #bbbbbb;
  --RGB-form-background: 187, 187, 187;
  --form-yesno-background: #535353;
  --RGB-form-yesno-background: 83, 83, 83;
  --form-buttonbar-background: #AAA;
  --RGB-form-buttonbar-background: 170, 170, 170;
  --form-buttonbar-border: #888;
  --RGB-form-buttonbar-border: 136, 136, 136;
  --form-blanket-background: rgba(0, 0, 0, 0.4);
  --RGB-form-blanket-background: 0, 0, 0;
  --form-subform-background: #AAA;
  --RGB-form-subform-background: 170, 170, 170;
  --form-section-caption-color: #FFF;
  --RGB-form-section-caption-color: 255, 255, 255;
  --form-section-caption-background: #939393;
  --RGB-form-section-caption-background: 147, 147, 147;
  --form-section-caption-background-hover: #888;
  --RGB-form-section-caption-background-hover: 136, 136, 136;
  --form-section-caption-border: #666;
  --RGB-form-section-caption-border: 102, 102, 102;
  --log-title: #888;
  --RGB-log-title: 136, 136, 136;
  --log-border: #888;
  --RGB-log-border: 136, 136, 136;
  --color-scheme:dark;
  --error-box-shadow: 0 0 5px 1px rgba(255, 0, 0, 0.33);
  --nav-border: none;
  --input-border:none;
  --input-background: rgba(246, 238, 209, 0.85);
  --button-border-radius: 8px;
  --button-filter: none;
  --button-green-background: #c9edc1;
  --button-green-border: 1px solid #8fba8f;
  --button-green-color: #4f6b4f;
  --button-green-hover-background: #d8f5d2;
  --button-green-hover-color: #1a5d1a;
  --button-red-background: #edc1c1;
  --button-red-border: 1px solid #ba8f8f;
  --button-red-color: #6b4f4f;
  --button-red-hover-background: #f5d2d2;
  --button-red-hover-color: #5d1a1a;
  --button-blue-background: #c1dced;
  --button-blue-border: 1px solid #8faeba;
  --button-blue-color: #25545b;
  --button-blue-hover-background: #d2eaf5;
  --button-blue-hover-color: #0f3d5da;
  --home-logo-opacity:0.07;
}

body.light {
  --page-background: #FFFFFF;
  --RGB-page-background: 255, 255, 255;
  --login-background: #FFFFFF;
  --RGB-login-background: 255, 255, 255;
  --login-text: #FFFFFF;
  --RGB-login-text: 255, 255, 255;
  --login-link: #FFFFFF;
  --RGB-login-link: 255, 255, 255;
  --login-panel: #1E73BE;
  --RGB-login-panel: 30, 115, 190;
  --login-button-background: #000000;
  --RGB-login-button-background: 0, 0, 0;
  --login-input-background: #FFFFFF;
  --RGB-login-input-background: 255, 255, 255;
  --login-input-fill: #FFFFFF;
  --RGB-login-input-fill: 255, 255, 255;
  --login-input-label: #152d46;
  --RGB-login-input-label: 21, 45, 70;
  --login-input-color: #000;
  --RGB-login-input-color: 0, 0, 0;
  --nav-background: #e3e7ea;
  --RGB-nav-background: 227, 231, 234;
  --nav-titlebar-background: #1964a6;
  --RGB-nav-titlebar-background: 25, 100, 166;
  --nav-titlebar-text: #FFFFFF;
  --RGB-nav-titlebar-text: 255, 255, 255;
  --nav-item-text: #000;
  --RGB-nav-item-text: 0, 0, 0;
  --nav-item-open-text: #FFFFFF;
  --RGB-nav-item-open-text: 255, 255, 255;
  --nav-item-open: #7db4e5;
  --RGB-nav-item-open: 125, 180, 229;
  --nav-item-hover: #e0ecf8;
  --RGB-nav-item-hover: 224, 236, 248;
  --nav-item-border: #99bdde;
  --RGB-nav-item-border: 153, 189, 222;
  --nav-item-badge: #c4dee8;
  --RGB-nav-item-badge: 196, 222, 232;
  --nav-item-badge-text: #000;
  --RGB-nav-item-badge-text: 0, 0, 0;
  --nav-submenu-background: #FFF;
  --RGB-nav-submenu-background: 255, 255, 255;
  --titlebar-background: #1E73BE;
  --RGB-titlebar-background: 30, 115, 190;
  --titlebar-border: #737373;
  --RGB-titlebar-border: 115, 115, 115;
  --titlebar-text: #FFFFFF;
  --RGB-titlebar-text: 255, 255, 255;
  --usermenu-background: #1E73BE;
  --RGB-usermenu-background: 30, 115, 190;
  --usermenu-border: #4F91CD;
  --RGB-usermenu-border: 79, 145, 205;
  --usersubmenu-background: #FFFFFF;
  --RGB-usersubmenu-background: 255, 255, 255;
  --usersubmenu-border: #4F91CD;
  --RGB-usersubmenu-border: 79, 145, 205;
  --usersubmenu-item-border: #d0d6da;
  --RGB-usersubmenu-item-border: 208, 214, 218;
  --list-header-background: #cfcfcf;
  --RGB-list-header-background: 207, 207, 207;
  --list-header-background-hover: #aad6f3;
  --RGB-list-header-background-hover: 170, 214, 243;
  --list-row-even-background: #f3f5f5;
  --RGB-list-row-even-background: 243, 245, 245;
  --list-row-hover: #ffe6a2;
  --RGB-list-row-hover: 255, 230, 162;
  --list-row-even-hover: #f6d885;
  --RGB-list-row-even-hover: 246, 216, 133;
  --list-row-selected: #bceafa;
  --RGB-list-row-selected: 188, 234, 250;
  --list-row-even-selected: #bceafa;
  --RGB-list-row-even-selected: 188, 234, 250;
  --list-search-background: #f3f5f5;
  --RGB-list-search-background: 243, 245, 245;
  --form-background: #FFFFFF;
  --RGB-form-background: 255, 255, 255;
  --form-yesno-background: #1E73BE;
  --RGB-form-yesno-background: 30, 115, 190;
  --form-buttonbar-background: #d5d5d5;
  --RGB-form-buttonbar-background: 213, 213, 213;
  --form-buttonbar-border: #d5d5d5;
  --RGB-form-buttonbar-border: 213, 213, 213;
  --form-blanket-background: rgba(255, 255, 255, 0.6);
  --RGB-form-blanket-background: 255, 255, 255;
  --form-subform-background: #f1f6ff;
  --RGB-form-subform-background: 241, 246, 255;
  --form-section-caption-color: #000;
  --RGB-form-section-caption-color: 0, 0, 0;
  --form-section-caption-background: #e5eaef;
  --RGB-form-section-caption-background: 229, 234, 239;
  --form-section-caption-background-hover: #d7dce1;
  --RGB-form-section-caption-background-hover: 215, 220, 225;
  --form-section-caption-border: #b4b4b4;
  --RGB-form-section-caption-border: 180, 180, 180;
  --log-title: #12528b;
  --RGB-log-title: 18, 82, 139;
  --log-border: #d7d7d7;
  --RGB-log-border: 215, 215, 215;
  --color-scheme:light;
  --error-box-shadow: 0 0 5px 3px rgb(255 0 0);
  --nav-border: 1px solid #559bd0;
  --input-border:1px solid #559bd0;
  --input-background: rgba(209, 231, 246, 0.85);
  --button-border-radius: 0px;
  --button-filter: invert(1);
  --button-green-background: #eb6be0;
  --button-green-border: 1px solid #f195e9;
  --button-green-color: black;
  --button-green-hover-background: #ee8de5;
  --button-green-hover-color: black;
  --button-red-background:#53cbdf;
  --button-red-border: 1px solid #83ddec;
  --button-red-color: black;
  --button-red-hover-background: #7cd7e7;
  --button-red-hover-color: black;
  --button-blue-background: #ff8519;
  --button-blue-color: black;
  --button-blue-hover-background: #ff993f;
  --button-blue-hover-color: black;
  --home-logo-opacity:0;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--page-background);
  color: black;
  font-family: Raleway, sans-serif;
}

body.login {
  background-color: var(--login-background);
  color: var(--login-text);
}
body.login .login {
  width: 400px;
  height: 370px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -175px;
  background-color: var(--login-panel);
  border-radius: 5px;
  background-image: url("../_img/kufatilia_light.svg");
  background-repeat: no-repeat;
  background-size: 110px 110px;
  background-position: center 20px;
  text-align: center;
  padding: 150px 20px 20px 20px;
}
body.login .login .textlink {
  width: 260px;
  margin: 0 auto 20px auto;
  font-size: 12px;
  text-align: right;
  color: var(--login-link);
}
body.login .login .textlink:hover {
  cursor: pointer;
  text-decoration: underline;
  color: white;
}
body.login .login button {
  background-color: var(--login-button-background);
  font-size: 14px;
  border: 1px solid #434343;
  color: #9d9d9d;
  padding: 8px 16px 8px 36px;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: 7px 6px;
  background-size: 20px 20px;
  background-image: url("../_img/arrow-white.svg");
  margin: 6px;
  position: relative;
}
body.login .login button .spinner {
  filter: invert(1);
  display: none;
  position: absolute;
  left: 5px;
  top: 2px;
}
body.login .login button:hover {
  background-position: 9px 6px;
  cursor: pointer;
  color: white;
}
body.login .login button.loading {
  pointer-events: none;
  background-image: none;
}
body.login .login button.loading .spinner {
  display: block;
}
body.login .login .inputbox {
  width: 260px;
  margin: 10px auto;
  background-color: var(--login-input-background);
}
body.login .login .inputbox.error {
  box-shadow: var(--error-box-shadow);
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
body.login .login .inputbox.error input {
  border-bottom: 1px solid red;
}
body.login .login label {
  position: absolute;
  pointer-events: none;
  font-size: 11px;
  text-transform: uppercase;
  padding: 12px 2px 2px 8px;
  z-index: 10;
  color: var(--login-input-label);
}
body.login .login input {
  height: 36px;
  width: 100%;
  border: none;
  border-bottom: 1px solid black;
  background-color: var(--login-input-fill);
  color: var(--login-input-color);
  padding: 10px 10px 10px 110px;
  box-shadow: inset 0 0 0px 20px var(--login-input-fill);
  color-scheme: var(--color-scheme);
}
body.login .login input:focus {
  outline: none;
  background-color: #3B3B3B;
  border-bottom: 1px solid white;
}
body.login .login.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
body.login.passwordreset {
  background-color: #2c3427;
}
body.login.passwordreset .login {
  background-image: none;
  background-color: #181d17;
  padding-top: 40px;
  width: 450px;
  margin-left: -225px;
}
body.login.passwordreset .login h2 {
  font-weight: 400;
}
body.login.passwordreset .login .intro {
  font-weight: 100;
  font-size: 16px;
}
body.login.passwordreset .login .inputbox {
  width: 375px;
}
body.login.passwordreset .login input {
  box-shadow: inset 0 0 0px 20px #2f3a2c;
  background-color: #2f3a2c;
  padding-left: 180px;
}
body.login.light .login {
  background-image: url("../_img/kufatilia_white.svg");
}

nav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: var(--nav-background);
  border-right: var(--nav-border);
}
nav .titlebar {
  color: var(--nav-titlebar-text);
  background-color: var(--nav-titlebar-background);
  border-color: black;
  padding-left: 36px;
  background-image: url("../_img/k-icon.svg");
  background-position: 4px center;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  cursor: pointer;
}
nav .menuitem {
  padding: 6px 20px;
  border-bottom: 1px solid var(--nav-item-border);
  color: var(--nav-item-text);
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
  text-align: right;
  user-select: none;
}
nav .menuitem:hover {
  background-color: var(--nav-item-hover);
}
nav .menuitem.open, nav .menuitem.open:hover {
  background-color: var(--nav-item-open);
}
nav .menuitem .submenu {
  border-top: 1px solid black;
  position: relative;
  background-color: var(--nav-submenu-background);
  margin-right: -20px;
  margin-left: -20px;
  margin-bottom: -6px;
  overflow: hidden;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
nav .menuitem .submenu .menuitem {
  border: none;
  font-size: 13px;
  padding: 3px 20px;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2901960784);
}
nav .menuitem .submenu .menuitem:last-child {
  border-bottom: none;
}
nav .menuitem .submenu .menuitem.active {
  /*background-color: rgba(255, 255, 255, 0.1);*/
}
nav .menuitem .submenu .menuitem.active:after {
  content: "";
  position: absolute;
  right: 0;
  width: 2px;
  height: 2px;
  border: 7px solid transparent;
  border-right: 5px solid #C9C9C9;
  top: 50%;
  margin-top: -7px;
}
nav .menuitem .submenu .menutitle {
  font-size: 14px;
  border-bottom: 1px solid black;
  padding: 0 20px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #a4a4a4;
}
nav .menuitem.open {
  color: var(--nav-item-open-text);
}
nav .menuitem.open .submenu {
  height: auto;
  opacity: 1;
  pointer-events: all;
}
nav .menuitem .badge {
  display: inline-block;
  background-color: var(--nav-item-badge);
  color: var(--nav-item-badge-text);
  padding: 0 6px;
  line-height: 17px;
  height: 20px;
  min-width: 20px;
  border-radius: 20px;
  text-align: center;
  margin-left: 8px;
}
nav .menuitem .dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 10px;
  top: 50%;
  margin-top: -4px;
}

.titlebar {
  height: 32px;
  background-color: var(--titlebar-background);
  border-bottom: 1px solid var(--titlebar-border);
  font-size: 20px;
  padding: 4px 4px 3px 32px;
  position: relative;
  color: var(--titlebar-text);
  background-image: url("../_img/mobile-list.svg");
  background-position: 4px center;
  background-size: 24px 24px;
  background-repeat: no-repeat;
}
.titlebar.loading {
  background-image: none;
}
.titlebar .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 4px;
}
.titlebar span {
  position: absolute;
  left: 2px;
  top: 4px;
}
.titlebar span .spinner {
  margin: 1px 4px;
}

.movedot {
  position: absolute;
  background-color: black;
  padding: 4px 8px;
  border-radius: 50px;
  margin-top: 5px;
  color: white;
  font-size: 12px;
  opacity: 0;
  margin-left: -30px;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  transform: scale(0.5);
}
.movedot.active {
  opacity: 1;
  transform: scale(1);
}
.movedot.move {
  margin-left: -10px;
}

body.light .titlebar {
  background-image: url("../_img/mobile-list-white.svg");
}
body.light nav .titlebar {
  background-image: url("../_img/k-icon.svg");
}

.usermenu {
  height: 32px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  font-size: 14px;
  min-width: 180px;
}
.usermenu .username {
  line-height: 32px;
  padding: 0 10px 0 40px;
  border-left: 1px solid var(--usermenu-border);
  background-color: var(--usermenu-background);
  background-image: url("../_img/user.svg");
  background-repeat: no-repeat;
  background-position: 4px 1px;
  background-size: 30px 30px;
  position: relative;
  z-index: 10;
  user-select: none;
  color: var(--titlebar-text);
}
.usermenu .username:hover {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.usermenu .menu {
  line-height: 32px;
  background-color: var(--usersubmenu-background);
  border: 1px solid var(--usersubmenu-border);
  margin-top: -30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, margin-top 0.2s ease-in-out;
  user-select: none;
}
.usermenu .menu .menuitem {
  border-bottom: 1px solid var(--usersubmenu-item-border);
  padding: 0 10px 0 10px;
  font-size: 12px;
}
.usermenu .menu .menuitem:last-child {
  border-bottom: none;
}
.usermenu .menu .yesno {
  width: 90px;
  float: right;
  height: 25px;
  line-height: 17px;
  margin-top: 3px;
}
.usermenu .menu .yesno span {
  width: 45px;
  font-size: 11px;
}
.usermenu .menu .yesno:before {
  width: 45px;
}
.usermenu .menu .yesno.active:before {
  left: 45px;
}
.usermenu.active .menu {
  margin-top: 0;
  opacity: 1;
  pointer-events: auto;
}

.devmode {
  position: fixed;
  background-color: #850000;
  padding: 4px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1000000;
  font-size: 12px;
  color: white;
}

.page {
  position: absolute;
  left: 200px;
  bottom: 0;
  top: 0;
  right: 0;
  overflow: hidden;
}
.page .pagecontent {
  position: absolute;
  left: 0;
  right: 0;
  top: 32px;
  bottom: 0;
  overflow: hidden;
}
.page .sidescroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.tbd {
  padding: 20px;
}

.home {
  min-height: calc(100vh - 80px);
}
.home .logo {
  position: absolute;
  margin: 10% 0 0 10%;
  opacity: var(--home-logo-opacity);
  top: 0;
  left: 0;
  width: 80%;
  height: 80%;
  background-image: url("../_img/kufatilia_light.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;
}

.list .header {
  background-color: var(--list-header-background);
  border-bottom: 1px solid #707070;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  width: max-content;
  min-width: 100%;
}
.list .header label {
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #707070;
  position: relative;
  user-select: none;
  width: 150px;
  text-transform: capitalize;
}
.list .header label:first-child {
  padding-left: 26px;
}
.list .header label:last-child:after {
  content: "";
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #d0d0d0;
}
.list .header label.asc, .list .header label.desc {
  padding-left: 14px;
}
.list .header label.asc:first-child, .list .header label.desc:first-child {
  padding-left: 26px;
}
.list .header label.asc:first-child:before, .list .header label.desc:first-child:before {
  left: 12px;
}
.list .header label.asc:before, .list .header label.desc:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #3b3b3b transparent transparent transparent;
  margin: -2px 0 0 0;
  transition: transform 0.2s ease-in-out;
}
.list .header label.desc:before {
  transform: rotate(180deg);
}
.list .header label:hover {
  cursor: pointer;
  background-color: var(--list-header-background-hover);
}
.list .header label:hover .filterbutton {
  opacity: 1;
}
.list .header label .filterbutton {
  position: absolute;
  width: 16px;
  height: 16px;
  right: 4px;
  top: 50%;
  margin-top: -8px;
  /*border: 1px solid #707070;*/
  background-image: url("../_img/filter.svg");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
}
.list .header label .filterbutton.active {
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
.list .header label .filterbutton:hover {
  opacity: 1;
  filter: brightness(0.4);
}
.list .searchrow {
  display: none;
  background-color: var(--list-search-background);
  border-bottom: 1px solid #707070;
  white-space: nowrap;
}
.list .searchrow .cell {
  position: relative;
}
.list .searchrow .cell:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 16px;
  height: 16px;
  background-image: url("../_img/search.svg");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 20;
  opacity: 0.4;
}
.list .searchrow input {
  padding-left: 20px;
  position: relative;
  width: 100%;
}
.list .searchrow.active {
  display: block;
  height: 30px;
}
.list .searchrow.active + .itemlist {
  max-height: calc(100vh - 100px - 30px);
}
.list .searchrow.active.enumfilter {
  height: 150px;
}
.list .searchrow.active.enumfilter .filterbox {
  height: 125px;
  overflow: auto;
  border-right: 1px solid #b7b7b7;
  border-top: 1px solid #b7b7b7;
}
.list .searchrow.active.enumfilter .filterbox .key {
  padding: 0 0 0 16px;
  position: relative;
  user-select: none;
  font-size: 13px;
}
.list .searchrow.active.enumfilter .filterbox .key:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 10px;
  height: 10px;
  border: solid 1px #707070;
}
.list .searchrow.active.enumfilter .filterbox .key.checked:before {
  background-color: #707070;
}
.list .searchrow.active.enumfilter + .itemlist {
  max-height: calc(100vh - 100px - 150px);
}
.list .row {
  white-space: nowrap;
  border-bottom: 1px solid #bbbbbb;
  position: relative;
}
.list .row:nth-child(even) {
  background-color: var(--list-row-even-background);
}
.list .row:hover {
  background-color: var(--list-row-hover);
  cursor: pointer;
}
.list .row:hover:nth-child(even) {
  background-color: var(--list-row-even-hover);
}
.list .row.selected {
  background-color: var(--list-row-selected);
}
.list .row.selected:nth-child(even) {
  background-color: var(--list-row-even-selected);
}
.list .row .button.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 0 2px 0 4px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center center;
  vertical-align: bottom;
  opacity: 0;
  pointer-events: none;
  position: relative;
  z-index: 2;
}
.list .row .button.icon.delete {
  background-image: url("../_img/cross-red.svg");
  filter: saturate(0);
}
.list .row .button.icon:hover {
  filter: none;
}
.list .row:hover .button.icon.active {
  opacity: 1;
  pointer-events: all;
}
.list .row.removing .button.icon.delete {
  opacity: 1;
  filter: none;
  pointer-events: none;
}
.list .row .confirm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #edc1c1;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.list .row .confirm.active {
  opacity: 1;
  padding-left: 30px;
}
.list .row .confirm button {
  min-width: 50px;
  margin-left: 4px;
  text-align: center;
  border-radius: 5px;
}
.list .cell {
  padding: 2px;
  min-width: 50px;
  display: inline-block;
  font-size: 14px;
  width: 150px;
  overflow: hidden;
  vertical-align: top;
}
.list .itemlist {
  max-height: calc(100vh - 100px);
  overflow-x: visible;
  overflow-y: auto;
  border-bottom: 1px solid #868686;
  width: fit-content;
  min-width: 100%;
}
.list .buttons {
  height: 46px;
  position: relative;
}
.list .buttons .nav {
  position: absolute;
  right: 10px;
  bottom: 5px;
  user-select: none;
}
.list .buttons .nav .info {
  font-size: 13px;
  text-align: center;
}
.list .buttons .nav .button {
  height: 22px;
  background-color: #E9E9E9;
  border: 1px solid #676767;
  border-radius: 5px;
  width: 50px;
  margin: 1px;
  display: inline-block;
  background-image: url("../_img/arrow.svg");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center center;
}
.list .buttons .nav .button.prev {
  transform: rotate(180deg);
}
.list .buttons .nav .button:hover {
  background-color: white;
  cursor: pointer;
  background-position: 20px center;
}
.list .buttons .nav .button.inactive {
  opacity: 0.4;
  pointer-events: none;
}

input,
select,
textarea {
  background: var(--input-background);
  color: black;
  padding: 2px;
  border: var(--input-border);
  min-height: 22px;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.9);
  color: black;
}
input.capitalize,
select.capitalize,
textarea.capitalize {
  text-transform: capitalize;
}
input.error,
select.error,
textarea.error {
  box-shadow: 0 0 5px 1px #ff0000;
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.sideform {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  width: 0;
  overflow: hidden;
  z-index: 5;
}
.sideform .form {
  width: 435px;
  right: -435px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--form-background);
  border-left: 1px solid black;
  transition: right 0.3s ease-in-out;
  overflow: auto;
  padding-bottom: 40px;
}
.sideform .form h3 {
  font-size: 14px;
  margin: 0 0 10px 0;
  padding: 4px 10px;
  font-weight: 300;
  border-bottom: 1px solid black;
  background-color: #555;
  color: white;
}
.sideform .form h5 {
  font-size: 14px;
  margin: 10px 0;
  padding: 4px 20px;
  font-weight: 400;
  border-bottom: 1px solid var(--form-section-caption-border);
  background-color: var(--form-section-caption-background);
  color: var(--form-section-caption-color);
}
.sideform .form input,
.sideform .form select,
.sideform .form textarea {
  width: 100%;
  margin: 4px 0;
}
.sideform .form textarea {
  height: 80px;
}
.sideform .form .NativeDatepicker {
  position: absolute;
  right: 24px;
  margin-top: 5px;
  width: 18px;
  height: 19px;
  background-image: url("../_img/calendar.svg");
  background-size: contain;
  vertical-align: middle;
  opacity: 0.7;
}
.sideform .form .NativeDatepicker:hover {
  opacity: 1;
  cursor: pointer;
}
.sideform .form .errormessage {
  border: 1px solid #c10000;
  color: #c10000;
  font-size: 14px;
  margin: 0 20px 0 20px;
  background-color: white;
  opacity: 0;
  padding: 0 10px;
  max-height: 0;
  transition: all 0.3s ease-in-out;
}
.sideform .form .buttons {
  padding: 10px 20px;
}
.sideform .form .buttons button {
  margin-left: 0;
}
.sideform .form .collection {
  border: 1px solid #292929;
  margin: 4px 0;
}
.sideform .form .collection button.add {
  margin: 4px;
}
.sideform .form .collection .subrow {
  border-bottom: 1px solid #292929;
}
.sideform .form .multiselect {
  background-color: rgba(255, 255, 255, 0.34);
  margin: 4px 0;
}
.sideform .form .multiselect .cb {
  border: 1px solid rgba(51, 105, 152, 0.3);
  background-color: rgba(98, 228, 253, 0.1);
  font-size: 13px;
  padding: 2px 2px 2px 20px;
  margin: 1px 0;
  position: relative;
  line-height: 16px;
}
.sideform .form .multiselect .cb:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(51, 105, 152, 0.3);
  left: 4px;
  top: 4px;
}
.sideform .form .multiselect .cb:hover {
  background-color: rgba(98, 228, 253, 0.2);
  cursor: pointer;
}
.sideform .form .multiselect .cb.active {
  background-color: rgba(177, 234, 246, 0.5);
}
.sideform .form .multiselect .cb.active:before {
  background-color: rgb(51, 105, 152);
  border: 1px solid rgb(51, 105, 152);
  box-shadow: inset 0 0 0 1px white;
}
.sideform .form .multiselect .cb.active + .children {
  border-left: 1px solid rgba(51, 105, 152, 0.4);
  border-right: 1px solid rgba(51, 105, 152, 0.4);
  margin-left: 10px;
  padding-left: 4px;
  position: relative;
  max-height: 300px;
  opacity: 1;
}
.sideform .form .multiselect .cb.active input {
  display: block;
}
.sideform .form .multiselect .cb input {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: -2px;
  left: 80px;
  padding: 0;
  font-size: 12px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  width: auto;
  display: none;
}
.sideform .form .multiselect .children {
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: -1px 0 0 0;
  transition: all 0.3s ease-in-out;
}
.sideform .form .multiselect .children .cb {
  border: none;
  background-color: transparent;
}
.sideform .form .multiselect.error {
  box-shadow: 0 0 5px 1px #ff0000;
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.sideform .form.form2 {
  width: 420px;
  right: -420px;
  top: 25px;
}
.sideform .form.form2 h4 {
  font-size: 24px;
  font-weight: 300;
  margin: 0;
  padding: 10px 0 10px 20px;
}
.sideform .form.inerror .errormessage {
  opacity: 1;
  padding: 10px;
  max-height: 100px;
  margin: 10px 20px 0 20px;
}
.sideform.active {
  width: 435px;
}
.sideform.active .form {
  right: 0;
}
.sideform.active .form.out {
  right: -435px;
}
.sideform.active.double {
  width: 835px;
}
.sideform.active.double .form {
  right: 0;
  width: 835px;
}
.sideform.active.double .form .detail {
  width: 400px;
}
.sideform.active.double .form .detail.indent {
  margin-top: -24px;
  padding: 0 0 30px 20px;
  position: relative;
}
.sideform.active.double .form.out {
  right: -835px;
}
.sideform.active.double .form.form2 {
  width: 420px;
  right: 0;
  top: 25px;
}
.sideform.active.double .form.form2.out {
  right: -420px;
}

.fieldset {
  padding: 4px 20px;
  position: relative;
  max-height: 1300px;
  transition: all 0.3s ease-in-out;
}
.fieldset.collapsed {
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
}
.fieldset label {
  color: #3a3a3a;
  display: block;
  font-size: 14px;
}
.fieldset.single {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.fieldset.hidden {
  display: none;
}

.yesno {
  border: 1px solid #434343;
  width: 100px;
  flex-shrink: 0;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.yesno span {
  display: inline-block;
  width: 50px;
  padding: 4px 0;
  text-align: center;
  font-size: 13px;
  color: #888;
  position: relative;
  z-index: 1;
}
.yesno span:first-child {
  color: white;
}
.yesno:hover {
  border: 1px solid #737373;
  cursor: pointer;
}
.yesno:before {
  position: absolute;
  content: "";
  width: 50px;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: var(--form-yesno-background);
  transition: left 0.2s ease-in-out;
}
.yesno.active:before {
  left: 50px;
}
.yesno.active span {
  color: white;
}
.yesno.active span:first-child {
  color: #888;
}

.h50 {
  height: 50px;
}

.warningbox {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #b83606;
  padding: 10px 10px 10px 40px;
  margin: 10px 0;
  font-size: 12px;
  color: #9f1700;
  border-radius: 5px;
  position: relative;
  background-image: url("../_img/warning.svg");
  background-repeat: no-repeat;
  background-position: 6px 4px;
  background-size: 28px 28px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
button {
  background-color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  border: 1px solid #737373;
  color: #656565;
}
button.green {
  background-color: var(--button-green-background);
  border: var(--button-green-border);
  color: var(--button-green-color);
  filter: var(--button-filter);
}
button.red {
  background-color: var(--button-red-background);
  border: var(--button-red-border);
  color: var(--button-red-color);
  filter: var(--button-filter);
}
button.blue {
  background-color: var(--button-blue-background);
  border: var(--button-blue-border);
  color: var(--button-blue-color);
  filter: var(--button-filter);
}
button.primary {
  padding: 8px 16px 8px 36px;
  border-radius: var(--button-border-radius);
  background-repeat: no-repeat;
  background-position: 7px 6px;
  background-size: 20px 20px;
  background-image: url("../_img/arrow.svg");
  margin: 6px;
  position: relative;
}
button.primary .spinner {
  position: absolute;
  left: 2px;
  top: 2px;
  display: none;
}
button.primary.loading {
  pointer-events: none;
  background-image: none;
}
button.primary.loading .spinner {
  display: block;
}
button.primary.error {
  box-shadow: 0 0 5px 1px #ff0000;
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
button.secondary, button.tertiary {
  border-radius: 6px;
  background-repeat: no-repeat;
  background-image: url("../_img/arrow.svg");
  background-size: 16px 16px;
  background-position: 4px 2px;
  margin: 2px;
  padding: 3px 6px 3px 24px;
  font-size: 13px;
}
button.tertiary {
  font-size: 12px;
  border: none;
  background-color: transparent;
  opacity: 0.7;
}
button.text {
  border: none;
  background-color: transparent;
  padding: 3px 6px 3px 24px;
  background-repeat: no-repeat;
  background-image: url("../_img/arrow.svg");
  background-size: 16px 16px;
  background-position: 4px 2px;
}
button:hover {
  cursor: pointer;
  background-color: #FFFFFF;
  color: #000;
  opacity: 1;
}
button:hover.green {
  background-color: var(--button-green-hover-background);
  color: var(--button-green-hover-color);
}
button:hover.red {
  background-color: var(--button-red-hover-background);
  color: var(--button-red-hover-color);
}
button:hover.blue {
  background-color: var(--button-blue-hover-background);
  color: var(--button-blue-hover-color);
}
button.add {
  background-image: url("../_img/add.svg");
}
button.delete {
  background-image: url("../_img/cross.svg");
}
button.export {
  background-image: url("../_img/download.svg");
}
button.check {
  background-image: url("../_img/check.svg");
}
button.edit {
  background-image: url("../_img/edit.svg");
}
button.float {
  float: left;
}
button.hidden {
  display: none;
}
button.arrow:hover {
  background-position: 10px 6px;
}
button.arrow:hover.secondary {
  background-position: 6px 2px;
}
button.icon {
  padding: 0;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin: 0;
  border-radius: 2px;
  background-position: center center;
  background-size: 17px 17px;
  background-repeat: no-repeat;
  opacity: 0.4;
}
button.icon:hover {
  opacity: 1;
}
button.icon.nobackground {
  background-color: transparent;
  border: none;
}
button.disabled {
  opacity: 0.4;
}
button.disabled:hover {
  opacity: 1;
}
button.disabled:hover .hovermessage {
  opacity: 1;
  margin-top: -40px;
  pointer-events: none;
}
button .hovermessage {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  background-color: white;
  padding: 4px;
  border-radius: 5px;
  border: 1px solid #3a3a3a;
  top: 0;
  margin-top: 0;
  transition: all 0.2s ease-in-out;
}

.closebutton {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background-image: url("../_img/cross.svg");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.8;
  border-radius: 50%;
}
.closebutton:hover {
  opacity: 1;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.75);
}
.closebutton.light {
  filter: invert(1);
}

.detail {
  padding: 10px;
  position: absolute;
  bottom: 0;
  top: 25px;
  left: 0;
  right: 0;
  overflow: auto;
  padding-bottom: 100px;
}
.detail #mapView {
  height: 200px;
  border: 1px solid #888;
}
.detail .coordinates {
  position: absolute;
  z-index: 10;
  background-color: white;
  padding: 2px;
  font-size: 12px;
  margin: -26px 0 0 7px;
  border: 1px solid #888;
}
.detail .location {
  background-color: #717171;
  color: white;
  font-size: 13px;
  padding: 2px;
}
.detail table {
  border: 1px solid #666;
  width: 100%;
  border-collapse: collapse;
}
.detail table tr > td {
  padding-left: 12px;
}
.detail table tr.caption,
.detail table tr.caption:nth-child(odd) {
  background-color: rgba(17, 114, 140, 0.1);
}
.detail table tr.caption td,
.detail table tr.caption:nth-child(odd) td {
  padding-top: 16px;
  padding-left: 2px;
}
.detail table td {
  border-bottom: 1px solid #666;
  font-size: 14px;
  padding: 2px;
  position: relative;
}
.detail table td .infodot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(0, 186, 255, 0.4);
  right: 2px;
  top: 2px;
  border: 1px solid #666;
  text-align: center;
  line-height: 16px;
  font-size: 12px;
  color: black;
}
.detail table td .infodot:hover {
  background-color: #fff;
  cursor: pointer;
}
.detail table tr:last-child td {
  border-bottom: none;
}
.detail table tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}
.detail h4 {
  margin: 10px 0 4px 0;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}
.detail .description {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 4px;
  font-size: 14px;
  border: 1px solid #888;
}
.detail .commentbox,
.detail .actionbox {
  border: 1px solid #888;
  font-size: 14px;
  margin-bottom: 4px;
}
.detail .commentbox .author,
.detail .actionbox .author {
  background-color: rgba(0, 0, 0, 0.1);
  font-weight: 600;
  padding: 4px;
}
.detail .commentbox .comment,
.detail .actionbox .comment {
  padding: 4px;
  background-color: rgba(255, 255, 255, 0.2);
}
.detail .commentbox .date,
.detail .actionbox .date {
  font-style: italic;
  text-align: right;
  padding: 6px;
  font-size: 12px;
}
.detail .commentbox button.tertiary,
.detail .actionbox button.tertiary {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}
.detail .commentbox:hover button.tertiary,
.detail .actionbox:hover button.tertiary {
  opacity: 0.7;
  pointer-events: all;
}
.detail .commentform {
  display: none;
  margin-bottom: 10px;
}
.detail .files a {
  text-decoration: none;
  font-size: 12px;
  color: gray;
}
.detail .files a img {
  max-width: 100px;
  max-height: 100px;
  display: block;
  margin-bottom: 4px;
}
.detail .files a:hover {
  color: black;
}

.tab {
  margin: 0 -10px;
}
.tab:first-child {
  margin-top: -10px;
}
.tab h4.tabtitle {
  background-color: var(--form-section-caption-background);
  border-bottom: 1px solid var(--form-section-caption-border);
  color: var(--form-section-caption-color);
  padding: 10px 10px 10px 24px;
  position: relative;
  margin: 0;
}
.tab h4.tabtitle:before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 16px;
  height: 16px;
  background-image: url("../_img/caret.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(90deg);
  margin-top: -8px;
  transition: transform 0.3s ease-in-out;
}
.tab h4.tabtitle:hover {
  cursor: pointer;
  background-color: var(--form-section-caption-background-hover);
}
.tab h4.tabtitle button.addcomment {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.tab .tabcontent {
  padding: 10px;
  transition: all 0.3s ease-in-out;
  max-height: 3000px;
  opacity: 1;
}
.tab.collapsed h4.tabtitle:before {
  transform: rotate(0);
}
.tab.collapsed .tabcontent {
  overflow: hidden;
  max-height: 0;
  padding: 0 10px;
  pointer-events: none;
  opacity: 0;
}

.incidentactions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  transition: background-color 0.3s ease-in-out;
}
.incidentactions .buttonsbar {
  background-color: var(--form-buttonbar-background);
  border-top: 1px solid var(--form-buttonbar-border);
}
.incidentactions .actionform {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--form-subform-background);
  border-top: 1px solid #888;
  opacity: 0;
  transform: translateY(100px);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.incidentactions .actionform.active {
  opacity: 1;
  transform: translateY(0);
}
.incidentactions.active {
  background-color: var(--form-blanket-background);
  top: 0;
  overflow: hidden;
  z-index: 10;
}
.incidentactions.active .buttonsbar {
  display: none;
}

.sideform .actionform .content {
  padding: 0 10px 40px 10px;
}

.spinner {
  position: relative;
  width: 21px;
  height: 21px;
  margin: 4px;
  display: inline-block;
}
.spinner:after {
  content: "";
  position: absolute;
  left: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid black;
  border-top-color: rgba(0, 0, 0, 0.3);
  animation: spin 1s infinite linear;
}
.spinner:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: black;
  animation: spin2 2.8s infinite linear;
  transform-origin: top left;
}
.spinner.wide {
  margin: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes spin2 {
  0% {
    transform: rotate(359deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.loadertext {
  opacity: 0.5;
  margin: 10px 32px;
}

.chartContainer {
  position: relative;
  z-index: 1;
}
.chartContainer .chart {
  position: relative;
  width: 320px;
  height: 300px;
  background-color: white;
  border-radius: 10px;
  margin: 20px 0 20px 20px;
  display: inline-block;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4705882353);
}
.chartContainer .chart .front {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: white;
  left: 50%;
  margin-left: -70px;
  text-align: center;
  font-family: sans-serif;
  top: 90px;
  z-index: 1000;
  padding-top: 24px;
}
.chartContainer .chart .front small {
  font-size: 12px;
  color: grey;
  display: block;
}
.chartContainer .chart .front b {
  display: block;
  font-size: 20px;
  margin-top: 6px;
}
.chartContainer .chart .piechart {
  position: absolute;
  left: 20px;
  top: 20px;
}
.chartContainer .chart .pie {
  width: 280px;
  height: 140px;
  border-radius: 140px 140px 0 0;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  transition: transform 0.3s ease-in-out, opacity 1s ease-in-out;
  pointer-events: none;
}
.chartContainer .chart .pie .lower {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #208aff;
  border: 1px solid white;
  border-radius: 140px 140px 0 0;
  transition: transform 0.7s ease-in-out;
  transform-origin: bottom center;
  pointer-events: auto;
}
.chartContainer .chart .pie .upper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: white;
  transition: transform 0.5s ease-in-out;
  transform-origin: bottom center;
}
.chartContainer .chart .pie.active, .chartContainer .chart .pie:hover {
  transform: scale(1.1);
  cursor: pointer;
}
.chartContainer .chart .pie.enlarged {
  transform: scale(1.05);
}
.chartContainer .chart .pie.fadeout {
  opacity: 0;
}
.chartContainer .legend {
  position: absolute;
  top: 170px;
  left: 10px;
  right: 10px;
}
.chartContainer .legend .item {
  font-family: sans-serif;
  opacity: 0;
  margin-left: 50px;
  transition: all 0.5s ease-in-out;
  padding: 4px 4px 4px 30px;
  font-weight: 100;
  height: 24px;
  overflow: hidden;
}
.chartContainer .legend .item.visible {
  opacity: 1;
  margin-left: 0;
  z-index: 2000;
  position: relative;
}
.chartContainer .legend .item.active, .chartContainer .legend .item:hover {
  margin-left: 10px;
  font-weight: 600;
  cursor: pointer;
}
.chartContainer .legend .item .dot {
  width: 12px;
  height: 12px;
  position: absolute;
  margin-left: -20px;
  margin-top: 2px;
}
.chartContainer .legend .item .label span {
  display: inline-block;
}
.chartContainer .legend .item .label .main {
  width: 50%;
}
.chartContainer .legend .item .label .val {
  width: 20%;
  text-align: right;
}
.chartContainer .legend .item .label .pct {
  width: 20%;
  text-align: right;
}
.chartContainer .legend .item.fadeout {
  height: 0;
  padding: 0 0 0 60px;
  opacity: 0;
}

.dashboard {
  padding-right: 240px;
}
.dashboard .logContainer {
  position: absolute;
  right: 20px;
  top: 22px;
  border: 1px solid var(--log-border);
  border-radius: 10px;
  max-width: 220px;
}
.dashboard .logContainer .title {
  background-color: var(--log-title);
  color: white;
  padding: 5px 10px;
  border-radius: 10px 10px 0 0;
  margin-top: -2px;
  font-size: 14px;
}
.dashboard .logContainer .logitem {
  padding: 5px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--log-border);
  cursor: pointer;
}
.dashboard .logContainer .logitem:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.dashboard .logContainer .logitem:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.2);
}
.dashboard .logContainer .logitem:nth-child(odd):hover {
  background-color: rgba(255, 255, 255, 0.6);
}
.dashboard .logContainer .logitem .logdate {
  color: #888;
  font-size: 10px;
  margin-right: 10px;
}
.dashboard .logContainer .logitem:last-child {
  border-bottom: none;
}

.information-page {
  background-color: white;
  margin: 40px;
  padding: 40px;
}
.information-page h1 {
  font-size: 50px;
  font-weight: 100;
  margin: 0 0 20px 0;
  padding: 0;
}
.information-page a {
  color: #002E6C;
}
.information-page a:hover {
  color: #B90B2E;
}
.information-page .logos {
  display: flex;
  margin-top: 50px;
}
.information-page .logos a {
  display: block;
  height: 100px;
  background-image: url("../_img/ipis.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 30%;
  margin: 10px;
}
.information-page .logos a.ipis {
  background-image: url("../_img/ipis.png");
}
.information-page .logos a.usaid {
  background-image: url("../_img/usaid.png");
}
.information-page .logos a.tujenge {
  background-image: url("../_img/tujenge.png");
}

.translatebox {
  position: relative;
}
.translatebox .button {
  position: absolute;
  padding: 2px;
  bottom: 0;
  right: 0;
  font-size: 12px;
  background-color: #d2d269;
  display: none;
}
.translatebox .button:hover {
  background-color: #b7ffae;
  cursor: pointer;
}
.translatebox:hover .button {
  display: block;
}

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