@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Gentium+Book+Basic:ital,wght@0,400;0,700;1,400;1,700&display=swap");
:root {
  --color-primary: #1634e4;
  --color-primary-dark: #1129b2;
  --bs-primary: #1634e4;
  --bs-nav-pills-link-active-bg: #1634e4; }

@font-face {
  font-family: 'PPAgrandir-WideRegular';
  font-weight: 500;
  src: url(/assets/PPAgrandir-WideRegular-36309f9b72370e5c5e04b62db1ffea3b70d30af77c473bc5d37719caa9a9f4b3.ttf); }

@font-face {
  font-family: 'PPAgrandir-WideBold';
  font-weight: 600;
  src: url(/assets/PPAgrandir-WideBold-7afb9c1a5e9ac2a362dd9e46d1270dc9505850e7f3ccc492865b99d458105ef3.ttf); }

@font-face {
  font-family: 'FTPolar-Regular';
  src: url(/assets/FTPolar-Regular-e55b3d87e4b41f726c523c163505ddf517daff77c37d9a8487a789ed6f7bcf13.ttf); }

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.metrics-table .metric-row {
  cursor: pointer !important;
  transition: background-color 0.2s ease; }
  .metrics-table .metric-row:hover {
    background-color: #e6f3ff !important; }
  .metrics-table .metric-row[aria-expanded="true"] {
    background-color: #f0f8ff !important; }
  .metrics-table .metric-row td {
    cursor: pointer !important; }

.metrics-table .chart-row td {
  background-color: #f8f9fa;
  border-top: none; }

.metrics-table .chart-row.collapsing {
  transition: height 0.35s ease; }

.metrics-table .chart-container {
  min-height: 300px;
  padding: 10px; }
  .metrics-table .chart-container canvas {
    max-width: 100%;
    height: 100%; }

.metrics-table .spinner-border {
  width: 3rem;
  height: 3rem;
  margin-top: 100px;
  margin-bottom: 100px; }

.whitelabel-brand {
  position: absolute;
  left: 0px;
  top: -2px;
  z-index: 9; }
  .whitelabel-brand .secondary-logo-wrapper {
    display: inline-block;
    width: 130px;
    margin-left: 10px;
    vertical-align: top;
    margin-top: 16px; }
  .whitelabel-brand .primary-logo-wrapper {
    display: inline-block;
    width: 140px;
    background: white;
    padding: 15px 18px 18px;
    border: 1px solid #ccc;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 0.3125rem 1rem -0.1875rem #0003; }

:root {
  --color-primary: #1634e4;
  --color-primary-dark: #1129b2;
  --bs-primary: #1634e4; }

a {
  cursor: pointer; }

img {
  max-width: 100%; }

table.calendar td {
  width: calc(100% / 7); }

p,
.p
label,
.label,
li,
.btn,
.sup-title,
.form-control {
  font-family: 'FTPolar-Regular';
  font-weight: 500; }

.constrained-image-wrapper {
  text-align: center; }
  .constrained-image-wrapper img {
    max-height: 100%;
    max-width: 100%; }

.multiDatePicker.input {
  display: none; }

.blog-post {
  font-size: 14pt;
  max-width: 750px; }
  .blog-post p, .blog-post li:not(.list-inline-item) {
    line-height: 1.5em;
    margin-bottom: 1rem; }

.list-inline {
  display: flex; }

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 500;
  font-family: 'PPAgrandir-WideRegular', 'Gentium Book Basic', serif; }
  h1 .highlight::after, .h1 .highlight::after,
  h2 .highlight::after, .h2 .highlight::after,
  h3 .highlight::after, .h3 .highlight::after,
  h4 .highlight::after, .h4 .highlight::after,
  h5 .highlight::after, .h5 .highlight::after,
  h6 .highlight::after, .h6 .highlight::after {
    bottom: 7px; }

h1,
.h1,
.accordion-button h1 {
  font-size: 2.3rem; }

h2,
.h2,
.accordion-button h2 {
  font-size: 1.6rem; }

.h3, h3,
.accordion-button h3 {
  font-size: 1.3rem; }

label {
  font-weight: 600;
  color: #666; }
  label.boolean input.boolean {
    margin-right: .35rem; }

tbody, td, tfoot, th, thead, tr {
  vertical-align: middle; }

header.pad-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
  margin-bottom: -3rem;
  margin-top: -5.5rem; }

.onboard-section {
  display: none; }

.card.rounded-full {
  border-radius: 500px !important; }

.highlight {
  position: relative;
  z-index: 1; }
  .highlight::after {
    content: ' ';
    background: #ffeb7c;
    display: block;
    width: 102%;
    height: 10px;
    position: absolute;
    left: -3px;
    bottom: 0px;
    z-index: -1; }

.vertical-middle {
  align-items: center;
  justify-content: center; }

#main {
  min-height: 100vh;
  margin-bottom: 2rem; }

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%; }

.user-summary {
  border-radius: 500px;
  padding: 14px;
  line-height: 0;
  display: inline-block;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto; }
  .user-summary .user-others {
    display: inline-block;
    padding: 6px;
    font-style: italic;
    font-weight: 400; }

.py-10 {
  padding-top: 6rem;
  padding-bottom: 6rem; }

.mt-n5 {
  margin-top: -3rem !important; }

.flash-messages {
  position: relative;
  width: 100%;
  left: 0;
  z-index: 11; }

.indent-1 {
  margin-left: 1rem; }

.indent-2 {
  margin-left: 2rem; }

.indent-3 {
  margin-left: 3rem; }

.sup-title {
  font-size: 16px;
  display: block;
  opacity: .75; }

.check_boxes .checkbox,
.check_boxes .radio,
.radio_buttons .checkbox,
.radio_buttons .radio {
  display: block; }
  .check_boxes .checkbox input,
  .check_boxes .radio input,
  .radio_buttons .checkbox input,
  .radio_buttons .radio input {
    margin-right: 10px; }
  .check_boxes .checkbox label,
  .check_boxes .radio label,
  .radio_buttons .checkbox label,
  .radio_buttons .radio label {
    display: block; }

.card,
.dropdown-menu,
.modal-content {
  border-radius: var(--bs-border-radius-xl) !important;
  overflow: hidden; }

.dropdown-menu {
  min-width: 250px; }
  .dropdown-menu .dropdown-item {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem; }

.card-organizer {
  background-color: #fff0c4;
  border-color: #ff8700 !important; }
  .card-organizer.btn.show, .card-organizer.btn:hover, .card-organizer.btn:focus, .card-organizer.btn:active {
    color: #ff8700 !important;
    background-color: #fff0c4 !important; }
  .card-organizer .navbar-toggler {
    width: 100%;
    border: 0px;
    border-radius: 1000px;
    box-shadow: none; }
  .card-organizer .nav-item {
    margin-left: 5px;
    margin-right: 5px; }

.truncate-html {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden; }
  .truncate-html.line-clap-3 {
    -webkit-line-clamp: 3; }

.card-items .card-item {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid #ccc;
  display: block; }
  .card-items .card-item:first-child {
    border-top: 0px;
    padding-top: 0rem !important; }
  .card-items .card-item:last-child {
    padding-bottom: 0rem !important; }
  .card-items .card-item p:last-child {
    margin-bottom: 0px !important; }

.breadcrumbs {
  color: #00000066; }
  .breadcrumbs a {
    color: #00000066;
    border-bottom: 1px dotted; }

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%; }

.need-list-item {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eee; }
  .need-list-item:first-child {
    padding-top: 0rem !important; }
  .need-list-item:last-child {
    padding-bottom: 0rem !important;
    border-width: 0px !important; }

.right-0 {
  right: 0; }

.form-float-wrapper {
  position: relative;
  padding-bottom: 1rem;
  padding-top: 7px; }
  .form-float-wrapper.field_with_errors .form-control {
    border-color: red;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px; }
  .form-float-wrapper.field_with_errors label {
    color: red; }
  .form-float-wrapper.field_with_errors .error {
    margin-top: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top: 0px; }
  .form-float-wrapper label {
    position: absolute;
    z-index: 9;
    top: -5px;
    background: white;
    padding: 0px 7px 0px 6px;
    left: -4px; }
  .form-float-wrapper .form-control {
    padding: 1.4rem 1rem 1rem 1rem; }
  .form-float-wrapper .select2-container--bootstrap .select2-selection--multiple {
    min-height: 64px !important;
    display: inline-table;
    width: 100%; }
    .form-float-wrapper .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
      padding: 7px 12px 7px 6px; }

.youtube-video {
  aspect-ratio: 15 / 9;
  width: 100%; }

.overlay {
  position: relative; }
  .overlay::before {
    background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%; }

.badge {
  font-weight: 400; }
  .badge.text-bg-primary {
    background-color: var(--color-primary) !important;
    color: white; }

.accordion-button:not(.collapsed) {
  background-color: #3fa9f51a; }

.accordion-item {
  border: 1px solid #d2d2d2; }

.user-avatar {
  background: #eee;
  padding-top: 12px;
  width: 56px;
  border-radius: 500px;
  line-height: 0;
  height: 56px;
  text-align: center; }

.user-avatar-photo, .add-image-wrapper {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 500px; }

.center {
  margin-left: auto;
  margin-right: auto; }

.form-control {
  border-radius: 7px;
  border-color: #999;
  padding-left: 1rem; }
  .form-control[type=file] {
    line-height: 3;
    padding: .5rem; }

.flatpickr-calendar.inline {
  border-radius: 7px;
  border: 1px solid #999;
  box-shadow: none;
  padding: 10px 20px;
  width: fit-content; }

.form-floating > label,
.input > label {
  color: #666;
  font-weight: 500;
  cursor: pointer; }

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
  transform: scale(0.85) translateY(-1.8rem) translateX(0.15rem); }

.form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown), .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 0.625rem; }

.faux-input {
  width: 100%;
  min-height: 100px;
  display: inline-block; }

label:has(> input.checkbox-highlight) {
  cursor: pointer; }

.form-check-input[type=checkbox] {
  border-color: #666; }

.text-bold {
  font-weight: 600; }

.text-italic {
  font-style: italic; }

.text-underline {
  text-decoration: underline; }

.text-jumbo {
  font-size: 4rem; }

.text-primary {
  color: var(--color-primary) !important; }

.text-light-gray {
  color: #999999a6; }

.gift-input-lg {
  position: relative;
  font-family: 'FTPolar-Regular'; }
  .gift-input-lg input,
  .gift-input-lg span {
    font-size: 40px;
    font-weight: 600;
    text-align: right; }
  .gift-input-lg input {
    padding-right: 70px;
    padding-left: 30px; }
  .gift-input-lg span {
    position: absolute; }
    .gift-input-lg span:first-child {
      left: 0;
      bottom: 0px;
      padding: 7px 10px; }
    .gift-input-lg span:last-child {
      right: 0;
      bottom: 0px;
      padding: 7px 10px; }

.nav-underline .nav-link {
  color: #666; }
  .nav-underline .nav-link.active {
    color: var(--color-primary); }

header .nav-link {
  color: var(--color-primary); }

.feature-opportunity-wrapper {
  position: absolute;
  right: -20px;
  padding: 0px 0px;
  top: 9px;
  background-color: white;
  font-size: 22px; }

.nav-pills .nav-link {
  color: var(--color-primary); }
  .nav-pills .nav-link.active {
    background-color: var(--color-primary); }

.bg-primary {
  background-color: var(--color-primary) !important;
  color: white; }

.bg-light-primary {
  background-color: #edf6fe !important; }

.bg-light-success {
  background-color: #d6e8dd; }

.bg-light-warning {
  background-color: #fff6e2; }

.bg-green {
  background-color: #b4ef8b; }

.bg-blue {
  background-color: #8baaef; }

.bg-orange {
  background-color: #efc48b; }

.bg-linear-gradient {
  background: black;
  background: linear-gradient(90deg, black 43%, rgba(0, 0, 0, 0) 100%); }

.box-shadow,
.btn:hover {
  box-shadow: 0 0.3125rem 1rem -0.1875rem #0003; }

.btn {
  border-radius: 500px;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem; }

.btn-lg {
  padding: 0.6rem 1rem; }

.btn-xs {
  font-size: 12px !important;
  padding: 4px 16px; }

.btn-share {
  border-radius: 10px;
  color: #333 !important;
  display: block;
  margin-bottom: 15px;
  padding: 15px; }
  .btn-share i {
    margin-bottom: 15px; }
  .btn-share:hover {
    color: var(--color-primary) !important; }

.action-item {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important; }
  .action-item:last-child {
    padding-top: 0.6rem !important;
    padding-bottom: 1.3rem !important; }
  .action-item:first-child {
    padding-top: 1.3rem !important;
    padding-bottom: 0.6rem !important; }
  .action-item:first-child:last-child {
    padding-top: 1.3rem !important;
    padding-bottom: 1.3rem !important; }

.p-section {
  padding-top: 7rem;
  padding-bottom: 7rem; }

.card-body-lg {
  padding: 3rem !important; }

.btn.disabled {
  background-color: #eee;
  border-color: transparent; }

.btn-primary,
.progress-bar,
.btn-primary.disabled,
.btn-primary:disabled,
fieldset:disabled .btn,
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white; }

.btn-primary:hover,
.btn-outline-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark); }

.active > .page-link, .page-link.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary); }

.page-link {
  color: var(--color-primary); }

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary); }

.btn-outline-facebook {
  color: #3b5998;
  border-color: #3b5998; }
  .btn-outline-facebook:hover {
    background-color: #3b5998;
    border-color: #3b5998;
    color: white; }

.btn-outline-google_oauth2 {
  color: #4285f4;
  border-color: #4285f4; }
  .btn-outline-google_oauth2:hover {
    background-color: #4285f4;
    border-color: #4285f4;
    color: white; }

a, .btn-link {
  color: var(--color-primary);
  text-decoration: none; }

.select2 textarea {
  resize: none; }

.select2-container {
  width: 100% !important; }

.select2-container--bootstrap .select2-selection--multiple,
.select2-container--bootstrap .select2-selection {
  border-radius: 7px !important;
  border-color: #999 !important;
  padding: 9px !important;
  min-height: 52px !important; }
  .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,
  .select2-container--bootstrap .select2-selection .select2-selection__choice {
    font-size: 14px; }

.select2-container--bootstrap .select2-dropdown--above {
  margin-top: 14px !important; }

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary); }

.select2-container--bootstrap .select2-search--inline {
  margin-top: 10px; }
  .select2-container--bootstrap .select2-search--inline .select2-search__field {
    line-height: 2 !important; }

.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove {
  border: 0px;
  background-color: white; }

.select2-container--bootstrap .select2-results__option--selected,
.select2-container--bootstrap .select2-results__option[aria-selected=true] {
  background-color: #eee;
  color: #666; }

.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered {
  display: contents !important; }

.border-hover:hover {
  border-color: var(--color-primary) !important; }

.border-thin .btn {
  border-width: 1px; }

.border-secondary {
  border-color: #6c757d; }
  .border-secondary .btn, .border-secondary .form-control {
    border-color: #6c757d; }

.border-primary {
  border-color: var(--color-primary) !important; }

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important; }

.dropdown-menu.show {
  z-index: 2000; }

.display-none {
  display: none; }

.icon-primary-circle {
  background-color: #3fa9f5;
  padding: 14px;
  border-radius: 500px;
  border: 6px solid #91cffc;
  width: 76px;
  height: 75px;
  line-height: 35px;
  color: white; }

.w-icon {
  max-width: 150px; }

.w-icon-giftcard {
  max-width: 80px;
  margin-bottom: 0.5em; }

.w-xs {
  max-width: 250px !important; }

.w-sm {
  max-width: 500px !important; }

.w-md {
  max-width: 600px !important; }

.w-lg {
  max-width: 800px !important; }

.w-xl {
  max-width: 1150px; }

.grayscale-item {
  filter: grayscale(1);
  opacity: .5; }
  .grayscale-item:hover {
    filter: grayscale(0);
    opacity: 1; }

.dropdown-toggle::after {
  display: none; }

.hint {
  color: #999;
  font-size: 14px;
  display: block;
  max-width: 80%;
  font-style: italic;
  margin-top: 0.35rem; }

.field {
  margin-bottom: 1rem; }

.star-cb-group {
  font-size: 3rem;
  /* flip the order so we can use the + and ~ combinators */
  unicode-bidi: bidi-override;
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: end;
  /* the hidden clearer */ }
  .star-cb-group > input {
    display: none; }
    .star-cb-group > input + label {
      /* only enough room for the star */
      display: inline-block;
      overflow: hidden;
      width: 15%;
      white-space: nowrap;
      cursor: pointer;
      text-align: center; }
      .star-cb-group > input + label:before {
        display: inline-block;
        content: "☆";
        color: #888; }
    .star-cb-group > input:checked ~ label:before, .star-cb-group > input + label:hover ~ label:before, .star-cb-group > input + label:hover:before {
      content: "★";
      color: #ffc008; }
  .star-cb-group > .star-cb-clear + label {
    text-indent: -9999px;
    width: .5em;
    margin-left: -.5em; }
  .star-cb-group > .star-cb-clear + label:before {
    width: .5em; }
  .star-cb-group:hover > input + label:before {
    content: "☆";
    color: #888; }
  .star-cb-group:hover > input + label:hover ~ label:before, .star-cb-group:hover > input + label:hover:before {
    content: "★";
    color: #ffc008; }

.checkbox-light-label {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white; }

.calendar-dot {
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 500px;
  margin-left: auto;
  margin-right: auto; }
  .calendar-dot.active {
    background: red; }

.calendar-date {
  display: block;
  width: 50px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 22px;
  padding: 5px 5px 4px 5px; }

.today .calendar-date {
  border: 1px solid gray;
  background-color: whitesmoke; }

.event_calendar td {
  border: 1px solid #ccc; }

.event_calendar .day {
  min-height: 120px;
  padding: 10px; }
  .event_calendar .day .day-hover {
    display: none; }
  .event_calendar .day:hover .day-hover {
    display: inline; }

.toggleWeeks {
  cursor: pointer; }

.arrow {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 5px; }

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg); }

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg); }

.circle {
  border-radius: 500px; }

.icon-circle {
  background: #ddd;
  height: 32px;
  width: 32px;
  text-align: center;
  padding-top: 7px;
  border-radius: 500px;
  font-size: 16px;
  margin-right: 0.35rem;
  position: relative;
  top: -2px; }

.error_notification,
.field_with_errors .error {
  border-color: red;
  background-color: #fff4f4;
  border: 1px solid red;
  border-radius: 7px;
  padding: 14px;
  display: block; }

.error_notification {
  margin-bottom: 1rem; }

.field_with_errors label, .field_with_errors .hint {
  color: red; }

.field_with_errors .error {
  margin-top: .5rem; }

.dropdown-menu {
  max-height: 325px;
  overflow-y: scroll; }

.container-registry > .row > * {
  padding-right: calc(var(--bs-gutter-x) * 0.75) !important;
  padding-left: calc(var(--bs-gutter-x) * 0.75) !important; }

.container-registry .btn {
  font-size: 17px;
  font-weight: 600; }
  .container-registry .btn.disabled {
    border-color: gray;
    color: #ccc; }

.registry-photo-mt {
  margin-top: 11px !important; }

.range-spy-wrapper {
  box-shadow: 1px 3px 12px #dbdbdb;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  text-align: center;
  opacity: 0; }
  .range-spy-wrapper .rangeSliderhtml {
    padding: 10px;
    display: block; }

#roundupAlert,
#roundupMaxAlert {
  display: none; }

.background-image {
  background-size: cover;
  background-position: center; }

.giftcard_distort {
  transform: scale(1.15, 1.15); }

.poster-qrcode {
  bottom: 0px;
  margin: 20px;
  border: 13px solid white;
  border-radius: 1rem; }

.timeline {
  padding-left: 1rem;
  border-left: 1px solid #eee; }
  .timeline li {
    position: relative; }
  .timeline .timeline-marker {
    position: absolute;
    left: -1.5rem;
    background: white;
    top: 6px; }

.btn-build-generator {
  position: fixed;
  left: 0;
  bottom: 0px;
  margin: 20px;
  background: var(--color-primary);
  padding: 12px;
  border-radius: 500px;
  width: 70px;
  height: 70px;
  color: white;
  text-align: center;
  box-shadow: 0px 0px 4px #000000b0;
  font-size: 30px;
  font-weight: 200;
  z-index: 9; }

.min-h-sm {
  min-height: 400px; }

.organizer-menu-title {
  position: absolute;
  bottom: -24px;
  background-color: #fff0c4;
  border: 1px solid #ff8700;
  padding: 0px 15px 5px 15px;
  font-size: 12px;
  color: #ff8700;
  border-top: 0px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
  text-align: center; }

.card-overflow-visible {
  overflow: visible !important; }

.user-avatar-container {
  position: relative;
  display: inline-block; }

.user-avatar-container .user-avatar-photo, .user-avatar-container .add-image-wrapper {
  position: relative; }

.user-avatar-container .delete-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(241, 77, 77, 0.5);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 100%;
  padding: 100%;
  display: none; }

.user-avatar-container .add-image-wrapper p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(70, 67, 67, 0.5);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 100%;
  padding: 100%;
  font-size: medium; }

.user-avatar-container:hover .delete-icon {
  display: block;
  cursor: pointer; }

@media (max-width: 450px) {
  .form-floating > label,
  .form-float-wrapper > label,
  .input > label {
    color: #666;
    font-weight: 500;
    font-size: 80%;
    cursor: pointer; }
  .navbar-brand {
    margin-left: 0; }
  .card-overflow-visible {
    overflow: hidden !important; }
  .review-btn-sm {
    padding: 0rem 0rem;
    font-size: 0.85rem; } }

@media (min-width: 992px) {
  .card-body,
  .modal-body,
  .card-footer {
    padding: 1.5rem 1.3rem; }
  .card-header,
  .modal-header {
    padding: 1.5rem 1.3rem; } }

@media (max-width: 992px) {
  .table-responsive .table {
    width: 300%; }
  .mb-5 {
    margin-bottom: 1.5rem !important; }
  .card-body-lg {
    padding: 1.5rem !important; }
  .modal-dialog {
    margin-top: 20%; }
  .card-header,
  .modal-header,
  .card-footer {
    padding: 1.5rem 1.3rem; }
  .py-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .user-highlight-item {
    font-size: 14px; }
  .mt-xs-5 {
    margin-top: 2rem; }
  .py-10 {
    padding-top: 2rem;
    padding-bottom: 2rem; }
  .px-5 {
    padding-right: 2rem !important;
    padding-left: 2rem !important; }
  .card {
    margin-bottom: 1rem; }
  .text-jumbo {
    font-size: 3rem; }
  h1,
  .h1,
  .accordion-button h1 {
    font-size: 2rem; }
  .h2, h2,
  .accordion-button h2 {
    font-size: 1.5rem; }
  .h3, h3,
  .accordion-button h3 {
    font-size: 1rem; }
  .btn-lg {
    padding: 0.6rem 1rem; }
  .navbar-collapse .navbar-nav {
    width: 100%; }
  .navbar-collapse .btn {
    width: 100%; }
  .d-xs-block {
    display: block; }
  .mt-0-xs {
    margin-top: 0px !important; } }
/* ──────────────────────────────────────────────
   SupportNow · platform nav + footer.

   Built from the platform-nav-shell prototype:
   shell.css + switcher-v2.css + header-v3.css, concatenated with the
   demo-page rules stripped.

   Two deliberate changes from the prototype:

   1. The prototype styles `body` and every `a`. That would restyle the
      whole site, so those rules are scoped to .pf-nav / .pf-foot / .v3-band
      here. Nothing outside the nav, header and footer is touched.
   2. Podcast's three colours are pinned on :root below. The app knows which
      app it is, so the prototype's header-v3.js is not needed; the only
      thing it did that CSS cannot is tint each switcher icon its own colour.

   application.scss pulls this in via `require_tree .`, which sorts after
   styles.scss, so it wins the cascade without !important.

   Connect renders no coloured band: it is a dense, mostly-authenticated app
   and a blue header on every screen would fight the page's own heading. The
   pill therefore floats over whatever the page provides, and .pf-nav-clear
   reserves its height. The .v3-band rules are kept so a marketing page can
   opt in later.
   ────────────────────────────────────────────── */

:root{
  /* Brand tokens, matched to the existing SupportNow apps */
  --brand:#188aec; --brand-dark:#1274c9; --brand-light:#4da6f0; --brand-bg:#eef6fe; --navy:#1b2f80;
  --ink:#111827; --body:#374151; --secondary:#6b7280; --muted:#9ca3af;
  --border:#e8eaf0; --border-light:#f1f2f6; --bg:#fbfaf8; --card:#ffffff;
  --give:#059669; /* success, used by the share field's copied state */

  --pf-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --pf-pill-h:56px;
  --pf-shadow:0 6px 28px -10px rgba(17,24,39,.16), 0 2px 6px -2px rgba(17,24,39,.06);
  --pf-shadow-stuck:0 14px 40px -14px rgba(27,47,128,.28), 0 2px 8px -3px rgba(17,24,39,.08);
}

/* ── This app's colours ── */
:root{
  --app-base:#1634e4; --app-dark:#1129b2; --app-tint:#f2f4fe;
}

/* ── Typography, scoped ──
   The prototype puts these on `body` and on every `a`. Here they are confined
   to the shell's own regions so the rest of the site keeps its typography.
   .pf-oc is the mobile offcanvas, which Bootstrap renders as a body child. ── */
.pf-nav, .pf-foot, .v3-band, .pf-oc{
  font-family:var(--pf-sans);
  color:var(--body);
  -webkit-font-smoothing:antialiased;
}
.pf-nav a, .pf-foot a, .v3-band a, .pf-oc a{ text-decoration:none; }

/* ══════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════ */

.pf-nav{
  position:sticky; top:0; z-index:1030;
  padding:12px 0 6px;
  background:linear-gradient(to bottom, var(--bg) 62%, rgba(251,250,248,0));
}

.pf-pill{
  position:relative; /* the mega menu spans this */
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  height:var(--pf-pill-h);
  padding:0 12px 0 0;
  background:var(--card);
  border-radius:999px;
  box-shadow:var(--pf-shadow);
  transition:box-shadow .22s ease;
}
.pf-nav.is-stuck .pf-pill{ box-shadow:var(--pf-shadow-stuck); }

/* ── Brand block: mark + switcher caret | app name ── */
/* position:static so the mega menu resolves against .pf-pill and can span it */
.pf-brand{ position:static; display:flex; align-self:stretch; align-items:center; min-width:0; }

/* Runs to the pill's edges rather than sitting inset, so the left cap is the target.
   Its border-right is the divider, so the line belongs to the toggle once it fills. */
.pf-switch{
  display:flex; align-items:center; gap:10px;
  align-self:stretch;
  background:none;
  border:0; border-right:1px solid var(--border);
  /* Right padding and .pf-app's margin both match the mark's 15px of
     clearance above and below, so the divider sits evenly between halves. */
  padding:0 15px 0 26px;
  border-radius:999px 0 0 999px;
  cursor:pointer;
  transition:background .16s ease;
}
.pf-switch:hover{ background:#f7f8fa; }
.pf-switch:focus-visible{ outline:2px solid var(--brand); outline-offset:-3px; }
.pf-switch[aria-expanded="true"]{ background:#eceef4; }
.pf-mark{ height:26px; width:auto; display:block; }
.pf-caret{ font-size:14px; color:var(--muted); transition:transform .2s ease; }
.pf-switch[aria-expanded="true"] .pf-caret{ transform:rotate(180deg); color:var(--secondary); }

.pf-app{
  font-family:var(--pf-sans);
  font-size:21px; font-weight:700; line-height:1;
  color:var(--ink);
  letter-spacing:-.025em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-left:15px;
  transition:color .15s ease;
}
.pf-app:hover{ color:var(--brand); }

/* ── Right side: links + CTA ── */
/* The row stretches so each link runs the pill's full height and its
   underline can sit on the pill's bottom edge. The CTA stays centred. */
/* Spacing lives in each link's padding, not a row gap, so the active
   underline runs the full width of its hit area. */
.pf-links{ display:flex; align-self:stretch; align-items:center; gap:0; }

.pf-link{
  position:relative;
  align-self:stretch;
  display:flex; align-items:center;
  padding:0 15px;
  font-size:15px; font-weight:500;
  color:var(--secondary);
  white-space:nowrap;
  transition:color .15s ease;
}
.pf-link:hover{ color:var(--ink); }
.pf-link::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px 2px 0 0; background:var(--brand);
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.pf-link.is-active{ color:var(--brand); font-weight:600; }
.pf-link.is-active::after{ transform:scaleX(1); }

.pf-cta{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--pf-sans);
  font-size:14.5px; font-weight:600;
  color:#fff; background:var(--brand);
  border:0; border-radius:999px;
  padding:9px 21px;
  margin-left:4px;
  white-space:nowrap;
  transition:.18s ease;
}
.pf-cta:hover{
  color:#fff; background:var(--brand-dark);
  transform:translateY(-1px);
  box-shadow:0 12px 24px -12px var(--brand);
}
.pf-cta i{ font-size:12px; }

/* ── Mobile trigger ── */
.pf-burger{
  display:none;
  width:46px; height:46px; margin-right:6px;
  align-items:center; justify-content:center;
  background:var(--brand-bg); color:var(--brand-dark);
  border:0; border-radius:50%; font-size:17px;
}

/* ══════════════════════════════════════════════
   APP SWITCHER — mega menu
   ══════════════════════════════════════════════ */

/* Spans the full pill. Needs data-bs-display="static" on the toggle so Popper
   leaves the position alone and these rules hold. */
.dropdown-menu.pf-mega{
  --bs-dropdown-padding-y:0;
  --bs-dropdown-border-color:var(--border-light);
  --bs-dropdown-border-radius:18px;
  /* Set directly, not via --bs-dropdown-box-shadow: Bootstrap ships with
     $enable-shadows false, so .dropdown-menu never emits the property. */
  box-shadow:
    0 28px 56px -16px rgba(27,47,128,.30),
    0 10px 22px -8px rgba(17,24,39,.14),
    0 2px 6px -2px rgba(17,24,39,.08);
  /* Colour of the pointer. The panel's top-left corner is plain card white. */
  --pf-point:var(--card);
  position:absolute;
  top:100%; left:0; right:auto;
  width:min(700px, calc(100vw - 40px));
  min-width:0;
  margin-top:20px;
  overflow:visible;
}

/* Pointer back up to the caret that opened this. `left` is hand-measured against
   the caret's centre, so re-check it if the mark size or .pf-switch padding change. */
.pf-mega::before{
  content:''; position:absolute; z-index:1;
  top:-7px; left:81px; width:15px; height:15px;
  background:var(--pf-point);
  border-top:1px solid var(--border-light);
  border-left:1px solid var(--border-light);
  border-radius:4px 0 0 0;
  transform:rotate(45deg);
}

/* Footer copy of the switcher: same panel, opening upward from its button.
   Anchored to the button rather than the footer container, so it stays next
   to what was clicked instead of floating above the whole section. */
.dropdown-menu.pf-mega-up{
  top:auto; bottom:100%; left:0; right:auto;
  width:min(700px, calc(100vw - 48px));
  margin:0 0 14px;
}
.pf-mega-up::before{
  top:auto; bottom:-8px; left:38px;
  border-top:0; border-left:0;
  border-bottom:1px solid var(--border-light);
  border-right:1px solid var(--border-light);
  border-radius:0 0 5px 0;
}

/* Clipping lives here so the pointer above can sit outside the panel */
.pf-mega-grid{
  border-radius:18px; overflow:hidden;
}

/* Order is platform bar, app grid, compare bar. Set by DOM order, not CSS. */
.pf-mega-main{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:16px; }

.pf-mega-compare{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:9px 10px 9px 22px;
  border-radius:11px; background:var(--brand-bg);
}
.pf-mega-compare span{ font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--navy); }
.pf-mega-btn{
  flex:0 0 auto;
  padding:11px 20px; border-radius:8px;
  background:var(--brand); color:#fff;
  font-size:14.5px; font-weight:700;
  transition:.16s ease;
}
.pf-mega-btn:hover{ background:var(--brand-dark); color:#fff; }
.pf-mega-btn i{ font-size:11px; margin-left:6px; }

.pf-mega-apps{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:4px 14px; padding:4px 6px;
}
.pf-mega-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:10px;
  transition:background .14s ease;
}
.pf-mega-item i{ margin-right:4px; }
.pf-mega-item:hover{ background:var(--border-light); }
.pf-mega-item i{
  flex:0 0 30px; text-align:center;
  font-size:20px; color:var(--brand);
}
.pf-mega-name{ font-size:16.5px; font-weight:600; letter-spacing:-.015em; color:var(--ink); }
.pf-mega-item.is-current .pf-mega-name{ color:var(--brand-dark); }
/* Sits right after the name, not pushed to the column edge, so it can't
   be misread as labelling the app in the next column. */
.pf-mega-here{
  flex:0 0 auto; padding:3px 8px; border-radius:5px;
  background:var(--brand-bg); color:var(--brand-dark);
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

.pf-mega-platform{
  display:flex; align-items:center; gap:14px;
  padding:14px 22px; border-radius:11px;
  background:linear-gradient(90deg, #ecfdf5 0%, var(--brand-bg) 46%, #fdf1f4 100%);
  transition:filter .16s ease;
}
.pf-mega-platform:hover{ filter:brightness(1.02) saturate(1.1); }
.pf-mega-platform .pf-platform-mark{ height:19px; width:auto; }
.pf-plus{
  padding:3px 9px; border-radius:5px;
  background:var(--brand); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.pf-mega-platform .cap{ font-size:14.5px; font-weight:600; color:var(--navy); margin-left:6px; }
.pf-mega-platform i{ margin-left:auto; font-size:12px; color:var(--navy); }

/* ══════════════════════════════════════════════
   MOBILE OFFCANVAS
   ══════════════════════════════════════════════ */

.pf-oc{ --bs-offcanvas-width:min(340px, 88vw); border:0 !important; }
.pf-oc .offcanvas-header{ padding:22px 24px 8px; }
.pf-oc .offcanvas-body{ padding:8px 24px 28px; display:flex; flex-direction:column; }
.pf-oc-app{ font-family:var(--pf-sans); font-size:22px; font-weight:700; letter-spacing:-.025em; color:var(--ink); line-height:1; }
.pf-oc-link{
  font-size:17px; font-weight:500; color:var(--body);
  padding:14px 0; border-bottom:1px solid var(--border-light);
}
.pf-oc-link.is-active{ color:var(--brand); font-weight:600; }
.pf-oc .pf-cta{ margin:22px 0 0; justify-content:center; padding:16px 26px; }
.pf-oc-more{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--border);
}
.pf-oc-more h6{
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
}
.pf-oc-more a{
  display:flex; align-items:center; gap:11px;
  padding:9px 0; font-size:15px; color:var(--secondary);
}
.pf-oc-more a i{ width:18px; text-align:center; color:var(--brand); font-size:13px; }

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */

/* Full-bleed band; the container inside lines the content up with the page. */
.pf-foot{
  margin-top:90px;
  background:var(--card);
  border-top:1px solid var(--border-light);
}
.pf-foot-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  padding:56px 0 48px;
}

/* ── Col 1 · identity ── */
.pf-applogo{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 10px; }
.pf-applogo-name{
  font-size:27px; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1.1;
}
.pf-applogo-by{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--muted); white-space:nowrap;
}
.pf-applogo-by img{ height:15px; width:auto; display:block; }

.pf-foot-appdesc{
  margin:14px 0 0; max-width:330px;
  font-size:15px; line-height:1.6; color:var(--body);
}

.pf-foot-switch-wrap{ position:relative; margin-top:20px; }
.pf-youre-on{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  background:var(--card); border:1px solid var(--border); border-radius:999px;
  font-family:var(--pf-sans); font-size:13.5px; color:var(--secondary);
  cursor:pointer; transition:.16s ease;
}
.pf-youre-on b{ font-weight:700; font-size:14.5px; letter-spacing:-.02em; color:var(--ink); }
.pf-youre-on i{ font-size:10px; color:var(--muted); transition:transform .2s ease; }
.pf-youre-on:hover{ border-color:var(--brand-light); background:#f7f8fa; }
.pf-youre-on[aria-expanded="true"]{ background:#eceef4; border-color:var(--border); }
.pf-youre-on[aria-expanded="true"] i{ transform:rotate(180deg); }

/* ── Col 2 · primary call to action ── */
.pf-foot-act h4,
.pf-foot-share h4{
  font-size:19px; font-weight:700; letter-spacing:-.025em; color:var(--ink); margin:0 0 10px;
}
.pf-foot-act p,
.pf-foot-share p{
  font-size:14.5px; line-height:1.6; color:var(--secondary); margin:0 0 20px; max-width:330px;
}
.pf-foot-act .pf-cta{ margin-left:0; }

/* ── Col 3 · share ── */
.pf-share-field{
  display:flex; align-items:center; gap:8px;
  padding:6px 6px 6px 16px;
  border:1px solid var(--border); border-radius:999px;
  background:var(--bg);
  max-width:340px;
}
.pf-share-field input{
  flex:1 1 auto; min-width:0;
  border:0; background:none; outline:none;
  font-family:var(--pf-sans); font-size:14px; color:var(--secondary);
  text-overflow:ellipsis;
}
.pf-share-field button{
  flex:0 0 auto;
  padding:9px 18px; border:0; border-radius:999px;
  background:var(--ink); color:#fff;
  font-family:var(--pf-sans); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:.16s ease;
}
.pf-share-field button:hover{ background:#000; }
.pf-share-field button.copied{ background:var(--give); }

/* ── Lower footer · the ecosystem, not this app ── */
.pf-foot-bar{
  border-top:1px solid var(--border-light);
  background:var(--card);
}
.pf-foot-bar-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 26px;
  padding:22px 0;
  font-size:13.5px; color:var(--muted);
}
.pf-socials{ display:flex; align-items:center; gap:10px; }
.pf-socials a{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--border-light); color:var(--secondary);
  font-size:14px; transition:.16s ease;
}
.pf-socials a:hover{ background:var(--brand); color:#fff; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width:1199.98px){
  .pf-links{ gap:22px; }
  .pf-app{ font-size:22px; }
  .pf-mega-compare span{ font-size:15.5px; }
  .pf-mega-name{ font-size:15.5px; }
}

@media (max-width:991.98px){
  :root{ --pf-pill-h:52px; }
  .pf-nav{ padding:10px 0 6px; }
  .pf-pill{ padding:0 7px 0 0; }
  .pf-links{ display:none; }
  .pf-burger{ display:flex; width:38px; height:38px; font-size:15px; }
  .pf-mark{ height:23px; }
  .pf-switch{ padding:0 15px 0 19px; }
  .pf-app{ font-size:19px; margin-left:15px; }

  /* No room for the banner or a two column list. The offcanvas carries the
     fuller version, so the dropdown falls back to a plain list of apps. */
  .dropdown-menu.pf-mega{ margin-top:14px; }
  .pf-mega-compare{ display:none; }
  .pf-mega-main{ padding:8px; gap:8px; }
  .pf-mega-apps{ grid-template-columns:1fr; gap:2px; padding:0; }
  .pf-mega-platform{ padding:13px 16px; }
  .pf-mega-platform .cap,
  .pf-mega-platform .pf-plus{ display:none; }
  .pf-mega::before{ left:36px; }
  /* Opening upward from the footer there is rarely room for the full list */
  .pf-mega-up .pf-mega-grid{ max-height:min(58vh, 400px); overflow-y:auto; }

  .pf-foot-inner{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:34px 40px; padding:44px 0 38px; }
  .pf-foot-id{ grid-column:1 / -1; }
}

@media (max-width:575.98px){
  .pf-pill{ padding:0 8px 0 0; }
  .pf-switch{ padding:0 13px 0 16px; }
  .pf-app{ font-size:18px; margin-left:13px; }
  .pf-foot-inner{ grid-template-columns:1fr; gap:30px; }
  .pf-foot-bar-inner{ flex-direction:column; align-items:flex-start; }
}

/* ══════════════════════════════════════════════


/* ──────────────────────────────────────────────
   Switcher v2 — leads with the core product's featuresets, each in its
   own colour, then the platform apps underneath.
   Loaded on top of shell.css by index.html and dropdown-v2.html.
   ────────────────────────────────────────────── */

.pf-mega.is-v2{ width:min(720px, calc(100vw - 40px)); }
.is-v2 .pf-mega-main{ padding:0; gap:0; }

/* ── Section chrome ── */
/* Second section drops its top padding so the two groups sit close
   together; with no rule between them 32px read as a hole. */
.v2-sec{ padding:14px 18px; }
.v2-sec + .v2-sec{ padding-top:0; }

/* ── Featuresets: two up, each carrying its own colour ── */
.v2-features{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.v2-feature{
  display:flex; align-items:flex-start; gap:13px;
  padding:13px 14px;
  border:1px solid var(--border-light); border-radius:13px;
  background:var(--card);
  transition:.16s ease;
}
.v2-feature:hover{
  background:var(--f-tint);
  border-color:var(--f-base);
  transform:translateY(-1px);
}
.v2-feature-ico{
  flex:0 0 36px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:15px;
  background:var(--f-tint); color:var(--f-base);
  transition:.16s ease;
}
.v2-feature:hover .v2-feature-ico{ background:var(--f-base); color:#fff; }
.v2-feature-name{
  display:block; font-size:16px; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); line-height:1.2;
}
.v2-feature-desc{
  margin:3px 0 0; font-size:12.5px; line-height:1.45; color:var(--secondary);
}
.v2-feature.is-current{ background:var(--f-tint); border-color:var(--f-base); }
.v2-feature.is-current .v2-feature-ico{ background:var(--f-base); color:#fff; }

/* ── Platform apps: quieter, so the featuresets lead ── */
.v2-apps{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 12px; }
.v2-app{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:9px;
  transition:background .14s ease;
}
.v2-app:hover{ background:var(--border-light); }
.v2-app i{ flex:0 0 26px; text-align:center; font-size:16px; color:var(--brand); }
/* Its own class, not `.v2-app span`, which would also catch the badge */
.v2-app-name{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.v2-app.is-current .v2-app-name{ color:var(--brand-dark); }
.v2-here{
  flex:0 0 auto; padding:3px 8px; border-radius:5px;
  background:var(--brand-bg); color:var(--brand-dark);
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* ── Platform bar, sitting above the two groups ── */
.is-v2 .pf-mega-platform{ margin:14px 14px 0; }

@media (max-width:640px){
  .v2-features,
  .v2-apps{ grid-template-columns:1fr; }
  .v2-feature-desc{ display:none; }
}


/* ──────────────────────────────────────────────
   Header v3 — a coloured page header that belongs to the app you are on,
   with the nav pill floating over it.

   Loaded on top of shell.css. Three things change:
     1. The page header is a full-bleed band in the app's colour, opening
        with enough room for the pill to sit clear of its content.
     2. The nav loses its background entirely and goes fixed, so it shows
        whatever is under it — the header at the top, plain page after that.
        The colour belongs to the header, and does not follow you down.
     3. Everything accented in brand blue takes the app's colour instead.

   Every colour resolves from three properties on <html>, set by
   header-v3.js. Nothing here names an app.
   ────────────────────────────────────────────── */

/* Registering these as real colours is what lets them animate. Without
   @property the swap still works, it just snaps instead of crossfading. */
@property --app-base { syntax:'<color>'; inherits:true; initial-value:#188aec; }
@property --app-dark { syntax:'<color>'; inherits:true; initial-value:#1274c9; }
@property --app-tint { syntax:'<color>'; inherits:true; initial-value:#eef6fe; }

html{
  --app-base:#188aec; --app-dark:#1274c9; --app-tint:#eef6fe;
  transition:--app-base .45s ease, --app-dark .45s ease, --app-tint .45s ease;
}

/* The nav's padding, named because the band has to reserve the same height.
   Pairs with --pf-pill-h from shell.css, which shrinks at the same breakpoint. */
:root{ --v3-nav-pad:14px; }

/* ── The three band treatments ───────────────────
   Each sets what the band is painted with and what colour text on it takes.
   Adding an app needs no work here; adding a treatment needs no per-app work. */

body{ --band-image:none; }

body.band-tint{
  --band-fill:var(--app-tint);
  --on-band:var(--ink);
  --on-band-soft:var(--secondary);
  --on-band-eyebrow:var(--app-dark);
  --band-edge:rgba(17,24,39,.07);
}
body.band-solid{
  --band-fill:var(--app-base);
  --on-band:#fff;
  --on-band-soft:rgba(255,255,255,.85);
  --on-band-eyebrow:rgba(255,255,255,.72);
  --band-edge:transparent;
}
/* Horizontal, so the nav and the band below it paint the same ramp at the
   same x and meet without a seam. A vertical fade would need the band's
   height measured, and would break the moment a headline wrapped. */
body.band-gradient{
  --band-fill:var(--app-base);
  --band-image:linear-gradient(100deg, var(--app-base) 0%, var(--app-dark) 100%);
  --on-band:#fff;
  --on-band-soft:rgba(255,255,255,.85);
  --on-band-eyebrow:rgba(255,255,255,.72);
  --band-edge:transparent;
}

/* ══════════════════════════════════════════════
   NAV — a pill floating over whatever is beneath it
   ══════════════════════════════════════════════ */

/* The nav carries no background of its own. shell.css fades it into the page
   with a gradient hardcoded to the light page; that has to go, and nothing
   replaces it. Whatever the pill happens to be over shows through: the header
   at the top of the page, plain page content once you have scrolled past it.

   Fixed rather than sticky so it takes no space in the flow — the band
   reserves that space itself, below. */
.pf-nav{
  position:fixed; left:0; right:0; top:0;
  padding:var(--v3-nav-pad) 0;
  background:none;
}

/* The pill stays white on every treatment: a card on the saturated bands,
   and on tint or plain page its shadow is what separates it. */
.pf-pill{ background:var(--card); }

/* ── App colour, all the way into the pill ── */
.pf-app:hover{ color:var(--app-base); }
.pf-link.is-active{ color:var(--app-base); }
.pf-link::after{ background:var(--app-base); }

.pf-cta{ background:var(--app-base); }
.pf-cta:hover{ background:var(--app-dark); box-shadow:0 12px 24px -12px var(--app-base); }

.pf-burger{ background:var(--app-tint); color:var(--app-dark); }
.pf-switch:focus-visible{ outline-color:var(--app-base); }

/* ══════════════════════════════════════════════
   SWITCHER — each app's icon in its own colour, so the panel
   doubles as a legend while the palette is being judged.
   Icon colours are inline, set by header-v3.js from the registry.
   Both switcher shapes are covered, so this works on whichever
   panel the page carries.
   ══════════════════════════════════════════════ */

.v2-app.is-current{ background:var(--app-tint); }
.v2-app.is-current .v2-app-name{ color:var(--app-dark); }
.v2-here{ background:var(--app-tint); color:var(--app-dark); }

.pf-mega-item.is-current{ background:var(--app-tint); }
.pf-mega-item.is-current .pf-mega-name{ color:var(--app-dark); }
.pf-mega-here{ background:var(--app-tint); color:var(--app-dark); }

/* The platform bar and the compare button stay brand blue. They are about
   SupportNow as a whole, not the app you happen to be in. */

/* ══════════════════════════════════════════════
   THE BAND — the page header, and the only thing carrying the colour.
   It ends where it ends; the nav does not take the colour with it.
   ══════════════════════════════════════════════ */

/* The nav is fixed, so it reserves no space. The band opens with exactly the
   nav's height so the pill floats clear of the header's own content. */
.v3-band{
  padding-top:calc(var(--pf-pill-h) + var(--v3-nav-pad) * 2);
  background-color:var(--band-fill);
  background-image:var(--band-image);
  border-bottom:1px solid var(--band-edge);
}
/* Vertical only. A `padding` shorthand here would flatten .container's own
   horizontal padding and pull the header's content out of line with the pill.
   The measure is capped on the heading, not the container, for the same reason. */
.v3-head{ padding-top:40px; padding-bottom:66px; }

.v3-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-band-eyebrow);
}
.v3-eyebrow i{ font-size:13px; }

.v3-head h1{
  font-size:clamp(2rem,4.4vw,3.15rem); font-weight:700; letter-spacing:-.03em;
  line-height:1.08; color:var(--on-band);
  margin:16px 0 18px; max-width:820px; text-wrap:balance;
}
.v3-head p{
  font-size:1.12rem; line-height:1.6; color:var(--on-band-soft);
  max-width:560px; margin:0 0 30px;
}

/* Solid on a pale band, reversed on a saturated one. */
.v3-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:999px;
  font-size:15.5px; font-weight:600;
  transition:.18s ease;
}
.v3-cta i{ font-size:12px; }
body.band-tint .v3-cta{ background:var(--app-base); color:#fff; }
body.band-tint .v3-cta:hover{ background:var(--app-dark); color:#fff; transform:translateY(-1px); }
body.band-solid .v3-cta,
body.band-gradient .v3-cta{ background:#fff; color:var(--app-dark); }
body.band-solid .v3-cta:hover,
body.band-gradient .v3-cta:hover{ background:var(--app-tint); color:var(--app-dark); transform:translateY(-1px); }

/* ══════════════════════════════════════════════
   OFFCANVAS + FOOTER — same accents, same tokens
   ══════════════════════════════════════════════ */

.pf-oc-link.is-active{ color:var(--app-base); }
.pf-oc-more a i{ color:var(--app-base); }

.pf-youre-on:hover{ border-color:var(--app-base); }
.pf-socials a:hover{ background:var(--app-base); }


/* ── Responsive. --v3-nav-pad pairs with --pf-pill-h, which shrinks at the
   same breakpoint; the band reserves the sum, so both have to move together. ── */
@media (max-width:991.98px){
  :root{ --v3-nav-pad:11px; }
  .v3-head{ padding-top:30px; padding-bottom:48px; }
}

@media (max-width:575.98px){
  .v3-head{ padding-top:24px; padding-bottom:40px; }
  .v3-head p{ font-size:1rem; }
}

/* ══════════════════════════════════════════════
   APP-SPECIFIC
   ══════════════════════════════════════════════ */

/* The nav is fixed and reserves no space in the flow. A standalone spacer does
   that job for every layout, rather than each page's own wrapper — this app has
   three layouts and pages that supply their own :page_header. */
.pf-nav-spacer{ height:calc(var(--pf-pill-h) + var(--v3-nav-pad) * 2); }
.pf-nav-clear{ padding-top:calc(var(--pf-pill-h) + var(--v3-nav-pad) * 2); }

/* ── Signed-in menus in the pill ──
   Connect's nav is authenticated: saved searches, teams, the account menu and
   an admin menu all hang off it. They keep Bootstrap's dropdown behaviour and
   only take the pill's styling. */
.pf-menu{ position:relative; display:flex; align-self:stretch; align-items:center; }
.pf-menu > .pf-link{ gap:7px; cursor:pointer; background:none; border:0; }
.pf-menu > .pf-link i{ font-size:10px; color:var(--muted); transition:transform .2s ease; }
.pf-menu > .pf-link[aria-expanded="true"]{ color:var(--ink); }
.pf-menu > .pf-link[aria-expanded="true"] i{ transform:rotate(180deg); }

.pf-menu .dropdown-menu{
  --bs-dropdown-min-width:210px;
  border:1px solid var(--border-light); border-radius:14px;
  box-shadow:0 18px 40px -14px rgba(17,24,39,.28), 0 2px 6px -2px rgba(17,24,39,.08);
  margin-top:8px; padding:6px;
}
.pf-menu .dropdown-item{
  border-radius:9px; padding:9px 12px;
  font-family:var(--pf-sans); font-size:14.5px; font-weight:500; color:var(--body);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pf-menu .dropdown-item:hover{ background:var(--app-tint); color:var(--app-dark); }
.pf-menu .dropdown-divider{ margin:5px 8px; border-color:var(--border-light); }

/* The account menu reads as a person, not another nav link. */
.pf-account > .pf-link{
  padding:0 6px 0 14px; margin-left:6px;
  border-left:1px solid var(--border);
  color:var(--body); font-weight:600;
}
.pf-avatar{
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--app-tint); color:var(--app-dark);
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
}

/* Admin sits left of the app's own links, so it reads as a separate concern. */
.pf-admin{ margin-right:auto; }
.pf-admin > .pf-link{ color:var(--muted); }

/* Secondary action next to the CTA — Login, which should not compete with it. */
.pf-ghost{
  display:inline-flex; align-items:center;
  padding:9px 16px; border-radius:999px;
  font-family:var(--pf-sans); font-size:14.5px; font-weight:600;
  color:var(--body); white-space:nowrap;
  transition:.16s ease;
}
.pf-ghost:hover{ background:var(--border-light); color:var(--ink); }

/* styles.scss does not clamp .container here, so the switcher panel is free to
   be wider than the pill; this only guards against a future clamp. */
.pf-mega{ max-width:none; }

/* The offcanvas carries the same account items on small screens. */
.pf-oc-group{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.pf-oc-group h6{
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.pf-oc-group a{ display:block; padding:9px 0; font-size:15px; color:var(--secondary); }
.pf-oc-group a:hover{ color:var(--app-dark); }
.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle; }
  .select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none; }
    .select2-container .select2-selection--single .select2-selection__rendered {
      display: block;
      padding-left: 8px;
      padding-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .select2-container .select2-selection--single .select2-selection__clear {
      position: relative; }
  .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px; }
  .select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none; }
    .select2-container .select2-selection--multiple .select2-selection__rendered {
      display: inline-block;
      overflow: hidden;
      padding-left: 8px;
      text-overflow: ellipsis;
      white-space: nowrap; }
  .select2-container .select2-search--inline {
    float: left; }
    .select2-container .select2-search--inline .select2-search__field {
      box-sizing: border-box;
      border: none;
      font-size: 100%;
      margin-top: 5px;
      padding: 0; }
      .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
        -webkit-appearance: none; }

.select2-dropdown {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051; }

.select2-results {
  display: block; }

.select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0; }

.select2-results__option {
  padding: 6px;
  user-select: none;
  -webkit-user-select: none; }
  .select2-results__option[aria-selected] {
    cursor: pointer; }

.select2-container--open .select2-dropdown {
  left: 0; }

.select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.select2-search--dropdown {
  display: block;
  padding: 4px; }
  .select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box; }
    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
      -webkit-appearance: none; }
  .select2-search--dropdown.select2-search--hide {
    display: none; }

.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0); }

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; }

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 4px; }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px; }
  .select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold; }
  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999; }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      left: 50%;
      margin-left: -4px;
      margin-top: -2px;
      position: absolute;
      top: 50%;
      width: 0; }

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left; }

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  left: 1px;
  right: auto; }

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #eee;
  cursor: default; }
  .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none; }

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px; }

.select2-container--default .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text; }
  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%; }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
      list-style: none; }
  .select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    margin-right: 10px;
    padding: 1px; }
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px; }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px; }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #333; }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
  float: right; }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto; }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto; }

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid black 1px;
  outline: 0; }

.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: #eee;
  cursor: default; }

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
  display: none; }

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa; }

.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: textfield; }

.select2-container--default .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto; }

.select2-container--default .select2-results__option[role=group] {
  padding: 0; }

.select2-container--default .select2-results__option[aria-disabled=true] {
  color: #999; }

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #ddd; }

.select2-container--default .select2-results__option .select2-results__option {
  padding-left: 1em; }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
    padding-left: 0; }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -1em;
    padding-left: 2em; }
    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
      margin-left: -2em;
      padding-left: 3em; }
      .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -3em;
        padding-left: 4em; }
        .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
          margin-left: -4em;
          padding-left: 5em; }
          .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
            margin-left: -5em;
            padding-left: 6em; }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #5897fb;
  color: white; }

.select2-container--default .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px; }

.select2-container--classic .select2-selection--single {
  background-color: #f7f7f7;
  border: 1px solid #aaa;
  border-radius: 4px;
  outline: 0;
  background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
  background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
  background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
  .select2-container--classic .select2-selection--single:focus {
    border: 1px solid #5897fb; }
  .select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px; }
  .select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-right: 10px; }
  .select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #999; }
  .select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: #ddd;
    border: none;
    border-left: 1px solid #aaa;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
    background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
    background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
    .select2-container--classic .select2-selection--single .select2-selection__arrow b {
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      left: 50%;
      margin-left: -4px;
      margin-top: -2px;
      position: absolute;
      top: 50%;
      width: 0; }

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left; }

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  border: none;
  border-right: 1px solid #aaa;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  left: 1px;
  right: auto; }

.select2-container--classic.select2-container--open .select2-selection--single {
  border: 1px solid #5897fb; }
  .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
    background: transparent;
    border: none; }
    .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
      border-color: transparent transparent #888 transparent;
      border-width: 0 4px 5px 4px; }

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
  background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
  background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
  background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
  background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }

.select2-container--classic .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
  outline: 0; }
  .select2-container--classic .select2-selection--multiple:focus {
    border: 1px solid #5897fb; }
  .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
    list-style: none;
    margin: 0;
    padding: 0 5px; }
  .select2-container--classic .select2-selection--multiple .select2-selection__clear {
    display: none; }
  .select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px; }
  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    color: #888;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px; }
    .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #555; }

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  float: right;
  margin-left: 5px;
  margin-right: auto; }

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto; }

.select2-container--classic.select2-container--open .select2-selection--multiple {
  border: 1px solid #5897fb; }

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--classic .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  outline: 0; }

.select2-container--classic .select2-search--inline .select2-search__field {
  outline: 0;
  box-shadow: none; }

.select2-container--classic .select2-dropdown {
  background-color: white;
  border: 1px solid transparent; }

.select2-container--classic .select2-dropdown--above {
  border-bottom: none; }

.select2-container--classic .select2-dropdown--below {
  border-top: none; }

.select2-container--classic .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto; }

.select2-container--classic .select2-results__option[role=group] {
  padding: 0; }

.select2-container--classic .select2-results__option[aria-disabled=true] {
  color: grey; }

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
  background-color: #3875d7;
  color: white; }

.select2-container--classic .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px; }

.select2-container--classic.select2-container--open .select2-dropdown {
  border-color: #5897fb; }
/*! Select2 Bootstrap Theme v0.1.0-beta.7 | MIT License | github.com/select2/select2-bootstrap-theme */
.select2-container--bootstrap {
  display: block;
  /*------------------------------------*\
          #COMMON STYLES
  \*------------------------------------*/
  /**
   * Search field in the Select2 dropdown.
   */
  /**
   * No outline for all search fields - in the dropdown
   * and inline in multi Select2s.
   */
  /**
   * Adjust Select2's choices hover and selected styles to match
   * Bootstrap 3's default dropdown styles.
   *
   * @see http://getbootstrap.com/components/#dropdowns
   */
  /**
   * Clear the selection.
   */
  /**
   * Address disabled Select2 styles.
   *
   * @see https://select2.github.io/examples.html#disabled
   * @see http://getbootstrap.com/css/#forms-control-disabled
   */
  /*------------------------------------*\
          #DROPDOWN
  \*------------------------------------*/
  /**
   * Dropdown border color and box-shadow.
   */
  /**
   * Limit the dropdown height.
   */
  /*------------------------------------*\
          #SINGLE SELECT2
  \*------------------------------------*/
  /*------------------------------------*\
      #MULTIPLE SELECT2
  \*------------------------------------*/
  /**
   * Address Bootstrap control sizing classes
   *
   * 1. Reset Bootstrap defaults.
   * 2. Adjust the dropdown arrow button icon position.
   *
   * @see http://getbootstrap.com/css/#forms-control-sizes
   */
  /* 1 */
  /*------------------------------------*\
      #RTL SUPPORT
  \*------------------------------------*/
}
.select2-container--bootstrap .select2-selection {
  -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);
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555555;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  outline: 0;
}
.select2-container--bootstrap .select2-selection.form-control {
  border-radius: 4px;
}
.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
  -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);
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555555;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.select2-container--bootstrap .select2-search__field {
  outline: 0;
  /* Firefox 18- */
  /**
   * Firefox 19+
   *
   * @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox
   */
}
.select2-container--bootstrap .select2-search__field::-webkit-input-placeholder {
  color: #999;
}
.select2-container--bootstrap .select2-search__field:-moz-placeholder {
  color: #999;
}
.select2-container--bootstrap .select2-search__field::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.select2-container--bootstrap .select2-search__field:-ms-input-placeholder {
  color: #999;
}
.select2-container--bootstrap .select2-results__option {
  /**
   * Disabled results.
   *
   * @see https://select2.github.io/examples.html#disabled-results
   */
  /**
   * Hover state.
   */
  /**
   * Selected state.
   */
}
.select2-container--bootstrap .select2-results__option[role=group] {
  padding: 0;
}
.select2-container--bootstrap .select2-results__option[aria-disabled=true] {
  color: #777777;
  cursor: not-allowed;
}
.select2-container--bootstrap .select2-results__option[aria-selected=true] {
  background-color: #f5f5f5;
  color: #262626;
}
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  background-color: #337ab7;
  color: #fff;
}
.select2-container--bootstrap .select2-results__option .select2-results__option {
  padding: 6px 12px;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__group {
  padding-left: 0;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -12px;
  padding-left: 24px;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -24px;
  padding-left: 36px;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -36px;
  padding-left: 48px;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -48px;
  padding-left: 60px;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -60px;
  padding-left: 72px;
}
.select2-container--bootstrap .select2-results__group {
  color: #777777;
  display: block;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.428571429;
  white-space: nowrap;
}
.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  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, -webkit-box-shadow ease-in-out 0.15s;
  border-color: #66afe9;
}
.select2-container--bootstrap.select2-container--open {
  /**
   * Make the dropdown arrow point up while the dropdown is visible.
   */
  /**
   * Handle border radii of the container when the dropdown is showing.
   */
}
.select2-container--bootstrap.select2-container--open .select2-selection .select2-selection__arrow b {
  border-color: transparent transparent #999 transparent;
  border-width: 0 4px 4px 4px;
}
.select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-color: transparent;
}
.select2-container--bootstrap.select2-container--open.select2-container--above .select2-selection {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-top-color: transparent;
}
.select2-container--bootstrap .select2-selection__clear {
  color: #999;
  cursor: pointer;
  float: right;
  font-weight: bold;
  margin-right: 10px;
}
.select2-container--bootstrap .select2-selection__clear:hover {
  color: #333;
}
.select2-container--bootstrap.select2-container--disabled .select2-selection {
  border-color: #ccc;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.select2-container--bootstrap.select2-container--disabled .select2-selection,
.select2-container--bootstrap.select2-container--disabled .select2-search__field {
  cursor: not-allowed;
}
.select2-container--bootstrap.select2-container--disabled .select2-selection,
.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
  background-color: #eeeeee;
}
.select2-container--bootstrap.select2-container--disabled .select2-selection__clear,
.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove {
  display: none;
}
.select2-container--bootstrap .select2-dropdown {
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  border-color: #66afe9;
  overflow-x: hidden;
  margin-top: -1px;
}
.select2-container--bootstrap .select2-dropdown--above {
  margin-top: 1px;
}
.select2-container--bootstrap .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}
.select2-container--bootstrap .select2-selection--single {
  height: 34px;
  line-height: 1.428571429;
  padding: 6px 24px 6px 12px;
  /**
   * Adjust the single Select2's dropdown arrow button appearance.
   */
}
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
  position: absolute;
  bottom: 0;
  right: 12px;
  top: 0;
  width: 4px;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
  border-color: #999 transparent transparent transparent;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  height: 0;
  left: 0;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  width: 0;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
  color: #555555;
  padding: 0;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder {
  color: #999;
}
.select2-container--bootstrap .select2-selection--multiple {
  min-height: 34px;
  padding: 0;
  height: auto;
  /**
   * Make Multi Select2's choices match Bootstrap 3's default button styles.
   */
  /**
   * Minus 2px borders.
   */
  /**
   * Clear the selection.
   */
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  line-height: 1.428571429;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder {
  color: #999;
  float: left;
  margin-top: 5px;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
  color: #555555;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin: 5px 0 0 6px;
  padding: 0 6px;
}
.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
  background: transparent;
  padding: 0 12px;
  height: 32px;
  line-height: 1.428571429;
  margin-top: 0;
  min-width: 5em;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove {
  color: #999;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 3px;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #333;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
  margin-top: 6px;
}
.select2-container--bootstrap .select2-selection--single.input-sm, .input-group-sm .select2-container--bootstrap .select2-selection--single, .form-group-sm .select2-container--bootstrap .select2-selection--single {
  border-radius: 3px;
  font-size: 12px;
  height: 30px;
  line-height: 1.5;
  padding: 5px 22px 5px 10px;
  /* 2 */
}
.select2-container--bootstrap .select2-selection--single.input-sm .select2-selection__arrow b, .input-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, .form-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
  margin-left: -5px;
}
.select2-container--bootstrap .select2-selection--multiple.input-sm, .input-group-sm .select2-container--bootstrap .select2-selection--multiple, .form-group-sm .select2-container--bootstrap .select2-selection--multiple {
  min-height: 30px;
  border-radius: 3px;
}
.select2-container--bootstrap .select2-selection--multiple.input-sm .select2-selection__choice, .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
  font-size: 12px;
  line-height: 1.5;
  margin: 4px 0 0 5px;
  padding: 0 5px;
}
.select2-container--bootstrap .select2-selection--multiple.input-sm .select2-search--inline .select2-search__field, .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
  padding: 0 10px;
  font-size: 12px;
  height: 28px;
  line-height: 1.5;
}
.select2-container--bootstrap .select2-selection--multiple.input-sm .select2-selection__clear, .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear, .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
  margin-top: 5px;
}
.select2-container--bootstrap .select2-selection--single.input-lg, .input-group-lg .select2-container--bootstrap .select2-selection--single, .form-group-lg .select2-container--bootstrap .select2-selection--single {
  border-radius: 6px;
  font-size: 18px;
  height: 46px;
  line-height: 1.3333333;
  padding: 10px 31px 10px 16px;
  /* 1 */
}
.select2-container--bootstrap .select2-selection--single.input-lg .select2-selection__arrow, .input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow, .form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
  width: 5px;
}
.select2-container--bootstrap .select2-selection--single.input-lg .select2-selection__arrow b, .input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, .form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
  border-width: 5px 5px 0 5px;
  margin-left: -5px;
  margin-left: -10px;
  margin-top: -2.5px;
}
.select2-container--bootstrap .select2-selection--multiple.input-lg, .input-group-lg .select2-container--bootstrap .select2-selection--multiple, .form-group-lg .select2-container--bootstrap .select2-selection--multiple {
  min-height: 46px;
  border-radius: 6px;
}
.select2-container--bootstrap .select2-selection--multiple.input-lg .select2-selection__choice, .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 4px;
  margin: 9px 0 0 8px;
  padding: 0 10px;
}
.select2-container--bootstrap .select2-selection--multiple.input-lg .select2-search--inline .select2-search__field, .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
  padding: 0 16px;
  font-size: 18px;
  height: 44px;
  line-height: 1.3333333;
}
.select2-container--bootstrap .select2-selection--multiple.input-lg .select2-selection__clear, .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear, .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
  margin-top: 10px;
}
.select2-container--bootstrap .select2-selection.input-lg.select2-container--open .select2-selection--single {
  /**
   * Make the dropdown arrow point up while the dropdown is visible.
   */
}
.select2-container--bootstrap .select2-selection.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #999 transparent;
  border-width: 0 5px 5px 5px;
}
.input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single {
  /**
   * Make the dropdown arrow point up while the dropdown is visible.
   */
}
.input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #999 transparent;
  border-width: 0 5px 5px 5px;
}
.select2-container--bootstrap[dir="rtl"] {
  /**
   * Single Select2
   *
   * 1. Makes sure that .select2-selection__placeholder is positioned
   *    correctly.
   */
  /**
   * Multiple Select2
   */
}
.select2-container--bootstrap[dir="rtl"] .select2-selection--single {
  padding-left: 24px;
  padding-right: 12px;
}
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__rendered {
  padding-right: 0;
  padding-left: 0;
  text-align: right;
  /* 1 */
}
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left;
}
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  left: 12px;
  right: auto;
}
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow b {
  margin-left: 0;
}
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder {
  float: right;
}
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  margin-left: 0;
  margin-right: 6px;
}
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto;
}

/*------------------------------------*\
    #ADDITIONAL GOODIES
\*------------------------------------*/
/**
 * Address Bootstrap's validation states
 *
 * If a Select2 widget parent has one of Bootstrap's validation state modifier
 * classes, adjust Select2's border colors and focus states accordingly.
 * You may apply said classes to the Select2 dropdown (body > .select2-container)
 * via JavaScript match Bootstraps' to make its styles match.
 *
 * @see http://getbootstrap.com/css/#forms-control-validation
 */
.has-warning .select2-dropdown,
.has-warning .select2-selection {
  border-color: #8a6d3b;
}
.has-warning .select2-container--focus .select2-selection,
.has-warning .select2-container--open .select2-selection {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  border-color: #66512c;
}
.has-warning.select2-drop-active {
  border-color: #66512c;
}
.has-warning.select2-drop-active.select2-drop.select2-drop-above {
  border-top-color: #66512c;
}

.has-error .select2-dropdown,
.has-error .select2-selection {
  border-color: #a94442;
}
.has-error .select2-container--focus .select2-selection,
.has-error .select2-container--open .select2-selection {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  border-color: #843534;
}
.has-error.select2-drop-active {
  border-color: #843534;
}
.has-error.select2-drop-active.select2-drop.select2-drop-above {
  border-top-color: #843534;
}

.has-success .select2-dropdown,
.has-success .select2-selection {
  border-color: #3c763d;
}
.has-success .select2-container--focus .select2-selection,
.has-success .select2-container--open .select2-selection {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  border-color: #2b542c;
}
.has-success.select2-drop-active {
  border-color: #2b542c;
}
.has-success.select2-drop-active.select2-drop.select2-drop-above {
  border-top-color: #2b542c;
}

/**
 * Select2 widgets in Bootstrap Input Groups
 *
 * When Select2 widgets are combined with other elements using Bootstraps
 * "Input Group" component, we don't want specific edges of the Select2
 * container to have a border-radius.
 *
 * 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
 */
/**
 * Mimick Bootstraps .input-group .form-control styles.
 *
 * @see https://github.com/twbs/bootstrap/blob/master/less/input-groups.less
 */
.input-group .select2-container--bootstrap {
  display: table;
  table-layout: fixed;
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  /**
   * Adjust z-index like Bootstrap does to show the focus-box-shadow
   * above appended buttons in .input-group and .form-group.
   */
}
.input-group .select2-container--bootstrap.select2-container--open, .input-group .select2-container--bootstrap.select2-container--focus {
  z-index: 3;
}

.input-group.select2-bootstrap-prepend .select2-container--bootstrap .select2-selection {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.input-group.select2-bootstrap-append .select2-container--bootstrap .select2-selection {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

/**
 * Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address
 * Multi Select2's height which - depending on how many elements have been selected -
 * may grow taller than its initial size.
 *
 * @see http://getbootstrap.com/components/#input-groups
 */
.select2-bootstrap-append .select2-container--bootstrap,
.select2-bootstrap-append .input-group-btn,
.select2-bootstrap-append .input-group-btn .btn,
.select2-bootstrap-prepend .select2-container--bootstrap,
.select2-bootstrap-prepend .input-group-btn,
.select2-bootstrap-prepend .input-group-btn .btn {
  vertical-align: top;
}

/**
 * Temporary fix for https://github.com/select2/select2-bootstrap-theme/issues/9
 *
 * Provides `!important` for certain properties of the class applied to the
 * original `<select>` element to hide it.
 *
 * @see https://github.com/select2/select2/pull/3301
 * @see https://github.com/fk/select2/commit/31830c7b32cb3d8e1b12d5b434dee40a6e753ada
 */
.form-control.select2-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
}

/**
 * Display override for inline forms
*/
.form-inline .select2-container--bootstrap {
  display: inline-block;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *




 */