/* ***************************** Customize OneSales Club Styles ******************************** */
/* Shared */
.apps-background-color-hovered {
    background-color: #eee;
}

.apps-background-color-selected {
    background-color: #eee;
}

.apps-background-color-hovered-selected {
    background-color: #eee;
}

.apps-box-shadow-light {
    -webkit-box-shadow: 0 0 10px 2px rgba(41, 50, 66, 0.1) !important;
    box-shadow: 0 0 10px 2px rgba(41, 50, 66, 0.1) !important;
}

.apps-box-shadow-heavy {
    -webkit-box-shadow: 0 0 10px 1px rgba(41, 50, 66, 0.4) !important;
    box-shadow: 0 0 10px 1px rgba(41, 50, 66, 0.4) !important;
}

/* Components - BlockUI */
.apps-component-block-ui-overlay {
    background-color: white;
}

/* Entry - Point Adjustment */
.apps-point-adjustment-edit-form-summary {
    background-color: rgb(249, 249, 249);
}

/* Entry - Point Redemption */
.apps-point-redemption-edit-form-summary {
    background-color: rgb(249, 249, 249);
}

/* General - Settings Maintenance - Setting Tab */
#apps-general-settings-setting-tab {
    padding: 0.85rem 1.5rem;
    color: #a3a4a6 !important;
    background-color: transparent !important;
    border-color: #f4f4f4 !important;
    font-weight: 400;
    white-space: normal;
    display: flex;
}

#apps-general-settings-setting-tab.active {
    padding: 0.85rem 1.5rem;
    color: #222 !important;
    background-color: rgba(24, 28, 33, 0.06) !important;
    border-color: #f4f4f4 !important;
    font-weight: 600;
    white-space: normal;
    display: flex;
}

#apps-general-settings-setting-tab:focus,
#apps-general-settings-setting-tab:hover {
    color: #555 !important;
    background-color: rgba(24, 28, 33, 0.015) !important;
}

#apps-general-settings-setting-tab:focus.active,
#apps-general-settings-setting-tab:hover.active {
    color: #222 !important;
    background-color: rgba(24, 28, 33, 0.06) !important;
}

/* General - Settings Maintenance - Setting Group */
#apps-general-settings-setting-group {
    padding: 0.85rem 1.5rem;
    color: #222 !important;
    background-color: transparent !important;
    border-color: #f4f4f4 !important;
    font-weight: 400;
    white-space: normal;
}

#apps-general-settings-setting-group.active {
    font-weight: 600;
}

#apps-general-settings-setting-group:focus,
#apps-general-settings-setting-group:hover {
    background-color: transparent !important;
}

#apps-general-settings-setting-group:focus.active,
#apps-general-settings-setting-group:hover.active {
    background-color: rgba(24, 28, 33, 0.015) !important;
}

#apps-general-settings-setting-group:after {
    content: "";
    position: absolute;
    right: 2rem;
    display: block;
    width: .42em;
    height: .42em;
    border: 1px solid;
    border-top: 0;
    border-right: 0;
    margin: -10px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    transition-property: -webkit-transform, transform;
}

#apps-general-settings-setting-group.active:after {
    transform: translateY(-50%) rotate(-45deg);
}

/* ***************************** Customize DevExtreme ******************************** */
/* Validation Message */
.dx-dropdownbox.dx-dropdowneditor-active .dx-invalid-message-auto .dx-overlay-wrapper,
.dx-state-focused.dx-invalid .dx-invalid-message-auto .dx-overlay-wrapper {
    visibility: visible;
}

.card {
    -webkit-box-shadow: 0 0 10px 2px rgba(41, 50, 66, 0.1) !important;
    box-shadow: 0 0 10px 2px rgba(41, 50, 66, 0.1) !important;
    border: none !important;
}

/* Pivot Grid */
.dx-header-filter {
    color: rgba(51, 51, 51, 0.5) !important;
}

.dx-header-filter-empty {
    color: rgba(51, 51, 51, 0.2) !important;
}

/* ***************************** Customize react-phone-input-2 ******************************** */
.react-tel-input {
    border: 1px solid rgb(221 221 221) !important;
    border-radius: 4px !important;
}

.phone-input {
    background-color: #f9f9f9 !important;
    border: 0 !important;
}

.flag-dropdown {
    background-color: #f9f9f9 !important;
    border: 0 !important;
    border-right: 1px solid rgb(221 221 221) !important;
}

.selected-flag:hover {
    background-color: #f9f9f9 !important;
}

.selected-flag:focus {
    background-color: #f9f9f9 !important;
}


.selected-flag {
    background-color: #f9f9f9 !important;
}

.country-list {
    background-color: #f9f9f9 !important;
    overflow-y: auto !important;
    border-radius: 4px !important;
}

.invitation-status-container {
    background-color: #f9f9f9;
}