:root {
    --primary-color: #a5a3a0;
    --secondary-color: #7f7f7f;
    --very-light-color: #f2f2f2;
    --light-color: #c1c1c1;
    --dark-color: #2b2b2a;
    --blue-color: #34a7e5;
    --green-color: #00bf63;
    --light-green-color: #c8f7d7;
    --red-color: #d91d1d;
    --light-red-color: #ffdfdf;
    --annapurna-light-color: #4e6c86;
    --font-regular: 'Inter Regular', sans-serif;
    --font-medium: 'Inter Medium', sans-serif;
    --font-semibold: 'Inter Semibold', sans-serif;
    --font-bold: 'Inter Bold', sans-serif;
    --font-title: 'LatienneT Bold', serif;
    --app-margin: 2rem;
}

::selection {
    -webkit-text-fill-color: white !important;
    color: white !important;
    background: var(--secondary-color) !important;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html, body {
    min-height: 100vh;
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: var(--font-regular);
    font-size: 0.9rem;
    line-height: 1.1;
    background-color: var(--very-light-color);
    color: var(--dark-color);
}

body.is-dark {
    background-color: var(--dark-color);
    color: white;
}

body * {
    box-sizing: border-box;
}

body.is-app-menu-open > *:not(#app-menu) {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
}

h1 {
    text-transform: uppercase;
    font-size: 1.25rem;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

table th {
    padding: 0.5rem;
    font-family: var(--font-semibold);
}

table td {
    padding: 0.5rem;
}

a {
    color: var(--dark-color);
}

a.no-line {
    text-decoration: none;
}

img {
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

img.is-light {
    filter: brightness(0) invert();
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance:none;
}

.no-select {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.d-none {
    display: none !important;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0;
    border-radius: 2rem;
    border: none;
    background: none;
    outline: none;
    font-size: 0.85rem;
    font-family: var(--font-medium) !important;
    font-weight: normal !important;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.button.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.button.is-loading {
    pointer-events: initial;
    cursor: wait;
}

.button.is-small {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

.button:not(.no-padding):not(.is-small) {
    padding: 0.85rem 2rem;
}

.button.less-padding {
    padding: 0.85rem 1rem;
}

.button:not(.no-background) {
    background-color: var(--dark-color);
    color: white;
}

.button.is-white {
    background-color: white;
    color: var(--secondary-color);
}

.button.is-light {
    background-color: var(--very-light-color);
    color: var(--secondary-color);
}

.button.is-dark {
    background-color: var(--dark-color);
}

.button.is-primary {
    background-color: var(--primary-color);
}

.button.is-secondary {
    background-color: var(--secondary-color);
}

.button.is-annapurna-light {
    background-color: var(--annapurna-light-color);
}

.button.is-circle {
    width: 2rem;
    height: 2rem;
}

.button.is-circle.is-mid {
    width: 1.75rem;
    height: 1.75rem;
}

.button-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--blue-color);
    font-family: var(--font-regular);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.button-inline:hover {
    text-decoration: underline;
}

.button > img {
    width: 0.75rem;
}

.button > img.icon {
    width: 1rem;
}

.button > img.big-icon {
    width: 1.75rem;
}

.button.no-padding:not(.is-circle) > img:not(.icon):not(.big-icon) {
    width: 1.25rem;
}

.button.has-shadow > {
    position: relative;
}

.button.has-shadow > img.is-shadow {
    position: absolute;
    filter: brightness(0) blur(0.3rem);
    transform: scale(2);
    opacity: 0.75;
}

.remove-app-margin-in-half {
    margin-left: calc(var(--app-margin) / -2);
    margin-right: calc(var(--app-margin) / -2);
}

.remove-app-margin {
    margin-left: calc(-1 * var(--app-margin));
    margin-right: calc(-1 * var(--app-margin));
}

.is-one-line {
    white-space: nowrap;
}

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

.is-medium {
    font-family: var(--font-medium);
}

.is-bold {
    font-family: var(--font-bold);
}

.is-title {
    font-family: var(--font-title);
}

.is-very-big {
    font-size: 1.65rem;
}

.is-big {
    font-size: 1rem !important;
}

.is-small {
    font-size: 0.85rem;
}

.is-very-small {
    font-size: 0.75rem !important;
}

.is-uppercase {
    text-transform: uppercase;
}

.is-text-left {
    text-align: left;
}

.is-text-center {
    text-align: center;
}

.is-text-right {
    text-align: right;
}

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

.is-primary-color {
    color: var(--primary-color);
}

.is-secondary-color {
    color: var(--secondary-color);
}

.is-light-color {
    color: var(--light-color);
}

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

.is-green-color {
    color: var(--green-color);
}

.w-100 {
    width: 100%;
}

.f-1 {
    flex: 1;
}

.f-100 {
    flex: 100% !important;
}

.f-wrap {
    flex-wrap: wrap;
}

.p-absolute {
    position: absolute;
}

.mt-quarter, .my-quarter {
    margin-top: 0.25rem;
}

.mb-quarter, .my-quarter {
    margin-bottom: 0.25rem;
}

.mt-half, .my-half {
    margin-top: 0.5rem;
}

.mb-half, .my-half {
    margin-bottom: 0.5rem;
}

.mt-1, .my-1 {
    margin-top: 1rem;
}

.mb-1, .my-1 {
    margin-bottom: 1rem;
}

.mt-2, .my-2 {
    margin-top: 2rem;
}

.mb-2, .my-2 {
    margin-bottom: 2rem;
}

.ml-auto, .mx-auto {
    margin-left: auto;
}

.mr-auto, .mx-auto {
    margin-right: auto;
}

.l-1-quarter {
    line-height: 1.25;
}

.br-1 {
    border-radius: 1rem !important;
}

.br-2 {
    border-radius: 2rem !important;
}

.g-quarter {
    gap: 0.25rem;
}

.g-half {
    gap: 0.5rem !important;
}

.g-1 {
    gap: 1rem;
}

.d-flex {
    display: flex;
}

.d-flex-column {
    display: flex;
    flex-direction: column;
}

.align-center, .f-center {
    align-items: center;
}

.justify-center, .f-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.alertify .ajs-dimmer, .alertify .ajs-modal {
    z-index: 100001;
}

.alertify .ajs-dialog {
    border-radius: 1.75rem;
}

.alertify .ajs-header {
    border-radius: 1.75rem 1.75rem 0 0;
    color: var(--secondary-color);
}

.alertify .ajs-body .ajs-content {
    color: var(--dark-color);
}

.alertify .ajs-footer {
    border-radius: 0 0 1.75rem 1.75rem;
}

.help-info {
    margin-left: 0.25rem;
    width: 20px;
    vertical-align: middle;
}

.tippy-tooltip {
    border-radius: 1rem;
}

.tippy-tooltip.info-theme {
    background-color: var(--very-light-color);
    font-size: 0.75rem;
    color: var(--dark-color);
}

.tippy-popper[x-placement^=top] > .tippy-tooltip.info-theme > .tippy-arrow {
    border-top-color: var(--very-light-color);
}

.tippy-popper[x-placement^=bottom] > .tippy-tooltip.info-theme > .tippy-arrow {
    border-bottom-color: var(--very-light-color);
}

.tippy-popper[x-placement^=left] > .tippy-tooltip.info-theme > .tippy-arrow {
    border-left-color: var(--very-light-color);
}

.tippy-popper[x-placement^=right] > .tippy-tooltip.info-theme > .tippy-arrow {
    border-right-color: var(--very-light-color);
}

.tippy-tooltip.dark-theme {
    background-color: var(--dark-color);
}

.tippy-popper[x-placement^=top] > .tippy-tooltip.dark-theme > .tippy-arrow {
    border-top-color: var(--dark-color);
}

.tippy-popper[x-placement^=bottom] > .tippy-tooltip.dark-theme > .tippy-arrow {
    border-bottom-color: var(--dark-color);
}

.tippy-popper[x-placement^=left] > .tippy-tooltip.dark-theme > .tippy-arrow {
    border-left-color: var(--dark-color);
}

.tippy-popper[x-placement^=right] > .tippy-tooltip.dark-theme > .tippy-arrow {
    border-right-color: var(--dark-color);
}

#app-header > nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--app-margin);
    min-height: 72px;
}

#app-header > nav.has-title {
    padding-top: 1.5rem;
}

#app-header > nav > span {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
}

#app-header > nav > .last-span {
    text-align: right;
}

#app-header > nav > h1 {
    align-self: baseline;
    margin: 0 1rem;
    text-align: center;
}

#app-header > nav > a > img {
    height: 42px;
}

#app-header > nav.has-title:not(.need-align-baseline) > .first-span {
    margin-top: -1rem;
}

#app-header > nav.need-align-baseline > .last-span {
    align-self: baseline;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

#app-header-logo {
    text-align: center;
}

#app-header-logo > img {
    max-width: 100%;
    height: 48px;
    object-fit: contain;
}

#app-menu {
    position: absolute;
    top: 0;
    left: -100vw;
    min-width: min(250px, 90vw);
    max-width: 90vw;
    min-height: 100%;
    padding: 32px var(--app-margin);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-radius: 0 3rem 3rem 0;
    background-color: var(--annapurna-light-color);
    color: white;
    z-index: 999;
    transition: left ease-out 0.4s;
}

body.is-app-menu-open #app-menu {
    left: 0;
}

body:not(.is-app-menu-open) #app-menu {
    max-height: 100vh;
    overflow: hidden;
}

#app-menu > #close-app-menu {
    align-self: flex-start;
}

#app-menu > #close-app-menu > img {
    width: 1.75rem;
}

#app-menu-nav {
    flex: 1;
    margin: 0 calc(-1 * var(--app-margin));
}

#app-menu-nav > ul > li:last-child {
    margin-top: 2rem;
}

#app-menu-nav > ul > li {
    margin: 0 var(--app-margin);
}

#app-menu-nav > ul > li > a {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    color: white;
    font-size: 0.85rem;
}

#app-menu-nav > ul > li > a > img {
    width: 16px;
}

#app-menu-nav > ul > li > a > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#app-menu-nav > ul > li:not(.is-active) > a:not(:hover) {
    text-decoration: none;
}

#app-menu-nav > ul > li.is-active > a {
    border-radius: 2rem;
    background-color: var(--dark-color);
    text-decoration: none;
}

#app-menu-nav > ul > li > ul {
    margin: 0 0 0.75rem 1.35rem;
    padding-left: 0.25rem;
    border-left: solid 2px var(--light-color);
}

#app-menu-nav > ul > li.is-active > ul {
    margin-top: 0.75rem;
}

#app-menu-nav > ul > li > ul > li > a {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.25rem;
    color: white;
    font-size: 0.85rem;
}

#app-menu-nav > ul > li > ul > li.is-active > a, #app-menu-nav > ul > li > ul > li > a:not(:hover) {
    text-decoration: none;
}

#app-menu-nav > ul > li > ul > li > a > img {
    width: 24px;
}

#app-menu-nav > ul > li > ul > li.is-active > a > span {
    font-family: var(--font-medium);
}

#app-menu > .footer-logo {
    max-width: 100%;
    height: 36px;
    object-fit: contain;
}

#app-content {
    flex: 1;
    margin: 1rem var(--app-margin);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#top-account-avatar {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
}

.app-logo {
    text-align: center;
}

.app-logo > img {
    width: 48px;
}

.page-description {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--primary-color);
}

.page-description > p strong {
    font-family: var(--font-medium);
}

.page-cover {
    display: block;
    text-align: center;
}

.page-cover > img {
    width: auto;
    height: auto;
    max-width: 350px;
    max-height: 250px;
    object-fit: contain;
}

.page-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.page-actions.is-center {
    margin-left: auto;
    margin-right: auto;
}

.page-actions > .page-action-button {
    width: 100%;
}

.page-actions > .page-action-separator {
    font-size: 0.85rem;
    color: var(--light-color);
}

.app-message {
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--very-light-color);
    color: var(--secondary-color);
    font-family: var(--font-medium);
}

.app-message.is-error {
    background-color: var(--light-red-color);
    color: var(--red-color);
}

.app-message.is-success {
    background-color: var(--light-green-color);
    color: var(--green-color);
}

.app-message.is-success a {
    color: var(--green-color);
    font-family: var(--font-regular);
}

.app-message > ul {
    padding-left: 1rem;
    list-style-type: initial;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form .field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form .field-group > .field-group-label {
    font-size: 0.75rem;
}

.form .field-group > .field-group-label:not(.is-text-center) {
    margin-left: 0.5rem;
}

.form .field-group > .field-group-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form .field-group > .field-group-list > .form-field {
    flex: 1;
}

.form .form-field-delete {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.form .form-field-delete > .form-field {
    flex: 1;
}

.form .form-field-delete > .field-delete > .icon {
    width: 1.25rem;
}

.form .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form .form-field > .field-label {
    font-size: 0.75rem;
}

.form .form-field > .field-label:not(.is-text-center) {
    margin-left: 0.5rem;
}

.form .form-field > .field-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0.75rem;
    border-radius: 1.5rem;
}

.form .form-field.is-small > .field-input-wrapper {
    padding: 0.5rem;
}

.form .form-field:not(.no-background) > .field-input-wrapper {
    background-color: white;
}

.form .form-field.light-backround > .field-input-wrapper {
    background-color: var(--very-light-color);
}

.form .form-field > .field-input-wrapper > .field-icon {
    align-self: stretch;
    width: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form .form-field > .field-input-wrapper > .field-icon > img {
    width: 100%;
}

.form .form-field > .field-input-wrapper > .field-input {
    flex: 1;
    width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font-regular);
    color: var(--dark-color);
    font-size: 0.9rem;
}

.form .form-field > .field-input-wrapper > .field-input::placeholder {
    color: var(--secondary-color);
    opacity: 1;
}

.form .form-field > .field-input-wrapper > .field-input::-ms-input-placeholder {
    color: var(--secondary-color);
}

.form .form-field > .field-input-wrapper > .field-input:disabled {
    color: var(--secondary-color);
    opacity: 1;
}

.form .form-field > .field-input-wrapper > .field-input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    opacity: 0;
    width: 0.85rem;
    height: 0.85rem;
}

.form .form-field > .field-input-wrapper > .field-input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0.65rem;
}

.form .form-field > .field-info {
    font-size: 0.85rem;
}

.form .field-remove-file-input:checked + .remove-value-button {
    display: none;
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.65rem 0.85rem;
    border-radius: 2rem;
    background-color: white;
}

.search-field.is-dark {
    background-color: var(--dark-color);
}

.search-field > .field-icon {
    width: 1rem;
}

.search-field > .field-input {
    border: none;
    background: none;
    outline: none;
    font-family: var(--font-regular);
    font-size: 0.9rem;
}

.search-field > .field-input::placeholder {
    color: var(--secondary-color);
    opacity: 1;
}

.search-field > .field-input::-ms-input-placeholder {
    color: var(--secondary-color);
}

.search-field.is-dark > .field-input {
    color: white;
}

.search-field:not(.no-value) {
    gap: 0.5rem;
}

.search-field:not(.no-value) > .field-input {
    flex: 1;
}

.search-field.no-value > .field-input {
    text-align: center;
}

.search-field + .is-small {
    font-size: 0.75rem;
    color: var(--secondary-color);
}

.autocomplete-input {
    width: 0;
    opacity: 0;
}

.autocomplete-new-value {
    padding: 0.5rem;
}

.autoComplete_wrapper > .autocomplete-input {
    opacity: 1;
}

.autoComplete_wrapper > input {
    color: var(--dark-color) !important;
    border-color: var(--primary-color) !important;
}

.autoComplete_wrapper > input::placeholder {
    color: var(--primary-color) !important;
}

.autoComplete_wrapper > input:hover::placeholder {
    color: var(--primary-color) !important;
}

.autoComplete_wrapper > input:focus::placeholder {
    color: var(--primary-color) !important;
}

.autoComplete_wrapper > input:hover {
    border-color: var(--primary-color) !important;
}

.autoComplete_wrapper > input:focus {
    color: var(--dark-color) !important;
    border-color: var(--primary-color) !important;
}

.autoComplete_wrapper > ul > li mark {
    color: var(--primary-color) !important;
}

.autoComplete_wrapper > ul > li:hover {
    background-color: var(--annapurna-light-color) !important;
    color: white !important;
}

.autoComplete_wrapper.is-open {
    flex: 1;
    padding: 0 0.25rem;
}

.autoComplete_wrapper.is-open > input {
    width: 100%;
    border-radius: 1rem;
}

.autoComplete_wrapper.is-open + select {
    display: none;
}

.autoComplete_wrapper:not(.is-open) > input {
    width: 0;
    padding-left: 1.25rem;
}

.autoComplete_list > li > .button {
    white-space: initial;
}

.avatar-field {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-big {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 100%;
    background-color: var(--very-light-color);
}

.avatar-big.br-1 ~ .remove-value-button {
    top: -0.75rem;
}

.avatar-mid {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 100%;
}

.avatar-field > label {
    position: absolute;
    bottom: -1rem;
}

.avatar-field > .field-file-input:not(.no-value) + label > .is-add {
    display: none;
}

.avatar-field > .field-file-input.no-value + label > .is-edit {
    display: none;
}

.avatar-field > .remove-value-button {
    position: absolute;
    top: 0;
    margin-left: 150px;
}

.box {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem calc(var(--app-margin) / 2);
    border-radius: 2rem;
    background-color: var(--dark-color);
    color: white;
}

.box.is-light {
    background-color: var(--light-color);
    color: var(--dark-color);
}

.box > .box-title {
    text-transform: uppercase;
    font-size: 1.25rem;
    text-align: center;
}

.box > .box-action {
    position: absolute;
    top: 0.75rem;
    right: calc(var(--app-margin) * 0.75);
}

.list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.list > .list-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 1rem;
    text-decoration: none;
    background-color: white;
    color: var(--dark-color);
}

.list > .list-item > .list-item-preview {
    width: 90px;
    height: 90px;
    border-radius: 0.5rem;
    object-fit: cover;
    background-color: var(--very-light-color);
}

.list > .list-item > .list-item-preview.is-small {
    width: 72px;
    height: 72px;
}

.list > .list-item > .list-item-preview.is-contain {
    object-fit: contain;
    background: none;
}

.list > .list-item > .list-item-body {
    flex: 0%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.list > .list-item > .list-item-body > .list-item-title {
    font-size: 1rem;
}

.list > .list-item > .list-item-body > .list-item-info {
    font-size: 0.85rem;
    line-height: 1.1rem;
}

.list > .list-item > .list-item-body > .list-item-info:not(:empty) {
    flex: 1;
}

.list-2 {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.list-2 > .list-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-decoration: none;
    color: var(--dark-color);
}

.list-2 > .list-item > .list-item-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

.list-2 > .list-item > .list-item-header > .list-item-title {
    font-size: 1rem;
}

.list-2 > .list-item > .list-item-body {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: white;
}

.list-2 > .list-item > .list-item-body > .list-item-preview {
    width: 90px;
    height: 90px;
    border-radius: 0.5rem;
    object-fit: cover;
    background-color: var(--very-light-color);
}

.list-2 > .list-item > .list-item-body > .list-item-preview.is-contain {
    object-fit: contain;
    background: none;
}

.list-2 > .list-item > .list-item-body > .list-item-info {
    flex: 0%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.1rem;
}

.link-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.link-list > .link-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0 0.25rem;
    font-family: var(--font-medium);
    font-size: 0.85rem;
    color: var(--light-color);
    text-transform: uppercase;
    text-align: center;
    align-self: center;
}

.link-list > .link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: white;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--dark-color);
}

.link-list .link-icon {
    height: 16px;
}

.status-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-list > .status > .status-key {
    color: var(--secondary-color);
}

.status-list > .status > .status-key::after {
    content: ' :';
}

.action-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.action-list > .action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 0.5rem;
    border: solid 2px var(--light-color);
    border-radius: 0.75rem;
    color: var(--secondary-color);
    font-family: var(--font-medium);
    font-size: 0.85rem;
    text-decoration: none;
}

.action-list > .action:hover {
    filter: brightness(0);
}

.action-list > .action > .action-icon {
    width: 24px;
}

#app-footer-logo {
    padding: 2rem var(--app-margin);
    text-align: center;
}

#app-footer-logo > img {
    max-width: 100%;
    height: 36px;
    object-fit: contain;
}

@media screen and (min-width: 520px) {
    :root {
        --app-margin: 1rem;
    }

    #app-menu {
        --app-margin: 2rem;
    }

    .list, .list-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .form .field-group > .field-group-list {
        flex-direction: row;
        align-items: flex-end;
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 575px) {
    :root {
        --app-margin: 2rem;
    }

    body {
        margin: auto;
        max-width: 650px;
    }

    body.is-app-menu-open #app-menu {
        left: -101vw;
        padding-left: 101vw;
        max-width: calc(101vw + 90vw);
    }

    .tippy-popper {
        left: calc((650px - 100vw + var(--app-margin) / 2) / 2) !important;
    }
}

@media screen and (min-width: 1024px) {
    body {
        --body-padding: calc((100vw - 650px) / 2 + 60px);
        padding-left: var(--body-padding);
    }

    body.is-app-menu-open #app-menu {
        width: unset;
    }

    #app-menu {
        left: calc((650px - 100vw + var(--app-margin) / 2) / 2 - 0.5rem + var(--body-padding) / 2);
        width: 300px;
        border-radius: 0;
        transition: none;
    }

    #open-app-menu {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    body {
        --body-padding: calc((100vw - 650px) / 2);
    }
}

@media screen and (min-width: 1400px) {
    body {
        --body-padding: calc((100vw - 650px) / 3);
    }

    #app-menu {
        width: 320px;
    }
}

@media screen and (min-width: 1650px) {
    body {
        --body-padding: calc((100vw - 650px) / 4);
    }
}

@media screen and (min-width: 1800px) {
    body {
        --body-padding: 0px;
    }
}