@charset "UTF-8";@import url("https://fonts.googleapis.com/css?family=Montserrat:700");@import url("https://cdn.zooza.sk/css/v2/v2_dev/style.css?v=9");


/* Reset & base */
/* source-sans-pro-regular - latin-ext_latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("fonts/source-sans-pro-v11-latin-ext_latin-regular.woff2") format("woff2"), url("fonts/source-sans-pro-v11-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-italic - latin-ext_latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 400;
  src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"), url("fonts/source-sans-pro-v11-latin-ext_latin-italic.woff2") format("woff2"), url("fonts/source-sans-pro-v11-latin-ext_latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-600 - latin-ext_latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  src: local("Source Sans Pro SemiBold"), local("SourceSansPro-SemiBold"), url("fonts/source-sans-pro-v11-latin-ext_latin-600.woff2") format("woff2"), url("fonts/source-sans-pro-v11-latin-ext_latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-600italic - latin-ext_latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 600;
  src: local("Source Sans Pro SemiBold Italic"), local("SourceSansPro-SemiBoldItalic"), url("fonts/source-sans-pro-v11-latin-ext_latin-600italic.woff2") format("woff2"), url("fonts/source-sans-pro-v11-latin-ext_latin-600italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-700 - latin-ext_latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("fonts/source-sans-pro-v11-latin-ext_latin-700.woff2") format("woff2"), url("fonts/source-sans-pro-v11-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-700italic - latin-ext_latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 700;
  src: local("Source Sans Pro Bold Italic"), local("SourceSansPro-BoldItalic"), url("fonts/source-sans-pro-v11-latin-ext_latin-700italic.woff2") format("woff2"), url("fonts/source-sans-pro-v11-latin-ext_latin-700italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-900 - latin-ext_latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 900;
  src: local("Source Sans Pro Black"), local("SourceSansPro-Black"), url("fonts/source-sans-pro-v11-latin-ext_latin-900.woff2") format("woff2"), url("fonts/source-sans-pro-v11-latin-ext_latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-900italic - latin-ext_latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 900;
  src: local("Source Sans Pro Black Italic"), local("SourceSansPro-BlackItalic"), url("fonts/source-sans-pro-v11-latin-ext_latin-900italic.woff2") format("woff2"), url("fonts/source-sans-pro-v11-latin-ext_latin-900italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?lxf3ho");
  src: url("fonts/icomoon.eot?lxf3ho#iefix") format("embedded-opentype"), url("fonts/icomoon.ttf?lxf3ho") format("truetype"), url("fonts/icomoon.woff?lxf3ho") format("woff"), url("fonts/icomoon.svg?lxf3ho#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-basket:before {
  content: "\e900";
}
.icon-file:before {
  content: "\e901";
}
.icon-video:before {
  content: "\e902";
}
.icon-payments:before {
  content: "\e903";
}
.icon-location:before {
  content: "\e913";
}
.icon-options:before {
  content: "\e911";
}
.icon-widgets:before {
  content: "\e912";
}
.icon-billing_groups:before {
  content: "\e90f";
}
.icon-user_profile:before {
  content: "\e910";
}
.icon-menu:before {
  content: "\e90d";
}
.icon-late:before {
  content: "\e90c";
}
.icon-next:before {
  content: "\e90a";
}
.icon-stop:before {
  content: "\e90b";
}
.icon-trash:before {
  content: "\e909";
}
.icon-x:before {
  content: "\e908";
}
.icon-ok:before {
  content: "\e90e";
}
.icon-email:before {
  content: "\e907";
}
.icon-calendar:before {
  content: "\e904";
}
.icon-edit-2:before {
  content: "\e906";
}
.icon-arrow-single-down:before {
  content: "\e905";
}
.icon-up:before {
  content: "\e914";
}
.icon-settings:before {
  content: "\e915";
}
.icon-courses:before {
  content: "\e916";
}
.icon-registrations:before {
  content: "\e917";
}
/* =v1= */
/* mocca */
/* orange */
/* dark orange */
/* red */
/* black */
.attendance_manager {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.attendance_manager p.attendance_label {
  margin-bottom: 0;
}
.attendance_manager .attendance_actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
body {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 100%;
  margin: 0;
  padding: 0 0 0 2em;
  line-height: 1.5;
  background-color: #fff;
  background-repeat: no-repeat;
}
.bottom_border {
  margin: 0 -0.5em;
  padding: 0.5em;
  border-bottom: solid 1px #E0E4CC;
}
a,
nav a:visited {
  color: #FA6900;
}
a:visited {
  color: #b36325;
}
#top_header {
  display: grid;
  grid-template-columns: 50% 25% 20% 5%;
}
.page_action {
  position: absolute;
  right: 1em;
  top: 5.79em;
  z-index: 100;
}
.page_action.pull_up {
  top: 2.5em;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 100;
}
/*
header .header  {
    width: 2em;
    background-color: #E0E4CC;
    transition: width .2s;
    height: 100%;

    @media screen and (max-width: 700px) {
        width: 100%;
    }
}
*/
.overlay {
  background-color: rgba(255, 255, 255, 0);
}
/*
@media screen and (min-width: 700px) {
    header:hover + .overlay    {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,.8);
    }
}
header:hover .header   {
    width: 10em;
    transition: width .2s;

    @media screen and (max-width: 700px) {
        width: 100%;
    }
}

header nav ul   {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header nav ul li    {
    width: 10em;
}
*/
[role=tablist] ul li {
  float: left;
}
/*
header nav li:not(:last-child)   {
    margin-bottom: 1em;

    @media screen and (max-width: 700px) {
        margin-bottom: 0;
    }
}

header nav  {
    overflow: hidden;
}

header #user_panel   {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
}

.logged_user {
    text-align: right;
    display: inline-block;
    text-decoration: none;
    color: #fa6900;
    margin: .571em;

    @media screen and (max-width: 700px) {
        text-align: inherit;
    }
}
*/
/*
#settings {
    margin: .571em;
    text-decoration: none;
    /*
    @media screen and (max-width: 700px) {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1000;
    }
    */
/*}

#settings a {
    color: #fa6900;
    text-decoration: none;
}

header #user_panel nav   {
    overflow: hidden;
    transition: .2s;
    width: 2em;
}

#user_panel button   {
    display: none;
    /*position: absolute;
    bottom: 4em;*/
/*}

header:hover #user_panel button   {
    display: block;
}

header:hover #user_panel nav   {
    width: 10em;
    transition: .2s;
}

header a   {
    display: block;
    height: 2em;
}

header .logo_z img   {
    position: absolute;
    top: 0;
    left: 0;
    height: 2em;
}
header .logo_zooza  {
    @media screen and (max-width: 700px) {
        display: none;
    }
}
header .logo_zooza img   {
    position: absolute;
    top: 0;
    left: 0;
    height: 2em;
    opacity: 0;
    transition: opacity .1s;
}
header:hover .logo_z img   {
    height: 3em;
    margin-left: 2.5em;
    margin-top: .4em;
    transform: scale(1.5);
    transition: .2s;
}
header:hover .logo_zooza img   {
    opacity: 1;
    transition: opacity .2s;
    height: 3em;
    margin-left: 2.5em;
    margin-top: .4em;
    transform: scale(1.5);
    transition: .2s;
}
header .logo_zooza img,
header .logo_z img   {
    transition: .2s;
}
*/
/*
nav a   {
    text-decoration: none;
    font-weight: 600;
    font-size: 1em;
    color: #FA6900;
    display: block;
    padding: 0;
    line-height: 2em;
}
*/
nav[role=tablist] a {
  padding: 0.5em;
}
nav[role=tablist] li:not(.active) {
  border-top: solid 2px rgba(238, 238, 238, 0.3);
  border-right: solid 2px rgba(238, 238, 238, 0.3);
  border-bottom: solid 1px transparent;
}
nav a:hover {
  color: #F38630;
}
nav a span {
  display: inline-block;
  width: 2em;
  text-align: center;
}
nav li.active {
  background-color: rgba(0, 0, 0, 0.1);
}
nav li.active a {
  color: black;
}
nav li.active a:hover {
  color: #5a5b52;
}
blockquote {
  margin: 0;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.25em;
  padding: 0.5em;
  font-size: 0.75em;
  font-style: italic;
}
/*
body:after  {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index:-1;
    opacity: .3;
    background-image: url('https://www.freepptbackgrounds.net/wp-content/uploads/2014/01/Colorful-Circles-on-White-Backgrounds.jpg');
    background-size: cover;
}
*/
dl {
  overflow: hidden;
}
dd, dt {
  display: block;
  margin: 0;
  padding: 0;
  float: left;
}
/*
dl.editable_rows {
    line-height: 2.5;
}
dl.editable_rows dd > div {
    width: 80%;
    float: left;
}
dl.editable_rows dd > div span  {
    overflow: hidden;
    white-space: nowrap;
}
dl.editable_rows dd > div:last-child  {
    width: 15%;
    padding-left: 5%;
}
dl.editable_rows dd > div div,
dl.editable_rows dd > div .block_help {
    margin: 0;
}
*/
dt {
  width: 30%;
  margin-bottom: 0.5em;
  clear: both;
}
dd {
  width: 70%;
  margin-bottom: 0.5em;
}
[role=tabpanel] {
  padding-top: 0.5em;
  clear: both;
  overflow: hidden;
}
[role=tablist] li {
  background-color: rgba(200, 200, 200, 0.2);
  border-radius: 0.5em 0.5em 0 0;
  border: solid 2px rgb(224, 228, 204);
  border-bottom-color: #fff;
  margin-right: 0.5em;
}
[role=tablist] li.active {
  background-color: white;
}
hr {
  clear: both;
  border: none;
  margin: 1em;
  border-bottom: solid 1px #E0E4CC;
}
section hr {
  margin: 1em -0.5em 1em -0.5em;
}
/*
#user_panel,
#billing_period, {
    position: relative;
    font-size: .875em;
    text-align: right;

    @media screen and (max-width: 700px) {
        text-align: left;
        width: 50%;
        float: left;
    }
}

#user_panel {
    @media screen and (max-width: 700px) {
        text-align: right;
        float: right;
    }
}

#user_panel button,
#billing_period button {
    margin: 0;
    line-height: 1.5em;
    font-size: .875em;
}

#user_panel .user_options,
#billing_period .user_options {
    display: none;
    position: absolute;
    z-index: 102;
    min-width: 10em;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.05);
    top: 100%;
    right: 0;
    text-align: left;
}
*/
/*
#user_panel:hover   {
    /*box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.05);*/
/*
}

#user_panel:hover .user_options,
#billing_period:hover .user_options {
    display: inline-block;
}

.user_options a {
    display: block;
    padding: .3em;
    border: solid 1px rgba( 0, 0, 0, .1 );
    border-top: none;
    background-color: white;
    /*! font-size: .875em; */
/*    text-decoration: none;
    /*! border-left: none; */
/*! border-right: none; */
/*    color: #fa6900;
}

.user_options a:hover,
.user_options a.active:hover {
  background-color: rgb(239, 239, 239);
}

.user_options a.active  {
    background-color: #E0E4CC;
    color: black;
    border-top: solid 1px rgba(0,0,0,0.1);
}

.user_options a:last-child  {
    border-bottom-left-radius: .2em;
    border-bottom-right-radius: .2em;
}

#user_panel button,
#billing_period button {
    color: #fa6900;
    background-color: transparent;
    border: none;
}
*/
#page {
  padding: 1em 2em 1em 3em;
}
@media screen and (max-width: 700px) {
  #page {
    padding: 0.5em;
    clear: both;
  }
}
* {
  box-sizing: border-box;
}
form {
  padding: 0.5em;
}
aside {
  width: 30%;
  float: left;
}
@media screen and (max-width: 700px) {
  aside {
    width: auto;
    float: none;
  }
}
aside section {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
aside + section {
  width: calc(70% - 0.5em);
  margin-right: 0.5em;
  float: left;
}
section {
  border: solid 2px #e0e4cc;
  border-radius: 0.5em;
  padding: 10px;
  margin-bottom: 1em;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
section.green {
  border-color: green;
}
section.red {
  border-color: red;
}
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 2px #e0e4cc;
  border-radius: 0.5em;
  padding: 10px;
  margin-bottom: 1em;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  /* background-color: white; */
}
.pager ul {
  margin: 0;
  padding: 0;
}
.nochrome section {
  border: none;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
}
.nochrome section div, .nochrome section fieldset {
  margin-bottom: 0;
}
.status_sign {
  display: none;
  position: absolute;
  top: 30px;
  left: 8px;
}
.status_sign.going,
.status_sign.attended {
  background-color: green;
  width: 1em;
  height: 1em;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
}
.status_sign.noshow {
  background-color: red;
  width: 1em;
  height: 1em;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
}
.status_sign.canceled {
  background-color: orange;
  width: 1em;
  height: 1em;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
}
.status_sign.null {
  display: none;
}
/*
h1  {
    margin: 0em .333em;
    font-size: 1.5em;
    font-weight: 700;

    @media screen and (max-width: 700px) {
        margin: 0;
    }
}
*/
h2 {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
}
@media screen and (max-width: 700px) {
  h2 {
    margin: 0;
  }
}
/*
h3  {
    font-weight: 600;
    margin: 0 0 1em 0;
    font-size: .875em;
    text-transform: uppercase;
    color: #b8bba7;
    letter-spacing: .0em;
}
*/
h4 {
  font-weight: 600;
  margin: 0 0 0.5em 0;
}
.ui-datepicker-prev,
.ui-datepicker-next,
input[type=text],
input[type=number],
input[type=email],
select,
textarea {
  outline: none;
  width: 100%;
  border: solid 1px rgba(0, 0, 0, 0.2);
  font: inherit;
  line-height: 21px;
  padding: 0.5em;
  border-radius: 0.2em;
  transition: all 0.1s;
  background-image: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
div.input_select,
div.date_time {
  display: flex;
  flex-direction: column;
}
div.input_select .data_entry,
div.date_time .data_entry {
  display: flex;
}
input:hover,
textarea:hover,
select:hover {
  border-color: rgba(0, 0, 0, 0.5);
  transition: all 0.1s;
}
input:focus,
textarea:focus,
select:focus,
.stepper:hover input {
  outline: none;
  border: solid 1px #a7dbd8;
  transition: all 0.2s;
}
input:focus,
textarea:focus,
.stepper:hover input {
  -webkit-box-shadow: inset 0px 0px 0px 2px rgb(167, 219, 216);
  -moz-box-shadow: inset 0px 0px 0px 2px rgb(167, 219, 216);
  box-shadow: inset 0px 0px 0px 2px rgb(167, 219, 216);
  /*box-shadow: 0px 0px 0px 2px #a7dbd8;*/
}
input.error, select.error {
  border-color: red;
}
span.error {
  color: red;
}
textarea {
  min-height: 6em;
}
label,
legend {
  font-size: 0.875em;
  padding: 0;
}
label.disabled {
  text-decoration: line-through;
  color: silver;
}
.stepper {
  font-size: 0.875em;
  max-width: 10em;
  position: relative;
}
.stepper a {
  color: #FA6900;
  border-radius: 50%;
  border: solid 2px transparent;
}
.stepper a:hover {
  border-color: #FA6900;
}
section > * > div:not(.trumbowyg-button-group), section fieldset {
  margin-bottom: 1em;
  margin-top: 1em;
}
section fieldset div {
  margin-bottom: 0;
}
fieldset {
  border: none;
  margin: 0;
  padding-left: 0;
}
form section ul,
section form ul,
[role=tablist] ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: relative;
  /*z-index: 101;*/
}
/*
section ul.listing li:first-child   {
    border-top: solid 1px #E0E4CC;
}
*/
/*
section ul.listing li   {
    border-bottom: solid 1px #E0E4CC;
    margin: 0em -.5em 0em -.5em;
    padding: .5em 1em;
    overflow: hidden;
}

section ul.listing li:not(.add_row):hover {
    background-color: RGBA(224, 228, 204, 0.4);
    transition: all .2s;
}
section ul.listing li:last-child   {
    border-bottom: none;
}

section ul.editable_rows li.fields_with_labels .controls    {
    margin-top: 1.2em;
}

section ul.editable_rows .field {
    width: 50%;
    float: left;
    overflow: hidden;
}
*/
section ul.editable_rows .field input {
  padding: 0.286em;
}
section ul.editable_rows .controls {
  padding-left: 0.25em;
  width: 50%;
  float: left;
}
section ul.editable_rows.narrow_controls .field {
  width: 75%;
}
section ul.editable_rows.narrow_controls .controls {
  width: 25%;
}
[role=tablist] {
  padding: 0 0.5em;
  overflow: hidden;
  position: relative;
}
[role=tablist]:before {
  content: "";
  width: 100%;
  height: 0px;
  position: absolute;
  left: 0px;
  top: calc(100% - 2px);
  border-bottom: solid 2px #e0e4cc;
  z-index: -1;
}
/*
[role='tabpanel']   {
    background-color: rgba(255,255,255,1);
}
*/
.block_help {
  font-size: 0.75em;
  /*! font-style: italic; */
  color: silver;
  margin: 0.5em 0;
  clear: both;
  display: block;
}
pre {
  background-color: whitesmoke;
  font-size: 10px;
  margin: 1em;
  padding: 1em;
  border: solid 1px silver;
  border-radius: 0.25em;
}
label {
  -ms-touch-action: manipulation; /* IE10  */
  touch-action: manipulation; /* IE11+ */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently */
}
.grid_list {
  display: block;
  padding: 2em;
}
.grid_list .grid_list_item {
  width: 12em;
  height: 15em;
  float: left;
  margin: 1em;
  border: solid 2px #e0e4cc;
  border-radius: 0.5em;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  background-color: white;
  padding: 0;
  position: relative;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d5e000+0,8fc800+100 */
  background: #d5e000; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #d5e000 0%, #8fc800 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #d5e000 0%, #8fc800 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #d5e000 0%, #8fc800 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#d5e000", endColorstr="#8fc800",GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grid_list .grid_list_item.theme_boy {
  background-image: url("https://api.zooza.sk/static/themes/boy/theme_boy.jpg");
  background-size: cover;
  background-position: center;
}
/*
body.theme_boy  {
    background-image: url('https://api.zooza.sk/static/themes/boy/theme_boy.jpg');
    background-size: contain;
}

body.theme_boy h1   {
    color: white;
}
*/
.grid_list .grid_list_item.theme_train {
  background-image: url("https://api.zooza.sk/static/themes/train/theme_train.jpg");
  background-size: 420%;
  background-position: top;
}
/*
body.theme_train  {
    background-image: url('https://api.zooza.sk/static/themes/train/theme_train.jpg');
    background-size: contain;
}

body.theme_train h1   {
    color: white;
}
*/
.grid_list .grid_list_item.theme_boy_on_horse {
  background-image: url("https://api.zooza.sk/static/themes/boy_on_horse/theme_boy_on_horse.jpg");
  background-size: 400%;
  background-position: 80% top;
}
/*
body.theme_boy_on_horse  {
    background-image: url('https://api.zooza.sk/static/themes/boy_on_horse/theme_boy_on_horse.jpg');
    background-size: contain;
}

body.theme_boy_on_horse h1   {
    color: white;
}
*/
.grid_list .course {
  text-align: center;
  background-color: white;
  padding: 1em;
  height: 5em;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  transition: height 0.2s;
}
.grid_list .grid_list_item:hover {
  /*cursor: pointer;*/
  transform: scale(1.05);
}
.grid_list .grid_list_item:hover .course {
  height: 6em;
  transition: height 0.2s;
}
.grid_list .course:before {
  content: "";
  position: absolute;
  top: -1.5em;
  left: 0;
  width: 100%;
  height: 1.5em;
  background-color: white;
  border-top-left-radius: 100%;
}
.grid_list .grid_list_item .course h3 {
  width: 100%;
}
.grid_list .grid_list_item .course h3 a {
  text-transform: initial;
  display: block;
  width: 100%;
}
.grid_list {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
.grid_list_item {
  height: calc(100% - 0.5em);
  flex: 0 1 25%;
  box-sizing: border-box;
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
  padding: 0.5em;
  margin: 0.5em 0 0 0.5em;
  background-color: white;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}
.grid_list_item:hover {
  border-color: rgba(0, 0, 0, 0.5);
  transition: all 0.2s;
}
.grid_list_item h3 {
  width: 10em;
  text-align: center;
}
.grid_list_item h3 a {
  text-decoration: none;
  color: black;
}
/* breadcrumbs */
/*
#breadcrumbs {
    list-style-type: none;
    margin: .571em;
    padding: 0;
    font-size: .875em;

    @media screen and (max-width: 700px) {
        width: 100%;
    }
}

#breadcrumbs li {
    display: inline-block;
}

#breadcrumbs li::after {
    content: "\\";
    margin-left: .25em;
    color: #c9cdb7;
}

#breadcrumbs a {
    text-decoration: none;
    color: #fa6900;
}
*/
.hidden {
  display: none;
}
/* accordeon */
.accordeon.hidden .accordeon_body {
  /*display: none;*/
}
.accordeon {
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 0.25em;
  margin: 0 0.5em 0.5em 0.5em;
}
.accordeon_header {
  padding: 0.5em;
  overflow: hidden;
}
.accordeon_header em {
  font-size: 0.75em;
  color: rgb(150, 150, 150);
  text-transform: uppercase;
  font-style: normal;
  display: block;
}
.accordeon_header div {
  float: left;
  padding-right: 1em;
  min-width: 20%;
}
.accordeon_body {
  overflow: hidden;
  border-top: solid 1px rgba(0, 0, 0, 0.1);
  padding: 0.5em;
}
.input_number label {
  position: relative;
  display: block;
}
.input_number input {
  text-align: center;
}
.input_number a {
  display: block;
  width: 1.3em;
  height: 1.3em;
  text-align: center;
  position: absolute;
  top: 0.22em;
  text-decoration: none;
  font-size: 1.5em;
  line-height: 1.1em;
  transition: all 0.2s;
}
.input_number a[href="#step_up"] {
  right: 0.22em;
}
.input_number a[href="#step_down"] {
  left: 0.22em;
}
/* timeline */
.input_timeline .years {
  width: 100%;
  border-top: solid 1px #e0e4cc;
  border-bottom: solid 1px #e0e4cc;
  overflow: hidden;
  margin: 0;
}
.input_timeline .years li {
  display: block;
  width: 33.33%;
  text-align: center;
  float: left;
  font-size: 10px;
  border-right: solid 1px #e0e4cc;
}
.input_timeline .months {
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-bottom: solid 1px #E0E4CC;
}
.input_timeline .months li {
  display: block;
  width: 2.777%;
  text-align: center;
  float: left;
  font-size: 10px;
  text-transform: uppercase;
  border-right: solid 1px #E0E4CC;
  height: 20px;
  line-height: 20px;
}
.input_timeline .months li.active {
  background-color: #A7DBD8;
}
.input_timeline .months li:hover {
  cursor: pointer;
  background-color: #789e9c;
  color: white;
}
/* pager */
.pager .selected {
  background-color: limegreen;
  color: white;
}
.pager li {
  display: inline-block;
}
.pager li a {
  border-radius: 0.25em;
  width: 2em;
  text-align: center;
  display: block;
  padding: 0 0.25em;
  text-decoration: none;
  color: black;
}
.pager li a:hover {
  background-color: limegreen;
  color: white;
}
/* FINDER */
.finder {
  position: relative;
  width: 100%;
  height: 300px;
}
.finder_panes {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 1em);
  height: 300px;
  box-sizing: border-box;
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
  margin: 0.5em 0 0 0.5em;
  background-color: white;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 1000;
}
.finder_pane {
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  transition: left 0.3s;
  display: block;
  max-height: 100%;
  font-size: 0.8em;
}
.finder_pane:after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  height: 100%;
}
.finder_pane.pane_right {
  left: 100%;
  top: -1000px;
  animation: pulse 0.4s;
}
.finder_pane.pane_left {
  left: -100%;
  top: -1000px;
  animation: pulse 0.4s;
}
.finder_pane a.active {
  background-color: rgba(0, 0, 0, 0.2);
}
@keyframes pulse {
  0%, 100% {
    top: 0;
  }
}
.finder ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.finder a {
  display: block;
  padding: 0.5em;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}
.finder a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
/* calendar */
.calendar {
  border-top: solid 1px rgba(0, 0, 0, 0.1);
  width: 100%;
  font-size: 10px;
  line-height: 10px;
  position: relative;
  overflow: hidden;
}
.calendar * {
  box-sizing: border-box;
}
.calendar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.calendar ul li {
  width: 20px;
  height: 20px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-left: none;
  border-top: none;
  text-align: center;
  line-height: 20px;
}
.calendar_times_pane {
  width: 50px;
  height: 100%;
  padding-bottom: 20px;
}
.calendar_times_pane:after {
  position: absolute;
  content: "";
  z-index: 99;
  width: 5px;
  height: calc(100% - 20px);
  top: 0;
  left: 50px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.2+0,0+100 */
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33000000", endColorstr="#00000000",GradientType=1 ); /* IE6-9 */
}
.calendar_times_pane ul li {
  width: 50px;
  background-color: #e0e4cc;
}
.calendar_dates_pane {
  width: calc(100% - 50px);
  top: 0;
  left: 50px;
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  position: absolute;
  white-space: nowrap;
}
.calendar_dates_pane.wrap {
  white-space: initial;
}
.calendar_data {
  position: absolute;
  z-index: 98;
}
.calendar_dates {
  overflow: hidden;
}
.calendar_data li {
  position: absolute;
  border-radius: 2px;
  text-transform: uppercase;
  transition: all 0.2s;
}
.calendar_data li.calendar_item:hover {
  cursor: pointer;
}
.calendar_data li.calendar_item {
  line-height: initial !important;
  text-align: left;
  padding: 0.5em;
  text-transform: initial;
}
.calendar_data li.calendar_item a {
  display: block;
}
.calendar_data li.selectable {
  box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.1);
  z-index: 0;
}
.calendar_data li.selectable:hover {
  cursor: pointer;
  background-color: black !important;
  color: white;
  transition: all 0.2s;
}
.calendar_week {
  z-index: -100;
  float: left;
  padding: 0;
}
.calendar_dates em {
  display: block;
  float: left;
  height: 20px;
  line-height: 20px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  border-right: solid 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 0;
}
.calendar_week_day li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.calendar .calendar_times_pane ul li:nth-child(3),
.calendar .calendar_dates_pane .calendar_week ul li:nth-child(2) {
  border-bottom-color: black;
}
.calendar .calendar_times_pane ul:not(.no_header_rows) li:nth-child(-n+3) {
  background-color: transparent;
}
.calendar .calendar_times_pane ul.no_header_rows li:nth-child(1) {
  border-bottom-color: black;
}
.calendar .calendar_times_pane ul.no_header_rows li:nth-child(-n+1) {
  background-color: transparent;
}
.calendar_week_day {
  float: left;
}
.modal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: white;
  padding: 2em;
  height: 100%;
  overflow-y: scroll;
}
/*
.modal {
    position: fixed;
    background-color: white;
    border-radius: .5em;
    border: solid 1px rgba(0,0,0,.1);
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
    z-index: 103;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.05);
    overflow: hidden;
}

.modal.with_tabs {
    background-color: rgb(230,230,230);
    padding-top: .5em;
}

.modal.cover   {
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 102;
    border-radius: 0;
}
.modal .modal_actions   {
    position: absolute;
    box-shadow: -1px -3px 3px 0px rgba(0,0,0,0.05);
    z-index: 104;
    top: calc( 100% - 60px );
    left: 0px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: white;
    padding: .5em;
}

.modal.with_tabs [role="tabpanel"] form   {
    background-color: white;
    position: absolute;
    top:45px;
    left: 0px;
    width: 100%;
    height: calc( 100% - 105px );
    overflow-y: auto;
    z-index: 104;
}
*/
.modal h1 {
  color: black !important;
  width: calc(100% - 4em);
  float: left;
}
.modal .cancel {
  float: right;
}
.important {
  font-weight: bold;
  font-size: 0.875em;
  color: orange;
}
table {
  border-collapse: collapse;
  width: 100%;
}
table tr.highlight_bank_transfer,
table tr.highlight_cash {
  background-color: greenyellow;
}
table tr.highlight_new_registration,
table tr.highlight_invoice_sent {
  background-color: orange;
}
table tr.highlight_payment_notice_sent {
  background-color: red;
}
table th,
table td {
  vertical-align: top;
  text-align: left;
  padding: 0.5em;
}
table tr.highlight td {
  background-color: #fbfbb7 !important;
}
table tr.active td {
  background-color: #E0E4CC;
}
table tr td.row_header {
  font-weight: bold;
  padding-top: 1em;
  border-top: solid 1px silver;
}
table tr.row td {
  padding-bottom: 0;
  border-bottom: dotted 1px #E0E4CC;
}
table tr.row_end td {
  border-bottom: solid 2px #E0E4CC;
  padding-top: 0;
}
table.listing {
  margin: 0 -0.5em 0 -0.5em;
  width: calc(100% + 1em);
}
table.listing tr td {
  border-bottom: solid 1px #E0E4CC;
}
table.listing tr:not(.add_row):hover td {
  background-color: RGBA(224, 228, 204, 0.4);
  transition: all 0.2s;
}
table tr td .th {
  display: none;
}
/*
table:not(.ui-datepicker-calendar) tr:hover td   {
    background-color: rgba(0,0,0,.05);
}
*/
/* COLUMNS */
.column {
  transition: all 0.2s;
}
[role=tabpanel] .column {
  width: 50%;
  float: left;
}
[role=tabpanel] .column:first-child section {
  width: calc(100% - 0.5em);
}
.columns {
  overflow: hidden;
}
.columns fieldset {
  width: 50%;
  float: left;
}
/* MONTH PICKER */
.input_month_picker div {
  float: left;
  min-width: 5em;
}
.input_month_picker div:first-child {
  margin-right: 0.5em;
}
.date_time {
  overflow: hidden;
}
.date_time label span {
  display: block;
}
.date_time [for=date] {
  display: block;
  width: 12em;
  float: left;
  margin-right: 0.5em;
}
.date_time [for=hours] input,
.date_time [for=minutes] input {
  display: block;
  width: 5em;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  margin: 0;
  text-align: center;
}
.date_time [for=hours] {
  /*! z-index: 100; */
  position: relative;
  float: left;
}
.date_time [for=hours]:after {
  content: ":";
  position: absolute;
  right: 0;
  bottom: 0.5em;
  /*! z-index: 105; */
}
.date_time [for=hours] input {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.date_time [for=minutes] input {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.date_time [for=minutes] {
  margin-right: 0.5em;
  margin-top: 1.5em;
  float: left;
}
/* DATEPICKER */
/*body.datepicker_open    {
    .menu, .overlay, .infobar    {
        display: none;
    }
}*/
.ui-datepicker {
  display: none;
  background-color: white;
  padding: 0.5em;
  border-radius: 0.25em;
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5);
  border: solid 1px rgba(0, 0, 0, 0.2);
  z-index: 1000 !important;
}
.ui-datepicker.flex {
  position: fixed !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
}
.ui-datepicker-prev,
.ui-datepicker-next {
  float: right;
  display: inline-block;
  width: auto;
  cursor: pointer;
}
.ui-datepicker-prev {
  float: left;
}
.ui-datepicker-title {
  text-align: center;
  padding: 0.5em;
}
.ui-datepicker td.ui-datepicker-unselectable {
  color: silver;
}
.ui-datepicker td:hover:not(.ui-datepicker-unselectable) {
  background-color: #E0E4CC !important;
  border-radius: 0.25em;
  color: initial;
}
.ui-datepicker td:hover:not(.ui-datepicker-unselectable) a {
  color: initial;
}
.ui-datepicker-current-day {
  background-color: #FA6900;
  border-radius: 0.25em;
}
.ui-datepicker-calendar td a.ui-state-active {
  color: white;
}
.ui-datepicker-buttonpane {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
}
.ui-datepicker-calendar td,
.ui-datepicker-calendar td a {
  text-align: center;
  text-decoration: none;
  color: initial;
}
/* LOADER */
.loader {
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.8);
}
.spinner {
  width: 40px;
  height: 40px;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  margin: auto auto;
}
.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2s infinite ease-in-out;
  animation: sk-bounce 2s infinite ease-in-out;
}
.double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@-webkit-keyframes sk-bounce {
  0%, 100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 700px) {
  aside {
    width: 100%;
  }
  dl dt {
    width: 100%;
    font-size: 0.8em;
    line-height: 0.8em;
    font-weight: bold;
  }
  dl dd {
    width: 100%;
    margin-bottom: 1em;
  }
  aside + section {
    width: 100%;
  }
  table td,
  table th {
    display: block;
  }
  table tr td:last-of-type {
    border-bottom: solid 2px silver;
  }
  table tr th {
    display: none;
  }
  table tr td .th {
    display: block;
    font-weight: bold;
    font-size: 0.8em;
  }
  body {
    padding-left: 0;
    padding-top: 2.3em;
  }
  .page_action.pull_up {
    top: 6em;
  }
  header {
    width: 100%;
    height: 2.3em;
  }
  header:hover {
    width: 100%;
    transition: none;
  }
  header:hover .logo_z img {
    height: initial;
    transform: none;
    transition: none;
    height: inherit;
    margin-left: inherit;
    margin-top: inherit;
  }
  header:hover .logo_zooza img {
    opacity: 0;
    transform: none;
    transition: none;
  }
  header nav li a span:last-of-type {
    display: none;
  }
  header nav li a,
  header nav li.active a {
    display: inline-block;
    text-align: center;
    height: 2.3em;
    line-height: 2.3em;
  }
  header nav ul li {
    width: auto;
    float: left;
  }
  header nav {
    position: absolute;
    left: 3em;
    top: 0;
  }
  #top_header {
    grid-template-columns: 50% 40% 10%;
  }
}
@media only screen and (max-width: 700px) and (max-width: 700px) {
  #top_header {
    display: block;
  }
}
@media only screen and (max-width: 700px) {
  [role=tabpanel] .column {
    width: 100%;
  }
  #ui-datepicker-div {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }
  #ui-datepicker-div td {
    display: table-cell;
  }
  #ui-datepicker-div table tr td:last-of-type {
    border-bottom: inherit;
  }
}
.attendance_overview tr td:first-child {
  position: relative;
}
.attendance_overview .day {
  margin-top: 0.5em;
  display: inline-block;
  min-width: 50%;
}
.attendance_overview .time,
.attendance_overview .attendance {
  display: inline-block;
  margin-top: 0.5em;
}
.attendance_overview .date,
.attendance_overview .course {
  color: gray;
  display: block;
  font-size: 0.75em;
}
.attendance_overview .tree {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.attendance_overview .tree div {
  float: left;
  position: relative;
  width: 20px;
  height: 100%;
}
.attendance_overview .tree .hide_attendance_arrow {
  height: 50%;
  width: 20px;
  border-bottom: solid 2px #E0E4CC;
  border-bottom-left-radius: 10px;
  margin-left: 9px;
}
.attendance_overview .tree .hide_attendance_arrow:before {
  content: "";
  position: absolute;
  top: 94%;
  right: 6px;
  transform-origin: 100% 100%;
  transform: rotate(45deg);
  border-top: solid 2px #E0E4CC;
  border-right: solid 2px #E0E4CC;
  width: 10px;
  height: 10px;
}
.attendance_overview .tree .start:before {
  width: 20px;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  background-color: #E0E4CC;
  border-radius: 50%;
  content: "";
}
.attendance_overview .tree .end:before {
  width: 20px;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  background-color: #E0E4CC;
  border-radius: 50%;
  content: "";
}
.attendance_overview .tree .status_canceled:before {
  width: 16px;
  height: 16px;
  position: absolute;
  top: calc(50% - 10px);
  background-color: white;
  border: solid 2px #E0E4CC;
  border-radius: 50%;
  content: "•";
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 1;
  color: #FA6900;
  line-height: 9px;
  font-size: 2em;
  text-align: center;
}
.attendance_overview .tree .status_going:before {
  width: 16px;
  height: 16px;
  position: absolute;
  top: calc(50% - 10px);
  background-color: white;
  border: solid 2px #E0E4CC;
  border-radius: 50%;
  content: "";
  z-index: 1;
  content: "•";
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 1;
  color: green;
  line-height: 9px;
  font-size: 2em;
  text-align: center;
}
.attendance_overview .tree .status_attended:before {
  width: 16px;
  height: 16px;
  position: absolute;
  top: calc(50% - 10px);
  background-color: white;
  border: solid 2px #E0E4CC;
  border-radius: 50%;
  content: "";
  z-index: 1;
  content: "•";
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 1;
  color: green;
  line-height: 9px;
  font-size: 2em;
  text-align: center;
}
.attendance_overview .tree .status_noshow:before {
  width: 16px;
  height: 16px;
  position: absolute;
  top: calc(50% - 10px);
  background-color: white;
  border: solid 2px #E0E4CC;
  border-radius: 50%;
  content: "";
  z-index: 1;
  content: "•";
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 1;
  color: red;
  line-height: 9px;
  font-size: 2em;
  text-align: center;
}
.attendance_overview .tree .status_null:before {
  width: 16px;
  height: 16px;
  position: absolute;
  top: calc(50% - 10px);
  background-color: white;
  border: solid 2px #E0E4CC;
  border-radius: 50%;
  content: "";
  z-index: 1;
  line-height: 9px;
  font-size: 2em;
  text-align: center;
}
.attendance_overview .tree .connector_up:after {
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 50%;
  content: "";
  background-color: #E0E4CC;
}
.attendance_overview .tree .connector_down:after {
  position: absolute;
  top: 50%;
  left: calc(50% - 1px);
  width: 2px;
  height: 50%;
  content: "";
  background-color: #E0E4CC;
}
.attendance_overview .tree .corner_up:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: calc(50% - 1px);
  border-bottom: solid 2px #E0E4CC;
  border-right: solid 2px #E0E4CC;
  border-bottom-right-radius: 5px;
  content: "";
}
.attendance_overview .tree .corner_down:before {
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: 9px;
  height: calc(50% - 1px);
  border-top: solid 2px #E0E4CC;
  border-right: solid 2px #E0E4CC;
  border-top-right-radius: 5px;
  content: "";
}
.attendance_overview .tree .connector_horizontal:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(50% - 1px);
  border-bottom: solid 2px #E0E4CC;
  content: "";
}
.attendance_overview .tree .connector_vertical:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 100%;
  border-right: solid 2px #E0E4CC;
  content: "";
}
.attendance_overview .tree:before {
  position: absolute;
  left: 0;
  top: 0;
  border-right: solid 2px #E0E4CC;
  width: 9px;
  height: 100%;
  content: "";
}
.attendance_overview .tree.start:before {
  height: 50%;
  top: 50%;
}
.attendance_overview .tree.end:before {
  height: 50%;
  top: 0;
}
.attendance_overview .tree.corner:before {
  content: none;
}
.event_statistics ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.event_statistics li {
  flex: 1;
}
@media screen and (max-width: 700px) {
  .event_statistics li {
    flex-basis: 33.333%;
  }
}
.event_statistics li span {
  display: block;
}
.event_statistics li span:first-child {
  font-size: 0.75em;
  text-transform: uppercase;
  margin: 0;
  font-weight: normal;
  color: #a7ab99;
  letter-spacing: -0.05em;
}
.registration_list.fluid {
  width: 100%;
  padding-bottom: 1em;
}
.registration_list.fluid .small {
  font-size: 0.75em;
}
.registration_list.fluid .select {
  display: inline-block;
  width: 100%;
}
.registration_list.fluid .select .styled_radio_group {
  margin-bottom: 10px;
}
.registration_list.fluid .name a {
  font-weight: bold;
}
.registration_list.fluid h5, .registration_list.fluid div.row_header {
  font-size: 0.75rem;
  text-transform: uppercase;
  margin: 0;
  font-weight: normal;
  color: #a7ab99;
  letter-spacing: -0.05em;
}
.registration_list.fluid div.row_header {
  display: flex;
  justify-content: space-between;
}
.registration_list.fluid .registration_card.not_paid {
  border-color: red;
}
.registration_list.fluid .registration_card.not_paid .payment {
  color: red;
}
.registration_list.fluid .registration_card {
  position: relative;
  border-radius: 0.5em;
  border: solid 2px #E0E4CC;
  display: grid;
  grid-template-columns: 2em 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card {
    grid-template-columns: 2em 60% auto;
  }
}
.registration_list.fluid .registration_card .expand {
  display: block;
  background-color: rgba(224, 228, 204, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  transition: all 0.2s;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .expand {
    height: 30px;
  }
}
.registration_list.fluid .registration_card .expand:before {
  width: 100%;
  text-align: center;
  content: "\e918";
  font-family: "icomoon";
  text-decoration: none;
  display: inline-block;
  line-height: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .expand:before {
    height: 30px;
    line-height: 30px;
  }
}
.registration_list.fluid .registration_card .expand:hover {
  background-color: rgb(224, 228, 204);
  height: 15px;
  transition: all 0.2s;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .expand:hover {
    height: 30px;
  }
}
.registration_list.fluid .registration_card .name,
.registration_list.fluid .registration_card .payment,
.registration_list.fluid .registration_card .attendance,
.registration_list.fluid .registration_card .custom_field,
.registration_list.fluid .registration_card .index {
  padding-bottom: 0px;
}
.registration_list.fluid .registration_card .slots,
.registration_list.fluid .registration_card .note {
  padding-bottom: 15px;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .slots {
    padding-bottom: 35px;
  }
}
.registration_list.fluid .registration_card .name {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row: 1;
  border-bottom-color: #E0E4CC;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .name {
    grid-column-start: 2;
    grid-column-end: 2;
  }
}
.registration_list.fluid .registration_card .payment {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row: 1;
  border-bottom-color: #E0E4CC;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .payment {
    grid-column-start: 3;
    grid-column-end: 3;
    border-right-color: transparent;
  }
}
.registration_list.fluid .registration_card .attendance {
  grid-column-start: 5;
  grid-column-end: 8;
  grid-row: 1;
  border-bottom-color: #E0E4CC;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .attendance {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row: 2;
    border-right-color: transparent;
  }
}
.registration_list.fluid .registration_card .custom_field {
  grid-column-start: 8;
  grid-column-end: 12;
  grid-row: 1;
  border-bottom-color: #E0E4CC;
  border-right: none;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .custom_field {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row: 3;
  }
}
.registration_list.fluid .registration_card .note {
  grid-column-start: 3;
  grid-column-end: 12;
  grid-row-start: 3;
  grid-row-end: 3;
  border-right: none;
  border-bottom: none;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .note {
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row: auto;
    border-bottom: dotted 1px #E0E4CC;
  }
}
.registration_list.fluid .registration_card .stats {
  grid-column: 3/12;
  grid-row: 4/5;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .stats {
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row: auto;
    border-bottom: dotted 1px #E0E4CC;
  }
}
.registration_list.fluid .registration_card .slots {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: 3;
  border-bottom: none;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .slots {
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row: auto;
    border-right-color: transparent;
  }
}
.registration_list.fluid .registration_card .ef_dob,
.registration_list.fluid .registration_card .ef_full_name {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-end: span 2;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .ef_dob,
  .registration_list.fluid .registration_card .ef_full_name {
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row: auto;
    border-right-color: transparent;
  }
}
.registration_list.fluid .registration_card .ef_address {
  grid-column-start: 6;
  grid-column-end: 12;
  grid-row-start: 2;
  grid-row-end: 2;
  border-right: none;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .ef_address {
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row: auto;
    border-right-color: transparent;
  }
}
.registration_list.fluid .registration_card .index {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 5;
  border: none;
  text-align: right;
  background-color: #E0E4CC;
  padding: 0.25em;
  width: 2em;
  text-align: center;
  color: #b36325;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card .index {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-end: 1;
    border-bottom-left-radius: 0;
  }
}
.registration_list.fluid .registration_card > div {
  padding: 0.5em;
  border-right: dotted 1px #E0E4CC;
  border-bottom: dotted 1px #E0E4CC;
}
.registration_list.fluid .registration_card.closed .name,
.registration_list.fluid .registration_card.closed .payment,
.registration_list.fluid .registration_card.closed .attendance,
.registration_list.fluid .registration_card.closed .custom_field,
.registration_list.fluid .registration_card.closed .index {
  padding-bottom: 15px;
  border-bottom-color: transparent;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card.closed .name,
  .registration_list.fluid .registration_card.closed .payment,
  .registration_list.fluid .registration_card.closed .attendance,
  .registration_list.fluid .registration_card.closed .custom_field,
  .registration_list.fluid .registration_card.closed .index {
    border-bottom-color: #E0E4CC;
  }
}
.registration_list.fluid .registration_card.closed .slots,
.registration_list.fluid .registration_card.closed .note {
  padding-bottom: 0.5em;
}
@media screen and (max-width: 700px) {
  .registration_list.fluid .registration_card.closed .custom_field {
    padding-bottom: 35px;
  }
}
.registration_list.fluid .registration_card.closed .ef_address,
.registration_list.fluid .registration_card.closed .ef_dob,
.registration_list.fluid .registration_card.closed .ef_full_name,
.registration_list.fluid .registration_card.closed .slots,
.registration_list.fluid .registration_card.closed .note,
.registration_list.fluid .registration_card.closed .stats {
  display: none;
}
.registration_list.fluid .registration_card.closed .expand:before {
  content: "\e914";
}
.registration_list.fluid .registration_card + .registration_card {
  margin-top: 0.5em;
}
.full_width .registration_list {
  width: 100%;
}
.registration_list {
  width: calc(70% - 0.5em);
  margin-right: 0.5em;
  float: left;
}
@media screen and (max-width: 700px) {
  .registration_list {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
}
.registration_list .warning_bullet {
  font-size: 10px;
  border-radius: 50%;
  background-color: red;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  color: white;
}
.registration_list .registration_card_start,
.registration_list .registration_card_end,
.registration_list .registration_card_row {
  border-radius: 0.5em;
  border: solid 2px #E0E4CC;
  display: grid;
}
.registration_list .registration_card_start.inactive,
.registration_list .registration_card_end.inactive,
.registration_list .registration_card_row.inactive {
  border-color: #fcfcfc;
}
.registration_list .small {
  font-size: 0.75em;
}
.registration_list .select {
  display: inline-block;
}
.registration_list .name a {
  font-weight: bold;
}
.registration_list .registration_card_start {
  grid-template-columns: 10% 30% 20% 20% 20%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: dotted 1px #E0E4CC;
}
@media screen and (max-width: 700px) {
  .registration_list .registration_card_start {
    grid-template-columns: 1fr;
  }
}
.registration_list .clip_text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.registration_list .break_text {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.registration_list .registration_card_end {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  grid-template-columns: 10% 45% 45%;
}
@media screen and (max-width: 700px) {
  .registration_list .registration_card_end {
    grid-template-columns: 1fr;
  }
}
.registration_list .registration_card_row.registration_card_row_payments {
  grid-template-columns: 10% 18% 18% 18% 18% 18%;
}
.registration_list .registration_card_row {
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-bottom: dotted 1px #E0E4CC;
  grid-template-columns: 10% 45% 45%;
}
@media screen and (max-width: 700px) {
  .registration_list .registration_card_row {
    grid-template-columns: 1fr;
  }
}
.registration_list .registration_card_end + .registration_card_start {
  margin-top: 1em;
}
.registration_list .registration_card_end:last-of-type {
  margin-bottom: 1em;
}
.registration_list .registration_card_start > div,
.registration_list .registration_card_row > div,
.registration_list .registration_card_end > div {
  padding: 0.5em;
  border-right: dotted 1px #E0E4CC;
}
@media screen and (max-width: 700px) {
  .registration_list .registration_card_start > div,
  .registration_list .registration_card_row > div,
  .registration_list .registration_card_end > div {
    border-bottom: dotted 1px #E0E4CC;
    border-right: none;
  }
}
.registration_list .registration_card_start > div h5,
.registration_list .registration_card_row > div h5,
.registration_list .registration_card_end > div h5 {
  font-size: 0.75em;
  text-transform: uppercase;
  margin: 0;
  font-weight: normal;
  color: #a7ab99;
  letter-spacing: -0.05em;
}
.registration_list .registration_card_start > div:last-of-type,
.registration_list .registration_card_row > div:last-of-type,
.registration_list .registration_card_end > div:last-of-type {
  border-right: none;
  border-bottom: none;
}
.login {
  margin: 0;
  padding: 0;
  background: url(assets/login_wall.jpeg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.login .login_box {
  width: 20em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}
@media screen and (max-width: 700px) {
  .login .login_box {
    width: 100%;
    height: auto;
    top: auto;
  }
}
.login form {
  height: 100%;
  padding: 0;
}
.login .logo_zooza {
  overflow: hidden;
  display: inline-block;
  width: 8em;
  height: auto;
  margin-left: -0.8em;
  margin-bottom: 1em;
  vertical-align: middle;
}
.login .logo_zooza img {
  width: 100%;
  height: auto;
}
.login section {
  padding: 2em;
  padding-top: 2em;
  height: 100%;
  padding-top: 40%;
  border-radius: 0;
  border: none;
}
@media screen and (max-width: 700px) {
  .login section {
    padding-top: 2em;
    margin-bottom: 0;
  }
}
.login section h3 {
  display: inline-block;
  vertical-align: middle;
}
.two_pane_view {
  width: auto;
  display: grid;
  grid-template-columns: 0.25fr 0.75fr;
  grid-template-rows: 50px auto;
  border: solid 1px #E0E4CC;
  border-left: none;
  border-right: none;
  margin: 0 -0.5em;
  max-height: 300px;
  overflow: hidden;
}
.two_pane_view .left_pane {
  max-height: 300px;
  grid-column: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  height: 100%;
  width: 100%;
  padding: 0.5em 0 0.5em 0.5em;
  border-right: solid 1px #E0E4CC;
  overflow-y: auto;
}
.two_pane_view .left_pane ul a {
  display: block;
}
.two_pane_view .left_pane ul li.active {
  background-color: #E0E4CC;
}
.two_pane_view .left_pane ul li.active a {
  padding-left: 0.5em;
  text-decoration: none;
  color: black;
}
.two_pane_view .right_pane {
  max-height: 300px;
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
.two_pane_view .right_pane ul.listing li {
  margin: 0;
}
.two_pane_view .right_pane ul.listing li:first-child {
  border-top: none;
}
.two_pane_view .right_pane ul.listing li:last-child {
  border-bottom: none;
}
.two_pane_view .fixed_top {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  border-bottom: solid 1px #E0E4CC;
  padding: 0.5em;
  height: 50px;
}
.two_pane_view .fixed_top + .right_pane {
  max-height: 250px;
  grid-row-start: 2;
  grid-row-end: 3;
}
/* class applies to select element itself, not a wrapper element */
.select-css {
  display: block;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: 19px;
  padding: 0.5em 1.5em 0.5em 0.5em;
  /*	font-size: 16px;
  	font-family: sans-serif;
  	font-weight: 700;
  	color: #444;
  	line-height: 1.3;
  	padding: .6em 1.4em .5em .8em;*/
  width: 100%;
  max-width: 100%; /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0;
  /*border: 1px solid #aaa;*/
  /*box-shadow: 0 1px 0 1px rgba(0,0,0,.04);*/
  /*border-radius: .5em;*/
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.2em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
  	for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference

  */
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right 0.7em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: 0.65em auto, 100%;
  transition: all 0.1s;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
  display: none;
}
/* Hover style */
.select-css:hover {
  border-color: rgba(0, 0, 0, 0.5);
  transition: all 0.1s;
}
/* Focus style */
.select-css:focus {
  /*border-color: #aaa;*/
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  /*	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  	box-shadow: 0 0 0 3px -moz-mac-focusring;
  	color: #222; */
  border: solid 1px #a7dbd8;
  transition: all 0.2s;
  -webkit-box-shadow: inset 0px 0px 0px 2px rgb(167, 219, 216);
  -moz-box-shadow: inset 0px 0px 0px 2px rgb(167, 219, 216);
  box-shadow: inset 0px 0px 0px 2px rgb(167, 219, 216);
  outline: none;
}
/* Set options to normal weight */
.select-css option {
  font-weight: normal;
}
/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir=rtl] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
  background-position: left 0.7em top 50%, 0 0;
  padding: 0.6em 0.8em 0.5em 1.4em;
}
/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
  color: graytext;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}
.select-css:disabled:hover, .select-css[aria-disabled=true] {
  border-color: #aaa;
}
/* v2 */
/* mocca */
/* mocca */
/* dark mocca */
/* orange */
/* blue */
/* blue */
/* CSS Variables for Dark Mode - Exact colors from main app */
:root {
  --default: 249, 250, 242;
  --zooza_white: 255, 255, 255;
  --absinthe: 136, 198, 66;
  --baker_miller_pink: 255, 145, 175;
  --titian_red: 189, 86, 32;
  --rosso_corsa: 212, 0, 0;
  --mummy: 123, 70, 35;
  --veronese_green: 0, 166, 113;
  --celadon: 172, 225, 175;
  --klein_blue: 31, 24, 192;
  --nicoll_blue: 106, 149, 191;
  --mauve: 135, 76, 98;
  --tyrian_purple: 102, 2, 60;
  --gamboge: 228, 155, 15;
  --monticello_yellow: 246, 202, 35;
  --zooza_orange: 250, 105, 0;
  --zooza_color_black: rgb(25, 25, 25);
  --zooza_color_dark_gray: rgb(39, 39, 37);
}
/* breakpoints */
/* layers */
/* other */
html {
  height: 100%;
}
body {
  font-size: 100%;
  font-family: "Source Sans Pro", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  background-color: #fff;
  background-repeat: no-repeat;
  height: 100%;
}
.text_error {
  color: red;
}
body {
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto;
  grid-template-rows: 50px min-content auto;
}
@media all and (min-width: 700px) {
  body {
    overflow: hidden;
    grid-column-gap: 0px;
    grid-template-columns: 160px auto;
    grid-template-rows: 45px auto;
  }
}
body .process {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 60px;
  height: 100%;
  margin: -5px;
}
body .process .process_steps {
  overflow: auto;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
}
body .process .process_control {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: 3;
}
body .process .process_control .narrow_controls {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
@media all and (max-width: 700px) {
  body .process .process_control .narrow_controls {
    width: 100%;
  }
}
@media all and (min-width: 700px) {
  body.menu_collapsed {
    grid-template-columns: 50px auto;
  }
  body.menu_wide {
    grid-template-columns: 160px auto;
  }
}
.menu {
  height: 100%;
  display: flex;
  flex-direction: row;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
}
.menu .menu_collapse {
  display: none;
}
@media all and (max-width: 700px) {
  .menu nav {
    flex-grow: 2;
    margin-right: 10px;
    margin-left: 20px;
  }
  .menu nav ul {
    height: 100%;
    justify-content: space-between;
  }
  .menu nav ul li {
    height: calc(100% - 10px);
    flex-basis: 40px;
    margin: 5px !important;
  }
  .menu nav ul li a {
    display: inline-flex !important;
    align-items: center;
    height: 100%;
    padding: 0 !important;
    width: 100%;
    justify-content: center;
  }
}
.menu ul {
  display: flex;
  flex-direction: row;
}
@media all and (min-width: 700px) {
  .menu {
    flex-direction: column;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 4;
  }
  .menu .menu_collapse {
    display: list-item;
  }
  .menu ul {
    flex-direction: column;
  }
}
.infobar {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: 2;
  display: flex;
  line-height: 35px;
}
@media all and (min-width: 700px) {
  .infobar {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    flex-wrap: nowrap;
  }
}
.infobar #breadcrumbs {
  flex-basis: auto;
  flex-grow: 2;
}
.infobar .tools {
  display: flex;
  flex-grow: 0;
}
.infobar .tools #billing_period {
  flex-basis: auto;
}
.infobar .tools #user_panel {
  flex-basis: auto;
}
.infobar .tools #settings {
  flex-basis: auto;
}
.body {
  -webkit-overflow-scrolling: touch;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 3;
  grid-row-end: 3;
}
@media all and (min-width: 700px) {
  .body {
    overflow: auto;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
  }
}
.menu {
  background-color: #E0E4CC;
}
.menu .logo_z,
.menu .logo_zooza {
  display: none;
  padding: 10px 5px 0px 5px;
}
@media all and (min-width: 700px) {
  .menu .logo_z,
  .menu .logo_zooza {
    padding: 5px 5px 0px 10px;
    height: 45px;
    border-bottom: solid 1px #c9cdb7;
  }
}
@media all and (min-width: 700px) {
  .menu nav {
    margin-top: 10px;
  }
}
.menu nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu nav ul li {
  transition: border-radius 0.15s;
  margin: 5px 5px;
}
@media all and (min-width: 700px) {
  .menu nav ul li {
    margin: 0;
  }
}
.menu nav ul li a {
  transition: border-radius 0.2s, background-color 0.2s;
  text-decoration: none;
  font-weight: 600;
  color: #FA6900;
  display: block;
  padding: 5px 0px;
  line-height: 28px;
}
.menu nav ul li a span:first-of-type {
  display: inline-block;
  width: 40px;
  text-align: center;
}
.menu nav ul li a span:last-of-type {
  display: none;
}
@media all and (min-width: 700px) {
  .menu nav ul li a {
    padding: 10px 5px;
  }
  .menu nav ul li a span:last-of-type {
    display: initial;
  }
}
.menu nav ul li:hover a {
  transition: color 0.1s;
  color: #000;
}
.menu nav ul li.active {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
@media all and (min-width: 700px) {
  .menu nav ul li.active {
    border-radius: 0%;
    margin: 0px 0px;
  }
}
.menu nav ul li.active a {
  color: #000;
}
.menu_wide .menu .logo_z,
.menu_collapsed .menu .logo_z {
  display: none;
}
.menu_wide .menu .logo_zooza,
.menu_collapsed .menu .logo_zooza {
  display: block;
  flex-grow: 2;
}
@media all and (min-width: 700px) {
  .menu_collapsed .menu .logo_zooza {
    display: none;
    flex-grow: 0;
  }
  .menu_collapsed .menu .logo_z {
    display: block;
  }
  .menu_collapsed .menu ul li.active {
    border-radius: 50%;
    margin: 5px 5px;
  }
  .menu_collapsed .menu ul li.active a {
    padding: 5px 0px;
  }
  .menu_collapsed .menu a span:last-of-type {
    display: none;
  }
  .menu_wide .menu .logo_z {
    display: none;
  }
  .menu_wide .menu .logo_zooza {
    display: block;
    flex-grow: 0;
  }
}
@media all and (max-width: 700px) {
  .menu_wide .menu .logo_z {
    display: none;
  }
  .menu_wide .menu .logo_zooza {
    display: inline-flex !important;
    flex-grow: 0;
    padding: 0 0 0 5px;
    align-items: center;
  }
}
.infobar {
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  padding: 0 0 0 10px;
}
#breadcrumbs,
#billing_period,
#settings,
#user_panel {
  font-size: 14px;
  line-height: 30px;
  margin: 6px 5px 5px 5px;
  padding: 0;
}
#breadcrumbs {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}
@media all and (max-width: 700px) {
  #breadcrumbs li {
    line-height: 1 !important;
  }
}
#breadcrumbs li::after {
  content: "\\";
  margin-left: 5px;
  margin-right: 5px;
  color: #c9cdb7;
}
#billing_period {
  display: inline-flex;
}
#user_panel {
  display: inline-flex;
}
#settings {
  margin-right: 10px;
}
#settings a:hover,
#settings .active {
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  color: #000;
}
#settings a {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 33px;
  text-align: center;
}
.body {
  padding: 5px;
  padding-bottom: 100px;
}
.body .notice {
  background-color: blanchedalmond;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}
.body .notice p {
  margin: 0;
}
.body .notice p + p {
  margin-bottom: 10px;
}
.body .center_text {
  text-align: center;
}
.body .page_header {
  display: flex;
  margin: 12px 5px 12px 0px;
  padding: 0 0 0 10px;
}
.body .page_header.center_title h1 {
  flex-basis: 100%;
  text-align: center;
}
.body .page_header h1 {
  flex-grow: 0;
}
.body .page_header .actions {
  flex-grow: 2;
}
.body .page_header .actions .quick_action {
  float: right;
}
.body .page_body {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.body {
  background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
  background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}
.body .process .process_steps {
  background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
  background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
  padding: 5px;
}
.body .process .process_control {
  padding: 5px;
  display: flex;
  border-top: solid 1px rgba(224, 228, 204, 0.3);
}
.body .process .process_control .info {
  display: flex;
  flex-basis: 50%;
  align-items: center;
}
.body .process .process_control .info div.warning {
  margin-left: 10px;
  background-color: #ff3000;
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
}
.body .process .process_control .actions {
  display: flex;
  flex-basis: 50%;
  align-items: center;
  justify-content: end;
}
.body .process .process_control .actions button + button {
  margin-left: 10px;
}
section div.email_preview_part {
  margin: -0.5em;
  padding: 0.5em;
}
section div.email_preview_part h4 {
  color: #c9cdb7;
  margin: 0;
}
section div.email_preview_part p {
  margin: 0;
}
.email_preview_part + .email_preview_part {
  border-top: solid 1px #E0E4CC;
}
.video_dialog .video_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px;
}
.video_dialog .video_grid .video_card {
  display: block;
  padding: 5px;
  border: solid 2px #c9cdb7;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.video_dialog .video_grid .video_card.active {
  border-color: #FA6900;
}
.video_dialog .video_grid .video_card img {
  width: 100%;
  height: auto;
  display: block;
}
.inline_micro_registration {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}
.inline_micro_registration > div {
  padding: 5px;
}
.video_stats {
  position: relative;
  width: 24px;
  height: 24px;
}
.video_stats i {
  font-size: 24px;
}
.video_stats span {
  position: absolute;
  top: 4px;
  left: 2px;
  color: white;
  font-size: 10px;
  width: 17px;
  text-align: center;
}
.video_dialog {
  background-color: #E0E4CC;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
  border: solid 2px #c9cdb7;
}
/* styled radio buttons */
.styled_radio_group {
  display: inline-flex;
  justify-content: flex-start;
  width: 100%;
}
.styled_radio_group button {
  /*        -webkit-box-sizing: content-box;
         -moz-box-sizing: content-box;
              box-sizing: content-box;
              -webkit-user-select: none;
              white-space: normal;
          -webkit-appearance: none;*/
  display: inline-block;
  border-radius: 0;
  margin-left: 0;
  border-left: none;
  border-left-width: 0;
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-appearance: button;
}
.styled_radio_group button.active {
  background-color: #a7dbd8;
}
.styled_radio_group button:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.styled_radio_group button:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
/* context menu */
.context_menu {
  position: relative;
  z-index: 100;
  display: inline-block;
}
.context_menu .context_menu_value {
  border-radius: 5px;
  border: solid 1px #E0E4CC;
  padding: 0px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  border-radius: 5px;
  margin-left: 5px;
}
.context_menu .context_menu_value span:last-of-type {
  display: none;
}
@media all and (min-width: 700px) {
  .context_menu .context_menu_value span:last-of-type {
    display: initial;
  }
}
.context_menu .context_menu_options {
  display: none;
  position: absolute;
  right: 0%;
  top: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 450px;
  border-radius: 5px;
  border: solid 1px #E0E4CC;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}
.context_menu .context_menu_options a {
  background-color: #fff;
  display: block;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 200px;
}
.context_menu .context_menu_options a:hover,
.context_menu .context_menu_options a.active {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000;
}
.context_menu:hover .context_menu_value {
  border-color: #c9cdb7;
}
.context_menu.opened .context_menu_value {
  border-color: #c9cdb7;
}
.context_menu.opened .context_menu_options {
  display: block;
}
/* crossroad */
.crossroad {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  align-items: stretch;
  align-content: space-evenly;
}
.crossroad a {
  text-align: center;
  border: solid 1px #E0E4CC;
  padding: 10px;
  border-radius: 5px;
}
.crossroad a span {
  display: block;
  text-align: inherit;
  width: 100%;
  margin: 10px 0 10px 0;
}
.crossroad a span.crossroad_icon {
  font-size: 32px;
  color: #000;
}
.crossroad a span.crossroad_label {
  font-size: 18px;
}
.crossroad a:hover {
  border-color: #c9cdb7;
}
/* buttons */
[role=button].quick_action,
button.quick_action {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  display: inline-block;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}
[role=button].quick_action:hover,
button.quick_action:hover {
  background-color: rgba(0, 0, 0, 0.25);
}
[role=button].quick_action.primary,
button.quick_action.primary {
  background-color: #a7dbd8;
}
[role=button].quick_action.primary:hover,
button.quick_action.primary:hover {
  background-color: #96cfcc;
}
/* section */
section.tablet {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  border: solid 1px #E0E4CC;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
section.tablet.full_width {
  width: 100%;
  max-width: 100%;
}
.with_help_pane {
  display: flex;
  flex-wrap: wrap;
}
.with_help_pane section.tablet.full_width {
  flex-basis: 70%;
  margin-left: 0;
}
.with_help_pane section.tablet {
  flex-basis: 29%;
  margin-left: 1%;
}
section.infobar {
  background-color: rgba(224, 228, 204, 0.3);
  display: block;
  font-size: 0.875em;
  line-height: 1.4;
}
/* input number */
.input_number {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.input_number label {
  font-size: 1em;
  font-weight: 600;
}
.input_number .stepper {
  max-width: 100%;
}
.input_number .block_help {
  grid-column-start: 1;
  grid-column-end: 3;
  font-size: 0.875em;
  color: #666;
  font-style: italic;
}
/* listing */
.listing {
  margin: 5px -5px;
  list-style-type: none;
  padding: 0;
}
.listing li {
  margin: 0px -5px 0px -5px;
  padding: 10px;
  overflow: hidden;
}
.listing li:not(.list_divider) + li:not(.list_divider) {
  border-top: solid 1px #E0E4CC;
}
.listing li:not(.add_row):hover {
  background-color: RGBA(224, 228, 204, 0.4);
  transition: all 0.2s;
}
.listing li:last-child {
  border-bottom: none;
  margin-bottom: -10px;
}
.listing li.list_divider {
  position: relative;
  padding: 0;
  overflow: visible;
  border-bottom: none;
  height: 20px;
}
.listing li.list_divider:hover {
  background-color: white;
}
.listing li.list_divider:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 9px;
  top: 0;
  left: 0;
  border-bottom: solid 1px #E0E4CC;
  z-index: 1;
}
.listing li.list_divider div {
  font-size: 13px;
  text-transform: uppercase;
  background-color: white;
  padding: 0 10px;
  position: absolute;
  top: 0px;
  left: 10px;
  z-index: 2;
}
.listing.editable_rows li {
  display: flex;
}
.listing.editable_rows li .field {
  flex-basis: calc(100% - 80px);
  flex-grow: 0;
}
.listing.editable_rows li .controls {
  flex-grow: 0;
  flex-basis: 80px;
}
p + .listing {
  margin-top: -10px;
}
h1 {
  font-family: "Montserrat", sans-serif;
  margin: 0 20px 0 0;
  font-size: 24px;
  font-weight: 700;
}
.capitalize {
  text-transform: capitalize;
}
h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}
h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}
h3 + p {
  padding: 0 10px 10px 10px;
  margin: 0 -10px 10px -10px;
  border-bottom: solid 1px #E0E4CC;
}
a,
a:visited {
  text-decoration: none;
  color: #FA6900;
}
.course_list {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 5px;
  align-items: stretch;
  align-content: space-evenly;
}
.course_list .notice {
  grid-column-start: 1;
  grid-column-end: 4;
}
.course_list .course_list_item {
  text-align: left;
  border: solid 1px #E0E4CC;
  padding: 10px;
  border-radius: 5px;
  min-height: 100px;
}
.course_list .course_list_item:hover {
  border-color: #c9cdb7;
  background-color: rgba(224, 228, 204, 0.3);
}
.course_list .course_list_item.course_list_item_button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.course_list .course_list_item .registration_type {
  text-transform: uppercase;
  font-size: 11px;
  color: black;
}
.course_list .course_list_item h3 {
  text-transform: initial;
  padding: 0 10px 10px 10px;
  margin: 0 -10px 10px -10px;
  border-bottom: solid 1px #E0E4CC;
}
.course_list .course_list_item .properties {
  padding: 10px 0;
  color: black;
}
.course_list .course_list_item .properties p {
  margin: 0;
}
@media all and (max-width: 700px) {
  .course_list {
    grid-template-columns: 1fr;
  }
}
.listing_with_filter {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: min-content min-content;
}
.listing_with_filter aside {
  grid-column: 1/2;
  grid-row: 1/2;
  /* fix previous formatting */
  width: auto;
  float: none;
}
.listing_with_filter .file_list {
  grid-column: 2/3;
  grid-row: 1/2;
}
.listing_with_filter .paging {
  grid-column: 2/3;
  grid-row: 2/3;
}
.file_list {
  border-radius: 0.5em;
  border: solid 2px #E0E4CC;
}
.file_list .file_list_item {
  padding: 0.5em;
  display: grid;
  grid-template-columns: 5fr 1fr 1fr;
}
.file_list .file_list_item:hover {
  background-color: rgba(222, 224, 215, 0.3098039216);
}
.file_list .file_list_item + .file_list_item {
  border-top: solid 1px #E0E4CC;
}
.upload_progress_box .upload_progress_bar {
  font-size: 12px;
  display: grid;
  background-color: #E0E4CC;
  border-radius: 20px;
}
.upload_progress_box .upload_progress_bar span {
  grid-column: 1/2;
  grid-row: 1/2;
  z-index: 2;
  text-align: center;
  font-weight: bold;
  color: white;
}
.upload_progress_box .upload_progress_bar div {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: #FA6900;
  border-radius: 20px;
  z-index: 1;
}
.dashboard {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 5px;
  align-items: stretch;
  align-content: space-evenly;
}
.dashboard .notice {
  grid-column-start: 1;
  grid-column-end: 4;
}
.dashboard .card {
  text-align: left;
  border: solid 1px #E0E4CC;
  border-radius: 5px;
  min-height: 100px;
}
.dashboard .card h3 {
  text-transform: initial;
  padding: 10px;
  border-bottom: solid 1px #E0E4CC;
}
.dashboard .card [role=button] {
  line-height: 2;
}
.dashboard .card p {
  padding: 10px;
  margin: 0;
  border-bottom: 0;
}
.dashboard .card .tight {
  padding: 0 10px;
}
.dashboard .card ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.dashboard .card ul li a {
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px #E0E4CC;
  padding: 10px;
}
.dashboard .card ul li a .small {
  line-height: 2.3;
  color: #666;
}
.dashboard .card .small {
  font-size: 12px;
  text-transform: uppercase;
}
@media all and (max-width: 700px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-auto-rows: initial;
  }
}
/* mocca */
/* mocca */
/* orange */
/* dark orange */
/* red */
/* black */
/* black */
/* blue */
/* blue */
:root {
  --zooza_test: rgb(39, 39, 37);
  --zooza_error: #ff3000;
  --zooza_success: #0cc429;
  --zooza_warning: #ffbf00;
  --main_padding: 5px;
  --font_normal: 16px;
  --font_large: 20px;
  --font_larger: 26px;
  --zooza_color_primary: #FA6900;
  --zooza_color_primary_darker: #b36325;
  --zooza_color_blue: #3aa39d;
  --zooza_color_blue_lighter: #A7DBD8;
  --zooza_color_gray: #E0E4CC;
  --zooza_color_gray_dark: #4d4f46;
  --zooza_color_gray_darker: #959886;
  --zooza_color_gray_light: #878a7a;
  --zooza_color_gray_lighter: #f2f5e5;
  --zooza_color_white: #fff;
  --zooza_color_cold_gray: #eef0f1;
  --zooza_var_border_radius: 5px;
  --zooza_font_size_smallest: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zooza_color_primary: #FF8C42; /* Lighter orange for better visibility */
    --zooza_color_primary_darker: #C76521; /* Slightly softened dark orange */
    --zooza_color_blue_darker: #13302f;
    --zooza_color_blue: #204e4c; /* Brighter teal blue for improved contrast */
    --zooza_color_blue_lighter: #5c9794; /* Softened lighter blue, easier on the eyes */
    --zooza_color_gray: #545550;
    --zooza_color_gray_dark: #3C3F3A; /* Shifted to a more neutral dark gray */
    --zooza_color_gray_darker: #76796A; /* Muted darker gray */
    --zooza_color_gray_light: #a7a8a0; /* Softer light gray that's less harsh */
    --zooza_color_gray_lighter: #E7EBDA; /* Warmer toned light gray as an alternative */
    --zooza_color_cold_gray: #D4D6D8; /* Neutral cold gray for balance */
    --zooza_color_white: rgb(230, 230, 230); /* Slightly brighter white for readability */
    --zooza_color_black: rgb(25, 25, 25); /* Deeper black for darker backgrounds */
    --zooza_warning: rgba(255, 191, 0, 0.53);
  }
}
.autocomplete-suggestions {
  text-align: left;
  cursor: default;
  border: 1px solid #ccc;
  border-top: 0;
  background: #fff;
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
  /* core styles should not be changed */
  position: absolute;
  display: none;
  z-index: 9999;
  max-height: 254px;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.autocomplete-suggestion {
  position: relative;
  padding: 0 0.6em;
  line-height: 23px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.02em;
  color: #333;
}
.autocomplete-suggestion b {
  font-weight: normal;
  color: #1f8dd6;
}
.autocomplete-suggestion.selected {
  background: #f0f0f0;
}
.autocomplete-suggestions .autocomplete-suggestion {
  display: flex;
  flex-direction: column;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
.autocomplete-suggestions .autocomplete-suggestion .email, .autocomplete-suggestions .autocomplete-suggestion .phone {
  font-size: 11px;
}
.event_creator {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 3fr;
  height: 100vh;
  max-height: 70vh;
  margin: 0 !important;
  overflow: auto;
}
@media all and (max-width: 700px) {
  .event_creator {
    grid-template-columns: 1fr;
    height: initial;
    max-height: initial;
  }
}
.event_creator .date_time label[for=date] {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.event_creator .date_time .time {
  display: flex;
}
.event_creator .date_time .time label {
  position: relative;
  float: none;
  width: 50%;
}
.event_creator .date_time .time label input {
  width: 100%;
}
.event_creator .date_time .time [for=minutes] {
  margin-right: 0;
}
.event_creator .panels {
  background-color: #E0E4CC;
  grid-column: 1/2;
  grid-row: 1/2;
  overflow: auto;
}
.event_creator .panels .panel {
  height: 100%;
  overflow: auto;
  display: grid;
  grid-template-rows: min-content auto min-content;
}
.event_creator .panels .panel .panel_head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 5px;
  gap: 5px;
}
.event_creator .panels .panel .panel_actions {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  gap: 5px;
}
.event_creator .panels .panel .panel_actions a {
  text-align: center;
}
.event_creator .panels .panel .panel_body {
  overflow: auto;
  padding: 5px;
}
.event_creator .panels .panel .panel_body hr {
  margin: 20px 0;
}
.event_creator .panels .panel .panel_body ul.event_settings_list li, .event_creator .panels .panel .panel_body ul.event_templates_list li {
  border-bottom: solid 1px #b36325;
  display: flex;
  gap: 10px;
  padding: 5px 0;
}
.event_creator .panels .panel .panel_body ul.event_settings_list li a.info, .event_creator .panels .panel .panel_body ul.event_templates_list li a.info {
  width: 100%;
  color: #b36325;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}
.event_creator .panels .panel .panel_body ul.event_settings_list li a.info span:last-of-type, .event_creator .panels .panel .panel_body ul.event_templates_list li a.info span:last-of-type {
  font-size: 11px;
}
.event_creator .panels .panel .panel_body ul.event_settings_list li .actions, .event_creator .panels .panel .panel_body ul.event_templates_list li .actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.event_creator .events {
  grid-column: 2/3;
  grid-row: 1/2;
  display: grid;
  grid-template-rows: min-content auto;
  overflow: auto;
}
@media all and (max-width: 700px) {
  .event_creator .events {
    grid-column: 1/2;
    grid-row: 2/3;
  }
}
.event_creator .events.empty {
  align-content: center;
  justify-content: center;
}
.event_creator .events.empty > div {
  max-width: 20em;
}
.event_creator .events.calendar_view_full {
  grid-template-rows: 200px auto;
}
.event_creator .events .calendar_view {
  grid-column: 1/2;
  grid-row: 1/2;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.event_creator .events .calendar_view ul {
  flex-basis: 100%;
}
.event_creator .events .note {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: red;
}
.event_creator .events .note p {
  margin: 0;
}
.event_creator .events .events_list {
  grid-column: 1/2;
  grid-row: 2/3;
  overflow: auto;
}
.event_creator .events .events_list table tr {
  border-bottom: solid 1px #E0E4CC;
}
.event_creator .events .events_list table tr.holiday {
  background-color: rgba(0, 0, 0, 0.05);
}
.event_creator .events .events_list table tr.conflict {
  border: solid 2px red;
}
.event_creator .calendar_view ul {
  display: flex;
  height: 40px;
  width: 100%;
}
.event_creator .calendar_view ul li {
  width: 100%;
}
.event_creator .calendar_view ul li.weekend a {
  background-color: #E0E4CC;
  border-right-color: #9b9d8d;
}
.event_creator .calendar_view ul li.event a {
  background-color: #b36325;
}
.event_creator .calendar_view ul li.weekend.holiday a {
  background-color: red;
}
.event_creator .calendar_view ul li.holiday a {
  background-color: red;
}
.event_creator .calendar_view ul li.conflict a {
  background-color: red;
}
.event_creator .calendar_view ul li.month a span {
  display: block;
}
.event_creator .calendar_view ul li:nth-last-child(-n+15) a span {
  border-left: none;
  border-right: solid 1px rgba(0, 0, 0, 0.05);
  right: 0;
  left: initial;
  padding-right: 2px;
  padding-left: initial;
  text-align: right;
}
.event_creator .calendar_view ul li:hover:not(.month) a span {
  display: block;
  width: 100px;
  background-color: white;
  z-index: 10;
}
.event_creator .calendar_view ul a {
  display: block;
  height: 100%;
  position: relative;
  background-color: rgba(0, 0, 0, 0.05);
  border-right: solid 1px #E0E4CC;
}
.event_creator .calendar_view ul a span {
  display: none;
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 10px;
  color: black;
  padding-left: 2px;
  height: 20px;
}
.calendar_week_day.holiday.scheduler {
  position: relative;
  z-index: 10;
}
.calendar_week_day.holiday.scheduler:before {
  border: solid 2px red;
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  box-sizing: border-box;
}
.calendar_week_day.holiday.scheduler .day_date {
  color: red;
}
.calendar_week_day.holiday.scheduler .day_date p {
  margin: 5px 0 0 0;
  line-height: 1.1;
}
.calendar_week_day.holiday .day_name {
  background-color: red;
  color: white;
}
.calendar_week_day.holiday .day_date {
  background-color: red;
  color: white;
}
.calendar_week_day.holiday .day_date p {
  margin: 5px 0 0 0;
  line-height: 1.1;
}
.availability_wizard {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 300px 1fr;
}
div.date_time {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr;
}
div.date_time > p {
  grid-column: span 2;
  margin-bottom: 0;
}
div.date_time label[for=date] {
  grid-column: 1/2;
  grid-row: 2/3;
  width: auto;
  float: none;
  margin-right: 0;
}
div.date_time .time {
  grid-column: 2/3;
  grid-row: 2/3;
  display: flex;
}
fieldset ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
section.zooza_modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  z-index: 1000;
}
div.zooza_modal {
  max-width: 300px;
  align-self: center;
  justify-self: center;
  max-height: 80vh;
  border: solid 2px #E0E4CC;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0px 2.8px 2.2px rgba(0, 0, 0, 0.006), 0.1px 6.7px 5.3px rgba(0, 0, 0, 0.008), 0.1px 12.5px 10px rgba(0, 0, 0, 0.01), 0.2px 22.3px 17.9px rgba(0, 0, 0, 0.012), 0.4px 41.8px 33.4px rgba(0, 0, 0, 0.014), 1px 100px 80px rgba(0, 0, 0, 0.02);
}
.zooza_modal_head {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-self: center;
  border-bottom: solid 1px #E0E4CC;
  gap: 10px;
  margin: 0 !important;
}
.zooza_modal_body {
  padding: 10px;
  margin: 0 !important;
}
.zooza_modal_actions {
  padding: 10px;
  display: flex;
  gap: 10px;
  border-top: solid 1px #E0E4CC;
  margin: 0 !important;
}
.vertical_labels {
  /*
    th {
      height: 140px;
      white-space: nowrap;
      vertical-align: bottom;

      div {
        transform: translate(25px, 51px) rotate(315deg);
        line-height: 1;
        width: 30px;

        span  {
          border-bottom: 1px solid #ccc;
          padding: 5px;
        }

      }

    }

    tbody tr  {

      border-top: solid 1px #ccc;

      td  {

        vertical-align: bottom;
        border-right: solid 1px #ccc;

      }

    }
  */
}
.table_wrapper {
  overflow-x: auto;
}
table.vertical_labels td, table.vertical_labels th {
  border: solid 1px #efefef;
  white-space: nowrap;
}
table.vertical_labels tr:nth-child(odd) td {
  background-color: rgba(0, 0, 0, 0.05);
}
.calendar .background_data {
  z-index: 10;
}
.calendar .background_data li {
  background-color: rgba(255, 0, 0, 0.2);
  z-index: 10;
}
.calendar .background_data_overlay {
  z-index: 1000;
}
.calendar .background_data_overlay li {
  z-index: 1000;
  border: none;
  border-top: solid 2px red;
  border-bottom: solid 2px red;
  background-color: transparent;
  pointer-events: none;
}
.calendar ul li {
  z-index: 11;
}
.calendar_data li.calendar_item {
  display: block;
  overflow: hidden;
  border: solid 1px #7eb6b3;
}
.calendar_data li.calendar_item span {
  white-space: nowrap;
}
.chart_legend_list {
  list-style-type: none;
  margin: 10px 0 10px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chart_legend {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.label_list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.label_list.read_only .label_item {
  font-size: 12px;
  background-color: white;
}
.label_item {
  display: inline-flex;
  align-content: center;
  border-radius: 2px;
  background-color: #E0E4CC;
  border: solid 1px #c8ccb5;
}
.label_item .label_item_label {
  padding: 2px 5px;
  text-transform: capitalize;
  color: black;
}
.label_item .label_item_label.selected {
  background-color: #b36325;
  color: white;
}
.label_item a.label_item_label:hover {
  background-color: #c8ccb5;
  cursor: pointer;
}
.label_item .label_item_action {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
}
.label_item .label_item_action:hover {
  background-color: #c8ccb5;
  color: black;
}
.labels_editor {
  border-top: solid 1px #E0E4CC;
  border-bottom: solid 1px #E0E4CC;
  padding: 20px 0px;
  background-color: #f9f9f9;
}
.labels_editor.in_section {
  padding: 20px 10px;
  margin-left: -10px;
  margin-right: -10px;
}
ul.calendar_data li.calendar_item.has_conflict:after {
  position: absolute;
  border: solid 2px red;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 1px;
}
.listing li.highlight {
  background-color: RGBA(224, 228, 204, 0.6) !important;
}
fieldset.radio_group ul li {
  margin-bottom: 10px;
}
fieldset.radio_group ul li label {
  display: flex;
  align-items: start;
}
fieldset.radio_group ul li small {
  display: block;
}
.z2.app_menu {
  background-color: var(--zooza_color_gray);
  grid-area: sidebar;
  display: grid;
  grid-template-rows: min-content auto min-content;
  grid-template-columns: calc(var(--main_padding) * 6) auto;
  position: relative;
}
@media screen and (max-width: 700px) {
  .z2.app_menu {
    grid-template-columns: unset;
  }
  .z2.app_menu .nav_items {
    display: none;
  }
  .z2.app_menu .nav_items.opened {
    display: initial;
  }
}
.z2.app_menu .nav_items {
  overflow-y: auto;
  overflow-x: hidden;
}
@media screen and (max-width: 700px) {
  .z2.app_menu .nav_items {
    position: absolute;
    z-index: 1000;
    top: 43px;
    left: 0;
    width: 100%;
    background-color: var(--zooza_color_gray);
  }
}
.z2.app_menu .nav_items > ul > li {
  border-top: solid 1px #959886;
}
.z2.app_menu .nav_items > ul > li:last-child {
  border-bottom: solid 1px #959886;
}
.z2.app_menu .nav_items li {
  padding-left: var(--main_padding);
}
.z2.app_menu .nav_items li.active {
  /*reset*/
  background-color: transparent;
}
.z2.app_menu .nav_items li.active > a {
  background: rgb(242, 245, 229);
  background: linear-gradient(90deg, rgba(242, 245, 229, 0) 50%, rgb(242, 245, 229) 100%);
  background-color: white;
  font-weight: bold;
}
@media (prefers-color-scheme: dark) {
  .z2.app_menu .nav_items li.active > a {
    background: var(--zooza_color_gray_dark);
  }
}
.z2.app_menu .nav_items li.column a {
  flex-direction: column;
  align-items: unset;
}
.z2.app_menu .nav_items li a {
  z-index: 0;
  width: 100%;
  display: flex;
  gap: calc(var(--main_padding) / 2);
  align-items: center;
  padding: calc(var(--main_padding) * 2);
  position: relative;
  color: black;
}
.z2.app_menu .nav_items li a:hover {
  color: #FA6900;
}
@media (prefers-color-scheme: dark) {
  .z2.app_menu .nav_items li a:hover {
    color: var(--zooza_color_white);
  }
}
.z2.app_menu .nav_items li a:hover:after {
  content: "";
  background-color: rgba(255, 255, 255, 0.3607843137);
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  position: absolute;
  top: 2px;
  left: 0px;
  z-index: -1;
  border-radius: calc(var(--main_padding) / 2);
  border: solid 1px white;
}
@media (prefers-color-scheme: dark) {
  .z2.app_menu .nav_items li a {
    color: var(--zooza_color_cold_gray);
  }
}
.z2.app_menu .nav_items li a span {
  /*reset*/
  width: 100%;
  text-align: left;
}
.z2.app_menu .nav_items li a em {
  width: 30px;
}
.z2.app_menu .nav_items li ul li:last-child {
  padding-bottom: calc(var(--main_padding) * 2);
}
.z2.app_menu .nav_items li ul li.active a:before {
  content: "\eab7";
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: var(--main_padding);
}
.z2.app_menu .nav_items li ul li a {
  padding-left: 32px;
  font-size: 14px;
  border-top-left-radius: calc(var(--main_padding) / 2);
  border-bottom-left-radius: calc(var(--main_padding) / 2);
}
.z2.app_menu .app_header, .z2.app_menu .nav_items {
  grid-column: span 2;
}
@media screen and (max-width: 700px) {
  .z2.app_menu .app_header, .z2.app_menu .nav_items {
    grid-column: unset;
  }
}
.z2.app_menu .notifications {
  grid-column: 1/2;
  grid-row: 3/4;
  border-top: solid 1px #959886;
  padding: var(--main_padding);
}
@media screen and (max-width: 700px) {
  .z2.app_menu .notifications {
    grid-column: unset;
    grid-row: unset;
    display: none;
  }
}
.z2.app_menu .user_settings {
  grid-column: 2/3;
  grid-row: 3/4;
  display: flex;
  flex-direction: column;
  gap: calc(var(--main_padding) / 2);
  padding: var(--main_padding);
  border-top: solid 1px #959886;
}
.z2.app_menu .user_settings:hover {
  color: #ff3000;
}
@media screen and (max-width: 700px) {
  .z2.app_menu .user_settings {
    grid-column: unset;
    grid-row: unset;
  }
}
.z2.app_menu .user_settings span {
  /*reset*/
  width: 100%;
  text-align: left;
  display: block;
}
@media screen and (max-width: 700px) {
  .z2.app_menu .user_settings {
    display: none;
  }
}
@media screen and (max-width: 700px) {
  .z2.app_header {
    display: grid;
    grid-template-columns: auto min-content min-content min-content;
    gap: calc(var(--main_padding) * 2);
    padding-right: var(--main_padding);
  }
}
.z2.app_header .logo_zooza {
  align-self: start;
  display: block;
  width: 70px;
  margin: var(--main_padding) var(--main_padding) calc(var(--main_padding) * 4) var(--main_padding);
}
@media screen and (max-width: 700px) {
  .z2.app_header .logo_zooza {
    margin-bottom: var(--main_padding);
  }
}
.z2.app_header .logo_zooza img {
  display: block;
  width: 100%;
  height: auto;
}
.z2.app_header .app_header_item {
  display: none;
  color: black;
}
@media screen and (max-width: 700px) {
  .z2.app_header .app_header_item {
    display: flex;
    padding: var(--main_padding);
    gap: var(--main_padding);
    align-items: center;
  }
}
.z2.app_header .app_header_item span {
  /*reset*/
  width: auto;
  text-align: left;
  display: initial;
}
.z2.app_header .app_header_item.active {
  background-color: rgb(255, 255, 255);
}
.filter_item {
  position: relative;
}
.filter_item.active .filter_control {
  background-color: #A7DBD8;
}
.filter_item.active .filter_control:hover a:hover {
  background-color: #3aa39d;
}
.filter_item.active .filter_control:hover a:hover:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
.filter_item.active .filter_control:hover a:hover:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.filter_item.active .filter_control .filter_name {
  font-weight: bold;
}
.filter_item .filter_control {
  border-radius: 50px;
  background: none;
  background-color: rgb(255, 255, 255);
  border: solid 1px #A7DBD8;
  font-weight: normal;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
}
.filter_item .filter_control:hover {
  border-color: #3aa39d;
}
.filter_item .filter_control a {
  padding: var(--main_padding) calc(var(--main_padding) * 2);
  color: black;
  display: inline-flex;
  gap: var(--main_padding);
  align-items: center;
  justify-content: center;
}
.filter_item .filter_control a .filter_value {
  white-space: nowrap; /* Prevents the text from wrapping to the next line */
  overflow: hidden; /* Ensures that the text does not overflow the container */
  text-overflow: ellipsis; /* Adds the ellipsis when the text overflows */
  max-width: 300px;
}
.filter_item .filter_control.type_input input[type=text] {
  border: none;
  border-radius: 50px;
  padding: calc(var(--main_padding) + 2px) calc(var(--main_padding) * 2);
}
.filter_item .filter_options_separator {
  font-size: var(--zooza_font_size_smallest);
  border-bottom: solid 1px var(--zooza_color_gray_dark);
  text-transform: uppercase;
  color: var(--zooza_color_gray);
}
@media (prefers-color-scheme: dark) {
  .filter_item .filter_options_separator {
    color: var(--zooza_color_gray_lighter);
    border-bottom-color: var(--zooza_color_gray_darker);
  }
}
.filter_item .filter_options {
  z-index: 2000;
  position: absolute;
  top: 40px;
  left: 0px;
  width: 250px;
  background-color: rgb(255, 255, 255);
  border: solid 2px var(--zooza_color_gray);
  border-radius: 20px;
  flex-direction: column;
  box-shadow: 0px 3.5px 3.6px rgba(0, 0, 0, 0.024), 0px 9.8px 10px rgba(0, 0, 0, 0.035), 0px 23.5px 24.1px rgba(0, 0, 0, 0.046), 0px 78px 80px rgba(0, 0, 0, 0.07);
}
@media (prefers-color-scheme: dark) {
  .filter_item .filter_options {
    background: var(--zooza_color_gray_dark);
  }
}
.filter_item .filter_options .filter_options_header {
  position: relative;
}
.filter_item .filter_options .filter_options_header:before {
  font-family: "icomoon";
  content: "\e9c4";
  position: absolute;
  z-index: 1001;
  top: var(--main_padding);
  left: var(--main_padding);
}
.filter_item .filter_options .filter_options_header input {
  border: none;
  border-radius: 20px 20px 0 0;
  border-bottom: solid 2px var(--zooza_color_gray);
  padding-left: calc(var(--main_padding) * 6);
}
.filter_item .filter_options .filter_options_header input:focus {
  border-bottom-color: #3aa39d;
  -webkit-box-shadow: unset;
  -moz-box-shadow: unset;
  box-shadow: unset;
}
.filter_item .filter_options .filter_options_toolbar {
  border-top: solid 2px var(--zooza_color_gray);
  padding: var(--main_padding);
}
.filter_item .filter_options .filter_options_choices {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--main_padding) * 2);
  padding: var(--main_padding);
  max-height: 300px;
}
.z2.app_page_layout {
  display: grid;
  width: 100%;
  max-width: 1000px;
  margin: auto;
  grid-gap: var(--main_padding);
  padding-bottom: calc(var(--main_padding) * 10);
}
.z2.app_page_layout.support_wide_screens {
  max-width: initial;
}
.z2.app_page_layout.centered_content {
  padding-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.z2.app_page_layout .app_page_header {
  padding-top: calc(var(--main_padding) * 2);
  padding-bottom: calc(var(--main_padding) * 2);
  padding-left: calc(var(--main_padding) * 4);
  padding-right: calc(var(--main_padding) * 4);
  display: flex;
  flex-direction: row;
  gap: calc(var(--main_padding) * 2);
}
.z2.app_page_layout .app_page_toolbar {
  position: sticky;
  top: -1px;
  z-index: 500;
  margin-left: calc(var(--main_padding) * 2);
  margin-right: calc(var(--main_padding) * 2);
}
.z2.app_page_layout .quick_links {
  padding-left: calc(var(--main_padding) * 2);
  padding-right: calc(var(--main_padding) * 2);
}
.z2.app_page_layout .app_filter {
  margin-left: calc(var(--main_padding) * 2);
  margin-right: calc(var(--main_padding) * 2);
}
.z2.app_page_layout .app_page_column .app_filter {
  margin-left: unset;
  margin-right: unset;
}
.z2.app_page_layout .app_page_column .z2.card .app_filter {
  margin-left: calc(var(--main_padding) * 2);
  margin-right: calc(var(--main_padding) * 2);
}
.z2.app_page_layout .app_page_body {
  display: grid;
  grid-gap: calc(var(--main_padding) * 4);
  padding: calc(var(--main_padding) * 4);
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media screen and (max-width: 700px) {
  .z2.app_page_layout .app_page_body {
    padding: 0;
  }
}
@media screen and (max-width: 1000px) {
  .z2.app_page_layout .app_page_body {
    grid-template-columns: 1fr;
  }
}
.z2.app_page_layout .app_page_body .card + .card {
  margin-top: calc(var(--main_padding) * 4);
}
.z2.app_page_layout .app_page_body .span_1 {
  grid-column: span 1;
}
@media screen and (max-width: 1000px) {
  .z2.app_page_layout .app_page_body .span_1 {
    grid-column: initial;
  }
}
.z2.app_page_layout .app_page_body .span_2 {
  grid-column: span 2;
}
@media screen and (max-width: 1000px) {
  .z2.app_page_layout .app_page_body .span_2 {
    grid-column: initial;
  }
}
.z2.app_page_layout .app_page_body .span_3 {
  grid-column: span 3;
}
@media screen and (max-width: 1000px) {
  .z2.app_page_layout .app_page_body .span_3 {
    grid-column: initial;
  }
}
.z2.app_page_layout .app_page_body .span_4 {
  grid-column: span 4;
}
@media screen and (max-width: 1000px) {
  .z2.app_page_layout .app_page_body .span_4 {
    grid-column: initial;
  }
}
.z2 .metrics_dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: calc(var(--main_padding) * 2);
  padding: calc(var(--main_padding) * 2);
}
.z2 .metrics_dashboard .metric {
  display: flex;
  flex-direction: column;
  gap: calc(var(--main_padding) * 1);
  border-radius: calc(var(--zooza_var_border_radius) * 4);
  background-color: var(--zooza_color_gray);
  padding: calc(var(--main_padding) * 2);
}
.z2 .metrics_dashboard .metric.selected {
  outline: solid 2px var(--zooza_color_primary);
}
.z2 .metrics_dashboard .metric h6 {
  margin: 0;
  padding: 0;
  font-size: var(--zooza_font_size_larger);
  font-weight: bold;
}
.z2 .metrics_dashboard .metric .figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--main_padding) * 1);
  align-items: end;
}
.z2 .metrics_dashboard .metric .figures .figure {
  display: flex;
  flex-direction: column;
  gap: var(--main_padding);
  text-align: left;
}
.z2 .metrics_dashboard .metric .figures .figure.span_2 {
  grid-column: span 2;
}
.z2 .metrics_dashboard .metric .figures .figure .figure_data {
  font-size: var(--zooza_font_size_large);
  font-weight: bold;
  color: var(--zooza_color_black);
  line-height: 1;
}
.z2 .metrics_dashboard .metric .figures .figure .figure_data.positive {
  color: var(--zooza_success);
}
.z2 .metrics_dashboard .metric .figures .figure .figure_data.negative {
  color: var(--zooza_error);
}
.z2 .metrics_dashboard .metric .figures .figure.large .figure_data {
  font-size: var(--zooza_font_size_largest);
}
.z2 .metrics_dashboard .metric .figures .figure .figure_description {
  color: rgba(0, 0, 0, 0.5);
  font-size: var(--zooza_font_size_smaller);
}
.z2 .metrics_dashboard .metric .figures + .figures,
.z2 .metrics_dashboard .metric .figures + h6 {
  border-top: solid 1px var(--zooza_color_gray_darker);
  padding-top: calc(var(--main_padding) * 2);
}
.z2.card {
  position: relative;
  border-radius: 20px;
  border: solid 1px var(--zooza_color_gray);
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 2;
}
.z2.card:before {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.z2.card:hover:before {
  box-shadow: 0px 2.2px 3.6px rgba(0, 0, 0, 0.042), 0px 6px 10px rgba(0, 0, 0, 0.06), 0px 14.5px 24.1px rgba(0, 0, 0, 0.078), 0px 48px 80px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s ease-in, border-color 0.2s ease-in;
}
.z2.card:hover {
  border-color: #959886;
}
@media (prefers-color-scheme: dark) {
  .z2.card {
    background-color: var(--zooza_color_black);
  }
}
@media screen and (max-width: 700px) {
  .z2.card {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}
.z2.card.card_color_notice {
  background-color: rgba(255, 191, 0, 0.1490196078);
}
.z2.card.card_color_notice .card_header {
  background-color: var(--zooza_warning) !important;
}
.z2.card > h3, .z2.card h3.as_separator {
  padding: calc(var(--main_padding) * 2);
  border-bottom: solid 2px var(--zooza_color_gray);
  font-family: inherit;
  background-color: var(--zooza_color_gray);
}
.z2.card.disabled * {
  color: #959886;
}
.z2.card.disabled .card_header {
  border-radius: 20px;
}
.z2.card.muted_blue {
  background-color: #f0f5f3;
}
.z2.card.muted_blue span[aria-label] {
  color: #4d4f46;
}
.z2.card.muted_blue .card_cell {
  background-color: #f0f5f3;
}
.z2.card .card_header_message {
  display: grid;
  grid-gap: calc(var(--main_padding) * 2);
  padding: calc(var(--main_padding) * 2);
  grid-template-columns: 80px 1fr 80px;
}
@media screen and (max-width: 700px) {
  .z2.card .card_header_message {
    grid-gap: calc(var(--main_padding));
    padding: calc(var(--main_padding));
    grid-template-columns: 60px 1fr 60px;
  }
}
.z2.card .card_header_message .left {
  grid-column: 1/2;
}
.z2.card .card_header_message .right {
  grid-column: 3/4;
}
.z2.card .card_header_message .message_details {
  grid-column: 2/3;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-gap: var(--main_padding);
}
@media screen and (max-width: 700px) {
  .z2.card .card_header_message .message_details {
    grid-template-columns: 1fr 1fr;
  }
}
.z2.card .card_header_message .message_details > *:nth-child(even) {
  text-align: right;
}
.z2.card .card_header {
  display: grid;
  grid-gap: calc(var(--main_padding) * 2);
  padding: calc(var(--main_padding) * 2);
  grid-template-columns: min-content auto auto;
  align-items: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: var(--zooza_color_gray);
}
.z2.card .card_header .header_layout_column {
  display: flex;
  flex-direction: column;
}
.z2.card .card_header .header_layout_row {
  align-items: center;
  display: flex;
  gap: var(--main_padding);
}
.z2.card .card_header small {
  font-size: 11px;
}
.z2.card .card_header h3 {
  font-size: 16px;
}
.z2.card details.z2 summary {
  padding: var(--main_padding);
}
.z2.card .card_actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--main_padding);
  padding: calc(var(--main_padding) * 2);
}
.z2.card [class^=card_row] + [class^=card_row]:not(.notice) {
  border-top: solid 1px var(--zooza_color_gray);
}
.z2.card .card_tabs {
  margin-top: calc(var(--main_padding) * 2);
  border-bottom: solid 1px var(--zooza_color_gray);
  display: flex;
  gap: var(--main_padding);
}
.z2.card .card_tabs a {
  font-size: 13px;
  text-transform: uppercase;
  color: #FA6900;
  padding: var(--main_padding) calc(var(--main_padding) * 2);
  border-bottom: solid 2px transparent;
  position: relative;
}
.z2.card .card_tabs a:hover {
  color: #4d4f46;
}
.z2.card .card_tabs a.active {
  color: black;
  border-bottom-color: var(--zooza_color_gray);
}
.z2.card .card_tabs a.active:hover {
  border-color: #959886;
}
.z2.card .card_tabs a.mark:before {
  content: "";
  background-color: #3aa39d;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  position: absolute;
  left: 3px;
  top: 12px;
}
.z2.card .card_row_message {
  display: grid;
  grid-gap: calc(var(--main_padding) * 2);
  padding: calc(var(--main_padding) * 2);
  grid-template-columns: 80px 1fr 80px;
}
@media screen and (max-width: 700px) {
  .z2.card .card_row_message {
    grid-gap: calc(var(--main_padding));
    padding: calc(var(--main_padding));
    grid-template-columns: 60px 1fr 60px;
  }
}
.z2.card .card_row_message .card_cell {
  grid-column: 2/3;
}
.z2.card hr {
  border: 0;
  margin: 10px 0;
}
.z2.card .card_form {
  padding: calc(var(--main_padding) * 2);
}
.z2.card .card_row_list_item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 700px) {
  .z2.card .card_row_list_item.mobile_single_column {
    grid-template-columns: 1fr;
  }
}
.z2.card .card_row_list_item .span_2 {
  grid-column: span 2;
}
.z2.card .card_row_list_item .span_3 {
  grid-column: span 3;
}
.z2.card table {
  border-collapse: collapse;
  border: none;
  background-color: var(--zooza_color_white);
}
@media (prefers-color-scheme: dark) {
  .z2.card table {
    background-color: var(--zooza_color_black);
  }
}
.z2.card table tbody tr[class*=fill]:hover td {
  background-color: rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
  .z2.card table tbody tr[class*=fill]:hover td {
    background-color: rgba(230, 230, 230, 0.1);
  }
}
.z2.card table tr:hover td {
  background-color: #f2f5e5;
}
@media (prefers-color-scheme: dark) {
  .z2.card table tr:hover td {
    background-color: rgba(230, 230, 230, 0.1);
  }
}
.z2.card table tr:hover [aria-label] {
  color: black;
}
@media (prefers-color-scheme: dark) {
  .z2.card table tr:hover [aria-label] {
    color: var(--zooza_color_white);
  }
}
.z2.card table tr[classˆ=fill]:hover td {
  background-color: rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 700px) {
  .z2.card table tr {
    border-bottom: solid 2px var(--zooza_color_gray);
  }
}
.z2.card table tr td {
  border: solid 1px var(--zooza_color_gray);
}
.z2.card table tr td:first-child {
  border-left: none;
}
.z2.card table tr td:last-child {
  border-right: none;
}
.z2.card table tr td [aria-label] {
  display: none;
}
@media screen and (max-width: 700px) {
  .z2.card table tr td [aria-label] {
    display: initial;
  }
}
@media screen and (max-width: 700px) {
  .z2.card table tr td {
    display: flex;
    gap: var(--main_padding);
  }
}
.z2.card .card_row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.z2.card .card_cell {
  padding: 10px;
  flex-grow: 1;
  flex-basis: 0;
}
.z2.card .card_cell.full_width {
  width: 100%;
}
.z2.card .card_cell, .z2.card table td, .z2.card table th {
  padding: calc(var(--main_padding) * 2);
  font-weight: 300;
}
@media screen and (max-width: 700px) {
  .z2.card .card_cell, .z2.card table td, .z2.card table th {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
  }
}
.z2.card .card_cell > p, .z2.card table td > p, .z2.card table th > p {
  margin: 0;
  font-weight: 300;
}
.z2.card .list_item_label, .z2.card .list_item_value, .z2.card .list_item_actions {
  padding: calc(var(--main_padding) * 2);
}
.z2.card .emphasized .list_item_label, .z2.card .emphasized .list_item_value, .z2.card .emphasized .list_item_actions {
  padding: calc(var(--main_padding) * 2);
  padding-top: calc(var(--main_padding) * 4);
  padding-bottom: calc(var(--main_padding) * 4);
}
.z2.card .card_header + .card_actions,
.z2.card .card_header + .card_form,
.z2.card .card_header + .card_row,
.z2.card .card_row_message + .card_header_message,
.z2.card .card_row + .card_row,
.z2.card .card_row + .card_actions {
  border-top: solid 1px var(--zooza_color_gray);
}
.z2.card span[aria-label] {
  font-size: 13px;
  font-weight: 300;
  color: #959886;
  text-transform: uppercase;
}
@media screen and (max-width: 700px) {
  .z2.card span[aria-label] {
    margin-top: 2.5px;
  }
}
a[role=button].z2,
button.z2 {
  border-radius: 50px;
  background: none;
  background-color: rgb(255, 255, 255);
  border: solid 1px #FA6900;
  font-weight: bold;
  display: inline-flex;
  gap: var(--main_padding);
  align-items: center;
  color: #FA6900;
  justify-content: center;
  width: auto;
  padding: var(--main_padding) calc(var(--main_padding) * 2);
  white-space: nowrap;
}
a[role=button].z2:hover,
button.z2:hover {
  color: #FA6900;
  border-color: #ff3000;
}
a[role=button].z2:disabled,
button.z2:disabled {
  background-color: rgb(255, 255, 255);
  color: #959886;
  border-color: #959886;
}
@media (prefers-color-scheme: dark) {
  a[role=button].z2,
  button.z2 {
    color: var(--zooza_color_white);
    background-color: var(--zooza_color_gray_dark);
    border-color: var(--zooza_color_primary);
  }
}
a[role=button].z2.inline,
button.z2.inline {
  width: auto;
}
a[role=button].z2.rounded,
button.z2.rounded {
  width: 31px;
  height: 31px;
}
a[role=button].z2.primary,
button.z2.primary {
  color: rgb(255, 255, 255);
  background-color: #FA6900;
  background: #FA6900;
}
a[role=button].z2.primary:hover,
button.z2.primary:hover {
  border-color: #ff3000;
  color: rgb(255, 255, 255);
}
a[role=button].z2.primary:disabled,
button.z2.primary:disabled {
  background-color: #f2f5e5;
  color: #959886;
  border-color: #959886;
}
@media (prefers-color-scheme: dark) {
  a[role=button].z2.primary,
  button.z2.primary {
    color: var(rgb(255, 255, 255));
    background-color: var(--zooza_color_primary);
    background: var(--zooza_color_primary);
  }
}
a[role=button].z2.link,
button.z2.link {
  border: none;
}
a[role=button].z2.icon,
button.z2.icon {
  padding: 0;
  width: calc(var(--main_padding) * 6);
  height: calc(var(--main_padding) * 6);
}
.button_group {
  display: flex;
}
.button_group a[role=button].z2,
.button_group button.z2 {
  border-radius: 0;
}
.button_group a[role=button].z2:first-child,
.button_group button.z2:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
.button_group a[role=button].z2:last-child,
.button_group button.z2:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.button_group a[role=button].z2:not(:first-child),
.button_group button.z2:not(:first-child) {
  margin-left: -1px;
}
.dropdown_button {
  position: relative;
}
.dropdown_button.open button {
  background-color: var(--zooza_color_primary);
  color: var(--zooza_color_white);
  border-color: var(--zooza_color_primary);
}
.dropdown_button .dropdown_button_input {
  display: inline-flex;
  position: relative;
}
.dropdown_button .dropdown_button_input button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dropdown_button .dropdown_button_input button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.dropdown_button .dropdown_button_input .toggle_button {
  cursor: pointer;
}
.dropdown_button .dropdown_menu {
  position: absolute;
  margin-top: var(--main_padding);
  background-color: var(--zooza_color_white);
  border: 1px solid var(--zooza_color_gray);
  border-radius: 5px;
  width: 200px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  list-style: none;
  padding: 0;
  /* Custom scrollbar styling */
  /*display: none; !* Hidden by default *!*/
}
.dropdown_button .dropdown_menu::-webkit-scrollbar {
  width: 6px;
}
.dropdown_button .dropdown_menu::-webkit-scrollbar-track {
  background: var(--zooza_color_gray_lighter);
  border-radius: 3px;
}
.dropdown_button .dropdown_menu::-webkit-scrollbar-thumb {
  background: var(--zooza_color_gray);
  border-radius: 3px;
}
.dropdown_button .dropdown_menu::-webkit-scrollbar-thumb:hover {
  background: var(--zooza_color_gray_darker);
}
@media (prefers-color-scheme: dark) {
  .dropdown_button .dropdown_menu {
    background-color: var(--zooza_color_black);
    color: var(--zooza_color_white);
  }
  .dropdown_button .dropdown_menu::-webkit-scrollbar-track {
    background: rgba(var(--zooza_white), 0.1);
  }
  .dropdown_button .dropdown_menu::-webkit-scrollbar-thumb {
    background: rgba(var(--zooza_white), 0.3);
  }
  .dropdown_button .dropdown_menu::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--zooza_white), 0.5);
  }
}
.dropdown_button .dropdown_menu[data-bind-visible=true] {
  /* Binding will override this via Knockout */
  display: block;
}
.dropdown_button .dropdown_item {
  padding: var(--main_padding) calc(var(--main_padding) * 2);
  cursor: pointer;
}
.dropdown_button .dropdown_item:hover,
.dropdown_button .dropdown_item:focus {
  background-color: var(--zooza_color_gray_lighter);
}
.dropdown_button .dropdown_link {
  text-decoration: none;
  color: inherit; /* Inherit color from parent for consistent styling */
  display: block; /* Ensure link fills the list item fully */
  padding: var(--main_padding) calc(var(--main_padding) * 2); /* Consistent spacing for links */
}
.dropdown_button .dropdown_link:hover,
.dropdown_button .dropdown_link:focus {
  background-color: var(--zooza_color_gray_lighter);
  text-decoration: none;
}
/* ---------------------------------------------------------------------
   .z2.views_pane — right-hand pane hosting the saved-view "Customize"
   editor (columns, row colours, filters).

   Modelled on zooza-css `_components/_right_pane.scss` (.z2.right_pane):
   same chrome — .pane_head with an icon tab strip + in-pane close
   toggle, and a scrollable .pane_content.

   Vendored locally because the CDN build this app loads
   (cdn.zooza.sk/css/v2/v2_dev/style.css?v=9) predates right_pane: it has
   no .right_pane, .entity_tabs, .shell_toggle or `pane` grid area. Every
   selector below is scoped under .z2.views_pane so nothing collides once
   the CDN catches up.

   Unlike right_pane (a permanent shell column via `grid-area: pane`),
   this pane is transient — it opens on demand, so it is a fixed overlay
   at every width, matching right_pane's own <960px overlay mode.

   DEPRECATED — canonical copy extracted 2026-07-31 to zooza-css
   `_components/_views_pane.scss` (registered in style.scss). This
   vendored copy exists only until the CDN build ships it — once
   `curl <cdn-url> | grep -c views_pane` hits, delete this file and its
   App.scss import. Keep the two in sync until then; the zooza-css copy
   differs only in dark-mode surface tokens (gray_2_2/gray_2_1 instead
   of color_black — CDN build predates those, right_pane precedent).

   Markup contract stays framework-agnostic — no React-specific
   assumptions (pane_head > entity_tabs + shell_toggle, pane_content >
   tab_content) — so the Knockout app can host the same editor.
   --------------------------------------------------------------------- */
.views_pane_backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(25, 25, 25, 0.35);
  z-index: 1000;
}
.z2.views_pane {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100vw);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  /* Lifted surface, same intent as right_pane: a shade apart from the
     page beneath it, in both colour schemes. */
  background-color: var(--zooza_color_white);
  border-left: 1px solid var(--zooza_color_gray);
  /* ---- head: tab strip + close toggle ---- */
  /* ---- scrollable body ---- */
  /* ---- foot: pane-level actions ---- */
  /* ---- a section inside a tab ----
     The tab strip above is the PANE-level navigation (view settings today;
     AI + Support alongside it later, as in zooza's right_pane). Groups within
     one tab are sections, mirroring right_pane_todos' .todo_section. */
  /* ---- a draggable column row inside the Columns section ---- */
  /* ---- rule / filter rows ---- */
  /* Compact colour swatch used by column colours and row-colour rules. */
  /* Quiet icon action (remove ✕, clear colour) — an <a role="button">,
     immune to the theme's global orange <button> rule. */
}
@media (prefers-color-scheme: dark) {
  .z2.views_pane {
    background-color: var(--zooza_color_black);
    border-left-color: var(--zooza_color_gray);
  }
}
.z2.views_pane .pane_head {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  /* Tab strip. Mirrors .z2.entity_tabs' look inside a pane: the strip
     owns the bottom rule and the active tab's underline sits ON it. */
  /* In-pane close toggle — absolutely positioned so the tab strip's
     rule runs the full width of the pane underneath it. */
}
@media screen and (min-width: 701px) {
  .z2.views_pane .pane_head {
    min-height: 84px;
  }
}
@media screen and (max-width: 700px) {
  .z2.views_pane .pane_head {
    padding: calc(var(--main_padding) * 2) 0 0;
  }
}
.z2.views_pane .pane_head .entity_tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: calc(var(--main_padding) * 3);
  padding: 0 calc(var(--main_padding) * 4);
  /* Room for the absolutely-positioned toggle so no tab runs under it. */
  padding-right: calc(var(--main_padding) * 4 + 38px + var(--main_padding));
  border-bottom: 1px solid var(--zooza_color_gray);
}
.z2.views_pane .pane_head .entity_tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--main_padding);
  padding: calc(var(--main_padding) * 2) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: var(--zooza_font_size_smaller);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.z2.views_pane .pane_head .entity_tabs a em {
  font-size: 15px;
  line-height: 1;
}
.z2.views_pane .pane_head .entity_tabs a:hover {
  color: var(--zooza_color_primary);
}
.z2.views_pane .pane_head .entity_tabs a.active {
  border-bottom-color: var(--zooza_color_primary);
  color: var(--zooza_color_primary);
}
.z2.views_pane .pane_head .shell_toggle {
  position: absolute;
  right: calc(var(--main_padding) * 4);
  bottom: calc(var(--main_padding) * 1.7 + 1px);
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}
.z2.views_pane .pane_head .shell_toggle:hover {
  background-color: var(--zooza_color_gray);
}
@media screen and (max-width: 700px) {
  .z2.views_pane .pane_head .shell_toggle {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: calc(var(--main_padding) * 3);
  }
}
.z2.views_pane .pane_content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: calc(var(--main_padding) * 3) calc(var(--main_padding) * 4);
}
@media screen and (max-width: 700px) {
  .z2.views_pane .pane_content {
    padding: calc(var(--main_padding) * 3);
  }
}
.z2.views_pane .pane_actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--main_padding) * 2);
  padding: calc(var(--main_padding) * 2) calc(var(--main_padding) * 4);
  border-top: 1px solid var(--zooza_color_gray);
}
.z2.views_pane .pane_section {
  /* Trailing action (e.g. "+ Add filter") pushed to the header's right. */
}
.z2.views_pane .pane_section + .pane_section {
  margin-top: calc(var(--main_padding) * 4);
}
.z2.views_pane .pane_section .pane_section_header {
  display: flex;
  align-items: center;
  gap: var(--main_padding);
  padding-bottom: var(--main_padding);
  margin-bottom: var(--main_padding);
  border-bottom: 1px solid var(--zooza_color_gray);
}
.z2.views_pane .pane_section .pane_section_label {
  font-size: var(--zooza_font_size_smaller);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.z2.views_pane .pane_section .pane_section_count {
  font-size: var(--zooza_font_size_smaller);
  opacity: 0.5;
}
.z2.views_pane .pane_section .pane_section_action {
  margin-left: auto;
}
.z2.views_pane .pane_column_row {
  display: flex;
  align-items: center;
  gap: calc(var(--main_padding) * 2);
  padding: calc(var(--main_padding) * 1.5) var(--main_padding);
  border-radius: var(--zooza_var_border_radius);
  /* Column is hidden in the table — dim the row, keep it operable. */
  /* Row being dragged to a new position. */
}
.z2.views_pane .pane_column_row:hover {
  background-color: var(--zooza_color_gray);
}
.z2.views_pane .pane_column_row.is_hidden {
  opacity: 0.55;
}
.z2.views_pane .pane_column_row.is_dragging {
  opacity: 0.5;
  background-color: var(--zooza_color_gray);
}
.z2.views_pane .pane_column_row .drag_handle {
  cursor: grab;
  opacity: 0.6;
}
.z2.views_pane .pane_column_row .drag_handle:active {
  cursor: grabbing;
}
.z2.views_pane .pane_column_row .row_label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.z2.views_pane .pane_rule_row {
  display: flex;
  align-items: center;
  gap: var(--main_padding);
  flex-wrap: wrap;
  margin-bottom: calc(var(--main_padding) * 2);
}
.z2.views_pane .color_swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--zooza_color_gray);
  border-radius: var(--zooza_var_border_radius);
  background-color: transparent;
  cursor: pointer;
}
.z2.views_pane .icon_action {
  cursor: pointer;
  padding: 0 calc(var(--main_padding) / 2);
  opacity: 0.7;
  user-select: none;
}
.z2.views_pane .icon_action:hover {
  opacity: 1;
  color: var(--zooza_color_primary);
}
.z2.views_pane .pane_empty {
  opacity: 0.7;
  font-size: var(--zooza_font_size_smaller);
  margin: calc(var(--main_padding) * 2) 0;
}
/* ---------------------------------------------------------------------
   .z2.view_manager — saved-views dropdown control in the reports
   toolbar: trigger button + "Working view" row, own/shared view rows,
   a per-row "…" action submenu, and the create/rename forms.

   Vendored locally because the CDN build this app loads
   (cdn.zooza.sk/css/v2/v2_dev/style.css?v=9) has .dropdown_button /
   .dropdown_menu / .dropdown_item but no .form_input rule at all — every
   native input/select inside the create/rename forms would otherwise
   render unstyled. Every selector below is scoped under .z2.view_manager
   so nothing collides once the CDN catches up.

   DEPRECATED — canonical copy extracted 2026-07-31 to zooza-css
   `_components/_view_manager.scss` (registered in style.scss). This
   vendored copy exists only until the CDN build ships it — once
   `curl <cdn-url> | grep -c view_manager` hits, delete this file and
   its App.scss import. Keep the two in sync until then; the zooza-css
   copy differs only in dark-mode surface tokens (gray_2_2/gray_2_1
   instead of color_black — the CDN build predates those, matching the
   right_pane precedent).

   Markup contract is framework-agnostic — view_manager_menu >
   view_row(.active) [> view_row_menu > .confirm_row], section_label,
   view_form(.inline) > .form_actions — so the Knockout app can host
   the same control.

   EXEMPTION: the menu's box-shadow uses a literal rgba() — no CSS var
   token for it exists yet, and the CDN's own card_shadow() mixin
   (src/scss/style.scss) hardcodes its own color/radius rather than
   exposing one, so there is nothing to reuse. Matches the precedent at
   _views_pane.scss:29.
   --------------------------------------------------------------------- */
.z2.view_manager {
  position: relative;
  display: inline-block;
  /* Chrome-like row actions (save floppy, reset, the "…" trigger):
     inherit text colour so they follow light/dark mode instead of
     sitting blue like a LinkAction link. */
  /* Submenu / form text actions (Set as default, Rename, Delete, Cancel,
     confirm Yes/No). LinkAction drops its blue-underline inline base when
     given a className, so everything here is CSS-owned: quiet menu rows
     that follow the theme, primary on hover. */
}
.z2.view_manager .dirty_dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--zooza_error);
  pointer-events: none;
}
.z2.view_manager .view_manager_menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  margin: 0;
  padding: 0.4rem;
  min-width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  background-color: var(--zooza_color_white);
  border: 1px solid var(--zooza_color_gray);
  border-radius: var(--zooza_var_border_radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
@media (prefers-color-scheme: dark) {
  .z2.view_manager .view_manager_menu {
    background-color: var(--zooza_color_black);
  }
}
.z2.view_manager .view_row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  border-radius: var(--zooza_var_border_radius);
  /* Active = the selected view (or "Working view" when nothing is
     selected) — a low-alpha primary tint, never a flat fill, so it
     reads as "current" without competing with the hover state. */
}
.z2.view_manager .view_row:hover {
  background-color: var(--zooza_color_gray);
}
.z2.view_manager .view_row.active {
  background-color: color-mix(in srgb, var(--zooza_color_primary) 15%, transparent);
}
.z2.view_manager .row_label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.z2.view_manager .row_suffix {
  opacity: 0.6;
}
.z2.view_manager .icon_action {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  padding: 0 0.25rem;
  cursor: pointer;
  user-select: none;
}
.z2.view_manager .icon_action:hover {
  opacity: 1;
  color: var(--zooza_color_primary);
}
.z2.view_manager .section_label {
  padding: 0.5rem 0.9rem 0.2rem;
  font-size: var(--zooza_font_size_smaller);
  opacity: 0.6;
}
.z2.view_manager .view_row_menu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.25rem 0.9rem 0.5rem 1.6rem;
}
.z2.view_manager .view_row_menu .confirm_row {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.z2.view_manager .menu_action {
  color: inherit;
  text-decoration: none;
  font-size: var(--zooza_font_size_smaller);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  opacity: 0.85;
}
.z2.view_manager .menu_action:hover {
  opacity: 1;
  color: var(--zooza_color_primary);
}
.z2.view_manager .menu_error {
  padding: 0.35rem 0.9rem 0.45rem;
  color: var(--zooza_error);
  font-size: var(--zooza_font_size_smaller);
}
.z2.view_manager .view_footer {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--zooza_color_gray);
}
.z2.view_manager .view_form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  /* Rename form: a compact single row nested inside .view_row_menu,
     which already carries the surrounding padding. */
}
.z2.view_manager .view_form.inline {
  flex-direction: row;
  align-items: center;
  padding: 0;
}
.z2.view_manager .view_form.inline .form_input {
  flex: 1;
  min-width: 0;
}
.z2.view_manager .view_form .form_actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.z2.view_manager .view_form .form_input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  background-color: var(--zooza_color_white);
  border: 1px solid var(--zooza_color_gray);
  border-radius: var(--zooza_var_border_radius);
  color: inherit;
  font: inherit;
}
@media (prefers-color-scheme: dark) {
  .z2.view_manager .view_form .form_input {
    background-color: var(--zooza_color_black);
  }
}
/* Toolbar siblings of .z2.view_manager — the "Customize" button and the
   inline status/error messages render next to the dropdown, not inside
   it, so they can't be reached by the scoped block above. */
.view_manager_customize {
  position: relative;
  display: inline-block;
}
.view_manager_status {
  font-size: var(--zooza_font_size_smaller);
  align-self: center;
}
.table_freeze_header thead th {
  background-color: var(--zooza_color_white, #fff) !important;
  box-shadow: inset 0 -1px 0 var(--zooza_color_gray, #e0e4cc);
}
.table_freeze_header thead th[style*=sticky] {
  z-index: 3;
}
.table_freeze_header tbody td[style*=sticky] {
  background-color: var(--zooza_color_white, #fff);
}
.table_freeze_header tbody tr {
  background-color: var(--zooza_color_white, #fff);
}
@media (prefers-color-scheme: dark) {
  .table_freeze_header tbody tr:not([style*=background]) {
    background-color: var(--zooza_color_gray_2_1, #1e1f1c) !important;
  }
  .table_freeze_header tbody tr:not([style*=background]):nth-child(even) {
    background-color: color-mix(in srgb, var(--zooza_color_white, #fff) 2%, var(--zooza_color_gray_2_1, #1e1f1c)) !important;
  }
}
@media (prefers-color-scheme: dark) {
  .table_freeze_header thead th {
    background-color: var(--zooza_color_gray_2_1, #1e1f1c) !important;
    box-shadow: inset 0 -1px 0 var(--zooza_color_gray_dark, #3c3f3a);
  }
  .table_freeze_header tbody td[style*=sticky] {
    background-color: var(--zooza_color_gray_2_1, #1e1f1c);
  }
}
.external_cell_input {
  vertical-align: top;
}
.external_cell_input[contenteditable]:empty:before {
  content: attr(data-placeholder);
  opacity: 0.5;
  pointer-events: none;
}
.external_cell:focus-within {
  outline: 2px solid var(--zooza_color_primary);
  outline-offset: -2px;
}
.external_cell_options {
  background-color: var(--zooza_color_white, #fff);
  border: 1px solid var(--zooza_color_gray, #e0e4cc);
  border-radius: var(--zooza_border_radius, 4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: var(--zooza_font_size_smaller, 0.85rem);
}
.external_cell_option {
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.external_cell_option.is_highlighted {
  background-color: var(--zooza_color_gray_lighter, #f2f2f0);
}
@media (prefers-color-scheme: dark) {
  .external_cell_input {
    color: var(--zooza_color_white, #e6e6e6);
    caret-color: var(--zooza_color_white, #e6e6e6);
  }
  .external_cell_options {
    background-color: var(--zooza_color_gray_2_1, #1e1f1c);
    border-color: var(--zooza_color_gray_dark, #3c3f3a);
    color: var(--zooza_color_white, #e6e6e6);
  }
  .external_cell_option.is_highlighted {
    background-color: var(--zooza_color_gray_dark, #3c3f3a);
  }
}
/* ---------------------------------------------------------------------
   .z2.pick_menu — floating "pick one thing to add" panel, opened by a
   compact trigger that sits INSIDE a table header cell (.pick_trigger).
   First use: the custom-report document's add-external-row control.

   Two things make it its own component rather than a use of the CDN's
   .dropdown_menu:

   1. It is positioned by the host, not by CSS. The trigger lives in a
      `<th>` of a table that scrolls inside `overflow: auto`, which clips
      an absolutely positioned panel. The host renders this panel outside
      that box and sets `position: fixed` + top/right from the trigger's
      rect, so the block below deliberately declares NO position and no
      offsets — only the surface, and a z-index for once it is placed.
   2. Its rows carry a selected/not-selected mark and an exhausted state,
      plus an optional nested second step. .dropdown_item is a plain row.

   Vendored locally until the CDN build (cdn.zooza.sk/css/v2/v2_dev/
   style.css) ships it — see handoffs/outbox/2026-07-31-franchise-app-to-
   zooza-css-pick-menu.md. Delete this file and its App.scss import once
   `curl <cdn-url> | grep -c pick_menu` hits.

   Markup contract is framework-agnostic, so the Knockout app can host
   the same control:

     a.z2.primary.rounded.pick_trigger   (filled circle in the header cell)
     .z2.pick_menu                    (panel; host owns its position)
     ├── .pick_label                  (caption for the list below it)
     ├── .pick_empty                  (empty / nothing-to-pick message)
     ├── .pick_row[.open][.exhausted] (one choice)
     │   ├── .pick_check              (fixed-width mark slot)
     │   ├── .pick_name               (ellipsised primary text)
     │   └── .pick_suffix             (dim secondary text, e.g. a code)
     └── .pick_sub                    (second step, under its .pick_row)
         ├── .pick_label
         └── .pick_sub_item

   EXEMPTION: the panel's box-shadow uses a literal rgba() — same reason
   as _view_manager.scss:26, the CDN's card_shadow() mixin is a ::before
   overlay built for cards, not for a floating panel.
   --------------------------------------------------------------------- */
/* The trigger is a REAL Z2 button — `a.z2.primary.rounded.pick_trigger`, the
   filled primary circle already used for the mcp_tip copy control — because a
   quiet chrome glyph in a header full of column labels is not found. This
   class only adds what the button variants leave open: centring a bare glyph
   in the circle, and a disabled look for an anchor (which cannot carry the
   `:disabled` the button rules key off). */
.pick_trigger {
  padding: 0;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  /* Keeps the circle off the column label it sits beside. */
  margin-left: 0.5rem;
  /* A 31px circle is taller than the header text; without this the cell's
     line box grows by the difference on every table that hosts one. */
  vertical-align: middle;
}
.pick_trigger.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.z2.pick_menu {
  z-index: 1000;
  margin: 0;
  padding: 0.4rem;
  min-width: 260px;
  max-height: 50vh;
  overflow-y: auto;
  background-color: var(--zooza_color_white);
  border: 1px solid var(--zooza_color_gray);
  border-radius: var(--zooza_var_border_radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-size: var(--zooza_font_size_smaller);
  /* Fixed slot, so the names line up whether or not a row is marked —
     the mark is hidden with visibility, never removed. */
}
@media (prefers-color-scheme: dark) {
  .z2.pick_menu {
    background-color: var(--zooza_color_black);
  }
}
.z2.pick_menu .pick_label {
  padding: 0.3rem 0.6rem 0.35rem;
  font-size: var(--zooza_font_size_smaller);
  opacity: 0.6;
}
.z2.pick_menu .pick_empty {
  padding: 0.35rem 0.6rem;
  opacity: 0.7;
}
.z2.pick_menu .pick_row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--zooza_var_border_radius);
  cursor: pointer;
  /* The row whose second step is showing — same low-alpha primary
     tint .view_row.active uses, so "current" reads the same way
     across both menus. */
  /* Nothing left to pick for this one: it stays listed (so it is not
     confused with one that was never offered) but is inert. */
}
.z2.pick_menu .pick_row:hover {
  background-color: var(--zooza_color_gray);
}
.z2.pick_menu .pick_row.open {
  background-color: color-mix(in srgb, var(--zooza_color_primary) 15%, transparent);
}
.z2.pick_menu .pick_row.exhausted {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.z2.pick_menu .pick_check {
  width: 1rem;
  flex: none;
  text-align: center;
}
.z2.pick_menu .pick_name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.z2.pick_menu .pick_suffix {
  opacity: 0.6;
}
.z2.pick_menu .pick_sub {
  display: flex;
  flex-direction: column;
  /* Indented past the mark slot, so the second step reads as belonging
     to the row above it. */
  padding: 0 0.6rem 0.35rem 2.1rem;
}
.z2.pick_menu .pick_sub .pick_label {
  padding: 0 0 0.15rem;
}
.z2.pick_menu .pick_sub .pick_sub_item {
  padding: 0.25rem 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.z2.pick_menu .pick_sub .pick_sub_item:hover {
  color: var(--zooza_color_primary);
}
/**
 * Full-screen message screens: no session, no permission, 404.
 *
 * These render outside the app chrome. If the session is dead this may be the
 * only screen the user ever sees, so nothing here leans on the body sidebar
 * grid or assumes the Z2 CDN sheet arrived — every custom property has a plain
 * fallback and the layout works on its own.
 */
/**
 * `scss/_v2_grid.scss` styles bare `body` as a sidebar grid (`160px auto`, plus
 * `overflow: hidden`) with no class to opt out of. React mounts into that body,
 * so a sidebar-less screen lands in the 160px column. Higher specificity than
 * the bare `body` rule, so it wins at every breakpoint.
 */
body.message_layout {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  overflow: auto;
}
.message_screen {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  background-color: var(--zooza_color_gray_lighter, #f2f5e5);
}
@media (prefers-color-scheme: dark) {
  .message_screen {
    background-color: var(--zooza_color_black, rgb(25, 25, 25));
  }
}
.message_screen .message_screen_card {
  box-sizing: border-box;
  max-width: 480px;
  width: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  border-radius: 8px;
  border: solid 1px var(--zooza_color_gray, #e0e4cc);
  background-color: var(--zooza_color_white, #ffffff);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
  .message_screen .message_screen_card {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--zooza_color_gray_dark, #4d4f46);
    box-shadow: none;
  }
}
@media screen and (max-width: 480px) {
  .message_screen .message_screen_card {
    padding: 24px;
  }
}
.message_screen .message_screen_icon {
  font-size: 40px;
  line-height: 1;
  color: #FA6900;
}
.message_screen h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--zooza_color_black, #1f2937);
}
@media (prefers-color-scheme: dark) {
  .message_screen h1 {
    color: var(--zooza_color_white, #f5f5f5);
  }
}
.message_screen p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--zooza_color_gray_dark, #4d4f46);
}
@media (prefers-color-scheme: dark) {
  .message_screen p {
    color: var(--zooza_color_gray, #e0e4cc);
  }
}
.message_screen .message_screen_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  padding: 0;
}
.language_selector {
  display: flex;
  gap: 10px;
  color: #fa6900;
}
td > a {
  color: #fa6900;
}
/* Prevent text wrapping in table name columns */
.no-wrap-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Toggle Switch Component */
.toggle-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.toggle-label {
  font-size: 0.9rem;
}
.toggle-label--active {
  color: var(--zooza_color_primary);
}
.toggle-label--inactive {
  color: var(--zooza_color_gray_light);
}
.toggle-switch {
  position: relative;
  width: 3rem;
  height: 1.5rem;
  border-radius: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.toggle-switch--active {
  background-color: var(--zooza_color_primary);
}
.toggle-switch--inactive {
  background-color: var(--zooza_color_gray);
}
.toggle-handle {
  position: absolute;
  top: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.toggle-handle--left {
  left: 3px;
}
.toggle-handle--right {
  left: calc(100% - 1.4rem);
}
/* Dark Mode Support - Exact colors from main app */
@media (prefers-color-scheme: dark) {
  :root {
    --default: 39, 39, 37;
    --zooza_white: 105, 105, 105;
    --absinthe: 136, 198, 66;
    --baker_miller_pink: 255, 145, 175;
    --titian_red: 189, 86, 32;
    --rosso_corsa: 212, 0, 0;
    --mummy: 123, 70, 35;
    --veronese_green: 0, 166, 113;
    --celadon: 172, 225, 175;
    --klein_blue: 31, 24, 192;
    --nicoll_blue: 106, 149, 191;
    --mauve: 135, 76, 98;
    --tyrian_purple: 102, 2, 60;
    --gamboge: 228, 155, 15;
    --monticello_yellow: 246, 202, 35;
    --zooza_orange: 250, 105, 0;
  }
  html {
    background-color: var(--zooza_color_black) !important;
  }
  body {
    background-color: var(--zooza_color_black) !important;
  }
  .z2.app_body_layout .body {
    --color1: var(--default);
    --color2: var(--default);
    background: rgb(var(--color1)) !important;
    background: radial-gradient(circle at top right, rgba(var(--color1), 1) 0%, rgba(var(--color2), 1) 50%, rgba(var(--color2), 1) 100%) !important;
    transition: background 1s ease-out;
  }
  .user_settings small.text_muted {
    color: black !important;
  }
  .loader {
    background-color: var(--zooza_color_black) !important;
  }
  .widget_code pre,
  section.tablet {
    background-color: var(--zooza_color_black) !important;
  }
  table th {
    background-color: rgba(var(--zooza_white), 0.05) !important;
    border-color: rgba(var(--zooza_white), 0.2) !important;
  }
  table th:hover {
    background-color: rgba(var(--zooza_white), 0.1) !important;
  }
  table td {
    border-color: rgba(var(--zooza_white), 0.1) !important;
  }
  table tr:nth-child(even) {
    background-color: rgba(var(--zooza_white), 0.02) !important;
  }
  input,
  select,
  textarea {
    color: rgb(var(--zooza_white)) !important;
    border-color: rgba(var(--zooza_white), 0.3) !important;
  }
  .z2.btn,
  .z2.rounded,
  button {
    background-color: rgba(var(--zooza_orange), 1) !important;
    color: white !important;
    border-color: rgba(var(--zooza_orange), 1) !important;
  }
  .z2.app_page_layout {
    background-color: var(--zooza_color_black) !important;
  }
  .app_page_body {
    background-color: var(--zooza_color_black) !important;
  }
  .highlight-top {
    background-color: rgba(122, 255, 122, 0.14) !important;
  }
  .highlight-bottom {
    background-color: rgba(255, 110, 110, 0.3) !important;
  }
  .quick-action-card {
    background: var(--zooza_color_dark_gray) !important;
    border-color: rgba(var(--zooza_white), 0.2) !important;
  }
  .quick-action-card:hover {
    background: rgba(var(--zooza_white), 0.05) !important;
  }
  .action-title {
    color: var(--zooza_color_white) !important;
  }
  .action-description {
    color: var(--zooza_color_white) !important;
  }
  .action-arrow {
    color: var(--zooza_color_white) !important;
  }
  .quick-action-card:hover .action-arrow {
    color: var(--zooza_color_white) !important;
  }
  .company-item {
    background: var(--zooza_color_dark_gray) !important;
    border-color: rgba(var(--zooza_white), 0.2) !important;
  }
  .company-item:hover {
    background: rgba(var(--zooza_white), 0.05) !important;
  }
  .company-name {
    color: var(--zooza_color_white) !important;
  }
  .revenue {
    color: rgb(var(--veronese_green)) !important;
  }
  .enrollments {
    color: var(--zooza_color_white) !important;
  }
  .new-enrollments {
    color: rgb(var(--gamboge)) !important;
  }
  .company-arrow {
    color: var(--zooza_color_white) !important;
  }
  .company-item:hover .company-arrow {
    color: var(--zooza_color_white) !important;
  }
  .no-data {
    color: var(--zooza_color_white) !important;
  }
  td > a {
    color: rgba(var(--zooza_orange), 1) !important;
  }
  .z2.link {
    color: rgba(var(--zooza_orange), 1) !important;
  }
  .metric-link {
    color: rgba(var(--zooza_orange), 1) !important;
  }
  .z2 .metrics_dashboard .metric .figures .figure.large .figure_data span {
    color: white !important;
  }
}
.metrics_dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: calc(var(--main_padding) * 2);
  padding: calc(var(--main_padding) * 2);
}
.metrics_dashboard .metric {
  display: flex;
  flex-direction: column;
  gap: calc(var(--main_padding) * 1);
  border-radius: calc(var(--zooza_var_border_radius) * 4);
  background-color: var(--zooza_color_gray);
  padding: calc(var(--main_padding) * 2);
}
.metrics_dashboard .metric.selected {
  outline: solid 2px var(--zooza_color_primary);
}
.metrics_dashboard .metric h6 {
  margin: 0;
  padding: 0;
  font-size: var(--zooza_font_size_larger);
  font-weight: bold;
}
.metrics_dashboard .metric .figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--main_padding) * 1);
  align-items: end;
}
.metrics_dashboard .metric .figures .figure {
  display: flex;
  flex-direction: column;
  gap: var(--main_padding);
  text-align: left;
}
.metrics_dashboard .metric .figures .figure.span_2 {
  grid-column: span 2;
}
.metrics_dashboard .metric .figures .figure .figure_data {
  font-size: var(--zooza_font_size_large);
  font-weight: bold;
  color: var(--zooza_color_black);
  line-height: 1;
}
.metrics_dashboard .metric .figures .figure .figure_data.positive {
  color: var(--zooza_success);
}
.metrics_dashboard .metric .figures .figure .figure_data.negative {
  color: var(--zooza_error);
}
.metrics_dashboard .metric .figures .figure.large .figure_data {
  font-size: var(--zooza_font_size_largest);
}
.metrics_dashboard .metric .figures .figure .figure_description {
  color: rgba(0, 0, 0, 0.5);
  font-size: var(--zooza_font_size_smaller);
}
.metrics_dashboard .metric .figures + .figures,
.metrics_dashboard .metric .figures + h6 {
  border-top: solid 1px var(--zooza_color_gray_darker);
  padding-top: calc(var(--main_padding) * 2);
}
.z2.app_menu .user_settings {
  grid-column: 1/3 !important;
}
.z2 .zooza_forms__input_text:hover, .z2 .zooza_forms__input_number:hover, .z2 .zooza_forms__input_textarea:hover, .z2 .zooza_forms__input_radio_group:hover, .z2 .zooza_forms__input_checkbox:hover, .z2 .zooza_forms__input_time:hover, .z2 .zooza_forms__input_date_time:hover, .z2 .zooza_forms__input_date:hover, .z2 .zooza_forms__input_avatar:hover, .z2 .zooza_forms__input_select:hover {
  border-left: none !important;
}
.app_page_body .app_page_column > section, .app_page_body div > aside > section.dashboard_graph {
  background-color: transparent !important;
}
.dashboard_graph {
  padding: 10px;
  height: 400px;
}