/*!
 * Fenix14 v1.0.15 2017-08-14 (http://fenixerp.com.br)
 * Copyright 1997-2017 Sistema Fenix
 */

.fa-sf-24i,
.fa-sf-32i,
.fa-sf-40i {
    margin-left: 5%;
    margin-bottom: 3%;
    margin-top: 5%
}

.f-btn-danger,
.f-btn-default,
.f-btn-grey,
.f-btn-info,
.f-btn-inverse,
.f-btn-light,
.f-btn-pink,
.f-btn-purple,
.f-btn-success,
.f-btn-warning,
.f-btn-yellow {
    background-repeat: repeat-x
}

.fa-sf-16i {
    margin-left: 5%;
    font-size: 16px!important;
    vertical-align: -15%;
    width: 16px
}

.fa-sf-24i {
    font-size: 21px!important;
    width: 24px
}

.fa-sf-32i {
    font-size: 29px!important;
    width: 32px
}

.fa-sf-40i {
    font-size: 37px!important;
    width: 40px
}

.fa-sf-24,
.fa-sf-32,
.fa-sf-40,
.fa-sf-48,
.fa-sf-48i,
.fa-sf-64,
.fa-sf-64i {
    margin-top: 5%;
    width: auto!important;
    margin-bottom: 3%;
    margin-left: 5%
}

.fa-sf-24 {
    font-size: 21px!important
}

.fa-sf-32 {
    font-size: 29px!important
}

.fa-sf-40 {
    font-size: 37px
}

.fa-sf-48 {
    font-size: 35px!important
}

.fa-sf-48i {
    font-size: 35px
}

.fa-sf-64 {
    font-size: 61px!important
}

.fa-badge-sf-24 {
    margin-top: 5%;
    font-size: 24px!important
}

.fa-sf-64i {
    font-size: 64px!important
}

.select2-container .select2-selection--single {
    height: 24px!important
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 22px!important
}

.select2-dropdown {
    z-index: 99060!important
}

#holdon-overlay {
    z-index: 99070!important
}

.igrowl,
.swal2-container {
    z-index: 99060!important
}

.igrowl-message,
.igrowl-title {
    font-size: 14px!important;
    line-height: 20px!important
}

.igrowl-icon,
.igrowl-img {
    width: 45px!important
}

.fa-sf-16 {
    width: auto!important;
    margin-left: 5%;
    font-size: 16px!important;
    vertical-align: -15%
}

.fa-sf-required {
    font-size: 9px!important;
    vertical-align: top;
    color: #d15b47;
    margin-right: 1px
}

.f-label.arrowed-in-right {
    margin-right: 5px;
    position: relative;
    z-index: 1
}

.f-label.arrowed-in-right:after {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    border: 1px solid transparent;
    -moz-border-left-colors: #abbac3;
    border-color: #abbac3 transparent #abbac3 #abbac3;
    -moz-border-right-colors: none;
    right: -5px;
    border-width: 10px 5px
}

.f-label.arrowed-right:after,
.f-label.arrowed:before {
    border: 1px solid transparent;
    display: inline-block;
    content: "";
    top: 0
}

.f-label.arrowed-right {
    margin-right: 5px;
    position: relative;
    z-index: 1
}

.f-label.arrowed-right:after {
    position: absolute;
    z-index: -1;
    border-left-color: #abbac3;
    -moz-border-left-colors: #abbac3;
    right: -10px;
    border-width: 10px 5px
}

.f-label.arrowed {
    margin-left: 5px;
    position: relative;
    z-index: 1
}

.f-label.arrowed:before {
    position: absolute;
    z-index: -1;
    border-right-color: #abbac3;
    -moz-border-right-colors: #abbac3;
    left: -10px;
    border-width: 10px 5px
}

.f-label.arrowed-in {
    margin-left: 5px;
    position: relative;
    z-index: 1
}

.f-label.arrowed-in:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    border: 1px solid transparent;
    -moz-border-right-colors: #abbac3;
    border-color: #abbac3 #abbac3 #abbac3 transparent;
    -moz-border-left-colors: none;
    left: -5px;
    border-width: 10px 5px
}

.fa-sf-white {
    color: #fff
}

.fa-sf-primary {
    color: #428bca
}

.fa-sf-info {
    color: #6fb3e0
}

.fa-sf-success {
    color: #87b87f
}

.fa-sf-warning {
    color: #ffb752
}

.fa-sf-danger {
    color: #d15b47
}

.fa-sf-inverse {
    color: #555
}

.fa-sf-pink {
    color: #d6487e
}

.fa-sf-purple {
    color: #9585bf
}

.fa-sf-yellow {
    color: #fee188
}

.fa-sf-grey {
    color: #a0a0a0
}

.fa-sf-light {
    color: #e7e7e7
}

.f-ba,
.f-badge,
.f-label {
    text-shadow: none;
    font-weight: 400;
    color: #fff;
    display: inline-block;
    font-size: 12px
}

.f-ba,
.f-badge {
    line-height: 15px;
    min-width: 10px;
    padding: 3px 7px;
    vertical-align: middle;
    background-color: #777;
    border-radius: 10px
}

.f-label {
    border-radius: 0;
    background-color: #abbac3;
    padding: .2em .6em .3em;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    line-height: 1.15;
    height: 20px
}

.f-circle-image img {
    border-radius: 50%
}

.f-circle-image--info {
    border: 3px solid #275467;
    background-color: #4b9cd7
}

.f-badge-btn,
.f-badge.f-badge-btn {
    width: 40px!important;
    height: 40px!important;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    padding: 5px;
    vertical-align: middle
}

.f-badge-yellow,
.f-label-yellow {
    color: #963;
    border-color: #fee188
}

.f-badge-btn:focus,
.f-badge-btn:hover {
    -webkit-filter: brightness(110%);
    filter: brightness(110%)
}

.f-badge-btn:active {
    -webkit-filter: brightness(80%);
    filter: brightness(80%)
}

.f-badge-btn.active {
    -webkit-filter: brightness(80%);
    filter: brightness(80%)
}

.f-badge.radius-1 {
    border-radius: 1px
}

.f-badge.radius-2 {
    border-radius: 2px
}

.f-badge.radius-3 {
    border-radius: 3px
}

.f-badge.radius-4 {
    border-radius: 4px
}

.f-badge.radius-5 {
    border-radius: 5px
}

.f-badge.radius-6 {
    border-radius: 6px
}

.f-badge-transparent,
.f-badge.f-badge-transparent,
.f-label-transparent,
.f-label.f-label-transparent {
    background-color: transparent
}

.f-badge-grey,
.f-badge.f-badge-grey,
.f-label-grey,
.f-label.f-label-grey {
    background-color: #a0a0a0
}

.f-badge-info,
.f-badge.f-badge-info,
.f-label-info,
.f-label.f-label-info {
    background-color: #3a87ad
}

.f-badge-primary,
.f-badge.f-badge-primary,
.f-label-primary,
.f-label.f-label-primary {
    background-color: #428bca
}

.f-badge-success,
.f-badge.f-badge-success,
.f-label-success,
.f-label.f-label-success {
    background-color: #82af6f
}

.f-badge-danger,
.f-badge-important,
.f-badge.f-badge-danger,
.f-badge.f-badge-important,
.f-label-danger,
.f-label-important,
.f-label.f-label-danger,
.f-label.f-label-important {
    background-color: #d15b47
}

.f-badge-inverse,
.f-badge.f-badge-inverse,
.f-label-inverse,
.f-label.f-label-inverse {
    background-color: #333
}

.f-badge-warning,
.f-badge.f-badge-warning,
.f-label-warning,
.f-label.f-label-warning {
    background-color: #f89406
}

.f-badge-pink,
.f-badge.f-badge-pink,
.f-label-pink,
.f-label.f-label-pink {
    background-color: #d6487e
}

.f-badge-purple,
.f-badge.f-badge-purple,
.f-label-purple,
.f-label.f-label-purple {
    background-color: #9585bf
}

.f-badge-yellow,
.f-badge.f-badge-yellow,
.f-label-yellow,
.f-label.f-label-yellow {
    background-color: #fee188
}

.f-badge-light,
.f-label-light {
    color: #888
}

.f-badge-light,
.f-badge.f-badge-light,
.f-label-light,
.f-label.f-label-light {
    background-color: #e7e7e7
}

.f-btn-danger .x-btn-inner,
.f-btn-grey .x-btn-inner,
.f-btn-info .x-btn-inner,
.f-btn-inverse .x-btn-inner,
.f-btn-pink .x-btn-inner,
.f-btn-primary .x-btn-inner,
.f-btn-purple .x-btn-inner,
.f-btn-success .x-btn-inner,
.f-btn-warning .x-btn-inner {
    color: #fff
}

.f-btn-danger {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #d55b52 0, #d12723 100%)!important;
    background-image: -o-linear-gradient(top, #d55b52 0, #d12723 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d55b52), to(#d12723))!important;
    background-image: linear-gradient(to bottom, #d55b52 0, #d12723 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffd55b52', endColorstr='#ffd12723', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #b92c28!important;
}

.f-btn-danger:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)!important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)!important;
    background: #d12723!important;
    border-color: #b92c28!important;
}

.f-btn-danger .f-badge {
    text-shadow: none
}

.x-btn-over.f-btn-danger:focus,
.x-btn-over.f-btn-danger:hover {
    background: #d12723!important;    
}

.f-btn-grey {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #898989 0, #696969 100%)!important;
    background-image: -o-linear-gradient(top, #898989 0, #696969 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#898989), to(#696969))!important;
    background-image: linear-gradient(to bottom, #898989 0, #696969 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff898989', endColorstr='#ff696969', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #656565!important;
}

.f-btn-grey:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #696969!important;
    border-color: #656565!important;
}

.f-btn-grey .f-badge {
    text-shadow: none
}

.f-btn-grey:focus,
.f-btn-grey:hover {
    background: #696969!important;    
}

.f-btn-info {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #75b5e6 0, #5ba4d5 100%)!important;
    background-image: -o-linear-gradient(top, #75b5e6 0, #5ba4d5 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#75b5e6), to(#5ba4d5))!important;
    background-image: linear-gradient(to bottom, #75b5e6 0, #5ba4d5 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff75b5e6', endColorstr='#ff5ba4d5', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #28a4c9!important;
}

.f-btn-info:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #5ba4d5;
    border-color: #28a4c9!important;
}

.f-btn-info .f-badge {
    text-shadow: none
}

.f-btn-info:focus,
.f-btn-info:hover {
    background: #5ba4d5!important;    
}

.f-btn-inverse {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #555 0, #333 100%)!important;
    background-image: -o-linear-gradient(top, #555 0, #333 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333))!important;
    background-image: linear-gradient(to bottom, #555 0, #333 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #2b0200!important;
}

.f-btn-inverse:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #333!important;
    border-color: #2b0200!important;
}

.f-btn-inverse .f-badge {
    text-shadow: none
}

.f-btn-inverse:focus,
.f-btn-inverse:hover {
    background-color: #333!important;
}

.f-btn-pink {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #db5e8c 0, #ce3970 100%)!important;
    background-image: -o-linear-gradient(top, #db5e8c 0, #ce3970 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#db5e8c), to(#ce3970))!important;
    background-image: linear-gradient(to bottom, #db5e8c 0, #ce3970 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffdb5e8c', endColorstr='#ffce3970', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #a42857!important;
}

.f-btn-pink:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #ce3970!important;
    border-color: #a42857!important;
}

.f-btn-pink .f-badge {
    text-shadow: none
}

.f-btn-pink:focus,
.f-btn-pink:hover {
    background: #ce3970!important;    
}

.f-btn-primary {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #3b98d6 0, #197ec1 100%)!important;
    background-image: -o-linear-gradient(top, #3b98d6 0, #197ec1 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3b98d6), to(#197ec1))!important;
    background-image: linear-gradient(to bottom, #3b98d6 0, #197ec1 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff3b98d6', endColorstr='#ff197ec1', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    background-repeat: repeat-x;
    border-color: #245580!important;
}

.f-btn-primary:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #197ec1!important;
    border-color: #245580!important;
}

.f-btn-primary .f-badge {
    text-shadow: none
}

.f-btn-primary:focus,
.f-btn-primary:hover {
    background: #197ec1!important;
}

.f-btn-purple {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #a696ce 0, #8a7cb4 100%)!important;
    background-image: -o-linear-gradient(top, #a696ce 0, #8a7cb4 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a696ce), to(#8a7cb4))!important;
    background-image: linear-gradient(to bottom, #a696ce 0, #8a7cb4 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a696ce', endColorstr='#8a7cb4', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #8576b1!important;
}

.f-btn-purple:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #8a7cb4!important;
    border-color: #8576b1!important;
}

.f-btn-purple .f-badge {
    text-shadow: none
}

.f-btn-purple:focus,
.f-btn-purple:hover {
    background: #8a7cb4!important;
}

.f-btn-success {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #8ebf60 0, #7daa50 100%)!important;
    background-image: -o-linear-gradient(top, #8ebf60 0, #7daa50 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#8ebf60), to(#7daa50))!important;
    background-image: linear-gradient(to bottom, #8ebf60 0, #7daa50 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff8ebf60', endColorstr='#ff7daa50', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #3e8f3e!important;
}

.f-btn-success:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background-color: #7daa50;
    border-color: #3e8f3e!important;
}

.f-btn-success .f-badge {
    text-shadow: none
}

.f-btn-success:focus,
.f-btn-success:hover {
    background: #7daa50!important;
}

.f-btn-warning {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #ffbf66 0, #ffa830 100%)!important;
    background-image: -o-linear-gradient(top, #ffbf66 0, #ffa830 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffbf66), to(#ffa830))!important;
    background-image: linear-gradient(to bottom, #ffbf66 0, #ffa830 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffbf66', endColorstr='#ffffa830', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #e38d13!important;
}

.f-btn-warning:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #ffa830!important;
    border-color: #e38d13!important;
}

.f-btn-warning .f-badge {
    text-shadow: none
}

.f-btn-warning:focus,
.f-btn-warning:hover {
    background: #ffa830!important;
}

.f-label-info.arrowed:before {
    border-right-color: #3a87ad;
    -moz-border-right-colors: #3a87ad
}

.f-label-info.arrowed-in:before {
    border-color: #3a87ad #3a87ad #3a87ad transparent;
    -moz-border-right-colors: #3a87ad
}

.f-label-info.arrowed-right:after {
    border-left-color: #3a87ad;
    -moz-border-left-colors: #3a87ad
}

.f-label-info.arrowed-in-right:after {
    border-color: #3a87ad transparent #3a87ad #3a87ad;
    -moz-border-left-colors: #3a87ad
}

.f-label-primary.arrowed:before {
    border-right-color: #428bca;
    -moz-border-right-colors: #428bca
}

.f-label-primary.arrowed-in:before {
    border-color: #428bca #428bca #428bca transparent;
    -moz-border-right-colors: #428bca
}

.f-label-primary.arrowed-right:after {
    border-left-color: #428bca;
    -moz-border-left-colors: #428bca
}

.f-label-primary.arrowed-in-right:after {
    border-color: #428bca transparent #428bca #428bca;
    -moz-border-left-colors: #428bca
}

.f-label-success.arrowed:before {
    border-right-color: #82af6f;
    -moz-border-right-colors: #82af6f
}

.f-label-success.arrowed-in:before {
    border-color: #82af6f #82af6f #82af6f transparent;
    -moz-border-right-colors: #82af6f
}

.f-label-success.arrowed-right:after {
    border-left-color: #82af6f;
    -moz-border-left-colors: #82af6f
}

.f-label-success.arrowed-in-right:after {
    border-color: #82af6f transparent #82af6f #82af6f;
    -moz-border-left-colors: #82af6f
}

.f-label-warning.arrowed:before {
    border-right-color: #f89406;
    -moz-border-right-colors: #f89406
}

.f-label-warning.arrowed-in:before {
    border-color: #f89406 #f89406 #f89406 transparent;
    -moz-border-right-colors: #f89406
}

.f-label-warning.arrowed-right:after {
    border-left-color: #f89406;
    -moz-border-left-colors: #f89406
}

.f-label-warning.arrowed-in-right:after {
    border-color: #f89406 transparent #f89406 #f89406;
    -moz-border-left-colors: #f89406
}

.f-label-important.arrowed:before {
    border-right-color: #d15b47;
    -moz-border-right-colors: #d15b47
}

.f-label-important.arrowed-in:before {
    border-color: #d15b47 #d15b47 #d15b47 transparent;
    -moz-border-right-colors: #d15b47
}

.f-label-important.arrowed-right:after {
    border-left-color: #d15b47;
    -moz-border-left-colors: #d15b47
}

.f-label-important.arrowed-in-right:after {
    border-color: #d15b47 transparent #d15b47 #d15b47;
    -moz-border-left-colors: #d15b47
}

.f-label-danger.arrowed:before {
    border-right-color: #d15b47;
    -moz-border-right-colors: #d15b47
}

.f-label-danger.arrowed-in:before {
    border-color: #d15b47 #d15b47 #d15b47 transparent;
    -moz-border-right-colors: #d15b47
}

.f-label-danger.arrowed-right:after {
    border-left-color: #d15b47;
    -moz-border-left-colors: #d15b47
}

.f-label-danger.arrowed-in-right:after {
    border-color: #d15b47 transparent #d15b47 #d15b47;
    -moz-border-left-colors: #d15b47
}

.f-label-inverse.arrowed:before {
    border-right-color: #333;
    -moz-border-right-colors: #333
}

.f-label-inverse.arrowed-in:before {
    border-color: #333 #333 #333 transparent;
    -moz-border-right-colors: #333
}

.f-label-inverse.arrowed-right:after {
    border-left-color: #333;
    -moz-border-left-colors: #333
}

.f-label-inverse.arrowed-in-right:after {
    border-color: #333 transparent #333 #333;
    -moz-border-left-colors: #333
}

.f-label-pink.arrowed:before {
    border-right-color: #d6487e;
    -moz-border-right-colors: #d6487e
}

.f-label-pink.arrowed-in:before {
    border-color: #d6487e #d6487e #d6487e transparent;
    -moz-border-right-colors: #d6487e
}

.f-label-pink.arrowed-right:after {
    border-left-color: #d6487e;
    -moz-border-left-colors: #d6487e
}

.f-label-pink.arrowed-in-right:after {
    border-color: #d6487e transparent #d6487e #d6487e;
    -moz-border-left-colors: #d6487e
}

.f-label-purple.arrowed:before {
    border-right-color: #9585bf;
    -moz-border-right-colors: #9585bf
}

.f-label-purple.arrowed-in:before {
    border-color: #9585bf #9585bf #9585bf transparent;
    -moz-border-right-colors: #9585bf
}

.f-label-purple.arrowed-right:after {
    border-left-color: #9585bf;
    -moz-border-left-colors: #9585bf
}

.f-label-purple.arrowed-in-right:after {
    border-color: #9585bf transparent #9585bf #9585bf;
    -moz-border-left-colors: #9585bf
}

.f-label-yellow.arrowed:before {
    border-right-color: #fee188;
    -moz-border-right-colors: #fee188
}

.f-label-yellow.arrowed-in:before {
    border-color: #fee188 #fee188 #fee188 transparent;
    -moz-border-right-colors: #fee188
}

.f-label-yellow.arrowed-right:after {
    border-left-color: #fee188;
    -moz-border-left-colors: #fee188
}

.f-label-yellow.arrowed-in-right:after {
    border-color: #fee188 transparent #fee188 #fee188;
    -moz-border-left-colors: #fee188
}

.f-label-light.arrowed:before {
    border-right-color: #e7e7e7;
    -moz-border-right-colors: #e7e7e7
}

.f-label-light.arrowed-in:before {
    border-color: #e7e7e7 #e7e7e7 #e7e7e7 transparent;
    -moz-border-right-colors: #e7e7e7
}

.f-label-light.arrowed-right:after {
    border-left-color: #e7e7e7;
    -moz-border-left-colors: #e7e7e7
}

.f-label-light.arrowed-in-right:after {
    border-color: #e7e7e7 transparent #e7e7e7 #e7e7e7;
    -moz-border-left-colors: #e7e7e7
}

.f-label-grey.arrowed:before {
    border-right-color: #a0a0a0;
    -moz-border-right-colors: #a0a0a0
}

.f-label-grey.arrowed-in:before {
    border-color: #a0a0a0 #a0a0a0 #a0a0a0 transparent;
    -moz-border-right-colors: #a0a0a0
}

.f-label-grey.arrowed-right:after {
    border-left-color: #a0a0a0;
    -moz-border-left-colors: #a0a0a0
}

.f-label-grey.arrowed-in-right:after {
    border-color: #a0a0a0 transparent #a0a0a0 #a0a0a0;
    -moz-border-left-colors: #a0a0a0
}

.f-list-ol-user {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    border-right: 2px solid #f0f0f0;
    padding-right: 15px;
    margin: 7px 15px 7px 0;
    border-radius: 2px;
    list-style: none
}

.f-list-user {
    display: inline-block;
    vertical-align: middle;
    text-align: -webkit-match-parent;
    padding: 0 2px
}

.f-btn-default {
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    text-shadow: 0 1px 0 #bcc9d5;
    background-image: -webkit-linear-gradient(top, #bcc9d5 0, #abbac3 100%)!important;
    background-image: -o-linear-gradient(top, #bcc9d5 0, #abbac3 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bcc9d5), to(#abbac3))!important;
    background-image: linear-gradient(to bottom, #bcc9d5 0, #abbac3 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffbcc9d5', endColorstr='#ffabbac3', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #a6b6bf
}

.f-btn-default:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #abbac3!important;
    border-color: #a6b6bf!important;
}

.f-btn-default .f-badge {
    text-shadow: none
}

.f-btn-default:focus,
.f-btn-default:hover {
    background-color: #abbac3!important;
}

.f-btn-light {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #f4f4f4 0, #e6e6e6 100%)!important;
    background-image: -o-linear-gradient(top, #f4f4f4 0, #e6e6e6 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e6e6e6))!important;
    background-image: linear-gradient(to bottom, #f4f4f4 0, #e6e6e6 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fff4f4f4', endColorstr='#ffe6e6e6', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #e1e1e1
}

.f-btn-light:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #e6e6e6!important;
    border-color: #e1e1e1
}

.f-btn-light .f-badge {
    text-shadow: none
}

.f-btn-light .x-btn-inner {
    color: #5a5a5a!important;
    text-shadow: 0 1px 1px #EEE!important
}

.f-btn-light:focus,
.f-btn-light:hover {
    background: #e6e6e6!important;
}

.f-btn-yellow {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)!important;
    background-image: -webkit-linear-gradient(top, #ffe8a5 0, #fcd76a 100%)!important;
    background-image: -o-linear-gradient(top, #ffe8a5 0, #fcd76a 100%)!important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffe8a5), to(#fcd76a))!important;
    background-image: linear-gradient(to bottom, #ffe8a5 0, #fcd76a 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0)!important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important;
    border-color: #fcd661
}

.f-btn-yellow:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #fcd76a!important;
    border-color: #fcd661!important;
}

.f-btn-yellow .f-badge {
    text-shadow: none
}

.f-btn-yellow .x-btn-inner {
    color: #963!important;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, .4)!important
}

.f-btn-yellow:focus,
.f-btn-yellow:hover {
    background: #fcd76a!important;
}

.f-btn-transparent {
    text-shadow: 0 1px 0 #bcc9d5;
    background: 0 0;
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-transparent .f-btn-default[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-default.active,
.f-btn-primary.active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.f-btn-transparent:focus,
.f-btn-transparent:hover {
    border-color: #245580
}

.f-btn-transparent:active {
    background: #157fcc!important;
    border-color: #245580!important;
}

.f-btn-default.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #abbac3!important;
    border-color: #a6b6bf!important;
}

.f-btn-primary.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #197ec1!important;
    border-color: #245580!important;
}

.f-btn-info.active,
.f-btn-success.active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.f-btn-success.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #7daa50!important;
    border-color: #3e8f3e!important;
}

.f-btn-info.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #5ba4d5!important;
    border-color: #28a4c9!important;
}

.f-btn-danger.active,
.f-btn-warning.active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.f-btn-warning.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #ffa830!important;
    border-color: #e38d13!important;
}

.f-btn-danger.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #d12723!important;
    border-color: #b92c28!important;
}

.f-btn-pink.active,
.f-btn-purple.active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.f-btn-purple.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #8a7cb4!important;
    border-color: #8576b1!important;
}

.f-btn-pink.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #ce3970!important;
    border-color: #a42857!important;
}

.f-btn-grey.active,
.f-btn-inverse.active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.f-btn-inverse.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #333!important;
    border-color: #2b0200!important;
}

.f-btn-grey.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #696969!important;
    border-color: #656565!important;
}

.f-btn-light.active,
.f-btn-yellow.active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.f-btn-light.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #e6e6e6!important;
    border-color: #e1e1e1!important;
}

.f-btn-yellow.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #fcd76a!important;
    border-color: #fcd661!important;
}

.f-btn-transparent.active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    background: #157fcc!important;
    border-color: #245580!important;
}

.f-btn-default.disabled,
.f-btn-default.disabled:active,
.f-btn-default.disabled:focus,
.f-btn-default.disabled:hover {
    background: #abbac3!important;
    background-image: none
}

.f-btn-default.disabled {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-primary.disabled {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #197ec1!important;
    background-image: none
}

.f-btn-primary.disabled:active,
.f-btn-primary.disabled:focus,
.f-btn-primary.disabled:hover {
    background: #197ec1!important;
    background-image: none
}

.f-btn-success.disabled,
.f-btn-success.disabled:active,
.f-btn-success.disabled:focus,
.f-btn-success.disabled:hover {
    background: #7daa50!important;
    background-image: none
}

.f-btn-success.disabled {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-info.disabled {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #5ba4d5!important;
    background-image: none
}

.f-btn-info.disabled:active,
.f-btn-info.disabled:focus,
.f-btn-info.disabled:hover {
    background: #5ba4d5!important;
    background-image: none
}

.f-btn-warning.disabled,
.f-btn-warning.disabled:active,
.f-btn-warning.disabled:focus,
.f-btn-warning.disabled:hover {
    background: #ffa830!important;
    background-image: none
}

.f-btn-warning.disabled {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-danger.disabled {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #d12723!important;
    background-image: none
}

.f-btn-danger.disabled:active,
.f-btn-danger.disabled:focus,
.f-btn-danger.disabled:hover {
    background: #d12723!important;
    background-image: none
}

.f-btn-purple.disabled,
.f-btn-purple.disabled:active,
.f-btn-purple.disabled:focus,
.f-btn-purple.disabled:hover {
    background: #8a7cb4!important;
    background-image: none
}

.f-btn-purple.disabled {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-pink.disabled {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #ce3970!important;
    background-image: none
}

.f-btn-pink.disabled:active,
.f-btn-pink.disabled:focus,
.f-btn-pink.disabled:hover {
    background: #ce3970!important;
    background-image: none
}

.f-btn-inverse.disabled,
.f-btn-inverse.disabled:active,
.f-btn-inverse.disabled:focus,
.f-btn-inverse.disabled:hover {
    background: #333!important;
    background-image: none
}

.f-btn-inverse.disabled {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-grey.disabled {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #696969!important;
    background-image: none
}

.f-btn-grey.disabled:active,
.f-btn-grey.disabled:focus,
.f-btn-grey.disabled:hover {
    background: #696969!important;
    background-image: none
}

.f-btn-light.disabled,
.f-btn-light.disabled:active,
.f-btn-light.disabled:focus,
.f-btn-light.disabled:hover {
    background: #e6e6e6!important;
    background-image: none
}

.f-btn-light.disabled {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-yellow.disabled {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #fcd76a!important;
    background-image: none
}

.f-btn-yellow.disabled:active,
.f-btn-yellow.disabled:focus,
.f-btn-yellow.disabled:hover {
    background: #fcd76a!important;
    background-image: none
}

.f-btn-primary[disabled],
.f-btn-primary[disabled]:active,
.f-btn-primary[disabled]:focus,
.f-btn-primary[disabled]:hover {
    background: #197ec1!important;
    background-image: none
}

.f-btn-primary[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-success[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #7daa50!important;
    background-image: none
}

.f-btn-success[disabled]:active,
.f-btn-success[disabled]:focus,
.f-btn-success[disabled]:hover {
    background: #7daa50!important;
    background-image: none
}

.f-btn-info[disabled],
.f-btn-info[disabled]:active,
.f-btn-info[disabled]:focus,
.f-btn-info[disabled]:hover {
    background: #5ba4d5!important;
    background-image: none
}

.f-btn-info[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-warning[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #ffa830!important;
    background-image: none
}

.f-btn-warning[disabled]:active,
.f-btn-warning[disabled]:focus,
.f-btn-warning[disabled]:hover {
    background: #ffa830!important;
    background-image: none
}

.f-btn-danger[disabled],
.f-btn-danger[disabled]:active,
.f-btn-danger[disabled]:focus,
.f-btn-danger[disabled]:hover {
    background: #d12723!important;
    background-image: none
}

.f-btn-danger[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-purple[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #8a7cb4;
    background-image: none
}

.f-btn-purple[disabled]:active,
.f-btn-purple[disabled]:focus,
.f-btn-purple[disabled]:hover {
    background: #8a7cb4!important;
    background-image: none
}

.f-btn-pink[disabled],
.f-btn-pink[disabled]:active,
.f-btn-pink[disabled]:focus,
.f-btn-pink[disabled]:hover {
    background: #ce3970!important;
    background-image: none
}

.f-btn-pink[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-inverse[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #333!important;
    background-image: none
}

.f-btn-inverse[disabled]:active,
.f-btn-inverse[disabled]:focus,
.f-btn-inverse[disabled]:hover {
    background: #333!important;
    background-image: none
}

.f-btn-grey[disabled],
.f-btn-grey[disabled]:active,
.f-btn-grey[disabled]:focus,
.f-btn-grey[disabled]:hover {
    background: #696969!important;
    background-image: none
}

.f-btn-grey[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-light[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #e6e6e6!important;
    background-image: none
}

.f-btn-light[disabled]:active,
.f-btn-light[disabled]:focus,
.f-btn-light[disabled]:hover {
    background: #e6e6e6!important;
    background-image: none
}

.f-btn-yellow[disabled],
.f-btn-yellow[disabled]:active,
.f-btn-yellow[disabled]:focus,
.f-btn-yellow[disabled]:hover {
    background: #fcd76a!important;
    background-image: none
}

.f-btn-yellow[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none
}

.f-btn-transparent[disabled],
.f-btn-transparent[disabled]:active,
.f-btn-transparent[disabled]:focus,
.f-btn-transparent[disabled]:hover {
    background: 0 0;
    border-color: transparent
}

.f-btn-transparent[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none
}

fieldset[disabled] .f-btn-default {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #abbac3;
    background-image: none
}

fieldset[disabled] .f-btn-default:active,
fieldset[disabled] .f-btn-default:focus,
fieldset[disabled] .f-btn-default:hover {
    background-color: #abbac3;
    background-image: none
}

fieldset[disabled] .f-btn-primary,
fieldset[disabled] .f-btn-primary:active,
fieldset[disabled] .f-btn-primary:focus,
fieldset[disabled] .f-btn-primary:hover {
    background-color: #197ec1;
    background-image: none
}

fieldset[disabled] .f-btn-primary {
    -webkit-box-shadow: none;
    box-shadow: none
}

fieldset[disabled] .f-btn-success {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #7daa50;
    background-image: none
}

fieldset[disabled] .f-btn-success:active,
fieldset[disabled] .f-btn-success:focus,
fieldset[disabled] .f-btn-success:hover {
    background-color: #7daa50;
    background-image: none
}

fieldset[disabled] .f-btn-info,
fieldset[disabled] .f-btn-info:active,
fieldset[disabled] .f-btn-info:focus,
fieldset[disabled] .f-btn-info:hover {
    background-color: #5ba4d5;
    background-image: none
}

fieldset[disabled] .f-btn-info {
    -webkit-box-shadow: none;
    box-shadow: none
}

fieldset[disabled] .f-btn-warning {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #ffa830;
    background-image: none
}

fieldset[disabled] .f-btn-warning:active,
fieldset[disabled] .f-btn-warning:focus,
fieldset[disabled] .f-btn-warning:hover {
    background-color: #ffa830;
    background-image: none
}

fieldset[disabled] .f-btn-danger,
fieldset[disabled] .f-btn-danger:active,
fieldset[disabled] .f-btn-danger:focus,
fieldset[disabled] .f-btn-danger:hover {
    background-color: #d12723;
    background-image: none
}

fieldset[disabled] .f-btn-danger {
    -webkit-box-shadow: none;
    box-shadow: none
}

fieldset[disabled] .f-btn-purple {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #8a7cb4;
    background-image: none
}

fieldset[disabled] .f-btn-purple:active,
fieldset[disabled] .f-btn-purple:focus,
fieldset[disabled] .f-btn-purple:hover {
    background-color: #8a7cb4;
    background-image: none
}

fieldset[disabled] .f-btn-pink,
fieldset[disabled] .f-btn-pink:active,
fieldset[disabled] .f-btn-pink:focus,
fieldset[disabled] .f-btn-pink:hover {
    background-color: #ce3970;
    background-image: none
}

fieldset[disabled] .f-btn-pink {
    -webkit-box-shadow: none;
    box-shadow: none
}

fieldset[disabled] .f-btn-inverse {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #333;
    background-image: none
}

fieldset[disabled] .f-btn-inverse:active,
fieldset[disabled] .f-btn-inverse:focus,
fieldset[disabled] .f-btn-inverse:hover {
    background-color: #333;
    background-image: none
}

fieldset[disabled] .f-btn-grey,
fieldset[disabled] .f-btn-grey:active,
fieldset[disabled] .f-btn-grey:focus,
fieldset[disabled] .f-btn-grey:hover {
    background-color: #696969;
    background-image: none
}

fieldset[disabled] .f-btn-grey {
    -webkit-box-shadow: none;
    box-shadow: none
}

fieldset[disabled] .f-btn-light {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #e6e6e6;
    background-image: none
}

fieldset[disabled] .f-btn-light:active,
fieldset[disabled] .f-btn-light:focus,
fieldset[disabled] .f-btn-light:hover {
    background-color: #e6e6e6;
    background-image: none
}

fieldset[disabled] .f-btn-yellow,
fieldset[disabled] .f-btn-yellow:active,
fieldset[disabled] .f-btn-yellow:focus,
fieldset[disabled] .f-btn-yellow:hover {
    background-color: #fcd76a;
    background-image: none
}

fieldset[disabled] .f-btn-yellow {
    -webkit-box-shadow: none;
    box-shadow: none
}

fieldset[disabled] .f-btn-transparent,
fieldset[disabled] .f-btn-transparent:active,
fieldset[disabled] .f-btn-transparent:focus,
fieldset[disabled] .f-btn-transparent:hover {
    background: 0 0;
    border-color: transparent
}

fieldset[disabled] .f-btn-transparent {
    -webkit-box-shadow: none;
    box-shadow: none
}

.x-ux-callout.primary,
.x-ux-callout.warning {
    overflow: visible;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    font-size: 14px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    line-height: 18px
}

fieldset[disabled] .f-btn-default.active,
fieldset[disabled] .f-btn-default.focus {
    background-color: #abbac3;
    background-image: none
}

fieldset[disabled] .f-btn-transparent.active,
fieldset[disabled] .f-btn-transparent.focus {
    background: 0 0;
    border-color: transparent
}

fieldset[disabled] .f-btn-primary.active,
fieldset[disabled] .f-btn-primary.focus {
    background-color: #197ec1;
    background-image: none
}

fieldset[disabled] .f-btn-success.active,
fieldset[disabled] .f-btn-success.focus {
    background-color: #7daa50;
    background-image: none
}

fieldset[disabled] .f-btn-info.active,
fieldset[disabled] .f-btn-info.focus {
    background-color: #5ba4d5;
    background-image: none
}

fieldset[disabled] .f-btn-warning.active,
fieldset[disabled] .f-btn-warning.focus {
    background-color: #ffa830;
    background-image: none
}

fieldset[disabled] .f-btn-danger.active,
fieldset[disabled] .f-btn-danger.focus {
    background-color: #d12723;
    background-image: none
}

fieldset[disabled] .f-btn-purple.active,
fieldset[disabled] .f-btn-purple.focus {
    background-color: #8a7cb4;
    background-image: none
}

fieldset[disabled] .f-btn-pink.active,
fieldset[disabled] .f-btn-pink.focus {
    background-color: #ce3970;
    background-image: none
}

fieldset[disabled] .f-btn-inverse.active,
fieldset[disabled] .f-btn-inverse.focus {
    background-color: #333;
    background-image: none
}

fieldset[disabled] .f-btn-grey.active,
fieldset[disabled] .f-btn-grey.focus {
    background-color: #696969;
    background-image: none
}

fieldset[disabled] .f-btn-light.active,
fieldset[disabled] .f-btn-light.focus {
    background-color: #e6e6e6;
    background-image: none
}

fieldset[disabled] .f-btn-yellow.active,
fieldset[disabled] .f-btn-yellow.focus {
    background-color: #fcd76a;
    background-image: none
}

.f-btn.active,
.f-btn:active {
    background-image: none
}

.f-btn-default.disabled.active,
.f-btn-default.disabled.focus,
.f-btn-default[disabled],
.f-btn-default[disabled].active,
.f-btn-default[disabled].focus,
.f-btn-default[disabled]:active,
.f-btn-default[disabled]:focus,
.f-btn-default[disabled]:hover {
    background-color: #abbac3;
    background-image: none
}

.f-btn-transparent.disabled,
.f-btn-transparent.disabled.active,
.f-btn-transparent.disabled.focus,
.f-btn-transparent.disabled:active,
.f-btn-transparent.disabled:focus,
.f-btn-transparent.disabled:hover,
.f-btn-transparent[disabled].active,
.f-btn-transparent[disabled].focus {
    background: 0 0;
    border-color: transparent
}

.f-btn-primary.disabled.active,
.f-btn-primary.disabled.focus,
.f-btn-primary[disabled].active,
.f-btn-primary[disabled].focus {
    background-color: #197ec1;
    background-image: none
}

.f-btn-success.disabled.active,
.f-btn-success.disabled.focus,
.f-btn-success[disabled].active,
.f-btn-success[disabled].focus {
    background-color: #7daa50;
    background-image: none
}

.f-btn-info.disabled.active,
.f-btn-info.disabled.focus,
.f-btn-info[disabled].active,
.f-btn-info[disabled].focus {
    background-color: #5ba4d5;
    background-image: none
}

.f-btn-warning.disabled.active,
.f-btn-warning.disabled.focus,
.f-btn-warning[disabled].active,
.f-btn-warning[disabled].focus {
    background-color: #ffa830;
    background-image: none
}

.f-btn-danger.disabled.active,
.f-btn-danger.disabled.focus,
.f-btn-danger[disabled].active,
.f-btn-danger[disabled].focus {
    background-color: #d12723;
    background-image: none
}

.f-btn-purple.disabled.active,
.f-btn-purple.disabled.focus,
.f-btn-purple[disabled].active,
.f-btn-purple[disabled].focus {
    background-color: #8a7cb4;
    background-image: none
}

.f-btn-pink.disabled.active,
.f-btn-pink.disabled.focus,
.f-btn-pink[disabled].active,
.f-btn-pink[disabled].focus {
    background-color: #ce3970;
    background-image: none
}

.f-btn-inverse.disabled.active,
.f-btn-inverse.disabled.focus,
.f-btn-inverse[disabled].active,
.f-btn-inverse[disabled].focus {
    background-color: #333;
    background-image: none
}

.f-btn-grey.disabled.active,
.f-btn-grey.disabled.focus,
.f-btn-grey[disabled].active,
.f-btn-grey[disabled].focus {
    background-color: #696969;
    background-image: none
}

.f-btn-light.disabled.active,
.f-btn-light.disabled.focus,
.f-btn-light[disabled].active,
.f-btn-light[disabled].focus {
    background-color: #e6e6e6;
    background-image: none
}

.f-btn-yellow.disabled.active,
.f-btn-yellow.disabled.focus,
.f-btn-yellow[disabled].active,
.f-btn-yellow[disabled].focus {
    background-color: #fcd76a;
    background-image: none
}

.x-ux-callout.warning {
    background: #ffe0b3;
    border: 2px solid #ffb64c;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #8a5300
}

.x-ux-callout.warning.top:after {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #ffe0b3;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.warning.top-left:after,
.x-ux-callout.warning.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.warning.top:before {
    border-bottom-color: #ffb64c;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.warning.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.warning.top-left:after {
    border-bottom-color: #ffe0b3;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.warning.top-left:before,
.x-ux-callout.warning.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.warning.top-left:before {
    border-bottom-color: #ffb64c;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.warning.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.warning.top-right:after {
    border-bottom-color: #ffe0b3;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.warning.bottom:after,
.x-ux-callout.warning.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.warning.top-right:before {
    bottom: 100%;
    border-bottom-color: #ffb64c;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.warning.bottom:after {
    top: 100%;
    border-top-color: #ffe0b3;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.warning.bottom-left:after,
.x-ux-callout.warning.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.warning.bottom:before {
    border-top-color: #ffb64c;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.warning.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.warning.bottom-left:after {
    border-top-color: #ffe0b3;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.warning.bottom-left:before,
.x-ux-callout.warning.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.warning.bottom-left:before {
    border-top-color: #ffb64c;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.warning.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.warning.bottom-right:after {
    border-top-color: #ffe0b3;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.warning.bottom-right:before,
.x-ux-callout.warning.right:after {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.warning.bottom-right:before {
    top: 100%;
    width: 0;
    border-top-color: #ffb64c;
    border-width: 15px;
    margin-left: -30px
}

.x-ux-callout.warning.right:after {
    border-left-color: #ffe0b3;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.warning.right-top:after,
.x-ux-callout.warning.right:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.warning.right:before {
    border-left-color: #ffb64c;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.warning.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.warning.right-top:after {
    border-left-color: #ffe0b3;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.warning.right-bottom:after,
.x-ux-callout.warning.right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 100%
}

.x-ux-callout.warning.right-top:before {
    border-left-color: #ffb64c;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.warning.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.warning.right-bottom:after {
    border-left-color: #ffe0b3;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.warning.left:after,
.x-ux-callout.warning.right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.warning.right-bottom:before {
    left: 100%;
    border-left-color: #ffb64c;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.warning.left:after {
    right: 100%;
    border-right-color: #ffe0b3;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.warning.left-top:after,
.x-ux-callout.warning.left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.warning.left:before {
    border-right-color: #ffb64c;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.warning.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.warning.left-top:after {
    border-right-color: #ffe0b3;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.warning.left-bottom:after,
.x-ux-callout.warning.left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%
}

.x-ux-callout.warning.left-top:before {
    border-right-color: #ffb64c;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.warning.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.warning.left-bottom:after {
    border-right-color: #ffe0b3;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.primary.top:after,
.x-ux-callout.warning.left-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.warning.left-bottom:before {
    right: 100%;
    border-right-color: #ffb64c;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.primary {
    background: #b3e5fc;
    border: 2px solid #4ec2f7;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #0775a9
}

.x-ux-callout.info,
.x-ux-callout.success {
    overflow: visible;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3)
}

.x-ux-callout.primary.top:after {
    bottom: 100%;
    width: 0;
    border-bottom-color: #b3e5fc;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.primary.top-left:after,
.x-ux-callout.primary.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.primary.top:before {
    border-bottom-color: #4ec2f7;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.primary.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.primary.top-left:after {
    border-bottom-color: #b3e5fc;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.primary.top-left:before,
.x-ux-callout.primary.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.primary.top-left:before {
    border-bottom-color: #4ec2f7;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.primary.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.primary.top-right:after {
    border-bottom-color: #b3e5fc;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.primary.bottom:after,
.x-ux-callout.primary.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.primary.top-right:before {
    bottom: 100%;
    border-bottom-color: #4ec2f7;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.primary.bottom:after {
    top: 100%;
    border-top-color: #b3e5fc;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.primary.bottom-left:after,
.x-ux-callout.primary.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.primary.bottom:before {
    border-top-color: #4ec2f7;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.primary.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.primary.bottom-left:after {
    border-top-color: #b3e5fc;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.primary.bottom-left:before,
.x-ux-callout.primary.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.primary.bottom-left:before {
    border-top-color: #4ec2f7;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.primary.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.primary.bottom-right:after {
    border-top-color: #b3e5fc;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.primary.bottom-right:before,
.x-ux-callout.primary.right:after {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.primary.bottom-right:before {
    top: 100%;
    width: 0;
    border-top-color: #4ec2f7;
    border-width: 15px;
    margin-left: -30px
}

.x-ux-callout.primary.right:after {
    border-left-color: #b3e5fc;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.primary.right-top:after,
.x-ux-callout.primary.right:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.primary.right:before {
    border-left-color: #4ec2f7;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.primary.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.primary.right-top:after {
    border-left-color: #b3e5fc;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.primary.right-bottom:after,
.x-ux-callout.primary.right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 100%
}

.x-ux-callout.primary.right-top:before {
    border-left-color: #4ec2f7;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.primary.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.primary.right-bottom:after {
    border-left-color: #b3e5fc;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.primary.left:after,
.x-ux-callout.primary.right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.primary.right-bottom:before {
    left: 100%;
    border-left-color: #4ec2f7;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.primary.left:after {
    right: 100%;
    border-right-color: #b3e5fc;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.primary.left-top:after,
.x-ux-callout.primary.left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.primary.left:before {
    border-right-color: #4ec2f7;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.primary.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.primary.left-top:after {
    border-right-color: #b3e5fc;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.primary.left-bottom:after,
.x-ux-callout.primary.left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%
}

.x-ux-callout.primary.left-top:before {
    border-right-color: #4ec2f7;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.primary.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.primary.left-bottom:after {
    border-right-color: #b3e5fc;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.info.top:after,
.x-ux-callout.primary.left-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.primary.left-bottom:before {
    right: 100%;
    border-right-color: #4ec2f7;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.info {
    background: #E5F6FE;
    border: 2px solid #ADD9ED;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #5E99BD;
    font-size: 14px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    line-height: 18px
}

.x-ux-callout.info.top:after {
    bottom: 100%;
    width: 0;
    border-bottom-color: #E5F6FE;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.info.top-left:after,
.x-ux-callout.info.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.info.top:before {
    border-bottom-color: #ADD9ED;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.info.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.info.top-left:after {
    border-bottom-color: #E5F6FE;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.info.top-left:before,
.x-ux-callout.info.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.info.top-left:before {
    border-bottom-color: #ADD9ED;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.info.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.info.top-right:after {
    border-bottom-color: #E5F6FE;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.info.bottom:after,
.x-ux-callout.info.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.info.top-right:before {
    bottom: 100%;
    border-bottom-color: #ADD9ED;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.info.bottom:after {
    top: 100%;
    border-top-color: #E5F6FE;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.info.bottom-left:after,
.x-ux-callout.info.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.info.bottom:before {
    border-top-color: #ADD9ED;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.info.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.info.bottom-left:after {
    border-top-color: #E5F6FE;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.info.bottom-left:before,
.x-ux-callout.info.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.info.bottom-left:before {
    border-top-color: #ADD9ED;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.info.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.info.bottom-right:after {
    border-top-color: #E5F6FE;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.info.bottom-right:before,
.x-ux-callout.info.right:after {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.info.bottom-right:before {
    top: 100%;
    width: 0;
    border-top-color: #ADD9ED;
    border-width: 15px;
    margin-left: -30px
}

.x-ux-callout.info.right:after {
    border-left-color: #E5F6FE;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.info.right-top:after,
.x-ux-callout.info.right:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.info.right:before {
    border-left-color: #ADD9ED;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.info.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.info.right-top:after {
    border-left-color: #E5F6FE;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.info.right-bottom:after,
.x-ux-callout.info.right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 100%
}

.x-ux-callout.info.right-top:before {
    border-left-color: #ADD9ED;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.info.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.info.right-bottom:after {
    border-left-color: #E5F6FE;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.info.left:after,
.x-ux-callout.info.right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.info.right-bottom:before {
    left: 100%;
    border-left-color: #ADD9ED;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.info.left:after {
    right: 100%;
    border-right-color: #E5F6FE;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.info.left-top:after,
.x-ux-callout.info.left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.info.left:before {
    border-right-color: #ADD9ED;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.info.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.info.left-top:after {
    border-right-color: #E5F6FE;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.info.left-bottom:after,
.x-ux-callout.info.left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%
}

.x-ux-callout.info.left-top:before {
    border-right-color: #ADD9ED;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.info.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.info.left-bottom:after {
    border-right-color: #E5F6FE;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.info.left-bottom:before,
.x-ux-callout.success.top:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.info.left-bottom:before {
    right: 100%;
    border-right-color: #ADD9ED;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.success {
    background: #CAED9E;
    border: 2px solid #90D93F;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #3F6219;
    font-size: 14px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    line-height: 18px
}

.x-ux-callout.danger,
.x-ux-callout.inverse {
    overflow: visible;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    font-size: 14px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    line-height: 18px
}

.x-ux-callout.success.top:after {
    bottom: 100%;
    width: 0;
    border-bottom-color: #CAED9E;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.success.top-left:after,
.x-ux-callout.success.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.success.top:before {
    border-bottom-color: #90D93F;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.success.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.success.top-left:after {
    border-bottom-color: #CAED9E;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.success.top-left:before,
.x-ux-callout.success.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.success.top-left:before {
    border-bottom-color: #90D93F;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.success.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.success.top-right:after {
    border-bottom-color: #CAED9E;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.success.bottom:after,
.x-ux-callout.success.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.success.top-right:before {
    bottom: 100%;
    border-bottom-color: #90D93F;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.success.bottom:after {
    top: 100%;
    border-top-color: #CAED9E;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.success.bottom-left:after,
.x-ux-callout.success.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.success.bottom:before {
    border-top-color: #90D93F;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.success.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.success.bottom-left:after {
    border-top-color: #CAED9E;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.success.bottom-left:before,
.x-ux-callout.success.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.success.bottom-left:before {
    border-top-color: #90D93F;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.success.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.success.bottom-right:after {
    border-top-color: #CAED9E;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.success.bottom-right:before,
.x-ux-callout.success.right:after {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.success.bottom-right:before {
    top: 100%;
    width: 0;
    border-top-color: #90D93F;
    border-width: 15px;
    margin-left: -30px
}

.x-ux-callout.success.right:after {
    border-left-color: #CAED9E;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.success.right-top:after,
.x-ux-callout.success.right:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.success.right:before {
    border-left-color: #90D93F;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.success.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.success.right-top:after {
    border-left-color: #CAED9E;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.success.right-bottom:after,
.x-ux-callout.success.right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 100%
}

.x-ux-callout.success.right-top:before {
    border-left-color: #90D93F;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.success.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.success.right-bottom:after {
    border-left-color: #CAED9E;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.success.left:after,
.x-ux-callout.success.right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.success.right-bottom:before {
    left: 100%;
    border-left-color: #90D93F;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.success.left:after {
    right: 100%;
    border-right-color: #CAED9E;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.success.left-top:after,
.x-ux-callout.success.left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.success.left:before {
    border-right-color: #90D93F;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.success.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.success.left-top:after {
    border-right-color: #CAED9E;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.success.left-bottom:after,
.x-ux-callout.success.left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%
}

.x-ux-callout.success.left-top:before {
    border-right-color: #90D93F;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.success.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.success.left-bottom:after {
    border-right-color: #CAED9E;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.danger.top:after,
.x-ux-callout.success.left-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.success.left-bottom:before {
    right: 100%;
    border-right-color: #90D93F;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.danger {
    background: #F78B83;
    border: 2px solid #D95252;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #912323
}

.x-ux-callout.danger.top:after {
    bottom: 100%;
    width: 0;
    border-bottom-color: #F78B83;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.danger.top-left:after,
.x-ux-callout.danger.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.danger.top:before {
    border-bottom-color: #D95252;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.danger.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.danger.top-left:after {
    border-bottom-color: #F78B83;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.danger.top-left:before,
.x-ux-callout.danger.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.danger.top-left:before {
    border-bottom-color: #D95252;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.danger.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.danger.top-right:after {
    border-bottom-color: #F78B83;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.danger.bottom:after,
.x-ux-callout.danger.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.danger.top-right:before {
    bottom: 100%;
    border-bottom-color: #D95252;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.danger.bottom:after {
    top: 100%;
    border-top-color: #F78B83;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.danger.bottom-left:after,
.x-ux-callout.danger.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.danger.bottom:before {
    border-top-color: #D95252;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.danger.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.danger.bottom-left:after {
    border-top-color: #F78B83;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.danger.bottom-left:before,
.x-ux-callout.danger.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.danger.bottom-left:before {
    border-top-color: #D95252;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.danger.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.danger.bottom-right:after {
    border-top-color: #F78B83;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.danger.bottom-right:before,
.x-ux-callout.danger.right:after {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.danger.bottom-right:before {
    top: 100%;
    width: 0;
    border-top-color: #D95252;
    border-width: 15px;
    margin-left: -30px
}

.x-ux-callout.danger.right:after {
    border-left-color: #F78B83;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.danger.right-top:after,
.x-ux-callout.danger.right:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.danger.right:before {
    border-left-color: #D95252;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.danger.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.danger.right-top:after {
    border-left-color: #F78B83;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.danger.right-bottom:after,
.x-ux-callout.danger.right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 100%
}

.x-ux-callout.danger.right-top:before {
    border-left-color: #D95252;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.danger.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.danger.right-bottom:after {
    border-left-color: #F78B83;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.danger.left:after,
.x-ux-callout.danger.right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.danger.right-bottom:before {
    left: 100%;
    border-left-color: #D95252;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.danger.left:after {
    right: 100%;
    border-right-color: #F78B83;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.danger.left-top:after,
.x-ux-callout.danger.left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.danger.left:before {
    border-right-color: #D95252;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.danger.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.danger.left-top:after {
    border-right-color: #F78B83;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.danger.left-bottom:after,
.x-ux-callout.danger.left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%
}

.x-ux-callout.danger.left-top:before {
    border-right-color: #D95252;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.danger.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.danger.left-bottom:after {
    border-right-color: #F78B83;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.danger.left-bottom:before,
.x-ux-callout.inverse.top:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.danger.left-bottom:before {
    right: 100%;
    border-right-color: #D95252;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.inverse {
    background: #333;
    border: 2px solid #333;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #FFF
}

.x-ux-callout.pink,
.x-ux-callout.purple {
    overflow: visible;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3)
}

.x-ux-callout.inverse.top:after {
    bottom: 100%;
    width: 0;
    border-bottom-color: #333;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.inverse.top-left:after,
.x-ux-callout.inverse.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.inverse.top:before {
    border-bottom-color: #333;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.inverse.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.inverse.top-left:after {
    border-bottom-color: #333;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.inverse.top-left:before,
.x-ux-callout.inverse.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.inverse.top-left:before {
    border-bottom-color: #333;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.inverse.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.inverse.top-right:after {
    border-bottom-color: #333;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.inverse.bottom:after,
.x-ux-callout.inverse.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.inverse.top-right:before {
    bottom: 100%;
    border-bottom-color: #333;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.inverse.bottom:after {
    top: 100%;
    border-top-color: #333;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.inverse.bottom-left:after,
.x-ux-callout.inverse.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.inverse.bottom:before {
    border-top-color: #333;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.inverse.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.inverse.bottom-left:after {
    border-top-color: #333;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.inverse.bottom-left:before,
.x-ux-callout.inverse.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.inverse.bottom-left:before {
    border-top-color: #333;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.inverse.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.inverse.bottom-right:after {
    border-top-color: #333;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.inverse.bottom-right:before,
.x-ux-callout.inverse.right:after {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.inverse.bottom-right:before {
    top: 100%;
    width: 0;
    border-top-color: #333;
    border-width: 15px;
    margin-left: -30px
}

.x-ux-callout.inverse.right:after {
    border-left-color: #333;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.inverse.right-top:after,
.x-ux-callout.inverse.right:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.inverse.right:before {
    border-left-color: #333;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.inverse.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.inverse.right-top:after {
    border-left-color: #333;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.inverse.right-bottom:after,
.x-ux-callout.inverse.right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 100%
}

.x-ux-callout.inverse.right-top:before {
    border-left-color: #333;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.inverse.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.inverse.right-bottom:after {
    border-left-color: #333;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.inverse.left:after,
.x-ux-callout.inverse.right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.inverse.right-bottom:before {
    left: 100%;
    border-left-color: #333;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.inverse.left:after {
    right: 100%;
    border-right-color: #333;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.inverse.left-top:after,
.x-ux-callout.inverse.left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.inverse.left:before {
    border-right-color: #333;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.inverse.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.inverse.left-top:after {
    border-right-color: #333;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.inverse.left-bottom:after,
.x-ux-callout.inverse.left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%
}

.x-ux-callout.inverse.left-top:before {
    border-right-color: #333;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.inverse.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.inverse.left-bottom:after {
    border-right-color: #333;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.inverse.left-bottom:before,
.x-ux-callout.pink.top:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.inverse.left-bottom:before {
    right: 100%;
    border-right-color: #333;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.pink {
    background: #f9bcd0;
    border: 2px solid #ef6191;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #b8124d;
    font-size: 14px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    line-height: 18px
}

.x-ux-callout.pink.top:after {
    bottom: 100%;
    width: 0;
    border-bottom-color: #f9bcd0;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.pink.top-left:after,
.x-ux-callout.pink.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.pink.top:before {
    border-bottom-color: #ef6191;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.pink.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.pink.top-left:after {
    border-bottom-color: #f9bcd0;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.pink.top-left:before,
.x-ux-callout.pink.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.pink.top-left:before {
    border-bottom-color: #ef6191;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.pink.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.pink.top-right:after {
    border-bottom-color: #f9bcd0;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.pink.bottom:after,
.x-ux-callout.pink.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.pink.top-right:before {
    bottom: 100%;
    border-bottom-color: #ef6191;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.pink.bottom:after {
    top: 100%;
    border-top-color: #f9bcd0;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.pink.bottom-left:after,
.x-ux-callout.pink.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.pink.bottom:before {
    border-top-color: #ef6191;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.pink.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.pink.bottom-left:after {
    border-top-color: #f9bcd0;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.pink.bottom-left:before,
.x-ux-callout.pink.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.pink.bottom-left:before {
    border-top-color: #ef6191;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.pink.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.pink.bottom-right:after {
    border-top-color: #f9bcd0;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.pink.bottom-right:before,
.x-ux-callout.pink.right:after {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.pink.bottom-right:before {
    top: 100%;
    width: 0;
    border-top-color: #ef6191;
    border-width: 15px;
    margin-left: -30px
}

.x-ux-callout.pink.right:after {
    border-left-color: #f9bcd0;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.pink.right-top:after,
.x-ux-callout.pink.right:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.pink.right:before {
    border-left-color: #ef6191;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.pink.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.pink.right-top:after {
    border-left-color: #f9bcd0;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.pink.right-bottom:after,
.x-ux-callout.pink.right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 100%
}

.x-ux-callout.pink.right-top:before {
    border-left-color: #ef6191;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.pink.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.pink.right-bottom:after {
    border-left-color: #f9bcd0;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.pink.left:after,
.x-ux-callout.pink.right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.pink.right-bottom:before {
    left: 100%;
    border-left-color: #ef6191;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.pink.left:after {
    right: 100%;
    border-right-color: #f9bcd0;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.pink.left-top:after,
.x-ux-callout.pink.left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.pink.left:before {
    border-right-color: #ef6191;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.pink.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.pink.left-top:after {
    border-right-color: #f9bcd0;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.pink.left-bottom:after,
.x-ux-callout.pink.left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%
}

.x-ux-callout.pink.left-top:before {
    border-right-color: #ef6191;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.pink.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.pink.left-bottom:after {
    border-right-color: #f9bcd0;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.pink.left-bottom:before,
.x-ux-callout.purple.top:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.pink.left-bottom:before {
    right: 100%;
    border-right-color: #ef6191;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.purple {
    background: #e1bee7;
    border: 2px solid #b967c7;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #502266;
    font-size: 14px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    line-height: 18px
}

.x-ux-callout.grey,
.x-ux-callout.yellow {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    overflow: visible;
    font-size: 14px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    line-height: 18px
}

.x-ux-callout.purple.top:after {
    bottom: 100%;
    width: 0;
    border-bottom-color: #e1bee7;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.purple.top-left:after,
.x-ux-callout.purple.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.purple.top:before {
    border-bottom-color: #b967c7;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.purple.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.purple.top-left:after {
    border-bottom-color: #e1bee7;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.purple.top-left:before,
.x-ux-callout.purple.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.purple.top-left:before {
    border-bottom-color: #b967c7;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.purple.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.purple.top-right:after {
    border-bottom-color: #e1bee7;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.purple.bottom:after,
.x-ux-callout.purple.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.purple.top-right:before {
    bottom: 100%;
    border-bottom-color: #b967c7;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.purple.bottom:after {
    top: 100%;
    border-top-color: #e1bee7;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.purple.bottom-left:after,
.x-ux-callout.purple.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.purple.bottom:before {
    border-top-color: #b967c7;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.purple.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.purple.bottom-left:after {
    border-top-color: #e1bee7;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.purple.bottom-left:before,
.x-ux-callout.purple.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.purple.bottom-left:before {
    border-top-color: #b967c7;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.purple.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.purple.bottom-right:after {
    border-top-color: #e1bee7;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.purple.bottom-right:before,
.x-ux-callout.purple.right:after {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.purple.bottom-right:before {
    top: 100%;
    width: 0;
    border-top-color: #b967c7;
    border-width: 15px;
    margin-left: -30px
}

.x-ux-callout.purple.right:after {
    border-left-color: #e1bee7;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.purple.right-top:after,
.x-ux-callout.purple.right:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.purple.right:before {
    border-left-color: #b967c7;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.purple.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.purple.right-top:after {
    border-left-color: #e1bee7;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.purple.right-bottom:after,
.x-ux-callout.purple.right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 100%
}

.x-ux-callout.purple.right-top:before {
    border-left-color: #b967c7;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.purple.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.purple.right-bottom:after {
    border-left-color: #e1bee7;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.purple.left:after,
.x-ux-callout.purple.right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.purple.right-bottom:before {
    left: 100%;
    border-left-color: #b967c7;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.purple.left:after {
    right: 100%;
    border-right-color: #e1bee7;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.purple.left-top:after,
.x-ux-callout.purple.left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.purple.left:before {
    border-right-color: #b967c7;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.purple.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.purple.left-top:after {
    border-right-color: #e1bee7;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.purple.left-bottom:after,
.x-ux-callout.purple.left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%
}

.x-ux-callout.purple.left-top:before {
    border-right-color: #b967c7;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.purple.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.purple.left-bottom:after {
    border-right-color: #e1bee7;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.purple.left-bottom:before,
.x-ux-callout.yellow.top:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.purple.left-bottom:before {
    right: 100%;
    border-right-color: #b967c7;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.yellow {
    background: #fff9c4;
    border: 2px solid #fff175;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #847700
}

.x-ux-callout.yellow.top:after {
    bottom: 100%;
    width: 0;
    border-bottom-color: #fff9c4;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.yellow.top-left:after,
.x-ux-callout.yellow.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.yellow.top:before {
    border-bottom-color: #fff175;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.yellow.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.yellow.top-left:after {
    border-bottom-color: #fff9c4;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.yellow.top-left:before,
.x-ux-callout.yellow.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.yellow.top-left:before {
    border-bottom-color: #fff175;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.yellow.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.yellow.top-right:after {
    border-bottom-color: #fff9c4;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.yellow.bottom:after,
.x-ux-callout.yellow.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.yellow.top-right:before {
    bottom: 100%;
    border-bottom-color: #fff175;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.yellow.bottom:after {
    top: 100%;
    border-top-color: #fff9c4;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.yellow.bottom-left:after,
.x-ux-callout.yellow.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.yellow.bottom:before {
    border-top-color: #fff175;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.yellow.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.yellow.bottom-left:after {
    border-top-color: #fff9c4;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.yellow.bottom-left:before,
.x-ux-callout.yellow.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.yellow.bottom-left:before {
    border-top-color: #fff175;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.yellow.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.yellow.bottom-right:after {
    border-top-color: #fff9c4;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.yellow.bottom-right:before,
.x-ux-callout.yellow.right:after {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.yellow.bottom-right:before {
    top: 100%;
    width: 0;
    border-top-color: #fff175;
    border-width: 15px;
    margin-left: -30px
}

.x-ux-callout.yellow.right:after {
    border-left-color: #fff9c4;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.yellow.right-top:after,
.x-ux-callout.yellow.right:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.yellow.right:before {
    border-left-color: #fff175;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.yellow.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.yellow.right-top:after {
    border-left-color: #fff9c4;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.yellow.right-bottom:after,
.x-ux-callout.yellow.right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 100%
}

.x-ux-callout.yellow.right-top:before {
    border-left-color: #fff175;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.yellow.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.yellow.right-bottom:after {
    border-left-color: #fff9c4;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.yellow.left:after,
.x-ux-callout.yellow.right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.yellow.right-bottom:before {
    left: 100%;
    border-left-color: #fff175;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.yellow.left:after {
    right: 100%;
    border-right-color: #fff9c4;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.yellow.left-top:after,
.x-ux-callout.yellow.left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.yellow.left:before {
    border-right-color: #fff175;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.yellow.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.yellow.left-top:after {
    border-right-color: #fff9c4;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.yellow.left-bottom:after,
.x-ux-callout.yellow.left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%
}

.x-ux-callout.yellow.left-top:before {
    border-right-color: #fff175;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.yellow.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.yellow.left-bottom:after {
    border-right-color: #fff9c4;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.grey.top:after,
.x-ux-callout.yellow.left-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.yellow.left-bottom:before {
    right: 100%;
    border-right-color: #fff175;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.grey {
    background: #e2e2e2;
    border: 2px solid #bbb;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #5f5f5f
}

.x-ux-callout.grey.top:after {
    bottom: 100%;
    width: 0;
    border-bottom-color: #e2e2e2;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.grey.top-left:after,
.x-ux-callout.grey.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.grey.top:before {
    border-bottom-color: #bbb;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.grey.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.grey.top-left:after {
    border-bottom-color: #e2e2e2;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.grey.top-left:before,
.x-ux-callout.grey.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.grey.top-left:before {
    border-bottom-color: #bbb;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.grey.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.grey.top-right:after {
    border-bottom-color: #e2e2e2;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.grey.bottom:after,
.x-ux-callout.grey.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.grey.top-right:before {
    bottom: 100%;
    border-bottom-color: #bbb;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.grey.bottom:after {
    top: 100%;
    border-top-color: #e2e2e2;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.grey.bottom-left:after,
.x-ux-callout.grey.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.grey.bottom:before {
    border-top-color: #bbb;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.grey.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.grey.bottom-left:after {
    border-top-color: #e2e2e2;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.grey.bottom-left:before,
.x-ux-callout.grey.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.grey.bottom-left:before {
    border-top-color: #bbb;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.grey.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.grey.bottom-right:after {
    border-top-color: #e2e2e2;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.grey.bottom-right:before,
.x-ux-callout.grey.right:after {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.grey.bottom-right:before {
    top: 100%;
    width: 0;
    border-top-color: #bbb;
    border-width: 15px;
    margin-left: -30px
}

.x-ux-callout.grey.right:after {
    border-left-color: #e2e2e2;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.grey.right-top:after,
.x-ux-callout.grey.right:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.grey.right:before {
    border-left-color: #bbb;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.grey.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.grey.right-top:after {
    border-left-color: #e2e2e2;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.grey.right-bottom:after,
.x-ux-callout.grey.right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 100%
}

.x-ux-callout.grey.right-top:before {
    border-left-color: #bbb;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.grey.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.grey.right-bottom:after {
    border-left-color: #e2e2e2;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.grey.left:after,
.x-ux-callout.grey.right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.grey.right-bottom:before {
    left: 100%;
    border-left-color: #bbb;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.grey.left:after {
    right: 100%;
    border-right-color: #e2e2e2;
    border-width: 12px;
    top: 50%;
    margin-top: -12px
}

.x-ux-callout.grey.left-top:after,
.x-ux-callout.grey.left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.grey.left:before {
    border-right-color: #bbb;
    border-width: 15px;
    top: 50%;
    margin-top: -15px
}

.x-ux-callout.grey.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.grey.left-top:after {
    border-right-color: #e2e2e2;
    border-width: 12px;
    top: 14px;
    margin-top: -12px
}

.x-ux-callout.grey.left-bottom:after,
.x-ux-callout.grey.left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%
}

.x-ux-callout.grey.left-top:before {
    border-right-color: #bbb;
    border-width: 15px;
    top: 14px;
    margin-top: -15px
}

.x-ux-callout.grey.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.grey.left-bottom:after {
    border-right-color: #e2e2e2;
    border-width: 12px;
    top: 100%;
    margin-top: -27px
}

.x-ux-callout.grey.left-bottom:before,
.x-ux-callout.light.top:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.grey.left-bottom:before {
    right: 100%;
    border-right-color: #bbb;
    border-width: 15px;
    top: 100%;
    margin-top: -30px
}

.x-ux-callout.light {
    background: #f6f6f6;
    border: 2px solid #e2e2e2;
    overflow: visible;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3);
    color: #737373;
    font-size: 14px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    line-height: 18px
}

.x-ux-callout.light.top:after {
    bottom: 100%;
    width: 0;
    border-bottom-color: #f6f6f6;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.light.top-left:after,
.x-ux-callout.light.top:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.light.top:before {
    border-bottom-color: #e2e2e2;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.light.top-left {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.light.top-left:after {
    border-bottom-color: #f6f6f6;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.light.top-left:before,
.x-ux-callout.light.top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%
}

.x-ux-callout.light.top-left:before {
    border-bottom-color: #e2e2e2;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.light.top-right {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.light.top-right:after {
    border-bottom-color: #f6f6f6;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.light.bottom:after,
.x-ux-callout.light.top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.light.top-right:before {
    bottom: 100%;
    border-bottom-color: #e2e2e2;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.light.bottom:after {
    top: 100%;
    border-top-color: #f6f6f6;
    border-width: 12px;
    left: 50%;
    margin-left: -12px
}

.x-ux-callout.light.bottom-left:after,
.x-ux-callout.light.bottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.x-ux-callout.light.bottom:before {
    border-top-color: #e2e2e2;
    border-width: 15px;
    left: 50%;
    margin-left: -15px
}

.x-ux-callout.light.bottom-left {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.light.bottom-left:after {
    border-top-color: #f6f6f6;
    border-width: 12px;
    left: 14px;
    margin-left: -12px
}

.x-ux-callout.light.bottom-left:before,
.x-ux-callout.light.bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0
}

.x-ux-callout.light.bottom-left:before {
    border-top-color: #e2e2e2;
    border-width: 15px;
    left: 14px;
    margin-left: -15px
}

.x-ux-callout.light.bottom-right {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.light.bottom-right:after {
    border-top-color: #f6f6f6;
    border-width: 12px;
    left: 100%;
    margin-left: -27px
}

.x-ux-callout.light.bottom-right:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #e2e2e2;
    border-width: 15px;
    left: 100%;
    margin-left: -30px
}

.x-ux-callout.light.right:after,
.x-ux-callout.light.right:before {
    left: 100%;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 50%
}

.x-ux-callout.light.right:after {
    border: solid transparent;
    border-left-color: #f6f6f6;
    border-width: 12px;
    margin-top: -12px
}

.x-ux-callout.light.right:before {
    border: solid transparent;
    border-left-color: #e2e2e2;
    border-width: 15px;
    margin-top: -15px
}

.x-ux-callout.light.right-top:after,
.x-ux-callout.light.right-top:before {
    left: 100%;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 14px
}

.x-ux-callout.light.right-top {
    -webkit-border-top-right-radius: 1;
    -moz-border-radius-topright: 1;
    border-top-right-radius: 1
}

.x-ux-callout.light.right-top:after {
    border: solid transparent;
    border-left-color: #f6f6f6;
    border-width: 12px;
    margin-top: -12px
}

.x-ux-callout.light.right-top:before {
    border: solid transparent;
    border-left-color: #e2e2e2;
    border-width: 15px;
    margin-top: -15px
}

.x-ux-callout.light.right-bottom:after,
.x-ux-callout.light.right-bottom:before {
    left: 100%;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%
}

.x-ux-callout.light.right-bottom {
    -webkit-border-bottom-right-radius: 1;
    -moz-border-radius-bottomright: 1;
    border-bottom-right-radius: 1
}

.x-ux-callout.light.right-bottom:after {
    border: solid transparent;
    border-left-color: #f6f6f6;
    border-width: 12px;
    margin-top: -27px
}

.x-ux-callout.light.right-bottom:before {
    border: solid transparent;
    border-left-color: #e2e2e2;
    border-width: 15px;
    margin-top: -30px
}

.x-ux-callout.light.left:after,
.x-ux-callout.light.left:before {
    right: 100%;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 50%
}

.x-ux-callout.light.left:after {
    border: solid transparent;
    border-right-color: #f6f6f6;
    border-width: 12px;
    margin-top: -12px
}

.x-ux-callout.light.left:before {
    border: solid transparent;
    border-right-color: #e2e2e2;
    border-width: 15px;
    margin-top: -15px
}

.x-ux-callout.light.left-top:after,
.x-ux-callout.light.left-top:before {
    right: 100%;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 14px
}

.x-ux-callout.light.left-top {
    -webkit-border-top-left-radius: 1;
    -moz-border-radius-topleft: 1;
    border-top-left-radius: 1
}

.x-ux-callout.light.left-top:after {
    border: solid transparent;
    border-right-color: #f6f6f6;
    border-width: 12px;
    margin-top: -12px
}

.x-ux-callout.light.left-top:before {
    border: solid transparent;
    border-right-color: #e2e2e2;
    border-width: 15px;
    margin-top: -15px
}

.x-ux-callout.light.left-bottom:after,
.x-ux-callout.light.left-bottom:before {
    right: 100%;
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%
}

.x-ux-callout.light.left-bottom {
    -webkit-border-bottom-left-radius: 1;
    -moz-border-radius-bottomleft: 1;
    border-bottom-left-radius: 1
}

.x-ux-callout.light.left-bottom:after {
    border: solid transparent;
    border-right-color: #f6f6f6;
    border-width: 12px;
    margin-top: -27px
}

.x-ux-callout.light.left-bottom:before {
    border: solid transparent;
    border-right-color: #e2e2e2;
    border-width: 15px;
    margin-top: -30px
}