/*=================================================
=                 Base Buttons                    =
=================================================*/

/* #region Default Button */

[role=button]
{
    cursor: pointer;
}

button {
    text-align: inherit;
    color: inherit;
    background-color: inherit;
    padding: 0;
    border: 0;
}

.btn {
    padding: .4em 1em;
    line-height: 1.4;
    cursor: pointer;
    text-align: center;
    background-color: #f6f6f6;
    color: #444;
    display: inline-block;
    text-decoration: none;
    transition: all .3s ease-in-out;
    border: 1px solid #ddd;
    white-space: nowrap;
    background-image: none;
    vertical-align: middle;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .btn:hover {
        background-color: #e9e9e9;
        border-color: #ccc;
        text-decoration: none;
        transition: all .3s ease-in-out;
        color: #444;
    }

    .btn:focus {
        outline: 0; /* remove default styling in chrome */
    }

/* #endregion Default Button */


/* #region Button Sizes */

.btn.btn-xs
{
    font-size: .7em;
}

.btn.btn-s
{
    font-size: .9em;
}

.btn.btn-m
{
    font-size: 1.2em;
}

.btn.btn-l
{
    font-size: 1.5em;
    padding-top: .3em;
    padding-bottom: .3em;
    line-height: 1.3;
}

.btn.btn-xl
{
    font-size: 2em;
    padding-top: .2em;
    padding-bottom: .2em;
    line-height: 1.2;
}

/* #endregion Button Sizes */


/* #region Button Colors */

.btn.btn-blue
{
    background-color: #4285f4;
    border-color: #1c6ff8;
    color: #fff;
}

    .btn.btn-blue:hover
    {
        background-color: #1762e0;
        border-color: #0d54cb;
        color: #fff;
    }

.btn.btn-navy
{
    background-color: #4360ae;
    border-color: #334c92;
    color: #fff;
}

    .btn.btn-navy:hover
    {
        background-color: #243d81;
        border-color: #1a3889;
        color: #fff;
    }

.btn.btn-red
{
    background-color: #cc3232;
    border-color: #ad2828;
    color: #fff;
}

    .btn.btn-red:hover
    {
        background-color: #9f1919;
        border-color: #8e1313;
        color: #fff;
    }

.btn.btn-black
{
    background-color: #555;
    border-color: #000;
    color: #fff;
}

    .btn.btn-black:hover
    {
        background-color: #111;
        border-color: #000;
        color: #fff;
    }

.btn.btn-green
{
    background-color: #298900;
    border-color: #257602;
    color: #fff;
}

    .btn.btn-green:hover
    {
        background-color: #257901;
        border-color: #236b04;
        color: #fff;
    }

.btn.btn-white
{
    background-color: #fff;
    border: 1px solid #ddd;
    color: #444;
}

    .btn.btn-white:hover
    {
        background-color: #efefef;
        border: 1px solid #ddd;
        color: #444;
    }

.btn.btn-outline-grey,
.btn.btn-outline-gray
{
    background-color: #fff;
    border: 2px solid #555;
    color: #444;
}

    .btn.btn-outline-grey:hover,
    .btn.btn-outline-gray:hover
    {
        background-color: #555;
        border-color: #555;
        color: #fff;
    }

.btn.btn-outline-blue
{
    background-color: #fff;
    border: 2px solid #4285f4;
    color: #1755bd;
}

    .btn.btn-outline-blue:hover
    {
        background-color: #4285f4;
        border-color: #4285f4;
        color: #fff;
    }

/* #endregion Button Colors */


/* #region Button Utilities */

.btn.btn-rounded {
    border-radius: 3px;
}

.btn.btn-block
{
    display: block;
}

.btn.btn-wide
{
    padding-left: 3em;
    padding-right: 3em;
}

.btn.btn-submit {
    padding: .4em 1em;
}

/* #endregion Button Utilities */


/* #region Depcrated - removed color and size prefixes in the above styles to streamline the syntax */

.btn-size-xs {
    font-size: .8em;
}

.btn-size-s {
    font-size: .9em;
}

.btn-size-m {
    font-size: 1.2em;
}

.btn-size-l {
    font-size: 2em;
}

.btn.btn-color-blue {
    background: rgb(124,136,244); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(124,136,244,1) 1%, rgba(12,111,249,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(124,136,244,1)), color-stop(100%,rgba(12,111,249,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(124,136,244,1) 1%,rgba(12,111,249,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(124,136,244,1) 1%,rgba(12,111,249,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(124,136,244,1) 1%,rgba(12,111,249,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(124,136,244,1) 1%,rgba(12,111,249,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c88f4', endColorstr='#0c6ff9',GradientType=0 ); /* IE6-9 */
    color: #fff;
}

.btn.btn-color-rblue {
    background: rgb(104,116,226); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(104,116,226,1) 0%, rgba(130,122,239,1) 50%, rgba(100,102,244,1) 51%, rgba(64,96,214,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(104,116,226,1)), color-stop(50%,rgba(130,122,239,1)), color-stop(51%,rgba(100,102,244,1)), color-stop(100%,rgba(64,96,214,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(104,116,226,1) 0%,rgba(130,122,239,1) 50%,rgba(100,102,244,1) 51%,rgba(64,96,214,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(104,116,226,1) 0%,rgba(130,122,239,1) 50%,rgba(100,102,244,1) 51%,rgba(64,96,214,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(104,116,226,1) 0%,rgba(130,122,239,1) 50%,rgba(100,102,244,1) 51%,rgba(64,96,214,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(104,116,226,1) 0%,rgba(130,122,239,1) 50%,rgba(100,102,244,1) 51%,rgba(64,96,214,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6874e2', endColorstr='#4060d6',GradientType=0 ); /* IE6-9 */
    color: #fff;
}

.btn.btn-color-green {
    background: rgb(113,193,112); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(113,193,112,1) 0%, rgba(55,147,42,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(113,193,112,1)), color-stop(100%,rgba(55,147,42,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(113,193,112,1) 0%,rgba(55,147,42,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(113,193,112,1) 0%,rgba(55,147,42,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(113,193,112,1) 0%,rgba(55,147,42,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(113,193,112,1) 0%,rgba(55,147,42,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71c170', endColorstr='#37932a',GradientType=0 ); /* IE6-9 */
    color: #fff;
}

.btn.btn-color-rgreen {
    background: rgb(104,204,91); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(104,204,91,1) 1%, rgba(75,216,94,1) 50%, rgba(61,206,93,1) 51%, rgba(28,183,11,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(104,204,91,1)), color-stop(50%,rgba(75,216,94,1)), color-stop(51%,rgba(61,206,93,1)), color-stop(100%,rgba(28,183,11,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(104,204,91,1) 1%,rgba(75,216,94,1) 50%,rgba(61,206,93,1) 51%,rgba(28,183,11,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(104,204,91,1) 1%,rgba(75,216,94,1) 50%,rgba(61,206,93,1) 51%,rgba(28,183,11,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(104,204,91,1) 1%,rgba(75,216,94,1) 50%,rgba(61,206,93,1) 51%,rgba(28,183,11,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(104,204,91,1) 1%,rgba(75,216,94,1) 50%,rgba(61,206,93,1) 51%,rgba(28,183,11,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68cc5b', endColorstr='#1cb70b',GradientType=0 ); /* IE6-9 */
    color: #fff;
}

.btn.btn-color-ltgrey {
    color: #444;
    background: rgb(242,242,242); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(201,201,201,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(100%,rgba(201,201,201,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(201,201,201,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(201,201,201,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(201,201,201,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(201,201,201,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
}

.btn.btn-color-ltgrey--flat {
    background-color: #ddd;
    color: #444;
}

    .btn.btn-color-ltgrey--flat:hover,
    .btn.btn-color-ltgrey--flat:focus {
        background-color: #ccc;
    }

.btn.btn-color-grey {
    background: #777777; /* Old browsers */
    background: -moz-linear-gradient(top, #777777 0%, #444444 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#777777), color-stop(100%,#444444)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #777777 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #777777 0%,#444444 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #777777 0%,#444444 100%); /* IE10+ */
    background: linear-gradient(to bottom, #777777 0%,#444444 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
    color: #fff;
}

.btn.btn-color-grey--flat {
    background: #555;
    color: #fff;
}

    .btn.btn-color-grey--flat:hover,
    .btn.btn-color-grey--flat:focus {
        background: #444;
    }

.btn.btn-color-white {
    background-color: #fff;
    color: #444;
}

    .btn.btn-color-white:hover,
    .btn.btn-color-white:focus {
        background-color: #ddd;
    }

/* #endregion - Depricated */