.ocs-btn-save::before,
.ocs-btn-add::before,
.ocs-btn-delete::before,
.ocs-btn-edit::before,
.ocs-btn-update::before,
.ocs-btn-view::before,
.ocs-btn-print::before,
.ocs-btn-cancel::before,
.ocs-btn-login::before,
.ocs-btn-post::before,
.ocs-btn-void::before {
    font-family: FontAwesome;
    font-size: 16px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    margin-right: 5px;
}

.ocs-btn-save::before {
    content: '\f0c7';
}

.ocs-btn-add::before {
    content: '\f067';
}

.ocs-btn-delete::before {
    content: '\f014';
}

.ocs-btn-edit::before {
    content: '\f040';
}

.ocs-btn-update::before {
    content: '\f00c';
}

.ocs-btn-view::before {
    content: '\f06e';
}

.ocs-btn-print::before {
    content: '\f02f';
}

.ocs-btn-cancel::before {
    content: '\f00d';
}

.ocs-btn-login::before {
    content: '\f02f';
}

.ocs-btn-post::before {
    content: '\f1c7';
}

.ocs-btn-void::before {
    content: '\f1c6';
}

.ocs-btn-save {
    background: #4CAF50;
    color: white;
    /* padding-left: 33px; */
}

.ocs-btn-add {
    background: #03A9F4;
    color: white;
    /* padding-left: 33px; */
}

.ocs-btn-delete {
    background: #FF5722;
    color: white;
    /* padding-left: 33px; */
}

.ocs-btn-edit {
    background: #00bcd4;
    color: white;
    /* padding-left: 33px; */
}

.ocs-btn-update {
    background: #4caf50;
    color: white;
    /* padding-left: 33px; */
}

.ocs-btn-view {
    background: #6c757d;
    color: white;
}

.ocs-btn-print {
    background: #ced4da;
    color: #495057;
}

.ocs-btn-cancel {
    background: #ced4da;
    color: #495057;
}

.ocs-btn-login {
    background: #ced4da;
    color: #495057;
}

.ocs-btn-post {
    background: #17a2b8;
    color: white;
}

.ocs-btn-void {
    background: #FF9800;
    color: white;
}

    .ocs-btn-save.ocs-spin::before,
    .ocs-btn-add.ocs-spin::before,
    .ocs-btn-delete.ocs-spin::before,
    .ocs-btn-edit.ocs-spin::before,
    .ocs-btn-update.ocs-spin::before,
    .ocs-btn-view.ocs-spin::before,
    .ocs-btn-print.ocs-spin::before,
    .ocs-btn-cancel.ocs-spin::before,
    .ocs-btn-login.ocs-spin::before,
    .ocs-btn-post.ocs-spin::before,
    .ocs-btn-void.ocs-spin::before {
        content: '\f1ce';
        animation: fa-spin 1s infinite linear;
        -webkit-animation: fa-spin 1s infinite linear;
    }

    .ocs-btn-save.ocs-spin,
    .ocs-btn-add.ocs-spin,
    .ocs-btn-delete.ocs-spin,
    .ocs-btn-edit.ocs-spin,
    .ocs-btn-update.ocs-spin,
    .ocs-btn-view.ocs-spin,
    .ocs-btn-print.ocs-spin,
    .ocs-btn-cancel.ocs-spin,
    .ocs-btn-login.ocs-spin,
    .ocs-btn-post.ocs-spin,
    .ocs-btn-void.ocs-spin {
        pointer-events: none !important;
        user-select: none !important;
        opacity: .7;
        cursor: progress !important;
    }


/* Waves Ripple */

.ocs-ripple,
.ocs-btn-save,
.ocs-btn-add,
.ocs-btn-delete,
.ocs-btn-edit,
.ocs-btn-update,
.ocs-btn-view,
.ocs-btn-print,
.ocs-btn-cancel,
.ocs-btn-login,
.ocs-btn-post,
.ocs-btn-void {
    position: relative;
    overflow: hidden !important;
}

    .ocs-ripple > .ripple-inner,
    .ocs-btn-save > .ripple-inner,
    .ocs-btn-add > .ripple-inner,
    .ocs-btn-delete > .ripple-inner,
    .ocs-btn-edit > .ripple-inner,
    .ocs-btn-update > .ripple-inner,
    .ocs-btn-view > .ripple-inner,
    .ocs-btn-print > .ripple-inner,
    .ocs-btn-cancel > .ripple-inner,
    .ocs-btn-login > .ripple-inner,
    .ocs-btn-post > .ripple-inner,
    .ocs-btn-void > .ripple-inner {
        position: absolute;
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #ffffff40;
        animation: waves--ripple .5s ease-out;
        -webkit-animation: waves--ripple .5s ease-out;
    }

@keyframes waves--ripple {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}


/*button title left*/

.ocs-head-title .ocs-right .btn {
    margin-left: 5px;
}

    .ocs-head-title .ocs-right .btn:first-child {
        margin-left: 0px;
    }

.ocs-head-title .ocs-left .btn {
    margin-right: 5px;
}

    .ocs-head-title .ocs-left .btn:last-child {
        margin-right: 0px;
    }

.jconfirm .jconfirm-box .jconfirm-buttons button {
    margin-left: 2px;
}


/* ================== Icon Button ======================= */

.ocs-icon-btn-save,
.ocs-icon-btn-add,
.ocs-icon-btn-delete,
.ocs-icon-btn-edit,
.ocs-icon-btn-update,
.ocs-icon-btn-view,
.ocs-icon-btn-print,
.ocs-icon-btn-refresh,
.ocs-icon-btn-post,
.ocs-icon-btn-void,
.ocs-icon-btn-back,
.ocs-icon-btn-search,
.ocs-icon-btn-barcode,
.ocs-icon-btn-custom,
.ocs-icon-btn-code {
    all: unset;
    user-select: none;
    min-height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.ocs-icon-btn-save {
    background: #4CAF50;
    color: white;
}

.ocs-icon-btn-add {
    background: #03A9F4;
    color: white;
}

.ocs-icon-btn-delete {
    background: #FF5722;
    color: white;
}

.ocs-icon-btn-edit {
    background: #00bcd4;
    color: white;
}

.ocs-icon-btn-update {
    background: #4caf50;
    color: white;
}

.ocs-icon-btn-view {
    background: #6c757d;
    color: white;
}

.ocs-icon-btn-print {
    background: #ced4da;
    color: #495057;
}

.ocs-icon-btn-refresh {
    background: #009688;
    color: #f6f7f9;
}

.ocs-icon-btn-post {
    background: #17a2b8;
    color: white;
}

.ocs-icon-btn-void {
    background: #FF9800;
    color: white;
}

.ocs-icon-btn-back {
    background: #E91E63;
    color: white;
}

.ocs-icon-btn-search {
    background: #00bcd4;
    color: white;
}

.ocs-icon-btn-barcode {
    background: #CDDC39;
    color: #607D8B;
}

.ocs-icon-btn-code {
    background: #9E9E9E;
    color: white;
}

    .ocs-icon-btn-save::before,
    .ocs-icon-btn-add::before,
    .ocs-icon-btn-delete::before,
    .ocs-icon-btn-edit::before,
    .ocs-icon-btn-update::before,
    .ocs-icon-btn-view::before,
    .ocs-icon-btn-print::before,
    .ocs-icon-btn-refresh::before,
    .ocs-icon-btn-post::before,
    .ocs-icon-btn-void::before,
    .ocs-icon-btn-back::before,
    .ocs-icon-btn-search::before,
    .ocs-icon-btn-barcode::before,
    .ocs-icon-btn-code::before {
        font-family: FontAwesome;
        font-size: 16px;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        margin-right: 0;
    }

.ocs-icon-btn-save::before {
    content: '\f0c7';
}

.ocs-icon-btn-add::before {
    content: '\f067';
}

.ocs-icon-btn-delete::before {
    content: '\f014';
}

.ocs-icon-btn-edit::before {
    content: '\f040';
}

.ocs-icon-btn-update::before {
    content: '\f00c';
}

.ocs-icon-btn-view::before {
    content: '\f06e';
}

.ocs-icon-btn-print::before {
    content: '\f02f';
}

.ocs-icon-btn-refresh::before {
    content: '\f021';
}

.ocs-icon-btn-post::before {
    content: '\f1c7';
}

.ocs-icon-btn-void::before {
    content: '\f1c6';
}

.ocs-icon-btn-back::before {
    content: '\f00d';
}

.ocs-icon-btn-search::before {
    content: '\f002';
}

.ocs-icon-btn-barcode::before {
    content: '\f02a';
}

.ocs-icon-btn-code::before {
    content: '\f292';
}


/* ============ Spinner ============*/

.ocs-icon-btn-save.ocs-spin::before,
.ocs-icon-btn-add.ocs-spin::before,
.ocs-icon-btn-delete.ocs-spin::before,
.ocs-icon-btn-edit.ocs-spin::before,
.ocs-icon-btn-update.ocs-spin::before,
.ocs-icon-btn-view.ocs-spin::before,
.ocs-icon-btn-print.ocs-spin::before,
.ocs-icon-btn-refresh.ocs-spin::before,
.ocs-icon-btn-post.ocs-spin::before,
.ocs-icon-btn-void.ocs-spin::before,
.ocs-icon-btn-back.ocs-spin::before,
.ocs-icon-btn-search.ocs-spin::before,
.ocs-icon-btn-barcode.ocs-spin::before,
.ocs-icon-btn-code.ocs-spin::before {
    content: '\f1ce';
    animation: fa-spin 1s infinite linear;
    -webkit-animation: fa-spin 1s infinite linear;
}

.ocs-icon-btn-save.ocs-spin,
.ocs-icon-btn-add.ocs-spin,
.ocs-icon-btn-delete.ocs-spin,
.ocs-icon-btn-edit.ocs-spin,
.ocs-icon-btn-update.ocs-spin,
.ocs-icon-btn-view.ocs-spin,
.ocs-icon-btn-print.ocs-spin,
.ocs-icon-btn-refresh.ocs-spin,
.ocs-icon-btn-post.ocs-spin,
.ocs-icon-btn-void.ocs-spin,
.ocs-icon-btn-back.ocs-spin,
.ocs-icon-btn-search.ocs-spin,
.ocs-icon-btn-barcode.ocs-spin,
.ocs-icon-btn-code.ocs-spin {
    pointer-events: none !important;
    user-select: none !important;
    opacity: .7;
    cursor: progress !important;
}

button.my-icon-btn {
    all: unset;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .25s ease;
    box-sizing: border-box;
    border-radius: 50px;
}

    button.my-icon-btn:hover {
        background: #e7e8ea;
    }

    button.my-icon-btn i {
        color: #afb4bd;
        transition: all .2s ease;
    }

.fa-edit {
    transform: translate(2px, 1px);
}

button.my-icon-btn:hover i {
    color: #6c727b;
}