Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$default                    : null;

$white                      : #ffffff !default;
$black                      : #000000 !default;

$purple                     : #660099 !default;
$purple-hover               : #7744AA !default; 
$purple-dark                : #500078 !default;

$orange                     : #ff9900 !default;
$orange-hover               : #ffb533 !default;
$orange-dark                : #ff8020 !default;

$blue                       : #0066cc !default;
$blue-hover                 : #0088dd !default;
$blue-dark                  : #0055ab !default;

$green                      : #99cc33 !default;
$green-hover                : #bbdd55 !default;
$green-dark                	: #66bb33 !default;

$pink                      	: #ee3377 !default;
$pink-hover                	: #f06699 !default;
$pink-dark                	: #cc1155 !default;


$gray-base                  : #333333 !default;
$gray-base-1                : #222222 !default;
$gray-base-2                : #666666 !default; 
$gray-base-3                : #999999 !default;
$gray-base-4                : #b9b9b9 !default;
$gray-base-5                : #cccccc !default;
$gray-base-6                : #e3e3e3 !default;
$gray-base-7                : #f1f2f3 !default;
$gray-base-8                : #aaaaaa !default;
$gray-base-9                : #f0f0f0 !default;


$red                		: #E44444 !default;

$error                      : $red 	  !default;
$success                    : $purple !default;

$green-base                 : $green  !default;

$special-theme				: #eb3c7d !default;
$special-theme-dark			: #cc1155 !default;
$special-theme-hover		: #f06699 !default;
$special-theme-light		: lighten($special-theme, 20%) !default;

$border-color-gray          : $gray-base-6 !default;
$font-book                  : "OfficinaBook"          !default;
$font-bold                  : "OfficinaBold"          !default;

@mixin font-size( $sizeFont: $fonte-tamanho-base, $sizeLine: ($fonte-tamanho-base * $linha-altura-base) ) {
	font-size: $sizeFont + rem;
	line-height: $sizeLine + rem;
}

@mixin btn-variant($background, $color, $border-width, $border-color, $background-hover, $color-hover, $border-color-hover) {
	background: $background;
	color: $color;
	border-color: $border-color;
	border-width: $border-width;
	border-style: solid;

	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	white-space: nowrap;
	outline: none;

	&:hover {
		background:lighten($background-hover, 6.5%);
		color: $color-hover;
		border-color: $border-color-hover;
	}
	&:active {
		background:lighten($background-hover, 6.5%);
		color: $color-hover;
		border-color: $border-color-hover;
	} 
	&[disabled],
	&.disabled,
	&[readonly]  {
		background-color: $gray-base-2;
		border-color: $gray-base-2;
		cursor: default;
		opacity: 0.8;
	}

	.icon-btn-left{
		height: 13px;
		width: 20px;
		float: left;
		position: relative;
		margin-top: -5px;
		svg{
			height: 2.4rem;
		    width: 2.4rem;
		    vertical-align: middle;
		    position: absolute;
		    top: -2px;
		    fill: $white;
		    left: -10px;
		    top: 1px;
		    fill: $color;
		}
	}

	&[class^="btn-sm"], 
	&[class*=" btn-sm"] {
		.icon-btn-left{
			height: 13px;
			width: 20px;
			float: left;
			position: relative;
			margin-top: -5px;
			svg{
				height: 2rem;
				width: 2rem;
				top: -1px;
				left: -5px;
		    }
		}
	}
	&[class^="btn-xs"], 
	&[class*=" btn-xs"] {
		.icon-btn-left{
			height: 13px;
			width: 20px;
			float: left;
			position: relative;
			margin-top: -5px;
			svg{
				height: 1.6rem;
			    width: 1.6rem;
			    top: 2px;
			    left: -1px;
		    }
		}
	}
}

@mixin btn-size($padding-vertical, $padding-horizontal, $border-radius) {
  	padding: $padding-vertical $padding-horizontal;
  	border-radius: $border-radius;
}


// Tamanhos
.btn-xl{
	@include btn-size(20px, 36px, 2px);	
    @include font-size(3.2,1);
    font-family: $font-bold;
}

.btn-xl-round{
	@include btn-size(13px, 16px, 30px);	
    @include font-size(3.2,1);
    font-family: $font-bold;
}
.btn-lg{
	@include btn-size(19px, 20px, 2px);	
    @include font-size(1.8,1);
    font-family: $font-bold;
}

.btn-lg-round{
	@include btn-size(13px, 16px, 30px);	
    @include font-size(1.8,1);
    font-family: $font-bold;
}

.btn-md{
	@include btn-size(15px, 18px, 2px);	
    @include font-size(1.6,1);
    font-family: $font-bold;
}

.btn-md-round{
	@include btn-size(10px, 16px, 30px);	
    @include font-size(1.6,1);
    font-family: $font-bold;
}

.btn-sm{
	@include btn-size(11px, 16px, 2px);	
    @include font-size(1.4,1);
    font-family: $font-bold;
}

.btn-sm-round{
	@include btn-size(8px, 12px, 30px);	
    @include font-size(1.2,1);
    font-family: $font-bold;
}

.btn-xs{
	@include btn-size(7px, 14px, 2px);	
    @include font-size(1.2,1);
    font-family: $font-book;
}

.btn-xs-round{
	@include btn-size(7px, 10px, 30px);	
    @include font-size(1.2,1);
    font-family: $font-book;
}

.btn-close-md{
	@include btn-size(6px, 8px, 0);	
    @include font-size(1.4,1);
    font-family: $font-book;
}

.btn-close-sm{
	@include btn-size(4px, 6px, 0);	
    @include font-size(1.2,1);
    font-family: $font-book;
}


// Cores
.btn-purple{
	@include btn-variant($purple, $white, 0, $purple, $purple, $white, $purple);
}

.btn-pink{
	@include btn-variant($pink, $white, 0, $pink, $pink-hover, $white, $pink-hover);
}

.btn-orange{
	@include btn-variant($orange, $white, 0, $orange, $orange, $white, $orange);
}

.btn-green{
	@include btn-variant($green, $white, 0, $green, $green-hover, $white, $green-hover);
}

.btn-blue{
	@include btn-variant($blue, $white, 0, $blue, $blue-hover, $white, $blue-hover);
}


// Outline
.btn-outline-purple{
	@include btn-variant(transparent, $purple, 1px, $purple, transparent, $purple-hover, $purple-hover);
}

.btn-outline-orange{
	@include btn-variant(transparent, $orange, 1px, $orange, transparent, $orange-hover, $orange-hover);
}

.btn-outline-green{
	@include btn-variant(transparent, $green, 1px, $green, transparent, $green-hover, $green-hover);
}

.btn-outline-blue{
	@include btn-variant(transparent, $blue, 1px, $blue, transparent, $blue-hover, $blue-hover);
}

.btn-outline-pink{
	@include btn-variant(transparent, $pink, 1px, $pink, transparent, $pink-hover, $pink-hover);
}

.btn-outline-gray{
	@include btn-variant(transparent, $gray-base-3, 1px, $gray-base-5, transparent, $purple-hover, $purple-hover);
}

.btn-outline-gray-light{
	@include btn-variant(transparent, $gray-base-3, 1px, $gray-base-3, transparent, $gray-base-2, $gray-base-2);
}


// Outline inverse
.btn-outline-purple-inverse{
	@include btn-variant(transparent, $purple, 1px, $purple, $purple, $white, $purple);
}

.btn-outline-orange-inverse{
	@include btn-variant(transparent, $orange, 1px, $orange, $orange, $white, $orange);
}

.btn-outline-green-inverse{
	@include btn-variant(transparent, $green, 1px, $green, $green, $white, $green);
}

.btn-outline-blue-inverse{
	@include btn-variant(transparent, $blue, 1px, $blue, $blue, $white, $blue);
}

.btn-outline-pink-inverse{
	@include btn-variant(transparent, $pink, 1px, $pink, $pink, $white, $pink);
}

.btn-outline-gray-inverse{
	@include btn-variant(transparent, $gray-base-3, 1px, $gray-base-5, $purple, $white, $purple);
}

.btn-outline-gray-light-inverse{
	@include btn-variant(transparent, $gray-base-3, 1px, $gray-base-3, $gray-base-2, $white, $gray-base-2);
}


// Btn Close
.btn-close-gray{
	@include btn-variant($gray-base-4, $white, 0, $gray-base-4, $purple, $white, $purple );
}

.btn-close-gray-blue{
	@include btn-variant($gray-base-4, $white, 0, $gray-base-4, $blue, $white, $blue );
}

.btn-close{
	@include btn-variant(transparent, $gray-base-4, 0, transparent, transparent, $purple, transparent );
}

.btn-special-theme {
	@include btn-variant($special-theme, $white, 1px, $special-theme, $special-theme-hover, $white, $special-theme-hover);
}

.btn-white{
	@include btn-variant($white, $purple, 0, $white, $purple, $white, $purple );
}

.btn-white-blue{
	@include btn-variant($white, $blue, 0, $white, $blue, $white, $blue );
}

.btn-white-2 {
	@include btn-variant($white, $purple, 0, $white, $white, $white, $white );
}

.btn-white-inverse{
	@include btn-variant(transparent, $purple, 0, $white, $purple, $white, $purple );
}

.btn-outline-white{
	@include btn-variant(transparent, $white, 1px, $white, $white, $purple, $white);
}

.btn-outline-white-blue{
	@include btn-variant(transparent, $white, 1px, $white, $white, $blue, $white);
}

.btn-outline-white-inverse{
	@include btn-variant($white, $purple, 1px, $white, transparent, $white, $white);
}



.btn-outline-gray-2{
	@include btn-variant(transparent, $white, 1px, $gray-base-5, $white, $gray-base-3, $white);
}

.b2b {
	.btn-white-inverse{
		@include btn-variant(transparent, $blue, 1px, $white, $blue, $white, $blue );
	}
	.btn-outline-white{
		@include btn-variant(transparent, $white, 1px, $white, $white, $blue, $white);
	}
	.btn-outline-gray{
		@include btn-variant(transparent, $gray-base-3, 1px, $gray-base-5, transparent, $blue, $blue);
	}
}

SassMeister-output.css

.btn-xl {
  padding: 20px 36px;
  border-radius: 2px;
  font-size: 3.2rem;
  line-height: 1rem;
  font-family: "OfficinaBold";
}

.btn-xl-round {
  padding: 13px 16px;
  border-radius: 30px;
  font-size: 3.2rem;
  line-height: 1rem;
  font-family: "OfficinaBold";
}

.btn-lg {
  padding: 19px 20px;
  border-radius: 2px;
  font-size: 1.8rem;
  line-height: 1rem;
  font-family: "OfficinaBold";
}

.btn-lg-round {
  padding: 13px 16px;
  border-radius: 30px;
  font-size: 1.8rem;
  line-height: 1rem;
  font-family: "OfficinaBold";
}

.btn-md {
  padding: 15px 18px;
  border-radius: 2px;
  font-size: 1.6rem;
  line-height: 1rem;
  font-family: "OfficinaBold";
}

.btn-md-round {
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 1.6rem;
  line-height: 1rem;
  font-family: "OfficinaBold";
}

.btn-sm {
  padding: 11px 16px;
  border-radius: 2px;
  font-size: 1.4rem;
  line-height: 1rem;
  font-family: "OfficinaBold";
}

.btn-sm-round {
  padding: 8px 12px;
  border-radius: 30px;
  font-size: 1.2rem;
  line-height: 1rem;
  font-family: "OfficinaBold";
}

.btn-xs {
  padding: 7px 14px;
  border-radius: 2px;
  font-size: 1.2rem;
  line-height: 1rem;
  font-family: "OfficinaBook";
}

.btn-xs-round {
  padding: 7px 10px;
  border-radius: 30px;
  font-size: 1.2rem;
  line-height: 1rem;
  font-family: "OfficinaBook";
}

.btn-close-md {
  padding: 6px 8px;
  border-radius: 0;
  font-size: 1.4rem;
  line-height: 1rem;
  font-family: "OfficinaBook";
}

.btn-close-sm {
  padding: 4px 6px;
  border-radius: 0;
  font-size: 1.2rem;
  line-height: 1rem;
  font-family: "OfficinaBook";
}

.btn-purple {
  background: #660099;
  color: #ffffff;
  border-color: #660099;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-purple:hover {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-purple:active {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-purple[disabled], .btn-purple.disabled, .btn-purple[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-purple .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-purple .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-purple[class^="btn-sm"] .icon-btn-left, .btn-purple[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-purple[class^="btn-sm"] .icon-btn-left svg, .btn-purple[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-purple[class^="btn-xs"] .icon-btn-left, .btn-purple[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-purple[class^="btn-xs"] .icon-btn-left svg, .btn-purple[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-pink {
  background: #ee3377;
  color: #ffffff;
  border-color: #ee3377;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-pink:hover {
  background: #f384ad;
  color: #ffffff;
  border-color: #f06699;
}
.btn-pink:active {
  background: #f384ad;
  color: #ffffff;
  border-color: #f06699;
}
.btn-pink[disabled], .btn-pink.disabled, .btn-pink[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-pink .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-pink .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-pink[class^="btn-sm"] .icon-btn-left, .btn-pink[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-pink[class^="btn-sm"] .icon-btn-left svg, .btn-pink[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-pink[class^="btn-xs"] .icon-btn-left, .btn-pink[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-pink[class^="btn-xs"] .icon-btn-left svg, .btn-pink[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-orange {
  background: #ff9900;
  color: #ffffff;
  border-color: #ff9900;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-orange:hover {
  background: #ffa621;
  color: #ffffff;
  border-color: #ff9900;
}
.btn-orange:active {
  background: #ffa621;
  color: #ffffff;
  border-color: #ff9900;
}
.btn-orange[disabled], .btn-orange.disabled, .btn-orange[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-orange .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-orange .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-orange[class^="btn-sm"] .icon-btn-left, .btn-orange[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-orange[class^="btn-sm"] .icon-btn-left svg, .btn-orange[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-orange[class^="btn-xs"] .icon-btn-left, .btn-orange[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-orange[class^="btn-xs"] .icon-btn-left svg, .btn-orange[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-green {
  background: #99cc33;
  color: #ffffff;
  border-color: #99cc33;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-green:hover {
  background: #c6e371;
  color: #ffffff;
  border-color: #bbdd55;
}
.btn-green:active {
  background: #c6e371;
  color: #ffffff;
  border-color: #bbdd55;
}
.btn-green[disabled], .btn-green.disabled, .btn-green[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-green .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-green .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-green[class^="btn-sm"] .icon-btn-left, .btn-green[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-green[class^="btn-sm"] .icon-btn-left svg, .btn-green[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-green[class^="btn-xs"] .icon-btn-left, .btn-green[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-green[class^="btn-xs"] .icon-btn-left svg, .btn-green[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-blue {
  background: #0066cc;
  color: #ffffff;
  border-color: #0066cc;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-blue:hover {
  background: #009cfe;
  color: #ffffff;
  border-color: #0088dd;
}
.btn-blue:active {
  background: #009cfe;
  color: #ffffff;
  border-color: #0088dd;
}
.btn-blue[disabled], .btn-blue.disabled, .btn-blue[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-blue .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-blue .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-blue[class^="btn-sm"] .icon-btn-left, .btn-blue[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-blue[class^="btn-sm"] .icon-btn-left svg, .btn-blue[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-blue[class^="btn-xs"] .icon-btn-left, .btn-blue[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-blue[class^="btn-xs"] .icon-btn-left svg, .btn-blue[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-purple {
  background: transparent;
  color: #660099;
  border-color: #660099;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-purple:hover {
  background: rgba(17, 17, 17, 0);
  color: #7744AA;
  border-color: #7744AA;
}
.btn-outline-purple:active {
  background: rgba(17, 17, 17, 0);
  color: #7744AA;
  border-color: #7744AA;
}
.btn-outline-purple[disabled], .btn-outline-purple.disabled, .btn-outline-purple[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-purple .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-purple .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #660099;
}
.btn-outline-purple[class^="btn-sm"] .icon-btn-left, .btn-outline-purple[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-purple[class^="btn-sm"] .icon-btn-left svg, .btn-outline-purple[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-purple[class^="btn-xs"] .icon-btn-left, .btn-outline-purple[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-purple[class^="btn-xs"] .icon-btn-left svg, .btn-outline-purple[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-orange {
  background: transparent;
  color: #ff9900;
  border-color: #ff9900;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-orange:hover {
  background: rgba(17, 17, 17, 0);
  color: #ffb533;
  border-color: #ffb533;
}
.btn-outline-orange:active {
  background: rgba(17, 17, 17, 0);
  color: #ffb533;
  border-color: #ffb533;
}
.btn-outline-orange[disabled], .btn-outline-orange.disabled, .btn-outline-orange[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-orange .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-orange .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ff9900;
}
.btn-outline-orange[class^="btn-sm"] .icon-btn-left, .btn-outline-orange[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-orange[class^="btn-sm"] .icon-btn-left svg, .btn-outline-orange[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-orange[class^="btn-xs"] .icon-btn-left, .btn-outline-orange[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-orange[class^="btn-xs"] .icon-btn-left svg, .btn-outline-orange[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-green {
  background: transparent;
  color: #99cc33;
  border-color: #99cc33;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-green:hover {
  background: rgba(17, 17, 17, 0);
  color: #bbdd55;
  border-color: #bbdd55;
}
.btn-outline-green:active {
  background: rgba(17, 17, 17, 0);
  color: #bbdd55;
  border-color: #bbdd55;
}
.btn-outline-green[disabled], .btn-outline-green.disabled, .btn-outline-green[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-green .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-green .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #99cc33;
}
.btn-outline-green[class^="btn-sm"] .icon-btn-left, .btn-outline-green[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-green[class^="btn-sm"] .icon-btn-left svg, .btn-outline-green[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-green[class^="btn-xs"] .icon-btn-left, .btn-outline-green[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-green[class^="btn-xs"] .icon-btn-left svg, .btn-outline-green[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-blue {
  background: transparent;
  color: #0066cc;
  border-color: #0066cc;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-blue:hover {
  background: rgba(17, 17, 17, 0);
  color: #0088dd;
  border-color: #0088dd;
}
.btn-outline-blue:active {
  background: rgba(17, 17, 17, 0);
  color: #0088dd;
  border-color: #0088dd;
}
.btn-outline-blue[disabled], .btn-outline-blue.disabled, .btn-outline-blue[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-blue .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-blue .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #0066cc;
}
.btn-outline-blue[class^="btn-sm"] .icon-btn-left, .btn-outline-blue[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-blue[class^="btn-sm"] .icon-btn-left svg, .btn-outline-blue[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-blue[class^="btn-xs"] .icon-btn-left, .btn-outline-blue[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-blue[class^="btn-xs"] .icon-btn-left svg, .btn-outline-blue[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-pink {
  background: transparent;
  color: #ee3377;
  border-color: #ee3377;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-pink:hover {
  background: rgba(17, 17, 17, 0);
  color: #f06699;
  border-color: #f06699;
}
.btn-outline-pink:active {
  background: rgba(17, 17, 17, 0);
  color: #f06699;
  border-color: #f06699;
}
.btn-outline-pink[disabled], .btn-outline-pink.disabled, .btn-outline-pink[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-pink .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-pink .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ee3377;
}
.btn-outline-pink[class^="btn-sm"] .icon-btn-left, .btn-outline-pink[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-pink[class^="btn-sm"] .icon-btn-left svg, .btn-outline-pink[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-pink[class^="btn-xs"] .icon-btn-left, .btn-outline-pink[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-pink[class^="btn-xs"] .icon-btn-left svg, .btn-outline-pink[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-gray {
  background: transparent;
  color: #999999;
  border-color: #cccccc;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-gray:hover {
  background: rgba(17, 17, 17, 0);
  color: #7744AA;
  border-color: #7744AA;
}
.btn-outline-gray:active {
  background: rgba(17, 17, 17, 0);
  color: #7744AA;
  border-color: #7744AA;
}
.btn-outline-gray[disabled], .btn-outline-gray.disabled, .btn-outline-gray[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-gray .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #999999;
}
.btn-outline-gray[class^="btn-sm"] .icon-btn-left, .btn-outline-gray[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray[class^="btn-sm"] .icon-btn-left svg, .btn-outline-gray[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-gray[class^="btn-xs"] .icon-btn-left, .btn-outline-gray[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray[class^="btn-xs"] .icon-btn-left svg, .btn-outline-gray[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-gray-light {
  background: transparent;
  color: #999999;
  border-color: #999999;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-gray-light:hover {
  background: rgba(17, 17, 17, 0);
  color: #666666;
  border-color: #666666;
}
.btn-outline-gray-light:active {
  background: rgba(17, 17, 17, 0);
  color: #666666;
  border-color: #666666;
}
.btn-outline-gray-light[disabled], .btn-outline-gray-light.disabled, .btn-outline-gray-light[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-gray-light .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-light .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #999999;
}
.btn-outline-gray-light[class^="btn-sm"] .icon-btn-left, .btn-outline-gray-light[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-light[class^="btn-sm"] .icon-btn-left svg, .btn-outline-gray-light[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-gray-light[class^="btn-xs"] .icon-btn-left, .btn-outline-gray-light[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-light[class^="btn-xs"] .icon-btn-left svg, .btn-outline-gray-light[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-purple-inverse {
  background: transparent;
  color: #660099;
  border-color: #660099;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-purple-inverse:hover {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-outline-purple-inverse:active {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-outline-purple-inverse[disabled], .btn-outline-purple-inverse.disabled, .btn-outline-purple-inverse[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-purple-inverse .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-purple-inverse .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #660099;
}
.btn-outline-purple-inverse[class^="btn-sm"] .icon-btn-left, .btn-outline-purple-inverse[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-purple-inverse[class^="btn-sm"] .icon-btn-left svg, .btn-outline-purple-inverse[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-purple-inverse[class^="btn-xs"] .icon-btn-left, .btn-outline-purple-inverse[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-purple-inverse[class^="btn-xs"] .icon-btn-left svg, .btn-outline-purple-inverse[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-orange-inverse {
  background: transparent;
  color: #ff9900;
  border-color: #ff9900;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-orange-inverse:hover {
  background: #ffa621;
  color: #ffffff;
  border-color: #ff9900;
}
.btn-outline-orange-inverse:active {
  background: #ffa621;
  color: #ffffff;
  border-color: #ff9900;
}
.btn-outline-orange-inverse[disabled], .btn-outline-orange-inverse.disabled, .btn-outline-orange-inverse[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-orange-inverse .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-orange-inverse .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ff9900;
}
.btn-outline-orange-inverse[class^="btn-sm"] .icon-btn-left, .btn-outline-orange-inverse[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-orange-inverse[class^="btn-sm"] .icon-btn-left svg, .btn-outline-orange-inverse[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-orange-inverse[class^="btn-xs"] .icon-btn-left, .btn-outline-orange-inverse[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-orange-inverse[class^="btn-xs"] .icon-btn-left svg, .btn-outline-orange-inverse[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-green-inverse {
  background: transparent;
  color: #99cc33;
  border-color: #99cc33;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-green-inverse:hover {
  background: #a6d34e;
  color: #ffffff;
  border-color: #99cc33;
}
.btn-outline-green-inverse:active {
  background: #a6d34e;
  color: #ffffff;
  border-color: #99cc33;
}
.btn-outline-green-inverse[disabled], .btn-outline-green-inverse.disabled, .btn-outline-green-inverse[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-green-inverse .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-green-inverse .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #99cc33;
}
.btn-outline-green-inverse[class^="btn-sm"] .icon-btn-left, .btn-outline-green-inverse[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-green-inverse[class^="btn-sm"] .icon-btn-left svg, .btn-outline-green-inverse[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-green-inverse[class^="btn-xs"] .icon-btn-left, .btn-outline-green-inverse[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-green-inverse[class^="btn-xs"] .icon-btn-left svg, .btn-outline-green-inverse[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-blue-inverse {
  background: transparent;
  color: #0066cc;
  border-color: #0066cc;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-blue-inverse:hover {
  background: #0077ed;
  color: #ffffff;
  border-color: #0066cc;
}
.btn-outline-blue-inverse:active {
  background: #0077ed;
  color: #ffffff;
  border-color: #0066cc;
}
.btn-outline-blue-inverse[disabled], .btn-outline-blue-inverse.disabled, .btn-outline-blue-inverse[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-blue-inverse .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-blue-inverse .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #0066cc;
}
.btn-outline-blue-inverse[class^="btn-sm"] .icon-btn-left, .btn-outline-blue-inverse[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-blue-inverse[class^="btn-sm"] .icon-btn-left svg, .btn-outline-blue-inverse[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-blue-inverse[class^="btn-xs"] .icon-btn-left, .btn-outline-blue-inverse[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-blue-inverse[class^="btn-xs"] .icon-btn-left svg, .btn-outline-blue-inverse[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-pink-inverse {
  background: transparent;
  color: #ee3377;
  border-color: #ee3377;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-pink-inverse:hover {
  background: #f1528b;
  color: #ffffff;
  border-color: #ee3377;
}
.btn-outline-pink-inverse:active {
  background: #f1528b;
  color: #ffffff;
  border-color: #ee3377;
}
.btn-outline-pink-inverse[disabled], .btn-outline-pink-inverse.disabled, .btn-outline-pink-inverse[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-pink-inverse .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-pink-inverse .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ee3377;
}
.btn-outline-pink-inverse[class^="btn-sm"] .icon-btn-left, .btn-outline-pink-inverse[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-pink-inverse[class^="btn-sm"] .icon-btn-left svg, .btn-outline-pink-inverse[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-pink-inverse[class^="btn-xs"] .icon-btn-left, .btn-outline-pink-inverse[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-pink-inverse[class^="btn-xs"] .icon-btn-left svg, .btn-outline-pink-inverse[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-gray-inverse {
  background: transparent;
  color: #999999;
  border-color: #cccccc;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-gray-inverse:hover {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-outline-gray-inverse:active {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-outline-gray-inverse[disabled], .btn-outline-gray-inverse.disabled, .btn-outline-gray-inverse[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-gray-inverse .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-inverse .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #999999;
}
.btn-outline-gray-inverse[class^="btn-sm"] .icon-btn-left, .btn-outline-gray-inverse[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-inverse[class^="btn-sm"] .icon-btn-left svg, .btn-outline-gray-inverse[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-gray-inverse[class^="btn-xs"] .icon-btn-left, .btn-outline-gray-inverse[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-inverse[class^="btn-xs"] .icon-btn-left svg, .btn-outline-gray-inverse[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-gray-light-inverse {
  background: transparent;
  color: #999999;
  border-color: #999999;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-gray-light-inverse:hover {
  background: #777777;
  color: #ffffff;
  border-color: #666666;
}
.btn-outline-gray-light-inverse:active {
  background: #777777;
  color: #ffffff;
  border-color: #666666;
}
.btn-outline-gray-light-inverse[disabled], .btn-outline-gray-light-inverse.disabled, .btn-outline-gray-light-inverse[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-gray-light-inverse .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-light-inverse .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #999999;
}
.btn-outline-gray-light-inverse[class^="btn-sm"] .icon-btn-left, .btn-outline-gray-light-inverse[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-light-inverse[class^="btn-sm"] .icon-btn-left svg, .btn-outline-gray-light-inverse[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-gray-light-inverse[class^="btn-xs"] .icon-btn-left, .btn-outline-gray-light-inverse[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-light-inverse[class^="btn-xs"] .icon-btn-left svg, .btn-outline-gray-light-inverse[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-close-gray {
  background: #b9b9b9;
  color: #ffffff;
  border-color: #b9b9b9;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-close-gray:hover {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-close-gray:active {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-close-gray[disabled], .btn-close-gray.disabled, .btn-close-gray[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-close-gray .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-close-gray .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-close-gray[class^="btn-sm"] .icon-btn-left, .btn-close-gray[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-close-gray[class^="btn-sm"] .icon-btn-left svg, .btn-close-gray[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-close-gray[class^="btn-xs"] .icon-btn-left, .btn-close-gray[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-close-gray[class^="btn-xs"] .icon-btn-left svg, .btn-close-gray[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-close-gray-blue {
  background: #b9b9b9;
  color: #ffffff;
  border-color: #b9b9b9;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-close-gray-blue:hover {
  background: #0077ed;
  color: #ffffff;
  border-color: #0066cc;
}
.btn-close-gray-blue:active {
  background: #0077ed;
  color: #ffffff;
  border-color: #0066cc;
}
.btn-close-gray-blue[disabled], .btn-close-gray-blue.disabled, .btn-close-gray-blue[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-close-gray-blue .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-close-gray-blue .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-close-gray-blue[class^="btn-sm"] .icon-btn-left, .btn-close-gray-blue[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-close-gray-blue[class^="btn-sm"] .icon-btn-left svg, .btn-close-gray-blue[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-close-gray-blue[class^="btn-xs"] .icon-btn-left, .btn-close-gray-blue[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-close-gray-blue[class^="btn-xs"] .icon-btn-left svg, .btn-close-gray-blue[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-close {
  background: transparent;
  color: #b9b9b9;
  border-color: transparent;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-close:hover {
  background: rgba(17, 17, 17, 0);
  color: #660099;
  border-color: transparent;
}
.btn-close:active {
  background: rgba(17, 17, 17, 0);
  color: #660099;
  border-color: transparent;
}
.btn-close[disabled], .btn-close.disabled, .btn-close[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-close .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-close .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #b9b9b9;
}
.btn-close[class^="btn-sm"] .icon-btn-left, .btn-close[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-close[class^="btn-sm"] .icon-btn-left svg, .btn-close[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-close[class^="btn-xs"] .icon-btn-left, .btn-close[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-close[class^="btn-xs"] .icon-btn-left svg, .btn-close[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-special-theme {
  background: #eb3c7d;
  color: #ffffff;
  border-color: #eb3c7d;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-special-theme:hover {
  background: #f384ad;
  color: #ffffff;
  border-color: #f06699;
}
.btn-special-theme:active {
  background: #f384ad;
  color: #ffffff;
  border-color: #f06699;
}
.btn-special-theme[disabled], .btn-special-theme.disabled, .btn-special-theme[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-special-theme .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-special-theme .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-special-theme[class^="btn-sm"] .icon-btn-left, .btn-special-theme[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-special-theme[class^="btn-sm"] .icon-btn-left svg, .btn-special-theme[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-special-theme[class^="btn-xs"] .icon-btn-left, .btn-special-theme[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-special-theme[class^="btn-xs"] .icon-btn-left svg, .btn-special-theme[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-white {
  background: #ffffff;
  color: #660099;
  border-color: #ffffff;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-white:hover {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-white:active {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-white[disabled], .btn-white.disabled, .btn-white[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-white .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #660099;
}
.btn-white[class^="btn-sm"] .icon-btn-left, .btn-white[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white[class^="btn-sm"] .icon-btn-left svg, .btn-white[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-white[class^="btn-xs"] .icon-btn-left, .btn-white[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white[class^="btn-xs"] .icon-btn-left svg, .btn-white[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-white-blue {
  background: #ffffff;
  color: #0066cc;
  border-color: #ffffff;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-white-blue:hover {
  background: #0077ed;
  color: #ffffff;
  border-color: #0066cc;
}
.btn-white-blue:active {
  background: #0077ed;
  color: #ffffff;
  border-color: #0066cc;
}
.btn-white-blue[disabled], .btn-white-blue.disabled, .btn-white-blue[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-white-blue .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white-blue .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #0066cc;
}
.btn-white-blue[class^="btn-sm"] .icon-btn-left, .btn-white-blue[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white-blue[class^="btn-sm"] .icon-btn-left svg, .btn-white-blue[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-white-blue[class^="btn-xs"] .icon-btn-left, .btn-white-blue[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white-blue[class^="btn-xs"] .icon-btn-left svg, .btn-white-blue[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-white-2 {
  background: #ffffff;
  color: #660099;
  border-color: #ffffff;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-white-2:hover {
  background: white;
  color: #ffffff;
  border-color: #ffffff;
}
.btn-white-2:active {
  background: white;
  color: #ffffff;
  border-color: #ffffff;
}
.btn-white-2[disabled], .btn-white-2.disabled, .btn-white-2[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-white-2 .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white-2 .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #660099;
}
.btn-white-2[class^="btn-sm"] .icon-btn-left, .btn-white-2[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white-2[class^="btn-sm"] .icon-btn-left svg, .btn-white-2[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-white-2[class^="btn-xs"] .icon-btn-left, .btn-white-2[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white-2[class^="btn-xs"] .icon-btn-left svg, .btn-white-2[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-white-inverse {
  background: transparent;
  color: #660099;
  border-color: #ffffff;
  border-width: 0;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-white-inverse:hover {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-white-inverse:active {
  background: #7c00ba;
  color: #ffffff;
  border-color: #660099;
}
.btn-white-inverse[disabled], .btn-white-inverse.disabled, .btn-white-inverse[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-white-inverse .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white-inverse .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #660099;
}
.btn-white-inverse[class^="btn-sm"] .icon-btn-left, .btn-white-inverse[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white-inverse[class^="btn-sm"] .icon-btn-left svg, .btn-white-inverse[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-white-inverse[class^="btn-xs"] .icon-btn-left, .btn-white-inverse[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-white-inverse[class^="btn-xs"] .icon-btn-left svg, .btn-white-inverse[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-white {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-white:hover {
  background: white;
  color: #660099;
  border-color: #ffffff;
}
.btn-outline-white:active {
  background: white;
  color: #660099;
  border-color: #ffffff;
}
.btn-outline-white[disabled], .btn-outline-white.disabled, .btn-outline-white[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-white .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-white .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-outline-white[class^="btn-sm"] .icon-btn-left, .btn-outline-white[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-white[class^="btn-sm"] .icon-btn-left svg, .btn-outline-white[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-white[class^="btn-xs"] .icon-btn-left, .btn-outline-white[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-white[class^="btn-xs"] .icon-btn-left svg, .btn-outline-white[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-white-blue {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-white-blue:hover {
  background: white;
  color: #0066cc;
  border-color: #ffffff;
}
.btn-outline-white-blue:active {
  background: white;
  color: #0066cc;
  border-color: #ffffff;
}
.btn-outline-white-blue[disabled], .btn-outline-white-blue.disabled, .btn-outline-white-blue[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-white-blue .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-white-blue .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-outline-white-blue[class^="btn-sm"] .icon-btn-left, .btn-outline-white-blue[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-white-blue[class^="btn-sm"] .icon-btn-left svg, .btn-outline-white-blue[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-white-blue[class^="btn-xs"] .icon-btn-left, .btn-outline-white-blue[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-white-blue[class^="btn-xs"] .icon-btn-left svg, .btn-outline-white-blue[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-white-inverse {
  background: #ffffff;
  color: #660099;
  border-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-white-inverse:hover {
  background: rgba(17, 17, 17, 0);
  color: #ffffff;
  border-color: #ffffff;
}
.btn-outline-white-inverse:active {
  background: rgba(17, 17, 17, 0);
  color: #ffffff;
  border-color: #ffffff;
}
.btn-outline-white-inverse[disabled], .btn-outline-white-inverse.disabled, .btn-outline-white-inverse[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-white-inverse .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-white-inverse .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #660099;
}
.btn-outline-white-inverse[class^="btn-sm"] .icon-btn-left, .btn-outline-white-inverse[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-white-inverse[class^="btn-sm"] .icon-btn-left svg, .btn-outline-white-inverse[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-white-inverse[class^="btn-xs"] .icon-btn-left, .btn-outline-white-inverse[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-white-inverse[class^="btn-xs"] .icon-btn-left svg, .btn-outline-white-inverse[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.btn-outline-gray-2 {
  background: transparent;
  color: #ffffff;
  border-color: #cccccc;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-outline-gray-2:hover {
  background: white;
  color: #999999;
  border-color: #ffffff;
}
.btn-outline-gray-2:active {
  background: white;
  color: #999999;
  border-color: #ffffff;
}
.btn-outline-gray-2[disabled], .btn-outline-gray-2.disabled, .btn-outline-gray-2[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.btn-outline-gray-2 .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-2 .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.btn-outline-gray-2[class^="btn-sm"] .icon-btn-left, .btn-outline-gray-2[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-2[class^="btn-sm"] .icon-btn-left svg, .btn-outline-gray-2[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.btn-outline-gray-2[class^="btn-xs"] .icon-btn-left, .btn-outline-gray-2[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.btn-outline-gray-2[class^="btn-xs"] .icon-btn-left svg, .btn-outline-gray-2[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}

.b2b .btn-white-inverse {
  background: transparent;
  color: #0066cc;
  border-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.b2b .btn-white-inverse:hover {
  background: #0077ed;
  color: #ffffff;
  border-color: #0066cc;
}
.b2b .btn-white-inverse:active {
  background: #0077ed;
  color: #ffffff;
  border-color: #0066cc;
}
.b2b .btn-white-inverse[disabled], .b2b .btn-white-inverse.disabled, .b2b .btn-white-inverse[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.b2b .btn-white-inverse .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.b2b .btn-white-inverse .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #0066cc;
}
.b2b .btn-white-inverse[class^="btn-sm"] .icon-btn-left, .b2b .btn-white-inverse[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.b2b .btn-white-inverse[class^="btn-sm"] .icon-btn-left svg, .b2b .btn-white-inverse[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.b2b .btn-white-inverse[class^="btn-xs"] .icon-btn-left, .b2b .btn-white-inverse[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.b2b .btn-white-inverse[class^="btn-xs"] .icon-btn-left svg, .b2b .btn-white-inverse[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}
.b2b .btn-outline-white {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.b2b .btn-outline-white:hover {
  background: white;
  color: #0066cc;
  border-color: #ffffff;
}
.b2b .btn-outline-white:active {
  background: white;
  color: #0066cc;
  border-color: #ffffff;
}
.b2b .btn-outline-white[disabled], .b2b .btn-outline-white.disabled, .b2b .btn-outline-white[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.b2b .btn-outline-white .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.b2b .btn-outline-white .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #ffffff;
}
.b2b .btn-outline-white[class^="btn-sm"] .icon-btn-left, .b2b .btn-outline-white[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.b2b .btn-outline-white[class^="btn-sm"] .icon-btn-left svg, .b2b .btn-outline-white[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.b2b .btn-outline-white[class^="btn-xs"] .icon-btn-left, .b2b .btn-outline-white[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.b2b .btn-outline-white[class^="btn-xs"] .icon-btn-left svg, .b2b .btn-outline-white[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}
.b2b .btn-outline-gray {
  background: transparent;
  color: #999999;
  border-color: #cccccc;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.b2b .btn-outline-gray:hover {
  background: rgba(17, 17, 17, 0);
  color: #0066cc;
  border-color: #0066cc;
}
.b2b .btn-outline-gray:active {
  background: rgba(17, 17, 17, 0);
  color: #0066cc;
  border-color: #0066cc;
}
.b2b .btn-outline-gray[disabled], .b2b .btn-outline-gray.disabled, .b2b .btn-outline-gray[readonly] {
  background-color: #666666;
  border-color: #666666;
  cursor: default;
  opacity: 0.8;
}
.b2b .btn-outline-gray .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.b2b .btn-outline-gray .icon-btn-left svg {
  height: 2.4rem;
  width: 2.4rem;
  vertical-align: middle;
  position: absolute;
  top: -2px;
  fill: #ffffff;
  left: -10px;
  top: 1px;
  fill: #999999;
}
.b2b .btn-outline-gray[class^="btn-sm"] .icon-btn-left, .b2b .btn-outline-gray[class*=" btn-sm"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.b2b .btn-outline-gray[class^="btn-sm"] .icon-btn-left svg, .b2b .btn-outline-gray[class*=" btn-sm"] .icon-btn-left svg {
  height: 2rem;
  width: 2rem;
  top: -1px;
  left: -5px;
}
.b2b .btn-outline-gray[class^="btn-xs"] .icon-btn-left, .b2b .btn-outline-gray[class*=" btn-xs"] .icon-btn-left {
  height: 13px;
  width: 20px;
  float: left;
  position: relative;
  margin-top: -5px;
}
.b2b .btn-outline-gray[class^="btn-xs"] .icon-btn-left svg, .b2b .btn-outline-gray[class*=" btn-xs"] .icon-btn-left svg {
  height: 1.6rem;
  width: 1.6rem;
  top: 2px;
  left: -1px;
}