.jf_btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    background: 0;
    border: none;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    color: #000;
    display: block;
    position: relative;
    min-width: 64px;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    overflow: hidden;
    will-change: box-shadow,transform;
    -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -khtml-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none;
    text-decoration: none;
    text-align: center;
    padding: 6px 12px;
    vertical-align: middle;
}

.jf_btn::-moz-focus-inner {
    border: 0
}

.jf_btn:hover {
    background-color: rgba(158,158,158,0.2)
}

.jf_btn:active {
    background-color: rgba(158,158,158,0.4)
}

.jf_btn.primary {
    color: #337ab7
}

.jf_btn.info {
    color: #5bc0de
}

.jf_btn.success {
    color: #5cb85c
}

.jf_btn.warning {
    color: #f0ad4e
}

.jf_btn.danger {
    color: #d9534f
}

.jf_btn.red {
    color: #f34235
}

.jf_btn.pink {
    color: #e81d62
}

.jf_btn.purple {
    color: #9b26af
}

.jf_btn.deep-purple {
    color: #6639b6;
}

.jf_btn.indigo {
    color: #3e50b4
}

.jf_btn.blue {
    color: #2095f2
}

.jf_btn.light-blue {
    color: #02a8f3
}

.jf_btn.cyan {
    color: #00bbd3
}

.jf_btn.teal {
    color: #009587
}

.jf_btn.green {
    color: #4bae4f
}

.jf_btn.light-green {
    color: #8ac249
}

.jf_btn.lime {
    color: #ccdb38
}

.jf_btn.yellow {
    color: #feea3a
}

.jf_btn.amber {
    color: #fec006
}

.jf_btn.orange {
    color: #f39c12
}

.jf_btn.deep-orange {
    color: #fe5621
}

.jf_btn.brown {
    color: #785447
}

.jf_btn.grey {
    color: #9d9d9d
}

.jf_btn.blue-grey {
    color: #5f7c8a
}

.jf_btn.white {
    background-color: #ffffff;
    color: #000
}

.jf_btn.black {
    color: #111
}

.jf_btn[disabled][disabled] {
    color: rgba(0,0,0,0.26);
    cursor: auto;
    background-color: transparent
}

.jf_btn input.jf_btn[type="submit"] {
    -webkit-appearance: none
}

.jf_btn.raised {
    background: rgba(158,158,158,0.2);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    -khtml-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    -ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    -o-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
}

.jf_btn.raised:hover {
    background-color: rgba(158,158,158,0.2)
}

.jf_btn.raised:active {
    -webkit-box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    -khtml-box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    -moz-box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    -ms-box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    -o-box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    background-color: rgba(158,158,158,0.4)
}

.jf_btn.raised.primary {
    background-color: #337ab7;
    color: #fff
}

.jf_btn.raised.info {
    background-color: #5bc0de;
    color: #fff
}

.jf_btn.raised.success {
    background-color: #5cb85c;
    color: #fff
}

.jf_btn.raised.warning {
    background-color: #f0ad4e;
    color: #fff
}

.jf_btn.raised.danger {
    background-color: #d9534f;
    color: #fff
}

.jf_btn.raised.red {
    background-color: #f34235;
    color: #fff
}

.jf_btn.raised.pink {
    background-color: #e81d62;
    color: #fff
}

.jf_btn.raised.purple {
    background-color: #9b26af;
    color: #fff
}

.jf_btn.raised.deep-purple {
    /* background-color:#6639b6; */
    color: #fff;
    direction: rtl;
}

.jf_btn.raised.indigo {
    background-color: #3e50b4;
    color: #fff
}

.jf_btn.raised.blue {
    background-color: #2095f2;
    color: #fff
}

.jf_btn.raised.light-blue {
    background-color: #02a8f3;
    color: #fff
}

.jf_btn.raised.cyan {
    background-color: #00bbd3;
    color: #fff
}

.jf_btn.raised.teal {
    background-color: #009587;
    color: #fff
}

.jf_btn.raised.green {
    background-color: #4bae4f;
    color: #fff
}

.jf_btn.raised.light-green {
    background-color: #8ac249;
    color: #fff
}

.jf_btn.raised.lime {
    background-color: #ccdb38;
    color: #fff
}

.jf_btn.raised.yellow {
    background-color: #feea3a;
    color: #000
}

.jf_btn.raised.amber {
    background-color: #fec006;
    color: #fff
}

.jf_btn.raised.orange {
    background-color: #f39c12;
    color: #fff
}

.jf_btn.raised.deep-orange {
    background-color: #fe5621;
    color: #fff
}

.jf_btn.raised.brown {
    background-color: #785447;
    color: #fff
}

.jf_btn.raised.grey {
    background-color: #9d9d9d;
    color: #fff
}

.jf_btn.raised.blue-grey {
    background-color: #5f7c8a;
    color: #fff
}

.jf_btn.raised.white {
    background-color: #ffffff;
    color: #000
}

.jf_btn.raised.black {
    background-color: #111111;
    color: #fff
}

.jf_btn.fab {
    border-radius: 50%;
    font-size: 24px;
    height: 56px;
    margin: auto;
    min-width: 56px;
    width: 56px;
    padding: 0;
    overflow: hidden;
    background: rgba(158,158,158,0.2);
    -webkit-box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
    -khtml-box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
    -moz-box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
    -ms-box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
    -o-box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
    box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
    position: relative;
    line-height: normal
}

.jf_btn.fab:active {
    -webkit-box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    -khtml-box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    -moz-box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    -ms-box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    -o-box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    background-color: rgba(158,158,158,0.4)
}

.jf_btn.fab i {
    font-size: 22px
}

.jf_btn.fab.primary {
    background-color: #337ab7;
    color: #fff
}

.jf_btn.fab.info {
    background-color: #5bc0de;
    color: #fff
}

.jf_btn.fab.success {
    background-color: #5cb85c;
    color: #fff
}

.jf_btn.fab.warning {
    background-color: #f0ad4e;
    color: #fff
}

.jf_btn.fab.danger {
    background-color: #d9534f;
    color: #fff
}

.jf_btn.fab.red {
    background-color: #f34235;
    color: #fff
}

.jf_btn.fab.pink {
    background-color: #e81d62;
    color: #fff
}

.jf_btn.fab.purple {
    background-color: #9b26af;
    color: #fff
}

.jf_btn.fab.deep-purple {
    background-color: #6639b6;
    color: #fff
}

.jf_btn.fab.indigo {
    background-color: #3e50b4;
    color: #fff
}

.jf_btn.fab.blue {
    background-color: #2095f2;
    color: #fff
}

.jf_btn.fab.light-blue {
    background-color: #02a8f3;
    color: #fff
}

.jf_btn.fab.cyan {
    background-color: #00bbd3;
    color: #fff
}

.jf_btn.fab.teal {
    background-color: #009587;
    color: #fff
}

.jf_btn.fab.green {
    background-color: #4bae4f;
    color: #fff
}

.jf_btn.fab.light-green {
    background-color: #8ac249;
    color: #fff
}

.jf_btn.fab.lime {
    background-color: #ccdb38;
    color: #fff
}

.jf_btn.fab.yellow {
    background-color: #feea3a;
    color: #000
}

.jf_btn.fab.amber {
    background-color: #fec006;
    color: #fff
}

.jf_btn.fab.orange {
    background-color: #f39c12;
    color: #fff
}

.jf_btn.fab.deep-orange {
    background-color: #fe5621;
    color: #fff
}

.jf_btn.fab.brown {
    background-color: #785447;
    color: #fff
}

.jf_btn.fab.grey {
    background-color: #9d9d9d;
    color: #fff
}

.jf_btn.fab.blue-grey {
    background-color: #5f7c8a;
    color: #fff
}

.jf_btn.fab.white {
    background-color: #ffffff;
    color: #000
}

.jf_btn.fab.black {
    background-color: #111111;
    color: #fff
}

.jf_btn.icon {
    border-radius: 50%;
    font-size: 24px;
    height: 56px;
    margin-left: 0;
    margin-right: 0;
    min-width: 56px;
    width: 56px;
    padding: 0;
    overflow: hidden;
    color: inherit;
    line-height: normal
}

.jf_btn.icon i {
    font-size: 22px
}

.jf_btn.icon:hover {
    background-color: transparent
}

.jf_btn.icon:active {
    background-color: transparent
}

.jf_btn.icon.primary {
    color: #337ab7
}

.jf_btn.icon.info {
    color: #5bc0de
}

.jf_btn.icon.success {
    color: #5cb85c
}

.jf_btn.icon.warning {
    color: #f0ad4e
}

.jf_btn.icon.danger {
    color: #d9534f
}

.jf_btn.icon.red {
    color: #f34235
}

.jf_btn.icon.pink {
    color: #e81d62
}

.jf_btn.icon.purple {
    color: #9b26af
}

.jf_btn.icon.deep-purple {
    color: #6639b6
}

.jf_btn.icon.indigo {
    color: #3e50b4
}

.jf_btn.icon.blue {
    color: #2095f2
}

.jf_btn.icon.light-blue {
    color: #02a8f3
}

.jf_btn.icon.cyan {
    color: #00bbd3
}

.jf_btn.icon.teal {
    color: #009587
}

.jf_btn.icon.green {
    color: #4bae4f
}

.jf_btn.icon.light-green {
    color: #8ac249
}

.jf_btn.icon.lime {
    color: #ccdb38
}

.jf_btn.icon.yellow {
    color: #feea3a
}

.jf_btn.icon.amber {
    color: #fec006
}

.jf_btn.icon.orange {
    color: #f39c12
}

.jf_btn.icon.deep-orange {
    color: #fe5621
}

.jf_btn.icon.brown {
    color: #785447
}

.jf_btn.icon.grey {
    color: #9d9d9d
}

.jf_btn.icon.blue-grey {
    color: #5f7c8a
}

.jf_btn.icon.white {
    background-color: #ffffff;
    color: #000
}

.jf_btn.icon.black {
    color: #111
}

.jf_btn.xs {
    font-size: 10px;
    padding: 4px 12px
}

.jf_btn.xs.fab,.jf_btn.xs.icon {
    font-size: 12px;
    height: 28px;
    min-width: 28px;
    width: 28px;
    padding: 0
}

.jf_btn.xs.fab i,.jf_btn.xs.icon i {
    font-size: 12px
}

.jf_btn.s {
    font-size: 12px;
    padding: 5px 14px
}

.jf_btn.s.fab,.jf_btn.s.icon {
    font-size: 20px;
    height: 40px;
    min-width: 40px;
    width: 40px;
    padding: 0
}

.jf_btn.s.fab i,.jf_btn.s.icon i {
    font-size: 20px
}

.jf_btn.l {
    font-size: 18px;
    padding: 6px 16px
}

.jf_btn.l.fab,.jf_btn.l.icon {
    font-size: 28px;
    height: 68px;
    min-width: 68px;
    width: 68px;
    padding: 0
}

.jf_btn.l.fab i,.jf_btn.l.icon i {
    font-size: 28px
}

.jf_btn.xl {
    font-size: 24px;
    padding: 6px 20px
}

.jf_btn.xl.fab,.jf_btn.xl.icon {
    font-size: 32px;
    height: 78px;
    min-width: 78px;
    width: 78px;
    padding: 0
}

.jf_btn.xl.fab i,.jf_btn.xl.icon i {
    font-size: 38px;
    vertical-align: -2px
}

.jf_btn.block {
    display: block;
    width: 100%
}

.jf_btn.raised[disabled][disabled],.jf_btn.fab[disabled][disabled],.jf_btn.icon[disabled][disabled] {
    background-color: rgba(0,0,0,0.12);
    color: rgba(0,0,0,0.26);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    -khtml-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    -ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    -o-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
}

.jf_btn .material-icons {
    vertical-align: middle
}

.jf_typo_preview[data-scrolltag="buttons"] .jf_btn {
    margin: 6px 12px 6px 0
}

[data-foreground="dark"] .jf_btn {
    color: #fff
}

[data-foreground="dark"] .jf_btn[disabled][disabled],[data-foreground="dark"] .jf_btn.raised[disabled][disabled],[data-foreground="dark"] .jf_btn.fab[disabled][disabled],[data-foreground="dark"] .jf_btn.icon[disabled][disabled] {
    background-color: rgba(0,0,0,0.45);
    color: rgba(255,255,255,0.5)
}

[data-foreground="dark"] .jf_btn.white {
    color: #000
}

.dir-rtl .jf_typo_preview[data-scrolltag="buttons"] .jf_btn {
    margin: 6px 0 6px 12px
}