@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/****** Style Star Rating Widget *****/


.star-rating span{margin-right:2px;}


.rating { 
  border: none;
}

.rating > input { display: none!important; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 




.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

.dropdown-pos {
  left: -156px !important;
  top: 17px !important;
}

.jconfirm-box-container {
  width: 500px;
  margin: auto;
}

.btn-close-modal {
  top: 10px;
  right: 10px;
  position: absolute;
}

.hw-50 {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.hw-60 {
  width: 100%;
  height: 90px;
  object-fit: cover;
}

.hw-197 {
  width: 197px;
  height: 197px;
  object-fit: cover;
}
.ht-396 {
  width: 100%;
  height: 396px;
  object-fit: cover;
}
.ht-483 {
  width: 100%;
  height: 483px;
  object-fit: cover;
}

.ht-600 {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.active-color {
  background: #eaeaea;
}
.active-size {
  background: #eaeaea;
}

.jc-bs3-container{
  width: 500px;
}

#page\#0>[class*='uk-background-'] {
  min-height: 40vh;
}

#page\#1-0-0-1 {
  background: #fff;
}

#page\#1-0-2-15 {
  z-index: 1
}
#page\#1-0-0 {
  width: 140px;
}
#footer\#0-0-0-0 {
  border-color: #fff;
  border-width: 5px;
}
#page\#0-0-1-3 .el-meta {
  text-align: right;
}

#page\#0-0-1-5 .el-meta {
  text-align: right;
}

#page\#0 .uk-tile-default {
  border: 2px solid #444;
}

#page\#2-0-0-0 {
  border-color: #fff;
  border-width: 2px;
}

.status-pending {
  background: #c2945d;
}

.status-confirmed {
  background: #175004;
}

.status-shipped {
  background: #121213;
}

.status-delivered {
  background: #111579;
}

.status-cancelled {
  background: #9b0808;
}

.pay-badge {
  background: #e42a2a;
}

@media (min-width: 960px) {
  #page\#3-0-0 {
      margin-top: 150px;
  }
}
@media (max-width: 1322px) and (min-width: 960px){
    ul.uk-navbar-nav.nav li:nth-child(7),
    ul.uk-navbar-nav.nav li:nth-child(6),
    ul.uk-navbar-nav.nav li:nth-child(5){
      display: none;
    }
}
@media (min-width: 1323px){
  .custom-nav{
    display: none;
  }
}

.uk-notification{
  display:flex!important;
  flex-direction:column;
}
.uk-notification-message{
  padding-right:2em!important;
  width:auto!important;
  max-width:70%!important;
  text-align:center;
  display:inline-flex;
  padding:20px!important;
}
.uk-notification-top-right{
  margin:0!important;
  left:unset!important;
  text-align:center;
}
.uk-notification-top-right>.uk-notification-message{
  margin:10px 10px 0 auto;
  background-color:#fb3f3f;
}