button[aria-label="Add"] .e-tbar-btn-text, button[aria-label="Add"] .e-add {
    font-weight: bolder !important;
    color: darkgreen !important;
}

button[aria-label="Delete"] .e-tbar-btn-text, button[aria-label="Delete"] .e-delete {
    font-weight: bolder !important;
    color: darkred !important;
}

button[aria-label="Update"] .e-tbar-btn-text, button[aria-label="Update"] .e-update {
    font-weight: bolder !important;
    color: limegreen !important;
}

button[aria-label="Edit"] .e-tbar-btn-text, button[aria-label="Edit"] .e-edit {
    font-weight: bolder !important;
    color: darkblue !important;
}

button[aria-label="Cancel"] .e-tbar-btn-text, button[aria-label="Cancel"] .e-cancel {
    font-weight: bolder !important;
    color: purple !important;
}

button[aria-label="Excel Export"] .e-tbar-btn-text, button[aria-label="Excel Export"] .e-excelexport {
    font-weight: bolder !important;
    color: orangered !important;
}

.e-grid .e-toolbar, .e-grid .e-toolbar .e-toolbar-items {
    background: transparent !important;
}

  
.e-mobile-layout {
    position: relative;
    width: 360px;
    height: 640px;
    margin: auto;
    border: 16px #f4f4f4 solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 36px;
    box-shadow: 0 0px 2px rgb(144 144 144), 0 0px 10px rgb(0 0 0 / 16%);
}

.tailwind-dark .e-mobile-layout,
.material-dark .e-mobile-layout,
.fabric-dark .e-mobile-layout,
.bootstrap-dark .e-mobile-layout,
.bootstrap5-dark .e-mobile-layout {
    border: 16px rgb(255 255 255 / 10%) solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
}

.e-mobile-layout:before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ebebeb;
    border-radius: 10px;
}

.tailwind-dark .e-mobile-layout::before,
.tailwind-dark .e-mobile-layout::after,
.material-dark .e-mobile-layout::before,
.material-dark .e-mobile-layout::after,
.fabric-dark .e-mobile-layout::before,
.fabric-dark .e-mobile-layout::after,
.bootstrap-dark .e-mobile-layout::before,
.bootstrap-dark .e-mobile-layout::after,
.bootstrap5-dark .e-mobile-layout::before,
.bootstrap5-dark .e-mobile-layout::after {
    background: rgb(255 255 255 / 20%);
}

.e-mobile-layout:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -65px;
    transform: translate(-50%, -50%);
    background: #e8e8e8;
    border-radius: 50%;
}

.e-mobile-layout .e-mobile-content {
    overflow: hidden;
    width: 328px;
    height: 100%;
    background: transparent;
    border: 0px solid #dddddd;
}

.highcontrast .e-mobile-layout {
    border: 16px #000000 solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
    box-shadow: -1px 2px white, -2px -2px white, 2px -2px white, 2px 1px white;
}