/* common styles */
#erEmailConfirmation {
 display:none;
 color:#FF8888;
 font-size: inherit;
}

.epContainer .clearfix,
.etContainer .clearfix,
.esContainer .clearfix { display: flex; }

.epContainer .clearfix:after,
.etContainer .clearfix:after,
.esContainer .clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

.erDefault { font-weight:normal; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
/* close commented backslash hack */

/* summary styles */
.esContainer {
 float:center;
 margin:0px 14px 0px 0px; 
 border: none;
}

.esHead {}
.esSummary { padding:0px 10px 0px 0px; }
.esAvgStars { padding:0px 8px 0px 0px; }
.esAvgRating { padding:0px 8px 0px 0px; }
.esAvgCount { padding:0px 8px 0px 0px; }
.esNone { color:#404040; }

/* Product Review Styles */
.epContainer {  
 padding-bottom: 2rem;
 width: 80%;
 margin: 0 auto;
 background-color: #fff;
}
.epHead {
 font-size:105%;
 font-weight:bold;
 color: #404040;
 padding:6px;
 margin: 2rem auto;
}
#epBody {
 position: relative;
 background-color:#fff;
 max-width: 90%;
 margin: 2rem auto 4rem;
}
#epCreate { 
 float:right; 
 width:30%; 
 text-align:right; 
 line-height:normal; 
}
#epSummary {
 float:right;
 width:70%
}
#erCreateButton {
  border: none;
  background-color: #fff;
  color: #0094d8;
  cursor: pointer;
  white-space: nowrap;
}
#more_reviews {
  padding: 1.5rem 2rem;
  border: 2px solid #0094d8;
  background-color: #fff;
  color: #0094d8;
  font-size: 14px;
  transition: all 250ms ease;
}
#more_reviews:hover {
  border: 2px solid transparent;
  background-color: #0094d8;
  color: #fff;
  transition: all 250ms ease;
  font-size: 14px;
}
.more_reviews_wrap {
 text-align: center;
 padding: 1rem 0 4rem;
}
.erButton {
 cursor: pointer;
}
.epAvgStars { padding:0px 8px 0px 0px; }
.epAvgRating { padding:0px 8px 0px 0px; }
.epAvgCount { padding:0px 8px 0px 0px; }
.epNone { color:#404040; }

.epContent {
 margin:2.5rem 0 1rem 0; 
 background-color:#fff;
 padding:8px;

}
.epRating {
 margin-bottom: .5rem;
 /*float:left;*/
 /*width:64px;*/
 position:relative;
}

span.epBlanks { display:inline; float:left; width:0px}
span.epBlanks:before{ font-family:FontAwesome; color:#A0A0A0; content:"\f005 \f005 \f005 \f005 \f005"; white-space:nowrap; line-height: initial; }

.epTitle { 
 /*margin:0px 0 0 64px;*/
 font-weight:bold;
 font-size: 18px;
}
.epReview {
 padding:15px 0px;
}
.epSignature { margin:4px 0 0 64px; } 
.epName { display:inline-block; margin:0 12px 0 0; color: #888; }
/*.epName:before {
   font-family:FontAwesome;
   font-size:120%; 
   color:#000099; 
   content:"\f007"; 
   padding-right:8px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
   text-rendering: auto;
   line-height: initial;
   }*/
   .epDate { display:inline-block; font-size: 13px; color: #888; }
   .epBusiness {}
   .epCompany { margin:0 12px 0 0 }
   .epURL {} 
   .epVerified {font-size: 12px;}
   .epVerified:before { 
    font-family:FontAwesome;
    font-size:75%; 
    color:#000099; 
    content:"\f00c";
    padding-right:4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    text-rendering: auto;
    line-height: initial;
  }

  .epVote { margin:0 0 2rem 0; padding-left: 24px; padding-left: 24px; display: flex; align-items: center; }
  .epHelpful { font-style:italic; }
  .erVoteButton {
    padding: .5rem;
    border-radius: 100%;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #0094d8;
    color: #0094d8;
    margin-left: 0.75rem;
    line-height: 1.5;
    transition: all 250ms ease;
  }
  .erVoteButton:hover {
    background-color: #0094d8;
    border-color: #fff;
    color: #fff;
    transition: all 250ms ease;
  }
  .epResponse {
   font-style: italic;
   margin: 0 0 18px 12px;
 }
 .epResponse:before { content:"- Store Owner: "; }

 /* Store Review/Testimonial Styles */
 .etContainer {}

 #etHead {
   font-size:105%;
   font-weight:bold;
   color: #444;
   padding:5px;
   margin-bottom:12px;
 }
 #etBody {
   max-height: 420px;
   overflow-y: auto;
   background-color:#F5F5F5;
   margin:5px;
 }
 #etCreate {
   float:right;
   width:30%;
   text-align:right;
   line-height:normal;
 }
 #etSummary {
   float:right;
   width:70%
 }

 .etAvgStars { padding:0 8px 0 0; }
 .etAvgRating { padding:0 8px 0 0; }
 .etAvgCount { padding:0 8px 0 0; }
 .etNone { color:#404040; }
 .etContent { margin:28px 12px 0 42px; }

 #etContainer .quote {
   font: normal normal normal 24px/1 FontAwesome;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
   text-rendering: auto;
   float:left;
   margin-left:-36px;
 }

 #etContainer .quote:before { content:"\f10d"; color:#666666 }

 .etRating {
   float:left;
   padding:8px 12px 0px 0px;
   height:28px;
   width:64px;
 }
 .etTitle {
   padding:8px 0px 0px 0px;
   font-weight:bold;
 }
 .etReview {
   padding:15px 0px;
 }
 .etResponse {
   padding:10px;
   color:#9B0829;
 }

 .etSignature { font-style:italic; }
 .etBusiness {}
 .etName { float:right; margin:0 12px 0 0 }
 .etDate { float:right }
 .etCompany { float:right; margin:0 12px 0 0 }
 .etURL { float:right }
 .etCompany, .etURL { padding:5px 0 0 0; }

 .etVerified { font-size:90%}
 .etVerified:before {
   font-family:FontAwesome; 
   font-size:18px; 
   color:#000099; 
   content:"\f00c";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
   text-rendering: auto;
   line-height: initial;
 }

 .etVote { display:none; }
 .etHelpful { font-style:italic; }

 /* Rating Distribution */

 /* the box */
 #boxPU {
   display: none; 
   position:absolute;
   z-index:9999;
   margin-top: 12px;
   margin-left: -54px;
   padding: 12px;
   background: #fff;
   border:1px solid #000;
   -webkit-box-shadow: 3px 3px 4px 0px rgba(50, 50, 50, 0.5);
   -moz-box-shadow:    3px 3px 4px 0px rgba(50, 50, 50, 0.5);
   box-shadow:         3px 3px 4px 0px rgba(50, 50, 50, 0.5);
 } 

 #boxPU:after, #boxPU:before {
   bottom: 100%;
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
 }

 #boxPU:after {
   border-bottom-color: #fff;
   border-width: 12px; /* arrow height */
   margin-left: -13px; /* arrow height */
 }

 #boxPU:before {
   border-bottom-color: #000;
   border-width: 13px; /* arrow height + 1 (makes line) */
   margin-left: -14px;/* arrow height + 1 (makes line) */
 }

 /* the bars */

 .chart { font-size:90%; margin-top:4px; }
 .line { clear:both; line-height:17px }
 .level { float:left; margin-right:4px } 

 span.bar {
   float:left;
   margin-right:4px 
   display:block;
   width:100px;
   height:14px;
   margin-bottom: 6px;   
   background:#E2E2E2;
   border-radius: 1px;
   box-shadow: inset 0 1px 2px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.1);
   background: -webkit-linear-gradient(top,#eee,#f4f4f4);
   background: linear-gradient(to bottom,#eee,#f4f4f4);
   box-sizing: border-box;
 }

 span.count {
   float:left;
   margin-left:4px
 }

 span.bar span:after {
   margin-left:106px;
   color:#3b3b3b3;
 }

 a.openChart {  font-size: 15px; cursor:pointer; }
 a.openChart:hover span#boxPU { display: block; position: absolute; color: #666; }
 /*a:hover { text-transform:none }*/



 @media screen and (max-width: 768px) {
  .epHead {
    display: flex;
    flex-direction: column;
    margin: 0rem auto;
  }
  #epCreate {
    width: 100%;
    text-align: left;
  }
  #erCreateButton {
      padding-left: 0;
      margin-bottom: 1rem;
  }
  #epSummary {
    width: 100%;
  }
  .epContent {
      flex-direction: column;
  }
  .reviews_right, .reviews_left, .epVote {
    padding-left: 0;
  }
  .reviews_right, .reviews_left {
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}