/* page content */

.page-content {
    transition: all 350ms ease !important;
    min-height: 100vh !important;
    box-shadow: 0 15px 25px 1px rgb(0 0 0 / 10%);
}

.theme-light {
    background-image: url(../images/wa-bg.png);
    background-attachment: fixed;
    background-color: #f0f0f0 !important;
}

.theme-light .page-content {
    /* background-color: #f0f0f0; */
    background-image: linear-gradient(to bottom, rgba(240,240,240,1), rgba(240,240,240,0));
}

.theme-dark {
    background-image: url(../images/wa-bg-dark.png);
    background-attachment: fixed;
    background-color: #1b1d21 !important;
}

.theme-dark #page {
    background-color: unset;
}

.theme-dark .page-content {
    /* background-color: #1b1d21; */
    background-image: linear-gradient(to bottom, rgba(27,29,33,1), rgba(27,29,33,.5)) !important;
}

/* menu, header, footer */

.menu,
.header.header-fixed,
#footer-bar {
    margin-left: auto;
    margin-right: auto;
}

.header.header.header-fixed .content {
    margin: 10px 15px 10px 15px !important;
}

.menu {
    max-width: 480px;
}

[data-menu-width="cover"] {
    max-width: 100% !important;
}

/* .header.header-fixed {
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
} */

.alert span {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

/* checkbox */

.form-check.icon-check .form-check-label {
    line-height: 1.3;
}

.form-check-input {
    width: 1px;
    height: 1px;
    border: transparent !important;
}

.icon-check input {
    transform: translateX(30px);
}

/* utility */

.w-80 {
    width: 80% !important;
}

/* input-style */

.card-style .content .input-style:last-child {
    margin-bottom: 0 !important;
}

/* table */

.theme-dark table {
    border-color: rgba(255, 255, 255, 0.05);
    border: inherit;
}

.theme-dark .table tr.even td,
.theme-dark table,
.theme-dark td {
    background-color: transparent !important;
    color: #6c6c6c !important;
}

.theme-dark table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.95);
}

.theme-dark table.dataTable.table-hover>tbody>tr:hover>* {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.925);
}