.app-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: inherit;
    background-origin: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: contain;

    &.left {
        margin-right: 6px;
    }
    &.right {
        margin-left: 6px;
    }
    &.top {
        margin-bottom: 6px;
    }
    &.bottom {
        margin-top: 6px;
    }

    /** Must be placed inside app-icon to prevent style leaks */
    &.download::before {
        content: '\e63a';
        font-size: 18px;
        position: static;
        font-family: lekker-webfont, sans-serif;
        color: inherit;
    }

    /** ARROWS */
    &.thin-tail-arrow,&.thin-tail-arrow-right,&.thin-tail-arrow-left, &.thin-tail-arrow-down, &.thin-tail-arrow-up {
        width: 18px;
        height: 13px;
        background-image: url("../../../img/icon/arrow/thin-tail-1dbd2a27876415f484236b99c98b1ae9.svg");
    }
    &.thin-tail-arrow-left {
        transform: rotateY(180deg);
    }
    &.thin-tail-arrow-up {
        transform: rotateY(-90deg);
    }
    &.thin-tail-arrow-down {
        transform: rotateY(90deg);
    }

    &.thick-notail-arrow,&.thick-notail-arrow-right,&.thick-notail-arrow-left, &.thick-notail-arrow-down, &.thick-notail-arrow-up {
        width: 18px;
        height: 13px;
        background-image: url(../../../img/icon/arrow/thick-notail.svg);
    }
    &.thick-notail-arrow-left {
        transform: rotateY(90deg);
    }
    &.thick-notail-arrow-right {
        transform: rotateY(-90deg);
    }
    &.thick-notail-arrow-up {
        transform: rotateY(180deg);
    }

    &.double.notail,&.double.notail-right,&.double.notail-left, &.double.notail-down, &.double.notail-up {
        width: 18px;
        height: 13px;
        background-image: url("../../../img/icon/arrow/double-no-tail-e464c536b70207c7d32c5f71038679ec.svg");
    }
    &.thin-tail-arrow-left {
        transform: rotateY(180deg);
    }
    &.thin-tail-arrow-up {
        transform: rotateY(-90deg);
    }
    &.thin-tail-arrow-down {
        transform: rotateY(90deg);
    }
    /** END ARROWS */

    /** CHECKBOX */
    &.checkbox-unchecked {
        background-image: url("../../../img/icon/checkbox/unchecked-ec43dd0742896d0c1397d99121e97e2a.svg");
        width: 28px;
        height: 20px;
        background-position: center;
        &:hover {
            background-image: url("../../../img/icon/checkbox/hover-adf2a50993690924d64bc9cec28abad3.svg");
        }
    }

    &.checkbox-checked {
        background-image: url("../../../img/icon/checkbox/checked-c416dd81d43eadb62a558de119a47ab1.svg");
        width: 28px;
        height: 20px;
        background-position: center;
    }

    &.checkbox-invalid {
        background-image: url("../../../img/icon/checkbox/invalid-43df35985a944fe897b20012a0e3a775.svg");
        width: 28px;
        height: 20px;
        background-position: center;
    }
    /** END CHECKBOX */

    &.close {
        background-image: url("../../../img/icon/close-d9dd2947ff9fda52947651b7a79acc13.svg");
        height: 1em;
        width: 1em;
    }

    &.plug {
        background-image: url("../../../img/icon/contract/plug-7bcf4d7285a9a89d36786815f1910dcd.svg");
        width: 2em;
        height: 2em;
        &.reversed {
            background-image: url("../../../img/icon/contract/plug-reversed-e424b8435de7586ad8d8c1add3f6ff77.svg");
        }
    }

    &.gas-flame {
        background-image: url("../../../img/icon/contract/gas-flame-8c1b324dd201639f9a9cbe506775e01a.svg");
        height: 24px;
        width: 12px;
        &.reversed {
            background-image: url("../../../img/icon/contract/gas-flame-reversed-981cc7ef7f5dbce30cd46c7c3df7cebc.svg");
        }
    }

    &.home {
        background-image: url("../../../img/icon/home-85a8785c84b752bd037748caa8fb5c30.svg");
        width: 2em;
        height: 2em;
        &.reversed {
            background-image: url("../../../img/icon/home-reversed-bb38ac9192390b8dff062ac6459b2ee6.svg");
        }
    }

    &.offer {
        background-image: url("../../../img/icon/offer-8f3a8800ef4819ec7b14e76169db1aea.svg");
        width: 39px;
        height: 26px;
        &.reversed {
            background-image: url("../../../img/icon/offer-reversed-36d83aab16a5d59cc666e98e2c64e0e4.svg");
        }
    }

    &.clipboard {
        background-image: url("../../../img/icon/clipboard-d8e4a8782249b5fc850976266f6aa361.svg");
        height: 36px;
        width: 33px;
        &.reversed {
            background-image: url("../../../img/icon/clipboard-reversed-48fe2de4439a480d0a8c3bf0b0b60966.svg");
        }
    }

    &.document {
        background-image: url("../../../img/icon/document-22b7fc6b14dddb62a7b7a20a7a5c03e6.svg");
        height: 36px;
        width: 33px;
        &.reversed {
            background-image: url("../../../img/icon/document-reversed-544de85c1770341e23b5bf3e57374163.svg");
        }
    }

    &.survey {
        background-image: url("../../../img/icon/survey-6098c270d5ff43be585e1fdfb533a883.svg");
        width: 60px;
        height: 52px;
        .reversed {
            background-image: url("../../../img/icon/survey-reversed-377d87b46bbe225c1b3dc88880c54074.svg");
        }
    }

    &.callcenter {
        background-image: url("../../../img/icon/callcenter-cd17669951e645687817ab1a20dada60.svg");
        width: 75px;
        height: 75px;
    }

    &.info {
        background-image: url("../../../img/icon/info-38488c217a23de9b9f5a27359cd9de1c.svg");
        height: 4em;
        width: 4em;
    }

    &.truck {
        background-image: url("../../../img/icon/truck-67047b113f70e4ddb70c2af321194112.svg");
        height: 2em;
        width: 2em;
        &.reversed {
            background-image: url("../../../img/icon/truck-reversed-c39ddf701c87424a973d2fbeb6acaf46.svg");
        }
    }

    /** STEPPER */
    &.step-1,.step-2,.step-3 {
        height: 2em;
        width: 2em;
    }
    &.step-1 {
        background-image: url("../../../img/icon/stepper/step-1-874b9d8475a26febc2b216dd19933fa2.svg");
    }
    &.step-2 {
        background-image: url("../../../img/icon/stepper/step-2-939f640aafdc45b9fb99d2db17ebdf0a.svg");
    }
    &.step-3 {
        background-image: url("../../../img/icon/stepper/step-3-dff41f6ffad5ce6c89805daa637b69a0.svg");
    }
    /** END STEPPER */

    .lekker-envelope {
        display: block;
        height: 100%;
        width: 3em;
        background: url("../../../img/icon/contact-reversed-dde3be0c41b91c0b3c628c62a1da267a.svg") center no-repeat;
        background-size: 1.8em;
        @media (min-width: 990px) {
            width: 4.5em;
            background-size: 2em;
        }
    }
}

.app-icon:not[disabled]:hover {
    opacity: 0.75;
}

.display-on-hover {
    * {
        visibility: hidden;
    }
}
.display-on-hover:hover {
    * {
        visibility: visible;
    }
}

/** Used to style the messenger form box */
.lightbox {
    background-image: url(/meinlekker/website/assets/img/lightbox-close-large.png);
    width: 32px;
    height: 32px;
}

/** A dot element, similar to that of an unordered list. Avoid usage - use <ul></ul> */
.dot {
    display: inline-block;
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

.error-icon {
    width: 24px;
    height: 24px;
    display: none;
}