:root {
    --main: #375d9a;
    --main-rgb: 55, 93, 154;
    --progress: #d9a400;
    --shadow: .5em 1em 3em rgba(36, 60, 100, .25);
}

.nav-main {
    color: #192139;
    text-transform: uppercase;
    font-size: .85em;
    position: relative;
    z-index: 3
}

@media (min-width: 960px) {
    .nav-main {
        display: block !important;
        margin-left: auto
    }
}

@media (max-width: 959px) {
    .nav-main {
        display: none;
        clear: both;
        float: none;
        margin-top: 0;
        position: absolute;
        top: 3em;
        background-color: #375d9a;
        width: 100%;
        z-index: 3;
        left: 0;
        box-shadow: 0 .5em 1em rgba(0, 0, 0, .2)
    }
}

@media (min-width: 960px) {
    .nav-main .toggle-subnav {
        display: none
    }
}

.nav-main .nav-sub {
    padding: 0;
    margin: 0;
    min-width: 15em;
    list-style-type: none;
    background-color: #375d9a;
    overflow: hidden;
    transition: opacity .2s;
    left: .8em;
    display: none
}

.nav-main .nav-sub li {
    padding-bottom: 0
}

@media (min-width: 960px) {
    .nav-main .nav-sub {
        position: absolute
    }
}

.nav-main .nav-sub a {
    display: block;
    color: #fff
}

.nav-main > li:last-child > a {
    padding-right: 0
}

.nav-main a {
    text-decoration: none;
    padding: .8em
}

@media (min-width: 960px) {
    .nav-main a {
        color: #375d9a
    }
}

.nav-main a.active {
    font-weight: 700
}

.nav-main > ul {
    margin: 0;
    padding: 0;
    list-style-type: none
}

@media (min-width: 960px) {
    .nav-main > ul > li {
        display: inline-block;
        padding-bottom: 1em;
        position: relative
    }
}

.nav-main > ul > li:last-child > a {
    padding-right: 0;
    border-right: 0
}

@media (min-width: 960px) {
    .nav-main > ul > li > a {
        border-right: 1px solid #fff;
        display: inline-block;
        letter-spacing: .01em;
        line-height: 1.4em
    }
}

@media (min-width: 960px) {
    .nav-main > ul > li:hover .nav-sub {
        display: block !important
    }
}

@media (max-width: 959px) {
    .nav-main {
        margin-top: 1em
    }

    .nav-main li {
        text-align: center;
        width: 100%;
        border-top: 1px solid hsla(0, 0%, 100%, .1);
        padding: 0;
        position: relative
    }

    .nav-main li a {
        padding: 1em .5em;
        display: block;
        color: #fff
    }

    .nav-main li.active .toggle-subnav img {
        -ms-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .nav-main .toggle-subnav {
        width: 3em;
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        opacity: .5;
        padding: .6em;
        border-left: 1px solid hsla(0, 0%, 100%, .2);
        cursor: pointer
    }

    .nav-main .toggle-subnav svg {
        width: 2.25em;
        height: 2.25em;
        transition: transform .25s
    }

    .nav-main .toggle-subnav path {
        fill: #fff
    }

    .nav-main .nav-sub {
        background-color: #5a82c4
    }
}

.nav-main-toggler {
    width: 2.2em;
    position: absolute;
    right: 3.5%;
    cursor: pointer;
    top: 0;
    z-index: 3
}

@media (min-width: 960px) {
    .nav-main-toggler {
        display: none
    }
}

.nav-main-toggler .line {
    height: 6px;
    margin-bottom: 5px;
    background-color: #375d9a;
    border-radius: .15em
}

.nav-main-toggler .line:nth-child(2) {
    width: 80%;
    margin-left: 20%
}

.nav-main-toggler .line:nth-child(3) {
    width: 90%;
    margin-left: 10%
}

.form-item {
    box-sizing: border-box;
    clear: both;
    margin-bottom: .5em
}

.form-item label {
    display: block;
    font-weight: 700;
    margin-top: .25em;
    margin-bottom: .15em;
    margin-right: .5em;
    padding-right: .3em;
}

.form-item .fakeinput, .form-item .is-input, .form-item .ts-wrapper, .form-item input:not([type=submit]), .form-item textarea {
    border-radius: .1em;
    border: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #d9a400;
    background-color: rgba(155, 174, 205, .25);
    min-height: 2em
}

.form-item.checkbox {
    margin-bottom: 0
}

.form-item .ts-wrapper {
    border: 0;
    box-shadow: none;
    background-color: rgba(155, 174, 205, .2)
}

.secondary-area .form-item .ts-wrapper, .tertiary-area .form-item .ts-wrapper {
    background-color: hsla(0, 0%, 100%, .5)
}

.form-item .ts-control {
    background-color: transparent;
    border: 0
}

.form-item input:focus, .form-item textarea:focus {
    box-sizing: border-box;
    outline: 0;
    border-right: 1px solid #0089ad;
    border-bottom: 1px solid #d9a400;
    box-shadow: inset 1px 1px 3px rgba(0, 137, 173, .435)
}

.form-item input {
    line-height: 1em
}

.form-item option {
    line-height: 1.6em;
    padding: .5em
}

.form-item .error {
    background-color: #ac3d00;
    color: #fff;
    padding: .5em 1em;
    border-radius: .25em;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .35);
    display: block
}

.form-item.has-error.select select, .form-item.has-error input {
    border: 2px solid #ac3d00
}

.form-item.select {
    padding: 0;
    border-radius: .15em;
    position: relative;
    box-sizing: border-box
}

.form-item.select.multiple small {
    margin: 0 !important
}

.form-item.select.multiple select {
    margin-bottom: .25em
}

.form-item.select select {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-bottom: 1px solid #d9a400;
    outline: 0;
    font: inherit;
    font-size: 1.1em;
    min-height: 2em;
    padding: .5em 3em .5em .5em;
    border-radius: .25em;
    background: url(../_icons/down.svg) no-repeat right .8em center/1.1em, linear-gradient(270deg, rgba(155, 174, 205, .7) 2.5em, rgba(155, 174, 205, .2) 0);
    cursor: pointer;
    color: inherit
}

.secondary-area .form-item.select select {
    background: url(../_icons/down.svg) no-repeat right .8em center/1.1em, linear-gradient(270deg, #d9a400 2.5em, hsla(0, 0%, 100%, .4) 0);
    box-shadow: .3em .3em 1.5em 0 rgba(217, 164, 0, .1)
}

.tertiary-area .form-item.select select {
    background: url(../_icons/down.svg) no-repeat right .8em center/1.1em, linear-gradient(270deg, #375d9a 2.5em, hsla(0, 0%, 100%, .4) 0)
}

.form-item.select select:focus {
    outline: none
}

.form-item.select select::-ms-expand {
    display: none
}

.form-item.select select[multiple] {
    font-size: 1em;
    background-image: none;
    padding: 0;
    overflow: auto
}

.form-item.select select[multiple] option {
    padding: .2em .5em
}

.form-item .icon {
    display: inline-block;
    width: 1.2em;
    position: relative;
    top: -.1em
}

.form-item .icon path {
    fill: #192139
}

.errors {
    color: #ac3d00;
    font-weight: 700
}

button {
    cursor: pointer
}

select {
    box-sizing: border-box
}

.fakeinput, button, input, select, textarea {
    box-sizing: border-box;
    padding: .3em .6em;
    font-family: inherit
}

textarea {
    resize: vertical;
    min-height: 6em;
    width: 100%
}

.checkbox, label.radio {
    display: flex;
    align-items: center
}

.checkbox input, label.radio input {
    flex: 0 0 1.4em;
    float: left;
    margin-right: .25em;
    width: 1.5em;
    height: 1.5em
}

.required-info {
    color: #405492;
    font-size: .8em;
    margin-bottom: 2em
}

.checkbox-group-label {
    display: block;
    position: relative;
    top: .5em;
    margin-bottom: .5em;
    clear: both;
    font-size: 1.3em;
    line-height: 1em
}

.fb-link {
    padding-top: 2em
}

form small {
    display: block;
    opacity: .7
}

input[type=date], input[type=datetime-local], input[type=email], input[type=number], input[type=password], input[type=text], select, textarea {
    font-size: 16px
}

input[type=date], input[type=datetime-local] {
    line-height: 1.4em
}

input[type=file] {
    background: #fff;
    padding: 1.2em .5em;
    width: 100%;
    border-radius: .3em;
    border: 2px dotted #ccc;
    position: relative;
    -webkit-appearance: none
}

input[type=color] {
    min-height: 2.7em;
    padding: 0;
    -webkit-appearance: none;
    border: 0 !important;
    box-shadow: .5em .5em 3em rgba(0, 0, 0, .2)
}

input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0
}

@media (min-width: 620px) {
    .selects-wrapper {
        display: -ms-flexbox;
        display: flex
    }
}

.selects-wrapper .select {
    -ms-flex: 0 0 49%;
    flex: 0 0 49%
}

@media (min-width: 620px) {
    .selects-wrapper .select:first-child {
        margin-right: 2%
    }
}

::-webkit-input-placeholder {
    color: #192139;
    opacity: .6 !important
}

::-moz-placeholder {
    color: #192139;
    opacity: .6 !important
}

:-ms-input-placeholder, ::-ms-input-placeholder {
    color: #192139;
    opacity: .6 !important
}

::placeholder {
    color: #192139;
    opacity: .6 !important
}

.dropzone-custom {
    min-height: 1em;
    border: 2px dashed #b3b3b3 !important;
    border-radius: .5em !important;
    background-color: hsla(0, 0%, 81%, .5) !important
}

.dz-message img {
    width: 2em;
    opacity: .5
}

.advanced-select {
    font-size: 1.2em
}

.ts-control, .ts-dropdown {
    font-size: .9em
}

.ts-control {
    padding-right: 3em !important
}

.ts-dropdown .option, .ts-wrapper.multi .ts-control > div {
    padding: .5em
}

.ts-wrapper.multi .ts-control > div {
    border-radius: .2em;
    background-color: rgba(155, 174, 205, .7);
    color: #fff
}

.secondary-area .ts-wrapper.multi .ts-control > div, .tertiary-area .ts-wrapper.multi .ts-control > div {
    background-color: rgba(0, 0, 0, .3)
}

.fakeinput, [readonly] {
    border: 1px solid #cfcfcf !important;
    opacity: .6;
    background-color: hsla(0, 0%, 93%, .5) !important
}

.fakeinput {
    display: block;
    font-weight: 700;
    text-decoration: none
}

.fakeinput img {
    width: 1.25em;
    height: 1.25em;
    margin-right: .5em
}

.password-visibility-toggler {
    position: absolute;
    right: 0;
    top: 0;
    padding: .4em;
    box-sizing: border-box;
    width: 2em;
    opacity: .9;
    border-top-right-radius: .2em;
    border-bottom-right-radius: .2em;
    height: 100%;
    background-color: var(--main);
    cursor: pointer
}

.type-password {
    display: inline-block;
    position: relative
}

.password-wrapper img {
    filter: grayscale(1) invert(1)
}

@keyframes a {
    0% {
        background: #933400
    }
    to {
        background: #c64600
    }
}

@keyframes b {
    0%, to {
        transform: translateX(0)
    }
    10%, 30%, 50%, 70% {
        transform: translateX(-5px)
    }
    20%, 40%, 60% {
        transform: translateX(5px)
    }
    80% {
        transform: translateX(3px)
    }
    90% {
        transform: translateX(-3px)
    }
}

@font-face {
    font-display: swap;
    font-family: Sora;
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/sora-v11-latin-200.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Sora;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/sora-v11-latin-regular.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Sora;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/sora-v11-latin-700.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Azeret Mono;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/azeret-mono-v20-latin-regular.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Azeret Mono;
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/azeret-mono-v20-latin-600.woff2) format("woff2")
}

header .user-actions {
    position: absolute;
    right: 2em;
    top: 1em;
    display: flex;
    z-index: 10
}

.theme-toggle {
    width: 2em;
    height: 2em;
    opacity: .5;
    cursor: pointer
}

.theme-toggle svg {
    width: 100%
}

.not-logged-in {
    text-align: center
}

.not-logged-in .sidebar {
    display: none
}

.dashboard {
    text-align: left
}

.besser-nicht-fuellen {
    opacity: 0;
    position: absolute;
    height: 0;
    width: 0;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1
}

.info-toggler {
    background-color: #375d9a;
    border-radius: 50%;
    border: 0;
    width: 2.3em;
    height: 2.3em
}

.info-toggler img {
    opacity: 1
}

.user-actions-dropdown {
    position: relative
}

.user-actions-dropdown .toggler {
    border: 0;
    background: none;
    padding: .5em;
    box-sizing: content-box;
    text-align: right;
    float: right;
    cursor: pointer
}

.user-actions-dropdown .toggler, .user-actions-dropdown .toggler .current-user {
    position: relative;
    top: -.25em;
    margin-right: .5em;
    display: -ms-flexbox;
    display: flex
}

.user-actions-dropdown .toggler .current-user {
    width: 2.25em;
    height: 2.25em;
    background-color: #375d9a;
    border-radius: 50%;
    padding: .65em;

    justify-content: center;

    align-items: center
}

.user-actions-dropdown .toggler path {
    fill: #fff
}

.user-actions-dropdown .toggler img, .user-actions-dropdown .toggler svg {
    width: 1.5em
}

.user-actions-dropdown .toggler .chevron {
    width: 1em;
    height: 1.2em;
    position: relative;
    top: .4em
}

.user-actions-dropdown .logout-form button {
    border: 0;
    background: none
}

.nav-user-actions {
    display: none;
    background: hsla(0, 0%, 100%, .5);
    border: 1px solid #cfcfcf;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: .2em;
    box-shadow: .1em .1em .2em rgba(50, 84, 139, .2);
    position: absolute;
    right: 1em;
    top: 2.5em
}

.nav-user-actions a, .nav-user-actions button {
    text-decoration: none;
    padding: .5em 1em;
    display: block;
    border-bottom: 1px solid #cfcfcf;
    margin: 0;
    color: #375d9a
}

.login-link a {
    text-decoration: none;
    color: var(--main);
    font-weight: 700
}

body {
    min-width: 320px;
    color: #192139;
    font-family: Sora, sans-serif;
    background-color: #f0f5f9;
    background-image: linear-gradient(135deg, #f0f5f9 25%, rgba(240, 245, 249, 0)), url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.227 0c.687 0 1.227.54 1.227 1.227s-.54 1.227-1.227 1.227S0 1.914 0 1.227.54 0 1.227 0z' fill='rgba(55,93,154,0.7)'/%3E%3C/svg%3E");
    overflow-x: hidden;
    font-size: 14px
}

iframe, img, svg, video {
    max-width: 100%;
    height: auto;
    vertical-align: middle
}

a {
    color: inherit
}

button, input, textarea {
    font-family: inherit
}

li, p, textarea {
    line-height: 1.7em
}

.inner {
    max-width: 1800px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-right: 2.5%
}

[v-if], [v-show] {
    display: none
}

.page-wrapper {
    display: flex;
    min-height: 100vh;

    flex-direction: column
}

main {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto
}

footer {
    padding: 1.5em 0;
    font-size: .9em;
    text-align: right;
    color: #fff;
    background-color: rgba(55, 93, 154, .85);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

footer .part2 {
    margin-left: auto
}

footer .innerst {
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;

    align-items: center
}

footer .inner {
    max-width: none
}

footer a, footer button {
    text-decoration: none
}

footer button {
    padding: 0;
    background-color: transparent;
    color: inherit;
    background-image: none
}

.main-inner {
    padding-top: 1em
}

.items-wrapper {
    display: flex;
    width: 102%;
    margin-left: -1%
}

.items-wrapper > * {

    flex: 1;
    margin: 1%
}

.password-wrapper {
    position: relative;
    display: flex;
    border: 0
}

.password-wrapper img {
    filter: grayscale(1) invert(0)
}

.password-wrapper.active .password-visibility-toggler {
    box-shadow: inset .05em .05em .25em rgba(0, 0, 0, .45)
}

.password-wrapper.active .password-visibility-toggler:before {
    content: "";
    width: 1.5em;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: .3em;
    top: .95em;
    transform: rotate(-45deg)
}

.block {
    background-color: #fff;
    box-shadow: 2em 2em 4em rgba(0, 0, 0, .075);
    border-radius: .2em;
    padding: 2em;
    overflow: visible
}

.login-area, .register-area, .twoauth-area {
    padding: 2em;
    max-width: 30rem;
    margin: 0 auto
}

@media (min-width: 620px) {
    .login-area, .register-area, .twoauth-area {
        width: 30rem
    }
}

.login-area .form-item, .register-area .form-item, .twoauth-area .form-item {
    width: 100%;
    text-align: left
}

.login-area .form-item.text-input input, .register-area .form-item.text-input input, .twoauth-area .form-item.text-input input {
    width: 100%
}

.twoauth-area {
    text-align: left
}

h1 {
    text-align: center;
    font-weight: 400;
    color: #375d9a
}

@media (min-width: 960px) {
    h1 {
        font-size: 4em
    }
}

@media (min-width: 960px) {
    h1.title {
        font-size: 3em
    }
}

h1 span {
    font-weight: 700
}

h1 a {
    text-decoration: none
}

h1 .app-icon {
    width: .8em;
    position: relative;
    top: -.1em
}

main {
    display: flex;
    justify-content: flex-start;
    flex-direction: column
}

.not-logged-in main {

    justify-content: center
}

.not-logged-in .user-actions {
    display: none
}

.button, .save-button {
    color: #fff;
    background-color: #375d9a;
    background-image: linear-gradient(35deg, #212b4b, #405492);
    border: 0;
    padding: .75em 1.35em;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    border-radius: .25em
}

.secondary-area .button, .secondary-area .save-button {
    background-image: linear-gradient(135deg, #ffca27, #d9a400);
    box-shadow: .1em .1em .2em rgba(0, 0, 0, .2);
    line-height: 1em;
    padding: .6em 1em;
    cursor: pointer
}

.button.special, .save-button.special {
    background-image: linear-gradient(-137deg, #375d9a, #5a82c4)
}

.button:before, .save-button:before {
    overflow: hidden;
    transition: opacity .25s;
    display: block;
    opacity: 0;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 100%, .1)
}

.button:focus:before, .button:hover:before, .save-button:focus:before, .save-button:hover:before {
    opacity: 1
}

.button.secondary, .save-button.secondary {
    background-image: linear-gradient(-137deg, #ca9800, #edb300)
}

.button img, .save-button img {
    width: 1.25em;
    filter: invert(1);
    opacity: .5
}

.button small, .save-button small {
    display: block;
    font-size: .65em;
    font-weight: 400
}

.button.small, .save-button.small {
    padding: .2em .4em
}

.secondary-links {
    font-size: .8em;
    opacity: .5
}

.secondary-links a {
    text-decoration: none
}

.buttons-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1em
}

.buttons-wrapper a {
    margin: .5em
}

.form-item.checkbox {
    overflow: hidden
}

.tiles {
    display: grid;
    grid-gap: 1em;
    grid-template-columns:calc(50% - .75em) calc(50% - .75em);
    font-size: .9em;
    margin: 2em 0
}

@media (min-width: 620px) {
    .tiles {
        font-size: 1em;
        grid-template-columns:repeat(5, 1fr)
    }
}

@media (min-width: 960px) {
    .tiles {
        grid-template-columns:repeat(6, 1fr)
    }
}

.tile {
    text-align: left;
    border-radius: .4em;
    text-decoration: none;
    position: relative;
    -webkit-backdrop-filter: blur(.2em);
    backdrop-filter: blur(.2em);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .075), 0 2px 2px rgba(0, 0, 0, .075), 0 4px 4px rgba(0, 0, 0, .05), 0 8px 8px rgba(0, 0, 0, .05), 0 16px 16px rgba(0, 0, 0, .05);
    border-left: 0;
    border-top: 0;
    color: #fff;
    transition: all .2s;
    background-image: linear-gradient(-137deg, #375d9a, #5a82c4)
}

@media (min-width: 620px) {
    .tile {
        min-height: 8em
    }
}

.tile.active, .tile.active:hover {
    z-index: 15
}

.tile.irrelevant {
    width: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
    display: none
}

.tile.no-way {
    animation: b .8s cubic-bezier(.455, .03, .515, .955) both
}

.tile:focus, .tile:hover {
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    z-index: 10
}

.tile.special {
    border-radius: .2em
}

.tile.special .company-name {
    font-size: 1.5em;
    margin-bottom: .5em;
    text-align: right;
    display: block
}

.tile.special .company-name .logo {
    filter: brightness(0) invert(1);
    max-width: none;
    margin-bottom: 1em
}

.tile.special .company-name .logo img {
    max-width: none;
    max-height: 2.5em
}

.tile.special p {
    margin: 0;
    opacity: .65;
    font-size: .95em
}

.tile .tile-link {
    padding: 2em 1.5em 3.5em 2em;
    display: block;
    text-decoration: none;
    height: 100%
}

@media (max-width: 1699px) {
    .tile .tile-link {
        padding: 1.25em;
        font-size: .95em
    }
}

.tile .image img {
    filter: invert(1);
    opacity: .45
}

.tile .more {
    padding: .5em 1.5em;
    background-color: transparent;
    border: 0;
    font-size: 1.1em;
    color: #fff;
    background-image: linear-gradient(-45deg, hsla(0, 0%, 100%, .3), hsla(0, 0%, 100%, .15));
    border-top-left-radius: .3em
}

.tile .nav-sub {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    top: .75em;
    left: .75em;
    height: auto;
    min-height: 100%;
    padding: 3.5em 1.5em 1.5em;
    background-image: linear-gradient(45deg, #73667a, #8d7f94);
    border-radius: .3em;
    border-top-left-radius: 1em;
    z-index: 3;
    display: none;
    width: calc(100% + 2px);
    box-shadow: -.5em 1.5em 1em rgba(0, 0, 0, .5)
}

.tile .nav-sub .nav-sub-inner {
    height: 100%;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;

    flex-direction: column
}

.tile .nav-sub a {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1em
}

.tile .nav-sub a:last-child {
    margin-bottom: 0
}

.tile h3 {
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 1em;
    text-transform: uppercase;
    margin: 0;
    width: calc(100% - 2em)
}

@media (max-width: 1699px) {
    .tile h3 {
        width: 100%
    }
}

.tile h3 span {
    font-weight: 400;
    display: block;
    text-transform: none;
    margin-top: 1em;
    font-size: .9em
}

.tile.main-info {
    grid-row: auto/span 2;
    background-color: #375d9a;
    background-image: linear-gradient(-137deg, #375d9a, #5a82c4);
    color: #fff;
    position: relative;
    text-align: right
}

@media (max-width: 959px) {
    .tile.main-info {
        padding: .5em
    }
}

.tile.main-info a {
    text-decoration: none
}

.tile .content {
    position: relative;
    z-index: 2;
    padding: 1.5em
}

.tile .image {
    width: 3.25em;
    background: transparent !important;
    position: absolute;
    top: 1.5em;
    right: 0
}

@media (max-width: 1699px) {
    .tile .image {
        top: auto;
        bottom: .75em;
        right: .75em;
        width: 1.5em
    }
}

.tile .image img, .tile .image svg {
    width: 2em
}

.tile.special:focus, .tile.special:hover {
    -ms-transform: none;
    transform: none
}

.tile.basic .image {
    background-image: linear-gradient(-137deg, #375d9a, #5a82c4)
}

.tile.basic .image img {
    filter: invert(1)
}

.tile.recipes {
    background-color: rgba(217, 164, 0, .1);
    color: #c09100;
    border-color: rgba(217, 164, 0, .25)
}

.tile.recipes svg path {
    fill: #d9a400
}

.tile.recipes .more {
    color: #fff;
    background-image: linear-gradient(-45deg, rgba(217, 164, 0, .5), rgba(217, 164, 0, .25))
}

.tile .more {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%
}

.tile [href=""] {
    opacity: .35
}

.tile-unimportant, .tile-unimportant1 {
    background-image: linear-gradient(45deg, hsla(0, 0%, 100%, .3), hsla(0, 0%, 100%, .1));
    border: 0;
    min-height: 1em;
    padding-top: .5em
}

.tile-unimportant1 .tile-link, .tile-unimportant .tile-link {
    padding-top: .5em;
    padding-bottom: 0
}

.tile-unimportant1 .image, .tile-unimportant .image {
    display: none
}

.tile-unimportant1 a h3, .tile-unimportant a h3 {
    color: #375d9a;
    width: 100%
}

.tile-unimportant1 h3, .tile-unimportant h3 {
    color: #fff
}

.tile-parcel, .tile-coin, .tile-magic-wand, .tile-unimportant1 {
    grid-column: 1
}

.tile-approved, .tile-assembly, .tile-coin, .tile-list, .tile-price-tag {
    background-color: #4a906e;
    background-image: linear-gradient(-137deg, #6d4a90, #9371b6)
}

.tile-analyze, .tile-magic-wand, .tile-stabilize, .tile-sticker {
    background-image: linear-gradient(-137deg, #d9a400, #ffca27)
}

.tile-bookkeeping, .tile-coal, .tile-parcel {
    background-image: linear-gradient(-137deg, #998da0, #beb7c3)
}

.closer {
    opacity: .5;
    font-weight: 700;
    font-size: 1.5em;
    color: #fff;
    padding: .5em;
    margin: -.5em;
    margin-bottom: auto;
    cursor: pointer;
    transition: opacity .2s;
    text-align: right;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    border-radius: 50%
}

.closer:focus, .closer:hover {
    opacity: 1
}

.container {
    opacity: .5;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1
}

.not-logged-in footer .innerst {

    justify-content: center
}

.not-logged-in footer .innerst .part2 {
    margin-left: 2em
}

.not-logged-in .quickfinder-wrapper {
    display: none
}

h2 {
    display: flex;
    font-size: 1em;

    align-items: center;
    margin-top: 0
}

@media (min-width: 620px) {
    h2 {
        font-size: 1.3em
    }
}

@media (min-width: 1200px) {
    h2 {
        font-size: 1.6em
    }
}

@media (min-width: 1700px) {
    h2 {
        font-size: 2em
    }
}

h2 .back {
    width: 1em;
    display: inline-block;
    padding-right: .1em;
    position: relative;
    -ms-flex: 0 0 2.65rem;
    flex: 0 0 2.65rem;

    align-items: center
}

@media (min-width: 1200px) {
    h2 .back {
        -ms-flex: 0 0 2.65rem;
        flex: 0 0 2.65rem
    }
}

h2 .back img {
    width: 1em;
    display: block;
    height: 1em
}

h2 .add-button {
    margin-left: auto;
    margin-left: 1em;
    padding: .2em .5em;
    font-size: .7em;
    box-shadow: .1em .1em .2em rgba(50, 84, 139, .2);
    position: relative;
    top: -.05em
}

.styled-table {
    box-shadow: var(--shadow);
}

.styled-table .table, .styled-table table {
    background-color: #fff;
    border-collapse: collapse;
    width: 100%;
    min-width: 40em
}

.styled-table .table {
    display: table
}

.styled-table .tr {
    display: -ms-flexbox;
    display: flex
}

.styled-table .td, .styled-table .th {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%
}

.styled-table .thead, .styled-table thead {
    display: table-header-group
}

.styled-table .thead .tr, .styled-table .thead tr, .styled-table thead .tr, .styled-table thead tr {
    background-image: linear-gradient(-137deg, #375d9a, #5a82c4)
}

.styled-table .thead .th, .styled-table .thead th, .styled-table thead .th, .styled-table thead th {
    text-align: left;
    padding-top: .5em;
    padding-bottom: .5em;
    color: #fff
}

.styled-table .thead .th.number, .styled-table .thead th.number, .styled-table thead .th.number, .styled-table thead th.number {
    text-align: right
}

.styled-table .thead .filter-head th, .styled-table thead .filter-head th {
    padding: 5px 2px
}

.styled-table .thead .filter-head th:first-child, .styled-table thead .filter-head th:first-child {
    padding-left: 5px
}

.styled-table .thead .filter-head th input, .styled-table thead .filter-head th input {
    font-size: 1em;
    padding: .5em;
    padding-left: .35em
}

.styled-table .thead .filter-head label, .styled-table thead .filter-head label {
    display: flex;
    font-size: .9em
}

.styled-table .thead .filter-head label input, .styled-table thead .filter-head label input {
    margin-right: .25em;
    width: 1.25em;
    height: 1.25em
}

.styled-table .thead .filter-head label .text, .styled-table thead .filter-head label .text {
    letter-spacing: -.05em;
    font-weight: 400;
    white-space: nowrap
}

.styled-table .thead .filter-head .filter-inner, .styled-table thead .filter-head .filter-inner {
    background-color: hsla(0, 0%, 100%, .35);
    border-radius: .2em;
    padding: 0 .15em
}

.styled-table .thead .filter-head select, .styled-table thead .filter-head select {
    background-color: hsla(0, 0%, 100%, .7);
    padding: .25em .15em;
    border-radius: .2em;
    border: 0
}

.styled-table .tbody .tr:nth-child(2n), .styled-table .tbody tr:nth-child(2n), .styled-table tbody .tr:nth-child(2n), .styled-table tbody tr:nth-child(2n) {
    background-color: rgba(55, 93, 154, .1);
    border-bottom: 1px solid rgba(55, 93, 154, .2);
    border-top: 1px solid rgba(55, 93, 154, .2)
}

.styled-table .td, .styled-table .th, .styled-table td, .styled-table th {
    padding: .35em .5em;
    position: relative
}

.styled-table .number {
    text-align: right
}

.styled-table .name {
    font-weight: 700
}

.styled-table .name-text {
    display: inline-block;
    margin-right: .5em
}

.styled-table [type=checkbox] {
    width: 1.5em;
    height: 1.5em
}

.styled-table.guttered td:not(:last-child) {
    border-right: 1px solid #cfcfcf
}

.styled-table thead button {
    background-color: transparent;
    border-width: 0;
    font-weight: 700;
    color: #fff;
    line-height: 1.2em;
    padding: 0
}

.styled-table thead button .icon {
    opacity: .9
}

.styled-table thead .remove-filters {
    border-color: rgba(55, 93, 154, .5);
    padding: .45em .5em;
    width: 100%;
    background-color: hsla(0, 0%, 100%, .2);
    text-align: center
}

.styled-table thead .remove-filters img {
    opacity: .5;
    width: .8em;
    filter: invert(1);
    position: relative;
    top: -.1em;
    margin-right: .5em
}

.styled-table thead .filter-remover-line, .styled-table thead .filter-remover-line th {
    padding: 0
}

td.number {
    text-align: right
}

.premium .name-text {
    color: #bc9009
}

.actions {
    text-align: right
}

.actions a {
    font-size: .75em
}

.actions .button {
    white-space: nowrap;
    padding: .2em .5em
}

.crud .styled-table .actions {
    display: flex;

    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: .2em;
    height: 100%
}

.crud .styled-table .actions .button {
    margin-right: .3em;
    padding: .5em;
    border-radius: .25em;
    min-width: 2em;
    line-height: 1em;
    font-size: 1em;
    text-align: center
}

.crud .styled-table .actions .button img {
    margin-right: 0;
    opacity: .8
}

.crud .styled-table .actions .button:last-child {
    margin-right: 0
}

.crud th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.premium-icon {
    width: 1.6em;
    position: relative;
    top: -.1em
}

.crud {
    margin-top: 1em;
    margin-bottom: 1em
}

.crud h2 {
    margin: 0;
    padding: .5em 0
}

.crud h2 .fancybox-headline {
    display: none
}

.fancybox__content .crud h2 .fancybox-headline {
    display: block
}

.fancybox__content .crud h2 .headline {
    display: none
}

.crud .form, .crud form {
    border-radius: .35em;
    box-shadow: .5em 1em 3em rgba(36, 60, 100, .25)
}

.crud .form .form-item, .crud form .form-item {
    margin: 0 .5em .25em;
    width: calc(100% - 1em)
}

@media (min-width: 620px) {
    .crud .form .form-item, .crud form .form-item {
        width: calc(50% - 1em)
    }
}

@media (min-width: 960px) {
    .crud .form .form-item, .crud form .form-item {
        width: calc(25% - 1em)
    }
}

.crud .form .form-item.checkbox, .crud form .form-item.checkbox {
    width: auto;
    -ms-flex-item-align: end;
    align-self: flex-end
}

.crud .form .form-item.checkbox input, .crud form .form-item.checkbox input {
    width: auto
}

.crud .form .form-item.textarea, .crud form .form-item.textarea {
    width: calc(100% - 1em)
}

.crud .form .form-item input, .crud form .form-item input {
    width: 100%
}

.crud .form .form-item.checkbox label, .crud .form .form-item input, .crud .form .form-item select, .crud .form .form-item textarea, .crud form .form-item.checkbox label, .crud form .form-item input, .crud form .form-item select, .crud form .form-item textarea {
    font-size: 1.1em
}

.crud .form .form-item select, .crud form .form-item select {
    width: 100%
}

.crud .form .area-wrapper .form-item:not(.checkbox), .crud form .area-wrapper .form-item:not(.checkbox) {
    width: calc(100% - 1em)
}

@media (min-width: 960px) {
    .crud .form .area-wrapper .form-item:not(.checkbox), .crud form .area-wrapper .form-item:not(.checkbox) {
        width: calc(50% - 1em)
    }
}

.crud .form .area-wrapper .form-item.fullwidth, .crud .form .area-wrapper .form-item.textarea, .crud form .area-wrapper .form-item.fullwidth, .crud form .area-wrapper .form-item.textarea {
    width: calc(100% - 1em)
}

.crud .sub-area {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    justify-content: flex-start;
    padding: .75em;
    -ms-flex-align: start;
    align-items: flex-start
}

@media (min-width: 960px) {
    .crud .sub-area {
        padding: 1em
    }
}

.crud .sub-area .content {
    width: 100%
}

.crud .sub-area.no-padding {
    padding: 0
}

.crud .sub-area .unstyled {
    padding: 0;
    margin: 0;
    list-style-type: none
}

.crud .sub-area .unstyled li {
    padding: .5em 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .25)
}

.crud .sub-area .edit-button {
    border: 1px solid hsla(0, 0%, 100%, .5);
    padding: .1em .5em;
    margin-top: -.1em;
    display: inline-block;
    border-radius: .2em;
    font-size: .9em;
    line-height: 1.4em;
    position: absolute;
    right: 0;
    bottom: 0
}

.crud .sub-area .form-item.fullwidth {
    width: calc(100% - 2em)
}

.crud .sub-area.addresses-area li {
    position: relative;
    margin-bottom: 1em;
    border-radius: .3em
}

.crud .sub-area.addresses-area h3 {
    margin-bottom: 1em;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    margin-right: .5em
}

.crud .sub-area.addresses-area .add-button {
    position: relative;
    top: -.35em
}

.crud .sub-area.addresses-area .file-upload {
    margin: 0 0 2em
}

.crud .sub-area.addresses-area .file-upload .form-item {
    margin: 0;
    width: 100%
}

.crud .sub-area.addresses-area .logo {
    max-width: 12em;
    max-height: 4em
}

.crud .sub-area.addresses-area .logo-wrapper {
    background-color: #fff;
    padding: 1em
}

.crud .sub-area.addresses-area .headline-wrapper {

    justify-content: flex-start
}

.crud .table-area {
    padding: 0
}

.crud .table-area table {
    width: 100%
}

.crud .block {
    padding: 0
}

.crud h2 span {
    font-weight: 400;
    opacity: .5
}

.crud h3 {
    margin-left: 1em;
    margin-bottom: 0
}

.crud .object-actions, .crud h3 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
}

.crud .object-actions {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    clear: both;
    position: relative;
    bottom: -1em;
    top: -.25em;
    margin: 0 calc(1.5rem + 1%) 3em
}

@media (min-width: 960px) {
    .crud .object-actions {
        margin: 0 2.5rem 3em
    }
}

@media (max-width: 959px) {
    .crud .object-actions {
        text-align: center
    }
}

.crud .object-actions > * {
    margin-bottom: .5em
}

.crud .object-actions button {
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3);
    border-radius: .15em;
    line-height: 1em
}

.crud .object-actions .button img {
    width: 1.5em;
    margin: 0 .4em;
    filter: invert(1);
    opacity: .5
}

.crud .object-actions .stabilitycheck-button {
    display: flex;

    flex-direction: column;

    justify-content: center
}

.crud .object-actions .delete-form .button, .crud .object-actions .delete-form button {
    width: auto;
    height: 100%
}

.crud .clear {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
}

@media (min-width: 620px) {
    .crud .area-wrapper {
        display: grid;
        grid-template-columns:60% 40%
    }
}

@media (min-width: 620px) {
    .crud .area-wrapper2 {
        display: grid;
        grid-template-columns:40% 60%
    }
}

.secondary-area {
    background-image: linear-gradient(-137deg, #ca9800, #edb300);
    color: #fff
}

.secondary-area .is-input, .secondary-area input:not([type=submit]), .secondary-area option, .secondary-area select, .secondary-area textarea {
    background-color: hsla(0, 0%, 100%, .4);
    border-color: #f7edcc;
    color: #192139 !important
}

.secondary-area h3 {
    margin-bottom: 1em
}

.tertiary-area {
    background-image: linear-gradient(-137deg, #375d9a, #5a82c4);
    color: #fff
}

.tertiary-area .is-input, .tertiary-area input:not([type=submit]), .tertiary-area select, .tertiary-area textarea {
    background-color: hsla(0, 0%, 100%, .3);
    border-color: #c3cee1;
    color: #192139 !important
}

.quaternary-area {
    background-image: linear-gradient(-137deg, #542765, #a763c2);
    color: #fff
}

.quaternary-area h3 {
    opacity: .5;
    margin: 0 0 .2em .35rem
}

.quaternary-area input {
    color: #fff
}

.quaternary-area option {
    color: #192139
}

.crud .phases-area {
    background-image: linear-gradient(-137deg, #345892, #1f3456);
    display: block;
    padding: .5em 1.5em
}

@media (min-width: 960px) {
    .crud .phases-area {
        padding: .5em 1.5em
    }
}

.crud .phases-area input, .crud .phases-area textarea {
    color: inherit
}

.crud .phases-area input:focus, .crud .phases-area textarea:focus {
    outline: none;
    font-weight: 700;
    background-color: #a5bbdf !important;
    box-shadow: inset .2em .2em .7em rgba(48, 82, 135, .5);
    color: #233b62
}

.crud .phases-area .intro-block {
    margin-bottom: 1em;
    margin-top: .5em;
    color: hsla(0, 0%, 100%, .7)
}

.crud .phases-area .intro-block .add-some {
    margin-left: auto;
    white-space: nowrap
}

.crud .phases-area .intro-block select {
    color: #fff;
    margin: 0 0 .5em
}

.crud .phases-area .intro-block .select {
    margin: 0
}

.crud .phases-area .intro-block option {
    color: #192139
}

.crud .phases-area .intro-block .intro-block-inner {
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start
}

.crud .phases-area .intro-block .intro-block-inner .form-item {
    max-width: none;
    width: auto
}

.crud .phases-area h2 {
    font-size: 2em
}

.crud .phases-area h2 span {
    opacity: .8
}

.crud .phases-area .phase {
    overflow: visible;
    position: relative;
    margin-bottom: 1.5em;
    border-radius: .2em;
    box-shadow: .3em .3em 1.5em rgba(0, 0, 0, .2)
}

.crud .phases-area .phase h3 {
    font-size: 1.4em;
    background-color: rgba(0, 0, 0, .2);
    border-radius: .1em;
    color: #fff;
    border-top: 1px solid hsla(0, 0%, 100%, .2);
    margin: 0;
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3);
    display: flex;

    align-items: center;
    padding-right: 0
}

.crud .phases-area .phase h3 .phase-name {
    padding: .25em .5em
}

.crud .phases-area .phase h3 .degrees-wrapper {
    background-color: rgba(55, 93, 154, .5);
    padding: 0 .5em 0 0
}

.crud .phases-area .phase h3 input {
    background-color: transparent;
    border: 0;
    max-width: 4em;
    text-align: right;
    font-size: inherit;
    font-weight: inherit;
    padding-right: 0;
    padding-left: 0
}

.crud .phases-area select {
    border-bottom: 1px solid #233b62;
    margin: .25em 0
}

.crud .phases-area .button {
    display: inline-block;
    padding: .35em 1.5em;
    background-image: linear-gradient(-137deg, #1c304f, #15243c)
}

.crud .phases-area .add-resource, .crud .phases-area .remove-phase {
    margin-right: .5em;
    padding: .25em .5em;
    font-weight: 400;
    padding-top: .3em;
    font-size: .7em;
    font-weight: 700;
    cursor: pointer
}

.crud .phases-area .remove-phase {
    width: 2.5em;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    display: flex;

    flex-direction: column;

    justify-content: center;
    margin-right: 0;

    align-items: center;
    text-align: center
}

.crud .phases-area .remove-phase img {
    filter: invert(1);
    width: 1.1em;
    opacity: .65;
    margin: 0
}

.crud .phases-area .add-resource {
    background-image: linear-gradient(125deg, #375d9a, #5a82c4);
    margin-left: auto;
    padding: .25em .5em
}

.crud .phases-area .phase-name {
    display: inline-block;
    margin-right: .5em
}

.handle {
    cursor: move;
    padding: .35em .5em .45em;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .2)
}

.handle img {
    filter: invert(1);
    width: .8em
}

.global-error-messsages {
    background-image: linear-gradient(45deg, #792b00, #df4f00);
    animation: a 2s linear infinite alternate both;
    padding: 1em 3.5%;
    top: 0;
    left: 0;
    width: 100%
}

.global-error-messsages ul {
    -ms-transform-origin: left top;
    transform-origin: left top;
    padding-left: 1.25em;
    margin: 0
}

.error-messages {
    background-image: linear-gradient(45deg, #792b00, #df4f00);
    animation: a 2s linear infinite alternate both;
    padding: 1em 3.5%;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em
}

.error-messages ul {
    -ms-transform-origin: left top;
    transform-origin: left top;
    padding-left: 1.25em;
    margin: 0
}

.global-error-messsages, .info-box, .success-info {
    padding: 1.5em 3.5%;
    font-size: 1em;
    color: #fff;
    font-weight: 700;
    display: none
}

.global-error-messsages:before, .info-box:before, .success-info:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    animation: c 8s linear infinite;
    opacity: 0
}

.global-error-messsages.warn, .info-box.warn, .success-info.warn {
    background-image: linear-gradient(60deg, #ac3d00, #933400)
}

@keyframes c {
    0% {
        opacity: .25
    }
    10% {
        opacity: .25
    }
    20% {
        opacity: 0
    }
    30% {
        opacity: .35
    }
    65% {
        opacity: 0
    }
    80% {
        opacity: .25
    }
    to {
        opacity: 0
    }
}

.info-box, .success-info {
    background-color: #547f0d;
    margin-bottom: 1em;
    font-size: 1.2em
}

.global-info-box {
    background-image: linear-gradient(135deg, #547f0d, rgba(84, 127, 13, 0));
    position: fixed;
    top: 5vh;
    z-index: 16;
    display: inline-block
}

.global-info-box .remover {
    background-color: rgba(84, 127, 13, .9)
}

.global-info-box.warn .remover {
    background-color: rgba(172, 61, 0, .9)
}

.global-error-messsages, .global-info-box {
    opacity: .9;
    position: fixed;
    z-index: 5
}

.global-error-messsages .remover,
.global-info-box .remover,
.info-box .remover {
    position: absolute;
    top: -.5em;
    right: -.5em;
    font-size: 1.2em;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 50%;
    height: 1.5em;
    width: 1.5em;
    text-align: center;
    padding-top: .1em;
    cursor: pointer
}

.info-box .remover {
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
}

.more {
    padding: 1em 0
}

.more a {
    margin-right: 1em;
    text-decoration: none
}

.coming-soon a {
    text-decoration: none;
    font-weight: 700
}

.rights-matrix td, .rights-matrix th {
    padding: .75em;
    border: 1px solid hsla(0, 0%, 100%, .1);
    width: 20%
}

.rights-matrix table {
    border-collapse: collapse
}

.rights-matrix thead th {
    text-align: center;
    background-color: rgba(0, 0, 0, .1)
}

.rights-matrix th {
    font-size: 1.2em
}

.rights-matrix th input {
    display: none
}

.rights-matrix tbody th {
    text-align: left;
    padding-left: 4rem
}

.rights-matrix tbody tr:last-child td, .rights-matrix tbody tr:last-child th {
    padding-bottom: 3em
}

.rights-matrix tbody tr:nth-child(2n-1) {
    background-color: hsla(0, 0%, 100%, .1)
}

.rights-matrix tbody td {
    text-align: center
}

.rights-matrix .form-item {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.crud-types {
    text-transform: capitalize
}

.dot {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    box-shadow: .1em .1em .2em rgba(50, 84, 139, .2)
}

.headline-wrapper {
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.headline-wrapper h3 {
    margin: 0
}

.headline-wrapper .add-button {
    box-shadow: .1em .1em .2em rgba(50, 84, 139, .2);
    font-size: 1em;
    padding: .4em;
    box-sizing: border-box;
    width: 2em;
    text-align: center;
    height: 2em
}

ul.unstyled a {
    text-decoration: none
}

ul.unstyled li:last-child {
    border: 0
}

.badge {
    font-size: .9em;
    display: inline-block;
    padding: .2em 1em;
    line-height: 1.2em;
    border-radius: .2em;
    background-color: rgba(0, 0, 0, .4);
    color: #fff;
    position: relative;
    margin-right: .5em
}

.badge .mark {
    height: 100%;
    width: .5em;
    position: absolute;
    left: -.25em;
    top: 0
}

.head-wrapper {

    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 1em
}

.head-wrapper, .head-wrapper .mini-form, .head-wrapper .user-actions {
    display: -ms-flexbox;
    display: flex
}

.head-wrapper .mini-form .form-item {
    margin: 0;
    width: 100%
}

.head-wrapper .mini-form input {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
}

.head-wrapper .mini-form button {
    padding: .2em;
    width: 1.5rem
}

.head-wrapper .mini-form button .text {
    font-size: 1.5em
}

.head-wrapper .mini-form button img {
    width: 1.5em;
    filter: invert(1)
}

.head-wrapper h2 {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%
}

.stabilitychecks .head-wrapper {
    display: block
}

.add-button-toggler, .search-button-toggler {
    width: 1.5em;
    font-size: 3em;
    cursor: pointer;
    opacity: .8;
    display: flex;

    align-items: center;
    background: none;
    border: 0;
    box-shadow: none;
    -ms-flex-item-align: end;
    align-self: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 0;
    text-decoration: none
}

.add-button-toggler img, .search-button-toggler img {
    text-align: center;
    width: 80%
}

.head-wrapper .add-button, .head-wrapper .add-form-wrapper, .head-wrapper .search-form-wrapper {
    display: none
}

.resource-checkboxes .form-item {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    margin-bottom: 0 !important
}

.filter-info {
    margin-bottom: 2em
}

.filter-info:empty {
    margin-bottom: 0
}

header {
    padding: 2em 2.5% 1em;
    display: flex;
    color: #fff
}

header .logo {
    filter: grayscale(1) brightness(0);
    opacity: .65;
    max-height: 3em;
    margin-right: 1em
}

header .title {
    display: inline-block;
    font-size: 1.5em;
    margin: 0;
    color: #375d9a;
    font-weight: 700;
    line-height: 1em
}

header .title span {
    font-size: .5em;
    display: block;
    margin-bottom: -.5em
}

header .head-info {
    display: flex;

    align-items: center
}

header .head-info, header .head-info:hover {
    text-decoration: none
}

header .head-info:hover img {
    -ms-transform: rotate(7deg);
    transform: rotate(7deg)
}

header .head-info img {
    width: 2em;
    margin-right: .5em;
    opacity: .75;
    transition: transform 1s
}

header .user-actions {
    margin-left: auto
}

.logout-form button {
    border: 0;
    background-color: transparent
}

.logout-form button img {
    width: 1.5em;
    margin-left: .5em
}

.hidden, [data-load-id], [data-load], [data-set] {
    display: none
}

.flip-list-move {
    transition: transform .5s
}

.no-move {
    transition: transform 0s
}

.ghost {
    background: #1c304f
}

.list-enter-active {
    animation: d .1s ease-in-out
}

.list-leave-active {
    animation: d .1s ease-in-out reverse
}

@keyframes d {
    0% {
        opacity: 0;
        transform: translateX(30px)
    }
    to {
        transform: translateX(0)
    }
}

.ingredients, .phasetype-adder {
    max-height: 20em;
    overflow: auto;
    background-color: #f0f5f9;
    list-style-type: none;
    padding: 0;
    margin: 0;
    color: #192139
}

.ingredients li, .phasetype-adder li {
    margin: 0;
    padding: .5em;
    border-bottom: 1px solid rgba(55, 93, 154, .5);
    cursor: pointer
}

.phasetype-adder li:hover {
    background-color: rgba(55, 93, 154, .1)
}

.phasetype-adder .add-icon {
    float: right;
    font-weight: 700;
    font-size: 1.5em
}

.crud form .phasetype-adder-wrapper {
    -ms-flex: 0 0 97%;
    flex: 0 0 97%;
    width: 100%;
    margin-left: 0
}

.ajax-load .loader-wrapper {
    display: none;
    opacity: .25
}

.ajax-load .content {
    display: block
}

.ajax-load.loading .content {
    display: none
}

.ajax-load.loading .loader-wrapper {
    display: block;
    padding: 1em 0
}

.loader1 {
    opacity: .75;
    text-align: center;
    width: 100%
}

.loader1 img {
    height: 6em;
    width: 6em
}

.recipes-list-wrapper.reduced {
    background-color: transparent
}

.propellant-list, .recipes-list, .resources-list {
    background-color: #fff;
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0
}

.propellant-list.reduced, .recipes-list.reduced, .resources-list.reduced {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: transparent;
    box-shadow: none
}

.propellant-list.reduced .item, .recipes-list.reduced .item, .resources-list.reduced .item {
    min-width: 9em;
    font-size: .925em;
    border-radius: .4em;
    background: hsla(0, 0%, 100%, .9);
    margin-bottom: .5em;
    margin-right: .5em;
    padding: .6em .8em;
    border: 0
}

.propellant-list .vue-recycle-scroller__item-view, .recipes-list .vue-recycle-scroller__item-view, .resources-list .vue-recycle-scroller__item-view {
    cursor: pointer;
    min-height: 2.5em;
    display: flex;
    border-bottom: 1px solid hsla(0, 0%, 81%, .5)
}

.propellant-list .vue-recycle-scroller__item-view .item, .recipes-list .vue-recycle-scroller__item-view .item, .resources-list .vue-recycle-scroller__item-view .item {
    -ms-flex: 0 0 calc(100% - 3.5em);
    flex: 0 0 calc(100% - 3.5em);
    box-sizing: border-box;
    padding: .5em 1em;
    width: calc(100% - 3.5em)
}

.propellant-list .vue-recycle-scroller__item-view .item strong, .recipes-list .vue-recycle-scroller__item-view .item strong, .resources-list .vue-recycle-scroller__item-view .item strong {
    margin-right: .5em;
    display: inline-block
}

.propellant-list .vue-recycle-scroller__item-view .item:focus, .propellant-list .vue-recycle-scroller__item-view .item:hover, .recipes-list .vue-recycle-scroller__item-view .item:focus, .recipes-list .vue-recycle-scroller__item-view .item:hover, .resources-list .vue-recycle-scroller__item-view .item:focus, .resources-list .vue-recycle-scroller__item-view .item:hover {
    background-color: rgba(55, 93, 154, .1)
}

.propellant-list .inci, .recipes-list .inci, .resources-list .inci {
    opacity: .5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: padding .1s, background-color .1s, opacity .1s;
    z-index: 5
}

.propellant-list .inci:hover, .recipes-list .inci:hover, .resources-list .inci:hover {
    white-space: wrap;
    background-color: #fff;
    border: 1px solid hsla(0, 0%, 81%, .5);
    position: absolute;
    box-shadow: .25em .25em .5em rgba(0, 0, 0, .5);
    bottom: 0;
    z-index: 9999;
    right: 3.5em;
    padding: .5em;
    opacity: 1
}

.propellant-list .resource-name, .recipes-list .resource-name, .resources-list .resource-name {
    display: inline-block
}

.resources-list2 .resource-item {
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start
}

.resources-list2 span {
    padding-right: .5em
}

.resources-list2 .resource-name {
    font-weight: 700;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    -ms-hyphens: auto;
    hyphens: auto
}

.resources-list2 .amount {
    margin-left: auto
}

.resource-picker .item, .resource-picker .resource-item, .resources-list .item, .resources-list .resource-item {
    display: flex
}

.resource-picker .numeric-id, .resources-list .numeric-id {
    flex: 0 0 3em
}

.resource-picker .availability, .resources-list .availability {
    flex: 0 0 1.5em
}

.resource-picker .dot, .resources-list .dot {
    display: block;
    width: 1.2em;
    height: 1.2em
}

.resource-picker .inci, .resources-list .inci {
    margin-left: auto;
    flex: 0 0 20%
}

.resource-picker .resource-name, .resources-list .resource-name {
    flex: 0 0 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.resource-picker .prices, .resources-list .prices {
    white-space: nowrap;
    font-size: .8em;
    flex: 0 0 calc(25% - 5em)
}

.recipes-list.reduced {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none
}

.recipes-list.reduced .item {
    min-width: 7em;

    align-items: center;
    cursor: pointer;
    font-size: 1em;
    color: #fff;
    background: #375d9a;
    margin-bottom: .5em;
    margin-right: .5em;
    position: relative
}

.recipes-list.reduced .item:hover .plus {
    opacity: .7
}

.recipes-list.reduced .item .plus {
    opacity: 0;
    position: absolute;
    transition: opacity .1s;
    left: 0;
    width: 100%;
    text-align: center;
    height: 100%;
    color: #fff;
    font-size: 3em;
    top: -.25em;
    right: .25em;
    text-shadow: 0 0 5px rgba(0, 0, 0, .5)
}

.resource-picker {
    position: relative;
    padding-top: 2.5em;
}

.resource-picker .search-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000;
}

.resource-picker .closer {
    top: 0;
    right: 0;
    position: absolute;
    font-size: 1.5em;
    background-color: #000;
    height: 1.5em;
    padding: .1em;
    width: 1.5em;
    line-height: 1em;
    text-align: center;
    cursor: pointer;
    color: #fff;
    opacity: 1;
    border: 1px solid #fff;
}

.resource-picker .resources-list2 {
    max-height: 30em;
    overflow: auto;
}

.propellant-list {
    background-color: hsla(0, 0%, 100%, .8);
    margin: .5em;
    max-height: 20em;
    overflow: auto;
    width: 100%
}

.propellant-list .propellant {
    padding: .5em 1em;
    border-bottom: 1px solid #fff;
    color: #813d9c;
    cursor: pointer
}

.propellant-list .propellant:hover {
    background-color: rgba(55, 93, 154, .1)
}

.tiny {
    font-size: 1em;
    padding: .5em 0
}

.resources-filters {
    display: flex;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 0 !important;
    position: relative
}

.resource-meta-wrapper {
    position: relative
}

.resource-meta-wrapper .closer {
    opacity: .9;
    box-sizing: border-box;
    width: 1.5em;
    height: 1.5em;
    display: flex;

    justify-content: center;

    align-items: center;
    border: 2px solid #375d9a;
    color: #375d9a;
    background-color: rgba(55, 93, 154, .2)
}

.phase-resources {
    background-color: hsla(0, 0%, 100%, .1);
    color: #c3cee1;
    border-collapse: collapse;
    width: 100%
}

.phaseresource {
    display: flex;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2);

    align-items: center;
    min-width: 35em;
    position: relative;
    color: hsla(0, 0%, 100%, .8)
}

.phaseresource:last-child {
    border-bottom: 0
}

.phaseresource:nth-child(2n) {
    background-color: hsla(0, 0%, 100%, .05)
}

.phaseresource .inventory {
    -ms-flex: 0 0 8%;
    flex: 0 0 8%;
    text-align: right
}

.phaseresource .price {
    -ms-flex: 0 0 10em;
    flex: 0 0 10em;
    padding: .25em;
    text-align: right
}

.phaseresource .name {
    padding: .25em;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    display: flex;

    align-items: center
}

.phaseresource .name .dot {
    margin-right: .5em;
    width: 1.25em;
    height: 1.25em;
    -ms-flex: 0 0 1.25em;
    flex: 0 0 1.25em
}

.phaseresource .grams, .phaseresource .percent {
    -ms-flex: 0 0 7em;
    flex: 0 0 7em;
    text-align: right
}

.phaseresource .grams input, .phaseresource .percent input {
    max-width: 6em;
    width: 6em;
    text-align: right
}

.phaseresource .grams {
    padding-right: .5em
}

.phaseresource .percent {
    -ms-flex-item-align: stretch;
    align-self: stretch;
    text-align: right
}

.phaseresource .comment {
    -ms-flex-item-align: stretch;
    align-self: stretch;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.phaseresource .comment input {
    width: 100%;
    border-left: 1px solid hsla(0, 0%, 100%, .2)
}

.phaseresource .cluster {
    width: 8em;
    -ms-flex: 0 0 8em;
    flex: 0 0 8em
}

.phaseresource .cluster-inner {
    display: block
}

.phaseresource .cluster-inner, .phaseresource .supplier {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .5em
}

.phaseresource .supplier {
    width: 9em;

    align-items: center
}

.phaseresource .percent {
    -ms-flex: 0 0 8em;
    flex: 0 0 8em
}

.phaseresource .percent input {
    max-width: none;
    width: 100%
}

.phaseresource .comment input, .phaseresource .percent input {
    font-size: .9em
}

.phaseresource a {
    transition: background-color .2s, letter-spacing .5s;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    text-decoration: none
}

.phaseresource a:focus, .phaseresource a:hover {
    background-color: hsla(0, 0%, 100%, .1);
    letter-spacing: .5px
}

.phaseresource .actions {
    margin-left: auto;
    -ms-flex-align: stretch;
    align-items: stretch;
    min-height: 100%
}

.phaseresource .recipe-price {
    font-size: 1.75em
}

.phaseresource .handle, .phaseresource .handle-fake {
    -ms-flex: 0 0 2.5em;
    flex: 0 0 2.5em
}

.phaseresource .handle {
    -ms-flex-item-align: stretch;
    align-self: stretch;
    display: flex;

    flex-direction: column;

    justify-content: center;
    background-color: hsla(0, 0%, 100%, .1) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .2);

    align-items: center
}

.phaseresource input {
    background-color: rgba(36, 60, 100, .4);
    padding: .35em .5em;
    height: 100%;
    border: 0;
    color: inherit
}

.phaseresource.foot, .phaseresource.head {
    font-weight: 700
}

.phaseresource.foot .comment, .phaseresource.foot .percent, .phaseresource.foot .some-sum, .phaseresource.head .comment, .phaseresource.head .percent, .phaseresource.head .some-sum {
    padding: .75em .85em
}

.phaseresource.foot .percent, .phaseresource.head .percent {
    -ms-flex-item-align: center;
    align-self: center
}

.phaseresource.foot {
    border-bottom: 0
}

.phaseresource.foot .some-sum {
    border-top: 1px solid hsla(0, 0%, 100%, .2);
    white-space: nowrap;
    margin-right: 1em
}

.phaseresource.foot .sum {
    font-size: 1.75em;
    color: #fff
}

.phaseresource .show-resource {
    margin: 0;
    width: 2em;
    -ms-flex: 0 0 2em;
    flex: 0 0 2em;
    background-color: hsla(0, 0%, 100%, .1);
    -ms-flex-item-align: stretch;
    align-self: stretch;
    display: flex;

    justify-content: center;

    flex-direction: column
}

.phaseresource .show-resource img {
    width: 1.5em;
    filter: invert(1)
}

.remove-phaseresource, .remove-recipepropellant, .replace-phaseresource {
    -ms-flex: 0 0 2.5em;
    flex: 0 0 2.5em;
    padding: .5em;
    cursor: pointer;
    text-align: center;
    -ms-flex-item-align: stretch;
    align-self: stretch;

    align-items: center;

    justify-content: center;
    display: flex;

    flex-direction: column
}

.remove-phaseresource img, .remove-recipepropellant img, .replace-phaseresource img {
    filter: invert(1);
    width: 1em;
    opacity: .65
}

.replace-phaseresource {
    padding: 0
}

.replace-phaseresource .small {
    padding: .25em;
    width: 100%;
    height: 100%;
    display: flex;

    align-items: center;

    flex-direction: column;

    justify-content: center;
    transition: background-color .15s
}

.replace-phaseresource .small:focus, .replace-phaseresource .small:hover {
    background-color: rgba(217, 164, 0, .9)
}

.replace-phaseresource img {
    padding: 0
}

.remove-action {
    position: relative
}

.remove-action:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, #ac3d00, #f95800);
    transition: opacity .2s;
    opacity: 0;
    color: #fff
}

.remove-action:focus:before, .remove-action:hover:before {
    opacity: 1
}

.remove-action:focus img, .remove-action:hover img {
    -ms-transform: scale(1.3);
    transform: scale(1.3)
}

.sub-area-inner {
    padding-bottom: 2em;
    margin-inline-start: 1em
}

.sub-area-inner ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.crud .scattered {
    display: flex;
    padding: 0
}

.crud .scattered .sub-small {
    padding: 3em;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%
}

.crud .scattered .sub-small.projecttypes li {
    margin-right: .2em;
    margin-bottom: .2em;
    display: inline-block;
    line-height: 1.2em
}

.crud .scattered .sub-small.projecttypes li:nth-child(2n) a {
    background-color: rgba(55, 93, 154, .2)
}

.crud .scattered .sub-small.projecttypes a {
    padding: .3em .5em;
    border-radius: .3em;
    display: inline-block;
    border: 1px solid hsla(0, 0%, 100%, .2)
}

.crud .scattered .sub-small ul {
    padding: 0;
    margin: 0;
    list-style-type: none
}

.crud .scattered .sub-small a {
    text-decoration: none
}

.crud .scattered .sub-small:nth-child(2) {
    background-color: hsla(0, 0%, 100%, .1)
}

.crud .scattered .sub-small:nth-child(3) {
    background-color: hsla(0, 0%, 100%, .2)
}

.crud .scattered .sub-small:nth-child(4) {
    background-color: hsla(0, 0%, 100%, .3)
}

.crud td a {
    text-decoration: none
}

.attachments-wrapper-outer {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    margin: 0;
    background: #0f2027;
    background: linear-gradient(90deg, #2c5364, #203a43, #0f2027);
    color: hsla(0, 0%, 100%, .8);
    padding-bottom: 1em
}

.attachments-wrapper-outer h3 {
    margin-left: 1.5rem;
    margin-bottom: .25em;
    margin-top: 1em;
    font-size: 1.25em;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.attachments-wrapper-outer h3 img {
    width: 1.5em;
    position: relative;
    top: -.1em;
    margin-right: .5em;
    opacity: .75
}

.attachments-wrapper-outer ul {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none
}

.attachments-wrapper-outer .mark-for-deletion {
    width: 2em;
    padding: .5em;
    margin: 0;
    display: inline-block;
    cursor: pointer
}

.attachments-wrapper-outer .mark-for-deletion img {
    filter: invert(1)
}

.attachments-wrapper-outer .marked-for-deletion {
    text-decoration: line-through;
    opacity: .3
}

.attachments-wrapper-outer a {
    text-decoration: none
}

.attachments-wrapper-outer table {
    text-align: left;
    border-collapse: collapse;
    width: 100%
}

.attachments-wrapper-outer table tr {
    background-color: hsla(0, 0%, 85%, .1)
}

.attachments-wrapper-outer table tr:nth-child(2n) {
    background-color: hsla(0, 0%, 85%, .3)
}

.attachments-wrapper-outer table th {
    background-color: hsla(0, 0%, 70%, .3)
}

.attachments-wrapper-outer table td, .attachments-wrapper-outer table th {
    padding: .2em 1em
}

.attachments-wrapper-outer table td:first-child, .attachments-wrapper-outer table th:first-child {
    padding-left: 1.5em
}

.attachments-wrapper-outer table td:last-child, .attachments-wrapper-outer table th:last-child {
    padding-right: 1em;
    text-align: right
}

.attachments-wrapper-outer .head-wrapper {
    padding: 1.5em 1em 0
}

.attachments-wrapper-outer .head-wrapper h3 {
    margin: 0
}

.download-all.button {
    padding: .5em;
    border-radius: .2em;
    display: inline-block;
    background: none;
    border: 1px solid hsla(0, 0%, 100%, .3)
}

.stabilitychecks form {
    box-shadow: none
}

.stabilitychecks .filters {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.stabilitychecks .filters .button, .stabilitychecks .filters a {
    margin-right: .5em;
    margin-bottom: .5em;
    cursor: pointer;
    display: flex;

    justify-content: center;

    align-items: center;
    box-shadow: .5em .5em 1em transparent;
    transition: background-color .2s, box-shadow .4s
}

.stabilitychecks .filters .button:hover, .stabilitychecks .filters a:hover {
    box-shadow: .5em .5em 1em rgba(28, 47, 77, .2);
    background-color: #fff
}

.stabilitychecks .filters .button {
    font-size: 1.15em
}

.ghost-button {
    border: 1px solid #375d9a;
    color: #375d9a;
    background: none;
    border-radius: .25em;
    text-decoration: none;
    padding: .65em 1.25em;
    background-color: rgba(155, 174, 205, 0);
    transition: background-color .2s
}

.ghost-button:focus, .ghost-button:hover {
    background-color: rgba(155, 174, 205, .3)
}

.waterfill {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: hsla(0, 0%, 100%, .1) !important;
    border: 1px solid rgba(155, 174, 205, .3);
    height: 2.8em;
    border-bottom: 0;
    top: .35em
}

@media (max-width: 1199px) {
    .waterfill {
        text-align: center
    }
}

.waterfill .waterfill-inner {
    animation: e 3s ease-in-out infinite;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3e68ad
}

.waterfill .waterfill-inner span {
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis
}

.waterfill .text {
    z-index: 1;
    white-space: nowrap;
    position: relative;
    left: -1em;
    top: .4em
}

@media (max-width: 1199px) {
    .waterfill .text {
        text-align: center;
        width: 100%;
        display: block;
        position: absolute;
        left: .25em;
        top: .75em
    }

    .waterfill .text img {
        -ms-flex: 0 0 1em;
        flex: 0 0 1em
    }

    .waterfill .text .text-inner {
        display: none
    }
}

@keyframes e {
    0%, to {
        clip-path: polygon(0 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0 100%)
    }
    50% {
        clip-path: polygon(0 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0 100%)
    }
}

.total-volume {
    display: flex;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;

    align-items: center
}

.total-volume .fancy-label {
    white-space: nowrap;
    margin-right: .5em
}

.crud .recipe-add-form {
    box-shadow: none
}

:disabled {
    background-image: linear-gradient(45deg, #f2f2f2, #d9d9d9);
    color: #999;
    cursor: not-allowed
}

.button:disabled img, .save-button:disabled img {
    opacity: .5 !important
}

.button.secondary, .save-button.secondary {
    background-image: linear-gradient(45deg, #d9a400, #ffca27)
}

.recipe-form .form-item-wrapper {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    display: -ms-flexbox;
    display: flex
}

.recipe-form .change-notes label {
    font-weight: 400
}

.name-showing-wrapper {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 1em;
    border-radius: .25em;
    padding: .1em 1em .3em;
    border: 1px solid hsla(0, 0%, 100%, .25);
    margin-right: 1em;
    background-color: hsla(0, 0%, 100%, .1)
}

.name-showing-wrapper label {
    padding: 0 1em .2em .5em;
    display: inline-block;
    white-space: nowrap;
    cursor: pointer
}

.name-showing-wrapper input {
    width: 1.25em;
    height: 1.25em;
    margin-right: .25em;
    position: relative;
    top: .3em
}

.file-actions {
    width: calc(100% - 4.5rem);
    margin-left: 0;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: stretch;
    align-items: stretch
}

.file-actions > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    margin: 1em;
    font-size: 1.25em
}

.file-actions .file-upload .form-item {
    margin: 0;
    background: transparent;
    width: 100% !important
}

.file-actions .file-upload .form-item input {
    background: transparent;
    border: 0
}

.file-actions .button {
    margin: 0
}

.file-actions .download-all, .file-actions .file-upload {
    border: 1px solid #a9a9a9;
    min-height: 2rem;
    background-image: linear-gradient(135deg, #f0f5f9 25%, rgba(240, 245, 249, .5)), url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.227 0c.687 0 1.227.54 1.227 1.227s-.54 1.227-1.227 1.227S0 1.914 0 1.227.54 0 1.227 0z' fill='rgba(55,93,154,0.7)'/%3E%3C/svg%3E");
    border-radius: .1em
}

.file-actions h4 {
    margin-bottom: .5em
}

.file-actions .download-all {
    font-size: .9em;
    display: flex;

    align-items: center;

    flex-direction: column;

    justify-content: center;
    text-decoration: none
}

.crud form .form-item input[type=file] {
    padding: .2em;
    font-size: .9em
}

.delete-form .button, .delete-form button {
    width: auto;
    overflow: hidden;
    background-image: linear-gradient(45deg, #933400, #d04a00)
}

.delete-form .button:before, .delete-form button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, #ac3d00, #f95800);
    transition: opacity .2s;
    opacity: 0
}

.delete-form .button img, .delete-form button img {
    filter: invert(1);
    transition: transform .4s;
    margin: 0
}

.delete-form .button:focus:before, .delete-form .button:hover:before, .delete-form button:focus:before, .delete-form button:hover:before {
    opacity: 1
}

.delete-form .button:focus img, .delete-form .button:hover img, .delete-form button:focus img, .delete-form button:hover img {
    -ms-transform: scale(1.3);
    transform: scale(1.3)
}

.show-resource {
    padding: .5em;
    background-color: rgba(55, 93, 154, .1);
    -ms-flex: 0 0 3em;
    flex: 0 0 3em;
    margin-left: 1em
}

.show-resource img {
    width: 1.25em;
    float: left
}

.virtual-scroller1 {
    height: 20em;
    overflow: auto
}

.logged-in .fancybox__content {
    max-width: 80vw;
    max-height: 80vh;
    overflow: visible;
    border-radius: .3em;
    padding: 0;
    position: relative;
    box-shadow: .1em .1em 2em rgba(0, 0, 0, .5)
}

.logged-in .fancybox__content .page-wrapper {
    min-height: auto
}

.logged-in .fancybox__content .quickfinder-wrapper, .logged-in .fancybox__content .sidebar {
    display: none
}

.logged-in .fancybox__content .main-content {
    margin-left: 0;
    width: 100%;
    padding: 0;
    padding-top: 3em
}

.logged-in .fancybox__content .main-content .inner.crud {
    margin: 0;
    width: 100%;
    padding-right: 0
}

.logged-in .fancybox__content h2 {
    padding: 1rem 2rem 2rem
}

.logged-in .fancybox__content main {
    display: block
}

.logged-in .fancybox__content .main-inner > .inner {
    padding: 0
}

.logged-in .fancybox__content .back, .logged-in .fancybox__content .object-actions, .logged-in .fancybox__content footer, .logged-in .fancybox__content h2 span, .logged-in .fancybox__content header {
    display: none
}

.fancybox__backdrop {
    background-color: rgba(11, 19, 31, .7)
}

.fancybox-overlay, .fancybox__backdrop {
    transition: none !important;
    animation: none !important
}

[data-fancybox-close] {
    top: -1em !important;
    opacity: 1;
    right: 1em !important;
    background-color: #375d9a;
    width: 2em;
    font-size: 2em;
    height: 2em;
    border-radius: 50%;
    box-sizing: border-box
}

.compare-table tbody td, .compare-table tfoot th {
    border-right: 1px solid hsla(0, 0%, 81%, .5)
}

.compare-table tfoot th {
    text-align: right
}

.compare-table tfoot th span {
    font-weight: 400
}

.selectors-wrapper {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.selectors-wrapper .form-item, .selectors-wrapper select {
    margin-right: 2em;
    margin-right: 1em;
    min-width: 15em
}

.chip {
    border-radius: .3em;
    padding: .5em 1em;
    background-color: hsla(0, 0%, 100%, .5);
    margin-right: .5em;
    margin-bottom: .5em;
    position: relative
}

.chip .delete {
    position: absolute;
    top: -.75em;
    right: -.75em;
    font-size: 1em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #a77450;
    line-height: 1em;
    box-sizing: border-box;
    display: flex;
    width: 1.5em;
    height: 1.5em;

    flex-direction: column;

    justify-content: center;

    align-items: center;
    color: #fff
}

.chip .delete img {
    width: 1em;
    height: 1em
}

.recipes-compare-form h2 {
    margin-left: 2rem;
    padding-top: 1.5em
}

.project-form .certifcations {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1em;
    margin-left: .5em;
    -ms-flex: 0 0 calc(100% - 1em);
    flex: 0 0 calc(100% - 1em);
    border-radius: .2em;
    background-color: hsla(0, 0%, 100%, .1);
    padding: .5em;
    border: 1px solid hsla(0, 0%, 100%, .2)
}

.number-data {
    text-align: right
}

.list-enter-active, .list-leave-active {
    transition: all .25s ease
}

.list-enter, .list-leave-to {
    opacity: 0;
    transition: all .25s ease;
    -ms-transform: translateY(100px);
    transform: translateY(100px)
}

.exclude-from-grid {
    margin-left: .5em;
    width: 100%
}

.exclude-from-grid h3 {
    margin-left: 0;
    margin-bottom: .25em
}

.exclude-from-grid .packages {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left
}

.exclude-from-grid .packages .chip {
    padding: 0;
    display: flex;

    align-items: center;
    margin-bottom: 1em;
    background-color: #aa7651;
    color: #fff
}

.exclude-from-grid .packages .chip div {
    display: block;
    padding-top: .4em;
    padding-bottom: .4em;
    padding-right: .5em
}

.exclude-from-grid .packages .chip div.target-price, .exclude-from-grid .packages .chip div:first-child {
    padding-left: .5em
}

.exclude-from-grid .packages .chip div:last-of-type {
    padding-right: 1em
}

.exclude-from-grid .packages .chip .separator {
    padding-left: 0;
    padding-right: 0
}

.exclude-from-grid .packages .target-price {
    font-weight: 700
}

.exclude-from-grid .packages .delete {
    padding: 0 !important;
    padding-top: .1em !important;
    display: flex;

    justify-content: center;

    align-items: center;
    text-align: center
}

.exclude-from-grid .packages .delete div {
    padding: 0 !important
}

.packages-form {
    background-color: rgba(170, 118, 81, .2);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: .05em .05em .1em rgba(50, 84, 139, .1);
    border-radius: .5em;
    padding: 1.5em 1em 1em;
    margin-bottom: 1em;
    position: relative;
    clear: both
}

.packages-form [type=radio] {
    display: none
}

.packages-form label {
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: inline-flex;
    border-color: rgba(217, 164, 0, .5);
    margin-right: .5em;
    margin-bottom: .5em
}

.packages-form label .text {
    background-color: #d9a400;
    color: #fff;
    padding: .5em
}

.packages-form label input {
    width: 100%;
    width: 7em;
    background-color: rgba(217, 164, 0, .1)
}

.packages-form label input::-webkit-input-placeholder {
    opacity: .1
}

.packages-form label input::-moz-placeholder {
    opacity: .1
}

.packages-form label input:-ms-input-placeholder, .packages-form label input::-ms-input-placeholder {
    opacity: .1
}

.packages-form label input::placeholder {
    opacity: .1
}

.packages-form .mls {
    border-color: rgba(55, 93, 154, .5)
}

.packages-form .mls .text {
    background-color: #375d9a
}

.packages-form .mls input {
    background-color: rgba(55, 93, 154, .1)
}

.packages-form .amount {
    border-color: rgba(129, 61, 156, .5)
}

.packages-form .amount .text {
    background-color: #813d9c
}

.packages-form .amount input {
    background-color: rgba(129, 61, 156, .1)
}

.packages-form .price {
    border-color: rgba(25, 33, 57, .5)
}

.packages-form .price .text {
    background-color: #192139
}

.packages-form .price input {
    background-color: rgba(25, 33, 57, .1)
}

.packages-form [type=text] {
    border: 0
}

.packages-form .package-save-button {
    display: inline-block;
    position: absolute;
    bottom: -1em;
    right: .5em
}

.package-add-button {
    padding: .5em 1em;
    background-color: #d9a400;
    background-image: none;
    color: #fff;
    border-radius: .25em;
    cursor: pointer
}

.package-add-button, .radio-group {
    display: inline-block
}

.form-group, .radio-group {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: stretch;
    align-items: stretch;

    justify-content: flex-start
}

.form-group label, .radio-group label {
    height: 100%;
    display: flex;

    justify-content: center;

    flex-direction: column;
    border-right: 1px solid #6c91cb;
    padding: .5em
}

.form-group label.active, .radio-group label.active {
    background-color: #233b62
}

.form-group label:last-child, .radio-group label:last-child {
    border-right: 0
}

.radio-group {
    background-color: #92add8;
    color: #fff
}

.form-group {
    border: 1px solid #6c91cb;
    border-radius: .5em;
    overflow: hidden
}

.form-group [type=number] {
    border: 0
}

.styled-table thead input {
    border: 0;
    background-color: hsla(0, 0%, 100%, .7);
    border-radius: .2em;
    width: 100%
}

.pagination {
    display: flex;

    justify-content: center;
    margin: .25em 0;
    list-style-type: none;

    align-items: center;
    overflow: hidden;
    position: relative
}

.pagination a, .pagination span {
    text-decoration: none;
    padding: .5em;
    line-height: 1em;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid hsla(0, 0%, 100%, .7);
    border-bottom: 0;
    border-right: 0;
    display: block;
    min-width: 2em;
    text-align: center;
    background-color: rgba(55, 93, 154, .2);
    margin: .2em;
    border-radius: .2em
}

.pagination a.active, .pagination a.next, .pagination a.prev, .pagination span.active, .pagination span.next, .pagination span.prev {
    background-color: #fff;
    color: #375d9a
}

.pagination a.active, .pagination span.active {
    font-weight: 700
}

.pagination span {
    opacity: .5
}

.pagination .next, .pagination .prev {
    position: absolute;
    top: 0;
    z-index: 5
}

.pagination .prev {
    left: -.2em
}

.pagination .next {
    right: -.2em
}

.styled-table thead .filter-head th .input-wrap {
    display: flex;

    align-items: center
}

.styled-table thead .filter-head th .input-wrap img {
    width: 1.25em;
    height: 1.25em;
    margin-left: -3.2em;
    margin-right: .1em;
    opacity: .7
}

.styled-table thead .filter-head th .input-wrap [type=checkbox] {
    opacity: .8;
    width: 1.7em;
    height: 1.7em;
    -ms-flex: 0 0 1.7em;
    flex: 0 0 1.7em
}

.styled-table thead .filter-head th .input-wrap [type=text] {
    padding-right: 3.2em
}

.ts-control, .ts-wrapper.single.input-active .ts-control {
    background-color: transparent
}

.headlines-wrapper {
    display: -ms-flexbox;
    display: flex
}

.headlines-wrapper h2.first-headline {
    -ms-flex: 60%;
    flex: 60%;
    display: block
}

.headlines-wrapper h2.aside-headline {
    margin-left: auto;
    opacity: .5;
    font-size: 1.2em

}

.headlines-wrapper h2.aside-headline a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.headlines-wrapper h2 small {
    font-size: .6em
}

.headlines-wrapper a {
    text-decoration: none
}

.back-hierarchie {
    width: 1em;
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -.2em
}

.prices-area .grams {
    font-weight: 700;
    font-size: 1.2em;
    padding: .5em
}

.prices-area .grams div {
    padding: 0 !important
}

.prices-area .grams .amount {
    opacity: .5
}

.prices-area .grams .ml {
    font-size: .825em;
    font-weight: 400;
    padding: 0 !important
}

.prices-area .chip {
    position: relative;
    border-color: #375d9a !important
}

.prices-area .packages-price-calc {
    padding: .2em
}

.prices-area .packages-price-calc .tag {
    position: absolute;
    bottom: -1em;
    right: .2em;
    box-shadow: .1em .1em .25em rgba(0, 0, 0, .2);
    white-space: nowrap;
    padding: .2em;
    border-radius: .2em;
    color: #fff;
    font-weight: 700;
    line-height: 1em;
    background-color: #547f0d
}

.prices-area .packages-price-calc.warn .tag {
    background-color: #ac3d00
}

a {
    cursor: pointer
}

.form-item.textline {
    -ms-flex-item-align: center;
    align-self: center;
    width: 100% !important
}

.form-item.textline a {
    text-decoration: none
}

.form-item.wide {
    -ms-flex: 0 0 98%;
    flex: 0 0 98%
}

.form-item.image-wrap {
    margin-top: 2em !important
}

.form-item.image-wrap img {
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3)
}

.crud .resource-relations {
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0
}

.resource-relation {
    padding: 1em;

    flex: 1;
    border-right: 1px solid rgba(55, 93, 154, .25)
}

.resource-relation .sample-list, .resource-relation h3 {
    margin: 0 .5rem
}

.resource-relation a {
    text-decoration: none
}

.recipe-form .readonly {
    background-color: hsla(0, 0%, 100%, .1) !important;
    border-color: hsla(0, 0%, 100%, .2) !important
}

td.change-notes {
    max-width: 25em
}

.warn-icon {
    width: 1.2em;
    position: relative;
    top: -.2em;
    display: inline-block
}

.propellant-meta {
    display: flex;
    -ms-flex: 0 0 99%;
    flex: 0 0 99%;
    box-sizing: border-box;

    align-items: center
}

.propellant-meta h3 {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin-right: 1em;
    margin-bottom: 0
}

.propellant-meta .propellant-volume {
    display: flex;
    margin-bottom: 0 !important;

    align-items: center
}

.propellant-meta .propellant-volume label {
    white-space: nowrap;
    margin-right: .25em
}

.propellant-meta .add-propellant {
    margin-left: auto
}

.recipe-propellants {
    margin: .5em;
    background-color: #542765;
    width: 100%;
    border-radius: .3em;
    box-shadow: .1em .1em 1em rgba(0, 0, 0, .25);
    border: 1px solid hsla(0, 0%, 100%, .25)
}

.recipe-propellants .recipe-propellant {
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: stretch;
    align-items: stretch
}

.recipe-propellants .recipe-propellant .name {
    padding: .5em 1em
}

.recipe-propellants .recipe-propellant input {
    background-color: hsla(0, 0%, 100%, .1);
    border: 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.recipe-propellants .recipe-propellant:last-child {
    border-bottom: 0
}

.recipe-propellants .recipe-propellant .percent {
    margin-left: auto
}

.recipe-propellants .recipe-propellant .percent input {
    text-align: right
}

.recipe-propellants .remove-recipepropellant img {
    margin: 0
}

.recipepropellants-sum {
    font-size: 1.5em;
    font-weight: 700;
    margin: .5rem;
    width: 100%;
    text-align: right
}

.crud .sample-prices-area {
    padding: 1.5em !important
}

.crud .sample-prices-area h3 {
    margin-left: .1em;
    margin-bottom: .5em;
    opacity: .75
}

.crud .sample-prices-area table {
    border-collapse: collapse
}

.crud .sample-prices-area td, .crud .sample-prices-area th {
    padding: .5em 1em;
    border: 1px solid hsla(0, 0%, 100%, .2)
}

.crud .sample-prices-area th {
    background-color: hsla(0, 0%, 100%, .15)
}

.logged-in header {
    background-color: rgba(55, 93, 154, .1);
    padding-top: 1em;
    padding-bottom: 1.2em;
    border-bottom: 1px solid rgba(55, 93, 154, .25)
}

.logged-in footer {
    display: none
}

.logged-in aside {
    padding: 3.5em .5em 1em 2.5%;
    position: absolute;
    overflow: auto;
    top: 5em;
    left: 0;
    width: 7em
}

@media (min-width: 1200px) {
    .logged-in aside {
        width: 22em
    }
}

@media (max-width: 1199px) {
    .logged-in aside {
        overflow: visible;
        background-color: #f0f5f9
    }

    .logged-in aside .nav-sub {
        height: 0;
        overflow: hidden
    }

    .logged-in aside .text {
        display: none
    }

    .logged-in aside #sidebar-search-form {
        width: 0
    }

    .logged-in aside:hover {
        width: 22em;
        overflow: hidden;
        z-index: 6;
        box-shadow: 0 0 1em rgba(28, 47, 77, .15);
        border-bottom-right-radius: 2em
    }

    .logged-in aside:hover .nav-sub {
        height: auto
    }

    .logged-in aside:hover .text {
        display: block
    }

    .logged-in aside:hover #sidebar-search-form {
        width: auto
    }
}

.logged-in aside .plastically {
    box-sizing: border-box;
    width: 100%
}

.logged-in aside a.inactive {
    opacity: .5;
    filter: grayscale(1)
}

.logged-in aside a[href] {
    font-style: normal;
    line-height: 1.2em
}

.logged-in aside img {
    opacity: .65
}

.logged-in .general-main {
    padding: 1.75em 4% 1.75em 2%;
    width: 100%;
    transition: opacity 2s
}

.logged-in .quickfinder-wrapper {
    padding: .55em 4% 2em 2%
}

.logged-in .main-content {
    margin-left: 21em;
    padding: 3em 0 1em;
    width: calc(100% - 21em)
}

.logged-in .hide-sidebar .main-content {
    margin-left: 0;
    width: 100%;
}

.logged-in .hide-sidebar .general-main {
    padding-left: 2.5%;
    padding-right: 2.5%;
}

@media (max-width: 1199px) {
    .logged-in .main-content {
        margin-left: 7em;
        width: calc(100% - 7em)
    }
}

.logged-in .notifications {
    background-color: #375d9a;
    padding: 2em 1.5vw;
    color: #fff;
    flex: 0 0 14vw;
    font-size: .8em
}

.logged-in .notifications ul {
    margin: 0;
    padding: 0 0 0 1.35em
}

.logged-in .notifications li {
    line-height: 1.4em;
    margin-bottom: 1em
}

.logged-in .recipes-nav-item {
    color: #a88418
}

.logged-in .recipes-nav-item img {
    filter: hue-rotate(180deg)
}

.logged-in .recipes-nav-item .more {
    color: #a88418;
    border-color: #a88418
}

.sidebar ul {
    padding: 0;
    margin: 0;
    list-style-type: none
}

.sidebar .nav-item {
    display: flex;
    position: relative
}

.sidebar .nav-item .text span {
    display: block;
    font-size: .9em;
    opacity: .5;
    line-height: 1.1em
}

.sidebar .tile-link {
    display: -ms-flexbox;
    display: flex
}

.sidebar a {
    display: block;
    width: 100%;
    padding: .75em 2em;
    text-decoration: none
}

.sidebar .image {
    width: 1.25em;
    min-width: 1.25em;
    opacity: .5;
    margin-right: .5em;
    float: left
}

.sidebar .more {
    margin-left: auto;
    position: absolute;
    left: -.5em;
    font-size: 1.1em;
    padding: .25em;
    top: .6em;
    opacity: .5;
    background: transparent;
    border: 2px solid rgba(55, 93, 154, .9);
    color: #375d9a;
    width: 1.5em;
    display: flex;

    justify-content: center;

    align-items: center;
    font-weight: 700;
    height: 1.5em;
    box-sizing: border-box;
    border-radius: 50%
}

.sidebar .nav-sub {
    display: none
}

.sidebar .nav-sub a {
    padding-left: 6.25em;
    font-size: .9em;
    padding-top: .5em;
    line-height: 1.1em;
    padding-bottom: .5em
}

.sidebar .searchform {
    position: relative;
    margin-bottom: 1.5em
}

.sidebar .searchform ::-webkit-input-placeholder {
    opacity: .25 !important;
    color: #375d9a
}

.sidebar .searchform ::-moz-placeholder {
    opacity: .25 !important;
    color: #375d9a
}

.sidebar .searchform :-ms-input-placeholder, .sidebar .searchform ::-ms-input-placeholder {
    opacity: .25 !important;
    color: #375d9a
}

.sidebar .searchform ::placeholder {
    opacity: .25 !important;
    color: #375d9a
}

.sidebar .nav-sidebar {
    padding-left: .5em
}

.sidebar .text {
    letter-spacing: -.025em
}

.plastically {
    padding: .75em .5em .65em 3em;
    background-color: rgba(55, 93, 154, .1);
    border: 0;
    border-bottom: 1px solid rgba(55, 93, 154, .25);
    border-radius: .75em;
    box-shadow: inset 0 0 .2em rgba(55, 93, 154, .25)
}

.plastically-label {
    position: absolute;
    left: 1.5em;
    top: .45em;
    width: 2em;
    padding: .2em;
    background: none;
    border: 0;
    opacity: .2
}

.page-dashboard .dates {
    padding: 1em 4% 1em 2%
}

.page-dashboard .dates .headline-wrapper {
    width: 90%;
    max-width: 100em;
    margin-bottom: 1em;
    display: flex;

    justify-content: flex-start;

    align-items: center
}

.page-dashboard .dates h3 {
    margin-right: .5em
}

.page-dashboard .dates .button {
    font-size: .8em
}

.page-dashboard .dates a {
    text-decoration: none
}

.page-dashboard .dates .table-wrapper {
    border-radius: 1em;
    background-color: rgba(55, 93, 154, .1);
    width: 100%;
    max-width: 100em;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .075), 0 2px 2px rgba(0, 0, 0, .075), 0 4px 4px rgba(0, 0, 0, .05), 0 8px 8px rgba(0, 0, 0, .05), 0 16px 16px rgba(0, 0, 0, .05);
    -webkit-backdrop-filter: blur(.2em);
    backdrop-filter: blur(.2em)
}

.page-dashboard .dates table {
    border-collapse: collapse;
    width: 100%
}

.page-dashboard .dates table td {
    padding: .5em 1em;
    border-top: 1px solid #fff
}

.page-dashboard .dates table td:first-child {
    font-weight: 700;
    font-size: 1.1em
}

.page-dashboard .dates table tr:first-child td {
    border-top: 0
}

.draggable-list {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.draggable-list .handle {
    margin-right: 1em
}

.draggable-list .default-item {

    flex: 1
}

.draggable-list .list-item {
    display: flex;

    align-items: center;
    border-top: 1px solid hsla(0, 0%, 81%, .5)
}

.draggable-list .list-item input {
    max-width: 100%;
    width: 100%
}

.draggable-list .handle {
    display: inline-block
}

.draggable-list .delete-form {
    margin-left: auto;
    padding: 0
}

.draggable-list .actions {
    margin-left: auto;
    display: flex;
    margin-right: .5em
}

.draggable-list .button {
    padding: .5em;
    margin-right: .25em
}

.draggable-list .button img {
    width: 1em;
    margin: 0;
    opacity: 1
}

.draggable-list .text {
    text-shadow: 0 0 2em rgba(0, 0, 0, .2)
}

.draggable-list form {
    box-shadow: none
}

.draggable-list .form-item {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box
}

.draggable-list .form-item input {
    padding-left: .25em
}

.list-head {
    display: flex;
    font-weight: 700;
    background: rgba(0, 0, 0, .2)
}

.list-head > * {
    padding-top: .5em;
    padding-bottom: .5em
}

.list-head .handle {
    -ms-flex: 0 0 2.75em;
    flex: 0 0 2.75em;
    background: none
}

.list-head .default-item {

    flex: 1
}

.list-head .actions {
    -ms-flex: 0 0 4em;
    flex: 0 0 4em
}

.block.standalone .form-item {
    margin-bottom: 0
}

.block.standalone h4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: 0;
    font-size: 1.2em;
    margin-left: .75rem
}

.block.standalone .add-form {
    padding: 1em 2em 1em 1.5em;
    box-sizing: border-box
}

.block.standalone .add-form .items-wrapper {
    -ms-flex-align: end;
    align-items: flex-end;
    box-sizing: border-box
}

.block.standalone .button {
    margin: 0;
    margin-left: .5em
}

.short-message {
    background-color: rgba(84, 127, 13, .8);
    border-top-left-radius: .25em;
    border-bottom-left-radius: .25em;
    margin-bottom: 1em;
    font-size: 1.2em;
    position: fixed;
    bottom: 5vh;
    right: 0;
    color: #fff;
    font-weight: 700;
    z-index: 50;
    transition: transform .2s;
    padding: .75em 2em;
    -ms-transform: translateX(100%);
    transform: translateX(100%)
}

.short-message.visible {
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.short-message.semiwarn {
    background-color: rgba(179, 123, 0, .8)
}

.crud form table .form-item {
    width: 100%;
    text-align: left
}

.crud form table .form-item [type=checkbox] {
    width: 1.5em;
    height: 1.5em
}

.evaluation-table, .styled-table.with-background {
    background-color: #fff
}

.evaluation-table .thead1 {
    background: #375d9a;
    color: #fff
}

.evaluation-table .thead1 .tr1 {

    align-items: center
}

.evaluation-table .thead1 .former {
    padding: .5em .2em
}

.evaluation-table .td1, .evaluation-table .th1 {
    padding: .5em;
    -ms-flex: 0 0 8%;
    flex: 0 0 8%
}

.evaluation-table .td1 a, .evaluation-table .th1 a {
    text-decoration: none;
    font-weight: 700
}

.evaluation-table .td1.date, .evaluation-table .th1.date {
    -ms-flex: 0 0 10em;
    flex: 0 0 10em;
    display: flex
}

.evaluation-table .td1.criterion, .evaluation-table .th1.criterion {
    display: flex
}

.evaluation-table .th1 {
    background: #375d9a
}

.evaluation-table .former {
    flex: 0 0 3em
}

.evaluation-table .method {
    -ms-flex: 0 0 12%;
    flex: 0 0 12%;
    word-break: break-all
}

.evaluation-table .criterion {
    -ms-flex: 0 0 9em;
    flex: 0 0 9em;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-all
}

.evaluation-table .environment {
    -ms-flex: 0 0 14%;
    flex: 0 0 14%
}

.evaluation-table .days {
    -ms-flex: 0 0 6em;
    flex: 0 0 6em
}

.evaluation-table .tr1 {
    display: flex;
    border-bottom: 1px solid #cfcfcf
}

@media (max-width: 999px) {
    .evaluation-table .td1 {
        border-bottom: 1px solid #cfcfcf
    }
}

.evaluation-table .td-fullspan input[type=text] {
    width: 100%
}

.evaluation-table .tr-outer:nth-child(2n) {
    background-color: rgba(55, 93, 154, .1)
}

@media (max-width: 999px) {
    .evaluation-table .tr-outer:nth-child(2n) .td1 {
        background-color: rgba(55, 93, 154, .1)
    }
}

.evaluation-table .striking {
    -ms-flex: 0 0 5em;
    flex: 0 0 5em
}

.evaluation-table .td1.former {
    font-weight: 700
}

.evaluation-table .delete-td, .evaluation-table .delete-th {
    -ms-flex: 0 0 2em;
    flex: 0 0 2em
}

.evaluation-table .delete-td button, .evaluation-table .delete-th button {
    padding: .25em;
    width: 1.5em
}

.evaluation-table .find-related-button {
    border: 1px solid #375d9a;
    color: #375d9a;
    line-height: 1em;
    background-image: none;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    box-sizing: border-box;
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: inline-flex;

    justify-content: center;

    align-items: center;
    margin-left: .5em;
    margin-top: -.25em
}

.evaluation-table .related-count-0 .find-related-button, .evaluation-table .related-count- .find-related-button {
    opacity: .3
}

.evaluation-table .related-count-0 .criterion .find-related-button, .evaluation-table .related-count- .criterion .find-related-button {
    opacity: 1
}

.evaluation-table .td-fullspan {
    flex: 0 0 100%;
    display: flex;
    background-color: rgba(55, 93, 154, .7);
    color: #fff;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2)
}

.evaluation-table .td-fullspan .evaluation {
    font-weight: 700
}

.evaluation-table .td-same-except-criterion {
    background-color: rgba(217, 164, 0, .35);
    color: #534828;
    border-bottom: 1px solid rgba(83, 72, 40, .5)
}

.evaluation-table .delete-th, .evaluation-table .th1.striking {
    padding-left: 0
}

.evaluation-table .td1.actions select {
    width: 100%
}

.evaluation-table .td-same-except-criterion .evaluation {
    min-width: 22%
}

.evaluation-table .td-same-except-criterion .evaluation * {
    width: 100%
}

.evaluation-table .form-item .fakeinput, .evaluation-table .form-item .is-input, .evaluation-table .form-item .ts-wrapper, .evaluation-table .form-item input:not([type=submit]), .evaluation-table .form-item textarea {
    min-height: 0
}

.evaluation-table .form-item {
    margin: 0 !important
}

.evaluation-table .actions {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    -ms-flex: 0 0 16rem;
    flex: 0 0 16rem;
    box-sizing: border-box;
    width: 16rem
}

.evaluation-table .actions .form-item {
    width: 100% !important
}

.evaluation-table .tbody1 .actions {
    padding: .375em 0
}

.evaluation-table .striking {
    -ms-flex: 0 0 7em;
    flex: 0 0 7em;
    padding-top: .75em;
    padding-bottom: .75em
}

.evaluation-table .evaluated {
    font-weight: 700
}

.evaluation-table .evaluated input, .evaluation-table .evaluated select {
    font-weight: inherit;
    background-color: #a7bd81;
    border: 0
}

.evaluation-table .former:has(.empty) {
    border: 0;
    opacity: .35
}

.evaluation-table .th1.former {
    font-size: .8em
}

.evaluation-table .radios {
    display: flex;

    align-items: center
}

.evaluation-table .radios .text {
    margin-right: .5em
}

.evaluation-table .radios input {
    margin-right: .15em;
    width: 1.2em;
    -ms-flex: 0 0 1.2em;
    flex: 0 0 1.2em;
    height: 1.2em
}

.evaluation-table .radios label {
    display: flex;

    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-right: .5em
}

.evaluation-table .radios .later {
    opacity: .5
}

.evaluation-table .radios .later .text {
    font-size: .8em;
    line-height: .8em
}

.evaluation-table [type=number] {
    width: 100%
}

.tr1.evaluated1 {
    color: #fff;
    background-color: #547f0d;
    position: relative;
    font-weight: 700
}

.tr1.evaluated1 .td1 {
    line-height: .8em;
    padding: .3em .5em
}

.tr1.evaluated1 .actions input {
    padding: .1em .2em;
    font-size: inherit;
    border: 0;
    color: inherit
}

.tr1.evaluated1 .find-related-button {
    color: #fff;
    border-color: #fff
}

.tr1.evaluated1 .striking {
    padding: .3em .5em 0
}

.evaluated-evaluation-table .td1, .evaluated-evaluation-table .th1 {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-preferred-size: 10em;
    flex-basis: 10em
}

.evaluated-evaluation-table .evaluation {
    -ms-flex-preferred-size: auto;
    flex-basis: auto
}

.evaluation-table .recipenumber, .recipes-table .recipenumber {
    white-space: nowrap;
    -ms-flex: 0 0 8rem;
    flex: 0 0 8rem
}

.no-input {
    -ms-flex-item-align: center;
    align-self: center
}

.checked-stabilitychecks {
    font-weight: 700
}

.icon {
    width: 1.5em;
    height: 1.5em;
    opacity: .5;
    filter: invert(1)
}

.fullstabi {
    background-color: rgba(42, 123, 42, .2);
    color: #2a7b2a;
    border-color: #2a7b2a
}

.fullstabi:hover {
    background-color: rgba(55, 93, 154, .8)
}

.wateradder {
    padding: 1em 0 0;
    background-color: hsla(0, 0%, 100%, .2);
    border-radius: .2em;
    color: #fff;
    margin-bottom: 1em
}

.wateradder h3 {
    margin: 0 0 .25em;
    padding: 0 1rem
}

.wateradder .waterresource {
    padding: .5em 1rem;
    cursor: pointer;
    border-top: 1px solid hsla(0, 0%, 100%, .1)
}

.wateradder .waterresource:hover {
    background-color: hsla(0, 0%, 100%, .1)
}

.dropdown-wrapper {
    position: relative;
    text-align: left
}

.dropdown-wrapper .dropdown {
    position: absolute;
    display: none;
    top: 3em;
    left: 0;
    background-color: #d9a400;
    text-decoration: none
}

.dropdown-wrapper .dropdown a {
    padding: .5em;
    color: #fff;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid hsla(0, 0%, 100%, .4)
}

.dropdown-wrapper button {
    display: block;
    width: 100%;
    border: 0;
    color: #fff;
    background: none;
    text-align: left;
    border-bottom: 1px solid hsla(0, 0%, 100%, .5)
}

.wide-radios {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
}

.wide-radios .radios-wrapper {
    display: flex;
    margin-bottom: 1em
}

.semiwide-radios {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
}

.semiwide-radios .radios-wrapper {
    display: flex;
    margin-bottom: .5em
}

.add-waterresource-meta {
    padding: 1em
}

.crud form .add-waterresource-meta .form-item {
    min-width: 50%;
    margin: 0 0 .5em
}

.fillresource-results {
    max-height: 15em;
    overflow: auto;
    background-color: hsla(0, 0%, 100%, .2)
}

.advanced-select, .custom-advanced-select {
    border-radius: .25em;
    background: url(../_icons/down.svg) no-repeat right .8em center/1.1em, linear-gradient(270deg, rgba(155, 174, 205, .7) 2.5em, rgba(155, 174, 205, .2) 0);
    cursor: pointer;
    border-bottom: 1px solid #d9a400 !important;
    border-radius: .2em !important
}

.custom-advanced-select .extra-info {
    font-size: .8em
}

.custom-checkset {
    position: relative
}

.custom-checkset .button-background {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .15
}

.custom-checkset .text {
    position: relative;
    z-index: 2
}

tr.inactive {
    opacity: .5
}

.companies-table .badge {
    padding: .2em .5em;
    line-height: 1em;
    font-size: .8em
}

.companies-table .badge.success {
    background-color: rgba(84, 127, 13, .2);
    color: #547f0d
}

.success-info-permanent {
    background-color: #547f0d;
    color: #fff;
    padding: .5em 1em;
    border-radius: .25em;
    font-weight: 700;
    margin-bottom: 1em
}

tbody {
    transition: opacity .15s
}

tbody.searching {
    opacity: .2
}

.etc-dots {
    position: relative;
    top: -.2em
}

.toggler-all {
    font-size: .7em;
    padding: .3em .5em;
    background-color: hsla(0, 0%, 100%, .3)
}

.toggler-all .off, input:checked ~ .toggler-all .on {
    display: none
}

input:checked ~ .toggler-all .off {
    display: inline-block
}

.components-splitting {
    margin-bottom: .75em
}

.components-splitting:last-of-type {
    margin-bottom: 0
}

.item-wrapper {
    position: relative
}

.breadcrumb, .quickfinder {
    background-color: hsla(0, 0%, 100%, .5);
    display: inline-block;
    border-radius: .5em;
    box-shadow: .1em .1em .2em rgba(50, 84, 139, .2);
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden
}

.quickfinder {
    overflow: visible
}

.quickfinder .inner {
    padding: 0;
    margin: 0;
    width: 100%
}

.quickfinder .closer {
    width: 2em;
    height: 2em;
    top: -.5em;
    right: .5em;
    border: 2px solid #375d9a;
    color: #375d9a;
    text-align: center;
    display: flex;

    justify-content: center;

    align-items: center;
    background-color: hsla(0, 0%, 100%, .9);
    opacity: .7
}

.quickfinder .closer:focus, .quickfinder .closer:hover {
    opacity: 1
}

.quickfinder .item-wrapper {
    padding: 0 1rem;
    position: relative
}

.quickfinder .quickfinder-item {
    display: flex;
    padding: .5em .75rem;
    transition: background-color .1s, color .1s
}

.quickfinder .quickfinder-item:nth-child(2n) {
    background-color: rgba(55, 93, 154, .05);
    border: 1px solid rgba(55, 93, 154, .1)
}

.quickfinder .quickfinder-item:focus, .quickfinder .quickfinder-item:hover {
    background-color: #375d9a;
    color: #fff;
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3);
    box-sizing: border-box;
    outline: 0;
    cursor: pointer
}

.quickfinder .quickfinder-item .number {
    min-width: 3.5em;
    padding-right: 1em;
    text-align: right
}

.quickfinder .quickfinder-item .badge {
    font-size: .8em;
    padding: .2em .4em
}

.quickfinder h3 {
    margin: 0;
    padding: .5rem 1rem;
    background-image: linear-gradient(135deg, rgba(55, 93, 154, .7), rgba(55, 93, 154, .5));
    color: #fff
}

.quickfinder input {
    margin-bottom: 1em;
    box-sizing: border-box;
    width: 100%
}

.quickfinder table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid rgba(55, 93, 154, .2)
}

.quickfinder table td {
    padding: .5em 1rem;
    border-bottom: 1px solid rgba(55, 93, 154, .2)
}

.quickfinder .quickfinder-result-list {
    width: 100%;
    z-index: 2;
    background-color: #fff;
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3);
    margin-top: -.2em
}

.quickfinder .quickfinder-result-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.quickfinder .quickfinder-result-list::-webkit-scrollbar {
    width: 5px;
    background-color: #fff
}

.quickfinder .quickfinder-result-list::-webkit-scrollbar-thumb {
    background-color: #375d9a
}

.quickfinder .quickfinder-result-list h4 {
    margin: 0;
    padding: .75em .75rem .5em;
    font-size: 1.2em;
    color: #375d9a
}

.quickfinder .chosen-and-chosable {
    display: flex
}

.quickfinder .chosen-and-chosable > * {

    flex: 1
}

.quickfinder .chosen-and-chosable h3 {
    display: flex
}

.quickfinder .chosen-and-chosable h3 input {
    width: 1.1em;
    height: 1.1em;
    margin-right: .3em;
    margin-bottom: 0;
    background-color: hsla(0, 0%, 100%, .5)
}

.quickfinder .chosen-and-chosable .input-wrap {
    display: flex;
    margin-left: auto
}

.quickfinder .chosable {
    background-color: rgba(55, 93, 154, .1);
    overflow: auto;
    max-height: 25.5em;
    -ms-flex: 0 0 35%;
    flex: 0 0 35%
}

.quickfinder .chosen {
    border-right: 1px solid rgba(55, 93, 154, .3)
}

.quickfinder .info {
    padding: 1em;
    opacity: .6;
    font-style: italic
}

.quickfinder .item-wrapper {
    margin-top: 1em;
    padding-bottom: .5em
}

.quickfinder .close {
    border-radius: 50%;
    border: 1px solid rgba(55, 93, 154, .3);
    color: #375d9a
}

.quickfinder a {
    text-underline-offset: .175em
}

.dropzone {
    background-color: hsla(0, 0%, 100%, .1);
    box-shadow: inset .1em .1em .25em rgba(0, 0, 0, .2), inset 0 0 .1em rgba(0, 0, 0, .4), inset 0 0 1em rgba(0, 0, 0, .05);
    margin: 1em;
    border-radius: 1em;
    border: 2px dotted hsla(0, 0%, 100%, .3);
    min-height: 5em
}

.dropzone .dz-preview.dz-image-preview {
    background-color: transparent
}

.attachments-wrapper-outer input[type=file] {
    background-color: hsla(0, 0%, 100%, .1);
    box-shadow: inset .1em .1em .25em rgba(0, 0, 0, .2), inset 0 0 .1em rgba(0, 0, 0, .4), inset 0 0 1em rgba(0, 0, 0, .05);
    margin: 1em;
    border-radius: 1em;
    border: 2px dotted hsla(0, 0%, 100%, .3);
    min-height: 5em;
    box-sizing: border-box;
    width: calc(100% - 2em)
}

.attachments-table {
    max-height: 32em;
    overflow: auto;
    position: relative
}

.attachments-table-below {
    position: relative;
    z-index: 2;
    overflow: visible
}

.attachments-table-below:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 1em;
    top: auto;
    top: -1em;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .3), transparent);
    border-bottom: 1px solid hsla(0, 0%, 100%, .5)
}

input[type=file]::-webkit-file-upload-button {
    border: 0;
    padding: .2em .4em;
    background-color: #a29bfe;
    transition: 1s;
    opacity: 0;
    width: 0
}

input[type=file]::file-selector-button {
    border: 0;
    padding: .2em .4em;
    background-color: #a29bfe;
    transition: 1s;
    opacity: 0;
    width: 0
}

.attachment {
    word-break: break-all
}

.uploading-info {
    padding: .5em 1.5em 1em;
    background: linear-gradient(-45deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .15), rgba(0, 0, 0, .7));
    background-size: 300% 300%;
    animation: g 5s ease infinite
}

.uploading-info h3 {
    margin: .5em 0;
    padding: 0
}

.uploading-line:not(:last-child) {
    border-bottom: 1px solid hsla(0, 0%, 100%, .2)
}

.uploading-line {
    display: flex;

    align-items: center
}

.uploader {
    width: 21px;
    margin-right: 1em;
    display: inline-block;
    aspect-ratio: 1;
    --g: radial-gradient(farthest-side, #0000 calc(95% - 1px), #fff calc(100% - 1px) 98%, #0000 101%) no-repeat;
    background: var(--g), var(--g), var(--g);
    background-size: 10px 10px;
    animation: f 1.5s infinite;
    opacity: .35
}

.file-upload {
    position: relative
}

.file-upload input[type=file] {
    color: transparent;
    cursor: pointer
}

.file-upload .instructions {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;

    justify-content: center;

    align-items: center;
    opacity: .7
}

.file-upload .instructions .icon {
    margin-right: 1em;
    width: 2em;
    height: 2em
}

@keyframes f {
    0% {
        background-position: 0 0, 0 100%, 100% 100%
    }
    25% {
        background-position: 100% 0, 0 100%, 100% 100%
    }
    50% {
        background-position: 100% 0, 0 0, 100% 100%
    }
    75% {
        background-position: 100% 0, 0 0, 0 100%
    }
    to {
        background-position: 100% 100%, 0 0, 0 100%
    }
}

@keyframes g {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
    to {
        background-position: 0 50%
    }
}

.error-message-upload {
    background-color: #ac3d00;
    padding: 1em 1.5em;
    font-weight: 700
}

.documenttypes {
    position: relative;
    padding: .5em 1em;
    background-color: hsla(0, 0%, 100%, .05)
}

.documenttypes .chosen-and-add {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.documenttypes .tag {
    font-size: .9em;
    padding: .25em .5em;
    border: 1px solid hsla(0, 0%, 100%, .5);
    border-radius: .2em;
    margin-right: .25em;
    margin-bottom: .25em;
    font-weight: 700;
    position: relative;
    padding-right: 2em
}

.documenttypes .important {
    border-color: #547f0d;
    color: #fff;
    background-color: #547f0d
}

.documenttypes .remover1 {
    border-left: 1px solid #fff;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background-color: hsla(0, 0%, 100%, .25)
}

.documenttypes .ghost-button, .documenttypes .remover1 {
    display: inline-block;
    padding: .25em .5em;
    opacity: .5;
    cursor: pointer
}

.documenttypes .ghost-button {
    border-color: #fff;
    color: #fff;
    line-height: .9em;
    font-weight: 700;
    margin-bottom: .25em
}

.documenttypes .twocol {
    column-count: 2;
    column-gap: 0
}

.documenttypes .info-strg {
    padding: 1em;
    display: block;
    border-bottom: 1px solid hsla(0, 0%, 100%, .5);
    opacity: .5
}

.documenttypes .select-button {
    padding: .5em 1em;
    cursor: pointer;
    border: 1px solid hsla(0, 0%, 100%, .05)
}

.documenttypes .select-button.selected, .documenttypes .select-button:focus, .documenttypes .select-button:hover {
    background-color: hsla(0, 0%, 100%, .1)
}

.advanced-select.multi .ts-control {
    padding-right: 3em !important
}

.comparison-table {
    background-color: #fff;
    border-collapse: collapse;
    min-width: 100%;
    border-radius: .3em;
    overflow: hidden
}

.comparison-table .meta1 {
    background-color: hsla(0, 0%, 100%, .5);
    color: #375d9a;
    padding: 0
}

.comparison-table .meta1 > div {
    cursor: pointer
}

.comparison-table .meta1 > div, .comparison-table .meta1 > span {
    display: flex;

    align-items: center;
    padding: .5em 1em
}

.comparison-table .meta1.crit {
    max-width: 10em
}

.comparison-table .meta1 .icon {
    filter: invert(0)
}

.comparison-table .closer {
    border: 1px solid #fff;
    color: #fff;
    padding: .1em;
    position: absolute;
    width: 1.25em;
    height: 1.25em;
    text-align: center;
    box-sizing: border-box;
    line-height: 1em;
    margin: 0;
    top: .1em;
    right: .1em;
    opacity: .8
}

.comparison-table .closer:after {
    content: "x";
    position: absolute;
    top: .1em;
    left: .3em;
    color: #fff
}

.comparison-table thead th {
    border-right: 1px solid hsla(0, 0%, 100%, .5)
}

.comparison-table td {
    border: 1px solid rgba(55, 93, 154, .2)
}

.comparison-table tbody th {
    opacity: .5;
    text-align: left;
    max-width: 30em;
    white-space: normal
}

.recipes-list {
    margin-bottom: 2em
}

.selectors-wrapper {
    padding: 1em;
    background-color: hsla(0, 0%, 100%, .9);
    box-shadow: .1em .1em .2em rgba(50, 84, 139, .2);
    margin-bottom: 2em
}

.has-preloaded-data {
    opacity: .2
}

.breadcrumb .inner {
    margin: 0;
    display: flex;

    justify-content: flex-start;

    align-items: center;
    width: 100%;
    padding: .5em 1em
}

.breadcrumb .editquickfinder {
    margin-left: auto
}

.breadcrumb a {
    text-decoration: none;
    color: #375d9a
}

.breadcrumb a span {
    color: #192139;
    display: inline-block;
    padding: 0 .6em;
    opacity: .5
}

.quickfinder-breadcrumb-title {
    opacity: .5;
    display: inline-block;
    margin-right: 1em
}

.realize-info-block table {
    background-color: #fff;
    border-collapse: collapse;
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3)
}

.realize-info-block td, .realize-info-block th {
    padding: .5em 1em
}

.realize-info-block th {
    text-align: left
}

.realize-info-block tr:nth-child(2n) td {
    background-color: rgba(55, 93, 154, .2)
}

.realize-info-block tr.warn td {
    background-color: #ac3d00;
    color: #fff;
    border-bottom: 1px solid hsla(0, 0%, 100%, .5)
}

.realize-info-block .available-amount, .realize-info-block .realize-amount {
    text-align: right;
    font-weight: 700
}

.realize-info-block .resources-wrapper .resources-list {
    z-index: 2;
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3);
    position: absolute;
    width: 500px;
    color: #375d9a
}

.realize-info-block .resource-name-td {
    display: flex;

    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative
}

.realize-info-block .resource-name-td .button {
    white-space: nowrap;
    min-width: 7em;
    text-align: center
}

.realize-info-block .resource-name-inner {
    margin-right: .5em
}

.realize-info-block .resources-filters {
    display: none
}

.realize-info-block [type=checkbox] {
    width: 1.5em;
    height: 1.5em
}

.realize-info-block .resource-picker {
    min-width: 55em
}

.realize-info-block .critical td:first-child {
    background-image: linear-gradient(90deg, #ac3d00 1em, transparent 0)
}

.table-wrapper {
    overflow: auto;
    position: relative
}

.table-wrapper.is-scrollable:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2em;
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35))
}

.no-button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0
}

.editquickfinder {
    background-color: #375d9a;
    padding: .25em;
    border-radius: 50%;
    width: 2em;
    height: 2em
}

.editquickfinder img {
    width: 1em;
    height: 1em
}

.relation-table {
    background-color: hsla(0, 0%, 100%, .9);
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3);
    border-radius: .5em
}

.relation-table table {
    width: 100%;
    border-collapse: collapse
}

.relation-table thead th {
    text-align: left;
    background-color: rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.relation-table td, .relation-table th {
    padding: .5em 1em
}

.relation-table tr:not(:last-child) td {
    border-bottom: 1px solid rgba(0, 0, 0, .11)
}

.relation-table .name {
    font-weight: 700;
    text-decoration: none
}

.relation-table .time {
    opacity: .5
}

.rights-area {
    background-color: hsla(0, 0%, 100%, .2);
    width: 104%;
    margin-left: -1%;
    margin-top: 1em;
    margin-bottom: 1em
}

.rights-area .form-item {
    -ms-flex: 0 0 102% !important;
    flex: 0 0 102% !important;
    width: 102% !important
}

.rights-area .radios-wrapper {
    display: -ms-flexbox;
    display: flex
}

.rights-area .radios-wrapper .radio {
    padding: .5em;
    -ms-flex: 0 0 22%;
    flex: 0 0 22%;
    border: 1px solid hsla(0, 0%, 100%, .25);
    border-radius: .5em;
    margin: 1%
}

.date-filter {
    background-color: #375d9a;
    display: inline-block;
    padding: .5em 1em;
    border-radius: .5em;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #fff
}

.date-filter input {
    background-color: hsla(0, 0%, 100%, .7);
    border: 0;
    border-radius: .2em
}

.screenshot-wrapper {
    height: 10em;
    width: 100%;
    overflow: auto
}

.screenshot-wrapper .screenshot {
    display: block;
    box-shadow: inset 1em 1em 5em rgba(0, 0, 0, .8)
}

.bug-form {
    position: fixed;
    bottom: 1em;
    right: 1em;
    max-width: 50em;
    min-width: 50%;
    background-image: url(../img/bg.avif);
    padding: 2em;
    box-shadow: 1em 1em 3em rgba(0, 0, 0, .5);
    border-radius: .5em;
    color: #fff;
    display: none;
    z-index: 16;
    max-height: calc(100vh - 2em);
    overflow: auto
}

.bug-form .close {
    width: 2em;
    height: 2em;
    font-size: 1.5em;
    position: absolute;
    top: 1em;
    right: 1em;
    color: hsla(0, 0%, 100%, .5);
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    padding: .25em;
    font-weight: 700;
    border: 2px solid hsla(0, 0%, 100%, .5);
    border-radius: 50%
}

.bug-form button {
    background-image: linear-gradient(#d9a400, #8d6a00);
    margin-top: 1em;
    width: 100%;
    font-size: 1.2em
}

.bug-form h3 {
    margin-bottom: 0
}

.bug-form input {
    width: 100%
}

.bug-form input, .bug-form textarea {
    color: inherit
}

.bug-form textarea {
    min-height: 15em
}

.bug-form .form-item {
    margin-bottom: 1.5em
}

.bug-form-toggler {
    position: fixed;
    bottom: 1em;
    right: 1em;
    background-image: linear-gradient(#375d9a, rgba(55, 93, 154, .5));
    box-shadow: .1em .1em .5em rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    text-align: center;
    color: #fff;
    height: 5em;
    width: 5em;
    padding: .5em;
    border-radius: 50%;
    overflow: hidden;
    z-index: 16;
    cursor: pointer
}

.bug-form-toggler .text {
    font-weight: 700;
    font-size: .8em
}

.latest-improvements-list {
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
    border-right: 1px solid hsla(0, 0%, 100%, .1);
    border-bottom: 1px solid hsla(0, 0%, 100%, .5);
    border-radius: .2em;
    overflow: hidden;
    color: #192139;
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3);
    position: absolute;
    right: 0;
    top: 2.5em;
    min-width: 50vw;
    max-width: 100vw;
    z-index: 25
}

.latest-improvements-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 90vh;
    overflow: auto
}

.latest-improvements {
    position: relative
}

.latest-improvements h2 {
    background-image: linear-gradient(135deg, rgba(55, 93, 154, .5), rgba(55, 93, 154, .9));
    color: #fff;
    padding: .5rem 1rem;
    margin: 0
}

.latest-improvements li {
    padding: .5rem 1rem;
    border-bottom: 1px solid rgba(55, 93, 154, .2)
}

.latest-improvements h3 {
    margin: 0
}

.empty-info {
    padding: .5em .75rem;
    font-style: italic;
    opacity: .5
}

.latest-improvements-list {
    display: none
}

.latest-improvements-list .date {
    font-weight: 400;
    font-size: .9em;
    opacity: .5
}

.indicator {
    position: absolute;
    background-color: #ac3d00;
    color: #fff;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;
    font-size: .9em;
    top: -.5em;
    right: -.5em
}

.ticketstable .solved {
    color: #547f0d !important;
    opacity: .7
}

.ticketstable .badge {
    font-size: .8em;
    padding: .25em .5em;
    border-radius: .2em
}

.ticketstable .progress {
    color: #b37b00;
    background-color: rgba(255, 175, 0, .5)
}

.ticketstable .to-ask {
    color: #a82c00;
    background-color: rgba(255, 78, 15, .4)
}

.ticketstable tr.prio-1 {
    color: #ac3d00;
    font-weight: 700
}

.ticketstable tr.prio-2 {
    color: #ac3d00
}

.ticketstable tr.prio-3 {
    color: #da8251
}

.comments-area {
    background-color: #fff;
    padding: 1em
}

.comments-area h3 {
    margin-left: 0
}

.comments-area .comment {
    padding: 1em 0
}

.comments-area .comment:last-child {
    border-bottom: 0
}

.comments-area .comment-body {
    background-color: #e6e6e6;
    padding: 1em 1.25em;
    border-radius: .3em
}

.add-comment {
    padding: 1em;
    background: #fff
}

.add-comment.is-sending {
    opacity: .6
}

.comment-date {
    opacity: .5
}

.show-all-link {
    background: linear-gradient(125deg, #3e68ad, #a5bbdf);
    color: #fff;
    display: block;
    font-weight: 700;
    padding: 1em 1.25rem;
    text-decoration: none
}

.name-short {
    white-space: nowrap
}

.baserecipes-list {
    position: relative
}

.baserecipes-list .vue-recycle-scroller {
    position: absolute;
    top: 3em;
    z-index: 5;
    width: 300px;
    opacity: .95;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: #fff
}

.baserecipes-list .item {
    padding: .5em;
    display: block;
    cursor: pointer;
    border-bottom: 1px solid #cfcfcf;
    white-space: nowrap;
    text-overflow: ellipsis
}

.phases-area-loader {
    text-align: center;
    padding: 3em
}

.phases-area-loader .loader {
    width: 60px;
    height: 25px;
    border: 2px solid;
    box-sizing: border-box;
    border-radius: 50%;
    display: grid;
    animation: h 2s infinite linear;
    border-color: #fff;
    opacity: .7;
    margin-left: auto;
    margin-right: auto
}

.phases-area-loader .loader:after, .phases-area-loader .loader:before {
    content: "";
    grid-area: 1/1;
    border: inherit;
    border-radius: 50%;
    animation: inherit;
    animation-duration: 3s;
    border-color: #fff;
    opacity: .6
}

.phases-area-loader .loader:after {
    --s: -1;
    opacity: .8
}

@keyframes h {
    to {
        transform: rotate(calc(var(--s, 1) * 1turn))
    }
}

@media print {
    .bug-form-toggler, .filter-info, .print-button, .quickfinder-wrapper, .selectors-wrapper, aside, footer, header {
        display: none !important
    }

    .main-content {
        margin: 0 !important;
        width: 100%
    }

    .recipecomparisons-index .back {
        display: none
    }

    table td, table th {
        border: 1px solid #000 !important
    }
}

.recipecomparisons-index .user-actions {
    display: none
}

.recipecomparisons-index .filters {
    padding: .5em 0;
    display: -ms-flexbox;
    display: flex
}

.recipecomparisons-index .filters label {
    margin-right: 1em;
    display: flex;

    align-items: center
}

.recipecomparisons-index .filters input {
    width: 1.25em;
    height: 1.25em;
    -ms-flex: 0 0 1.25em;
    flex: 0 0 1.25em;
    margin-right: .5em
}

.recipecomparisons-index .link-to-resource {
    text-decoration: none
}

.recipecomparisons-index .link-to-resource .resource-inci {
    font-weight: 400
}

.register-info-area {
    text-align: left
}

.users-table-has-icons-field img {
    width: 1.5em
}

.big-char {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: -.2em;
    opacity: .7
}

.attachments-area {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: block !important
}

.attachments-area .attachments {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.attachments-area .attachment {
    width: 14em;
    margin: .5em
}

.ticket-description {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 15em;
    overflow: hidden
}

.items-wrapper-simple {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    justify-content: flex-start
}

.items-wrapper-simple > * {
    margin-right: 1em;
    margin-bottom: 1em
}

.items-wrapper-simple.in-headline {

    align-items: center;
    margin-bottom: .5em
}

.items-wrapper-simple.in-headline > * {
    margin-bottom: 0
}

.ticket-name {
    min-width: 15em;
    max-width: 25em;
    -ms-hyphens: auto;
    hyphens: auto;
    text-decoration: none;
    font-weight: 700
}

.styled-table .incis {
    white-space: nowrap;
    display: block;
    overflow: hidden;
    width: 12em;
    text-overflow: ellipsis
}

.styled-table .incis:hover {
    overflow: visible;
    white-space: normal;
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3);
    position: absolute;
    background-color: #fff;
    padding: .5em;
    z-index: 2
}

.styled-table .incis:empty:hover {
    box-shadow: none;
    background-color: transparent
}

.price-info-button {
    -ms-flex-item-align: end;
    align-self: flex-end
}

.special-button {
    padding: .35em .5em;
    text-decoration: none;
    display: block;
    border: 1px solid #375d9a;
    border-radius: .2em;
    color: #375d9a
}

.special-button img {
    filter: none;
    font-size: 1em;
    margin-right: .5em
}

.fancybox__content > .f-button.is-close-btn:hover {
    opacity: 1;
    background-color: #375d9a
}

.stabilitychecks .verbose {
    display: none;
    font-size: .85em
}

.stabilitychecks .verbose td {
    padding-top: .15em;
    padding-bottom: .15em
}

.method-toggler {
    width: 1.2em;
    height: 1.2em;
    box-sizing: border-box;
    padding: 0;
    text-align: center;
    filter: none;
    font-size: 1.3em;
    cursor: pointer;
    background-color: rgba(55, 93, 154, .2)
}

.not-verbose td {
    background-color: #fafafa;
    border-bottom: 1px solid rgba(55, 93, 154, .3)
}

.not-verbose.even td {
    background-color: #cad7ec
}

.resources-table .prices {
    white-space: nowrap
}

.resources-table .smaller {
    font-size: .9em
}

.resources-table .supplier {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8em
}

.resources-table .resourcetypes {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12em
}

.resources-table .resourcetypes select {
    width: 100%;
    max-width: 10em;
    box-sizing: border-box
}

.resources-table .resourceclusters-inner {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8em
}

.resource-select-filter {
    width: 8em
}

.inci-table {
    border-collapse: collapse
}

.inci-table td, .inci-table th {
    border: 1px solid hsla(0, 0%, 100%, .2)
}

.stabilitychecks-table .not-verbose .criterion {
    display: none
}

.stabilitychecks-table .opened .criterion {
    display: block
}

.samples-wrapper {
    display: flex;
    margin-bottom: 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.sample-wrapper {
    margin: 0 2em 5em 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%
}

.sample-wrapper h3 {
    margin-left: 0;
    margin-bottom: .3em
}

.sample-wrapper h3 span {
    font-weight: 400
}

.sample-wrapper .sample-name {
    font-weight: 700
}

.inci-loader {
    margin-top: 1em;
    padding: .5em 0
}

.inci-loader-inner {
    max-height: 300px;
    overflow: auto;
    border-top: 1px solid hsla(0, 0%, 100%, .7)
}

.inci-loader {
    background-color: hsla(0, 0%, 100%, .1);
    position: relative;
    border-radius: .3em;
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3)
}

.inci-loader .inci-item {
    display: block;
    padding: .5em;
    border-bottom: 1px solid hsla(0, 0%, 81%, .5)
}

.inci-loader .closer {
    font-size: 2em;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid #fff;
    position: absolute;
    top: -.25em;
    right: -.25em;
    display: flex;

    justify-content: center;

    align-items: center;
    background-color: #375d9a
}

.component-adder-button {
    top: 2em;
    position: relative;
    margin-bottom: 2em
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 5s
}

.fade-enter, .fade-leave-to {
    opacity: 0
}

.delete-column {
    min-width: 2.2em
}

.subform {
    position: relative;
    top: 0;
    z-index: 2
}

.evaluations-wrapper .filters {
    display: -ms-flexbox;
    display: flex
}

.evaluations-wrapper .filters .form-item:not(:last-child) {
    margin-right: .5em
}

.evaluations-wrapper .printer-icon {
    width: 1.5em;
    height: 1.5em;
    margin-left: .5em;
    cursor: pointer
}

.evaluations-wrapper .print {
    margin-left: auto;
    margin-right: .5em
}

@media print {
    .evaluations-wrapper .styled-table {
        box-shadow: none !important;
        width: 100% !important;
        overflow: visible
    }

    .evaluations-wrapper .styled-table table {
        width: 100%
    }

    .evaluations-wrapper .form-item {
        border: 1px solid #000;
        padding: .1em;
        box-sizing: border-box
    }
}

@media print {
    .main-content {
        width: 100%
    }

    .back, .printer-icon, .save-button {
        display: none !important
    }
}

.resource-picker {
    position: absolute;
    top: 3em;
    background-color: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    z-index: 25;
    border-radius: .3em;
    border: 1px solid hsla(0, 0%, 100%, .2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 2px 2px 2px rgba(0, 0, 0, .1), -2px 4px 4px rgba(0, 0, 0, .1), 4px 8px 8px rgba(0, 0, 0, .1), -16px 16px 16px rgba(0, 0, 0, .1), 1em 1em 3em rgba(0, 0, 0, .1);
    color: #fff;
    width: 90%
}

.resource-picker .resource-item {
    padding: 8px;
    cursor: pointer;
    outline: none;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2)
}

.resource-picker .resource-item:hover {
    background-color: rgba(0, 0, 0, .7)
}

.resourcecluster-edit .resource-picker {
    position: relative;
    top: 0;
    width: calc(100% + 2em);
    margin-left: -1em
}

.resourcecluster-edit .resource-picker .inci, .resourcecluster-edit .resource-picker .name {
    padding: .3em
}

.resourcecluster-edit .resource-picker .name {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%
}

.resourcecluster-edit .resource-picker .inci {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    background-color: rgba(0, 0, 0, .1);
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: .9em
}

.resourcecluster-edit .resource-picker .resource-item {
    padding: 0;
    -ms-flex-align: stretch;
    align-items: stretch
}

.resourcecluster-edit .resource-picker .resource-item:focus {
    background-color: #000
}

.resourcecluster-edit .resource-picker .resource-item.head {
    background-color: hsla(0, 0%, 100%, .5);
    color: #000
}

.resourcecluster-edit .resources-area {
    display: block;
    padding: 0
}

.resourcecluster-edit .resources-area ul {
    padding: 0;
    margin: 0;
    list-style-type: none
}

.resourcecluster-edit .resources-area li {
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;

    align-items: center;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2)
}

.resourcecluster-edit .resources-area a {
    text-decoration: none;
    color: #fff;
    display: inline-block;
    padding: .5em 1.2rem
}

.resourcecluster-edit .resources-area .remove {
    padding: .25em;
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;

    align-items: center;
    cursor: pointer;

    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    font-weight: 700;
    margin-right: 1em;
    transition: background-color .25s
}

.resourcecluster-edit .resources-area .remove:focus, .resourcecluster-edit .resources-area .remove:hover {
    background-color: #ac3d00
}

.resourcecluster-edit .resources-area .resource-name {
    width: 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
}

.resourcecluster-edit .resources-area .amount {
    text-align: right;
    width: 5em
}

.resourcecluster-edit .resources-adder {
    margin: 1.3rem
}

.resourcecluster-edit .sum {
    padding: 1rem;
    font-weight: 700;
    text-align: right;
    font-size: 1.5em;
    opacity: .8
}

.resourcecluster-edit .sum span {
    font-weight: 400;
    opacity: .7
}

.ts-dropdown .option, .ts-wrapper.multi .ts-control > div {
    padding: .5em .25em;
    line-height: 1.1em;
    font-size: .9rem
}

.recipe-form .resource-picker {
    right: 0;
    text-align: left;
    top: 2em
}

.recipe-form .search-box {
    display: flex;

    align-items: center
}

.recipe-form .search-box input {
    width: calc(100% - 3em);
    background-color: #fff
}

.recipe-form .search-box .closer {
    margin-left: auto;
    padding: .5em;
    font-weight: 700;
    font-size: 1.3em;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    display: flex;

    justify-content: center;

    align-items: center;
    margin-right: .5em
}

.recipes-table .project-id-input {
    width: 3em
}

.recipes-table .clientselect, .recipes-table .projectsearch {
    overflow: visible
}

.recipes-table .advanced-select {
    background-color: #fff;
    font-size: 1.1em;
    width: 100%
}

.recipes-table .ts-control {
    padding-top: .375em;
    padding-bottom: .35em
}

.multiple-inputs {
    display: -ms-flexbox;
    display: flex
}

.multiple-inputs input:not(:last-child) {
    margin-right: .25em
}

.import-block .others a {
    display: block;
    margin: .5em 0;
    padding: .5em 0
}

.baserecipes-choser {
    position: absolute;
    background-color: hsla(0, 0%, 100%, .98);
    box-shadow: .5em .5em 4em rgba(0, 0, 0, .6);
    border-radius: .3em;
    z-index: 5
}

.baserecipes-list .vue-recycle-scroller {
    width: 500px;
    position: relative
}

.form-item.search-baserecipe {
    margin-bottom: -1em !important;
    border-bottom: 1px solid rgba(55, 93, 154, .5) !important;
    display: block;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    width: 90% !important
}

.recipecomparisons-index .table-wrapper {
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3)
}

.recipecomparisons-index .numeric-id-resource {
    width: 3.5em;
    text-align: right;
    display: inline-block;
    margin-right: 1em;
    color: #000
}

.recipecomparisons-index .missing {
    background-color: #ac3d00;
    color: #fff
}

.recipecomparisons-index .highlight-diff {
    background-color: #e69e00;
    color: #fff;
    font-weight: 700
}

.recipecomparisons-index .added-in-following {
    background-color: #d67600;
    color: #fff;
    font-weight: 700
}

@media print {
    .recipecomparisons-index {
        font-size: .85em
    }

    .recipecomparisons-index .added-in-following, .recipecomparisons-index .highlight-diff, .recipecomparisons-index .missing {
        color: #000 !important
    }
}

@media print {
    .recipecomparisons-index .closer, .recipecomparisons-index .filters, .recipecomparisons-index .recipes-list-wrapper {
        display: none
    }
}

@media print {
    .logged-in .main-content {
        width: 100%
    }
}

.filters-and-print {
    display: flex;

    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    background-color: hsla(0, 0%, 100%, .8)
}

.filters-and-print .form-item {
    max-width: 20em
}

.filters-and-print .filters {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.filters-and-print .save-button {
    position: absolute;
    right: -.5em;
    bottom: 1.2rem
}

.stability-button-wrapper {
    padding: 1rem;
    background-color: hsla(0, 0%, 100%, .8)
}

.sort-button {
    cursor: pointer
}

.stabilitychecks-sort .sort-icon {
    display: none
}

.stabilitychecks-sort .sort-icon-default {
    display: inline
}

.stabilitychecks-sort.is-sorted-asc .sort-icon-default,
.stabilitychecks-sort.is-sorted-desc .sort-icon-default {
    display: none
}

.stabilitychecks-sort.is-sorted-asc .sort-icon-asc {
    display: inline
}

.stabilitychecks-sort.is-sorted-desc .sort-icon-desc {
    display: inline
}

.td1 .delete-form {
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.td1 .delete-form button {
    margin-right: .5em
}

.td1 .delete-form [type=checkbox] {
    width: 1.5em;
    height: 1.5em
}

.delete-th {
    display: flex;

    align-items: center;
    gap: .2em
}

.move-button {
    border: 1px solid hsla(0, 0%, 100%, .5);
    background: none;
    padding: .35em .5em;
    display: inline-block;
    color: #fff;
    white-space: nowrap;
    border-radius: .2em;
    background-color: hsla(0, 0%, 100%, .2);
    font-size: 1em;
    position: relative
}

.move-lists {
    position: absolute
}

.documenttypes-choser-wrapper, .move-lists {
    position: absolute;
    top: 2.5em;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    z-index: 25;
    border-radius: .3em;
    border: 1px solid hsla(0, 0%, 100%, .2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 2px 2px 2px rgba(0, 0, 0, .1), -2px 4px 4px rgba(0, 0, 0, .1), 4px 8px 8px rgba(0, 0, 0, .1), -16px 16px 16px rgba(0, 0, 0, .1), 1em 1em 3em rgba(0, 0, 0, .1)
}

.move-lists {
    right: auto;
    left: 0;
    display: -ms-flexbox;
    display: flex
}

.move-lists ul {
    margin: 0;
    padding: 0
}

.move-lists li {
    padding: .2em 1em;
    border-bottom: 1px solid hsla(0, 0%, 100%, .25)
}

.recipe-move-list {
    column-count: 2;
    border-left: 1px solid #fff;
    border-bottom: 1px solid hsla(0, 0%, 100%, .6)
}

.move-list-headline {
    font-weight: 700;
    font-size: 1.2em;
    padding: .5rem 1rem;
    background-color: hsla(0, 0%, 100%, .2)
}

.move-clickbutton {
    cursor: pointer
}

.move-clickbutton:focus, .move-clickbutton:hover {
    background-color: hsla(0, 0%, 100%, .1)
}

[name=approachnotes] {
    height: 17em;
    font-size: 1em !important
}

.realized-recipe .add-resource, .realized-recipe .add-some, .realized-recipe .button.waterfill, .realized-recipe .handle, .realized-recipe .remove-phase, .realized-recipe .remove-phaseresource, .realized-recipe .replace-phaseresource, .realized-recipe .scaling-button {
    position: relative;
    z-index: -5
}

.realized-recipe .baserecipes-choser, .realized-recipe .custom-approachtype-link {
    display: none
}

.realized-recipe #stabilitychecksets {
    background-color: hsla(0, 0%, 100%, .5)
}

.document-search {
    background-color: rgba(0, 0, 0, .2);
    color: #fff;
    border: 1px solid hsla(0, 0%, 100%, .2);
    border-radius: .2em
}

.document-search::-webkit-input-placeholder {
    color: hsla(0, 0%, 100%, .7)
}

.document-search::-moz-placeholder {
    color: hsla(0, 0%, 100%, .7)
}

.document-search:-ms-input-placeholder, .document-search::-ms-input-placeholder {
    color: hsla(0, 0%, 100%, .7)
}

.document-search::placeholder {
    color: hsla(0, 0%, 100%, .7)
}

.formatted-number-component::-webkit-inner-spin-button, .formatted-number-component::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.formatted-number-component[type=number] {
    -moz-appearance: textfield
}

.custom-number-input {
    display: -ms-flexbox;
    display: flex
}

.custom-number-input .increment-decrement-buttons {
    display: flex;

    flex-direction: column;

    justify-content: flex-start
}

.custom-number-input .increment-decrement-buttons button {
    font-size: .75em;
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: #fff;
    border: 1px solid hsla(0, 0%, 100%, .2)
}

.print-action-wrapper {
    position: relative;
    margin-left: auto
}

.print-action-wrapper .print {
    background: none;
    border: 0;
    padding: 0;
    margin: 0
}

.filters-and-print {
    position: relative
}

.filters-and-print .print-action-wrapper {
    position: absolute;
    border: 2px solid #375d9a;
    width: 3em;
    height: 3em;
    background-color: #fff;
    border-radius: 50%;
    padding: .25em;
    box-sizing: border-box;
    display: flex;

    justify-content: center;

    align-items: center;
    top: -.5em;
    right: -.5em
}

.filters-and-print .print-action-wrapper img {
    margin: 0
}

.print-dropdown {
    min-width: 300px;
    position: absolute;
    background-color: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    z-index: 5;
    right: -100%;
    top: 2em;
    display: none
}

.print-dropdown a {
    padding: 1em;
    color: #fff;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid hsla(0, 0%, 100%, .5)
}

.print-dropdown a:last-child {
    border-bottom: 0
}

.in-iframe {
    margin-bottom: 0 !important
}

.in-iframe .bug-form-toggler, .in-iframe .button, .in-iframe .component-adder-button, .in-iframe .file-upload, .in-iframe .ghost-button, .in-iframe .object-actions, .in-iframe .quickfinder-wrapper, .in-iframe .remover1, .in-iframe .sidebar, .in-iframe footer, .in-iframe header {
    display: none
}

.in-iframe .main-content {
    padding: 0;
    margin: 0;
    width: 100%
}

.in-iframe .tag {
    padding-right: .5em
}

.in-iframe .inner.crud {
    padding: 0;
    margin: 0;
    width: 100%
}

.in-iframe h2 .back {
    display: none
}

.in-iframe h2 {
    padding-left: 1em
}

.in-iframe .attachments-wrapper-outer {
    margin-bottom: 0;
    padding-bottom: 0
}

[name=marmeladepot] {
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px;
    -ms-transform: translateX(-200vw);
    transform: translateX(-200vw)
}

.oneliner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 20em
}

.textblocks-area textarea {
    min-height: 15em
}

.styled-table.textblocks-area th, .styled-table.textblocks-area thead {
    overflow: visible
}

.styled-table.textblocks-area .filter-dropdown {
    display: none;
    position: absolute;
    top: 2em;
    z-index: 5;
    background-color: rgba(55, 93, 154, .7);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.styled-table.textblocks-area .filter-dropdown a {
    display: block;
    padding: .5em 1em;
    text-decoration: none
}

.styled-table.textblocks-area th {
    white-space: nowrap
}

.styled-table.textblocks-area th div {
    display: inline-block
}

small.filter-info {
    margin-bottom: 1em;
    display: block
}

.small-button {
    border: 1px solid hsla(0, 0%, 100%, .6);
    color: hsla(0, 0%, 100%, .8);
    padding: .25em .5em;
    display: inline-block
}

.textblocks-wrapper {
    position: relative
}

.textblocks-list {
    display: none;
    position: absolute;
    top: 2em;
    left: 0;
    z-index: 3;
    background-color: #6d5200
}

.textblocks-list a {
    padding: .5em 1em;
    display: block;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.recipe-producthints table, .recipe-specifications table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden
}

.recipe-producthints th, .recipe-specifications th {
    text-align: left;
    padding: .5em 1em;
    font-weight: 400;
    background-color: #fff
}

.recipe-producthints th.headline-field, .recipe-specifications th.headline-field {
    background-color: #e1e7f0
}

.recipe-producthints td, .recipe-producthints th, .recipe-specifications td, .recipe-specifications th {
    border: 1px solid rgba(55, 93, 154, .3)
}

.recipe-producthints td, .recipe-specifications td {
    padding: 0
}

.recipe-producthints .form-item, .recipe-producthints textarea, .recipe-specifications .form-item, .recipe-specifications textarea {
    margin-bottom: 0
}

.recipe-producthints textarea, .recipe-specifications textarea {
    background-color: #fff;
    box-shadow: inset .1em .1em .2em rgba(0, 0, 0, .1), inset .05em .05em 1em rgba(55, 93, 154, .1);
    min-height: 5em;
    border: 0;
    margin-bottom: -.2em
}

.recipe-producthints .headline-field, .recipe-specifications .headline-field {
    font-weight: 700
}

.recipe-producthints.crud form .form-item, .recipe-specifications.crud form .form-item {
    margin: 0;
    width: 100%
}

.recipe-producthints .actions, .recipe-specifications .actions {
    display: -ms-flexbox;
    display: flex
}

.recipe-producthints .actions .print-button, .recipe-specifications .actions .print-button {
    margin-right: 2em;
    border-radius: 50%;
    border: 2px solid #375d9a;
    background-color: #fff
}

.recipe-producthints .actions .print-button .icon, .recipe-specifications .actions .print-button .icon {
    filter: invert(0);
    opacity: 1
}

.recipe-producthints .textblocks-wrapper, .recipe-specifications .textblocks-wrapper {
    position: absolute;
    top: .5em;
    right: .5em;
    z-index: 15
}

.recipe-producthints .textblocks-toggler, .recipe-specifications .textblocks-toggler {
    border-radius: 50%;
    font-weight: 700;
    background-color: #375d9a;
    cursor: pointer
}

.recipe-producthints .textblocks-list, .recipe-specifications .textblocks-list {
    left: auto;
    right: 2em;
    top: 0;
    background-color: rgba(55, 93, 154, .9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff
}

.recipe-producthints tbody th, .recipe-specifications tbody th {
    width: 30%
}

.recipe-producthints .print-button, .recipe-specifications .print-button {
    width: 3em;
    height: 3em
}

.recipe-producthints textarea {
    min-height: 7em
}

.recipe-producthints thead th {
    background-color: #375d9a
}

.recipe-producthints .multiple-parts {
    display: -ms-flexbox;
    display: flex
}

.recipe-producthints .recipe-part {
    -ms-flex: 0 0 33%;
    flex: 0 0 33%
}

.recipe-producthints .hint-part {
    -ms-flex: 0 0 67%;
    flex: 0 0 67%
}

.recipe-producthints h3 {
    margin-bottom: .5em
}

.recipe-producthints .tr {
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch
}

.recipe-producthints .tr:hover .delete-wrapper {
    display: block
}

.recipe-producthints .delete-wrapper {
    position: absolute;
    bottom: .5em;
    right: 0;
    text-align: right;
    font-size: .8em;
    display: none
}

.recipe-producthints .delete-wrapper .button {
    padding: .5em .75em;
    border-radius: .5em
}

.recipe-producthints .object-actions {
    margin-top: 2em
}

.recipe-producthints .head-wrapper {
    margin-bottom: 0
}

.recipe-producthints .head-wrapper h3 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.recipe-producthints .meta {
    background-image: linear-gradient(65deg, rgba(217, 164, 0, .8), #ffc40d);
    padding: calc(.5em + 1vw);
    border-top-left-radius: 1em;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 2px 2px 2px rgba(0, 0, 0, .1), -2px 4px 4px rgba(0, 0, 0, .1), 4px 8px 8px rgba(0, 0, 0, .1), -16px 16px 16px rgba(0, 0, 0, .1), 1em 1em 3em rgba(0, 0, 0, .1)
}

.recipe-producthints .meta > * {
    width: 100%
}

.recipe-producthints .meta [type=number], .recipe-producthints .meta [type=text], .recipe-producthints .meta select {
    box-shadow: inset .1em .1em .2em rgba(0, 0, 0, .2);
    border-radius: .3em;
    border: 0;
    padding: .25em .5em;
    background-color: hsla(0, 0%, 100%, .5);
    margin-bottom: .5em;
    border: 1px solid hsla(0, 0%, 100%, .2)
}

.recipe-producthints .meta h3 {
    margin: 0;
    font-size: 1.1em
}

.recipe-producthints .inputs-wrapper {
    display: flex;

    align-items: center
}

.recipe-producthints .inputs-wrapper [type=text] {
    margin-right: .5em
}

.instructions-td {
    width: 50%
}

.comments-td, .instructions-td {
    -ms-flex: 0 0 calc(50% - 5em) !important;
    flex: 0 0 calc(50% - 5em) !important
}

.producthint-position {
    text-align: center;
    position: relative;
    display: flex;

    flex-direction: column;

    justify-content: center;
    -ms-flex: 0 0 10em !important;
    flex: 0 0 10em !important
}

.producthint-position .handle {
    display: inline-block;
    width: auto;
    background-color: transparent;
    font-size: 1.5em
}

.producthint-position .handle img {
    filter: invert(0)
}

.producthint-position .pos {
    display: flex;

    justify-content: center;
    padding-right: 1em;
    height: 100%;

    align-items: center
}

.producthint-position .pos-number {
    font-size: 1.35em;
    padding: .25rem
}

.producthint-position .pos-number input[readonly] {
    border: 0 !important;
    background-color: transparent !important;
    width: 2em;
    padding: 0;
    text-align: center;
    font-size: 1.35em
}

.producthint-position .adder-wrapper {
    position: absolute;
    bottom: -.75em;
    width: 100%
}

.producthint-position .adder, .producthint-position .adder-wrapper {
    display: flex;

    justify-content: center;

    align-items: center
}

.producthint-position .adder {
    cursor: pointer;
    background-color: #375d9a;
    border-radius: 50%;
    color: #fff;
    width: 1.25em;
    height: 1.25em;
    font-weight: 700;
    font-size: 1.3em;
    z-index: 50;
    position: relative
}

.lang-togglers {
    display: flex;

    align-items: center
}

.lang-togglers .ghost-button {
    background-color: #fff;
    text-transform: uppercase
}

.lang-togglers .ghost-button.active {
    font-weight: 700;
    border-width: 3px;
    line-height: 1em;
    background-color: #cad7ec
}

.lang-togglers .translate-button {
    margin-right: 1em;
    text-transform: none;
    font-size: .9em;
    padding: .5em .7em
}

.specification-submit-button {
    margin-left: 2.5%
}

.recipe-productionhint-version {
    background-color: #c3cee1;
    padding: calc(.5em + 1vw);
    border-bottom-left-radius: 1em;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 2px 2px 2px rgba(0, 0, 0, .1), -2px 4px 4px rgba(0, 0, 0, .1), 4px 8px 8px rgba(0, 0, 0, .1), -16px 16px 16px rgba(0, 0, 0, .1), 1em 1em 3em rgba(0, 0, 0, .1)
}

.recipe-productionhint-version h3 {
    margin: 0
}

.recipe-productionhint-version ul {
    margin: 0;
    padding: 0;
    margin-bottom: 1em
}

.recipe-productionhint-version li {
    border-top: 1px solid rgba(55, 93, 154, .2);
    display: -ms-flexbox;
    display: flex
}

.recipe-productionhint-version li > div {
    -ms-flex: 0 0 33%;
    flex: 0 0 33%
}

.recipe-productionhint-version .head {
    font-family: Sora, sans-serif;
    background-color: rgba(55, 93, 154, .2)
}

.recipe-productionhint-version .head div {
    text-align: right;
    padding: .25em .5em
}

.recipe-productionhint-version .head .resourcename {
    text-align: left
}

.number {
    text-align: right;
    font-family: Azeret Mono, sans-serif;
    font-weight: 700;
    letter-spacing: -.05em
}

.productionhints-to-delete {
    display: none
}

.calculations-table {
    width: 100%;
    overflow: visible
}

.calculations-table .tr > * {
    -ms-flex: 0 0 11%;
    flex: 0 0 11%
}

.calculations-table .toggle-inci-view {
    display: none
}

.calculations-table .has-overflow .toggle-inci-view {
    display: -ms-flexbox;
    display: flex
}

.calculations-table .tr.active .inci {
    white-space: normal
}

.calculations-table .tr.active .inci .minus {
    display: block
}

.calculations-table .tr.active .inci .plus {
    display: none
}

.calculations-table .resource-name {
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 18%;
    flex-basis: 18%;
    position: relative
}

.calculations-table .resource-name .icon {
    filter: invert(0);
    cursor: pointer
}

.calculations-table .inci {
    -ms-flex-preferred-size: 13em;
    flex-basis: 13em;
    padding-right: 1.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-hyphens: auto;
    hyphens: auto
}

.calculations-table .numeric-id {
    -ms-flex-preferred-size: 8%;
    flex-basis: 8%
}

.calculations-table .minus {
    display: none
}

.calculations-table .toggle-inci-view {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #375d9a;
    color: #375d9a;
    border-radius: 50%;
    padding: .25em;
    width: 1.5em;
    height: 1.5em;
    box-sizing: border-box;

    justify-content: center;

    align-items: center;
    z-index: 1;
    cursor: pointer
}

.sum-area {
    display: flex;
    font-size: 2.2em;
    overflow: hidden;
    border-radius: 1em;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    margin-bottom: 1rem
}

.sum-area .sum {
    font-weight: 700
}

.sum-area .sum-block {
    padding: 1em;
    display: flex;

    flex-direction: column;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);

    flex: 1;
    text-align: right
}

.sum-area small {
    font-size: .45em
}

.sum-area .info {
    font-size: .8em
}

.sum-area .price-min {
    margin-left: auto;
    background-color: rgba(55, 93, 154, .2);
    border-right: 1px solid rgba(55, 93, 154, .3);
    background-image: linear-gradient(135deg, rgba(55, 93, 154, .1), rgba(90, 130, 196, .3));
    color: #2a4674
}

.sum-area .price-max {
    background-color: rgba(217, 164, 0, .2);
    background-image: linear-gradient(135deg, rgba(217, 164, 0, .1), rgba(255, 196, 13, .5));
    color: #735700
}

.sum-area .iso16128 {
    background-color: rgba(84, 127, 13, .2);
    background-image: linear-gradient(135deg, rgba(84, 127, 13, .1), rgba(115, 173, 18, .5));
    border-right: 1px solid rgba(84, 127, 13, .3);
    color: #263a06
}

.sum-area .voc {
    background-color: rgba(129, 61, 156, .2);
    background-image: linear-gradient(135deg, rgba(129, 61, 156, .1), rgba(157, 81, 187, .5));
    border-right: 1px solid rgba(129, 61, 156, .3);
    color: #632f77
}

.packages-area {
    margin-bottom: 2rem
}

.packages-area .packages {
    display: flex;

    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 102%;
    margin-left: -1%
}

.packages-area .package {
    position: relative;
    background-image: linear-gradient(-60deg, #c49e83, #ede2da);
    border-bottom: 2px solid #aa7651;
    padding: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin: 1%;
    width: 98%;
    padding-top: 1em
}

@media (min-width: 800px) {
    .packages-area .package {
        width: 48%
    }
}

@media (min-width: 1400px) {
    .packages-area .package {
        width: 23%
    }
}

.packages-area .package .delete {
    position: absolute;
    top: -.5em;
    right: -.5em;
    font-size: 1.25em;
    width: 1.5em;
    padding: .35em;
    height: 1.5em;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;

    align-items: center;

    justify-content: center;
    background-color: #aa7651;
    color: #fff;
    cursor: pointer
}

.packages-area table {
    width: 100%
}

.packages-area td, .packages-area th {
    padding: .4em .5em
}

.packages-area th {
    text-align: right;
    font-weight: 400
}

.packages-area td {
    font-weight: 700;
    border-bottom: 1px solid rgba(170, 118, 81, .5)
}

.packages-area tr:last-child td {
    border-bottom: 0
}

.packages-area .box-icon {
    opacity: 1;
    filter: invert(0);
    position: absolute;
    top: -.5em;
    left: -.25em;
    width: 2.5em;
    height: 2.5em;
    z-index: 3
}

.packages-area h3 {
    color: #765238;
    font-size: 1.5em;
    margin-bottom: .3em
}

.packages-area .loading {
    animation: i 5s infinite both
}

@keyframes i {
    0%, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

.alternative-choser {
    display: none;
    background-color: rgba(0, 0, 0, .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    z-index: 2;
    border-radius: .3em;
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3);
    color: #fff;
    width: 35em
}

.open .alternative-choser {
    display: block
}

.alternative-choser .alternative {
    cursor: pointer;
    display: flex;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2)
}

.alternative-choser .alternative > div {
    border-right: 1px solid hsla(0, 0%, 100%, .1);
    padding: .5rem 1rem .5rem .5rem;
    box-sizing: border-box
}

.alternative-choser .alternative .name {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%
}

.alternative-choser .alternative .supplier {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    font-size: .8em
}

.alternative-choser .alternative .price {
    margin-left: auto;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%
}

.alternative-choser .alternative .alternative-price-year {
    -ms-flex: 0 0 15%;
    flex: 0 0 15%
}

.alternative-choser .alternative .price-max, .alternative-choser .alternative .price-min {
    display: block;
    white-space: nowrap
}

.recipe-changeattributes .textblocks-toggler {
    border: 1px solid #375d9a;
    color: #375d9a
}

.recipe-changeattributes .textblocks-list a {
    background-color: #375d9a;
    color: #fff
}

.recipe-changeattributes .items-wrapper-simple {

    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.mailactions-table .ghost-button {
    padding: .25em .5em;
    font-size: .9em
}

.calculation-button-wrapper {
    margin-bottom: 4em;
    text-align: right
}

.calculation-button-wrapper [disabled] {
    font-size: .8em
}

.printoptions .button {
    margin-right: .5em;
    display: inline-block
}

.printoptions .line {
    margin-bottom: .5em
}

.printoptions .icon {
    width: 1.75em;
    height: 1.75em;
    position: relative;
    top: -.1em;
    margin-right: .5em
}

.printoptions .add-button {
    border-radius: 50%;
    clear: both;
    font-weight: 700;
    width: 1.5em;
    height: 1.5em;
    padding: .5em;
    font-size: 1.5em;
    display: flex;

    justify-content: center;

    align-items: center;
    box-sizing: border-box;
    margin-top: -1em;
    margin-bottom: 2em
}

.printoptions h3 {
    margin: 0
}

.rte-and-count-wrap {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.rte-and-count {
    clear: both;
    box-shadow: -.3em .1em .8em rgba(50, 84, 139, .3);
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 1em;
    padding: 1em;
    border-radius: .3em;
    width: 37em;
    margin-right: 1em
}

.rte-and-count .rte-wrap {
    float: left;
    width: calc(100% - 7em);
    height: 15em
}

.rte-and-count .count-wrap {
    width: 6em;
    float: left;
    margin-right: 1em
}

.rte-and-count .count-wrap input {
    font-size: 1.5em;
    width: 100%
}

.rte-and-count[data-index="0"] {
    display: none
}

.rte-and-count .ql-container, .rte-and-count .ql-editor {
    height: 10em;
    overflow: hidden;
    resize: none;
    box-sizing: border-box
}

.ql-toolbar.ql-snow {
    padding-top: .1em;
    padding-bottom: .1em;
    font-size: .6em;
    background-color: rgba(55, 93, 154, .2)
}

.ql-toolbar.ql-snow button {
    width: 24px;
    height: 24px
}

.ql-editor {
    background-color: #fff;
    box-shadow: inset .1em .1em .5em rgba(0, 0, 0, .05), inset 0 .1em .2em rgba(55, 93, 154, .05), inset .01em .01em .15em rgba(55, 93, 154, .2);
    font-size: 1.2em
}

.calculations-page .package-add-button {
    margin-left: 0
}

.calculations-page .package {
    margin: 1%
}

.calculations-page .button-wrapper {
    margin-bottom: 3em
}

.calculations-page .button-wrapper .button {
    display: inline-block
}

.project-form .secondary-area .checkbox {
    font-size: .8em
}

.project-form .package {
    background-color: #bc9172;
    color: #fff
}

.project-form .target-price {
    background-color: #875e41
}

.block-visual-divide {
    padding: 2em 0
}

.block-visual-divide small {
    display: block;
    margin-bottom: .5em
}

.recipe-print-options-block form {
    margin-bottom: .5em;
    margin-right: .5em
}

.recipe-print-options-block .button {
    background-image: linear-gradient(35deg, #d9a400, #c09100);
    margin: 0;
    width: 18em;
    padding: 1em 2em;
    height: 100%;
    min-height: 4em
}

.recipe-print-options-block h4 {
    margin-bottom: .25em
}

.recipe-print-options-block .printgroup {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.print-language-pick input {
    width: 1.35em;
    height: 1.35em;
    position: relative;
    top: .15em
}

.tiles .tile.tile-database:first-child {
    display: none
}

#temp-quickfinder {
    margin-left: 1em
}

.approvals-form .readonly-text {
    background-color: #fff;
    padding: .75rem;
    color: rgba(25, 33, 57, .8);
    width: 35%
}

.approvals-form thead th {
    background-color: #375d9a;
    font-size: 1.1em
}

.approvals-form thead th strong {
    font-size: 1.1em
}

.approvals-form thead th .icon {
    font-size: 1.1em;
    position: relative;
    top: -.1em
}

.approvals-form .radios-wrap {
    font-size: 1.5em;
    background-color: #d9a400;
    display: -ms-flexbox;
    display: flex
}

.approvals-form .radios-wrap .radio-wrap {
    color: #fff;
    position: relative;
    padding: 1rem;

    flex: 1
}

.approvals-form .radios-wrap input {
    width: 1.1em;
    height: 1.1em;
    position: relative;
    top: .2em
}

.approvals-form .radios-wrap .negative {
    background-color: #ac3d00
}

.approvals-form .radios-wrap .positive {
    background-color: #547f0d
}

.approvals-form .sub-area {
    background-color: #fff
}

.approvals-form .sub-area .form-item {
    max-width: 30em
}

.approvals-form .baserecipe-th {
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;

    align-items: center
}

.approvals-form .exchanger {
    position: relative;
    top: .1em
}

.button.printextra img {
    filter: brightness(0) invert(1);
    margin-right: .5em
}

.cool-resource {
    color: #3290a0
}

.cool-resource img {
    width: 1.25em
}

.edit-word {
    display: inline-block;
    margin-right: .25em
}

.cool-resource-icon {
    position: relative;
    top: -.15em
}

.filter-head .remove-icon {
    width: 1em;
    height: 1em;
    margin-right: .25em;
    filter: invert(1);
    opacity: .5
}

.resource-id-th {
    min-width: 7em
}

.recipes-list .item {
    border: 1px solid #375d9a
}

.recipes-list .item.selected {
    color: #375d9a;
    background-color: #fff;
    font-weight: 700;
    letter-spacing: -.005em;
    border: 1px solid #375d9a;
    padding-bottom: .5em;
    box-shadow: inset .05em .05em .1em rgba(0, 0, 0, .35), inset .1em .1em .3em rgba(0, 0, 0, .2)
}

.basic-area {
    background-color: #fff
}

.fullwidth-div {
    width: 100%
}

.approve-button, .reject-button {
    margin-right: 1.8rem;
    margin-left: 1.8rem;
    margin-top: -1em
}

.approve-button {
    background-image: linear-gradient(35deg, #45680b, #73ad12)
}

.reject-button {
    color: #ac3d00;
    border: 1px solid #ac3d00;
    font-weight: 400;
    background-image: linear-gradient(35deg, #d9d9d9, #fff)
}

.client-approve-page {
    text-align: left
}

.client-approve-page textarea {
    min-height: 10em
}

.client-approve-page .object-actions, .client-approve-page form {
    max-width: 70rem;
    margin: 0 auto
}

.client-approve-page .object-actions {
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 1.25em
}

.crud .standard-h3 {
    margin-left: 0
}

.projectmanagement .recipes-list a {
    display: inline-block;
    width: 8em;
    text-align: center;
    text-decoration: none
}

.projectmanagement form .form-item:not(.checkbox) {
    width: calc(50% - 1em) !important;
    margin-bottom: 1em
}

.projectmanagement form .form-item:not(.checkbox).textarea {
    width: calc(100% - 1em) !important
}

.projectmanagement form .form-item.checkbox {
    padding-bottom: .25em
}

.projectmanagement .empty-info {
    padding-right: .25em
}

.projectmanagement form .form-item-with-addition {
    margin: 1.5em 0;
    line-height: 1.2em
}

.projectmanagement form .form-item-with-addition .button, .projectmanagement form .form-item-with-addition .ghost-button {
    padding: .1em .5em;
    cursor: pointer;
    line-height: 1em
}

.projectmanagement .standard-h3 {
    margin-left: .5rem
}

.projectmanagement .info {
    padding: .5rem;
    padding-bottom: 2rem
}

.projectmanagement .info .empty-info {
    padding-left: 0
}

.projectmanagement .tertiary-area {
    padding: 1em;
    grid-column-start: 1;
    grid-column-end: 3
}

.badge.warn {
    background-color: #ac3d00
}

.badge.success {
    background-color: #547f0d
}

.badge.partly-success {
    background-color: #aa9707
}

.badge.progress {
    background-color: #ffaf00
}

.crud .attachment-send-area .form-item {
    padding-bottom: .5em;
    margin-bottom: 0
}

.crud .phases-area .search-resource-button.disabled {
    display: none
}

.crud .phases-area .search-resource-loader {
    display: none;
    opacity: .5;
    white-space: nowrap
}

.crud .phases-area .search-resource-loader.enabled {
    display: block
}

.tabs-navigation {
    display: -ms-flexbox;
    display: flex
}

.tabs-navigation .tab {
    margin-right: 1em;
    padding: 1em;
    background-color: #375d9a;
    color: #fff;
    text-decoration: none;
    border-radius: .75em;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative
}

.tabs-navigation .tab.active {
    background-color: #fff;
    color: #375d9a;
    box-shadow: .3em .2em .3em rgba(0, 0, 0, .1)
}

.tabs-navigation .tab.active:before {
    content: none
}

.tabs-navigation .tab:before {
    content: "";
    display: block;
    height: .5em;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .15) 0, transparent)
}

.declaration-area {
    position: relative;
    z-index: 3;
    background-color: #fff
}

.declaration-area h2 {
    text-transform: capitalize;
    margin-bottom: 0
}

.declaration-area .headline-eu, .declaration-area .headline-us {
    text-transform: uppercase
}

.declaration-area .form-item.textarea {
    display: flex;
    margin-bottom: .5em;
    border-bottom: 2px dotted rgba(55, 93, 154, .5);
    padding: 2rem
}

.declaration-area .form-item.textarea .create {
    -ms-flex: 0 0 18%;
    flex: 0 0 18%;
    display: flex;

    flex-direction: column
}

.declaration-area .form-item.textarea .create .part1 {
    margin-right: 1em
}

@media (min-width: 960px) {
    .declaration-area .form-item.textarea .create h2 {
        font-size: 1.4em
    }
}

.declaration-area .form-item.textarea .create .part2 {
    margin-bottom: -.15em;
    position: relative
}

.declaration-area .form-item.textarea .create .part2 .loader2, .declaration-area .form-item.textarea .create .part2 .loader2 img {
    display: none;
    width: 3em;
    height: 3em
}

.declaration-area .form-item.textarea .create .part2 .ghost-button {
    padding: .25em .5em
}

.declaration-area .form-item.textarea .create .part2 .create-pdf {
    margin-left: auto
}

.declaration-area .form-item.textarea .create .part2.generating .part2-inner, .declaration-area .form-item.textarea .create .part2.generating .pdf-links {
    opacity: .5
}

.declaration-area .form-item.textarea .create .part2.generating .loader2, .declaration-area .form-item.textarea .create .part2.generating .loader2 img {
    display: block
}

.declaration-area .form-item.textarea .create .part2-inner {
    display: flex;

    align-items: center;
    background-color: rgba(55, 93, 154, .2);
    padding: .5em 1em;
    border-top-left-radius: .25em;
    border-bottom-left-radius: .25em
}

.declaration-area .form-item.textarea .create img {
    width: 1em;
    height: 1em;
    opacity: .5
}

.declaration-area .form-item.textarea .create .pdf-links {
    display: block;
    margin-bottom: .75em
}

.declaration-area .form-item.textarea .create .pdf-links a {
    text-decoration: none;
    margin-right: .4em
}

.declaration-area .form-item.textarea .create .pdf-links [href=""] {
    display: none
}

.declaration-area .form-item.textarea .create .pdf-links .ghost-button {
    padding: .2em .35em;
    border-color: #cfcfcf
}

.declaration-area .form-item.textarea .update {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    position: relative
}

.declaration-area .form-item.textarea .update.loading textarea {
    opacity: .5
}

.declaration-area .form-item.textarea .update .textblocks-wrapper {
    position: absolute;
    top: .5em;
    right: -.25em
}

.declaration-area .form-item.textarea .update .textblocks-toggler {
    background-color: #375d9a;
    color: #fff;
    border-radius: 50%
}

.declaration-area .form-item.textarea .update .textblocks-list {
    right: 0;
    position: absolute;
    left: auto
}

.declaration-area .form-item.textarea .update textarea {
    padding-right: 2em
}

.declaration-area .form-item.textarea label {

    align-items: center;
    display: flex;
    margin-top: 0;
    margin-right: .5em
}

.declaration-area .form-item.textarea label input {
    margin-right: .5em;
    width: 1.5em;
    height: 1.5em
}

.declaration-area .form-item.textarea textarea {
    min-height: 13em
}

.declaration-area .ghost-button {
    cursor: pointer
}

.declaration-area .loader2 {
    width: 5em;
    height: 5em;
    top: 1em;
    left: 1em
}

.declaration-area .textblocks-toggler {
    border-color: rgba(55, 93, 154, .5);
    color: rgba(55, 93, 154, .75)
}

.declaration-area .textblocks-list {
    background-color: #375d9a;
    color: #fff;
    min-width: 300px
}

.declaration-area .part2 {
    margin-top: auto
}

.page-projectmanagement .fancybox__content {
    min-height: 60em !important
}

.page-projectmanagement .pdf-link[href=""] {
    display: none
}

.one-percent-line {
    width: 100%;
    height: 1px;
    background-color: #375d9a;
    margin-top: .5em;
    margin-bottom: .5em
}

.checkbox-new label {
    display: flex;

    align-items: center
}

.checkbox-new label [type=checkbox] {
    width: 1.5em;
    height: 1.5em;
    margin-right: .5em
}

.loader2 {
    position: absolute;
    top: 0;
    left: 0
}

.fancybox__content {
    min-height: 50vh !important
}

.multiline {
    white-space: pre-line
}

.comment-header {
    font-weight: 700;
    margin-bottom: .2em
}

.comment-body {
    line-height: 1.7em
}

.clientbasket-wrapper {
    margin-right: .5em;
    transition: transform .15s;
    -ms-transform-origin: right top;
    transform-origin: right top
}

.clientbasket-wrapper:focus, .clientbasket-wrapper:hover {
    -ms-transform: scale(1.25);
    transform: scale(1.25);
    -ms-transform-origin: right top;
    transform-origin: right top
}

.clientbasket-wrapper img {
    width: 2.25em;
    height: 2.25em
}

.clientbaskets-index-table .sent td {
    opacity: .5
}

.formatpoor-subarea {
    padding: .75em
}

@media (min-width: 960px) {
    .formatpoor-subarea {
        padding: 1em
    }
}

.sending-info h2 {
    margin-top: .5em;
    margin-bottom: 0;
    padding-bottom: 0
}

.sending-info .standard-h3 {
    margin-top: .2em
}

.sending-info .recipe-block {
    border-bottom: 1px solid #cfcfcf;
    padding: .5em 0
}

.offer-items {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: auto
}

.addable-items {
    max-height: 30em;
    background-color: rgba(55, 93, 154, .3);
    box-shadow: inset .1em .1em .5em rgba(0, 0, 0, .3), inset .05em .05em .1em rgba(0, 0, 0, .1);
    border-radius: .35em
}

.addable-items > li {
    display: flex;

    flex: 1;
    border-right: 1px solid #cfcfcf;
    line-height: 1.2em
}

.addable-items .head div {
    flex: 1;
    padding: .2em .4em;
    background-color: rgba(55, 93, 154, .3)
}

.offer-item {
    display: flex;
    border-bottom: 1px solid rgba(55, 93, 154, .3);
    margin: 0;
    position: relative;
    box-sizing: border-box
}

.offer-item:first-child {
    border-top: 1px solid rgba(55, 93, 154, .3)
}

.offer-item.listed-item {
    font-size: .9em
}

.offer-item.listed-item.head > div {
    padding: .25em
}

.offer-item.listed-item > div:not(:last-child) {
    border-right: 1px solid rgba(55, 93, 154, .4)
}

.offer-item.listed-item > div {
    -ms-flex: 0 0 10.75%;
    flex: 0 0 10.75%;
    box-sizing: border-box;
    padding: 0;
    -ms-hyphens: auto;
    hyphens: auto
}

.offer-item.listed-item > div.readonly {
    padding: .5em;
    display: flex;

    align-items: center
}

.offer-item.listed-item > div.readonly.number {
    -ms-flex-pack: end;
    justify-content: flex-end
}

.offer-item.listed-item > div.first-head-item {
    padding-left: 1.4rem
}

.offer-item.listed-item > div.small {
    -ms-flex: 0 0 7%;
    flex: 0 0 7%
}

.offer-item.listed-item > .remove {
    -ms-flex: 0 0 1.5em;
    flex: 0 0 1.5em
}

.offer-item.listed-item > .comment-item, .offer-item.listed-item > .name {
    -ms-flex: 0 0 15%;
    flex: 0 0 15%
}

.offer-item .handle {
    display: none;
    width: 1.7em;
    height: 1.7em;
    padding: .15em;
    position: absolute;
    left: 0;
    text-align: center
}

.offer-item .remove {
    text-align: right
}

.offer-item .remove button {
    padding: 0;
    display: none;
    background-color: transparent;
    border: 0;
    width: 1.5em;
    opacity: .5;
    margin-top: .5em
}

.offer-item:hover .handle, .offer-item:hover .remove button {
    display: inline-block
}

.offer-item .name {
    -ms-hyphens: auto;
    hyphens: auto
}

.offer-item .number {
    font-weight: 300
}

.offer-item .number.price, .offer-item .number strong {
    font-weight: 700
}

.offer-item .number input {
    text-align: right
}

.offer-item .piece-price {
    width: 25%
}

.offer-item input, .offer-item textarea {
    width: 100%;
    padding: .2em;
    font-size: inherit;
    line-height: 1.3em;
    border-radius: .1em;
    border: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #d9a400;
    background-color: rgba(155, 174, 205, .25);
    min-height: 2em;
    height: 100%
}

.offer-item input::-webkit-inner-spin-button, .offer-item input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.offer-item input[type=number] {
    -moz-appearance: textfield
}

.addable-item {
    display: flex
}

.addable-item > * {
    border-right: 1px solid rgba(55, 93, 154, .3);
    flex: 1;
    -ms-hyphens: auto;
    hyphens: auto
}

.comment-save-info {
    font-size: .8em;
    opacity: .6;
    line-height: 1.2em;
    width: 100%
}

.crud .offer-form {
    overflow: visible
}

.crud .offer-form .button {
    margin-right: .5em;
    margin-bottom: .5em
}

.crud .offer-form h3 {
    margin-left: .5em
}

.crud .offer-form .items-sub-area h3 {
    margin-left: 1.35rem
}

.crud .offer-form .commissioned-at {
    display: none;
}

.offering-description {
    max-width: 25%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    opacity: .6
}

.offering-items {
    display: block;
    clear: both;
    width: 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
}

.offering-items .number {
    width: 25%
}

.crud.add-to-offer-area {
    padding-top: 0
}

.crud.add-to-offer-area .button {
    cursor: pointer;
    margin-right: 1em;
    margin-bottom: 1em
}

.addable-item {
    cursor: pointer
}

.addable-item > div {
    padding: .2em .4em
}

.addable-item:hover {
    background-color: rgba(55, 93, 154, .8);
    color: #fff
}

.simple-wrap {
    position: relative;
    margin-top: 2em
}

.simple-wrap .textblocks-wrapper {
    position: absolute;
    top: 0;
    left: -1.5em
}

.simple-wrap .textblocks-toggler {
    cursor: pointer;
    padding: .25em;
    font-size: 1.1em;
    line-height: 1em;
    width: 1.5em;
    font-weight: 700;
    text-align: center;
    height: 1.5em;
    box-sizing: border-box;
    z-index: 2
}

.simple-wrap .textblocks-list, .simple-wrap .textblocks-toggler {
    background-color: #375d9a;
    color: #fff
}

.empty-info.fullwidth, .textarea.fullwidth {
    flex: 0 0 100%
}

.textblocks-wrapper.addresses {
    width: 20em
}

.crud .offer-form h3.standard-h3 {
    margin: 0
}

.col50 {
    width: 50%
}

.col50.textarea {
    width: 48.5%
}

.col50.textarea:first-child {
    margin-right: 3%
}

.stabilitycheckset-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: .5em;
    margin-right: .5em
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    padding: .9em .75em;
    cursor: pointer;
    transition: all .2s ease;
    color: #fff;
    font-weight: 700;
    text-shadow: 1px 1px .1em rgba(0, 0, 0, .4);
    overflow: hidden;
    position: relative
}

.checkbox-label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .15)
}

.checkbox-label .text {
    position: relative;
    z-index: 2
}

.checkbox-label:hover {
    background-color: #f5f5f5
}

.checkbox-label .stabilitycheckset-checkbox {
    width: 1.25em;
    height: 1.25em;
    cursor: pointer;
    accent-color: inherit;
    margin-right: .5em;
    position: relative;
    z-index: 2
}

.checkbox-label .stabilitycheckset-checkbox:checked {
    accent-color: inherit
}

.sevdesk-icon {
    width: 1.3em;
    height: 1.3em
}

h2 .lang-togglers {
    margin-left: auto;
    font-size: .6em
}

.crud form .suppliers-area .basic-area {
    display: block
}

.crud form .suppliers-area .basic-area .form-item {
    margin-bottom: 1em
}

.sample-table-in-suppliers small {
    opacity: .5
}

.number-head {
    text-align: right !important
}

.crud .insti-form {
    overflow: visible
}

.crud form .project-middle-area .form-item {
    margin-bottom: 1.5em;
}

.project-middle-area {
    display: flex;
}

.projectofferings-area {
    background-color: #998da0;
    padding: 1.5em;
}

.projectofferings-area ul li > div {
    padding: .5em;
}

.projectofferings-area .addable-items {
    background-color: rgba(255, 255, 255, .3);
}

.projectofferings-area .addable-items .head div {
    background-color: rgba(255, 255, 255, .3);
    padding: .5em;
}

.projectofferings-area .button {
    display: inline-block;
}

.projectofferings-area .offer-items .listed-item {
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
}

.projectofferings-area .offer-items .listed-item,
.projectofferings-area .offer-items .listed-item > div {
    border-color: rgba(255, 255, 255, .5);
}

.projectofferings-area .offer-items .listed-item input,
.projectofferings-area .offer-items .listed-item textarea {
    color: inherit;
}

.projectofferings-area .offer-items .listed-item > .recipe-number,
.projectofferings-area .offer-items .listed-item > .quantity-info {
    display: none;
}

.projectofferings-area .offer-items .listed-item > div {
    flex: 0 0 calc(13% - 1em);
    font-size: 1.05em;
}

.projectofferings-area .offer-items .listed-item .remove {
    flex: 0 0 2em;
}

.projectofferings-area .offer-items .listed-item .remove img {
    filter: invert(1);
}

.projectofferings-area .offer-items .listed-item > .small {
    flex: 0 0 6em;
}

.projectofferings-area h3 {
    margin-bottom: .5em;
}

.projectofferings-area .offer-items .listed-item .commissioned-at {
    min-width: 11em;
}

.projectofferings-area .offer-items {
    margin-bottom: 1em;
}

.projectofferings-area .listed-items {
    border-radius: .5em;
    overflow: hidden;
}

/* ── FedEx Shipping Page ── */
#fedex-app fieldset {
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
    padding: 1rem;
}

#fedex-app fieldset legend {
    padding: 0 .5rem;
}

#fedex-app tr.selected td {
    background: var(--color-highlight-light, #eef6ff);
}

.clientbasket-wrapper img.attention {
    animation: attention 2.5s ease-in-out 2 both;
}

@keyframes attention {
    from {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
    }
    10% {
        transform: scale(1.3);
        animation-timing-function: ease-in;
    }
    17% {
        transform: scale(1.1);
    }
    33% {
        transform: scale(1.4);
        animation-timing-function: ease-in;
    }
    45% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}

.crud .overflowing {
    overflow: visible;

    .sub-area {
        overflow: visible;
    }
}

/* ── Clientbasket create form ─────────────────────────────── */
.recipe-item-row {
    border: 1px solid #dde2ea;
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    background: #f8f9fc;
}

.recipe-item-row-special {
    padding: 0;
    background: none;
    border: 0;
}

.recipe-item-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
}

.recipe-item-selects {
    display: flex;
    gap: .75rem;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-end;

}

.recipe-item-checks {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-top: 1.6rem;
}

.hint-text {
    font-size: .85em;
    color: #666;
    margin-bottom: .5rem;
}

.loading-info {
    color: #888;
    font-size: .9em;
    padding: .3rem 0;
}

#addresses-list .form-item.checkbox {
    margin-bottom: .35rem;
}

.address-block {
    background: #f7f9fc;
    border: 1px solid #dde2ea;
    border-radius: 5px;
    padding: .6rem .8rem;
    margin-bottom: .5rem;
}

.recipe-item-inner .remove-button {
    position: absolute;
    top: -1.2em;
    right: -1.2em;
    width: 1.6em;
    padding: .2em;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.recipe-item-inner:hover .remove-button {
    opacity: 1;
}

.addresses-wrapper .badge {
    font-size: .8em;
    margin-bottom: .3em;
}

.crud form .addresses-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: wrap;
}

.addresses-wrapper .address {
    background-color: #eee;
    padding: 1em;
    border-radius: .5em;
    display: block;
    cursor: pointer;
    border: 2px solid transparent;
    max-width: 15em;
}

.crud form .addresses-wrapper .form-item.checkbox {
    align-self: stretch;
}

label.address:has(input:checked) {
    background-color: rgba(var(--main-rgb), .8);
    border: 2px solid var(--main);
    color: #fff;
    font-weight: bold;
}

label.address input {
    opacity: 0;
    position: absolute;
}

/* ── FedEx Shipping ── */
.hidden-data {
    display: none;
}

.fedex-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1rem;
}

.fedex-weight-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

.fedex-weight-row .form-item {
    width: 160px;
}

.fedex-recipients-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.5rem 0 .75rem;
}

.fedex-recipient-block {
    margin-bottom: 1rem;
}

.fedex-recipient-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
    padding: .5rem 0;
    user-select: none;
}

.fedex-recipient-header strong {
    flex: 1;
}

.fedex-collapse-icon {
    transition: transform .2s;
}

.fedex-collapse-icon.collapsed {
    transform: rotate(-90deg);
}

.fedex-badge {
    font-size: .8em;
    padding: .15em .5em;
    border-radius: 3px;
}

.fedex-badge-success {
    background: #d4edda;
    color: #155724;
}

.fedex-error-box {
    display: block;
    position: relative;
    margin-top: .75rem;
    white-space: pre-line;
}

.fedex-actions-row {
    margin-top: .75rem;
    display: flex;
    gap: .75rem;
}

.fedex-rates-section table {
    margin-top: 1rem;
    border-collapse: collapse;
}

.fedex-rates-section td {
    border: 1px solid rgba(var(--main-rgb), .2);
    border-collapse: collapse;
    padding: .5em;
}

.fedex-rates-table {
    width: 100%;
}

.fedex-rates-table tr {
    cursor: pointer;
}

.fedex-label-result {
    margin-top: 1rem;
}

.fedex-rates-table th {
    text-align: left;
}

.fedex-label-iframe {
    width: 100%;
    height: 600px;
    margin-top: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.fedex-bulk-section {
    margin-top: 1rem;
}

.button-small {
    font-size: .8em;
    padding: .2em .6em;
}

.button-danger {
    background: #dc3545;
    color: #fff;
}

.button-danger:hover {
    background: #c82333;
}

.final-actions.is-disabled {
    opacity: .45;
    pointer-events: none;
    user-select: none;
}

/* Project Plan */
.project-plan-table .phase-header-row {
    background-color: rgba(var(--main-rgb), .08);
}

.project-plan-table .phase-header-name {
    font-weight: 700;
    font-size: 1.05em;
}

.status-dots {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.status-dot {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: 1px solid #666;
    cursor: pointer;
    padding: 0;
    transition: transform .1s, box-shadow .1s;
}

.status-dot:hover {
    transform: scale(1.1);
}

.dot-pending {
    background: #eeeeef;
    border-color: #ccc;
}

.dot-pending.active {
    background: #838b91;
    border-color: #5a6268;
}

.dot-in-progress {
    background: #f8f5ea;
    border-color: #ddd0a0;
}

.dot-in-progress.active {
    background: #f0c830;
    border-color: #c99700;
}

.dot-completed {
    background: #eff9f2;
    border-color: #b0d4b5;
}

.dot-completed.active {
    background: #5cb85c;
    border-color: #28a745;
}

.step-edit-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
}

.step-edit-fields label {
    display: flex;
    flex-direction: column;
    font-size: .85em;
    gap: .2rem;
}

.inline-edit-input {
    border: 1px solid transparent;
    background: transparent;
    padding: .2em .35em;
    font-size: inherit;
    font-family: inherit;
    width: 100%;
    border-radius: 3px;
    transition: border-color .15s, background-color .15s;
}

.inline-edit-input:hover {
    border-color: #ddd;
    background: #fafafa;
}

.inline-edit-input:focus {
    border-color: var(--main);
    background: #fff;
    outline: none;
}

.inline-edit-text {
    display: block;
    padding: .2em .35em;
    border: 1px solid transparent;
    border-radius: 3px;
    outline: none;
    transition: border-color .15s, background-color .15s;
    cursor: text;
}

.inline-edit-text:hover {
    border-color: #ddd;
    background: #fafafa;
}

.inline-edit-text:focus {
    border-color: var(--main);
    background: #fff;
}

.duration-col {
    width: 3.5em;
    text-align: center;
}

.duration-col .inline-edit-text {
    text-align: center;
}

.phase-header-input {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--main);
}

.hidden {
    display: none;
}

.template-step-row input[type="text"],
.template-step-row input[type="number"],
.template-step-row select {
    width: 100%;
    min-width: 80px;
}

.step-description-input {
    width: 100%;
    min-width: 120px;
    resize: vertical;
    font-size: .85em;
}

.step-description-inline {
    display: block;
    border: 1px solid transparent;
    border-radius: .2em;
    padding: .1em .3em;
    font-size: .85em;
    color: #888;
    line-height: 1.3;
    margin-top: .15em;
    cursor: text;
    transition: border-color .15s;
    font-weight: 400;
}

.step-description-inline:empty:before {
    content: attr(data-placeholder);
    color: #bbb;
    font-style: italic;
}

.step-description-inline:hover {
    border-color: #ccc;
}

.step-description-inline:focus {
    outline: none;
    border-color: var(--main);
    color: #333;
}

/* Plan steps: handle + actions on hover */
.plan-step-row .step-handle {
    position: relative;
    padding-left: 1.8em;
}

.plan-step-row .handle {
    display: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    cursor: grab;
    opacity: .5;
}

.plan-step-row .handle img {
    width: 100%;
    height: auto;
}

.step-delete-btn {
    position: absolute;
    opacity: 0;
    right: .15em;
    top: .5em;
    width: 2em;
    background: none;
    border: 0;
    padding: .2em;
}

.plan-step-row:hover .step-delete-btn {
    opacity: .7;
}

.plan-step-row .handle {
    border: 0;
    z-index: 2;
    border-radius: .3em;
    padding: .5em;
    width: 2em;
}

.plan-step-row .handle img {
    filter: invert(0);
}

.plan-step-row:hover .handle,
.plan-step-row:hover .step-action-button {
    display: block;
}

.plan-step-row.dragging {
    opacity: .4;
}

/* Template steps: handle on hover */
.template-step-row .step-handle {
    position: relative;
    padding-left: 1.8em;
    width: 2em;
}

.template-step-row .handle {
    display: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    z-index: 2;
    border-radius: .3em;
    padding: .5em;
    width: 2em;
    cursor: grab;
    opacity: .5;
}

.template-step-row .handle img {
    width: 100%;
    height: auto;
    filter: invert(0);
}

.template-step-row:hover .handle {
    display: block;
}

.template-step-row.dragging {
    opacity: .4;
}

.plan-step-row.dragging-collapsed {
    display: none;
}

.project-plan-table .phase-header-row {

}

.project-plan-table .phase-header-row td {
    padding-top: 1em;
    background-color: rgba(var(--main-rgb), .4);
    color: #fff;
}

.project-plan-table tbody tr:nth-child(2n) {
    background-color: #fff;
}

.project-plan-area {
    margin-bottom: 4em;
}

.project-plan-area .button-wrapper {
    padding-top: 2em;
}

.add-project-plan-step {
    padding: 2em;
    background-color: #fff;
    margin-top: 2em;
    box-shadow: var(--shadow);
    border-radius: .3em;
}

.project-plan-area-in-project {
    margin-bottom: 5em;
}

.project-plan-area-in-project .button-wrapper {
    margin-top: 2em;
}

.project-edit-view .relations {
    display: flex;
    gap: 2rem;
}

.project-edit-view .relations > div {
    flex: 1;
}

.project-plan-settings {
    margin-top: 2em;
}

/* Activity Chips */
.step-activity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .3rem;
}

.activity-chip {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    padding: .15em .55em;
    border-radius: 1em;
    font-size: .75em;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity .15s, background-color .15s;
    white-space: nowrap;
}

.activity-chip--mail {
    background: #e8f0fe;
    color: #1a56db;
    border-color: #c3d9f7;
}

.activity-chip--done {
    opacity: .5;
    text-decoration: line-through;
}

.activity-chip--add {
    background: transparent;
    color: #888;
    border: 1px dashed #ccc;
    font-weight: 400;
    font-size: .7em;
}

.activity-chip--add:hover {
    border-color: var(--main);
    color: var(--main);
}

.activity-chip--needs-config {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
}

.activity-address-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    font-size: .85em;
    line-height: 1;
    margin-left: .15em;
}

.activity-address-badge--ok {
    background: #dcfce7;
    color: #16a34a;
}

.activity-address-badge--warn {
    background: #fef3c7;
    color: #d97706;
}

/* Confirm modal – address selector per activity */
.confirm-modal-address-selector {
    margin-top: .4rem;
    margin-left: 1.2rem;
    font-size: .85em;
}

.confirm-modal-no-address {
    color: #b45309;
}

.confirm-modal-address-auto {
    color: #16a34a;
}

.confirm-modal-address-select {
    width: 100%;
    margin-top: .25rem;
}

/* Address Selector Modal */
.address-selector-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: .75rem 0;
    max-height: 280px;
    overflow-y: auto;
}

.address-selector-option {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .4rem;
    cursor: pointer;
    transition: background-color .1s;
}

.address-selector-option:has(input:checked) {
    border-color: var(--main);
    background: #eef2ff;
}

.address-selector-option input[type="radio"] {
    margin-top: .2rem;
    flex-shrink: 0;
}

.address-selector-email {
    color: #6b7280;
    margin-left: .3em;
}

.address-selector-street {
    display: block;
    color: #9ca3af;
    font-size: .9em;
}

/* Step Modal */
.step-modal-hidden {
    display: none !important;
}

.step-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .15s ease;
}

.step-modal {
    background: #fff;
    border-radius: .5em;
    padding: 1.5em 2em;
    max-width: 28em;
    width: 90%;
    box-shadow: 0 .5em 2em rgba(0, 0, 0, .2);
    animation: slideUp .2s ease;
}

.step-modal--wide {
    max-width: 36em;
}

.step-modal h3 {
    margin: 0 0 .75em;
    font-size: 1.1em;
}

.step-modal p {
    margin: 0 0 .75em;
    color: #555;
    font-size: .9em;
}

.step-modal-actions-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25em;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.step-modal-actions-list li {
    display: flex;
    align-items: center;
}

.step-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.25em;
}

.step-modal-form {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.step-modal-form label {
    display: flex;
    flex-direction: column;
    font-size: .85em;
    gap: .2rem;
    flex: 1 1 45%;
    min-width: 12em;
}

.step-modal-form label.full-width {
    flex: 1 1 100%;
}

.step-modal-form input,
.step-modal-form select,
.step-modal-form textarea {
    padding: .4em .5em;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: inherit;
    font-family: inherit;
}

.step-modal-form textarea {
    resize: vertical;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(1em);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.template-step-row.phase-header-row td {
    background-color: rgba(var(--main-rgb), .4);
    color: #fff;
    font-weight: 700;
}

/* Template activity chips */
.template-activities-cell {
    min-width: 10em;
}

.template-activity-chip {
    position: relative;
    padding-right: 1.4em;
}

.activity-chip-remove {
    position: absolute;
    right: .2em;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
    color: #999;
    padding: 0;
    line-height: 1;
    display: none;
}

.template-activity-chip:hover .activity-chip-remove {
    display: block;
    color: #c00;
}

/* ── Project Cards (Kundenansicht) ── */

.project-cards-filter {
    margin-bottom: 1.5em;
}

.project-cards-filter-inner {
    position: relative;
    max-width: 400px;
}

.project-cards-filter-inner input {
    width: 100%;
    padding: .75em 1.25em;
    padding-right: 2.5em;
    border: 2px solid #e2e8f0;
    border-radius: .5em;
    font-size: 1em;
    transition: border-color .2s;
    background: #fff;
}

.project-cards-filter-inner input:focus {
    outline: none;
    border-color: var(--main);
}

.project-cards-filter-reset {
    position: absolute;
    right: .75em;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: .5;
    transition: opacity .2s;
}

.project-cards-filter-reset:hover {
    opacity: 1;
}

.project-cards-filter-reset img {
    width: 1em;
    height: 1em;
}

.project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25em;
    transition: opacity .2s;
}

.project-cards.searching {
    opacity: .4;
    pointer-events: none;
}

.project-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: .75em;
    padding: 1.5em;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
    overflow: hidden;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--main), #5a82c4);
    opacity: 0;
    transition: opacity .2s;
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .06);
    border-color: var(--main);
}

.project-card:hover::before {
    opacity: 1;
}

.project-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75em;
    gap: .5em;
}

.project-card-number {
    font-size: .8em;
    font-weight: 600;
    color: var(--main);
    background: rgba(var(--main-rgb), .08);
    padding: .2em .6em;
    border-radius: .3em;
    letter-spacing: .02em;
}

.project-card-type {
    font-size: .75em;
    color: #8896a6;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.project-card-name {
    font-size: 1.1em;
    font-weight: 600;
    color: #1a2533;
    margin-bottom: .75em;
    line-height: 1.35;
    word-break: break-word;
}

.project-card-meta {
    display: flex;
    gap: 1.25em;
    margin-top: auto;
    padding-top: .75em;
    border-top: 1px solid #f0f3f7;
}

.project-card-stat {
    display: flex;
    flex-direction: column;
}

.project-card-stat-value {
    font-size: 1.25em;
    font-weight: 700;
    color: #1a2533;
    line-height: 1.2;
}

.project-card-stat-label {
    font-size: .7em;
    color: #8896a6;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 500;
}

.project-card-comment {
    margin-top: .75em;
    font-size: .85em;
    color: #6b7a8d;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Customer Project Detail View ── */

.customer-project-view {
    padding-bottom: 4em;
}
.customer-project-view .head-wrapper {
    margin-bottom:2em;
}


.customer-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    color: #6b7a8d;
    text-decoration: none;
    font-size: .9em;
    margin-bottom: 1em;
    transition: color .2s;
}

.customer-back-link:hover {
    color: var(--main);
}

.customer-back-link img {
    width: 1em;
    opacity: .5;
}

.customer-project-header {
    margin-bottom: 2.5em;
}

.customer-project-header h1 {
    font-size: 1.8em;
    font-weight: 700;
    color: #1a2533;
    margin: .2em 0 .3em;
    line-height: 1.25;
}

.customer-project-type {
    display: inline-block;
    font-size: .85em;
    color: #6b7a8d;
    background: #f0f3f7;
    padding: .25em .75em;
    border-radius: .3em;
    font-weight: 500;
}

/* Plan */

.customer-plan {
    border-radius: .75em;
    margin-bottom: 2em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.customer-plan-header {
    margin-bottom: 4em;
}

.customer-plan-header h2 {
    font-size: 1.3em;
    font-weight: 700;
    color: #1a2533;
    margin: 0 0 1em;
}

.customer-plan-progress {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom:1em;
}

.customer-plan-progress-bar {
    flex: 1;
    height: 16px;
    background: #e8ecf1;
    border-radius: 3px;
    overflow: hidden;
}

.customer-plan-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2d9c5e, #3ab76e);
    border-radius: 3px;
    transition: width .4s ease;
}

.customer-plan-progress-text {
    color: #6b7a8d;
    font-weight: 500;
    text-align: center;
}

/* Phase */

.customer-plan-steps {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.customer-phase {
    display: flex;
    flex-direction: column;
    gap: .75em;
    border-radius:.5em;
    margin-bottom:1.5em;
}

.customer-phase-label {
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--main);
}

/* Horizontal step tracker */

.customer-phase-steps {
    display: flex;
    flex-wrap:wrap;
    overflow-x: auto;
    padding-bottom: .5em;
}

.customer-step-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom:2em;
    flex:0 0 14em;
}

/* Dot row: line-half + dot + line-half */

.customer-step-dot-row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    flex-shrink: 0;
}

.customer-step-line-half {
    flex: 1;
    height: 3px;
    background: #e0e5ec;
    border-radius: 1.5px;
}

.customer-step-col:first-child .customer-step-line-half:first-child,
.customer-step-col:last-child .customer-step-line-half:last-child {
    background: transparent;
}

.customer-step-line--completed {
    background: #3ab76e;
}


.customer-step-line--none {
    background: transparent;
}

/* Dot (indicator circle) */

.customer-step-dot {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}

.customer-step-dot--pending {
    background: #f0f3f7;
    border: 2px solid #d0d7e0;
}

.customer-step-dot--in_progress {
    background: #fef3cd;
    border: 2px solid #f0c030;
    box-shadow: 0 0 0 4px rgba(240, 192, 48, .15);
}

.customer-step-dot-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e6a817;
    animation: customer-pulse 1.5s ease-in-out infinite;
}

@keyframes customer-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .5;
        transform: scale(.75);
    }
}

.customer-step-dot--completed {
    background: #d4edda;
    border: 2px solid #3ab76e;
    color: #2d9c5e;
}

.customer-step-dot--completed svg {
    width: 16px;
    height: 16px;
}

/* Step card */

.customer-step-card {
    background: #fff;
    width:calc(100% - 2em);
    margin:.75em 1em;
    border: 1px solid #e8ecf1;
    border-radius: .5em;
    height:100%;
    text-align: center;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.customer-step-card:hover {
    border-color: #d0d7e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.customer-step-card--completed {
    background: #d4edda;
    border-color: #3ab76e;
    color: #2d9c5e;
}

.customer-step-card--in_progress {
    border-color: #f0c030;
    background: #fffef8;
}

.customer-step-name {
    font-weight: 600;
    font-size: .9em;
    line-height: 1.4;
    padding:.6em .6em 0;
}


.customer-step-description {
    font-size: .8em;
    color: #6b7a8d;
    margin-top: .4em;
    line-height: 1.5;
    padding:0 .8em .6em;
}


.customer-step-status-label {
    font-size: .7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aa8b8;
    border-bottom:1px solid #9aa8b8;
    display: block;
    padding:.5em;
}
.customer-step-status-label--active {
    color: #d4930a;
    border-bottom-color: #d4930a;
}
.customer-step-card--completed .customer-step-status-label {
    color: #fff;
    background-color: #2d9c5e;
}

/* Responsive: stack on very small screens */

@media (max-width: 480px) {
    .customer-step-col {
        min-width: 120px;
    }
}

/* Recipes section */

.customer-recipes {
    margin-top: 2.5em;
}

.customer-recipes h2 {
    font-size: 1.3em;
    font-weight: 700;
    color: #1a2533;
    margin: 0 0 1em;
}

.customer-recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1em;
}

.customer-recipe-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .5em;
    padding: 1.25em;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.customer-recipe-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    border-color: var(--main);
}

.customer-recipe-number {
    font-weight: 700;
    color: var(--main);
    font-size: 1.05em;
    margin-bottom: .25em;
}

.customer-recipe-name {
    font-size: .9em;
    color: #1a2533;
    margin-bottom: .5em;
    line-height: 1.35;
}

.customer-recipe-status {
    font-size: .75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #d4930a;
    margin-top: auto;
}

.customer-recipe-status--done {
    color: #2d9c5e;
}

@media (min-width: 800px) {
    .project-plan-create-forms {
        display: flex;
    }

    .project-plan-create-forms form {
        flex: 1;
        width: 100%;
        padding-right: 5%;
    }
}

.project-plan-create-forms form select,
.project-plan-create-forms form input {
    width: 100%;
}