:root{
	--main-color: rgb(38, 34, 98); 
	--main-gradient-color: #492f6d;
	--main-border-color: rgb(36, 24, 87);
	--secondary-border-color: rgb(35, 24, 75);
}

/* colors */
.text-info{
	color: var(--main-color) !important;
}

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

.bg-gradient-info {
	background: var(--main-color) linear-gradient(180deg, var(--main-gradient-color), var(--main-color)) repeat-x !important;
	color: #fff;
}

.border.border-info {
	border-color: var(--main-color) !important;
}

.card.bg-info {
    background-color:  var(--main-color) !important;
}



/* buttons */
.btn.btn-info{
	color: #fff;
	background-color: var(--main-color) !important;
	border-color: var(--main-color) !important;
	box-shadow: none;
}


.btn-info {
	color: #fff;
	background-color:  var(--main-color);
	border-color:  var(--main-border-color);
	box-shadow: none;
}

.btn-info:hover {
	color: #fff;
	background-color:  var(--main-color);
	border-color:  var(--main-border-color);
} 
  
.btn-info:focus, .btn-info.focus {
	color: #fff;
	background-color:  var(--main-color);
	border-color:  var(--main-border-color);
	box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}
  
  .btn-info.disabled, .btn-info:disabled {
	color: #fff;
	background-color:  var(--main-color);
	border-color: var(--main-color);
  }
  
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
	color: #fff;
	background-color: var(--main-border-color);
	border-color: var(--secondary-border-color);
}
  
.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
	box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}
  
.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle {
    color: #fff;
    background-color: var(--main-color);
    border-color:  var(--main-color);
}

.btn-outline-info {
  color: var(--main-color);
  border-color: var(--main-color);
}

.btn-outline-info:hover {
  color: #fff;
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.btn-outline-info:focus, .btn-outline-info.focus {
  box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.5);
}





/* cards */
.card-info:not(.card-outline) > .card-header {
	background-color: var(--main-color);
}