obBase.css

/*========== scroll bars ==========*/
#obContainer::-webkit-scrollbar {
  width: 8px;
}

#obContainer::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #44697E;
}

.popMenu-notificationsContent::-webkit-scrollbar,
.chatConversationHeads::-webkit-scrollbar,
.chatConversationContent::-webkit-scrollbar,
#sideBar textarea::-webkit-scrollbar {
  width: 6px;
}


.popMenu-notificationsContent::-webkit-scrollbar-thumb,
.chatConversationHeads::-webkit-scrollbar-thumb,
.chatConversationContent::-webkit-scrollbar-thumb,
#sideBar textarea::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #3E3E3E;
}

.customThemeScrollbar::-webkit-scrollbar {
  width: 8px;
}

.customThemeScrollbar::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #08324A;
}

.noScrollBar::-webkit-scrollbar {
  width: 0 !important;
}

.popMenu-notificationsContent::-webkit-scrollbar {
  width: 8px;
}

.popMenu-notificationsContent::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #3E3E3E;
}

/*========== base styles ==========*/
body {
  background-color: rgb(6,55,83);
  overflow: hidden;
  /*fonts*/
  color: rgb(255, 255, 255);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  /*-webkit-font-smoothing: subpixel-antialiased;*/
  letter-spacing: 0.4px;
  line-height: 1.2;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
  opacity: .85;
  transition: opacity .15s cubic-bezier(0, 0, 0.2, 1);
  cursor: pointer;
  -webkit-user-drag: none;
}

a:hover,
a:focus {
  opacity: 1;
  text-decoration: underline;
}

a:active {
  opacity: .75;
}

p a {
  text-decoration: underline;
}

p {
  white-space: pre-line;
  margin: 0 0 1em 0;
}

p:last-child {
  margin-bottom: 0;
}

hr {
  border: solid 1px rgba(255,255,255,0.08);
  width: 100%;
}

ul {
  margin: 0;
}

input {
  outline: none;
  font-size: 14px;
}

input::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.txt-placeholder,
.fieldItem .txt-placeholder {
  opacity: .5;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
select,
textarea {
  border: none;
  color: #000;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  font-size: 14px;
  font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

input[type=range]{
  -webkit-appearance: none;
  width: 100%;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 90%;
  height: 6px;
  background: #ccc;
  border: none;
  border-radius: 4px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: #777 1px solid;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #eee;
  margin-top: -4px;
}

input[type=range]:focus {
  outline: none;
}

textarea {
  background: none;
  outline: none;
  -webkit-appearance: none;
  width: 100%;
  resize: none;
  box-sizing: border-box;
  border: 1px solid transparent;
  transition: border 0.3s;
}

textarea:focus {
  border: 1px solid #fff;
  outline: none;
}

form {
  margin: 0;
}

/*========== typography ==========*/

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  margin: 0;
  font-weight: 700;
  -webkit-user-select: none;
  cursor: default;
}

h1,h2,h3,
.h1,.h2,.h3 {
  margin-bottom: 20px;
  line-height: 1.2;
}

h4,h5,h6,
.h4,.h5,.h6 {
  margin-bottom: 10px;
  line-height: 1;
}

h3, .h3 {
  font-size: 18px;
}

h4, .h4 {
  font-size: 17px;
}

h5, .h5 {
  font-size: 15px;
}

h6, .h6 {
  font-size: 15px; /* TODO: refactor to remove h6 since it is identical to h5 */
}

.fieldItem-textarea h2, .fieldItem-textarea h3, .editableContent h2, .editableContent h3 {
  margin-top: 30px;
}

.fieldItem-textarea h2:first-child, .fieldItem-textarea h3:first-child, .editableContent h2:first-child, .editableContent h3:first-child {
  margin-top: 0;
}

.note {
  /* use for instructions and incidental text */
  /*font-style: italic;*/
  font-size: 9px;
  opacity: 0.50;
}

[class *= "ion-"]:before {
  font-size: 1.2em;
  pointer-events: none;
}

.txt-center {
  text-align: center;
}

#ov1 .txt-fade {
  opacity: 0.75;
}

#ov1 .unfilled {
  opacity: 0.35;
}

#ov1 .div-fade {
  opacity: 0.50;
}

#ov1 .div-fadeExtra {
  opacity: 0.3;
}

.txt-lowleading {
  line-height: 1.2;
}
.txt-unleaded {
  line-height: 1;
  margin-bottom: 0;
}

#ov1 .unbold {
  font-weight: 400;
}

#ov1 .allCaps {
  text-transform: uppercase;
}

.noOverflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.noWrap {
  white-space: nowrap;
}

.clamp2 {
  /* adds an ellipses to the end of wrapped text after 2 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.clamp4 {
  /* adds an ellipses to the end of wrapped text after 4 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.txtRow2 {
  /* limits an element to being 2 rows of text tall */
  line-height: 1.25em;;
  height: 2.5em;
}


/*========== structure classes ==========*/

#appFrame {
  position: fixed;
  width: 100%;
  height: 100%;
}

#contentFrame {
  height: 100%;
  width: 100%;
  position: relative;
}

#pageNav {
  position: relative;
  -webkit-app-region: no-drag;
}

#pageNavBar {
  position: relative;
  padding: 0 8px;
  height: 46px;
  z-index: 1;
}

#obContainer {
  transition: width 0.5s ease;
  width: calc(100% - 47px);
  height: calc(100% - 74px);
  overflow-y: scroll;
  padding-top: 20px;
  -webkit-app-region: no-drag;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
}

#obContainer.customizeUserPage {
  overflow: hidden;
  border: 5px dashed #fff;
  height: calc(100% - 76px);
  animation: borderDashedFade .35s normal linear;
}

#obContainer.customizeUserPage::-webkit-scrollbar {
  width: 0 !important;
}

#content {
  position: relative;
  z-index: 0;
}

.contentWrapper {
  margin: auto;
  width: 950px;
}

.userView {
  margin-top: -20px; /*negate the 20px padding in obContainer */
}

#ov1.chatOpen #obContainer {
  width: calc(100% - 230px);
}

#appBar {
  background-color: #327EB8;
  padding: 7px 8px 6px;
  box-sizing: border-box;
  -webkit-app-region: drag;
}

#appBar .windowControls {
  position: absolute;
  left: 8px;
  top: 6px;
}

#appBar.style-win .windowControls {
  left: auto;
  right: 8px;
  top: 5px;
}

#appBar .btn {
  -webkit-app-region: no-drag;
}

#pageNav .btn {
  -webkit-app-region: no-drag;
}

#pageNav .navBar.bar {
  padding: 0 8px;
}

#pageNav .modal-about .navBar.bar {
  padding: 0;
}

.modal-about .supportWrapper {
  display: flex;
  height: 220px;
  margin: 10px 0 20px 0;
}

.modal-about .socialReminder {
  position: static;
  width: 50%;
  padding: 10px;
  opacity: 1;
  background: none;
  box-shadow: none;
  transition: none;
  box-sizing: border-box;
  height: 100%;
}

.modal-about .supportPayWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  width: 50%;

}

.modal-about .socialReminder .socialLinkWrapper {
  flex-direction: column;
  height: 100%;
}

.modal-about .socialReminder .socialLinkWrapper a {
  font-size: 12px;
}

.modal-about .socialReminder .socialLink {
  background: #141414;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-right: 2px;
  display: inline-block;
}

.modal-about .socialReminder .socialLink .socialIcon {
  font-size: 14px;
}

.modal-about .socialReminder .socialLink .socialIcon:before {
  line-height: 28px;
}

.modal-about .socialTitle {
  margin-bottom: 10px;
}

.navMoreButtons {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  min-height: 80px;
  padding: 10px;
  position: absolute;
  right: 10px;
  top: 41px;
}

#sideBar {
  position: fixed;
  right: -183px;
  top: 75px;
  width:230px;
  background-color: #252525;
  border-left: 0;
  height: calc(100% - 71px);
  z-index: 0;
  transition: right 0.5s ease;
  color: #DDD;
  -webkit-app-region: no-drag;
  box-sizing: border-box;
}

.chatOpen #sideBar {
  right: 0;
}

#sideBar input::-webkit-input-placeholder {
  color: #fff;
}

#sideBar.btn {
  color: #fff;
}

.chatSearch {
  margin-left: 41px;
}

.chatRead {
  opacity: .5;
}

.mainContainer {
  background-color: #063753;
  position: relative;
  min-height: 740px;
  margin-bottom: 50px;
  border-radius: 0;
  z-index: 0;
  box-shadow: 0 10px 20px #05283C;
}

.img-rsp {
  display: block;
  max-width: 100%;
  height: auto;
}

.bar {
  height: 50px;
  padding-left: 15px;
  padding-right: 15px;
}

.bar.barFlush {
  padding-left: 0;
  padding-right: 0;
}

.bar.barFlush.bottomBar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.bar.barFlush.bottomBar .btn-bar {
  border-radius: 0;
}

.barTxt {
  height: 50px;
  line-height: 50px;
  margin-bottom: 0;
}

.bar .btn {
  float: left;
}

/* while not used for modals, overlay is used when page nav drop downs are opened */
#overlay,
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(25,25,25,0.85);
  z-index: 1;
  transition: all .25s cubic-bezier(0, 0, 0.2, .5);
}

.overlayObscurring {
  background-color: rgba(25,25,25,0.95);
}

.navBar {
  /* use for horizontal nav structures */
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.navBar-main {
  position: fixed;
  top: 0;
  left: 0;
}

.footerBar {
  padding: 3px 0;
}

.navBar .navEnd {
  /* container for nav elements on the right side */
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.ctrlGroup {
  /* use for any cluster of nav controls */
  padding-left: 4px;
  position: relative;
}

.ctrlGroup .btn {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);

}

.ctrlGroup:first-child {
  padding-left: 0;
}

.flexContainer {
  overflow: hidden;
}

.flexRow {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  /* reset styles if applied to a list item */
  padding: 0;
  box-sizing: border-box;
}

.flexRow.noFlexWrap {
  /* temporary until all the flexRows with wrap are fixed */
  flex-wrap: nowrap;
}

.flexSizeFixed {
  flex-shrink: 0;
}

.flexRow-center {
  justify-content: center;
}

.flexRow-vCenter {
  align-items: center;
  height: 100%;
}

.flexRow-grid {
  /* use for wrapping grids of objects with 10px margins on the right side */
  margin-right: -10px;
  width: auto;
}

.flexRow [class |= "flexCol"] {
  box-sizing: border-box;
  position: relative;
}

.flexRow.pad [class |= "flexCol"] {
  padding-left: 5px;
  padding-right: 5px;
}

.flexRow.pad [class |= "flexCol"]:first-child {
  padding-left: 0;
}

.flexRow.pad [class |= "flexCol"]:last-child {
  padding-right: 0;
}

.flexRow.negPad {
  /* use to compensate for first and last margins to items in the row if you can't use flex justification */
  margin: 0 -5px 0 -10px;
  width: auto;
}

.flexRow .flexCol-12 {
  /* normally you can make it 100% wide by not using a column. This is here if you need to switch column sizes dynamically. */
  width: 100%;
}

.flexRow .flexCol-11,
.flexRow .flexCol-11 {
  flex-basis: 91.66666666666666%;
  max-width: 91.66666666666666%;
}

.flexRow .flexCol-10 {
  flex-basis: 83.33333333333334%;
  max-width: 83.33333333333334%;
}

.flexRow .flexCol-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.flexRow .flexCol-8 {
  flex-basis: 66.66666666666666%;
  max-width: 66.66666666666666%;
}

.flexRow .flexCol-7 {
  flex-basis: 58.333333333333336%;
  max-width: 58.333333333333336%;
}

.flexRow .flexCol-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.flexRow .flexCol-5 {
  flex-basis: 41.66666666666667%;
  max-width: 41.66666666666667%;
}

.flexRow .flexCol-4 {
  flex-basis: 33.33333333333333%;
  max-width: 33.33333333333333%;
}

.flexRow .flexCol-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.flexRow .flexCol-2 {
  flex-basis: 16.666666666666664%;
  max-width: 16.666666666666664%;
}

.flexRow .flexCol-1 {
  flex-basis: 8.333333333333332%;
  max-width: 8.333333333333332%;
}

.flexExpand {
  /* use to make only one item in a flex row expand */
  flex-grow: 1;
}

.listingType,
.listingType.tooltip {
  background-color: #252525;
  color: #ffffff;
  position: absolute;
  padding: 6px;
  top: 40px;
  right: 40px;
  font-size: 11px;
  font-weight: 500;
  transition: top .3s cubic-bezier(0, 0, 0.2, 1);
}

.listingDoesNotShipToYou,
.listingDoesNotShipToYou.tooltip {
  background: #252525;
  height: 18px;
  width: 18px;
  right: 39px;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 217px;
  transition: top .3s cubic-bezier(0, 0, 0.2, 1);
  border-radius: 32px;
  opacity: 1;
}

.listingsDoesNotShipToYouSlash {
  position: absolute;
  top: 3px;
  color: #DE2A14;
  font-size: 26px;
  left: 14px;
  font-weight: 700;
}

.noPointerEvents {
  pointer-events: none;
}

.gridItemControls {
  background: #106DA3;
  position: absolute;
  opacity: 0;
  bottom: 0;
  left: 1px;
  height: 40px;
  line-height: 38px;
  border-top: solid 1px #327EB8;
  padding: 0;
  box-sizing: border-box;
  transition: opacity .5s cubic-bezier(0, 0, 0.2, 1);
}

.gridItemControls .btn-gridItemControl {
  text-align: center;
  padding: 0;
  font-weight: 400;
  font-size: 12px;
}

.gridItemControls .btn-gridItemControl .gridItemOverlay {
  position: absolute;
  bottom: 100%;
  min-width: 190px;
  padding: 10px;
  right: 0;
  font-size: 16px;
  font-weight: 700;
  border-width: 1px;
  border-style: solid;
  border-right-width: 0;
  border-top-left-radius: 2px;
}

.gridItemControls .btn-gridItemControl .gridItemOverlay .btn {
  font-size: 15px;
  font-weight: 400;
}

.gridItemControls .btn-gridItemControl .gridItemOverlay:before {
  content: "";
  position: absolute;
  right: 40px;
  top: 100%;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  background: inherit;
  margin-top: -7px;
}

.gridItemControls .btn-gridItemControl:hover {
  opacity: 1;
}

.gridItem {
  box-sizing: border-box;
  padding: 34px 32px;
  cursor: pointer;
  height: 340px;
  position: relative;
}

.userPage-subViews .gridItem,
.homeView .gridItem {
  border-bottom: 1px solid #327EB8;
  border-right: 1px solid #327EB8;
  opacity: .9;
  transition: opacity .3s cubic-bezier(0, 0, 0.2, 1), padding-top .3s cubic-bezier(0, 0, 0.2, 1);
}

.userPage-subViews .gridItem:hover,
.homeView .gridItem:hover {
  box-shadow: 0 0 37px -17px rgb(0, 0, 0);
  opacity: 1;
  padding-top: 20px;
}

.userPage-subViews .gridItem:hover > .listingType,
.homeView .gridItem:hover > .listingType {
  opacity: 1;
  top: 26px;
}

.userPage-subViews .gridItem:hover > .listingDoesNotShipToYou,
.homeView .gridItem:hover > .listingDoesNotShipToYou {
  top: 203px;
  opacity: 1;
}

.userPage-subViews .gridItem:hover .gridItemControls,
.homeView .gridItem:hover .gridItemControls{
  opacity: 1;
}

.userPage-subViews .gridItem:hover .itemImg,
.homeView .gridItem:hover .itemImg {
    box-shadow: 0 0 37px -10px rgb(0, 0, 0);
}

/* if itemImg is nested, do not show box shadow */
.userPage-subViews .gridItem:hover .itemImg .itemImg,
.homeView .gridItem:hover .itemImg .itemImg {
  box-shadow: none;
}

.userPage-subViews .gridItem .itemImg:active,
.homeView .gridItem .itemImg:active {
    box-shadow: 0 0 67px -10px rgb(0, 0, 0);
    opacity: .75;
}

.pageGridItems .flexCol-4:nth-child(3n) .gridItem,
.homeGridItems .flexCol-4:nth-child(3n) .gridItem {
  border-right: 0;
}

.pageGridItems .flexCol-4:nth-child(3n) .gridItem .gridItemControls,
.homeGridItems .flexCol-4:nth-child(3n) .gridItem .gridItemControls {
  left: 1px;
  width: 316px;
  border-right: 0;
}

.userPageAboutSection .userPageEditBtn,
.userPageSocialAccounts .userPageEditBtn {
  display: none;
  position: absolute;
  top: 20px;
  right: 15px;
  font-size: 12px;
  cursor: pointer;
  z-index: 4;
}

.userPageAboutSection:hover .userPageEditBtn,
.userPageSocialAccounts:hover .userPageEditBtn {
  display: block;
}

.itemImg {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 2px;
  height: 230px;
  width: 250px;
}

.itemImg.itemImg-large {
  /* flex row collapses unless a specific height is set */
  height: 472px;
  width: 514px;
  border-radius: 0;
}

.itemImg.itemImg-small {
  height: 111px;
  width: 121px;
  margin: 0 10px 10px 0;
  border-radius: 1px;
}

.itemImg.itemImg-small:nth-child(4):not('.js-editItemSubImage') {
  margin-right: 0;
}
.itemImg.itemImg-small:nth-child(4):before:not('.js-editItemSubImage') {
  width: 100%;
  height: 100%;
  position: absolute;
  content: "...";
  background: #000;
  opacity: .75;
  border-radius: 1px;
  line-height: 82px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.itemImg.itemImg-small .fullscreen,
.itemImg.itemImg-large .fullscreen {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  top: 0;
  left: 0;
}

.itemMeta {
  padding: 0 15px 2px 15px;
  margin: 0;
  list-style-type: none;
}

.itemMeta li {
  box-sizing: border-box;
  font-size: 15px;
  padding: 15px;
  width: 100%;
}

.itemMeta .itemPrice {
  padding: 0 15px 2px 15px;
}

.itemMetaCircle {
  height: 38px;
  line-height: 38px;
  width: 38px;
  text-align: center;
  border-radius: 25px;
  font-size: 15px;
  opacity: .85;
}

.itemMetaCircle:before {
  margin-top: 9px;
}

.itemMetaValue {
  max-width: 130px;
  float: left;
  font-size: 15px;
  opacity: .75;
  height: 38px;
  line-height: 38px;
  font-weight: 500;
  text-transform: capitalize;
}

.rowItem {
  flex-grow: 1;
  padding: 25px 15px;
}

.rowItem input[type=radio] {
  vertical-align: middle;
  margin-top: 0;
}

.fieldItem {
  min-height: 50px;
  padding: 15px;
  position: relative;
  display: block;
  box-sizing: border-box;
}

label.fieldItem {
  border: 2px solid transparent;
}

.fieldItem.fieldItem-multiLine {
  line-height: normal;
  padding: 15px;
}

[class |= "flexCol"] > .fieldItem {
  margin: 0 -2px -2px 0; /* prevent collum overflows */
}

.table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.table > div {
  display: table-row;
}

.table > div > div {
  display: table-cell;
  vertical-align: top;
}

.table.tablePadCell5 > div > div {
  padding: 5px;
}

.table.tablePadCellRB5 > div > div {
  padding: 0 5px 5px 0;
}

.basicTable {
  width: 100%;
  border-collapse: collapse;
}

.basicTable, .basicTable td {
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}

.btn {
  font-size: 13px;
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
   -webkit-user-select: none;
}


/* don't prefix with .btn, sometimes it is used on icons without a .btn class */
.btn-corner {
  cursor: pointer;
  display: block;
  position: absolute;
  opacity: .75;
  float: none;
  transition: opacity .15s cubic-bezier(0, 0, 0.2, 1);
  z-index: 1;
}

.btn-corner.btn-cornerTR {
  top: 10px;
  right: 10px;
}

.btn-corner.btn-cornerTR:hover {
  opacity: 1;
}

.btn-corner.btn-cornerTR:active {
  opacity: .5;
}

.btn-corner.btn-cornerTR.btn-cornerTRSmall {
  top: 5px;
  right: 5px;
}

.btn-corner.btn-flushTop {
  top: 0;
}

.btn-corner.btn-cornerTL {
  top: 10px;
  left: 10px;
}

.btn-corner.btn-cornerTL.btn-flushTL {
  top: 0;
  left: 0;
}

.btn-corner.btn-cornerTR.btn-cornerTROutR {
  right: -30px;
}

.modal > .btn-corner.btn-cornerTRFixedOut {
  /* button must be direct child of modal. The left value is based on the width of the modal. */
  left: 896px;
  top: 23px;
}

.thumbnail-small {
  height: 30px;
  width: 30px;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  position: relative;
}

.fieldItem.thumbnail-small {
  min-height: 30px;
  margin: 10px 0 10px 10px;
}

.thumbnail {
  height: 54px;
  width: 54px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
  position: relative;
  flex-basis: auto;
  flex-shrink: 0;
}

.thumbnail-large {
  border-radius: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  height: 80px;
  width: 80px;
  transition: all .1s cubic-bezier(0, 0, 0.5, 1);
}

.transactionsView .thumbnail-large {
  height: 76px;
  width: 76px;
}

.thumbnail-large .userPageEditBtn {
  display: none;
  margin: auto;
}

.thumbnail-large:hover .userPageEditBtn {
  display: block;
}

.thumbnail-large-slim {
  height: 58px;
  width: 58px;
  transition: all .1s cubic-bezier(0, 0, 0.5, 1);
}

.thumbnail-huge {
  border-radius: 4px;
  height: 162px;
  width: 162px;
}

.row5 {
  margin-bottom: 5px;
}

.row10 {
  margin-bottom: 10px;
}

.row15 {
  margin-bottom: 15px;
}

.row20 {
  margin-bottom: 20px;
}

.row30 {
  margin-bottom: 30px;
}

.row40 {
  margin-bottom: 40px;
}

.row60 {
  margin-bottom: 60px;
}

.row100 {
  margin-bottom: 100px;
}

.rowTop5 {
  margin-top: 5px;
}

.rowTop10 {
  margin-top: 10px;
}

.rowTop15 {
  margin-top: 15px;
}

.rowTop20 {
  margin-top: 20px;
}

.rowTop30 {
  margin-top: 30px;
}

.rowTop40 {
  margin-top: 40px;
}

.rowTop50 {
  margin-top: 50px;
}

.rowTop241 {
  /* special class for the itemEdit view */
  margin-top: 241px;
}

.row320 {
  margin-bottom: 320px;
}

.pad5 {
  padding-left: 5px;
  padding-right: 5px;
}

.pad5Top {
  padding-top: 5px;
}

.pad10 {
  padding-left: 10px;
  padding-right: 10px;
}

.pad8Left {
  padding-left: 8px;
}

.pad10Left {
  padding-left: 10px;
}

.pad10Right {
  padding-right: 10px;
}

.pad10Top {
  padding-top: 10px;
}

.pad15 {
  padding-left: 15px;
  padding-right: 15px;
}

.pad20 {
  padding-left: 20px;
  padding-right: 20px;
}

.pad20Right {
  padding-right: 20px;
}

.pad20Left {
  padding-left: 20px;
}

.pad50 {
  padding-left: 50px;
  padding-right: 50px;
}

.popMenu {
  position: absolute;
  z-index: 1;
}

.modal {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity .05s cubic-bezier(0, 0, 0.2, 1),
              width 0.5s ease;
  padding-top: 25px;
  z-index: 1;
  pointer-events: all;
}

.modal .btn-corner {
  z-index: 0;
}

.modal.underPageNav {
  top: 46px
}

/*
  .insideApp will position the modal below the nav bar and so it doesn't obscure chat.
*/
.modal.insideApp {
  top: 46px;
  width: calc(100% - 47px);
  z-index: 0;
}

#ov1.chatOpen .modal.insideApp {
  width: calc(100% - 230px);
}

/*
  A fullscreen modal has it's content extended across the entire screen
  (excluding the top menu bar), as opposed to being a "box" centered in
  the screen (e.g the loading modal). It's not really compatible with .insideApp.
*/
.modal.modalCoverFullscreen {
  padding-top: 0;
}

.modal-child {
  width: 525px;
  height: 624px;
  margin: 0 auto;
  position: absolute;
  right: 0;
  left: 0;
  transition: right 0.5s ease;
}

.modal.modalCoverFullscreen .modal-child {
  width: 100%;
  height: 100%;
}

.modal-opaque .modal-child {
  height: 574px;
}

.accordion {
  overflow: hidden;
  position: relative;
}

.accordion > .accordion-window {
  position: absolute;
}

.accordion > .accordion-window > .accordion-child {
  float: left;
}

.accordion > .accordion-window > .accordion-child .bar {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.accordion-active input, .accordion-active textarea, .accordion-active a {
  visibility: visible;
}

.accordion-inactive input, .accordion-inactive textarea, .accordion-inactive a {
  visibility: hidden;
}

.list-style-none {
  list-style-type: none;
}

.clickable {
  cursor: pointer;
}

.theme-container {
  height: 140px;
  text-align: center;
  width: 33.3%;
  -webkit-box-sizing: border-box;
}

.theme-nav {
  height: 7px;
  width: 75%;
  margin: auto;
  position: relative;
}

.theme-tab {
  height: 6px;
  width: 20px;
  position: absolute;
  top: 1px;
}

.theme-background {
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  margin: 16px auto 5px auto;
  max-width: 160px;
  height: 87px;
  width: 80%;
}

.theme-header {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  height: 40px;
  margin: auto;
  margin-top: 8px;
  width: 75%;
}

.theme-global-header {
  height: 7px;
  width: 100%;
  margin: auto;
}

.theme-body {
  height: 25px;
  margin: auto;
  width: 75%;
}

.topThumb {
  width:55px;
  height:55px;
  background-size: cover;
  top: 24px;
  content: " ";
  left: 30px;
  position: absolute;
  z-index: 3;
}

#addressBar{
  height: 32px;
  font-size: 13px;
}

#ov1 #addressBar::-webkit-input-placeholder,
#ov1 #userPage #addressBar::-webkit-input-placeholder {
  color: #000;
  font-size: 13px;
}

.smPageHeader {
  background-color: rgb(6,55,83);
  height: 85px;
  line-height: 50px;
  position: relative;
  z-index: 2;
}

.smPageHeader .smPageHeaderInner {
  top: 35px;
  padding-left: 100px;
  padding-right: 15px;
  position: relative;
  background-color: rgb(33, 81, 117);
}

.breadCrumbArrow {
  margin-top: 10px;
  width: 20px;
  text-align: center;
  font-size: 10px;
  opacity: .5;
}

/* colorbox styles */
#colorbox {
  z-index: 12;
  outline: none;
  margin-top: 20px;
  transition: margin 0.5s ease;
  position: fixed;
}

#ov1.chatOpen #colorbox {
  margin-left: -115px;
}

#cboxOverlay {
  z-index: 11;
  top: 50px;
  height: 100%;
  width: calc(100% - 47px);
  transition: width 0.5s ease;
}

#ov1.chatOpen #cboxOverlay {
  width: calc(100% - 230px);
}

/*========== skin classes ==========*/

.userPageImageUpload {
  background: transparent !important;
  opacity: 1;
  font-size: 24px;
  margin-top: 20px;
}

.userPageImageUpload:hover {
  text-decoration: underline !important;
}

.navBar {
  background-color: #327EB8;
}

.navBar.statusBar,
#userPage .navBar.statusBar {
  background-color: rgba(0,0,0,0.6);
  transition: opacity 1s;
  overflow: hidden;
  z-index: 10;
}

.navBar-main.navBar.statusBar {
  margin-top: 50px;
}

.welcomeBar,
.userBar {
  background-color: transparent;
  height: 50px;
  line-height: 50px;
  position: relative;
  z-index: 2;
}

.welcomeBar:before {
  background: url('../imgs/openbazaar-icon-no-border.png');
  background-size: cover;
  bottom: 0;
  content: " ";
  height: 58px;
  left: 30px;
  position: absolute;
  width: 58px;
  z-index: 2;
}

.welcomeBar .welcomeBar-inner,
.userBar .title-section {
  background-color: #215175;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  height: 50px;
  padding-left: 102px;
  position: relative;
  z-index: 1;
}

.userBar .title-section {
  padding-left: 102px;
}

.userBar .thumbnail {
  background-size: cover;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  bottom: 0;
  content: " ";
  height: 58px;
  left: 30px;
  position: absolute;
  width: 58px;
  z-index: 2;
}

.user-customize-cover-photo {
  width: 950px;
}

.mainContainer {
  background-color: #086A9E;
}

.user-customize-cover-photo {
  width: 950px;
}

#userPage .mainContainer {
  background-color: #4a4848;
}

.modal-opaque {
  background-color: rgba(6, 55, 83, 0.80);
  box-shadow: inset 0 -70px 112px -62px rgba(37,37,37,.9);
}

.modal-opaqueDark {
  background-color: rgba(25,25,25,0.9);
  box-shadow: inset 0 -70px 112px -62px rgba(37,37,37,.9);
}

.modal-opaque.modal-navBlock {
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 78px, rgba(7,65,97,1) 79px);
  top: 0;
  padding-top: 100px;
}

.modal-childMain {
  border-radius: 3px;
  background-color: #327eb8;
}

.modal-hero {
  background: linear-gradient(to bottom, rgb(209,209,209), rgb(55,55,55) 60px, rgb(55,55,55) 108px, rgb(0,0,0));
  background-position: center;
  background-size: cover;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  height: 250px;
  position: relative;
  width: 525px;
  box-sizing: border-box;
}

.modal-msg {
  /* use for bottom half of modal under a modal-hero element */
  width: 525px;
  height: 374px;
}

.modal-small {
  border-radius: 3px;
  min-height: 120px;
  min-width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  -webkit-backface-visibility: hidden;
}

/*.modal-hero..homeModal-hero, .modal.server-connect-modal .modal-hero*/
.modal-hero.bg-dark-blue {
  background: #063753;
  padding-top: 20px;
}

.modal-hero.iconBackground {
  background-image: url(../imgs/openbazaar-icon-no-border.png);
  background-position: 50% 75px;
  background-size: 136px;
  background-repeat: no-repeat;
}

.modal-hero-about {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  height: 250px;
  position: relative;
  width: 525px;
}

.modal-hero-icon {
  background: url(../imgs/openbazaar-icon-no-border.png);
  background-size: cover;
  height: 135px;
  margin: auto;
  top: 40px;
  position: relative;
  width: 135px;
}

.modal-hero.modal-heroFullHeight {
  height: 573px;
  z-index: 1;
}

.modal-hero.modal-heroFullHeightNoButtons {
  height: 624px;
  z-index: 1;
  overflow: hidden;
  border-radius: 3px;
}

.background1 {
  background: linear-gradient(to bottom, rgba(72,78,93,1), rgba(23,24,31,1) 75%, rgba(0,0,0,1) 100%);
}

/*
removed because I don't think we're using the trick to hide the borders any more
.flex-border > .flexRow {
  margin: 0 -1px -1px 0;
  width: auto;
  overflow: hidden;
}
*/

.hideTopAndBottomBorder {
  /* use to hide the first and last border of the flexRows inside this element */
  margin: -1px 0 -2px 0;
}

.flex-border > .flexRow > [class |= "flexCol"] {
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.flex-border > .flexRow > [class |= "flexCol"].pad10 {
  padding: 0 11px 1px 10px;
}

.flex-border > .flexRow > [class |= "flexCol"].pad20 {
  padding: 0 21px 1px 20px;
}

.flex-border > .flexRow > .flexRow {
  /* containing row has a list of rows inside it */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.flex-border .flex-border > .flexRow > .flexRow:last-child {
  /* when nested, the last row should not have a border */
  border-bottom: none;
}

.flexRow-noBorderBottom,
.flex-border > .flexRow.flexRow-noBorderBottom,
.flex-border > .flexRow > .flexRow.flexRow-noBorderBottom {
  /* when the row needs to not have a bottom and no other way works */
  border-bottom: none;
}

.box-border {
  border: 1px solid rgba(255,255,255,0.08);
  box-sizing: border-box;
}

.box-borderBright {
  border: 1px solid rgba(255,255,255,.5);
  box-sizing: border-box;
}

.box-borderBright:hover {
  border: 1px solid rgba(255,255,255,1);

}

@-webkit-keyframes borderDashedFade {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.box-dashed {
  border: 4px dashed rgba(255,255,255,0.09);
  box-sizing: border-box;
}

.txtField {
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  font-size: 12px;
  height: 32px;
  opacity: .85;
  transition: opacity .3s cubic-bezier(0, 0, 0.2, 1);
  width: 100%;
}

.txtFieldWrapper {
  position: relative;
  width: 100%;
}

.txtFieldWrapper:before,
.searchWrapper:before {
  font-family: Ionicons;
  font-size: 18px;
  left: 15px;
  opacity: 0.75;
  padding-left: 2px;
  position: absolute;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.searchWrapper:before {
  content: "\f4a5"
}

.searchWrapper .txtField {
  letter-spacing: 0;
  text-indent: 24px; /* make room for icon */
  opacity: .75;
}

.searchWrapper .txtField:hover,
.searchWrapper .txtField:focus {
  opacity: 1;
}

.searchWrapper .txtField:focus {
  outline: 2px solid rgba(255,255,255,0.35);
  -webkit-background-clip: border;
}

.mainSearchWrapper:before {
  color: #000;
  left: 6px;
  content: "\f4a5"
}

.mainSearchWrapper.onPage:before {
  color: #000;
  left: 9px;
  content: "\f12f";
  opacity: .75;
}

.mainSearchWrapper .txtField {
  font-size: 12px;
  letter-spacing: 0;
  text-indent: 26px;
  transition: opacity .75s cubic-bezier(0, 0, 0.2, 1);
  -webkit-app-region: no-drag;
}

.mainSearchWrapper .txtField:focus {
  border: solid 1px #086A9E;
  outline: none;
  text-indent: 25px;
  box-shadow: none;
}

.searchWrapperWithPill .txtField {
  text-indent: 176px;
}

.searchWrapperWithPill:before {
  left: 168px;
}

.suggestionsList {
  position: absolute;
  width: 100%;
  max-height: 155px;
  background: #fff;
  margin-top: 7px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  overflow-y: scroll;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.10);
}

.suggestionsList a {
  display: block;
  color: #000;
  padding: 8px 20px;
}
.suggestionsList a:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.suggestionsList a:hover, .suggestionsList a:focus {
  text-decoration: none;
}
.suggestionsList a:hover, .suggestionsList a.selected {
  background-color: #efefef;
}

.txtField-bar,
input[type="text"].txtField-bar {
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  height: 53px;
  line-height:53px;
  font-size: 14px;
  letter-spacing: 0;
  opacity: 1;
  outline: none;
  padding: 13px;
}

.txtField-bar:focus {
  outline: none;
}

.txtFieldWrapper-bar:before {
  color: #fff;
  top: 27px;
  left: 15px;
  opacity: 1;
}

.btn {
  height: 32px;
  min-width: 32px;
  line-height: 32px;
  background-color: #086A9E; /* default color */
  padding:0;
  border-radius: 3px;
  opacity: .80;
  box-sizing: border-box;
}

.btn-enter {
  margin: 12px 15px 15px 15px;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
  width: 90%;
}

.btn i[class *= "ion-"]:before {
  position: relative;
  top: 2px;
  margin-right: 6px;
}

.btn *[class *= "ion-"]:before {
  pointer-events: none; /* don't fire clicks on icon */
}

.btn-small {
  font-size: 10px;
  line-height: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 3px;
  opacity: .80;
  box-sizing: border-box;
}

.btn-large {
  height: 42px;
  font-size: 15px;
  line-height: 42px;
  padding: 0 20px;
  border-radius: 3px;
  opacity: .80;
  box-sizing: border-box;
}

.btn:hover {
  opacity: 1;
  transition: opacity .15s, background-color 1s;
}

.btn:hover,
.btn:focus {
  text-decoration: none;
}

.btn:before {
  line-height: 32px;
}

.btn.btn-txt {
  /* button with text */
  padding: 0 12px;
}

.btn.btn-txt .pill {
  margin-right: -6px;
}

.btn.btn-txtHalf {
  /* button with text */
  padding: 0 16px;
}

.btn.btn-buyNow {
margin: auto;
    width: 280px;
    height: 52px;
    line-height: 52px;
    padding: 0;
    opacity: 1;
    font-size: 17px;
    border-radius: 5px;
    float: none;
    font-weight: 500;
    transition: opacity .25s cubic-bezier(0, 0, 0.2, 1);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn.btn-buyNow:hover {
  opacity: .75;
}

#userPage .btn.inactive {
  opacity: 0.4;
}

.btn.btn-light {
  background-color: rgba(255,255,255,0.08);
}

.btn.btn-c1 {
  background-color: rgb(50,126,184);
  min-width: 50px;
  box-shadow: none;
}

#userPage .btn.btn-c1,
.btn.btn-dark {
  background-color: #215175;
}

.btn.btn-c1.fade {
  background-color: rgba(50,126,184,0.8);
}

#userPage .btn.btn-c1.fade {
  background-color: rgba(87,87,87,0.8);
}

.btn.btn-c2,
#userPage .btn.btn-c2 {
  background-color: rgba(200,25,25,1);
}

.btn.btn-c3,
#userPage .btn.btn-c3 {
  background-color: rgba(33,117,47,1);
}

.btn.btn-discoverToggle {
  box-shadow: none;
  border-radius: 0;
  border: solid 1px #2378AA;
  opacity: 1;
  font-weight: 500;
  font-size: 15px;
  transition: none;
  letter-spacing: 0;
  height: auto;
  padding: 4px 22px;
  background-color: transparent;
}

.btn.btn-discoverToggle .toggle-txt {
  opacity: .40;
  transition: opacity .25s cubic-bezier(0, 0, 0.2, 1);
}

.btn.btn-discoverToggle:active,
.btn.btn-discoverToggle.active {
  border-bottom: solid 2px #106DA3;
  box-shadow: none;
  opacity: 1;
}

.btn.btn-discoverToggle:hover {
  opacity: 1;
}

.btn.btn-discoverToggle:hover > .toggle-txt {
  opacity: 1;
}

.btn.btn-discoverToggle.active .toggle-txt {
  opacity: 1;
}

.btn:active,
.btn.active,
.btn.btn-c1:active,
.btn.btn-c1.active,
.btn.btn-c2:active,
.btn.btn-c2.active {
  box-shadow: inset 0 0 6px 0 rgba(0,0,0,0.4), inset 0 0 12px 0 rgba(255,255,255,0.1);
}

.btn.btn-c1:active,
.btn.btn-c1.active {
  background-color: #215175;
}

.btn.btn-c2:active,
.btn.btn-c2.active {
  background-color: #752121;
}

.btn.btn-c3:active,
.btn.btn-c3.active {
  background-color: #19C836;
}

.btn.btn-c1 .toggle-txt {
  opacity: .20;
}

.btn.btn-c1:active .toggle-txt,
.btn.btn-c1.active .toggle-txt {
  opacity: 1;
}

.btn.btn-win {
  border-radius: 6px;
  width: 12px;
  min-width: 0;
  height: 12px;
  background-color: #fff;
  margin: 0 3px;
  padding: 0;
}

.btn.btn-win:hover {
  transition: initial;
}

.fullscreen .btn.btn-win {
  display: none;
}

.btn.btn-win.btn-winClose {
  background-color: #E45A5A;
  position: relative;
}

.btn.btn-win.btn-winClose .btn-win-icon,
.btn.btn-win.btn-winMin .btn-win-icon,
.btn.btn-win.btn-winMax .btn-win-icon {
  position: absolute;
  display: none;
  top: -2px;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 13px;
  color: #000000;
}

.btn.btn-win.btn-winClose:hover .btn-win-icon,
.btn.btn-win.btn-winMin:hover .btn-win-icon,
.btn.btn-win.btn-winMax:hover .btn-win-icon {
  display: block;
}

.btn.btn-win.btn-winMin {
  background-color: #F8E71C;
  position: relative;

}

.btn.btn-win.btn-winMax {
  background-color: #B8E986;
  position: relative;
}

#appBar.style-win .btn.btn-win {
  background-color: transparent;
  border-radius: 0;
  width: 19px;
  height: 19px;
  box-shadow: none;
}

#appBar.style-win .btn.btn-winClose {
  float: right;
  margin-left: 6px;
}

#appBar.style-win .btn.btn-win .btn-win-icon {
  display: block;
  top: -3px;
  font-size: 21px;
  color: #fff;
}

#appBar.style-win .btn.btn-winMax {
  float: right;
  margin-left: 6px;
  border: 1px solid #fff;
  width: 13px;
  height: 13px;
  top: 3px;
}

#appBar.style-win .btn.btn-winMax .btn-win-icon,
#appBar.style-win .btn.btn-win.btn-winMax:hover .btn-win-icon {
  display: none;
}

.btn.btn-bar {
  border-radius: 0;
  min-width: 115px;
  text-align: center;
  box-shadow: none;
  background-color: #327EB8;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  height: 47px;
  font-size: 14px;
  line-height: 47px;
  margin-top: 3px;
  opacity: .50;
  transition: opacity 0s cubic-bezier(0, 0, 0.2, 1);
}

.btn-chatOpen {
  background-color: transparent;
  text-align: center;
  font-size: 20px;
  color: white;
  font-weight: normal;
}

.btn-chatOpen:before {
  line-height: 42px;
}

.btn-chatOpenOut {
  width: 70px;
  text-align: left;
  margin-top: 7px;
  padding: 0 10px;
  font-size: 13px;
}

.btn-closeChat {
  right: 0;
  float: right;
  background-color: unset;
  margin-right: 5px;

}
.btn-closeChat:hover {
  outline: solid 1px #363636;
  border-radius: 0;
}
.btn-chatSearch {
  background-color: unset;
  text-align: center;
  font-size: 18px;
  font-weight: normal;
}

#transactionDiscussionSendText {
  font-size: 13px;
}

#transactionDiscussionSendText::-webkit-input-placeholder {
  font-size: 13px;
}

.transitionBottomSlow {
  transition: bottom .25s cubic-bezier(0, 0, 0.2, 1);
}

.newChatButton {
  border-bottom: solid 2px rgba(255,255,255,0.08);
}

.newChatButton .btn {
  opacity: .5;
  transition: opacity .25s cubic-bezier(0, 0, 0.2, 1);
}

.newChatButton:hover .btn {
  opacity: 1;
}

.chatSearch {
  /*border-bottom: solid 1px rgba(255,255,255,0.08);*/
}

.chatSearch input {
  width: calc(100% - 30px);
  outline: none;
  margin-left: 5px;
  font-size: 13px;
  background-color: unset;
  color: white;
}
.chatSearch input::-webkit-input-placeholder {
  font-size: 13px;
}

.chatSearchIcon {
  margin-left: -24px;
  margin-right: 10px;
  float: left;
  margin-top: 13px;
  cursor: pointer;
  font-size: 15px;
  opacity: .50;
  transition: opacity .25s cubic-bezier(0, 0, 0.2, 1);
}

.chatSearchIcon:hover {
  opacity: 1;
}

.chatSearchOut {
  padding-left: 10px;
  width: calc(100% - 10px);
  margin-left: 0;
  height: 25px;
  line-height: 25px;
}

div.chatSearchOut .chatSearchIcon {
  margin-left: unset;
  margin-right: unset;
}

.chatConversationContainer {
  width: calc(100% - 1px);
  height: 360px;
  bottom: 0;
  position: absolute;
  transition: bottom 0.35s ease;
  background-color: #2B2B2B;
}

.chatConversationContainerHide {
  bottom: -362px;
}

.chatMessagesLabel {
  float:left;
  color: white;
  font-size: 15px;
  height: 43px;
  line-height: 43px;
  padding-left: 10px;
  -webkit-user-select: none;
  cursor: default;
}

.chatConversationHeads {
  clear: both;
  border-top: solid 1px #363636;
  height: calc(100% - 45px); /* this will have to be changed if the search is unhidden*/
  overflow-y: auto;
  overflow-x: hidden;
}

.chatConversationHeadsCompressed {
  height: calc(100% - 405px);
  overflow-x: hidden;
  overflow-y: auto;
  transition: opacity .25s cubic-bezier(0, 0, 0.2, 1), height 1s cubic-bezier(0, 0, 0.2, 1);
  -webkit-filter: blur(.25px);
}

.chatConversationHeader {
    padding: 0;
    background-color: #565656;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    color: #fff;
    border-top-left-radius: 4px;
    margin-left: 2px;
}

.chatConversationLabel {
  width: calc(100% - 115px);
  margin-right:5px;
  float:left;
  text-overflow: ellipsis;
  overflow: hidden;
}

.conversationHeader-btn {
  height: 38px;
  width: 30px;
  text-align: center;
}

.conversationHeader-btn a {
  display: block;
  width: 100%;
  height: 100%;
}

.conversationHeader-btn a:before {
  line-height: 38px;
}

.conversationHeader-btn:hover {
  outline: solid 1px #4C4C4C;
  border-radius: 0;
}

.chatConversationContent {
  height: calc(100% - 138px);
  border: 1px solid #565656;
  border-top: 0;
  overflow: auto;
  padding: 6px 2px;
  margin-left: 2px;
  width: 222px;
}

.chatConversationTo {
  padding: 10px;
  border-bottom: 1px solid #333;
}

.chatConversationToLabel {
  width: 30px;
  float:left;
  height: 20px;
  line-height: 19px;
  color: #2D2D2D;
}

.chatConversationToInput {
  width: calc(100% - 50px);
  float: left;
}

#inputConversationRecipient {
  font-size: 12px;
  line-height: 19px;
}

.chatConversationMessage {
  height: 75px;
  padding: 0;
  border: 1px solid #565656;
  border-top: 0;
  margin-left: 2px;
}

.chatConversationMessageBody img,
.chatConversationMessageBody iframe {
  max-width: 145px;
  max-height: 145px;
}

.chatConversationMessage  .txtAreaField::-webkit-input-placeholder{
  font-size: 13px;
}

.chatConversationMessage  .txtAreaField {
  height: 75px;
  padding: 10px 10px;
}

.chatConversationMessage  .txtAreaField:focus {
    outline: 2px solid #565656;
}

.chatConversationMessage  .txtAreaField:after {
  margin-top: 5px;
}

.chatConversationAvatar {
    width: 45px;
    height: 45px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    margin-right: 6px;
    margin-left: -10px;
}

.chatConversationAvatar:hover {
  -webkit-box-shadow: inset 0 0 15px 0 rgb(50, 50, 50);
}

.chatConversationMenu {
  width: 110px;
  border: solid 1px #565656;
  border-top: 0;
  padding: 10px;
  position: absolute;
  top: 45px;
  right: 0;
  background: #252525;
  z-index: 5;
  font-weight: 400;
  font-size: 12px;
}

.chatConversationMenu div {
  cursor: pointer;
  line-height: 22px;
}

.chatConversationMenu div:hover {
  text-decoration: underline;
}

.chatConversation textarea,
.chatConversation input {
  color: white;
  background-color: unset;
  width: 100%;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.chatConversationMessageLine {
  padding: 4px 5px;
  width: 100%;
}

.chatConversationMessageLine h2,
.chatConversationMessageLine h3,
.chatConversationMessageLine p {
  margin: 0;
}

.chatConversationMessageLine table {
  padding: 0;
  width: 100%;
}

.chatHead {
  padding: 7px 5px;
  border-bottom: solid 1px rgba(255,255,255,0.08);
  transition: opacity .25s cubic-bezier(0, 0, 0.2, 1);
}

.chatHead .thumbnail {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
}

.chatHead:hover {
  opacity: 1;
}

.chatHeadSelected {
  opacity: 1;
  outline: solid 1px #FFFFFF;
  background: #565656;
  z-index:3;
}

/*.chatConversationHeadsCompressed .chatHead {
  border: solid 1px transparent;
}*/

#chatSearchField {
  height: 44px;
  float: left;
}

.chatHeadIcon {
  float:left;
}

.chatPreview {
  width: calc(100% - 60px);
  font-size: 11px;
  float:left;
  padding:0 5px;
  margin-top: 3px;
}

.chatPreviewSender {
  font-size:13px;
  font-weight:500;
  color: white;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100px;
  margin-left: 2px;
}

.chatPreviewLastMessage {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 170px;
  white-space: nowrap;
  color: #fff;
  opacity: .75;
  font-size: 12px;
  margin-left: 2px;
}

.chatConversationMessageBody > .inner {
  background-color: #333333;
  border-radius: 3px;
  font-size: 12px;
  padding: 6px 8px;
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.2px;
  word-break: break-word;
}

#inputConversationMessage {
  border: 1px solid #333;
  resize: none;
  margin-top: 4px;
}

#inputConversationMessage::-webkit-input-placeholder  {
  font-size: 12px;
  color: #fff !important; /* i'm using important here because the custom theme styles should never override this color */
}

.chatConversationMessageAvatar {
  width: 25px;
  vertical-align: top;
}

.chatConversationMessageTimestamp {
  font-size: 11px;
  opacity: .35;
  font-weight: 500;
  letter-spacing: 0;
}

.chatConversationMessageTimestamp div {
  margin-top: 2px;
}

.testnetBadge {
  position: absolute;
  right: 3px;
  top: 2px;
  background: #252525;
  border-radius: 3px;
  padding: 7px;
  font-size: 11px;
  cursor: default;
  border-left: solid 3px #F3A123;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.softwareUpdate {
  position: fixed;
  left: 0;
  bottom: 20px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 300px;
  padding: 10px;
  background: #252525;
  border-left: 4px solid #FFA41C;
  z-index: 1;
  color: #ffffff;
  opacity: .95;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.40);
  transition: left .25s cubic-bezier(0, 0, 0.2, 1);
}

.softwareUpdateHidden {
  left: -325px;
}

.softwareUpdate .btn-txt {
  background: transparent;
  border: solid 1px #fff;
  opacity: 1;
  font-size: 12px;
}
.softwareUpdate .btn-txt:hover {
  opacity: .75;
}

#userPage .btn.btn-bar {
  background-color: #575757;
}

.btn.btn-bar:hover {
  opacity: .75;
}

.btn.btn-bar.active {
  background-color: #086A9E;
  opacity: 1;
}

#userPage .btn.btn-bar.active {
  background-color: #4a4848;
}

.btn.btn-bar.btn-tab {
  background: #327EB8;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-user-select: none;
  border: none;
  height:48px;
  font-weight: 500;
  line-height: 46px;
  padding: 0 25px;
  margin-top: 6px;
  font-size: 14px;
}

.btn.btn-bar.active {
  background-color: #106DA3;
  opacity: 1;
}

.btn.btn-bar.btn-tab:first-child {
  border-top-left-radius: 0;
}

.btn.btn-bar.btn-tab:active{
  -webkit-box-shadow: none;
}

.btn.btn-wide {
  width: 100%;
  border: none;
}

.btn.btn-half {
  width: 50%;
}

.btn-pill {
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  min-height: 17px;
  opacity: 1;
  margin-bottom: 4px;
  margin-right: 4px;
  min-width: 30px;
  text-align: center;
  overflow: hidden;
  line-height: 20px;
  transition: opacity .25s cubic-bezier(0, 0, 0.2, 1);
}

.btn-pill a {
  text-decoration: none;
}

.btn-pill:hover {
  opacity: .75;
}

.btn.btn-half.btn-bar:last-child,
.btn.btn-wide.btn-bar:last-child {
  border-right: none;
}

.btn-togWrapper {
  border: 1px solid #086A9E;
  border-radius: 5px;
  float: left;
}

.btn-togWrapper.btn-toWrapper-discoverToggle {
  float: none;
  position: absolute;
  right: 0;
  bottom: -2px;
}

#userPage .btn-togWrapper {
  border: 1px solid rgb(74,72,72);
}

.btn-togWrapper.btn-togWrapper-light {
  border: 1px solid rgba(255,255,255,0.08);
}

.btn-togWrapper.btn-togWrapper-c1 {
  border: 0;
}

#userPage .btn-togWrapper.btn-togWrapper-light {
  border: 1px solid rgb(87,87,87);
}

.btn.btn-shadow1 {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.40);
}

.fieldItem .btn-togWrapper {
  margin-top: 9px;
}

.fieldItem .btn-togWrapper .btn {
  margin-top: 0;
}

.btn.btn-togLeft,
.btn.btn-togMid,
.btn.btn-togRight {
  /* creates a set of buttons flush with each other */
  float: left;
}

.btn.btn-togLeft {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn.btn-togRight {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-toWrapper-discoverToggle .btn.btn-togLeft {
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-right: 0;
}

.btn-toWrapper-discoverToggle .btn.btn-togRight {
  border-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.btn.btn-flushTop {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn.btn-back.active:before,
.btn.btn-fwd.active:before {
  opacity: 1;
}

.btn.btn-profile {
  background-size: cover;
  background-position: center;
}

.btn-square {
  width: 44px;
  height: 44px;
  opacity: .75;
  transition: opacity .3s cubic-bezier(0, 0, 0.2, 1);
}

.btn-square:hover {
  opacity: 1;
}

.btn-square:active {
  -webkit-box-shadow: inset 0 0 6px 0 rgb(13, 84, 123);
  opacity: .75;
}

.btn-squareSm {
  width: 30px;
  height: 30px;
}

.btn-insideInput {
  position: absolute;
  cursor: pointer;
  float: none;
  height: 26px;
  top: 2px;
  right: 2px;
  line-height: 26px;
}

.btn-latched  {
  width: 80px;
  margin: 0;
  border-radius: 0;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  position: relative;
  font-size: 11px;
  height: 28px;
  line-height: 28px;
  padding: 0;
  text-transform: capitalize;
  transition: opacity .2s cubic-bezier(0, 0, 0.2, 1);
}

.btn-latched:hover {
  opacity: 1 !important;
  /* added important here because I couldn't get it to work without it */
}

#ov1 .btn.confirmable,
#ov1 #userPage .btn.confirmable {
  transition: 2s background-color;
}

.btn .postConfirm,
.btn .preConfirm,
.btn .preSpacer {
  display: inline-block;
  overflow: hidden;
  transition: 2s max-width ease, 2s opacity ease;
}

.btn .preConfirm {
  max-width: 200px;
  transition: 1s opacity;
}

.btn .postConfirm {
  max-width: 0;
  width: 0;
  opacity: 0;
}

.btn .preSpacer {
  /*this keeps the width the same as the preconfirm is shrinking*/
  display: block;
  height: 0;
}

.confirm.btn .preConfirm {
  max-width: 0;
  opacity: 0;
}

.confirm.btn .postConfirm {
  max-width: 200px;
  width: auto;
  opacity: 1;
}

.btn-secondary {
  background-color: #327EB8;
}

#ov1 .confirm.btn,
#ov1 #userPage .confirm.btn {
  background-color: rgba(200,25,25,1);
}

.labelWrap {
  display: block;
  background: rgba(0,0,0,0.6);
  padding: 4px 4px 7px 52px;
  height: 44px;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  transition: opacity 1s;
}

.labelWrap.fade {
  opacity: 0;
}

.labelWrap.fadeIn {
  opacity: 1;
}

label {
  font-size: 14px;
  letter-spacing: .4px;
  opacity: .75;
}

.labelWrap input {
  margin-top: 2px;
  color: rgba(255,255,255,0.6);
  background: none;
  font-size: 12px;
  width: 100%;
}

.fieldItem h1,
.fieldITem h2,
.fieldItem h3,
.fieldItem h4,
.fieldItem h5,
.fieldItem h6 {
  margin: 0;
}

.fieldItem.plainText {
  line-height: 20px;
}

input[type="text"].fieldItem,
input[type="number"].fieldItem,
input[type="email"].fieldItem,
input[type="file"].fieldItem,
input[type="url"].fieldItem,
input[type="password"].fieldItem,
input[type="datetime-local"].fieldItem {
  background: none;
  border: 2px solid transparent;
  color: #fff;
  width: 100%;
}

input[type="datetime-local"].fieldItem {
  font-family: inherit;
  line-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}

input[type="datetime-local"].fieldItem::-webkit-inner-spin-button {
  height: 50px;
  position: absolute;
  right: 45px;
}

input[type="datetime-local"].fieldItem::-webkit-clear-button {
  -webkit-appearance: none;
  display: none;
}

input[type="datetime-local"].fieldItem::-webkit-calendar-picker-indicator {
  padding: 10px;
  opacity: .75;
}

input[type="datetime-local"].fieldItem::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: transparent;
  cursor: pointer;
}


input[type="number"].fieldItem {
  padding-right: 0;
}

input[type="number"].fieldItem::-webkit-outer-spin-button,
input[type="number"].fieldItem::-webkit-inner-spin-button,
.noNumberSpinner {
  -webkit-appearance: none;
  margin: 0;
}

input[type="text"].fieldItem:focus,
input[type="number"].fieldItem:focus,
input[type="email"].fieldItem:focus,
input[type="url"].fieldItem:focus,
input[type="password"].fieldItem:focus,
input[type="datetime-local"].fieldItem:focus {
  border: 2px solid #fff;
  transition: border 0.3s;
}

.txtAreaField:focus {
  outline: 1px solid #565656;
}

input[type="text"].fieldItem.fieldItem-withButton,
input[type="email"].fieldItem.fieldItem-withButton,
input[type="url"].fieldItem.fieldItem-withButton,
input[type="number"].fieldItem.fieldItem-withButton {
  position: absolute;
  padding-left: 50px;
}

input[type="number"].fieldItem.spinButtons {
  overflow: hidden;
  padding-right: 25px;
}

.numberSpinnerUp,
.numberSpinnerDown {
  cursor: pointer;
  width: 18px;
  position: absolute;
  right: 0;
  box-sizing: border-box;
  font-family: "Ionicons";
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  background-color: rgba(140,140,140,0.2);
  margin: 4px;
}

.numberSpinnerUp {
  top: 0;
}

.numberSpinnerUp:before {
  content: "\f10d";
}

.numberSpinnerDown {
  bottom: 0;
}

.numberSpinnerDown:before {
  content: "\f104";
}

.fieldItem .btn {
  margin-top: 9px;
}

.fieldItem .fieldItem-selectWrapper {
  position: absolute;
  width: 100%;
}

.fieldItem .fieldItem-selectWrapper select {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin: 0;
  background: none;
  border: 1px solid transparent;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  color: #fff;
}

.fieldItem .fieldItem-selectWrapper select:focus {
  outline: none;
}

.fieldItem .fieldItem-selectWrapper select[multiple] {
  height: 150px;
}

.fieldItem .fieldItem-selectWrapper select[multiple]:focus {
  height: 500px;
}

.fieldItem .fieldItem-selectWrapper:after {
  content: "\f104";
  font-family: "Ionicons";
  position: absolute;
  line-height: 50px;
  top: 0;
  right: 20px;
  pointer-events: none;
}

.fieldItem .fieldItem-selectWrapper.noIcon:after {
  content: "";
}

/* custom chosen styles */
.fieldItem .fieldItem-selectWrapper .chosen-single {
  height: 50px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  line-height: 50px;
  color: #fff;
  opacity: 1;
}

.fieldItem .fieldItem-selectWrapper .chosen-container-single div b,
.fieldItem .fieldItem-selectWrapper .chosen-container-single span b {
  background: none;
  height: 0;
}

.fieldItem .fieldItem-selectWrapper .chosen-container-single div b:after {
  content: "\f104";
  font-family: "Ionicons";
  position: absolute;
  line-height: 50px;
  top: 0;
  right: 20px;
  pointer-events: none;
}

.fieldItem .fieldItem-selectWrapper .chosen-container-single.chosen-container-active div b:after {
  content: "\f10d";
}

.fieldItem .fieldItem-selectWrapper .chosen-drop {
  background: #353535;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  box-shadow: none;
  line-height: 50px;
  color: #fff;
}

.fieldItem .fieldItem-selectWrapper.chosen-relative .chosen-with-drop .chosen-drop {
  position: relative;
}

.fieldItem .fieldItem-selectWrapper .chosen-drop .chosen-results li {
  color: #fff;
}

.fieldItem .fieldItem-selectWrapper .chosen-drop .chosen-results li.highlighted {
  background: rgb(87,87,87);
}

.chosen-container-single .chosen-single span {
  padding-left: 10px;
  font-size: 14px;
  font-weight: 400;
}

.chosen-container .chosen-results {
  padding: 0;
}

.chosen-container-multi .chosen-choices {
  background: none;
}

.fieldItem-textarea {
  padding: 15px;
  border: 2px solid transparent;
  color: #fff;
  overflow: auto; /* use customThemeScrollbar to add a scrolbar */
  word-break: break-word; /* prevent urls from making the text area grow */
}

.fieldItem-textarea:focus {
  border: 2px solid #fff;
  transition: border 0.3s;
  outline: none;
}

select {
  border: 2px solid transparent;
  border-radius: 0;
  font-family: "Helvetica Neue", Helvetica, "Open Sans", sans-serif;
  padding: 0 15px;
  -webkit-appearance: none;
}

select:focus {
  border: 2px solid #fff;
}

input[type="radio"].fieldItem {
  display: none;
}

input[type="radio"].fieldItem + label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding: 0 20px 0 40px;
}

input[type="radio"].fieldItem + label:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 10px;
  height: 16px;
  width: 16px;
  border-radius: 12px;
  border: solid 1px #fff;
  box-shadow: none;
  opacity: 1;
  transform: translateY(-50%) translateZ(0);
  -webkit-backface-visibility: hidden;
  top: 50%;
}

input[type="radio"].fieldItem:checked + label:before {
  background: #fff;
  box-shadow: inset 0 0 0 4px #086A9E;
}

.theme-container input[type="radio"].fieldItem + label {
  padding: 0;
  position: relative;
  height: 100%;
  width: 100%;
  opacity: 1;
}

.theme-container input[type="radio"].fieldItem + label:before {
  position: absolute;
  height: 16px;
  width: 16px;
  top: 120px;
  left: 50%;
  margin-left: -8px;
  border-radius: 12px;
  border: solid 1px #fff;
  box-shadow: none;
  opacity: 1;
}

.theme-container input[type="radio"].fieldItem:checked + label:before {
  background: #fff;
  box-shadow: inset 0 0 0 4px #086A9E;
}

input[type="radio"].fieldItem.starRating + label {
  padding: 0 12px;
}

input[type="radio"].fieldItem.starRating + label:before {
  content: "\f2fc";
  font-family: "Ionicons";
  color: #fff;
  line-height: 24px;
  font-size: 18px;
  text-align: center;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  border: none;
  background: none;
  box-shadow: none;
  opacity: 1;
  transform: translateY(-50%) translateZ(0);
  -webkit-backface-visibility: hidden;
  top: 50%;
  left: 0;
}

input[type="radio"].fieldItem.starRating:checked + label:before {
  content: "\f2fc";
  background: #000;
  box-shadow: none;
}

input[type="radio"].fieldItem.starRating:checked + label + input + label:before {
  content: "\f3ae";
}

input[type="radio"].fieldItem.starRating:checked + label + input + label + input + label:before {
  content: "\f3ae";
}

input[type="radio"].fieldItem.starRating:checked + label + input + label + input + label + input + label:before {
  content: "\f3ae";
}

input[type="radio"].fieldItem.starRating:checked + label + input + label + input + label + input + label + input + label:before {
  content: "\f3ae";
}

.starRating:before {
  /* use when displaying stars that are not part of an input */
  content: "\f2fc";
  font-family: "Ionicons";
  color: #fff;
  line-height: 24px;
  font-size: 18px;
}

.radioLabel {
  opacity: .75;
}

input[type="checkbox"].fieldItem {
  display: none;
}

input[type="checkbox"].fieldItem + label {
   display: inline-block;
   cursor: pointer;
   position: relative;
   line-height: 53px;
 }

input[type="checkbox"].fieldItem + label:before {
  display: inline;
  content: "\f371";
  font-family: Ionicons;
  line-height:inherit;
  box-shadow: none;
  opacity: 1;
  font-size: 1.5em;
  vertical-align: middle;
}

input[type="checkbox"].fieldItem + label.compact {
  line-height: 35px;
  padding-left: 20px;
}

input[type="checkbox"].fieldItem + label.compact:before {
  left: 0;
}

input[type="checkbox"].fieldItem.thin + label {
  line-height: inherit;
}

input[type="checkbox"].fieldItem:checked + label:before {
  content: "\f374";
}

input[type="checkbox"].fieldItem + label div,
input[type="checkbox"].fieldItem + label span {
  /* if the label has elements inside it, remove line height */
  line-height: normal;
}

input[type="checkbox"] + label .togLabelOn,
input[type="checkbox"].fieldItem + label .togLabelOn {
  display: none;
}

input[type="checkbox"] + label .togLabelOff,
input[type="checkbox"].fieldItem + label .togLabelOff {
  display: inline-block
}

input[type="checkbox"]:checked + label .togLabelOn,
input[type="checkbox"].fieldItem:checked + label .togLabelOn {
  display: inline-block;
}

input[type="checkbox"]:checked + label .togLabelOff,
input[type="checkbox"].fieldItem:checked + label .togLabelOff {
  display: none;
}

.btn input[type="checkbox"].fieldItem + label {
  line-height: inherit;
  display: inline;
  padding: 0 0 0 26px;
  left: -7px;
}

.btn input[type="checkbox"].fieldItem + label:before {
  top: 0;
  left: 0;
}

.homeModal-settings input[type="checkbox"].fieldItem + label:before {
  float: left;
  margin-left: 8px;
  margin-right: 10px;
}

#userPage .fieldItem-selectWrapper select option {
  background-color: #4a4848;
}

.taggle {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldItem .taggle_placeholder {
  position: absolute;
  transition: opacity,.25s;
  -webkit-user-select: none;
  color: rgba(255,255,255,0.4);
  top: 17px;
}

.fieldItem .taggle_list {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fieldItem .taggle_list li {
  float: left;
  display: inline-block;
  white-space: nowrap;
  line-height: 32px;
  position: relative;
}

.fieldItem .taggle {
  margin: 6px 6px 0 0;
  padding: 0 28px 0 10px;
  border-radius: 4px;
  background-color: rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.fieldItem .taggle .taggle_text {

}

.fieldItem .taggle .close {
  display: inline-block;
  position: absolute;
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  right: 2px;
  top: 6px;
  font-size: 16px;
}

.fieldItem .taggle_list .taggle_input {
  line-height: 50px;
  margin-left: 4px;
  float: left;
  background: 0;
  max-width: 100%;
  border: 0;
  outline: 0;
  color: inherit;
}

.fieldItem .taggle_sizer {
  padding: 0;
  margin: 0;
  position: absolute;
  top: -500px;
  z-index: -1;
  visibility: hidden;
}

.fieldItem.btn {
  margin: 10px;
  min-height: 0;
  min-width: 0;
  height: 30px;
}

.popMenu-notifications {
  top: 100%;
  right: 45px;
  width: 390px;
  overflow: hidden;
  pointer-events: none;
}

.popMenu-notificationsHeader {
  padding: 0 15px;
  border-bottom: solid 2px #363636;
}

.popMenu-notificationsEmpty {
  opacity: .75;
  padding: 0 15px;
}

.popMenu-notifications.popMenu-opened #notificationsPanel {
  transform: translateY(0);
  pointer-events: all;
}

.notification .rowItem {
  opacity: 1;
}

.notification .rowItem:hover {
  opacity: 1;
}

.highlightRow {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #F3A123;
}

.onboardingIntroDiscover {
  position: absolute;
  cursor: pointer;
  top: 43px;
  right: 80px;
  width: 233px;
  background: #252525 url('../imgs/onboarding-discover-callout.png') 100% 100%;
  background-size: cover;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  text-align: center;
  -webkit-box-shadow: 0 1px 2px 0 rgb(37, 37, 37);
  z-index: 1;
}

.onboardingIntroDiscover:before {
  background: #252525 url('../imgs/onboarding-discover-callout.png') 100% 0;
  background-size: 233px 196px;
  content: " ";
  width: 32px;
  height: 41px;
  position: absolute;
  top: -41px;
  z-index: 10;
  right: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.onboardingIntroDiscover a {
  position: relative;
  width: 100%;
  height: 100%;
}

.onboardingIntroDiscover a:hover {
  text-decoration: none;
}

.popMenu-navBar {
  top: 100%;
  right: 10px;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
}

.popMenu-navBarSubMenu {
  float: right;
  background-color: #252525;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.60);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: #fff;
  font-size: 13px;
  padding: 10px 0;
  width: auto;
  min-width: 230px;
  overflow: hidden;
  transform: translateY(-110%);
  transition: transform 200ms;
}

.popMenu-navBarSubMenu-servers {
    width: 230px;
}

.popMenu-opened .popMenu-navBarSubMenu-pageNav,
.popMenu-navBarSubMenu-servers.server-submenu-opened {
  transform: translateY(0);
  pointer-events: all;
}

.popMenu-navBar a {
  display: block;
  font-size: 14px;
  line-height: 26px;
  padding: 0 16px;
  transition: opacity .2s cubic-bezier(0, 0, 0.2, 1);
}

.popMenu-navBar .popMenu-navBarSubMenu-servers a {
  padding: 0;
}

.popMenu-navBar a:hover {
  opacity: 1;
  background: #353535;
  text-decoration: none;
}

.popMenu-navBar a [class *= "ion-"]:before {
    /*standardize the icon width*/
    width: 1em;
}

.popMenu-navBar hr {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.08);
}

.banner-large {
  border-radius: 0;
  background: 50% 50% / cover no-repeat;
  height: 400px;
  position: absolute;
  top: 0;
  width: 950px;
  padding: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
}

.banner-settings {
  height: 300px;
  width: 712px;
}

.user-page-content {
  position: fixed;
  width: 950px;
  z-index: 2;
}

#noNotifications {
  padding-top: 10px;
}

#notificationsPanel {
  background-color: #252525;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.60);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: #fff;
  font-size: 15px;
  transform: translateY(-110%);
  transition: transform 200ms;
}

#notificationsPanel .popMenu-notificationsContent {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 390px;
}

#notificationsPanel .notification {
  transition: background-color 300ms;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#notificationsPanel .notifPageSpinner {
  border-top: 1px solid rgba(255,255,255,0.08);
}

#notificationsPanel .notification:hover {
  background-color: #333;
}

#notificationsPanel .notification:last-child {
  border-bottom: 0;
}

.shadow-inner1-ultra-light {
  box-shadow: inset 0 -130px 112px -52px rgba(25,25,25,.35);
}

.shadow-inner1-light {
  box-shadow: inset 0 -130px 112px -52px rgba(25,25,25,.65);
}

.modal-shadow-inner1 {
  box-shadow: inset 0 -20px 50px 0 rgba(25,25,25,.35);
}
.shadow-inner1 {
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(75%,rgba(0,0,0,.75)));*/
  box-shadow: inset 0 -350px 222px -282px rgba(25,25,25,.75);
}

.shadow-inner1-strong {
  box-shadow: inset 0 -240px 92px -162px rgba(25,25,25,.55);
}

.icon-centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  -webkit-backface-visibility: hidden;
}

.color-primary {
  background: #106DA3;
}

.color-secondary {
  background: #327EB8;
}

.color-secondary-darken {
  background: #215175;
}

.homeView {
  margin-top: 8px;
}

.home-page-navigation {
  width: 950px;
}

.home-page-header-slim {
  position: fixed;
  top: 50px;
  width: 950px;
  z-index: 3;
}

.home-page-navigation-filler {
  height: 136px;
}

.user-page-navigation {
  width: 950px;
  position: relative;
  z-index: 1;
}

.user-page-header {
  position: relative;
  height: 400px;
  z-index: 2;
}

.user-page-header-slim {
  position: absolute;
  top: 0;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  height: 50px;
  opacity: 0;
  overflow: hidden;
  width: 950px;
  background: transparent;
  z-index: 5;
  padding: 0;
  transition: opacity .4s cubic-bezier(0, 0, 0.2, 1), transform .4s cubic-bezier(0, 0, 0.2, 1);
  transform: translateY(-110%);
}

.user-page-header-slim.scrolledIntoView {
  transform: translateY(0);
  opacity: 1;
}

.user-page-header-slim-bg {
  position: absolute;
  top: -10px;
  width: 950px;
  height: 80px;
  -webkit-filter: blur(10px);
}

.user-page-header-slim-avatar {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  height: 48px;
  transition: all .1s cubic-bezier(0, 0, 0.5, 1);
  width: 52px;
  z-index: 5;
}

.user-page-header-slim-tint {
  box-shadow: inset 0 -160px 112px -52px rgba(25,25,25,.9);
}

.userPage-subViews {
  position: relative;
  z-index: 1;
}

.icon-huge {
  font-size: 140px;
}

.icon-gigantic {
  font-size: 250px;
}

.icon-large {
  font-size: 32px;
}

.icon-med {
  font-size: 20px;
  /* padding prevents icon from being cut off due to overlapping edges of element */
  padding-right: 3px;
  padding-left: 3px;
}

.icon-small {
  font-size: 11px;
}

.icon-circle-background1 {
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  display: inline-block;
}

.icon-huge.icon-circle-background1 {
  width: 140px;
  height: 140px;
}

.icon-huge.icon-circle-background1:before {
  line-height:140px;
  font-size:0.8em;
}

.icon-gigantic.icon-circle-background1 {
  width: 250px;
  height: 250px;
}

.icon-gigantic.icon-circle-background1:before {
  line-height:250px;
  font-size:0.8em;
}

.photos-empty {
  height: 110px;
  margin-top: 58px;
  padding: 15px;
  text-align: center;
  width: 100%;
}

.helper-text {
  padding: 5px 15px 30px 15px;
}

/*========== spinners ==========*/

.spinner {
  position: relative;
  -webkit-backface-visibility: hidden;
}

.spinner:before {
  position: absolute;
  top: 50%;
  right: 50%;
  animation: spinnerAnimation 1.15s infinite linear;
}

.spinner.spinner-slow:before {
  animation: spinnerAnimation 3s infinite linear;
}

.spinner:after {
  content: "\00a0 \00a0 \00a0 \00a0";
  /* non-breaking spaces, creates room for the spinning icon */
}

.spinner-with-logo {
  background: url('../imgs/icon-with-opening.png') 100% 100%;
  background-size: cover;
  background-repeat: no-repeat;
  width: 215px;
  height: 215px;
  position: relative;
  transition: left 0.5s ease;
}

.spinner-with-logo .spinner-with-logo-icon {
  position: absolute;
  top: 16px;
  left: 17px;
  opacity: .90;
}

.spinner-with-logo .spinner-with-logo-icon:before {
  padding-top: 1px;
}

.spinnerWrapper {
  transition: opacity 1s;
}

@-webkit-keyframes spinnerAnimation {
  0% {
    transform: translate(50%,-50%) rotate(359deg);
  }
  100% {
    transform: translate(50%,-50%) rotate(0deg);
  }
}
@keyframes spinnerAnimation {
  0% {
    transform: translate(50%,-50%) rotate(359deg);
  }
  100% {
    transform: translate(50%,-50%) rotate(0deg);
  }
}

/*========== one-off classes ==========*/

.modal .homeModal-heroText {
  position: absolute;
  bottom: 0;
  top: 200px;
  color: #fff;
  font-size: 20px;
  line-height: 22px;
  width: 70%;
  margin: 0 15%;
  text-align: center;
}

.modal .homeModal-accordion,
.modal .aboutModal-accordion {
  height: 374px;
}

.modal .homeModal-accordion .btn-bar{
  border-radius: 0;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
  margin: 0;
  opacity: 1;
}

.modal .aboutModal-accordion .btn-bar{
  font-size: 14px;
  height: 50px;
  line-height: 50px;
  opacity: 1;
}

.modal .homeModal-accordion .btn-bar .btn,
.modal .aboutModal-accordion .btn-bar .btn{
  opacity: .75;
}

.modal .homeModal-accordion .btn-bar:hover,
.modal .aboutModal-accordion .btn-bar:hover{
  opacity: .75;
}

.modal .homeModal-accordion .btn,
.modal .aboutModal-accordion .btn {
  background-color: rgb(50,126,184);
}

.modal .homeModal-accordion .btn-bar,
.modal .aboutModal-accordion .btn-bar{
  border-right: none;
}

.modal .aboutModal-accordion .btn-bar.active{
  background: #106DA3;
}

.modal .aboutModal-accordion .btn-bar.active:hover{
  opacity: 1;
}

.modal .homeModal-accordion .btn-bar:nth-child(2){
]  border-left: solid 1px #086A9E;
}

.modal .homeModal-accordion .searchWrapper,
.modal .aboutModal-accordion .searchWrapper {
  background: #086A9E;
  border-bottom: solid 1px #327EB8;
}

.modal .homeModal-accordion .flexRow,
.modal .aboutModal-accordion .flexRow {
  width: 100%;
}

.modal .homeModal-accordion .accordion-child,
.modal .aboutModal-accordion .accordion-child {
  width: 525px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.modal .homeModal-settings,
.modal .homeModal-settings.flexRow {
  height: 222px;
  overflow-y: auto;
  background-color: #086A9E;
}

.modal .homeModal-settings.homeModal-settings-noSearch {
  height: 274px;
}

.modal .homeModal-avatarPreview {
  background: url('../imgs/defaultUser.png') 100% 100%;
  background-size: cover;
  margin-top: 30px;
}

.modal .aboutModal-accordion .modal-section {
  display: block;
  height: 315px;
  font-weight: 400;
  padding: 10px 20px;
  overflow: scroll;
  font-size: 14px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.uploadPhotoControls {
  position: absolute;
  top: 146px;
  left: 134px;
  z-index: 1;
}

.uploadPhotoControls .btn {
  float: none;
}

.default-avatar {
  border-radius: 3px;
  color: #086a9e;
  font-size: 73px;
  height: 76px;
  text-align: center;
  width: 80px;
}

.fancy-heading {
  font-weight: 200;
  font-size: 34px;
  opacity: .8;
  letter-spacing: 1.5px;
  margin-bottom: 0;
  margin-left: 0;
}

.page-contractTitle {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .8px;
  margin-bottom: 0;
  margin-top: 10px;
  opacity: 1;
}

#customizeControls {
  position: absolute;
  left: 30px;
  top: 30px;
  z-index: 1;
}

#customizeControls .js-customizePrimaryColor .btn-square {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

#customizeControls .js-customizeTextColor .btn-square {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

#customizeControls .btn-square {
  box-shadow: 0 1px 2px #898989;
  margin-bottom: 0;
  width: 40px;
  height: 40px;
  border: solid 2px #fff;
  border-radius: 0;
  border-bottom: 0;
}

.customizePrimaryColorRecommendations,
.customizeSecondaryColorRecommendations,
.customizeBackgroundColorRecommendations,
.customizeTextColorRecommendations {
  position: absolute;
  left: 36px;
  background: #252525;
  width: 0;
  top: 0;
  height: 38px;
  line-height: 38px;
  border-radius: 0;
  overflow: hidden;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  transition: width .35s cubic-bezier(0, 0, 0.2, 1);
  box-sizing: border-box;
}

.customizePrimaryColorRecommendations.show,
.customizeSecondaryColorRecommendations.show,
.customizeBackgroundColorRecommendations.show  {
  width: 273px;
}

.customizeTextColorRecommendations.show {
  width: 121px;
}

.customColorChoice {
  background: #fff;
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 2px;
  margin-top: 3px;
  margin-bottom: 5px;
  cursor: pointer;
  z-index: 5;
  border-radius: 1px;
  transition: background .5s cubic-bezier(0, 0, 0.2, 1);
}

.customColorChoice:hover {
  outline: 2px solid #ccc;
}

.customColorChoiceControl {
  width: 32px;
  opacity: .5;
  text-align: center;
  transition: opacity .25s cubic-bezier(0, 0, 0.2, 1);

}


.customColorChoice:hover:hover {
  outline: 2px solid #ccc;
  opacity: 1;
}

.customColorPicker {
  top: 10px;
  margin-left: -8px;
  font-size: 18px;
  position: absolute;
}

.discoverToggleHelper {
  top: -40px;
  width: auto;
  max-width: 300px;
  background: rgba(37,37,37,.95);
  border-radius: 3px;
  color: #fff;
  padding: 8px 10px;
  position: absolute;
  z-index: 10;
  height: 16px;
  font-size: 11px;
  right: 0;
  line-height: 16px;
  opacity: 1;
  white-space: nowrap;
  pointer-events: none;
  margin-top: 2px;
}

.discoverToggleHelper:after {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: rgba(37,37,37,.95) transparent transparent transparent;
  position: absolute;
  bottom: -10px;
  right: 48px;
}

.tooltip {
  position: relative;
}

.tooltip:hover:after{
  background: rgba(37,37,37,.95);
  border-radius: 3px;
  bottom: -32px;
  color: #fff;
  content: attr(data-tooltip);
  padding: 8px 10px;
  position: absolute;
  z-index: 10;
  height: 16px;
  font-size: 11px;
  left: 0;
  line-height: 16px;
  opacity: 1;
  white-space: nowrap;
  pointer-events: none;
  margin-top: 2px;
}

.tooltip.tooltip-left:hover:after{
  left: auto;
  right: 0;
}

.tooltip.tooltip-leftTop:hover:after{
  left: auto;
  right: 0;
  bottom: 18px;
}

.tooltip.tooltip-box:hover:after {
  height: auto;
  width: 400px;
  white-space: normal;
  bottom: auto;
  top: 100%;
}

.tooltip.tooltip-box2:hover:after {
  height: auto;
  width: 200px;
  white-space: normal;
  bottom: auto;
  top: 100%;
}

.tooltip.tooltip-box.tooltip-boxUp:hover:after {
  bottom: 120%;
  top: auto;
}

.btn-notifications.tooltip:hover:after{
  left: -20px;
}

.btn-closeChat.tooltip:hover:after,
.btn-closeConversation a.tooltip:hover:after {
  left: -13px;
  bottom: -34px;
}

.btn-profile.tooltip:hover:after{
  left: -25px;
}

.btn-upload-cover-photo {
  padding: 7px 20px;
  opacity: 1;
}

.chatHead.tooltip:hover:after{
  left: -123px;
  bottom: 7px;
  max-width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.interactiveTooltip {
  height: 20px;
  display: inline-block;
  padding: 4px 10px;
  background: #252525;
  color: #fff;
  position: absolute;
  left: 37px;
  border-radius: 4px;
  font-size: 11px;
  text-align: center;
  line-height: 20px;
  top: 8px;
  opacity: .9;
}

.interactiveTooltip div {
  position: relative;
  display: inline-block;
}

.headerCropper.banner-large,
.headerCropperPreview.banner-large {
  width: 950px;
  height: 400px;
}

.headerCropper.banner-large {
  z-index: 3;
}

.headerCropper .cropit-image-zoom-input {
  position: absolute;
  top: 240px;
  width: 400px;
}

.cropit-image-zoom-input {
  margin-left: 0;
  margin-right: 0;
}

.cropit-preview.cropit-image-loading .spinner {
  opacity: 1;
}

.cropit-preview.cropit-image-loaded .cropit-preview-image-container {
  cursor: move;
}

.cropit-image-zoom-input[disabled] {
  opacity: .2;
}

.cropit-image-preview.cropit-avatar {
  background: url('../imgs/defaultUser.png');
  background-size: cover;
}

#userPage .headerCropper .bar.navBar {
  background: none;
  height: 48px;
}

#userPage .photosModule .dropPanel {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
}

#userPage .photosModule.dragOver .dropPanel {
  opacity: 1;
  z-index: 2;
}

#userPage .photosModule .dropPanel .icon {
  font-size: 50px;
  margin-top: 50px;
}

#userPage .photosModule .editItemImageLoadPhotoMessage {
  transition: opacity 0.3s;
}

#userPage .photosModule.dragOver .editItemImageLoadPhotoMessage {
  opacity: 0;
}

.editItemImageHolder {
  height: 168px;
  overflow: auto;
  /*scroll bar is added with JS */
}

.editItemImageLoadPhotoMessage {
  height: 168px;
  width: 100%;
  position: absolute;
  top: 50px;
  left: 0;
}

#transactionConfirmForm label {
  font-size: 12px;
}

#transactionConfirmForm input::-webkit-input-placeholder,
#transactionConfirmForm textarea::-webkit-input-placeholder {
  font-size: 12px;
}

.confirmOrderHolder,
.contractHolder,
.feedbackHolder {
  transition: bottom .15s ease;
  bottom: -250px;
  position: absolute;
}

.page-connect-modal .spinner-with-logo {
  margin-top: -45px;
}

.loadingModal .loadingModalContent {
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
  margin-top: 117px;
  opacity: 0;
  transition: opacity 1s 5s ease;
  box-sizing: border-box;
  padding: 9px;
  text-align: center;
}

#ov1 .server-connect-modal {
  z-index: 10; /* slightly hacky way to resolve problems when loading modal is in front of the server connect modal*/
}

#ov1 .server-connect-modal .modal-child {
  height: 625px;
}

#ov1 .server-connect-modal .message-bar {
  top: 59px;
  left: 25px;
  right: 25px;
  z-index: 1;
  transition: top .2s, opacity .2s;
}

#ov1 .server-connect-modal .message-bar > div {
  background-color: #C62D2D;
  padding: 8px 20px;
  line-height: 2.2;
  display: inline-block;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

#ov1 .server-connect-modal .message-bar .message-bar-close {
  top: -12px;
  right: -3px;
}

#ov1 .server-connect-modal .message-bar.slide-out {
  top: -45px;
  opacity: 0;
}

#ov1 .server-config-form:not(.no-transition) {
  transition: top 250ms;
}

#ov1 .server-config-form.slide-out {
  top: 372px;
}

#ov1 .server-config-row .connection-failed::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #C62D2D;
  top: 0;
  left: 0;
  bottom: 0;
}

.pill {
  border-radius: 2px;
  padding: 5px 7px;
  min-width: 100px;
  background: red;
}

.pill.tabPill {
  position: relative;
  display: inline-block;
  min-width: 0;
  line-height: normal;
}

.pill.tabPill .badge:after {
  right: -12px;
  top: -8px;
}

.selectPill {
  opacity: .75;
  transition: opacity .2s cubic-bezier(0, 0, 0.2, 1);
  width: 156px;
  text-align: right;
  position: relative;
}

.selectPill select {
  background-color: #327EB8;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  margin-left: 10px;
  letter-spacing: .4px;
  line-height: 32px;
  height: 32px;
  width: 148px;
  z-index: 2;
  -webkit-user-select: none;
  outline: none;
}

.selectPill:before {
  content: "\f104";
  font-family: Ionicons;
  position: absolute;
  line-height: 31px;
  opacity: .5;
  top: 0;
  right: 6px;
  pointer-events: none;
}

.selectPill:hover {
  opacity: 1;
}

.selectPillWrapper {

}

.violatorTR {
  /* sets triangle to be in the top right corner */
  /* must be given equal height and width properties */
  /* text or icons inside the violator should have positionTopRight and a right and top margin or padding based on the violator size */
  position: absolute;
  top: 0;
  right: 0;
  -webkit-clip-path: polygon(50% 0, 100% 0, 100% 50%);
  z-index: 1; /* this shouldn't need to be higher. Make it the last element in its container */
  text-align: center;
}

.violator1 {
  width: 50px;
  height: 50px;
  background: #215175; /* this should be overridden with a color class */
  color: #fff;
}

.violatorTxt{
  /* use on content of a violator to rotate it to match the violator */
  display: block;
  transform: rotate(45deg);
}

.listingTypeDIGITAL_GOOD:before {
  color: #EFEF4C;
  content: "\f137";
  font-family: Ionicons;
  font-size: 12px;
}

.listingTypePHYSICAL_GOOD:before {
  color: #805C17;
  content: "\f318";
  font-family: Ionicons;
  font-size: 12px;
}

.listingTypeSERVICE:before {
  color: #DEDEDE;
  content: "\f2ad";
  font-family: Ionicons;
  font-size: 12px;
}

  /* protect customize controls from custom page styles */
#ov1 #customizeControls .labelWrap {
  height: 40px;
  border-radius: 0;
}

#ov1 #customizeControls .labelWrap input {
  color: rgba(255,255,255,0.6);
}

.colpick {
  z-index: 10;
  border-radius: 0;
  background: #252525;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.colpick-customizeColor {
  left: 70px !important; /* I want to override the inline styles on the colpick element */
}

#ov1 .colpick input {
  color: #616161;
}

.colpick_rgbhex .colpick_new_color,
.colpick_rgbhex .colpick_current_color {
  height: 20px;
}

.colpick_rgbhex .colpick_rgb_r {
  top: 33px;
}

.colpick_rgbhex .colpick_rgb_g {
  top: 60px;
}

.colpick_rgbhex .colpick_rgb_b {
  top: 87px;
}

.colpick_rgbhex .colpick_hex_field {
  top: 114px;
}

.colpick_dark .colpick_submit {
  top: 142px;
  color: #B5B5B5;
  font-weight: 400;
  border-color: #616161;
}

#ov1 .medium-editor-toolbar {
  background: #353443;
}

#ov1::-webkit-scrollbar {
  display: none;
  box-sizing: border-box;
}

.qrCode {
  background-color: #fff;
  padding: 15px;
}

.buyView .chosen-container .chosen-results {
  max-height: 180px;
}

.chatConversationMessageLine .chatConversationMessageBody a {
  text-decoration: underline;
}

#statusBar {
  position: fixed;
  bottom: 0;
  z-index: 10;
  width: 100%;
}

#statusBar .statusMessageWrap {
  height: 0;
  overflow: hidden;
  transition: opacity 1.5s, height 1s;
}

#statusBar .statusMessageWrap.slideUp {
  height: 30px;
}

#statusBar .statusMessage {
  opacity: 0.4;
  box-sizing: border-box;
  padding: 0 10px;
  line-height: 30px;
  color: #fff;
  font-size: 12px;
  font-style: italic;
  background: #000;
  border-bottom: 1px solid #222;
  position: relative;
  top: -1px;
}

.page-connect-modal {
  padding: 0;
  width: 100%;
  height: 100%;
}

.page-connect-modal .modal-child {
  width: 100%;
  height: 100%;
}

.page-connect-modal .spinner-with-logo .icon-no-connection {
  top: 18px;
  left: 22px;
}

.page-connect-modal .content {
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
  max-width: 600px;
  margin-top: 75px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  transition: transform 0.5s ease;
}

.page-connect-modal .content .btn {
  float: none;
}

.page-connect-modal .mode-connecting .btn-retry,
.page-connect-modal .mode-connecting .btn-back,
.page-connect-modal .mode-connecting .icon-no-connection {
  display: none;
}

.page-connect-modal .mode-failed-connect .btn-cancel,
.page-connect-modal .mode-failed-connect .spinner {
  display: none;
}

.buyWizardMap .mapWrap {
  background-color: #eeeae1;
  height: 100%;
}

.backToTop {
  position: fixed;
  bottom: 15px;
  right: 73px;
  padding: 10px;
  background-color: #252525;
  transform: translateY(100%);
  opacity: 0;
  border-radius: 4px;
  transition: transform 300ms ease, right 0.5s ease;
}

.backToTop.slideUp {
  opacity: 1;
  transform: translateY(0);
}

.backToTop:active {
  opacity: .75;
}

#ov1.chatOpen .backToTop {
  right: 303px;
}

.userShort {
  border-bottom: solid 1px rgba(255,255,255,0.08);
  box-sizing: border-box;
}

.userShort .userShortWrapper {
  padding: 20px 15px;
}

.userList .userShort {
  height: 116px; /* fix the height to prevent a reflow when the wrapper is hidden */
}

.userList .userShort.outOfScroll .userShortWrapper {
  display: none;
}

.addressBox {
  padding: 10px;
  font-size: 15px;
  border-radius: 3px;
  min-height: 120px;
  position: relative;
}

.addressBoxDragging .addressBox{
  border-width: 2px;
  border-style: solid;
}

.addressBoxGhost .addressBox{
  border-width: 2px;
  border-style: dashed;
}

.addressesWrapper .addressBox .defaultLabel {
  display: none;
}

.addressesWrapper:first-child .addressBox .defaultLabel {
  display: block;
}

.buyAddressWrapper {
  padding: 15px;
    word-wrap: break-word;
}

.payAddressWrapper {
    padding: 20px 15px;
    word-wrap: break-word;
}

.socialReminder {
    position: fixed;
    bottom: -150px;
    right: 0;
    z-index: 1;
    width: 360px;
    padding: 32px;
    opacity: 0;
    background: #141414;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.70);
    transition: bottom 1s, opacity 1s;
}

.socialReminder.show {
    bottom: 0;
    opacity: 1;
}

.socialReminder .socialTitle {
    margin-bottom: 16px;
    font-size: 16px;
}

.socialReminder .socialInfoLink {
    font-style: normal;
    cursor: pointer;
}

.socialReminder .socialInfoLinkInner {
    font-style: normal;
    text-decoration: underline;
    cursor: pointer;
}

.socialReminder .socialParagraph {
    line-height: 1.4;
    margin-bottom: 10px;
}

.socialReminder .socialDisclaimer {
    font-size: 10px;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 20px;
}

.socialReminder .closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 14px;
    cursor: pointer;
    font-size: 12px;
}

.socialReminder .socialLinkWrapper {
    display: flex;
    justify-content: space-between;
}

.socialReminder .socialLink {
    background: #106DA3;
    display: block;
    padding: 10px;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    text-align: center;
}

.socialReminder .socialIcon {
    font-size: 28px;
}

.socialReminder .socialIcon:before {
    line-height: 34px;
}

/*========== utility classes ==========*/

/* the #ov1 id is on the HTML tag. It is used to force specificity
   higher than other class combinations on the page. This is preferable
   to using an important tag. Only use it on rules that must override
   all other rules. */

/* be aware that float and clear have no affect on flex items. */


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

.clearfix:after {
  clear: both;
}

#ov1 .highlight {
  /* use on an element inside a block container to add a translucent hover background to it. The color is slightly
     grey so it works on light backgrounds too*/
  background: rgba(215, 215, 215, 0);
  transition: background 0.5s;
}

#ov1 .highlight:hover {
  background: rgba(215, 215, 215, 0.2);
}

#ov1 .pull-right {
  float: right;
}

#ov1 .pull-left {
  float: left;
}

#ov1 .push-down5 {
  position: relative;
  top: 5px;
}

#ov1 .push-down22 {
  position: relative;
  top: 22px;
}

#ov1 .push-down25 {
  position: relative;
  top: 25px;
}

#ov1 .pull-up50 {
  position: relative;
  top: -50px;
}

#ov1 .pull-up48 {
  position: relative;
  top: -48px;
}

#ov1 .pull-up43 {
  position: relative;
  top: -43px;
}

#ov1 .pull-up1 {
  position: relative;
  top: -1px;
}

#ov1 .pull-up4 {
  position: relative;
  top: -4px;
}

#ov1 .positionBottom {
  position: absolute;
  bottom: 0;
}

#ov1 .positionTop {
  position: absolute;
  top: 0;
  left: 0;
}

#ov1 .positionTopRight {
  position: absolute;
  top: 0;
  right: 0;
}

#ov1 .positionBottomRight {
  position: absolute;
  bottom: 0;
  right: 0;
}

#ov1 .hide {
  display: none;
}

#ov1 .hideChildren .hideableChild {
  display: none;
}


#ov1 .invisible {
  visibility: hidden;
}

#ov1 .visuallyHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#ov1 .show {
  display: block;
}

#ov1 .invisible {
  visibility: hidden;
}

#ov1 .scrollOverflowY {
  overflow-y: scroll;
}

#ov1 .scrollOverflowYHideX {
  overflow-y: scroll;
  overflow-x: hidden;
}

#ov1 .autoOverflowYHideX {
  overflow-y: auto;
  overflow-x: hidden;
}


#ov1 .vertAlignMid {
  vertical-align: middle;
}

#ov1 .vCentered {
  /* must be inside a relatively positioned containing element */
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  -webkit-backface-visibility: hidden;
}

#ov1 .hCentered {
  /* must be inside a relatively positioned containing element */
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  -webkit-backface-visibility: hidden;
}

#ov1 .fullCentered {
  /* must be inside a relatively positioned containing element */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  -webkit-backface-visibility: hidden;
}

#ov1 .btn.btn-txtOnly,
#ov1 .btn.btn-bar.btn-txtOnly,
#ov1 .btn.btn-bar.btn-tab.btn-txtOnly {
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
}

#ov1 .overflowHidden {
  overflow-x: hidden;
  overflow-y: hidden;
}

#ov1  .borderRight {
  border-right: solid 1px rgba(255,255,255,0.08);
}

#ov1  .borderBottom {
  border-bottom: solid 1px rgba(255,255,255,0.08);
}

#ov1  .borderBottomDashed {
  border-bottom: dashed 1px rgba(255,255,255,0.08);
}

#ov1  .borderBottom2 {
  border-bottom: solid 2px rgba(255,255,255,0.08);
}

#ov1  .borderTop {
  border-top: solid 1px rgba(255,255,255,0.08);
}

#ov1  .borderTopDashed {
  border-top: dashed 1px rgba(255,255,255,0.08);
}

#ov1  .border1 {
  border: solid 1px rgba(255,255,255,0.08);
}

#ov1  .border2 {
  border: solid 2px rgba(255,255,255,0.08);
}

#ov1  .border0 {
  border: 0;
}

#ov1  .borderRight0 {
  border-right: 0;
}

#ov1 .top3 {
  top: 3px;
}

#ov1  .outline2 {
  outline: 2px solid #fff;
}

#ov1  .borderRadiusTop {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

#ov1 .borderRadius2 {
  border-radius: 2px;
}

#ov1 .borderRadius3 {
  border-radius: 3px;
}

#ov1 .borderRadiusBottom0 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#ov1  .podBorder {
  border: solid 1px rgba(255,255,255,0.08);
  border-bottom: solid 2px rgba(255,255,255,0.08);
}

#ov1  .textOpacity0,
#ov1 .opacity0 {
  opacity: 0;
  pointer-events: none;
}

#ov1  .textOpacity25 {
  opacity: .25;
}

#ov1  .textOpacity35 {
  opacity: .35;
}

#ov1  .textOpacity50 {
  opacity: .50;
}

#ov1  .textOpacity65 {
  opacity: .65;
}

#ov1  .textOpacity75 {
  opacity: .75;
}

#ov1  .textOpacity90 {
  opacity: .90;
}

#ov1  .textOpacity1 {
  opacity: 1;
}

#ov1 .textSize11px {
  font-size: 11px;
}

#ov1 .textSize12px {
  font-size: 12px;
}

#ov1  .textSize13px {
  font-size: 13px;
}

#ov1  .textSize14px {
  font-size: 14px;
}

#ov1  .textSize15px {
  font-size: 15px;
}

#ov1  .textSize16px {
  font-size: 16px;
}

#ov1  .textSize17px {
  font-size: 17px;
}

#ov1  .textSize20px {
  font-size: 20px;
}

#ov1  .textSize22px {
  font-size: 22px;
}

#ov1  .textSize24px {
  font-size: 24px;
}

#ov1  .textSize24px {
  font-size: 24px;
}

#ov1  .textSize26px {
  font-size: 26px;
}

#ov1  .textSize28px {
  font-size: 28px;
}

#ov1  .textSize30px {
  font-size: 30px;
}

#ov1  .textSize90px {
  font-size: 90px;
}

#ov1  .textSize13px {
  font-size: 13px;
}

#ov1  .textFirstCharUppercase {
  text-transform: lowercase;
}

#ov1  .textFirstCharUppercase::first-letter {
  text-transform: uppercase;
}

#ov1  .textWeightLight {
  font-weight: 100;
}

#ov1  .textWeightNormal {
  font-weight: 400;
}

#ov1  .textWeightMedium {
  font-weight: 500;
}

#ov1 .textShadow {
  text-shadow: 0 1px 5px #000;
}

#ov1 .textShadow2 {
  text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,0.7);
}

#ov1 .fontSize8 {
  font-size: 8px;
}
#ov1 .fontSize9 {
  font-size: 9px;
}

#ov1 .fontSize10 {
  font-size: 10px;
}

#ov1 .fontSize11 {
  font-size: 11px;
}

#ov1 .fontSize12 {
  font-size: 12px;
}

#ov1 .fontSize13 {
  font-size: 13px;
}

#ov1 .fontSize14 {
  font-size: 14px;
}

#ov1 .fontSize15 {
  font-size: 15px;
}

#ov1 .fontSize16 {
  font-size: 16px;
}

#ov1 .fontSize17 {
  font-size: 17px;
}

#ov1 .fontSize18 {
  font-size: 18px;
}

#ov1 .fontSize20 {
  font-size: 20px;
}
#ov1 .fontSize24 {
  font-size: 24px;
}

#ov1 .fontSize30 {
  font-size: 30px;
}

#ov1 .fontSize34 {
  font-size: 34px;
}

#ov1 .txt-bright {
  color: #fff;
}

#ov1 .txt-darkest {
  color: #000;
}

#ov1 .txt-muted {
  color: #818a91;
}

#ov1 input.placeholder-dark::-webkit-input-placeholder  {
  color: #000;
}

#ov1 .txt-col1 {
  color: #086A9E;
}

#ov1 .txt-col2 {
  color: #327EB8;
}

#ov1 .txt-col3 {
  color: #428a38;
}

#ov1  .alignCenter {
  text-align: center;
}

#ov1  .alignRight {
  text-align: right;
}

#ov1  .floatLeft {
  float: left;
}

#ov1  .floatRight {
  float: right;
}

#ov1  .right10 {
  right: 10px;
}

#ov1  .margin0 {
  margin: 0;
}

#ov1  .margin8 {
  margin: 8px;
}

#ov1  .marginRight2 {
  margin-right: 2px;
}

#ov1  .marginRight3 {
  margin-right: 3px;
}

#ov1  .marginRight4 {
  margin-right: 4px;
}

#ov1  .marginRight5 {
  margin-right: 5px;
}

#ov1  .marginRight7 {
  margin-right: 7px;
}

#ov1  .marginRight8 {
  margin-right: 8px;
}

#ov1  .marginRight10 {
  margin-right: 10px;
}

#ov1  .marginRight15 {
  margin-right: 15px;
}

#ov1  .marginRight20 {
  margin-right: 20px;
}

#ov1  .marginLeftNeg115 {
  margin-left: -115px;
}

#ov1  .marginLeft0 {
  margin-left: 0;
}

#ov1  .marginLeft05 {
  margin-left: 0.5px;
}

#ov1  .marginLeft1 {
  margin-left: 1px;
}

#ov1  .marginLeft2 {
  margin-left: 2px;
}
#ov1  .marginLeft4 {
  margin-left: 4px;
}

#ov1  .marginLeft5 {
  margin-left: 5px;
}

#ov1  .marginLeft6 {
  margin-left: 6px;
}

#ov1  .marginLeft7 {
  margin-left: 7px;
}

#ov1  .marginLeft8 {
  margin-left: 8px; /* use this to match the gap on the right created by the custom scrollbar */
}

#ov1  .marginLeft10 {
  margin-left: 10px;
}

#ov1  .marginLeft12 {
  margin-left: 12px;
}

#ov1  .marginLeft15 {
  margin-left: 15px;
}

#ov1  .marginLeft20 {
  margin-left: 20px;
}

#ov1  .marginLeft30 {
  margin-left: 30px;
}

#ov1  .marginLeft82 {
  margin-left: 82px;
}

#ov1  .marginTopNeg8 {
  margin-top: -8px;
}

#ov1  .marginTop0 {
  margin-top: 0px;
}

#ov1  .marginTop1 {
  margin-top: 1px;
}

#ov1  .marginTop2 {
  margin-top: 2px;
}
#ov1  .marginTop3 {
  margin-top: 3px;
}

#ov1  .marginTop4 {
  margin-top: 4px;
}

#ov1  .marginTop5 {
  margin-top: 5px;
}
#ov1  .marginTop6 {
  margin-top: 6px;
}

#ov1  .marginTop7 {
  margin-top: 7px;
}

#ov1  .marginTop8 {
  margin-top: 8px;
}

#ov1  .marginTop9 {
  margin-top: 9px;
}

#ov1  .marginTop12 {
  margin-top: 12px;
}

#ov1  .marginTop13 {
  margin-top: 13px;
}

#ov1  .marginTop15 {
  margin-top: 15px;
}
#ov1  .marginTop18 {
  margin-top: 18px;
}

#ov1  .marginTop20 {
  margin-top: 20px;
}

#ov1  .marginTop22 {
  margin-top: 22px;
}

#ov1  .marginTop25 {
  margin-top: 25px;
}

#ov1  .marginTop28 {
  margin-top: 28px;
}

#ov1  .marginTop30 {
  margin-top: 30px;
}

#ov1  .marginTop40 {
  margin-top: 40px;
}

#ov1  .marginTop50 {
  margin-top: 50px;
}
#ov1  .marginTop80 {
  margin-top: 80px;
}

#ov1  .marginBottom2 {
  margin-bottom: 2px;
}

#ov1  .marginBottom4 {
  margin-bottom: 4px;
}

#ov1  .marginBottom5 {
  margin-bottom: 5px;
}
#ov1  .marginBottom6 {
  margin-bottom: 6px;
}

#ov1  .marginBottom8 {
  margin-bottom: 8px;
}

#ov1  .marginBottom12 {
  margin-bottom: 12px;
}

#ov1  .marginBottom20 {
  margin-bottom: 20px;
}

#ov1  .marginBottom40 {
  margin-bottom: 40px;
}

#ov1  .marginBottom50 {
  margin-bottom: 50px;
}


#ov1  .marginAuto {
  margin: auto;
}

#ov1  .left0 {
  left: 0;
}

#ov1  .top0 {
  top: 0;
}

#ov1  .top11 {
  top: 11px;
}

#ov1 .bottomNeg250 {
  bottom: -250px;
}

#ov1  .height40 {
  height: 40px;
  line-height: 40px;
}
#ov1  .height43 {
  height: 43px;
  line-height: 43px;
}

#ov1  .height24 {
  height: 24px;
}
#ov1  .height30 {
  height: 30px;
}
#ov1  .height36 {
  height: 36px;
  line-height: 36px;
}

#ov1  .height50 {
  height: 50px;
}
#ov1  .height54 {
  height: 54px;
}
#ov1  .height55 {
  height: 55px;
}
#ov1  .height56 {
  height: 56px;
}

#ov1  .height46 {
  height: 46px;
}

#ov1  .height30 {
  height: 30px;
  line-height: 30px;
}

#ov1  .height70 {
  height: 70px;
}

#ov1  .height130 {
  height: 130px;
}

#ov1  .height250 {
  height: 250px;
}
#ov1  .height254 {
  height: 254px;
}

#ov1  .height324 {
  height: 324px;
}

#ov1  .minHeight650 {
  min-height: 650px;
}

#ov1  .minHeight420 {
  min-height: 420px;
}

#ov1  .minHeight300 {
  min-height: 300px;
}

#ov1  .minWidth120 {
  min-width: 120px;
}

#ov1  .lineHeight15{
  line-height: 15px;
}
#ov1  .lineHeight16{
  line-height: 16px;
}
#ov1  .lineHeight20{
  line-height: 20px;
}

#ov1  .lineHeight21{
  line-height: 21px;
}
#ov1  .lineHeight24{
  line-height: 24px;
}
#ov1  .lineHeight32{
  line-height: 32px;
}

#ov1  .lineHeight46{
  line-height: 46px;
}
#ov1  .lineHeight51{
  line-height: 51px;
}

#ov1  .lineHeightReset{
  line-height: normal;
}

#ov1  .padding0 {
  padding: 0;
}

#ov1 .bottom0 {
  bottom: 0;
}

#ov1 .bottom8px {
  bottom: 8px;
}

#ov1 .left0 {
  left: 0;
}

#ov1 .positionAbsolute {
  position: absolute;
}

#ov1 .positionFixed {
  position: fixed;
}

#ov1 .positionWrapper {
  /* use when you need a generic element around one or more elements where one is absolutely positioned */
  position: relative;
}

 .positionRelative {
  position: relative;
}

#ov1  .padding2 {
  padding: 2px;
}
#ov1  .padding3 {
  padding: 3px;
}
#ov1  .padding4 {
  padding: 4px;
}

#ov1  .padding5 {
  padding: 5px;
}
#ov1  .padding10px6px {
  padding: 10px 6px;
}

#ov1  .padding8 {
  padding: 8px;
}

#ov1  .padding10 {
  padding: 10px;
}
#ov1  .padding12 {
  padding: 12px;
}

#ov1  .padding15 {
  padding: 15px;
}

#ov1  .padding20 {
  padding: 20px;
}

#ov1  .padding30 {
  padding: 30px;
}

#ov1  .padding40 {
  padding: 40px;
}

#ov1  .padding010 {
  padding: 0 10px;
}
#ov1  .padding015 {
  padding: 0 15px;
}
#ov1  .padding025 {
  padding: 0 25px;
}
#ov1  .padding515 {
  padding: 5px 15px;
}

#ov1  .padding1020{
  padding: 10px 20px;
}

#ov1  .padding2010{
  padding: 20px 10px;
}

#ov1  .padding2015 {
  padding: 20px 15px;
}

#ov1  .padding2520 {
  padding: 20px 20px;
}

#ov1  .padding17px {
  padding: 17px;
}

#ov1  .paddingRight0 {
  padding-right: 0;
}
#ov1  .paddingRight2 {
  padding-right: 2px;
}
#ov1  .paddingRight5 {
  padding-right: 5px;
}
#ov1  .paddingRight18 {
  padding-right: 18px;
}
#ov1  .paddingRight40 {
  padding-right: 40px;
}

#ov1  .paddingLeft2 {
  padding-left: 2px;
}

#ov1  .paddingLeft5 {
  padding-left: 5px;
}

#ov1  .paddingLeft6 {
  padding-left: 6px;
}

#ov1  .paddingLeft15 {
  padding-left: 15px;
}

#ov1  .paddingLeft20 {
  padding-left: 20px;
}
#ov1  .paddingLeft40 {
  padding-left: 40px;
}

#ov1  .paddingTop4 {
  padding-top: 4px;
}

#ov1  .paddingTop10 {
  padding-top: 10px;
}

#ov1  .paddingTop15 {
  padding-top: 15px;
}

#ov1  .paddingTop20 {
  padding-top: 20px;
}

#ov1  .positionTop68 {
  top: 68px;
}

#ov1  .paddingBottom12 {
  padding-bottom: 12px;
}

#ov1  .paddingBottom20 {
  padding-bottom: 20px;
}

#ov1  .letterSpacing0 {
  letter-spacing: 0;
}

#ov1  .letterSpacing02 {
  letter-spacing: 0.2px;
}

#ov1  .widthAuto {
  width: auto;
}

#ov1  .width100 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#ov1 .width360 {
  width: 360px;
}

#ov1 .width30 {
  width: 30px;
}
#ov1 .width34 {
  width: 34px;
}
#ov1 .width40 {
  width: 40px;
}

#ov1 .width46px {
  width: 46px;
}

#ov1 .width70px {
  width: 70px;
}

#ov1 .width75px {
  width: 75px;
}

#ov1 .width65px {
  width: 65px;
}

#ov1 .width80 {
  width: 80px;
}
#ov1 .width91 {
  width: 91px;
}
#ov1 .width95 {
  width: 95px;
}
#ov1 .width105 {
  width: 105px;
}

#ov1 .width110 {
  width: 110px;
}

#ov1 .width120 {
  width: 120px;
}
#ov1 .width160 {
  width: 160px;
}
#ov1 .width200 {
  width: 200px;
}
#ov1 .width260 {
  width: 260px;
}

#ov1 .width380 {
  width: 380px;
}
#ov1 .width400 {
  width: 400px;
}

#ov1 .width420{
  width: 420px;
}

#ov1 .width450 {
  width: 450px;
}
#ov1 .width600 {
  width: 600px;
}
#ov1 .width740 {
  width: 740px;
}

#ov1 .width950 {
  width: 950px;
}

#ov1  .cursorDefault {
  cursor: default;
}

#ov1 .backgroundTransparent {
  background: transparent;
}

#ob1 .fontWeight200 {
  font-weight: 200;
}

.fontWeight400 {
  font-weight: 400;
}

#ov1  .borderBottom0 {
  border-bottom: 0;
}

#ov1  .borderBottom1 {
  border-bottom: solid 1px;
}

#ov1 .fontWeight500 {
  font-weight: 500;
}

#ov1  .borderBottomLeftRaidus3 {
  border-bottom-left-radius: 3px !important;
}

#ov1 .colorWhiteForce {
  color: #fff !important; /* This text must always remain white */
}

#ov1 .colorBlack {
  color: #000;
}

#ov1  .borderBottomRightRaidus3 {
  border-bottom-right-radius: 3px !important;
}

#ov1 .disabled {
  pointer-events: none;
  opacity: 0.2;
}

#ov1 .disabled2 {
  pointer-events: none;
  opacity: 0.7;
}

#ov1 .disabled-icon {
  pointer-events: none;
}

#ov1 .disabled-icon:before,
#ov1 .disabled [class *= "ion-"]:before {
  opacity: 0.2;
}

#ov1 .overflowVisible {
  overflow: visible;
}

#ov1 .hoverUnderline:hover {
  text-decoration: underline !important;
}

#ov1 .blur {
  -webkit-filter: blur(1px);
}

#ov1 .blurMore {
  -webkit-filter: blur(5px);
}

#ov1 .nsfw {
  -webkit-filter: blur(20px) grayscale(1) contrast(0.5);
}

/* to fade out a visible element, add the fadeOut class */
/* to fade in an element with opacity 0, add the fadeIn class */

#ov1 .fadeOut {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(0, 0, 0.2, 1);
}

#ov1 .fadeIn {
  /* use fadeOut on items that should have fadeIn added to them */
  opacity: 1;
  pointer-events: auto;
  transition: opacity .3s cubic-bezier(0, 0, 0.2, 1);
}

#ov1 .foldIn {
  height: 0;
  padding: 0;
  overflow: hidden;
  transition: height 1s, padding 1s;
  pointer-events: none;
}

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

#ov1 .inlineBlock {
  display: inline-block;
}

#ov1 .zIndex1 {
  z-index: 1; /*use on absolutely positioned elemenets that need to stack above other elements with no z-index */
}

#ov1 .zIndex4 {
  z-index: 4;
}

.badge:after{
  content: attr(data-count);
  position: absolute;
  top: -5px;
  right: -4px;
  width: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  border-radius: 50%;
  color: white;
  background-color: #FFA41C;
  pointer-events: none;
}

#ov1 .alignCenter {
  text-align: center;
}

#ov1 .blockCenter {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#ov1 .marginCenter {
  margin-left: auto;
  margin-right: auto;
}

#ov1 .heightAuto {
  height: auto;
}

#ov1 .editableContent img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

/* add formChecked class after form has been checked for validity */
#ov1 .invalid,
#ov1 .formChecked input[type="text"].fieldItem:invalid,
#ov1 .formChecked input[type="email"].fieldItem:invalid,
#ov1 .formChecked input[type="url"].fieldItem:invalid,
#ov1 .formChecked .fieldItem-textarea:invalid,
#ov1 .formChecked input[type="number"].fieldItem:invalid,
#ov1 .formChecked input[type="text"].fieldItem:focus:invalid,
#ov1 .formChecked input[type="email"].fieldItem:focus:invalid,
#ov1 .formChecked input[type="url"].fieldItem:focus:invalid,
#ov1 .formChecked .fieldItem-textarea:focus:invalid,
#ov1 .forvmChecked input[type="number"].fieldItem:focus:invalid,
#ov1 .formChecked .validatable:invalid {
  border: 2px dashed rgba(89,1,1,0.8);;
  background-color: rgba(89,1,1,0.2);
  transition: border 0.3s, background-color 0.4s;
}

#ov1 .loading,
#ov1 #userPage .loading {
  position: relative;
  pointer-events: none;
}

#ov1 .loading:after,
#ov1 #userPage .loading:after {
  /* load a loading image on top */
  content: "\f3b3";
  font-family: Ionicons;
  font-size: 1.5em;
  color: rgba(255,255,255,0);
  pointer-events: none;
  display: block;
  position: absolute;
  background: rgb(0,0,0);
  opacity: 0.2;
  width: 100%;
  z-index: 1;
  top: 0;
  left: 0;
  border-radius: inherit;
  animation-name: loaderAnimation;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}


@-webkit-keyframes loaderAnimation {
  from {
    opacity: 0.2;
    color: rgba(255,255,255,0);
  }
  to {
    opacity: 0.9;
    color: rgba(255,255,255,1);
  }
}

/* turn off animations and transitions with this style */

#ov1.minEffects,
#ov1.minEffects *,
#ov1.minEffects #userPage,
#ov1.minEffects #userPage *,
#ov1.minEffects #obContainer,
#ov1.minEffects #obContainer *,
#ov1.minEffects #overlay,
#ov1.minEffects #sideBar,
#ov1.minEffects #pageNav,
#ov1.minEffects #statusBar {
  transition: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  transition-property: none !important;
  animation: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#ov1.minEffects #pageNav .popMenu-navBarSubMenu {
  border-left: 1px solid #444;
  border-right: 1px solid #444;
  border-bottom: 1px solid #444;
}

#ov1.minEffects .fadeOut,
#ov1.minEffects .statusBar.fadeOut,
#ov1.minEffects #pageNav .statusBar.fadeOut,
#ov1.minEffects #userPage .fadeOut,
#ov1.minEffects #userPage #pageNav .fadeOut,
#ov1.minEffects #userPage #pageNav .statusBar.fadeOut,
#ov1.minEffects #userPage #obContainer #content .statusBar.fadeOut {
  opacity: 0 !important;
}

#ov1.minEffects .fadeIn,
#ov1.minEffects .statusBar.fadeIn,
#ov1.minEffects #pageNav .statusBar.fadeIn,
#ov1.minEffects #userPage .fadeIn,
#ov1.minEffects #userPage #pageNav .fadeIn,
#ov1.minEffects #userPage #pageNav .statusBar.fadeIn,
#ov1.minEffects #userPage #obContainer #content .statusBar.fadeIn {
  opacity: 1 !important;
}

#ov1.minEffects #sideBar .sideBarSlidShow {
  display: none;
}

#ov1.minEffects #sideBar.sideBarSlid .sideBarSlidShow {
  display: block;
}

#ov1.minEffects #sideBar .chatConversation textarea,
#ov1.minEffects #sideBar .chatConversation textarea::-webkit-input-placeholder,
#ov1.minEffects #sideBar .chatConversation input,
#ov1.minEffects #sideBar .chatConversation input::-webkit-input-placeholder {
  color: #fff;
}

#ov1.minEffects .gridItemControls {
  display: none;
}

#ov1.minEffects .gridItemControls .btn-gridItemControl:hover,
#ov1.minEffects .userPage-subViews .gridItem:hover .gridItemControls,
#ov1.minEffects .homeView .gridItem:hover .gridItemControls {
  display: block;
}

#ov1.minEffects .btn .postConfirm {
  display: none;
}

#ov1.minEffects .confirm.btn .preConfirm {
  display: none;
}

#ov1.minEffects .confirm.btn .postConfirm {
  display: inline-block;
}

#ov1.minEffects #userPage #obContainer #content .labelWrap.fade {
  opacity: 0 !important;
}

#ov1.minEffects #userPage #obContainer #content .labelWrap.fadeIn {
  opacity: 1;
}

#ov1.minEffects #obContainer .taggle_placeholder,
#ov1.minEffects #userPage #obContainer .taggle_placeholder {
  display: none !important;
}

#ov1.minEffects #obContainer .unfilled,
#ov1.minEffects #userPage .unfilled {
  opacity: 0.35 !important;
}

#ov1.minEffects .minEffectsDarkBackground,
#ov1.minEffects #obContainer .minEffectsDarkBackground {
  background: #262626 !important;
}

#ov1.minEffects .addressFormOpened .buyWizardMap .blurMore {
  display: none;
}

#ov1.minEffects .user-page-header-slim {
  display: none;
}

#ov1.minEffects .user-page-header-slim.scrolledIntoView {
  display: block;
}

#ov1.minEffects .disabled,
#ov1.minEffects #userPage .disabled,
#ov1.minEffects #obContainer .disabled,
#ov1.minEffects #overlay .disabled,
#ov1.minEffects #sideBar .disabled,
#ov1.minEffects #pageNav .disabled,
#ov1.minEffects #statusBar .disabled {
  opacity: 0.2 !important;
}

#ov1.minEffects .disabled2,
#ov1.minEffects #userPage .disabled2,
#ov1.minEffects #obContainer .disabled2,
#ov1.minEffects #overlay .disabled2,
#ov1.minEffects #sideBar .disabled2,
#ov1.minEffects #pageNav .disabled2,
#ov1.minEffects #statusBar .disabled2 {
  opacity: 0.7 !important;
}

#ov1.minEffects .nsfw {
  background: #000 !important;
}

/* add a shadow and a glow, so modal close buttons are still barely visible if the user picks a bad color */
#ov1 .js-modal-close [class *= "ion-"]:before,
#ov1 #userPage .js-modal-close [class *= "ion-"]:before,
#ov1 #obContainer .js-modal-close [class *= "ion-"]:before,
#ov1 #userPage .btn.btn-c1 [class *= "ion-"]:before,
#ov1.minEffects .js-modal-close [class *= "ion-"]:before,
#ov1.minEffects #userPage .js-modal-close [class *= "ion-"]:before,
#ov1.minEffects #obContainer .js-modal-close [class *= "ion-"]:before,
#ov1.minEffects #userPage .btn.btn-c1 [class *= "ion-"]:before {
  text-shadow: 0 0 1px rgba(0,0,0,1), 0 0 2px rgba(255,255,255, 1) !important;
}


#ov1 #userPage .btn.btn-c1:not(.custCol-primary) [class *= "ion-"]:before {
  color: #fff !important;
}

/* hide unfinished elements */

#ov1 .TODO.TODO.TODO.TODO.TODO {
  background: #535353;
  opacity: 0.2;
  pointer-events: none;
}

#ov1 .TODO.TODO.TODO.TODO.TODO {
  display: none; /* hide in production */
}

.peersList {
  margin-top: 10px;
  padding-right: 30px;
  display: block;
  color: #9999A0;
  max-height: 200px;
  overflow: auto;
}

.peersList>ul{
  list-style-type: none;
  padding-left: 0;
}

.peersList>ul>li {
  padding-bottom: 5px;
}

.sslSwitch-radio {
  margin: auto;
  padding: 15px;
}

.sslSwitch-radio>input[type="radio"].fieldItem + label {
  padding: 0 0px 0 35px
}