/* icons_new */
.icon {
    width: 32px;
    height: 32px;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 0.5rem;
}

.menu-icon {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    opacity: 0.7;
}
.icon-size-24 {
    width: 24px;
    height: 24px;
    border-radius: 10px;
    border: 0px none;
}

.icon-logo {
    display: flex;
    height: 32px;
    width: 32px;
    opacity: 0.7;
    background-color: currentColor;
    mask-repeat: no-repeat;
    margin-right: 10px;
    -webkit-mask-repeat: no-repeat;
    background-image: url("../images/ovum_logo_zelle_cmyk_color_black.svg");
    mask-image: url("../images/ovum_logo_zelle_cmyk_color_black.svg");
    -webkit-mask-image: url("../images/ovum_logo_zelle_cmyk_color_black.svg");
}

.home-icon {
    background-image: url("../images/home.svg");
    mask-image: url("../images/home.svg");
    -webkit-mask-image: url("../images/home.svg");
}

.weather-icon {
    background-image: url("../images/weather.svg");
}

.counter-icon {
    background-image: url("../images/counter.svg");
}

.update-icon {
    background-image: url("../images/update.svg");
}

.details-icon {
    background-image: url("../images/details.svg");
}

.event-icon {
    background-image: url("../images/event.svg");
}
.event-error-icon {
    background-image: url("../images/event-error.svg");
}

.installation-icon {
    background-image: url("../images/circle-heat.svg")
}

.device-icon {
    background-image: url("../images/device.svg");
    mask-image: url("../images/device.svg");
    background-image: url("../images/device.svg");
}

.user-icon {
    background-image: url("../images/user.svg");
}

.logout-icon {
    background-image: url("../images/logout.svg");
}

.settings-icon {
    background-image: url("../images/settings.svg");
}

.edit2-icon {
    -webkit-mask-image: url(../images/edit.svg);
    mask-image: url(../images/edit.svg);
    background-color: white;
}

.edit2-icon-action-button-size {
    width: 1rem;
    height: 1rem;
/*    margin-right: 1rem;*/
}

.edit2-icon-action-button-size img {
    width: 100%;
    height: 100%;
}

.menu2-icon {
    background-image: url("../images/menu.svg");
    width: 1rem; 
    height: 1rem;
    display: inline-block; 
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
}

/* Add this new class */
.action-menu-button {
    background-color: var(--ov-btn-bg);
    /* Add other styles if needed, e.g., border, text color */
    border: none; /* Example: remove default border
    /* padding: 0; /* Example: adjust padding if needed */
}

.action-menu-button:hover {
    background-color: var(--ov-btn-bg-hover) !important; /* Add !important */
}

.action-menu-button:active {
    background-color: var(--ov-btn-bg-active) !important; /* Add !important */
}

.delete-icon {
    background-image: url("../images/delete.svg");
}

.delete-icon-action-button-size {
    width: 1rem;
    height: 1rem;
    margin-right: 1rem;
}

.create-icon {
    background-image: url("../images/create.svg");
}

.copy-icon {
    background-image: url("../images/copy.svg");
}

.edit-icon {
    background-image: url("../images/edit.svg");
}

.about-icon {
    mask-image: url('../images/about-svgrepo-com.svg');
    background-image: url('../images/about-svgrepo-com.svg');
}

.background-image {
    mask-image: url('../images/subtle-prism.svg');
    background-image: url('../images/subtle-prism.svg');
}

.icon-arrow-up-bordered {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 4px;
}

.icon-arrow-up-bordered::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    left: 6px;
    bottom: 5px;
}

.icon-arrow-up {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 100px;
}

    .icon-arrow-up::after {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        width: 10px;
        height: 10px;
        border-top: 2px solid;
        border-right: 2px solid;
        transform: rotate(-45deg);
        left: 4px;
        bottom: 2px;
    }

.icon-arrow-down {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 4px;
}

    .icon-arrow-down::after {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        width: 6px;
        height: 6px;
        border-bottom: 2px solid;
        border-right: 2px solid;
        transform: rotate(45deg);
        left: 6px;
        top: 5px;
    }

.icon-arrow-right {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 15px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 100px;
}

    .icon-arrow-right::after {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        width: 10px;
        height: 10px;
        border-bottom: 2px solid;
        border-right: 2px solid;
        transform: rotate(-45deg);
        right: 6px;
        top: 4px;
    }
.icon-warning {
    background-image: url("../images/svg_icon/svg-warning-icon.svg");
}

.icon-error {
    background-image: url("../images/svg_icon/svg-error-icon.svg");
}
.icon-offline {
    background-image: url("../images/svg_icon/svg-noconn-icon.svg");
}
.icon-check-black {
    background-image: url('../images/svg_icon/svg-check-icon-black.svg');
}
.icon-home {
    background-image: url('../images/svg_icon/svg-home-icon.svg');
}
.icon-info {
    background-image: url('../images/svg_icon/svg-info-icon.svg');
}
.icon-help {
    background-image: url('../images/svg_icon/svg-help-icon.svg');
}
.icon-translate {
    background-image: url('../images/svg_icon/translate.svg');
}


.icon-close-bordered {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 40px;
}

    .icon-close-bordered::after,
    .icon-close-bordered::before {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        width: 12px;
        height: 2px;
        background: currentColor;
        transform: rotate(45deg);
        border-radius: 5px;
        top: 8px;
        left: 3px;
    }

    .icon-close-bordered::after {
        transform: rotate(-45deg);
    }

.icon-check {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 100px;
}

    .icon-check::after {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        left: 3px;
        top: -1px;
        width: 6px;
        height: 10px;
        border-width: 0 2px 2px 0;
        border-style: solid;
        transform-origin: bottom left;
        transform: rotate(45deg);
    }
.icon-triangle {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-radius: 40px;
}
    .icon-triangle::after,
    .icon-triangle::before {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        border-radius: 3px;
        width: 2px;
        background: currentColor;
        left: 7px;
    }

    .icon-triangle::after {
        top: 2px;
        height: 8px;
    }

    .icon-triangle::before {
        height: 2px;
        bottom: 2px;
    }


.icon-no-connection {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px; /* Breite des Icons */
    height: 12px; /* Höhe des Icons */
}
    .icon-no-connection::before,
    .icon-no-connection::after {
        content: "";
        width: 10px;
        height: 10px;
        background-color: gray;
        border-radius: 50%;
        display: inline-block;
    }
    .icon-no-connection::before {
        margin-right: 5px;
    }

    .icon-no-connection::after {
        margin-left: 5px;
    }

    .icon-no-connection::after {
        margin-left: 5px;
    }

    .icon-no-connection::before {
        margin-right: 5px;
    }

    .icon-no-connection::after {
        margin-left: 5px;
    }

    .icon-no-connection::before {
        margin-right: 5px;
    }