:root {
  --success-color: #4AA96C;
  --success-color-hover: #18933B;
  --success-dark-color: #0D627A;
  --success-dark-color-hover: #073845;
  --primary-color: #1A81D3;
  --primary-color-hover: #14609F;
  --error-color: #F54748;
  --error-color-hover: #E60000;
  --secondary-color: #CCCCCC;
  --secondary-color-hover: #999999;
  --warning-color: #FFCA03;
  --warning-color-hover: #FBD148;
  --dark-color-hover: #333333;
  --purple-color: #3E065F;
  --purple-color-hover: #93329E;
  --orange-color: #F48B29;
  --orange-color-hover: #FEA82F;
  --brown-color: #A0937D;
  --brown-color-hover: #766A56;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-default, .btn-default:link {
    color: white;
    outline: none;
    box-shadow: none;
    margin: .3rem;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: .1rem;
    border-radius: 4px;
    padding: .2rem 2rem;
}
.btn-default.outline {
    background-color: transparent !important;
}
.btn-default:hover, .btn-default:active, .btn-default:focus,
.btn-default.outline:hover, .btn-default.outline:active, .btn-default.outline:focus {
    color:white;
}


/* blue */
.btn-blue, .btn-blue:link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-blue.outline, .btn-blue.outline:link {
    color: var(--primary-color);
}
.btn-blue:hover, .btn-blue:active, .btn-blue:focus,
.btn-blue.outline:hover, .btn-blue.outline:active, .btn-blue.outline:focus{
    background: var(--primary-color-hover) !important;
    border-color: var(--primary-color-hover);
    box-shadow: 0 5px 14px 0 rgba(26, 129, 211, 0.5) !important;
}


/* green */
.btn-green, .btn-green:link {
    background-color: var(--success-color);
    border-color: var(--success-color);
    cursor: pointer;
}
.btn-green.outline, .btn-green.outline:link {
    color: var(--success-color);
}
.btn-green:hover, .btn-green:active, .btn-green:focus,
.btn-green.outline:hover, .btn-green.outline:active, .btn-green.outline:focus {
    background: var(--success-color-hover) !important;
    border-color: var(--success-color-hover);
    box-shadow: 0 5px 14px 0 rgba(36, 189, 148, 0.3) !important;
}


/* green-dark */
.btn-green-dark, .btn-green-dark:link {
    background-color: var(--success-dark-color);
    border-color: var(--success-dark-color);
}
.btn-green-dark.outline, .btn-green-dark.outline:link {
    color: var(--success-dark-color);
}
.btn-green-dark:hover, .btn-green-dark:active, .btn-green-dark:focus,
.btn-green-dark.outline:hover, .btn-green-dark.outline:active, .btn-green-dark.outline:focus {
    background: var(--success-dark-color-hover) !important;
    border-color: var(--success-dark-color-hover);
    box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5) !important;
}


/* red */
.btn-red, .btn-red:link {
    background-color: var(--error-color);
    border-color: var(--error-color);
}
.btn-red.outline, .btn-red.outline:link {
    color: var(--error-color);
}
.btn-red:hover, .btn-red:active, .btn-red:focus,
.btn-red.outline:hover, .btn-red.outline:active, .btn-red.outline:focus{
    background: var(--error-color-hover) !important;
    border-color: var(--error-color-hover);
    box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5) !important;
}


/* grey */
.btn-grey, .btn-grey:link {
    color: var(--secondary-color-hover);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-grey.outline, .btn-grey.outline:link {
    color: var(--secondary-color-hover);
}
.btn-grey:hover, .btn-grey:active, .btn-grey:focus,
.btn-grey.outline:hover, .btn-grey.outline:active, .btn-grey.outline:focus {
    background: var(--secondary-color-hover) !important;
    border-color: var(--secondary-color-hover);
    box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5) !important;
}


/* purple */
.btn-purple, .btn-purple:link {
    background-color: var(--purple-color);
    border-color: var(--purple-color);
}
.btn-purple.outline, .btn-purple.outline:link {
    color: var(--purple-color);
}
.btn-purple:hover, .btn-purple:active, .btn-purple:focus,
.btn-purple.outline:hover, .btn-purple.outline:active, .btn-purple.outline:focus {
    background: var(--purple-color-hover) !important;
    border-color: var(--purple-color-hover);
    box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5)!important;
}


/* orange */
.btn-orange, .btn-orange:link {
    background-color: var(--orange-color);
    border-color: var(--orange-color);
}
.btn-orange.outline, .btn-orange.outline:link {
    color: var(--orange-color);
}
.btn-orange:hover, .btn-orange:active, .btn-orange:focus,
.btn-orange.outline:hover, .btn-orange.outline:active, .btn-orange.outline:focus {
    background: var(--orange-color-hover) !important;
    border-color: var(--orange-color-hover);
    box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5)!important;
}


/* brown  */
.btn-brown, .btn-brown:link {
    background-color: var(--brown-color);
    border-color: var(--brown-color);
}
.btn-brown.outline, .btn-brown.outline:link {
    color: var(--brown-color);
}
.btn-brown:hover, .btn-brown:active, .btn-brown:focus,
.btn-brown.outline:hover, .btn-brown.outline:active, .btn-brown.outline:focus {
    background: var(--brown-color-hover);
    border-color: var(--brown-color);
}


/* black  */
.btn-black, .btn-black:link {
    background-color: black;
    border-color: black;
}
.btn-black.outline, .btn-black.outline:link {
    color: black;
}
.btn-black:hover, .btn-black:active, .btn-black:focus,
.btn-black.outline:hover, .btn-black.outline:active, .btn-blackn.outline:focus{
    background: var(--dark-color-hover) !important;
    border-color: var(--dark-color-hover);
    box-shadow: 0 5px 14px 0 rgba(148, 133, 107, 0.5)!important;
}


/* yellow  */
.btn-yellow, .btn-yellow:link {
    color: black;
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}
.btn-yellow.outline, .btn-yellow.outline:link {
    color: var(--warning-color);
    border-color: var(--warning-color);
}
.btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus,
.btn-yellow.outline:hover, .btn-yellow.outline:active, .btn-yellow.outline:focus {
    color: black;
    background: var(--warning-color-hover) !important;
    border-color: var(--warning-color-hover);
    box-shadow: 0 5px 14px 0 rgba(148, 133, 107, 0.5)!important;
}


a.btn-default {
    text-decoration: none;
}

.btn-search-filter {
    position: relative;
    top: 40%;
}

.toggle.btn-success {
    border-color: var(--success-color);
}
.toggle-on.btn-success {
    background: var(--success-color);
}