/* https://coolors.co/user/palettes/6740d67a34cb9d000c2d24bd */
/*
 * 20314D --> dark-blue
 */
:root {
    --blue: #364f85;
    --purple: #7c27c6;
    --purple-rgb: rgb(124, 39, 198);
    --purple-shadow-rgb: rgb(124, 39, 198, .3);
    --green: #88a865;
    --grey: #b7cdcd;
    --white: #fff;
    --success-green: #9bbf87;
    --warning-yellow: #f4d47c;
    --error-red: #d98787;
    --bs-nav-link-color: #fff;
    --bs-primary: #1a73e8; /* Custom primary color */
    --bs-secondary: #e8eaed; /* Custom secondary color */
    --bs-table-bg: #364f85;
    --bs-border-color: var(--grey);
    --bs-badge-font-weight: 500;
    --bs-badge-border-radius: 2px;
    --bs-btn-bg: var(--blue);
}

/*
 * Tables
 */
.table {
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-color: var(--bs-emphasis-color);
  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
  --bs-table-active-color: var(--bs-emphasis-color);
  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
  --bs-table-hover-color: var(--bs-emphasis-color);
  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
}

/*
 * Badges
 */
.badge {
    --bs-badge-font-weight: 500;
    --bs-badge-border-radius: 2px;
}
.bg-success {
  background-color: var(--white) !important;
  color: var(--success-green);
  border: solid 1px var(--success-green);
}
.bg-warning {
  background-color: var(--white) !important;
  color: var(--warning-yellow);
  border: solid 1px var(--warning-yellow);
}
.bg-danger {
  background-color: var(--white) !important;
  color: var(--error-red);
  border: solid 1px var(--error-red);
}

/*
 * Buttons
 */
.btn {
  text-transform: capitalize;
  white-space: nowrap;
}
.btn.btn-primary {
  background-color: var(--blue);
}

body {
  letter-spacing: .02em;
}

a {
  color: var(--blue);
}

.table thead th {
    background-color: var(--green);
    color: var(--white);
    border: none;
}

/* 
 * Header
 */
nav {
  background: linear-gradient(30deg, #7C27C6, #20314D);
}
.navbar {
    background-color: var(--purple);
}
.navbar .nav-link {
    color: var(--white);
    font-size: 1.05em;
    text-transform: capitalize;
    margin-right: 10px;
}
.navbar-brand {
    font-family: 'Nunito', 'Raleway', sans-serif;
    color: var(--white);
}
.navbar-brand:hover {
    color: var(--white);
}

.navbar-brand i.fas {
    font-size: 40px;
    margin-top: -8px;
}
.navbar ul.navbar-nav {
  margin-right: 0 !important;
}

.navbar-brand .product-name {
  font-size: 1.25em;
  margin-top: -5px;
}
/* Gradient on specific letters */
.navbar-brand .animated-gradient {
    background: linear-gradient(
        30deg, /* Angle of the gradient */
        var(--white), /* Starting color */
        var(--green) 25%, /* Blend into blue */
        var(--blue) 50%, /* Midpoint with green */
        var(--green) 75%, /* Blend into grey */
        var(--white) 100% /* Ending with white */
    );
    /*background: linear-gradient(90deg, #364F6B, #4D638C, #5C3A63, #E5C07B);*/
    background-size: 300%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradientShift 30s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}