body {
  overflow-x: unset !important;
}

.orderbook-nav-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 91.5rem;
  padding: 0 2rem 0 2rem;
}

.orderbook-container {
  max-width: 91.5rem;
  margin: 0 auto;
  padding: 0 2rem;
  z-index: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-around;
}

.full-width-orderbook .orderbook-container {
  max-width: none;
  padding: 0px;
}

@media (max-width: 992px) {
  .orderbook-container {
    padding: 0 0.8rem;
  }
}

.orderbook {
  background-color: #FAFAFA;
}

.order-book-filters {
  width: 100%;
  border: 1px solid #979797;
  background-color: #f9f9f9;
  padding: 0.3rem 0.3rem;
  display: flex;
  flex-direction: row;
}

table.order-book-table {
  width: 100%;
  margin-bottom: 2.5rem;
  border: 1px solid #979797;
}

table.no-border {
  border: 0 !important;
}

.order-book-mobile-header {
  width: 100%;
  border: 1px solid #979797;
  border-bottom: none;
  padding: 10px;
  background-color: #FAFAFA;
}

table.order-book-table thead {
  background-color: #f9f9f9;
}

table.order-book-table thead th {
  padding: 1rem 1rem;
  font-weight: 600;
  text-align: left;
}

@media (max-width: 768px) {
  table.order-book-table thead th {
    padding: 0.5rem 0.5rem;
  }
}

.connect-statement-set-title, .get-an-offer {
  margin-top: 3rem;
  display: flex;
  align-items: center;
}

.mobile .connect-statement-set-title, .get-an-offer {
  margin-top: 1rem;
}

table.order-book-table tbody td {
  padding-left: 1rem;
}

@media (max-width: 768px) {
    table.order-book-table tbody td {
    padding-left: 0.5rem;
  }
}

table.order-book-table thead th .fa {
  padding-left: 0.250rem;
}

table.order-book-table tbody tr {
  background-color: #ffffff;
  -webkit-transition: background-color 180ms cubic-bezier(0.2, 0.3, 0.25, 0.9);
          transition: background-color 180ms cubic-bezier(0.2, 0.3, 0.25, 0.9);
}

table.order-book-table tbody tr:hover {
  background-color: #f5f5f5;
}

table.order-book-table tfoot {
  background-color: #f9f9f9;
}

table.order-book-table tr {
  border-bottom: 1px solid #979797;
}

table.order-book-table td {
  padding: 0.5rem 0.5rem;
}

.order-book-table-sub-item {
  font-size: 80%;
  color: rgb(129, 148, 155);
}

.col-8-10 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 80% !important;
}

.col-2-10 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20% !important;
}

/* Source: https://www.w3schools.com/howto/howto_css_modals.asp */
/* The Modal (background) */
.modal-container {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  justify-content: center;
  align-items: center;
}

/* This is to make the modal stretch along with the page */
.seller-dashboard > .modal-container {
  position: absolute;
  align-items: flex-start;
}

/* This is to make the modal stretch along with the page */
.seller-dashboard .modal-content {
  top: 10vh;
  position: absolute;
}

.modal-on {
  display: flex;
}

.mobile.modal-on {
  align-items: center;
}

.modal-off {
    display: none;
}

/* Modal Content/Box */
/* Please, be careful when adding modals. Big modals should follow the guidelines set by */
/* .seller-dashboard > .modal-container {
   and
   .seller-dashboard .modal-content {  */
.modal-content {
  background-color: #fefefe;
  border-radius: 3px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #888;
  max-height: 80%;
  overflow-y: auto;
  overflow-x: hidden;
}

.desktop .modal-content {
  padding: 20px;
  width: 450px;
}

.modile .modal-content {
  width: 95%;
  padding: 20px 10px;
}

.modal-content h2 {
  color: #2A313B;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: 600;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.selection-box-mobile {
  width: 100%;
  margin: 10px 0;
  border-radius: 3px;
  border: 1px solid #e1e1e3;
  background-color: #f9f9f9;
  overflow-x: scroll;
}

.selection-box-mobile .Collapsible__contentInner {
  max-width: 100%;
  overflow-x: scroll;
}

.selection-box-mobile .Collapsible {
  border: 1px solid #e1e1e3;
}

.selection-box-mobile .Collapsible__trigger {
  font-weight: 600;
  padding: 15px 0;
  display: block;
}

.selection-box-mobile .Collapsible__contentInner {
  background-color: white;
  padding: 10px;
  border-top: 1px solid #e1e1e3;
}

.selection-box-mobile .is-open {
  border-left: 2px solid red;
  padding-left: 5px;
}

.selection-box-mobile .is-closed {
  padding-left: 7px;
}

.selection-box-mobile .order-book-table {
  margin-bottom: 0;
}

.selection-box-mobile .order-book-table th, .selection-box-mobile .order-book-table td {
  padding: 0 5px;
  font-size: 12px;
}

.selection-box {
  width: 100%;
  margin: 10px 0;
  display: flex;
  border-radius: 3px;
  border: 1px solid #e1e1e3;
  height: 500px;
  max-height: 500px;
  background-color: #f2f2f2;
}

.selection-menu {
  flex-grow: 2;
  flex-basis: 20%;
  width: 20%;
  background-color: #f2f2f2;
}

.selection-content {
  flex-grow: 8;
  flex-basis: 80%;
  width: 80%;
  max-height: 500px;
  overflow-y: scroll;
  border-left: 1px solid #e1e1e3;
  background-color: white;
}

.selection-button {
  border-bottom: 1px solid #e1e1e3;
  width: 100%;
  text-align: left;
  background-color: white;
  display: block;
  padding: 17px;
  cursor: pointer;
  font-size: 1.125rem;
  color: #2a313b;
}

.selection-button:hover {
  color: black;
}

.selected {
  border: 1px solid #E1E1E3;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.35);
  border-radius: 0px;
}

.live-offers-track-list-container {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
}

.track-selection-chart-desktop-container {
  width: 100%;
  background: #FFFFFF;
  display: flex;
  border-radius: 3px 3px 0 0;
  border: 1px solid #E1E1E3;
  padding: 10px 15px 10px 15px;
}

.track-selection-chart-desktop-container > div {
  width: 50%;
}

.track-selection-chart-mobile-container {
  width: 100%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 3px 3px 0 0;
  border: 1px solid #E1E1E3;
  padding: 10px 15px 10px 15px;
}

.track-selection-chart-mobile-container > div {
  width: 100%;
}

.track-selection-chart-mobile-container > div:nth-of-type(2) {
  margin-top: 10px;
}

.track-selection-chart-explanation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.track-selection-chart-explanation div {
  padding-left: 20px;
  font-style: italic;
  font-size: 18px;
  color: #2A313B;
  width: 400px;
}

.pie-chart-label {
  border-radius: 1px;
}

.desktop .pie-chart-label {
  min-width: 27px;
  min-height: 27px;
  width: 27px;
  height: 27px;
}

.mobile .pie-chart-label {
  min-width: 15px;
  min-height: 15px;
  width: 15px;
  height: 15px;
}

.pie-chart-value {
  margin-left: 7px;
  font-weight: 600;
}

.desktop .pie-chart-value {
  font-size: 36px;
}

.mobile .pie-chart-value {
  font-size: 18px;
}

.mobile .pie-chart-label {
  font-size: 14px;
}

.desktop .pie-chart-label {
  font-size: 24px;

}

.track-selection-chart-subtitle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5px 10px 5px 10px;
}

.track-selection-chart-mobile-container * {
  color: #2A313B;
  font-weight: 400;
}

.track-selection-subtitle-container {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.live-offers-title-separator {
  height: 0px;
  border: 1px solid #E1E1E3;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
}

.track-list .live-offers-title-separator {
  margin-bottom: 3px;
}

.mobile .track-list .live-offers-title-separator {
  width: 150px;
}

.desktop .track-list .live-offers-title-separator {
  width: 207px;
}

.track-selection-chart-container > h2 {
  font-size: 20px;
  color: #2A313B;
}

.track-selection-chart-explanation > h3 {
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  color: #2A313B;
}

.track-selection-chart-explanation > label {
  font-size: 18px;
  color: #2A313B;
}

.desktop .track-selection-chart-explanation > label {
  width: 70%;
}

.mobile .track-selection-chart-explanation > label {
  width: 90%;
}

.desktop .chart-subtitle-entry .live-offers-title-separator {
  width: 150px;
}

.mobile .chart-subtitle-entry .live-offers-title-separator {
  width: 90px;
}

.track-list {
  padding: 20px;
  border: 1px solid #e1e1e3;
  margin: 0 0;
  color:#2A313B;
}

.track-list::-webkit-scrollbar
{
  width:8px;
}

.track-list::-webkit-scrollbar-thumb
{
	border-radius: 5px;
}

.included-track-list::-webkit-scrollbar
{
	background-color:#FFFFFF;
}

.included-track-list::-webkit-scrollbar-thumb
{
	background-color: #C4C4C4;
}

.excluded-track-list::-webkit-scrollbar
{
  background-color:#F8F8F8;
  opacity: 0.5;
}

.excluded-track-list::-webkit-scrollbar-thumb
{
	background-color: #C4C4C4;
  opacity: 0.5;
}

.track-list.excluded-track-list {
  border-right-width: 2px;
}

.included-track-list {
  background-color: #FFFFFF;
}

.excluded-track-list {
  background-color: #F8F8F8;
}

.track-list .track-list-header {
  display: flex;
  font-size: 24px;
  margin-bottom: 0px;
}

.track-list .track-list-header img {
  font-size: 24px;
  margin-left: 5px;
  align-self: center;
}

.track-list h2 {
  font-size: 18px;
}

.track-list td {
  font-size: 16px;
}

.track-list table {
  text-align: left;
  margin-left: 7px;
}

.track-list table th {
  text-align: left;
}

.excluded-track-list .track-list-table .track-list-table-row {
  opacity: 0.6;
}

.included-track-list .track-list-table .track-list-table-row {
  opacity: 1.0;
}

.track-list-table-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 7px;
  margin-bottom: 7px;
}

.track-list-table-row > div {
  font-size: 16px;
}

@media (max-width: 768px) {
  .track-list-table-row > div {
    font-size: 12px;
  }
}

.track-list-table-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-weight: 600;
  padding-right: 20px;
}

.track-list-table-content {
  display: flex;
  flex-direction: column;
  height: calc(100% - 35px);
  overflow-y: auto;
  padding-right: 20px;
}

.track-list-show-more{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-top: 15px;
}

.orderbook-dashboard-select {
  background-color: white !important;
  font-family: Helvetica;
  font-size: 16px;
  padding: 9px !important;
}

.navigation-mobile {
  display: block;
  margin: 0 0 0.675rem 0;
  font-size: 16px;
  font-family: Helvetica;
  color: #828282;
}

@media (min-width: 768px) {
  .navigation-mobile {
    display: none;
  }
}

.seller-dashboard {
  padding: 0 !important;
}

.seller-dashboard > h1 {
  margin-top: 50px;
}

@media (max-width: 768px) {
  .seller-dashboard > h1 {
    margin-top: 20px;
  }
}

.connected-statement-sets {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.invisible {
  width: 32%;
  min-width: 300px;
  height: 192px;
  border: 1px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.statement-set-header span {
  float: right;
  margin-left: auto;
  margin-right: 20px;
  margin-top: 20px;
  cursor: pointer;
}
@media (min-width: 768px) {
  .statement-set-header span {
    font-size: 1.125rem;
  }
}

.statement-set-header span:hover {
  color: #2480ff;
}

.statement-set-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50%;
}

.statement-set-buttons > button {
  width: 49%;
  font-size: 10pt !important;
  margin: 0 !important;
}

.-red:disabled {
  background-color: #f5abab !important;
  cursor: not-allowed !important;
}

.new-statement-set-button {
  width: 100%;
  height: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.offer-expire {
  white-space: nowrap;
  flex-basis: 30%;
}

.expiration {
  font-size: 300%;
}

.button.-solid.-black {
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  color: #ffffff;
  background-color: black;
  border-radius: 0.125rem;
  -webkit-transition: background-color 240ms cubic-bezier(0.2, 0.3, 0.25, 0.9);
          transition: background-color 240ms cubic-bezier(0.2, 0.3, 0.25, 0.9);
  text-decoration: none;
  display: inline-block;
}

@media (min-width: 768px) {
  .button.-solid.-green {
    font-size: 1rem;
    border-radius: 0.125rem;
  }
}

.button.-black {
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  color: #ffffff;
  background-color: black;
  border-radius: 0.125rem;
  -webkit-transition: background-color 240ms cubic-bezier(0.2, 0.3, 0.25, 0.9);
          transition: background-color 240ms cubic-bezier(0.2, 0.3, 0.25, 0.9);
  text-decoration: none;
  display: inline-block;
}

@media (min-width: 768px) {
  .desktop-margin-left {
    margin-left: 30px !important;
  }
}

/* For the OrderBook Overview and other places that need these toggles */
/* Based on https://www.w3schools.com/howto/howto_css_switch.asp */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFFFFF;
  -webkit-transition: .4s;
  transition: .4s;
  border: 1px solid #E1E1E3;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 1px;
  -webkit-transition: .4s;
  transition: .4s;
  background: #FAFAFA;
  border: 1px solid #E1E1E3
}

input:checked + .slider {
  background: linear-gradient(90deg, #6FCF97 0%, #25AB5D 100%);;
}

input:checked + .slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 10px;

}

.slider.round:before {
  border-radius: 50%;
}

.-disabled.-green {
  cursor: not-allowed !important;
  opacity: 0.5;
}

.ob-title {
  font-size: 48px;
  font-weight: 300;
}

@media (max-width: 768px) {
  .ob-title {
    font-size: 36px;
  }
}

.obo-input-box {
  align-self: flex-start;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}

.obo-input-box * {
  background-color: white;
  color: #2A313B;
  font-size: 16px;
}

.ob-overview-input {
  outline: none;
  border-style: none;
  text-align: left;
  padding: 0px;
  max-width: 1000px;
}

.ob-overview-input::placeholder {
  color: rgba(42, 49, 59, 0.5);
}

.ob-overview-input-warning {
  color: #992311;
  background-color: #FCFAA4 ;
  font-size: 10px;
}

.order-confirmation > p:nth-of-type(2) {
  font-weight: 700;
}

.order-confirmation > p:nth-of-type(1) {
  margin-bottom: 3px;
}

.countdown-bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  left: 0;
  right: 0;
  display: flex;
  z-index: 1;
}

.countdown-bottom-bar-description {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px !important;
  align-self: flex-right;
}

.countdown-bottom-bar-panel {
  width: 40%;
  background-color: #EB5757;
  color: white;
  padding: 10px;
  display: flex;
  align-items: left;
  justify-content: center;
}

.countdown-bottom-bar-panel > label {
  margin-left: 5px;
  margin-right: 5px;
  align-self: flex-end;
  margin-bottom: 5px;
  flex-basis: 50%;
  text-align: end;
}

.countdown-bottom-bar-panel > div {
  font-size: 48px;
  align-self: flex-end;
  flex-basis: 50%;
}

@media (max-width: 992px) {
  .countdown-bottom-bar-panel > div {
    font-size: 20px;
  }
}

.countdown-bottom-bar-description {
  width: 70%;
  border-right: none;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  display: flex;
  align-items: center;
}

@media (min-width: 1200px) {
  .countdown-bottom-bar-description {
    padding-left: 10%;
  }
}

@media (max-width: 992) {
  .countdown-bottom-bar-description {
    width: 40% !important;
  }
}

@media (max-width: 768px) {
  .countdown-bottom-bar-description {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

.countdown-angled {
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 70px solid white;
  border-bottom: none;
  border-right: 30px solid #EB5757;
}

@media (min-width: 993px) {
  .countdown-angled {
    border-top-width: 90px;
  }
}

.link {
  color: rgb(130, 130, 130);
  text-decoration: underline !important;
  font-size: 13px;
}


.tooltip {
  background-color: #fff !important;
  border-color: #252525 !important;
  border-style: solid !important;
  border-width: 1px !important;
  color: #252525 !important;
  max-width: 300px;
  text-align: center;
  opacity:1 !important;
}

.pagination {
  display: inline-block;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

.pagination li {
  display: inline-block;
}

.pagination .active {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .dashboard .content {
    -ms-flex-preferred-size: 58.3%;
    flex-basis: 75% !important;
  }
}

.dashboard .content {
  flex-grow: 1 !important;
}

.order-list {
  min-height: 400px;
  border: 1px solid #979797;
}

.beta {
  font-size: 85%;
  margin-top: 40px;
  margin-left: 5px;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .beta {
    font-size: 17px;

  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .beta {
    font-size: 15px;
  }
}

.obo-loading {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.orderable-table th {
  padding-top: 17px !important;
  padding-bottom: 17px !important;
}

.orderable-table th .name-icon-wrapper {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .orderable-table th {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}

.order-book-overview h1 {
  font-size: 55px;
}

@media (max-width: 568px) {
  .order-book-overview h1 {
    font-size: 28px;
  }
}

.account-creation-root-container {
  width: 100%;
  height: auto;
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 45px;
  background-color: #F8F8F8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.account-creation-root-container > div {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width: 580px;
}

.account-creation-root-container > .account-creation-root.add-statement-set-root {
  min-width: 290px;
}

.contact-info-and-login-container {
  background-color: #FFFFFF;
}

.account-creation-header {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: #f8f8f8;
}

.account-creation-header-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.account-creation-root.sell-side-create-account-root .account-creation-header-wrapper,
.account-creation-root.sell-side-complete-account-root .account-creation-header-wrapper,
.account-creation-root.add-statement-set-root .account-creation-header-wrapper {
  padding-bottom: 45px;
}

.create-account-warning {
  padding: 10px;
  background-color: rgba(242, 201, 76, 0.2);
  border: 1px solid #F2C94C;
  border-radius: 3px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 16px;
  text-align: left;
}


@media (max-width: 768px) {
  .create-account-warning {
    margin-right: 10px;
    margin-left: 10px;
  }
}

.account-creation-verification-description {
  padding-left: auto;
  padding-right: auto;
  text-align: center;
}

.account-creation-verification-description > p {
  font-size: 14px;
  margin-bottom: 0.5rem !important;
}

.pending-deals {
  background-image: url(/static/images/orderbook/attention.svg);
  background-position: right;
  background-origin: content-box;
}

.statement-set-title {
  font-size: 20px;
  font-weight: 700;
  margin-top: 37px;
}

@media (max-width: 768px) {
  .statement-set-title {
    margin-top: 0px !important;
  }
}

.modal-center {
  align-items: center;
}

.mobile.modal-max-400 > .modal-content {
  max-width: 400px !important;
}

.connect-statement-set-custom-valuation * {
  font-weight: 400;
  text-align: center;
  color: #2A313B;
}

.connect-statement-set-custom-valuation > h2 {
  font-size: 20px;
}

.connect-statement-set-custom-valuation > label {
  font-size: 16px;
}

#modal-root .modal-content.rx-modal.add-statement-set-modal {
  max-width: 900px;
  width: 900px;
}

.account-creation-root.add-statement-set-root {
  max-width: 900px;
}

.select-statement-set {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
}

.mobile .select-statement-set {
  flex-direction: column;
}

.select-statement-set > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile .add-1st-statement-set {
  padding: 20px 15px;
}

.add-1st-statement-set {
  border: 1px solid #E1E1E3;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  padding: 40px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  max-width: 900px;
  width: 100%;
}

.select-statement-set > div > button {
  border: 1px solid #E1E1E3;
  box-sizing: border-box;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  width: 90%;
  padding: 10px;
  margin-top: 10px;
  height: 70px;
  outline: none;
}

.mobile .select-statement-set > div > button {
  width: 100%;
  font-size: 14px;
}

.select-statement-set > div > p {
  margin-bottom: 10px;
  width: 90%;
  font-size: 16px;
}

.select-statement-set > div > h2 {
  font-size: 20px;
  padding-top: 10px;
  color: #2A313B;
}

.who-pay-you-royalties {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: stretch;
  width: 90%;
  margin-top: 10px;
}

.mobile .who-pay-you-royalties {
  width: 100%;
}

.who-pay-you-royalties > .separator {
  flex-basis: 10px;
}

.button-with-image,
.royalty-payor-logo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border: 1px solid #E1E1E3;
  box-sizing: border-box;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  padding: 10px 10px;
  flex-grow: 1;
  width: inherit;
  margin: 1px;
  outline: none;
}

.button-with-image > img,
.royalty-payor-logo > img {
  padding: 15px 0px;
  height: 110px;
  width: 100px;
}

.mobile .button-with-image > img,
.mobile .royalty-payor-logo > img {
  height: 70px;
  width: 70px;
}

.mobile .button-with-image > label,
.mobile .royalty-payor-logo > label {
  font-size: 11.8px;
}

.desktop .button-with-image > label,
.desktop .royalty-payor-logo > label {
  font-size: 14px;
}

.place-order-select-term-container .faded,
.select-statement-set .faded {
  background: rgba(0, 0, 0, 0.2);
}

.coming-soon {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border: 1px solid #E1E1E3;
  box-sizing: border-box;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  border-color: #E1E1E1;
  padding: 10px 10px 10px 10px;
  flex-grow: 1;
  background-color: #F2F2F2;
  color: #C4C4C4;
  font-weight: 600;
  width: inherit;
  margin: 1px;
  outline: none;
}

.mobile .coming-soon > label {
  font-size: 11.8px;
}

.royalty-payor-logo.selected {
  border: 2px solid #6FCF97;
  margin: 0px;
}

.button-with-image.selected {
  border: 2px solid #6FCF97;
  margin: 4px;
}

.add-1st-statement-set > .separator {
  width: 100%;
  height: 0px;
  border-top: 1px solid #E1E1E1;
  margin-top: 40px;
  margin-bottom: 20px;
}

.dummy-royalty-payor-logo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.dummy-royalty-payor-logo > img {
  width: 135px;
  height: 100px;
}

.statement-set-credentials-text,
.statement-set-credentials-form {
  display: flex;
  flex-direction: column;
}

.add-1st-statement-set .select-sub-account-containter > .statement-set-credentials-text > h2 {
  padding-top: 20px;
}

.mobile .add-statement-set.add-1st-statement-set .statement-set-credentials-text > h2 {
  padding-top: 0px;
}

.statement-set-credentials-text > h2 {
  align-self: center;
  padding-top: 10px;
}

.statement-set-credentials-text > p {
  align-self: center;
  width: 90%;
}

.add-statement-set-form-rows {
  width: 100%;
}

.desktop .add-statement-set-form-rows {
  padding: 0px 20px;
}

.mobile .add-statement-set-form-rows {
  padding: 0px 10px;
}

.text-field-with-feedback {
  width: 100%;
}

.text-field-with-feedback > .input-and-icon-container {
  width: 100%;
  display: flex;
  border: 0;
  border-bottom: 1px solid;
}

.text-field-with-feedback > .input-and-icon-container.invalid-field {
  border-bottom: 1px solid #EB5757;
}

.text-field-with-feedback > .input-and-icon-container > input {
  border: 0;
  flex-basis: 80%;
  background-color: inherit;
}

.text-field-with-feedback > .input-and-icon-container > .form-feedback-icon-container {
  flex-basis: 20%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-statement-set-credentials {
  background-color: #6FCF97;
  border-radius: 3px;
  margin-bottom: 20px;
}

.submit-statement-set-credentials > span {
  color: #ffffff !important;
}

.form-feedback-icon.valid-field {
  color: #6FCF97;
  background-color: inherit;
}

.form-feedback-icon.invalid-field {
  background-color: inherit;
  color: #EB5757;
}

#statement-set-credentials-data-disclosure {
  font-size: 9px !important;
  line-height: 10px;
  margin-top: 20px;
}

.mobile #statement-set-credentials-data-disclosure {
  margin-bottom: 0px;
}

.your-information-is-secured {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #2A313B;
  font-size: 16px;
  font-weight: 400;
}

.mobile .your-information-is-secured {
  padding-top: 20px;
}

.your-information-is-secured > * {
  margin-bottom: 0px;
}

.your-information-is-secured > img {
  margin-bottom: 10px;
}

.your-information-is-secured > p {
  width: 60%;
  text-align: center;
}

.mobile .add-statement-set .your-information-is-secured > p {
  width: 95%;
}

.mobile .add-statement-set .your-information-is-secured > * {
  font-size: 12.8px;
}
.select-sub-account {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.select-sub-account > p {
  text-align: left;
}

.add-statement-set h2, .add-statement-set p {
  font-weight: 400;
  color: #2A313B;
}

.add-statement-set h2 {
  font-size: 20px;
}

.add-statement-set p {
  font-size: 16px;
}

.mobile .add-statement-set h2 {
  font-size: 16px;
}

.mobile .add-statement-set p {
  font-size: 14px;
}

.contact-info-and-login {
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-info-and-login > h2, .contact-info-and-login > p {
  font-weight: 400;
  color: #2A313B;
}

.contact-info-and-login > h2{
  font-size: 20px;
}

.contact-info-and-login > p{
  font-size: 16px;
}

.contact-info-and-login > p {
  align-self: flex-start;
  padding-left: 40px;
}

#seller-account-create-next-step {
  background-color:  #6FCF97;
  border-radius: 3px;
}

.form-row-container {
  margin-bottom: 20px;
}

.form-row-container.seller-create-account-wrapable-row {
  margin-bottom: 0px;
}

.form-row-container.seller-create-account-wrapable-row > div {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.seller-form-row.seller-create-account-wrapable-row > div {
  flex: 1 1 130px;
  min-width: 130px;
  padding-left: 3px;
  padding-right: 3px;
  margin-bottom: 20px;
}

.mobile .contact-info-and-login {
  padding: 40px 20px;
}

.password-requisite-hint{
  margin-top: 5px;
}

.order-book-totals-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: #2A313B;
  justify-content: space-around;
}

.mobile .order-book-totals-container {
  flex-direction: column;
}

.order-book-totals {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0px 30px 0px;
}

.order-book-totals > *:not(:last-child) {
  margin-bottom: 10px;
}

.mobile .order-book-totals {
  padding: 0px 0px 40px 0px;
}

.order-book-totals > div {
  font-size: 48px;
  font-weight: 300;
  line-height: normal;
  text-align: center;
}

.order-book-totals > label {
  font-weight: 300;
  font-size: 18px;
  line-height: normal;
  text-align: center;
}

.yellow-circle {
  color: #F2C94C;
}

.green-circle {
  color: #6FCF97;
}

#form-seller-account {
  color: #828282;
  font-size: 16px;
  padding: 20px 40px;
}

#form-seller-account.mobile {
  padding: 20px 10px 0px 10px;
}

#connect-royalty-account-button {
  background: #6FCF97;
  color: white;
  margin: 0;
  padding: 14px 10px;
  margin-top: 10px;
  border: none;
}

.custom-valuation-container {
  display: flex;
  flex-direction: row;
  font-weight: 300;
  color: #2A313B;
}

.mobile .custom-valuation-container {
  flex-direction: column;
}

.custom-valuation-container > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-valuation-container > div > h3 {
  font-size: 20px;
  align-self: center;
  text-transform: capitalize;
  margin: 30px 0px;
}

.mobile .custom-valuation-container > div > h3 {
  font-size: 16px;
}

.custom-valuation-container > div > p {
  font-size: 16px;
  margin: 10px 0px;
  width: 80%;
}

.add-statement-set.add-later-statement-set > .mobile.custom-valuation-container > div > p {
  font-size: 14px;
  margin: 10px 30px;
}

.mobile.custom-valuation-container > div > p {
  font-size: 14px;
  margin: 10px 30px;
}

.custom-valuation-columns-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  padding: 10px 10px;
  width: 100%;
}

.mobile .custom-valuation-columns-container {
  padding: 10px 0px;
}

.custom-valuation-container .custom-valuation-form {
  display: flex;
  flex-direction: column;
  margin: 0px 40px;
}

.add-statement-set > .select-statement-set > div > .account-creation-current-step {
  text-align: center;
  padding-left: 0px;
  align-self: center;
}

.add-statement-set.add-later-statement-set > .mobile.custom-valuation-container > div > div {
  margin: 0px;
}

.mobile.custom-valuation-container > div > div {
  margin: 0px;
}

.add-statement-set.add-later-statement-set > .mobile.custom-valuation-container .custom-valuation-form {
  margin: 0px;
}

.mobile.custom-valuation-container .custom-valuation-form {
  margin: 0px;
}

.pro-publisher-column-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  padding: 0px 10px;
  justify-content: space-between;
}

.pro-publisher-column-container > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.pro-publisher-column-container > div:nth-last-of-type(1) {
  flex-grow: 1;
}

#modal-root .custom-valuation-columns-container > .pro-publisher-column-container > p,
#react-root .custom-valuation-columns-container > .pro-publisher-column-container > p {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

#modal-root .custom-valuation-columns-container > .pro-publisher-column-container > p,
#react-root > .mobile .custom-valuation-columns-container > .pro-publisher-column-container > p {
  font-size: 12px;
}

.custom-royalty-payor-logo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border: 1px solid #E1E1E3;
  box-sizing: border-box;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  margin: 5px 0px;
  flex-grow: 1;
  flex-basis: 90px;
  outline: none;
}

.custom-royalty-payor-logo.selected {
  border: 2px solid #6FCF97;
}

.custom-royalty-payor-logo.other-none-button {
  flex-basis: 45px;
}

.custom-royalty-payor-logo > img {
  padding-bottom: 10px;
  padding-top: 10px;
  max-width: 100px;
  max-height: 50px;
}

.mobile .custom-royalty-payor-logo > img {
  max-width: 70px;
}

.mobile .custom-royalty-payor-logo > label {
  font-size: 11.8px;
}

.desktop .custom-royalty-payor-logo > div {
  font-size: 14px;
}

.select-statement-set > div > .selected {
  border: 2px solid #6FCF97;
}

.finish-custom-valuation-button {
  width: 80%;
  font-weight: 600;
  font-size: 14px;
  background-color: #6FCF97;
  color: #FFFFFF;
  margin-bottom: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.finish-custom-valuation-button.white-button {
  color: #6FCF97;
  border: 1px solid #6FCF97;
  background-color: #FFFFFF;
  border-radius: 3px;
}

#custom-valuation-form > div {
  margin-bottom: 20px;
}

#request-custom-valuation {
  min-height: 40px;
}

.vertical-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-valuation-container > div > .vertical-container {
  margin-top: 10px;
}

.custom-valuation-form .submit-statement-set-credentials {
  font-weight: 600;
}

.see-catalog-analysis {
  color: #2a313b;
  font-size: 16px;
}

.see-catalog-analysis:hover {
  color: #2480ff;
}

@media (min-width: 768px) {
  .see-catalog-analysis {
    font-size: 1.125rem;
    cursor: pointer;
  }
}

.help-interactions-sequence > .modal-content {
  width: 700px;
}

.help-interactions-sequence > .modal-content > div:nth-child(2) {
  flex-grow: 1;
}

.help-interactions-sequence .modal-sequence-body, .help-interactions-sequence .page-container {
  height: 100%;
}

.help-interactions-sequence .sequence-page {
  height: 100%;
  justify-content: space-between;
}

.desktop #helper-page-ascap-1 .vertical-container > div > p,
.desktop #helper-page-bmi-1 .vertical-container > div > p {
  white-space: pre;
  position: absolute;
  left: 0;
  right: 0;
}

.mobile .add-1st-statement-set #helper-page-bmi-1 .vertical-container > div > p {
  position: absolute;
  left: 0;
  right: 0;
}

.help-interactions-sequence .vertical-container p {
  text-align: center;
  font-size: 16px;
  flex-basis: 30px;
}

.mobile .help-interactions-sequence .vertical-container p {
  font-size: 12px;
}

@media (max-width: 380px) {
  .mobile .help-interactions-sequence .vertical-container img ~ p > a {
    -ms-word-break: break-all;
    word-break: break-all;
  }
}

.help-interactions-sequence a {
  font-size: 16px;
  color: #0000EE;
  text-decoration: underline;
}

.mobile .help-interactions-sequence a {
  font-size: 12px;
  color: #0000EE;
  text-decoration: underline;
}

.help-interactions-sequence .vertical-container > img {
  max-width: 100%;
  height: 100%;
  max-height: 240px;
  padding: 15px 5px;
}

.help-interactions-sequence .hide-button {
  visibility: hidden;
}

.help-interactions-sequence .fa-circle {
  font-size: 10px;
  padding: 0px 5px 10px;
}

.help-interactions-sequence .vertical-container {
  justify-content: space-between;
  flex-grow: 1;
}

.left-arrow-container > button, .right-arrow-container > button {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #F8F8F8;
}

.help-interactions-sequence .left-arrow-container img {
  height: 14px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.help-interactions-sequence .right-arrow-container img {
  height: 14px;
}

.left-arrow-container, .right-arrow-container {
  display: flex;
  align-items: center;
}

.help-interactions-sequence .hide-button {
  visibility: hidden;
}

.help-interactions-sequence .fa-circle {
  font-size: 10px;
  padding: 0px 5px 10px;
  color: rgba(196, 196, 196, 0.5);
}

.help-interactions-sequence .fa-circle.current-page-bullet-point {
  color: #C4C4C4;
}

#help-finding-pro-credentials-button {
  font-size: 12px;
  text-decoration: underline;
}

.statement-set-credentials-form-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.mobile .statement-set-credentials-form-container {
  flex-direction: column;
  align-items: stretch;
}

.statement-set-credentials-form-container #connect-royalty-account-button {
  margin: 0px 0px 20px;
}

.help-interactions-sequence .vertical-container > p:nth-of-type(2) {
  margin-top: 10px;
}

#ascap-help-connected, #bmi-help-connected {
  width: 300px;
}

.mobile #ascap-help-connected, .mobile #bmi-help-connected {
  width: 240px;
}

.seller-form-row .country-form-field,
.seller-form-row .subaccount-form-field {
  max-height: 400px;
  overflow-y: auto;
}

.seller-dashboard {
  margin-bottom: 5rem;
}

.account-creation-root .contact-info-and-login > h2:nth-of-type(1),
.account-creation-root .select-statement-set > div > h2:nth-of-type(1) {
  margin-bottom: 0px;
}

#modal-root .add-later-statement-set {
  max-width: 900px;
}

#modal-root .select-statement-set > div > .account-creation-current-step {
  display: none;
}

#modal-root .ob-place-order {
  width: 450px;
  max-width: 95%;
}

#modal-root .ob-place-order-form {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

#modal-root .mobile .ob-place-order-form {
  width: 90%;
}

.place-order-select-term-container > div{
  display: flex;
  justify-content: center;
}

.place-order-select-term-container > h2{
  text-align: center;
}

.place-order-select-term-container > div > button {
  margin: 5px;
  text-transform: uppercase;
  font-weight: 600;
  outline: none;
}

.place-order-select-term-container > div > button > label {
  cursor: pointer;
}

#modal-root .ob-unable-to-place {
  text-align: center;
  max-width: 450px;
}

#modal-root .confirm-order-modal-container {
  max-width: 450px;
}

.place-order-select-term-container .disabled{
  background: #F2F2F2;
}

.place-order-select-term-container button.disabled:hover {
  cursor: not-allowed;
}

#modal-root .ob-book-appointment {
  text-align: center;
}

#modal-root #form-place-order > div > div:nth-of-type(1) {
  width: 100%;
  font-family: 'Helvetica';
  margin-top: 16px;
  display: flex;
  justify-content: flex-start;
}

#modal-root #form-place-order > div > div:nth-of-type(2) {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#modal-root #term.ob-overview-input {
  color: #828282;
  background: #FFF;
}

#modal-root .place-order-form-field-header {
  color: #828282;
}

#modal-root .place-order-form-loading-wrapper {
  width: 100%;
  height: 100%;
}