[data-luno="theme-cyan"],
[data-luno=theme-blue] {
	--primary-color: #00B2B0;
    --primary-light: #B3E8E7;
    --primary-lighter: #CCF0EF;
    --primary-lightest: #E6F7F7;
    --primary-dark: #00A09E;
    --primary-darker: #007D7B;
    --primary-darkest: #005958;
	--secondary-color: 	#005958;

    --gray-0: #fff;
    --gray-50: #EEF2F6;
    --gray-100: #D1DBE6;
    --gray-200: #B3C4D6;
    --gray-300: #95ADC6;
    --gray-400: #7393B3;
    --gray-500: #5980A6;
    --gray-600: #496988;
    --gray-700: #39526A;
    --gray-800: #293B4C;
    --gray-900: #19242E;
    --gray-950: #090D11;

    --color-success: #2E8B57;
    --color-danger: #D64545;
    --color-warning: #F0A500;
    --color-info: #0096C7;
    --color-neutral: #6C757D;

    --neutral-lightest: #E9ECEF;
    --neutral-lighter: #CED4DA;
    --neutral-light: #ADB5BD;
    --neutral: #6C757D;
    --neutral-dark: #495057;
    --neutral-darker: #343A40;
    --neutral-darkest: #212529;
}


img{
    filter: none;
}

#frm_login img{
    height: 104px;
}

.wrapper.auth{
    background: linear-gradient(72deg, rgba(23, 230, 226, 1) 0%, rgba(0, 178, 176, 1) 39%, rgba(0, 137, 120, 1) 100%);
}
.wrapper .page-body.auth{
    min-height: 100vh !important;
    height: auto !important;
    background: linear-gradient(72deg, rgba(23, 230, 226, 1) 0%, rgba(0, 178, 176, 1) 39%, rgba(0, 137, 120, 1) 100%);
}
.wrapper .page-body.auth::after{
    opacity: 0.1 !important;
}

.wrapper .page-body.auth .form-label {
    font-weight: bold;
}

.btn.btn-primary{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.page-body {
    margin-top: 0 !important;
}

/* =======================================
    SideBar Left Menu
========================================== */
.layout-1 .sidebar {
    background: #008978;
    background: linear-gradient(90deg, rgba(0, 137, 120, 1) 0%, rgba(3, 79, 77, 1) 50%);
}

.layout-1 .sidebar .title-text{
    color: #fff;
}
.layout-1 .sidebar .menu-list{
    border: none;
    background: rgba(182, 255, 254, 0.9);
    padding: 6px 12px;
}
.layout-1 .sidebar .menu-list>li{
    border-bottom: none;
    margin-bottom: 2px;
}
.layout-1 .sidebar .menu-list .sub-menu{
    padding-left: 41px;
}
.layout-1 .sidebar .menu-list .sub-menu::before{
    background-color: var(--primary-dark);
}

.layout-1 .wrapper {
    background: var(--gray-50);
}

.layout-1 .wrapper .page-header {
    background: var(--gray-300);
}
.navbar {
    padding: 0;
}
.layout-1 .wrapper .page-body{
    min-height: 500px;
}

.page-toolbar{
    padding-bottom: 0 !important;
}
.layout-1 .sidebar .menu-list .ms-link::before{
    width: 7px;
    height: 7px;
    border-radius: 0;
    transform: rotate(45deg);
    left: -34px;
}
.layout-1 .sidebar .menu-list .m-link{
    color: var(--secondary-color);
    font-weight: 600;
    transition: all 0.4s;
    font-size: 14px;
    padding: 6px 0;
}
.layout-1 .sidebar .menu-list .ms-link{
    font-size: 14px;
}
.layout-1 .sidebar .menu-list .m-link.active,
.layout-1 .sidebar .menu-list .ms-link.active{
    font-weight: 800;
    color: #000;
    /* background: var(--primary-dark);
    padding: 10px;
    border-radius: 16px; */
}
.layout-1 .sidebar .menu-list a[aria-expanded=true].m-link{
    font-weight: bold;
}


.form-label {
    margin-bottom: .25rem;
}

.breadcrumb {
    font-size: 0.875rem;
}

/* =======================================
    Table
========================================== */
.dataTables_length,
div.dataTables_wrapper div.dataTables_filter label {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
}
div.dataTables_wrapper div.dataTables_info {
    font-size: 0.75rem;
}
.page-item .page-link{
    font-size: 0.75rem;
}

.page-item.disabled .page-link{
    color: var(--gray-500) !important ;
    background: var(--gray-50) !important;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    font-size: 0.65rem;
    line-height: 18px;
    text-transform: uppercase;
    font-weight: bold;
}

.table .text-success,
.table .text-danger {
    display: inline-block;
    background: var(--color-success);
    color: #fff !important;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 800;
}

.table .text-danger{
    background: var(--color-danger);
    white-space: nowrap;
}

.table .text-success .fa-check,
.table .text-danger .fa-remove {
    display: none;
}

.ac_section .btn{
    padding: 2px 6px;
    font-size: 13px;
    border-color: var(--gray-500) !important;
    color: var(--gray-500) !important;
}
.ac_section .btn:hover{
    background: var(--gray-500) !important;
    border-color: var(--gray-500) !important;
    color: var(--gray-0) !important;
}
.table-hover>tbody>tr:hover>*{
    --bs-table-accent-bg: var(--gray-50);
}
.table.dataTable.table-striped>tbody>tr.odd{
    --bs-table-accent-bg: var(--gray-50) !important;
}
.icon-text-span i{
    color: var(--gray-300) !important;
}

.table tr td input[type="checkbox"]{
    margin-right: 6px;
}
.page-toolbar .btn-primary,
.page-toolbar .btn-warning,
.page-toolbar .btn-secondary {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 0 4px !important;
}

.page-toolbar .btn-primary:hover {
    background: var(--primary-dark) !important;
}
.table tr td img {
    border-radius: 4px !important;
}

.page-body > div > h5{
    margin-top: 16px;
}

/* =======================================
    Modal and Popup
========================================== */

.modal .modal-header{
    background-color: var(--gray-50);
}

.swal2-container.swal2-center>.swal2-popup {
    padding: 40px;
}
.swal2-title {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    padding: 0 !important;
}

.swal2-actions button.swal2-styled {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    font-weight: 700;
}

.modal-body .btn-success{
    background-color: var(--primary-color);
}
.modal-body .btn-danger {
    background-color: var(--gray-300);
    border-color: var(--gray-300) !important;
}
.swal2-styled.swal2-cancel{
    background-color: var(--gray-300) !important;
}
.modal-body .btn,
.modal-footer .btn {
    text-transform: uppercase;
    font-weight: 700;
}

.modal .modal-title{
    font-weight: 700;
}

/* =======================================
    Form
========================================== */
.form-label,
.col-form-label {
    font-weight: 700;
}
.btn{
    text-transform: uppercase;
    font-weight: 700;
}
.btn-primary{ background: var(--primary-color); border-color: var(--primary-color);  }
.btn-secondary{ background: var(--gray-300); border-color: var(--gray-300) }
.btn-danger { background: var(--gray-300); border-color: var(--gray-300) }
.page-toolbar .btn-primary i{
    margin-right: 4px;
}

/* =======================================
    Calendar
========================================== */
#calendar,
#beats {
    background: #fff;
    padding: 20px;
    margin-bottom: 24px;
    border-radius: 8px;
}
.fc-toolbar-title,
#beats h3{
    font-weight: bold;
}
.fc-col-header-cell{
    background: var(--primary-lightest) !important;
}
.fc-h-event{
    background: var(--primary-color) !important;
}
.fc .fc-button-primary:disabled{
    background: var(--gray-400) !important;
}
.fc .fc-button-primary{
    background: var(--primary-dark) !important;
}
.beat-item{
    background: var(--gray-500) !important;
}
/* =======================================
    Others
========================================== */

.layout-1 .sidebar .menu-list .m-link>i {
    font-size: 24px;
}

.ac_section{
    white-space: nowrap;
}

.filter-datagrid{
    background: var(--gray-50);
    padding-top: 6px;
    padding-bottom: 12px;
    margin-top: -10px;
    border-radius: 6px;
}
.filter-datagrid .form-label{
    font-size: 0.65rem;
    text-transform: uppercase;
}

.select2-container .select2-selection{
    padding: 0.25rem 0.5rem;
}

.filter-datagrid .btn_submit{
    margin-top: 4px !important;
    padding: 0.25rem 0.5rem;
}

.filter-datagrid .btn-success {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}