@charset "utf-8";
/* CSS Document */

/* Elements */

html {
    font-size: 16px;
}

body {
    color: var(--ark-text);
    font-weight: 300;
    font-family: var(--ark-body-family);
}

h1,
h2,
h3,
h4,
.btn {
    font-family: var(--ark-header-family);
    font-weight: 700;
    text-wrap: balance;
}

h1 {
    text-align: center;
    margin-bottom: 0.5em;
    text-wrap: balance;
}

h2,
h3 {
    color: var(--ark-dark);
}

a {
    font-weight: 700;
    text-decoration: none;
    color: var(--ark-dark);
}

a:hover {
    color: var(--ark-primary-dk);
}

img {
    display: block;
    max-width: 100%;
}

p {
    margin-bottom: 0;
}

ul {
    margin-bottom: 0;
    padding-left: 1.5rem;
}

blockquote {
    margin-top: 1em;
    padding-left: 1em;
    border-left: 0.5em solid var(--ark-primary-lt);
}

* + h2,
* + h3,
* + h4,
* + p,
* + ul {
    margin-bottom: 0;
    margin-top: 1em;
}

/* Positioning */

.position-sticky.top-0 {
    top: 0;
}

/* Text Styles */

.text-justify {
    text-align: justify;
}

.text-balance {
    text-wrap: balance;
}

.text-bold,
strong {
    font-weight: 700;
}

.text-italic {
    font-style: italic;
}

.text-bigger,
.text-lg {
    font-size: 1.25em;
}

.text-biggest,
.text-xl {
    font-size: 1.5em;
}

@media (min-width: 768px) {
    .text-md-bigger {
        font-size: 1.25em;
    }
}

.text-smaller,
.text-sm {
    font-size: 0.8em;
}

.text-smallest,
.text-xs {
    font-size: 0.66em;
}

.text-header {
    font-family: var(--ark-header-family);
}

.word-wrap {
    word-break: break-all;
}

/* Basic Palette */

.text-base,
.btn.disabled.text-base {
    color: var(--ark-text) !important;
}

.bg-primary,
.text-bg-primary {
    background-color: rgb(
        var(--ark-primary-dk-rgb) / var(--bs-bg-opacity, 1)
    ) !important;
}
.border-primary {
    border-color: var(--ark-primary-dk) !important;
}
.text-primary {
    color: var(--ark-primary-dk) !important;
}

.bg-secondary {
    background-color: rgb(
        var(--ark-secondary-dk-rgb) / var(--bs-bg-opacity, 1)
    ) !important;
}
.border-secondary {
    border-color: var(--ark-secondary-dk) !important;
}
.text-secondary {
    color: var(--ark-secondary-dk) !important;
}

.bg-dark {
    background-color: rgb(
        var(--ark-dark-rgb) / var(--bs-bg-opacity)
    ) !important;
}

.bg-light {
    background-color: rgb(
        var(--ark-primary-lt-rgb) / var(--bs-bg-opacity)
    ) !important;
}

.text-dark {
    color: var(--ark-dark) !important;
}

.text-light {
    color: rgb(var(--ark-bg-color-rgb) / 0.7) !important;
}

.text-light a,
.text-light button,
.text-bg {
    color: var(--ark-bg-color) !important;
}

.text-light a:hover,
.text-light button:hover {
    color: rgb(var(--ark-bg-color-rgb) / 0.7) !important;
}

.bg-faded {
    background-color: rgb(
        var(--ark-faded-rgb) / var(--bs-bg-opacity, 1)
    ) !important;
}
.text-faded {
    color: var(--ark-faded) !important;
}

.bg-primary a,
.bg-secondary a {
    color: var(--ark-bg-color);
}

.bg-primary a:hover,
.bg-secondary a:hover {
    color: rgb(var(--ark-bg-color-rgb) / 0.7);
}

/* Containers */

.content {
    padding: 1.5rem;
    background: var(--ark-bg-color);
    border-radius: 0.5rem;
}

.outline-block {
    padding: 2rem;
    border-radius: 1rem;
    border: 2px solid var(--ark-primary-dk);
    background-color: var(--ark-bg-color);
}

.w-33 {
    width: calc(100% / 3);
}

.mh-auto {
    max-height: inherit !important;
}

.rounded-5 {
    border-radius: 0.5rem;
}

.rounded-6 {
    border-radius: 1rem;
}

.rounded-7 {
    border-radius: 2rem;
}

.shadow {
    box-shadow: -0.125rem 0.25rem 0.5rem rgb(var(--ark-text-rgb) / 0.15) !important;
}

.headshot {
    border: 0.25rem solid var(--ark-primary-dk);
    border-radius: 100vmax;
    overflow: hidden;
    margin: 0 auto 1.5rem;
}

@media only screen and (min-width: 576px) {
    .headshot {
        width: 75%;
    }
}

@media only screen and (max-width: 576px) {
    .hide-on-mobile {
        display: none;
    }
}

.scrollbar-none {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.scrollbar-none::-webkit-scrollbar {
    /* Hide scrollbar for Chrome, Safari and Opera */
    display: none;
}

.ratio-2x1 {
    --bs-aspect-ratio: 50%;
}

/* Grid and Flex */

.colspan-2 {
    grid-column: 2;
}
.colspan-3 {
    grid-column: 3;
}
.colspan-4 {
    grid-column: 4;
}
.colspan-5 {
    grid-column: 5;
}

.rowspan-2 {
    grid-row: 2;
}
.rowspan-3 {
    grid-row: 3;
}
.rowspan-4 {
    grid-row: 4;
}
.rowspan-5 {
    grid-row: 5;
}

/* Tables */

.table-responsive {
    margin-bottom: 1rem;
}

.fixed-thead {
    max-height: calc(100svh - 26.5rem);
    box-shadow: inset -0.25rem -0.125rem 0.25rem
        rgb(var(--ark-text-rgb) / 0.075);
}

.table {
    margin-bottom: 0;
}

.table th,
.table td {
    vertical-align: middle;
}

.table th:not(:first-child),
.table td:not(:first-child) {
    text-align: center;
}

.table .actions a,
.table .actions button,
.table .actions span {
    padding: 0;
    margin: 0.125rem 0.25rem;
}

.table .actions:has(.d-grid) {
    min-width: 4rem;
}

.table .actions:has(.g-col-2) {
    width: 5.5rem;
}

.table .actions:has(.g-col-3) {
    width: 8rem;
}

.table .actions .d-grid {
    grid-template-columns: repeat(var(--_cols, 1), 1fr);
    gap: 0.5rem;
}

.table .actions .d-grid > * {
    grid-column: auto / span 2;
}

.table .actions .d-grid.g-col-2 {
    --_cols: 4;
}

.table .actions .d-grid.g-col-3 {
    --_cols: 6;
}

.table .actions .d-grid .o-1 {
    grid-column-start: 2;
}
.table .actions .d-grid .o-2 {
    grid-column-start: 3;
}
.table .actions .d-grid .o-3 {
    grid-column-start: 4;
}

.table .actions .d-grid a,
.table .actions .d-grid button,
.table .actions .d-grid span {
    margin: 0;
}

.table .actions .icon {
    font-size: 1.5em;
}

.table .tags {
    padding-block: 0.25rem;
}

.table .featured td {
    position: relative;
    z-index: 9;
}

.table .featured td::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background-color: rgb(var(--ark-secondary-dk-rgb) / 0.33);
    z-index: -1;
}

.clients .table td {
    height: 4.5rem;
}

.inputs-row td:has(input, select) {
    padding: 0.25rem 0 0.25rem 0.25rem;
}

th.adaptable,
td.adaptable {
    width: 1px;
    white-space: nowrap;
}

td.avatar {
    width: 5rem;
    padding: 0;
}

td.avatar img {
    width: 5rem;
    height: auto;
}

td.hero-shot {
    width: 8rem;
    text-align: center;
    text-wrap: balance;
    padding: 0;
}

td.hero-shot img {
    width: 100%;
    height: auto;
}

.index .email {
    font-size: 0.8em;
    word-break: break-all;
    width: 15rem;
}

.index .counter {
    position: absolute;
    right: -0.25rem;
    bottom: 0;
    display: inline-flex;
    height: 1rem;
    padding: 0 0.33rem !important;
    justify-content: center;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: 0.5rem;
    pointer-events: none;
}

.index .search-form {
    width: 100%;
}

@media (min-width: 992px) {
    .index .search-form {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .index .search-form {
        flex-grow: 1;
    }
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
}

.form-control.w-4 {
    width: 4rem;
}

.form-control.w-6 {
    width: 6rem;
}

/*.form-control.w-8,
.filter-form .date .form-control {
	max-width:8rem;
}*/

.form-control.w-8 {
    width: 8rem;
}

.form-control.w-12 {
    max-width: 12rem;
}

.form-control.w-16 {
    width: 16rem;
}

.form-control.w-20 {
    width: 20rem;
}

.form-control.w-24 {
    width: 24rem;
}

.square-success::before {
    content: "∎";
    display: inline-block;
    color: var(--bs-success);
}

/* = Pages = */

#hero-banner {
    background-position: top center;
    background-size: cover;
}

.hero-banner {
    aspect-ratio: 16/6;
}

.hero-banner h1 {
    text-transform: uppercase;
    color: var(--ark-bg-color);
    text-shadow: -2px -2px 2px rgb(var(--ark-text-rgb) / 0.33),
        2px 2px 2px rgb(var(--ark-text-rgb) / 0.33),
        -2px 2px 2px rgb(var(--ark-text-rgb) / 0.33),
        2px -2px 2px rgb(var(--ark-text-rgb) / 0.33),
        -1px -1px 0 var(--ark-text), 1px 1px 0 var(--ark-text),
        -1px 1px 0 var(--ark-text), 1px -1px 0 var(--ark-text);
}

/* Views */

.view dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1.5rem;
    margin: 0;
}

.view dl h3 {
    grid-column: 1 / 3;
}

.view * + h3 {
    margin-top: 0.5em;
}

.view .notes blockquote {
    border: 1px solid rgb(var(--ark-primary-dk-rgb) / 0.33);
    border-radius: 0.25rem;
    padding: 2rem 0.75rem 0.375rem;
    position: relative;
}

.view .notes .meta,
.view .notes .author {
    display: flex;
}

.view .notes .meta {
    padding: 0.375rem 0.75rem 0;
    justify-content: space-between;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
}

.view .notes {
    margin: 0;
}

.view .notes > * + * {
    margin: 1rem 0 0;
}

.view .notes > form:first-of-type {
    margin-top: 0;
}

.view .notes blockquote .actions {
    visibility: hidden;
}

.view .notes .actions a,
.view .notes .actions button {
    margin-left: 0.5rem;
}

.view .notes blockquote:hover .actions {
    visibility: visible;
}

.view .notes form .notes-textarea {
    padding: 2rem 0.75rem 0.375rem;
    position: relative;
    z-index: 0;
    overflow-y: hidden;
}

.view .notes form .meta {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid var(--ark-primary-lt);
    border-bottom: none;
    z-index: 2;
    overflow: hidden;
}

.view .notes form:focus-within .meta {
    border: 1px solid var(--ark-primary-dk);
    border-bottom: none;
}

.view .notes form .meta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: -moz-linear-gradient(
        top,
        rgb(var(--md-bg-rgb) / 1) 0%,
        rgb(var(--md-bg-rgb) / 1) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: -webkit-linear-gradient(
        top,
        rgb(var(--md-bg-rgb) / 1) 0%,
        rgb(var(--md-bg-rgb) / 1) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: -ms-linear-gradient(
        top,
        rgb(var(--md-bg-rgb) / 1) 0%,
        rgb(var(--md-bg-rgb) / 1) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: linear-gradient(
        to bottom,
        rgb(var(--md-bg-rgb) / 1) 0%,
        rgb(var(--md-bg-rgb) / 1) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
}

.view .notes form .meta::after {
    --_color: rgb(var(--ark-primary-dk-rgb) / 0.1);
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: -moz-linear-gradient(
        top,
        var(--_color) 0%,
        var(--_color) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: -webkit-linear-gradient(
        top,
        var(--_color) 0%,
        var(--_color) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: -ms-linear-gradient(
        top,
        var(--_color) 0%,
        var(--_color) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: linear-gradient(
        to bottom,
        var(--_color) 0%,
        var(--_color) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
}

.view .notes form:focus-within .meta::after {
    display: none;
}

.view .notes .author {
    justify-content: flex-end;
    gap: 0.25rem;
    opacity: 0.66;
}

.view .notes .author:hover {
    opacity: 1;
}

/* Products */

.products .masonry h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 68px;
}

.products .masonry h3 a {
    text-wrap: balance;
}
.products .masonry .summary {
    display: flex;
    justify-content: center;
    align-items: center;
    text-wrap: balance;
    min-height: 72px;
}

.online-order .product-name {
    line-height: 1;
}

/* Documents */

.document .docu-wrapper {
    padding: 1rem;
    position: relative;
    display: none;
}

.document .docu-title {
    width: auto;
    font-size: 0.8em;
    line-height: 1;
    font-weight: 700;
    position: absolute;
    top: -0.5em;
    left: 1.5rem;
    padding: 0 0.5rem;
    margin-bottom: 0;
    color: var(--ark-primary-dk);
    background-color: var(--ark-bg-color);
    z-index: 9;
}

.document .document-terms {
    padding: 0 1rem;
}
.document .document-terms > div {
    padding: 2rem 0;
    aspect-ratio: 16/9;
    overflow-y: scroll;
    position: relative;
}

.document .document-terms::before,
.document .document-terms::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2.5rem;
    pointer-events: none;
    z-index: 9;
}

.document .document-terms::before {
    border-radius: 1.5rem 1.5rem 0 0;
    top: 0rem;
    background: linear-gradient(
        to bottom,
        rgb(var(--ark-bg-color-rgb) / 1) 0%,
        rgb(var(--ark-bg-color-rgb) / 0) 100%
    );
}

.document .document-terms::after {
    border-radius: 0 0 1.5rem 1.5rem;
    bottom: 0rem;
    background: linear-gradient(
        to bottom,
        rgb(var(--ark-bg-color-rgb) / 0) 0%,
        rgb(var(--ark-bg-color-rgb) / 1) 100%
    );
}

.document .minor-data,
.document .conditional-data {
    display: none;
}

.document .signature {
    position: relative;
    width: 100%;
    max-width: 20rem;
    box-shadow: inset 0 0 0.5rem rgb(var(--ark-primary-dk-rgb) / 0.5);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 5 / 2;
}

.document .signature:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/icons/pen-fancy-white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(var(--ark-text-rgb) / 0.6);
    background-size: 25%;
    z-index: 9;
}

/* Customer Vault */

.vault-profile .credit-cards {
    list-style: none;
    padding: 0 1.5rem;
}

.vault-profile .credit-cards .card,
.vault-profile .credit-cards .add-card {
    padding: 0.5rem;
    border-radius: 1rem;
}

.vault-profile .credit-cards .card {
    border: 1px solid var(--ark-primary-dk);
    margin-bottom: 1rem;
}

.vault-profile .credit-cards .card.primary {
    outline: 2px solid var(--ark-primary-dk);
}

.vault-profile .credit-cards .add-card {
    background-color: var(--ark-dark);
    border: 1px solid var(--ark-dark);
    color: var(--ark-bg-color);
    box-shadow: inset -0.125rem 0.125rem 0.25rem rgb(var(--ark-text-rgb) / 0.3);
}

.credit-cards .card-img {
    display: inline-block;
    width: auto;
    height: 3em;
}

.vault-profile .credit-cards .actions {
    text-align: right;
}

.revere-payment-form iframe {
    min-height: 38px;
}

.levelled {
    padding-left: 2.25em;
}

.levelled > li {
    font-size: 1.6rem;
    font-family: var(--ark-header-family);
    font-weight: 700;
    color: var(--ark-dark);
}

.levelled li + li {
    margin-top: 0.5em;
}

.levelled > li > ol {
    list-style-type: lower-alpha;
}

.levelled > li > ol > li {
    font-size: 1.2rem;
    font-family: var(--ark-body-family);
    font-weight: 400;
    color: var(--ark-text);
}

.levelled > li > ol > li > ol {
    list-style-type: lower-roman;
}

.levelled > li > ol > li > ol > li {
    font-size: 1rem;
}

/* Tickets */

.ticket-reply {
    max-width: 75vh;
}

.ticket-reply .btn[aria-expanded="false"]::before,
.ticket-reply .btn[aria-expanded="false"]::after {
    content: "▼";
    font-size: 1.5em;
}

.ticket-reply .btn[aria-expanded="true"]::before,
.ticket-reply .btn[aria-expanded="true"]::after {
    content: "▲";
    font-size: 1.5em;
}

.ticket .countdown {
    padding: 0.375rem;
}

.ticket .countdown-counting {
    font-size: 2em;
}

/* Notes */

.notes blockquote {
    border: 1px solid rgb(var(--ark-primary-dk-rgb) / 0.33);
    border-radius: 0.5rem;
    padding: 2rem 0.75rem 0.375rem;
    position: relative;
}

.notes .meta,
.notes .author {
    display: flex;
}

.notes .meta {
    padding: 0.375rem 0.75rem 0;
    justify-content: space-between;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
}

/*.tickets-notes.notes .meta {
	top:auto;
	bottom:.25rem;
}*/

.notes > * + * {
    margin: 1rem 0 0;
}

.notes > form:first-of-type {
    margin-top: 0;
}

.notes blockquote .actions {
    visibility: hidden;
}

.notes .actions a,
.notes .actions button {
    margin-left: 0.5rem;
}

.notes blockquote:hover .actions {
    visibility: visible;
}

.notes .note-textarea {
    padding: 2rem 0.75rem 0.375rem;
    position: relative;
    z-index: 0;
    overflow-y: hidden;
}

.notes form .meta {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid var(--ark-primary-lt);
    border-bottom: none;
    z-index: 2;
    overflow: hidden;
}

.notes form:focus-within .meta {
    border: 1px solid var(--ark-primary-dk);
    border-bottom: none;
}

.notes form .meta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: -moz-linear-gradient(
        top,
        rgb(var(--md-bg-rgb) / 1) 0%,
        rgb(var(--md-bg-rgb) / 1) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: -webkit-linear-gradient(
        top,
        rgb(var(--md-bg-rgb) / 1) 0%,
        rgb(var(--md-bg-rgb) / 1) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: -ms-linear-gradient(
        top,
        rgb(var(--md-bg-rgb) / 1) 0%,
        rgb(var(--md-bg-rgb) / 1) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: linear-gradient(
        to bottom,
        rgb(var(--md-bg-rgb) / 1) 0%,
        rgb(var(--md-bg-rgb) / 1) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
}

.notes form .meta::after {
    --_color: rgb(var(--ark-primary-dk-rgb) / 0.1);
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: -moz-linear-gradient(
        top,
        var(--_color) 0%,
        var(--_color) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: -webkit-linear-gradient(
        top,
        var(--_color) 0%,
        var(--_color) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: -ms-linear-gradient(
        top,
        var(--_color) 0%,
        var(--_color) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
    background: linear-gradient(
        to bottom,
        var(--_color) 0%,
        var(--_color) 75%,
        rgb(var(--md-bg-rgb) / 0) 100%
    );
}

.notes form:focus-within .meta::after {
    display: none;
}

.notes .author {
    justify-content: flex-end;
    gap: 0.25rem;
    opacity: 0.66;
}

.notes .author:hover {
    opacity: 1;
}

/* User Profiles */

.surveys {
    list-style: none;
    padding: 0;
}

/* Special */

@media (min-width: 768px) {
    .filter-reserves {
        width: 75%;
    }
}

@media (min-width: 992px) {
    .filter-reserves {
        width: 50%;
    }
}

.viewport-screen {
    height: 100vh;
    height: 100svh;
    background-size: cover;
    background-position: center;
}

.btn-fullscreen {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
}

.viewport-screen .branding {
    max-height: 20vh;
    max-height: 20svh;
    margin-inline: auto;
    -webkit-filter: drop-shadow(-5px 5px 3px rgb(0 0 0 / 0.4));
    filter: drop-shadow(-5px 5px 3px rgb(0 0 0 / 0.4));
}

@media (max-width: 768px) {
    .viewport-screen .branding {
        max-height: 15vh;
        max-height: 15svh;
    }
}