body {
	/*background-color: #FFFFF7;*/
	font-family: 'Roboto', sans-serif;
}

hr {
	margin-top:10px;
	margin-bottom:10px;
}

.btn-secondary {
	color:#FFFFFF;
	background-color:#FF8E44;
	*background-color:#E76713;
	background-image:-ms-linear-gradient(top,#FF8E44,#E76713);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#FF8E44),to(#E76713));
	background-image:-webkit-linear-gradient(top,#FF8E44,#E76713);
	background-image:-o-linear-gradient(top,#FF8E44,#E76713);
	background-image:-moz-linear-gradient(top,#FF8E44,#E76713);
	background-image:linear-gradient(top,#FF8E44,#E76713);
	background-repeat:repeat-x;
	border-color:#E76713 #E76713 #119100;
	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter:progid:dximagetransform.microsoft.gradient(startColorstr='#FF8E44',endColorstr='#E76713',GradientType=0);
	filter:progid:dximagetransform.microsoft.gradient(enabled=false)
}

.btn-secondary:hover,.btn-secondary:active,.btn-secondary.active,.btn-secondary.disabled,.btn-secondary[disabled] {
	background-color:#E76713;
	*background-color:#004ab3
}

.btn-secondary:active,.btn-secondary.active {
	background-color:#004099 \9
}

.span5 {
	width: 415px;
}

.span7 {
	width: 500px;
}

input.span3, textarea.span3, .uneditable-input.span3 {
	width: 225px;
}

.offset2 {
	margin-left: 85px;
}

.how-it-works-strap {
	font-size: 17px;
	padding: 5px 35px;
}

.how-it-works h2 {
	font-weight: bold;
}

.how-it-works, .how-it-works h3 {
	font-size: 45px;
}

.palette-success {
	color: #7AAC38;
}

.navbar-inner {
	min-height:120px;
	padding-right:20px;
	padding-left:20px;
	background-color:#7AAC38;
	background-image:-moz-linear-gradient(top,#7AAC38,#6AA220);
	background-image:-ms-linear-gradient(top,#7AAC38,#6AA220);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#7AAC38),to(#6AA220));
	background-image:-webkit-linear-gradient(top,#7AAC38,#6AA220);
	background-image:-o-linear-gradient(top,#7AAC38,#6AA220);
	background-image:linear-gradient(top,#7AAC38,#6AA220);
	background-repeat:repeat-x;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	filter:progid:dximagetransform.microsoft.gradient(startColorstr='#7AAC38',endColorstr='#6AA220',GradientType=0);
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
	-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
	box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
}

.navbar-fixed-top, .navbar-fixed-bottom {
	position: relative;
}

.navbar .brand {
	display: block;
	float: none;
	padding: 0;
	font-size: 0px;
	font-weight: 200;
	line-height: 1;
	color: #FFF;
	background-image: url("../img/pick-parcel-logo.png");
	height: 122px;
	margin: 10px auto auto;
	width: 367px;
}
.navbar .nav>li>a {
	color:#006400;
	font-weight: bold;
}

.navbar .nav>li>a:hover {
	color:#FF9019;
	text-decoration:none;
	background-color:transparent;
}

.dropdown-menu>li>a:hover, .dropdown-menu .active>a, .dropdown-menu .active>a:hover {
	background-color: #006400;
}

.carousel-control {
    width: 0%;
}

.glyphicon {
	top: 0px;
}

.footer {
    width: 100%;
	padding: 10px 0 0;
}

#footer-wrapper {
    color: #FFFFFF;
	background-color: #7AAC38;
    font-size: 12px;
    margin: auto;
	padding-bottom: 20px;
   /* max-width: 950px;
    min-height: 245px;*/
}

#footer-links
{
    width: 950px;
	padding-bottom: 20px;
	margin: auto;
    color: #FFFFFF;
    font-size: 12px;
	min-height: 250px;
}

#footer-links a
{
    color: #FFFFFF;
    font-size: 12px;
	text-decoration: none;
}

.panel{
	margin-top: 30px;
}

#footer-text {
    border-top: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 11px;
    margin: auto;
    min-height: 45px;
    padding-top: 10px;
    text-align: center;
    width: 100%;
}

.footer p {
    color: #FFF;
}

.footer-print {
	margin-top:20px;
}

i.social {
	background-image: url('../img/social.png');
	display: inline-block;
	width: 46px;
	height: 46px;
	vertical-align: middle;
	margin: 5px 15px 10px 0;
}

i.social.facebook
{
	background-position: 0px 0;
}

i.social.facebook:hover {
	background-position: -46px 0;
}

i.social.twitter
{
	background-position: -92px 0;
}

i.social.twitter:hover {
	background-position: -138px 0;
}

i.social.youtube
{
	background-position: -184px 0;
}

i.social.youtube:hover {
	background-position: -230px 0;
}

i.social.google
{
	background-position: -276px 0;
}

i.social.google:hover {
	background-position: -322px 0;
}

.gutter-bottom-md {
	margin-bottom: 15px;
}

.gutter-top-md {
	margin-top: 15px;
}

#copyright
{
	padding-bottom: 20px;
	text-align: center;
}








.btn-primary {
	background-color:#119100;
	*background-color:#006400;
	background-image:-ms-linear-gradient(top,#028002,#006400);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#028002),to(#006400));
	background-image:-webkit-linear-gradient(top,#028002,#006400);
	background-image:-o-linear-gradient(top,#028002,#006400);
	background-image:-moz-linear-gradient(top,#028002,#006400);
	background-image:linear-gradient(top,#028002,#006400);
	background-repeat:repeat-x;
	border-color:#006400 #006400 #119100;
	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter:progid:dximagetransform.microsoft.gradient(startColorstr='#028002',endColorstr='#006400',GradientType=0);
	filter:progid:dximagetransform.microsoft.gradient(enabled=false)
}

.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] {
	background-color:#006400;
	*background-color:#004ab3
}

.btn-primary:active,.btn-primary.active {
	background-color:#004099 \9
}

#welcome {
    max-width: 950px;
    margin: auto;
	/*width: 950px;*/
	margin-bottom : 10px;
}
#home-quote-box {
    background-color: #FFFFFF;
    box-shadow: 0 0 1px 1px #CCCCCC;

    margin: auto;
    margin-bottom: 25px;
}
#home-quote-box-head {
	box-shadow: 0 0 1px 1px #CCCCCC;
    height: 44px;
   	font-family: 'News Cycle', sans-serif;
	font-weight:bold;
}
#home-quote-one {


}
#home-quote-two {
	box-shadow: 0 0 0px 1px #CCCCCC;


}
#home-quote-three {

margin-left: 0px;

}
#home-quote-title {
    color: #518122;
    height: 45px;
    font-size: 18px;
    font-weight: bold;
}

.no-1 {
	float: left;
	height: 45px;
	width: 45px;
	background-image: url(../img/no-1.png);
	background-repeat: no-repeat;
}

.no-2 {
	float: left;
	height: 45px;
	width: 45px;
	background-image: url(../img/no-2.png);
	background-repeat: no-repeat;
}

.no-3 {
	float: left;
	height: 45px;
	width: 45px;
	background-image: url(../img/no-3.png);
	background-repeat: no-repeat;
}

#home-guide {
    background-color: #7AAC38;
    height: 400px;
    width: 100%;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) inset !important;
	margin-bottom: 25px;
	min-width:950px;

}
#home-guide-title {
//	padding-bottom: 15px;
    padding-top: 20px;
    text-align: center;
    text-shadow: 0 1px 1px #000000;
//	font-family: 'News Cycle', sans-serif;
	font-weight:bold;
	font-size: 25px;
	color: #FFFFFF;
    width: 950px;
    margin: auto;
}
#home-step-animation {
	background-image: url("../img/home-step-animation.gif");
    background-repeat: no-repeat;
    height: 80px;
    max-width: 857px;
    margin: auto;
}
#home-step {
	background-image: url("../img/home-step.png");
    background-repeat: no-repeat;
    height: 210px;
    width: 950px;
    margin: auto;
}

#home-about {
    margin-top:25px;
    background-color: #FFFFFF;
    box-shadow: 0 0 1px 1px #CCCCCC;
    width: 950px;
    margin: auto;
    margin-bottom: -20px;
}
#home-about-head {
	box-shadow: 0 0 1px 1px #CCCCCC;
    height: 39px;
    color: #518122;
	padding-top:5px;
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
   	font-family: 'News Cycle', sans-serif;
	font-weight:bold;
}
#home-about-content {
	margin: 15px auto auto;
	padding: 0 15px 10px;
	line-height: 2;
}

.ss-middle-div {
	padding-top: 15px;
}

.ss-middle-div .circled-step {
float: left;
border-top: .083333333em solid lightgrey;
margin-top: 25px;
margin-bottom: 25px;
text-align: center;
}
.ss-middle-div .steps-3 {
width: 25%;
padding: 0;
color: #545454;
font-family: Arial,Verdana,sans-serif;
font-size: 12px;
line-height: 16px;
}


.ss-middle-div .circled-step .step-content {
margin-top: -25px;
padding: 0;
color: #545454;
font-family: Arial,Verdana,sans-serif;
font-size: 12px;
line-height: 16px;
}
.ss-middle-div .circled-step {
text-align: center;
}

.ss-middle-div .circled-step .active {
background: url(../img/circle-mc.png) no-repeat;
color: white;
font-size: 27px;
line-height: 50px;
height: 50px;
width: 50px;
display: inline-block;
}

.ss-middle-div .circled-step {
text-align: center;
}
.ftl-style-1 {
font-family: Arial,Verdana,sans-serif;
}

.ss-middle-div h2.step-label {
font-size: 100%;
font-weight: normal;
margin: 0;
padding: 0;
}

.ss-middle-div .circled-step .step-bg {
color: white;
font-size: 27px;
line-height: 50px;
height: 50px;
width: 50px;
background: url(../img/circle-light.png) no-repeat;
display: inline-block;
}

.ss-middle-div .circled-step .current {
background: url(../img/circle-current.png) no-repeat;
color: white;
font-size: 27px;
line-height: 50px;
height: 50px;
width: 50px;
display: inline-block;
}

.my-account-box {
	background-color: #fff;
}

#search-for {
    color: #000000;
    font-size: 30px;
    font-weight: bold;
    padding: 20px;
    text-align: center;
}

.s-s-one-three-delvry-div {
    border: 1px solid #B9B9B9;
    float: left;
    height: auto;
    margin: auto auto 16px;
    width: 100%;
}

.s-s-one-three-delvry-top {
    border-bottom: 1px solid #E8E8E8;
    box-shadow: 0 3px 9px 0 #E8E8E8;
    float: left;
    font-weight: bold;
    height: 42px;
    width: 100%;
}

.s-s-one-three-delvry-top-left {
    float: left;
    height: 44px;
    width: 132px;
}

.s-s-one-three-delvry-top {
    font-weight: bold;
}

.s-s-days-delivery-text {
    background-color: #FFFFFF;
    color: #366E00;
    font-family: Tahoma;
    font-size: 18px;
    font-weight: bold;
    height: 30px;
    margin-left: 10px;
    padding-top: 12px;
}

.tnt-div {
    background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
    float: left;
    height: auto;
    width: 950px;
}

.tnt-logo {
    border: 1px solid #FF9019;
    border-radius: 15px;
    float: left;
    height: 100px;
    margin-bottom: 18px;
    margin-left: 18px;
    margin-top: 18px;
    width: 100px;
}

.tnt-text-div {
    border-bottom: 1px solid #DCDCDC;
    float: left;
    height: 80px;
    margin-left: 12px;
    margin-top: 16px;
    min-width: 808px;
}

.tnt-express-txt {
    color: #000000;
    float: left;
    font-family: "Droid Sans";
    font-size: 24px;
    margin-top: 25px;
}

.bsns-clctn-txt {
    color: #000000;
    font-family: "Droid Sans";
    font-size: 12px;
    height: 20px;
    margin-top: 60px;
}

.rs-6oo-txt {
    color: #BE160A;
    float: right;
    font-family: "Droid Sans";
    font-size: 20px;
    font-weight: bold;
    height: 20px;
    margin-right: 88px;
    margin-top: -55px;
    width: 110px;
}

.all-incl-txt {
    color: #6F6F6F;
    float: right;
    font-family: "Droid Sans";
    font-size: 10px;
    font-weight: normal;
    height: 10px;
    margin-right: 110px;
    margin-top: -30px;
    width: 86px;
}

.printer-div {
    float: right;
    padding-right: 5px;
    padding-top: 9px;
    width: 150px;
}

.product-cart-form {
	background-color: #FFF;
}

.striker {
	text-align: center;
	background-color: #efefef;
	height: 1px;
	line-height: 0;
	margin: 1.5em 0 1.5em 0;
}

.striker span {
	background-color: #fff;
	padding: 0 15px;
}

.hero-heading{font-size:44px}}@media(min-width:992px)and (max-width:1199px){.hero-heading{font-size:37px}}@media(min-width:768px)and (max-width:991px){.hero-heading{font-size:28px}}@media(max-width:767px){.hero-heading{margin-top:15px;font-size:15px}}@media(min-width:1200px){.hero-heading>.hero-heading-small{font-size:22px}}@media(min-width:992px)and (max-width:1199px){.hero-heading>.hero-heading-small{font-size:20px}}@media(min-width:768px)and (max-width:991px){.hero-heading>.hero-heading-small{font-size:18px}}@media(max-width:767px){.hero-heading>.hero-heading-small{font-size:12px}}



/**
 * Select2 Bootstrap CSS
 * Compatible with Select2 3.3.2, 3.4.1, 3.4.2 and Twitter Bootstrap 3.0.0
 * MIT License
 */
/**
 * Reset Bootstrap 3 .form-control styles which - if applied to the
 * original <select>-element the Select2-plugin may be run against -
 * are copied to the .select2-container.
 *
 * 1. Overwrite .select2-container's original display:inline-block
 *    with Bootstrap 3's default for .form-control, display:block;
 *    courtesy of @juristr (@see https://github.com/fk/select2-bootstrap-css/pull/1)
 */
.select2-container.form-control {
  background: transparent;
  border: none;
  display: block;
  /* 1 */
  margin-bottom: 10px;
  padding: 0;
}

/**
 * Adjust Select2 inputs to fit Bootstrap 3 default .form-control appearance.
 */
.select2-container .select2-choices .select2-search-field input,
.select2-container .select2-choice,
.select2-container .select2-choices {
  background: none;
  padding: 0;
  border-color: #cccccc;
  border-radius: 4px;
  color: #555555;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: white;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.select2-search input {
  border-color: #cccccc;
  border-radius: 4px;
  color: #555555;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: white;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.select2-container .select2-choices .select2-search-field input {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/**
 * Adjust Select2 input heights to match the Bootstrap default.
 */
.select2-container .select2-choice {
  height: 34px;
  line-height: 1.42857;
}

/**
 * Address Multi Select2's height which - depending on how many elements have been selected -
 * may grown higher than their initial size.
 */
.select2-container.select2-container-multi.form-control {
  height: auto;
}

/**
 * Address Bootstrap 3 control sizing classes
 * @see http://getbootstrap.com/css/#forms-control-sizes
 */
.select2-container.input-sm .select2-choice,
.input-group-sm .select2-container .select2-choice {
  height: 30px;
  line-height: 1.5;
  border-radius: 3px;
}

.select2-container.input-lg .select2-choice,
.input-group-lg .select2-container .select2-choice {
  height: 45px;
  line-height: 1.33;
  border-radius: 6px;
}

.select2-container-multi .select2-choices .select2-search-field input {
  height: 32px;
}

.select2-container-multi.input-sm .select2-choices .select2-search-field input,
.input-group-sm .select2-container-multi .select2-choices .select2-search-field input {
  height: 28px;
}

.select2-container-multi.input-lg .select2-choices .select2-search-field input,
.input-group-lg .select2-container-multi .select2-choices .select2-search-field input {
  height: 43px;
}

/**
 * Adjust height and line-height for .select2-search-field amd multi-select Select2 widgets.
 *
 * 1. Class repetition to address missing .select2-chosen in Select2 < 3.3.2.
 */
.select2-container-multi .select2-choices .select2-search-field input {
  margin: 0;
}

.select2-chosen,
.select2-choice > span:first-child,
.select2-container .select2-choices .select2-search-field input {
  padding: 6px 12px;
}

.input-sm .select2-chosen,
.input-group-sm .select2-chosen,
.input-sm .select2-choice > span:first-child,
.input-group-sm .select2-choice > span:first-child,
.input-sm .select2-choices .select2-search-field input,
.input-group-sm .select2-choices .select2-search-field input {
  padding: 5px 10px;
}

.input-lg .select2-chosen,
.input-group-lg .select2-chosen,
.input-lg .select2-choice > span:first-child,
.input-group-lg .select2-choice > span:first-child,
.input-lg .select2-choices .select2-search-field input,
.input-group-lg .select2-choices .select2-search-field input {
  padding: 10px 16px;
}

.select2-container-multi .select2-choices .select2-search-choice {
  margin-top: 5px;
  margin-bottom: 3px;
}

.select2-container-multi.input-sm .select2-choices .select2-search-choice,
.input-group-sm .select2-container-multi .select2-choices .select2-search-choice {
  margin-top: 3px;
  margin-bottom: 2px;
}

.select2-container-multi.input-lg .select2-choices .select2-search-choice,
.input-group-lg .select2-container-multi .select2-choices .select2-search-choice {
  line-height: 24px;
}

/**
 * Adjust the single Select2's dropdown arrow button appearance.
 *
 * 1. For Select2 v.3.3.2.
 */
.select2-container .select2-choice .select2-arrow,
.select2-container .select2-choice div {
  border-left: 1px solid #cccccc;
  background: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

.select2-dropdown-open .select2-choice .select2-arrow,
.select2-dropdown-open .select2-choice div {
  border-left-color: transparent;
  background: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

/**
 * Adjust the dropdown arrow button icon position for the single-select Select2 elements
 * to make it line up vertically now that we increased the height of .select2-container.
 *
 * 1. Class repetition to address missing .select2-chosen in Select2 v.3.3.2.
 */
.select2-container .select2-choice .select2-arrow b,
.select2-container .select2-choice div b {
  background-position: 0 3px;
}

.select2-dropdown-open .select2-choice .select2-arrow b,
.select2-dropdown-open .select2-choice div b {
  background-position: -18px 3px;
}

.select2-container.input-sm .select2-choice .select2-arrow b,
.input-group-sm .select2-container .select2-choice .select2-arrow b,
.select2-container.input-sm .select2-choice div b,
.input-group-sm .select2-container .select2-choice div b {
  background-position: 0 1px;
}

.select2-dropdown-open.input-sm .select2-choice .select2-arrow b,
.input-group-sm .select2-dropdown-open .select2-choice .select2-arrow b,
.select2-dropdown-open.input-sm .select2-choice div b,
.input-group-sm .select2-dropdown-open .select2-choice div b {
  background-position: -18px 1px;
}

.select2-container.input-lg .select2-choice .select2-arrow b,
.input-group-lg .select2-container .select2-choice .select2-arrow b,
.select2-container.input-lg .select2-choice div b,
.input-group-lg .select2-container .select2-choice div b {
  background-position: 0 9px;
}

.select2-dropdown-open.input-lg .select2-choice .select2-arrow b,
.input-group-lg .select2-dropdown-open .select2-choice .select2-arrow b,
.select2-dropdown-open.input-lg .select2-choice div b,
.input-group-lg .select2-dropdown-open .select2-choice div b {
  background-position: -18px 9px;
}

/**
 * Address Bootstrap's validation states and change Select2's border colors and focus states.
 * Apply .has-warning, .has-danger or .has-succes to #select2-drop to match Bootstraps' colors.
 */
.has-warning .select2-choice,
.has-warning .select2-choices {
  border-color: #c09853;
}
.has-warning .select2-container-active .select2-choice,
.has-warning .select2-container-multi.select2-container-active .select2-choices {
  border-color: #a47e3c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.has-warning.select2-drop-active {
  border-color: #a47e3c;
}
.has-warning.select2-drop-active.select2-drop.select2-drop-above {
  border-top-color: #a47e3c;
}

.has-error .select2-choice,
.has-error .select2-choices {
  border-color: #b94a48;
}
.has-error .select2-container-active .select2-choice,
.has-error .select2-container-multi.select2-container-active .select2-choices {
  border-color: #953b39;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.has-error.select2-drop-active {
  border-color: #953b39;
}
.has-error.select2-drop-active.select2-drop.select2-drop-above {
  border-top-color: #953b39;
}

.has-success .select2-choice,
.has-success .select2-choices {
  border-color: #468847;
}
.has-success .select2-container-active .select2-choice,
.has-success .select2-container-multi.select2-container-active .select2-choices {
  border-color: #356635;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.has-success.select2-drop-active {
  border-color: #356635;
}
.has-success.select2-drop-active.select2-drop.select2-drop-above {
  border-top-color: #356635;
}

/**
 * Make Select2's active-styles - applied to .select2-container when the widget receives focus -
 * fit Bootstrap 3's .form-element:focus appearance.
 */
.select2-container-active .select2-choice,
.select2-container-multi.select2-container-active .select2-choices {
  border-color: #66afe9;
  outline: none;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.select2-drop-active {
  border-color: #66afe9;
}

.select2-drop-auto-width,
.select2-drop.select2-drop-above.select2-drop-active {
  border-top-color: #66afe9;
}

/**
 * Select2 widgets in Bootstrap Input Groups
 *
 * When Select2 widgets are combined with other elements using Bootstrap 3's
 * "Input Group" component, we don't want specific edges of the Select2 container
 * to have a border-radius.
 *
 * In Bootstrap 2, input groups required a markup where these style adjustments
 * could be bound to a CSS-class identifying if the additional elements are appended,
 * prepended or both.
 *
 * Bootstrap 3 doesn't rely on these classes anymore, so we have to use our own.
 * Use .select2-bootstrap-prepend and .select2-bootstrap-append on a Bootstrap 3 .input-group
 * to let the contained Select2 widget know which edges should not be rounded as they are
 * directly followed by another element.
 *
 * @see http://getbootstrap.com/components/#input-groups
 */
.input-group.select2-bootstrap-prepend [class^="select2-choice"] {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.input-group.select2-bootstrap-append [class^="select2-choice"] {
  border-bottom-right-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.select2-dropdown-open [class^="select2-choice"] {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

/**
 * Adjust Select2's choices hover and selected styles to match Bootstrap 3's default dropdown styles.
 */
.select2-results .select2-highlighted {
  color: white;
  background-color: #428bca;
}

/**
 * Adjust alignment of Bootstrap 3 buttons in Bootstrap 3 Input Groups to address
 * Multi Select2's height which - depending on how many elements have been selected -
 * may grown higher than their initial size.
 */
.select2-bootstrap-append .select2-container-multiple,
.select2-bootstrap-append .input-group-btn,
.select2-bootstrap-append .input-group-btn .btn,
.select2-bootstrap-prepend .select2-container-multiple,
.select2-bootstrap-prepend .input-group-btn,
.select2-bootstrap-prepend .input-group-btn .btn {
  vertical-align: top;
}

/**
 * Make Multi Select2's choices match Bootstrap 3's default button styles.
 */
.select2-container-multi .select2-choices .select2-search-choice {
  color: #555555;
  background: white;
  border-color: #cccccc;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.select2-container-multi .select2-choices .select2-search-choice-focus {
  background: #ebebeb;
  border-color: #adadad;
  color: #333333;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/**
 * Address Multi Select2's choice close-button vertical alignment.
 */
.select2-search-choice-close {
  margin-top: -7px;
  top: 50%;
}

/**
 * Adjust the single Select2's clear button position (used to reset the select box
 * back to the placeholder value and visible once a selection is made
 * activated by Select2's "allowClear" option).
 */
.select2-container .select2-choice abbr {
  top: 50%;
}

/**
 * Adjust "no results" and "selection limit" messages to make use
 * of Bootstrap 3's default "Alert" style.
 *
 * @see http://getbootstrap.com/components/#alerts-default
 */
.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
  background-color: #fcf8e3;
  color: #c09853;
}

/**
 * Address disabled Select2 styles.
 *
 * 1. For Select2 v.3.3.2.
 * 2. Revert border-left:0 inherited from Select2's CSS to prevent the arrow
 *    from jumping when switching from disabled to enabled state and vice versa.
 */
.select2-container.select2-container-disabled .select2-choice,
.select2-container.select2-container-disabled .select2-choices {
  cursor: not-allowed;
  background-color: #eeeeee;
  border-color: #cccccc;
}
.select2-container.select2-container-disabled .select2-choice .select2-arrow,
.select2-container.select2-container-disabled .select2-choice div,
.select2-container.select2-container-disabled .select2-choices .select2-arrow,
.select2-container.select2-container-disabled .select2-choices div {
  background-color: transparent;
  border-left: 1px solid transparent;
  /* 2 */
}

/**
 * Address Select2's loading indicator position - which should not stick
 * to the right edge of Select2's search input.
 *
 * 1. in .select2-search input
 * 2. in Multi Select2's .select2-search-field input
 * 3. in the status-message of infinite-scroll with remote data (@see http://ivaynberg.github.io/select2/#infinite)
 *
 * These styles alter Select2's default background-position of 100%
 * and supply the new background-position syntax to browsers which support it:
 *
 * 1. Android, Safari < 6/Mobile, IE<9: change to a relative background-position of 99%
 * 2. Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+: use the new CSS3-background-position syntax
 *
 * @see http://www.w3.org/TR/css3-background/#background-position
 *
 * @todo Since both Select2 and Bootstrap 3 only support IE8 and above,
 * we could use the :after-pseudo-element to display the loading indicator.
 * Alternatively, we could supply an altered loading indicator image which already
 * contains an offset to the right.
 */
.select2-search input.select2-active,
.select2-container-multi .select2-choices .select2-search-field input.select2-active,
.select2-more-results.select2-active {
  background-position: 99%;
  /* 4 */
  background-position: right 4px center;
  /* 5 */
}