/* should chnage logout_link to  hidden_in_app */

/*#### item controlled by Roles */
.builder_placeholder { display: none; }

/* special item, has bizid */
.site_owner_item {    display: none; }
.site_owner_item { background-color: #ec0088; color: #fff; padding: 3px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5); }
.site_owner_item a {    color: #fff; }
/*a.site_owner_item {    color: #EC0088; }*/

/* Latest and final version: Hide first, then only showing if role match in JS. See js for detail. */
.role_not_log_in_show, /* (no log in visitor) */
.role_user_show, /* ( has user id ) */
.role_consumer_show, /* (NO UR at all) */
.role_not_bizid_show, /* don't have UR 4. */
.role_designer_show, /* (UR 2) */
.role_business_show, /* (UR 4) */
.role_brandshop_show,/* (UR 2+4) */
.role_manufacturer_show, /* (user 3+4) */
.role_super_admin_show /* user one */
{
    display: none;
}
/*#### END: item controlled by Roles */

.clear {  clear: both; }
.gap { height: 30px; width: 100%; clear: both; display: block; }
.div-link { cursor: pointer; }
.div-link:hover {  opacity: 0.5;  }
.owl-slide.div-link:hover {  opacity: 1; }
.overlay_text_color { color: #fff;
  /*text-shadow: -1px 0 #aaa, 0 1px #aaa, 1px 0 #aaa, 0 -1px #aaa;*/
  text-shadow: rgba(0, 0, 0, 0.5) 0px 4px 5px;
}

/* replace bootstrap complicated nav header body */
.simpleToggle { border: 1px solid #ccc; margin-bottom: 12px; }
.simpleToggle > div { padding: 12px 15px;  }
.simpleToggle .toggle_head {  cursor: pointer;  user-select: none; font-size: 1.1em;}
.simpleToggle .toggle_head:hover { text-decoration: underline;   filter: brightness(5.00); }
.simpleToggle .toggle_body { display: none;  border-top: 1px solid #ccc; }
.simpleToggle .toggle_body.active { display: block;}

.mega-title { font-size: 4em; line-height: 1em; }
.caption-info .mega-title p,
.mega-title p { font-size: 18px; line-height: 1.1em; margin-top: 10px; }


/* bigger checkbox & radio */
input.fd_checkbox_on  { margin-left: 4px; margin-right: 4px;  width: 16px; height: 16px; transform: scale(1.5);  }
input.fd_radio {  margin-left: 3px; margin-right: 3px;  width: 16px; height: 16px; transform: scale(1.3);   }

/* big_upload_field */
.big_upload_field { font-weight: normal; cursor: pointer; margin: 10px 0; border: 1px solid #000; padding: 10px;  }
.big_upload_field input {  border: 1px dashed #000; padding: 30px; cursor: pointer; }


/* background-color , font-color */
.bgc_pink { background-color:  #ec0088; }
.textc_pink { color: #ec0088; }
.textc_white { color: #fff; }

.fd_safe_seal { font-size: 10px; line-height: 13px; padding: 0 5px 0 0; width: 136px; font-family: Arial; border: 1px #29A302 solid; color: #29A302; }

.modal-dialog { max-width: 95%; width: 800px; }

.circle_corner_top_right { background-color: gold; border-top-right-radius: 20px;  border-bottom-right-radius: 20px; border-bottom: 0; }

#biz_admin_global_link { display: none; position: fixed; padding: 15px 10px;  background-color: #EC0088; }
#biz_admin_global_link a { color: #fff; }
#biz_admin_global_link hr { margin-bottom: 10px;    margin-top: 10px;}

.img-rounded_10p { border-radius: 10px; }
.img-rounded_25p { border-radius: 25px; }

.img-responsive-center {  margin: 0 auto; }

.extra_memo { font-size: 11px; color: #888; }

.btn-facebook { background-color: #3b579d; width: 220px;
  border-color: #3b579d; background-image: none; border: 1px solid transparent; border-radius: 4em !important;
  color: #fff; cursor: pointer;
  display: inline-block;
  font-size: 16px; font-weight: normal;
  white-space: nowrap;
  line-height: 1.5;
  margin-bottom: 0;
  padding: 7px 20px;
  text-align: center;   transition: transform 0.1s ease-in 0s;
  vertical-align: middle;
}

.wysiwyg_body p {   margin: 0 0 10px; padding: 0;}

span.required {    color: red; }

.social_referral_share_facebook { color: #3B5998; }
.social_referral_share_twitter { color: #1DA1F2; }
.social_referral_share_pinterest { color: #CB2027; }
.social_referral_share_linkedin { color: #0077B5; }

#multi_language_detail_rows .language { padding: 6px;  }
#multi_language_detail_rows .language:hover { background-color: #f1f1f1;  }

#alert_message_wrapper {
  position: fixed; top: 20%; z-index: 999999; border: 5px solid orange; background-color: #f1f2f3;
  color: #000; padding: 20px 30px 30px; width: 80%; margin-left: 10%;
}

/* each form for business site admin (maybe user form as well). the div should be wrapped. */
.form-region { padding: 20px; background-color: #f1f2f3; }

.panel-title { padding: 0; }

.hint { color: #777; font-size: 11px; margin: 0; }

/* give div background image center, no-repeat, and cover effect */
.bg-cover { background-repeat: no-repeat;  background-position: center ;  background-attachment: fixed;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
@media only screen and (max-width: 600px) {  .bg-cover {  }    }

/* aka widget/layout content_section as general default setting for all sections. */
.site_content_section {  padding: 6em 0; }
.site_content_section h2.title { text-align: center; margin:0 0 10px; padding: 0; }
.site_content_section .body_description {  width: auto; margin:0 0 16px; }
.site_content_section .price { margin: 5px 0 10px;; }
.site_content_section .prices-wrapper .compare_price { color: #aaa; text-decoration: line-through; }
.site_content_section .prices-wrapper .percent_off { color: red; }

.list-nav { float: left; margin: 0; padding-left: 0; list-style: none; }
.list-nav > li {  position: relative;  display: block; }
@media (min-width: 768px) {
  .list-nav > li {    float: left;   }
  .list-nav.row-fixed-li li {    float: none;   }
}
.footer ul li a{padding:0 0 5px;display:block}

.nav-tabs>li>a { border: 0; }

.blockTextRight {
  display: block;
  text-align: right;
}
a.blockTextRight:hover {
  background-color: #ffb6c1;
}

.color-in {
  color: #4CC94A;
}
.color-out {
  color: red;
}

blockquote { overflow: auto; }

.site_content_section .row { margin-right: 0px;  margin-left: 0px; }

.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
  margin-left: 0;
  margin-right: 0;
}

.glyphicon-star.half { position: relative; }
.glyphicon-star.half:before { position: relative; z-index: 9; width: 46%; display: block; overflow: hidden; }
.glyphicon-star.half:after { content: '\e007'; position: absolute; z-index: 8; top: 0; left: 0; }