/*
Created by Jacobs Technology
*/
/* 
    Created on : May 6, 2021, 1:17:11 PM
    Author     : BrandJW
*/
/* 
CSS Class Properties follow the order:
    - Layout Properties (position, float, clear, display)
    - Box Model Properties (width, height, margin, padding)
    - Visual Properties (color, background, border, box-shadow)
    - Typography Properties (font-size, font-family, text-align, text-transform)
    - Misc Properties (cursor, overflow, z-index)

Button classes must use a specific order:
    1. btn-color - base button class
    2. btn-sm, btn-md, btn-lg - denotes button size
    3. bc-blue, bc-green, bc-purple, ... - denotes button color
    4. bc-em, ... - extra button effects/properties em = "emphasis"
*/


/* Base Button*/
.ui-button.btn-color {
    display: inline-block;
    
    color: white;
    background: none;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: .5rem;
    -moz-border-radius: .5rem;
    -webkit-border-radius: .5rem;
      
    text-align: center;
    text-decoration: none;
    vertical-align: middle;   
    font-size: 1.15rem;
    font-weight: 700;
    
    cursor: pointer;
}

.ui-button.btn-color.bc-sm:disabled {
    /*border: 1px #343a40;*/
    background-color: #f8f9fa;
    color: #343a40;
    border-color: #343a40;
    cursor: none;
}

.ui-button.btn-color.bc-sm:disabled:hover {
    /*border: 1px #343a40;*/
    background-color: #f8f9fa;
    color: #343a40;
    border-color: #343a40;
    cursor: none;
}

.ui-button.btn-color.bc-md:disabled {
    /*border: 1px #343a40;*/
    background-color: #f8f9fa;
    color: #343a40;
    border-color: #343a40;
    cursor: none;
}

.ui-button.btn-color.bc-md:disabled:hover {
    /*border: 1px #343a40;*/
    background-color: #f8f9fa;
    color: #343a40;
    border-color: #343a40;
    cursor: none;
}

.ui-button.btn-color.bc-lg:disabled {
    /*border: 1px #343a40;*/
    background-color: #f8f9fa;
    color: #343a40;
    border-color: #343a40;
    cursor: none;
}

.ui-button.btn-color.bc-lg:disabled:hover {
    /*border: 1px #343a40;*/
    background-color: #f8f9fa;
    color: #343a40;
    border-color: #343a40;
    cursor: none;
}


/* Button Sizes */
.ui-button.btn-color.bc-es {
    font-size: .8rem;
    width: 8rem;
    margin: .2rem;
    padding: .2rem 1rem;
}

.ui-button.btn-color.bc-sm {
    width: 12rem;
    margin: .4rem;
    /*padding: .3rem 1rem;*/
}

.ui-button.btn-color.bc-md {
    width: 18rem;
    margin: .4rem;
    padding: .7rem 2rem;
}

.ui-button.btn-color.bc-lg {
    width: 24rem;
    max-width: 65%;
    margin: .4rem;
    padding: .7rem 2rem;
}


/*Button Colors*/
.ui-button.btn-color.bc-blue{
    background-color: #19559a;
    border-color: #19559a;
}

.ui-button.btn-color.bc-blue:hover {
    background-color: #123d6e;
    border-color: #123d6e;
}

.ui-button.btn-color.bc-blue:focus {
    background-color: #123d6e;
    border-color: #123d6e;
}

.ui-button.btn-color.bc-blue-inv {
    background-color: white;
    border-color: white;
    color: #19559a;
}

.ui-button.btn-color.bc-blue-inv:hover {
    background-color: #123d6e;
    border-color: white;
    color: white;
}

.ui-button.btn-color.bc-blue-inv:focus {
    background-color: #123d6e;
    border-color: white;
    color: white;
}

.ui-button.btn-color.bc-green{
    background-color: #2d5d33;
    border-color: #2d5d33;
}

.ui-button.btn-color.bc-green:hover {
    background-color: #2d5d33;
    border-color: #2d5d33;
}

.ui-button.btn-color.bc-green:focus {
    background-color: #2d5d33;
    border-color: #2d5d33;
}

.ui-button.btn-color.bc-green-inv{
    color: #2d5d33;
    background-color: white;
    border-color: #2d5d33;
}

.ui-button.btn-color.bc-green-inv:hover {
    color: white;
    background-color: #2d5d33;
    border-color: #2d5d33;
}

.ui-button.btn-color.bc-green-inv:focus {
    color: white;
    background-color: #2d5d33;
    border-color: #2d5d33;
}

.ui-button.btn-color.bc-purple{
    background-color: #6c3d94;
    border-color: #6c3d94;
}

.ui-button.btn-color.bc-purple:hover {
    background-color: #4f2c6d;
    border-color: #4f2c6d;
}

.ui-button.btn-color.bc-purple:focus {
    background-color: #4f2c6d;
    border-color: #4f2c6d;
}

.ui-button.btn-color.bc-purple-inv{
    color: #6c3d94;
    background-color: white;
    border-color: #6c3d94;
}

.ui-button.btn-color.bc-purple-inv:hover {
    color: white;
    background-color: #4f2c6d;
    border-color: #4f2c6d;
}

.ui-button.btn-color.bc-purple-inv:focus {
    color: white;
    background-color: #4f2c6d;
    border-color: #4f2c6d;
}

.ui-button.btn-color.bc-red{
    background-color: #b21015;
    border-color: #b21015;
}

.ui-button.btn-color.bc-red:hover {
    background-color: #b21015;
    border-color: #b21015;
}

.ui-button.btn-color.bc-red:focus {
    background-color: #b21015;
    border-color: #b21015;
}

.ui-button.btn-color.bc-red-inv{
    color: #b21015;
    background-color: white;
    border-color: #b21015;
}

.ui-button.btn-color.bc-red-inv:hover {
    color: white;
    background-color: #b21015;
    border-color: #b21015;
}

.ui-button.btn-color.bc-red-inv:focus {
    color: white;
    background-color: #b21015;
    border-color: #b21015;
}

/*Not Used*/
.bc-yellow{
    background-color: #814d02;
    border-color: #814d02;
}

/* Extra Button Effects */
.ui-button.btn-color.bc-em {
    font-size: 1.15rem;
    font-weight: 700;
}