/* ACCOUNT */
.account-info {
    padding: 1rem;
    margin: 0.4rem 0;
    flex: 1;
    border-style: solid;
    border-width: 0 0 0 4px;
    border-color: #00aaee;
    min-width: 25.6rem;
}

.account-label {
    color: var(--field-label);
    font-size: var(--field-font-size);
    font-weight: var(--field-label-font-weight);
    white-space: nowrap;
}

.account-value {
    font-size: 1.4rem;
    white-space: nowrap;
}

.account-plan {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: var(--panel-padding);
    margin: 1rem;
    font-size: 2.4rem;
    border-style: solid;
    border-width: 2px;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-4);
    cursor: pointer;
    width: 20rem;
}

.account-plan:hover {
    transform: perspective(30rem) rotateX(15deg) translate3d(0, -1rem, 1rem);
    transition: all 0.1s;
    border-width: 1rem;
}

.account-plan-pack {
    font-size: 1.8rem;
}

.account-plan-name {
    font-size: 3.2rem;
    font-weight: bold;
    margin: 0 0 2rem 0;
}

.account-plan-users {
    font-size: 1.8rem;
    font-weight: bold;
}

.account-plan-apps {
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

.account-plan-price {
    font-size: 2.4rem;
    font-weight: bold;
}

.account-plan-reduction {
    font-size: 1.4rem;
    font-weight: bold;
}

.account-plan-unit {
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 2rem;
}

.account-status {
    display: flex;
    flex-flow: row;
    font-size: 3.2rem;
}

.account-status-ok {
    color: #88cc00;
    margin: 0 2rem 0 1rem;
}

.account-status-ko {
    color: #ed3757;
    margin: 0 2rem 0 1rem;
}

.account-other-plans {
    text-align: center;
}

.account-invoice {
    margin: 1.6rem;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: var(--body-alt);
}

/* /ACCOUNT */#action-properties .panel-header {
    background-color: #8833EE;
}/* ACTIONS */
.actions-container {
    padding: 0 1rem;
}

.actions-container-empty {
    color: var(--body-alt);
    font-size: 12.8rem;
    text-align: center;
    font-weight: 900;
}

.action-container {
    width: 100%;
    padding: 1rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-2);
    border-radius: 1rem;
    overflow: hidden;
}

.action-icon {
    font-size: 2.4rem;
    margin: 0 1rem;
}

.action-title {
    font-size: 1.8rem;
}

/* /ACTIONS *//* APPLICATION BUILDER */
.application-builder-title {
    margin: 0.5rem 0 0.5rem 1rem;
    font-size: 1.6rem;
    font-weight: bold;
}

#setup-available-models {
    margin: 1rem;
    padding: 1rem;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-2);
}

#setup-selected-models {
    margin: 1rem;
    padding: 1rem;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-2);
}

/* MODEL SELECTOR */
.setup-model-selector {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem;
    margin: 0.3rem;
    width: 30rem;
    height: 4rem;
    text-align: center;
    background: var(--field-background);
    border-radius: var(--panel-border-radius);
    cursor: pointer;
    user-select: none;
}

.setup-model-selector:hover {
    color: #ffffff;
    background: #b5c1d0;
}

.setup-model-selector-selected {
    color: #ffffff;
}

.setup-model-used {
    border: solid 1px #cccccc !important;
}

.setup-model-icon {
    color: inherit;
    font-size: 1.6rem;
    margin: 1.6rem;
}

.setup-model-name {
    font-size: 1.4rem;
    flex: 1;
    text-align: left;
}

.setup-model-toggle {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.2rem;
    line-height: 2.5rem !important;
    border: solid 0px #00aaee;
    border-radius: 3.2rem;
    background: #000000;
    color: #ffffff;
}

.setup-model-toggle:hover {
    transform: rotate(180deg);
    transition: all 0.5s;
}

/* DOMAIN FILTER */
.setup-model-domain-filter {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    height: var(--field-select-value-height);
    margin: var(--field-select-value-margin);
    padding: var(--field-select-value-padding);
    color: #ffffff;
    background: #00aaee;
    border: var(--field-select-value-border);
    border-radius: var(--field-select-value-border-radius);
    box-shadow: var(--select-value-shadow);
    cursor: pointer;
}

.setup-model-domain-filter:hover {
    background: #000000;
}

.setup-model-templates-domains {
    padding: 1rem;
}

/* /APPLICATION BUILDER *//* APPLICATION NAVIGATION */
#application-navigation {
    flex: 1;
    background-color: var(--body-background);
    border-style: solid;
    border-color: var(--panel-border);
    border-width: 0 2px 0 0;
    box-shadow: 0 0 -1rem #cccccc;
}

/* MODEL */
.navigation-model-container {
    background: var(--menu-background);
    padding: 1rem;
    margin: 1rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--panel-border);
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-2);
}

.navigation-model {
    display: flex;
    flex-flow: row;
    align-items: center;
    cursor: pointer;
}

.navigation-model-icon {
    color: #ffffff;
    font-size: 1.6rem;
    width: 3.6rem;
    padding: 1rem;
    border-radius: var(--menu-item-border-radius);
    text-align: center;
}

.navigation-model-name {
    font-size: 1.6rem;
    font-weight: bold;
    color: #667788;
    margin-left: 1rem;
}

/* MODEL MENU */
.navigation-model-menu {
    color: transparent;
    cursor: pointer;
    margin-left: 0.8rem;
}

.navigation-model-menu:hover {
    color: #00aaee !important;
    transition: all 0.5s;
}

.navigation-model:hover .navigation-model-menu {
    color: inherit;
}

.navigation-model:hover .navigation-model-icon {
    box-shadow: var(--shadow-4);
    transition: all 0.1s;
}

/* CONTAINER OF VIEWS */
.navigation-views-container {
    margin-left: 4rem;
}

/* A SINGLE VIEW */
.navigation-view-container {
    color: var(--menu-item);
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 1rem;
    border-radius: var(--menu-item-border-radius);
    cursor: pointer;
}

.navigation-view-container:hover {
    color: var(--menu-item-hover);
    background: var(--menu-item-background-hover);
}

.navigation-view-icon {
    color: inherit;
    font-size: 1.6rem;
    margin-right: 1rem;
}

.navigation-view-icon-private {
    color: var(--orange);
    font-size: 1rem;
    margin-left: 0.5rem;
}

.navigation-view-name {
    color: inherit;
    border-radius: 0.5rem;
    margin-right: 0.5rem;
}

.navigation-view-selected {
    color: var(--menu-item-selected);
    background: var(--menu-item-background-selected);
    transition: all 0.5s;
}

/* VIEW MENU */
.navigation-view-menu {
    color: transparent;
}

.navigation-view-container:hover .navigation-view-menu {
    color: inherit;
}

.navigation-view-menu:hover {
    color: #00aaee !important;
    transition: all 0.5s;
}

/* NAVIGATION DRAG'N DROP GHOST */
.model-drag-n-drop-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--body);
    font-size: 2rem;
    border: dotted 3px var(--body);
    border-radius: 1.6rem;
    padding: 1rem;
    margin: 1rem;
}

.view-drag-n-drop-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--body);
    font-size: 2rem;
    border: dotted 2px var(--body);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* /APPLICATION NAVIGATION *//* APPLICATION TABS */
#tabs-container {
    user-select: none;
}

/* BUTTON TO SWITCH TO NAVIGATOR */
#tabs-switch-view {
    display: inline-block;
    padding-left: 1rem;
}

.tabs-switch-view-icon {
    color: #ffffff;
    font-size: 1.6rem;
    vertical-align: middle;
    cursor: pointer;
}

.tabs-switch-view-icon:hover {
    text-shadow: 0 0 10rem #000000;
    transform: rotate(360deg);
    transition: all 0.5s;
}

/* TABLE SELECTOR */
.tabs-model-selector {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    margin: 0.5rem 0 0 0.5rem;
    padding: 0.8rem 0.8rem 0.8rem 0;
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.1);
    font-size: 1.6rem;
    vertical-align: middle;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--tab-border-radius);
    cursor: pointer;
    user-select: none;
}

.tabs-model-selector:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.tabs-model-selector-selected {
    color: var(--button-text) !important;
    background-color: var(--datacomponent-toolbar-background);
}

.tabs-model-selector-selected:hover {
    background-color: var(--datacomponent-toolbar-background);
}

.tabs-model-selector-separator {
    font-size: 1.1rem;
    vertical-align: middle;
    margin: 0 0.5rem 0 0.5rem;
    color: #cccccc;
}

/* TABLE SELECTOR: ICON */
.tabs-model-selector-icon {
    color: inherit;
    display: inline-block;
    width: 6.4rem !important;
    font-size: 2rem;
    text-align: center;
    vertical-align: middle;
}

/* TABLE SELECTOR: MENU */
.tabs-model-selector-menu {
    float: right;
    font-size: 1.2rem;
    width: 3.2rem;
}

.tabs-model-selector-menu::after {
    float: right;
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* 200 for regular icons, 900 for solid icons */
    content: "\f0d7"; /* fas fa-chevron-down */
}

.tabs-model-selector-menu:hover::after {
    color: #888888;
}

/* TABLE CREATION BUTTON */
.tabs-model-create {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    margin: 0.2rem 0 0 1rem;
    padding: 0.8rem 0.8rem 0.8rem 0;
    color: #dddddd !important;
    font-size: 1.6rem;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

.tabs-model-create:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* /APPLICATION TABS *//* APPLICATION TOP BAR */
.application-top-bar {
    height: 5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #232730;
    color: #ffffff;
    user-select: none;
}

/* APPLICATION MENU */
.application-top-bar-exit {
    padding: 0 1.6rem;
    font-size: 2.4rem;
    cursor: pointer;
}

.application-top-bar-mobile .application-top-bar-exit {
    padding: 0 0.8rem;
}

.application-top-bar-exit:hover {
    color: #aabbcc;
}

.application-top-bar-menu {
    padding: 0 1.6rem;
    font-size: 2.4rem;
    cursor: pointer;
}

.application-top-bar-menu:hover {
    text-shadow: 0 0 0.8rem #ffffff;
}

/* APPLICATION NAME */
.application-top-bar-name {
    flex: 1;
    text-align: center;
    vertical-align: middle;
}

.application-top-bar-icon {
    padding: 0 1.6rem;
    font-size: 3.2rem;
    vertical-align: inherit;
}

.application-top-bar-mobile .application-top-bar-icon {
    font-size: 1.6rem;
    padding: 0 0.4rem 0 0;
}

.application-top-bar-title {
    font-size: 3.2rem;
    vertical-align: inherit;
}

.application-top-bar-mobile .application-top-bar-title {
    font-size: 1.6rem;
    padding: 0 0.4rem 0 0;
}

.application-top-bar-edit {
    padding-left: 1.6rem;
    font-size: 1.6rem;
    vertical-align: inherit;
    cursor: pointer;
}

.application-top-bar-edit:hover {
    color: #aabbcc;
}

.application-top-bar-help {
    padding-left: 1.6rem;
    font-size: 1.6rem;
    vertical-align: inherit;
    cursor: pointer;
}

.application-top-bar-help:hover {
    color: #aabbcc;
}

/* USERNAME */
.application-top-bar-username {
    font-size: 1.8rem;
    padding: 0 1.6rem;
}

/* DIRECTORY */
.application-top-bar-directory {
    font-size: 2.4rem;
    padding: 0 1.6rem;
    cursor: pointer;
}

.application-top-bar-directory:hover {
    text-shadow: 0 0 0.8rem #ffffff;
}

/* MAP */
.application-top-bar-map {
    font-size: 2.4rem;
    padding: 0 1rem 0 0;
    cursor: pointer;
}

.application-top-bar-map:hover {
    text-shadow: 0 0 0.8rem #ffffff;
}

/* AI BOT */
.application-top-bar-bot {
    font-size: 2.4rem;
    padding: 0 1rem 0 0.5rem;
    cursor: pointer;
}

.application-top-bar-bot:hover {
    text-shadow: 0 0 0.8rem #ffffff;
}

/* CLOSE */
.application-top-bar-close {
    font-size: 2.4rem;
    padding: 0 1.6rem;
    cursor: pointer;
}

.application-top-bar-close:hover {
    transform: rotate(90deg);
    transition: all 0.2s;
}

/* /APPLICATION TOP BAR *//* TEMPLATES LIST */
.template-applications-header {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin: 0 3.2rem 3.2rem 3.2rem;
}

.template-applications-header-icon {
    color: var(--body);
    font-size: 2.4rem;
    cursor: pointer;
}

.template-applications-header-icon:hover {
    color: #00aaee;
}

.template-applications-header-title {
    text-align: center;
    font-size: 2.4rem;
    font-weight: bold;
    margin: 2rem 0;
    text-shadow: var(--shadow-4);
}

.template-applications-header-subtitle {
    text-align: center;
    font-size: 1.4rem;
}

#templates-domains {
    margin: 0.5rem;
}

#panel-header-templates-list > .panel-buttons {
    color: var(--body);
}

#templates-domains > .field-select-value {
    box-shadow: none;
    height: unset;
    background-color: #00aaee;
}

/* LIST OF APPLICATIONS */
#templates-content {
    box-shadow: unset;
}

/* APPLICATIONS */
.template-application {
    display: inline-flex;
    flex-direction: column;
    border: solid 1px var(--panel-border);
    border-radius: var(--panel-border-radius);
    margin: 0.5rem;
    box-shadow: var(--shadow-2);
}

.template-application-item {
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    width: 29rem;
    height: 29rem;
    cursor: pointer;
}

.template-application-item:hover {
    box-shadow: var(--shadow-2);
}

/* Application icon */
.template-application-icon {
    display: block;
    padding: 2rem;

    color: #ffffff;
    font-size: 3.2rem;
    text-align: center;
    border-radius: var(--panel-border-radius);
}

/* Application name & description */
.template-application-name {
    display: block;
    padding: 2rem;
    color: #ffffff;
    font-size: 2rem;
    text-align: center;
}

.template-application-language {
    font-size: 1.2rem;
}

.template-application-description {
    display: block;
    padding: 2rem;
    color: #ffffff;
    font-size: 1.4rem;
    overflow: hidden;
    height: 11.6rem;
}

/* Button to explore the template */
.template-explore {
    padding: 0.5rem 1rem;
    margin: 1rem 0.5rem 2rem 0;
}

/* Button to install the template */
.template-install {
    padding: 0.5rem 1rem;
    margin: 1rem 0 2rem 0;
}

/* "More coming soon" text */
.template-application-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    margin: 1rem;
    width: 29rem;
    height: 29rem;
    border-radius: var(--panel-border-radius);
    border-style: dotted;
    border-width: 0.5rem;
    border-color: var(--panel-border);
    font-size: 1.8rem;
    font-weight: bold;
}

/* /TEMPLATES LIST *//* AI ASSISTANT */
.ai-assistant-message {
    display: flex;
    flex-flow: row;
    margin: 2rem 2rem 3rem 2rem;
}

.ai-assistant-initials {
    display: block;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
    color: #ffffff;
    margin-right: 1rem;
    width: 3.2rem;
    min-width: 3.2rem;
    height: 3.2rem;
    min-height: 3.2rem;
    line-height: 3.2rem;
    border-radius: 2rem;
}

.ai-assistant-message-text {
    margin: 1rem 0 0 1rem;
    line-height: 2.4rem;
    cursor: pointer;
    border-radius: var(--panel-border-radius);
    padding: 0 0.5rem;
}

.ai-assistant-message-text:hover {
    background: var(--body-background-alt);
}

.ai-assistant-footer {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 0.8rem;
    padding: 0.8rem;
    height: 5rem;
}

.ai-assistant-code {
    background: var(--body-alt);
    padding: 1rem;
    border-radius: 1rem;
}

.ai-assistant-empty-conversation {
    display: flex;
    flex-flow: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 12.8rem;
}

.ai-assistant-screenshot {
    width: 25rem;
    border: solid 1px var(--blue);
    border-radius: 1rem;
    cursor: pointer;
    padding: 0.3rem;
    box-shadow: var(--shadow-4);
}

/* /AI ASSISTANT *//* DOCUMENTATION */
.documentation {
    padding: 4rem;
}

.documentation a {
    color: var(--body);
    text-decoration: none;
    font-size: 1.6rem;
    line-height: 3.2rem;
}

.documentation a:hover {
    color: var(--blue);
}

.documentation-summary {
    padding: 4rem;
    border: solid 1px var(--body-alt);
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-4);
}

.documentation p, li, th, td, pre {
    font-size: 1.4rem;
}

.documentation p {
    line-height: 2.4rem;
}

.documentation pre {
    background: var(--body-alt);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--body);
}

.documentation h1 {
    color: var(--purple);
    text-shadow: 0 0 3.2rem var(--purple);
}

.documentation h2 {
    color: var(--blue);
    text-shadow: 0 0 3.2rem var(--blue);
}

.documentation h3 {
    color: var(--green);
    text-shadow: 0 0 3.2rem var(--green);
}

.documentation h4 {
    color: var(--orange);
    text-shadow: 0 0 3.2rem var(--orange);
}

.documentation th {
    font-size: 1.6rem;
    color: var(--blue);
    padding: 1rem;
}

.documentation td {
    padding: 0.5rem;
    border-style: solid;
    border-color: var(--body-alt);
    border-width: 0 0 1px 0;
}

.documentation-highlight {
    color: #000000;
    background-color: var(--yellow);
    text-shadow: 0 0 1rem var(--yellow);
    text-decoration: underline;
}

/* /DOCUMENTATION *//* MAP */
.map-application {
    min-width: 25rem;
    vertical-align: top;

    margin: 1rem;
    padding: 1rem;

    background-color: var(--panel-background);
    font-weight: bold;
    box-shadow: var(--shadow-4);

    border-style: solid;
    border-width: 0 0 0 0.8rem;
    border-radius: var(--panel-border-radius);
    cursor: pointer;
}

.map-application-header {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 1rem 0.5rem 2rem 0.5rem;
}

.map-application-icon {
    font-size: 2.4rem;
    margin-right: 1rem;
}

.map-application-name {
    font-size: 1.4rem;
}

.map-view {
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    margin: 0.2rem;
    padding: 0.2rem;
    font-weight: normal;
    color: var(--menu-item);
    background-color: var(--menu-item-background);
    border-style: solid;
    border-width: 1px;
    border-color: var(--button-border);
    border-radius: var(--panel-border-radius);
    cursor: pointer;
}

.map-view:hover {
    border-color: var(--button-border-hover);
    background-color: var(--menu-item-background-hover);
}

/* /MAP *//* REVISION HISTORY */
.revision-history {
    background: var(--body-background-alt);
    padding: var(--panel-padding);
    border-radius: var(--panel-border-radius);
    font-size: 90%;
    margin: 0.5rem;
    line-height: 200%;
    cursor: pointer;
}

.revision-history:hover {
    box-shadow: var(--shadow-4);
}

.revision-history-field {
    font-weight: bold;
}

.revision-history-old-value {
    color: black;
    background: #ffcccc;
    text-decoration: line-through;
    border-radius: var(--panel-border-radius);
    padding: 0.2rem;
}

.revision-history-new-value {
    color: black;
    background: #e4ffe4;
    border-radius: var(--panel-border-radius);
    padding: 0.2rem;
}

/* /REVISION HISTORY *//* TUTORIAL VIDEO */
.tutorial-video {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 0.8rem 0;
    padding: 0.8rem;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-2);
    cursor: pointer;
}

.tutorial-video:hover {
    box-shadow: none;
    background: var(--body-background-alt);
}

.tutorial-video-image {
    width: 17.8rem;
    height: 10rem;
    border-radius: var(--panel-border-radius);
    border: solid 2px var(--body);
}

.tutorial-video-title {
    font-size: 1.6rem;
    font-weight: 600;
    padding: 1rem;
}

/* /TUTORIAL VIDEO *//* DIRECTORY */
#directory-item-list {
    height: calc(100% - 6rem);
    border-radius: var(--panel-border-radius);
}

.directory-toolbar {
    margin-bottom: 1rem;
}

.directory-item {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 0.8rem;
    padding: 2rem;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-1);
    transition: all 0.1s;
}

.directory-item-clickable {
    border: solid 1px transparent;
}

.directory-item-clickable:hover {
    cursor: pointer;
    border-color: var(--blue);
}

.directory-item-compact {
    margin: 0.2rem 0.8rem;
    padding: 0.6rem 1.6rem;
}

.directory-item-initials {
    display: block;
    font-weight: 600;
    font-size: 1.4rem;
    text-align: center;
    
    color: #ffffff;
    margin-right: 1rem;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    border-radius: 2rem;
}

.directory-item-compact .directory-item-initials {
    font-size: 1rem;
    width: 3.2rem;
    height: 3.2rem;
    line-height: 3.2rem;
}

.directory-item-icon {
    font-size: 1.8rem;
    text-align: center;
    
    color: #ffffff;
    margin-right: 1rem;
    width: 4rem;
    height: 4rem;
    line-height: 4rem !important;
    border-radius: 2rem;
}

.directory-item-compact .directory-item-icon {
    font-size: 1.4rem;
    width: 3.2rem;
    height: 3.2rem;
    line-height: 3.2rem !important;
}

.directory-item-icon-owner {
    font-size: 1.2rem;
    margin-left: 1rem;
}

.directory-item-infos {
    display: flex;
    flex-flow: column;
    flex: 1;
}

.directory-item-title {
    font-size: 1.8rem;
    font-weight: 600;
}

.directory-item-compact .directory-item-title {
    font-size: 1.4rem;
}

.directory-item-subtitle {
    font-size: 1.4rem;
    color: #888888;
}

.directory-item-compact .directory-item-subtitle {
    font-size: 1.2rem;
}

.directory-item-edit {
    font-size: 1.6rem;
    margin: 0 0 0 1rem;
    line-height: 1.6rem !important;
    cursor: pointer;
}

.directory-item-edit:hover {
    color: #00aaee;
}

.directory-item-compact .directory-item-edit {
    font-size: 1.2rem !important;
}

.directory-item-delete {
    font-size: 1.4rem;
    color: #888888;
    cursor: pointer;
}

.directory-item-delete:hover {
    font-size: 1.4rem;
    color: var(--red);
}

/* GROUP */
.directory-group-members {
    font-size: 1.6rem;
    font-weight: 600;
}

.directory-group .field-select-value {
    color: var(--field);
    background-color: var(--body-background);
    padding: 2.8rem 1.6rem;
}

.directory-resend-invitation {
    padding: 0.5rem 1rem;
    margin-right: 2rem;
}

/* COLLABORATOR */
#directory-collaborator-list [active="true"]{
	border: 1px solid #00aaee;
}

#directory-collaborator-list .directory-item:not([active="true"]){
	cursor: pointer;
}

.directory-accept-invitation {
	padding: 0.5rem 1rem;
	margin-right: 2rem;
}

/* /DIRECTORY *//* FORM BUILDER */
.form-builder-top-bar {
    height: 5rem;
}

.form-builder-top-bar-button {
    box-shadow: var(--shadow-1);
    height: 3.2rem;
    margin: 0.4rem;
}

#form-builder {
    display: inline-flex;
}

#form-builder .panel-button-expand-collapse {
    display: none;
}

#form-builder .panel-buttons:hover {
    transition: all 0.5s;
    transform: rotate(360deg);
}

.panel-subtitle {
    color: var(--field-label);
    font-weight: var(--field-label-font-weight);
    border-style: dotted;
    border-width: 0 0 1px 0;
    border-color: var(--panel-border);
    margin: 1rem 0 !important;
    padding: 0;
}

.form-drag-n-drop-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--body);
    font-size: 2rem;
    border: solid 5px var(--body);
    border-radius: 0.5rem;
}

/* FORM ITEM */
.form-item {
    position: relative;
    cursor: pointer;
}

.form-item > * {
    cursor: pointer;
}

.form-item-mouseover {
    box-shadow: var(--shadow-1);
}

.form-item-selected {
    box-shadow: 0 0 0.5rem #000000;
    border-radius: 0.5rem;
}

/* QUICK FORM EDIT */
.form-quick-edit-help {
    box-shadow: var(--shadow-2);
    border-radius: var(--panel-border-radius);
    padding: var(--panel-padding);
    margin: var(--panel-padding);
}

/* AUDITED FIELDS */
.form-item-audit {
    padding: 1rem;
    cursor: pointer;
    border-style: dotted;
    border-width: 0 0 1px 0;
    border-color: #cccccc;
}

.form-item-audit:hover {
    background-color: var(--body-background-alt);
}

.form-item-audit-label {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.form-item-audit-type {
    color: var(--blue);
}

.form-item-audit-formula {
    font-family: var(--font-family-monospace);
}
/* /FORM BUILDER *//* HOME NAVIGATION */
#home-navigation {
    padding: 1rem;
    user-select: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: var(--panel-border);
}

.home-navigation-title {
    margin: 2rem 3.2rem 2rem 2rem;
    font-size: 1.8rem;
    color: var(--body);
    font-weight: bold;
}

.home-navigation-item {
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 1rem 1.6rem 1rem 0;
    color: var(--menu-item);
    border-radius: var(--menu-item-border-radius);
    cursor: pointer;
    transition: padding 0.2s;
}

.home-navigation-item:hover {
    color: var(--menu-item-hover);
    background: var(--menu-item-background-hover);
    transition: var(--transition-fast);
}

.home-navigation-item:hover .home-navigation-item-icon {
    color: var(--menu-item-hover);
}

.home-navigation-item-icon {
    color: inherit;
    display: inline-block;
    width: 6.4rem;

    font-size: 3.2rem;
    text-align: center;
    vertical-align: middle;
}

/* WORKSPACE MENU */
.home-navigation-item-menu {
    flex: 1;
    display: flex;
    flex-flow: row;
}

.home-navigation-menu {
    font-size: 1.6rem;
    color: transparent;
    cursor: pointer;
    margin-left: 1rem;
}

.home-navigation-menu:hover {
    color: var(--menu-item-hover) !important;
    transition: all 0.5s;
}

.home-navigation-item:hover .home-navigation-menu {
    color: inherit;
}

.home-navigation-item:hover .home-navigation-menu-icon {
    box-shadow: var(--shadow-4);
    transition: all 0.1s;
}

.home-navigation-close-button {
    font-size: 1.6rem;
    margin-right: 1rem;
    cursor: pointer;
}

.home-navigation-close-button:hover {
    color: var(--menu-item-hover);
}

.home-navigation-split {
    margin: 1rem;
    border-style: solid;
    border-color: var(--menu-separator);
    border-width: 1px;
}


/* /HOME NAVIGATION *//* HOME TOP BAR */
.workspace-top-bar {
    height: 5rem;

    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--body);

    border-style: solid;
    border-color: var(--panel-border);
    border-width: 0 0 1px 0;
    box-shadow: var(--shadow-2);
    user-select: none;
}

.workspace-top-bar-help {
    padding-left: 0.5rem;
    font-size: 1.6rem;
    vertical-align: inherit;
    cursor: pointer;
}

/* HELP */
.workspace-top-bar-help-text > p, li  {
    font-size: 1.3rem;
    line-height: 1.6;
}

/* WORKSPACE MENU */
.workspace-top-bar-menu {
    margin: 0 2.4rem 0 2rem;
    font-size: 2.4rem;
    cursor: pointer;
}

.workspace-top-bar-menu:hover {
    color: var(--body-alt);
}

/* WORKSPACE LOGO */
.workspace-top-bar-logo {
    cursor: pointer;
    padding: 0 1.6rem 0 1.6rem;
    width: 6.4rem;
}

/* WORKSPACE TITLE */
.workspace-top-bar-title {
    flex: 1;
    font-size: 2.4rem;
    vertical-align: middle;
    cursor: pointer;
}

/* OFFLINE MESSAGE */
.workspace-top-bar-offline {
    font-size: 1.3rem;
    color: var(--blue);
    margin-right: 2rem;
    cursor: pointer;
}

/* USERNAME */
.workspace-top-bar-username {
    font-size: 1.8rem;
    padding: 0 1.6rem 0 1.6rem;
}

/* DIRECTORY */
.workspace-top-bar-directory {
    font-size: 2.4rem;
    padding: 0 1.6rem;
    cursor: pointer;
}

@media (pointer: coarse) and (hover: none) {
    .workspace-top-bar-directory {
        padding: 0;
    } 
}

.workspace-top-bar-directory:hover {
    color: var(--body-alt);
}

/* MAP */
.workspace-top-bar-map {
    font-size: 2.4rem;
    padding: 0 1rem 0 0;
    cursor: pointer;
}

.workspace-top-bar-map:hover {
    color: var(--body-alt);
}

/* AI BOT */
.workspace-top-bar-bot {
    font-size: 2.4rem;
    padding: 0 1rem 0 0.5rem;
    cursor: pointer;
}

.workspace-top-bar-bot:hover {
    color: var(--body-alt);
}

/* /HOME TOP BAR *//* WORKSPACE WELCOME MESSAGES */
.workspace-welcome-message h1 {
    font-size: 3rem;
    line-height: 6rem;
    color: var(--blue);
    margin: 0;
}

.workspace-welcome-message p {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 2.4rem;
    color: var(--body);
    margin-top: 1rem;
}

.workspace-welcome-message-img-container {
    display: flex;
    justify-content: center;
    background: var(--body-background-alt);
    border-radius: 1rem;
    margin-top: 1rem;
    padding: 4rem;
}

.workspace-welcome-message img {
    width: 670px;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: var(--shadow-4);
}

/* /WORKSPACE WELCOME MESSAGES *//* WORKSPACES */
.workspaces {
    background: var(--body-background-alt);
}

.workspace-welcome {
    display: flex;
    flex-flow: column;
    font-size: 1.6rem;
    line-height: 3.2rem;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.workspace-welcome-icon {
    font-size: 6.4rem;
    margin: 3.2rem;
}

.workspace {
    margin: 1.6rem;
    padding: 1.6rem 0.6rem 0.6rem 0.6rem;
    background: var(--body-background);
    border-color: var(--panel-border);
    border-style: none;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-2);
    user-select: none;
}

.workspace-highlight {
    background-color: var(--blue);
}

.workspace-mobile {
    margin: 0;
    padding: 1.6rem 0.6rem 0.6rem 0.6rem;
    background: var(--body-background);
    border-style: none;
    border-radius: 0;
    user-select: none;
    text-align: center;
    box-shadow: none;
}

/* Workspace name */
.workspace-name {
    display: flex;
    flex-flow: row;
    padding: 1rem;
    margin: 0 1rem 0.8rem 1rem;
    vertical-align: middle;
    font-size: 1.8rem;
    font-weight: bold;
    user-select: none;
    border-radius: var(--panel-border-radius);
}

/* Workspace menu */
.workspace-menu {
    margin-left: 1rem;
    /* color: var(--menu-item); */
    font-size: 1.6rem;
    cursor: pointer;
    transition: color 0.5s;
}

.workspace-menu:hover {
    color: var(--menu-item-hover);
}

/* Workspace icon */
.workspace-icon {
    font-size: 3.2rem;
}

/* Workspace share button */
.workspace-share-button {
    float: right;
    font-size: 1rem;
    min-height: 1.8rem !important;
    border-radius: 3.2rem;
    padding: 0 1rem;
    margin-right: 1.6rem;
}

.workspace-dragover {
    background-image: linear-gradient(45deg, #ffffff 40%, #f5f5f5 40%, #f5f5f5 50%, #ffffff 50%, #ffffff 90%, #f5f5f5 90%, #f5f5f5 100%);
    background-size: 3rem 3rem;
}

/* APPLICATIONS */
.application-item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    width: 29rem;
    height: 29rem;
    border-radius: var(--panel-border-radius);
    border-style: solid;
    border-width: 2px;
    border-color: var(--panel-border);
    box-shadow: var(--shadow-4);
    cursor: pointer;
    overflow: hidden;
}

.application-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--image-url);
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

.application-item-mobile {
    width: 25rem !important;
    height: 25rem !important;
}

.application-item:hover {
    box-shadow: var(--shadow-2);
}

.application-item-disabled {
    border-style: dashed;
}

.application-item-highlight {
    background: var(--blue) !important;
}

/* Application menu */
.application-menu {
    float: right;
    color: #ffffff;
    font-size: 1.6rem;
    padding: 1rem 1rem 0 0;
    transition: color 0.5s;
}

.application-menu:hover {
    color: #000000;
}

/* Application icon */
.application-icon {
    display: block;
    padding: 2rem;
    color: #ffffff;
    font-size: 3.2rem;
    text-align: center;
    border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
}

/* Application name & description */
.application-name {
    display: block;
    padding: 2rem;
    color: #ffffff;
    font-size: 2rem;
    text-align: center;
}

.application-description {
    display: block;
    padding: 2rem;
    color: #ffffff;
    font-size: 1.4rem;
}

/* Button to create a new app */
.create-application-item {
    color: var(--body-alt);
    background: transparent;
    border-style: dashed;
    border-color: var(--body-alt);
    box-shadow: none;
    user-select: none;
    transition: var(--transition-medium);
}

.create-application-item:hover {
    color: var(--body);
    border-color: var(--body);
}

/* Animated glow effect when there is no app */
.create-application-item-glow {
    color: #000000;
    transition: all 0.5s;
    box-shadow: 0 0 2rem #000000 !important;
}

/* Button name */
.create-application-name {
    display: block;
    padding: 2rem;
    color: inherit;
    font-size: 2rem;
    text-align: center;
}

/* Button icon */
.create-application-icon {
    display: block;
    padding: 2rem;
    color: inherit;
    font-size: 7.2rem;
    text-align: center;
    border-radius: var(--panel-border-radius);
}

/* App creation window */
.app-creation-button-title {
    text-align: left;
    font-size: 2rem;
    font-weight: bold;
}

.app-creation-button-description {
    text-align: left;
    text-wrap: wrap;
    margin: 1rem 5rem 0 0;
}

/* HELP ARROW */
.help-arrow {
    animation: arrow-animation 0.5s ease-in-out infinite alternate;
}

@keyframes arrow-animation {
    0% {
        transform: translateY(+1rem);
    }

    100% {
        transform: translateY(-1rem);
    }
}

/* /WORKSPACES *//* MODEL FEATURE SELECTION */
.model-features .panel-header {
    height: 5rem;
}

.model-features-list {
    display: inline-flex;
    flex-wrap: wrap;
    width: 68rem;
}

.model-feature {
    margin: 0.5rem;
    padding: 1.6rem;
    min-width: 33rem;
    max-width: 33rem;
    flex: 1;
    border-color: var(--panel-border);
    border-style: solid;
    border-width: 1px;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-1);
    cursor: pointer;
}

.model-feature:hover {
    box-shadow: var(--shadow-4);
}

.model-feature-icon {
    font-size: 4rem;
}

.model-feature-switch .field-checkbox-icon {
    font-size: 3.2rem;
}

.model-feature-title {
    font-size: 2rem;
    margin-top: 1rem;
    padding: 0.5rem;
}

.model-feature-description {
    font-size: 1.3rem;
    line-height: 2rem;
    padding: 0.5rem;
}

/* /MODEL FEATURE SELECTION *//* FORMULAE */
.formula-container {
    background-color: #272822;
    margin: 0.5rem;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-y: auto;
}

.formula-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: #00aaee;
    margin: 1rem 0 0 0.5rem;
}

.formula-field {
    font-family: var(--font-family-monospace);
    color: #ffffff;
    border-radius: 0.3rem;
    padding: 0.3rem;
    cursor: pointer;
}

.formula-field:hover {
    color: #ffff00;
    background-color: #000000;
}

.formula-function {
    font-family: var(--font-family-monospace);
    color: #ffffff;
    border-radius: 0.3rem;
    padding: 0.3rem;
    cursor: pointer;
}

.formula-function:hover {
    background-color: #000000;
}

.formula-help {
    display: none;
    color: #ffff00;
    margin: 2rem 0.5rem;
}

.formula-help-text {
    color: #00aaee;
}

.formula-help-text-field {
    color: #ffffff;
}

.formula-function:hover .formula-help {
    display: block;
}

/* /FORMULAE *//* MENU FOR VIEW TYPE SELECTION */
.view-menu-panel {
    width: 70.5rem;
}

.view-menu-panel .panel-header {
    height: 5rem;
}

.view-menu {
    margin: 0.5rem;
    padding: 1.6rem;
    width: 33rem;
    border-color: var(--panel-border);
    border-style: solid;
    border-width: 1px;
    border-radius: 1rem;
    box-shadow: var(--shadow-1);
    cursor: pointer;
}

.view-menu:hover {
    box-shadow: var(--shadow-4);
}

.view-menu-icon {
    font-size: 4rem;
}

.view-menu-switch .field-checkbox-icon {
    font-size: 3.2rem;
}

.view-menu-title {
    font-size: 2rem;
    margin-top: 1rem;
    padding: 0.5rem;
}

.view-menu-description {
    font-size: 1.3rem;
    line-height: 2rem;
    padding: 0.5rem;
}

/* /MENU FOR VIEW TYPE SELECTION *//* AI BLOGGER */
.form-feature-ai-blogger-container {
    width: 100%;
    padding: 10px;
    flex: 1;
}

.form-feature-ai-blogger-file {
    flex-shrink: 0;
    align-items: center;
    padding: 2rem;
    margin: 0.5rem 0;
    box-shadow: var(--shadow-2);
    border-radius: var(--panel-border-radius);
}

.form-feature-ai-blogger-file-icon {
    width: 6.4rem;
    text-align: center;
    font-size: 5rem;
}

.form-feature-ai-blogger-file:hover .form-feature-ai-blogger-file-icon {
    transform: scale(1.1) rotate(3deg);    
    transition: all 0.3s;
}

.form-feature-ai-blogger-file-text {
    margin: 1rem;
}

.form-feature-ai-blogger-file-button {
    margin-top: 2rem;
}

/* ARTICLES */
.form-feature-ai-blogger-navigation {
    background-color: var(--body-background-alt);
    box-shadow: var(--shadow-4);
}

.form-feature-ai-blogger-articles-title {
    padding: 2rem;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

.form-feature-ai-blogger-articles {
    display: flex;
    flex-flow: column;
    overflow-y: auto;
}

.form-feature-ai-blogger-article {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 1rem 1rem 0 1rem;
    padding: 1rem;
    border-radius: var(--panel-border-radius);
    background-color: var(--body-background);
    box-shadow: var(--shadow-1);
    cursor: pointer;
}

.form-feature-ai-blogger-article-selected {
    border: solid 2px #00aaee;
}

/* MESSAGES */
.form-feature-ai-blogger-message {
    display: flex;
    flex-flow: row;
    margin: 2rem 2rem 3rem 2rem;
}

.form-feature-ai-blogger-initials {
    display: block;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
    color: #ffffff;
    margin-right: 1rem;
    width: 3.2rem;
    min-width: 3.2rem;
    height: 3.2rem;
    min-height: 3.2rem;
    line-height: 3.2rem;
    border-radius: 2rem;
}

.form-feature-ai-blogger-message-text {
    margin: 1rem 0 0 1rem;
}

.form-feature-ai-blogger-footer {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 0.8rem;
    padding: 0.8rem;
    height: 5rem;
}

.form-feature-ai-blogger-empty-article {
    display: flex;
    flex-flow: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 12.8rem;
}

.form-feature-ai-blogger-article-actions {
    margin: 0 0.8rem;
    font-size: 1.6rem;
}

.form-feature-ai-blogger-article-actions:hover {
    color: #00aaee;
}

.form-feature-ai-blogger-article-lock {
    margin: 0 0.8rem 0 0;
    font-size: 1rem;
    color: #ff0000;
}

.form-feature-ai-blogger-pdf-preview {
    text-align: center;
    cursor: pointer;
}

.form-feature-ai-blogger-pdf-preview:hover .form-feature-ai-blogger-file-icon {
    transform: scale(1.1) rotate(3deg);    
    transition: all 0.3s;
}

.form-feature-ai-blogger-preview h2 {
    color: var(--blue);
}


/* /AI BLOGGER *//* AI FORM FILL */
.form-feature-show-json {
    font-family: var(--font-family-monospace);
    font-size: 1.2rem;
    margin: 2rem;
    padding: 2rem;
    background: var(--body-background);
    border-radius: 1rem;
    box-shadow: var(--shadow-2);
    overflow: auto;
    user-select: text;
}

/* / AI FORM FILL *//* AI KNOWLEDGE */
.form-feature-ai-knowledge-container {
    width: 100%;
    padding: 1rem;
    flex: 1;
}

.form-feature-ai-knowledge-file {
    flex-shrink: 0;
    align-items: center;
    padding: 2rem;
    margin: 0.5rem 0;
    box-shadow: var(--shadow-2);
    border-radius: var(--panel-border-radius);
}

.form-feature-ai-knowledge-file-icon {
    width: 6.4rem;
    text-align: center;
    font-size: 5rem;
}

.form-feature-ai-knowledge-file:hover .form-feature-ai-knowledge-file-icon {
    transform: scale(1.1) rotate(3deg);    
    transition: all 0.3s;
}

.form-feature-ai-knowledge-file-text {
    margin: 1rem;
}

.form-feature-ai-knowledge-file-button {
    margin-top: 2rem;
}

/* CONVERSATIONS */
.form-feature-ai-knowledge-navigation {
    background-color: var(--body-background-alt);
    box-shadow: var(--shadow-4);
}

.form-feature-ai-knowledge-conversations-title {
    padding: 2rem;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

.form-feature-ai-knowledge-conversations {
    display: flex;
    flex-flow: column;
    overflow-y: auto;
}

.form-feature-ai-knowledge-conversation {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 1rem 1rem 0 1rem;
    padding: 1rem;
    border-radius: var(--panel-border-radius);
    background-color: var(--body-background);
    box-shadow: var(--shadow-1);
    cursor: pointer;
}

.form-feature-ai-knowledge-conversation-selected {
    border: solid 2px #00aaee;
}

/* MESSAGES */
.form-feature-ai-knowledge-message {
    display: flex;
    flex-flow: row;
    margin: 2rem 2rem 3rem 2rem;
}

.form-feature-ai-knowledge-initials {
    display: block;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
    color: #ffffff;
    margin-right: 1rem;
    width: 3.2rem;
    min-width: 3.2rem;
    height: 3.2rem;
    min-height: 3.2rem;
    line-height: 3.2rem;
    border-radius: 2rem;
}

.form-feature-ai-knowledge-message-text {
    margin: 1rem 0 0 1rem;
}

.form-feature-ai-knowledge-footer {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 0.8rem;
    padding: 0.8rem;
    height: 5rem;
}

.form-feature-ai-knowledge-empty-conversation {
    display: flex;
    flex-flow: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 12.8rem;
}

.form-feature-ai-knowledge-conversation-actions {
    margin: 0 0.8rem;
    font-size: 1.6rem;
}

.form-feature-ai-knowledge-conversation-actions:hover {
    color: #00aaee;
}

.form-feature-ai-knowledge-conversation-lock {
    margin: 0 0.8rem 0 0;
    font-size: 1rem;
    color: #ff0000;
}

.form-feature-ai-knowledge-pdf-preview {
    text-align: center;
    cursor: pointer;
}

.form-feature-ai-knowledge-pdf-preview:hover .form-feature-ai-knowledge-file-icon {
    transform: scale(1.1) rotate(3deg);    
    transition: all 0.3s;
}


/* /AI KNOWLEDGE *//* AUDIT */
.form-feature-audit-container {
    border-radius: 1rem;
}

.form-feature-audit-entry {
    background: var(--menu-background);
    padding: 1rem;
    margin: 1rem;
    box-shadow: 0 0 1rem #cccccc;
    border-radius: var(--panel-border-radius);
}

.form-feature-audit-entry-title {
    display: flex;
    flex-flow: row;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.form-feature-audit-entry-initials {
    font-weight: bold;
    color: #ffffff;
    padding: 0.8rem;
    margin-right: 1rem;
    border-radius: 1.6rem;
    line-height: 1.6rem;
}

.form-feature-audit-entry-author {
    margin-right: 1rem;
}

.form-feature-audit-entry-date {
    margin-right: 1rem;
    font-weight: normal;
}

.form-feature-audit-entry-field {
    padding: 1rem;
    margin-left: 3.6rem;
    font-weight: bold;
}

.form-feature-audit-entry-value {
    padding: 1rem;
    margin-left: 3.6rem;
    background: var(--body-background-alt);
    border-radius: var(--panel-border-radius);
    cursor: pointer;
    border: solid 1px transparent;
}

.form-feature-audit-entry-value:hover {
    border-color: var(--blue);
}

.form-feature-audit-empty {
    display: flex;
    flex-flow: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 12.8rem;
}

/* /AUDIT */.article {
	width: 100%;
}

.article-topbar {
	width: 100%;
	min-height: 6rem;
	background-color: var(--body-background-alt);
	align-items: center;
}

.article-sidebar {
	width: 50rem !important;
	min-width: 50rem !important;
	border-style: solid;
	border-width: 0 0 0 1px;
	border-color: var(--body-background-alt);
	box-shadow: var(--shadow-3);
}

.article-preview-sidebar {
	width: 66% !important;
	min-width: 66% !important;
	border-style: solid;
	border-width: 0 0 0 1px;
	border-color: var(--body-background-alt);
	box-shadow: var(--shadow-3);
}

.article-content {
	display: flex;
	flex-flow: column !important;
}

.article-featured-image {
    width: 100%;
    object-fit: cover;
    margin: 1rem 0;
    cursor: pointer;
}

.article-content .ql-editor {
	font-size: 140%;
	font-family: "Inter", sans-serif;
	line-height: 2;
}

.article-content .ql-editor h2 {
	font-size: 3rem !important;
	margin: 3rem 0 2rem 0;
}

.article-content .ql-editor h3 {
	font-size: 2.5rem !important;
	margin: 2.5rem 0 1.5rem 0;
}

.article-content .ql-editor h4 {
	font-size: 2rem !important;
	margin: 2.3rem 0 1.3rem 0;
}

.article-content .ql-editor li {
	font-size: 1.7rem !important;
	margin: 1.2rem 0 1.2rem 0;
}

.article-content .ql-editor table {
	background: var(--body-background);
	box-shadow: var(--shadow-2);
}

.article-content .ql-editor table td {
	font-size: 1.5rem !important;
	border-color: var(--body-alt);
	padding: 1rem;
	border-radius: 0.5rem;
}

.article-content .ql-editor img {
	box-shadow: var(--shadow-2);
	border-radius: 1rem;
}

.blog-article-delete-button {
    margin: 1rem;
    border-color: var(--red);
    /* width: calc(100% - 2rem); */
}

.blog-article-delete-button:hover {
    background-color: #ffd1ce;
}
.blog-content {
    background: var(--body-background-alt);
}

.blog-content-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 1rem;
}

.blog-content-container {
    padding: 2rem;
    overflow: auto;
}

.blog-content-topbar {
    align-items: center;
    height: 6rem;
    min-height: 6rem;
    padding: 1rem 1rem 1rem 3rem;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: var(--body-background);
}

.blog-content-article {
    background: var(--body-background);
    box-shadow: var(--shadow-2);
    border-radius: var(--panel-border-radius);
    padding: 2rem;
    margin: 2rem;
	cursor: pointer;
    line-height: 2rem;
    align-items: center;
}

.blog-content-article-title {
    font-size: 1.7rem;
    font-weight: 600;
}

.blog-content-article-image {
    height: 8rem;
    min-width: 13rem;
    padding: 0.5rem;
    margin: 0 1rem 0 0;
    border: solid 1px var(--panel-border);
    border-radius: var(--panel-border-radius);
    object-fit: cover;
}

.blog-content-article-infos {
    font-size: 1.4rem;
    color: var(--alt-gray);
    font-weight: 600;
}

.blog-content-delete-button {
    width: 4rem;
    height: 4rem;
    box-shadow: none;
    /* padding: 1rem; */
    border: none;
}

.blog-content-delete-button:hover {
    background-color: #ffd1ce;
}.nav {
    display: flex;
    flex-flow: column;
    width: 35rem;
    height: 100vh;
    padding: 2rem;
    box-shadow: var(--shadow-3);
    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: var(--body-background-alt);
}

.nav-title-container {
    display: block;
    text-align: center;
}

.nav-logo {
    max-height: 5rem;
    object-fit: cover;
}

.nav-title {
    color: var(--body);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
}.blog-settings-content {
    width: 100%;
    height: 100vh;
    background: var(--body-background-alt);
    overflow: auto;
}

.blog-settings-title-icon {
    font-size: 3rem;
    color: var(--blue);
}

.blog-settings-block {
    background: var(--body-background);
    box-shadow: var(--shadow-2);
    border-radius: var(--panel-border-radius);
    padding: 2rem;
    margin: 2rem;
}

.blog-settings-block-container {
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: var(--body-alt);
    padding: 1rem;
    margin-bottom: 2rem;
}

.blog-settings-block-title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.blog-settings-block-icon {
    font-size: 2rem;
	width: 2rem;
	height: 2rem;
	margin-right: 1rem;
    color: var(--blue);
}

.blog-settings-block-help {
    margin-left: 3rem;
}.blog-nav {
    display: flex;
    flex-flow: column;
    width: 35rem;
    height: 100vh;
    padding: 2rem;
    box-shadow: var(--shadow-3);
    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: var(--body-background-alt);
}

.blog-nav-menu {
    background: var(--body-background-alt);
    padding: 1rem;
    margin: 0.2rem 1rem;
    border-radius: var(--panel-border-radius);
    cursor: pointer;
}/* COMMENTS */
.form-feature-comments-container {
    border-radius: 1rem;
}

.form-feature-comment {
    background: var(--menu-background);
    padding: 1rem;
    margin: 1rem;
    box-shadow: 0 0 1rem #cccccc;
    border-radius: var(--panel-border-radius);
}

.form-feature-comment-title {
    display: flex;
    flex-flow: row;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.form-feature-comment-initials {
    font-weight: bold;
    color: #ffffff;
    padding: 0.8rem;
    margin-right: 1rem;
    border-radius: 1.6rem;
    line-height: 1.6rem;
}

.form-feature-comment-author {
    margin-right: 1rem;
}

.form-feature-comment-date {
    margin-right: 1rem;
    font-weight: normal;
}

.form-feature-comment-text {
    padding: 1rem;
}

.form-feature-comment-edit {
    width: 2.4rem;
    text-align: center;
    cursor: pointer;
}

.form-feature-comment-edit:hover {
    font-size: 2rem;
    transition: all 0.1s;
}

.form-feature-comment-empty {
    display: flex;
    flex-flow: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 12.8rem;
}

/* /COMMENTS *//* DOCUMENT TEMPLATES */
.form-feature-templates-container {
    width: 100%;
    padding: 1rem;
    flex: 1;
}

.form-feature-templates-template {
    flex-shrink: 0;
    align-items: center;
    width: 100%;
    padding: 0.8rem;
    margin: 0.5rem 0;
    box-shadow: var(--shadow-2);
    border-radius: var(--panel-border-radius);
}

.form-feature-templates-template-icon {
    width: 6.4rem;
    text-align: center;
    font-size: 2.4rem;
}

.form-feature-templates-template-text {
    flex: 1;
}

.form-feature-templates-template-button {
    margin: 0.5rem;
}

/* /DOCUMENT TEMPLATES *//* DOCUMNENT WEIGHT */
.form-feature-show-document-weight {
    display: inline-flex;
    flex-flow: row;
    flex-wrap: wrap;
    margin: 1rem;
}

.form-feature-doc-weight-header {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: 2rem;
}

.form-feature-doc-weight {
    display: flex;
    flex-flow: column;
    justify-content: center;
    margin: 0.5rem;
    padding: 1.6rem;
    width: calc(50% - 1.2rem);
    border-color: var(--panel-border);
    border-style: solid;
    border-width: 1px;
    border-radius: 1rem;
    box-shadow: var(--shadow-1);
}

@media (pointer: coarse) and (hover: none) {
    .form-feature-doc-weight {
        width: calc(100% - 2.4rem);
    }
}

.form-feature-doc-weight-icon {
    font-size: 3.2rem;
    margin-right: 2rem;
}

.form-feature-doc-weight-title {
    font-size: 1.6rem;
    margin-top: 1rem;
    padding: 0.5rem;
}

.form-feature-doc-weight-data {
    color: #00aaee;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0.5rem;
}

.form-feature-doc-weight-data-bigger {
    font-size: 4rem;
}

/* /DOCUMNENT WEIGHT *//* EMAILS */
.form-feature-emails-container {
    border-radius: 1rem;
    box-shadow: var(--shadow-3);
}

.form-feature-email {
    display: flex;
    flex-flow: row;
    width: 100%;
}

.form-feature-email-header {
    color: #00aaee;
    font-size: 1.4rem;
    font-weight: bold;
    border-style: solid;
    border-width: 0 0 1px 0;
    padding: 1.2rem;
    flex: 1;
    word-break: break-all;
}

.form-feature-email-attachment {
    max-width: 3rem;
}

.form-feature-email-row:hover {
    cursor: pointer;
    background: var(--datacomponent-row-hover);
}

.form-feature-email-field {
    border-style: solid;
    border-color: var(--datacomponent-cell-border);
    border-width: 0 0 1px 0;
    padding: 1.2rem 0.6rem;
    margin: 0;
    flex: 1;
    word-break: break-all;
}

.form-feature-email-empty {
    display: flex;
    flex-flow: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 12.8rem;
}

/* /EMAILS *//* SHOW JSON */
.form-feature-show-json {
    font-family: var(--font-family-monospace);
    font-size: 1.2rem;
    margin: 2rem;
    padding: 2rem;
    background: var(--body-background);
    border-radius: 1rem;
    box-shadow: var(--shadow-2);
    overflow: auto;
    user-select: text;
}

/* /SHOW JSON *//* WORKFLOW */
:root {
    --workflow-start: #223344;
    --workflow-flow: #ffffff;
    --workflow-end: #ffffff;
    --workflow-urgent: #ffffff;
    --workflow-overdue: #ffffff;
    --workflow-background-start: #fafafa;
    --workflow-background-flow: #4EC838;
    --workflow-background-end: #000000;
    --workflow-background-urgent: #f5b504;
    --workflow-background-overdue: #ff0000;
    --workflow-border-start: solid 2px #cccccc;
    --workflow-border-flow: none;
    --workflow-border-end: none;
}

.form-feature-workflow {
    display: flex;
    flex-flow: column;
}

.form-feature-workflow-help {
    color: #ffffff;
    font-size: 1.6rem;
    box-shadow: var(--shadow-4);
    padding: 3.2rem;
    border-radius: 1rem;
    width: fit-content;
    margin: auto;
    margin-top: 15%;
}

/* STEPS */
.form-feature-workflow-steps {
    padding: 1rem;
}

.form-feature-workflow-step {
    display: flex;
    flex-flow: column;
    width: 100%;
    margin: 1rem 0;
    padding: 0.5rem;
    overflow: hidden;
    border-style: solid;
    border-width: 3px;
    border-radius: var(--panel-border-radius);
    border-color: var(--body-alt);
    box-shadow: var(--shadow-1);
}

.form-feature-workflow-step-setup {
    width: 100%;
    padding: 0 0.5rem;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--panel-border-radius);
}

.form-feature-workflow-step-setup:hover {
    background-color: var(--body-background-alt);
    border-color: var(--body-background-alt);
}

/* DECISIONS */
.form-feature-workflow-step-decisions {
    margin: 0.2rem 0;
    padding: 0 0 0 0.5rem;
    margin-left: 2rem;
    border-style: none;
    border-width: 0 0 0 0.5rem;
    border-radius: var(--panel-border-radius);
    border-color: #00aaee;
}

.form-feature-workflow-decision {
    display: flex;
    flex-flow: row;
    padding: 0 0.5rem;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--panel-border-radius);
}

.form-feature-workflow-decision:hover {
    background-color: var(--body-background-alt);
    border-color: var(--body-background-alt);
}

.form-feature-workflow-decision .field-label {
    font-size: 1rem;
    line-height: 2rem;
    overflow: hidden;
}

.form-feature-workflow-decision-icon {
    color: var(--blue);
    line-height: 3.2rem;
    padding: 0 1rem;
}

.form-feature-workflow-add-decision {
    margin: 1rem;
    float: right;
    height: 3.2rem;
}

/* CONDITIONS */
.form-feature-workflow-condition {
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 1rem;
    margin: 1rem;
    box-shadow: var(--shadow-1);
    border-radius: var(--panel-border-radius);    
}

.form-feature-workflow-condition .field-label {
    font-size: 1rem;
    line-height: 2rem;
    overflow: hidden;
}

.form-feature-workflow-condition-icon {
    color: var(--red);
    line-height: 3.2rem;
    padding: 0 1rem;
}

/* WORKFLOW HEADER */
.form-feature-workflow-header-title {
    display: inline-block;
    width: 20rem;
    color: var(--field-label);
    font-size: var(--field-font-size);
}

.form-feature-workflow-header-title-mobile {
    display: inline-block;
    color: var(--field-label);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.form-feature-workflow-header-error {
    display: inline-block;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 2rem;
    margin: 1rem;
}

/* Status */
.form-feature-workflow-header-status {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 0.8rem 2rem;
    border-radius: 3.2rem;
    margin: 1rem 0;
}

.form-feature-workflow-header-status-icon {
    margin-right: 1rem;
}

/* Due date */
.form-feature-workflow-header-duedate-container {
    margin: 1rem 0;
}

.form-feature-workflow-header-duedate {
    line-height: 2.4rem;
    padding: 0 0 0 1rem;
    border-style: solid;
    border-width: 0 0 0 3px;
}

/* Instructions */
.form-feature-workflow-header-instructions-container {
    margin: 1rem 0;
}

.form-feature-workflow-header-instructions {
    line-height: 2.4rem;
    padding: 0 0 0 1rem;
    border-style: solid;
    border-width: 0 0 0 3px;
}

/* Actors */
.form-feature-workflow-header-actors-container {
    margin: 1rem 0;
}

.form-feature-workflow-header-actors {
    line-height: 2.4rem;
    padding: 0 0 0 1rem;
    border-style: solid;
    border-width: 0 0 0 3px;
}

.form-feature-workflow-header-actors-icon {
    color: #00aaee;
    margin: 0 0.8rem;
}

/* Decision buttons */
.form-feature-workflow-header-buttons-container {
    margin: 1rem 0;
}

.form-feature-workflow-header-buttons {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: center;
}

.form-feature-workflow-header-buttons .a-button {
    height: 3.2rem;
    margin: 0.5rem 0.5rem 0.5rem 0;
    box-shadow: var(--shadow-1);
}

.form-feature-workflow-header-buttons .a-button:hover {
    box-shadow: unset;
}

/* WORKFLOW VOTE PANEL */
#form-feature-workflow-vote-panel .panel-header {
    height: 5rem;
}

#form-feature-workflow-vote-panel.a-panel-mobile  {
    border-style: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.form-feature-workflow-vote-label {
    color: var(--field-label);
}

.form-feature-workflow-vote-tag {
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 600;
    border-radius: 0.5rem;
    margin-left: 0.5rem;
}

.form-feature-workflow-vote-tag-icon {
    margin-right: 1rem;
}

.form-feature-workflow-vote-buttons .a-button {
    margin: 0.2rem;
}

.form-feature-workflow-vote-offline-warning {
    color: var(--blue);
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-2);
    margin: 2rem 0.5rem;
}

/* SVG FLOWCHART */
#workflow>* {
    transition: all 1s;
}

.form-feature-workflow-graph {
    cursor: grab;
    margin: 0.5rem;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow-2);
}

@media (pointer: coarse) and (hover: none) {
    .form-feature-workflow-graph {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

.edgeLabel {
    font-size: 1.2rem;
}

div[xmlns] {
    display: flex !important;
    flex-flow: row !important;
    align-items: center !important;
}

.nodeLabel {
    display: flex;
    flex-flow: row;
    align-items: center;
}

.nodeLabel i {
    font-size: 1rem;
    margin: 0 0.5rem 0.2rem 0;
}

.nodeLabel:hover {
    cursor: pointer !important;
}

.nodeLabel:hover>* {
    color: #00aaee !important;
    transition: all 0.3s !important;
}

/* WORKFLOW HISTORY */
.form-feature-workflow-history {
    margin-top: 2rem;
}

.form-feature-workflow-history-mobile {
    min-width: 30rem;
    margin-top: 2rem;
}

.form-feature-workflow-history-panel .panel-header {
    height: 5rem;
}

.form-feature-workflow-history-panel .panel-icon {
    font-size: 3.2rem;
}

.form-feature-workflow-history-panel .panel-title {
    font-size: 2.4rem;
}

.form-feature-workflow-history-step {
    min-width: 20rem;
    display: flex;
    flex-flow: column;
    font-size: 1.6rem;
    padding: 1rem;
    text-align: center;
    border-radius: 0.5rem;
}

.form-feature-workflow-history-step-mobile {
    min-width: 20rem;
    display: flex;
    flex-flow: column;
    font-size: 1.6rem;
    padding: 1rem;
    text-align: center;
    border-radius: 0.5rem;
}

.form-feature-workflow-history-step-start {
    color: var(--workflow-start);
    background-color: var(--workflow-background-start);
    border-radius: 5rem;
    border: solid 2px #cccccc;
}

.form-feature-workflow-history-step-flow {
    color: var(--workflow-flow);
    background-color: var(--workflow-background-flow);
    box-shadow: var(--shadow-3);
}

.form-feature-workflow-history-step-end {
    color: var(--workflow-end);
    background-color: var(--workflow-background-end);
    border-radius: 5rem;
}

.form-feature-workflow-history-action {
    min-width: 20rem;
    max-width: 30rem;
    display: flex;
    flex-flow: column;
    margin: 2rem;
    padding: 1rem;
    border: #cccccc 1px solid;
    background-color: var(--body-background);
    border-radius: 0.5rem;    
}

.form-feature-workflow-history-action-mobile {
    min-width: 20rem;
    display: flex;
    flex-flow: column;
    padding: 1rem;
    border: #cccccc 1px solid;
    background-color: var(--body-background);
    border-radius: 0.5rem;
}

.form-feature-workflow-history-decision {
    color: #00aaee;
    font-weight: bold;
}

.form-feature-workflow-history-decision-mobile {
    font-size: 1.6rem;
    color: #00aaee;
    font-weight: bold;
}

.form-feature-workflow-history-date {
    width: 15rem;
    margin-top: 0.5rem;
    font-size: 1.2rem;
}

.form-feature-workflow-history-arrow {
    text-align: center;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAAEklEQVQYV2P4//9/Chj8//8fADYiCFNpZuVHAAAAAElFTkSuQmCC') center repeat-y;
}

.form-feature-workflow-history-arrow-head {
    font-size: 3.2rem;
    color: #999999;
}

.form-feature-workflow-history-context-container {
    display: flex;
    flex-flow: column;
}

.form-feature-workflow-history-context {
    display: flex;
    flex-flow: row;
    align-items: center;
    min-width: 20rem;
}

.form-feature-workflow-history-actor-icon {
    font-size: 2.4rem;
    margin-right: 1rem;
}

.form-feature-workflow-history-actor-icon-mobile {
    font-size: 1.6rem;
    margin-right: 0.5rem;
}

.form-feature-workflow-history-comment-arrow {
    margin: 0 0 0 0.5rem;
}

.form-feature-workflow-history-comment {
    max-width: 30rem;
    font-size: 1.2rem;
    padding: 2rem;
    border: 1px #cccccc solid;
    border-radius: 3.2rem;
}

.form-feature-workflow-history-comment-mobile {
    font-size: 1.3rem;
    padding: 2rem;
    border: 1px #cccccc solid;
    border-radius: 0;
}

.form-feature-workflow-history-label {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* History displayed as a table */
.form-feature-workflow-history-table {
    width: 100%;
    border-spacing: 0;
}

.form-feature-workflow-history-table th {
    font-size: 1.5rem;
    text-align: left;
    border-style: solid;
    border-width: 0 0 3px 0;
    padding: 0.5rem;
}

.form-feature-workflow-history-table td {
    border-style: solid;
    border-color: var(--panel-border);
    border-width: 0 0 1px 0;
    padding: 1rem 0.5rem;
}

.form-feature-workflow-history-button {
    line-height: 1.6rem;
    display: inline;
    white-space: nowrap;
    font-size: var(--field-font-size);
    height: var(--field-select-value-height);
    margin: var(--field-select-value-margin);
    padding: var(--field-select-value-padding);
    color: var(--field);
    background: var(--field-background);
    border-color: var(--field-border);
    border-style: solid;
    border-radius: var(--field-select-value-border-radius);
    border-width: 1px;
    cursor: pointer;
}

.form-feature-workflow-history-button:hover {
    color: #ffffff;
    background-color: #556677;
}

/* /WORKFLOW */