:root {
    --purple-primary: #a4a4ed;
    --purple-secondary: #9d7dd7;
}

html {
    background-color: #ececec;
    background-image: linear-gradient(to bottom right, var(--purple-primary), var(--purple-secondary));
}

#ContentWrapper {
    color: #5a5a5a;
}

.nav-header {
    box-shadow: -2px 1px 8px -3px #c7c7c7;
}

.account-header {
    clip-path:none;
}

.group-container-background {
    background-color: white;
    border-radius: 10px;
}

.group-block {
    /* background-image: linear-gradient(to bottom right, #9a9ae3, #9898d3); */
    background-color: #efefef;
}

.notification {
    background-color:#ffffff;
}

.card {
    background-color: white;
    color: #424242;
}

.groupInfoContainer {
    background-color: white;
    border-radius: 10px;
}

.groupInfoP {
    color: #5c5c5c;
}

.adminPanelTable td, .adminPanelTable th {
    color: #646363;
}

.invoice-container {
    color: #4c4c4c;
}

.popupContainer {
    background-color:white;
    color: #4d4d75;
}

.sp-input {
    box-shadow: inset 0px 0px 6px -4px #5c5c5c;
    border: 1px solid #e3e3e3;
}

.sp-button-snackbar {
    background-color: #a4a4ed;
    color: white;
}

#confirmationPopup .popupContainer {
    background-color: white;
}

#confirmationPopup .popupContainer div {
    background-color: #f9f9f9;
}

.bottomPopup .popupContainer {
    background-color: white;
}

.panelHomeButton {
    background-color: white;
    border-radius: 10px;
    border:none;
}

.panelHomeButton p {
    color: #5c5c5c;
}

.adminPanelTable {
    background-color:white;
}

#invoice {
    background-color:white;
}

.settingContainer {
    background-color: white;
    border-radius: 10px;
    border-left:none;
}
.adminProduct {
    background-color: white;
    border-radius: 10px;
}

.methodBtn {
    background-color: white;
}

.sp-button {
    color: white;
    background-image: linear-gradient(132deg, var(--purple-primary), #b4b4f3);
}

.tableButton {
    background-image: linear-gradient(132deg, var(--purple-primary), #b4b4f3);
}

.iconBtn-primary {
    background-color: var(--purple-primary);
}

@media only screen and (max-width: 1100px) {
    .nav-slider {
        background-image: linear-gradient(to bottom, #8e8eef, var(--purple-primary));
    }
}

#loading-div {
    background-image: linear-gradient(to bottom right, var(--purple-primary), #9d7dd7);
}

.productBtn img {
    border-color:var(--purple-primary);
}