/* Scrollbar styles section */

*::-webkit-scrollbar-track {
    margin: 20px 0;
}

*::-webkit-scrollbar-track {
    margin: 0 20px;
}

*::-webkit-scrollbar-track {
    border-radius: 2px;
    background-color: #d7d7d7;
    border: solid 12px #fff;
}

*::-webkit-scrollbar {
    width: 25px;
    background-color: white;
    height: 25px;
}

*::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #64b935;
    border: solid 10px #fff;
}

    *::-webkit-scrollbar-thumb:vertical {
        border-bottom: 0;
        border-top: 0;
    }

    *::-webkit-scrollbar-thumb:horizontal {
        border-left: 0;
        border-right: 0;
    }

/* END scrollbar styles section */

paper-input-container > div.add-on-content {
    height: 20px;
}

allgress-table paper-checkbox #checkbox.checked {
    background-color: #41505f !important;
    border-color: #41505f !important;
}

/* General hidden style to hide element based on attribute*/
[hidden], template {
    display: none !important;
}

/* Material container (basically it's div with shadow) should have padding*/
paper-material {
    padding: 10px;
}

/**/
app-drawer {
    z-index: 103;
}

/* Preventing pointer events on disabled buttons */
paper-button[disabled] {
    pointer-events: none;
    background: #eaeaea;
    color: #a8a8a8;
    cursor: auto;
}

/* Wertical tabs should have min width */
allgress-paper-tabs-vertical {
    min-width: 200px;
}

/* Vaadin control should not have transform to be able to host dialogs appropriately*/
vaadin-split-layout {
    transform: none !important;
}

    /* Left part of split layout should be defined to prevent 'jumping' */
    vaadin-split-layout > *:first-child {
        flex: 1 1 40%;
        background-color: white;
    }

    /* Right part of split layout should be defined to prevent 'jumping' */
    vaadin-split-layout > *:last-child {
        flex: 1 1 60%;
        background-color: white;
    }

/* FOrce vaadin split layout to get full space of page*/
vaadin-split-layout {
    flex-grow: 1;
    margin-top: 2px;
}
/*
allgress-attachment-control[readonly] vaadin-upload #buttons {
    display: none!important;--vaadin-upload-buttons
}*/

/* Globally defined colors for the application */
.slategray {
    color: slategray;
}

.steelblue {
    color: steelblue;
}

.darkred {
    color: darkred;
}

.darkgreen {
    color: darkgreen;
}

.darkorange {
    color: darkorange;
}
/* End colors */

/* Globally defined style for Heading elements
h1, h2, h3, h4, h5, h6 {
    color: slategray;
    font-weight: normal;
}*/

/* General invalid color */
allgress-data-submitter[invalid] {
    color: darkred;
}

/* Allgress dialog section */
[allgress-dialog] > *:not(.header) {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

[allgress-dialog] {
    background: white;
    color: black;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
    display: flex;
    overflow-x: hidden;
    /* overflow-y: auto; is no more needed */
    flex-direction: column;
    max-width: 90vw;
    min-width: 28rem;
    max-height: 90vh;
    min-height: 21rem;
}

    [allgress-dialog][full-page] {
        width: 95vw;
        height: 95vh;
        max-width: 95vw;
        max-height: 95vh;
    }

    [allgress-dialog][full-width] {
        width: 95vw;
        max-width: 95vw;
        max-height: 90vh;
    }

    [allgress-dialog][half-width] {
        width: 50vw;
        max-width: 95vw;
        max-height: 90vh;
    }

    [allgress-dialog][full-height] {
        height: 95vh;
        max-width: 90vw;
        max-height: 95vh;
    }

    /*
[allgress-dialog] > * {
    padding: 0 24px;
}
*/
    [allgress-dialog] .no-padding {
        padding: 0;
    }


    [allgress-dialog] h2 {
        margin: 0;
        margin-top: 24px;
        text-overflow: ellipsis;
        font-size: 20px;
        line-height: 28px;
        text-align: center;
    }

    [allgress-dialog] .buttons {
        position: relative;
        display: flex;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    [allgress-dialog] > .buttons {
        margin-bottom: 20px;
        min-height: 40px;
        margin-top: 40px;
    }

    [allgress-dialog] .buttons > *:not([hidden]):not(template):not(:last-child) {
        margin: 0 10px !important;
    }

    [allgress-dialog] .buttons > *:not([hidden]):not(template) {
        margin: 0px;
    }

    [allgress-dialog] .buttons > [confirm]:not([invalid]) {
        color: green;
    }

    [allgress-dialog] .buttons > [dialog-dismiss],
    [allgress-dialog] .buttons > [cancel] {
        color: gray;
    }

    [allgress-dialog].hidden-allgress-dialog {
        visibility: hidden;
        overflow: inherit !important;
    }

        [allgress-dialog].hidden-allgress-dialog [allgress-dialog][hide-parent] {
            visibility: visible;
        }

.ui-dialog {
    z-index: 104 !important;
}

body.isIE [allgress-dialog].hidden-allgress-dialog {
    -ms-transform: scale(0.001, 0.001);
    position: fixed;
}

    body.isIE [allgress-dialog].hidden-allgress-dialog [allgress-dialog][hide-parent] {
        -ms-transform: scale(1, 1);
        position: absolute;
    }

body > .gu-mirror {
    display: none;
}

/* General class for positioning text by center*/
.text-center {
    text-align: center;
}

/* backgrop should have same as primary color*/
iron-overlay-backdrop {
    background-color: #41505f !important;
}

/* Forcing listbox background to be same as general background */
paper-listbox {
    background-color: transparent !important;
}

/* Adds red color label for required input */
paper-input[required].required > paper-input-container > div:not(.label-is-floating) > div > label {
    color: red !important;
}

/* Adds red color label for required dropdown */
paper-dropdown-menu[required] > paper-menu-button paper-input > paper-input-container > div:not(.label-is-floating) > div > label {
    color: red !important;
}

/* Busy indicator backdrop*/
.working-indicator-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    opacity: 0.7;
    z-index: 998;
}

*:focus {
    outline: none !important;
}

.working-indicator-spinner {
    --paper-spinner-layer-1-color: var(--paper-purple-500);
    --paper-spinner-layer-2-color: var(--paper-cyan-500);
    --paper-spinner-layer-3-color: var(--paper-blue-grey-500);
    --paper-spinner-layer-4-color: var(--paper-amber-500);
}

allgress-walkthrough #tabsContainer {
    overflow: visible !important;
}

    allgress-walkthrough #tabsContainer .tab-content {
        font-size: 90% !important;
    }

    allgress-walkthrough #tabsContainer .disabled-step .tab-content {
        color: dimgray !important;
    }

    allgress-walkthrough #tabsContainer .validated-step .tab-content {
        color: #64b935 !important;
    }

    allgress-walkthrough #tabsContainer .required-step .tab-content {
        transition: all .5s ease 0s;
        color: red !important;
    }

.vaadin-upload #addFiles {
    overflow: visible;
    font-size: 0px !important;
}

paper-button#addFiles:before {
    content: 'w';
    text-transform: lowercase;
    font-family: "allgress";
    font-size: 2rem;
    line-height: 100%;
}
allgress-filter allgress-dropdown-single, allgress-filter allgress-dropdown-multi {
    /*background-color: red !important;*/
    font-size: 12px !important;
    width: fit-content !important;
    padding: 0 .5rem;
}

    allgress-filter allgress-dropdown-single paper-input-container, allgress-filter allgress-dropdown-multi paper-input-container {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    paper-tabs:not(.no-tab-style) #tabsContainer {
        overflow: visible !important;
        margin: 15px;
    }

    paper-tab.iron-selected:not(.no-tab-style) .tab-content {
        color: #64b935;
    }

    paper-tabs:not(.no-tab-style) {
        width: 100%;
        display: flex;
        padding-top: 10px;
        margin-bottom: 4px;
        position: relative;
    }

    paper-tabs:not(.no-tab-style) paper-ripple, paper-tabs:not(.no-tab-style) #selectionBar {
        display: none;
    }

    paper-tabs:not(.no-tab-style):after {
        content: '';
        position: absolute;
        z-index: 15;
        width: 100%;
        height: 5px;
        bottom: -4px;
        background: white;
    }

    paper-tab.iron-selected:not(.no-tab-style) {
        background-color: white;
        border: 1px solid #c9c9c9;
    }

    paper-tab:not(.no-tab-style) {
        box-sizing: border-box!important;
        max-width: 250px;
        position: relative;
        background: #eee;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        border: 1px solid #c9c9c9;
        margin-right: -1px;
    }

    paper-tab:not(.no-tab-style):before {
        content: '';
        position: absolute;
        z-index: 1;
        left: -26px;
        bottom: 0px;
        width: 26px;
        height: 15px;
        border-bottom-right-radius: 15px;
        border-right: .5px solid #c9c9c9;
    }

    paper-tab:not(.no-tab-style):after {
        content: '';
        position: absolute;
        z-index: 1;
        right: -26px;
        bottom: 0px;
        width: 26px;
        height: 15px;
        border-bottom-left-radius: 15px;
        border-left: .5px solid #c9c9c9;
    }

    paper-tab.iron-selected:not(.no-tab-style):before {
        z-index: 5;
        box-shadow: 19px 0 0px white;
        box-sizing: border-box !important;
    }

    paper-tab.iron-selected:not(.no-tab-style):after {
        z-index: 5;
        box-shadow: -19px 0 0px white;
        box-sizing: border-box !important;
    }

    paper-tab:not(.no-tab-style):not(.iron-selected):before {
        z-index: 1;
        box-shadow: 19px 0 0px #eee;
        box-sizing: border-box !important;
    }

    paper-tab:not(.no-tab-style):not(.iron-selected):after {
        z-index: 2;
        box-shadow: -19px 0 0px #eee;
        box-sizing: border-box !important;
    }

    paper-tab:not(.no-tab-style):not(.iron-selected):hover {
        transition: all .5s ease;
        background-color: #f6f6f6;
    }

    paper-tab:not(.no-tab-style):not(.iron-selected):hover:after {
        box-shadow: -19px 0 0px #f6f6f6;
        z-index: 2;
        transition: all .5s ease;
    }

    paper-tab:not(.no-tab-style):not(.iron-selected):hover:before {
        box-shadow: 19px 0 0px #f6f6f6;
        z-index: 2;
        transition: all .5s ease;
    }