/* MainLayout */

.casic-fullscreen {
    width: 100%;
    height: 100dvh;
}

.casic-fullsize {
    width: 100%;
    height: 100%;
}

/* Selection-Control */

.casic-prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.casic-allow-select {
    -webkit-user-select: text; /* Safari */
    -ms-user-select: text; /* IE 10 and IE 11 */
    user-select: text; /* Standard syntax */
}

/* Overflow-Control */

.casic-overflow-auto {
    overflow: auto;
}

.casic-overflow-hidden {
    overflow: hidden;
}

/* https://stackoverflow.com/questions/76024933/inner-div-does-not-respect-css-max-height-of-outer-div */

.casic-overflow-outside {
    display: flex;
    flex-direction: column;
}

.casic-overflow-inside {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/* DxToolBar */

/* Fokus-Styles für die Toolbar und ihre Buttons entfernen */
.casic-toolbar:focus,
.casic-toolbar *:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* DxFormLayoutItem */

.casic-caption-error::before {
    content: url('icons/label-error.svg');
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0.5rem;
}

.casic-caption-warning::before {
    content: url('icons/label-warning.svg');
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0.5rem;
}

.casic-caption-information::before {
    content: url('icons/label-info.svg');
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0.5rem;
}

.casic-caption-help::before {
    content: url('icons/label-help.svg');
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0.5rem;
}

.casic-caption-mandatory::after {
    content: url('icons/label-tag-red.svg');
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-left: 0.5rem;
}

label.casic-caption-mandatory2 {
    font-weight: 600 !important;
}

    label.casic-caption-mandatory2:after {
        content: " *";
        color: red;
    }

label.casic-caption-mandatory3 {
    font-weight: 600 !important;
    color: red !important;
}

.casic-control-align-center .dxbl-fl-ctrl {
    align-self: center !important;
}

/* LayoutControl */

.casic-layoutcontrol .dxbl-group {
    height: 100%;
}

/* Super-Tooltip */

.casic-supertooltip {
}

/* Text */

.casic-text {
    min-height: 1.5em; /* Höhe für vertikale Zentrierung */
    display: flex;
    align-items: center;
    white-space: pre-wrap;
}

.casic-text-information {
    background: url('icons/label-info.svg') left center no-repeat;
    padding-left: 1.75em; /* Platz für die Grafik */
    min-height: 1.5em; /* Höhe für vertikale Zentrierung */
    display: flex;
    align-items: center;
    white-space: pre-wrap;
}

.casic-text-warning {
    background: url('icons/label-warning.svg') left center no-repeat;
    padding-left: 1.75em; /* Platz für die Grafik */
    min-height: 1.5em; /* Höhe für vertikale Zentrierung */
    display: flex;
    align-items: center;
    white-space: pre-wrap;
}

.casic-text-pin {
    background: url('icons/label-pin.svg') left center no-repeat;
    padding-left: 1.75em; /* Platz für die Grafik */
    min-height: 1.5em; /* Höhe für vertikale Zentrierung */
    display: flex;
    align-items: center;
    white-space: pre-wrap;
}

/* LabelEditor */

.casic-labeleditor-bold {
    font-weight: 600 !important;
}

.casic-labeleditor-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casic-labeleditor-wordwrap {
    white-space: normal;
}

.casic-labeleditor-clip {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.casic-labeleditor-left {
    width: fit-content;
}

.casic-labeleditor-center {
    text-align: center;
}

.casic-labeleditor-right {
    text-align: right;
}

/* ListColumn */

.casic-listcolumn-left {
    width: fit-content;
}

.casic-listcolumn-center {
    text-align: center;
}

.casic-listcolumn-right {
    text-align: right;
}

/* MessageBox */

.casic-messagebox-size {
    max-width: 80dvh;
    max-height: 80dvh;
}

.casic-messagebox-iconcell {
    padding-right: 0.5rem; /* https://elementor.com/blog/de/online-px-zu-rem-konverter-umrechnungstabellen/ */
}

.casic-messagebox-textcell {
    padding: 0.5rem;
    text-align: left;
    vertical-align: middle;
    white-space: pre-line; /* Dient zur Darstellung der Zeilenumbrüche */
}

.casic-messagebox-toolbar {
    margin-top: 1rem;
}

.casic-messagebox-button {
    min-width: 5rem;
}

.casic-deletionbox-textcell {
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left;
    vertical-align: top;
}