/* sidebar nav */
.sidebar-wrapper .sidebar-nav {
  max-height: 90vh;
  overflow: auto;
}

/* icon in button */
button *,
a * {
    pointer-events: none;
}

/* login page */
body.login-page {
    background: url(../img/login-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    height: 100vh;
}

.card-login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-login #form-login a,
.card-login #form-login span,
.card-login #form-login input {
    background-color: #efefef;
}

.card-login #form-login input:focus {
    border: none;
    box-shadow: inset 0 0 0 #efefef;
}

/* logo sidebar */
aside.sidebar-wrapper > .sidebar-header > .logo-icon {
    width: 100%;
    display: flex;
    justify-content: center;
}

aside.sidebar-wrapper > .sidebar-header > .logo-icon > .logo-img {
    width: 85%;
}

/* button */
.btn-primary,
.btn-primary:disabled {
    background-color: #e9589b;
    border: 1px solid #e9589b;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #ff268b !important;
    border: 1px solid #ff268b !important;
}

.btn-outline-primary,
.btn-outline-primary:disabled {
    background-color: transparent !important;
    border: 1px solid #e9589b !important;
    color: #e9589b;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #ff268b !important;
    border: 1px solid #ff268b !important;
}

/* badge notifications */
.top-header .navbar .nav-item .badge-notify {
    top: 8px;
    right: 12px;
    width: 10px;
    height: 10px;
}

/* notifications */
.top-header .navbar .nav-item .notify-list {
  max-height: 500px !important;
}

.top-header .navbar .nav-item .notify-list .dropdown-item {
  max-height: 500px;
  overflow-y: auto;
}

.sidebar-wrapper .sidebar-nav #sidenav li > a {
    /* color: #E5D7FD; */
    background-color: transparent;
    padding: 12px;
    border-radius: 10px;
}

.sidebar-wrapper .sidebar-nav #sidenav li.mm-active > a {
    background-color: #2618ca1a;
    color: #8744e1;
}

/* dashboard */
.card-violet {
    background-color: #8744e1;
    color: #fff;
}

.card-violet > * {
    color: #1bd8ba;
}

.card-turquoise {
    background-color: #05c7ab;
    color: #fff;
}

.card-turquoise > * {
    color: #6e2bc5;
}

.card-light-seagull {
    background-color: #dff3ff;
    border: 1px solid #5ccffe;
    border-radius: 10px;
    padding: 20px;
}

.card-light-violet {
    background-color: #f1e9fe;
    border: 1px solid #d2b8fa;
    border-radius: 10px;
    padding: 20px;
}

.card-light-rose {
    background-color: #fbe8f4;
    border: 1px solid #f4add8;
    border-radius: 10px;
    padding: 20px;
}

.card-light-rajah {
    background-color: #feeed6;
    border: 1px solid #fbba6d;
    border-radius: 10px;
    padding: 20px;
}

/* growth chart dashboard */
.container-growth-chart {
    position: relative;
}

.growth-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* border card */
.card.card-border-violet {
    position: relative;
    /* border: 1px solid #9664ff; */
}

.card.card-border-violet::before {
    content: "";
    width: 2%;
    height: 35%;
    position: absolute;
    top: 15%;
    left: 0;
    background-color: #9664ff;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.card.card-border-rose {
    position: relative;
}

.card.card-border-rose::before {
    content: "";
    width: 2%;
    height: 35%;
    position: absolute;
    top: 15%;
    left: 0;
    background-color: #e351a2;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.card.card-border-turquoise {
    position: relative;
}

.card.card-border-turquoise::before {
    content: "";
    width: 2%;
    height: 35%;
    position: absolute;
    top: 15%;
    left: 0;
    background-color: #1bd8ba;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.card.card-border-rajah {
    position: relative;
}

.card.card-border-rajah::before {
    content: "";
    width: 2%;
    height: 35%;
    position: absolute;
    top: 15%;
    left: 0;
    background-color: #f67b19;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

/* icon arrow for progress or growth */
.progress-up {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9664ff;
    background-color: rgba(150, 100, 255, 0.1);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 15px;
}

.progress-up > * {
    rotate: 30deg;
}

.progress-down {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f82e2e;
    background-color: rgba(248, 46, 46, 0.1);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 15px;
}

.progress-down > * {
    rotate: 120deg;
}

/* status order badge */
.badge-status::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.badge-status.status-menunggu-detail-bayar::before {
    background-color: #ffe100;
}

.badge-status.status-belum-bayar::before {
    background-color: #ff5900;
}

.badge-status.status-dikemas::before {
    background-color: #7b00ff;
}

.badge-status.status-dikirim::before {
    background-color: #002fff;
}

.badge-status.status-selesai::before {
    background-color: #5eff00;
}

.badge-status.status-dibatalkan::before {
    background-color: #ff0000;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: #737985;
    border-radius: 20px;
}

/* button chat attachment and emote */
#btn-attachment,
#btn-emote {
    position: absolute;
    border-radius: 50%;
    top: 85%;
    border: none;
    background-color: transparent;
    color: #5a5c60;
}

#btn-attachment {
    right: 5%;
}

#btn-emote {
    right: 1%;
}

#btn-attachment:active,
#btn-emote:active {
    border: none;
}

/* accordion */
#accordion-account-number.accordion > .accordion-item,
#accordion-account-number.accordion > .accordion-item > .accordion-button {
    border: none;
}

#accordion-account-number.accordion
    > .accordion-item
    > .accordion-header
    > .accordion-button {
    background-color: transparent;
    color: #414141;
}

/* preview image */
.image-preview {
    overflow: hidden;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    display: flex;
}

.image-preview img {
    justify-content: center;
    align-items: center;
}

/* chat sales order*/
.container-chat .content-message img {
  width: 100%;
  cursor: pointer;
}