<commit_before>/*========== scroll bars ==========*/
#obContainer::-webkit-scrollbar {
  width: 6px;
}

#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: 6px;
}

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

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

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

.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: .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;
}

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;
}

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;
}

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;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #eee;
  margin-top: -4px;
}

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

input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.9);
}

textarea {
  background: none;
  outline: none;
  appearance: 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;
}


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

#content {
  margin: auto;
  position: relative;
  width: 950px;
  z-index: 1;
}

#obContainer {
  transition: width 0.5s ease;
  width: calc(100% - 47px);
  transition: width 0.5s ease;
}

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

#pageNav {
  position: fixed;
  top: 0;
  -webkit-app-region: drag;
  z-index: 6;
}


.pageNavContainer {
  width: 100%;
  z-index: 3;
}

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

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

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

.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: 50px;
  width:230px;
  background-color: #252525;
  border-left: 0;
  height: calc(100% - 50px);
  z-index: 5;
  transition: right 0.5s ease;
  color: #DDD;
  -webkit-app-region: no-drag;
  box-sizing: border-box;
}

.chatOpen #sideBar {
  right: 0px;
}

#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-top-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 1;
  box-shadow: 0px 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;
}

.bar .btn {
  float: left;
}

#overlay,
.overlay {
  position: fixed;
  top: 50px;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(25,25,25,0.85);
  z-index: 4;
  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;
}

.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 [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%; }

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

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

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

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

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

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

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

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

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

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

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

.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;
  border-right: solid 1px #327EB8;
  width: 316px;
  padding: 0;
  box-sizing: border-box;
  transition: opacity .5s cubic-bezier(0, 0, 0.2, 1);
}

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

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

.gridItem {
  box-sizing: border-box;
  padding: 34px 32px;
  cursor: pointer;
  width: 317px;
  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);
  transition: padding-top .3s cubic-bezier(0, 0, 0.2, 1);
}

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

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

.userPage-subViews .gridItem:hover .itemImg,
.homeView .gridItem:hover .itemImg {
    box-shadow: 0px 0px 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: 0px 0px 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;
  border-radius: 3px;
  height: 230px;
  width: 250px;
}

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

.itemImg.itemImg-small {
  height: 82px;
  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 -1px -1px 0;
}

.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: 0px;
}

.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;
}

.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: 76px;
  width: 80px;
  transition: all .1s cubic-bezier(0, 0, 0.5, 1);
}

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

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

.thumbnail-largeTrimmed {
  height: 70px;
}

.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;
}

.row60 {
  margin-bottom: 60px;
}

.row100 {
  margin-bottom: 100px;
}

.rowTop10 {
  margin-top: 10px;
}

.rowTop15 {
  margin-top: 15px;
}

.rowTop20 {
  margin-top: 20px;
}

.rowTop30 {
  margin-top: 20px;
}

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

.row320 {
  margin-bottom: 320px;
}

.pad5 {
  padding-left: 5px;
  padding-right: 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: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  /* use fadeIn and fadeOut to change opacity */
  transition: opacity .05s cubic-bezier(0, 0, 0.2, 1);
  padding-top: 25px;
  z-index: 1;
}

.modal.modal-navOffset {
  top: 50px;
}

.modalHolder {
  /* use to contain modals inside views */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 7;
}

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

#ov1.chatOpen .modal-child {
  right: 230px;
}


.modal.modal-navOffset .modal-child {
  margin-top: 25px;
}

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

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

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

.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;
  transition: margin-left 0.5s ease;
}

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

#cboxOverlay {
  z-index: 11;
  top: 50px;
  height: 100%;
  width: calc(100% - 30px);
}

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

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

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

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

h3 {
  font-size: 18px;
}

h5 {
  font-size: 15px;
}

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

.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 .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;
}

/*========== 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 0px -70px 112px -62px rgba(37,37,37,.9);
  top: 50px;
}

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

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

.modal-childMain {
  border-radius: 3px;
  background-color: #327eb8;
  box-shadow: 0px 0px 10px #383838;
}

.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;
}

.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;
}

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

.modal-hero.iconBackground h1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.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;
}

.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);
  padding: 0 1px 1px 0;
}

.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 rbga(255,255,255,1);

}

.box-borderDashed {
  border: 5px dashed #fff;
  box-sizing: border-box;
  height: calc(100% - 50px) !important;
  animation: borderDashedFade .35s normal linear;
}

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

#obContainer.box-borderDashed {
  padding-top: 16px;
}

.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 {
  color: #fff;
  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 {
  top: 17px;
  left: 168px;
}

.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: 17px;
  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: 15px;
  border-radius: 3px;
  margin-top: 12px;
  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-large {
  height: 42px;
  font-size: 15px;
  line-height: 42px;
  float: left;
  background-color: #086A9E; /* default color */
  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:active,
.btn.active {
  box-shadow: inset 0px 0px 6px 0px rgba(0,0,0,0.2);
  opacity: .75;
}

.btn.btn-c1:active,
.btn.btn-c1.active {
  background-color: #215175;
  box-shadow: inset 0px 0px 6px 0px rgba(0,0,0,0.2);
}

.btn.btn-c1 .toggle-txt {
  opacity: .20;
}<commit_msg>Remove opacity from active buttons<commit_after>/*========== scroll bars ==========*/
#obContainer::-webkit-scrollbar {
  width: 6px;
}

#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: 6px;
}

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

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

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

.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: .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;
}

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;
}

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;
}

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;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #eee;
  margin-top: -4px;
}

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

input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.9);
}

textarea {
  background: none;
  outline: none;
  appearance: 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;
}


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

#content {
  margin: auto;
  position: relative;
  width: 950px;
  z-index: 1;
}

#obContainer {
  transition: width 0.5s ease;
  width: calc(100% - 47px);
  transition: width 0.5s ease;
}

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

#pageNav {
  position: fixed;
  top: 0;
  -webkit-app-region: drag;
  z-index: 6;
}


.pageNavContainer {
  width: 100%;
  z-index: 3;
}

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

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

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

.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: 50px;
  width:230px;
  background-color: #252525;
  border-left: 0;
  height: calc(100% - 50px);
  z-index: 5;
  transition: right 0.5s ease;
  color: #DDD;
  -webkit-app-region: no-drag;
  box-sizing: border-box;
}

.chatOpen #sideBar {
  right: 0px;
}

#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-top-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 1;
  box-shadow: 0px 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;
}

.bar .btn {
  float: left;
}

#overlay,
.overlay {
  position: fixed;
  top: 50px;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(25,25,25,0.85);
  z-index: 4;
  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;
}

.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 [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%; }

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

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

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

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

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

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

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

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

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

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

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

.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;
  border-right: solid 1px #327EB8;
  width: 316px;
  padding: 0;
  box-sizing: border-box;
  transition: opacity .5s cubic-bezier(0, 0, 0.2, 1);
}

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

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

.gridItem {
  box-sizing: border-box;
  padding: 34px 32px;
  cursor: pointer;
  width: 317px;
  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);
  transition: padding-top .3s cubic-bezier(0, 0, 0.2, 1);
}

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

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

.userPage-subViews .gridItem:hover .itemImg,
.homeView .gridItem:hover .itemImg {
    box-shadow: 0px 0px 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: 0px 0px 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;
  border-radius: 3px;
  height: 230px;
  width: 250px;
}

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

.itemImg.itemImg-small {
  height: 82px;
  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 -1px -1px 0;
}

.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: 0px;
}

.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;
}

.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: 76px;
  width: 80px;
  transition: all .1s cubic-bezier(0, 0, 0.5, 1);
}

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

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

.thumbnail-largeTrimmed {
  height: 70px;
}

.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;
}

.row60 {
  margin-bottom: 60px;
}

.row100 {
  margin-bottom: 100px;
}

.rowTop10 {
  margin-top: 10px;
}

.rowTop15 {
  margin-top: 15px;
}

.rowTop20 {
  margin-top: 20px;
}

.rowTop30 {
  margin-top: 20px;
}

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

.row320 {
  margin-bottom: 320px;
}

.pad5 {
  padding-left: 5px;
  padding-right: 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: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  /* use fadeIn and fadeOut to change opacity */
  transition: opacity .05s cubic-bezier(0, 0, 0.2, 1);
  padding-top: 25px;
  z-index: 1;
}

.modal.modal-navOffset {
  top: 50px;
}

.modalHolder {
  /* use to contain modals inside views */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 7;
}

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

#ov1.chatOpen .modal-child {
  right: 230px;
}


.modal.modal-navOffset .modal-child {
  margin-top: 25px;
}

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

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

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

.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;
  transition: margin-left 0.5s ease;
}

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

#cboxOverlay {
  z-index: 11;
  top: 50px;
  height: 100%;
  width: calc(100% - 30px);
}

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

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

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

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

h3 {
  font-size: 18px;
}

h5 {
  font-size: 15px;
}

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

.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 .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;
}

/*========== 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 0px -70px 112px -62px rgba(37,37,37,.9);
  top: 50px;
}

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

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

.modal-childMain {
  border-radius: 3px;
  background-color: #327eb8;
  box-shadow: 0px 0px 10px #383838;
}

.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;
}

.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;
}

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

.modal-hero.iconBackground h1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.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;
}

.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);
  padding: 0 1px 1px 0;
}

.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 rbga(255,255,255,1);

}

.box-borderDashed {
  border: 5px dashed #fff;
  box-sizing: border-box;
  height: calc(100% - 50px) !important;
  animation: borderDashedFade .35s normal linear;
}

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

#obContainer.box-borderDashed {
  padding-top: 16px;
}

.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 {
  color: #fff;
  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 {
  top: 17px;
  left: 168px;
}

.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: 17px;
  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: 15px;
  border-radius: 3px;
  margin-top: 12px;
  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-large {
  height: 42px;
  font-size: 15px;
  line-height: 42px;
  float: left;
  background-color: #086A9E; /* default color */
  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:active,
.btn.active,
.btn.btn-c1:active,
.btn.btn-c1.active {
  box-shadow: inset 0px 0px 6px 0px rgba(0,0,0,0.4), inset 0px 0px 12px 0px rgba(255,255,255,0.1);
}

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

.btn.btn-c1 .toggle-txt {
  opacity: .20;
}
{'fraction_non_alphanumeric': 0.15854038341753754, 'fraction_numerical': 0.06278981244376773, 'mean_word_length': 3.321917296044268, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 55, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 16, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1146555', 'n_tokens_mistral': 26602, 'n_tokens_neox': 23428, 'n_words': 5305}