:root {
	--themecolor: #FF7592; /* Change this Color */
    --themecolor-hovered: #D66980;
    --themecolor-pressed: #AC445A;
    --themecolor-focused: #FF759255; /* with box shadow 24% alpha */
    --themecolor-disabled: #FFC7D3;
    --cnvs-themecolor: #FF7592;
    --cnvs-highlight: #f02f59;
}

/* Primary */
.btn-primary {
    background: var(--themecolor) !important;
    transition: 400ms;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--themecolor);
    --bs-btn-border-color: var(--themecolor);
    --bs-btn-hover-bg: var(--themecolor);
    --bs-btn-hover-border-color: var(--themecolor);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--cnvs-highlight);
    --bs-btn-active-border-color: var(--cnvs-highlight);
    --bs-btn-active-shadow: inset 0 3px 5px var(--themecolor-focused);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--themecolor);
    --bs-btn-disabled-border-color: var(--themecolor);
}
.btn-primary:hover {
    background: var(--themecolor-hovered) !important;
}
.btn-primary:active {
    background: var(--themecolor-pressed) !important;
}
.btn-primary:focus {
    background: var(--themecolor) !important;
    box-shadow: 0 0 0 4px var(--themecolor-focused);
}
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled] {
    background: var(--themecolor-disabled) !important;
}

/* Secondary */
.btn-secondary {
    background: var(--bs-white) !important;
    border-color: var(--themecolor) !important;
    transition: 400ms;
    --bs-btn-color: var(--themecolor);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--themecolor);
    --bs-btn-hover-bg: var(--bs-gray-100);
    --bs-btn-hover-border-color: var(--themecolor-hovered);
    --bs-btn-active-color: var(--themecolor);
    --bs-btn-active-bg: var(--bs-gray-200);
    --bs-btn-active-border-color: var(--themecolor);
    --bs-btn-active-shadow: inset 0 3px 5px var(--themecolor-focused);
    --bs-btn-disabled-color: var(--themecolor-disabled);
    --bs-btn-disabled-bg: var(--bs-white);
    --bs-btn-disabled-border-color: var(--themecolor-disabled);
}
.btn-secondary:hover {
    background: var(--bs-gray-100) !important;
    border-color: var(--themecolor-hovered) !important;
    color: var(--themecolor-hovered) !important;
}
.btn-secondary:active {
    background: var(--bs-gray-200) !important;
    border-color: var(--themecolor-pressed) !important;
    color: var(--themecolor-pressed) !important;
}
.btn-secondary:focus {
    border-color: var(--themecolor) !important;
    box-shadow: 0 0 0 4px var(--themecolor-focused);
    color: var(--themecolor) !important;
}
.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-secondary[disabled] {
    border-color: var(--themecolor-disabled) !important;
    color: var(--themecolor-disabled) !important;
}

/* Tertiary */
.btn-tertiary {
    background: var(--bs-white) !important;
    border-color: transparent !important;
    transition: 400ms;
    --bs-btn-color: var(--themecolor);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--themecolor);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: inset 0 3px 5px transparent;
    --bs-btn-disabled-color: var(--themecolor-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}
.btn-tertiary:hover {
    color: var(--themecolor-hovered) !important;
}
.btn-tertiary:active {
    color: var(--themecolor-pressed) !important;
}
.btn-tertiary:focus {
    color: var(--themecolor) !important;
}
.btn-tertiary:disabled,
.btn-tertiary.disabled,
.btn-tertiary[disabled] {
    color: var(--themecolor-disabled) !important;
}

.deprecate {

/* Primary Tabs */
.nav.primary-tabs {
    background-color: var(--bs-white) !important;
    border-radius: 0.375rem;
    box-shadow: 0px 0px 18px 0px #37373708;
    padding: 0 .725rem;
}
.nav.primary-tabs .nav-item .nav-link {
    display: block;
    border-bottom: 3px solid transparent !important;
    color: var(--bs-dark) !important;
    height: 48px;
    transition: 400ms;
}
.nav.primary-tabs .nav-item .nav-link:hover {
    color: var(--themecolor-hovered) !important;
}
.nav.primary-tabs .nav-item .nav-link.active {
    color: var(--themecolor) !important;
    /* font-weight: 600; */
    border-bottom-color: var(--themecolor) !important;
}

/* Secondary Tabs */
.nav.secondary-tabs {
    background-color: var(--bs-gray-200) !important;
    border-radius: 0.650rem;
    box-shadow: 0px 0px 18px 0px #37373708;
    display: inline-flex;
    padding: .25rem;
}
.nav.secondary-tabs .nav-item .nav-link {
    border-radius: 0.525rem;
    color: var(--bs-dark) !important;
    display: block;
    transition: background-color 400ms !important;
}
.nav.secondary-tabs .nav-item .nav-link:hover {
    color: var(--themecolor-hovered) !important;
}
.nav.secondary-tabs .nav-item .nav-link.active {
    background-color: var(--themecolor) !important;
    color: var(--bs-white) !important;
}

/* Form */
/* Form group */
.form-group label {
    font-size: 12px;
    font-weight: 500;
}
.form-group input {
    border: 1px solid var(--gray-border) !important;
}
.form-group input:focus {
    border-color: var(--themecolor) !important;
    box-shadow: 0 0 0 0 !important;
}
.form-group input.error,
.form-group input:not(:valid) {
    background-color: rgba(var(--bs-danger-rgb), .06) !important;
    border: 2px solid var(--bs-danger) !important;
    box-shadow: 0 0 1px 4px rgba(var(--bs-danger-rgb), .06) !important;
}
.form-group input::-webkit-input-placeholder {
    color: var(--gray-placeholder) !important;
    font-size: 14px;
}

}