.inputupper {
    text-transform: uppercase;
}

.separator {
    background-image: url('images/separator.png');
    background-repeat: repeat-x;
    width: 100%;
}

label, input[type="radio"] {
    vertical-align: middle;
    display: inline-block;
    margin: 0px 3px 0px 0px !important;
}

    input[type="radio"][disabled] + label {
        color: lightgray;
    }

input[type=checkbox] {
    margin-left: 0;
}

input[type="checkbox"][disabled] + label {
    color: lightgray;
}

input:hover, select:hover, textarea:hover {
    border-color: #323130;
}

.modalBackground {
    background-color: #000000;
    filter: opacity(20);
    opacity: 0.2;
    overflow: hidden !important;
}

.modalBackgroundPostBack {
    background-color: #000000;
    filter: opacity(30);
    opacity: 0.3;
    z-index: 99999998 !important;
    overflow: hidden !important;
}

.updateProgress {
    z-index: 99999999 !important;
}

.modalPopup {
    background-color: #ffffee;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 250px;
}

.modalPopupWide {
    background-color: #f0f0f0;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
}

.modalPopupWideWhite {
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    z-index: 80000000 !important;
    display: block;
    top: -200px
}

.modalUpdatePanelTop {
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 90000009 !important;
}

.modalUpdatePanelIntermediate {
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 90000000 !important;
}

.CustomValidatorCalloutStyle div,
.CustomValidatorCalloutStyle td {
    border: solid 1px black;
    background-color: #f0f0f0;
    color: #cd5b33;
    text-align: left;
}

.CustomValidatorCalloutStyle .ajax__validatorcallout_close_button_cell {
    vertical-align: top;
    padding-right: 15px;
    text-align: left;
    border-left: none;
}

.CustomValidatorCalloutStyle .ajax__validatorcallout_callout_cell {
    width: 20px;
    height: 100%;
    text-align: left;
    vertical-align: top;
    border: none;
    background-color: transparent;
    padding: 0px;
}

.ajax__html_editor_extender_texteditor {
    word-wrap: break-word;
}

.noMarginImg img, img.noMarginImg {
    border: solid 0 #787878;
    margin: 0px;
    vertical-align: middle;
}

.spezLink a:link, .spezLink a:visited {
    font-weight: bold;
    text-decoration: none;
    color: #000000;
}

.spezLink a:hover {
    color: #666666;
}

.spezMenu {
    display: block;
    left: 100%;
    float: right;
    margin-left: -400px;
    margin-top: 0px;
    width: 390px;
    position: absolute;
    white-space: nowrap;
    font-size: 10px;
    text-align: right;
    font-family: Calibri,Arial, Helvetica, Sans-Serif;
    top: 5px;
    color: #F0EFF0;
    text-decoration: none;
}

    .spezMenu a, .spezMenu a:visited {
        cursor: pointer;
        font-family: Calibri,Arial, Helvetica, Sans-Serif;
        font-weight: bold;
        text-align: left;
        text-decoration: none;
        color: #F0EFF0;
    }

        .spezMenu a:hover {
            color: #CD5B33;
        }

        .spezMenu a .r, .spezMenu a .l {
            position: absolute;
            display: block;
            top: 0;
            z-index: -1;
            height: 121px;
            background-image: url('images/menuitem.png');
        }

.collapsePanel {
    width: 640px;
    height: 0px;
    background-color: white;
    overflow: hidden;
}

.collapsePanelHeader {
    width: 640px;
    height: 20px;
    color: Yellow;
    background-color: Black;
    font-weight: bold;
    float: none;
    padding: 5px;
    cursor: pointer;
    vertical-align: middle;
}

div.topMenu {
    display: block;
    position: absolute;
    height: 30px;
    top: -20px;
    width: 500px;
    left: 5px;
    margin-left: 0;
}

.default-responsive div.topMenu {
    display: none;
}


.pager span {
    font-weight: bold;
    border: solid 1px #666;
    background-color: #cd5b33;
}

.pager a {
    text-decoration: none;
    border: solid 1px #666;
}

    .pager a:hover {
        text-decoration: none;
        background-color: #cd5b33;
    }

.pager a, .pager span {
    display: block;
    float: left;
    padding: 0.2em 0.3em;
    margin-right: 0px;
    margin-bottom: 0px;
}

#wizHeader li .prevStep {
    color: #cd5b33;
    background-color: #fed183;
}

    #wizHeader li .prevStep:after {
        border-left-color: #fed183 !important;
    }

#wizHeader li .currentStep {
    background-color: #cd5b33;
}

    #wizHeader li .currentStep:after {
        border-left-color: #cd5b33 !important;
    }

#wizHeader li .nextStep {
    background-color: #C2C2C2;
}

    #wizHeader li .nextStep:after {
        border-left-color: #C2C2C2 !important;
    }

#wizHeader {
    list-style: none;
    overflow: hidden;
    font: 18px Helvetica, Arial, Sans-Serif;
    margin: 0px;
    padding: 0px;
}

    #wizHeader li {
        float: left;
    }

        #wizHeader li a {
            color: white;
            text-decoration: none;
            padding: 10px 0 10px 55px;
            background: brown; /* fallback color */
            background: hsla(34,85%,35%,1);
            position: relative;
            display: block;
            float: left;
        }

            #wizHeader li a:after {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
                border-bottom: 50px solid transparent;
                border-left: 30px solid hsla(34,85%,35%,1);
                position: absolute;
                top: 50%;
                margin-top: -50px;
                left: 100%;
                z-index: 2;
            }

            #wizHeader li a:before {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 30px solid white;
                position: absolute;
                top: 50%;
                margin-top: -50px;
                margin-left: 1px;
                left: 100%;
                z-index: 1;
            }

        #wizHeader li:first-child a {
            padding-left: 10px;
        }

        #wizHeader li:last-child {
            padding-right: 50px;
        }

        #wizHeader li a:hover {
            background: #FE9400;
        }

            #wizHeader li a:hover:after {
                border-left-color: #FE9400 !important;
            }

.content {
    height: 150px;
    padding-top: 75px;
    text-align: center;
    background-color: #F9F9F9;
    font-size: 48px;
}

.ThinGridView TR TH {
    padding: 1px;
}

div.checkboxlist ul li {
    margin: 7px 0px;
    background-image: none;
    color: #565253;
}

    div.checkboxlist ul li input {
        width: 15px;
        display: block;
        float: left;
    }

    div.checkboxlist ul li label {
        padding-left: 28px;
        display: block;
    }

    div.checkboxlist ul li div {
        margin-left: 28px;
        clear: both;
    }

.panelCell {
    padding: 10px;
    border-right-style: solid;
    border-right-color: #CCCCCC;
    border-right-width: 2px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #CCCCCC;
    background-color: #F0F0F0;
    vertical-align: top;
    color: black;
}

.licenceCell {
    border-bottom-style: dotted;
    border-bottom-width: thin;
    border-bottom-color: #C0C0C0;
}

.licenceCellFooter {
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #909090;
    padding-bottom: 5px;
}
/* Designer */
.designerContent {
    width: 100%;
}

#DesignerControl {
    width: 100%;
    height: 800px;
}

.autocomplete_completionListElement {
    font: 13px Calibri, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    margin: 0px !important;
    background-color: #FFFFFF;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    overflow: auto;
    text-align: left;
    list-style-type: none;
    max-height: 100px;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem {
    background-color: #EDEAE8;
    color: black;
    padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem {
    border: buttonshadow;
    background-color: window;
    color: windowtext;
    padding: 1px;
}

.dash-cell {
    display: table-cell;
    vertical-align: top;
    float: left;
    /* padding: 9px 10px; */
    width: 330px;
    z-index: 3;
    /* the following two lines ensure the correct display of the calendar extension */
    /* without them, the calendar panel might be cut off */
    position: relative !important;
    overflow: unset !important;
}
.hover-animation {
    transition: transform 0.1s ease 0.1s;
}
    .hover-animation:hover {
        transform: translateX(0px) translateY(-2px);
    }

.default-responsive .dash-cell {
    width: 100%;
    max-width: 320px;
}

.dash_cell_plzort {
    display: table-cell;
    vertical-align: top;
    float: left;
    overflow: hidden;
    /* padding: 9px 10px; */
    width: 330px;
    position: relative !important;
    overflow: unset !important;
}

.default-responsive .dash_cell_plzort {
    width: 100%;
    max-width: 320px;
}

.dash-cellwide {
    display: table-cell;
    vertical-align: top;
    float: left;
    overflow: hidden;
    /* padding: 9px 10px; */
    width: 500px;
    position: relative !important;
    overflow: unset !important;
}

.default-responsive .dash-cellwide {
    width: 100%;
    max-width: 320px;
}

.default-responsive .dashInfoIcon {
    display: none;
}

.modalWindow {
    background-color: #ffffff;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 1px 2px 6px 2px;
    display: block;
    min-width: 320px !important;
    max-width: 100vw !important;
    max-height: 80vh;
    overflow: auto;
}
.modalWindowNoTitle {
    background-color: #ffffff;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 10px 20px 20px 20px;
    display: block;
    min-width: 320px !important;
    max-width: 100vw !important;
    max-height: 80vh;
    overflow: auto;
}

.default-responsive .modalWindow {
    max-width: 300px;
    height: 100vh !important;
}

.modalWindow750Width {
    background-color: #ffffff;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 1px 2px 6px 2px;
    display: block;
    min-width: 750px;
    max-width: 100vw;
    max-height: 90vh;
    overflow: auto;
}

.default-responsive .modalWindow750Width {
    min-width: 300px !important;
    height: 100vh !important;
}

.modalWindowOverlapChildControls {
    overflow: unset !important;
}

.modal-cell {
    padding: 9px 5px 5px 5px;
    min-width: 320px !important;
}

.default-responsive .modal-cell {
    width: 100%;
    min-width: 320px !important;
    max-width: 320px;
}

.default-responsive .hideifresponsive {
    display: none;
}

.default-responsive .showifresponsive {
    display: normal !important;
}

.showifresponsive {
    display: none;
}

.modalPopupParentBody {
    overflow: hidden;
    /* position: fixed; muss raus wegen grossen Bildschirmen --> gibt sonst nen hässlichen grauen rechten Rand */
    position: fixed; /*muss leider wieder rein sonst funktionieren die Modalen Dialoge bei langen GridView Listen nicht mehr... :-/ */
}

.modalPopupCaption {
    display: table-caption;
}

.navigation-cell {
    display: table-cell;
    vertical-align: top;
    float: left;
    overflow: hidden;
}

.toolbar-link {
    color: black !important;
    font-size: 12px !important;
    display: block;
    line-height: 100%;
    margin-top: 3px;
}

.toolbar-cell {
    line-height: 100%;
    display: table-cell;
    text-align: center;
    overflow: hidden;
    width: 70px;
    min-width: 70px;
    height: 50px;
    float: left;
    border: thin solid #C0C0C0;
    padding: 10px 0px 0px 0px;
}

.toolbar-separator {
    display: table-cell;
    width: 10px;
    min-width: 10px;
    height: 60px;
    float: left;
}

.toolbar-pager {
    display: table-cell;
    overflow: hidden;
    text-align: left;
    float: right;
}


header {
    z-index: 1000;
}

div.mandant {
    z-index: 2;
}

span.alignedLabel {
    display: table;
}

    span.alignedLabel > input {
        display: table-cell;
    }

    span.alignedLabel > label {
        display: table-cell;
        vertical-align: top;
    }

@keyframes popout {
    0% {
        transform: scale(0.9)
    }

    80% {
        transform: scale(1.02)
    }

    100% {
        transform: scale(1)
    }
}

/*.dash-cell {
    animation: popout 0.2s ease;
    animation-fill-mode: forwards;
}

    .dash-cell:nth-of-type(1) {
        animation-delay: 0ms;
    }

    .dash-cell:nth-of-type(2) {
        animation-delay: 40ms;
    }

    .dash-cell:nth-of-type(3) {
        animation-delay: 80ms;
    }

    .dash-cell:nth-of-type(4) {
        animation-delay: 120ms;
    }

    .dash-cell:nth-of-type(5) {
        animation-delay: 20ms;
    }

    .dash-cell:nth-of-type(6) {
        animation-delay: 60ms;
    }

    .dash-cell:nth-of-type(7) {
        animation-delay: 100ms;
    }

    .dash-cell:nth-of-type(8) {
        animation-delay: 140ms;
    }

.modalWindow {
    animation: popout 0.2s ease;
}

.modalPopup {
    animation: popout 0.2s ease;
}

.modalPopupWide {
    animation: popout 0.2s ease;
}

.modalPopupWideWhite {
    animation: popout 0.2s ease;
}*/

.toolbar-cell {
    animation: popout 0.2s ease;
    animation-fill-mode: forwards;
}

    .toolbar-cell:nth-of-type(1) {
        animation-delay: 0ms;
    }

    .toolbar-cell:nth-of-type(2) {
        animation-delay: 20ms;
    }

    .toolbar-cell:nth-of-type(3) {
        animation-delay: 40ms;
    }

    .toolbar-cell:nth-of-type(4) {
        animation-delay: 60ms;
    }

    .toolbar-cell:nth-of-type(5) {
        animation-delay: 80ms;
    }

    .toolbar-cell:nth-of-type(6) {
        animation-delay: 100ms;
    }

    .toolbar-cell:nth-of-type(7) {
        animation-delay: 120ms;
    }

    .toolbar-cell:nth-of-type(8) {
        animation-delay: 140ms;
    }

    .toolbar-cell:nth-of-type(9) {
        animation-delay: 160ms;
    }

    .toolbar-cell:nth-of-type(10) {
        animation-delay: 180ms;
    }

.dashVideo {
    position: relative;
    top: 0;
    left: 0;
    z-index: 0;
    min-width: 100%;
    min-height: 100%;
    float: left;
    max-width: unset !important;
}

.default-responsive #art-main {
    overflow: inherit;
}

.ascendingArrow {
    background-image: url('resources/ascending_White.png');
}

.descendingArrow {
    background-image: url('resources/descending_White.png');
}

.moveColumn {
    background-image: url('resources/movecolumn12_White.png');
}

/* Style the tab content */
.tabContent {
    padding: 6px 12px;
    border: 1px solid #ccc;
}

/* Style the buttons that are used to open the tab content on KarteInfoExt.aspx f.e.*/
.tabButton {
    background-color: #ccc;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tabButtonRow {
    margin: 0px 5px 0px 5px;
}

/* Change background color of buttons on hover */
.tabButton:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tabButton.active {
    background-color: #eee;
    font-weight: bold;
}
/* end of "Style the buttons that are used to open the tab content on KarteInfoExt.aspx f.e." */

/* Korrekturen für GridViewRowMovement */
.art-postcontent ul > li:before, .art-post ul > li:before, .art-textblock ul > li:before {
    content: unset !important;
}

.art-postcontent ul > li, .art-post ul > li, .art-textblock ul > li {
    padding-left: unset !important;
}

.art-postcontent ol, .art-post ol, .art-textblock ol, .art-postcontent ul, .art-post ul, .art-textblock ul {
    margin: unset;
}

    .art-postcontent ul > li, .art-post ul > li, .art-textblock ul > li {
        overflow-y: unset;
    }

/* Runde Ecken und schönen Schatten */
.art-post {
    border-radius: 8px;
    padding: 3px;
    margin: 10px;
    box-shadow: 5px 5px 15px 0px rgba(100,100,100,0.4);
}

/* Damit die Fehlermeldung im Header (CRM-Kette, Editieren von Regeln, kein Detaillist gewählt) verschmälert wird. */
/* Bei Problemen mit IziToast: untenstehende Klasse entfernen */

.iziToast > .iziToast-body .iziToast-message, .iziToast > .iziToast-body .iziToast-title {
    float: none !important;
}
/* Sicherstellen, dass die Auswahlliste an der korrekten Position gezeigt wird */
.MultiSelectionDropDownList_nicht_benutzen {
    top: unset !important;
    left: unset !important;
    position: fixed !important;
}
/* Farbe der Beträge */
.positiveAmountClass {
    color: inherit;
}

.negativeAmountClass {
    color: #cd5b33;
}

.modalWindow a {
    text-decoration: none;
}

    .modalWindow a:hover {
        text-decoration: underline;
        color: #000000;
    }

/* Sicherstellen, volle Breite auf grossen Screens verwendet wird */
.art-sheet {
    max-width: unset;
}

.art-nav {
    max-width: unset !important;
}
/* Ende "grosse Screens" */

/* used to mark header-Controls with red frame and bright red background in case a selection has taken place. Thanks Raphi :-) */
/* (see also DefaultHeader.ascx.cs) */
.select2-filter + span > span > span {
    background: #FFEEEE !important;
    border-color: red !important;
}

/* Style the buttons that are used to open the tab content */
.dialogTabButton {
    outline: none;
    cursor: pointer;
    padding: 7px 16px;
    transition: 0.3s;
    background-color: #ccc;
    border: 1px solid #ccc;
    border-bottom: 1px solid #aaa;
    font-weight: normal;
}

.dialogTabButtonRow {
    margin: 0px 3px 0px 3px;
}

/* Change background color of buttons on hover */
.dialogTabButton:hover {
    background-color: #ddd;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px rgba(111, 111, 111, 0.5);
}

/* Create an active/current tablink class */
.dialogTabButton.active {
    background-color: #f0f0f0;
    font-weight: bold;
    border: 1px solid #f0f0f0;
}
/* Create a tab container class */
.dialogTabContainer {
    overflow: hidden; /* Hide overflow to prevent scrollbar */
    position: relative; /* Required for absolute positioning */
    border: solid 1px #f0f0f0;
    background: #f0f0f0;
    margin-left: 3px;
    margin-right: 3px
}
.dialogTabContainerWhite {
    overflow: hidden; /* Hide overflow to prevent scrollbar */
    position: relative; /* Required for absolute positioning */
    border: solid 1px #c0c0c0;
    background: White;
    margin-left: 3px;
    margin-right: 3px
}

.dialogTabFooter {
    float: right;
    margin-top: 6px;
}

/* Used to move the last table row to the bottom of the surrounding container */
.tableWithLastRowOnBottom {
    border-collapse: collapse;
    width: 100%;
}

tr.lastRowOnBottom {
    position: absolute;
    bottom: 0; /* Place the last row at the bottom */
    left: 4px;
    right: 0;
}
/* end of "Used to move the last table row to the bottom of the surrounding container" */

/* Used for optional article header icon */
.articleHeaderIcon {
    vertical-align: text-bottom;
    margin-right: 5px;
}

/* Used for optional menu icon */
.defaultMenuIcon {
    vertical-align: text-bottom;
    margin-right: 3px;
    font-size: 16px;
}

.iziToast.iziToast-layout2 .iziToast-body .iziToast-texts {
    margin-bottom: 10px !important;
}
.boncard-IziToast-buttons {
    margin-bottom: 10px;
    float: left;
}
.boncard-IziToast {
    padding: 30px 18px 30px 18px !important;
}
.boncard-IziToast-Error {
    border-left: 6px solid red !important;
}

.GridViewPanelColumnConfigurable {
    position: relative;
}

/* Used for floating filter AGGrid, make all input fields look alike */
input[type=number], input[type=text], input[type=date] {
    padding: 4px !important;
    width: 100%;
}