/* Global */

a.a8Btn {
    display: inline-block;
}
.a8Btn
{
    /* display: inline-block; */
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 3px;
    color: var(--white) !important;
    background-image: url("/images/design/btn_icons.webp");
    background-color: var(--greyMedium);
    background-repeat: no-repeat;
    cursor: pointer;
    font-size: 15px;
    font-family: "Trebuchet MS", Tahoma, sans-serif;
    letter-spacing: 0.3pt;
    line-height: 30px;
    padding: 2px 6px 1px 34px;
    width: 100%;
    height: 34px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none !important;
    margin-top: 1px;
}

.a8Btn:hover
{
    text-decoration: none !important;
    background-color: var(--greyDark);
    color: var(--white);
}

.noIcon
{
    background-image: none;
    padding: 1px 8px 1px 8px;
}

.noIcon:hover
{
    border-bottom: 3px solid var(--orange);
}

.checkGreenIcon
{
    background-position: 0 0;
}

.checkGreenIcon:hover
{
    border-bottom: 3px solid var(--green);
}

.plusOrangeIcon
{
    background-position: 0 -34px;
}

.plusOrangeIcon:hover
{
    border-bottom: 3px solid var(--orange);
}

.backBlueIcon
{
    background-position: 0 -68px;
}

.backBlueIcon:hover
{
    border-bottom: 3px solid var(--blue);
}

.cancelRedIcon
{
    background-position: 0 -102px;
}

.cancelRedIcon:hover
{
    border-bottom: 3px solid var(--red);
}

.lockGreyIcon
{
    background-position: 0 -136px;
}

.lockGreyIcon:hover
{
    border-bottom: 3px solid var(--greyLight);
}

.duplicateBlueIcon
{
    background-position: 0 -170px;
}

.duplicateBlueIcon:hover
{
    border-bottom: 3px solid var(--blue);
}

.uploadOrangeIcon
{
    background-position: 0 -204px;
}

.uploadOrangeIcon:hover
{
    border-bottom: 3px solid var(--orange);
}

.cropOrangeIcon
{
    background-position: 0 -238px;
}

.cropOrangeIcon:hover
{
    border-bottom: 3px solid var(--orange);
}

.flipbookOrangeIcon
{
    background-position: 0 -272px;
}

.flipbookOrangeIcon:hover
{
    border-bottom: 3px solid var(--orange);
}

.pencilBlueIcon
{
    background-position: 0 -306px;
}

.pencilBlueIcon:hover
{
    border-bottom: 3px solid var(--blue);
}

.previewOrangeIcon
{
    background-position: 0 -408px;
}

.previewOrangeIcon:hover
{
    border-bottom: 3px solid var(--orange);
}

.prevContentOrangeIcon
{
    background-position: 0 -442px;
}

.prevContentOrangeIcon:hover
{
    border-bottom: 3px solid var(--orange);
}

.pencilOrangeIcon
{
    background-position: 0 -510px;
}

.pencilOrangeIcon:hover
{
    border-bottom: 3px solid var(--orange);
}

.flipbookBlueIcon
{
    background-position: 0 -544px;
}

.flipbookBlueIcon:hover
{
    border-bottom: 3px solid var(--blue);
}

.transferGreenIcon
{
    background-position: 0 -612px;
}

.transferGreenIcon:hover
{
    border-bottom: 3px solid var(--green);
}

.deleteRedIcon
{
    background-position: 0 -646px;
}

.deleteRedIcon:hover
{
    border-bottom: 3px solid var(--redDark);
}

.chromaticOrangeIcon
{
    background-position: 0 -680px;
}

.chromaticOrangeIcon:hover
{
    border-bottom: 3px solid var(--orange);
}

.plusGreenIcon
{
    background-position: 0 -714px;
}

.plusGreenIcon:hover
{
    border-bottom: 3px solid var(--green);
}

.envelopeOrangeIcon
{
    background-position: 0 -748px;
}

.envelopeOrangeIcon:hover
{
    border-bottom: 3px solid var(--orange);
}

.envelopeGreenIcon
{
    background-position: 0 -782px;
}

.envelopeGreenIcon:hover
{
    border-bottom: 3px solid var(--green);
}

.prototypeGreenIcon
{
    background-position: 0 -816px;
}

.prototypeGreenIcon:hover
{
    border-bottom: 3px solid var(--green);
}

.forwGreenIcon
{
    background-position: 0 -850px;
}

.forwGreenIcon:hover
{
    border-bottom: 3px solid var(--green);
}

/* Hover-Effekt für Grafiken (User-Startseite) */
.dashBn1 {
    height: 218px;
    width: 218px;
}

.dashBn2,
.dashBn3 {
    width: 188px;
    height: 188px;
    margin-top: 25px;
}

.dashBn1 {
    background: url('/images/icon_start_project.png') no-repeat 0 0 / 100%, var(--white);
    border-radius: 50%;
}

.dashBn2 {
    background: url('/images/icon_start_profile.png') no-repeat 0 0 / 100%, var(--white);
    border-radius: 50%;
}

.dashBn3 {
    background: url('/images/icon_start_instruction.png') no-repeat 0 0 / 100%, var(--white);
    border-radius: 50%;
}

.dashBn1:hover {
    background: url('/images/icon_start_project.png') no-repeat 0 0 / 100%, var(--black);
}

.dashBn2:hover {
    background: url('/images/icon_start_profile.png') no-repeat 0 0 / 100%, var(--black);
}

.dashBn3:hover {
    background: url('/images/icon_start_instruction.png') no-repeat 0 0 / 100%, var(--black);
}

/* Extras */

.floatL {
    float: left !important;
    width: 226px;
}

.floatR {
    float: right !important;
    width: 226px;
}

.leftBtn {
    width: 226px;
    margin-right: 9px;
}

.rightBtn {
    width: 226px;
    margin-left: 9px;
}

.centerBtn {
    width: 240px;
}

.bootbox-close-button {
    display: none;
}

.a8BtnDisabled {
    opacity: 0.5;
}
.a8BtnDisabled:hover {
    opacity: 0.5;
    border-bottom: 0;
    cursor: not-allowed;
}

/* Ende Extras */