/* Damit man genug Platz für Details hat, werden Icons mit der Größe 24x24 Pixel, und der Farbe #727381 exportiert */
/* Da sie damit aber zu groß sind werden sie hier per CSS wieder auf 20x20 Pixel verkleinert */
/* Die Farbe der Icons wird, wenn man sie per mask-image, etc. einbindet, einfach per background-color: var(--color_icon) gesetzt */
/* Bei Icons die eine Form auf einer Farbfläche haben (z.B. icon_create_new), muss das Icon mit background-image eingebunden werden, weil diese Icons eine weiße Farbfläche als Hintergrundfarbe brauchen */

.icon_smiley_red {
	cursor: pointer;
	user-select: none;
	background-image: url(../images/buttons/icon_smiley_red.svg);
	background-size: 20px 20px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 20px;
	min-height: 20px;
	min-width: 20px;
	margin: 2px 6px 2px 0;
}
.icon_smiley_red_disabled {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_grey_400);
    mask-image: url(../images/buttons/icon_smiley_red_disabled.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_smiley_green {
	cursor: pointer;
	user-select: none;
	background-image: url(../images/buttons/icon_smiley_green.svg);
	background-size: 20px 20px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 20px;
	min-height: 20px;
	min-width: 20px;
	margin: 2px 6px 2px 0;
}
.icon_smiley_green_disabled {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_grey_400);
    mask-image: url(../images/buttons/icon_smiley_green_disabled.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_smiley_grey {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_smiley_grey.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_smiley_grey_disabled {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_grey_400);
    mask-image: url(../images/buttons/icon_smiley_grey_disabled.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_create_new {
	cursor: pointer;
	user-select: none;
	background-image: url(../images/buttons/icon_create_new.svg);
	background-size: 20px 20px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 20px;
	min-height: 20px;
	min-width: 20px;
	margin: 2px 6px 2px 0;
}

.icon_status_good {
	cursor: pointer;
	user-select: none;
	background-image: url(../images/buttons/icon_status_good.svg);
	background-size: 20px 20px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 20px;
	min-height: 20px;
	min-width: 20px;
	margin: 2px 6px 2px 0;
}

.icon_status_placeholder_good {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_positive);
    mask-image: url(../images/buttons/icon_status_placeholder_good.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_status_bad {
	cursor: pointer;
	user-select: none;
	background-image: url(../images/buttons/icon_status_bad.svg);
	background-size: 20px 20px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 20px;
	min-height: 20px;
	min-width: 20px;
	margin: 2px 6px 2px 0;
}

.icon_status_placeholder_bad {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_negative);
    mask-image: url(../images/buttons/icon_status_placeholder_bad.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
    opacity: 0.8;
}

.icon_status_warning {
	cursor: pointer;
	user-select: none;
	background-image: url(../images/buttons/icon_status_warning.svg);
	background-size: 20px 20px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 20px;
	min-height: 20px;
	min-width: 20px;
	margin: 2px 6px 2px 0;
}

.icon_status_placeholder_warning {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_primary);
    mask-image: url(../images/buttons/icon_status_placeholder_warning.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_status_information {
    cursor: pointer;
    user-select: none;
    background-image: url(../images/buttons/icon_status_information.svg);
    background-size: 20px 20px;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_status_placeholder_information {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_information);
    mask-image: url(../images/buttons/icon_status_placeholder_information.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_status_placeholder_default {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_status_placeholder_default.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_information {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_information.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_information:hover {
    background-color: var(--color_primary);
}

.icon_approve {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_approve.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_approve:hover {
    background-color: var(--color_primary);
}

.icon_phone {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_phone.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_phone:hover {
    background-color: var(--color_primary);
}

.icon_phone_red {
	cursor: pointer;
	user-select: none;
	background-image: url(../images/buttons/icon_phone_red.svg);
	background-size: 20px 20px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 20px;
	min-height: 20px;
	min-width: 20px;
	margin: 2px 6px 2px 0;
}
.icon_phone_green {
	cursor: pointer;
	user-select: none;
	background-image: url(../images/buttons/icon_phone_green.svg);
	background-size: 20px 20px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 20px;
	min-height: 20px;
	min-width: 20px;
	margin: 2px 6px 2px 0;
}
.icon_phone_orange {
	cursor: pointer;
	user-select: none;
	background-image: url(../images/buttons/icon_phone_orange.svg);
	background-size: 20px 20px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 20px;
	min-height: 20px;
	min-width: 20px;
	margin: 2px 6px 2px 0;
}

.icon_keypad {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_keypad.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_keypad:hover {
    background-color: var(--color_primary);
}

.icon_not_used {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_not_used.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_book {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_book.svg);
    mask-repeat: no-repeat;
    mask-size: 20px 20px;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_book:hover {
    background-color: var(--color_primary);
}

.icon_time {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_time.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_time:hover {
    background-color: var(--color_primary);
}

.icon_history {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_history.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_history:hover {
    background-color: var(--color_primary);
}

.icon_reset {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_reset.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_reset:hover {
    background-color: var(--color_primary);
}

.icon_refresh {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_refresh.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_refresh:hover {
    background-color: var(--color_primary);

}

.icon_on_off {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_on_off.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_on_off:hover {
    background-color: var(--color_primary);
}

.icon_delete {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_delete.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_delete:hover {
    background-color: var(--color_negative);
    opacity: 0.8;
}

.icon_share {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_share.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_share:hover {
    background-color: var(--color_primary);
}

.icon_edit {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_edit.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_edit:hover {
    background-color: var(--color_primary);
}

.icon_copy {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_copy_72x24.svg);
    mask-size: 60px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
    position: relative;
}
.icon_copy:hover {
    background-color: var(--color_primary);
}
.icon_copy:active {
    mask-position: -40px 0;
}

.icon_copy_small {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_copy_small_72x24.svg);
    mask-size: 60px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
    position: relative;
}
.icon_copy_small:hover {
    background-color: var(--color_primary);
}
.icon_copy_small:active {
    mask-position: -40px 0;
}

.icon_dataprotection_save {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_positive);
    mask-image: url(../images/buttons/icon_dataprotection_save.svg);
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 18px!important;
    width: 18px;
    min-height: 18px;
    min-width: 18px;
}
.icon_dataprotection_unsave {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_negative);
    mask-image: url(../images/buttons/icon_dataprotection_unsave.svg);
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 18px!important;
    width: 18px;
    min-height: 18px;
    min-width: 18px;
    opacity: 0.8;
}

.icon_save {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_save2.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_save:hover {
    background-color: var(--color_primary);
}

.icon_email {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_email.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_email:hover {
    background-color: var(--color_primary);
}

.icon_secure {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_negative);
    mask-image: url(../images/buttons/icon_secure_72x24.svg);
    mask-size: 60px 20px;
    mask-position: -40px 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
    opacity: 0.8;
}

.icon_unsecure {
	cursor: pointer;
	user-select: none;
	background-color: var(--color_icon);
	mask-image: url(../images/buttons/icon_secure_72x24.svg);
	mask-size: 60px 20px;
	mask-position: 0 0;
	mask-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 20px;
	min-height: 20px;
	min-width: 20px;
	margin: 2px 6px 2px 0;
}
.icon_unsecure:hover {
	background-color: var(--color_negative);
	opacity: 0.8;
}

.icon_search {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_search.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_search:hover {
    background-color: var(--color_primary);
}

.icon_open_new_tab_window {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_open_new_tab_window.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_open_new_tab_window:hover {
    background-color: var(--color_primary);
}

.icon_download {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_download.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_download:hover {
    background-color: var(--color_primary);
}

.icon_upload {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_upload.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_upload:hover {
    background-color: var(--color_primary);
}

.icon_customize {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_customize.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_customize:hover {
    background-color: var(--color_primary);
}

.icon_password_hide{
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_password_hide.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_password_hide:hover {
    background-color: var(--color_primary);
}

.icon_password_show {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_password_show.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_password_show:hover {
    background-color: var(--color_primary);
}

.icon_add {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_add.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_add:hover {
    background-color: var(--color_primary);
}

.icon_remove {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_remove.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_remove:hover {
    background-color: var(--color_primary);
}

.icon_archive {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_archive.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_archive:hover {
    background-color: var(--color_primary);
}

.icon_unarchive {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_unarchive.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_unarchive:hover {
    background-color: var(--color_primary);
}

.icon_folder {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_folder.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_folder:hover {
    background-color: var(--color_primary);
}

.icon_menu_expand {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_menu_expand.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_menu_expand:hover {
    background-color: var(--color_primary);
}

.icon_menu_reduce {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_menu_reduce.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_menu_reduce:hover {
    background-color: var(--color_primary);
}

.icon_filter {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_filter2.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_filter:hover {
    background-color: var(--color_primary);
}

.icon_filter_active {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_primary);
    mask-image: url(../images/buttons/icon_filter2_active.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_tiles {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_tiles.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_tiles:hover {
    background-color: var(--color_primary);
}

.icon_puzzle {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_puzzle.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_puzzle:hover {
    background-color: var(--color_primary);
}

.icon_api {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_api.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_api:hover {
    background-color: var(--color_primary);
}

.icon_devices {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_devices.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_devices:hover {
    background-color: var(--color_primary);
}

.icon_grouping {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_grouping.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_grouping:hover {
    background-color: var(--color_primary);
}

.icon_weight {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_weight.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_weight:hover {
    background-color: var(--color_primary);
}

.icon_report {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_report.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_report:hover {
    background-color: var(--color_primary);
}

.icon_note {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_note.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_note:hover {
    background-color: var(--color_primary);
}

.icon_show_details {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_show_details.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_show_details:hover {
    background-color: var(--color_primary);
}

.icon_coding {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_coding.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_coding:hover {
    background-color: var(--color_primary);
}

.icon_graphics {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_graphics.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_graphics:hover {
    background-color: var(--color_primary);
}

.icon_print {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_print.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_print:hover {
    background-color: var(--color_primary);
}

.icon_order_ascending {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_order_ascending.svg);
    mask-size: 14px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 14px;
    min-height: 20px;
    min-width: 14px;
    margin: 2px 6px 2px 0;
}
.icon_order_ascending:hover {
    background-color: var(--color_primary);
}

.icon_order_ascending_white {
	cursor: pointer;
	user-select: none;
	background-color: var(--color_light);
	mask-image: url(../images/buttons/icon_order_ascending_white.svg);
	mask-size: 14px 20px;
	mask-position: 0 0;
	mask-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 14px;
	min-height: 20px;
	min-width: 14px;
	margin: 2px 6px 2px 0;
}
.icon_order_ascending_white:hover {
	background-color: var(--color_primary);
}

.icon_order_descending {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_order_descending.svg);
    mask-size: 14px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 14px;
    min-height: 20px;
    min-width: 14px;
    margin: 2px 6px 2px 0;
}
.icon_order_descending:hover {
    background-color: var(--color_primary);
}

.icon_order_descending_white {
	cursor: pointer;
	user-select: none;
	background-color: var(--color_light);
	mask-image: url(../images/buttons/icon_order_descending_white.svg);
	mask-size: 14px 20px;
	mask-position: 0 0;
	mask-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 14px;
	min-height: 20px;
	min-width: 14px;
	margin: 2px 6px 2px 0;
}
.icon_order_descending_white:hover {
	background-color: var(--color_primary);
}

.icon_text_expand {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_text_expand.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_text_expand:hover {
    background-color: var(--color_primary);
}

.icon_text_reduce {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_text_reduce.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_text_reduce:hover {
    background-color: var(--color_primary);
}

.icon_collapse {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_collapse.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_collapse:hover {
    background-color: var(--color_primary);
}

.icon_unfold {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_unfold_48x24.svg);
    mask-size: 40px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_unfold:hover {
    background-color: var(--color_primary);
}

.icon_and_condition {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_and_condition.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_and_condition:hover {
    background-color: var(--color_primary);
}

.icon_or_condition {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_or_condition.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_or_condition:hover {
    background-color: var(--color_primary);
}

.icon_switch_horizontal {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_switch_horizontal.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_switch_horizontal:hover {
    background-color: var(--color_primary);
}

.icon_switch_vertical {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_switch_vertical.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_switch_vertical:hover {
    background-color: var(--color_primary);
}

.icon_switch_all_directions {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_switch_all_directions.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_switch_all_directions:hover {
    background-color: var(--color_primary);
}

.icon_drag_drop {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_drag_drop.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_drag_drop:hover {
    background-color: var(--color_primary);
}

.icon_drag_drop_green {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_positive);
    mask-image: url(../images/buttons/icon_drag_drop_green.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_drag_drop_green:hover {
    background-color: var(--color_positive);
}

.icon_open_context_menu {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_open_context_menu.svg);
    mask-size: 12px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 12px;
    min-height: 20px;
    min-width: 12px;
    margin: 2px 0 2px 2px;
}
.icon_open_context_menu:hover {
    background-color: var(--color_primary);
}

.icon_burgermenu {
    cursor: pointer;
    user-select: none;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_burgermenu.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_burgermenu:hover {
    background-color: var(--color_primary);
}

.icon_change_order_manually {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_change_order_manually.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_change_order_manually:hover {
    background-color: var(--color_primary);
}

.icon_dbg {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_dbg.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_translate {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_translate2.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_translate:hover {
    background-color: var(--color_primary);
}

.icon_translate_code {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_translate_code.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_translate_code:hover {
    background-color: var(--color_primary);
}

.icon_date {
    cursor: pointer;
    user-select: none;
    background-color: #898995; /* Icon-Farbe muss hier als hex-Wert rein, da im Cati Bereich die general_edit.css nicht geladen wird */
    mask-image: url(../images/buttons/icon_date.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_date:hover {
    background-color: #F47920; /* Icon-Farbe muss hier als hex-Wert rein, da im Cati Bereich die general_edit.css nicht geladen wird */
}

.icon_arrow_button_left {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_arrow_button_left.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_button_left:hover {
    background-color: var(--color_primary);
}

.icon_arrow_button_right {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_arrow_button_right.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_button_right:hover {
    background-color: var(--color_primary);
}

.icon_arrow_button_left_double {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_arrow_button_left_double.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_button_left_double:hover {
    background-color: var(--color_primary);
}

.icon_arrow_button_left_to_start {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_arrow_button_left_to_start.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_button_left_to_start:hover {
    background-color: var(--color_primary);
}

.icon_arrow_button_right_double {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_arrow_button_right_double.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_button_right_double:hover {
    background-color: var(--color_primary);
}

.icon_arrow_button_right_to_end {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_arrow_button_right_to_end.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_button_right_to_end:hover {
    background-color: var(--color_primary);
}

.icon_arrow_left {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_arrow_left.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_left:hover {
    background-color: var(--color_primary);
}

.icon_arrow_right {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_arrow_right.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_right:hover {
    background-color: var(--color_primary);
}

.icon_arrow_left_white {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_light);
    mask-image: url(../images/buttons/icon_arrow_left_white.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_left_white:hover {
    background-color: var(--color_primary);
}

.icon_arrow_right_white {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_light);
    mask-image: url(../images/buttons/icon_arrow_right_white.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_right_white:hover {
    background-color: var(--color_primary);
}

.icon_arrow_bottom {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_arrow_bottom.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_bottom:hover {
    background-color: var(--color_primary);
}

.icon_arrow_top {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_arrow_top.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_top:hover {
    background-color: var(--color_primary);
}

.icon_arrow_bottom_white {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_light);
    mask-image: url(../images/buttons/icon_arrow_bottom_white.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_bottom_white:hover {
    background-color: var(--color_primary);
}

.icon_arrow_top_white {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_light);
    mask-image: url(../images/buttons/icon_arrow_top_white.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_arrow_top_white:hover {
    background-color: var(--color_primary);
}

.icon_go_to_left {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_go_to_left.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_go_to_left:hover {
    background-color: var(--color_primary);
}

.icon_go_to_right {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_go_to_right.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_go_to_right:hover {
    background-color: var(--color_primary);
}

.icon_go_to_up {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_go_to_up.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_go_to_up:hover {
    background-color: var(--color_primary);
}

.icon_go_to_down {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_go_to_down.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_go_to_down:hover {
    background-color: var(--color_primary);
}

.icon_navigation_arrow_right {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_navigation_arrow_right.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_navigation_arrow_right_white {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_light);
    mask-image: url(../images/buttons/icon_navigation_arrow_right_white.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_plus {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_plus.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_plus:hover {
    background-color: var(--color_primary);
}

.icon_minus {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_minus.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_minus:hover {
    background-color: var(--color_primary);
}

.icon_cancel {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_cancel.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_cancel:hover {
    background-color: var(--color_primary);
}

.icon_cancel_white {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_light);
    mask-image: url(../images/buttons/icon_cancel_white.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_cancel_white:hover {
    background-color: var(--color_primary);
}

.icon_minimize {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_minimize.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_minimize:hover {
    background-color: var(--color_primary);
}

.icon_maximize {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_maximize.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_maximize:hover {
    background-color: var(--color_primary);
}

.icon_shrink {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_shrink.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_shrink:hover {
    background-color: var(--color_primary);
}

.icon_ai {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_ai.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_ai:hover {
    background-color: var(--color_primary);
}

.icon_ai_white {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_light);
    mask-image: url(../images/buttons/icon_ai_white.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}

.icon_pdf {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_pdf.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_pdf:hover {
    background-color: var(--color_primary);
}

.icon_doc {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_doc.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_doc:hover {
    background-color: var(--color_primary);
}

.icon_xml {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_xml.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_xml:hover {
    background-color: var(--color_primary);
}

.icon_csv {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_csv.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_csv:hover {
    background-color: var(--color_primary);
}

.icon_zip {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_zip.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_zip:hover {
    background-color: var(--color_primary);
}

.icon_sps {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_sps.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_sps:hover {
    background-color: var(--color_primary);
}

.icon_spss {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_spss.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_spss:hover {
    background-color: var(--color_primary);
}

.icon_html {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_html.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_html:hover {
    background-color: var(--color_primary);
}

.icon_xls {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_xls.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_xls:hover {
    background-color: var(--color_primary);
}

.icon_txt {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_txt.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_txt:hover {
    background-color: var(--color_primary);
}

.icon_ppt {
    cursor: pointer;
    user-select: none;
    background-color: var(--color_icon);
    mask-image: url(../images/buttons/icon_ppt.svg);
    mask-size: 20px 20px;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 2px 6px 2px 0;
}
.icon_ppt:hover {
    background-color: var(--color_primary);
}

.icon_menu_logout {
    cursor: pointer;
    user-select: none;
    background-image: url(../images/buttons/icon_menu_logout.svg);
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 24px!important;
    width: 24px;
    min-height: 24px;
    min-width: 24px;
    margin: 4px;
}
.icon_menu_questions {
    cursor: pointer;
    user-select: none;
    background-image: url(../images/buttons/icon_menu_questions.svg);
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 24px!important;
    width: 24px;
    min-height: 24px;
    min-width: 24px;
    margin: 4px;
}
.icon_menu_customize {
    cursor: pointer;
    user-select: none;
    background-image: url(../images/buttons/icon_menu_customize.svg);
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 24px!important;
    width: 24px;
    min-height: 24px;
    min-width: 24px;
    margin: 4px;
}

/* Große Icons für den Multimedia-Upload */
.icon_add_document {
    cursor: pointer;
    user-select: none;
    background-image: url(../images/buttons/icon_add_document_200x100.svg);
    background-size: 200px 100px;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 100px;
    width: 100px;
    min-height: 100px;
    min-width: 100px;
    margin: 2px 6px 2px 0;
}
.icon_add_document:hover, .drop-zone-single-file:hover .icon_add_document {
    background-position: -100px 0;
}

.icon_add_image {
    cursor: pointer;
    user-select: none;
    background-image: url(../images/buttons/icon_add_image_200x100.svg);
    background-size: 200px 100px;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 100px;
    width: 100px;
    min-height: 100px;
    min-width: 100px;
    margin: 2px 6px 2px 0;
}
.icon_add_image:hover, .drop-zone-single-file:hover .icon_add_image {
    background-position: -100px 0;
}

.icon_add_sound{
    cursor: pointer;
    user-select: none;
    background-image: url(../images/buttons/icon_add_sound_200x100.svg);
    background-size: 200px 100px;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 100px;
    width: 100px;
    min-height: 100px;
    min-width: 100px;
    margin: 2px 6px 2px 0;
}
.icon_add_sound:hover, .drop-zone-single-file:hover .icon_add_sound {
    background-position: -100px 0;
}

.icon_add_video{
    cursor: pointer;
    user-select: none;
    background-image: url(../images/buttons/icon_add_video_200x100.svg);
    background-size: 200px 100px;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 100px;
    width: 100px;
    min-height: 100px;
    min-width: 100px;
    margin: 2px 6px 2px 0;
}
.icon_add_video:hover, .drop-zone-single-file:hover .icon_add_video {
    background-position: -100px 0;
}

.icon_disabled {
    opacity: 0.25;
    pointer-events: none;
}
.icon_disabled:hover {
    background-position: 0 0;
}