body fonts*/ body {
    font-family: 'Noto Sans TC', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

p {
    color: #4d4d4d;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #4d4d4d;
}


/*end body fonts*/

.tool-icon-box {
    color: #797979;
}

.tool-icon-box:hover {
    color: #3a3a3a;
}

.check-out-button {
    background-color: #ee58a0;
    color: #FFFFFF;
    border-radius: 0.3em;
    padding: 0.1em 0.4em;
}

.check-out-button:hover {
    background-color: #e996be;
    color: #FFFFFF;
}


/*slide menu*/

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    /*background-color: #111;*/
    background-color: #f2f2f2;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.palegrey {
    color: #e9eaea;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}


/*end slide menu*/


/*bottom button*/

.btn-top {
    color: #013933;
    border: 2px solid #013933;
}

.btn-top:hover {
    background-color: #013933;
}


/*end bottom button*/


/*custom second nav bar color*/

.secondnav .navbar-nav .nav-link.active {
    color: #02A99E;
}

.secondnav .navbar-nav .nav-link {
    color: #4d4d4d;
}

.secondnav .navbar-nav .nav-link:hover {
    color: #02A99E;
}


/*end custom second nav bar color*/


/*third row bg color*/

.innershadow {
    /*#b14277 color not very good*/
    border: 1px #02A99E solid;
    box-shadow: inset 0px 15px 6px -10px #02A99E, inset 0px -15px 6px -10px #02A99E;
}

.bgpink {
    background-color: #ef59a1;
}

input[type=checkbox] {
    accent-color: #02A99E !important;
}

.thidinfo {
    color: #FFFFFF;
}

.pink {
    color: #02A99E;
}

.pinkbutton {
    color: #ffffff;
    background-color: #02A99E;
    border-radius: 0rem;
}

.pinkbutton:hover {
    color: #ffffff;
    background-color: #02A99E;
}

.customgrey {
    color: #d9d9d9;
}

.greylinkbutton {
    color: #bdbdbd;
}

.hreflink:hover {
    color: #02A99E !important;
}

.fa-chevron-down:before {
    content: "\f078";
    color: #02A99E !important;
}

.greylinkbutton:hover {
    color: #02A99E;
}

.active {
    color: #02A99E;
}

.breadcrumb li+li:before {
    content: " / ";
    color: #bdbdbd;
}

.logo_image {
    max-width: 300px;
    position: absolute;
    top: 20px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #02A99E;
}

.link a {
    display: block;
    width: 100%;
}

@media(max-width:767px) {
    .logo_image {
        max-width: 170px;
        position: absolute;
        top: 30px;
    }
}


/*end third row*/


/*footer background color*/

.footerbg {
    background-color: #02A99E;
}

.footertext {
    color: #FFFFFF;
}

.footerlinkhover:hover {
   color: #ffff;
}


/*front page*/

.frontcart {
    border-radius: 15px;
    -webkit-box-shadow: 0px 9px 14px 1px #C9C9C9;
    box-shadow: 0px 9px 14px 1px #C9C9C9;
    border: 0px;
}

.frontcartimg {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.frontcarttitle {
    color: #ffffff;
    font-weight: 300;
    text-shadow: 2px 2px 5px #3c3530;
}

.form-control:focus {
    border-color: #ef59a1;
}

[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
    background: #02A99E;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    /*background-color: #ef59a1!important;
    border-color: #ef59a1;*/
    background-color: #02A99E!important;
    border-color: #02A99E;
}

.custom-checkbox .custom-control-input:checked:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #ef59a1, 0 0 0 0.2rem rgba(239, 89, 161, 0.25);
    border-color: #ef59a1;
}

.custom-checkbox .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #ef59a1, 0 0 0 0.2rem rgba(239, 89, 161, 0.25);
    border-color: #ef59a1;
}

.custom-checkbox .custom-control-input:active~.custom-control-label::before {
    background-color: #ef59a1;
    border-color: #ef59a1;
}


/*end front page*/


/*category*/

.categorylink {
    color: #4D4D4D;
}


/*
.categorylink:hover {
    color: #ef59a1;
}

.categorylinkpink {
    color: #ef59a1!important;
}*/

.categorylink:hover {
    color: #02A99E;
}

.categorylinkpink {
    color: #02A99E !important;
}

.strikediag {
    display: inline-block;
    position: relative;
}

.strikediag::before {
    content: '';
    position: absolute;
    left: -0.1em;
    right: -0.1em;
    top: 0.38em;
    bottom: 0.38em;
    background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
    pointer-events: none;
}

.categoryonsaleprice {
    color: #bcbcbc;
}

.categoryprice {
    /* color: #f058a1; */
    color: #02A99E;
}

.categorytext {
    color: #FFFFFF;
}


/*card body*/

.card-body {
    padding: 0.50rem;
}

.product-name {
    height: 72px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

@media (min-width: 768px) {
    .product-name {
        height: 36px;
        line-height: 18px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

.text-grey {
    color: #4d4d4d;
}

.text-greylink:hover {
    color: #02A99E;
}


/*end card body*/

.selectbox {
    border-radius: 10px;
    border: 1px solid #AAAAAA;
    text-align-last: center;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    background: rgba(255, 255, 255, 0.3);
}


/* @media (min-width: 576px) { 
.selectbox{
  padding-top: 10px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 10px;
}

 }
*/


/* Medium devices (tablets, 768px and up)*/


/*@media (min-width: 768px) { 
  .selectbox{
  padding-top: 10px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 10px;
} 

}
*/


/* Large devices (desktops, 992px and up)*/


/*@media (min-width: 992px) { .selectbox{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
} }
*/


/* Extra large devices (large desktops, 1200px and up)*/


/*@media (min-width: 1200px) {
  .selectbox{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
} }
*/

.selectboxOption {
    color: #4c4c4c;
    background: rgba(255, 255, 255, 0.3);
}


/*.selectbox option:hover {
 background-color: yellow;
}
.selectbox option:checked,
.selectbox option:hover {
  box-shadow: 0 0 10px 100px #000 inset;
}

.selectbox > option:hover
    {
        color: #1B517E;
        cursor: pointer;
    }*/


/*range slider*/


/* .irs--flat .irs-handle>i:first-child {
    background-color: #4c4c4c!important;//Replace With Your color code
}
.irs--flat .irs-bar {
    background-color: #4c4c4c!important;//Replace With Your color code
}
.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single {
    background-color: #4c4c4c!important;//Replace With Your color code
}
.irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before {
    border-top-color: #4c4c4c!important;//Replace With Your color code
}
*/

.irs--round .irs-line,
.irs--round .irs-bar {
    height: 3px;
}

.irs--round .irs-bar {
    background-color: #4c4c4c;
}

.irs--round .irs-handle {
    border: 2px solid #4c4c4c;
    background-color: #4c4c4c;
}

.irs--round .irs-handle:hover {
    border: 2px solid #4c4c4c;
    background-color: #4c4c4c;
}

.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single,
.irs--round .irs-min,
.irs--round .irs-max {
    font-size: 12px;
}

.irs--round .irs-from,
.irs--round .irs-to {
    background-color: #4c4c4c;
}

.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before {
    border-top-color: #4c4c4c;
}


/*end range slider*/


/*pagination link color*/

.pagination li.active {
    background-color: #02A99E;
    color: white;
    border-radius: 0px;
}

.pagination ul>li.active>a {
    border-color: #02A99E;
    background-color: #02A99E;
}


/*end pagination link color*/


/*end category


/*product detail page*/

.pricelabel {
    font-size: 1.5em;
}

.discountline {
    color: #b3b3b3;
}

.discountprice {
    font-size: 2.5em;
    color: #b3b3b3;
}

.originalprice {
    font-size: 2.5em;
    color: #02A99E;
}

.productwish {
    color: #4d4d4d;
}

.productwish:hover {
    color: #02A99E;
}

.cart-btn {
    width: 100%;
    border-radius: 12px;
    font-size: 1.5em;
}

.num-block {
    width: 100%;
}

.skin-2 .num-in {
    width: 100%;
}

.skin-2 .num-in span {
    width: 15%;
    background-color: #e6e6e6;
    /*cursor: pointer;*/
}

.skin-2 .num-in input {
    width: 70%;
    border: 1px solid #d9d9d9;
    /*cursor: pointer;*/
}

.skin-2 .num-in .minus {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 1px solid #d9d9d9;
}

.skin-2 .num-in .plus {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid #d9d9d9;
}


/*end product detail page*/


/*user admin area*/

.navi ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navi .active a {
    background: #ebebeb;
    /*background: #FFFFFF;*/
    /*border-left: 5px solid #5584ff;*/
    /*padding-left: 15px;*/
}

.navi a {
    border-bottom: 0px solid #0d172e;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    /*border-top: 1px solid #0d172e;*/
    color: #424242;
    display: block;
    font-size: 17px;
    font-weight: 500;
    padding: 4px 15px;
    text-decoration: none;
    margin-bottom: 5px;
    background: #FFFFFF;
}

@media (min-width: 768px) {
    .navi a {
        border-left: 0px solid #d9d9d9;
        border-right: 0px solid #d9d9d9;
        border-bottom: 1px solid #0d172e;
        /*border-top: 1px solid #0d172e;*/
        color: #424242;
        display: block;
        font-size: 17px;
        font-weight: 500;
        padding: 15px 15px;
        text-decoration: none;
        margin-bottom: 0px;
    }
}


/*end user admin area*/


/*checkout cart*/

.skin-3 .num-in .minus {
    /*border-top-left-radius: 10px;*/
    /*border-bottom-left-radius: 10px;*/
    /*border: 1px solid #d9d9d9;*/
}

.skin-3 .num-in span {
    width: 20%;
    /*background-color: #e6e6e6;*/
    /* cursor: pointer; */
}

.skin-3 .num-in span {
    /*width: 36%;*/
    cursor: pointer;
}

.skin-3 .num-in span:before,
.skin-3 .num-in span:after {
    content: '';
    position: absolute;
    background-color: #667780;
    height: 2px;
    width: 10px;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    margin-left: -5px;
}

.skin-3 .num-in span.plus:after {
    -webkit-transform: rotate( 90deg);
    transform: rotate( 90deg);
}

.skin-3 .num-in input {
    /*width: 60%;*/
    border-bottom: 1px solid #d9d9d9;
    border-top: 0px solid #d9d9d9;
    border-right: 0px solid #d9d9d9;
    border-left: 0px solid #d9d9d9;
    /* cursor: pointer; */
}

.skin-3 .num-in input {
    width: 60%;
    border-bottom: 1px solid #d9d9d9;
    border-top: 0px solid #d9d9d9;
    border-right: 0px solid #d9d9d9;
    border-left: 0px solid #d9d9d9;
    /* cursor: pointer; */
}

.skin-3 .num-in input:focus {
    outline: none;
    border-bottom: 1px solid #ef59a0;
}

.removetext {
    /*color:#667780;*/
    color: #212529;
}

.removetext:hover {
    color: #ef59a0;
    background: #ffffff;
}

.skin-3 .num-in input {
    width: 30%;
}

@media (min-width: 768px) {
    .skin-3 .num-in input {
        width: 60%;
    }
}

.couponbtn {
    background: #b3b3b3;
}

.couponbtn:hover {
    background: #ef59a1;
}

.cartheadline {
    border-bottom: 0px solid #ececec;
}

@media (min-width: 768px) {
    .cartheadline {
        border-bottom: 1px solid #ececec;
    }
}


/*.skin-3 .num-in span:hover:after {
  background-color: #ef59a0;
}
.skin-3 .num-in span.plus:hover:after {
  background-color: #ef59a0;
}*/

.paymentdetailsbg {
    background-color: #e0e0e0;
}

.paymentdetailsbg2 {
    background-color: #ececec;
}

.checkoutbtn {
    background-color: #02A99E;
    color: #ffffff;
}

.checkoutbtn:hover {
    color: #ffffff;
    background-color: #02A99E;
}


/*end checkout cart*/


/*customer area*/

.weblink {
    color: #ef59a1;
}

.weblink:hover {
    color: #e996be;
}

.greybg {
    background-color: #d9d9d9;
}

.greybgchange:hover {
    background-color: #f2f2f2;
}

.deepgrey {
    color: #b4b4b4;
}

.bggreen {
    background: #02A99E;
}

.color_green {
    color: #02A99E;
}


/*end customer area*/


/*start toast css*/

.jq-toast-wrap {
    /* display: flex;
  flex-wrap: wrap; */
    width: 100%;
    max-width: 580px;
}

.order_time {
   /* padding-top: 10px;*/
   padding-top:5px;
}

.jq-toast-wrap>div {
    display: inline-block !important;
    vertical-align: middle;
}

.jq-toast-wrap .left_img {
    /*width: 25% !important;*/
    width: 15% !important;
    margin-right: 20px;
}

.jq-toast-wrap .jq-toast-single {
    width: 80%;
}



.jq-icon-success {
    padding: 10px 10px;
    background-size: 60px;
}

.jq-toast-single h2 {
    margin-left: 80px;
}


.jq-toast-single .content {
    margin-left: 80px;
    padding-right: 10px;
    color: black;
    font-size: 14px;
}

.close-jq-toast-single {
    color: black;
}

.jq-toast-single h2 {
    font-size: 10px !important;
    color: black;
}


.jq-toast-single .order_time {
    color: #3f51b5;
    font-size: 10px !important;
}

.jq-toast-loader {
    display: none;
}

.jq-toast-single {
    border: 1px solid #ccc;
}

.link_wrapper {
    display: inline-block;
    width: calc( 75% - 20px) !important;
    vertical-align: middle;
}

.jq-toast-wrap.bottom-left {
    /*bottom: 15%;*/
    bottom:10px;
}

@media(max-width:767px) {
    .jq-toast-wrap {
        max-width: 100%;
        left: 0px !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    .jq-toast-wrap .left_img {
        width: 35% !important;
        margin-right: 10px;
    }
    .link_wrapper {
        width: calc( 65% - 10px) !important;
    }
    .jq-toast-wrap .jq-toast-single {
        width: 100%;
    }
    
    .jq-toast-single h2 {
        font-size: 10px !important;
        color: black;
    }
    
    
    .jq-toast-single .order_time {
        color: #3f51b5;
        font-size: 10px !important;
    }

}

.dropdown-menu.show {
    /*display: none !important;*/
}

.dropdown-item::after {
    content: "";
    display: inline-block;
    height: 0.45em;
    width: 0.45em;
    margin-left: 0.7em;
    vertical-align: 0.3em;
    border-color: initial;
    border-style: solid;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(-135deg) translateY(-50%);
    transform: rotate(-135deg) translateY(-50%);
    margin-top: -5px;
}


.left_logo_section{
    height:140px;
	position: relative;
}


.form-control:focus {
    border-color: #02A99E !important;
}




.sidecartcheckout{
    position: absolute;
    z-index: 999999999999999999999;
    width: 90%;
}

#mySidecartmenu{
    z-index: 10001 !important;
}

@media(max-width:767px){
    .left_logo_section {
        height: 180px;
        position: relative;
    }
    
    .logo_image {
        max-width: 320px;
        position: absolute;
        top: 20px;
    }

}

/*end toast css*/