body { font-family: -apple-system, lucida grande, segoe ui, roboto, sans-serif;line-height: 1.5em; font-size: 14px; margin: 0; }
h1 { color: #B1B1B1; line-height: 1.3em; margin: 0.5em 0 0.3em; font-weight: 300; }
h1 strong { color: #2C3E50; }
h1 .btn { bottom: 6px; font-size: 12px; margin-left: 10px; position: relative; }
h2 { font-size: 1.3em; margin: 0; }
h1,h2,h3,h4,h5,h6,.head { font-family: -apple-system, lucida grande, segoe ui, roboto, sans-serif; }
p { margin-top: 0; }
pre { text-align: left; }
hr { border: 0; border-bottom: 1px solid; width: 40%; }
.scroll { display: block; overflow: auto; float: left; width: 100% }
table { background: #fff; border-collapse: collapse; border: 2px solid #A09E9E; border-bottom-width: 2px; padding-bottom: 2px; font-size: 12px; text-align: left; width: 100%; }
.nowrap td, .nowrap th { vertical-align: top; white-space: nowrap; }
td.comment { white-space: normal; min-width: 25em; }
td.action, th.action { text-align: center; }
th { background: #F3F6F8; color: #666; font-size: 14px; padding: 10px 14px; }
td { color: #666; padding: 5px 14px; box-sizing: border-box; }
tr:hover { background: #BDECDC !important; color: #222; }
tr:nth-child(even) { background: #F3F6F8; }
#transaction_table th { cursor: pointer }
#pageTable, #userTable, #customerTable, #organizationTable, #gatewayTable { margin-top: 2em; }
#pageTable tr td:nth-child(3) { text-align: left; float: right; }
#pageTable tr th:nth-child(3) { text-align: right; }
#pageTable tr td:nth-child(3) a { border: 1px solid #4A392F;  border-radius: 5px; color: #4A392F; padding: 5px; text-decoration: none; }
#userTable tr td:nth-child(2), #customerTable tr td:nth-child(2), #rolesTable tr td:nth-child(3) { text-align: left; float: right; }
#userTable tr th:nth-child(2), #customerTable tr th:nth-child(2), #rolesTable tr th:nth-child(3) { text-align: right; }
#userTable tr td:nth-child(2) a, #customerTable tr td:nth-child(2) a, #rolesTable tr td:nth-child(3) a  { border: 1px solid #4A392F;  border-radius: 5px; color: #4A392F; padding: 5px; text-decoration: none; }
#userTable tr:hover > td:first-child > .with-tooltip > .tooltip, #customerTable tr:hover > td:first-child > .with-tooltip > .tooltip { opacity: 1; position: static; visibility: visible; }
dl { margin: 0; float: left; display: inline block; margin: 0 3em 1em 0; }
dl:last-child { margin-right: 0; }
dd { margin: 0; color: #777; }
dt { color: #000; font-weight: bold; }
a { color: #00B07D; }
a:hover { color: #333; text-decoration: underline; }
b { color: #C94545; }
img { max-width: 100%; border: 0; }
group:after, .group:after { content: ""; display: table; clear: both; }
.inline, .inline * { display: inline-block; }
::selection { text-shadow: none; background: #4183c4; color: black; }
/* FontAwesome SVG - to show more info in labels */
.svg-inline--fa.fa-info-circle.fa-w-16.with-tooltip + span.tooltip { background-color: #777; display: none; margin-left: .5em; position: absolute; }
.svg-inline--fa.fa-info-circle.fa-w-16.with-tooltip:hover + span.tooltip { display: inline; } 
/* Intercom Launcher */
.intercom-launcher { background: #00B07D !important; }

/***********************************************************
 * Form
 */
input, textarea, button, select { font: inherit; }
form { clear: both; }
label, .label { margin: 0 0 1em; color: #777; display: block; }
h1 label { font-size: initial; line-height: initial; font-weight: initial; margin-bottom: 0; }
label.image { margin: 0; }
input { border: #dfd6d2 solid 1px; border-radius: 2px; }
input, select, label button, label .btn, label select { display: block; margin: 0; }
input.label { font: inherit; padding: 0; border: 1px solid transparent; box-shadow: none; margin: 0; }
input[type=checkbox], input[type=radio] { margin: 0px 5px; }
input[type=checkbox] { vertical-align: middle; }
input::placeholder { color: #b7b7b7; opacity: 1; /* Firefox */ }
button, .btn, .submit, a.submit, .submit:link, .submit:visited { box-sizing: border-box; display: inline-block; min-width: 100px; margin-left: 0; }
button[type=submit], .submit, a.submit, .submit:link, .submit:visited { /* height: 42px; line-height: 42px; */ font-weight: bold; font-size: 97%; }
h1 button { font-size: 70%; }
button a { color: inherit; }
textarea { resize: none; box-sizing: border-box; width: 100%; line-height: 1.5em; }
textarea.code { border-left: 0; border-right: 0; border-radius: 0; padding: 1em; margin: 0; font-family: monospace; font-size: 11px; line-height: 1.6em; background: #333; color: #DDD; font-family: Monaco, monospace; }
fieldset { padding: 10px; border: 1px solid #aaa; border-radius: 3px; }
fieldset.image { box-sizing: border-box; overflow: hidden; margin: 0 0 1em; padding: 0; text-align: center; display: inline-block; }
fieldset.image fieldset { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15),transparent 0 0 0; border: 0;
  border-top: 1px solid #aaa; border-radius: 0; margin: -6px 0 0; font-size: 90%; line-height: 1.4em; padding: 10px; text-align: left; }
fieldset.image.empty fieldset { border: 0; box-shadow: none; margin: 0; }
fieldset.image input { display: block; }
fieldset.image img { margin: 0px; max-width: 100%; }
fieldset.image p { margin: 0; font-size: 90%; line-height: 1.4em; }
fieldset.image .btn.customfile-upload { height: 40px; line-height: 40px; display: block; text-align: center; margin: 0 auto 1em; font-weight: bold; overflow: hidden; vertical-align: top; }
fieldset.image input.customfile-filename { border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; width: 100%; text-align: center; padding: 5px 0; margin: -9px 0 0; }

@media screen and (max-width: 800px) {
    header a { font-size: 1.6vmin; }
}

@media screen and (max-width: 992px) {
    input[name='page_search'], input[name='member_search'], input[name='owner_search'], input[name='organization_search'], input[name='gateway_search'] { width: 100% !important; }
    td { padding: 0px; }
    header a { border-top: 0px !important; }
    header a.active { border-top: none !important; }
    table { table-layout: fixed; }
    table tr { width: 100%; }
    table tr td:first-child { width: 70%; overflow: hidden; }
    table tr td:nth-child(2)  { width: 169px; overflow: hidden; }
    .burger-x { display: block !important; }
    [aria-controls="pageTable"] { width: 100%; }
    .menu { width: 100%; background-color: #353535; display: none; }
    td { padding: 5px; overflow: hidden; }
    td a { margin-left: 5px; }
    .menu a:hover { color: black !important; background-color: #c1b6ae !important; }
    .menu a { color: #c1b6ae !important; }
    .menu li { border-bottom: 1px solid #c1b6ae; float: none !important; text-align: left; }
    .menu li a { padding-left: 15px !important; border-top: none !important; top: -3px; }
    header a { font-size: 14px; width: 100%; height: 56px; }
    .user { top: 0px; right: 0px; position: absolute; padding-top: 20px; margin-top: 0 !important; }
    .mobilewrapper { margin: 0 !important; }
    .user { margin-right: 15px; }
    .dropdownmenu { right: 0; top: 60px !important; }
    .quarry-logo a { float: none; top: 4px; }
    #page_name { width: 100%; }
    input[type=checkbox] { width: auto; }
    input:not([type=radio]):not([name='current_site']):not([name='owner[login]']):not([name='owner[password]']) { width: 100%; }
    select { width: 100% }
}

@media screen and (min-width: 591px) {
  group label, .group label { /* float: left; */ margin-right: 8px; display: inline-block; }
  group button, .group button { margin-top: 1.9em; margin-bottom: 0; }
}

/***********************************************************
 * Navigation
 */
subnav { overflow: hidden; display: inline-block; }
subnav li, .subnav-item { list-style-type: none; margin-top: 0; margin-bottom: 0; line-height: 56px; height: 56px; float: left; }
subnav a, subnav a:hover { text-decoration: none; font-weight: 400; color: inherit; }.menu a { text-decoration: none; }
subnav a:hover, subnav a.active { background: #F3F6F8; }[class^="navbar-"], [class*=" navbar-"] { margin-top: -2px; font-weight: 300; padding: 0 0 10px; }
.flexible { height: auto; padding-top: 1em; }
.navbar-a a { border-top: 2px solid transparent; }
.navbar-a a.active { background: none; font-weight: bold; }
.navbar-a a:hover { border-top: 2px solid #535455; }
.navbar-a a.active, .navbar-a a:hover { border-top: 2px solid #535455; }
@media screen and (max-width: 450px) {
  .navbar-a { height: auto; }
  .navbar-a subnav li, .navbar-a subnav a { display: block; float: none; width: 100%; }
  .navbar-a subnav { width: 100%; }
}
.navbar-b { background: #68AEC4; }
.navbar-c {
  text-align: center;
  background: #353535;
  color: #FFF;
  font-weight: bold;
  padding: 0 !important;
}
.ui-menu .ui-menu-item { border-radius: 5px; }
.navbar-c select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  width: 100%;
  text-align: center;
  background: transparent;
  color: #FFF;
  font-weight: bold;
}
.navbar-c option { color: #333; background: #fff; }
.navbar-x { border-bottom: 2px solid #ECF0F1; }
subnav a { height: 56px; display: inline-block; padding: 0 10px; }
subnav li:nth-last-child(n+8) a,
subnav li:nth-last-child(n+8) ~ li a {
  padding: 0 8px;
}
.close-icon { cursor: pointer; float: right; height: 20px; margin-right: 1em; position: relative; }
/* Burger menu animation */
.burger-x {
  display: none;
  float: left;
  position: absolute;
  width: 30px;
  height: 30px;
  margin: 15px;
  z-index: 1;
}
.burger-x input[type="checkbox"] {
  cursor: pointer;
  position: absolute;
  filter: alpha(opacity=0);
  margin: 0px;
  opacity: 0;
  width: 100% !important;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
.burger-x input[type="checkbox"]:checked ~ .top, .burger-x input[type="checkbox"]:checked ~ .bottom { top: 50%; }
.burger-x input[type="checkbox"]:checked ~ .top {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.burger-x input[type="checkbox"]:checked ~ .bottom {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.burger-x input[type="checkbox"]:checked ~ .middle {
  filter: alpha(opacity=0);
  opacity: 0;
}
.burger-x span {
  position: absolute;
  display: block;
  width: 30px;
  height: 2px;
  background-color: #353535;
  -webkit-transition: all .1s;
  -moz-transition: all .1s;
  -ms-transition: all .1s;
  -o-transition: all .1s;
  transition: all .1s;
  z-index: -1;
}
.burger-x .top { top: 15%; }
.burger-x .middle { top: 50%; }
.burger-x .bottom { top: 85%; }

.quarry-logo { text-align: center; position: relative; top: -5px; }

.quarry-logo a:hover { cursor: pointer; }

@media screen and (min-width: 1000px) {
  .quarry-logo { margin-right: 16px; overflow: auto; float: left; overflow: visible; }
}
@media screen and (min-width: 800px) {
  [class^="navbar-"], [class*=" navbar-"] { height: 54px; padding: 0; }
  subnav li, .subnav-item { display: block; float: left; background: inherit; }
  .flexible { height: auto; padding-top: 1em; }
  header { padding: 0; }
  header a:active, header a:focus { outline: 0; }
  header h1 { margin-left: 0; padding-left: 0; }
  .sidebar {
    float: left;
    width: 18%;
    border: 1px solid #EEE;
    border-radius: 2px;
    padding: 0 .7em;
  }
  .content.with-sidebar {
    float: right;
    width: 79%;
  }
}

/***********************************************************
 * Dashboard Header
 */
header { border-bottom: 2px solid #c1c1c1; height: auto; }
header h1 { font-weight: 400; font-size: 28px; margin-right: 19px; }
header h1 a:hover { text-decoration: none; border: 0; }
header h1 img { position: relative; top: -2px; left: -2px; }
header a { text-decoration: none; font-weight: 400; color: inherit; position: relative; z-index: 1; line-height: 52px; height: 56px; border-top: 3px solid transparent; }
header.site { overflow: hidden; border-bottom: none; background: #353535; }
header.site h1 { color: #fff; font-size: 1.35em; }
.current_site { background: #353535; border: none; color: white; width: initial; float: left; font-size: 1.35em; height: 54px;
                             -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 0; }
span[name='arrow_down'] { color: #b7b7b7; cursor: pointer; padding-top: 5px; float: left; margin-top: 13px; }

/***********************************************************
 * Dashboard Footer
 */
footer { padding: 50px 0 0; color: #777; font-weight: 300; overflow: hidden; width: auto; margin-left: 20%; font: 11px/1.7 lucida grande, segoe ui, sans-serif; }
footer a { color: inherit; }
footer .copyright-group { line-height: 1.5em; margin-bottom: 2em; }
footer .copyright a { text-decoration: underline; margin-left: .4em; }
/*footer img { display: inline-block; float: left; margin: 0 2em 0 0; }*/
footer img { float: left; margin: 0 2em 0 0; }
footer contact { display: inline-block; margin: 0 0 3em; }
footer dl { margin: 0; display: block; float: none !important; }
footer dt, footer dd { display: inline; }
footer dt { color: inherit; margin-right: .4em; }
footer .legal { font-size: 9.5px; }
footer .tiny-wrapper .beta { margin-bottom: -1.5em; }
footer .beta { float: right; display: relative; display: block; z-index: 1; }
footer i { margin: 0 0 -3px .5em; display: inline-block; width: 32px; height: 14px;
  background: currentColor; border-radius: 10px; -webkit-transition: background .5s; transition: background .5s; }
footer i::before { content: " "; display: block; width: 20px; height: 16px; background: #333;
  border-radius: 10px; margin: -1px 0 0; position: relative; left: 0; -webkit-transition: left .5s; transition: left .5s; }
footer a:hover i { background: #9C9C9C; }
footer a:hover i::before { left: 12px; }
footer .not_main i { margin-left: 12px; background: #9C9C9C; }
footer .not_main i::before { left: 12px; }
footer .not_main a:hover i { background: #777; }
footer .not_main a:hover i::before { left: 0; }
footer .beta p { display: none; }
footer .current_environment { background: #C1B6AE; color: #4A392F; padding: 2px 7px; border-radius: 2px; }
@media screen and (max-width: 649px) {
  footer img, footer contact { float: none; display: block; }
  footer .beta, footer contact, footer .copyright, footer .legal { float: none; margin: 1.7em 0 0; }
  footer .tiny-wrapper .beta { margin-bottom: 0; }
}
@media (max-width: 1300px) {
  footer { margin-left: 5% !important; }
}
/***********************************************************
 * Dashboard Content
 */
.wrapper, .wide-wrapper, .tiny-wrapper { margin: 0 18px; display: block; }
.mobilewrapper { height: 56px; }
header .wrapper, header .wide-wrapper { position: relative; }
@media screen and (min-width: 650px) {
  .tiny-wrapper { width: 545px; margin: 0 auto; }
}
@media screen and (min-width: 650px) { .tiny-wrapper { width: 545px; margin: 0 auto; } }
@media screen and (min-width: 1024px) { .wrapper, .wide-wrapper, .tiny-wrapper { margin: 0 50px; } }
.dash-alert { background-color: #262830; color: #FFF !important; border-top: 2px solid #1c1c21; padding: 1em 0; margin-top: -2px; margin-bottom: 20px; text-align: center; }
.dash-alert a { color: white; text-decoration: underline; }
.login .alert { text-align: center; background: #D62828; padding: 2em; font-weight: bold; text-shadow: 0 1px #000; margin-bottom: 5%; box-shadow: 3px 3px #502323; }
.login.has-alert { padding-top: 0; }
.dash-alert .btn:last-child { margin-bottom: .75em; }
.dash-alert .not-allowed { line-height: 2.5em; padding: 1.5em; }
.dash-alert .not-allowed a { margin: 0 1em; }
.dash-alert * { color: inherit; }
#alert-details { height: 0px; overflow: hidden; }
#alert-details:target { height: auto; overflow: initial; text-align: left; margin-bottom: 2em; }
#alert-details pre { background: rgba(0,0,0,0.2); border-radius: 2px; padding: .5em 1em; margin: 0 -1em; }
#alert-details h3 { font-family: monospace; }

.sidebar { border: 1px solid #EEE; border-radius: 2px; padding: 0 .7em; }

menu { padding: 0; margin: 1.5em 0; }
menu h2 { margin: -1px -.55em 0.7em; color: #F9F7F5; font-size: 1.4em; background: #756155; padding: 0.4em 0.5em; border-top-left-radius: 2px; border-top-right-radius: 2px; font-weight: normal; }
menu dt { font-weight: inherit; color: #B5AAAA; margin: 0.2em 0; }
menu ul { margin: 0 0 1em; padding: 0; list-style: none; }
menu li { border-top: 1px solid #EFEFEF; line-height: 1.1em; padding: 0.4em 0; }

.sentinel .head { background-image: none; background: #F3F6F8; }
.lieutenant { background: #f3f6f8; border-color: #9C9C9C; }

.hidden { display: none; }

.brownbutton, .brownbutton.inverse {
  box-shadow: none; box-sizing: border-box; font-weight: bold; height: 40px; margin-bottom: 0; margin-top: 1em;
  min-width: 9em; text-transform: uppercase; -webkit-box-shadow: none; }
.brownbutton, .brownbutton.inverse:hover, .brownbutton:link, .brownbutton:visited {
  background: white; border: 1px solid #00B07D; color: #00B07D; }
.brownbutton:hover, .brownbutton.inverse { background: #00B07D; border: 1px solid #00B07D; color: white; }
.brownbutton:focus { background: #eee; border: 1px solid #00B07D; -webkit-box-shadow: none; box-shadow: none;
  color: #00B07D; font-weight: bold; outline: none; text-transform: uppercase; }
.brownbutton:active { background-color: white; -webkit-box-shadow: none; box-shadow: none; }

.add i { font-style: normal; display: inline-block; height: 28px; width: 29px; background: #00B07D; border-radius: 100%; color: #fff; line-height: 24px; text-align: center; font-size: 24px; font-weight: 300; text-indent: 1px; margin: 0 .4em; top: 3px; position: relative; }

/***********************************************************
 * Pages
 */

.button {
    border: 1px solid #353535;
    border-radius: 5px;
    color: #353535;
    padding: 5px;
    text-decoration: none !important;
}
.button:hover { color: #353535; }

/* Page Search */
/* input[name='page_search'],  */
input[name='member_search'], input[name='owner_search'], input[name='roles_search'], input[name='customer_search'], input[name='organization_search'], input[name='gateway_search'] {
    width: 70%;
    border-bottom: 2px solid #c1c1c1 !important;
    border: 0;
    border-radius: 0;
    margin-top: 2em;
    padding-left: 30px;
    font-weight: bold;
}
input[name='page_search']::placeholder, input[name='member_search']::placeholder, input[name='owner_search']::placeholder, input[name='roles_search']::placeholder, input[name='customer_search']::placeholder, input[name='organization_search']::placeholder, input[name='gateway_search']::placeholder { font-weight: normal; }
ul.ui-autocomplete { border: 2px solid #787475; border-radius: 5px; top: -2px; }
li.ui-state-focus { border: 0 !important; margin: auto !important; background: #F3F6F8 !important; }
.ui-widget { font-family: inherit !important; }
.mag { float: left; margin-left: 8px; margin-top: -24px; position: relative; z-index: 2; color: #B1B1B1; }

/* Transaction Report */

.ui-state-default {
  border: 1px solid #D8D2CF !important;
  background: #F1EFEC !important;
  border-radius: 2px !important;
  box-shadow: inset 0 1px #FBFAF9 !important;
}
.ui-state-default:hover {
  background: #00B07D !important;
  border: 1px solid #00B07D !important;
  color: #fff !important;
  box-shadow: none !important;
}
.ui-state-hover { background: #F3F6F8 !important; }
.sentinel.csv { float: left; width: 100%; }

/***********************************************************
 * Transactions
 */

.scroll td {
  border-bottom: 1px solid white;
}
.refunded td {
  background: #DEE5E6;
}
.selected td,
.selected:hover td {
  background: #B3D7E2;
}
.selectedtotal {
  position: fixed;
  bottom: 0;
  right: 0;
}

.refund {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

/* "Views" */

.modal { background: #FFF; background: rgba(255, 255, 255, 0.93); width: 100%; z-index: 1;
         position: absolute; position: fixed; left: 0; right: 0; top: 0; bottom: 0; }
         .modal .wrapper { padding-top: .5em; }
.modal .options { position: fixed; top: 90px; bottom: 35px; overflow: scroll; }
@media screen and (min-width: 1024px) { .modal .options { width: 920px; margin: 0 auto; } }
.closemodal { position: absolute; top: 7px; right: 13px; }

.modal2 { background: #FFF; background: rgba(255, 255, 255, 0.93); width: 100%; z-index: 1;
         position: absolute; position: fixed; left: 0; right: 0; top: 0; bottom: 0; }
         .modal2 .wrapper { padding-top: .5em; }
.modal2 .options2 { position: fixed; top: 90px; bottom: 35px; overflow: scroll; }
@media screen and (min-width: 1024px) { .modal2 .options2 { width: 920px; margin: 0 auto; } }
.closemodal2 { position: absolute; top: 7px; right: 13px; }

/***********************************************************
 * Login
 */
header.login { background: #864c27; padding: 14px 0; border: 0; }
header.login h1 { text-align: center; float: none; margin: 0; color: #fff; }
form.login { background: #00B07D; padding: 8% 0 16%; color: #FFF; min-height: 56vh; overflow: hidden; }
form.login label { text-transform: uppercase; font-weight: 900; letter-spacing: 1px; font-size: 80%; margin-top: 3px; margin-left: 9px; color: #332108; }
form.login h1 { color: #fff; text-align: center; }
form.login button { padding: 0 2em; display: block; margin: 16px auto; width: 150px; border: 0; }
form.login input { height: 28px; font-size: 15px; text-indent: .2em; width: 92%; box-sizing: initial; border: 0; }
form.login input.invalid { border: 4px solid #F92F2F; margin: 1px 0 0 -4px; box-shadow: 3px 3px #502323, inset 0 1px 2px rgba(0, 0, 0, 0.25); }
form.login a { color: #fff; }
form.login a:hover { color: #fff; }
a.forgotpassword { display: block; margin: 10px 0 0; font-size: 0.9em; font-weight: 300; text-align: center; width: 138px; border: 1px solid; margin: auto; text-decoration: none; }

@media screen and (min-width: 350px) {
  form.login h1, form.login label { margin-left: auto; margin-right: auto; width: 318px; }
  form.login input { height: 28px; font-size: 15px; width: 300px }

  form.login .login-submit { width: 318px; margin: auto; }
  form.login .login-submit button { float: left; width: 170px; line-height: 41px; margin: 1.15em 1px 0 0; height: 43px; }
  form.login .login-submit .forgotpassword { float: right; margin: 1.2em 1px 0 0; line-height: 41px; border-radius: 3px; }
}

.tab, tab { min-width: 1px } /* fix smaller display sizes */

/***********************************************************
 * Print
 */
@media print {
  .noprint, header, footer, [class^="navbar-"], [class*=" navbar-"], .tabset { display: none; }
}

/***********************************************************
 * User Menu
 */
 .user {
    cursor: pointer;
    color: black;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 600;
    position: absolute;
    list-style: none;
    right: 0;
    margin-top: 17px;
}
 .add {
    color: #333;
    cursor: pointer;
    /*display: inline-block; /*inline block ignored due to float */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 1px;
    list-style: none;
    right: 0;
    margin-top: 0;
    position: relative;
    float: right;
    text-decoration: none !important;
    letter-spacing: .5px;
}
.add:hover { color: #00B07D; }
.user img { height: 8px; }
.dropdownmenu {
    background: white;
    border: 2px solid #c1c1c1;
    border-top: none;
    border-radius: 0 0 4px 4px;
    display: none;
    position: absolute;
    right: -23px;
    z-index: 10;
    width: auto;
    float: right;
    top: 56px;
 }

.alphabetTable {
    cursor:pointer;
    text-align: center;
    padding: 5px;
}
 .alphabetTable:hover {
    background: #222;
    color:white;
    border: 2px solid #222;
 }
 .activeAlphabet {
    background: #222;
    color:white;
    border: 2px solid #222;
}

.dropdownmenu li { overflow: auto; list-style: none; padding: 0px; margin: 0 -2px; }
.dropdownmenu li:last-child { margin-bottom: -2px; }
.dropdownmenu li:last-child a { display: block; padding-bottom: .8em; border-radius: 0 0 2px 2px; }
.dropdownmenu li:last-child a:hover { padding-bottom: .46em; }
.dropdownmenu a { color: black; cursor: pointer; float: right; text-align: left; text-decoration: none; margin: 0px; padding: 0 1em .3em; display: block; width: 100%; height: 100%; line-height: 1.6em; }
.dropdownmenu a:hover { background-color: #333; color: white; }