:root {
/*secondary color*/
    --sec-r: 255;
	--sec-g: 255;
	--sec-b: 0;
    --on-sec-r: 255;
    --on-sec-g: 255;
    --on-sec-b: 255;
	--sec-rgba: rgba(var(--sec-r),var(--sec-g),var(--sec-b),var(--clr-opc));
	--sec-rgb: rgb(var(--sec-r),var(--sec-g),var(--sec-b));
	--on-sec: rgba(var(--on-sec-r),var(--on-sec-g),var(--on-sec-b),var(--clr-opc));
	/*sec variant*/
    --secv-r: 242;
	--secv-g: 242;
	--secv-b: 2;
    --on-secv-r: 255;
    --on-secv-g: 255;
    --on-secv-b: 255;  
	--secv-rgba: rgba(var(--secv-r),var(--secv-g),var(--secv-b),var(--clr-opc));
	--secv-rgb: rgb(var(--secv-r),var(--secv-g),var(--secv-b));
	--on-secv: rgba(var(--on-secv-r),var(--on-secv-g),var(--on-secv-b),var(--clr-opc));
    /*sec gradient*/
    --sec-grad: linear-gradient(to bottom, rgba(var(--sec-r),var(--sec-g),var(--sec-b),var(--opc-grd-top)) 0%,rgba(var(--secv-r),var(--secv-g),var(--secv-b),var(--opc-grd-bot)) 100%);
	--sec-vgrad:  linear-gradient(to bottom, rgba(var(--secv-r),var(--secv-g),var(--secv-b),var(--opc-grd-bot)) 0%,rgba(var(--sec-r),var(--sec-g),var(--sec-b),var(--opc-grd-top)) 100%);
	--on-sec-grad: rgba(var(--on-sec-r),var(--on-sec-g),var(--on-sec-b),var(--clr-opc));
}
.btn-outline-secondary {
    --clr-opc:.35;
    --bs-btn-color: var(--on-sec);
    --bs-btn-border-color: var(--on-sec) !important;
    --bs-btn-hover-color: var(--sec-rgba) !important;
    --bs-btn-hover-bg: var(--on-sec) !important;
    --bs-btn-hover-border-color: var(--on-sec) !important;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
}
.btn-outline-secondary:hover {
    --bs-btn-color: var(--sec-rgba) !important;
    background: var(--bs-btn-hover-bg)!important;
    }

.btn-secondary {
    --clr-opc: 1;
    --clr-opc-text: 1;
    --bs-btn-color: rgba(var(--on-sec-r),var(--on-sec-g),var(--on-sec-b),var(--clr-opc-text));
    --bs-btn-bg: rgba(var(--sec-r),var(--sec-g),var(--sec-b),var(--clr-opc));
    --bs-btn-border-color: var(--sec-rgba);
    --bs-btn-hover-color: var(--on-secv);
    --bs-btn-hover-bg: var(--secv-rgba);
    --bs-btn-hover-border-color: var(--sec-rgba);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
    background: var(--bs-btn-bg) !important;
    color: var(--bs-btn-color);
}
.btn-secondary:hover {
    background: var(--bs-btn-hover-bg)!important;
    color: var(--bs-btn-hover-color);
    }