:root {
	--bright-green: #00ec00;
	--white: #fff;
	--bright-red: #d12f28;
  	--bright-yellow: #ffcc00;
	--body-color-dark: #30205b;
	--body-color-light: #ffffff;
	--dark-blue-grey: #2d2358;
	--border-grey: #838294;
	--textbox-bg-color: #0d0b17b0;
	--textbox-purple-bg-color: #0d072f;
	--textbox-text-color: #b5b4c9;
	--dark-purple: #2b2555;
	--black: #000;
	--port-gore: #241a49;
	--white-dark: #fff;
	--white-light: #2d2358;
	--blue-grey-dark: #fff;
	--blue-grey-light: #838296;
	--grey-dark: #d5d5d5;
	--grey-light: #2d2358;
	--purple-grey-dark: #f4f4f4;
	--purple-grey-light: #241749;
	--footer-dark: unset;
	--footer-light: #f4f4f4;
	--btn-small02-lite-dark: transparent;
	--btn-small02-lite-light: transparent;
	--footer-item-text-dark: #fff;
	--footer-item-text-light: #2d2358;
	--dropdown-bg-color-dark: #241749;
	--dropdown-bg-color-light: #f4f4f4;
	--footer-icon-dark: #fff;
	--footer-icon-light: #2d2358;
	--dark-blue-grey-dark: #2d2358;
	--dark-blue-grey-light: #2d2358;
	--area-bgcolor-dark: #0f1233e6;
	--area-bgcolor-light: #ffffff;
	--area-bgcolor-dark-2: #0f1233e6;
	--area-bgcolor-light-2: var(--bright-green);
	--area-bgcolor-dark-3: #0f1233e6;
	--area-bgcolor-light-3: #f4f4f4;
	--navbar-item-bg-dark: #241a49;
	--navbar-item-bg-light: #ffffff !important; 
	--navbar-image-light: url(/img/companies/roobit/roobit_light_img.svg);
	--navbar-image-dark: url(/img/companies/roobit/roobit-logo.svg);
	--forgetPassword-image: url(/img/companies/roobit/forgetPassword_background_img.png);
	--port-gore-dark: #30205b;
	--port-gore-light: #f4f4f4;
	--black-dark: #000;
	--black-light: #fff;
	--landingpage-header-dark: #231e47;
	--landingpage-header-light: rgba(0, 0, 0, 0.19);
	--text-color-dark: #fff;
	--text-color-light: #2d2358;
	--input-bg-dark: #24174980;
	--input-bg-light: #f3f3f3;
	--bs-body-bg: transparent !important;
	--bs-body-color: #fff !important;

}

.light-theme {
	--bg-body-image: var(--bg-body-image-light);
	--bg-header-image: var(--bg-header-image-light);
	--white: var( --white-light);
	--footer-bg: var(--footer-light);
	--dropdown-bg-color: var(--dropdown-bg-color-light);
	--dark-blue-grey: var(--dark-blue-grey-light);
	--blue-grey: var(--blue-grey-light);
	--purple-grey: var(--purple-grey-dark);
	--grey: var(--grey-light);
	--text-color: var(--text-color-light);
	--orderbook-text-color: var(--orderbook-text-color-light);
	--btn-small02-lite: var(--btn-small02-lite-light);
	--footer-item-text: var(--footer-item-text-light);
	--footer-icon: var(--footer-icon-light);
	--area-bgcolor: var(--area-bgcolor-light);
	--area-bgcolor-brightgreen: var(--area-bgcolor-light-2);
	--area-bgcolor-grey: var(--area-bgcolor-light-3);
	--navbar-item-bgcolor: var(--navbar-item-bg-light);
	--navbar-image: var(--navbar-image-light);
	--forgetPassword-image: var(--forgetPassword-image-dark);
	--port-gore: var(--port-gore-light);
	--black: var(--black-light);
	--grid-text-color: var(--grid-text-color-light);
	--landingpage-header: var(--landingpage-header-light);
	--input-bg: var(--input-bg-light);
	--body-color: var(--body-color-light);
}

.dark-theme {
	--bg-body-image: var(--bg-body-image-dark);
	--bg-header-image: var(--bg-header-image-dark);
	--bg-header-second-image: var(--bg-header-second-image-dark);
	--btn-small02-lite: var(--btn-small02-lite-dark);
	--footer-bg: var(--footer-dark);
	--dropdown-bg-color: var(--dropdown-bg-color-dark);
	--footer-item-text: var(--footer-item-text-dark);
	--footer-icon: var(--footer-icon-dark);
	--orderbook-text-color: var(--orderbook-text-color-dark);
	--white: var(--white-dark);
	--dark-blue-grey: var(--dark-blue-grey-dark);
	--footer-item-text: var(--footer-item-text-dark);
	--blue-grey: var(--blue-grey-dark);
	--purple-grey: var(--purple-grey-light);
	--grey: var(--grey-dark);
	--text-color: var(--text-color-dark);
	--area-bgcolor: var(--area-bgcolor-dark);
	--area-bgcolor-brightgreen: var(--area-bgcolor-dark-2);
	--area-bgcolor-grey: var(--area-bgcolor-dark-3);
	--navbar-item-bgcolor: var(--navbar-item-bg-dark);
	--navbar-image: var(--navbar-image-dark);
	--port-gore: var(--port-gore-dark);
	--black: var(--black-dark);
	--grid-text-color: var(--grid-text-color-dark);
	--landingpage-header: var(--landingpage-header-dark);
	--input-bg: var(--input-bg-dark);
	--body-color: var(--body-color-dark);
}


/*color code*/

.purple-grey {
	color: var(--dropdown-bg-color) !important;
}

.bright-green {
	color: var(--bright-green) !important;
}


.white {
	color: var(--white) !important;
}

.dark-blue-grey {
	color: var(--dark-blue-grey) !important;
}

.bright-red {
	color: var(--bright-red) !important;
}

.bright-yellow {
	color: var(--bright-yellow) !important;
}

.blue-grey {
	color: var(--blue-grey) !important;
}

.pure-blue-grey {
	color: #838296 !important;
}

.black {
	color: var(--black) !important;
}

.port-gore {
	color: var(--port-gore) !important;
}

/*background code*/
.bg-area-backcolor {
	background-color: var(--area-bgcolor-dark) !important;
}

.bg-bright-green {
	background-color: var(--bright-green) !important;
}

.bg-white {
	background-color: var(--white) !important;
}

.bg-dark-blue-grey {
	background-color: var(--dark-blue-grey) !important;
}

.bg-bright-red {
	background-color: var(--bright-red) !important;
}

.bg-blue-grey {
	background-color: var(--blue-grey) !important;
}

.bg-black {
	background-color: var(--black) !important;
}

.bg-port-gore {
	background-color: var(--port-gore) !important;
}

.cursor-pointer {
	cursor: pointer !important;
}

.opacity-04 {
	opacity: 0.4 !important;
}

.opacity-05 {
	opacity: 0.5 !important;
}

.light-theme .navbar-logo {
	background-image: var(--navbar-image-light);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.dark-theme .navbar-logo {
	background-image: var(--navbar-image-dark);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.navbar-logo {
	width: 300px;
	height: 60px;
}