/* STYLING ICONS */

/* Main Toolbar */
.x-main-toolbar-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 16px;
    min-height: 16px;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    margin-right: 2px !important;
    margin-left: 2px !important;
}
.x-dropdown-menu-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 16px;
    min-height: 16px;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    margin: auto 8px auto 0px !important;
    color: currentColor !important;
}
.menu-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}
.x-task-priority-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 16px;
    min-height: 16px;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    color: currentColor;

    display: inline-block;
    position: relative;
    top: 5px;
    left: 2px;
}

.x-card-icon {
    width: 48px;
    height: 48px;
    min-width: 24px;
    min-height: 24px;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;

    display: flex;
    position: relative;
    margin: auto;
    margin-top: 15px;
}


/* ICONS THEMSELVES */

/* Actions */
.x-action-icon-add {
    mask-image: url("icons/actions/add.svg");
    -webkit-mask-image: url("icons/actions/add.svg");
}
.x-action-icon-add-simple {
    mask-image: url("icons/actions/add_simple.svg");
    -webkit-mask-image: url("icons/actions/add_simple.svg");
}
.x-action-icon-confirm {
    mask-image: url("icons/actions/confirm.svg");
    -webkit-mask-image: url("icons/actions/confirm.svg");
}
.x-action-icon-save {
    mask-image: url("icons/actions/save.svg");
    -webkit-mask-image: url("icons/actions/save.svg");
}
.x-action-icon-edit {
    mask-image: url("icons/actions/edit.svg");
    -webkit-mask-image: url("icons/actions/edit.svg");
}
.x-action-icon-cancel {
    mask-image: url("icons/actions/cancel.svg");
    -webkit-mask-image: url("icons/actions/cancel.svg");
}
.x-action-icon-cancel-simple {
    mask-image: url("icons/actions/cancel_simple.svg");
    -webkit-mask-image: url("icons/actions/cancel_simple.svg");
}
.x-action-icon-delete {
    mask-image: url("icons/actions/delete.svg");
    -webkit-mask-image: url("icons/actions/delete.svg");
}


/* General */
.x-general-icon-table {
    mask-image: url("icons/general/table.svg");
    -webkit-mask-image: url("icons/general/table.svg");
}
.x-general-icon-cards {
    mask-image: url("icons/general/cards.svg");
    -webkit-mask-image: url("icons/general/cards.svg");
}
.general-icon-settings {
    mask-image: url("icons/general/settings.svg");
    -webkit-mask-image: url("icons/general/settings.svg");
}
.x-general-icon-account {
    mask-image: url("icons/general/account.svg");
    -webkit-mask-image: url("icons/general/account.svg");
}
.x-general-icon-logout {
    mask-image: url("icons/general/logout.svg");
    -webkit-mask-image: url("icons/general/logout.svg");
}

/* Task Priorities */
.x-task-priority-icon-critical {
    mask-image: url("icons/tasks/priority_critical.svg");
    -webkit-mask-image: url("icons/tasks/priority_critical.svg");
    color: red !important;
}
.x-task-priority-icon-urgent {
    mask-image: url("icons/tasks/priority_urgent.svg");
    -webkit-mask-image: url("icons/tasks/priority_urgent.svg");
    color: deeppink !important;
}
.x-task-priority-icon-high {
    mask-image: url("icons/tasks/priority_high.svg");
    -webkit-mask-image: url("icons/tasks/priority_high.svg");
    color: orange !important;
}
.x-task-priority-icon-medium {
    mask-image: url("icons/tasks/priority_medium.svg");
    -webkit-mask-image: url("icons/tasks/priority_medium.svg");
    color: tan !important;
}
.x-task-priority-icon-low {
    mask-image: url("icons/tasks/priority_low.svg");
    -webkit-mask-image: url("icons/tasks/priority_low.svg");
    color: green !important;
}

/* Toolbar */
.x-toolbar-icon-contextmenu {
    mask-image: url("icons/toolbar/contextmenu.svg");
    -webkit-mask-image: url("icons/toolbar/contextmenu.svg");
}
.x-toolbar-icon-displayview {
    mask-image: url("icons/toolbar/displayview.svg");
    -webkit-mask-image: url("icons/toolbar/displayview.svg");
}
.x-toolbar-icon-filter {
    mask-image: url("icons/toolbar/filter.svg");
    -webkit-mask-image: url("icons/toolbar/filter.svg");
}
.x-toolbar-icon-back {
    mask-image: url("icons/toolbar/back.svg");
    -webkit-mask-image: url("icons/toolbar/back.svg");
}

/* Menu */
.menu-icon-dashboard {
    mask-image: url("icons/main_nav_menu/icon_dashboard.svg");
    -webkit-mask-image: url("icons/main_nav_menu/icon_dashboard.svg");
}
.menu-icon-home {
    mask-image: url("icons/main_nav_menu/home.svg");
    -webkit-mask-image: url("icons/main_nav_menu/home.svg");
}
.menu-icon-admin {
    mask-image: url("icons/general/icon_admin.svg");
    -webkit-mask-image: url("icons/general/icon_admin.svg");
}
.menu-icon-invoice {
    mask-image: url("icons/main_nav_menu/invoice.svg");
    -webkit-mask-image: url("icons/main_nav_menu/invoice.svg");
}
.menu-icon-bank-transactions {
    mask-image: url("icons/main_nav_menu/bank_transactions.svg");
    -webkit-mask-image: url("icons/main_nav_menu/bank_transactions.svg");
}
.menu-icon-times {
    mask-image: url("icons/main_nav_menu/times.svg");
    -webkit-mask-image: url("icons/main_nav_menu/times.svg");
}
.menu-icon-budgets {
    mask-image: url("icons/main_nav_menu/budgets.svg");
    -webkit-mask-image: url("icons/main_nav_menu/budgets.svg");
}
.menu-icon-tasks {
    mask-image: url("icons/main_nav_menu/tasks.svg");
    -webkit-mask-image: url("icons/main_nav_menu/tasks.svg");
}
.menu-icon-customers {
    mask-image: url("icons/main_nav_menu/customers.svg");
    -webkit-mask-image: url("icons/main_nav_menu/customers.svg");
}