/* ----------------------
     BASE BUTTON STYLE
   ---------------------- */
button, .button {
    /*padding: 8.5px 20px;*/
    padding: 10px 20px;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    outline: none;
    position: relative;
}

    .button > label, .button > a {
        line-height: 0;
        vertical-align: baseline;
        color: inherit;
        cursor: inherit;
    }


    button:not(:first-of-type), .button:not(:first-of-type) {
        margin-left: 10px;
    }
/* ----------------------
     PRIMARY BUTTONS
   ---------------------- */


/*The primary button style is intended to be used for a page or dialog’s primary call to action and are intended to promote the most probable, 
    ideal action (e.g., a Save button in a modal dialog).  In most instances, primary style buttons should not appear multiple times on a 
    particular page or dialog.  If a page has a main call to action, all subsequent functions, links, or calls to action should be accomplished 
    with a less prominent button style.*/

.button-primary {
    text-align: center;
    color: #ffffff;
    background-color: #009bf2;
    height: auto;
    width: auto;
    border: none;
    /*margin: 0 5px;*/
    border-radius: 5px;
    position: relative;
    text-transform: uppercase;
}

    .button-primary:not(.border-free):hover, .rapid-primary-button:hover {
        background-color: #35b6ff;
    }

    .button-primary:not(.border-free):active, .rapid-primary-button:active,
    .button-primary:not(.border-free):focus, .rapid-primary-button:focus {
        background-color: #0073ae;
        box-shadow: 0 0 1px 1px grey;
        box-shadow: none;
    }


        .rapid-primary-button:focus::after, .rapid-primary-button:active::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 93%;
            height: 85%;
            outline: 1px solid rgb(245,245,245);
            z-index: 2;
            pointer-events: none;
        }


    .button-primary:not(.border-free):disabled, .rapid-primary-button:disabled {
        background-color: #9bd7fb;
    }




/* ----------------------
     SECONDARY BUTTONS
   ---------------------- */
/* The secondary button style is intended to be used for secondary calls to action and can potentially be used multiple times on a particular page or dialog.*/



.button-secondary {
    text-align: center;
    color: #ffffff;
    background-color: #a5a8ac;
    height: auto;
    width: auto;
    border: none;
    margin: 0;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
}

    .button-secondary a {
        color: #ffffff;
    }

    .button-secondary ul.option-dropdown a {
        color: inherit;
    }

    .button-secondary:not(.border-free):hover, .rapid-cancel-button:hover {
        background-color: #898c8f;
        background-color: #c7cace;
    }

    .button-secondary:not(.border-free):active, .rapid-cancel-button:active,
    .button-secondary:not(.border-free):focus, .rapid-cancel-button:focus {
        background-color: #67686a;
    }

    .button-secondary:not(.border-free):disabled, .rapid-cancel-button:disabled {
        background-color: #d2d3d5;
    }




/* ----------------------
     TERTIARY BUTTONS
   ---------------------- */

/*  The tertiary button style is intended to be used for less prominent functions and can potentially be used multiple times on a particular page or dialog.*/
.button-tertiary {
    text-align: center;
    color: #4c4c4c;
    height: auto;
    width: auto;
    text-transform: uppercase;
    border: none;
    margin: 0 5px;
    border-radius: 5px;
    background-color: #ecf0f2;
    display: inline-block;
    position: relative;
}

    .button-tertiary:not(.border-free):hover {
        background-color: #f4f6f7;
    }

    .button-tertiary:not(.border-free):active,
    .button-tertiary:not(.border-free):focus {
        background-color: #c9cdce;
    }

    .button-tertiary:not(.border-free):disabled {
        background-color: #f8f9fa;
        color: #b3b4b4;
    }




/* ----------------------
     QUATERNARY  BUTTONS
   ---------------------- */

/*  The quaternary button style is intended to be used for navigational instructions for users. Used for pages such as vendor details, employee performance etc.*/

.button-quaternary {
    text-align: center;
    color: #6a6e73;
    padding: 6px 10px;
    height: auto;
    width: auto;
    border: 1px solid #c9d7df;
    /*margin: 0 5px;*/
    background-color: #ffffff;
    display: inline-block;
    position: relative;
    text-transform: capitalize;
}

    .button-quaternary:not(.border-free):hover {
        background-color: #f8f9fa;
        border: 1px solid #c9d7df;
    }

    .button-quaternary:not(.border-free):active,
    .button-quaternary:not(.border-free):focus {
        background-color: #eff0f1;
        border: 1px solid #c9d7df;
    }

    .button-quaternary:not(.border-free):disabled {
        background-color: #fff;
        border: 1px solid #e9eff2;
        color: #c3c5c7;
    }

/*.circular-button {
    border-radius: 50%;
    background-color: #009bf2;
    color: #fff;
}

    .circular-button .icon-svg {
        fill: #FFF;
    }*/
/* ----------------------
     TABLE  BUTTONS
   ---------------------- */
.primary-add-table-button {
    text-align: center;
    padding: 7px 20px;
    color: #ffffff;
    background-color: #2998f0;
    border: none;
    position: relative;
    text-transform: capitalize;
    border-radius: 1px;
    cursor: pointer;
}

    .primary-add-table-button:not(.border-free):hover,
    .primary-add-table-button:hover {
        background-color: #35b6ff;
    }

    .primary-add-table-button:not(.border-free):active,
    .primary-add-table-button:not(.border-free):focus {
        background-color: #0073ae;
        box-shadow: 0 0 1px 1px grey;
        box-shadow: none;
    }
/*----------------------------------------------------*/

/* ----------------------
     TABLE  BUTTONS
   ---------------------- */

/*  The quaternary button style is intended to be used for navigational instructions for users. Used for pages such as vendor details, employee performance etc.*/

.button-table {
    text-align: center;
    color: #6a6e73;
    padding: 3px 10px;
    height: auto;
    width: auto;
    border: 1px solid #c9d7df;
    margin: 0 5px;
    background-color: #ffffff;
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .button-table:hover {
        background-color: #f8f9fa;
        border: 1px solid #c9d7df;
    }

    .button-table:active {
        background-color: #eff0f1;
        border: 1px solid #c9d7df;
    }

    .button-table:disabled {
        background-color: #fff;
        border: 1px solid #e9eff2;
        color: #c3c5c7;
    }

.button-arrow-bottom:before {
    content: '';
    width: 10px;
    height: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #c9d7df;
    border-left-color: transparent;
    border-top-color: transparent;
    z-index: 2;
    position: absolute;
    bottom: -6px;
    left: 13px;
    background-color: inherit;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.button-arrow-bottom-left:before {
    content: '';
    width: 10px;
    height: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #c9d7df;
    border-left-color: transparent;
    border-top-color: transparent;
    z-index: 2;
    position: absolute;
    bottom: -6px;
    left: 8px;
    background-color: inherit;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ----------------------
         ICON BUTTONS
   ---------------------- */
.icon-button {
    text-align: center;
    background-color: transparent;
    border: none;
    padding: 5px;
    border-radius: 3px;
    color: rgb(120,120,120);
    font-style: normal;
}

    .icon-button:hover {
        background-color: rgba(223, 224, 225,0.5);
    }

    .icon-button:active {
        background-color: rgba(223, 224, 225,1);
    }

    .icon-button:disabled {
        background-color: rgba(223, 224, 225,0);
    }

    .icon-button.unselected-state, .unselected-state > .icon-button {
        background-color: transparent;
        color: rgb(120,120,120);
        fill: rgb(100,100,100);
    }

    .icon-button.selected-state, .selected-state > .icon-button {
        background-color: #2096F3;
        color: #FFF;
        fill: rgb(255, 255, 255);
    }

    .icon-button.selected-grey {
        background-color: rgb(240,240,240);
        color: #2096F3;
        fill: #2096F3;
    }

/*----------------------------------------*/
/*       BorderLess Buttons Start         */
/*----------------------------------------*/
button.border-free, .button.border-free, .custom-button.border-free {
    position: relative;
    border: none;
    padding: 8.5px 0;
    color: #2096F3;
    color: #2b98f0;
    font-size: 0.92rem;
    user-select: none;
    outline: none;
}

    button.border-free > *, .button.border-free > * {
        color: #2096F3;
        fill: #2096F3;
        cursor: pointer;
        outline: none;
    }

    button.border-free:hover > *, .button.border-free:hover > *, button.border-free:hover, .button.border-free:hover {
        color: #0965ae;
        outline: none;
    }

    .button.border-free:active, button.border-free:active {
        outline: none;
    }

    .button.border-free:disabled, button.border-free:disabled {
        color: rgb(180,180,180);
    }
/*----------------------------------------*/
/*       BorderLess Buttons END           */
/*----------------------------------------*/


.circular-button {
    border-radius: 50%;
    text-align: center;
    background-color: rgba(223, 224, 225,0);
    padding: 2px 5px;
    border: 1px solid #009BF2;
    width: 30px;
    height: 30px;
}

    .circular-button .icon-svg {
        fill: #009BF2;
        text-align: center;
        vertical-align: middle;
        width: 17px;
        height: 17px;
    }
/******Add New Button for Rapid Entry******/
.rapid-primary-button {
    text-align: center;
    padding: 7px 20px;
    color: #ffffff;
    background-color: #2998f0;
    border: none;
    position: relative;
    text-transform: capitalize;
    border-radius: 1px;
    cursor: pointer;
}

.row-primary-action {
    text-align: center;
    padding: 7px 20px;
    background-color: transparent;
    color: #2b98f0;
    border: none;
    position: relative;
    text-transform: capitalize;
    border-radius: 1px;
    cursor: pointer;
}

.rapid-cancel-button {
    background-color: #a5a8ac;
    color: #FFF;
    padding: 6px 10px;
    border-radius: 1px;
    border: none;
}

    .rapid-cancel-button .icon-svg {
        width: 13px;
        height: 22px;
        fill: #FFF;
    }

/*Custom Upload Button*/
.custom-upload {
    padding: 5px;
}

    .custom-upload input {
        cursor: pointer;
        display: block;
        width: 100%;
        height: 50px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }

.createNewBtn::before {
    content: "CREATE NEW";
}

.tab-header-item-action-section > .button-quaternary.action-button {
    margin-left: 25px;
}

.action-button > label::before {
    content: "Actions";
}

.btnSaveNew::before {
    content: "Save & Add New";
}

.btnSave::before {
    content: "Save";
}

.btnCancel::before {
    content: "cancel";
}

.btnUpdate::before {
    content: "update";
}

.btnSaveClose::before {
    content: "Save & Close";
}

.doneBtn::before {
    content: "Done";
    white-space: nowrap;
}

.rowDetail::before {
    content: "Detail";
}

.btnLoading {
    opacity: 0.5;
    pointer-events: none !important;
}

/*.btnLoading::before {
     font-family: 'FontAwesome';
    content: "\f110" !important;
     webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8);
}*/

.btnSaveNew.button-primary:not(.border-free):focus,
.btnSave.button-primary:not(.border-free):focus {
    background-color: #296598;
}

/*****Button used in user notifications****/
.button-notifications {
    padding: 2px 10px;
    text-transform: none;
}