{strip}
    {if $agent_is_mobile}
        {$theme_font_size = $theme->font_size_mobile}
    {else}
        {$theme_font_size = $theme->font_size}
    {/if}
    .usx4style *, #footerleftblock, #footermidblock, #footerrightblock, .usx4style .jstree li a,
    #toprightblock form, #toprightblock label *, #toprightblock span.form_viewonly {
    font-family: {$theme->font};
    color: {$theme->colour_font};
    }

    .usx4style p, .usx4style pre, .usx4style li, .usx4style div, .usx4style span, .usx4style input, .usx4style select, .usx4style optgroup, .usx4style option, .usx4style textarea, .usx4style button, .usx4style label, .usx4style td, .usx4style th, .usx4style .jstree li a,
    .usx4style .editablepop.oneline td::first-line, .usx4style .editablepop.oneline td div::first-line, .usx4style span.select2-selection__rendered {
    {if $agent_is_mobile}
        font-size: {$theme->font_size_mobile*1.05}pt;
    {else}
        font-size: {$theme->font_size*1.02}pt;
    {/if}
    }
    #midblock .fc-event-time, #midblock .fc-event-title, #midblock .fc-event-time *, #midblock .fc-event-title * {
    {if $agent_is_mobile}
        font-size: {$theme->font_size_mobile*1.07}pt;
    {else}
        font-size: {$theme->font_size*1.03}pt;
    {/if}
    }
    @media screen and (max-device-width : 950px)  {
    .usx4style p, .usx4style pre, .usx4style li, .usx4style div, .usx4style span, .usx4style button, .usx4style td, .usx4style th, .usx4style .jstree li a, .usx4style .editablepop.oneline td::first-line {
    font-size: {$theme->font_size_mobile*1.3}pt;
    }
    .usx4style input, .usx4style select, .usx4style optgroup, .usx4style option, .usx4style textarea, .usx4style label, .usx4style label span, .usx4style span.form_viewonly, .usx4style .dialog_make_text_btn, .usx4style .ui-tabs-nav li a span {
    font-size: {$theme->font_size_mobile*1.5}pt;
    }
    .usx4style .dialog_make_text_btn .dialog_make_btn16 {
    height: {$theme->font_size_mobile*1.5}pt;
    }
    }
    {if $theme_font_size>=14}
        .usx4style .dialog_make_btn16, .usx4style .jstree-icon, .usx4style .dialog_make_text_btn .dialog_make_btn16 {
        height: 24px;
        width: 24px;
        min-height: 24px;
        min-width: 24px;
        background-size: 24px 24px;
        }
        .usx4style ul.functionmenu span.ui-widget-header {
        background-size: 24px 24px;
        }
        .usx4style ul.functionmenu ul span, .usx4style ul.functionmenu ul a {
        padding-left: 40px;
        font-size: 0.9em;
        }
        .usx4style ul.functionmenu {
        margin-left: 16px;
        }
        .usx4style .dialog_make_btn24.dot3ps {
        height: 30px;
        width: 30px;
        background-size: 30px 30px;
        }
        .usx4style .dialog_make_btn24.dot3pl {
        transform: scale(1.6);
        margin-left: 10px;
        }
        #midblock div.dot3-container span, #midblock div.dot3-container a {
        min-height: 24px;
        vertical-align: middle;
        }
        .usx4style .dialog_make_btn24.add {
        height: 32px;
        width: 32px;
        background-size: 32px 32px;
        }
        .usx4style form.editablepopform .menu .menu-btn, .usx4style div.editablepopform .menu .menu-btn, .usx4style form.editablepopform .menu .dialog_make_btn16, .usx4style div.editablepopform .menu .dialog_make_btn16 {
        width: 30px;
        height: 30px;
        background-size: 30px 30px;
        }
    {elseif $theme_font_size>=12}
        .usx4style .dialog_make_btn16, .usx4style .jstree-icon, .usx4style .dialog_make_text_btn .dialog_make_btn16 {
        height: 20px;
        width: 20px;
        min-height: 20px;
        min-width: 20px;
        background-size: 20px 20px;
        }
        .usx4style ul.functionmenu span.ui-widget-header {
        background-size: 20px 20px;
        }
        .usx4style ul.functionmenu ul span, .usx4style ul.functionmenu ul a {
        padding-left: 35px;
        font-size: 0.8em;
        }
        .usx4style ul.functionmenu {
        margin-left: 8px;
        }
        .usx4style .dialog_make_btn24.dot3pl {
        transform: scale(1.1);
        margin-left: 5px;
        }
        .usx4style .dialog_make_btn24.dot3ps, .usx4style .dialog_make_btn24.dot3pl {
        height: 24px;
        width: 24px;
        }
    {/if}
    {if $theme_font_size>=12}
        #midblock .searchform h2 > span, #midblock #masterdatamanagement_content h2 > span, #midblock .searchform h2 > select {
        font-size: 0.9em;
        }
        #midblock div.dot3-container span::first-letter, #midblock div.dot3-container a::first-letter {
        margin-left: 0;
        }
        .usx4style div.multitopbtns div.portlet a {
        width: calc(100% - 0.4em);
        min-height: 1.6em;
        max-width: none;
        min-width: 160px;
        margin-left: 0;
        margin-right: 0;
        }
        #portlet_tabs .ui-icon-closethickgr, .usx4style .ui-widget-header span.ui-icon-minusthick {
        width: 1em;
        height: 1em;
        background-size: 1em 1em;
        background-position: 0 0;
        margin: 1px;
        }
    {/if}

    {if $theme->mode_border >= 1}
        #topblock {
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, {$theme->colour_side} 100%);
        }
        #midblock {
        border-radius: 15px;
        }
        #mainblock .story .infoblock {
        background-color: {$theme->colour_content};
        }
    {else}
        #midblock {
        border-radius: 4px;
        }
        #mainblock .story .infoblock {
        background-color: {$theme->colour_ledger};
        }
    {/if}

    .usx4style, #rightblock, #rightblock-example, #midblock, #footerblock, #footerleftblock, #footermidblock, #footerrightblock {
    background-color: {$theme->colour_side};
    }
    .usx4style .searchform label.forsearchmore::before, .usx4style .searchform label.forsearchmore::after {
    background-image: linear-gradient(to bottom, {$theme->colour_side} 0%,{$theme->colour_border} 31%,{$theme->colour_side} 66%,rgba(254,254,254,0.1) 100%);
    }

    .usx4style .editablepop tr.infobluerow td:not(.group_by), #inforight tr.infobluerow td, #inforight tr.infobluerow p, #blue-example, .usx4style ul.ui-autocomplete li.ui-menu-item a.infobluerow, .usx4style li.infobluerow {
    color: {$theme->colour_blue};
    }
    .usx4style .editablepop tr.inforedrow td:not(.group_by), #inforight tr.inforedrow td, #inforight tr.inforedrow p, #red-example, .usx4style li.ui-menu-item a.inforedrow,
    #portlet_tabs  tr.inforedrow td, .usx4style .editablepop  td.inforedrow, #work_input_set_form p.inforedrow span.form_viewonly,
    .usx4style .editablepopform  span.inforedrow, .usx4style li.inforedrow {
    color: {$theme->colour_red};
    }
    .usx4style input[type="checkbox"], .usx4style input[type="radio"], #mainblock input[type="checkbox"], #mainblock input[type="radio"] {
    background-color: {$theme->colour_bg};
    }
    .usx4style .editablepop tr td {
    {*IMPORTANT for correct colors when selecting a selectable odd row*}
    background-color: {$theme->colour_content};
    }
    #masterdatamanagement_content {
    background-color: {$theme->colour_content};
    border-radius: 4px;
    padding: 8px;
    }
    .usx4style .ui-dialog, #dialog-example, .usx4style .ui-datepicker, .usx4style .ui-slider-handle, .usx4style .editablepop tr.even td, .usx4style .ui-dialog .searchform h2 {
    background-color: {$theme->colour_dialog};
    }
    .usx4style .ui-widget-header, #ledger-example, .usx4style .editablepop tr:hover td,
    .usx4style ul.blockelement-menu li a:hover, .usx4style ul.blockelement-menu li a:hover span,
    .usx4style h2.blockelement-menu a:hover, .usx4style h2.blockelement-menu a:hover span, .usx4style .ui-dialog tr.even td,
    .usx4style span.o2k7Skin td.mceToolbar, .usx4style span.o2k7Skin td.mceStatusbar, .usx4style span.o2k7Skin .mceMenuItemTitle a,
    .usx4style ul.functionmenu li span:hover, .usx4style ul.functionmenu li a:hover, #midblock .fc-grid .fc-day-number,
    #toprightblock .topright_shrink_menu:hover {
    background-color: {$theme->colour_ledger};
    }
    #midblock div.dot3-container {
    background-color: {$theme->colour_bg};
    }
    #midblock div.dot3-caret-inner {
    border-bottom-color: {$theme->colour_bg};
    }
    {if $theme->mode_border <= 1}.usx4style .portlet, .usx4style .searchform, .usx4style .formblock, .usx4style .ui-dialog, {/if}
    .usx4style .ui-widget-header, #ledger-example,
    .usx4style .ui-tabs, .usx4style .ui-report,
    .usx4style .elementblock, .usx4style fieldset.borderbottom, .usx4style fieldset.bordertop, .usx4style section.bordertop,
    .usx4style .editablepop, .usx4style .editablepop td, .usx4style .editablepop th,
    .usx4style span.o2k7Skin .mceExternalToolbar, .usx4style span.o2k7Skin .mceListBox .mceText, .usx4style span.o2k7Skin div.mceMenu, .usx4style span.o2k7Skin table.mceLayout, .usx4style span.o2k7Skin .mceMenuItemTitle a,
    .usx4style span.o2k7Skin table.mceLayout tr.mceFirst td, .usx4style span.o2k7Skin table.mceLayout, .usx4style span.o2k7Skin .mceMenuItemTitle a, .usx4style span.o2k7Skin table.mceLayout tr.mceLast td,
    .usx4style span.o2k7Skin .mceIframeContainer, .usx4style .ui-datepicker, .usx4style .ui-slider-horizontal,
    #rightblock:hover, .usx4style .smallbtns:hover,
    .usx4style input[type="checkbox"], .usx4style input[type="radio"] {
    border-color: {$theme->colour_border};
    }
    .usx4style .editablepopdiv thead th {
    {if $theme->mode_border <= 1}
        outline: 1px solid {$theme->colour_border};
    {else}
        outline: 1px solid {$theme->colour_dialog};
    {/if}
    }
    #searchformright, #searchformright_result, .usx4style .rightblockcontent-element, .usx4style .leftblockcontent-element {
    border-bottom-color: {$theme->colour_border};
    }
    {if $theme->mode_border <= 1}#midblock, .usx4style .editablepopdiv thead th,{/if}
    #midblock .searchform h2, #midblock .formblock h2, #midblock object, #midblock iframe, #midblock legend, .usx4style .dialog_make_text_btn {
    background-color: {$theme->colour_content};
    }
    #midblock .searchform h2, #midblock .formblock h2, .usx4style input[type="checkbox"]:checked::after, .usx4style input[type="radio"]:checked::after {
    color: {$theme->colour_font};
    }
    #calendar_state70-example, .usx4style .calendar_state70 {
    background-color: {$theme->calendar_state70};
    }
    #calendar_state60-example, .usx4style .calendar_state60 {
    background-color: {$theme->calendar_state60};
    }
    #calendar_state50-example, .usx4style .calendar_state50 {
    background-color: {$theme->calendar_state50};
    }
    #calendar_state40-example, .usx4style .calendar_state40 {
    background-color: {$theme->calendar_state40};
    }
    #calendar_state30-example, .usx4style .calendar_state30 {
    background-color: {$theme->calendar_state30};
    }
    #calendar_other-example, .usx4style .calendar_other {
    background-color: {$theme->calendar_other};
    }

    .usx4style input, .usx4style select, .usx4style textarea, .usx4style p span.form_viewonly, .usx4style td span.form_viewonly, .usx4style th span.form_viewonly {
    border: 1px solid {$theme->colour_border};
    border-radius: 4px;
    margin-right: 2px;
    padding-left: 4px;
    padding-right: 4px;
    }
    .usx4style select {
    padding-right: 24px;
    }

    .usx4style .noclickmain, .usx4style .noclickmainright, .usx4style .ui-widget-overlay {
    background-image: none;
    background-color: {$theme->colour_dialog};
    opacity: {$theme->bg_opacity/100};
    }
    .noclickmain.modal {
      background-color: rgba(0, 0, 0, 0.4) !important;
    }
    #rightblock .noclickmain, .usx4style .noclickmainright {
    opacity: {$theme->bg_opacity_right/100};
    }
    .usx4style .ui-widget-overlay {
    opacity: {$theme->bg_opacity_right/100};
    }
    .usx4style .ui-dialog, #dialog-example, .usx4style ul.functionmenu>li:hover {
    box-shadow: 0 0 10px 10px {$theme->colour_ledger};
    }

    {* Stunden *}
    #midblock tr.other_rows {
    background-color: {$theme->colour_content};
    }

    .usx4style .connectfilemanager iframe {
    box-shadow: 0px 0px 5px 1px {$theme->colour_ledger};
    }
    @media screen and (min-width : 1200px)  {
    #midblock, #footerblock, #wrap #butlerbasis.right-widget-admin {
    margin-right: {$theme->rightblock_width}vw;
    transition: ease-out 0.25s;
    }

    #rightblock, #wrap #butlerbasis {
    width: {$theme->rightblock_width}vw;
    transition: ease-out 0.25s;
    }
    #wrap #butlerbasis.right-widget-admin {
    max-width: 400px;
    }
    }
    {if $theme->font_smoothing}
        body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }
    {/if}

    .usx4style .portlet {
    background-color: {$theme->colour_content};
    }
    {if $theme->mode_border >= 3}
        .usx4style .editablepop tr.even td {
        background-color: {$theme->colour_ledger};
        }
    {/if}
    {if $theme->mode_border >= 2}
        .usx4style .portlet, .usx4style .searchform, .usx4style .searchformresult, .usx4style .formblock {
        border: 0 none;
        background-color: {$theme->colour_content};
        border-radius: 4px;
        }
        #midblock .searchform h2 {
        background-color: {$theme->colour_side};
        }
        .usx4style .ui-datepicker-header  {
        border: 0 none;
        border-radius: 4px 4px 0 0;
        }
        .usx4style .searchformresult {
        padding: 10px 8px;
        }
        .usx4style table.editablepop {
        background-color: {$theme->colour_content};
        }
        .usx4style fieldset {
        background-color: rgba(255,255,255,0.6);
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 0;
        padding-bottom: 7px;
        padding-top: 7px;
        }
        .usx4style fieldset.borderbottom {
        border-style: inset;
        }
        .usx4style fieldset.blockhalf.leftblock {
        border: 0 none;
        }
        .usx4style fieldset.borderonly, .usx4style span.preview  {
        border: 1px solid {$theme->colour_bg};
        }
        .usx4style .ui-dialog {
        border-width: 3px;
        border-color: {$theme->colour_dialog};
        }
        .usx4style .searchform, .usx4style .formblock  {
        border-radius: 4px;
        }
        .usx4style .editablepop, .usx4style .editablepop td, .usx4style .editablepop th, .usx4style .portlet-content table.dashed, .usx4style .portlet-content table.dashed th, .usx4style .portlet-content table.dashed td {
        border-color: {$theme->colour_dialog};
        border-style: solid;
        }
        .usx4style .portlet-content table.dashed td {
        border-width: 2px;
        }
        .usx4style .portlet-content table.dashed th {
        border-width: 4px;
        }
        .usx4style .portlet-content table.dashed, .usx4style .portlet-content table.dashed th, .usx4style .portlet-content table.dashed td {
        border-style: solid;
        }
        .usx4style .editablepopdiv thead th {
        background-color: {$theme->colour_bg};
        }
        .usx4style label .label1, .usx4style label .label2, .usx4style label .label3, .usx4style label .label4 {
        opacity: 0.8;
        }
        .usx4style fieldset.borderbottom legend, .usx4style fieldset.bordertop legend, .usx4style fieldset.noborder legend, .usx4style fieldset.distance legend, .usx4style fieldset.blockhalf legend {
        padding: 5px 10px;
        border-radius: 4px;
        }
        #inforight table tr td, #inforight table tr th, .usx4style .ui-dialog td, .usx4style .ui-dialog th {
        border: 1px solid rgba(68, 68, 68, 0.1);
        }
        .usx4style .dialog_make_text_btn, .usx4style div.add_portlet {
        border: 1px solid {$theme->colour_border};
        }
        .usx4style .ui-tabs, .usx4style .ui-report {
        border: 3px solid {$theme->colour_bg};
        }
        #rightblockcontent {
        margin-left: 3px;
        margin-right: 3px;
        }
        #inforight {
        left: 7px;
        right: 7px;
        }
        .usx4style span.many p {
        border-bottom: 1px dashed {$theme->colour_bg};
        }
        .usx4style form hr, .usx4style fieldset hr, .usx4style hr.dashedstyle, .usx4style .fc-content .fc-state-default {
        border-top: 1px solid {$theme->colour_border};
        }
    {else}
        {if $theme->mode_border <= -1}
            .usx4style .dialog_make_btn14, .usx4style .dialog_make_btn16, .usx4style .dialog_make_btn24, .usx4style .dialog_make_btn32, .usx4style .module_icon,
            .usx4style .ui-icon-closethickgr, .usx4style .ui-icon-closethick, .usx4style .ui-datepicker-prev, .usx4style .ui-datepicker-next,
            .usx4style .searchform label.forsearchmore::before, .usx4style .searchform label.forsearchmore::after {
            -webkit-filter: invert(100%) brightness(1000%);
            filter: invert(100%) brightness(1000%);
            }
            .usx4style .dialog_make_btn14.delete{
            -webkit-filter: invert(0%) brightness(100%);
            filter: invert(0%) brightness(100%);
            }
            .usx4style .dialog_make_text_btn {
            border-color: rgba(230, 230, 230, 0.2);
            }
            .usx4style * {
            --box-shadow-color: #FFFFFF;
            }
            .usx4style input[type="checkbox"]:checked::after, .usx4style input[type="radio"]:checked::after {
            text-shadow: 1px 1px 1px rgba(255, 255, 255, .2);
            }
            #midblock h1.header1, #midblock h1.header2, #midblock h1.header3, #midblock h1.header4, #midblock h1.header5 {
            color: #FFFFFF;
            opacity: 0.95;
            }

            #mainblock input[disabled], #mainblock select[disabled], #mainblock textarea[disabled], #mainblock input[readonly], #mainblock textarea[readonly],
            #mainblock input.required[disabled], #mainblock select.required[disabled], #mainblock textarea.required[disabled], #mainblock input.required[readonly], #mainblock textarea.required[readonly],
            .usx4style .ui-dialog input[disabled], .usx4style .ui-dialog select[disabled], .usx4style .ui-dialog textarea[disabled], .usx4style .ui-dialog input[readonly], .usx4style .ui-dialog textarea[readonly], .usx4style .ui-dialog .many.disabled,
            .usx4style p span.form_viewonly, .usx4style td span.form_viewonly, .usx4style th span.form_viewonly {
            background-color: rgba(255, 210, 210, 0.5);
            }
        {else}
            .usx4style .dialog_make_btn14, .usx4style .dialog_make_btn16, .usx4style .dialog_make_btn24, .usx4style .dialog_make_btn32,
            .usx4style .ui-icon-closethickgr, .usx4style .ui-icon-closethick, .usx4style .ui-datepicker-prev, .usx4style .ui-datepicker-next {
            background-color: rgba(255, 255, 255, 0.5);
            }
            .usx4style .dialog_make_btn14.yess, .usx4style .dialog_make_btn14.nos, .usx4style .dialog_make_btn14.dot, .usx4style .dialog_make_btn14.dotr, .usx4style .dialog_make_btn14.dotg {
            background-color: transparent;
            }
            .usx4style .dialog_make_btn14.dot::after {
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            background-image: url('{site_url url="/images/10x10/dot.png"}');
            filter: invert(100%);
            margin: 2px;
            }
        {/if}
        .usx4style ul.functionmenu li span:hover, .usx4style ul.functionmenu li a:hover {
        color: {$theme->colour_font};
        }
    {/if}


    {if $theme->company_bgtop}
        #topblock {
        background: none;
        background-color: {$theme->company_bgtop};
        }
    {/if}
    {if $theme->company_bgborder}
        #menublock {
        background-color: {$theme->company_bgborder};
        }
    {/if}
    {if $view_weekend eq false}
        .usx4style .ui-datepicker td.ui-datepicker-week-end a {
        background-color: inherit;
        }
    {/if}

    .usx4style .ui-sortable-placeholder {
    border: 1px dotted {$theme->colour_blue} !important;
    visibility: visible !important;
    background-color: {$theme->colour_blue} !important;
    }
    .usx4style .ui-sortable-placeholder-red {
    border: 1px dotted {$theme->colour_red} !important;
    visibility: visible !important;
    background-color: {$theme->colour_red} !important;
    font-weight:bold;
    }

    .usx4style .drophover{
    background-color: {$theme->colour_blue};
    }

    @media screen and (min-width : 961px)  {
    .usx4style .select2-dropdown {
    min-width: 500px;
    }
    }
    .usx4style .select2-dropdown {
    background-color: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    }
    .usx4style .ui-dialog .select2-dropdown {
    z-index: 10002;
    }
    #wrap .select2-container .select2-selection--single {
    height: 20px;
    }
    #wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 20px
    }
    #wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: -1px;
    }
    #wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: 0 none;
    background-image: url('../images/totext/toggle.png');
    background-position: right 5px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    top: 3px;
    width: 18px;
    height: 18px;
    margin-left: -8px;
    }
{/strip}
