.btn {
    display: inline-block;
    margin: 6px;
    font-size: inherit;
    line-height: 1.42;
    padding: 0.8em 2.5em;
    font-weight: normal;
    border-width: 3px;
    border-style: solid;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    vertical-align: bottom;
    transition: background-color 0.2s, color 0.2s, padding 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-radius 0.2s;
    margin: 0px auto;
}

.btn.btn-disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

.btn.btn-disabled:active {
    opacity: 0.6;
}

.btn-primary {
    color: #009453;
    border-color: #009453;
    margin: 0px auto;
    display: block;
}

.btn-primary:hover, .btn-primary:focus{
    background-color: #009453;
    color: #E6EAEF;
    padding-left: 3.5em;
    padding-right: 3.5em;
    border-radius: 0.4em;
    border-color: #009453;
}

.btn-primary:active, .btn-primary:active:focus {
    background-color: #017643;
    border-color: #017643;
}

.btn-secondary {
    color: #0B44EF;
    border-color: #0B44EF;
}

.btn-secondary:hover {
    background-color: #0B44EF;
    color: #E6EAEF;
    padding-left: 3.5em;
    padding-right: 3.5em;
    border-radius: 0.4em;
}

.btn-secondary:active {
    background-color: #0a40e0;
    border-color: #0a40e0;
}

.btn-tertiary {
    color: #FF006A;
    border-color: #FF006A;
}

.btn-tertiary:hover {
    background-color: #FF006A;
    color: #E6EAEF;
    padding-left: 3.5em;
    padding-right: 3.5em;
    border-radius: 0.4em;
}

.btn-tertiary:active {
    background-color: #f00064;
    border-color: #f00064;
}

.btn-tetrary {
    color: #991BE2;
    border-color: #991BE2;
}

.btn-tetrary:hover {
    background-color: #991BE2;
    color: #E6EAEF;
    padding-left: 3.5em;
    padding-right: 3.5em;
    border-radius: 0.4em;
}

.btn-tetrary:active {
    background-color: #9019d4;
    border-color: #9019d4;
}

.btn-black {
    color: #252730;
    border-color: #252730;
}

.btn-black:hover {
    background-color: #252730;
    color: #E6EAEF;
    padding-left: 3.5em;
    padding-right: 3.5em;
    border-radius: 0.4em;
}

.btn-black:active {
    background-color: #1e2027;
    border-color: #1e2027;
}

.btn-dark {
    color: #3F4351;
    border-color: #3F4351;
}

.btn-dark:hover {
    background-color: #3F4351;
    color: #E6EAEF;
    padding-left: 3.5em;
    padding-right: 3.5em;
    border-radius: 0.4em;
    border-color: none;
}

.btn-dark:active {
    background-color: #383c48;
    border-color: #383c48;
}

.btn-gray {
    color: #6D6F7F;
    border-color: #6D6F7F;
}

.btn-gray:hover {
    background-color: #6D6F7F;
    color: #E6EAEF;
    padding-left: 3.5em;
    padding-right: 3.5em;
    border-radius: 0.4em;
}

.btn-gray:active {
    background-color: #666877;
    border-color: #666877;
}

.btn-light {
    color: #E6EAEF;
    border-color: #E6EAEF;
}

.btn-light:hover {
    background-color: #E6EAEF;
    color: #252730;
    padding-left: 3.5em;
    padding-right: 3.5em;
    border-radius: 0.4em;
}

.btn-light:active {
    background-color: #dde2e9;
    border-color: #dde2e9;
}

.btn-sm {
    font-size: 0.85em !important;
}

.btn-md {
    font-size: 1.2em !important;
}

.btn-lg {
    font-size: 1.6em !important;
}