/* RICH TEXT FIELD */
.a-richtextfield {
    display: flex;
    flex-flow: column;
    padding: var(--field-padding);
}

.field-richtext {
    border-color: var(--field-border);
    border-width: var(--field-border-width);
    border-radius: 0 0 var(--field-border-radius) var(--field-border-radius);
}

.ql-container.field-richtext-invalid {
    border-style: var(--field-border-invalid-style) !important;
    border-top-style: var(--field-border-invalid-style) !important;
    border-width: var(--field-border-invalid-width) !important;
    border-color: var(--red) !important;
}


.field-richtext-read-only {
    border-style: none !important;
    cursor: unset !important;
}

.field-richtext img {
    padding: 1px;
    border: 1px solid transparent;
    cursor: pointer;
}

.field-richtext img:hover {
    border: solid 1px var(--blue);
}

/* OVERWRITE QUILL STYLES */
.ql-toolbar {
    text-align: center;
    border-color: var(--field-border) !important;
    border-width: var(--field-border-width) !important;
    border-bottom-width: 0 !important;
    border-radius: 0 0 var(--field-border-radius) var(--field-border-radius);
}

.ql-container {
    font-size: var(--field-font-size) !important;
    border-style: solid !important;
    border-width: var(--field-border-width) !important;
    border-radius: 0 0 var(--field-border-radius) var(--field-border-radius);
    border-color: var(--field-border) !important;
    background: var(--field-background) !important;
}

.ql-container:hover {
    border-color: var(--field-border-hover) !important;
}

.ql-snow .ql-tooltip.ql-flip {
    z-index: 10000;
    transform: translateY(0) !important;
    position: static;
    margin: 1rem;
    border-radius: 0.5rem;
}

.ql-bubble .ql-tooltip {
    border-radius: 0.5rem !important;
}

.ql-bubble .ql-tooltip-arrow {
    display: none !important;
}

.ql-toolbar-extension {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: solid 2px #00aaee;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    padding: 0.5rem;
}

.ql-toolbar-extension:hover {
    color: var(--blue) !important;
}

.ql-editor figure {
    text-align: center;
}

.ql-caption {
    text-align: center;
}
/* RICH TEXT FIELD */
/* CODE EDITOR FIELD */
.a-codeeditor {
    display: inline-flex;
    flex-flow: row;
    vertical-align: top;
    margin: 0;
    padding: var(--field-padding);
    min-height: 5rem;
    z-index: 0;
}

.code-editor {
    width: 100%;
    height: 100%;
    min-height: 5rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.no-scrollbar-h .ace_scrollbar-h {
    display: none !important;
}

.no-scrollbar-v .ace_scrollbar-v {
    display: none !important;
}

/* /CODE EDITOR FIELD */
/* MAP */
.a-map {
    display: flex;
    border-style: solid;
    border-width: 1px;
    border-color: #eeeeee;
    border-radius: var(--panel-border-radius);
    overflow: hidden;
}
/* /MAP */
/* MAP FIELD */
.a-mapfield {
    display: inline-flex;
    flex-flow: row wrap;
    vertical-align: top;
    margin: 0;
    padding: var(--field-padding);
}

.a-mapfield-button {
    position: absolute;
    width: 2rem;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0 0.4rem 0.2rem 0.4rem;
    border: solid 1px #ccc;
    border-radius: 0.4rem;
    background: #fff;
}

.a-mapfield-button:hover {
    border: solid 1px #000000;
}

.ol-attribution.ol-uncollapsible {
    display: none !important;
}

/* /MAP FIELD */
/* DIRECTORY FIELD */
.directory-user-icon {
    font-size: 1.2rem;
}

.directory-group-icon {
    font-size: 1.2rem;
}

.directory-role-icon {
    font-size: 1.2rem;
}
/* /DIRECTORY FIELD */
/* LINK FIELD */

/* FIELD VALUE */
.field-link-value {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    
    font-size: var(--field-font-size);
    
    width: 100%;
    margin: var(--field-select-value-margin);
    padding: var(--field-select-value-padding);

    color: var(--field);
    background: var(--body-background);
    
    border-style: solid;
    border-width: 1px;
    border-radius: var(--field-select-value-border-radius);
    cursor: pointer;
}

.field-link-value:hover {
    background-color: var(--body-background-alt);
}

.field-link-value-compact {
    height: 2.8rem;
}

.field-link-record {
    display: inline-flex;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

/* FIELD VALUE WHEN DISPLAYED IN A DATATABLE CELL */
.field-link-value-cell {
    line-height: 1.6rem;
    display: inline;
    white-space: nowrap;
    font-size: var(--field-font-size);

    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);
    cursor: pointer;
}

.field-link-value-cell:hover {
    color: #ffffff;
    background-color: #556677;
}

/* LINK BUTTONS (ADD / LINK / EXPAND) */
.field-link-buttons {
    display: inline-flex;
    flex-flow: row;
    width: 100%;
}

.field-link-button {
    min-height: unset!important;
    height: 2.8rem;
    margin-right: 0.2rem;
}

.field-link-button > * {
    font-size: 1.3rem;
    margin-left: 0.5rem;
}

/* LINK ITEM */
.field-link-item {
    display: inline-flex;
    flex-flow: column;
    min-width: 10rem;
    flex: 1;
    padding: 0.5rem;
}

.field-link-item-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    min-width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.5rem;
}

.field-link-item-label {
    font-weight: var(--field-label-font-weight);
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5rem;
}

.field-link-item-value {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5rem;
    display: flex;
    flex-flow: row;
    max-height: 3.2rem;
}

.field-link-value-delete {
    font-size: 1.6rem;
    padding: 0 0 0 1.6rem;
    cursor: pointer;
}

/* LINK ITEM IMAGE */
.field-link-item-image {
    display: inline-flex;
    flex-flow: row;
    align-items: center;
    min-width: 15rem;
    padding: 0.5rem;
}

.field-link-item-image-thumbnail {
    max-height: 4.4rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--field-border);
    box-shadow: var(--shadow-1);
}

.field-link-item-color {
    width: 2rem;
    height: 2rem;
    border-radius: var(--panel-border-radius);
    margin-left: 0.5rem;
}

.field-link-item-icon {
    font-size: 2rem;
    margin-left: 0.5rem;
}

.field-link-item-slider {
    width: 70%;
}
/* /LINK FIELD */