.tt-icon {
    position: relative;
}

.tt-icon:after {
    top: 50%;
    content: "";
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-repeat: no-repeat;

    /* Skaliert mit der Schriftgröße */
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    background-size: 1em 1em;
}

.tt-icon-left:after {
    left: 5px;
}

.tt-icon-outer-left:after {
    right: 100%;
    margin-right: 5px;
}

.tt-icon-center:after {
    left: 50%;
    margin-left: -0.5em;
}

.tt-icon-right:after {
    right: 5px;
}

.tt-icon-outer-right:after {
    left: 100%;
    margin-left: 5px;
}

.tt-icon-arrow:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTcuNDEgOS4yOTVsNC41OSA0LjU4IDQuNTktNC41OCAxLjQxIDEuNDEtNiA2LTYtNiAxLjQxLTEuNDF6IiBmaWxsPSIjNWU1ZTVlIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4K");
}

.tt-icon-double-arrow:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTcgNkw1LjU5IDcuNDEgMTAuMTcgMTJsLTQuNTggNC41OUw3IDE4bDYtNi02LTZ6TTE0LjQxIDZMMTMgNy40MSAxNy41OCAxMiAxMyAxNi41OSAxNC40MSAxOGw2LTYtNi02eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+Cg==");
}

.tt-icon-credit:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTE1IDE4LjVjLTIuNTEgMC00LjY4LTEuNDItNS43Ni0zLjVIMTV2LTJIOC41OGMtLjA1LS4zMy0uMDgtLjY2LS4wOC0xIDAtLjM0LjAzLS42Ny4wOC0xSDE1VjlIOS4yNEMxMC4zMiA2LjkyIDEyLjUgNS41IDE1IDUuNWMxLjYxIDAgMy4wOS41OSA0LjIzIDEuNTdMMjEgNS4zQzE5LjQxIDMuODcgMTcuMyAzIDE1IDNjLTMuOTIgMC03LjI0IDIuNTEtOC40OCA2SDN2MmgzLjA2Yy0uMDQuMzMtLjA2LjY2LS4wNiAxIDAgLjM0LjAyLjY3LjA2IDFIM3YyaDMuNTJjMS4yNCAzLjQ5IDQuNTYgNiA4LjQ4IDYgMi4zMSAwIDQuNDEtLjg3IDYtMi4zbC0xLjc4LTEuNzdjLTEuMTMuOTgtMi42IDEuNTctNC4yMiAxLjU3eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+Cg==");
}

.tt-icon-mail:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTIxIDE3LjcyNGwtNy41MDgtNS4wMDVMMTIgMTMuODEybC0xLjQ5Mi0xLjA5NEwzIDE3LjcyM3YxLjJoMTh2LTEuMnpNMjEgNy4yMTRsLTYuOTEyIDUuMDdMMjEgMTYuODkyVjcuMjE0ek0zIDcuMjE0djkuNjc4bDYuOTEyLTQuNjFMMyA3LjIxNXoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik0yMSA1LjA3N0gzdjEuMjc4bDkgNi42IDktNi42VjUuMDc3eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+Cg==");
}

.tt-icon-play:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTcuNSA1djE0bDExLTctMTEtN3oiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPgo=");
}

.tt-icon-play-blue:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTcuNSA1djE0bDExLTctMTEtN3oiIGZpbGw9IiMwMDY2Y2MiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPgo=");
}

.tt-icon-play-blue:hover:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTcuNSA1djE0bDExLTctMTEtN3oiIGZpbGw9IiMwMDk5MDAiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPgo=");
}

.tt-icon-search:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTE1Ljc1NSAxNC4yNTVoLS43OWwtLjI4LS4yN2MuOTgtMS4xNCAxLjU3LTIuNjIgMS41Ny00LjIzIDAtMy41OS0yLjkxLTYuNS02LjUtNi41cy02LjUgMi45MS02LjUgNi41IDIuOTEgNi41IDYuNSA2LjVjMS42MSAwIDMuMDktLjU5IDQuMjMtMS41N2wuMjcuMjh2Ljc5bDUgNC45OSAxLjQ5LTEuNDktNC45OS01em0tNiAwYy0yLjQ5IDAtNC41LTIuMDEtNC41LTQuNXMyLjAxLTQuNSA0LjUtNC41IDQuNSAyLjAxIDQuNSA0LjUtMi4wMSA0LjUtNC41IDQuNXoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPgo=");
}

.tt-icon-ticket:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTIwIDNjLjU1MiAwIDEgLjQ0OCAxIDF2MTNjMCAuNTUyLS40NDggMS0xIDFoLTZWNmMwLS41NTItLjQ0OC0xLTEtMWgtMlY0YzAtLjU1Mi40NDgtMSAxLTFoOHoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTMgN2MwLS41NTItLjQ0OC0xLTEtMUg0Yy0uNTUyIDAtMSAuNDQ4LTEgMXYxM2MwIC41NTIuNDQ4IDEgMSAxaDhjLjU1MiAwIDEtLjQ0OCAxLTFWN3oiIGZpbGw9IiNmZmYiLz48L3N2Zz4K");
}

.tt-icon-plus-green:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTkuMzMzIDYuNjY3djIuNjY2SDR2NS4zMzRoNS4zMzNWMjBoNS4zMzR2LTUuMzMzSDIwVjkuMzMzaC01LjMzM1Y0SDkuMzMzdjIuNjY3eiIgZmlsbD0iIzY4OWQwMCIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+Cg==");
}

.tt-icon-bg-green:after {
    background-color: #98BF27;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.tt-icon-rotation-45:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.tt-icon-rotation-90:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

.tt-icon-rotation-180:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.tt-icon-rotation-270:after {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
}