/* Styles overrides for ZK */
/* custom-base.css must be included along with this file, as it defines root variables */

/* region Labels */
.z-label {
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    font-weight: 400;
}

/* endregion */

/* region Buttons */
.z-button,
.z-button:focus {
    background-color: var(--unil-main-color);
    border-color: transparent;
    border-radius: .375rem;
    border-width: 2px;
    box-shadow: none;
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    font-weight: 700;
    line-height: 26px;
    min-height: 40px;
    padding: 5px 1rem;
    width: fit-content;
}

.z-button:hover {
    background-color: var(--unil-main-color-400);
}

.z-button:active {
    background-color: var(--unil-main-color-600);
}

.z-button[disabled] {
    background-color: rgb(226 233 238);
    color: rgb(157 168 177);
    cursor: not-allowed;
}

/* endregion */

/* region Combo buttons */
.z-combobutton .z-combobutton-content,
.z-combobutton:focus .z-combobutton-content {
    align-items: center;
    background-color: var(--unil-main-color);
    border-color: transparent;
    border-radius: .375rem;
    border-width: 2px;
    display: inline-flex;
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    font-weight: 700;
    justify-content: center;
    line-height: 26px;
    padding: 5px 1rem;
    width: fit-content;
}

.z-combobutton .z-combobutton-content .z-combobutton-text {
    min-height: 26px;
    padding: 0 1rem 0 0;
}

.z-combobutton .z-combobutton-content:hover {
    background-color: var(--unil-main-color-400);
}

.z-combobutton .z-combobutton-content:active {
    background-color: var(--unil-main-color-600);
}

.z-combobutton[disabled] .z-combobutton-content {
    background-color: rgb(226 233 238);
    color: rgb(157 168 177);
    cursor: not-allowed;
}

.z-combobutton-button {
    border-left: none;
    width: 100%;
}

.z-combobutton-icon.z-icon-caret-down {
    left: unset;
    right: 10px;
}

/* endregion */

/* region Links */
.z-a {
    color: var(--unil-main-color);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-a:visited {
    color: var(--unil-main-color-400);
}

/* endregion */

/* region Stepbars */

.z-stepbar {
    font-family: var(--unil-font-family), serif;
}

/* small circle for step icon */
.z-step-icon {
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
}

/* inactive step icon */
.z-step-icon-empty {
    border-color: rgb(157 168 177);
    border-width: 2px;
}

/* active or complete step icon */
.z-step-active .z-step-icon-empty,
.z-step-complete .z-step-icon-empty {
    border-color: var(--unil-main-color);
}

/* step icon valid */
.z-step .z-icon-check {
    background-color: var(--unil-main-color);
    font-size: 12px;
}

/* step icon invalid */
.z-step .z-icon-exclamation {
    font-size: var(--unil-font-size);
}

/* step title */
.z-stepbar-wrapped-label .z-step-title {
    color: rgb(157 168 177);
    font-family: var(--unil-font-family), serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
    margin-top: .5rem;
}

.z-stepbar-vertical .z-step-title {
    color: rgb(157 168 177);
    font-family: var(--unil-font-family), serif;
    font-size: 17px;
    font-weight: 700;
}

/* active step title */
.z-stepbar-wrapped-label .z-step-active .z-step-title,
.z-stepbar-vertical .z-step-active .z-step-title {
    color: var(--unil-main-color);
}

/* line before and after completed steps */
.z-stepbar-wrapped-label.z-stepbar-linear .z-step-complete:after,
.z-stepbar-wrapped-label.z-stepbar-linear .z-step-complete .z-step-content:after,
.z-stepbar-wrapped-label.z-stepbar-linear .z-step-active .z-step-content:before,
.z-stepbar-wrapped-label.z-stepbar-linear .z-step-complete .z-step-content:before {
    background-color: var(--unil-main-color);
}

/* line before completed steps */
.z-stepbar-linear .z-step-active:before,
.z-stepbar-linear .z-step-complete:before {
    background-color: var(--unil-main-color);
}

/* line before and after completed steps */
.z-stepbar-wrapped-label:not(.z-stepbar-vertical) .z-step-content:before,
.z-stepbar-wrapped-label:not(.z-stepbar-vertical) .z-step-content:after {
    height: 2px;
}

/* line before completed steps */
.z-stepbar-wrapped-label .z-step:after {
    height: 2px;
}

/* line in the middle of completed steps */
.z-step:before {
    height: 2px;
}

.z-stepbar.z-stepbar-vertical .z-step:not(:first-child):before {
    margin: -40px 0 0 11px;
    width: 2px;
}

.z-step:before,
.z-stepbar-wrapped-label .z-step:after,
.z-stepbar-wrapped-label:not(.z-stepbar-vertical) .z-step-content:before,
.z-stepbar-wrapped-label:not(.z-stepbar-vertical) .z-step-content:after {
    background-color: rgb(157 168 177);
}

/* endregion */

/* region Groupboxes */
.z-groupbox-content {
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    padding: 16px;
}

.z-groupbox > .z-groupbox-header {
    font-family: var(--unil-font-family), serif;
}

.z-groupbox .z-caption-content {
    color: var(--unil-main-color);
    font-size: 22px;
    font-weight: 700;
}

.z-caption-content > * {
    margin-left: 12px;
}

/* endregion */

/* region Text / decimal / int / long / double boxes */

.z-textbox,
.z-decimalbox,
.z-intbox,
.z-longbox,
.z-doublebox {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 40px;
    line-height: 26px;
    padding: .375rem 1rem;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.z-textbox:hover,
.z-decimalbox:hover,
.z-intbox:hover,
.z-longbox:hover,
.z-doublebox:hover {
    border-color: rgb(157 168 177);
}

.z-textbox:focus,
.z-decimalbox:focus,
.z-intbox:focus,
.z-longbox:focus,
.z-doublebox:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px #2563eb, 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-textbox:focus-visible,
.z-decimalbox:focus-visible,
.z-intbox:focus-visible,
.z-longbox:focus-visible,
.z-doublebox:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-textbox[disabled],
.z-decimalbox[disabled],
.z-intbox[disabled],
.z-longbox[disabled],
.z-doublebox[disabled] {
    cursor: not-allowed !important;
}

/* endregion */

/* region Combo boxes */
.z-combobox {
    height: unset;
}

.z-combobox-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 40px;
    line-height: 26px;
    padding: 7px 2.5rem 7px 1rem;
    print-color-adjust: exact;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    width: 100%;
}

.z-combobox-button {
    display: none;
}

.z-combobox-input:hover,
.z-combobox-input.z-combobox-hover,
.z-combobox-input.z-combobox-hover + .z-combobox-button {
    border-color: rgb(157 168 177);
}

.z-combobox-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px #2563eb, 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-combobox-input:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* for description to break inside combo boxes */
.z-comboitem-inner {
    white-space: normal;
}

/* remove readonly combobox grey background */
.z-combobox-readonly > input {
    background-color: white;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}

.z-combobox-popup {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-comboitem,
.z-comboitem a,
.z-comboitem a:visited {
    color: rgb(10 31 48);
    font-size: var(--unil-font-size);
}

.z-comboitem-selected {
    color: var(--unil-main-color);
}

/* endregion */

/* region Select boxes */
.z-selectbox {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 40px;
    line-height: 26px;
    padding: 7px 2.5rem 7px 1rem;
    print-color-adjust: exact;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    width: 100%;
}

.z-selectbox:hover {
    border-color: rgb(157 168 177);
}

.z-selectbox:active {
    background-color: white;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    color: rgb(10 31 48);
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-selectbox:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px #2563eb, 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-selectbox:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-selectbox[disabled] {
    cursor: not-allowed !important;
}

/* endregion */

/* region Search boxes */
.z-searchbox {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 40px;
    line-height: 26px;
    padding: 0 2.5rem 0 1rem;
    print-color-adjust: exact;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    width: 100%;
}

.z-searchbox-icon.z-icon-caret-down {
    display: none;
}

.z-searchbox-item {
    height: 42px;
}

.z-searchbox-item:hover {
    background-color: var(--unil-main-color-100);
}

.z-searchbox-label {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: unset;
    padding: 0;
}

.z-searchbox-placeholder {
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: unset;
    line-height: unset;
    padding: 0;
}

.z-searchbox-popup {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-searchbox:hover {
    border-color: rgb(157 168 177);
}

.z-searchbox:active {
    background-color: white;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-searchbox:active .z-searchbox-placeholder {
    color: rgba(0, 0, 0, 0.57);
}

.z-searchbox:active .z-searchbox-icon {
    color: rgba(0, 0, 0, 0.57);
}

.z-searchbox:focus {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-searchbox:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-searchbox-search {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 40px;
    line-height: 26px;
    padding: 7px 2.5rem 7px 1rem;
    print-color-adjust: exact;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    width: 100%;
}

.z-searchbox-search:hover {
    border-color: rgb(157 168 177);
}

.z-searchbox-search:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px #2563eb, 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-searchbox-search:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-searchbox-icon.z-searchbox-clear.z-icon-times {
    font-size: unset;
}

.z-searchbox-item.z-searchbox-selected {
    color: var(--unil-main-color);
}

.z-searchbox-item-check {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-width: 2px;
    color: var(--unil-main-color-500);
    font-family: inherit;
    height: 1.25rem;
    position: relative;
    width: 1.25rem;
}

.z-searchbox-item-check:hover {
    border-color: rgb(157 168 177)
}

.z-searchbox-item.z-searchbox-selected > .z-searchbox-item-check {
    background-color: var(--unil-main-color);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E");
    background-origin: border-box;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-color: var(--unil-main-color);
    font-size: 0;
}

.z-searchbox-item.z-searchbox-selected.z-searchbox-active,
.z-searchbox-item.z-searchbox-selected:hover {
    color: var(--unil-main-color-400);
}

/* endregion */

/* region Chosen boxes */
.z-chosenbox {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    display: flex;
    flex-wrap: wrap;
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: fit-content;
    line-height: 26px;
    min-height: 40px;
    padding: 2px 0.1rem 2px 0.15rem;
    print-color-adjust: exact;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.z-chosenbox-input {
    color: rgb(157 168 177);
    flex-grow: 1;
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 32px;
    padding: 2px 1rem 0 1rem;
}

.z-chosenbox-input[disabled] {
    cursor: not-allowed !important;
}

.z-chosenbox:hover {
    border-color: rgb(157 168 177);
}

.z-chosenbox-focus {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-chosenbox-popup {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-chosenbox-button {
    top: 6px;
}

.z-chosenbox-item-content {
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-chosenbox-item {
    background-color: var(--unil-main-color);
    border-radius: .375rem;
    height: 30px;
    margin: 2px;
    padding: 2px 8px;
}

/* endregion */

/* region Band boxes */
.z-bandbox {
    height: unset;
}

.z-bandbox-input {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 40px;
    line-height: 26px;
    padding: 7px 2.5rem 7px 1rem;
    print-color-adjust: exact;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    width: 100%;
}

.z-bandbox-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px #2563eb, 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-bandbox-input:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-bandbox-button {
    background: transparent;
    border-color: rgb(212 221 228);
    border-radius: 0 .375rem .375rem 0;
    border-style: solid;
    border-width: 1px;
    height: 100%;
    padding: 10px 8px 0;
}

.z-bandbox-input:focus + .z-bandbox-button,
.z-bandbox-input:focus-visible + .z-bandbox-button {
    background-color: transparent;
    border-bottom-color: transparent;
    border-left-color: var(--unil-main-color);
    border-right-color: transparent;
    border-top-color: transparent;
}

.z-bandbox-button:active {
    background-color: var(--unil-main-color);
    border: none;
    color: white;
}

.z-bandbox-readonly > input {
    background-color: white;
}

/* endregion */

/* region Date pickers */
.z-datebox {
    height: unset;
}

.z-datebox-input {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 40px;
    line-height: 26px;
    padding: 7px 2.5rem 7px 1rem;
    print-color-adjust: exact;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    width: 100%;
}

.z-datebox-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px #2563eb, 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-datebox-input:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-datebox-button {
    background: transparent;
    border-color: rgb(212 221 228);
    border-radius: 0 .375rem .375rem 0;
    border-style: solid;
    border-width: 1px;
    height: 100%;
    padding: 10px 8px 0;
}

.z-datebox-input:focus + .z-datebox-button,
.z-datebox-input:focus-visible + .z-datebox-button {
    background-color: transparent;
    border-bottom-color: transparent;
    border-left-color: var(--unil-main-color);
    border-right-color: transparent;
    border-top-color: transparent;
}

.z-datebox-button:active {
    background-color: var(--unil-main-color);
    border: none;
}

.z-datebox-popup {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
}

.z-calendar {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-calendar-title {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    font-weight: 700;
}

.z-calendar-body {
    margin-top: 12px;
}

.z-calendar th {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: 13px;
    font-weight: 400;
    padding: 8px 0 2px 0;
}

.z-calendar-cell {
    font-size: 15px;
    font-weight: 700;
    padding: 12px;
}

.z-calendar-selected {
    background-color: var(--unil-main-color);
}

.z-calendar-selected:hover {
    background-color: var(--unil-main-color-400);
}

/* endregion */

/* region Time pickers */

.z-timepicker {
    height: unset;
}

.z-timepicker-input {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 40px;
    line-height: 26px;
    padding: 7px 2.5rem 7px 1rem;
    print-color-adjust: exact;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    width: 100%;
}

.z-timepicker-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px #2563eb, 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-timepicker-input:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-timepicker-readonly > input {
    background-color: white;
}

.z-timepicker-button {
    background: transparent;
    border-color: rgb(212 221 228);
    border-radius: 0 .375rem .375rem 0;
    border-style: solid;
    border-width: 1px;
    height: 40px;
    padding: 10px 0;
}

.z-timepicker-input:focus + .z-timepicker-button,
.z-timepicker-input:focus-visible + .z-timepicker-button {
    background-color: transparent;
    border-bottom-color: transparent;
    border-left-color: var(--unil-main-color);
    border-right-color: transparent;
    border-top-color: transparent;
}

.z-timepicker-button:active {
    background-color: var(--unil-main-color);
    border: none;
}

.z-timepicker-option {
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    color: rgb(10 31 48);
}

.z-timepicker-option-selected {
    color: var(--unil-main-color);
}

.z-timebox-popup {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
}

.z-timebox-button > a:hover {
    background-color: var(--unil-main-color-100);
}

/* endregion */

/* region Spinners */
.z-spinner {
    height: 40px;
}

.z-spinner-input {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 40px;
    line-height: 26px;
    padding: .375rem 1rem;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-property: all;
}

.z-spinner-input:hover {
    border-color: rgb(157 168 177);
}

.z-spinner-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px #2563eb, 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-spinner-input:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-spinner-input:active {
    border-color: transparent;
    color: white;
}

.z-spinner-input:focus + .z-spinner-button {
    background: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
}

.z-spinner-button {
    height: 40px;
}

.z-spinner-button > a {
    height: 20px;
}

.z-spinner-button > a:hover {
    background-color: var(--unil-main-color-100);
}

.z-spinner-button:hover > i {
    top: 19px;
}

.z-spinner-button:active {
    border-color: var(--unil-main-color);
}

.z-spinner-active.z-spinner-icon,
.z-spinner-active.z-spinner-icon:hover {
    background-color: var(--unil-main-color);
}

/* endregion */

/* region Double spinners */
.z-doublespinner {
    height: 40px;
}

.z-doublespinner-input {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    height: 40px;
    line-height: 26px;
    padding: .375rem 1rem;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-property: all;
}

.z-doublespinner-input:hover {
    border-color: rgb(157 168 177);
}

.z-doublespinner-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px #2563eb, 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-doublespinner-input:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-doublespinner-input:focus + .z-doublespinner-button {
    background: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
}

.z-doublespinner-button {
    height: unset;
}

.z-doublespinner-button > a {
    height: 19px;
}

.z-doublespinner-button > a:hover {
    background-color: var(--unil-main-color-100);
}

.z-doublespinner-button:hover > i {
    top: 19px;
}

.z-doublespinner-button:active {
    border-color: var(--unil-main-color);
}

.z-doublespinner-active.z-doublespinner-icon,
.z-doublespinner-active.z-doublespinner-icon:hover {
    background-color: var(--unil-main-color);
}

/* endregion */

/* region Radio buttons */
.z-radio-content {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

/* endregion */

/* region Checkboxes */
.z-checkbox-content {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    font-weight: normal;
    line-height: 26px;
    margin-left: .1rem;
}

.z-checkbox-disabled > .z-checkbox-mold + .z-checkbox-content {
    color: rgb(157 168 177);
    cursor: not-allowed;
}

/* endregion */

/* region Toggle switches */
.z-checkbox-switch > .z-checkbox-mold {
    background-color: rgb(157 168 177);
}

.z-checkbox-switch > .z-checkbox-mold:hover {
    background-color: rgb(106 120 131);
}

.z-checkbox-switch > .z-checkbox-mold:focus {
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 0 2px #fff, 0 0 0 4px #008ccc;
}

.z-checkbox-switch-on > .z-checkbox-mold {
    background-color: var(--unil-main-color);
}

.z-checkbox-switch-on > .z-checkbox-mold:hover {
    background-color: var(--unil-main-color-400);
}

.z-checkbox-switch-disabled > .z-checkbox-mold {
    background-color: rgb(157 168 177);
    cursor: not-allowed;
}

/* endregion */

/* region Input groups */
.z-inputgroup:not(.z-inputgroup-vertical) > :last-child {
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.z-inputgroup > :nth-child(n).z-button:focus {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* endregion */

/* region Menu bars */
.z-menubar {
    background: none;
    border: none;
}

.z-menu-text {
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-menuitem-text {
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-menu-content:active, .z-menuitem-content:active {
    background: none;
}

.z-menu-content:focus {
    background: none;
    color: white;
}

.z-menu-content, .z-menuitem-content {
    background: none;
    color: white;
}

.z-menu-content:hover, .z-menuitem-content:hover {
    background-color: transparent;
    color: white;
}

.z-menu-selected > .z-menu-content {
    background-color: transparent;
}

.z-menupopup .z-menu-content:active, .z-menupopup .z-menuitem-content:active {
    background-color: #e0f2ff;
    color: rgba(0, 0, 0, 0.57);
}

/* endregion*/

/* region Tabbox */
.z-tab {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    font-weight: 700;
    line-height: 26px;
}

/* default non selected tab */
.z-tab-text {
    color: rgb(10 31 48);
}

.z-tab-text:hover {
    color: rgb(61 77 91);
}

/* blue selected tabs even on hover */
.z-tab-selected .z-tab-text,
.z-tab-selected .z-tab-text:hover {
    color: var(--unil-main-color);
}

/* more space between icon and text */
.z-tab-text i {
    padding-right: 6px;
}

/* blue bottom border for selected tabs in horizontal mode */
.z-tab-selected {
    border-bottom-color: var(--unil-main-color);
    border-bottom-width: 1px;
}

/* blue right border for selected tabs in vertical mode */
.z-tabbox-left > .z-tabs .z-tab.z-tab-selected {
    border-right-color: var(--unil-main-color);
    border-right-width: 1px;
}

/* remove any height set to tabbox in vertical mode, because of bug, see https://tracker.zkoss.org/browse/ZK-5902 */
.z-tabbox-left,
.z-tabbox-left > .z-tabs,
.z-tabbox-left .z-tabpanel {
    height: unset !important;
}

/* endregion */

/* region Toasts */
.z-toast-content {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

/* endregion */

/* region Grids */

.z-column-content,
.z-row-content,
.z-group-content,
.z-groupfoot-content,
.z-footer-content {
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-grid-body .z-cell {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-grid-body .z-grid-emptybody td {
    color: rgb(157 168 177);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-grid-footer .z-footer {
    background-color: var(--unil-gray-color-100);
}

/* grid column header */
.z-column {
    background-color: var(--unil-main-color);
    border-bottom: none;
    border-left-color: white;
}

.z-column-sort .z-column-content:active {
    background-color: var(--unil-main-color-600);
}

.z-row:hover > .z-row-inner,
.z-row:hover > .z-cell {
    background-color: var(--unil-main-color-100);
}

.z-detail-content {
    background-color: white;
}

/* endregion */

/* region List boxes */
.z-listheader-content,
.z-listcell-content,
.z-listgroup-content,
.z-listgroupfoot-content,
.z-listfooter-content {
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-listheader {
    background-color: var(--unil-main-color);
    border-bottom: none;
    border-left-color: white;
}

.z-listheader-sort .z-listheader-content:active {
    background-color: var(--unil-main-color-600);
}

/* so that we can apply min-width to column even with aux headers */
.z-listbox-header > table,
.z-listbox-body > table {
    table-layout: auto !important;
}

.z-listbox-body .z-listbox-emptybody td {
    color: rgb(157 168 177);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-listitem-focus > .z-listcell:first-child,
.z-listitem-focus > .z-listcell:last-child,
.z-listitem-focus > .z-listcell {
    box-shadow: none;
}

.z-listitem:hover > .z-listcell {
    background-color: var(--unil-main-color-100);
}

.z-listitem.z-listitem-selected:hover > .z-listcell {
    background-color: var(--unil-main-color-200);
}

.z-listgroup.z-listgroup-open .z-listgroup-inner .z-listgroup-icon,
.z-listgroup.z-listgroup-open .z-listgroup-inner .z-listcell-content {
    color: var(--unil-main-color);
}

.z-listgroup.z-listgroup-open .z-listgroup-inner {
    border-bottom-color: var(--unil-main-color);
}

.z-listitem-checkbox,
.z-listgroup-checkbox,
.z-listheader-checkable {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-width: 2px;
    color: var(--unil-main-color-500);
    font-family: inherit;
    height: 1.25rem;
    position: relative;
    width: 1.25rem;
}

.z-listheader-checkable {
    border-color: white;
}

.z-listitem-checkbox:hover,
.z-listgroup-checkbox:hover,
.z-listheader-checkable:hover {
    border-color: rgb(157 168 177)
}

.z-listitem.z-listitem-selected .z-listitem-checkbox,
.z-listgroup.z-listgroup-selected .z-listgroup-checkbox,
.z-listheader-checkable.z-listheader-checked {
    background-color: var(--unil-main-color);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E");
    background-origin: border-box;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-color: var(--unil-main-color);
    font-family: inherit;
}

.z-listheader-checkable.z-listheader-checked {
    background-color: white;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230078bd' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E");
    border-color: white;
    color: var(--unil-main-color);
}

.z-listitem-checkable .z-listitem-icon,
.z-listgroup-selected .z-listgroup-checkable .z-listgroup-icon,
.z-listheader-checkable.z-listheader-checked .z-listheader-icon {
    display: none;
}

.z-listitem-selected > .z-listcell > .z-listcell-content > .z-listitem-checkable .z-listitem-icon.z-icon-radio {
    background-color: var(--unil-main-color);
}

/* endregion */

/* region Aux headers */
/* grid/listbox headers */
.z-auxheader {
    background-color: var(--unil-gray-color-100);
    border-bottom: none;
    border-left: none;
}

.z-auxhead-bar {
    border: none;
}

/* endregion */

/* region Paging */
.z-paging {
    background-color: var(--unil-gray-color-100);
}

.z-paging-text {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-paging-info {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-paging-input {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-style: solid;
    border-width: 1px;
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    print-color-adjust: exact;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.z-paging-input:hover {
    border-color: rgb(157 168 177);
}

.z-paging-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px #2563eb, 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-paging-input:focus-visible {
    border-color: var(--unil-main-color-500);
    box-shadow: 0 0 0 0 #fff, 0 0 0 1px var(--unil-main-color-500), 0 0 #0000;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.z-paging-button:active {
    background-color: var(--unil-main-color);
}

/* endregion */

/* region Windows */
/* blue window background */
.z-window {
    background-color: var(--unil-main-color);
}

/* white text and icon in windows headers */
.z-window-header {
    font-family: var(--unil-font-family), serif;
}

.z-window-header,
.z-window-icon {
    color: white;
}

/* endregion */

/* region Popups */
.z-popup-content {
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    color: rgb(10 31 48);
    line-height: 20px;
}

/* endregion */

/* region Croppers */
.z-cropper-toolbar > ul {
    background-color: var(--unil-main-color);
    color: white;
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
}

.z-cropper-toolbar > ul > li:first-child {
    border-right-color: white;
}

.z-cropper-toolbar > ul > li {
    padding: 0;
}

.z-cropper-toolbar > ul > li > a {
    background-color: var(--unil-main-color);
    border-color: transparent;
    border-width: 2px;
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    font-weight: 700;
    line-height: 30px;
    min-height: 40px;
    padding: 5px 1rem;
    width: fit-content;
}

.z-cropper-toolbar > ul > li > a:hover {
    background-color: var(--unil-main-color-400);
}

.z-cropper-toolbar > ul > li > a:active {
    background-color: var(--unil-main-color-600);
}

/* endregion */

/* region Sliders */

.z-slider-area,
.z-slider-button {
    background-color: var(--unil-main-color);
}

.z-slider-button:hover {
    background-color: var(--unil-main-color-400);
}

.z-slider-button:active {
    background-color: var(--unil-main-color-600);
}

/* endregion */

/* region Range sliders */
.z-rangeslider {
    font-family: var(--unil-font-family), serif;
}

.z-rangeslider-mark-label {
    color: rgb(10 31 48);
    font-size: 15px;
}

.z-rangeslider-horizontal .z-rangeslider-inner {
    margin: 20px 12px 30px;
}

.z-rangeslider .z-sliderbuttons-button {
    background-color: var(--unil-main-color);
    border-color: var(--unil-main-color);
}

.z-rangeslider .z-sliderbuttons-area {
    background-color: var(--unil-main-color);
}

.z-rangeslider:not(.z-rangeslider-disabled) .z-sliderbuttons-button:focus {
    border-color: var(--unil-main-color);
}

.z-rangeslider:not(.z-rangeslider-disabled) .z-sliderbuttons-button:hover {
    background-color: var(--unil-main-color-400);
    border-color: var(--unil-main-color-400);
}

.z-rangeslider:not(.z-rangeslider-disabled) .z-sliderbuttons-button:active {
    background-color: var(--unil-main-color);
    border-color: var(--unil-main-color-600);
}

/* endregion */

/* region Upload progress bars */
.z-progressmeter-image {
    background-color: #018ccd;
}

/* endregion */

/* region Calendars */

/* day of week in month view */
.z-calendars-month-header .z-calendars-day-of-week {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: 15px;
}

/* week of year on the left in month view */
.z-calendars-week-of-year-text {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: 15px;
}

/* day number in each cell in month view */
.z-calendars-month-date {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: 15px;
}

/* header in week view */
.z-calendars-week-header {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: 15px;
}

/* header cell in week view */
.z-calendars-day-of-week-inner {
    color: rgb(10 31 48);
}

/* header text in week view */
.z-calendars-day-of-week-cnt {
    padding-left: 12px;
}

/* hour of day on the left in week view */
.z-calendars-hour-of-day {
    color: rgb(10 31 48);
    font-family: var(--unil-font-family), serif;
    font-size: 15px;
}

/* current day header in week view */
.z-calendars-day-of-week-inner.z-calendars-week-today {
    background-color: var(--unil-main-color-400);
}

/* text in calendar item header */
.z-calitem-header {
    font-family: var(--unil-font-family), serif;
}

/* text in calendar item body */
.z-calitem-inner .z-calitem-cnt {
    font-family: var(--unil-font-family), serif;
}

/* calendar item, also new item in week view */
.z-calitem-inner dl {
    background-color: var(--unil-main-color-400);
}

/* text xx more when too much events */
.z-calendars-daylong-faker-more,
.z-calendars-evt-faker-more {
    font-family: var(--unil-font-family), serif;
}

/* multi day events in month view */
.z-calitem-month .z-calitem-inner,
.z-calitem-daylong-month .z-calitem-inner {
    background-color: var(--unil-main-color-400);
}

/* multi day events in week view */
.z-calendars-daylong-evt .z-calitem-inner,
.z-calitem-daylong-month .z-calitem-inner {
    background-color: var(--unil-main-color-400);
}

/* days out of current month in month view */
.z-calendars-month-date-off {
    background-color: rgb(239 243 246);
}

/* selected cells */
.z-calendars-dd-rope {
    background-color: var(--unil-main-color-100);
}

/* calendar table in month view */
.z-calendars-month-cnt {
    border-bottom: none;
    border-left: none;
    border-top: none;
}

/* week of year column in month view */
.z-calendars-week-of-year {
    border-top: none;
}

/* calendar table in week view */
.z-calendars-week {
    border-left: none;
    border-top: none;
}


/* color for calendar items*/
.u-cal-item-red.z-calitem-month .z-calitem-inner,
.u-cal-item-red.z-calitem .z-calitem-inner dl,
.u-cal-item-red.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-red.z-calitem-daylong-month .z-calitem-inner {
    background-color: #e6194B;
}

.u-cal-item-green.z-calitem-month .z-calitem-inner,
.u-cal-item-green.z-calitem .z-calitem-inner dl,
.u-cal-item-green.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-green.z-calitem-daylong-month .z-calitem-inner {
    background-color: #3cb44b;
}

.u-cal-item-yellow.z-calitem-month .z-calitem-inner,
.u-cal-item-yellow.z-calitem .z-calitem-inner dl,
.u-cal-item-yellow.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-yellow.z-calitem-daylong-month .z-calitem-inner {
    background-color: #dcbf00;
}

.u-cal-item-blue.z-calitem-month .z-calitem-inner,
.u-cal-item-blue.z-calitem .z-calitem-inner dl,
.u-cal-item-blue.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-blue.z-calitem-daylong-month .z-calitem-inner {
    background-color: #4363d8;
}

.u-cal-item-orange.z-calitem-month .z-calitem-inner,
.u-cal-item-orange.z-calitem .z-calitem-inner dl,
.u-cal-item-orange.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-orange.z-calitem-daylong-month .z-calitem-inner {
    background-color: #f58231;
}

.u-cal-item-purple.z-calitem-month .z-calitem-inner,
.u-cal-item-purple.z-calitem .z-calitem-inner dl,
.u-cal-item-purple.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-purple.z-calitem-daylong-month .z-calitem-inner {
    background-color: #911eb4;
}

.u-cal-item-cyan.z-calitem-month .z-calitem-inner,
.u-cal-item-cyan.z-calitem .z-calitem-inner dl,
.u-cal-item-cyan.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-cyan.z-calitem-daylong-month .z-calitem-inner {
    background-color: #42d4f4;
}

.u-cal-item-magenta.z-calitem-month .z-calitem-inner,
.u-cal-item-magenta.z-calitem .z-calitem-inner dl,
.u-cal-item-magenta.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-magenta.z-calitem-daylong-month .z-calitem-inner {
    background-color: #f032e6;
}

.u-cal-item-lime.z-calitem-month .z-calitem-inner,
.u-cal-item-lime.z-calitem .z-calitem-inner dl,
.u-cal-item-lime.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-lime.z-calitem-daylong-month .z-calitem-inner {
    background-color: #93c70f;
}

.u-cal-item-pink.z-calitem-month .z-calitem-inner,
.u-cal-item-pink.z-calitem .z-calitem-inner dl,
.u-cal-item-pink.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-pink.z-calitem-daylong-month .z-calitem-inner {
    background-color: #e8a6a6;
}

.u-cal-item-teal.z-calitem-month .z-calitem-inner,
.u-cal-item-teal.z-calitem .z-calitem-inner dl,
.u-cal-item-teal.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-teal.z-calitem-daylong-month .z-calitem-inner {
    background-color: #469990;
}

.u-cal-item-lavender.z-calitem-month .z-calitem-inner,
.u-cal-item-lavender.z-calitem .z-calitem-inner dl,
.u-cal-item-lavender.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-lavender.z-calitem-daylong-month .z-calitem-inner {
    background-color: #b78bd3;
}

.u-cal-item-brown.z-calitem-month .z-calitem-inner,
.u-cal-item-brown.z-calitem .z-calitem-inner dl,
.u-cal-item-brown.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-brown.z-calitem-daylong-month .z-calitem-inner {
    background-color: #9A6324;
}

.u-cal-item-beige.z-calitem-month .z-calitem-inner,
.u-cal-item-beige.z-calitem .z-calitem-inner dl,
.u-cal-item-beige.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-beige.z-calitem-daylong-month .z-calitem-inner {
    background-color: #afa75b;
}

.u-cal-item-marron.z-calitem-month .z-calitem-inner,
.u-cal-item-marron.z-calitem .z-calitem-inner dl,
.u-cal-item-marron.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-marron.z-calitem-daylong-month .z-calitem-inner {
    background-color: #800000;
}

.u-cal-item-mint.z-calitem-month .z-calitem-inner,
.u-cal-item-mint.z-calitem .z-calitem-inner dl,
.u-cal-item-mint.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-mint.z-calitem-daylong-month .z-calitem-inner {
    background-color: #5ad67f;
}

.u-cal-item-olive.z-calitem-month .z-calitem-inner,
.u-cal-item-olive.z-calitem .z-calitem-inner dl,
.u-cal-item-olive.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-olive.z-calitem-daylong-month .z-calitem-inner {
    background-color: #808000;
}

.u-cal-item-apricot.z-calitem-month .z-calitem-inner,
.u-cal-item-apricot.z-calitem .z-calitem-inner dl,
.u-cal-item-apricot.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-apricot.z-calitem-daylong-month .z-calitem-inner {
    background-color: #d69452;
}

.u-cal-item-navy.z-calitem-month .z-calitem-inner,
.u-cal-item-navy.z-calitem .z-calitem-inner dl,
.u-cal-item-navy.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-navy.z-calitem-daylong-month .z-calitem-inner {
    background-color: #000075;
}

.u-cal-item-dark-purple.z-calitem-month .z-calitem-inner,
.u-cal-item-dark-purple.z-calitem .z-calitem-inner dl,
.u-cal-item-dark-purple.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-dark-purple.z-calitem-daylong-month .z-calitem-inner {
    background-color: #21056a;
}

.u-cal-item-grey.z-calitem-month .z-calitem-inner,
.u-cal-item-grey.z-calitem .z-calitem-inner dl,
.u-cal-item-grey.z-calendars-daylong-evt .z-calitem-inner,
.u-cal-item-grey.z-calitem-daylong-month .z-calitem-inner {
    background-color: #cccccc;
}

/* endregion */

/* region Rating */
.z-rating > .z-rating-selected {
    color: var(--unil-main-color);
}

/* endregion */

/* region Signature */
.z-signature-tool-button,
.z-signature-tool-button:focus {
    background-color: var(--unil-main-color);
    border-color: transparent;
    border-radius: .375rem;
    border-width: 2px;
    box-shadow: none;
    font-family: var(--unil-font-family), serif;
    font-size: var(--unil-font-size);
    font-weight: 700;
    line-height: 18px;
    min-height: 32px;
    padding: 5px 1rem;
    width: fit-content;
}

.z-signature-tool-button:hover {
    background-color: var(--unil-main-color-400);
}

.z-signature-tool-button:active {
    background-color: var(--unil-main-color-600);
}

.z-signature-tool-button[disabled] {
    background-color: rgb(226 233 238);
    color: rgb(157 168 177);
    cursor: not-allowed;
}

/* endregion */

/* region Charts */
.highcharts-root {
    font-family: var(--unil-font-family), serif !important;
}

/* endregion */