/*
 * Foundation 3 compatibility layer for the legacy PowerPhys section pages.
 *
 * The section stylesheets (src/css/app.css, stylesheets/app.css, app.a11y.css) were written on top of
 * foundation.min.css. Load this file after bootstrap.min.css and before app.css so the app styles keep
 * overriding these base rules exactly as they overrode Foundation. Values are ported from
 * src/css/foundation.min.css; Foundation grid classes are mapped onto the migrated Bootstrap classes.
 */

/* ---- Base typography ---- */
body {
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #222;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #2ba6cb;
  text-decoration: none;
  line-height: inherit;
}

a:hover {
  color: #2795b6;
}

.left { float: left; }
.right { float: right; }
.hide { display: none !important; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

p {
  font-weight: normal;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 17px;
}

aside p {
  font-size: 13px;
  line-height: 1.35;
  font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  color: #222;
  text-rendering: optimizeLegibility;
  line-height: 1.1;
  margin-top: 14px;
  margin-bottom: 14px;
}

h1 { font-size: 44px; }
h2 { font-size: 37px; }
h3 { font-size: 27px; }
h4 { font-size: 23px; }
h5 { font-size: 17px; }
h6 { font-size: 14px; }

hr {
  border: solid #ddd;
  border-width: 1px 0 0;
  clear: both;
  margin: 22px 0 21px;
  height: 0;
  opacity: 1;
}

small { font-size: 60%; line-height: inherit; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; }
/* Bootstrap reboot shrinks sub/sup with relative positioning; Foundation used UA defaults */
sub, sup { position: revert; font-size: revert; line-height: revert; vertical-align: revert; }
sub { bottom: revert; }
sup { top: revert; }
code { font-family: revert; font-size: revert; color: revert; word-wrap: revert; font-weight: bold; background: #ff9; }
abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; }
abbr { text-transform: none; }
abbr[title] { text-decoration: revert; }

ul, ol, dl {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 17px;
  list-style-position: outside;
}

ul li ul, ul li ol { margin-left: 20px; margin-bottom: 0; }
ul.no-bullet { list-style: none; }
ol { margin-left: 20px; }
ol li ul, ol li ol { margin-left: 20px; margin-bottom: 0; }

blockquote, blockquote p { line-height: 1.5; color: #6f6f6f; }
blockquote { margin: 0 0 17px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }

/* ---- Forms ---- */
form { margin: 0 0 19.41641px; }

/* Undo Bootstrap reboot so unstyled controls keep browser defaults, as under Foundation */
button, input, optgroup, select, textarea {
  margin: revert;
  font-family: revert;
  font-size: revert;
  line-height: revert;
}

button { border-radius: revert; }

.row form .row { margin: 0 -6px; }
.row form .row :is([class^="col-"], [class*=" col-"]) { padding: 0 6px; }

label {
  font-size: 14px;
  color: #4d4d4d;
  cursor: pointer;
  display: block;
  font-weight: 500;
  margin-bottom: 3px;
}

label.inline { line-height: 32px; margin: 0 0 12px 0; }
label.right { float: none; text-align: right; }

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
  background-color: #fff;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-size: 14px;
  margin: 0 0 12px 0;
  padding: 6px;
  height: 32px;
  width: 100%;
  transition: all 0.15s linear;
}

textarea { height: auto; }
select { width: 100%; }

fieldset {
  border: solid 1px #ddd;
  border-radius: 3px;
  padding: 12px 12px 0;
  margin: 18px 0;
}

fieldset legend {
  float: none;
  width: auto;
  font-size: inherit;
  font-weight: bold;
  background: #fff;
  padding: 0 3px;
  margin: 0 0 0 -3px;
}

/* ---- Tables ---- */
/* Undo Bootstrap reboot table defaults (caption-side:bottom, border-collapse, caption padding/colour, cell borders) */
table { caption-side: revert; border-collapse: revert; }
caption { padding: revert; color: revert; text-align: revert; }
th { text-align: revert; }
thead, tbody, tfoot, tr, td, th { border-color: revert; border-style: revert; border-width: revert; }

table {
  background: #fff;
  border-radius: 3px;
  margin: 0 0 18px;
  border: 1px solid #ddd;
}

table thead, table tfoot { background: #f5f5f5; }

table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td {
  display: table-cell;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
}

table thead tr th, table tfoot tr td {
  padding: 8px 10px 9px;
  font-weight: bold;
  color: #222;
}

table tbody tr:nth-child(even) { background: #f9f9f9; }

table tbody tr td {
  color: #333;
  padding: 9px 10px;
  vertical-align: top;
  border: none;
}

/* ---- Grid: Foundation .row / .columns on top of Bootstrap .row / .col-* ---- */
.row {
  /* Bootstrap's .row > * padding comes from this gutter; Foundation only padded columns (set below) */
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: block;
  width: 940px;
  max-width: 100%;
  min-width: 768px;
  margin: 0 auto;
}

/* Undo Bootstrap's .row > * { width:100%; max-width:100% } for non-column children; :where keeps it overridable */
.row > :where(:not([class^="col-"]):not([class*=" col-"])) {
  width: auto;
  max-width: none;
}

.row .row {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 -15px;
}

.row::before,
.row::after {
  content: " ";
  display: table;
}

.row::after { clear: both; }

[class^="col-"],
[class*=" col-"] {
  float: left;
  min-height: 1px;
  padding: 0 15px;
  position: relative;
}

:is([class^="col-"], [class*=" col-"]) + :is([class^="col-"], [class*=" col-"]):last-child {
  float: right;
}

:is([class^="col-"], [class*=" col-"]) + :is([class^="col-"], [class*=" col-"]).end {
  float: left;
}

:is([class^="col-"], [class*=" col-"]).mx-auto {
  float: none;
}

/* Foundation's .row .offset-by-* outranked component margins such as .panel's */
@media (min-width: 768px) {
  .row .offset-md-1 { margin-left: 8.33333%; }
  .row .offset-md-2 { margin-left: 16.66667%; }
  .row .offset-md-3 { margin-left: 25%; }
  .row .offset-md-4 { margin-left: 33.33333%; }
  .row .offset-md-5 { margin-left: 41.66667%; }
  .row .offset-md-6 { margin-left: 50%; }
  .row .offset-md-7 { margin-left: 58.33333%; }
  .row .offset-md-8 { margin-left: 66.66667%; }
  .row .offset-md-9 { margin-left: 75%; }
  .row .offset-md-10 { margin-left: 83.33333%; }
}

@media only screen and (max-width: 767px) {
  .left, .right { float: none; }

  .row {
    width: auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }

  :is([class^="col-"], [class*=" col-"]) + :is([class^="col-"], [class*=" col-"]):last-child {
    float: left;
  }
}

/* ---- Top bar ---- */
.top-bar {
  background: #222;
  height: 45px;
  line-height: 45px;
  margin: 0 0 30px;
  padding: 0;
  width: 100%;
}

.top-bar > ul .name h1 {
  line-height: 45px;
  margin: 0;
}

.top-bar > ul .name h1 a {
  font-weight: bold;
  padding: 0 22.5px;
  font-size: 17px !important;
}

.top-bar > ul .name img {
  margin-top: -5px;
  vertical-align: middle;
}

.top-bar ul {
  margin-left: 0;
  padding: 0;
  display: inline;
  height: 45px;
  line-height: 45px;
  list-style: none;
}

.top-bar ul > li { float: left; }

.top-bar ul > li a:not(.button) {
  color: #fff;
  display: block;
  font-size: 13px;
  font-weight: bold;
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
}

.top-bar ul.left { float: left; width: auto; margin-bottom: 0; }
.top-bar ul.right { float: right; width: auto; margin-bottom: 0; }

/* ---- Breadcrumbs (ul.breadcrumbs) ---- */
ul.breadcrumbs {
  display: block;
  background: #f6f6f6;
  padding: 6px 10px 7px;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  overflow: hidden;
  margin-left: 0;
}

ul.breadcrumbs li {
  margin: 0;
  padding: 0 12px 0 0;
  float: left;
  list-style: none;
}

ul.breadcrumbs li a,
ul.breadcrumbs li span {
  text-transform: uppercase;
  font-size: 11px;
  padding-left: 12px;
}

ul.breadcrumbs li:first-child a,
ul.breadcrumbs li:first-child span {
  padding-left: 0;
}

ul.breadcrumbs li::before {
  content: "/";
  color: #aaa;
}

ul.breadcrumbs li:first-child::before { content: " "; }
ul.breadcrumbs li.current a { cursor: default; color: #333; }
ul.breadcrumbs li:hover a, ul.breadcrumbs li a:focus { text-decoration: underline; }
ul.breadcrumbs li.current:hover a, ul.breadcrumbs li.current a:focus { text-decoration: none; }

/* ---- Button group (ul.button-group, migrated to ul.powerphys-btn-group) ---- */
ul.powerphys-btn-group {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

ul.powerphys-btn-group::before,
ul.powerphys-btn-group::after {
  content: " ";
  display: table;
}

ul.powerphys-btn-group::after { clear: both; }

ul.powerphys-btn-group li {
  padding: 0;
  margin: 0 0 0 -1px;
  float: left;
}

ul.powerphys-btn-group li:first-child { margin-left: 0; }

/* ---- Panel ---- */
.panel {
  background: #f2f2f2;
  border: solid 1px #e6e6e6;
  margin: 0 0 22px 0;
  padding: 20px;
}

.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.panel.callout {
  background: #2ba6cb;
  color: #fff;
  border-color: #2284a1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.panel.callout a { color: #fff; }
.panel.radius { border-radius: 3px; }

/* ---- Grid width classes (.one-.twelve used outside the migrated .col-* classes, e.g. <table class="twelve">) ---- */
.one,
.row .one {
  width: 8.33333%;
}

.two,
.row .two {
  width: 16.66667%;
}

.three,
.row .three {
  width: 25%;
}

.four,
.row .four {
  width: 33.33333%;
}

.five,
.row .five {
  width: 41.66667%;
}

.six,
.row .six {
  width: 50%;
}

.seven,
.row .seven {
  width: 58.33333%;
}

.eight,
.row .eight {
  width: 66.66667%;
}

.nine,
.row .nine {
  width: 75%;
}

.ten,
.row .ten {
  width: 83.33333%;
}

.eleven,
.row .eleven {
  width: 91.66667%;
}

.twelve,
.row .twelve {
  width: 100%;
}

/* ---- Buttons (.button, .button.secondary, .small, .radius, .disabled ...) ---- */
.button {
  width: auto;
  background: #2ba6cb;
  border: 1px solid #1e728c;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  margin: 0;
  outline: none;
  padding: 10px 20px 11px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.button:hover {
  color: #fff;
  background-color: #2284a1;
}

.button:active {
  box-shadow: 0 1px 0 rgba(0,0,0,0.2) inset;
}

.button:focus {
  box-shadow: 0 0 4px #2ba6cb,0 1px 0 rgba(255,255,255,0.5) inset;
  color: #fff;
}

.button.large {
  font-size: 17px;
  padding: 15px 30px 16px;
}

.button.medium {
  font-size: 14px;
}

.button.small {
  font-size: 11px;
  padding: 7px 14px 8px;
}

.button.tiny {
  font-size: 10px;
  padding: 5px 10px 6px;
}

.button.expand {
  width: 100%;
  text-align: center;
}

.button.primary {
  background-color: #2ba6cb;
  border: 1px solid #1e728c;
}

.button.primary:hover {
  background-color: #2284a1;
}

.button.primary:focus {
  box-shadow: 0 0 4px #2ba6cb,0 1px 0 rgba(255,255,255,0.5) inset;
}

.button.success {
  background-color: #5da423;
  border: 1px solid #396516;
}

.button.success:hover {
  background-color: #457a1a;
}

.button.success:focus {
  box-shadow: 0 0 5px #5da423,0 1px 0 rgba(255,255,255,0.5) inset;
}

.button.alert {
  background-color: #c60f13;
  border: 1px solid #7f0a0c;
}

.button.alert:hover {
  background-color: #970b0e;
}

.button.alert:focus {
  box-shadow: 0 0 4px #c60f13,0 1px 0 rgba(255,255,255,0.5) inset;
}

.button.secondary {
  background-color: #e9e9e9;
  color: #1d1d1d;
  border: 1px solid #c3c3c3;
}

.button.secondary:hover {
  background-color: #d0d0d0;
}

.button.secondary:focus {
  box-shadow: 0 0 5px #e9e9e9,0 1px 0 rgba(255,255,255,0.5) inset;
}

.button.radius {
  border-radius: 3px;
}

.button.round {
  border-radius: 1000px;
}

.button.full-width {
  width: 100%;
  text-align: center;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.button.left-align {
  text-align: left;
  text-indent: 12px;
}

.button.disabled,
.button[disabled] {
  opacity: 0.6;
  cursor: default;
  background: #2ba6cb;
  box-shadow: none;
}

.button.disabled :hover,
.button[disabled] :hover {
  background: #2ba6cb;
}

.button.disabled.success,
.button[disabled].success {
  background-color: #5da423;
}

.button.disabled.success:hover,
.button[disabled].success:hover {
  background-color: #5da423;
}

.button.disabled.alert,
.button[disabled].alert {
  background-color: #c60f13;
}

.button.disabled.alert:hover,
.button[disabled].alert:hover {
  background-color: #c60f13;
}

.button.disabled.secondary,
.button[disabled].secondary {
  background-color: #e9e9e9;
}

.button.disabled.secondary:hover,
.button[disabled].secondary:hover {
  background-color: #e9e9e9;
}

/* ---- Tabs (dl.tabs / ul.tabs-content), driven by initFoundationStyleTabs in powerphys-ui.js ---- */
.tabs {
  list-style: none;
  border-bottom: solid 1px #e6e6e6;
  display: block;
  height: 40px;
  padding: 0;
  margin-bottom: 20px;
}

.tabs.contained {
  margin-bottom: 0;
  margin-left: 0;
}

.tabs dt,
.tabs li.section-title {
  color: #b3b3b3;
  cursor: default;
  display: block;
  float: left;
  font-size: 12px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  padding-right: 9px;
  padding-left: 20px;
  font-weight: normal;
  width: auto;
  text-transform: uppercase;
}

.tabs dt:first-child,
.tabs li.section-title:first-child {
  padding: 0;
  padding-right: 9px;
}

.tabs dd,
.tabs li {
  display: block;
  float: left;
  padding: 0;
  margin: 0;
}

.tabs dd a,
.tabs li a {
  color: #6f6f6f;
  display: block;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0px 23.8px;
}

.tabs dd a:focus,
.tabs li a:focus {
  font-weight: bold;
  color: #2ba6cb;
}

.tabs dd.active,
.tabs li.active {
  border-top: 3px solid #2ba6cb;
  margin-top: -3px;
}

.tabs dd.active a,
.tabs li.active a {
  cursor: default;
  color: #3c3c3c;
  background: #fff;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  font-weight: bold;
}

.tabs dd:first-child,
.tabs li:first-child {
  margin-left: 0;
}

.tabs.two-up dt a,
.tabs.two-up dd a,
.tabs.two-up li a,
.tabs.three-up dt a,
.tabs.three-up dd a,
.tabs.three-up li a,
.tabs.four-up dt a,
.tabs.four-up dd a,
.tabs.four-up li a,
.tabs.five-up dt a,
.tabs.five-up dd a,
.tabs.five-up li a {
  padding: 0 17px;
  text-align: center;
  overflow: hidden;
}

.tabs.two-up dt,
.tabs.two-up dd,
.tabs.two-up li {
  width: 50%;
}

.tabs.three-up dt,
.tabs.three-up dd,
.tabs.two-up li {
  width: 33.33%;
}

.tabs.four-up dt,
.tabs.four-up dd,
.tabs.two-up li {
  width: 25%;
}

.tabs.five-up dt,
.tabs.five-up dd,
.tabs.two-up li {
  width: 20%;
}

ul.tabs-content {
  display: block;
  margin: 0 0 20px;
  padding: 0;
}

ul.tabs-content>li {
  display: none;
}

ul.tabs-content>li.active {
  display: block;
}

ul.tabs-content.contained {
  padding: 0;
}

ul.tabs-content.contained>li {
  border: solid 0 #e6e6e6;
  border-width: 0 1px 1px 1px;
  padding: 20px;
}

ul.tabs-content.contained.vertical>li {
  border-width: 1px 1px 1px 1px;
}

/* ---- Alert boxes ---- */
div.alert-box {
  display: block;
  padding: 6px 7px 7px;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  background-color: #2ba6cb;
  border: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 12px;
  border-radius: 3px;
  text-shadow: 0 -1px rgba(0,0,0,0.3);
  position: relative;
}

div.alert-box.success {
  background-color: #5da423;
  color: #fff;
  text-shadow: 0 -1px rgba(0,0,0,0.3);
}

div.alert-box.alert {
  background-color: #c60f13;
  color: #fff;
  text-shadow: 0 -1px rgba(0,0,0,0.3);
}

div.alert-box.secondary {
  background-color: #e9e9e9;
  color: #505050;
  text-shadow: 0 1px rgba(255,255,255,0.3);
}

div.alert-box a.close {
  color: #333;
  position: absolute;
  right: 4px;
  top: -1px;
  font-size: 17px;
  opacity: 0.2;
  padding: 4px;
}

div.alert-box a.close:hover,
div.alert-box a.close:focus {
  opacity: 0.4;
}

/* ---- Tooltip triggers ---- */
.has-tip {
  border-bottom: dotted 1px #ccc;
  cursor: help;
  font-weight: bold;
  color: #333;
}

.has-tip:hover {
  border-bottom: dotted 1px #196177;
  color: #2ba6cb;
}

.has-tip.tip-left,
.has-tip.tip-right {
  float: none !important;
}

/* ---- Pagination ---- */
/* display:block overrides Bootstrap's flex .pagination */
ul.pagination {
  display: block;
  height: 24px;
  margin-left: -5px;
}

ul.pagination li {
  float: left;
  display: block;
  height: 24px;
  color: #999;
  font-size: 14px;
  margin-left: 5px;
}

ul.pagination li a {
  display: block;
  padding: 1px 7px 1px;
  color: #555;
}

ul.pagination li:hover a,
ul.pagination li a:focus {
  background: #e6e6e6;
}

ul.pagination li.unavailable a {
  cursor: default;
  color: #999;
}

ul.pagination li.unavailable:hover a,
ul.pagination li.unavailable a:focus {
  background: transparent;
}

ul.pagination li.current a {
  background: #2ba6cb;
  color: #fff;
  font-weight: bold;
  cursor: default;
}

ul.pagination li.current a:hover {
  background: #2ba6cb;
}

/* ---- Custom forms (form.custom span.custom.radio/checkbox) ---- */
form.custom span.custom {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  border: solid 1px #ccc;
  background: #fff;
}

form.custom span.custom.radio {
  border-radius: 100px;
}

form.custom span.custom.checkbox:before {
  content: "";
  display: block;
  line-height: 0.8;
  height: 14px;
  width: 14px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  color: #fff;
}

form.custom span.custom.radio.checked:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: #222;
  position: relative;
  top: 3px;
  left: 3px;
}

form.custom span.custom.checkbox.checked:before {
  content: "\00d7";
  color: #222;
}

form.custom div.custom.dropdown {
  display: block;
  position: relative;
  width: auto;
  height: 28px;
  margin-bottom: 9px;
  margin-top: 2px;
}

form.custom div.custom.dropdown ul {
  overflow-y: auto;
  max-height: 200px;
}

form.custom div.custom.dropdown a.current {
  display: block;
  width: auto;
  line-height: 26px;
  min-height: 28px;
  padding: 0;
  padding-left: 6px;
  padding-right: 38px;
  border: solid 1px #ddd;
  color: #141414;
  background-color: #fff;
  white-space: nowrap;
}

form.custom div.custom.dropdown a.selector {
  position: absolute;
  width: 27px;
  height: 28px;
  display: block;
  right: 0;
  top: 0;
  border: solid 1px #ddd;
}

form.custom div.custom.dropdown a.selector:after {
  content: "";
  display: block;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: solid 5px;
  border-color: #aaa transparent transparent transparent;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -2px;
  margin-left: -5px;
}

form.custom div.custom.dropdown:hover a.selector:after,
form.custom div.custom.dropdown.open a.selector:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: solid 5px;
  border-color: #222 transparent transparent transparent;
}

form.custom div.custom.dropdown.open ul {
  display: block;
  z-index: 10;
}

form.custom div.custom.dropdown.small {
  width: 134px !important;
}

form.custom div.custom.dropdown.medium {
  width: 254px !important;
}

form.custom div.custom.dropdown.large {
  width: 434px !important;
}

form.custom div.custom.dropdown.expand {
  width: 100% !important;
}

form.custom div.custom.dropdown.open.small ul {
  width: 134px !important;
}

form.custom div.custom.dropdown.open.medium ul {
  width: 254px !important;
}

form.custom div.custom.dropdown.open.large ul {
  width: 434px !important;
}

form.custom div.custom.dropdown.open.expand ul {
  width: 100% !important;
}

form.custom div.custom.dropdown ul {
  position: absolute;
  width: auto;
  display: none;
  margin: 0;
  left: 0;
  top: 27px;
  margin: 0;
  padding: 0;
  background: #fff;
  background: rgba(255,255,255,0.95);
  border: solid 1px #ccc;
}

form.custom div.custom.dropdown ul li {
  color: #555;
  font-size: 13px;
  cursor: pointer;
  padding: 3px;
  padding-left: 6px;
  padding-right: 38px;
  min-height: 18px;
  line-height: 18px;
  margin: 0;
  white-space: nowrap;
  list-style: none;
}

form.custom div.custom.dropdown ul li.selected {
  background: #cdebf5;
  color: #000;
}

form.custom div.custom.dropdown ul li.selected:after {
  content: "\2013";
  position: absolute;
  right: 10px;
}

form.custom div.custom.dropdown ul li:hover {
  background-color: #cdebf5;
  color: #000;
}

form.custom div.custom.dropdown ul li:hover:after {
  content: "\2013";
  position: absolute;
  right: 10px;
  color: #a3dbec;
}

form.custom div.custom.dropdown ul li.selected:hover {
  background: #cdebf5;
  cursor: default;
  color: #000;
}

form.custom div.custom.dropdown ul li.selected:hover:after {
  color: #000;
}

form.custom div.custom.dropdown ul.show {
  display: block;
}

form.custom .custom.disabled {
  background-color: #ddd;
}

form.custom div.custom.dropdown a.selector {
  height: 30px;
}