:root {
  --bs-blue: #63B3ED;
  --bs-indigo: #596CFF;
  --bs-purple: #ef7e03 /*OLD #6f42c1*/;
  --bs-pink: #ff5a88; /*OLD #d63384*/
  --bs-red: #F56565;
  --bs-orange: #fd7e14;
  --bs-ocra-yellow: #f6b407;
  --bs-yellow: #FBD38D;
  --bs-green: #81E6D9;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f2f1f1 /*#f8f9fa*/;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #cc083f;
  --bs-secondary: #bfb9ba;
  --bs-success: #2dce89;
  --bs-info: #11cdef;
  --bs-warning: #fb6340;
  --bs-danger: #d42e5d;
  --bs-light: #e9ecef;
  --bs-dark: #393537;
  --bs-white: #fff;
  --bs-primary-rgb: 94, 114, 228;
  --bs-secondary-rgb: 131, 146, 171;
  --bs-success-rgb: 45, 206, 137;
  --bs-info-rgb: 17, 205, 239;
  --bs-warning-rgb: 251, 99, 64;
  --bs-danger-rgb: 245, 54, 92;
  --bs-light-rgb: 233, 236, 239;
  --bs-dark-rgb: 52, 71, 103;
  --bs-white-rgb: 255, 255, 255;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 103, 116, 142;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-gradient-primary: linear-gradient(310deg, #fac300 0%, #ce194c 100%);
  --bs-gradient-secondary: linear-gradient(310deg, #625e5f 0%, #bfb9ba 100%);
  --bs-gradient-danger: linear-gradient(310deg, #cc083f 0%, #ff5a88 100%);
  --bs-gradient-warning: linear-gradient(310deg, #ef7e03 0%, #f6b407 100%);
  --bs-gradient-success: linear-gradient(310deg, #2dce89 0%, #28B87A 100%);
  --bs-gradient-light: linear-gradient(310deg, #DDDCDC 0%, #F0EEEE 100%);
  --bs-gradient-faded-danger: radial-gradient(370px circle at 80% 50%, rgba(255, 90, 136,0.5) 0, #cc083f 100%);
  --bs-card-body-gray-100: #fbf8f8;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #878283;
  --bs-body-bg: #fff;
}

body {
  color: var(--bs-body-color)!important;;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
label,
form-control-label {
  color: var(--bs-dark)!important;
}

a.paginate_button.current {
  background-image: var(--bs-gradient-primary) !important;
}

.text-primary {
  color: var(--bs-primary)!important;
}

.text-white {
    color: var(--bs-white) !important;
}

.text-pink {
  color: var(--bs-pink)!important;
}

.text-purple {
  color: var(--bs-purple)!important;
}

.text-danger {
  color: var(--bs-danger)!important;
}

.text-dark {
  color: var(--bs-dark)!important;
}

.nav-item .nav-link .text-info {
  color: var(--bs-ocra-yellow)!important;
}

.bg-gray-100 {
  background-color: var(--bs-gray-100)!important;
}

.card-body.bg-gray-100 {
  background-color:  var(--bs-card-body-gray-100)!important;
}


.btn-primary {
  color: #FFF;
  background-color: var(--bs-primary)!important;
  border-color: var(--bs-primary)!important;
}

.btn-primary:hover {
  background-color: var(--bs-danger)!important;
  border-color: var(--bs-danger)!important;
}

.btn-outline-purple {
  color: var(--bs-purple)!important;
  border-color: var(--bs-purple)!important;
}

.btn-outline-purple:hover {
  color: #FFF!important;
  background-color: var(--bs-purple)!important;
  border-color: var(--bs-purple)!important;
}

.btn-outline-danger {
  color: var(--bs-danger)!important;
  border-color: var(--bs-danger)!important;
}

.btn-outline-danger:hover {
  color: #FFF!important;
  background-color: var(--bs-primary)!important;
  border-color: var(--bs-primary)!important;
}

.btn-outline-dark {
  color: var(--bs-dark)!important;
  border-color: var(--bs-dark)!important;
}

.btn-outline-dark:hover {
  color: #FFF!important;
  background-color: var(--bs-dark)!important;
  border-color: var(--bs-dark)!important;
}

.badge.bg-primary {
  background: var(--bs-primary)!important;
}

.bg-primary {
  background: var(--bs-primary)!important;
}

.bg-gradient-primary {
  background-image: var(--bs-gradient-primary)!important;
}

.text-gradient.text-primary {
  background-image: var(--bs-gradient-primary);
}

a.bg-gradient-primary:hover, button.bg-gradient-primary:hover {
  background-image: linear-gradient(310deg, #ef7e03 0%, #ef7e03 100%) !important;
}

.bg-gradient-profile {
  background-image: -moz-linear-gradient(0deg, #ffeb00 0%, #ef7e03 35%, #cd0d3d 70%, #eb346b 100%)!important;
  background-image: linear-gradient(320deg, #ffeb00 0%, #ef7e03 35%, #cd0d3d 70%, #eb346b 100%)!important;
  background-image: -ms-linear-gradient(0deg, #ffeb00 0%, #ef7e03 35%, #cd0d3d 70%, #eb346b 100%)!important;
}

.bg-gradient-secondary {
  background-image:  var(--bs-gradient-secondary)!important;
}

.bg-gradient-secondary:hover {
  background-image: linear-gradient(310deg, #bfb9ba 0%, #bfb9ba 100%)!important;
}

.bg-gradient-danger {
  background-image: var(--bs-gradient-danger)!important;
}

.bg-gradient-warning {
  background-image: var(--bs-gradient-warning)!important;
}

.bg-gradient-light {
  background-image: var(--bs-gradient-light)!important;
}

.bg-gradient-success {
  background-image: var(--bs-gradient-success)!important;
}	

.bg-gradient-faded-primary {
  background-image: var(--bs-gradient-warning)!important;
}

.bg-gradient-faded-danger {
  background-image: var(--bs-gradient-faded-danger)!important;
}

body.paybills .page-header.pt-5 {
  padding-top: 5.5rem !important;
}

.btn-outline-primary {
  color: var(--bs-white)!important;
  border-color: var(--bs-white)!important;
}

.navbar .btn-outline-primary {
  color: var(--bs-primary)!important;
  border: 1px solid rgba(204,8,63, 0.4)!important;
  background-color: rgba(255,255,255, 0.65)!important;
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)!important;
}

.form-control.btn-outline-primary {
  color: #076ce5 !important;
  border-color: #076ce5 !important;
  opacity: 1 !important;
}

@media (min-width: 768px) and (max-width: 810px){

}