:root {
	--primary-color: #46B04A;
	--secondary-color: #BFE4C9;
	--btn-hover: #007531;
	--font-color: #000;
}

/******************* variable is set up for dynamic color updates from (index.js). ************************/
.card-header {
	background-color: var(--primary-color);
}

.text-gray,
.icon-green {
	color: var(--primary-color);
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .btn-green {
	background-color: var(--primary-color);
	color: var(--font-color);
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .btn-green:hover {
	background-color: var(--btn-hover);
	/*color: var(--font-color);*/
}

.sidebar-link.active {
	background: var(--primary-color);

}

.sidebar-link.active i,
.sidebar-link.active span {
	color: var(--font-color);
}

.sidebar-des:focus i {
	color: var(--primary-color);
}

.sidebar-des:focus {
	color: var(--primary-color);
}

.border-successs {
	border-color: var(--primary-color);
}

.fa-icon-green {
	border-top: solid 7px var(--primary-color);
}


.sidebar-link:hover {
	background: var(--secondary-color);
}

#Authentication-accordion .cardbackground,
#Authentication-view-accordion .cardbackground,
#accordionExample .cardbackground {
	color: var(--font-color);
	background: var(--secondary-color);
}

#offlineheader,
#onlineheader,
#formheader {
	background: var(--secondary-color);
	color: var(--font-color);
	font-size: 0.75rem;
	padding-top: 10px;
	margin-bottom: 0px;
}

.cardbackground {
	color: var(--font-color);
}

.btn-info:hover {
	background-color: var(--secondary-color);
	color: var(--font-color);
	border-color: var(--font-color);
}


.text-uppercase,
.head-des {
	background: var(--primary-color);
	color: var(--font-color);
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show>.btn-info.dropdown-toggle {
	background-color: var(--btn-hover);
	color: var(--font-color);
	/*border-color: var(--font-color);*/
	border: 2px solid var(--font-color);

}

.fillRed {
	fill: var(--primary-color);
}

.strokeRed {
	stroke: var(--primary-color);
}

.strokeWidthLimit {
	stroke-width: 3;
	stroke-miterlimit: 10;
}

.fillNone {
	fill: none;
}

.buttonCheck {
	color: var(--primary-color);
}

.greenFontClr {
	color: var(--primary-color);
}

.login100-form-title,
b.styl-colr-white,
.fontClr {
	color: var(--font-color);
}

.text-gray,
.grid-title,
.grid-pin-field,
.grind-digit,
.SQ-title,
#selectedAuth {
	color: var(--primary-color);
}

#btndevicereg,
#btnlgnchanegPinback,
#authenticate ,
#btnlgnchanegSecQues{
	background: var(--primary-color);
	color: var(--font-color);
}

#btndevicereg:hover,
#btnlgnchanegPinback:hover,
#authenticate:hover {
	background: var(--btn-hover);
	/*color: var(--font-color);*/
}

.login100-form-title.blackFontClr,
.login100-form-title>b.blackFontClr {
	color: black;
}

[data-background-color="orange"] {
	background: var(--primary-color);
	color: var(--font-color);
}

[data-background-color]:not([data-background-color="gray"]) a:not(.btn):not(.dropdown-item) {
	color: var(--font-color);
}

.userIconClr {
	color: var(--primary-color);
}

#upload_template1 {
	width: 200px;
	color: var(--font-color);
	background-color: var(--primary-color);
}

.note-details {
	border-left: 5px solid var(--primary-color);
}

.username1,
.text-clr {
	color: #5a5555;
}

.input100:focus,
input:focus {
	box-shadow: 0 0 5px rgb(61, 56, 70) !important
}

.logout-icon:hover {
	color: var(--primary-color);
}

.border-left {
	border-left: 12px solid var(--secondary-color) !important;
}

.btn-lgt:hover {
	color: var(--primary-color);
}

/*------------->   for save and update button  <-------------*/

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--font-color);
}

.btn-primary:hover {
	background: var(--btn-hover);
	border-color: var(--btn-hover);
	color: var(--font-color);
}

.btn-primary:focus{
	background: var(--btn-hover);
	border-color: var(--btn-hover);
	color: var(--font-color);
}

.btn-primary.disabled,
.btn-primary:disabled {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--font-color);
}

.btn-primary:focus {
	-webkit-box-shadow: 0 0 0 0.2rem var(--secondary-color);
	;
	box-shadow: 0 0 0 0.2rem var(--secondary-color);
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem var(--secondary-color);
}

#functionNameSpan {
	color: var(--primary-color);
}

/*------------->   for save and update button  <-------------*/


/*--Processing Loader Style*/
.custom-modal {
	display: none;
	position: relative;
	background-color: #fff;
	text-align: center;
	padding-top: 10px;
	border: 1px solid #fff;
	border-radius: 8px;
	width: 100px;
	height: 30px;
	margin: 0 auto;
	z-index: 3;
}

.custom-model-content {
	margin: 20% auto;
}

.custom-model-content>div {
	padding: 10px
}
.modal-confirm .modal-content {
	padding: 20px;
	border-radius: 5px;
	border: none;
	text-align: center;
	font-size: 14px;
}