@charset "utf-8";
/* CSS Document */
:root{
  --color: #000;
}
@keyframes mycolor_blue {
  0% {
	  color: #000;
  }
  25%{
	  color: #09F;
  }
  50%{
	  color: #000;
  }
  75%{
	  color: #09F;
  }
  100% {
	  color: #000;
  }
}
body{
  background-color: #f6f6f6;
}
#bg-main{
  padding-top: 18px; padding-bottom: 18px;
  border-bottom: 1px solid #DDD;
}
.f-13{
  font-size: 13px !important;
}
.b500{
  font-weight: 500 !important;
}
#footer{
  margin-top: 0;
}
/*****************/
.fsignin__container{
  background-color: #FFF;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  margin-top: 6vh; margin-bottom: 5vh;
  padding: 30px 50px 30px;
}
/*************/
.flogin__container .title-page{
  margin-bottom: 15px;
  font-size: 23px;
}
.flogin__container .title-page-sub{
	font-size:17px;
}
.flogin__container .title-page-sub::after{
  top: 13px;
}
.flogin__container .input-group-text{
  color: var( --color);
  font-weight: 500;
}
.flogin__container .form-group{
	margin-bottom:20px;
}
.flogin__container input{
	height:46px; line-height:46px;
	font-size:14px;
}
.flogin__container button{
	display:block; width:100%; border: none;
	background: var( --color-hover); color:#FFF;
	font-weight:bold; text-transform:uppercase;
	padding-top:12px; padding-bottom:10px;
}
.flogin__container button::before{
  border-radius: 4px;
}
.flogin__container .text_register{
	margin-bottom:20px;
}
.flogin__container .text_register b{
	 text-transform:uppercase; color:rgb(237, 30, 50);
}
.flogin__container a{
  color: var( --color)
}
.flogin__container a:hover{
  color: var( --color-hover);
  text-decoration: none;
}
.flogin__container p{
  margin-bottom: 7px;
}
.flogin__container p:last-child{
  margin-bottom: 0;
}
/*************/
.fmember__container_process .cart-btn-action span{
  display: none;
}
.fmember__container_process .cart-btn-action[disabled] span{
  position: relative;
  top: -2px; margin-right: 5px;
}
/*************/
.dealernav__container .list-group-item{
    padding-left: 15px; padding-right: 15px;
    background: none; color: inherit;
    border: none;
    font-size: 14px; line-height: 24px;
}
.dealernav__container .list-group-item i{
    margin-right: 5px;
}
.dealernav__container .list-group-item a{
  color: inherit;
}
.dealernav__container .list-group-item.active{
  color: #FFF; font-weight: 500;
  background-color: #FFF;
  border: 1px solid #DDD; border-right: none;
  border-radius: 5px 0 0 5px;
  color: var( --color-hover);
}
/*************/
.dealernav__container .user-avater{
	display:block;
}
.dealernav__container .user-avater .img{
	display:inline-block; float:left;
	background-position:center center; background-repeat:no-repeat;
	background-size:cover;
	border:1px solid #777;
	border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;
	box-shadow:0 0 3px #FFF;
  overflow: hidden;
}
.dealernav__container .user-avater img{
	height:28px; display:inline-block;
}
.dealernav__container .user-avater .name{
	float:left; margin-left:7px; color:#ed1e32;
	display:inline-block; line-height:1.22;
  font-size: 13px;
}
.dealernav__container .user-avater .name small{
  color: #000; font-size: 11px;
  font-weight: 500;
}
/******************/
#left-main{
    padding-right: 0; padding-top: 15px; padding-bottom: 30px;
}
#right-main{
  padding: 30px 15px 30px 30px;
  background: #FFF;
  font-size: 14px; line-height: 24px;
  min-height: 45vh;
}
#right-main::after{
  position: absolute; z-index: 1;  left: 100%; top: 0; bottom: 0;
  background-color: #FFF;
  width: 100%; display: block;
  content: "";
}

/*************************/
.account__info tr td:first-child{
  width: 135px; text-align: right;
  font-weight: 500;
  font-size: 13px;
  text-transform: capitalize;
}
.account__info tr td[colspan]{
  font-weight: bold; text-align: left; text-transform: capitalize;
  background: var( --color-hover); color: #FFF;
  font-size: 14px;
}
/****************/
/*************************
*****************************/
.btn_loginsocial{
  margin-left: -7px; margin-right: -7px;
  margin-bottom: 15px; margin-top: 12px;
}
.btn_loginsocial .col{
  padding-left: 7px; padding-right: 7px;
}
.login_google,
.login_facebook{
  position: relative; padding: 0 !important;
  border: none; text-transform: capitalize !important;
  background: none; display: block; width: 100%;
  height: 40px; line-height: 40px;
  border-radius: 4px;
  cursor: pointer;

}
.login_facebook{
  position: relative;
  border: 1px solid #4267b2;
  background: #4267b2 !important;
  height: 36px;  display: block;
  padding: 0 10px 0 45px !important;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
  line-height: 34px; color: #FFF !important; font-weight: 500;
  font-size: 13px; text-align: center;
}
.login_facebook .fab{
  position: absolute; top: 0; left: 0;
  background-color: #FFF; color: #4267b2;
  border-radius: 2px; text-align: center;
  font-size: 17px; line-height: 32px;
  height: 100%; width: 34px;
}
.login_google .abcRioButton{
    width: 100% !important
}
.alert-small{
  padding: 9px 15px; color: #000; display: none;
}
/*********************/
.page-coffeeclub-update{
  background-color: #f6f6f6;
}
.flogin_update{
  background-color: #FFF;
  box-shadow: 0 0 10px rgb(0, 0, 0, .5);
  padding: 30px 30px 20px; margin: 30px 0;
  border-radius: 4px;
}
.flogin_update__title{
  font-size: 19px;  font-weight: bold;  text-transform: uppercase;
  color: var( --color-red);
}
.flogin_update button {
    display: block;
    width: 100%;
    border: none;
    background: rgb(237, 30, 50);
    color: RGB(255, 255, 255);
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 12px;
    padding-bottom: 10px;
}
/**************************/
.mpackage__container{
  padding-top: 20px; padding-bottom: 40px;
}
.mpackage__item{
    margin-bottom: 30px;
}
.mpackage__box{
  background-color: #FFF;
  height: 100%;
  transition: transform 0.2s ease; -moz-transition: transform 0.2s ease; -webkit-transition: transform 0.2s ease;
}
.mpackage__box:hover{
  transform: translateY( -15px);
  transition: transform 0.2s ease-out; -moz-transition: transform 0.2s ease-out; -webkit-transition: transform 0.2s ease-out;
}
.mpackage__img{
  margin:  0 0 10px;
}
.mpackage__img img{
  display: block; width: 100%;
}
.mpackage__des{
  padding: 0 20px 30px 15px;
  font-size: 13px; line-height: 20px;
  text-align: justify;
}
.mpackage__des p{
  position: relative;
  margin-bottom: 8px; padding-left: 20px;
}
.mpackage__des p::before{
    position: absolute; left: 0; top: 4px;
    width: 15px; height: 15px;
    display: block;
    color: var( --color-hover);
    font-size: 12px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;    font-style: normal;
    font-variant: normal;    text-rendering: auto;
    line-height: 1;
    content: "\f00c";    font-family: 'Font Awesome 5 Free';
    font-weight: 900;

}
/************/
.fmember__container{
  padding-right: 15px; padding-bottom: 0;
}
.fmember__container .input-group-text{
  width: 120px; text-align: right !important;
  font-size: 13px;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}
/**********************/
.fmember__container .error{
  display: none; clear: both;
  margin-top: 0;
  color: rgb(238, 0, 0);
  font-size: 12px; line-height: 1;
}
.fmember__container .error.show{
  display: block;
}
/******************/
.login_social_text{
  text-align: center; display: block;
  margin-top: 17px;
  position: relative;
  font-size: 15px; line-height: 1;
}
.login_social_text::before{
  position: absolute; left: 20%; top: 50%;
  content: ""; width: 60%; height: 1px; margin-top: 2px;
  background: var( --color)
}
.login_social_text span{
  position: relative; z-index: 1;
  color: #444; font-style: italic;
  font-weight: normal; padding: 0 15px;
  background-color: #FFF;
  display: inline-block;

}
/******************************/
#modal-membersuccess .modal-dialog{
    max-width: 800px;
    margin-top: 10vh;
}
#modal-membersuccess .modal-content{
  border: none; overflow: hidden;
  border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
}
#modal-membersuccess .modal-body{
  padding: 0; text-align: center;
}
#modal-membersuccess .close{
  position: absolute; right: 0; top: 0; z-index: 9;
  width: 36px; height: 36px;
  background: var( --color-hover); color: #FFF;
  font-size: 17px; font-weight: bold;
}
.modal-membersuccess__text{
  padding: 0 50px 15px;
}
.modal-membersuccess__title{
  margin: 0 0 10px; padding: 0;
  font-size: 27px; text-transform: capitalize;
  font-weight: bold; line-height: 1.5;
  color: var( --color-hover);
}
.modal-membersuccess__text .dcontent{
  text-align: center; margin-bottom: 30px;
}
.modal-membersuccess__readmore{
  display: inline-block;
  padding: 9px 15px; min-width: 260px;
  background: var( --color-hover); color: #FFF;
  text-transform: uppercase;
}

/***********************/
.product__message p{
    margin-bottom: 8px;
}
.dealer_order__container{
  padding: 0px 15px; margin-top: 0px; margin-bottom: 30px;
  font-size: 13px; line-height: 22px;
  border: 1px solid #ededed;
  background-color: #FFF;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.dealer_order__header{
    background: #EEE;
    padding-top: 10px; padding-bottom: 10px;
    color: var( --color);
}
.dealer_order__listitem p,
.dealer_order__header p{
  margin-bottom: 7px;
}
.dealer_order__header .fa{
  margin: 0 5px 0 12px; width: 25px; text-align: center;
  color:var( --color);
}
.dealer_order__header p .fa:first-child{
  margin-left: 0;
}
.dealer_order__header__title{
  margin: 0 0 7px; padding: 0;
  font-size: 14px; font-weight: bold; text-transform: capitalize;
  color: var( --color-hover);
}
.dealer_order__header__title .badge{
  padding: .55em .7em .5em; margin-right: 10px;
  text-transform: uppercase; font-weight: bold;
  font-size: 9px;
}
.dealer_order__container .btn-xs{
  padding: 3px 10px;
  font-size: 12px;  line-height: 1.35; font-weight: 500;
  border-radius: .2rem;
  background: #FFF;
}
.dealer_order__container .btn-xs:hover{
  background-color: var( --color-hover);
  border-color: var( --color-hover);
}
.dealer_order__voucher,
.dealer_order__footer{
  padding-top: 10px; padding-bottom: 10px;
  background: var( --color-hover); text-align: right;
  color: #FFF; font-weight: 15px;
  text-transform: uppercase; font-weight: bold;
}
.dealer_order__voucher{
  background-color: #f2f2f2;  color: #000;
}
.dealer_order__listitem{
  border-top: 1px solid #DDD;
  line-height: 20px;
}
.dealer_order__listitem > .col{
  padding-top: 10px; padding-bottom: 10px;
}
.dealer_order__header__code{
  -ms-flex: 0 0 380px; flex: 0 0 380px; max-width: 380px;
}
.dealer_order__item_photo{
  -ms-flex: 0 0 80px; flex: 0 0 80px; max-width: 80px;
  padding-right: 0;
}
.dealer_order__item_price{
  -ms-flex: 0 0 150px; flex: 0 0 150px; max-width: 150px;
  text-align: right;
}
.dealer_order__item_qty{
  -ms-flex: 0 0 120px; flex: 0 0 120px; max-width: 120px;
  text-align: right;
}
.dealer_order__item_amount{
  -ms-flex: 0 0 150px; flex: 0 0 150px; max-width: 150px;
  font-weight: 500;
  text-align: right;
}
.dealer_order__item_product__name{
  margin: 0 0 5px; padding: 0;
  font-size: 13px; font-weight: bold; text-transform: uppercase;
  color: #000;
}
.dealer_order__item_product__code{
  font-weight: 500;
  font-size: 13px;
}
.dealer_order__item_product__code b{
    color: var( --color-red);
}
.dealer_order__container .btn_showxs,
.dealer_order__item_product__qty{
  display: none;
}
/****************/