/*
---------------------------------------------------------------------------------------------------- Fischer spezifische anpassungen V1.1 ----------------------------------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}


/*
-------------------------------------------------------- Farben --------------------------------------------------------
*/

:root {
    --fi-black: #151d29;
    --fi-black10: #E7E8E9;
    --fi-black25: #C4C6C9;
    --fi-black40: #A1A5A9;
    --fi-yellow: #F1ed0e;
    --fi-yellow-light: rgba(231, 229, 48, 0.40);
    --fi-turkis: #48B8B2;
    --fi-blue: #118ACB;
    --fi-pastelgreen: #D0DFD5;
    --fi-pastelrosa: #F0DFDB;
    --fi-pastelyellow: #EDE3BD;
    --black: black;
    --white: white;
    --gridgreylight: #f8f9fa;
    --primary: var(--fi-black10);
    --secondary: var(--fi-black25);
    --dark: var(--fi-black40);
    --info: var(--fi-black25);
}


/*
-------------------------------------------------------- Schriftarten --------------------------------------------------------
*/

@font-face {
    font-family: "TradeGothic";
    src: url(../../fonts/TradeGothicLTPro.otf) format('opentype');
}

@font-face {
    font-family: "TradeGothicBold";
    src: url(../../fonts/TradeGothicLTProBold.otf) format('opentype');
}

@font-face {
    font-family: "TradeGothicLight";
    src: url(../../fonts/TradeGothicLTProLight.otf) format('opentype');
}

html, body {
    font-family: TradeGothic;
    letter-spacing: 1px;
}


/*
-------------------------------------------------------- Überschriften --------------------------------------------------------
*/

html {
    font-size: 16px;
}

label {
    font-size: 15px;
}

h4 {
    font-size: 1.4rem;
}

@media screen and (max-width: 767.55px) {
    h4 {
        font-size: 1.2rem;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: TradeGothic;
    letter-spacing: 1px;
}

h1, h2, h6 {
    color: var(--white);
}

h1 {
    font-size: 1.6rem;
    margin: .5rem;
}

h4 {
    margin-bottom: unset;
    text-transform: uppercase;
    margin-top: 10px;
}

h3, h5 {
    color: var(--black);
}


/*
-------------------------------------------------------- Navbar --------------------------------------------------------
*/

@media screen and (max-width: 767.55px) {
    .sidebar {
        min-height: 80px;
        background-image: unset;
        background-color: var(--fi-black40);
    }

    .desktopNav {
        visibility: hidden;
    }

    .nav {
        margin-top: 50px;
        display: block;
        margin-right: 50px;
    }

    .nav-link {
        font-size: 12px;
        font-family: TradeGothic;
        text-align-last: end;
    }

    .navbar-toggler {
        background: none;
        float: right;
        margin-right: 10px;
        margin-top: 25px;
    }

    button:focus {
        outline: none;
    }

    .content {
        padding-top: 1rem;
    }
}

@media screen and (min-width: 767.56px) {
    .mobileNav {
        visibility: hidden;
    }

    .sidebar {
        background-color: var(--fi-black10);
        background-image: url(../../pictures/navbar-header-revert.jpg);
        height: 130px;
        background-repeat: no-repeat;
        background-position-x: left;
    }

    app {
        flex-direction: column;
    }

    .navbar-toggler {
        display: none;
    }

    .nav {
        margin-top: 6.3rem;
    }

    .nav-link {
        padding: 2px 0px;
        padding-right: 2rem;
    }

        .nav-link:focus, .nav-link:hover {
            color: var(--fi-yellow);
        }

    .content {
        padding-top: unset;
    }

    .container {
        max-width: unset;
        padding: 0px 50px 0px 50px;
    }
}

@media screen and (min-width: 2560px) {
    .mobileNav {
        visibility: hidden;
    }

    .sidebar {
        background-color: var(--fi-black10);
        background-image: url(../../pictures/navbar-header-revert.jpg);
        height: 130px;
        background-repeat: round;
        background-position-x: left;
    }

    app {
        flex-direction: column;
    }

    .navbar-toggler {
        display: none;
    }

    .nav {
        margin-top: 6.3rem;
    }

    .nav-link {
        padding: 2px 0px;
        padding-right: 2rem;
    }

        .nav-link:focus, .nav-link:hover {
            color: var(--fi-yellow);
        }

    .content {
        padding-top: unset;
    }

    .container {
        max-width: unset;
        padding: 0px 50px 0px 50px;
    }
}

.sidebar {
    position: sticky;
    top: 0px;
    overflow: visible;
    width: 100%;
    padding-left: 2rem;
    z-index: 1;
}

    .sidebar a {
        color: var(--white);
        font-size: 0.9rem;
    }

a:hover {
    color: var(--fi-yellow);
    text-decoration: unset;
}

.nav-link:focus, .nav-link:hover {
    color: var(--fi-yellow);
}

.content {
    padding-top: unset;
}

.container {
    max-width: unset;
    padding: 0px 50px 0px 50px;
}

.main {
    padding-top: 5rem;
    padding-bottom: 4rem;
}


/*
-------------------------------------------------------- Footer --------------------------------------------------------
*/

@media screen and (min-width: 767.56px) {
    .buttonfooter {
        text-align: right;
    }
}

.buttonfooter {
    z-index: 1;
    position: fixed;
    bottom: 10px;
    right: 10px;
}

#addbutton, #topbutton {
    border-radius: 50%;
    background: var(--fi-black10);
    height: 45px;
    width: 45px;
    padding: 7px;
}

    #addbutton:hover, #topbutton:hover {
        background: var(--fi-black25);
    }


/*
-------------------------------------------------------- Navbar Logo --------------------------------------------------------
*/

@media screen and (min-width: 767.56px) {
    .logobox {
        position: sticky;
        overflow: visible;
        z-index: 1;
        align-self: self-end;
        top: 2px;
        width: 300px;
        margin-top: -200px;
        margin-bottom: 100px;
        float: right;
    }

    .leftlogobox {
        width: 150px;
        float: left;
        text-align: right;
        padding-right: 10px;
        margin-top: 25px;
    }

    .rightlogobox {
        width: 150px;
        float: right;
    }

    .logo {
        height: 80px;
        width: 80px;
        margin-right: 50px;
    }

    .logotext {
        align-self: self-end;
        font-family: TradeGothicLight;
        font-size: 14px;
        color: var(--fi-black);
        font-weight: 900;
    }
}

@media screen and (max-width: 767.55px) {
    .logobox {
        position: sticky;
        overflow: visible;
        z-index: 3;
        top: 10px;
        margin-top: -200px;
        margin-bottom: 100px;
        margin-left: 10px;
        width: 60px;
    }

    .logo {
        height: 60px;
        width: 60px;
    }
}


/*
-------------------------------------------------------- Login --------------------------------------------------------
*/

.loginbox {
    background: var(--white);
    opacity: 85%;
    width: 25%;
    height: 40%;
    min-width: 320px;
    min-height: 320px;
    position: absolute;
    top: 30%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: -webkit-center;
    text-align: -moz-center;
    border-radius: 10px;
}

.background {
    background-image: url(../../pictures/fi-data-services_16x9_retina.jpg);
    height: 100vh;
    background-position: center;
    background-size: cover;
}

.loginlogo {
    height: 110px;
    width: 110px;
    margin-top: -45px;
}

.loginbuttons {
    color: var(--white);
    background-color: var(--fi-black);
    width: 70%;
    min-width: 260px;
    border-radius: 10px;
    margin-bottom: 15px;
    height: 15%;
    align-content: center;
}

    .loginbuttons:hover {
        color: var(--fi-black10);
    }

.logintext {
    float: left;
    padding-left: 20px;
}

@media screen and (max-width: 767.55px) {
    .e-dialog.e-popup {
        min-height: unset !important;
        max-height: 95% !important;
        height: auto;
        width: 80% !important;
    }
    .p1 {
        padding: 0.2rem;
    }
    p {
        margin-bottom: 0.5rem;
    }
}

@media screen and (min-width: 767.56px) {
    .e-dialog.e-popup {
        width: 50%;
        min-width: 30%;
    }

    .e-dialog.e-filter-popup {
        min-width: unset;
    }

    .p1 {
        padding: 1rem;
    }
}

.contentlogin {
    min-height: 100px;
    align-content: center;
}

a.loginlink, .loginlink a {
    color: var(--fi-black);
    text-decoration: underline;
}

    a:hover.loginlink, .loginlink a:hover {
        color: var(--fi-black25);
        text-decoration: underline;
    }

    p {
        margin-bottom: 0.5rem;
    }

@media screen and (min-width: 767.56px) {
    .e-dialog.e-popup {
        width: 50%;
    }

    .p1 {
        padding: 1rem;
    }
}

.contentlogin {
    min-height: 100px;
    align-content: center;
}

a.loginlink, .loginlink a {
    color: var(--fi-black);
    text-decoration: underline;
}

a:hover.loginlink, .loginlink a:hover {
    color: var(--fi-black25);
    text-decoration: underline;
}




/*
-------------------------------------------------------- Cards --------------------------------------------------------
*/
.e-card-actions {
    font-size: .6rem;
    border: unset;
    height: 30px;
    line-height: 1rem;
    background-color: var(--fi-black10);
    border-radius: 5px
}

.e-card {
    margin: .5rem;
    width: 260px;
    border-radius: 5px;
    border: unset;
    line-height: unset;
}

.row {
    justify-content: center;
}

.e-card-content {
    border-left: 0.5px solid var(--fi-black25);
    border-right: 0.5px solid var(--fi-black25);
    border-bottom: 0.5px solid var(--fi-black25);
    font-family: TradeGothicLight;
}

.card-title {
    font-size: 1.1rem;
    text-align: -webkit-center;
    height: 2.5rem;
    margin-top: 30px;
}

div.card-text {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.75rem;
    height: 70px;
    overflow: overlay;
}

div.card-buttons {
    min-height: 40px;
    text-align: -webkit-center;
    margin-top: 10px;
}

.e-card-content .cardbutton {
    border: 1px solid var(--fi-black);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background-color: var(--white);
    position: absolute;
    margin-left: -25px;
    margin-top: -10px;
    align-content: center;
}

.fi-card-header {
    text-align: -webkit-center;
    margin-top: -40px;
}

.openbutton {
    border-radius: 10px;
    border: 1px solid var(--fi-black10);
    width: 80px;
    height: 30px;
}

    .openbutton:hover {
        border: 1px solid var(--fi-black25);
        box-shadow: 1px 1px 3px var(--fi-black10);
    }

    .openbutton p {
        margin: 0px;
        padding: 0px;
        font-size: 0.8rem;
        color: var(--black);
    }

.e-card .e-card-header {
    padding-top: 0px;
}

.bgheight {
    height: 100px;
}

.e-ddl .e-active {
    background: var(--fi-black40) !important;
}


/*
-------------------------------------------------------- Color --------------------------------------------------------
*/

.colorwhite {
    color: var(--white);
}

.colorblack {
    color: var(--fi-black);
}

.colorred {
    color: red;
}

.bgcoloryellow {
    background-color: var(--fi-black10);
}

.bgcolorblack10 {
    background-color: var(--fi-black10);
}

.bgcolorgrey25 {
    background-color: var(--fi-black40);
}


/*
-------------------------------------------------------- Icons --------------------------------------------------------
*/

.oi-menu {
    color: var(--fi-yellow);
    font-size: 25px;
}

.cardimage {
    width: 100%;
    border-radius: 5px;
    padding: unset;
    border: unset;
}

.cardimagebig {
    width: 260px;
    opacity: 20%;
}

.popupicon {
    height: 20px;
    width: auto;
    margin-bottom: 5px;
}

.oisizelogin {
    font-size: 20px;
    top: 4px;
}

.oitb:before {
    vertical-align: super;
}

.e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
    color: var(--fi-black);
}

.searchbaricon {
    padding-bottom: 2px;
    margin-bottom: unset;
}


/*
-------------------------------------------------------- Pop Up --------------------------------------------------------
*/

.wrap {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.e-dlg-header h4 {
    font-size: 1.3rem;
}

.e-dlg-header * {
    font-size: 1.5rem;
}


/*
-------------------------------------------------------- Button --------------------------------------------------------
*/

.btn:focus {
    box-shadow: 1px 1px 3px var(--fi-black10);
}

.btn-outline-success, .e-footer-content .e-btn.e-primary.e-flat:not([DISABLED]) {
    color: var(--black);
    border-color: var(--fi-black);
    background-color: var(--white);
}

    .btn-outline-success:hover, .e-footer-content .e-btn:hover.e-primary.e-flat:not([DISABLED]) {
        background-color: unset;
        border-color: var(--fi-black40);
        color: var(--black);
    }

    .btn-outline-success:not(:disabled):not(.disabled):active,
    .btn-outline-success:not(:disabled):not(.disabled).active,
    .show > .btn-outline-success.dropdown-toggle,
    .e-footer-content .e-btn:active.e-primary.e-flat:not([DISABLED]) {
        color: var(--black);
        background-color: var(--white);
        border-color: var(--fi-black10);
    }

        .btn-outline-success:not(:disabled):not(.disabled):active:focus,
        .btn-outline-success:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-success.dropdown-toggle:focus,
        .e-footer-content .e-btn:focus.e-primary.e-flat:not([DISABLED]) {
            border-color: var(--fi-black25);
            box-shadow: 1px 1px 3px var(--fi-black10);
        }

.btn-secondary {
    background-color: var(--fi-black10);
    color: var(--fi-black);
    border-color: var(--fi-black25);
}

    .btn-secondary:hover {
        background-color: var(--fi-black25);
        border-color: var(--fi-black40);
        color: var(--fi-black);
    }

    .btn-secondary:not(:disabled):not(.disabled):active,
    .btn-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-secondary.dropdown-toggle {
        color: var(--black);
        background-color: var(--white);
        border-color: var(--fi-black10);
    }

        .btn-secondary:not(:disabled):not(.disabled):active:focus,
        .btn-secondary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-secondary.dropdown-toggle:focus {
            border-color: var(--fi-black25);
            box-shadow: 1px 1px 3px var(--fi-black10);
        }

.btn-primary {
    background-color: var(--fi-black);
    color: var(--white);
    border-color: var(--fi-black);
}

    .btn-primary:hover {
        background-color: var(--fi-black40);
        border-color: var(--fi-black);
        color: var(--white);
    }

    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        background-color: var(--fi-black40);
        border-color: var(--fi-black);
        color: var(--white);
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus,
        .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            border-color: var(--fi-black25);
            box-shadow: 1px 1px 3px var(--fi-black10);
        }

.e-upload-browse-btn {
    background-color: var(--fi-black);
    color: var(--white);
    border-color: var(--fi-black);
}

    .e-upload-browse-btn:hover {
        background-color: var(--fi-black40);
        border-color: var(--fi-black);
        color: var(--white);
    }

    .e-upload-browse-btn:not(:disabled):not(.disabled):active,
    .e-upload-browse-btn:not(:disabled):not(.disabled).active,
    .show > .e-upload-browse-btn.dropdown-toggle {
        background-color: var(--fi-black40);
        border-color: var(--fi-black);
        color: var(--white);
    }

        .e-upload-browse-btn:not(:disabled):not(.disabled):active:focus,
        .e-upload-browse-btn:not(:disabled):not(.disabled).active:focus,
        .show > .e-upload-browse-btn.dropdown-toggle:focus {
            border-color: var(--fi-black25);
            box-shadow: 1px 1px 3px var(--fi-black10);
        }

.btn-outline-dark {
    background-color: var(--fi-black10);
    color: var(--fi-black);
    border-color: var(--fi-black25);
}

    .btn-outline-dark:hover {
        background-color: var(--fi-black25);
        border-color: var(--fi-black40);
        color: var(--white);
    }

    .btn-outline-dark:not(:disabled):not(.disabled):active,
    .btn-outline-dark:not(:disabled):not(.disabled).active,
    .show > .btn-outline-dark.dropdown-toggle {
        background-color: var(--fi-black40);
        border-color: var(--fi-black);
        color: var(--white);
    }

        .btn-outline-dark:not(:disabled):not(.disabled):active:focus,
        .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-dark.dropdown-toggle:focus {
            border-color: var(--fi-black25);
            box-shadow: 1px 1px 3px var(--fi-black10);
        }




/*
-------------------------------------------------------- Input --------------------------------------------------------
*/
.modal-body .e-float-input, .modal-body .e-float-input.e-control-wrapper {
    margin-top: unset;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: var(--fi-black25);
    outline: 0;
    box-shadow: 1px 1px 3px var(--fi-black10);
}


/*
-------------------------------------------------------- Dropdown --------------------------------------------------------
*/

.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--fi-black25);
    box-shadow: 1px 1px 3px var(--fi-black10);
}

.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    box-shadow: none;
    border: 1px solid var(--fi-black25);
    border-color: var(--fi-black25);
}

.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]), .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    border-color: var(--fi-black25);
}


/*
-------------------------------------------------------- Progress --------------------------------------------------------
*/

.loader {
    border: 16px solid var(--fi-black10);
    border-top: 16px solid var(--fi-black);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.loadersmall {
    border: 8px solid var(--fi-black10);
    border-top: 8px solid var(--fi-black);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

.aligncenter {
    text-align: -webkit-center;
    margin-top: 15%;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5 {
    stroke: var(--fi-yellow);
}

.e-spinner-pane .e-spinner-inner .e-spin-fluent .e-path-circle, .e-spinner-pane .e-spinner-inner .e-spin-fabric .e-path-circle {
    stroke: var(--fi-black);
}

.e-spinner-pane .e-spinner-inner .e-spin-fluent .e-path-arc, .e-spinner-pane .e-spinner-inner .e-spin-fabric .e-path-arc {
    stroke: var(--fi-pastelrosa);
}

.e-spinner-pane .e-spinner-inner .e-spin-label {
    color: var(--black);
}

.e-spinner-pane .e-spinner-inner .e-spin-fabric .e-path-circle {
    stroke-width: 3;
}


/*
-------------------------------------------------------- Toast --------------------------------------------------------
*/

.e-toast-container .e-toast.e-toast-info {
    background-color: var(--fi-pastelgreen);
    color: var(--black);
}

    .e-toast-container .e-toast.e-toast-info:hover {
        background-color: var(--fi-pastelgreen);
    }

    .e-toast-container .e-toast.e-toast-info .e-toast-message .e-toast-title {
        color: var(--black);
        border-color: var(--black);
    }

    .e-toast-container .e-toast.e-toast-info .e-toast-message .e-toast-content {
        color: var(--black);
    }


/*
-------------------------------------------------------- Tree View --------------------------------------------------------
*/

.box {
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.e-treeview .e-list-item.e-active > .e-fullrow {
    background-color: var(--fi-black40);
    border-color: var(--fi-black40);
    color: black;
}

.e-treeview .e-list-item.e-active.e-hover > .e-fullrow, .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
    background-color: var(--fi-black40);
    border-color: var(--fi-black40);
}

.e-checkbox-wrapper {
    margin: 5px 15px;
}

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover,
.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover {
    background: var(--fi-pastelgreen);
}

    .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler,
    .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-resize-handler {
        color: var(--fi-pastelgreen);
    }

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler,
.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
    color: var(--fi-pastelgreen);
}

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active,
.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
    background: var(--fi-pastelgreen);
}

@media screen and (max-width: 767.55px) {
    .e-treeview .e-list-item .e-ul {
        padding: 0 0 0 5px;
    }
}


/*
-------------------------------------------------------- Sonstiges --------------------------------------------------------
*/

.e-content.e-lib.e-touch {
    margin-top: 10px;
}

@media screen and (max-width: 767.55px) {
    .searchwidth {
        width: 300px;
    }
}

@media screen and (min-width: 767.56px) {
    .searchwidth {
        width: 400px;
    }
}


/*
-------------------------------------------------------- Grid --------------------------------------------------------
*/

@media screen and (max-width: 767.55px) {
    div#Grid_columnChooserDialog {
        margin-right: 60vw;
        float: right;
    }

    .e-acrdn-content .e-grid .e-gridcontent {
        height: 35vh;
    }
}

@media screen and (min-width: 767.56px) {
    div#Grid_columnChooserDialog {
        margin-right: 30%;
        float: right;
    }

    .e-acrdn-content .e-grid .e-gridcontent{
        height: 30vh;
    }
}

.e-grid .e-focused:not(.e-menu-item) {
    box-shadow: unset;
}

.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
    border-right-color: unset;
    color: var(--black);
}

.e-pager .e-currentitem {
    border: 3px solid var(--fi-black25);
}

.e-pager .e-numericitem {
    color: var(--black);
}

    .e-pager .e-numericitem:hover {
        color: var(--black)
    }

.e-pager div.e-icons.e-pager-default {
    color: var(--black);
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: 0 0 0 1px var(--fi-black10) inset
}

.e-grid .e-groupdroparea {
    background-color: var(--fi-black10);
    border-top-color: var(--fi-black25);
    color: var(--fi-black);
}

.e-grid .e-toolbar {
    background: var(--fi-black10);
    border-top: 1px solid var(--fi-black25);
}

.e-toolbar .e-toolbar-items {
    background: var(--fi-black10);
}

.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    background: var(--fi-black40);
}

.e-grid td.e-active {
    background: var(--fi-black10);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
    color: var(--black);
}

.e-contextmenu-wrapper ul .e-menu-item.e-selected,
.e-contextmenu-container ul .e-menu-item.e-selected {
    background-color: var(--fi-black40);
    color: #fff;
    outline: 0 solid var(--fi-black40);
    outline-offset: 0;
}

div#Grid_ccdlg {
    left: unset !important;
}


/*
----------------------------------- Radio Button -----------------------------------
*/
.e-radio:checked + label::before {
    border-color: var(--fi-black40);
    background-color: var(--fi-black10);
    box-shadow: unset;
}

.e-radio:checked + label::after {
    background-color: var(--fi-black);
    color: var(--fi-black10);
}

.e-radio:checked:hover + label::before {
    border-color: var(--fi-black40);
    background-color: var(--fi-black10);
}

.e-radio:checked:focus + label::before {
    border-color: var(--fi-black40);
    background-color: var(--fi-black10);
}

.e-radio:checked:hover + label::after {
    background-color: var(--fi-black);
    color: var(--fi-black10);
}

.e-radio:checked:focus + label::after {
    background-color: var(--fi-black);
    color: var(--fi-black10);
}

.e-radio:checked + label:hover::before {
    border-color: var(--black);
}


/*
----------------------------------- Switch -----------------------------------
*/

.e-switch-wrapper .e-switch-on {
    background-color: var(--fi-pastelgreen);
}

.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {
    background-color: var(--fi-pastelgreen);
}

.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: var(--fi-pastelgreen);
    border-color: var(--fi-pastelgreen);
}

.e-switch-wrapper.e-active .e-switch-inner.e-switch-active,
.e-switch-wrapper:active .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper.e-active .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper:active .e-switch-inner.e-switch-active {
    border-color: var(--fi-pastelgreen);
}

.e-switch-wrapper.e-active .e-switch-inner, .e-switch-wrapper:active .e-switch-inner, .e-css.e-switch-wrapper.e-active .e-switch-inner, .e-css.e-switch-wrapper:active .e-switch-inner {
    background-color: #fff;
    border-color: #dee2e6;
    box-shadow: 0 0 0 3px var(--fi-pastelgreen);
    outline: none;
    outline-offset: initial;
}

.e-switch-wrapper:hover .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper:hover .e-switch-inner.e-switch-active {
    background-color: var(--fi-pastelgreen);
    border-color: var(--fi-turkis);
}


/*
----------------------------------- Checkbox -----------------------------------
*/
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check,
.e-checkbox-wrapper .e-frame.e-stop,
.e-css.e-checkbox-wrapper .e-frame.e-stop {
    background-color: var(--fi-black40);
    border-color: var(--black);
}

    .e-checkbox-wrapper .e-frame.e-check:hover,
    .e-css.e-checkbox-wrapper .e-frame.e-check:hover,
    .e-checkbox-wrapper .e-frame.e-stop:hover,
    .e-css.e-checkbox-wrapper .e-frame.e-stop:hover {
        background-color: var(--fi-black25);
        border-color: var(--black);
    }

.e-checkbox-wrapper:hover .e-frame.e-check,
.e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: var(--fi-black25);
    border-color: var(--fi-black40);
}

.e-checkbox-wrapper:hover .e-frame.e-stop,
.e-css.e-checkbox-wrapper:hover .e-frame.e-stop {
    background-color: var(--fi-black25);
    border-color: var(--black);
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
    background-color: var(--fi-black40);
    border-color: var(--black);
    box-shadow: 0px 0px 4px var(--fi-black40);
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame {
    border-color: unset;
    box-shadow: unset;
}

.e-checkbox-wrapper .e-checkbox:active + .e-frame, .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame {
    border-color: var(--black10);
    box-shadow: unset;
}

    .e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check, .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check {
        background-color: var(--fi-black40);
        border-color: var(--black);
        box-shadow: unset;
    }


/*
----------------------------------- Date -----------------------------------
*/

.e-calendar .e-content td.e-today.e-selected:hover span.e-day,
.e-calendar .e-content td.e-selected:hover span.e-day,
.e-calendar .e-content td.e-selected.e-focused-date span.e-day,
.e-bigger.e-small .e-calendar .e-content td.e-today.e-selected:hover span.e-day,
.e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day,
.e-bigger.e-small .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    background-color: var(--fi-black25);
}

.e-calendar .e-content td.e-focused-date.e-today span.e-day,
.e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
    box-shadow: inset 1px 0 var(--fi-black40),inset 0 1px var(--fi-black40),inset -1px 0 var(--fi-black40),inset 0 -1px var(--fi-black40);
}

.e-calendar .e-content td.e-today.e-selected span.e-day,
.e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day {
    box-shadow: inset 1px 0 var(--fi-black40),inset 0 1px var(--fi-black40),inset -1px 0 var(--fi-black40),inset 0 -1px var(--fi-black40);
}

.e-calendar .e-content td.e-today span.e-day,
.e-calendar .e-content td.e-focused-date.e-today span.e-day,
.e-bigger.e-small .e-calendar .e-content td.e-today span.e-day,
.e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
    box-shadow: inset 1px 0 var(--fi-black40),inset 0 1px var(--fi-black40),inset -1px 0 var(--fi-black40),inset 0 -1px var(--fi-black40);
    color: var(--fi-black);
}

.e-daterangepicker.e-popup .e-footer .e-btn.e-flat:hover,
.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat:hover {
    background: var(--fi-black25);
}

.e-daterangepicker.e-popup .e-footer .e-btn.e-flat,
.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat {
    background: var(--fi-black40);
}

.e-calendar .e-content td.e-selected span.e-day,
.e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
    background-color: var(--fi-black25);
}

.e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled,
.e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled,
.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled,
.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled {
    background-color: var(--fi-black25);
    border-color: var(--fi-black25);
}

    .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled:hover,
    .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled:hover,
    .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled:hover,
    .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled:hover {
        background-color: var(--fi-black25);
        border-color: var(--fi-black25);
    }

.e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary,
.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary {
    background-color: var(--fi-black25);
    border-color: var(--fi-black40);
}

    .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:hover,
    .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:hover {
        background-color: var(--fi-black40);
        border-color: var(--fi-black25);
    }

.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
    background-color: var(--fi-black40);
}

.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-today span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-today span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-today span.e-day {
    background-color: var(--fi-black25);
}

.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-today:hover span.e-day,
.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day,
.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-start-date.e-selected.e-today span.e-day,
.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-end-date.e-selected.e-today span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-today:hover span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-start-date.e-selected.e-today span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-end-date.e-selected.e-today span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-today:hover span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-start-date.e-selected.e-today span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-end-date.e-selected.e-today span.e-day {
    border: 1px solid var(--fi-black40);
}

.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span {
    border: 1px solid var(--fi-black40);
}


/*
----------------------------------- Accordion -----------------------------------
*/

.e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus,
.e-accordion .e-acrdn-item .e-acrdn-header:focus {
    box-shadow: unset;
}

.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header,
.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header,
.e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:focus,
.e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus {
    background: var(--fi-black10);
}

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-icon,
    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content,
    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-icon,
    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
        color: var(--black);
    }

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content,
    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content {
        color: var(--black);
    }

.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-acrdn-header-content,
.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-toggle-icon .e-icons.e-tgl-collapse-icon {
    color: var(--fi-black40);
}

.e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-acrdn-header-content {
    color: var(--black);
}

.e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:hover {
    background: var(--fi-black10);
}

.e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
    background: var(--fi-black10);
}

.e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-acrdn-header-content {
    color: var(--black);
}

.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover:focus .e-icons,
.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover:focus .e-acrdn-header-content,
.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover:focus .e-icons,
.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover:focus .e-acrdn-header-content {
    color: var(--black);
}

.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon,
.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
    color: var(--black);
}

.e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-icons {
    color: var(--black);
}


/*
----------------------------------- Button -----------------------------------
*/

.e-toolbar .e-toolbar-item .e-tbar-btn {
    background: var(--white);
    color: var(--black);
}

    .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
        background: var(--white);
        color: var(--fi-black40);
        box-shadow: 1px 1px 3px var(--fi-black25);
    }

        .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text,
        .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons,
        .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-icons,
        .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-tbar-btn-text {
            color: var(--black);
        }

    .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,
    .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons,
    .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons,
    .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
        color: var(--black);
    }

    .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
        background: var(--white);
        color: var(--black);
        box-shadow: 2px 2px 4px var(--fi-black40);
    }

.e-btn.e-flat.e-primary:disabled,
.e-btn.e-flat.e-primary.e-disabled,
.e-css.e-btn.e-flat.e-primary:disabled,
.e-css.e-btn.e-flat.e-primary.e-disabled {
    background: var(--fi-black10);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: var(--black);
}

    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text, .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
        color: var(--fi-black);
    }

.e-btn.e-flat:focus, .e-css.e-btn.e-flat:focus {
    box-shadow: 2px 2px 4px var(--fi-black40);
}