:root {
    --primary-color: #f368e0;
    --primary-forground: #1dd1a1;
    --primary-color-darkest: #8a137a;
    --primary-opacity: #f9a3ed;
}

.close-icon {
    color: var(--primary-forground);
    background: var(--primary-color);
}
.close-icon svg path {
    stroke: currentColor;
}
.crancy-dashboard-menu .crancy__toggle:before {
    color: var(--primary-color);
}
.menu-bar li:hover > a .menu-bar__name,
.menu-bar li.active > a .menu-bar__name {
    color: var(--primary-color) !important;
}
.crancy-dashboard-menu li:hover .menu-bar__text .crancy-menu-icon,
.crancy-dashboard-menu li.active .menu-bar__text .crancy-menu-icon {
    color: var(--primary-color) !important;
}
.crancy-dashboard-menu li:hover .crancy__toggle:before,
.crancy-dashboard-menu li.active .crancy__toggle:before {
    color: var(--primary-color) !important;
}
.menu-bar li:hover .collapsed .crancy-menu-icon .crancy-svg-icon,
.menu-bar li.active .crancy-menu-icon .crancy-svg-icon {
    color: var(--primary-color) !important;
}
.menu-bar li a {
    color: var(--primary-color) !important;
}
.crancy-dashboard-menu .menu-bar__text .crancy-menu-icon {
    color: var(--primary-color) !important;
}
.crancy-header__blink {
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.crancy-header__blink:hover {
    background-color: var(--primary-color) !important;
    color: var(--primary-forground) !important;
}
.crancy-ecom-card .text-primary {
    color: var(--primary-color) !important;
}
.crancy-ecom-card .bg-success-white {
    background-color: var(--primary-opacity) !important;
}
.page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
a {
    color: var(--primary-color);
}
a:active,
a:hover {
    color: var(--primary-color-darkest) !important;
}
.crancy__item-input:hover {
    border-color: var(--primary-color) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    border: 1px solid var(--primary-color) !important;
}
.crancy-psidebar a:hover,
.crancy-psidebar a.active {
    background: var(--primary-opacity) !important;
}
.crancy-psidebar a:hover .crancy-psidebar__icon,
.crancy-psidebar a.active .crancy-psidebar__icon {
    background: var(--primary-color);
    color: var(--primary-forground);
}
.crancy-wc__banner_pd {
    background: var(--primary-opacity);
}
.crancy-wc__form-inside {
    border: 1px solid var(--primary-color);
}
.crancy-wc__form-main .form-group input:hover {
    border-color: var(--primary-color);
}
.ntfmax-wc__btn {
    background: var(--primary-color);
    color: var(--primary-forground);
}
.crancy-wc__button button:hover {
    background: var(--primary-color-darkest);
}
.btn-primary {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color);
    color: var(--primary-forground) !important;
}
.btn-primary:hover {
    background: var(--primary-color-darkest) !important;
    border: 1px solid var(--primary-color-darkest);
    color: var(--primary-forground) !important;
}
.crancy-product-card .nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
}
.primary-typo {
    background: var(--primary-opacity) !important;
    color: var(--primary-color) !important;
}
.text-primary-web-text {
    color: var(--primary-color) !important;
}
.crancy-theader {
    background: var(--primary-color) !important;
    color: var(--primary-forground) !important;
}
.crancy-theader .crancy-theader__title {
    color: var(--primary-forground) !important;
}
.crancy-chatbox__outgoing.crancy-chatbox__outgoing--email
    .crancy-chatbox__incoming-chat {
    background: var(--primary-color);
    color: var(--primary-forground);
}
.crancy-tinfo__heading {
    background: var(--primary-color);
}
.crancy-chatbox__outgoing.crancy-chatbox__outgoing--email
    .crancy-chatbox__incoming-chat
    .crancy-chatbox__withdate--inner
    p {
    color: var(--primary-forground);
}
.crancy-color1 {
    color: var(--primary-color);
}
.crancy-chatbox__withdate time {
    color: var(--primary-forground) !important;
}
.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--primary-color);
}
.text-primary {
    color: var(--primary-color) !important;
}
.crancy-color1 {
    color: var(--primary-color) !important;
}
.crancy-color1 {
    color: var(--primary-color) !important;
}
.btn-group {
    background: var(--primary-color);
}
.b-wfull i {
    color: var(--primary-forground);
}
.btn_primary_two {
    background: var(--primary-opacity);
}
.crancy-btn.crancy-btn-green {
    background: var(--primary-color) !important;
    color: var(--primary-forground);
}
.btn_primary_two:hover {
    background-color: var(--primary-color);
    color: var(--primary-forground);
}
.crancy-wc__button button:hover {
    background-color: var(--primary-color-darkest) !important;
}

.auth-type-switcher
    .auth-type-switcher-list
    .auth-type-switcher-item
    .auth-type-switcher-btn {
    font-size: 14px;
    line-height: 20px;
    padding: 6px 16px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    background: transparent;
    color: #14212b;
    font-weight: 500;
    height: auto;
    transition: all linear 0.3s;
    &:hover {
        background: var(--primary-color);
        color: var(--primary-forground);
    }
    &.active {
        background: var(--primary-color);
        color: var(--primary-forground);
    }
    &:focus {
        box-shadow: none;
        background: var(--primary-color);
        color: var(--primary-forground);
    }
}

.crancy-wc__text a {
    color: var(--primary-color);
}

.primary-color-picker-option .primary-color-picker-input {
    width: 100%;
    height: 56px;
    position: relative;
}
.primary-color-picker-option .pickr {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    padding: 5px;
    background: var(--primary-opacity);
    border: 1px solid var(--primary-color);
    :focus {
        box-shadow: none;
    }
}
.primary-color-picker-option .primary-color-picker-input .color-code-hex {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 99;
    transform: translate(-50%, -50%);
    color: white; /* Default fallback */
    font-size: 14px;
    font-weight: 500;
    mix-blend-mode: difference;
}

.primary-color-picker-option .pcr-button {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
}
.pcr-app .pcr-interaction {
    flex-direction: column;
    align-items: start;
}
.pcr-app .pcr-interaction .pcr-save {
    width: 100%;
    font-size: 1rem;
    color: #fff;
    background: #14212b;
}
.pcr-app .pcr-interaction .pcr-result {
    flex: unset;
}

a:active.crancy-btn,
a:hover.crancy-btn {
    color: #fff !important;
}
a:active.crancy-btn.delete_danger_btn,
a:hover.crancy-btn.delete_danger_btn {
    color: #dc3545 !important;
}

.pcr-app .pcr-interaction input:focus {
    box-shadow: none;
    color: #fff !important;
}