/*--------------------------------------------------
	GENERAL
---------------------------------------------------*/

:root {
    --white: #FFFFFF;
    --black: #000000;
    --blue: #199fff;
    --ubiq: #0c1c26;
    --green: #2fce9e;
    --dark-red: #982626;
    --gray-020: #fcfdff;
    --gray-050: #f9f9f9;
    --gray-100: #ebedf0;
    --grey-150: #e2e5e8;
    --grey-200: #cfd9e5;
    --grey-300: #83909d;
    --purple: #6077af;
    --beige: #e5e9ec;
    --brightbeige: #f5f5f5;
    --brightbrown: #ededed;


    --xs: 4px;
    --s: 8px;
    --m: 14px;
    --l: 18px;
    --xl: 34px;
    --padding: var(--xl);
    --neg-padding: calc(var(--padding)*-1);
  }


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


/*--------------------------------------------------
	WIDGETS
---------------------------------------------------*/

.widget li {
    position: relative;
    border-bottom: solid 1px var(--gray-100);
    line-height: 30px;
    letter-spacing: 0.5px;
    font-weight: 600;
    padding: 5px;
    cursor: pointer;
    color: #9da0af;
    list-style: none;
    transition: all ease 0.3s;
}

.widget li:hover {
    background: var(--grey-100);
    padding: 5px 10px;
}

.widget .widget-heading h2 {
    color: var(--gray-300);
}

.widget li a {
    color: var(--purple);
    font-size: 0.85rem;
}

.widget li a:hover {
    text-decoration: none;
}


/* ICONS */

i.fas.fa-external-link-alt, i.fas.fa-link, i.fas.fa-pen {
    position: absolute;
    font-size: 15px;
    color: var(--grey-200);
    right: 6px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
}

i.zwei.fas.fa-plus-circle {
    position: absolute;
    font-size: 10px;
    color: var(--green);
    right: 16px;
    top: 6px;
    cursor: pointer;
    z-index: 1;
}



/*--------------------------------------------------
	LOGIN
---------------------------------------------------*/

body.login {
    background: #C9D6FF;
    background: -webkit-linear-gradient(to right, #E2E2E2, #e2e8fb);
    background: linear-gradient(to right, #E2E2E2, #e2e8fb);
}



/*--------------------------------------------------
	ENTRY DETAILS
---------------------------------------------------*/

.nav-item.sel, .sidebar-action:hover, .sidebar nav li:not(.has-subnav)>a.active-drop-target, .sidebar nav li:not(.has-subnav)>a.sel, #sidebar nav li a:not(.sel):hover {
    color: #3f4d5a;
    background: #C9D6FF;
    background: -webkit-linear-gradient(to right, #dcdbdb, #dfe3ee);
    background: linear-gradient(to right, #dcdbdb, #dfe3ee);
}

body, html {
    background-color: var(--gray-020);
    background: #C9D6FF;
    background: -webkit-linear-gradient(to right, #f7f7f7, #f3f4f8);
    background: linear-gradient(to right, #f7f7f7, #f3f4f8);
}

.global-sidebar {
    background-color: #f7f7f7;
}

.content-pane {
    background: transparent;
    box-shadow: none;
}

#content :not(.meta)>.flex-fields>:not(h2,hr,.line-break):before, #content :not(.meta)>.flex-fields>:not(h2,hr,.line-break):last-child:before, #content>.flex-fields>:not(h2,hr,.line-break):before, #content>.flex-fields>:not(h2,hr,.line-break):last-child:before, .draghelper .flex-fields>:not(h2,hr,.line-break):before, .draghelper .flex-fields>:not(h2,hr,.line-break):last-child:before, .lp-content .flex-fields>:not(h2,hr,.line-break):before, .lp-content .flex-fields>:not(h2,hr,.line-break):last-child:before, .so-content .flex-fields>:not(h2,hr,.line-break):before, .so-content .flex-fields>:not(h2,hr,.line-break):last-child:before {
    width: 0px;
}

.field>.status-badge.modified {
    display: none;
}

#content :not(.meta)>.flex-fields>:not(h2,hr,.line-break).width-75, #content :not(.meta)>.flex-fields>:not(h2,hr,.line-break):last-child.width-75, #content>.flex-fields>:not(h2,hr,.line-break).width-75, #content>.flex-fields>:not(h2,hr,.line-break):last-child.width-75, .draghelper.drag-in-content .flex-fields>:not(h2,hr,.line-break).width-75, .draghelper.drag-in-content .flex-fields>:not(h2,hr,.line-break):last-child.width-75 {
    width: 100%;
}

body.fixed-header #header {
    background-color: rgb(250 250 252 / 75%);
}

.pane {
    border: solid 0px;
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: var(--l);
}

#details .details .meta:not(.read-only,.warning) {
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}

.pane-tabs [role=tablist] [role=tab].sel {
    box-shadow: inset 0 2px 0 var(--gray-100,var(--gray-100)),0 0 0 1px rgba(51,64,77,.1),0 2px 12px var(--custom-sel-tab-shadow-color,var(--gray-200));
}

table.data thead th.orderable.ordered {
    background-color: hsl(225deg 17.71% 91.75%);
}

div#fields-hero, div#fields-inhaltGrid {
    border: solid 0px var(--gray-100);
    box-shadow: none;
    border-radius: 5px;
}

.matrixblock {
    border: solid 0px var(--gray-100);
    margin-bottom: 40px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 12px;
    background-color: transparent;
}

.matrixblock .matrixblock {
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    border-top: solid 0.5px var(--gray-200);
    border-radius: 7px;
    background-color: #f3f4f7;
}

.matrixblock .matrixblock .matrixblock {
    border-radius: 0px;
    background-color: var(--white);
    margin-bottom: 20px;
    border-top: 0;
}

.matrixblock .matrixblock:not(.chromeless):before,
.matrixblock .matrixblock .matrixblock:not(.chromeless):before {
    box-shadow: inset 0 0 0 1px var(--custom-border-color, var(--gray-100));
}

.matrixblock>.titlebar {
    background-color: transparent !important;
}

.inline-chips .chip {
    background-color: transparent;
    color: var(--custom-text-color,var(--text-color));
    border: solid 0.5px var(--gray-150);
}

.card {
    background-color: var(--white);
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}

.chip.large>.thumb {
    width: 100%;
    object-fit: cover;
}

.chip>.thumb img, .chip>.thumb svg {
    width: 100%;
    object-fit: cover;
}

.titlebar div div {
    font-style: italic;
    font-size: 0.8rem;
    color: var(--gray-300);
}

.reduce-focus-visibility :focus-visible {
    box-shadow: none;
}

table.data thead td, table.data thead th {
    background-color: #edeef1;
}

table.data tbody tr {
    --hover-bg-color: #fafafa;
    --selected-bg-color: hsl(220deg 8.36% 67.51%);
}

#footer {
    background-color: #edeef1;
    border-block-start: 0px solid var(--white);
    margin-top: 20px;
}

#footer.stuck {
    background-color: #edeef1;
}

ul.icons li a {
    border: 1px solid var(--hairline-color);
}

ul.icons li a:hover {
    background-color: #fbf9f9;
}

ul.icons li a:hover .icon.icon-mask svg circle, ul.icons li a:hover .icon.icon-mask svg ellipse, ul.icons li a:hover .icon.icon-mask svg line, ul.icons li a:hover .icon.icon-mask svg path, ul.icons li a:hover .icon.icon-mask svg polygon, ul.icons li a:hover .icon.icon-mask svg polyline, ul.icons li a:hover .icon.icon-mask svg rect, ul.icons li a:hover .icon.icon-mask svg text {
    fill: var(--purple);
    stroke-width: 0;
}

.pane-header {
    background: -webkit-linear-gradient(to right, #eaecf0, #e5e4e4);
    background: linear-gradient(to right, #eaecf0, #e5e4e4);
}

table.editable td.action, table.editable td.heading, table.editable th {
    background-color: var(--beige);
}

body.reduce-focus-visibility .border-box:focus-visible, body.reduce-focus-visibility .passwordwrapper:focus-visible, body.reduce-focus-visibility .selectize.multiselect .selectize-input:focus-visible, body.reduce-focus-visibility .text:focus-visible, body:not(.reduce-focus-visibility) .border-box:focus, body:not(.reduce-focus-visibility) .passwordwrapper:focus, body:not(.reduce-focus-visibility) .selectize.multiselect .selectize-input:focus, body:not(.reduce-focus-visibility) .text:focus {
    box-shadow: 0 0 0 1px hsl(224deg 29.41% 90%), 0 0 0 3px hsl(270deg 2.94% 86.67%);
}

.link-input>.flex>div.text-link>.chip, .link-input>.flex>div.text-link>.text {
    background-color: var(--white);
}

body.login #poweredby {
    position: relative;
}

body.login main h1 {
    position: relative;
}

body.login main h1:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(calc(-50% + 5px), calc(-100% - 50px));
    background-image: url('ubiq.svg');
    background-size: contain;
    width: 88px;
    height: 40px;
    background-repeat: no-repeat;
    opacity: 0.6;
}

.slideout>.so-body.so-full-details, .slideout>.so-body>.so-sidebar {
    background-color: var(--beige)!important;
}

.fld-element.fld-field {
    background-color: var(--beige);
}

.element-index.main .source-path {
    margin-block: -30px 32px;
}

#content .pane, .pane .pane, .slideout .pane {
    background-color: var(--brightbrown);
}

.details .meta:not(.read-only) {
    background-color: var(--brightbeige)!important;
}

.details>.field>.input>.text.fullwidth {
    background-color: var(--white)!important;
}

.sidebar .heading>span {
    color: var(--text-color);
    margin-inline: -15px;
}



/* CUSTOM FIELDS */

.matrixblock[data-type="bulletpoint"] {
    margin-bottom: 5px;
}

.matrixblock[data-type="bulletpoint"] .heading {
    display: none;
}

.matrixblock[data-type="bulletpoint"] .fields {
    padding-block-start: 0;
}