/* ---------------------------------------------------------------------- */
/*  Buttons
/* ---------------------------------------------------------------------- */
.btn {
    transition: all 0.3s ease 0s !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
}

.btn:after {
    content: "";
    position: absolute;
    transition: all 0.3s ease 0s;
    z-index: -1;
}

.btn-wide {
    min-width: 120px;
}

.ladda-button[data-style="contract"][data-loading] {
    border-radius: 50%;
    min-width: 38px !important;
    overflow: hidden;
    width: 38px !important;
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    box-shadow: none;
}

.btn-o {
    background: none !important;
}

.btn-default {
    background-color: $white;
    border-color: $border-default;
    color: $text-color;

    &:hover {
        background-color: $white;
        border-color: darken($border-default, 5%);
        color: $text-color !important;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
        background-color: #f8f8f8;
        border-color: lighten($border-default, 5%);
        color: darken($text-color,20%) !important;
    }

    &:focus {
        background-color: $white;
        border-color: darken($border-default, 5%);
        color: darken($text-color,20%) !important;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: $white;
        border-color: lighten($border-default, 10%);
        color: lighten($text-color, 25%);
    }

    .caret {
        border-top-color: $text-color;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $text-color;
        }
    }
}

.btn-primary {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($primary,15%);
            border-color: lighten($primary,15%);
        }
    }

    background-color: $primary;
    border-color: $primary;
    color: $white;

    &:hover {
        background-color: lighten($primary,10%) !important;
        border-color: lighten($primary,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($primary,5%) !important;
        border-color: darken($primary,5%);
    }

    &:focus {
        background-color: lighten($primary,15%);
        border-color: lighten($primary,15%);
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($primary,20%);
        border-color: lighten($primary,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $primary;
        color: $primary;

        &:hover {
            color: lighten($primary,10%);
            border-color: lighten($primary,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($primary,15%) !important;
            color: darken($primary,15%) !important;
        }

        &:focus {
            background-color: lighten($primary,20%);
            border-color: lighten($primary,20%);
            color: lighten($primary,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($primary,20%);
            color: lighten($primary,20%);
        }

        .caret {
            border-top-color: $primary;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-success {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($success,15%);
            border-color: lighten($success,15%);
        }
    }

    background-color: $success;
    border-color: $success;
    color: $white;

    &:hover {
        background-color: lighten($success,10%) !important;
        border-color: lighten($success,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($success,5%) !important;
        border-color: darken($success,5%);
    }

    &:focus {
        background-color: lighten($success,15%);
        border-color: lighten($success,15%);
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($success,20%);
        border-color: lighten($success,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $success;
        color: $success;

        &:hover {
            color: lighten($success,10%);
            border-color: lighten($success,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($success,15%) !important;
            color: darken($success,15%) !important;
        }

        &:focus {
            background-color: lighten($success,20%);
            border-color: lighten($success,20%);
            color: lighten($success,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($success,20%);
            color: lighten($success,20%);
        }

        .caret {
            border-top-color: $success;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-info {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($info,15%);
            border-color: lighten($info,15%);
        }
    }

    background-color: $info;
    border-color: $info;
    color: $white;

    &:hover {
        background-color: lighten($info,10%) !important;
        border-color: lighten($info,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($info,5%) !important;
        border-color: darken($info,5%);
    }

    &:focus {
        background-color: lighten($info,15%);
        border-color: lighten($info,15%);
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($info,20%);
        border-color: lighten($info,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $info;
        color: $info;

        &:hover {
            color: lighten($info,10%);
            border-color: lighten($info,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($info,15%) !important;
            color: darken($info,15%) !important;
        }

        &:focus {
            background-color: lighten($info,20%);
            border-color: lighten($info,20%);
            color: lighten($info,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($info,20%);
            color: lighten($info,20%);
        }

        .caret {
            border-top-color: $info;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-warning {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($warning,15%);
            border-color: lighten($warning,15%);
        }
    }

    background-color: $warning;
    border-color: $warning;
    color: $white;

    &:hover {
        background-color: lighten($warning,10%) !important;
        border-color: lighten($warning,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($warning,5%) !important;
        border-color: darken($warning,5%);
    }

    &:focus {
        background-color: lighten($warning,15%);
        border-color: lighten($warning,15%);
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($warning,20%);
        border-color: lighten($warning,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $warning;
        color: $warning;

        &:hover {
            color: lighten($warning,10%);
            border-color: lighten($warning,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($warning,15%) !important;
            color: darken($warning,15%) !important;
        }

        &:focus {
            background-color: lighten($warning,20%);
            border-color: lighten($warning,20%);
            color: lighten($warning,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($warning,20%);
            color: lighten($warning,20%);
        }

        .caret {
            border-top-color: $warning;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-danger {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($danger,15%);
            border-color: lighten($danger,15%);
        }
    }

    background-color: $danger;
    border-color: $danger;
    color: $white;

    &:hover {
        background-color: lighten($danger,10%) !important;
        border-color: lighten($danger,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($danger,5%) !important;
        border-color: darken($danger,5%);
    }

    &:focus {
        background-color: lighten($danger,15%);
        border-color: lighten($danger,15%);
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($danger,20%);
        border-color: lighten($danger,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $danger;
        color: $danger;

        &:hover {
            color: lighten($danger,10%);
            border-color: lighten($danger,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($danger,15%) !important;
            color: darken($danger,15%) !important;
        }

        &:focus {
            background-color: lighten($danger,20%);
            border-color: lighten($danger,20%);
            color: lighten($danger,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($danger,20%);
            color: lighten($danger,20%);
        }

        .caret {
            border-top-color: $danger;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-azure {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($azure,15%);
            border-color: lighten($azure,15%);
        }
    }

    background-color: $azure;
    border-color: $azure;
    color: $white;

    &:hover {
        background-color: lighten($azure,10%) !important;
        border-color: lighten($azure,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($azure,5%) !important;
        border-color: darken($azure,5%);
    }

    &:focus {
        background-color: lighten($azure,15%);
        border-color: lighten($azure,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($azure,20%);
        border-color: lighten($azure,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $azure;
        color: $azure;

        &:hover {
            color: lighten($azure,10%);
            border-color: lighten($azure,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($azure,15%) !important;
            color: darken($azure,15%) !important;
        }

        &:focus {
            background-color: lighten($azure,20%);
            border-color: lighten($azure,20%);
            color: lighten($azure,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($azure,20%);
            color: lighten($azure,20%);
        }

        .caret {
            border-top-color: $azure;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-light-azure {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($lightAzure,15%);
            border-color: lighten($lightAzure,15%);
        }
    }

    background-color: $lightAzure;
    border-color: $lightAzure;
    color: $white;

    &:hover {
        background-color: lighten($lightAzure,10%) !important;
        border-color: lighten($lightAzure,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($lightAzure,5%) !important;
        border-color: darken($lightAzure,5%);
    }

    &:focus {
        background-color: lighten($lightAzure,15%);
        border-color: lighten($lightAzure,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($lightAzure,20%);
        border-color: lighten($lightAzure,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $lightAzure;
        color: $lightAzure;

        &:hover {
            color: lighten($lightAzure,10%);
            border-color: lighten($lightAzure,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($lightAzure,15%) !important;
            color: darken($lightAzure,15%) !important;
        }

        &:focus {
            background-color: lighten($lightAzure,20%);
            border-color: lighten($lightAzure,20%);
            color: lighten($lightAzure,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($lightAzure,20%);
            color: lighten($lightAzure,20%);
        }

        .caret {
            border-top-color: $lightAzure;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-dark-azure {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($darkAzure,15%);
            border-color: lighten($darkAzure,15%);
        }
    }

    background-color: $darkAzure;
    border-color: $darkAzure;
    color: $white;

    &:hover {
        background-color: lighten($darkAzure,10%) !important;
        border-color: lighten($darkAzure,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($darkAzure,5%) !important;
        border-color: darken($darkAzure,5%);
    }

    &:focus {
        background-color: lighten($darkAzure,15%);
        border-color: lighten($darkAzure,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($darkAzure,20%);
        border-color: lighten($darkAzure,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $darkAzure;
        color: $darkAzure;

        &:hover {
            color: lighten($darkAzure,10%);
            border-color: lighten($darkAzure,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($darkAzure,15%) !important;
            color: darken($darkAzure,15%) !important;
        }

        &:focus {
            background-color: lighten($darkAzure,20%);
            border-color: lighten($darkAzure,20%);
            color: lighten($darkAzure,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($darkAzure,20%);
            color: lighten($darkAzure,20%);
        }

        .caret {
            border-top-color: $darkAzure;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-blue {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($blue,15%);
            border-color: lighten($blue,15%);
        }
    }

    background-color: $blue;
    border-color: $blue;
    color: $white;

    &:hover {
        background-color: lighten($blue,10%) !important;
        border-color: lighten($blue,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($blue,5%) !important;
        border-color: darken($blue,5%);
    }

    &:focus {
        background-color: lighten($blue,15%);
        border-color: lighten($blue,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($blue,20%);
        border-color: lighten($blue,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $blue;
        color: $blue;

        &:hover {
            color: lighten($blue,10%);
            border-color: lighten($blue,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($blue,15%) !important;
            color: darken($blue,15%) !important;
        }

        &:focus {
            background-color: lighten($blue,20%);
            border-color: lighten($blue,20%);
            color: lighten($blue,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($blue,20%);
            color: lighten($blue,20%);
        }

        .caret {
            border-top-color: $blue;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-light-blue {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($lightBlue,15%);
            border-color: lighten($lightBlue,15%);
        }
    }

    background-color: $lightBlue;
    border-color: $lightBlue;
    color: $white;

    &:hover {
        background-color: lighten($lightBlue,10%) !important;
        border-color: lighten($lightBlue,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($lightBlue,5%) !important;
        border-color: darken($lightBlue,5%);
    }

    &:focus {
        background-color: lighten($lightBlue,15%);
        border-color: lighten($lightBlue,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($lightBlue,20%);
        border-color: lighten($lightBlue,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $lightBlue;
        color: $lightBlue;

        &:hover {
            color: lighten($lightBlue,10%);
            border-color: lighten($lightBlue,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($lightBlue,15%) !important;
            color: darken($lightBlue,15%) !important;
        }

        &:focus {
            background-color: lighten($lightBlue,20%);
            border-color: lighten($lightBlue,20%);
            color: lighten($lightBlue,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($lightBlue,20%);
            color: lighten($lightBlue,20%);
        }

        .caret {
            border-top-color: $lightBlue;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-dark-blue {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($darkBlue,15%);
            border-color: lighten($darkBlue,15%);
        }
    }

    background-color: $darkBlue;
    border-color: $darkBlue;
    color: $white;

    &:hover {
        background-color: lighten($darkBlue,10%) !important;
        border-color: lighten($darkBlue,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($darkBlue,5%) !important;
        border-color: darken($darkBlue,5%);
    }

    &:focus {
        background-color: lighten($darkBlue,15%);
        border-color: lighten($darkBlue,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($darkBlue,20%);
        border-color: lighten($darkBlue,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $darkBlue;
        color: $darkBlue;

        &:hover {
            color: lighten($darkBlue,10%);
            border-color: lighten($darkBlue,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($darkBlue,15%) !important;
            color: darken($darkBlue,15%) !important;
        }

        &:focus {
            background-color: lighten($darkBlue,20%);
            border-color: lighten($darkBlue,20%);
            color: lighten($darkBlue,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($darkBlue,20%);
            color: lighten($darkBlue,20%);
        }

        .caret {
            border-top-color: $darkBlue;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-green {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($green,15%);
            border-color: lighten($green,15%);
        }
    }

    background-color: $green;
    border-color: $green;
    color: $white;

    &:hover {
        background-color: lighten($green,10%) !important;
        border-color: lighten($green,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($green,5%) !important;
        border-color: darken($green,5%);
    }

    &:focus {
        background-color: lighten($green,15%);
        border-color: lighten($green,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($green,20%);
        border-color: lighten($green,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $green;
        color: $green;

        &:hover {
            color: lighten($green,10%);
            border-color: lighten($green,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($green,15%) !important;
            color: darken($green,15%) !important;
        }

        &:focus {
            background-color: lighten($green,20%);
            border-color: lighten($green,20%);
            color: lighten($green,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($green,20%);
            color: lighten($green,20%);
        }

        .caret {
            border-top-color: $green;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-light-green {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($lightGreen,15%);
            border-color: lighten($lightGreen,15%);
        }
    }

    background-color: $lightGreen;
    border-color: $lightGreen;
    color: $white;

    &:hover {
        background-color: lighten($lightGreen,10%) !important;
        border-color: lighten($lightGreen,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($lightGreen,5%) !important;
        border-color: darken($lightGreen,5%);
    }

    &:focus {
        background-color: lighten($lightGreen,15%);
        border-color: lighten($lightGreen,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($lightGreen,20%);
        border-color: lighten($lightGreen,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $lightGreen;
        color: $lightGreen;

        &:hover {
            color: lighten($lightGreen,10%);
            border-color: lighten($lightGreen,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($lightGreen,15%) !important;
            color: darken($lightGreen,15%) !important;
        }

        &:focus {
            background-color: lighten($lightGreen,20%);
            border-color: lighten($lightGreen,20%);
            color: lighten($lightGreen,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($lightGreen,20%);
            color: lighten($lightGreen,20%);
        }

        .caret {
            border-top-color: $lightGreen;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-dark-green {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($darkGreen,15%);
            border-color: lighten($darkGreen,15%);
        }
    }

    background-color: $darkGreen;
    border-color: $darkGreen;
    color: $white;

    &:hover {
        background-color: lighten($darkGreen,10%) !important;
        border-color: lighten($darkGreen,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($darkGreen,5%) !important;
        border-color: darken($darkGreen,5%);
    }

    &:focus {
        background-color: lighten($darkGreen,15%);
        border-color: lighten($darkGreen,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($darkGreen,20%);
        border-color: lighten($darkGreen,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $darkGreen;
        color: $darkGreen;

        &:hover {
            color: lighten($darkGreen,10%);
            border-color: lighten($darkGreen,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($darkGreen,15%) !important;
            color: darken($darkGreen,15%) !important;
        }

        &:focus {
            background-color: lighten($darkGreen,20%);
            border-color: lighten($darkGreen,20%);
            color: lighten($darkGreen,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($darkGreen,20%);
            color: lighten($darkGreen,20%);
        }

        .caret {
            border-top-color: $darkGreen;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-orange {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($orange,15%);
            border-color: lighten($orange,15%);
        }
    }

    background-color: $orange;
    border-color: $orange;
    color: $white;

    &:hover {
        background-color: lighten($orange,10%) !important;
        border-color: lighten($orange,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($orange,5%) !important;
        border-color: darken($orange,5%);
    }

    &:focus {
        background-color: lighten($orange,15%);
        border-color: lighten($orange,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($orange,20%);
        border-color: lighten($orange,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $orange;
        color: $orange;

        &:hover {
            color: lighten($orange,10%);
            border-color: lighten($orange,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($orange,15%) !important;
            color: darken($orange,15%) !important;
        }

        &:focus {
            background-color: lighten($orange,20%);
            border-color: lighten($orange,20%);
            color: lighten($orange,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($orange,20%);
            color: lighten($orange,20%);
        }

        .caret {
            border-top-color: $orange;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-light-orange {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($lightOrange,15%);
            border-color: lighten($lightOrange,15%);
        }
    }

    background-color: $lightOrange;
    border-color: $lightOrange;
    color: $white;

    &:hover {
        background-color: lighten($lightOrange,10%) !important;
        border-color: lighten($lightOrange,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($lightOrange,5%) !important;
        border-color: darken($lightOrange,5%);
    }

    &:focus {
        background-color: lighten($lightOrange,15%);
        border-color: lighten($lightOrange,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($lightOrange,20%);
        border-color: lighten($lightOrange,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $lightOrange;
        color: $lightOrange;

        &:hover {
            color: lighten($lightOrange,10%);
            border-color: lighten($lightOrange,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($lightOrange,15%) !important;
            color: darken($lightOrange,15%) !important;
        }

        &:focus {
            background-color: lighten($lightOrange,20%);
            border-color: lighten($lightOrange,20%);
            color: lighten($lightOrange,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($lightOrange,20%);
            color: lighten($lightOrange,20%);
        }

        .caret {
            border-top-color: $lightOrange;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-dark-orange {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($darkOrange,15%);
            border-color: lighten($darkOrange,15%);
        }
    }

    background-color: $darkOrange;
    border-color: $darkOrange;
    color: $white;

    &:hover {
        background-color: lighten($darkOrange,10%) !important;
        border-color: lighten($darkOrange,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($darkOrange,5%) !important;
        border-color: darken($darkOrange,5%);
    }

    &:focus {
        background-color: lighten($darkOrange,15%);
        border-color: lighten($darkOrange,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($darkOrange,20%);
        border-color: lighten($darkOrange,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $darkOrange;
        color: $darkOrange;

        &:hover {
            color: lighten($darkOrange,10%);
            border-color: lighten($darkOrange,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($darkOrange,15%) !important;
            color: darken($darkOrange,15%) !important;
        }

        &:focus {
            background-color: lighten($darkOrange,20%);
            border-color: lighten($darkOrange,20%);
            color: lighten($darkOrange,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($darkOrange,20%);
            color: lighten($darkOrange,20%);
        }

        .caret {
            border-top-color: $darkOrange;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-red {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($red,15%);
            border-color: lighten($red,15%);
        }
    }

    background-color: $red;
    border-color: $red;
    color: $white;

    &:hover {
        background-color: lighten($red,10%) !important;
        border-color: lighten($red,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($red,5%) !important;
        border-color: darken($red,5%);
    }

    &:focus {
        background-color: lighten($red,15%);
        border-color: lighten($red,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($red,20%);
        border-color: lighten($red,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $red;
        color: $red;

        &:hover {
            color: lighten($red,10%);
            border-color: lighten($red,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($red,15%) !important;
            color: darken($red,15%) !important;
        }

        &:focus {
            background-color: lighten($red,20%);
            border-color: lighten($red,20%);
            color: lighten($red,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($red,20%);
            color: lighten($red,20%);
        }

        .caret {
            border-top-color: $red;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-light-red {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($lightRed,15%);
            border-color: lighten($lightRed,15%);
        }
    }

    background-color: $lightRed;
    border-color: $lightRed;
    color: $white;

    &:hover {
        background-color: lighten($lightRed,10%) !important;
        border-color: lighten($lightRed,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($lightRed,5%) !important;
        border-color: darken($lightRed,5%);
    }

    &:focus {
        background-color: lighten($lightRed,15%);
        border-color: lighten($lightRed,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($lightRed,20%);
        border-color: lighten($lightRed,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $lightRed;
        color: $lightRed;

        &:hover {
            color: lighten($lightRed,10%);
            border-color: lighten($lightRed,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($lightRed,15%) !important;
            color: darken($lightRed,15%) !important;
        }

        &:focus {
            background-color: lighten($lightRed,20%);
            border-color: lighten($lightRed,20%);
            color: lighten($lightRed,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($lightRed,20%);
            color: lighten($lightRed,20%);
        }

        .caret {
            border-top-color: $lightRed;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-dark-red {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($darkRed,15%);
            border-color: lighten($darkRed,15%);
        }
    }

    background-color: $darkRed;
    border-color: $darkRed;
    color: $white;

    &:hover {
        background-color: lighten($darkRed,10%) !important;
        border-color: lighten($darkRed,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($darkRed,5%) !important;
        border-color: darken($darkRed,5%);
    }

    &:focus {
        background-color: lighten($darkRed,15%);
        border-color: lighten($darkRed,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($darkRed,20%);
        border-color: lighten($darkRed,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $darkRed;
        color: $darkRed;

        &:hover {
            color: lighten($darkRed,10%);
            border-color: lighten($darkRed,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($darkRed,15%) !important;
            color: darken($darkRed,15%) !important;
        }

        &:focus {
            background-color: lighten($darkRed,20%);
            border-color: lighten($darkRed,20%);
            color: lighten($darkRed,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($darkRed,20%);
            color: lighten($darkRed,20%);
        }

        .caret {
            border-top-color: $darkRed;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-purple {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($purple,15%);
            border-color: lighten($purple,15%);
        }
    }

    background-color: $purple;
    border-color: $purple;
    color: $white;

    &:hover {
        background-color: lighten($purple,10%) !important;
        border-color: lighten($purple,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($purple,5%) !important;
        border-color: darken($purple,5%);
    }

    &:focus {
        background-color: lighten($purple,15%);
        border-color: lighten($purple,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($purple,20%);
        border-color: lighten($purple,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $purple;
        color: $purple;

        &:hover {
            color: lighten($purple,10%);
            border-color: lighten($purple,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($purple,15%) !important;
            color: darken($purple,15%) !important;
        }

        &:focus {
            background-color: lighten($purple,20%);
            border-color: lighten($purple,20%);
            color: lighten($purple,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($purple,20%);
            color: lighten($purple,20%);
        }

        .caret {
            border-top-color: $purple;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-light-purple {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($lightPurple,15%);
            border-color: lighten($lightPurple,15%);
        }
    }

    background-color: $lightPurple;
    border-color: $lightPurple;
    color: $white;

    &:hover {
        background-color: lighten($lightPurple,10%) !important;
        border-color: lighten($lightPurple,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($lightPurple,5%) !important;
        border-color: darken($lightPurple,5%);
    }

    &:focus {
        background-color: lighten($lightPurple,15%);
        border-color: lighten($lightPurple,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($lightPurple,20%);
        border-color: lighten($lightPurple,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $lightPurple;
        color: $lightPurple;

        &:hover {
            color: lighten($lightPurple,10%);
            border-color: lighten($lightPurple,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($lightPurple,15%) !important;
            color: darken($lightPurple,15%) !important;
        }

        &:focus {
            background-color: lighten($lightPurple,20%);
            border-color: lighten($lightPurple,20%);
            color: lighten($lightPurple,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($lightPurple,20%);
            color: lighten($lightPurple,20%);
        }

        .caret {
            border-top-color: $lightPurple;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-dark-purple {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($darkPurple,15%);
            border-color: lighten($darkPurple,15%);
        }
    }

    background-color: $darkPurple;
    border-color: $darkPurple;
    color: $white;

    &:hover {
        background-color: lighten($darkPurple,10%) !important;
        border-color: lighten($darkPurple,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($darkPurple,5%) !important;
        border-color: darken($darkPurple,5%);
    }

    &:focus {
        background-color: lighten($darkPurple,15%);
        border-color: lighten($darkPurple,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($darkPurple,20%);
        border-color: lighten($darkPurple,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $darkPurple;
        color: $darkPurple;

        &:hover {
            color: lighten($darkPurple,10%);
            border-color: lighten($darkPurple,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($darkPurple,15%) !important;
            color: darken($darkPurple,15%) !important;
        }

        &:focus {
            background-color: lighten($darkPurple,20%);
            border-color: lighten($darkPurple,20%);
            color: lighten($darkPurple,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($darkPurple,20%);
            color: lighten($darkPurple,20%);
        }

        .caret {
            border-top-color: $darkPurple;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-beige {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($beige,15%);
            border-color: lighten($beige,15%);
        }
    }

    background-color: $beige;
    border-color: $beige;
    color: $white;

    &:hover {
        background-color: lighten($beige,10%) !important;
        border-color: lighten($beige,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($beige,5%) !important;
        border-color: darken($beige,5%);
    }

    &:focus {
        background-color: lighten($beige,15%);
        border-color: lighten($beige,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($beige,20%);
        border-color: lighten($beige,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $beige;
        color: $beige;

        &:hover {
            color: lighten($beige,10%);
            border-color: lighten($beige,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($beige,15%) !important;
            color: darken($beige,15%) !important;
        }

        &:focus {
            background-color: lighten($beige,20%);
            border-color: lighten($beige,20%);
            color: lighten($beige,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($beige,20%);
            color: lighten($beige,20%);
        }

        .caret {
            border-top-color: $beige;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-light-beige {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($lightBeige,15%);
            border-color: lighten($lightBeige,15%);
        }
    }

    background-color: $lightBeige;
    border-color: $lightBeige;
    color: $white;

    &:hover {
        background-color: lighten($lightBeige,10%) !important;
        border-color: lighten($lightBeige,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($lightBeige,5%) !important;
        border-color: darken($lightBeige,5%);
    }

    &:focus {
        background-color: lighten($lightBeige,15%);
        border-color: lighten($lightBeige,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($lightBeige,20%);
        border-color: lighten($lightBeige,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $lightBeige;
        color: $lightBeige;

        &:hover {
            color: lighten($lightBeige,10%);
            border-color: lighten($lightBeige,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($lightBeige,15%) !important;
            color: darken($lightBeige,15%) !important;
        }

        &:focus {
            background-color: lighten($lightBeige,20%);
            border-color: lighten($lightBeige,20%);
            color: lighten($lightBeige,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($lightBeige,20%);
            color: lighten($lightBeige,20%);
        }

        .caret {
            border-top-color: $lightBeige;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-dark-beige {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($darkBeige,15%);
            border-color: lighten($darkBeige,15%);
        }
    }

    background-color: $darkBeige;
    border-color: $darkBeige;
    color: $white;

    &:hover {
        background-color: lighten($darkBeige,10%) !important;
        border-color: lighten($darkBeige,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($darkBeige,5%) !important;
        border-color: darken($darkBeige,5%);
    }

    &:focus {
        background-color: lighten($darkBeige,15%);
        border-color: lighten($darkBeige,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($darkBeige,20%);
        border-color: lighten($darkBeige,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $darkBeige;
        color: $darkBeige;

        &:hover {
            color: lighten($darkBeige,10%);
            border-color: lighten($darkBeige,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($darkBeige,15%) !important;
            color: darken($darkBeige,15%) !important;
        }

        &:focus {
            background-color: lighten($darkBeige,20%);
            border-color: lighten($darkBeige,20%);
            color: lighten($darkBeige,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($darkBeige,20%);
            color: lighten($darkBeige,20%);
        }

        .caret {
            border-top-color: $darkBeige;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-yellow {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($yellow,15%);
            border-color: lighten($yellow,15%);
        }
    }

    background-color: $yellow;
    border-color: $yellow;
    color: $white;

    &:hover {
        background-color: lighten($yellow,10%) !important;
        border-color: lighten($yellow,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($yellow,5%) !important;
        border-color: darken($yellow,5%);
    }

    &:focus {
        background-color: lighten($yellow,15%);
        border-color: lighten($yellow,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($yellow,20%);
        border-color: lighten($yellow,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $yellow;
        color: $yellow;

        &:hover {
            color: lighten($yellow,10%);
            border-color: lighten($yellow,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($yellow,15%) !important;
            color: darken($yellow,15%) !important;
        }

        &:focus {
            background-color: lighten($yellow,20%);
            border-color: lighten($yellow,20%);
            color: lighten($yellow,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($yellow,20%);
            color: lighten($yellow,20%);
        }

        .caret {
            border-top-color: $yellow;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-light-yellow {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($lightYellow,15%);
            border-color: lighten($lightYellow,15%);
        }
    }

    background-color: $lightYellow;
    border-color: $lightYellow;
    color: $white;

    &:hover {
        background-color: lighten($lightYellow,10%) !important;
        border-color: lighten($lightYellow,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($lightYellow,5%) !important;
        border-color: darken($lightYellow,5%);
    }

    &:focus {
        background-color: lighten($lightYellow,15%);
        border-color: lighten($lightYellow,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($lightYellow,20%);
        border-color: lighten($lightYellow,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $lightYellow;
        color: $lightYellow;

        &:hover {
            color: lighten($lightYellow,10%);
            border-color: lighten($lightYellow,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($lightYellow,15%) !important;
            color: darken($lightYellow,15%) !important;
        }

        &:focus {
            background-color: lighten($lightYellow,20%);
            border-color: lighten($lightYellow,20%);
            color: lighten($lightYellow,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($lightYellow,20%);
            color: lighten($lightYellow,20%);
        }

        .caret {
            border-top-color: $lightYellow;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-dark-yellow {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($darkYellow,15%);
            border-color: lighten($darkYellow,15%);
        }
    }

    background-color: $darkYellow;
    border-color: $darkYellow;
    color: $white;

    &:hover {
        background-color: lighten($darkYellow,10%) !important;
        border-color: lighten($darkYellow,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($darkYellow,5%) !important;
        border-color: darken($darkYellow,5%);
    }

    &:focus {
        background-color: lighten($darkYellow,15%);
        border-color: lighten($darkYellow,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($darkYellow,20%);
        border-color: lighten($darkYellow,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $darkYellow;
        color: $darkYellow;

        &:hover {
            color: lighten($darkYellow,10%);
            border-color: lighten($darkYellow,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($darkYellow,15%) !important;
            color: darken($darkYellow,15%) !important;
        }

        &:focus {
            background-color: lighten($darkYellow,20%);
            border-color: lighten($darkYellow,20%);
            color: lighten($darkYellow,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($darkYellow,20%);
            color: lighten($darkYellow,20%);
        }

        .caret {
            border-top-color: $darkYellow;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-grey {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($grey,15%);
            border-color: lighten($grey,15%);
        }
    }

    background-color: $grey;
    border-color: $grey;
    color: $white;

    &:hover {
        background-color: lighten($grey,10%) !important;
        border-color: lighten($grey,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($grey,5%) !important;
        border-color: darken($grey,5%);
    }

    &:focus {
        background-color: lighten($grey,15%);
        border-color: lighten($grey,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($grey,20%);
        border-color: lighten($grey,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $grey;
        color: $grey;

        &:hover {
            color: lighten($grey,10%);
            border-color: lighten($grey,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($grey,15%) !important;
            color: darken($grey,15%) !important;
        }

        &:focus {
            background-color: lighten($grey,20%);
            border-color: lighten($grey,20%);
            color: lighten($grey,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($grey,20%);
            color: lighten($grey,20%);
        }

        .caret {
            border-top-color: $grey;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-light-grey {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($lightGrey,15%);
            border-color: lighten($lightGrey,15%);
        }
    }

    background-color: $lightGrey;
    border-color: $lightGrey;
    color: $text-color;

    &:hover {
        background-color: lighten($lightGrey,10%) !important;
        border-color: lighten($lightGrey,10%);
        color: $text-color;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($lightGrey,5%) !important;
        border-color: darken($lightGrey,5%);
    }

    &:focus {
        background-color: lighten($lightGrey,15%);
        border-color: lighten($lightGrey,15%);
        color: $text-color;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($lightGrey,20%);
        border-color: lighten($lightGrey,20%);
        color: $text-light;
    }

    &.btn-o {
        border: 1px solid $lightGrey;
        color: $lightGrey;

        &:hover {
            color: lighten($text-color,10%);
            border-color: lighten($lightGrey,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($lightGrey,5%) !important;
            border-color: darken($lightGrey,15%) !important;
            color: darken($text-color,15%) !important;
        }

        &:focus {
            background-color: lighten($lightGrey,20%);
            border-color: lighten($lightGrey,20%);
            color: lighten($lightGrey,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($lightGrey,20%);
            color: lighten($text-color,20%);
        }

        .caret {
            border-top-color: $text-color;
        }
    }

    .caret {
        border-top-color: $text-color;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $text-color;
        }
    }
}

.btn-dark-grey {
    .open & {
        &.dropdown-toggle {
            background-color: lighten($darkGrey,15%);
            border-color: lighten($darkGrey,15%);
        }
    }

    background-color: $darkGrey;
    border-color: $darkGrey;
    color: $white;

    &:hover {
        background-color: lighten($darkGrey,10%) !important;
        border-color: lighten($darkGrey,10%);
        color: $white;
    }

    &:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
        background-color: darken($darkGrey,5%) !important;
        border-color: darken($darkGrey,5%);
    }

    &:focus {
        background-color: lighten($darkGrey,15%);
        border-color: lighten($darkGrey,15%);
        color: $white;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background-color: lighten($darkGrey,20%);
        border-color: lighten($darkGrey,20%);
        color: $white;
    }

    &.btn-o {
        border: 1px solid $darkGrey;
        color: $darkGrey;

        &:hover {
            color: lighten($darkGrey,10%);
            border-color: lighten($darkGrey,10%);
            background: none !important;
        }

        &:active, &.active, &.active:focus, &:active:focus, &:active:hover {
            background-color: darken($darkGrey,5%) !important;
            border-color: darken($darkGrey,15%) !important;
            color: darken($darkGrey,15%) !important;
        }

        &:focus {
            background-color: lighten($darkGrey,20%);
            border-color: lighten($darkGrey,20%);
            color: lighten($darkGrey,10%);
        }

        &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
            border-color: lighten($darkGrey,20%);
            color: lighten($darkGrey,20%);
        }

        .caret {
            border-top-color: $darkGrey;
        }
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-transparent-white {
    background: none;
    border-color: rgba($white, 0.6);
    border-width: 1px;
    color: $white !important;

    &:hover, &:focus, &:active, &.active {
        background-color: rgba($black, 0.1);
        border-color: rgba($white, 0.8);
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background: none;
        border-color: rgba($white, 0.3);
        color: $white;
    }

    .caret {
        border-top-color: rgba($black, 0.1);
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid rgba($black, 0.1);
        }
    }
}

.btn-transparent-grey {
    background: none;
    border-color: rgba($grey, 0.3);
    border-width: 1px;
    color: $grey !important;

    &:hover, &:focus, &:active, &.active {
        background-color: rgba($grey, 0.1);
        border-color: rgba($grey, 0.6);
        box-shadow: none !important;
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background: none;
        border-color: rgba($grey, 0.3);
        color: $grey;
    }

    .caret {
        border-top-color: $grey;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $grey;
        }
    }
}

.btn-transparent-red {
    background: none;
    border-color: rgba($red, 0.6);
    border-width: 2px;
    color: $red !important;

    &:hover, &:focus, &:active, &.active {
        background-color: rgba($red, 0.1);
        border-color: rgba($red, 0.8);
    }

    &.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
        background: none;
        border-color: rgba($red, 0.3);
        color: $red;
    }

    .caret {
        border-top-color: $white;
    }

    .dropup & {
        .caret {
            border-bottom: 4px solid $white;
        }
    }
}

.btn-squared {
    border-radius: 0 !important;
}

.btn-icon {
    background-color: $white;
    border: 1px solid #DDDDDD;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    cursor: pointer;
    height: 80px;
    display: block;
    font-size: 14px;
    padding: 5px 0 0;
    position: relative;
    text-align: center;
    transition: all 0.3s ease 0s;
    color: $text-color;
}

.btn-icon:hover {
    border-color: #A5A5A5;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    color: $text-color;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
}

.btn-icon .badge {
    border-radius: 12px 12px 12px 12px !important;
    border-style: solid;
    border-width: 0;
    box-shadow: none;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 300;
    padding: 3px 7px;
    position: absolute;
    right: -5px;
    text-shadow: none;
    top: -5px;
}

.btn-icon [class^="fa-"], .btn-icon [class*=" fa-"] {
    clear: both;
    display: block;
}

.btn-file {
    position: relative;
    overflow: hidden;

    .svg-inject {
        vertical-align: middle;
    }
}

.iconic-elem-primary {
    fill: $primary !important;
}

.iconic-elem-secondary {
    stroke: #fff !important;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.buttons-widget .btn, .buttons-widget .bootstrap-switch, .buttons-widget button {
    margin-bottom: 10px;
}

.buttons-widget .btn-group button, .buttons-widget .btn-group-vertical button, .buttons-widget .btn-group .btn, .buttons-widget .btn-group-vertical .btn {
    margin-bottom: 0;
}

.button-o {
    background: none;
    border: 1px solid #007aff;
    border-radius: 5px;
    box-sizing: border-box;
    color: #007aff;
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 14px;
    height: 29px;
    line-height: 27px;
    margin: 0;
    overflow: hidden;
    padding: 0 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/***
Dropdown checkboxes
***/
.dropdown-checkboxes {
    padding: 5px;

    label {
        display: block;
        font-weight: normal;
        line-height: 20px;
    }
}

.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
    border-left-color: rgba(255, 255, 255, 0.5) !important;
    margin: 0;
}

.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group {
    border-top-color: rgba(255, 255, 255, 0.5) !important;
    margin: 0;
}
/***
Social Icons
***/
.social-icons {
    ul {
        list-style: none;
        margin: 0 0 -1px 0;
        padding: 0;

        li {
            display: inline-block;
            margin: 0;
            padding: 0;
            height: 40px;
            overflow: hidden;

            a {
                background-position: 0 0;
                background-repeat: no-repeat;
                display: block;
                height: 80px;
                opacity: 0.6;
                text-indent: -9999px;
                transition: all 0.2s ease 0s;
                width: 40px;
                top: 0;
                font-size: 16px;
                position: relative;
                @include transition(all, .3s, ease);

                &:hover {
                    top: -40px;
                }

                &:before {
                    position: absolute;
                    width: 40px;
                    height: 40px;
                    font-family: FontAwesome;
                    text-indent: 0;
                    line-height: 40px;
                    top: 0;
                    left: 0;
                    text-align: center;
                    color: #999999;
                }

                &:after {
                    position: absolute;
                    width: 40px;
                    height: 40px;
                    font-family: FontAwesome;
                    text-indent: 0;
                    line-height: 40px;
                    top: 40px;
                    left: 0;
                    text-align: center;
                    color: #FFFFFF;
                }
            }

            &.social-twitter a {
                &:before, &:after {
                    content: "\f099";
                }

                &:after {
                    background: #48C4D2;
                }
            }

            &.social-dribbble a {
                &:before, &:after {
                    content: "\f17d";
                }

                &:after {
                    background: #EF5B92;
                }
            }

            &.social-facebook a {
                &:before, &:after {
                    content: "\f09a";
                }

                &:after {
                    background: #3B5998;
                }
            }

            &.social-google a {
                &:before, &:after {
                    content: "\f0d5";
                }

                &:after {
                    background: #DD4B39;
                }
            }

            &.social-linkedin a {
                &:before, &:after {
                    content: "\f0e1";
                }

                &:after {
                    background: #71B2D0;
                }
            }

            &.social-youtube a {
                &:before, &:after {
                    content: "\f167";
                }

                &:after {
                    background: #F45750;
                }
            }

            &.social-rss a {
                &:before, &:after {
                    content: "\f09e";
                }

                &:after {
                    background: #FE9900;
                }
            }

            &.social-behance a {
                &:before, &:after {
                    content: "\f1b4";
                }

                &:after {
                    background: #5EB5FB;
                }
            }

            &.social-dropbox a {
                &:before, &:after {
                    content: "\f16b";
                }

                &:after {
                    background: #85BEEC;
                }
            }

            &.social-github a {
                &:before, &:after {
                    content: "\f09b";
                }

                &:after {
                    background: #94A5B0;
                }
            }

            &.social-skype a {
                &:before, &:after {
                    content: "\f17e";
                }

                &:after {
                    background: #70CCEF;
                }
            }

            &.social-spotify a {
                &:before, &:after {
                    content: "\f1bc";
                }

                &:after {
                    background: #8BD05A;
                }
            }

            &.social-stumbleupon a {
                &:before, &:after {
                    content: "\f1a4";
                }

                &:after {
                    background: #F08066;
                }
            }

            &.social-tumblr a {
                &:before, &:after {
                    content: "\f173";
                }

                &:after {
                    background: #85A5C3;
                }
            }

            &.social-vimeo a {
                &:before, &:after {
                    content: "\f194";
                }

                &:after {
                    background: #7C99A8;
                }
            }

            &.social-wordpress a {
                &:before, &:after {
                    content: "\f19a";
                }

                &:after {
                    background: #649EB9;
                }
            }

            &.social-xing a {
                &:before, &:after {
                    content: "\f168";
                }

                &:after {
                    background: #4F9394;
                }
            }

            &.social-yahoo a {
                &:before, &:after {
                    content: "\f19e";
                }

                &:after {
                    background: #C38DCF;
                }
            }

            &.social-vk a {
                &:before, &:after {
                    content: "\f189";
                }

                &:after {
                    background: #708FAC;
                }
            }

            &.social-instagram a {
                &:before, &:after {
                    content: "\f16d";
                }

                &:after {
                    background: #CBAA97;
                }
            }

            &.social-reddit a {
                &:before, &:after {
                    content: "\f1a1";
                }

                &:after {
                    background: #FF7A52;
                }
            }

            &.social-flickr a {
                &:before, &:after {
                    content: "\f16e";
                }

                &:after {
                    background: #FF4DA9;
                }
            }

            &.social-foursquare a {
                &:before, &:after {
                    content: "\f180";
                }

                &:after {
                    background: #6FCCF4;
                }
            }
        }
    }
}

.btn-scroll {
    position: relative;
    overflow: hidden;
    font-family: $font-family-default !important;
    line-height: inherit !important;
    @include transition(all 0.3s ease 0s);
    font-size: $font-size-normal;

    &[class*="fa-"]:before {
        font-family: FontAwesome;
    }

    &[class*="ti-"]:before {
        font-family: themify;
    }

    &:after {
        content: "";
        position: absolute;
        transition: all 0.3s ease 0s;
        z-index: -1;
    }

    &:before {
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        position: relative;
        text-transform: none;
        font-size: 100%;
        height: 100%;
        line-height: 2.5;
        position: absolute;
        transition: all 0.3s ease 0s;
        width: 100%;
    }

    span {
        backface-visibility: hidden;
        display: inline-block;
        height: 100%;
        transition: all 0.3s ease 0s;
        width: 100%;
    }

    &.btn-scroll-top {
        &:hover {
            span {
                @include transform(translateY(300%));
            }

            &:before {
                top: 0;
            }
        }

        &:before {
            left: 0;
            top: -100%;
        }
    }

    &.btn-scroll-left {
        &:hover {
            span {
                @include transform(translateX(200%));
            }

            &:before {
                left: 0;
            }
        }

        &:before {
            left: -100%;
            top: 0;
        }
    }
}