:root {
    --theme-color: #c7e2e1;
    --primary-color: #e2a62e;
    --black-color: #3d3d3d;
}

.btn {
    line-height: 1.8;
    border-radius: 15px !important;
    font-weight: bold;
}
.btn-default {
    border-width: 2px;
    border-color: var(--primary-color) !important;
}
.btn-primary {
    border: 2px solid var(--primary-color)!important;
    background-color: #ffd487!important;
    color: #333!important;
}
.form-control {
    line-height: 1.8;
    border-radius: 20px !important;
    border: 2px solid var(--primary-color)!important;
    height: 48px;
}

/* Breadcrumb */
.page-bar {
    padding: 8px 10px;
    min-height: 55px;
    box-shadow: 0 7px 29px 0 rgb(100 100 111 / 20%);
    background-color: white !important;
    margin: 10px 0;
    border-radius: 25px !important;
    display: flex;
    align-items: center;
}
.page-bar .page-breadcrumb > li > a, .page-bar .page-breadcrumb > li > span, .page-title {
    color: var(--black-color) !important;
    font-weight: 700 !important;
}

/* datatable */
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    border-top: 2px solid var(--theme-color) !important;
}
.table>thead>tr>th {
    border-bottom: 2px solid var(--theme-color) !important;
}
table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting:after {
    color: #e2a62e;
    opacity: .7 !important;
}
table.dataTable thead .sorting_desc:after {
    color: #e2a62e;
    opacity: 1;
}
.action-group {
    display: flex;
}
.action-group a{
    margin-right: 5px;
}
.portlet.light.bordered {
    border: 1px solid var(--primary-color) !important;
}

/* Modal */
.modal-content {
    border-radius: 15px !important;
}
.modal-title {
    font-weight: 700;
}
.modal .modal-header {
    border-bottom: 1px solid var(--theme-color) !important;
}
.modal-footer {
    border-top: 1px solid var(--theme-color) !important;
}

/* loading */
.btn-loader {
    position: relative;
    opacity: 0.65;
    cursor: progress;
}
.btn-loader::after {
    content: "";
    position: relative;
    top: 4px;
    left: -5px;
    display: block;
    border: 3px solid #ffffff;
    border-radius: 50%;
    border-top: 3px solid #040404;
    width: 15px;
    height: 15px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    margin: 0 auto;
    float: left;
}
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
#save-order-display {
    margin-left: 5px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}