/*Fonts Used*/
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --color1: #00B302;
    --color2: #007F01;
    --color3: #00017F;
    --color4: #000180;
    --color5: #1a1a1a;
    --gradient: linear-gradient(180deg, #00B302 -0%, #007F01 100%);
    --p-color: #333333;

	--priFont: "Jost", sans-serif;
	--secFont: "Plus Jakarta Sans", sans-serif;
	--bodyFontSize: 16px; 
	--bodyFontWeight: 400;
	--bodyColor: #000; 
	--bodyLineHeight: 28px; 

	/* Heading size */
	--xsmallFont: 25px;
	--smallFont: 30px;
	--medFont: 45px;
	--largeFont: 50px;
	--xlargeFont: 55px;
}


body {
    font-family: var(--secFont);
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.required-lbl {
    color: #ff0000 !important;
}

#togglePassword {
    transition: color 0.3s ease;
    cursor: pointer;
}

.modal-header {
    background: var(--color1) !important;
    color: #fff !important;
}

/* modify font-family of all text related html elements including the value of the textarea, inputs and selects  to Poppins */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
textarea,
input,
select {
    font-family: var(--secFont) !important;
}

.primary-text {
    color: var(--color4) !important;
}

.primary-bg {
    background-color: var(--color4) !important;
    color: #fff;
}

.primary-bg:hover {
    background-color: var(--color3) !important;
    color: #fff;
}

.form-check-input:disabled {
    opacity: .6 !important;
}

.form-check-input:disabled~.form-check-label,
.form-check-input[disabled]~.form-check-label {
    opacity: .7 !important;
}

.breadcrumb-item a {
    text-decoration: none !important;
    color: var(--color1);
}

.breadcrumb-item a:hover {
    text-decoration: underline !important;
}

/* SCREEN LOADER */

#screen-loader {
    z-index: 999;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.boxes {
    height: 32px;
    width: 32px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    margin-top: 32px;
    -webkit-transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
}

.boxes .box {
    width: 32px;
    height: 32px;
    top: 0px;
    left: 0;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}



.boxes .box:nth-child(1) {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-animation: box1 1s linear infinite;
    animation: box1 1s linear infinite;
}

.boxes .box:nth-child(2) {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-animation: box2 1s linear infinite;
    animation: box2 1s linear infinite;
}

.boxes .box:nth-child(3) {
    -webkit-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
    -webkit-animation: box3 1s linear infinite;
    animation: box3 1s linear infinite;
}

.boxes .box:nth-child(4) {
    -webkit-transform: translate(200%, 0);
    transform: translate(200%, 0);
    -webkit-animation: box4 1s linear infinite;
    animation: box4 1s linear infinite;
}



.boxes .box>div {
    background: #5C8DF6;
    --translateZ: 15.5px;
    --rotateY: 0deg;
    --rotateX: 0deg;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #5C8DF6;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    -webkit-transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
    transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
}

.boxes .box>div:nth-child(1) {
    top: 0;
    left: 0;
    background: #5C8DF6;
}

.boxes .box>div:nth-child(2) {
    background: #145af2;
    right: 0;
    --rotateY: 90deg;
}

.boxes .box>div:nth-child(3) {
    background: #447cf5;
    --rotateX: -90deg;
}

.boxes .box>div:nth-child(4) {
    background: #DBE3F4;
    top: 0;
    left: 0;
    --translateZ: -90px;
}


@keyframes box1 {

    0%,
    50% {
        transform: translate(100%, 0);
    }

    100% {
        transform: translate(200%, 0);
    }
}

@keyframes box2 {
    0% {
        transform: translate(0, 100%);
    }

    50% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(100%, 0);
    }
}

@keyframes box3 {

    0%,
    50% {
        transform: translate(100%, 100%);
    }

    100% {
        transform: translate(0, 100%);
    }
}

@keyframes box4 {
    0% {
        transform: translate(200%, 0);
    }

    50% {
        transform: translate(200%, 100%);
    }

    100% {
        transform: translate(100%, 100%);
    }
}

.sp-nav-dd.dropdown-toggle::after {
    top: 9px !important;
    position: absolute !important;
    right: -2px !important;
}