/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
/* based on "visually-hidden" mixin in LDS for accessibility goals */
/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
/* Do not edit */
.listbox {
  max-width: 1024px;
  margin: auto;
}
.listbox h1 {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: normal;
}
.listbox h2 {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  font-size: 1.8rem;
  margin: 30px 0 10px;
}
.listbox .list {
  width: 100%;
}
.listbox .box {
  border: 1px solid #ddd;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  background: #f3f1ef;
  margin-bottom: 20px;
  padding: 20px;
  position: relative;
}
.listbox .list-box h1, .listbox .list-box h3 {
  font-size: 20px;
  font-size: 2rem;
  margin-bottom: 7px;
  color: rgb(14, 93, 145);
  text-shadow: 1px 1px 1px #fff;
}
.listbox .list-box .text-link {
  position: absolute;
  right: -1px;
  bottom: -1px;
  padding: 20px 20px 8px 20px;
  text-align: right;
  min-width: 100px;
  border-bottom: 3px solid;
  color: #3e7da7;
  outline: 0;
}
.listbox .list-box .text-link:hover {
  color: rgb(14, 93, 145);
}
.listbox .list-box .text-link [class*=" icon-"], .listbox .list-box .text-link [class^=icon-] {
  margin-right: 10px;
}
.listbox .list-box a {
  min-height: 150px;
}
.listbox .list-box .box {
  padding-left: 40px;
}
.listbox .list-box .box:before, .listbox .list-box .box:after {
  content: "";
  height: 37.5px;
  border: solid transparent;
  border-top-width: 18.75px;
  border-bottom-width: 18.75px;
  position: absolute;
  left: -1px;
  top: 54px;
  z-index: 2;
}
.listbox .list-box .box:before {
  border-left-color: #ddd;
  width: 20px;
  border-right-width: 10px;
  border-left-width: 10px;
  left: 0px;
}
.listbox .list-box .box:after {
  border-left-color: white;
  width: 20px;
  border-right-width: 10px;
  border-left-width: 10px;
}
.listbox.loading .loading {
  display: inline-block;
}
.listbox.loading .list, .listbox.loading .empty-list, .listbox.loading .available-list {
  display: none;
}
.listbox.loaded .list, .listbox.loaded .available-list {
  display: inline-block;
}
.listbox.loaded .loading, .listbox.loaded .empty-list {
  display: none;
}
.listbox.empty .empty-list {
  display: inline-block;
}
.listbox.empty .loading, .listbox.empty .list, .listbox.empty .available-list {
  display: none;
}
/*# sourceMappingURL=listbox.css.map */