@charset "UTF-8";

/* colors go here */
:root {
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-font-size: 15px;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-emphasis-color: #000;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-bg: #e9ecef;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-bg: #f8f9fa;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
  --bs-dark-color: #2c3338;
  --bs-warning: #ffc107;
}

.koko-analytics {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background: #efefef;
}
.koko-analytics p {
  font-size: var(--bs-body-font-size);
}
.koko-analytics a {
  color: var(--bs-link-color);
  text-decoration: underline;
}
.koko-analytics a:hover {
  --bs-link-color: var(--bs-link-hover-color);
}

/* uniform margin between embedded wp admin view and standalone dashboard */
body.koko-analytics {
  margin: 0 0 0 20px;
}
.ka-wrap {
  padding: 20px 20px 20px 0;
  margin: 0;
}
@media(max-width: 782px) {
  body.koko-analytics {
    margin-left: 10px;
  }
  .ka-wrap { padding: 10px 10px 10px 0; }
}
/* end uniform margin */

/* dashboard box */
.ka-box {
  background: #fff;
  border-radius: var(--bs-border-radius);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
/* end dashboard box */

/* filters (top of dashboard) */
.ka-filter {
  display: inline-block;
  padding: 0.75rem;
  cursor: pointer;
  font-size: var(--bs-body-font-size);
  line-height: 1;
  background: #fff;
  border: 0;
  border-radius: var(--bs-border-radius);
}
.ka-filter:hover,
.ka-filter:focus  {
  background: var(--bs-tertiary-bg);
}
/* end filters */

/* chart */
.ka-chart {
  overflow: visible;
  min-height: 200px;
  font-size: 0.8rem;
}
.ka-chart--tooltip {
  position: absolute;
  z-index: 9991; /* above wp admin menu */
  font-size: 0.9rem;
}
.ka-chart--tooltip-box {
  background: var(--bs-dark-color);
  box-shadow: var(--bs-box-shadow);
  border-radius: 4px;
  color: white;
}
.ka-chart--tooltip-heading {
  font-weight: 600;
  padding: 0.75rem;
  line-height: 1;
  text-align: center;
}
.ka-chart--tooltip-content {
  padding: 0.5rem 1rem;
  width: 50%;
  display: block;
  flex: 1;
}
.ka-chart--tooltip-content {
  border-top: 3px solid transparent;
}
.ka-chart--tooltip-amount {
  color: white;
  font-weight: bold;
}
.ka-chart--tooltip-arrow {
  width: 0;
  height: 0;
  margin-left: auto;
  margin-right: auto;
  /* css trick to create a downward pointing triangle */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(46, 54, 63, 0.96);
}
.ka--pageviews {
  border-top-color: #72aee6;
  fill: #72aee6;
}
.ka--visitors {
  border-top-color: #2271b1;
  fill: #2271b1;
}
.weekend .ka--visitors {
  fill: #195585;
}

.page-filter-active tr  {
  opacity: 0.5;
}
.page-filter-active tr.page-filter-active  {
  opacity: 1;
}

/* grid */
.ka-row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.ka-col {
  box-sizing: border-box;
  flex: 1 0 0;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.ka-col-12 {
  flex: 0 0 auto;
  width: 100%;
}
.ka-row-cols-1 .ka-col {
  flex: 0 0 auto;
  width: 100%;
}
.ka-row-cols-2 .ka-col {
  flex: 0 0 auto;
  width: 50%;
}
/* end grid */

/* tables */
.ka-table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
  box-sizing: border-box;
}

.ka-table th,
.ka-table td {
  text-align: left;
  border-top: 1px solid rgb(240, 240, 240);
  padding: 0.4rem 0.6rem;
}
.ka-table th {
  background-color: var(--bs-dark-color);
  border-color: var(--bs-dark-color);
  color: white;
}
.ka-table th:first-child {
  border-top-left-radius: 6px;
}
.ka-table th:last-child {
    border-top-right-radius: 6px;
}
.w-fit { width: 6ch; min-width: fit-content; }
/* end tables */

/* forms */
.ka-label {
  display: block;
  margin-bottom: 0.5em;
  font-weight: bold;
}
.ka-input,
.koko-analytics .ka-input {
  display: block;
  width: 100%;
  max-width: none;
  padding: .375rem .75rem;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  box-sizing: border-box;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ka-input {
    transition: none;
  }
}
.ka-input[type=file] {
  overflow: hidden;
}
.ka-input[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.koko-analytics .ka-input:focus,
.ka-input:focus {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
  border-color: #86b7fe !important;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.ka-input:disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}
.ka-input::-webkit-file-upload-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.ka-input::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .ka-input::-webkit-file-upload-button {
    -webkit-transition: none;
    transition: none;
  }
  .ka-input::file-selector-button {
    transition: none;
  }
}
.ka-input:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: var(--bs-secondary-bg);
}
.ka-input:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-secondary-bg);
}
textarea.ka-input {
  min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
}
.ka-input::-webkit-datetime-edit {
  display: block;
  padding: 0;
}
.ka-select,
.koko-analytics .ka-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  max-width: none;
  padding: .375rem 2.25rem .375rem .75rem;
  font-size: var(--bs-body-font-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ka-select {
    transition: none;
  }
}
.ka-select:hover {
  color: inherit !important;
}
.ka-select:focus,
.koko-analytics .ka-select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.ka-select[multiple], .ka-select[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
}
.ka-select:disabled {
  background-color: var(--bs-secondary-bg);
}
.ka-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--bs-body-color);
}
/* end forms */

/* pagination */
.ka-pagination {
  display: flex;
  padding: 0.5rem 1rem;
  border-top: 1px solid rgb(240, 240, 240);
}
.ka-pagination--next {
    margin-left: auto;
}

/* spacing */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; }

.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-5 { gap: 3rem !important; }

/* display */
.d-block { display: block !important; }
.d-inline { display: inline-block !important!; }
.d-none { display: none !important; }
.d-flex { display: flex !important; flex-flow: row wrap; }
.justify-content-between { justify-content: space-between; }

/* text */
.font-monospace {
  font-family: var(--bs-font-monospace) !important;
}
.text-end { text-align: right !important; }
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-white { color: white !important; }
.text-black {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
}
.text-success { color: limegreen !important; }
.text-danger { color: #fb7272 !important; }
.text-muted { color: #646970 !important; }
.text-truncate { overflow: hidden; text-overflow:ellipsis;  white-space: nowrap; }
.text-decoration-none { text-decoration: none !important; }
.text-reset { --bs-text-opacity: 1; color: inherit !important; }
.fw-bold {
  font-weight: 700 !important;
}

/* background */
.bg-dark { background: var(--bs-dark-color); color: white; }
.bg-dark .text-muted { color: #DDD !important; }
.bg-white { background: white; }

.border { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
.shadow { box-shadow: var(--bs-box-shadow) !important; }
.rounded { border-radius: var(--bs-border-radius) !important; }
.rounded-top { border-top-left-radius: var(--bs-border-radius) !important; border-top-right-radius: var(--bs-border-radius) !important; }

/* font size */
.fs-1 { font-size: 3rem !important; }
.fs-3 { font-size: 1rem !important; }
.fs-6 { font-size: 1rem !important; }
.lh-1 { line-height: 3rem; }

.align-baseline { vertical-align: baseline !important; }
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }

/* list */
.list-inline { list-style: none; }
.list-inline-item { display: inline-block; }

.position-relative { position: relative; }

/* buttons */
.btn,
.koko-analytics .btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-sm {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}
.btn-primary,
.koko-analytics .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.btn-secondary,
.koko-analytics .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-danger,
.koko-analytics .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

/* sm */
@media (min-width: 576px) {
  .d-sm-flex {
    display: flex;
    flex-flow: row wrap;
  }
}

@media (max-width: 576px) {
  .ka-pageviews {
    font-size: 0 !important;
    color: transparent !important;
  }
  .ka-pageviews:after{
    display: inline-block;
    content: "";
    vertical-align: middle;
    width: 16px; height: 16px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-eye" viewBox="0 0 16 16"><path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/><path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/></svg>');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center center;
  }
}

/* lg */
@media (min-width: 992px) {
  .ka-row-cols-lg-2 .ka-col {
    flex: 0 0 auto;
    width: 50%;
  }
  .ka-col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .ka-col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .d-lg-flex {
    display: flex;
    flex-flow: row wrap;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
}
@media(min-width: 1200px) {
   .ka-row-cols-xl-2 .ka-col {
    flex: 0 0 auto;
    width: 50%;
  }
}

@view-transition {
 navigation: auto;
}