:root {
 /*primary color*/
    --pri-r: 0;
	--pri-g: 9;
	--pri-b: 33;

    --on-pri-r: 255;
    --on-pri-g: 255;
    --on-pri-b: 255;
    
    
	--pri-rgba: rgba(var(--pri-r),var(--pri-g),var(--pri-b),var(--clr-opc));
	--pri-rgb: rgb(var(--pri-r),var(--pri-g),var(--pri-b));
    --on-pri: rgba(var(--on-pri-r),var(--on-pri-g),var(--on-pri-b),var(--clr-opc));
	/*primary variant*/
    
    --priv-r: 0;
	--priv-g: 13;
	--priv-b: 68;
    --on-priv-r: 255;
    --on-priv-g: 255;
    --on-priv-b: 255;
    
	--priv-rgba: rgba(var(--priv-r),var(--priv-g),var(--priv-b),var(--clr-opc));
	--priv-rgb: rgb(var(--priv-r),var(--priv-g),var(--priv-b));
    --on-priv: rgba(var(--on-priv-r),var(--on-priv-g),var(--on-priv-b),var(--clr-opc));

    /*primary gradient*/
    --pri-grad: linear-gradient(to bottom, rgba(var(--pri-r),var(--pri-g),var(--pri-b),var(--opc-grd-top)) 0%,  rgba(var(--priv-r),var(--priv-g),var(--priv-b),var(--opc-grd-bot)) 100%);
    --pri-vgrad: linear-gradient(to bottom, rgba(var(--priv-r),var(--priv-g),var(--priv-b),var(--opc-grd-bot)) 0%,  rgba(var(--pri-r),var(--pri-g),var(--pri-b),var(--opc-grd-top)) 100%);
	--on-pri-grad: rgba(255,255,255,1);
}
element.style {
    color: rgba(255,255,255,1);
    background: radial-gradient(ellipse at center, rgba(2,36,137,1) 1%,rgba(0,9,33,1) 100%);
}
.bg-pri {
    --clr-opc: 1;
    background: var(--pri-rgba) !important;
    color: rgba(var(--on-pri-r),var(--on-pri-g),var(--on-pri-b),var(--clr-opc));
    }
.bg-priv{
    background: var(--priv-rgba) !important;
    color: var(--on-priv);
    }

.bg-pri-grad {
    background: var(--pri-grad) !important;
    color: var(--on-pri);
    }
.bg-white {
    color: rgba(25,25,25,1);
        }
.clr-pri {
    color: var(--pri-rgba) !important;
    }
.clr-priv {
    color: var(--priv-rgba) !important;
    }
.clr-on-pri {
    color: var(--on-pri) !important;
    }
.clr-on-pri-lght {
    --clr-opc: .5;
    color: rgba(var(--on-pri-r),var(--on-pri-g),var(--on-pri-b),var(--clr-opc)) !important;
    }
.brd-priv {
    
    border-color: rgba(var(--priv-r),var(--priv-g),var(--priv-b),var(--clr-opc)) !important;
}    
.btn-outline-primary {
    --clr-opc:.35;
    --bs-btn-color: var(--on-pri);
    --bs-btn-border-color: var(--on-pri) !important;
    --bs-btn-hover-color: var(--pri-rgba) !important;
    --bs-btn-hover-bg: var(--on-pri) !important;
    --bs-btn-hover-border-color: var(--on-pri) !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-primary:hover {
    --bs-btn-color: var(--pri-rgba) !important;
    background: var(--bs-btn-hover-bg)!important;
    }

.btn-primary {
    --clr-opc: 1;
    --clr-opc-text: 1;
    --bs-btn-color: rgba(var(--on-pri-r),var(--on-pri-g),var(--on-pri-b),var(--clr-opc-text));
    --bs-btn-bg: rgba(var(--pri-r),var(--pri-g),var(--pri-b),var(--clr-opc));
    --bs-btn-border-color: var(--pri-rgba);
    --bs-btn-hover-color: var(--on-priv);
    --bs-btn-hover-bg: var(--priv-rgba);
    --bs-btn-hover-border-color: var(--pri-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-primary:hover {
    background: var(--bs-btn-hover-bg)!important;
    color: var(--bs-btn-hover-color);
    }

.btn-primaryv {
    --clr-opc: 1;
    --clr-opc-text: 1;
    --bs-btn-color: rgba(var(--on-priv-r),var(--on-priv-g),var(--on-priv-b),var(--clr-opc-text));
    --bs-btn-bg: rgba(var(--priv-r),var(--priv-g),var(--priv-b),var(--clr-opc));
    --bs-btn-border-color: var(--priv-rgba);
    --bs-btn-hover-color: var(--on-pri);
    --bs-btn-hover-bg: var(--priv-rgba);
    --bs-btn-hover-border-color: var(--priv-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);
    color: var(--bs-btn-color);
}
.btn-primaryv:hover {
    background: var(--bs-btn-hover-bg)!important;
    color: var(--bs-btn-hover-color);
    }