/* Override Bootstrap primary color */
.btn-primary {
    background-color: #56658A;
    border-color: #56658A;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #41456b; /* Adjusted complementary color for hover/focus */
    border-color: #41456b;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

/* Override Bootstrap secondary color */
.btn-secondary {
    background-color: #95a5a6;
    border-color: #95a5a6;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #708080; /* Complementary color for hover/focus */
    border-color: #708080;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

/* Override Bootstrap success color */
.btn-success {
    background-color: #2ecc71;
    border-color: #2ecc71;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #1fa857; /* Complementary color for hover/focus */
    border-color: #1fa857;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

/* Override Bootstrap danger color */
.btn-danger {
    background-color: #e74c3c;
    border-color: #e74c3c;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #b93729; /* Complementary color for hover/focus */
    border-color: #b93729;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

/* Override Bootstrap warning color */
.btn-warning {
    background-color: #f39c12;
    border-color: #f39c12;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #d78b0f; /* Complementary color for hover/focus */
    border-color: #d78b0f;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

/* Override Bootstrap info color */
.btn-info {
    background-color: #3498db;
    border-color: #3498db;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #2078b0; /* Complementary color for hover/focus */
    border-color: #2078b0;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

/* Override Bootstrap dark color */
.btn-dark {
    background-color: #34495e;
    border-color: #34495e;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: #1f2a3a; /* Complementary color for hover/focus */
    border-color: #1f2a3a;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

/* Override Bootstrap light color */
.btn-light {
    background-color: #ecf0f1;
    border-color: #ecf0f1;
    color: #2c3e50;
    transition: background-color 0.3s ease;
}

.btn-light:hover,
.btn-light:focus {
    background-color: #d6e1e4; /* Complementary color for hover/focus */
    border-color: #d6e1e4;
    color: #2c3e50;
    transition: background-color 0.3s ease;
}

/* Override Bootstrap outline primary button */
.btn-outline-primary {
    color: #3498db;
    border-color: #3498db;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #3498db; /* Complementary color for hover/focus */
    border-color: #3498db;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override Bootstrap outline secondary button */
.btn-outline-secondary {
    color: #95a5a6;
    border-color: #95a5a6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #95a5a6; /* Complementary color for hover/focus */
    border-color: #95a5a6;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override Bootstrap outline success button */
.btn-outline-success {
    color: #1f2a3a;
    border-color: #2ecc71;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: #2ecc71; /* Complementary color for hover/focus */
    border-color: #2ecc71;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override Bootstrap outline danger button */
.btn-outline-danger {
    color: #e74c3c;
    border-color: #e74c3c;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #e74c3c; /* Complementary color for hover/focus */
    border-color: #e74c3c;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override Bootstrap outline warning button */
.btn-outline-warning {
    color: #f39c12;
    border-color: #f39c12;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: #f39c12; /* Complementary color for hover/focus */
    border-color: #f39c12;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override Bootstrap outline info button */
.btn-outline-info {
    color: #3498db;
    border-color: #3498db;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: #3498db; /* Complementary color for hover/focus */
    border-color: #3498db;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override Bootstrap outline dark button */
.btn-outline-dark {
    color: #34495e;
    border-color: #34495e;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: #34495e; /* Complementary color for hover/focus */
    border-color: #34495e;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override Bootstrap outline light button */
.btn-outline-light {
    color: #ecf0f1;
    border-color: #ecf0f1;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: #ecf0f1; /* Complementary color for hover/focus */
    border-color: #ecf0f1;
    color: #2c3e50;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Purple button */
.btn-custom-purple {
    background-color: purple;
    color: white;
    border: none;
}

/* Purple button hover and focus states */
.btn-custom-purple:hover, .btn-custom-purple:focus {
    background-color: #800080;
    color: white;
}

/* Maroon button */
.btn-custom-maroon {
    background-color: maroon;
    color: white;
    border: none;
}

/* Maroon button hover and focus states */
.btn-custom-maroon:hover, .btn-custom-maroon:focus {
    background-color: #800000;
    color: white;
}

/* Outline version of the buttons */
.btn-outline-custom-purple {
    color: purple;
    background-color: transparent;
    border: 1px solid purple;
}

/* Outline version of the buttons hover and focus states */
.btn-outline-custom-purple:hover, .btn-outline-custom-purple:focus {
    color: white;
    background-color: purple;
    border: 1px solid purple;
}

.btn-outline-custom-maroon {
    color: maroon;
    background-color: transparent;
    border: 1px solid maroon;
}

.btn-outline-custom-maroon:hover, .btn-outline-custom-maroon:focus {
    color: white;
    background-color: maroon;
    border: 1px solid maroon;
}