/*
************************************************************
Styles:     flix//backend
Autor:      Thomas Tiedtke
(c) sinntun.codes
************************************************************
*/


/* Allgemeine Element Styles
***************************************************************************** */


/* Buttons
***************************************************************************** */

.button {
    display: block;
    float: left;
    border: 1px solid #858585;
    font-size: 12px;
    line-height: 12px;
    padding: 6px 5px 8px 30px;
    text-decoration: none;
    color: #858585;
    background-position: 5px 5px;
    background-repeat: no-repeat;
}

.button:hover {
    background-color: #efeff0;
}

.button-normal,
.uploadtool-options-preview,
.button-phpinfo,
.button-database,
.button-clearcache,
.button-login,
.imagetool-options-popup,
.imagetool-options-delete,
.relationAddRow .button-add,
.add-custom-field {
    color: #00528c;
    border-radius: 10px;
    font-size: 18px;
    padding: 10px;
    border-color: #00528c;

    background: #fff;
    cursor: pointer;
}

.button-normal:hover,
.uploadtool-options-preview:hover,
.button-phpinfo:hover,
.button-database:hover,
.button-clearcache:hover,
.button-login:hover,
.imagetool-options-popup:hover,
.imagetool-options-delete:hover,
.relationAddRow .button-add:hover,
.add-custom-field:hover {
    border-color: grey;
    background: none;
    color: grey;
}

.button-normal {
    margin: 20px 10px 20px 0;
}

.button-normal[onclick*="showAllDatagroups"]:before {
    font: var(--fa-font-solid);
    content: "\e0a4";
    margin-right: 10px;
}

.button-normal[onclick*="hideAllDatagroups"]:before {
    font: var(--fa-font-solid);
    content: "\e0a7";
    margin-right: 10px;
}

.button-phpinfo,
.button-database {
    margin-top: 5px;
}

.button-disabled,
.button-disabled:hover {
    background-color: #e7e7e7;
}

.button-logout {
    border-radius: 10px;
    border-color: #00528c;
    color: #00528c;
    float: none;
    padding-left: 5px;
    text-align: center;
    font-size: 18px;
    line-height: initial;
    margin: 0 0 10px;
}

.button-logout:hover {
    background: initial;
    border-color: grey;
}

.button-add:before,
.button-save:before,
.button-assetimage-save:before,
.button-preview:before,
.button-delete:before,
.button-edit:before,
.button-backup:before,
.button-unlock:before,
.button-adjust:before {
    font: var(--fa-font-solid);
    margin-right: 10px;
}

.button-add:before {
    content: "+";
}

.button-save:before,
.button-assetimage-save:before {
    content: "\f0c7";
}

.button-preview:before {
    content: "\f06e";
}

.button-micrositeedit {
    background-image: url("/_images/btn_icn_micrositeedit.png");
}

.button-delete:before {
    content: "\f1f8";
}

.button-edit:before {
    content: "\f304";
}

.button-adjust:before {
    content: "\f1de";
}

.button-abort {
    background-image: url("/_images/btn_icn_abort.svg");
    background-size: 18px auto;
    background-position: center left 8px;
    padding-left: 34px !important;
}

.button-select {
    background-image: url("/_images/btn_icn_select.png");
}

.button-imagetool-save {
    background-image: url("/_images/btn_icn_save.svg");
    background-size: 18px auto;
    background-position: center left 8px;
    padding-left: 34px !important;
}

.button-imagetool-rotate-right {
    background-image: url(/_images/redo-alt.svg);
    background-size: 18px auto;
    background-position: center;
}

.button-imagetool-rotate-left {
    background-image: url(/_images/undo-alt.svg);
    background-size: 18px auto;
    background-position: center;
}

.button-take {
    background-image: url("/_images/btn_icn_take.svg");
    background-size: 18px auto;
    background-position: center left 8px;
    padding-left: 34px !important;
}

.button-undo {
    background-image: url("/_images/btn_icn_undo.svg");
    background-size: 18px auto;
    background-position: center left 8px;
    padding-left: 34px !important;
}

.button-search {
    background-image: url("/_images/btn_icn_search.svg");
    background-size: 13px;
    background-position: center;
}

#search-id-button {
    border: 1px solid #00528c;
    background-color: transparent;
    border-radius: 10px;
    cursor: pointer;
}

.button-backup:before {
    content: "\f0c7";
}

.button-unlock {
    float: none;
    display: inline-block;
    margin-top: 10px;
    background: #cf222e !important;
}

.button-unlock:hover {
    background: grey !important;
}

.button-unlock:before {
    content: "\f09c";
}

.imagetool-options-popup,
.imagetool-options-delete {
    margin-left: 10px;
}

/* Icons
***************************************************************************** */

.icon-websites:before,
.icon-pages:before,
.icon-modules:before,
.icon-files:before,
.icon-asset:before,
.icon-media:before,
.icon-image:before,
.icon-import:before,
.icon-info:before,
.icon-createpageelements:before,
.icon-changelog:before,
.icon-payload:before,
.icon-backup:before,
.icon-downloads:before,
.icon-news:before,
.icon-gallery:before,
.icon-topics:before,
.icon-instagram:before,
.icon-facebook:before,
.icon-geocoding:before,
.icon-directlinks:before,
.icon-accounts:before,
.icon-accountgroups:before,
.icon-session:before,
.icon-list:before,
.icon-meta-payload:before,
.icon-meta-update:before,
.icon-events:before,
.icon-assettopics:before,
.icon-assettopiccategory:before,
.icon-jobs:before,
.icon-jobapplications:before,
.icon-person:before {
    font: var(--fa-font-solid);
    font-size: 16px;
    margin-right: 12.5px;

    display: inline-block;
    width: 20px;
    text-align: center;
}

.icon-instagram:before,
.icon-facebook:before {
    font: var(--fa-font-brands);
}

.icon-websites:before {
    content: "\f0ac";
}

.icon-pages:before {
    content: "\f0e8";
}

.icon-modules:before {
    content: "\f03a";
}

.icon-files:before {
    content: "\f15b";
}

.icon-asset:before {
    content: "\e195";
}

.icon-media:before {
    content: "\f87c";
}

.icon-image:before {
    content: "\f302";
}

.icon-import:before {
    content: "\f56f";
}

.icon-info:before {
    content: "\f05a";
}

.icon-createpageelements:before {
    content: "\e197";
}

.icon-changelog:before {
    content: "\f328";
}

.icon-payload:before {
    content: "\f0a0";
}

.icon-backup:before {
    content: "\f0c5";
}

.icon-downloads:before {
    content: "\f019";
}

.icon-news:before {
    content: "\f1ea";
}

.icon-gallery:before {
    content: "\f302";
}

.icon-topics:before {
    content: "\e1d2";
}

.icon-instagram:before {
    content: "\f16d";
}

.icon-facebook:before {
    content: "\f09a";
}

.icon-geocoding:before {
    content: "\f3c5";
}

.icon-directlinks:before {
    content: "\f0c1";
}

.icon-accounts:before {
    content: "\f007";
}

.icon-accountgroups:before {
    content: "\f0c0";
}

.icon-session:before {
    content: "\f502";
}

.icon-list:before {
    content: "\f0c9";
}

.icon-meta-payload:before {
    content: "\f071";
}

.icon-meta-update:before {
    content: "\f05a";
}

.icon-events:before {
    content: "\f133";
}

.icon-assettopics:before {
    content: "\f02b";
}

.icon-assettopiccategory:before {
    content: "\f02c";
}

.icon-jobs:before {
    content: "\f0b1";
}

.icon-jobapplications:before {
    content: "\e2f2";
}

.icon-person:before {
    content: "\f0c0";
}

.icon-analytics {
    background-image: url("/_images/icn_nav_analytics.png");
}

.icon-newsletter {
    background-image: url("/_images/icn_nav_newsletter.png");
}

.icon-tools {
    background-image: url("/_images/icn_nav_tools.png");
}

.icon-pageelements {
    background-image: url("/_images/icn_nav_pageelements.png");
}

.iconButton {
    cursor: pointer;
    text-decoration: none;
    color: #00528c;
    background: #e5edf3;
    border-radius: 5px;
    padding: 5px;
    font-size: 15px;
    width: 20px;
    text-align: center;
    display: block;
}

.iconButton:hover {
    color: grey !important;
    background: #f2f2f2;
}

.iconButtonLabel {
    padding-left: 5px;
    padding-right: 5px;
}

.iconButtonCopy:before {
    font: var(--fa-font-solid);
    content: "\f0c5";
}

.iconButtonDelete:before {
    font: var(--fa-font-solid);
    content: "\f1f8";
}

.iconButtonPreview:before {
    font: var(--fa-font-solid);
    content: "\f06e";
}

.iconButtonEdit:before {
    font: var(--fa-font-solid);
    content: "\f304";
}

.iconButtonSync:before {
    font: var(--fa-font-solid);
    content: "\f362";
}

.iconButtonCreatePageelements:before {
    font: var(--fa-font-solid);
    content: "\f890";
}

.iconButtonUsers {
    background-image: url("/_images/btn_icn_users.gif");
}

.iconButtonSettings {
    background-image: url("/_images/btn_icn_settings.gif");
}

.iconButtonSend {
    background-image: url("/_images/btn_icn_send.gif");
}

.iconButtonPreview:before {
    font: var(--fa-font-solid);
    content: "\f06e";
}

.iconButtonPreview.off:before {
    font: var(--fa-font-solid);
    content: "\f070";
}

.iconButtonDownload {
    background-image: url("/_images/icn_download.png");
}

.iconButtonRestore:before {
    font: var(--fa-font-solid);
    content: "\f2ea";
}

.iconButtonDeleteFinal {
    background-image: url("/_images/btn_icn_delete.gif");
}

.iconButtonClose {
    background-image: url("/_images/btn_icn_close.png");
}

.iconSortUp:before {
    font: var(--fa-font-solid);
    content: "\f176";
}

.iconSortDown:before {
    font: var(--fa-font-solid);
    content: "\f175";
}

.iconSortUpDown:before {
    font: var(--fa-font-solid);
    content: "\e099";
}

.icon-search {
    background-image: url("/_images/icn_search.gif");
}

.icon-back {
    background-image: url("/_images/icn_back.gif");
}

.icon-next {
    background-image: url("/_images/icn_next.gif");
}



/* filepond - customizing to flix
*************************************************** */

.filepond--root {
    margin-bottom: 0;
}

.imagetool-options td,
.uploadtool-options td {
    border-top: none !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
}

.uploadtool-options,
.uploadtool-options-filename {
    margin-bottom: 10px;
}

.imagetool-buttoncontainer {
    display: block;
    height: 50px;
}

.imagetool-buttoncontainer .button {
    background-color: transparent;
    border: 1px solid #01538c;
    color: #01538c;
    font-family: "Noto Sans", system-ui, sans-serif;
    cursor: pointer;
    border-radius: 10px;
    margin-right: 10px;
    padding: 10px;
    min-width: 34px;
}

.imagetool-buttoncontainer .button:hover {
    filter: grayscale(1) brightness(185%);
}

table.editor .imagetool-options td {
    vertical-align: top;
}

/* Status-Message
*************************************************** */

.status-border {
    margin: 0 0 15px 20px;
    border-width: 2px;
    border-style: solid;
    padding: 10px 10px;
    font-size: 14px;
}

.status-border.green {
    border-color: #00cc33;
}

.status-border .anzeige-meldung {
    font-size: 12px;
    margin: 3px 0 0 20px;
    display: none;
}


/* *************************************************************** */

.ui-dialog {
    box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.24);
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.ui-dialog .ui-dialog-content {
    padding: 20px;
}


/************* filter ********************/


#blockUI {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;

    background: rgba(0, 0, 0, 0.75);
    cursor: wait;
    z-index: 1000;

    display: none;
}

#blockUI img {
    width: 50px;
    filter: invert(1);
}

#blockUI span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    min-width: 350px;
    padding: 20px;
    text-align: center;

    background: rgba(0, 0, 0, 0.75);
    color: white;
    border-radius: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}