@-webkit-keyframes spin1 {
    0% { -webkit-transform: rotate(360deg);}
    100% { -webkit-transform: rotate(0deg);}
}
@-moz-keyframes spin1 {
    0% { -moz-transform: rotate(360deg);}
    100% { -moz-transform: rotate(0deg);}
}
@-o-keyframes spin1 {
    0% { -o-transform: rotate(360deg);}
    100% { -o-transform: rotate(0deg);}
}
@-ms-keyframes spin1 {
    0% { -ms-transform: rotate(360deg);}
    100% { -ms-transform: rotate(0deg);}
}
@-keyframes spin1 {
    0% { transform: rotate(360deg);}
    100% { transform: rotate(0deg);}
}

.spinner-container img {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    -webkit-animation: spin1 2s infinite linear;
    -moz-animation: spin1 2s infinite linear;
    -o-animation: spin1 2s infinite linear;
    -ms-animation: spin1 2s infinite linear;
    animation: spin1 2s infinite linear;
    display: block;
    border: none;
    position: relative;
}

.spinner-container {
    height: 6em;
    width: 6em;
    position: relative;
    margin: 0.75em auto;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.spinner-container.small {
    height: 2em;
    width: 2em;
}

.spinner-container.large {
    height: 12em;
    width: 12em;
    margin: 1.5em;
    margin-left: auto;
    margin-right: auto;
}

.spinner-container.xxl {
    height: 16em;
    width: 16em;
    margin: 3em;
    margin-left: auto;
    margin-right: auto;
}

/*************************************************\
**  Spinner für outputpanel
\*************************************************/
.ui-outputpanel > .ui-outputpanel-loading {
    background-image: url("/jakarta.faces.resource/images/kompass.svg.xhtml?ln=bww&v=2_46");
    background-repeat: no-repeat;
    -webkit-animation: spin1 2s infinite linear;
    -moz-animation: spin1 2s infinite linear;
    -o-animation: spin1 2s infinite linear;
    -ms-animation: spin1 2s infinite linear;
    animation: spin1 2s infinite linear;
    width: 8em;
    height: 8em;
}