main {
    background-image: url("/img/workListBackground.svg");
    background-origin: content-box;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center center;
}

.mainContentBox {
    margin-top: 1em;
    margin-bottom: 2em;
}

.mainContentBox h1 {
    margin-bottom: 0.5em;
}

.workList .container-site-error {
    /* MUSS noch responsive gemacht werden */
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 10px;

    /* offset-x | offset-y | blur-radius | color */
    box-shadow: 5px 7px 10px #aaa;

    margin-left: -0.78em;
    margin-bottom: 1em;
    padding: 0.9em 0.5em 0.2em;
    width: 100%;
}

.workListError {
    margin: 0.1em 0.5em 0.9em;
    border: 1px solid #856404;
}

.workList a {
    text-decoration: none;
    color: #696969;
}

.workList .workListItem,
.workDetail .workListItem {
    /*background-color: #fec7a5;*/
    border: 1px solid #aaa;
    border-radius: 10px;

    /* offset-x | offset-y | blur-radius | color */
    box-shadow: 5px 7px 10px #aaa;

    /*text-align: left;*/

    margin-bottom: 1em;
    padding: 0.2em 0.5em;
    padding-top: 0.9em;
    min-height: 13em;
    width: 100%;
}

.workListItem h2 {
    font-size: 120%;
}

/*.workListItem .workData {
    border: 1px dashed red;
}

.workListItem .workActions {
    border: 1px dashed blue;
}*/

.workListItem .col-11 {
    /*border: 1px dashed #c3c3c3;*/
    max-width: 90%;
}

.workListItemTitle {
    vertical-align: center;
    padding-top: 2px;
}

.workListItemIcon {
    color: #f44336;
    min-width: 40px;
    max-width: 50px;
    text-align: center;
    /*border: 1px dashed red;*/
}

.workItemJobberView .workListItemIcon {
    color: #3293fd;
}

.icoWorkCategory {
    text-align: center;
    vertical-align: top;
    min-width: 40px;
    max-width: 50px;
    padding: 0;
}

.icoWorkCategory img {
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
}

.workListPager {
    padding: 0;
    margin: 0;
    text-align: center;
}

.workListItem {
    background-color: #fff;
}

/*.workListItem .workActions {
    border: 1px dashed blue;
}*/

.workPreviewImage {
    min-width: 80%;
    min-height: 68%;
    max-width: 230px;
    margin-bottom: 5px;
    text-align: center;
    vertical-align: top;
    /*border: 1px dashed green;*/
}

.imgWorKPreview {
    max-width: 100%;
    height: auto;
    max-height: 170px;
    object-fit: contain;
}

.imgWorkImageFull {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    height: auto;
    object-fit: contain;
}

.disabled .workListItem,
.disabled .workListItemTitle,
.disabled .workListItemDescription,
.disabled .workListItemLocation,
.disabled .workListItemDistrict,
.disabled .workListItemState,
.disabled .workListItemStartAt,
.disabled .workListItemEndAt,
.disabled .workListItemPriceTotal,
.disabled .workListItemEmail,
.disabled .workListItemMobile,
.disabled .workListItemIcon,
.disabled .workApplicationItemTaskerView .workListItemIcon {
    color: #bfbfbf;
}

.workDetailLinkButton,
.workDetailLinkButton:hover,
.workListLinkButton,
.workListLinkButton:hover {
    box-shadow: none;
    background-color: #f44336;
    border-color: transparent;
    color: #fff;
    width: 100%;
}

.workItemJobberView  .workDetailLinkButton,
.workItemJobberView  .workDetailLinkButton:hover,
.workItemJobberView  .workListLinkButton,
.workItemJobberView  .workListLinkButton:hover {
    background-color: #3293fd;
}

.workApplicationNumbers {
    color: #f40011;
    font-size: 80%;
    font-weight: lighter;
}

.workItemJobberView .workApplicationNumbers {
    color: #3293fd;
}

.workListFilter {
    max-width: 97%;
    text-align: left;
    margin-left: unset;
    margin-bottom: 1.7em;

    padding: 0.7em 0.3em 0;

    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 10px;
    box-shadow: 5px 7px 10px #aaa;
}

.workListFilter .row {
    margin-left: 0;
    margin-right: 0;
    /*border: 1px dashed #f00;*/
}

.workFilterActions {
    /*min-width: 45%;
    max-width: 95%;*/
    margin-bottom: 0.5em;
    /*border: 1px dashed #f0f;*/
}

.workFilterLocation {
    vertical-align: bottom;
    /*border: 1px dashed #f0f;*/
}

.workFilterPin {
    min-width: 30%;
    max-width: 75%;
}

.workFilterCheckbox {
    /*max-width: 30%;*/
    padding-top: 1.1em;
    /*border: 1px dashed #f0f;*/
}

.workFilterIsRemote {
    /*max-width: 35%;
    padding-top: 1.1em;*/
    /*border: 1px dashed #f0f;*/
}

.workFilterMyTasks {
    /*max-width: 25%;
    padding-top: 1.1em;*/
    /*border: 1px dashed #00f;*/
}

.workFilterMyJobs {
    /*max-width: 25%;
    padding-top: 1.1em;*/
    /*border: 1px dashed #f00;*/
}

/*.workFilterText {
    max-width: 75%;
}*/

.workFilterAction {
    /*min-width: 45%;*/
    /*border: 1px dashed #f0f;*/
}

#btnWorkSearch,
#btnWorkFilterReset {
    width: 100%;
}

@media (orientation: landscape){
    .workFilterCheckbox {
        /*max-width: 45%;*/
        padding-top: 0.4em;
    }

    @media (max-width: 812.96px) {
        .brandLogo {
            width: 50%;
        }

        .mainContentBox {
            font-size: 80%;
            margin-top: 0;
        }

        .mainContentBox h1 {
            font-size: 165%;
        }

        .container .workList {
            padding-right: 0px;
        }

        .workList .col-11 {
            max-width: 85%;
            padding-left: 5px;
            padding-right: 5px;
        }

        .workList .workActions {
            padding-left: 5px;
            padding-right: 5px;
        }

        .icoWorkCategory img {
            width: 25px;
            height: 25px;
        }

        .workPreviewImage {
            min-height: 68%;
            /*max-height: 63%;*/
        }

        /*.workPreviewImage img {
            max-width: 60%;
        }*/

        .workDetailLinkButton,
        .workListLinkButton,
        .btnWorkApplication,
        #btnWorkSearch,
        #btnWorkFilterReset {
            font-size: 80%;
        }

        /*.workFilterText {
            max-width: 75%;
        }*/
    }

    @media (max-width: 460px) and (max-aspect-ratio: 13/9) {
        .brandLogo {
            width: 75%;
        }

        .mainContentBox {
            font-size: 80%;
            margin-top: 0;
        }

        .mainContentBox h1 {
            font-size: 135%;
            margin-bottom: 0.5em;
        }

        .workListFilter {
            max-width: 97%;
            font-size: 80%;
        }

        .workListFilter input[type="text"] {
            font-size: 120%;
        }

        /*.workFilterPin {
            min-width: 35%;
            max-width: 40%;
        }

        .workFilterCheckbox {
            max-width: 25%;
        }

        .workFilterText {
            max-width: 70%;
        }*/

        .workFilterAction {
            min-width: 30%;
            padding-top: 5px;
            padding-left: 7px;
            padding-right: 7px;
        }

        .container .workList {
            padding-right: 0px;
            min-width: 103%;
        }

        .workListItem {
            margin-top: 1.5em;
            font-size: 80%;
        }

        .workList .workActions {
            padding-left: 5px;
            padding-right: 5px;
        }

        .workList .col-11 {
            max-width: 75%;
            padding-left: 5px;
            padding-right: 5px;
        }

        .workPreviewImage {
            min-height: 68%;
            /*max-height: 63%;*/
        }

        /*.workPreviewImage img {
            max-width: 100%;
        }*/

        .workDetailLinkButton,
        .workListLinkButton,
        .btnWorkApplication,
        #btnWorkSearch,
        #btnWorkFilterReset {
            font-size: 80%;
            padding-left: 5px;
            padding-right: 5px;
        }
    }
}

@media (orientation: portrait) {
    .mainContentBox {
        margin-top: 0;
    }

    .container .workList {
        padding-right: 0px;
        min-width: 103%;
    }

    .workList .col-11 {
        padding-left: 5px;
        padding-right: 5px;
    }

    .workList .workActions {
        padding-left: 5px;
        padding-right: 5px;
    }

    .workPreviewImage {
        min-height: 68%;
        /*max-height: 63%;*/
    }

    /*.workPreviewImage img {
        max-width: 200px;
    }*/

    .workDetailLinkButton,
    .workListLinkButton,
    .btnWorkApplication,
    #btnWorkSearch,
    #btnWorkFilterReset {
        font-size: 80%;
        padding-left: 5px;
        padding-right: 5px;
    }

    .workListFilter {
        font-size: 80%;
        padding-left: 0;
    }

    .workListFilter input[type="text"] {
        font-size: 120%;
    }

    /*.workFilterPin {
        min-width: 35%;
        max-width: 40%;
    }

    .workFilterCheckbox {
        max-width: 25%;
    }

    .workFilterText {
        max-width: 70%;
    }*/

    .workFilterAction {
        min-width: 30%;
        padding-top: 5px;
        padding-left: 7px;
        padding-right: 7px;
    }

    @media (max-width: 320px) {
        .brandLogo {
            width: 85%;
        }

        .mainContentBox {
            font-size: 80%;
            margin-top: 0;
        }

        .mainContentBox h1 {
            font-size: 135%;
        }

        .workList .col-11 {
            max-width: 70%;
        }

        .workListItem {
            margin-top: 1.5em;
            font-size: 80%;
        }

        .icoWorkCategory img {
            width: 25px;
            height: 25px;
        }

        /*.workPreviewImage img {
            max-width: 75%;
        }*/

        .workDetailLinkButton,
        .workListLinkButton,
        .btnWorkApplication {
            margin-top: 5px;
            font-size: 80%;
        }
    }

    @media (min-width: 320px) and (max-width: 740.12px) {
        .mainContentBox {
            font-size: 80%;
        }

        .mainContentBox h1 {
            font-size: 135%;
        }

        .workList .col-11 {
            max-width: 75%;
        }

        .workListItem {
            margin-top: 1.5em;
            font-size: 80%;
        }

        .icoWorkCategory img {
            width: 25px;
            height: 25px;
        }

        /*.workPreviewImage img {
            max-width: 75%;
        }*/
    }

    @media (min-width: 740.13px) and (max-width: 1024px) {
        .workPreviewImage {
            min-height: 68%;
            /*max-height: 70%;*/
        }

        .workListFilter {
            max-width: 100%;
        }
    }
}

/*@media screen and (max-width: 320px) and (max-aspect-ratio: 13/9) {
    .mainContentBox {
        margin-top: 0;
        font-size: 80%;
    }

    .container .workList {
        padding-right: 0px;
        min-width: 103%;
    }

    .workList .col-11 {
        padding-left: 5px;
        padding-right: 5px;
    }

    .workList .workActions {
        padding-left: 5px;
        padding-right: 5px;
    }

    .workPreviewImage {
        min-height: 68%;
        max-height: 63%;
    }

    .workPreviewImage img {
        max-width: 100%;
    }

    .workDetailLinkButton,
    .workListLinkButton,
    .btnWorkApplication,
    #btnWorkSearch,
    #btnWorkFilterReset {
        font-size: 80%;
        padding-left: 5px;
        padding-right: 5px;
    }

    .workListFilter {
        font-size: 80%;
    }

    .workListFilter input[type="text"] {
        font-size: 120%;
    }

    .workFilterPin {
        min-width: 40%;
    }

    .workFilterCheckbox {
        max-width: 20%;
    }

    .workFilterText {
        max-width: 70%;
    }

    .workFilterAction {
        min-width: 30%;
        padding-top: 5px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .workListFilter {
        padding-left: 1em;
    }

    .brandLogo {
        width: 85%;
    }

    .mainContentBox {
        font-size: 80%;
        margin-top: 0;
    }

    .mainContentBox h1 {
        font-size: 135%;
    }

    .workList .col-11 {
        max-width: 70%;
    }

    .workListItem {
        margin-top: 1.5em;
    }

    .icoWorkCategory img {
        width: 25px;
        height: 25px;
    }
}*/