:root {
    /* Paddings */
    --padding-xxl: 30px;
    --padding-xl: 25px;
    --padding-ll: 20px;
    --padding-ml: 15px;
    --padding-lg: 10px;
    --padding-md: 10px;
    --padding-sm: 10px;
    --padding-xs: 5px;

    --box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
    --box-shadow-btn: 0 1px 3px rgba(0, 0, 0, 0.15);
}

@media screen, projection, tv, handheld {

    .DashboardWidgetExpand ul li {
        padding: 6px 0px;
    }

    .DashboardWidgetExpand ul li>a {
        box-shadow: var(--box-shadow-btn);
    }

    .LoginBox>.WidgetSimple,
    #PasswordBox>.WidgetSimple,
    .SidebarColumn:not(.ActionsSideBarComp) .WidgetSimple,
    .ContentColumn:not(.ContentGrid) .WidgetSimple:not(.WidgetSimpleSecondary) {
        border: none;
        box-shadow: var(--box-shadow);
    }

    .ItemListGrid {
        padding: var(--padding-lg);
    }

    .ItemListGrid>li>a {
        border: none;
        box-shadow: var(--box-shadow);
    }

    .Size1of2,
    .Size2of2 {
        padding: 6px;
    }

    ul.Tablelike {
        border: none;
        box-shadow: var(--box-shadow);
    }

    .WidgetSimple .Content span {
        flex-flow: row;
    }
    
    .Flag {
        flex-flow: column !important;
    }

    .WidgetSimple .Content span>label {
        padding-right: 5px;
        width: 45%;
        display: block;
        text-align: right;
        overflow-wrap: break-word;
    }

    .LayoutFixedSidebar>.ContentColumn>form {
        padding: 6px;
    }

    form label[for],
    form label,
    .TableLike label {
        min-height: unset;
    }

    .card-item-wrapper .card-item {
        gap: var(--gap-xs);
    }

    .card-item {
        border: none;
        box-shadow: var(--box-shadow);
    }

    form[name^="ActivityDialog"] .card-item {
        padding: var(--padding-xl) !important;
        border-radius: var(--border-radius-md) !important;
    }

    .ActionRow .Actions>li>a,
    .ActionRow .ClusterLink {
        border: 1px solid var(--border-input-color) !important;
        font-size: 11px;
        letter-spacing: 0.3px;
        padding: 5px 8px;
        border-radius: 10px;
        box-shadow: var(--box-shadow-btn);
    }

    .ActionRow .Actions>li>a:hover,
    .ActionRow .ClusterLink:hover {
        border: 1px solid var(--border-input-color) !important;
    }

    .ActionRow .Actions>li:after {
        background-color: transparent;
        margin: 0 4px;
    }

    .DataTable thead th,
    .DataTable thead th.DashboardHeader,
    .TableSmall thead th,
    .TableSmall thead a,
    .TableSmall thead span {
        background: #f8f8f8;
    }

    #ArticleItems .field-wrapper:not(.Hidden) {
        flex-flow: row;
    }

    .MainBox {
        padding-top: 5px;
        gap: var(--gap-xs);
    }

    .OverviewBox {
        padding-top: 5px;
    }

    #ticketDetails .LayoutFixedSidebar.SidebarLast>.SidebarColumn,
    #ticketDetails .LayoutFixedSidebar.SidebarFirst>.ContentColumn .InnerMainBoxContent .InnerSidebarColumn,
    #ticketDetails .InnerMainBoxContent .InnerSidebarColumn .Content {
        max-width: 15%;
        min-width: 300px;
        overflow: visible;
    }

    .main-search-component .search-ticket fieldset.TableLike>legend {
        padding: var(--padding-ll);
    }

    #ActivityDialogContent .field-wrapper {
        flex-flow: row !important;
    }

    #ActivityDialogContent .outer-label-wrapper {
        width: 350px !important;
    }

    #ActivityDialogContent .outer-label-wrapper .FieldHelpContainer>span {
        z-index: 101;
    }

    #ActivityDialogContent form .card-item>div,
    fieldset .card-item>.field-wrapper {
        padding-bottom: 10px !important;
    }

    /* Aktivitätsdialog */
    #ActivityDialogContent .Field.card {
        border-radius: var(--border-radius-sm) !important;
        box-shadow: var(--menu-box-shadow) !important;
        padding: var(--padding-sm) !important;
    }

    .FilterInputContainer,
    .LayoutGrid .FilterInputContainer {
        border: none;
    }

    .modal-col1,
    .modal-col2 {
        box-shadow: var(--box-shadow);
    }
}