open payments css

#content-header .wrapper {
  padding-left:0px;
}

.step-section, .step, .indv-card,#selection-box, #selectionbar > div,#selectionbar,#drawstuff, #op #selectionbar input[type="text"], .indv-card >div.payments .totals, .indv-card >div.expandable, .indv-card >div.expandable span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#selectionbar tr, .indv-card, #op .top-10 div, .expand-button {
  transition: all 0.10s ease-in-out;
-webkit-transition: all 0.10s ease-in-out;
-moz-transition: all 0.10s ease-in-out;
-o-transition: all 0.10s ease-in-out;
}

#op {
  min-height: 500px;
  font-family: Helvetica, sans-serif;
  font-weight: 200;
  font-size: 13px;

}

.step p.subtext {
font-weight: 200;
font-size: 14px;
margin-bottom: 15px;
}

.step-section h4{
  text-align: center;
margin: 20px 0px 10px;
font-size: 13px;
letter-spacing: .04em;
color: #444;
-webkit-font-smoothing: antialiased;
}


#op .tiny-label {
  font-size: 11px;
color: #999;
text-transform: uppercase;
letter-spacing: .03em;
}

.step-section {
width: 33.333333333%;
float: left;
padding: 0px 40px 0px 0px;
}

.step-section:last-child {
  padding-right: 20px
}


#op h3 {
  font-family: "ff-meta-serif-web-1","ff-meta-serif-web-2","Georgia",serif;
  font-size: 24px;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  line-height: 1.2em;
  margin-bottom: 10px
}

.step h3 {
  max-width: 550px;
  margin: 0px auto 20px;
}

.step {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

#drawstuff {
  display: inline-block;
width: 64%;
position: relative;
overflow: hidden;
max-height: 1262px;
}

#drawstuff.narrow .indv-card{
  width: 50%;
}

.indv-card {
width: 100%;
display: inline-block;
float: left;

text-align: left;
border: 1px solid #f7f7f7;
border-radius: 4px;
/*box-shadow: 1px 1px 5px rgba(0,0,0,.2)
*/
min-height: 100%
}

.indv-card >div {
  padding:20px;
  line-height: 1.4em;
  border-bottom: 1px solid #e7e7e7;
  background: #fff
}

.narrow .indv-card >div.expandable {
height: 150px;
overflow: hidden;
position: relative;
padding-bottom: 20px;
}

.narrow .indv-card >div.expandable.small-ex {
  height: 100px
}

.indv-card >div.expandable span {
  display: none;
}
.narrow .indv-card >div.expandable span {
display: inline-block;
background: url(<%= asset_data_uri 'expand-arrow.svg' %>) no-repeat center 10px #cecece;
background-size: 20px;
width: 307px;
margin-left: -20px;
position: absolute;
top: 125px;
height: 30px;
padding: 3px 10px;
text-align: right;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #666;
cursor: pointer;
}

.narrow .indv-card >div.expandable h2 {
  text-transform: uppercase;
}
.narrow .indv-card >div.expandable span:hover {
  background-color: #999
}
.indv-card >div.payments {
  padding:0px;
  display: inline-block;
  width: 100%;
}

#dd-cards {
  width: 100%;
  margin-top:30px;
  display: inline-block;
  position: relative;
}
#dd-cards > div {
  float: left;
  margin-right: 20px;
}
#dd-cards > div#selectionbar {
  width: 300px;
  margin-right: 0px;
  line-height: 1.3em;
  overflow: hidden;
}

#selectionbar table {
text-transform: uppercase;
font-size: 11px;
width: 280px;
margin: 0px 0px 20px 0px;
}

.selection-tables {
  overflow: scroll;
  height: 100%
}

#selectionbar table h5 {
  text-transform: none;
}

#selectionbar > div:last-child {
  margin-right: 0px;
}

#selectionbar tr {
    font-weight: normal;
color: #444;
cursor: pointer;
}

#selectionbar tr.dd-p:hover {
  text-decoration: underline;
}


#selectionbar tr.dd-header {
  font-weight: bold;
  cursor: default;
}


.indv-card > div > div {
margin-bottom: 20px;
display: inline-block;
width: 100%;
}
.indv-card h2 {
font-size: 30px;
margin-top: 25px;
font-family: "ff-meta-web-1","Helvetica Neue","Arial",sans-serif;
margin-bottom: 0px;
line-height: 1.4em;
letter-spacing: -.01em;
margin-top:0px;
}

.narrow .indv-card h2 {
  font-size: 20px
}

#op .narrow .indv-card h5 {
  font-size: 17px
}

.indv-card div.dd-name {
background: #7B97A8;
color: #fff;
padding: 20px;
}

.dd-name p a {
color: #D8D8D8;
font-size: 11px;
font-weight: normal;
}

.dd-name p {
  line-height: 1.3em;
  margin-top: 5px;
}

.indv-card h4 span:after {
  content: ",";
}

.indv-card h4 span:last-child:after {
  content: "";
}

h4 {
font-size: 10px;
letter-spacing: .04em;
text-transform: uppercase;
font-weight: bold;
}

.indv-card >div.payments .totals {
padding: 15px 20px;
border-right: 1px solid #f7f7f7;
background: #CCD7B3;
display: inline-block;
width: 33.33333333333%;
float: left;
height: 170px;
margin-bottom: 0px
}

.narrow .indv-card >div.payments .totals{
height: 100px;
width: 100%;
margin-bottom: 0px;
border-bottom: 1px solid #f7f7f7;
border-right: 0px;
padding-right:10px;
}

.indv-card >div.payments .totals.no-payments {
  background: #EFEBCE;
}

.indv-card >div.payments .totals:last-child {
  border-right: 0px
}

.narrow .indv-card .totals .p-item {
text-align: left;
float: left;
margin: 0px 15px 0px 0px;
}

.narrow .indv-card .totals .p-item:last-child {
  margin: 4px 0px 0px 0px
}
.narrow .indv-card .totals .p-item.center-item {
width: 88px;
border-bottom: 0px;
border-right: 1px solid #999;
padding-bottom: 0px;
}

.indv-card .totals.no-payments .p-item.center-item {
  border-bottom:0px;
}
.narrow .indv-card .totals.no-payments .p-item.center-item {
  border-right: 0px
}

.narrow .indv-card .totals .p-item p span {
line-height: 1.3em;

}


.indv-card .totals .p-item {
  margin: 0px 0px 5px 0px;
  text-align: center;
}

.indv-card .totals .p-item p span {
font-weight: bold;
font-family: "ff-meta-web-1","Helvetica Neue","Arial",sans-serif;
font-size: 15px;
}


.indv-card .totals .p-item h2 {
  line-height: 1em;
  text-transform: uppercase;
}

.indv-card .totals .p-item.center-item {
border-bottom: 1px solid #B5B1B1;
padding-bottom: 5px;
}

.narrow .p-title {
  font-size: 11px;
  line-height: 1.3em;
  text-align: left;
  min-height: 10px
}


.p-title {
text-transform: uppercase;
font-size: 12px;
letter-spacing: .04em;
margin-bottom: 5px;
font-weight: bold;
color: #444;
margin-bottom: 10px;
  text-align: center;
  min-height: 37px
}


#op h5 {
  font-size: 16px;
  font-family: "ff-meta-web-1","Helvetica Neue","Arial",sans-serif;
  text-transform: none;
}

#op #selectionbar h5 {
  margin-bottom: 5px
}
.chosen-results li {
  text-align: left;
}

.home-drug2 {
  display: none;
}

#op .top-10 h3 {
  font-size: 18px;
  margin-top: 20px;
  text-align: center;
}

#op .top-10 {
  text-align: left;
  display: none;
}

#op .top-10 div.top-list:hover {
  background: #e7e7e7
}

#op .top-10 div p {
  float: left;
  width: 80%;
}

#op .top-10 div p:last-child {
  text-align: right;
  width: 20%
}

#op .top-10 div {
width: 100%;
clear: both;
display: block;
font-size: 13px;
border-bottom: 1px solid #e7e7e7;
line-height: 1.5em;
padding: 3px 4px;
margin: 0px;
cursor: pointer;
}

#op .top10-view .top-10 {
  display: block;
}

#op #selectionbar input[type="text"] {
width: 95%;
margin: 0px 0px 10px;
border-radius: 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0px 0px rgba(0,0,0,0.3);
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.3);
border: 1px solid #dedede;
padding: 6px 5px 6px 25px;
background: url(<%= asset_data_uri 'mag_glass.svg' %>) no-repeat left 3px;
background-size: 20px 20px;
font-weight: 200;
font-size: 13px;
letter-spacing: .02em;
}


.home-devices .chosen-container .chosen-results li, .home-drugs .chosen-container .chosen-results li {
  font-size: 12px
}
.chosen-select {
  display: none;
}

#selectionbar td {
  padding:1px 0px;
}

#selectionbar td.dd-num {
  width: 40px;
  text-align: right;
}


.indv-card > div.deets > div {
  width: 100%;
  clear: both;
  display: inline-block;
margin-bottom: 0px;
border-bottom: 1px solid #f7f7f7;
padding: 1px;
}
.deets > div p {
float: left;
width: 25%;
min-width: 50px;
text-align: right;
font-size: 12px;
letter-spacing: .02em;
line-height: 1.3em;
text-transform: uppercase;
}

.deets > div p:first-child {
  text-transform: none;
}

.deets p:first-child {
  text-align: left;
}

.narrow .deets p:first-child{
width: 110px;
text-transform: none;
font-size: 11px;
letter-spacing: .04em;
color: #000000;
opacity: .7;
font-weight: 400;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
}


.narrow .deets .dd-th p:first-child {
  font-weight: bold;
  opacity: 1
}

.narrow .deets.expandable > div p {
width: 50%;
}

.deets .dd-th {
  margin-top:5px;
}
.narrow .deets > div p.n-gone {
  display: none;
}
.deets .dd-th p{
font-size: 11px;
letter-spacing: .04em;
color: #000000;
line-height: 1.2em;
font-weight: bold;
-webkit-font-smoothing: antialiased;
font-family: Arial;
text-transform: none;
}

.mini-label {
  font-size: 11px;
letter-spacing: .04em;
color: #000000;
line-height: 1.2em;
font-weight: normal;
font-family: Arial;
text-transform: none;
margin-bottom: 10px
}

#op .top-10 h5{
font-size: 11px;
letter-spacing: .04em;
color: #000000;
line-height: 1.2em;
font-weight: bold;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
float: left;
}

#op .top-10 h5:last-child {
  float: right;
}




#op .guff {
  font-family: Georgia, serif;
}

.notes a, .app-top-text-only p.byline a, .guff a{
color: #237EB5;
}

.app-top {
  margin-bottom: 0px;
border-bottom: 0px;
padding-bottom: 10px;
}

.dd-desc a {
  font-weight: bold;
  color: #237EB5;

}

.indv-card >div.dd-desc {
  padding-bottom: 10px
}

.goto-card:hover {
  text-decoration: underline;
  cursor: pointer;
}

.p-title span {
font-weight: normal;
text-transform: none;
font-size: 11px
}
#op .narrow .close-button{
  display: inline-block;
}
#op .close-button {
  display: none;
  float: right;
  cursor: pointer;
}
#op .close-button span{
  width: 15px;
  height: 12px;
  display: inline-block;
  background: url('small-white.png') -42px 1px no-repeat;
}

#op .close-button:hover span{
  background-position: -42px -10px;
}

.poof {
width: 90px;
height: 90px;
position: absolute;
overflow: hidden;
top: 150px;
left: 400px;
}
.poof img {
  width: 100%;
  position: absolute;
  top:0px;
}

#op .indv-card.secondcard {
  position: relative;
  left: 300px;
  border-left: 0px
}

.notes {
  margin-top: 50px;
  line-height: 1.4em
}
.notes h4 {
  font-size: 13px;
letter-spacing: .04em;
color: #444;
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
}