body {
    --color-1: 255, 247, 204; /* gold-1 */
    --color-2: 255, 244, 179; /* gold-2 */
    --color-3: 179, 152, 0; /* gold-3 */
    --color-4: 145, 113, 7; /* gold-4 */
    --color-5: 96, 76, 6; /* gold-5 */
    --color-6: 48, 38, 3; /* gold-6 */
    --color-7: 248, 249, 250; /* light-1 */
    --color-8: 240, 242, 244; /* light-2 */
    padding: 0;
    background-color: rgb(var(--color-8));
    color: rgb(var(--color-6));
}
.wrapper-page,
.wrapper-page .account-bg {
    margin-top: 0;
    margin-bottom: 0;
}
.wrapper-page {
    padding: 2rem 1rem;
}
.card-box {
    background-color: #fff;
}
.account-bg .card-box {
    background-color: rgb(var(--color-2));
}
body.fixed-left .side-menu.left,
#wrapper.enlarged .side-menu.left {
    background-color: rgb(var(--color-7));
}
.topbar .topbar-left {
    background-color: rgb(var(--color-1));
}
.topbar .topbar-left {
    border-bottom: 1px solid rgb(var(--color-3));
}
.page-title-box {
    background-color: rgb(var(--color-7));
}
.content .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}
.modal-header {
    background-color: rgb(var(--color-2));
}
#sidebar-menu ul > li > a {
    color: rgba(var(--color-6), .8) !important;
}
#sidebar-menu ul > li > a:hover,
#sidebar-menu ul > li > a:focus {
    background-color: rgba(var(--color-5), .125) !important;
}
#sidebar-menu > ul > li > a:active,
#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li > a.subdrop {
    background-color: rgba(var(--color-5), .9) !important;
}
#sidebar-menu li > ul > li.active > a,
#sidebar-menu li > ul > li > a:active {
    background-color: rgba(var(--color-5), .6) !important;
}
#sidebar-menu > ul > li > a:active,
#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li > a.subdrop,
#sidebar-menu li > ul > li.active > a,
#sidebar-menu li > ul > li > a:active {
    color: rgb(var(--color-7)) !important;
}
#sidebar-menu ul > li:not(:last-child) {
    margin-bottom: 1px;
}
.text-muted {
    color: rgba(var(--color-6), .8);
}
.text-muted.text-success,
.text-muted.text-danger,
.text-muted.text-warning,
.text-muted.text-primary,
.text-muted.text-info,
.text-muted.text-purple,
.text-muted.text-dark,
.text-muted.text-white,
.text-muted.text-pink,
.text-muted.text-custom {
    opacity: 0.85;
}

.bg-theme {
    --bg-opacity: 1;
    background-color: rgba(var(--color-1), var(--bg-opacity)) !important;
}

.box57-container {
    display: flex;
    min-height: 24px;
}
.box57-container > .box57 {
    flex: 1 1;
}
.box57 {
    display: flex;
    border-radius: 1rem;
    padding: 0;
    background-color: #d9d9d9;
    font-size: 15px;
}
.box57-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    font-size: 3rem;
    padding: 1rem;
    border-radius: 1rem;
    line-height: 1;
    background-color: rgba(0, 0, 0, 0.125);
    color: inherit;
}
.box57-icon a {
    text-decoration: none;
    color: inherit !important;
}
.box57-icon a:hover, 
.box57-icon a:focus {
    filter: brightness(70%);
}
.box57-icon > img {
    --box57-img-brightness: 50%;
    width: 100%;
    filter: brightness(var(--box57-img-brightness));
    height: auto;
}
.box57 > .box57-content {
    flex: 1 1 auto;
    padding: 0.5rem 0;
}
.box57-progress {
    --box57-line-value: 0;
    --box57-line-bg: #fff;
    --box57-progress-bg: rgba(0, 0, 0, 0.5);
    line-height: 1;
    padding: 0;
    background-color: var(--box57-progress-bg);
    margin: 0.4rem 0;
}
.box57-progress::before {
    content: "";
    display: block;
    width: var(--box57-line-value);
    padding: 1px 0;
    background-color: var(--box57-line-bg);
}
.box57-info {
    font-size: 80%;
}
.box57-info,
.box57-title,
.box57-share {
    padding: 0 1rem;
}
.box57-share,
.box57-info-between {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.box57-info-between > :first-child {
    padding-right: 0.5rem;
}
.box57-info-between > :last-child {
    padding-left: 0.5rem;
}
.btn-share {
    --share-color: #212529;
    --share-hover-color: #f8f9fa;
    --share-bg: transparent;
    --share-hover-bg: #212529;
    --share-border: #212529;
    padding: 0.125rem 0.25rem;
    color: var(--share-color);
    background-color: var(--share-bg);
    border: 1px solid var(--share-border);
    border-radius: 0.25rem;
    font-size: 12px;
}
.btn-share:hover,
.btn-share:focus,
.btn-share:active {
    color: var(--share-hover-color);
    background-color: var(--share-hover-bg);
}
.btn-share.share-copy {
    --share-color: #212529;
    --share-hover-color: #f8f9fa;
    --share-bg: transparent;
    --share-hover-bg: #212529;
    --share-border: #212529;
}
.btn-share.share-fb {
    --share-color: #0d6efd;
    --share-hover-color: #f8f9fa;
    --share-bg: transparent;
    --share-hover-bg: #0d6efd;
    --share-border: #0d6efd;
}
.btn-share.share-wa {
    --share-color: #198754;
    --share-hover-color: #f8f9fa;
    --share-bg: transparent;
    --share-hover-bg: #198754;
    --share-border: #198754;
}